@salt-ds/date-components 0.0.0-snapshot-20260330155807

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

@@ -0,0 +1 @@
+{"version":3,"file":"Calendar.js","sources":["../src/calendar/Calendar.tsx"],"sourcesContent":["import { makePrefixer, type ResponsiveProp } from \"@salt-ds/core\";\nimport type { DateFrameworkType, Timezone } from \"@salt-ds/date-adapters\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type ReactNode,\n  useEffect,\n  useRef,\n} from \"react\";\nimport { useLocalization } from \"../localization-provider\";\nimport calendarCss from \"./Calendar.css\";\nimport { CalendarContext } from \"./internal/CalendarContext\";\nimport {\n  type UseCalendarMultiselectOffsetProps,\n  type UseCalendarMultiselectRangeProps,\n  type UseCalendarMultiselectSingleProps,\n  type UseCalendarOffsetProps,\n  type UseCalendarRangeProps,\n  type UseCalendarSingleProps,\n  useCalendar,\n} from \"./useCalendar\";\nimport type { DateRangeSelection } from \"./useCalendarSelection\";\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   * Ref to attach to the focused element,enabling focus to be controlled.\n   */\n  focusedDateRef?: React.MutableRefObject<HTMLElement | null>;\n  /**\n   * Number of visible months, maximum 12, defaults to 1\n   */\n  numberOfVisibleMonths?: ResponsiveProp<\n    1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12\n  >;\n  /**\n   * Specifies the timezone behavior:\n   * - If undefined, the timezone will be derived from the passed date, or from `defaultSelectedDate`/`selectedDate`.\n   * - If set to \"default\", the default timezone of the date library will be used.\n   * - If set to \"system\", the local system's timezone will be applied.\n   * - If set to \"UTC\", the time will be returned in UTC.\n   * - If set to a valid IANA timezone identifier, the time will be returned for that specific timezone.\n   */\n  timezone?: Timezone;\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 multi-select, date selection.\n */\nexport interface CalendarMultiselectSingleProps\n  extends CalendarBaseProps,\n    UseCalendarMultiselectSingleProps {\n  /**\n   * The selection variant, set to \"single\".\n   */\n  selectionVariant: \"single\";\n  /**\n   * Multiple selection\n   */\n  multiselect: true;\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 range selection.\n */\nexport interface CalendarMultiselectRangeProps\n  extends CalendarBaseProps,\n    UseCalendarMultiselectRangeProps {\n  /**\n   * The selection variant, set to \"single\".\n   */\n  selectionVariant: \"range\";\n  /**\n   * Multiple selection\n   */\n  multiselect: true;\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 * Props for the Calendar component with multi-select, offset date selection.\n */\nexport interface CalendarMultiselectOffsetProps\n  extends CalendarBaseProps,\n    UseCalendarMultiselectOffsetProps {\n  /**\n   * The selection variant, set to \"offset\".\n   */\n  selectionVariant: \"offset\";\n  /**\n   * Multiple selection\n   */\n  multiselect: true;\n}\n\n/**\n * Type representing the props for the Calendar component with various selection variants.\n */\nexport type CalendarProps =\n  | CalendarSingleProps\n  | CalendarMultiselectSingleProps\n  | CalendarRangeProps\n  | CalendarMultiselectRangeProps\n  | CalendarOffsetProps\n  | CalendarMultiselectOffsetProps;\n\nconst withBaseName = makePrefixer(\"saltCalendar\");\n\nfunction isMultiselect(\n  props: CalendarProps,\n): props is\n  | CalendarMultiselectSingleProps\n  | CalendarMultiselectRangeProps\n  | CalendarMultiselectOffsetProps {\n  return props.multiselect === true;\n}\n\nfunction getStartOrEndDate(\n  dateRange: DateRangeSelection | DateRangeSelection[] | undefined,\n  isMultiselect: boolean,\n): DateFrameworkType | null | undefined {\n  if (isMultiselect) {\n    const rangeArray = dateRange as DateRangeSelection[];\n    return rangeArray?.[0]?.startDate ?? rangeArray?.[0]?.endDate;\n  }\n  const range = dateRange as DateRangeSelection;\n  return range?.startDate ?? range?.endDate;\n}\n\nlet warnedOnce = false;\n\nexport const Calendar = forwardRef<HTMLDivElement, CalendarProps>(\n  (props: CalendarProps, ref: React.Ref<HTMLDivElement>) => {\n    const targetWindow = useWindow();\n    const { dateAdapter } = useLocalization();\n    useComponentCssInjection({\n      testId: \"salt-calendar\",\n      css: calendarCss,\n      window: targetWindow,\n    });\n    const {\n      createAnnouncement,\n      children,\n      className,\n      selectedDate,\n      defaultSelectedDate,\n      visibleMonth: visibleMonthProp,\n      defaultVisibleMonth,\n      onFocusedDateChange,\n      onSelectionChange,\n      onVisibleMonthChange,\n      hideOutOfRangeDates,\n      focusedDate,\n      focusedDateRef,\n      isDayUnselectable,\n      isDayHighlighted,\n      minDate,\n      maxDate,\n      multiselect,\n      numberOfVisibleMonths = 1,\n      select,\n      selectionVariant,\n      onHoveredDateChange,\n      hoveredDate,\n      timezone: timezoneProp,\n      ...propsRest\n    } = props;\n\n    useEffect(() => {\n      if (process.env.NODE_ENV !== \"production\") {\n        if (!warnedOnce && multiselect && selectionVariant !== \"single\") {\n          console.warn(\n            `'multiselect' with selection variant '${selectionVariant}' is experimental and not for production use.`,\n          );\n          warnedOnce = true;\n        }\n      }\n    }, [multiselect, selectionVariant]);\n\n    let timezone: Timezone = \"default\";\n    if (timezoneProp) {\n      timezone = timezoneProp;\n    } else {\n      let defaultTimezoneDate: DateFrameworkType | null | undefined;\n\n      if (selectionVariant === \"range\" || selectionVariant === \"offset\") {\n        const shouldExtractFromList = isMultiselect(props);\n        defaultTimezoneDate =\n          getStartOrEndDate(selectedDate, shouldExtractFromList) ??\n          getStartOrEndDate(defaultSelectedDate, shouldExtractFromList);\n      } else if (selectionVariant === \"single\") {\n        if (isMultiselect(props)) {\n          defaultTimezoneDate =\n            (defaultSelectedDate as DateFrameworkType[])?.[0] ?? undefined;\n        } else {\n          defaultTimezoneDate =\n            (selectedDate as DateFrameworkType | null) ??\n            (defaultSelectedDate as DateFrameworkType | null);\n        }\n      }\n      if (defaultTimezoneDate) {\n        timezone = dateAdapter.getTimezone(defaultTimezoneDate);\n      }\n    }\n\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    const defaultFocusedDateRef = useRef(null);\n\n    // biome-ignore lint/suspicious/noExplicitAny: type guard\n    const useCalendarProps: any = {\n      createAnnouncement,\n      selectedDate,\n      defaultSelectedDate,\n      visibleMonth: visibleMonthProp,\n      defaultVisibleMonth,\n      onSelectionChange,\n      onVisibleMonthChange,\n      focusedDate,\n      focusedDateRef:\n        focusedDateRef !== undefined ? focusedDateRef : defaultFocusedDateRef,\n      isDayUnselectable,\n      isDayHighlighted,\n      multiselect,\n      minDate,\n      maxDate,\n      numberOfVisibleMonths,\n      select,\n      selectionVariant,\n      onFocusedDateChange,\n      onHoveredDateChange,\n      hideOutOfRangeDates,\n      hoveredDate,\n      startDateOffset,\n      endDateOffset,\n      timezone,\n    };\n    const { state, helpers } = useCalendar(useCalendarProps);\n    const calendarLabel = dateAdapter.format(state.visibleMonth, \"MMMM YYYY\");\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":["isMultiselect","calendarCss"],"mappings":"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"}

package/dist-es/calendar/CalendarGrid.js

@@ -0,0 +1,83 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useForkRef, GridLayout, GridItem } from '@salt-ds/core';
+import { forwardRef, useRef, useMemo } from 'react';
+import { useLocalization } from '../localization-provider/LocalizationProvider.js';
+import { CalendarMonthHeader } from './CalendarMonthHeader.js';
+import { CalendarWeekHeader } from './CalendarWeekHeader.js';
+import { useCalendarContext } from './internal/CalendarContext.js';
+import { CalendarMonth } from './internal/CalendarMonth.js';
+
+const CalendarGrid = forwardRef(
+  (props, ref) => {
+    const {
+      CalendarDayProps,
+      CalendarWeekHeaderProps,
+      CalendarMonthHeaderProps,
+      columns = 1,
+      onBlur,
+      ...rest
+    } = props;
+    const { dateAdapter } = useLocalization();
+    const {
+      helpers: { setFocusedDate, setHoveredDate },
+      state: { visibleMonth, numberOfVisibleMonths = 1 }
+    } = useCalendarContext();
+    const calendarGridRef = useRef(null);
+    const containerRef = useForkRef(ref, calendarGridRef);
+    const handleCalendarGridBlur = (event) => {
+      event.stopPropagation();
+      const relatedTarget = event.relatedTarget;
+      if (calendarGridRef.current && relatedTarget && calendarGridRef.current.contains(relatedTarget)) {
+        return;
+      }
+      setFocusedDate(event, null);
+      setHoveredDate(event, null);
+      onBlur == null ? void 0 : onBlur(event);
+    };
+    const visibleMonths = useMemo(
+      () => Array.from(
+        { length: numberOfVisibleMonths },
+        (_value, index) => dateAdapter.add(visibleMonth, {
+          months: index
+        })
+      ),
+      [dateAdapter, numberOfVisibleMonths, visibleMonth]
+    );
+    return /* @__PURE__ */ jsx(
+      GridLayout,
+      {
+        columns,
+        gap: 1,
+        ref: containerRef,
+        onBlur: handleCalendarGridBlur,
+        ...rest,
+        children: visibleMonths.map((gridItemVisibleMonth) => /* @__PURE__ */ jsxs(
+          GridItem,
+          {
+            children: [
+              numberOfVisibleMonths > 1 ? /* @__PURE__ */ jsx(
+                CalendarMonthHeader,
+                {
+                  ...CalendarMonthHeaderProps,
+                  month: gridItemVisibleMonth
+                }
+              ) : null,
+              /* @__PURE__ */ jsx(CalendarWeekHeader, { ...CalendarWeekHeaderProps }),
+              /* @__PURE__ */ jsx(
+                CalendarMonth,
+                {
+                  date: gridItemVisibleMonth,
+                  CalendarDayProps
+                }
+              )
+            ]
+          },
+          `calendar-grid-item-${dateAdapter.format(gridItemVisibleMonth, "MMMM YYYY")}`
+        ))
+      }
+    );
+  }
+);
+
+export { CalendarGrid };
+//# sourceMappingURL=CalendarGrid.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CalendarGrid.js","sources":["../src/calendar/CalendarGrid.tsx"],"sourcesContent":["import {\n  GridItem,\n  GridLayout,\n  type ResponsiveProp,\n  useForkRef,\n} from \"@salt-ds/core\";\nimport {\n  type ComponentPropsWithoutRef,\n  type FocusEventHandler,\n  forwardRef,\n  useMemo,\n  useRef,\n} from \"react\";\nimport { useLocalization } from \"../localization-provider\";\nimport {\n  CalendarMonthHeader,\n  type CalendarMonthHeaderProps,\n} from \"./CalendarMonthHeader\";\nimport {\n  CalendarWeekHeader,\n  type CalendarWeekHeaderProps,\n} from \"./CalendarWeekHeader\";\nimport { useCalendarContext } from \"./internal/CalendarContext\";\nimport type { CalendarDayProps } from \"./internal/CalendarDay\";\nimport { CalendarMonth } from \"./internal/CalendarMonth\";\n\n/**\n * Props for the CalendarGrid component.\n */\nexport interface CalendarGridProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * Number of columns\n   */\n  columns?: ResponsiveProp<number | string>;\n  /**\n   * Props for `CalendarWeekHeader`\n   */\n  CalendarWeekHeaderProps?: Partial<CalendarWeekHeaderProps>;\n  /**\n   * Props for `CalendarMonthHeader`\n   */\n  CalendarMonthHeaderProps?: Partial<CalendarMonthHeaderProps>;\n  /**\n   * Props for `CalendarDay`\n   */\n  CalendarDayProps?: Partial<CalendarDayProps>;\n}\n\nexport const CalendarGrid = forwardRef<HTMLDivElement, CalendarGridProps>(\n  (props: CalendarGridProps, ref: React.Ref<HTMLDivElement>) => {\n    const {\n      CalendarDayProps,\n      CalendarWeekHeaderProps,\n      CalendarMonthHeaderProps,\n      columns = 1,\n      onBlur,\n      ...rest\n    } = props;\n\n    const { dateAdapter } = useLocalization();\n\n    const {\n      helpers: { setFocusedDate, setHoveredDate },\n      state: { visibleMonth, numberOfVisibleMonths = 1 },\n    } = useCalendarContext();\n    const calendarGridRef = useRef<HTMLDivElement>(null);\n    const containerRef = useForkRef(ref, calendarGridRef);\n\n    const handleCalendarGridBlur: FocusEventHandler<HTMLDivElement> = (\n      event,\n    ) => {\n      event.stopPropagation();\n      const relatedTarget = event.relatedTarget as HTMLElement;\n      if (\n        calendarGridRef.current &&\n        relatedTarget &&\n        calendarGridRef.current.contains(relatedTarget)\n      ) {\n        return;\n      }\n      setFocusedDate(event, null);\n      setHoveredDate(event, null);\n      onBlur?.(event);\n    };\n\n    const visibleMonths = useMemo(\n      () =>\n        Array.from({ length: numberOfVisibleMonths }, (_value, index) =>\n          dateAdapter.add(visibleMonth, {\n            months: index,\n          }),\n        ),\n      [dateAdapter, numberOfVisibleMonths, visibleMonth],\n    );\n\n    return (\n      <GridLayout\n        columns={columns}\n        gap={1}\n        ref={containerRef}\n        onBlur={handleCalendarGridBlur}\n        {...rest}\n      >\n        {visibleMonths.map((gridItemVisibleMonth) => (\n          <GridItem\n            key={`calendar-grid-item-${dateAdapter.format(gridItemVisibleMonth, \"MMMM YYYY\")}`}\n          >\n            {numberOfVisibleMonths > 1 ? (\n              <CalendarMonthHeader\n                {...CalendarMonthHeaderProps}\n                month={gridItemVisibleMonth}\n              />\n            ) : null}\n            <CalendarWeekHeader {...CalendarWeekHeaderProps} />\n            <CalendarMonth\n              date={gridItemVisibleMonth}\n              CalendarDayProps={CalendarDayProps}\n            />\n          </GridItem>\n        ))}\n      </GridLayout>\n    );\n  },\n);\n"],"names":[],"mappings":";;;;;;;;;AAgDO,MAAM,YAAA,GAAe,UAAA;AAAA,EAC1B,CAAC,OAA0B,GAAA,KAAmC;AAC5D,IAAA,MAAM;AAAA,MACJ,gBAAA;AAAA,MACA,uBAAA;AAAA,MACA,wBAAA;AAAA,MACA,OAAA,GAAU,CAAA;AAAA,MACV,MAAA;AAAA,MACA,GAAG;AAAA,KACL,GAAI,KAAA;AAEJ,IAAA,MAAM,EAAE,WAAA,EAAY,GAAI,eAAA,EAAgB;AAExC,IAAA,MAAM;AAAA,MACJ,OAAA,EAAS,EAAE,cAAA,EAAgB,cAAA,EAAe;AAAA,MAC1C,KAAA,EAAO,EAAE,YAAA,EAAc,qBAAA,GAAwB,CAAA;AAAE,QAC/C,kBAAA,EAAmB;AACvB,IAAA,MAAM,eAAA,GAAkB,OAAuB,IAAI,CAAA;AACnD,IAAA,MAAM,YAAA,GAAe,UAAA,CAAW,GAAA,EAAK,eAAe,CAAA;AAEpD,IAAA,MAAM,sBAAA,GAA4D,CAChE,KAAA,KACG;AACH,MAAA,KAAA,CAAM,eAAA,EAAgB;AACtB,MAAA,MAAM,gBAAgB,KAAA,CAAM,aAAA;AAC5B,MAAA,IACE,gBAAgB,OAAA,IAChB,aAAA,IACA,gBAAgB,OAAA,CAAQ,QAAA,CAAS,aAAa,CAAA,EAC9C;AACA,QAAA;AAAA,MACF;AACA,MAAA,cAAA,CAAe,OAAO,IAAI,CAAA;AAC1B,MAAA,cAAA,CAAe,OAAO,IAAI,CAAA;AAC1B,MAAA,MAAA,IAAA,IAAA,GAAA,MAAA,GAAA,MAAA,CAAS,KAAA,CAAA;AAAA,IACX,CAAA;AAEA,IAAA,MAAM,aAAA,GAAgB,OAAA;AAAA,MACpB,MACE,KAAA,CAAM,IAAA;AAAA,QAAK,EAAE,QAAQ,qBAAA,EAAsB;AAAA,QAAG,CAAC,MAAA,EAAQ,KAAA,KACrD,WAAA,CAAY,IAAI,YAAA,EAAc;AAAA,UAC5B,MAAA,EAAQ;AAAA,SACT;AAAA,OACH;AAAA,MACF,CAAC,WAAA,EAAa,qBAAA,EAAuB,YAAY;AAAA,KACnD;AAEA,IAAA,uBACE,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,OAAA;AAAA,QACA,GAAA,EAAK,CAAA;AAAA,QACL,GAAA,EAAK,YAAA;AAAA,QACL,MAAA,EAAQ,sBAAA;AAAA,QACP,GAAG,IAAA;AAAA,QAEH,QAAA,EAAA,aAAA,CAAc,GAAA,CAAI,CAAC,oBAAA,qBAClB,IAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YAGE,QAAA,EAAA;AAAA,cAAA,qBAAA,GAAwB,CAAA,mBACvB,GAAA;AAAA,gBAAC,mBAAA;AAAA,gBAAA;AAAA,kBACE,GAAG,wBAAA;AAAA,kBACJ,KAAA,EAAO;AAAA;AAAA,eACT,GACE,IAAA;AAAA,8BACJ,GAAA,CAAC,kBAAA,EAAA,EAAoB,GAAG,uBAAA,EAAyB,CAAA;AAAA,8BACjD,GAAA;AAAA,gBAAC,aAAA;AAAA,gBAAA;AAAA,kBACC,IAAA,EAAM,oBAAA;AAAA,kBACN;AAAA;AAAA;AACF;AAAA,WAAA;AAAA,UAZK,CAAA,mBAAA,EAAsB,WAAA,CAAY,MAAA,CAAO,oBAAA,EAAsB,WAAW,CAAC,CAAA;AAAA,SAcnF;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;;;;"}

