@wordpress/compose 5.6.0 → 5.7.0

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 ## Unreleased
 
+## 5.7.0 (2022-05-18)
+
+### Bug Fix
+
+-   `useRefEffect`: Allow `void` as a valid callback return type ([#40798](https://github.com/WordPress/gutenberg/pull/40798)).
+
+### New Features
+
+-   Add `useDisabled` hook.
+
+### Internal
+
+-   Update the implementation of useResizeObserver to rely on the ResizableObserver API.
+
 ## 5.6.0 (2022-05-04)
 
 ## 5.5.0 (2022-04-21)

package/README.md

@@ -205,6 +205,39 @@ _Returns_
 
 -   `import('lodash').DebouncedFunc<TFunc>`: Debounced function.
 
+### useDisabled
+
+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.
+
+_Usage_
+
+```js
+import { useDisabled } from '@wordpress/compose';
+const DisabledExample = () => {
+	const disabledRef = useDisabled();
+	return (
+		<div ref={ disabledRef }>
+			<a href="#">This link will have tabindex set to -1</a>
+			<input
+				placeholder="This input will have the disabled attribute added to it."
+				type="text"
+			/>
+		</div>
+	);
+};
+```
+
+_Parameters_
+
+-   _config_ `Object`: Configuration object.
+-   _config.isDisabled_ `boolean=`: Whether the element should be disabled.
+
+_Returns_
+
+-   `import('react').RefCallback<HTMLElement>`: Element Ref.
+
 ### useFocusableIframe
 
 Dispatches a bubbling focus event when the iframe receives focus. Use
@@ -404,7 +437,7 @@ callback will be called multiple times for the same node.
 
 _Parameters_
 
--   _callback_ `( node: TElement ) => ( () => void ) | undefined`: Callback with ref as argument.
+-   _callback_ `( node: TElement ) => ( () => void ) | void`: Callback with ref as argument.
 -   _dependencies_ `DependencyList`: Dependencies of the callback.
 
 _Returns_
@@ -414,14 +447,7 @@ _Returns_
 ### useResizeObserver
 
 Hook which allows to listen the resize event of any target element when it changes sizes.
-_Note: `useResizeObserver` will report `null` until after first render_
-
-Simply a re-export of `react-resize-aware` so refer to its documentation <https://github.com/FezVrasta/react-resize-aware>
-for more details.
-
-_Related_
-
--   <https://github.com/FezVrasta/react-resize-aware>
+\_Note: `useResizeObserver` will report `null` until after first render.
 
 _Usage_
 

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

@@ -40,11 +40,13 @@ const DISABLED_ELIGIBLE_NODE_NAMES = ['BUTTON', 'FIELDSET', 'INPUT', 'OPTGROUP',
  * (input fields, links, buttons, etc.) need to be disabled. This hook adds the
  * behavior to disable nested DOM elements to the returned ref.
  *
+ * @param {Object}   config            Configuration object.
+ * @param {boolean=} config.isDisabled Whether the element should be disabled.
  * @return {import('react').RefCallback<HTMLElement>} Element Ref.
  *
  * @example
  * ```js
- * import { __experimentalUseDisabled as useDisabled } from '@wordpress/compose';
+ * import { useDisabled } from '@wordpress/compose';
  * const DisabledExample = () => {
  * 	const disabledRef = useDisabled();
  *	return (
@@ -58,34 +60,101 @@ const DISABLED_ELIGIBLE_NODE_NAMES = ['BUTTON', 'FIELDSET', 'INPUT', 'OPTGROUP',
  */
 
 function useDisabled() {
+  let {
+    isDisabled: isDisabledProp = false
+  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return (0, _useRefEffect.default)(node => {
+    if (isDisabledProp) {
+      return;
+    }
+    /** A variable keeping track of the previous updates in order to restore them. */
+
+    /** @type {Function[]} */
+
+
+    const updates = [];
+
     const disable = () => {
-      node.style.setProperty('user-select', 'none');
-      node.style.setProperty('-webkit-user-select', 'none');
+      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 ((0, _lodash.includes)(DISABLED_ELIGIBLE_NODE_NAMES, focusable.nodeName)) {
+        if ((0, _lodash.includes)(DISABLED_ELIGIBLE_NODE_NAMES, focusable.nodeName) && // @ts-ignore
+        !focusable.disabled) {
           focusable.setAttribute('disabled', '');
+          updates.push(() => {
+            if (!focusable.isConnected) {
+              return;
+            } // @ts-ignore
+
+
+            focusable.disabled = false;
+          });
         }
 
-        if (focusable.nodeName === 'A') {
+        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);
+          });
         }
 
-        if (focusable.hasAttribute('contenteditable')) {
+        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);
+          });
         }
       });
     }; // Debounce re-disable since disabling process itself will incur
@@ -110,7 +179,8 @@ function useDisabled() {
       }
 
       debouncedDisable.cancel();
+      updates.forEach(update => update());
     };
-  }, []);
+  }, [isDisabledProp]);
 }
 //# sourceMappingURL=index.js.map

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","node","disable","style","setProperty","focus","focusable","find","forEach","nodeName","setAttribute","tabIndex","getAttribute","removeAttribute","hasAttribute","ownerDocument","defaultView","HTMLElement","debouncedDisable","undefined","leading","observer","window","MutationObserver","observe","childList","attributes","subtree","disconnect","cancel"],"mappings":";;;;;;;;;AAGA;;AAKA;;AAKA;;AAbA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMA,4BAA4B,GAAG,CACpC,QADoC,EAEpC,UAFoC,EAGpC,OAHoC,EAIpC,UAJoC,EAKpC,QALoC,EAMpC,QANoC,EAOpC,UAPoC,CAArC;AAUA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACe,SAASC,WAAT,GAAuB;AACrC,SAAO,2BAAgBC,IAAF,IAAY;AAChC,UAAMC,OAAO,GAAG,MAAM;AACrBD,MAAAA,IAAI,CAACE,KAAL,CAAWC,WAAX,CAAwB,aAAxB,EAAuC,MAAvC;AACAH,MAAAA,IAAI,CAACE,KAAL,CAAWC,WAAX,CAAwB,qBAAxB,EAA+C,MAA/C;;AACAC,iBAAMC,SAAN,CAAgBC,IAAhB,CAAsBN,IAAtB,EAA6BO,OAA7B,CAAwCF,SAAF,IAAiB;AAAA;;AACtD,YACC,sBAAUP,4BAAV,EAAwCO,SAAS,CAACG,QAAlD,CADD,EAEE;AACDH,UAAAA,SAAS,CAACI,YAAV,CAAwB,UAAxB,EAAoC,EAApC;AACA;;AAED,YAAKJ,SAAS,CAACG,QAAV,KAAuB,GAA5B,EAAkC;AACjCH,UAAAA,SAAS,CAACI,YAAV,CAAwB,UAAxB,EAAoC,IAApC;AACA;;AAED,cAAMC,QAAQ,GAAGL,SAAS,CAACM,YAAV,CAAwB,UAAxB,CAAjB;;AACA,YAAKD,QAAQ,KAAK,IAAb,IAAqBA,QAAQ,KAAK,IAAvC,EAA8C;AAC7CL,UAAAA,SAAS,CAACO,eAAV,CAA2B,UAA3B;AACA;;AAED,YAAKP,SAAS,CAACQ,YAAV,CAAwB,iBAAxB,CAAL,EAAmD;AAClDR,UAAAA,SAAS,CAACI,YAAV,CAAwB,iBAAxB,EAA2C,OAA3C;AACA;;AAED,YACC,yBAAAT,IAAI,CAACc,aAAL,CAAmBC,WAAnB,wEAAgCC,WAAhC,IACAX,SAAS,YACRL,IAAI,CAACc,aAAL,CAAmBC,WAAnB,CAA+BC,WAHjC,EAIE;AACDX,UAAAA,SAAS,CAACH,KAAV,CAAgBC,WAAhB,CAA6B,gBAA7B,EAA+C,MAA/C;AACA;AACD,OA3BD;AA4BA,KA/BD,CADgC,CAkChC;AACA;;;AACA,UAAMc,gBAAgB,GAAG,sBAAUhB,OAAV,EAAmBiB,SAAnB,EAA8B;AACtDC,MAAAA,OAAO,EAAE;AAD6C,KAA9B,CAAzB;AAGAlB,IAAAA,OAAO;AAEP;;AACA,UAAMmB,QAAQ,GAAG,IAAIC,MAAM,CAACC,gBAAX,CAA6BL,gBAA7B,CAAjB;AACAG,IAAAA,QAAQ,CAACG,OAAT,CAAkBvB,IAAlB,EAAwB;AACvBwB,MAAAA,SAAS,EAAE,IADY;AAEvBC,MAAAA,UAAU,EAAE,IAFW;AAGvBC,MAAAA,OAAO,EAAE;AAHc,KAAxB;AAMA,WAAO,MAAM;AACZ,UAAKN,QAAL,EAAgB;AACfA,QAAAA,QAAQ,CAACO,UAAT;AACA;;AACDV,MAAAA,gBAAgB,CAACW,MAAjB;AACA,KALD;AAMA,GAvDM,EAuDJ,EAvDI,CAAP;AAwDA","sourcesContent":["/**\n * External dependencies\n */\nimport { includes, debounce } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { focus } from '@wordpress/dom';\n\n/**\n * Internal dependencies\n */\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 * @return {import('react').RefCallback<HTMLElement>} Element Ref.\n *\n * @example\n * ```js\n * import { __experimentalUseDisabled as 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\treturn useRefEffect( ( node ) => {\n\t\tconst disable = () => {\n\t\t\tnode.style.setProperty( 'user-select', 'none' );\n\t\t\tnode.style.setProperty( '-webkit-user-select', 'none' );\n\t\t\tfocus.focusable.find( node ).forEach( ( focusable ) => {\n\t\t\t\tif (\n\t\t\t\t\tincludes( DISABLED_ELIGIBLE_NODE_NAMES, focusable.nodeName )\n\t\t\t\t) {\n\t\t\t\t\tfocusable.setAttribute( 'disabled', '' );\n\t\t\t\t}\n\n\t\t\t\tif ( focusable.nodeName === 'A' ) {\n\t\t\t\t\tfocusable.setAttribute( 'tabindex', '-1' );\n\t\t\t\t}\n\n\t\t\t\tconst tabIndex = focusable.getAttribute( 'tabindex' );\n\t\t\t\tif ( tabIndex !== null && tabIndex !== '-1' ) {\n\t\t\t\t\tfocusable.removeAttribute( 'tabindex' );\n\t\t\t\t}\n\n\t\t\t\tif ( focusable.hasAttribute( 'contenteditable' ) ) {\n\t\t\t\t\tfocusable.setAttribute( 'contenteditable', 'false' );\n\t\t\t\t}\n\n\t\t\t\tif (\n\t\t\t\t\tnode.ownerDocument.defaultView?.HTMLElement &&\n\t\t\t\t\tfocusable instanceof\n\t\t\t\t\t\tnode.ownerDocument.defaultView.HTMLElement\n\t\t\t\t) {\n\t\t\t\t\tfocusable.style.setProperty( 'pointer-events', 'none' );\n\t\t\t\t}\n\t\t\t} );\n\t\t};\n\n\t\t// Debounce re-disable since disabling process itself will incur\n\t\t// additional mutations which should be ignored.\n\t\tconst debouncedDisable = debounce( disable, undefined, {\n\t\t\tleading: true,\n\t\t} );\n\t\tdisable();\n\n\t\t/** @type {MutationObserver | undefined} */\n\t\tconst observer = new window.MutationObserver( debouncedDisable );\n\t\tobserver.observe( node, {\n\t\t\tchildList: true,\n\t\t\tattributes: true,\n\t\t\tsubtree: true,\n\t\t} );\n\n\t\treturn () => {\n\t\t\tif ( observer ) {\n\t\t\t\tobserver.disconnect();\n\t\t\t}\n\t\t\tdebouncedDisable.cancel();\n\t\t};\n\t}, [] );\n}\n"]}
+{"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","nodeName","disabled","setAttribute","getAttribute","removeAttribute","tabIndex","hasAttribute","ownerDocument","defaultView","HTMLElement","debouncedDisable","undefined","leading","observer","window","MutationObserver","observe","childList","attributes","subtree","disconnect","cancel","update"],"mappings":";;;;;;;;;AAGA;;AAKA;;AAKA;;AAbA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMA,4BAA4B,GAAG,CACpC,QADoC,EAEpC,UAFoC,EAGpC,OAHoC,EAIpC,UAJoC,EAKpC,QALoC,EAMpC,QANoC,EAOpC,UAPoC,CAArC;AAUA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACe,SAASC,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;;;AACA,UAAME,OAAO,GAAG,EAAhB;;AAEA,UAAMC,OAAO,GAAG,MAAM;AACrB,UAAKF,IAAI,CAACG,KAAL,CAAWC,gBAAX,CAA6B,aAA7B,MAAiD,MAAtD,EAA+D;AAC9D,cAAMC,aAAa,GAAGL,IAAI,CAACG,KAAL,CAAWC,gBAAX,CACrB,aADqB,CAAtB;AAGAJ,QAAAA,IAAI,CAACG,KAAL,CAAWG,WAAX,CAAwB,aAAxB,EAAuC,MAAvC;AACAN,QAAAA,IAAI,CAACG,KAAL,CAAWG,WAAX,CAAwB,qBAAxB,EAA+C,MAA/C;AACAL,QAAAA,OAAO,CAACM,IAAR,CAAc,MAAM;AACnB,cAAK,CAAEP,IAAI,CAACQ,WAAZ,EAA0B;AACzB;AACA;;AACDR,UAAAA,IAAI,CAACG,KAAL,CAAWG,WAAX,CAAwB,aAAxB,EAAuCD,aAAvC;AACAL,UAAAA,IAAI,CAACG,KAAL,CAAWG,WAAX,CACC,qBADD,EAECD,aAFD;AAIA,SATD;AAUA;;AAEDI,iBAAMC,SAAN,CAAgBC,IAAhB,CAAsBX,IAAtB,EAA6BY,OAA7B,CAAwCF,SAAF,IAAiB;AAAA;;AACtD,YACC,sBACCd,4BADD,EAECc,SAAS,CAACG,QAFX,KAIA;AACA,SAAEH,SAAS,CAACI,QANb,EAOE;AACDJ,UAAAA,SAAS,CAACK,YAAV,CAAwB,UAAxB,EAAoC,EAApC;AACAd,UAAAA,OAAO,CAACM,IAAR,CAAc,MAAM;AACnB,gBAAK,CAAEG,SAAS,CAACF,WAAjB,EAA+B;AAC9B;AACA,aAHkB,CAInB;;;AACAE,YAAAA,SAAS,CAACI,QAAV,GAAqB,KAArB;AACA,WAND;AAOA;;AAED,YACCJ,SAAS,CAACG,QAAV,KAAuB,GAAvB,IACAH,SAAS,CAACM,YAAV,CAAwB,UAAxB,MAAyC,IAF1C,EAGE;AACD,gBAAMX,aAAa,GAAGK,SAAS,CAACM,YAAV,CACrB,UADqB,CAAtB;AAGAN,UAAAA,SAAS,CAACK,YAAV,CAAwB,UAAxB,EAAoC,IAApC;AACAd,UAAAA,OAAO,CAACM,IAAR,CAAc,MAAM;AACnB,gBAAK,CAAEG,SAAS,CAACF,WAAjB,EAA+B;AAC9B;AACA;;AACD,gBAAK,CAAEH,aAAP,EAAuB;AACtBK,cAAAA,SAAS,CAACO,eAAV,CAA2B,UAA3B;AACA,aAFD,MAEO;AACNP,cAAAA,SAAS,CAACK,YAAV,CACC,UADD,EAECV,aAFD;AAIA;AACD,WAZD;AAaA;;AAED,cAAMa,QAAQ,GAAGR,SAAS,CAACM,YAAV,CAAwB,UAAxB,CAAjB;;AACA,YAAKE,QAAQ,KAAK,IAAb,IAAqBA,QAAQ,KAAK,IAAvC,EAA8C;AAC7CR,UAAAA,SAAS,CAACO,eAAV,CAA2B,UAA3B;AACAhB,UAAAA,OAAO,CAACM,IAAR,CAAc,MAAM;AACnB,gBAAK,CAAEG,SAAS,CAACF,WAAjB,EAA+B;AAC9B;AACA;;AACDE,YAAAA,SAAS,CAACK,YAAV,CAAwB,UAAxB,EAAoCG,QAApC;AACA,WALD;AAMA;;AAED,YACCR,SAAS,CAACS,YAAV,CAAwB,iBAAxB,KACAT,SAAS,CAACM,YAAV,CAAwB,iBAAxB,MAAgD,OAFjD,EAGE;AACDN,UAAAA,SAAS,CAACK,YAAV,CAAwB,iBAAxB,EAA2C,OAA3C;AACAd,UAAAA,OAAO,CAACM,IAAR,CAAc,MAAM;AACnB,gBAAK,CAAEG,SAAS,CAACF,WAAjB,EAA+B;AAC9B;AACA;;AACDE,YAAAA,SAAS,CAACK,YAAV,CAAwB,iBAAxB,EAA2C,MAA3C;AACA,WALD;AAMA;;AAED,YACC,yBAAAf,IAAI,CAACoB,aAAL,CAAmBC,WAAnB,wEAAgCC,WAAhC,IACAZ,SAAS,YACRV,IAAI,CAACoB,aAAL,CAAmBC,WAAnB,CAA+BC,WAHjC,EAIE;AACD,gBAAMjB,aAAa,GAAGK,SAAS,CAACP,KAAV,CAAgBC,gBAAhB,CACrB,gBADqB,CAAtB;AAGAM,UAAAA,SAAS,CAACP,KAAV,CAAgBG,WAAhB,CAA6B,gBAA7B,EAA+C,MAA/C;AACAL,UAAAA,OAAO,CAACM,IAAR,CAAc,MAAM;AACnB,gBAAK,CAAEG,SAAS,CAACF,WAAjB,EAA+B;AAC9B;AACA;;AACDE,YAAAA,SAAS,CAACP,KAAV,CAAgBG,WAAhB,CACC,gBADD,EAECD,aAFD;AAIA,WARD;AASA;AACD,OArFD;AAsFA,KAzGD,CATW,CAoHX;AACA;;;AACA,UAAMkB,gBAAgB,GAAG,sBAAUrB,OAAV,EAAmBsB,SAAnB,EAA8B;AACtDC,MAAAA,OAAO,EAAE;AAD6C,KAA9B,CAAzB;AAGAvB,IAAAA,OAAO;AAEP;;AACA,UAAMwB,QAAQ,GAAG,IAAIC,MAAM,CAACC,gBAAX,CAA6BL,gBAA7B,CAAjB;AACAG,IAAAA,QAAQ,CAACG,OAAT,CAAkB7B,IAAlB,EAAwB;AACvB8B,MAAAA,SAAS,EAAE,IADY;AAEvBC,MAAAA,UAAU,EAAE,IAFW;AAGvBC,MAAAA,OAAO,EAAE;AAHc,KAAxB;AAMA,WAAO,MAAM;AACZ,UAAKN,QAAL,EAAgB;AACfA,QAAAA,QAAQ,CAACO,UAAT;AACA;;AACDV,MAAAA,gBAAgB,CAACW,MAAjB;AACAjC,MAAAA,OAAO,CAACW,OAAR,CAAmBuB,MAAF,IAAcA,MAAM,EAArC;AACA,KAND;AAOA,GA3IK,EA4IN,CAAEpC,cAAF,CA5IM,CAAP;AA8IA","sourcesContent":["/**\n * External dependencies\n */\nimport { includes, debounce } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { focus } from '@wordpress/dom';\n\n/**\n * Internal dependencies\n */\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 = node.style.getPropertyValue(\n\t\t\t\t\t\t'user-select'\n\t\t\t\t\t);\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\tincludes(\n\t\t\t\t\t\t\tDISABLED_ELIGIBLE_NODE_NAMES,\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 = focusable.getAttribute(\n\t\t\t\t\t\t\t'tabindex'\n\t\t\t\t\t\t);\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 = focusable.style.getPropertyValue(\n\t\t\t\t\t\t\t'pointer-events'\n\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, undefined, {\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"]}

package/build/hooks/use-focus-on-mount/index.js

@@ -63,7 +63,12 @@ function useFocusOnMount() {
       }
     }
 
-    target.focus();
+    target.focus({
+      // When focusing newly mounted dialogs,
+      // the position of the popover is often not right on the first render
+      // This prevents the layout shifts when focusing the dialogs.
+      preventScroll: true
+    });
   }, []);
 }
 //# sourceMappingURL=index.js.map

package/build/hooks/use-focus-on-mount/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/compose/src/hooks/use-focus-on-mount/index.js"],"names":["useFocusOnMount","focusOnMount","focusOnMountRef","current","node","contains","ownerDocument","activeElement","target","firstTabbable","focus","tabbable","find"],"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;AACe,SAASA,eAAT,GAA0D;AAAA,MAAhCC,YAAgC,uEAAjB,cAAiB;AACxE,QAAMC,eAAe,GAAG,qBAAQD,YAAR,CAAxB;AACA,0BAAW,MAAM;AAChBC,IAAAA,eAAe,CAACC,OAAhB,GAA0BF,YAA1B;AACA,GAFD,EAEG,CAAEA,YAAF,CAFH;AAIA,SAAO,0BAAeG,IAAF,IAAY;AAAA;;AAC/B,QAAK,CAAEA,IAAF,IAAUF,eAAe,CAACC,OAAhB,KAA4B,KAA3C,EAAmD;AAClD;AACA;;AAED,QAAKC,IAAI,CAACC,QAAL,iDAAeD,IAAI,CAACE,aAApB,wDAAe,oBAAoBC,aAAnC,yEAAoD,IAApD,CAAL,EAAkE;AACjE;AACA;;AAED,QAAIC,MAAM,GAAGJ,IAAb;;AAEA,QAAKF,eAAe,CAACC,OAAhB,KAA4B,cAAjC,EAAkD;AACjD,YAAMM,aAAa,GAAGC,WAAMC,QAAN,CAAeC,IAAf,CAAqBR,IAArB,EAA6B,CAA7B,CAAtB;;AAEA,UAAKK,aAAL,EAAqB;AACpBD,QAAAA,MAAM;AAAG;AAA6BC,QAAAA,aAAtC;AACA;AACD;;AAEDD,IAAAA,MAAM,CAACE,KAAP;AACA,GApBM,EAoBJ,EApBI,CAAP;AAqBA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useRef, useEffect, useCallback } from '@wordpress/element';\nimport { focus } from '@wordpress/dom';\n\n/**\n * Hook used to focus the first tabbable element on mount.\n *\n * @param {boolean | 'firstElement'} focusOnMount Focus on mount mode.\n * @return {import('react').RefCallback<HTMLElement>} Ref callback.\n *\n * @example\n * ```js\n * import { useFocusOnMount } from '@wordpress/compose';\n *\n * const WithFocusOnMount = () => {\n *     const ref = useFocusOnMount()\n *     return (\n *         <div ref={ ref }>\n *             <Button />\n *             <Button />\n *         </div>\n *     );\n * }\n * ```\n */\nexport default function useFocusOnMount( focusOnMount = 'firstElement' ) {\n\tconst focusOnMountRef = useRef( focusOnMount );\n\tuseEffect( () => {\n\t\tfocusOnMountRef.current = focusOnMount;\n\t}, [ focusOnMount ] );\n\n\treturn useCallback( ( node ) => {\n\t\tif ( ! node || focusOnMountRef.current === false ) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ( node.contains( node.ownerDocument?.activeElement ?? null ) ) {\n\t\t\treturn;\n\t\t}\n\n\t\tlet target = node;\n\n\t\tif ( focusOnMountRef.current === 'firstElement' ) {\n\t\t\tconst firstTabbable = focus.tabbable.find( node )[ 0 ];\n\n\t\t\tif ( firstTabbable ) {\n\t\t\t\ttarget = /** @type {HTMLElement} */ ( firstTabbable );\n\t\t\t}\n\t\t}\n\n\t\ttarget.focus();\n\t}, [] );\n}\n"]}
+{"version":3,"sources":["@wordpress/compose/src/hooks/use-focus-on-mount/index.js"],"names":["useFocusOnMount","focusOnMount","focusOnMountRef","current","node","contains","ownerDocument","activeElement","target","firstTabbable","focus","tabbable","find","preventScroll"],"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;AACe,SAASA,eAAT,GAA0D;AAAA,MAAhCC,YAAgC,uEAAjB,cAAiB;AACxE,QAAMC,eAAe,GAAG,qBAAQD,YAAR,CAAxB;AACA,0BAAW,MAAM;AAChBC,IAAAA,eAAe,CAACC,OAAhB,GAA0BF,YAA1B;AACA,GAFD,EAEG,CAAEA,YAAF,CAFH;AAIA,SAAO,0BAAeG,IAAF,IAAY;AAAA;;AAC/B,QAAK,CAAEA,IAAF,IAAUF,eAAe,CAACC,OAAhB,KAA4B,KAA3C,EAAmD;AAClD;AACA;;AAED,QAAKC,IAAI,CAACC,QAAL,iDAAeD,IAAI,CAACE,aAApB,wDAAe,oBAAoBC,aAAnC,yEAAoD,IAApD,CAAL,EAAkE;AACjE;AACA;;AAED,QAAIC,MAAM,GAAGJ,IAAb;;AAEA,QAAKF,eAAe,CAACC,OAAhB,KAA4B,cAAjC,EAAkD;AACjD,YAAMM,aAAa,GAAGC,WAAMC,QAAN,CAAeC,IAAf,CAAqBR,IAArB,EAA6B,CAA7B,CAAtB;;AAEA,UAAKK,aAAL,EAAqB;AACpBD,QAAAA,MAAM;AAAG;AAA6BC,QAAAA,aAAtC;AACA;AACD;;AAEDD,IAAAA,MAAM,CAACE,KAAP,CAAc;AACb;AACA;AACA;AACAG,MAAAA,aAAa,EAAE;AAJF,KAAd;AAMA,GAzBM,EAyBJ,EAzBI,CAAP;AA0BA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useRef, useEffect, useCallback } from '@wordpress/element';\nimport { focus } from '@wordpress/dom';\n\n/**\n * Hook used to focus the first tabbable element on mount.\n *\n * @param {boolean | 'firstElement'} focusOnMount Focus on mount mode.\n * @return {import('react').RefCallback<HTMLElement>} Ref callback.\n *\n * @example\n * ```js\n * import { useFocusOnMount } from '@wordpress/compose';\n *\n * const WithFocusOnMount = () => {\n *     const ref = useFocusOnMount()\n *     return (\n *         <div ref={ ref }>\n *             <Button />\n *             <Button />\n *         </div>\n *     );\n * }\n * ```\n */\nexport default function useFocusOnMount( focusOnMount = 'firstElement' ) {\n\tconst focusOnMountRef = useRef( focusOnMount );\n\tuseEffect( () => {\n\t\tfocusOnMountRef.current = focusOnMount;\n\t}, [ focusOnMount ] );\n\n\treturn useCallback( ( node ) => {\n\t\tif ( ! node || focusOnMountRef.current === false ) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ( node.contains( node.ownerDocument?.activeElement ?? null ) ) {\n\t\t\treturn;\n\t\t}\n\n\t\tlet target = node;\n\n\t\tif ( focusOnMountRef.current === 'firstElement' ) {\n\t\t\tconst firstTabbable = focus.tabbable.find( node )[ 0 ];\n\n\t\t\tif ( firstTabbable ) {\n\t\t\t\ttarget = /** @type {HTMLElement} */ ( firstTabbable );\n\t\t\t}\n\t\t}\n\n\t\ttarget.focus( {\n\t\t\t// When focusing newly mounted dialogs,\n\t\t\t// the position of the popover is often not right on the first render\n\t\t\t// This prevents the layout shifts when focusing the dialogs.\n\t\t\tpreventScroll: true,\n\t\t} );\n\t}, [] );\n}\n"]}

