@salt-ds/core 1.60.0 → 1.62.0

package/dist-es/rating/Rating.js

@@ -0,0 +1,138 @@
+import { jsxs, 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 '../form-field-context/FormFieldContext.js';
+import { useFormFieldProps } from '../form-field-context/useFormFieldProps.js';
+import { capitalize } from '../utils/capitalize.js';
+import { makePrefixer } from '../utils/makePrefixer.js';
+import { useControlled } from '../utils/useControlled.js';
+import '../utils/useFloatingUI/useFloatingUI.js';
+import { useId } from '../utils/useId.js';
+import '../salt-provider/SaltProvider.js';
+import '../viewport/ViewportProvider.js';
+import css_248z from './Rating.css.js';
+import { RatingItem } from './RatingItem.js';
+
+const withBaseName = makePrefixer("saltRating");
+const defaultGetLabel = (value) => `${value} Star${value > 1 ? "s" : ""}`;
+const Rating = forwardRef(function Rating2({
+  value: valueProp,
+  defaultValue = 0,
+  name: nameProp,
+  onChange,
+  className,
+  readOnly: readOnlyProp,
+  disabled: disabledProp,
+  max = 5,
+  getLabel = defaultGetLabel,
+  getVisibleLabel,
+  labelPlacement = "right",
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedBy,
+  ...restProps
+}, ref) {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "salt-rating",
+    css: css_248z,
+    window: targetWindow
+  });
+  const {
+    disabled: formFieldDisabled,
+    readOnly: formFieldReadOnly,
+    a11yProps: {
+      "aria-describedby": formFieldDescribedBy,
+      "aria-labelledby": formFieldLabelledBy
+    } = {}
+  } = useFormFieldProps();
+  const disabled = formFieldDisabled || disabledProp;
+  const readOnly = formFieldReadOnly || readOnlyProp;
+  const [hoveredValue, setHoveredValue] = useState(0);
+  const [selected, setSelected] = useControlled({
+    controlled: valueProp,
+    default: defaultValue,
+    name: "Rating",
+    state: "value"
+  });
+  const name = useId(nameProp);
+  const handleMouseEnter = (event) => {
+    if (readOnly || disabled) return;
+    const itemValue = Number.parseInt(event.currentTarget.value, 10);
+    setHoveredValue(itemValue);
+  };
+  const handleChange = (event) => {
+    if (readOnly) {
+      event.preventDefault();
+      return;
+    }
+    const itemValue = Number.parseInt(event.currentTarget.value, 10);
+    setSelected(itemValue);
+    onChange == null ? void 0 : onChange(event, itemValue);
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: clsx(
+        withBaseName(),
+        withBaseName(`label${capitalize(labelPlacement)}`),
+        className
+      ),
+      ...restProps,
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            role: "radiogroup",
+            className: withBaseName("container"),
+            "aria-readonly": readOnly || void 0,
+            "aria-label": ariaLabel,
+            "aria-labelledby": clsx(formFieldLabelledBy, ariaLabelledBy) || void 0,
+            "aria-describedby": clsx(formFieldDescribedBy, ariaDescribedBy) || void 0,
+            onMouseLeave: () => setHoveredValue(0),
+            children: Array.from({ length: max }, (_, index) => {
+              const itemValue = index + 1;
+              const isHovered = hoveredValue > 0 && itemValue <= hoveredValue;
+              const isSelected = hoveredValue === 0 && itemValue <= selected;
+              const isUnselecting = hoveredValue > 0 && itemValue > hoveredValue && itemValue <= selected;
+              return /* @__PURE__ */ jsx(
+                RatingItem,
+                {
+                  currentRating: selected,
+                  isHovered,
+                  isSelected,
+                  isUnselecting,
+                  onMouseEnter: handleMouseEnter,
+                  onChange: handleChange,
+                  value: itemValue,
+                  readOnly,
+                  disabled,
+                  name,
+                  "aria-label": getLabel == null ? void 0 : getLabel(itemValue)
+                },
+                itemValue
+              );
+            })
+          }
+        ),
+        getVisibleLabel && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: clsx(
+              withBaseName("label"),
+              withBaseName(`label-${labelPlacement}`)
+            ),
+            "aria-hidden": true,
+            children: getVisibleLabel(hoveredValue || selected, max)
+          }
+        )
+      ]
+    }
+  );
+});
+
+export { Rating };
+//# sourceMappingURL=Rating.js.map

package/dist-es/rating/Rating.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Rating.js","sources":["../src/rating/Rating.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ChangeEvent,\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type MouseEvent,\n  useState,\n} from \"react\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { capitalize, makePrefixer, useControlled, useId } from \"../utils\";\nimport ratingCss from \"./Rating.css\";\nimport { RatingItem } from \"./RatingItem\";\n\nconst withBaseName = makePrefixer(\"saltRating\");\n\nexport interface RatingProps\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\"> {\n  /**\n   * When provided, the component is controlled.\n   */\n  value?: number;\n  /**\n   * Default rating value for uncontrolled mode.\n   * @default 0\n   */\n  defaultValue?: number;\n  /**\n   * Callback function for rating change.\n   * The first parameter is the event, and the second is the selected rating value.\n   */\n  onChange?: (event: ChangeEvent<HTMLInputElement>, value: number) => void;\n  /**\n   * If true, the rating component will be in a read-only state.\n   */\n  readOnly?: boolean;\n  /**\n   * If true, the rating component will be in a disabled state.\n   */\n  disabled?: boolean;\n  /**\n   * Total number of icons displayed.\n   * @default 5\n   */\n  max?: number;\n  /**\n   * Function used to provide a user-friendly name for the current value of the rating. Primarily used by screen readers.\n   */\n  getLabel?: (value: number) => string;\n  /**\n   * Function used to provide a visible label for the rating.\n   */\n  getVisibleLabel?: (value: number, max: number) => string;\n  /**\n   * Position of the label relative to the rating component.\n   * @default \"right\"\n   */\n  labelPlacement?: \"right\" | \"bottom\";\n  /**\n   * The name to be set on each radio button within the group. If not set, then one will be generated for you.\n   */\n  name?: string;\n}\n\nconst defaultGetLabel = (value: number) =>\n  `${value} Star${value > 1 ? \"s\" : \"\"}`;\n\nexport const Rating = forwardRef<HTMLDivElement, RatingProps>(function Rating(\n  {\n    value: valueProp,\n    defaultValue = 0,\n    name: nameProp,\n    onChange,\n    className,\n    readOnly: readOnlyProp,\n    disabled: disabledProp,\n    max = 5,\n    getLabel = defaultGetLabel,\n    getVisibleLabel,\n    labelPlacement = \"right\",\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    ...restProps\n  },\n  ref,\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-rating\",\n    css: ratingCss,\n    window: targetWindow,\n  });\n  const {\n    disabled: formFieldDisabled,\n    readOnly: formFieldReadOnly,\n    a11yProps: {\n      \"aria-describedby\": formFieldDescribedBy,\n      \"aria-labelledby\": formFieldLabelledBy,\n    } = {},\n  } = useFormFieldProps();\n\n  const disabled = formFieldDisabled || disabledProp;\n  const readOnly = formFieldReadOnly || readOnlyProp;\n\n  const [hoveredValue, setHoveredValue] = useState(0);\n  const [selected, setSelected] = useControlled({\n    controlled: valueProp,\n    default: defaultValue,\n    name: \"Rating\",\n    state: \"value\",\n  });\n  const name = useId(nameProp);\n\n  const handleMouseEnter = (event: MouseEvent<HTMLInputElement>) => {\n    if (readOnly || disabled) return;\n    const itemValue = Number.parseInt(event.currentTarget.value, 10);\n    setHoveredValue(itemValue);\n  };\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    if (readOnly) {\n      event.preventDefault();\n      return;\n    }\n\n    const itemValue = Number.parseInt(event.currentTarget.value, 10);\n    setSelected(itemValue);\n    onChange?.(event, itemValue);\n  };\n\n  return (\n    <div\n      ref={ref}\n      className={clsx(\n        withBaseName(),\n        withBaseName(`label${capitalize(labelPlacement)}`),\n        className,\n      )}\n      {...restProps}\n    >\n      <div\n        role=\"radiogroup\"\n        className={withBaseName(\"container\")}\n        aria-readonly={readOnly || undefined}\n        aria-label={ariaLabel}\n        aria-labelledby={clsx(formFieldLabelledBy, ariaLabelledBy) || undefined}\n        aria-describedby={\n          clsx(formFieldDescribedBy, ariaDescribedBy) || undefined\n        }\n        onMouseLeave={() => setHoveredValue(0)}\n      >\n        {Array.from({ length: max }, (_, index) => {\n          const itemValue = index + 1;\n          const isHovered = hoveredValue > 0 && itemValue <= hoveredValue;\n          const isSelected = hoveredValue === 0 && itemValue <= selected;\n          const isUnselecting =\n            hoveredValue > 0 &&\n            itemValue > hoveredValue &&\n            itemValue <= selected;\n          return (\n            <RatingItem\n              key={itemValue}\n              currentRating={selected}\n              isHovered={isHovered}\n              isSelected={isSelected}\n              isUnselecting={isUnselecting}\n              onMouseEnter={handleMouseEnter}\n              onChange={handleChange}\n              value={itemValue}\n              readOnly={readOnly}\n              disabled={disabled}\n              name={name}\n              aria-label={getLabel?.(itemValue)}\n            />\n          );\n        })}\n      </div>\n      {getVisibleLabel && (\n        <div\n          className={clsx(\n            withBaseName(\"label\"),\n            withBaseName(`label-${labelPlacement}`),\n          )}\n          aria-hidden\n        >\n          {getVisibleLabel(hoveredValue || selected, max)}\n        </div>\n      )}\n    </div>\n  );\n});\n"],"names":["Rating","ratingCss"],"mappings":"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"}

