@contember/react-utils 1.2.0-alpha.0 → 1.2.0-alpha.10

package/dist/development/hooks/useScrollOffsets.js

@@ -0,0 +1,68 @@
+import { assert } from "@contember/utilities";
+import { useState, useLayoutEffect, useMemo } from "react";
+import { unwrapRefValue } from "./unwrapRefValue.js";
+import { useOnScrollWithin } from "./useOnScrollWithin.js";
+import { useOnWindowResize } from "./useOnWindowResize.js";
+import { useScopedConsoleRef } from "../debug-context/Context.js";
+import { useReferentiallyStableCallback } from "../referentiallyStable/useReferentiallyStableCallback.js";
+function useScrollOffsets(refOrElement, interval = 1e3 / 60) {
+  const { logged } = useScopedConsoleRef("useScrollOffsets").current;
+  const [top, setTop] = useState(0);
+  const [bottom, setBottom] = useState(0);
+  const [left, setLeft] = useState(0);
+  const [right, setRight] = useState(0);
+  const updateScrollOffsetsState = 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(() => {
+    const maybeScrollContent = unwrapRefValue(refOrElement) ?? document;
+    if (maybeScrollContent) {
+      updateScrollOffsetsState(
+        getElementScrollOffsets(maybeScrollContent)
+      );
+    }
+  });
+  useOnScrollWithin(refOrElement, handler, interval);
+  useOnWindowResize(handler);
+  useLayoutEffect(handler, [handler]);
+  return 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;
+  assert("HTML element exists", html, (value) => value instanceof HTMLElement);
+  if (isIntrinsicScrollElement(element)) {
+    return html;
+  } else {
+    return element;
+  }
+}
+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 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 };
+}
+export {
+  useScrollOffsets
+};
+//# sourceMappingURL=useScrollOffsets.js.map

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

@@ -0,0 +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;"}

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

