@pega/cosmos-react-core 3.0.0-dev.3.0 → 3.0.0-dev.30.0

package/lib/hooks/useAutoResize.d.ts

@@ -1,4 +1,4 @@
-import { RefObject } from 'react';
+import { MutableRefObject } from 'react';
 /**
  * @example const [ref, resizeFunction] = useAutoResize();
  * maxHeight should be provided in pixels without units
@@ -7,6 +7,6 @@ import { RefObject } from 'react';
  *          * 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 | undefined, minHeightProp?: number | undefined) => [RefObject<T>, () => void];
+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

@@ -1 +1 @@
-{"version":3,"file":"useAutoResize.d.ts","sourceRoot":"","sources":["../../src/hooks/useAutoResize.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,SAAS,EAAE,MAAM,OAAO,CAAC;AAIpD;;;;;;;GAOG;AACH,QAAA,MAAM,aAAa,oIAGK,IAAI,CA4B3B,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"useAutoResize.d.ts","sourceRoot":"","sources":["../../src/hooks/useAutoResize.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,gBAAgB,EAAE,MAAM,OAAO,CAAC;AAI3D;;;;;;;GAOG;AACH,QAAA,MAAM,aAAa,oDACL,MAAM,kBACF,MAAM,wCACc,IAAI,CAqCzC,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/hooks/useAutoResize.js

@@ -12,21 +12,33 @@ 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 = element.current.scrollHeight;
+                newMinHeight = scrollHeightElement.scrollHeight;
                 setMinHeight(newMinHeight);
             }
             // Reset the heights to the base height so there is an overflow / or none to calculate the new height
-            element.current.style.height = `${newMinHeight}px`;
+            scrollHeightElement.style.height = `${newMinHeight}px`;
             if (maxHeight) {
-                element.current.style.overflowY =
-                    element.current.scrollHeight > maxHeight ? 'auto' : 'hidden';
-                element.current.style.height = `${Math.min(element.current.scrollHeight, maxHeight)}px`;
+                scrollHeightElement.style.overflowY =
+                    scrollHeightElement.scrollHeight > maxHeight ? 'auto' : 'hidden';
+                const height = `${Math.min(scrollHeightElement.scrollHeight, maxHeight)}px`;
+                scrollHeightElement.style.height = height;
+                if (iframe)
+                    iframe.style.height = height;
             }
             else {
-                element.current.style.height = `${element.current.scrollHeight}px`;
+                scrollHeightElement.style.height = `${scrollHeightElement.scrollHeight}px`;
+                if (iframe)
+                    iframe.style.height = `${scrollHeightElement.scrollHeight}px`;
             }
         }
     };

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

@@ -5,9 +5,10 @@ import { RefObject } from 'react';
  * @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', options?: {
-    defaultValue?: boolean;
+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

@@ -1 +1 @@
-{"version":3,"file":"useBreakpoint.d.ts","sourceRoot":"","sources":["../../src/hooks/useBreakpoint.ts"],"names":[],"mappings":"AAAA,OAAO,EAA0C,SAAS,EAAE,MAAM,OAAO,CAAC;AAM1E;;;;;GAKG;AACH,QAAA,MAAM,aAAa,eACL,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,YACnC;IAAE,YAAY,CAAC,EAAE,OAAO,CAAC;IAAC,aAAa,CAAC,EAAE,UAAU,OAAO,CAAC,GAAG,SAAS,CAAA;CAAE,YAiEpF,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"useBreakpoint.d.ts","sourceRoot":"","sources":["../../src/hooks/useBreakpoint.ts"],"names":[],"mappings":"AAAA,OAAO,EAA0C,SAAS,EAAE,MAAM,OAAO,CAAC;AAM1E;;;;;GAKG;AACH,QAAA,MAAM,aAAa,eACL,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI;oBAM1B,UAAU,OAAO,CAAC,GAAG,SAAS;;;aAoEjD,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/hooks/useBreakpoint.js

@@ -7,29 +7,26 @@ import useTheme from './useTheme';
  * @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, options = {
-    defaultValue: false
-}) => {
-    const { base: { breakpoints } } = useTheme();
-    const breakpointVal = breakpoints[breakpoint];
-    const [matches, setMatches] = useState(windowIsAvailable
-        ? window.matchMedia(`(min-width: ${breakpointVal})`).matches
-        : !!options.defaultValue);
+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 onResize = useCallback((e) => {
         setMatches(e.matches);
     }, []);
     useLayoutEffect(() => {
         // Breakpoint handling for contained elements
-        if (options.breakpointRef && options.breakpointRef.current) {
+        if (breakpointRef && breakpointRef.current) {
             const observer = new ResizeObserver(entries => {
                 const matchesBreakpoint = entries.some(({ target, contentRect }) => {
-                    if (target !== options.breakpointRef?.current)
+                    if (target !== breakpointRef.current)
                         return;
-                    return contentRect.width >= parseFloat(breakpointVal) * 16;
+                    const fontSize = window.getComputedStyle(target)?.fontSize || '16';
+                    return contentRect.width >= parseFloat(breakpointVal) * parseFloat(fontSize);
                 });
                 setMatches(matchesBreakpoint);
             });
-            observer.observe(options.breakpointRef.current);
+            observer.observe(breakpointRef.current);
             return () => {
                 observer.disconnect();
             };
@@ -59,7 +56,7 @@ const useBreakpoint = (breakpoint, options = {
                 }
             };
         }
-    }, [options.breakpointRef?.current]);
+    }, [breakpointRef?.current]);
     return matches;
 };
 export default useBreakpoint;

package/lib/hooks/useBreakpoint.js.map

@@ -1 +1 @@
-{"version":3,"file":"useBreakpoint.js","sourceRoot":"","sources":["../../src/hooks/useBreakpoint.ts"],"names":[],"mappings":"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","sourcesContent":["import { useState, useLayoutEffect, useCallback, RefObject } from 'react';\n\nimport { windowIsAvailable, debounce } from '../utils';\n\nimport useTheme from './useTheme';\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  options: { defaultValue?: boolean; breakpointRef?: RefObject<Element> | undefined } = {\n    defaultValue: false\n  }\n) => {\n  const {\n    base: { breakpoints }\n  } = useTheme();\n  const breakpointVal = breakpoints[breakpoint];\n  const [matches, setMatches] = useState(\n    windowIsAvailable\n      ? window.matchMedia(`(min-width: ${breakpointVal})`).matches\n      : !!options.defaultValue\n  );\n\n  const onResize = useCallback((e: MediaQueryListEvent) => {\n    setMatches(e.matches);\n  }, []);\n\n  useLayoutEffect(() => {\n    // Breakpoint handling for contained elements\n    if (options.breakpointRef && options.breakpointRef.current) {\n      const observer = new ResizeObserver(entries => {\n        const matchesBreakpoint = entries.some(({ target, contentRect }) => {\n          if (target !== options.breakpointRef?.current) return;\n\n          return contentRect.width >= parseFloat(breakpointVal) * 16;\n        });\n\n        setMatches(matchesBreakpoint);\n      });\n\n      observer.observe(options.breakpointRef.current);\n\n      return () => {\n        observer.disconnect();\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 Enzyme 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 Enzyme testing\n        if (mediaMatchAvailable) mediaMatch.removeEventListener('change', onResize);\n        else {\n          window.removeEventListener('resize', resizeHandler);\n        }\n      };\n    }\n  }, [options.breakpointRef?.current]);\n\n  return matches;\n};\n\nexport default useBreakpoint;\n"]}
+{"version":3,"file":"useBreakpoint.js","sourceRoot":"","sources":["../../src/hooks/useBreakpoint.ts"],"names":[],"mappings":"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","sourcesContent":["import { useState, useLayoutEffect, useCallback, RefObject } from 'react';\n\nimport { windowIsAvailable, debounce } from '../utils';\n\nimport useTheme from './useTheme';\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 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 observer = new ResizeObserver(entries => {\n        const matchesBreakpoint = entries.some(({ target, contentRect }) => {\n          if (target !== breakpointRef.current) return;\n\n          const fontSize = window.getComputedStyle(target)?.fontSize || '16';\n\n          return contentRect.width >= parseFloat(breakpointVal) * parseFloat(fontSize);\n        });\n\n        setMatches(matchesBreakpoint);\n      });\n\n      observer.observe(breakpointRef.current);\n\n      return () => {\n        observer.disconnect();\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 Enzyme 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 Enzyme 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/useConfiguration.d.ts

@@ -1,3 +1,4 @@
+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.

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

@@ -1 +1 @@
-{"version":3,"file":"useConfiguration.d.ts","sourceRoot":"","sources":["../../src/hooks/useConfiguration.ts"],"names":[],"mappings":"AAIA;;;GAGG;AACH,QAAA,MAAM,gBAAgB,qFAAyC,CAAC;AAEhE,eAAe,gBAAgB,CAAC"}
+{"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

@@ -1,9 +1,16 @@
 import { useContext } from 'react';
-import { ConfigurationContext } from '../components/Configuration';
+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 = () => useContext(ConfigurationContext);
+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

@@ -1 +1 @@
-{"version":3,"file":"useConfiguration.js","sourceRoot":"","sources":["../../src/hooks/useConfiguration.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAEnE;;;GAGG;AACH,MAAM,gBAAgB,GAAG,GAAG,EAAE,CAAC,UAAU,CAAC,oBAAoB,CAAC,CAAC;AAEhE,eAAe,gBAAgB,CAAC","sourcesContent":["import { useContext } from 'react';\n\nimport { ConfigurationContext } from '../components/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 = () => useContext(ConfigurationContext);\n\nexport default useConfiguration;\n"]}
+{"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/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/useFocusWithin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useFocusWithin.d.ts","sourceRoot":"","sources":["../../src/hooks/useFocusWithin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,SAAS,EAAuB,MAAM,OAAO,CAAC;AAM5E;;;;GAIG;AACH,QAAA,MAAM,cAAc,8GAEU,OAAO,wBAAwB,IAAI,kBAC9D,OA0FF,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"useFocusWithin.d.ts","sourceRoot":"","sources":["../../src/hooks/useFocusWithin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,SAAS,EAAuB,MAAM,OAAO,CAAC;AAI5E;;;;GAIG;AACH,QAAA,MAAM,cAAc,8GAEU,OAAO,wBAAwB,IAAI,kBAC9D,OA8EF,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/lib/hooks/useFocusWithin.js

@@ -1,6 +1,5 @@
 import { useState, useEffect, useCallback, useRef } from 'react';
 import { normalizeElements } from '../utils';
-import useOuterEvent from './useOuterEvent';
 /** Hook for properly handling focus state of children components.
  * @example const hasFocus = useFocusWithin([containerRef, ...], (isFocused, element) => { doSomething; });
  * @param onFocusChange Callback function that is invoked with the current focus state and the current element when any child elements takes focus or all of them lose focus.
@@ -45,13 +44,6 @@ const useFocusWithin = (els, onFocusChange) => {
             focusedElRef.current = targetEl;
         }
     }, [hasFocus, onFocusChange]);
-    useOuterEvent('mouseup', els, useCallback(() => {
-        if (hasFocus) {
-            setFocus(false);
-            onFocusChange?.(false, focusedElRef.current);
-            focusedElRef.current = null;
-        }
-    }, [onFocusChange, hasFocus]));
     useEffect(() => {
         const elements = normalizeElements(els);
         elements.forEach(el => {

package/lib/hooks/useFocusWithin.js.map

@@ -1 +1 @@
-{"version":3,"file":"useFocusWithin.js","sourceRoot":"","sources":["../../src/hooks/useFocusWithin.ts"],"names":[],"mappings":"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","sourcesContent":["import { useState, useEffect, RefObject, useCallback, useRef } from 'react';\n\nimport { normalizeElements } from '../utils';\n\nimport useOuterEvent from './useOuterEvent';\n\n/** Hook for properly handling focus state of children components.\n * @example const hasFocus = useFocusWithin([containerRef, ...], (isFocused, element) => { doSomething; });\n * @param onFocusChange Callback function that is invoked with the current focus state and the current element when any child elements takes focus or all of them lose focus.\n * @returns * hasFocus:: A boolean indicating if the ref element has focus or not.\n */\nconst useFocusWithin = <T extends HTMLElement = HTMLElement>(\n  els: (T | null | RefObject<T | null>)[],\n  onFocusChange?: (isFocused: boolean, element: T | null) => void\n): boolean => {\n  const [hasFocus, setFocus] = useState(false);\n  const focusedElRef = useRef<T | null>(null);\n  const blurTimerRef = useRef<number>();\n\n  const elsRef = useRef(els);\n  elsRef.current = els;\n\n  const onBlur = useCallback(\n    ({ relatedTarget }: FocusEvent) => {\n      if (!hasFocus) return;\n\n      const elements = normalizeElements(elsRef.current);\n\n      if (relatedTarget instanceof Node) {\n        // changing focus to another relevant child doesn't count\n        const focusedEl = elements.find(el => el?.contains(relatedTarget));\n        if (focusedEl) {\n          // ... just update the currently focused item\n          focusedElRef.current = focusedEl;\n          return;\n        }\n      }\n\n      clearTimeout(blurTimerRef.current);\n      blurTimerRef.current = setTimeout(() => {\n        if (\n          !elements.some(el => {\n            return el?.contains(document.activeElement);\n          })\n        ) {\n          setFocus(false);\n          onFocusChange?.(false, focusedElRef.current);\n          focusedElRef.current = null;\n        }\n      });\n    },\n    [hasFocus, onFocusChange]\n  );\n\n  const onFocus = useCallback(\n    ({ currentTarget }: FocusEvent) => {\n      clearTimeout(blurTimerRef.current);\n\n      if (!hasFocus) {\n        setFocus(true);\n        const targetEl = currentTarget as T;\n        onFocusChange?.(true, targetEl);\n        focusedElRef.current = targetEl;\n      }\n    },\n    [hasFocus, onFocusChange]\n  );\n\n  useOuterEvent(\n    'mouseup',\n    els,\n    useCallback(() => {\n      if (hasFocus) {\n        setFocus(false);\n        onFocusChange?.(false, focusedElRef.current);\n        focusedElRef.current = null;\n      }\n    }, [onFocusChange, hasFocus])\n  );\n\n  useEffect(() => {\n    const elements = normalizeElements(els);\n\n    elements.forEach(el => {\n      el?.addEventListener('focusin', onFocus);\n      el?.addEventListener('focusout', onBlur);\n    });\n    return () => {\n      elements.forEach(el => {\n        el?.removeEventListener('focusin', onFocus);\n        el?.removeEventListener('focusout', onBlur);\n      });\n    };\n  }, [els, onFocus, onBlur]);\n\n  // Clear timeout when component un-mounts.\n  useEffect(\n    () => () => {\n      clearTimeout(blurTimerRef.current);\n    },\n    []\n  );\n\n  return hasFocus;\n};\n\nexport default useFocusWithin;\n"]}
+{"version":3,"file":"useFocusWithin.js","sourceRoot":"","sources":["../../src/hooks/useFocusWithin.ts"],"names":[],"mappings":"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","sourcesContent":["import { useState, useEffect, RefObject, useCallback, useRef } from 'react';\n\nimport { normalizeElements } from '../utils';\n\n/** Hook for properly handling focus state of children components.\n * @example const hasFocus = useFocusWithin([containerRef, ...], (isFocused, element) => { doSomething; });\n * @param onFocusChange Callback function that is invoked with the current focus state and the current element when any child elements takes focus or all of them lose focus.\n * @returns * hasFocus:: A boolean indicating if the ref element has focus or not.\n */\nconst useFocusWithin = <T extends HTMLElement = HTMLElement>(\n  els: (T | null | RefObject<T | null>)[],\n  onFocusChange?: (isFocused: boolean, element: T | null) => void\n): boolean => {\n  const [hasFocus, setFocus] = useState(false);\n  const focusedElRef = useRef<T | null>(null);\n  const blurTimerRef = useRef<number>();\n\n  const elsRef = useRef(els);\n  elsRef.current = els;\n\n  const onBlur = useCallback(\n    ({ relatedTarget }: FocusEvent) => {\n      if (!hasFocus) return;\n\n      const elements = normalizeElements(elsRef.current);\n\n      if (relatedTarget instanceof Node) {\n        // changing focus to another relevant child doesn't count\n        const focusedEl = elements.find(el => el?.contains(relatedTarget));\n        if (focusedEl) {\n          // ... just update the currently focused item\n          focusedElRef.current = focusedEl;\n          return;\n        }\n      }\n\n      clearTimeout(blurTimerRef.current);\n      blurTimerRef.current = setTimeout(() => {\n        if (\n          !elements.some(el => {\n            return el?.contains(document.activeElement);\n          })\n        ) {\n          setFocus(false);\n          onFocusChange?.(false, focusedElRef.current);\n          focusedElRef.current = null;\n        }\n      });\n    },\n    [hasFocus, onFocusChange]\n  );\n\n  const onFocus = useCallback(\n    ({ currentTarget }: FocusEvent) => {\n      clearTimeout(blurTimerRef.current);\n\n      if (!hasFocus) {\n        setFocus(true);\n        const targetEl = currentTarget as T;\n        onFocusChange?.(true, targetEl);\n        focusedElRef.current = targetEl;\n      }\n    },\n    [hasFocus, onFocusChange]\n  );\n\n  useEffect(() => {\n    const elements = normalizeElements(els);\n\n    elements.forEach(el => {\n      el?.addEventListener('focusin', onFocus);\n      el?.addEventListener('focusout', onBlur);\n    });\n    return () => {\n      elements.forEach(el => {\n        el?.removeEventListener('focusin', onFocus);\n        el?.removeEventListener('focusout', onBlur);\n      });\n    };\n  }, [els, onFocus, onBlur]);\n\n  // Clear timeout when component un-mounts.\n  useEffect(\n    () => () => {\n      clearTimeout(blurTimerRef.current);\n    },\n    []\n  );\n\n  return hasFocus;\n};\n\nexport default useFocusWithin;\n"]}