@salt-ds/lab 1.0.0-alpha.3 → 1.0.0-alpha.31

package/dist-es/dialog/Dialog.js

@@ -0,0 +1,94 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useState, useEffect, useMemo } from 'react';
+import { clsx } from 'clsx';
+import { useInteractions, useClick, useDismiss } from '@floating-ui/react';
+import { makePrefixer, useCurrentBreakpoint, useFloatingUI, useId, useFloatingComponent, useForkRef, Scrim } from '@salt-ds/core';
+import { useWindow } from '@salt-ds/window';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import css_248z from './Dialog.css.js';
+import { DialogContext } from './DialogContext.js';
+
+const withBaseName = makePrefixer("saltDialog");
+const Dialog = forwardRef(function Dialog2(props, ref) {
+  const {
+    children,
+    className,
+    open = false,
+    onOpenChange,
+    status,
+    disableDismiss,
+    size = "medium",
+    id: idProp,
+    role: roleProp,
+    ...rest
+  } = props;
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "salt-dialog",
+    css: css_248z,
+    window: targetWindow
+  });
+  const currentbreakpoint = useCurrentBreakpoint();
+  const [showComponent, setShowComponent] = useState(false);
+  const { context, floating } = useFloatingUI({
+    open,
+    onOpenChange
+  });
+  const id = useId(idProp);
+  const role = roleProp != null ? roleProp : "dialog";
+  const { getFloatingProps } = useInteractions([
+    useClick(context),
+    useDismiss(context, { enabled: !disableDismiss })
+  ]);
+  const { Component: FloatingComponent } = useFloatingComponent();
+  const floatingRef = useForkRef(floating, ref);
+  useEffect(() => {
+    if (open && !showComponent) {
+      setShowComponent(true);
+    }
+    if (!open && showComponent) {
+      const animate = setTimeout(() => {
+        setShowComponent(false);
+      }, 300);
+      return () => clearTimeout(animate);
+    }
+  }, [open, showComponent, setShowComponent]);
+  const contextValue = useMemo(() => ({ status }), [status]);
+  return /* @__PURE__ */ jsx(DialogContext.Provider, {
+    value: contextValue,
+    children: showComponent && /* @__PURE__ */ jsx(Scrim, {
+      fixed: true,
+      children: /* @__PURE__ */ jsx(FloatingComponent, {
+        open,
+        role,
+        "aria-modal": "true",
+        ref: floatingRef,
+        focusManagerProps: {
+          context
+        },
+        "aria-labelledby": `${id}-header`,
+        className: clsx(
+          withBaseName(),
+          withBaseName(size, currentbreakpoint),
+          {
+            [withBaseName("enterAnimation")]: open,
+            [withBaseName("exitAnimation")]: !open,
+            [withBaseName(status)]: status
+          },
+          className
+        ),
+        onAnimationEnd: () => {
+          if (!open && showComponent) {
+            setShowComponent(false);
+          }
+        },
+        ...getFloatingProps(),
+        ...rest,
+        children
+      })
+    })
+  });
+});
+
+export { Dialog };
+//# sourceMappingURL=Dialog.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.js","sources":["../src/dialog/Dialog.tsx"],"sourcesContent":["import {\n  forwardRef,\n  HTMLAttributes,\n  useEffect,\n  useMemo,\n  useState,\n  ComponentProps,\n} from \"react\";\nimport { clsx } from \"clsx\";\nimport {\n  FloatingFocusManager,\n  useClick,\n  useDismiss,\n  useInteractions,\n} from \"@floating-ui/react\";\nimport {\n  makePrefixer,\n  useForkRef,\n  ValidationStatus,\n  Scrim,\n  useFloatingUI,\n  useFloatingComponent,\n  useCurrentBreakpoint,\n  useId,\n} from \"@salt-ds/core\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport dialogCss from \"./Dialog.css\";\nimport { DialogContext } from \"./DialogContext\";\n\nexport interface DialogProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Display or hide the component.\n   */\n  open?: boolean;\n  /**\n   * Callback function triggered when open state changes.\n   */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * The status of the Dialog\n   * */\n  status?: ValidationStatus;\n  /**\n   * Which element to initially focus. Can be either a number (tabbable index as specified by the order) or a ref.\n   * Default value is 0 (first tabbable element).\n   * */\n  initialFocus?: ComponentProps<typeof FloatingFocusManager>[\"initialFocus\"];\n  /**\n   * Size of the Dialog\n   * */\n  size?: \"small\" | \"medium\" | \"large\";\n  /**\n   * Prevent the dialog closing on click away\n   * */\n  disableDismiss?: boolean;\n}\n\nconst withBaseName = makePrefixer(\"saltDialog\");\n\nexport const Dialog = forwardRef<HTMLDivElement, DialogProps>(function Dialog(\n  props,\n  ref\n) {\n  const {\n    children,\n    className,\n    open = false,\n    onOpenChange,\n    status,\n    disableDismiss,\n    size = \"medium\",\n    id: idProp,\n    role: roleProp,\n    ...rest\n  } = props;\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-dialog\",\n    css: dialogCss,\n    window: targetWindow,\n  });\n\n  const currentbreakpoint = useCurrentBreakpoint();\n\n  const [showComponent, setShowComponent] = useState(false);\n\n  const { context, floating } = useFloatingUI({\n    open,\n    onOpenChange,\n  });\n\n  const id = useId(idProp);\n  const role = roleProp ?? \"dialog\";\n\n  const { getFloatingProps } = useInteractions([\n    useClick(context),\n    useDismiss(context, { enabled: !disableDismiss }),\n  ]);\n\n  const { Component: FloatingComponent } = useFloatingComponent();\n\n  const floatingRef = useForkRef<HTMLDivElement>(floating, ref);\n\n  useEffect(() => {\n    if (open && !showComponent) {\n      setShowComponent(true);\n    }\n\n    if (!open && showComponent) {\n      const animate = setTimeout(() => {\n        setShowComponent(false);\n      }, 300); // var(--salt-duration-perceptible)\n      return () => clearTimeout(animate);\n    }\n  }, [open, showComponent, setShowComponent]);\n\n  const contextValue = useMemo(() => ({ status }), [status]);\n\n  return (\n    <DialogContext.Provider value={contextValue}>\n      {showComponent && (\n        <Scrim fixed>\n          <FloatingComponent\n            open={open}\n            role={role}\n            aria-modal=\"true\"\n            ref={floatingRef}\n            focusManagerProps={{\n              context: context,\n            }}\n            aria-labelledby={`${id}-header`}\n            className={clsx(\n              withBaseName(),\n              withBaseName(size, currentbreakpoint),\n              {\n                [withBaseName(\"enterAnimation\")]: open,\n                [withBaseName(\"exitAnimation\")]: !open,\n                [withBaseName(status as string)]: status,\n              },\n              className\n            )}\n            onAnimationEnd={() => {\n              if (!open && showComponent) {\n                setShowComponent(false);\n              }\n            }}\n            {...getFloatingProps()}\n            {...rest}\n          >\n            {children}\n          </FloatingComponent>\n        </Scrim>\n      )}\n    </DialogContext.Provider>\n  );\n});\n"],"names":["Dialog","dialogCss"],"mappings":"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"}

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