package/dist-es/calendar/CalendarMonthHeader.css.js

@@ -0,0 +1,4 @@
+var css_248z = ".saltCalendarMonthHeader {\n  width: 100%;\n  text-align: center;\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=CalendarMonthHeader.css.js.map

package/dist-es/calendar/CalendarMonthHeader.css.js.map

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

package/dist-es/calendar/CalendarMonthHeader.js

@@ -0,0 +1,39 @@
+import { jsx } from 'react/jsx-runtime';
+import { makePrefixer, Text } from '@salt-ds/core';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { clsx } from 'clsx';
+import { forwardRef, useCallback } from 'react';
+import { useLocalization } from '../localization-provider/LocalizationProvider.js';
+import css_248z from './CalendarMonthHeader.css.js';
+
+const withBaseName = makePrefixer("saltCalendarMonthHeader");
+const CalendarMonthHeader = forwardRef((props, ref) => {
+  const { className, format: formatMonthProp = "MMMM", month, ...rest } = props;
+  const { dateAdapter } = useLocalization();
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "salt-calendar-month-header",
+    css: css_248z,
+    window: targetWindow
+  });
+  const formatMonth = useCallback(
+    (date) => {
+      return dateAdapter.format(date, formatMonthProp);
+    },
+    [dateAdapter, formatMonthProp]
+  );
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-testid": "CalendarMonthHeader",
+      className: clsx(withBaseName(), className),
+      ref,
+      ...rest,
+      children: /* @__PURE__ */ jsx(Text, { children: formatMonth(month) })
+    }
+  );
+});
+
+export { CalendarMonthHeader };
+//# sourceMappingURL=CalendarMonthHeader.js.map

