@salt-ds/lab 1.0.0-alpha.67 → 1.0.0-alpha.69

package/CHANGELOG.md

@@ -1,5 +1,184 @@
 # @salt-ds/lab
 
+## 1.0.0-alpha.69
+
+### Patch Changes
+
+- Updated dependencies [f107d63]
+  - @salt-ds/core@1.46.1
+
+## 1.0.0-alpha.68
+
+### Minor Changes
+
+- 4a240fd: - Removed `Splitter` component from labs, replaced with `@salt-ds/react-resizable-panels-theme` package.
+
+### Patch Changes
+
+- 1a50f7b: - `DatePickerSinglePanel` has been deprecated, use `DatePickerSingleGridPanel` instead.
+
+  - `DatePickerSinglePanel` has been renamed to `DatePickerSingleGridPanel` to align the naming with `DatePickerRangeGridPanel`. This component now provides up to 12 `Calendars` within a panel via the `numberOfVisibleMonths` and `columns` props, enabling multi-month date selection (defaults to 1 visible calendar).
+
+  ```
+  <DatePicker
+    selectionVariant="single"
+  >
+    <DatePickerTrigger>
+      <DatePickerSingleInput />
+    </DatePickerTrigger>
+    <DatePickerOverlay>
+      <DatePickerSingleGridPanel numberOfVisibleMonths={12} columns={3} />
+    </DatePickerOverlay>
+  </DatePicker>
+  ```
+
+  - `DatePickerRangeGridPanel` has been added. It provides up to 12 Calendars within a panel via the `numberOfVisibleMonths` and `columns` props, enabling multi-month date range selection (defaults to 2 visible calendars and 2 columns).
+
+  ```
+  <DatePicker
+    selectionVariant="range"
+  >
+    <DatePickerTrigger>
+      <DatePickerRangeInput />
+    </DatePickerTrigger>
+    <DatePickerOverlay>
+      <DatePickerRangeGridPanel numberOfVisibleMonths={12} columns={3} />
+    </DatePickerOverlay>
+  </DatePicker>
+  ```
+
+  Note: `DatePickerRangePanel` remains unchanged and provides a dual `Calendar` date view, with individual month/year dropdowns for the start and end date range.
+
+  - `CalendarWeekHeader` is now rendered by `CalendarGrid` and can be customized using the `CalendarWeekHeaderProps` prop. If you currently use `CalendarWeekHeader`, you may see two day of week headers, so delete the version from your code.
+  - `CalendarMonthHeader` is now rendered by `CalendarGrid` and can be customized using the `CalendarMonthHeaderProps` prop.
+  - A new `CalendarMonthHeader` component has been added, used by `CalendarGrid` to display a multi-month grid of `Calendar` components.
+  - `DatePickerRangePanel` props `StartCalendarWeekHeaderProps` and `EndCalendarWeekHeaderProps` removed.
+    Pass props to `CalendarWeekHeader` using `StartCalendarGridProps -> CalendarWeekHeaderProps` and `EndCalendarGridProps -> CalendarWeekHeaderProps`.
+
+  ```
+  <DatePicker
+    selectionVariant="range"
+  >
+    <DatePickerTrigger>
+      <DatePickerRangeInput />
+    </DatePickerTrigger>
+    <DatePickerOverlay>
+      <DatePickerRangePanel
+       StartCalendarGridProps={{ CalendarWeekHeaderProps: { "data-test-id" : "some value" }}}
+       EndCalendarGridProps={{ CalendarWeekHeaderProps: { "data-test-id" : "some value" }}}
+       />
+    </DatePickerOverlay>
+  </DatePicker>
+  ```
+
+  - `DatePicker` now supports `isDayDisabled`, `isDayUnselectable`, and `isDayHighlighted` props, rather than providing them through the `Calendar` props.
+  - The `DatePickerOverlayProvider` prop `onOpenChange` has changed signature and `event` has been removed, to create a consistent API with other components.
+
+  ```diff
+  - onOpenChange?: ( newOpen: boolean, event?: Event, reason?: DatePickerOpenChangeReason) => void;
+  + onOpenChange?: ( newOpen: boolean, reason?: DatePickerOpenChangeReason) => void;
+  ```
+
+  - DatePicker helper text simplified and resizing bug fixed
+
+  In our DatePicker examples, we demonstrate how to include helper text when using a DatePicker within a FormField.
+  The design requires the helper text to move inside the panel when the DatePicker is opened.
+  However, this caused a resizing issue with the original date input.
+
+  To resolve this, we have refactored the implementation by introducing a `DatePickerHelperText` component.
+  This component is used as a child of the `DatePicker`, streamlining the process and removing the need for users to manage the visibility of the helper text themselves.
+
+  ```diff
+  - <FormField validationStatus={validationStatus}>
+  -   <FormLabel>Select a date</FormLabel>
+  -   <DatePicker
+  -     selectionVariant={"single"}
+  -   >
+  -     <DatePickerTrigger>
+  -       <DatePickerSingleInput />
+  -     </DatePickerTrigger>
+  -     <DatePickerOverlay>
+  -       <DatePickerSingleGridPanel
+  -         helperText={helperText}
+  -       />
+  -       <DatePickerHelperText>{helperText}</DatePickerHelperText>
+  -     </DatePickerOverlay>
+  -   </DatePicker>
+  -   {!open ? <FormHelperText>{helperText}</FormHelperText> : null}
+  - </FormField>
+  + <FormField validationStatus={validationStatus}>
+  +   <FormLabel>Select a date</FormLabel>
+  +   <DatePicker
+  +     selectionVariant={"single"}
+  +   >
+  +     <DatePickerTrigger>
+  +       <DatePickerSingleInput />
+  +     </DatePickerTrigger>
+  +     <DatePickerOverlay>
+  +       <DatePickerSingleGridPanel
+  +         helperText={helperText}
+  +       />
+  +     </DatePickerOverlay>
+  +     <DatePickerHelperText>{helperText}</DatePickerHelperText>
+  +   </DatePicker>
+  + </FormField>
+  ```
+
+  - Added `useFocusOut` floating-ui middleware to close the overlay upon focus out.
+  - Fixed a bug where the change event was triggered by blur when the entered date had not changed.
+  - Fixed the styling of disabled and unselectable days, which previously used the same style.
+  - Fixed invalid date ranges so they do not render as selected.
+  - Fixed a bug for helper text to ensure it wraps during overflow.
+  - Timezone prop added to date components, `DatePicker`, `DatePickerSingleInput`, `DatePickerRangeInput`, `DateInputSingle`, `DateInputRange`, `Calendar`.
+    The `timezone` prop defines the timezone for the date components, when working with dates and times, it is important to ensure that the correct timezone is applied to avoid confusion and errors.
+    If not working with times, the timezone can still affect the date displayed, as the date may be interpreted in a different timezone than intended.
+    For this reason, when working with dates, it is recommended to always set the timezone to ensure that the date is displayed correctly.
+    "UTC" is a cross-platform standard and is the most common timezone used in programming but may require you to convert to your local timezone for display purposes.
+    If `timezone` is not set the timezone will be defined by the default behaviour of your configured date framework.
+    The `timezone` prop can be set to one of the following values:
+  - If undefined, the timezone will be derived from the passed date, or from `defaultSelectedDate`/`selectedDate` or "default" if no date is defined.
+  - If set to "default", the default timezone of the date library will be used.
+  - If set to "system", the local system's timezone will be applied.
+  - If set to "UTC", the time will be returned in UTC.
+  - If set to a valid IANA timezone identifier, the time will be returned for that specific timezone.
+    Timezone is not supported by v3 of `date-fns`, so if you are using `date-fns` v3, the timezone will be set to "default" by default. If you require timezone support, use a date framework such as `luxon` or `dayjs`.
+  - `Calendar` previously could render custom contents but did not provide a way to change the highlight styles, so `renderDayContents` has been replaced with `render`, passed through `CalendarDayProps`.
+
+  ```
+  function renderDayButton({
+    className,
+    date,
+    status,
+    ...rest
+  }: renderCalendarDayProps<DateFrameworkType>): ReactElement {
+    return (
+      <button
+        {...rest}
+        className={clsx([{ buttonWithDot: !status.outOfRange }, className])}
+      >
+        <span className={clsx({ dot: !status.outOfRange })}>
+          {dateAdapter.format(date, "D")}
+        </span>
+        {status.today ? <span className={"today"} /> : null}
+      </button>
+    );
+  }
+
+  return (
+    <Calendar hideOutOfRangeDates {...args}>
+      <CalendarNavigation />
+      <CalendarGrid CalendarDayProps={{ render: renderDayButton }} />
+    </Calendar>
+  );
+  ```
+
+- Updated dependencies [1a50f7b]
+- Updated dependencies [8b4cbfb]
+- Updated dependencies [bbdf4a6]
+- Updated dependencies [ec1736e]
+  - @salt-ds/date-adapters@0.1.0-alpha.4
+  - @salt-ds/core@1.46.0
+
 ## 1.0.0-alpha.67
 
 ### Minor Changes

