@salt-ds/core 1.37.0 → 1.37.2

package/dist-es/dialog/DialogActions.js.map

@@ -1 +1 @@
-{"version":3,"file":"DialogActions.js","sources":["../src/dialog/DialogActions.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type HTMLAttributes, type ReactNode, forwardRef } from \"react\";\nimport { makePrefixer } from \"../utils\";\n\nimport dialogActionsCss from \"./DialogActions.css\";\n\nconst withBaseName = makePrefixer(\"saltDialogActions\");\n\nexport interface DialogActionsProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * The content of Dialog Actions\n   */\n  children?: ReactNode;\n}\n\nexport const DialogActions = forwardRef<HTMLDivElement, DialogActionsProps>(\n  function DialogActions(props, ref) {\n    const { children, className, ...rest } = props;\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-dialog-actions\",\n      css: dialogActionsCss,\n      window: targetWindow,\n    });\n\n    return (\n      <div className={clsx(withBaseName(), className)} {...rest} ref={ref}>\n        {children}\n      </div>\n    );\n  },\n);\n"],"names":["DialogActions","dialogActionsCss"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,MAAM,YAAA,GAAe,aAAa,mBAAmB,CAAA,CAAA;AAS9C,MAAM,aAAgB,GAAA,UAAA;AAAA,EAC3B,SAASA,cAAc,CAAA,KAAA,EAAO,GAAK,EAAA;AACjC,IAAA,MAAM,EAAE,QAAA,EAAU,SAAc,EAAA,GAAA,IAAA,EAAS,GAAA,KAAA,CAAA;AACzC,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,qBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,MAAI,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MAAI,GAAG,IAAA;AAAA,MAAM,GAAA;AAAA,MACxD,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
+{"version":3,"file":"DialogActions.js","sources":["../src/dialog/DialogActions.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type HTMLAttributes, type ReactNode, forwardRef } from \"react\";\nimport { makePrefixer } from \"../utils\";\n\nimport dialogActionsCss from \"./DialogActions.css\";\n\nconst withBaseName = makePrefixer(\"saltDialogActions\");\n\nexport interface DialogActionsProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * The content of Dialog Actions\n   */\n  children?: ReactNode;\n}\n\nexport const DialogActions = forwardRef<HTMLDivElement, DialogActionsProps>(\n  function DialogActions(props, ref) {\n    const { children, className, ...rest } = props;\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-dialog-actions\",\n      css: dialogActionsCss,\n      window: targetWindow,\n    });\n\n    return (\n      <div className={clsx(withBaseName(), className)} {...rest} ref={ref}>\n        {children}\n      </div>\n    );\n  },\n);\n"],"names":["DialogActions","dialogActionsCss"],"mappings":";;;;;;;;;;;;AAQA,MAAM,YAAA,GAAe,aAAa,mBAAmB,CAAA;AAS9C,MAAM,aAAgB,GAAA,UAAA;AAAA,EAC3B,SAASA,cAAc,CAAA,KAAA,EAAO,GAAK,EAAA;AACjC,IAAA,MAAM,EAAE,QAAA,EAAU,SAAW,EAAA,GAAG,MAAS,GAAA,KAAA;AACzC,IAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,qBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IACE,uBAAA,GAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,IAAK,CAAA,YAAA,EAAgB,EAAA,SAAS,CAAI,EAAA,GAAG,IAAM,EAAA,GAAA,EACxD,QACH,EAAA,CAAA;AAAA;AAGN;;;;"}

package/dist-es/dialog/DialogCloseButton.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.js';
-import './DialogHeader.js';
-import './DialogActions.js';
-import './DialogContent.js';
-import './DialogContext.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 '../overlay/OverlayContext.js';
-import '../overlay/OverlayPanel.js';
-import '../overlay/OverlayPanelCloseButton.js';
-import '../overlay/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 './DialogCloseButton.css.js';
 
 const withBaseName = makePrefixer("saltDialogCloseButton");
@@ -116,16 +22,17 @@ const DialogCloseButton = forwardRef(
       window: targetWindow
     });
     const { CloseIcon } = useIcon();
-    return /* @__PURE__ */ jsx(Button, {
-      ref,
-      "aria-label": "Close dialog",
-      variant: "secondary",
-      className: clsx(withBaseName(), className),
-      ...rest,
-      children: /* @__PURE__ */ jsx(CloseIcon, {
-        "aria-hidden": true
-      })
-    });
+    return /* @__PURE__ */ jsx(
+      Button,
+      {
+        ref,
+        "aria-label": "Close dialog",
+        appearance: "transparent",
+        className: clsx(withBaseName(), className),
+        ...rest,
+        children: /* @__PURE__ */ jsx(CloseIcon, { "aria-hidden": true })
+      }
+    );
   }
 );
 

