@pega/cosmos-react-core 5.0.0-dev.4.9 → 5.0.0-dev.6.0

package/lib/hooks/useArrows.js

@@ -0,0 +1,109 @@
+import { useEffect, useCallback } from 'react';
+import { documentIsAvailable } from '../utils';
+const focusable = `
+  a[href],
+  button:enabled,
+  input[type='checkbox']:enabled,
+  input[type='radio']:enabled
+`;
+/**
+ * @example useArrows(ref, { cycle, selector });
+ * @param ref - A reference to the element that will be navigated through. [React RefObject](https://reactjs.org/docs/refs-and-the-dom.html)
+ */
+const useArrows = (ref, { 
+/** If true, the down or up arrow key will navigate to the first or last element if the element currently focused is the last or first index of the selected elements. */
+cycle = true, 
+/** A query selector that will determine which elements to cycle through with the arrow keys. The selector will be used in conjunction with [querySelectorAll](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll#selectors). */
+selector = focusable, 
+/** Which keys are used to navigate through the list */
+dir = 'up-down', allowTabFocus = true, updateTabIndex = true } = {}, 
+/** Pass this prop in the internal dependencies when list is dynamic */
+dependencies = []) => {
+    const [NextKey, PrevKey] = dir === 'up-down' ? ['ArrowDown', 'ArrowUp'] : ['ArrowRight', 'ArrowLeft'];
+    const setTabIndexes = useCallback((el) => {
+        // don't set tabindex -1 for first element, or an element with a checked input inside of it to be able to focus it
+        // 0 second timeout added because DOM needs to be up to date after list is updated before running query
+        setTimeout(() => {
+            const focusableElements = Array.from(el.querySelectorAll(selector));
+            if (focusableElements.length > 0) {
+                if (allowTabFocus)
+                    focusableElements[0].tabIndex = 0;
+                focusableElements.slice(1).forEach(item => {
+                    if (item instanceof HTMLElement) {
+                        const checked = item.checked;
+                        if (!checked)
+                            item.tabIndex = -1;
+                    }
+                });
+            }
+        }, 0);
+    }, [selector, ...dependencies]);
+    const listener = useCallback((e) => {
+        const el = ref.current;
+        if (!el)
+            return;
+        if (['Home', 'End', NextKey, PrevKey].includes(e.key))
+            e.preventDefault();
+        if (!documentIsAvailable)
+            return;
+        const items = Array.from(el.querySelectorAll(selector)).filter((item) => item instanceof HTMLElement);
+        if (!items.length)
+            return;
+        const rootNode = el.getRootNode();
+        if (!(rootNode instanceof Document) && !(rootNode instanceof ShadowRoot))
+            return;
+        const focusIdx = items.indexOf(rootNode.activeElement);
+        const lastIdx = items.length - 1;
+        let newFocusIdx;
+        if (e.key === 'Home' || (e.key === NextKey && focusIdx === -1)) {
+            newFocusIdx = 0;
+        }
+        else if (e.key === 'End' || (e.key === PrevKey && focusIdx === -1)) {
+            newFocusIdx = lastIdx;
+        }
+        else if (e.key === 'Enter') {
+            if (updateTabIndex) {
+                setTabIndexes(el);
+            }
+            return;
+        }
+        else if (e.key === NextKey) {
+            if (focusIdx === lastIdx) {
+                if (!cycle)
+                    return;
+                newFocusIdx = 0;
+            }
+            else {
+                newFocusIdx = focusIdx + 1;
+            }
+        }
+        else if (e.key === PrevKey) {
+            if (focusIdx === 0) {
+                if (!cycle)
+                    return;
+                newFocusIdx = lastIdx;
+            }
+            else {
+                newFocusIdx = focusIdx - 1;
+            }
+        }
+        else {
+            return;
+        }
+        items[newFocusIdx].focus();
+    }, [ref.current, cycle, selector, ...dependencies]);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        if (updateTabIndex) {
+            setTabIndexes(el);
+        }
+        el.addEventListener('keydown', listener);
+        return () => {
+            el.removeEventListener('keydown', listener);
+        };
+    }, [ref.current, selector, listener, ...dependencies]);
+};
+export default useArrows;
+//# sourceMappingURL=useArrows.js.map