package/build/hooks/use-ref-effect/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/compose/src/hooks/use-ref-effect/index.ts"],"names":["useRefEffect","callback","dependencies","cleanup","node","current"],"mappings":";;;;;;;AAQA;;AARA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACe,SAASA,YAAT,CACdC,QADc,EAEdC,YAFc,EAGmB;AACjC,QAAMC,OAAO,GAAG,sBAAhB;AACA,SAAO,0BAAeC,IAAF,IAA6B;AAChD,QAAKA,IAAL,EAAY;AACXD,MAAAA,OAAO,CAACE,OAAR,GAAkBJ,QAAQ,CAAEG,IAAF,CAA1B;AACA,KAFD,MAEO,IAAKD,OAAO,CAACE,OAAb,EAAuB;AAC7BF,MAAAA,OAAO,CAACE,OAAR;AACA;AACD,GANM,EAMJH,YANI,CAAP;AAOA","sourcesContent":["/**\n * External dependencies\n */\nimport type { DependencyList, RefCallback } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useCallback, useRef } from '@wordpress/element';\n\n/**\n * Effect-like ref callback. Just like with `useEffect`, this allows you to\n * return a cleanup function to be run if the ref changes or one of the\n * dependencies changes. The ref is provided as an argument to the callback\n * functions. The main difference between this and `useEffect` is that\n * the `useEffect` callback is not called when the ref changes, but this is.\n * Pass the returned ref callback as the component's ref and merge multiple refs\n * with `useMergeRefs`.\n *\n * It's worth noting that if the dependencies array is empty, there's not\n * strictly a need to clean up event handlers for example, because the node is\n * to be removed. It *is* necessary if you add dependencies because the ref\n * callback will be called multiple times for the same node.\n *\n * @param  callback     Callback with ref as argument.\n * @param  dependencies Dependencies of the callback.\n *\n * @return Ref callback.\n */\nexport default function useRefEffect< TElement = Node >(\n\tcallback: ( node: TElement ) => ( () => void ) | undefined,\n\tdependencies: DependencyList\n): RefCallback< TElement | null > {\n\tconst cleanup = useRef< ( () => void ) | undefined >();\n\treturn useCallback( ( node: TElement | null ) => {\n\t\tif ( node ) {\n\t\t\tcleanup.current = callback( node );\n\t\t} else if ( cleanup.current ) {\n\t\t\tcleanup.current();\n\t\t}\n\t}, dependencies );\n}\n"]}
+{"version":3,"sources":["@wordpress/compose/src/hooks/use-ref-effect/index.ts"],"names":["useRefEffect","callback","dependencies","cleanup","node","current"],"mappings":";;;;;;;AAQA;;AARA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACe,SAASA,YAAT,CACdC,QADc,EAEdC,YAFc,EAGmB;AACjC,QAAMC,OAAO,GAAG,sBAAhB;AACA,SAAO,0BAAeC,IAAF,IAA6B;AAChD,QAAKA,IAAL,EAAY;AACXD,MAAAA,OAAO,CAACE,OAAR,GAAkBJ,QAAQ,CAAEG,IAAF,CAA1B;AACA,KAFD,MAEO,IAAKD,OAAO,CAACE,OAAb,EAAuB;AAC7BF,MAAAA,OAAO,CAACE,OAAR;AACA;AACD,GANM,EAMJH,YANI,CAAP;AAOA","sourcesContent":["/**\n * External dependencies\n */\nimport type { DependencyList, RefCallback } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useCallback, useRef } from '@wordpress/element';\n\n/**\n * Effect-like ref callback. Just like with `useEffect`, this allows you to\n * return a cleanup function to be run if the ref changes or one of the\n * dependencies changes. The ref is provided as an argument to the callback\n * functions. The main difference between this and `useEffect` is that\n * the `useEffect` callback is not called when the ref changes, but this is.\n * Pass the returned ref callback as the component's ref and merge multiple refs\n * with `useMergeRefs`.\n *\n * It's worth noting that if the dependencies array is empty, there's not\n * strictly a need to clean up event handlers for example, because the node is\n * to be removed. It *is* necessary if you add dependencies because the ref\n * callback will be called multiple times for the same node.\n *\n * @param  callback     Callback with ref as argument.\n * @param  dependencies Dependencies of the callback.\n *\n * @return Ref callback.\n */\nexport default function useRefEffect< TElement = Node >(\n\tcallback: ( node: TElement ) => ( () => void ) | void,\n\tdependencies: DependencyList\n): RefCallback< TElement | null > {\n\tconst cleanup = useRef< ( () => void ) | void >();\n\treturn useCallback( ( node: TElement | null ) => {\n\t\tif ( node ) {\n\t\t\tcleanup.current = callback( node );\n\t\t} else if ( cleanup.current ) {\n\t\t\tcleanup.current();\n\t\t}\n\t}, dependencies );\n}\n"]}

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

