@contember/react-utils 1.1.0 → 1.2.0-alpha.1

package/dist/development/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/development/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/development/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/development/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/development/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/development/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/development/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/development/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/development/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/development/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/development/hooks/useArrayMapMemo.js

@@ -1,7 +1,5 @@
 import { useMemo } from "react";
-import { useConstantLengthInvariant } from "./useConstantLengthInvariant.js";
 const useArrayMapMemo = (items, map) => {
-  useConstantLengthInvariant(items);
   const mapped = useMemo(() => items.map(map), [map, ...items]);
   return useMemo(() => mapped, mapped);
 };

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

@@ -1 +1 @@
-{"version":3,"file":"useArrayMapMemo.js","sources":["../../../src/hooks/useArrayMapMemo.ts"],"sourcesContent":["import { useMemo } from 'react'\nimport { useConstantLengthInvariant } from './useConstantLengthInvariant'\n\n/**\n * ⚠️ ONLY USE THIS IF YOU *REALLY* KNOW WHAT YOU'RE DOING! ⚠️\n * ⚠   HERE BE DRAGONS THAT KNOW WHERE YOU LIVE! ⚠\n *\n * This is a bit of React naughtiness that allows us to memoize outputs of Array.prototype.map() based on the contents\n * of the original array, and not its referential equality. That way, if we create a new array with identical items,\n * we get an array that is referentially equal to the previous one.\n */\nexport const useArrayMapMemo = <Item, OutputItem>(\n\titems: Item[],\n\tmap: (value: Item, index: number, array: Item[]) => OutputItem,\n): OutputItem[] => {\n\tuseConstantLengthInvariant(items)\n\n\t// This is tricky. We don't want to exclude the map function from the dependency list because if it changes but the\n\t// items array remains the same, we still want to re-compute the new array. However, if that yields the same array,\n\t// in the sense that the items are identical, albeit computed via a different map function, we still want to\n\t// preserve the referential equality of the original. Hence the second memo.\n\n\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\tconst mapped = useMemo(() => items.map(map), [map, ...items])\n\n\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\treturn useMemo(() => mapped, mapped) // This is deliberately not `[mapped]`\n}\n"],"names":[],"mappings":";;AAWa,MAAA,kBAAkB,CAC9B,OACA,QACkB;AAClB,6BAA2B,KAAK;AAQ1B,QAAA,SAAS,QAAQ,MAAM,MAAM,IAAI,GAAG,GAAG,CAAC,KAAK,GAAG,KAAK,CAAC;AAGrD,SAAA,QAAQ,MAAM,QAAQ,MAAM;AACpC;"}
+{"version":3,"file":"useArrayMapMemo.js","sources":["../../../src/hooks/useArrayMapMemo.ts"],"sourcesContent":["import { useMemo } from 'react'\nimport { useConstantLengthInvariant } from './useConstantLengthInvariant'\n\n/**\n * ⚠️ ONLY USE THIS IF YOU *REALLY* KNOW WHAT YOU'RE DOING! ⚠️\n * ⚠   HERE BE DRAGONS THAT KNOW WHERE YOU LIVE! ⚠\n *\n * This is a bit of React naughtiness that allows us to memoize outputs of Array.prototype.map() based on the contents\n * of the original array, and not its referential equality. That way, if we create a new array with identical items,\n * we get an array that is referentially equal to the previous one.\n */\nexport const useArrayMapMemo = <Item, OutputItem>(\n\titems: Item[],\n\tmap: (value: Item, index: number, array: Item[]) => OutputItem,\n): OutputItem[] => {\n\tuseConstantLengthInvariant(items)\n\n\t// This is tricky. We don't want to exclude the map function from the dependency list because if it changes but the\n\t// items array remains the same, we still want to re-compute the new array. However, if that yields the same array,\n\t// in the sense that the items are identical, albeit computed via a different map function, we still want to\n\t// preserve the referential equality of the original. Hence the second memo.\n\n\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\tconst mapped = useMemo(() => items.map(map), [map, ...items])\n\n\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\treturn useMemo(() => mapped, mapped) // This is deliberately not `[mapped]`\n}\n"],"names":[],"mappings":";AAWa,MAAA,kBAAkB,CAC9B,OACA,QACkB;AASZ,QAAA,SAAS,QAAQ,MAAM,MAAM,IAAI,GAAG,GAAG,CAAC,KAAK,GAAG,KAAK,CAAC;AAGrD,SAAA,QAAQ,MAAM,QAAQ,MAAM;AACpC;"}