@@ -0,0 +1,4 @@
+var css_248z = ".saltDialogActions {\n  padding: var(--salt-spacing-300);\n  padding-bottom: 0;\n  display: flex;\n  justify-content: flex-end;\n  gap: var(--salt-spacing-100);\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=DialogActions.css.js.map

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

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

package/dist-es/dialog/DialogActions.js

@@ -0,0 +1,29 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { clsx } from 'clsx';
+import { makePrefixer } from '@salt-ds/core';
+import { useWindow } from '@salt-ds/window';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import css_248z from './DialogActions.css.js';
+
+const withBaseName = makePrefixer("saltDialogActions");
+const DialogActions = forwardRef(
+  function DialogActions2(props, ref) {
+    const { children, className, ...rest } = props;
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "salt-dialog-actions",
+      css: css_248z,
+      window: targetWindow
+    });
+    return /* @__PURE__ */ jsx("div", {
+      className: clsx(withBaseName(), className),
+      ...rest,
+      ref,
+      children
+    });
+  }
+);
+
+export { DialogActions };
+//# sourceMappingURL=DialogActions.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DialogActions.js","sources":["../src/dialog/DialogActions.tsx"],"sourcesContent":["import { forwardRef, HTMLAttributes, ReactNode } from \"react\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\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;;;;"}

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

@@ -0,0 +1,4 @@
+var css_248z = ".saltButton.saltDialogCloseButton {\n  position: absolute;\n  top: 0;\n  right: 0;\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=DialogCloseButton.css.js.map

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

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

package/dist-es/dialog/DialogCloseButton.js

@@ -0,0 +1,31 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import clsx from 'clsx';
+import { makePrefixer, Button } from '@salt-ds/core';
+import { useWindow } from '@salt-ds/window';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { CloseIcon } from '@salt-ds/icons';
+import css_248z from './DialogCloseButton.css.js';
+
+const withBaseName = makePrefixer("saltDialogCloseButton");
+const DialogCloseButton = forwardRef(
+  function DialogCloseButton2({ className, ...rest }, ref) {
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "salt-dialog-close-button",
+      css: css_248z,
+      window: targetWindow
+    });
+    return /* @__PURE__ */ jsx(Button, {
+      ref,
+      "aria-label": "Close dialog",
+      variant: "secondary",
+      className: clsx(withBaseName(), className),
+      ...rest,
+      children: /* @__PURE__ */ jsx(CloseIcon, {})
+    });
+  }
+);
+
+export { DialogCloseButton };
+//# sourceMappingURL=DialogCloseButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DialogCloseButton.js","sources":["../src/dialog/DialogCloseButton.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport clsx from \"clsx\";\nimport { Button, ButtonProps, makePrefixer } from \"@salt-ds/core\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { CloseIcon } from \"@salt-ds/icons\";\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\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 />\n      </Button>\n    );\n  }\n);\n"],"names":["DialogCloseButton","dialogCloseButtonCss"],"mappings":";;;;;;;;;AASA,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;AAED,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,8BAAC,SAAU,EAAA,EAAA,CAAA;AAAA,KACb,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

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

@@ -0,0 +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  padding-bottom: var(--salt-spacing-50);\n\n  margin-left: var(--salt-spacing-300);\n  margin-right: var(--salt-spacing-300);\n  padding-right: var(--salt-spacing-300);\n  border-bottom: var(--salt-size-border) var(--salt-separable-borderStyle) transparent;\n  box-shadow: none;\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.css.js.map

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

package/dist-es/dialog/DialogContent.js

@@ -0,0 +1,41 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { forwardRef, useState } from 'react';
+import { clsx } from 'clsx';
+import { makePrefixer } from '@salt-ds/core';
+import { useWindow } from '@salt-ds/window';
+import { useComponentCssInjection } from '@salt-ds/styles';
+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 targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "salt-dialog-content",
+      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,
+          ...rest,
+          ref,
+          children
+        })
+      ]
+    });
+  }
+);
+
+export { DialogContent };
+//# sourceMappingURL=DialogContent.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DialogContent.js","sources":["../src/dialog/DialogContent.tsx"],"sourcesContent":["import { forwardRef, HTMLAttributes, ReactNode, useState } from \"react\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\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: React.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":";;;;;;;;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,CAAC,SAAA,EAAW,YAAY,CAAA,GAAI,SAAS,CAAC,CAAA,CAAA;AAE5C,IAAM,MAAA,YAAA,GAAe,CAAC,KAAsC,KAAA;AAC1D,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;;;;"}