package/css/salt-lab.css

@@ -213,6 +213,12 @@
   position: relative;
 }
 
+/* src/calendar/CalendarMonthHeader.css */
+.saltCalendarMonthHeader {
+  width: 100%;
+  text-align: center;
+}
+
 /* src/calendar/CalendarNavigation.css */
 .saltCalendarNavigation {
   display: grid;
@@ -1194,6 +1200,15 @@
   margin-left: var(--salt-spacing-100);
 }
 
+/* src/date-picker/DatePickerHelperText.css */
+.saltDatePickerHelperText {
+  visibility: visible;
+  margin-top: var(--salt-spacing-75);
+}
+.saltDatePickerHelperText-open {
+  visibility: hidden;
+}
+
 /* src/date-picker/DatePickerOverlay.css */
 .saltDatePickerOverlay {
   background: var(--salt-container-primary-background);
@@ -1211,6 +1226,7 @@
 .saltDatePickerOverlay {
   background: var(--salt-container-primary-background);
   border: var(--salt-size-border) var(--salt-selectable-borderStyle-selected) var(--salt-selectable-borderColor-selected);
+  border-radius: var(--salt-palette-corner, 0);
   overflow: hidden;
   overflow-y: auto;
   position: relative;
@@ -1223,7 +1239,7 @@
   width: min-content;
   gap: 1px;
 }
-.saltDatePickerPanel-header {
+.saltDatePickerPanel-container > .saltDatePickerPanel-header {
   padding: var(--salt-spacing-100);
 }
 
@@ -2773,189 +2789,6 @@
   display: none;
 }
 
-/* src/splitter/SplitHandle.css */
-.saltSplitHandle {
-  --splitHandle-size: var(--salt-size-thickness-400, calc(var(--salt-size-border) * 4));
-  --splitHandle-borderWidth: var(--salt-size-thickness-100, var(--salt-size-border));
-  --splitHandle-borderColor: var(--salt-separable-secondary-borderColor);
-  --splitHandle-borderStyle: var(--salt-separable-borderStyle);
-  --splitHandle-dot-background: var(--salt-separable-foreground);
-  --splitHandle-dot-background-hover: var(--salt-separable-foreground-hover);
-  --splitHandle-dot-background-active: var(--salt-separable-foreground-active);
-  position: relative;
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  gap: 2px;
-  box-sizing: content-box;
-  background: var(--splitHandle-background);
-}
-.saltSplitHandle-bordered,
-.saltSplitHandle-variant-primary {
-  --splitHandle-background: var(--salt-container-primary-background);
-  --splitHandle-background-hover: var(--salt-separable-background-hover);
-  --splitHandle-background-active: var(--salt-separable-background-active);
-}
-.saltSplitHandle-variant-secondary {
-  --splitHandle-background: var(--salt-container-secondary-background);
-  --splitHandle-background-hover: var(--salt-separable-background-hover);
-  --splitHandle-background-active: var(--salt-separable-background-active);
-}
-.saltSplitHandle-variant-tertiary {
-  --splitHandle-background: var(--salt-container-tertiary-background);
-  --splitHandle-background-hover: var(--salt-separable-background-hover);
-  --splitHandle-background-active: var(--salt-separable-background-active);
-}
-.saltSplitHandle-variant-transparent {
-  --splitHandle-background: var(--salt-separable-background);
-  --splitHandle-background-hover: var(--salt-separable-background-hover);
-  --splitHandle-background-active: var(--salt-separable-background-active);
-}
-.saltSplitHandle[data-resize-handle-state=hover] {
-  background: var(--splitHandle-background-hover);
-}
-.saltSplitHandle[data-resize-handle-state=drag] {
-  --splitHandle-background: var(--splitHandle-background-active);
-}
-.saltSplitHandle[data-panel-group-direction=horizontal] {
-  flex-direction: column;
-  width: var(--splitHandle-size);
-}
-.saltSplitHandle[data-panel-group-direction=vertical] {
-  flex-direction: row;
-  height: var(--splitHandle-size);
-}
-.saltSplitHandle[data-panel-group-direction=horizontal]::after {
-  content: "";
-  position: absolute;
-  left: -10px;
-  right: -10px;
-  top: 0;
-  bottom: 0;
-}
-.saltSplitHandle[data-panel-group-direction=vertical]::after {
-  content: "";
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: -10px;
-  bottom: -10px;
-}
-.saltSplitHandle:focus-visible {
-  outline-style: var(--salt-focused-outlineStyle);
-  outline-width: var(--salt-focused-outlineWidth);
-  outline-color: var(--salt-focused-outlineColor);
-  outline-offset: var(--salt-focused-outlineOffset);
-}
-.saltSplitHandle-border-top {
-  border-top-width: var(--splitHandle-borderWidth);
-  border-top-color: var(--splitHandle-borderColor);
-  border-top-style: var(--splitHandle-borderStyle);
-  border-bottom-width: var(--splitHandle-borderWidth);
-  border-bottom-color: transparent;
-  border-bottom-style: var(--splitHandle-borderStyle);
-}
-.saltSplitHandle-border-bottom {
-  border-top-width: var(--splitHandle-borderWidth);
-  border-top-color: transparent;
-  border-top-style: var(--splitHandle-borderStyle);
-  border-bottom-width: var(--splitHandle-borderWidth);
-  border-bottom-color: var(--splitHandle-borderColor);
-  border-bottom-style: var(--splitHandle-borderStyle);
-}
-.saltSplitHandle-border-top-bottom {
-  border-top-width: var(--splitHandle-borderWidth);
-  border-top-color: var(--splitHandle-borderColor);
-  border-top-style: var(--splitHandle-borderStyle);
-  border-bottom-width: var(--splitHandle-borderWidth);
-  border-bottom-color: var(--splitHandle-borderColor);
-  border-bottom-style: var(--splitHandle-borderStyle);
-}
-.saltSplitHandle-border-left {
-  border-left-width: var(--splitHandle-borderWidth);
-  border-left-color: var(--splitHandle-borderColor);
-  border-left-style: var(--splitHandle-borderStyle);
-  border-right-width: var(--splitHandle-borderWidth);
-  border-right-color: transparent;
-  border-right-style: var(--splitHandle-borderStyle);
-}
-.saltSplitHandle-border-right {
-  border-left-width: var(--splitHandle-borderWidth);
-  border-left-color: transparent;
-  border-left-style: var(--splitHandle-borderStyle);
-  border-right-width: var(--splitHandle-borderWidth);
-  border-right-color: var(--splitHandle-borderColor);
-  border-right-style: var(--splitHandle-borderStyle);
-}
-.saltSplitHandle-border-left-right {
-  border-left-width: var(--splitHandle-borderWidth);
-  border-left-color: var(--splitHandle-borderColor);
-  border-left-style: var(--splitHandle-borderStyle);
-  border-right-width: var(--splitHandle-borderWidth);
-  border-right-color: var(--splitHandle-borderColor);
-  border-right-style: var(--splitHandle-borderStyle);
-}
-.saltSplitHandle[data-panel-group-direction=horizontal] + div[data-panel-size="0.0"] + .saltSplitHandle[data-panel-group-direction=horizontal] {
-  margin-left: -1px;
-}
-.saltSplitHandle[data-panel-group-direction=vertical] + div[data-panel-size="0.0"] + .saltSplitHandle[data-panel-group-direction=vertical] {
-  margin-top: -1px;
-}
-@supports selector(:has(*)) {
-  .saltSplitPanel:first-of-type[data-panel-size="0.0"] + .saltSplitHandle-bordered[data-panel-group-direction=horizontal] {
-    margin-left: -1px;
-  }
-  .saltSplitPanel:first-of-type[data-panel-size="0.0"] + .saltSplitHandle-bordered[data-panel-group-direction=vertical] {
-    margin-top: -1px;
-  }
-  .saltSplitHandle-bordered[data-panel-group-direction=horizontal]:has(+ .saltSplitPanel:last-of-type[data-panel-size="0.0"]) {
-    margin-right: -1px;
-  }
-  .saltSplitHandle-bordered[data-panel-group-direction=vertical]:has(+ .saltSplitPanel:last-of-type[data-panel-size="0.0"]) {
-    margin-bottom: -1px;
-  }
-}
-.saltSplitHandle-dot {
-  background: var(--splitHandle-dot-background);
-}
-.saltSplitHandle[data-resize-handle-state=hover] > .saltSplitHandle-dot {
-  background: var(--splitHandle-dot-background-hover);
-}
-.saltSplitHandle[data-resize-handle-state=drag] > .saltSplitHandle-dot {
-  background: var(--splitHandle-dot-background-active);
-}
-.saltSplitHandle[data-panel-group-direction=horizontal] > .saltSplitHandle-dot {
-  width: 2px;
-  height: 1px;
-}
-.saltSplitHandle[data-panel-group-direction=vertical] > .saltSplitHandle-dot {
-  height: 2px;
-  width: 1px;
-}
-
-/* src/splitter/SplitPanel.css */
-.saltSplitPanel {
-  box-sizing: border-box;
-  background: var(--splitPanel-background);
-}
-.saltSplitPanel[data-panel-size="0.0"] {
-  visibility: hidden;
-}
-.saltSplitPanel-primary {
-  --splitPanel-background: var(--salt-container-primary-background);
-}
-.saltSplitPanel-secondary {
-  --splitPanel-background: var(--salt-container-secondary-background);
-}
-.saltSplitPanel-tertiary {
-  --splitPanel-background: var(--salt-container-tertiary-background);
-}
-@supports selector(:has(*)) {
-  .saltSplitPanel:has(.saltSplitPanel) {
-    background: unset;
-  }
-}
-
 /* src/static-list/StaticList.css */
 .saltStaticList {
   overflow-y: auto;
@@ -4291,7 +4124,8 @@
   margin: 0 var(--salt-spacing-50);
   width: 100%;
 }
-.saltCalendarDay:focus-visible {
+.saltCalendarDay-focused,
+.saltCalendarDay.saltCalendarDay:focus-visible {
   outline: var(--salt-focused-outline);
   outline-offset: calc(0px - var(--salt-focused-outlineWidth));
 }
@@ -4301,7 +4135,7 @@
 .saltCalendarDay-outOfRange:hover {
   color: var(--salt-content-primary-foreground);
 }
-.saltCalendarDay-outOfRange .saltCalendarDay-today {
+.saltCalendarDay-outOfRange .saltCalendarDay-today > span:last-of-type {
   border-bottom: var(--salt-size-indicator) var(--salt-selectable-borderStyle) var(--salt-content-secondary-foreground);
 }
 .saltCalendarDay-outOfRange.saltCalendarDay-highlighted:before {
@@ -4370,9 +4204,9 @@
   background: var(--salt-content-secondary-foreground);
   position: absolute;
 }
-.saltCalendarDay-today,
-.saltCalendarDay-today:hover,
-.saltCalendarDay-outOfRange .saltCalendarDay-today:hover {
+.saltCalendarDay-today > span:last-of-type,
+.saltCalendarDay-today > span:last-of-type:hover,
+.saltCalendarDay-outOfRange .saltCalendarDay-today > span:last-of-type:hover {
   border-bottom: var(--salt-size-indicator) var(--salt-selectable-borderStyle) var(--salt-accent-borderColor);
   margin-bottom: calc(var(--salt-size-indicator) * -1);
 }
@@ -4494,4 +4328,4 @@
   margin: calc(var(--salt-size-unit) / 2) 0;
 }
 
-/* src/c73aefdf-62ff-4b8b-8ac0-ab77a4c4d85e.css */
+/* src/647bddf6-32e8-4e00-a034-3790297bd4ad.css */

package/dist-cjs/breadcrumbs/internal/BreadcrumbsContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"BreadcrumbsContext.js","sources":["../src/breadcrumbs/internal/BreadcrumbsContext.ts"],"sourcesContent":["import { createContext, useContext } from \"react\";\n\nexport interface BreadcrumbsContext {\n  wrap?: boolean;\n  itemsMaxWidth?: number | string;\n  itemsMinWidth?: number | string;\n  liClass?: string;\n}\n\nexport const BreadcrumbsContext = createContext<BreadcrumbsContext | undefined>(\n  undefined,\n);\n\nexport const useBreadcrumbsContext = () => {\n  const context = useContext(BreadcrumbsContext);\n  if (!context) {\n    throw new Error(\n      \"BreadcrumbsItem compound components cannot be rendered outside the Breadcrumbs component\",\n    );\n  }\n  return context;\n};\n"],"names":["createContext","useContext"],"mappings":";;;;AASO,MAAM,kBAAqB,GAAAA,mBAAA;AAAA,EAChC,KAAA;AACF;AAEO,MAAM,wBAAwB,MAAM;AACzC,EAAM,MAAA,OAAA,GAAUC,iBAAW,kBAAkB,CAAA;AAC7C,EAAA,IAAI,CAAC,OAAS,EAAA;AACZ,IAAA,MAAM,IAAI,KAAA;AAAA,MACR;AAAA,KACF;AAAA;AAEF,EAAO,OAAA,OAAA;AACT;;;;;"}
+{"version":3,"file":"BreadcrumbsContext.js","sources":["../src/breadcrumbs/internal/BreadcrumbsContext.ts"],"sourcesContent":["import { createContext, useContext } from \"react\";\n\nexport interface BreadcrumbsContext {\n  wrap?: boolean;\n  itemsMaxWidth?: number | string;\n  itemsMinWidth?: number | string;\n  liClass?: string;\n}\n\nexport const BreadcrumbsContext = createContext<BreadcrumbsContext | undefined>(\n  undefined,\n);\n\nexport const useBreadcrumbsContext = () => {\n  const context = useContext(BreadcrumbsContext);\n  if (!context) {\n    throw new Error(\n      \"BreadcrumbsItem compound components cannot be rendered outside the Breadcrumbs component\",\n    );\n  }\n  return context;\n};\n"],"names":["createContext","useContext"],"mappings":";;;;AASO,MAAM,kBAAqB,GAAAA,mBAAA;AAAA,EAChC;AACF;AAEO,MAAM,wBAAwB,MAAM;AACzC,EAAM,MAAA,OAAA,GAAUC,iBAAW,kBAAkB,CAAA;AAC7C,EAAA,IAAI,CAAC,OAAS,EAAA;AACZ,IAAA,MAAM,IAAI,KAAA;AAAA,MACR;AAAA,KACF;AAAA;AAEF,EAAO,OAAA,OAAA;AACT;;;;;"}

package/dist-cjs/button-bar/ButtonBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonBar.js","sources":["../src/button-bar/ButtonBar.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n  Children,\n  type HTMLAttributes,\n  type ReactNode,\n  forwardRef,\n  useMemo,\n} from \"react\";\n\nimport { type ButtonVariant, makePrefixer } from \"@salt-ds/core\";\nimport { ButtonBarContext } from \"./internal/ButtonBarContext\";\nimport { DescendantProvider } from \"./internal/DescendantContext\";\nimport { useDescendants } from \"./internal/useDescendants\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport buttonBarCss from \"./ButtonBar.css\";\n\nexport type PartialRecord<K extends keyof any, T> = Partial<Record<K, T>>;\n\ntype ButtonBarOrderKey = \"order\" | \"alignLeftOrder\" | \"stackOrder\";\nexport type ButtonBarSortOrder = \"asc\" | \"desc\";\n\nexport const DefaultButtonsOrderByVariant: Record<\n  ButtonVariant,\n  Record<ButtonBarOrderKey, number>\n> = {\n  cta: {\n    order: 0,\n    alignLeftOrder: 1,\n    stackOrder: 2,\n  },\n  primary: {\n    order: 1,\n    alignLeftOrder: 2,\n    stackOrder: 1,\n  },\n  secondary: {\n    order: 2,\n    alignLeftOrder: 0,\n    stackOrder: 0,\n  },\n};\n\ntype OrderedButtonData = { variant?: ButtonVariant } & PartialRecord<\n  ButtonBarOrderKey,\n  number\n>;\n\nfunction getPriorityForButton(\n  item: OrderedButtonData,\n  field: ButtonBarOrderKey,\n) {\n  const variant = item?.variant || \"primary\";\n  return item?.[field] ?? DefaultButtonsOrderByVariant[variant][field];\n}\nconst createComparatorForField = (\n  field: ButtonBarOrderKey,\n  sort: ButtonBarSortOrder,\n  alignLeft: boolean,\n  childrenData: Array<OrderedButtonData>,\n) => {\n  let equalityResult: number;\n  if (field === \"order\" || field === \"stackOrder\") {\n    equalityResult = sort === \"asc\" ? 1 : 0;\n  } else {\n    equalityResult = alignLeft ? 1 : -1;\n  }\n\n  function createDescComparator(indexA: number, indexB: number) {\n    const priorityA = getPriorityForButton(childrenData[indexA], field);\n    const priorityB = getPriorityForButton(childrenData[indexB], field);\n    if (priorityA == null && priorityB == null) {\n      return 0;\n    }\n    if (priorityA == null) {\n      return 1;\n    }\n    if (priorityB == null) {\n      return -1;\n    }\n    if (priorityA === priorityB) {\n      return equalityResult;\n    }\n    return priorityB - priorityA;\n  }\n\n  function createAscComparator(indexA: number, indexB: number) {\n    return createDescComparator(indexA, indexB) * -1;\n  }\n\n  return sort === \"asc\" ? createAscComparator : createDescComparator;\n};\n\nfunction alignSecondaryChild(\n  orderedChildrenData: Array<OrderedButtonData & { index: number }>,\n  sortOrder: ButtonBarSortOrder,\n  alignLeft: boolean,\n): { index?: number; align?: \"left\" | \"right\" } {\n  const noSecondaryChildren = { index: undefined, align: undefined };\n  if (sortOrder === \"asc\" || alignLeft) {\n    const firstSecondaryChildIndex = orderedChildrenData.findIndex(\n      (childData) => childData.variant === \"secondary\",\n    );\n\n    if (firstSecondaryChildIndex !== -1) {\n      const originalChildIndex =\n        orderedChildrenData[firstSecondaryChildIndex].index;\n      return { index: originalChildIndex, align: \"right\" };\n    }\n    return noSecondaryChildren;\n  }\n  let index = orderedChildrenData.length;\n  while (index--) {\n    if (orderedChildrenData[index].variant === \"secondary\") {\n      return { index: orderedChildrenData[index].index, align: \"left\" };\n    }\n  }\n  return noSecondaryChildren;\n}\n\nexport interface ButtonBarProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * By default ButtonBar lays buttons from right to left horizontally ordering action buttons by order prop.\n   * Use this prop to lay button from left to right instead.\n   * Actions buttons will be ordered by alignLeftOrder prop.\n   */\n  alignLeft?: boolean;\n  /**\n   * A list of OrderButtons. Required to have some children.\n   */\n  children: ReactNode;\n  /**\n   * The className(s) of the component\n   */\n  className?: string;\n  /**\n   * By default ButtonBar aligns secondary buttons to the left while displayed horizontally\n   * and to the right while aligned left or sorting ascending.\n   * Use this prop to disable this behavior.\n   */\n  disableAutoAlignment?: boolean;\n  /**\n   * By default ButtonBar sorts buttons in descending order.\n   * Use this prop to change that when the button bar is NOT stacked and aligned left.\n   */\n  sortAlignLeft?: ButtonBarSortOrder;\n  /**\n   * By default ButtonBar sorts buttons in descending order.\n   * Use this prop to change that when the button bar is NOT stacked and NOT aligned left.\n   */\n  sortOrder?: ButtonBarSortOrder;\n  /**\n   * By default ButtonBar sorts buttons in descending order.\n   * Use this prop to change that when the button bar is stacked.\n   */\n  sortStackOrder?: ButtonBarSortOrder;\n  /**\n   * When the viewport is equal to or smaller than the breakpoint the buttons will be stacked vertically.\n   * Alternatively pass a screen width number in pixels.\n   * Use `0` to disable this feature. Defaults to 'xs'.\n   * Actions buttons will be ordered by stackOrder prop.\n   */\n  stackAtBreakpoint?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | number;\n}\n\nconst withBaseName = makePrefixer(\"saltButtonBar\");\n\nexport const ButtonBar = forwardRef<HTMLDivElement, ButtonBarProps>(\n  function ButtonBar(\n    {\n      alignLeft = false,\n      children: childrenProp,\n      className,\n      disableAutoAlignment,\n      sortAlignLeft = \"desc\",\n      sortOrder = \"desc\",\n      sortStackOrder = \"desc\",\n      stackAtBreakpoint = \"xs\",\n      ...rest\n    },\n    ref,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-button-bar\",\n      css: buttonBarCss,\n      window: targetWindow,\n    });\n\n    const [childrenData, setChildrenData] = useDescendants<OrderedButtonData>();\n    // TODO: we need a mechanism to work with breakpoints.\n    const matches = false;\n\n    const childrenArray = Children.toArray(childrenProp);\n    const childrenIndexes = childrenArray.map((_, index) => index);\n    const stackOrderComparator = createComparatorForField(\n      \"stackOrder\",\n      sortStackOrder,\n      alignLeft,\n      childrenData,\n    );\n    const orderComparator = createComparatorForField(\n      \"order\",\n      sortOrder,\n      alignLeft,\n      childrenData,\n    );\n    const alignLeftComparator = createComparatorForField(\n      \"alignLeftOrder\",\n      sortAlignLeft,\n      alignLeft,\n      childrenData,\n    );\n\n    let orderedChildrenIndexes: number[];\n\n    if (childrenData.length !== childrenIndexes.length) {\n      orderedChildrenIndexes = childrenIndexes;\n    } else {\n      orderedChildrenIndexes = matches\n        ? childrenIndexes.sort(stackOrderComparator)\n        : childrenIndexes.sort(\n            alignLeft ? alignLeftComparator : orderComparator,\n          );\n    }\n\n    let secondaryChildAlignment: { index?: number; align?: \"left\" | \"right\" } =\n      {\n        index: undefined,\n        align: undefined,\n      };\n    if (!disableAutoAlignment) {\n      secondaryChildAlignment = alignSecondaryChild(\n        orderedChildrenIndexes.map((index) => ({\n          index,\n          ...childrenData[index],\n        })),\n        sortOrder,\n        alignLeft,\n      );\n    }\n\n    const hasSecondaryButtons = childrenData.some(\n      (buttonData) => buttonData.variant === \"secondary\",\n    );\n\n    const orderedChildren = orderedChildrenIndexes.map(\n      (index) => childrenArray[index],\n    );\n\n    const buttonBarContextValue = useMemo(\n      () => ({\n        matches,\n        alignedIndex: secondaryChildAlignment.index,\n        align: secondaryChildAlignment.align,\n      }),\n      [matches, secondaryChildAlignment.align, secondaryChildAlignment.index],\n    );\n\n    return (\n      <ButtonBarContext.Provider value={buttonBarContextValue}>\n        <DescendantProvider items={childrenData} setItems={setChildrenData}>\n          <div\n            aria-label=\"button bar\"\n            className={clsx(\n              withBaseName(),\n              {\n                [withBaseName(\"stacked\")]: matches,\n                [withBaseName(\"alignLeft\")]: alignLeft,\n                [withBaseName(\"autoAligning\")]:\n                  hasSecondaryButtons && !disableAutoAlignment,\n              },\n              className,\n            )}\n            ref={ref}\n            role=\"region\"\n            {...rest}\n          >\n            {orderedChildren}\n          </div>\n        </DescendantProvider>\n      </ButtonBarContext.Provider>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","ButtonBar","useWindow","useComponentCssInjection","buttonBarCss","useDescendants","Children","useMemo","jsx","ButtonBarContext","DescendantProvider","clsx"],"mappings":";;;;;;;;;;;;;AAwBO,MAAM,4BAGT,GAAA;AAAA,EACF,GAAK,EAAA;AAAA,IACH,KAAO,EAAA,CAAA;AAAA,IACP,cAAgB,EAAA,CAAA;AAAA,IAChB,UAAY,EAAA;AAAA,GACd;AAAA,EACA,OAAS,EAAA;AAAA,IACP,KAAO,EAAA,CAAA;AAAA,IACP,cAAgB,EAAA,CAAA;AAAA,IAChB,UAAY,EAAA;AAAA,GACd;AAAA,EACA,SAAW,EAAA;AAAA,IACT,KAAO,EAAA,CAAA;AAAA,IACP,cAAgB,EAAA,CAAA;AAAA,IAChB,UAAY,EAAA;AAAA;AAEhB;AAOA,SAAS,oBAAA,CACP,MACA,KACA,EAAA;AACA,EAAM,MAAA,OAAA,GAAA,CAAU,6BAAM,OAAW,KAAA,SAAA;AACjC,EAAA,OAAA,CAAO,IAAO,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,IAAA,CAAA,KAAA,CAAA,KAAU,4BAA6B,CAAA,OAAO,EAAE,KAAK,CAAA;AACrE;AACA,MAAM,wBAA2B,GAAA,CAC/B,KACA,EAAA,IAAA,EACA,WACA,YACG,KAAA;AACH,EAAI,IAAA,cAAA;AACJ,EAAI,IAAA,KAAA,KAAU,OAAW,IAAA,KAAA,KAAU,YAAc,EAAA;AAC/C,IAAiB,cAAA,GAAA,IAAA,KAAS,QAAQ,CAAI,GAAA,CAAA;AAAA,GACjC,MAAA;AACL,IAAA,cAAA,GAAiB,YAAY,CAAI,GAAA,CAAA,CAAA;AAAA;AAGnC,EAAS,SAAA,oBAAA,CAAqB,QAAgB,MAAgB,EAAA;AAC5D,IAAA,MAAM,SAAY,GAAA,oBAAA,CAAqB,YAAa,CAAA,MAAM,GAAG,KAAK,CAAA;AAClE,IAAA,MAAM,SAAY,GAAA,oBAAA,CAAqB,YAAa,CAAA,MAAM,GAAG,KAAK,CAAA;AAClE,IAAI,IAAA,SAAA,IAAa,IAAQ,IAAA,SAAA,IAAa,IAAM,EAAA;AAC1C,MAAO,OAAA,CAAA;AAAA;AAET,IAAA,IAAI,aAAa,IAAM,EAAA;AACrB,MAAO,OAAA,CAAA;AAAA;AAET,IAAA,IAAI,aAAa,IAAM,EAAA;AACrB,MAAO,OAAA,CAAA,CAAA;AAAA;AAET,IAAA,IAAI,cAAc,SAAW,EAAA;AAC3B,MAAO,OAAA,cAAA;AAAA;AAET,IAAA,OAAO,SAAY,GAAA,SAAA;AAAA;AAGrB,EAAS,SAAA,mBAAA,CAAoB,QAAgB,MAAgB,EAAA;AAC3D,IAAO,OAAA,oBAAA,CAAqB,MAAQ,EAAA,MAAM,CAAI,GAAA,CAAA,CAAA;AAAA;AAGhD,EAAO,OAAA,IAAA,KAAS,QAAQ,mBAAsB,GAAA,oBAAA;AAChD,CAAA;AAEA,SAAS,mBAAA,CACP,mBACA,EAAA,SAAA,EACA,SAC8C,EAAA;AAC9C,EAAA,MAAM,mBAAsB,GAAA,EAAE,KAAO,EAAA,KAAA,CAAA,EAAW,OAAO,KAAU,CAAA,EAAA;AACjE,EAAI,IAAA,SAAA,KAAc,SAAS,SAAW,EAAA;AACpC,IAAA,MAAM,2BAA2B,mBAAoB,CAAA,SAAA;AAAA,MACnD,CAAC,SAAc,KAAA,SAAA,CAAU,OAAY,KAAA;AAAA,KACvC;AAEA,IAAA,IAAI,6BAA6B,CAAI,CAAA,EAAA;AACnC,MAAM,MAAA,kBAAA,GACJ,mBAAoB,CAAA,wBAAwB,CAAE,CAAA,KAAA;AAChD,MAAA,OAAO,EAAE,KAAA,EAAO,kBAAoB,EAAA,KAAA,EAAO,OAAQ,EAAA;AAAA;AAErD,IAAO,OAAA,mBAAA;AAAA;AAET,EAAA,IAAI,QAAQ,mBAAoB,CAAA,MAAA;AAChC,EAAA,OAAO,KAAS,EAAA,EAAA;AACd,IAAA,IAAI,mBAAoB,CAAA,KAAK,CAAE,CAAA,OAAA,KAAY,WAAa,EAAA;AACtD,MAAA,OAAO,EAAE,KAAO,EAAA,mBAAA,CAAoB,KAAK,CAAE,CAAA,KAAA,EAAO,OAAO,MAAO,EAAA;AAAA;AAClE;AAEF,EAAO,OAAA,mBAAA;AACT;AA+CA,MAAM,YAAA,GAAeA,kBAAa,eAAe,CAAA;AAE1C,MAAM,SAAY,GAAAC,gBAAA;AAAA,EACvB,SAASC,UACP,CAAA;AAAA,IACE,SAAY,GAAA,KAAA;AAAA,IACZ,QAAU,EAAA,YAAA;AAAA,IACV,SAAA;AAAA,IACA,oBAAA;AAAA,IACA,aAAgB,GAAA,MAAA;AAAA,IAChB,SAAY,GAAA,MAAA;AAAA,IACZ,cAAiB,GAAA,MAAA;AAAA,IACjB,iBAAoB,GAAA,IAAA;AAAA,IACpB,GAAG;AAAA,KAEL,GACA,EAAA;AACA,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,iBAAA;AAAA,MACR,GAAK,EAAAC,WAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAA,MAAM,CAAC,YAAA,EAAc,eAAe,CAAA,GAAIC,6BAAkC,EAAA;AAE1E,IAAA,MAAM,OAAU,GAAA,KAAA;AAEhB,IAAM,MAAA,aAAA,GAAgBC,cAAS,CAAA,OAAA,CAAQ,YAAY,CAAA;AACnD,IAAA,MAAM,kBAAkB,aAAc,CAAA,GAAA,CAAI,CAAC,CAAA,EAAG,UAAU,KAAK,CAAA;AAC7D,IAA6B,wBAAA;AAAA,MAC3B,YAAA;AAAA,MACA,cAAA;AAAA,MACA,SAAA;AAAA,MACA;AAAA;AAEF,IAAA,MAAM,eAAkB,GAAA,wBAAA;AAAA,MACtB,OAAA;AAAA,MACA,SAAA;AAAA,MACA,SAAA;AAAA,MACA;AAAA,KACF;AACA,IAAA,MAAM,mBAAsB,GAAA,wBAAA;AAAA,MAC1B,gBAAA;AAAA,MACA,aAAA;AAAA,MACA,SAAA;AAAA,MACA;AAAA,KACF;AAEA,IAAI,IAAA,sBAAA;AAEJ,IAAI,IAAA,YAAA,CAAa,MAAW,KAAA,eAAA,CAAgB,MAAQ,EAAA;AAClD,MAAyB,sBAAA,GAAA,eAAA;AAAA,KACpB,MAAA;AACL,MAAA,sBAAA,GAEI,eAAgB,CAAA,IAAA;AAAA,QACd,YAAY,mBAAsB,GAAA;AAAA,OACpC;AAAA;AAGN,IAAA,IAAI,uBACF,GAAA;AAAA,MACE,KAAO,EAAA,KAAA,CAAA;AAAA,MACP,KAAO,EAAA,KAAA;AAAA,KACT;AACF,IAAA,IAAI,CAAC,oBAAsB,EAAA;AACzB,MAA0B,uBAAA,GAAA,mBAAA;AAAA,QACxB,sBAAA,CAAuB,GAAI,CAAA,CAAC,KAAW,MAAA;AAAA,UACrC,KAAA;AAAA,UACA,GAAG,aAAa,KAAK;AAAA,SACrB,CAAA,CAAA;AAAA,QACF,SAAA;AAAA,QACA;AAAA,OACF;AAAA;AAGF,IAAA,MAAM,sBAAsB,YAAa,CAAA,IAAA;AAAA,MACvC,CAAC,UAAe,KAAA,UAAA,CAAW,OAAY,KAAA;AAAA,KACzC;AAEA,IAAA,MAAM,kBAAkB,sBAAuB,CAAA,GAAA;AAAA,MAC7C,CAAC,KAAU,KAAA,aAAA,CAAc,KAAK;AAAA,KAChC;AAEA,IAAA,MAAM,qBAAwB,GAAAC,aAAA;AAAA,MAC5B,OAAO;AAAA,QACL,OAAA;AAAA,QACA,cAAc,uBAAwB,CAAA,KAAA;AAAA,QACtC,OAAO,uBAAwB,CAAA;AAAA,OACjC,CAAA;AAAA,MACA,CAAC,OAAA,EAAS,uBAAwB,CAAA,KAAA,EAAO,wBAAwB,KAAK;AAAA,KACxE;AAEA,IACE,uBAAAC,cAAA,CAACC,iCAAiB,CAAA,QAAA,EAAjB,EAA0B,KAAA,EAAO,qBAChC,EAAA,QAAA,kBAAAD,cAAA,CAACE,oCAAmB,EAAA,EAAA,KAAA,EAAO,YAAc,EAAA,QAAA,EAAU,eACjD,EAAA,QAAA,kBAAAF,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,YAAW,EAAA,YAAA;AAAA,QACX,SAAW,EAAAG,SAAA;AAAA,UACT,YAAa,EAAA;AAAA,UACb;AAAA,YACE,CAAC,YAAA,CAAa,SAAS,CAAC,GAAG,OAAA;AAAA,YAC3B,CAAC,YAAA,CAAa,WAAW,CAAC,GAAG,SAAA;AAAA,YAC7B,CAAC,YAAa,CAAA,cAAc,CAAC,GAC3B,uBAAuB,CAAC;AAAA,WAC5B;AAAA,UACA;AAAA,SACF;AAAA,QACA,GAAA;AAAA,QACA,IAAK,EAAA,QAAA;AAAA,QACJ,GAAG,IAAA;AAAA,QAEH,QAAA,EAAA;AAAA;AAAA,OAEL,CACF,EAAA,CAAA;AAAA;AAGN;;;;;"}
+{"version":3,"file":"ButtonBar.js","sources":["../src/button-bar/ButtonBar.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n  Children,\n  type HTMLAttributes,\n  type ReactNode,\n  forwardRef,\n  useMemo,\n} from \"react\";\n\nimport { type ButtonVariant, makePrefixer } from \"@salt-ds/core\";\nimport { ButtonBarContext } from \"./internal/ButtonBarContext\";\nimport { DescendantProvider } from \"./internal/DescendantContext\";\nimport { useDescendants } from \"./internal/useDescendants\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport buttonBarCss from \"./ButtonBar.css\";\n\nexport type PartialRecord<K extends keyof any, T> = Partial<Record<K, T>>;\n\ntype ButtonBarOrderKey = \"order\" | \"alignLeftOrder\" | \"stackOrder\";\nexport type ButtonBarSortOrder = \"asc\" | \"desc\";\n\nexport const DefaultButtonsOrderByVariant: Record<\n  ButtonVariant,\n  Record<ButtonBarOrderKey, number>\n> = {\n  cta: {\n    order: 0,\n    alignLeftOrder: 1,\n    stackOrder: 2,\n  },\n  primary: {\n    order: 1,\n    alignLeftOrder: 2,\n    stackOrder: 1,\n  },\n  secondary: {\n    order: 2,\n    alignLeftOrder: 0,\n    stackOrder: 0,\n  },\n};\n\ntype OrderedButtonData = { variant?: ButtonVariant } & PartialRecord<\n  ButtonBarOrderKey,\n  number\n>;\n\nfunction getPriorityForButton(\n  item: OrderedButtonData,\n  field: ButtonBarOrderKey,\n) {\n  const variant = item?.variant || \"primary\";\n  return item?.[field] ?? DefaultButtonsOrderByVariant[variant][field];\n}\nconst createComparatorForField = (\n  field: ButtonBarOrderKey,\n  sort: ButtonBarSortOrder,\n  alignLeft: boolean,\n  childrenData: Array<OrderedButtonData>,\n) => {\n  let equalityResult: number;\n  if (field === \"order\" || field === \"stackOrder\") {\n    equalityResult = sort === \"asc\" ? 1 : 0;\n  } else {\n    equalityResult = alignLeft ? 1 : -1;\n  }\n\n  function createDescComparator(indexA: number, indexB: number) {\n    const priorityA = getPriorityForButton(childrenData[indexA], field);\n    const priorityB = getPriorityForButton(childrenData[indexB], field);\n    if (priorityA == null && priorityB == null) {\n      return 0;\n    }\n    if (priorityA == null) {\n      return 1;\n    }\n    if (priorityB == null) {\n      return -1;\n    }\n    if (priorityA === priorityB) {\n      return equalityResult;\n    }\n    return priorityB - priorityA;\n  }\n\n  function createAscComparator(indexA: number, indexB: number) {\n    return createDescComparator(indexA, indexB) * -1;\n  }\n\n  return sort === \"asc\" ? createAscComparator : createDescComparator;\n};\n\nfunction alignSecondaryChild(\n  orderedChildrenData: Array<OrderedButtonData & { index: number }>,\n  sortOrder: ButtonBarSortOrder,\n  alignLeft: boolean,\n): { index?: number; align?: \"left\" | \"right\" } {\n  const noSecondaryChildren = { index: undefined, align: undefined };\n  if (sortOrder === \"asc\" || alignLeft) {\n    const firstSecondaryChildIndex = orderedChildrenData.findIndex(\n      (childData) => childData.variant === \"secondary\",\n    );\n\n    if (firstSecondaryChildIndex !== -1) {\n      const originalChildIndex =\n        orderedChildrenData[firstSecondaryChildIndex].index;\n      return { index: originalChildIndex, align: \"right\" };\n    }\n    return noSecondaryChildren;\n  }\n  let index = orderedChildrenData.length;\n  while (index--) {\n    if (orderedChildrenData[index].variant === \"secondary\") {\n      return { index: orderedChildrenData[index].index, align: \"left\" };\n    }\n  }\n  return noSecondaryChildren;\n}\n\nexport interface ButtonBarProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * By default ButtonBar lays buttons from right to left horizontally ordering action buttons by order prop.\n   * Use this prop to lay button from left to right instead.\n   * Actions buttons will be ordered by alignLeftOrder prop.\n   */\n  alignLeft?: boolean;\n  /**\n   * A list of OrderButtons. Required to have some children.\n   */\n  children: ReactNode;\n  /**\n   * The className(s) of the component\n   */\n  className?: string;\n  /**\n   * By default ButtonBar aligns secondary buttons to the left while displayed horizontally\n   * and to the right while aligned left or sorting ascending.\n   * Use this prop to disable this behavior.\n   */\n  disableAutoAlignment?: boolean;\n  /**\n   * By default ButtonBar sorts buttons in descending order.\n   * Use this prop to change that when the button bar is NOT stacked and aligned left.\n   */\n  sortAlignLeft?: ButtonBarSortOrder;\n  /**\n   * By default ButtonBar sorts buttons in descending order.\n   * Use this prop to change that when the button bar is NOT stacked and NOT aligned left.\n   */\n  sortOrder?: ButtonBarSortOrder;\n  /**\n   * By default ButtonBar sorts buttons in descending order.\n   * Use this prop to change that when the button bar is stacked.\n   */\n  sortStackOrder?: ButtonBarSortOrder;\n  /**\n   * When the viewport is equal to or smaller than the breakpoint the buttons will be stacked vertically.\n   * Alternatively pass a screen width number in pixels.\n   * Use `0` to disable this feature. Defaults to 'xs'.\n   * Actions buttons will be ordered by stackOrder prop.\n   */\n  stackAtBreakpoint?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | number;\n}\n\nconst withBaseName = makePrefixer(\"saltButtonBar\");\n\nexport const ButtonBar = forwardRef<HTMLDivElement, ButtonBarProps>(\n  function ButtonBar(\n    {\n      alignLeft = false,\n      children: childrenProp,\n      className,\n      disableAutoAlignment,\n      sortAlignLeft = \"desc\",\n      sortOrder = \"desc\",\n      sortStackOrder = \"desc\",\n      stackAtBreakpoint = \"xs\",\n      ...rest\n    },\n    ref,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-button-bar\",\n      css: buttonBarCss,\n      window: targetWindow,\n    });\n\n    const [childrenData, setChildrenData] = useDescendants<OrderedButtonData>();\n    // TODO: we need a mechanism to work with breakpoints.\n    const matches = false;\n\n    const childrenArray = Children.toArray(childrenProp);\n    const childrenIndexes = childrenArray.map((_, index) => index);\n    const stackOrderComparator = createComparatorForField(\n      \"stackOrder\",\n      sortStackOrder,\n      alignLeft,\n      childrenData,\n    );\n    const orderComparator = createComparatorForField(\n      \"order\",\n      sortOrder,\n      alignLeft,\n      childrenData,\n    );\n    const alignLeftComparator = createComparatorForField(\n      \"alignLeftOrder\",\n      sortAlignLeft,\n      alignLeft,\n      childrenData,\n    );\n\n    let orderedChildrenIndexes: number[];\n\n    if (childrenData.length !== childrenIndexes.length) {\n      orderedChildrenIndexes = childrenIndexes;\n    } else {\n      orderedChildrenIndexes = matches\n        ? childrenIndexes.sort(stackOrderComparator)\n        : childrenIndexes.sort(\n            alignLeft ? alignLeftComparator : orderComparator,\n          );\n    }\n\n    let secondaryChildAlignment: { index?: number; align?: \"left\" | \"right\" } =\n      {\n        index: undefined,\n        align: undefined,\n      };\n    if (!disableAutoAlignment) {\n      secondaryChildAlignment = alignSecondaryChild(\n        orderedChildrenIndexes.map((index) => ({\n          index,\n          ...childrenData[index],\n        })),\n        sortOrder,\n        alignLeft,\n      );\n    }\n\n    const hasSecondaryButtons = childrenData.some(\n      (buttonData) => buttonData.variant === \"secondary\",\n    );\n\n    const orderedChildren = orderedChildrenIndexes.map(\n      (index) => childrenArray[index],\n    );\n\n    const buttonBarContextValue = useMemo(\n      () => ({\n        matches,\n        alignedIndex: secondaryChildAlignment.index,\n        align: secondaryChildAlignment.align,\n      }),\n      [matches, secondaryChildAlignment.align, secondaryChildAlignment.index],\n    );\n\n    return (\n      <ButtonBarContext.Provider value={buttonBarContextValue}>\n        <DescendantProvider items={childrenData} setItems={setChildrenData}>\n          <div\n            aria-label=\"button bar\"\n            className={clsx(\n              withBaseName(),\n              {\n                [withBaseName(\"stacked\")]: matches,\n                [withBaseName(\"alignLeft\")]: alignLeft,\n                [withBaseName(\"autoAligning\")]:\n                  hasSecondaryButtons && !disableAutoAlignment,\n              },\n              className,\n            )}\n            ref={ref}\n            role=\"region\"\n            {...rest}\n          >\n            {orderedChildren}\n          </div>\n        </DescendantProvider>\n      </ButtonBarContext.Provider>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","ButtonBar","useWindow","useComponentCssInjection","buttonBarCss","useDescendants","Children","useMemo","jsx","ButtonBarContext","DescendantProvider","clsx"],"mappings":"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"}

