@salt-ds/lab 1.0.0-alpha.55 → 1.0.0-alpha.57

package/CHANGELOG.md

@@ -1,5 +1,172 @@
 # @salt-ds/lab
 
+## 1.0.0-alpha.57
+
+### Patch Changes
+
+- f3ae565: Fixed `format` not working on `DatePickerRangeInput`. Closes #4474.
+
+## 1.0.0-alpha.56
+
+### Minor Changes
+
+- e7b0406: Added `OverlayHeader` component to lab.
+
+  ```tsx
+  <Overlay {...args}>
+    <OverlayTrigger>
+      <Button>Show Overlay</Button>
+    </OverlayTrigger>
+    <OverlayPanel aria-labelledby={id}>
+      <OverlayHeader
+        id={id}
+        header="Title"
+        actions={
+          <Button
+            aria-label="Close overlay"
+            appearance="transparent"
+            sentiment="neutral"
+          >
+            <CloseIcon aria-hidden />
+          </Button>
+        }
+      />
+      <OverlayPanelContent>Content of Overlay</OverlayPanelContent>
+    </OverlayPanel>
+  </Overlay>
+  ```
+
+### Patch Changes
+
+- b272497: DatePicker, DateInput, Calendar Lab updates
+
+  We are excited to introduce a new Salt package, `@salt-ds/date-adapters`, currently in pre-release/lab status to gather your valuable feedback.
+
+  This package includes supported adapters for Salt's date-based controls:
+
+  - `AdapterDateFns` for [date-fns](https://date-fns.org/)
+  - `AdapterDayjs` for [dayjs](https://day.js.org/)
+  - `AdapterLuxon` for [luxon](https://moment.github.io/luxon/)
+  - `AdapterMoment` (legacy) for [moment](https://momentjs.com/)
+
+  > **Note:** As `moment` is no longer actively maintained by its creators, `AdapterMoment` is published in a deprecated form to assist in transitioning to a newer date framework.
+
+  Salt adapters are integrated with a new `LocalizationProvider`, enabling a date-based API accessible through `useLocalization`. Typically, you only need to add one `LocalizationProvider` per application, although they can be nested if necessary.
+
+  `@salt-ds/adapters` uses peer dependencies for the supported date libraries. It is the responsibility of the application author to include the required dependencies in their build. Additionally, the application author is responsible for configuring the date libraries, including any necessary extensions or loading dependencies for supported locales.
+
+  **Example Usage**
+
+  An app that renders a Salt date-based control may look like this:
+
+  ```jsx
+  import { AdapterDateFns } from "@salt-ds/date-adapters";
+  import {
+    Calendar,
+    CalendarNavigation,
+    CalendarWeekHeader,
+    CalendarGrid,
+    LocalizationProvider,
+  } from "@salt-ds/lab";
+
+  const MyApp = () => (
+    <SaltProvider density="high" mode="light">
+      <LocalizationProvider DateAdapter={AdapterDateFns}>
+        <Calendar selectionVariant="single">
+          <CalendarNavigation />
+          <CalendarWeekHeader />
+          <CalendarGrid />
+        </Calendar>
+      </LocalizationProvider>
+    </SaltProvider>
+  );
+  ```
+
+  A `DateInput` within an app that uses `LocalizationProvider` might be implemented as follows:
+
+  ```jsx
+  const MyDateInput = () => {
+    const { dateAdapter } = useLocalization();
+
+    function handleDateChange<TDate extends DateFrameworkType>(
+      event: SyntheticEvent,
+      date: TDate | null,
+      details: DateInputSingleDetails
+    ) {
+      console.log(
+        `Selected date: ${dateAdapter.isValid(date) ? dateAdapter.format(date, "DD MMM YYYY") : date}`
+      );
+
+      const { value, errors } = details;
+      if (errors?.length && value) {
+        console.log(
+          `Error(s): ${errors
+            .map(({ type, message }) => `type=${type} message=${message}`)
+            .join(", ")}`
+        );
+        console.log(`Original Value: ${value}`);
+      }
+    }
+
+    return <DateInputSingle onDateChange={handleDateChange} />;
+  };
+  ```
+
+  A `DatePicker` within an app that uses `LocalizationProvider` might be implemented as follows:
+
+  ```jsx
+  const MyDatePicker = () => {
+    const { dateAdapter } = useLocalization();
+    const handleSelectionChange = useCallback(
+      (
+        event: SyntheticEvent,
+        date: SingleDateSelection<DateFrameworkType> | null,
+        details: DateInputSingleDetails | undefined,
+      ) => {
+        const { value, errors } = details || {};
+        console.log(
+          `Selected date: ${dateAdapter.isValid(date) ? dateAdapter.format(date, "DD MMM YYYY") : date}`
+        );
+        if (errors?.length && value) {
+          console.log(
+            `Error(s): ${errors
+              .map(({ type, message }) => `type=${type} message=${message}`)
+              .join(", ")}`
+          );
+          console.log(`Original Value: ${value}`);
+        }
+      },
+    );
+
+    return (
+      <DatePicker
+        selectionVariant="single"
+        onSelectionChange={handleSelectionChange}
+      >
+        <DatePickerTrigger>
+          <DatePickerSingleInput />
+        </DatePickerTrigger>
+        <DatePickerOverlay>
+          <DatePickerSinglePanel />
+        </DatePickerOverlay>
+      </DatePicker>
+    );
+  };
+  ```
+
+  In addition to configuring adapters, `LocalizationProvider` offers props to define locale and fallback min/max dates for all date-based controls.
+
+  Additional date adapters can be added , as long as they conform to the `SaltDateAdapter` interface.
+
+  For more detailed examples, please refer to the documentation for `DateInput`, `Calendar`, and `DatePicker`.
+
+- 33c8da5: Fix system status icons in content from using the component styles override
+- Updated dependencies [5cf214c]
+- Updated dependencies [bae6882]
+- Updated dependencies [b272497]
+  - @salt-ds/core@1.37.3
+  - @salt-ds/date-adapters@0.1.0
+
 ## 1.0.0-alpha.55
 
 ### Minor Changes

package/css/salt-lab.css

@@ -199,17 +199,17 @@
   padding: var(--salt-spacing-100);
 }
 
-/* src/calendar/CalendarDateGrid.css */
-.saltCalendarDateGrid-grid {
+/* src/calendar/CalendarGrid.css */
+.saltCalendarGrid-grid {
   display: grid;
   grid-auto-flow: column;
 }
-.saltCalendarDateGrid-grid > * {
+.saltCalendarGrid-grid > * {
   position: absolute;
   left: 0;
   width: 100%;
 }
-.saltCalendarDateGrid-grid > :nth-child(2) {
+.saltCalendarGrid-grid > :nth-child(2) {
   position: relative;
 }
 
@@ -1021,6 +1021,12 @@
   cursor: var(--salt-editable-cursor-disabled);
   color: var(--saltDateInput-color-disabled, var(--salt-content-primary-foreground-disabled));
 }
+.saltInput-startAdornmentContainer {
+  align-items: center;
+  display: inline-flex;
+  padding-right: var(--salt-spacing-100);
+  column-gap: var(--salt-spacing-100);
+}
 .saltDateInput-endAdornmentContainer {
   display: inline-flex;
   padding-left: var(--salt-spacing-100);
@@ -2385,6 +2391,34 @@
   align-items: flex-end;
 }
 
+/* src/overlay/OverlayHeader.css */
+.saltOverlayHeader {
+  padding: var(--salt-spacing-100);
+  width: 100%;
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  justify-content: stretch;
+  gap: var(--salt-spacing-100);
+  box-sizing: border-box;
+}
+.saltOverlayHeader-container {
+  flex-grow: 1;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--salt-spacing-50);
+}
+.saltOverlayHeader-header > .saltText {
+  margin: 0;
+}
+.saltOverlayHeader-actionsContainer {
+  align-self: flex-start;
+}
+.saltOverlayHeader ~ .saltOverlayPanelContent {
+  padding-top: 0;
+}
+
 /* src/query-input/QueryInput.css */
 .saltQueryInputBody {
   display: flex;
@@ -2931,7 +2965,6 @@
 
 /* src/system-status/SystemStatus.css */
 .saltSystemStatus {
-  --saltIcon-color: var(--salt-content-bold-foreground);
   background: var(--saltSystemStatus-background, var(--systemStatus-background));
   border-color: var(--saltSystemStatus-borderColor, var(--systemStatus-borderColor));
   border-width: var(--saltSystemStatus-borderWidth, var(--salt-size-border));
@@ -2949,6 +2982,7 @@
 }
 .saltSystemStatus-icon.saltIcon {
   min-height: var(--salt-size-base);
+  --saltIcon-color: var(--salt-content-bold-foreground);
 }
 .saltSystemStatus-info {
   --systemStatus-borderColor: var(--salt-status-info-bold-background);
@@ -3335,6 +3369,9 @@
 .saltTabListNext-activeColorTertiary {
   --saltTabListNext-activeColor: var(--salt-container-tertiary-background);
 }
+.saltTabListNext-overflowWarning {
+  display: none;
+}
 
 /* src/tabs-next/TabNext.css */
 .saltTabNext {
@@ -4321,7 +4358,7 @@
 }
 
 /* src/calendar/internal/CalendarMonth.css */
-.saltCalendarMonth-dateGrid {
+.saltCalendarMonth-grid {
   display: grid;
   gap: var(--salt-size-border);
   grid-template-columns: repeat(7, var(--salt-size-base));
@@ -4532,4 +4569,4 @@
   margin: calc(var(--salt-size-unit) / 2) 0;
 }
 
-/* src/af7c52bf-6cbd-4d27-940f-b761495ee395.css */
+/* src/ed092e1f-b9df-46b0-8077-975db17781fb.css */

package/dist-cjs/calendar/Calendar.js

@@ -8,13 +8,14 @@ var CalendarContext = require('./internal/CalendarContext.js');
 var useCalendar = require('./useCalendar.js');
 var styles = require('@salt-ds/styles');
 var window = require('@salt-ds/window');
-var date = require('@internationalized/date');
+var LocalizationProvider = require('../localization-provider/LocalizationProvider.js');
 var Calendar$1 = require('./Calendar.css.js');
 
 const withBaseName = core.makePrefixer("saltCalendar");
 const Calendar = react.forwardRef(
-  function Calendar2(props, ref) {
+  (props, ref) => {
     const targetWindow = window.useWindow();
+    const { dateAdapter } = LocalizationProvider.useLocalization();
     styles.useComponentCssInjection({
       testId: "salt-calendar",
       css: Calendar$1,
@@ -26,15 +27,14 @@ const Calendar = react.forwardRef(
       selectedDate,
       defaultSelectedDate,
       visibleMonth: visibleMonthProp,
-      timeZone,
-      locale,
       defaultVisibleMonth,
-      onSelectedDateChange,
+      onSelectionChange,
       onVisibleMonthChange,
       hideOutOfRangeDates,
       isDayUnselectable,
       isDayHighlighted,
       isDayDisabled,
+      locale,
       minDate,
       maxDate,
       selectionVariant,
@@ -54,14 +54,13 @@ const Calendar = react.forwardRef(
       selectedDate,
       defaultSelectedDate,
       visibleMonth: visibleMonthProp,
-      timeZone,
-      locale,
       defaultVisibleMonth,
-      onSelectedDateChange,
+      onSelectionChange,
       onVisibleMonthChange,
       isDayUnselectable,
       isDayHighlighted,
       isDayDisabled,
+      locale,
       minDate,
       maxDate,
       selectionVariant,
@@ -72,10 +71,11 @@ const Calendar = react.forwardRef(
       endDateOffset
     };
     const { state, helpers } = useCalendar.useCalendar(useCalendarProps);
-    const calendarLabel = new date.DateFormatter(state.locale, {
-      month: "long",
-      year: "numeric"
-    }).format(state.visibleMonth.toDate(state.timeZone));
+    const calendarLabel = dateAdapter.format(
+      state.visibleMonth,
+      "MMMM YYYY",
+      locale
+    );
     return /* @__PURE__ */ jsxRuntime.jsx(
       CalendarContext.CalendarContext.Provider,
       {

package/dist-cjs/calendar/Calendar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Calendar.js","sources":["../src/calendar/Calendar.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type ReactNode,\n  forwardRef,\n} from \"react\";\nimport { CalendarContext } from \"./internal/CalendarContext\";\nimport {\n  type UseCalendarMultiSelectProps,\n  type UseCalendarOffsetProps,\n  type UseCalendarRangeProps,\n  type UseCalendarSingleProps,\n  useCalendar,\n} from \"./useCalendar\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport { DateFormatter } from \"@internationalized/date\";\nimport calendarCss from \"./Calendar.css\";\n\n/**\n * Base props for the Calendar component.\n */\nexport interface CalendarBaseProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * The content to be rendered inside the Calendar.\n   */\n  children: ReactNode;\n  /**\n   * If `true`, hides dates that are out of the selectable range.\n   */\n  hideOutOfRangeDates?: boolean;\n}\n\n/**\n * Props for the Calendar component with single date selection.\n */\nexport interface CalendarSingleProps\n  extends CalendarBaseProps,\n    UseCalendarSingleProps {\n  /**\n   * The selection variant, set to \"single\".\n   */\n  selectionVariant: \"single\";\n}\n\n/**\n * Props for the Calendar component with date range selection.\n */\nexport interface CalendarRangeProps\n  extends CalendarBaseProps,\n    UseCalendarRangeProps {\n  /**\n   * The selection variant, set to \"range\".\n   */\n  selectionVariant: \"range\";\n}\n\n/**\n * Props for the Calendar component with multi-select date selection.\n */\nexport interface CalendarMultiSelectProps\n  extends CalendarBaseProps,\n    UseCalendarMultiSelectProps {\n  /**\n   * The selection variant, set to \"multiselect\".\n   */\n  selectionVariant: \"multiselect\";\n}\n\n/**\n * Props for the Calendar component with offset date selection.\n */\nexport interface CalendarOffsetProps\n  extends CalendarBaseProps,\n    UseCalendarOffsetProps {\n  /**\n   * The selection variant, set to \"offset\".\n   */\n  selectionVariant: \"offset\";\n}\n\n/**\n * Type representing the props for the Calendar component with various selection variants.\n */\nexport type CalendarProps =\n  | CalendarSingleProps\n  | CalendarRangeProps\n  | CalendarMultiSelectProps\n  | CalendarOffsetProps;\n\nconst withBaseName = makePrefixer(\"saltCalendar\");\n\nexport const Calendar = forwardRef<HTMLDivElement, CalendarProps>(\n  function Calendar(props, ref) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-calendar\",\n      css: calendarCss,\n      window: targetWindow,\n    });\n    const {\n      children,\n      className,\n      selectedDate,\n      defaultSelectedDate,\n      visibleMonth: visibleMonthProp,\n      timeZone,\n      locale,\n      defaultVisibleMonth,\n      onSelectedDateChange,\n      onVisibleMonthChange,\n      hideOutOfRangeDates,\n      isDayUnselectable,\n      isDayHighlighted,\n      isDayDisabled,\n      minDate,\n      maxDate,\n      selectionVariant,\n      onHoveredDateChange,\n      hoveredDate,\n      ...propsRest\n    } = props;\n    let startDateOffset: CalendarOffsetProps[\"startDateOffset\"];\n    let endDateOffset: CalendarOffsetProps[\"startDateOffset\"];\n    let rest: Partial<typeof props>;\n    if (selectionVariant === \"offset\") {\n      ({ startDateOffset, endDateOffset, ...rest } =\n        propsRest as CalendarOffsetProps);\n    } else {\n      rest = propsRest;\n    }\n    // biome-ignore lint/suspicious/noExplicitAny: type guard\n    const useCalendarProps: any = {\n      selectedDate,\n      defaultSelectedDate,\n      visibleMonth: visibleMonthProp,\n      timeZone,\n      locale,\n      defaultVisibleMonth,\n      onSelectedDateChange,\n      onVisibleMonthChange,\n      isDayUnselectable,\n      isDayHighlighted,\n      isDayDisabled,\n      minDate,\n      maxDate,\n      selectionVariant,\n      onHoveredDateChange,\n      hideOutOfRangeDates,\n      hoveredDate,\n      startDateOffset,\n      endDateOffset,\n    };\n    const { state, helpers } = useCalendar(useCalendarProps);\n    const calendarLabel = new DateFormatter(state.locale, {\n      month: \"long\",\n      year: \"numeric\",\n    }).format(state.visibleMonth.toDate(state.timeZone));\n\n    return (\n      <CalendarContext.Provider\n        value={{\n          state,\n          helpers,\n        }}\n      >\n        <div\n          className={clsx(withBaseName(), className)}\n          role=\"application\"\n          aria-label={calendarLabel}\n          ref={ref}\n          {...rest}\n        >\n          {children}\n        </div>\n      </CalendarContext.Provider>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","Calendar","useWindow","useComponentCssInjection","calendarCss","useCalendar","DateFormatter","jsx","CalendarContext","clsx"],"mappings":";;;;;;;;;;;;;AA6FA,MAAM,YAAA,GAAeA,kBAAa,cAAc,CAAA;AAEzC,MAAM,QAAW,GAAAC,gBAAA;AAAA,EACtB,SAASC,SAAS,CAAA,KAAA,EAAO,GAAK,EAAA;AAC5B,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,eAAA;AAAA,MACR,GAAK,EAAAC,UAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AACD,IAAM,MAAA;AAAA,MACJ,QAAA;AAAA,MACA,SAAA;AAAA,MACA,YAAA;AAAA,MACA,mBAAA;AAAA,MACA,YAAc,EAAA,gBAAA;AAAA,MACd,QAAA;AAAA,MACA,MAAA;AAAA,MACA,mBAAA;AAAA,MACA,oBAAA;AAAA,MACA,oBAAA;AAAA,MACA,mBAAA;AAAA,MACA,iBAAA;AAAA,MACA,gBAAA;AAAA,MACA,aAAA;AAAA,MACA,OAAA;AAAA,MACA,OAAA;AAAA,MACA,gBAAA;AAAA,MACA,mBAAA;AAAA,MACA,WAAA;AAAA,MACA,GAAG;AAAA,KACD,GAAA,KAAA;AACJ,IAAI,IAAA,eAAA;AACJ,IAAI,IAAA,aAAA;AACJ,IAAI,IAAA,IAAA;AACJ,IAAA,IAAI,qBAAqB,QAAU,EAAA;AACjC,MAAA,CAAC,EAAE,eAAA,EAAiB,aAAe,EAAA,GAAG,MACpC,GAAA,SAAA;AAAA,KACG,MAAA;AACL,MAAO,IAAA,GAAA,SAAA;AAAA;AAGT,IAAA,MAAM,gBAAwB,GAAA;AAAA,MAC5B,YAAA;AAAA,MACA,mBAAA;AAAA,MACA,YAAc,EAAA,gBAAA;AAAA,MACd,QAAA;AAAA,MACA,MAAA;AAAA,MACA,mBAAA;AAAA,MACA,oBAAA;AAAA,MACA,oBAAA;AAAA,MACA,iBAAA;AAAA,MACA,gBAAA;AAAA,MACA,aAAA;AAAA,MACA,OAAA;AAAA,MACA,OAAA;AAAA,MACA,gBAAA;AAAA,MACA,mBAAA;AAAA,MACA,mBAAA;AAAA,MACA,WAAA;AAAA,MACA,eAAA;AAAA,MACA;AAAA,KACF;AACA,IAAA,MAAM,EAAE,KAAA,EAAO,OAAQ,EAAA,GAAIC,wBAAY,gBAAgB,CAAA;AACvD,IAAA,MAAM,aAAgB,GAAA,IAAIC,kBAAc,CAAA,KAAA,CAAM,MAAQ,EAAA;AAAA,MACpD,KAAO,EAAA,MAAA;AAAA,MACP,IAAM,EAAA;AAAA,KACP,EAAE,MAAO,CAAA,KAAA,CAAM,aAAa,MAAO,CAAA,KAAA,CAAM,QAAQ,CAAC,CAAA;AAEnD,IACE,uBAAAC,cAAA;AAAA,MAACC,+BAAgB,CAAA,QAAA;AAAA,MAAhB;AAAA,QACC,KAAO,EAAA;AAAA,UACL,KAAA;AAAA,UACA;AAAA,SACF;AAAA,QAEA,QAAA,kBAAAD,cAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAW,EAAAE,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,YACzC,IAAK,EAAA,aAAA;AAAA,YACL,YAAY,EAAA,aAAA;AAAA,YACZ,GAAA;AAAA,YACC,GAAG,IAAA;AAAA,YAEH;AAAA;AAAA;AACH;AAAA,KACF;AAAA;AAGN;;;;"}
+{"version":3,"file":"Calendar.js","sources":["../src/calendar/Calendar.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type ReactNode,\n  forwardRef,\n} from \"react\";\nimport { CalendarContext } from \"./internal/CalendarContext\";\nimport {\n  type UseCalendarMultiSelectProps,\n  type UseCalendarOffsetProps,\n  type UseCalendarRangeProps,\n  type UseCalendarSingleProps,\n  useCalendar,\n} from \"./useCalendar\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport type { DateFrameworkType } from \"@salt-ds/date-adapters\";\nimport { useLocalization } from \"../localization-provider\";\nimport calendarCss from \"./Calendar.css\";\n\n/**\n * Base props for the Calendar component.\n */\nexport interface CalendarBaseProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * The content to be rendered inside the Calendar.\n   */\n  children: ReactNode;\n  /**\n   * If `true`, hides dates that are out of the selectable range.\n   */\n  hideOutOfRangeDates?: boolean;\n  /**\n   * Locale for date formatting\n   */\n  locale?: any;\n}\n\n/**\n * Props for the Calendar component with single date selection.\n */\nexport interface CalendarSingleProps<TDate extends DateFrameworkType>\n  extends CalendarBaseProps,\n    UseCalendarSingleProps<TDate> {\n  /**\n   * The selection variant, set to \"single\".\n   */\n  selectionVariant: \"single\";\n}\n\n/**\n * Props for the Calendar component with date range selection.\n */\nexport interface CalendarRangeProps<TDate extends DateFrameworkType>\n  extends CalendarBaseProps,\n    UseCalendarRangeProps<TDate> {\n  /**\n   * The selection variant, set to \"range\".\n   */\n  selectionVariant: \"range\";\n}\n\n/**\n * Props for the Calendar component with multi-select date selection.\n */\nexport interface CalendarMultiSelectProps<TDate extends DateFrameworkType>\n  extends CalendarBaseProps,\n    UseCalendarMultiSelectProps<TDate> {\n  /**\n   * The selection variant, set to \"multiselect\".\n   */\n  selectionVariant: \"multiselect\";\n}\n\n/**\n * Props for the Calendar component with offset date selection.\n */\nexport interface CalendarOffsetProps<TDate extends DateFrameworkType>\n  extends CalendarBaseProps,\n    UseCalendarOffsetProps<TDate> {\n  /**\n   * The selection variant, set to \"offset\".\n   */\n  selectionVariant: \"offset\";\n}\n\n/**\n * Type representing the props for the Calendar component with various selection variants.\n */\nexport type CalendarProps<TDate extends DateFrameworkType> =\n  | CalendarSingleProps<TDate>\n  | CalendarRangeProps<TDate>\n  | CalendarMultiSelectProps<TDate>\n  | CalendarOffsetProps<TDate>;\n\nconst withBaseName = makePrefixer(\"saltCalendar\");\n\nexport const Calendar = forwardRef<HTMLDivElement, CalendarProps<any>>(\n  <TDate extends DateFrameworkType>(\n    props: CalendarProps<TDate>,\n    ref: React.Ref<HTMLDivElement>,\n  ) => {\n    const targetWindow = useWindow();\n    const { dateAdapter } = useLocalization<TDate>();\n    useComponentCssInjection({\n      testId: \"salt-calendar\",\n      css: calendarCss,\n      window: targetWindow,\n    });\n    const {\n      children,\n      className,\n      selectedDate,\n      defaultSelectedDate,\n      visibleMonth: visibleMonthProp,\n      defaultVisibleMonth,\n      onSelectionChange,\n      onVisibleMonthChange,\n      hideOutOfRangeDates,\n      isDayUnselectable,\n      isDayHighlighted,\n      isDayDisabled,\n      locale,\n      minDate,\n      maxDate,\n      selectionVariant,\n      onHoveredDateChange,\n      hoveredDate,\n      ...propsRest\n    } = props;\n    let startDateOffset: CalendarOffsetProps<TDate>[\"startDateOffset\"];\n    let endDateOffset: CalendarOffsetProps<TDate>[\"startDateOffset\"];\n    let rest: Partial<typeof props>;\n    if (selectionVariant === \"offset\") {\n      ({ startDateOffset, endDateOffset, ...rest } =\n        propsRest as CalendarOffsetProps<TDate>);\n    } else {\n      rest = propsRest;\n    }\n    // biome-ignore lint/suspicious/noExplicitAny: type guard\n    const useCalendarProps: any = {\n      selectedDate,\n      defaultSelectedDate,\n      visibleMonth: visibleMonthProp,\n      defaultVisibleMonth,\n      onSelectionChange,\n      onVisibleMonthChange,\n      isDayUnselectable,\n      isDayHighlighted,\n      isDayDisabled,\n      locale,\n      minDate,\n      maxDate,\n      selectionVariant,\n      onHoveredDateChange,\n      hideOutOfRangeDates,\n      hoveredDate,\n      startDateOffset,\n      endDateOffset,\n    };\n    const { state, helpers } = useCalendar<TDate>(useCalendarProps);\n    const calendarLabel = dateAdapter.format(\n      state.visibleMonth,\n      \"MMMM YYYY\",\n      locale,\n    );\n\n    return (\n      <CalendarContext.Provider\n        value={{\n          state,\n          helpers,\n        }}\n      >\n        <div\n          className={clsx(withBaseName(), className)}\n          role=\"application\"\n          aria-label={calendarLabel}\n          ref={ref}\n          {...rest}\n        >\n          {children}\n        </div>\n      </CalendarContext.Provider>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","useWindow","useLocalization","useComponentCssInjection","calendarCss","useCalendar","jsx","CalendarContext","clsx"],"mappings":";;;;;;;;;;;;;AAkGA,MAAM,YAAA,GAAeA,kBAAa,cAAc,CAAA;AAEzC,MAAM,QAAW,GAAAC,gBAAA;AAAA,EACtB,CACE,OACA,GACG,KAAA;AACH,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAM,MAAA,EAAE,WAAY,EAAA,GAAIC,oCAAuB,EAAA;AAC/C,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,eAAA;AAAA,MACR,GAAK,EAAAC,UAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AACD,IAAM,MAAA;AAAA,MACJ,QAAA;AAAA,MACA,SAAA;AAAA,MACA,YAAA;AAAA,MACA,mBAAA;AAAA,MACA,YAAc,EAAA,gBAAA;AAAA,MACd,mBAAA;AAAA,MACA,iBAAA;AAAA,MACA,oBAAA;AAAA,MACA,mBAAA;AAAA,MACA,iBAAA;AAAA,MACA,gBAAA;AAAA,MACA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,OAAA;AAAA,MACA,OAAA;AAAA,MACA,gBAAA;AAAA,MACA,mBAAA;AAAA,MACA,WAAA;AAAA,MACA,GAAG;AAAA,KACD,GAAA,KAAA;AACJ,IAAI,IAAA,eAAA;AACJ,IAAI,IAAA,aAAA;AACJ,IAAI,IAAA,IAAA;AACJ,IAAA,IAAI,qBAAqB,QAAU,EAAA;AACjC,MAAA,CAAC,EAAE,eAAA,EAAiB,aAAe,EAAA,GAAG,MACpC,GAAA,SAAA;AAAA,KACG,MAAA;AACL,MAAO,IAAA,GAAA,SAAA;AAAA;AAGT,IAAA,MAAM,gBAAwB,GAAA;AAAA,MAC5B,YAAA;AAAA,MACA,mBAAA;AAAA,MACA,YAAc,EAAA,gBAAA;AAAA,MACd,mBAAA;AAAA,MACA,iBAAA;AAAA,MACA,oBAAA;AAAA,MACA,iBAAA;AAAA,MACA,gBAAA;AAAA,MACA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,OAAA;AAAA,MACA,OAAA;AAAA,MACA,gBAAA;AAAA,MACA,mBAAA;AAAA,MACA,mBAAA;AAAA,MACA,WAAA;AAAA,MACA,eAAA;AAAA,MACA;AAAA,KACF;AACA,IAAA,MAAM,EAAE,KAAA,EAAO,OAAQ,EAAA,GAAIC,wBAAmB,gBAAgB,CAAA;AAC9D,IAAA,MAAM,gBAAgB,WAAY,CAAA,MAAA;AAAA,MAChC,KAAM,CAAA,YAAA;AAAA,MACN,WAAA;AAAA,MACA;AAAA,KACF;AAEA,IACE,uBAAAC,cAAA;AAAA,MAACC,+BAAgB,CAAA,QAAA;AAAA,MAAhB;AAAA,QACC,KAAO,EAAA;AAAA,UACL,KAAA;AAAA,UACA;AAAA,SACF;AAAA,QAEA,QAAA,kBAAAD,cAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAW,EAAAE,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,YACzC,IAAK,EAAA,aAAA;AAAA,YACL,YAAY,EAAA,aAAA;AAAA,YACZ,GAAA;AAAA,YACC,GAAG,IAAA;AAAA,YAEH;AAAA;AAAA;AACH;AAAA,KACF;AAAA;AAGN;;;;"}

package/dist-cjs/calendar/CalendarGrid.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = ".saltCalendarGrid-grid {\n  display: grid;\n  grid-auto-flow: column;\n}\n\n.saltCalendarGrid-grid > * {\n  position: absolute;\n  left: 0;\n  width: 100%;\n}\n\n.saltCalendarGrid-grid > :nth-child(2) {\n  position: relative;\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=CalendarGrid.css.js.map

package/dist-cjs/calendar/CalendarGrid.css.js.map

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

package/dist-cjs/calendar/CalendarGrid.js

@@ -0,0 +1,107 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@salt-ds/core');
+var react = require('react');
+var CalendarContext = require('./internal/CalendarContext.js');
+var CalendarMonth = require('./internal/CalendarMonth.js');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var LocalizationProvider = require('../localization-provider/LocalizationProvider.js');
+var CalendarGrid$1 = require('./CalendarGrid.css.js');
+var utils = require('./internal/utils.js');
+
+const withBaseName = core.makePrefixer("saltCalendarGrid");
+const CalendarGrid = react.forwardRef(
+  (props, ref) => {
+    const {
+      onFocus,
+      onBlur,
+      getCalendarMonthProps = () => void 0,
+      ...rest
+    } = props;
+    const { dateAdapter } = LocalizationProvider.useLocalization();
+    const targetWindow = window.useWindow();
+    styles.useComponentCssInjection({
+      testId: "salt-calendar-grid",
+      css: CalendarGrid$1,
+      window: targetWindow
+    });
+    const {
+      state: { visibleMonth, locale },
+      helpers: { setCalendarFocused }
+    } = CalendarContext.useCalendarContext();
+    const containerRef = react.useRef(null);
+    const diffIndex = (a, b) => utils.monthDiff(dateAdapter, a, b);
+    const { current: baseIndex } = react.useRef(visibleMonth);
+    core.useIsomorphicLayoutEffect(() => {
+      if (containerRef.current) {
+        containerRef.current.style.transform = `translate3d(${diffIndex(baseIndex, visibleMonth) * -101}%, 0, 0)`;
+      }
+    });
+    const getMonths = react.useCallback(
+      (month) => {
+        return [
+          dateAdapter.subtract(month, { months: 1 }),
+          month,
+          dateAdapter.add(month, { months: 1 })
+        ];
+      },
+      [dateAdapter.subtract]
+    );
+    const handleFocus = react.useCallback(
+      (event) => {
+        setCalendarFocused(true);
+        onFocus == null ? void 0 : onFocus(event);
+      },
+      [setCalendarFocused, onFocus]
+    );
+    const handleBlur = react.useCallback(
+      (event) => {
+        setCalendarFocused(false);
+        onBlur == null ? void 0 : onBlur(event);
+      },
+      [setCalendarFocused, onBlur]
+    );
+    const months = react.useMemo(() => {
+      return getMonths(visibleMonth);
+    }, [dateAdapter.format(visibleMonth)]);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: withBaseName(),
+        tabIndex: -1,
+        style: {
+          overflowX: "hidden",
+          position: "relative"
+        },
+        ref,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: withBaseName("grid"),
+            ref: containerRef,
+            onBlur: handleBlur,
+            onFocus: handleFocus,
+            ...rest,
+            children: months.map((date, index) => /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: withBaseName("slide"),
+                style: {
+                  transform: `translateX(${diffIndex(date, baseIndex) * -101}%)`
+                },
+                "aria-hidden": index !== 1 ? "true" : void 0,
+                children: /* @__PURE__ */ jsxRuntime.jsx(CalendarMonth.CalendarMonth, { ...getCalendarMonthProps(date), date })
+              },
+              dateAdapter.format(date, locale)
+            ))
+          }
+        )
+      }
+    );
+  }
+);
+
+exports.CalendarGrid = CalendarGrid;
+//# sourceMappingURL=CalendarGrid.js.map

package/dist-cjs/calendar/CalendarGrid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CalendarGrid.js","sources":["../src/calendar/CalendarGrid.tsx"],"sourcesContent":["import { makePrefixer, useIsomorphicLayoutEffect } from \"@salt-ds/core\";\nimport {\n  type ComponentPropsWithoutRef,\n  type FocusEventHandler,\n  forwardRef,\n  useCallback,\n  useMemo,\n  useRef,\n} from \"react\";\nimport { useCalendarContext } from \"./internal/CalendarContext\";\nimport {\n  CalendarMonth,\n  type CalendarMonthProps,\n} from \"./internal/CalendarMonth\";\n\nimport type { DateFrameworkType } from \"@salt-ds/date-adapters\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useLocalization } from \"../localization-provider\";\nimport calendarGridCss from \"./CalendarGrid.css\";\nimport { monthDiff } from \"./internal/utils\";\n\n/**\n * Props for the CalendarGrid component.\n */\nexport interface CalendarGridProps<TDate extends DateFrameworkType>\n  extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * Props getter to pass to each CalendarMonth element\n   */\n  getCalendarMonthProps?: (\n    date: TDate,\n  ) => Omit<CalendarMonthProps<TDate>, \"date\">;\n}\n\nconst withBaseName = makePrefixer(\"saltCalendarGrid\");\n\nexport const CalendarGrid = forwardRef<HTMLDivElement, CalendarGridProps<any>>(\n  <TDate extends DateFrameworkType>(\n    props: CalendarGridProps<TDate>,\n    ref: React.Ref<HTMLDivElement>,\n  ) => {\n    const {\n      onFocus,\n      onBlur,\n      getCalendarMonthProps = () => undefined,\n      ...rest\n    } = props;\n\n    const { dateAdapter } = useLocalization<TDate>();\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-calendar-grid\",\n      css: calendarGridCss,\n      window: targetWindow,\n    });\n\n    const {\n      state: { visibleMonth, locale },\n      helpers: { setCalendarFocused },\n    } = useCalendarContext<TDate>();\n    const containerRef = useRef<HTMLDivElement>(null);\n    const diffIndex = (a: TDate, b: TDate) =>\n      monthDiff<TDate>(dateAdapter, a, b);\n\n    const { current: baseIndex } = useRef(visibleMonth);\n\n    useIsomorphicLayoutEffect(() => {\n      if (containerRef.current) {\n        containerRef.current.style.transform = `translate3d(${\n          diffIndex(baseIndex, visibleMonth) * -101 // needs to be higher than 100% so the next month doesn't show on the edges\n        }%, 0, 0)`;\n      }\n    });\n\n    const getMonths = useCallback(\n      (month: TDate) => {\n        return [\n          dateAdapter.subtract(month, { months: 1 }),\n          month,\n          dateAdapter.add(month, { months: 1 }),\n        ];\n      },\n      [dateAdapter.subtract],\n    );\n\n    const handleFocus: FocusEventHandler<HTMLDivElement> = useCallback(\n      (event) => {\n        setCalendarFocused(true);\n        onFocus?.(event);\n      },\n      [setCalendarFocused, onFocus],\n    );\n\n    const handleBlur: FocusEventHandler<HTMLDivElement> = useCallback(\n      (event) => {\n        setCalendarFocused(false);\n        onBlur?.(event);\n      },\n      [setCalendarFocused, onBlur],\n    );\n\n    const months = useMemo(() => {\n      return getMonths(visibleMonth);\n    }, [dateAdapter.format(visibleMonth)]);\n\n    return (\n      <div\n        className={withBaseName()}\n        tabIndex={-1} // https://bugzilla.mozilla.org/show_bug.cgi?id=1069739\n        style={{\n          overflowX: \"hidden\",\n          position: \"relative\",\n        }}\n        ref={ref}\n      >\n        <div\n          className={withBaseName(\"grid\")}\n          ref={containerRef}\n          onBlur={handleBlur}\n          onFocus={handleFocus}\n          {...rest}\n        >\n          {months.map((date, index) => (\n            <div\n              key={dateAdapter.format(date, locale)}\n              className={withBaseName(\"slide\")}\n              style={{\n                transform: `translateX(${diffIndex(date, baseIndex) * -101}%)`,\n              }}\n              aria-hidden={index !== 1 ? \"true\" : undefined}\n            >\n              <CalendarMonth {...getCalendarMonthProps(date)} date={date} />\n            </div>\n          ))}\n        </div>\n      </div>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","useLocalization","useWindow","useComponentCssInjection","calendarGridCss","useCalendarContext","useRef","monthDiff","useIsomorphicLayoutEffect","useCallback","useMemo","jsx","CalendarMonth"],"mappings":"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"}