package/dist-es/dialog/DialogContext.js

@@ -0,0 +1,11 @@
+import { createContext, useContext } from 'react';
+
+const DialogContext = createContext({
+  status: void 0
+});
+const useDialogContext = () => {
+  return useContext(DialogContext);
+};
+
+export { DialogContext, useDialogContext };
+//# sourceMappingURL=DialogContext.js.map

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

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

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

@@ -0,0 +1,4 @@
+var css_248z = "/* Styles applied to the root element */\n.saltDialogTitle {\n  display: flex;\n  gap: var(--salt-spacing-100);\n  padding-bottom: var(--salt-spacing-100);\n  padding-left: var(--salt-spacing-300);\n  padding-right: var(--salt-spacing-300);\n  margin: 0;\n}\n\n/* Styles applied to the status indicator icon overriding its default size */\n.saltDialogTitle .saltStatusIndicator.saltIcon {\n  --icon-size: var(--salt-text-h2-lineHeight);\n}\n\n/* Styles applied to DialogTitle when accent={true} */\n.saltDialogTitle-withAccent {\n  position: relative;\n}\n\n.saltDialogTitle-withAccent::before {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: var(--salt-spacing-100);\n  width: var(--salt-size-accent);\n  background: var(--salt-accent-background);\n}\n\n.saltDialogTitle-error::before {\n  background: var(--salt-status-error-borderColor);\n}\n\n.saltDialogTitle-info::before {\n  background: var(--salt-status-info-borderColor);\n}\n\n.saltDialogTitle-success::before {\n  background: var(--salt-status-success-borderColor);\n}\n\n.saltDialogTitle-warning::before {\n  background: var(--salt-status-warning-borderColor);\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=DialogTitle.css.js.map

package/dist-es/dialog/DialogTitle.css.js.map

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

package/dist-es/dialog/DialogTitle.js

@@ -0,0 +1,45 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { makePrefixer, H2, StatusIndicator } from '@salt-ds/core';
+import { useDialogContext } from './DialogContext.js';
+import { useWindow } from '@salt-ds/window';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import css_248z from './DialogTitle.css.js';
+
+const withBaseName = makePrefixer("saltDialogTitle");
+const DialogTitle = ({
+  children,
+  className,
+  disableAccent,
+  status: statusProp,
+  ...rest
+}) => {
+  const { status: statusContext } = useDialogContext();
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "salt-dialog-title",
+    css: css_248z,
+    window: targetWindow
+  });
+  const status = statusProp != null ? statusProp : statusContext;
+  return /* @__PURE__ */ jsxs(H2, {
+    className: clsx(
+      withBaseName(),
+      {
+        [withBaseName("withAccent")]: !disableAccent && !status,
+        [withBaseName(status)]: !!status
+      },
+      className
+    ),
+    ...rest,
+    children: [
+      status && /* @__PURE__ */ jsx(StatusIndicator, {
+        status
+      }),
+      children
+    ]
+  });
+};
+
+export { DialogTitle };
+//# sourceMappingURL=DialogTitle.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DialogTitle.js","sources":["../src/dialog/DialogTitle.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef } from \"react\";\nimport clsx from \"clsx\";\nimport {\n  H2,\n  StatusIndicator,\n  ValidationStatus,\n  makePrefixer,\n} from \"@salt-ds/core\";\nimport { useDialogContext } from \"./DialogContext\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport dialogTitleCss from \"./DialogTitle.css\";\n\nconst withBaseName = makePrefixer(\"saltDialogTitle\");\n\ninterface DialogTitleProps extends ComponentPropsWithoutRef<\"h2\"> {\n  /**\n   * The status of the Dialog\n   * */\n  status?: ValidationStatus | undefined;\n  /**\n   * Displays the accent bar in the Dialog Title\n   * */\n  disableAccent?: boolean;\n}\n\nexport const DialogTitle = ({\n  children,\n  className,\n  disableAccent,\n  status: statusProp,\n  ...rest\n}: DialogTitleProps) => {\n  const { status: statusContext } = useDialogContext();\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-dialog-title\",\n    css: dialogTitleCss,\n    window: targetWindow,\n  });\n\n  const status = statusProp ?? (statusContext as ValidationStatus);\n\n  return (\n    <H2\n      className={clsx(\n        withBaseName(),\n        {\n          [withBaseName(\"withAccent\")]: !disableAccent && !status,\n          [withBaseName(status)]: !!status,\n        },\n        className\n      )}\n      {...rest}\n    >\n      {status && <StatusIndicator status={status} />}\n      {children}\n    </H2>\n  );\n};\n"],"names":["dialogTitleCss"],"mappings":";;;;;;;;AAaA,MAAM,YAAA,GAAe,aAAa,iBAAiB,CAAA,CAAA;AAa5C,MAAM,cAAc,CAAC;AAAA,EAC1B,QAAA;AAAA,EACA,SAAA;AAAA,EACA,aAAA;AAAA,EACA,MAAQ,EAAA,UAAA;AAAA,EACL,GAAA,IAAA;AACL,CAAwB,KAAA;AACtB,EAAA,MAAM,EAAE,MAAA,EAAQ,aAAc,EAAA,GAAI,gBAAiB,EAAA,CAAA;AACnD,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,mBAAA;AAAA,IACR,GAAK,EAAAA,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,SAAS,UAAe,IAAA,IAAA,GAAA,UAAA,GAAA,aAAA,CAAA;AAE9B,EAAA,uBACG,IAAA,CAAA,EAAA,EAAA;AAAA,IACC,SAAW,EAAA,IAAA;AAAA,MACT,YAAa,EAAA;AAAA,MACb;AAAA,QACE,CAAC,YAAa,CAAA,YAAY,CAAI,GAAA,CAAC,iBAAiB,CAAC,MAAA;AAAA,QACjD,CAAC,YAAA,CAAa,MAAM,CAAA,GAAI,CAAC,CAAC,MAAA;AAAA,OAC5B;AAAA,MACA,SAAA;AAAA,KACF;AAAA,IACC,GAAG,IAAA;AAAA,IAEH,QAAA,EAAA;AAAA,MAAA,MAAA,oBAAW,GAAA,CAAA,eAAA,EAAA;AAAA,QAAgB,MAAA;AAAA,OAAgB,CAAA;AAAA,MAC3C,QAAA;AAAA,KAAA;AAAA,GACH,CAAA,CAAA;AAEJ;;;;"}