package/dist-cjs/button-bar/OrderedButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"OrderedButton.js","sources":["../src/button-bar/OrderedButton.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { forwardRef, useContext } from \"react\";\n\nimport {\n  Button,\n  type ButtonProps,\n  capitalize,\n  makePrefixer,\n} from \"@salt-ds/core\";\nimport { ButtonBarContext } from \"./internal/ButtonBarContext\";\nimport { useDescendant } from \"./internal/useDescendant\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport orderedButtonCss from \"./OrderedButton.css\";\n\nexport interface OrderedButtonProps extends ButtonProps {\n  /**\n   * Aligns the button (and any buttons before/after) it on the left/right\n   * of the container\n   */\n  align?: \"left\" | \"right\";\n  /**\n   * The order the button will be rendered when NOT stacked and the button bar is aligned left order.\n   * Buttons are ordered in descending order by default and then by their source order.\n   * This defaults to 1 for `CTA`, 2 for `regular` and 0 for `secondary`\n   */\n  alignLeftOrder?: number;\n  /**\n   * The className(s) of the component\n   */\n  className?: string;\n  /**\n   * The order the button will be rendered when NOT stacked. Buttons are ordered\n   * in descending order by default and then by their source order.\n   * This defaults to 0 for `CTA`, 1 for `regular` and 2 for `secondary`\n   */\n  order?: number;\n  /**\n   * The order the button will be rendered when stacked. Buttons are ordered\n   * in descending order by default and then by their source order.\n   * This defaults to 2 for `CTA`, 1 for `regular` and 0 for `secondary`\n   */\n  stackOrder?: number;\n}\n\nconst withBasename = makePrefixer(\"saltOrderedButton\");\n\nexport const OrderedButton = forwardRef<HTMLButtonElement, OrderedButtonProps>(\n  function OrderedButton(\n    {\n      className,\n      align: alignProp,\n      order,\n      alignLeftOrder,\n      stackOrder,\n      variant,\n      ...restProps\n    },\n    ref,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-ordered-button\",\n      css: orderedButtonCss,\n      window: targetWindow,\n    });\n\n    const index = useDescendant({ order, stackOrder, alignLeftOrder, variant });\n    const {\n      matches,\n      align: alignContext,\n      alignedIndex,\n    } = useContext(ButtonBarContext);\n\n    const alignFromParent = index === alignedIndex ? alignContext : undefined;\n    const align = alignProp || alignFromParent;\n\n    return (\n      <Button\n        className={clsx(\n          withBasename(),\n          {\n            [withBasename(`align${align ? capitalize(align) : \"\"}`)]:\n              align && !matches,\n            [withBasename(\"stacked\")]: matches,\n          },\n          className,\n        )}\n        ref={ref}\n        variant={variant}\n        {...restProps}\n      />\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","OrderedButton","useWindow","useComponentCssInjection","orderedButtonCss","useDescendant","useContext","ButtonBarContext","jsx","Button","clsx","capitalize"],"mappings":";;;;;;;;;;;;AA+CA,MAAM,YAAA,GAAeA,kBAAa,mBAAmB,CAAA;AAE9C,MAAM,aAAgB,GAAAC,gBAAA;AAAA,EAC3B,SAASC,cACP,CAAA;AAAA,IACE,SAAA;AAAA,IACA,KAAO,EAAA,SAAA;AAAA,IACP,KAAA;AAAA,IACA,cAAA;AAAA,IACA,UAAA;AAAA,IACA,OAAA;AAAA,IACA,GAAG;AAAA,KAEL,GACA,EAAA;AACA,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,qBAAA;AAAA,MACR,GAAK,EAAAC,eAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAA,MAAM,QAAQC,2BAAc,CAAA,EAAE,OAAO,UAAY,EAAA,cAAA,EAAgB,SAAS,CAAA;AAC1E,IAAM,MAAA;AAAA,MACJ,OAAA;AAAA,MACA,KAAO,EAAA,YAAA;AAAA,MACP;AAAA,KACF,GAAIC,iBAAWC,iCAAgB,CAAA;AAE/B,IAAM,MAAA,eAAA,GAAkB,KAAU,KAAA,YAAA,GAAe,YAAe,GAAA,KAAA,CAAA;AAChE,IAAA,MAAM,QAAQ,SAAa,IAAA,eAAA;AAE3B,IACE,uBAAAC,cAAA;AAAA,MAACC,WAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAAC,SAAA;AAAA,UACT,YAAa,EAAA;AAAA,UACb;AAAA,YACE,CAAC,YAAA,CAAa,CAAQ,KAAA,EAAA,KAAA,GAAQC,eAAW,CAAA,KAAK,CAAI,GAAA,EAAE,CAAE,CAAA,CAAC,GACrD,KAAA,IAAS,CAAC,OAAA;AAAA,YACZ,CAAC,YAAA,CAAa,SAAS,CAAC,GAAG;AAAA,WAC7B;AAAA,UACA;AAAA,SACF;AAAA,QACA,GAAA;AAAA,QACA,OAAA;AAAA,QACC,GAAG;AAAA;AAAA,KACN;AAAA;AAGN;;;;"}
+{"version":3,"file":"OrderedButton.js","sources":["../src/button-bar/OrderedButton.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { forwardRef, useContext } from \"react\";\n\nimport {\n  Button,\n  type ButtonProps,\n  capitalize,\n  makePrefixer,\n} from \"@salt-ds/core\";\nimport { ButtonBarContext } from \"./internal/ButtonBarContext\";\nimport { useDescendant } from \"./internal/useDescendant\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport orderedButtonCss from \"./OrderedButton.css\";\n\nexport interface OrderedButtonProps extends ButtonProps {\n  /**\n   * Aligns the button (and any buttons before/after) it on the left/right\n   * of the container\n   */\n  align?: \"left\" | \"right\";\n  /**\n   * The order the button will be rendered when NOT stacked and the button bar is aligned left order.\n   * Buttons are ordered in descending order by default and then by their source order.\n   * This defaults to 1 for `CTA`, 2 for `regular` and 0 for `secondary`\n   */\n  alignLeftOrder?: number;\n  /**\n   * The className(s) of the component\n   */\n  className?: string;\n  /**\n   * The order the button will be rendered when NOT stacked. Buttons are ordered\n   * in descending order by default and then by their source order.\n   * This defaults to 0 for `CTA`, 1 for `regular` and 2 for `secondary`\n   */\n  order?: number;\n  /**\n   * The order the button will be rendered when stacked. Buttons are ordered\n   * in descending order by default and then by their source order.\n   * This defaults to 2 for `CTA`, 1 for `regular` and 0 for `secondary`\n   */\n  stackOrder?: number;\n}\n\nconst withBasename = makePrefixer(\"saltOrderedButton\");\n\nexport const OrderedButton = forwardRef<HTMLButtonElement, OrderedButtonProps>(\n  function OrderedButton(\n    {\n      className,\n      align: alignProp,\n      order,\n      alignLeftOrder,\n      stackOrder,\n      variant,\n      ...restProps\n    },\n    ref,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-ordered-button\",\n      css: orderedButtonCss,\n      window: targetWindow,\n    });\n\n    const index = useDescendant({ order, stackOrder, alignLeftOrder, variant });\n    const {\n      matches,\n      align: alignContext,\n      alignedIndex,\n    } = useContext(ButtonBarContext);\n\n    const alignFromParent = index === alignedIndex ? alignContext : undefined;\n    const align = alignProp || alignFromParent;\n\n    return (\n      <Button\n        className={clsx(\n          withBasename(),\n          {\n            [withBasename(`align${align ? capitalize(align) : \"\"}`)]:\n              align && !matches,\n            [withBasename(\"stacked\")]: matches,\n          },\n          className,\n        )}\n        ref={ref}\n        variant={variant}\n        {...restProps}\n      />\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","OrderedButton","useWindow","useComponentCssInjection","orderedButtonCss","useDescendant","useContext","ButtonBarContext","jsx","Button","clsx","capitalize"],"mappings":";;;;;;;;;;;;AA+CA,MAAM,YAAA,GAAeA,kBAAa,mBAAmB,CAAA;AAE9C,MAAM,aAAgB,GAAAC,gBAAA;AAAA,EAC3B,SAASC,cACP,CAAA;AAAA,IACE,SAAA;AAAA,IACA,KAAO,EAAA,SAAA;AAAA,IACP,KAAA;AAAA,IACA,cAAA;AAAA,IACA,UAAA;AAAA,IACA,OAAA;AAAA,IACA,GAAG;AAAA,KAEL,GACA,EAAA;AACA,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,qBAAA;AAAA,MACR,GAAK,EAAAC,eAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAA,MAAM,QAAQC,2BAAc,CAAA,EAAE,OAAO,UAAY,EAAA,cAAA,EAAgB,SAAS,CAAA;AAC1E,IAAM,MAAA;AAAA,MACJ,OAAA;AAAA,MACA,KAAO,EAAA,YAAA;AAAA,MACP;AAAA,KACF,GAAIC,iBAAWC,iCAAgB,CAAA;AAE/B,IAAM,MAAA,eAAA,GAAkB,KAAU,KAAA,YAAA,GAAe,YAAe,GAAA,MAAA;AAChE,IAAA,MAAM,QAAQ,SAAa,IAAA,eAAA;AAE3B,IACE,uBAAAC,cAAA;AAAA,MAACC,WAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAAC,SAAA;AAAA,UACT,YAAa,EAAA;AAAA,UACb;AAAA,YACE,CAAC,YAAA,CAAa,CAAQ,KAAA,EAAA,KAAA,GAAQC,eAAW,CAAA,KAAK,CAAI,GAAA,EAAE,CAAE,CAAA,CAAC,GACrD,KAAA,IAAS,CAAC,OAAA;AAAA,YACZ,CAAC,YAAA,CAAa,SAAS,CAAC,GAAG;AAAA,WAC7B;AAAA,UACA;AAAA,SACF;AAAA,QACA,GAAA;AAAA,QACA,OAAA;AAAA,QACC,GAAG;AAAA;AAAA,KACN;AAAA;AAGN;;;;"}

