@wordpress/compose 5.17.0 → 5.18.0

package/CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 5.18.0 (2022-10-19)
+
 ## 5.17.0 (2022-10-05)
 
 ## 5.16.0 (2022-09-21)

package/README.md

@@ -289,10 +289,13 @@ 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.
+
 _Usage_
 
 ```js
 import { useDisabled } from '@wordpress/compose';
+
 const DisabledExample = () => {
 	const disabledRef = useDisabled();
 	return (

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

@@ -7,35 +7,21 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = useDisabled;
 
-var _dom = require("@wordpress/dom");
-
 var _debounce = require("../../utils/debounce");
 
 var _useRefEffect = _interopRequireDefault(require("../use-ref-effect"));
 
-/**
- * WordPress dependencies
- */
-
 /**
  * Internal dependencies
  */
 
-/**
- * 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.
@@ -43,6 +29,7 @@ const DISABLED_ELIGIBLE_NODE_NAMES = ['BUTTON', 'FIELDSET', 'INPUT', 'OPTGROUP',
  * @example
  * ```js
  * import { useDisabled } from '@wordpress/compose';
+ *
  * const DisabledExample = () => {
  * 	const disabledRef = useDisabled();
  *	return (
@@ -54,7 +41,6 @@ const DISABLED_ELIGIBLE_NODE_NAMES = ['BUTTON', 'FIELDSET', 'INPUT', 'OPTGROUP',
  * };
  * ```
  */
-
 function useDisabled() {
   let {
     isDisabled: isDisabledProp = false
@@ -65,91 +51,19 @@ 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);
-        });
-      }
-
-      _dom.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);
-            }
-          });
+      node.childNodes.forEach(child => {
+        if (!(child instanceof HTMLElement)) {
+          return;
         }
 
-        const tabIndex = focusable.getAttribute('tabindex');
-
-        if (tabIndex !== null && tabIndex !== '-1') {
-          focusable.removeAttribute('tabindex');
+        if (!child.getAttribute('inert')) {
+          child.setAttribute('inert', 'true');
           updates.push(() => {
-            if (!focusable.isConnected) {
-              return;
-            }
-
-            focusable.setAttribute('tabindex', tabIndex);
-          });
-        }
-
-        if (focusable.hasAttribute('contenteditable') && focusable.getAttribute('contenteditable') !== 'false') {
-          focusable.setAttribute('contenteditable', 'false');
-          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');
           });
         }
       });
@@ -165,9 +79,7 @@ function useDisabled() {
 
     const observer = new window.MutationObserver(debouncedDisable);
     observer.observe(node, {
-      childList: true,
-      attributes: true,
-      subtree: true
+      childList: true
     });
     return () => {
       if (observer) {

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/compose/src/hooks/use-disabled/index.js"],"names":["DISABLED_ELIGIBLE_NODE_NAMES","useDisabled","isDisabled","isDisabledProp","node","updates","disable","style","getPropertyValue","previousValue","setProperty","push","isConnected","focus","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":["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":";;;;;;;;;AAGA;;AACA;;AAJA;AACA;AACA;;AAIA;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;AACe,SAASA,WAAT,GAEN;AAAA,MAF4B;AACpCC,IAAAA,UAAU,EAAEC,cAAc,GAAG;AADO,GAE5B,uEAAL,EAAK;AACR,SAAO,2BACJC,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,GAAG,wBAAUT,OAAV,EAAmB,CAAnB,EAAsB;AAC9CU,MAAAA,OAAO,EAAE;AADqC,KAAtB,CAAzB;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,GA1CK,EA2CN,CAAErB,cAAF,CA3CM,CAAP;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/hooks/use-resize-observer/index.native.js

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

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/compose/src/hooks/use-resize-observer/index.native.js"],"names":["useResizeObserver","measurements","setMeasurements","onLayout","nativeEvent","width","height","layout","prevState","Math","floor","observer","StyleSheet","absoluteFill"],"mappings":";;;;;;;AAOA;;AAJA;;AAHA;AACA;AACA;;AAEA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMA,iBAAiB,GAAG,MAAM;AAC/B,QAAM,CAAEC,YAAF,EAAgBC,eAAhB,IAAoC,uBAAU,IAAV,CAA1C;AAEA,QAAMC,QAAQ,GAAG,0BAAa,QAAuB;AAAA,QAArB;AAAEC,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,GAfgB,EAed,EAfc,CAAjB;AAiBA,QAAMG,QAAQ,GACb,4BAAC,iBAAD;AAAM,IAAA,KAAK,EAAGC,wBAAWC,YAAzB;AAAwC,IAAA,QAAQ,EAAGV;AAAnD,IADD;AAIA,SAAO,CAAEQ,QAAF,EAAYV,YAAZ,CAAP;AACA,CAzBD;;eA2BeD,iB","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":["useResizeObserver","measurements","setMeasurements","onLayout","nativeEvent","width","height","layout","prevState","Math","floor","observer","StyleSheet","absoluteFill"],"mappings":";;;;;;;AAOA;;AAJA;;AAHA;AACA;AACA;;AAEA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMA,iBAAiB,GAAG,MAAM;AAC/B,QAAM,CAAEC,YAAF,EAAgBC,eAAhB,IAAoC,uBAAU,IAAV,CAA1C;AAEA,QAAMC,QAAQ,GAAG,0BAAa,QAAuB;AAAA,QAArB;AAAEC,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,GAfgB,EAed,EAfc,CAAjB;AAiBA,QAAMG,QAAQ,GACb,4BAAC,iBAAD;AACC,IAAA,MAAM,EAAC,iBADR;AAEC,IAAA,KAAK,EAAGC,wBAAWC,YAFpB;AAGC,IAAA,QAAQ,EAAGV;AAHZ,IADD;AAQA,SAAO,CAAEQ,QAAF,EAAYV,YAAZ,CAAP;AACA,CA7BD;;eA+BeD,iB","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-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-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-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/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/compose",
-	"version": "5.17.0",
+	"version": "5.18.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.20.0",
+		"@wordpress/dom": "^3.20.0",
+		"@wordpress/element": "^4.18.0",
+		"@wordpress/is-shallow-equal": "^4.20.0",
+		"@wordpress/keycodes": "^3.20.0",
+		"@wordpress/priority-queue": "^2.20.0",
 		"change-case": "^4.1.2",
 		"clipboard": "^2.0.8",
 		"mousetrap": "^1.6.5",
@@ -48,5 +48,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "8d42d2febb7d0ba8372a33e560a62f5a5f6a9112"
+	"gitHead": "a2ff0e6471c88436dad0287beb88d1729aa6f5dd"
 }

package/src/higher-order/with-global-events/test/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import TestRenderer from 'react-test-renderer';
+import { render, screen } from '@testing-library/react';
 
 /**
  * WordPress dependencies
@@ -30,8 +30,6 @@ jest.mock( '../listener', () => {
 } );
 
 describe( 'withGlobalEvents', () => {
-	let wrapper;
-
 	class OriginalComponent extends Component {
 		handleResize( event ) {
 			this.props.onResize( event );
@@ -50,51 +48,42 @@ describe( 'withGlobalEvents', () => {
 		jest.clearAllMocks();
 	} );
 
-	afterEach( () => {
-		if ( wrapper ) {
-			wrapper.unmount();
-			wrapper = null;
-		}
-	} );
-
-	function mountEnhancedComponent( props = {} ) {
+	it( 'renders with original component', () => {
 		const EnhancedComponent = withGlobalEvents( {
 			resize: 'handleResize',
 		} )( OriginalComponent );
 
-		props.ref = () => {};
-
-		wrapper = TestRenderer.create(
-			<EnhancedComponent { ...props }>Hello</EnhancedComponent>
-		);
-	}
-
-	it( 'renders with original component', () => {
-		mountEnhancedComponent();
+		render( <EnhancedComponent ref={ () => {} }>Hello</EnhancedComponent> );
 
 		expect( console ).toHaveWarned();
-		expect( wrapper.root.findByType( 'div' ).children[ 0 ] ).toBe(
-			'Hello'
-		);
+		expect( screen.getByText( 'Hello' ) ).toBeVisible();
 	} );
 
 	it( 'binds events from passed object', () => {
-		mountEnhancedComponent();
+		const EnhancedComponent = withGlobalEvents( {
+			resize: 'handleResize',
+		} )( OriginalComponent );
 
-		// Get the HOC wrapper instance.
-		const hocInstance =
-			wrapper.root.findByType( OriginalComponent ).parent.instance;
+		render( <EnhancedComponent ref={ () => {} }>Hello</EnhancedComponent> );
 
 		expect( Listener._instance.add ).toHaveBeenCalledWith(
 			'resize',
-			hocInstance
+			// If not `undefined`, then we consider handlers were properly bound to the wrapper component.
+			expect.any( Object )
 		);
 	} );
 
 	it( 'handles events', () => {
+		const EnhancedComponent = withGlobalEvents( {
+			resize: 'handleResize',
+		} )( OriginalComponent );
 		const onResize = jest.fn();
 
-		mountEnhancedComponent( { onResize } );
+		render(
+			<EnhancedComponent ref={ () => {} } onResize={ onResize }>
+				Hello
+			</EnhancedComponent>
+		);
 
 		const event = { type: 'resize' };