package/dist-es/drawer/Drawer.css.js

@@ -0,0 +1,4 @@
+var css_248z = "/* Styles applied to Drawer component */\n.saltDrawer {\n  background: var(--drawer-background);\n  display: flex;\n  flex-direction: column;\n  max-height: 100%;\n  max-width: 100%;\n  overflow: auto;\n  padding: var(--salt-spacing-300);\n  box-shadow: var(--salt-overlayable-shadow-modal);\n  z-index: calc(var(--salt-zIndex-appHeader) - 1);\n  position: fixed;\n  top: 0;\n}\n\n.saltDrawer-overlay {\n  background: var(--salt-overlayable-background);\n  z-index: var(--salt-zIndex-drawer);\n}\n\n/* Styles applied when variant = \"primary\" */\n.saltDrawer-primary {\n  --drawer-background: var(--salt-container-primary-background);\n}\n\n/* Styles applied when variant = \"secondary\" */\n.saltDrawer-secondary {\n  --drawer-background: var(--salt-container-secondary-background);\n}\n\n/* Styles applied when position = \"top\" */\n.saltDrawer-top {\n  left: 0;\n  right: 0;\n  bottom: auto;\n}\n\n/* Styles applied when position = \"top\" and the component mounts */\n.saltDrawer-top.saltDrawer-enterAnimation {\n  animation: var(--salt-animation-slide-in-bottom);\n}\n\n/* Styles applied when position = \"top\" and the component unmounts */\n.saltDrawer-top.saltDrawer-exitAnimation {\n  animation: var(--salt-animation-slide-out-bottom);\n}\n\n/* Styles applied when position = \"right\" or position = \"left\" */\n.saltDrawer-right,\n.saltDrawer-left {\n  width: calc(10 * var(--salt-size-base));\n}\n\n/* Styles applied when position = \"right\" */\n.saltDrawer-right {\n  left: auto;\n  right: 0;\n  height: 100%;\n}\n\n/* Styles applied when position = \"right\" and the component mounts */\n.saltDrawer-right.saltDrawer-enterAnimation {\n  animation: var(--salt-animation-slide-in-right);\n}\n\n/* Styles applied when position = \"right\" and the component unmounts */\n.saltDrawer-right.saltDrawer-exitAnimation {\n  animation: var(--salt-animation-slide-out-right);\n}\n\n/* Styles applied when position = \"left\" */\n.saltDrawer-left {\n  left: 0;\n  right: auto;\n  height: 100%;\n}\n\n/* Styles applied when position = \"left\" and the component mounts */\n.saltDrawer-left.saltDrawer-enterAnimation {\n  animation: var(--salt-animation-slide-in-left);\n}\n\n/* Styles applied when position = \"left\" and the component unmounts */\n.saltDrawer-left.saltDrawer-exitAnimation {\n  animation: var(--salt-animation-slide-out-left);\n}\n\n/* Styles applied when position = \"bottom\" */\n.saltDrawer-bottom {\n  left: 0;\n  right: 0;\n  bottom: 0;\n  top: auto;\n}\n\n/* Styles applied when position = \"bottom\" and the component mounts */\n.saltDrawer-bottom.saltDrawer-enterAnimation {\n  animation: var(--salt-animation-slide-in-top);\n}\n\n/* Styles applied when position = \"bottom\" and the component unmounts */\n.saltDrawer-bottom.saltDrawer-exitAnimation {\n  animation: var(--salt-animation-slide-out-top);\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=Drawer.css.js.map

package/dist-es/drawer/Drawer.css.js.map

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

package/dist-es/drawer/Drawer.js