package/lib/hooks/useArrows.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useArrows.js","sourceRoot":"","sources":["../../src/hooks/useArrows.ts"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useCallback } from 'react';\nimport type { RefObject, DependencyList } from 'react';\n\nimport { documentIsAvailable } from '../utils';\n\nconst focusable = `\n  a[href],\n  button:enabled,\n  input[type='checkbox']:enabled,\n  input[type='radio']:enabled\n`;\n\n/**\n * @example useArrows(ref, { cycle, selector });\n * @param ref - A reference to the element that will be navigated through. [React RefObject](https://reactjs.org/docs/refs-and-the-dom.html)\n */\nconst useArrows = (\n  ref: RefObject<HTMLElement>,\n  {\n    /** If true, the down or up arrow key will navigate to the first or last element if the element currently focused is the last or first index of the selected elements. */\n    cycle = true,\n    /** A query selector that will determine which elements to cycle through with the arrow keys. The selector will be used in conjunction with [querySelectorAll](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll#selectors). */\n    selector = focusable,\n    /** Which keys are used to navigate through the list */\n    dir = 'up-down',\n    allowTabFocus = true,\n    updateTabIndex = true\n  }: {\n    cycle?: boolean;\n    selector?: string;\n    dir?: 'up-down' | 'left-right';\n    allowTabFocus?: boolean;\n    updateTabIndex?: boolean;\n  } = {},\n  /** Pass this prop in the internal dependencies when list is dynamic */\n  dependencies: DependencyList = []\n) => {\n  const [NextKey, PrevKey] =\n    dir === 'up-down' ? ['ArrowDown', 'ArrowUp'] : ['ArrowRight', 'ArrowLeft'];\n\n  const setTabIndexes = useCallback(\n    (el: HTMLElement) => {\n      // don't set tabindex -1 for first element, or an element with a checked input inside of it to be able to focus it\n\n      // 0 second timeout added because DOM needs to be up to date after list is updated before running query\n      setTimeout(() => {\n        const focusableElements = Array.from(el.querySelectorAll(selector));\n\n        if (focusableElements.length > 0) {\n          if (allowTabFocus) (focusableElements[0] as HTMLElement).tabIndex = 0;\n          focusableElements.slice(1).forEach(item => {\n            if (item instanceof HTMLElement) {\n              const checked = (item as HTMLInputElement).checked;\n              if (!checked) item.tabIndex = -1;\n            }\n          });\n        }\n      }, 0);\n    },\n    [selector, ...dependencies]\n  );\n\n  const listener = useCallback(\n    (e: KeyboardEvent) => {\n      const el = ref.current;\n      if (!el) return;\n      if (['Home', 'End', NextKey, PrevKey].includes(e.key)) e.preventDefault();\n\n      if (!documentIsAvailable) return;\n\n      const items = Array.from(el.querySelectorAll(selector)).filter(\n        (item): item is HTMLElement => item instanceof HTMLElement\n      );\n\n      if (!items.length) return;\n\n      const rootNode = el.getRootNode();\n\n      if (!(rootNode instanceof Document) && !(rootNode instanceof ShadowRoot)) return;\n\n      const focusIdx = items.indexOf(rootNode.activeElement as HTMLElement);\n      const lastIdx = items.length - 1;\n      let newFocusIdx;\n\n      if (e.key === 'Home' || (e.key === NextKey && focusIdx === -1)) {\n        newFocusIdx = 0;\n      } else if (e.key === 'End' || (e.key === PrevKey && focusIdx === -1)) {\n        newFocusIdx = lastIdx;\n      } else if (e.key === 'Enter') {\n        if (updateTabIndex) {\n          setTabIndexes(el);\n        }\n        return;\n      } else if (e.key === NextKey) {\n        if (focusIdx === lastIdx) {\n          if (!cycle) return;\n          newFocusIdx = 0;\n        } else {\n          newFocusIdx = focusIdx + 1;\n        }\n      } else if (e.key === PrevKey) {\n        if (focusIdx === 0) {\n          if (!cycle) return;\n          newFocusIdx = lastIdx;\n        } else {\n          newFocusIdx = focusIdx - 1;\n        }\n      } else {\n        return;\n      }\n\n      items[newFocusIdx].focus();\n    },\n    [ref.current, cycle, selector, ...dependencies]\n  );\n\n  useEffect(() => {\n    const el = ref.current;\n    if (!el) return;\n    if (updateTabIndex) {\n      setTabIndexes(el);\n    }\n    el.addEventListener('keydown', listener);\n\n    return () => {\n      el.removeEventListener('keydown', listener);\n    };\n  }, [ref.current, selector, listener, ...dependencies]);\n};\n\nexport default useArrows;\n"]}

package/lib/hooks/useAutoResize.d.ts

@@ -0,0 +1,12 @@
+import type { MutableRefObject } from 'react';
+/**
+ * @example const [ref, resizeFunction] = useAutoResize();
+ * maxHeight should be provided in pixels without units
+ * minHeight should be provided in pixels without units
+ * @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)
+ *          * resizeFunction:: The function to call to automatically resize the element.
+ * element refers to auto resizable element
+ */
+declare const useAutoResize: <T extends HTMLElement = HTMLElement>(maxHeight?: number, minHeightProp?: number) => [MutableRefObject<T | null>, () => void];
+export default useAutoResize;
+//# sourceMappingURL=useAutoResize.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useAutoResize.d.ts","sourceRoot":"","sources":["../../src/hooks/useAutoResize.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,OAAO,CAAC;AAI9C;;;;;;;GAOG;AACH,QAAA,MAAM,aAAa,oDACL,MAAM,kBACF,MAAM,wCACc,IAAI,CA+CzC,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/hooks/useAutoResize.js

