@contember/react-utils 1.2.6 → 1.3.0-alpha.2

package/dist/development/hooks/useElementTopOffset.cjs

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const react = require("react");
+function useElementTopOffset(ref) {
+  const [offsetTop, setOffsetTop] = react.useState(void 0);
+  react.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;
+}
+exports.useElementTopOffset = useElementTopOffset;
+//# sourceMappingURL=useElementTopOffset.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useElementTopOffset.cjs","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":["useState","useLayoutEffect"],"mappings":";;;AAEO,SAAS,oBAAoB,KAAkD;AACrF,QAAM,CAAC,WAAW,YAAY,IAAIA,MAAAA,SAA6B,MAAS;AAExEC,QAAAA,gBAAgB,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/useEventHandler.cjs

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const react = require("react");
+function useEventHandler(type, callback) {
+  const callbackRef = react.useRef(callback);
+  callbackRef.current = callback;
+  const stableHandler = react.useRef(function(event) {
+    return callbackRef.current(event);
+  }).current;
+  react.useEffect(() => {
+    return () => {
+      callbackRef.current = () => {
+      };
+    };
+  }, []);
+  return stableHandler;
+}
+exports.useEventHandler = useEventHandler;
+//# sourceMappingURL=useEventHandler.cjs.map

package/dist/development/hooks/useEventHandler.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useEventHandler.cjs","sources":["../../../src/hooks/useEventHandler.ts"],"sourcesContent":["import { EventHandler, SyntheticEvent, useEffect, useRef } from 'react'\n\n/**\n * Similar to useEvent with inferred type for the event parameter according to event type\n *\n * @param type - String, keyof DocumentEventMap, e.g. 'click', 'keydown',...\n * @param callback - EventHandler\n * @returns Stable reference callback\n */\nexport function useEventHandler<E extends SyntheticEvent<any>>(type: E['type'], callback: EventHandler<E>): EventHandler<E> {\n\tconst callbackRef = useRef(callback); callbackRef.current = callback\n\n\tconst stableHandler = useRef(function (event: any) {\n\t\treturn callbackRef.current(event)\n\t}).current\n\n\tuseEffect(() => {\n\t\treturn () => {\n\t\t\tcallbackRef.current = () => { }\n\t\t}\n\t}, [])\n\n\treturn stableHandler\n}\n"],"names":["useRef","useEffect"],"mappings":";;;AASgB,SAAA,gBAA+C,MAAiB,UAA4C;AACrH,QAAA,cAAcA,aAAO,QAAQ;AAAG,cAAY,UAAU;AAEtD,QAAA,gBAAgBA,aAAO,SAAU,OAAY;AAC3C,WAAA,YAAY,QAAQ,KAAK;AAAA,EAChC,CAAA,EAAE;AAEHC,QAAAA,UAAU,MAAM;AACf,WAAO,MAAM;AACZ,kBAAY,UAAU,MAAM;AAAA,MAAA;AAAA,IAAE;AAAA,EAEhC,GAAG,CAAE,CAAA;AAEE,SAAA;AACR;;"}

package/dist/development/hooks/useExpectSameValueReference.cjs

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const deepEqual = require("fast-deep-equal/es6/index.js");
+const react = require("react");
+function useExpectSameValueReference(next, shouldThrow = false) {
+  const previous = react.useRef(next);
+  if (next !== previous.current && typeof next === "object" && typeof previous.current === "object" && deepEqual(next, previous.current)) {
+    {
+      console.error(
+        "Previous and next values do not match in reference although match in value. Try declaring constants outside of the component scope. Otherwise try to memoize callbacks with useCallback, useReferentiallyStableCallback useEvent, useRef or useMemo.",
+        {
+          previous: previous.current,
+          next
+        }
+      );
+    }
+    if (shouldThrow) {
+      throw new Error("Expecting same reference for same values");
+    }
+  }
+  previous.current = next;
+}
+exports.useExpectSameValueReference = useExpectSameValueReference;
+//# sourceMappingURL=useExpectSameValueReference.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useExpectSameValueReference.cjs","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":["useRef"],"mappings":";;;;AAyBgB,SAAA,4BAA+B,MAAS,cAAuB,OAAO;AAC/E,QAAA,WAAWA,aAAO,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/useForceRender.cjs

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const react = require("react");
+const useForceRender = () => {
+  const [, forceRender] = react.useReducer((s) => s + 1, 0);
+  return forceRender;
+};
+exports.useForceRender = useForceRender;
+//# sourceMappingURL=useForceRender.cjs.map

