@salt-ds/core 1.37.0 → 1.37.2

package/dist-es/overlay/OverlayPanelCloseButton.js

@@ -10,100 +10,6 @@ import '../utils/useFloatingUI/useFloatingUI.js';
 import '../utils/useId.js';
 import '../salt-provider/SaltProvider.js';
 import '../viewport/ViewportProvider.js';
-import '../accordion/AccordionGroup.js';
-import '../accordion/AccordionPanel.js';
-import '../accordion/Accordion.js';
-import '../accordion/AccordionHeader.js';
-import '../aria-announcer/AriaAnnouncerContext.js';
-import '../avatar/Avatar.js';
-import '../badge/Badge.js';
-import '../banner/Banner.js';
-import '../banner/BannerActions.js';
-import '../banner/BannerContent.js';
-import '../border-item/BorderItem.js';
-import '../border-layout/BorderLayout.js';
-import '../breakpoints/BreakpointProvider.js';
-import '../card/Card.js';
-import '../checkbox/Checkbox.js';
-import '../checkbox/CheckboxGroup.js';
-import '@salt-ds/icons';
-import '../combo-box/ComboBox.js';
-import '../dialog/Dialog.js';
-import '../dialog/DialogHeader.js';
-import '../dialog/DialogActions.js';
-import '../dialog/DialogContent.js';
-import '../dialog/DialogContext.js';
-import '../dialog/DialogCloseButton.js';
-import '../divider/Divider.js';
-import '../drawer/Drawer.js';
-import '../drawer/DrawerCloseButton.js';
-import '../dropdown/Dropdown.js';
-import '../file-drop-zone/FileDropZone.js';
-import '../file-drop-zone/FileDropZoneIcon.js';
-import '../file-drop-zone/FileDropZoneTrigger.js';
-import '../flex-item/FlexItem.js';
-import '../flex-layout/FlexLayout.js';
-import '../flow-layout/FlowLayout.js';
-import '../form-field/FormField.js';
-import '../form-field-context/FormFieldContext.js';
-import '../status-indicator/StatusIndicator.js';
-import '../text/Text.js';
-import '../text/Code.js';
-import '../text/Display.js';
-import '../text/Headings.js';
-import '../text/Label.js';
-import '../text/TextAction.js';
-import '../text/TextNotation.js';
-import '../grid-item/GridItem.js';
-import '../grid-layout/GridLayout.js';
-import '../input/Input.js';
-import '../interactable-card/InteractableCard.js';
-import '../interactable-card/InteractableCardGroup.js';
-import '../interactable-card/InteractableCardGroupContext.js';
-import '../link/Link.js';
-import '../link-card/LinkCard.js';
-import '../list-box/ListBox.js';
-import '../list-control/ListControlContext.js';
-import '@floating-ui/react';
-import '../menu/MenuContext.js';
-import '../menu/MenuItem.js';
-import '../menu/MenuPanel.js';
-import '../menu/MenuPanelContext.js';
-import '../menu/MenuTriggerContext.js';
-import '../menu/MenuGroup.js';
-import '../multiline-input/MultilineInput.js';
-import '../navigation-item/NavigationItem.js';
-import '../option/Option.js';
-import '../option/OptionGroup.js';
-import './OverlayContext.js';
-import './OverlayPanel.js';
-import './OverlayPanelContent.js';
-import '../pagination/Pagination.js';
-import '../pagination/Paginator.js';
-import '../pagination/CompactInput.js';
-import '../pagination/CompactPaginator.js';
-import '../pagination/GoToInput.js';
-import '../panel/Panel.js';
-import '../parent-child-layout/ParentChildLayout.js';
-import '../pill/Pill.js';
-import '../progress/CircularProgress/CircularProgress.js';
-import '../progress/LinearProgress/LinearProgress.js';
-import '../radio-button/RadioButton.js';
-import '../radio-button/RadioButtonGroup.js';
-import '../scrim/Scrim.js';
-import '../segmented-button-group/SegmentedButtonGroup.js';
-import '../spinner/Spinner.js';
-import '../stack-layout/StackLayout.js';
-import '../status-adornment/StatusAdornment.js';
-import '../toast/Toast.js';
-import '../toast/ToastContent.js';
-import '../split-layout/SplitLayout.js';
-import '../switch/Switch.js';
-import '../tag/Tag.js';
-import '../toggle-button/ToggleButton.js';
-import '../toggle-button-group/ToggleButtonGroup.js';
-import '../toggle-button-group/ToggleButtonGroupContext.js';
-import '../tooltip/Tooltip.js';
 import css_248z from './OverlayPanelCloseButton.css.js';
 
 const withBaseName = makePrefixer("saltOverlayPanelCloseButton");
@@ -115,19 +21,17 @@ const OverlayPanelCloseButton = forwardRef(function OverlayPanelButton({ classNa
     window: targetWindow
   });
   const { CloseIcon } = useIcon();
-  return /* @__PURE__ */ jsx("div", {
-    className: clsx(withBaseName(), className),
-    children: /* @__PURE__ */ jsx(Button, {
+  return /* @__PURE__ */ jsx("div", { className: clsx(withBaseName(), className), children: /* @__PURE__ */ jsx(
+    Button,
+    {
       ref,
       "aria-label": "Close overlay",
-      variant: "secondary",
+      appearance: "transparent",
       className: withBaseName("button"),
       ...rest,
-      children: /* @__PURE__ */ jsx(CloseIcon, {
-        "aria-hidden": true
-      })
-    })
-  });
+      children: /* @__PURE__ */ jsx(CloseIcon, { "aria-hidden": true })
+    }
+  ) });
 });
 
 export { OverlayPanelCloseButton };

