@wordpress/compose 7.32.0 → 7.32.1-next.47f435fc9.0

package/build/hooks/use-fixed-window-list/index.js

@@ -1,83 +1,69 @@
 "use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var use_fixed_window_list_exports = {};
+__export(use_fixed_window_list_exports, {
+  default: () => useFixedWindowList
 });
-exports.default = useFixedWindowList;
-var _element = require("@wordpress/element");
-var _dom = require("@wordpress/dom");
-var _keycodes = require("@wordpress/keycodes");
-var _debounce = require("../../utils/debounce");
-/**
- * WordPress dependencies
- */
-
-/**
- * Internal dependencies
- */
-
+module.exports = __toCommonJS(use_fixed_window_list_exports);
+var import_element = require("@wordpress/element");
+var import_dom = require("@wordpress/dom");
+var import_keycodes = require("@wordpress/keycodes");
+var import_debounce = require("../../utils/debounce");
 const DEFAULT_INIT_WINDOW_SIZE = 30;
-
-/**
- * @typedef {Object} WPFixedWindowList
- *
- * @property {number}                  visibleItems Items visible in the current viewport
- * @property {number}                  start        Start index of the window
- * @property {number}                  end          End index of the window
- * @property {(index:number)=>boolean} itemInView   Returns true if item is in the window
- */
-
-/**
- * @typedef {Object} WPFixedWindowListOptions
- *
- * @property {number}  [windowOverscan] Renders windowOverscan number of items before and after the calculated visible window.
- * @property {boolean} [useWindowing]   When false avoids calculating the window size
- * @property {number}  [initWindowSize] Initial window size to use on first render before we can calculate the window size.
- * @property {any}     [expandedState]  Used to recalculate the window size when the expanded state of a list changes.
- */
-
-/**
- *
- * @param {import('react').RefObject<HTMLElement>} elementRef Used to find the closest scroll container that contains element.
- * @param { number }                               itemHeight Fixed item height in pixels
- * @param { number }                               totalItems Total items in list
- * @param { WPFixedWindowListOptions }             [options]  Options object
- * @return {[ WPFixedWindowList, setFixedListWindow:(nextWindow:WPFixedWindowList)=>void]} Array with the fixed window list and setter
- */
 function useFixedWindowList(elementRef, itemHeight, totalItems, options) {
-  var _options$initWindowSi, _options$useWindowing;
-  const initWindowSize = (_options$initWindowSi = options?.initWindowSize) !== null && _options$initWindowSi !== void 0 ? _options$initWindowSi : DEFAULT_INIT_WINDOW_SIZE;
-  const useWindowing = (_options$useWindowing = options?.useWindowing) !== null && _options$useWindowing !== void 0 ? _options$useWindowing : true;
-  const [fixedListWindow, setFixedListWindow] = (0, _element.useState)({
+  const initWindowSize = options?.initWindowSize ?? DEFAULT_INIT_WINDOW_SIZE;
+  const useWindowing = options?.useWindowing ?? true;
+  const [fixedListWindow, setFixedListWindow] = (0, import_element.useState)({
     visibleItems: initWindowSize,
     start: 0,
     end: initWindowSize,
-    itemInView: (/** @type {number} */index) => {
+    itemInView: (index) => {
       return index >= 0 && index <= initWindowSize;
     }
   });
-  (0, _element.useLayoutEffect)(() => {
+  (0, import_element.useLayoutEffect)(() => {
     if (!useWindowing) {
       return;
     }
-    const scrollContainer = (0, _dom.getScrollContainer)(elementRef.current);
-    const measureWindow = (/** @type {boolean | undefined} */initRender) => {
-      var _options$windowOversc;
+    const scrollContainer = (0, import_dom.getScrollContainer)(elementRef.current);
+    const measureWindow = (initRender) => {
       if (!scrollContainer) {
         return;
       }
-      const visibleItems = Math.ceil(scrollContainer.clientHeight / itemHeight);
-      // Aim to keep opening list view fast, afterward we can optimize for scrolling.
-      const windowOverscan = initRender ? visibleItems : (_options$windowOversc = options?.windowOverscan) !== null && _options$windowOversc !== void 0 ? _options$windowOversc : visibleItems;
-      const firstViewableIndex = Math.floor(scrollContainer.scrollTop / itemHeight);
+      const visibleItems = Math.ceil(
+        scrollContainer.clientHeight / itemHeight
+      );
+      const windowOverscan = initRender ? visibleItems : options?.windowOverscan ?? visibleItems;
+      const firstViewableIndex = Math.floor(
+        scrollContainer.scrollTop / itemHeight
+      );
       const start = Math.max(0, firstViewableIndex - windowOverscan);
-      const end = Math.min(totalItems - 1, firstViewableIndex + visibleItems + windowOverscan);
-      setFixedListWindow(lastWindow => {
+      const end = Math.min(
+        totalItems - 1,
+        firstViewableIndex + visibleItems + windowOverscan
+      );
+      setFixedListWindow((lastWindow) => {
         const nextWindow = {
           visibleItems,
           start,
           end,
-          itemInView: (/** @type {number} */index) => {
+          itemInView: (index) => {
             return start <= index && index <= end;
           }
         };
@@ -88,55 +74,81 @@ function useFixedWindowList(elementRef, itemHeight, totalItems, options) {
       });
     };
     measureWindow(true);
-    const debounceMeasureList = (0, _debounce.debounce)(() => {
+    const debounceMeasureList = (0, import_debounce.debounce)(() => {
       measureWindow();
     }, 16);
-    scrollContainer?.addEventListener('scroll', debounceMeasureList);
-    scrollContainer?.ownerDocument?.defaultView?.addEventListener('resize', debounceMeasureList);
-    scrollContainer?.ownerDocument?.defaultView?.addEventListener('resize', debounceMeasureList);
+    scrollContainer?.addEventListener("scroll", debounceMeasureList);
+    scrollContainer?.ownerDocument?.defaultView?.addEventListener(
+      "resize",
+      debounceMeasureList
+    );
+    scrollContainer?.ownerDocument?.defaultView?.addEventListener(
+      "resize",
+      debounceMeasureList
+    );
     return () => {
-      scrollContainer?.removeEventListener('scroll', debounceMeasureList);
-      scrollContainer?.ownerDocument?.defaultView?.removeEventListener('resize', debounceMeasureList);
+      scrollContainer?.removeEventListener(
+        "scroll",
+        debounceMeasureList
+      );
+      scrollContainer?.ownerDocument?.defaultView?.removeEventListener(
+        "resize",
+        debounceMeasureList
+      );
     };
-  }, [itemHeight, elementRef, totalItems, options?.expandedState, options?.windowOverscan, useWindowing]);
-  (0, _element.useLayoutEffect)(() => {
+  }, [
+    itemHeight,
+    elementRef,
+    totalItems,
+    options?.expandedState,
+    options?.windowOverscan,
+    useWindowing
+  ]);
+  (0, import_element.useLayoutEffect)(() => {
     if (!useWindowing) {
       return;
     }
-    const scrollContainer = (0, _dom.getScrollContainer)(elementRef.current);
-    const handleKeyDown = (/** @type {KeyboardEvent} */event) => {
+    const scrollContainer = (0, import_dom.getScrollContainer)(elementRef.current);
+    const handleKeyDown = (event) => {
       switch (event.keyCode) {
-        case _keycodes.HOME:
-          {
-            return scrollContainer?.scrollTo({
-              top: 0
-            });
-          }
-        case _keycodes.END:
-          {
-            return scrollContainer?.scrollTo({
-              top: totalItems * itemHeight
-            });
-          }
-        case _keycodes.PAGEUP:
-          {
-            return scrollContainer?.scrollTo({
-              top: scrollContainer.scrollTop - fixedListWindow.visibleItems * itemHeight
-            });
-          }
-        case _keycodes.PAGEDOWN:
-          {
-            return scrollContainer?.scrollTo({
-              top: scrollContainer.scrollTop + fixedListWindow.visibleItems * itemHeight
-            });
-          }
+        case import_keycodes.HOME: {
+          return scrollContainer?.scrollTo({ top: 0 });
+        }
+        case import_keycodes.END: {
+          return scrollContainer?.scrollTo({
+            top: totalItems * itemHeight
+          });
+        }
+        case import_keycodes.PAGEUP: {
+          return scrollContainer?.scrollTo({
+            top: scrollContainer.scrollTop - fixedListWindow.visibleItems * itemHeight
+          });
+        }
+        case import_keycodes.PAGEDOWN: {
+          return scrollContainer?.scrollTo({
+            top: scrollContainer.scrollTop + fixedListWindow.visibleItems * itemHeight
+          });
+        }
       }
     };
-    scrollContainer?.ownerDocument?.defaultView?.addEventListener('keydown', handleKeyDown);
+    scrollContainer?.ownerDocument?.defaultView?.addEventListener(
+      "keydown",
+      handleKeyDown
+    );
     return () => {
-      scrollContainer?.ownerDocument?.defaultView?.removeEventListener('keydown', handleKeyDown);
+      scrollContainer?.ownerDocument?.defaultView?.removeEventListener(
+        "keydown",
+        handleKeyDown
+      );
     };
-  }, [totalItems, itemHeight, elementRef, fixedListWindow.visibleItems, useWindowing, options?.expandedState]);
+  }, [
+    totalItems,
+    itemHeight,
+    elementRef,
+    fixedListWindow.visibleItems,
+    useWindowing,
+    options?.expandedState
+  ]);
   return [fixedListWindow, setFixedListWindow];
 }
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/build/hooks/use-fixed-window-list/index.js.map

@@ -1 +1,7 @@
-{"version":3,"names":["_element","require","_dom","_keycodes","_debounce","DEFAULT_INIT_WINDOW_SIZE","useFixedWindowList","elementRef","itemHeight","totalItems","options","_options$initWindowSi","_options$useWindowing","initWindowSize","useWindowing","fixedListWindow","setFixedListWindow","useState","visibleItems","start","end","itemInView","index","useLayoutEffect","scrollContainer","getScrollContainer","current","measureWindow","initRender","_options$windowOversc","Math","ceil","clientHeight","windowOverscan","firstViewableIndex","floor","scrollTop","max","min","lastWindow","nextWindow","debounceMeasureList","debounce","addEventListener","ownerDocument","defaultView","removeEventListener","expandedState","handleKeyDown","event","keyCode","HOME","scrollTo","top","END","PAGEUP","PAGEDOWN"],"sources":["@wordpress/compose/src/hooks/use-fixed-window-list/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useState, useLayoutEffect } from '@wordpress/element';\nimport { getScrollContainer } from '@wordpress/dom';\nimport { PAGEUP, PAGEDOWN, HOME, END } from '@wordpress/keycodes';\n\n/**\n * Internal dependencies\n */\nimport { debounce } from '../../utils/debounce';\n\nconst DEFAULT_INIT_WINDOW_SIZE = 30;\n\n/**\n * @typedef {Object} WPFixedWindowList\n *\n * @property {number}                  visibleItems Items visible in the current viewport\n * @property {number}                  start        Start index of the window\n * @property {number}                  end          End index of the window\n * @property {(index:number)=>boolean} itemInView   Returns true if item is in the window\n */\n\n/**\n * @typedef {Object} WPFixedWindowListOptions\n *\n * @property {number}  [windowOverscan] Renders windowOverscan number of items before and after the calculated visible window.\n * @property {boolean} [useWindowing]   When false avoids calculating the window size\n * @property {number}  [initWindowSize] Initial window size to use on first render before we can calculate the window size.\n * @property {any}     [expandedState]  Used to recalculate the window size when the expanded state of a list changes.\n */\n\n/**\n *\n * @param {import('react').RefObject<HTMLElement>} elementRef Used to find the closest scroll container that contains element.\n * @param { number }                               itemHeight Fixed item height in pixels\n * @param { number }                               totalItems Total items in list\n * @param { WPFixedWindowListOptions }             [options]  Options object\n * @return {[ WPFixedWindowList, setFixedListWindow:(nextWindow:WPFixedWindowList)=>void]} Array with the fixed window list and setter\n */\nexport default function useFixedWindowList(\n\telementRef,\n\titemHeight,\n\ttotalItems,\n\toptions\n) {\n\tconst initWindowSize = options?.initWindowSize ?? DEFAULT_INIT_WINDOW_SIZE;\n\tconst useWindowing = options?.useWindowing ?? true;\n\n\tconst [ fixedListWindow, setFixedListWindow ] = useState( {\n\t\tvisibleItems: initWindowSize,\n\t\tstart: 0,\n\t\tend: initWindowSize,\n\t\titemInView: ( /** @type {number} */ index ) => {\n\t\t\treturn index >= 0 && index <= initWindowSize;\n\t\t},\n\t} );\n\n\tuseLayoutEffect( () => {\n\t\tif ( ! useWindowing ) {\n\t\t\treturn;\n\t\t}\n\t\tconst scrollContainer = getScrollContainer( elementRef.current );\n\t\tconst measureWindow = (\n\t\t\t/** @type {boolean | undefined} */ initRender\n\t\t) => {\n\t\t\tif ( ! scrollContainer ) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tconst visibleItems = Math.ceil(\n\t\t\t\tscrollContainer.clientHeight / itemHeight\n\t\t\t);\n\t\t\t// Aim to keep opening list view fast, afterward we can optimize for scrolling.\n\t\t\tconst windowOverscan = initRender\n\t\t\t\t? visibleItems\n\t\t\t\t: options?.windowOverscan ?? visibleItems;\n\t\t\tconst firstViewableIndex = Math.floor(\n\t\t\t\tscrollContainer.scrollTop / itemHeight\n\t\t\t);\n\t\t\tconst start = Math.max( 0, firstViewableIndex - windowOverscan );\n\t\t\tconst end = Math.min(\n\t\t\t\ttotalItems - 1,\n\t\t\t\tfirstViewableIndex + visibleItems + windowOverscan\n\t\t\t);\n\t\t\tsetFixedListWindow( ( lastWindow ) => {\n\t\t\t\tconst nextWindow = {\n\t\t\t\t\tvisibleItems,\n\t\t\t\t\tstart,\n\t\t\t\t\tend,\n\t\t\t\t\titemInView: ( /** @type {number} */ index ) => {\n\t\t\t\t\t\treturn start <= index && index <= end;\n\t\t\t\t\t},\n\t\t\t\t};\n\t\t\t\tif (\n\t\t\t\t\tlastWindow.start !== nextWindow.start ||\n\t\t\t\t\tlastWindow.end !== nextWindow.end ||\n\t\t\t\t\tlastWindow.visibleItems !== nextWindow.visibleItems\n\t\t\t\t) {\n\t\t\t\t\treturn nextWindow;\n\t\t\t\t}\n\t\t\t\treturn lastWindow;\n\t\t\t} );\n\t\t};\n\n\t\tmeasureWindow( true );\n\t\tconst debounceMeasureList = debounce( () => {\n\t\t\tmeasureWindow();\n\t\t}, 16 );\n\t\tscrollContainer?.addEventListener( 'scroll', debounceMeasureList );\n\t\tscrollContainer?.ownerDocument?.defaultView?.addEventListener(\n\t\t\t'resize',\n\t\t\tdebounceMeasureList\n\t\t);\n\t\tscrollContainer?.ownerDocument?.defaultView?.addEventListener(\n\t\t\t'resize',\n\t\t\tdebounceMeasureList\n\t\t);\n\n\t\treturn () => {\n\t\t\tscrollContainer?.removeEventListener(\n\t\t\t\t'scroll',\n\t\t\t\tdebounceMeasureList\n\t\t\t);\n\t\t\tscrollContainer?.ownerDocument?.defaultView?.removeEventListener(\n\t\t\t\t'resize',\n\t\t\t\tdebounceMeasureList\n\t\t\t);\n\t\t};\n\t}, [\n\t\titemHeight,\n\t\telementRef,\n\t\ttotalItems,\n\t\toptions?.expandedState,\n\t\toptions?.windowOverscan,\n\t\tuseWindowing,\n\t] );\n\n\tuseLayoutEffect( () => {\n\t\tif ( ! useWindowing ) {\n\t\t\treturn;\n\t\t}\n\t\tconst scrollContainer = getScrollContainer( elementRef.current );\n\t\tconst handleKeyDown = ( /** @type {KeyboardEvent} */ event ) => {\n\t\t\tswitch ( event.keyCode ) {\n\t\t\t\tcase HOME: {\n\t\t\t\t\treturn scrollContainer?.scrollTo( { top: 0 } );\n\t\t\t\t}\n\t\t\t\tcase END: {\n\t\t\t\t\treturn scrollContainer?.scrollTo( {\n\t\t\t\t\t\ttop: totalItems * itemHeight,\n\t\t\t\t\t} );\n\t\t\t\t}\n\t\t\t\tcase PAGEUP: {\n\t\t\t\t\treturn scrollContainer?.scrollTo( {\n\t\t\t\t\t\ttop:\n\t\t\t\t\t\t\tscrollContainer.scrollTop -\n\t\t\t\t\t\t\tfixedListWindow.visibleItems * itemHeight,\n\t\t\t\t\t} );\n\t\t\t\t}\n\t\t\t\tcase PAGEDOWN: {\n\t\t\t\t\treturn scrollContainer?.scrollTo( {\n\t\t\t\t\t\ttop:\n\t\t\t\t\t\t\tscrollContainer.scrollTop +\n\t\t\t\t\t\t\tfixedListWindow.visibleItems * itemHeight,\n\t\t\t\t\t} );\n\t\t\t\t}\n\t\t\t}\n\t\t};\n\t\tscrollContainer?.ownerDocument?.defaultView?.addEventListener(\n\t\t\t'keydown',\n\t\t\thandleKeyDown\n\t\t);\n\t\treturn () => {\n\t\t\tscrollContainer?.ownerDocument?.defaultView?.removeEventListener(\n\t\t\t\t'keydown',\n\t\t\t\thandleKeyDown\n\t\t\t);\n\t\t};\n\t}, [\n\t\ttotalItems,\n\t\titemHeight,\n\t\telementRef,\n\t\tfixedListWindow.visibleItems,\n\t\tuseWindowing,\n\t\toptions?.expandedState,\n\t] );\n\n\treturn [ fixedListWindow, setFixedListWindow ];\n}\n"],"mappings":";;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,IAAA,GAAAD,OAAA;AACA,IAAAE,SAAA,GAAAF,OAAA;AAKA,IAAAG,SAAA,GAAAH,OAAA;AAVA;AACA;AACA;;AAKA;AACA;AACA;;AAGA,MAAMI,wBAAwB,GAAG,EAAE;;AAEnC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACe,SAASC,kBAAkBA,CACzCC,UAAU,EACVC,UAAU,EACVC,UAAU,EACVC,OAAO,EACN;EAAA,IAAAC,qBAAA,EAAAC,qBAAA;EACD,MAAMC,cAAc,IAAAF,qBAAA,GAAGD,OAAO,EAAEG,cAAc,cAAAF,qBAAA,cAAAA,qBAAA,GAAIN,wBAAwB;EAC1E,MAAMS,YAAY,IAAAF,qBAAA,GAAGF,OAAO,EAAEI,YAAY,cAAAF,qBAAA,cAAAA,qBAAA,GAAI,IAAI;EAElD,MAAM,CAAEG,eAAe,EAAEC,kBAAkB,CAAE,GAAG,IAAAC,iBAAQ,EAAE;IACzDC,YAAY,EAAEL,cAAc;IAC5BM,KAAK,EAAE,CAAC;IACRC,GAAG,EAAEP,cAAc;IACnBQ,UAAU,EAAEA,CAAE,qBAAsBC,KAAK,KAAM;MAC9C,OAAOA,KAAK,IAAI,CAAC,IAAIA,KAAK,IAAIT,cAAc;IAC7C;EACD,CAAE,CAAC;EAEH,IAAAU,wBAAe,EAAE,MAAM;IACtB,IAAK,CAAET,YAAY,EAAG;MACrB;IACD;IACA,MAAMU,eAAe,GAAG,IAAAC,uBAAkB,EAAElB,UAAU,CAACmB,OAAQ,CAAC;IAChE,MAAMC,aAAa,GAAGA,CACrB,kCAAmCC,UAAU,KACzC;MAAA,IAAAC,qBAAA;MACJ,IAAK,CAAEL,eAAe,EAAG;QACxB;MACD;MACA,MAAMN,YAAY,GAAGY,IAAI,CAACC,IAAI,CAC7BP,eAAe,CAACQ,YAAY,GAAGxB,UAChC,CAAC;MACD;MACA,MAAMyB,cAAc,GAAGL,UAAU,GAC9BV,YAAY,IAAAW,qBAAA,GACZnB,OAAO,EAAEuB,cAAc,cAAAJ,qBAAA,cAAAA,qBAAA,GAAIX,YAAY;MAC1C,MAAMgB,kBAAkB,GAAGJ,IAAI,CAACK,KAAK,CACpCX,eAAe,CAACY,SAAS,GAAG5B,UAC7B,CAAC;MACD,MAAMW,KAAK,GAAGW,IAAI,CAACO,GAAG,CAAE,CAAC,EAAEH,kBAAkB,GAAGD,cAAe,CAAC;MAChE,MAAMb,GAAG,GAAGU,IAAI,CAACQ,GAAG,CACnB7B,UAAU,GAAG,CAAC,EACdyB,kBAAkB,GAAGhB,YAAY,GAAGe,cACrC,CAAC;MACDjB,kBAAkB,CAAIuB,UAAU,IAAM;QACrC,MAAMC,UAAU,GAAG;UAClBtB,YAAY;UACZC,KAAK;UACLC,GAAG;UACHC,UAAU,EAAEA,CAAE,qBAAsBC,KAAK,KAAM;YAC9C,OAAOH,KAAK,IAAIG,KAAK,IAAIA,KAAK,IAAIF,GAAG;UACtC;QACD,CAAC;QACD,IACCmB,UAAU,CAACpB,KAAK,KAAKqB,UAAU,CAACrB,KAAK,IACrCoB,UAAU,CAACnB,GAAG,KAAKoB,UAAU,CAACpB,GAAG,IACjCmB,UAAU,CAACrB,YAAY,KAAKsB,UAAU,CAACtB,YAAY,EAClD;UACD,OAAOsB,UAAU;QAClB;QACA,OAAOD,UAAU;MAClB,CAAE,CAAC;IACJ,CAAC;IAEDZ,aAAa,CAAE,IAAK,CAAC;IACrB,MAAMc,mBAAmB,GAAG,IAAAC,kBAAQ,EAAE,MAAM;MAC3Cf,aAAa,CAAC,CAAC;IAChB,CAAC,EAAE,EAAG,CAAC;IACPH,eAAe,EAAEmB,gBAAgB,CAAE,QAAQ,EAAEF,mBAAoB,CAAC;IAClEjB,eAAe,EAAEoB,aAAa,EAAEC,WAAW,EAAEF,gBAAgB,CAC5D,QAAQ,EACRF,mBACD,CAAC;IACDjB,eAAe,EAAEoB,aAAa,EAAEC,WAAW,EAAEF,gBAAgB,CAC5D,QAAQ,EACRF,mBACD,CAAC;IAED,OAAO,MAAM;MACZjB,eAAe,EAAEsB,mBAAmB,CACnC,QAAQ,EACRL,mBACD,CAAC;MACDjB,eAAe,EAAEoB,aAAa,EAAEC,WAAW,EAAEC,mBAAmB,CAC/D,QAAQ,EACRL,mBACD,CAAC;IACF,CAAC;EACF,CAAC,EAAE,CACFjC,UAAU,EACVD,UAAU,EACVE,UAAU,EACVC,OAAO,EAAEqC,aAAa,EACtBrC,OAAO,EAAEuB,cAAc,EACvBnB,YAAY,CACX,CAAC;EAEH,IAAAS,wBAAe,EAAE,MAAM;IACtB,IAAK,CAAET,YAAY,EAAG;MACrB;IACD;IACA,MAAMU,eAAe,GAAG,IAAAC,uBAAkB,EAAElB,UAAU,CAACmB,OAAQ,CAAC;IAChE,MAAMsB,aAAa,GAAGA,CAAE,4BAA6BC,KAAK,KAAM;MAC/D,QAASA,KAAK,CAACC,OAAO;QACrB,KAAKC,cAAI;UAAE;YACV,OAAO3B,eAAe,EAAE4B,QAAQ,CAAE;cAAEC,GAAG,EAAE;YAAE,CAAE,CAAC;UAC/C;QACA,KAAKC,aAAG;UAAE;YACT,OAAO9B,eAAe,EAAE4B,QAAQ,CAAE;cACjCC,GAAG,EAAE5C,UAAU,GAAGD;YACnB,CAAE,CAAC;UACJ;QACA,KAAK+C,gBAAM;UAAE;YACZ,OAAO/B,eAAe,EAAE4B,QAAQ,CAAE;cACjCC,GAAG,EACF7B,eAAe,CAACY,SAAS,GACzBrB,eAAe,CAACG,YAAY,GAAGV;YACjC,CAAE,CAAC;UACJ;QACA,KAAKgD,kBAAQ;UAAE;YACd,OAAOhC,eAAe,EAAE4B,QAAQ,CAAE;cACjCC,GAAG,EACF7B,eAAe,CAACY,SAAS,GACzBrB,eAAe,CAACG,YAAY,GAAGV;YACjC,CAAE,CAAC;UACJ;MACD;IACD,CAAC;IACDgB,eAAe,EAAEoB,aAAa,EAAEC,WAAW,EAAEF,gBAAgB,CAC5D,SAAS,EACTK,aACD,CAAC;IACD,OAAO,MAAM;MACZxB,eAAe,EAAEoB,aAAa,EAAEC,WAAW,EAAEC,mBAAmB,CAC/D,SAAS,EACTE,aACD,CAAC;IACF,CAAC;EACF,CAAC,EAAE,CACFvC,UAAU,EACVD,UAAU,EACVD,UAAU,EACVQ,eAAe,CAACG,YAAY,EAC5BJ,YAAY,EACZJ,OAAO,EAAEqC,aAAa,CACrB,CAAC;EAEH,OAAO,CAAEhC,eAAe,EAAEC,kBAAkB,CAAE;AAC/C","ignoreList":[]}
+{
+  "version": 3,
+  "sources": ["../../../src/hooks/use-fixed-window-list/index.js"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useState, useLayoutEffect } from '@wordpress/element';\nimport { getScrollContainer } from '@wordpress/dom';\nimport { PAGEUP, PAGEDOWN, HOME, END } from '@wordpress/keycodes';\n\n/**\n * Internal dependencies\n */\nimport { debounce } from '../../utils/debounce';\n\nconst DEFAULT_INIT_WINDOW_SIZE = 30;\n\n/**\n * @typedef {Object} WPFixedWindowList\n *\n * @property {number}                  visibleItems Items visible in the current viewport\n * @property {number}                  start        Start index of the window\n * @property {number}                  end          End index of the window\n * @property {(index:number)=>boolean} itemInView   Returns true if item is in the window\n */\n\n/**\n * @typedef {Object} WPFixedWindowListOptions\n *\n * @property {number}  [windowOverscan] Renders windowOverscan number of items before and after the calculated visible window.\n * @property {boolean} [useWindowing]   When false avoids calculating the window size\n * @property {number}  [initWindowSize] Initial window size to use on first render before we can calculate the window size.\n * @property {any}     [expandedState]  Used to recalculate the window size when the expanded state of a list changes.\n */\n\n/**\n *\n * @param {import('react').RefObject<HTMLElement>} elementRef Used to find the closest scroll container that contains element.\n * @param { number }                               itemHeight Fixed item height in pixels\n * @param { number }                               totalItems Total items in list\n * @param { WPFixedWindowListOptions }             [options]  Options object\n * @return {[ WPFixedWindowList, setFixedListWindow:(nextWindow:WPFixedWindowList)=>void]} Array with the fixed window list and setter\n */\nexport default function useFixedWindowList(\n\telementRef,\n\titemHeight,\n\ttotalItems,\n\toptions\n) {\n\tconst initWindowSize = options?.initWindowSize ?? DEFAULT_INIT_WINDOW_SIZE;\n\tconst useWindowing = options?.useWindowing ?? true;\n\n\tconst [ fixedListWindow, setFixedListWindow ] = useState( {\n\t\tvisibleItems: initWindowSize,\n\t\tstart: 0,\n\t\tend: initWindowSize,\n\t\titemInView: ( /** @type {number} */ index ) => {\n\t\t\treturn index >= 0 && index <= initWindowSize;\n\t\t},\n\t} );\n\n\tuseLayoutEffect( () => {\n\t\tif ( ! useWindowing ) {\n\t\t\treturn;\n\t\t}\n\t\tconst scrollContainer = getScrollContainer( elementRef.current );\n\t\tconst measureWindow = (\n\t\t\t/** @type {boolean | undefined} */ initRender\n\t\t) => {\n\t\t\tif ( ! scrollContainer ) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tconst visibleItems = Math.ceil(\n\t\t\t\tscrollContainer.clientHeight / itemHeight\n\t\t\t);\n\t\t\t// Aim to keep opening list view fast, afterward we can optimize for scrolling.\n\t\t\tconst windowOverscan = initRender\n\t\t\t\t? visibleItems\n\t\t\t\t: options?.windowOverscan ?? visibleItems;\n\t\t\tconst firstViewableIndex = Math.floor(\n\t\t\t\tscrollContainer.scrollTop / itemHeight\n\t\t\t);\n\t\t\tconst start = Math.max( 0, firstViewableIndex - windowOverscan );\n\t\t\tconst end = Math.min(\n\t\t\t\ttotalItems - 1,\n\t\t\t\tfirstViewableIndex + visibleItems + windowOverscan\n\t\t\t);\n\t\t\tsetFixedListWindow( ( lastWindow ) => {\n\t\t\t\tconst nextWindow = {\n\t\t\t\t\tvisibleItems,\n\t\t\t\t\tstart,\n\t\t\t\t\tend,\n\t\t\t\t\titemInView: ( /** @type {number} */ index ) => {\n\t\t\t\t\t\treturn start <= index && index <= end;\n\t\t\t\t\t},\n\t\t\t\t};\n\t\t\t\tif (\n\t\t\t\t\tlastWindow.start !== nextWindow.start ||\n\t\t\t\t\tlastWindow.end !== nextWindow.end ||\n\t\t\t\t\tlastWindow.visibleItems !== nextWindow.visibleItems\n\t\t\t\t) {\n\t\t\t\t\treturn nextWindow;\n\t\t\t\t}\n\t\t\t\treturn lastWindow;\n\t\t\t} );\n\t\t};\n\n\t\tmeasureWindow( true );\n\t\tconst debounceMeasureList = debounce( () => {\n\t\t\tmeasureWindow();\n\t\t}, 16 );\n\t\tscrollContainer?.addEventListener( 'scroll', debounceMeasureList );\n\t\tscrollContainer?.ownerDocument?.defaultView?.addEventListener(\n\t\t\t'resize',\n\t\t\tdebounceMeasureList\n\t\t);\n\t\tscrollContainer?.ownerDocument?.defaultView?.addEventListener(\n\t\t\t'resize',\n\t\t\tdebounceMeasureList\n\t\t);\n\n\t\treturn () => {\n\t\t\tscrollContainer?.removeEventListener(\n\t\t\t\t'scroll',\n\t\t\t\tdebounceMeasureList\n\t\t\t);\n\t\t\tscrollContainer?.ownerDocument?.defaultView?.removeEventListener(\n\t\t\t\t'resize',\n\t\t\t\tdebounceMeasureList\n\t\t\t);\n\t\t};\n\t}, [\n\t\titemHeight,\n\t\telementRef,\n\t\ttotalItems,\n\t\toptions?.expandedState,\n\t\toptions?.windowOverscan,\n\t\tuseWindowing,\n\t] );\n\n\tuseLayoutEffect( () => {\n\t\tif ( ! useWindowing ) {\n\t\t\treturn;\n\t\t}\n\t\tconst scrollContainer = getScrollContainer( elementRef.current );\n\t\tconst handleKeyDown = ( /** @type {KeyboardEvent} */ event ) => {\n\t\t\tswitch ( event.keyCode ) {\n\t\t\t\tcase HOME: {\n\t\t\t\t\treturn scrollContainer?.scrollTo( { top: 0 } );\n\t\t\t\t}\n\t\t\t\tcase END: {\n\t\t\t\t\treturn scrollContainer?.scrollTo( {\n\t\t\t\t\t\ttop: totalItems * itemHeight,\n\t\t\t\t\t} );\n\t\t\t\t}\n\t\t\t\tcase PAGEUP: {\n\t\t\t\t\treturn scrollContainer?.scrollTo( {\n\t\t\t\t\t\ttop:\n\t\t\t\t\t\t\tscrollContainer.scrollTop -\n\t\t\t\t\t\t\tfixedListWindow.visibleItems * itemHeight,\n\t\t\t\t\t} );\n\t\t\t\t}\n\t\t\t\tcase PAGEDOWN: {\n\t\t\t\t\treturn scrollContainer?.scrollTo( {\n\t\t\t\t\t\ttop:\n\t\t\t\t\t\t\tscrollContainer.scrollTop +\n\t\t\t\t\t\t\tfixedListWindow.visibleItems * itemHeight,\n\t\t\t\t\t} );\n\t\t\t\t}\n\t\t\t}\n\t\t};\n\t\tscrollContainer?.ownerDocument?.defaultView?.addEventListener(\n\t\t\t'keydown',\n\t\t\thandleKeyDown\n\t\t);\n\t\treturn () => {\n\t\t\tscrollContainer?.ownerDocument?.defaultView?.removeEventListener(\n\t\t\t\t'keydown',\n\t\t\t\thandleKeyDown\n\t\t\t);\n\t\t};\n\t}, [\n\t\ttotalItems,\n\t\titemHeight,\n\t\telementRef,\n\t\tfixedListWindow.visibleItems,\n\t\tuseWindowing,\n\t\toptions?.expandedState,\n\t] );\n\n\treturn [ fixedListWindow, setFixedListWindow ];\n}\n"],
+  "mappings": "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",
+  "names": []
+}

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

@@ -1,52 +1,42 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var use_focus_on_mount_exports = {};
+__export(use_focus_on_mount_exports, {
+  default: () => useFocusOnMount
 });
-exports.default = useFocusOnMount;
-var _element = require("@wordpress/element");
-var _dom = require("@wordpress/dom");
-var _useRefEffect = _interopRequireDefault(require("../use-ref-effect"));
-/**
- * WordPress dependencies
- */
-
-/**
- * Internal dependencies
- */
-
-/**
- * Hook used to focus the first tabbable element on mount.
- *
- * @param {boolean | 'firstElement'} focusOnMount Focus on mount mode.
- * @return {import('react').RefCallback<HTMLElement>} Ref callback.
- *
- * @example
- * ```js
- * import { useFocusOnMount } from '@wordpress/compose';
- *
- * const WithFocusOnMount = () => {
- *     const ref = useFocusOnMount()
- *     return (
- *         <div ref={ ref }>
- *             <Button />
- *             <Button />
- *         </div>
- *     );
- * }
- * ```
- */
-function useFocusOnMount(focusOnMount = 'firstElement') {
-  const focusOnMountRef = (0, _element.useRef)(focusOnMount);
-
-  /**
-   * Sets focus on a DOM element.
-   *
-   * @param {HTMLElement} target The DOM element to set focus to.
-   * @return {void}
-   */
-  const setFocus = target => {
+module.exports = __toCommonJS(use_focus_on_mount_exports);
+var import_element = require("@wordpress/element");
+var import_dom = require("@wordpress/dom");
+var import_use_ref_effect = __toESM(require("../use-ref-effect"));
+function useFocusOnMount(focusOnMount = "firstElement") {
+  const focusOnMountRef = (0, import_element.useRef)(focusOnMount);
+  const setFocus = (target) => {
     target.focus({
       // When focusing newly mounted dialogs,
       // the position of the popover is often not right on the first render
@@ -54,26 +44,23 @@ function useFocusOnMount(focusOnMount = 'firstElement') {
       preventScroll: true
     });
   };
-
-  /** @type {import('react').MutableRefObject<ReturnType<setTimeout> | undefined>} */
-  const timerIdRef = (0, _element.useRef)();
-  (0, _element.useEffect)(() => {
+  const timerIdRef = (0, import_element.useRef)();
+  (0, import_element.useEffect)(() => {
     focusOnMountRef.current = focusOnMount;
   }, [focusOnMount]);
-  return (0, _useRefEffect.default)(node => {
-    var _node$ownerDocument$a;
+  return (0, import_use_ref_effect.default)((node) => {
     if (!node || focusOnMountRef.current === false) {
       return;
     }
-    if (node.contains((_node$ownerDocument$a = node.ownerDocument?.activeElement) !== null && _node$ownerDocument$a !== void 0 ? _node$ownerDocument$a : null)) {
+    if (node.contains(node.ownerDocument?.activeElement ?? null)) {
       return;
     }
-    if (focusOnMountRef.current !== 'firstElement') {
+    if (focusOnMountRef.current !== "firstElement") {
       setFocus(node);
       return;
     }
     timerIdRef.current = setTimeout(() => {
-      const firstTabbable = _dom.focus.tabbable.find(node)[0];
+      const firstTabbable = import_dom.focus.tabbable.find(node)[0];
       if (firstTabbable) {
         setFocus(firstTabbable);
       }
@@ -85,4 +72,4 @@ function useFocusOnMount(focusOnMount = 'firstElement') {
     };
   }, []);
 }
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

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

@@ -1 +1,7 @@
-{"version":3,"names":["_element","require","_dom","_useRefEffect","_interopRequireDefault","useFocusOnMount","focusOnMount","focusOnMountRef","useRef","setFocus","target","focus","preventScroll","timerIdRef","useEffect","current","useRefEffect","node","_node$ownerDocument$a","contains","ownerDocument","activeElement","setTimeout","firstTabbable","tabbable","find","clearTimeout"],"sources":["@wordpress/compose/src/hooks/use-focus-on-mount/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useRef, useEffect } from '@wordpress/element';\nimport { focus } from '@wordpress/dom';\n\n/**\n * Internal dependencies\n */\nimport useRefEffect from '../use-ref-effect';\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\n\t/**\n\t * Sets focus on a DOM element.\n\t *\n\t * @param {HTMLElement} target The DOM element to set focus to.\n\t * @return {void}\n\t */\n\tconst setFocus = ( target ) => {\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\t/** @type {import('react').MutableRefObject<ReturnType<setTimeout> | undefined>} */\n\tconst timerIdRef = useRef();\n\n\tuseEffect( () => {\n\t\tfocusOnMountRef.current = focusOnMount;\n\t}, [ focusOnMount ] );\n\n\treturn useRefEffect( ( 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\tif ( focusOnMountRef.current !== 'firstElement' ) {\n\t\t\tsetFocus( node );\n\t\t\treturn;\n\t\t}\n\n\t\ttimerIdRef.current = setTimeout( () => {\n\t\t\tconst firstTabbable = focus.tabbable.find( node )[ 0 ];\n\t\t\tif ( firstTabbable ) {\n\t\t\t\tsetFocus( firstTabbable );\n\t\t\t}\n\t\t}, 0 );\n\n\t\treturn () => {\n\t\t\tif ( timerIdRef.current ) {\n\t\t\t\tclearTimeout( timerIdRef.current );\n\t\t\t}\n\t\t};\n\t}, [] );\n}\n"],"mappings":";;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,IAAA,GAAAD,OAAA;AAKA,IAAAE,aAAA,GAAAC,sBAAA,CAAAH,OAAA;AATA;AACA;AACA;;AAIA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACe,SAASI,eAAeA,CAAEC,YAAY,GAAG,cAAc,EAAG;EACxE,MAAMC,eAAe,GAAG,IAAAC,eAAM,EAAEF,YAAa,CAAC;;EAE9C;AACD;AACA;AACA;AACA;AACA;EACC,MAAMG,QAAQ,GAAKC,MAAM,IAAM;IAC9BA,MAAM,CAACC,KAAK,CAAE;MACb;MACA;MACA;MACAC,aAAa,EAAE;IAChB,CAAE,CAAC;EACJ,CAAC;;EAED;EACA,MAAMC,UAAU,GAAG,IAAAL,eAAM,EAAC,CAAC;EAE3B,IAAAM,kBAAS,EAAE,MAAM;IAChBP,eAAe,CAACQ,OAAO,GAAGT,YAAY;EACvC,CAAC,EAAE,CAAEA,YAAY,CAAG,CAAC;EAErB,OAAO,IAAAU,qBAAY,EAAIC,IAAI,IAAM;IAAA,IAAAC,qBAAA;IAChC,IAAK,CAAED,IAAI,IAAIV,eAAe,CAACQ,OAAO,KAAK,KAAK,EAAG;MAClD;IACD;IAEA,IAAKE,IAAI,CAACE,QAAQ,EAAAD,qBAAA,GAAED,IAAI,CAACG,aAAa,EAAEC,aAAa,cAAAH,qBAAA,cAAAA,qBAAA,GAAI,IAAK,CAAC,EAAG;MACjE;IACD;IAEA,IAAKX,eAAe,CAACQ,OAAO,KAAK,cAAc,EAAG;MACjDN,QAAQ,CAAEQ,IAAK,CAAC;MAChB;IACD;IAEAJ,UAAU,CAACE,OAAO,GAAGO,UAAU,CAAE,MAAM;MACtC,MAAMC,aAAa,GAAGZ,UAAK,CAACa,QAAQ,CAACC,IAAI,CAAER,IAAK,CAAC,CAAE,CAAC,CAAE;MACtD,IAAKM,aAAa,EAAG;QACpBd,QAAQ,CAAEc,aAAc,CAAC;MAC1B;IACD,CAAC,EAAE,CAAE,CAAC;IAEN,OAAO,MAAM;MACZ,IAAKV,UAAU,CAACE,OAAO,EAAG;QACzBW,YAAY,CAAEb,UAAU,CAACE,OAAQ,CAAC;MACnC;IACD,CAAC;EACF,CAAC,EAAE,EAAG,CAAC;AACR","ignoreList":[]}
+{
+  "version": 3,
+  "sources": ["../../../src/hooks/use-focus-on-mount/index.js"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useRef, useEffect } from '@wordpress/element';\nimport { focus } from '@wordpress/dom';\n\n/**\n * Internal dependencies\n */\nimport useRefEffect from '../use-ref-effect';\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\n\t/**\n\t * Sets focus on a DOM element.\n\t *\n\t * @param {HTMLElement} target The DOM element to set focus to.\n\t * @return {void}\n\t */\n\tconst setFocus = ( target ) => {\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\t/** @type {import('react').MutableRefObject<ReturnType<setTimeout> | undefined>} */\n\tconst timerIdRef = useRef();\n\n\tuseEffect( () => {\n\t\tfocusOnMountRef.current = focusOnMount;\n\t}, [ focusOnMount ] );\n\n\treturn useRefEffect( ( 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\tif ( focusOnMountRef.current !== 'firstElement' ) {\n\t\t\tsetFocus( node );\n\t\t\treturn;\n\t\t}\n\n\t\ttimerIdRef.current = setTimeout( () => {\n\t\t\tconst firstTabbable = focus.tabbable.find( node )[ 0 ];\n\t\t\tif ( firstTabbable ) {\n\t\t\t\tsetFocus( firstTabbable );\n\t\t\t}\n\t\t}, 0 );\n\n\t\treturn () => {\n\t\t\tif ( timerIdRef.current ) {\n\t\t\t\tclearTimeout( timerIdRef.current );\n\t\t\t}\n\t\t};\n\t}, [] );\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAAkC;AAClC,iBAAsB;AAKtB,4BAAyB;AAuBV,SAAR,gBAAkC,eAAe,gBAAiB;AACxE,QAAM,sBAAkB,uBAAQ,YAAa;AAQ7C,QAAM,WAAW,CAAE,WAAY;AAC9B,WAAO,MAAO;AAAA;AAAA;AAAA;AAAA,MAIb,eAAe;AAAA,IAChB,CAAE;AAAA,EACH;AAGA,QAAM,iBAAa,uBAAO;AAE1B,gCAAW,MAAM;AAChB,oBAAgB,UAAU;AAAA,EAC3B,GAAG,CAAE,YAAa,CAAE;AAEpB,aAAO,sBAAAA,SAAc,CAAE,SAAU;AAChC,QAAK,CAAE,QAAQ,gBAAgB,YAAY,OAAQ;AAClD;AAAA,IACD;AAEA,QAAK,KAAK,SAAU,KAAK,eAAe,iBAAiB,IAAK,GAAI;AACjE;AAAA,IACD;AAEA,QAAK,gBAAgB,YAAY,gBAAiB;AACjD,eAAU,IAAK;AACf;AAAA,IACD;AAEA,eAAW,UAAU,WAAY,MAAM;AACtC,YAAM,gBAAgB,iBAAM,SAAS,KAAM,IAAK,EAAG,CAAE;AACrD,UAAK,eAAgB;AACpB,iBAAU,aAAc;AAAA,MACzB;AAAA,IACD,GAAG,CAAE;AAEL,WAAO,MAAM;AACZ,UAAK,WAAW,SAAU;AACzB,qBAAc,WAAW,OAAQ;AAAA,MAClC;AAAA,IACD;AAAA,EACD,GAAG,CAAC,CAAE;AACP;",
+  "names": ["useRefEffect"]
+}

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

@@ -1,142 +1,84 @@
 "use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var use_focus_outside_exports = {};
+__export(use_focus_outside_exports, {
+  default: () => useFocusOutside
 });
-exports.default = useFocusOutside;
-var _element = require("@wordpress/element");
-/**
- * WordPress dependencies
- */
-
-/**
- * Input types which are classified as button types, for use in considering
- * whether element is a (focus-normalized) button.
- */
-const INPUT_BUTTON_TYPES = ['button', 'submit'];
-
-/**
- * List of HTML button elements subject to focus normalization
- *
- * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus
- */
-
-/**
- * Returns true if the given element is a button element subject to focus
- * normalization, or false otherwise.
- *
- * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus
- *
- * @param eventTarget The target from a mouse or touch event.
- *
- * @return Whether the element is a button element subject to focus normalization.
- */
+module.exports = __toCommonJS(use_focus_outside_exports);
+var import_element = require("@wordpress/element");
+const INPUT_BUTTON_TYPES = ["button", "submit"];
 function isFocusNormalizedButton(eventTarget) {
   if (!(eventTarget instanceof window.HTMLElement)) {
     return false;
   }
   switch (eventTarget.nodeName) {
-    case 'A':
-    case 'BUTTON':
+    case "A":
+    case "BUTTON":
       return true;
-    case 'INPUT':
-      return INPUT_BUTTON_TYPES.includes(eventTarget.type);
+    case "INPUT":
+      return INPUT_BUTTON_TYPES.includes(
+        eventTarget.type
+      );
   }
   return false;
 }
-/**
- * A react hook that can be used to check whether focus has moved outside the
- * element the event handlers are bound to.
- *
- * @param onFocusOutside A callback triggered when focus moves outside
- *                       the element the event handlers are bound to.
- *
- * @return An object containing event handlers. Bind the event handlers to a
- * wrapping element element to capture when focus moves outside that element.
- */
 function useFocusOutside(onFocusOutside) {
-  const currentOnFocusOutsideRef = (0, _element.useRef)(onFocusOutside);
-  (0, _element.useEffect)(() => {
+  const currentOnFocusOutsideRef = (0, import_element.useRef)(onFocusOutside);
+  (0, import_element.useEffect)(() => {
     currentOnFocusOutsideRef.current = onFocusOutside;
   }, [onFocusOutside]);
-  const preventBlurCheckRef = (0, _element.useRef)(false);
-  const blurCheckTimeoutIdRef = (0, _element.useRef)();
-
-  /**
-   * Cancel a blur check timeout.
-   */
-  const cancelBlurCheck = (0, _element.useCallback)(() => {
+  const preventBlurCheckRef = (0, import_element.useRef)(false);
+  const blurCheckTimeoutIdRef = (0, import_element.useRef)();
+  const cancelBlurCheck = (0, import_element.useCallback)(() => {
     clearTimeout(blurCheckTimeoutIdRef.current);
   }, []);
-
-  // Cancel a blur check if the callback or ref is no longer provided.
-  (0, _element.useEffect)(() => {
+  (0, import_element.useEffect)(() => {
     if (!onFocusOutside) {
       cancelBlurCheck();
     }
   }, [onFocusOutside, cancelBlurCheck]);
-
-  /**
-   * Handles a mousedown or mouseup event to respectively assign and
-   * unassign a flag for preventing blur check on button elements. Some
-   * browsers, namely Firefox and Safari, do not emit a focus event on
-   * button elements when clicked, while others do. The logic here
-   * intends to normalize this as treating click on buttons as focus.
-   *
-   * @param event
-   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus
-   */
-  const normalizeButtonFocus = (0, _element.useCallback)(event => {
-    const {
-      type,
-      target
-    } = event;
-    const isInteractionEnd = ['mouseup', 'touchend'].includes(type);
+  const normalizeButtonFocus = (0, import_element.useCallback)((event) => {
+    const { type, target } = event;
+    const isInteractionEnd = ["mouseup", "touchend"].includes(type);
     if (isInteractionEnd) {
       preventBlurCheckRef.current = false;
     } else if (isFocusNormalizedButton(target)) {
       preventBlurCheckRef.current = true;
     }
   }, []);
-
-  /**
-   * A callback triggered when a blur event occurs on the element the handler
-   * is bound to.
-   *
-   * Calls the `onFocusOutside` callback in an immediate timeout if focus has
-   * move outside the bound element and is still within the document.
-   */
-  const queueBlurCheck = (0, _element.useCallback)(event => {
-    // React does not allow using an event reference asynchronously
-    // due to recycling behavior, except when explicitly persisted.
+  const queueBlurCheck = (0, import_element.useCallback)((event) => {
     event.persist();
-
-    // Skip blur check if clicking button. See `normalizeButtonFocus`.
     if (preventBlurCheckRef.current) {
       return;
     }
-
-    // The usage of this attribute should be avoided. The only use case
-    // would be when we load modals that are not React components and
-    // therefore don't exist in the React tree. An example is opening
-    // the Media Library modal from another dialog.
-    // This attribute should contain a selector of the related target
-    // we want to ignore, because we still need to trigger the blur event
-    // on all other cases.
-    const ignoreForRelatedTarget = event.target.getAttribute('data-unstable-ignore-focus-outside-for-relatedtarget');
+    const ignoreForRelatedTarget = event.target.getAttribute(
+      "data-unstable-ignore-focus-outside-for-relatedtarget"
+    );
     if (ignoreForRelatedTarget && event.relatedTarget?.closest(ignoreForRelatedTarget)) {
       return;
     }
     blurCheckTimeoutIdRef.current = setTimeout(() => {
-      // If document is not focused then focus should remain
-      // inside the wrapped component and therefore we cancel
-      // this blur event thereby leaving focus in place.
-      // https://developer.mozilla.org/en-US/docs/Web/API/Document/hasFocus.
       if (!document.hasFocus()) {
         event.preventDefault();
         return;
       }
-      if ('function' === typeof currentOnFocusOutsideRef.current) {
+      if ("function" === typeof currentOnFocusOutsideRef.current) {
         currentOnFocusOutsideRef.current(event);
       }
     }, 0);
@@ -150,4 +92,4 @@ function useFocusOutside(onFocusOutside) {
     onBlur: queueBlurCheck
   };
 }
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map