@contember/react-utils 1.2.0-rc.15 → 1.2.0-rc.17

package/dist/development/hooks/useAutoHeightTextArea.js

@@ -0,0 +1,41 @@
+import { px } from "@contember/utilities";
+import { useCallback, useLayoutEffect } from "react";
+import { unwrapRefValue } from "./unwrapRefValue.js";
+import { useOnElementResize } from "./useOnElementResize.js";
+const useAutoHeightTextArea = (textAreaRef, value, minRows, maxRows) => {
+  const measure = useCallback((ref, minRows2, maxRows2, value2) => {
+    if (ref) {
+      const rowsAttribute = ref.rows;
+      ref.style.height = "";
+      ref.style.minHeight = "";
+      ref.style.maxHeight = "";
+      if (minRows2 !== maxRows2) {
+        const height = ref.scrollHeight;
+        let minHeight;
+        let maxHeight;
+        ref.rows = minRows2;
+        minHeight = ref.offsetHeight;
+        if (maxRows2 === Infinity) {
+          maxHeight = Infinity;
+        } else {
+          ref.rows = maxRows2;
+          maxHeight = ref.offsetHeight;
+        }
+        ref.style.height = px(height);
+        ref.style.minHeight = px(minHeight);
+        ref.style.maxHeight = px(maxHeight);
+      }
+      ref.rows = rowsAttribute;
+    }
+  }, []);
+  useOnElementResize(textAreaRef, () => {
+    measure(unwrapRefValue(textAreaRef), minRows, maxRows, value);
+  });
+  useLayoutEffect(() => {
+    measure(unwrapRefValue(textAreaRef), minRows, maxRows, value);
+  }, [maxRows, measure, minRows, textAreaRef, value]);
+};
+export {
+  useAutoHeightTextArea
+};
+//# sourceMappingURL=useAutoHeightTextArea.js.map

package/dist/development/hooks/useAutoHeightTextArea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAutoHeightTextArea.js","sources":["../../../src/hooks/useAutoHeightTextArea.ts"],"sourcesContent":["import { px } from '@contember/utilities'\nimport { useCallback, useLayoutEffect } from 'react'\nimport { RefObjectOrElement, unwrapRefValue } from './unwrapRefValue'\nimport { useOnElementResize } from './useOnElementResize'\n\nexport const useAutoHeightTextArea = (\n\ttextAreaRef: RefObjectOrElement<HTMLTextAreaElement>,\n\tvalue: string,\n\tminRows: number,\n\tmaxRows: number,\n) => {\n\tconst measure = useCallback((ref: HTMLTextAreaElement | null, minRows: number, maxRows: number, value: string) => {\n\t\tif (ref) {\n\t\t\tconst rowsAttribute = ref.rows\n\n\t\t\tref.style.height = ''\n\t\t\tref.style.minHeight = ''\n\t\t\tref.style.maxHeight = ''\n\n\t\t\tif (minRows !== maxRows) {\n\t\t\t\tconst height = ref.scrollHeight\n\t\t\t\tlet minHeight: number\n\t\t\t\tlet maxHeight: number\n\n\t\t\t\tref.rows = minRows\n\t\t\t\tminHeight = ref.offsetHeight\n\n\t\t\t\tif (maxRows === Infinity) {\n\t\t\t\t\tmaxHeight = Infinity\n\t\t\t\t} else {\n\t\t\t\t\tref.rows = maxRows\n\t\t\t\t\tmaxHeight = ref.offsetHeight\n\t\t\t\t}\n\n\t\t\t\tref.style.height = px(height)\n\t\t\t\tref.style.minHeight = px(minHeight)\n\t\t\t\tref.style.maxHeight = px(maxHeight)\n\t\t\t}\n\n\t\t\tref.rows = rowsAttribute\n\t\t}\n\t}, [])\n\n\tuseOnElementResize(textAreaRef, () => {\n\t\tmeasure(unwrapRefValue(textAreaRef), minRows, maxRows, value)\n\t})\n\n\tuseLayoutEffect(() => {\n\t\tmeasure(unwrapRefValue(textAreaRef), minRows, maxRows, value)\n\t}, [maxRows, measure, minRows, textAreaRef, value])\n}\n"],"names":["minRows","maxRows","value"],"mappings":";;;;AAKO,MAAM,wBAAwB,CACpC,aACA,OACA,SACA,YACI;AACJ,QAAM,UAAU,YAAY,CAAC,KAAiCA,UAAiBC,UAAiBC,WAAkB;AACjH,QAAI,KAAK;AACR,YAAM,gBAAgB,IAAI;AAE1B,UAAI,MAAM,SAAS;AACnB,UAAI,MAAM,YAAY;AACtB,UAAI,MAAM,YAAY;AAEtB,UAAIF,aAAYC,UAAS;AACxB,cAAM,SAAS,IAAI;AACf,YAAA;AACA,YAAA;AAEJ,YAAI,OAAOD;AACX,oBAAY,IAAI;AAEhB,YAAIC,aAAY,UAAU;AACb,sBAAA;AAAA,QAAA,OACN;AACN,cAAI,OAAOA;AACX,sBAAY,IAAI;AAAA,QACjB;AAEI,YAAA,MAAM,SAAS,GAAG,MAAM;AACxB,YAAA,MAAM,YAAY,GAAG,SAAS;AAC9B,YAAA,MAAM,YAAY,GAAG,SAAS;AAAA,MACnC;AAEA,UAAI,OAAO;AAAA,IACZ;AAAA,EACD,GAAG,CAAE,CAAA;AAEL,qBAAmB,aAAa,MAAM;AACrC,YAAQ,eAAe,WAAW,GAAG,SAAS,SAAS,KAAK;AAAA,EAAA,CAC5D;AAED,kBAAgB,MAAM;AACrB,YAAQ,eAAe,WAAW,GAAG,SAAS,SAAS,KAAK;AAAA,EAAA,GAC1D,CAAC,SAAS,SAAS,SAAS,aAAa,KAAK,CAAC;AACnD;"}

package/dist/development/hooks/useOnElementClickOutsideCallback.js