@@ -0,0 +1,74 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useState, useEffect } from 'react';
+import { clsx } from 'clsx';
+import { FloatingPortal, FloatingOverlay, FloatingFocusManager } from '@floating-ui/react';
+import { makePrefixer, useForkRef, SaltProvider } from '@salt-ds/core';
+import { useWindow } from '@salt-ds/window';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useDrawer } from './useDrawer.js';
+import css_248z from './Drawer.css.js';
+
+const DRAWER_POSITIONS = ["left", "top", "right", "bottom"];
+const withBaseName = makePrefixer("saltDrawer");
+const Drawer = forwardRef(function Drawer2(props, ref) {
+  const {
+    children,
+    className,
+    position = "left",
+    open = true,
+    onOpenChange,
+    variant = "primary",
+    ...rest
+  } = props;
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "salt-drawer",
+    css: css_248z,
+    window: targetWindow
+  });
+  const [showComponent, setShowComponent] = useState(false);
+  const { floating, context } = useDrawer({
+    open,
+    onOpenChange
+  });
+  const floatingRef = useForkRef(floating, ref);
+  useEffect(() => {
+    if (open && !showComponent) {
+      setShowComponent(true);
+    }
+  }, [open, showComponent]);
+  return /* @__PURE__ */ jsx(FloatingPortal, {
+    children: /* @__PURE__ */ jsx(SaltProvider, {
+      children: showComponent && /* @__PURE__ */ jsx(FloatingOverlay, {
+        className: withBaseName("overlay"),
+        lockScroll: true,
+        children: /* @__PURE__ */ jsx(FloatingFocusManager, {
+          context,
+          children: /* @__PURE__ */ jsx("div", {
+            ref: floatingRef,
+            className: clsx(
+              withBaseName(),
+              withBaseName(position),
+              {
+                [withBaseName("enterAnimation")]: open,
+                [withBaseName("exitAnimation")]: !open,
+                [withBaseName(variant)]: variant
+              },
+              className
+            ),
+            onAnimationEnd: () => {
+              if (!open && showComponent) {
+                setShowComponent(false);
+              }
+            },
+            ...rest,
+            children
+          })
+        })
+      })
+    })
+  });
+});
+
+export { DRAWER_POSITIONS, Drawer };
+//# sourceMappingURL=Drawer.js.map

package/dist-es/drawer/Drawer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.js","sources":["../src/drawer/Drawer.tsx"],"sourcesContent":["import { forwardRef, HTMLAttributes, useEffect, useState } from \"react\";\nimport { clsx } from \"clsx\";\nimport {\n  FloatingFocusManager,\n  FloatingOverlay,\n  FloatingPortal,\n} from \"@floating-ui/react\";\nimport { makePrefixer, SaltProvider, useForkRef } from \"@salt-ds/core\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useDrawer } from \"./useDrawer\";\n\nimport drawerCss from \"./Drawer.css\";\n\nexport const DRAWER_POSITIONS = [\"left\", \"top\", \"right\", \"bottom\"] as const;\n\nexport type DrawerPositions = (typeof DRAWER_POSITIONS)[number];\n\nexport interface DrawerProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Defines the drawer position within the screen.\n   */\n  position?: DrawerPositions;\n  /**\n   * Display or hide the component.\n   */\n  open?: boolean;\n  /**\n   * Callback function triggered when open state changes.\n   */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * Change background color palette\n   */\n  variant?: \"primary\" | \"secondary\";\n}\n\nconst withBaseName = makePrefixer(\"saltDrawer\");\n\nexport const Drawer = forwardRef<HTMLDivElement, DrawerProps>(function Drawer(\n  props,\n  ref\n) {\n  const {\n    children,\n    className,\n    position = \"left\",\n    open = true,\n    onOpenChange,\n    variant = \"primary\",\n    ...rest\n  } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-drawer\",\n    css: drawerCss,\n    window: targetWindow,\n  });\n\n  const [showComponent, setShowComponent] = useState(false);\n\n  const { floating, context } = useDrawer({\n    open,\n    onOpenChange,\n  });\n\n  const floatingRef = useForkRef<HTMLDivElement>(floating, ref);\n\n  useEffect(() => {\n    if (open && !showComponent) {\n      setShowComponent(true);\n    }\n  }, [open, showComponent]);\n\n  return (\n    <FloatingPortal>\n      {/* The provider is needed to support the use case where an app has nested modes. The element that is portalled needs to have the same style as the current scope */}\n      <SaltProvider>\n        {showComponent && (\n          <FloatingOverlay className={withBaseName(\"overlay\")} lockScroll>\n            <FloatingFocusManager context={context}>\n              <div\n                ref={floatingRef}\n                className={clsx(\n                  withBaseName(),\n                  withBaseName(position),\n                  {\n                    [withBaseName(\"enterAnimation\")]: open,\n                    [withBaseName(\"exitAnimation\")]: !open,\n                    [withBaseName(variant)]: variant,\n                  },\n                  className\n                )}\n                onAnimationEnd={() => {\n                  if (!open && showComponent) {\n                    setShowComponent(false);\n                  }\n                }}\n                {...rest}\n              >\n                {children}\n              </div>\n            </FloatingFocusManager>\n          </FloatingOverlay>\n        )}\n      </SaltProvider>\n    </FloatingPortal>\n  );\n});\n"],"names":["Drawer","drawerCss"],"mappings":";;;;;;;;;;AAcO,MAAM,gBAAmB,GAAA,CAAC,MAAQ,EAAA,KAAA,EAAO,SAAS,QAAQ,EAAA;AAuBjE,MAAM,YAAA,GAAe,aAAa,YAAY,CAAA,CAAA;AAEvC,MAAM,MAAS,GAAA,UAAA,CAAwC,SAASA,OAAAA,CACrE,OACA,GACA,EAAA;AACA,EAAM,MAAA;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAW,GAAA,MAAA;AAAA,IACX,IAAO,GAAA,IAAA;AAAA,IACP,YAAA;AAAA,IACA,OAAU,GAAA,SAAA;AAAA,IACP,GAAA,IAAA;AAAA,GACD,GAAA,KAAA,CAAA;AAEJ,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,aAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,CAAC,aAAA,EAAe,gBAAgB,CAAA,GAAI,SAAS,KAAK,CAAA,CAAA;AAExD,EAAA,MAAM,EAAE,QAAA,EAAU,OAAQ,EAAA,GAAI,SAAU,CAAA;AAAA,IACtC,IAAA;AAAA,IACA,YAAA;AAAA,GACD,CAAA,CAAA;AAED,EAAM,MAAA,WAAA,GAAc,UAA2B,CAAA,QAAA,EAAU,GAAG,CAAA,CAAA;AAE5D,EAAA,SAAA,CAAU,MAAM;AACd,IAAI,IAAA,IAAA,IAAQ,CAAC,aAAe,EAAA;AAC1B,MAAA,gBAAA,CAAiB,IAAI,CAAA,CAAA;AAAA,KACvB;AAAA,GACC,EAAA,CAAC,IAAM,EAAA,aAAa,CAAC,CAAA,CAAA;AAExB,EAAA,uBACG,GAAA,CAAA,cAAA,EAAA;AAAA,IAEC,QAAC,kBAAA,GAAA,CAAA,YAAA,EAAA;AAAA,MACE,2CACE,GAAA,CAAA,eAAA,EAAA;AAAA,QAAgB,SAAA,EAAW,aAAa,SAAS,CAAA;AAAA,QAAG,UAAU,EAAA,IAAA;AAAA,QAC7D,QAAC,kBAAA,GAAA,CAAA,oBAAA,EAAA;AAAA,UAAqB,OAAA;AAAA,UACpB,QAAC,kBAAA,GAAA,CAAA,KAAA,EAAA;AAAA,YACC,GAAK,EAAA,WAAA;AAAA,YACL,SAAW,EAAA,IAAA;AAAA,cACT,YAAa,EAAA;AAAA,cACb,aAAa,QAAQ,CAAA;AAAA,cACrB;AAAA,gBACE,CAAC,YAAa,CAAA,gBAAgB,CAAI,GAAA,IAAA;AAAA,gBAClC,CAAC,YAAA,CAAa,eAAe,CAAA,GAAI,CAAC,IAAA;AAAA,gBAClC,CAAC,YAAa,CAAA,OAAO,CAAI,GAAA,OAAA;AAAA,eAC3B;AAAA,cACA,SAAA;AAAA,aACF;AAAA,YACA,gBAAgB,MAAM;AACpB,cAAI,IAAA,CAAC,QAAQ,aAAe,EAAA;AAC1B,gBAAA,gBAAA,CAAiB,KAAK,CAAA,CAAA;AAAA,eACxB;AAAA,aACF;AAAA,YACC,GAAG,IAAA;AAAA,YAEH,QAAA;AAAA,WACH,CAAA;AAAA,SACF,CAAA;AAAA,OACF,CAAA;AAAA,KAEJ,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist-es/drawer/useDrawer.js

