@muraldevkit/ui-toolkit 4.68.0-dev-NFbt.1 → 4.68.0-dev-nPeA.1

package/dist/esm/components/tooltip/useTooltipPosition/index.js

@@ -26,13 +26,11 @@ var useTooltipPosition = function useTooltipPosition(triggerRef, elementRef, pla
     _useState2 = _slicedToArray(_useState, 2),
     tooltipPosition = _useState2[0],
     setTooltipPosition = _useState2[1];
-  var alignment = useMemo(function () {
-    return {
-      align: placement.align,
-      position: placement.position
-    };
-  }, [placement.align, placement.position]);
-  var updatePosition = useCallback(function () {
+  var alignment = useMemo(() => ({
+    align: placement.align,
+    position: placement.position
+  }), [placement.align, placement.position]);
+  var updatePosition = useCallback(() => {
     if (elementRef.current && isElementVisible) {
       var _triggerRef$current;
       var triggerRect = triggerRef === null || triggerRef === void 0 ? void 0 : (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 ? void 0 : _triggerRef$current.getBoundingClientRect();
@@ -40,7 +38,7 @@ var useTooltipPosition = function useTooltipPosition(triggerRef, elementRef, pla
       var newPosition = calculatePosition(alignment, offset, elementRect, triggerRect);
 
       // only update if we have a new position
-      setTooltipPosition(function (prevPosition) {
+      setTooltipPosition(prevPosition => {
         if (prevPosition.left !== newPosition.left || prevPosition.top !== newPosition.top) {
           return newPosition;
         }
@@ -50,10 +48,10 @@ var useTooltipPosition = function useTooltipPosition(triggerRef, elementRef, pla
   }, [alignment, elementRef, isElementVisible, offset, triggerRef]);
 
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  var debouncedUpdatePosition = useCallback(debounce(function () {
+  var debouncedUpdatePosition = useCallback(debounce(() => {
     updatePosition();
   }, 5), [updatePosition]);
-  useEffect(function () {
+  useEffect(() => {
     if (!disable) {
       var currentElement = elementRef.current;
 
@@ -79,7 +77,7 @@ var useTooltipPosition = function useTooltipPosition(triggerRef, elementRef, pla
         window.addEventListener('resize', debouncedUpdatePosition);
         window.addEventListener('scroll', debouncedUpdatePosition);
       }
-      return function () {
+      return () => {
         if (currentElement) {
           resizeObserver.unobserve(currentElement);
           mutationObserver.disconnect();
@@ -89,7 +87,7 @@ var useTooltipPosition = function useTooltipPosition(triggerRef, elementRef, pla
       };
     }
   }, [disable, triggerRef, elementRef, alignment, offset, isElementVisible, updatePosition, debouncedUpdatePosition]);
-  useLayoutEffect(function () {
+  useLayoutEffect(() => {
     if (isElementVisible && !disable && elementRef.current && triggerRef !== null && triggerRef !== void 0 && triggerRef.current) {
       // Recalculate position when the tooltip is first shown
       updatePosition();
@@ -101,21 +99,21 @@ var useTooltipPosition = function useTooltipPosition(triggerRef, elementRef, pla
    * This effect is used to track the position of the trigger element
    * when the tooltip is visible. It will update the position of the tooltip
    */
-  useEffect(function () {
+  useEffect(() => {
     if (!disable && isElementVisible && triggerRef !== null && triggerRef !== void 0 && triggerRef.current && elementRef.current) {
       var animationFrameId;
       var prevRect;
-      var _trackPosition = function trackPosition() {
+      var trackPosition = () => {
         var _triggerRef$current2;
         var currentRect = (_triggerRef$current2 = triggerRef.current) === null || _triggerRef$current2 === void 0 ? void 0 : _triggerRef$current2.getBoundingClientRect();
         if (currentRect && (!prevRect || positionChanged(prevRect, currentRect))) {
           updatePosition();
           prevRect = currentRect;
         }
-        animationFrameId = requestAnimationFrame(_trackPosition);
+        animationFrameId = requestAnimationFrame(trackPosition);
       };
-      animationFrameId = requestAnimationFrame(_trackPosition);
-      return function () {
+      animationFrameId = requestAnimationFrame(trackPosition);
+      return () => {
         cancelAnimationFrame(animationFrameId);
       };
     }

package/dist/esm/components/tooltip/useTooltipPosition/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/components/tooltip/useTooltipPosition/index.tsx"],"sourcesContent":["import { useMemo, useState, RefObject, useEffect, useCallback, useLayoutEffect } from 'react';\nimport { TooltipPlacement, Position } from './constants';\nimport { calculatePosition, positionChanged } from './utilities';\nimport debounce from 'lodash.debounce';\n\n/**\n * A custom hook to calculate and manage the position of a tooltip element relative to its trigger element.\n *\n * @param {RefObject<HTMLElement>} triggerRef - Reference to the DOM element that triggers the menu.\n * @param {RefObject<HTMLElement>} elementRef - Reference to the DOM element that is the menu.\n * @param {TooltipPlacement} placement - The alignment configuration of the menu.\n * @param {boolean} isElementVisible - Tells the hook if the element is visible. If false, the hook will not calculate the position.\n * @param {number} tooltipOffset - The offset of the menu from the trigger element.\n * @param {boolean} disable - Whether to disable the hook.\n * @returns {Position} The calculated position of the menu element.\n */\nexport const useTooltipPosition = (\n\ttriggerRef: RefObject<HTMLElement> | undefined,\n\telementRef: RefObject<HTMLElement>,\n\tplacement: TooltipPlacement,\n\tisElementVisible = true,\n\ttooltipOffset = 10,\n\tdisable = false\n): Position => {\n\tconst offset = tooltipOffset;\n\tconst [tooltipPosition, setTooltipPosition] = useState<Position>({ left: 0, top: 0 });\n\n\tconst alignment = useMemo(\n\t\t() => ({\n\t\t\talign: placement.align,\n\t\t\tposition: placement.position\n\t\t}),\n\t\t[placement.align, placement.position]\n\t);\n\n\tconst updatePosition = useCallback(() => {\n\t\tif (elementRef.current && isElementVisible) {\n\t\t\tconst triggerRect = triggerRef?.current?.getBoundingClientRect();\n\t\t\tconst elementRect = elementRef.current.getBoundingClientRect();\n\t\t\tconst newPosition = calculatePosition(alignment, offset, elementRect, triggerRect);\n\n\t\t\t// only update if we have a new position\n\t\t\tsetTooltipPosition((prevPosition) => {\n\t\t\t\tif (prevPosition.left !== newPosition.left || prevPosition.top !== newPosition.top) {\n\t\t\t\t\treturn newPosition;\n\t\t\t\t}\n\t\t\t\treturn prevPosition;\n\t\t\t});\n\t\t}\n\t}, [alignment, elementRef, isElementVisible, offset, triggerRef]);\n\n\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\tconst debouncedUpdatePosition = useCallback(\n\t\tdebounce(() => {\n\t\t\tupdatePosition();\n\t\t}, 5),\n\t\t[updatePosition]\n\t);\n\n\tuseEffect(() => {\n\t\tif (!disable) {\n\t\t\tconst currentElement = elementRef.current;\n\n\t\t\t// We need to debounce the resize observer to prevent \"resize loops\"\n\t\t\t// there are instances where the resize observer will trigger a resize event\n\t\t\t// before the browser has painted which throws a loop of resize events\n\t\t\t// and causes errors on the window\n\t\t\t//\n\t\t\t// The observers are purposefully using a different debounce than the event listeners\n\t\t\t// as the observers need to be debounced to prevent loops, but updating the position\n\t\t\t// needs to happen more immediately\n\t\t\tconst resizeObserver = new ResizeObserver(debounce(updatePosition));\n\t\t\tconst mutationObserver = new MutationObserver(debounce(updatePosition));\n\n\t\t\tif (currentElement) {\n\t\t\t\tresizeObserver.observe(currentElement);\n\t\t\t\tmutationObserver.observe(currentElement, {\n\t\t\t\t\tattributeFilter: ['style', 'class'],\n\t\t\t\t\tattributes: true\n\t\t\t\t});\n\t\t\t}\n\n\t\t\tif (isElementVisible) {\n\t\t\t\tupdatePosition();\n\t\t\t\twindow.addEventListener('resize', debouncedUpdatePosition);\n\t\t\t\twindow.addEventListener('scroll', debouncedUpdatePosition);\n\t\t\t}\n\n\t\t\treturn () => {\n\t\t\t\tif (currentElement) {\n\t\t\t\t\tresizeObserver.unobserve(currentElement);\n\t\t\t\t\tmutationObserver.disconnect();\n\t\t\t\t}\n\t\t\t\twindow.removeEventListener('resize', debouncedUpdatePosition);\n\t\t\t\twindow.removeEventListener('scroll', debouncedUpdatePosition);\n\t\t\t};\n\t\t}\n\t}, [\n\t\tdisable,\n\t\ttriggerRef,\n\t\telementRef,\n\t\talignment,\n\t\toffset,\n\t\tisElementVisible,\n\t\tupdatePosition,\n\t\tdebouncedUpdatePosition\n\t]);\n\n\tuseLayoutEffect(() => {\n\t\tif (isElementVisible && !disable && elementRef.current && triggerRef?.current) {\n\t\t\t// Recalculate position when the tooltip is first shown\n\t\t\tupdatePosition();\n\t\t}\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [isElementVisible, updatePosition, disable, elementRef.current, triggerRef?.current]);\n\n\t/**\n\t * This effect is used to track the position of the trigger element\n\t * when the tooltip is visible. It will update the position of the tooltip\n\t */\n\tuseEffect(() => {\n\t\tif (!disable && isElementVisible && triggerRef?.current && elementRef.current) {\n\t\t\tlet animationFrameId: number;\n\t\t\tlet prevRect: DOMRect | undefined;\n\n\t\t\tconst trackPosition = () => {\n\t\t\t\tconst currentRect = triggerRef.current?.getBoundingClientRect();\n\t\t\t\tif (currentRect && (!prevRect || positionChanged(prevRect, currentRect))) {\n\t\t\t\t\tupdatePosition();\n\t\t\t\t\tprevRect = currentRect;\n\t\t\t\t}\n\t\t\t\tanimationFrameId = requestAnimationFrame(trackPosition);\n\t\t\t};\n\n\t\t\tanimationFrameId = requestAnimationFrame(trackPosition);\n\n\t\t\treturn () => {\n\t\t\t\tcancelAnimationFrame(animationFrameId);\n\t\t\t};\n\t\t}\n\t}, [disable, isElementVisible, triggerRef, elementRef, updatePosition]);\n\n\treturn tooltipPosition;\n};\n"],"names":["useTooltipPosition","triggerRef","elementRef","placement","isElementVisible","arguments","length","undefined","tooltipOffset","disable","offset","_useState","useState","left","top","_useState2","_slicedToArray","tooltipPosition","setTooltipPosition","alignment","useMemo","align","position","updatePosition","useCallback","current","_triggerRef$current","triggerRect","getBoundingClientRect","elementRect","newPosition","calculatePosition","prevPosition","debouncedUpdatePosition","debounce","useEffect","currentElement","resizeObserver","ResizeObserver","mutationObserver","MutationObserver","observe","attributeFilter","attributes","window","addEventListener","unobserve","disconnect","removeEventListener","useLayoutEffect","animationFrameId","prevRect","trackPosition","_triggerRef$current2","currentRect","positionChanged","requestAnimationFrame","cancelAnimationFrame"],"mappings":";;;;;AAKA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,IAAMA,kBAAkB,GAAG,SAArBA,kBAAkBA,CAC9BC,UAA8C,EAC9CC,UAAkC,EAClCC,SAA2B,EAIb;AAAA,EAAA,IAHdC,gBAAgB,GAAAC,SAAA,CAAAC,MAAA,GAAA,CAAA,IAAAD,SAAA,CAAA,CAAA,CAAA,KAAAE,SAAA,GAAAF,SAAA,CAAA,CAAA,CAAA,GAAG,IAAI;AAAA,EAAA,IACvBG,aAAa,GAAAH,SAAA,CAAAC,MAAA,GAAA,CAAA,IAAAD,SAAA,CAAA,CAAA,CAAA,KAAAE,SAAA,GAAAF,SAAA,CAAA,CAAA,CAAA,GAAG,EAAE;AAAA,EAAA,IAClBI,OAAO,GAAAJ,SAAA,CAAAC,MAAA,GAAA,CAAA,IAAAD,SAAA,CAAA,CAAA,CAAA,KAAAE,SAAA,GAAAF,SAAA,CAAA,CAAA,CAAA,GAAG,KAAK;EAEf,IAAMK,MAAM,GAAGF,aAAa;EAC5B,IAAAG,SAAA,GAA8CC,QAAQ,CAAW;AAAEC,MAAAA,IAAI,EAAE,CAAC;AAAEC,MAAAA,GAAG,EAAE;AAAE,KAAC,CAAC;IAAAC,UAAA,GAAAC,cAAA,CAAAL,SAAA,EAAA,CAAA,CAAA;AAA9EM,IAAAA,eAAe,GAAAF,UAAA,CAAA,CAAA,CAAA;AAAEG,IAAAA,kBAAkB,GAAAH,UAAA,CAAA,CAAA,CAAA;EAE1C,IAAMI,SAAS,GAAGC,OAAO,CACxB,YAAA;IAAA,OAAO;MACNC,KAAK,EAAElB,SAAS,CAACkB,KAAK;MACtBC,QAAQ,EAAEnB,SAAS,CAACmB;KACpB;EAAA,CAAC,EACF,CAACnB,SAAS,CAACkB,KAAK,EAAElB,SAAS,CAACmB,QAAQ,CACrC,CAAC;AAED,EAAA,IAAMC,cAAc,GAAGC,WAAW,CAAC,YAAM;AACxC,IAAA,IAAItB,UAAU,CAACuB,OAAO,IAAIrB,gBAAgB,EAAE;AAAA,MAAA,IAAAsB,mBAAA;AAC3C,MAAA,IAAMC,WAAW,GAAG1B,UAAU,aAAVA,UAAU,KAAA,MAAA,GAAA,MAAA,GAAA,CAAAyB,mBAAA,GAAVzB,UAAU,CAAEwB,OAAO,cAAAC,mBAAA,KAAA,MAAA,GAAA,MAAA,GAAnBA,mBAAA,CAAqBE,qBAAqB,EAAE;MAChE,IAAMC,WAAW,GAAG3B,UAAU,CAACuB,OAAO,CAACG,qBAAqB,EAAE;MAC9D,IAAME,WAAW,GAAGC,iBAAiB,CAACZ,SAAS,EAAET,MAAM,EAAEmB,WAAW,EAAEF,WAAW,CAAC;;AAElF;MACAT,kBAAkB,CAAC,UAACc,YAAY,EAAK;AACpC,QAAA,IAAIA,YAAY,CAACnB,IAAI,KAAKiB,WAAW,CAACjB,IAAI,IAAImB,YAAY,CAAClB,GAAG,KAAKgB,WAAW,CAAChB,GAAG,EAAE;AACnF,UAAA,OAAOgB,WAAW;AACnB,QAAA;AACA,QAAA,OAAOE,YAAY;AACpB,MAAA,CAAC,CAAC;AACH,IAAA;AACD,EAAA,CAAC,EAAE,CAACb,SAAS,EAAEjB,UAAU,EAAEE,gBAAgB,EAAEM,MAAM,EAAET,UAAU,CAAC,CAAC;;AAEjE;AACA,EAAA,IAAMgC,uBAAuB,GAAGT,WAAW,CAC1CU,QAAQ,CAAC,YAAM;AACdX,IAAAA,cAAc,EAAE;AACjB,EAAA,CAAC,EAAE,CAAC,CAAC,EACL,CAACA,cAAc,CAChB,CAAC;AAEDY,EAAAA,SAAS,CAAC,YAAM;IACf,IAAI,CAAC1B,OAAO,EAAE;AACb,MAAA,IAAM2B,cAAc,GAAGlC,UAAU,CAACuB,OAAO;;AAEzC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;MACA,IAAMY,cAAc,GAAG,IAAIC,cAAc,CAACJ,QAAQ,CAACX,cAAc,CAAC,CAAC;MACnE,IAAMgB,gBAAgB,GAAG,IAAIC,gBAAgB,CAACN,QAAQ,CAACX,cAAc,CAAC,CAAC;AAEvE,MAAA,IAAIa,cAAc,EAAE;AACnBC,QAAAA,cAAc,CAACI,OAAO,CAACL,cAAc,CAAC;AACtCG,QAAAA,gBAAgB,CAACE,OAAO,CAACL,cAAc,EAAE;AACxCM,UAAAA,eAAe,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC;AACnCC,UAAAA,UAAU,EAAE;AACb,SAAC,CAAC;AACH,MAAA;AAEA,MAAA,IAAIvC,gBAAgB,EAAE;AACrBmB,QAAAA,cAAc,EAAE;AAChBqB,QAAAA,MAAM,CAACC,gBAAgB,CAAC,QAAQ,EAAEZ,uBAAuB,CAAC;AAC1DW,QAAAA,MAAM,CAACC,gBAAgB,CAAC,QAAQ,EAAEZ,uBAAuB,CAAC;AAC3D,MAAA;AAEA,MAAA,OAAO,YAAM;AACZ,QAAA,IAAIG,cAAc,EAAE;AACnBC,UAAAA,cAAc,CAACS,SAAS,CAACV,cAAc,CAAC;UACxCG,gBAAgB,CAACQ,UAAU,EAAE;AAC9B,QAAA;AACAH,QAAAA,MAAM,CAACI,mBAAmB,CAAC,QAAQ,EAAEf,uBAAuB,CAAC;AAC7DW,QAAAA,MAAM,CAACI,mBAAmB,CAAC,QAAQ,EAAEf,uBAAuB,CAAC;MAC9D,CAAC;AACF,IAAA;AACD,EAAA,CAAC,EAAE,CACFxB,OAAO,EACPR,UAAU,EACVC,UAAU,EACViB,SAAS,EACTT,MAAM,EACNN,gBAAgB,EAChBmB,cAAc,EACdU,uBAAuB,CACvB,CAAC;AAEFgB,EAAAA,eAAe,CAAC,YAAM;AACrB,IAAA,IAAI7C,gBAAgB,IAAI,CAACK,OAAO,IAAIP,UAAU,CAACuB,OAAO,IAAIxB,UAAU,aAAVA,UAAU,KAAA,MAAA,IAAVA,UAAU,CAAEwB,OAAO,EAAE;AAC9E;AACAF,MAAAA,cAAc,EAAE;AACjB,IAAA;AACA;EACD,CAAC,EAAE,CAACnB,gBAAgB,EAAEmB,cAAc,EAAEd,OAAO,EAAEP,UAAU,CAACuB,OAAO,EAAExB,UAAU,aAAVA,UAAU,KAAA,MAAA,GAAA,MAAA,GAAVA,UAAU,CAAEwB,OAAO,CAAC,CAAC;;AAExF;AACD;AACA;AACA;AACCU,EAAAA,SAAS,CAAC,YAAM;AACf,IAAA,IAAI,CAAC1B,OAAO,IAAIL,gBAAgB,IAAIH,UAAU,KAAA,IAAA,IAAVA,UAAU,KAAA,MAAA,IAAVA,UAAU,CAAEwB,OAAO,IAAIvB,UAAU,CAACuB,OAAO,EAAE;AAC9E,MAAA,IAAIyB,gBAAwB;AAC5B,MAAA,IAAIC,QAA6B;AAEjC,MAAA,IAAMC,cAAa,GAAG,SAAhBA,aAAaA,GAAS;AAAA,QAAA,IAAAC,oBAAA;AAC3B,QAAA,IAAMC,WAAW,GAAA,CAAAD,oBAAA,GAAGpD,UAAU,CAACwB,OAAO,MAAA,IAAA,IAAA4B,oBAAA,KAAA,MAAA,GAAA,MAAA,GAAlBA,oBAAA,CAAoBzB,qBAAqB,EAAE;AAC/D,QAAA,IAAI0B,WAAW,KAAK,CAACH,QAAQ,IAAII,eAAe,CAACJ,QAAQ,EAAEG,WAAW,CAAC,CAAC,EAAE;AACzE/B,UAAAA,cAAc,EAAE;AAChB4B,UAAAA,QAAQ,GAAGG,WAAW;AACvB,QAAA;AACAJ,QAAAA,gBAAgB,GAAGM,qBAAqB,CAACJ,cAAa,CAAC;MACxD,CAAC;AAEDF,MAAAA,gBAAgB,GAAGM,qBAAqB,CAACJ,cAAa,CAAC;AAEvD,MAAA,OAAO,YAAM;QACZK,oBAAoB,CAACP,gBAAgB,CAAC;MACvC,CAAC;AACF,IAAA;AACD,EAAA,CAAC,EAAE,CAACzC,OAAO,EAAEL,gBAAgB,EAAEH,UAAU,EAAEC,UAAU,EAAEqB,cAAc,CAAC,CAAC;AAEvE,EAAA,OAAON,eAAe;AACvB;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../../src/components/tooltip/useTooltipPosition/index.tsx"],"sourcesContent":["import { useMemo, useState, RefObject, useEffect, useCallback, useLayoutEffect } from 'react';\nimport { TooltipPlacement, Position } from './constants';\nimport { calculatePosition, positionChanged } from './utilities';\nimport debounce from 'lodash.debounce';\n\n/**\n * A custom hook to calculate and manage the position of a tooltip element relative to its trigger element.\n *\n * @param {RefObject<HTMLElement>} triggerRef - Reference to the DOM element that triggers the menu.\n * @param {RefObject<HTMLElement>} elementRef - Reference to the DOM element that is the menu.\n * @param {TooltipPlacement} placement - The alignment configuration of the menu.\n * @param {boolean} isElementVisible - Tells the hook if the element is visible. If false, the hook will not calculate the position.\n * @param {number} tooltipOffset - The offset of the menu from the trigger element.\n * @param {boolean} disable - Whether to disable the hook.\n * @returns {Position} The calculated position of the menu element.\n */\nexport const useTooltipPosition = (\n\ttriggerRef: RefObject<HTMLElement> | undefined,\n\telementRef: RefObject<HTMLElement>,\n\tplacement: TooltipPlacement,\n\tisElementVisible = true,\n\ttooltipOffset = 10,\n\tdisable = false\n): Position => {\n\tconst offset = tooltipOffset;\n\tconst [tooltipPosition, setTooltipPosition] = useState<Position>({ left: 0, top: 0 });\n\n\tconst alignment = useMemo(\n\t\t() => ({\n\t\t\talign: placement.align,\n\t\t\tposition: placement.position\n\t\t}),\n\t\t[placement.align, placement.position]\n\t);\n\n\tconst updatePosition = useCallback(() => {\n\t\tif (elementRef.current && isElementVisible) {\n\t\t\tconst triggerRect = triggerRef?.current?.getBoundingClientRect();\n\t\t\tconst elementRect = elementRef.current.getBoundingClientRect();\n\t\t\tconst newPosition = calculatePosition(alignment, offset, elementRect, triggerRect);\n\n\t\t\t// only update if we have a new position\n\t\t\tsetTooltipPosition((prevPosition) => {\n\t\t\t\tif (prevPosition.left !== newPosition.left || prevPosition.top !== newPosition.top) {\n\t\t\t\t\treturn newPosition;\n\t\t\t\t}\n\t\t\t\treturn prevPosition;\n\t\t\t});\n\t\t}\n\t}, [alignment, elementRef, isElementVisible, offset, triggerRef]);\n\n\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\tconst debouncedUpdatePosition = useCallback(\n\t\tdebounce(() => {\n\t\t\tupdatePosition();\n\t\t}, 5),\n\t\t[updatePosition]\n\t);\n\n\tuseEffect(() => {\n\t\tif (!disable) {\n\t\t\tconst currentElement = elementRef.current;\n\n\t\t\t// We need to debounce the resize observer to prevent \"resize loops\"\n\t\t\t// there are instances where the resize observer will trigger a resize event\n\t\t\t// before the browser has painted which throws a loop of resize events\n\t\t\t// and causes errors on the window\n\t\t\t//\n\t\t\t// The observers are purposefully using a different debounce than the event listeners\n\t\t\t// as the observers need to be debounced to prevent loops, but updating the position\n\t\t\t// needs to happen more immediately\n\t\t\tconst resizeObserver = new ResizeObserver(debounce(updatePosition));\n\t\t\tconst mutationObserver = new MutationObserver(debounce(updatePosition));\n\n\t\t\tif (currentElement) {\n\t\t\t\tresizeObserver.observe(currentElement);\n\t\t\t\tmutationObserver.observe(currentElement, {\n\t\t\t\t\tattributeFilter: ['style', 'class'],\n\t\t\t\t\tattributes: true\n\t\t\t\t});\n\t\t\t}\n\n\t\t\tif (isElementVisible) {\n\t\t\t\tupdatePosition();\n\t\t\t\twindow.addEventListener('resize', debouncedUpdatePosition);\n\t\t\t\twindow.addEventListener('scroll', debouncedUpdatePosition);\n\t\t\t}\n\n\t\t\treturn () => {\n\t\t\t\tif (currentElement) {\n\t\t\t\t\tresizeObserver.unobserve(currentElement);\n\t\t\t\t\tmutationObserver.disconnect();\n\t\t\t\t}\n\t\t\t\twindow.removeEventListener('resize', debouncedUpdatePosition);\n\t\t\t\twindow.removeEventListener('scroll', debouncedUpdatePosition);\n\t\t\t};\n\t\t}\n\t}, [\n\t\tdisable,\n\t\ttriggerRef,\n\t\telementRef,\n\t\talignment,\n\t\toffset,\n\t\tisElementVisible,\n\t\tupdatePosition,\n\t\tdebouncedUpdatePosition\n\t]);\n\n\tuseLayoutEffect(() => {\n\t\tif (isElementVisible && !disable && elementRef.current && triggerRef?.current) {\n\t\t\t// Recalculate position when the tooltip is first shown\n\t\t\tupdatePosition();\n\t\t}\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [isElementVisible, updatePosition, disable, elementRef.current, triggerRef?.current]);\n\n\t/**\n\t * This effect is used to track the position of the trigger element\n\t * when the tooltip is visible. It will update the position of the tooltip\n\t */\n\tuseEffect(() => {\n\t\tif (!disable && isElementVisible && triggerRef?.current && elementRef.current) {\n\t\t\tlet animationFrameId: number;\n\t\t\tlet prevRect: DOMRect | undefined;\n\n\t\t\tconst trackPosition = () => {\n\t\t\t\tconst currentRect = triggerRef.current?.getBoundingClientRect();\n\t\t\t\tif (currentRect && (!prevRect || positionChanged(prevRect, currentRect))) {\n\t\t\t\t\tupdatePosition();\n\t\t\t\t\tprevRect = currentRect;\n\t\t\t\t}\n\t\t\t\tanimationFrameId = requestAnimationFrame(trackPosition);\n\t\t\t};\n\n\t\t\tanimationFrameId = requestAnimationFrame(trackPosition);\n\n\t\t\treturn () => {\n\t\t\t\tcancelAnimationFrame(animationFrameId);\n\t\t\t};\n\t\t}\n\t}, [disable, isElementVisible, triggerRef, elementRef, updatePosition]);\n\n\treturn tooltipPosition;\n};\n"],"names":["useTooltipPosition","triggerRef","elementRef","placement","isElementVisible","arguments","length","undefined","tooltipOffset","disable","offset","_useState","useState","left","top","_useState2","_slicedToArray","tooltipPosition","setTooltipPosition","alignment","useMemo","align","position","updatePosition","useCallback","current","_triggerRef$current","triggerRect","getBoundingClientRect","elementRect","newPosition","calculatePosition","prevPosition","debouncedUpdatePosition","debounce","useEffect","currentElement","resizeObserver","ResizeObserver","mutationObserver","MutationObserver","observe","attributeFilter","attributes","window","addEventListener","unobserve","disconnect","removeEventListener","useLayoutEffect","animationFrameId","prevRect","trackPosition","_triggerRef$current2","currentRect","positionChanged","requestAnimationFrame","cancelAnimationFrame"],"mappings":";;;;;AAKA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,IAAMA,kBAAkB,GAAG,SAArBA,kBAAkBA,CAC9BC,UAA8C,EAC9CC,UAAkC,EAClCC,SAA2B,EAIb;AAAA,EAAA,IAHdC,gBAAgB,GAAAC,SAAA,CAAAC,MAAA,GAAA,CAAA,IAAAD,SAAA,CAAA,CAAA,CAAA,KAAAE,SAAA,GAAAF,SAAA,CAAA,CAAA,CAAA,GAAG,IAAI;AAAA,EAAA,IACvBG,aAAa,GAAAH,SAAA,CAAAC,MAAA,GAAA,CAAA,IAAAD,SAAA,CAAA,CAAA,CAAA,KAAAE,SAAA,GAAAF,SAAA,CAAA,CAAA,CAAA,GAAG,EAAE;AAAA,EAAA,IAClBI,OAAO,GAAAJ,SAAA,CAAAC,MAAA,GAAA,CAAA,IAAAD,SAAA,CAAA,CAAA,CAAA,KAAAE,SAAA,GAAAF,SAAA,CAAA,CAAA,CAAA,GAAG,KAAK;EAEf,IAAMK,MAAM,GAAGF,aAAa;EAC5B,IAAAG,SAAA,GAA8CC,QAAQ,CAAW;AAAEC,MAAAA,IAAI,EAAE,CAAC;AAAEC,MAAAA,GAAG,EAAE;AAAE,KAAC,CAAC;IAAAC,UAAA,GAAAC,cAAA,CAAAL,SAAA,EAAA,CAAA,CAAA;AAA9EM,IAAAA,eAAe,GAAAF,UAAA,CAAA,CAAA,CAAA;AAAEG,IAAAA,kBAAkB,GAAAH,UAAA,CAAA,CAAA,CAAA;AAE1C,EAAA,IAAMI,SAAS,GAAGC,OAAO,CACxB,OAAO;IACNC,KAAK,EAAElB,SAAS,CAACkB,KAAK;IACtBC,QAAQ,EAAEnB,SAAS,CAACmB;GACpB,CAAC,EACF,CAACnB,SAAS,CAACkB,KAAK,EAAElB,SAAS,CAACmB,QAAQ,CACrC,CAAC;AAED,EAAA,IAAMC,cAAc,GAAGC,WAAW,CAAC,MAAM;AACxC,IAAA,IAAItB,UAAU,CAACuB,OAAO,IAAIrB,gBAAgB,EAAE;AAAA,MAAA,IAAAsB,mBAAA;AAC3C,MAAA,IAAMC,WAAW,GAAG1B,UAAU,aAAVA,UAAU,KAAA,MAAA,GAAA,MAAA,GAAA,CAAAyB,mBAAA,GAAVzB,UAAU,CAAEwB,OAAO,cAAAC,mBAAA,KAAA,MAAA,GAAA,MAAA,GAAnBA,mBAAA,CAAqBE,qBAAqB,EAAE;MAChE,IAAMC,WAAW,GAAG3B,UAAU,CAACuB,OAAO,CAACG,qBAAqB,EAAE;MAC9D,IAAME,WAAW,GAAGC,iBAAiB,CAACZ,SAAS,EAAET,MAAM,EAAEmB,WAAW,EAAEF,WAAW,CAAC;;AAElF;MACAT,kBAAkB,CAAEc,YAAY,IAAK;AACpC,QAAA,IAAIA,YAAY,CAACnB,IAAI,KAAKiB,WAAW,CAACjB,IAAI,IAAImB,YAAY,CAAClB,GAAG,KAAKgB,WAAW,CAAChB,GAAG,EAAE;AACnF,UAAA,OAAOgB,WAAW;AACnB,QAAA;AACA,QAAA,OAAOE,YAAY;AACpB,MAAA,CAAC,CAAC;AACH,IAAA;AACD,EAAA,CAAC,EAAE,CAACb,SAAS,EAAEjB,UAAU,EAAEE,gBAAgB,EAAEM,MAAM,EAAET,UAAU,CAAC,CAAC;;AAEjE;AACA,EAAA,IAAMgC,uBAAuB,GAAGT,WAAW,CAC1CU,QAAQ,CAAC,MAAM;AACdX,IAAAA,cAAc,EAAE;AACjB,EAAA,CAAC,EAAE,CAAC,CAAC,EACL,CAACA,cAAc,CAChB,CAAC;AAEDY,EAAAA,SAAS,CAAC,MAAM;IACf,IAAI,CAAC1B,OAAO,EAAE;AACb,MAAA,IAAM2B,cAAc,GAAGlC,UAAU,CAACuB,OAAO;;AAEzC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;MACA,IAAMY,cAAc,GAAG,IAAIC,cAAc,CAACJ,QAAQ,CAACX,cAAc,CAAC,CAAC;MACnE,IAAMgB,gBAAgB,GAAG,IAAIC,gBAAgB,CAACN,QAAQ,CAACX,cAAc,CAAC,CAAC;AAEvE,MAAA,IAAIa,cAAc,EAAE;AACnBC,QAAAA,cAAc,CAACI,OAAO,CAACL,cAAc,CAAC;AACtCG,QAAAA,gBAAgB,CAACE,OAAO,CAACL,cAAc,EAAE;AACxCM,UAAAA,eAAe,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC;AACnCC,UAAAA,UAAU,EAAE;AACb,SAAC,CAAC;AACH,MAAA;AAEA,MAAA,IAAIvC,gBAAgB,EAAE;AACrBmB,QAAAA,cAAc,EAAE;AAChBqB,QAAAA,MAAM,CAACC,gBAAgB,CAAC,QAAQ,EAAEZ,uBAAuB,CAAC;AAC1DW,QAAAA,MAAM,CAACC,gBAAgB,CAAC,QAAQ,EAAEZ,uBAAuB,CAAC;AAC3D,MAAA;AAEA,MAAA,OAAO,MAAM;AACZ,QAAA,IAAIG,cAAc,EAAE;AACnBC,UAAAA,cAAc,CAACS,SAAS,CAACV,cAAc,CAAC;UACxCG,gBAAgB,CAACQ,UAAU,EAAE;AAC9B,QAAA;AACAH,QAAAA,MAAM,CAACI,mBAAmB,CAAC,QAAQ,EAAEf,uBAAuB,CAAC;AAC7DW,QAAAA,MAAM,CAACI,mBAAmB,CAAC,QAAQ,EAAEf,uBAAuB,CAAC;MAC9D,CAAC;AACF,IAAA;AACD,EAAA,CAAC,EAAE,CACFxB,OAAO,EACPR,UAAU,EACVC,UAAU,EACViB,SAAS,EACTT,MAAM,EACNN,gBAAgB,EAChBmB,cAAc,EACdU,uBAAuB,CACvB,CAAC;AAEFgB,EAAAA,eAAe,CAAC,MAAM;AACrB,IAAA,IAAI7C,gBAAgB,IAAI,CAACK,OAAO,IAAIP,UAAU,CAACuB,OAAO,IAAIxB,UAAU,aAAVA,UAAU,KAAA,MAAA,IAAVA,UAAU,CAAEwB,OAAO,EAAE;AAC9E;AACAF,MAAAA,cAAc,EAAE;AACjB,IAAA;AACA;EACD,CAAC,EAAE,CAACnB,gBAAgB,EAAEmB,cAAc,EAAEd,OAAO,EAAEP,UAAU,CAACuB,OAAO,EAAExB,UAAU,aAAVA,UAAU,KAAA,MAAA,GAAA,MAAA,GAAVA,UAAU,CAAEwB,OAAO,CAAC,CAAC;;AAExF;AACD;AACA;AACA;AACCU,EAAAA,SAAS,CAAC,MAAM;AACf,IAAA,IAAI,CAAC1B,OAAO,IAAIL,gBAAgB,IAAIH,UAAU,KAAA,IAAA,IAAVA,UAAU,KAAA,MAAA,IAAVA,UAAU,CAAEwB,OAAO,IAAIvB,UAAU,CAACuB,OAAO,EAAE;AAC9E,MAAA,IAAIyB,gBAAwB;AAC5B,MAAA,IAAIC,QAA6B;MAEjC,IAAMC,aAAa,GAAGA,MAAM;AAAA,QAAA,IAAAC,oBAAA;AAC3B,QAAA,IAAMC,WAAW,GAAA,CAAAD,oBAAA,GAAGpD,UAAU,CAACwB,OAAO,MAAA,IAAA,IAAA4B,oBAAA,KAAA,MAAA,GAAA,MAAA,GAAlBA,oBAAA,CAAoBzB,qBAAqB,EAAE;AAC/D,QAAA,IAAI0B,WAAW,KAAK,CAACH,QAAQ,IAAII,eAAe,CAACJ,QAAQ,EAAEG,WAAW,CAAC,CAAC,EAAE;AACzE/B,UAAAA,cAAc,EAAE;AAChB4B,UAAAA,QAAQ,GAAGG,WAAW;AACvB,QAAA;AACAJ,QAAAA,gBAAgB,GAAGM,qBAAqB,CAACJ,aAAa,CAAC;MACxD,CAAC;AAEDF,MAAAA,gBAAgB,GAAGM,qBAAqB,CAACJ,aAAa,CAAC;AAEvD,MAAA,OAAO,MAAM;QACZK,oBAAoB,CAACP,gBAAgB,CAAC;MACvC,CAAC;AACF,IAAA;AACD,EAAA,CAAC,EAAE,CAACzC,OAAO,EAAEL,gBAAgB,EAAEH,UAAU,EAAEC,UAAU,EAAEqB,cAAc,CAAC,CAAC;AAEvE,EAAA,OAAON,eAAe;AACvB;;;;"}

package/dist/esm/components/tooltip/useTooltipPosition/utilities.js

@@ -7,7 +7,7 @@
  * @param triggerRect - Bounding rect of the trigger element.
  * @returns {Position} An object with `left` and `top` coordinates for the element (keys sorted alphabetically).
  */
-var calculatePosition = function calculatePosition(alignment, offset, elementRect, triggerRect) {
+var calculatePosition = (alignment, offset, elementRect, triggerRect) => {
   if (!triggerRect) {
     // fallback to (0,0) if no trigger is available
     return {
@@ -58,8 +58,8 @@ var calculatePosition = function calculatePosition(alignment, offset, elementRec
       break;
   }
   return {
-    left: left,
-    top: top
+    left,
+    top
   };
 };
 
@@ -70,7 +70,7 @@ var calculatePosition = function calculatePosition(alignment, offset, elementRec
  * @param next - The current bounding rectangle of the element.
  * @returns {boolean} True if the position has changed by more than 0.5 pixels, false otherwise.
  */
-var positionChanged = function positionChanged(prev, next) {
+var positionChanged = (prev, next) => {
   return Math.abs(prev.top - next.top) > 0.5 || Math.abs(prev.left - next.left) > 0.5;
 };
 

package/dist/esm/components/tooltip/useTooltipPosition/utilities.js.map

@@ -1 +1 @@
-{"version":3,"file":"utilities.js","sources":["../../../../../src/components/tooltip/useTooltipPosition/utilities.ts"],"sourcesContent":["import { TooltipPlacement, Position } from './constants';\n\n/**\n * Calculates the position of an element (e.g., a tooltip or menu) based on alignment and offset.\n *\n * @param alignment - Object containing position ('top', 'bottom', 'left', 'right') and anchor ('start', 'center', 'end').\n * @param offset - Number of pixels to offset the positioned element.\n * @param elementRect - Bounding rect of the element being positioned.\n * @param triggerRect - Bounding rect of the trigger element.\n * @returns {Position} An object with `left` and `top` coordinates for the element (keys sorted alphabetically).\n */\nexport const calculatePosition = (\n\talignment: TooltipPlacement,\n\toffset: number,\n\telementRect: DOMRect,\n\ttriggerRect?: DOMRect\n): Position => {\n\tif (!triggerRect) {\n\t\t// fallback to (0,0) if no trigger is available\n\t\treturn { left: 0, top: 0 };\n\t}\n\n\tconst { position } = alignment;\n\n\t// For left/right positioned tooltips or menus, always center align vertically\n\t// regardless of the provided `align` value\n\tconst anchor = position === 'left' || position === 'right' ? 'center' : alignment.align;\n\n\tlet top = 0;\n\tlet left = 0;\n\n\t// Primary positioning based on side\n\tswitch (position) {\n\t\tcase 'top':\n\t\t\ttop = triggerRect.top - elementRect.height - offset;\n\t\t\tbreak;\n\t\tcase 'bottom':\n\t\t\ttop = triggerRect.bottom + offset;\n\t\t\tbreak;\n\t\tcase 'left':\n\t\t\tleft = triggerRect.left - elementRect.width - offset;\n\t\t\tbreak;\n\t\tcase 'right':\n\t\t\tleft = triggerRect.right + offset;\n\t\t\tbreak;\n\t}\n\n\t// Secondary alignment\n\tswitch (position) {\n\t\tcase 'top':\n\t\tcase 'bottom':\n\t\t\tif (anchor === 'start') {\n\t\t\t\tleft = triggerRect.left;\n\t\t\t} else if (anchor === 'center') {\n\t\t\t\tleft = triggerRect.left + (triggerRect.width - elementRect.width) / 2;\n\t\t\t} else if (anchor === 'end') {\n\t\t\t\tleft = triggerRect.right - elementRect.width;\n\t\t\t}\n\t\t\tbreak;\n\n\t\tcase 'left':\n\t\tcase 'right':\n\t\t\t// forced to center alignment vertically\n\t\t\ttop = triggerRect.top + (triggerRect.height - elementRect.height) / 2;\n\t\t\tbreak;\n\t}\n\n\treturn { left, top };\n};\n\n/**\n * Determines if the position of an element has changed significantly.\n *\n * @param prev - The previous bounding rectangle of the element.\n * @param next - The current bounding rectangle of the element.\n * @returns {boolean} True if the position has changed by more than 0.5 pixels, false otherwise.\n */\nexport const positionChanged = (prev: DOMRect, next: DOMRect): boolean => {\n\treturn Math.abs(prev.top - next.top) > 0.5 || Math.abs(prev.left - next.left) > 0.5;\n};\n"],"names":["calculatePosition","alignment","offset","elementRect","triggerRect","left","top","position","anchor","align","height","bottom","width","right","positionChanged","prev","next","Math","abs"],"mappings":"AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,IAAMA,iBAAiB,GAAG,SAApBA,iBAAiBA,CAC7BC,SAA2B,EAC3BC,MAAc,EACdC,WAAoB,EACpBC,WAAqB,EACP;EACd,IAAI,CAACA,WAAW,EAAE;AACjB;IACA,OAAO;AAAEC,MAAAA,IAAI,EAAE,CAAC;AAAEC,MAAAA,GAAG,EAAE;KAAG;AAC3B,EAAA;AAEA,EAAA,IAAQC,QAAQ,GAAKN,SAAS,CAAtBM,QAAQ;;AAEhB;AACA;AACA,EAAA,IAAMC,MAAM,GAAGD,QAAQ,KAAK,MAAM,IAAIA,QAAQ,KAAK,OAAO,GAAG,QAAQ,GAAGN,SAAS,CAACQ,KAAK;EAEvF,IAAIH,GAAG,GAAG,CAAC;EACX,IAAID,IAAI,GAAG,CAAC;;AAEZ;AACA,EAAA,QAAQE,QAAQ;AACf,IAAA,KAAK,KAAK;MACTD,GAAG,GAAGF,WAAW,CAACE,GAAG,GAAGH,WAAW,CAACO,MAAM,GAAGR,MAAM;AACnD,MAAA;AACD,IAAA,KAAK,QAAQ;AACZI,MAAAA,GAAG,GAAGF,WAAW,CAACO,MAAM,GAAGT,MAAM;AACjC,MAAA;AACD,IAAA,KAAK,MAAM;MACVG,IAAI,GAAGD,WAAW,CAACC,IAAI,GAAGF,WAAW,CAACS,KAAK,GAAGV,MAAM;AACpD,MAAA;AACD,IAAA,KAAK,OAAO;AACXG,MAAAA,IAAI,GAAGD,WAAW,CAACS,KAAK,GAAGX,MAAM;AACjC,MAAA;AACF;;AAEA;AACA,EAAA,QAAQK,QAAQ;AACf,IAAA,KAAK,KAAK;AACV,IAAA,KAAK,QAAQ;MACZ,IAAIC,MAAM,KAAK,OAAO,EAAE;QACvBH,IAAI,GAAGD,WAAW,CAACC,IAAI;AACxB,MAAA,CAAC,MAAM,IAAIG,MAAM,KAAK,QAAQ,EAAE;AAC/BH,QAAAA,IAAI,GAAGD,WAAW,CAACC,IAAI,GAAG,CAACD,WAAW,CAACQ,KAAK,GAAGT,WAAW,CAACS,KAAK,IAAI,CAAC;AACtE,MAAA,CAAC,MAAM,IAAIJ,MAAM,KAAK,KAAK,EAAE;AAC5BH,QAAAA,IAAI,GAAGD,WAAW,CAACS,KAAK,GAAGV,WAAW,CAACS,KAAK;AAC7C,MAAA;AACA,MAAA;AAED,IAAA,KAAK,MAAM;AACX,IAAA,KAAK,OAAO;AACX;AACAN,MAAAA,GAAG,GAAGF,WAAW,CAACE,GAAG,GAAG,CAACF,WAAW,CAACM,MAAM,GAAGP,WAAW,CAACO,MAAM,IAAI,CAAC;AACrE,MAAA;AACF;EAEA,OAAO;AAAEL,IAAAA,IAAI,EAAJA,IAAI;AAAEC,IAAAA,GAAG,EAAHA;GAAK;AACrB;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,IAAMQ,eAAe,GAAG,SAAlBA,eAAeA,CAAIC,IAAa,EAAEC,IAAa,EAAc;AACzE,EAAA,OAAOC,IAAI,CAACC,GAAG,CAACH,IAAI,CAACT,GAAG,GAAGU,IAAI,CAACV,GAAG,CAAC,GAAG,GAAG,IAAIW,IAAI,CAACC,GAAG,CAACH,IAAI,CAACV,IAAI,GAAGW,IAAI,CAACX,IAAI,CAAC,GAAG,GAAG;AACpF;;;;"}
+{"version":3,"file":"utilities.js","sources":["../../../../../src/components/tooltip/useTooltipPosition/utilities.ts"],"sourcesContent":["import { TooltipPlacement, Position } from './constants';\n\n/**\n * Calculates the position of an element (e.g., a tooltip or menu) based on alignment and offset.\n *\n * @param alignment - Object containing position ('top', 'bottom', 'left', 'right') and anchor ('start', 'center', 'end').\n * @param offset - Number of pixels to offset the positioned element.\n * @param elementRect - Bounding rect of the element being positioned.\n * @param triggerRect - Bounding rect of the trigger element.\n * @returns {Position} An object with `left` and `top` coordinates for the element (keys sorted alphabetically).\n */\nexport const calculatePosition = (\n\talignment: TooltipPlacement,\n\toffset: number,\n\telementRect: DOMRect,\n\ttriggerRect?: DOMRect\n): Position => {\n\tif (!triggerRect) {\n\t\t// fallback to (0,0) if no trigger is available\n\t\treturn { left: 0, top: 0 };\n\t}\n\n\tconst { position } = alignment;\n\n\t// For left/right positioned tooltips or menus, always center align vertically\n\t// regardless of the provided `align` value\n\tconst anchor = position === 'left' || position === 'right' ? 'center' : alignment.align;\n\n\tlet top = 0;\n\tlet left = 0;\n\n\t// Primary positioning based on side\n\tswitch (position) {\n\t\tcase 'top':\n\t\t\ttop = triggerRect.top - elementRect.height - offset;\n\t\t\tbreak;\n\t\tcase 'bottom':\n\t\t\ttop = triggerRect.bottom + offset;\n\t\t\tbreak;\n\t\tcase 'left':\n\t\t\tleft = triggerRect.left - elementRect.width - offset;\n\t\t\tbreak;\n\t\tcase 'right':\n\t\t\tleft = triggerRect.right + offset;\n\t\t\tbreak;\n\t}\n\n\t// Secondary alignment\n\tswitch (position) {\n\t\tcase 'top':\n\t\tcase 'bottom':\n\t\t\tif (anchor === 'start') {\n\t\t\t\tleft = triggerRect.left;\n\t\t\t} else if (anchor === 'center') {\n\t\t\t\tleft = triggerRect.left + (triggerRect.width - elementRect.width) / 2;\n\t\t\t} else if (anchor === 'end') {\n\t\t\t\tleft = triggerRect.right - elementRect.width;\n\t\t\t}\n\t\t\tbreak;\n\n\t\tcase 'left':\n\t\tcase 'right':\n\t\t\t// forced to center alignment vertically\n\t\t\ttop = triggerRect.top + (triggerRect.height - elementRect.height) / 2;\n\t\t\tbreak;\n\t}\n\n\treturn { left, top };\n};\n\n/**\n * Determines if the position of an element has changed significantly.\n *\n * @param prev - The previous bounding rectangle of the element.\n * @param next - The current bounding rectangle of the element.\n * @returns {boolean} True if the position has changed by more than 0.5 pixels, false otherwise.\n */\nexport const positionChanged = (prev: DOMRect, next: DOMRect): boolean => {\n\treturn Math.abs(prev.top - next.top) > 0.5 || Math.abs(prev.left - next.left) > 0.5;\n};\n"],"names":["calculatePosition","alignment","offset","elementRect","triggerRect","left","top","position","anchor","align","height","bottom","width","right","positionChanged","prev","next","Math","abs"],"mappings":"AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,IAAMA,iBAAiB,GAAGA,CAChCC,SAA2B,EAC3BC,MAAc,EACdC,WAAoB,EACpBC,WAAqB,KACP;EACd,IAAI,CAACA,WAAW,EAAE;AACjB;IACA,OAAO;AAAEC,MAAAA,IAAI,EAAE,CAAC;AAAEC,MAAAA,GAAG,EAAE;KAAG;AAC3B,EAAA;AAEA,EAAA,IAAQC,QAAQ,GAAKN,SAAS,CAAtBM,QAAQ;;AAEhB;AACA;AACA,EAAA,IAAMC,MAAM,GAAGD,QAAQ,KAAK,MAAM,IAAIA,QAAQ,KAAK,OAAO,GAAG,QAAQ,GAAGN,SAAS,CAACQ,KAAK;EAEvF,IAAIH,GAAG,GAAG,CAAC;EACX,IAAID,IAAI,GAAG,CAAC;;AAEZ;AACA,EAAA,QAAQE,QAAQ;AACf,IAAA,KAAK,KAAK;MACTD,GAAG,GAAGF,WAAW,CAACE,GAAG,GAAGH,WAAW,CAACO,MAAM,GAAGR,MAAM;AACnD,MAAA;AACD,IAAA,KAAK,QAAQ;AACZI,MAAAA,GAAG,GAAGF,WAAW,CAACO,MAAM,GAAGT,MAAM;AACjC,MAAA;AACD,IAAA,KAAK,MAAM;MACVG,IAAI,GAAGD,WAAW,CAACC,IAAI,GAAGF,WAAW,CAACS,KAAK,GAAGV,MAAM;AACpD,MAAA;AACD,IAAA,KAAK,OAAO;AACXG,MAAAA,IAAI,GAAGD,WAAW,CAACS,KAAK,GAAGX,MAAM;AACjC,MAAA;AACF;;AAEA;AACA,EAAA,QAAQK,QAAQ;AACf,IAAA,KAAK,KAAK;AACV,IAAA,KAAK,QAAQ;MACZ,IAAIC,MAAM,KAAK,OAAO,EAAE;QACvBH,IAAI,GAAGD,WAAW,CAACC,IAAI;AACxB,MAAA,CAAC,MAAM,IAAIG,MAAM,KAAK,QAAQ,EAAE;AAC/BH,QAAAA,IAAI,GAAGD,WAAW,CAACC,IAAI,GAAG,CAACD,WAAW,CAACQ,KAAK,GAAGT,WAAW,CAACS,KAAK,IAAI,CAAC;AACtE,MAAA,CAAC,MAAM,IAAIJ,MAAM,KAAK,KAAK,EAAE;AAC5BH,QAAAA,IAAI,GAAGD,WAAW,CAACS,KAAK,GAAGV,WAAW,CAACS,KAAK;AAC7C,MAAA;AACA,MAAA;AAED,IAAA,KAAK,MAAM;AACX,IAAA,KAAK,OAAO;AACX;AACAN,MAAAA,GAAG,GAAGF,WAAW,CAACE,GAAG,GAAG,CAACF,WAAW,CAACM,MAAM,GAAGP,WAAW,CAACO,MAAM,IAAI,CAAC;AACrE,MAAA;AACF;EAEA,OAAO;IAAEL,IAAI;AAAEC,IAAAA;GAAK;AACrB;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;IACaQ,eAAe,GAAGA,CAACC,IAAa,EAAEC,IAAa,KAAc;AACzE,EAAA,OAAOC,IAAI,CAACC,GAAG,CAACH,IAAI,CAACT,GAAG,GAAGU,IAAI,CAACV,GAAG,CAAC,GAAG,GAAG,IAAIW,IAAI,CAACC,GAAG,CAACH,IAAI,CAACV,IAAI,GAAGW,IAAI,CAACX,IAAI,CAAC,GAAG,GAAG;AACpF;;;;"}

package/dist/esm/components/tooltip/utils.js

@@ -7,11 +7,11 @@
  * @returns {T} A function that, when invoked, calls both the original event handler (if it exists) and the new event handler.
  */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-var curryHandlers = function curryHandlers(ogFunc, newFunc) {
+var curryHandlers = (ogFunc, newFunc) => {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   return function () {
-    if (ogFunc) ogFunc.apply(void 0, arguments);
-    newFunc.apply(void 0, arguments);
+    if (ogFunc) ogFunc(...arguments);
+    newFunc(...arguments);
   };
 };
 

package/dist/esm/components/tooltip/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../../../../src/components/tooltip/utils.ts"],"sourcesContent":["/**\n * Currying function to combine handlers from the parent and child components\n *\n * @template T - The type of the event handlers.\n * @param {T | undefined} ogFunc - The original event handler. This parameter can be undefined.\n * @param {T} newFunc - The new event handler.\n * @returns {T} A function that, when invoked, calls both the original event handler (if it exists) and the new event handler.\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport const curryHandlers = <T extends (...args: any[]) => void>(\n\togFunc: T | undefined,\n\tnewFunc: T\n): T => {\n\t// eslint-disable-next-line @typescript-eslint/no-explicit-any\n\treturn ((...args: any[]) => {\n\t\tif (ogFunc) ogFunc(...args);\n\t\tnewFunc(...args);\n\t}) as T;\n};\n"],"names":["curryHandlers","ogFunc","newFunc","apply","arguments"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,IAAMA,aAAa,GAAG,SAAhBA,aAAaA,CACzBC,MAAqB,EACrBC,OAAU,EACH;AACP;AACA,EAAA,OAAQ,YAAoB;AAC3B,IAAA,IAAID,MAAM,EAAEA,MAAM,CAAAE,KAAA,CAAA,MAAA,EAAAC,SAAQ,CAAC;AAC3BF,IAAAA,OAAO,CAAAC,KAAA,CAAA,MAAA,EAAAC,SAAQ,CAAC;EACjB,CAAC;AACF;;;;"}
+{"version":3,"file":"utils.js","sources":["../../../../src/components/tooltip/utils.ts"],"sourcesContent":["/**\n * Currying function to combine handlers from the parent and child components\n *\n * @template T - The type of the event handlers.\n * @param {T | undefined} ogFunc - The original event handler. This parameter can be undefined.\n * @param {T} newFunc - The new event handler.\n * @returns {T} A function that, when invoked, calls both the original event handler (if it exists) and the new event handler.\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport const curryHandlers = <T extends (...args: any[]) => void>(\n\togFunc: T | undefined,\n\tnewFunc: T\n): T => {\n\t// eslint-disable-next-line @typescript-eslint/no-explicit-any\n\treturn ((...args: any[]) => {\n\t\tif (ogFunc) ogFunc(...args);\n\t\tnewFunc(...args);\n\t}) as T;\n};\n"],"names":["curryHandlers","ogFunc","newFunc","arguments"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;IACaA,aAAa,GAAGA,CAC5BC,MAAqB,EACrBC,OAAU,KACH;AACP;AACA,EAAA,OAAQ,YAAoB;AAC3B,IAAA,IAAID,MAAM,EAAEA,MAAM,CAAC,GAAAE,SAAO,CAAC;IAC3BD,OAAO,CAAC,GAAAC,SAAO,CAAC;EACjB,CAAC;AACF;;;;"}

package/dist/esm/hooks/useAutoClose/useAutoClose.js

@@ -18,7 +18,7 @@ var useAutoClose = function useAutoClose() {
     closed = _React$useState2[0],
     setClosed = _React$useState2[1];
   var currentTimeout = React.useRef(null);
-  React.useEffect(function () {
+  React.useEffect(() => {
     // Reset current timeout when component mounts or when notification changes
     if (currentTimeout.current) {
       resetTimeout();
@@ -29,21 +29,21 @@ var useAutoClose = function useAutoClose() {
     // toast will not close automatically.
     if (shouldAutoClose) {
       setClosed(false);
-      currentTimeout.current = setTimeout(function () {
+      currentTimeout.current = setTimeout(() => {
         setClosed(true);
 
         // Handle onClose after the timeout is elapsed
         if (onClose) onClose();
       }, closeAfterMs);
     }
-    return function () {
+    return () => {
       // Clear timeout when component unmounts
       resetTimeout();
     };
   }, [shouldAutoClose, closeAfterMs, onClose]);
 
   /** Resets the current timeout and `closed` to its initial value */
-  var resetTimeout = function resetTimeout() {
+  var resetTimeout = () => {
     if (currentTimeout.current !== null) {
       clearTimeout(currentTimeout.current);
     }

package/dist/esm/hooks/useAutoClose/useAutoClose.js.map

@@ -1 +1 @@
-{"version":3,"file":"useAutoClose.js","sources":["../../../../src/hooks/useAutoClose/useAutoClose.ts"],"sourcesContent":["import * as React from 'react';\n\nexport type useAutoClose = (\n\tshouldAutoClose?: boolean,\n\tcloseAfterMs?: number,\n\tonClose?: () => unknown\n) => [boolean, React.Dispatch<React.SetStateAction<boolean>>];\n\n/**\n * Hook that exposes a piece of state that allows components to close themselves after a delay\n *\n * @param shouldAutoClose - When false prevents automated close (e.g. can be used to prevent auto-dismissal of interactive elements, an accessibility anti-pattern)\n * @param closeAfterMs - Delay in milliseconds before the component closes\n * @param onClose - Callback to be called when component closes\n * @returns [closed, setClosed] - a boolean tracking closed state, and a setter for that same state\n */\nexport const useAutoClose: useAutoClose = function (\n\tshouldAutoClose = true,\n\tcloseAfterMs = 3000,\n\tonClose\n) {\n\tconst [closed, setClosed] = React.useState<boolean>(false);\n\tconst currentTimeout = React.useRef<NodeJS.Timeout | null>(null);\n\n\tReact.useEffect(() => {\n\t\t// Reset current timeout when component mounts or when notification changes\n\t\tif (currentTimeout.current) {\n\t\t\tresetTimeout();\n\t\t}\n\n\t\t// Allowing autoClose when there are interactive elements in the toast is an anti-pattern\n\t\t// and should be avoided. If autoClose is set to true and interactive elements exist, the\n\t\t// toast will not close automatically.\n\t\tif (shouldAutoClose) {\n\t\t\tsetClosed(false);\n\n\t\t\tcurrentTimeout.current = setTimeout(() => {\n\t\t\t\tsetClosed(true);\n\n\t\t\t\t// Handle onClose after the timeout is elapsed\n\t\t\t\tif (onClose) onClose();\n\t\t\t}, closeAfterMs);\n\t\t}\n\n\t\treturn () => {\n\t\t\t// Clear timeout when component unmounts\n\t\t\tresetTimeout();\n\t\t};\n\t}, [shouldAutoClose, closeAfterMs, onClose]);\n\n\t/** Resets the current timeout and `closed` to its initial value */\n\tconst resetTimeout = (): void => {\n\t\tif (currentTimeout.current !== null) {\n\t\t\tclearTimeout(currentTimeout.current);\n\t\t}\n\t\tsetClosed(false);\n\t};\n\n\treturn [closed, setClosed];\n};\n"],"names":["useAutoClose","shouldAutoClose","arguments","length","undefined","closeAfterMs","onClose","_React$useState","React","useState","_React$useState2","_slicedToArray","closed","setClosed","currentTimeout","useRef","useEffect","current","resetTimeout","setTimeout","clearTimeout"],"mappings":";;;AAQA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;IACaA,YAA0B,GAAG,SAA7BA,YAA0BA,GAIrC;AAAA,EAAA,IAHDC,eAAe,GAAAC,SAAA,CAAAC,MAAA,GAAA,CAAA,IAAAD,SAAA,CAAA,CAAA,CAAA,KAAAE,SAAA,GAAAF,SAAA,CAAA,CAAA,CAAA,GAAG,IAAI;AAAA,EAAA,IACtBG,YAAY,GAAAH,SAAA,CAAAC,MAAA,GAAA,CAAA,IAAAD,SAAA,CAAA,CAAA,CAAA,KAAAE,SAAA,GAAAF,SAAA,CAAA,CAAA,CAAA,GAAG,IAAI;EAAA,IACnBI,OAAO,GAAAJ,SAAA,CAAAC,MAAA,GAAA,CAAA,GAAAD,SAAA,MAAAE,SAAA;AAEP,EAAA,IAAAG,eAAA,GAA4BC,KAAK,CAACC,QAAQ,CAAU,KAAK,CAAC;IAAAC,gBAAA,GAAAC,cAAA,CAAAJ,eAAA,EAAA,CAAA,CAAA;AAAnDK,IAAAA,MAAM,GAAAF,gBAAA,CAAA,CAAA,CAAA;AAAEG,IAAAA,SAAS,GAAAH,gBAAA,CAAA,CAAA,CAAA;AACxB,EAAA,IAAMI,cAAc,GAAGN,KAAK,CAACO,MAAM,CAAwB,IAAI,CAAC;EAEhEP,KAAK,CAACQ,SAAS,CAAC,YAAM;AACrB;IACA,IAAIF,cAAc,CAACG,OAAO,EAAE;AAC3BC,MAAAA,YAAY,EAAE;AACf,IAAA;;AAEA;AACA;AACA;AACA,IAAA,IAAIjB,eAAe,EAAE;MACpBY,SAAS,CAAC,KAAK,CAAC;AAEhBC,MAAAA,cAAc,CAACG,OAAO,GAAGE,UAAU,CAAC,YAAM;QACzCN,SAAS,CAAC,IAAI,CAAC;;AAEf;AACA,QAAA,IAAIP,OAAO,EAAEA,OAAO,EAAE;MACvB,CAAC,EAAED,YAAY,CAAC;AACjB,IAAA;AAEA,IAAA,OAAO,YAAM;AACZ;AACAa,MAAAA,YAAY,EAAE;IACf,CAAC;EACF,CAAC,EAAE,CAACjB,eAAe,EAAEI,YAAY,EAAEC,OAAO,CAAC,CAAC;;AAE5C;AACA,EAAA,IAAMY,YAAY,GAAG,SAAfA,YAAYA,GAAe;AAChC,IAAA,IAAIJ,cAAc,CAACG,OAAO,KAAK,IAAI,EAAE;AACpCG,MAAAA,YAAY,CAACN,cAAc,CAACG,OAAO,CAAC;AACrC,IAAA;IACAJ,SAAS,CAAC,KAAK,CAAC;EACjB,CAAC;AAED,EAAA,OAAO,CAACD,MAAM,EAAEC,SAAS,CAAC;AAC3B;;;;"}
+{"version":3,"file":"useAutoClose.js","sources":["../../../../src/hooks/useAutoClose/useAutoClose.ts"],"sourcesContent":["import * as React from 'react';\n\nexport type useAutoClose = (\n\tshouldAutoClose?: boolean,\n\tcloseAfterMs?: number,\n\tonClose?: () => unknown\n) => [boolean, React.Dispatch<React.SetStateAction<boolean>>];\n\n/**\n * Hook that exposes a piece of state that allows components to close themselves after a delay\n *\n * @param shouldAutoClose - When false prevents automated close (e.g. can be used to prevent auto-dismissal of interactive elements, an accessibility anti-pattern)\n * @param closeAfterMs - Delay in milliseconds before the component closes\n * @param onClose - Callback to be called when component closes\n * @returns [closed, setClosed] - a boolean tracking closed state, and a setter for that same state\n */\nexport const useAutoClose: useAutoClose = function (\n\tshouldAutoClose = true,\n\tcloseAfterMs = 3000,\n\tonClose\n) {\n\tconst [closed, setClosed] = React.useState<boolean>(false);\n\tconst currentTimeout = React.useRef<NodeJS.Timeout | null>(null);\n\n\tReact.useEffect(() => {\n\t\t// Reset current timeout when component mounts or when notification changes\n\t\tif (currentTimeout.current) {\n\t\t\tresetTimeout();\n\t\t}\n\n\t\t// Allowing autoClose when there are interactive elements in the toast is an anti-pattern\n\t\t// and should be avoided. If autoClose is set to true and interactive elements exist, the\n\t\t// toast will not close automatically.\n\t\tif (shouldAutoClose) {\n\t\t\tsetClosed(false);\n\n\t\t\tcurrentTimeout.current = setTimeout(() => {\n\t\t\t\tsetClosed(true);\n\n\t\t\t\t// Handle onClose after the timeout is elapsed\n\t\t\t\tif (onClose) onClose();\n\t\t\t}, closeAfterMs);\n\t\t}\n\n\t\treturn () => {\n\t\t\t// Clear timeout when component unmounts\n\t\t\tresetTimeout();\n\t\t};\n\t}, [shouldAutoClose, closeAfterMs, onClose]);\n\n\t/** Resets the current timeout and `closed` to its initial value */\n\tconst resetTimeout = (): void => {\n\t\tif (currentTimeout.current !== null) {\n\t\t\tclearTimeout(currentTimeout.current);\n\t\t}\n\t\tsetClosed(false);\n\t};\n\n\treturn [closed, setClosed];\n};\n"],"names":["useAutoClose","shouldAutoClose","arguments","length","undefined","closeAfterMs","onClose","_React$useState","React","useState","_React$useState2","_slicedToArray","closed","setClosed","currentTimeout","useRef","useEffect","current","resetTimeout","setTimeout","clearTimeout"],"mappings":";;;AAQA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;IACaA,YAA0B,GAAG,SAA7BA,YAA0BA,GAIrC;AAAA,EAAA,IAHDC,eAAe,GAAAC,SAAA,CAAAC,MAAA,GAAA,CAAA,IAAAD,SAAA,CAAA,CAAA,CAAA,KAAAE,SAAA,GAAAF,SAAA,CAAA,CAAA,CAAA,GAAG,IAAI;AAAA,EAAA,IACtBG,YAAY,GAAAH,SAAA,CAAAC,MAAA,GAAA,CAAA,IAAAD,SAAA,CAAA,CAAA,CAAA,KAAAE,SAAA,GAAAF,SAAA,CAAA,CAAA,CAAA,GAAG,IAAI;EAAA,IACnBI,OAAO,GAAAJ,SAAA,CAAAC,MAAA,GAAA,CAAA,GAAAD,SAAA,MAAAE,SAAA;AAEP,EAAA,IAAAG,eAAA,GAA4BC,KAAK,CAACC,QAAQ,CAAU,KAAK,CAAC;IAAAC,gBAAA,GAAAC,cAAA,CAAAJ,eAAA,EAAA,CAAA,CAAA;AAAnDK,IAAAA,MAAM,GAAAF,gBAAA,CAAA,CAAA,CAAA;AAAEG,IAAAA,SAAS,GAAAH,gBAAA,CAAA,CAAA,CAAA;AACxB,EAAA,IAAMI,cAAc,GAAGN,KAAK,CAACO,MAAM,CAAwB,IAAI,CAAC;EAEhEP,KAAK,CAACQ,SAAS,CAAC,MAAM;AACrB;IACA,IAAIF,cAAc,CAACG,OAAO,EAAE;AAC3BC,MAAAA,YAAY,EAAE;AACf,IAAA;;AAEA;AACA;AACA;AACA,IAAA,IAAIjB,eAAe,EAAE;MACpBY,SAAS,CAAC,KAAK,CAAC;AAEhBC,MAAAA,cAAc,CAACG,OAAO,GAAGE,UAAU,CAAC,MAAM;QACzCN,SAAS,CAAC,IAAI,CAAC;;AAEf;AACA,QAAA,IAAIP,OAAO,EAAEA,OAAO,EAAE;MACvB,CAAC,EAAED,YAAY,CAAC;AACjB,IAAA;AAEA,IAAA,OAAO,MAAM;AACZ;AACAa,MAAAA,YAAY,EAAE;IACf,CAAC;EACF,CAAC,EAAE,CAACjB,eAAe,EAAEI,YAAY,EAAEC,OAAO,CAAC,CAAC;;AAE5C;EACA,IAAMY,YAAY,GAAGA,MAAY;AAChC,IAAA,IAAIJ,cAAc,CAACG,OAAO,KAAK,IAAI,EAAE;AACpCG,MAAAA,YAAY,CAACN,cAAc,CAACG,OAAO,CAAC;AACrC,IAAA;IACAJ,SAAS,CAAC,KAAK,CAAC;EACjB,CAAC;AAED,EAAA,OAAO,CAACD,MAAM,EAAEC,SAAS,CAAC;AAC3B;;;;"}

package/dist/esm/hooks/useBreakpoint/index.js

@@ -32,7 +32,7 @@ function getBreakpoint(width) {
  *
  * @returns {keyof Breakpoints} - the current breakpoint
  */
-var useBreakpoint = function useBreakpoint() {
+var useBreakpoint = () => {
   var initialBreakpoint = getBreakpoint(window.innerWidth);
   var _useState = useState(initialBreakpoint),
     _useState2 = _slicedToArray(_useState, 2),
@@ -46,11 +46,11 @@ var useBreakpoint = function useBreakpoint() {
       instance: new FrameDebounce()
     };
   }
-  useLayoutEffect(function () {
+  useLayoutEffect(() => {
     // setup event listeners
-    var handleResize = function handleResize() {
+    var handleResize = () => {
       var _resizeObserverRef$cu;
-      resizeObserverRef === null || resizeObserverRef === void 0 ? void 0 : (_resizeObserverRef$cu = resizeObserverRef.current) === null || _resizeObserverRef$cu === void 0 ? void 0 : _resizeObserverRef$cu.instance.debounce(function () {
+      resizeObserverRef === null || resizeObserverRef === void 0 ? void 0 : (_resizeObserverRef$cu = resizeObserverRef.current) === null || _resizeObserverRef$cu === void 0 ? void 0 : _resizeObserverRef$cu.instance.debounce(() => {
         var breakpoint = getBreakpoint(window.innerWidth);
         setCurrentBreakpoint(breakpoint);
       });
@@ -58,7 +58,7 @@ var useBreakpoint = function useBreakpoint() {
     window.addEventListener('resize', handleResize);
 
     // clean it up
-    return function () {
+    return () => {
       var _resizeObserverRef$cu2;
       window.removeEventListener('resize', handleResize);
       resizeObserverRef === null || resizeObserverRef === void 0 ? void 0 : (_resizeObserverRef$cu2 = resizeObserverRef.current) === null || _resizeObserverRef$cu2 === void 0 ? void 0 : _resizeObserverRef$cu2.instance.cancel();

package/dist/esm/hooks/useBreakpoint/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/hooks/useBreakpoint/index.ts"],"sourcesContent":["/* eslint-disable sort-keys */\nimport { useState, useRef, useLayoutEffect } from 'react';\nimport { FrameDebounce, FrameDebounceType } from '../../utils/frameDebounce';\n\ntype Breakpoints = {\n\txs: number;\n\tsm: number;\n\tmd: number;\n\tlg: number;\n\txl: number;\n\txxl: number;\n};\n\nconst gridBreakpoints: Breakpoints = {\n\txs: 0,\n\tsm: 600,\n\tmd: 834,\n\tlg: 1024,\n\txl: 1280,\n\txxl: 1440\n};\n\n/**\n * Gets a breakpoint based on the width\n *\n * @param width - The width to determine the breakpoint\n * @returns {keyof Breakpoints} - the current breakpoint\n */\nfunction getBreakpoint(width: number): keyof Breakpoints {\n\tlet currentBreakpoint: keyof Breakpoints = 'xs';\n\n\tfor (const breakpoint in gridBreakpoints) {\n\t\tif (width >= gridBreakpoints[breakpoint as keyof Breakpoints]) {\n\t\t\tcurrentBreakpoint = breakpoint as keyof Breakpoints;\n\t\t}\n\t}\n\n\treturn currentBreakpoint;\n}\n\n/**\n * React Hook to return the current breakpoint\n *\n * @returns {keyof Breakpoints} - the current breakpoint\n */\nexport const useBreakpoint = (): keyof Breakpoints => {\n\tconst initialBreakpoint = getBreakpoint(window.innerWidth);\n\tconst [currentBreakpoint, setCurrentBreakpoint] = useState<keyof Breakpoints>(initialBreakpoint);\n\n\t//create a single ref for us to store a FrameDebounce.\n\tconst resizeObserverRef = useRef<{\n\t\tinstance: FrameDebounceType;\n\t}>();\n\n\tif (!resizeObserverRef.current) {\n\t\tresizeObserverRef.current = {\n\t\t\tinstance: new FrameDebounce()\n\t\t};\n\t}\n\n\tuseLayoutEffect(() => {\n\t\t// setup event listeners\n\t\tconst handleResize = () => {\n\t\t\tresizeObserverRef?.current?.instance.debounce(() => {\n\t\t\t\tconst breakpoint = getBreakpoint(window.innerWidth);\n\t\t\t\tsetCurrentBreakpoint(breakpoint);\n\t\t\t});\n\t\t};\n\n\t\twindow.addEventListener('resize', handleResize);\n\n\t\t// clean it up\n\t\treturn () => {\n\t\t\twindow.removeEventListener('resize', handleResize);\n\t\t\tresizeObserverRef?.current?.instance.cancel();\n\t\t};\n\t}, []);\n\n\treturn currentBreakpoint;\n};\n\nexport default useBreakpoint;\n"],"names":["gridBreakpoints","xs","sm","md","lg","xl","xxl","getBreakpoint","width","currentBreakpoint","breakpoint","useBreakpoint","initialBreakpoint","window","innerWidth","_useState","useState","_useState2","_slicedToArray","setCurrentBreakpoint","resizeObserverRef","useRef","current","instance","FrameDebounce","useLayoutEffect","handleResize","_resizeObserverRef$cu","debounce","addEventListener","_resizeObserverRef$cu2","removeEventListener","cancel"],"mappings":";;;;AAaA,IAAMA,eAA4B,GAAG;AACpCC,EAAAA,EAAE,EAAE,CAAC;AACLC,EAAAA,EAAE,EAAE,GAAG;AACPC,EAAAA,EAAE,EAAE,GAAG;AACPC,EAAAA,EAAE,EAAE,IAAI;AACRC,EAAAA,EAAE,EAAE,IAAI;AACRC,EAAAA,GAAG,EAAE;AACN,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA,SAASC,aAAaA,CAACC,KAAa,EAAqB;EACxD,IAAIC,iBAAoC,GAAG,IAAI;AAE/C,EAAA,KAAK,IAAMC,UAAU,IAAIV,eAAe,EAAE;AACzC,IAAA,IAAIQ,KAAK,IAAIR,eAAe,CAACU,UAAU,CAAsB,EAAE;AAC9DD,MAAAA,iBAAiB,GAAGC,UAA+B;AACpD,IAAA;AACD,EAAA;AAEA,EAAA,OAAOD,iBAAiB;AACzB;;AAEA;AACA;AACA;AACA;AACA;IACaE,aAAa,GAAG,SAAhBA,aAAaA,GAA4B;AACrD,EAAA,IAAMC,iBAAiB,GAAGL,aAAa,CAACM,MAAM,CAACC,UAAU,CAAC;AAC1D,EAAA,IAAAC,SAAA,GAAkDC,QAAQ,CAAoBJ,iBAAiB,CAAC;IAAAK,UAAA,GAAAC,cAAA,CAAAH,SAAA,EAAA,CAAA,CAAA;AAAzFN,IAAAA,iBAAiB,GAAAQ,UAAA,CAAA,CAAA,CAAA;AAAEE,IAAAA,oBAAoB,GAAAF,UAAA,CAAA,CAAA,CAAA;;AAE9C;AACA,EAAA,IAAMG,iBAAiB,GAAGC,MAAM,EAE5B;AAEJ,EAAA,IAAI,CAACD,iBAAiB,CAACE,OAAO,EAAE;IAC/BF,iBAAiB,CAACE,OAAO,GAAG;MAC3BC,QAAQ,EAAE,IAAIC,aAAa;KAC3B;AACF,EAAA;AAEAC,EAAAA,eAAe,CAAC,YAAM;AACrB;AACA,IAAA,IAAMC,YAAY,GAAG,SAAfA,YAAYA,GAAS;AAAA,MAAA,IAAAC,qBAAA;AAC1BP,MAAAA,iBAAiB,aAAjBA,iBAAiB,KAAA,MAAA,GAAA,MAAA,GAAA,CAAAO,qBAAA,GAAjBP,iBAAiB,CAAEE,OAAO,MAAA,IAAA,IAAAK,qBAAA,uBAA1BA,qBAAA,CAA4BJ,QAAQ,CAACK,QAAQ,CAAC,YAAM;AACnD,QAAA,IAAMlB,UAAU,GAAGH,aAAa,CAACM,MAAM,CAACC,UAAU,CAAC;QACnDK,oBAAoB,CAACT,UAAU,CAAC;AACjC,MAAA,CAAC,CAAC;IACH,CAAC;AAEDG,IAAAA,MAAM,CAACgB,gBAAgB,CAAC,QAAQ,EAAEH,YAAY,CAAC;;AAE/C;AACA,IAAA,OAAO,YAAM;AAAA,MAAA,IAAAI,sBAAA;AACZjB,MAAAA,MAAM,CAACkB,mBAAmB,CAAC,QAAQ,EAAEL,YAAY,CAAC;AAClDN,MAAAA,iBAAiB,aAAjBA,iBAAiB,KAAA,MAAA,GAAA,MAAA,GAAA,CAAAU,sBAAA,GAAjBV,iBAAiB,CAAEE,OAAO,MAAA,IAAA,IAAAQ,sBAAA,uBAA1BA,sBAAA,CAA4BP,QAAQ,CAACS,MAAM,EAAE;IAC9C,CAAC;EACF,CAAC,EAAE,EAAE,CAAC;AAEN,EAAA,OAAOvB,iBAAiB;AACzB;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../src/hooks/useBreakpoint/index.ts"],"sourcesContent":["/* eslint-disable sort-keys */\nimport { useState, useRef, useLayoutEffect } from 'react';\nimport { FrameDebounce, FrameDebounceType } from '../../utils/frameDebounce';\n\ntype Breakpoints = {\n\txs: number;\n\tsm: number;\n\tmd: number;\n\tlg: number;\n\txl: number;\n\txxl: number;\n};\n\nconst gridBreakpoints: Breakpoints = {\n\txs: 0,\n\tsm: 600,\n\tmd: 834,\n\tlg: 1024,\n\txl: 1280,\n\txxl: 1440\n};\n\n/**\n * Gets a breakpoint based on the width\n *\n * @param width - The width to determine the breakpoint\n * @returns {keyof Breakpoints} - the current breakpoint\n */\nfunction getBreakpoint(width: number): keyof Breakpoints {\n\tlet currentBreakpoint: keyof Breakpoints = 'xs';\n\n\tfor (const breakpoint in gridBreakpoints) {\n\t\tif (width >= gridBreakpoints[breakpoint as keyof Breakpoints]) {\n\t\t\tcurrentBreakpoint = breakpoint as keyof Breakpoints;\n\t\t}\n\t}\n\n\treturn currentBreakpoint;\n}\n\n/**\n * React Hook to return the current breakpoint\n *\n * @returns {keyof Breakpoints} - the current breakpoint\n */\nexport const useBreakpoint = (): keyof Breakpoints => {\n\tconst initialBreakpoint = getBreakpoint(window.innerWidth);\n\tconst [currentBreakpoint, setCurrentBreakpoint] = useState<keyof Breakpoints>(initialBreakpoint);\n\n\t//create a single ref for us to store a FrameDebounce.\n\tconst resizeObserverRef = useRef<{\n\t\tinstance: FrameDebounceType;\n\t}>();\n\n\tif (!resizeObserverRef.current) {\n\t\tresizeObserverRef.current = {\n\t\t\tinstance: new FrameDebounce()\n\t\t};\n\t}\n\n\tuseLayoutEffect(() => {\n\t\t// setup event listeners\n\t\tconst handleResize = () => {\n\t\t\tresizeObserverRef?.current?.instance.debounce(() => {\n\t\t\t\tconst breakpoint = getBreakpoint(window.innerWidth);\n\t\t\t\tsetCurrentBreakpoint(breakpoint);\n\t\t\t});\n\t\t};\n\n\t\twindow.addEventListener('resize', handleResize);\n\n\t\t// clean it up\n\t\treturn () => {\n\t\t\twindow.removeEventListener('resize', handleResize);\n\t\t\tresizeObserverRef?.current?.instance.cancel();\n\t\t};\n\t}, []);\n\n\treturn currentBreakpoint;\n};\n\nexport default useBreakpoint;\n"],"names":["gridBreakpoints","xs","sm","md","lg","xl","xxl","getBreakpoint","width","currentBreakpoint","breakpoint","useBreakpoint","initialBreakpoint","window","innerWidth","_useState","useState","_useState2","_slicedToArray","setCurrentBreakpoint","resizeObserverRef","useRef","current","instance","FrameDebounce","useLayoutEffect","handleResize","_resizeObserverRef$cu","debounce","addEventListener","_resizeObserverRef$cu2","removeEventListener","cancel"],"mappings":";;;;AAaA,IAAMA,eAA4B,GAAG;AACpCC,EAAAA,EAAE,EAAE,CAAC;AACLC,EAAAA,EAAE,EAAE,GAAG;AACPC,EAAAA,EAAE,EAAE,GAAG;AACPC,EAAAA,EAAE,EAAE,IAAI;AACRC,EAAAA,EAAE,EAAE,IAAI;AACRC,EAAAA,GAAG,EAAE;AACN,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA,SAASC,aAAaA,CAACC,KAAa,EAAqB;EACxD,IAAIC,iBAAoC,GAAG,IAAI;AAE/C,EAAA,KAAK,IAAMC,UAAU,IAAIV,eAAe,EAAE;AACzC,IAAA,IAAIQ,KAAK,IAAIR,eAAe,CAACU,UAAU,CAAsB,EAAE;AAC9DD,MAAAA,iBAAiB,GAAGC,UAA+B;AACpD,IAAA;AACD,EAAA;AAEA,EAAA,OAAOD,iBAAiB;AACzB;;AAEA;AACA;AACA;AACA;AACA;AACO,IAAME,aAAa,GAAGA,MAAyB;AACrD,EAAA,IAAMC,iBAAiB,GAAGL,aAAa,CAACM,MAAM,CAACC,UAAU,CAAC;AAC1D,EAAA,IAAAC,SAAA,GAAkDC,QAAQ,CAAoBJ,iBAAiB,CAAC;IAAAK,UAAA,GAAAC,cAAA,CAAAH,SAAA,EAAA,CAAA,CAAA;AAAzFN,IAAAA,iBAAiB,GAAAQ,UAAA,CAAA,CAAA,CAAA;AAAEE,IAAAA,oBAAoB,GAAAF,UAAA,CAAA,CAAA,CAAA;;AAE9C;AACA,EAAA,IAAMG,iBAAiB,GAAGC,MAAM,EAE5B;AAEJ,EAAA,IAAI,CAACD,iBAAiB,CAACE,OAAO,EAAE;IAC/BF,iBAAiB,CAACE,OAAO,GAAG;MAC3BC,QAAQ,EAAE,IAAIC,aAAa;KAC3B;AACF,EAAA;AAEAC,EAAAA,eAAe,CAAC,MAAM;AACrB;IACA,IAAMC,YAAY,GAAGA,MAAM;AAAA,MAAA,IAAAC,qBAAA;AAC1BP,MAAAA,iBAAiB,aAAjBA,iBAAiB,KAAA,MAAA,GAAA,MAAA,GAAA,CAAAO,qBAAA,GAAjBP,iBAAiB,CAAEE,OAAO,MAAA,IAAA,IAAAK,qBAAA,uBAA1BA,qBAAA,CAA4BJ,QAAQ,CAACK,QAAQ,CAAC,MAAM;AACnD,QAAA,IAAMlB,UAAU,GAAGH,aAAa,CAACM,MAAM,CAACC,UAAU,CAAC;QACnDK,oBAAoB,CAACT,UAAU,CAAC;AACjC,MAAA,CAAC,CAAC;IACH,CAAC;AAEDG,IAAAA,MAAM,CAACgB,gBAAgB,CAAC,QAAQ,EAAEH,YAAY,CAAC;;AAE/C;AACA,IAAA,OAAO,MAAM;AAAA,MAAA,IAAAI,sBAAA;AACZjB,MAAAA,MAAM,CAACkB,mBAAmB,CAAC,QAAQ,EAAEL,YAAY,CAAC;AAClDN,MAAAA,iBAAiB,aAAjBA,iBAAiB,KAAA,MAAA,GAAA,MAAA,GAAA,CAAAU,sBAAA,GAAjBV,iBAAiB,CAAEE,OAAO,MAAA,IAAA,IAAAQ,sBAAA,uBAA1BA,sBAAA,CAA4BP,QAAQ,CAACS,MAAM,EAAE;IAC9C,CAAC;EACF,CAAC,EAAE,EAAE,CAAC;AAEN,EAAA,OAAOvB,iBAAiB;AACzB;;;;"}

package/dist/esm/hooks/useClickOutside/index.js

@@ -15,8 +15,8 @@ var useClickOutside = function useClickOutside(menuRef, triggerRef) {
   var onOutsideClick = arguments.length > 3 ? arguments[3] : undefined;
   var disabled = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
   var excludeSelectors = arguments.length > 5 ? arguments[5] : undefined;
-  useEffect(function () {
-    var handleClickOutside = function handleClickOutside(event) {
+  useEffect(() => {
+    var handleClickOutside = event => {
       var _excludeSelectors$som;
       var menuElement = menuRef === null || menuRef === void 0 ? void 0 : menuRef.current;
       var triggerElement = triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current;
@@ -28,7 +28,7 @@ var useClickOutside = function useClickOutside(menuRef, triggerRef) {
        * Check if the event target is within any of the excluded selectors from
        * the whitelist. If it is, do not call the onOutsideClick function.
        */
-      var isExcluded = (_excludeSelectors$som = excludeSelectors === null || excludeSelectors === void 0 ? void 0 : excludeSelectors.some(function (selector) {
+      var isExcluded = (_excludeSelectors$som = excludeSelectors === null || excludeSelectors === void 0 ? void 0 : excludeSelectors.some(selector => {
         var _event$target;
         return (_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.closest(selector);
       })) !== null && _excludeSelectors$som !== void 0 ? _excludeSelectors$som : false;
@@ -37,7 +37,7 @@ var useClickOutside = function useClickOutside(menuRef, triggerRef) {
       }
     };
     document.body.addEventListener(eventType, handleClickOutside);
-    return function () {
+    return () => {
       document.body.removeEventListener(eventType, handleClickOutside);
     };
   }, [menuRef, triggerRef, onOutsideClick, disabled, eventType, excludeSelectors]);

package/dist/esm/hooks/useClickOutside/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/hooks/useClickOutside/index.tsx"],"sourcesContent":["import { useEffect } from 'react';\n\n/**\n * Hook to detect clicks outside of a given DOM element, with an optional exclusion for selectors.\n *\n * @param menuRef - Reference to the DOM element to detect outside clicks for.\n * @param triggerRef - Reference to the DOM element that caused this menu to be shown.\n * @param eventType - Event type to listen for.\n * @param onOutsideClick - Function to call when a click is detected outside the menuRef element.\n * @param disabled - If the hook should be disabled.\n * @param excludeSelectors - Optional array of CSS selectors to exclude from the outside click detection.\n */\nexport const useClickOutside = (\n\tmenuRef: React.RefObject<HTMLElement>,\n\ttriggerRef: React.RefObject<HTMLElement> | undefined,\n\teventType: 'mousedown' | 'mouseup' | 'click' = 'mousedown',\n\tonOutsideClick: () => void,\n\tdisabled = false,\n\texcludeSelectors?: string[]\n): void => {\n\tuseEffect(() => {\n\t\tconst handleClickOutside = (event: MouseEvent) => {\n\t\t\tconst menuElement = menuRef?.current;\n\t\t\tconst triggerElement = triggerRef?.current;\n\t\t\tconst target = event.target as Node;\n\n\t\t\tconst isClickMenu = menuElement && menuElement.contains(target);\n\t\t\tconst isClickTrigger = triggerElement && triggerElement.contains(target);\n\n\t\t\t/**\n\t\t\t * Check if the event target is within any of the excluded selectors from\n\t\t\t * the whitelist. If it is, do not call the onOutsideClick function.\n\t\t\t */\n\t\t\tconst isExcluded =\n\t\t\t\texcludeSelectors?.some((selector) => (event.target as HTMLElement)?.closest(selector)) ??\n\t\t\t\tfalse;\n\n\t\t\tif (!disabled && !isClickMenu && !isClickTrigger && !isExcluded) {\n\t\t\t\tonOutsideClick();\n\t\t\t}\n\t\t};\n\n\t\tdocument.body.addEventListener(eventType, handleClickOutside);\n\n\t\treturn () => {\n\t\t\tdocument.body.removeEventListener(eventType, handleClickOutside);\n\t\t};\n\t}, [\nmenuRef,\ntriggerRef,\nonOutsideClick,\ndisabled,\neventType,\nexcludeSelectors\n]);\n};\n"],"names":["useClickOutside","menuRef","triggerRef","eventType","arguments","length","undefined","onOutsideClick","disabled","excludeSelectors","useEffect","handleClickOutside","event","_excludeSelectors$som","menuElement","current","triggerElement","target","isClickMenu","contains","isClickTrigger","isExcluded","some","selector","_event$target","closest","document","body","addEventListener","removeEventListener"],"mappings":";;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,IAAMA,eAAe,GAAG,SAAlBA,eAAeA,CAC3BC,OAAqC,EACrCC,UAAoD,EAK1C;AAAA,EAAA,IAJVC,SAA4C,GAAAC,SAAA,CAAAC,MAAA,GAAA,CAAA,IAAAD,SAAA,CAAA,CAAA,CAAA,KAAAE,SAAA,GAAAF,SAAA,CAAA,CAAA,CAAA,GAAG,WAAW;EAAA,IAC1DG,cAA0B,GAAAH,SAAA,CAAAC,MAAA,GAAA,CAAA,GAAAD,SAAA,MAAAE,SAAA;AAAA,EAAA,IAC1BE,QAAQ,GAAAJ,SAAA,CAAAC,MAAA,GAAA,CAAA,IAAAD,SAAA,CAAA,CAAA,CAAA,KAAAE,SAAA,GAAAF,SAAA,CAAA,CAAA,CAAA,GAAG,KAAK;EAAA,IAChBK,gBAA2B,GAAAL,SAAA,CAAAC,MAAA,GAAA,CAAA,GAAAD,SAAA,MAAAE,SAAA;AAE3BI,EAAAA,SAAS,CAAC,YAAM;AACf,IAAA,IAAMC,kBAAkB,GAAG,SAArBA,kBAAkBA,CAAIC,KAAiB,EAAK;AAAA,MAAA,IAAAC,qBAAA;MACjD,IAAMC,WAAW,GAAGb,OAAO,KAAA,IAAA,IAAPA,OAAO,KAAA,MAAA,GAAA,MAAA,GAAPA,OAAO,CAAEc,OAAO;MACpC,IAAMC,cAAc,GAAGd,UAAU,KAAA,IAAA,IAAVA,UAAU,KAAA,MAAA,GAAA,MAAA,GAAVA,UAAU,CAAEa,OAAO;AAC1C,MAAA,IAAME,MAAM,GAAGL,KAAK,CAACK,MAAc;MAEnC,IAAMC,WAAW,GAAGJ,WAAW,IAAIA,WAAW,CAACK,QAAQ,CAACF,MAAM,CAAC;MAC/D,IAAMG,cAAc,GAAGJ,cAAc,IAAIA,cAAc,CAACG,QAAQ,CAACF,MAAM,CAAC;;AAExE;AACH;AACA;AACA;AACG,MAAA,IAAMI,UAAU,GAAA,CAAAR,qBAAA,GACfJ,gBAAgB,KAAA,IAAA,IAAhBA,gBAAgB,KAAA,MAAA,GAAA,MAAA,GAAhBA,gBAAgB,CAAEa,IAAI,CAAC,UAACC,QAAQ,EAAA;AAAA,QAAA,IAAAC,aAAA;AAAA,QAAA,OAAA,CAAAA,aAAA,GAAMZ,KAAK,CAACK,MAAM,MAAA,IAAA,IAAAO,aAAA,KAAA,MAAA,GAAA,MAAA,GAAbA,aAAA,CAA+BC,OAAO,CAACF,QAAQ,CAAC;AAAA,MAAA,CAAA,CAAC,MAAA,IAAA,IAAAV,qBAAA,KAAA,MAAA,GAAAA,qBAAA,GACtF,KAAK;MAEN,IAAI,CAACL,QAAQ,IAAI,CAACU,WAAW,IAAI,CAACE,cAAc,IAAI,CAACC,UAAU,EAAE;AAChEd,QAAAA,cAAc,EAAE;AACjB,MAAA;IACD,CAAC;IAEDmB,QAAQ,CAACC,IAAI,CAACC,gBAAgB,CAACzB,SAAS,EAAEQ,kBAAkB,CAAC;AAE7D,IAAA,OAAO,YAAM;MACZe,QAAQ,CAACC,IAAI,CAACE,mBAAmB,CAAC1B,SAAS,EAAEQ,kBAAkB,CAAC;IACjE,CAAC;AACF,EAAA,CAAC,EAAE,CACJV,OAAO,EACPC,UAAU,EACVK,cAAc,EACdC,QAAQ,EACRL,SAAS,EACTM,gBAAgB,CACf,CAAC;AACF;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../src/hooks/useClickOutside/index.tsx"],"sourcesContent":["import { useEffect } from 'react';\n\n/**\n * Hook to detect clicks outside of a given DOM element, with an optional exclusion for selectors.\n *\n * @param menuRef - Reference to the DOM element to detect outside clicks for.\n * @param triggerRef - Reference to the DOM element that caused this menu to be shown.\n * @param eventType - Event type to listen for.\n * @param onOutsideClick - Function to call when a click is detected outside the menuRef element.\n * @param disabled - If the hook should be disabled.\n * @param excludeSelectors - Optional array of CSS selectors to exclude from the outside click detection.\n */\nexport const useClickOutside = (\n\tmenuRef: React.RefObject<HTMLElement>,\n\ttriggerRef: React.RefObject<HTMLElement> | undefined,\n\teventType: 'mousedown' | 'mouseup' | 'click' = 'mousedown',\n\tonOutsideClick: () => void,\n\tdisabled = false,\n\texcludeSelectors?: string[]\n): void => {\n\tuseEffect(() => {\n\t\tconst handleClickOutside = (event: MouseEvent) => {\n\t\t\tconst menuElement = menuRef?.current;\n\t\t\tconst triggerElement = triggerRef?.current;\n\t\t\tconst target = event.target as Node;\n\n\t\t\tconst isClickMenu = menuElement && menuElement.contains(target);\n\t\t\tconst isClickTrigger = triggerElement && triggerElement.contains(target);\n\n\t\t\t/**\n\t\t\t * Check if the event target is within any of the excluded selectors from\n\t\t\t * the whitelist. If it is, do not call the onOutsideClick function.\n\t\t\t */\n\t\t\tconst isExcluded =\n\t\t\t\texcludeSelectors?.some((selector) => (event.target as HTMLElement)?.closest(selector)) ??\n\t\t\t\tfalse;\n\n\t\t\tif (!disabled && !isClickMenu && !isClickTrigger && !isExcluded) {\n\t\t\t\tonOutsideClick();\n\t\t\t}\n\t\t};\n\n\t\tdocument.body.addEventListener(eventType, handleClickOutside);\n\n\t\treturn () => {\n\t\t\tdocument.body.removeEventListener(eventType, handleClickOutside);\n\t\t};\n\t}, [\nmenuRef,\ntriggerRef,\nonOutsideClick,\ndisabled,\neventType,\nexcludeSelectors\n]);\n};\n"],"names":["useClickOutside","menuRef","triggerRef","eventType","arguments","length","undefined","onOutsideClick","disabled","excludeSelectors","useEffect","handleClickOutside","event","_excludeSelectors$som","menuElement","current","triggerElement","target","isClickMenu","contains","isClickTrigger","isExcluded","some","selector","_event$target","closest","document","body","addEventListener","removeEventListener"],"mappings":";;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,IAAMA,eAAe,GAAG,SAAlBA,eAAeA,CAC3BC,OAAqC,EACrCC,UAAoD,EAK1C;AAAA,EAAA,IAJVC,SAA4C,GAAAC,SAAA,CAAAC,MAAA,GAAA,CAAA,IAAAD,SAAA,CAAA,CAAA,CAAA,KAAAE,SAAA,GAAAF,SAAA,CAAA,CAAA,CAAA,GAAG,WAAW;EAAA,IAC1DG,cAA0B,GAAAH,SAAA,CAAAC,MAAA,GAAA,CAAA,GAAAD,SAAA,MAAAE,SAAA;AAAA,EAAA,IAC1BE,QAAQ,GAAAJ,SAAA,CAAAC,MAAA,GAAA,CAAA,IAAAD,SAAA,CAAA,CAAA,CAAA,KAAAE,SAAA,GAAAF,SAAA,CAAA,CAAA,CAAA,GAAG,KAAK;EAAA,IAChBK,gBAA2B,GAAAL,SAAA,CAAAC,MAAA,GAAA,CAAA,GAAAD,SAAA,MAAAE,SAAA;AAE3BI,EAAAA,SAAS,CAAC,MAAM;IACf,IAAMC,kBAAkB,GAAIC,KAAiB,IAAK;AAAA,MAAA,IAAAC,qBAAA;MACjD,IAAMC,WAAW,GAAGb,OAAO,KAAA,IAAA,IAAPA,OAAO,KAAA,MAAA,GAAA,MAAA,GAAPA,OAAO,CAAEc,OAAO;MACpC,IAAMC,cAAc,GAAGd,UAAU,KAAA,IAAA,IAAVA,UAAU,KAAA,MAAA,GAAA,MAAA,GAAVA,UAAU,CAAEa,OAAO;AAC1C,MAAA,IAAME,MAAM,GAAGL,KAAK,CAACK,MAAc;MAEnC,IAAMC,WAAW,GAAGJ,WAAW,IAAIA,WAAW,CAACK,QAAQ,CAACF,MAAM,CAAC;MAC/D,IAAMG,cAAc,GAAGJ,cAAc,IAAIA,cAAc,CAACG,QAAQ,CAACF,MAAM,CAAC;;AAExE;AACH;AACA;AACA;AACG,MAAA,IAAMI,UAAU,GAAA,CAAAR,qBAAA,GACfJ,gBAAgB,KAAA,IAAA,IAAhBA,gBAAgB,KAAA,MAAA,GAAA,MAAA,GAAhBA,gBAAgB,CAAEa,IAAI,CAAEC,QAAQ,IAAA;AAAA,QAAA,IAAAC,aAAA;AAAA,QAAA,OAAA,CAAAA,aAAA,GAAMZ,KAAK,CAACK,MAAM,MAAA,IAAA,IAAAO,aAAA,KAAA,MAAA,GAAA,MAAA,GAAbA,aAAA,CAA+BC,OAAO,CAACF,QAAQ,CAAC;AAAA,MAAA,CAAA,CAAC,MAAA,IAAA,IAAAV,qBAAA,KAAA,MAAA,GAAAA,qBAAA,GACtF,KAAK;MAEN,IAAI,CAACL,QAAQ,IAAI,CAACU,WAAW,IAAI,CAACE,cAAc,IAAI,CAACC,UAAU,EAAE;AAChEd,QAAAA,cAAc,EAAE;AACjB,MAAA;IACD,CAAC;IAEDmB,QAAQ,CAACC,IAAI,CAACC,gBAAgB,CAACzB,SAAS,EAAEQ,kBAAkB,CAAC;AAE7D,IAAA,OAAO,MAAM;MACZe,QAAQ,CAACC,IAAI,CAACE,mBAAmB,CAAC1B,SAAS,EAAEQ,kBAAkB,CAAC;IACjE,CAAC;AACF,EAAA,CAAC,EAAE,CACJV,OAAO,EACPC,UAAU,EACVK,cAAc,EACdC,QAAQ,EACRL,SAAS,EACTM,gBAAgB,CACf,CAAC;AACF;;;;"}

package/dist/esm/hooks/useCoordinate/index.js

@@ -1,4 +1,4 @@
-import { slicedToArray as _slicedToArray, createForOfIteratorHelper as _createForOfIteratorHelper, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { useState, useRef, useMemo, useCallback, useLayoutEffect } from 'react';
 import { FrameDebounce } from '../../utils/frameDebounce/index.js';
 
@@ -35,41 +35,32 @@ var useCoordinate = function useCoordinate(element) {
 
   //getBoundingClientRect() causes a reflow plus other perf issues.
   // its actually cheaper for the browser to fire intersection observers as we need.
-  var observer = useMemo(function () {
-    return new IntersectionObserver(function (entries) {
-      var _iterator = _createForOfIteratorHelper(entries),
-        _step;
-      try {
-        for (_iterator.s(); !(_step = _iterator.n()).done;) {
-          var entry = _step.value;
-          // The `entry.boundingClientRect` is where all the dimensions are stored
-          var bounds = entry.boundingClientRect.toJSON();
-          var offsetBounds = _objectSpread2(_objectSpread2({}, bounds), {}, {
-            left: bounds.left + window.scrollX,
-            top: bounds.top + window.scrollY
-          });
-          setCoordinate(offsetBounds);
-        }
-
-        // Disconnect the observer to stop from running in the background
-      } catch (err) {
-        _iterator.e(err);
-      } finally {
-        _iterator.f();
+  var observer = useMemo(() => {
+    return new IntersectionObserver(entries => {
+      for (var entry of entries) {
+        // The `entry.boundingClientRect` is where all the dimensions are stored
+        var bounds = entry.boundingClientRect.toJSON();
+        var offsetBounds = _objectSpread2(_objectSpread2({}, bounds), {}, {
+          left: bounds.left + window.scrollX,
+          top: bounds.top + window.scrollY
+        });
+        setCoordinate(offsetBounds);
       }
+
+      // Disconnect the observer to stop from running in the background
       observer.disconnect();
     });
   }, []);
-  var observeElementAndUpdateCoordinates = useCallback(function () {
+  var observeElementAndUpdateCoordinates = useCallback(() => {
     var _intersectionObserver;
     if (!element) {
       return;
     }
-    intersectionObserverRef === null || intersectionObserverRef === void 0 ? void 0 : (_intersectionObserver = intersectionObserverRef.current) === null || _intersectionObserver === void 0 ? void 0 : _intersectionObserver.instance.debounce(function () {
+    intersectionObserverRef === null || intersectionObserverRef === void 0 ? void 0 : (_intersectionObserver = intersectionObserverRef.current) === null || _intersectionObserver === void 0 ? void 0 : _intersectionObserver.instance.debounce(() => {
       observer.observe(element);
     });
   }, [element, observer]);
-  useLayoutEffect(function () {
+  useLayoutEffect(() => {
     if (!element) {
       return;
     }
@@ -107,7 +98,7 @@ var useCoordinate = function useCoordinate(element) {
     }
     window.addEventListener('resize', observeElementAndUpdateCoordinates);
     if (scrollContainer) scrollContainer.addEventListener('scroll', observeElementAndUpdateCoordinates);
-    return function () {
+    return () => {
       var _intersectionObserver2;
       intersectionObserverRef === null || intersectionObserverRef === void 0 ? void 0 : (_intersectionObserver2 = intersectionObserverRef.current) === null || _intersectionObserver2 === void 0 ? void 0 : _intersectionObserver2.instance.cancel();
       window.removeEventListener('resize', observeElementAndUpdateCoordinates);
@@ -116,15 +107,15 @@ var useCoordinate = function useCoordinate(element) {
   }, [element, observer, scrollContainer, disabledScrollTracking, openState, observeElementAndUpdateCoordinates]);
 
   // This effect is responsible for observing the scroll container for changes in size.
-  useLayoutEffect(function () {
+  useLayoutEffect(() => {
     if (!scrollContainer) {
       return;
     }
-    var resizeObserver = new ResizeObserver(function () {
+    var resizeObserver = new ResizeObserver(() => {
       observeElementAndUpdateCoordinates();
     });
     resizeObserver.observe(scrollContainer);
-    return function () {
+    return () => {
       resizeObserver.disconnect();
     };
   }, [element, observeElementAndUpdateCoordinates, scrollContainer]);

package/dist/esm/hooks/useCoordinate/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/hooks/useCoordinate/index.tsx"],"sourcesContent":["import { useLayoutEffect, useRef, useState, useMemo, useCallback } from 'react';\nimport { FrameDebounce, FrameDebounceType } from '../../utils/frameDebounce';\n\n/**\n * get coordinates of an element relative to window and listen for changes.\n *\n * @param element element of type T\n * @param disabledScrollTracking boolean to disable scroll tracking.\n * @param openState boolean to track if the element's open state changed.\n * @returns coordinate object of element.\n */\nexport const useCoordinate = function useCoordinate<T extends HTMLElement | null>(\n\telement: T,\n\tdisabledScrollTracking = false,\n\topenState: boolean\n): {\n\tbottom: number;\n\theight: number;\n\tleft: number;\n\tright: number;\n\ttop: number;\n\twidth: number;\n\tx: number;\n\ty: number;\n} {\n\tconst [coordinate, setCoordinate] = useState({\n\t\tbottom: 0,\n\t\theight: 0,\n\t\tleft: 0,\n\t\tright: 0,\n\t\ttop: 0,\n\t\twidth: 0,\n\t\tx: 0,\n\t\ty: 0\n\t});\n\t//create a single ref for us to store a FrameDebounce.\n\tconst intersectionObserverRef = useRef<{\n\t\tinstance: FrameDebounceType;\n\t}>();\n\n\tconst [scrollContainer, setScrollContainer] = useState<HTMLElement | null>(null);\n\n\t//getBoundingClientRect() causes a reflow plus other perf issues.\n\t// its actually cheaper for the browser to fire intersection observers as we need.\n\tconst observer = useMemo(() => {\n\t\treturn new IntersectionObserver((entries) => {\n\t\t\tfor (const entry of entries) {\n\t\t\t\t// The `entry.boundingClientRect` is where all the dimensions are stored\n\t\t\t\tconst bounds = entry.boundingClientRect.toJSON();\n\n\t\t\t\tconst offsetBounds = {\n\t\t\t\t\t...bounds,\n\t\t\t\t\tleft: bounds.left + window.scrollX,\n\t\t\t\t\ttop: bounds.top + window.scrollY\n\t\t\t\t};\n\n\t\t\t\tsetCoordinate(offsetBounds);\n\t\t\t}\n\n\t\t\t// Disconnect the observer to stop from running in the background\n\t\t\tobserver.disconnect();\n\t\t});\n\t}, []);\n\n\tconst observeElementAndUpdateCoordinates = useCallback(() => {\n\t\tif (!element) {\n\t\t\treturn;\n\t\t}\n\t\tintersectionObserverRef?.current?.instance.debounce(() => {\n\t\t\tobserver.observe(element);\n\t\t});\n\t}, [element, observer]);\n\n\tuseLayoutEffect(() => {\n\t\tif (!element) {\n\t\t\treturn;\n\t\t}\n\n\t\t/**\n\t\t * This block of code detects if the element is within a scrolling container so we can provide more exact calculations\n\t\t * in the event that the element's position needs to be recalculated relative to the container's new scroll position.\n\t\t *\n\t\t * If we detect that the element is within a scrolling container, we store a reference to the scrollable element. That way\n\t\t * we can assign event listeners to the scroll element so that we can recalculate the elements position based on the\n\t\t * scroll value.\n\t\t */\n\t\tif (!disabledScrollTracking) {\n\t\t\tlet elementParent = element.parentElement;\n\n\t\t\twhile (elementParent && scrollContainer === null) {\n\t\t\t\tconst style = window.getComputedStyle(elementParent);\n\t\t\t\tconst overflowY = style.getPropertyValue('overflow-y');\n\n\t\t\t\tif (overflowY === 'auto' || overflowY === 'scroll') {\n\t\t\t\t\tsetScrollContainer(elementParent);\n\t\t\t\t\tbreak;\n\t\t\t\t}\n\n\t\t\t\tif (elementParent.tagName === 'BODY') {\n\t\t\t\t\tbreak;\n\t\t\t\t}\n\n\t\t\t\telementParent = elementParent.parentElement;\n\t\t\t}\n\t\t}\n\n\t\t// observe real quick to setup initial state.\n\t\tobserver.observe(element);\n\n\t\tif (!intersectionObserverRef.current) {\n\t\t\tintersectionObserverRef.current = {\n\t\t\t\tinstance: new FrameDebounce()\n\t\t\t};\n\t\t}\n\n\t\twindow.addEventListener('resize', observeElementAndUpdateCoordinates);\n\t\tif (scrollContainer)\n\t\t\tscrollContainer.addEventListener('scroll', observeElementAndUpdateCoordinates);\n\n\t\treturn () => {\n\t\t\tintersectionObserverRef?.current?.instance.cancel();\n\n\t\t\twindow.removeEventListener('resize', observeElementAndUpdateCoordinates);\n\t\t\tif (scrollContainer)\n\t\t\t\tscrollContainer.removeEventListener('scroll', observeElementAndUpdateCoordinates);\n\t\t};\n\t}, [\n\t\telement,\n\t\tobserver,\n\t\tscrollContainer,\n\t\tdisabledScrollTracking,\n\t\topenState,\n\t\tobserveElementAndUpdateCoordinates\n\t]);\n\n\t// This effect is responsible for observing the scroll container for changes in size.\n\tuseLayoutEffect(() => {\n\t\tif (!scrollContainer) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst resizeObserver = new ResizeObserver(() => {\n\t\t\tobserveElementAndUpdateCoordinates();\n\t\t});\n\n\t\tresizeObserver.observe(scrollContainer);\n\n\t\treturn () => {\n\t\t\tresizeObserver.disconnect();\n\t\t};\n\t}, [element, observeElementAndUpdateCoordinates, scrollContainer]);\n\n\treturn coordinate;\n};\n"],"names":["useCoordinate","element","disabledScrollTracking","arguments","length","undefined","openState","_useState","useState","bottom","height","left","right","top","width","x","y","_useState2","_slicedToArray","coordinate","setCoordinate","intersectionObserverRef","useRef","_useState3","_useState4","scrollContainer","setScrollContainer","observer","useMemo","IntersectionObserver","entries","_iterator","_createForOfIteratorHelper","_step","s","n","done","entry","value","bounds","boundingClientRect","toJSON","offsetBounds","_objectSpread","window","scrollX","scrollY","err","e","f","disconnect","observeElementAndUpdateCoordinates","useCallback","_intersectionObserver","current","instance","debounce","observe","useLayoutEffect","elementParent","parentElement","style","getComputedStyle","overflowY","getPropertyValue","tagName","FrameDebounce","addEventListener","_intersectionObserver2","cancel","removeEventListener","resizeObserver","ResizeObserver"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../src/hooks/useCoordinate/index.tsx"],"sourcesContent":["import { useLayoutEffect, useRef, useState, useMemo, useCallback } from 'react';\nimport { FrameDebounce, FrameDebounceType } from '../../utils/frameDebounce';\n\n/**\n * get coordinates of an element relative to window and listen for changes.\n *\n * @param element element of type T\n * @param disabledScrollTracking boolean to disable scroll tracking.\n * @param openState boolean to track if the element's open state changed.\n * @returns coordinate object of element.\n */\nexport const useCoordinate = function useCoordinate<T extends HTMLElement | null>(\n\telement: T,\n\tdisabledScrollTracking = false,\n\topenState: boolean\n): {\n\tbottom: number;\n\theight: number;\n\tleft: number;\n\tright: number;\n\ttop: number;\n\twidth: number;\n\tx: number;\n\ty: number;\n} {\n\tconst [coordinate, setCoordinate] = useState({\n\t\tbottom: 0,\n\t\theight: 0,\n\t\tleft: 0,\n\t\tright: 0,\n\t\ttop: 0,\n\t\twidth: 0,\n\t\tx: 0,\n\t\ty: 0\n\t});\n\t//create a single ref for us to store a FrameDebounce.\n\tconst intersectionObserverRef = useRef<{\n\t\tinstance: FrameDebounceType;\n\t}>();\n\n\tconst [scrollContainer, setScrollContainer] = useState<HTMLElement | null>(null);\n\n\t//getBoundingClientRect() causes a reflow plus other perf issues.\n\t// its actually cheaper for the browser to fire intersection observers as we need.\n\tconst observer = useMemo(() => {\n\t\treturn new IntersectionObserver((entries) => {\n\t\t\tfor (const entry of entries) {\n\t\t\t\t// The `entry.boundingClientRect` is where all the dimensions are stored\n\t\t\t\tconst bounds = entry.boundingClientRect.toJSON();\n\n\t\t\t\tconst offsetBounds = {\n\t\t\t\t\t...bounds,\n\t\t\t\t\tleft: bounds.left + window.scrollX,\n\t\t\t\t\ttop: bounds.top + window.scrollY\n\t\t\t\t};\n\n\t\t\t\tsetCoordinate(offsetBounds);\n\t\t\t}\n\n\t\t\t// Disconnect the observer to stop from running in the background\n\t\t\tobserver.disconnect();\n\t\t});\n\t}, []);\n\n\tconst observeElementAndUpdateCoordinates = useCallback(() => {\n\t\tif (!element) {\n\t\t\treturn;\n\t\t}\n\t\tintersectionObserverRef?.current?.instance.debounce(() => {\n\t\t\tobserver.observe(element);\n\t\t});\n\t}, [element, observer]);\n\n\tuseLayoutEffect(() => {\n\t\tif (!element) {\n\t\t\treturn;\n\t\t}\n\n\t\t/**\n\t\t * This block of code detects if the element is within a scrolling container so we can provide more exact calculations\n\t\t * in the event that the element's position needs to be recalculated relative to the container's new scroll position.\n\t\t *\n\t\t * If we detect that the element is within a scrolling container, we store a reference to the scrollable element. That way\n\t\t * we can assign event listeners to the scroll element so that we can recalculate the elements position based on the\n\t\t * scroll value.\n\t\t */\n\t\tif (!disabledScrollTracking) {\n\t\t\tlet elementParent = element.parentElement;\n\n\t\t\twhile (elementParent && scrollContainer === null) {\n\t\t\t\tconst style = window.getComputedStyle(elementParent);\n\t\t\t\tconst overflowY = style.getPropertyValue('overflow-y');\n\n\t\t\t\tif (overflowY === 'auto' || overflowY === 'scroll') {\n\t\t\t\t\tsetScrollContainer(elementParent);\n\t\t\t\t\tbreak;\n\t\t\t\t}\n\n\t\t\t\tif (elementParent.tagName === 'BODY') {\n\t\t\t\t\tbreak;\n\t\t\t\t}\n\n\t\t\t\telementParent = elementParent.parentElement;\n\t\t\t}\n\t\t}\n\n\t\t// observe real quick to setup initial state.\n\t\tobserver.observe(element);\n\n\t\tif (!intersectionObserverRef.current) {\n\t\t\tintersectionObserverRef.current = {\n\t\t\t\tinstance: new FrameDebounce()\n\t\t\t};\n\t\t}\n\n\t\twindow.addEventListener('resize', observeElementAndUpdateCoordinates);\n\t\tif (scrollContainer)\n\t\t\tscrollContainer.addEventListener('scroll', observeElementAndUpdateCoordinates);\n\n\t\treturn () => {\n\t\t\tintersectionObserverRef?.current?.instance.cancel();\n\n\t\t\twindow.removeEventListener('resize', observeElementAndUpdateCoordinates);\n\t\t\tif (scrollContainer)\n\t\t\t\tscrollContainer.removeEventListener('scroll', observeElementAndUpdateCoordinates);\n\t\t};\n\t}, [\n\t\telement,\n\t\tobserver,\n\t\tscrollContainer,\n\t\tdisabledScrollTracking,\n\t\topenState,\n\t\tobserveElementAndUpdateCoordinates\n\t]);\n\n\t// This effect is responsible for observing the scroll container for changes in size.\n\tuseLayoutEffect(() => {\n\t\tif (!scrollContainer) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst resizeObserver = new ResizeObserver(() => {\n\t\t\tobserveElementAndUpdateCoordinates();\n\t\t});\n\n\t\tresizeObserver.observe(scrollContainer);\n\n\t\treturn () => {\n\t\t\tresizeObserver.disconnect();\n\t\t};\n\t}, [element, observeElementAndUpdateCoordinates, scrollContainer]);\n\n\treturn coordinate;\n};\n"],"names":["useCoordinate","element","disabledScrollTracking","arguments","length","undefined","openState","_useState","useState","bottom","height","left","right","top","width","x","y","_useState2","_slicedToArray","coordinate","setCoordinate","intersectionObserverRef","useRef","_useState3","_useState4","scrollContainer","setScrollContainer","observer","useMemo","IntersectionObserver","entries","entry","bounds","boundingClientRect","toJSON","offsetBounds","_objectSpread","window","scrollX","scrollY","disconnect","observeElementAndUpdateCoordinates","useCallback","_intersectionObserver","current","instance","debounce","observe","useLayoutEffect","elementParent","parentElement","style","getComputedStyle","overflowY","getPropertyValue","tagName","FrameDebounce","addEventListener","_intersectionObserver2","cancel","removeEventListener","resizeObserver","ResizeObserver"],"mappings":"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"}

package/dist/esm/hooks/useElementDimensions/index.js

@@ -1,4 +1,4 @@
-import { slicedToArray as _slicedToArray, createForOfIteratorHelper as _createForOfIteratorHelper } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import * as React from 'react';
 
 /**
@@ -13,47 +13,34 @@ import * as React from 'react';
  * @returns {ElementDimensions} - The dimensions of the element.
  */
 function useElementDimensions(ref) {
-  var _React$useState = React.useState(function () {
-      return {
-        height: null,
-        width: null
-      };
-    }),
+  var _React$useState = React.useState(() => ({
+      height: null,
+      width: null
+    })),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     dimensions = _React$useState2[0],
     setDimensions = _React$useState2[1];
-  React.useEffect(function () {
+  React.useEffect(() => {
     if (!ref.current) return;
     var expectedWidths = new WeakMap();
     var expectedHeights = new WeakMap();
-    var observer = new ResizeObserver(function (entries) {
-      requestAnimationFrame(function () {
-        var _iterator = _createForOfIteratorHelper(entries),
-          _step;
-        try {
-          for (_iterator.s(); !(_step = _iterator.n()).done;) {
-            var entry = _step.value;
-            var expectedWidth = expectedWidths.get(entry.target);
-            var expectedHeight = expectedHeights.get(entry.target);
-            if (entry.borderBoxSize[0].inlineSize === expectedWidth && entry.borderBoxSize[0].blockSize === expectedHeight) continue;
-            expectedWidths.set(entry.target, entry.borderBoxSize[0].inlineSize);
-            expectedHeights.set(entry.target, entry.borderBoxSize[0].blockSize);
-            setDimensions({
-              height: entry.borderBoxSize[0].blockSize,
-              width: entry.borderBoxSize[0].inlineSize
-            });
-          }
-        } catch (err) {
-          _iterator.e(err);
-        } finally {
-          _iterator.f();
+    var observer = new ResizeObserver(entries => {
+      requestAnimationFrame(() => {
+        for (var entry of entries) {
+          var expectedWidth = expectedWidths.get(entry.target);
+          var expectedHeight = expectedHeights.get(entry.target);
+          if (entry.borderBoxSize[0].inlineSize === expectedWidth && entry.borderBoxSize[0].blockSize === expectedHeight) continue;
+          expectedWidths.set(entry.target, entry.borderBoxSize[0].inlineSize);
+          expectedHeights.set(entry.target, entry.borderBoxSize[0].blockSize);
+          setDimensions({
+            height: entry.borderBoxSize[0].blockSize,
+            width: entry.borderBoxSize[0].inlineSize
+          });
         }
       });
     });
     observer.observe(ref.current);
-    return function () {
-      return observer.disconnect();
-    };
+    return () => observer.disconnect();
     // ref won't trigger a re-render, so it's safe to exclude it from the dependencies array
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);