package/dist-es/calendar/CalendarMonthHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CalendarMonthHeader.js","sources":["../src/calendar/CalendarMonthHeader.tsx"],"sourcesContent":["import { makePrefixer, Text } from \"@salt-ds/core\";\nimport type { DateFrameworkType } from \"@salt-ds/date-adapters\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ComponentPropsWithRef, forwardRef, useCallback } from \"react\";\nimport { useLocalization } from \"../localization-provider\";\nimport calendarMonthHeaderCss from \"./CalendarMonthHeader.css\";\n\n/**\n * Props for the CalendarMonthHeader component.\n */\nexport interface CalendarMonthHeaderProps extends ComponentPropsWithRef<\"div\"> {\n  /**\n   * Month value\n   */\n  month: DateFrameworkType;\n  /**\n   * Format the month value\n   * @param date\n   */\n  format?: string;\n}\n\nconst withBaseName = makePrefixer(\"saltCalendarMonthHeader\");\n\nexport const CalendarMonthHeader = forwardRef<\n  HTMLDivElement,\n  CalendarMonthHeaderProps\n>((props: CalendarMonthHeaderProps, ref: React.Ref<HTMLDivElement>) => {\n  const { className, format: formatMonthProp = \"MMMM\", month, ...rest } = props;\n  const { dateAdapter } = useLocalization();\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-calendar-month-header\",\n    css: calendarMonthHeaderCss,\n    window: targetWindow,\n  });\n\n  const formatMonth = useCallback(\n    (date?: DateFrameworkType) => {\n      return dateAdapter.format(date, formatMonthProp);\n    },\n    [dateAdapter, formatMonthProp],\n  );\n\n  return (\n    <div\n      data-testid=\"CalendarMonthHeader\"\n      className={clsx(withBaseName(), className)}\n      ref={ref}\n      {...rest}\n    >\n      <Text>{formatMonth(month)}</Text>\n    </div>\n  );\n});\n"],"names":["calendarMonthHeaderCss"],"mappings":";;;;;;;;;AAwBA,MAAM,YAAA,GAAe,aAAa,yBAAyB,CAAA;AAEpD,MAAM,mBAAA,GAAsB,UAAA,CAGjC,CAAC,KAAA,EAAiC,GAAA,KAAmC;AACrE,EAAA,MAAM,EAAE,WAAW,MAAA,EAAQ,eAAA,GAAkB,QAAQ,KAAA,EAAO,GAAG,MAAK,GAAI,KAAA;AACxE,EAAA,MAAM,EAAE,WAAA,EAAY,GAAI,eAAA,EAAgB;AAExC,EAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,EAAA,wBAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,4BAAA;AAAA,IACR,GAAA,EAAKA,QAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,MAAM,WAAA,GAAc,WAAA;AAAA,IAClB,CAAC,IAAA,KAA6B;AAC5B,MAAA,OAAO,WAAA,CAAY,MAAA,CAAO,IAAA,EAAM,eAAe,CAAA;AAAA,IACjD,CAAA;AAAA,IACA,CAAC,aAAa,eAAe;AAAA,GAC/B;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,aAAA,EAAY,qBAAA;AAAA,MACZ,SAAA,EAAW,IAAA,CAAK,YAAA,EAAa,EAAG,SAAS,CAAA;AAAA,MACzC,GAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEJ,QAAA,kBAAA,GAAA,CAAC,IAAA,EAAA,EAAM,QAAA,EAAA,WAAA,CAAY,KAAK,CAAA,EAAE;AAAA;AAAA,GAC5B;AAEJ,CAAC;;;;"}