@@ -1 +1 @@
-{"version":3,"file":"useStoredState.js","sources":["../../../src/hooks/useStoredState.ts"],"sourcesContent":["import { useCallback, useState } from 'react'\nimport { Serializable } from '../types'\n\ntype SetState<V extends Serializable> = (value: V | ((current: V) => V)) => void;\ntype 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":["value"],"mappings":";AAMA,MAAM,wBAAwB,CAAC,eAA8B;AACrD,SAAA,CAAyB,KAAa,oBAA2D;AACvG,UAAM,UAAU;AAChB,UAAM,CAAC,OAAO,QAAQ,IAAI,SAAY,MAAM;AACrCA,YAAAA,SAAQ,QAAQ,QAAQ,GAAG;AACjC,YAAM,cAA6BA,WAAU,OAAO,KAAK,MAAMA,MAAK,IAAI;AACxE,aAAO,gBAAgB,WAAW;AAAA,IAAA,CAClC;AACD,WAAO,CAAC,OAAO,YAAY,CAAAA,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;"}
+{"version":3,"file":"useStoredState.js","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":["value"],"mappings":";AAMA,MAAM,wBAAwB,CAAC,eAA8B;AACrD,SAAA,CAAyB,KAAa,oBAA2D;AACvG,UAAM,UAAU;AAChB,UAAM,CAAC,OAAO,QAAQ,IAAI,SAAY,MAAM;AACrCA,YAAAA,SAAQ,QAAQ,QAAQ,GAAG;AACjC,YAAM,cAA6BA,WAAU,OAAO,KAAK,MAAMA,MAAK,IAAI;AACxE,aAAO,gBAAgB,WAAW;AAAA,IAAA,CAClC;AACD,WAAO,CAAC,OAAO,YAAY,CAAAA,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.js

@@ -0,0 +1,10 @@
+import { useRef } from "react";
+function useUpdatedRef(value) {
+  const ref = useRef(value);
+  ref.current = value;
+  return ref;
+}
+export {
+  useUpdatedRef
+};
+//# sourceMappingURL=useUpdatedRef.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useUpdatedRef.js","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":[],"mappings":";AAQO,SAAS,cAAiB,OAAU;AACpC,QAAA,MAAM,OAAO,KAAK;AACxB,MAAI,UAAU;AAEP,SAAA;AACR;"}

package/dist/development/hooks/useWindowSize.js

@@ -0,0 +1,20 @@
+import { useState, useMemo } from "react";
+import { useOnWindowResize } from "./useOnWindowResize.js";
+function useWindowSize() {
+  const [width, setWidth] = useState(window.innerWidth);
+  const [height, setHeight] = useState(window.innerHeight);
+  useOnWindowResize(() => {
+    const { innerHeight, innerWidth } = window;
+    if (innerHeight !== height) {
+      setHeight(innerHeight);
+    }
+    if (innerWidth !== width) {
+      setWidth(innerWidth);
+    }
+  });
+  return useMemo(() => ({ height, width }), [height, width]);
+}
+export {
+  useWindowSize
+};
+//# sourceMappingURL=useWindowSize.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useWindowSize.js","sources":["../../../src/hooks/useWindowSize.ts"],"sourcesContent":["import { useMemo, useState } from 'react'\nimport { useOnWindowResize } from './useOnWindowResize'\n\nexport function useWindowSize() {\n  const [width, setWidth] = useState(window.innerWidth)\n  const [height, setHeight] = useState(window.innerHeight)\n\n  useOnWindowResize(() => {\n    const { innerHeight, innerWidth } = window\n    if (innerHeight !== height) {\n      setHeight(innerHeight)\n    }\n\n    if (innerWidth !== width) {\n      setWidth(innerWidth)\n    }\n  })\n\n  return useMemo(() => ({ height, width }), [height, width])\n}\n"],"names":[],"mappings":";;AAGO,SAAS,gBAAgB;AAC9B,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,OAAO,UAAU;AACpD,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,OAAO,WAAW;AAEvD,oBAAkB,MAAM;AAChB,UAAA,EAAE,aAAa,WAAe,IAAA;AACpC,QAAI,gBAAgB,QAAQ;AAC1B,gBAAU,WAAW;AAAA,IACvB;AAEA,QAAI,eAAe,OAAO;AACxB,eAAS,UAAU;AAAA,IACrB;AAAA,EAAA,CACD;AAEM,SAAA,QAAQ,OAAO,EAAE,QAAQ,MAAU,IAAA,CAAC,QAAQ,KAAK,CAAC;AAC3D;"}

package/dist/development/index.js

@@ -1,14 +1,29 @@
+import { createNonNullableContextFactory } from "./context/createNonNullableContextFactory.js";
+import { isNoopScopedConsole, noopLog, noopLogged, noopScopedConsole } from "./debug-context/Constants.js";
+import { DebugChildren, ScopedConsoleContext, useScopedConsoleRef } from "./debug-context/Context.js";
+import { unwrapRefValue } from "./hooks/unwrapRefValue.js";
 import { useAbortController } from "./hooks/useAbortController.js";
+import { useAddClassNameDuringResize } from "./hooks/useAddClassNameDuringResize.js";
 import { useArrayMapMemo } from "./hooks/useArrayMapMemo.js";
+import { useComposeRef } from "./hooks/useComposeRef.js";
 import { useConstantLengthInvariant } from "./hooks/useConstantLengthInvariant.js";
 import { useConstantValueInvariant } from "./hooks/useConstantValueInvariant.js";
 import { useDebounce } from "./hooks/useDebounce.js";
 import { useDebounceCallback } from "./hooks/useDebounceCallback.js";
+import { useElementSize } from "./hooks/useElementSize.js";
+import { useEventHandler } from "./hooks/useEventHandler.js";
+import { useExpectSameValueReference } from "./hooks/useExpectSameValueReference.js";
 import { useForceRender } from "./hooks/useForceRender.js";
 import { useIsMounted } from "./hooks/useIsMounted.js";
 import { useObjectMemo } from "./hooks/useObjectMemo.js";
+import { useOnElementMutation } from "./hooks/useOnElementMutation.js";
+import { useOnElementResize } from "./hooks/useOnElementResize.js";
+import { useOnWindowResize } from "./hooks/useOnWindowResize.js";
 import { usePreviousValue } from "./hooks/usePreviousValue.js";
+import { useScrollOffsets } from "./hooks/useScrollOffsets.js";
 import { useSessionStorageState } from "./hooks/useStoredState.js";
+import { useUpdatedRef } from "./hooks/useUpdatedRef.js";
+import { useWindowSize } from "./hooks/useWindowSize.js";
 import { emptyArray } from "./referentiallyStable/emptyArray.js";
 import { emptyObject } from "./referentiallyStable/emptyObject.js";
 import { identityFunction } from "./referentiallyStable/identityFunction.js";
@@ -17,23 +32,43 @@ import { returnFalse } from "./referentiallyStable/returnFalse.js";
 import { returnTrue } from "./referentiallyStable/returnTrue.js";
 import { useReferentiallyStableCallback } from "./referentiallyStable/useReferentiallyStableCallback.js";
 export {
+  DebugChildren,
+  ScopedConsoleContext,
+  createNonNullableContextFactory,
   emptyArray,
   emptyObject,
   identityFunction,
+  isNoopScopedConsole,
   noop,
+  noopLog,
+  noopLogged,
+  noopScopedConsole,
   returnFalse,
   returnTrue,
+  unwrapRefValue,
   useAbortController,
+  useAddClassNameDuringResize,
   useArrayMapMemo,
+  useComposeRef,
   useConstantLengthInvariant,
   useConstantValueInvariant,
   useDebounce,
   useDebounceCallback,
+  useElementSize,
+  useEventHandler,
+  useExpectSameValueReference,
   useForceRender,
   useIsMounted,
   useObjectMemo,
+  useOnElementMutation,
+  useOnElementResize,
+  useOnWindowResize,
   usePreviousValue,
   useReferentiallyStableCallback,
-  useSessionStorageState
+  useScopedConsoleRef,
+  useScrollOffsets,
+  useSessionStorageState,
+  useUpdatedRef,
+  useWindowSize
 };
 //# sourceMappingURL=index.js.map

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/context/createNonNullableContextFactory.js

@@ -0,0 +1,17 @@
+import { createContext, useContext } from "react";
+function createNonNullableContextFactory(displayName, initialValue) {
+  const RequiredContext = createContext(initialValue ?? null);
+  RequiredContext.displayName = displayName;
+  const useRequiredContext = () => {
+    const context = useContext(RequiredContext);
+    if (context == null) {
+      throw new Error(`use${displayName} must be used within a ${displayName} provider`);
+    }
+    return context;
+  };
+  return [RequiredContext, useRequiredContext];
+}
+export {
+  createNonNullableContextFactory
+};
+//# sourceMappingURL=createNonNullableContextFactory.js.map

package/dist/production/context/createNonNullableContextFactory.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"createNonNullableContextFactory.js","sources":["../../../src/context/createNonNullableContextFactory.ts"],"sourcesContent":["import type { Context } from 'react'\nimport { createContext, useContext } from 'react'\n\nexport function createNonNullableContextFactory<T>(displayName: string, initialValue?: T): [Context<T>, () => NonNullable<T>] {\n  const RequiredContext = createContext<T>((initialValue ?? null)!)\n  RequiredContext.displayName = displayName\n\n  const useRequiredContext = () => {\n    const context = useContext(RequiredContext)\n\n    if (context == null) {\n      throw new Error(`use${displayName} must be used within a ${displayName} provider`)\n    }\n\n    return context\n  }\n\n  return [RequiredContext, useRequiredContext]\n}\n"],"names":[],"mappings":";AAGgB,SAAA,gCAAmC,aAAqB,cAAsD;AACtH,QAAA,kBAAkB,cAAkB,gBAAgB,IAAM;AAChE,kBAAgB,cAAc;AAE9B,QAAM,qBAAqB,MAAM;AACzB,UAAA,UAAU,WAAW,eAAe;AAE1C,QAAI,WAAW,MAAM;AACnB,YAAM,IAAI,MAAM,MAAM,qCAAqC,sBAAsB;AAAA,IACnF;AAEO,WAAA;AAAA,EAAA;AAGF,SAAA,CAAC,iBAAiB,kBAAkB;AAC7C;"}

package/dist/production/debug-context/Constants.js

@@ -0,0 +1,25 @@
+function noopLog(...parameters) {
+}
+function noopLogged(message, value) {
+  return value;
+}
+const noopScopedConsole = Object.freeze({
+  log: noopLog,
+  logged: noopLogged,
+  warn: noopLog,
+  warned: noopLogged,
+  error: noopLog,
+  errored: noopLogged,
+  trace: noopLog,
+  traced: noopLogged
+});
+function isNoopScopedConsole(value) {
+  return value === noopScopedConsole;
+}
+export {
+  isNoopScopedConsole,
+  noopLog,
+  noopLogged,
+  noopScopedConsole
+};
+//# sourceMappingURL=Constants.js.map

package/dist/production/debug-context/Constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Constants.js","sources":["../../../src/debug-context/Constants.ts"],"sourcesContent":["import type { ScopedConsoleContextType } from './Types'\n\nexport function noopLog(...parameters: any[]) { }\n\nexport function noopLogged<T>(message: string, value: T): T {\n\treturn value\n}\n\nexport const noopScopedConsole: ScopedConsoleContextType = Object.freeze({\n\tlog: noopLog,\n\tlogged: noopLogged,\n\twarn: noopLog,\n\twarned: noopLogged,\n\terror: noopLog,\n\terrored: noopLogged,\n\ttrace: noopLog,\n\ttraced: noopLogged,\n})\n\nexport function isNoopScopedConsole(value: unknown): boolean {\n\treturn value === noopScopedConsole\n}\n"],"names":[],"mappings":"AAEO,SAAS,WAAW,YAAmB;AAAE;AAEhC,SAAA,WAAc,SAAiB,OAAa;AACpD,SAAA;AACR;AAEa,MAAA,oBAA8C,OAAO,OAAO;AAAA,EACxE,KAAK;AAAA,EACL,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,SAAS;AAAA,EACT,OAAO;AAAA,EACP,QAAQ;AACT,CAAC;AAEM,SAAS,oBAAoB,OAAyB;AAC5D,SAAO,UAAU;AAClB;"}

package/dist/production/debug-context/Context.js

@@ -0,0 +1,67 @@
+import { jsx } from "react/jsx-runtime";
+import { assert, isNonEmptyString } from "@contember/utilities";
+import { createContext, useContext, useMemo, useRef, memo } from "react";
+import { noopScopedConsole, isNoopScopedConsole } from "./Constants.js";
+function createPrefixedConsole(message, prefixedConsole) {
+  return {
+    error: function error(...parameters) {
+      (prefixedConsole ?? console).error(message, ...parameters);
+    },
+    errored: function errored(message2, value) {
+      (prefixedConsole ?? console).error(message2, value);
+      return value;
+    },
+    log: function log(...parameters) {
+      (prefixedConsole ?? console).log(message, ...parameters);
+    },
+    logged: function logged(message2, value) {
+      (prefixedConsole ?? console).log(message2, value);
+      return value;
+    },
+    trace: function trace(...parameters) {
+      (prefixedConsole ?? console).trace(message, ...parameters);
+    },
+    traced: function traced(message2, value) {
+      (prefixedConsole ?? console).trace(message2, value);
+      return value;
+    },
+    warn: function warn(...parameters) {
+      (prefixedConsole ?? console).warn(message, ...parameters);
+    },
+    warned: function warned(message2, value) {
+      (prefixedConsole ?? console).warn(message2, value);
+      return value;
+    }
+  };
+}
+const ScopedConsoleContext = createContext(null);
+ScopedConsoleContext.displayName = "ScopedConsoleContext";
+function parentScopedConsoleOrNone(parentConsole) {
+  return isNoopScopedConsole(parentConsole) ? void 0 : parentConsole;
+}
+const useScopedConsoleRef = (prefix) => {
+  assert("prefix is non-empty string", prefix, isNonEmptyString);
+  const parentConsole = parentScopedConsoleOrNone(useContext(ScopedConsoleContext));
+  const scopedConsole = useMemo(() => {
+    if (parentConsole) {
+      return createPrefixedConsole(prefix, parentConsole);
+    } else {
+      return noopScopedConsole;
+    }
+  }, [parentConsole, prefix]);
+  const ref = useRef(scopedConsole);
+  ref.current = scopedConsole;
+  return ref;
+};
+const DebugChildren = memo(({ active = true, children, id }) => {
+  const parentScopedConsole = parentScopedConsoleOrNone(useContext(ScopedConsoleContext));
+  const console2 = active && id ? createPrefixedConsole(id, parentScopedConsole) : noopScopedConsole;
+  return /* @__PURE__ */ jsx(ScopedConsoleContext.Provider, { value: active ? console2 : noopScopedConsole, children });
+});
+DebugChildren.displayName = "DebugChildren";
+export {
+  DebugChildren,
+  ScopedConsoleContext,
+  useScopedConsoleRef
+};
+//# sourceMappingURL=Context.js.map

package/dist/production/debug-context/Context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Context.js","sources":["../../../src/debug-context/Context.tsx"],"sourcesContent":["import { assert, isNonEmptyString } from '@contember/utilities'\nimport { ReactNode, createContext, memo, useContext, useMemo, useRef } from 'react'\nimport { isNoopScopedConsole, noopScopedConsole } from './Constants'\nimport { ScopedConsoleContextType } from './Types'\n\nfunction createPrefixedConsole(message: string, prefixedConsole?: ScopedConsoleContextType): ScopedConsoleContextType {\n\treturn {\n\t\terror: function error(...parameters: any[]) {\n\t\t\t(prefixedConsole ?? console).error(message, ...parameters)\n\t\t},\n\t\terrored: function errored<T>(message: string, value: T): T {\n\t\t\t(prefixedConsole ?? console).error(message, value)\n\t\t\treturn value\n\t\t},\n\t\tlog: function log(...parameters: any[]) {\n\t\t\t(prefixedConsole ?? console).log(message, ...parameters)\n\t\t},\n\t\tlogged: function logged<T>(message: string, value: T): T {\n\t\t\t(prefixedConsole ?? console).log(message, value)\n\t\t\treturn value\n\t\t},\n\t\ttrace: function trace(...parameters: any[]) {\n\t\t\t(prefixedConsole ?? console).trace(message, ...parameters)\n\t\t},\n\t\ttraced: function traced<T>(message: string, value: T): T {\n\t\t\t(prefixedConsole ?? console).trace(message, value)\n\t\t\treturn value\n\t\t},\n\t\twarn: function warn(...parameters: any[]) {\n\t\t\t(prefixedConsole ?? console).warn(message, ...parameters)\n\t\t},\n\t\twarned: function warned<T>(message: string, value: T): T {\n\t\t\t(prefixedConsole ?? console).warn(message, value)\n\t\t\treturn value\n\t\t},\n\t}\n}\n\nexport const ScopedConsoleContext = createContext<ScopedConsoleContextType>(null!)\nScopedConsoleContext.displayName = 'ScopedConsoleContext'\n\nfunction parentScopedConsoleOrNone(parentConsole: ScopedConsoleContextType): ScopedConsoleContextType | undefined {\n\treturn isNoopScopedConsole(parentConsole) ? undefined : parentConsole\n}\n\nexport const useScopedConsoleRef = (prefix: string) => {\n\tassert('prefix is non-empty string', prefix, isNonEmptyString)\n\n\tconst parentConsole = parentScopedConsoleOrNone(useContext(ScopedConsoleContext))\n\n\tconst scopedConsole = useMemo(() => {\n\t\tif (parentConsole) {\n\t\t\treturn createPrefixedConsole(prefix, parentConsole)\n\t\t} else {\n\t\t\treturn noopScopedConsole\n\t\t}\n\t}, [parentConsole, prefix])\n\n\tconst ref = useRef(scopedConsole)\n\tref.current = scopedConsole\n\n\treturn ref\n}\n\nexport type DebugChildrenProps =\n\t| { active: true; children: ReactNode; id: string; }\n\t| { active?: false; children: ReactNode; id?: string; }\n\nexport const DebugChildren = memo<DebugChildrenProps>(({ active = true, children, id }) => {\n\tconst parentScopedConsole = parentScopedConsoleOrNone(useContext(ScopedConsoleContext))\n\n\tconst console = active && id\n\t\t? createPrefixedConsole(id, parentScopedConsole)\n\t\t: noopScopedConsole\n\n\treturn (\n\t\t<ScopedConsoleContext.Provider value={active ? console : noopScopedConsole}>\n\t\t\t{children}\n\t\t</ScopedConsoleContext.Provider>\n\t)\n})\nDebugChildren.displayName = 'DebugChildren'\n"],"names":["message","console"],"mappings":";;;;AAKA,SAAS,sBAAsB,SAAiB,iBAAsE;AAC9G,SAAA;AAAA,IACN,OAAO,SAAS,SAAS,YAAmB;AAC3C,OAAC,mBAAmB,SAAS,MAAM,SAAS,GAAG,UAAU;AAAA,IAC1D;AAAA,IACA,SAAS,SAAS,QAAWA,UAAiB,OAAa;AAC1D,OAAC,mBAAmB,SAAS,MAAMA,UAAS,KAAK;AAC1C,aAAA;AAAA,IACR;AAAA,IACA,KAAK,SAAS,OAAO,YAAmB;AACvC,OAAC,mBAAmB,SAAS,IAAI,SAAS,GAAG,UAAU;AAAA,IACxD;AAAA,IACA,QAAQ,SAAS,OAAUA,UAAiB,OAAa;AACxD,OAAC,mBAAmB,SAAS,IAAIA,UAAS,KAAK;AACxC,aAAA;AAAA,IACR;AAAA,IACA,OAAO,SAAS,SAAS,YAAmB;AAC3C,OAAC,mBAAmB,SAAS,MAAM,SAAS,GAAG,UAAU;AAAA,IAC1D;AAAA,IACA,QAAQ,SAAS,OAAUA,UAAiB,OAAa;AACxD,OAAC,mBAAmB,SAAS,MAAMA,UAAS,KAAK;AAC1C,aAAA;AAAA,IACR;AAAA,IACA,MAAM,SAAS,QAAQ,YAAmB;AACzC,OAAC,mBAAmB,SAAS,KAAK,SAAS,GAAG,UAAU;AAAA,IACzD;AAAA,IACA,QAAQ,SAAS,OAAUA,UAAiB,OAAa;AACxD,OAAC,mBAAmB,SAAS,KAAKA,UAAS,KAAK;AACzC,aAAA;AAAA,IACR;AAAA,EAAA;AAEF;AAEa,MAAA,uBAAuB,cAAwC,IAAK;AACjF,qBAAqB,cAAc;AAEnC,SAAS,0BAA0B,eAA+E;AAC1G,SAAA,oBAAoB,aAAa,IAAI,SAAY;AACzD;AAEa,MAAA,sBAAsB,CAAC,WAAmB;AAC/C,SAAA,8BAA8B,QAAQ,gBAAgB;AAE7D,QAAM,gBAAgB,0BAA0B,WAAW,oBAAoB,CAAC;AAE1E,QAAA,gBAAgB,QAAQ,MAAM;AACnC,QAAI,eAAe;AACX,aAAA,sBAAsB,QAAQ,aAAa;AAAA,IAAA,OAC5C;AACC,aAAA;AAAA,IACR;AAAA,EAAA,GACE,CAAC,eAAe,MAAM,CAAC;AAEpB,QAAA,MAAM,OAAO,aAAa;AAChC,MAAI,UAAU;AAEP,SAAA;AACR;AAMa,MAAA,gBAAgB,KAAyB,CAAC,EAAE,SAAS,MAAM,UAAU,SAAS;AAC1F,QAAM,sBAAsB,0BAA0B,WAAW,oBAAoB,CAAC;AAEtF,QAAMC,WAAU,UAAU,KACvB,sBAAsB,IAAI,mBAAmB,IAC7C;AAGF,SAAA,oBAAC,qBAAqB,UAArB,EAA8B,OAAO,SAASA,WAAU,mBACvD,SACF,CAAA;AAEF,CAAC;AACD,cAAc,cAAc;"}

package/dist/production/hooks/unwrapRefValue.js

@@ -0,0 +1,11 @@
+function unwrapRefValue(value) {
+  if (value && typeof value === "object" && "current" in value) {
+    return value.current;
+  } else {
+    return value;
+  }
+}
+export {
+  unwrapRefValue
+};
+//# sourceMappingURL=unwrapRefValue.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"unwrapRefValue.js","sources":["../../../src/hooks/unwrapRefValue.ts"],"sourcesContent":["import { RefObject } from 'react'\n\nexport type RefObjectOrElement<T> = T | RefObject<T>\n\n/**\n * Unwraps a ref object or returns the value if it is not a ref object.\n * @param value - Value to unwrap\n * @returns Unwrapped value\n */\nexport function unwrapRefValue<T>(value: RefObjectOrElement<T>): T | null {\n\tif (value && typeof value === 'object' && 'current' in value) {\n\t\treturn value.current\n\t} else {\n\t\treturn value\n\t}\n}\n"],"names":[],"mappings":"AASO,SAAS,eAAkB,OAAwC;AACzE,MAAI,SAAS,OAAO,UAAU,YAAY,aAAa,OAAO;AAC7D,WAAO,MAAM;AAAA,EAAA,OACP;AACC,WAAA;AAAA,EACR;AACD;"}

package/dist/production/hooks/useAddClassNameDuringResize.js

@@ -0,0 +1,34 @@
+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) {
+  const timeoutID = useRef();
+  const addTemporaryClassName = useReferentiallyStableCallback(() => {
+    clearTimeout(timeoutID.current);
+    removeClassName(className, element ?? document.body);
+    timeoutID.current = setTimeout(() => {
+      addClassName(className, element ?? document.body);
+    }, timeoutToRestore);
+  });
+  useLayoutEffect(addTemporaryClassName, [addTemporaryClassName]);
+  useOnWindowResize(addTemporaryClassName);
+}
+export {
+  useAddClassNameDuringResize
+};
+//# sourceMappingURL=useAddClassNameDuringResize.js.map

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