package/dist-es/rating/RatingItem.css.js

@@ -0,0 +1,4 @@
+var css_248z = ".saltRatingItem {\n  height: var(--salt-size-icon);\n  width: var(--salt-size-icon);\n  display: flex;\n  position: relative;\n  align-items: center;\n  justify-content: center;\n  cursor: var(--salt-cursor-hover);\n}\n\n.saltRatingItem-disabled,\n.saltRatingItem-readOnly {\n  cursor: default;\n}\n\n.saltRatingItem-input {\n  position: absolute;\n  opacity: 0;\n  width: 100%;\n  height: 100%;\n  margin: 0;\n  cursor: inherit;\n  z-index: 1;\n}\n\n.saltRatingItem-input::before {\n  content: \"\";\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  padding: var(--salt-spacing-fixed-600);\n  transform: translate(-50%, -50%);\n  top: 50%;\n  left: 50%;\n  box-sizing: content-box;\n}\n\n.saltRatingItem-icon {\n  pointer-events: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--salt-sentiment-neutral-dataviz);\n}\n\n.saltRatingItem-icon .saltIcon {\n  --saltIcon-size: var(--salt-size-icon);\n}\n\n.saltRatingItem-input:focus-visible ~ .saltRatingItem-icon::after {\n  content: \"\";\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  padding: var(--salt-spacing-fixed-600);\n  transform: translate(-50%, -50%);\n  top: 50%;\n  left: 50%;\n  box-sizing: content-box;\n\n  border-radius: var(--salt-palette-corner-strongest);\n  outline: var(--salt-focused-outline);\n  outline-offset: calc(-1 * var(--salt-spacing-fixed-200));\n}\n\n.saltRatingItem-disabled {\n  cursor: var(--salt-cursor-disabled);\n  opacity: 0.4;\n}\n\n.saltRatingItem-disabled .saltRatingItem-input {\n  cursor: var(--salt-cursor-disabled);\n}\n\n.saltRatingItem-selected .saltRatingItem-icon,\n.saltRatingItem-hovered .saltRatingItem-icon,\n.saltRatingItem-unselecting .saltRatingItem-icon {\n  color: var(--salt-sentiment-accent-dataviz);\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=RatingItem.css.js.map

package/dist-es/rating/RatingItem.css.js.map

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

package/dist-es/rating/RatingItem.js

@@ -0,0 +1,73 @@
+import { jsxs, 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 { useIcon } from '../semantic-icon-provider/SemanticIconProvider.js';
+import { makePrefixer } from '../utils/makePrefixer.js';
+import '../utils/useFloatingUI/useFloatingUI.js';
+import '../utils/useId.js';
+import '../salt-provider/SaltProvider.js';
+import '../viewport/ViewportProvider.js';
+import css_248z from './RatingItem.css.js';
+
+const withBaseName = makePrefixer("saltRatingItem");
+const RatingItem = forwardRef(
+  function RatingItem2(props, ref) {
+    const {
+      "aria-label": ariaLabel,
+      value,
+      currentRating,
+      isHovered,
+      isSelected,
+      isUnselecting,
+      onMouseEnter,
+      onChange,
+      readOnly = false,
+      disabled = false,
+      name
+    } = props;
+    const { RatingIcon, RatingSelectedIcon, RatingUnselectingIcon } = useIcon();
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "salt-rating-item",
+      css: css_248z,
+      window: targetWindow
+    });
+    const icon = isHovered || isSelected ? /* @__PURE__ */ jsx(RatingSelectedIcon, { "aria-hidden": true }) : isUnselecting ? /* @__PURE__ */ jsx(RatingUnselectingIcon, { "aria-hidden": true }) : /* @__PURE__ */ jsx(RatingIcon, { "aria-hidden": true });
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: clsx(withBaseName(), {
+          [withBaseName("hovered")]: isHovered,
+          [withBaseName("selected")]: isSelected,
+          [withBaseName("unselecting")]: isUnselecting,
+          [withBaseName("disabled")]: disabled,
+          [withBaseName("readOnly")]: readOnly
+        }),
+        children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref,
+              type: "radio",
+              name,
+              value,
+              checked: currentRating === value,
+              onChange,
+              onMouseEnter,
+              disabled,
+              readOnly,
+              className: withBaseName("input"),
+              "aria-label": ariaLabel
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: withBaseName("icon"), "aria-hidden": true, children: icon })
+        ]
+      }
+    );
+  }
+);
+
+export { RatingItem };
+//# sourceMappingURL=RatingItem.js.map

