@contember/react-utils 1.2.0-rc.8 → 1.2.0

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/useContainerWidth.js

@@ -1,6 +1,6 @@
 import { createContext, useContext } from "react";
 import { useWindowSize } from "./useWindowSize.js";
-const ContainerWidthContext = createContext(null);
+const ContainerWidthContext = createContext(void 0);
 ContainerWidthContext.displayName = "ContainerWidthContext";
 function useContainerWidth() {
   const maybeContainerWidth = useContext(ContainerWidthContext);

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

@@ -1 +1 @@
-{"version":3,"file":"useContainerWidth.js","sources":["../../../src/hooks/useContainerWidth.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\nimport { useWindowSize } from './useWindowSize'\n\nexport type ContainerWidthContextType = number\nexport const ContainerWidthContext = createContext<ContainerWidthContextType | null>(null)\nContainerWidthContext.displayName = 'ContainerWidthContext'\n\nexport function useContainerWidth(): number {\n\tconst maybeContainerWidth = useContext(ContainerWidthContext)\n\tconst { width: windowWidth } = useWindowSize()\n\n\treturn maybeContainerWidth ?? windowWidth\n}\n"],"names":[],"mappings":";;AAIa,MAAA,wBAAwB,cAAgD,IAAI;AACzF,sBAAsB,cAAc;AAE7B,SAAS,oBAA4B;AACrC,QAAA,sBAAsB,WAAW,qBAAqB;AAC5D,QAAM,EAAE,OAAO,YAAY,IAAI,cAAc;AAE7C,SAAO,uBAAuB;AAC/B;"}
+{"version":3,"file":"useContainerWidth.js","sources":["../../../src/hooks/useContainerWidth.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\nimport { useWindowSize } from './useWindowSize'\n\nexport type ContainerWidthContextType = number\nexport const ContainerWidthContext = createContext<ContainerWidthContextType | null | undefined>(undefined)\nContainerWidthContext.displayName = 'ContainerWidthContext'\n\nexport function useContainerWidth(): number {\n\tconst maybeContainerWidth = useContext(ContainerWidthContext)\n\tconst { width: windowWidth } = useWindowSize()\n\n\treturn maybeContainerWidth ?? windowWidth\n}\n"],"names":[],"mappings":";;AAIa,MAAA,wBAAwB,cAA4D,MAAS;AAC1G,sBAAsB,cAAc;AAE7B,SAAS,oBAA4B;AACrC,QAAA,sBAAsB,WAAW,qBAAqB;AAC5D,QAAM,EAAE,OAAO,YAAY,IAAI,cAAc;AAE7C,SAAO,uBAAuB;AAC/B;"}

package/dist/development/hooks/useElementTopOffset.js

@@ -0,0 +1,29 @@
+import { useState, useLayoutEffect } from "react";
+function useElementTopOffset(ref) {
+  const [offsetTop, setOffsetTop] = useState(void 0);
+  useLayoutEffect(() => {
+    if (!ref?.current) {
+      return;
+    }
+    const element = ref.current;
+    function updateTopOffsetCallback() {
+      setOffsetTop(element.offsetTop);
+    }
+    function updateTopOffsetHandler() {
+      requestAnimationFrame(updateTopOffsetCallback);
+    }
+    updateTopOffsetHandler();
+    const observer = new ResizeObserver(() => {
+      requestAnimationFrame(updateTopOffsetCallback);
+    });
+    observer.observe(element);
+    return () => {
+      observer.unobserve(element);
+    };
+  }, [ref]);
+  return offsetTop;
+}
+export {
+  useElementTopOffset
+};
+//# sourceMappingURL=useElementTopOffset.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useElementTopOffset.js","sources":["../../../src/hooks/useElementTopOffset.ts"],"sourcesContent":["import { RefObject, useLayoutEffect, useState } from 'react'\n\nexport function useElementTopOffset(ref?: RefObject<HTMLElement>): number | undefined {\n\tconst [offsetTop, setOffsetTop] = useState<number | undefined>(undefined)\n\n\tuseLayoutEffect(() => {\n\t\tif (!ref?.current) {\n\t\t\treturn\n\t\t}\n\n\t\tconst element = ref.current\n\n\t\tfunction updateTopOffsetCallback() {\n\t\t\tsetOffsetTop(element.offsetTop)\n\t\t}\n\n\t\tfunction updateTopOffsetHandler() {\n\t\t\trequestAnimationFrame(updateTopOffsetCallback)\n\t\t}\n\n\t\tupdateTopOffsetHandler()\n\n\t\tconst observer = new ResizeObserver(() => {\n\t\t\trequestAnimationFrame(updateTopOffsetCallback)\n\t\t})\n\n\t\tobserver.observe(element)\n\n\t\treturn () => {\n\t\t\tobserver.unobserve(element)\n\t\t}\n\t}, [ref])\n\n\treturn offsetTop\n}\n"],"names":[],"mappings":";AAEO,SAAS,oBAAoB,KAAkD;AACrF,QAAM,CAAC,WAAW,YAAY,IAAI,SAA6B,MAAS;AAExE,kBAAgB,MAAM;AACjB,QAAA,CAAC,KAAK,SAAS;AAClB;AAAA,IACD;AAEA,UAAM,UAAU,IAAI;AAEpB,aAAS,0BAA0B;AAClC,mBAAa,QAAQ,SAAS;AAAA,IAC/B;AAEA,aAAS,yBAAyB;AACjC,4BAAsB,uBAAuB;AAAA,IAC9C;AAEuB;AAEjB,UAAA,WAAW,IAAI,eAAe,MAAM;AACzC,4BAAsB,uBAAuB;AAAA,IAAA,CAC7C;AAED,aAAS,QAAQ,OAAO;AAExB,WAAO,MAAM;AACZ,eAAS,UAAU,OAAO;AAAA,IAAA;AAAA,EAC3B,GACE,CAAC,GAAG,CAAC;AAED,SAAA;AACR;"}

package/dist/development/hooks/useExpectSameValueReference.js

@@ -1,4 +1,4 @@
-import deepEqual from "deep-equal";
+import deepEqual from "fast-deep-equal/es6/index.js";
 import { useRef } from "react";
 function useExpectSameValueReference(next, shouldThrow = false) {
   const previous = useRef(next);

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

@@ -1 +1 @@
-{"version":3,"file":"useExpectSameValueReference.js","sources":["../../../src/hooks/useExpectSameValueReference.ts"],"sourcesContent":["import deepEqual from 'deep-equal'\nimport { useRef } from 'react'\n\n/**\n * Checks whether the next value is the same reference as the previous one\n *\n * If not, it checks whether the values are deeply equal. If not, it logs an error.\n *\n * @param next - Value to be checked.\n * @param shouldThrow - If true, it throws an error instead of logging it. Defaults to false.\n * @returns void\n * -\n * @example\n * ```ts\n * useExpectSameValueReference(style)\n * ```\n * @example\n * ```ts\n * useExpectSameValueReference(style, true)\n * ```\n * @example\n * ```ts\n * useExpectSameValueReference(style, import.meta.env.DEV)\n * ```\n */\nexport function useExpectSameValueReference<T>(next: T, shouldThrow: boolean = false) {\n\tconst previous = useRef(next)\n\n\tif (next !== previous.current\n\t\t&& typeof next === 'object'\n\t\t&& typeof previous.current === 'object'\n\t\t&& deepEqual(next, previous.current)\n\t) {\n\t\tif (import.meta.env.DEV) {\n\t\t\tconsole.error(\n\t\t\t\t'Previous and next values do not match in reference although match in value. ' +\n\t\t\t\t'Try declaring constants outside of the component scope. ' +\n\t\t\t\t'Otherwise try to memoize callbacks with useCallback, ' +\n\t\t\t\t'useReferentiallyStableCallback useEvent, useRef or useMemo.', {\n\t\t\t\tprevious: previous.current,\n\t\t\t\tnext,\n\t\t\t})\n\t\t}\n\n\t\tif (shouldThrow) {\n\t\t\tthrow new Error('Expecting same reference for same values')\n\t\t}\n\t}\n\n\tprevious.current = next\n}\n"],"names":[],"mappings":";;AAyBgB,SAAA,4BAA+B,MAAS,cAAuB,OAAO;AAC/E,QAAA,WAAW,OAAO,IAAI;AAE5B,MAAI,SAAS,SAAS,WAClB,OAAO,SAAS,YAChB,OAAO,SAAS,YAAY,YAC5B,UAAU,MAAM,SAAS,OAAO,GAClC;AACwB;AAChB,cAAA;AAAA,QACP;AAAA,QAG+D;AAAA,UAC/D,UAAU,SAAS;AAAA,UACnB;AAAA,QACD;AAAA,MAAA;AAAA,IACD;AAEA,QAAI,aAAa;AACV,YAAA,IAAI,MAAM,0CAA0C;AAAA,IAC3D;AAAA,EACD;AAEA,WAAS,UAAU;AACpB;"}
+{"version":3,"file":"useExpectSameValueReference.js","sources":["../../../src/hooks/useExpectSameValueReference.ts"],"sourcesContent":["import deepEqual from 'fast-deep-equal/es6/index.js'\nimport { useRef } from 'react'\n\n/**\n * Checks whether the next value is the same reference as the previous one\n *\n * If not, it checks whether the values are deeply equal. If not, it logs an error.\n *\n * @param next - Value to be checked.\n * @param shouldThrow - If true, it throws an error instead of logging it. Defaults to false.\n * @returns void\n * -\n * @example\n * ```ts\n * useExpectSameValueReference(style)\n * ```\n * @example\n * ```ts\n * useExpectSameValueReference(style, true)\n * ```\n * @example\n * ```ts\n * useExpectSameValueReference(style, import.meta.env.DEV)\n * ```\n */\nexport function useExpectSameValueReference<T>(next: T, shouldThrow: boolean = false) {\n\tconst previous = useRef(next)\n\n\tif (next !== previous.current\n\t\t&& typeof next === 'object'\n\t\t&& typeof previous.current === 'object'\n\t\t&& deepEqual(next, previous.current)\n\t) {\n\t\tif (import.meta.env.DEV) {\n\t\t\tconsole.error(\n\t\t\t\t'Previous and next values do not match in reference although match in value. ' +\n\t\t\t\t'Try declaring constants outside of the component scope. ' +\n\t\t\t\t'Otherwise try to memoize callbacks with useCallback, ' +\n\t\t\t\t'useReferentiallyStableCallback useEvent, useRef or useMemo.', {\n\t\t\t\tprevious: previous.current,\n\t\t\t\tnext,\n\t\t\t})\n\t\t}\n\n\t\tif (shouldThrow) {\n\t\t\tthrow new Error('Expecting same reference for same values')\n\t\t}\n\t}\n\n\tprevious.current = next\n}\n"],"names":[],"mappings":";;AAyBgB,SAAA,4BAA+B,MAAS,cAAuB,OAAO;AAC/E,QAAA,WAAW,OAAO,IAAI;AAE5B,MAAI,SAAS,SAAS,WAClB,OAAO,SAAS,YAChB,OAAO,SAAS,YAAY,YAC5B,UAAU,MAAM,SAAS,OAAO,GAClC;AACwB;AAChB,cAAA;AAAA,QACP;AAAA,QAG+D;AAAA,UAC/D,UAAU,SAAS;AAAA,UACnB;AAAA,QACD;AAAA,MAAA;AAAA,IACD;AAEA,QAAI,aAAa;AACV,YAAA,IAAI,MAAM,0CAA0C;AAAA,IAC3D;AAAA,EACD;AAEA,WAAS,UAAU;AACpB;"}

package/dist/development/hooks/useId.js

@@ -1,11 +1,11 @@
-import { useRef } from "react";
+import { useMemo } from "react";
 const count = { current: 360 };
 function nextId() {
   count.current += 1;
   return `:${count.current.toString(36)}:`;
 }
 function useId() {
-  return useRef(nextId()).current;
+  return useMemo(() => nextId(), []);
 }
 export {
   useId

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

@@ -1 +1 @@
-{"version":3,"file":"useId.js","sources":["../../../src/hooks/useId.ts"],"sourcesContent":["import { useRef } from 'react'\n\nconst count = { current: 360 }\n\nfunction nextId() {\n\tcount.current += 1\n\n\treturn `:${count.current.toString(36)}:`\n}\n\n/**\n * Returns a unique ID string\n * @internal\n *\n * NOTE: This hook is a temporary solution until we stop supporting React < 18\n *\n * @returns a unique id\n */\nexport function useId() {\n\treturn useRef(nextId()).current\n}\n"],"names":[],"mappings":";AAEA,MAAM,QAAQ,EAAE,SAAS;AAEzB,SAAS,SAAS;AACjB,QAAM,WAAW;AAEjB,SAAO,IAAI,MAAM,QAAQ,SAAS,EAAE;AACrC;AAUO,SAAS,QAAQ;AAChB,SAAA,OAAO,QAAQ,EAAE;AACzB;"}
+{"version":3,"file":"useId.js","sources":["../../../src/hooks/useId.ts"],"sourcesContent":["import { useMemo, useRef } from 'react'\n\nconst count = { current: 360 }\n\nfunction nextId() {\n\tcount.current += 1\n\n\treturn `:${count.current.toString(36)}:`\n}\n\n/**\n * Returns a unique ID string\n * @internal\n *\n * NOTE: This hook is a temporary solution until we stop supporting React < 18\n *\n * @returns a unique id\n */\nexport function useId() {\n\treturn useMemo(() => nextId(), [])\n}\n"],"names":[],"mappings":";AAEA,MAAM,QAAQ,EAAE,SAAS;AAEzB,SAAS,SAAS;AACjB,QAAM,WAAW;AAEjB,SAAO,IAAI,MAAM,QAAQ,SAAS,EAAE;AACrC;AAUO,SAAS,QAAQ;AACvB,SAAO,QAAQ,MAAM,OAAO,GAAG,CAAE,CAAA;AAClC;"}

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/useOnElementMutation.js

@@ -1,4 +1,4 @@
-import deepEqual from "deep-equal";
+import deepEqual from "fast-deep-equal/es6/index.js";
 import { useRef, useState, useEffect, useLayoutEffect } from "react";
 import { unwrapRefValue } from "./unwrapRefValue.js";
 import { useScopedConsoleRef } from "../debug-context/Context.js";

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

@@ -1 +1 @@
-{"version":3,"file":"useOnElementMutation.js","sources":["../../../src/hooks/useOnElementMutation.ts"],"sourcesContent":["import deepEqual from 'deep-equal'\nimport { useEffect, useLayoutEffect, useRef, useState } from 'react'\nimport { useScopedConsoleRef } from '../debug-context'\nimport { RefObjectOrElement, unwrapRefValue } from './unwrapRefValue'\n\nexport function useOnElementMutation(\n\trefOrElement: RefObjectOrElement<HTMLElement | undefined>,\n\tcallback: MutationCallback,\n\toptions: MutationObserverInit = { attributes: true, childList: true, subtree: true },\n) {\n\tconst scopedConsoleRef = useScopedConsoleRef('useOnElementMutation')\n\n\tconst callbackRef = useRef(callback); callbackRef.current = callback\n\tconst optionsRef = useRef<MutationObserverInit>(options); optionsRef.current = options\n\n\tconst [optionsState, setOptionsState] = useState<MutationObserverInit>(options)\n\n\tuseEffect(() => {\n\t\tif (!deepEqual(optionsRef.current, options)) {\n\t\t\tsetOptionsState(options)\n\t\t}\n\t}, [options])\n\n\tuseLayoutEffect(() => {\n\t\tconst element = unwrapRefValue(refOrElement)\n\n\t\tif (element) {\n\t\t\tfunction handler(mutations: MutationRecord[], observer: MutationObserver) {\n\t\t\t\tscopedConsoleRef.current.logged('element.mutations', mutations)\n\t\t\t\tcallbackRef.current(mutations, observer)\n\t\t\t}\n\n\t\t\tconst observer = new MutationObserver(handler)\n\n\t\t\tobserver.observe(element, optionsState)\n\n\t\t\treturn () => {\n\t\t\t\tobserver.disconnect()\n\t\t\t}\n\t\t}\n\t}, [optionsState, refOrElement, scopedConsoleRef])\n}\n"],"names":["observer"],"mappings":";;;;AAKgB,SAAA,qBACf,cACA,UACA,UAAgC,EAAE,YAAY,MAAM,WAAW,MAAM,SAAS,KAAA,GAC7E;AACK,QAAA,mBAAmB,oBAAoB,sBAAsB;AAE7D,QAAA,cAAc,OAAO,QAAQ;AAAG,cAAY,UAAU;AACtD,QAAA,aAAa,OAA6B,OAAO;AAAG,aAAW,UAAU;AAE/E,QAAM,CAAC,cAAc,eAAe,IAAI,SAA+B,OAAO;AAE9E,YAAU,MAAM;AACf,QAAI,CAAC,UAAU,WAAW,SAAS,OAAO,GAAG;AAC5C,sBAAgB,OAAO;AAAA,IACxB;AAAA,EAAA,GACE,CAAC,OAAO,CAAC;AAEZ,kBAAgB,MAAM;AACf,UAAA,UAAU,eAAe,YAAY;AAE3C,QAAI,SAAS;AACH,UAAA,UAAT,SAAiB,WAA6BA,WAA4B;AACxD,yBAAA,QAAQ,OAAO,qBAAqB,SAAS;AAClD,oBAAA,QAAQ,WAAWA,SAAQ;AAAA,MAAA;AAGlC,YAAA,WAAW,IAAI,iBAAiB,OAAO;AAEpC,eAAA,QAAQ,SAAS,YAAY;AAEtC,aAAO,MAAM;AACZ,iBAAS,WAAW;AAAA,MAAA;AAAA,IAEtB;AAAA,EACE,GAAA,CAAC,cAAc,cAAc,gBAAgB,CAAC;AAClD;"}
+{"version":3,"file":"useOnElementMutation.js","sources":["../../../src/hooks/useOnElementMutation.ts"],"sourcesContent":["import deepEqual from 'fast-deep-equal/es6/index.js'\nimport { useEffect, useLayoutEffect, useRef, useState } from 'react'\nimport { useScopedConsoleRef } from '../debug-context'\nimport { RefObjectOrElement, unwrapRefValue } from './unwrapRefValue'\n\nexport function useOnElementMutation(\n\trefOrElement: RefObjectOrElement<HTMLElement | undefined>,\n\tcallback: MutationCallback,\n\toptions: MutationObserverInit = { attributes: true, childList: true, subtree: true },\n) {\n\tconst scopedConsoleRef = useScopedConsoleRef('useOnElementMutation')\n\n\tconst callbackRef = useRef(callback); callbackRef.current = callback\n\tconst optionsRef = useRef<MutationObserverInit>(options); optionsRef.current = options\n\n\tconst [optionsState, setOptionsState] = useState<MutationObserverInit>(options)\n\n\tuseEffect(() => {\n\t\tif (!deepEqual(optionsRef.current, options)) {\n\t\t\tsetOptionsState(options)\n\t\t}\n\t}, [options])\n\n\tuseLayoutEffect(() => {\n\t\tconst element = unwrapRefValue(refOrElement)\n\n\t\tif (element) {\n\t\t\tfunction handler(mutations: MutationRecord[], observer: MutationObserver) {\n\t\t\t\tscopedConsoleRef.current.logged('element.mutations', mutations)\n\t\t\t\tcallbackRef.current(mutations, observer)\n\t\t\t}\n\n\t\t\tconst observer = new MutationObserver(handler)\n\n\t\t\tobserver.observe(element, optionsState)\n\n\t\t\treturn () => {\n\t\t\t\tobserver.disconnect()\n\t\t\t}\n\t\t}\n\t}, [optionsState, refOrElement, scopedConsoleRef])\n}\n"],"names":["observer"],"mappings":";;;;AAKgB,SAAA,qBACf,cACA,UACA,UAAgC,EAAE,YAAY,MAAM,WAAW,MAAM,SAAS,KAAA,GAC7E;AACK,QAAA,mBAAmB,oBAAoB,sBAAsB;AAE7D,QAAA,cAAc,OAAO,QAAQ;AAAG,cAAY,UAAU;AACtD,QAAA,aAAa,OAA6B,OAAO;AAAG,aAAW,UAAU;AAE/E,QAAM,CAAC,cAAc,eAAe,IAAI,SAA+B,OAAO;AAE9E,YAAU,MAAM;AACf,QAAI,CAAC,UAAU,WAAW,SAAS,OAAO,GAAG;AAC5C,sBAAgB,OAAO;AAAA,IACxB;AAAA,EAAA,GACE,CAAC,OAAO,CAAC;AAEZ,kBAAgB,MAAM;AACf,UAAA,UAAU,eAAe,YAAY;AAE3C,QAAI,SAAS;AACH,UAAA,UAAT,SAAiB,WAA6BA,WAA4B;AACxD,yBAAA,QAAQ,OAAO,qBAAqB,SAAS;AAClD,oBAAA,QAAQ,WAAWA,SAAQ;AAAA,MAAA;AAGlC,YAAA,WAAW,IAAI,iBAAiB,OAAO;AAEpC,eAAA,QAAQ,SAAS,YAAY;AAEtC,aAAO,MAAM;AACZ,iBAAS,WAAW;AAAA,MAAA;AAAA,IAEtB;AAAA,EACE,GAAA,CAAC,cAAc,cAAc,gBAAgB,CAAC;AAClD;"}

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);
-        };
+          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 {
-        element.addEventListener("scroll", debouncedHandler, { passive: true, capture: true });
-        return () => {
-          element.removeEventListener("scroll", debouncedHandler);
-        };
+        throw new Error("Exhaustive error: Expecting element to be instance of HTMLElement");
       }
-    } else if (element) {
-      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} 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}, [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,MAAA,OACM;AACA,cAAA,IAAI,MAAM,mEAAmE;AAAA,MACpF;AAAA,IACD;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";
@@ -14,14 +15,18 @@ import { useDebounce } from "./hooks/useDebounce.js";
 import { useDebounceCallback } from "./hooks/useDebounceCallback.js";
 import { useDocumentTitle } from "./hooks/useDocumentTitle.js";
 import { useElementSize } from "./hooks/useElementSize.js";
+import { useElementTopOffset } from "./hooks/useElementTopOffset.js";
 import { useEventHandler } from "./hooks/useEventHandler.js";
 import { useExpectSameValueReference } from "./hooks/useExpectSameValueReference.js";
 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 { useOnScrollWithin } from "./hooks/useOnScrollWithin.js";
 import { useOnWindowResize } from "./hooks/useOnWindowResize.js";
 import { usePreviousValue } from "./hooks/usePreviousValue.js";
 import { useScrollOffsets } from "./hooks/useScrollOffsets.js";
@@ -66,6 +71,7 @@ export {
   useAbortController,
   useAddClassNameDuringResize,
   useArrayMapMemo,
+  useAutoHeightTextArea,
   useClassName,
   useClassNameFactory,
   useColorScheme,
@@ -77,14 +83,18 @@ export {
   useDebounceCallback,
   useDocumentTitle,
   useElementSize,
+  useElementTopOffset,
   useEventHandler,
   useExpectSameValueReference,
   useForceRender,
   useId,
   useIsMounted,
   useObjectMemo,
+  useOnElementClickOutsideCallback,
+  useOnElementMouseEnterDelayedCallback,
   useOnElementMutation,
   useOnElementResize,
+  useOnScrollWithin,
   useOnWindowResize,
   usePreviousValue,
   useReferentiallyStableCallback,

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;"}