@wordpress/compose 5.17.0 → 5.19.0

package/build-module/hooks/use-disabled/index.js

@@ -1,29 +1,15 @@
-/**
- * WordPress dependencies
- */
-import { focus } from '@wordpress/dom';
 /**
  * Internal dependencies
  */
-
 import { debounce } from '../../utils/debounce';
 import useRefEffect from '../use-ref-effect';
-/**
- * Names of control nodes which qualify for disabled behavior.
- *
- * See WHATWG HTML Standard: 4.10.18.5: "Enabling and disabling form controls: the disabled attribute".
- *
- * @see https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#enabling-and-disabling-form-controls:-the-disabled-attribute
- *
- * @type {string[]}
- */
-
-const DISABLED_ELIGIBLE_NODE_NAMES = ['BUTTON', 'FIELDSET', 'INPUT', 'OPTGROUP', 'OPTION', 'SELECT', 'TEXTAREA'];
 /**
  * In some circumstances, such as block previews, all focusable DOM elements
  * (input fields, links, buttons, etc.) need to be disabled. This hook adds the
  * behavior to disable nested DOM elements to the returned ref.
  *
+ * If you can, prefer the use of the inert HTML attribute.
+ *
  * @param {Object}   config            Configuration object.
  * @param {boolean=} config.isDisabled Whether the element should be disabled.
  * @return {import('react').RefCallback<HTMLElement>} Element Ref.
@@ -31,6 +17,7 @@ const DISABLED_ELIGIBLE_NODE_NAMES = ['BUTTON', 'FIELDSET', 'INPUT', 'OPTGROUP',
  * @example
  * ```js
  * import { useDisabled } from '@wordpress/compose';
+ *
  * const DisabledExample = () => {
  * 	const disabledRef = useDisabled();
  *	return (
@@ -53,91 +40,19 @@ export default function useDisabled() {
     }
     /** A variable keeping track of the previous updates in order to restore them. */
 