package/dist-es/rating/RatingItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RatingItem.js","sources":["../src/rating/RatingItem.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ChangeEvent,\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type MouseEvent,\n} from \"react\";\nimport { useIcon } from \"../semantic-icon-provider\";\nimport { makePrefixer } from \"../utils\";\nimport ratingItemCss from \"./RatingItem.css\";\n\nconst withBaseName = makePrefixer(\"saltRatingItem\");\n\nexport interface RatingItemProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * specifies the value of the feedback item.\n   */\n  value: number;\n  /**\n   * To define if the current star is being hovered.\n   */\n  isHovered?: boolean;\n  /**\n   * To specify if the item is selected.\n   */\n  isSelected?: boolean;\n  /**\n   * defines the current selected rating.\n   */\n  currentRating?: number;\n  /**\n   *  callback function when feedback item is hovered.\n   */\n  onMouseEnter: (event: MouseEvent<HTMLInputElement>) => void;\n  /**\n   *  callback function when feedback item is clicked.\n   */\n  onChange: (event: ChangeEvent<HTMLInputElement>) => void;\n  /**\n   * If true, the rating item will be in a read-only state.\n   */\n  readOnly?: boolean;\n  /**\n   * If true, the rating item will be in a disabled state.\n   */\n  disabled?: boolean;\n  /**\n   * Indicates whether the current rating item is in an active state.\n   * An active state typically means that the item is visually highlighted\n   * or styled differently to indicate that it is part of the current selection\n   * or interaction (e.g., hover or focus).\n   */\n  isUnselecting?: boolean;\n  /**\n   * Name of the radio group\n   */\n  name?: string;\n}\n\nexport const RatingItem = forwardRef<HTMLInputElement, RatingItemProps>(\n  function RatingItem(props, ref) {\n    const {\n      \"aria-label\": ariaLabel,\n      value,\n      currentRating,\n      isHovered,\n      isSelected,\n      isUnselecting,\n      onMouseEnter,\n      onChange,\n      readOnly = false,\n      disabled = false,\n      name,\n    } = props;\n\n    const { RatingIcon, RatingSelectedIcon, RatingUnselectingIcon } = useIcon();\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-rating-item\",\n      css: ratingItemCss,\n      window: targetWindow,\n    });\n\n    const icon =\n      isHovered || isSelected ? (\n        <RatingSelectedIcon aria-hidden />\n      ) : isUnselecting ? (\n        <RatingUnselectingIcon aria-hidden />\n      ) : (\n        <RatingIcon aria-hidden />\n      );\n\n    return (\n      <div\n        className={clsx(withBaseName(), {\n          [withBaseName(\"hovered\")]: isHovered,\n          [withBaseName(\"selected\")]: isSelected,\n          [withBaseName(\"unselecting\")]: isUnselecting,\n          [withBaseName(\"disabled\")]: disabled,\n          [withBaseName(\"readOnly\")]: readOnly,\n        })}\n      >\n        <input\n          ref={ref}\n          type=\"radio\"\n          name={name}\n          value={value}\n          checked={currentRating === value}\n          onChange={onChange}\n          onMouseEnter={onMouseEnter}\n          disabled={disabled}\n          readOnly={readOnly}\n          className={withBaseName(\"input\")}\n          aria-label={ariaLabel}\n        />\n        <span className={withBaseName(\"icon\")} aria-hidden>\n          {icon}\n        </span>\n      </div>\n    );\n  },\n);\n"],"names":["RatingItem","ratingItemCss"],"mappings":";;;;;;;;;;;;;AAaA,MAAM,YAAA,GAAe,aAAa,gBAAgB,CAAA;AAgD3C,MAAM,UAAA,GAAa,UAAA;AAAA,EACxB,SAASA,WAAAA,CAAW,KAAA,EAAO,GAAA,EAAK;AAC9B,IAAA,MAAM;AAAA,MACJ,YAAA,EAAc,SAAA;AAAA,MACd,KAAA;AAAA,MACA,aAAA;AAAA,MACA,SAAA;AAAA,MACA,UAAA;AAAA,MACA,aAAA;AAAA,MACA,YAAA;AAAA,MACA,QAAA;AAAA,MACA,QAAA,GAAW,KAAA;AAAA,MACX,QAAA,GAAW,KAAA;AAAA,MACX;AAAA,KACF,GAAI,KAAA;AAEJ,IAAA,MAAM,EAAE,UAAA,EAAY,kBAAA,EAAoB,qBAAA,KAA0B,OAAA,EAAQ;AAE1E,IAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,IAAA,wBAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,kBAAA;AAAA,MACR,GAAA,EAAKC,QAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,MAAM,OACJ,SAAA,IAAa,UAAA,mBACX,GAAA,CAAC,kBAAA,EAAA,EAAmB,eAAW,IAAA,EAAC,CAAA,GAC9B,aAAA,mBACF,GAAA,CAAC,yBAAsB,aAAA,EAAW,IAAA,EAAC,oBAEnC,GAAA,CAAC,UAAA,EAAA,EAAW,eAAW,IAAA,EAAC,CAAA;AAG5B,IAAA,uBACE,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,IAAA,CAAK,YAAA,EAAa,EAAG;AAAA,UAC9B,CAAC,YAAA,CAAa,SAAS,CAAC,GAAG,SAAA;AAAA,UAC3B,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,UAAA;AAAA,UAC5B,CAAC,YAAA,CAAa,aAAa,CAAC,GAAG,aAAA;AAAA,UAC/B,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,QAAA;AAAA,UAC5B,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG;AAAA,SAC7B,CAAA;AAAA,QAED,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,OAAA;AAAA,YAAA;AAAA,cACC,GAAA;AAAA,cACA,IAAA,EAAK,OAAA;AAAA,cACL,IAAA;AAAA,cACA,KAAA;AAAA,cACA,SAAS,aAAA,KAAkB,KAAA;AAAA,cAC3B,QAAA;AAAA,cACA,YAAA;AAAA,cACA,QAAA;AAAA,cACA,QAAA;AAAA,cACA,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,cAC/B,YAAA,EAAY;AAAA;AAAA,WACd;AAAA,0BACA,GAAA,CAAC,UAAK,SAAA,EAAW,YAAA,CAAa,MAAM,CAAA,EAAG,aAAA,EAAW,MAC/C,QAAA,EAAA,IAAA,EACH;AAAA;AAAA;AAAA,KACF;AAAA,EAEJ;AACF;;;;"}

package/dist-es/semantic-icon-provider/SemanticIconProvider.js

@@ -1,40 +1,42 @@
 import { jsx } from 'react/jsx-runtime';