@@ -1,26 +1,209 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = useResizeAware;
 
-var _reactResizeAware = _interopRequireDefault(require("react-resize-aware"));
+var _element = require("@wordpress/element");
 
 /**
  * External dependencies
  */
 
+/**
+ * WordPress dependencies
+ */
+// This of course could've been more streamlined with internal state instead of
+// refs, but then host hooks / components could not opt out of renders.
+// This could've been exported to its own module, but the current build doesn't
+// seem to work with module imports and I had no more time to spend on this...
+function useResolvedElement(subscriber, refOrElement) {
+  const callbackRefElement = (0, _element.useRef)(null);
+  const lastReportRef = (0, _element.useRef)(null);
+  const cleanupRef = (0, _element.useRef)();
+  const callSubscriber = (0, _element.useCallback)(() => {
+    let element = null;
+
+    if (callbackRefElement.current) {
+      element = callbackRefElement.current;
+    } else if (refOrElement) {
+      if (refOrElement instanceof HTMLElement) {
+        element = refOrElement;
+      } else {
+        element = refOrElement.current;
+      }
+    }
+
+    if (lastReportRef.current && lastReportRef.current.element === element && lastReportRef.current.reporter === callSubscriber) {
+      return;
+    }
+
+    if (cleanupRef.current) {
+      cleanupRef.current(); // Making sure the cleanup is not called accidentally multiple times.
+
+      cleanupRef.current = null;
+    }
+
+    lastReportRef.current = {
+      reporter: callSubscriber,
+      element
+    }; // Only calling the subscriber, if there's an actual element to report.
+
+    if (element) {
+      cleanupRef.current = subscriber(element);
+    }
+  }, [refOrElement, subscriber]); // On each render, we check whether a ref changed, or if we got a new raw
+  // element.
+
+  (0, _element.useEffect)(() => {
+    // With this we're *technically* supporting cases where ref objects' current value changes, but only if there's a
+    // render accompanying that change as well.
+    // To guarantee we always have the right element, one must use the ref callback provided instead, but we support
+    // RefObjects to make the hook API more convenient in certain cases.
+    callSubscriber();
+  }, [callSubscriber]);
+  return (0, _element.useCallback)(element => {
+    callbackRefElement.current = element;
+    callSubscriber();
+  }, [callSubscriber]);
+}
+
+// We're only using the first element of the size sequences, until future versions of the spec solidify on how
+// exactly it'll be used for fragments in multi-column scenarios:
+// From the spec:
+// > The box size properties are exposed as FrozenArray in order to support elements that have multiple fragments,
+// > which occur in multi-column scenarios. However the current definitions of content rect and border box do not
+// > mention how those boxes are affected by multi-column layout. In this spec, there will only be a single
+// > ResizeObserverSize returned in the FrozenArray, which will correspond to the dimensions of the first column.
+// > A future version of this spec will extend the returned FrozenArray to contain the per-fragment size information.
+// (https://drafts.csswg.org/resize-observer/#resize-observer-entry-interface)
+//
+// Also, testing these new box options revealed that in both Chrome and FF everything is returned in the callback,
+// regardless of the "box" option.
+// The spec states the following on this:
+// > This does not have any impact on which box dimensions are returned to the defined callback when the event
+// > is fired, it solely defines which box the author wishes to observe layout changes on.
+// (https://drafts.csswg.org/resize-observer/#resize-observer-interface)
+// I'm not exactly clear on what this means, especially when you consider a later section stating the following:
+// > This section is non-normative. An author may desire to observe more than one CSS box.
+// > In this case, author will need to use multiple ResizeObservers.
+// (https://drafts.csswg.org/resize-observer/#resize-observer-interface)
+// Which is clearly not how current browser implementations behave, and seems to contradict the previous quote.
+// For this reason I decided to only return the requested size,
+// even though it seems we have access to results for all box types.
+// This also means that we get to keep the current api, being able to return a simple { width, height } pair,
+// regardless of box option.
+const extractSize = (entry, boxProp, sizeType) => {
+  if (!entry[boxProp]) {
+    if (boxProp === 'contentBoxSize') {
+      // The dimensions in `contentBoxSize` and `contentRect` are equivalent according to the spec.
+      // See the 6th step in the description for the RO algorithm:
+      // https://drafts.csswg.org/resize-observer/#create-and-populate-resizeobserverentry-h
+      // > Set this.contentRect to logical this.contentBoxSize given target and observedBox of "content-box".
+      // In real browser implementations of course these objects differ, but the width/height values should be equivalent.
+      return entry.contentRect[sizeType === 'inlineSize' ? 'width' : 'height'];
+    }
+
+    return undefined;
+  } // A couple bytes smaller than calling Array.isArray() and just as effective here.
+
+
+  return entry[boxProp][0] ? entry[boxProp][0][sizeType] : // TS complains about this, because the RO entry type follows the spec and does not reflect Firefox's current
+  // behaviour of returning objects instead of arrays for `borderBoxSize` and `contentBoxSize`.
+  // @ts-ignore
+  entry[boxProp][sizeType];
+};
+
+function useResizeObserver() {
+  let opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  // Saving the callback as a ref. With this, I don't need to put onResize in the
+  // effect dep array, and just passing in an anonymous function without memoising
+  // will not reinstantiate the hook's ResizeObserver.
+  const onResize = opts.onResize;
+  const onResizeRef = (0, _element.useRef)(undefined);
+  onResizeRef.current = onResize;
+  const round = opts.round || Math.round; // Using a single instance throughout the hook's lifetime
+
+  const resizeObserverRef = (0, _element.useRef)();
+  const [size, setSize] = (0, _element.useState)({
+    width: undefined,
+    height: undefined
+  }); // In certain edge cases the RO might want to report a size change just after
+  // the component unmounted.
+
+  const didUnmount = (0, _element.useRef)(false);
+  (0, _element.useEffect)(() => {
+    return () => {
+      didUnmount.current = true;
+    };
+  }, []); // Using a ref to track the previous width / height to avoid unnecessary renders.
+
+  const previous = (0, _element.useRef)({
+    width: undefined,
+    height: undefined
+  }); // This block is kinda like a useEffect, only it's called whenever a new
+  // element could be resolved based on the ref option. It also has a cleanup
+  // function.
+
+  const refCallback = useResolvedElement((0, _element.useCallback)(element => {
+    // We only use a single Resize Observer instance, and we're instantiating it on demand, only once there's something to observe.
+    // This instance is also recreated when the `box` option changes, so that a new observation is fired if there was a previously observed element with a different box option.
+    if (!resizeObserverRef.current || resizeObserverRef.current.box !== opts.box || resizeObserverRef.current.round !== round) {
+      resizeObserverRef.current = {
+        box: opts.box,
+        round,
+        instance: new ResizeObserver(entries => {
+          const entry = entries[0];
+          let boxProp = 'borderBoxSize';
+
+          if (opts.box === 'border-box') {
+            boxProp = 'borderBoxSize';
+          } else {
+            boxProp = opts.box === 'device-pixel-content-box' ? 'devicePixelContentBoxSize' : 'contentBoxSize';
+          }
+
+          const reportedWidth = extractSize(entry, boxProp, 'inlineSize');
+          const reportedHeight = extractSize(entry, boxProp, 'blockSize');
+          const newWidth = reportedWidth ? round(reportedWidth) : undefined;
+          const newHeight = reportedHeight ? round(reportedHeight) : undefined;
+
+          if (previous.current.width !== newWidth || previous.current.height !== newHeight) {
+            const newSize = {
+              width: newWidth,
+              height: newHeight
+            };
+            previous.current.width = newWidth;
+            previous.current.height = newHeight;
+
+            if (onResizeRef.current) {
+              onResizeRef.current(newSize);
+            } else if (!didUnmount.current) {
+              setSize(newSize);
+            }
+          }
+        })
+      };
+    }
+
+    resizeObserverRef.current.instance.observe(element, {
+      box: opts.box
+    });
+    return () => {
+      if (resizeObserverRef.current) {
+        resizeObserverRef.current.instance.unobserve(element);
+      }
+    };
+  }, [opts.box, round]), opts.ref);
+  return (0, _element.useMemo)(() => ({
+    ref: refCallback,
+    width: size.width,
+    height: size.height
+  }), [refCallback, size ? size.width : null, size ? size.height : null]);
+}
 /**
  * Hook which allows to listen the resize event of any target element when it changes sizes.
- * _Note: `useResizeObserver` will report `null` until after first render_
- *
- * Simply a re-export of `react-resize-aware` so refer to its documentation <https://github.com/FezVrasta/react-resize-aware>
- * for more details.
- *
- * @see https://github.com/FezVrasta/react-resize-aware
+ * _Note: `useResizeObserver` will report `null` until after first render.
  *
  * @example
  *
@@ -36,8 +219,36 @@ var _reactResizeAware = _interopRequireDefault(require("react-resize-aware"));
  * 	);
  * };
  * ```
- *
  */