@@ -0,0 +1,27 @@
+import { useClick, useRole, useDismiss, useInteractions } from '@floating-ui/react';
+import { useFloatingUI } from '@salt-ds/core';
+
+function useDrawer(props) {
+  const { open, onOpenChange } = props;
+  const { context, floating } = useFloatingUI({
+    open,
+    onOpenChange
+  });
+  const click = useClick(context);
+  const role = useRole(context);
+  const dismiss = useDismiss(context);
+  const { getFloatingProps, getReferenceProps } = useInteractions([
+    role,
+    dismiss,
+    click
+  ]);
+  return {
+    getFloatingProps,
+    getReferenceProps,
+    floating,
+    context
+  };
+}
+
+export { useDrawer };
+//# sourceMappingURL=useDrawer.js.map

package/dist-es/drawer/useDrawer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDrawer.js","sources":["../src/drawer/useDrawer.ts"],"sourcesContent":["import {\n  useClick,\n  useDismiss,\n  useInteractions,\n  useRole,\n} from \"@floating-ui/react\";\nimport { useFloatingUI, UseFloatingUIProps } from \"@salt-ds/core\";\n\nexport type UseDrawerProps = Partial<\n  Pick<UseFloatingUIProps, \"onOpenChange\" | \"open\">\n>;\n\nexport function useDrawer(props: UseDrawerProps) {\n  const { open, onOpenChange } = props;\n\n  const { context, floating } = useFloatingUI({\n    open,\n    onOpenChange,\n  });\n\n  const click = useClick(context);\n  const role = useRole(context);\n  const dismiss = useDismiss(context);\n\n  const { getFloatingProps, getReferenceProps } = useInteractions([\n    role,\n    dismiss,\n    click,\n  ]);\n\n  return {\n    getFloatingProps,\n    getReferenceProps,\n    floating,\n    context,\n  };\n}\n"],"names":[],"mappings":";;;AAYO,SAAS,UAAU,KAAuB,EAAA;AAC/C,EAAM,MAAA,EAAE,IAAM,EAAA,YAAA,EAAiB,GAAA,KAAA,CAAA;AAE/B,EAAA,MAAM,EAAE,OAAA,EAAS,QAAS,EAAA,GAAI,aAAc,CAAA;AAAA,IAC1C,IAAA;AAAA,IACA,YAAA;AAAA,GACD,CAAA,CAAA;AAED,EAAM,MAAA,KAAA,GAAQ,SAAS,OAAO,CAAA,CAAA;AAC9B,EAAM,MAAA,IAAA,GAAO,QAAQ,OAAO,CAAA,CAAA;AAC5B,EAAM,MAAA,OAAA,GAAU,WAAW,OAAO,CAAA,CAAA;AAElC,EAAA,MAAM,EAAE,gBAAA,EAAkB,iBAAkB,EAAA,GAAI,eAAgB,CAAA;AAAA,IAC9D,IAAA;AAAA,IACA,OAAA;AAAA,IACA,KAAA;AAAA,GACD,CAAA,CAAA;AAED,EAAO,OAAA;AAAA,IACL,gBAAA;AAAA,IACA,iBAAA;AAAA,IACA,QAAA;AAAA,IACA,OAAA;AAAA,GACF,CAAA;AACF;;;;"}