package/dist-es/dialog/DialogCloseButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"DialogCloseButton.js","sources":["../src/dialog/DialogCloseButton.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\";\n\nimport dialogCloseButtonCss from \"./DialogCloseButton.css\";\n\nconst withBaseName = makePrefixer(\"saltDialogCloseButton\");\n\nexport const DialogCloseButton = forwardRef<HTMLButtonElement, ButtonProps>(\n  function DialogCloseButton({ className, ...rest }, ref) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-dialog-close-button\",\n      css: dialogCloseButtonCss,\n      window: targetWindow,\n    });\n    const { CloseIcon } = useIcon();\n\n    return (\n      <Button\n        ref={ref}\n        aria-label=\"Close dialog\"\n        variant=\"secondary\"\n        className={clsx(withBaseName(), className)}\n        {...rest}\n      >\n        <CloseIcon aria-hidden />\n      </Button>\n    );\n  },\n);\n"],"names":["DialogCloseButton","dialogCloseButtonCss"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUA,MAAM,YAAA,GAAe,aAAa,uBAAuB,CAAA,CAAA;AAElD,MAAM,iBAAoB,GAAA,UAAA;AAAA,EAC/B,SAASA,kBAAkB,CAAA,EAAE,SAAc,EAAA,GAAA,IAAA,IAAQ,GAAK,EAAA;AACtD,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,0BAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AACD,IAAM,MAAA,EAAE,SAAU,EAAA,GAAI,OAAQ,EAAA,CAAA;AAE9B,IAAA,uBACG,GAAA,CAAA,MAAA,EAAA;AAAA,MACC,GAAA;AAAA,MACA,YAAW,EAAA,cAAA;AAAA,MACX,OAAQ,EAAA,WAAA;AAAA,MACR,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACxC,GAAG,IAAA;AAAA,MAEJ,QAAC,kBAAA,GAAA,CAAA,SAAA,EAAA;AAAA,QAAU,aAAW,EAAA,IAAA;AAAA,OAAC,CAAA;AAAA,KACzB,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
+{"version":3,"file":"DialogCloseButton.js","sources":["../src/dialog/DialogCloseButton.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\";\n\nimport dialogCloseButtonCss from \"./DialogCloseButton.css\";\n\nconst withBaseName = makePrefixer(\"saltDialogCloseButton\");\n\nexport const DialogCloseButton = forwardRef<HTMLButtonElement, ButtonProps>(\n  function DialogCloseButton({ className, ...rest }, ref) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-dialog-close-button\",\n      css: dialogCloseButtonCss,\n      window: targetWindow,\n    });\n    const { CloseIcon } = useIcon();\n\n    return (\n      <Button\n        ref={ref}\n        aria-label=\"Close dialog\"\n        appearance=\"transparent\"\n        className={clsx(withBaseName(), className)}\n        {...rest}\n      >\n        <CloseIcon aria-hidden />\n      </Button>\n    );\n  },\n);\n"],"names":["DialogCloseButton","dialogCloseButtonCss"],"mappings":";;;;;;;;;;;;;;AAUA,MAAM,YAAA,GAAe,aAAa,uBAAuB,CAAA;AAElD,MAAM,iBAAoB,GAAA,UAAA;AAAA,EAC/B,SAASA,kBAAkB,CAAA,EAAE,WAAW,GAAG,IAAA,IAAQ,GAAK,EAAA;AACtD,IAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,0BAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AACD,IAAM,MAAA,EAAE,SAAU,EAAA,GAAI,OAAQ,EAAA;AAE9B,IACE,uBAAA,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,YAAW,EAAA,cAAA;AAAA,QACX,UAAW,EAAA,aAAA;AAAA,QACX,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,QACxC,GAAG,IAAA;AAAA,QAEJ,QAAA,kBAAA,GAAA,CAAC,SAAU,EAAA,EAAA,aAAA,EAAW,IAAC,EAAA;AAAA;AAAA,KACzB;AAAA;AAGN;;;;"}

package/dist-es/dialog/DialogContent.css.js

@@ -1,4 +1,4 @@
-var css_248z = ".saltDialogContent {\n  color: var(--salt-content-primary-foreground);\n  min-height: var(--salt-text-lineHeight);\n  overflow-y: auto;\n  background: var(--salt-container-primary-background);\n\n  margin-left: var(--salt-spacing-200);\n  margin-right: var(--salt-spacing-300);\n  padding-left: var(--salt-spacing-100);\n  border-bottom: var(--salt-size-border) var(--salt-separable-borderStyle) transparent;\n  box-shadow: none;\n  /* auto is needed for support on Safari, due to webkit bugs with flex */\n  flex: 1 1 auto;\n}\n\n.saltDialogContent-scroll {\n  border-bottom: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-separable-tertiary-borderColor);\n  box-shadow: var(--salt-overlayable-shadow-scroll);\n}\n";
+var css_248z = ".saltDialogContent {\n  color: var(--salt-content-primary-foreground);\n  min-height: var(--salt-text-lineHeight);\n  overflow-y: auto;\n  background: var(--salt-container-primary-background);\n\n  margin-left: var(--salt-spacing-200);\n  margin-right: var(--salt-spacing-300);\n  padding-left: var(--salt-spacing-100);\n  border-bottom: var(--salt-size-border) var(--salt-separable-borderStyle) transparent;\n  box-shadow: none;\n  /* auto is needed for support on Safari, due to webkit bugs with flex */\n  flex: 1 1 auto;\n}\n.saltDialogContent-overflow {\n  padding-right: var(--salt-spacing-100);\n}\n\n.saltDialogContent-scroll {\n  border-bottom: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-separable-tertiary-borderColor);\n  box-shadow: var(--salt-overlayable-shadow-scroll);\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=DialogContent.css.js.map

package/dist-es/dialog/DialogContent.js

@@ -2,117 +2,30 @@ 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, useState } from 'react';
+import { forwardRef, useState, useRef, useCallback } from 'react';
 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.js';