@@ -0,0 +1,55 @@
+import { useRef, useState } from 'react';
+import { debounce } from '../utils';
+/**
+ * @example const [ref, resizeFunction] = useAutoResize();
+ * maxHeight should be provided in pixels without units
+ * minHeight should be provided in pixels without units
+ * @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)
+ *          * resizeFunction:: The function to call to automatically resize the element.
+ * element refers to auto resizable element
+ */
+const useAutoResize = (maxHeight, minHeightProp) => {
+    const element = useRef(null);
+    const [minHeight, setMinHeight] = useState(minHeightProp || 0);
+    const autoResize = () => {
+        let scrollHeightElement = element.current;
+        let iframe;
+        if (element.current && element.current instanceof HTMLIFrameElement) {
+            iframe = element.current;
+            scrollHeightElement =
+                element.current.contentDocument?.querySelector('body') ?? element.current;
+        }
+        if (element.current) {
+            let newMinHeight = minHeight;
+            if (!minHeight) {
+                newMinHeight =
+                    scrollHeightElement.scrollHeight +
+                        (scrollHeightElement.offsetHeight - scrollHeightElement.clientHeight);
+                setMinHeight(newMinHeight);
+            }
+            // Reset the heights to the base height so there is an overflow / or none to calculate the new height
+            scrollHeightElement.style.height = `${newMinHeight}px`;
+            if (maxHeight) {
+                scrollHeightElement.style.overflowY =
+                    scrollHeightElement.scrollHeight > maxHeight ? 'auto' : 'hidden';
+                const height = `${Math.min(scrollHeightElement.scrollHeight +
+                    (scrollHeightElement.offsetHeight - scrollHeightElement.clientHeight), maxHeight)}px`;
+                scrollHeightElement.style.height = height;
+                if (iframe)
+                    iframe.style.height = height;
+            }
+            else {
+                scrollHeightElement.style.overflowY = 'hidden';
+                const height = scrollHeightElement.scrollHeight +
+                    (scrollHeightElement.offsetHeight - scrollHeightElement.clientHeight);
+                scrollHeightElement.style.height = `${height}px`;
+                if (iframe)
+                    iframe.style.height = `${height}px`;
+            }
+        }
+    };
+    const debouncedAutoResize = debounce(autoResize, 100);
+    return [element, debouncedAutoResize];
+};
+export default useAutoResize;
+//# sourceMappingURL=useAutoResize.js.map

package/lib/hooks/useAutoResize.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAutoResize.js","sourceRoot":"","sources":["../../src/hooks/useAutoResize.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGzC,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;oBACV,mBAAmB,CAAC,YAAY;wBAChC,CAAC,mBAAmB,CAAC,YAAY,GAAG,mBAAmB,CAAC,YAAY,CAAC,CAAC;gBACxE,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,CACxB,mBAAmB,CAAC,YAAY;oBAC9B,CAAC,mBAAmB,CAAC,YAAY,GAAG,mBAAmB,CAAC,YAAY,CAAC,EACvE,SAAS,CACV,IAAI,CAAC;gBACN,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,SAAS,GAAG,QAAQ,CAAC;gBAC/C,MAAM,MAAM,GACV,mBAAmB,CAAC,YAAY;oBAChC,CAAC,mBAAmB,CAAC,YAAY,GAAG,mBAAmB,CAAC,YAAY,CAAC,CAAC;gBACxE,mBAAmB,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,MAAM,IAAI,CAAC;gBACjD,IAAI,MAAM;oBAAE,MAAM,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,MAAM,IAAI,CAAC;aACjD;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 } from 'react';\nimport type { 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 =\n          scrollHeightElement.scrollHeight +\n          (scrollHeightElement.offsetHeight - scrollHeightElement.clientHeight);\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(\n          scrollHeightElement.scrollHeight +\n            (scrollHeightElement.offsetHeight - scrollHeightElement.clientHeight),\n          maxHeight\n        )}px`;\n        scrollHeightElement.style.height = height;\n        if (iframe) iframe.style.height = height;\n      } else {\n        scrollHeightElement.style.overflowY = 'hidden';\n        const height =\n          scrollHeightElement.scrollHeight +\n          (scrollHeightElement.offsetHeight - scrollHeightElement.clientHeight);\n        scrollHeightElement.style.height = `${height}px`;\n        if (iframe) iframe.style.height = `${height}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/useBreakpoint.d.ts

@@ -0,0 +1,14 @@
+import type { RefObject } from 'react';
+/**
+ * @example const breakpointActive = useBreakpoint(breakpoint);
+ * @param breakpoint The string indicator for the breakpoint that should be checked for validity.
+ * @param options
+ * @returns breakpointActive:: A boolean indicating if the given breakpoint is active or not. If false, the breakpoint is too big for the screen size.
+ */
+declare const useBreakpoint: (breakpoint: 'xs' | 'sm' | 'md' | 'lg' | 'xl', { breakpointRef, defaultValue, themeProp }?: {
+    breakpointRef?: RefObject<Element> | undefined;
+    defaultValue?: boolean | undefined;
+    themeProp?: "breakpoints" | "content-width" | undefined;
+}) => boolean;
+export default useBreakpoint;
+//# sourceMappingURL=useBreakpoint.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useBreakpoint.d.ts","sourceRoot":"","sources":["../../src/hooks/useBreakpoint.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAYvC;;;;;GAKG;AACH,QAAA,MAAM,aAAa,eACL,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI;oBAM1B,UAAU,OAAO,CAAC,GAAG,SAAS;;;aAyEjD,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/hooks/useBreakpoint.js

