diff --git a/packages/react/src/ActionBar/ActionBar.tsx b/packages/react/src/ActionBar/ActionBar.tsx index 7046dc44984..2f75ab3b208 100644 --- a/packages/react/src/ActionBar/ActionBar.tsx +++ b/packages/react/src/ActionBar/ActionBar.tsx @@ -223,7 +223,7 @@ export const ActionBar: React.FC> = prop const newMenuItemIds = getMenuItems(navWidth, moreMenuWidth, childRegistry, hasActiveMenu, computedGap) if (newMenuItemIds) setMenuItemIds(newMenuItemIds) } - }, navRef as RefObject) + }, navRef as RefObject) const isVisibleChild = useCallback( (id: string) => { @@ -426,7 +426,7 @@ const ActionBarGroupContext = React.createContext<{ export const ActionBarGroup = forwardRef(({children}: React.PropsWithChildren, forwardedRef) => { const backupRef = useRef(null) - const ref = (forwardedRef ?? backupRef) as RefObject + const ref = (forwardedRef ?? backupRef) as RefObject const id = useId() const {registerChild, unregisterChild} = React.useContext(ActionBarContext) diff --git a/packages/react/src/ActionList/List.tsx b/packages/react/src/ActionList/List.tsx index c5c3860f6fb..78827f3d3b5 100644 --- a/packages/react/src/ActionList/List.tsx +++ b/packages/react/src/ActionList/List.tsx @@ -41,7 +41,7 @@ const UnwrappedList = ( const ariaLabelledBy = slots.heading ? (slots.heading.props.id ?? headingId) : listLabelledBy const listRole = role || listRoleFromContainer - const listRef = useProvidedRefOrCreate(forwardedRef as React.RefObject) + const listRef = useProvidedRefOrCreate(forwardedRef as React.RefObject) let enableFocusZone = false if (enableFocusZoneFromContainer !== undefined) enableFocusZone = enableFocusZoneFromContainer diff --git a/packages/react/src/AnchoredOverlay/AnchoredOverlay.tsx b/packages/react/src/AnchoredOverlay/AnchoredOverlay.tsx index 0ba6cf0b174..407e4a4649a 100644 --- a/packages/react/src/AnchoredOverlay/AnchoredOverlay.tsx +++ b/packages/react/src/AnchoredOverlay/AnchoredOverlay.tsx @@ -27,7 +27,7 @@ interface AnchoredOverlayPropsWithAnchor { /** * An override to the internal ref that will be spread on to the renderAnchor */ - anchorRef?: React.RefObject + anchorRef?: React.RefObject /** * An override to the internal id that will be spread on to the renderAnchor @@ -46,7 +46,7 @@ interface AnchoredOverlayPropsWithoutAnchor { * An override to the internal renderAnchor ref that will be used to position the overlay. * When renderAnchor is null this can be used to make an anchor that is detached from ActionMenu. */ - anchorRef: React.RefObject + anchorRef: React.RefObject /** * An override to the internal id that will be spread on to the renderAnchor */ diff --git a/packages/react/src/Autocomplete/Autocomplete.features.stories.tsx b/packages/react/src/Autocomplete/Autocomplete.features.stories.tsx index 5caa78482e3..66f4b839dfa 100644 --- a/packages/react/src/Autocomplete/Autocomplete.features.stories.tsx +++ b/packages/react/src/Autocomplete/Autocomplete.features.stories.tsx @@ -457,12 +457,12 @@ export const CustomOverlayMenuAnchor = () => { const menuAnchorRef = useRef(null) return ( -
+ ( Default label -
} className={classes.AnchorContainer}> +
} className={classes.AnchorContainer}> { The overlay menu position is anchored to the div with the black border instead of to the text input - - ) + ) + ); } export const InOverlayWithCustomScrollContainerRef = () => { @@ -504,8 +504,7 @@ export const InOverlayWithCustomScrollContainerRef = () => { } return ( -
- Selected item: {selectedItem ? selectedItem.text : 'none'} + (Selected item: {selectedItem ? selectedItem.text : 'none'} {
-
} className={classes.OverlayScroll}> +
} className={classes.OverlayScroll}> {
- - ) + ) + ); } export const InADialog = () => { diff --git a/packages/react/src/Autocomplete/AutocompleteOverlay.tsx b/packages/react/src/Autocomplete/AutocompleteOverlay.tsx index d72494a7545..aa83ed23a7f 100644 --- a/packages/react/src/Autocomplete/AutocompleteOverlay.tsx +++ b/packages/react/src/Autocomplete/AutocompleteOverlay.tsx @@ -14,7 +14,7 @@ type AutocompleteOverlayInternalProps = { /** * The ref of the element that the position of the menu is based on. By default, the menu is positioned based on the text input */ - menuAnchorRef?: React.RefObject + menuAnchorRef?: React.RefObject /** * Props to be spread on the internal `Overlay` component. */ @@ -60,7 +60,7 @@ function AutocompleteOverlay({ preventFocusOnOpen={true} onClickOutside={closeOptionList} onEscape={closeOptionList} - ref={floatingElementRef as React.RefObject} + ref={floatingElementRef as React.RefObject} top={position?.top} left={position?.left} className={classes.Overlay} @@ -71,8 +71,8 @@ function AutocompleteOverlay({ ) : ( // HACK: This ensures AutocompleteMenu is still mounted when closing the menu and all of the hooks inside of it are still called. // A better way to do this would be to move the hooks to AutocompleteOverlay or somewhere that won't get unmounted. - - ) + () + ); } AutocompleteOverlay.displayName = 'AutocompleteOverlay' diff --git a/packages/react/src/AvatarStack/AvatarStack.tsx b/packages/react/src/AvatarStack/AvatarStack.tsx index 9661161a24c..2b62bbab72b 100644 --- a/packages/react/src/AvatarStack/AvatarStack.tsx +++ b/packages/react/src/AvatarStack/AvatarStack.tsx @@ -38,7 +38,7 @@ const AvatarStackBody = ({ }: { disableExpand: boolean | undefined hasInteractiveChildren: boolean | undefined - stackContainer: React.RefObject + stackContainer: React.RefObject } & React.ComponentPropsWithoutRef<'div'>) => { return (
{child}
) - const buttonRef = useProvidedRefOrCreate(forwardRef as React.RefObject) + const buttonRef = useProvidedRefOrCreate(forwardRef as React.RefObject) useFocusZone({ containerRef: buttonRef, diff --git a/packages/react/src/Checkbox/Checkbox.tsx b/packages/react/src/Checkbox/Checkbox.tsx index fe593f0ac45..2b96025bc85 100644 --- a/packages/react/src/Checkbox/Checkbox.tsx +++ b/packages/react/src/Checkbox/Checkbox.tsx @@ -20,7 +20,7 @@ export type CheckboxProps = { /** * Forward a ref to the underlying input element */ - ref?: React.RefObject + ref?: React.RefObject /** * Indicates whether the checkbox must be checked */ @@ -44,7 +44,7 @@ const Checkbox = React.forwardRef( {checked, className, defaultChecked, indeterminate, disabled, onChange, required, validationStatus, value, ...rest}, ref, ): ReactElement => { - const checkboxRef = useProvidedRefOrCreate(ref as React.RefObject) + const checkboxRef = useProvidedRefOrCreate(ref as React.RefObject) const checkboxGroupContext = useContext(CheckboxGroupContext) const handleOnChange: ChangeEventHandler = e => { checkboxGroupContext.onChange && checkboxGroupContext.onChange(e) diff --git a/packages/react/src/ConfirmationDialog/ConfirmationDialog.tsx b/packages/react/src/ConfirmationDialog/ConfirmationDialog.tsx index e6e1cb6ffe3..4ec03dff67d 100644 --- a/packages/react/src/ConfirmationDialog/ConfirmationDialog.tsx +++ b/packages/react/src/ConfirmationDialog/ConfirmationDialog.tsx @@ -108,10 +108,10 @@ const ConfirmationFooter: React.FC> = ({foo // Must have exactly 2 buttons! return ( -
} className={classes.ConfirmationFooter}> + (
} className={classes.ConfirmationFooter}> -
- ) +
) + ); } /** diff --git a/packages/react/src/Dialog/Dialog.tsx b/packages/react/src/Dialog/Dialog.tsx index f646770a29f..50a83db0608 100644 --- a/packages/react/src/Dialog/Dialog.tsx +++ b/packages/react/src/Dialog/Dialog.tsx @@ -44,7 +44,7 @@ export type DialogButtonProps = Omit & { * A reference to the rendered Button’s DOM node, used together with * `autoFocus` for `focusTrap`’s `initialFocus`. */ - ref?: React.RefObject + ref?: React.RefObject } /** @@ -136,12 +136,12 @@ export interface DialogProps { * Return focus to this element when the Dialog closes, * instead of the element that had focus immediately before the Dialog opened */ - returnFocusRef?: React.RefObject + returnFocusRef?: React.RefObject /** * The element to focus when the Dialog opens */ - initialFocusRef?: React.RefObject + initialFocusRef?: React.RefObject /** * Additional class names to apply to the dialog @@ -215,10 +215,10 @@ const DefaultFooter: React.FC> = ({footerBu focusInStrategy: 'closest', }) return footerButtons ? ( - }> + }> - ) : null + ) : null; } const defaultPosition = { diff --git a/packages/react/src/FilteredActionList/FilteredActionList.tsx b/packages/react/src/FilteredActionList/FilteredActionList.tsx index 61ccb33538e..f813d410738 100644 --- a/packages/react/src/FilteredActionList/FilteredActionList.tsx +++ b/packages/react/src/FilteredActionList/FilteredActionList.tsx @@ -33,9 +33,9 @@ export interface FilteredActionListProps extends Partial | null) => void onListContainerRefChanged?: (ref: HTMLElement | null) => void - onInputRefChanged?: (ref: React.RefObject) => void + onInputRefChanged?: (ref: React.RefObject) => void textInputProps?: Partial> - inputRef?: React.RefObject + inputRef?: React.RefObject message?: React.ReactNode messageText?: { title: string diff --git a/packages/react/src/FilteredActionList/useAnnouncements.tsx b/packages/react/src/FilteredActionList/useAnnouncements.tsx index 0bf43b92ee5..bfe69bd6ee4 100644 --- a/packages/react/src/FilteredActionList/useAnnouncements.tsx +++ b/packages/react/src/FilteredActionList/useAnnouncements.tsx @@ -20,7 +20,7 @@ const useFirstRender = () => { //TODO remove this when we remove usingRemoveActiveDescendant const getItemWithActiveDescendant = ( - listRef: React.RefObject, + listRef: React.RefObject, items: FilteredActionListProps['items'], ) => { const listElement = listRef.current @@ -42,8 +42,8 @@ const getItemWithActiveDescendant = ( export const useAnnouncements = ( items: FilteredActionListProps['items'], - listContainerRef: React.RefObject, - inputRef: React.RefObject, + listContainerRef: React.RefObject, + inputRef: React.RefObject, enabled: boolean = true, loading: boolean = false, message?: {title: string; description: string}, diff --git a/packages/react/src/LabelGroup/LabelGroup.tsx b/packages/react/src/LabelGroup/LabelGroup.tsx index 42a01a4c0f6..2bbbd564975 100644 --- a/packages/react/src/LabelGroup/LabelGroup.tsx +++ b/packages/react/src/LabelGroup/LabelGroup.tsx @@ -19,12 +19,12 @@ export type LabelGroupProps = { // Calculates the width of the overlay to cover the labels/tokens and the expand button. const getOverlayWidth = ( buttonClientRect: DOMRect, - containerRef: React.RefObject, + containerRef: React.RefObject, overlayPaddingPx: number, ) => overlayPaddingPx + buttonClientRect.right - (containerRef.current?.getBoundingClientRect().left || 0) const InlineToggle: React.FC<{ - collapseButtonRef: React.RefObject + collapseButtonRef: React.RefObject collapseInlineExpandedChildren: () => void expandButtonRef: React.RefCallback hiddenItemIds: string[] @@ -81,7 +81,7 @@ const OverlayToggle: React.FC< align="start" side="inside-right" // expandButtonRef satisfies React.RefObject because we manually set `.current` in the `useCallback` above - anchorRef={expandButtonRef as unknown as React.RefObject} + anchorRef={expandButtonRef as unknown as React.RefObject} anchorOffset={overlayPaddingPx * -1} alignmentOffset={overlayPaddingPx * -1} renderAnchor={props => ( diff --git a/packages/react/src/Overlay/Overlay.tsx b/packages/react/src/Overlay/Overlay.tsx index b4d917154a6..03154550940 100644 --- a/packages/react/src/Overlay/Overlay.tsx +++ b/packages/react/src/Overlay/Overlay.tsx @@ -137,14 +137,14 @@ export const BaseOverlay = React.forwardRef( type ContainerProps = { anchorSide?: AnchorSide - ignoreClickRefs?: React.RefObject[] - initialFocusRef?: React.RefObject + ignoreClickRefs?: React.RefObject[] + initialFocusRef?: React.RefObject onClickOutside: (e: TouchOrMouseEvent) => void onEscape: (e: KeyboardEvent) => void portalContainerName?: string preventOverflow?: boolean preventFocusOnOpen?: boolean - returnFocusRef: React.RefObject + returnFocusRef: React.RefObject } type internalOverlayProps = Merge diff --git a/packages/react/src/Overlay/Overlay.types.test.tsx b/packages/react/src/Overlay/Overlay.types.test.tsx index 613438c8c25..210d9589c2c 100644 --- a/packages/react/src/Overlay/Overlay.types.test.tsx +++ b/packages/react/src/Overlay/Overlay.types.test.tsx @@ -1,26 +1,26 @@ import type React from 'react' import Overlay from './Overlay' -export function shouldAcceptCallWithNoProps(ref: React.RefObject) { +export function shouldAcceptCallWithNoProps(ref: React.RefObject) { return null} onEscape={() => null} /> } -export function shouldAcceptCallWithDOMProps(ref: React.RefObject) { +export function shouldAcceptCallWithDOMProps(ref: React.RefObject) { return null} onEscape={() => null} onMouseDown={() => null} /> } -export function shouldNotAcceptCallWithDOMPropsThatDontMatchElement(ref: React.RefObject) { +export function shouldNotAcceptCallWithDOMPropsThatDontMatchElement(ref: React.RefObject) { // @ts-expect-error href should not be allowed on a
return null} onEscape={() => null} href="//primer.style/" /> } -export function shouldAcceptCallWithAsAndDOMProps(ref: React.RefObject) { +export function shouldAcceptCallWithAsAndDOMProps(ref: React.RefObject) { return ( null} onEscape={() => null} href="//primer.style/" /> ) } -export function shouldNotAcceptSystemProps(ref: React.RefObject) { +export function shouldNotAcceptSystemProps(ref: React.RefObject) { return ( >( ({children, className, as: BaseComponent = 'div', 'aria-label': ariaLabel, role, hasBorder}, forwardedRef) => { - const rootRef = useProvidedRefOrCreate(forwardedRef as React.RefObject) + const rootRef = useProvidedRefOrCreate(forwardedRef as React.RefObject) const isInteractive = (element: HTMLElement) => { return ( @@ -204,7 +204,7 @@ export type TitleAreaProps = { const TitleArea = React.forwardRef>( ({children, className, hidden = false, variant = 'medium'}, forwardedRef) => { - const titleAreaRef = useProvidedRefOrCreate(forwardedRef as React.RefObject) + const titleAreaRef = useProvidedRefOrCreate(forwardedRef as React.RefObject) const currentVariant = useResponsiveValue(variant, 'medium') return (
+ paneRef: React.RefObject }>({ padding: 'normal', rowGap: 'normal', @@ -261,7 +261,7 @@ const VerticalDivider: React.FC {draggable ? ( // Drag handle -
+ />) ) : null} -
- ) +
) + ); } // ---------------------------------------------------------------------------- diff --git a/packages/react/src/Popover/Popover.tsx b/packages/react/src/Popover/Popover.tsx index 6eb3a0d9fea..a6a61d2a9cc 100644 --- a/packages/react/src/Popover/Popover.tsx +++ b/packages/react/src/Popover/Popover.tsx @@ -5,7 +5,7 @@ import React, {useRef} from 'react' import {useOnOutsideClick} from '../hooks' // Stable empty array reference to avoid unnecessary re-renders -const EMPTY_IGNORE_CLICK_REFS: React.RefObject[] = [] +const EMPTY_IGNORE_CLICK_REFS: React.RefObject[] = [] type CaretPosition = | 'top' @@ -62,7 +62,7 @@ export type PopoverContentProps = { /* * Refs to elements that should be ignored when detecting outside clicks */ - ignoreClickRefs?: React.RefObject[] + ignoreClickRefs?: React.RefObject[] } & HTMLProps const PopoverContent: React.FC> = ({ diff --git a/packages/react/src/Radio/Radio.tsx b/packages/react/src/Radio/Radio.tsx index 16a98b94a53..59ed4846be5 100644 --- a/packages/react/src/Radio/Radio.tsx +++ b/packages/react/src/Radio/Radio.tsx @@ -27,7 +27,7 @@ export type RadioProps = { /** * Forward a ref to the underlying input element */ - ref?: React.RefObject + ref?: React.RefObject /** * Indicates whether the radio button must be checked before the form can be submitted */ diff --git a/packages/react/src/SelectPanel/SelectPanel.tsx b/packages/react/src/SelectPanel/SelectPanel.tsx index 7aa5fef65ce..c4dc3e4bb5a 100644 --- a/packages/react/src/SelectPanel/SelectPanel.tsx +++ b/packages/react/src/SelectPanel/SelectPanel.tsx @@ -198,7 +198,7 @@ function Panel({ const loadingDelayTimeoutId = useRef(null) const loadingManagedInternally = loading === undefined const loadingManagedExternally = !loadingManagedInternally - const [inputRef, setInputRef] = React.useState | null>(null) + const [inputRef, setInputRef] = React.useState | null>(null) const [listContainerElement, setListContainerElement] = useState(null) const [needsNoItemsAnnouncement, setNeedsNoItemsAnnouncement] = useState(false) const isNarrowScreenSize = useResponsiveValue({narrow: true, regular: false, wide: false}, false) @@ -241,7 +241,7 @@ function Panel({ ) const onInputRefChanged = useCallback( - (ref: React.RefObject) => { + (ref: React.RefObject) => { setInputRef(ref) }, [setInputRef], diff --git a/packages/react/src/Skeleton/SkeletonBox.tsx b/packages/react/src/Skeleton/SkeletonBox.tsx index eb52dc7800b..b0ae116d9cc 100644 --- a/packages/react/src/Skeleton/SkeletonBox.tsx +++ b/packages/react/src/Skeleton/SkeletonBox.tsx @@ -17,11 +17,11 @@ export const SkeletonBox = React.forwardRef(funct ref, ) { return ( -
} + (
} className={clsx(className, classes.SkeletonBox)} style={{height, width, ...(style || {})}} {...props} - /> - ) + />) + ); }) diff --git a/packages/react/src/TabNav/TabNav.tsx b/packages/react/src/TabNav/TabNav.tsx index 876e130160f..eb1105774fc 100644 --- a/packages/react/src/TabNav/TabNav.tsx +++ b/packages/react/src/TabNav/TabNav.tsx @@ -51,14 +51,14 @@ function TabNav({children, 'aria-label': ariaLabel, ...rest}: TabNavProps) { ) return ( -
}> + (
}> -
- ) +
) + ); } /** diff --git a/packages/react/src/TextInput/TextInput.tsx b/packages/react/src/TextInput/TextInput.tsx index 5aa61e3040a..69565e4858d 100644 --- a/packages/react/src/TextInput/TextInput.tsx +++ b/packages/react/src/TextInput/TextInput.tsx @@ -90,7 +90,7 @@ const TextInput = React.forwardRef( ref, ) => { const [isInputFocused, setIsInputFocused] = useState(false) - const inputRef = useProvidedRefOrCreate(ref as React.RefObject) + const inputRef = useProvidedRefOrCreate(ref as React.RefObject) // this class is necessary to style FilterSearch, plz no touchy! const wrapperClasses = clsx(className, 'TextInput-wrapper') const showLeadingLoadingIndicator = diff --git a/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx b/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx index 03d90d0d25b..c705a5916b1 100644 --- a/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx +++ b/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx @@ -255,7 +255,7 @@ function TextInputWithTokensInnerComponent : LeadingVisual}
} + ref={containerRef as RefObject} className={styles.Container} data-prevent-token-wrapping={preventTokenWrapping} > @@ -327,8 +327,8 @@ function TextInputWithTokensInnerComponent {typeof TrailingVisual !== 'string' && isValidElementType(TrailingVisual) ? : TrailingVisual} - - ) + ) + ); } const TextInputWithTokens = React.forwardRef(TextInputWithTokensInnerComponent) diff --git a/packages/react/src/TooltipV2/Tooltip.tsx b/packages/react/src/TooltipV2/Tooltip.tsx index cd4411a0dd9..5f9b3ae7e60 100644 --- a/packages/react/src/TooltipV2/Tooltip.tsx +++ b/packages/react/src/TooltipV2/Tooltip.tsx @@ -40,7 +40,7 @@ type TriggerPropsType = Pick< | 'onTouchCancel' | 'onTouchEnd' > & { - ref?: React.RefObject + ref?: React.RefObject } // map tooltip direction to anchoredPosition props @@ -113,7 +113,7 @@ export const Tooltip: ForwardRefExoticComponent< ) => { const tooltipId = useId(id) const child = Children.only(children) - const triggerRef = useProvidedRefOrCreate(forwardedRef as React.RefObject) + const triggerRef = useProvidedRefOrCreate(forwardedRef as React.RefObject) const tooltipElRef = useRef(null) const [calculatedDirection, setCalculatedDirection] = useState(direction) diff --git a/packages/react/src/TreeView/useRovingTabIndex.ts b/packages/react/src/TreeView/useRovingTabIndex.ts index ff6af01870d..4e5abd3a20b 100644 --- a/packages/react/src/TreeView/useRovingTabIndex.ts +++ b/packages/react/src/TreeView/useRovingTabIndex.ts @@ -6,8 +6,8 @@ export function useRovingTabIndex({ containerRef, mouseDownRef, }: { - containerRef: React.RefObject - mouseDownRef: React.RefObject + containerRef: React.RefObject + mouseDownRef: React.RefObject }) { // TODO: Initialize focus to the aria-current item if it exists useFocusZone({ diff --git a/packages/react/src/TreeView/useTypeahead.ts b/packages/react/src/TreeView/useTypeahead.ts index cfd5f35f6d4..a43844eb0f6 100644 --- a/packages/react/src/TreeView/useTypeahead.ts +++ b/packages/react/src/TreeView/useTypeahead.ts @@ -3,7 +3,7 @@ import useSafeTimeout from '../hooks/useSafeTimeout' import {getAccessibleName} from './shared' type TypeaheadOptions = { - containerRef: React.RefObject + containerRef: React.RefObject onFocusChange: (element: Element) => void } diff --git a/packages/react/src/UnderlineNav/UnderlineNav.tsx b/packages/react/src/UnderlineNav/UnderlineNav.tsx index c72f9c57577..6774a2f7353 100644 --- a/packages/react/src/UnderlineNav/UnderlineNav.tsx +++ b/packages/react/src/UnderlineNav/UnderlineNav.tsx @@ -151,7 +151,7 @@ export const UnderlineNav = forwardRef( forwardedRef, ) => { const backupRef = useRef(null) - const navRef = (forwardedRef ?? backupRef) as RefObject + const navRef = (forwardedRef ?? backupRef) as RefObject const listRef = useRef(null) const moreMenuRef = useRef(null) const moreMenuBtnRef = useRef(null) @@ -299,7 +299,7 @@ export const UnderlineNav = forwardRef( noIconChildWidthArray, updateListAndMenu, ) - }, navRef as RefObject) + }, navRef as RefObject) // Compute menuInlineStyles if needed let menuInlineStyles: React.CSSProperties = {...baseMenuInlineStyles} diff --git a/packages/react/src/UnderlineNav/UnderlineNavItem.tsx b/packages/react/src/UnderlineNav/UnderlineNavItem.tsx index 963f7c033f1..55cbef21af7 100644 --- a/packages/react/src/UnderlineNav/UnderlineNavItem.tsx +++ b/packages/react/src/UnderlineNav/UnderlineNavItem.tsx @@ -53,7 +53,7 @@ export const UnderlineNavItem = forwardRef( forwardedRef, ) => { const backupRef = useRef(null) - const ref = (forwardedRef ?? backupRef) as RefObject + const ref = (forwardedRef ?? backupRef) as RefObject const {setChildrenWidth, setNoIconChildrenWidth, loadingCounters, iconsVisible} = useContext(UnderlineNavContext) useLayoutEffect(() => { diff --git a/packages/react/src/deprecated/DialogV1/Dialog.tsx b/packages/react/src/deprecated/DialogV1/Dialog.tsx index b39af5aa2da..caad7a4ab2c 100644 --- a/packages/react/src/deprecated/DialogV1/Dialog.tsx +++ b/packages/react/src/deprecated/DialogV1/Dialog.tsx @@ -35,8 +35,8 @@ function DialogHeader({children, className, as: Component = 'div', ...rest}: Dia type InternalDialogProps = { isOpen?: boolean onDismiss?: () => void - initialFocusRef?: React.RefObject - returnFocusRef?: React.RefObject + initialFocusRef?: React.RefObject + returnFocusRef?: React.RefObject as?: React.ElementType } & StyledDialogBaseProps & HTMLAttributes diff --git a/packages/react/src/experimental/SelectPanel2/SelectPanel.tsx b/packages/react/src/experimental/SelectPanel2/SelectPanel.tsx index 04667c2b5d2..1de5b7f3930 100644 --- a/packages/react/src/experimental/SelectPanel2/SelectPanel.tsx +++ b/packages/react/src/experimental/SelectPanel2/SelectPanel.tsx @@ -63,7 +63,7 @@ export type SelectPanelProps = { defaultOpen?: boolean open?: boolean - anchorRef?: React.RefObject + anchorRef?: React.RefObject anchoredPositionSettings?: Partial onCancel?: () => void @@ -520,10 +520,10 @@ const SecondaryLink: React.FC = ({className, ...props}) => { return ( // @ts-ignore TODO: is as prop is not recognised by button? - - ) + ) + ); } const SecondaryCheckbox: React.FC = ({id, children, className, ...props}) => { diff --git a/packages/react/src/hooks/useAnchoredPosition.ts b/packages/react/src/hooks/useAnchoredPosition.ts index 960dd71a180..ff043d0da39 100644 --- a/packages/react/src/hooks/useAnchoredPosition.ts +++ b/packages/react/src/hooks/useAnchoredPosition.ts @@ -6,8 +6,8 @@ import {useResizeObserver} from './useResizeObserver' import useLayoutEffect from '../utils/useIsomorphicLayoutEffect' export interface AnchoredPositionHookSettings extends Partial { - floatingElementRef?: React.RefObject - anchorElementRef?: React.RefObject + floatingElementRef?: React.RefObject + anchorElementRef?: React.RefObject pinPosition?: boolean onPositionChange?: (position: AnchorPosition | undefined) => void } @@ -25,8 +25,8 @@ export function useAnchoredPosition( settings?: AnchoredPositionHookSettings, dependencies: React.DependencyList = [], ): { - floatingElementRef: React.RefObject - anchorElementRef: React.RefObject + floatingElementRef: React.RefObject + anchorElementRef: React.RefObject position: AnchorPosition | undefined } { const floatingElementRef = useProvidedRefOrCreate(settings?.floatingElementRef) @@ -99,7 +99,7 @@ export function useAnchoredPosition( useLayoutEffect(updatePosition, [updatePosition]) useResizeObserver(updatePosition) // watches for changes in window size - useResizeObserver(updatePosition, floatingElementRef as React.RefObject) // watches for changes in floating element size + useResizeObserver(updatePosition, floatingElementRef as React.RefObject) // watches for changes in floating element size return { floatingElementRef, diff --git a/packages/react/src/hooks/useDetails.tsx b/packages/react/src/hooks/useDetails.tsx index 17e1daf6b87..fc6a3d5dd8c 100644 --- a/packages/react/src/hooks/useDetails.tsx +++ b/packages/react/src/hooks/useDetails.tsx @@ -1,7 +1,7 @@ import {useCallback, useEffect, useState, useRef} from 'react' type UseDetailsParameters = { - ref?: React.RefObject + ref?: React.RefObject closeOnOutsideClick?: boolean defaultOpen?: boolean onClickOutside?: (event: MouseEvent) => void diff --git a/packages/react/src/hooks/useDialog.ts b/packages/react/src/hooks/useDialog.ts index f744d3aa500..4a91b3c56c9 100644 --- a/packages/react/src/hooks/useDialog.ts +++ b/packages/react/src/hooks/useDialog.ts @@ -13,13 +13,13 @@ function focusable(el: Element) { } type UseDialogParameters = { - modalRef: React.RefObject - overlayRef: React.RefObject + modalRef: React.RefObject + overlayRef: React.RefObject isOpen?: boolean onDismiss?: () => void - initialFocusRef?: React.RefObject - closeButtonRef?: React.RefObject - returnFocusRef?: React.RefObject + initialFocusRef?: React.RefObject + closeButtonRef?: React.RefObject + returnFocusRef?: React.RefObject } function useDialog({ diff --git a/packages/react/src/hooks/useFocusTrap.ts b/packages/react/src/hooks/useFocusTrap.ts index a552d70be26..ed58bf594d0 100644 --- a/packages/react/src/hooks/useFocusTrap.ts +++ b/packages/react/src/hooks/useFocusTrap.ts @@ -7,13 +7,13 @@ export interface FocusTrapHookSettings { * Ref that will be used for the trapping container. If not provided, one will * be created by this hook and returned. */ - containerRef?: React.RefObject + containerRef?: React.RefObject /** * Ref for the element that should receive focus when the focus trap is first enabled. If * not provided, one will be created by this hook and returned. Its use is optional. */ - initialFocusRef?: React.RefObject + initialFocusRef?: React.RefObject /** * Set to true to disable the focus trap and clean up listeners. Can be re-enabled at @@ -33,7 +33,7 @@ export interface FocusTrapHookSettings { * * Overrides restoreFocusOnCleanUp */ - returnFocusRef?: React.RefObject + returnFocusRef?: React.RefObject } /** @@ -44,7 +44,7 @@ export interface FocusTrapHookSettings { export function useFocusTrap( settings?: FocusTrapHookSettings, dependencies: React.DependencyList = [], -): {containerRef: React.RefObject; initialFocusRef: React.RefObject} { +): {containerRef: React.RefObject; initialFocusRef: React.RefObject} { const containerRef = useProvidedRefOrCreate(settings?.containerRef) const initialFocusRef = useProvidedRefOrCreate(settings?.initialFocusRef) const disabled = settings?.disabled diff --git a/packages/react/src/hooks/useFocusZone.ts b/packages/react/src/hooks/useFocusZone.ts index 3505cb35973..3c750443eb6 100644 --- a/packages/react/src/hooks/useFocusZone.ts +++ b/packages/react/src/hooks/useFocusZone.ts @@ -10,13 +10,13 @@ export interface FocusZoneHookSettings extends Omit + containerRef?: React.RefObject /** * If using the "active descendant" focus pattern, pass `true` or a ref to the controlling * element. If a ref object is not passed, we will create one for you. */ - activeDescendantFocus?: boolean | React.RefObject + activeDescendantFocus?: boolean | React.RefObject /** * Set to true to disable the focus zone and clean up listeners. Can be re-enabled at @@ -28,7 +28,7 @@ export interface FocusZoneHookSettings extends Omit; activeDescendantControlRef: React.RefObject} { +): {containerRef: React.RefObject; activeDescendantControlRef: React.RefObject} { const containerRef = useProvidedRefOrCreate(settings.containerRef) const useActiveDescendant = !!settings.activeDescendantFocus const passedActiveDescendantRef = diff --git a/packages/react/src/hooks/useMenuInitialFocus.ts b/packages/react/src/hooks/useMenuInitialFocus.ts index 811e9b5cd6b..2205a19c48a 100644 --- a/packages/react/src/hooks/useMenuInitialFocus.ts +++ b/packages/react/src/hooks/useMenuInitialFocus.ts @@ -3,8 +3,8 @@ import {iterateFocusableElements} from '@primer/behaviors/utils' export const useMenuInitialFocus = ( open: boolean, - containerRef?: React.RefObject, - anchorRef?: React.RefObject, + containerRef?: React.RefObject, + anchorRef?: React.RefObject, ) => { /** * We need to pick the first element to focus based on how the menu was opened, diff --git a/packages/react/src/hooks/useMenuKeyboardNavigation.ts b/packages/react/src/hooks/useMenuKeyboardNavigation.ts index 96150189354..16192f2e228 100644 --- a/packages/react/src/hooks/useMenuKeyboardNavigation.ts +++ b/packages/react/src/hooks/useMenuKeyboardNavigation.ts @@ -14,8 +14,8 @@ import type {MenuCloseHandler} from '../ActionMenu' export const useMenuKeyboardNavigation = ( open: boolean, onClose: MenuCloseHandler | undefined, - containerRef?: React.RefObject, - anchorRef?: React.RefObject, + containerRef?: React.RefObject, + anchorRef?: React.RefObject, isSubmenu: boolean = false, ) => { useMenuInitialFocus(open, containerRef, anchorRef) @@ -32,8 +32,8 @@ export const useMenuKeyboardNavigation = ( const useCloseMenuOnTab = ( open: boolean, onClose: MenuCloseHandler | undefined, - containerRef?: React.RefObject, - anchorRef?: React.RefObject, + containerRef?: React.RefObject, + anchorRef?: React.RefObject, ) => { React.useEffect(() => { const container = containerRef?.current @@ -59,7 +59,7 @@ const useCloseSubmenuOnArrow = ( open: boolean, isSubmenu: boolean, onClose: MenuCloseHandler | undefined, - containerRef?: React.RefObject, + containerRef?: React.RefObject, ) => { React.useEffect(() => { const container = containerRef?.current @@ -81,8 +81,8 @@ const useCloseSubmenuOnArrow = ( */ const useMoveFocusToMenuItem = ( open: boolean, - containerRef?: React.RefObject, - anchorRef?: React.RefObject, + containerRef?: React.RefObject, + anchorRef?: React.RefObject, ) => { React.useEffect(() => { const container = containerRef?.current diff --git a/packages/react/src/hooks/useMnemonics.ts b/packages/react/src/hooks/useMnemonics.ts index 7c417a3c267..7f79e67001d 100644 --- a/packages/react/src/hooks/useMnemonics.ts +++ b/packages/react/src/hooks/useMnemonics.ts @@ -8,7 +8,7 @@ import {useProvidedRefOrCreate} from './useProvidedRefOrCreate' * typically appearing in a menu title, menu item, or the text of a button. */ -export const useMnemonics = (open: boolean, providedRef?: React.RefObject) => { +export const useMnemonics = (open: boolean, providedRef?: React.RefObject) => { const containerRef = useProvidedRefOrCreate(providedRef) React.useEffect( diff --git a/packages/react/src/hooks/useOnOutsideClick.tsx b/packages/react/src/hooks/useOnOutsideClick.tsx index 36dab73bdf9..7bbf341aa71 100644 --- a/packages/react/src/hooks/useOnOutsideClick.tsx +++ b/packages/react/src/hooks/useOnOutsideClick.tsx @@ -5,8 +5,8 @@ export type TouchOrMouseEvent = MouseEvent | TouchEvent type TouchOrMouseEventCallback = (event: TouchOrMouseEvent) => boolean | undefined export type UseOnOutsideClickSettings = { - containerRef: React.RefObject | React.RefObject - ignoreClickRefs?: React.RefObject[] + containerRef: React.RefObject | React.RefObject + ignoreClickRefs?: React.RefObject[] onClickOutside: (e: TouchOrMouseEvent) => void } diff --git a/packages/react/src/hooks/useOpenAndCloseFocus.ts b/packages/react/src/hooks/useOpenAndCloseFocus.ts index 06cccfe0f2f..fd804b30b7b 100644 --- a/packages/react/src/hooks/useOpenAndCloseFocus.ts +++ b/packages/react/src/hooks/useOpenAndCloseFocus.ts @@ -3,9 +3,9 @@ import {useEffect} from 'react' import {iterateFocusableElements} from '@primer/behaviors/utils' export type UseOpenAndCloseFocusSettings = { - initialFocusRef?: React.RefObject - containerRef: React.RefObject - returnFocusRef: React.RefObject + initialFocusRef?: React.RefObject + containerRef: React.RefObject + returnFocusRef: React.RefObject preventFocusOnOpen?: boolean } diff --git a/packages/react/src/hooks/useOverflow.ts b/packages/react/src/hooks/useOverflow.ts index 0c394d095e5..9443124fdd2 100644 --- a/packages/react/src/hooks/useOverflow.ts +++ b/packages/react/src/hooks/useOverflow.ts @@ -1,6 +1,6 @@ import {useEffect, useState} from 'react' -export function useOverflow(ref: React.RefObject) { +export function useOverflow(ref: React.RefObject) { const [hasOverflow, setHasOverflow] = useState(false) useEffect(() => { diff --git a/packages/react/src/hooks/useOverlay.tsx b/packages/react/src/hooks/useOverlay.tsx index 41fb3fc73a2..888c0dd002c 100644 --- a/packages/react/src/hooks/useOverlay.tsx +++ b/packages/react/src/hooks/useOverlay.tsx @@ -5,17 +5,17 @@ import {useOnEscapePress} from './useOnEscapePress' import {useProvidedRefOrCreate} from './useProvidedRefOrCreate' export type UseOverlaySettings = { - ignoreClickRefs?: React.RefObject[] - initialFocusRef?: React.RefObject - returnFocusRef: React.RefObject + ignoreClickRefs?: React.RefObject[] + initialFocusRef?: React.RefObject + returnFocusRef: React.RefObject onEscape: (e: KeyboardEvent) => void onClickOutside: (e: TouchOrMouseEvent) => void - overlayRef?: React.RefObject + overlayRef?: React.RefObject preventFocusOnOpen?: boolean } export type OverlayReturnProps = { - ref: React.RefObject + ref: React.RefObject } export const useOverlay = ({ diff --git a/packages/react/src/hooks/useProvidedRefOrCreate.ts b/packages/react/src/hooks/useProvidedRefOrCreate.ts index b9fa481232d..bfd209cbde2 100644 --- a/packages/react/src/hooks/useProvidedRefOrCreate.ts +++ b/packages/react/src/hooks/useProvidedRefOrCreate.ts @@ -8,7 +8,7 @@ import React from 'react' * @param providedRef The ref to use - if undefined, will use the ref from a call to React.useRef * @type TRef The type of the RefObject which should be created. */ -export function useProvidedRefOrCreate(providedRef?: React.RefObject): React.RefObject { +export function useProvidedRefOrCreate(providedRef?: React.RefObject): React.RefObject { const createdRef = React.useRef(null) return providedRef ?? createdRef } diff --git a/packages/react/src/hooks/useRefObjectAsForwardedRef.ts b/packages/react/src/hooks/useRefObjectAsForwardedRef.ts index ccaa0e8e048..11becf147d7 100644 --- a/packages/react/src/hooks/useRefObjectAsForwardedRef.ts +++ b/packages/react/src/hooks/useRefObjectAsForwardedRef.ts @@ -8,6 +8,6 @@ import {useImperativeHandle} from 'react' * * **NOTE**: The `refObject` should be passed to the underlying element, NOT the `forwardedRef`. */ -export function useRefObjectAsForwardedRef(forwardedRef: ForwardedRef, refObject: RefObject): void { +export function useRefObjectAsForwardedRef(forwardedRef: ForwardedRef, refObject: RefObject): void { useImperativeHandle(forwardedRef, () => refObject.current) } diff --git a/packages/react/src/hooks/useRenderForcingRef.ts b/packages/react/src/hooks/useRenderForcingRef.ts index a08723bff67..87a78c7bb0d 100644 --- a/packages/react/src/hooks/useRenderForcingRef.ts +++ b/packages/react/src/hooks/useRenderForcingRef.ts @@ -19,5 +19,5 @@ export function useRenderForcingRef(value?: TRef) { }, [ref], ) - return [ref as RefObject, setRef] as const + return [ref as RefObject, setRef] as const; } diff --git a/packages/react/src/hooks/useResizeObserver.ts b/packages/react/src/hooks/useResizeObserver.ts index 9d7e102769f..1375ba457de 100644 --- a/packages/react/src/hooks/useResizeObserver.ts +++ b/packages/react/src/hooks/useResizeObserver.ts @@ -11,7 +11,7 @@ export interface ResizeObserverEntry { export function useResizeObserver( callback: ResizeObserverCallback, - target?: RefObject, + target?: RefObject, depsArray: unknown[] = [], ) { const [targetClientRect, setTargetClientRect] = useState(null) diff --git a/packages/react/src/hooks/useScrollFlash.ts b/packages/react/src/hooks/useScrollFlash.ts index bfee46edc32..0fe0d1e60fe 100644 --- a/packages/react/src/hooks/useScrollFlash.ts +++ b/packages/react/src/hooks/useScrollFlash.ts @@ -4,7 +4,7 @@ import {useEffect} from 'react' * This hook will flash the scrollbars for a ref of a container that has scrollable overflow * @param scrollContainerRef The ref of the scrollable content */ -export default function useScrollFlash(scrollContainerRef: React.RefObject) { +export default function useScrollFlash(scrollContainerRef: React.RefObject) { // https://adxlv.computer/projects/flash-scrollers/ useEffect(() => { const scrollContainer = scrollContainerRef.current diff --git a/packages/react/src/internal/hooks/useFocus.ts b/packages/react/src/internal/hooks/useFocus.ts index 4965df88491..aa4d8c9d266 100644 --- a/packages/react/src/internal/hooks/useFocus.ts +++ b/packages/react/src/internal/hooks/useFocus.ts @@ -1,7 +1,7 @@ import {type RefObject, useEffect, useState} from 'react' export function useFocus() { - const [focusTarget, setFocusTarget] = useState | null>(null) + const [focusTarget, setFocusTarget] = useState | null>(null) useEffect(() => { if (focusTarget === null) { diff --git a/packages/react/src/stories/useAnchoredPosition.stories.tsx b/packages/react/src/stories/useAnchoredPosition.stories.tsx index b312d8a5348..2b98d569e44 100644 --- a/packages/react/src/stories/useAnchoredPosition.stories.tsx +++ b/packages/react/src/stories/useAnchoredPosition.stories.tsx @@ -131,13 +131,13 @@ export const UseAnchoredPosition = (args: any) => { ) return ( -
+ (
} + ref={anchorElementRef as React.RefObject} > Anchor Element @@ -146,12 +146,12 @@ export const UseAnchoredPosition = (args: any) => { left={position?.left ?? 0} width={args.floatWidth ?? 150} height={args.floatHeight ?? 150} - ref={floatingElementRef as React.RefObject} + ref={floatingElementRef as React.RefObject} > Floating element -
- ) +
) + ); } export const CenteredOnScreen = () => { const {floatingElementRef, anchorElementRef, position} = useAnchoredPosition({ @@ -160,9 +160,9 @@ export const CenteredOnScreen = () => { }) // The outer Position element simply fills all available space return ( -
}> + (
}> } + ref={floatingElementRef as React.RefObject} top={position?.top ?? 0} left={position?.left ?? 0} > @@ -173,8 +173,8 @@ export const CenteredOnScreen = () => {

-
- ) +
) + ); } export const ComplexAncestry = () => { @@ -191,37 +191,35 @@ export const ComplexAncestry = () => { }, [recalculateSignal]) // The outer Position element simply fills all available space - return ( - <> -
- Clipping container - this element has overflow set to something other than visible -
- Relatively positioned parent, but fluid height, so not the clipping parent. -
- Floating element container. Position=static and overflow=hidden to show that overflow-hidden on a - statically-positioned element will not have any effect. - } - > - Floating element - -
+ return (<> +
+ Clipping container - this element has overflow set to something other than visible +
+ Relatively positioned parent, but fluid height, so not the clipping parent. +
+ Floating element container. Position=static and overflow=hidden to show that overflow-hidden on a + statically-positioned element will not have any effect. + } + > + Floating element +
-
- Anchor element container. This element is really tall to demonstrate behavior within a scrollable clipping - container. -
}> - Anchor Element -
+
+
+ Anchor element container. This element is really tall to demonstrate behavior within a scrollable clipping + container. +
}> + Anchor Element
- - - ) +
+ + ); } const Nav = ({children, ...props}: React.ComponentPropsWithoutRef<'nav'>) => ( @@ -279,7 +277,7 @@ export const WithPortal = () => { }, [showMenu]) return ( -
+ (
- ) +
) + ); } diff --git a/packages/react/src/stories/useFocusTrap.stories.tsx b/packages/react/src/stories/useFocusTrap.stories.tsx index 6df61bdf5e6..b8304884bf7 100644 --- a/packages/react/src/stories/useFocusTrap.stories.tsx +++ b/packages/react/src/stories/useFocusTrap.stories.tsx @@ -52,27 +52,25 @@ export const FocusTrap = () => { } }, [spaceListener]) - return ( - <> - - - Apple - Banana - Cantaloupe -
}> - Trap zone! Press SPACE to {trapEnabled ? 'deactivate' : 'activate'}. - - Durian - Elderberry - Fig - -
- Grapefruit - Honeydew - Jackfruit - - - ) + return (<> + + + Apple + Banana + Cantaloupe +
}> + Trap zone! Press SPACE to {trapEnabled ? 'deactivate' : 'activate'}. + + Durian + Elderberry + Fig + +
+ Grapefruit + Honeydew + Jackfruit + + ); } export const RestoreFocus = () => { @@ -95,27 +93,25 @@ export const RestoreFocus = () => { } }, [spaceListener]) - return ( - <> - - - Apple - Banana - Cantaloupe -
}> - Trap zone! Press SPACE to {trapEnabled ? 'deactivate' : 'activate'}. - - Durian - Elderberry - Fig - -
- Grapefruit - Honeydew - Jackfruit - - - ) + return (<> + + + Apple + Banana + Cantaloupe +
}> + Trap zone! Press SPACE to {trapEnabled ? 'deactivate' : 'activate'}. + + Durian + Elderberry + Fig + +
+ Grapefruit + Honeydew + Jackfruit + + ); } export const CustomInitialFocus = () => { @@ -138,32 +134,30 @@ export const CustomInitialFocus = () => { } }, [spaceListener]) - return ( - <> - - - - This story is the same as the `Focus Trap` story, except, when the trap zone is activated, the - “Elderberry” button will receive the initial focus (if the trap zone container does not already - have focus). - - Apple - Banana - Cantaloupe -
}> - Trap zone! Press SPACE to {trapEnabled ? 'deactivate' : 'activate'}. - - Durian - }>Elderberry - Fig - -
- Grapefruit - Honeydew - Jackfruit - - - ) + return (<> + + + + This story is the same as the `Focus Trap` story, except, when the trap zone is activated, the + “Elderberry” button will receive the initial focus (if the trap zone container does not already + have focus). + + Apple + Banana + Cantaloupe +
}> + Trap zone! Press SPACE to {trapEnabled ? 'deactivate' : 'activate'}. + + Durian + }>Elderberry + Fig + +
+ Grapefruit + Honeydew + Jackfruit + + ); } function useKeyPressListener(key: string, handler: () => void, capture = false) { @@ -210,27 +204,25 @@ export const DynamicFocusTrapContents = () => { useCallback(() => setTrapEnabled(!trapEnabled), [trapEnabled]), ) - return ( - <> - - - Apple - Banana - Cantaloupe -
}> - Trap zone! Press SPACE to {trapEnabled ? 'deactivate' : 'activate'}. - - - - - -
- Grapefruit - Honeydew - Jackfruit - - - ) + return (<> + + + Apple + Banana + Cantaloupe +
}> + Trap zone! Press SPACE to {trapEnabled ? 'deactivate' : 'activate'}. + + + + + +
+ Grapefruit + Honeydew + Jackfruit + + ); } export const MultipleFocusTraps = () => { @@ -259,61 +251,59 @@ export const MultipleFocusTraps = () => { } }, [keyListener]) - return ( - <> - - - - This story demonstrates the global nature of focus traps. When a focus trap is enabled, if there is already an - active focus trap, it becomes suspended and pushed onto a stack. Once the newly-active focus trap is disabled, - the most recently-suspended trap will reactivate. Suspended focus traps can be disabled, causing them to be - removed from the stack of suspended traps. - -
- Legend - -
- - Inactive - - -
- - Suspended - - -
- - Active - -
- Apple - Banana - Cantaloupe -
}> - - Trap zone ({trapEnabled1 ? 'enabled' : 'disabled'})! Press 1 to toggle. - - - Durian - Elderberry - Fig - -
- Grapefruit - Honeydew - Jackfruit -
}> - - Trap zone ({trapEnabled2 ? 'enabled' : 'disabled'})! Press 2 to toggle. - - - Kiwi - Lemon - Mango - -
- Nectarine - Orange - Peach - - - ) + return (<> + + + + This story demonstrates the global nature of focus traps. When a focus trap is enabled, if there is already an + active focus trap, it becomes suspended and pushed onto a stack. Once the newly-active focus trap is disabled, + the most recently-suspended trap will reactivate. Suspended focus traps can be disabled, causing them to be + removed from the stack of suspended traps. + +
+ Legend + +
+ - Inactive + + +
+ - Suspended + + +
+ - Active + +
+ Apple + Banana + Cantaloupe +
}> + + Trap zone ({trapEnabled1 ? 'enabled' : 'disabled'})! Press 1 to toggle. + + + Durian + Elderberry + Fig + +
+ Grapefruit + Honeydew + Jackfruit +
}> + + Trap zone ({trapEnabled2 ? 'enabled' : 'disabled'})! Press 2 to toggle. + + + Kiwi + Lemon + Mango + +
+ Nectarine + Orange + Peach + + ); } diff --git a/packages/react/src/stories/useFocusZone.stories.tsx b/packages/react/src/stories/useFocusZone.stories.tsx index 8c679511cf2..b390d3855ac 100644 --- a/packages/react/src/stories/useFocusZone.stories.tsx +++ b/packages/react/src/stories/useFocusZone.stories.tsx @@ -32,30 +32,28 @@ export const BasicFocusZone = () => { setFzEnabled(!fzEnabled) }, [fzEnabled]) - return ( - <> -
-
Last key pressed: {lastKey}
- - Apple - Banana - Cantaloupe -
}> - Use Up Arrow, Down Arrow, Home, and End to move focus within this box. -
- Durian - Elderberry - Fig -
+ return (<> +
+
Last key pressed: {lastKey}
+ + Apple + Banana + Cantaloupe +
}> + Use Up Arrow, Down Arrow, Home, and End to move focus within this box. +
+ Durian + Elderberry + Fig
- Kiwi - Lemon - Mango
- - ) + Kiwi + Lemon + Mango +
+ ); } export const FocusOutBehavior = () => { @@ -74,39 +72,37 @@ export const FocusOutBehavior = () => { bindKeys: FocusKeys.ArrowHorizontal | FocusKeys.HomeAndEnd, }) - return ( - <> -
-
Last key pressed: {lastKey}
- Apple - Banana - Cantaloupe -
}> - - Use Left Arrow, Right Arrow, Home, and End to move focus within this box. Focus stops at the ends. - + return (<> +
+
Last key pressed: {lastKey}
+ Apple + Banana + Cantaloupe +
}> + + Use Left Arrow, Right Arrow, Home, and End to move focus within this box. Focus stops at the ends. + -
- Durian - Elderberry - Fig -
+
+ Durian + Elderberry + Fig
-
}> - Use Left Arrow, Right Arrow, Home, and End to move focus within this box. Focus is circular. +
+
}> + Use Left Arrow, Right Arrow, Home, and End to move focus within this box. Focus is circular. -
- Grapefruit - Honeydew - Jackfruit -
+
+ Grapefruit + Honeydew + Jackfruit
- Kiwi - Lemon - Mango
- - ) + Kiwi + Lemon + Mango +
+ ); } function getSiblingIndex(element: Element) { @@ -173,31 +169,29 @@ export const CustomFocusMovement = () => { useFocusZone({containerRef, getNextFocusable}) - return ( - <> -
-
Last key pressed: {lastKey}
- Apple - -
- Use arrow keys to move focus within this box. -
}> - Banana - Cantaloupe - Durian - Elderberry - Fig - Grapefruit - Honeydew - Jackfruit - Kiwi -
+ return (<> +
+
Last key pressed: {lastKey}
+ Apple + +
+ Use arrow keys to move focus within this box. +
}> + Banana + Cantaloupe + Durian + Elderberry + Fig + Grapefruit + Honeydew + Jackfruit + Kiwi
- Lemon - Mango
- - ) + Lemon + Mango +
+ ); } export const FocusInStrategy = () => { @@ -236,50 +230,48 @@ export const FocusInStrategy = () => { focusInStrategy: customStrategy, }) - return ( - <> -
-
Last key pressed: {lastKey}
- Apple - Banana - Cantaloupe -
}> - “First” strategy (focus first focusable element) -
- Banana - Cantaloupe - Durian -
+ return (<> +
+
Last key pressed: {lastKey}
+ Apple + Banana + Cantaloupe +
}> + “First” strategy (focus first focusable element) +
+ Banana + Cantaloupe + Durian
-
}> - “Closest” strategy (focus first or last depending on focus direction) -
- Elderberry - Fig - Grapefruit -
+
+
}> + “Closest” strategy (focus first or last depending on focus direction) +
+ Elderberry + Fig + Grapefruit
-
}> - “Previous” strategy (most recently focused element) -
- Honeydew - Jackfruit - Kiwi -
+
+
}> + “Previous” strategy (most recently focused element) +
+ Honeydew + Jackfruit + Kiwi
-
}> - “Custom” strategy (choose randomly for this example) -
- Lemon - Mango - Nectarine -
+
+
}> + “Custom” strategy (choose randomly for this example) +
+ Lemon + Mango + Nectarine
- Orange - Papaya
- - ) + Orange + Papaya +
+ ); } export const SpecialSituations = () => { @@ -300,67 +292,65 @@ export const SpecialSituations = () => { }) const {containerRef: hContainerRef} = useFocusZone({focusOutBehavior: 'wrap', bindKeys: FocusKeys.ArrowHorizontal}) - return ( - <> -
- - This story is very esoteric! It only exists to show some of the nuance of the arrow key focus behavior in - different situations. Focus treatment within your component should be evaluated for your particular UX using - the{' '} - - ARIA guidelines - - . - -
Last key pressed: {lastKey}
- Apple - Banana - Cantaloupe -
}> - Bound keys: Up, Down, PageUp, PageDown, W, S, J, K, Home, End, Tab -
- - - Regular button - - -
+ return (<> +
+ + This story is very esoteric! It only exists to show some of the nuance of the arrow key focus behavior in + different situations. Focus treatment within your component should be evaluated for your particular UX using + the{' '} + + ARIA guidelines + + . + +
Last key pressed: {lastKey}
+ Apple + Banana + Cantaloupe +
}> + Bound keys: Up, Down, PageUp, PageDown, W, S, J, K, Home, End, Tab +
+ + + Regular button + +
-
}> - - -
- Grapefruit - - Jackfruit -
+
+
}> + + +
+ Grapefruit + + Jackfruit
- Kiwi - Lemon - Mango
- - ) + Kiwi + Lemon + Mango +
+ ); } export const ChangingSubtree = () => { @@ -390,27 +380,25 @@ export const ChangingSubtree = () => { ) } - return ( - <> -
- - This story demonstrates that focusZone is consistent even when the container’s subtree changes. - -
Last key pressed: {lastKey}
- Apple - Banana - Cantaloupe -
}> - Bound keys: Arrow Up and Arrow Down -
{buttons}
-
-
- Remove Button - Add Button -
+ return (<> +
+ + This story demonstrates that focusZone is consistent even when the container’s subtree changes. + +
Last key pressed: {lastKey}
+ Apple + Banana + Cantaloupe +
}> + Bound keys: Arrow Up and Arrow Down +
{buttons}
- - ) +
+ Remove Button + Add Button +
+
+ ); } export const NestedZones = () => { @@ -433,32 +421,30 @@ export const NestedZones = () => { bindKeys: FocusKeys.ArrowHorizontal, }) - return ( - <> -
-
Last key pressed: {lastKey}
- Apple - Banana -
}> - Bound keys: Arrow Up and Arrow Down -
- Cantaloupe -
}> - Additional Bound keys: Arrow Left and Arrow Right -
- Durian - Elderberry - Fig - Grapefruit -
+ return (<> +
+
Last key pressed: {lastKey}
+ Apple + Banana +
}> + Bound keys: Arrow Up and Arrow Down +
+ Cantaloupe +
}> + Additional Bound keys: Arrow Left and Arrow Right +
+ Durian + Elderberry + Fig + Grapefruit
- Honeydew
- Jackfruit - Kiwi + Honeydew
- - ) + Jackfruit + Kiwi +
+ ); } export const ActiveDescendant = () => { @@ -486,46 +472,44 @@ export const ActiveDescendant = () => { focusableElementFilter: elem => elem instanceof HTMLButtonElement, }) - return ( - <> -
- - This story demonstrates using the `aria-activedescendant` pattern for managing both a focused element and an - active element. Below, you can focus the input box then use the up/down arrow keys to change the active - descendant (dark blue outline). - -
Last key pressed: {lastKey}
- Apple - Banana - Cantaloupe -
- -
- } - type="text" - defaultValue="Focus remains here." - aria-controls="list" - id="focus-input" - /> -
} - > - Durian - Elderberry - Fig - Grapefruit -
+ return (<> +
+ + This story demonstrates using the `aria-activedescendant` pattern for managing both a focused element and an + active element. Below, you can focus the input box then use the up/down arrow keys to change the active + descendant (dark blue outline). + +
Last key pressed: {lastKey}
+ Apple + Banana + Cantaloupe +
+ +
+ } + type="text" + defaultValue="Focus remains here." + aria-controls="list" + id="focus-input" + /> +
} + > + Durian + Elderberry + Fig + Grapefruit
- Honeydew - Jackfruit - Kiwi
- - ) + Honeydew + Jackfruit + Kiwi +
+ ); }