@pega/cosmos-react-core 3.0.0-dev.9.1 → 3.0.0-rc.10

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 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/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,EAAU,MAAM,OAAO,CAAC;AAU/D;;;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

@@ -1,5 +1,4 @@
-import { useState, useEffect } from 'react';
-const initialDraggableElPosition = { x: 0, y: 0 };
+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);
@@ -8,18 +7,21 @@ 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);
+    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;
-                initialDraggableElPosition.x =
+                draggableElPosition.current.x =
                     clientX - draggableElementRef.current.getBoundingClientRect().left;
-                initialDraggableElPosition.y =
+                draggableElPosition.current.y =
                     clientY - draggableElementRef.current.getBoundingClientRect().top;
             }
         };
@@ -33,19 +35,41 @@ const useDraggable = (draggableElementRef, dragHandleRef) => {
                 current.removeEventListener('touchstart', onMouseDown);
             };
         }
-    }, [dragHandleRef?.current]);
+    }, [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 && draggableElementRef.current) {
+            if (draggableElementRef.current) {
                 const { clientX, clientY } = 'touches' in event ? event.touches[0] : event;
-                draggableElementRef.current.style.transform = `translate(${clientX - draggableElementRef.current.offsetLeft - initialDraggableElPosition.x}px, ${clientY - draggableElementRef.current.offsetTop - initialDraggableElPosition.y}px)`;
+                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);
@@ -58,6 +82,9 @@ const useDraggable = (draggableElementRef, dragHandleRef) => {
                 document.removeEventListener('touchmove', onMouseMove);
             };
         }
+        return () => {
+            window.removeEventListener('resize', onWindowResize);
+        };
     }, [dragging]);
 };
 export default useDraggable;

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, useRef } 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/useFocusTrap.d.ts.map

@@ -1 +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"}
+{"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,wCAoB1B,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/hooks/useFocusTrap.js

@@ -1,5 +1,5 @@
 import { useCallback } from 'react';
-import { getFocusables } from '../utils';
+import { getFocusables, getActiveElement } from '../utils';
 import useEvent from './useEvent';
 /**
  * @example useFocusTrap(elementRef)
@@ -12,13 +12,12 @@ const useFocusTrap = (elementRef, attachToDocument = true, dependencies = []) =>
         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)) {
+            const activeEl = getActiveElement();
+            if (!e.shiftKey && (activeEl === elementRef.current || activeEl === lastFocusable)) {
                 firstFocusable?.focus();
                 e.preventDefault();
             }
-            else if (e.shiftKey &&
-                (document.activeElement === elementRef.current || document.activeElement === firstFocusable)) {
+            else if (e.shiftKey && (activeEl === elementRef.current || activeEl === firstFocusable)) {
                 lastFocusable?.focus();
                 e.preventDefault();
             }

package/lib/hooks/useFocusTrap.js.map

@@ -1 +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"]}
+{"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,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAE3D,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;YACjF,MAAM,QAAQ,GAAG,gBAAgB,EAAE,CAAC;YAEpC,IAAI,CAAC,CAAC,CAAC,QAAQ,IAAI,CAAC,QAAQ,KAAK,UAAU,CAAC,OAAO,IAAI,QAAQ,KAAK,aAAa,CAAC,EAAE;gBAClF,cAAc,EAAE,KAAK,EAAE,CAAC;gBACxB,CAAC,CAAC,cAAc,EAAE,CAAC;aACpB;iBAAM,IAAI,CAAC,CAAC,QAAQ,IAAI,CAAC,QAAQ,KAAK,UAAU,CAAC,OAAO,IAAI,QAAQ,KAAK,cAAc,CAAC,EAAE;gBACzF,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, getActiveElement } 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      const activeEl = getActiveElement();\n\n      if (!e.shiftKey && (activeEl === elementRef.current || activeEl === lastFocusable)) {\n        firstFocusable?.focus();\n        e.preventDefault();\n      } else if (e.shiftKey && (activeEl === elementRef.current || activeEl === firstFocusable)) {\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"]}