-import './DialogHeader.js';
-import './DialogActions.js';
-import './DialogContext.js';
-import './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 '../overlay/OverlayContext.js';
-import '../overlay/OverlayPanel.js';
-import '../overlay/OverlayPanelCloseButton.js';
-import '../overlay/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 { useResizeObserver } from '../utils/useResizeObserver.js';
 import css_248z from './DialogContent.css.js';
 
 const withBaseName = makePrefixer("saltDialogContent");
 const DialogContent = forwardRef(
   function DialogContent2(props, ref) {
     const { children, className, ...rest } = props;
-    const [scrollTop, setScrollTop] = useState(0);
-    const handleScroll = (event) => {
-      setScrollTop(event.currentTarget.scrollTop);
+    const [scrolled, setScrolled] = useState(false);
+    const [isOverflowing, setIsOverflowing] = useState(false);
+    const divRef = useRef(null);
+    const containerRef = useForkRef(divRef, ref);
+    const handleScroll = () => {
+      targetWindow == null ? void 0 : targetWindow.requestAnimationFrame(() => {
+        if (!divRef.current) return;
+        setScrolled(divRef.current.scrollTop > 0);
+      });
     };
     const targetWindow = useWindow();
     useComponentCssInjection({
@@ -120,20 +33,35 @@ const DialogContent = forwardRef(
       css: css_248z,
       window: targetWindow
     });
-    return /* @__PURE__ */ jsxs(Fragment, {
-      children: [
-        /* @__PURE__ */ jsx("div", {
-          className: clsx({ [withBaseName("scroll")]: scrollTop > 0 })
-        }),
-        /* @__PURE__ */ jsx("div", {
-          className: clsx(withBaseName(), className),
-          onScroll: handleScroll,
+    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("scroll")]: scrolled }) }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: clsx(
+            withBaseName(),
+            {
+              [withBaseName("overflow")]: isOverflowing
+            },
+            className
+          ),
+          onScrollCapture: handleScroll,
           ...rest,
-          ref,
+          ref: containerRef,
           children
-        })
-      ]
-    });
+        }
+      )
+    ] });
   }
 );
 

