@pega/cosmos-react-core 2.0.0-dev.9.2 → 2.0.0-rc.2

package/lib/hooks/useI18n.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useI18n.d.ts","sourceRoot":"","sources":["../../src/hooks/useI18n.ts"],"names":[],"mappings":"AAIA;;;GAGG;AACH,QAAA,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAGZ,CAAC;AAEF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"useI18n.d.ts","sourceRoot":"","sources":["../../src/hooks/useI18n.ts"],"names":[],"mappings":"AAIA;;;GAGG;AACH,QAAA,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAGZ,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/lib/hooks/useI18n.js

@@ -5,8 +5,8 @@ import useConfiguration from './useConfiguration';
  * @returns translator:: The translator function that provides translations for a given key  in the translation JSON provided to the Configuration component.
  */
 const useI18n = () => {
-    const { translations } = useConfiguration();
-    return translatorFor(translations);
+    const { translations, locale } = useConfiguration();
+    return translatorFor(translations, locale);
 };
 export default useI18n;
 //# sourceMappingURL=useI18n.js.map

package/lib/hooks/useI18n.js.map

@@ -1 +1 @@
-{"version":3,"file":"useI18n.js","sourceRoot":"","sources":["../../src/hooks/useI18n.ts"],"names":[],"mappings":"AAAA,OAAO,aAAa,MAAM,mBAAmB,CAAC;AAE9C,OAAO,gBAAgB,MAAM,oBAAoB,CAAC;AAElD;;;GAGG;AACH,MAAM,OAAO,GAAG,GAAG,EAAE;IACnB,MAAM,EAAE,YAAY,EAAE,GAAG,gBAAgB,EAAE,CAAC;IAC5C,OAAO,aAAa,CAAC,YAAY,CAAC,CAAC;AACrC,CAAC,CAAC;AAEF,eAAe,OAAO,CAAC","sourcesContent":["import translatorFor from '../i18n/translate';\n\nimport useConfiguration from './useConfiguration';\n\n/**\n * @example const translator = useI18n();\n * @returns translator:: The translator function that provides translations for a given key  in the translation JSON provided to the Configuration component.\n */\nconst useI18n = () => {\n  const { translations } = useConfiguration();\n  return translatorFor(translations);\n};\n\nexport default useI18n;\n"]}
+{"version":3,"file":"useI18n.js","sourceRoot":"","sources":["../../src/hooks/useI18n.ts"],"names":[],"mappings":"AAAA,OAAO,aAAa,MAAM,mBAAmB,CAAC;AAE9C,OAAO,gBAAgB,MAAM,oBAAoB,CAAC;AAElD;;;GAGG;AACH,MAAM,OAAO,GAAG,GAAG,EAAE;IACnB,MAAM,EAAE,YAAY,EAAE,MAAM,EAAE,GAAG,gBAAgB,EAAE,CAAC;IACpD,OAAO,aAAa,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC;AAC7C,CAAC,CAAC;AAEF,eAAe,OAAO,CAAC","sourcesContent":["import translatorFor from '../i18n/translate';\n\nimport useConfiguration from './useConfiguration';\n\n/**\n * @example const translator = useI18n();\n * @returns translator:: The translator function that provides translations for a given key  in the translation JSON provided to the Configuration component.\n */\nconst useI18n = () => {\n  const { translations, locale } = useConfiguration();\n  return translatorFor(translations, locale);\n};\n\nexport default useI18n;\n"]}

package/lib/hooks/useLongPress.d.ts

@@ -0,0 +1,16 @@
+interface Options {
+    key?: string;
+    delay?: number;
+    shouldPreventDefault?: boolean;
+}
+declare const useLongPress: <T>(onLongPress: () => void, onClick?: (() => void) | undefined, { key, shouldPreventDefault, delay }?: Options) => {
+    onMouseDown: (e: import("react").MouseEvent<T, MouseEvent>) => void;
+    onTouchStart: (e: import("react").TouchEvent<T>) => void;
+    onKeyDown: (e: import("react").KeyboardEvent<T>) => void;
+    onMouseUp: () => void;
+    onKeyUp: (e: import("react").KeyboardEvent<T>) => void;
+    onMouseLeave: () => void;
+    onTouchEnd: () => void;
+};
+export default useLongPress;
+//# sourceMappingURL=useLongPress.d.ts.map

package/lib/hooks/useLongPress.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useLongPress.d.ts","sourceRoot":"","sources":["../../src/hooks/useLongPress.ts"],"names":[],"mappings":"AAcA,UAAU,OAAO;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAChC;AAED,QAAA,MAAM,YAAY,mBACH,MAAM,IAAI,mBACP,IAAI,sDACyC,OAAO;;;;;;;;CAqDrE,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/hooks/useLongPress.js

@@ -0,0 +1,59 @@
+import { useCallback, useRef, useState } from 'react';
+const isTouchEvent = (e) => {
+    return 'touches' in e;
+};
+const preventDefault = (e) => {
+    if (!isTouchEvent(e))
+        return;
+    if (e.touches.length < 2 && e.preventDefault) {
+        e.preventDefault();
+    }
+};
+const useLongPress = (onLongPress, onClick, { key = 'Enter', shouldPreventDefault = true, delay = 500 } = {}) => {
+    const [longPressTriggered, setLongPressTriggered] = useState(false);
+    const timeout = useRef();
+    const target = useRef();
+    const start = useCallback((event) => {
+        if (shouldPreventDefault && event.target) {
+            event.target.addEventListener('touchend', preventDefault, {
+                passive: false
+            });
+            target.current = event.target;
+        }
+        timeout.current = setTimeout(() => {
+            onLongPress();
+            setLongPressTriggered(true);
+        }, delay);
+    }, [onLongPress, delay, shouldPreventDefault]);
+    const clear = useCallback((shouldTriggerClick = true) => {
+        if (timeout.current) {
+            clearTimeout(timeout.current);
+        }
+        if (shouldTriggerClick && !longPressTriggered) {
+            onClick?.();
+        }
+        setLongPressTriggered(false);
+        if (shouldPreventDefault && target.current) {
+            target.current.removeEventListener('touchend', preventDefault);
+        }
+    }, [shouldPreventDefault, onClick, longPressTriggered]);
+    return {
+        onMouseDown: (e) => start(e),
+        onTouchStart: (e) => start(e),
+        onKeyDown: (e) => {
+            if (e.repeat || e.key !== key)
+                return;
+            start(e);
+        },
+        onMouseUp: () => clear(),
+        onKeyUp: (e) => {
+            if (e.repeat || e.key !== key)
+                return;
+            clear();
+        },
+        onMouseLeave: () => clear(false),
+        onTouchEnd: () => clear()
+    };
+};
+export default useLongPress;
+//# sourceMappingURL=useLongPress.js.map