@@ -0,0 +1,70 @@
+import { useState, useLayoutEffect, useCallback } from 'react';
+import { windowIsAvailable, debounce } from '../utils';
+import useChToPxConversionFactor from './useChToPxConversionFactor';
+import useTheme from './useTheme';
+// We should be able to safely capture once as the computed root font size is unlikely to change during normal runtime.
+const rootFontSize = windowIsAvailable
+    ? window.getComputedStyle(document.documentElement).fontSize
+    : '16px';
+/**
+ * @example const breakpointActive = useBreakpoint(breakpoint);
+ * @param breakpoint The string indicator for the breakpoint that should be checked for validity.
+ * @param options
+ * @returns breakpointActive:: A boolean indicating if the given breakpoint is active or not. If false, the breakpoint is too big for the screen size.
+ */
+const useBreakpoint = (breakpoint, { breakpointRef, defaultValue = false, themeProp = 'breakpoints' } = {}) => {
+    const { base: { breakpoints, 'content-width': contentWidth } } = useTheme();
+    const breakpointVal = themeProp === 'content-width' ? contentWidth[breakpoint] : breakpoints[breakpoint];
+    const [matches, setMatches] = useState(windowIsAvailable ? window.matchMedia(`(min-width: ${breakpointVal})`).matches : !!defaultValue);
+    const chToPxConversionFactor = useChToPxConversionFactor();
+    const onResize = useCallback((e) => {
+        setMatches(e.matches);
+    }, []);
+    useLayoutEffect(() => {
+        // Breakpoint handling for contained elements
+        if (breakpointRef && breakpointRef.current) {
+            const debouncedResize = debounce((entries) => {
+                const matchesBreakpoint = entries.some(({ target, contentRect }) => {
+                    if (target !== breakpointRef.current)
+                        return;
+                    const multiplier = themeProp === 'breakpoints' ? parseFloat(rootFontSize) : chToPxConversionFactor;
+                    return contentRect.width >= parseFloat(breakpointVal) * multiplier;
+                });
+                setMatches(matchesBreakpoint);
+            }, 100);
+            const observer = new ResizeObserver(debouncedResize);
+            observer.observe(breakpointRef.current);
+            return () => {
+                observer.disconnect();
+            };
+        }
+        // Breakpoint handling for viewport
+        if (windowIsAvailable) {
+            const mediaMatch = window.matchMedia(`(min-width: ${breakpointVal})`);
+            const mediaMatchAvailable = 'addEventListener' in mediaMatch;
+            const resizeHandler = debounce(() => {
+                setMatches(window.innerWidth >= parseInt(breakpointVal, 10));
+            }, 100);
+            // Need to check useMatchMedia in order to support unit testing
+            if (mediaMatchAvailable) {
+                mediaMatch.addEventListener('change', onResize);
+                setMatches(mediaMatch.matches);
+            }
+            else {
+                window.addEventListener('resize', resizeHandler);
+                setMatches(window.innerWidth >= parseInt(breakpointVal, 10));
+            }
+            return () => {
+                // Need to check useMatchMedia in order to support unit testing
+                if (mediaMatchAvailable)
+                    mediaMatch.removeEventListener('change', onResize);
+                else {
+                    window.removeEventListener('resize', resizeHandler);
+                }
+            };
+        }
+    }, [breakpointRef?.current]);
+    return matches;
+};
+export default useBreakpoint;
+//# sourceMappingURL=useBreakpoint.js.map

package/lib/hooks/useBreakpoint.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useBreakpoint.js","sourceRoot":"","sources":["../../src/hooks/useBreakpoint.ts"],"names":[],"mappings":"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","sourcesContent":["import { useState, useLayoutEffect, useCallback } from 'react';\nimport type { RefObject } from 'react';\n\nimport { windowIsAvailable, debounce } from '../utils';\n\nimport useChToPxConversionFactor from './useChToPxConversionFactor';\nimport useTheme from './useTheme';\n\n// We should be able to safely capture once as the computed root font size is unlikely to change during normal runtime.\nconst rootFontSize = windowIsAvailable\n  ? window.getComputedStyle(document.documentElement).fontSize\n  : '16px';\n\n/**\n * @example const breakpointActive = useBreakpoint(breakpoint);\n * @param breakpoint The string indicator for the breakpoint that should be checked for validity.\n * @param options\n * @returns breakpointActive:: A boolean indicating if the given breakpoint is active or not. If false, the breakpoint is too big for the screen size.\n */\nconst useBreakpoint = (\n  breakpoint: 'xs' | 'sm' | 'md' | 'lg' | 'xl',\n  {\n    breakpointRef,\n    defaultValue = false,\n    themeProp = 'breakpoints'\n  }: {\n    breakpointRef?: RefObject<Element> | undefined;\n    defaultValue?: boolean;\n    themeProp?: 'breakpoints' | 'content-width';\n  } = {}\n) => {\n  const {\n    base: { breakpoints, 'content-width': contentWidth }\n  } = useTheme();\n  const breakpointVal =\n    themeProp === 'content-width' ? contentWidth[breakpoint] : breakpoints[breakpoint];\n\n  const [matches, setMatches] = useState(\n    windowIsAvailable ? window.matchMedia(`(min-width: ${breakpointVal})`).matches : !!defaultValue\n  );\n\n  const chToPxConversionFactor = useChToPxConversionFactor();\n\n  const onResize = useCallback((e: MediaQueryListEvent) => {\n    setMatches(e.matches);\n  }, []);\n\n  useLayoutEffect(() => {\n    // Breakpoint handling for contained elements\n    if (breakpointRef && breakpointRef.current) {\n      const debouncedResize = debounce((entries: ResizeObserverEntry[]) => {\n        const matchesBreakpoint = entries.some(({ target, contentRect }) => {\n          if (target !== breakpointRef.current) return;\n\n          const multiplier =\n            themeProp === 'breakpoints' ? parseFloat(rootFontSize) : chToPxConversionFactor;\n          return contentRect.width >= parseFloat(breakpointVal) * multiplier;\n        });\n\n        setMatches(matchesBreakpoint);\n      }, 100);\n\n      const observer = new ResizeObserver(debouncedResize);\n\n      observer.observe(breakpointRef.current);\n\n      return () => {\n        observer.disconnect();\n      };\n    }\n\n    // Breakpoint handling for viewport\n    if (windowIsAvailable) {\n      const mediaMatch = window.matchMedia(`(min-width: ${breakpointVal})`);\n      const mediaMatchAvailable = 'addEventListener' in mediaMatch;\n      const resizeHandler = debounce(() => {\n        setMatches(window.innerWidth >= parseInt(breakpointVal, 10));\n      }, 100);\n\n      // Need to check useMatchMedia in order to support unit testing\n      if (mediaMatchAvailable) {\n        mediaMatch.addEventListener('change', onResize);\n        setMatches(mediaMatch.matches);\n      } else {\n        window.addEventListener('resize', resizeHandler);\n        setMatches(window.innerWidth >= parseInt(breakpointVal, 10));\n      }\n\n      return () => {\n        // Need to check useMatchMedia in order to support unit testing\n        if (mediaMatchAvailable) mediaMatch.removeEventListener('change', onResize);\n        else {\n          window.removeEventListener('resize', resizeHandler);\n        }\n      };\n    }\n  }, [breakpointRef?.current]);\n\n  return matches;\n};\n\nexport default useBreakpoint;\n"]}