-var _default = _reactResizeAware.default;
-exports.default = _default;
+
+
+function useResizeAware() {
+  const {
+    ref,
+    width,
+    height
+  } = useResizeObserver();
+  const sizes = (0, _element.useMemo)(() => {
+    return {
+      width: width !== null && width !== void 0 ? width : null,
+      height: height !== null && height !== void 0 ? height : null
+    };
+  }, [width, height]);
+  const resizeListener = (0, _element.createElement)("div", {
+    style: {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      pointerEvents: 'none',
+      opacity: 0,
+      overflow: 'hidden',
+      zIndex: -1
+    },
+    "aria-hidden": "true",
+    ref: ref
+  });
+  return [resizeListener, sizes];
+}
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/compose/src/hooks/use-resize-observer/index.js"],"names":["useResizeAware"],"mappings":";;;;;;;;;AAGA;;AAHA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;eACeA,yB","sourcesContent":["/**\n * External dependencies\n */\nimport useResizeAware from 'react-resize-aware';\n\n/**\n * Hook which allows to listen the resize event of any target element when it changes sizes.\n * _Note: `useResizeObserver` will report `null` until after first render_\n *\n * Simply a re-export of `react-resize-aware` so refer to its documentation <https://github.com/FezVrasta/react-resize-aware>\n * for more details.\n *\n * @see https://github.com/FezVrasta/react-resize-aware\n *\n * @example\n *\n * ```js\n * const App = () => {\n * \tconst [ resizeListener, sizes ] = useResizeObserver();\n *\n * \treturn (\n * \t\t<div>\n * \t\t\t{ resizeListener }\n * \t\t\tYour content here\n * \t\t</div>\n * \t);\n * };\n * ```\n *\n */\nexport default useResizeAware;\n"]}
+{"version":3,"sources":["@wordpress/compose/src/hooks/use-resize-observer/index.tsx"],"names":["useResolvedElement","subscriber","refOrElement","callbackRefElement","lastReportRef","cleanupRef","callSubscriber","element","current","HTMLElement","reporter","extractSize","entry","boxProp","sizeType","contentRect","undefined","useResizeObserver","opts","onResize","onResizeRef","round","Math","resizeObserverRef","size","setSize","width","height","didUnmount","previous","refCallback","box","instance","ResizeObserver","entries","reportedWidth","reportedHeight","newWidth","newHeight","newSize","observe","unobserve","ref","useResizeAware","sizes","resizeListener","position","top","left","right","bottom","pointerEvents","opacity","overflow","zIndex"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport type { RefCallback, RefObject } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tuseMemo,\n\tuseRef,\n\tuseCallback,\n\tuseEffect,\n\tuseState,\n} from '@wordpress/element';\nimport type { WPElement } from '@wordpress/element';\n\ntype SubscriberCleanup = () => void;\ntype SubscriberResponse = SubscriberCleanup | void;\n\n// This of course could've been more streamlined with internal state instead of\n// refs, but then host hooks / components could not opt out of renders.\n// This could've been exported to its own module, but the current build doesn't\n// seem to work with module imports and I had no more time to spend on this...\nfunction useResolvedElement< T extends HTMLElement >(\n\tsubscriber: ( element: T ) => SubscriberResponse,\n\trefOrElement?: T | RefObject< T > | null\n): RefCallback< T > {\n\tconst callbackRefElement = useRef< T | null >( null );\n\tconst lastReportRef = useRef< {\n\t\treporter: () => void;\n\t\telement: T | null;\n\t} | null >( null );\n\tconst cleanupRef = useRef< SubscriberResponse | null >();\n\n\tconst callSubscriber = useCallback( () => {\n\t\tlet element = null;\n\t\tif ( callbackRefElement.current ) {\n\t\t\telement = callbackRefElement.current;\n\t\t} else if ( refOrElement ) {\n\t\t\tif ( refOrElement instanceof HTMLElement ) {\n\t\t\t\telement = refOrElement;\n\t\t\t} else {\n\t\t\t\telement = refOrElement.current;\n\t\t\t}\n\t\t}\n\n\t\tif (\n\t\t\tlastReportRef.current &&\n\t\t\tlastReportRef.current.element === element &&\n\t\t\tlastReportRef.current.reporter === callSubscriber\n\t\t) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ( cleanupRef.current ) {\n\t\t\tcleanupRef.current();\n\t\t\t// Making sure the cleanup is not called accidentally multiple times.\n\t\t\tcleanupRef.current = null;\n\t\t}\n\t\tlastReportRef.current = {\n\t\t\treporter: callSubscriber,\n\t\t\telement,\n\t\t};\n\n\t\t// Only calling the subscriber, if there's an actual element to report.\n\t\tif ( element ) {\n\t\t\tcleanupRef.current = subscriber( element );\n\t\t}\n\t}, [ refOrElement, subscriber ] );\n\n\t// On each render, we check whether a ref changed, or if we got a new raw\n\t// element.\n\tuseEffect( () => {\n\t\t// With this we're *technically* supporting cases where ref objects' current value changes, but only if there's a\n\t\t// render accompanying that change as well.\n\t\t// To guarantee we always have the right element, one must use the ref callback provided instead, but we support\n\t\t// RefObjects to make the hook API more convenient in certain cases.\n\t\tcallSubscriber();\n\t}, [ callSubscriber ] );\n\n\treturn useCallback< RefCallback< T > >(\n\t\t( element ) => {\n\t\t\tcallbackRefElement.current = element;\n\t\t\tcallSubscriber();\n\t\t},\n\t\t[ callSubscriber ]\n\t);\n}\n\ntype ObservedSize = {\n\twidth: number | undefined;\n\theight: number | undefined;\n};\n\ntype ResizeHandler = ( size: ObservedSize ) => void;\n\ntype HookResponse< T extends HTMLElement > = {\n\tref: RefCallback< T >;\n} & ObservedSize;\n\n// Declaring my own type here instead of using the one provided by TS (available since 4.2.2), because this way I'm not\n// forcing consumers to use a specific TS version.\ntype ResizeObserverBoxOptions =\n\t| 'border-box'\n\t| 'content-box'\n\t| 'device-pixel-content-box';\n\ndeclare global {\n\tinterface ResizeObserverEntry {\n\t\treadonly devicePixelContentBoxSize: ReadonlyArray< ResizeObserverSize >;\n\t}\n}\n\n// We're only using the first element of the size sequences, until future versions of the spec solidify on how\n// exactly it'll be used for fragments in multi-column scenarios:\n// From the spec:\n// > The box size properties are exposed as FrozenArray in order to support elements that have multiple fragments,\n// > which occur in multi-column scenarios. However the current definitions of content rect and border box do not\n// > mention how those boxes are affected by multi-column layout. In this spec, there will only be a single\n// > ResizeObserverSize returned in the FrozenArray, which will correspond to the dimensions of the first column.\n// > A future version of this spec will extend the returned FrozenArray to contain the per-fragment size information.\n// (https://drafts.csswg.org/resize-observer/#resize-observer-entry-interface)\n//\n// Also, testing these new box options revealed that in both Chrome and FF everything is returned in the callback,\n// regardless of the \"box\" option.\n// The spec states the following on this:\n// > This does not have any impact on which box dimensions are returned to the defined callback when the event\n// > is fired, it solely defines which box the author wishes to observe layout changes on.\n// (https://drafts.csswg.org/resize-observer/#resize-observer-interface)\n// I'm not exactly clear on what this means, especially when you consider a later section stating the following:\n// > This section is non-normative. An author may desire to observe more than one CSS box.\n// > In this case, author will need to use multiple ResizeObservers.\n// (https://drafts.csswg.org/resize-observer/#resize-observer-interface)\n// Which is clearly not how current browser implementations behave, and seems to contradict the previous quote.\n// For this reason I decided to only return the requested size,\n// even though it seems we have access to results for all box types.\n// This also means that we get to keep the current api, being able to return a simple { width, height } pair,\n// regardless of box option.\nconst extractSize = (\n\tentry: ResizeObserverEntry,\n\tboxProp: 'borderBoxSize' | 'contentBoxSize' | 'devicePixelContentBoxSize',\n\tsizeType: keyof ResizeObserverSize\n): number | undefined => {\n\tif ( ! entry[ boxProp ] ) {\n\t\tif ( boxProp === 'contentBoxSize' ) {\n\t\t\t// The dimensions in `contentBoxSize` and `contentRect` are equivalent according to the spec.\n\t\t\t// See the 6th step in the description for the RO algorithm:\n\t\t\t// https://drafts.csswg.org/resize-observer/#create-and-populate-resizeobserverentry-h\n\t\t\t// > Set this.contentRect to logical this.contentBoxSize given target and observedBox of \"content-box\".\n\t\t\t// In real browser implementations of course these objects differ, but the width/height values should be equivalent.\n\t\t\treturn entry.contentRect[\n\t\t\t\tsizeType === 'inlineSize' ? 'width' : 'height'\n\t\t\t];\n\t\t}\n\n\t\treturn undefined;\n\t}\n\n\t// A couple bytes smaller than calling Array.isArray() and just as effective here.\n\treturn entry[ boxProp ][ 0 ]\n\t\t? entry[ boxProp ][ 0 ][ sizeType ]\n\t\t: // TS complains about this, because the RO entry type follows the spec and does not reflect Firefox's current\n\t\t  // behaviour of returning objects instead of arrays for `borderBoxSize` and `contentBoxSize`.\n\t\t  // @ts-ignore\n\t\t  entry[ boxProp ][ sizeType ];\n};\n\ntype RoundingFunction = ( n: number ) => number;\n\nfunction useResizeObserver< T extends HTMLElement >(\n\topts: {\n\t\tref?: RefObject< T > | T | null | undefined;\n\t\tonResize?: ResizeHandler;\n\t\tbox?: ResizeObserverBoxOptions;\n\t\tround?: RoundingFunction;\n\t} = {}\n): HookResponse< T > {\n\t// Saving the callback as a ref. With this, I don't need to put onResize in the\n\t// effect dep array, and just passing in an anonymous function without memoising\n\t// will not reinstantiate the hook's ResizeObserver.\n\tconst onResize = opts.onResize;\n\tconst onResizeRef = useRef< ResizeHandler | undefined >( undefined );\n\tonResizeRef.current = onResize;\n\tconst round = opts.round || Math.round;\n\n\t// Using a single instance throughout the hook's lifetime\n\tconst resizeObserverRef = useRef< {\n\t\tbox?: ResizeObserverBoxOptions;\n\t\tround?: RoundingFunction;\n\t\tinstance: ResizeObserver;\n\t} >();\n\n\tconst [ size, setSize ] = useState< {\n\t\twidth?: number;\n\t\theight?: number;\n\t} >( {\n\t\twidth: undefined,\n\t\theight: undefined,\n\t} );\n\n\t// In certain edge cases the RO might want to report a size change just after\n\t// the component unmounted.\n\tconst didUnmount = useRef( false );\n\tuseEffect( () => {\n\t\treturn () => {\n\t\t\tdidUnmount.current = true;\n\t\t};\n\t}, [] );\n\n\t// Using a ref to track the previous width / height to avoid unnecessary renders.\n\tconst previous: {\n\t\tcurrent: {\n\t\t\twidth?: number;\n\t\t\theight?: number;\n\t\t};\n\t} = useRef( {\n\t\twidth: undefined,\n\t\theight: undefined,\n\t} );\n\n\t// This block is kinda like a useEffect, only it's called whenever a new\n\t// element could be resolved based on the ref option. It also has a cleanup\n\t// function.\n\tconst refCallback = useResolvedElement< T >(\n\t\tuseCallback(\n\t\t\t( element ) => {\n\t\t\t\t// We only use a single Resize Observer instance, and we're instantiating it on demand, only once there's something to observe.\n\t\t\t\t// This instance is also recreated when the `box` option changes, so that a new observation is fired if there was a previously observed element with a different box option.\n\t\t\t\tif (\n\t\t\t\t\t! resizeObserverRef.current ||\n\t\t\t\t\tresizeObserverRef.current.box !== opts.box ||\n\t\t\t\t\tresizeObserverRef.current.round !== round\n\t\t\t\t) {\n\t\t\t\t\tresizeObserverRef.current = {\n\t\t\t\t\t\tbox: opts.box,\n\t\t\t\t\t\tround,\n\t\t\t\t\t\tinstance: new ResizeObserver( ( entries ) => {\n\t\t\t\t\t\t\tconst entry = entries[ 0 ];\n\n\t\t\t\t\t\t\tlet boxProp:\n\t\t\t\t\t\t\t\t| 'borderBoxSize'\n\t\t\t\t\t\t\t\t| 'contentBoxSize'\n\t\t\t\t\t\t\t\t| 'devicePixelContentBoxSize' = 'borderBoxSize';\n\t\t\t\t\t\t\tif ( opts.box === 'border-box' ) {\n\t\t\t\t\t\t\t\tboxProp = 'borderBoxSize';\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tboxProp =\n\t\t\t\t\t\t\t\t\topts.box === 'device-pixel-content-box'\n\t\t\t\t\t\t\t\t\t\t? 'devicePixelContentBoxSize'\n\t\t\t\t\t\t\t\t\t\t: 'contentBoxSize';\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\tconst reportedWidth = extractSize(\n\t\t\t\t\t\t\t\tentry,\n\t\t\t\t\t\t\t\tboxProp,\n\t\t\t\t\t\t\t\t'inlineSize'\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\tconst reportedHeight = extractSize(\n\t\t\t\t\t\t\t\tentry,\n\t\t\t\t\t\t\t\tboxProp,\n\t\t\t\t\t\t\t\t'blockSize'\n\t\t\t\t\t\t\t);\n\n\t\t\t\t\t\t\tconst newWidth = reportedWidth\n\t\t\t\t\t\t\t\t? round( reportedWidth )\n\t\t\t\t\t\t\t\t: undefined;\n\t\t\t\t\t\t\tconst newHeight = reportedHeight\n\t\t\t\t\t\t\t\t? round( reportedHeight )\n\t\t\t\t\t\t\t\t: undefined;\n\n\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\tprevious.current.width !== newWidth ||\n\t\t\t\t\t\t\t\tprevious.current.height !== newHeight\n\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\tconst newSize = {\n\t\t\t\t\t\t\t\t\twidth: newWidth,\n\t\t\t\t\t\t\t\t\theight: newHeight,\n\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t\tprevious.current.width = newWidth;\n\t\t\t\t\t\t\t\tprevious.current.height = newHeight;\n\t\t\t\t\t\t\t\tif ( onResizeRef.current ) {\n\t\t\t\t\t\t\t\t\tonResizeRef.current( newSize );\n\t\t\t\t\t\t\t\t} else if ( ! didUnmount.current ) {\n\t\t\t\t\t\t\t\t\tsetSize( newSize );\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t} ),\n\t\t\t\t\t};\n\t\t\t\t}\n\n\t\t\t\tresizeObserverRef.current.instance.observe( element, {\n\t\t\t\t\tbox: opts.box,\n\t\t\t\t} );\n\n\t\t\t\treturn () => {\n\t\t\t\t\tif ( resizeObserverRef.current ) {\n\t\t\t\t\t\tresizeObserverRef.current.instance.unobserve( element );\n\t\t\t\t\t}\n\t\t\t\t};\n\t\t\t},\n\t\t\t[ opts.box, round ]\n\t\t),\n\t\topts.ref\n\t);\n\n\treturn useMemo(\n\t\t() => ( {\n\t\t\tref: refCallback,\n\t\t\twidth: size.width,\n\t\t\theight: size.height,\n\t\t} ),\n\t\t[ refCallback, size ? size.width : null, size ? size.height : null ]\n\t);\n}\n\n/**\n * Hook which allows to listen the resize event of any target element when it changes sizes.\n * _Note: `useResizeObserver` will report `null` until after first render.\n *\n * @example\n *\n * ```js\n * const App = () => {\n * \tconst [ resizeListener, sizes ] = useResizeObserver();\n *\n * \treturn (\n * \t\t<div>\n * \t\t\t{ resizeListener }\n * \t\t\tYour content here\n * \t\t</div>\n * \t);\n * };\n * ```\n */\nexport default function useResizeAware(): [\n\tWPElement,\n\t{ width: number | null; height: number | null }\n] {\n\tconst { ref, width, height } = useResizeObserver();\n\tconst sizes = useMemo( () => {\n\t\treturn { width: width ?? null, height: height ?? null };\n\t}, [ width, height ] );\n\tconst resizeListener = (\n\t\t<div\n\t\t\tstyle={ {\n\t\t\t\tposition: 'absolute',\n\t\t\t\ttop: 0,\n\t\t\t\tleft: 0,\n\t\t\t\tright: 0,\n\t\t\t\tbottom: 0,\n\t\t\t\tpointerEvents: 'none',\n\t\t\t\topacity: 0,\n\t\t\t\toverflow: 'hidden',\n\t\t\t\tzIndex: -1,\n\t\t\t} }\n\t\t\taria-hidden=\"true\"\n\t\t\tref={ ref }\n\t\t/>\n\t);\n\treturn [ resizeListener, sizes ];\n}\n"]}

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

@@ -20,8 +20,6 @@ var _reactNative = require("react-native");
 /**
  * Hook which allows to listen the resize event of any target element when it changes sizes.
  *
- * @return {[JSX.Element, { width: number, height: number } | null]} An array of {Element} `resizeListener` and {?Object} `sizes` with properties `width` and `height`
- *
  * @example
  *
  * ```js

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;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 * @return {[JSX.Element, { width: number, height: number } | null]} An array of {Element} `resizeListener` and {?Object} `sizes` with properties `width` and `height`\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;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"]}