@pega/cosmos-react-core 3.0.0-dev.1.0 → 3.0.0-dev.11.0

package/lib/hooks/useAutoResize.js.map

@@ -1 +1 @@
-{"version":3,"file":"useAutoResize.js","sourceRoot":"","sources":["../../src/hooks/useAutoResize.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAa,MAAM,OAAO,CAAC;AAEpD,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAEpC;;;;;;;GAOG;AACH,MAAM,aAAa,GAAG,CACpB,SAAkB,EAClB,aAAsB,EACM,EAAE;IAC9B,MAAM,OAAO,GAAG,MAAM,CAAI,IAAI,CAAC,CAAC;IAEhC,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,aAAa,IAAI,CAAC,CAAC,CAAC;IAE/D,MAAM,UAAU,GAAG,GAAG,EAAE;QACtB,IAAI,OAAO,CAAC,OAAO,EAAE;YACnB,IAAI,YAAY,GAAG,SAAS,CAAC;YAC7B,IAAI,CAAC,SAAS,EAAE;gBACd,YAAY,GAAG,OAAO,CAAC,OAAO,CAAC,YAAY,CAAC;gBAC5C,YAAY,CAAC,YAAY,CAAC,CAAC;aAC5B;YACD,qGAAqG;YACrG,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,YAAY,IAAI,CAAC;YAEnD,IAAI,SAAS,EAAE;gBACb,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,SAAS;oBAC7B,OAAO,CAAC,OAAO,CAAC,YAAY,GAAG,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC;gBAC/D,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,OAAO,CAAC,YAAY,EAAE,SAAS,CAAC,IAAI,CAAC;aACzF;iBAAM;gBACL,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,OAAO,CAAC,OAAO,CAAC,YAAY,IAAI,CAAC;aACpE;SACF;IACH,CAAC,CAAC;IAEF,MAAM,mBAAmB,GAAG,QAAQ,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC;IAEtD,OAAO,CAAC,OAAO,EAAE,mBAAmB,CAAC,CAAC;AACxC,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import { useRef, useState, RefObject } from 'react';\n\nimport { debounce } from '../utils';\n\n/**\n * @example const [ref, resizeFunction] = useAutoResize();\n * maxHeight should be provided in pixels without units\n * minHeight should be provided in pixels without units\n * @returns * ref:: A reference for the element that the resize functionality should be applied to. [React RefObject](https://reactjs.org/docs/refs-and-the-dom.html)\n *          * resizeFunction:: The function to call to automatically resize the element.\n * element refers to auto resizable element\n */\nconst useAutoResize = <T extends HTMLElement = HTMLElement>(\n  maxHeight?: number,\n  minHeightProp?: number\n): [RefObject<T>, () => void] => {\n  const element = useRef<T>(null);\n\n  const [minHeight, setMinHeight] = useState(minHeightProp || 0);\n\n  const autoResize = () => {\n    if (element.current) {\n      let newMinHeight = minHeight;\n      if (!minHeight) {\n        newMinHeight = element.current.scrollHeight;\n        setMinHeight(newMinHeight);\n      }\n      // Reset the heights to the base height so there is an overflow / or none to calculate the new height\n      element.current.style.height = `${newMinHeight}px`;\n\n      if (maxHeight) {\n        element.current.style.overflowY =\n          element.current.scrollHeight > maxHeight ? 'auto' : 'hidden';\n        element.current.style.height = `${Math.min(element.current.scrollHeight, maxHeight)}px`;\n      } else {\n        element.current.style.height = `${element.current.scrollHeight}px`;\n      }\n    }\n  };\n\n  const debouncedAutoResize = debounce(autoResize, 100);\n\n  return [element, debouncedAutoResize];\n};\n\nexport default useAutoResize;\n"]}
+{"version":3,"file":"useAutoResize.js","sourceRoot":"","sources":["../../src/hooks/useAutoResize.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAoB,MAAM,OAAO,CAAC;AAE3D,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAEpC;;;;;;;GAOG;AACH,MAAM,aAAa,GAAG,CACpB,SAAkB,EAClB,aAAsB,EACoB,EAAE;IAC5C,MAAM,OAAO,GAAG,MAAM,CAAW,IAAI,CAAC,CAAC;IACvC,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,aAAa,IAAI,CAAC,CAAC,CAAC;IAE/D,MAAM,UAAU,GAAG,GAAG,EAAE;QACtB,IAAI,mBAAmB,GAAgB,OAAO,CAAC,OAAsB,CAAC;QACtE,IAAI,MAAqC,CAAC;QAC1C,IAAI,OAAO,CAAC,OAAO,IAAI,OAAO,CAAC,OAAO,YAAY,iBAAiB,EAAE;YACnE,MAAM,GAAG,OAAO,CAAC,OAAO,CAAC;YACzB,mBAAmB;gBACjB,OAAO,CAAC,OAAO,CAAC,eAAe,EAAE,aAAa,CAAC,MAAM,CAAC,IAAI,OAAO,CAAC,OAAO,CAAC;SAC7E;QACD,IAAI,OAAO,CAAC,OAAO,EAAE;YACnB,IAAI,YAAY,GAAG,SAAS,CAAC;YAC7B,IAAI,CAAC,SAAS,EAAE;gBACd,YAAY,GAAG,mBAAmB,CAAC,YAAY,CAAC;gBAChD,YAAY,CAAC,YAAY,CAAC,CAAC;aAC5B;YACD,qGAAqG;YACrG,mBAAmB,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,YAAY,IAAI,CAAC;YAEvD,IAAI,SAAS,EAAE;gBACb,mBAAmB,CAAC,KAAK,CAAC,SAAS;oBACjC,mBAAmB,CAAC,YAAY,GAAG,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC;gBACnE,MAAM,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,mBAAmB,CAAC,YAAY,EAAE,SAAS,CAAC,IAAI,CAAC;gBAC5E,mBAAmB,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;gBAC1C,IAAI,MAAM;oBAAE,MAAM,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;aAC1C;iBAAM;gBACL,mBAAmB,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,mBAAmB,CAAC,YAAY,IAAI,CAAC;gBAC3E,IAAI,MAAM;oBAAE,MAAM,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,mBAAmB,CAAC,YAAY,IAAI,CAAC;aAC3E;SACF;IACH,CAAC,CAAC;IAEF,MAAM,mBAAmB,GAAG,QAAQ,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC;IAEtD,OAAO,CAAC,OAAO,EAAE,mBAAmB,CAAC,CAAC;AACxC,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import { useRef, useState, MutableRefObject } from 'react';\n\nimport { debounce } from '../utils';\n\n/**\n * @example const [ref, resizeFunction] = useAutoResize();\n * maxHeight should be provided in pixels without units\n * minHeight should be provided in pixels without units\n * @returns * ref:: A reference for the element that the resize functionality should be applied to. [React RefObject](https://reactjs.org/docs/refs-and-the-dom.html)\n *          * resizeFunction:: The function to call to automatically resize the element.\n * element refers to auto resizable element\n */\nconst useAutoResize = <T extends HTMLElement = HTMLElement>(\n  maxHeight?: number,\n  minHeightProp?: number\n): [MutableRefObject<T | null>, () => void] => {\n  const element = useRef<T | null>(null);\n  const [minHeight, setMinHeight] = useState(minHeightProp || 0);\n\n  const autoResize = () => {\n    let scrollHeightElement: HTMLElement = element.current as HTMLElement;\n    let iframe: HTMLIFrameElement | undefined;\n    if (element.current && element.current instanceof HTMLIFrameElement) {\n      iframe = element.current;\n      scrollHeightElement =\n        element.current.contentDocument?.querySelector('body') ?? element.current;\n    }\n    if (element.current) {\n      let newMinHeight = minHeight;\n      if (!minHeight) {\n        newMinHeight = scrollHeightElement.scrollHeight;\n        setMinHeight(newMinHeight);\n      }\n      // Reset the heights to the base height so there is an overflow / or none to calculate the new height\n      scrollHeightElement.style.height = `${newMinHeight}px`;\n\n      if (maxHeight) {\n        scrollHeightElement.style.overflowY =\n          scrollHeightElement.scrollHeight > maxHeight ? 'auto' : 'hidden';\n        const height = `${Math.min(scrollHeightElement.scrollHeight, maxHeight)}px`;\n        scrollHeightElement.style.height = height;\n        if (iframe) iframe.style.height = height;\n      } else {\n        scrollHeightElement.style.height = `${scrollHeightElement.scrollHeight}px`;\n        if (iframe) iframe.style.height = `${scrollHeightElement.scrollHeight}px`;\n      }\n    }\n  };\n\n  const debouncedAutoResize = debounce(autoResize, 100);\n\n  return [element, debouncedAutoResize];\n};\n\nexport default useAutoResize;\n"]}

