@wordpress/compose
Version:
WordPress higher-order components (HOCs).
8 lines (7 loc) • 5.44 kB
Source Map (JSON)
{
"version": 3,
"sources": ["../../../src/hooks/use-dialog/index.ts"],
"sourcesContent": ["/**\n * External dependencies\n */\nimport type {\n\tKeyboardEvent,\n\tKeyboardEventHandler,\n\tRefCallback,\n\tSyntheticEvent,\n} from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useRef, useEffect, useCallback } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport useConstrainedTabbing from '../use-constrained-tabbing';\nimport { useFocusOnMount } from '../use-focus-on-mount';\nimport useFocusReturn from '../use-focus-return';\nimport useFocusOutside from '../use-focus-outside';\nimport useMergeRefs from '../use-merge-refs';\n\ntype DialogOptions = {\n\t/**\n\t * Determines focus behavior when the dialog mounts.\n\t *\n\t * - `\"firstElement\"` focuses the first tabbable element within.\n\t * - `\"firstInputElement\"` focuses the first value control within.\n\t * - `true` focuses the element itself.\n\t * - `false` does nothing and _should not be used unless an accessible\n\t * substitute behavior is implemented_.\n\t *\n\t * @default 'firstElement'\n\t */\n\tfocusOnMount?: useFocusOnMount.Mode;\n\t/**\n\t * Determines whether tabbing is constrained to within the popover,\n\t * preventing keyboard focus from leaving the popover content without\n\t * explicit focus elsewhere, or whether the popover remains part of the\n\t * wider tab order.\n\t * If no value is passed, it will be derived from `focusOnMount`.\n\t *\n\t * @see focusOnMount\n\t * @default `focusOnMount` !== false\n\t */\n\tconstrainTabbing?: boolean;\n\tonClose?: () => void;\n\t/**\n\t * Optional `onKeyDown` handler, merged with the built-in one.\n\t */\n\tonKeyDown?: KeyboardEventHandler< HTMLElement >;\n\t/**\n\t * Use the `onClose` prop instead.\n\t *\n\t * @deprecated\n\t */\n\t__unstableOnClose?: (\n\t\ttype: string | undefined,\n\t\tevent: SyntheticEvent\n\t) => void;\n};\n\ntype useDialogReturn = [\n\tRefCallback< HTMLElement >,\n\tReturnType< typeof useFocusOutside > & {\n\t\tonKeyDown: ( event: KeyboardEvent< HTMLElement > ) => void;\n\t} & Pick< HTMLElement, 'tabIndex' >,\n];\n\n/**\n * Returns a ref and props to apply to a dialog wrapper to enable the following behaviors:\n * - constrained tabbing.\n * - focus on mount.\n * - return focus on unmount.\n * - focus outside.\n *\n * @param options Dialog Options.\n */\nfunction useDialog( options: DialogOptions ): useDialogReturn {\n\tconst currentOptions = useRef< DialogOptions >( undefined );\n\tconst { constrainTabbing = options.focusOnMount !== false } = options;\n\tuseEffect( () => {\n\t\tcurrentOptions.current = options;\n\t}, Object.values( options ) );\n\tconst constrainedTabbingRef = useConstrainedTabbing();\n\tconst focusOnMountRef = useFocusOnMount( options.focusOnMount );\n\tconst focusReturnRef = useFocusReturn();\n\tconst focusOutsideProps = useFocusOutside( ( event ) => {\n\t\t// This unstable prop is here only to manage backward compatibility\n\t\t// for the Popover component otherwise, the onClose should be enough.\n\t\tif ( currentOptions.current?.__unstableOnClose ) {\n\t\t\tcurrentOptions.current.__unstableOnClose( 'focus-outside', event );\n\t\t} else if ( currentOptions.current?.onClose ) {\n\t\t\tcurrentOptions.current.onClose();\n\t\t}\n\t} );\n\t// Close on Escape via a React `onKeyDown` (rather than a native listener)\n\t// so portaled descendants that handle Escape and call\n\t// `event.stopPropagation()` correctly prevent the dialog from closing.\n\t// See https://github.com/WordPress/gutenberg/issues/78432.\n\tconst onKeyDown = useCallback( ( event: KeyboardEvent< HTMLElement > ) => {\n\t\t// Let the consumer-provided handler (if any) run first so it can\n\t\t// call `preventDefault()` to opt out of close-on-Escape.\n\t\tcurrentOptions.current?.onKeyDown?.( event );\n\t\tif (\n\t\t\tevent.key === 'Escape' &&\n\t\t\t! event.defaultPrevented &&\n\t\t\tcurrentOptions.current?.onClose\n\t\t) {\n\t\t\tevent.preventDefault();\n\t\t\tevent.stopPropagation();\n\t\t\tcurrentOptions.current.onClose();\n\t\t}\n\t}, [] );\n\n\treturn [\n\t\tuseMergeRefs( [\n\t\t\tconstrainTabbing ? constrainedTabbingRef : null,\n\t\t\toptions.focusOnMount !== false ? focusReturnRef : null,\n\t\t\toptions.focusOnMount !== false ? focusOnMountRef : null,\n\t\t] ),\n\t\t{\n\t\t\t...focusOutsideProps,\n\t\t\tonKeyDown,\n\t\t\ttabIndex: -1,\n\t\t},\n\t];\n}\n\nexport default useDialog;\n"],
"mappings": ";AAaA,SAAS,QAAQ,WAAW,mBAAmB;AAK/C,OAAO,2BAA2B;AAClC,SAAS,uBAAuB;AAChC,OAAO,oBAAoB;AAC3B,OAAO,qBAAqB;AAC5B,OAAO,kBAAkB;AA0DzB,SAAS,UAAW,SAA0C;AAC7D,QAAM,iBAAiB,OAAyB,MAAU;AAC1D,QAAM,EAAE,mBAAmB,QAAQ,iBAAiB,MAAM,IAAI;AAC9D,YAAW,MAAM;AAChB,mBAAe,UAAU;AAAA,EAC1B,GAAG,OAAO,OAAQ,OAAQ,CAAE;AAC5B,QAAM,wBAAwB,sBAAsB;AACpD,QAAM,kBAAkB,gBAAiB,QAAQ,YAAa;AAC9D,QAAM,iBAAiB,eAAe;AACtC,QAAM,oBAAoB,gBAAiB,CAAE,UAAW;AAGvD,QAAK,eAAe,SAAS,mBAAoB;AAChD,qBAAe,QAAQ,kBAAmB,iBAAiB,KAAM;AAAA,IAClE,WAAY,eAAe,SAAS,SAAU;AAC7C,qBAAe,QAAQ,QAAQ;AAAA,IAChC;AAAA,EACD,CAAE;AAKF,QAAM,YAAY,YAAa,CAAE,UAAyC;AAGzE,mBAAe,SAAS,YAAa,KAAM;AAC3C,QACC,MAAM,QAAQ,YACd,CAAE,MAAM,oBACR,eAAe,SAAS,SACvB;AACD,YAAM,eAAe;AACrB,YAAM,gBAAgB;AACtB,qBAAe,QAAQ,QAAQ;AAAA,IAChC;AAAA,EACD,GAAG,CAAC,CAAE;AAEN,SAAO;AAAA,IACN,aAAc;AAAA,MACb,mBAAmB,wBAAwB;AAAA,MAC3C,QAAQ,iBAAiB,QAAQ,iBAAiB;AAAA,MAClD,QAAQ,iBAAiB,QAAQ,kBAAkB;AAAA,IACpD,CAAE;AAAA,IACF;AAAA,MACC,GAAG;AAAA,MACH;AAAA,MACA,UAAU;AAAA,IACX;AAAA,EACD;AACD;AAEA,IAAO,qBAAQ;",
"names": []
}