package/dist-es/calendar/CalendarNavigation.css.js

@@ -0,0 +1,4 @@
+var css_248z = ".saltCalendarNavigation {\n  display: grid;\n  grid-template-columns: min-content auto min-content;\n  padding-bottom: var(--salt-spacing-100);\n  grid-gap: var(--salt-spacing-25);\n  align-items: center;\n  box-sizing: border-box;\n}\n\n.saltCalendarNavigation-yearDropdown {\n  min-width: 4.3em;\n}\n\n.saltCalendarNavigation-hideYearDropdown {\n  grid-template-columns: min-content auto min-content;\n  grid-gap: var(--salt-spacing-300);\n}\n\n.saltCalendarNavigation-dropdowns {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  grid-gap: var(--salt-spacing-50);\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=CalendarNavigation.css.js.map

package/dist-es/calendar/CalendarNavigation.css.js.map

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

package/dist-es/calendar/CalendarNavigation.js

@@ -0,0 +1,332 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { makePrefixer, useIcon, Button, Dropdown, Tooltip, useListControlContext, Option } from '@salt-ds/core';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { clsx } from 'clsx';
+import { forwardRef, useCallback, useMemo } from 'react';
+import { useLocalization } from '../localization-provider/LocalizationProvider.js';
+import css_248z from './CalendarNavigation.css.js';
+import { useCalendarContext } from './internal/CalendarContext.js';
+import { generateMonthsForYear, monthDiff } from './internal/utils.js';
+
+const withBaseName = makePrefixer("saltCalendarNavigation");
+const ConditionalTooltip = ({
+  children,
+  disabled = true,
+  ...rest
+}) => {
+  if (disabled) {
+    return /* @__PURE__ */ jsx(Fragment, { children });
+  }
+  return /* @__PURE__ */ jsx(Tooltip, { ...rest, children });
+};
+function generateYearsBetweenRange(dateAdapter, minYear, maxYear, timezone = "default") {
+  const years = [];
+  let startOfYear = dateAdapter.today(timezone);
+  for (let year = minYear; year <= maxYear; year++) {
+    startOfYear = dateAdapter.set(startOfYear, { day: 1, month: 1, year });
+    years.push(startOfYear);
+  }
+  return years;
+}
+function useCalendarNavigation() {
+  const {
+    state: { visibleMonth, timezone, minDate, maxDate },
+    helpers: { setVisibleMonth, isDayVisible, isOutsideAllowedMonths }
+  } = useCalendarContext();
+  const { dateAdapter } = useLocalization();
+  const disableNavigatePrevious = isDayVisible(minDate);
+  const disableNavigateNext = isDayVisible(maxDate);
+  const moveToNextMonth = useCallback(
+    (event, step = 1) => {
+      setVisibleMonth(event, dateAdapter.add(visibleMonth, { months: step }));
+    },
+    [dateAdapter, setVisibleMonth, visibleMonth]
+  );
+  const moveToPreviousMonth = useCallback(
+    (event, step = 1) => {
+      setVisibleMonth(
+        event,
+        dateAdapter.subtract(visibleMonth, { months: step })
+      );
+    },
+    [dateAdapter, setVisibleMonth, visibleMonth]
+  );
+  const moveToMonth = useCallback(
+    (event, month) => {
+      let newMonth = month;
+      if (isOutsideAllowedMonths(newMonth)) {
+        const navigableMonths = generateMonthsForYear(
+          dateAdapter,
+          newMonth
+        ).filter((n) => !isOutsideAllowedMonths(n));
+        newMonth = navigableMonths.reduce(
+          (closestMonth, currentMonth) => Math.abs(monthDiff(dateAdapter, currentMonth, newMonth)) < Math.abs(monthDiff(dateAdapter, closestMonth, newMonth)) ? currentMonth : closestMonth,
+          minDate
+        );
+      }
+      setVisibleMonth(event, newMonth);
+    },
+    [dateAdapter, isOutsideAllowedMonths, setVisibleMonth, minDate]
+  );
+  const months = useMemo(
+    () => generateMonthsForYear(dateAdapter, visibleMonth),
+    [dateAdapter, visibleMonth]
+  );
+  const years = useMemo(
+    () => generateYearsBetweenRange(
+      dateAdapter,
+      Math.min(
+        dateAdapter.getYear(minDate),
+        dateAdapter.getYear(visibleMonth)
+      ),
+      Math.max(
+        dateAdapter.getYear(maxDate),
+        dateAdapter.getYear(visibleMonth)
+      ),
+      timezone
+    ),
+    [dateAdapter, minDate, maxDate, visibleMonth, timezone]
+  );
+  const selectedMonth = months.find(
+    (month) => dateAdapter.isSame(month, visibleMonth, "month")
+  );
+  const selectedYear = years.find(
+    (year) => dateAdapter.isSame(year, visibleMonth, "year")
+  );
+  return useMemo(
+    () => ({
+      moveToNextMonth,
+      moveToPreviousMonth,
+      moveToMonth,
+      visibleMonth,
+      months,
+      years,
+      disableNavigateNext,
+      disableNavigatePrevious,
+      selectedMonth,
+      selectedYear,
+      isOutsideAllowedMonths
+    }),
+    [
+      months,
+      moveToPreviousMonth,
+      moveToNextMonth,
+      moveToMonth,
+      visibleMonth,
+      years,
+      disableNavigateNext,
+      disableNavigatePrevious,
+      selectedMonth,
+      selectedYear,
+      isOutsideAllowedMonths
+    ]
+  );
+}
+function OptionWithTooltip({
+  value,
+  children,
+  disabled = false,
+  tooltipContent,
+  ...rest
+}) {
+  const { activeState, openState } = useListControlContext();
+  const open = (activeState == null ? void 0 : activeState.value) === value;
+  return /* @__PURE__ */ jsx(
+    ConditionalTooltip,
+    {
+      placement: "right",
+      open: open && openState,
+      disabled: !disabled,
+      content: tooltipContent,
+      enterDelay: 0,
+      leaveDelay: 0,
+      children: /* @__PURE__ */ jsx(Option, { value, disabled, ...rest, children })
+    }
+  );
+}
+const CalendarNavigation = forwardRef((props, ref) => {
+  const {
+    className,
+    formatMonth: formatMonthProp,
+    formatYear: formatYearProp,
+    MonthDropdownProps,
+    NextButtonProps,
+    PreviousButtonProps,
+    YearDropdownProps,
+    hideYearDropdown,
+    step = 1,
+    ...rest
+  } = props;
+  const { dateAdapter } = useLocalization();
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "salt-calendar-navigation",
+    css: css_248z,
+    window: targetWindow
+  });
+  const { NextIcon, PreviousIcon } = useIcon();
+  const {
+    moveToPreviousMonth,
+    moveToNextMonth,
+    moveToMonth,
+    months,
+    years,
+    disableNavigateNext,
+    disableNavigatePrevious,
+    selectedMonth,
+    selectedYear,
+    isOutsideAllowedMonths,
+    visibleMonth
+  } = useCalendarNavigation();
+  const handleNavigatePrevious = useCallback(
+    (event) => {
+      moveToPreviousMonth(event, step);
+    },
+    [moveToPreviousMonth, step]
+  );
+  const handleNavigateNext = useCallback(
+    (event) => {
+      moveToNextMonth(event, step);
+    },
+    [moveToNextMonth, step]
+  );
+  const handleMonthSelect = useCallback(
+    (event, month) => {
+      moveToMonth(event, month[0]);
+    },
+    [moveToMonth]
+  );
+  const handleYearSelect = useCallback(
+    (event, year) => {
+      let newVisibleMonth = dateAdapter.clone(visibleMonth);
+      newVisibleMonth = dateAdapter.set(newVisibleMonth, {
+        year: dateAdapter.getYear(year[0])
+      });
+      moveToMonth(event, newVisibleMonth);
+    },
+    [dateAdapter, moveToMonth, visibleMonth]
+  );
+  const formatMonth = useCallback(
+    (date, formatString) => {
+      const format = formatString || formatMonthProp || "MMM";
+      if (date) {
+        return dateAdapter.format(date, format);
+      }
+      return "";
+    },
+    [dateAdapter, formatMonthProp]
+  );
+  const formatYear = useCallback(
+    (date) => {
+      if (date && formatYearProp) {
+        return dateAdapter.format(date, formatYearProp);
+      }
+      return !date ? "" : `${dateAdapter.format(date, "YYYY")}`;
+    },
+    [dateAdapter, formatYearProp]
+  );
+  const isPreviousMonthDisabled = (PreviousButtonProps == null ? void 0 : PreviousButtonProps.disabled) || disableNavigatePrevious;
+  const isNextMonthDisabled = (NextButtonProps == null ? void 0 : NextButtonProps.disabled) || disableNavigateNext;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: clsx(
+        withBaseName(),
+        { [withBaseName("hideYearDropdown")]: hideYearDropdown },
+        className
+      ),
+      ref,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx(
+          ConditionalTooltip,
+          {
+            placement: "top",
+            disabled: !isPreviousMonthDisabled,
+            content: "Past dates are out of range",
+            enterDelay: 0,
+            leaveDelay: 0,
+            children: /* @__PURE__ */ jsx(
+              Button,
+              {
+                "aria-label": isPreviousMonthDisabled ? "Past dates are out of range" : "Previous Month",
+                appearance: "transparent",
+                sentiment: "neutral",
+                onClick: handleNavigatePrevious,
+                focusableWhenDisabled: true,
+                ...PreviousButtonProps,
+                disabled: isPreviousMonthDisabled,
+                children: /* @__PURE__ */ jsx(PreviousIcon, { "aria-hidden": true })
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: clsx({ [withBaseName("dropdowns")]: !hideYearDropdown }), children: [
+          /* @__PURE__ */ jsx(
+            Dropdown,
+            {
+              "aria-label": "Month Dropdown",
+              selected: selectedMonth ? [selectedMonth] : [],
+              value: formatMonth(selectedMonth),
+              onSelectionChange: handleMonthSelect,
+              ...MonthDropdownProps,
+              children: months.map((month) => /* @__PURE__ */ jsx(
+                OptionWithTooltip,
+                {
+                  value: month,
+                  "aria-label": formatMonth(month, "MMMM"),
+                  disabled: isOutsideAllowedMonths(month),
+                  tooltipContent: "This month is out of range",
+                  children: formatMonth(month)
+                },
+                formatMonth(month)
+              ))
+            }
+          ),
+          !hideYearDropdown ? /* @__PURE__ */ jsx(
+            Dropdown,
+            {
+              "aria-label": "Year Dropdown",
+              selected: selectedYear ? [selectedYear] : [],
+              value: formatYear(selectedYear),
+              onSelectionChange: handleYearSelect,
+              ...YearDropdownProps,
+              className: clsx(
+                withBaseName("yearDropdown"),
+                YearDropdownProps == null ? void 0 : YearDropdownProps.className
+              ),
+              children: years.map((year) => /* @__PURE__ */ jsx(OptionWithTooltip, { value: year, children: formatYear(year) }, formatYear(year)))
+            }
+          ) : null
+        ] }),
+        /* @__PURE__ */ jsx(
+          ConditionalTooltip,
+          {
+            placement: "top",
+            disabled: !isNextMonthDisabled,
+            content: "Future dates are out of range",
+            enterDelay: 0,
+            leaveDelay: 0,
+            children: /* @__PURE__ */ jsx(
+              Button,
+              {
+                "aria-label": isNextMonthDisabled ? "Future dates are out of range" : "Next Month",
+                appearance: "transparent",
+                sentiment: "neutral",
+                onClick: handleNavigateNext,
+                focusableWhenDisabled: true,
+                ...NextButtonProps,
+                disabled: isNextMonthDisabled,
+                children: /* @__PURE__ */ jsx(NextIcon, { "aria-hidden": true })
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+});
+
+export { CalendarNavigation };
+//# sourceMappingURL=CalendarNavigation.js.map

package/dist-es/calendar/CalendarNavigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CalendarNavigation.js","sources":["../src/calendar/CalendarNavigation.tsx"],"sourcesContent":["import {\n  Button,\n  type ButtonProps,\n  Dropdown,\n  type DropdownProps,\n  makePrefixer,\n  Option,\n  type OptionProps,\n  Tooltip,\n  type TooltipProps,\n  useIcon,\n  useListControlContext,\n} from \"@salt-ds/core\";\nimport type {\n  DateFrameworkType,\n  SaltDateAdapter,\n  Timezone,\n} from \"@salt-ds/date-adapters\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithRef,\n  forwardRef,\n  type MouseEventHandler,\n  type SyntheticEvent,\n  useCallback,\n  useMemo,\n} from \"react\";\nimport { useLocalization } from \"../localization-provider\";\nimport calendarNavigationCss from \"./CalendarNavigation.css\";\nimport { useCalendarContext } from \"./internal/CalendarContext\";\nimport { generateMonthsForYear, monthDiff } from \"./internal/utils\";\n\n/**\n * Props for the CalendarNavigation component.\n */\nexport interface CalendarNavigationProps extends ComponentPropsWithRef<\"div\"> {\n  /**\n   * Props for the month dropdown component.\n   */\n  MonthDropdownProps?: DropdownProps<DateFrameworkType>;\n  /**\n   * Props for the year dropdown component.\n   */\n  YearDropdownProps?: DropdownProps<DateFrameworkType>;\n  /**\n   * Additional props for Previous button.\n   */\n  PreviousButtonProps?: ButtonProps;\n  /**\n   * Additional props for Next button.\n   */\n  NextButtonProps?: ButtonProps;\n  /**\n   * If `true`, hides the year dropdown.\n   */\n  hideYearDropdown?: boolean;\n  /**\n   * The step value for navigation. Defaults to 1.\n   */\n  step?: number;\n  /**\n   * Format the month dropdown values\n   * @param date\n   */\n  formatMonth?: string;\n  /**\n   * Format the year dropdown values\n   * @param date\n   */\n  formatYear?: string;\n}\n\ninterface OptionWithTooltipProps extends OptionProps {\n  value: DateFrameworkType;\n  tooltipContent?: string;\n}\n\nconst withBaseName = makePrefixer(\"saltCalendarNavigation\");\n\nconst ConditionalTooltip: React.FC<TooltipProps> = ({\n  children,\n  disabled = true,\n  ...rest\n}) => {\n  if (disabled) {\n    return <>{children}</>;\n  }\n  return <Tooltip {...rest}>{children}</Tooltip>;\n};\n\nfunction generateYearsBetweenRange(\n  dateAdapter: SaltDateAdapter,\n  minYear: number,\n  maxYear: number,\n  timezone: Timezone = \"default\",\n): DateFrameworkType[] {\n  const years: DateFrameworkType[] = [];\n  let startOfYear = dateAdapter.today(timezone);\n  for (let year = minYear; year <= maxYear; year++) {\n    startOfYear = dateAdapter.set(startOfYear, { day: 1, month: 1, year });\n    years.push(startOfYear);\n  }\n  return years;\n}\n\nfunction useCalendarNavigation() {\n  const {\n    state: { visibleMonth, timezone, minDate, maxDate },\n    helpers: { setVisibleMonth, isDayVisible, isOutsideAllowedMonths },\n  } = useCalendarContext();\n\n  const { dateAdapter } = useLocalization();\n\n  const disableNavigatePrevious = isDayVisible(minDate);\n  const disableNavigateNext = isDayVisible(maxDate);\n\n  const moveToNextMonth = useCallback(\n    (event: SyntheticEvent, step = 1) => {\n      setVisibleMonth(event, dateAdapter.add(visibleMonth, { months: step }));\n    },\n    [dateAdapter, setVisibleMonth, visibleMonth],\n  );\n\n  const moveToPreviousMonth = useCallback(\n    (event: SyntheticEvent, step = 1) => {\n      setVisibleMonth(\n        event,\n        dateAdapter.subtract(visibleMonth, { months: step }),\n      );\n    },\n    [dateAdapter, setVisibleMonth, visibleMonth],\n  );\n\n  const moveToMonth = useCallback(\n    (event: SyntheticEvent, month: DateFrameworkType) => {\n      let newMonth = month;\n\n      if (isOutsideAllowedMonths(newMonth)) {\n        // If month is navigable we should move to the closest navigable month based on the new selection\n        const navigableMonths = generateMonthsForYear(\n          dateAdapter,\n          newMonth,\n        ).filter((n) => !isOutsideAllowedMonths(n));\n        newMonth = navigableMonths.reduce(\n          (closestMonth, currentMonth) =>\n            Math.abs(monthDiff(dateAdapter, currentMonth, newMonth)) <\n            Math.abs(monthDiff(dateAdapter, closestMonth, newMonth))\n              ? currentMonth\n              : closestMonth,\n          minDate,\n        );\n      }\n      setVisibleMonth(event, newMonth);\n    },\n    [dateAdapter, isOutsideAllowedMonths, setVisibleMonth, minDate],\n  );\n\n  const months: DateFrameworkType[] = useMemo(\n    () => generateMonthsForYear(dateAdapter, visibleMonth),\n    [dateAdapter, visibleMonth],\n  );\n\n  const years: DateFrameworkType[] = useMemo(\n    () =>\n      generateYearsBetweenRange(\n        dateAdapter,\n        Math.min(\n          dateAdapter.getYear(minDate),\n          dateAdapter.getYear(visibleMonth),\n        ),\n        Math.max(\n          dateAdapter.getYear(maxDate),\n          dateAdapter.getYear(visibleMonth),\n        ),\n        timezone,\n      ),\n    [dateAdapter, minDate, maxDate, visibleMonth, timezone],\n  );\n\n  const selectedMonth: DateFrameworkType | undefined = months.find(\n    (month: DateFrameworkType) =>\n      dateAdapter.isSame(month, visibleMonth, \"month\"),\n  );\n  const selectedYear: DateFrameworkType | undefined = years.find(\n    (year: DateFrameworkType) => dateAdapter.isSame(year, visibleMonth, \"year\"),\n  );\n\n  return useMemo(\n    () => ({\n      moveToNextMonth,\n      moveToPreviousMonth,\n      moveToMonth,\n      visibleMonth,\n      months,\n      years,\n      disableNavigateNext,\n      disableNavigatePrevious,\n      selectedMonth,\n      selectedYear,\n      isOutsideAllowedMonths,\n    }),\n    [\n      months,\n      moveToPreviousMonth,\n      moveToNextMonth,\n      moveToMonth,\n      visibleMonth,\n      years,\n      disableNavigateNext,\n      disableNavigatePrevious,\n      selectedMonth,\n      selectedYear,\n      isOutsideAllowedMonths,\n    ],\n  );\n}\n\nfunction OptionWithTooltip({\n  value,\n  children,\n  disabled = false,\n  tooltipContent,\n  ...rest\n}: OptionWithTooltipProps) {\n  const { activeState, openState } = useListControlContext();\n  const open = activeState?.value === value;\n  return (\n    <ConditionalTooltip\n      placement=\"right\"\n      open={open && openState}\n      disabled={!disabled}\n      content={tooltipContent}\n      enterDelay={0} // --salt-duration-instant\n      leaveDelay={0} // --salt-duration-instant\n    >\n      <Option value={value} disabled={disabled} {...rest}>\n        {children}\n      </Option>\n    </ConditionalTooltip>\n  );\n}\n\nexport const CalendarNavigation = forwardRef<\n  HTMLDivElement,\n  CalendarNavigationProps\n>((props: CalendarNavigationProps, ref: React.Ref<HTMLDivElement>) => {\n  const {\n    className,\n    formatMonth: formatMonthProp,\n    formatYear: formatYearProp,\n    MonthDropdownProps,\n    NextButtonProps,\n    PreviousButtonProps,\n    YearDropdownProps,\n    hideYearDropdown,\n    step = 1,\n    ...rest\n  } = props;\n\n  const { dateAdapter } = useLocalization();\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-calendar-navigation\",\n    css: calendarNavigationCss,\n    window: targetWindow,\n  });\n\n  const { NextIcon, PreviousIcon } = useIcon();\n\n  const {\n    moveToPreviousMonth,\n    moveToNextMonth,\n    moveToMonth,\n    months,\n    years,\n    disableNavigateNext,\n    disableNavigatePrevious,\n    selectedMonth,\n    selectedYear,\n    isOutsideAllowedMonths,\n    visibleMonth,\n  } = useCalendarNavigation();\n\n  const handleNavigatePrevious: MouseEventHandler<HTMLButtonElement> =\n    useCallback(\n      (event) => {\n        moveToPreviousMonth(event, step);\n      },\n      [moveToPreviousMonth, step],\n    );\n\n  const handleNavigateNext: MouseEventHandler<HTMLButtonElement> = useCallback(\n    (event) => {\n      moveToNextMonth(event, step);\n    },\n    [moveToNextMonth, step],\n  );\n\n  const handleMonthSelect = useCallback(\n    (event: SyntheticEvent, month: DateFrameworkType[]) => {\n      moveToMonth(event, month[0]);\n    },\n    [moveToMonth],\n  );\n\n  const handleYearSelect = useCallback(\n    (event: SyntheticEvent, year: DateFrameworkType[]) => {\n      let newVisibleMonth = dateAdapter.clone(visibleMonth);\n      newVisibleMonth = dateAdapter.set(newVisibleMonth, {\n        year: dateAdapter.getYear(year[0]),\n      });\n      moveToMonth(event, newVisibleMonth);\n    },\n    [dateAdapter, moveToMonth, visibleMonth],\n  );\n\n  const formatMonth = useCallback(\n    (date?: DateFrameworkType, formatString?: string) => {\n      const format = formatString || formatMonthProp || \"MMM\";\n      if (date) {\n        return dateAdapter.format(date, format);\n      }\n      return \"\";\n    },\n    [dateAdapter, formatMonthProp],\n  );\n\n  const formatYear = useCallback(\n    (date?: DateFrameworkType) => {\n      if (date && formatYearProp) {\n        return dateAdapter.format(date, formatYearProp);\n      }\n      return !date ? \"\" : `${dateAdapter.format(date, \"YYYY\")}`;\n    },\n    [dateAdapter, formatYearProp],\n  );\n\n  const isPreviousMonthDisabled =\n    PreviousButtonProps?.disabled || disableNavigatePrevious;\n  const isNextMonthDisabled = NextButtonProps?.disabled || disableNavigateNext;\n\n  return (\n    <div\n      className={clsx(\n        withBaseName(),\n        { [withBaseName(\"hideYearDropdown\")]: hideYearDropdown },\n        className,\n      )}\n      ref={ref}\n      {...rest}\n    >\n      <ConditionalTooltip\n        placement=\"top\"\n        disabled={!isPreviousMonthDisabled}\n        content=\"Past dates are out of range\"\n        enterDelay={0} // --salt-duration-instant\n        leaveDelay={0} // --salt-duration-instant\n      >\n        <Button\n          aria-label={\n            isPreviousMonthDisabled\n              ? \"Past dates are out of range\"\n              : \"Previous Month\"\n          }\n          appearance=\"transparent\"\n          sentiment=\"neutral\"\n          onClick={handleNavigatePrevious}\n          focusableWhenDisabled={true}\n          {...PreviousButtonProps}\n          disabled={isPreviousMonthDisabled}\n        >\n          <PreviousIcon aria-hidden />\n        </Button>\n      </ConditionalTooltip>\n      <div className={clsx({ [withBaseName(\"dropdowns\")]: !hideYearDropdown })}>\n        <Dropdown\n          aria-label=\"Month Dropdown\"\n          selected={selectedMonth ? [selectedMonth] : []}\n          value={formatMonth(selectedMonth)}\n          onSelectionChange={handleMonthSelect}\n          {...MonthDropdownProps}\n        >\n          {months.map((month) => (\n            <OptionWithTooltip\n              key={formatMonth(month)}\n              value={month}\n              aria-label={formatMonth(month, \"MMMM\")}\n              disabled={isOutsideAllowedMonths(month)}\n              tooltipContent=\"This month is out of range\"\n            >\n              {formatMonth(month)}\n            </OptionWithTooltip>\n          ))}\n        </Dropdown>\n        {!hideYearDropdown ? (\n          <Dropdown\n            aria-label=\"Year Dropdown\"\n            selected={selectedYear ? [selectedYear] : []}\n            value={formatYear(selectedYear)}\n            onSelectionChange={handleYearSelect}\n            {...YearDropdownProps}\n            className={clsx(\n              withBaseName(\"yearDropdown\"),\n              YearDropdownProps?.className,\n            )}\n          >\n            {years.map((year) => (\n              <OptionWithTooltip key={formatYear(year)} value={year}>\n                {formatYear(year)}\n              </OptionWithTooltip>\n            ))}\n          </Dropdown>\n        ) : null}\n      </div>\n      <ConditionalTooltip\n        placement=\"top\"\n        disabled={!isNextMonthDisabled}\n        content=\"Future dates are out of range\"\n        enterDelay={0} // --salt-duration-instant\n        leaveDelay={0} // --salt-duration-instant\n      >\n        <Button\n          aria-label={\n            isNextMonthDisabled ? \"Future dates are out of range\" : \"Next Month\"\n          }\n          appearance=\"transparent\"\n          sentiment=\"neutral\"\n          onClick={handleNavigateNext}\n          focusableWhenDisabled={true}\n          {...NextButtonProps}\n          disabled={isNextMonthDisabled}\n        >\n          <NextIcon aria-hidden />\n        </Button>\n      </ConditionalTooltip>\n    </div>\n  );\n});\n"],"names":["calendarNavigationCss"],"mappings":"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"}

package/dist-es/calendar/CalendarWeekHeader.css.js

@@ -0,0 +1,4 @@
+var css_248z = ".saltCalendarWeekHeader {\n  display: flex;\n  text-align: center;\n  align-items: center;\n  height: var(--salt-size-base);\n  gap: var(--calendar-gap);\n}\n\n.saltCalendarWeekHeader-dayOfWeek {\n  width: var(--calendar-day-size);\n  color: var(--salt-content-secondary-foreground);\n  font-family: var(--salt-text-fontFamily);\n  font-weight: var(--salt-text-fontWeight);\n  font-size: var(--salt-text-fontSize);\n  line-height: var(--salt-text-lineHeight);\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=CalendarWeekHeader.css.js.map

package/dist-es/calendar/CalendarWeekHeader.css.js.map

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

package/dist-es/calendar/CalendarWeekHeader.js

@@ -0,0 +1,44 @@
+import { jsx } from 'react/jsx-runtime';
+import { makePrefixer, Text } from '@salt-ds/core';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+import { useLocalization } from '../localization-provider/LocalizationProvider.js';
+import css_248z from './CalendarWeekHeader.css.js';
+import { daysOfWeek } from './internal/utils.js';
+
+const withBaseName = makePrefixer("saltCalendarWeekHeader");
+const CalendarWeekHeader = forwardRef(function CalendarWeekHeader2(props, ref) {
+  const { className, ...rest } = props;
+  const { dateAdapter } = useLocalization();
+  const weekdaysShort = daysOfWeek(dateAdapter, "narrow");
+  const weekdaysLong = daysOfWeek(dateAdapter, "long");
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "salt-calendar-week-header",
+    css: css_248z,
+    window: targetWindow
+  });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-testid": "CalendarWeekHeader",
+      className: clsx(withBaseName(), className),
+      ref,
+      ...rest,
+      children: weekdaysShort.map((day, index) => /* @__PURE__ */ jsx(
+        Text,
+        {
+          "aria-hidden": true,
+          className: withBaseName("dayOfWeek"),
+          children: day
+        },
+        weekdaysLong[index]
+      ))
+    }
+  );
+});
+
+export { CalendarWeekHeader };
+//# sourceMappingURL=CalendarWeekHeader.js.map