@@ -0,0 +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\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;AAAA,EAAA,CACnB;AAEe,kBAAA,uBAAuB,CAAC,qBAAqB,CAAC;AAC9D,oBAAkB,qBAAqB;AACxC;"}

package/dist/production/hooks/useComposeRef.js

@@ -0,0 +1,31 @@
+import { useRef, useMemo } from "react";
+function setRef(ref, instance) {
+  if (ref) {
+    if (typeof ref === "function") {
+      ref(instance);
+    } else if (instance) {
+      ref.current = instance;
+    }
+  }
+}
+function useComposeRef(...refs) {
+  const initialRefs = useRef(refs);
+  const composeRef = useMemo(() => {
+    function composedRefCallback(instance) {
+      initialRefs.current.forEach((ref) => setRef(ref, instance));
+      setCurrent(instance);
+    }
+    function setCurrent(instance) {
+      if (instance) {
+        composedRefCallback.current = instance;
+      }
+    }
+    composedRefCallback.current = null;
+    return composedRefCallback;
+  }, []);
+  return composeRef;
+}
+export {
+  useComposeRef
+};
+//# sourceMappingURL=useComposeRef.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useComposeRef.js","sources":["../../../src/hooks/useComposeRef.ts"],"sourcesContent":["import { MutableRefObject, RefCallback, useMemo, useRef } from 'react'\n\nexport type MaybeRef<T> = ((instance: T | null) => void) | MutableRefObject<T | null> | null | undefined\nexport type ComposedRefCallback<T> = RefCallback<T> & { current: T | null };\n\nfunction setRef<T>(ref: MaybeRef<T>, instance: T | null): void {\n\tif (ref) {\n\t\tif (typeof ref === 'function') {\n\t\t\tref(instance)\n\t\t} else if (instance) {\n\t\t\tref.current = instance\n\t\t}\n\t}\n}\n\n/**\n * Fills any number of refs with an instance\n *\n * Useful when you need to use outer ref and inner in the same time, e.g. passing element\n * back to forwardedRef an also using the same value within the component locally.\n *\n * @param refs - Rest parameter of refs to fill with instance\n * @returns Returns a function similar to a RefCallback\n */\nexport function useComposeRef<T>(...refs: MaybeRef<T>[]): ComposedRefCallback<T> {\n\tconst initialRefs = useRef(refs)\n\n\tconst composeRef: ComposedRefCallback<T> = useMemo(() => {\n\t\tfunction composedRefCallback(instance: T | null) {\n\t\t\tinitialRefs.current.forEach(ref => setRef(ref, instance))\n\t\t\tsetCurrent(instance)\n\t\t}\n\n\t\tfunction setCurrent(instance: T | null) {\n\t\t\tif (instance) {\n\t\t\t\tcomposedRefCallback.current = instance\n\t\t\t}\n\t\t}\n\n\t\tcomposedRefCallback.current = null as T | null\n\n\t\treturn composedRefCallback\n\t}, [])\n\n\treturn composeRef\n}\n"],"names":[],"mappings":";AAKA,SAAS,OAAU,KAAkB,UAA0B;AAC9D,MAAI,KAAK;AACJ,QAAA,OAAO,QAAQ,YAAY;AAC9B,UAAI,QAAQ;AAAA,eACF,UAAU;AACpB,UAAI,UAAU;AAAA,IACf;AAAA,EACD;AACD;AAWO,SAAS,iBAAoB,MAA6C;AAC1E,QAAA,cAAc,OAAO,IAAI;AAEzB,QAAA,aAAqC,QAAQ,MAAM;AACxD,aAAS,oBAAoB,UAAoB;AAChD,kBAAY,QAAQ,QAAQ,CAAA,QAAO,OAAO,KAAK,QAAQ,CAAC;AACxD,iBAAW,QAAQ;AAAA,IACpB;AAEA,aAAS,WAAW,UAAoB;AACvC,UAAI,UAAU;AACb,4BAAoB,UAAU;AAAA,MAC/B;AAAA,IACD;AAEA,wBAAoB,UAAU;AAEvB,WAAA;AAAA,EACR,GAAG,CAAE,CAAA;AAEE,SAAA;AACR;"}