package/dist/development/hooks/useForceRender.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useForceRender.cjs","sources":["../../../src/hooks/useForceRender.ts"],"sourcesContent":["import { useReducer } from 'react'\n\nexport const useForceRender = () => {\n\tconst [, forceRender] = useReducer((s: number) => s + 1, 0)\n\treturn forceRender\n}\n"],"names":["useReducer"],"mappings":";;;AAEO,MAAM,iBAAiB,MAAM;AAC7B,QAAA,CAAG,EAAA,WAAW,IAAIA,iBAAW,CAAC,MAAc,IAAI,GAAG,CAAC;AACnD,SAAA;AACR;;"}

package/dist/development/hooks/useId.cjs

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const react = require("react");
+const count = { current: 360 };
+function nextId() {
+  count.current += 1;
+  return `:${count.current.toString(36)}:`;
+}
+function useId() {
+  return react.useMemo(() => nextId(), []);
+}
+exports.useId = useId;
+//# sourceMappingURL=useId.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useId.cjs","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":["useMemo"],"mappings":";;;AAEA,MAAM,QAAQ,EAAE,SAAS;AAEzB,SAAS,SAAS;AACjB,QAAM,WAAW;AAEjB,SAAO,IAAI,MAAM,QAAQ,SAAS,EAAE;AACrC;AAUO,SAAS,QAAQ;AACvB,SAAOA,cAAQ,MAAM,OAAO,GAAG,CAAE,CAAA;AAClC;;"}

package/dist/development/hooks/useIsMounted.cjs

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const react = require("react");
+const useIsMounted = () => {
+  const isMountedRef = react.useRef(true);
+  react.useEffect(
+    () => {
+      isMountedRef.current = true;
+      return () => {
+        isMountedRef.current = false;
+      };
+    },
+    []
+  );
+  return isMountedRef;
+};
+exports.useIsMounted = useIsMounted;
+//# sourceMappingURL=useIsMounted.cjs.map

package/dist/development/hooks/useIsMounted.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIsMounted.cjs","sources":["../../../src/hooks/useIsMounted.ts"],"sourcesContent":["import { useEffect, useRef } from 'react'\n\nexport const useIsMounted = () => {\n\tconst isMountedRef = useRef(true)\n\tuseEffect(\n\t\t() => {\n\t\t\tisMountedRef.current = true\n\t\t\treturn () => {\n\t\t\t\tisMountedRef.current = false\n\t\t\t}\n\t\t},\n\t\t[],\n\t)\n\treturn isMountedRef\n}\n"],"names":["useRef","useEffect"],"mappings":";;;AAEO,MAAM,eAAe,MAAM;AAC3B,QAAA,eAAeA,aAAO,IAAI;AAChCC,QAAA;AAAA,IACC,MAAM;AACL,mBAAa,UAAU;AACvB,aAAO,MAAM;AACZ,qBAAa,UAAU;AAAA,MAAA;AAAA,IAEzB;AAAA,IACA,CAAC;AAAA,EAAA;AAEK,SAAA;AACR;;"}

package/dist/development/hooks/useObjectMemo.cjs

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const react = require("react");
+const compareObjects = (a, b) => {
+  if (a === b) {
+    return true;
+  }
+  const aEntries = Object.entries(a);
+  if (aEntries.length !== Object.keys(b).length) {
+    return false;
+  }
+  for (const [key, val] of aEntries) {
+    if (!(key in b) || b[key] !== val) {
+      return false;
+    }
+  }
+  return true;
+};
+const useObjectMemo = (value) => {
+  const valueRef = react.useRef(value);
+  if (!compareObjects(valueRef.current, value)) {
+    valueRef.current = value;
+  }
+  return valueRef.current;
+};
+exports.useObjectMemo = useObjectMemo;
+//# sourceMappingURL=useObjectMemo.cjs.map