-import { FavoriteStrongIcon, FavoriteSolidIcon, FavoriteIcon, ProgressInprogressIcon, LockedIcon, SuccessCircleSolidIcon, StepActiveIcon, StepDefaultIcon, TearOutIcon, CloseIcon, CalendarIcon, UserSolidIcon, OverflowMenuIcon, WarningSolidIcon, InfoSolidIcon, ErrorSolidIcon, UploadIcon, TriangleDownIcon, TriangleUpIcon, ChevronLeftIcon, ChevronRightIcon, ChevronDownIcon, ChevronUpIcon } from '@salt-ds/icons';
+import { WarningSolidIcon, UserSolidIcon, UploadIcon, SuccessCircleSolidIcon, FavoriteStrongIcon, FavoriteSolidIcon, FavoriteIcon, ChevronLeftIcon, StepDefaultIcon, OverflowMenuIcon, ChevronRightIcon, LockedIcon, ProgressInprogressIcon, InfoSolidIcon, TriangleUpIcon, TearOutIcon, ChevronDownIcon, ErrorSolidIcon, TriangleDownIcon, DoubleChevronRightIcon, DoubleChevronLeftIcon, ChevronUpIcon, CloseIcon, CalendarIcon, StepActiveIcon } from '@salt-ds/icons';
 import { createContext, useContext } from 'react';
 import { ErrorAdornmentIcon } from '../status-adornment/ErrorAdornment.js';
 import { SuccessAdornmentIcon } from '../status-adornment/SuccessAdornment.js';
 import { WarningAdornmentIcon } from '../status-adornment/WarningAdornment.js';
 
 const defaultIconMap = {
-  ExpandIcon: ChevronDownIcon,
-  CollapseIcon: ChevronUpIcon,
-  ExpandGroupIcon: ChevronRightIcon,
+  ActiveIcon: StepActiveIcon,
+  CalendarIcon,
+  CloseIcon,
   CollapseGroupIcon: ChevronDownIcon,
-  NextIcon: ChevronRightIcon,
-  PreviousIcon: ChevronLeftIcon,
-  IncreaseIcon: TriangleUpIcon,
+  CollapseIcon: ChevronUpIcon,
+  CollapseLeftIcon: DoubleChevronLeftIcon,
+  CollapseRightIcon: DoubleChevronRightIcon,
+  CompletedIcon: SuccessCircleSolidIcon,
   DecreaseIcon: TriangleDownIcon,
-  UploadIcon,
   ErrorIcon: ErrorSolidIcon,
-  SuccessIcon: SuccessCircleSolidIcon,
+  ErrorStatusAdornment: ErrorAdornmentIcon,
+  ExpandGroupIcon: ChevronRightIcon,
+  ExpandIcon: ChevronDownIcon,
+  ExternalIcon: TearOutIcon,
+  IncreaseIcon: TriangleUpIcon,
   InfoIcon: InfoSolidIcon,
-  WarningIcon: WarningSolidIcon,
+  InProgressIcon: ProgressInprogressIcon,
+  LockedIcon,
+  NextIcon: ChevronRightIcon,
   OverflowIcon: OverflowMenuIcon,
-  UserIcon: UserSolidIcon,
-  CalendarIcon,
-  CloseIcon,
-  ExternalIcon: TearOutIcon,
   PendingIcon: StepDefaultIcon,
-  ActiveIcon: StepActiveIcon,
-  CompletedIcon: SuccessCircleSolidIcon,
-  LockedIcon,
-  InProgressIcon: ProgressInprogressIcon,
+  PreviousIcon: ChevronLeftIcon,
   RatingIcon: FavoriteIcon,
   RatingSelectedIcon: FavoriteSolidIcon,
   RatingUnselectingIcon: FavoriteStrongIcon,
-  ErrorStatusAdornment: ErrorAdornmentIcon,
-  WarningStatusAdornment: WarningAdornmentIcon,
-  SuccessStatusAdornment: SuccessAdornmentIcon
+  SuccessIcon: SuccessCircleSolidIcon,
+  SuccessStatusAdornment: SuccessAdornmentIcon,
+  UploadIcon,
+  UserIcon: UserSolidIcon,
+  WarningIcon: WarningSolidIcon,
+  WarningStatusAdornment: WarningAdornmentIcon
 };
 const SemanticIconContext = createContext(defaultIconMap);
 const SemanticIconProvider = ({

package/dist-es/semantic-icon-provider/SemanticIconProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"SemanticIconProvider.js","sources":["../src/semantic-icon-provider/SemanticIconProvider.tsx"],"sourcesContent":["import {\n  CalendarIcon,\n  ChevronDownIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n  ChevronUpIcon,\n  CloseIcon,\n  ErrorSolidIcon,\n  FavoriteIcon,\n  FavoriteSolidIcon,\n  FavoriteStrongIcon,\n  InfoSolidIcon,\n  LockedIcon,\n  OverflowMenuIcon,\n  ProgressInprogressIcon,\n  StepActiveIcon,\n  StepDefaultIcon,\n  SuccessCircleSolidIcon,\n  TearOutIcon,\n  TriangleDownIcon,\n  TriangleUpIcon,\n  UploadIcon,\n  UserSolidIcon,\n  WarningSolidIcon,\n} from \"@salt-ds/icons\";\nimport {\n  createContext,\n  type ElementType,\n  type ReactNode,\n  useContext,\n} from \"react\";\nimport { ErrorAdornmentIcon } from \"../status-adornment/ErrorAdornment\";\nimport { SuccessAdornmentIcon } from \"../status-adornment/SuccessAdornment\";\nimport { WarningAdornmentIcon } from \"../status-adornment/WarningAdornment\";\n\nexport interface SemanticIconMap {\n  ExpandIcon: ElementType;\n  CollapseIcon: ElementType;\n  ExpandGroupIcon: ElementType;\n  CollapseGroupIcon: ElementType;\n  NextIcon: ElementType;\n  PreviousIcon: ElementType;\n  IncreaseIcon: ElementType;\n  DecreaseIcon: ElementType;\n  UploadIcon: ElementType;\n  ErrorIcon: ElementType;\n  SuccessIcon: ElementType;\n  InfoIcon: ElementType;\n  WarningIcon: ElementType;\n  OverflowIcon: ElementType;\n  UserIcon: ElementType;\n  CalendarIcon: ElementType;\n  CloseIcon: ElementType;\n  ExternalIcon: ElementType;\n  PendingIcon: ElementType;\n  ActiveIcon: ElementType;\n  CompletedIcon: ElementType;\n  LockedIcon: ElementType;\n  InProgressIcon: ElementType;\n  RatingIcon: ElementType;\n  RatingSelectedIcon: ElementType;\n  RatingUnselectingIcon: ElementType;\n  ErrorStatusAdornment: ElementType;\n  WarningStatusAdornment: ElementType;\n  SuccessStatusAdornment: ElementType;\n}\n\nexport interface SemanticIconProviderProps {\n  /**\n   * Custom mapping of icon names to components. Overrides default icons if provided.\n   */\n  iconMap?: Partial<SemanticIconMap>;\n\n  /**\n   * Child elements that will use the provided icons.\n   */\n  children: ReactNode;\n}\n\nconst defaultIconMap: SemanticIconMap = {\n  ExpandIcon: ChevronDownIcon,\n  CollapseIcon: ChevronUpIcon,\n  ExpandGroupIcon: ChevronRightIcon,\n  CollapseGroupIcon: ChevronDownIcon,\n  NextIcon: ChevronRightIcon,\n  PreviousIcon: ChevronLeftIcon,\n  IncreaseIcon: TriangleUpIcon,\n  DecreaseIcon: TriangleDownIcon,\n  UploadIcon,\n  ErrorIcon: ErrorSolidIcon,\n  SuccessIcon: SuccessCircleSolidIcon,\n  InfoIcon: InfoSolidIcon,\n  WarningIcon: WarningSolidIcon,\n  OverflowIcon: OverflowMenuIcon,\n  UserIcon: UserSolidIcon,\n  CalendarIcon: CalendarIcon,\n  CloseIcon: CloseIcon,\n  ExternalIcon: TearOutIcon,\n  PendingIcon: StepDefaultIcon,\n  ActiveIcon: StepActiveIcon,\n  CompletedIcon: SuccessCircleSolidIcon,\n  LockedIcon: LockedIcon,\n  InProgressIcon: ProgressInprogressIcon,\n  RatingIcon: FavoriteIcon,\n  RatingSelectedIcon: FavoriteSolidIcon,\n  RatingUnselectingIcon: FavoriteStrongIcon,\n  ErrorStatusAdornment: ErrorAdornmentIcon,\n  WarningStatusAdornment: WarningAdornmentIcon,\n  SuccessStatusAdornment: SuccessAdornmentIcon,\n};\n\nconst SemanticIconContext = createContext<SemanticIconMap>(defaultIconMap);\n\nexport const SemanticIconProvider = ({\n  iconMap = {},\n  children,\n}: SemanticIconProviderProps) => (\n  <SemanticIconContext.Provider value={{ ...defaultIconMap, ...iconMap }}>\n    {children}\n  </SemanticIconContext.Provider>\n);\n\nexport const useIcon = () => {\n  const context = useContext(SemanticIconContext);\n  return context || defaultIconMap;\n};\n"],"names":[],"mappings":";;;;;;;AA+EA,MAAM,cAAA,GAAkC;AAAA,EACtC,UAAA,EAAY,eAAA;AAAA,EACZ,YAAA,EAAc,aAAA;AAAA,EACd,eAAA,EAAiB,gBAAA;AAAA,EACjB,iBAAA,EAAmB,eAAA;AAAA,EACnB,QAAA,EAAU,gBAAA;AAAA,EACV,YAAA,EAAc,eAAA;AAAA,EACd,YAAA,EAAc,cAAA;AAAA,EACd,YAAA,EAAc,gBAAA;AAAA,EACd,UAAA;AAAA,EACA,SAAA,EAAW,cAAA;AAAA,EACX,WAAA,EAAa,sBAAA;AAAA,EACb,QAAA,EAAU,aAAA;AAAA,EACV,WAAA,EAAa,gBAAA;AAAA,EACb,YAAA,EAAc,gBAAA;AAAA,EACd,QAAA,EAAU,aAAA;AAAA,EACV,YAAA;AAAA,EACA,SAAA;AAAA,EACA,YAAA,EAAc,WAAA;AAAA,EACd,WAAA,EAAa,eAAA;AAAA,EACb,UAAA,EAAY,cAAA;AAAA,EACZ,aAAA,EAAe,sBAAA;AAAA,EACf,UAAA;AAAA,EACA,cAAA,EAAgB,sBAAA;AAAA,EAChB,UAAA,EAAY,YAAA;AAAA,EACZ,kBAAA,EAAoB,iBAAA;AAAA,EACpB,qBAAA,EAAuB,kBAAA;AAAA,EACvB,oBAAA,EAAsB,kBAAA;AAAA,EACtB,sBAAA,EAAwB,oBAAA;AAAA,EACxB,sBAAA,EAAwB;AAC1B,CAAA;AAEA,MAAM,mBAAA,GAAsB,cAA+B,cAAc,CAAA;AAElE,MAAM,uBAAuB,CAAC;AAAA,EACnC,UAAU,EAAC;AAAA,EACX;AACF,CAAA,qBACE,GAAA,CAAC,mBAAA,CAAoB,QAAA,EAApB,EAA6B,KAAA,EAAO,EAAE,GAAG,cAAA,EAAgB,GAAG,OAAA,EAAQ,EAClE,QAAA,EACH;AAGK,MAAM,UAAU,MAAM;AAC3B,EAAA,MAAM,OAAA,GAAU,WAAW,mBAAmB,CAAA;AAC9C,EAAA,OAAO,OAAA,IAAW,cAAA;AACpB;;;;"}
+{"version":3,"file":"SemanticIconProvider.js","sources":["../src/semantic-icon-provider/SemanticIconProvider.tsx"],"sourcesContent":["import {\n  CalendarIcon,\n  ChevronDownIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n  ChevronUpIcon,\n  CloseIcon,\n  DoubleChevronLeftIcon,\n  DoubleChevronRightIcon,\n  ErrorSolidIcon,\n  FavoriteIcon,\n  FavoriteSolidIcon,\n  FavoriteStrongIcon,\n  InfoSolidIcon,\n  LockedIcon,\n  OverflowMenuIcon,\n  ProgressInprogressIcon,\n  StepActiveIcon,\n  StepDefaultIcon,\n  SuccessCircleSolidIcon,\n  TearOutIcon,\n  TriangleDownIcon,\n  TriangleUpIcon,\n  UploadIcon,\n  UserSolidIcon,\n  WarningSolidIcon,\n} from \"@salt-ds/icons\";\nimport {\n  createContext,\n  type ElementType,\n  type ReactNode,\n  useContext,\n} from \"react\";\nimport { ErrorAdornmentIcon } from \"../status-adornment/ErrorAdornment\";\nimport { SuccessAdornmentIcon } from \"../status-adornment/SuccessAdornment\";\nimport { WarningAdornmentIcon } from \"../status-adornment/WarningAdornment\";\n\nexport interface SemanticIconMap {\n  ActiveIcon: ElementType;\n  CalendarIcon: ElementType;\n  CloseIcon: ElementType;\n  CollapseGroupIcon: ElementType;\n  CollapseIcon: ElementType;\n  CollapseLeftIcon: ElementType;\n  CollapseRightIcon: ElementType;\n  CompletedIcon: ElementType;\n  DecreaseIcon: ElementType;\n  ErrorIcon: ElementType;\n  ErrorStatusAdornment: ElementType;\n  ExpandGroupIcon: ElementType;\n  ExpandIcon: ElementType;\n  ExternalIcon: ElementType;\n  IncreaseIcon: ElementType;\n  InfoIcon: ElementType;\n  InProgressIcon: ElementType;\n  LockedIcon: ElementType;\n  NextIcon: ElementType;\n  OverflowIcon: ElementType;\n  PendingIcon: ElementType;\n  PreviousIcon: ElementType;\n  RatingIcon: ElementType;\n  RatingSelectedIcon: ElementType;\n  RatingUnselectingIcon: ElementType;\n  SuccessIcon: ElementType;\n  SuccessStatusAdornment: ElementType;\n  UploadIcon: ElementType;\n  UserIcon: ElementType;\n  WarningIcon: ElementType;\n  WarningStatusAdornment: ElementType;\n}\n\nexport interface SemanticIconProviderProps {\n  /**\n   * Custom mapping of icon names to components. Overrides default icons if provided.\n   */\n  iconMap?: Partial<SemanticIconMap>;\n\n  /**\n   * Child elements that will use the provided icons.\n   */\n  children: ReactNode;\n}\n\nconst defaultIconMap: SemanticIconMap = {\n  ActiveIcon: StepActiveIcon,\n  CalendarIcon: CalendarIcon,\n  CloseIcon: CloseIcon,\n  CollapseGroupIcon: ChevronDownIcon,\n  CollapseIcon: ChevronUpIcon,\n  CollapseLeftIcon: DoubleChevronLeftIcon,\n  CollapseRightIcon: DoubleChevronRightIcon,\n  CompletedIcon: SuccessCircleSolidIcon,\n  DecreaseIcon: TriangleDownIcon,\n  ErrorIcon: ErrorSolidIcon,\n  ErrorStatusAdornment: ErrorAdornmentIcon,\n  ExpandGroupIcon: ChevronRightIcon,\n  ExpandIcon: ChevronDownIcon,\n  ExternalIcon: TearOutIcon,\n  IncreaseIcon: TriangleUpIcon,\n  InfoIcon: InfoSolidIcon,\n  InProgressIcon: ProgressInprogressIcon,\n  LockedIcon: LockedIcon,\n  NextIcon: ChevronRightIcon,\n  OverflowIcon: OverflowMenuIcon,\n  PendingIcon: StepDefaultIcon,\n  PreviousIcon: ChevronLeftIcon,\n  RatingIcon: FavoriteIcon,\n  RatingSelectedIcon: FavoriteSolidIcon,\n  RatingUnselectingIcon: FavoriteStrongIcon,\n  SuccessIcon: SuccessCircleSolidIcon,\n  SuccessStatusAdornment: SuccessAdornmentIcon,\n  UploadIcon,\n  UserIcon: UserSolidIcon,\n  WarningIcon: WarningSolidIcon,\n  WarningStatusAdornment: WarningAdornmentIcon,\n};\n\nconst SemanticIconContext = createContext<SemanticIconMap>(defaultIconMap);\n\nexport const SemanticIconProvider = ({\n  iconMap = {},\n  children,\n}: SemanticIconProviderProps) => (\n  <SemanticIconContext.Provider value={{ ...defaultIconMap, ...iconMap }}>\n    {children}\n  </SemanticIconContext.Provider>\n);\n\nexport const useIcon = () => {\n  const context = useContext(SemanticIconContext);\n  return context || defaultIconMap;\n};\n"],"names":[],"mappings":";;;;;;;AAmFA,MAAM,cAAA,GAAkC;AAAA,EACtC,UAAA,EAAY,cAAA;AAAA,EACZ,YAAA;AAAA,EACA,SAAA;AAAA,EACA,iBAAA,EAAmB,eAAA;AAAA,EACnB,YAAA,EAAc,aAAA;AAAA,EACd,gBAAA,EAAkB,qBAAA;AAAA,EAClB,iBAAA,EAAmB,sBAAA;AAAA,EACnB,aAAA,EAAe,sBAAA;AAAA,EACf,YAAA,EAAc,gBAAA;AAAA,EACd,SAAA,EAAW,cAAA;AAAA,EACX,oBAAA,EAAsB,kBAAA;AAAA,EACtB,eAAA,EAAiB,gBAAA;AAAA,EACjB,UAAA,EAAY,eAAA;AAAA,EACZ,YAAA,EAAc,WAAA;AAAA,EACd,YAAA,EAAc,cAAA;AAAA,EACd,QAAA,EAAU,aAAA;AAAA,EACV,cAAA,EAAgB,sBAAA;AAAA,EAChB,UAAA;AAAA,EACA,QAAA,EAAU,gBAAA;AAAA,EACV,YAAA,EAAc,gBAAA;AAAA,EACd,WAAA,EAAa,eAAA;AAAA,EACb,YAAA,EAAc,eAAA;AAAA,EACd,UAAA,EAAY,YAAA;AAAA,EACZ,kBAAA,EAAoB,iBAAA;AAAA,EACpB,qBAAA,EAAuB,kBAAA;AAAA,EACvB,WAAA,EAAa,sBAAA;AAAA,EACb,sBAAA,EAAwB,oBAAA;AAAA,EACxB,UAAA;AAAA,EACA,QAAA,EAAU,aAAA;AAAA,EACV,WAAA,EAAa,gBAAA;AAAA,EACb,sBAAA,EAAwB;AAC1B,CAAA;AAEA,MAAM,mBAAA,GAAsB,cAA+B,cAAc,CAAA;AAElE,MAAM,uBAAuB,CAAC;AAAA,EACnC,UAAU,EAAC;AAAA,EACX;AACF,CAAA,qBACE,GAAA,CAAC,mBAAA,CAAoB,QAAA,EAApB,EAA6B,KAAA,EAAO,EAAE,GAAG,cAAA,EAAgB,GAAG,OAAA,EAAQ,EAClE,QAAA,EACH;AAGK,MAAM,UAAU,MAAM;AAC3B,EAAA,MAAM,OAAA,GAAU,WAAW,mBAAmB,CAAA;AAC9C,EAAA,OAAO,OAAA,IAAW,cAAA;AACpB;;;;"}

package/dist-es/side-panel/SidePanel.css.js

@@ -0,0 +1,4 @@
+var css_248z = ".saltSidePanel {\n  --saltSidePanel-width: 300px;\n  --sidePanel-border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--sidePanel-borderColor, var(--salt-container-primary-borderColor));\n  --saltSidePanel-padding: var(--salt-spacing-300);\n  /* Outer wrapper. Idle: a normal flex column whose width comes from\n     --saltSidePanel-width (supports any CSS length, including %).\n     During enter/exit animation: animates `width` between 0 and the\n     panel width and clips the absolutely-positioned inner via\n     `contain: paint`. The inner uses a JS-resolved px width during\n     animation (--saltSidePanel-animation-width) so percentage widths\n     don't compound against the animating outer. */\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  flex: none;\n  width: var(--saltSidePanel-width);\n  height: 100%;\n  min-height: 0;\n  align-self: stretch;\n}\n\n.saltSidePanel-primary {\n  --sidePanel-background: var(--salt-container-primary-background);\n  --sidePanel-borderColor: var(--salt-container-primary-borderColor);\n}\n\n.saltSidePanel-secondary {\n  --sidePanel-background: var(--salt-container-secondary-background);\n  --sidePanel-borderColor: var(--salt-container-secondary-borderColor);\n}\n\n.saltSidePanel-tertiary {\n  --sidePanel-background: var(--salt-container-tertiary-background);\n  --sidePanel-borderColor: var(--salt-container-tertiary-borderColor);\n}\n\n.saltSidePanel-none {\n  --sidePanel-background: none;\n  --saltSidePanel-padding: var(--salt-spacing-200);\n}\n\n.saltSidePanel-inner {\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-height: 0;\n  padding: var(--saltSidePanel-padding);\n  width: 100%;\n  background-color: var(--sidePanel-background, var(--salt-container-primary-background));\n}\n\n.saltSidePanel-left .saltSidePanel-inner {\n  border-right: var(--sidePanel-border);\n}\n\n.saltSidePanel-right .saltSidePanel-inner {\n  border-left: var(--sidePanel-border);\n}\n\n.saltSidePanel-none .saltSidePanel-inner {\n  border: none;\n}\n\n/* Animation: outer becomes the gap + clip; inner is absolutely positioned\n   and anchored to the gap's GROWING edge so the leading edge tracks the\n   gap's expansion — content visibly pushes the sibling rather than being\n   revealed in place. Left grows rightward → anchor inner right; right\n   grows leftward → anchor inner left.\n\n   During animation the outer's width is interpolating, so the inner can't\n   rely on --saltSidePanel-width (which may be a percentage that would\n   resolve against the animating outer). Instead the JS layer measures the\n   resolved width once and exposes it as --saltSidePanel-animation-width\n   (a px value) for the inner to use. */\n.saltSidePanel-enterAnimation,\n.saltSidePanel-exitAnimation {\n  contain: paint;\n}\n\n.saltSidePanel-enterAnimation .saltSidePanel-inner,\n.saltSidePanel-exitAnimation .saltSidePanel-inner {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  flex: none;\n  width: var(--saltSidePanel-animation-width, var(--saltSidePanel-width));\n}\n\n.saltSidePanel-left.saltSidePanel-enterAnimation .saltSidePanel-inner,\n.saltSidePanel-left.saltSidePanel-exitAnimation .saltSidePanel-inner {\n  right: 0;\n}\n\n.saltSidePanel-right.saltSidePanel-enterAnimation .saltSidePanel-inner,\n.saltSidePanel-right.saltSidePanel-exitAnimation .saltSidePanel-inner {\n  left: 0;\n}\n\n.saltSidePanel-exitAnimation .saltSidePanel-inner {\n  pointer-events: none;\n}\n\n.saltSidePanel-enterAnimation {\n  animation: saltSidePanel-open var(--salt-duration-perceptible) var(--salt-animation-timing-function);\n}\n\n.saltSidePanel-exitAnimation {\n  animation: saltSidePanel-close var(--salt-duration-perceptible) var(--salt-animation-timing-function) both;\n}\n\n@keyframes saltSidePanel-open {\n  from {\n    width: 0;\n  }\n}\n\n@keyframes saltSidePanel-close {\n  to {\n    width: 0;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .saltSidePanel-enterAnimation,\n  .saltSidePanel-exitAnimation {\n    animation: none;\n  }\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=SidePanel.css.js.map

package/dist-es/side-panel/SidePanel.css.js.map

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

package/dist-es/side-panel/SidePanel.js

@@ -0,0 +1,203 @@
+import { jsx } from 'react/jsx-runtime';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { clsx } from 'clsx';
+import { forwardRef, useMemo, useState, useRef, useEffect } from 'react';
+import { tabbable } from 'tabbable';
+import { makePrefixer } from '../utils/makePrefixer.js';
+import { useEventCallback } from '../utils/useEventCallback.js';
+import '../utils/useFloatingUI/useFloatingUI.js';
+import { useForkRef } from '../utils/useForkRef.js';
+import { useId } from '../utils/useId.js';
+import { useIsomorphicLayoutEffect } from '../utils/useIsomorphicLayoutEffect.js';
+import { usePrevious } from '../utils/usePrevious.js';
+import '../salt-provider/SaltProvider.js';
+import '../viewport/ViewportProvider.js';
+import { useSidePanelContext, SidePanelContext } from './internal/SidePanelContext.js';
+import css_248z from './SidePanel.css.js';
+
+const withBaseName = makePrefixer("saltSidePanel");
+const SidePanel = forwardRef(
+  function SidePanel2(props, ref) {
+    const {
+      disableAnimation = false,
+      position = "right",
+      initialFocus,
+      variant = "primary",
+      children,
+      id: idProp,
+      className,
+      "aria-labelledby": ariaLabelledBy,
+      onAnimationEnd,
+      ...rest
+    } = props;
+    const sidePanelContext = useSidePanelContext();
+    const { openState, setFloating, setPanelId, titleId } = sidePanelContext;
+    const positionedContext = useMemo(
+      () => ({ ...sidePanelContext, position }),
+      [sidePanelContext, position]
+    );
+    const id = useId(idProp);
+    const [showComponent, setShowComponent] = useState(openState);
+    const [animating, setAnimating] = useState(false);
+    const shouldAnimateOpen = useRef(!openState);
+    const initialMountRef = useRef(true);
+    const panelRef = useRef(null);
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "salt-side-panel",
+      css: css_248z,
+      window: targetWindow
+    });
+    const initialFocusDoneRef = useRef(false);
+    useEffect(() => {
+      if (!openState) {
+        initialFocusDoneRef.current = false;
+      }
+    }, [openState]);
+    const handleInitialFocus = useEventCallback((el) => {
+      var _a, _b;
+      if (!el || !openState || initialFocusDoneRef.current) {
+        return;
+      }
+      if (initialMountRef.current) {
+        const reference2 = sidePanelContext.floatingRootContext.elements.reference;
+        const activeElement = reference2 instanceof Element ? (_a = reference2.ownerDocument) == null ? void 0 : _a.activeElement : null;
+        const focusCameFromTrigger = reference2 instanceof Element && activeElement instanceof Node && reference2.contains(activeElement);
+        if (!focusCameFromTrigger) {
+          return;
+        }
+        initialMountRef.current = false;
+      }
+      initialFocusDoneRef.current = true;
+      const raf = ((_b = el.ownerDocument.defaultView) == null ? void 0 : _b.requestAnimationFrame) ?? (targetWindow == null ? void 0 : targetWindow.requestAnimationFrame) ?? requestAnimationFrame;
+      raf(() => {
+        if (!el.isConnected) return;
+        const focusTarget = resolveInitialFocusTarget(el, initialFocus);
+        focusTarget == null ? void 0 : focusTarget.focus();
+      });
+    });
+    const setPanelEl = useEventCallback((el) => {
+      panelRef.current = el;
+      setFloating(el);
+      handleInitialFocus(el);
+    });
+    const handleRef = useForkRef(setPanelEl, ref);
+    useIsomorphicLayoutEffect(() => {
+      if (!animating || disableAnimation) return;
+      const panel = panelRef.current;
+      if (!panel) return;
+      const previousAnimation = panel.style.animation;
+      panel.style.animation = "none";
+      const widthPx = panel.getBoundingClientRect().width;
+      panel.style.animation = previousAnimation;
+      panel.style.setProperty(
+        "--saltSidePanel-animation-width",
+        `${widthPx}px`
+      );
+      return () => {
+        panel.style.removeProperty("--saltSidePanel-animation-width");
+      };
+    }, [animating, disableAnimation]);
+    const handleAnimationEnd = useEventCallback(
+      (event) => {
+        onAnimationEnd == null ? void 0 : onAnimationEnd(event);
+        if (event.currentTarget !== event.target || disableAnimation) return;
+        setAnimating(false);
+        if (!openState) {
+          setShowComponent(false);
+        }
+      }
+    );
+    useEffect(() => {
+      setPanelId(id);
+      return () => {
+        setPanelId(void 0);
+      };
+    }, [id, setPanelId]);
+    const reference = sidePanelContext.floatingRootContext.elements.reference;
+    const previousOpenState = usePrevious(openState, [openState], false);
+    useEffect(() => {
+      if (!previousOpenState || openState) return;
+      const panel = panelRef.current;
+      if (!(reference instanceof HTMLElement)) return;
+      const doc = reference.ownerDocument;
+      const active = doc == null ? void 0 : doc.activeElement;
+      const focusInsidePanel = panel && active instanceof Node && panel.contains(active);
+      const focusOnBody = active === (doc == null ? void 0 : doc.body) || active == null;
+      if (focusInsidePanel || focusOnBody) {
+        reference.focus();
+      }
+    }, [openState, previousOpenState, reference]);
+    useIsomorphicLayoutEffect(() => {
+      var _a, _b;
+      if (disableAnimation) {
+        setShowComponent(openState);
+        setAnimating(false);
+        if (!openState) shouldAnimateOpen.current = true;
+        return;
+      }
+      if (!openState) {
+        shouldAnimateOpen.current = true;
+      }
+      if (openState && !shouldAnimateOpen.current) {
+        setShowComponent(true);
+        setAnimating(false);
+        return;
+      }
+      const prefersReducedMotion = (_b = (_a = targetWindow == null ? void 0 : targetWindow.matchMedia) == null ? void 0 : _a.call(
+        targetWindow,
+        "(prefers-reduced-motion: reduce)"
+      )) == null ? void 0 : _b.matches;
+      if (openState) {
+        setShowComponent(true);
+      }
+      if (prefersReducedMotion) {
+        setAnimating(false);
+        if (!openState) {
+          setShowComponent(false);
+        }
+      } else {
+        setAnimating(true);
+      }
+    }, [openState, targetWindow, disableAnimation]);
+    if (!showComponent) return null;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "region",
+        "aria-labelledby": clsx(ariaLabelledBy, titleId) || void 0,
+        ref: handleRef,
+        className: clsx(
+          withBaseName(),
+          {
+            [withBaseName(position)]: position,
+            [withBaseName(variant)]: variant,
+            [withBaseName("enterAnimation")]: !disableAnimation && openState && animating,
+            [withBaseName("exitAnimation")]: !disableAnimation && !openState && animating
+          },
+          className
+        ),
+        onAnimationEnd: handleAnimationEnd,
+        tabIndex: -1,
+        ...rest,
+        id,
+        children: /* @__PURE__ */ jsx(SidePanelContext.Provider, { value: positionedContext, children: /* @__PURE__ */ jsx("div", { className: withBaseName("inner"), children }) })
+      }
+    );
+  }
+);
+function resolveInitialFocusTarget(panel, initialFocus) {
+  if (initialFocus && typeof initialFocus === "object") {
+    return initialFocus.current ?? null;
+  }
+  const managed = Array.from(
+    panel.querySelectorAll("[data-salt-original-tabindex]")
+  );
+  const candidates = managed.length ? managed : tabbable(panel, { displayCheck: "none" });
+  const index = typeof initialFocus === "number" ? initialFocus : 0;
+  return candidates[index] ?? candidates[0] ?? panel;
+}
+
+export { SidePanel };
+//# sourceMappingURL=SidePanel.js.map