package/lib/hooks/useChToPxConversionFactor.d.ts

@@ -0,0 +1,3 @@
+declare const useChToPxConversionFactor: () => number;
+export default useChToPxConversionFactor;
+//# sourceMappingURL=useChToPxConversionFactor.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useChToPxConversionFactor.d.ts","sourceRoot":"","sources":["../../src/hooks/useChToPxConversionFactor.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,yBAAyB,cAU9B,CAAC;AAEF,eAAe,yBAAyB,CAAC"}

package/lib/hooks/useChToPxConversionFactor.js

@@ -0,0 +1,13 @@
+import { useMemo } from 'react';
+const useChToPxConversionFactor = () => {
+    return useMemo(() => {
+        const chToPxDiv = document.createElement('div');
+        chToPxDiv.style.width = '1ch';
+        document.body.append(chToPxDiv);
+        const conversionFactor = chToPxDiv.offsetWidth;
+        chToPxDiv.remove();
+        return conversionFactor;
+    }, []);
+};
+export default useChToPxConversionFactor;
+//# sourceMappingURL=useChToPxConversionFactor.js.map

package/lib/hooks/useChToPxConversionFactor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useChToPxConversionFactor.js","sourceRoot":"","sources":["../../src/hooks/useChToPxConversionFactor.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEhC,MAAM,yBAAyB,GAAG,GAAG,EAAE;IACrC,OAAO,OAAO,CAAC,GAAG,EAAE;QAClB,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAChD,SAAS,CAAC,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC;QAC9B,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;QAChC,MAAM,gBAAgB,GAAG,SAAS,CAAC,WAAW,CAAC;QAC/C,SAAS,CAAC,MAAM,EAAE,CAAC;QAEnB,OAAO,gBAAgB,CAAC;IAC1B,CAAC,EAAE,EAAE,CAAC,CAAC;AACT,CAAC,CAAC;AAEF,eAAe,yBAAyB,CAAC","sourcesContent":["import { useMemo } from 'react';\n\nconst useChToPxConversionFactor = () => {\n  return useMemo(() => {\n    const chToPxDiv = document.createElement('div');\n    chToPxDiv.style.width = '1ch';\n    document.body.append(chToPxDiv);\n    const conversionFactor = chToPxDiv.offsetWidth;\n    chToPxDiv.remove();\n\n    return conversionFactor;\n  }, []);\n};\n\nexport default useChToPxConversionFactor;\n"]}

package/lib/hooks/useConfiguration.d.ts

@@ -0,0 +1,8 @@
+import '../init';
+/**
+ * @example const configuration = useConfiguration();
+ * @returns configuration:: The configuration context object including all of the properties that can be set on the Configuration component.
+ */
+declare const useConfiguration: () => import("../components/Configuration/Configuration").ConfigurationContextValue;
+export default useConfiguration;
+//# sourceMappingURL=useConfiguration.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useConfiguration.d.ts","sourceRoot":"","sources":["../../src/hooks/useConfiguration.ts"],"names":[],"mappings":"AAEA,OAAO,SAAS,CAAC;AAIjB;;;GAGG;AACH,QAAA,MAAM,gBAAgB,qFAMrB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/lib/hooks/useConfiguration.js

@@ -0,0 +1,16 @@
+import { useContext } from 'react';
+import '../init';
+import { windowIsAvailable } from '../utils';
+import { ConfigurationContext } from '../components/Configuration/Configuration';
+/**
+ * @example const configuration = useConfiguration();
+ * @returns configuration:: The configuration context object including all of the properties that can be set on the Configuration component.
+ */
+const useConfiguration = () => {
+    const context = windowIsAvailable
+        ? window.cosmos.configurationContext ?? ConfigurationContext
+        : ConfigurationContext;
+    return useContext(context);
+};
+export default useConfiguration;
+//# sourceMappingURL=useConfiguration.js.map