package/lib/hooks/useDraggable.d.ts

@@ -3,6 +3,6 @@ import { RefObject } from 'react';
  * @param draggableElementRef Reference to the element which is draggable.
  * @param dragHandleRef Reference to the handle element which allows to move draggableElementRef.
  */
-declare const useDraggable: (draggableElementRef: RefObject<HTMLElement>, dragHandleRef: RefObject<HTMLElement>) => void;
+declare const useDraggable: (draggableElementRef: RefObject<HTMLElement>, dragHandleRef: RefObject<HTMLElement>, enabled?: boolean) => void;
 export default useDraggable;
 //# sourceMappingURL=useDraggable.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"useDraggable.d.ts","sourceRoot":"","sources":["../../src/hooks/useDraggable.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,SAAS,EAAE,MAAM,OAAO,CAAC;AAYvD;;;GAGG;AACH,QAAA,MAAM,YAAY,wBACK,UAAU,WAAW,CAAC,iBAC5B,UAAU,WAAW,CAAC,SA4DtC,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"useDraggable.d.ts","sourceRoot":"","sources":["../../src/hooks/useDraggable.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,SAAS,EAAE,MAAM,OAAO,CAAC;AAYvD;;;GAGG;AACH,QAAA,MAAM,YAAY,wBACK,UAAU,WAAW,CAAC,iBAC5B,UAAU,WAAW,CAAC,YAC5B,OAAO,SA6DjB,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/hooks/useDraggable.js