package/dist-cjs/button-bar/internal/useDescendant.js.map

@@ -1 +1 @@
-{"version":3,"file":"useDescendant.js","sources":["../src/button-bar/internal/useDescendant.ts"],"sourcesContent":["import { useIsomorphicLayoutEffect } from \"@salt-ds/core\";\n// Copied from https://gist.github.com/ryanflorence/10e9387f633f9d2e6f444a9bddaabf6e\nimport { useContext, useRef } from \"react\";\n\nimport { DescendantContext } from \"./DescendantContext\";\n\nexport function useDescendant(descendant: Record<string, any>): number {\n  const { assigning, setItems } = useContext(DescendantContext);\n  const index = useRef(-1);\n\n  useIsomorphicLayoutEffect(() => {\n    if (assigning?.current && setItems) {\n      setItems((old) => {\n        index.current = old.length;\n        return old.concat(descendant);\n      });\n    }\n  });\n\n  // first render its wrong, after a forceUpdate in parent useIsomorphicLayoutEffect it's\n  // right, and its all synchronous so we don't get any flashing\n  return index.current;\n}\n"],"names":["useContext","DescendantContext","useRef","useIsomorphicLayoutEffect"],"mappings":";;;;;;AAMO,SAAS,cAAc,UAAyC,EAAA;AACrE,EAAA,MAAM,EAAE,SAAA,EAAW,QAAS,EAAA,GAAIA,iBAAWC,mCAAiB,CAAA;AAC5D,EAAM,MAAA,KAAA,GAAQC,aAAO,CAAE,CAAA,CAAA;AAEvB,EAAAC,8BAAA,CAA0B,MAAM;AAC9B,IAAI,IAAA,CAAA,SAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,SAAA,CAAW,YAAW,QAAU,EAAA;AAClC,MAAA,QAAA,CAAS,CAAC,GAAQ,KAAA;AAChB,QAAA,KAAA,CAAM,UAAU,GAAI,CAAA,MAAA;AACpB,QAAO,OAAA,GAAA,CAAI,OAAO,UAAU,CAAA;AAAA,OAC7B,CAAA;AAAA;AACH,GACD,CAAA;AAID,EAAA,OAAO,KAAM,CAAA,OAAA;AACf;;;;"}
+{"version":3,"file":"useDescendant.js","sources":["../src/button-bar/internal/useDescendant.ts"],"sourcesContent":["import { useIsomorphicLayoutEffect } from \"@salt-ds/core\";\n// Copied from https://gist.github.com/ryanflorence/10e9387f633f9d2e6f444a9bddaabf6e\nimport { useContext, useRef } from \"react\";\n\nimport { DescendantContext } from \"./DescendantContext\";\n\nexport function useDescendant(descendant: Record<string, any>): number {\n  const { assigning, setItems } = useContext(DescendantContext);\n  const index = useRef(-1);\n\n  useIsomorphicLayoutEffect(() => {\n    if (assigning?.current && setItems) {\n      setItems((old) => {\n        index.current = old.length;\n        return old.concat(descendant);\n      });\n    }\n  });\n\n  // first render its wrong, after a forceUpdate in parent useIsomorphicLayoutEffect it's\n  // right, and its all synchronous so we don't get any flashing\n  return index.current;\n}\n"],"names":["useContext","DescendantContext","useRef","useIsomorphicLayoutEffect"],"mappings":";;;;;;AAMO,SAAS,cAAc,UAAyC,EAAA;AACrE,EAAA,MAAM,EAAE,SAAA,EAAW,QAAS,EAAA,GAAIA,iBAAWC,mCAAiB,CAAA;AAC5D,EAAM,MAAA,KAAA,GAAQC,aAAO,EAAE,CAAA;AAEvB,EAAAC,8BAAA,CAA0B,MAAM;AAC9B,IAAI,IAAA,CAAA,SAAA,IAAA,IAAA,GAAA,MAAA,GAAA,SAAA,CAAW,YAAW,QAAU,EAAA;AAClC,MAAA,QAAA,CAAS,CAAC,GAAQ,KAAA;AAChB,QAAA,KAAA,CAAM,UAAU,GAAI,CAAA,MAAA;AACpB,QAAO,OAAA,GAAA,CAAI,OAAO,UAAU,CAAA;AAAA,OAC7B,CAAA;AAAA;AACH,GACD,CAAA;AAID,EAAA,OAAO,KAAM,CAAA,OAAA;AACf;;;;"}