package/dist-es/overlay/OverlayPanelCloseButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"OverlayPanelCloseButton.js","sources":["../src/overlay/OverlayPanelCloseButton.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport clsx from \"clsx\";\nimport { forwardRef } from \"react\";\nimport { Button, type ButtonProps } from \"../button\";\nimport { useIcon } from \"../semantic-icon-provider\";\nimport { makePrefixer } from \"../utils\";\nimport overlayPanelCloseButtonCss from \"./OverlayPanelCloseButton.css\";\n\nconst withBaseName = makePrefixer(\"saltOverlayPanelCloseButton\");\n\nexport const OverlayPanelCloseButton = forwardRef<\n  HTMLButtonElement,\n  ButtonProps\n>(function OverlayPanelButton({ className, ...rest }, ref) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-overlay-panel-close-button\",\n    css: overlayPanelCloseButtonCss,\n    window: targetWindow,\n  });\n  const { CloseIcon } = useIcon();\n\n  return (\n    <div className={clsx(withBaseName(), className)}>\n      <Button\n        ref={ref}\n        aria-label=\"Close overlay\"\n        variant=\"secondary\"\n        className={withBaseName(\"button\")}\n        {...rest}\n      >\n        <CloseIcon aria-hidden />\n      </Button>\n    </div>\n  );\n});\n"],"names":["overlayPanelCloseButtonCss"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA,MAAM,YAAA,GAAe,aAAa,6BAA6B,CAAA,CAAA;AAElD,MAAA,uBAAA,GAA0B,WAGrC,SAAS,kBAAA,CAAmB,EAAE,SAAc,EAAA,GAAA,IAAA,IAAQ,GAAK,EAAA;AACzD,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,iCAAA;AAAA,IACR,GAAK,EAAAA,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AACD,EAAM,MAAA,EAAE,SAAU,EAAA,GAAI,OAAQ,EAAA,CAAA;AAE9B,EAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,IAAI,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,IAC5C,QAAC,kBAAA,GAAA,CAAA,MAAA,EAAA;AAAA,MACC,GAAA;AAAA,MACA,YAAW,EAAA,eAAA;AAAA,MACX,OAAQ,EAAA,WAAA;AAAA,MACR,SAAA,EAAW,aAAa,QAAQ,CAAA;AAAA,MAC/B,GAAG,IAAA;AAAA,MAEJ,QAAC,kBAAA,GAAA,CAAA,SAAA,EAAA;AAAA,QAAU,aAAW,EAAA,IAAA;AAAA,OAAC,CAAA;AAAA,KACzB,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"OverlayPanelCloseButton.js","sources":["../src/overlay/OverlayPanelCloseButton.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport clsx from \"clsx\";\nimport { forwardRef } from \"react\";\nimport { Button, type ButtonProps } from \"../button\";\nimport { useIcon } from \"../semantic-icon-provider\";\nimport { makePrefixer } from \"../utils\";\nimport overlayPanelCloseButtonCss from \"./OverlayPanelCloseButton.css\";\n\nconst withBaseName = makePrefixer(\"saltOverlayPanelCloseButton\");\n\nexport const OverlayPanelCloseButton = forwardRef<\n  HTMLButtonElement,\n  ButtonProps\n>(function OverlayPanelButton({ className, ...rest }, ref) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-overlay-panel-close-button\",\n    css: overlayPanelCloseButtonCss,\n    window: targetWindow,\n  });\n  const { CloseIcon } = useIcon();\n\n  return (\n    <div className={clsx(withBaseName(), className)}>\n      <Button\n        ref={ref}\n        aria-label=\"Close overlay\"\n        appearance=\"transparent\"\n        className={withBaseName(\"button\")}\n        {...rest}\n      >\n        <CloseIcon aria-hidden />\n      </Button>\n    </div>\n  );\n});\n"],"names":["overlayPanelCloseButtonCss"],"mappings":";;;;;;;;;;;;;;AASA,MAAM,YAAA,GAAe,aAAa,6BAA6B,CAAA;AAElD,MAAA,uBAAA,GAA0B,WAGrC,SAAS,kBAAA,CAAmB,EAAE,SAAW,EAAA,GAAG,IAAK,EAAA,EAAG,GAAK,EAAA;AACzD,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,iCAAA;AAAA,IACR,GAAK,EAAAA,QAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AACD,EAAM,MAAA,EAAE,SAAU,EAAA,GAAI,OAAQ,EAAA;AAE9B,EAAA,2BACG,KAAI,EAAA,EAAA,SAAA,EAAW,KAAK,YAAa,EAAA,EAAG,SAAS,CAC5C,EAAA,QAAA,kBAAA,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,YAAW,EAAA,eAAA;AAAA,MACX,UAAW,EAAA,aAAA;AAAA,MACX,SAAA,EAAW,aAAa,QAAQ,CAAA;AAAA,MAC/B,GAAG,IAAA;AAAA,MAEJ,QAAA,kBAAA,GAAA,CAAC,SAAU,EAAA,EAAA,aAAA,EAAW,IAAC,EAAA;AAAA;AAAA,GAE3B,EAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist-es/overlay/OverlayPanelContent.css.js

@@ -1,4 +1,4 @@
-var css_248z = ".saltOverlayPanelContent {\n  animation: var(--salt-animation-fade-in-center);\n  position: relative;\n  overflow: auto;\n  padding: var(--saltOverlay-content-padding, var(--salt-spacing-100));\n}\n";
+var css_248z = ".saltOverlayPanelContent {\n  animation: var(--salt-animation-fade-in-center);\n  position: relative;\n  overflow: hidden;\n  padding: var(--saltOverlay-content-padding, var(--salt-spacing-100));\n}\n\n.saltOverlayHeader ~ .saltOverlayPanelContent-separator {\n  border-top: var(--salt-size-border) var(--salt-separable-borderStyle) transparent;\n}\n\n.saltOverlayPanelContent-overflow {\n  padding-right: var(--salt-spacing-100);\n  overflow-y: auto;\n}\n\n.saltOverlayHeader ~ .saltOverlayPanelContent-scroll {\n  border-top: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-separable-tertiary-borderColor);\n  box-shadow: var(--salt-overlayable-shadow-scroll);\n  margin-top: calc(0 - var(--salt-size-border));\n}\n\n.saltOverlayHeader ~ .saltOverlayPanelContent-separator ~ .saltOverlayPanelContent {\n  padding-top: 0;\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=OverlayPanelContent.css.js.map

package/dist-es/overlay/OverlayPanelContent.js

@@ -1,109 +1,17 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { useComponentCssInjection } from '@salt-ds/styles';
 import { useWindow } from '@salt-ds/window';
 import clsx from 'clsx';
-import { forwardRef } from 'react';
+import { forwardRef, useState, useRef, useCallback } from 'react';
+import { debounce } from '../utils/debounce.js';
 import { makePrefixer } from '../utils/makePrefixer.js';
 import '../utils/useFloatingUI/useFloatingUI.js';
+import { useForkRef } from '../utils/useForkRef.js';
 import '../utils/useId.js';
+import { useIsomorphicLayoutEffect } from '../utils/useIsomorphicLayoutEffect.js';
 import '../salt-provider/SaltProvider.js';
 import '../viewport/ViewportProvider.js';
-import '../accordion/AccordionGroup.js';
-import '../accordion/AccordionPanel.js';
-import '../accordion/Accordion.js';
-import '../accordion/AccordionHeader.js';
-import '../aria-announcer/AriaAnnouncerContext.js';
-import '../avatar/Avatar.js';
-import '../badge/Badge.js';
-import '../banner/Banner.js';
-import '../banner/BannerActions.js';
-import '../banner/BannerContent.js';
-import '../border-item/BorderItem.js';
-import '../border-layout/BorderLayout.js';
-import '../breakpoints/BreakpointProvider.js';
-import '../button/Button.js';
-import '../card/Card.js';
-import '../checkbox/Checkbox.js';
-import '../checkbox/CheckboxGroup.js';
-import '@salt-ds/icons';
-import '../combo-box/ComboBox.js';
-import '../dialog/Dialog.js';
-import '../dialog/DialogHeader.js';
-import '../dialog/DialogActions.js';
-import '../dialog/DialogContent.js';
-import '../dialog/DialogContext.js';
-import '../dialog/DialogCloseButton.js';
-import '../divider/Divider.js';
-import '../drawer/Drawer.js';
-import '../drawer/DrawerCloseButton.js';
-import '../dropdown/Dropdown.js';
-import '../file-drop-zone/FileDropZone.js';
-import '../file-drop-zone/FileDropZoneIcon.js';
-import '../file-drop-zone/FileDropZoneTrigger.js';
-import '../flex-item/FlexItem.js';
-import '../flex-layout/FlexLayout.js';
-import '../flow-layout/FlowLayout.js';
-import '../form-field/FormField.js';
-import '../form-field-context/FormFieldContext.js';
-import '../status-indicator/StatusIndicator.js';
-import '../text/Text.js';
-import '../text/Code.js';
-import '../text/Display.js';
-import '../text/Headings.js';
-import '../text/Label.js';
-import '../text/TextAction.js';
-import '../text/TextNotation.js';
-import '../grid-item/GridItem.js';
-import '../grid-layout/GridLayout.js';
-import '../input/Input.js';
-import '../interactable-card/InteractableCard.js';
-import '../interactable-card/InteractableCardGroup.js';
-import '../interactable-card/InteractableCardGroupContext.js';
-import '../link/Link.js';
-import '../link-card/LinkCard.js';
-import '../list-box/ListBox.js';
-import '../list-control/ListControlContext.js';
-import '@floating-ui/react';
-import '../menu/MenuContext.js';
-import '../menu/MenuItem.js';
-import '../menu/MenuPanel.js';
-import '../menu/MenuPanelContext.js';
-import '../menu/MenuTriggerContext.js';
-import '../menu/MenuGroup.js';
-import '../multiline-input/MultilineInput.js';
-import '../navigation-item/NavigationItem.js';
-import '../option/Option.js';
-import '../option/OptionGroup.js';
-import './OverlayContext.js';
-import './OverlayPanel.js';
-import './OverlayPanelCloseButton.js';
-import '../pagination/Pagination.js';
-import '../pagination/Paginator.js';
-import '../pagination/CompactInput.js';
-import '../pagination/CompactPaginator.js';
-import '../pagination/GoToInput.js';
-import '../panel/Panel.js';
-import '../parent-child-layout/ParentChildLayout.js';
-import '../pill/Pill.js';
-import '../progress/CircularProgress/CircularProgress.js';
-import '../progress/LinearProgress/LinearProgress.js';
-import '../radio-button/RadioButton.js';
-import '../radio-button/RadioButtonGroup.js';
-import '../scrim/Scrim.js';
-import '../segmented-button-group/SegmentedButtonGroup.js';
-import '../spinner/Spinner.js';
-import '../stack-layout/StackLayout.js';
-import '../status-adornment/StatusAdornment.js';
-import '../toast/Toast.js';
-import '../toast/ToastContent.js';
-import '../split-layout/SplitLayout.js';
-import '../switch/Switch.js';
-import '../tag/Tag.js';
-import '../toggle-button/ToggleButton.js';
-import '../toggle-button-group/ToggleButtonGroup.js';
-import '../toggle-button-group/ToggleButtonGroupContext.js';
-import '../tooltip/Tooltip.js';
-import '../semantic-icon-provider/SemanticIconProvider.js';
+import { useResizeObserver } from '../utils/useResizeObserver.js';
 import css_248z from './OverlayPanelContent.css.js';
 
 const withBaseName = makePrefixer("saltOverlayPanelContent");
@@ -115,12 +23,44 @@ const OverlayPanelContent = forwardRef(function OverlayPanelContent2(props, ref)
     window: targetWindow
   });
   const { children, className, ...rest } = props;