package/dist/production/hooks/useElementSize.js

@@ -0,0 +1,47 @@
+import { getSizeFromResizeObserverEntryFactory } from "@contember/utilities";
+import { useMemo, useState, useRef, 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;
+}
+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);
+  logged("dimensions", { width, height });
+  useOnElementResize(refOrElement, (entry) => {
+    const dimensions = logged("useOnElementResize => entry:dimensions", getSizeFromResizeObserverEntry(entry));
+    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");
+    }
+  });
+  useLayoutEffect(() => {
+    const element = unwrapRefValue(refOrElement);
+    logged("useLayoutEffect => measure", measure.current(element));
+  });
+  return { height, width };
+}
+export {
+  useElementSize
+};
+//# sourceMappingURL=useElementSize.js.map

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

@@ -0,0 +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;"}

package/dist/production/hooks/useEventHandler.js

@@ -0,0 +1,19 @@
+import { useRef, useEffect } from "react";
+function useEventHandler(type, callback) {
+  const callbackRef = useRef(callback);
+  callbackRef.current = callback;
+  const stableHandler = useRef(function(event) {
+    return callbackRef.current(event);
+  }).current;
+  useEffect(() => {
+    return () => {
+      callbackRef.current = () => {
+      };
+    };
+  }, []);
+  return stableHandler;
+}
+export {
+  useEventHandler
+};
+//# sourceMappingURL=useEventHandler.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useEventHandler.js","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":[],"mappings":";AASgB,SAAA,gBAA+C,MAAiB,UAA4C;AACrH,QAAA,cAAc,OAAO,QAAQ;AAAG,cAAY,UAAU;AAEtD,QAAA,gBAAgB,OAAO,SAAU,OAAY;AAC3C,WAAA,YAAY,QAAQ,KAAK;AAAA,EAChC,CAAA,EAAE;AAEH,YAAU,MAAM;AACf,WAAO,MAAM;AACZ,kBAAY,UAAU,MAAM;AAAA,MAAA;AAAA,IAAE;AAAA,EAEhC,GAAG,CAAE,CAAA;AAEE,SAAA;AACR;"}