package/lib/hooks/useConfiguration.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useConfiguration.js","sourceRoot":"","sources":["../../src/hooks/useConfiguration.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,SAAS,CAAC;AACjB,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,oBAAoB,EAAE,MAAM,2CAA2C,CAAC;AAEjF;;;GAGG;AACH,MAAM,gBAAgB,GAAG,GAAG,EAAE;IAC5B,MAAM,OAAO,GAAG,iBAAiB;QAC/B,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,oBAAoB,IAAI,oBAAoB;QAC5D,CAAC,CAAC,oBAAoB,CAAC;IAEzB,OAAO,UAAU,CAAC,OAAO,CAAC,CAAC;AAC7B,CAAC,CAAC;AAEF,eAAe,gBAAgB,CAAC","sourcesContent":["import { useContext } from 'react';\n\nimport '../init';\nimport { windowIsAvailable } from '../utils';\nimport { ConfigurationContext } from '../components/Configuration/Configuration';\n\n/**\n * @example const configuration = useConfiguration();\n * @returns configuration:: The configuration context object including all of the properties that can be set on the Configuration component.\n */\nconst useConfiguration = () => {\n  const context = windowIsAvailable\n    ? window.cosmos.configurationContext ?? ConfigurationContext\n    : ConfigurationContext;\n\n  return useContext(context);\n};\n\nexport default useConfiguration;\n"]}

package/lib/hooks/useConsolidatedRef.d.ts

@@ -0,0 +1,9 @@
+import type { Ref, RefObject } from 'react';
+/**
+ * @example const ref = useConsolidatedRefs(refs);
+ * @param refs The ref or refs to consolidate.
+ * @returns ref:: The consolidated ref.
+ */
+declare const useConsolidatedRef: <T>(...refs: (Ref<T> | undefined)[]) => RefObject<T>;
+export default useConsolidatedRef;
+//# sourceMappingURL=useConsolidatedRef.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useConsolidatedRef.d.ts","sourceRoot":"","sources":["../../src/hooks/useConsolidatedRef.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,GAAG,EAAoB,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9D;;;;GAIG;AACH,QAAA,MAAM,kBAAkB,sDAwBvB,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/lib/hooks/useConsolidatedRef.js

@@ -0,0 +1,30 @@
+import { useRef, useState } from 'react';
+/**
+ * @example const ref = useConsolidatedRefs(refs);
+ * @param refs The ref or refs to consolidate.
+ * @returns ref:: The consolidated ref.
+ */
+const useConsolidatedRef = (...refs) => {
+    const targetRef = useRef(null);
+    const [refProxy] = useState(() => Object.defineProperty({ current: null }, 'current', {
+        configurable: true,
+        enumerable: true,
+        get: () => targetRef.current,
+        set: value => {
+            targetRef.current = value;
+            refs.forEach(ref => {
+                if (!ref)
+                    return;
+                if (typeof ref === 'function') {
+                    ref(targetRef.current);
+                }
+                else {
+                    ref.current = targetRef.current;
+                }
+            });
+        }
+    }));
+    return refProxy;
+};
+export default useConsolidatedRef;
+//# sourceMappingURL=useConsolidatedRef.js.map

package/lib/hooks/useConsolidatedRef.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useConsolidatedRef.js","sourceRoot":"","sources":["../../src/hooks/useConsolidatedRef.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGzC;;;;GAIG;AACH,MAAM,kBAAkB,GAAG,CAAI,GAAG,IAA4B,EAAgB,EAAE;IAC9E,MAAM,SAAS,GAA+B,MAAM,CAAI,IAAI,CAAC,CAAC;IAE9D,MAAM,CAAC,QAAQ,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CAC/B,MAAM,CAAC,cAAc,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE,SAAS,EAAE;QAClD,YAAY,EAAE,IAAI;QAClB,UAAU,EAAE,IAAI;QAChB,GAAG,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,OAAO;QAC5B,GAAG,EAAE,KAAK,CAAC,EAAE;YACX,SAAS,CAAC,OAAO,GAAG,KAAK,CAAC;YAC1B,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE;gBACjB,IAAI,CAAC,GAAG;oBAAE,OAAO;gBAEjB,IAAI,OAAO,GAAG,KAAK,UAAU,EAAE;oBAC7B,GAAG,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;iBACxB;qBAAM;oBACJ,GAAkC,CAAC,OAAO,GAAG,SAAS,CAAC,OAAO,CAAC;iBACjE;YACH,CAAC,CAAC,CAAC;QACL,CAAC;KACF,CAAC,CACH,CAAC;IAEF,OAAO,QAAQ,CAAC;AAClB,CAAC,CAAC;AAEF,eAAe,kBAAkB,CAAC","sourcesContent":["import { useRef, useState } from 'react';\nimport type { Ref, MutableRefObject, RefObject } from 'react';\n\n/**\n * @example const ref = useConsolidatedRefs(refs);\n * @param refs The ref or refs to consolidate.\n * @returns ref:: The consolidated ref.\n */\nconst useConsolidatedRef = <T>(...refs: (Ref<T> | undefined)[]): RefObject<T> => {\n  const targetRef: MutableRefObject<T | null> = useRef<T>(null);\n\n  const [refProxy] = useState(() =>\n    Object.defineProperty({ current: null }, 'current', {\n      configurable: true,\n      enumerable: true,\n      get: () => targetRef.current,\n      set: value => {\n        targetRef.current = value;\n        refs.forEach(ref => {\n          if (!ref) return;\n\n          if (typeof ref === 'function') {\n            ref(targetRef.current);\n          } else {\n            (ref as MutableRefObject<T | null>).current = targetRef.current;\n          }\n        });\n      }\n    })\n  );\n\n  return refProxy;\n};\n\nexport default useConsolidatedRef;\n"]}

package/lib/hooks/useDirection.d.ts