@@ -8,9 +8,11 @@ const shouldIgnoreEvent = (event) => {
  * @param draggableElementRef Reference to the element which is draggable.
  * @param dragHandleRef Reference to the handle element which allows to move draggableElementRef.
  */
-const useDraggable = (draggableElementRef, dragHandleRef) => {
+const useDraggable = (draggableElementRef, dragHandleRef, enabled = true) => {
     const [dragging, setDragging] = useState(false);
     useEffect(() => {
+        if (!enabled)
+            return;
         const onMouseDown = (event) => {
             if (shouldIgnoreEvent(event))
                 return;
@@ -33,7 +35,7 @@ const useDraggable = (draggableElementRef, dragHandleRef) => {
                 current.removeEventListener('touchstart', onMouseDown);
             };
         }
-    }, [dragHandleRef?.current]);
+    }, [dragHandleRef.current, enabled]);
     useEffect(() => {
         const onMouseMove = (event) => {
             if (!dragging)

package/lib/hooks/useDraggable.js.map

@@ -1 +1 @@
-{"version":3,"file":"useDraggable.js","sourceRoot":"","sources":["../../src/hooks/useDraggable.ts"],"names":[],"mappings":"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","sourcesContent":["import { useState, useEffect, RefObject } from 'react';\n\nconst initialDraggableElPosition = { x: 0, y: 0 };\n\nconst interactiveElementsTags = ['button', 'a', 'input', 'textarea', 'select', 'details'];\n\nconst shouldIgnoreEvent = (event: MouseEvent | TouchEvent): boolean => {\n  return interactiveElementsTags.some(\n    tag => event.target instanceof Element && event.target.tagName.toLowerCase() === tag\n  );\n};\n\n/**\n * @param draggableElementRef Reference to the element which is draggable.\n * @param dragHandleRef Reference to the handle element which allows to move draggableElementRef.\n */\nconst useDraggable = (\n  draggableElementRef: RefObject<HTMLElement>,\n  dragHandleRef: RefObject<HTMLElement>\n) => {\n  const [dragging, setDragging] = useState(false);\n\n  useEffect(() => {\n    const onMouseDown = (event: MouseEvent | TouchEvent): void => {\n      if (shouldIgnoreEvent(event)) return;\n      setDragging(true);\n      if (draggableElementRef.current) {\n        const { clientX, clientY } = 'touches' in event ? event.touches[0] : event;\n        initialDraggableElPosition.x =\n          clientX - draggableElementRef.current.getBoundingClientRect().left;\n        initialDraggableElPosition.y =\n          clientY - draggableElementRef.current.getBoundingClientRect().top;\n      }\n    };\n\n    if (dragHandleRef.current) {\n      // Save the current value so we can properly remove event listener after the ref has changed.\n      const { current } = dragHandleRef;\n\n      current.addEventListener('mousedown', onMouseDown);\n      current.addEventListener('touchstart', onMouseDown);\n\n      return () => {\n        current.removeEventListener('mousedown', onMouseDown);\n        current.removeEventListener('touchstart', onMouseDown);\n      };\n    }\n  }, [dragHandleRef?.current]);\n\n  useEffect(() => {\n    const onMouseMove = (event: MouseEvent | TouchEvent): void => {\n      if (!dragging) return;\n      if (draggableElementRef && draggableElementRef.current) {\n        const { clientX, clientY } = 'touches' in event ? event.touches[0] : event;\n        draggableElementRef.current.style.transform = `translate(${\n          clientX - draggableElementRef.current.offsetLeft - initialDraggableElPosition.x\n        }px, ${clientY - draggableElementRef.current.offsetTop - initialDraggableElPosition.y}px)`;\n      }\n    };\n\n    const onMouseUp = (): void => {\n      setDragging(false);\n    };\n\n    if (dragging) {\n      document.addEventListener('mouseup', onMouseUp);\n      document.addEventListener('touchend', onMouseUp);\n      document.addEventListener('mousemove', onMouseMove);\n      document.addEventListener('touchmove', onMouseMove);\n\n      return () => {\n        document.removeEventListener('mouseup', onMouseUp);\n        document.removeEventListener('touchend', onMouseUp);\n        document.removeEventListener('mousemove', onMouseMove);\n        document.removeEventListener('touchmove', onMouseMove);\n      };\n    }\n  }, [dragging]);\n};\n\nexport default useDraggable;\n"]}
+{"version":3,"file":"useDraggable.js","sourceRoot":"","sources":["../../src/hooks/useDraggable.ts"],"names":[],"mappings":"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","sourcesContent":["import { useState, useEffect, RefObject } from 'react';\n\nconst initialDraggableElPosition = { x: 0, y: 0 };\n\nconst interactiveElementsTags = ['button', 'a', 'input', 'textarea', 'select', 'details'];\n\nconst shouldIgnoreEvent = (event: MouseEvent | TouchEvent): boolean => {\n  return interactiveElementsTags.some(\n    tag => event.target instanceof Element && event.target.tagName.toLowerCase() === tag\n  );\n};\n\n/**\n * @param draggableElementRef Reference to the element which is draggable.\n * @param dragHandleRef Reference to the handle element which allows to move draggableElementRef.\n */\nconst useDraggable = (\n  draggableElementRef: RefObject<HTMLElement>,\n  dragHandleRef: RefObject<HTMLElement>,\n  enabled: boolean = true\n) => {\n  const [dragging, setDragging] = useState(false);\n\n  useEffect(() => {\n    if (!enabled) return;\n    const onMouseDown = (event: MouseEvent | TouchEvent): void => {\n      if (shouldIgnoreEvent(event)) return;\n      setDragging(true);\n      if (draggableElementRef.current) {\n        const { clientX, clientY } = 'touches' in event ? event.touches[0] : event;\n        initialDraggableElPosition.x =\n          clientX - draggableElementRef.current.getBoundingClientRect().left;\n        initialDraggableElPosition.y =\n          clientY - draggableElementRef.current.getBoundingClientRect().top;\n      }\n    };\n\n    if (dragHandleRef.current) {\n      // Save the current value so we can properly remove event listener after the ref has changed.\n      const { current } = dragHandleRef;\n\n      current.addEventListener('mousedown', onMouseDown);\n      current.addEventListener('touchstart', onMouseDown);\n\n      return () => {\n        current.removeEventListener('mousedown', onMouseDown);\n        current.removeEventListener('touchstart', onMouseDown);\n      };\n    }\n  }, [dragHandleRef.current, enabled]);\n\n  useEffect(() => {\n    const onMouseMove = (event: MouseEvent | TouchEvent): void => {\n      if (!dragging) return;\n      if (draggableElementRef && draggableElementRef.current) {\n        const { clientX, clientY } = 'touches' in event ? event.touches[0] : event;\n        draggableElementRef.current.style.transform = `translate(${\n          clientX - draggableElementRef.current.offsetLeft - initialDraggableElPosition.x\n        }px, ${clientY - draggableElementRef.current.offsetTop - initialDraggableElPosition.y}px)`;\n      }\n    };\n\n    const onMouseUp = (): void => {\n      setDragging(false);\n    };\n\n    if (dragging) {\n      document.addEventListener('mouseup', onMouseUp);\n      document.addEventListener('touchend', onMouseUp);\n      document.addEventListener('mousemove', onMouseMove);\n      document.addEventListener('touchmove', onMouseMove);\n\n      return () => {\n        document.removeEventListener('mouseup', onMouseUp);\n        document.removeEventListener('touchend', onMouseUp);\n        document.removeEventListener('mousemove', onMouseMove);\n        document.removeEventListener('touchmove', onMouseMove);\n      };\n    }\n  }, [dragging]);\n};\n\nexport default useDraggable;\n"]}

package/lib/hooks/useEscape.d.ts

@@ -0,0 +1,10 @@
+import { DependencyList, RefObject } from 'react';
+/**
+ * @example useEscape((event) => { do something });
+ * @param cb The function that should be executed on keydown keyevent.
+ * @param target To which esc event to be attached - Defaults to document
+ * @param dependencies List of dependencies
+ */
+declare const useEscape: (cb: (e: KeyboardEvent) => void, target?: HTMLElement | RefObject<HTMLElement> | Document | null, dependencies?: DependencyList) => void;
+export default useEscape;
+//# sourceMappingURL=useEscape.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useEscape.d.ts","sourceRoot":"","sources":["../../src/hooks/useEscape.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAe,MAAM,OAAO,CAAC;AAI/D;;;;;GAKG;AAEH,QAAA,MAAM,SAAS,WACL,aAAa,KAAK,IAAI,WACtB,WAAW,GAAG,UAAU,WAAW,CAAC,GAAG,QAAQ,GAAG,IAAI,wCAW/D,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/lib/hooks/useEscape.js

@@ -0,0 +1,17 @@
+import { useCallback } from 'react';
+import useEvent from './useEvent';
+/**
+ * @example useEscape((event) => { do something });
+ * @param cb The function that should be executed on keydown keyevent.
+ * @param target To which esc event to be attached - Defaults to document
+ * @param dependencies List of dependencies
+ */
+const useEscape = (cb, target = document, dependencies = []) => {
+    const onKeydown = useCallback((e) => {
+        if (e.key === 'Escape')
+            cb(e);
+    }, [cb, ...dependencies]);
+    useEvent('keydown', onKeydown, { target });
+};
+export default useEscape;
+//# sourceMappingURL=useEscape.js.map

package/lib/hooks/useEscape.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useEscape.js","sourceRoot":"","sources":["../../src/hooks/useEscape.ts"],"names":[],"mappings":"AAAA,OAAO,EAA6B,WAAW,EAAE,MAAM,OAAO,CAAC;AAE/D,OAAO,QAAQ,MAAM,YAAY,CAAC;AAElC;;;;;GAKG;AAEH,MAAM,SAAS,GAAG,CAChB,EAA8B,EAC9B,SAAiE,QAAQ,EACzE,eAA+B,EAAE,EACjC,EAAE;IACF,MAAM,SAAS,GAAG,WAAW,CAC3B,CAAC,CAAgB,EAAE,EAAE;QACnB,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ;YAAE,EAAE,CAAC,CAAC,CAAC,CAAC;IAChC,CAAC,EACD,CAAC,EAAE,EAAE,GAAG,YAAY,CAAC,CACtB,CAAC;IAEF,QAAQ,CAAC,SAAS,EAAE,SAAS,EAAE,EAAE,MAAM,EAAE,CAAC,CAAC;AAC7C,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["import { DependencyList, RefObject, useCallback } from 'react';\n\nimport useEvent from './useEvent';\n\n/**\n * @example useEscape((event) => { do something });\n * @param cb The function that should be executed on keydown keyevent.\n * @param target To which esc event to be attached - Defaults to document\n * @param dependencies List of dependencies\n */\n\nconst useEscape = (\n  cb: (e: KeyboardEvent) => void,\n  target: HTMLElement | RefObject<HTMLElement> | Document | null = document,\n  dependencies: DependencyList = []\n) => {\n  const onKeydown = useCallback(\n    (e: KeyboardEvent) => {\n      if (e.key === 'Escape') cb(e);\n    },\n    [cb, ...dependencies]\n  );\n\n  useEvent('keydown', onKeydown, { target });\n};\n\nexport default useEscape;\n"]}

package/lib/hooks/useEvent.d.ts

@@ -0,0 +1,27 @@
+import { DependencyList, RefObject } from 'react';
+declare type EventMapForTarget<Target extends EventTarget> = Target extends HTMLElement ? HTMLElementEventMap : Target extends SVGElement ? SVGElementEventMap : Target extends Document ? DocumentEventMap : Target extends Window ? WindowEventMap : {
+    [eventType: string]: Event;
+};
+declare type EventNamesForTarget<T extends EventTarget> = keyof EventMapForTarget<T> & string;
+/**
+ * @example useEvent('keydown', (event) => { do something });
+ * @param cb The function that should be executed on keydown keyevent.
+ * @param options
+ */
+declare function useEvent<Target extends Document, EventName extends EventNamesForTarget<Target>>(eventName: EventName, cb: (e: EventMapForTarget<Target>[EventName]) => void, opts?: {
+    target?: undefined;
+    eventOptions?: AddEventListenerOptions | boolean;
+    dependencies: DependencyList;
+}): void;
+declare function useEvent<Target extends EventTarget, EventName extends EventNamesForTarget<Target>>(eventName: EventName, cb: (e: EventMapForTarget<Target>[EventName]) => void, opts: {
+    target: Target | RefObject<Target> | null;
+    eventOptions?: AddEventListenerOptions | boolean;
+    dependencies?: DependencyList;
+}): void;
+declare function useEvent<Target extends EventTarget, EventName extends EventNamesForTarget<Target | Document>>(eventName: EventName, cb: (e: EventMapForTarget<Target | Document>[EventName]) => void, opts: {
+    target?: Target | RefObject<Target> | null | undefined;
+    eventOptions?: AddEventListenerOptions | boolean;
+    dependencies?: DependencyList;
+}): void;
+export default useEvent;
+//# sourceMappingURL=useEvent.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useEvent.d.ts","sourceRoot":"","sources":["../../src/hooks/useEvent.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAa,MAAM,OAAO,CAAC;AAK7D,aAAK,iBAAiB,CAAC,MAAM,SAAS,WAAW,IAAI,MAAM,SAAS,WAAW,GAC3E,mBAAmB,GACnB,MAAM,SAAS,UAAU,GACzB,kBAAkB,GAClB,MAAM,SAAS,QAAQ,GACvB,gBAAgB,GAChB,MAAM,SAAS,MAAM,GACrB,cAAc,GACd;IACE,CAAC,SAAS,EAAE,MAAM,GAAG,KAAK,CAAC;CAC5B,CAAC;AACN,aAAK,mBAAmB,CAAC,CAAC,SAAS,WAAW,IAAI,MAAM,iBAAiB,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC;AAEtF;;;;GAIG;AACH,iBAAS,QAAQ,CAAC,MAAM,SAAS,QAAQ,EAAE,SAAS,SAAS,mBAAmB,CAAC,MAAM,CAAC,EACtF,SAAS,EAAE,SAAS,EACpB,EAAE,EAAE,CAAC,CAAC,EAAE,iBAAiB,CAAC,MAAM,CAAC,CAAC,SAAS,CAAC,KAAK,IAAI,EACrD,IAAI,CAAC,EAAE;IACL,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,YAAY,CAAC,EAAE,uBAAuB,GAAG,OAAO,CAAC;IACjD,YAAY,EAAE,cAAc,CAAC;CAC9B,GACA,IAAI,CAAC;AAER,iBAAS,QAAQ,CAAC,MAAM,SAAS,WAAW,EAAE,SAAS,SAAS,mBAAmB,CAAC,MAAM,CAAC,EACzF,SAAS,EAAE,SAAS,EACpB,EAAE,EAAE,CAAC,CAAC,EAAE,iBAAiB,CAAC,MAAM,CAAC,CAAC,SAAS,CAAC,KAAK,IAAI,EACrD,IAAI,EAAE;IACJ,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC;IAC1C,YAAY,CAAC,EAAE,uBAAuB,GAAG,OAAO,CAAC;IACjD,YAAY,CAAC,EAAE,cAAc,CAAC;CAC/B,GACA,IAAI,CAAC;AAER,iBAAS,QAAQ,CACf,MAAM,SAAS,WAAW,EAC1B,SAAS,SAAS,mBAAmB,CAAC,MAAM,GAAG,QAAQ,CAAC,EAExD,SAAS,EAAE,SAAS,EACpB,EAAE,EAAE,CAAC,CAAC,EAAE,iBAAiB,CAAC,MAAM,GAAG,QAAQ,CAAC,CAAC,SAAS,CAAC,KAAK,IAAI,EAChE,IAAI,EAAE;IACJ,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC,MAAM,CAAC,GAAG,IAAI,GAAG,SAAS,CAAC;IACvD,YAAY,CAAC,EAAE,uBAAuB,GAAG,OAAO,CAAC;IACjD,YAAY,CAAC,EAAE,cAAc,CAAC;CAC/B,GACA,IAAI,CAAC;AA2BR,eAAe,QAAQ,CAAC"}

package/lib/hooks/useEvent.js

@@ -0,0 +1,15 @@
+import { useEffect } from 'react';
+import { normalizeElements } from '../utils';
+function useEvent(eventName, cb, { target = document, eventOptions, dependencies = [] } = {}) {
+    useEffect(() => {
+        const [element] = normalizeElements([target]);
+        if (!element)
+            return;
+        element.addEventListener(eventName, cb, eventOptions);
+        return () => {
+            element.removeEventListener(eventName, cb, eventOptions);
+        };
+    }, [eventName, target, cb, eventOptions, ...dependencies]);
+}
+export default useEvent;
+//# sourceMappingURL=useEvent.js.map

package/lib/hooks/useEvent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useEvent.js","sourceRoot":"","sources":["../../src/hooks/useEvent.ts"],"names":[],"mappings":"AAAA,OAAO,EAA6B,SAAS,EAAE,MAAM,OAAO,CAAC;AAE7D,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAsD7C,SAAS,QAAQ,CACf,SAAoB,EACpB,EAAqD,EACrD,EACE,MAAM,GAAG,QAA6B,EACtC,YAAY,EACZ,YAAY,GAAG,EAAE,KAKf,EAAE;IAEN,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,CAAC,OAAO,CAAC,GAAG,iBAAiB,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;QAC9C,IAAI,CAAC,OAAO;YAAE,OAAO;QAErB,OAAO,CAAC,gBAAgB,CAAC,SAAS,EAAE,EAAmB,EAAE,YAAY,CAAC,CAAC;QAEvE,OAAO,GAAG,EAAE;YACV,OAAO,CAAC,mBAAmB,CAAC,SAAS,EAAE,EAAmB,EAAE,YAAY,CAAC,CAAC;QAC5E,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,EAAE,EAAE,YAAY,EAAE,GAAG,YAAY,CAAC,CAAC,CAAC;AAC7D,CAAC;AAED,eAAe,QAAQ,CAAC","sourcesContent":["import { DependencyList, RefObject, useEffect } from 'react';\n\nimport { normalizeElements } from '../utils';\n\n//  Based on https://github.com/microsoft/TypeScript/issues/33047#issuecomment-704005614\ntype EventMapForTarget<Target extends EventTarget> = Target extends HTMLElement\n  ? HTMLElementEventMap\n  : Target extends SVGElement\n  ? SVGElementEventMap\n  : Target extends Document\n  ? DocumentEventMap\n  : Target extends Window\n  ? WindowEventMap\n  : {\n      [eventType: string]: Event;\n    };\ntype EventNamesForTarget<T extends EventTarget> = keyof EventMapForTarget<T> & string;\n\n/**\n * @example useEvent('keydown', (event) => { do something });\n * @param cb The function that should be executed on keydown keyevent.\n * @param options\n */\nfunction useEvent<Target extends Document, EventName extends EventNamesForTarget<Target>>(\n  eventName: EventName,\n  cb: (e: EventMapForTarget<Target>[EventName]) => void,\n  opts?: {\n    target?: undefined;\n    eventOptions?: AddEventListenerOptions | boolean;\n    dependencies: DependencyList;\n  }\n): void;\n\nfunction useEvent<Target extends EventTarget, EventName extends EventNamesForTarget<Target>>(\n  eventName: EventName,\n  cb: (e: EventMapForTarget<Target>[EventName]) => void,\n  opts: {\n    target: Target | RefObject<Target> | null;\n    eventOptions?: AddEventListenerOptions | boolean;\n    dependencies?: DependencyList;\n  }\n): void;\n\nfunction useEvent<\n  Target extends EventTarget,\n  EventName extends EventNamesForTarget<Target | Document>\n>(\n  eventName: EventName,\n  cb: (e: EventMapForTarget<Target | Document>[EventName]) => void,\n  opts: {\n    target?: Target | RefObject<Target> | null | undefined;\n    eventOptions?: AddEventListenerOptions | boolean;\n    dependencies?: DependencyList;\n  }\n): void;\n\nfunction useEvent<Target extends EventTarget, EventName extends EventNamesForTarget<Target>>(\n  eventName: EventName,\n  cb: (e: EventMapForTarget<Target>[EventName]) => void,\n  {\n    target = document as unknown as Target,\n    eventOptions,\n    dependencies = []\n  }: {\n    target?: Target | RefObject<Target> | null;\n    eventOptions?: AddEventListenerOptions | boolean;\n    dependencies?: DependencyList;\n  } = {}\n) {\n  useEffect(() => {\n    const [element] = normalizeElements([target]);\n    if (!element) return;\n\n    element.addEventListener(eventName, cb as EventListener, eventOptions);\n\n    return () => {\n      element.removeEventListener(eventName, cb as EventListener, eventOptions);\n    };\n  }, [eventName, target, cb, eventOptions, ...dependencies]);\n}\n\nexport default useEvent;\n"]}

package/lib/hooks/useFocusTrap.d.ts

@@ -0,0 +1,10 @@
+import { RefObject, DependencyList } from 'react';
+/**
+ * @example useFocusTrap(elementRef)
+ * @param elementRef ref of the element in which focus needs to be retained
+ * @param addToDocument boolean value to specify if event to be attached to document or to be taken from elementRef, defaults to true
+ * @param dependencies  list of variables or functions that will initiate this hook when they are updated.
+ */
+declare const useFocusTrap: (elementRef: RefObject<HTMLElement>, attachToDocument?: boolean, dependencies?: DependencyList) => void;
+export default useFocusTrap;
+//# sourceMappingURL=useFocusTrap.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useFocusTrap.d.ts","sourceRoot":"","sources":["../../src/hooks/useFocusTrap.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAe,cAAc,EAAE,MAAM,OAAO,CAAC;AAM/D;;;;;GAKG;AACH,QAAA,MAAM,YAAY,eACJ,UAAU,WAAW,CAAC,qBAChB,OAAO,wCAyB1B,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/hooks/useFocusTrap.js

@@ -0,0 +1,30 @@
+import { useCallback } from 'react';
+import { getFocusables } from '../utils';
+import useEvent from './useEvent';
+/**
+ * @example useFocusTrap(elementRef)
+ * @param elementRef ref of the element in which focus needs to be retained
+ * @param addToDocument boolean value to specify if event to be attached to document or to be taken from elementRef, defaults to true
+ * @param dependencies  list of variables or functions that will initiate this hook when they are updated.
+ */
+const useFocusTrap = (elementRef, attachToDocument = true, dependencies = []) => {
+    const onKeydown = useCallback((e) => {
+        if (e.key === 'Tab') {
+            const focusables = getFocusables(elementRef);
+            const { 0: firstFocusable, [focusables.length - 1]: lastFocusable } = focusables;
+            if (!e.shiftKey &&
+                (document.activeElement === elementRef.current || document.activeElement === lastFocusable)) {
+                firstFocusable?.focus();
+                e.preventDefault();
+            }
+            else if (e.shiftKey &&
+                (document.activeElement === elementRef.current || document.activeElement === firstFocusable)) {
+                lastFocusable?.focus();
+                e.preventDefault();
+            }
+        }
+    }, dependencies);
+    useEvent('keydown', onKeydown, { target: attachToDocument ? undefined : elementRef });
+};
+export default useFocusTrap;
+//# sourceMappingURL=useFocusTrap.js.map

package/lib/hooks/useFocusTrap.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFocusTrap.js","sourceRoot":"","sources":["../../src/hooks/useFocusTrap.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,WAAW,EAAkB,MAAM,OAAO,CAAC;AAE/D,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAEzC,OAAO,QAAQ,MAAM,YAAY,CAAC;AAElC;;;;;GAKG;AACH,MAAM,YAAY,GAAG,CACnB,UAAkC,EAClC,mBAA4B,IAAI,EAChC,eAA+B,EAAE,EACjC,EAAE;IACF,MAAM,SAAS,GAAG,WAAW,CAAC,CAAC,CAAgB,EAAE,EAAE;QACjD,IAAI,CAAC,CAAC,GAAG,KAAK,KAAK,EAAE;YACnB,MAAM,UAAU,GAAG,aAAa,CAAC,UAAU,CAAC,CAAC;YAC7C,MAAM,EAAE,CAAC,EAAE,cAAc,EAAE,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,CAAC,EAAE,aAAa,EAAE,GAAG,UAAU,CAAC;YAEjF,IACE,CAAC,CAAC,CAAC,QAAQ;gBACX,CAAC,QAAQ,CAAC,aAAa,KAAK,UAAU,CAAC,OAAO,IAAI,QAAQ,CAAC,aAAa,KAAK,aAAa,CAAC,EAC3F;gBACA,cAAc,EAAE,KAAK,EAAE,CAAC;gBACxB,CAAC,CAAC,cAAc,EAAE,CAAC;aACpB;iBAAM,IACL,CAAC,CAAC,QAAQ;gBACV,CAAC,QAAQ,CAAC,aAAa,KAAK,UAAU,CAAC,OAAO,IAAI,QAAQ,CAAC,aAAa,KAAK,cAAc,CAAC,EAC5F;gBACA,aAAa,EAAE,KAAK,EAAE,CAAC;gBACvB,CAAC,CAAC,cAAc,EAAE,CAAC;aACpB;SACF;IACH,CAAC,EAAE,YAAY,CAAC,CAAC;IAEjB,QAAQ,CAAC,SAAS,EAAE,SAAS,EAAE,EAAE,MAAM,EAAE,gBAAgB,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,UAAU,EAAE,CAAC,CAAC;AACxF,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import { RefObject, useCallback, DependencyList } from 'react';\n\nimport { getFocusables } from '../utils';\n\nimport useEvent from './useEvent';\n\n/**\n * @example useFocusTrap(elementRef)\n * @param elementRef ref of the element in which focus needs to be retained\n * @param addToDocument boolean value to specify if event to be attached to document or to be taken from elementRef, defaults to true\n * @param dependencies  list of variables or functions that will initiate this hook when they are updated.\n */\nconst useFocusTrap = (\n  elementRef: RefObject<HTMLElement>,\n  attachToDocument: boolean = true,\n  dependencies: DependencyList = []\n) => {\n  const onKeydown = useCallback((e: KeyboardEvent) => {\n    if (e.key === 'Tab') {\n      const focusables = getFocusables(elementRef);\n      const { 0: firstFocusable, [focusables.length - 1]: lastFocusable } = focusables;\n\n      if (\n        !e.shiftKey &&\n        (document.activeElement === elementRef.current || document.activeElement === lastFocusable)\n      ) {\n        firstFocusable?.focus();\n        e.preventDefault();\n      } else if (\n        e.shiftKey &&\n        (document.activeElement === elementRef.current || document.activeElement === firstFocusable)\n      ) {\n        lastFocusable?.focus();\n        e.preventDefault();\n      }\n    }\n  }, dependencies);\n\n  useEvent('keydown', onKeydown, { target: attachToDocument ? undefined : elementRef });\n};\n\nexport default useFocusTrap;\n"]}

package/lib/hooks/useI18n.d.ts

@@ -8,6 +8,8 @@ declare const useI18n: () => import("../i18n/translate").TranslationFunction<Rea
     status: string;
     additional_info: string;
     search_placeholder_default: string;
+    description: string;
+    all: string;
     remove: string;
     follow: string;
     unfollow: string;
@@ -16,6 +18,7 @@ declare const useI18n: () => import("../i18n/translate").TranslationFunction<Rea
     try_again: string;
     update: string;
     submit: string;
+    select: string;
     edit: string;
     preview: string;
     delete: string;
@@ -28,6 +31,12 @@ declare const useI18n: () => import("../i18n/translate").TranslationFunction<Rea
     use: string;
     undo: string;
     redo: string;
+    filter: string;
+    sort: string;
+    group: string;
+    filter_by: string;
+    sort_by: string;
+    group_by: string;
     view_all: string;
     view_less: string;
     show_more: string;
@@ -36,6 +45,8 @@ declare const useI18n: () => import("../i18n/translate").TranslationFunction<Rea
     link_open_in_tab_text: string;
     edit_details: string;
     add_emoji: string;
+    create_new: string;
+    add_condition: string;
     close_noun: string;
     view_all_noun: string;
     view_less_noun: string;
@@ -56,6 +67,14 @@ declare const useI18n: () => import("../i18n/translate").TranslationFunction<Rea
     unknown_error: string;
     image_load_error: string;
     selected: string;
+    selected_count: {
+        zero: string;
+        one: string;
+        two: string;
+        few: string;
+        many: string;
+        other: string;
+    };
     day_label_a11y: string;
     day_placeholder: string;
     quarter_label_a11y: string;
@@ -90,6 +109,7 @@ declare const useI18n: () => import("../i18n/translate").TranslationFunction<Rea
     date_quarter_q2: string;
     date_quarter_q3: string;
     date_quarter_q4: string;
+    time_unit: string;
     attachments_count: {
         zero: string;
         one: string;
@@ -120,6 +140,7 @@ declare const useI18n: () => import("../i18n/translate").TranslationFunction<Rea
     x_of_y: string;
     preview_link_arrow_navigation: string;
     go_to_main_content: string;
+    main_content: string;
     app_shell_create: string;
     app_shell_open_nav: string;
     combobox_open_close: string;
@@ -142,8 +163,9 @@ declare const useI18n: () => import("../i18n/translate").TranslationFunction<Rea
     close_time_button_a11y: string;
     picker_next_month: string;
     picker_prev_month: string;
-    picker_jump_to_month: string;
+    picker_jump_to_month_and_year: string;
     calendar_assist: string;
+    calendar: string;
     boolean_display_true_label: string;
     boolean_display_false_label: string;
     measured_in: string;
@@ -157,6 +179,10 @@ declare const useI18n: () => import("../i18n/translate").TranslationFunction<Rea
     location_input_placeholder: string;
     location_not_found_text: string;
     allow_location_permissions_text: string;
+    advanced_search: string;
+    select_search_filter: string;
+    recent_searches: string;
+    clear_search: string;
     utilities_summary: string;
     expand_summary_panel: string;
     collapse_summary_panel: string;
@@ -180,6 +206,13 @@ declare const useI18n: () => import("../i18n/translate").TranslationFunction<Rea
     };
     edit_tags: string;
     tags: string;
+    timeline_toolbar_sort_descending: string;
+    timeline_toolbar_sort_ascending: string;
+    timeline_toolbar_group_date: string;
+    timeline_toolbar_group_monthyear: string;
+    timeline_toolbar_group_quarteryear: string;
+    timeline_toolbar_group_year: string;
+    timeline_toolbar_group_none: string;
     app_announcement_dismiss_button_label_a11y: string;
     app_announcement_details_list_header: string;
     app_announcement_whats_new_button_label: string;
@@ -195,9 +228,10 @@ declare const useI18n: () => import("../i18n/translate").TranslationFunction<Rea
     rte_indent: string;
     rte_unindent: string;
     rte_table: string;
-    rte_anchor: string;
+    rte_link: string;
     rte_image: string;
     rte_invalid_html: string;
+    rte_insert_field: string;
     rte_invalid_url: string;
     rte_change_text_format: string;
     rte_toggle_unordered_list: string;
@@ -205,6 +239,14 @@ declare const useI18n: () => import("../i18n/translate").TranslationFunction<Rea
     rte_unindent_selection: string;
     rte_toolbar_instructions: string;
     rte_text_formatting_toolbar: string;
+    rte_image_description_info: string;
+    rte_image_custom_size: string;
+    rte_width_in_pixels: string;
+    rte_height_in_pixels: string;
+    rte_image_settings: string;
+    rte_image_key_command: string;
+    expand_forwarded_message: string;
+    collapse_forwarded_message: string;
     feed_new_post: string;
     feed_cancel_conversation: string;
     feed_context: string;
@@ -243,6 +285,23 @@ declare const useI18n: () => import("../i18n/translate").TranslationFunction<Rea
     feed_post_removed: string;
     feed_reply_removed: string;
     showing_num_of_num: string;
+    feed_new_post_added: {
+        zero: string;
+        one: string;
+        two: string;
+        few: string;
+        many: string;
+        other: string;
+    };
+    new_item_added: {
+        zero: string;
+        one: string;
+        two: string;
+        few: string;
+        many: string;
+        other: string;
+    };
+    loading_post: string;
     scroll_to_latest_message: string;
     scroll_to_unread_messages: string;
     suggested_replies_current_of_total: string;
@@ -250,6 +309,14 @@ declare const useI18n: () => import("../i18n/translate").TranslationFunction<Rea
     next_suggested_reply: string;
     prev_suggested_reply: string;
     dismiss_suggested_replies: string;
+    unique_entities: {
+        zero: string;
+        one: string;
+        two: string;
+        few: string;
+        many: string;
+        other: string;
+    };
     more_count: string;
     empty_search: string;
     new_messages: string;
@@ -278,6 +345,7 @@ declare const useI18n: () => import("../i18n/translate").TranslationFunction<Rea
     email_add_attachment: string;
     email_disable_attachment: string;
     email_remove_attachment: string;
+    loading_email: string;
     article_list_label_a11y: string;
     article_list_filter_label_a11y: string;
     article_list_header_submit_label: string;
@@ -361,7 +429,8 @@ declare const useI18n: () => import("../i18n/translate").TranslationFunction<Rea
     condition_builder_basic_mode_button_label: string;
     condition_builder_condition_select_info_default: string;
     condition_builder_possible_values_label: string;
-    condition_builder_selection_text_default: string;
+    condition_builder_multi_selection_text_default: string;
+    condition_builder_single_selection_text_default: string;
     condition_builder_submit_button_label: string;
     condition_builder_add_button_label: string;
     condition_builder_remove_button_label: string;
@@ -601,7 +670,17 @@ declare const useI18n: () => import("../i18n/translate").TranslationFunction<Rea
     add_alternate_stage: string;
     add_node: string;
     search_nodes: string;
+    delete_decision_step: string;
+    delete_decision_step_title: string;
+    delete_decision_step_outcome: string;
+    delete_all_outcomes: string;
     zoom_level: string;
+    close_configuration_panel: string;
+    clear_object_summary: string;
+    app_header_notifications_empty: string;
+    app_header_notifications_loading: string;
+    open_app_header_notifications: string;
+    open_app_header_drawer: string;
 }>>;
 export default useI18n;
 //# sourceMappingURL=useI18n.d.ts.map

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/useInputFormatter.d.ts

@@ -0,0 +1,12 @@
+import { RefObject } from 'react';
+/**
+ * Formats the raw value using given formatter and handles the caret position.
+ * @param ref reference to input element.
+ * @param rawValue value to be formatted.
+ * @param formatter formatter function accepting partial input and returning partially formatted value.
+ * @param acceptableCharacters string containing all the characters that may appear in the value to format. RegExp shorthands are also accepted. Only numbers are accepted by default.
+ * @returns formatted value that should be passed to the input component.
+ */
+declare const useInputFormatter: (ref: RefObject<HTMLInputElement>, rawValue: string, formatter: (value: string) => string, acceptableCharacters?: string) => string;
+export default useInputFormatter;
+//# sourceMappingURL=useInputFormatter.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useInputFormatter.d.ts","sourceRoot":"","sources":["../../src/hooks/useInputFormatter.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAqB,MAAM,OAAO,CAAC;AAIrD;;;;;;;GAOG;AACH,QAAA,MAAM,iBAAiB,QAChB,UAAU,gBAAgB,CAAC,YACtB,MAAM,qBACG,MAAM,KAAK,MAAM,yBACd,MAAM,WAgG7B,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/lib/hooks/useInputFormatter.js

@@ -0,0 +1,84 @@
+import { useRef, useEffect } from 'react';
+import useEvent from './useEvent';
+/**
+ * Formats the raw value using given formatter and handles the caret position.
+ * @param ref reference to input element.
+ * @param rawValue value to be formatted.
+ * @param formatter formatter function accepting partial input and returning partially formatted value.
+ * @param acceptableCharacters string containing all the characters that may appear in the value to format. RegExp shorthands are also accepted. Only numbers are accepted by default.
+ * @returns formatted value that should be passed to the input component.
+ */
+const useInputFormatter = (ref, rawValue, formatter, acceptableCharacters = '\\p{N}') => {
+    // synthetic caret position in unformatted value
+    const rawValueCaretPositionRef = useRef();
+    useEvent('keydown', e => {
+        const inputEl = ref.current;
+        if (inputEl) {
+            const caretPositionStart = inputEl.selectionStart ?? 0;
+            const caretPositionEnd = inputEl.selectionEnd ?? 0;
+            const currentValue = inputEl.value;
+            if (caretPositionStart !== caretPositionEnd && ['Backspace', 'Delete'].includes(e.key)) {
+                // if selection contains only formatting characters, move the caret to the beginning of the selection
+                const selectedText = currentValue.slice(caretPositionStart, caretPositionEnd);
+                if (!new RegExp(`[${acceptableCharacters}]`, 'gu').test(selectedText)) {
+                    inputEl.setSelectionRange(caretPositionStart, caretPositionStart);
+                    e.preventDefault();
+                }
+                return;
+            }
+            if (e.key === 'Backspace' &&
+                new RegExp(`[^${acceptableCharacters}]`, 'gu').test(currentValue.charAt(caretPositionStart - 1))) {
+                const lastNonFormatChar = new RegExp(`[${acceptableCharacters}](?=[^${acceptableCharacters}]*$)`, 'gu');
+                // match last non-formatting character if it can be found in the preceding slice
+                if (lastNonFormatChar.test(currentValue.slice(0, caretPositionStart))) {
+                    // move the caret after matched character to get it removed
+                    inputEl.setSelectionRange(lastNonFormatChar.lastIndex, lastNonFormatChar.lastIndex);
+                }
+                else {
+                    e.preventDefault();
+                }
+            }
+            if (e.key === 'Delete' &&
+                new RegExp(`[^${acceptableCharacters}]`, 'gu').test(currentValue.charAt(caretPositionEnd))) {
+                const firstNonFormatChar = new RegExp(`[${acceptableCharacters}]`, 'gu');
+                firstNonFormatChar.lastIndex = caretPositionEnd;
+                // find first non-formatting character in the value starting from the caret position
+                if (firstNonFormatChar.test(currentValue)) {
+                    // move the caret before matched character to get it removed
+                    inputEl.setSelectionRange(firstNonFormatChar.lastIndex - 1, firstNonFormatChar.lastIndex - 1);
+                }
+                else {
+                    e.preventDefault();
+                }
+            }
+        }
+    }, { target: ref, dependencies: [acceptableCharacters] });
+    useEvent('input', () => {
+        const inputEl = ref.current;
+        if (inputEl) {
+            // calculate new synthetic caret position in the unformatted value
+            const currentCaretPosition = inputEl.selectionStart ?? 0;
+            rawValueCaretPositionRef.current = inputEl.value
+                .slice(0, currentCaretPosition)
+                .replace(new RegExp(`[^${acceptableCharacters}]`, 'gu'), '').length;
+        }
+    }, { target: ref, dependencies: [acceptableCharacters] });
+    useEffect(() => {
+        const inputEl = ref.current;
+        if (inputEl && rawValueCaretPositionRef.current !== undefined) {
+            // create regexp with every raw value character wrapped in possible formatting characters
+            const rawValueRegExpSource = `[^${acceptableCharacters}]*${rawValue
+                .slice(0, rawValueCaretPositionRef.current)
+                .split('')
+                .join(`[^${acceptableCharacters}]*`)}`;
+            const match = inputEl.value.match(new RegExp(rawValueRegExpSource, 'gu'));
+            if (match) {
+                // if it matches move the real caret to the corresponding index in the raw value
+                inputEl.setSelectionRange(match[0].length, match[0].length);
+            }
+        }
+    }, [rawValue, acceptableCharacters]);
+    return formatter(rawValue);
+};
+export default useInputFormatter;
+//# sourceMappingURL=useInputFormatter.js.map

package/lib/hooks/useInputFormatter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useInputFormatter.js","sourceRoot":"","sources":["../../src/hooks/useInputFormatter.ts"],"names":[],"mappings":"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","sourcesContent":["import { RefObject, useRef, useEffect } from 'react';\n\nimport useEvent from './useEvent';\n\n/**\n * Formats the raw value using given formatter and handles the caret position.\n * @param ref reference to input element.\n * @param rawValue value to be formatted.\n * @param formatter formatter function accepting partial input and returning partially formatted value.\n * @param acceptableCharacters string containing all the characters that may appear in the value to format. RegExp shorthands are also accepted. Only numbers are accepted by default.\n * @returns formatted value that should be passed to the input component.\n */\nconst useInputFormatter = (\n  ref: RefObject<HTMLInputElement>,\n  rawValue: string,\n  formatter: (value: string) => string,\n  acceptableCharacters: string = '\\\\p{N}'\n) => {\n  // synthetic caret position in unformatted value\n  const rawValueCaretPositionRef = useRef<number>();\n\n  useEvent(\n    'keydown',\n    e => {\n      const inputEl = ref.current;\n      if (inputEl) {\n        const caretPositionStart = inputEl.selectionStart ?? 0;\n        const caretPositionEnd = inputEl.selectionEnd ?? 0;\n        const currentValue = inputEl.value;\n        if (caretPositionStart !== caretPositionEnd && ['Backspace', 'Delete'].includes(e.key)) {\n          // if selection contains only formatting characters, move the caret to the beginning of the selection\n          const selectedText = currentValue.slice(caretPositionStart, caretPositionEnd);\n          if (!new RegExp(`[${acceptableCharacters}]`, 'gu').test(selectedText)) {\n            inputEl.setSelectionRange(caretPositionStart, caretPositionStart);\n            e.preventDefault();\n          }\n          return;\n        }\n\n        if (\n          e.key === 'Backspace' &&\n          new RegExp(`[^${acceptableCharacters}]`, 'gu').test(\n            currentValue.charAt(caretPositionStart - 1)\n          )\n        ) {\n          const lastNonFormatChar = new RegExp(\n            `[${acceptableCharacters}](?=[^${acceptableCharacters}]*$)`,\n            'gu'\n          );\n          // match last non-formatting character if it can be found in the preceding slice\n          if (lastNonFormatChar.test(currentValue.slice(0, caretPositionStart))) {\n            // move the caret after matched character to get it removed\n            inputEl.setSelectionRange(lastNonFormatChar.lastIndex, lastNonFormatChar.lastIndex);\n          } else {\n            e.preventDefault();\n          }\n        }\n\n        if (\n          e.key === 'Delete' &&\n          new RegExp(`[^${acceptableCharacters}]`, 'gu').test(currentValue.charAt(caretPositionEnd))\n        ) {\n          const firstNonFormatChar = new RegExp(`[${acceptableCharacters}]`, 'gu');\n          firstNonFormatChar.lastIndex = caretPositionEnd;\n          // find first non-formatting character in the value starting from the caret position\n          if (firstNonFormatChar.test(currentValue)) {\n            // move the caret before matched character to get it removed\n            inputEl.setSelectionRange(\n              firstNonFormatChar.lastIndex - 1,\n              firstNonFormatChar.lastIndex - 1\n            );\n          } else {\n            e.preventDefault();\n          }\n        }\n      }\n    },\n    { target: ref, dependencies: [acceptableCharacters] }\n  );\n\n  useEvent(\n    'input',\n    () => {\n      const inputEl = ref.current;\n      if (inputEl) {\n        // calculate new synthetic caret position in the unformatted value\n        const currentCaretPosition = inputEl.selectionStart ?? 0;\n        rawValueCaretPositionRef.current = inputEl.value\n          .slice(0, currentCaretPosition)\n          .replace(new RegExp(`[^${acceptableCharacters}]`, 'gu'), '').length;\n      }\n    },\n    { target: ref, dependencies: [acceptableCharacters] }\n  );\n\n  useEffect(() => {\n    const inputEl = ref.current;\n    if (inputEl && rawValueCaretPositionRef.current !== undefined) {\n      // create regexp with every raw value character wrapped in possible formatting characters\n      const rawValueRegExpSource = `[^${acceptableCharacters}]*${rawValue\n        .slice(0, rawValueCaretPositionRef.current)\n        .split('')\n        .join(`[^${acceptableCharacters}]*`)}`;\n      const match = inputEl.value.match(new RegExp(rawValueRegExpSource, 'gu'));\n      if (match) {\n        // if it matches move the real caret to the corresponding index in the raw value\n        inputEl.setSelectionRange(match[0].length, match[0].length);\n      }\n    }\n  }, [rawValue, acceptableCharacters]);\n\n  return formatter(rawValue);\n};\n\nexport default useInputFormatter;\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"useItemIntersection.d.ts","sourceRoot":"","sources":["../../src/hooks/useItemIntersection.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAa,MAAM,OAAO,CAAC;AAE7C;;;;;;;GAOG;AAEH,QAAA,MAAM,mBAAmB,iBACT,UAAU,WAAW,CAAC,UAC5B,MAAM,MACV,MAAM,IAAI,gBACA,MAAM,SA6BrB,CAAC;AAEF,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"useItemIntersection.d.ts","sourceRoot":"","sources":["../../src/hooks/useItemIntersection.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAa,MAAM,OAAO,CAAC;AAE7C;;;;;;;GAOG;AAEH,QAAA,MAAM,mBAAmB,iBACT,UAAU,WAAW,CAAC,UAC5B,MAAM,MACV,MAAM,IAAI,gBACA,MAAM,SA8BrB,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/lib/hooks/useItemIntersection.js

@@ -9,28 +9,26 @@ import { useEffect } from 'react';
  */
 const useItemIntersection = (containerRef, offset, cb, itemSelector) => {
     useEffect(() => {
-        if (containerRef.current) {
-            let item = null;
-            if (offset > 0) {
-                const items = containerRef.current.querySelectorAll(itemSelector);
-                if (items.length > offset) {
-                    item = items[offset];
-                }
-            }
-            if (item) {
-                const intersectionObserver = new IntersectionObserver((entries) => {
-                    if (entries[0].isIntersecting) {
-                        cb();
-                    }
-                }, {
-                    root: containerRef.current
-                });
-                intersectionObserver.observe(item);
-                return () => {
-                    intersectionObserver.disconnect();
-                };
+        let item = null;
+        if (offset > 0) {
+            const items = (containerRef.current === null ? document.body : containerRef.current).querySelectorAll(itemSelector);
+            if (items.length > offset) {
+                item = items[offset];
             }
         }
+        if (item) {
+            const intersectionObserver = new IntersectionObserver((entries) => {
+                if (entries[0].isIntersecting) {
+                    cb();
+                }
+            }, {
+                root: containerRef.current
+            });
+            intersectionObserver.observe(item);
+            return () => {
+                intersectionObserver.disconnect();
+            };
+        }
     }, [cb, containerRef.current, offset]);
 };
 export default useItemIntersection;