package/dist-cjs/calendar/Calendar.js

@@ -28,20 +28,34 @@ const Calendar = react.forwardRef(
       defaultSelectedDate,
       visibleMonth: visibleMonthProp,
       defaultVisibleMonth,
+      onFocusedDateChange,
       onSelectionChange,
       onVisibleMonthChange,
       hideOutOfRangeDates,
+      focusedDate,
+      focusedDateRef,
       isDayUnselectable,
       isDayHighlighted,
       isDayDisabled,
-      locale,
       minDate,
       maxDate,
+      numberOfVisibleMonths = 1,
       selectionVariant,
       onHoveredDateChange,
       hoveredDate,
+      timezone: timezoneProp,
       ...propsRest
     } = props;
+    let timezone = "default";
+    if (timezoneProp) {
+      timezone = timezoneProp;
+    } else if (selectionVariant === "range") {
+      const defaultRangeTimezoneDate = (selectedDate == null ? void 0 : selectedDate.startDate) ?? (selectedDate == null ? void 0 : selectedDate.endDate) ?? (defaultSelectedDate == null ? void 0 : defaultSelectedDate.startDate) ?? (defaultSelectedDate == null ? void 0 : defaultSelectedDate.endDate);
+      timezone = defaultRangeTimezoneDate ? dateAdapter.getTimezone(defaultRangeTimezoneDate) : "default";
+    } else if (selectionVariant === "single") {
+      const defaultSingleTimezoneDate = selectedDate ?? defaultSelectedDate;
+      timezone = defaultSingleTimezoneDate ? dateAdapter.getTimezone(defaultSingleTimezoneDate) : "default";
+    }
     let startDateOffset;
     let endDateOffset;
     let rest;
