@wordpress/compose 6.32.0 → 6.34.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +6 -0
- package/README.md +22 -1
- package/build/higher-order/compose.js.map +1 -1
- package/build/higher-order/if-condition/index.js.map +1 -1
- package/build/higher-order/pipe.js.map +1 -1
- package/build/higher-order/pure/index.js.map +1 -1
- package/build/higher-order/with-global-events/index.js.map +1 -1
- package/build/higher-order/with-global-events/listener.js.map +1 -1
- package/build/higher-order/with-instance-id/index.js.map +1 -1
- package/build/higher-order/with-network-connectivity/index.native.js.map +1 -1
- package/build/higher-order/with-preferred-color-scheme/index.native.js.map +1 -1
- package/build/higher-order/with-safe-timeout/index.js +13 -0
- package/build/higher-order/with-safe-timeout/index.js.map +1 -1
- package/build/higher-order/with-state/index.js.map +1 -1
- package/build/hooks/use-async-list/index.js.map +1 -1
- package/build/hooks/use-constrained-tabbing/index.js.map +1 -1
- package/build/hooks/use-constrained-tabbing/index.native.js.map +1 -1
- package/build/hooks/use-copy-on-click/index.js.map +1 -1
- package/build/hooks/use-copy-to-clipboard/index.js.map +1 -1
- package/build/hooks/use-debounce/index.js.map +1 -1
- package/build/hooks/use-debounced-input/index.js.map +1 -1
- package/build/hooks/use-dialog/index.js.map +1 -1
- package/build/hooks/use-disabled/index.js.map +1 -1
- package/build/hooks/use-dragging/index.js.map +1 -1
- package/build/hooks/use-drop-zone/index.js.map +1 -1
- package/build/hooks/use-fixed-window-list/index.js.map +1 -1
- package/build/hooks/use-focus-on-mount/index.js.map +1 -1
- package/build/hooks/use-focus-outside/index.js.map +1 -1
- package/build/hooks/use-focus-outside/index.native.js.map +1 -1
- package/build/hooks/use-focus-return/index.js.map +1 -1
- package/build/hooks/use-focusable-iframe/index.js +6 -2
- package/build/hooks/use-focusable-iframe/index.js.map +1 -1
- package/build/hooks/use-instance-id/index.js +3 -1
- package/build/hooks/use-instance-id/index.js.map +1 -1
- package/build/hooks/use-isomorphic-layout-effect/index.js.map +1 -1
- package/build/hooks/use-keyboard-shortcut/index.js.map +1 -1
- package/build/hooks/use-keyboard-shortcut/index.native.js.map +1 -1
- package/build/hooks/use-media-query/index.js +13 -2
- package/build/hooks/use-media-query/index.js.map +1 -1
- package/build/hooks/use-merge-refs/index.js.map +1 -1
- package/build/hooks/use-network-connectivity/index.native.js.map +1 -1
- package/build/hooks/use-observable-value/index.js +32 -0
- package/build/hooks/use-observable-value/index.js.map +1 -0
- package/build/hooks/use-preferred-color-scheme/index.android.js.map +1 -1
- package/build/hooks/use-preferred-color-scheme/index.ios.js.map +1 -1
- package/build/hooks/use-preferred-color-scheme-style/index.native.js.map +1 -1
- package/build/hooks/use-previous/index.js.map +1 -1
- package/build/hooks/use-reduced-motion/index.js.map +1 -1
- package/build/hooks/use-ref-effect/index.js.map +1 -1
- package/build/hooks/use-resize-observer/index.js +4 -0
- package/build/hooks/use-resize-observer/index.js.map +1 -1
- package/build/hooks/use-resize-observer/index.native.js.map +1 -1
- package/build/hooks/use-state-with-history/index.js.map +1 -1
- package/build/hooks/use-throttle/index.js.map +1 -1
- package/build/hooks/use-viewport-match/index.js.map +1 -1
- package/build/hooks/use-warn-on-change/index.js.map +1 -1
- package/build/index.js +21 -1
- package/build/index.js.map +1 -1
- package/build/index.native.js +21 -1
- package/build/index.native.js.map +1 -1
- package/build/utils/create-higher-order-component/index.js.map +1 -1
- package/build/utils/debounce/index.js.map +1 -1
- package/build/utils/observable-map/index.js +58 -0
- package/build/utils/observable-map/index.js.map +1 -0
- package/build/utils/throttle/index.js.map +1 -1
- package/build-module/higher-order/compose.js.map +1 -1
- package/build-module/higher-order/if-condition/index.js.map +1 -1
- package/build-module/higher-order/pipe.js.map +1 -1
- package/build-module/higher-order/pure/index.js.map +1 -1
- package/build-module/higher-order/with-global-events/index.js.map +1 -1
- package/build-module/higher-order/with-global-events/listener.js.map +1 -1
- package/build-module/higher-order/with-instance-id/index.js.map +1 -1
- package/build-module/higher-order/with-network-connectivity/index.native.js.map +1 -1
- package/build-module/higher-order/with-preferred-color-scheme/index.native.js.map +1 -1
- package/build-module/higher-order/with-safe-timeout/index.js.map +1 -1
- package/build-module/higher-order/with-state/index.js.map +1 -1
- package/build-module/hooks/use-async-list/index.js.map +1 -1
- package/build-module/hooks/use-constrained-tabbing/index.js.map +1 -1
- package/build-module/hooks/use-constrained-tabbing/index.native.js.map +1 -1
- package/build-module/hooks/use-copy-on-click/index.js.map +1 -1
- package/build-module/hooks/use-copy-to-clipboard/index.js.map +1 -1
- package/build-module/hooks/use-debounce/index.js.map +1 -1
- package/build-module/hooks/use-debounced-input/index.js.map +1 -1
- package/build-module/hooks/use-dialog/index.js.map +1 -1
- package/build-module/hooks/use-disabled/index.js.map +1 -1
- package/build-module/hooks/use-dragging/index.js.map +1 -1
- package/build-module/hooks/use-drop-zone/index.js.map +1 -1
- package/build-module/hooks/use-fixed-window-list/index.js.map +1 -1
- package/build-module/hooks/use-focus-on-mount/index.js.map +1 -1
- package/build-module/hooks/use-focus-outside/index.js.map +1 -1
- package/build-module/hooks/use-focus-outside/index.native.js.map +1 -1
- package/build-module/hooks/use-focus-return/index.js.map +1 -1
- package/build-module/hooks/use-focusable-iframe/index.js +6 -2
- package/build-module/hooks/use-focusable-iframe/index.js.map +1 -1
- package/build-module/hooks/use-instance-id/index.js +3 -1
- package/build-module/hooks/use-instance-id/index.js.map +1 -1
- package/build-module/hooks/use-isomorphic-layout-effect/index.js.map +1 -1
- package/build-module/hooks/use-keyboard-shortcut/index.js.map +1 -1
- package/build-module/hooks/use-keyboard-shortcut/index.native.js.map +1 -1
- package/build-module/hooks/use-media-query/index.js +12 -2
- package/build-module/hooks/use-media-query/index.js.map +1 -1
- package/build-module/hooks/use-merge-refs/index.js.map +1 -1
- package/build-module/hooks/use-network-connectivity/index.native.js.map +1 -1
- package/build-module/hooks/use-observable-value/index.js +26 -0
- package/build-module/hooks/use-observable-value/index.js.map +1 -0
- package/build-module/hooks/use-preferred-color-scheme/index.android.js.map +1 -1
- package/build-module/hooks/use-preferred-color-scheme/index.ios.js.map +1 -1
- package/build-module/hooks/use-preferred-color-scheme-style/index.native.js.map +1 -1
- package/build-module/hooks/use-previous/index.js.map +1 -1
- package/build-module/hooks/use-reduced-motion/index.js.map +1 -1
- package/build-module/hooks/use-ref-effect/index.js.map +1 -1
- package/build-module/hooks/use-resize-observer/index.js +4 -0
- package/build-module/hooks/use-resize-observer/index.js.map +1 -1
- package/build-module/hooks/use-resize-observer/index.native.js.map +1 -1
- package/build-module/hooks/use-state-with-history/index.js.map +1 -1
- package/build-module/hooks/use-throttle/index.js.map +1 -1
- package/build-module/hooks/use-viewport-match/index.js.map +1 -1
- package/build-module/hooks/use-warn-on-change/index.js.map +1 -1
- package/build-module/index.js +3 -0
- package/build-module/index.js.map +1 -1
- package/build-module/index.native.js +3 -0
- package/build-module/index.native.js.map +1 -1
- package/build-module/utils/create-higher-order-component/index.js.map +1 -1
- package/build-module/utils/debounce/index.js.map +1 -1
- package/build-module/utils/observable-map/index.js +52 -0
- package/build-module/utils/observable-map/index.js.map +1 -0
- package/build-module/utils/throttle/index.js.map +1 -1
- package/build-types/higher-order/with-instance-id/index.d.ts.map +1 -1
- package/build-types/hooks/use-dragging/index.d.ts.map +1 -1
- package/build-types/hooks/use-fixed-window-list/index.d.ts +1 -1
- package/build-types/hooks/use-fixed-window-list/index.d.ts.map +1 -1
- package/build-types/hooks/use-focusable-iframe/index.d.ts.map +1 -1
- package/build-types/hooks/use-instance-id/index.d.ts.map +1 -1
- package/build-types/hooks/use-keyboard-shortcut/index.d.ts.map +1 -1
- package/build-types/hooks/use-media-query/index.d.ts.map +1 -1
- package/build-types/hooks/use-observable-value/index.d.ts +18 -0
- package/build-types/hooks/use-observable-value/index.d.ts.map +1 -0
- package/build-types/index.d.ts +2 -0
- package/build-types/utils/debounce/index.d.ts.map +1 -1
- package/build-types/utils/observable-map/index.d.ts +19 -0
- package/build-types/utils/observable-map/index.d.ts.map +1 -0
- package/build-types/utils/throttle/index.d.ts.map +1 -1
- package/package.json +9 -9
- package/src/hooks/use-focusable-iframe/index.ts +6 -2
- package/src/hooks/use-instance-id/index.ts +3 -1
- package/src/hooks/use-media-query/index.js +15 -2
- package/src/hooks/use-media-query/test/index.js +5 -4
- package/src/hooks/use-observable-value/index.ts +35 -0
- package/src/hooks/use-observable-value/test/index.js +42 -0
- package/src/index.js +3 -0
- package/src/index.native.js +3 -0
- package/src/utils/observable-map/index.ts +61 -0
- package/src/utils/observable-map/test/index.js +43 -0
- package/tsconfig.tsbuildinfo +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useCallback","useEffect","useRef","INPUT_BUTTON_TYPES","isFocusNormalizedButton","eventTarget","window","HTMLElement","nodeName","includes","type","useFocusOutside","onFocusOutside","currentOnFocusOutside","current","preventBlurCheck","blurCheckTimeoutId","cancelBlurCheck","clearTimeout","normalizeButtonFocus","event","target","isInteractionEnd","queueBlurCheck","persist","ignoreForRelatedTarget","getAttribute","relatedTarget","closest","setTimeout","document","hasFocus","preventDefault","onFocus","onMouseDown","onMouseUp","onTouchStart","onTouchEnd","onBlur"],"sources":["@wordpress/compose/src/hooks/use-focus-outside/index.ts"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useCallback, useEffect, useRef } from '@wordpress/element';\n\n/**\n * Input types which are classified as button types, for use in considering\n * whether element is a (focus-normalized) button.\n */\nconst INPUT_BUTTON_TYPES = [ 'button', 'submit' ];\n\n/**\n * List of HTML button elements subject to focus normalization\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus\n */\ntype FocusNormalizedButton =\n\t| HTMLButtonElement\n\t| HTMLLinkElement\n\t| HTMLInputElement;\n\n/**\n * Returns true if the given element is a button element subject to focus\n * normalization, or false otherwise.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus\n *\n * @param eventTarget The target from a mouse or touch event.\n *\n * @return Whether the element is a button element subject to focus normalization.\n */\nfunction isFocusNormalizedButton(\n\teventTarget: EventTarget\n): eventTarget is FocusNormalizedButton {\n\tif ( ! ( eventTarget instanceof window.HTMLElement ) ) {\n\t\treturn false;\n\t}\n\tswitch ( eventTarget.nodeName ) {\n\t\tcase 'A':\n\t\tcase 'BUTTON':\n\t\t\treturn true;\n\n\t\tcase 'INPUT':\n\t\t\treturn INPUT_BUTTON_TYPES.includes(\n\t\t\t\t( eventTarget as HTMLInputElement ).type\n\t\t\t);\n\t}\n\n\treturn false;\n}\n\ntype UseFocusOutsideReturn = {\n\tonFocus: React.FocusEventHandler;\n\tonMouseDown: React.MouseEventHandler;\n\tonMouseUp: React.MouseEventHandler;\n\tonTouchStart: React.TouchEventHandler;\n\tonTouchEnd: React.TouchEventHandler;\n\tonBlur: React.FocusEventHandler;\n};\n\n/**\n * A react hook that can be used to check whether focus has moved outside the\n * element the event handlers are bound to.\n *\n * @param onFocusOutside A callback triggered when focus moves outside\n * the element the event handlers are bound to.\n *\n * @return An object containing event handlers. Bind the event handlers to a\n * wrapping element element to capture when focus moves outside that element.\n */\nexport default function useFocusOutside(\n\tonFocusOutside: ( ( event: React.FocusEvent ) => void ) | undefined\n): UseFocusOutsideReturn {\n\tconst currentOnFocusOutside = useRef( onFocusOutside );\n\tuseEffect( () => {\n\t\tcurrentOnFocusOutside.current = onFocusOutside;\n\t}, [ onFocusOutside ] );\n\n\tconst preventBlurCheck = useRef( false );\n\n\tconst blurCheckTimeoutId = useRef< number | undefined >();\n\n\t/**\n\t * Cancel a blur check timeout.\n\t */\n\tconst cancelBlurCheck = useCallback( () => {\n\t\tclearTimeout( blurCheckTimeoutId.current );\n\t}, [] );\n\n\t// Cancel blur checks on unmount.\n\tuseEffect( () => {\n\t\treturn () => cancelBlurCheck();\n\t}, [] );\n\n\t// Cancel a blur check if the callback or ref is no longer provided.\n\tuseEffect( () => {\n\t\tif ( ! onFocusOutside ) {\n\t\t\tcancelBlurCheck();\n\t\t}\n\t}, [ onFocusOutside, cancelBlurCheck ] );\n\n\t/**\n\t * Handles a mousedown or mouseup event to respectively assign and\n\t * unassign a flag for preventing blur check on button elements. Some\n\t * browsers, namely Firefox and Safari, do not emit a focus event on\n\t * button elements when clicked, while others do. The logic here\n\t * intends to normalize this as treating click on buttons as focus.\n\t *\n\t * @param event\n\t * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus\n\t */\n\tconst normalizeButtonFocus: React.EventHandler<\n\t\tReact.MouseEvent | React.TouchEvent\n\t> = useCallback( ( event ) => {\n\t\tconst { type, target } = event;\n\t\tconst isInteractionEnd = [ 'mouseup', 'touchend' ].includes( type );\n\n\t\tif ( isInteractionEnd ) {\n\t\t\tpreventBlurCheck.current = false;\n\t\t} else if ( isFocusNormalizedButton( target ) ) {\n\t\t\tpreventBlurCheck.current = true;\n\t\t}\n\t}, [] );\n\n\t/**\n\t * A callback triggered when a blur event occurs on the element the handler\n\t * is bound to.\n\t *\n\t * Calls the `onFocusOutside` callback in an immediate timeout if focus has\n\t * move outside the bound element and is still within the document.\n\t */\n\tconst queueBlurCheck: React.FocusEventHandler = useCallback( ( event ) => {\n\t\t// React does not allow using an event reference asynchronously\n\t\t// due to recycling behavior, except when explicitly persisted.\n\t\tevent.persist();\n\n\t\t// Skip blur check if clicking button. See `normalizeButtonFocus`.\n\t\tif ( preventBlurCheck.current ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// The usage of this attribute should be avoided. The only use case\n\t\t// would be when we load modals that are not React components and\n\t\t// therefore don't exist in the React tree. An example is opening\n\t\t// the Media Library modal from another dialog.\n\t\t// This attribute should contain a selector of the related target\n\t\t// we want to ignore, because we still need to trigger the blur event\n\t\t// on all other cases.\n\t\tconst ignoreForRelatedTarget = event.target.getAttribute(\n\t\t\t'data-unstable-ignore-focus-outside-for-relatedtarget'\n\t\t);\n\t\tif (\n\t\t\tignoreForRelatedTarget &&\n\t\t\tevent.relatedTarget?.closest( ignoreForRelatedTarget )\n\t\t) {\n\t\t\treturn;\n\t\t}\n\n\t\tblurCheckTimeoutId.current = setTimeout( () => {\n\t\t\t// If document is not focused then focus should remain\n\t\t\t// inside the wrapped component and therefore we cancel\n\t\t\t// this blur event thereby leaving focus in place.\n\t\t\t// https://developer.mozilla.org/en-US/docs/Web/API/Document/hasFocus.\n\t\t\tif ( ! document.hasFocus() ) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tif ( 'function' === typeof currentOnFocusOutside.current ) {\n\t\t\t\tcurrentOnFocusOutside.current( event );\n\t\t\t}\n\t\t}, 0 );\n\t}, [] );\n\n\treturn {\n\t\tonFocus: cancelBlurCheck,\n\t\tonMouseDown: normalizeButtonFocus,\n\t\tonMouseUp: normalizeButtonFocus,\n\t\tonTouchStart: normalizeButtonFocus,\n\t\tonTouchEnd: normalizeButtonFocus,\n\t\tonBlur: queueBlurCheck,\n\t};\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,WAAW,EAAEC,SAAS,EAAEC,MAAM,QAAQ,oBAAoB;;AAEnE;AACA;AACA;AACA;AACA,MAAMC,kBAAkB,GAAG,CAAE,QAAQ,EAAE,QAAQ,CAAE;;AAEjD;AACA;AACA;AACA;AACA;;AAMA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASC,uBAAuBA,CAC/BC,WAAwB,EACe;EACvC,IAAK,EAAIA,WAAW,YAAYC,MAAM,CAACC,WAAW,CAAE,EAAG;IACtD,OAAO,KAAK;EACb;EACA,QAASF,WAAW,CAACG,QAAQ;IAC5B,KAAK,GAAG;IACR,KAAK,QAAQ;MACZ,OAAO,IAAI;IAEZ,KAAK,OAAO;MACX,OAAOL,kBAAkB,CAACM,QAAQ,CAC/BJ,WAAW,CAAuBK,IACrC,CAAC;EACH;EAEA,OAAO,KAAK;AACb;AAWA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe,SAASC,eAAeA,CACtCC,cAAmE,EAC3C;EACxB,MAAMC,qBAAqB,GAAGX,MAAM,CAAEU,cAAe,CAAC;EACtDX,SAAS,CAAE,MAAM;IAChBY,qBAAqB,CAACC,OAAO,GAAGF,cAAc;EAC/C,CAAC,EAAE,CAAEA,cAAc,CAAG,CAAC;EAEvB,MAAMG,gBAAgB,GAAGb,MAAM,CAAE,KAAM,CAAC;EAExC,MAAMc,kBAAkB,GAAGd,MAAM,CAAuB,CAAC;;EAEzD;AACD;AACA;EACC,MAAMe,eAAe,GAAGjB,WAAW,CAAE,MAAM;IAC1CkB,YAAY,CAAEF,kBAAkB,CAACF,OAAQ,CAAC;EAC3C,CAAC,EAAE,EAAG,CAAC;;EAEP;EACAb,SAAS,CAAE,MAAM;IAChB,OAAO,MAAMgB,eAAe,CAAC,CAAC;EAC/B,CAAC,EAAE,EAAG,CAAC;;EAEP;EACAhB,SAAS,CAAE,MAAM;IAChB,IAAK,CAAEW,cAAc,EAAG;MACvBK,eAAe,CAAC,CAAC;IAClB;EACD,CAAC,EAAE,CAAEL,cAAc,EAAEK,eAAe,CAAG,CAAC;;EAExC;AACD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;EACC,MAAME,oBAEL,GAAGnB,WAAW,CAAIoB,KAAK,IAAM;IAC7B,MAAM;MAAEV,IAAI;MAAEW;IAAO,CAAC,GAAGD,KAAK;IAC9B,MAAME,gBAAgB,GAAG,CAAE,SAAS,EAAE,UAAU,CAAE,CAACb,QAAQ,CAAEC,IAAK,CAAC;IAEnE,IAAKY,gBAAgB,EAAG;MACvBP,gBAAgB,CAACD,OAAO,GAAG,KAAK;IACjC,CAAC,MAAM,IAAKV,uBAAuB,CAAEiB,MAAO,CAAC,EAAG;MAC/CN,gBAAgB,CAACD,OAAO,GAAG,IAAI;IAChC;EACD,CAAC,EAAE,EAAG,CAAC;;EAEP;AACD;AACA;AACA;AACA;AACA;AACA;EACC,MAAMS,cAAuC,GAAGvB,WAAW,CAAIoB,KAAK,IAAM;IACzE;IACA;IACAA,KAAK,CAACI,OAAO,CAAC,CAAC;;IAEf;IACA,IAAKT,gBAAgB,CAACD,OAAO,EAAG;MAC/B;IACD;;IAEA;IACA;IACA;IACA;IACA;IACA;IACA;IACA,MAAMW,sBAAsB,GAAGL,KAAK,CAACC,MAAM,CAACK,YAAY,CACvD,sDACD,CAAC;IACD,IACCD,sBAAsB,IACtBL,KAAK,CAACO,aAAa,EAAEC,OAAO,CAAEH,sBAAuB,CAAC,EACrD;MACD;IACD;IAEAT,kBAAkB,CAACF,OAAO,GAAGe,UAAU,CAAE,MAAM;MAC9C;MACA;MACA;MACA;MACA,IAAK,CAAEC,QAAQ,CAACC,QAAQ,CAAC,CAAC,EAAG;QAC5BX,KAAK,CAACY,cAAc,CAAC,CAAC;QACtB;MACD;MAEA,IAAK,UAAU,KAAK,OAAOnB,qBAAqB,CAACC,OAAO,EAAG;QAC1DD,qBAAqB,CAACC,OAAO,CAAEM,KAAM,CAAC;MACvC;IACD,CAAC,EAAE,CAAE,CAAC;EACP,CAAC,EAAE,EAAG,CAAC;EAEP,OAAO;IACNa,OAAO,EAAEhB,eAAe;IACxBiB,WAAW,EAAEf,oBAAoB;IACjCgB,SAAS,EAAEhB,oBAAoB;IAC/BiB,YAAY,EAAEjB,oBAAoB;IAClCkB,UAAU,EAAElB,oBAAoB;IAChCmB,MAAM,EAAEf;EACT,CAAC;AACF"}
|
|
1
|
+
{"version":3,"names":["useCallback","useEffect","useRef","INPUT_BUTTON_TYPES","isFocusNormalizedButton","eventTarget","window","HTMLElement","nodeName","includes","type","useFocusOutside","onFocusOutside","currentOnFocusOutside","current","preventBlurCheck","blurCheckTimeoutId","cancelBlurCheck","clearTimeout","normalizeButtonFocus","event","target","isInteractionEnd","queueBlurCheck","persist","ignoreForRelatedTarget","getAttribute","relatedTarget","closest","setTimeout","document","hasFocus","preventDefault","onFocus","onMouseDown","onMouseUp","onTouchStart","onTouchEnd","onBlur"],"sources":["@wordpress/compose/src/hooks/use-focus-outside/index.ts"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useCallback, useEffect, useRef } from '@wordpress/element';\n\n/**\n * Input types which are classified as button types, for use in considering\n * whether element is a (focus-normalized) button.\n */\nconst INPUT_BUTTON_TYPES = [ 'button', 'submit' ];\n\n/**\n * List of HTML button elements subject to focus normalization\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus\n */\ntype FocusNormalizedButton =\n\t| HTMLButtonElement\n\t| HTMLLinkElement\n\t| HTMLInputElement;\n\n/**\n * Returns true if the given element is a button element subject to focus\n * normalization, or false otherwise.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus\n *\n * @param eventTarget The target from a mouse or touch event.\n *\n * @return Whether the element is a button element subject to focus normalization.\n */\nfunction isFocusNormalizedButton(\n\teventTarget: EventTarget\n): eventTarget is FocusNormalizedButton {\n\tif ( ! ( eventTarget instanceof window.HTMLElement ) ) {\n\t\treturn false;\n\t}\n\tswitch ( eventTarget.nodeName ) {\n\t\tcase 'A':\n\t\tcase 'BUTTON':\n\t\t\treturn true;\n\n\t\tcase 'INPUT':\n\t\t\treturn INPUT_BUTTON_TYPES.includes(\n\t\t\t\t( eventTarget as HTMLInputElement ).type\n\t\t\t);\n\t}\n\n\treturn false;\n}\n\ntype UseFocusOutsideReturn = {\n\tonFocus: React.FocusEventHandler;\n\tonMouseDown: React.MouseEventHandler;\n\tonMouseUp: React.MouseEventHandler;\n\tonTouchStart: React.TouchEventHandler;\n\tonTouchEnd: React.TouchEventHandler;\n\tonBlur: React.FocusEventHandler;\n};\n\n/**\n * A react hook that can be used to check whether focus has moved outside the\n * element the event handlers are bound to.\n *\n * @param onFocusOutside A callback triggered when focus moves outside\n * the element the event handlers are bound to.\n *\n * @return An object containing event handlers. Bind the event handlers to a\n * wrapping element element to capture when focus moves outside that element.\n */\nexport default function useFocusOutside(\n\tonFocusOutside: ( ( event: React.FocusEvent ) => void ) | undefined\n): UseFocusOutsideReturn {\n\tconst currentOnFocusOutside = useRef( onFocusOutside );\n\tuseEffect( () => {\n\t\tcurrentOnFocusOutside.current = onFocusOutside;\n\t}, [ onFocusOutside ] );\n\n\tconst preventBlurCheck = useRef( false );\n\n\tconst blurCheckTimeoutId = useRef< number | undefined >();\n\n\t/**\n\t * Cancel a blur check timeout.\n\t */\n\tconst cancelBlurCheck = useCallback( () => {\n\t\tclearTimeout( blurCheckTimeoutId.current );\n\t}, [] );\n\n\t// Cancel blur checks on unmount.\n\tuseEffect( () => {\n\t\treturn () => cancelBlurCheck();\n\t}, [] );\n\n\t// Cancel a blur check if the callback or ref is no longer provided.\n\tuseEffect( () => {\n\t\tif ( ! onFocusOutside ) {\n\t\t\tcancelBlurCheck();\n\t\t}\n\t}, [ onFocusOutside, cancelBlurCheck ] );\n\n\t/**\n\t * Handles a mousedown or mouseup event to respectively assign and\n\t * unassign a flag for preventing blur check on button elements. Some\n\t * browsers, namely Firefox and Safari, do not emit a focus event on\n\t * button elements when clicked, while others do. The logic here\n\t * intends to normalize this as treating click on buttons as focus.\n\t *\n\t * @param event\n\t * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus\n\t */\n\tconst normalizeButtonFocus: React.EventHandler<\n\t\tReact.MouseEvent | React.TouchEvent\n\t> = useCallback( ( event ) => {\n\t\tconst { type, target } = event;\n\t\tconst isInteractionEnd = [ 'mouseup', 'touchend' ].includes( type );\n\n\t\tif ( isInteractionEnd ) {\n\t\t\tpreventBlurCheck.current = false;\n\t\t} else if ( isFocusNormalizedButton( target ) ) {\n\t\t\tpreventBlurCheck.current = true;\n\t\t}\n\t}, [] );\n\n\t/**\n\t * A callback triggered when a blur event occurs on the element the handler\n\t * is bound to.\n\t *\n\t * Calls the `onFocusOutside` callback in an immediate timeout if focus has\n\t * move outside the bound element and is still within the document.\n\t */\n\tconst queueBlurCheck: React.FocusEventHandler = useCallback( ( event ) => {\n\t\t// React does not allow using an event reference asynchronously\n\t\t// due to recycling behavior, except when explicitly persisted.\n\t\tevent.persist();\n\n\t\t// Skip blur check if clicking button. See `normalizeButtonFocus`.\n\t\tif ( preventBlurCheck.current ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// The usage of this attribute should be avoided. The only use case\n\t\t// would be when we load modals that are not React components and\n\t\t// therefore don't exist in the React tree. An example is opening\n\t\t// the Media Library modal from another dialog.\n\t\t// This attribute should contain a selector of the related target\n\t\t// we want to ignore, because we still need to trigger the blur event\n\t\t// on all other cases.\n\t\tconst ignoreForRelatedTarget = event.target.getAttribute(\n\t\t\t'data-unstable-ignore-focus-outside-for-relatedtarget'\n\t\t);\n\t\tif (\n\t\t\tignoreForRelatedTarget &&\n\t\t\tevent.relatedTarget?.closest( ignoreForRelatedTarget )\n\t\t) {\n\t\t\treturn;\n\t\t}\n\n\t\tblurCheckTimeoutId.current = setTimeout( () => {\n\t\t\t// If document is not focused then focus should remain\n\t\t\t// inside the wrapped component and therefore we cancel\n\t\t\t// this blur event thereby leaving focus in place.\n\t\t\t// https://developer.mozilla.org/en-US/docs/Web/API/Document/hasFocus.\n\t\t\tif ( ! document.hasFocus() ) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tif ( 'function' === typeof currentOnFocusOutside.current ) {\n\t\t\t\tcurrentOnFocusOutside.current( event );\n\t\t\t}\n\t\t}, 0 );\n\t}, [] );\n\n\treturn {\n\t\tonFocus: cancelBlurCheck,\n\t\tonMouseDown: normalizeButtonFocus,\n\t\tonMouseUp: normalizeButtonFocus,\n\t\tonTouchStart: normalizeButtonFocus,\n\t\tonTouchEnd: normalizeButtonFocus,\n\t\tonBlur: queueBlurCheck,\n\t};\n}\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useCallback","useEffect","useRef","INPUT_BUTTON_TYPES","isFocusNormalizedButton","eventTarget","nodeName","includes","type","useFocusOutside","onFocusOutside","currentOnFocusOutside","current","preventBlurCheck","blurCheckTimeoutId","cancelBlurCheck","clearTimeout","normalizeButtonFocus","event","target","isInteractionEnd","queueBlurCheck","persist","setTimeout","onFocus","onMouseDown","onMouseUp","onTouchStart","onTouchEnd","onBlur"],"sources":["@wordpress/compose/src/hooks/use-focus-outside/index.native.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useCallback, useEffect, useRef } from '@wordpress/element';\n\n/**\n * Input types which are classified as button types, for use in considering\n * whether element is a (focus-normalized) button.\n *\n * @type {string[]}\n */\nconst INPUT_BUTTON_TYPES = [ 'button', 'submit' ];\n\n/**\n * @typedef {HTMLButtonElement | HTMLLinkElement | HTMLInputElement} FocusNormalizedButton\n */\n\n// Disable reason: Rule doesn't support predicate return types.\n/* eslint-disable jsdoc/valid-types */\n/**\n * Returns true if the given element is a button element subject to focus\n * normalization, or false otherwise.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus\n *\n * @param {EventTarget} eventTarget The target from a mouse or touch event.\n *\n * @return {eventTarget is FocusNormalizedButton} Whether element is a button.\n */\nfunction isFocusNormalizedButton( eventTarget ) {\n\tswitch ( eventTarget.nodeName ) {\n\t\tcase 'A':\n\t\tcase 'BUTTON':\n\t\t\treturn true;\n\n\t\tcase 'INPUT':\n\t\t\treturn INPUT_BUTTON_TYPES.includes(\n\t\t\t\t/** @type {HTMLInputElement} */ ( eventTarget ).type\n\t\t\t);\n\t}\n\n\treturn false;\n}\n/* eslint-enable jsdoc/valid-types */\n\n/**\n * @typedef {import('react').SyntheticEvent} SyntheticEvent\n */\n\n/**\n * @callback EventCallback\n * @param {SyntheticEvent} event input related event.\n */\n\n/**\n * @typedef FocusOutsideReactElement\n * @property {EventCallback} handleFocusOutside callback for a focus outside event.\n */\n\n/**\n * @typedef {import('react').MutableRefObject<FocusOutsideReactElement | undefined>} FocusOutsideRef\n */\n\n/**\n * @typedef {Object} FocusOutsideReturnValue\n * @property {EventCallback} onFocus An event handler for focus events.\n * @property {EventCallback} onBlur An event handler for blur events.\n * @property {EventCallback} onMouseDown An event handler for mouse down events.\n * @property {EventCallback} onMouseUp An event handler for mouse up events.\n * @property {EventCallback} onTouchStart An event handler for touch start events.\n * @property {EventCallback} onTouchEnd An event handler for touch end events.\n */\n\n/**\n * A react hook that can be used to check whether focus has moved outside the\n * element the event handlers are bound to.\n *\n * @param {EventCallback} onFocusOutside A callback triggered when focus moves outside\n * the element the event handlers are bound to.\n *\n * @return {FocusOutsideReturnValue} An object containing event handlers. Bind the event handlers\n * to a wrapping element element to capture when focus moves\n * outside that element.\n */\nexport default function useFocusOutside( onFocusOutside ) {\n\tconst currentOnFocusOutside = useRef( onFocusOutside );\n\tuseEffect( () => {\n\t\tcurrentOnFocusOutside.current = onFocusOutside;\n\t}, [ onFocusOutside ] );\n\n\tconst preventBlurCheck = useRef( false );\n\n\t/**\n\t * @type {import('react').MutableRefObject<number | undefined>}\n\t */\n\tconst blurCheckTimeoutId = useRef();\n\n\t/**\n\t * Cancel a blur check timeout.\n\t */\n\tconst cancelBlurCheck = useCallback( () => {\n\t\tclearTimeout( blurCheckTimeoutId.current );\n\t}, [] );\n\n\t// Cancel blur checks on unmount.\n\tuseEffect( () => {\n\t\treturn () => cancelBlurCheck();\n\t}, [] );\n\n\t// Cancel a blur check if the callback or ref is no longer provided.\n\tuseEffect( () => {\n\t\tif ( ! onFocusOutside ) {\n\t\t\tcancelBlurCheck();\n\t\t}\n\t}, [ onFocusOutside, cancelBlurCheck ] );\n\n\t/**\n\t * Handles a mousedown or mouseup event to respectively assign and\n\t * unassign a flag for preventing blur check on button elements. Some\n\t * browsers, namely Firefox and Safari, do not emit a focus event on\n\t * button elements when clicked, while others do. The logic here\n\t * intends to normalize this as treating click on buttons as focus.\n\t *\n\t * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus\n\t *\n\t * @param {SyntheticEvent} event Event for mousedown or mouseup.\n\t */\n\tconst normalizeButtonFocus = useCallback( ( event ) => {\n\t\tconst { type, target } = event;\n\t\tconst isInteractionEnd = [ 'mouseup', 'touchend' ].includes( type );\n\n\t\tif ( isInteractionEnd ) {\n\t\t\tpreventBlurCheck.current = false;\n\t\t} else if ( isFocusNormalizedButton( target ) ) {\n\t\t\tpreventBlurCheck.current = true;\n\t\t}\n\t}, [] );\n\n\t/**\n\t * A callback triggered when a blur event occurs on the element the handler\n\t * is bound to.\n\t *\n\t * Calls the `onFocusOutside` callback in an immediate timeout if focus has\n\t * move outside the bound element and is still within the document.\n\t *\n\t * @param {SyntheticEvent} event Blur event.\n\t */\n\tconst queueBlurCheck = useCallback( ( event ) => {\n\t\t// React does not allow using an event reference asynchronously\n\t\t// due to recycling behavior, except when explicitly persisted.\n\t\tevent.persist();\n\n\t\t// Skip blur check if clicking button. See `normalizeButtonFocus`.\n\t\tif ( preventBlurCheck.current ) {\n\t\t\treturn;\n\t\t}\n\n\t\tblurCheckTimeoutId.current = setTimeout( () => {\n\t\t\tif ( 'function' === typeof currentOnFocusOutside.current ) {\n\t\t\t\tcurrentOnFocusOutside.current( event );\n\t\t\t}\n\t\t}, 0 );\n\t}, [] );\n\n\treturn {\n\t\tonFocus: cancelBlurCheck,\n\t\tonMouseDown: normalizeButtonFocus,\n\t\tonMouseUp: normalizeButtonFocus,\n\t\tonTouchStart: normalizeButtonFocus,\n\t\tonTouchEnd: normalizeButtonFocus,\n\t\tonBlur: queueBlurCheck,\n\t};\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"names":["useCallback","useEffect","useRef","INPUT_BUTTON_TYPES","isFocusNormalizedButton","eventTarget","nodeName","includes","type","useFocusOutside","onFocusOutside","currentOnFocusOutside","current","preventBlurCheck","blurCheckTimeoutId","cancelBlurCheck","clearTimeout","normalizeButtonFocus","event","target","isInteractionEnd","queueBlurCheck","persist","setTimeout","onFocus","onMouseDown","onMouseUp","onTouchStart","onTouchEnd","onBlur"],"sources":["@wordpress/compose/src/hooks/use-focus-outside/index.native.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useCallback, useEffect, useRef } from '@wordpress/element';\n\n/**\n * Input types which are classified as button types, for use in considering\n * whether element is a (focus-normalized) button.\n *\n * @type {string[]}\n */\nconst INPUT_BUTTON_TYPES = [ 'button', 'submit' ];\n\n/**\n * @typedef {HTMLButtonElement | HTMLLinkElement | HTMLInputElement} FocusNormalizedButton\n */\n\n// Disable reason: Rule doesn't support predicate return types.\n/* eslint-disable jsdoc/valid-types */\n/**\n * Returns true if the given element is a button element subject to focus\n * normalization, or false otherwise.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus\n *\n * @param {EventTarget} eventTarget The target from a mouse or touch event.\n *\n * @return {eventTarget is FocusNormalizedButton} Whether element is a button.\n */\nfunction isFocusNormalizedButton( eventTarget ) {\n\tswitch ( eventTarget.nodeName ) {\n\t\tcase 'A':\n\t\tcase 'BUTTON':\n\t\t\treturn true;\n\n\t\tcase 'INPUT':\n\t\t\treturn INPUT_BUTTON_TYPES.includes(\n\t\t\t\t/** @type {HTMLInputElement} */ ( eventTarget ).type\n\t\t\t);\n\t}\n\n\treturn false;\n}\n/* eslint-enable jsdoc/valid-types */\n\n/**\n * @typedef {import('react').SyntheticEvent} SyntheticEvent\n */\n\n/**\n * @callback EventCallback\n * @param {SyntheticEvent} event input related event.\n */\n\n/**\n * @typedef FocusOutsideReactElement\n * @property {EventCallback} handleFocusOutside callback for a focus outside event.\n */\n\n/**\n * @typedef {import('react').MutableRefObject<FocusOutsideReactElement | undefined>} FocusOutsideRef\n */\n\n/**\n * @typedef {Object} FocusOutsideReturnValue\n * @property {EventCallback} onFocus An event handler for focus events.\n * @property {EventCallback} onBlur An event handler for blur events.\n * @property {EventCallback} onMouseDown An event handler for mouse down events.\n * @property {EventCallback} onMouseUp An event handler for mouse up events.\n * @property {EventCallback} onTouchStart An event handler for touch start events.\n * @property {EventCallback} onTouchEnd An event handler for touch end events.\n */\n\n/**\n * A react hook that can be used to check whether focus has moved outside the\n * element the event handlers are bound to.\n *\n * @param {EventCallback} onFocusOutside A callback triggered when focus moves outside\n * the element the event handlers are bound to.\n *\n * @return {FocusOutsideReturnValue} An object containing event handlers. Bind the event handlers\n * to a wrapping element element to capture when focus moves\n * outside that element.\n */\nexport default function useFocusOutside( onFocusOutside ) {\n\tconst currentOnFocusOutside = useRef( onFocusOutside );\n\tuseEffect( () => {\n\t\tcurrentOnFocusOutside.current = onFocusOutside;\n\t}, [ onFocusOutside ] );\n\n\tconst preventBlurCheck = useRef( false );\n\n\t/**\n\t * @type {import('react').MutableRefObject<number | undefined>}\n\t */\n\tconst blurCheckTimeoutId = useRef();\n\n\t/**\n\t * Cancel a blur check timeout.\n\t */\n\tconst cancelBlurCheck = useCallback( () => {\n\t\tclearTimeout( blurCheckTimeoutId.current );\n\t}, [] );\n\n\t// Cancel blur checks on unmount.\n\tuseEffect( () => {\n\t\treturn () => cancelBlurCheck();\n\t}, [] );\n\n\t// Cancel a blur check if the callback or ref is no longer provided.\n\tuseEffect( () => {\n\t\tif ( ! onFocusOutside ) {\n\t\t\tcancelBlurCheck();\n\t\t}\n\t}, [ onFocusOutside, cancelBlurCheck ] );\n\n\t/**\n\t * Handles a mousedown or mouseup event to respectively assign and\n\t * unassign a flag for preventing blur check on button elements. Some\n\t * browsers, namely Firefox and Safari, do not emit a focus event on\n\t * button elements when clicked, while others do. The logic here\n\t * intends to normalize this as treating click on buttons as focus.\n\t *\n\t * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus\n\t *\n\t * @param {SyntheticEvent} event Event for mousedown or mouseup.\n\t */\n\tconst normalizeButtonFocus = useCallback( ( event ) => {\n\t\tconst { type, target } = event;\n\t\tconst isInteractionEnd = [ 'mouseup', 'touchend' ].includes( type );\n\n\t\tif ( isInteractionEnd ) {\n\t\t\tpreventBlurCheck.current = false;\n\t\t} else if ( isFocusNormalizedButton( target ) ) {\n\t\t\tpreventBlurCheck.current = true;\n\t\t}\n\t}, [] );\n\n\t/**\n\t * A callback triggered when a blur event occurs on the element the handler\n\t * is bound to.\n\t *\n\t * Calls the `onFocusOutside` callback in an immediate timeout if focus has\n\t * move outside the bound element and is still within the document.\n\t *\n\t * @param {SyntheticEvent} event Blur event.\n\t */\n\tconst queueBlurCheck = useCallback( ( event ) => {\n\t\t// React does not allow using an event reference asynchronously\n\t\t// due to recycling behavior, except when explicitly persisted.\n\t\tevent.persist();\n\n\t\t// Skip blur check if clicking button. See `normalizeButtonFocus`.\n\t\tif ( preventBlurCheck.current ) {\n\t\t\treturn;\n\t\t}\n\n\t\tblurCheckTimeoutId.current = setTimeout( () => {\n\t\t\tif ( 'function' === typeof currentOnFocusOutside.current ) {\n\t\t\t\tcurrentOnFocusOutside.current( event );\n\t\t\t}\n\t\t}, 0 );\n\t}, [] );\n\n\treturn {\n\t\tonFocus: cancelBlurCheck,\n\t\tonMouseDown: normalizeButtonFocus,\n\t\tonMouseUp: normalizeButtonFocus,\n\t\tonTouchStart: normalizeButtonFocus,\n\t\tonTouchEnd: normalizeButtonFocus,\n\t\tonBlur: queueBlurCheck,\n\t};\n}\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useRef","useEffect","useCallback","origin","useFocusReturn","onFocusReturn","ref","focusedBeforeMount","onFocusReturnRef","current","node","ownerDocument","activeElement","isFocused","contains","isConnected","_origin","focus"],"sources":["@wordpress/compose/src/hooks/use-focus-return/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useRef, useEffect, useCallback } from '@wordpress/element';\n\n/** @type {Element|null} */\nlet origin = null;\n\n/**\n * Adds the unmount behavior of returning focus to the element which had it\n * previously as is expected for roles like menus or dialogs.\n *\n * @param {() => void} [onFocusReturn] Overrides the default return behavior.\n * @return {import('react').RefCallback<HTMLElement>} Element Ref.\n *\n * @example\n * ```js\n * import { useFocusReturn } from '@wordpress/compose';\n *\n * const WithFocusReturn = () => {\n * const ref = useFocusReturn()\n * return (\n * <div ref={ ref }>\n * <Button />\n * <Button />\n * </div>\n * );\n * }\n * ```\n */\nfunction useFocusReturn( onFocusReturn ) {\n\t/** @type {import('react').MutableRefObject<null | HTMLElement>} */\n\tconst ref = useRef( null );\n\t/** @type {import('react').MutableRefObject<null | Element>} */\n\tconst focusedBeforeMount = useRef( null );\n\tconst onFocusReturnRef = useRef( onFocusReturn );\n\tuseEffect( () => {\n\t\tonFocusReturnRef.current = onFocusReturn;\n\t}, [ onFocusReturn ] );\n\n\treturn useCallback( ( node ) => {\n\t\tif ( node ) {\n\t\t\t// Set ref to be used when unmounting.\n\t\t\tref.current = node;\n\n\t\t\t// Only set when the node mounts.\n\t\t\tif ( focusedBeforeMount.current ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tfocusedBeforeMount.current = node.ownerDocument.activeElement;\n\t\t} else if ( focusedBeforeMount.current ) {\n\t\t\tconst isFocused = ref.current?.contains(\n\t\t\t\tref.current?.ownerDocument.activeElement\n\t\t\t);\n\n\t\t\tif ( ref.current?.isConnected && ! isFocused ) {\n\t\t\t\torigin ??= focusedBeforeMount.current;\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// Defer to the component's own explicit focus return behavior, if\n\t\t\t// specified. This allows for support that the `onFocusReturn`\n\t\t\t// decides to allow the default behavior to occur under some\n\t\t\t// conditions.\n\t\t\tif ( onFocusReturnRef.current ) {\n\t\t\t\tonFocusReturnRef.current();\n\t\t\t} else {\n\t\t\t\t/** @type {null|HTMLElement} */ (\n\t\t\t\t\t! focusedBeforeMount.current.isConnected\n\t\t\t\t\t\t? origin\n\t\t\t\t\t\t: focusedBeforeMount.current\n\t\t\t\t)?.focus();\n\t\t\t}\n\t\t\torigin = null;\n\t\t}\n\t}, [] );\n}\n\nexport default useFocusReturn;\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,MAAM,EAAEC,SAAS,EAAEC,WAAW,QAAQ,oBAAoB;;AAEnE;AACA,IAAIC,MAAM,GAAG,IAAI;;AAEjB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASC,cAAcA,CAAEC,aAAa,EAAG;EACxC;EACA,MAAMC,GAAG,GAAGN,MAAM,CAAE,IAAK,CAAC;EAC1B;EACA,MAAMO,kBAAkB,GAAGP,MAAM,CAAE,IAAK,CAAC;EACzC,MAAMQ,gBAAgB,GAAGR,MAAM,CAAEK,aAAc,CAAC;EAChDJ,SAAS,CAAE,MAAM;IAChBO,gBAAgB,CAACC,OAAO,GAAGJ,aAAa;EACzC,CAAC,EAAE,CAAEA,aAAa,CAAG,CAAC;EAEtB,OAAOH,WAAW,CAAIQ,IAAI,IAAM;IAC/B,IAAKA,IAAI,EAAG;MACX;MACAJ,GAAG,CAACG,OAAO,GAAGC,IAAI;;MAElB;MACA,IAAKH,kBAAkB,CAACE,OAAO,EAAG;QACjC;MACD;MAEAF,kBAAkB,CAACE,OAAO,GAAGC,IAAI,CAACC,aAAa,CAACC,aAAa;IAC9D,CAAC,MAAM,IAAKL,kBAAkB,CAACE,OAAO,EAAG;MACxC,MAAMI,SAAS,GAAGP,GAAG,CAACG,OAAO,EAAEK,QAAQ,CACtCR,GAAG,CAACG,OAAO,EAAEE,aAAa,CAACC,aAC5B,CAAC;MAED,IAAKN,GAAG,CAACG,OAAO,EAAEM,WAAW,IAAI,CAAEF,SAAS,EAAG;QAAA,IAAAG,OAAA;QAC9C,CAAAA,OAAA,GAAAb,MAAM,cAAAa,OAAA,cAAAA,OAAA,GAANb,MAAM,GAAKI,kBAAkB,CAACE,OAAO;QACrC;MACD;;MAEA;MACA;MACA;MACA;MACA,IAAKD,gBAAgB,CAACC,OAAO,EAAG;QAC/BD,gBAAgB,CAACC,OAAO,CAAC,CAAC;MAC3B,CAAC,MAAM;QACN,+BAAgC,CAC/B,CAAEF,kBAAkB,CAACE,OAAO,CAACM,WAAW,GACrCZ,MAAM,GACNI,kBAAkB,CAACE,OAAO,GAC3BQ,KAAK,CAAC,CAAC;MACX;MACAd,MAAM,GAAG,IAAI;IACd;EACD,CAAC,EAAE,EAAG,CAAC;AACR;AAEA,eAAeC,cAAc"}
|
|
1
|
+
{"version":3,"names":["useRef","useEffect","useCallback","origin","useFocusReturn","onFocusReturn","ref","focusedBeforeMount","onFocusReturnRef","current","node","ownerDocument","activeElement","isFocused","contains","isConnected","_origin","focus"],"sources":["@wordpress/compose/src/hooks/use-focus-return/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useRef, useEffect, useCallback } from '@wordpress/element';\n\n/** @type {Element|null} */\nlet origin = null;\n\n/**\n * Adds the unmount behavior of returning focus to the element which had it\n * previously as is expected for roles like menus or dialogs.\n *\n * @param {() => void} [onFocusReturn] Overrides the default return behavior.\n * @return {import('react').RefCallback<HTMLElement>} Element Ref.\n *\n * @example\n * ```js\n * import { useFocusReturn } from '@wordpress/compose';\n *\n * const WithFocusReturn = () => {\n * const ref = useFocusReturn()\n * return (\n * <div ref={ ref }>\n * <Button />\n * <Button />\n * </div>\n * );\n * }\n * ```\n */\nfunction useFocusReturn( onFocusReturn ) {\n\t/** @type {import('react').MutableRefObject<null | HTMLElement>} */\n\tconst ref = useRef( null );\n\t/** @type {import('react').MutableRefObject<null | Element>} */\n\tconst focusedBeforeMount = useRef( null );\n\tconst onFocusReturnRef = useRef( onFocusReturn );\n\tuseEffect( () => {\n\t\tonFocusReturnRef.current = onFocusReturn;\n\t}, [ onFocusReturn ] );\n\n\treturn useCallback( ( node ) => {\n\t\tif ( node ) {\n\t\t\t// Set ref to be used when unmounting.\n\t\t\tref.current = node;\n\n\t\t\t// Only set when the node mounts.\n\t\t\tif ( focusedBeforeMount.current ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tfocusedBeforeMount.current = node.ownerDocument.activeElement;\n\t\t} else if ( focusedBeforeMount.current ) {\n\t\t\tconst isFocused = ref.current?.contains(\n\t\t\t\tref.current?.ownerDocument.activeElement\n\t\t\t);\n\n\t\t\tif ( ref.current?.isConnected && ! isFocused ) {\n\t\t\t\torigin ??= focusedBeforeMount.current;\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// Defer to the component's own explicit focus return behavior, if\n\t\t\t// specified. This allows for support that the `onFocusReturn`\n\t\t\t// decides to allow the default behavior to occur under some\n\t\t\t// conditions.\n\t\t\tif ( onFocusReturnRef.current ) {\n\t\t\t\tonFocusReturnRef.current();\n\t\t\t} else {\n\t\t\t\t/** @type {null|HTMLElement} */ (\n\t\t\t\t\t! focusedBeforeMount.current.isConnected\n\t\t\t\t\t\t? origin\n\t\t\t\t\t\t: focusedBeforeMount.current\n\t\t\t\t)?.focus();\n\t\t\t}\n\t\t\torigin = null;\n\t\t}\n\t}, [] );\n}\n\nexport default useFocusReturn;\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,MAAM,EAAEC,SAAS,EAAEC,WAAW,QAAQ,oBAAoB;;AAEnE;AACA,IAAIC,MAAM,GAAG,IAAI;;AAEjB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASC,cAAcA,CAAEC,aAAa,EAAG;EACxC;EACA,MAAMC,GAAG,GAAGN,MAAM,CAAE,IAAK,CAAC;EAC1B;EACA,MAAMO,kBAAkB,GAAGP,MAAM,CAAE,IAAK,CAAC;EACzC,MAAMQ,gBAAgB,GAAGR,MAAM,CAAEK,aAAc,CAAC;EAChDJ,SAAS,CAAE,MAAM;IAChBO,gBAAgB,CAACC,OAAO,GAAGJ,aAAa;EACzC,CAAC,EAAE,CAAEA,aAAa,CAAG,CAAC;EAEtB,OAAOH,WAAW,CAAIQ,IAAI,IAAM;IAC/B,IAAKA,IAAI,EAAG;MACX;MACAJ,GAAG,CAACG,OAAO,GAAGC,IAAI;;MAElB;MACA,IAAKH,kBAAkB,CAACE,OAAO,EAAG;QACjC;MACD;MAEAF,kBAAkB,CAACE,OAAO,GAAGC,IAAI,CAACC,aAAa,CAACC,aAAa;IAC9D,CAAC,MAAM,IAAKL,kBAAkB,CAACE,OAAO,EAAG;MACxC,MAAMI,SAAS,GAAGP,GAAG,CAACG,OAAO,EAAEK,QAAQ,CACtCR,GAAG,CAACG,OAAO,EAAEE,aAAa,CAACC,aAC5B,CAAC;MAED,IAAKN,GAAG,CAACG,OAAO,EAAEM,WAAW,IAAI,CAAEF,SAAS,EAAG;QAAA,IAAAG,OAAA;QAC9C,CAAAA,OAAA,GAAAb,MAAM,cAAAa,OAAA,cAAAA,OAAA,GAANb,MAAM,GAAKI,kBAAkB,CAACE,OAAO;QACrC;MACD;;MAEA;MACA;MACA;MACA;MACA,IAAKD,gBAAgB,CAACC,OAAO,EAAG;QAC/BD,gBAAgB,CAACC,OAAO,CAAC,CAAC;MAC3B,CAAC,MAAM;QACN,+BAAgC,CAC/B,CAAEF,kBAAkB,CAACE,OAAO,CAACM,WAAW,GACrCZ,MAAM,GACNI,kBAAkB,CAACE,OAAO,GAC3BQ,KAAK,CAAC,CAAC;MACX;MACAd,MAAM,GAAG,IAAI;IACd;EACD,CAAC,EAAE,EAAG,CAAC;AACR;AAEA,eAAeC,cAAc","ignoreList":[]}
|
|
@@ -18,11 +18,15 @@ export default function useFocusableIframe() {
|
|
|
18
18
|
const {
|
|
19
19
|
ownerDocument
|
|
20
20
|
} = element;
|
|
21
|
-
if (!ownerDocument)
|
|
21
|
+
if (!ownerDocument) {
|
|
22
|
+
return;
|
|
23
|
+
}
|
|
22
24
|
const {
|
|
23
25
|
defaultView
|
|
24
26
|
} = ownerDocument;
|
|
25
|
-
if (!defaultView)
|
|
27
|
+
if (!defaultView) {
|
|
28
|
+
return;
|
|
29
|
+
}
|
|
26
30
|
|
|
27
31
|
/**
|
|
28
32
|
* Checks whether the iframe is the activeElement, inferring that it has
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useRefEffect","useFocusableIframe","element","ownerDocument","defaultView","checkFocus","activeElement","focus","addEventListener","removeEventListener"],"sources":["@wordpress/compose/src/hooks/use-focusable-iframe/index.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { RefCallback } from 'react';\n\n/**\n * Internal dependencies\n */\nimport useRefEffect from '../use-ref-effect';\n\n/**\n * Dispatches a bubbling focus event when the iframe receives focus. Use\n * `onFocus` as usual on the iframe or a parent element.\n *\n * @return Ref to pass to the iframe.\n */\nexport default function useFocusableIframe(): RefCallback< HTMLIFrameElement > {\n\treturn useRefEffect( ( element ) => {\n\t\tconst { ownerDocument } = element;\n\t\tif ( ! ownerDocument )
|
|
1
|
+
{"version":3,"names":["useRefEffect","useFocusableIframe","element","ownerDocument","defaultView","checkFocus","activeElement","focus","addEventListener","removeEventListener"],"sources":["@wordpress/compose/src/hooks/use-focusable-iframe/index.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { RefCallback } from 'react';\n\n/**\n * Internal dependencies\n */\nimport useRefEffect from '../use-ref-effect';\n\n/**\n * Dispatches a bubbling focus event when the iframe receives focus. Use\n * `onFocus` as usual on the iframe or a parent element.\n *\n * @return Ref to pass to the iframe.\n */\nexport default function useFocusableIframe(): RefCallback< HTMLIFrameElement > {\n\treturn useRefEffect( ( element ) => {\n\t\tconst { ownerDocument } = element;\n\t\tif ( ! ownerDocument ) {\n\t\t\treturn;\n\t\t}\n\t\tconst { defaultView } = ownerDocument;\n\t\tif ( ! defaultView ) {\n\t\t\treturn;\n\t\t}\n\n\t\t/**\n\t\t * Checks whether the iframe is the activeElement, inferring that it has\n\t\t * then received focus, and dispatches a focus event.\n\t\t */\n\t\tfunction checkFocus() {\n\t\t\tif ( ownerDocument && ownerDocument.activeElement === element ) {\n\t\t\t\t( element as HTMLElement ).focus();\n\t\t\t}\n\t\t}\n\n\t\tdefaultView.addEventListener( 'blur', checkFocus );\n\t\treturn () => {\n\t\t\tdefaultView.removeEventListener( 'blur', checkFocus );\n\t\t};\n\t}, [] );\n}\n"],"mappings":"AAAA;AACA;AACA;;AAGA;AACA;AACA;AACA,OAAOA,YAAY,MAAM,mBAAmB;;AAE5C;AACA;AACA;AACA;AACA;AACA;AACA,eAAe,SAASC,kBAAkBA,CAAA,EAAqC;EAC9E,OAAOD,YAAY,CAAIE,OAAO,IAAM;IACnC,MAAM;MAAEC;IAAc,CAAC,GAAGD,OAAO;IACjC,IAAK,CAAEC,aAAa,EAAG;MACtB;IACD;IACA,MAAM;MAAEC;IAAY,CAAC,GAAGD,aAAa;IACrC,IAAK,CAAEC,WAAW,EAAG;MACpB;IACD;;IAEA;AACF;AACA;AACA;IACE,SAASC,UAAUA,CAAA,EAAG;MACrB,IAAKF,aAAa,IAAIA,aAAa,CAACG,aAAa,KAAKJ,OAAO,EAAG;QAC7DA,OAAO,CAAkBK,KAAK,CAAC,CAAC;MACnC;IACD;IAEAH,WAAW,CAACI,gBAAgB,CAAE,MAAM,EAAEH,UAAW,CAAC;IAClD,OAAO,MAAM;MACZD,WAAW,CAACK,mBAAmB,CAAE,MAAM,EAAEJ,UAAW,CAAC;IACtD,CAAC;EACF,CAAC,EAAE,EAAG,CAAC;AACR","ignoreList":[]}
|
|
@@ -39,7 +39,9 @@ function createId(object) {
|
|
|
39
39
|
*/
|
|
40
40
|
function useInstanceId(object, prefix, preferredId) {
|
|
41
41
|
return useMemo(() => {
|
|
42
|
-
if (preferredId)
|
|
42
|
+
if (preferredId) {
|
|
43
|
+
return preferredId;
|
|
44
|
+
}
|
|
43
45
|
const id = createId(object);
|
|
44
46
|
return prefix ? `${prefix}-${id}` : id;
|
|
45
47
|
}, [object, preferredId, prefix]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useMemo","instanceMap","WeakMap","createId","object","instances","get","set","useInstanceId","prefix","preferredId","id"],"sources":["@wordpress/compose/src/hooks/use-instance-id/index.ts"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\n\nconst instanceMap = new WeakMap< object, number >();\n\n/**\n * Creates a new id for a given object.\n *\n * @param object Object reference to create an id for.\n * @return The instance id (index).\n */\nfunction createId( object: object ): number {\n\tconst instances = instanceMap.get( object ) || 0;\n\tinstanceMap.set( object, instances + 1 );\n\treturn instances;\n}\n\n/**\n * Specify the useInstanceId *function* signatures.\n *\n * More accurately, useInstanceId distinguishes between three different\n * signatures:\n *\n * 1. When only object is given, the returned value is a number\n * 2. When object and prefix is given, the returned value is a string\n * 3. When preferredId is given, the returned value is the type of preferredId\n *\n * @param object Object reference to create an id for.\n */\nfunction useInstanceId( object: object ): number;\nfunction useInstanceId( object: object, prefix: string ): string;\nfunction useInstanceId< T extends string | number >(\n\tobject: object,\n\tprefix: string,\n\tpreferredId?: T\n): T;\n\n/**\n * Provides a unique instance ID.\n *\n * @param object Object reference to create an id for.\n * @param [prefix] Prefix for the unique id.\n * @param [preferredId] Default ID to use.\n * @return The unique instance id.\n */\nfunction useInstanceId(\n\tobject: object,\n\tprefix?: string,\n\tpreferredId?: string | number\n): string | number {\n\treturn useMemo( () => {\n\t\tif ( preferredId )
|
|
1
|
+
{"version":3,"names":["useMemo","instanceMap","WeakMap","createId","object","instances","get","set","useInstanceId","prefix","preferredId","id"],"sources":["@wordpress/compose/src/hooks/use-instance-id/index.ts"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\n\nconst instanceMap = new WeakMap< object, number >();\n\n/**\n * Creates a new id for a given object.\n *\n * @param object Object reference to create an id for.\n * @return The instance id (index).\n */\nfunction createId( object: object ): number {\n\tconst instances = instanceMap.get( object ) || 0;\n\tinstanceMap.set( object, instances + 1 );\n\treturn instances;\n}\n\n/**\n * Specify the useInstanceId *function* signatures.\n *\n * More accurately, useInstanceId distinguishes between three different\n * signatures:\n *\n * 1. When only object is given, the returned value is a number\n * 2. When object and prefix is given, the returned value is a string\n * 3. When preferredId is given, the returned value is the type of preferredId\n *\n * @param object Object reference to create an id for.\n */\nfunction useInstanceId( object: object ): number;\nfunction useInstanceId( object: object, prefix: string ): string;\nfunction useInstanceId< T extends string | number >(\n\tobject: object,\n\tprefix: string,\n\tpreferredId?: T\n): T;\n\n/**\n * Provides a unique instance ID.\n *\n * @param object Object reference to create an id for.\n * @param [prefix] Prefix for the unique id.\n * @param [preferredId] Default ID to use.\n * @return The unique instance id.\n */\nfunction useInstanceId(\n\tobject: object,\n\tprefix?: string,\n\tpreferredId?: string | number\n): string | number {\n\treturn useMemo( () => {\n\t\tif ( preferredId ) {\n\t\t\treturn preferredId;\n\t\t}\n\t\tconst id = createId( object );\n\n\t\treturn prefix ? `${ prefix }-${ id }` : id;\n\t}, [ object, preferredId, prefix ] );\n}\n\nexport default useInstanceId;\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,OAAO,QAAQ,oBAAoB;AAE5C,MAAMC,WAAW,GAAG,IAAIC,OAAO,CAAmB,CAAC;;AAEnD;AACA;AACA;AACA;AACA;AACA;AACA,SAASC,QAAQA,CAAEC,MAAc,EAAW;EAC3C,MAAMC,SAAS,GAAGJ,WAAW,CAACK,GAAG,CAAEF,MAAO,CAAC,IAAI,CAAC;EAChDH,WAAW,CAACM,GAAG,CAAEH,MAAM,EAAEC,SAAS,GAAG,CAAE,CAAC;EACxC,OAAOA,SAAS;AACjB;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AASA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASG,aAAaA,CACrBJ,MAAc,EACdK,MAAe,EACfC,WAA6B,EACX;EAClB,OAAOV,OAAO,CAAE,MAAM;IACrB,IAAKU,WAAW,EAAG;MAClB,OAAOA,WAAW;IACnB;IACA,MAAMC,EAAE,GAAGR,QAAQ,CAAEC,MAAO,CAAC;IAE7B,OAAOK,MAAM,GAAI,GAAGA,MAAQ,IAAIE,EAAI,EAAC,GAAGA,EAAE;EAC3C,CAAC,EAAE,CAAEP,MAAM,EAAEM,WAAW,EAAED,MAAM,CAAG,CAAC;AACrC;AAEA,eAAeD,aAAa","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useEffect","useLayoutEffect","useIsomorphicLayoutEffect","window"],"sources":["@wordpress/compose/src/hooks/use-isomorphic-layout-effect/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useEffect, useLayoutEffect } from '@wordpress/element';\n\n/**\n * Preferred over direct usage of `useLayoutEffect` when supporting\n * server rendered components (SSR) because currently React\n * throws a warning when using useLayoutEffect in that environment.\n */\nconst useIsomorphicLayoutEffect =\n\ttypeof window !== 'undefined' ? useLayoutEffect : useEffect;\n\nexport default useIsomorphicLayoutEffect;\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,SAAS,EAAEC,eAAe,QAAQ,oBAAoB;;AAE/D;AACA;AACA;AACA;AACA;AACA,MAAMC,yBAAyB,GAC9B,OAAOC,MAAM,KAAK,WAAW,GAAGF,eAAe,GAAGD,SAAS;AAE5D,eAAeE,yBAAyB"}
|
|
1
|
+
{"version":3,"names":["useEffect","useLayoutEffect","useIsomorphicLayoutEffect","window"],"sources":["@wordpress/compose/src/hooks/use-isomorphic-layout-effect/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useEffect, useLayoutEffect } from '@wordpress/element';\n\n/**\n * Preferred over direct usage of `useLayoutEffect` when supporting\n * server rendered components (SSR) because currently React\n * throws a warning when using useLayoutEffect in that environment.\n */\nconst useIsomorphicLayoutEffect =\n\ttypeof window !== 'undefined' ? useLayoutEffect : useEffect;\n\nexport default useIsomorphicLayoutEffect;\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,SAAS,EAAEC,eAAe,QAAQ,oBAAoB;;AAE/D;AACA;AACA;AACA;AACA;AACA,MAAMC,yBAAyB,GAC9B,OAAOC,MAAM,KAAK,WAAW,GAAGF,eAAe,GAAGD,SAAS;AAE5D,eAAeE,yBAAyB","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["Mousetrap","useEffect","useRef","isAppleOS","useKeyboardShortcut","shortcuts","callback","bindGlobal","eventName","isDisabled","target","currentCallback","current","mousetrap","document","shortcutsArray","Array","isArray","forEach","shortcut","keys","split","modifiers","Set","filter","value","length","hasAlt","has","hasShift","size","Error","bindFn","args","reset"],"sources":["@wordpress/compose/src/hooks/use-keyboard-shortcut/index.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport Mousetrap from 'mousetrap';\nimport 'mousetrap/plugins/global-bind/mousetrap-global-bind';\n\n/**\n * WordPress dependencies\n */\nimport { useEffect, useRef } from '@wordpress/element';\nimport { isAppleOS } from '@wordpress/keycodes';\n\n/**\n * A block selection object.\n *\n * @typedef {Object} WPKeyboardShortcutConfig\n *\n * @property {boolean} [bindGlobal] Handle keyboard events anywhere including inside textarea/input fields.\n * @property {string} [eventName] Event name used to trigger the handler, defaults to keydown.\n * @property {boolean} [isDisabled] Disables the keyboard handler if the value is true.\n * @property {import('react').RefObject<HTMLElement>} [target] React reference to the DOM element used to catch the keyboard event.\n */\n\n/* eslint-disable jsdoc/valid-types */\n/**\n * Attach a keyboard shortcut handler.\n *\n * @see https://craig.is/killing/mice#api.bind for information about the `callback` parameter.\n *\n * @param {string[]|string} shortcuts Keyboard Shortcuts.\n * @param {(e: import('mousetrap').ExtendedKeyboardEvent, combo: string) => void} callback Shortcut callback.\n * @param {WPKeyboardShortcutConfig} options Shortcut options.\n */\nfunction useKeyboardShortcut(\n\t/* eslint-enable jsdoc/valid-types */\n\tshortcuts,\n\tcallback,\n\t{\n\t\tbindGlobal = false,\n\t\teventName = 'keydown',\n\t\tisDisabled = false, // This is important for performance considerations.\n\t\ttarget,\n\t} = {}\n) {\n\tconst currentCallback = useRef( callback );\n\tuseEffect( () => {\n\t\tcurrentCallback.current = callback;\n\t}, [ callback ] );\n\n\tuseEffect( () => {\n\t\tif ( isDisabled ) {\n\t\t\treturn;\n\t\t}\n\t\tconst mousetrap = new Mousetrap(\n\t\t\ttarget && target.current\n\t\t\t\t? target.current\n\t\t\t\t: // We were passing `document` here previously, so to successfully cast it to Element we must cast it first to `unknown`.\n\t\t\t\t // Not sure if this is a mistake but it was the behavior previous to the addition of types so we're just doing what's\n\t\t\t\t // necessary to maintain the existing behavior.\n\t\t\t\t /** @type {Element} */ ( /** @type {unknown} */ ( document ) )\n\t\t);\n\t\tconst shortcutsArray = Array.isArray( shortcuts )\n\t\t\t? shortcuts\n\t\t\t: [ shortcuts ];\n\t\tshortcutsArray.forEach( ( shortcut ) => {\n\t\t\tconst keys = shortcut.split( '+' );\n\t\t\t// Determines whether a key is a modifier by the length of the string.\n\t\t\t// E.g. if I add a pass a shortcut Shift+Cmd+M, it'll determine that\n\t\t\t// the modifiers are Shift and Cmd because they're not a single character.\n\t\t\tconst modifiers = new Set(\n\t\t\t\tkeys.filter( ( value ) => value.length > 1 )\n\t\t\t);\n\t\t\tconst hasAlt = modifiers.has( 'alt' );\n\t\t\tconst hasShift = modifiers.has( 'shift' );\n\n\t\t\t// This should be better moved to the shortcut registration instead.\n\t\t\tif (\n\t\t\t\tisAppleOS() &&\n\t\t\t\t( ( modifiers.size === 1 && hasAlt ) ||\n\t\t\t\t\t( modifiers.size === 2 && hasAlt && hasShift ) )\n\t\t\t) {\n\t\t\t\tthrow new Error(\n\t\t\t\t\t`Cannot bind ${ shortcut }. Alt and Shift+Alt modifiers are reserved for character input.`\n\t\t\t\t);\n\t\t\t}\n\n\t\t\tconst bindFn = bindGlobal ? 'bindGlobal' : 'bind';\n\t\t\t// @ts-ignore `bindGlobal` is an undocumented property\n\t\t\tmousetrap[ bindFn ](\n\t\t\t\tshortcut,\n\t\t\t\t(\n\t\t\t\t\t/* eslint-disable jsdoc/valid-types */\n\t\t\t\t\t/** @type {[e: import('mousetrap').ExtendedKeyboardEvent, combo: string]} */ ...args\n\t\t\t\t) =>\n\t\t\t\t\t/* eslint-enable jsdoc/valid-types */\n\t\t\t\t\tcurrentCallback.current( ...args ),\n\t\t\t\teventName\n\t\t\t);\n\t\t} );\n\n\t\treturn () => {\n\t\t\tmousetrap.reset();\n\t\t};\n\t}, [ shortcuts, bindGlobal, eventName, target, isDisabled ] );\n}\n\nexport default useKeyboardShortcut;\n"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,SAAS,MAAM,WAAW;AACjC,OAAO,qDAAqD;;AAE5D;AACA;AACA;AACA,SAASC,SAAS,EAAEC,MAAM,QAAQ,oBAAoB;AACtD,SAASC,SAAS,QAAQ,qBAAqB;;AAE/C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASC,mBAAmBA,CAAA,CAC3B;AACAC,SAAS,EACTC,QAAQ,EACR;EACCC,UAAU,GAAG,KAAK;EAClBC,SAAS,GAAG,SAAS;EACrBC,UAAU,GAAG,KAAK;EAAE;EACpBC;AACD,CAAC,GAAG,CAAC,CAAC,EACL;EACD,MAAMC,eAAe,GAAGT,MAAM,CAAEI,QAAS,CAAC;EAC1CL,SAAS,CAAE,MAAM;IAChBU,eAAe,CAACC,OAAO,GAAGN,QAAQ;EACnC,CAAC,EAAE,CAAEA,QAAQ,CAAG,CAAC;EAEjBL,SAAS,CAAE,MAAM;IAChB,IAAKQ,UAAU,EAAG;MACjB;IACD;IACA,MAAMI,SAAS,GAAG,IAAIb,SAAS,CAC9BU,MAAM,IAAIA,MAAM,CAACE,OAAO,GACrBF,MAAM,CAACE,OAAO;IACd;IACA;IACA;IACA,uBAAyB;IAAyBE,QACtD,CAAC;IACD,MAAMC,cAAc,GAAGC,KAAK,CAACC,OAAO,CAAEZ,SAAU,CAAC,GAC9CA,SAAS,GACT,CAAEA,SAAS,CAAE;IAChBU,cAAc,CAACG,OAAO,CAAIC,QAAQ,IAAM;MACvC,MAAMC,IAAI,GAAGD,QAAQ,CAACE,KAAK,CAAE,GAAI,CAAC;MAClC;MACA;MACA;MACA,MAAMC,SAAS,GAAG,IAAIC,GAAG,CACxBH,IAAI,CAACI,MAAM,CAAIC,KAAK,IAAMA,KAAK,CAACC,MAAM,GAAG,CAAE,CAC5C,CAAC;MACD,MAAMC,MAAM,GAAGL,SAAS,CAACM,GAAG,CAAE,KAAM,CAAC;MACrC,MAAMC,QAAQ,GAAGP,SAAS,CAACM,GAAG,CAAE,OAAQ,CAAC;;MAEzC;MACA,IACCzB,SAAS,CAAC,CAAC,KACPmB,SAAS,CAACQ,IAAI,KAAK,CAAC,IAAIH,MAAM,IAC/BL,SAAS,CAACQ,IAAI,KAAK,CAAC,IAAIH,MAAM,IAAIE,QAAU,CAAE,EAChD;QACD,MAAM,IAAIE,KAAK,CACb,eAAeZ,QAAU,iEAC3B,CAAC;MACF;MAEA,MAAMa,MAAM,GAAGzB,UAAU,GAAG,YAAY,GAAG,MAAM;MACjD;MACAM,SAAS,CAAEmB,MAAM,CAAE,CAClBb,QAAQ,EACR,EACC;MACA,4EAA6E,GAAGc,IAAI,KAEpF;MACAtB,eAAe,CAACC,OAAO,CAAE,GAAGqB,IAAK,CAAC,EACnCzB,SACD,CAAC;IACF,CAAE,CAAC;IAEH,OAAO,MAAM;MACZK,SAAS,CAACqB,KAAK,CAAC,CAAC;IAClB,CAAC;EACF,CAAC,EAAE,CAAE7B,SAAS,EAAEE,UAAU,EAAEC,SAAS,EAAEE,MAAM,EAAED,UAAU,CAAG,CAAC;AAC9D;AAEA,eAAeL,mBAAmB"}
|
|
1
|
+
{"version":3,"names":["Mousetrap","useEffect","useRef","isAppleOS","useKeyboardShortcut","shortcuts","callback","bindGlobal","eventName","isDisabled","target","currentCallback","current","mousetrap","document","shortcutsArray","Array","isArray","forEach","shortcut","keys","split","modifiers","Set","filter","value","length","hasAlt","has","hasShift","size","Error","bindFn","args","reset"],"sources":["@wordpress/compose/src/hooks/use-keyboard-shortcut/index.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport Mousetrap from 'mousetrap';\nimport 'mousetrap/plugins/global-bind/mousetrap-global-bind';\n\n/**\n * WordPress dependencies\n */\nimport { useEffect, useRef } from '@wordpress/element';\nimport { isAppleOS } from '@wordpress/keycodes';\n\n/**\n * A block selection object.\n *\n * @typedef {Object} WPKeyboardShortcutConfig\n *\n * @property {boolean} [bindGlobal] Handle keyboard events anywhere including inside textarea/input fields.\n * @property {string} [eventName] Event name used to trigger the handler, defaults to keydown.\n * @property {boolean} [isDisabled] Disables the keyboard handler if the value is true.\n * @property {import('react').RefObject<HTMLElement>} [target] React reference to the DOM element used to catch the keyboard event.\n */\n\n/* eslint-disable jsdoc/valid-types */\n/**\n * Attach a keyboard shortcut handler.\n *\n * @see https://craig.is/killing/mice#api.bind for information about the `callback` parameter.\n *\n * @param {string[]|string} shortcuts Keyboard Shortcuts.\n * @param {(e: import('mousetrap').ExtendedKeyboardEvent, combo: string) => void} callback Shortcut callback.\n * @param {WPKeyboardShortcutConfig} options Shortcut options.\n */\nfunction useKeyboardShortcut(\n\t/* eslint-enable jsdoc/valid-types */\n\tshortcuts,\n\tcallback,\n\t{\n\t\tbindGlobal = false,\n\t\teventName = 'keydown',\n\t\tisDisabled = false, // This is important for performance considerations.\n\t\ttarget,\n\t} = {}\n) {\n\tconst currentCallback = useRef( callback );\n\tuseEffect( () => {\n\t\tcurrentCallback.current = callback;\n\t}, [ callback ] );\n\n\tuseEffect( () => {\n\t\tif ( isDisabled ) {\n\t\t\treturn;\n\t\t}\n\t\tconst mousetrap = new Mousetrap(\n\t\t\ttarget && target.current\n\t\t\t\t? target.current\n\t\t\t\t: // We were passing `document` here previously, so to successfully cast it to Element we must cast it first to `unknown`.\n\t\t\t\t // Not sure if this is a mistake but it was the behavior previous to the addition of types so we're just doing what's\n\t\t\t\t // necessary to maintain the existing behavior.\n\t\t\t\t /** @type {Element} */ ( /** @type {unknown} */ ( document ) )\n\t\t);\n\t\tconst shortcutsArray = Array.isArray( shortcuts )\n\t\t\t? shortcuts\n\t\t\t: [ shortcuts ];\n\t\tshortcutsArray.forEach( ( shortcut ) => {\n\t\t\tconst keys = shortcut.split( '+' );\n\t\t\t// Determines whether a key is a modifier by the length of the string.\n\t\t\t// E.g. if I add a pass a shortcut Shift+Cmd+M, it'll determine that\n\t\t\t// the modifiers are Shift and Cmd because they're not a single character.\n\t\t\tconst modifiers = new Set(\n\t\t\t\tkeys.filter( ( value ) => value.length > 1 )\n\t\t\t);\n\t\t\tconst hasAlt = modifiers.has( 'alt' );\n\t\t\tconst hasShift = modifiers.has( 'shift' );\n\n\t\t\t// This should be better moved to the shortcut registration instead.\n\t\t\tif (\n\t\t\t\tisAppleOS() &&\n\t\t\t\t( ( modifiers.size === 1 && hasAlt ) ||\n\t\t\t\t\t( modifiers.size === 2 && hasAlt && hasShift ) )\n\t\t\t) {\n\t\t\t\tthrow new Error(\n\t\t\t\t\t`Cannot bind ${ shortcut }. Alt and Shift+Alt modifiers are reserved for character input.`\n\t\t\t\t);\n\t\t\t}\n\n\t\t\tconst bindFn = bindGlobal ? 'bindGlobal' : 'bind';\n\t\t\t// @ts-ignore `bindGlobal` is an undocumented property\n\t\t\tmousetrap[ bindFn ](\n\t\t\t\tshortcut,\n\t\t\t\t(\n\t\t\t\t\t/* eslint-disable jsdoc/valid-types */\n\t\t\t\t\t/** @type {[e: import('mousetrap').ExtendedKeyboardEvent, combo: string]} */ ...args\n\t\t\t\t) =>\n\t\t\t\t\t/* eslint-enable jsdoc/valid-types */\n\t\t\t\t\tcurrentCallback.current( ...args ),\n\t\t\t\teventName\n\t\t\t);\n\t\t} );\n\n\t\treturn () => {\n\t\t\tmousetrap.reset();\n\t\t};\n\t}, [ shortcuts, bindGlobal, eventName, target, isDisabled ] );\n}\n\nexport default useKeyboardShortcut;\n"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,SAAS,MAAM,WAAW;AACjC,OAAO,qDAAqD;;AAE5D;AACA;AACA;AACA,SAASC,SAAS,EAAEC,MAAM,QAAQ,oBAAoB;AACtD,SAASC,SAAS,QAAQ,qBAAqB;;AAE/C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASC,mBAAmBA,CAAA,CAC3B;AACAC,SAAS,EACTC,QAAQ,EACR;EACCC,UAAU,GAAG,KAAK;EAClBC,SAAS,GAAG,SAAS;EACrBC,UAAU,GAAG,KAAK;EAAE;EACpBC;AACD,CAAC,GAAG,CAAC,CAAC,EACL;EACD,MAAMC,eAAe,GAAGT,MAAM,CAAEI,QAAS,CAAC;EAC1CL,SAAS,CAAE,MAAM;IAChBU,eAAe,CAACC,OAAO,GAAGN,QAAQ;EACnC,CAAC,EAAE,CAAEA,QAAQ,CAAG,CAAC;EAEjBL,SAAS,CAAE,MAAM;IAChB,IAAKQ,UAAU,EAAG;MACjB;IACD;IACA,MAAMI,SAAS,GAAG,IAAIb,SAAS,CAC9BU,MAAM,IAAIA,MAAM,CAACE,OAAO,GACrBF,MAAM,CAACE,OAAO;IACd;IACA;IACA;IACA,uBAAyB;IAAyBE,QACtD,CAAC;IACD,MAAMC,cAAc,GAAGC,KAAK,CAACC,OAAO,CAAEZ,SAAU,CAAC,GAC9CA,SAAS,GACT,CAAEA,SAAS,CAAE;IAChBU,cAAc,CAACG,OAAO,CAAIC,QAAQ,IAAM;MACvC,MAAMC,IAAI,GAAGD,QAAQ,CAACE,KAAK,CAAE,GAAI,CAAC;MAClC;MACA;MACA;MACA,MAAMC,SAAS,GAAG,IAAIC,GAAG,CACxBH,IAAI,CAACI,MAAM,CAAIC,KAAK,IAAMA,KAAK,CAACC,MAAM,GAAG,CAAE,CAC5C,CAAC;MACD,MAAMC,MAAM,GAAGL,SAAS,CAACM,GAAG,CAAE,KAAM,CAAC;MACrC,MAAMC,QAAQ,GAAGP,SAAS,CAACM,GAAG,CAAE,OAAQ,CAAC;;MAEzC;MACA,IACCzB,SAAS,CAAC,CAAC,KACPmB,SAAS,CAACQ,IAAI,KAAK,CAAC,IAAIH,MAAM,IAC/BL,SAAS,CAACQ,IAAI,KAAK,CAAC,IAAIH,MAAM,IAAIE,QAAU,CAAE,EAChD;QACD,MAAM,IAAIE,KAAK,CACb,eAAeZ,QAAU,iEAC3B,CAAC;MACF;MAEA,MAAMa,MAAM,GAAGzB,UAAU,GAAG,YAAY,GAAG,MAAM;MACjD;MACAM,SAAS,CAAEmB,MAAM,CAAE,CAClBb,QAAQ,EACR,EACC;MACA,4EAA6E,GAAGc,IAAI,KAEpF;MACAtB,eAAe,CAACC,OAAO,CAAE,GAAGqB,IAAK,CAAC,EACnCzB,SACD,CAAC;IACF,CAAE,CAAC;IAEH,OAAO,MAAM;MACZK,SAAS,CAACqB,KAAK,CAAC,CAAC;IAClB,CAAC;EACF,CAAC,EAAE,CAAE7B,SAAS,EAAEE,UAAU,EAAEC,SAAS,EAAEE,MAAM,EAAED,UAAU,CAAG,CAAC;AAC9D;AAEA,eAAeL,mBAAmB","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useKeyboardShortcut"],"sources":["@wordpress/compose/src/hooks/use-keyboard-shortcut/index.native.js"],"sourcesContent":["const useKeyboardShortcut = () => null;\nexport default useKeyboardShortcut;\n"],"mappings":"AAAA,MAAMA,mBAAmB,GAAGA,CAAA,KAAM,IAAI;AACtC,eAAeA,mBAAmB"}
|
|
1
|
+
{"version":3,"names":["useKeyboardShortcut"],"sources":["@wordpress/compose/src/hooks/use-keyboard-shortcut/index.native.js"],"sourcesContent":["const useKeyboardShortcut = () => null;\nexport default useKeyboardShortcut;\n"],"mappings":"AAAA,MAAMA,mBAAmB,GAAGA,CAAA,KAAM,IAAI;AACtC,eAAeA,mBAAmB","ignoreList":[]}
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
* WordPress dependencies
|
|
3
3
|
*/
|
|
4
4
|
import { useMemo, useSyncExternalStore } from '@wordpress/element';
|
|
5
|
+
const matchMediaCache = new Map();
|
|
5
6
|
|
|
6
7
|
/**
|
|
7
8
|
* A new MediaQueryList object for the media query
|
|
@@ -10,8 +11,17 @@ import { useMemo, useSyncExternalStore } from '@wordpress/element';
|
|
|
10
11
|
* @return {MediaQueryList|null} A new object for the media query
|
|
11
12
|
*/
|
|
12
13
|
function getMediaQueryList(query) {
|
|
13
|
-
if (query
|
|
14
|
-
return
|
|
14
|
+
if (!query) {
|
|
15
|
+
return null;
|
|
16
|
+
}
|
|
17
|
+
let match = matchMediaCache.get(query);
|
|
18
|
+
if (match) {
|
|
19
|
+
return match;
|
|
20
|
+
}
|
|
21
|
+
if (typeof window !== 'undefined' && typeof window.matchMedia === 'function') {
|
|
22
|
+
match = window.matchMedia(query);
|
|
23
|
+
matchMediaCache.set(query, match);
|
|
24
|
+
return match;
|
|
15
25
|
}
|
|
16
26
|
return null;
|
|
17
27
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useMemo","useSyncExternalStore","getMediaQueryList","query","window","matchMedia","useMediaQuery","source","mediaQueryList","subscribe","onStoreChange","addEventListener","removeEventListener","getValue","_mediaQueryList$match","matches"],"sources":["@wordpress/compose/src/hooks/use-media-query/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useMemo, useSyncExternalStore } from '@wordpress/element';\n\n/**\n * A new MediaQueryList object for the media query\n *\n * @param {string} [query] Media Query.\n * @return {MediaQueryList|null} A new object for the media query\n */\nfunction getMediaQueryList( query ) {\n\tif (\n\t\
|
|
1
|
+
{"version":3,"names":["useMemo","useSyncExternalStore","matchMediaCache","Map","getMediaQueryList","query","match","get","window","matchMedia","set","useMediaQuery","source","mediaQueryList","subscribe","onStoreChange","addEventListener","removeEventListener","getValue","_mediaQueryList$match","matches"],"sources":["@wordpress/compose/src/hooks/use-media-query/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useMemo, useSyncExternalStore } from '@wordpress/element';\n\nconst matchMediaCache = new Map();\n\n/**\n * A new MediaQueryList object for the media query\n *\n * @param {string} [query] Media Query.\n * @return {MediaQueryList|null} A new object for the media query\n */\nfunction getMediaQueryList( query ) {\n\tif ( ! query ) {\n\t\treturn null;\n\t}\n\n\tlet match = matchMediaCache.get( query );\n\n\tif ( match ) {\n\t\treturn match;\n\t}\n\n\tif (\n\t\ttypeof window !== 'undefined' &&\n\t\ttypeof window.matchMedia === 'function'\n\t) {\n\t\tmatch = window.matchMedia( query );\n\t\tmatchMediaCache.set( query, match );\n\t\treturn match;\n\t}\n\n\treturn null;\n}\n\n/**\n * Runs a media query and returns its value when it changes.\n *\n * @param {string} [query] Media Query.\n * @return {boolean} return value of the media query.\n */\nexport default function useMediaQuery( query ) {\n\tconst source = useMemo( () => {\n\t\tconst mediaQueryList = getMediaQueryList( query );\n\n\t\treturn {\n\t\t\t/** @type {(onStoreChange: () => void) => () => void} */\n\t\t\tsubscribe( onStoreChange ) {\n\t\t\t\tif ( ! mediaQueryList ) {\n\t\t\t\t\treturn () => {};\n\t\t\t\t}\n\n\t\t\t\t// Avoid a fatal error when browsers don't support `addEventListener` on MediaQueryList.\n\t\t\t\tmediaQueryList.addEventListener?.( 'change', onStoreChange );\n\t\t\t\treturn () => {\n\t\t\t\t\tmediaQueryList.removeEventListener?.(\n\t\t\t\t\t\t'change',\n\t\t\t\t\t\tonStoreChange\n\t\t\t\t\t);\n\t\t\t\t};\n\t\t\t},\n\t\t\tgetValue() {\n\t\t\t\treturn mediaQueryList?.matches ?? false;\n\t\t\t},\n\t\t};\n\t}, [ query ] );\n\n\treturn useSyncExternalStore(\n\t\tsource.subscribe,\n\t\tsource.getValue,\n\t\t() => false\n\t);\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,OAAO,EAAEC,oBAAoB,QAAQ,oBAAoB;AAElE,MAAMC,eAAe,GAAG,IAAIC,GAAG,CAAC,CAAC;;AAEjC;AACA;AACA;AACA;AACA;AACA;AACA,SAASC,iBAAiBA,CAAEC,KAAK,EAAG;EACnC,IAAK,CAAEA,KAAK,EAAG;IACd,OAAO,IAAI;EACZ;EAEA,IAAIC,KAAK,GAAGJ,eAAe,CAACK,GAAG,CAAEF,KAAM,CAAC;EAExC,IAAKC,KAAK,EAAG;IACZ,OAAOA,KAAK;EACb;EAEA,IACC,OAAOE,MAAM,KAAK,WAAW,IAC7B,OAAOA,MAAM,CAACC,UAAU,KAAK,UAAU,EACtC;IACDH,KAAK,GAAGE,MAAM,CAACC,UAAU,CAAEJ,KAAM,CAAC;IAClCH,eAAe,CAACQ,GAAG,CAAEL,KAAK,EAAEC,KAAM,CAAC;IACnC,OAAOA,KAAK;EACb;EAEA,OAAO,IAAI;AACZ;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe,SAASK,aAAaA,CAAEN,KAAK,EAAG;EAC9C,MAAMO,MAAM,GAAGZ,OAAO,CAAE,MAAM;IAC7B,MAAMa,cAAc,GAAGT,iBAAiB,CAAEC,KAAM,CAAC;IAEjD,OAAO;MACN;MACAS,SAASA,CAAEC,aAAa,EAAG;QAC1B,IAAK,CAAEF,cAAc,EAAG;UACvB,OAAO,MAAM,CAAC,CAAC;QAChB;;QAEA;QACAA,cAAc,CAACG,gBAAgB,GAAI,QAAQ,EAAED,aAAc,CAAC;QAC5D,OAAO,MAAM;UACZF,cAAc,CAACI,mBAAmB,GACjC,QAAQ,EACRF,aACD,CAAC;QACF,CAAC;MACF,CAAC;MACDG,QAAQA,CAAA,EAAG;QAAA,IAAAC,qBAAA;QACV,QAAAA,qBAAA,GAAON,cAAc,EAAEO,OAAO,cAAAD,qBAAA,cAAAA,qBAAA,GAAI,KAAK;MACxC;IACD,CAAC;EACF,CAAC,EAAE,CAAEd,KAAK,CAAG,CAAC;EAEd,OAAOJ,oBAAoB,CAC1BW,MAAM,CAACE,SAAS,EAChBF,MAAM,CAACM,QAAQ,EACf,MAAM,KACP,CAAC;AACF","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useRef","useCallback","useLayoutEffect","assignRef","ref","value","hasOwnProperty","current","useMergeRefs","refs","element","isAttached","didElementChange","previousRefs","currentRefs","forEach","index","previousRef","refsToAssign"],"sources":["@wordpress/compose/src/hooks/use-merge-refs/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useRef, useCallback, useLayoutEffect } from '@wordpress/element';\n\n/* eslint-disable jsdoc/valid-types */\n/**\n * @template T\n * @typedef {T extends import('react').Ref<infer R> ? R : never} TypeFromRef\n */\n/* eslint-enable jsdoc/valid-types */\n\n/**\n * @template T\n * @param {import('react').Ref<T>} ref\n * @param {T} value\n */\nfunction assignRef( ref, value ) {\n\tif ( typeof ref === 'function' ) {\n\t\tref( value );\n\t} else if ( ref && ref.hasOwnProperty( 'current' ) ) {\n\t\t/* eslint-disable jsdoc/no-undefined-types */\n\t\t/** @type {import('react').MutableRefObject<T>} */ ( ref ).current =\n\t\t\tvalue;\n\t\t/* eslint-enable jsdoc/no-undefined-types */\n\t}\n}\n\n/**\n * Merges refs into one ref callback.\n *\n * It also ensures that the merged ref callbacks are only called when they\n * change (as a result of a `useCallback` dependency update) OR when the ref\n * value changes, just as React does when passing a single ref callback to the\n * component.\n *\n * As expected, if you pass a new function on every render, the ref callback\n * will be called after every render.\n *\n * If you don't wish a ref callback to be called after every render, wrap it\n * with `useCallback( callback, dependencies )`. When a dependency changes, the\n * old ref callback will be called with `null` and the new ref callback will be\n * called with the same value.\n *\n * To make ref callbacks easier to use, you can also pass the result of\n * `useRefEffect`, which makes cleanup easier by allowing you to return a\n * cleanup function instead of handling `null`.\n *\n * It's also possible to _disable_ a ref (and its behaviour) by simply not\n * passing the ref.\n *\n * ```jsx\n * const ref = useRefEffect( ( node ) => {\n * node.addEventListener( ... );\n * return () => {\n * node.removeEventListener( ... );\n * };\n * }, [ ...dependencies ] );\n * const otherRef = useRef();\n * const mergedRefs useMergeRefs( [\n * enabled && ref,\n * otherRef,\n * ] );\n * return <div ref={ mergedRefs } />;\n * ```\n *\n * @template {import('react').Ref<any>} TRef\n * @param {Array<TRef>} refs The refs to be merged.\n *\n * @return {import('react').RefCallback<TypeFromRef<TRef>>} The merged ref callback.\n */\nexport default function useMergeRefs( refs ) {\n\tconst element = useRef();\n\tconst isAttached = useRef( false );\n\tconst didElementChange = useRef( false );\n\t/* eslint-disable jsdoc/no-undefined-types */\n\t/** @type {import('react').MutableRefObject<TRef[]>} */\n\t/* eslint-enable jsdoc/no-undefined-types */\n\tconst previousRefs = useRef( [] );\n\tconst currentRefs = useRef( refs );\n\n\t// Update on render before the ref callback is called, so the ref callback\n\t// always has access to the current refs.\n\tcurrentRefs.current = refs;\n\n\t// If any of the refs change, call the previous ref with `null` and the new\n\t// ref with the node, except when the element changes in the same cycle, in\n\t// which case the ref callbacks will already have been called.\n\tuseLayoutEffect( () => {\n\t\tif (\n\t\t\tdidElementChange.current === false &&\n\t\t\tisAttached.current === true\n\t\t) {\n\t\t\trefs.forEach( ( ref, index ) => {\n\t\t\t\tconst previousRef = previousRefs.current[ index ];\n\t\t\t\tif ( ref !== previousRef ) {\n\t\t\t\t\tassignRef( previousRef, null );\n\t\t\t\t\tassignRef( ref, element.current );\n\t\t\t\t}\n\t\t\t} );\n\t\t}\n\n\t\tpreviousRefs.current = refs;\n\t}, refs );\n\n\t// No dependencies, must be reset after every render so ref callbacks are\n\t// correctly called after a ref change.\n\tuseLayoutEffect( () => {\n\t\tdidElementChange.current = false;\n\t} );\n\n\t// There should be no dependencies so that `callback` is only called when\n\t// the node changes.\n\treturn useCallback( ( value ) => {\n\t\t// Update the element so it can be used when calling ref callbacks on a\n\t\t// dependency change.\n\t\tassignRef( element, value );\n\n\t\tdidElementChange.current = true;\n\t\tisAttached.current = value !== null;\n\n\t\t// When an element changes, the current ref callback should be called\n\t\t// with the new element and the previous one with `null`.\n\t\tconst refsToAssign = value ? currentRefs.current : previousRefs.current;\n\n\t\t// Update the latest refs.\n\t\tfor ( const ref of refsToAssign ) {\n\t\t\tassignRef( ref, value );\n\t\t}\n\t}, [] );\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,MAAM,EAAEC,WAAW,EAAEC,eAAe,QAAQ,oBAAoB;;AAEzE;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA,SAASC,SAASA,CAAEC,GAAG,EAAEC,KAAK,EAAG;EAChC,IAAK,OAAOD,GAAG,KAAK,UAAU,EAAG;IAChCA,GAAG,CAAEC,KAAM,CAAC;EACb,CAAC,MAAM,IAAKD,GAAG,IAAIA,GAAG,CAACE,cAAc,CAAE,SAAU,CAAC,EAAG;IACpD;IACA,kDAAqDF,GAAG,CAAGG,OAAO,GACjEF,KAAK;IACN;EACD;AACD;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe,SAASG,YAAYA,CAAEC,IAAI,EAAG;EAC5C,MAAMC,OAAO,GAAGV,MAAM,CAAC,CAAC;EACxB,MAAMW,UAAU,GAAGX,MAAM,CAAE,KAAM,CAAC;EAClC,MAAMY,gBAAgB,GAAGZ,MAAM,CAAE,KAAM,CAAC;EACxC;EACA;EACA;EACA,MAAMa,YAAY,GAAGb,MAAM,CAAE,EAAG,CAAC;EACjC,MAAMc,WAAW,GAAGd,MAAM,CAAES,IAAK,CAAC;;EAElC;EACA;EACAK,WAAW,CAACP,OAAO,GAAGE,IAAI;;EAE1B;EACA;EACA;EACAP,eAAe,CAAE,MAAM;IACtB,IACCU,gBAAgB,CAACL,OAAO,KAAK,KAAK,IAClCI,UAAU,CAACJ,OAAO,KAAK,IAAI,EAC1B;MACDE,IAAI,CAACM,OAAO,CAAE,CAAEX,GAAG,EAAEY,KAAK,KAAM;QAC/B,MAAMC,WAAW,GAAGJ,YAAY,CAACN,OAAO,CAAES,KAAK,CAAE;QACjD,IAAKZ,GAAG,KAAKa,WAAW,EAAG;UAC1Bd,SAAS,CAAEc,WAAW,EAAE,IAAK,CAAC;UAC9Bd,SAAS,CAAEC,GAAG,EAAEM,OAAO,CAACH,OAAQ,CAAC;QAClC;MACD,CAAE,CAAC;IACJ;IAEAM,YAAY,CAACN,OAAO,GAAGE,IAAI;EAC5B,CAAC,EAAEA,IAAK,CAAC;;EAET;EACA;EACAP,eAAe,CAAE,MAAM;IACtBU,gBAAgB,CAACL,OAAO,GAAG,KAAK;EACjC,CAAE,CAAC;;EAEH;EACA;EACA,OAAON,WAAW,CAAII,KAAK,IAAM;IAChC;IACA;IACAF,SAAS,CAAEO,OAAO,EAAEL,KAAM,CAAC;IAE3BO,gBAAgB,CAACL,OAAO,GAAG,IAAI;IAC/BI,UAAU,CAACJ,OAAO,GAAGF,KAAK,KAAK,IAAI;;IAEnC;IACA;IACA,MAAMa,YAAY,GAAGb,KAAK,GAAGS,WAAW,CAACP,OAAO,GAAGM,YAAY,CAACN,OAAO;;IAEvE;IACA,KAAM,MAAMH,GAAG,IAAIc,YAAY,EAAG;MACjCf,SAAS,CAAEC,GAAG,EAAEC,KAAM,CAAC;IACxB;EACD,CAAC,EAAE,EAAG,CAAC;AACR"}
|
|
1
|
+
{"version":3,"names":["useRef","useCallback","useLayoutEffect","assignRef","ref","value","hasOwnProperty","current","useMergeRefs","refs","element","isAttached","didElementChange","previousRefs","currentRefs","forEach","index","previousRef","refsToAssign"],"sources":["@wordpress/compose/src/hooks/use-merge-refs/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useRef, useCallback, useLayoutEffect } from '@wordpress/element';\n\n/* eslint-disable jsdoc/valid-types */\n/**\n * @template T\n * @typedef {T extends import('react').Ref<infer R> ? R : never} TypeFromRef\n */\n/* eslint-enable jsdoc/valid-types */\n\n/**\n * @template T\n * @param {import('react').Ref<T>} ref\n * @param {T} value\n */\nfunction assignRef( ref, value ) {\n\tif ( typeof ref === 'function' ) {\n\t\tref( value );\n\t} else if ( ref && ref.hasOwnProperty( 'current' ) ) {\n\t\t/* eslint-disable jsdoc/no-undefined-types */\n\t\t/** @type {import('react').MutableRefObject<T>} */ ( ref ).current =\n\t\t\tvalue;\n\t\t/* eslint-enable jsdoc/no-undefined-types */\n\t}\n}\n\n/**\n * Merges refs into one ref callback.\n *\n * It also ensures that the merged ref callbacks are only called when they\n * change (as a result of a `useCallback` dependency update) OR when the ref\n * value changes, just as React does when passing a single ref callback to the\n * component.\n *\n * As expected, if you pass a new function on every render, the ref callback\n * will be called after every render.\n *\n * If you don't wish a ref callback to be called after every render, wrap it\n * with `useCallback( callback, dependencies )`. When a dependency changes, the\n * old ref callback will be called with `null` and the new ref callback will be\n * called with the same value.\n *\n * To make ref callbacks easier to use, you can also pass the result of\n * `useRefEffect`, which makes cleanup easier by allowing you to return a\n * cleanup function instead of handling `null`.\n *\n * It's also possible to _disable_ a ref (and its behaviour) by simply not\n * passing the ref.\n *\n * ```jsx\n * const ref = useRefEffect( ( node ) => {\n * node.addEventListener( ... );\n * return () => {\n * node.removeEventListener( ... );\n * };\n * }, [ ...dependencies ] );\n * const otherRef = useRef();\n * const mergedRefs useMergeRefs( [\n * enabled && ref,\n * otherRef,\n * ] );\n * return <div ref={ mergedRefs } />;\n * ```\n *\n * @template {import('react').Ref<any>} TRef\n * @param {Array<TRef>} refs The refs to be merged.\n *\n * @return {import('react').RefCallback<TypeFromRef<TRef>>} The merged ref callback.\n */\nexport default function useMergeRefs( refs ) {\n\tconst element = useRef();\n\tconst isAttached = useRef( false );\n\tconst didElementChange = useRef( false );\n\t/* eslint-disable jsdoc/no-undefined-types */\n\t/** @type {import('react').MutableRefObject<TRef[]>} */\n\t/* eslint-enable jsdoc/no-undefined-types */\n\tconst previousRefs = useRef( [] );\n\tconst currentRefs = useRef( refs );\n\n\t// Update on render before the ref callback is called, so the ref callback\n\t// always has access to the current refs.\n\tcurrentRefs.current = refs;\n\n\t// If any of the refs change, call the previous ref with `null` and the new\n\t// ref with the node, except when the element changes in the same cycle, in\n\t// which case the ref callbacks will already have been called.\n\tuseLayoutEffect( () => {\n\t\tif (\n\t\t\tdidElementChange.current === false &&\n\t\t\tisAttached.current === true\n\t\t) {\n\t\t\trefs.forEach( ( ref, index ) => {\n\t\t\t\tconst previousRef = previousRefs.current[ index ];\n\t\t\t\tif ( ref !== previousRef ) {\n\t\t\t\t\tassignRef( previousRef, null );\n\t\t\t\t\tassignRef( ref, element.current );\n\t\t\t\t}\n\t\t\t} );\n\t\t}\n\n\t\tpreviousRefs.current = refs;\n\t}, refs );\n\n\t// No dependencies, must be reset after every render so ref callbacks are\n\t// correctly called after a ref change.\n\tuseLayoutEffect( () => {\n\t\tdidElementChange.current = false;\n\t} );\n\n\t// There should be no dependencies so that `callback` is only called when\n\t// the node changes.\n\treturn useCallback( ( value ) => {\n\t\t// Update the element so it can be used when calling ref callbacks on a\n\t\t// dependency change.\n\t\tassignRef( element, value );\n\n\t\tdidElementChange.current = true;\n\t\tisAttached.current = value !== null;\n\n\t\t// When an element changes, the current ref callback should be called\n\t\t// with the new element and the previous one with `null`.\n\t\tconst refsToAssign = value ? currentRefs.current : previousRefs.current;\n\n\t\t// Update the latest refs.\n\t\tfor ( const ref of refsToAssign ) {\n\t\t\tassignRef( ref, value );\n\t\t}\n\t}, [] );\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,MAAM,EAAEC,WAAW,EAAEC,eAAe,QAAQ,oBAAoB;;AAEzE;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA,SAASC,SAASA,CAAEC,GAAG,EAAEC,KAAK,EAAG;EAChC,IAAK,OAAOD,GAAG,KAAK,UAAU,EAAG;IAChCA,GAAG,CAAEC,KAAM,CAAC;EACb,CAAC,MAAM,IAAKD,GAAG,IAAIA,GAAG,CAACE,cAAc,CAAE,SAAU,CAAC,EAAG;IACpD;IACA,kDAAqDF,GAAG,CAAGG,OAAO,GACjEF,KAAK;IACN;EACD;AACD;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe,SAASG,YAAYA,CAAEC,IAAI,EAAG;EAC5C,MAAMC,OAAO,GAAGV,MAAM,CAAC,CAAC;EACxB,MAAMW,UAAU,GAAGX,MAAM,CAAE,KAAM,CAAC;EAClC,MAAMY,gBAAgB,GAAGZ,MAAM,CAAE,KAAM,CAAC;EACxC;EACA;EACA;EACA,MAAMa,YAAY,GAAGb,MAAM,CAAE,EAAG,CAAC;EACjC,MAAMc,WAAW,GAAGd,MAAM,CAAES,IAAK,CAAC;;EAElC;EACA;EACAK,WAAW,CAACP,OAAO,GAAGE,IAAI;;EAE1B;EACA;EACA;EACAP,eAAe,CAAE,MAAM;IACtB,IACCU,gBAAgB,CAACL,OAAO,KAAK,KAAK,IAClCI,UAAU,CAACJ,OAAO,KAAK,IAAI,EAC1B;MACDE,IAAI,CAACM,OAAO,CAAE,CAAEX,GAAG,EAAEY,KAAK,KAAM;QAC/B,MAAMC,WAAW,GAAGJ,YAAY,CAACN,OAAO,CAAES,KAAK,CAAE;QACjD,IAAKZ,GAAG,KAAKa,WAAW,EAAG;UAC1Bd,SAAS,CAAEc,WAAW,EAAE,IAAK,CAAC;UAC9Bd,SAAS,CAAEC,GAAG,EAAEM,OAAO,CAACH,OAAQ,CAAC;QAClC;MACD,CAAE,CAAC;IACJ;IAEAM,YAAY,CAACN,OAAO,GAAGE,IAAI;EAC5B,CAAC,EAAEA,IAAK,CAAC;;EAET;EACA;EACAP,eAAe,CAAE,MAAM;IACtBU,gBAAgB,CAACL,OAAO,GAAG,KAAK;EACjC,CAAE,CAAC;;EAEH;EACA;EACA,OAAON,WAAW,CAAII,KAAK,IAAM;IAChC;IACA;IACAF,SAAS,CAAEO,OAAO,EAAEL,KAAM,CAAC;IAE3BO,gBAAgB,CAACL,OAAO,GAAG,IAAI;IAC/BI,UAAU,CAACJ,OAAO,GAAGF,KAAK,KAAK,IAAI;;IAEnC;IACA;IACA,MAAMa,YAAY,GAAGb,KAAK,GAAGS,WAAW,CAACP,OAAO,GAAGM,YAAY,CAACN,OAAO;;IAEvE;IACA,KAAM,MAAMH,GAAG,IAAIc,YAAY,EAAG;MACjCf,SAAS,CAAEC,GAAG,EAAEC,KAAM,CAAC;IACxB;EACD,CAAC,EAAE,EAAG,CAAC;AACR","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useEffect","useState","requestConnectionStatus","subscribeConnectionStatus","useNetworkConnectivity","isConnected","setIsConnected","isCurrent","isBridgeConnected","subscription","remove"],"sources":["@wordpress/compose/src/hooks/use-network-connectivity/index.native.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useEffect, useState } from '@wordpress/element';\nimport {\n\trequestConnectionStatus,\n\tsubscribeConnectionStatus,\n} from '@wordpress/react-native-bridge';\n\n/**\n * @typedef {Object} NetworkInformation\n *\n * @property {boolean} [isConnected] Whether the device is connected to a network.\n */\n\n/**\n * Returns the current network connectivity status provided by the native bridge.\n *\n * @example\n *\n * ```jsx\n * const { isConnected } = useNetworkConnectivity();\n * ```\n *\n * @return {NetworkInformation} Network information.\n */\nexport default function useNetworkConnectivity() {\n\tconst [ isConnected, setIsConnected ] = useState( true );\n\n\tuseEffect( () => {\n\t\tlet isCurrent = true;\n\n\t\trequestConnectionStatus( ( isBridgeConnected ) => {\n\t\t\tif ( ! isCurrent ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tsetIsConnected( isBridgeConnected );\n\t\t} );\n\n\t\treturn () => {\n\t\t\tisCurrent = false;\n\t\t};\n\t}, [] );\n\n\tuseEffect( () => {\n\t\tconst subscription = subscribeConnectionStatus(\n\t\t\t( { isConnected: isBridgeConnected } ) => {\n\t\t\t\tsetIsConnected( isBridgeConnected );\n\t\t\t}\n\t\t);\n\n\t\treturn () => {\n\t\t\tsubscription.remove();\n\t\t};\n\t}, [] );\n\n\treturn { isConnected };\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,SAAS,EAAEC,QAAQ,QAAQ,oBAAoB;AACxD,SACCC,uBAAuB,EACvBC,yBAAyB,QACnB,gCAAgC;;AAEvC;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe,SAASC,sBAAsBA,CAAA,EAAG;EAChD,MAAM,CAAEC,WAAW,EAAEC,cAAc,CAAE,GAAGL,QAAQ,CAAE,IAAK,CAAC;EAExDD,SAAS,CAAE,MAAM;IAChB,IAAIO,SAAS,GAAG,IAAI;IAEpBL,uBAAuB,CAAIM,iBAAiB,IAAM;MACjD,IAAK,CAAED,SAAS,EAAG;QAClB;MACD;MAEAD,cAAc,CAAEE,iBAAkB,CAAC;IACpC,CAAE,CAAC;IAEH,OAAO,MAAM;MACZD,SAAS,GAAG,KAAK;IAClB,CAAC;EACF,CAAC,EAAE,EAAG,CAAC;EAEPP,SAAS,CAAE,MAAM;IAChB,MAAMS,YAAY,GAAGN,yBAAyB,CAC7C,CAAE;MAAEE,WAAW,EAAEG;IAAkB,CAAC,KAAM;MACzCF,cAAc,CAAEE,iBAAkB,CAAC;IACpC,CACD,CAAC;IAED,OAAO,MAAM;MACZC,YAAY,CAACC,MAAM,CAAC,CAAC;IACtB,CAAC;EACF,CAAC,EAAE,EAAG,CAAC;EAEP,OAAO;IAAEL;EAAY,CAAC;AACvB"}
|
|
1
|
+
{"version":3,"names":["useEffect","useState","requestConnectionStatus","subscribeConnectionStatus","useNetworkConnectivity","isConnected","setIsConnected","isCurrent","isBridgeConnected","subscription","remove"],"sources":["@wordpress/compose/src/hooks/use-network-connectivity/index.native.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useEffect, useState } from '@wordpress/element';\nimport {\n\trequestConnectionStatus,\n\tsubscribeConnectionStatus,\n} from '@wordpress/react-native-bridge';\n\n/**\n * @typedef {Object} NetworkInformation\n *\n * @property {boolean} [isConnected] Whether the device is connected to a network.\n */\n\n/**\n * Returns the current network connectivity status provided by the native bridge.\n *\n * @example\n *\n * ```jsx\n * const { isConnected } = useNetworkConnectivity();\n * ```\n *\n * @return {NetworkInformation} Network information.\n */\nexport default function useNetworkConnectivity() {\n\tconst [ isConnected, setIsConnected ] = useState( true );\n\n\tuseEffect( () => {\n\t\tlet isCurrent = true;\n\n\t\trequestConnectionStatus( ( isBridgeConnected ) => {\n\t\t\tif ( ! isCurrent ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tsetIsConnected( isBridgeConnected );\n\t\t} );\n\n\t\treturn () => {\n\t\t\tisCurrent = false;\n\t\t};\n\t}, [] );\n\n\tuseEffect( () => {\n\t\tconst subscription = subscribeConnectionStatus(\n\t\t\t( { isConnected: isBridgeConnected } ) => {\n\t\t\t\tsetIsConnected( isBridgeConnected );\n\t\t\t}\n\t\t);\n\n\t\treturn () => {\n\t\t\tsubscription.remove();\n\t\t};\n\t}, [] );\n\n\treturn { isConnected };\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,SAAS,EAAEC,QAAQ,QAAQ,oBAAoB;AACxD,SACCC,uBAAuB,EACvBC,yBAAyB,QACnB,gCAAgC;;AAEvC;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe,SAASC,sBAAsBA,CAAA,EAAG;EAChD,MAAM,CAAEC,WAAW,EAAEC,cAAc,CAAE,GAAGL,QAAQ,CAAE,IAAK,CAAC;EAExDD,SAAS,CAAE,MAAM;IAChB,IAAIO,SAAS,GAAG,IAAI;IAEpBL,uBAAuB,CAAIM,iBAAiB,IAAM;MACjD,IAAK,CAAED,SAAS,EAAG;QAClB;MACD;MAEAD,cAAc,CAAEE,iBAAkB,CAAC;IACpC,CAAE,CAAC;IAEH,OAAO,MAAM;MACZD,SAAS,GAAG,KAAK;IAClB,CAAC;EACF,CAAC,EAAE,EAAG,CAAC;EAEPP,SAAS,CAAE,MAAM;IAChB,MAAMS,YAAY,GAAGN,yBAAyB,CAC7C,CAAE;MAAEE,WAAW,EAAEG;IAAkB,CAAC,KAAM;MACzCF,cAAc,CAAEE,iBAAkB,CAAC;IACpC,CACD,CAAC;IAED,OAAO,MAAM;MACZC,YAAY,CAACC,MAAM,CAAC,CAAC;IACtB,CAAC;EACF,CAAC,EAAE,EAAG,CAAC;EAEP,OAAO;IAAEL;EAAY,CAAC;AACvB","ignoreList":[]}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* WordPress dependencies
|
|
3
|
+
*/
|
|
4
|
+
import { useMemo, useSyncExternalStore } from '@wordpress/element';
|
|
5
|
+
|
|
6
|
+
/**
|
|
7
|
+
* Internal dependencies
|
|
8
|
+
*/
|
|
9
|
+
|
|
10
|
+
/**
|
|
11
|
+
* React hook that lets you observe an entry in an `ObservableMap`. The hook returns the
|
|
12
|
+
* current value corresponding to the key, or `undefined` when there is no value stored.
|
|
13
|
+
* It also observes changes to the value and triggers an update of the calling component
|
|
14
|
+
* in case the value changes.
|
|
15
|
+
*
|
|
16
|
+
* @template K The type of the keys in the map.
|
|
17
|
+
* @template V The type of the values in the map.
|
|
18
|
+
* @param map The `ObservableMap` to observe.
|
|
19
|
+
* @param name The map key to observe.
|
|
20
|
+
* @return The value corresponding to the map key requested.
|
|
21
|
+
*/
|
|
22
|
+
export default function useObservableValue(map, name) {
|
|
23
|
+
const [subscribe, getValue] = useMemo(() => [listener => map.subscribe(name, listener), () => map.get(name)], [map, name]);
|
|
24
|
+
return useSyncExternalStore(subscribe, getValue, getValue);
|
|
25
|
+
}
|
|
26
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["useMemo","useSyncExternalStore","useObservableValue","map","name","subscribe","getValue","listener","get"],"sources":["@wordpress/compose/src/hooks/use-observable-value/index.ts"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useMemo, useSyncExternalStore } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { ObservableMap } from '../../utils/observable-map';\n\n/**\n * React hook that lets you observe an entry in an `ObservableMap`. The hook returns the\n * current value corresponding to the key, or `undefined` when there is no value stored.\n * It also observes changes to the value and triggers an update of the calling component\n * in case the value changes.\n *\n * @template K The type of the keys in the map.\n * @template V The type of the values in the map.\n * @param map The `ObservableMap` to observe.\n * @param name The map key to observe.\n * @return The value corresponding to the map key requested.\n */\nexport default function useObservableValue< K, V >(\n\tmap: ObservableMap< K, V >,\n\tname: K\n): V | undefined {\n\tconst [ subscribe, getValue ] = useMemo(\n\t\t() => [\n\t\t\t( listener: () => void ) => map.subscribe( name, listener ),\n\t\t\t() => map.get( name ),\n\t\t],\n\t\t[ map, name ]\n\t);\n\treturn useSyncExternalStore( subscribe, getValue, getValue );\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,OAAO,EAAEC,oBAAoB,QAAQ,oBAAoB;;AAElE;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe,SAASC,kBAAkBA,CACzCC,GAA0B,EAC1BC,IAAO,EACS;EAChB,MAAM,CAAEC,SAAS,EAAEC,QAAQ,CAAE,GAAGN,OAAO,CACtC,MAAM,CACHO,QAAoB,IAAMJ,GAAG,CAACE,SAAS,CAAED,IAAI,EAAEG,QAAS,CAAC,EAC3D,MAAMJ,GAAG,CAACK,GAAG,CAAEJ,IAAK,CAAC,CACrB,EACD,CAAED,GAAG,EAAEC,IAAI,CACZ,CAAC;EACD,OAAOH,oBAAoB,CAAEI,SAAS,EAAEC,QAAQ,EAAEA,QAAS,CAAC;AAC7D","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useState","useEffect","subscribePreferredColorScheme","isInitialColorSchemeDark","usePreferredColorScheme","currentColorScheme","setCurrentColorScheme","isPreferredColorSchemeDark","colorScheme"],"sources":["@wordpress/compose/src/hooks/use-preferred-color-scheme/index.android.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useState, useEffect } from '@wordpress/element';\nimport {\n\tsubscribePreferredColorScheme,\n\tisInitialColorSchemeDark,\n} from '@wordpress/react-native-bridge';\n\n/**\n * Returns the color scheme value when it changes. Possible values: [ 'light', 'dark' ]\n *\n * @return {string} return current color scheme.\n */\nfunction usePreferredColorScheme() {\n\tconst [ currentColorScheme, setCurrentColorScheme ] = useState(\n\t\tisInitialColorSchemeDark ? 'dark' : 'light'\n\t);\n\tuseEffect( () => {\n\t\tsubscribePreferredColorScheme( ( { isPreferredColorSchemeDark } ) => {\n\t\t\tconst colorScheme = isPreferredColorSchemeDark ? 'dark' : 'light';\n\t\t\tif ( colorScheme !== currentColorScheme ) {\n\t\t\t\tsetCurrentColorScheme( colorScheme );\n\t\t\t}\n\t\t} );\n\t} );\n\treturn currentColorScheme;\n}\n\nexport default usePreferredColorScheme;\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,QAAQ,EAAEC,SAAS,QAAQ,oBAAoB;AACxD,SACCC,6BAA6B,EAC7BC,wBAAwB,QAClB,gCAAgC;;AAEvC;AACA;AACA;AACA;AACA;AACA,SAASC,uBAAuBA,CAAA,EAAG;EAClC,MAAM,CAAEC,kBAAkB,EAAEC,qBAAqB,CAAE,GAAGN,QAAQ,CAC7DG,wBAAwB,GAAG,MAAM,GAAG,OACrC,CAAC;EACDF,SAAS,CAAE,MAAM;IAChBC,6BAA6B,CAAE,CAAE;MAAEK;IAA2B,CAAC,KAAM;MACpE,MAAMC,WAAW,GAAGD,0BAA0B,GAAG,MAAM,GAAG,OAAO;MACjE,IAAKC,WAAW,KAAKH,kBAAkB,EAAG;QACzCC,qBAAqB,CAAEE,WAAY,CAAC;MACrC;IACD,CAAE,CAAC;EACJ,CAAE,CAAC;EACH,OAAOH,kBAAkB;AAC1B;AAEA,eAAeD,uBAAuB"}
|
|
1
|
+
{"version":3,"names":["useState","useEffect","subscribePreferredColorScheme","isInitialColorSchemeDark","usePreferredColorScheme","currentColorScheme","setCurrentColorScheme","isPreferredColorSchemeDark","colorScheme"],"sources":["@wordpress/compose/src/hooks/use-preferred-color-scheme/index.android.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useState, useEffect } from '@wordpress/element';\nimport {\n\tsubscribePreferredColorScheme,\n\tisInitialColorSchemeDark,\n} from '@wordpress/react-native-bridge';\n\n/**\n * Returns the color scheme value when it changes. Possible values: [ 'light', 'dark' ]\n *\n * @return {string} return current color scheme.\n */\nfunction usePreferredColorScheme() {\n\tconst [ currentColorScheme, setCurrentColorScheme ] = useState(\n\t\tisInitialColorSchemeDark ? 'dark' : 'light'\n\t);\n\tuseEffect( () => {\n\t\tsubscribePreferredColorScheme( ( { isPreferredColorSchemeDark } ) => {\n\t\t\tconst colorScheme = isPreferredColorSchemeDark ? 'dark' : 'light';\n\t\t\tif ( colorScheme !== currentColorScheme ) {\n\t\t\t\tsetCurrentColorScheme( colorScheme );\n\t\t\t}\n\t\t} );\n\t} );\n\treturn currentColorScheme;\n}\n\nexport default usePreferredColorScheme;\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,QAAQ,EAAEC,SAAS,QAAQ,oBAAoB;AACxD,SACCC,6BAA6B,EAC7BC,wBAAwB,QAClB,gCAAgC;;AAEvC;AACA;AACA;AACA;AACA;AACA,SAASC,uBAAuBA,CAAA,EAAG;EAClC,MAAM,CAAEC,kBAAkB,EAAEC,qBAAqB,CAAE,GAAGN,QAAQ,CAC7DG,wBAAwB,GAAG,MAAM,GAAG,OACrC,CAAC;EACDF,SAAS,CAAE,MAAM;IAChBC,6BAA6B,CAAE,CAAE;MAAEK;IAA2B,CAAC,KAAM;MACpE,MAAMC,WAAW,GAAGD,0BAA0B,GAAG,MAAM,GAAG,OAAO;MACjE,IAAKC,WAAW,KAAKH,kBAAkB,EAAG;QACzCC,qBAAqB,CAAEE,WAAY,CAAC;MACrC;IACD,CAAE,CAAC;EACJ,CAAE,CAAC;EACH,OAAOH,kBAAkB;AAC1B;AAEA,eAAeD,uBAAuB","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useColorScheme","usePreferredColorScheme"],"sources":["@wordpress/compose/src/hooks/use-preferred-color-scheme/index.ios.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { useColorScheme } from 'react-native';\n\n/**\n * Returns the color scheme value when it changes. Possible values: [ 'light', 'dark' ]\n *\n * @return {string} return current color scheme.\n */\nconst usePreferredColorScheme = useColorScheme;\n\nexport default usePreferredColorScheme;\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,cAAc,QAAQ,cAAc;;AAE7C;AACA;AACA;AACA;AACA;AACA,MAAMC,uBAAuB,GAAGD,cAAc;AAE9C,eAAeC,uBAAuB"}
|
|
1
|
+
{"version":3,"names":["useColorScheme","usePreferredColorScheme"],"sources":["@wordpress/compose/src/hooks/use-preferred-color-scheme/index.ios.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { useColorScheme } from 'react-native';\n\n/**\n * Returns the color scheme value when it changes. Possible values: [ 'light', 'dark' ]\n *\n * @return {string} return current color scheme.\n */\nconst usePreferredColorScheme = useColorScheme;\n\nexport default usePreferredColorScheme;\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,cAAc,QAAQ,cAAc;;AAE7C;AACA;AACA;AACA;AACA;AACA,MAAMC,uBAAuB,GAAGD,cAAc;AAE9C,eAAeC,uBAAuB","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["usePreferredColorScheme","usePreferredColorSchemeStyle","lightStyle","darkStyle","colorScheme","isDarkMode"],"sources":["@wordpress/compose/src/hooks/use-preferred-color-scheme-style/index.native.js"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport usePreferredColorScheme from '../use-preferred-color-scheme';\n\n/**\n * Selects which of the passed style objects should be applied depending on the\n * user's preferred color scheme.\n *\n * The \"light\" color schemed is assumed to be the default, and its styles are\n * always applied. The \"dark\" styles will always extend those defined for the\n * light case.\n *\n * @example\n * const light = { padding: 10, backgroundColor: 'white' };\n * const dark = { backgroundColor: 'black' };\n * usePreferredColorSchemeStyle( light, dark);\n * // On light mode:\n * // => { padding: 10, backgroundColor: 'white' }\n * // On dark mode:\n * // => { padding: 10, backgroundColor: 'black' }\n * @param {Object} lightStyle\n * @param {Object} darkStyle\n * @return {Object} the combined styles depending on the current color scheme\n */\nconst usePreferredColorSchemeStyle = ( lightStyle, darkStyle ) => {\n\tconst colorScheme = usePreferredColorScheme();\n\tconst isDarkMode = colorScheme === 'dark';\n\n\treturn isDarkMode ? { ...lightStyle, ...darkStyle } : lightStyle;\n};\n\nexport default usePreferredColorSchemeStyle;\n"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,uBAAuB,MAAM,+BAA+B;;AAEnE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,4BAA4B,GAAGA,CAAEC,UAAU,EAAEC,SAAS,KAAM;EACjE,MAAMC,WAAW,GAAGJ,uBAAuB,CAAC,CAAC;EAC7C,MAAMK,UAAU,GAAGD,WAAW,KAAK,MAAM;EAEzC,OAAOC,UAAU,GAAG;IAAE,GAAGH,UAAU;IAAE,GAAGC;EAAU,CAAC,GAAGD,UAAU;AACjE,CAAC;AAED,eAAeD,4BAA4B"}
|
|
1
|
+
{"version":3,"names":["usePreferredColorScheme","usePreferredColorSchemeStyle","lightStyle","darkStyle","colorScheme","isDarkMode"],"sources":["@wordpress/compose/src/hooks/use-preferred-color-scheme-style/index.native.js"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport usePreferredColorScheme from '../use-preferred-color-scheme';\n\n/**\n * Selects which of the passed style objects should be applied depending on the\n * user's preferred color scheme.\n *\n * The \"light\" color schemed is assumed to be the default, and its styles are\n * always applied. The \"dark\" styles will always extend those defined for the\n * light case.\n *\n * @example\n * const light = { padding: 10, backgroundColor: 'white' };\n * const dark = { backgroundColor: 'black' };\n * usePreferredColorSchemeStyle( light, dark);\n * // On light mode:\n * // => { padding: 10, backgroundColor: 'white' }\n * // On dark mode:\n * // => { padding: 10, backgroundColor: 'black' }\n * @param {Object} lightStyle\n * @param {Object} darkStyle\n * @return {Object} the combined styles depending on the current color scheme\n */\nconst usePreferredColorSchemeStyle = ( lightStyle, darkStyle ) => {\n\tconst colorScheme = usePreferredColorScheme();\n\tconst isDarkMode = colorScheme === 'dark';\n\n\treturn isDarkMode ? { ...lightStyle, ...darkStyle } : lightStyle;\n};\n\nexport default usePreferredColorSchemeStyle;\n"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,uBAAuB,MAAM,+BAA+B;;AAEnE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,4BAA4B,GAAGA,CAAEC,UAAU,EAAEC,SAAS,KAAM;EACjE,MAAMC,WAAW,GAAGJ,uBAAuB,CAAC,CAAC;EAC7C,MAAMK,UAAU,GAAGD,WAAW,KAAK,MAAM;EAEzC,OAAOC,UAAU,GAAG;IAAE,GAAGH,UAAU;IAAE,GAAGC;EAAU,CAAC,GAAGD,UAAU;AACjE,CAAC;AAED,eAAeD,4BAA4B","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useEffect","useRef","usePrevious","value","ref","current"],"sources":["@wordpress/compose/src/hooks/use-previous/index.ts"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useEffect, useRef } from '@wordpress/element';\n\n/**\n * Use something's value from the previous render.\n * Based on https://usehooks.com/usePrevious/.\n *\n * @param value The value to track.\n *\n * @return The value from the previous render.\n */\nexport default function usePrevious< T >( value: T ): T | undefined {\n\tconst ref = useRef< T >();\n\n\t// Store current value in ref.\n\tuseEffect( () => {\n\t\tref.current = value;\n\t}, [ value ] ); // Re-run when value changes.\n\n\t// Return previous value (happens before update in useEffect above).\n\treturn ref.current;\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,SAAS,EAAEC,MAAM,QAAQ,oBAAoB;;AAEtD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe,SAASC,WAAWA,CAAOC,KAAQ,EAAkB;EACnE,MAAMC,GAAG,GAAGH,MAAM,CAAM,CAAC;;EAEzB;EACAD,SAAS,CAAE,MAAM;IAChBI,GAAG,CAACC,OAAO,GAAGF,KAAK;EACpB,CAAC,EAAE,CAAEA,KAAK,CAAG,CAAC,CAAC,CAAC;;EAEhB;EACA,OAAOC,GAAG,CAACC,OAAO;AACnB"}
|
|
1
|
+
{"version":3,"names":["useEffect","useRef","usePrevious","value","ref","current"],"sources":["@wordpress/compose/src/hooks/use-previous/index.ts"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useEffect, useRef } from '@wordpress/element';\n\n/**\n * Use something's value from the previous render.\n * Based on https://usehooks.com/usePrevious/.\n *\n * @param value The value to track.\n *\n * @return The value from the previous render.\n */\nexport default function usePrevious< T >( value: T ): T | undefined {\n\tconst ref = useRef< T >();\n\n\t// Store current value in ref.\n\tuseEffect( () => {\n\t\tref.current = value;\n\t}, [ value ] ); // Re-run when value changes.\n\n\t// Return previous value (happens before update in useEffect above).\n\treturn ref.current;\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,SAAS,EAAEC,MAAM,QAAQ,oBAAoB;;AAEtD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe,SAASC,WAAWA,CAAOC,KAAQ,EAAkB;EACnE,MAAMC,GAAG,GAAGH,MAAM,CAAM,CAAC;;EAEzB;EACAD,SAAS,CAAE,MAAM;IAChBI,GAAG,CAACC,OAAO,GAAGF,KAAK;EACpB,CAAC,EAAE,CAAEA,KAAK,CAAG,CAAC,CAAC,CAAC;;EAEhB;EACA,OAAOC,GAAG,CAACC,OAAO;AACnB","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useMediaQuery","useReducedMotion"],"sources":["@wordpress/compose/src/hooks/use-reduced-motion/index.js"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport useMediaQuery from '../use-media-query';\n\n/**\n * Hook returning whether the user has a preference for reduced motion.\n *\n * @return {boolean} Reduced motion preference value.\n */\nconst useReducedMotion = () =>\n\tuseMediaQuery( '(prefers-reduced-motion: reduce)' );\n\nexport default useReducedMotion;\n"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,aAAa,MAAM,oBAAoB;;AAE9C;AACA;AACA;AACA;AACA;AACA,MAAMC,gBAAgB,GAAGA,CAAA,KACxBD,aAAa,CAAE,kCAAmC,CAAC;AAEpD,eAAeC,gBAAgB"}
|
|
1
|
+
{"version":3,"names":["useMediaQuery","useReducedMotion"],"sources":["@wordpress/compose/src/hooks/use-reduced-motion/index.js"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport useMediaQuery from '../use-media-query';\n\n/**\n * Hook returning whether the user has a preference for reduced motion.\n *\n * @return {boolean} Reduced motion preference value.\n */\nconst useReducedMotion = () =>\n\tuseMediaQuery( '(prefers-reduced-motion: reduce)' );\n\nexport default useReducedMotion;\n"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,aAAa,MAAM,oBAAoB;;AAE9C;AACA;AACA;AACA;AACA;AACA,MAAMC,gBAAgB,GAAGA,CAAA,KACxBD,aAAa,CAAE,kCAAmC,CAAC;AAEpD,eAAeC,gBAAgB","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useCallback","useRef","useRefEffect","callback","dependencies","cleanup","node","current"],"sources":["@wordpress/compose/src/hooks/use-ref-effect/index.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { DependencyList, RefCallback } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useCallback, useRef } from '@wordpress/element';\n\n/**\n * Effect-like ref callback. Just like with `useEffect`, this allows you to\n * return a cleanup function to be run if the ref changes or one of the\n * dependencies changes. The ref is provided as an argument to the callback\n * functions. The main difference between this and `useEffect` is that\n * the `useEffect` callback is not called when the ref changes, but this is.\n * Pass the returned ref callback as the component's ref and merge multiple refs\n * with `useMergeRefs`.\n *\n * It's worth noting that if the dependencies array is empty, there's not\n * strictly a need to clean up event handlers for example, because the node is\n * to be removed. It *is* necessary if you add dependencies because the ref\n * callback will be called multiple times for the same node.\n *\n * @param callback Callback with ref as argument.\n * @param dependencies Dependencies of the callback.\n *\n * @return Ref callback.\n */\nexport default function useRefEffect< TElement = Node >(\n\tcallback: ( node: TElement ) => ( () => void ) | void,\n\tdependencies: DependencyList\n): RefCallback< TElement | null > {\n\tconst cleanup = useRef< ( () => void ) | void >();\n\treturn useCallback( ( node: TElement | null ) => {\n\t\tif ( node ) {\n\t\t\tcleanup.current = callback( node );\n\t\t} else if ( cleanup.current ) {\n\t\t\tcleanup.current();\n\t\t}\n\t}, dependencies );\n}\n"],"mappings":"AAAA;AACA;AACA;;AAGA;AACA;AACA;AACA,SAASA,WAAW,EAAEC,MAAM,QAAQ,oBAAoB;;AAExD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe,SAASC,YAAYA,CACnCC,QAAqD,EACrDC,YAA4B,EACK;EACjC,MAAMC,OAAO,GAAGJ,MAAM,CAA0B,CAAC;EACjD,OAAOD,WAAW,CAAIM,IAAqB,IAAM;IAChD,IAAKA,IAAI,EAAG;MACXD,OAAO,CAACE,OAAO,GAAGJ,QAAQ,CAAEG,IAAK,CAAC;IACnC,CAAC,MAAM,IAAKD,OAAO,CAACE,OAAO,EAAG;MAC7BF,OAAO,CAACE,OAAO,CAAC,CAAC;IAClB;EACD,CAAC,EAAEH,YAAa,CAAC;AAClB"}
|
|
1
|
+
{"version":3,"names":["useCallback","useRef","useRefEffect","callback","dependencies","cleanup","node","current"],"sources":["@wordpress/compose/src/hooks/use-ref-effect/index.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { DependencyList, RefCallback } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useCallback, useRef } from '@wordpress/element';\n\n/**\n * Effect-like ref callback. Just like with `useEffect`, this allows you to\n * return a cleanup function to be run if the ref changes or one of the\n * dependencies changes. The ref is provided as an argument to the callback\n * functions. The main difference between this and `useEffect` is that\n * the `useEffect` callback is not called when the ref changes, but this is.\n * Pass the returned ref callback as the component's ref and merge multiple refs\n * with `useMergeRefs`.\n *\n * It's worth noting that if the dependencies array is empty, there's not\n * strictly a need to clean up event handlers for example, because the node is\n * to be removed. It *is* necessary if you add dependencies because the ref\n * callback will be called multiple times for the same node.\n *\n * @param callback Callback with ref as argument.\n * @param dependencies Dependencies of the callback.\n *\n * @return Ref callback.\n */\nexport default function useRefEffect< TElement = Node >(\n\tcallback: ( node: TElement ) => ( () => void ) | void,\n\tdependencies: DependencyList\n): RefCallback< TElement | null > {\n\tconst cleanup = useRef< ( () => void ) | void >();\n\treturn useCallback( ( node: TElement | null ) => {\n\t\tif ( node ) {\n\t\t\tcleanup.current = callback( node );\n\t\t} else if ( cleanup.current ) {\n\t\t\tcleanup.current();\n\t\t}\n\t}, dependencies );\n}\n"],"mappings":"AAAA;AACA;AACA;;AAGA;AACA;AACA;AACA,SAASA,WAAW,EAAEC,MAAM,QAAQ,oBAAoB;;AAExD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe,SAASC,YAAYA,CACnCC,QAAqD,EACrDC,YAA4B,EACK;EACjC,MAAMC,OAAO,GAAGJ,MAAM,CAA0B,CAAC;EACjD,OAAOD,WAAW,CAAIM,IAAqB,IAAM;IAChD,IAAKA,IAAI,EAAG;MACXD,OAAO,CAACE,OAAO,GAAGJ,QAAQ,CAAEG,IAAK,CAAC;IACnC,CAAC,MAAM,IAAKD,OAAO,CAACE,OAAO,EAAG;MAC7BF,OAAO,CAACE,OAAO,CAAC,CAAC;IAClB;EACD,CAAC,EAAEH,YAAa,CAAC;AAClB","ignoreList":[]}
|
|
@@ -59,6 +59,10 @@ function useResolvedElement(subscriber, refOrElement) {
|
|
|
59
59
|
callSubscriber();
|
|
60
60
|
}, [callSubscriber]);
|
|
61
61
|
}
|
|
62
|
+
|
|
63
|
+
// Declaring my own type here instead of using the one provided by TS (available since 4.2.2), because this way I'm not
|
|
64
|
+
// forcing consumers to use a specific TS version.
|
|
65
|
+
|
|
62
66
|
// We're only using the first element of the size sequences, until future versions of the spec solidify on how
|
|
63
67
|
// exactly it'll be used for fragments in multi-column scenarios:
|
|
64
68
|
// From the spec:
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useMemo","useRef","useCallback","useEffect","useState","useResolvedElement","subscriber","refOrElement","callbackRefElement","lastReportRef","cleanupRef","callSubscriber","element","current","HTMLElement","reporter","extractSize","entry","boxProp","sizeType","contentRect","undefined","useResizeObserver","opts","onResize","onResizeRef","round","Math","resizeObserverRef","size","setSize","width","height","didUnmount","previous","refCallback","box","instance","ResizeObserver","entries","reportedWidth","reportedHeight","newWidth","newHeight","newSize","observe","unobserve","ref","useResizeAware","sizes","resizeListener","createElement","style","position","top","left","right","bottom","pointerEvents","opacity","overflow","zIndex"],"sources":["@wordpress/compose/src/hooks/use-resize-observer/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ReactElement, RefCallback, RefObject } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tuseMemo,\n\tuseRef,\n\tuseCallback,\n\tuseEffect,\n\tuseState,\n} from '@wordpress/element';\n\ntype SubscriberCleanup = () => void;\ntype SubscriberResponse = SubscriberCleanup | void;\n\n// This of course could've been more streamlined with internal state instead of\n// refs, but then host hooks / components could not opt out of renders.\n// This could've been exported to its own module, but the current build doesn't\n// seem to work with module imports and I had no more time to spend on this...\nfunction useResolvedElement< T extends HTMLElement >(\n\tsubscriber: ( element: T ) => SubscriberResponse,\n\trefOrElement?: T | RefObject< T > | null\n): RefCallback< T > {\n\tconst callbackRefElement = useRef< T | null >( null );\n\tconst lastReportRef = useRef< {\n\t\treporter: () => void;\n\t\telement: T | null;\n\t} | null >( null );\n\tconst cleanupRef = useRef< SubscriberResponse | null >();\n\n\tconst callSubscriber = useCallback( () => {\n\t\tlet element = null;\n\t\tif ( callbackRefElement.current ) {\n\t\t\telement = callbackRefElement.current;\n\t\t} else if ( refOrElement ) {\n\t\t\tif ( refOrElement instanceof HTMLElement ) {\n\t\t\t\telement = refOrElement;\n\t\t\t} else {\n\t\t\t\telement = refOrElement.current;\n\t\t\t}\n\t\t}\n\n\t\tif (\n\t\t\tlastReportRef.current &&\n\t\t\tlastReportRef.current.element === element &&\n\t\t\tlastReportRef.current.reporter === callSubscriber\n\t\t) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ( cleanupRef.current ) {\n\t\t\tcleanupRef.current();\n\t\t\t// Making sure the cleanup is not called accidentally multiple times.\n\t\t\tcleanupRef.current = null;\n\t\t}\n\t\tlastReportRef.current = {\n\t\t\treporter: callSubscriber,\n\t\t\telement,\n\t\t};\n\n\t\t// Only calling the subscriber, if there's an actual element to report.\n\t\tif ( element ) {\n\t\t\tcleanupRef.current = subscriber( element );\n\t\t}\n\t}, [ refOrElement, subscriber ] );\n\n\t// On each render, we check whether a ref changed, or if we got a new raw\n\t// element.\n\tuseEffect( () => {\n\t\t// With this we're *technically* supporting cases where ref objects' current value changes, but only if there's a\n\t\t// render accompanying that change as well.\n\t\t// To guarantee we always have the right element, one must use the ref callback provided instead, but we support\n\t\t// RefObjects to make the hook API more convenient in certain cases.\n\t\tcallSubscriber();\n\t}, [ callSubscriber ] );\n\n\treturn useCallback< RefCallback< T > >(\n\t\t( element ) => {\n\t\t\tcallbackRefElement.current = element;\n\t\t\tcallSubscriber();\n\t\t},\n\t\t[ callSubscriber ]\n\t);\n}\n\ntype ObservedSize = {\n\twidth: number | undefined;\n\theight: number | undefined;\n};\n\ntype ResizeHandler = ( size: ObservedSize ) => void;\n\ntype HookResponse< T extends HTMLElement > = {\n\tref: RefCallback< T >;\n} & ObservedSize;\n\n// Declaring my own type here instead of using the one provided by TS (available since 4.2.2), because this way I'm not\n// forcing consumers to use a specific TS version.\ntype ResizeObserverBoxOptions =\n\t| 'border-box'\n\t| 'content-box'\n\t| 'device-pixel-content-box';\n\ndeclare global {\n\tinterface ResizeObserverEntry {\n\t\treadonly devicePixelContentBoxSize: ReadonlyArray< ResizeObserverSize >;\n\t}\n}\n\n// We're only using the first element of the size sequences, until future versions of the spec solidify on how\n// exactly it'll be used for fragments in multi-column scenarios:\n// From the spec:\n// > The box size properties are exposed as FrozenArray in order to support elements that have multiple fragments,\n// > which occur in multi-column scenarios. However the current definitions of content rect and border box do not\n// > mention how those boxes are affected by multi-column layout. In this spec, there will only be a single\n// > ResizeObserverSize returned in the FrozenArray, which will correspond to the dimensions of the first column.\n// > A future version of this spec will extend the returned FrozenArray to contain the per-fragment size information.\n// (https://drafts.csswg.org/resize-observer/#resize-observer-entry-interface)\n//\n// Also, testing these new box options revealed that in both Chrome and FF everything is returned in the callback,\n// regardless of the \"box\" option.\n// The spec states the following on this:\n// > This does not have any impact on which box dimensions are returned to the defined callback when the event\n// > is fired, it solely defines which box the author wishes to observe layout changes on.\n// (https://drafts.csswg.org/resize-observer/#resize-observer-interface)\n// I'm not exactly clear on what this means, especially when you consider a later section stating the following:\n// > This section is non-normative. An author may desire to observe more than one CSS box.\n// > In this case, author will need to use multiple ResizeObservers.\n// (https://drafts.csswg.org/resize-observer/#resize-observer-interface)\n// Which is clearly not how current browser implementations behave, and seems to contradict the previous quote.\n// For this reason I decided to only return the requested size,\n// even though it seems we have access to results for all box types.\n// This also means that we get to keep the current api, being able to return a simple { width, height } pair,\n// regardless of box option.\nconst extractSize = (\n\tentry: ResizeObserverEntry,\n\tboxProp: 'borderBoxSize' | 'contentBoxSize' | 'devicePixelContentBoxSize',\n\tsizeType: keyof ResizeObserverSize\n): number | undefined => {\n\tif ( ! entry[ boxProp ] ) {\n\t\tif ( boxProp === 'contentBoxSize' ) {\n\t\t\t// The dimensions in `contentBoxSize` and `contentRect` are equivalent according to the spec.\n\t\t\t// See the 6th step in the description for the RO algorithm:\n\t\t\t// https://drafts.csswg.org/resize-observer/#create-and-populate-resizeobserverentry-h\n\t\t\t// > Set this.contentRect to logical this.contentBoxSize given target and observedBox of \"content-box\".\n\t\t\t// In real browser implementations of course these objects differ, but the width/height values should be equivalent.\n\t\t\treturn entry.contentRect[\n\t\t\t\tsizeType === 'inlineSize' ? 'width' : 'height'\n\t\t\t];\n\t\t}\n\n\t\treturn undefined;\n\t}\n\n\t// A couple bytes smaller than calling Array.isArray() and just as effective here.\n\treturn entry[ boxProp ][ 0 ]\n\t\t? entry[ boxProp ][ 0 ][ sizeType ]\n\t\t: // TS complains about this, because the RO entry type follows the spec and does not reflect Firefox's current\n\t\t // behaviour of returning objects instead of arrays for `borderBoxSize` and `contentBoxSize`.\n\t\t // @ts-ignore\n\t\t entry[ boxProp ][ sizeType ];\n};\n\ntype RoundingFunction = ( n: number ) => number;\n\nfunction useResizeObserver< T extends HTMLElement >(\n\topts: {\n\t\tref?: RefObject< T > | T | null | undefined;\n\t\tonResize?: ResizeHandler;\n\t\tbox?: ResizeObserverBoxOptions;\n\t\tround?: RoundingFunction;\n\t} = {}\n): HookResponse< T > {\n\t// Saving the callback as a ref. With this, I don't need to put onResize in the\n\t// effect dep array, and just passing in an anonymous function without memoising\n\t// will not reinstantiate the hook's ResizeObserver.\n\tconst onResize = opts.onResize;\n\tconst onResizeRef = useRef< ResizeHandler | undefined >( undefined );\n\tonResizeRef.current = onResize;\n\tconst round = opts.round || Math.round;\n\n\t// Using a single instance throughout the hook's lifetime\n\tconst resizeObserverRef = useRef< {\n\t\tbox?: ResizeObserverBoxOptions;\n\t\tround?: RoundingFunction;\n\t\tinstance: ResizeObserver;\n\t} >();\n\n\tconst [ size, setSize ] = useState< {\n\t\twidth?: number;\n\t\theight?: number;\n\t} >( {\n\t\twidth: undefined,\n\t\theight: undefined,\n\t} );\n\n\t// In certain edge cases the RO might want to report a size change just after\n\t// the component unmounted.\n\tconst didUnmount = useRef( false );\n\tuseEffect( () => {\n\t\tdidUnmount.current = false;\n\t\treturn () => {\n\t\t\tdidUnmount.current = true;\n\t\t};\n\t}, [] );\n\n\t// Using a ref to track the previous width / height to avoid unnecessary renders.\n\tconst previous: {\n\t\tcurrent: {\n\t\t\twidth?: number;\n\t\t\theight?: number;\n\t\t};\n\t} = useRef( {\n\t\twidth: undefined,\n\t\theight: undefined,\n\t} );\n\n\t// This block is kinda like a useEffect, only it's called whenever a new\n\t// element could be resolved based on the ref option. It also has a cleanup\n\t// function.\n\tconst refCallback = useResolvedElement< T >(\n\t\tuseCallback(\n\t\t\t( element ) => {\n\t\t\t\t// We only use a single Resize Observer instance, and we're instantiating it on demand, only once there's something to observe.\n\t\t\t\t// This instance is also recreated when the `box` option changes, so that a new observation is fired if there was a previously observed element with a different box option.\n\t\t\t\tif (\n\t\t\t\t\t! resizeObserverRef.current ||\n\t\t\t\t\tresizeObserverRef.current.box !== opts.box ||\n\t\t\t\t\tresizeObserverRef.current.round !== round\n\t\t\t\t) {\n\t\t\t\t\tresizeObserverRef.current = {\n\t\t\t\t\t\tbox: opts.box,\n\t\t\t\t\t\tround,\n\t\t\t\t\t\tinstance: new ResizeObserver( ( entries ) => {\n\t\t\t\t\t\t\tconst entry = entries[ 0 ];\n\n\t\t\t\t\t\t\tlet boxProp:\n\t\t\t\t\t\t\t\t| 'borderBoxSize'\n\t\t\t\t\t\t\t\t| 'contentBoxSize'\n\t\t\t\t\t\t\t\t| 'devicePixelContentBoxSize' = 'borderBoxSize';\n\t\t\t\t\t\t\tif ( opts.box === 'border-box' ) {\n\t\t\t\t\t\t\t\tboxProp = 'borderBoxSize';\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tboxProp =\n\t\t\t\t\t\t\t\t\topts.box === 'device-pixel-content-box'\n\t\t\t\t\t\t\t\t\t\t? 'devicePixelContentBoxSize'\n\t\t\t\t\t\t\t\t\t\t: 'contentBoxSize';\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\tconst reportedWidth = extractSize(\n\t\t\t\t\t\t\t\tentry,\n\t\t\t\t\t\t\t\tboxProp,\n\t\t\t\t\t\t\t\t'inlineSize'\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\tconst reportedHeight = extractSize(\n\t\t\t\t\t\t\t\tentry,\n\t\t\t\t\t\t\t\tboxProp,\n\t\t\t\t\t\t\t\t'blockSize'\n\t\t\t\t\t\t\t);\n\n\t\t\t\t\t\t\tconst newWidth = reportedWidth\n\t\t\t\t\t\t\t\t? round( reportedWidth )\n\t\t\t\t\t\t\t\t: undefined;\n\t\t\t\t\t\t\tconst newHeight = reportedHeight\n\t\t\t\t\t\t\t\t? round( reportedHeight )\n\t\t\t\t\t\t\t\t: undefined;\n\n\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\tprevious.current.width !== newWidth ||\n\t\t\t\t\t\t\t\tprevious.current.height !== newHeight\n\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\tconst newSize = {\n\t\t\t\t\t\t\t\t\twidth: newWidth,\n\t\t\t\t\t\t\t\t\theight: newHeight,\n\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t\tprevious.current.width = newWidth;\n\t\t\t\t\t\t\t\tprevious.current.height = newHeight;\n\t\t\t\t\t\t\t\tif ( onResizeRef.current ) {\n\t\t\t\t\t\t\t\t\tonResizeRef.current( newSize );\n\t\t\t\t\t\t\t\t} else if ( ! didUnmount.current ) {\n\t\t\t\t\t\t\t\t\tsetSize( newSize );\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t} ),\n\t\t\t\t\t};\n\t\t\t\t}\n\n\t\t\t\tresizeObserverRef.current.instance.observe( element, {\n\t\t\t\t\tbox: opts.box,\n\t\t\t\t} );\n\n\t\t\t\treturn () => {\n\t\t\t\t\tif ( resizeObserverRef.current ) {\n\t\t\t\t\t\tresizeObserverRef.current.instance.unobserve( element );\n\t\t\t\t\t}\n\t\t\t\t};\n\t\t\t},\n\t\t\t[ opts.box, round ]\n\t\t),\n\t\topts.ref\n\t);\n\n\treturn useMemo(\n\t\t() => ( {\n\t\t\tref: refCallback,\n\t\t\twidth: size.width,\n\t\t\theight: size.height,\n\t\t} ),\n\t\t[ refCallback, size ? size.width : null, size ? size.height : null ]\n\t);\n}\n\n/**\n * Hook which allows to listen the resize event of any target element when it changes sizes.\n * _Note: `useResizeObserver` will report `null` until after first render.\n *\n * @example\n *\n * ```js\n * const App = () => {\n * \tconst [ resizeListener, sizes ] = useResizeObserver();\n *\n * \treturn (\n * \t\t<div>\n * \t\t\t{ resizeListener }\n * \t\t\tYour content here\n * \t\t</div>\n * \t);\n * };\n * ```\n */\nexport default function useResizeAware(): [\n\tReactElement,\n\t{ width: number | null; height: number | null },\n] {\n\tconst { ref, width, height } = useResizeObserver();\n\tconst sizes = useMemo( () => {\n\t\treturn { width: width ?? null, height: height ?? null };\n\t}, [ width, height ] );\n\tconst resizeListener = (\n\t\t<div\n\t\t\tstyle={ {\n\t\t\t\tposition: 'absolute',\n\t\t\t\ttop: 0,\n\t\t\t\tleft: 0,\n\t\t\t\tright: 0,\n\t\t\t\tbottom: 0,\n\t\t\t\tpointerEvents: 'none',\n\t\t\t\topacity: 0,\n\t\t\t\toverflow: 'hidden',\n\t\t\t\tzIndex: -1,\n\t\t\t} }\n\t\t\taria-hidden=\"true\"\n\t\t\tref={ ref }\n\t\t/>\n\t);\n\treturn [ resizeListener, sizes ];\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"names":["useMemo","useRef","useCallback","useEffect","useState","useResolvedElement","subscriber","refOrElement","callbackRefElement","lastReportRef","cleanupRef","callSubscriber","element","current","HTMLElement","reporter","extractSize","entry","boxProp","sizeType","contentRect","undefined","useResizeObserver","opts","onResize","onResizeRef","round","Math","resizeObserverRef","size","setSize","width","height","didUnmount","previous","refCallback","box","instance","ResizeObserver","entries","reportedWidth","reportedHeight","newWidth","newHeight","newSize","observe","unobserve","ref","useResizeAware","sizes","resizeListener","createElement","style","position","top","left","right","bottom","pointerEvents","opacity","overflow","zIndex"],"sources":["@wordpress/compose/src/hooks/use-resize-observer/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ReactElement, RefCallback, RefObject } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tuseMemo,\n\tuseRef,\n\tuseCallback,\n\tuseEffect,\n\tuseState,\n} from '@wordpress/element';\n\ntype SubscriberCleanup = () => void;\ntype SubscriberResponse = SubscriberCleanup | void;\n\n// This of course could've been more streamlined with internal state instead of\n// refs, but then host hooks / components could not opt out of renders.\n// This could've been exported to its own module, but the current build doesn't\n// seem to work with module imports and I had no more time to spend on this...\nfunction useResolvedElement< T extends HTMLElement >(\n\tsubscriber: ( element: T ) => SubscriberResponse,\n\trefOrElement?: T | RefObject< T > | null\n): RefCallback< T > {\n\tconst callbackRefElement = useRef< T | null >( null );\n\tconst lastReportRef = useRef< {\n\t\treporter: () => void;\n\t\telement: T | null;\n\t} | null >( null );\n\tconst cleanupRef = useRef< SubscriberResponse | null >();\n\n\tconst callSubscriber = useCallback( () => {\n\t\tlet element = null;\n\t\tif ( callbackRefElement.current ) {\n\t\t\telement = callbackRefElement.current;\n\t\t} else if ( refOrElement ) {\n\t\t\tif ( refOrElement instanceof HTMLElement ) {\n\t\t\t\telement = refOrElement;\n\t\t\t} else {\n\t\t\t\telement = refOrElement.current;\n\t\t\t}\n\t\t}\n\n\t\tif (\n\t\t\tlastReportRef.current &&\n\t\t\tlastReportRef.current.element === element &&\n\t\t\tlastReportRef.current.reporter === callSubscriber\n\t\t) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ( cleanupRef.current ) {\n\t\t\tcleanupRef.current();\n\t\t\t// Making sure the cleanup is not called accidentally multiple times.\n\t\t\tcleanupRef.current = null;\n\t\t}\n\t\tlastReportRef.current = {\n\t\t\treporter: callSubscriber,\n\t\t\telement,\n\t\t};\n\n\t\t// Only calling the subscriber, if there's an actual element to report.\n\t\tif ( element ) {\n\t\t\tcleanupRef.current = subscriber( element );\n\t\t}\n\t}, [ refOrElement, subscriber ] );\n\n\t// On each render, we check whether a ref changed, or if we got a new raw\n\t// element.\n\tuseEffect( () => {\n\t\t// With this we're *technically* supporting cases where ref objects' current value changes, but only if there's a\n\t\t// render accompanying that change as well.\n\t\t// To guarantee we always have the right element, one must use the ref callback provided instead, but we support\n\t\t// RefObjects to make the hook API more convenient in certain cases.\n\t\tcallSubscriber();\n\t}, [ callSubscriber ] );\n\n\treturn useCallback< RefCallback< T > >(\n\t\t( element ) => {\n\t\t\tcallbackRefElement.current = element;\n\t\t\tcallSubscriber();\n\t\t},\n\t\t[ callSubscriber ]\n\t);\n}\n\ntype ObservedSize = {\n\twidth: number | undefined;\n\theight: number | undefined;\n};\n\ntype ResizeHandler = ( size: ObservedSize ) => void;\n\ntype HookResponse< T extends HTMLElement > = {\n\tref: RefCallback< T >;\n} & ObservedSize;\n\n// Declaring my own type here instead of using the one provided by TS (available since 4.2.2), because this way I'm not\n// forcing consumers to use a specific TS version.\ntype ResizeObserverBoxOptions =\n\t| 'border-box'\n\t| 'content-box'\n\t| 'device-pixel-content-box';\n\ndeclare global {\n\tinterface ResizeObserverEntry {\n\t\treadonly devicePixelContentBoxSize: ReadonlyArray< ResizeObserverSize >;\n\t}\n}\n\n// We're only using the first element of the size sequences, until future versions of the spec solidify on how\n// exactly it'll be used for fragments in multi-column scenarios:\n// From the spec:\n// > The box size properties are exposed as FrozenArray in order to support elements that have multiple fragments,\n// > which occur in multi-column scenarios. However the current definitions of content rect and border box do not\n// > mention how those boxes are affected by multi-column layout. In this spec, there will only be a single\n// > ResizeObserverSize returned in the FrozenArray, which will correspond to the dimensions of the first column.\n// > A future version of this spec will extend the returned FrozenArray to contain the per-fragment size information.\n// (https://drafts.csswg.org/resize-observer/#resize-observer-entry-interface)\n//\n// Also, testing these new box options revealed that in both Chrome and FF everything is returned in the callback,\n// regardless of the \"box\" option.\n// The spec states the following on this:\n// > This does not have any impact on which box dimensions are returned to the defined callback when the event\n// > is fired, it solely defines which box the author wishes to observe layout changes on.\n// (https://drafts.csswg.org/resize-observer/#resize-observer-interface)\n// I'm not exactly clear on what this means, especially when you consider a later section stating the following:\n// > This section is non-normative. An author may desire to observe more than one CSS box.\n// > In this case, author will need to use multiple ResizeObservers.\n// (https://drafts.csswg.org/resize-observer/#resize-observer-interface)\n// Which is clearly not how current browser implementations behave, and seems to contradict the previous quote.\n// For this reason I decided to only return the requested size,\n// even though it seems we have access to results for all box types.\n// This also means that we get to keep the current api, being able to return a simple { width, height } pair,\n// regardless of box option.\nconst extractSize = (\n\tentry: ResizeObserverEntry,\n\tboxProp: 'borderBoxSize' | 'contentBoxSize' | 'devicePixelContentBoxSize',\n\tsizeType: keyof ResizeObserverSize\n): number | undefined => {\n\tif ( ! entry[ boxProp ] ) {\n\t\tif ( boxProp === 'contentBoxSize' ) {\n\t\t\t// The dimensions in `contentBoxSize` and `contentRect` are equivalent according to the spec.\n\t\t\t// See the 6th step in the description for the RO algorithm:\n\t\t\t// https://drafts.csswg.org/resize-observer/#create-and-populate-resizeobserverentry-h\n\t\t\t// > Set this.contentRect to logical this.contentBoxSize given target and observedBox of \"content-box\".\n\t\t\t// In real browser implementations of course these objects differ, but the width/height values should be equivalent.\n\t\t\treturn entry.contentRect[\n\t\t\t\tsizeType === 'inlineSize' ? 'width' : 'height'\n\t\t\t];\n\t\t}\n\n\t\treturn undefined;\n\t}\n\n\t// A couple bytes smaller than calling Array.isArray() and just as effective here.\n\treturn entry[ boxProp ][ 0 ]\n\t\t? entry[ boxProp ][ 0 ][ sizeType ]\n\t\t: // TS complains about this, because the RO entry type follows the spec and does not reflect Firefox's current\n\t\t // behaviour of returning objects instead of arrays for `borderBoxSize` and `contentBoxSize`.\n\t\t // @ts-ignore\n\t\t entry[ boxProp ][ sizeType ];\n};\n\ntype RoundingFunction = ( n: number ) => number;\n\nfunction useResizeObserver< T extends HTMLElement >(\n\topts: {\n\t\tref?: RefObject< T > | T | null | undefined;\n\t\tonResize?: ResizeHandler;\n\t\tbox?: ResizeObserverBoxOptions;\n\t\tround?: RoundingFunction;\n\t} = {}\n): HookResponse< T > {\n\t// Saving the callback as a ref. With this, I don't need to put onResize in the\n\t// effect dep array, and just passing in an anonymous function without memoising\n\t// will not reinstantiate the hook's ResizeObserver.\n\tconst onResize = opts.onResize;\n\tconst onResizeRef = useRef< ResizeHandler | undefined >( undefined );\n\tonResizeRef.current = onResize;\n\tconst round = opts.round || Math.round;\n\n\t// Using a single instance throughout the hook's lifetime\n\tconst resizeObserverRef = useRef< {\n\t\tbox?: ResizeObserverBoxOptions;\n\t\tround?: RoundingFunction;\n\t\tinstance: ResizeObserver;\n\t} >();\n\n\tconst [ size, setSize ] = useState< {\n\t\twidth?: number;\n\t\theight?: number;\n\t} >( {\n\t\twidth: undefined,\n\t\theight: undefined,\n\t} );\n\n\t// In certain edge cases the RO might want to report a size change just after\n\t// the component unmounted.\n\tconst didUnmount = useRef( false );\n\tuseEffect( () => {\n\t\tdidUnmount.current = false;\n\t\treturn () => {\n\t\t\tdidUnmount.current = true;\n\t\t};\n\t}, [] );\n\n\t// Using a ref to track the previous width / height to avoid unnecessary renders.\n\tconst previous: {\n\t\tcurrent: {\n\t\t\twidth?: number;\n\t\t\theight?: number;\n\t\t};\n\t} = useRef( {\n\t\twidth: undefined,\n\t\theight: undefined,\n\t} );\n\n\t// This block is kinda like a useEffect, only it's called whenever a new\n\t// element could be resolved based on the ref option. It also has a cleanup\n\t// function.\n\tconst refCallback = useResolvedElement< T >(\n\t\tuseCallback(\n\t\t\t( element ) => {\n\t\t\t\t// We only use a single Resize Observer instance, and we're instantiating it on demand, only once there's something to observe.\n\t\t\t\t// This instance is also recreated when the `box` option changes, so that a new observation is fired if there was a previously observed element with a different box option.\n\t\t\t\tif (\n\t\t\t\t\t! resizeObserverRef.current ||\n\t\t\t\t\tresizeObserverRef.current.box !== opts.box ||\n\t\t\t\t\tresizeObserverRef.current.round !== round\n\t\t\t\t) {\n\t\t\t\t\tresizeObserverRef.current = {\n\t\t\t\t\t\tbox: opts.box,\n\t\t\t\t\t\tround,\n\t\t\t\t\t\tinstance: new ResizeObserver( ( entries ) => {\n\t\t\t\t\t\t\tconst entry = entries[ 0 ];\n\n\t\t\t\t\t\t\tlet boxProp:\n\t\t\t\t\t\t\t\t| 'borderBoxSize'\n\t\t\t\t\t\t\t\t| 'contentBoxSize'\n\t\t\t\t\t\t\t\t| 'devicePixelContentBoxSize' = 'borderBoxSize';\n\t\t\t\t\t\t\tif ( opts.box === 'border-box' ) {\n\t\t\t\t\t\t\t\tboxProp = 'borderBoxSize';\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tboxProp =\n\t\t\t\t\t\t\t\t\topts.box === 'device-pixel-content-box'\n\t\t\t\t\t\t\t\t\t\t? 'devicePixelContentBoxSize'\n\t\t\t\t\t\t\t\t\t\t: 'contentBoxSize';\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\tconst reportedWidth = extractSize(\n\t\t\t\t\t\t\t\tentry,\n\t\t\t\t\t\t\t\tboxProp,\n\t\t\t\t\t\t\t\t'inlineSize'\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\tconst reportedHeight = extractSize(\n\t\t\t\t\t\t\t\tentry,\n\t\t\t\t\t\t\t\tboxProp,\n\t\t\t\t\t\t\t\t'blockSize'\n\t\t\t\t\t\t\t);\n\n\t\t\t\t\t\t\tconst newWidth = reportedWidth\n\t\t\t\t\t\t\t\t? round( reportedWidth )\n\t\t\t\t\t\t\t\t: undefined;\n\t\t\t\t\t\t\tconst newHeight = reportedHeight\n\t\t\t\t\t\t\t\t? round( reportedHeight )\n\t\t\t\t\t\t\t\t: undefined;\n\n\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\tprevious.current.width !== newWidth ||\n\t\t\t\t\t\t\t\tprevious.current.height !== newHeight\n\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\tconst newSize = {\n\t\t\t\t\t\t\t\t\twidth: newWidth,\n\t\t\t\t\t\t\t\t\theight: newHeight,\n\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t\tprevious.current.width = newWidth;\n\t\t\t\t\t\t\t\tprevious.current.height = newHeight;\n\t\t\t\t\t\t\t\tif ( onResizeRef.current ) {\n\t\t\t\t\t\t\t\t\tonResizeRef.current( newSize );\n\t\t\t\t\t\t\t\t} else if ( ! didUnmount.current ) {\n\t\t\t\t\t\t\t\t\tsetSize( newSize );\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t} ),\n\t\t\t\t\t};\n\t\t\t\t}\n\n\t\t\t\tresizeObserverRef.current.instance.observe( element, {\n\t\t\t\t\tbox: opts.box,\n\t\t\t\t} );\n\n\t\t\t\treturn () => {\n\t\t\t\t\tif ( resizeObserverRef.current ) {\n\t\t\t\t\t\tresizeObserverRef.current.instance.unobserve( element );\n\t\t\t\t\t}\n\t\t\t\t};\n\t\t\t},\n\t\t\t[ opts.box, round ]\n\t\t),\n\t\topts.ref\n\t);\n\n\treturn useMemo(\n\t\t() => ( {\n\t\t\tref: refCallback,\n\t\t\twidth: size.width,\n\t\t\theight: size.height,\n\t\t} ),\n\t\t[ refCallback, size ? size.width : null, size ? size.height : null ]\n\t);\n}\n\n/**\n * Hook which allows to listen the resize event of any target element when it changes sizes.\n * _Note: `useResizeObserver` will report `null` until after first render.\n *\n * @example\n *\n * ```js\n * const App = () => {\n * \tconst [ resizeListener, sizes ] = useResizeObserver();\n *\n * \treturn (\n * \t\t<div>\n * \t\t\t{ resizeListener }\n * \t\t\tYour content here\n * \t\t</div>\n * \t);\n * };\n * ```\n */\nexport default function useResizeAware(): [\n\tReactElement,\n\t{ width: number | null; height: number | null },\n] {\n\tconst { ref, width, height } = useResizeObserver();\n\tconst sizes = useMemo( () => {\n\t\treturn { width: width ?? null, height: height ?? null };\n\t}, [ width, height ] );\n\tconst resizeListener = (\n\t\t<div\n\t\t\tstyle={ {\n\t\t\t\tposition: 'absolute',\n\t\t\t\ttop: 0,\n\t\t\t\tleft: 0,\n\t\t\t\tright: 0,\n\t\t\t\tbottom: 0,\n\t\t\t\tpointerEvents: 'none',\n\t\t\t\topacity: 0,\n\t\t\t\toverflow: 'hidden',\n\t\t\t\tzIndex: -1,\n\t\t\t} }\n\t\t\taria-hidden=\"true\"\n\t\t\tref={ ref }\n\t\t/>\n\t);\n\treturn [ resizeListener, sizes ];\n}\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["View","StyleSheet","useState","useCallback","useResizeObserver","measurements","setMeasurements","onLayout","nativeEvent","width","height","layout","prevState","Math","floor","observer","createElement","testID","style","absoluteFill"],"sources":["@wordpress/compose/src/hooks/use-resize-observer/index.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { View, StyleSheet } from 'react-native';\n/**\n * WordPress dependencies\n */\nimport { useState, useCallback } from '@wordpress/element';\n\n/**\n * Hook which allows to listen the resize event of any target element when it changes sizes.\n *\n * @example\n *\n * ```js\n * const App = () => {\n * \tconst [ resizeListener, sizes ] = useResizeObserver();\n *\n * \treturn (\n * \t\t<View>\n * \t\t\t{ resizeListener }\n * \t\t\tYour content here\n * \t\t</View>\n * \t);\n * };\n * ```\n */\nconst useResizeObserver = () => {\n\tconst [ measurements, setMeasurements ] = useState( null );\n\n\tconst onLayout = useCallback( ( { nativeEvent } ) => {\n\t\tconst { width, height } = nativeEvent.layout;\n\t\tsetMeasurements( ( prevState ) => {\n\t\t\tif (\n\t\t\t\t! prevState ||\n\t\t\t\tprevState.width !== width ||\n\t\t\t\tprevState.height !== height\n\t\t\t) {\n\t\t\t\treturn {\n\t\t\t\t\twidth: Math.floor( width ),\n\t\t\t\t\theight: Math.floor( height ),\n\t\t\t\t};\n\t\t\t}\n\t\t\treturn prevState;\n\t\t} );\n\t}, [] );\n\n\tconst observer = (\n\t\t<View\n\t\t\ttestID=\"resize-observer\"\n\t\t\tstyle={ StyleSheet.absoluteFill }\n\t\t\tonLayout={ onLayout }\n\t\t/>\n\t);\n\n\treturn [ observer, measurements ];\n};\n\nexport default useResizeObserver;\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,IAAI,EAAEC,UAAU,QAAQ,cAAc;AAC/C;AACA;AACA;AACA,SAASC,QAAQ,EAAEC,WAAW,QAAQ,oBAAoB;;AAE1D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,iBAAiB,GAAGA,CAAA,KAAM;EAC/B,MAAM,CAAEC,YAAY,EAAEC,eAAe,CAAE,GAAGJ,QAAQ,CAAE,IAAK,CAAC;EAE1D,MAAMK,QAAQ,GAAGJ,WAAW,CAAE,CAAE;IAAEK;EAAY,CAAC,KAAM;IACpD,MAAM;MAAEC,KAAK;MAAEC;IAAO,CAAC,GAAGF,WAAW,CAACG,MAAM;IAC5CL,eAAe,CAAIM,SAAS,IAAM;MACjC,IACC,CAAEA,SAAS,IACXA,SAAS,CAACH,KAAK,KAAKA,KAAK,IACzBG,SAAS,CAACF,MAAM,KAAKA,MAAM,EAC1B;QACD,OAAO;UACND,KAAK,EAAEI,IAAI,CAACC,KAAK,CAAEL,KAAM,CAAC;UAC1BC,MAAM,EAAEG,IAAI,CAACC,KAAK,CAAEJ,MAAO;QAC5B,CAAC;MACF;MACA,OAAOE,SAAS;IACjB,CAAE,CAAC;EACJ,CAAC,EAAE,EAAG,CAAC;EAEP,MAAMG,QAAQ,GACbC,aAAA,CAAChB,IAAI;IACJiB,MAAM,EAAC,iBAAiB;IACxBC,KAAK,EAAGjB,UAAU,CAACkB,YAAc;IACjCZ,QAAQ,EAAGA;EAAU,CACrB,CACD;EAED,OAAO,CAAEQ,QAAQ,EAAEV,YAAY,CAAE;AAClC,CAAC;AAED,eAAeD,iBAAiB"}
|
|
1
|
+
{"version":3,"names":["View","StyleSheet","useState","useCallback","useResizeObserver","measurements","setMeasurements","onLayout","nativeEvent","width","height","layout","prevState","Math","floor","observer","createElement","testID","style","absoluteFill"],"sources":["@wordpress/compose/src/hooks/use-resize-observer/index.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { View, StyleSheet } from 'react-native';\n/**\n * WordPress dependencies\n */\nimport { useState, useCallback } from '@wordpress/element';\n\n/**\n * Hook which allows to listen the resize event of any target element when it changes sizes.\n *\n * @example\n *\n * ```js\n * const App = () => {\n * \tconst [ resizeListener, sizes ] = useResizeObserver();\n *\n * \treturn (\n * \t\t<View>\n * \t\t\t{ resizeListener }\n * \t\t\tYour content here\n * \t\t</View>\n * \t);\n * };\n * ```\n */\nconst useResizeObserver = () => {\n\tconst [ measurements, setMeasurements ] = useState( null );\n\n\tconst onLayout = useCallback( ( { nativeEvent } ) => {\n\t\tconst { width, height } = nativeEvent.layout;\n\t\tsetMeasurements( ( prevState ) => {\n\t\t\tif (\n\t\t\t\t! prevState ||\n\t\t\t\tprevState.width !== width ||\n\t\t\t\tprevState.height !== height\n\t\t\t) {\n\t\t\t\treturn {\n\t\t\t\t\twidth: Math.floor( width ),\n\t\t\t\t\theight: Math.floor( height ),\n\t\t\t\t};\n\t\t\t}\n\t\t\treturn prevState;\n\t\t} );\n\t}, [] );\n\n\tconst observer = (\n\t\t<View\n\t\t\ttestID=\"resize-observer\"\n\t\t\tstyle={ StyleSheet.absoluteFill }\n\t\t\tonLayout={ onLayout }\n\t\t/>\n\t);\n\n\treturn [ observer, measurements ];\n};\n\nexport default useResizeObserver;\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,IAAI,EAAEC,UAAU,QAAQ,cAAc;AAC/C;AACA;AACA;AACA,SAASC,QAAQ,EAAEC,WAAW,QAAQ,oBAAoB;;AAE1D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,iBAAiB,GAAGA,CAAA,KAAM;EAC/B,MAAM,CAAEC,YAAY,EAAEC,eAAe,CAAE,GAAGJ,QAAQ,CAAE,IAAK,CAAC;EAE1D,MAAMK,QAAQ,GAAGJ,WAAW,CAAE,CAAE;IAAEK;EAAY,CAAC,KAAM;IACpD,MAAM;MAAEC,KAAK;MAAEC;IAAO,CAAC,GAAGF,WAAW,CAACG,MAAM;IAC5CL,eAAe,CAAIM,SAAS,IAAM;MACjC,IACC,CAAEA,SAAS,IACXA,SAAS,CAACH,KAAK,KAAKA,KAAK,IACzBG,SAAS,CAACF,MAAM,KAAKA,MAAM,EAC1B;QACD,OAAO;UACND,KAAK,EAAEI,IAAI,CAACC,KAAK,CAAEL,KAAM,CAAC;UAC1BC,MAAM,EAAEG,IAAI,CAACC,KAAK,CAAEJ,MAAO;QAC5B,CAAC;MACF;MACA,OAAOE,SAAS;IACjB,CAAE,CAAC;EACJ,CAAC,EAAE,EAAG,CAAC;EAEP,MAAMG,QAAQ,GACbC,aAAA,CAAChB,IAAI;IACJiB,MAAM,EAAC,iBAAiB;IACxBC,KAAK,EAAGjB,UAAU,CAACkB,YAAc;IACjCZ,QAAQ,EAAGA;EAAU,CACrB,CACD;EAED,OAAO,CAAEQ,QAAQ,EAAEV,YAAY,CAAE;AAClC,CAAC;AAED,eAAeD,iBAAiB","ignoreList":[]}
|