@@ -0,0 +1,9 @@
+export interface DirectionProperties {
+    start: 'left' | 'right';
+    end: 'left' | 'right';
+    rtl: boolean;
+    ltr: boolean;
+}
+declare const useDirection: () => Readonly<DirectionProperties>;
+export default useDirection;
+//# sourceMappingURL=useDirection.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useDirection.d.ts","sourceRoot":"","sources":["../../src/hooks/useDirection.ts"],"names":[],"mappings":"AAIA,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC;IACxB,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;IACtB,GAAG,EAAE,OAAO,CAAC;IACb,GAAG,EAAE,OAAO,CAAC;CACd;AAED,QAAA,MAAM,YAAY,QAAO,SAAS,mBAAmB,CAiBpD,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/hooks/useDirection.js

@@ -0,0 +1,22 @@
+import { useMemo } from 'react';
+import useConfiguration from './useConfiguration';
+const useDirection = () => {
+    const { direction } = useConfiguration();
+    return useMemo(() => {
+        return direction === 'ltr'
+            ? {
+                start: 'left',
+                end: 'right',
+                ltr: true,
+                rtl: false
+            }
+            : {
+                start: 'right',
+                end: 'left',
+                ltr: false,
+                rtl: true
+            };
+    }, [direction]);
+};
+export default useDirection;
+//# sourceMappingURL=useDirection.js.map

package/lib/hooks/useDirection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDirection.js","sourceRoot":"","sources":["../../src/hooks/useDirection.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEhC,OAAO,gBAAgB,MAAM,oBAAoB,CAAC;AASlD,MAAM,YAAY,GAAG,GAAkC,EAAE;IACvD,MAAM,EAAE,SAAS,EAAE,GAAG,gBAAgB,EAAE,CAAC;IACzC,OAAO,OAAO,CAAsB,GAAG,EAAE;QACvC,OAAO,SAAS,KAAK,KAAK;YACxB,CAAC,CAAC;gBACE,KAAK,EAAE,MAAM;gBACb,GAAG,EAAE,OAAO;gBACZ,GAAG,EAAE,IAAI;gBACT,GAAG,EAAE,KAAK;aACX;YACH,CAAC,CAAC;gBACE,KAAK,EAAE,OAAO;gBACd,GAAG,EAAE,MAAM;gBACX,GAAG,EAAE,KAAK;gBACV,GAAG,EAAE,IAAI;aACV,CAAC;IACR,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;AAClB,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import { useMemo } from 'react';\n\nimport useConfiguration from './useConfiguration';\n\nexport interface DirectionProperties {\n  start: 'left' | 'right';\n  end: 'left' | 'right';\n  rtl: boolean;\n  ltr: boolean;\n}\n\nconst useDirection = (): Readonly<DirectionProperties> => {\n  const { direction } = useConfiguration();\n  return useMemo<DirectionProperties>(() => {\n    return direction === 'ltr'\n      ? {\n          start: 'left',\n          end: 'right',\n          ltr: true,\n          rtl: false\n        }\n      : {\n          start: 'right',\n          end: 'left',\n          ltr: false,\n          rtl: true\n        };\n  }, [direction]);\n};\n\nexport default useDirection;\n"]}

package/lib/hooks/useDraggable.d.ts

@@ -0,0 +1,8 @@
+import type { 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>, enabled?: boolean) => void;
+export default useDraggable;
+//# sourceMappingURL=useDraggable.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useDraggable.d.ts","sourceRoot":"","sources":["../../src/hooks/useDraggable.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAUvC;;;GAGG;AACH,QAAA,MAAM,YAAY,wBACK,UAAU,WAAW,CAAC,iBAC5B,UAAU,WAAW,CAAC,YAC5B,OAAO,SA+FjB,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/hooks/useDraggable.js