package/dist-es/calendar/CalendarWeekHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CalendarWeekHeader.js","sources":["../src/calendar/CalendarWeekHeader.tsx"],"sourcesContent":["import { makePrefixer, Text } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ComponentPropsWithRef, forwardRef } from \"react\";\nimport { useLocalization } from \"../localization-provider\";\nimport calendarWeekHeaderCss from \"./CalendarWeekHeader.css\";\nimport { daysOfWeek } from \"./internal/utils\";\n\n/**\n * Props for the CalendarWeekHeader component.\n */\nexport type CalendarWeekHeaderProps = ComponentPropsWithRef<\"div\"> & {};\n\nconst withBaseName = makePrefixer(\"saltCalendarWeekHeader\");\n\nexport const CalendarWeekHeader = forwardRef(function CalendarWeekHeader(\n  props: CalendarWeekHeaderProps,\n  ref: React.Ref<HTMLDivElement>,\n) {\n  const { className, ...rest } = props;\n  const { dateAdapter } = useLocalization();\n\n  const weekdaysShort = daysOfWeek(dateAdapter, \"narrow\");\n  const weekdaysLong = daysOfWeek(dateAdapter, \"long\");\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-calendar-week-header\",\n    css: calendarWeekHeaderCss,\n    window: targetWindow,\n  });\n\n  return (\n    <div\n      data-testid=\"CalendarWeekHeader\"\n      className={clsx(withBaseName(), className)}\n      ref={ref}\n      {...rest}\n    >\n      {weekdaysShort.map((day, index) => (\n        <Text\n          aria-hidden\n          key={weekdaysLong[index]}\n          className={withBaseName(\"dayOfWeek\")}\n        >\n          {day}\n        </Text>\n      ))}\n    </div>\n  );\n});\n"],"names":["CalendarWeekHeader","calendarWeekHeaderCss"],"mappings":";;;;;;;;;;AAcA,MAAM,YAAA,GAAe,aAAa,wBAAwB,CAAA;AAEnD,MAAM,kBAAA,GAAqB,UAAA,CAAW,SAASA,mBAAAA,CACpD,OACA,GAAA,EACA;AACA,EAAA,MAAM,EAAE,SAAA,EAAW,GAAG,IAAA,EAAK,GAAI,KAAA;AAC/B,EAAA,MAAM,EAAE,WAAA,EAAY,GAAI,eAAA,EAAgB;AAExC,EAAA,MAAM,aAAA,GAAgB,UAAA,CAAW,WAAA,EAAa,QAAQ,CAAA;AACtD,EAAA,MAAM,YAAA,GAAe,UAAA,CAAW,WAAA,EAAa,MAAM,CAAA;AAEnD,EAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,EAAA,wBAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,2BAAA;AAAA,IACR,GAAA,EAAKC,QAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,aAAA,EAAY,oBAAA;AAAA,MACZ,SAAA,EAAW,IAAA,CAAK,YAAA,EAAa,EAAG,SAAS,CAAA;AAAA,MACzC,GAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEH,QAAA,EAAA,aAAA,CAAc,GAAA,CAAI,CAAC,GAAA,EAAK,KAAA,qBACvB,GAAA;AAAA,QAAC,IAAA;AAAA,QAAA;AAAA,UACC,aAAA,EAAW,IAAA;AAAA,UAEX,SAAA,EAAW,aAAa,WAAW,CAAA;AAAA,UAElC,QAAA,EAAA;AAAA,SAAA;AAAA,QAHI,aAAa,KAAK;AAAA,OAK1B;AAAA;AAAA,GACH;AAEJ,CAAC;;;;"}