package/lib/hooks/useLongPress.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useLongPress.js","sourceRoot":"","sources":["../../src/hooks/useLongPress.ts"],"names":[],"mappings":"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","sourcesContent":["import { useCallback, useRef, useState } from 'react';\n\nconst isTouchEvent = (e: Event): e is TouchEvent => {\n  return 'touches' in e;\n};\n\nconst preventDefault = (e: Event) => {\n  if (!isTouchEvent(e)) return;\n\n  if (e.touches.length < 2 && e.preventDefault) {\n    e.preventDefault();\n  }\n};\n\ninterface Options {\n  key?: string;\n  delay?: number;\n  shouldPreventDefault?: boolean;\n}\n\nconst useLongPress = <T>(\n  onLongPress: () => void,\n  onClick?: () => void,\n  { key = 'Enter', shouldPreventDefault = true, delay = 500 }: Options = {}\n) => {\n  const [longPressTriggered, setLongPressTriggered] = useState(false);\n  const timeout = useRef<ReturnType<typeof setTimeout>>();\n  const target = useRef<EventTarget>();\n\n  const start = useCallback(\n    (event: React.MouseEvent<T> | React.KeyboardEvent<T> | React.TouchEvent<T>) => {\n      if (shouldPreventDefault && event.target) {\n        event.target.addEventListener('touchend', preventDefault, {\n          passive: false\n        });\n        target.current = event.target;\n      }\n      timeout.current = setTimeout(() => {\n        onLongPress();\n        setLongPressTriggered(true);\n      }, delay);\n    },\n    [onLongPress, delay, shouldPreventDefault]\n  );\n\n  const clear = useCallback(\n    (shouldTriggerClick = true) => {\n      if (timeout.current) {\n        clearTimeout(timeout.current);\n      }\n      if (shouldTriggerClick && !longPressTriggered) {\n        onClick?.();\n      }\n      setLongPressTriggered(false);\n      if (shouldPreventDefault && target.current) {\n        target.current.removeEventListener('touchend', preventDefault);\n      }\n    },\n    [shouldPreventDefault, onClick, longPressTriggered]\n  );\n\n  return {\n    onMouseDown: (e: React.MouseEvent<T>) => start(e),\n    onTouchStart: (e: React.TouchEvent<T>) => start(e),\n    onKeyDown: (e: React.KeyboardEvent<T>) => {\n      if (e.repeat || e.key !== key) return;\n      start(e);\n    },\n    onMouseUp: () => clear(),\n    onKeyUp: (e: React.KeyboardEvent<T>) => {\n      if (e.repeat || e.key !== key) return;\n      clear();\n    },\n    onMouseLeave: () => clear(false),\n    onTouchEnd: () => clear()\n  };\n};\n\nexport default useLongPress;\n"]}

package/lib/hooks/useOuterEvent.js

