@contember/react-utils 1.2.0 → 1.2.2

package/dist/development/hooks/useAddClassNameDuringResize.js

@@ -1,19 +1,14 @@
 import { useRef, useLayoutEffect } from "react";
 import { useOnWindowResize } from "./useOnWindowResize.js";
 import { useReferentiallyStableCallback } from "../referentiallyStable/useReferentiallyStableCallback.js";
-function intendedFlushOfCSSChangesToCauseImmediateReflow(element) {
-  element.offsetHeight;
-}
 function addClassName(className, element) {
   if (element.classList.contains(className)) {
     element.classList.remove(className);
-    intendedFlushOfCSSChangesToCauseImmediateReflow(element);
   }
 }
 function removeClassName(className, element) {
   if (!element.classList.contains(className)) {
     element.classList.add(className);
-    intendedFlushOfCSSChangesToCauseImmediateReflow(element);
   }
 }
 function useAddClassNameDuringResize(className, timeoutToRestore = 300, element) {

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

@@ -1 +1 @@
-{"version":3,"file":"useAddClassNameDuringResize.js","sources":["../../../src/hooks/useAddClassNameDuringResize.ts"],"sourcesContent":["import { useLayoutEffect, useRef } from 'react'\nimport { useReferentiallyStableCallback } from '../referentiallyStable'\nimport { useOnWindowResize } from './useOnWindowResize'\n\nfunction intendedFlushOfCSSChangesToCauseImmediateReflow(element: HTMLElement) {\n\telement.offsetHeight\n}\n\nfunction addClassName(\n\tclassName: string,\n\telement: HTMLElement,\n) {\n\tif (element.classList.contains(className)) {\n\t\telement.classList.remove(className)\n\t\tintendedFlushOfCSSChangesToCauseImmediateReflow(element)\n\t}\n}\n\nfunction removeClassName(\n\tclassName: string,\n\telement: HTMLElement,\n) {\n\tif (!element.classList.contains(className)) {\n\t\telement.classList.add(className)\n\t\tintendedFlushOfCSSChangesToCauseImmediateReflow(element)\n\t}\n}\n\n/**\n * Adds CSS class during resize event to element\n *\n * - Falls back to document.body when no element is specified\n * - Adds CSS class to element also on the initial load\n * - Uses element.classList directly\n *\n * @param className - CSS class to apply during the resize event\n * @param timeoutToRestore - Timeout in milliseconds to wait before finally removing the CSS class\n * @param element - Optional HTML element to apply CSS class to\n */\nexport function useAddClassNameDuringResize(\n\tclassName: string,\n\ttimeoutToRestore: number = 300,\n\telement?: HTMLElement,\n) {\n\tconst timeoutID = useRef<number>()\n\n\tconst addTemporaryClassName = useReferentiallyStableCallback(() => {\n\t\tclearTimeout(timeoutID.current)\n\t\tremoveClassName(className, element ?? document.body)\n\n\t\ttimeoutID.current = setTimeout(() => {\n\t\t\taddClassName(className, element ?? document.body)\n\t\t}, timeoutToRestore)\n\n\t\treturn () => {\n\t\t\tclearTimeout(timeoutID.current)\n\t\t}\n\t})\n\n\tuseLayoutEffect(addTemporaryClassName, [addTemporaryClassName])\n\tuseOnWindowResize(addTemporaryClassName)\n}\n"],"names":[],"mappings":";;;AAIA,SAAS,gDAAgD,SAAsB;AACtE,UAAA;AACT;AAEA,SAAS,aACR,WACA,SACC;AACD,MAAI,QAAQ,UAAU,SAAS,SAAS,GAAG;AAClC,YAAA,UAAU,OAAO,SAAS;AAClC,oDAAgD,OAAO;AAAA,EACxD;AACD;AAEA,SAAS,gBACR,WACA,SACC;AACD,MAAI,CAAC,QAAQ,UAAU,SAAS,SAAS,GAAG;AACnC,YAAA,UAAU,IAAI,SAAS;AAC/B,oDAAgD,OAAO;AAAA,EACxD;AACD;AAaO,SAAS,4BACf,WACA,mBAA2B,KAC3B,SACC;AACD,QAAM,YAAY;AAEZ,QAAA,wBAAwB,+BAA+B,MAAM;AAClE,iBAAa,UAAU,OAAO;AACd,oBAAA,WAAW,WAAW,SAAS,IAAI;AAEzC,cAAA,UAAU,WAAW,MAAM;AACvB,mBAAA,WAAW,WAAW,SAAS,IAAI;AAAA,OAC9C,gBAAgB;AAEnB,WAAO,MAAM;AACZ,mBAAa,UAAU,OAAO;AAAA,IAAA;AAAA,EAC/B,CACA;AAEe,kBAAA,uBAAuB,CAAC,qBAAqB,CAAC;AAC9D,oBAAkB,qBAAqB;AACxC;"}
+{"version":3,"file":"useAddClassNameDuringResize.js","sources":["../../../src/hooks/useAddClassNameDuringResize.ts"],"sourcesContent":["import { useLayoutEffect, useRef } from 'react'\nimport { useReferentiallyStableCallback } from '../referentiallyStable'\nimport { useOnWindowResize } from './useOnWindowResize'\n\nfunction addClassName(\n\tclassName: string,\n\telement: HTMLElement,\n) {\n\tif (element.classList.contains(className)) {\n\t\telement.classList.remove(className)\n\t}\n}\n\nfunction removeClassName(\n\tclassName: string,\n\telement: HTMLElement,\n) {\n\tif (!element.classList.contains(className)) {\n\t\telement.classList.add(className)\n\t}\n}\n\n/**\n * Adds CSS class during resize event to element\n *\n * - Falls back to document.body when no element is specified\n * - Adds CSS class to element also on the initial load\n * - Uses element.classList directly\n *\n * @param className - CSS class to apply during the resize event\n * @param timeoutToRestore - Timeout in milliseconds to wait before finally removing the CSS class\n * @param element - Optional HTML element to apply CSS class to\n */\nexport function useAddClassNameDuringResize(\n\tclassName: string,\n\ttimeoutToRestore: number = 300,\n\telement?: HTMLElement,\n) {\n\tconst timeoutID = useRef<number>()\n\n\tconst addTemporaryClassName = useReferentiallyStableCallback(() => {\n\t\tclearTimeout(timeoutID.current)\n\t\tremoveClassName(className, element ?? document.body)\n\n\t\ttimeoutID.current = setTimeout(() => {\n\t\t\taddClassName(className, element ?? document.body)\n\t\t}, timeoutToRestore)\n\n\t\treturn () => {\n\t\t\tclearTimeout(timeoutID.current)\n\t\t}\n\t})\n\n\tuseLayoutEffect(addTemporaryClassName, [addTemporaryClassName])\n\tuseOnWindowResize(addTemporaryClassName)\n}\n"],"names":[],"mappings":";;;AAIA,SAAS,aACR,WACA,SACC;AACD,MAAI,QAAQ,UAAU,SAAS,SAAS,GAAG;AAClC,YAAA,UAAU,OAAO,SAAS;AAAA,EACnC;AACD;AAEA,SAAS,gBACR,WACA,SACC;AACD,MAAI,CAAC,QAAQ,UAAU,SAAS,SAAS,GAAG;AACnC,YAAA,UAAU,IAAI,SAAS;AAAA,EAChC;AACD;AAaO,SAAS,4BACf,WACA,mBAA2B,KAC3B,SACC;AACD,QAAM,YAAY;AAEZ,QAAA,wBAAwB,+BAA+B,MAAM;AAClE,iBAAa,UAAU,OAAO;AACd,oBAAA,WAAW,WAAW,SAAS,IAAI;AAEzC,cAAA,UAAU,WAAW,MAAM;AACvB,mBAAA,WAAW,WAAW,SAAS,IAAI;AAAA,OAC9C,gBAAgB;AAEnB,WAAO,MAAM;AACZ,mBAAa,UAAU,OAAO;AAAA,IAAA;AAAA,EAC/B,CACA;AAEe,kBAAA,uBAAuB,CAAC,qBAAqB,CAAC;AAC9D,oBAAkB,qBAAqB;AACxC;"}

package/dist/development/hooks/useAutoHeightTextArea.js

@@ -3,7 +3,7 @@ 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) => {
+  const measure = useCallback(async (ref, minRows2, maxRows2) => {
     if (ref) {
       const rowsAttribute = ref.rows;
       ref.style.height = "";
@@ -14,12 +14,12 @@ const useAutoHeightTextArea = (textAreaRef, value, minRows, maxRows) => {
         let minHeight;
         let maxHeight;
         ref.rows = minRows2;
-        minHeight = ref.offsetHeight;
+        minHeight = await ref.getBoundingClientRect().height;
         if (maxRows2 === Infinity) {
           maxHeight = Infinity;
         } else {
           ref.rows = maxRows2;
-          maxHeight = ref.offsetHeight;
+          maxHeight = await ref.getBoundingClientRect().height;
         }
         ref.style.height = px(height);
         ref.style.minHeight = px(minHeight);
@@ -29,10 +29,10 @@ const useAutoHeightTextArea = (textAreaRef, value, minRows, maxRows) => {
     }
   }, []);
   useOnElementResize(textAreaRef, () => {
-    measure(unwrapRefValue(textAreaRef), minRows, maxRows, value);
+    measure(unwrapRefValue(textAreaRef), minRows, maxRows);
   });
   useLayoutEffect(() => {
-    measure(unwrapRefValue(textAreaRef), minRows, maxRows, value);
+    measure(unwrapRefValue(textAreaRef), minRows, maxRows);
   }, [maxRows, measure, minRows, textAreaRef, value]);
 };
 export {

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

@@ -1 +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;"}
+{"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(async (ref: HTMLTextAreaElement | null, minRows: number, maxRows: number) => {\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 = await ref.getBoundingClientRect().height\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 = await ref.getBoundingClientRect().height\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)\n\t})\n\n\tuseLayoutEffect(() => {\n\t\tmeasure(unwrapRefValue(textAreaRef), minRows, maxRows)\n\t}, [maxRows, measure, minRows, textAreaRef, value])\n}\n"],"names":["minRows","maxRows"],"mappings":";;;;AAKO,MAAM,wBAAwB,CACpC,aACA,OACA,SACA,YACI;AACJ,QAAM,UAAU,YAAY,OAAO,KAAiCA,UAAiBC,aAAoB;AACxG,QAAI,KAAK;AACR,YAAM,gBAAgB,IAAI;AAE1B,UAAI,MAAM,SAAS;AACnB,UAAI,MAAM,YAAY;AACtB,UAAI,MAAM,YAAY;AAEtB,UAAID,aAAYC,UAAS;AACxB,cAAM,SAAS,IAAI;AACf,YAAA;AACA,YAAA;AAEJ,YAAI,OAAOD;AACC,oBAAA,MAAM,IAAI,sBAAA,EAAwB;AAE9C,YAAIC,aAAY,UAAU;AACb,sBAAA;AAAA,QAAA,OACN;AACN,cAAI,OAAOA;AACC,sBAAA,MAAM,IAAI,sBAAA,EAAwB;AAAA,QAC/C;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,OAAO;AAAA,EAAA,CACrD;AAED,kBAAgB,MAAM;AACrB,YAAQ,eAAe,WAAW,GAAG,SAAS,OAAO;AAAA,EAAA,GACnD,CAAC,SAAS,SAAS,SAAS,aAAa,KAAK,CAAC;AACnD;"}

package/dist/development/hooks/useChildrenAsLabel.js

@@ -0,0 +1,53 @@
+import { Children, useMemo } from "react";
+const MULTIPLE_SPACES_REG_EXP = / +/g;
+function normalize(text) {
+  return text.replace(MULTIPLE_SPACES_REG_EXP, " ").trim();
+}
+function getChildrenAsLabel(node) {
+  if (typeof node === "string" || typeof node === "number") {
+    return String(node);
+  } else if (node === null || node === void 0 || typeof node === "boolean") {
+    return void 0;
+  } else if (Array.isArray(node)) {
+    return normalize(node.map(getChildrenAsLabel).join(""));
+  } else {
+    let label = [];
+    Children.map(node, (child) => {
+      if (child === null || child === void 0 || typeof child === "boolean")
+        ;
+      else if (typeof child === "string") {
+        label.push(child);
+      } else if (typeof child === "number") {
+        label.push(child);
+      } else if (Array.isArray(child)) {
+        const childLabel = getChildrenAsLabel(child);
+        if (childLabel) {
+          label.push(childLabel);
+        }
+      } else {
+        if ("props" in child && "children" in child.props) {
+          const childLabel = getChildrenAsLabel(child.props.children);
+          if (childLabel) {
+            label.push(childLabel);
+          }
+        } else if ("children" in child) {
+          const childLabel = getChildrenAsLabel(child.children);
+          if (childLabel) {
+            label.push(childLabel);
+          }
+        } else {
+          console.warn("Unsupported child:", child);
+        }
+      }
+    });
+    return label.length > 0 ? label.join("") : void 0;
+  }
+}
+function useChildrenAsLabel(node) {
+  return useMemo(() => getChildrenAsLabel(node), [node]);
+}
+export {
+  getChildrenAsLabel,
+  useChildrenAsLabel
+};
+//# sourceMappingURL=useChildrenAsLabel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useChildrenAsLabel.js","sources":["../../../src/hooks/useChildrenAsLabel.ts"],"sourcesContent":["import { Children, ReactNode, useMemo } from 'react'\n\nconst MULTIPLE_SPACES_REG_EXP = / +/g\n\nfunction normalize(text: string): string {\n\treturn text.replace(MULTIPLE_SPACES_REG_EXP, ' ').trim()\n}\n\n/**\n * Walks through the children and returns a string representation of the text content.\n *\n * @param node - The children to walk through.\n * @returns String representation of the text content or undefined if there is no text content.\n *\n */\nexport function getChildrenAsLabel(node: ReactNode): string | undefined {\n\tif (typeof node === 'string' || typeof node === 'number') {\n\t\treturn String(node)\n\t} else if (node === null || node === undefined || typeof node === 'boolean') {\n\t\treturn undefined\n\t} else if (Array.isArray(node)) {\n\t\treturn normalize(node.map(getChildrenAsLabel).join(''))\n\t} else {\n\t\tlet label: (string | number)[] = []\n\n\t\tChildren.map(node, child => {\n\t\t\tif (child === null || child === undefined || typeof child === 'boolean') {\n\t\t\t} else if (typeof child === 'string') {\n\t\t\t\tlabel.push(child)\n\t\t\t} else if (typeof child === 'number') {\n\t\t\t\tlabel.push(child)\n\t\t\t} else if (Array.isArray(child)) {\n\t\t\t\tconst childLabel = getChildrenAsLabel(child)\n\n\t\t\t\tif (childLabel) {\n\t\t\t\t\tlabel.push(childLabel)\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\t// ReactElement | JSXElementConstructor | ReactPortal\n\t\t\t\tif ('props' in child && 'children' in child.props) {\n\t\t\t\t\tconst childLabel = getChildrenAsLabel(child.props.children)\n\n\t\t\t\t\tif (childLabel) {\n\t\t\t\t\t\tlabel.push(childLabel)\n\t\t\t\t\t}\n\t\t\t\t} else if ('children' in child) {\n\t\t\t\t\t// ReactPortal\n\t\t\t\t\tconst childLabel = getChildrenAsLabel(child.children)\n\n\t\t\t\t\tif (childLabel) {\n\t\t\t\t\t\tlabel.push(childLabel)\n\t\t\t\t\t}\n\t\t\t\t} else if (import.meta.env.DEV) {\n\t\t\t\t\tconsole.warn('Unsupported child:', child)\n\t\t\t\t}\n\t\t\t}\n\t\t})\n\n\t\treturn label.length > 0 ? label.join('') : undefined\n\t}\n}\n\n/**\n * Walks through the children and returns a string representation of the text content.\n *\n * @param node - The children to walk through.\n * @returns String representation of the text content or undefined if there is no text content.\n *\n */\nexport function useChildrenAsLabel(node: ReactNode): string | undefined {\n\treturn useMemo(() => getChildrenAsLabel(node), [node])\n}\n"],"names":[],"mappings":";AAEA,MAAM,0BAA0B;AAEhC,SAAS,UAAU,MAAsB;AACxC,SAAO,KAAK,QAAQ,yBAAyB,GAAG,EAAE,KAAK;AACxD;AASO,SAAS,mBAAmB,MAAqC;AACvE,MAAI,OAAO,SAAS,YAAY,OAAO,SAAS,UAAU;AACzD,WAAO,OAAO,IAAI;AAAA,EAAA,WACR,SAAS,QAAQ,SAAS,UAAa,OAAO,SAAS,WAAW;AACrE,WAAA;AAAA,EACG,WAAA,MAAM,QAAQ,IAAI,GAAG;AAC/B,WAAO,UAAU,KAAK,IAAI,kBAAkB,EAAE,KAAK,EAAE,CAAC;AAAA,EAAA,OAChD;AACN,QAAI,QAA6B,CAAA;AAExB,aAAA,IAAI,MAAM,CAAS,UAAA;AAC3B,UAAI,UAAU,QAAQ,UAAU,UAAa,OAAO,UAAU;AAAW;AAAA,eAC9D,OAAO,UAAU,UAAU;AACrC,cAAM,KAAK,KAAK;AAAA,MAAA,WACN,OAAO,UAAU,UAAU;AACrC,cAAM,KAAK,KAAK;AAAA,MACN,WAAA,MAAM,QAAQ,KAAK,GAAG;AAC1B,cAAA,aAAa,mBAAmB,KAAK;AAE3C,YAAI,YAAY;AACf,gBAAM,KAAK,UAAU;AAAA,QACtB;AAAA,MAAA,OACM;AAEN,YAAI,WAAW,SAAS,cAAc,MAAM,OAAO;AAClD,gBAAM,aAAa,mBAAmB,MAAM,MAAM,QAAQ;AAE1D,cAAI,YAAY;AACf,kBAAM,KAAK,UAAU;AAAA,UACtB;AAAA,QAAA,WACU,cAAc,OAAO;AAEzB,gBAAA,aAAa,mBAAmB,MAAM,QAAQ;AAEpD,cAAI,YAAY;AACf,kBAAM,KAAK,UAAU;AAAA,UACtB;AAAA,QAAA,OAC+B;AACvB,kBAAA,KAAK,sBAAsB,KAAK;AAAA,QACzC;AAAA,MACD;AAAA,IAAA,CACA;AAED,WAAO,MAAM,SAAS,IAAI,MAAM,KAAK,EAAE,IAAI;AAAA,EAC5C;AACD;AASO,SAAS,mBAAmB,MAAqC;AACvE,SAAO,QAAQ,MAAM,mBAAmB,IAAI,GAAG,CAAC,IAAI,CAAC;AACtD;"}

package/dist/development/hooks/useElementSize.js

@@ -1,43 +1,33 @@
-import { getSizeFromResizeObserverEntryFactory } from "@contember/utilities";
-import { useMemo, useState, useRef, useLayoutEffect } from "react";
+import { getSizeFromResizeObserverEntryFactory, getElementDimensionsCallback } from "@contember/utilities";
+import { useMemo, useState, useLayoutEffect } from "react";
 import { unwrapRefValue } from "./unwrapRefValue.js";
 import { useOnElementResize } from "./useOnElementResize.js";
 import { useScopedConsoleRef } from "../debug-context/Context.js";
-function getElementWidth(element) {
-  return element.offsetWidth;
-}
-function getElementHeight(element) {
-  return element.offsetHeight;
-}
+import { useReferentiallyStableCallback } from "../referentiallyStable/useReferentiallyStableCallback.js";
 function useElementSize(refOrElement, options = {}, timeout = 300) {
   const { logged } = useScopedConsoleRef("useElementSize").current;
   const { box = "border-box" } = options;
   const getSizeFromResizeObserverEntry = useMemo(() => getSizeFromResizeObserverEntryFactory(box), [box]);
-  const refValue = unwrapRefValue(refOrElement);
-  const [width, setWidth] = useState(refValue?.offsetWidth);
-  const [height, setHeight] = useState(refValue?.offsetHeight);
+  const [width, setWidth] = useState();
+  const [height, setHeight] = useState();
   logged("dimensions", { width, height });
-  useOnElementResize(refOrElement, (entry) => {
-    const dimensions = logged("useOnElementResize => entry:dimensions", getSizeFromResizeObserverEntry(entry));
+  const maybeSetNewDimensions = useReferentiallyStableCallback((dimensions) => {
     if (width !== dimensions.width) {
       setWidth(dimensions.width);
     }
     if (height !== dimensions.height) {
       setHeight(dimensions.height);
     }
-  }, { box }, timeout);
-  const measure = useRef((element) => {
-    logged("measure(element)", element);
-    if (element instanceof HTMLElement) {
-      setWidth(logged("getElementWidth(element):", getElementWidth(element)));
-      setHeight(logged("getElementHeight(element):", getElementHeight(element)));
-    } else if (element) {
-      throw new Error("Exhaustive error: Expecting element to be instance of HTMLElement or Window");
-    }
   });
+  useOnElementResize(refOrElement, (entry) => {
+    const dimensions = logged("useOnElementResize => entry:dimensions", getSizeFromResizeObserverEntry(entry));
+    maybeSetNewDimensions(dimensions);
+  }, { box }, timeout);
   useLayoutEffect(() => {
     const element = unwrapRefValue(refOrElement);
-    logged("useLayoutEffect => measure", measure.current(element));
+    if (element) {
+      getElementDimensionsCallback(element, (dimensions) => maybeSetNewDimensions(dimensions));
+    }
   });
   return { height, width };
 }

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

@@ -1 +1 @@
-{"version":3,"file":"useElementSize.js","sources":["../../../src/hooks/useElementSize.ts"],"sourcesContent":["import { getSizeFromResizeObserverEntryFactory } from '@contember/utilities'\nimport { useLayoutEffect, useMemo, useRef, useState } from 'react'\nimport { useScopedConsoleRef } from '../debug-context'\nimport { RefObjectOrElement, unwrapRefValue } from './unwrapRefValue'\nimport { useOnElementResize } from './useOnElementResize'\n\nfunction getElementWidth(element: HTMLElement) {\n\treturn element.offsetWidth\n}\n\nfunction getElementHeight(element: HTMLElement) {\n\treturn element.offsetHeight\n}\n\n/**\n * Measure HTMLElement\n *\n * @param refOrElement - HTMLElement passed directly or indirectly as RefObject\n * @returns Size vector consisting of width and height properties\n */\nexport function useElementSize(\n\trefOrElement: RefObjectOrElement<HTMLElement>,\n\toptions: ResizeObserverOptions = {},\n\ttimeout: number = 300,\n): { height: number | undefined, width: number | undefined } {\n\tconst { logged } = useScopedConsoleRef('useElementSize').current\n\n\tconst { box = 'border-box' } = options\n\tconst getSizeFromResizeObserverEntry = useMemo(() => getSizeFromResizeObserverEntryFactory(box), [box])\n\n\tconst refValue = unwrapRefValue(refOrElement)\n\tconst [width, setWidth] = useState<number | undefined>(refValue?.offsetWidth)\n\tconst [height, setHeight] = useState<number | undefined>(refValue?.offsetHeight)\n\n\tlogged('dimensions', { width, height })\n\n\tuseOnElementResize(refOrElement, entry => {\n\t\tconst dimensions = logged('useOnElementResize => entry:dimensions', getSizeFromResizeObserverEntry(entry))\n\n\t\tif (width !== dimensions.width) {\n\t\t\tsetWidth(dimensions.width)\n\t\t}\n\t\tif (height !== dimensions.height) {\n\t\t\tsetHeight(dimensions.height)\n\t\t}\n\t}, { box }, timeout)\n\n\t// INTENTIONAL AVOID OF ESLint ERROR: We need measure on every Layout side-effect\n\t// otherwise the browser will paint and cause layout shifts.\n\t//\n\t// React Hook useLayoutEffect contains a call to 'setWidth'. Without a list of dependencies,\n\t// this can lead to an infinite chain of updates. To fix this, pass [element] as a second argument\n\t// to the useLayoutEffect Hook.\n\t//\n\t// Seems like only pure function lets us measure before the browser has a chance to paint\n\tconst measure = useRef((element: HTMLElement | null) => {\n\t\tlogged('measure(element)', element)\n\n\t\tif (element instanceof HTMLElement) {\n\t\t\tsetWidth(logged('getElementWidth(element):', getElementWidth(element)))\n\t\t\tsetHeight(logged('getElementHeight(element):', getElementHeight(element)))\n\t\t} else if (element) {\n\t\t\tthrow new Error('Exhaustive error: Expecting element to be instance of HTMLElement or Window')\n\t\t}\n\t})\n\n\tuseLayoutEffect(() => {\n\t\tconst element = unwrapRefValue(refOrElement)\n\t\tlogged('useLayoutEffect => measure', measure.current(element))\n\t})\n\n\treturn { height, width }\n}\n"],"names":[],"mappings":";;;;;AAMA,SAAS,gBAAgB,SAAsB;AAC9C,SAAO,QAAQ;AAChB;AAEA,SAAS,iBAAiB,SAAsB;AAC/C,SAAO,QAAQ;AAChB;AAQO,SAAS,eACf,cACA,UAAiC,CAAA,GACjC,UAAkB,KAC0C;AAC5D,QAAM,EAAE,OAAW,IAAA,oBAAoB,gBAAgB,EAAE;AAEnD,QAAA,EAAE,MAAM,aAAiB,IAAA;AACzB,QAAA,iCAAiC,QAAQ,MAAM,sCAAsC,GAAG,GAAG,CAAC,GAAG,CAAC;AAEhG,QAAA,WAAW,eAAe,YAAY;AAC5C,QAAM,CAAC,OAAO,QAAQ,IAAI,SAA6B,UAAU,WAAW;AAC5E,QAAM,CAAC,QAAQ,SAAS,IAAI,SAA6B,UAAU,YAAY;AAE/E,SAAO,cAAc,EAAE,OAAO,OAAQ,CAAA;AAEtC,qBAAmB,cAAc,CAAS,UAAA;AACzC,UAAM,aAAa,OAAO,0CAA0C,+BAA+B,KAAK,CAAC;AAErG,QAAA,UAAU,WAAW,OAAO;AAC/B,eAAS,WAAW,KAAK;AAAA,IAC1B;AACI,QAAA,WAAW,WAAW,QAAQ;AACjC,gBAAU,WAAW,MAAM;AAAA,IAC5B;AAAA,EAAA,GACE,EAAE,OAAO,OAAO;AAUb,QAAA,UAAU,OAAO,CAAC,YAAgC;AACvD,WAAO,oBAAoB,OAAO;AAElC,QAAI,mBAAmB,aAAa;AACnC,eAAS,OAAO,6BAA6B,gBAAgB,OAAO,CAAC,CAAC;AACtE,gBAAU,OAAO,8BAA8B,iBAAiB,OAAO,CAAC,CAAC;AAAA,eAC/D,SAAS;AACb,YAAA,IAAI,MAAM,6EAA6E;AAAA,IAC9F;AAAA,EAAA,CACA;AAED,kBAAgB,MAAM;AACf,UAAA,UAAU,eAAe,YAAY;AAC3C,WAAO,8BAA8B,QAAQ,QAAQ,OAAO,CAAC;AAAA,EAAA,CAC7D;AAEM,SAAA,EAAE,QAAQ;AAClB;"}
+{"version":3,"file":"useElementSize.js","sources":["../../../src/hooks/useElementSize.ts"],"sourcesContent":["import { getElementDimensionsCallback, getSizeFromResizeObserverEntryFactory } from '@contember/utilities'\nimport { useLayoutEffect, useMemo, useState } from 'react'\nimport { useScopedConsoleRef } from '../debug-context'\nimport { useReferentiallyStableCallback } from '../referentiallyStable'\nimport { RefObjectOrElement, unwrapRefValue } from './unwrapRefValue'\nimport { useOnElementResize } from './useOnElementResize'\n\nexport type ElementSize = {\n\theight: number\n\twidth: number\n}\n\n/**\n * Measure HTMLElement\n *\n * @param refOrElement - HTMLElement passed directly or indirectly as RefObject\n * @returns Size vector consisting of width and height properties\n */\nexport function useElementSize(\n\trefOrElement: RefObjectOrElement<HTMLElement>,\n\toptions: ResizeObserverOptions = {},\n\ttimeout: number = 300,\n): { height: number | undefined, width: number | undefined } {\n\tconst { logged } = useScopedConsoleRef('useElementSize').current\n\n\tconst { box = 'border-box' } = options\n\tconst getSizeFromResizeObserverEntry = useMemo(() => getSizeFromResizeObserverEntryFactory(box), [box])\n\n\tconst [width, setWidth] = useState<number | undefined>()\n\tconst [height, setHeight] = useState<number | undefined>()\n\n\tlogged('dimensions', { width, height })\n\n\tconst maybeSetNewDimensions = useReferentiallyStableCallback((dimensions: ElementSize) => {\n\t\tif (width !== dimensions.width) {\n\t\t\tsetWidth(dimensions.width)\n\t\t}\n\t\tif (height !== dimensions.height) {\n\t\t\tsetHeight(dimensions.height)\n\t\t}\n\t})\n\n\tuseOnElementResize(refOrElement, entry => {\n\t\tconst dimensions = logged('useOnElementResize => entry:dimensions', getSizeFromResizeObserverEntry(entry))\n\t\tmaybeSetNewDimensions(dimensions)\n\t}, { box }, timeout)\n\n\tuseLayoutEffect(() => {\n\t\tconst element = unwrapRefValue(refOrElement)\n\t\tif (element) {\n\t\t\tgetElementDimensionsCallback(element, dimensions => maybeSetNewDimensions(dimensions))\n\t\t}\n\t})\n\n\treturn { height, width }\n}\n"],"names":[],"mappings":";;;;;;AAkBO,SAAS,eACf,cACA,UAAiC,CAAA,GACjC,UAAkB,KAC0C;AAC5D,QAAM,EAAE,OAAW,IAAA,oBAAoB,gBAAgB,EAAE;AAEnD,QAAA,EAAE,MAAM,aAAiB,IAAA;AACzB,QAAA,iCAAiC,QAAQ,MAAM,sCAAsC,GAAG,GAAG,CAAC,GAAG,CAAC;AAEtG,QAAM,CAAC,OAAO,QAAQ,IAAI,SAA6B;AACvD,QAAM,CAAC,QAAQ,SAAS,IAAI,SAA6B;AAEzD,SAAO,cAAc,EAAE,OAAO,OAAQ,CAAA;AAEhC,QAAA,wBAAwB,+BAA+B,CAAC,eAA4B;AACrF,QAAA,UAAU,WAAW,OAAO;AAC/B,eAAS,WAAW,KAAK;AAAA,IAC1B;AACI,QAAA,WAAW,WAAW,QAAQ;AACjC,gBAAU,WAAW,MAAM;AAAA,IAC5B;AAAA,EAAA,CACA;AAED,qBAAmB,cAAc,CAAS,UAAA;AACzC,UAAM,aAAa,OAAO,0CAA0C,+BAA+B,KAAK,CAAC;AACzG,0BAAsB,UAAU;AAAA,EAAA,GAC9B,EAAE,OAAO,OAAO;AAEnB,kBAAgB,MAAM;AACf,UAAA,UAAU,eAAe,YAAY;AAC3C,QAAI,SAAS;AACZ,mCAA6B,SAAS,CAAA,eAAc,sBAAsB,UAAU,CAAC;AAAA,IACtF;AAAA,EAAA,CACA;AAEM,SAAA,EAAE,QAAQ;AAClB;"}

package/dist/development/hooks/useOnElementResize.js

@@ -9,35 +9,31 @@ function useOnElementResize(refOrElement, callback, options = {}, timeout = 300)
   const lastTimeStamp = useRef(0);
   useLayoutEffect(() => {
     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 {
-        throw new Error("Exhaustive error: Expecting element to be instance of HTMLElement");
-      }
+    if (!element) {
+      return;
     }
+    if (!(element instanceof HTMLElement)) {
+      throw new Error("Exhaustive error: Expecting element to be instance of HTMLElement");
+    }
+    let timeoutID = void 0;
+    function debouncedOnChange([entry]) {
+      const timeStamp = Date.now();
+      const delta = timeStamp - lastTimeStamp.current;
+      clearTimeout(timeoutID);
+      const timeoutFinal = delta > timeout ? 0 : timeout;
+      timeoutID = setTimeout(() => {
+        const message = timeoutFinal > 0 ? "element.resize:debounced" : "element.resize:immediate";
+        scopedConsoleRef.current.warned(message, null);
+        callbackRef.current(entry);
+        lastTimeStamp.current = timeStamp;
+      }, timeoutFinal);
+    }
+    const resizeObserver = new ResizeObserver(debouncedOnChange);
+    resizeObserver.observe(element, { box });
+    return () => {
+      clearTimeout(timeoutID);
+      resizeObserver.unobserve(element);
+    };
   }, [box, refOrElement, scopedConsoleRef, timeout]);
 }
 export {

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 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;"}
+{"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\t\tif (!element) {\n\t\t\treturn\n\t\t}\n\t\tif (!(element instanceof HTMLElement)) {\n\t\t\tthrow new Error('Exhaustive error: Expecting element to be instance of HTMLElement')\n\t\t}\n\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\tclearTimeout(timeoutID)\n\t\t\tconst timeoutFinal = delta > timeout ? 0 : timeout\n\n\t\t\ttimeoutID = setTimeout(() => {\n\t\t\t\tconst message = timeoutFinal > 0 ? 'element.resize:debounced' : 'element.resize:immediate'\n\t\t\t\tscopedConsoleRef.current.warned(message, null)\n\t\t\t\tcallbackRef.current(entry)\n\t\t\t\tlastTimeStamp.current = timeStamp\n\t\t\t}, timeoutFinal)\n\t\t}\n\n\t\tconst resizeObserver = new ResizeObserver(debouncedOnChange)\n\n\t\tresizeObserver.observe(element, { box })\n\n\t\treturn () => {\n\t\t\tclearTimeout(timeoutID)\n\t\t\tresizeObserver.unobserve(element)\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;AAC3C,QAAI,CAAC,SAAS;AACb;AAAA,IACD;AACI,QAAA,EAAE,mBAAmB,cAAc;AAChC,YAAA,IAAI,MAAM,mEAAmE;AAAA,IACpF;AAEA,QAAI,YAAgC;AAE3B,aAAA,kBAAkB,CAAC,KAAK,GAA0B;AACpD,YAAA,YAAY,KAAK;AACjB,YAAA,QAAQ,YAAY,cAAc;AAExC,mBAAa,SAAS;AAChB,YAAA,eAAe,QAAQ,UAAU,IAAI;AAE3C,kBAAY,WAAW,MAAM;AACtB,cAAA,UAAU,eAAe,IAAI,6BAA6B;AAC/C,yBAAA,QAAQ,OAAO,SAAS,IAAI;AAC7C,oBAAY,QAAQ,KAAK;AACzB,sBAAc,UAAU;AAAA,SACtB,YAAY;AAAA,IAChB;AAEM,UAAA,iBAAiB,IAAI,eAAe,iBAAiB;AAE3D,mBAAe,QAAQ,SAAS,EAAE,IAAK,CAAA;AAEvC,WAAO,MAAM;AACZ,mBAAa,SAAS;AACtB,qBAAe,UAAU,OAAO;AAAA,IAAA;AAAA,KAE/B,CAAC,KAAK,cAAc,kBAAkB,OAAO,CAAC;AAClD;"}

package/dist/development/hooks/useScrollOffsets.js

@@ -1,4 +1,4 @@
-import { assert } from "@contember/utilities";
+import { getElementDimensions, assert } from "@contember/utilities";
 import { useState, useLayoutEffect, useMemo } from "react";
 import { unwrapRefValue } from "./unwrapRefValue.js";
 import { useOnScrollWithin } from "./useOnScrollWithin.js";
@@ -28,9 +28,7 @@ function useScrollOffsets(refOrElement, interval = 1e3 / 60) {
   const handler = useReferentiallyStableCallback(() => {
     const maybeScrollContent = unwrapRefValue(refOrElement) ?? document;
     if (maybeScrollContent) {
-      updateScrollOffsetsState(
-        getElementScrollOffsets(maybeScrollContent)
-      );
+      getElementScrollOffsets(maybeScrollContent).then(updateScrollOffsetsState);
     }
   });
   useOnScrollWithin(refOrElement, handler, interval);
@@ -50,12 +48,13 @@ function getIntrinsicScrollContainer(element) {
     return element;
   }
 }
-function getElementScrollOffsets(element) {
+async function getElementScrollOffsets(element) {
   const isIntrinsicScrolling = isIntrinsicScrollElement(element);
   const scrollContainer = getIntrinsicScrollContainer(element);
   const { scrollLeft, scrollTop, scrollHeight, scrollWidth } = scrollContainer;
-  const height = isIntrinsicScrolling ? window.innerHeight : scrollContainer.offsetHeight;
-  const width = isIntrinsicScrolling ? window.innerWidth : scrollContainer.offsetWidth;
+  const { height: scrollContainerHeight, width: scrollContainerWidth } = await getElementDimensions(scrollContainer);
+  const height = isIntrinsicScrolling ? window.innerHeight : scrollContainerHeight;
+  const width = isIntrinsicScrolling ? window.innerWidth : scrollContainerWidth;
   const left = Math.round(scrollLeft);
   const top = Math.round(scrollTop);
   const right = Math.round(scrollWidth - width - left);

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

@@ -1 +1 @@
-{"version":3,"file":"useScrollOffsets.js","sources":["../../../src/hooks/useScrollOffsets.ts"],"sourcesContent":["import { assert } from '@contember/utilities'\nimport { useLayoutEffect, useMemo, useState } from 'react'\nimport { useScopedConsoleRef } from '../debug-context'\nimport { useReferentiallyStableCallback } from '../referentiallyStable'\nimport { RefObjectOrElement, unwrapRefValue } from './unwrapRefValue'\nimport { useOnScrollWithin } from './useOnScrollWithin'\nimport { useOnWindowResize } from './useOnWindowResize'\n\nexport type Offsets = {\n\tbottom: number;\n\tleft: number;\n\tright: number;\n\ttop: number;\n}\n\nexport function useScrollOffsets(refOrElement: RefObjectOrElement<HTMLElement | null> | null, interval: number = 1000 / 60) {\n\tconst { logged } = useScopedConsoleRef('useScrollOffsets').current\n\n\tconst [top, setTop] = useState(0)\n\tconst [bottom, setBottom] = useState(0)\n\tconst [left, setLeft] = useState(0)\n\tconst [right, setRight] = useState(0)\n\n\tconst updateScrollOffsetsState = useReferentiallyStableCallback((offsets: Offsets) => {\n\t\tlogged('Update the offsets:', {\n\t\t\tprevious: { bottom, left, right, top },\n\t\t\tnext: offsets,\n\t\t})\n\n\t\tif (offsets.bottom !== bottom) setBottom(offsets.bottom)\n\t\tif (offsets.left !== left) setLeft(offsets.left)\n\t\tif (offsets.right !== right) setRight(offsets.right)\n\t\tif (offsets.top !== top) setTop(offsets.top)\n\t})\n\n\tconst handler = useReferentiallyStableCallback(() => {\n\t\tconst maybeScrollContent = unwrapRefValue(refOrElement) ?? document\n\n\t\tif (maybeScrollContent) {\n\t\t\tupdateScrollOffsetsState(\n\t\t\t\tgetElementScrollOffsets(maybeScrollContent),\n\t\t\t)\n\t\t}\n\t})\n\n\tuseOnScrollWithin(refOrElement, handler, interval)\n\tuseOnWindowResize(handler)\n\tuseLayoutEffect(handler, [handler])\n\n\treturn useMemo(() => ({ bottom, left, right, top }), [bottom, left, right, top])\n}\n\nfunction isIntrinsicScrollElement(element: unknown): element is Document {\n\treturn element instanceof HTMLBodyElement\n\t\t|| element instanceof HTMLHtmlElement\n\t\t|| element instanceof DocumentType\n\t\t|| element instanceof Document\n\t\t|| element instanceof HTMLDocument\n}\n\nfunction getIntrinsicScrollContainer(element: HTMLElement | Document): HTMLElement {\n\tconst html = document.body.parentElement\n\tassert('HTML element exists', html, (value): value is HTMLElement => value instanceof HTMLElement)\n\n\tif (isIntrinsicScrollElement(element)) {\n\t\treturn html\n\t} else {\n\t\treturn element\n\t}\n}\n\nfunction getElementScrollOffsets(element: HTMLElement | Document): Offsets {\n\tconst isIntrinsicScrolling = isIntrinsicScrollElement(element)\n\tconst scrollContainer = getIntrinsicScrollContainer(element)\n\n\tconst { scrollLeft, scrollTop, scrollHeight, scrollWidth } = scrollContainer\n\n\tconst height = isIntrinsicScrolling ? window.innerHeight : scrollContainer.offsetHeight\n\tconst width = isIntrinsicScrolling ? window.innerWidth : scrollContainer.offsetWidth\n\n\tconst left = Math.round(scrollLeft)\n\tconst top = Math.round(scrollTop)\n\n\tconst right = Math.round(scrollWidth - width - left)\n\tconst bottom = Math.round(scrollHeight - height - top)\n\n\treturn { bottom, left, right, top }\n}\n"],"names":[],"mappings":";;;;;;;AAeO,SAAS,iBAAiB,cAA6D,WAAmB,MAAO,IAAI;AAC3H,QAAM,EAAE,OAAW,IAAA,oBAAoB,kBAAkB,EAAE;AAE3D,QAAM,CAAC,KAAK,MAAM,IAAI,SAAS,CAAC;AAChC,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,CAAC;AACtC,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,CAAC;AAClC,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,CAAC;AAE9B,QAAA,2BAA2B,+BAA+B,CAAC,YAAqB;AACrF,WAAO,uBAAuB;AAAA,MAC7B,UAAU,EAAE,QAAQ,MAAM,OAAO,IAAI;AAAA,MACrC,MAAM;AAAA,IAAA,CACN;AAED,QAAI,QAAQ,WAAW;AAAQ,gBAAU,QAAQ,MAAM;AACvD,QAAI,QAAQ,SAAS;AAAM,cAAQ,QAAQ,IAAI;AAC/C,QAAI,QAAQ,UAAU;AAAO,eAAS,QAAQ,KAAK;AACnD,QAAI,QAAQ,QAAQ;AAAK,aAAO,QAAQ,GAAG;AAAA,EAAA,CAC3C;AAEK,QAAA,UAAU,+BAA+B,MAAM;AAC9C,UAAA,qBAAqB,eAAe,YAAY,KAAK;AAE3D,QAAI,oBAAoB;AACvB;AAAA,QACC,wBAAwB,kBAAkB;AAAA,MAAA;AAAA,IAE5C;AAAA,EAAA,CACA;AAEiB,oBAAA,cAAc,SAAS,QAAQ;AACjD,oBAAkB,OAAO;AACT,kBAAA,SAAS,CAAC,OAAO,CAAC;AAElC,SAAO,QAAQ,OAAO,EAAE,QAAQ,MAAM,OAAO,QAAQ,CAAC,QAAQ,MAAM,OAAO,GAAG,CAAC;AAChF;AAEA,SAAS,yBAAyB,SAAuC;AACjE,SAAA,mBAAmB,mBACtB,mBAAmB,mBACnB,mBAAmB,gBACnB,mBAAmB,YACnB,mBAAmB;AACxB;AAEA,SAAS,4BAA4B,SAA8C;AAC5E,QAAA,OAAO,SAAS,KAAK;AAC3B,SAAO,uBAAuB,MAAM,CAAC,UAAgC,iBAAiB,WAAW;AAE7F,MAAA,yBAAyB,OAAO,GAAG;AAC/B,WAAA;AAAA,EAAA,OACD;AACC,WAAA;AAAA,EACR;AACD;AAEA,SAAS,wBAAwB,SAA0C;AACpE,QAAA,uBAAuB,yBAAyB,OAAO;AACvD,QAAA,kBAAkB,4BAA4B,OAAO;AAE3D,QAAM,EAAE,YAAY,WAAW,cAAc,gBAAgB;AAE7D,QAAM,SAAS,uBAAuB,OAAO,cAAc,gBAAgB;AAC3E,QAAM,QAAQ,uBAAuB,OAAO,aAAa,gBAAgB;AAEnE,QAAA,OAAO,KAAK,MAAM,UAAU;AAC5B,QAAA,MAAM,KAAK,MAAM,SAAS;AAEhC,QAAM,QAAQ,KAAK,MAAM,cAAc,QAAQ,IAAI;AACnD,QAAM,SAAS,KAAK,MAAM,eAAe,SAAS,GAAG;AAErD,SAAO,EAAE,QAAQ,MAAM,OAAO,IAAI;AACnC;"}
+{"version":3,"file":"useScrollOffsets.js","sources":["../../../src/hooks/useScrollOffsets.ts"],"sourcesContent":["import { assert, getElementDimensions } from '@contember/utilities'\nimport { useLayoutEffect, useMemo, useState } from 'react'\nimport { useScopedConsoleRef } from '../debug-context'\nimport { useReferentiallyStableCallback } from '../referentiallyStable'\nimport { RefObjectOrElement, unwrapRefValue } from './unwrapRefValue'\nimport { useOnScrollWithin } from './useOnScrollWithin'\nimport { useOnWindowResize } from './useOnWindowResize'\n\nexport type Offsets = {\n\tbottom: number;\n\tleft: number;\n\tright: number;\n\ttop: number;\n}\n\nexport function useScrollOffsets(refOrElement: RefObjectOrElement<HTMLElement | null> | null, interval: number = 1000 / 60) {\n\tconst { logged } = useScopedConsoleRef('useScrollOffsets').current\n\n\tconst [top, setTop] = useState(0)\n\tconst [bottom, setBottom] = useState(0)\n\tconst [left, setLeft] = useState(0)\n\tconst [right, setRight] = useState(0)\n\n\tconst updateScrollOffsetsState = useReferentiallyStableCallback((offsets: Offsets) => {\n\t\tlogged('Update the offsets:', {\n\t\t\tprevious: { bottom, left, right, top },\n\t\t\tnext: offsets,\n\t\t})\n\n\t\tif (offsets.bottom !== bottom) setBottom(offsets.bottom)\n\t\tif (offsets.left !== left) setLeft(offsets.left)\n\t\tif (offsets.right !== right) setRight(offsets.right)\n\t\tif (offsets.top !== top) setTop(offsets.top)\n\t})\n\n\tconst handler = useReferentiallyStableCallback(() => {\n\t\tconst maybeScrollContent = unwrapRefValue(refOrElement) ?? document\n\n\t\tif (maybeScrollContent) {\n\t\t\tgetElementScrollOffsets(maybeScrollContent).then(updateScrollOffsetsState)\n\t\t}\n\t})\n\n\tuseOnScrollWithin(refOrElement, handler, interval)\n\tuseOnWindowResize(handler)\n\tuseLayoutEffect(handler, [handler])\n\n\treturn useMemo(() => ({ bottom, left, right, top }), [bottom, left, right, top])\n}\n\nfunction isIntrinsicScrollElement(element: unknown): element is Document {\n\treturn element instanceof HTMLBodyElement\n\t\t|| element instanceof HTMLHtmlElement\n\t\t|| element instanceof DocumentType\n\t\t|| element instanceof Document\n\t\t|| element instanceof HTMLDocument\n}\n\nfunction getIntrinsicScrollContainer(element: HTMLElement | Document): HTMLElement {\n\tconst html = document.body.parentElement\n\tassert('HTML element exists', html, (value): value is HTMLElement => value instanceof HTMLElement)\n\n\tif (isIntrinsicScrollElement(element)) {\n\t\treturn html\n\t} else {\n\t\treturn element\n\t}\n}\n\nasync function getElementScrollOffsets(element: HTMLElement | Document): Promise<Offsets> {\n\tconst isIntrinsicScrolling = isIntrinsicScrollElement(element)\n\tconst scrollContainer = getIntrinsicScrollContainer(element)\n\n\tconst { scrollLeft, scrollTop, scrollHeight, scrollWidth } = scrollContainer\n\tconst { height: scrollContainerHeight, width: scrollContainerWidth } = await getElementDimensions(scrollContainer)\n\n\tconst height = isIntrinsicScrolling ? window.innerHeight : scrollContainerHeight\n\tconst width = isIntrinsicScrolling ? window.innerWidth : scrollContainerWidth\n\n\tconst left = Math.round(scrollLeft)\n\tconst top = Math.round(scrollTop)\n\n\tconst right = Math.round(scrollWidth - width - left)\n\tconst bottom = Math.round(scrollHeight - height - top)\n\n\treturn { bottom, left, right, top }\n}\n"],"names":[],"mappings":";;;;;;;AAeO,SAAS,iBAAiB,cAA6D,WAAmB,MAAO,IAAI;AAC3H,QAAM,EAAE,OAAW,IAAA,oBAAoB,kBAAkB,EAAE;AAE3D,QAAM,CAAC,KAAK,MAAM,IAAI,SAAS,CAAC;AAChC,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,CAAC;AACtC,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,CAAC;AAClC,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,CAAC;AAE9B,QAAA,2BAA2B,+BAA+B,CAAC,YAAqB;AACrF,WAAO,uBAAuB;AAAA,MAC7B,UAAU,EAAE,QAAQ,MAAM,OAAO,IAAI;AAAA,MACrC,MAAM;AAAA,IAAA,CACN;AAED,QAAI,QAAQ,WAAW;AAAQ,gBAAU,QAAQ,MAAM;AACvD,QAAI,QAAQ,SAAS;AAAM,cAAQ,QAAQ,IAAI;AAC/C,QAAI,QAAQ,UAAU;AAAO,eAAS,QAAQ,KAAK;AACnD,QAAI,QAAQ,QAAQ;AAAK,aAAO,QAAQ,GAAG;AAAA,EAAA,CAC3C;AAEK,QAAA,UAAU,+BAA+B,MAAM;AAC9C,UAAA,qBAAqB,eAAe,YAAY,KAAK;AAE3D,QAAI,oBAAoB;AACC,8BAAA,kBAAkB,EAAE,KAAK,wBAAwB;AAAA,IAC1E;AAAA,EAAA,CACA;AAEiB,oBAAA,cAAc,SAAS,QAAQ;AACjD,oBAAkB,OAAO;AACT,kBAAA,SAAS,CAAC,OAAO,CAAC;AAElC,SAAO,QAAQ,OAAO,EAAE,QAAQ,MAAM,OAAO,QAAQ,CAAC,QAAQ,MAAM,OAAO,GAAG,CAAC;AAChF;AAEA,SAAS,yBAAyB,SAAuC;AACjE,SAAA,mBAAmB,mBACtB,mBAAmB,mBACnB,mBAAmB,gBACnB,mBAAmB,YACnB,mBAAmB;AACxB;AAEA,SAAS,4BAA4B,SAA8C;AAC5E,QAAA,OAAO,SAAS,KAAK;AAC3B,SAAO,uBAAuB,MAAM,CAAC,UAAgC,iBAAiB,WAAW;AAE7F,MAAA,yBAAyB,OAAO,GAAG;AAC/B,WAAA;AAAA,EAAA,OACD;AACC,WAAA;AAAA,EACR;AACD;AAEA,eAAe,wBAAwB,SAAmD;AACnF,QAAA,uBAAuB,yBAAyB,OAAO;AACvD,QAAA,kBAAkB,4BAA4B,OAAO;AAE3D,QAAM,EAAE,YAAY,WAAW,cAAc,gBAAgB;AACvD,QAAA,EAAE,QAAQ,uBAAuB,OAAO,yBAAyB,MAAM,qBAAqB,eAAe;AAE3G,QAAA,SAAS,uBAAuB,OAAO,cAAc;AACrD,QAAA,QAAQ,uBAAuB,OAAO,aAAa;AAEnD,QAAA,OAAO,KAAK,MAAM,UAAU;AAC5B,QAAA,MAAM,KAAK,MAAM,SAAS;AAEhC,QAAM,QAAQ,KAAK,MAAM,cAAc,QAAQ,IAAI;AACnD,QAAM,SAAS,KAAK,MAAM,eAAe,SAAS,GAAG;AAErD,SAAO,EAAE,QAAQ,MAAM,OAAO,IAAI;AACnC;"}

package/dist/development/index.js

@@ -7,6 +7,7 @@ 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 { getChildrenAsLabel, useChildrenAsLabel } from "./hooks/useChildrenAsLabel.js";
 import { useComposeRef } from "./hooks/useComposeRef.js";
 import { useConstantLengthInvariant } from "./hooks/useConstantLengthInvariant.js";
 import { useConstantValueInvariant } from "./hooks/useConstantValueInvariant.js";
@@ -59,6 +60,7 @@ export {
   createOptionalContextFactory,
   emptyArray,
   emptyObject,
+  getChildrenAsLabel,
   identityFunction,
   isNoopScopedConsole,
   noop,
@@ -72,6 +74,7 @@ export {
   useAddClassNameDuringResize,
   useArrayMapMemo,
   useAutoHeightTextArea,
+  useChildrenAsLabel,
   useClassName,
   useClassNameFactory,
   useColorScheme,

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/production/hooks/useAddClassNameDuringResize.js

@@ -1,19 +1,14 @@
 import { useRef, useLayoutEffect } from "react";
 import { useOnWindowResize } from "./useOnWindowResize.js";
 import { useReferentiallyStableCallback } from "../referentiallyStable/useReferentiallyStableCallback.js";
-function intendedFlushOfCSSChangesToCauseImmediateReflow(element) {
-  element.offsetHeight;
-}
 function addClassName(className, element) {
   if (element.classList.contains(className)) {
     element.classList.remove(className);
-    intendedFlushOfCSSChangesToCauseImmediateReflow(element);
   }
 }
 function removeClassName(className, element) {
   if (!element.classList.contains(className)) {
     element.classList.add(className);
-    intendedFlushOfCSSChangesToCauseImmediateReflow(element);
   }
 }
 function useAddClassNameDuringResize(className, timeoutToRestore = 300, element) {

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

@@ -1 +1 @@
-{"version":3,"file":"useAddClassNameDuringResize.js","sources":["../../../src/hooks/useAddClassNameDuringResize.ts"],"sourcesContent":["import { useLayoutEffect, useRef } from 'react'\nimport { useReferentiallyStableCallback } from '../referentiallyStable'\nimport { useOnWindowResize } from './useOnWindowResize'\n\nfunction intendedFlushOfCSSChangesToCauseImmediateReflow(element: HTMLElement) {\n\telement.offsetHeight\n}\n\nfunction addClassName(\n\tclassName: string,\n\telement: HTMLElement,\n) {\n\tif (element.classList.contains(className)) {\n\t\telement.classList.remove(className)\n\t\tintendedFlushOfCSSChangesToCauseImmediateReflow(element)\n\t}\n}\n\nfunction removeClassName(\n\tclassName: string,\n\telement: HTMLElement,\n) {\n\tif (!element.classList.contains(className)) {\n\t\telement.classList.add(className)\n\t\tintendedFlushOfCSSChangesToCauseImmediateReflow(element)\n\t}\n}\n\n/**\n * Adds CSS class during resize event to element\n *\n * - Falls back to document.body when no element is specified\n * - Adds CSS class to element also on the initial load\n * - Uses element.classList directly\n *\n * @param className - CSS class to apply during the resize event\n * @param timeoutToRestore - Timeout in milliseconds to wait before finally removing the CSS class\n * @param element - Optional HTML element to apply CSS class to\n */\nexport function useAddClassNameDuringResize(\n\tclassName: string,\n\ttimeoutToRestore: number = 300,\n\telement?: HTMLElement,\n) {\n\tconst timeoutID = useRef<number>()\n\n\tconst addTemporaryClassName = useReferentiallyStableCallback(() => {\n\t\tclearTimeout(timeoutID.current)\n\t\tremoveClassName(className, element ?? document.body)\n\n\t\ttimeoutID.current = setTimeout(() => {\n\t\t\taddClassName(className, element ?? document.body)\n\t\t}, timeoutToRestore)\n\n\t\treturn () => {\n\t\t\tclearTimeout(timeoutID.current)\n\t\t}\n\t})\n\n\tuseLayoutEffect(addTemporaryClassName, [addTemporaryClassName])\n\tuseOnWindowResize(addTemporaryClassName)\n}\n"],"names":[],"mappings":";;;AAIA,SAAS,gDAAgD,SAAsB;AACtE,UAAA;AACT;AAEA,SAAS,aACR,WACA,SACC;AACD,MAAI,QAAQ,UAAU,SAAS,SAAS,GAAG;AAClC,YAAA,UAAU,OAAO,SAAS;AAClC,oDAAgD,OAAO;AAAA,EACxD;AACD;AAEA,SAAS,gBACR,WACA,SACC;AACD,MAAI,CAAC,QAAQ,UAAU,SAAS,SAAS,GAAG;AACnC,YAAA,UAAU,IAAI,SAAS;AAC/B,oDAAgD,OAAO;AAAA,EACxD;AACD;AAaO,SAAS,4BACf,WACA,mBAA2B,KAC3B,SACC;AACD,QAAM,YAAY;AAEZ,QAAA,wBAAwB,+BAA+B,MAAM;AAClE,iBAAa,UAAU,OAAO;AACd,oBAAA,WAAW,WAAW,SAAS,IAAI;AAEzC,cAAA,UAAU,WAAW,MAAM;AACvB,mBAAA,WAAW,WAAW,SAAS,IAAI;AAAA,OAC9C,gBAAgB;AAEnB,WAAO,MAAM;AACZ,mBAAa,UAAU,OAAO;AAAA,IAAA;AAAA,EAC/B,CACA;AAEe,kBAAA,uBAAuB,CAAC,qBAAqB,CAAC;AAC9D,oBAAkB,qBAAqB;AACxC;"}
+{"version":3,"file":"useAddClassNameDuringResize.js","sources":["../../../src/hooks/useAddClassNameDuringResize.ts"],"sourcesContent":["import { useLayoutEffect, useRef } from 'react'\nimport { useReferentiallyStableCallback } from '../referentiallyStable'\nimport { useOnWindowResize } from './useOnWindowResize'\n\nfunction addClassName(\n\tclassName: string,\n\telement: HTMLElement,\n) {\n\tif (element.classList.contains(className)) {\n\t\telement.classList.remove(className)\n\t}\n}\n\nfunction removeClassName(\n\tclassName: string,\n\telement: HTMLElement,\n) {\n\tif (!element.classList.contains(className)) {\n\t\telement.classList.add(className)\n\t}\n}\n\n/**\n * Adds CSS class during resize event to element\n *\n * - Falls back to document.body when no element is specified\n * - Adds CSS class to element also on the initial load\n * - Uses element.classList directly\n *\n * @param className - CSS class to apply during the resize event\n * @param timeoutToRestore - Timeout in milliseconds to wait before finally removing the CSS class\n * @param element - Optional HTML element to apply CSS class to\n */\nexport function useAddClassNameDuringResize(\n\tclassName: string,\n\ttimeoutToRestore: number = 300,\n\telement?: HTMLElement,\n) {\n\tconst timeoutID = useRef<number>()\n\n\tconst addTemporaryClassName = useReferentiallyStableCallback(() => {\n\t\tclearTimeout(timeoutID.current)\n\t\tremoveClassName(className, element ?? document.body)\n\n\t\ttimeoutID.current = setTimeout(() => {\n\t\t\taddClassName(className, element ?? document.body)\n\t\t}, timeoutToRestore)\n\n\t\treturn () => {\n\t\t\tclearTimeout(timeoutID.current)\n\t\t}\n\t})\n\n\tuseLayoutEffect(addTemporaryClassName, [addTemporaryClassName])\n\tuseOnWindowResize(addTemporaryClassName)\n}\n"],"names":[],"mappings":";;;AAIA,SAAS,aACR,WACA,SACC;AACD,MAAI,QAAQ,UAAU,SAAS,SAAS,GAAG;AAClC,YAAA,UAAU,OAAO,SAAS;AAAA,EACnC;AACD;AAEA,SAAS,gBACR,WACA,SACC;AACD,MAAI,CAAC,QAAQ,UAAU,SAAS,SAAS,GAAG;AACnC,YAAA,UAAU,IAAI,SAAS;AAAA,EAChC;AACD;AAaO,SAAS,4BACf,WACA,mBAA2B,KAC3B,SACC;AACD,QAAM,YAAY;AAEZ,QAAA,wBAAwB,+BAA+B,MAAM;AAClE,iBAAa,UAAU,OAAO;AACd,oBAAA,WAAW,WAAW,SAAS,IAAI;AAEzC,cAAA,UAAU,WAAW,MAAM;AACvB,mBAAA,WAAW,WAAW,SAAS,IAAI;AAAA,OAC9C,gBAAgB;AAEnB,WAAO,MAAM;AACZ,mBAAa,UAAU,OAAO;AAAA,IAAA;AAAA,EAC/B,CACA;AAEe,kBAAA,uBAAuB,CAAC,qBAAqB,CAAC;AAC9D,oBAAkB,qBAAqB;AACxC;"}

package/dist/production/hooks/useAutoHeightTextArea.js

@@ -3,7 +3,7 @@ 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) => {
+  const measure = useCallback(async (ref, minRows2, maxRows2) => {
     if (ref) {
       const rowsAttribute = ref.rows;
       ref.style.height = "";
@@ -14,12 +14,12 @@ const useAutoHeightTextArea = (textAreaRef, value, minRows, maxRows) => {
         let minHeight;
         let maxHeight;
         ref.rows = minRows2;
-        minHeight = ref.offsetHeight;
+        minHeight = await ref.getBoundingClientRect().height;
         if (maxRows2 === Infinity) {
           maxHeight = Infinity;
         } else {
           ref.rows = maxRows2;
-          maxHeight = ref.offsetHeight;
+          maxHeight = await ref.getBoundingClientRect().height;
         }
         ref.style.height = px(height);
         ref.style.minHeight = px(minHeight);
@@ -29,10 +29,10 @@ const useAutoHeightTextArea = (textAreaRef, value, minRows, maxRows) => {
     }
   }, []);
   useOnElementResize(textAreaRef, () => {
-    measure(unwrapRefValue(textAreaRef), minRows, maxRows, value);
+    measure(unwrapRefValue(textAreaRef), minRows, maxRows);
   });
   useLayoutEffect(() => {
-    measure(unwrapRefValue(textAreaRef), minRows, maxRows, value);
+    measure(unwrapRefValue(textAreaRef), minRows, maxRows);
   }, [maxRows, measure, minRows, textAreaRef, value]);
 };
 export {

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

@@ -1 +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;"}
+{"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(async (ref: HTMLTextAreaElement | null, minRows: number, maxRows: number) => {\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 = await ref.getBoundingClientRect().height\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 = await ref.getBoundingClientRect().height\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)\n\t})\n\n\tuseLayoutEffect(() => {\n\t\tmeasure(unwrapRefValue(textAreaRef), minRows, maxRows)\n\t}, [maxRows, measure, minRows, textAreaRef, value])\n}\n"],"names":["minRows","maxRows"],"mappings":";;;;AAKO,MAAM,wBAAwB,CACpC,aACA,OACA,SACA,YACI;AACJ,QAAM,UAAU,YAAY,OAAO,KAAiCA,UAAiBC,aAAoB;AACxG,QAAI,KAAK;AACR,YAAM,gBAAgB,IAAI;AAE1B,UAAI,MAAM,SAAS;AACnB,UAAI,MAAM,YAAY;AACtB,UAAI,MAAM,YAAY;AAEtB,UAAID,aAAYC,UAAS;AACxB,cAAM,SAAS,IAAI;AACf,YAAA;AACA,YAAA;AAEJ,YAAI,OAAOD;AACC,oBAAA,MAAM,IAAI,sBAAA,EAAwB;AAE9C,YAAIC,aAAY,UAAU;AACb,sBAAA;AAAA,QAAA,OACN;AACN,cAAI,OAAOA;AACC,sBAAA,MAAM,IAAI,sBAAA,EAAwB;AAAA,QAC/C;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,OAAO;AAAA,EAAA,CACrD;AAED,kBAAgB,MAAM;AACrB,YAAQ,eAAe,WAAW,GAAG,SAAS,OAAO;AAAA,EAAA,GACnD,CAAC,SAAS,SAAS,SAAS,aAAa,KAAK,CAAC;AACnD;"}

package/dist/production/hooks/useChildrenAsLabel.js

@@ -0,0 +1,52 @@
+import { Children, useMemo } from "react";
+const MULTIPLE_SPACES_REG_EXP = / +/g;
+function normalize(text) {
+  return text.replace(MULTIPLE_SPACES_REG_EXP, " ").trim();
+}
+function getChildrenAsLabel(node) {
+  if (typeof node === "string" || typeof node === "number") {
+    return String(node);
+  } else if (node === null || node === void 0 || typeof node === "boolean") {
+    return void 0;
+  } else if (Array.isArray(node)) {
+    return normalize(node.map(getChildrenAsLabel).join(""));
+  } else {
+    let label = [];
+    Children.map(node, (child) => {
+      if (child === null || child === void 0 || typeof child === "boolean")
+        ;
+      else if (typeof child === "string") {
+        label.push(child);
+      } else if (typeof child === "number") {
+        label.push(child);
+      } else if (Array.isArray(child)) {
+        const childLabel = getChildrenAsLabel(child);
+        if (childLabel) {
+          label.push(childLabel);
+        }
+      } else {
+        if ("props" in child && "children" in child.props) {
+          const childLabel = getChildrenAsLabel(child.props.children);
+          if (childLabel) {
+            label.push(childLabel);
+          }
+        } else if ("children" in child) {
+          const childLabel = getChildrenAsLabel(child.children);
+          if (childLabel) {
+            label.push(childLabel);
+          }
+        } else
+          ;
+      }
+    });
+    return label.length > 0 ? label.join("") : void 0;
+  }
+}
+function useChildrenAsLabel(node) {
+  return useMemo(() => getChildrenAsLabel(node), [node]);
+}
+export {
+  getChildrenAsLabel,
+  useChildrenAsLabel
+};
+//# sourceMappingURL=useChildrenAsLabel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useChildrenAsLabel.js","sources":["../../../src/hooks/useChildrenAsLabel.ts"],"sourcesContent":["import { Children, ReactNode, useMemo } from 'react'\n\nconst MULTIPLE_SPACES_REG_EXP = / +/g\n\nfunction normalize(text: string): string {\n\treturn text.replace(MULTIPLE_SPACES_REG_EXP, ' ').trim()\n}\n\n/**\n * Walks through the children and returns a string representation of the text content.\n *\n * @param node - The children to walk through.\n * @returns String representation of the text content or undefined if there is no text content.\n *\n */\nexport function getChildrenAsLabel(node: ReactNode): string | undefined {\n\tif (typeof node === 'string' || typeof node === 'number') {\n\t\treturn String(node)\n\t} else if (node === null || node === undefined || typeof node === 'boolean') {\n\t\treturn undefined\n\t} else if (Array.isArray(node)) {\n\t\treturn normalize(node.map(getChildrenAsLabel).join(''))\n\t} else {\n\t\tlet label: (string | number)[] = []\n\n\t\tChildren.map(node, child => {\n\t\t\tif (child === null || child === undefined || typeof child === 'boolean') {\n\t\t\t} else if (typeof child === 'string') {\n\t\t\t\tlabel.push(child)\n\t\t\t} else if (typeof child === 'number') {\n\t\t\t\tlabel.push(child)\n\t\t\t} else if (Array.isArray(child)) {\n\t\t\t\tconst childLabel = getChildrenAsLabel(child)\n\n\t\t\t\tif (childLabel) {\n\t\t\t\t\tlabel.push(childLabel)\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\t// ReactElement | JSXElementConstructor | ReactPortal\n\t\t\t\tif ('props' in child && 'children' in child.props) {\n\t\t\t\t\tconst childLabel = getChildrenAsLabel(child.props.children)\n\n\t\t\t\t\tif (childLabel) {\n\t\t\t\t\t\tlabel.push(childLabel)\n\t\t\t\t\t}\n\t\t\t\t} else if ('children' in child) {\n\t\t\t\t\t// ReactPortal\n\t\t\t\t\tconst childLabel = getChildrenAsLabel(child.children)\n\n\t\t\t\t\tif (childLabel) {\n\t\t\t\t\t\tlabel.push(childLabel)\n\t\t\t\t\t}\n\t\t\t\t} else if (import.meta.env.DEV) {\n\t\t\t\t\tconsole.warn('Unsupported child:', child)\n\t\t\t\t}\n\t\t\t}\n\t\t})\n\n\t\treturn label.length > 0 ? label.join('') : undefined\n\t}\n}\n\n/**\n * Walks through the children and returns a string representation of the text content.\n *\n * @param node - The children to walk through.\n * @returns String representation of the text content or undefined if there is no text content.\n *\n */\nexport function useChildrenAsLabel(node: ReactNode): string | undefined {\n\treturn useMemo(() => getChildrenAsLabel(node), [node])\n}\n"],"names":[],"mappings":";AAEA,MAAM,0BAA0B;AAEhC,SAAS,UAAU,MAAsB;AACxC,SAAO,KAAK,QAAQ,yBAAyB,GAAG,EAAE,KAAK;AACxD;AASO,SAAS,mBAAmB,MAAqC;AACvE,MAAI,OAAO,SAAS,YAAY,OAAO,SAAS,UAAU;AACzD,WAAO,OAAO,IAAI;AAAA,EAAA,WACR,SAAS,QAAQ,SAAS,UAAa,OAAO,SAAS,WAAW;AACrE,WAAA;AAAA,EACG,WAAA,MAAM,QAAQ,IAAI,GAAG;AAC/B,WAAO,UAAU,KAAK,IAAI,kBAAkB,EAAE,KAAK,EAAE,CAAC;AAAA,EAAA,OAChD;AACN,QAAI,QAA6B,CAAA;AAExB,aAAA,IAAI,MAAM,CAAS,UAAA;AAC3B,UAAI,UAAU,QAAQ,UAAU,UAAa,OAAO,UAAU;AAAW;AAAA,eAC9D,OAAO,UAAU,UAAU;AACrC,cAAM,KAAK,KAAK;AAAA,MAAA,WACN,OAAO,UAAU,UAAU;AACrC,cAAM,KAAK,KAAK;AAAA,MACN,WAAA,MAAM,QAAQ,KAAK,GAAG;AAC1B,cAAA,aAAa,mBAAmB,KAAK;AAE3C,YAAI,YAAY;AACf,gBAAM,KAAK,UAAU;AAAA,QACtB;AAAA,MAAA,OACM;AAEN,YAAI,WAAW,SAAS,cAAc,MAAM,OAAO;AAClD,gBAAM,aAAa,mBAAmB,MAAM,MAAM,QAAQ;AAE1D,cAAI,YAAY;AACf,kBAAM,KAAK,UAAU;AAAA,UACtB;AAAA,QAAA,WACU,cAAc,OAAO;AAEzB,gBAAA,aAAa,mBAAmB,MAAM,QAAQ;AAEpD,cAAI,YAAY;AACf,kBAAM,KAAK,UAAU;AAAA,UACtB;AAAA,QAAA;AACD;AAAA,MAGD;AAAA,IAAA,CACA;AAED,WAAO,MAAM,SAAS,IAAI,MAAM,KAAK,EAAE,IAAI;AAAA,EAC5C;AACD;AASO,SAAS,mBAAmB,MAAqC;AACvE,SAAO,QAAQ,MAAM,mBAAmB,IAAI,GAAG,CAAC,IAAI,CAAC;AACtD;"}

package/dist/production/hooks/useElementSize.js

@@ -1,43 +1,33 @@
-import { getSizeFromResizeObserverEntryFactory } from "@contember/utilities";
-import { useMemo, useState, useRef, useLayoutEffect } from "react";
+import { getSizeFromResizeObserverEntryFactory, getElementDimensionsCallback } from "@contember/utilities";
+import { useMemo, useState, useLayoutEffect } from "react";
 import { unwrapRefValue } from "./unwrapRefValue.js";
 import { useOnElementResize } from "./useOnElementResize.js";
 import { useScopedConsoleRef } from "../debug-context/Context.js";
-function getElementWidth(element) {
-  return element.offsetWidth;
-}
-function getElementHeight(element) {
-  return element.offsetHeight;
-}
+import { useReferentiallyStableCallback } from "../referentiallyStable/useReferentiallyStableCallback.js";
 function useElementSize(refOrElement, options = {}, timeout = 300) {
   const { logged } = useScopedConsoleRef("useElementSize").current;
   const { box = "border-box" } = options;
   const getSizeFromResizeObserverEntry = useMemo(() => getSizeFromResizeObserverEntryFactory(box), [box]);
-  const refValue = unwrapRefValue(refOrElement);
-  const [width, setWidth] = useState(refValue?.offsetWidth);
-  const [height, setHeight] = useState(refValue?.offsetHeight);
+  const [width, setWidth] = useState();
+  const [height, setHeight] = useState();
   logged("dimensions", { width, height });
-  useOnElementResize(refOrElement, (entry) => {
-    const dimensions = logged("useOnElementResize => entry:dimensions", getSizeFromResizeObserverEntry(entry));
+  const maybeSetNewDimensions = useReferentiallyStableCallback((dimensions) => {
     if (width !== dimensions.width) {
       setWidth(dimensions.width);
     }
     if (height !== dimensions.height) {
       setHeight(dimensions.height);
     }
-  }, { box }, timeout);
-  const measure = useRef((element) => {
-    logged("measure(element)", element);
-    if (element instanceof HTMLElement) {
-      setWidth(logged("getElementWidth(element):", getElementWidth(element)));
-      setHeight(logged("getElementHeight(element):", getElementHeight(element)));
-    } else if (element) {
-      throw new Error("Exhaustive error: Expecting element to be instance of HTMLElement or Window");
-    }
   });
+  useOnElementResize(refOrElement, (entry) => {
+    const dimensions = logged("useOnElementResize => entry:dimensions", getSizeFromResizeObserverEntry(entry));
+    maybeSetNewDimensions(dimensions);
+  }, { box }, timeout);
   useLayoutEffect(() => {
     const element = unwrapRefValue(refOrElement);
-    logged("useLayoutEffect => measure", measure.current(element));
+    if (element) {
+      getElementDimensionsCallback(element, (dimensions) => maybeSetNewDimensions(dimensions));
+    }
   });
   return { height, width };
 }