package/dist/development/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/development/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/development/hooks/useConstantLengthInvariant.js

@@ -1,13 +1,4 @@
-import { usePreviousValue } from "./usePreviousValue.js";
 const useConstantLengthInvariant = (items, message) => {
-  {
-    const previous = usePreviousValue(items);
-    if (previous.length !== items.length) {
-      throw new Error(
-        `Invariant violation: ${message || "Changing the length of an array whose length must remain constant between renders."}`
-      );
-    }
-  }
 };
 export {
   useConstantLengthInvariant

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

@@ -1 +1 @@
-{"version":3,"file":"useConstantLengthInvariant.js","sources":["../../../src/hooks/useConstantLengthInvariant.ts"],"sourcesContent":["import { usePreviousValue } from './usePreviousValue'\n\n// This entire hook should get optimized away for prod\nexport const useConstantLengthInvariant = <Item>(items: Item[], message?: string) => {\n\tif (import.meta.env.DEV) {\n\t\t// eslint-disable-next-line react-hooks/rules-of-hooks\n\t\tconst previous = usePreviousValue(items)\n\t\tif (previous.length !== items.length) {\n\t\t\tthrow new Error(\n\t\t\t\t`Invariant violation: ${message || 'Changing the length of an array whose length must remain constant between renders.'\n\t\t\t\t}`,\n\t\t\t)\n\t\t}\n\t}\n}\n"],"names":[],"mappings":";AAGa,MAAA,6BAA6B,CAAO,OAAe,YAAqB;AAC3D;AAElB,UAAA,WAAW,iBAAiB,KAAK;AACnC,QAAA,SAAS,WAAW,MAAM,QAAQ;AACrC,YAAM,IAAI;AAAA,QACT,wBAAwB,WAAW;AAAA,MAAA;AAAA,IAGrC;AAAA,EACD;AACD;"}
+{"version":3,"file":"useConstantLengthInvariant.js","sources":["../../../src/hooks/useConstantLengthInvariant.ts"],"sourcesContent":["import { usePreviousValue } from './usePreviousValue'\n\n// This entire hook should get optimized away for prod\nexport const useConstantLengthInvariant = <Item>(items: Item[], message?: string) => {\n\tif (import.meta.env.DEV) {\n\t\t// eslint-disable-next-line react-hooks/rules-of-hooks\n\t\tconst previous = usePreviousValue(items)\n\t\tif (previous.length !== items.length) {\n\t\t\tthrow new Error(\n\t\t\t\t`Invariant violation: ${message || 'Changing the length of an array whose length must remain constant between renders.'\n\t\t\t\t}`,\n\t\t\t)\n\t\t}\n\t}\n}\n"],"names":[],"mappings":"AAGa,MAAA,6BAA6B,CAAO,OAAe,YAAqB;AAWrF;"}

package/dist/development/hooks/useConstantValueInvariant.js

@@ -1,13 +1,4 @@
-import { usePreviousValue } from "./usePreviousValue.js";
 const useConstantValueInvariant = (value, message) => {
-  {
-    const previous = usePreviousValue(value);
-    if (previous !== value) {
-      throw new Error(
-        `Invariant violation: ${message || "Changing a value which must remain constant between renders."}`
-      );
-    }
-  }
 };
 export {
   useConstantValueInvariant

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

@@ -1 +1 @@
-{"version":3,"file":"useConstantValueInvariant.js","sources":["../../../src/hooks/useConstantValueInvariant.ts"],"sourcesContent":["import { usePreviousValue } from './usePreviousValue'\n\n// This entire hook should get optimized away for prod\nexport const useConstantValueInvariant = <Value>(value: Value, message?: string) => {\n\tif (import.meta.env.DEV) {\n\t\t// eslint-disable-next-line react-hooks/rules-of-hooks\n\t\tconst previous = usePreviousValue(value)\n\t\tif (previous !== value) {\n\t\t\tthrow new Error(\n\t\t\t\t`Invariant violation: ${message || 'Changing a value which must remain constant between renders.'}`,\n\t\t\t)\n\t\t}\n\t}\n}\n"],"names":[],"mappings":";AAGa,MAAA,4BAA4B,CAAQ,OAAc,YAAqB;AAC1D;AAElB,UAAA,WAAW,iBAAiB,KAAK;AACvC,QAAI,aAAa,OAAO;AACvB,YAAM,IAAI;AAAA,QACT,wBAAwB,WAAW;AAAA,MAAA;AAAA,IAErC;AAAA,EACD;AACD;"}
+{"version":3,"file":"useConstantValueInvariant.js","sources":["../../../src/hooks/useConstantValueInvariant.ts"],"sourcesContent":["import { usePreviousValue } from './usePreviousValue'\n\n// This entire hook should get optimized away for prod\nexport const useConstantValueInvariant = <Value>(value: Value, message?: string) => {\n\tif (import.meta.env.DEV) {\n\t\t// eslint-disable-next-line react-hooks/rules-of-hooks\n\t\tconst previous = usePreviousValue(value)\n\t\tif (previous !== value) {\n\t\t\tthrow new Error(\n\t\t\t\t`Invariant violation: ${message || 'Changing a value which must remain constant between renders.'}`,\n\t\t\t)\n\t\t}\n\t}\n}\n"],"names":[],"mappings":"AAGa,MAAA,4BAA4B,CAAQ,OAAc,YAAqB;AAUpF;"}

package/dist/development/hooks/useCountLayoutSlotChildren.js

@@ -0,0 +1,31 @@
+import { useState, useRef, useLayoutEffect } from "react";
+import { unwrapRefValue } from "./unwrapRefValue.js";
+import { useOnElementMutation } from "./useOnElementMutation.js";
+function useCountLayoutSlotChildren(refOrElement, selector = ".layout-slot") {
+  const [count, setCount] = useState(Infinity);
+  const countChildren = useRef((element) => {
+    if (element) {
+      setCount(element.querySelectorAll(`${selector} > *`).length);
+    }
+  });
+  useOnElementMutation(refOrElement, () => {
+    countChildren.current(unwrapRefValue(refOrElement));
+  }, { attributes: true, childList: true, subtree: true });
+  useLayoutEffect(() => {
+    countChildren.current(unwrapRefValue(refOrElement));
+  });
+  return count;
+}
+function useHasEmptySlotsClassName(refOrElement) {
+  const slotChildrenCount = useCountLayoutSlotChildren(refOrElement);
+  if (slotChildrenCount === 0) {
+    return "has-empty-slots";
+  } else {
+    return "has-non-empty-slots";
+  }
+}
+export {
+  useCountLayoutSlotChildren,
+  useHasEmptySlotsClassName
+};
+//# sourceMappingURL=useCountLayoutSlotChildren.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useCountLayoutSlotChildren.js","sources":["../../../src/hooks/useCountLayoutSlotChildren.ts"],"sourcesContent":["import { useLayoutEffect, useRef, useState } from 'react'\nimport { RefObjectOrElement, unwrapRefValue } from './unwrapRefValue'\nimport { useOnElementMutation } from './useOnElementMutation'\n\n// TODO: Remove when Firefox supports :has selector, e.g.\n// when selectors like `:has(:not(.layout-slot:empty))` work\n// or below issue can be solved more easily:\n//\n// ISSUE:\n// Targeting containers that are visibly empty and hide them\n// or remove paddings without support for :has() is tedious.\n/** @deprecated Check support for :has() for Firefox before using.  */\nexport function useCountLayoutSlotChildren(\n\trefOrElement: RefObjectOrElement<HTMLElement | undefined>,\n\tselector: string = '.layout-slot',\n) {\n\tconst [count, setCount] = useState(Infinity)\n\n\tconst countChildren = useRef((element: HTMLElement | null | undefined) => {\n\t\tif (element) {\n\t\t\tsetCount(element.querySelectorAll(`${selector} > *`).length)\n\t\t}\n\t})\n\n\tuseOnElementMutation(refOrElement, () => {\n\t\tcountChildren.current(unwrapRefValue(refOrElement))\n\t}, { attributes: true, childList: true, subtree: true })\n\n\tuseLayoutEffect(() => {\n\t\tcountChildren.current(unwrapRefValue(refOrElement))\n\t})\n\n\treturn count\n}\n\nexport function useHasEmptySlotsClassName(\n\trefOrElement: RefObjectOrElement<HTMLElement | undefined>,\n) {\n\tconst slotChildrenCount = useCountLayoutSlotChildren(refOrElement)\n\n\tif (slotChildrenCount === 0) {\n\t\treturn 'has-empty-slots'\n\t} else {\n\t\treturn 'has-non-empty-slots'\n\t}\n}\n"],"names":[],"mappings":";;;AAYgB,SAAA,2BACf,cACA,WAAmB,gBAClB;AACD,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,QAAQ;AAErC,QAAA,gBAAgB,OAAO,CAAC,YAA4C;AACzE,QAAI,SAAS;AACZ,eAAS,QAAQ,iBAAiB,GAAG,cAAc,EAAE,MAAM;AAAA,IAC5D;AAAA,EAAA,CACA;AAED,uBAAqB,cAAc,MAAM;AAC1B,kBAAA,QAAQ,eAAe,YAAY,CAAC;AAAA,EAAA,GAChD,EAAE,YAAY,MAAM,WAAW,MAAM,SAAS,MAAM;AAEvD,kBAAgB,MAAM;AACP,kBAAA,QAAQ,eAAe,YAAY,CAAC;AAAA,EAAA,CAClD;AAEM,SAAA;AACR;AAEO,SAAS,0BACf,cACC;AACK,QAAA,oBAAoB,2BAA2B,YAAY;AAEjE,MAAI,sBAAsB,GAAG;AACrB,WAAA;AAAA,EAAA,OACD;AACC,WAAA;AAAA,EACR;AACD;"}

package/dist/development/hooks/useDebounceCallback.js

@@ -4,7 +4,7 @@ const useDebounceCallback = (cb, debounceMs) => {
   const cbRef = useRef(cb);
   cbRef.current = cb;
   useEffect(() => {
-    return () => timerRef.current && clearTimeout(timerRef.current);
+    return () => clearTimeout(timerRef.current);
   }, []);
   return useCallback(() => {
     timerRef.current && clearTimeout(timerRef.current);

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

@@ -1 +1 @@
-{"version":3,"file":"useDebounceCallback.js","sources":["../../../src/hooks/useDebounceCallback.ts"],"sourcesContent":["import { useCallback, useEffect, useRef } from 'react'\n\nexport const useDebounceCallback = (cb: () => any, debounceMs: number) => {\n\tconst timerRef = useRef<ReturnType<typeof setTimeout>>()\n\tconst cbRef = useRef(cb)\n\tcbRef.current = cb\n\n\tuseEffect(() => {\n\t\treturn () => timerRef.current && clearTimeout(timerRef.current)\n\t}, [])\n\n\treturn useCallback(() => {\n\t\ttimerRef.current && clearTimeout(timerRef.current)\n\n\t\ttimerRef.current = setTimeout(() => {\n\t\t\tcbRef.current()\n\t\t}, debounceMs)\n\t}, [debounceMs])\n}\n"],"names":[],"mappings":";AAEa,MAAA,sBAAsB,CAAC,IAAe,eAAuB;AACzE,QAAM,WAAW;AACX,QAAA,QAAQ,OAAO,EAAE;AACvB,QAAM,UAAU;AAEhB,YAAU,MAAM;AACf,WAAO,MAAM,SAAS,WAAW,aAAa,SAAS,OAAO;AAAA,EAC/D,GAAG,CAAE,CAAA;AAEL,SAAO,YAAY,MAAM;AACf,aAAA,WAAW,aAAa,SAAS,OAAO;AAExC,aAAA,UAAU,WAAW,MAAM;AACnC,YAAM,QAAQ;AAAA,OACZ,UAAU;AAAA,EAAA,GACX,CAAC,UAAU,CAAC;AAChB;"}
+{"version":3,"file":"useDebounceCallback.js","sources":["../../../src/hooks/useDebounceCallback.ts"],"sourcesContent":["import { useCallback, useEffect, useRef } from 'react'\n\nexport const useDebounceCallback = (cb: () => any, debounceMs: number) => {\n\tconst timerRef = useRef<ReturnType<typeof setTimeout>>()\n\tconst cbRef = useRef(cb)\n\tcbRef.current = cb\n\n\tuseEffect(() => {\n\t\treturn () => clearTimeout(timerRef.current)\n\t}, [])\n\n\treturn useCallback(() => {\n\t\ttimerRef.current && clearTimeout(timerRef.current)\n\n\t\ttimerRef.current = setTimeout(() => {\n\t\t\tcbRef.current()\n\t\t}, debounceMs)\n\t}, [debounceMs])\n}\n"],"names":[],"mappings":";AAEa,MAAA,sBAAsB,CAAC,IAAe,eAAuB;AACzE,QAAM,WAAW;AACX,QAAA,QAAQ,OAAO,EAAE;AACvB,QAAM,UAAU;AAEhB,YAAU,MAAM;AACR,WAAA,MAAM,aAAa,SAAS,OAAO;AAAA,EAC3C,GAAG,CAAE,CAAA;AAEL,SAAO,YAAY,MAAM;AACf,aAAA,WAAW,aAAa,SAAS,OAAO;AAExC,aAAA,UAAU,WAAW,MAAM;AACnC,YAAM,QAAQ;AAAA,OACZ,UAAU;AAAA,EAAA,GACX,CAAC,UAAU,CAAC;AAChB;"}

package/dist/development/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/development/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/development/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/development/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/development/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/development/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/development/hooks/useObjectMemo.js.map

@@ -1 +1 @@
-{"version":3,"file":"useObjectMemo.js","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":[],"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,SAAS,KAAK;AACpC,aAAA;AAAA,IACR;AAAA,EACD;AACO,SAAA;AACR;AAEa,MAAA,gBAAgB,CAAmB,UAAgB;AACzD,QAAA,WAAW,OAAO,KAAK;AAC7B,MAAI,CAAC,eAAe,SAAS,SAAS,KAAK,GAAG;AAC7C,aAAS,UAAU;AAAA,EACpB;AACA,SAAO,SAAS;AACjB;"}
+{"version":3,"file":"useObjectMemo.js","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":[],"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,WAAW,OAAO,KAAK;AAC7B,MAAI,CAAC,eAAe,SAAS,SAAS,KAAK,GAAG;AAC7C,aAAS,UAAU;AAAA,EACpB;AACA,SAAO,SAAS;AACjB;"}

package/dist/development/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/development/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;"}

package/dist/development/hooks/useOnElementResize.js

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

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

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

package/dist/development/hooks/useOnScrollWithin.js

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