@@ -50,6 +64,7 @@ const Calendar = react.forwardRef(
     } else {
       rest = propsRest;
     }
+    const defaultFocusedDateRef = react.useRef(null);
     const useCalendarProps = {
       selectedDate,
       defaultSelectedDate,
@@ -57,25 +72,25 @@ const Calendar = react.forwardRef(
       defaultVisibleMonth,
       onSelectionChange,
       onVisibleMonthChange,
+      focusedDate,
+      focusedDateRef: focusedDateRef !== void 0 ? focusedDateRef : defaultFocusedDateRef,
       isDayUnselectable,
       isDayHighlighted,
       isDayDisabled,
-      locale,
       minDate,
       maxDate,
+      numberOfVisibleMonths,
       selectionVariant,
+      onFocusedDateChange,
       onHoveredDateChange,
       hideOutOfRangeDates,
       hoveredDate,
       startDateOffset,
-      endDateOffset
+      endDateOffset,
+      timezone
     };
     const { state, helpers } = useCalendar.useCalendar(useCalendarProps);
-    const calendarLabel = dateAdapter.format(
-      state.visibleMonth,
-      "MMMM YYYY",
-      locale
-    );
+    const calendarLabel = dateAdapter.format(state.visibleMonth, "MMMM YYYY");
     return /* @__PURE__ */ jsxRuntime.jsx(
       CalendarContext.CalendarContext.Provider,
       {