package/dist/development/hooks/useObjectMemo.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useObjectMemo.cjs","sources":["../../../src/hooks/useObjectMemo.ts"],"sourcesContent":["import { useRef } from 'react'\n\nconst compareObjects = (a: object, b: object): boolean => {\n\tif (a === b) {\n\t\treturn true\n\t}\n\tconst aEntries = Object.entries(a)\n\tif (aEntries.length !== Object.keys(b).length) {\n\t\treturn false\n\t}\n\tfor (const [key, val] of aEntries) {\n\t\tif (!(key in b) || (b as any)[key] !== val) {\n\t\t\treturn false\n\t\t}\n\t}\n\treturn true\n}\n\nexport const useObjectMemo = <A extends object>(value: A): A => {\n\tconst valueRef = useRef(value)\n\tif (!compareObjects(valueRef.current, value)) {\n\t\tvalueRef.current = value\n\t}\n\treturn valueRef.current\n}\n"],"names":["useRef"],"mappings":";;;AAEA,MAAM,iBAAiB,CAAC,GAAW,MAAuB;AACzD,MAAI,MAAM,GAAG;AACL,WAAA;AAAA,EACR;AACM,QAAA,WAAW,OAAO,QAAQ,CAAC;AACjC,MAAI,SAAS,WAAW,OAAO,KAAK,CAAC,EAAE,QAAQ;AACvC,WAAA;AAAA,EACR;AACA,aAAW,CAAC,KAAK,GAAG,KAAK,UAAU;AAClC,QAAI,EAAE,OAAO,MAAO,EAAU,GAAG,MAAM,KAAK;AACpC,aAAA;AAAA,IACR;AAAA,EACD;AACO,SAAA;AACR;AAEa,MAAA,gBAAgB,CAAmB,UAAgB;AACzD,QAAA,WAAWA,aAAO,KAAK;AAC7B,MAAI,CAAC,eAAe,SAAS,SAAS,KAAK,GAAG;AAC7C,aAAS,UAAU;AAAA,EACpB;AACA,SAAO,SAAS;AACjB;;"}