-  return /* @__PURE__ */ jsx("div", {
-    className: clsx(withBaseName(), className),
-    ...rest,
-    ref,
-    children
+  const [scrolled, setScrolled] = useState(false);
+  const [isOverflowing, setIsOverflowing] = useState(false);
+  const divRef = useRef(null);
+  const containerRef = useForkRef(divRef, ref);
+  const handleScroll = debounce(() => {
+    if (!divRef.current) return;
+    setScrolled(divRef.current.scrollTop > 0);
   });
+  const checkOverflow = useCallback(() => {
+    if (!divRef.current) return;
+    setIsOverflowing(divRef.current.scrollHeight > divRef.current.offsetHeight);
+  }, []);
+  useResizeObserver({ ref: divRef, onResize: checkOverflow });
+  useIsomorphicLayoutEffect(() => {
+    checkOverflow();
+  }, [checkOverflow]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: clsx(withBaseName("separator"), {
+          [withBaseName("scroll")]: scrolled
+        })
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: clsx(withBaseName(), className), children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: clsx(withBaseName("container"), {
+          [withBaseName("overflow")]: isOverflowing
+        }),
+        onScrollCapture: handleScroll,
+        ...rest,
+        ref: containerRef,
+        children
+      }
+    ) })
+  ] });
 });
 
 export { OverlayPanelContent };