package/dist/production/hooks/useExpectSameValueReference.js

@@ -0,0 +1,15 @@
+import deepEqual from "deep-equal";
+import { useRef } from "react";
+function useExpectSameValueReference(next, shouldThrow = false) {
+  const previous = useRef(next);
+  if (next !== previous.current && typeof next === "object" && typeof previous.current === "object" && deepEqual(next, previous.current)) {
+    if (shouldThrow) {
+      throw new Error("Expecting same reference for same values");
+    }
+  }
+  previous.current = next;
+}
+export {
+  useExpectSameValueReference
+};
+//# sourceMappingURL=useExpectSameValueReference.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useExpectSameValueReference.js","sources":["../../../src/hooks/useExpectSameValueReference.ts"],"sourcesContent":["import deepEqual from 'deep-equal'\nimport { useRef } from 'react'\n\n// TODO: Unify error behavior with useConstantValueInvariant() and maybe merge into one hook.\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('Previous and next next do not match in reference although match in value', {\n\t\t\t\tprevious: previous.current,\n\t\t\t\tnext,\n\t\t\t})\n\t\t}\n\n\t\tif (shouldThrow) {\n\t\t\tthrow new Error('Expecting same reference for same values')\n\t\t}\n\t}\n\n\tprevious.current = next\n}\n"],"names":[],"mappings":";;AAIgB,SAAA,4BAA+B,MAAS,cAAuB,OAAO;AAC/E,QAAA,WAAW,OAAO,IAAI;AAE5B,MAAI,SAAS,SAAS,WAClB,OAAO,SAAS,YAChB,OAAO,SAAS,YAAY,YAC5B,UAAU,MAAM,SAAS,OAAO,GAClC;AAQD,QAAI,aAAa;AACV,YAAA,IAAI,MAAM,0CAA0C;AAAA,IAC3D;AAAA,EACD;AAEA,WAAS,UAAU;AACpB;"}

package/dist/production/hooks/useOnElementMutation.js

@@ -0,0 +1,35 @@
+import deepEqual from "deep-equal";
+import { useRef, useState, useEffect, useLayoutEffect } from "react";
+import { unwrapRefValue } from "./unwrapRefValue.js";
+import { useScopedConsoleRef } from "../debug-context/Context.js";
+function useOnElementMutation(refOrElement, callback, options = { attributes: true, childList: true, subtree: true }) {
+  const scopedConsoleRef = useScopedConsoleRef("useOnElementMutation");
+  const callbackRef = useRef(callback);
+  callbackRef.current = callback;
+  const optionsRef = useRef(options);
+  optionsRef.current = options;
+  const [optionsState, setOptionsState] = useState(options);
+  useEffect(() => {
+    if (!deepEqual(optionsRef.current, options)) {
+      setOptionsState(options);
+    }
+  }, [options]);
+  useLayoutEffect(() => {
+    const element = 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]);
+}
+export {
+  useOnElementMutation
+};
+//# sourceMappingURL=useOnElementMutation.js.map

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

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