package/dist/development/hooks/useOnElementClickOutsideCallback.cjs

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const react = require("react");
+const unwrapRefValue = require("./unwrapRefValue.cjs");
+function useOnElementClickOutsideCallback(refOrElement, callback) {
+  react.useEffect(() => {
+    const refValue = unwrapRefValue.unwrapRefValue(refOrElement);
+    const handleClickOutside = (event) => {
+      if (refValue && !refValue.contains(event.target)) {
+        callback(event);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [callback, refOrElement]);
+}
+exports.useOnElementClickOutsideCallback = useOnElementClickOutsideCallback;
+//# sourceMappingURL=useOnElementClickOutsideCallback.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useOnElementClickOutsideCallback.cjs","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":["useEffect","unwrapRefValue"],"mappings":";;;;AAGgB,SAAA,iCACf,cACA,UACO;AACPA,QAAAA,UAAU,MAAM;AACT,UAAA,WAAWC,8BAAe,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.cjs

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const react = require("react");
+const unwrapRefValue = require("./unwrapRefValue.cjs");
+function useOnElementMouseEnterDelayedCallback(refOrElement, callback, timeoutMs = 300) {
+  react.useEffect(() => {
+    const refValue = unwrapRefValue.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]);
+}
+exports.useOnElementMouseEnterDelayedCallback = useOnElementMouseEnterDelayedCallback;
+//# sourceMappingURL=useOnElementMouseEnterDelayedCallback.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useOnElementMouseEnterDelayedCallback.cjs","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":["useEffect","unwrapRefValue"],"mappings":";;;;AAcO,SAAS,sCACf,cACA,UACA,YAAoB,KACb;AACPA,QAAAA,UAAU,MAAM;AACT,UAAA,WAAWC,8BAAe,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.cjs

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const deepEqual = require("fast-deep-equal/es6/index.js");
+const react = require("react");
+const unwrapRefValue = require("./unwrapRefValue.cjs");
+const Context = require("../debug-context/Context.cjs");
+function useOnElementMutation(refOrElement, callback, options = { attributes: true, childList: true, subtree: true }) {
+  const scopedConsoleRef = Context.useScopedConsoleRef("useOnElementMutation");
+  const callbackRef = react.useRef(callback);
+  callbackRef.current = callback;
+  const optionsRef = react.useRef(options);
+  optionsRef.current = options;
+  const [optionsState, setOptionsState] = react.useState(options);
+  react.useEffect(() => {
+    if (!deepEqual(optionsRef.current, options)) {
+      setOptionsState(options);
+    }
+  }, [options]);
+  react.useLayoutEffect(() => {
+    const element = unwrapRefValue.unwrapRefValue(refOrElement);
+    if (element) {
+      let handler = function(mutations, observer2) {
+        scopedConsoleRef.current.logged("element.mutations", mutations);
+        callbackRef.current(mutations, observer2);
+      };
+      const observer = new MutationObserver(handler);
+      observer.observe(element, optionsState);
+      return () => {
+        observer.disconnect();
+      };
+    }
+  }, [optionsState, refOrElement, scopedConsoleRef]);
+}
+exports.useOnElementMutation = useOnElementMutation;
+//# sourceMappingURL=useOnElementMutation.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useOnElementMutation.cjs","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":["useScopedConsoleRef","useRef","useState","useEffect","useLayoutEffect","unwrapRefValue","observer"],"mappings":";;;;;;AAKgB,SAAA,qBACf,cACA,UACA,UAAgC,EAAE,YAAY,MAAM,WAAW,MAAM,SAAS,KAAA,GAC7E;AACK,QAAA,mBAAmBA,4BAAoB,sBAAsB;AAE7D,QAAA,cAAcC,aAAO,QAAQ;AAAG,cAAY,UAAU;AACtD,QAAA,aAAaA,aAA6B,OAAO;AAAG,aAAW,UAAU;AAE/E,QAAM,CAAC,cAAc,eAAe,IAAIC,eAA+B,OAAO;AAE9EC,QAAAA,UAAU,MAAM;AACf,QAAI,CAAC,UAAU,WAAW,SAAS,OAAO,GAAG;AAC5C,sBAAgB,OAAO;AAAA,IACxB;AAAA,EAAA,GACE,CAAC,OAAO,CAAC;AAEZC,QAAAA,gBAAgB,MAAM;AACf,UAAA,UAAUC,8BAAe,YAAY;AAE3C,QAAI,SAAS;AACH,UAAA,UAAT,SAAiB,WAA6BC,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.cjs

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const react = require("react");
+const unwrapRefValue = require("./unwrapRefValue.cjs");
+const Context = require("../debug-context/Context.cjs");
+function useOnElementResize(refOrElement, callback, options = {}, timeout = 300) {
+  const scopedConsoleRef = Context.useScopedConsoleRef("useOnElementResize");
+  const { box = "border-box" } = options;
+  const callbackRef = react.useRef(callback);
+  callbackRef.current = callback;
+  const lastTimeStamp = react.useRef(0);
+  react.useLayoutEffect(() => {
+    const element = unwrapRefValue.unwrapRefValue(refOrElement);
+    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]);
+}
+exports.useOnElementResize = useOnElementResize;
+//# sourceMappingURL=useOnElementResize.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useOnElementResize.cjs","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":["useScopedConsoleRef","useRef","useLayoutEffect","unwrapRefValue"],"mappings":";;;;;AAIO,SAAS,mBACf,cACA,UACA,UAAiC,CAAC,GAClC,UAAkB,KACX;AACD,QAAA,mBAAmBA,4BAAoB,oBAAoB;AAE3D,QAAA,EAAE,MAAM,aAAiB,IAAA;AACzB,QAAA,cAAcC,aAAO,QAAQ;AAAG,cAAY,UAAU;AACtD,QAAA,gBAAgBA,aAAe,CAAC;AAEtCC,QAAAA,gBAAgB,MAAM;AACf,UAAA,UAAUC,8BAAe,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/useOnScrollWithin.cjs

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const react = require("react");
+const unwrapRefValue = require("./unwrapRefValue.cjs");
+const Context = require("../debug-context/Context.cjs");
+function useOnScrollWithin(refOrElement, callback, interval = 1e3 / 60) {
+  const scopedConsoleRef = Context.useScopedConsoleRef("useOnScrollWithin");
+  const callbackRef = react.useRef(callback);
+  callbackRef.current = callback;
+  const lastTimeStamp = react.useRef(0);
+  react.useLayoutEffect(() => {
+    const element = unwrapRefValue.unwrapRefValue(refOrElement);
+    let timeoutID = void 0;
+    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);
+          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 {
+        throw new Error("Exhaustive error: Expecting element to be instance of HTMLElement");
+      }
+    }
+  }, [interval, refOrElement, scopedConsoleRef]);
+}
+exports.useOnScrollWithin = useOnScrollWithin;
+//# sourceMappingURL=useOnScrollWithin.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useOnScrollWithin.cjs","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":["useScopedConsoleRef","useRef","useLayoutEffect","unwrapRefValue"],"mappings":";;;;;AAWO,SAAS,kBACf,cACA,UACA,WAAmB,MAAO,IACzB;AACK,QAAA,mBAAmBA,4BAAoB,mBAAmB;AAE1D,QAAA,cAAcC,aAAO,QAAQ;AAAG,cAAY,UAAU;AACtD,QAAA,gBAAgBA,aAAe,CAAC;AAEtCC,QAAAA,gBAAgB,MAAM;AACf,UAAA,UAAUC,8BAAe,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/hooks/useOnWindowResize.cjs

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const react = require("react");
+const Context = require("../debug-context/Context.cjs");
+function useOnWindowResize(callback, interval = 300) {
+  const scopedConsoleRef = Context.useScopedConsoleRef("useOnWindowResize");
+  const callbackRef = react.useRef(callback);
+  callbackRef.current = callback;
+  const lastTimeStamp = react.useRef(0);
+  react.useLayoutEffect(() => {
+    let timeoutID = void 0;
+    function debouncedHandler(event) {
+      clearTimeout(timeoutID);
+      const delta = event.timeStamp - lastTimeStamp.current;
+      scopedConsoleRef.current.logged("window.resize:delta", delta);
+      if (delta > interval) {
+        scopedConsoleRef.current.warned("event:window.resize:immediately", null);
+        callbackRef.current(event);
+        lastTimeStamp.current = event.timeStamp;
+      } else {
+        timeoutID = setTimeout(() => {
+          scopedConsoleRef.current.warned("event:window.resize:debounced", null);
+          lastTimeStamp.current = event.timeStamp;
+          callbackRef.current(event);
+        }, interval);
+      }
+    }
+    window.addEventListener("resize", debouncedHandler);
+    return () => {
+      clearTimeout(timeoutID);
+      window.removeEventListener("resize", debouncedHandler);
+    };
+  }, [callbackRef, interval, scopedConsoleRef]);
+}
+exports.useOnWindowResize = useOnWindowResize;
+//# sourceMappingURL=useOnWindowResize.cjs.map

package/dist/development/hooks/useOnWindowResize.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useOnWindowResize.cjs","sources":["../../../src/hooks/useOnWindowResize.ts"],"sourcesContent":["import { useLayoutEffect, useRef } from 'react'\nimport { useScopedConsoleRef } from '../debug-context'\n\nexport function useOnWindowResize(\n\tcallback: (event: Event) => void,\n\tinterval: number = 300,\n) {\n\tconst scopedConsoleRef = useScopedConsoleRef('useOnWindowResize')\n\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 debouncedHandler(event: Event) {\n\t\t\tclearTimeout(timeoutID)\n\n\t\t\tconst delta = event.timeStamp - lastTimeStamp.current\n\t\t\tscopedConsoleRef.current.logged('window.resize:delta', delta)\n\n\t\t\tif (delta > interval) {\n\t\t\t\tscopedConsoleRef.current.warned('event:window.resize:immediately', null)\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:window.resize:debounced', null)\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\twindow.addEventListener('resize', debouncedHandler)\n\n\t\treturn () => {\n\t\t\tclearTimeout(timeoutID)\n\t\t\twindow.removeEventListener('resize', debouncedHandler)\n\t\t}\n\t}, [callbackRef, interval, scopedConsoleRef])\n}\n"],"names":["useScopedConsoleRef","useRef","useLayoutEffect"],"mappings":";;;;AAGgB,SAAA,kBACf,UACA,WAAmB,KAClB;AACK,QAAA,mBAAmBA,4BAAoB,mBAAmB;AAE1D,QAAA,cAAcC,aAAO,QAAQ;AAAG,cAAY,UAAU;AACtD,QAAA,gBAAgBA,aAAe,CAAC;AAEtCC,QAAAA,gBAAgB,MAAM;AACrB,QAAI,YAAgC;AAEpC,aAAS,iBAAiB,OAAc;AACvC,mBAAa,SAAS;AAEhB,YAAA,QAAQ,MAAM,YAAY,cAAc;AAC7B,uBAAA,QAAQ,OAAO,uBAAuB,KAAK;AAE5D,UAAI,QAAQ,UAAU;AACJ,yBAAA,QAAQ,OAAO,mCAAmC,IAAI;AACvE,oBAAY,QAAQ,KAAK;AACzB,sBAAc,UAAU,MAAM;AAAA,MAAA,OACxB;AACN,oBAAY,WAAW,MAAM;AACX,2BAAA,QAAQ,OAAO,iCAAiC,IAAI;AACrE,wBAAc,UAAU,MAAM;AAC9B,sBAAY,QAAQ,KAAK;AAAA,WACvB,QAAQ;AAAA,MACZ;AAAA,IACD;AAEO,WAAA,iBAAiB,UAAU,gBAAgB;AAElD,WAAO,MAAM;AACZ,mBAAa,SAAS;AACf,aAAA,oBAAoB,UAAU,gBAAgB;AAAA,IAAA;AAAA,EAEpD,GAAA,CAAC,aAAa,UAAU,gBAAgB,CAAC;AAC7C;;"}

package/dist/development/hooks/usePreviousValue.cjs

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const react = require("react");
+const usePreviousValue = (value) => {
+  const ref = react.useRef(value);
+  react.useEffect(() => {
+    ref.current = value;
+  });
+  return ref.current;
+};
+exports.usePreviousValue = usePreviousValue;
+//# sourceMappingURL=usePreviousValue.cjs.map

package/dist/development/hooks/usePreviousValue.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePreviousValue.cjs","sources":["../../../src/hooks/usePreviousValue.ts"],"sourcesContent":["import { useEffect, useRef } from 'react'\n\nexport const usePreviousValue = <Value>(value: Value) => {\n\tconst ref = useRef<Value>(value)\n\tuseEffect(() => {\n\t\tref.current = value\n\t})\n\treturn ref.current\n}\n"],"names":["useRef","useEffect"],"mappings":";;;AAEa,MAAA,mBAAmB,CAAQ,UAAiB;AAClD,QAAA,MAAMA,aAAc,KAAK;AAC/BC,QAAAA,UAAU,MAAM;AACf,QAAI,UAAU;AAAA,EAAA,CACd;AACD,SAAO,IAAI;AACZ;;"}

package/dist/development/hooks/useScrollOffsets.cjs

@@ -0,0 +1,67 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const utilities = require("@contember/utilities");
+const react = require("react");
+const unwrapRefValue = require("./unwrapRefValue.cjs");
+const useOnScrollWithin = require("./useOnScrollWithin.cjs");
+const useOnWindowResize = require("./useOnWindowResize.cjs");
+const Context = require("../debug-context/Context.cjs");
+const useReferentiallyStableCallback = require("../referentiallyStable/useReferentiallyStableCallback.cjs");
+function useScrollOffsets(refOrElement, interval = 1e3 / 60) {
+  const { logged } = Context.useScopedConsoleRef("useScrollOffsets").current;
+  const [top, setTop] = react.useState(0);
+  const [bottom, setBottom] = react.useState(0);
+  const [left, setLeft] = react.useState(0);
+  const [right, setRight] = react.useState(0);
+  const updateScrollOffsetsState = useReferentiallyStableCallback.useReferentiallyStableCallback((offsets) => {
+    logged("Update the offsets:", {
+      previous: { bottom, left, right, top },
+      next: offsets
+    });
+    if (offsets.bottom !== bottom)
+      setBottom(offsets.bottom);
+    if (offsets.left !== left)
+      setLeft(offsets.left);
+    if (offsets.right !== right)
+      setRight(offsets.right);
+    if (offsets.top !== top)
+      setTop(offsets.top);
+  });
+  const handler = useReferentiallyStableCallback.useReferentiallyStableCallback(() => {
+    const maybeScrollContent = unwrapRefValue.unwrapRefValue(refOrElement) ?? document;
+    if (maybeScrollContent) {
+      getElementScrollOffsets(maybeScrollContent).then(updateScrollOffsetsState);
+    }
+  });
+  useOnScrollWithin.useOnScrollWithin(refOrElement, handler, interval);
+  useOnWindowResize.useOnWindowResize(handler);
+  react.useLayoutEffect(handler, [handler]);
+  return react.useMemo(() => ({ bottom, left, right, top }), [bottom, left, right, top]);
+}
+function isIntrinsicScrollElement(element) {
+  return element instanceof HTMLBodyElement || element instanceof HTMLHtmlElement || element instanceof DocumentType || element instanceof Document || element instanceof HTMLDocument;
+}
+function getIntrinsicScrollContainer(element) {
+  const html = document.body.parentElement;
+  utilities.assert("HTML element exists", html, (value) => value instanceof HTMLElement);
+  if (isIntrinsicScrollElement(element)) {
+    return html;
+  } else {
+    return element;
+  }
+}
+async function getElementScrollOffsets(element) {
+  const isIntrinsicScrolling = isIntrinsicScrollElement(element);
+  const scrollContainer = getIntrinsicScrollContainer(element);
+  const { scrollLeft, scrollTop, scrollHeight, scrollWidth } = scrollContainer;
+  const { height: scrollContainerHeight, width: scrollContainerWidth } = await utilities.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);
+  const bottom = Math.round(scrollHeight - height - top);
+  return { bottom, left, right, top };
+}
+exports.useScrollOffsets = useScrollOffsets;
+//# sourceMappingURL=useScrollOffsets.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useScrollOffsets.cjs","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":["useScopedConsoleRef","useState","useReferentiallyStableCallback","unwrapRefValue","useOnScrollWithin","useOnWindowResize","useLayoutEffect","useMemo","assert","getElementDimensions"],"mappings":";;;;;;;;;AAeO,SAAS,iBAAiB,cAA6D,WAAmB,MAAO,IAAI;AAC3H,QAAM,EAAE,OAAW,IAAAA,QAAA,oBAAoB,kBAAkB,EAAE;AAE3D,QAAM,CAAC,KAAK,MAAM,IAAIC,eAAS,CAAC;AAChC,QAAM,CAAC,QAAQ,SAAS,IAAIA,eAAS,CAAC;AACtC,QAAM,CAAC,MAAM,OAAO,IAAIA,eAAS,CAAC;AAClC,QAAM,CAAC,OAAO,QAAQ,IAAIA,eAAS,CAAC;AAE9B,QAAA,2BAA2BC,8DAA+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,UAAUA,+BAAAA,+BAA+B,MAAM;AAC9C,UAAA,qBAAqBC,eAAAA,eAAe,YAAY,KAAK;AAE3D,QAAI,oBAAoB;AACC,8BAAA,kBAAkB,EAAE,KAAK,wBAAwB;AAAA,IAC1E;AAAA,EAAA,CACA;AAEiBC,oBAAAA,kBAAA,cAAc,SAAS,QAAQ;AACjDC,oBAAA,kBAAkB,OAAO;AACTC,QAAAA,gBAAA,SAAS,CAAC,OAAO,CAAC;AAElC,SAAOC,MAAQ,QAAA,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;AAC3BC,YAAA,OAAO,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,MAAMC,UAAAA,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/hooks/useStoredState.cjs

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const react = require("react");
+const createStoredStateHook = (getStorage) => {
+  return (key, initializeValue) => {
+    const storage = getStorage();
+    const [value, setValue] = react.useState(() => {
+      const value2 = storage.getItem(key);
+      const parsedValue = value2 !== null ? JSON.parse(value2) : void 0;
+      return initializeValue(parsedValue);
+    });
+    return [value, react.useCallback((value2) => {
+      setValue((current) => {
+        const newValue = typeof value2 === "function" ? value2(current) : value2;
+        storage.setItem(key, JSON.stringify(newValue));
+        return newValue;
+      });
+    }, [key, storage])];
+  };
+};
+const useSessionStorageState = createStoredStateHook(() => sessionStorage);
+exports.useSessionStorageState = useSessionStorageState;
+//# sourceMappingURL=useStoredState.cjs.map

package/dist/development/hooks/useStoredState.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useStoredState.cjs","sources":["../../../src/hooks/useStoredState.ts"],"sourcesContent":["import { useCallback, useState } from 'react'\nimport { Serializable } from '../types'\n\nexport type SetState<V extends Serializable> = (value: V | ((current: V) => V)) => void;\nexport type ValueInitializer<V extends Serializable> = (storedValue: V | undefined) => V;\n\nconst createStoredStateHook = (getStorage: () => Storage) => {\n\treturn <V extends Serializable>(key: string, initializeValue: ValueInitializer<V>): [V, SetState<V>] => {\n\t\tconst storage = getStorage()\n\t\tconst [value, setValue] = useState<V>(() => {\n\t\t\tconst value = storage.getItem(key)\n\t\t\tconst parsedValue: V | undefined = value !== null ? JSON.parse(value) : undefined\n\t\t\treturn initializeValue(parsedValue)\n\t\t})\n\t\treturn [value, useCallback(value => {\n\t\t\tsetValue(current => {\n\t\t\t\tconst newValue = typeof value === 'function' ? (value as (current: V) => V)(current) : value\n\t\t\t\tstorage.setItem(key, JSON.stringify(newValue))\n\t\t\t\treturn newValue\n\t\t\t})\n\t\t}, [key, storage])]\n\t}\n\n}\n\nexport const useSessionStorageState = createStoredStateHook(() => sessionStorage)\n"],"names":["useState","value","useCallback"],"mappings":";;;AAMA,MAAM,wBAAwB,CAAC,eAA8B;AACrD,SAAA,CAAyB,KAAa,oBAA2D;AACvG,UAAM,UAAU;AAChB,UAAM,CAAC,OAAO,QAAQ,IAAIA,eAAY,MAAM;AACrCC,YAAAA,SAAQ,QAAQ,QAAQ,GAAG;AACjC,YAAM,cAA6BA,WAAU,OAAO,KAAK,MAAMA,MAAK,IAAI;AACxE,aAAO,gBAAgB,WAAW;AAAA,IAAA,CAClC;AACD,WAAO,CAAC,OAAOC,kBAAY,CAAAD,WAAS;AACnC,eAAS,CAAW,YAAA;AACnB,cAAM,WAAW,OAAOA,WAAU,aAAcA,OAA4B,OAAO,IAAIA;AACvF,gBAAQ,QAAQ,KAAK,KAAK,UAAU,QAAQ,CAAC;AACtC,eAAA;AAAA,MAAA,CACP;AAAA,IACC,GAAA,CAAC,KAAK,OAAO,CAAC,CAAC;AAAA,EAAA;AAGpB;AAEa,MAAA,yBAAyB,sBAAsB,MAAM,cAAc;;"}

package/dist/development/hooks/useUpdatedRef.cjs

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const react = require("react");
+function useUpdatedRef(value) {
+  const ref = react.useRef(value);
+  ref.current = value;
+  return ref;
+}
+exports.useUpdatedRef = useUpdatedRef;
+//# sourceMappingURL=useUpdatedRef.cjs.map

package/dist/development/hooks/useUpdatedRef.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useUpdatedRef.cjs","sources":["../../../src/hooks/useUpdatedRef.ts"],"sourcesContent":["import { useRef } from 'react'\n\n/**\n * Returns a stable mutable object with value that is updated upon each call\n *\n * @param value - Value that could update after initial call\n * @returns Mutable ref object with updated value\n */\nexport function useUpdatedRef<T>(value: T) {\n\tconst ref = useRef(value)\n\tref.current = value\n\n\treturn ref\n}\n"],"names":["useRef"],"mappings":";;;AAQO,SAAS,cAAiB,OAAU;AACpC,QAAA,MAAMA,aAAO,KAAK;AACxB,MAAI,UAAU;AAEP,SAAA;AACR;;"}

package/dist/development/hooks/useWindowSize.cjs

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const react = require("react");
+const useOnWindowResize = require("./useOnWindowResize.cjs");
+function useWindowSize() {
+  const [width, setWidth] = react.useState(window.innerWidth);
+  const [height, setHeight] = react.useState(window.innerHeight);
+  useOnWindowResize.useOnWindowResize(() => {
+    const { innerHeight, innerWidth } = window;
+    if (innerHeight !== height) {
+      setHeight(innerHeight);
+    }
+    if (innerWidth !== width) {
+      setWidth(innerWidth);
+    }
+  });
+  return react.useMemo(() => ({ height, width }), [height, width]);
+}
+exports.useWindowSize = useWindowSize;
+//# sourceMappingURL=useWindowSize.cjs.map