package/dist-es/dialog/DialogContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"DialogContent.js","sources":["../src/dialog/DialogContent.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type HTMLAttributes,\n  type ReactNode,\n  type UIEvent,\n  forwardRef,\n  useState,\n} from \"react\";\nimport { makePrefixer } from \"../utils\";\n\nimport dialogContentCss from \"./DialogContent.css\";\n\nconst withBaseName = makePrefixer(\"saltDialogContent\");\n\nexport interface DialogContentProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * The content of Dialog Content\n   */\n  children?: ReactNode;\n}\n\nexport const DialogContent = forwardRef<HTMLDivElement, DialogContentProps>(\n  function DialogContent(props, ref) {\n    const { children, className, ...rest } = props;\n    const [scrollTop, setScrollTop] = useState(0);\n\n    const handleScroll = (event: UIEvent<HTMLElement>) => {\n      setScrollTop(event.currentTarget.scrollTop);\n    };\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-dialog-content\",\n      css: dialogContentCss,\n      window: targetWindow,\n    });\n\n    return (\n      <>\n        <div className={clsx({ [withBaseName(\"scroll\")]: scrollTop > 0 })} />\n        <div\n          className={clsx(withBaseName(), className)}\n          onScroll={handleScroll}\n          {...rest}\n          ref={ref}\n        >\n          {children}\n        </div>\n      </>\n    );\n  },\n);\n"],"names":["DialogContent","dialogContentCss"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAcA,MAAM,YAAA,GAAe,aAAa,mBAAmB,CAAA,CAAA;AAS9C,MAAM,aAAgB,GAAA,UAAA;AAAA,EAC3B,SAASA,cAAc,CAAA,KAAA,EAAO,GAAK,EAAA;AACjC,IAAA,MAAM,EAAE,QAAA,EAAU,SAAc,EAAA,GAAA,IAAA,EAAS,GAAA,KAAA,CAAA;AACzC,IAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAI,SAAS,CAAC,CAAA,CAAA;AAE5C,IAAM,MAAA,YAAA,GAAe,CAAC,KAAgC,KAAA;AACpD,MAAa,YAAA,CAAA,KAAA,CAAM,cAAc,SAAS,CAAA,CAAA;AAAA,KAC5C,CAAA;AAEA,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,qBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IACE,uBAAA,IAAA,CAAA,QAAA,EAAA;AAAA,MACE,QAAA,EAAA;AAAA,wBAAC,GAAA,CAAA,KAAA,EAAA;AAAA,UAAI,SAAA,EAAW,KAAK,EAAE,CAAC,aAAa,QAAQ,CAAA,GAAI,SAAY,GAAA,CAAA,EAAG,CAAA;AAAA,SAAG,CAAA;AAAA,wBAClE,GAAA,CAAA,KAAA,EAAA;AAAA,UACC,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,UACzC,QAAU,EAAA,YAAA;AAAA,UACT,GAAG,IAAA;AAAA,UACJ,GAAA;AAAA,UAEC,QAAA;AAAA,SACH,CAAA;AAAA,OAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
+{"version":3,"file":"DialogContent.js","sources":["../src/dialog/DialogContent.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type HTMLAttributes,\n  type ReactNode,\n  forwardRef,\n  useCallback,\n  useRef,\n  useState,\n} from \"react\";\nimport {\n  makePrefixer,\n  useForkRef,\n  useIsomorphicLayoutEffect,\n  useResizeObserver,\n} from \"../utils\";\n\nimport dialogContentCss from \"./DialogContent.css\";\n\nconst withBaseName = makePrefixer(\"saltDialogContent\");\n\nexport interface DialogContentProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * The content of Dialog Content\n   */\n  children?: ReactNode;\n}\n\nexport const DialogContent = forwardRef<HTMLDivElement, DialogContentProps>(\n  function DialogContent(props, ref) {\n    const { children, className, ...rest } = props;\n    const [scrolled, setScrolled] = useState(false);\n    const [isOverflowing, setIsOverflowing] = useState(false);\n\n    const divRef = useRef<HTMLDivElement>(null);\n    const containerRef = useForkRef(divRef, ref);\n\n    const handleScroll = () => {\n      targetWindow?.requestAnimationFrame(() => {\n        if (!divRef.current) return;\n        setScrolled(divRef.current.scrollTop > 0);\n      });\n    };\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-dialog-content\",\n      css: dialogContentCss,\n      window: targetWindow,\n    });\n\n    const checkOverflow = useCallback(() => {\n      if (!divRef.current) return;\n      setIsOverflowing(\n        divRef.current.scrollHeight > divRef.current.offsetHeight,\n      );\n    }, []);\n\n    useResizeObserver({ ref: divRef, onResize: checkOverflow });\n\n    useIsomorphicLayoutEffect(() => {\n      checkOverflow();\n    }, [checkOverflow]);\n\n    return (\n      <>\n        <div className={clsx({ [withBaseName(\"scroll\")]: scrolled })} />\n        <div\n          className={clsx(\n            withBaseName(),\n            {\n              [withBaseName(\"overflow\")]: isOverflowing,\n            },\n            className,\n          )}\n          onScrollCapture={handleScroll}\n          {...rest}\n          ref={containerRef}\n        >\n          {children}\n        </div>\n      </>\n    );\n  },\n);\n"],"names":["DialogContent","dialogContentCss"],"mappings":";;;;;;;;;;;;;;;AAoBA,MAAM,YAAA,GAAe,aAAa,mBAAmB,CAAA;AAS9C,MAAM,aAAgB,GAAA,UAAA;AAAA,EAC3B,SAASA,cAAc,CAAA,KAAA,EAAO,GAAK,EAAA;AACjC,IAAA,MAAM,EAAE,QAAA,EAAU,SAAW,EAAA,GAAG,MAAS,GAAA,KAAA;AACzC,IAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,SAAS,KAAK,CAAA;AAC9C,IAAA,MAAM,CAAC,aAAA,EAAe,gBAAgB,CAAA,GAAI,SAAS,KAAK,CAAA;AAExD,IAAM,MAAA,MAAA,GAAS,OAAuB,IAAI,CAAA;AAC1C,IAAM,MAAA,YAAA,GAAe,UAAW,CAAA,MAAA,EAAQ,GAAG,CAAA;AAE3C,IAAA,MAAM,eAAe,MAAM;AACzB,MAAA,YAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,YAAA,CAAc,sBAAsB,MAAM;AACxC,QAAI,IAAA,CAAC,OAAO,OAAS,EAAA;AACrB,QAAY,WAAA,CAAA,MAAA,CAAO,OAAQ,CAAA,SAAA,GAAY,CAAC,CAAA;AAAA,OAC1C,CAAA;AAAA,KACF;AAEA,IAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,qBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAM,MAAA,aAAA,GAAgB,YAAY,MAAM;AACtC,MAAI,IAAA,CAAC,OAAO,OAAS,EAAA;AACrB,MAAA,gBAAA;AAAA,QACE,MAAO,CAAA,OAAA,CAAQ,YAAe,GAAA,MAAA,CAAO,OAAQ,CAAA;AAAA,OAC/C;AAAA,KACF,EAAG,EAAE,CAAA;AAEL,IAAA,iBAAA,CAAkB,EAAE,GAAA,EAAK,MAAQ,EAAA,QAAA,EAAU,eAAe,CAAA;AAE1D,IAAA,yBAAA,CAA0B,MAAM;AAC9B,MAAc,aAAA,EAAA;AAAA,KAChB,EAAG,CAAC,aAAa,CAAC,CAAA;AAElB,IAAA,uBAEI,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,sBAAC,GAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,IAAA,CAAK,EAAE,CAAC,YAAa,CAAA,QAAQ,CAAC,GAAG,QAAS,EAAC,CAAG,EAAA,CAAA;AAAA,sBAC9D,GAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,SAAW,EAAA,IAAA;AAAA,YACT,YAAa,EAAA;AAAA,YACb;AAAA,cACE,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG;AAAA,aAC9B;AAAA,YACA;AAAA,WACF;AAAA,UACA,eAAiB,EAAA,YAAA;AAAA,UAChB,GAAG,IAAA;AAAA,UACJ,GAAK,EAAA,YAAA;AAAA,UAEJ;AAAA;AAAA;AACH,KACF,EAAA,CAAA;AAAA;AAGN;;;;"}

package/dist-es/dialog/DialogContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"DialogContext.js","sources":["../src/dialog/DialogContext.tsx"],"sourcesContent":["import { createContext, useContext } from \"react\";\nimport type { ValidationStatus } from \"../status-indicator\";\n\nexport const DialogContext = createContext<{\n  status?: ValidationStatus;\n  id: string | undefined;\n}>({\n  status: undefined,\n  id: \"\",\n});\n\nexport const useDialogContext = () => {\n  return useContext(DialogContext);\n};\n"],"names":[],"mappings":";;AAGO,MAAM,gBAAgB,aAG1B,CAAA;AAAA,EACD,MAAQ,EAAA,KAAA,CAAA;AAAA,EACR,EAAI,EAAA,EAAA;AACN,CAAC,EAAA;AAEM,MAAM,mBAAmB,MAAM;AACpC,EAAA,OAAO,WAAW,aAAa,CAAA,CAAA;AACjC;;;;"}
+{"version":3,"file":"DialogContext.js","sources":["../src/dialog/DialogContext.tsx"],"sourcesContent":["import { createContext, useContext } from \"react\";\nimport type { ValidationStatus } from \"../status-indicator\";\n\nexport const DialogContext = createContext<{\n  status?: ValidationStatus;\n  id: string | undefined;\n}>({\n  status: undefined,\n  id: \"\",\n});\n\nexport const useDialogContext = () => {\n  return useContext(DialogContext);\n};\n"],"names":[],"mappings":";;AAGO,MAAM,gBAAgB,aAG1B,CAAA;AAAA,EACD,MAAQ,EAAA,KAAA,CAAA;AAAA,EACR,EAAI,EAAA;AACN,CAAC;AAEM,MAAM,mBAAmB,MAAM;AACpC,EAAA,OAAO,WAAW,aAAa,CAAA;AACjC;;;;"}