-    /** @type {Function[]} */
-
 
     const updates = [];
 
     const disable = () => {
-      if (node.style.getPropertyValue('user-select') !== 'none') {
-        const previousValue = node.style.getPropertyValue('user-select');
-        node.style.setProperty('user-select', 'none');
-        node.style.setProperty('-webkit-user-select', 'none');
-        updates.push(() => {
-          if (!node.isConnected) {
-            return;
-          }
-
-          node.style.setProperty('user-select', previousValue);
-          node.style.setProperty('-webkit-user-select', previousValue);
-        });
-      }
-
-      focus.focusable.find(node).forEach(focusable => {
-        var _node$ownerDocument$d;
-
-        if (DISABLED_ELIGIBLE_NODE_NAMES.includes(focusable.nodeName) && // @ts-ignore
-        !focusable.disabled) {
-          focusable.setAttribute('disabled', '');
-          updates.push(() => {
-            if (!focusable.isConnected) {
-              return;
-            } // @ts-ignore
-
-
-            focusable.disabled = false;
-          });
-        }
-
-        if (focusable.nodeName === 'A' && focusable.getAttribute('tabindex') !== '-1') {
-          const previousValue = focusable.getAttribute('tabindex');
-          focusable.setAttribute('tabindex', '-1');
-          updates.push(() => {
-            if (!focusable.isConnected) {
-              return;
-            }
-
-            if (!previousValue) {
-              focusable.removeAttribute('tabindex');
-            } else {
-              focusable.setAttribute('tabindex', previousValue);
-            }
-          });
-        }
-
-        const tabIndex = focusable.getAttribute('tabindex');
-
-        if (tabIndex !== null && tabIndex !== '-1') {
-          focusable.removeAttribute('tabindex');
-          updates.push(() => {
-            if (!focusable.isConnected) {
-              return;
-            }
-
-            focusable.setAttribute('tabindex', tabIndex);
-          });
+      node.childNodes.forEach(child => {
+        if (!(child instanceof HTMLElement)) {
+          return;
         }
 
-        if (focusable.hasAttribute('contenteditable') && focusable.getAttribute('contenteditable') !== 'false') {
-          focusable.setAttribute('contenteditable', 'false');
+        if (!child.getAttribute('inert')) {
+          child.setAttribute('inert', 'true');
           updates.push(() => {
-            if (!focusable.isConnected) {
-              return;
-            }
-
-            focusable.setAttribute('contenteditable', 'true');
-          });
-        }
-
-        if ((_node$ownerDocument$d = node.ownerDocument.defaultView) !== null && _node$ownerDocument$d !== void 0 && _node$ownerDocument$d.HTMLElement && focusable instanceof node.ownerDocument.defaultView.HTMLElement) {
-          const previousValue = focusable.style.getPropertyValue('pointer-events');
-          focusable.style.setProperty('pointer-events', 'none');
-          updates.push(() => {
-            if (!focusable.isConnected) {
-              return;
-            }
-
-            focusable.style.setProperty('pointer-events', previousValue);
+            child.removeAttribute('inert');
           });
         }
       });
@@ -153,9 +68,7 @@ export default function useDisabled() {
 
     const observer = new window.MutationObserver(debouncedDisable);
     observer.observe(node, {
-      childList: true,
-      attributes: true,
-      subtree: true
+      childList: true
     });
     return () => {
       if (observer) {

package/build-module/hooks/use-disabled/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/compose/src/hooks/use-disabled/index.js"],"names":["focus","debounce","useRefEffect","DISABLED_ELIGIBLE_NODE_NAMES","useDisabled","isDisabled","isDisabledProp","node","updates","disable","style","getPropertyValue","previousValue","setProperty","push","isConnected","focusable","find","forEach","includes","nodeName","disabled","setAttribute","getAttribute","removeAttribute","tabIndex","hasAttribute","ownerDocument","defaultView","HTMLElement","debouncedDisable","leading","observer","window","MutationObserver","observe","childList","attributes","subtree","disconnect","cancel","update"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { focus } from '@wordpress/dom';\n\n/**\n * Internal dependencies\n */\nimport { debounce } from '../../utils/debounce';\nimport useRefEffect from '../use-ref-effect';\n\n/**\n * Names of control nodes which qualify for disabled behavior.\n *\n * See WHATWG HTML Standard: 4.10.18.5: \"Enabling and disabling form controls: the disabled attribute\".\n *\n * @see https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#enabling-and-disabling-form-controls:-the-disabled-attribute\n *\n * @type {string[]}\n */\nconst DISABLED_ELIGIBLE_NODE_NAMES = [\n\t'BUTTON',\n\t'FIELDSET',\n\t'INPUT',\n\t'OPTGROUP',\n\t'OPTION',\n\t'SELECT',\n\t'TEXTAREA',\n];\n\n/**\n * In some circumstances, such as block previews, all focusable DOM elements\n * (input fields, links, buttons, etc.) need to be disabled. This hook adds the\n * behavior to disable nested DOM elements to the returned ref.\n *\n * @param {Object}   config            Configuration object.\n * @param {boolean=} config.isDisabled Whether the element should be disabled.\n * @return {import('react').RefCallback<HTMLElement>} Element Ref.\n *\n * @example\n * ```js\n * import { useDisabled } from '@wordpress/compose';\n * const DisabledExample = () => {\n * \tconst disabledRef = useDisabled();\n *\treturn (\n *\t\t<div ref={ disabledRef }>\n *\t\t\t<a href=\"#\">This link will have tabindex set to -1</a>\n *\t\t\t<input placeholder=\"This input will have the disabled attribute added to it.\" type=\"text\" />\n *\t\t</div>\n *\t);\n * };\n * ```\n */\nexport default function useDisabled( {\n\tisDisabled: isDisabledProp = false,\n} = {} ) {\n\treturn useRefEffect(\n\t\t( node ) => {\n\t\t\tif ( isDisabledProp ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t/** A variable keeping track of the previous updates in order to restore them. */\n\t\t\t/** @type {Function[]} */\n\t\t\tconst updates = [];\n\n\t\t\tconst disable = () => {\n\t\t\t\tif ( node.style.getPropertyValue( 'user-select' ) !== 'none' ) {\n\t\t\t\t\tconst previousValue =\n\t\t\t\t\t\tnode.style.getPropertyValue( 'user-select' );\n\t\t\t\t\tnode.style.setProperty( 'user-select', 'none' );\n\t\t\t\t\tnode.style.setProperty( '-webkit-user-select', 'none' );\n\t\t\t\t\tupdates.push( () => {\n\t\t\t\t\t\tif ( ! node.isConnected ) {\n\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t}\n\t\t\t\t\t\tnode.style.setProperty( 'user-select', previousValue );\n\t\t\t\t\t\tnode.style.setProperty(\n\t\t\t\t\t\t\t'-webkit-user-select',\n\t\t\t\t\t\t\tpreviousValue\n\t\t\t\t\t\t);\n\t\t\t\t\t} );\n\t\t\t\t}\n\n\t\t\t\tfocus.focusable.find( node ).forEach( ( focusable ) => {\n\t\t\t\t\tif (\n\t\t\t\t\t\tDISABLED_ELIGIBLE_NODE_NAMES.includes(\n\t\t\t\t\t\t\tfocusable.nodeName\n\t\t\t\t\t\t) &&\n\t\t\t\t\t\t// @ts-ignore\n\t\t\t\t\t\t! focusable.disabled\n\t\t\t\t\t) {\n\t\t\t\t\t\tfocusable.setAttribute( 'disabled', '' );\n\t\t\t\t\t\tupdates.push( () => {\n\t\t\t\t\t\t\tif ( ! focusable.isConnected ) {\n\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t// @ts-ignore\n\t\t\t\t\t\t\tfocusable.disabled = false;\n\t\t\t\t\t\t} );\n\t\t\t\t\t}\n\n\t\t\t\t\tif (\n\t\t\t\t\t\tfocusable.nodeName === 'A' &&\n\t\t\t\t\t\tfocusable.getAttribute( 'tabindex' ) !== '-1'\n\t\t\t\t\t) {\n\t\t\t\t\t\tconst previousValue =\n\t\t\t\t\t\t\tfocusable.getAttribute( 'tabindex' );\n\t\t\t\t\t\tfocusable.setAttribute( 'tabindex', '-1' );\n\t\t\t\t\t\tupdates.push( () => {\n\t\t\t\t\t\t\tif ( ! focusable.isConnected ) {\n\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tif ( ! previousValue ) {\n\t\t\t\t\t\t\t\tfocusable.removeAttribute( 'tabindex' );\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tfocusable.setAttribute(\n\t\t\t\t\t\t\t\t\t'tabindex',\n\t\t\t\t\t\t\t\t\tpreviousValue\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\n\t\t\t\t\tconst tabIndex = focusable.getAttribute( 'tabindex' );\n\t\t\t\t\tif ( tabIndex !== null && tabIndex !== '-1' ) {\n\t\t\t\t\t\tfocusable.removeAttribute( 'tabindex' );\n\t\t\t\t\t\tupdates.push( () => {\n\t\t\t\t\t\t\tif ( ! focusable.isConnected ) {\n\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tfocusable.setAttribute( 'tabindex', tabIndex );\n\t\t\t\t\t\t} );\n\t\t\t\t\t}\n\n\t\t\t\t\tif (\n\t\t\t\t\t\tfocusable.hasAttribute( 'contenteditable' ) &&\n\t\t\t\t\t\tfocusable.getAttribute( 'contenteditable' ) !== 'false'\n\t\t\t\t\t) {\n\t\t\t\t\t\tfocusable.setAttribute( 'contenteditable', 'false' );\n\t\t\t\t\t\tupdates.push( () => {\n\t\t\t\t\t\t\tif ( ! focusable.isConnected ) {\n\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tfocusable.setAttribute( 'contenteditable', 'true' );\n\t\t\t\t\t\t} );\n\t\t\t\t\t}\n\n\t\t\t\t\tif (\n\t\t\t\t\t\tnode.ownerDocument.defaultView?.HTMLElement &&\n\t\t\t\t\t\tfocusable instanceof\n\t\t\t\t\t\t\tnode.ownerDocument.defaultView.HTMLElement\n\t\t\t\t\t) {\n\t\t\t\t\t\tconst previousValue =\n\t\t\t\t\t\t\tfocusable.style.getPropertyValue(\n\t\t\t\t\t\t\t\t'pointer-events'\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\tfocusable.style.setProperty( 'pointer-events', 'none' );\n\t\t\t\t\t\tupdates.push( () => {\n\t\t\t\t\t\t\tif ( ! focusable.isConnected ) {\n\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tfocusable.style.setProperty(\n\t\t\t\t\t\t\t\t'pointer-events',\n\t\t\t\t\t\t\t\tpreviousValue\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\t\t\t};\n\n\t\t\t// Debounce re-disable since disabling process itself will incur\n\t\t\t// additional mutations which should be ignored.\n\t\t\tconst debouncedDisable = debounce( disable, 0, {\n\t\t\t\tleading: true,\n\t\t\t} );\n\t\t\tdisable();\n\n\t\t\t/** @type {MutationObserver | undefined} */\n\t\t\tconst observer = new window.MutationObserver( debouncedDisable );\n\t\t\tobserver.observe( node, {\n\t\t\t\tchildList: true,\n\t\t\t\tattributes: true,\n\t\t\t\tsubtree: true,\n\t\t\t} );\n\n\t\t\treturn () => {\n\t\t\t\tif ( observer ) {\n\t\t\t\t\tobserver.disconnect();\n\t\t\t\t}\n\t\t\t\tdebouncedDisable.cancel();\n\t\t\t\tupdates.forEach( ( update ) => update() );\n\t\t\t};\n\t\t},\n\t\t[ isDisabledProp ]\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/compose/src/hooks/use-disabled/index.ts"],"names":["debounce","useRefEffect","useDisabled","isDisabled","isDisabledProp","node","updates","disable","childNodes","forEach","child","HTMLElement","getAttribute","setAttribute","push","removeAttribute","debouncedDisable","leading","observer","window","MutationObserver","observe","childList","disconnect","cancel","update"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,QAAT,QAAyB,sBAAzB;AACA,OAAOC,YAAP,MAAyB,mBAAzB;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,eAAe,SAASC,WAAT,GAEN;AAAA,MAF4B;AACpCC,IAAAA,UAAU,EAAEC,cAAc,GAAG;AADO,GAE5B,uEAAL,EAAK;AACR,SAAOH,YAAY,CAChBI,IAAF,IAAY;AACX,QAAKD,cAAL,EAAsB;AACrB;AACA;AAED;;;AACA,UAAME,OAAmB,GAAG,EAA5B;;AACA,UAAMC,OAAO,GAAG,MAAM;AACrBF,MAAAA,IAAI,CAACG,UAAL,CAAgBC,OAAhB,CAA2BC,KAAF,IAAa;AACrC,YAAK,EAAIA,KAAK,YAAYC,WAArB,CAAL,EAA0C;AACzC;AACA;;AACD,YAAK,CAAED,KAAK,CAACE,YAAN,CAAoB,OAApB,CAAP,EAAuC;AACtCF,UAAAA,KAAK,CAACG,YAAN,CAAoB,OAApB,EAA6B,MAA7B;AACAP,UAAAA,OAAO,CAACQ,IAAR,CAAc,MAAM;AACnBJ,YAAAA,KAAK,CAACK,eAAN,CAAuB,OAAvB;AACA,WAFD;AAGA;AACD,OAVD;AAWA,KAZD,CAPW,CAqBX;AACA;;;AACA,UAAMC,gBAAgB,GAAGhB,QAAQ,CAAEO,OAAF,EAAW,CAAX,EAAc;AAC9CU,MAAAA,OAAO,EAAE;AADqC,KAAd,CAAjC;AAGAV,IAAAA,OAAO;AAEP;;AACA,UAAMW,QAAQ,GAAG,IAAIC,MAAM,CAACC,gBAAX,CAA6BJ,gBAA7B,CAAjB;AACAE,IAAAA,QAAQ,CAACG,OAAT,CAAkBhB,IAAlB,EAAwB;AACvBiB,MAAAA,SAAS,EAAE;AADY,KAAxB;AAIA,WAAO,MAAM;AACZ,UAAKJ,QAAL,EAAgB;AACfA,QAAAA,QAAQ,CAACK,UAAT;AACA;;AACDP,MAAAA,gBAAgB,CAACQ,MAAjB;AACAlB,MAAAA,OAAO,CAACG,OAAR,CAAmBgB,MAAF,IAAcA,MAAM,EAArC;AACA,KAND;AAOA,GA1CiB,EA2ClB,CAAErB,cAAF,CA3CkB,CAAnB;AA6CA","sourcesContent":["/**\n * Internal dependencies\n */\nimport { debounce } from '../../utils/debounce';\nimport useRefEffect from '../use-ref-effect';\n\n/**\n * In some circumstances, such as block previews, all focusable DOM elements\n * (input fields, links, buttons, etc.) need to be disabled. This hook adds the\n * behavior to disable nested DOM elements to the returned ref.\n *\n * If you can, prefer the use of the inert HTML attribute.\n *\n * @param {Object}   config            Configuration object.\n * @param {boolean=} config.isDisabled Whether the element should be disabled.\n * @return {import('react').RefCallback<HTMLElement>} Element Ref.\n *\n * @example\n * ```js\n * import { useDisabled } from '@wordpress/compose';\n *\n * const DisabledExample = () => {\n * \tconst disabledRef = useDisabled();\n *\treturn (\n *\t\t<div ref={ disabledRef }>\n *\t\t\t<a href=\"#\">This link will have tabindex set to -1</a>\n *\t\t\t<input placeholder=\"This input will have the disabled attribute added to it.\" type=\"text\" />\n *\t\t</div>\n *\t);\n * };\n * ```\n */\nexport default function useDisabled( {\n\tisDisabled: isDisabledProp = false,\n} = {} ) {\n\treturn useRefEffect(\n\t\t( node ) => {\n\t\t\tif ( isDisabledProp ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t/** A variable keeping track of the previous updates in order to restore them. */\n\t\t\tconst updates: Function[] = [];\n\t\t\tconst disable = () => {\n\t\t\t\tnode.childNodes.forEach( ( child ) => {\n\t\t\t\t\tif ( ! ( child instanceof HTMLElement ) ) {\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t\tif ( ! child.getAttribute( 'inert' ) ) {\n\t\t\t\t\t\tchild.setAttribute( 'inert', 'true' );\n\t\t\t\t\t\tupdates.push( () => {\n\t\t\t\t\t\t\tchild.removeAttribute( 'inert' );\n\t\t\t\t\t\t} );\n\t\t\t\t\t}\n\t\t\t\t} );\n\t\t\t};\n\n\t\t\t// Debounce re-disable since disabling process itself will incur\n\t\t\t// additional mutations which should be ignored.\n\t\t\tconst debouncedDisable = debounce( disable, 0, {\n\t\t\t\tleading: true,\n\t\t\t} );\n\t\t\tdisable();\n\n\t\t\t/** @type {MutationObserver | undefined} */\n\t\t\tconst observer = new window.MutationObserver( debouncedDisable );\n\t\t\tobserver.observe( node, {\n\t\t\t\tchildList: true,\n\t\t\t} );\n\n\t\t\treturn () => {\n\t\t\t\tif ( observer ) {\n\t\t\t\t\tobserver.disconnect();\n\t\t\t\t}\n\t\t\t\tdebouncedDisable.cancel();\n\t\t\t\tupdates.forEach( ( update ) => update() );\n\t\t\t};\n\t\t},\n\t\t[ isDisabledProp ]\n\t);\n}\n"]}

package/build-module/hooks/use-focus-outside/index.js

@@ -1,3 +1,7 @@
+/**
+ * External dependencies
+ */
+
 /**
  * WordPress dependencies
  */
@@ -5,17 +9,14 @@ import { useCallback, useEffect, useRef } from '@wordpress/element';
 /**
  * Input types which are classified as button types, for use in considering
  * whether element is a (focus-normalized) button.
- *
- * @type {string[]}
  */
 
 const INPUT_BUTTON_TYPES = ['button', 'submit'];
 /**
- * @typedef {HTMLButtonElement | HTMLLinkElement | HTMLInputElement} FocusNormalizedButton
+ * List of HTML button elements subject to focus normalization
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus
  */
-// Disable reason: Rule doesn't support predicate return types.
-
-/* eslint-disable jsdoc/valid-types */
 
 /**
  * Returns true if the given element is a button element subject to focus
@@ -23,11 +24,10 @@ const INPUT_BUTTON_TYPES = ['button', 'submit'];
  *
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus
  *
- * @param {EventTarget} eventTarget The target from a mouse or touch event.
+ * @param  eventTarget The target from a mouse or touch event.
  *
- * @return {eventTarget is FocusNormalizedButton} Whether element is a button.
+ * @return Whether the element is a button element subject to focus normalization.
  */
-
 function isFocusNormalizedButton(eventTarget) {
   if (!(eventTarget instanceof window.HTMLElement)) {
     return false;
@@ -39,66 +39,28 @@ function isFocusNormalizedButton(eventTarget) {
       return true;
 
     case 'INPUT':
-      return INPUT_BUTTON_TYPES.includes(
-      /** @type {HTMLInputElement} */
-      eventTarget.type);
+      return INPUT_BUTTON_TYPES.includes(eventTarget.type);
   }
 
   return false;
 }
-/* eslint-enable jsdoc/valid-types */
-
-/**
- * @typedef {import('react').SyntheticEvent} SyntheticEvent
- */
-
-/**
- * @callback EventCallback
- * @param {SyntheticEvent} event input related event.
- */
-
-/**
- * @typedef FocusOutsideReactElement
- * @property {EventCallback} handleFocusOutside callback for a focus outside event.
- */
-
-/**
- * @typedef {import('react').MutableRefObject<FocusOutsideReactElement | undefined>} FocusOutsideRef
- */
-
-/**
- * @typedef {Object} FocusOutsideReturnValue
- * @property {EventCallback} onFocus      An event handler for focus events.
- * @property {EventCallback} onBlur       An event handler for blur events.
- * @property {EventCallback} onMouseDown  An event handler for mouse down events.
- * @property {EventCallback} onMouseUp    An event handler for mouse up events.
- * @property {EventCallback} onTouchStart An event handler for touch start events.
- * @property {EventCallback} onTouchEnd   An event handler for touch end events.
- */
 
 /**
  * A react hook that can be used to check whether focus has moved outside the
  * element the event handlers are bound to.
  *
- * @param {EventCallback} onFocusOutside A callback triggered when focus moves outside
- *                                       the element the event handlers are bound to.
+ * @param  onFocusOutside A callback triggered when focus moves outside
+ *                        the element the event handlers are bound to.
  *
- * @return {FocusOutsideReturnValue} An object containing event handlers. Bind the event handlers
- *                                   to a wrapping element element to capture when focus moves
- *                                   outside that element.
+ * @return An object containing event handlers. Bind the event handlers to a
+ * wrapping element element to capture when focus moves outside that element.
  */
-
-
 export default function useFocusOutside(onFocusOutside) {
   const currentOnFocusOutside = useRef(onFocusOutside);
   useEffect(() => {
     currentOnFocusOutside.current = onFocusOutside;
   }, [onFocusOutside]);
   const preventBlurCheck = useRef(false);
-  /**
-   * @type {import('react').MutableRefObject<number | undefined>}
-   */
-
   const blurCheckTimeoutId = useRef();
   /**
    * Cancel a blur check timeout.
@@ -124,9 +86,8 @@ export default function useFocusOutside(onFocusOutside) {
    * button elements when clicked, while others do. The logic here
    * intends to normalize this as treating click on buttons as focus.
    *
+   * @param  event
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus
-   *
-   * @param {SyntheticEvent} event Event for mousedown or mouseup.
    */
 
   const normalizeButtonFocus = useCallback(event => {
@@ -148,8 +109,6 @@ export default function useFocusOutside(onFocusOutside) {
    *
    * Calls the `onFocusOutside` callback in an immediate timeout if focus has
    * move outside the bound element and is still within the document.
-   *
-   * @param {SyntheticEvent} event Blur event.
    */
 
   const queueBlurCheck = useCallback(event => {

package/build-module/hooks/use-focus-outside/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/compose/src/hooks/use-focus-outside/index.js"],"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","setTimeout","document","hasFocus","preventDefault","onFocus","onMouseDown","onMouseUp","onTouchStart","onTouchEnd","onBlur"],"mappings":"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","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\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/** @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\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"]}
+{"version":3,"sources":["@wordpress/compose/src/hooks/use-focus-outside/index.ts"],"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","setTimeout","document","hasFocus","preventDefault","onFocus","onMouseDown","onMouseUp","onTouchStart","onTouchEnd","onBlur"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport type {\n\tFocusEventHandler,\n\tEventHandler,\n\tMouseEventHandler,\n\tTouchEventHandler,\n\tFocusEvent,\n\tMouseEvent,\n\tTouchEvent,\n} from 'react';\n\n/**\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: FocusEventHandler;\n\tonMouseDown: MouseEventHandler;\n\tonMouseUp: MouseEventHandler;\n\tonTouchStart: TouchEventHandler;\n\tonTouchEnd: TouchEventHandler;\n\tonBlur: 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: FocusEvent ) => void\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: EventHandler< MouseEvent | TouchEvent > =\n\t\tuseCallback( ( event ) => {\n\t\t\tconst { type, target } = event;\n\t\t\tconst isInteractionEnd = [ 'mouseup', 'touchend' ].includes( type );\n\n\t\t\tif ( isInteractionEnd ) {\n\t\t\t\tpreventBlurCheck.current = false;\n\t\t\t} else if ( isFocusNormalizedButton( target ) ) {\n\t\t\t\tpreventBlurCheck.current = true;\n\t\t\t}\n\t\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: 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\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"]}

package/build-module/hooks/use-focusable-iframe/index.js

@@ -1,3 +1,7 @@
+/**
+ * External dependencies
+ */
+
 /**
  * Internal dependencies
  */
@@ -6,7 +10,7 @@ import useRefEffect from '../use-ref-effect';
  * Dispatches a bubbling focus event when the iframe receives focus. Use
  * `onFocus` as usual on the iframe or a parent element.
  *
- * @return {Object} Ref to pass to the iframe.
+ * @return Ref to pass to the iframe.
  */
 
 export default function useFocusableIframe() {
@@ -26,7 +30,6 @@ export default function useFocusableIframe() {
 
     function checkFocus() {
       if (ownerDocument && ownerDocument.activeElement === element) {
-        /** @type {HTMLElement} */
         element.focus();
       }
     }

package/build-module/hooks/use-focusable-iframe/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/compose/src/hooks/use-focusable-iframe/index.js"],"names":["useRefEffect","useFocusableIframe","element","ownerDocument","defaultView","checkFocus","activeElement","focus","addEventListener","removeEventListener"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,YAAP,MAAyB,mBAAzB;AAEA;AACA;AACA;AACA;AACA;AACA;;AACA,eAAe,SAASC,kBAAT,GAA8B;AAC5C,SAAOD,YAAY,CAAIE,OAAF,IAAe;AACnC,UAAM;AAAEC,MAAAA;AAAF,QAAoBD,OAA1B;AACA,QAAK,CAAEC,aAAP,EAAuB;AACvB,UAAM;AAAEC,MAAAA;AAAF,QAAkBD,aAAxB;AACA,QAAK,CAAEC,WAAP,EAAqB;AAErB;AACF;AACA;AACA;;AACE,aAASC,UAAT,GAAsB;AACrB,UAAKF,aAAa,IAAIA,aAAa,CAACG,aAAd,KAAgCJ,OAAtD,EAAgE;AAC/D;AAA6BA,QAAAA,OAAF,CAAYK,KAAZ;AAC3B;AACD;;AAEDH,IAAAA,WAAW,CAACI,gBAAZ,CAA8B,MAA9B,EAAsCH,UAAtC;AACA,WAAO,MAAM;AACZD,MAAAA,WAAW,CAACK,mBAAZ,CAAiC,MAAjC,EAAyCJ,UAAzC;AACA,KAFD;AAGA,GApBkB,EAoBhB,EApBgB,CAAnB;AAqBA","sourcesContent":["/**\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 {Object} Ref to pass to the iframe.\n */\nexport default function useFocusableIframe() {\n\treturn useRefEffect( ( element ) => {\n\t\tconst { ownerDocument } = element;\n\t\tif ( ! ownerDocument ) return;\n\t\tconst { defaultView } = ownerDocument;\n\t\tif ( ! defaultView ) return;\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/** @type {HTMLElement} */ ( element ).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"]}
+{"version":3,"sources":["@wordpress/compose/src/hooks/use-focusable-iframe/index.ts"],"names":["useRefEffect","useFocusableIframe","element","ownerDocument","defaultView","checkFocus","activeElement","focus","addEventListener","removeEventListener"],"mappings":"AAAA;AACA;AACA;;AAGA;AACA;AACA;AACA,OAAOA,YAAP,MAAyB,mBAAzB;AAEA;AACA;AACA;AACA;AACA;AACA;;AACA,eAAe,SAASC,kBAAT,GAAgE;AAC9E,SAAOD,YAAY,CAAIE,OAAF,IAAe;AACnC,UAAM;AAAEC,MAAAA;AAAF,QAAoBD,OAA1B;AACA,QAAK,CAAEC,aAAP,EAAuB;AACvB,UAAM;AAAEC,MAAAA;AAAF,QAAkBD,aAAxB;AACA,QAAK,CAAEC,WAAP,EAAqB;AAErB;AACF;AACA;AACA;;AACE,aAASC,UAAT,GAAsB;AACrB,UAAKF,aAAa,IAAIA,aAAa,CAACG,aAAd,KAAgCJ,OAAtD,EAAgE;AAC7DA,QAAAA,OAAF,CAA2BK,KAA3B;AACA;AACD;;AAEDH,IAAAA,WAAW,CAACI,gBAAZ,CAA8B,MAA9B,EAAsCH,UAAtC;AACA,WAAO,MAAM;AACZD,MAAAA,WAAW,CAACK,mBAAZ,CAAiC,MAAjC,EAAyCJ,UAAzC;AACA,KAFD;AAGA,GApBkB,EAoBhB,EApBgB,CAAnB;AAqBA","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 ) return;\n\t\tconst { defaultView } = ownerDocument;\n\t\tif ( ! defaultView ) return;\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"]}

package/build-module/hooks/use-resize-observer/index.native.js

@@ -51,6 +51,7 @@ const useResizeObserver = () => {
     });
   }, []);
   const observer = createElement(View, {
+    testID: "resize-observer",
     style: StyleSheet.absoluteFill,
     onLayout: onLayout
   });

package/build-module/hooks/use-resize-observer/index.native.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/compose/src/hooks/use-resize-observer/index.native.js"],"names":["View","StyleSheet","useState","useCallback","useResizeObserver","measurements","setMeasurements","onLayout","nativeEvent","width","height","layout","prevState","Math","floor","observer","absoluteFill"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,IAAT,EAAeC,UAAf,QAAiC,cAAjC;AACA;AACA;AACA;;AACA,SAASC,QAAT,EAAmBC,WAAnB,QAAsC,oBAAtC;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,MAAMC,iBAAiB,GAAG,MAAM;AAC/B,QAAM,CAAEC,YAAF,EAAgBC,eAAhB,IAAoCJ,QAAQ,CAAE,IAAF,CAAlD;AAEA,QAAMK,QAAQ,GAAGJ,WAAW,CAAE,QAAuB;AAAA,QAArB;AAAEK,MAAAA;AAAF,KAAqB;AACpD,UAAM;AAAEC,MAAAA,KAAF;AAASC,MAAAA;AAAT,QAAoBF,WAAW,CAACG,MAAtC;AACAL,IAAAA,eAAe,CAAIM,SAAF,IAAiB;AACjC,UACC,CAAEA,SAAF,IACAA,SAAS,CAACH,KAAV,KAAoBA,KADpB,IAEAG,SAAS,CAACF,MAAV,KAAqBA,MAHtB,EAIE;AACD,eAAO;AACND,UAAAA,KAAK,EAAEI,IAAI,CAACC,KAAL,CAAYL,KAAZ,CADD;AAENC,UAAAA,MAAM,EAAEG,IAAI,CAACC,KAAL,CAAYJ,MAAZ;AAFF,SAAP;AAIA;;AACD,aAAOE,SAAP;AACA,KAZc,CAAf;AAaA,GAf2B,EAezB,EAfyB,CAA5B;AAiBA,QAAMG,QAAQ,GACb,cAAC,IAAD;AAAM,IAAA,KAAK,EAAGd,UAAU,CAACe,YAAzB;AAAwC,IAAA,QAAQ,EAAGT;AAAnD,IADD;AAIA,SAAO,CAAEQ,QAAF,EAAYV,YAAZ,CAAP;AACA,CAzBD;;AA2BA,eAAeD,iBAAf","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 *\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 style={ StyleSheet.absoluteFill } onLayout={ onLayout } />\n\t);\n\n\treturn [ observer, measurements ];\n};\n\nexport default useResizeObserver;\n"]}
+{"version":3,"sources":["@wordpress/compose/src/hooks/use-resize-observer/index.native.js"],"names":["View","StyleSheet","useState","useCallback","useResizeObserver","measurements","setMeasurements","onLayout","nativeEvent","width","height","layout","prevState","Math","floor","observer","absoluteFill"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,IAAT,EAAeC,UAAf,QAAiC,cAAjC;AACA;AACA;AACA;;AACA,SAASC,QAAT,EAAmBC,WAAnB,QAAsC,oBAAtC;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,MAAMC,iBAAiB,GAAG,MAAM;AAC/B,QAAM,CAAEC,YAAF,EAAgBC,eAAhB,IAAoCJ,QAAQ,CAAE,IAAF,CAAlD;AAEA,QAAMK,QAAQ,GAAGJ,WAAW,CAAE,QAAuB;AAAA,QAArB;AAAEK,MAAAA;AAAF,KAAqB;AACpD,UAAM;AAAEC,MAAAA,KAAF;AAASC,MAAAA;AAAT,QAAoBF,WAAW,CAACG,MAAtC;AACAL,IAAAA,eAAe,CAAIM,SAAF,IAAiB;AACjC,UACC,CAAEA,SAAF,IACAA,SAAS,CAACH,KAAV,KAAoBA,KADpB,IAEAG,SAAS,CAACF,MAAV,KAAqBA,MAHtB,EAIE;AACD,eAAO;AACND,UAAAA,KAAK,EAAEI,IAAI,CAACC,KAAL,CAAYL,KAAZ,CADD;AAENC,UAAAA,MAAM,EAAEG,IAAI,CAACC,KAAL,CAAYJ,MAAZ;AAFF,SAAP;AAIA;;AACD,aAAOE,SAAP;AACA,KAZc,CAAf;AAaA,GAf2B,EAezB,EAfyB,CAA5B;AAiBA,QAAMG,QAAQ,GACb,cAAC,IAAD;AACC,IAAA,MAAM,EAAC,iBADR;AAEC,IAAA,KAAK,EAAGd,UAAU,CAACe,YAFpB;AAGC,IAAA,QAAQ,EAAGT;AAHZ,IADD;AAQA,SAAO,CAAEQ,QAAF,EAAYV,YAAZ,CAAP;AACA,CA7BD;;AA+BA,eAAeD,iBAAf","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 *\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"]}

package/build-types/hooks/use-dialog/index.d.ts

@@ -3,7 +3,7 @@
  */
 import type { RefCallback, SyntheticEvent } from 'react';
 import useFocusOnMount from '../use-focus-on-mount';
-import type { FocusOutsideReturnValue } from '../use-focus-outside';
+import useFocusOutside from '../use-focus-outside';
 declare type DialogOptions = {
     focusOnMount?: Parameters<typeof useFocusOnMount>[0];
     onClose?: () => void;
@@ -16,7 +16,7 @@ declare type DialogOptions = {
 };
 declare type useDialogReturn = [
     RefCallback<HTMLElement>,
-    FocusOutsideReturnValue & Pick<HTMLElement, 'tabIndex'>
+    ReturnType<typeof useFocusOutside> & Pick<HTMLElement, 'tabIndex'>
 ];
 /**
  * Returns a ref and props to apply to a dialog wrapper to enable the following behaviors:

package/build-types/hooks/use-dialog/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-dialog/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAiB,WAAW,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAYxE,OAAO,eAAe,MAAM,uBAAuB,CAAC;AAIpD,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,sBAAsB,CAAC;AAEpE,aAAK,aAAa,GAAG;IACpB,YAAY,CAAC,EAAE,UAAU,CAAE,OAAO,eAAe,CAAE,CAAE,CAAC,CAAE,CAAC;IACzD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,CACnB,IAAI,EAAE,MAAM,GAAG,SAAS,EACxB,KAAK,EAAE,cAAc,KACjB,IAAI,CAAC;CACV,CAAC;AAEF,aAAK,eAAe,GAAG;IACtB,WAAW,CAAE,WAAW,CAAE;IAC1B,uBAAuB,GAAG,IAAI,CAAE,WAAW,EAAE,UAAU,CAAE;CACzD,CAAC;AAEF;;;;;;;;GAQG;AACH,iBAAS,SAAS,CAAE,OAAO,EAAE,aAAa,GAAI,eAAe,CA+C5D;AAED,eAAe,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-dialog/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAYzD,OAAO,eAAe,MAAM,uBAAuB,CAAC;AAEpD,OAAO,eAAe,MAAM,sBAAsB,CAAC;AAGnD,aAAK,aAAa,GAAG;IACpB,YAAY,CAAC,EAAE,UAAU,CAAE,OAAO,eAAe,CAAE,CAAE,CAAC,CAAE,CAAC;IACzD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,CACnB,IAAI,EAAE,MAAM,GAAG,SAAS,EACxB,KAAK,EAAE,cAAc,KACjB,IAAI,CAAC;CACV,CAAC;AAEF,aAAK,eAAe,GAAG;IACtB,WAAW,CAAE,WAAW,CAAE;IAC1B,UAAU,CAAE,OAAO,eAAe,CAAE,GAAG,IAAI,CAAE,WAAW,EAAE,UAAU,CAAE;CACtE,CAAC;AAEF;;;;;;;;GAQG;AACH,iBAAS,SAAS,CAAE,OAAO,EAAE,aAAa,GAAI,eAAe,CA+C5D;AAED,eAAe,SAAS,CAAC"}

package/build-types/hooks/use-disabled/index.d.ts

@@ -3,6 +3,8 @@
  * (input fields, links, buttons, etc.) need to be disabled. This hook adds the
  * behavior to disable nested DOM elements to the returned ref.
  *
+ * If you can, prefer the use of the inert HTML attribute.
+ *
  * @param {Object}   config            Configuration object.
  * @param {boolean=} config.isDisabled Whether the element should be disabled.
  * @return {import('react').RefCallback<HTMLElement>} Element Ref.
@@ -10,6 +12,7 @@
  * @example
  * ```js
  * import { useDisabled } from '@wordpress/compose';
+ *
  * const DisabledExample = () => {
  * 	const disabledRef = useDisabled();
  *	return (
@@ -23,5 +26,5 @@
  */
 export default function useDisabled({ isDisabled: isDisabledProp, }?: {
     isDisabled?: boolean | undefined;
-}): import('react').RefCallback<HTMLElement>;
+}): (instance: Node | null) => void;
 //# sourceMappingURL=index.d.ts.map

package/build-types/hooks/use-disabled/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-disabled/index.js"],"names":[],"mappings":"AA8BA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH;IAjB4B,UAAU,GAA3B,OAAO;IACN,OAAO,OAAO,EAAE,WAAW,CAAC,WAAW,CAAC,CA+JnD"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-disabled/index.ts"],"names":[],"mappings":"AAMA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,CAAC,OAAO,UAAU,WAAW,CAAE,EACpC,UAAU,EAAE,cAAsB,GAClC;;CAAK,mCA8CL"}

package/build-types/hooks/use-focus-outside/index.d.ts

@@ -1,72 +1,25 @@
 /**
- * @typedef {import('react').SyntheticEvent} SyntheticEvent
- */
-/**
- * @callback EventCallback
- * @param {SyntheticEvent} event input related event.
- */
-/**
- * @typedef FocusOutsideReactElement
- * @property {EventCallback} handleFocusOutside callback for a focus outside event.
- */
-/**
- * @typedef {import('react').MutableRefObject<FocusOutsideReactElement | undefined>} FocusOutsideRef
- */
-/**
- * @typedef {Object} FocusOutsideReturnValue
- * @property {EventCallback} onFocus      An event handler for focus events.
- * @property {EventCallback} onBlur       An event handler for blur events.
- * @property {EventCallback} onMouseDown  An event handler for mouse down events.
- * @property {EventCallback} onMouseUp    An event handler for mouse up events.
- * @property {EventCallback} onTouchStart An event handler for touch start events.
- * @property {EventCallback} onTouchEnd   An event handler for touch end events.
+ * External dependencies
  */
+import type { FocusEventHandler, MouseEventHandler, TouchEventHandler, FocusEvent } from 'react';
+declare type UseFocusOutsideReturn = {
+    onFocus: FocusEventHandler;
+    onMouseDown: MouseEventHandler;
+    onMouseUp: MouseEventHandler;
+    onTouchStart: TouchEventHandler;
+    onTouchEnd: TouchEventHandler;
+    onBlur: FocusEventHandler;
+};
 /**
  * A react hook that can be used to check whether focus has moved outside the
  * element the event handlers are bound to.
  *
- * @param {EventCallback} onFocusOutside A callback triggered when focus moves outside
- *                                       the element the event handlers are bound to.
+ * @param  onFocusOutside A callback triggered when focus moves outside
+ *                        the element the event handlers are bound to.
  *
- * @return {FocusOutsideReturnValue} An object containing event handlers. Bind the event handlers
- *                                   to a wrapping element element to capture when focus moves
- *                                   outside that element.
+ * @return An object containing event handlers. Bind the event handlers to a
+ * wrapping element element to capture when focus moves outside that element.
  */
-export default function useFocusOutside(onFocusOutside: EventCallback): FocusOutsideReturnValue;
-export type FocusNormalizedButton = HTMLButtonElement | HTMLLinkElement | HTMLInputElement;
-export type SyntheticEvent = import('react').SyntheticEvent;
-export type EventCallback = (event: SyntheticEvent) => any;
-export type FocusOutsideReactElement = {
-    /**
-     * callback for a focus outside event.
-     */
-    handleFocusOutside: EventCallback;
-};
-export type FocusOutsideRef = import('react').MutableRefObject<FocusOutsideReactElement | undefined>;
-export type FocusOutsideReturnValue = {
-    /**
-     * An event handler for focus events.
-     */
-    onFocus: EventCallback;
-    /**
-     * An event handler for blur events.
-     */
-    onBlur: EventCallback;
-    /**
-     * An event handler for mouse down events.
-     */
-    onMouseDown: EventCallback;
-    /**
-     * An event handler for mouse up events.
-     */
-    onMouseUp: EventCallback;
-    /**
-     * An event handler for touch start events.
-     */
-    onTouchStart: EventCallback;
-    /**
-     * An event handler for touch end events.
-     */
-    onTouchEnd: EventCallback;
-};
+export default function useFocusOutside(onFocusOutside: (event: FocusEvent) => void): UseFocusOutsideReturn;
+export {};
 //# sourceMappingURL=index.d.ts.map

package/build-types/hooks/use-focus-outside/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-focus-outside/index.js"],"names":[],"mappings":"AAgDA;;GAEG;AAEH;;;GAGG;AAEH;;;GAGG;AAEH;;GAEG;AAEH;;;;;;;;GAQG;AAEH;;;;;;;;;;GAUG;AACH,wDAPW,aAAa,GAGZ,uBAAuB,CAqGlC;oCA1KY,iBAAiB,GAAG,eAAe,GAAG,gBAAgB;6BAmCtD,OAAO,OAAO,EAAE,cAAc;oCAKhC,cAAc;;;;;wBAKX,aAAa;;8BAId,OAAO,OAAO,EAAE,gBAAgB,CAAC,wBAAwB,GAAG,SAAS,CAAC;;;;;aAKrE,aAAa;;;;YACb,aAAa;;;;iBACb,aAAa;;;;eACb,aAAa;;;;kBACb,aAAa;;;;gBACb,aAAa"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-focus-outside/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EACX,iBAAiB,EAEjB,iBAAiB,EACjB,iBAAiB,EACjB,UAAU,EAGV,MAAM,OAAO,CAAC;AAqDf,aAAK,qBAAqB,GAAG;IAC5B,OAAO,EAAE,iBAAiB,CAAC;IAC3B,WAAW,EAAE,iBAAiB,CAAC;IAC/B,SAAS,EAAE,iBAAiB,CAAC;IAC7B,YAAY,EAAE,iBAAiB,CAAC;IAChC,UAAU,EAAE,iBAAiB,CAAC;IAC9B,MAAM,EAAE,iBAAiB,CAAC;CAC1B,CAAC;AAEF;;;;;;;;;GASG;AACH,MAAM,CAAC,OAAO,UAAU,eAAe,CACtC,cAAc,EAAE,CAAE,KAAK,EAAE,UAAU,KAAM,IAAI,GAC3C,qBAAqB,CA4FvB"}

package/build-types/hooks/use-focusable-iframe/index.d.ts

@@ -1,8 +1,12 @@
+/**
+ * External dependencies
+ */
+import type { RefCallback } from 'react';
 /**
  * Dispatches a bubbling focus event when the iframe receives focus. Use
  * `onFocus` as usual on the iframe or a parent element.
  *
- * @return {Object} Ref to pass to the iframe.
+ * @return Ref to pass to the iframe.
  */
-export default function useFocusableIframe(): Object;
+export default function useFocusableIframe(): RefCallback<HTMLIFrameElement>;
 //# sourceMappingURL=index.d.ts.map

package/build-types/hooks/use-focusable-iframe/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-focusable-iframe/index.js"],"names":[],"mappings":"AAKA;;;;;GAKG;AACH,8CAFY,MAAM,CAwBjB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-focusable-iframe/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAOzC;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,kBAAkB,IAAI,WAAW,CAAE,iBAAiB,CAAE,CAsB7E"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/compose",
-	"version": "5.17.0",
+	"version": "5.19.0",
 	"description": "WordPress higher-order components (HOCs).",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -31,12 +31,12 @@
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
 		"@types/mousetrap": "^1.6.8",
-		"@wordpress/deprecated": "^3.19.0",
-		"@wordpress/dom": "^3.19.0",
-		"@wordpress/element": "^4.17.0",
-		"@wordpress/is-shallow-equal": "^4.19.0",
-		"@wordpress/keycodes": "^3.19.0",
-		"@wordpress/priority-queue": "^2.19.0",
+		"@wordpress/deprecated": "^3.21.0",
+		"@wordpress/dom": "^3.21.0",
+		"@wordpress/element": "^4.19.0",
+		"@wordpress/is-shallow-equal": "^4.21.0",
+		"@wordpress/keycodes": "^3.21.0",
+		"@wordpress/priority-queue": "^2.21.0",
 		"change-case": "^4.1.2",
 		"clipboard": "^2.0.8",
 		"mousetrap": "^1.6.5",
@@ -48,5 +48,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "8d42d2febb7d0ba8372a33e560a62f5a5f6a9112"
+	"gitHead": "511f4cc1f0138641bc4394bc1cf36e833109c791"
 }