package/dist-es/overlay/OverlayPanelContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"OverlayPanelContent.js","sources":["../src/overlay/OverlayPanelContent.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport clsx from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type ReactNode,\n  forwardRef,\n} from \"react\";\nimport { makePrefixer } from \"../utils\";\nimport overlayPanelContentCss from \"./OverlayPanelContent.css\";\n\nconst withBaseName = makePrefixer(\"saltOverlayPanelContent\");\n\nexport interface OverlayPanelContentProps\n  extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * The content of Overlay Panel Content\n   */\n  children?: ReactNode;\n}\n\nexport const OverlayPanelContent = forwardRef<\n  HTMLDivElement,\n  OverlayPanelContentProps\n>(function OverlayPanelContent(props, ref) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-overlay-panel-content\",\n    css: overlayPanelContentCss,\n    window: targetWindow,\n  });\n\n  const { children, className, ...rest } = props;\n\n  return (\n    <div className={clsx(withBaseName(), className)} {...rest} ref={ref}>\n      {children}\n    </div>\n  );\n});\n"],"names":["OverlayPanelContent","overlayPanelContentCss"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAWA,MAAM,YAAA,GAAe,aAAa,yBAAyB,CAAA,CAAA;AAUpD,MAAM,mBAAsB,GAAA,UAAA,CAGjC,SAASA,oBAAAA,CAAoB,OAAO,GAAK,EAAA;AACzC,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,4BAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,EAAE,QAAA,EAAU,SAAc,EAAA,GAAA,IAAA,EAAS,GAAA,KAAA,CAAA;AAEzC,EAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,IAAI,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,IAAI,GAAG,IAAA;AAAA,IAAM,GAAA;AAAA,IACxD,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"OverlayPanelContent.js","sources":["../src/overlay/OverlayPanelContent.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport clsx from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type ReactNode,\n  forwardRef,\n  useCallback,\n  useRef,\n  useState,\n} from \"react\";\nimport {\n  debounce,\n  makePrefixer,\n  useForkRef,\n  useIsomorphicLayoutEffect,\n  useResizeObserver,\n} from \"../utils\";\nimport overlayPanelContentCss from \"./OverlayPanelContent.css\";\n\nconst withBaseName = makePrefixer(\"saltOverlayPanelContent\");\n\nexport interface OverlayPanelContentProps\n  extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * The content of Overlay Panel Content\n   */\n  children?: ReactNode;\n}\n\nexport const OverlayPanelContent = forwardRef<\n  HTMLDivElement,\n  OverlayPanelContentProps\n>(function OverlayPanelContent(props, ref) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-overlay-panel-content\",\n    css: overlayPanelContentCss,\n    window: targetWindow,\n  });\n\n  const { children, className, ...rest } = props;\n  const [scrolled, setScrolled] = useState(false);\n  const [isOverflowing, setIsOverflowing] = useState(false);\n  const divRef = useRef<HTMLDivElement>(null);\n  const containerRef = useForkRef(divRef, ref);\n  const handleScroll = debounce(() => {\n    if (!divRef.current) return;\n    setScrolled(divRef.current.scrollTop > 0);\n  });\n\n  const checkOverflow = useCallback(() => {\n    if (!divRef.current) return;\n    setIsOverflowing(divRef.current.scrollHeight > divRef.current.offsetHeight);\n  }, []);\n\n  useResizeObserver({ ref: divRef, onResize: checkOverflow });\n\n  useIsomorphicLayoutEffect(() => {\n    checkOverflow();\n  }, [checkOverflow]);\n  return (\n    <>\n      <div\n        className={clsx(withBaseName(\"separator\"), {\n          [withBaseName(\"scroll\")]: scrolled,\n        })}\n      />\n      <div className={clsx(withBaseName(), className)}>\n        <div\n          className={clsx(withBaseName(\"container\"), {\n            [withBaseName(\"overflow\")]: isOverflowing,\n          })}\n          onScrollCapture={handleScroll}\n          {...rest}\n          ref={containerRef}\n        >\n          {children}\n        </div>\n      </div>\n    </>\n  );\n});\n"],"names":["OverlayPanelContent","overlayPanelContentCss"],"mappings":";;;;;;;;;;;;;;;;AAoBA,MAAM,YAAA,GAAe,aAAa,yBAAyB,CAAA;AAUpD,MAAM,mBAAsB,GAAA,UAAA,CAGjC,SAASA,oBAAAA,CAAoB,OAAO,GAAK,EAAA;AACzC,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,4BAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,EAAE,QAAA,EAAU,SAAW,EAAA,GAAG,MAAS,GAAA,KAAA;AACzC,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,SAAS,KAAK,CAAA;AAC9C,EAAA,MAAM,CAAC,aAAA,EAAe,gBAAgB,CAAA,GAAI,SAAS,KAAK,CAAA;AACxD,EAAM,MAAA,MAAA,GAAS,OAAuB,IAAI,CAAA;AAC1C,EAAM,MAAA,YAAA,GAAe,UAAW,CAAA,MAAA,EAAQ,GAAG,CAAA;AAC3C,EAAM,MAAA,YAAA,GAAe,SAAS,MAAM;AAClC,IAAI,IAAA,CAAC,OAAO,OAAS,EAAA;AACrB,IAAY,WAAA,CAAA,MAAA,CAAO,OAAQ,CAAA,SAAA,GAAY,CAAC,CAAA;AAAA,GACzC,CAAA;AAED,EAAM,MAAA,aAAA,GAAgB,YAAY,MAAM;AACtC,IAAI,IAAA,CAAC,OAAO,OAAS,EAAA;AACrB,IAAA,gBAAA,CAAiB,MAAO,CAAA,OAAA,CAAQ,YAAe,GAAA,MAAA,CAAO,QAAQ,YAAY,CAAA;AAAA,GAC5E,EAAG,EAAE,CAAA;AAEL,EAAA,iBAAA,CAAkB,EAAE,GAAA,EAAK,MAAQ,EAAA,QAAA,EAAU,eAAe,CAAA;AAE1D,EAAA,yBAAA,CAA0B,MAAM;AAC9B,IAAc,aAAA,EAAA;AAAA,GAChB,EAAG,CAAC,aAAa,CAAC,CAAA;AAClB,EAAA,uBAEI,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAA,IAAA,CAAK,YAAa,CAAA,WAAW,CAAG,EAAA;AAAA,UACzC,CAAC,YAAA,CAAa,QAAQ,CAAC,GAAG;AAAA,SAC3B;AAAA;AAAA,KACH;AAAA,wBACC,KAAI,EAAA,EAAA,SAAA,EAAW,KAAK,YAAa,EAAA,EAAG,SAAS,CAC5C,EAAA,QAAA,kBAAA,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAA,IAAA,CAAK,YAAa,CAAA,WAAW,CAAG,EAAA;AAAA,UACzC,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG;AAAA,SAC7B,CAAA;AAAA,QACD,eAAiB,EAAA,YAAA;AAAA,QAChB,GAAG,IAAA;AAAA,QACJ,GAAK,EAAA,YAAA;AAAA,QAEJ;AAAA;AAAA,KAEL,EAAA;AAAA,GACF,EAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist-es/overlay/OverlayTrigger.js

@@ -6,123 +6,20 @@ import { useForkRef } from '../utils/useForkRef.js';
 import '../utils/useId.js';
 import '../salt-provider/SaltProvider.js';
 import '../viewport/ViewportProvider.js';
-import '../accordion/AccordionGroup.js';
-import '../accordion/AccordionPanel.js';
-import '../accordion/Accordion.js';
-import '../accordion/AccordionHeader.js';
-import '../aria-announcer/AriaAnnouncerContext.js';
-import '../avatar/Avatar.js';
-import '../badge/Badge.js';
-import '../banner/Banner.js';
-import '../banner/BannerActions.js';
-import '../banner/BannerContent.js';
-import '../border-item/BorderItem.js';
-import '../border-layout/BorderLayout.js';
-import '../breakpoints/BreakpointProvider.js';
-import '../button/Button.js';
-import '../card/Card.js';
-import '../checkbox/Checkbox.js';
-import '../checkbox/CheckboxGroup.js';
-import '@salt-ds/icons';
-import '@salt-ds/styles';
-import '@salt-ds/window';
-import 'clsx';
-import '../combo-box/ComboBox.js';
-import '../dialog/Dialog.js';
-import '../dialog/DialogHeader.js';
-import '../dialog/DialogActions.js';
-import '../dialog/DialogContent.js';
-import '../dialog/DialogContext.js';
-import '../dialog/DialogCloseButton.js';
-import '../divider/Divider.js';
-import '../drawer/Drawer.js';
-import '../drawer/DrawerCloseButton.js';
-import '../dropdown/Dropdown.js';
-import '../file-drop-zone/FileDropZone.js';
-import '../file-drop-zone/FileDropZoneIcon.js';
-import '../file-drop-zone/FileDropZoneTrigger.js';
-import '../flex-item/FlexItem.js';
-import '../flex-layout/FlexLayout.js';
-import '../flow-layout/FlowLayout.js';
-import '../form-field/FormField.js';
-import '../form-field-context/FormFieldContext.js';
-import '../status-indicator/StatusIndicator.js';
-import '../text/Text.js';
-import '../text/Code.js';
-import '../text/Display.js';
-import '../text/Headings.js';
-import '../text/Label.js';
-import '../text/TextAction.js';
-import '../text/TextNotation.js';
-import '../grid-item/GridItem.js';
-import '../grid-layout/GridLayout.js';
-import '../input/Input.js';
-import '../interactable-card/InteractableCard.js';
-import '../interactable-card/InteractableCardGroup.js';
-import '../interactable-card/InteractableCardGroupContext.js';
-import '../link/Link.js';
-import '../link-card/LinkCard.js';
-import '../list-box/ListBox.js';
-import '../list-control/ListControlContext.js';
-import '@floating-ui/react';
-import '../menu/MenuContext.js';
-import '../menu/MenuItem.js';
-import '../menu/MenuPanel.js';
-import '../menu/MenuPanelContext.js';
-import '../menu/MenuTriggerContext.js';
-import '../menu/MenuGroup.js';
-import '../multiline-input/MultilineInput.js';
-import '../navigation-item/NavigationItem.js';
-import '../option/Option.js';
-import '../option/OptionGroup.js';
-import { useOverlayContext } from './OverlayContext.js';
-import './OverlayPanel.js';
-import './OverlayPanelCloseButton.js';
-import './OverlayPanelContent.js';
-import '../pagination/Pagination.js';
-import '../pagination/Paginator.js';
-import '../pagination/CompactInput.js';
-import '../pagination/CompactPaginator.js';
-import '../pagination/GoToInput.js';
-import '../panel/Panel.js';
-import '../parent-child-layout/ParentChildLayout.js';
-import '../pill/Pill.js';
-import '../progress/CircularProgress/CircularProgress.js';
-import '../progress/LinearProgress/LinearProgress.js';
-import '../radio-button/RadioButton.js';
-import '../radio-button/RadioButtonGroup.js';
-import '../scrim/Scrim.js';
-import '../segmented-button-group/SegmentedButtonGroup.js';
-import '../spinner/Spinner.js';
-import '../stack-layout/StackLayout.js';
-import '../status-adornment/StatusAdornment.js';
-import '../toast/Toast.js';
-import '../toast/ToastContent.js';
-import '../split-layout/SplitLayout.js';
-import '../switch/Switch.js';
-import '../tag/Tag.js';
-import '../toggle-button/ToggleButton.js';
-import '../toggle-button-group/ToggleButtonGroup.js';
-import '../toggle-button-group/ToggleButtonGroupContext.js';
-import '../tooltip/Tooltip.js';
-import '../semantic-icon-provider/SemanticIconProvider.js';
 import { getRefFromChildren } from '../utils/getRefFromChildren.js';
+import { useOverlayContext } from './OverlayContext.js';
 
 function OverlayTrigger(props) {
   const { children } = props;
   const { reference, getReferenceProps } = useOverlayContext();
   const triggerRef = useForkRef(getRefFromChildren(children), reference);
   if (!children || !isValidElement(children)) {
-    return /* @__PURE__ */ jsx(Fragment, {
-      children
-    });
+    return /* @__PURE__ */ jsx(Fragment, { children });
   }
-  return /* @__PURE__ */ jsx(Fragment, {
-    children: cloneElement(children, {
-      ...mergeProps(getReferenceProps(), children.props),
-      ref: triggerRef
-    })
-  });
+  return /* @__PURE__ */ jsx(Fragment, { children: cloneElement(children, {
+    ...mergeProps(getReferenceProps(), children.props),
+    ref: triggerRef
+  }) });
 }
 
 export { OverlayTrigger };

package/dist-es/overlay/OverlayTrigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"OverlayTrigger.js","sources":["../src/overlay/OverlayTrigger.tsx"],"sourcesContent":["import { type ReactNode, cloneElement, isValidElement } from \"react\";\nimport { getRefFromChildren, mergeProps, useForkRef } from \"../utils\";\nimport { useOverlayContext } from \"./OverlayContext\";\n\nexport interface OverlayTriggerProps {\n  children?: ReactNode;\n}\n\nexport function OverlayTrigger(props: OverlayTriggerProps) {\n  const { children } = props;\n\n  const { reference, getReferenceProps } = useOverlayContext();\n\n  const triggerRef = useForkRef(getRefFromChildren(children), reference);\n\n  if (!children || !isValidElement(children)) {\n    return <>{children}</>;\n  }\n\n  return (\n    <>\n      {cloneElement(children, {\n        ...mergeProps(getReferenceProps(), children.props),\n        ref: triggerRef,\n      })}\n    </>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQO,SAAS,eAAe,KAA4B,EAAA;AACzD,EAAM,MAAA,EAAE,UAAa,GAAA,KAAA,CAAA;AAErB,EAAA,MAAM,EAAE,SAAA,EAAW,iBAAkB,EAAA,GAAI,iBAAkB,EAAA,CAAA;AAE3D,EAAA,MAAM,UAAa,GAAA,UAAA,CAAW,kBAAmB,CAAA,QAAQ,GAAG,SAAS,CAAA,CAAA;AAErE,EAAA,IAAI,CAAC,QAAA,IAAY,CAAC,cAAA,CAAe,QAAQ,CAAG,EAAA;AAC1C,IAAO,uBAAA,GAAA,CAAA,QAAA,EAAA;AAAA,MAAG,QAAA;AAAA,KAAS,CAAA,CAAA;AAAA,GACrB;AAEA,EACE,uBAAA,GAAA,CAAA,QAAA,EAAA;AAAA,IACG,uBAAa,QAAU,EAAA;AAAA,MACtB,GAAG,UAAA,CAAW,iBAAkB,EAAA,EAAG,SAAS,KAAK,CAAA;AAAA,MACjD,GAAK,EAAA,UAAA;AAAA,KACN,CAAA;AAAA,GACH,CAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"OverlayTrigger.js","sources":["../src/overlay/OverlayTrigger.tsx"],"sourcesContent":["import { type ReactNode, cloneElement, isValidElement } from \"react\";\nimport { getRefFromChildren, mergeProps, useForkRef } from \"../utils\";\nimport { useOverlayContext } from \"./OverlayContext\";\n\nexport interface OverlayTriggerProps {\n  children?: ReactNode;\n}\n\nexport function OverlayTrigger(props: OverlayTriggerProps) {\n  const { children } = props;\n\n  const { reference, getReferenceProps } = useOverlayContext();\n\n  const triggerRef = useForkRef(getRefFromChildren(children), reference);\n\n  if (!children || !isValidElement(children)) {\n    return <>{children}</>;\n  }\n\n  return (\n    <>\n      {cloneElement(children, {\n        ...mergeProps(getReferenceProps(), children.props),\n        ref: triggerRef,\n      })}\n    </>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;AAQO,SAAS,eAAe,KAA4B,EAAA;AACzD,EAAM,MAAA,EAAE,UAAa,GAAA,KAAA;AAErB,EAAA,MAAM,EAAE,SAAA,EAAW,iBAAkB,EAAA,GAAI,iBAAkB,EAAA;AAE3D,EAAA,MAAM,UAAa,GAAA,UAAA,CAAW,kBAAmB,CAAA,QAAQ,GAAG,SAAS,CAAA;AAErE,EAAA,IAAI,CAAC,QAAA,IAAY,CAAC,cAAA,CAAe,QAAQ,CAAG,EAAA;AAC1C,IAAA,uCAAU,QAAS,EAAA,CAAA;AAAA;AAGrB,EACE,uBAAA,GAAA,CAAA,QAAA,EAAA,EACG,uBAAa,QAAU,EAAA;AAAA,IACtB,GAAG,UAAA,CAAW,iBAAkB,EAAA,EAAG,SAAS,KAAK,CAAA;AAAA,IACjD,GAAK,EAAA;AAAA,GACN,CACH,EAAA,CAAA;AAEJ;;;;"}

package/dist-es/pagination/CompactInput.js

@@ -7,104 +7,9 @@ import '../utils/useFloatingUI/useFloatingUI.js';
 import '../utils/useId.js';
 import '../salt-provider/SaltProvider.js';
 import '../viewport/ViewportProvider.js';
-import '../accordion/AccordionGroup.js';
-import '../accordion/AccordionPanel.js';
-import '../accordion/Accordion.js';
-import '../accordion/AccordionHeader.js';
-import '../aria-announcer/AriaAnnouncerContext.js';
-import '../avatar/Avatar.js';
-import '../badge/Badge.js';
-import '../banner/Banner.js';
-import '../banner/BannerActions.js';
-import '../banner/BannerContent.js';
-import '../border-item/BorderItem.js';
-import '../border-layout/BorderLayout.js';
-import '../breakpoints/BreakpointProvider.js';
-import '../button/Button.js';
-import '../card/Card.js';
-import '../checkbox/Checkbox.js';
-import '../checkbox/CheckboxGroup.js';
-import '@salt-ds/icons';
+import { usePaginationContext } from './usePaginationContext.js';
 import { useComponentCssInjection } from '@salt-ds/styles';
 import { useWindow } from '@salt-ds/window';
-import '../combo-box/ComboBox.js';
-import '../dialog/Dialog.js';
-import '../dialog/DialogHeader.js';
-import '../dialog/DialogActions.js';
-import '../dialog/DialogContent.js';
-import '../dialog/DialogContext.js';
-import '../dialog/DialogCloseButton.js';
-import '../divider/Divider.js';
-import '../drawer/Drawer.js';
-import '../drawer/DrawerCloseButton.js';
-import '../dropdown/Dropdown.js';
-import '../file-drop-zone/FileDropZone.js';
-import '../file-drop-zone/FileDropZoneIcon.js';
-import '../file-drop-zone/FileDropZoneTrigger.js';
-import '../flex-item/FlexItem.js';
-import '../flex-layout/FlexLayout.js';
-import '../flow-layout/FlowLayout.js';
-import '../form-field/FormField.js';
-import '../form-field-context/FormFieldContext.js';
-import '../status-indicator/StatusIndicator.js';
-import '../text/Text.js';
-import '../text/Code.js';
-import '../text/Display.js';
-import '../text/Headings.js';
-import '../text/Label.js';
-import '../text/TextAction.js';
-import '../text/TextNotation.js';
-import '../grid-item/GridItem.js';
-import '../grid-layout/GridLayout.js';
-import '../interactable-card/InteractableCard.js';
-import '../interactable-card/InteractableCardGroup.js';
-import '../interactable-card/InteractableCardGroupContext.js';
-import '../link/Link.js';
-import '../link-card/LinkCard.js';
-import '../list-box/ListBox.js';
-import '../list-control/ListControlContext.js';
-import '@floating-ui/react';
-import '../menu/MenuContext.js';
-import '../menu/MenuItem.js';
-import '../menu/MenuPanel.js';
-import '../menu/MenuPanelContext.js';
-import '../menu/MenuTriggerContext.js';
-import '../menu/MenuGroup.js';
-import '../multiline-input/MultilineInput.js';
-import '../navigation-item/NavigationItem.js';
-import '../option/Option.js';
-import '../option/OptionGroup.js';
-import '../overlay/OverlayContext.js';
-import '../overlay/OverlayPanel.js';
-import '../overlay/OverlayPanelCloseButton.js';
-import '../overlay/OverlayPanelContent.js';
-import './Pagination.js';
-import './Paginator.js';
-import './CompactPaginator.js';
-import './GoToInput.js';
-import '../panel/Panel.js';
-import '../parent-child-layout/ParentChildLayout.js';
-import '../pill/Pill.js';
-import '../progress/CircularProgress/CircularProgress.js';
-import '../progress/LinearProgress/LinearProgress.js';
-import '../radio-button/RadioButton.js';
-import '../radio-button/RadioButtonGroup.js';
-import '../scrim/Scrim.js';
-import '../segmented-button-group/SegmentedButtonGroup.js';
-import '../spinner/Spinner.js';
-import '../stack-layout/StackLayout.js';
-import '../status-adornment/StatusAdornment.js';
-import '../toast/Toast.js';
-import '../toast/ToastContent.js';
-import '../split-layout/SplitLayout.js';
-import '../switch/Switch.js';
-import '../tag/Tag.js';
-import '../toggle-button/ToggleButton.js';
-import '../toggle-button-group/ToggleButtonGroup.js';
-import '../toggle-button-group/ToggleButtonGroupContext.js';
-import '../tooltip/Tooltip.js';
-import '../semantic-icon-provider/SemanticIconProvider.js';
-import { usePaginationContext } from './usePaginationContext.js';
 import css_248z from './CompactInput.css.js';
 
 const withBaseName = makePrefixer("saltCompactInput");
@@ -136,22 +41,25 @@ const CompactInput = forwardRef(function CompactInput2(props, ref) {
   const handleBlur = () => {
     setInputValue(`${page}`);
   };
-  return /* @__PURE__ */ jsx(Input, {
-    className: clsx(withBaseName(), {
-      [withBaseName("defaultSize")]: count < 100
-    }),
-    inputProps: {
-      "aria-label": `Go to page, ${count} total`,
-      style: { width: `${`${count}`.length}ch` }
-    },
-    onBlur: handleBlur,
-    onChange: handleChange,
-    onKeyDown: handleKeyDown,
-    value: inputValue,
-    textAlign: "center",
-    ref,
-    ...props
-  });
+  return /* @__PURE__ */ jsx(
+    Input,
+    {
+      className: clsx(withBaseName(), {
+        [withBaseName("defaultSize")]: count < 100
+      }),
+      inputProps: {
+        "aria-label": `Go to page, ${count} total`,
+        style: { width: `${`${count}`.length}ch` }
+      },
+      onBlur: handleBlur,
+      onChange: handleChange,
+      onKeyDown: handleKeyDown,
+      value: inputValue,
+      textAlign: "center",
+      ref,
+      ...props
+    }
+  );
 });
 
 export { CompactInput };

package/dist-es/pagination/CompactInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"CompactInput.js","sources":["../src/pagination/CompactInput.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n  type ChangeEventHandler,\n  type KeyboardEventHandler,\n  forwardRef,\n  useEffect,\n  useState,\n} from \"react\";\nimport { Input, type InputProps } from \"../input\";\nimport { makePrefixer } from \"../utils\";\nimport { usePaginationContext } from \"./usePaginationContext\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport compactInputCss from \"./CompactInput.css\";\n\nconst withBaseName = makePrefixer(\"saltCompactInput\");\n\nexport const CompactInput = forwardRef<\n  HTMLInputElement,\n  Pick<InputProps, \"inputRef\" | \"variant\">\n>(function CompactInput(props, ref) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-compact-input\",\n    css: compactInputCss,\n    window: targetWindow,\n  });\n\n  const { count, page, onPageChange } = usePaginationContext();\n\n  const [inputValue, setInputValue] = useState(`${page}`);\n\n  useEffect(() => {\n    setInputValue(`${page}`);\n  }, [page]);\n\n  const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n    setInputValue(event.target.value);\n  };\n\n  const handleKeyDown: KeyboardEventHandler<HTMLInputElement> = (event) => {\n    if (event.key === \"Enter\") {\n      const pageValue = Number(inputValue);\n      if (!Number.isNaN(pageValue) && pageValue <= count && pageValue > 0) {\n        onPageChange(event, pageValue);\n      } else {\n        setInputValue(`${page}`);\n      }\n    }\n  };\n\n  const handleBlur = () => {\n    setInputValue(`${page}`);\n  };\n\n  return (\n    <Input\n      className={clsx(withBaseName(), {\n        [withBaseName(\"defaultSize\")]: count < 100,\n      })}\n      inputProps={{\n        \"aria-label\": `Go to page, ${count} total`,\n        style: { width: `${`${count}`.length}ch` },\n      }}\n      onBlur={handleBlur}\n      onChange={handleChange}\n      onKeyDown={handleKeyDown}\n      value={inputValue}\n      textAlign={\"center\"}\n      ref={ref}\n      {...props}\n    />\n  );\n});\n"],"names":["CompactInput","compactInputCss"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiBA,MAAM,YAAA,GAAe,aAAa,kBAAkB,CAAA,CAAA;AAE7C,MAAM,YAAe,GAAA,UAAA,CAG1B,SAASA,aAAAA,CAAa,OAAO,GAAK,EAAA;AAClC,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,oBAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,EAAE,KAAA,EAAO,IAAM,EAAA,YAAA,KAAiB,oBAAqB,EAAA,CAAA;AAE3D,EAAA,MAAM,CAAC,UAAY,EAAA,aAAa,CAAI,GAAA,QAAA,CAAS,GAAG,IAAM,CAAA,CAAA,CAAA,CAAA;AAEtD,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,aAAA,CAAc,GAAG,IAAM,CAAA,CAAA,CAAA,CAAA;AAAA,GACzB,EAAG,CAAC,IAAI,CAAC,CAAA,CAAA;AAET,EAAM,MAAA,YAAA,GAAqD,CAAC,KAAU,KAAA;AACpE,IAAc,aAAA,CAAA,KAAA,CAAM,OAAO,KAAK,CAAA,CAAA;AAAA,GAClC,CAAA;AAEA,EAAM,MAAA,aAAA,GAAwD,CAAC,KAAU,KAAA;AACvE,IAAI,IAAA,KAAA,CAAM,QAAQ,OAAS,EAAA;AACzB,MAAM,MAAA,SAAA,GAAY,OAAO,UAAU,CAAA,CAAA;AACnC,MAAI,IAAA,CAAC,OAAO,KAAM,CAAA,SAAS,KAAK,SAAa,IAAA,KAAA,IAAS,YAAY,CAAG,EAAA;AACnE,QAAA,YAAA,CAAa,OAAO,SAAS,CAAA,CAAA;AAAA,OACxB,MAAA;AACL,QAAA,aAAA,CAAc,GAAG,IAAM,CAAA,CAAA,CAAA,CAAA;AAAA,OACzB;AAAA,KACF;AAAA,GACF,CAAA;AAEA,EAAA,MAAM,aAAa,MAAM;AACvB,IAAA,aAAA,CAAc,GAAG,IAAM,CAAA,CAAA,CAAA,CAAA;AAAA,GACzB,CAAA;AAEA,EAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,IACC,SAAA,EAAW,IAAK,CAAA,YAAA,EAAgB,EAAA;AAAA,MAC9B,CAAC,YAAA,CAAa,aAAa,CAAA,GAAI,KAAQ,GAAA,GAAA;AAAA,KACxC,CAAA;AAAA,IACD,UAAY,EAAA;AAAA,MACV,cAAc,CAAe,YAAA,EAAA,KAAA,CAAA,MAAA,CAAA;AAAA,MAC7B,OAAO,EAAE,KAAA,EAAO,CAAG,EAAA,CAAA,EAAG,QAAQ,MAAW,CAAA,EAAA,CAAA,EAAA;AAAA,KAC3C;AAAA,IACA,MAAQ,EAAA,UAAA;AAAA,IACR,QAAU,EAAA,YAAA;AAAA,IACV,SAAW,EAAA,aAAA;AAAA,IACX,KAAO,EAAA,UAAA;AAAA,IACP,SAAW,EAAA,QAAA;AAAA,IACX,GAAA;AAAA,IACC,GAAG,KAAA;AAAA,GACN,CAAA,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"CompactInput.js","sources":["../src/pagination/CompactInput.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n  type ChangeEventHandler,\n  type KeyboardEventHandler,\n  forwardRef,\n  useEffect,\n  useState,\n} from \"react\";\nimport { Input, type InputProps } from \"../input\";\nimport { makePrefixer } from \"../utils\";\nimport { usePaginationContext } from \"./usePaginationContext\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport compactInputCss from \"./CompactInput.css\";\n\nconst withBaseName = makePrefixer(\"saltCompactInput\");\n\nexport const CompactInput = forwardRef<\n  HTMLInputElement,\n  Pick<InputProps, \"inputRef\" | \"variant\">\n>(function CompactInput(props, ref) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-compact-input\",\n    css: compactInputCss,\n    window: targetWindow,\n  });\n\n  const { count, page, onPageChange } = usePaginationContext();\n\n  const [inputValue, setInputValue] = useState(`${page}`);\n\n  useEffect(() => {\n    setInputValue(`${page}`);\n  }, [page]);\n\n  const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n    setInputValue(event.target.value);\n  };\n\n  const handleKeyDown: KeyboardEventHandler<HTMLInputElement> = (event) => {\n    if (event.key === \"Enter\") {\n      const pageValue = Number(inputValue);\n      if (!Number.isNaN(pageValue) && pageValue <= count && pageValue > 0) {\n        onPageChange(event, pageValue);\n      } else {\n        setInputValue(`${page}`);\n      }\n    }\n  };\n\n  const handleBlur = () => {\n    setInputValue(`${page}`);\n  };\n\n  return (\n    <Input\n      className={clsx(withBaseName(), {\n        [withBaseName(\"defaultSize\")]: count < 100,\n      })}\n      inputProps={{\n        \"aria-label\": `Go to page, ${count} total`,\n        style: { width: `${`${count}`.length}ch` },\n      }}\n      onBlur={handleBlur}\n      onChange={handleChange}\n      onKeyDown={handleKeyDown}\n      value={inputValue}\n      textAlign={\"center\"}\n      ref={ref}\n      {...props}\n    />\n  );\n});\n"],"names":["CompactInput","compactInputCss"],"mappings":";;;;;;;;;;;;;;AAiBA,MAAM,YAAA,GAAe,aAAa,kBAAkB,CAAA;AAE7C,MAAM,YAAe,GAAA,UAAA,CAG1B,SAASA,aAAAA,CAAa,OAAO,GAAK,EAAA;AAClC,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,oBAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,EAAE,KAAA,EAAO,IAAM,EAAA,YAAA,KAAiB,oBAAqB,EAAA;AAE3D,EAAA,MAAM,CAAC,UAAY,EAAA,aAAa,IAAI,QAAS,CAAA,CAAA,EAAG,IAAI,CAAE,CAAA,CAAA;AAEtD,EAAA,SAAA,CAAU,MAAM;AACd,IAAc,aAAA,CAAA,CAAA,EAAG,IAAI,CAAE,CAAA,CAAA;AAAA,GACzB,EAAG,CAAC,IAAI,CAAC,CAAA;AAET,EAAM,MAAA,YAAA,GAAqD,CAAC,KAAU,KAAA;AACpE,IAAc,aAAA,CAAA,KAAA,CAAM,OAAO,KAAK,CAAA;AAAA,GAClC;AAEA,EAAM,MAAA,aAAA,GAAwD,CAAC,KAAU,KAAA;AACvE,IAAI,IAAA,KAAA,CAAM,QAAQ,OAAS,EAAA;AACzB,MAAM,MAAA,SAAA,GAAY,OAAO,UAAU,CAAA;AACnC,MAAI,IAAA,CAAC,OAAO,KAAM,CAAA,SAAS,KAAK,SAAa,IAAA,KAAA,IAAS,YAAY,CAAG,EAAA;AACnE,QAAA,YAAA,CAAa,OAAO,SAAS,CAAA;AAAA,OACxB,MAAA;AACL,QAAc,aAAA,CAAA,CAAA,EAAG,IAAI,CAAE,CAAA,CAAA;AAAA;AACzB;AACF,GACF;AAEA,EAAA,MAAM,aAAa,MAAM;AACvB,IAAc,aAAA,CAAA,CAAA,EAAG,IAAI,CAAE,CAAA,CAAA;AAAA,GACzB;AAEA,EACE,uBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,IAAK,CAAA,YAAA,EAAgB,EAAA;AAAA,QAC9B,CAAC,YAAA,CAAa,aAAa,CAAC,GAAG,KAAQ,GAAA;AAAA,OACxC,CAAA;AAAA,MACD,UAAY,EAAA;AAAA,QACV,YAAA,EAAc,eAAe,KAAK,CAAA,MAAA,CAAA;AAAA,QAClC,KAAA,EAAO,EAAE,KAAO,EAAA,CAAA,EAAG,GAAG,KAAK,CAAA,CAAA,CAAG,MAAM,CAAK,EAAA,CAAA;AAAA,OAC3C;AAAA,MACA,MAAQ,EAAA,UAAA;AAAA,MACR,QAAU,EAAA,YAAA;AAAA,MACV,SAAW,EAAA,aAAA;AAAA,MACX,KAAO,EAAA,UAAA;AAAA,MACP,SAAW,EAAA,QAAA;AAAA,MACX,GAAA;AAAA,MACC,GAAG;AAAA;AAAA,GACN;AAEJ,CAAC;;;;"}