@@ -0,0 +1,20 @@
+import { useEffect } from "react";
+import { unwrapRefValue } from "./unwrapRefValue.js";
+function useOnElementClickOutsideCallback(refOrElement, callback) {
+  useEffect(() => {
+    const refValue = unwrapRefValue(refOrElement);
+    const handleClickOutside = (event) => {
+      if (refValue && !refValue.contains(event.target)) {
+        callback(event);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [callback, refOrElement]);
+}
+export {
+  useOnElementClickOutsideCallback
+};
+//# sourceMappingURL=useOnElementClickOutsideCallback.js.map

package/dist/development/hooks/useOnElementClickOutsideCallback.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useOnElementClickOutsideCallback.js","sources":["../../../src/hooks/useOnElementClickOutsideCallback.ts"],"sourcesContent":["import { useEffect } from 'react'\nimport { RefObjectOrElement, unwrapRefValue } from './unwrapRefValue'\n\nexport function useOnElementClickOutsideCallback(\n\trefOrElement: RefObjectOrElement<HTMLElement>,\n\tcallback: (event: MouseEvent) => void,\n): void {\n\tuseEffect(() => {\n\t\tconst refValue = unwrapRefValue(refOrElement)\n\n\t\tconst handleClickOutside = (event: MouseEvent) => {\n\t\t\tif (refValue && !refValue.contains(event.target as Node)) {\n\t\t\t\tcallback(event)\n\t\t\t}\n\t\t}\n\n\t\tdocument.addEventListener('mousedown', handleClickOutside)\n\n\t\treturn () => {\n\t\t\tdocument.removeEventListener('mousedown', handleClickOutside)\n\t\t}\n\t}, [callback, refOrElement])\n}\n"],"names":[],"mappings":";;AAGgB,SAAA,iCACf,cACA,UACO;AACP,YAAU,MAAM;AACT,UAAA,WAAW,eAAe,YAAY;AAEtC,UAAA,qBAAqB,CAAC,UAAsB;AACjD,UAAI,YAAY,CAAC,SAAS,SAAS,MAAM,MAAc,GAAG;AACzD,iBAAS,KAAK;AAAA,MACf;AAAA,IAAA;AAGQ,aAAA,iBAAiB,aAAa,kBAAkB;AAEzD,WAAO,MAAM;AACH,eAAA,oBAAoB,aAAa,kBAAkB;AAAA,IAAA;AAAA,EAC7D,GACE,CAAC,UAAU,YAAY,CAAC;AAC5B;"}

package/dist/development/hooks/useOnElementMouseEnterDelayedCallback.js

@@ -0,0 +1,33 @@
+import { useEffect } from "react";
+import { unwrapRefValue } from "./unwrapRefValue.js";
+function useOnElementMouseEnterDelayedCallback(refOrElement, callback, timeoutMs = 300) {
+  useEffect(() => {
+    const refValue = unwrapRefValue(refOrElement);
+    if (refValue) {
+      let handleMouseEnter = function(event) {
+        clearTimeout(timeoutID);
+        timeoutID = setTimeout(() => {
+          callback(event);
+        }, timeoutMs);
+      }, handleMouseLeave = function() {
+        clearTimeout(timeoutID);
+      }, handleMouseDown = function(event) {
+        clearTimeout(timeoutID);
+        callback(event);
+      };
+      let timeoutID = void 0;
+      refValue.addEventListener("mouseenter", handleMouseEnter);
+      refValue.addEventListener("mouseleave", handleMouseLeave);
+      refValue.addEventListener("mousedown", handleMouseDown);
+      return () => {
+        refValue.removeEventListener("mouseover", handleMouseEnter);
+        refValue.removeEventListener("mouseleave", handleMouseLeave);
+        refValue.removeEventListener("mousedown", handleMouseDown);
+      };
+    }
+  }, [callback, refOrElement, timeoutMs]);
+}
+export {
+  useOnElementMouseEnterDelayedCallback
+};
+//# sourceMappingURL=useOnElementMouseEnterDelayedCallback.js.map

package/dist/development/hooks/useOnElementMouseEnterDelayedCallback.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useOnElementMouseEnterDelayedCallback.js","sources":["../../../src/hooks/useOnElementMouseEnterDelayedCallback.ts"],"sourcesContent":["import { useEffect } from 'react'\nimport { RefObjectOrElement, unwrapRefValue } from './unwrapRefValue'\n\n/**\n * Calls the callback when the mouse enters the element, but only after a timeout, e.g. for tooltips or dropdown menus.\n *\n * Calls the callback immediately if the mouse is pressed down with `event.type` of `mousedown`. This is useful for\n * dropdown menus, where the user may click on the menu item before the callback is called resulting in the menu\n * opening and closing immediately.\n *\n * @param refOrElement - The element or ref to the element to attach the event listener to.\n * @param callback - The callback to call when the mouse enters the element.\n * @param timeoutMs - The timeout in milliseconds to wait before calling the callback.\n */\nexport function useOnElementMouseEnterDelayedCallback(\n\trefOrElement: RefObjectOrElement<HTMLElement>,\n\tcallback: (event: MouseEvent) => void,\n\ttimeoutMs: number = 300,\n): void {\n\tuseEffect(() => {\n\t\tconst refValue = unwrapRefValue(refOrElement)\n\n\t\tif (refValue) {\n\t\t\tlet timeoutID: ReturnType<typeof setTimeout> | undefined = undefined\n\n\t\t\tfunction handleMouseEnter(event: MouseEvent) {\n\t\t\t\tclearTimeout(timeoutID)\n\n\t\t\t\ttimeoutID = setTimeout(() => {\n\t\t\t\t\tcallback(event)\n\t\t\t\t}, timeoutMs)\n\t\t\t}\n\n\t\t\tfunction handleMouseLeave() {\n\t\t\t\tclearTimeout(timeoutID)\n\t\t\t}\n\n\t\t\tfunction handleMouseDown(event: MouseEvent) {\n\t\t\t\tclearTimeout(timeoutID)\n\t\t\t\tcallback(event)\n\t\t\t}\n\n\t\t\trefValue.addEventListener('mouseenter', handleMouseEnter)\n\t\t\trefValue.addEventListener('mouseleave', handleMouseLeave)\n\t\t\trefValue.addEventListener('mousedown', handleMouseDown)\n\n\t\t\treturn () => {\n\t\t\t\trefValue.removeEventListener('mouseover', handleMouseEnter)\n\t\t\t\trefValue.removeEventListener('mouseleave', handleMouseLeave)\n\t\t\t\trefValue.removeEventListener('mousedown', handleMouseDown)\n\t\t\t}\n\t\t}\n\t}, [callback, refOrElement, timeoutMs])\n}\n"],"names":[],"mappings":";;AAcO,SAAS,sCACf,cACA,UACA,YAAoB,KACb;AACP,YAAU,MAAM;AACT,UAAA,WAAW,eAAe,YAAY;AAE5C,QAAI,UAAU;AAGJ,UAAA,mBAAT,SAA0B,OAAmB;AAC5C,qBAAa,SAAS;AAEtB,oBAAY,WAAW,MAAM;AAC5B,mBAAS,KAAK;AAAA,WACZ,SAAS;AAAA,MACb,GAES,mBAAT,WAA4B;AAC3B,qBAAa,SAAS;AAAA,MAAA,GAGd,kBAAT,SAAyB,OAAmB;AAC3C,qBAAa,SAAS;AACtB,iBAAS,KAAK;AAAA,MAAA;AAhBf,UAAI,YAAuD;AAmBlD,eAAA,iBAAiB,cAAc,gBAAgB;AAC/C,eAAA,iBAAiB,cAAc,gBAAgB;AAC/C,eAAA,iBAAiB,aAAa,eAAe;AAEtD,aAAO,MAAM;AACH,iBAAA,oBAAoB,aAAa,gBAAgB;AACjD,iBAAA,oBAAoB,cAAc,gBAAgB;AAClD,iBAAA,oBAAoB,aAAa,eAAe;AAAA,MAAA;AAAA,IAE3D;AAAA,EACE,GAAA,CAAC,UAAU,cAAc,SAAS,CAAC;AACvC;"}

package/dist/development/hooks/useOnElementResize.js

@@ -4,39 +4,41 @@ import { useScopedConsoleRef } from "../debug-context/Context.js";
 function useOnElementResize(refOrElement, callback, options = {}, timeout = 300) {
   const scopedConsoleRef = useScopedConsoleRef("useOnElementResize");
   const { box = "border-box" } = options;
-  const element = unwrapRefValue(refOrElement);
   const callbackRef = useRef(callback);
   callbackRef.current = callback;
   const lastTimeStamp = useRef(0);
   useLayoutEffect(() => {
-    let timeoutID = void 0;
-    function debouncedOnChange([entry]) {
-      const timeStamp = Date.now();
-      const delta = timeStamp - lastTimeStamp.current;
-      if (delta > timeout) {
-        scopedConsoleRef.current.warned("element.resize:immediate", null);
-        callbackRef.current(entry);
-        lastTimeStamp.current = timeStamp;
+    const element = unwrapRefValue(refOrElement);
+    if (element) {
+      if (element instanceof HTMLElement) {
+        let debouncedOnChange = function([entry]) {
+          const timeStamp = Date.now();
+          const delta = timeStamp - lastTimeStamp.current;
+          if (delta > timeout) {
+            scopedConsoleRef.current.warned("element.resize:immediate", null);
+            callbackRef.current(entry);
+            lastTimeStamp.current = timeStamp;
+          } else {
+            clearTimeout(timeoutID);
+            timeoutID = setTimeout(() => {
+              scopedConsoleRef.current.warned("element.resize:debounced", null);
+              callbackRef.current(entry);
+              lastTimeStamp.current = timeStamp;
+            }, timeout);
+          }
+        };
+        let timeoutID = void 0;
+        const resizeObserver = new ResizeObserver(debouncedOnChange);
+        resizeObserver.observe(element, { box });
+        return () => {
+          clearTimeout(timeoutID);
+          resizeObserver.unobserve(element);
+        };
       } else {
-        clearTimeout(timeoutID);
-        timeoutID = setTimeout(() => {
-          scopedConsoleRef.current.warned("element.resize:debounced", null);
-          callbackRef.current(entry);
-          lastTimeStamp.current = timeStamp;
-        }, timeout);
+        throw new Error("Exhaustive error: Expecting element to be instance of HTMLElement");
       }
     }
-    if (element instanceof HTMLElement) {
-      const resizeObserver = new ResizeObserver(debouncedOnChange);
-      resizeObserver.observe(element, { box });
-      return () => {
-        clearTimeout(timeoutID);
-        resizeObserver.unobserve(element);
-      };
-    } else if (element) {
-      throw new Error("Exhaustive error: Expecting element to be instance of HTMLElement");
-    }
-  }, [box, element, scopedConsoleRef, timeout]);
+  }, [box, refOrElement, scopedConsoleRef, timeout]);
 }
 export {
   useOnElementResize

package/dist/development/hooks/useOnElementResize.js.map

@@ -1 +1 @@
-{"version":3,"file":"useOnElementResize.js","sources":["../../../src/hooks/useOnElementResize.ts"],"sourcesContent":["import { useLayoutEffect, useRef } from 'react'\nimport { useScopedConsoleRef } from '../debug-context'\nimport { RefObjectOrElement, unwrapRefValue } from './unwrapRefValue'\n\nexport function useOnElementResize(\n\trefOrElement: RefObjectOrElement<HTMLElement | null> | null,\n\tcallback: (entries: ResizeObserverEntry) => void,\n\toptions: ResizeObserverOptions = {},\n\ttimeout: number = 300,\n): void {\n\tconst scopedConsoleRef = useScopedConsoleRef('useOnElementResize')\n\n\tconst { box = 'border-box' } = options\n\tconst element = unwrapRefValue(refOrElement)\n\tconst callbackRef = useRef(callback); callbackRef.current = callback\n\tconst lastTimeStamp = useRef<number>(0)\n\n\tuseLayoutEffect(() => {\n\t\tlet timeoutID: number | undefined = undefined\n\n\t\tfunction debouncedOnChange([entry]: ResizeObserverEntry[]) {\n\t\t\tconst timeStamp = Date.now()\n\t\t\tconst delta = timeStamp - lastTimeStamp.current\n\n\t\t\tif (delta > timeout) {\n\t\t\t\tscopedConsoleRef.current.warned('element.resize:immediate', null)\n\t\t\t\tcallbackRef.current(entry)\n\t\t\t\tlastTimeStamp.current = timeStamp\n\t\t\t} else {\n\t\t\t\tclearTimeout(timeoutID)\n\t\t\t\ttimeoutID = setTimeout(() => {\n\t\t\t\t\tscopedConsoleRef.current.warned('element.resize:debounced', null)\n\t\t\t\t\tcallbackRef.current(entry)\n\t\t\t\t\tlastTimeStamp.current = timeStamp\n\t\t\t\t}, timeout)\n\t\t\t}\n\t\t}\n\n\t\tif (element instanceof HTMLElement) {\n\t\t\tconst resizeObserver = new ResizeObserver(debouncedOnChange)\n\n\t\t\tresizeObserver.observe(element, { box })\n\n\t\t\treturn () => {\n\t\t\t\tclearTimeout(timeoutID)\n\t\t\t\tresizeObserver.unobserve(element)\n\t\t\t}\n\t\t} else if (element) {\n\t\t\tthrow new Error('Exhaustive error: Expecting element to be instance of HTMLElement')\n\t\t}\n\t}, [box, element, scopedConsoleRef, timeout])\n}\n"],"names":[],"mappings":";;;AAIO,SAAS,mBACf,cACA,UACA,UAAiC,CAAC,GAClC,UAAkB,KACX;AACD,QAAA,mBAAmB,oBAAoB,oBAAoB;AAE3D,QAAA,EAAE,MAAM,aAAiB,IAAA;AACzB,QAAA,UAAU,eAAe,YAAY;AACrC,QAAA,cAAc,OAAO,QAAQ;AAAG,cAAY,UAAU;AACtD,QAAA,gBAAgB,OAAe,CAAC;AAEtC,kBAAgB,MAAM;AACrB,QAAI,YAAgC;AAE3B,aAAA,kBAAkB,CAAC,KAAK,GAA0B;AACpD,YAAA,YAAY,KAAK;AACjB,YAAA,QAAQ,YAAY,cAAc;AAExC,UAAI,QAAQ,SAAS;AACH,yBAAA,QAAQ,OAAO,4BAA4B,IAAI;AAChE,oBAAY,QAAQ,KAAK;AACzB,sBAAc,UAAU;AAAA,MAAA,OAClB;AACN,qBAAa,SAAS;AACtB,oBAAY,WAAW,MAAM;AACX,2BAAA,QAAQ,OAAO,4BAA4B,IAAI;AAChE,sBAAY,QAAQ,KAAK;AACzB,wBAAc,UAAU;AAAA,WACtB,OAAO;AAAA,MACX;AAAA,IACD;AAEA,QAAI,mBAAmB,aAAa;AAC7B,YAAA,iBAAiB,IAAI,eAAe,iBAAiB;AAE3D,qBAAe,QAAQ,SAAS,EAAE,IAAK,CAAA;AAEvC,aAAO,MAAM;AACZ,qBAAa,SAAS;AACtB,uBAAe,UAAU,OAAO;AAAA,MAAA;AAAA,eAEvB,SAAS;AACb,YAAA,IAAI,MAAM,mEAAmE;AAAA,IACpF;AAAA,KACE,CAAC,KAAK,SAAS,kBAAkB,OAAO,CAAC;AAC7C;"}
+{"version":3,"file":"useOnElementResize.js","sources":["../../../src/hooks/useOnElementResize.ts"],"sourcesContent":["import { useLayoutEffect, useRef } from 'react'\nimport { useScopedConsoleRef } from '../debug-context'\nimport { RefObjectOrElement, unwrapRefValue } from './unwrapRefValue'\n\nexport function useOnElementResize(\n\trefOrElement: RefObjectOrElement<HTMLElement | null> | null,\n\tcallback: (entries: ResizeObserverEntry) => void,\n\toptions: ResizeObserverOptions = {},\n\ttimeout: number = 300,\n): void {\n\tconst scopedConsoleRef = useScopedConsoleRef('useOnElementResize')\n\n\tconst { box = 'border-box' } = options\n\tconst callbackRef = useRef(callback); callbackRef.current = callback\n\tconst lastTimeStamp = useRef<number>(0)\n\n\tuseLayoutEffect(() => {\n\t\tconst element = unwrapRefValue(refOrElement)\n\n\t\tif (element) {\n\t\t\tif (element instanceof HTMLElement) {\n\t\t\t\tlet timeoutID: number | undefined = undefined\n\n\t\t\t\tfunction debouncedOnChange([entry]: ResizeObserverEntry[]) {\n\t\t\t\t\tconst timeStamp = Date.now()\n\t\t\t\t\tconst delta = timeStamp - lastTimeStamp.current\n\n\t\t\t\t\tif (delta > timeout) {\n\t\t\t\t\t\tscopedConsoleRef.current.warned('element.resize:immediate', null)\n\t\t\t\t\t\tcallbackRef.current(entry)\n\t\t\t\t\t\tlastTimeStamp.current = timeStamp\n\t\t\t\t\t} else {\n\t\t\t\t\t\tclearTimeout(timeoutID)\n\t\t\t\t\t\ttimeoutID = setTimeout(() => {\n\t\t\t\t\t\t\tscopedConsoleRef.current.warned('element.resize:debounced', null)\n\t\t\t\t\t\t\tcallbackRef.current(entry)\n\t\t\t\t\t\t\tlastTimeStamp.current = timeStamp\n\t\t\t\t\t\t}, timeout)\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\tconst resizeObserver = new ResizeObserver(debouncedOnChange)\n\n\t\t\t\tresizeObserver.observe(element, { box })\n\n\t\t\t\treturn () => {\n\t\t\t\t\tclearTimeout(timeoutID)\n\t\t\t\t\tresizeObserver.unobserve(element)\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\tthrow new Error('Exhaustive error: Expecting element to be instance of HTMLElement')\n\t\t\t}\n\t\t}\n\t}, [box, refOrElement, scopedConsoleRef, timeout])\n}\n"],"names":[],"mappings":";;;AAIO,SAAS,mBACf,cACA,UACA,UAAiC,CAAC,GAClC,UAAkB,KACX;AACD,QAAA,mBAAmB,oBAAoB,oBAAoB;AAE3D,QAAA,EAAE,MAAM,aAAiB,IAAA;AACzB,QAAA,cAAc,OAAO,QAAQ;AAAG,cAAY,UAAU;AACtD,QAAA,gBAAgB,OAAe,CAAC;AAEtC,kBAAgB,MAAM;AACf,UAAA,UAAU,eAAe,YAAY;AAE3C,QAAI,SAAS;AACZ,UAAI,mBAAmB,aAAa;AAGnC,YAAS,oBAAT,SAA2B,CAAC,KAAK,GAA0B;AACpD,gBAAA,YAAY,KAAK;AACjB,gBAAA,QAAQ,YAAY,cAAc;AAExC,cAAI,QAAQ,SAAS;AACH,6BAAA,QAAQ,OAAO,4BAA4B,IAAI;AAChE,wBAAY,QAAQ,KAAK;AACzB,0BAAc,UAAU;AAAA,UAAA,OAClB;AACN,yBAAa,SAAS;AACtB,wBAAY,WAAW,MAAM;AACX,+BAAA,QAAQ,OAAO,4BAA4B,IAAI;AAChE,0BAAY,QAAQ,KAAK;AACzB,4BAAc,UAAU;AAAA,eACtB,OAAO;AAAA,UACX;AAAA,QAAA;AAjBD,YAAI,YAAgC;AAoB9B,cAAA,iBAAiB,IAAI,eAAe,iBAAiB;AAE3D,uBAAe,QAAQ,SAAS,EAAE,IAAK,CAAA;AAEvC,eAAO,MAAM;AACZ,uBAAa,SAAS;AACtB,yBAAe,UAAU,OAAO;AAAA,QAAA;AAAA,MACjC,OACM;AACA,cAAA,IAAI,MAAM,mEAAmE;AAAA,MACpF;AAAA,IACD;AAAA,KACE,CAAC,KAAK,cAAc,kBAAkB,OAAO,CAAC;AAClD;"}

package/dist/development/hooks/useOnScrollWithin.js

@@ -6,43 +6,45 @@ function useOnScrollWithin(refOrElement, callback, interval = 1e3 / 60) {
   const callbackRef = useRef(callback);
   callbackRef.current = callback;
   const lastTimeStamp = useRef(0);
-  const element = unwrapRefValue(refOrElement);
   useLayoutEffect(() => {
+    const element = unwrapRefValue(refOrElement);
     let timeoutID = void 0;
-    function debouncedHandler(event) {
-      clearTimeout(timeoutID);
-      const delta = event.timeStamp - lastTimeStamp.current;
-      scopedConsoleRef.current.logged("event:element.scroll:delta", delta);
-      if (delta > interval) {
-        scopedConsoleRef.current.warned("event:element.scroll:immediately", event);
-        callbackRef.current(event);
-        lastTimeStamp.current = event.timeStamp;
-      } else {
-        timeoutID = setTimeout(() => {
-          scopedConsoleRef.current.warned("event:element.scroll:debounced", event);
-          lastTimeStamp.current = event.timeStamp;
+    if (element) {
+      let debouncedHandler = function(event) {
+        clearTimeout(timeoutID);
+        const delta = event.timeStamp - lastTimeStamp.current;
+        scopedConsoleRef.current.logged("event:element.scroll:delta", delta);
+        if (delta > interval) {
+          scopedConsoleRef.current.warned("event:element.scroll:immediately", event);
           callbackRef.current(event);
-        }, interval);
-      }
-    }
-    if (element && element instanceof HTMLElement) {
-      if (element instanceof HTMLBodyElement || element instanceof HTMLHtmlElement) {
-        window.addEventListener("scroll", debouncedHandler, { capture: true, passive: true });
-        window.addEventListener("resize", debouncedHandler);
-        return () => {
-          window.removeEventListener("scroll", debouncedHandler);
-          window.removeEventListener("resize", debouncedHandler);
-        };
-      } else {
-        element.addEventListener("scroll", debouncedHandler, { passive: true, capture: true });
-        return () => {
-          element.removeEventListener("scroll", debouncedHandler);
-        };
+          lastTimeStamp.current = event.timeStamp;
+        } else {
+          timeoutID = setTimeout(() => {
+            scopedConsoleRef.current.warned("event:element.scroll:debounced", event);
+            lastTimeStamp.current = event.timeStamp;
+            callbackRef.current(event);
+          }, interval);
+        }
+      };
+      if (element instanceof HTMLElement) {
+        if (element instanceof HTMLBodyElement || element instanceof HTMLHtmlElement) {
+          window.addEventListener("scroll", debouncedHandler, { capture: true, passive: true });
+          window.addEventListener("resize", debouncedHandler);
+          return () => {
+            window.removeEventListener("scroll", debouncedHandler);
+            window.removeEventListener("resize", debouncedHandler);
+          };
+        } else {
+          element.addEventListener("scroll", debouncedHandler, { passive: true, capture: true });
+          return () => {
+            element.removeEventListener("scroll", debouncedHandler);
+          };
+        }
       }
-    } else if (element) {
+    } else {
       throw new Error("Exhaustive error: Expecting element to be instance of HTMLElement");
     }
-  }, [element, interval, scopedConsoleRef]);
+  }, [interval, refOrElement, scopedConsoleRef]);
 }
 export {
   useOnScrollWithin

package/dist/development/hooks/useOnScrollWithin.js.map

@@ -1 +1 @@
-{"version":3,"file":"useOnScrollWithin.js","sources":["../../../src/hooks/useOnScrollWithin.ts"],"sourcesContent":["import { useLayoutEffect, useRef } from 'react'\nimport { useScopedConsoleRef } from '../debug-context'\nimport { RefObjectOrElement, unwrapRefValue } from './unwrapRefValue'\n\n/**\n * Invokes callback on scroll event within the scroll container\n *\n * @param refOrElement - Scroll container\n * @param callback - Callback that is invoked on scroll event\n * @param interval - Specifies how often should scroll event invoke callback\n */\nexport function useOnScrollWithin(\n\trefOrElement: RefObjectOrElement<HTMLElement | null> | null,\n\tcallback: (event: Event) => void,\n\tinterval: number = 1000 / 60,\n) {\n\tconst scopedConsoleRef = useScopedConsoleRef('useOnScrollWithin')\n\n\tconst callbackRef = useRef(callback); callbackRef.current = callback\n\tconst lastTimeStamp = useRef<number>(0)\n\n\tconst element = unwrapRefValue(refOrElement)\n\n\tuseLayoutEffect(() => {\n\t\tlet timeoutID: number | undefined = undefined\n\n\t\tfunction debouncedHandler(event: Event) {\n\t\t\tclearTimeout(timeoutID)\n\n\t\t\tconst delta = event.timeStamp - lastTimeStamp.current\n\t\t\tscopedConsoleRef.current.logged('event:element.scroll:delta', delta)\n\n\t\t\tif (delta > interval) {\n\t\t\t\tscopedConsoleRef.current.warned('event:element.scroll:immediately', event)\n\t\t\t\tcallbackRef.current(event)\n\t\t\t\tlastTimeStamp.current = event.timeStamp\n\t\t\t} else {\n\t\t\t\ttimeoutID = setTimeout(() => {\n\t\t\t\t\tscopedConsoleRef.current.warned('event:element.scroll:debounced', event)\n\t\t\t\t\tlastTimeStamp.current = event.timeStamp\n\t\t\t\t\tcallbackRef.current(event)\n\t\t\t\t}, interval)\n\t\t\t}\n\t\t}\n\n\t\tif (element && element instanceof HTMLElement) {\n\t\t\tif (element instanceof HTMLBodyElement || element instanceof HTMLHtmlElement) {\n\t\t\t\twindow.addEventListener('scroll', debouncedHandler, { capture: true, passive: true })\n\t\t\t\twindow.addEventListener('resize', debouncedHandler)\n\n\t\t\t\treturn () => {\n\t\t\t\t\twindow.removeEventListener('scroll', debouncedHandler)\n\t\t\t\t\twindow.removeEventListener('resize', debouncedHandler)\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\telement.addEventListener('scroll', debouncedHandler, { passive: true, capture: true })\n\n\t\t\t\treturn () => {\n\t\t\t\t\telement.removeEventListener('scroll', debouncedHandler)\n\t\t\t\t}\n\t\t\t}\n\t\t} else if (element) {\n\t\t\tthrow new Error('Exhaustive error: Expecting element to be instance of HTMLElement')\n\t\t}\n\n\t}, [element, interval, scopedConsoleRef])\n}\n"],"names":[],"mappings":";;;AAWO,SAAS,kBACf,cACA,UACA,WAAmB,MAAO,IACzB;AACK,QAAA,mBAAmB,oBAAoB,mBAAmB;AAE1D,QAAA,cAAc,OAAO,QAAQ;AAAG,cAAY,UAAU;AACtD,QAAA,gBAAgB,OAAe,CAAC;AAEhC,QAAA,UAAU,eAAe,YAAY;AAE3C,kBAAgB,MAAM;AACrB,QAAI,YAAgC;AAEpC,aAAS,iBAAiB,OAAc;AACvC,mBAAa,SAAS;AAEhB,YAAA,QAAQ,MAAM,YAAY,cAAc;AAC7B,uBAAA,QAAQ,OAAO,8BAA8B,KAAK;AAEnE,UAAI,QAAQ,UAAU;AACJ,yBAAA,QAAQ,OAAO,oCAAoC,KAAK;AACzE,oBAAY,QAAQ,KAAK;AACzB,sBAAc,UAAU,MAAM;AAAA,MAAA,OACxB;AACN,oBAAY,WAAW,MAAM;AACX,2BAAA,QAAQ,OAAO,kCAAkC,KAAK;AACvE,wBAAc,UAAU,MAAM;AAC9B,sBAAY,QAAQ,KAAK;AAAA,WACvB,QAAQ;AAAA,MACZ;AAAA,IACD;AAEI,QAAA,WAAW,mBAAmB,aAAa;AAC1C,UAAA,mBAAmB,mBAAmB,mBAAmB,iBAAiB;AACtE,eAAA,iBAAiB,UAAU,kBAAkB,EAAE,SAAS,MAAM,SAAS,MAAM;AAC7E,eAAA,iBAAiB,UAAU,gBAAgB;AAElD,eAAO,MAAM;AACL,iBAAA,oBAAoB,UAAU,gBAAgB;AAC9C,iBAAA,oBAAoB,UAAU,gBAAgB;AAAA,QAAA;AAAA,MACtD,OACM;AACE,gBAAA,iBAAiB,UAAU,kBAAkB,EAAE,SAAS,MAAM,SAAS,MAAM;AAErF,eAAO,MAAM;AACJ,kBAAA,oBAAoB,UAAU,gBAAgB;AAAA,QAAA;AAAA,MAExD;AAAA,eACU,SAAS;AACb,YAAA,IAAI,MAAM,mEAAmE;AAAA,IACpF;AAAA,EAEE,GAAA,CAAC,SAAS,UAAU,gBAAgB,CAAC;AACzC;"}
+{"version":3,"file":"useOnScrollWithin.js","sources":["../../../src/hooks/useOnScrollWithin.ts"],"sourcesContent":["import { useLayoutEffect, useRef } from 'react'\nimport { useScopedConsoleRef } from '../debug-context'\nimport { RefObjectOrElement, unwrapRefValue } from './unwrapRefValue'\n\n/**\n * Invokes callback on scroll event within the scroll container\n *\n * @param refOrElement - Scroll container\n * @param callback - Callback that is invoked on scroll event\n * @param interval - Specifies how often should scroll event invoke callback\n */\nexport function useOnScrollWithin(\n\trefOrElement: RefObjectOrElement<HTMLElement | null> | null,\n\tcallback: (event: Event) => void,\n\tinterval: number = 1000 / 60,\n) {\n\tconst scopedConsoleRef = useScopedConsoleRef('useOnScrollWithin')\n\n\tconst callbackRef = useRef(callback); callbackRef.current = callback\n\tconst lastTimeStamp = useRef<number>(0)\n\n\tuseLayoutEffect(() => {\n\t\tconst element = unwrapRefValue(refOrElement)\n\n\t\tlet timeoutID: number | undefined = undefined\n\n\t\tif (element) {\n\t\t\tfunction debouncedHandler(event: Event) {\n\t\t\t\tclearTimeout(timeoutID)\n\n\t\t\t\tconst delta = event.timeStamp - lastTimeStamp.current\n\t\t\t\tscopedConsoleRef.current.logged('event:element.scroll:delta', delta)\n\n\t\t\t\tif (delta > interval) {\n\t\t\t\t\tscopedConsoleRef.current.warned('event:element.scroll:immediately', event)\n\t\t\t\t\tcallbackRef.current(event)\n\t\t\t\t\tlastTimeStamp.current = event.timeStamp\n\t\t\t\t} else {\n\t\t\t\t\ttimeoutID = setTimeout(() => {\n\t\t\t\t\t\tscopedConsoleRef.current.warned('event:element.scroll:debounced', event)\n\t\t\t\t\t\tlastTimeStamp.current = event.timeStamp\n\t\t\t\t\t\tcallbackRef.current(event)\n\t\t\t\t\t}, interval)\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tif (element instanceof HTMLElement) {\n\t\t\t\tif (element instanceof HTMLBodyElement || element instanceof HTMLHtmlElement) {\n\t\t\t\t\twindow.addEventListener('scroll', debouncedHandler, { capture: true, passive: true })\n\t\t\t\t\twindow.addEventListener('resize', debouncedHandler)\n\n\t\t\t\t\treturn () => {\n\t\t\t\t\t\twindow.removeEventListener('scroll', debouncedHandler)\n\t\t\t\t\t\twindow.removeEventListener('resize', debouncedHandler)\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\telement.addEventListener('scroll', debouncedHandler, { passive: true, capture: true })\n\n\t\t\t\t\treturn () => {\n\t\t\t\t\t\telement.removeEventListener('scroll', debouncedHandler)\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t} else {\n\t\t\tthrow new Error('Exhaustive error: Expecting element to be instance of HTMLElement')\n\t\t}\n\t}, [interval, refOrElement, scopedConsoleRef])\n}\n"],"names":[],"mappings":";;;AAWO,SAAS,kBACf,cACA,UACA,WAAmB,MAAO,IACzB;AACK,QAAA,mBAAmB,oBAAoB,mBAAmB;AAE1D,QAAA,cAAc,OAAO,QAAQ;AAAG,cAAY,UAAU;AACtD,QAAA,gBAAgB,OAAe,CAAC;AAEtC,kBAAgB,MAAM;AACf,UAAA,UAAU,eAAe,YAAY;AAE3C,QAAI,YAAgC;AAEpC,QAAI,SAAS;AACH,UAAA,mBAAT,SAA0B,OAAc;AACvC,qBAAa,SAAS;AAEhB,cAAA,QAAQ,MAAM,YAAY,cAAc;AAC7B,yBAAA,QAAQ,OAAO,8BAA8B,KAAK;AAEnE,YAAI,QAAQ,UAAU;AACJ,2BAAA,QAAQ,OAAO,oCAAoC,KAAK;AACzE,sBAAY,QAAQ,KAAK;AACzB,wBAAc,UAAU,MAAM;AAAA,QAAA,OACxB;AACN,sBAAY,WAAW,MAAM;AACX,6BAAA,QAAQ,OAAO,kCAAkC,KAAK;AACvE,0BAAc,UAAU,MAAM;AAC9B,wBAAY,QAAQ,KAAK;AAAA,aACvB,QAAQ;AAAA,QACZ;AAAA,MAAA;AAGD,UAAI,mBAAmB,aAAa;AAC/B,YAAA,mBAAmB,mBAAmB,mBAAmB,iBAAiB;AACtE,iBAAA,iBAAiB,UAAU,kBAAkB,EAAE,SAAS,MAAM,SAAS,MAAM;AAC7E,iBAAA,iBAAiB,UAAU,gBAAgB;AAElD,iBAAO,MAAM;AACL,mBAAA,oBAAoB,UAAU,gBAAgB;AAC9C,mBAAA,oBAAoB,UAAU,gBAAgB;AAAA,UAAA;AAAA,QACtD,OACM;AACE,kBAAA,iBAAiB,UAAU,kBAAkB,EAAE,SAAS,MAAM,SAAS,MAAM;AAErF,iBAAO,MAAM;AACJ,oBAAA,oBAAoB,UAAU,gBAAgB;AAAA,UAAA;AAAA,QAExD;AAAA,MACD;AAAA,IAAA,OACM;AACA,YAAA,IAAI,MAAM,mEAAmE;AAAA,IACpF;AAAA,EACE,GAAA,CAAC,UAAU,cAAc,gBAAgB,CAAC;AAC9C;"}

package/dist/development/index.js

@@ -6,6 +6,7 @@ import { unwrapRefValue } from "./hooks/unwrapRefValue.js";
 import { useAbortController } from "./hooks/useAbortController.js";
 import { useAddClassNameDuringResize } from "./hooks/useAddClassNameDuringResize.js";
 import { useArrayMapMemo } from "./hooks/useArrayMapMemo.js";
+import { useAutoHeightTextArea } from "./hooks/useAutoHeightTextArea.js";
 import { useComposeRef } from "./hooks/useComposeRef.js";
 import { useConstantLengthInvariant } from "./hooks/useConstantLengthInvariant.js";
 import { useConstantValueInvariant } from "./hooks/useConstantValueInvariant.js";
@@ -21,6 +22,8 @@ import { useForceRender } from "./hooks/useForceRender.js";
 import { useId } from "./hooks/useId.js";
 import { useIsMounted } from "./hooks/useIsMounted.js";
 import { useObjectMemo } from "./hooks/useObjectMemo.js";
+import { useOnElementClickOutsideCallback } from "./hooks/useOnElementClickOutsideCallback.js";
+import { useOnElementMouseEnterDelayedCallback } from "./hooks/useOnElementMouseEnterDelayedCallback.js";
 import { useOnElementMutation } from "./hooks/useOnElementMutation.js";
 import { useOnElementResize } from "./hooks/useOnElementResize.js";
 import { useOnWindowResize } from "./hooks/useOnWindowResize.js";
@@ -67,6 +70,7 @@ export {
   useAbortController,
   useAddClassNameDuringResize,
   useArrayMapMemo,
+  useAutoHeightTextArea,
   useClassName,
   useClassNameFactory,
   useColorScheme,
@@ -85,6 +89,8 @@ export {
   useId,
   useIsMounted,
   useObjectMemo,
+  useOnElementClickOutsideCallback,
+  useOnElementMouseEnterDelayedCallback,
   useOnElementMutation,
   useOnElementResize,
   useOnWindowResize,

package/dist/development/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/development/theming/useClassNameFactory.js

@@ -1,18 +1,20 @@
 import { flatClassNameList, deduplicateClassName } from "@contember/utilities";
 import { useContext } from "react";
 import { GlobalClassNamePrefixContext } from "./GlobalClassNamePrefixContext.js";
+import { useReferentiallyStableCallback } from "../referentiallyStable/useReferentiallyStableCallback.js";
 function useClassNameFactory(componentClassName, glue = "-", prefixOverride) {
   const contextPrefix = useContext(GlobalClassNamePrefixContext);
   const classNamePrefix = prefixOverride === null || prefixOverride === "" ? "" : prefixOverride || contextPrefix;
   const componentClassNameList = flatClassNameList(componentClassName).map(
     (componentClassName2) => `${classNamePrefix}${componentClassName2}`
   );
-  return function componentClassNameFor(suffix = null, additionalClassName = null) {
+  function componentClassNameFor(suffix = null, additionalClassName = null) {
     const classNameSuffix = suffix ?? "";
     return deduplicateClassName((classNameSuffix ? classNameSuffix.match(/^[a-zA-Z0-9]/) ? componentClassNameList.map((componentClassName2) => `${componentClassName2}${glue}${classNameSuffix}`) : componentClassNameList.map((componentClassName2) => `${componentClassName2}${classNameSuffix}`) : componentClassNameList).concat(
       flatClassNameList(additionalClassName)
     )).join(" ");
-  };
+  }
+  return useReferentiallyStableCallback(componentClassNameFor);
 }
 export {
   useClassNameFactory

package/dist/development/theming/useClassNameFactory.js.map

@@ -1 +1 @@
-{"version":3,"file":"useClassNameFactory.js","sources":["../../../src/theming/useClassNameFactory.ts"],"sourcesContent":["import { NestedClassName, deduplicateClassName, flatClassNameList } from '@contember/utilities'\nimport { useContext } from 'react'\nimport { GlobalClassNamePrefixContext } from './GlobalClassNamePrefixContext'\n\n/**\n * Hook for component class name accepting outer class name\n *\n * Returns a reusable function almost that is handy for components\n * with many sub-component parts that should inherit the root component\n * name.\n *\n * Also, product of the factory is a function that can be used outside of rules of hooks.\n *\n * @param componentClassName - Component class name\n * @param glue - String to use to glue component and sub-component suffix\n * @param prefixOverride - Context component prefix override\n * @returns\n */\nexport function useClassNameFactory(\n\tcomponentClassName: NestedClassName,\n\tglue: string | null = '-',\n\tprefixOverride?: string | null | undefined,\n) {\n\tconst contextPrefix = useContext(GlobalClassNamePrefixContext)\n\tconst classNamePrefix: string = prefixOverride === null || prefixOverride === '' ? '' : prefixOverride || contextPrefix\n\n\tconst componentClassNameList: string[] = flatClassNameList(componentClassName).map(\n\t\tcomponentClassName => `${classNamePrefix}${componentClassName}`,\n\t)\n\n\treturn function componentClassNameFor(\n\t\tsuffix: string | null | undefined = null,\n\t\tadditionalClassName: NestedClassName = null,\n\t): string {\n\t\tconst classNameSuffix: string = suffix ?? ''\n\n\t\treturn deduplicateClassName((classNameSuffix\n\t\t\t? (classNameSuffix.match(/^[a-zA-Z0-9]/)\n\t\t\t\t? componentClassNameList.map(componentClassName => `${componentClassName}${glue}${classNameSuffix}`)\n\t\t\t\t: componentClassNameList.map(componentClassName => `${componentClassName}${classNameSuffix}`)\n\t\t\t)\n\t\t\t: componentClassNameList\n\t\t).concat(\n\t\t\tflatClassNameList(additionalClassName),\n\t\t)).join(' ')\n\t}\n}\n"],"names":["componentClassName"],"mappings":";;;AAkBO,SAAS,oBACf,oBACA,OAAsB,KACtB,gBACC;AACK,QAAA,gBAAgB,WAAW,4BAA4B;AAC7D,QAAM,kBAA0B,mBAAmB,QAAQ,mBAAmB,KAAK,KAAK,kBAAkB;AAEpG,QAAA,yBAAmC,kBAAkB,kBAAkB,EAAE;AAAA,IAC9E,CAAAA,wBAAsB,GAAG,kBAAkBA;AAAAA,EAAA;AAG5C,SAAO,SAAS,sBACf,SAAoC,MACpC,sBAAuC,MAC9B;AACT,UAAM,kBAA0B,UAAU;AAEnC,WAAA,sBAAsB,kBACzB,gBAAgB,MAAM,cAAc,IACpC,uBAAuB,IAAI,CAAAA,wBAAsB,GAAGA,sBAAqB,OAAO,iBAAiB,IACjG,uBAAuB,IAAI,CAAAA,wBAAsB,GAAGA,sBAAqB,iBAAiB,IAE3F,wBACD;AAAA,MACD,kBAAkB,mBAAmB;AAAA,IAAA,CACrC,EAAE,KAAK,GAAG;AAAA,EAAA;AAEb;"}
+{"version":3,"file":"useClassNameFactory.js","sources":["../../../src/theming/useClassNameFactory.ts"],"sourcesContent":["import { NestedClassName, deduplicateClassName, flatClassNameList } from '@contember/utilities'\nimport { useContext } from 'react'\nimport { useReferentiallyStableCallback } from '../referentiallyStable'\nimport { GlobalClassNamePrefixContext } from './GlobalClassNamePrefixContext'\n\n/**\n * Hook for component class name accepting outer class name\n *\n * Returns a reusable function almost that is handy for components\n * with many sub-component parts that should inherit the root component\n * name.\n *\n * Also, product of the factory is a function that can be used outside of rules of hooks.\n *\n * @param componentClassName - Component class name\n * @param glue - String to use to glue component and sub-component suffix\n * @param prefixOverride - Context component prefix override\n * @returns\n */\nexport function useClassNameFactory(\n\tcomponentClassName: NestedClassName,\n\tglue: string | null = '-',\n\tprefixOverride?: string | null | undefined,\n) {\n\tconst contextPrefix = useContext(GlobalClassNamePrefixContext)\n\tconst classNamePrefix: string = prefixOverride === null || prefixOverride === '' ? '' : prefixOverride || contextPrefix\n\n\tconst componentClassNameList: string[] = flatClassNameList(componentClassName).map(\n\t\tcomponentClassName => `${classNamePrefix}${componentClassName}`,\n\t)\n\n\tfunction componentClassNameFor(\n\t\tsuffix: string | null | undefined = null,\n\t\tadditionalClassName: NestedClassName = null,\n\t): string {\n\t\tconst classNameSuffix: string = suffix ?? ''\n\n\t\treturn deduplicateClassName((classNameSuffix\n\t\t\t? (classNameSuffix.match(/^[a-zA-Z0-9]/)\n\t\t\t\t? componentClassNameList.map(componentClassName => `${componentClassName}${glue}${classNameSuffix}`)\n\t\t\t\t: componentClassNameList.map(componentClassName => `${componentClassName}${classNameSuffix}`)\n\t\t\t)\n\t\t\t: componentClassNameList\n\t\t).concat(\n\t\t\tflatClassNameList(additionalClassName),\n\t\t)).join(' ')\n\t}\n\n\treturn useReferentiallyStableCallback(componentClassNameFor)\n}\n"],"names":["componentClassName"],"mappings":";;;;AAmBO,SAAS,oBACf,oBACA,OAAsB,KACtB,gBACC;AACK,QAAA,gBAAgB,WAAW,4BAA4B;AAC7D,QAAM,kBAA0B,mBAAmB,QAAQ,mBAAmB,KAAK,KAAK,kBAAkB;AAEpG,QAAA,yBAAmC,kBAAkB,kBAAkB,EAAE;AAAA,IAC9E,CAAAA,wBAAsB,GAAG,kBAAkBA;AAAAA,EAAA;AAG5C,WAAS,sBACR,SAAoC,MACpC,sBAAuC,MAC9B;AACT,UAAM,kBAA0B,UAAU;AAEnC,WAAA,sBAAsB,kBACzB,gBAAgB,MAAM,cAAc,IACpC,uBAAuB,IAAI,CAAAA,wBAAsB,GAAGA,sBAAqB,OAAO,iBAAiB,IACjG,uBAAuB,IAAI,CAAAA,wBAAsB,GAAGA,sBAAqB,iBAAiB,IAE3F,wBACD;AAAA,MACD,kBAAkB,mBAAmB;AAAA,IAAA,CACrC,EAAE,KAAK,GAAG;AAAA,EACZ;AAEA,SAAO,+BAA+B,qBAAqB;AAC5D;"}

package/dist/development/theming/useThemedClassNameFactory.js

@@ -2,6 +2,7 @@ import { flatClassNameList, colorSchemeClassName, deduplicateClassName, filterTh
 import { useContext } from "react";
 import { GlobalClassNamePrefixContext } from "./GlobalClassNamePrefixContext.js";
 import { useColorScheme } from "./contexts.js";
+import { useReferentiallyStableCallback } from "../referentiallyStable/useReferentiallyStableCallback.js";
 function useThemedClassNameFactory(componentClassName, glue = "-", prefixOverride) {
   const contextPrefix = useContext(GlobalClassNamePrefixContext);
   const classNamePrefix = prefixOverride === null || prefixOverride === "" ? "" : prefixOverride || contextPrefix;
@@ -9,7 +10,7 @@ function useThemedClassNameFactory(componentClassName, glue = "-", prefixOverrid
     (componentClassName2) => `${classNamePrefix}${componentClassName2}`
   );
   const colorScheme = colorSchemeClassName(useColorScheme());
-  return function componentClassNameFor(suffix = null, additionalClassName = null) {
+  function componentClassNameFor(suffix = null, additionalClassName = null) {
     const classNameSuffix = suffix ?? "";
     return deduplicateClassName((classNameSuffix ? classNameSuffix.match(/^[a-zA-Z0-9]/) ? componentClassNameList.map((componentClassName2) => `${componentClassName2}${glue}${classNameSuffix}`) : componentClassNameList.map((componentClassName2) => `${componentClassName2}${classNameSuffix}`) : componentClassNameList).concat(
       flatClassNameList(
@@ -19,7 +20,8 @@ function useThemedClassNameFactory(componentClassName, glue = "-", prefixOverrid
         )
       )
     )).join(" ");
-  };
+  }
+  return useReferentiallyStableCallback(componentClassNameFor);
 }
 export {
   useThemedClassNameFactory

package/dist/development/theming/useThemedClassNameFactory.js.map

@@ -1 +1 @@
-{"version":3,"file":"useThemedClassNameFactory.js","sources":["../../../src/theming/useThemedClassNameFactory.ts"],"sourcesContent":["import { NestedClassName, colorSchemeClassName, deduplicateClassName, filterThemedClassName, flatClassNameList } from '@contember/utilities'\nimport { useContext } from 'react'\nimport { GlobalClassNamePrefixContext } from './GlobalClassNamePrefixContext'\nimport { useColorScheme } from './contexts'\n\nexport function useThemedClassNameFactory(\n\tcomponentClassName: NestedClassName,\n\tglue: string | null = '-',\n\tprefixOverride?: string | null | undefined,\n) {\n\tconst contextPrefix = useContext(GlobalClassNamePrefixContext)\n\tconst classNamePrefix: string = prefixOverride === null || prefixOverride === '' ? '' : prefixOverride || contextPrefix\n\n\tconst componentClassNameList: string[] = flatClassNameList(componentClassName).map(\n\t\tcomponentClassName => `${classNamePrefix}${componentClassName}`,\n\t)\n\n\tconst colorScheme = colorSchemeClassName(useColorScheme())\n\n\treturn function componentClassNameFor(\n\t\tsuffix: string | null | undefined = null,\n\t\tadditionalClassName: NestedClassName = null,\n\t): string {\n\t\tconst classNameSuffix: string = suffix ?? ''\n\n\t\treturn deduplicateClassName((classNameSuffix\n\t\t\t? (classNameSuffix.match(/^[a-zA-Z0-9]/)\n\t\t\t\t? componentClassNameList.map(componentClassName => `${componentClassName}${glue}${classNameSuffix}`)\n\t\t\t\t: componentClassNameList.map(componentClassName => `${componentClassName}${classNameSuffix}`)\n\t\t\t)\n\t\t\t: componentClassNameList\n\t\t).concat(\n\t\t\tflatClassNameList(\n\t\t\t\tfilterThemedClassName(\n\t\t\t\t\tadditionalClassName,\n\t\t\t\t\tcolorScheme,\n\t\t\t\t),\n\t\t\t),\n\t\t)).join(' ')\n\t}\n}\n"],"names":["componentClassName"],"mappings":";;;;AAKO,SAAS,0BACf,oBACA,OAAsB,KACtB,gBACC;AACK,QAAA,gBAAgB,WAAW,4BAA4B;AAC7D,QAAM,kBAA0B,mBAAmB,QAAQ,mBAAmB,KAAK,KAAK,kBAAkB;AAEpG,QAAA,yBAAmC,kBAAkB,kBAAkB,EAAE;AAAA,IAC9E,CAAAA,wBAAsB,GAAG,kBAAkBA;AAAAA,EAAA;AAGtC,QAAA,cAAc,qBAAqB,eAAA,CAAgB;AAEzD,SAAO,SAAS,sBACf,SAAoC,MACpC,sBAAuC,MAC9B;AACT,UAAM,kBAA0B,UAAU;AAEnC,WAAA,sBAAsB,kBACzB,gBAAgB,MAAM,cAAc,IACpC,uBAAuB,IAAI,CAAAA,wBAAsB,GAAGA,sBAAqB,OAAO,iBAAiB,IACjG,uBAAuB,IAAI,CAAAA,wBAAsB,GAAGA,sBAAqB,iBAAiB,IAE3F,wBACD;AAAA,MACD;AAAA,QACC;AAAA,UACC;AAAA,UACA;AAAA,QACD;AAAA,MACD;AAAA,IAAA,CACA,EAAE,KAAK,GAAG;AAAA,EAAA;AAEb;"}
+{"version":3,"file":"useThemedClassNameFactory.js","sources":["../../../src/theming/useThemedClassNameFactory.ts"],"sourcesContent":["import { NestedClassName, colorSchemeClassName, deduplicateClassName, filterThemedClassName, flatClassNameList } from '@contember/utilities'\nimport { useContext } from 'react'\nimport { useReferentiallyStableCallback } from '../referentiallyStable'\nimport { GlobalClassNamePrefixContext } from './GlobalClassNamePrefixContext'\nimport { useColorScheme } from './contexts'\n\nexport function useThemedClassNameFactory(\n\tcomponentClassName: NestedClassName,\n\tglue: string | null = '-',\n\tprefixOverride?: string | null | undefined,\n) {\n\tconst contextPrefix = useContext(GlobalClassNamePrefixContext)\n\tconst classNamePrefix: string = prefixOverride === null || prefixOverride === '' ? '' : prefixOverride || contextPrefix\n\n\tconst componentClassNameList: string[] = flatClassNameList(componentClassName).map(\n\t\tcomponentClassName => `${classNamePrefix}${componentClassName}`,\n\t)\n\n\tconst colorScheme = colorSchemeClassName(useColorScheme())\n\n\tfunction componentClassNameFor(\n\t\tsuffix: string | null | undefined = null,\n\t\tadditionalClassName: NestedClassName = null,\n\t): string {\n\t\tconst classNameSuffix: string = suffix ?? ''\n\n\t\treturn deduplicateClassName((classNameSuffix\n\t\t\t? (classNameSuffix.match(/^[a-zA-Z0-9]/)\n\t\t\t\t? componentClassNameList.map(componentClassName => `${componentClassName}${glue}${classNameSuffix}`)\n\t\t\t\t: componentClassNameList.map(componentClassName => `${componentClassName}${classNameSuffix}`)\n\t\t\t)\n\t\t\t: componentClassNameList\n\t\t).concat(\n\t\t\tflatClassNameList(\n\t\t\t\tfilterThemedClassName(\n\t\t\t\t\tadditionalClassName,\n\t\t\t\t\tcolorScheme,\n\t\t\t\t),\n\t\t\t),\n\t\t)).join(' ')\n\t}\n\n\treturn useReferentiallyStableCallback(componentClassNameFor)\n}\n"],"names":["componentClassName"],"mappings":";;;;;AAMO,SAAS,0BACf,oBACA,OAAsB,KACtB,gBACC;AACK,QAAA,gBAAgB,WAAW,4BAA4B;AAC7D,QAAM,kBAA0B,mBAAmB,QAAQ,mBAAmB,KAAK,KAAK,kBAAkB;AAEpG,QAAA,yBAAmC,kBAAkB,kBAAkB,EAAE;AAAA,IAC9E,CAAAA,wBAAsB,GAAG,kBAAkBA;AAAAA,EAAA;AAGtC,QAAA,cAAc,qBAAqB,eAAA,CAAgB;AAEzD,WAAS,sBACR,SAAoC,MACpC,sBAAuC,MAC9B;AACT,UAAM,kBAA0B,UAAU;AAEnC,WAAA,sBAAsB,kBACzB,gBAAgB,MAAM,cAAc,IACpC,uBAAuB,IAAI,CAAAA,wBAAsB,GAAGA,sBAAqB,OAAO,iBAAiB,IACjG,uBAAuB,IAAI,CAAAA,wBAAsB,GAAGA,sBAAqB,iBAAiB,IAE3F,wBACD;AAAA,MACD;AAAA,QACC;AAAA,UACC;AAAA,UACA;AAAA,QACD;AAAA,MACD;AAAA,IAAA,CACA,EAAE,KAAK,GAAG;AAAA,EACZ;AAEA,SAAO,+BAA+B,qBAAqB;AAC5D;"}

package/dist/production/hooks/useAutoHeightTextArea.js

@@ -0,0 +1,41 @@
+import { px } from "@contember/utilities";
+import { useCallback, useLayoutEffect } from "react";
+import { unwrapRefValue } from "./unwrapRefValue.js";
+import { useOnElementResize } from "./useOnElementResize.js";
+const useAutoHeightTextArea = (textAreaRef, value, minRows, maxRows) => {
+  const measure = useCallback((ref, minRows2, maxRows2, value2) => {
+    if (ref) {
+      const rowsAttribute = ref.rows;
+      ref.style.height = "";
+      ref.style.minHeight = "";
+      ref.style.maxHeight = "";
+      if (minRows2 !== maxRows2) {
+        const height = ref.scrollHeight;
+        let minHeight;
+        let maxHeight;
+        ref.rows = minRows2;
+        minHeight = ref.offsetHeight;
+        if (maxRows2 === Infinity) {
+          maxHeight = Infinity;
+        } else {
+          ref.rows = maxRows2;
+          maxHeight = ref.offsetHeight;
+        }
+        ref.style.height = px(height);
+        ref.style.minHeight = px(minHeight);
+        ref.style.maxHeight = px(maxHeight);
+      }
+      ref.rows = rowsAttribute;
+    }
+  }, []);
+  useOnElementResize(textAreaRef, () => {
+    measure(unwrapRefValue(textAreaRef), minRows, maxRows, value);
+  });
+  useLayoutEffect(() => {
+    measure(unwrapRefValue(textAreaRef), minRows, maxRows, value);
+  }, [maxRows, measure, minRows, textAreaRef, value]);
+};
+export {
+  useAutoHeightTextArea
+};
+//# sourceMappingURL=useAutoHeightTextArea.js.map

package/dist/production/hooks/useAutoHeightTextArea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAutoHeightTextArea.js","sources":["../../../src/hooks/useAutoHeightTextArea.ts"],"sourcesContent":["import { px } from '@contember/utilities'\nimport { useCallback, useLayoutEffect } from 'react'\nimport { RefObjectOrElement, unwrapRefValue } from './unwrapRefValue'\nimport { useOnElementResize } from './useOnElementResize'\n\nexport const useAutoHeightTextArea = (\n\ttextAreaRef: RefObjectOrElement<HTMLTextAreaElement>,\n\tvalue: string,\n\tminRows: number,\n\tmaxRows: number,\n) => {\n\tconst measure = useCallback((ref: HTMLTextAreaElement | null, minRows: number, maxRows: number, value: string) => {\n\t\tif (ref) {\n\t\t\tconst rowsAttribute = ref.rows\n\n\t\t\tref.style.height = ''\n\t\t\tref.style.minHeight = ''\n\t\t\tref.style.maxHeight = ''\n\n\t\t\tif (minRows !== maxRows) {\n\t\t\t\tconst height = ref.scrollHeight\n\t\t\t\tlet minHeight: number\n\t\t\t\tlet maxHeight: number\n\n\t\t\t\tref.rows = minRows\n\t\t\t\tminHeight = ref.offsetHeight\n\n\t\t\t\tif (maxRows === Infinity) {\n\t\t\t\t\tmaxHeight = Infinity\n\t\t\t\t} else {\n\t\t\t\t\tref.rows = maxRows\n\t\t\t\t\tmaxHeight = ref.offsetHeight\n\t\t\t\t}\n\n\t\t\t\tref.style.height = px(height)\n\t\t\t\tref.style.minHeight = px(minHeight)\n\t\t\t\tref.style.maxHeight = px(maxHeight)\n\t\t\t}\n\n\t\t\tref.rows = rowsAttribute\n\t\t}\n\t}, [])\n\n\tuseOnElementResize(textAreaRef, () => {\n\t\tmeasure(unwrapRefValue(textAreaRef), minRows, maxRows, value)\n\t})\n\n\tuseLayoutEffect(() => {\n\t\tmeasure(unwrapRefValue(textAreaRef), minRows, maxRows, value)\n\t}, [maxRows, measure, minRows, textAreaRef, value])\n}\n"],"names":["minRows","maxRows","value"],"mappings":";;;;AAKO,MAAM,wBAAwB,CACpC,aACA,OACA,SACA,YACI;AACJ,QAAM,UAAU,YAAY,CAAC,KAAiCA,UAAiBC,UAAiBC,WAAkB;AACjH,QAAI,KAAK;AACR,YAAM,gBAAgB,IAAI;AAE1B,UAAI,MAAM,SAAS;AACnB,UAAI,MAAM,YAAY;AACtB,UAAI,MAAM,YAAY;AAEtB,UAAIF,aAAYC,UAAS;AACxB,cAAM,SAAS,IAAI;AACf,YAAA;AACA,YAAA;AAEJ,YAAI,OAAOD;AACX,oBAAY,IAAI;AAEhB,YAAIC,aAAY,UAAU;AACb,sBAAA;AAAA,QAAA,OACN;AACN,cAAI,OAAOA;AACX,sBAAY,IAAI;AAAA,QACjB;AAEI,YAAA,MAAM,SAAS,GAAG,MAAM;AACxB,YAAA,MAAM,YAAY,GAAG,SAAS;AAC9B,YAAA,MAAM,YAAY,GAAG,SAAS;AAAA,MACnC;AAEA,UAAI,OAAO;AAAA,IACZ;AAAA,EACD,GAAG,CAAE,CAAA;AAEL,qBAAmB,aAAa,MAAM;AACrC,YAAQ,eAAe,WAAW,GAAG,SAAS,SAAS,KAAK;AAAA,EAAA,CAC5D;AAED,kBAAgB,MAAM;AACrB,YAAQ,eAAe,WAAW,GAAG,SAAS,SAAS,KAAK;AAAA,EAAA,GAC1D,CAAC,SAAS,SAAS,SAAS,aAAa,KAAK,CAAC;AACnD;"}

package/dist/production/hooks/useOnElementClickOutsideCallback.js

@@ -0,0 +1,20 @@
+import { useEffect } from "react";
+import { unwrapRefValue } from "./unwrapRefValue.js";
+function useOnElementClickOutsideCallback(refOrElement, callback) {
+  useEffect(() => {
+    const refValue = unwrapRefValue(refOrElement);
+    const handleClickOutside = (event) => {
+      if (refValue && !refValue.contains(event.target)) {
+        callback(event);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [callback, refOrElement]);
+}
+export {
+  useOnElementClickOutsideCallback
+};
+//# sourceMappingURL=useOnElementClickOutsideCallback.js.map

package/dist/production/hooks/useOnElementClickOutsideCallback.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useOnElementClickOutsideCallback.js","sources":["../../../src/hooks/useOnElementClickOutsideCallback.ts"],"sourcesContent":["import { useEffect } from 'react'\nimport { RefObjectOrElement, unwrapRefValue } from './unwrapRefValue'\n\nexport function useOnElementClickOutsideCallback(\n\trefOrElement: RefObjectOrElement<HTMLElement>,\n\tcallback: (event: MouseEvent) => void,\n): void {\n\tuseEffect(() => {\n\t\tconst refValue = unwrapRefValue(refOrElement)\n\n\t\tconst handleClickOutside = (event: MouseEvent) => {\n\t\t\tif (refValue && !refValue.contains(event.target as Node)) {\n\t\t\t\tcallback(event)\n\t\t\t}\n\t\t}\n\n\t\tdocument.addEventListener('mousedown', handleClickOutside)\n\n\t\treturn () => {\n\t\t\tdocument.removeEventListener('mousedown', handleClickOutside)\n\t\t}\n\t}, [callback, refOrElement])\n}\n"],"names":[],"mappings":";;AAGgB,SAAA,iCACf,cACA,UACO;AACP,YAAU,MAAM;AACT,UAAA,WAAW,eAAe,YAAY;AAEtC,UAAA,qBAAqB,CAAC,UAAsB;AACjD,UAAI,YAAY,CAAC,SAAS,SAAS,MAAM,MAAc,GAAG;AACzD,iBAAS,KAAK;AAAA,MACf;AAAA,IAAA;AAGQ,aAAA,iBAAiB,aAAa,kBAAkB;AAEzD,WAAO,MAAM;AACH,eAAA,oBAAoB,aAAa,kBAAkB;AAAA,IAAA;AAAA,EAC7D,GACE,CAAC,UAAU,YAAY,CAAC;AAC5B;"}

package/dist/production/hooks/useOnElementMouseEnterDelayedCallback.js

@@ -0,0 +1,33 @@
+import { useEffect } from "react";
+import { unwrapRefValue } from "./unwrapRefValue.js";
+function useOnElementMouseEnterDelayedCallback(refOrElement, callback, timeoutMs = 300) {
+  useEffect(() => {
+    const refValue = unwrapRefValue(refOrElement);
+    if (refValue) {
+      let handleMouseEnter = function(event) {
+        clearTimeout(timeoutID);
+        timeoutID = setTimeout(() => {
+          callback(event);
+        }, timeoutMs);
+      }, handleMouseLeave = function() {
+        clearTimeout(timeoutID);
+      }, handleMouseDown = function(event) {
+        clearTimeout(timeoutID);
+        callback(event);
+      };
+      let timeoutID = void 0;
+      refValue.addEventListener("mouseenter", handleMouseEnter);
+      refValue.addEventListener("mouseleave", handleMouseLeave);
+      refValue.addEventListener("mousedown", handleMouseDown);
+      return () => {
+        refValue.removeEventListener("mouseover", handleMouseEnter);
+        refValue.removeEventListener("mouseleave", handleMouseLeave);
+        refValue.removeEventListener("mousedown", handleMouseDown);
+      };
+    }
+  }, [callback, refOrElement, timeoutMs]);
+}
+export {
+  useOnElementMouseEnterDelayedCallback
+};
+//# sourceMappingURL=useOnElementMouseEnterDelayedCallback.js.map

package/dist/production/hooks/useOnElementMouseEnterDelayedCallback.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useOnElementMouseEnterDelayedCallback.js","sources":["../../../src/hooks/useOnElementMouseEnterDelayedCallback.ts"],"sourcesContent":["import { useEffect } from 'react'\nimport { RefObjectOrElement, unwrapRefValue } from './unwrapRefValue'\n\n/**\n * Calls the callback when the mouse enters the element, but only after a timeout, e.g. for tooltips or dropdown menus.\n *\n * Calls the callback immediately if the mouse is pressed down with `event.type` of `mousedown`. This is useful for\n * dropdown menus, where the user may click on the menu item before the callback is called resulting in the menu\n * opening and closing immediately.\n *\n * @param refOrElement - The element or ref to the element to attach the event listener to.\n * @param callback - The callback to call when the mouse enters the element.\n * @param timeoutMs - The timeout in milliseconds to wait before calling the callback.\n */\nexport function useOnElementMouseEnterDelayedCallback(\n\trefOrElement: RefObjectOrElement<HTMLElement>,\n\tcallback: (event: MouseEvent) => void,\n\ttimeoutMs: number = 300,\n): void {\n\tuseEffect(() => {\n\t\tconst refValue = unwrapRefValue(refOrElement)\n\n\t\tif (refValue) {\n\t\t\tlet timeoutID: ReturnType<typeof setTimeout> | undefined = undefined\n\n\t\t\tfunction handleMouseEnter(event: MouseEvent) {\n\t\t\t\tclearTimeout(timeoutID)\n\n\t\t\t\ttimeoutID = setTimeout(() => {\n\t\t\t\t\tcallback(event)\n\t\t\t\t}, timeoutMs)\n\t\t\t}\n\n\t\t\tfunction handleMouseLeave() {\n\t\t\t\tclearTimeout(timeoutID)\n\t\t\t}\n\n\t\t\tfunction handleMouseDown(event: MouseEvent) {\n\t\t\t\tclearTimeout(timeoutID)\n\t\t\t\tcallback(event)\n\t\t\t}\n\n\t\t\trefValue.addEventListener('mouseenter', handleMouseEnter)\n\t\t\trefValue.addEventListener('mouseleave', handleMouseLeave)\n\t\t\trefValue.addEventListener('mousedown', handleMouseDown)\n\n\t\t\treturn () => {\n\t\t\t\trefValue.removeEventListener('mouseover', handleMouseEnter)\n\t\t\t\trefValue.removeEventListener('mouseleave', handleMouseLeave)\n\t\t\t\trefValue.removeEventListener('mousedown', handleMouseDown)\n\t\t\t}\n\t\t}\n\t}, [callback, refOrElement, timeoutMs])\n}\n"],"names":[],"mappings":";;AAcO,SAAS,sCACf,cACA,UACA,YAAoB,KACb;AACP,YAAU,MAAM;AACT,UAAA,WAAW,eAAe,YAAY;AAE5C,QAAI,UAAU;AAGJ,UAAA,mBAAT,SAA0B,OAAmB;AAC5C,qBAAa,SAAS;AAEtB,oBAAY,WAAW,MAAM;AAC5B,mBAAS,KAAK;AAAA,WACZ,SAAS;AAAA,MACb,GAES,mBAAT,WAA4B;AAC3B,qBAAa,SAAS;AAAA,MAAA,GAGd,kBAAT,SAAyB,OAAmB;AAC3C,qBAAa,SAAS;AACtB,iBAAS,KAAK;AAAA,MAAA;AAhBf,UAAI,YAAuD;AAmBlD,eAAA,iBAAiB,cAAc,gBAAgB;AAC/C,eAAA,iBAAiB,cAAc,gBAAgB;AAC/C,eAAA,iBAAiB,aAAa,eAAe;AAEtD,aAAO,MAAM;AACH,iBAAA,oBAAoB,aAAa,gBAAgB;AACjD,iBAAA,oBAAoB,cAAc,gBAAgB;AAClD,iBAAA,oBAAoB,aAAa,eAAe;AAAA,MAAA;AAAA,IAE3D;AAAA,EACE,GAAA,CAAC,UAAU,cAAc,SAAS,CAAC;AACvC;"}

package/dist/production/hooks/useOnElementResize.js

@@ -4,39 +4,41 @@ import { useScopedConsoleRef } from "../debug-context/Context.js";
 function useOnElementResize(refOrElement, callback, options = {}, timeout = 300) {
   const scopedConsoleRef = useScopedConsoleRef("useOnElementResize");
   const { box = "border-box" } = options;
-  const element = unwrapRefValue(refOrElement);
   const callbackRef = useRef(callback);
   callbackRef.current = callback;
   const lastTimeStamp = useRef(0);
   useLayoutEffect(() => {
-    let timeoutID = void 0;
-    function debouncedOnChange([entry]) {
-      const timeStamp = Date.now();
-      const delta = timeStamp - lastTimeStamp.current;
-      if (delta > timeout) {
-        scopedConsoleRef.current.warned("element.resize:immediate", null);
-        callbackRef.current(entry);
-        lastTimeStamp.current = timeStamp;
+    const element = unwrapRefValue(refOrElement);
+    if (element) {
+      if (element instanceof HTMLElement) {
+        let debouncedOnChange = function([entry]) {
+          const timeStamp = Date.now();
+          const delta = timeStamp - lastTimeStamp.current;
+          if (delta > timeout) {
+            scopedConsoleRef.current.warned("element.resize:immediate", null);
+            callbackRef.current(entry);
+            lastTimeStamp.current = timeStamp;
+          } else {
+            clearTimeout(timeoutID);
+            timeoutID = setTimeout(() => {
+              scopedConsoleRef.current.warned("element.resize:debounced", null);
+              callbackRef.current(entry);
+              lastTimeStamp.current = timeStamp;
+            }, timeout);
+          }
+        };
+        let timeoutID = void 0;
+        const resizeObserver = new ResizeObserver(debouncedOnChange);
+        resizeObserver.observe(element, { box });
+        return () => {
+          clearTimeout(timeoutID);
+          resizeObserver.unobserve(element);
+        };
       } else {
-        clearTimeout(timeoutID);
-        timeoutID = setTimeout(() => {
-          scopedConsoleRef.current.warned("element.resize:debounced", null);
-          callbackRef.current(entry);
-          lastTimeStamp.current = timeStamp;
-        }, timeout);
+        throw new Error("Exhaustive error: Expecting element to be instance of HTMLElement");
       }
     }
-    if (element instanceof HTMLElement) {
-      const resizeObserver = new ResizeObserver(debouncedOnChange);
-      resizeObserver.observe(element, { box });
-      return () => {
-        clearTimeout(timeoutID);
-        resizeObserver.unobserve(element);
-      };
-    } else if (element) {
-      throw new Error("Exhaustive error: Expecting element to be instance of HTMLElement");
-    }
-  }, [box, element, scopedConsoleRef, timeout]);
+  }, [box, refOrElement, scopedConsoleRef, timeout]);
 }
 export {
   useOnElementResize