package/dist-es/dialog/DialogHeader.js

@@ -16,94 +16,7 @@ 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 '../combo-box/ComboBox.js';
-import './Dialog.js';
-import './DialogActions.js';
-import './DialogContent.js';
 import { useDialogContext } from './DialogContext.js';
-import './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 '../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 '../overlay/OverlayContext.js';
-import '../overlay/OverlayPanel.js';
-import '../overlay/OverlayPanelCloseButton.js';
-import '../overlay/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 css_248z from './DialogHeader.css.js';
 
 const withBaseName = makePrefixer("saltDialogHeader");
@@ -124,38 +37,30 @@ const DialogHeader = forwardRef(
       css: css_248z,
       window: targetWindow
     });
-    const status = statusProp != null ? statusProp : statusContext;
-    return /* @__PURE__ */ jsxs("div", {
-      id,
-      className: clsx(
-        withBaseName(),
-        {
-          [withBaseName("withAccent")]: !disableAccent && !status,
-          [withBaseName(status != null ? status : "")]: !!status
-        },
-        className
-      ),
-      ref,
-      ...rest,
-      children: [
-        status && /* @__PURE__ */ jsx(StatusIndicator, {
-          status
-        }),
-        /* @__PURE__ */ jsxs(H2, {
-          className: withBaseName("header"),
-          children: [
-            preheader && /* @__PURE__ */ jsx(Text, {
-              variant: "secondary",
-              className: withBaseName("preheader"),
-              children: preheader
-            }),
-            /* @__PURE__ */ jsx("div", {
-              children: header
-            })
-          ]
-        })
-      ]
-    });
+    const status = statusProp ?? statusContext;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        id,
+        className: clsx(
+          withBaseName(),
+          {
+            [withBaseName("withAccent")]: !disableAccent && !status,
+            [withBaseName(status ?? "")]: !!status
+          },
+          className
+        ),
+        ref,
+        ...rest,
+        children: [
+          status && /* @__PURE__ */ jsx(StatusIndicator, { status }),
+          /* @__PURE__ */ jsxs(H2, { className: withBaseName("header"), children: [
+            preheader && /* @__PURE__ */ jsx(Text, { variant: "secondary", className: withBaseName("preheader"), children: preheader }),
+            /* @__PURE__ */ jsx("div", { children: header })
+          ] })
+        ]
+      }
+    );
   }
 );
 