@@ -0,0 +1,91 @@
+import { useState, useEffect, useRef } from 'react';
+const interactiveElementsTags = ['button', 'a', 'input', 'textarea', 'select', 'details'];
+const shouldIgnoreEvent = (event) => {
+    return interactiveElementsTags.some(tag => event.target instanceof Element && event.target.tagName.toLowerCase() === tag);
+};
+/**
+ * @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, enabled = true) => {
+    const [dragging, setDragging] = useState(false);
+    const draggableElPosition = useRef({ x: 0, y: 0 });
+    useEffect(() => {
+        if (!enabled)
+            return;
+        const onMouseDown = (event) => {
+            if (shouldIgnoreEvent(event))
+                return;
+            setDragging(true);
+            if (draggableElementRef.current) {
+                const { clientX, clientY } = 'touches' in event ? event.touches[0] : event;
+                draggableElPosition.current.x =
+                    clientX - draggableElementRef.current.getBoundingClientRect().left;
+                draggableElPosition.current.y =
+                    clientY - draggableElementRef.current.getBoundingClientRect().top;
+            }
+        };
+        if (dragHandleRef.current) {
+            // Save the current value so we can properly remove event listener after the ref has changed.
+            const { current } = dragHandleRef;
+            current.addEventListener('mousedown', onMouseDown);
+            current.addEventListener('touchstart', onMouseDown);
+            return () => {
+                current.removeEventListener('mousedown', onMouseDown);
+                current.removeEventListener('touchstart', onMouseDown);
+            };
+        }
+    }, [dragHandleRef.current, enabled]);
+    useEffect(() => {
+        const onWindowResize = () => {
+            const windowWidth = window.innerWidth;
+            const windowHeight = window.innerHeight;
+            if (draggableElementRef.current) {
+                const limitX = draggableElementRef.current.offsetWidth - windowWidth;
+                const limitY = draggableElementRef.current.offsetHeight - windowHeight;
+                const positionX = draggableElementRef.current.getBoundingClientRect().left;
+                const positionY = draggableElementRef.current.getBoundingClientRect().top;
+                const horizontal = Math.min(Math.max(positionX, limitX), 0);
+                const vertical = Math.min(Math.max(positionY, limitY), 0);
+                draggableElementRef.current.style.transform = `translate(${horizontal}px, ${vertical}px)`;
+            }
+        };
+        const onMouseMove = (event) => {
+            const windowWidth = window.innerWidth;
+            const windowHeight = window.innerHeight;
+            if (!dragging)
+                return;
+            if (draggableElementRef.current) {
+                const { clientX, clientY } = 'touches' in event ? event.touches[0] : event;
+                const positionX = clientX - draggableElementRef.current.offsetLeft - draggableElPosition.current.x;
+                const positionY = clientY - draggableElementRef.current.offsetTop - draggableElPosition.current.y;
+                const limitX = draggableElementRef.current.offsetWidth - windowWidth;
+                const limitY = draggableElementRef.current.offsetHeight - windowHeight;
+                const horizontal = Math.min(Math.max(positionX, limitX), 0);
+                const vertical = Math.min(Math.max(positionY, limitY), 0);
+                draggableElementRef.current.style.transform = `translate(${horizontal}px, ${vertical}px)`;
+            }
+        };
+        const onMouseUp = () => {
+            setDragging(false);
+        };
+        window.addEventListener('resize', onWindowResize);
+        if (dragging) {
+            document.addEventListener('mouseup', onMouseUp);
+            document.addEventListener('touchend', onMouseUp);
+            document.addEventListener('mousemove', onMouseMove);
+            document.addEventListener('touchmove', onMouseMove);
+            return () => {
+                document.removeEventListener('mouseup', onMouseUp);
+                document.removeEventListener('touchend', onMouseUp);
+                document.removeEventListener('mousemove', onMouseMove);
+                document.removeEventListener('touchmove', onMouseMove);
+            };
+        }
+        return () => {
+            window.removeEventListener('resize', onWindowResize);
+        };
+    }, [dragging]);
+};
+export default useDraggable;
+//# sourceMappingURL=useDraggable.js.map

package/lib/hooks/useDraggable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDraggable.js","sourceRoot":"","sources":["../../src/hooks/useDraggable.ts"],"names":[],"mappings":"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","sourcesContent":["import { useState, useEffect, useRef } from 'react';\nimport type { RefObject } from 'react';\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  const draggableElPosition = useRef({ x: 0, y: 0 });\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        draggableElPosition.current.x =\n          clientX - draggableElementRef.current.getBoundingClientRect().left;\n        draggableElPosition.current.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 onWindowResize = () => {\n      const windowWidth = window.innerWidth;\n      const windowHeight = window.innerHeight;\n      if (draggableElementRef.current) {\n        const limitX = draggableElementRef.current.offsetWidth - windowWidth;\n        const limitY = draggableElementRef.current.offsetHeight - windowHeight;\n\n        const positionX = draggableElementRef.current.getBoundingClientRect().left;\n        const positionY = draggableElementRef.current.getBoundingClientRect().top;\n\n        const horizontal = Math.min(Math.max(positionX, limitX), 0);\n        const vertical = Math.min(Math.max(positionY, limitY), 0);\n\n        draggableElementRef.current.style.transform = `translate(${horizontal}px, ${vertical}px)`;\n      }\n    };\n\n    const onMouseMove = (event: MouseEvent | TouchEvent): void => {\n      const windowWidth = window.innerWidth;\n      const windowHeight = window.innerHeight;\n      if (!dragging) return;\n      if (draggableElementRef.current) {\n        const { clientX, clientY } = 'touches' in event ? event.touches[0] : event;\n        const positionX =\n          clientX - draggableElementRef.current.offsetLeft - draggableElPosition.current.x;\n        const positionY =\n          clientY - draggableElementRef.current.offsetTop - draggableElPosition.current.y;\n\n        const limitX = draggableElementRef.current.offsetWidth - windowWidth;\n        const limitY = draggableElementRef.current.offsetHeight - windowHeight;\n\n        const horizontal = Math.min(Math.max(positionX, limitX), 0);\n        const vertical = Math.min(Math.max(positionY, limitY), 0);\n\n        draggableElementRef.current.style.transform = `translate(${horizontal}px, ${vertical}px)`;\n      }\n    };\n\n    const onMouseUp = (): void => {\n      setDragging(false);\n    };\n\n    window.addEventListener('resize', onWindowResize);\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    return () => {\n      window.removeEventListener('resize', onWindowResize);\n    };\n  }, [dragging]);\n};\n\nexport default useDraggable;\n"]}

package/lib/hooks/useElement.d.ts

@@ -0,0 +1,10 @@
+import type { RefCallback } from 'react';
+/**
+ * @example const [element, setElementFunction] = useElement(initial);
+ * @param initial The initial value to set to element.
+ * @returns * element:: A DOM Element.
+ *          * setElementFunction:: The function responsible for setting and resetting the element variable. This function is typically passed to the ref attribute of the element you wish to reference.
+ */
+declare const useElement: <T extends Element>(initial?: T | null) => [T | null, RefCallback<T>];
+export default useElement;
+//# sourceMappingURL=useElement.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useElement.d.ts","sourceRoot":"","sources":["../../src/hooks/useElement.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAEzC;;;;;GAKG;AACH,QAAA,MAAM,UAAU,uEACa,CAAC;AAE9B,eAAe,UAAU,CAAC"}