package/dist-es/dropdown/Dropdown.css.js

@@ -0,0 +1,4 @@
+var css_248z = ".saltDropdown {\n  --saltIcon-margin: 2px 0 0 8px;\n  display: inline-block;\n  line-height: 0;\n  position: relative;\n}\n\n.saltDropdown-fullWidth {\n  width: 100%;\n}\n\n.saltDropdown-popup {\n  background: var(--salt-container-primary-background);\n  z-index: calc(var(--salt-zIndex-flyover) - 1);\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=Dropdown.css.js.map

package/dist-es/dropdown/Dropdown.css.js.map

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

package/dist-es/dropdown/Dropdown.js

@@ -0,0 +1,130 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useIdMemo, useForkRef } from '@salt-ds/core';
+import { forwardRef, useRef, useCallback, cloneElement } from 'react';
+import { CollectionProvider } from '../common-hooks/collectionProvider.js';
+import { itemToString } from '../common-hooks/itemToString.js';
+import '../common-hooks/keyUtils.js';
+import { useCollectionItems } from '../common-hooks/useCollectionItems.js';
+import '../responsive/useResizeObserver.js';
+import { forwardCallbackProps } from '../utils/forwardCallbackProps.js';
+import { List } from '../list/List.js';
+import { DropdownBase } from './DropdownBase.js';
+import { DropdownButton } from './DropdownButton.js';
+import { useDropdown } from './useDropdown.js';
+
+const Dropdown = forwardRef(function Dropdown2({
+  "aria-label": ariaLabel,
+  children,
+  defaultIsOpen,
+  defaultSelected,
+  id: idProp,
+  isOpen: isOpenProp,
+  itemToString: itemToString$1 = itemToString,
+  onOpenChange,
+  onSelectionChange,
+  onSelect,
+  selected: selectedProp,
+  selectionStrategy,
+  source,
+  triggerComponent,
+  ListItem,
+  ListProps: ListProps2,
+  width = 180,
+  ...props
+}, forwardedRef) {
+  const id = useIdMemo(idProp);
+  const rootRef = useRef(null);
+  const forkedRef = useForkRef(rootRef, forwardedRef);
+  const collectionHook = useCollectionItems({
+    id,
+    source,
+    children,
+    options: {
+      itemToString: itemToString$1
+    }
+  });
+  const {
+    highlightedIndex,
+    triggerLabel,
+    listHandlers,
+    listControlProps,
+    selected,
+    ...dropdownListHook
+  } = useDropdown({
+    collectionHook,
+    defaultHighlightedIndex: ListProps2 == null ? void 0 : ListProps2.defaultHighlightedIndex,
+    defaultIsOpen,
+    defaultSelected: collectionHook.itemToCollectionItem(defaultSelected),
+    highlightedIndex: ListProps2 == null ? void 0 : ListProps2.highlightedIndex,
+    isOpen: isOpenProp,
+    itemToString: itemToString$1,
+    label: "Dropdown",
+    onHighlight: ListProps2 == null ? void 0 : ListProps2.onHighlight,
+    onOpenChange,
+    onSelectionChange,
+    onSelect,
+    selected: collectionHook.itemToCollectionItem(selectedProp),
+    selectionStrategy
+  });
+  const collectionItemsToItem = useCallback(
+    (itemOrItems) => {
+      if (Array.isArray(itemOrItems)) {
+        return itemOrItems.map((i) => i.value);
+      } else if (itemOrItems) {
+        return itemOrItems.value;
+      }
+    },
+    []
+  );
+  const getTriggerComponent = () => {
+    const ariaProps = {
+      "aria-activedescendant": dropdownListHook.isOpen ? listControlProps == null ? void 0 : listControlProps["aria-activedescendant"] : void 0,
+      "aria-label": ariaLabel
+    };
+    if (triggerComponent) {
+      const ownProps = triggerComponent.props;
+      return cloneElement(
+        triggerComponent,
+        forwardCallbackProps(ownProps, {
+          ...dropdownListHook.isOpen ? listControlProps : {},
+          ...ariaProps
+        })
+      );
+    } else {
+      return /* @__PURE__ */ jsx(DropdownButton, {
+        label: triggerLabel,
+        ...dropdownListHook.isOpen ? listControlProps : {},
+        ...ariaProps
+      });
+    }
+  };
+  return /* @__PURE__ */ jsx(CollectionProvider, {
+    collectionHook,
+    children: /* @__PURE__ */ jsxs(DropdownBase, {
+      ...props,
+      id,
+      isOpen: dropdownListHook.isOpen,
+      onOpenChange: dropdownListHook.onOpenChange,
+      ref: forkedRef,
+      width,
+      children: [
+        getTriggerComponent(),
+        /* @__PURE__ */ jsx(List, {
+          ListItem,
+          itemToString: itemToString$1,
+          ...ListProps2,
+          highlightedIndex,
+          listHandlers,
+          onSelectionChange,
+          onSelect,
+          selected: collectionItemsToItem(selected),
+          selectionStrategy,
+          "data-testid": "dropdown-list"
+        })
+      ]
+    })
+  });
+});
+
+export { Dropdown };
+//# sourceMappingURL=Dropdown.js.map