package/dist-es/dialog/DialogHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"DialogHeader.js","sources":["../src/dialog/DialogHeader.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 { StatusIndicator, type ValidationStatus } from \"../status-indicator\";\nimport { H2, Text } from \"../text\";\nimport { makePrefixer } from \"../utils\";\nimport { useDialogContext } from \"./DialogContext\";\nimport dialogHeaderCss from \"./DialogHeader.css\";\n\nconst withBaseName = makePrefixer(\"saltDialogHeader\");\n\nexport interface DialogHeaderProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * The status of the Dialog\n   */\n  status?: ValidationStatus | undefined;\n  /**\n   * Displays the accent bar in the Dialog Title */\n  disableAccent?: boolean;\n  /**\n   * Displays the header at the top of the Dialog\n   */\n  header: ReactNode;\n  /**\n   * Displays the preheader just above the header\n   **/\n  preheader?: ReactNode;\n}\n\nexport const DialogHeader = forwardRef<HTMLDivElement, DialogHeaderProps>(\n  function DialogHeader(props, ref) {\n    const {\n      className,\n      header,\n      preheader,\n      disableAccent,\n      status: statusProp,\n      ...rest\n    } = props;\n    const { status: statusContext, id } = useDialogContext();\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-dialog-header\",\n      css: dialogHeaderCss,\n      window: targetWindow,\n    });\n\n    const status = statusProp ?? statusContext;\n\n    return (\n      <div\n        id={id}\n        className={clsx(\n          withBaseName(),\n          {\n            [withBaseName(\"withAccent\")]: !disableAccent && !status,\n            [withBaseName(status ?? \"\")]: !!status,\n          },\n          className,\n        )}\n        ref={ref}\n        {...rest}\n      >\n        {status && <StatusIndicator status={status} />}\n        <H2 className={withBaseName(\"header\")}>\n          {preheader && (\n            <Text variant=\"secondary\" className={withBaseName(\"preheader\")}>\n              {preheader}\n            </Text>\n          )}\n          <div>{header}</div>\n        </H2>\n      </div>\n    );\n  },\n);\n"],"names":["DialogHeader","dialogHeaderCss"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAcA,MAAM,YAAA,GAAe,aAAa,kBAAkB,CAAA,CAAA;AAoB7C,MAAM,YAAe,GAAA,UAAA;AAAA,EAC1B,SAASA,aAAa,CAAA,KAAA,EAAO,GAAK,EAAA;AAChC,IAAM,MAAA;AAAA,MACJ,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,aAAA;AAAA,MACA,MAAQ,EAAA,UAAA;AAAA,MACL,GAAA,IAAA;AAAA,KACD,GAAA,KAAA,CAAA;AACJ,IAAA,MAAM,EAAE,MAAA,EAAQ,aAAe,EAAA,EAAA,KAAO,gBAAiB,EAAA,CAAA;AAEvD,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,oBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,MAAM,SAAS,UAAc,IAAA,IAAA,GAAA,UAAA,GAAA,aAAA,CAAA;AAE7B,IAAA,uBACG,IAAA,CAAA,KAAA,EAAA;AAAA,MACC,EAAA;AAAA,MACA,SAAW,EAAA,IAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb;AAAA,UACE,CAAC,YAAa,CAAA,YAAY,CAAI,GAAA,CAAC,iBAAiB,CAAC,MAAA;AAAA,UACjD,CAAC,YAAa,CAAA,MAAA,IAAA,IAAA,GAAA,MAAA,GAAU,EAAE,CAAA,GAAI,CAAC,CAAC,MAAA;AAAA,SAClC;AAAA,QACA,SAAA;AAAA,OACF;AAAA,MACA,GAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,MAAA,oBAAW,GAAA,CAAA,eAAA,EAAA;AAAA,UAAgB,MAAA;AAAA,SAAgB,CAAA;AAAA,wBAC3C,IAAA,CAAA,EAAA,EAAA;AAAA,UAAG,SAAA,EAAW,aAAa,QAAQ,CAAA;AAAA,UACjC,QAAA,EAAA;AAAA,YAAA,SAAA,oBACE,GAAA,CAAA,IAAA,EAAA;AAAA,cAAK,OAAQ,EAAA,WAAA;AAAA,cAAY,SAAA,EAAW,aAAa,WAAW,CAAA;AAAA,cAC1D,QAAA,EAAA,SAAA;AAAA,aACH,CAAA;AAAA,4BAED,GAAA,CAAA,KAAA,EAAA;AAAA,cAAK,QAAA,EAAA,MAAA;AAAA,aAAO,CAAA;AAAA,WAAA;AAAA,SACf,CAAA;AAAA,OAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
+{"version":3,"file":"DialogHeader.js","sources":["../src/dialog/DialogHeader.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 { StatusIndicator, type ValidationStatus } from \"../status-indicator\";\nimport { H2, Text } from \"../text\";\nimport { makePrefixer } from \"../utils\";\nimport { useDialogContext } from \"./DialogContext\";\nimport dialogHeaderCss from \"./DialogHeader.css\";\n\nconst withBaseName = makePrefixer(\"saltDialogHeader\");\n\nexport interface DialogHeaderProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * The status of the Dialog\n   */\n  status?: ValidationStatus | undefined;\n  /**\n   * Displays the accent bar in the Dialog Title */\n  disableAccent?: boolean;\n  /**\n   * Displays the header at the top of the Dialog\n   */\n  header: ReactNode;\n  /**\n   * Displays the preheader just above the header\n   **/\n  preheader?: ReactNode;\n}\n\nexport const DialogHeader = forwardRef<HTMLDivElement, DialogHeaderProps>(\n  function DialogHeader(props, ref) {\n    const {\n      className,\n      header,\n      preheader,\n      disableAccent,\n      status: statusProp,\n      ...rest\n    } = props;\n    const { status: statusContext, id } = useDialogContext();\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-dialog-header\",\n      css: dialogHeaderCss,\n      window: targetWindow,\n    });\n\n    const status = statusProp ?? statusContext;\n\n    return (\n      <div\n        id={id}\n        className={clsx(\n          withBaseName(),\n          {\n            [withBaseName(\"withAccent\")]: !disableAccent && !status,\n            [withBaseName(status ?? \"\")]: !!status,\n          },\n          className,\n        )}\n        ref={ref}\n        {...rest}\n      >\n        {status && <StatusIndicator status={status} />}\n        <H2 className={withBaseName(\"header\")}>\n          {preheader && (\n            <Text variant=\"secondary\" className={withBaseName(\"preheader\")}>\n              {preheader}\n            </Text>\n          )}\n          <div>{header}</div>\n        </H2>\n      </div>\n    );\n  },\n);\n"],"names":["DialogHeader","dialogHeaderCss"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAcA,MAAM,YAAA,GAAe,aAAa,kBAAkB,CAAA;AAoB7C,MAAM,YAAe,GAAA,UAAA;AAAA,EAC1B,SAASA,aAAa,CAAA,KAAA,EAAO,GAAK,EAAA;AAChC,IAAM,MAAA;AAAA,MACJ,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,aAAA;AAAA,MACA,MAAQ,EAAA,UAAA;AAAA,MACR,GAAG;AAAA,KACD,GAAA,KAAA;AACJ,IAAA,MAAM,EAAE,MAAA,EAAQ,aAAe,EAAA,EAAA,KAAO,gBAAiB,EAAA;AAEvD,IAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,oBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAA,MAAM,SAAS,UAAc,IAAA,aAAA;AAE7B,IACE,uBAAA,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,EAAA;AAAA,QACA,SAAW,EAAA,IAAA;AAAA,UACT,YAAa,EAAA;AAAA,UACb;AAAA,YACE,CAAC,YAAa,CAAA,YAAY,CAAC,GAAG,CAAC,iBAAiB,CAAC,MAAA;AAAA,YACjD,CAAC,YAAa,CAAA,MAAA,IAAU,EAAE,CAAC,GAAG,CAAC,CAAC;AAAA,WAClC;AAAA,UACA;AAAA,SACF;AAAA,QACA,GAAA;AAAA,QACC,GAAG,IAAA;AAAA,QAEH,QAAA,EAAA;AAAA,UAAU,MAAA,oBAAA,GAAA,CAAC,mBAAgB,MAAgB,EAAA,CAAA;AAAA,0BAC3C,IAAA,CAAA,EAAA,EAAA,EAAG,SAAW,EAAA,YAAA,CAAa,QAAQ,CACjC,EAAA,QAAA,EAAA;AAAA,YACC,SAAA,oBAAA,GAAA,CAAC,QAAK,OAAQ,EAAA,WAAA,EAAY,WAAW,YAAa,CAAA,WAAW,GAC1D,QACH,EAAA,SAAA,EAAA,CAAA;AAAA,4BAEF,GAAA,CAAC,SAAK,QAAO,EAAA,MAAA,EAAA;AAAA,WACf,EAAA;AAAA;AAAA;AAAA,KACF;AAAA;AAGN;;;;"}