@@ -31,7 +31,7 @@ const useOuterEvent = (eventName, nodes, handler) => {
             parentIdx += 1;
         }
         if (nodes.every(n => {
-            const node = n instanceof Node ? n : n === null || n === void 0 ? void 0 : n.current;
+            const node = n instanceof Node ? n : n?.current;
             if (!node)
                 return true;
             return node !== target && !node.contains(target);

package/lib/hooks/useOuterEvent.js.map

@@ -1 +1 @@
-{"version":3,"file":"useOuterEvent.js","sourceRoot":"","sources":["../../src/hooks/useOuterEvent.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,WAAW,EAAa,MAAM,OAAO,CAAC;AAE1D;;;;;GAKG;AACH,MAAM,aAAa,GAAG,CACpB,SAAkC,EAClC,KAA+C,EAC/C,OAAqD,EAC/C,EAAE;IACR,MAAM,OAAO,GAAmB,WAAW,CACzC,KAAK,CAAC,EAAE;QACN,MAAM,IAAI,GAAG,KAAK,CAAC,YAAY,EAAE,CAAC;QAClC,MAAM,MAAM,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC;QAEvB,IAAI,CAAC,CAAC,MAAM,YAAY,IAAI,CAAC;YAAE,OAAO;QAEtC,IAAI,QAAQ,GAAG,CAAC,CAAC;QACjB,IAAI,SAAS,GAAG,CAAC,CAAC;QAClB,OAAO,IAAI,CAAC,QAAQ,CAAC,KAAK,QAAQ,EAAE;YAClC,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC;YAC7B,MAAM,MAAM,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC;YAE/B,IAAI,CAAC,KAAK,IAAI,CAAC,MAAM;gBAAE,OAAO;YAE9B,IAAI,MAAM,YAAY,gBAAgB,IAAI,MAAM,YAAY,QAAQ,EAAE;gBACpE,IAAI,CAAC,CAAC,KAAK,YAAY,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC;oBAAE,OAAO;gBAEhE,QAAQ,GAAG,SAAS,CAAC;aACtB;iBAAM,IAAI,KAAK,YAAY,gBAAgB,EAAE;gBAC5C,IAAI,CAAC,CAAC,MAAM,YAAY,OAAO,CAAC,IAAI,MAAM,CAAC,UAAU,KAAK,KAAK;oBAAE,OAAO;gBAExE,QAAQ,GAAG,SAAS,CAAC;aACtB;YAED,SAAS,IAAI,CAAC,CAAC;SAChB;QAED,IACE,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE;YACd,MAAM,IAAI,GAAG,CAAC,YAAY,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,aAAD,CAAC,uBAAD,CAAC,CAAE,OAAO,CAAC;YAEhD,IAAI,CAAC,IAAI;gBAAE,OAAO,IAAI,CAAC;YACvB,OAAO,IAAI,KAAK,MAAM,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;QACnD,CAAC,CAAC,EACF;YACA,OAAO,CAAC,KAAK,CAAC,CAAC;SAChB;IACH,CAAC,EACD,CAAC,GAAG,KAAK,EAAE,OAAO,CAAC,CACpB,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,UAAU,GAAG,KAAK,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;QAEtE,UAAU,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC,QAAQ,CAAC,gBAAgB,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC;QACvE,OAAO,GAAG,EAAE,CAAC,UAAU,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC,QAAQ,CAAC,mBAAmB,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC;IACzF,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC;AAC3B,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import { useEffect, useCallback, RefObject } from 'react';\n\n/**\n * @example useOuterEvent(eventName, [nodes], handler = () => { doSomething; });\n * @param eventName The type of event to trigger the handler function on. Reference [DocumentEventMap](https://microsoft.github.io/PowerBI-JavaScript/interfaces/_node_modules_typedoc_node_modules_typescript_lib_lib_dom_d_.documenteventmap.html) for a list of valid events.\n * @param nodes An array of Nodes or Refs to Nodes to attach the eventName to.\n * @param handler The function that is called when the given event occurs.\n */\nconst useOuterEvent = <EventName extends keyof DocumentEventMap>(\n  eventName: EventName | EventName[],\n  nodes: (Node | null | RefObject<Node | null>)[],\n  handler: (event: DocumentEventMap[EventName]) => void\n): void => {\n  const onEvent: typeof handler = useCallback(\n    event => {\n      const path = event.composedPath();\n      const target = path[0];\n\n      if (!(target instanceof Node)) return;\n\n      let childIdx = 0;\n      let parentIdx = 1;\n      while (path[childIdx] !== document) {\n        const child = path[childIdx];\n        const parent = path[parentIdx];\n\n        if (!child || !parent) return;\n\n        if (parent instanceof DocumentFragment || parent instanceof Document) {\n          if (!(child instanceof Node) || !parent.contains(child)) return;\n\n          childIdx = parentIdx;\n        } else if (child instanceof DocumentFragment) {\n          if (!(parent instanceof Element) || parent.shadowRoot !== child) return;\n\n          childIdx = parentIdx;\n        }\n\n        parentIdx += 1;\n      }\n\n      if (\n        nodes.every(n => {\n          const node = n instanceof Node ? n : n?.current;\n\n          if (!node) return true;\n          return node !== target && !node.contains(target);\n        })\n      ) {\n        handler(event);\n      }\n    },\n    [...nodes, handler]\n  );\n\n  useEffect(() => {\n    const eventNames = Array.isArray(eventName) ? eventName : [eventName];\n\n    eventNames.forEach(event => document.addEventListener(event, onEvent));\n    return () => eventNames.forEach(event => document.removeEventListener(event, onEvent));\n  }, [eventName, onEvent]);\n};\n\nexport default useOuterEvent;\n"]}
+{"version":3,"file":"useOuterEvent.js","sourceRoot":"","sources":["../../src/hooks/useOuterEvent.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,WAAW,EAAa,MAAM,OAAO,CAAC;AAE1D;;;;;GAKG;AACH,MAAM,aAAa,GAAG,CACpB,SAAkC,EAClC,KAA+C,EAC/C,OAAqD,EAC/C,EAAE;IACR,MAAM,OAAO,GAAmB,WAAW,CACzC,KAAK,CAAC,EAAE;QACN,MAAM,IAAI,GAAG,KAAK,CAAC,YAAY,EAAE,CAAC;QAClC,MAAM,MAAM,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC;QAEvB,IAAI,CAAC,CAAC,MAAM,YAAY,IAAI,CAAC;YAAE,OAAO;QAEtC,IAAI,QAAQ,GAAG,CAAC,CAAC;QACjB,IAAI,SAAS,GAAG,CAAC,CAAC;QAClB,OAAO,IAAI,CAAC,QAAQ,CAAC,KAAK,QAAQ,EAAE;YAClC,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC;YAC7B,MAAM,MAAM,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC;YAE/B,IAAI,CAAC,KAAK,IAAI,CAAC,MAAM;gBAAE,OAAO;YAE9B,IAAI,MAAM,YAAY,gBAAgB,IAAI,MAAM,YAAY,QAAQ,EAAE;gBACpE,IAAI,CAAC,CAAC,KAAK,YAAY,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC;oBAAE,OAAO;gBAEhE,QAAQ,GAAG,SAAS,CAAC;aACtB;iBAAM,IAAI,KAAK,YAAY,gBAAgB,EAAE;gBAC5C,IAAI,CAAC,CAAC,MAAM,YAAY,OAAO,CAAC,IAAI,MAAM,CAAC,UAAU,KAAK,KAAK;oBAAE,OAAO;gBAExE,QAAQ,GAAG,SAAS,CAAC;aACtB;YAED,SAAS,IAAI,CAAC,CAAC;SAChB;QAED,IACE,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE;YACd,MAAM,IAAI,GAAG,CAAC,YAAY,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,OAAO,CAAC;YAEhD,IAAI,CAAC,IAAI;gBAAE,OAAO,IAAI,CAAC;YACvB,OAAO,IAAI,KAAK,MAAM,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;QACnD,CAAC,CAAC,EACF;YACA,OAAO,CAAC,KAAK,CAAC,CAAC;SAChB;IACH,CAAC,EACD,CAAC,GAAG,KAAK,EAAE,OAAO,CAAC,CACpB,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,UAAU,GAAG,KAAK,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;QAEtE,UAAU,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC,QAAQ,CAAC,gBAAgB,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC;QACvE,OAAO,GAAG,EAAE,CAAC,UAAU,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC,QAAQ,CAAC,mBAAmB,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC;IACzF,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC;AAC3B,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import { useEffect, useCallback, RefObject } from 'react';\n\n/**\n * @example useOuterEvent(eventName, [nodes], handler = () => { doSomething; });\n * @param eventName The type of event to trigger the handler function on. Reference [DocumentEventMap](https://microsoft.github.io/PowerBI-JavaScript/interfaces/_node_modules_typedoc_node_modules_typescript_lib_lib_dom_d_.documenteventmap.html) for a list of valid events.\n * @param nodes An array of Nodes or Refs to Nodes to attach the eventName to.\n * @param handler The function that is called when the given event occurs.\n */\nconst useOuterEvent = <EventName extends keyof DocumentEventMap>(\n  eventName: EventName | EventName[],\n  nodes: (Node | null | RefObject<Node | null>)[],\n  handler: (event: DocumentEventMap[EventName]) => void\n): void => {\n  const onEvent: typeof handler = useCallback(\n    event => {\n      const path = event.composedPath();\n      const target = path[0];\n\n      if (!(target instanceof Node)) return;\n\n      let childIdx = 0;\n      let parentIdx = 1;\n      while (path[childIdx] !== document) {\n        const child = path[childIdx];\n        const parent = path[parentIdx];\n\n        if (!child || !parent) return;\n\n        if (parent instanceof DocumentFragment || parent instanceof Document) {\n          if (!(child instanceof Node) || !parent.contains(child)) return;\n\n          childIdx = parentIdx;\n        } else if (child instanceof DocumentFragment) {\n          if (!(parent instanceof Element) || parent.shadowRoot !== child) return;\n\n          childIdx = parentIdx;\n        }\n\n        parentIdx += 1;\n      }\n\n      if (\n        nodes.every(n => {\n          const node = n instanceof Node ? n : n?.current;\n\n          if (!node) return true;\n          return node !== target && !node.contains(target);\n        })\n      ) {\n        handler(event);\n      }\n    },\n    [...nodes, handler]\n  );\n\n  useEffect(() => {\n    const eventNames = Array.isArray(eventName) ? eventName : [eventName];\n\n    eventNames.forEach(event => document.addEventListener(event, onEvent));\n    return () => eventNames.forEach(event => document.removeEventListener(event, onEvent));\n  }, [eventName, onEvent]);\n};\n\nexport default useOuterEvent;\n"]}

package/lib/hooks/useOverride.js

@@ -1,3 +1,3 @@
 import useConfiguration from './useConfiguration';
-export default (comp) => { var _a; return (_a = useConfiguration().overrideMap) === null || _a === void 0 ? void 0 : _a[comp]; };
+export default (comp) => useConfiguration().overrideMap?.[comp];
 //# sourceMappingURL=useOverride.js.map

package/lib/hooks/useOverride.js.map

@@ -1 +1 @@
-{"version":3,"file":"useOverride.js","sourceRoot":"","sources":["../../src/hooks/useOverride.ts"],"names":[],"mappings":"AAEA,OAAO,gBAAgB,MAAM,oBAAoB,CAAC;AAIlD,eAAe,CAA8B,IAAO,EAAkB,EAAE,WACtE,OAAA,MAAA,gBAAgB,EAAE,CAAC,WAAW,0CAAG,IAAI,CAAC,CAAA,EAAA,CAAC","sourcesContent":["import { ConfigurationProps } from '../components/Configuration';\n\nimport useConfiguration from './useConfiguration';\n\ntype OverrideMap = NonNullable<ConfigurationProps['overrideMap']>;\n\nexport default <C extends keyof OverrideMap>(comp: C): OverrideMap[C] =>\n  useConfiguration().overrideMap?.[comp];\n"]}
+{"version":3,"file":"useOverride.js","sourceRoot":"","sources":["../../src/hooks/useOverride.ts"],"names":[],"mappings":"AAEA,OAAO,gBAAgB,MAAM,oBAAoB,CAAC;AAIlD,eAAe,CAA8B,IAAO,EAAkB,EAAE,CACtE,gBAAgB,EAAE,CAAC,WAAW,EAAE,CAAC,IAAI,CAAC,CAAC","sourcesContent":["import { ConfigurationProps } from '../components/Configuration';\n\nimport useConfiguration from './useConfiguration';\n\ntype OverrideMap = NonNullable<ConfigurationProps['overrideMap']>;\n\nexport default <C extends keyof OverrideMap>(comp: C): OverrideMap[C] =>\n  useConfiguration().overrideMap?.[comp];\n"]}

package/lib/hooks/useScrollStick.js

@@ -16,6 +16,18 @@ const onBeforeunload = () => {
 };
 class Stickers {
     constructor({ elements, scrollContainer = window, offset = 0 }) {
+        Object.defineProperty(this, "scrollContainer", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "offset", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
         _Stickers_scrollDebounce.set(this, void 0);
         _Stickers_resizeDebounce.set(this, void 0);
         _Stickers_isWindowScroll.set(this, void 0);
@@ -226,12 +238,11 @@ _Stickers_scrollDebounce = new WeakMap(), _Stickers_resizeDebounce = new WeakMap
 const useScrollStick = (options) => {
     const instance = useRef();
     useLayoutEffect(() => {
-        if (options === null || options === void 0 ? void 0 : options.elements) {
+        if (options?.elements) {
             instance.current = new Stickers(options);
         }
         return () => {
-            var _a;
-            (_a = instance.current) === null || _a === void 0 ? void 0 : _a.cleanup();
+            instance.current?.cleanup();
             instance.current = undefined;
         };
     }, [options]);

package/lib/hooks/useScrollStick.js.map

@@ -1 +1 @@
-{"version":3,"file":"useScrollStick.js","sourceRoot":"","sources":["../../src/hooks/useScrollStick.ts"],"names":[],"mappings":"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","sourcesContent":["import { useRef, useLayoutEffect } from 'react';\n\nexport interface ScrollStickOptions {\n  elements: string | HTMLElement[];\n  scrollContainer?: Stickers['scrollContainer'];\n  offset?: number;\n}\n\ninterface Sticker {\n  element: HTMLElement;\n  top: number;\n  bottom: number;\n  height: number;\n  isStuck: boolean;\n  priorStickHeight: number;\n}\n\ntype ElementsOption = string | HTMLElement[];\n\nconst onBeforeunload = () => {\n  window.scrollTo(0, 0);\n};\n\nclass Stickers {\n  scrollContainer: HTMLElement | Window;\n  offset: number;\n  #scrollDebounce: number;\n  #resizeDebounce: number;\n  #isWindowScroll: boolean;\n  #scrollIntervalStart: number;\n  #scrollIntervalChange: number;\n  #scrollDirection: number;\n  #priorScrollY: number;\n  #resizeTimeout: number;\n  #scrollEndTimeout: number;\n  #isScrolling: boolean;\n  #vpHeightSnapshot: number;\n  #sfHeightSnapshot: number;\n  #stickers: Sticker[];\n  #scrollHandler: () => void;\n  #resizeHandler: () => void;\n\n  constructor({ elements, scrollContainer = window, offset = 0 }: ScrollStickOptions) {\n    this.scrollContainer = scrollContainer;\n    this.offset = offset;\n\n    this.#scrollDebounce = 100;\n    this.#resizeDebounce = 300;\n    this.#resizeTimeout = NaN;\n    this.#scrollEndTimeout = NaN;\n    this.#priorScrollY = NaN;\n    this.#isScrolling = false;\n    this.#vpHeightSnapshot = NaN;\n    this.#sfHeightSnapshot = NaN;\n    this.#scrollHandler = () => {};\n    this.#resizeHandler = () => {};\n\n    this.#isWindowScroll = this.scrollContainer === window;\n\n    // Only gets reset after scroll stop timeout fires\n    this.#scrollIntervalStart = this.getScrollY();\n\n    // Used to determine scroll change within debounced scroll handler\n    this.#scrollIntervalChange = 0;\n\n    // Used to determine scroll direction by +1(page down) -1(page up)\n    this.#scrollDirection = 0;\n\n    this.#stickers = this.setStickers(elements);\n    this.snapshotItemRects();\n    this.addHandlers();\n  }\n\n  setStickers(elements: ElementsOption) {\n    this.#stickers = (\n      typeof elements === 'string'\n        ? Array.from(document.querySelectorAll<HTMLElement>(elements))\n        : elements\n    ).map(element => ({\n      element,\n      isStuck: false,\n      top: NaN,\n      bottom: NaN,\n      height: NaN,\n      priorStickHeight: NaN\n    }));\n\n    return this.#stickers;\n  }\n\n  addHandlers() {\n    this.rmHandlers();\n    this.#scrollHandler = this.onScroll.bind(this);\n    this.#resizeHandler = this.onResize.bind(this);\n    this.scrollContainer.addEventListener('scroll', this.#scrollHandler);\n    window.addEventListener('resize', this.#resizeHandler);\n    // Not sure we need this. Maybe when DOM was persisted...\n    window.addEventListener('beforeunload', onBeforeunload);\n  }\n\n  rmHandlers() {\n    this.scrollContainer.removeEventListener('scroll', this.#scrollHandler);\n    window.removeEventListener('resize', this.#resizeHandler);\n    window.removeEventListener('beforeunload', onBeforeunload);\n  }\n\n  snapshotItemRects() {\n    this.#stickers.forEach(sticker => {\n      const rect = sticker.element.getBoundingClientRect();\n      sticker.top = rect.top;\n      sticker.bottom = rect.bottom;\n      sticker.height = rect.height;\n    });\n  }\n\n  onScroll() {\n    clearTimeout(this.#scrollEndTimeout);\n\n    const currentScrollY = this.getScrollY();\n\n    this.#priorScrollY = !Number.isNaN(this.#priorScrollY)\n      ? this.#priorScrollY\n      : this.#scrollIntervalStart;\n\n    // Diff between priorScrollY and new currentScrollY to determine direction\n    this.#scrollDirection = currentScrollY - this.#priorScrollY > 0 ? 1 : -1;\n\n    // How much scroll changed + or - within the debounce interval\n    this.#scrollIntervalChange = currentScrollY - this.#scrollIntervalStart;\n\n    // Update old to new for next scroll event\n    this.#priorScrollY = currentScrollY;\n\n    // When scrolling has stopped\n    this.#scrollEndTimeout = window.setTimeout(() => {\n      // Reset for next scroll starting point\n      this.#scrollIntervalStart = this.#priorScrollY;\n\n      // Reset until next scroll\n      this.#vpHeightSnapshot = NaN;\n      this.#sfHeightSnapshot = NaN;\n\n      this.#isScrolling = false;\n    }, this.#scrollDebounce);\n\n    // Additional scroll calls always have to test for stick state change\n    if (this.#isScrolling) {\n      this.testForStick();\n      return;\n    }\n\n    // Only reaches here on first call and we note as in a scrolling state\n    this.#isScrolling = true;\n\n    // grab the current rect points for stickers to test against while scrolling\n    this.snapshotItemRects();\n\n    /**\n     * Get once and cache until scroll settles\n     * Unlikely to change and avoids additional reflows on scroll\n     */\n    this.#vpHeightSnapshot = this.getViewportHeight();\n    this.#sfHeightSnapshot = this.getScrollFrameHeight();\n\n    this.testForStick();\n  }\n\n  onResize() {\n    clearTimeout(this.#resizeTimeout);\n    this.#resizeTimeout = window.setTimeout(() => {\n      this.snapshotItemRects();\n      this.#stickers.forEach(sticker => {\n        if (sticker.isStuck) this.addStick(sticker);\n      });\n    }, this.#resizeDebounce);\n  }\n\n  getScrollY() {\n    return this.#isWindowScroll\n      ? (this.scrollContainer as Window).scrollY\n      : (this.scrollContainer as HTMLElement).scrollTop;\n  }\n\n  getViewportHeight() {\n    // If we have a height snapshot use it since this has likely been called on scroll\n    if (!Number.isNaN(this.#vpHeightSnapshot)) {\n      return this.#vpHeightSnapshot;\n    }\n\n    return Math.max(document.documentElement.clientHeight, window.innerHeight || 0);\n  }\n\n  getScrollFrameHeight() {\n    // If we have a height snapshot use it since this has likely been called on scroll\n    if (!Number.isNaN(this.#sfHeightSnapshot)) {\n      return this.#sfHeightSnapshot;\n    }\n\n    const viewportHeight = this.getViewportHeight();\n    let sfh = viewportHeight;\n\n    if (!this.#isWindowScroll) {\n      sfh = viewportHeight - (this.scrollContainer as HTMLElement).getBoundingClientRect().top;\n    }\n\n    return sfh;\n  }\n\n  testBottomInView(sticker: Sticker) {\n    const vph = this.getViewportHeight();\n    const sfh = this.getScrollFrameHeight();\n    const sic = this.#scrollIntervalChange;\n\n    return sfh + sic + (vph - sfh) >= sticker.bottom + this.offset;\n  }\n\n  testForStick() {\n    // Don't do anything if scrolling up\n    if (this.#scrollDirection === -1) return;\n\n    this.#stickers.forEach(sticker => {\n      const bottomIsInView = this.testBottomInView(sticker);\n      const hasHeightChange =\n        !Number.isNaN(sticker.priorStickHeight) && sticker.height !== sticker.priorStickHeight;\n\n      if (bottomIsInView) {\n        if (!sticker.isStuck || hasHeightChange) {\n          window.requestAnimationFrame(() => this.addStick(sticker));\n        }\n      } else if (sticker.isStuck && hasHeightChange) {\n        const marginTop = this.getScrollY() + sticker.top - this.offset;\n\n        window.requestAnimationFrame(() => {\n          this.removeStick(sticker);\n          sticker.element.style.marginTop = `${marginTop}px`;\n        });\n      }\n    });\n\n    return this;\n  }\n\n  addStick(sticker: Sticker) {\n    sticker.element.style.position = 'sticky';\n    sticker.element.style.marginTop = '';\n    sticker.element.style.top = `${this.getStickTop(sticker)}px`;\n    sticker.priorStickHeight = sticker.height;\n    sticker.isStuck = true;\n    return this;\n  }\n\n  removeStick(sticker: Sticker) {\n    sticker.element.style.position = '';\n    sticker.element.style.marginTop = '';\n    sticker.element.style.top = '';\n    sticker.isStuck = false;\n    return this;\n  }\n\n  getStickTop(sticker: Sticker) {\n    const spHeight = this.getScrollFrameHeight();\n    let offset = this.offset;\n\n    if (sticker.height + this.offset > spHeight) {\n      offset = spHeight - sticker.height - offset;\n    }\n\n    return offset;\n  }\n\n  cleanup() {\n    this.rmHandlers();\n    this.#stickers.forEach(this.removeStick);\n  }\n}\n\n/**\n * @example useScrollStick({ elements: [myColumnElements] | '.my-columns', offset: 20 });\n * @param options An object to set the sticky elements, the scroll container and an stuck offset in pixels.\n * @returns void.\n */\nconst useScrollStick = (options?: ScrollStickOptions): void => {\n  const instance = useRef<Stickers>();\n\n  useLayoutEffect(() => {\n    if (options?.elements) {\n      instance.current = new Stickers(options);\n    }\n\n    return () => {\n      instance.current?.cleanup();\n      instance.current = undefined;\n    };\n  }, [options]);\n};\n\nexport default useScrollStick;\n"]}
+{"version":3,"file":"useScrollStick.js","sourceRoot":"","sources":["../../src/hooks/useScrollStick.ts"],"names":[],"mappings":"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","sourcesContent":["import { useRef, useLayoutEffect } from 'react';\n\nexport interface ScrollStickOptions {\n  elements: string | HTMLElement[];\n  scrollContainer?: Stickers['scrollContainer'];\n  offset?: number;\n}\n\ninterface Sticker {\n  element: HTMLElement;\n  top: number;\n  bottom: number;\n  height: number;\n  isStuck: boolean;\n  priorStickHeight: number;\n}\n\ntype ElementsOption = string | HTMLElement[];\n\nconst onBeforeunload = () => {\n  window.scrollTo(0, 0);\n};\n\nclass Stickers {\n  scrollContainer: HTMLElement | Window;\n  offset: number;\n  #scrollDebounce: number;\n  #resizeDebounce: number;\n  #isWindowScroll: boolean;\n  #scrollIntervalStart: number;\n  #scrollIntervalChange: number;\n  #scrollDirection: number;\n  #priorScrollY: number;\n  #resizeTimeout: number;\n  #scrollEndTimeout: number;\n  #isScrolling: boolean;\n  #vpHeightSnapshot: number;\n  #sfHeightSnapshot: number;\n  #stickers: Sticker[];\n  #scrollHandler: () => void;\n  #resizeHandler: () => void;\n\n  constructor({ elements, scrollContainer = window, offset = 0 }: ScrollStickOptions) {\n    this.scrollContainer = scrollContainer;\n    this.offset = offset;\n\n    this.#scrollDebounce = 100;\n    this.#resizeDebounce = 300;\n    this.#resizeTimeout = NaN;\n    this.#scrollEndTimeout = NaN;\n    this.#priorScrollY = NaN;\n    this.#isScrolling = false;\n    this.#vpHeightSnapshot = NaN;\n    this.#sfHeightSnapshot = NaN;\n    this.#scrollHandler = () => {};\n    this.#resizeHandler = () => {};\n\n    this.#isWindowScroll = this.scrollContainer === window;\n\n    // Only gets reset after scroll stop timeout fires\n    this.#scrollIntervalStart = this.getScrollY();\n\n    // Used to determine scroll change within debounced scroll handler\n    this.#scrollIntervalChange = 0;\n\n    // Used to determine scroll direction by +1(page down) -1(page up)\n    this.#scrollDirection = 0;\n\n    this.#stickers = this.setStickers(elements);\n    this.snapshotItemRects();\n    this.addHandlers();\n  }\n\n  setStickers(elements: ElementsOption) {\n    this.#stickers = (\n      typeof elements === 'string'\n        ? Array.from(document.querySelectorAll<HTMLElement>(elements))\n        : elements\n    ).map(element => ({\n      element,\n      isStuck: false,\n      top: NaN,\n      bottom: NaN,\n      height: NaN,\n      priorStickHeight: NaN\n    }));\n\n    return this.#stickers;\n  }\n\n  addHandlers() {\n    this.rmHandlers();\n    this.#scrollHandler = this.onScroll.bind(this);\n    this.#resizeHandler = this.onResize.bind(this);\n    this.scrollContainer.addEventListener('scroll', this.#scrollHandler);\n    window.addEventListener('resize', this.#resizeHandler);\n    // Not sure we need this. Maybe when DOM was persisted...\n    window.addEventListener('beforeunload', onBeforeunload);\n  }\n\n  rmHandlers() {\n    this.scrollContainer.removeEventListener('scroll', this.#scrollHandler);\n    window.removeEventListener('resize', this.#resizeHandler);\n    window.removeEventListener('beforeunload', onBeforeunload);\n  }\n\n  snapshotItemRects() {\n    this.#stickers.forEach(sticker => {\n      const rect = sticker.element.getBoundingClientRect();\n      sticker.top = rect.top;\n      sticker.bottom = rect.bottom;\n      sticker.height = rect.height;\n    });\n  }\n\n  onScroll() {\n    clearTimeout(this.#scrollEndTimeout);\n\n    const currentScrollY = this.getScrollY();\n\n    this.#priorScrollY = !Number.isNaN(this.#priorScrollY)\n      ? this.#priorScrollY\n      : this.#scrollIntervalStart;\n\n    // Diff between priorScrollY and new currentScrollY to determine direction\n    this.#scrollDirection = currentScrollY - this.#priorScrollY > 0 ? 1 : -1;\n\n    // How much scroll changed + or - within the debounce interval\n    this.#scrollIntervalChange = currentScrollY - this.#scrollIntervalStart;\n\n    // Update old to new for next scroll event\n    this.#priorScrollY = currentScrollY;\n\n    // When scrolling has stopped\n    this.#scrollEndTimeout = window.setTimeout(() => {\n      // Reset for next scroll starting point\n      this.#scrollIntervalStart = this.#priorScrollY;\n\n      // Reset until next scroll\n      this.#vpHeightSnapshot = NaN;\n      this.#sfHeightSnapshot = NaN;\n\n      this.#isScrolling = false;\n    }, this.#scrollDebounce);\n\n    // Additional scroll calls always have to test for stick state change\n    if (this.#isScrolling) {\n      this.testForStick();\n      return;\n    }\n\n    // Only reaches here on first call and we note as in a scrolling state\n    this.#isScrolling = true;\n\n    // grab the current rect points for stickers to test against while scrolling\n    this.snapshotItemRects();\n\n    /**\n     * Get once and cache until scroll settles\n     * Unlikely to change and avoids additional reflows on scroll\n     */\n    this.#vpHeightSnapshot = this.getViewportHeight();\n    this.#sfHeightSnapshot = this.getScrollFrameHeight();\n\n    this.testForStick();\n  }\n\n  onResize() {\n    clearTimeout(this.#resizeTimeout);\n    this.#resizeTimeout = window.setTimeout(() => {\n      this.snapshotItemRects();\n      this.#stickers.forEach(sticker => {\n        if (sticker.isStuck) this.addStick(sticker);\n      });\n    }, this.#resizeDebounce);\n  }\n\n  getScrollY() {\n    return this.#isWindowScroll\n      ? (this.scrollContainer as Window).scrollY\n      : (this.scrollContainer as HTMLElement).scrollTop;\n  }\n\n  getViewportHeight() {\n    // If we have a height snapshot use it since this has likely been called on scroll\n    if (!Number.isNaN(this.#vpHeightSnapshot)) {\n      return this.#vpHeightSnapshot;\n    }\n\n    return Math.max(document.documentElement.clientHeight, window.innerHeight || 0);\n  }\n\n  getScrollFrameHeight() {\n    // If we have a height snapshot use it since this has likely been called on scroll\n    if (!Number.isNaN(this.#sfHeightSnapshot)) {\n      return this.#sfHeightSnapshot;\n    }\n\n    const viewportHeight = this.getViewportHeight();\n    let sfh = viewportHeight;\n\n    if (!this.#isWindowScroll) {\n      sfh = viewportHeight - (this.scrollContainer as HTMLElement).getBoundingClientRect().top;\n    }\n\n    return sfh;\n  }\n\n  testBottomInView(sticker: Sticker) {\n    const vph = this.getViewportHeight();\n    const sfh = this.getScrollFrameHeight();\n    const sic = this.#scrollIntervalChange;\n\n    return sfh + sic + (vph - sfh) >= sticker.bottom + this.offset;\n  }\n\n  testForStick() {\n    // Don't do anything if scrolling up\n    if (this.#scrollDirection === -1) return;\n\n    this.#stickers.forEach(sticker => {\n      const bottomIsInView = this.testBottomInView(sticker);\n      const hasHeightChange =\n        !Number.isNaN(sticker.priorStickHeight) && sticker.height !== sticker.priorStickHeight;\n\n      if (bottomIsInView) {\n        if (!sticker.isStuck || hasHeightChange) {\n          window.requestAnimationFrame(() => this.addStick(sticker));\n        }\n      } else if (sticker.isStuck && hasHeightChange) {\n        const marginTop = this.getScrollY() + sticker.top - this.offset;\n\n        window.requestAnimationFrame(() => {\n          this.removeStick(sticker);\n          sticker.element.style.marginTop = `${marginTop}px`;\n        });\n      }\n    });\n\n    return this;\n  }\n\n  addStick(sticker: Sticker) {\n    sticker.element.style.position = 'sticky';\n    sticker.element.style.marginTop = '';\n    sticker.element.style.top = `${this.getStickTop(sticker)}px`;\n    sticker.priorStickHeight = sticker.height;\n    sticker.isStuck = true;\n    return this;\n  }\n\n  removeStick(sticker: Sticker) {\n    sticker.element.style.position = '';\n    sticker.element.style.marginTop = '';\n    sticker.element.style.top = '';\n    sticker.isStuck = false;\n    return this;\n  }\n\n  getStickTop(sticker: Sticker) {\n    const spHeight = this.getScrollFrameHeight();\n    let offset = this.offset;\n\n    if (sticker.height + this.offset > spHeight) {\n      offset = spHeight - sticker.height - offset;\n    }\n\n    return offset;\n  }\n\n  cleanup() {\n    this.rmHandlers();\n    this.#stickers.forEach(this.removeStick);\n  }\n}\n\n/**\n * @example useScrollStick({ elements: [myColumnElements] | '.my-columns', offset: 20 });\n * @param options An object to set the sticky elements, the scroll container and an stuck offset in pixels.\n * @returns void.\n */\nconst useScrollStick = (options?: ScrollStickOptions): void => {\n  const instance = useRef<Stickers>();\n\n  useLayoutEffect(() => {\n    if (options?.elements) {\n      instance.current = new Stickers(options);\n    }\n\n    return () => {\n      instance.current?.cleanup();\n      instance.current = undefined;\n    };\n  }, [options]);\n};\n\nexport default useScrollStick;\n"]}

package/lib/hooks/useScrollToggle.d.ts

@@ -0,0 +1,6 @@
+declare const useScrollToggle: (selector?: string) => {
+    enableScroll: () => void;
+    disableScroll: () => void;
+};
+export default useScrollToggle;
+//# sourceMappingURL=useScrollToggle.d.ts.map

package/lib/hooks/useScrollToggle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useScrollToggle.d.ts","sourceRoot":"","sources":["../../src/hooks/useScrollToggle.ts"],"names":[],"mappings":"AAMA,QAAA,MAAM,eAAe,cAAc,MAAM;wBAMF,IAAI;yBAMH,IAAI;CA2B3C,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/lib/hooks/useScrollToggle.js

@@ -0,0 +1,40 @@
+import { useCallback, useLayoutEffect, useRef } from 'react';
+import { getScrollbarWidth, testElForOverflow } from '../utils';
+import useConfiguration from './useConfiguration';
+const useScrollToggle = (selector = ':root') => {
+    const scrollbarWidthRef = useRef(0);
+    const styleRef = useRef(null);
+    const { styleSheetTarget } = useConfiguration();
+    const disabledRef = useRef(false);
+    const enableScroll = useCallback(() => {
+        if (!disabledRef.current)
+            return;
+        styleRef.current?.remove();
+        disabledRef.current = false;
+    }, []);
+    const disableScroll = useCallback(() => {
+        const scrollEl = document.querySelector(selector);
+        if (!scrollEl)
+            return;
+        const [overflowX, overflowY] = testElForOverflow(scrollEl);
+        if (!overflowX && !overflowY)
+            return;
+        styleRef.current = document.createElement('style');
+        styleRef.current.textContent = `
+      ${selector} {
+        ${overflowY ? `padding-inline-end: ${scrollbarWidthRef.current}px !important` : ''};
+        ${overflowX ? `padding-block-end: ${scrollbarWidthRef.current}px !important` : ''};
+        overflow: hidden !important;
+      }
+    `;
+        (styleSheetTarget ?? document.head).append(styleRef.current);
+        disabledRef.current = true;
+    }, [selector]);
+    useLayoutEffect(() => {
+        scrollbarWidthRef.current = getScrollbarWidth();
+        return () => styleRef.current?.remove();
+    }, []);
+    return { enableScroll, disableScroll };
+};
+export default useScrollToggle;
+//# sourceMappingURL=useScrollToggle.js.map

package/lib/hooks/useScrollToggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useScrollToggle.js","sourceRoot":"","sources":["../../src/hooks/useScrollToggle.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE7D,OAAO,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAEhE,OAAO,gBAAgB,MAAM,oBAAoB,CAAC;AAElD,MAAM,eAAe,GAAG,CAAC,WAAmB,OAAO,EAAE,EAAE;IACrD,MAAM,iBAAiB,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;IACpC,MAAM,QAAQ,GAAG,MAAM,CAA0B,IAAI,CAAC,CAAC;IACvD,MAAM,EAAE,gBAAgB,EAAE,GAAG,gBAAgB,EAAE,CAAC;IAChD,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAElC,MAAM,YAAY,GAAG,WAAW,CAAC,GAAS,EAAE;QAC1C,IAAI,CAAC,WAAW,CAAC,OAAO;YAAE,OAAO;QACjC,QAAQ,CAAC,OAAO,EAAE,MAAM,EAAE,CAAC;QAC3B,WAAW,CAAC,OAAO,GAAG,KAAK,CAAC;IAC9B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,aAAa,GAAG,WAAW,CAAC,GAAS,EAAE;QAC3C,MAAM,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;QAClD,IAAI,CAAC,QAAQ;YAAE,OAAO;QACtB,MAAM,CAAC,SAAS,EAAE,SAAS,CAAC,GAAG,iBAAiB,CAAC,QAAQ,CAAC,CAAC;QAC3D,IAAI,CAAC,SAAS,IAAI,CAAC,SAAS;YAAE,OAAO;QAErC,QAAQ,CAAC,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;QAEnD,QAAQ,CAAC,OAAO,CAAC,WAAW,GAAG;QAC3B,QAAQ;UACN,SAAS,CAAC,CAAC,CAAC,uBAAuB,iBAAiB,CAAC,OAAO,eAAe,CAAC,CAAC,CAAC,EAAE;UAChF,SAAS,CAAC,CAAC,CAAC,sBAAsB,iBAAiB,CAAC,OAAO,eAAe,CAAC,CAAC,CAAC,EAAE;;;KAGpF,CAAC;QAEF,CAAC,gBAAgB,IAAI,QAAQ,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;QAC7D,WAAW,CAAC,OAAO,GAAG,IAAI,CAAC;IAC7B,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,eAAe,CAAC,GAAG,EAAE;QACnB,iBAAiB,CAAC,OAAO,GAAG,iBAAiB,EAAE,CAAC;QAEhD,OAAO,GAAG,EAAE,CAAC,QAAQ,CAAC,OAAO,EAAE,MAAM,EAAE,CAAC;IAC1C,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,CAAC;AACzC,CAAC,CAAC;AAEF,eAAe,eAAe,CAAC","sourcesContent":["import { useCallback, useLayoutEffect, useRef } from 'react';\n\nimport { getScrollbarWidth, testElForOverflow } from '../utils';\n\nimport useConfiguration from './useConfiguration';\n\nconst useScrollToggle = (selector: string = ':root') => {\n  const scrollbarWidthRef = useRef(0);\n  const styleRef = useRef<HTMLStyleElement | null>(null);\n  const { styleSheetTarget } = useConfiguration();\n  const disabledRef = useRef(false);\n\n  const enableScroll = useCallback((): void => {\n    if (!disabledRef.current) return;\n    styleRef.current?.remove();\n    disabledRef.current = false;\n  }, []);\n\n  const disableScroll = useCallback((): void => {\n    const scrollEl = document.querySelector(selector);\n    if (!scrollEl) return;\n    const [overflowX, overflowY] = testElForOverflow(scrollEl);\n    if (!overflowX && !overflowY) return;\n\n    styleRef.current = document.createElement('style');\n\n    styleRef.current.textContent = `\n      ${selector} {\n        ${overflowY ? `padding-inline-end: ${scrollbarWidthRef.current}px !important` : ''};\n        ${overflowX ? `padding-block-end: ${scrollbarWidthRef.current}px !important` : ''};\n        overflow: hidden !important;\n      }\n    `;\n\n    (styleSheetTarget ?? document.head).append(styleRef.current);\n    disabledRef.current = true;\n  }, [selector]);\n\n  useLayoutEffect(() => {\n    scrollbarWidthRef.current = getScrollbarWidth();\n\n    return () => styleRef.current?.remove();\n  }, []);\n\n  return { enableScroll, disableScroll };\n};\n\nexport default useScrollToggle;\n"]}

package/lib/hooks/useTransitionState.d.ts

@@ -0,0 +1,39 @@
+import { CSSProperties, RefObject } from 'react';
+export declare const expandCollapseStates: Readonly<{
+    readonly low: "collapsed";
+    readonly rising: "expanding";
+    readonly high: "expanded";
+    readonly falling: "collapsing";
+}>;
+export declare const openCloseStates: Readonly<{
+    readonly low: "closed";
+    readonly rising: "opening";
+    readonly high: "open";
+    readonly falling: "closing";
+}>;
+declare const useTransitionState: <Low extends string = "low", Rising extends string = "rising", High extends string = "high", Falling extends string = "falling">({ ref, property, states, defaultState }: {
+    ref: RefObject<HTMLElement>;
+    property: keyof CSSProperties;
+} & ({
+    states: {
+        low: Low;
+        rising: Rising;
+        high: High;
+        falling: Falling;
+    };
+    defaultState?: Low | High | undefined;
+} | {
+    states?: {
+        low: 'low';
+        rising: 'rising';
+        high: 'high';
+        falling: 'falling';
+    } | undefined;
+    defaultState?: "high" | "low" | undefined;
+})) => {
+    state: Low | Rising | High | Falling;
+    set: (wantsToGo: Low | High) => void;
+    toggle: () => void;
+};
+export default useTransitionState;
+//# sourceMappingURL=useTransitionState.d.ts.map

package/lib/hooks/useTransitionState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTransitionState.d.ts","sourceRoot":"","sources":["../../src/hooks/useTransitionState.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,SAAS,EAAoC,MAAM,OAAO,CAAC;AAEnF,eAAO,MAAM,oBAAoB;;;;;EAKtB,CAAC;AAEZ,eAAO,MAAM,eAAe;;;;;EAKjB,CAAC;AAEZ,QAAA,MAAM,kBAAkB;SAgBjB,UAAU,WAAW,CAAC;cACjB,MAAM,aAAa;;;;;;;;;;;aAOT,KAAK;gBAAU,QAAQ;cAAQ,MAAM;iBAAW,SAAS;;;;;;;CA2C9E,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/lib/hooks/useTransitionState.js

@@ -0,0 +1,56 @@
+import { useCallback, useEffect, useState } from 'react';
+export const expandCollapseStates = Object.freeze({
+    low: 'collapsed',
+    rising: 'expanding',
+    high: 'expanded',
+    falling: 'collapsing'
+});
+export const openCloseStates = Object.freeze({
+    low: 'closed',
+    rising: 'opening',
+    high: 'open',
+    falling: 'closing'
+});
+const useTransitionState = ({ ref, property, states = {
+    low: 'low',
+    rising: 'rising',
+    high: 'high',
+    falling: 'falling'
+}, defaultState = states.low }) => {
+    const [state, setState] = useState(() => defaultState === states.high ? 'high' : 'low');
+    const onTransitionEnd = useCallback((e) => {
+        if (e.propertyName !== property || e.target !== e.currentTarget)
+            return;
+        setState(cur => (cur === 'falling' ? 'low' : 'high'));
+    }, [property]);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        el.addEventListener('transitionend', onTransitionEnd);
+        return () => {
+            el.removeEventListener('transitionend', onTransitionEnd);
+        };
+    }, [onTransitionEnd]);
+    const set = useCallback((wantsToGo) => {
+        setState(cur => {
+            if (wantsToGo === states.high && cur !== 'high')
+                return 'rising';
+            if (wantsToGo === states.low && cur !== 'low')
+                return 'falling';
+            return cur;
+        });
+    }, []);
+    const toggle = useCallback(() => {
+        setState(cur => {
+            if (cur === 'low' || cur === 'falling')
+                return 'rising';
+            if (cur === 'high' || cur === 'rising')
+                return 'falling';
+            return cur;
+        });
+    }, []);
+    return { state: states[state], set, toggle };
+};
+export default useTransitionState;
+//# sourceMappingURL=useTransitionState.js.map

package/lib/hooks/useTransitionState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTransitionState.js","sourceRoot":"","sources":["../../src/hooks/useTransitionState.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEnF,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,MAAM,CAAC;IAChD,GAAG,EAAE,WAAW;IAChB,MAAM,EAAE,WAAW;IACnB,IAAI,EAAE,UAAU;IAChB,OAAO,EAAE,YAAY;CACb,CAAC,CAAC;AAEZ,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,MAAM,CAAC;IAC3C,GAAG,EAAE,QAAQ;IACb,MAAM,EAAE,SAAS;IACjB,IAAI,EAAE,MAAM;IACZ,OAAO,EAAE,SAAS;CACV,CAAC,CAAC;AAEZ,MAAM,kBAAkB,GAAG,CAKzB,EACA,GAAG,EACH,QAAQ,EACR,MAAM,GAAG;IACP,GAAG,EAAE,KAAY;IACjB,MAAM,EAAE,QAAkB;IAC1B,IAAI,EAAE,MAAc;IACpB,OAAO,EAAE,SAAoB;CAC9B,EACD,YAAY,GAAG,MAAM,CAAC,GAAG,EAa1B,EAAE,EAAE;IACH,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAsB,GAAG,EAAE,CAC3D,YAAY,KAAK,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAC9C,CAAC;IAEF,MAAM,eAAe,GAAG,WAAW,CACjC,CAAC,CAAkB,EAAE,EAAE;QACrB,IAAI,CAAC,CAAC,YAAY,KAAK,QAAQ,IAAI,CAAC,CAAC,MAAM,KAAK,CAAC,CAAC,aAAa;YAAE,OAAO;QACxE,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,GAAG,KAAK,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;IACxD,CAAC,EACD,CAAC,QAAQ,CAAC,CACX,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,EAAE,GAAG,GAAG,CAAC,OAAO,CAAC;QACvB,IAAI,CAAC,EAAE;YAAE,OAAO;QAEhB,EAAE,CAAC,gBAAgB,CAAC,eAAe,EAAE,eAAe,CAAC,CAAC;QACtD,OAAO,GAAG,EAAE;YACV,EAAE,CAAC,mBAAmB,CAAC,eAAe,EAAE,eAAe,CAAC,CAAC;QAC3D,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC;IAEtB,MAAM,GAAG,GAAG,WAAW,CAAC,CAAC,SAAqB,EAAE,EAAE;QAChD,QAAQ,CAAC,GAAG,CAAC,EAAE;YACb,IAAI,SAAS,KAAK,MAAM,CAAC,IAAI,IAAI,GAAG,KAAK,MAAM;gBAAE,OAAO,QAAQ,CAAC;YACjE,IAAI,SAAS,KAAK,MAAM,CAAC,GAAG,IAAI,GAAG,KAAK,KAAK;gBAAE,OAAO,SAAS,CAAC;YAChE,OAAO,GAAG,CAAC;QACb,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,MAAM,GAAG,WAAW,CAAC,GAAG,EAAE;QAC9B,QAAQ,CAAC,GAAG,CAAC,EAAE;YACb,IAAI,GAAG,KAAK,KAAK,IAAI,GAAG,KAAK,SAAS;gBAAE,OAAO,QAAQ,CAAC;YACxD,IAAI,GAAG,KAAK,MAAM,IAAI,GAAG,KAAK,QAAQ;gBAAE,OAAO,SAAS,CAAC;YACzD,OAAO,GAAG,CAAC;QACb,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,EAAE,KAAK,EAAE,MAAM,CAAC,KAAK,CAAkC,EAAE,GAAG,EAAE,MAAM,EAAE,CAAC;AAChF,CAAC,CAAC;AAEF,eAAe,kBAAkB,CAAC","sourcesContent":["import { CSSProperties, RefObject, useCallback, useEffect, useState } from 'react';\n\nexport const expandCollapseStates = Object.freeze({\n  low: 'collapsed',\n  rising: 'expanding',\n  high: 'expanded',\n  falling: 'collapsing'\n} as const);\n\nexport const openCloseStates = Object.freeze({\n  low: 'closed',\n  rising: 'opening',\n  high: 'open',\n  falling: 'closing'\n} as const);\n\nconst useTransitionState = <\n  Low extends string = 'low',\n  Rising extends string = 'rising',\n  High extends string = 'high',\n  Falling extends string = 'falling'\n>({\n  ref,\n  property,\n  states = {\n    low: 'low' as Low,\n    rising: 'rising' as Rising,\n    high: 'high' as High,\n    falling: 'falling' as Falling\n  },\n  defaultState = states.low\n}: {\n  ref: RefObject<HTMLElement>;\n  property: keyof CSSProperties;\n} & (\n  | {\n      states: { low: Low; rising: Rising; high: High; falling: Falling };\n      defaultState?: Low | High;\n    }\n  | {\n      states?: { low: 'low'; rising: 'rising'; high: 'high'; falling: 'falling' };\n      defaultState?: 'low' | 'high';\n    }\n)) => {\n  const [state, setState] = useState<keyof typeof states>(() =>\n    defaultState === states.high ? 'high' : 'low'\n  );\n\n  const onTransitionEnd = useCallback(\n    (e: TransitionEvent) => {\n      if (e.propertyName !== property || e.target !== e.currentTarget) return;\n      setState(cur => (cur === 'falling' ? 'low' : 'high'));\n    },\n    [property]\n  );\n\n  useEffect(() => {\n    const el = ref.current;\n    if (!el) return;\n\n    el.addEventListener('transitionend', onTransitionEnd);\n    return () => {\n      el.removeEventListener('transitionend', onTransitionEnd);\n    };\n  }, [onTransitionEnd]);\n\n  const set = useCallback((wantsToGo: Low | High) => {\n    setState(cur => {\n      if (wantsToGo === states.high && cur !== 'high') return 'rising';\n      if (wantsToGo === states.low && cur !== 'low') return 'falling';\n      return cur;\n    });\n  }, []);\n\n  const toggle = useCallback(() => {\n    setState(cur => {\n      if (cur === 'low' || cur === 'falling') return 'rising';\n      if (cur === 'high' || cur === 'rising') return 'falling';\n      return cur;\n    });\n  }, []);\n\n  return { state: states[state] as Low | Rising | High | Falling, set, toggle };\n};\n\nexport default useTransitionState;\n"]}