package/dist-es/dropdown/Dropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dropdown.js","sources":["../src/dropdown/Dropdown.tsx"],"sourcesContent":["import { useForkRef, useIdMemo as useId } from \"@salt-ds/core\";\nimport {\n  cloneElement,\n  ForwardedRef,\n  forwardRef,\n  ReactElement,\n  useCallback,\n  useRef,\n} from \"react\";\n\nimport {\n  CollectionItem,\n  CollectionProvider,\n  itemToString as defaultItemToString,\n  SelectionProps,\n  SelectionStrategy,\n  SingleSelectionStrategy,\n  useCollectionItems,\n} from \"../common-hooks\";\nimport { List } from \"../list/List\";\nimport { ListProps } from \"../list/listTypes\";\nimport { DropdownBase, MaybeChildProps } from \"./DropdownBase\";\nimport { DropdownButton } from \"./DropdownButton\";\nimport { DropdownBaseProps } from \"./dropdownTypes\";\nimport { useDropdown } from \"./useDropdown\";\nimport { forwardCallbackProps } from \"../utils\";\n\nexport interface DropdownProps<\n  Item = string,\n  Selection extends SelectionStrategy = \"default\"\n> extends DropdownBaseProps,\n    Pick<\n      ListProps<Item, Selection>,\n      \"ListItem\" | \"itemToString\" | \"source\" | \"width\"\n    >,\n    SelectionProps<Item, Selection> {\n  ListProps?: Omit<\n    ListProps<Item, Selection>,\n    \"ListItem\" | \"itemToString\" | \"source\"\n  >;\n}\n\nexport const Dropdown = forwardRef(function Dropdown<\n  Item = string,\n  Selection extends SelectionStrategy = \"default\"\n>(\n  {\n    \"aria-label\": ariaLabel,\n    children,\n    defaultIsOpen,\n    defaultSelected,\n    id: idProp,\n    isOpen: isOpenProp,\n    itemToString = defaultItemToString,\n    onOpenChange,\n    onSelectionChange,\n    onSelect,\n    selected: selectedProp,\n    selectionStrategy,\n    source,\n    triggerComponent,\n    ListItem,\n    ListProps,\n    width = 180,\n    ...props\n  }: DropdownProps<Item, Selection>,\n  forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n  const id = useId(idProp);\n  const rootRef = useRef<HTMLDivElement>(null);\n  const forkedRef = useForkRef<HTMLDivElement>(rootRef, forwardedRef);\n\n  const collectionHook = useCollectionItems<Item>({\n    id,\n    source,\n    children,\n    options: {\n      itemToString,\n    },\n  });\n\n  const {\n    highlightedIndex,\n    triggerLabel,\n    listHandlers,\n    listControlProps,\n    selected,\n    ...dropdownListHook\n  } = useDropdown<Item, Selection>({\n    collectionHook,\n    defaultHighlightedIndex: ListProps?.defaultHighlightedIndex,\n    defaultIsOpen,\n    defaultSelected: collectionHook.itemToCollectionItem<\n      Selection,\n      typeof defaultSelected\n    >(defaultSelected),\n    highlightedIndex: ListProps?.highlightedIndex,\n    isOpen: isOpenProp,\n    itemToString,\n    label: \"Dropdown\",\n    onHighlight: ListProps?.onHighlight,\n    onOpenChange,\n    onSelectionChange,\n    onSelect,\n    selected: collectionHook.itemToCollectionItem<\n      Selection,\n      typeof selectedProp\n    >(selectedProp),\n    selectionStrategy,\n  });\n\n  const collectionItemsToItem = useCallback(\n    (\n      itemOrItems?: CollectionItem<Item> | null | CollectionItem<Item>[]\n    ):\n      | undefined\n      | (Selection extends SingleSelectionStrategy ? Item | null : Item[]) => {\n      type returnType = Selection extends SingleSelectionStrategy\n        ? Item | null\n        : Item[];\n      if (Array.isArray(itemOrItems)) {\n        return itemOrItems.map((i) => i.value) as returnType;\n      } else if (itemOrItems) {\n        return itemOrItems.value as returnType;\n      }\n    },\n    []\n  );\n\n  const getTriggerComponent = () => {\n    const ariaProps = {\n      \"aria-activedescendant\": dropdownListHook.isOpen\n        ? listControlProps?.[\"aria-activedescendant\"]\n        : undefined,\n      \"aria-label\": ariaLabel,\n    };\n    if (triggerComponent) {\n      const ownProps = triggerComponent.props as MaybeChildProps;\n      return cloneElement(\n        triggerComponent,\n        forwardCallbackProps(ownProps, {\n          ...(dropdownListHook.isOpen ? listControlProps : {}),\n          ...ariaProps,\n        })\n      );\n    } else {\n      return (\n        <DropdownButton\n          label={triggerLabel}\n          {...(dropdownListHook.isOpen ? listControlProps : {})}\n          {...ariaProps}\n        />\n      );\n    }\n  };\n\n  return (\n    <CollectionProvider<Item> collectionHook={collectionHook}>\n      <DropdownBase\n        {...props}\n        id={id}\n        isOpen={dropdownListHook.isOpen}\n        onOpenChange={dropdownListHook.onOpenChange}\n        ref={forkedRef}\n        width={width}\n      >\n        {getTriggerComponent()}\n        <List<Item, Selection>\n          ListItem={ListItem}\n          itemToString={itemToString}\n          {...ListProps}\n          highlightedIndex={highlightedIndex}\n          listHandlers={listHandlers}\n          onSelectionChange={onSelectionChange}\n          onSelect={onSelect}\n          selected={collectionItemsToItem(selected)}\n          selectionStrategy={selectionStrategy}\n          data-testid=\"dropdown-list\"\n        />\n      </DropdownBase>\n    </CollectionProvider>\n  );\n}) as <Item, Selection extends SelectionStrategy = \"default\">(\n  props: DropdownProps<Item, Selection> & {\n    ref?: ForwardedRef<HTMLDivElement>;\n  }\n) => ReactElement<DropdownProps<Item, Selection>>;\n"],"names":["Dropdown","itemToString","defaultItemToString","ListProps","useId"],"mappings":"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"}