package/dist-es/side-panel/SidePanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidePanel.js","sources":["../src/side-panel/SidePanel.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type AnimationEvent,\n  type ComponentPropsWithRef,\n  forwardRef,\n  type RefObject,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { tabbable } from \"tabbable\";\nimport {\n  makePrefixer,\n  useEventCallback,\n  useForkRef,\n  useId,\n  useIsomorphicLayoutEffect,\n  usePrevious,\n} from \"../utils\";\nimport { SidePanelContext, useSidePanelContext } from \"./internal\";\nimport sidePanelCss from \"./SidePanel.css\";\n\nconst withBaseName = makePrefixer(\"saltSidePanel\");\n\nexport interface SidePanelProps extends ComponentPropsWithRef<\"div\"> {\n  /**\n   * Disable the panel's own open/close animation.\n   * Set to `true` when the parent controls sizing and animation (e.g. inside a splitter).\n   * @default false\n   */\n  disableAnimation?: boolean;\n  /**\n   * Edge the panel is anchored to; controls animation direction and divider side.\n   * @default \"right\"\n   */\n  position?: \"right\" | \"left\";\n  /**\n   * Which element receives focus when the panel opens.\n   * Pass a number for the tabbable element index (0 = first), or a ref to a specific element.\n   * Defaults to the first tabbable element inside the panel (close button if present).\n   */\n  initialFocus?: number | RefObject<HTMLElement | null>;\n  /**\n   * The background color palette. Options are 'primary', 'secondary', 'tertiary' and 'none'.\n   * @default \"primary\"\n   */\n  variant?: \"primary\" | \"secondary\" | \"tertiary\" | \"none\";\n}\n\nexport const SidePanel = forwardRef<HTMLDivElement, SidePanelProps>(\n  function SidePanel(props, ref) {\n    const {\n      disableAnimation = false,\n      position = \"right\",\n      initialFocus,\n      variant = \"primary\",\n      children,\n      id: idProp,\n      className,\n      \"aria-labelledby\": ariaLabelledBy,\n      onAnimationEnd,\n      ...rest\n    } = props;\n\n    const sidePanelContext = useSidePanelContext();\n    const { openState, setFloating, setPanelId, titleId } = sidePanelContext;\n    const positionedContext = useMemo(\n      () => ({ ...sidePanelContext, position }),\n      [sidePanelContext, position],\n    );\n\n    const id = useId(idProp);\n\n    const [showComponent, setShowComponent] = useState(openState);\n    const [animating, setAnimating] = useState(false);\n    const shouldAnimateOpen = useRef(!openState);\n    // Stays true until a ref-callback invocation observes focus already\n    // inside the trigger (a user-driven open). Flipping this from a mount\n    // effect would break under React 18 strict-mode double-mounting.\n    const initialMountRef = useRef(true);\n    const panelRef = useRef<HTMLDivElement | null>(null);\n    const targetWindow = useWindow();\n\n    useComponentCssInjection({\n      testId: \"salt-side-panel\",\n      css: sidePanelCss,\n      window: targetWindow,\n    });\n\n    // Guards against re-focusing the panel multiple times per open session.\n    const initialFocusDoneRef = useRef(false);\n    useEffect(() => {\n      if (!openState) {\n        initialFocusDoneRef.current = false;\n      }\n    }, [openState]);\n\n    // useEventCallback keeps a stable identity while always reading the\n    // latest closure, so React doesn't tear down and re-invoke the ref\n    // callback per render.\n    const handleInitialFocus = useEventCallback((el: HTMLDivElement | null) => {\n      if (!el || !openState || initialFocusDoneRef.current) {\n        return;\n      }\n\n      // On first mount, only auto-focus if focus is already in the trigger\n      // (the common click path). For defaultOpen without user interaction\n      // we leave focus alone.\n      if (initialMountRef.current) {\n        const reference =\n          sidePanelContext.floatingRootContext.elements.reference;\n        const activeElement =\n          reference instanceof Element\n            ? reference.ownerDocument?.activeElement\n            : null;\n        const focusCameFromTrigger =\n          reference instanceof Element &&\n          activeElement instanceof Node &&\n          reference.contains(activeElement);\n        if (!focusCameFromTrigger) {\n          return;\n        }\n        initialMountRef.current = false;\n      }\n\n      initialFocusDoneRef.current = true;\n      // Defer one frame so useSidePanelTabOrder has marked descendants\n      // with data-salt-original-tabindex and any child layout effects\n      // (e.g. SidePanelContent's scrollable-body tabIndex toggle) have\n      // settled. Scoped to the panel's owner window for iframe/shadow-root\n      // hosts.\n      const raf =\n        el.ownerDocument.defaultView?.requestAnimationFrame ??\n        targetWindow?.requestAnimationFrame ??\n        requestAnimationFrame;\n      raf(() => {\n        if (!el.isConnected) return;\n        const focusTarget = resolveInitialFocusTarget(el, initialFocus);\n        focusTarget?.focus();\n      });\n    });\n\n    const setPanelEl = useEventCallback((el: HTMLDivElement | null) => {\n      panelRef.current = el;\n      setFloating(el);\n      handleInitialFocus(el);\n    });\n\n    const handleRef = useForkRef<HTMLDivElement>(setPanelEl, ref);\n\n    // Snapshot the panel's natural width (in px) into a CSS variable so the\n    // inner can keep its full size while the outer animates between 0 and\n    // its target width. This makes percentage values for\n    // --saltSidePanel-width work, since the inner no longer resolves a\n    // percentage against the outer's animating width.\n    useIsomorphicLayoutEffect(() => {\n      if (!animating || disableAnimation) return;\n      const panel = panelRef.current;\n      if (!panel) return;\n\n      // Read the natural width with the animation suspended so we see the\n      // resting size rather than the in-flight interpolated value.\n      // getBoundingClientRect() flushes style/layout, so the inline\n      // `animation: none` takes effect for this read.\n      const previousAnimation = panel.style.animation;\n      panel.style.animation = \"none\";\n      const widthPx = panel.getBoundingClientRect().width;\n      panel.style.animation = previousAnimation;\n\n      panel.style.setProperty(\n        \"--saltSidePanel-animation-width\",\n        `${widthPx}px`,\n      );\n\n      return () => {\n        panel.style.removeProperty(\"--saltSidePanel-animation-width\");\n      };\n    }, [animating, disableAnimation]);\n\n    const handleAnimationEnd = useEventCallback(\n      (event: AnimationEvent<HTMLDivElement>) => {\n        onAnimationEnd?.(event);\n\n        if (event.currentTarget !== event.target || disableAnimation) return;\n        setAnimating(false);\n        if (!openState) {\n          setShowComponent(false);\n        }\n      },\n    );\n\n    useEffect(() => {\n      setPanelId(id);\n      return () => {\n        setPanelId(undefined);\n      };\n    }, [id, setPanelId]);\n\n    // Return focus to the trigger on close (mirrors floating-ui's\n    // returnFocus). Initial previousOpenState of `false` ensures we never\n    // restore on mount — only on a real true→false transition.\n    const reference = sidePanelContext.floatingRootContext.elements.reference;\n    const previousOpenState = usePrevious(openState, [openState], false);\n    useEffect(() => {\n      if (!previousOpenState || openState) return;\n      const panel = panelRef.current;\n      if (!(reference instanceof HTMLElement)) return;\n      const doc = reference.ownerDocument;\n      const active = doc?.activeElement;\n      const focusInsidePanel =\n        panel && active instanceof Node && panel.contains(active);\n      const focusOnBody = active === doc?.body || active == null;\n      if (focusInsidePanel || focusOnBody) {\n        reference.focus();\n      }\n    }, [openState, previousOpenState, reference]);\n\n    useIsomorphicLayoutEffect(() => {\n      if (disableAnimation) {\n        setShowComponent(openState);\n        setAnimating(false);\n        if (!openState) shouldAnimateOpen.current = true;\n        return;\n      }\n\n      if (!openState) {\n        shouldAnimateOpen.current = true;\n      }\n\n      // Skip enter animation when the panel was open from the start.\n      if (openState && !shouldAnimateOpen.current) {\n        setShowComponent(true);\n        setAnimating(false);\n        return;\n      }\n\n      const prefersReducedMotion = targetWindow?.matchMedia?.(\n        \"(prefers-reduced-motion: reduce)\",\n      )?.matches;\n\n      if (openState) {\n        setShowComponent(true);\n      }\n\n      if (prefersReducedMotion) {\n        setAnimating(false);\n        if (!openState) {\n          setShowComponent(false);\n        }\n      } else {\n        setAnimating(true);\n      }\n    }, [openState, targetWindow, disableAnimation]);\n\n    if (!showComponent) return null;\n\n    return (\n      <div\n        role=\"region\"\n        aria-labelledby={clsx(ariaLabelledBy, titleId) || undefined}\n        ref={handleRef}\n        className={clsx(\n          withBaseName(),\n          {\n            [withBaseName(position)]: position,\n            [withBaseName(variant)]: variant,\n            [withBaseName(\"enterAnimation\")]:\n              !disableAnimation && openState && animating,\n            [withBaseName(\"exitAnimation\")]:\n              !disableAnimation && !openState && animating,\n          },\n          className,\n        )}\n        onAnimationEnd={handleAnimationEnd}\n        tabIndex={-1}\n        {...rest}\n        id={id}\n      >\n        <SidePanelContext.Provider value={positionedContext}>\n          <div className={withBaseName(\"inner\")}>{children}</div>\n        </SidePanelContext.Provider>\n      </div>\n    );\n  },\n);\n\nfunction resolveInitialFocusTarget(\n  panel: HTMLElement,\n  initialFocus: SidePanelProps[\"initialFocus\"],\n): HTMLElement | null {\n  if (initialFocus && typeof initialFocus === \"object\") {\n    return initialFocus.current ?? null;\n  }\n\n  // Prefer the panel's \"managed\" sequence (elements detached from the\n  // natural tab order by useSidePanelTabOrder), falling back to a fresh\n  // tabbable() scan when detachment hasn't run yet.\n  const managed = Array.from(\n    panel.querySelectorAll<HTMLElement>(\"[data-salt-original-tabindex]\"),\n  );\n\n  const candidates = managed.length\n    ? managed\n    : (tabbable(panel, { displayCheck: \"none\" }) as HTMLElement[]);\n\n  const index = typeof initialFocus === \"number\" ? initialFocus : 0;\n  return candidates[index] ?? candidates[0] ?? panel;\n}\n"],"names":["SidePanel","sidePanelCss","reference"],"mappings":"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"}