@veeqo/ui 9.7.1 → 9.9.0

package/dist/components/ViewTab/ViewTab.js

@@ -3,6 +3,7 @@ import '../../hooks/useFocusVisible.js';
 import { useHover } from '../../hooks/useHover.js';
 import { buildClassnames } from '../../utils/buildClassnames.js';
 import 'uid/secure';
+import 'lodash.throttle';
 import { colors } from '../../theme/modules/colors.js';
 import { ViewTabTypes } from './types.js';
 import { ViewButton, Contour, CustomIconWrapper, CounterContainer, CounterText, CrossIconStyling, IconStyling, ThreeDotsIconStyling } from './styled.js';

package/dist/components/ViewTab/ViewTab.js.map

@@ -1 +1 @@
-{"version":3,"file":"ViewTab.js","sources":["../../../src/components/ViewTab/ViewTab.tsx"],"sourcesContent":["import React, { Ref } from 'react';\n\nimport { useHover } from '../../hooks';\nimport { colors } from '../../theme/modules/colors';\n\nimport { ViewTabProps, ViewTabTypes } from './types';\n\nimport {\n  Contour,\n  CounterContainer,\n  CounterText,\n  CrossIconStyling,\n  CustomIconWrapper,\n  IconStyling,\n  Text,\n  ThreeDotsIconStyling,\n  ViewButton,\n} from './styled';\nimport { buildClassnames } from '../../utils/buildClassnames';\n\nexport interface ClassNamesReturnPayload {\n  delete?: string;\n  edit?: string;\n  container?: string;\n  active?: string;\n  counter?: string;\n}\n\nconst generateClassNames = (prefix?: string): ClassNamesReturnPayload => ({\n  delete: prefix ? `${prefix}-delete` : undefined,\n  edit: prefix ? `${prefix}-edit` : undefined,\n  container: prefix ? `${prefix}-view` : undefined,\n  active: prefix ? `${prefix}-active` : undefined,\n  counter: prefix ? `${prefix}-counter` : undefined,\n});\n\nexport const ViewTab = React.forwardRef<HTMLButtonElement, ViewTabProps>(\n  (\n    {\n      id,\n      iconSlot,\n      name,\n      type,\n      className,\n      colourPalette = colors.secondary.blue,\n      customTextColour,\n      count,\n      active = false,\n      onClick,\n      subAction,\n      ariaContext,\n      ...props\n    }: ViewTabProps,\n    ref: Ref<HTMLButtonElement>,\n  ) => {\n    const classNames = generateClassNames(className);\n    const [isHovered, handleEnter, handleLeave] = useHover();\n\n    const action = active && subAction ? subAction : onClick;\n    const handleAction = () => action(id);\n\n    const isDraft = type === ViewTabTypes.draft;\n    const isSaved = type === ViewTabTypes.saved;\n\n    const getLabelAction = () => {\n      if (active && isDraft) return 'Delete';\n      if (active && isSaved) return 'Edit';\n      return '';\n    };\n\n    return (\n      <ViewButton\n        className={buildClassnames([classNames?.container])}\n        onClick={handleAction}\n        role=\"tab\"\n        aria-selected={active}\n        aria-label={`${getLabelAction()} ${name} view ${\n          count ? `with ${count} ${ariaContext}` : ''\n        }`}\n        customTextColour={customTextColour}\n        ref={ref}\n        {...props}\n      >\n        <Contour\n          active={active}\n          onMouseEnter={handleEnter}\n          onMouseLeave={handleLeave}\n          colourPalette={colourPalette}\n          customTextColour={customTextColour}\n        >\n          {iconSlot && <CustomIconWrapper>{iconSlot}</CustomIconWrapper>}\n          <Text variant=\"bodyBold\">{name}</Text>\n          {count !== undefined && count !== null && (\n            <CounterContainer\n              data-testid=\"countContainer\"\n              active={active || isHovered}\n              colourPalette={colourPalette}\n              customTextColour={customTextColour}\n            >\n              <CounterText variant=\"subheadingSmall\">{count}</CounterText>\n            </CounterContainer>\n          )}\n          {isDraft && <CrossIconStyling {...IconStyling} aria-label=\"delete icon\" />}\n          {isSaved && active && <ThreeDotsIconStyling {...IconStyling} aria-label=\"edit icon\" />}\n        </Contour>\n      </ViewButton>\n    );\n  },\n);\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"ViewTab.js","sources":["../../../src/components/ViewTab/ViewTab.tsx"],"sourcesContent":["import React, { Ref } from 'react';\n\nimport { useHover } from '../../hooks';\nimport { colors } from '../../theme/modules/colors';\n\nimport { ViewTabProps, ViewTabTypes } from './types';\n\nimport {\n  Contour,\n  CounterContainer,\n  CounterText,\n  CrossIconStyling,\n  CustomIconWrapper,\n  IconStyling,\n  Text,\n  ThreeDotsIconStyling,\n  ViewButton,\n} from './styled';\nimport { buildClassnames } from '../../utils/buildClassnames';\n\nexport interface ClassNamesReturnPayload {\n  delete?: string;\n  edit?: string;\n  container?: string;\n  active?: string;\n  counter?: string;\n}\n\nconst generateClassNames = (prefix?: string): ClassNamesReturnPayload => ({\n  delete: prefix ? `${prefix}-delete` : undefined,\n  edit: prefix ? `${prefix}-edit` : undefined,\n  container: prefix ? `${prefix}-view` : undefined,\n  active: prefix ? `${prefix}-active` : undefined,\n  counter: prefix ? `${prefix}-counter` : undefined,\n});\n\nexport const ViewTab = React.forwardRef<HTMLButtonElement, ViewTabProps>(\n  (\n    {\n      id,\n      iconSlot,\n      name,\n      type,\n      className,\n      colourPalette = colors.secondary.blue,\n      customTextColour,\n      count,\n      active = false,\n      onClick,\n      subAction,\n      ariaContext,\n      ...props\n    }: ViewTabProps,\n    ref: Ref<HTMLButtonElement>,\n  ) => {\n    const classNames = generateClassNames(className);\n    const [isHovered, handleEnter, handleLeave] = useHover();\n\n    const action = active && subAction ? subAction : onClick;\n    const handleAction = () => action(id);\n\n    const isDraft = type === ViewTabTypes.draft;\n    const isSaved = type === ViewTabTypes.saved;\n\n    const getLabelAction = () => {\n      if (active && isDraft) return 'Delete';\n      if (active && isSaved) return 'Edit';\n      return '';\n    };\n\n    return (\n      <ViewButton\n        className={buildClassnames([classNames?.container])}\n        onClick={handleAction}\n        role=\"tab\"\n        aria-selected={active}\n        aria-label={`${getLabelAction()} ${name} view ${\n          count ? `with ${count} ${ariaContext}` : ''\n        }`}\n        customTextColour={customTextColour}\n        ref={ref}\n        {...props}\n      >\n        <Contour\n          active={active}\n          onMouseEnter={handleEnter}\n          onMouseLeave={handleLeave}\n          colourPalette={colourPalette}\n          customTextColour={customTextColour}\n        >\n          {iconSlot && <CustomIconWrapper>{iconSlot}</CustomIconWrapper>}\n          <Text variant=\"bodyBold\">{name}</Text>\n          {count !== undefined && count !== null && (\n            <CounterContainer\n              data-testid=\"countContainer\"\n              active={active || isHovered}\n              colourPalette={colourPalette}\n              customTextColour={customTextColour}\n            >\n              <CounterText variant=\"subheadingSmall\">{count}</CounterText>\n            </CounterContainer>\n          )}\n          {isDraft && <CrossIconStyling {...IconStyling} aria-label=\"delete icon\" />}\n          {isSaved && active && <ThreeDotsIconStyling {...IconStyling} aria-label=\"edit icon\" />}\n        </Contour>\n      </ViewButton>\n    );\n  },\n);\n"],"names":["React"],"mappings":"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"}

package/dist/components/index.d.ts

@@ -20,7 +20,7 @@ export { CopyToClipboard } from './CopyToClipboard';
 export { DateInputField } from './DateInputField';
 export { DatePicker } from './DatePicker';
 export { DateRangePicker, DATE_RANGE_OPTIONS, DEFAULT_PRESET, DEFAULT_RANGE, DateRanges, getDateRange, } from './DateRangePicker';
-export { DataTable, useCellWidths, useColumns, useDragToScroll, useNested, useScrollPosition, useSelection, } from './DataTable';
+export { DataTable, useCellWidths, useColumns, useNested, useScrollPosition, useSelection, } from './DataTable';
 export { DescriptionList } from './DescriptionList';
 export { DetailPage } from './DetailPage';
 export { DimensionsInput } from './DimensionsInput';
@@ -64,3 +64,4 @@ export { WeightInput } from './WeightInput';
 export { Indicator } from './Indicator';
 export { SelectDropdown } from './SelectDropdown';
 export { ThemeInjector } from './ThemeInjector';
+export { DataGrid } from './DataGrid';

package/dist/hooks/index.d.ts

@@ -6,3 +6,6 @@ export { useHover } from './useHover';
 export { useIsOverflowing } from './useIsOverflowing';
 export { useTabs } from './useTabs';
 export { useId } from './useId';
+export { useDragToScroll } from './useDragToScroll';
+export { useResizeObserver } from './useResizeObserver';
+export { useIntersectionObserver } from './useIntersectionObserver';

package/dist/{components/DataTable/hooks → hooks}/useDragToScroll.cjs

@@ -2,7 +2,12 @@
 
 var React = require('react');
 
-function useDragToScroll(targetRef) {
+/**
+ * Hook which allows the user to scroll horizontally by dragging on a given target element.
+ * @param targetRef - The ref of the element to scroll.
+ * @param ignoreClassName - The className of any elements which should be excluded from the dragging behaviour.
+ */
+function useDragToScroll({ targetRef, ignoreClassName }) {
     React.useEffect(() => {
         if (!targetRef.current)
             return;
@@ -40,8 +45,11 @@ function useDragToScroll(targetRef) {
              * unable to use event.stopPropogation as event is a react Synthetic event which treats the event as the same, as they are on the same node, is discussed here
              * https://dev.to/dvnrsn/why-isn-t-event-stoppropagation-working-1bnm.
              */
-            if (e.target instanceof HTMLElement && ((_c = (_b = (_a = e.target) === null || _a === undefined ? undefined : _a.classList) === null || _b === undefined ? undefined : _b.contains) === null || _c === undefined ? undefined : _c.call(_b, 'th-divider')))
+            if (ignoreClassName &&
+                e.target instanceof HTMLElement &&
+                ((_c = (_b = (_a = e.target) === null || _a === undefined ? undefined : _a.classList) === null || _b === undefined ? undefined : _b.contains) === null || _c === undefined ? undefined : _c.call(_b, ignoreClassName))) {
                 return;
+            }
             position.left = scrollTarget.scrollLeft;
             position.x = e.clientX;
             document.addEventListener('mousemove', mouseMoveHandler);

package/dist/hooks/useDragToScroll.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDragToScroll.cjs","sources":["../../src/hooks/useDragToScroll.ts"],"sourcesContent":["import { useEffect, RefObject } from 'react';\n\ntype UseDragToScrollProps = {\n  targetRef: RefObject<HTMLElement>;\n  ignoreClassName?: string;\n};\n\n/**\n * Hook which allows the user to scroll horizontally by dragging on a given target element.\n * @param targetRef - The ref of the element to scroll.\n * @param ignoreClassName - The className of any elements which should be excluded from the dragging behaviour.\n */\nexport function useDragToScroll({ targetRef, ignoreClassName }: UseDragToScrollProps) {\n  useEffect(() => {\n    if (!targetRef.current) return;\n\n    let isDragging = false;\n    const scrollTarget = targetRef.current;\n    const position = {\n      left: 0,\n      x: 0,\n    };\n\n    const mouseMoveHandler = (e: MouseEvent) => {\n      if (!scrollTarget) return;\n      const dx = e.clientX - position.x;\n      scrollTarget.scrollLeft = position.left - dx;\n      if (!isDragging) {\n        scrollTarget.style.cursor = 'grabbing';\n        scrollTarget.style.userSelect = 'none';\n      }\n      isDragging = true;\n    };\n\n    const mouseUpHandler = () => {\n      document.removeEventListener('mousemove', mouseMoveHandler);\n      document.removeEventListener('mouseup', mouseUpHandler);\n      isDragging = false;\n      if (!scrollTarget) return;\n      scrollTarget.style.removeProperty('cursor');\n      scrollTarget.style.removeProperty('user-select');\n    };\n\n    const mouseDownHandler = (e: MouseEvent) => {\n      if (!scrollTarget) return;\n      /** NOTE: prevents table scroll when resizing columns,\n       * unable to use event.stopPropogation as event is a react Synthetic event which treats the event as the same, as they are on the same node, is discussed here\n       * https://dev.to/dvnrsn/why-isn-t-event-stoppropagation-working-1bnm.\n       */\n      if (\n        ignoreClassName &&\n        e.target instanceof HTMLElement &&\n        e.target?.classList?.contains?.(ignoreClassName)\n      ) {\n        return;\n      }\n\n      position.left = scrollTarget.scrollLeft;\n      position.x = e.clientX;\n      document.addEventListener('mousemove', mouseMoveHandler);\n      document.addEventListener('mouseup', mouseUpHandler);\n    };\n\n    scrollTarget.addEventListener('mousedown', mouseDownHandler);\n\n    /* eslint-disable-next-line consistent-return */\n    return () => scrollTarget?.removeEventListener('mousedown', mouseDownHandler);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [targetRef.current]);\n}\n"],"names":["useEffect"],"mappings":";;;;AAOA;;;;AAIG;SACa,eAAe,CAAC,EAAE,SAAS,EAAE,eAAe,EAAwB,EAAA;IAClFA,eAAS,CAAC,MAAK;QACb,IAAI,CAAC,SAAS,CAAC,OAAO;YAAE;QAExB,IAAI,UAAU,GAAG,KAAK;AACtB,QAAA,MAAM,YAAY,GAAG,SAAS,CAAC,OAAO;AACtC,QAAA,MAAM,QAAQ,GAAG;AACf,YAAA,IAAI,EAAE,CAAC;AACP,YAAA,CAAC,EAAE,CAAC;SACL;AAED,QAAA,MAAM,gBAAgB,GAAG,CAAC,CAAa,KAAI;AACzC,YAAA,IAAI,CAAC,YAAY;gBAAE;YACnB,MAAM,EAAE,GAAG,CAAC,CAAC,OAAO,GAAG,QAAQ,CAAC,CAAC;YACjC,YAAY,CAAC,UAAU,GAAG,QAAQ,CAAC,IAAI,GAAG,EAAE;YAC5C,IAAI,CAAC,UAAU,EAAE;AACf,gBAAA,YAAY,CAAC,KAAK,CAAC,MAAM,GAAG,UAAU;AACtC,gBAAA,YAAY,CAAC,KAAK,CAAC,UAAU,GAAG,MAAM;AACvC;YACD,UAAU,GAAG,IAAI;AACnB,SAAC;QAED,MAAM,cAAc,GAAG,MAAK;AAC1B,YAAA,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,gBAAgB,CAAC;AAC3D,YAAA,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,cAAc,CAAC;YACvD,UAAU,GAAG,KAAK;AAClB,YAAA,IAAI,CAAC,YAAY;gBAAE;AACnB,YAAA,YAAY,CAAC,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC;AAC3C,YAAA,YAAY,CAAC,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC;AAClD,SAAC;AAED,QAAA,MAAM,gBAAgB,GAAG,CAAC,CAAa,KAAI;;AACzC,YAAA,IAAI,CAAC,YAAY;gBAAE;AACnB;;;AAGG;AACH,YAAA,IACE,eAAe;gBACf,CAAC,CAAC,MAAM,YAAY,WAAW;AAC/B,iBAAA,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,CAAC,CAAC,MAAM,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAE,SAAS,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAE,QAAQ,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAA,IAAA,CAAA,EAAA,EAAG,eAAe,CAAC,CAAA,EAChD;gBACA;AACD;AAED,YAAA,QAAQ,CAAC,IAAI,GAAG,YAAY,CAAC,UAAU;AACvC,YAAA,QAAQ,CAAC,CAAC,GAAG,CAAC,CAAC,OAAO;AACtB,YAAA,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,gBAAgB,CAAC;AACxD,YAAA,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,cAAc,CAAC;AACtD,SAAC;AAED,QAAA,YAAY,CAAC,gBAAgB,CAAC,WAAW,EAAE,gBAAgB,CAAC;;AAG5D,QAAA,OAAO,MAAM,YAAY,aAAZ,YAAY,KAAA,SAAA,GAAA,SAAA,GAAZ,YAAY,CAAE,mBAAmB,CAAC,WAAW,EAAE,gBAAgB,CAAC;;AAE/E,KAAC,EAAE,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;AACzB;;;;"}

package/dist/hooks/useDragToScroll.d.ts

@@ -0,0 +1,12 @@
+import { RefObject } from 'react';
+type UseDragToScrollProps = {
+    targetRef: RefObject<HTMLElement>;
+    ignoreClassName?: string;
+};
+/**
+ * Hook which allows the user to scroll horizontally by dragging on a given target element.
+ * @param targetRef - The ref of the element to scroll.
+ * @param ignoreClassName - The className of any elements which should be excluded from the dragging behaviour.
+ */
+export declare function useDragToScroll({ targetRef, ignoreClassName }: UseDragToScrollProps): void;
+export {};

package/dist/{components/DataTable/hooks → hooks}/useDragToScroll.js

@@ -1,6 +1,11 @@
 import { useEffect } from 'react';
 
-function useDragToScroll(targetRef) {
+/**
+ * Hook which allows the user to scroll horizontally by dragging on a given target element.
+ * @param targetRef - The ref of the element to scroll.
+ * @param ignoreClassName - The className of any elements which should be excluded from the dragging behaviour.
+ */
+function useDragToScroll({ targetRef, ignoreClassName }) {
     useEffect(() => {
         if (!targetRef.current)
             return;
@@ -38,8 +43,11 @@ function useDragToScroll(targetRef) {
              * unable to use event.stopPropogation as event is a react Synthetic event which treats the event as the same, as they are on the same node, is discussed here
              * https://dev.to/dvnrsn/why-isn-t-event-stoppropagation-working-1bnm.
              */
-            if (e.target instanceof HTMLElement && ((_c = (_b = (_a = e.target) === null || _a === undefined ? undefined : _a.classList) === null || _b === undefined ? undefined : _b.contains) === null || _c === undefined ? undefined : _c.call(_b, 'th-divider')))
+            if (ignoreClassName &&
+                e.target instanceof HTMLElement &&
+                ((_c = (_b = (_a = e.target) === null || _a === undefined ? undefined : _a.classList) === null || _b === undefined ? undefined : _b.contains) === null || _c === undefined ? undefined : _c.call(_b, ignoreClassName))) {
                 return;
+            }
             position.left = scrollTarget.scrollLeft;
             position.x = e.clientX;
             document.addEventListener('mousemove', mouseMoveHandler);

package/dist/hooks/useDragToScroll.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDragToScroll.js","sources":["../../src/hooks/useDragToScroll.ts"],"sourcesContent":["import { useEffect, RefObject } from 'react';\n\ntype UseDragToScrollProps = {\n  targetRef: RefObject<HTMLElement>;\n  ignoreClassName?: string;\n};\n\n/**\n * Hook which allows the user to scroll horizontally by dragging on a given target element.\n * @param targetRef - The ref of the element to scroll.\n * @param ignoreClassName - The className of any elements which should be excluded from the dragging behaviour.\n */\nexport function useDragToScroll({ targetRef, ignoreClassName }: UseDragToScrollProps) {\n  useEffect(() => {\n    if (!targetRef.current) return;\n\n    let isDragging = false;\n    const scrollTarget = targetRef.current;\n    const position = {\n      left: 0,\n      x: 0,\n    };\n\n    const mouseMoveHandler = (e: MouseEvent) => {\n      if (!scrollTarget) return;\n      const dx = e.clientX - position.x;\n      scrollTarget.scrollLeft = position.left - dx;\n      if (!isDragging) {\n        scrollTarget.style.cursor = 'grabbing';\n        scrollTarget.style.userSelect = 'none';\n      }\n      isDragging = true;\n    };\n\n    const mouseUpHandler = () => {\n      document.removeEventListener('mousemove', mouseMoveHandler);\n      document.removeEventListener('mouseup', mouseUpHandler);\n      isDragging = false;\n      if (!scrollTarget) return;\n      scrollTarget.style.removeProperty('cursor');\n      scrollTarget.style.removeProperty('user-select');\n    };\n\n    const mouseDownHandler = (e: MouseEvent) => {\n      if (!scrollTarget) return;\n      /** NOTE: prevents table scroll when resizing columns,\n       * unable to use event.stopPropogation as event is a react Synthetic event which treats the event as the same, as they are on the same node, is discussed here\n       * https://dev.to/dvnrsn/why-isn-t-event-stoppropagation-working-1bnm.\n       */\n      if (\n        ignoreClassName &&\n        e.target instanceof HTMLElement &&\n        e.target?.classList?.contains?.(ignoreClassName)\n      ) {\n        return;\n      }\n\n      position.left = scrollTarget.scrollLeft;\n      position.x = e.clientX;\n      document.addEventListener('mousemove', mouseMoveHandler);\n      document.addEventListener('mouseup', mouseUpHandler);\n    };\n\n    scrollTarget.addEventListener('mousedown', mouseDownHandler);\n\n    /* eslint-disable-next-line consistent-return */\n    return () => scrollTarget?.removeEventListener('mousedown', mouseDownHandler);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [targetRef.current]);\n}\n"],"names":[],"mappings":";;AAOA;;;;AAIG;SACa,eAAe,CAAC,EAAE,SAAS,EAAE,eAAe,EAAwB,EAAA;IAClF,SAAS,CAAC,MAAK;QACb,IAAI,CAAC,SAAS,CAAC,OAAO;YAAE;QAExB,IAAI,UAAU,GAAG,KAAK;AACtB,QAAA,MAAM,YAAY,GAAG,SAAS,CAAC,OAAO;AACtC,QAAA,MAAM,QAAQ,GAAG;AACf,YAAA,IAAI,EAAE,CAAC;AACP,YAAA,CAAC,EAAE,CAAC;SACL;AAED,QAAA,MAAM,gBAAgB,GAAG,CAAC,CAAa,KAAI;AACzC,YAAA,IAAI,CAAC,YAAY;gBAAE;YACnB,MAAM,EAAE,GAAG,CAAC,CAAC,OAAO,GAAG,QAAQ,CAAC,CAAC;YACjC,YAAY,CAAC,UAAU,GAAG,QAAQ,CAAC,IAAI,GAAG,EAAE;YAC5C,IAAI,CAAC,UAAU,EAAE;AACf,gBAAA,YAAY,CAAC,KAAK,CAAC,MAAM,GAAG,UAAU;AACtC,gBAAA,YAAY,CAAC,KAAK,CAAC,UAAU,GAAG,MAAM;AACvC;YACD,UAAU,GAAG,IAAI;AACnB,SAAC;QAED,MAAM,cAAc,GAAG,MAAK;AAC1B,YAAA,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,gBAAgB,CAAC;AAC3D,YAAA,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,cAAc,CAAC;YACvD,UAAU,GAAG,KAAK;AAClB,YAAA,IAAI,CAAC,YAAY;gBAAE;AACnB,YAAA,YAAY,CAAC,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC;AAC3C,YAAA,YAAY,CAAC,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC;AAClD,SAAC;AAED,QAAA,MAAM,gBAAgB,GAAG,CAAC,CAAa,KAAI;;AACzC,YAAA,IAAI,CAAC,YAAY;gBAAE;AACnB;;;AAGG;AACH,YAAA,IACE,eAAe;gBACf,CAAC,CAAC,MAAM,YAAY,WAAW;AAC/B,iBAAA,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,CAAC,CAAC,MAAM,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAE,SAAS,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAE,QAAQ,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAA,IAAA,CAAA,EAAA,EAAG,eAAe,CAAC,CAAA,EAChD;gBACA;AACD;AAED,YAAA,QAAQ,CAAC,IAAI,GAAG,YAAY,CAAC,UAAU;AACvC,YAAA,QAAQ,CAAC,CAAC,GAAG,CAAC,CAAC,OAAO;AACtB,YAAA,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,gBAAgB,CAAC;AACxD,YAAA,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,cAAc,CAAC;AACtD,SAAC;AAED,QAAA,YAAY,CAAC,gBAAgB,CAAC,WAAW,EAAE,gBAAgB,CAAC;;AAG5D,QAAA,OAAO,MAAM,YAAY,aAAZ,YAAY,KAAA,SAAA,GAAA,SAAA,GAAZ,YAAY,CAAE,mBAAmB,CAAC,WAAW,EAAE,gBAAgB,CAAC;;AAE/E,KAAC,EAAE,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;AACzB;;;;"}

package/dist/hooks/useIntersectionObserver.cjs

@@ -0,0 +1,57 @@
+'use strict';
+
+var React = require('react');
+var throttle = require('lodash.throttle');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var throttle__default = /*#__PURE__*/_interopDefaultCompat(throttle);
+
+/**
+ * Hook which sets up an `IntersectionObserver` for a given element, and fires a callback when an intersection occurs.
+ * @param targetRef The element to observe.
+ * @param intersectionHandler The callback to invoke when an intersection occurs.
+ * @param throttleMs (Optional) the number of ms to throttle the observer callback.
+ */
+const useIntersectionObserver = ({ targetRef, intersectionHandler, throttleMs, }) => {
+    const intersectionHandlerRef = React.useRef();
+    intersectionHandlerRef.current = intersectionHandler;
+    const intersectionObserverRef = React.useRef();
+    const isIntersectingRef = React.useRef();
+    const currentTargetRef = React.useRef();
+    React.useEffect(() => {
+        const observerCallback = (entries) => {
+            const [entry] = entries;
+            const { isIntersecting } = entry;
+            if (isIntersectingRef.current && isIntersectingRef.current === isIntersecting) {
+                return;
+            }
+            isIntersectingRef.current = isIntersecting;
+            if (intersectionHandlerRef.current) {
+                intersectionHandlerRef.current(isIntersecting);
+            }
+        };
+        intersectionObserverRef.current = new IntersectionObserver(throttleMs ? throttle__default.default(observerCallback, throttleMs) : observerCallback);
+        return () => {
+            if (intersectionObserverRef.current) {
+                intersectionObserverRef.current.disconnect();
+            }
+        };
+    }, [throttleMs]);
+    React.useEffect(() => {
+        if (intersectionObserverRef.current) {
+            if (targetRef.current &&
+                currentTargetRef.current &&
+                targetRef.current === currentTargetRef.current) {
+                return;
+            }
+            intersectionObserverRef.current.disconnect();
+            if (targetRef.current) {
+                intersectionObserverRef.current.observe(targetRef.current);
+            }
+        }
+    });
+};
+
+exports.useIntersectionObserver = useIntersectionObserver;
+//# sourceMappingURL=useIntersectionObserver.cjs.map

package/dist/hooks/useIntersectionObserver.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIntersectionObserver.cjs","sources":["../../src/hooks/useIntersectionObserver.ts"],"sourcesContent":["import { RefObject, useEffect, useRef } from 'react';\n\nimport throttle from 'lodash.throttle';\n\ntype IntersectionHandler = (intersecting: boolean) => void;\n\ntype UseIntersectionObserverProps = {\n  targetRef: RefObject<HTMLElement | null>;\n  intersectionHandler: IntersectionHandler;\n  throttleMs?: number;\n};\n\n/**\n * Hook which sets up an `IntersectionObserver` for a given element, and fires a callback when an intersection occurs.\n * @param targetRef The element to observe.\n * @param intersectionHandler The callback to invoke when an intersection occurs.\n * @param throttleMs (Optional) the number of ms to throttle the observer callback.\n */\nexport const useIntersectionObserver = ({\n  targetRef,\n  intersectionHandler,\n  throttleMs,\n}: UseIntersectionObserverProps) => {\n  const intersectionHandlerRef = useRef<IntersectionHandler>();\n  intersectionHandlerRef.current = intersectionHandler;\n\n  const intersectionObserverRef = useRef<IntersectionObserver>();\n  const isIntersectingRef = useRef<boolean>();\n\n  const currentTargetRef = useRef();\n\n  useEffect(() => {\n    const observerCallback = (entries: IntersectionObserverEntry[]) => {\n      const [entry] = entries;\n      const { isIntersecting } = entry;\n\n      if (isIntersectingRef.current && isIntersectingRef.current === isIntersecting) {\n        return;\n      }\n\n      isIntersectingRef.current = isIntersecting;\n\n      if (intersectionHandlerRef.current) {\n        intersectionHandlerRef.current(isIntersecting);\n      }\n    };\n\n    intersectionObserverRef.current = new IntersectionObserver(\n      throttleMs ? throttle(observerCallback, throttleMs) : observerCallback,\n    );\n\n    return () => {\n      if (intersectionObserverRef.current) {\n        intersectionObserverRef.current.disconnect();\n      }\n    };\n  }, [throttleMs]);\n\n  useEffect(() => {\n    if (intersectionObserverRef.current) {\n      if (\n        targetRef.current &&\n        currentTargetRef.current &&\n        targetRef.current === currentTargetRef.current\n      ) {\n        return;\n      }\n\n      intersectionObserverRef.current.disconnect();\n\n      if (targetRef.current) {\n        intersectionObserverRef.current.observe(targetRef.current);\n      }\n    }\n  });\n};\n"],"names":["useRef","useEffect","throttle"],"mappings":";;;;;;;;;AAYA;;;;;AAKG;AACI,MAAM,uBAAuB,GAAG,CAAC,EACtC,SAAS,EACT,mBAAmB,EACnB,UAAU,GACmB,KAAI;AACjC,IAAA,MAAM,sBAAsB,GAAGA,YAAM,EAAuB;AAC5D,IAAA,sBAAsB,CAAC,OAAO,GAAG,mBAAmB;AAEpD,IAAA,MAAM,uBAAuB,GAAGA,YAAM,EAAwB;AAC9D,IAAA,MAAM,iBAAiB,GAAGA,YAAM,EAAW;AAE3C,IAAA,MAAM,gBAAgB,GAAGA,YAAM,EAAE;IAEjCC,eAAS,CAAC,MAAK;AACb,QAAA,MAAM,gBAAgB,GAAG,CAAC,OAAoC,KAAI;AAChE,YAAA,MAAM,CAAC,KAAK,CAAC,GAAG,OAAO;AACvB,YAAA,MAAM,EAAE,cAAc,EAAE,GAAG,KAAK;YAEhC,IAAI,iBAAiB,CAAC,OAAO,IAAI,iBAAiB,CAAC,OAAO,KAAK,cAAc,EAAE;gBAC7E;AACD;AAED,YAAA,iBAAiB,CAAC,OAAO,GAAG,cAAc;YAE1C,IAAI,sBAAsB,CAAC,OAAO,EAAE;AAClC,gBAAA,sBAAsB,CAAC,OAAO,CAAC,cAAc,CAAC;AAC/C;AACH,SAAC;QAED,uBAAuB,CAAC,OAAO,GAAG,IAAI,oBAAoB,CACxD,UAAU,GAAGC,yBAAQ,CAAC,gBAAgB,EAAE,UAAU,CAAC,GAAG,gBAAgB,CACvE;AAED,QAAA,OAAO,MAAK;YACV,IAAI,uBAAuB,CAAC,OAAO,EAAE;AACnC,gBAAA,uBAAuB,CAAC,OAAO,CAAC,UAAU,EAAE;AAC7C;AACH,SAAC;AACH,KAAC,EAAE,CAAC,UAAU,CAAC,CAAC;IAEhBD,eAAS,CAAC,MAAK;QACb,IAAI,uBAAuB,CAAC,OAAO,EAAE;YACnC,IACE,SAAS,CAAC,OAAO;AACjB,gBAAA,gBAAgB,CAAC,OAAO;AACxB,gBAAA,SAAS,CAAC,OAAO,KAAK,gBAAgB,CAAC,OAAO,EAC9C;gBACA;AACD;AAED,YAAA,uBAAuB,CAAC,OAAO,CAAC,UAAU,EAAE;YAE5C,IAAI,SAAS,CAAC,OAAO,EAAE;gBACrB,uBAAuB,CAAC,OAAO,CAAC,OAAO,CAAC,SAAS,CAAC,OAAO,CAAC;AAC3D;AACF;AACH,KAAC,CAAC;AACJ;;;;"}

package/dist/hooks/useIntersectionObserver.d.ts

@@ -0,0 +1,15 @@
+import { RefObject } from 'react';
+type IntersectionHandler = (intersecting: boolean) => void;
+type UseIntersectionObserverProps = {
+    targetRef: RefObject<HTMLElement | null>;
+    intersectionHandler: IntersectionHandler;
+    throttleMs?: number;
+};
+/**
+ * Hook which sets up an `IntersectionObserver` for a given element, and fires a callback when an intersection occurs.
+ * @param targetRef The element to observe.
+ * @param intersectionHandler The callback to invoke when an intersection occurs.
+ * @param throttleMs (Optional) the number of ms to throttle the observer callback.
+ */
+export declare const useIntersectionObserver: ({ targetRef, intersectionHandler, throttleMs, }: UseIntersectionObserverProps) => void;
+export {};

package/dist/hooks/useIntersectionObserver.js

@@ -0,0 +1,51 @@
+import { useRef, useEffect } from 'react';
+import throttle from 'lodash.throttle';
+
+/**
+ * Hook which sets up an `IntersectionObserver` for a given element, and fires a callback when an intersection occurs.
+ * @param targetRef The element to observe.
+ * @param intersectionHandler The callback to invoke when an intersection occurs.
+ * @param throttleMs (Optional) the number of ms to throttle the observer callback.
+ */
+const useIntersectionObserver = ({ targetRef, intersectionHandler, throttleMs, }) => {
+    const intersectionHandlerRef = useRef();
+    intersectionHandlerRef.current = intersectionHandler;
+    const intersectionObserverRef = useRef();
+    const isIntersectingRef = useRef();
+    const currentTargetRef = useRef();
+    useEffect(() => {
+        const observerCallback = (entries) => {
+            const [entry] = entries;
+            const { isIntersecting } = entry;
+            if (isIntersectingRef.current && isIntersectingRef.current === isIntersecting) {
+                return;
+            }
+            isIntersectingRef.current = isIntersecting;
+            if (intersectionHandlerRef.current) {
+                intersectionHandlerRef.current(isIntersecting);
+            }
+        };
+        intersectionObserverRef.current = new IntersectionObserver(throttleMs ? throttle(observerCallback, throttleMs) : observerCallback);
+        return () => {
+            if (intersectionObserverRef.current) {
+                intersectionObserverRef.current.disconnect();
+            }
+        };
+    }, [throttleMs]);
+    useEffect(() => {
+        if (intersectionObserverRef.current) {
+            if (targetRef.current &&
+                currentTargetRef.current &&
+                targetRef.current === currentTargetRef.current) {
+                return;
+            }
+            intersectionObserverRef.current.disconnect();
+            if (targetRef.current) {
+                intersectionObserverRef.current.observe(targetRef.current);
+            }
+        }
+    });
+};
+
+export { useIntersectionObserver };
+//# sourceMappingURL=useIntersectionObserver.js.map

package/dist/hooks/useIntersectionObserver.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIntersectionObserver.js","sources":["../../src/hooks/useIntersectionObserver.ts"],"sourcesContent":["import { RefObject, useEffect, useRef } from 'react';\n\nimport throttle from 'lodash.throttle';\n\ntype IntersectionHandler = (intersecting: boolean) => void;\n\ntype UseIntersectionObserverProps = {\n  targetRef: RefObject<HTMLElement | null>;\n  intersectionHandler: IntersectionHandler;\n  throttleMs?: number;\n};\n\n/**\n * Hook which sets up an `IntersectionObserver` for a given element, and fires a callback when an intersection occurs.\n * @param targetRef The element to observe.\n * @param intersectionHandler The callback to invoke when an intersection occurs.\n * @param throttleMs (Optional) the number of ms to throttle the observer callback.\n */\nexport const useIntersectionObserver = ({\n  targetRef,\n  intersectionHandler,\n  throttleMs,\n}: UseIntersectionObserverProps) => {\n  const intersectionHandlerRef = useRef<IntersectionHandler>();\n  intersectionHandlerRef.current = intersectionHandler;\n\n  const intersectionObserverRef = useRef<IntersectionObserver>();\n  const isIntersectingRef = useRef<boolean>();\n\n  const currentTargetRef = useRef();\n\n  useEffect(() => {\n    const observerCallback = (entries: IntersectionObserverEntry[]) => {\n      const [entry] = entries;\n      const { isIntersecting } = entry;\n\n      if (isIntersectingRef.current && isIntersectingRef.current === isIntersecting) {\n        return;\n      }\n\n      isIntersectingRef.current = isIntersecting;\n\n      if (intersectionHandlerRef.current) {\n        intersectionHandlerRef.current(isIntersecting);\n      }\n    };\n\n    intersectionObserverRef.current = new IntersectionObserver(\n      throttleMs ? throttle(observerCallback, throttleMs) : observerCallback,\n    );\n\n    return () => {\n      if (intersectionObserverRef.current) {\n        intersectionObserverRef.current.disconnect();\n      }\n    };\n  }, [throttleMs]);\n\n  useEffect(() => {\n    if (intersectionObserverRef.current) {\n      if (\n        targetRef.current &&\n        currentTargetRef.current &&\n        targetRef.current === currentTargetRef.current\n      ) {\n        return;\n      }\n\n      intersectionObserverRef.current.disconnect();\n\n      if (targetRef.current) {\n        intersectionObserverRef.current.observe(targetRef.current);\n      }\n    }\n  });\n};\n"],"names":[],"mappings":";;;AAYA;;;;;AAKG;AACI,MAAM,uBAAuB,GAAG,CAAC,EACtC,SAAS,EACT,mBAAmB,EACnB,UAAU,GACmB,KAAI;AACjC,IAAA,MAAM,sBAAsB,GAAG,MAAM,EAAuB;AAC5D,IAAA,sBAAsB,CAAC,OAAO,GAAG,mBAAmB;AAEpD,IAAA,MAAM,uBAAuB,GAAG,MAAM,EAAwB;AAC9D,IAAA,MAAM,iBAAiB,GAAG,MAAM,EAAW;AAE3C,IAAA,MAAM,gBAAgB,GAAG,MAAM,EAAE;IAEjC,SAAS,CAAC,MAAK;AACb,QAAA,MAAM,gBAAgB,GAAG,CAAC,OAAoC,KAAI;AAChE,YAAA,MAAM,CAAC,KAAK,CAAC,GAAG,OAAO;AACvB,YAAA,MAAM,EAAE,cAAc,EAAE,GAAG,KAAK;YAEhC,IAAI,iBAAiB,CAAC,OAAO,IAAI,iBAAiB,CAAC,OAAO,KAAK,cAAc,EAAE;gBAC7E;AACD;AAED,YAAA,iBAAiB,CAAC,OAAO,GAAG,cAAc;YAE1C,IAAI,sBAAsB,CAAC,OAAO,EAAE;AAClC,gBAAA,sBAAsB,CAAC,OAAO,CAAC,cAAc,CAAC;AAC/C;AACH,SAAC;QAED,uBAAuB,CAAC,OAAO,GAAG,IAAI,oBAAoB,CACxD,UAAU,GAAG,QAAQ,CAAC,gBAAgB,EAAE,UAAU,CAAC,GAAG,gBAAgB,CACvE;AAED,QAAA,OAAO,MAAK;YACV,IAAI,uBAAuB,CAAC,OAAO,EAAE;AACnC,gBAAA,uBAAuB,CAAC,OAAO,CAAC,UAAU,EAAE;AAC7C;AACH,SAAC;AACH,KAAC,EAAE,CAAC,UAAU,CAAC,CAAC;IAEhB,SAAS,CAAC,MAAK;QACb,IAAI,uBAAuB,CAAC,OAAO,EAAE;YACnC,IACE,SAAS,CAAC,OAAO;AACjB,gBAAA,gBAAgB,CAAC,OAAO;AACxB,gBAAA,SAAS,CAAC,OAAO,KAAK,gBAAgB,CAAC,OAAO,EAC9C;gBACA;AACD;AAED,YAAA,uBAAuB,CAAC,OAAO,CAAC,UAAU,EAAE;YAE5C,IAAI,SAAS,CAAC,OAAO,EAAE;gBACrB,uBAAuB,CAAC,OAAO,CAAC,OAAO,CAAC,SAAS,CAAC,OAAO,CAAC;AAC3D;AACF;AACH,KAAC,CAAC;AACJ;;;;"}

package/dist/hooks/useResizeObserver.cjs

@@ -0,0 +1,67 @@
+'use strict';
+
+var React = require('react');
+var throttle = require('lodash.throttle');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var throttle__default = /*#__PURE__*/_interopDefaultCompat(throttle);
+
+/**
+ * Hook which sets up a `ResizeObserver` for a given element, and fires a callback when the element is resized.
+ * @param targetRef The element to observe.
+ * @param resizeHandler The callback to invoke when the element is resized.
+ * @param throttleMs (Optional) the number of ms to throttle the observer callback.
+ */
+const useResizeObserver = ({ targetRef, resizeHandler, throttleMs, }) => {
+    // Use a ref to store the resizeHandler to avoid re-rendering when the callback changes.
+    const resizeHandlerRef = React.useRef(undefined);
+    resizeHandlerRef.current = resizeHandler;
+    const resizeObserverRef = React.useRef();
+    const previousSizeRef = React.useRef(undefined);
+    const currentTargetRef = React.useRef();
+    // Setup the resize observer when the hook is mounted.
+    React.useEffect(() => {
+        const observerCallback = (entries) => {
+            // We'll only ever be monitoring one element, so we'll only have one entry.
+            const entry = entries[0];
+            const { inlineSize: width, blockSize: height } = entry.contentBoxSize[0];
+            // Avoid unecessary callbacks by checking to see if the dimensions have actually changed.
+            if (previousSizeRef.current &&
+                previousSizeRef.current.width === width &&
+                previousSizeRef.current.height === height) {
+                return;
+            }
+            previousSizeRef.current = { width, height };
+            if (resizeHandlerRef.current) {
+                resizeHandlerRef.current({ width, height });
+            }
+        };
+        resizeObserverRef.current = new ResizeObserver(throttleMs ? throttle__default.default(observerCallback, throttleMs) : observerCallback);
+        // Cleanup the resizer observer on unmount
+        return () => {
+            if (resizeObserverRef.current) {
+                resizeObserverRef.current.disconnect();
+            }
+        };
+    }, [throttleMs]);
+    // Ensure we're always observing the latest element referenced in 'ref'.
+    React.useEffect(() => {
+        if (resizeObserverRef.current) {
+            // Check to see if the ref has actually changed. If it hasn't we can skip resetting the ResizeObserver.
+            if ((targetRef === null || targetRef === undefined ? undefined : targetRef.current) &&
+                currentTargetRef.current &&
+                targetRef.current === currentTargetRef.current) {
+                return;
+            }
+            resizeObserverRef.current.disconnect();
+            if (targetRef === null || targetRef === undefined ? undefined : targetRef.current) {
+                resizeObserverRef.current.observe(targetRef.current);
+                currentTargetRef.current = targetRef.current;
+            }
+        }
+    });
+};
+
+exports.useResizeObserver = useResizeObserver;
+//# sourceMappingURL=useResizeObserver.cjs.map

package/dist/hooks/useResizeObserver.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useResizeObserver.cjs","sources":["../../src/hooks/useResizeObserver.ts"],"sourcesContent":["import { RefObject, useEffect, useRef } from 'react';\n\nimport throttle from 'lodash.throttle';\n\ntype ResizeHandler = (size: { width: number; height: number }) => void;\n\ntype UseResizeObserverCustomProps = {\n  targetRef: RefObject<HTMLElement | null>;\n  resizeHandler: ResizeHandler;\n  throttleMs?: number;\n};\n\n/**\n * Hook which sets up a `ResizeObserver` for a given element, and fires a callback when the element is resized.\n * @param targetRef The element to observe.\n * @param resizeHandler The callback to invoke when the element is resized.\n * @param throttleMs (Optional) the number of ms to throttle the observer callback.\n */\nexport const useResizeObserver = ({\n  targetRef,\n  resizeHandler,\n  throttleMs,\n}: UseResizeObserverCustomProps) => {\n  // Use a ref to store the resizeHandler to avoid re-rendering when the callback changes.\n  const resizeHandlerRef = useRef<ResizeHandler | undefined>(undefined);\n  resizeHandlerRef.current = resizeHandler;\n\n  const resizeObserverRef = useRef<ResizeObserver>();\n  const previousSizeRef = useRef<{ width: number; height: number } | undefined>(undefined);\n\n  const currentTargetRef = useRef<HTMLElement>();\n\n  // Setup the resize observer when the hook is mounted.\n  useEffect(() => {\n    const observerCallback = (entries: ResizeObserverEntry[]) => {\n      // We'll only ever be monitoring one element, so we'll only have one entry.\n      const entry = entries[0];\n\n      const { inlineSize: width, blockSize: height } = entry.contentBoxSize[0];\n\n      // Avoid unecessary callbacks by checking to see if the dimensions have actually changed.\n      if (\n        previousSizeRef.current &&\n        previousSizeRef.current.width === width &&\n        previousSizeRef.current.height === height\n      ) {\n        return;\n      }\n\n      previousSizeRef.current = { width, height };\n\n      if (resizeHandlerRef.current) {\n        resizeHandlerRef.current({ width, height });\n      }\n    };\n\n    resizeObserverRef.current = new ResizeObserver(\n      throttleMs ? throttle(observerCallback, throttleMs) : observerCallback,\n    );\n\n    // Cleanup the resizer observer on unmount\n    return () => {\n      if (resizeObserverRef.current) {\n        resizeObserverRef.current.disconnect();\n      }\n    };\n  }, [throttleMs]);\n\n  // Ensure we're always observing the latest element referenced in 'ref'.\n  useEffect(() => {\n    if (resizeObserverRef.current) {\n      // Check to see if the ref has actually changed. If it hasn't we can skip resetting the ResizeObserver.\n      if (\n        targetRef?.current &&\n        currentTargetRef.current &&\n        targetRef.current === currentTargetRef.current\n      ) {\n        return;\n      }\n\n      resizeObserverRef.current.disconnect();\n\n      if (targetRef?.current) {\n        resizeObserverRef.current.observe(targetRef.current);\n        currentTargetRef.current = targetRef.current;\n      }\n    }\n  });\n};\n"],"names":["useRef","useEffect","throttle"],"mappings":";;;;;;;;;AAYA;;;;;AAKG;AACI,MAAM,iBAAiB,GAAG,CAAC,EAChC,SAAS,EACT,aAAa,EACb,UAAU,GACmB,KAAI;;AAEjC,IAAA,MAAM,gBAAgB,GAAGA,YAAM,CAA4B,SAAS,CAAC;AACrE,IAAA,gBAAgB,CAAC,OAAO,GAAG,aAAa;AAExC,IAAA,MAAM,iBAAiB,GAAGA,YAAM,EAAkB;AAClD,IAAA,MAAM,eAAe,GAAGA,YAAM,CAAgD,SAAS,CAAC;AAExF,IAAA,MAAM,gBAAgB,GAAGA,YAAM,EAAe;;IAG9CC,eAAS,CAAC,MAAK;AACb,QAAA,MAAM,gBAAgB,GAAG,CAAC,OAA8B,KAAI;;AAE1D,YAAA,MAAM,KAAK,GAAG,OAAO,CAAC,CAAC,CAAC;AAExB,YAAA,MAAM,EAAE,UAAU,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC;;YAGxE,IACE,eAAe,CAAC,OAAO;AACvB,gBAAA,eAAe,CAAC,OAAO,CAAC,KAAK,KAAK,KAAK;AACvC,gBAAA,eAAe,CAAC,OAAO,CAAC,MAAM,KAAK,MAAM,EACzC;gBACA;AACD;YAED,eAAe,CAAC,OAAO,GAAG,EAAE,KAAK,EAAE,MAAM,EAAE;YAE3C,IAAI,gBAAgB,CAAC,OAAO,EAAE;gBAC5B,gBAAgB,CAAC,OAAO,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC;AAC5C;AACH,SAAC;QAED,iBAAiB,CAAC,OAAO,GAAG,IAAI,cAAc,CAC5C,UAAU,GAAGC,yBAAQ,CAAC,gBAAgB,EAAE,UAAU,CAAC,GAAG,gBAAgB,CACvE;;AAGD,QAAA,OAAO,MAAK;YACV,IAAI,iBAAiB,CAAC,OAAO,EAAE;AAC7B,gBAAA,iBAAiB,CAAC,OAAO,CAAC,UAAU,EAAE;AACvC;AACH,SAAC;AACH,KAAC,EAAE,CAAC,UAAU,CAAC,CAAC;;IAGhBD,eAAS,CAAC,MAAK;QACb,IAAI,iBAAiB,CAAC,OAAO,EAAE;;AAE7B,YAAA,IACE,CAAA,SAAS,KAAA,IAAA,IAAT,SAAS,KAAT,SAAA,GAAA,SAAA,GAAA,SAAS,CAAE,OAAO;AAClB,gBAAA,gBAAgB,CAAC,OAAO;AACxB,gBAAA,SAAS,CAAC,OAAO,KAAK,gBAAgB,CAAC,OAAO,EAC9C;gBACA;AACD;AAED,YAAA,iBAAiB,CAAC,OAAO,CAAC,UAAU,EAAE;AAEtC,YAAA,IAAI,SAAS,KAAT,IAAA,IAAA,SAAS,6BAAT,SAAS,CAAE,OAAO,EAAE;gBACtB,iBAAiB,CAAC,OAAO,CAAC,OAAO,CAAC,SAAS,CAAC,OAAO,CAAC;AACpD,gBAAA,gBAAgB,CAAC,OAAO,GAAG,SAAS,CAAC,OAAO;AAC7C;AACF;AACH,KAAC,CAAC;AACJ;;;;"}

package/dist/hooks/useResizeObserver.d.ts

@@ -0,0 +1,18 @@
+import { RefObject } from 'react';
+type ResizeHandler = (size: {
+    width: number;
+    height: number;
+}) => void;
+type UseResizeObserverCustomProps = {
+    targetRef: RefObject<HTMLElement | null>;
+    resizeHandler: ResizeHandler;
+    throttleMs?: number;
+};
+/**
+ * Hook which sets up a `ResizeObserver` for a given element, and fires a callback when the element is resized.
+ * @param targetRef The element to observe.
+ * @param resizeHandler The callback to invoke when the element is resized.
+ * @param throttleMs (Optional) the number of ms to throttle the observer callback.
+ */
+export declare const useResizeObserver: ({ targetRef, resizeHandler, throttleMs, }: UseResizeObserverCustomProps) => void;
+export {};

package/dist/hooks/useResizeObserver.js

@@ -0,0 +1,61 @@
+import { useRef, useEffect } from 'react';
+import throttle from 'lodash.throttle';
+
+/**
+ * Hook which sets up a `ResizeObserver` for a given element, and fires a callback when the element is resized.
+ * @param targetRef The element to observe.
+ * @param resizeHandler The callback to invoke when the element is resized.
+ * @param throttleMs (Optional) the number of ms to throttle the observer callback.
+ */
+const useResizeObserver = ({ targetRef, resizeHandler, throttleMs, }) => {
+    // Use a ref to store the resizeHandler to avoid re-rendering when the callback changes.
+    const resizeHandlerRef = useRef(undefined);
+    resizeHandlerRef.current = resizeHandler;
+    const resizeObserverRef = useRef();
+    const previousSizeRef = useRef(undefined);
+    const currentTargetRef = useRef();
+    // Setup the resize observer when the hook is mounted.
+    useEffect(() => {
+        const observerCallback = (entries) => {
+            // We'll only ever be monitoring one element, so we'll only have one entry.
+            const entry = entries[0];
+            const { inlineSize: width, blockSize: height } = entry.contentBoxSize[0];
+            // Avoid unecessary callbacks by checking to see if the dimensions have actually changed.
+            if (previousSizeRef.current &&
+                previousSizeRef.current.width === width &&
+                previousSizeRef.current.height === height) {
+                return;
+            }
+            previousSizeRef.current = { width, height };
+            if (resizeHandlerRef.current) {
+                resizeHandlerRef.current({ width, height });
+            }
+        };
+        resizeObserverRef.current = new ResizeObserver(throttleMs ? throttle(observerCallback, throttleMs) : observerCallback);
+        // Cleanup the resizer observer on unmount
+        return () => {
+            if (resizeObserverRef.current) {
+                resizeObserverRef.current.disconnect();
+            }
+        };
+    }, [throttleMs]);
+    // Ensure we're always observing the latest element referenced in 'ref'.
+    useEffect(() => {
+        if (resizeObserverRef.current) {
+            // Check to see if the ref has actually changed. If it hasn't we can skip resetting the ResizeObserver.
+            if ((targetRef === null || targetRef === undefined ? undefined : targetRef.current) &&
+                currentTargetRef.current &&
+                targetRef.current === currentTargetRef.current) {
+                return;
+            }
+            resizeObserverRef.current.disconnect();
+            if (targetRef === null || targetRef === undefined ? undefined : targetRef.current) {
+                resizeObserverRef.current.observe(targetRef.current);
+                currentTargetRef.current = targetRef.current;
+            }
+        }
+    });
+};
+
+export { useResizeObserver };
+//# sourceMappingURL=useResizeObserver.js.map

package/dist/hooks/useResizeObserver.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useResizeObserver.js","sources":["../../src/hooks/useResizeObserver.ts"],"sourcesContent":["import { RefObject, useEffect, useRef } from 'react';\n\nimport throttle from 'lodash.throttle';\n\ntype ResizeHandler = (size: { width: number; height: number }) => void;\n\ntype UseResizeObserverCustomProps = {\n  targetRef: RefObject<HTMLElement | null>;\n  resizeHandler: ResizeHandler;\n  throttleMs?: number;\n};\n\n/**\n * Hook which sets up a `ResizeObserver` for a given element, and fires a callback when the element is resized.\n * @param targetRef The element to observe.\n * @param resizeHandler The callback to invoke when the element is resized.\n * @param throttleMs (Optional) the number of ms to throttle the observer callback.\n */\nexport const useResizeObserver = ({\n  targetRef,\n  resizeHandler,\n  throttleMs,\n}: UseResizeObserverCustomProps) => {\n  // Use a ref to store the resizeHandler to avoid re-rendering when the callback changes.\n  const resizeHandlerRef = useRef<ResizeHandler | undefined>(undefined);\n  resizeHandlerRef.current = resizeHandler;\n\n  const resizeObserverRef = useRef<ResizeObserver>();\n  const previousSizeRef = useRef<{ width: number; height: number } | undefined>(undefined);\n\n  const currentTargetRef = useRef<HTMLElement>();\n\n  // Setup the resize observer when the hook is mounted.\n  useEffect(() => {\n    const observerCallback = (entries: ResizeObserverEntry[]) => {\n      // We'll only ever be monitoring one element, so we'll only have one entry.\n      const entry = entries[0];\n\n      const { inlineSize: width, blockSize: height } = entry.contentBoxSize[0];\n\n      // Avoid unecessary callbacks by checking to see if the dimensions have actually changed.\n      if (\n        previousSizeRef.current &&\n        previousSizeRef.current.width === width &&\n        previousSizeRef.current.height === height\n      ) {\n        return;\n      }\n\n      previousSizeRef.current = { width, height };\n\n      if (resizeHandlerRef.current) {\n        resizeHandlerRef.current({ width, height });\n      }\n    };\n\n    resizeObserverRef.current = new ResizeObserver(\n      throttleMs ? throttle(observerCallback, throttleMs) : observerCallback,\n    );\n\n    // Cleanup the resizer observer on unmount\n    return () => {\n      if (resizeObserverRef.current) {\n        resizeObserverRef.current.disconnect();\n      }\n    };\n  }, [throttleMs]);\n\n  // Ensure we're always observing the latest element referenced in 'ref'.\n  useEffect(() => {\n    if (resizeObserverRef.current) {\n      // Check to see if the ref has actually changed. If it hasn't we can skip resetting the ResizeObserver.\n      if (\n        targetRef?.current &&\n        currentTargetRef.current &&\n        targetRef.current === currentTargetRef.current\n      ) {\n        return;\n      }\n\n      resizeObserverRef.current.disconnect();\n\n      if (targetRef?.current) {\n        resizeObserverRef.current.observe(targetRef.current);\n        currentTargetRef.current = targetRef.current;\n      }\n    }\n  });\n};\n"],"names":[],"mappings":";;;AAYA;;;;;AAKG;AACI,MAAM,iBAAiB,GAAG,CAAC,EAChC,SAAS,EACT,aAAa,EACb,UAAU,GACmB,KAAI;;AAEjC,IAAA,MAAM,gBAAgB,GAAG,MAAM,CAA4B,SAAS,CAAC;AACrE,IAAA,gBAAgB,CAAC,OAAO,GAAG,aAAa;AAExC,IAAA,MAAM,iBAAiB,GAAG,MAAM,EAAkB;AAClD,IAAA,MAAM,eAAe,GAAG,MAAM,CAAgD,SAAS,CAAC;AAExF,IAAA,MAAM,gBAAgB,GAAG,MAAM,EAAe;;IAG9C,SAAS,CAAC,MAAK;AACb,QAAA,MAAM,gBAAgB,GAAG,CAAC,OAA8B,KAAI;;AAE1D,YAAA,MAAM,KAAK,GAAG,OAAO,CAAC,CAAC,CAAC;AAExB,YAAA,MAAM,EAAE,UAAU,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC;;YAGxE,IACE,eAAe,CAAC,OAAO;AACvB,gBAAA,eAAe,CAAC,OAAO,CAAC,KAAK,KAAK,KAAK;AACvC,gBAAA,eAAe,CAAC,OAAO,CAAC,MAAM,KAAK,MAAM,EACzC;gBACA;AACD;YAED,eAAe,CAAC,OAAO,GAAG,EAAE,KAAK,EAAE,MAAM,EAAE;YAE3C,IAAI,gBAAgB,CAAC,OAAO,EAAE;gBAC5B,gBAAgB,CAAC,OAAO,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC;AAC5C;AACH,SAAC;QAED,iBAAiB,CAAC,OAAO,GAAG,IAAI,cAAc,CAC5C,UAAU,GAAG,QAAQ,CAAC,gBAAgB,EAAE,UAAU,CAAC,GAAG,gBAAgB,CACvE;;AAGD,QAAA,OAAO,MAAK;YACV,IAAI,iBAAiB,CAAC,OAAO,EAAE;AAC7B,gBAAA,iBAAiB,CAAC,OAAO,CAAC,UAAU,EAAE;AACvC;AACH,SAAC;AACH,KAAC,EAAE,CAAC,UAAU,CAAC,CAAC;;IAGhB,SAAS,CAAC,MAAK;QACb,IAAI,iBAAiB,CAAC,OAAO,EAAE;;AAE7B,YAAA,IACE,CAAA,SAAS,KAAA,IAAA,IAAT,SAAS,KAAT,SAAA,GAAA,SAAA,GAAA,SAAS,CAAE,OAAO;AAClB,gBAAA,gBAAgB,CAAC,OAAO;AACxB,gBAAA,SAAS,CAAC,OAAO,KAAK,gBAAgB,CAAC,OAAO,EAC9C;gBACA;AACD;AAED,YAAA,iBAAiB,CAAC,OAAO,CAAC,UAAU,EAAE;AAEtC,YAAA,IAAI,SAAS,KAAT,IAAA,IAAA,SAAS,6BAAT,SAAS,CAAE,OAAO,EAAE;gBACtB,iBAAiB,CAAC,OAAO,CAAC,OAAO,CAAC,SAAS,CAAC,OAAO,CAAC;AACpD,gBAAA,gBAAgB,CAAC,OAAO,GAAG,SAAS,CAAC,OAAO;AAC7C;AACF;AACH,KAAC,CAAC;AACJ;;;;"}

package/dist/index.cjs

@@ -28,7 +28,6 @@ var constants = require('./components/DateRangePicker/constants.cjs');
 var DataTable = require('./components/DataTable/DataTable.cjs');
 var useCellWidths = require('./components/DataTable/hooks/useCellWidths.cjs');
 var useColumns = require('./components/DataTable/hooks/useColumns.cjs');
-var useDragToScroll = require('./components/DataTable/hooks/useDragToScroll.cjs');
 var useNested = require('./components/DataTable/hooks/useNested.cjs');
 var useScrollPosition = require('./components/DataTable/hooks/useScrollPosition.cjs');
 var useSelection = require('./components/DataTable/hooks/useSelection.cjs');
@@ -77,6 +76,7 @@ var index$5 = require('./components/WeightInput/index.cjs');
 var Indicator = require('./components/Indicator/Indicator.cjs');
 var index$6 = require('./components/SelectDropdown/index.cjs');
 var ThemeInjector = require('./components/ThemeInjector/ThemeInjector.cjs');
+var DataGrid = require('./components/DataGrid/DataGrid.cjs');
 var useClickOutside = require('./hooks/useClickOutside.cjs');
 var useDebounce = require('./hooks/useDebounce.cjs');
 var useDropdown = require('./hooks/useDropdown.cjs');
@@ -85,6 +85,9 @@ var useHover = require('./hooks/useHover.cjs');
 var useIsOverflowing = require('./hooks/useIsOverflowing.cjs');
 var useTabs = require('./hooks/useTabs.cjs');
 var useId = require('./hooks/useId.cjs');
+var useDragToScroll = require('./hooks/useDragToScroll.cjs');
+var useResizeObserver = require('./hooks/useResizeObserver.cjs');
+var useIntersectionObserver = require('./hooks/useIntersectionObserver.cjs');
 var withLabels = require('./hoc/withLabels/withLabels.cjs');
 var withDeprecated = require('./hoc/withDeprecated.cjs');
 var buildClassnames = require('./utils/buildClassnames.cjs');
@@ -168,7 +171,6 @@ exports.getDateRange = constants.getDateRange;
 exports.DataTable = DataTable.DataTable;
 exports.useCellWidths = useCellWidths.useCellWidths;
 exports.useColumns = useColumns.useColumns;
-exports.useDragToScroll = useDragToScroll.useDragToScroll;
 exports.useNested = useNested.useNested;
 exports.useScrollPosition = useScrollPosition.useScrollPosition;
 exports.useSelection = useSelection.useSelection;
@@ -224,6 +226,7 @@ exports.WeightInput = index$5.WeightInput;
 exports.Indicator = Indicator.Indicator;
 exports.SelectDropdown = index$6.SelectDropdown;
 exports.ThemeInjector = ThemeInjector.ThemeInjector;
+exports.DataGrid = DataGrid.DataGrid;
 exports.useClickOutside = useClickOutside.useClickOutside;
 exports.useDebounce = useDebounce.useDebounce;
 exports.useDropdown = useDropdown.useDropdown;
@@ -233,6 +236,9 @@ exports.useHover = useHover.useHover;
 exports.useIsOverflowing = useIsOverflowing.useIsOverflowing;
 exports.useTabs = useTabs.useTabs;
 exports.useId = useId.useId;
+exports.useDragToScroll = useDragToScroll.useDragToScroll;
+exports.useResizeObserver = useResizeObserver.useResizeObserver;
+exports.useIntersectionObserver = useIntersectionObserver.useIntersectionObserver;
 exports.withLabels = withLabels.withLabels;
 exports.withDeprecated = withDeprecated.withDeprecated;
 exports.buildClassnames = buildClassnames.buildClassnames;

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/index.js

@@ -26,7 +26,6 @@ export { DATE_RANGE_OPTIONS, DEFAULT_PRESET, DEFAULT_RANGE, DateRanges, getDateR
 export { DataTable } from './components/DataTable/DataTable.js';
 export { useCellWidths } from './components/DataTable/hooks/useCellWidths.js';
 export { useColumns } from './components/DataTable/hooks/useColumns.js';
-export { useDragToScroll } from './components/DataTable/hooks/useDragToScroll.js';
 export { useNested } from './components/DataTable/hooks/useNested.js';
 export { useScrollPosition } from './components/DataTable/hooks/useScrollPosition.js';
 export { useSelection } from './components/DataTable/hooks/useSelection.js';
@@ -75,6 +74,7 @@ export { WeightInput } from './components/WeightInput/index.js';
 export { Indicator } from './components/Indicator/Indicator.js';
 export { SelectDropdown } from './components/SelectDropdown/index.js';
 export { ThemeInjector } from './components/ThemeInjector/ThemeInjector.js';
+export { DataGrid } from './components/DataGrid/DataGrid.js';
 export { useClickOutside } from './hooks/useClickOutside.js';
 export { useDebounce } from './hooks/useDebounce.js';
 export { useDropdown } from './hooks/useDropdown.js';
@@ -83,6 +83,9 @@ export { useHover } from './hooks/useHover.js';
 export { useIsOverflowing } from './hooks/useIsOverflowing.js';
 export { useTabs } from './hooks/useTabs.js';
 export { useId } from './hooks/useId.js';
+export { useDragToScroll } from './hooks/useDragToScroll.js';
+export { useResizeObserver } from './hooks/useResizeObserver.js';
+export { useIntersectionObserver } from './hooks/useIntersectionObserver.js';
 export { withLabels } from './hoc/withLabels/withLabels.js';
 export { withDeprecated } from './hoc/withDeprecated.js';
 export { buildClassnames } from './utils/buildClassnames.js';

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/theme/index.d.ts

@@ -126,6 +126,7 @@ export declare const theme: {
     };
     layers: {
         base: number;
+        gridResizer: number;
         popup: number;
         modal: number;
         tooltip: number;

package/dist/theme/modules/layers.cjs

@@ -2,6 +2,7 @@
 
 const layers = {
     base: 0,
+    gridResizer: 10,
     popup: 1000,
     modal: 2000,
     tooltip: 3000,

package/dist/theme/modules/layers.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"layers.cjs","sources":["../../../src/theme/modules/layers.ts"],"sourcesContent":["export const layers = {\n  base: 0,\n  popup: 1000,\n  modal: 2000,\n  tooltip: 3000,\n};\n"],"names":[],"mappings":";;AAAa,MAAA,MAAM,GAAG;AACpB,IAAA,IAAI,EAAE,CAAC;AACP,IAAA,KAAK,EAAE,IAAI;AACX,IAAA,KAAK,EAAE,IAAI;AACX,IAAA,OAAO,EAAE,IAAI;;;;;"}
+{"version":3,"file":"layers.cjs","sources":["../../../src/theme/modules/layers.ts"],"sourcesContent":["export const layers = {\n  base: 0,\n  gridResizer: 10,\n  popup: 1000,\n  modal: 2000,\n  tooltip: 3000,\n};\n"],"names":[],"mappings":";;AAAa,MAAA,MAAM,GAAG;AACpB,IAAA,IAAI,EAAE,CAAC;AACP,IAAA,WAAW,EAAE,EAAE;AACf,IAAA,KAAK,EAAE,IAAI;AACX,IAAA,KAAK,EAAE,IAAI;AACX,IAAA,OAAO,EAAE,IAAI;;;;;"}

package/dist/theme/modules/layers.d.ts

@@ -1,5 +1,6 @@
 export declare const layers: {
     base: number;
+    gridResizer: number;
     popup: number;
     modal: number;
     tooltip: number;

package/dist/theme/modules/layers.js

@@ -1,5 +1,6 @@
 const layers = {
     base: 0,
+    gridResizer: 10,
     popup: 1000,
     modal: 2000,
     tooltip: 3000,

package/dist/theme/modules/layers.js.map

@@ -1 +1 @@
-{"version":3,"file":"layers.js","sources":["../../../src/theme/modules/layers.ts"],"sourcesContent":["export const layers = {\n  base: 0,\n  popup: 1000,\n  modal: 2000,\n  tooltip: 3000,\n};\n"],"names":[],"mappings":"AAAa,MAAA,MAAM,GAAG;AACpB,IAAA,IAAI,EAAE,CAAC;AACP,IAAA,KAAK,EAAE,IAAI;AACX,IAAA,KAAK,EAAE,IAAI;AACX,IAAA,OAAO,EAAE,IAAI;;;;;"}
+{"version":3,"file":"layers.js","sources":["../../../src/theme/modules/layers.ts"],"sourcesContent":["export const layers = {\n  base: 0,\n  gridResizer: 10,\n  popup: 1000,\n  modal: 2000,\n  tooltip: 3000,\n};\n"],"names":[],"mappings":"AAAa,MAAA,MAAM,GAAG;AACpB,IAAA,IAAI,EAAE,CAAC;AACP,IAAA,WAAW,EAAE,EAAE;AACf,IAAA,KAAK,EAAE,IAAI;AACX,IAAA,KAAK,EAAE,IAAI;AACX,IAAA,OAAO,EAAE,IAAI;;;;;"}