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

package/dist-es/date-picker/DatePickerRangePanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePickerRangePanel.js","sources":["../src/date-picker/DatePickerRangePanel.tsx"],"sourcesContent":["import {\n  type DateValue,\n  endOfMonth,\n  getLocalTimeZone,\n  isSameMonth,\n  startOfMonth,\n  today,\n} from \"@internationalized/date\";\nimport {\n  FlexItem,\n  FlexLayout,\n  FormFieldContext,\n  type FormFieldContextValue,\n  FormFieldHelperText,\n  StackLayout,\n  makePrefixer,\n  useControlled,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport clsx from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type SyntheticEvent,\n  forwardRef,\n  useCallback,\n  useState,\n} from \"react\";\nimport {\n  Calendar,\n  CalendarDateGrid,\n  type CalendarDateGridProps,\n  CalendarNavigation,\n  type CalendarNavigationProps,\n  type CalendarOffsetProps,\n  type CalendarProps,\n  type CalendarRangeProps,\n  CalendarWeekHeader,\n  type CalendarWeekHeaderProps,\n  type DateRangeSelection,\n  type UseCalendarSelectionRangeProps,\n  getCurrentLocale,\n} from \"../calendar\";\nimport { useDatePickerContext } from \"./DatePickerContext\";\nimport datePickerPanelCss from \"./DatePickerPanel.css\";\n\n/**\n * Props for the DatePickerRangePanel component.\n * @template T - The type of the selected date range.\n */\nexport interface DatePickerRangePanelProps<T>\n  extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * Callback fired when a date range is selected.\n   * @param event - The synthetic event.\n   * @param selectedDate - The selected date range or null.\n   */\n  onSelect?: (event: SyntheticEvent, selectedDate?: T | null) => void;\n\n  /**\n   * Helper text to be displayed below the date picker.\n   */\n  helperText?: string;\n\n  /**\n   * The currently visible month for the start date.\n   */\n  startVisibleMonth?: DateValue;\n\n  /**\n   * The default visible month for the start date.\n   */\n  defaultStartVisibleMonth?: DateValue;\n\n  /**\n   * Callback fired when the visible month for the start date changes.\n   * @param event - The synthetic event.\n   * @param visibleMonth - The new visible month for the start date.\n   */\n  onStartVisibleMonthChange?: (\n    event: SyntheticEvent,\n    visibleMonth: DateValue,\n  ) => void;\n\n  /**\n   * The currently visible month for the end date.\n   */\n  endVisibleMonth?: DateValue;\n\n  /**\n   * The default visible month for the end date.\n   */\n  defaultEndVisibleMonth?: DateValue;\n\n  /**\n   * Callback fired when the visible month for the end date changes.\n   * @param event - The synthetic event.\n   * @param visibleMonth - The new visible month for the end date.\n   */\n  onEndVisibleMonthChange?: (\n    event: SyntheticEvent,\n    visibleMonth: DateValue,\n  ) => void;\n\n  /**\n   * Props to be passed to the start date CalendarNavigation component.\n   */\n  StartCalendarNavigationProps?: CalendarNavigationProps;\n\n  /**\n   * Props to be passed to the start date calendar component.\n   */\n  StartCalendarProps?: Partial<\n    Omit<\n      CalendarRangeProps | CalendarOffsetProps,\n      | \"selectedDate\"\n      | \"defaultSelectedDate\"\n      | \"onSelectedDateChange\"\n      | \"onVisibleMonthChange\"\n    >\n  >;\n  /**\n   * Props to be passed to the start date CalendarWeekHeader component.\n   */\n  StartCalendarWeekHeaderProps?: CalendarWeekHeaderProps;\n  /**\n   * Props to be passed to the start date CalendarDataGrid component.\n   */\n  StartCalendarDataGridProps?: CalendarDateGridProps;\n\n  /**\n   * Props to be passed to the end date CalendarNavigation component.\n   */\n  EndCalendarProps?: Partial<\n    Omit<\n      CalendarRangeProps,\n      | \"selectedDate\"\n      | \"defaultSelectedDate\"\n      | \"onSelectedDateChange\"\n      | \"onVisibleMonthChange\"\n    >\n  >;\n\n  /**\n   * Props to be passed to the end date CalendarNavigation component.\n   */\n  EndCalendarNavigationProps?: CalendarNavigationProps;\n  /**\n   * Props to be passed to the end date CalendarWeekHeader component.\n   */\n  EndCalendarWeekHeaderProps?: CalendarWeekHeaderProps;\n  /**\n   * Props to be passed to the end date CalendarDataGrid component.\n   */\n  EndCalendarDataGridProps?: CalendarDateGridProps;\n}\n\nfunction getFallbackVisibleMonths(\n  selectedDate: DateRangeSelection | null,\n  timeZone: string,\n) {\n  const createConsecutiveRange = (date: DateValue) => [\n    startOfMonth(date),\n    startOfMonth(date).add({ months: 1 }),\n  ];\n\n  if (selectedDate?.startDate) {\n    const { startDate, endDate } = selectedDate;\n    if (endDate) {\n      return isSameMonth(startDate, endDate)\n        ? createConsecutiveRange(startDate)\n        : [startOfMonth(startDate), startOfMonth(endDate)];\n    }\n    return createConsecutiveRange(startDate);\n  }\n\n  const currentMonth = startOfMonth(today(timeZone));\n  return [currentMonth, currentMonth.add({ months: 1 })];\n}\n\nconst withBaseName = makePrefixer(\"saltDatePickerPanel\");\n\nexport const DatePickerRangePanel = forwardRef<\n  HTMLDivElement,\n  DatePickerRangePanelProps<DateRangeSelection>\n>(function DatePickerRangePanel(props, ref) {\n  const {\n    className,\n    defaultStartVisibleMonth: defaultStartVisibleMonthProp,\n    startVisibleMonth: startVisibleMonthProp,\n    onStartVisibleMonthChange,\n    defaultEndVisibleMonth: defaultEndVisibleMonthProp,\n    endVisibleMonth: endVisibleMonthProp,\n    onEndVisibleMonthChange,\n    helperText,\n    onSelect,\n    StartCalendarProps: StartCalendarPropsProp,\n    StartCalendarNavigationProps,\n    StartCalendarWeekHeaderProps,\n    StartCalendarDataGridProps,\n    EndCalendarProps: EndCalendarPropsProp,\n    EndCalendarNavigationProps,\n    EndCalendarWeekHeaderProps,\n    EndCalendarDataGridProps,\n    ...rest\n  } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-date-picker-range-panel\",\n    css: datePickerPanelCss,\n    window: targetWindow,\n  });\n\n  const {\n    state: {\n      selectedDate,\n      timeZone = getLocalTimeZone(),\n      minDate = startOfMonth(today(timeZone)),\n      maxDate = minDate.add({ months: 1 }),\n      locale = getCurrentLocale(),\n    },\n    helpers: { setSelectedDate },\n  } = useDatePickerContext({ selectionVariant: \"range\" });\n\n  const [hoveredDate, setHoveredDate] = useState<DateValue | null>(null);\n\n  const [[fallbackStartVisibleMonth, fallbackEndVisibleMonth]] = useState(() =>\n    getFallbackVisibleMonths(selectedDate, timeZone),\n  );\n\n  const [startVisibleMonth, setStartVisibleMonth] = useControlled({\n    controlled: startVisibleMonthProp,\n    default: defaultStartVisibleMonthProp || fallbackStartVisibleMonth,\n    name: \"DatePickerRangePanel\",\n    state: \"startVisibleMonth\",\n  });\n\n  const [endVisibleMonth, setEndVisibleMonth] = useControlled({\n    controlled: endVisibleMonthProp,\n    default: defaultEndVisibleMonthProp || fallbackEndVisibleMonth,\n    name: \"DatePickerRangePanel\",\n    state: \"endVisibleMonth\",\n  });\n\n  const handleSelectedDateChange = useCallback(\n    (event: SyntheticEvent, newDate: DateRangeSelection | null) => {\n      setSelectedDate(newDate, { startDate: false, endDate: false });\n      onSelect?.(event, newDate);\n    },\n    [onSelect, setSelectedDate],\n  );\n\n  const handleHoveredStartDateChange: CalendarProps[\"onHoveredDateChange\"] =\n    useCallback(\n      (event: SyntheticEvent, newHoveredDate: DateValue | null) => {\n        setHoveredDate(newHoveredDate);\n        if (newHoveredDate && StartCalendarPropsProp?.onHoveredDateChange) {\n          StartCalendarPropsProp.onHoveredDateChange?.(event, newHoveredDate);\n        }\n      },\n      [StartCalendarPropsProp?.onHoveredDateChange],\n    );\n  const handleHoveredEndDateChange = useCallback(\n    (event: SyntheticEvent, newHoveredDate: DateValue | null) => {\n      setHoveredDate(newHoveredDate);\n      if (newHoveredDate && EndCalendarPropsProp?.onHoveredDateChange) {\n        EndCalendarPropsProp.onHoveredDateChange(event, newHoveredDate);\n      }\n    },\n    [EndCalendarPropsProp?.onHoveredDateChange],\n  );\n\n  const handleStartVisibleMonthChange = useCallback(\n    (event: SyntheticEvent, newVisibleMonth: DateValue) => {\n      setStartVisibleMonth(newVisibleMonth);\n      if (newVisibleMonth.compare(endVisibleMonth) >= 0) {\n        setEndVisibleMonth(newVisibleMonth.add({ months: 1 }));\n      }\n      onStartVisibleMonthChange?.(event, newVisibleMonth);\n    },\n    [endVisibleMonth, onStartVisibleMonthChange],\n  );\n\n  const handleEndVisibleMonthChange = useCallback(\n    (event: SyntheticEvent, newVisibleMonth: DateValue) => {\n      setEndVisibleMonth(newVisibleMonth);\n      if (newVisibleMonth.compare(startVisibleMonth) <= 0) {\n        setStartVisibleMonth(\n          startOfMonth(newVisibleMonth.subtract({ months: 1 })),\n        );\n      }\n      onEndVisibleMonthChange?.(event, newVisibleMonth);\n    },\n    [startVisibleMonth, onEndVisibleMonthChange],\n  );\n\n  function getHoveredDate(\n    date?: DateValue | null,\n    hoveredDate?: DateValue | null,\n  ) {\n    return date && hoveredDate && hoveredDate?.compare(endOfMonth(date)) > 0\n      ? endOfMonth(date)\n      : hoveredDate;\n  }\n\n  const StartCalendarProps = {\n    visibleMonth: startVisibleMonth,\n    hoveredDate: getHoveredDate(selectedDate?.startDate, hoveredDate),\n    selectedDate: selectedDate as DateRangeSelection,\n    onHoveredDateChange: handleHoveredStartDateChange,\n    onVisibleMonthChange: handleStartVisibleMonthChange,\n    onSelectedDateChange: handleSelectedDateChange,\n    hideOutOfRangeDates: true,\n    minDate,\n    maxDate,\n    locale,\n    timeZone,\n    ...StartCalendarPropsProp,\n  } as Partial<UseCalendarSelectionRangeProps>;\n  const EndCalendarProps = {\n    visibleMonth: endVisibleMonth,\n    hoveredDate,\n    selectedDate: selectedDate as DateRangeSelection,\n    onHoveredDateChange: handleHoveredEndDateChange,\n    onVisibleMonthChange: handleEndVisibleMonthChange,\n    onSelectedDateChange: handleSelectedDateChange,\n    hideOutOfRangeDates: true,\n    minDate,\n    maxDate,\n    locale,\n    timeZone,\n    ...EndCalendarPropsProp,\n  } as Partial<UseCalendarSelectionRangeProps>;\n\n  return (\n    <StackLayout\n      separators\n      gap={0}\n      className={clsx(className, withBaseName(\"container\"))}\n      ref={ref}\n      {...rest}\n    >\n      {helperText && (\n        <FlexItem className={withBaseName(\"header\")}>\n          <FormFieldHelperText>{helperText}</FormFieldHelperText>\n        </FlexItem>\n      )}\n      <FlexLayout gap={0}>\n        {/* Avoid Dropdowns in Calendar inheriting the FormField's state */}\n        <FormFieldContext.Provider value={{} as FormFieldContextValue}>\n          <Calendar selectionVariant={\"range\"} {...StartCalendarProps}>\n            <CalendarNavigation {...StartCalendarNavigationProps} />\n            <CalendarWeekHeader {...StartCalendarWeekHeaderProps} />\n            <CalendarDateGrid {...StartCalendarDataGridProps} />\n          </Calendar>\n          <Calendar selectionVariant={\"range\"} {...EndCalendarProps}>\n            <CalendarNavigation {...EndCalendarNavigationProps} />\n            <CalendarWeekHeader {...EndCalendarWeekHeaderProps} />\n            <CalendarDateGrid {...EndCalendarDataGridProps} />\n          </Calendar>\n        </FormFieldContext.Provider>\n      </FlexLayout>\n    </StackLayout>\n  );\n});\n"],"names":["DatePickerRangePanel","datePickerPanelCss","hoveredDate"],"mappings":"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"}
+{"version":3,"file":"DatePickerRangePanel.js","sources":["../src/date-picker/DatePickerRangePanel.tsx"],"sourcesContent":["import {\n  type DateValue,\n  endOfMonth,\n  getLocalTimeZone,\n  isSameMonth,\n  startOfMonth,\n  today,\n} from \"@internationalized/date\";\nimport {\n  FlexItem,\n  FlexLayout,\n  FormFieldContext,\n  type FormFieldContextValue,\n  FormFieldHelperText,\n  StackLayout,\n  makePrefixer,\n  useControlled,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport clsx from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type SyntheticEvent,\n  forwardRef,\n  useCallback,\n  useState,\n} from \"react\";\nimport {\n  Calendar,\n  CalendarDateGrid,\n  type CalendarDateGridProps,\n  CalendarNavigation,\n  type CalendarNavigationProps,\n  type CalendarOffsetProps,\n  type CalendarProps,\n  type CalendarRangeProps,\n  CalendarWeekHeader,\n  type CalendarWeekHeaderProps,\n  type DateRangeSelection,\n  type UseCalendarSelectionRangeProps,\n  getCurrentLocale,\n} from \"../calendar\";\nimport { useDatePickerContext } from \"./DatePickerContext\";\nimport datePickerPanelCss from \"./DatePickerPanel.css\";\n\n/**\n * Props for the DatePickerRangePanel component.\n * @template T - The type of the selected date range.\n */\nexport interface DatePickerRangePanelProps<T>\n  extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * Callback fired when a date range is selected.\n   * @param event - The synthetic event.\n   * @param selectedDate - The selected date range or null.\n   */\n  onSelect?: (event: SyntheticEvent, selectedDate?: T | null) => void;\n\n  /**\n   * Helper text to be displayed below the date picker.\n   */\n  helperText?: string;\n\n  /**\n   * The currently visible month for the start date.\n   */\n  startVisibleMonth?: DateValue;\n\n  /**\n   * The default visible month for the start date.\n   */\n  defaultStartVisibleMonth?: DateValue;\n\n  /**\n   * Callback fired when the visible month for the start date changes.\n   * @param event - The synthetic event.\n   * @param visibleMonth - The new visible month for the start date.\n   */\n  onStartVisibleMonthChange?: (\n    event: SyntheticEvent,\n    visibleMonth: DateValue,\n  ) => void;\n\n  /**\n   * The currently visible month for the end date.\n   */\n  endVisibleMonth?: DateValue;\n\n  /**\n   * The default visible month for the end date.\n   */\n  defaultEndVisibleMonth?: DateValue;\n\n  /**\n   * Callback fired when the visible month for the end date changes.\n   * @param event - The synthetic event.\n   * @param visibleMonth - The new visible month for the end date.\n   */\n  onEndVisibleMonthChange?: (\n    event: SyntheticEvent,\n    visibleMonth: DateValue,\n  ) => void;\n\n  /**\n   * Props to be passed to the start date CalendarNavigation component.\n   */\n  StartCalendarNavigationProps?: CalendarNavigationProps;\n\n  /**\n   * Props to be passed to the start date calendar component.\n   */\n  StartCalendarProps?: Partial<\n    Omit<\n      CalendarRangeProps | CalendarOffsetProps,\n      | \"selectedDate\"\n      | \"defaultSelectedDate\"\n      | \"onSelectedDateChange\"\n      | \"onVisibleMonthChange\"\n    >\n  >;\n  /**\n   * Props to be passed to the start date CalendarWeekHeader component.\n   */\n  StartCalendarWeekHeaderProps?: CalendarWeekHeaderProps;\n  /**\n   * Props to be passed to the start date CalendarDataGrid component.\n   */\n  StartCalendarDataGridProps?: CalendarDateGridProps;\n\n  /**\n   * Props to be passed to the end date CalendarNavigation component.\n   */\n  EndCalendarProps?: Partial<\n    Omit<\n      CalendarRangeProps,\n      | \"selectedDate\"\n      | \"defaultSelectedDate\"\n      | \"onSelectedDateChange\"\n      | \"onVisibleMonthChange\"\n    >\n  >;\n\n  /**\n   * Props to be passed to the end date CalendarNavigation component.\n   */\n  EndCalendarNavigationProps?: CalendarNavigationProps;\n  /**\n   * Props to be passed to the end date CalendarWeekHeader component.\n   */\n  EndCalendarWeekHeaderProps?: CalendarWeekHeaderProps;\n  /**\n   * Props to be passed to the end date CalendarDataGrid component.\n   */\n  EndCalendarDataGridProps?: CalendarDateGridProps;\n}\n\nfunction getFallbackVisibleMonths(\n  selectedDate: DateRangeSelection | null,\n  timeZone: string,\n) {\n  const createConsecutiveRange = (date: DateValue) => [\n    startOfMonth(date),\n    startOfMonth(date).add({ months: 1 }),\n  ];\n\n  if (selectedDate?.startDate) {\n    const { startDate, endDate } = selectedDate;\n    if (endDate) {\n      return isSameMonth(startDate, endDate)\n        ? createConsecutiveRange(startDate)\n        : [startOfMonth(startDate), startOfMonth(endDate)];\n    }\n    return createConsecutiveRange(startDate);\n  }\n\n  const currentMonth = startOfMonth(today(timeZone));\n  return [currentMonth, currentMonth.add({ months: 1 })];\n}\n\nconst withBaseName = makePrefixer(\"saltDatePickerPanel\");\n\nexport const DatePickerRangePanel = forwardRef<\n  HTMLDivElement,\n  DatePickerRangePanelProps<DateRangeSelection>\n>(function DatePickerRangePanel(props, ref) {\n  const {\n    className,\n    defaultStartVisibleMonth: defaultStartVisibleMonthProp,\n    startVisibleMonth: startVisibleMonthProp,\n    onStartVisibleMonthChange,\n    defaultEndVisibleMonth: defaultEndVisibleMonthProp,\n    endVisibleMonth: endVisibleMonthProp,\n    onEndVisibleMonthChange,\n    helperText,\n    onSelect,\n    StartCalendarProps: StartCalendarPropsProp,\n    StartCalendarNavigationProps,\n    StartCalendarWeekHeaderProps,\n    StartCalendarDataGridProps,\n    EndCalendarProps: EndCalendarPropsProp,\n    EndCalendarNavigationProps,\n    EndCalendarWeekHeaderProps,\n    EndCalendarDataGridProps,\n    ...rest\n  } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-date-picker-range-panel\",\n    css: datePickerPanelCss,\n    window: targetWindow,\n  });\n\n  const {\n    state: {\n      selectedDate,\n      timeZone = getLocalTimeZone(),\n      minDate = startOfMonth(today(timeZone)),\n      maxDate = minDate.add({ months: 1 }),\n      locale = getCurrentLocale(),\n    },\n    helpers: { setSelectedDate },\n  } = useDatePickerContext({ selectionVariant: \"range\" });\n\n  const [hoveredDate, setHoveredDate] = useState<DateValue | null>(null);\n\n  const [[fallbackStartVisibleMonth, fallbackEndVisibleMonth]] = useState(() =>\n    getFallbackVisibleMonths(selectedDate, timeZone),\n  );\n\n  const [startVisibleMonth, setStartVisibleMonth] = useControlled({\n    controlled: startVisibleMonthProp,\n    default: defaultStartVisibleMonthProp || fallbackStartVisibleMonth,\n    name: \"DatePickerRangePanel\",\n    state: \"startVisibleMonth\",\n  });\n\n  const [endVisibleMonth, setEndVisibleMonth] = useControlled({\n    controlled: endVisibleMonthProp,\n    default: defaultEndVisibleMonthProp || fallbackEndVisibleMonth,\n    name: \"DatePickerRangePanel\",\n    state: \"endVisibleMonth\",\n  });\n\n  const handleSelectedDateChange = useCallback(\n    (event: SyntheticEvent, newDate: DateRangeSelection | null) => {\n      setSelectedDate(newDate, { startDate: false, endDate: false });\n      onSelect?.(event, newDate);\n    },\n    [onSelect, setSelectedDate],\n  );\n\n  const handleHoveredStartDateChange: CalendarProps[\"onHoveredDateChange\"] =\n    useCallback(\n      (event: SyntheticEvent, newHoveredDate: DateValue | null) => {\n        setHoveredDate(newHoveredDate);\n        if (newHoveredDate && StartCalendarPropsProp?.onHoveredDateChange) {\n          StartCalendarPropsProp.onHoveredDateChange?.(event, newHoveredDate);\n        }\n      },\n      [StartCalendarPropsProp?.onHoveredDateChange],\n    );\n  const handleHoveredEndDateChange = useCallback(\n    (event: SyntheticEvent, newHoveredDate: DateValue | null) => {\n      setHoveredDate(newHoveredDate);\n      if (newHoveredDate && EndCalendarPropsProp?.onHoveredDateChange) {\n        EndCalendarPropsProp.onHoveredDateChange(event, newHoveredDate);\n      }\n    },\n    [EndCalendarPropsProp?.onHoveredDateChange],\n  );\n\n  const handleStartVisibleMonthChange = useCallback(\n    (event: SyntheticEvent, newVisibleMonth: DateValue) => {\n      setStartVisibleMonth(newVisibleMonth);\n      if (newVisibleMonth.compare(endVisibleMonth) >= 0) {\n        setEndVisibleMonth(newVisibleMonth.add({ months: 1 }));\n      }\n      onStartVisibleMonthChange?.(event, newVisibleMonth);\n    },\n    [endVisibleMonth, onStartVisibleMonthChange],\n  );\n\n  const handleEndVisibleMonthChange = useCallback(\n    (event: SyntheticEvent, newVisibleMonth: DateValue) => {\n      setEndVisibleMonth(newVisibleMonth);\n      if (newVisibleMonth.compare(startVisibleMonth) <= 0) {\n        setStartVisibleMonth(\n          startOfMonth(newVisibleMonth.subtract({ months: 1 })),\n        );\n      }\n      onEndVisibleMonthChange?.(event, newVisibleMonth);\n    },\n    [startVisibleMonth, onEndVisibleMonthChange],\n  );\n\n  function getHoveredDate(\n    date?: DateValue | null,\n    hoveredDate?: DateValue | null,\n  ) {\n    return date && hoveredDate && hoveredDate?.compare(endOfMonth(date)) > 0\n      ? endOfMonth(date)\n      : hoveredDate;\n  }\n\n  const StartCalendarProps = {\n    visibleMonth: startVisibleMonth,\n    hoveredDate: getHoveredDate(selectedDate?.startDate, hoveredDate),\n    selectedDate: selectedDate as DateRangeSelection,\n    onHoveredDateChange: handleHoveredStartDateChange,\n    onVisibleMonthChange: handleStartVisibleMonthChange,\n    onSelectedDateChange: handleSelectedDateChange,\n    hideOutOfRangeDates: true,\n    minDate,\n    maxDate,\n    locale,\n    timeZone,\n    ...StartCalendarPropsProp,\n  } as Partial<UseCalendarSelectionRangeProps>;\n  const EndCalendarProps = {\n    visibleMonth: endVisibleMonth,\n    hoveredDate,\n    selectedDate: selectedDate as DateRangeSelection,\n    onHoveredDateChange: handleHoveredEndDateChange,\n    onVisibleMonthChange: handleEndVisibleMonthChange,\n    onSelectedDateChange: handleSelectedDateChange,\n    hideOutOfRangeDates: true,\n    minDate,\n    maxDate,\n    locale,\n    timeZone,\n    ...EndCalendarPropsProp,\n  } as Partial<UseCalendarSelectionRangeProps>;\n\n  return (\n    <StackLayout\n      separators\n      gap={0}\n      className={clsx(className, withBaseName(\"container\"))}\n      ref={ref}\n      {...rest}\n    >\n      {helperText && (\n        <FlexItem className={withBaseName(\"header\")}>\n          <FormFieldHelperText>{helperText}</FormFieldHelperText>\n        </FlexItem>\n      )}\n      <FlexLayout gap={0}>\n        {/* Avoid Dropdowns in Calendar inheriting the FormField's state */}\n        <FormFieldContext.Provider value={{} as FormFieldContextValue}>\n          <Calendar selectionVariant={\"range\"} {...StartCalendarProps}>\n            <CalendarNavigation {...StartCalendarNavigationProps} />\n            <CalendarWeekHeader {...StartCalendarWeekHeaderProps} />\n            <CalendarDateGrid {...StartCalendarDataGridProps} />\n          </Calendar>\n          <Calendar selectionVariant={\"range\"} {...EndCalendarProps}>\n            <CalendarNavigation {...EndCalendarNavigationProps} />\n            <CalendarWeekHeader {...EndCalendarWeekHeaderProps} />\n            <CalendarDateGrid {...EndCalendarDataGridProps} />\n          </Calendar>\n        </FormFieldContext.Provider>\n      </FlexLayout>\n    </StackLayout>\n  );\n});\n"],"names":["DatePickerRangePanel","datePickerPanelCss","hoveredDate"],"mappings":"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"}

package/dist-es/date-picker/DatePickerSingleInput.js

@@ -61,33 +61,39 @@ const DatePickerSingleInput = forwardRef(function DatePickerSingleInput2(props,
       setSelectedDate(((_b = prevState == null ? void 0 : prevState.current) == null ? void 0 : _b.date) || null, false);
     }
   }, [cancelled]);
-  return /* @__PURE__ */ jsx(DateInputSingle, {
-    value: value || "",
-    locale,
-    timeZone,
-    className: clsx(withBaseName(), className),
-    ref: inputRef,
-    date: selectedDate || null,
-    readOnly,
-    onDateChange: handleDateChange,
-    onDateValueChange: handleDateValueChange,
-    endAdornment: /* @__PURE__ */ jsx(Button, {
-      appearance: "transparent",
-      sentiment: "neutral",
-      onClick: handleCalendarButton,
-      disabled,
-      "aria-label": "Open Calendar",
-      children: /* @__PURE__ */ jsx(CalendarIcon, {})
-    }),
-    ...getReferenceProps({
-      ...rest,
-      onKeyDown: (event) => {
-        if (event.key === "ArrowDown") {
-          setOpen(true);
+  return /* @__PURE__ */ jsx(
+    DateInputSingle,
+    {
+      value: value || "",
+      locale,
+      timeZone,
+      className: clsx(withBaseName(), className),
+      ref: inputRef,
+      date: selectedDate || null,
+      readOnly,
+      onDateChange: handleDateChange,
+      onDateValueChange: handleDateValueChange,
+      endAdornment: /* @__PURE__ */ jsx(
+        Button,
+        {
+          appearance: "transparent",
+          sentiment: "neutral",
+          onClick: handleCalendarButton,
+          disabled,
+          "aria-label": "Open Calendar",
+          children: /* @__PURE__ */ jsx(CalendarIcon, {})
         }
-      }
-    })
-  });
+      ),
+      ...getReferenceProps({
+        ...rest,
+        onKeyDown: (event) => {
+          if (event.key === "ArrowDown") {
+            setOpen(true);
+          }
+        }
+      })
+    }
+  );
 });
 
 export { DatePickerSingleInput };

package/dist-es/date-picker/DatePickerSingleInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePickerSingleInput.js","sources":["../src/date-picker/DatePickerSingleInput.tsx"],"sourcesContent":["import {\n  Button,\n  makePrefixer,\n  useControlled,\n  useForkRef,\n  useIcon,\n} from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport {\n  type KeyboardEvent,\n  type SyntheticEvent,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useRef,\n} from \"react\";\nimport type { SingleDateSelection } from \"../calendar\";\nimport {\n  DateInputSingle,\n  type DateInputSingleError,\n  type DateInputSingleProps,\n} from \"../date-input\";\nimport { useDatePickerContext } from \"./DatePickerContext\";\nimport { useDatePickerOverlay } from \"./DatePickerOverlayProvider\";\n\nconst withBaseName = makePrefixer(\"saltDatePickerSingleInput\");\n\n/**\n * Props for the DatePickerSingleInput component.\n */\nexport interface DatePickerSingleInputProps extends DateInputSingleProps {}\n\nexport const DatePickerSingleInput = forwardRef<\n  HTMLDivElement,\n  DatePickerSingleInputProps\n>(function DatePickerSingleInput(props, ref) {\n  const {\n    className,\n    onFocus,\n    onBlur,\n    value: valueProp,\n    defaultValue,\n    onDateValueChange,\n    ...rest\n  } = props;\n\n  const { CalendarIcon } = useIcon();\n\n  const {\n    state: { selectedDate, disabled, readOnly, cancelled, locale, timeZone },\n    helpers: { setSelectedDate },\n  } = useDatePickerContext({ selectionVariant: \"single\" });\n  const {\n    state: { open, floatingUIResult },\n    helpers: { getReferenceProps, setOpen },\n  } = useDatePickerOverlay();\n\n  const inputRef = useForkRef<HTMLDivElement>(ref, floatingUIResult?.reference);\n  const prevState = useRef<\n    { date: typeof selectedDate; value: typeof valueProp } | undefined\n  >();\n\n  const [value, setValue] = useControlled({\n    controlled: valueProp,\n    default: defaultValue,\n    name: \"DatePickerSingleInput\",\n    state: \"value\",\n  });\n\n  const handleCalendarButton = useCallback(() => {\n    setOpen(!open);\n  }, [open, setOpen]);\n\n  const handleDateChange = useCallback(\n    (\n      _event: SyntheticEvent,\n      newDate: SingleDateSelection | null,\n      error: DateInputSingleError,\n    ) => {\n      setSelectedDate(newDate, error);\n    },\n    [setSelectedDate],\n  );\n\n  const handleDateValueChange = (\n    newDateValue: string,\n    isFormatted: boolean,\n  ) => {\n    setValue(newDateValue);\n    onDateValueChange?.(newDateValue, isFormatted);\n  };\n\n  // biome-ignore lint/correctness/useExhaustiveDependencies: should run when open changes and not selected date or value\n  useEffect(() => {\n    if (open) {\n      prevState.current = { date: selectedDate, value };\n    }\n  }, [open]);\n\n  // biome-ignore lint/correctness/useExhaustiveDependencies: avoid excessive re-rendering\n  useEffect(() => {\n    if (cancelled) {\n      setValue(prevState?.current?.value);\n      setSelectedDate(prevState?.current?.date || null, false);\n    }\n  }, [cancelled]);\n\n  return (\n    <DateInputSingle\n      value={value || \"\"}\n      locale={locale}\n      timeZone={timeZone}\n      className={clsx(withBaseName(), className)}\n      ref={inputRef}\n      date={selectedDate || null}\n      readOnly={readOnly}\n      onDateChange={handleDateChange}\n      onDateValueChange={handleDateValueChange}\n      endAdornment={\n        <Button\n          appearance=\"transparent\"\n          sentiment=\"neutral\"\n          onClick={handleCalendarButton}\n          disabled={disabled}\n          aria-label=\"Open Calendar\"\n        >\n          <CalendarIcon />\n        </Button>\n      }\n      {...getReferenceProps({\n        ...rest,\n        onKeyDown: (event: KeyboardEvent<HTMLInputElement>) => {\n          if (event.key === \"ArrowDown\") {\n            setOpen(true);\n          }\n        },\n      })}\n    />\n  );\n});\n"],"names":["DatePickerSingleInput"],"mappings":"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"}
+{"version":3,"file":"DatePickerSingleInput.js","sources":["../src/date-picker/DatePickerSingleInput.tsx"],"sourcesContent":["import {\n  Button,\n  makePrefixer,\n  useControlled,\n  useForkRef,\n  useIcon,\n} from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport {\n  type KeyboardEvent,\n  type SyntheticEvent,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useRef,\n} from \"react\";\nimport type { SingleDateSelection } from \"../calendar\";\nimport {\n  DateInputSingle,\n  type DateInputSingleError,\n  type DateInputSingleProps,\n} from \"../date-input\";\nimport { useDatePickerContext } from \"./DatePickerContext\";\nimport { useDatePickerOverlay } from \"./DatePickerOverlayProvider\";\n\nconst withBaseName = makePrefixer(\"saltDatePickerSingleInput\");\n\n/**\n * Props for the DatePickerSingleInput component.\n */\nexport interface DatePickerSingleInputProps extends DateInputSingleProps {}\n\nexport const DatePickerSingleInput = forwardRef<\n  HTMLDivElement,\n  DatePickerSingleInputProps\n>(function DatePickerSingleInput(props, ref) {\n  const {\n    className,\n    onFocus,\n    onBlur,\n    value: valueProp,\n    defaultValue,\n    onDateValueChange,\n    ...rest\n  } = props;\n\n  const { CalendarIcon } = useIcon();\n\n  const {\n    state: { selectedDate, disabled, readOnly, cancelled, locale, timeZone },\n    helpers: { setSelectedDate },\n  } = useDatePickerContext({ selectionVariant: \"single\" });\n  const {\n    state: { open, floatingUIResult },\n    helpers: { getReferenceProps, setOpen },\n  } = useDatePickerOverlay();\n\n  const inputRef = useForkRef<HTMLDivElement>(ref, floatingUIResult?.reference);\n  const prevState = useRef<\n    { date: typeof selectedDate; value: typeof valueProp } | undefined\n  >();\n\n  const [value, setValue] = useControlled({\n    controlled: valueProp,\n    default: defaultValue,\n    name: \"DatePickerSingleInput\",\n    state: \"value\",\n  });\n\n  const handleCalendarButton = useCallback(() => {\n    setOpen(!open);\n  }, [open, setOpen]);\n\n  const handleDateChange = useCallback(\n    (\n      _event: SyntheticEvent,\n      newDate: SingleDateSelection | null,\n      error: DateInputSingleError,\n    ) => {\n      setSelectedDate(newDate, error);\n    },\n    [setSelectedDate],\n  );\n\n  const handleDateValueChange = (\n    newDateValue: string,\n    isFormatted: boolean,\n  ) => {\n    setValue(newDateValue);\n    onDateValueChange?.(newDateValue, isFormatted);\n  };\n\n  // biome-ignore lint/correctness/useExhaustiveDependencies: should run when open changes and not selected date or value\n  useEffect(() => {\n    if (open) {\n      prevState.current = { date: selectedDate, value };\n    }\n  }, [open]);\n\n  // biome-ignore lint/correctness/useExhaustiveDependencies: avoid excessive re-rendering\n  useEffect(() => {\n    if (cancelled) {\n      setValue(prevState?.current?.value);\n      setSelectedDate(prevState?.current?.date || null, false);\n    }\n  }, [cancelled]);\n\n  return (\n    <DateInputSingle\n      value={value || \"\"}\n      locale={locale}\n      timeZone={timeZone}\n      className={clsx(withBaseName(), className)}\n      ref={inputRef}\n      date={selectedDate || null}\n      readOnly={readOnly}\n      onDateChange={handleDateChange}\n      onDateValueChange={handleDateValueChange}\n      endAdornment={\n        <Button\n          appearance=\"transparent\"\n          sentiment=\"neutral\"\n          onClick={handleCalendarButton}\n          disabled={disabled}\n          aria-label=\"Open Calendar\"\n        >\n          <CalendarIcon />\n        </Button>\n      }\n      {...getReferenceProps({\n        ...rest,\n        onKeyDown: (event: KeyboardEvent<HTMLInputElement>) => {\n          if (event.key === \"ArrowDown\") {\n            setOpen(true);\n          }\n        },\n      })}\n    />\n  );\n});\n"],"names":["DatePickerSingleInput"],"mappings":"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"}

package/dist-es/date-picker/DatePickerSinglePanel.js

@@ -12,14 +12,8 @@ import { CalendarDateGrid } from '../calendar/CalendarDateGrid.js';
 import '../calendar/internal/CalendarContext.js';
 import { getCurrentLocale } from '../calendar/formatDate.js';
 import '../calendar/useCalendarSelection.js';
-import css_248z from './DatePickerPanel.css.js';
-import './DatePicker.js';
-import './DatePickerActions.js';
 import { useDatePickerContext } from './DatePickerContext.js';
-import './DatePickerOverlay.js';
-import './DatePickerSingleInput.js';
-import './DatePickerRangeInput.js';
-import './DatePickerRangePanel.js';
+import css_248z from './DatePickerPanel.css.js';
 
 const withBaseName = makePrefixer("saltDatePickerPanel");
 const DatePickerSinglePanel = forwardRef(function DatePickerSinglePanel2(props, ref) {
@@ -102,42 +96,24 @@ const DatePickerSinglePanel = forwardRef(function DatePickerSinglePanel2(props,
     timeZone,
     ...CalendarProps
   };
-  return /* @__PURE__ */ jsxs(StackLayout, {
-    separators: true,
-    gap: 0,
-    className: clsx(className, withBaseName("container")),
-    ref,
-    ...rest,
-    children: [
-      helperText && /* @__PURE__ */ jsx(FlexItem, {
-        className: withBaseName("header"),
-        children: /* @__PURE__ */ jsx(FormFieldHelperText, {
-          children: helperText
-        })
-      }),
-      /* @__PURE__ */ jsx(FlexLayout, {
-        gap: 0,
-        children: /* @__PURE__ */ jsx(FormFieldContext.Provider, {
-          value: {},
-          children: /* @__PURE__ */ jsxs(Calendar, {
-            selectionVariant: "single",
-            ...baseCalendarProps,
-            children: [
-              /* @__PURE__ */ jsx(CalendarNavigation, {
-                ...CalendarNavigationProps
-              }),
-              /* @__PURE__ */ jsx(CalendarWeekHeader, {
-                ...CalendarWeekHeaderProps
-              }),
-              /* @__PURE__ */ jsx(CalendarDateGrid, {
-                ...CalendarDataGridProps
-              })
-            ]
-          })
-        })
-      })
-    ]
-  });
+  return /* @__PURE__ */ jsxs(
+    StackLayout,
+    {
+      separators: true,
+      gap: 0,
+      className: clsx(className, withBaseName("container")),
+      ref,
+      ...rest,
+      children: [
+        helperText && /* @__PURE__ */ jsx(FlexItem, { className: withBaseName("header"), children: /* @__PURE__ */ jsx(FormFieldHelperText, { children: helperText }) }),
+        /* @__PURE__ */ jsx(FlexLayout, { gap: 0, children: /* @__PURE__ */ jsx(FormFieldContext.Provider, { value: {}, children: /* @__PURE__ */ jsxs(Calendar, { selectionVariant: "single", ...baseCalendarProps, children: [
+          /* @__PURE__ */ jsx(CalendarNavigation, { ...CalendarNavigationProps }),
+          /* @__PURE__ */ jsx(CalendarWeekHeader, { ...CalendarWeekHeaderProps }),
+          /* @__PURE__ */ jsx(CalendarDateGrid, { ...CalendarDataGridProps })
+        ] }) }) })
+      ]
+    }
+  );
 });
 
 export { DatePickerSinglePanel };

package/dist-es/date-picker/DatePickerSinglePanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePickerSinglePanel.js","sources":["../src/date-picker/DatePickerSinglePanel.tsx"],"sourcesContent":["import {\n  type DateValue,\n  getLocalTimeZone,\n  startOfMonth,\n  today,\n} from \"@internationalized/date\";\nimport {\n  FlexItem,\n  FlexLayout,\n  FormFieldContext,\n  type FormFieldContextValue,\n  FormFieldHelperText,\n  StackLayout,\n  makePrefixer,\n  useControlled,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport clsx from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type SyntheticEvent,\n  forwardRef,\n  useCallback,\n  useState,\n} from \"react\";\nimport {\n  CalendarDateGrid,\n  type CalendarDateGridProps,\n  CalendarNavigation,\n  type CalendarNavigationProps,\n  type CalendarSingleProps,\n  CalendarWeekHeader,\n  type CalendarWeekHeaderProps,\n  getCurrentLocale,\n} from \"../calendar\";\nimport { Calendar, type SingleDateSelection } from \"../calendar\";\nimport datePickerPanelCss from \"./DatePickerPanel.css\";\nimport { useDatePickerContext } from \"./index\";\n\n/**\n * Props for the DatePickerSinglePanel component.\n * @template T - The type of the selected date.\n */\nexport interface DatePickerSinglePanelProps<T>\n  extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * Callback fired when a date is selected.\n   * @param event - The synthetic event.\n   * @param selectedDate - The selected date or null.\n   */\n  onSelect?: (event: SyntheticEvent, selectedDate?: T | null) => void;\n\n  /**\n   * Helper text to be displayed below the date picker.\n   */\n  helperText?: string;\n\n  /**\n   * The currently visible month.\n   */\n  visibleMonth?: DateValue;\n\n  /**\n   * The default visible month.\n   */\n  defaultVisibleMonth?: DateValue;\n\n  /**\n   * Callback fired when the visible month changes.\n   * @param event - The synthetic event.\n   * @param visibleMonth - The new visible month.\n   */\n  onVisibleMonthChange?: (\n    event: SyntheticEvent,\n    visibleMonth: DateValue,\n  ) => void;\n\n  /**\n   * Props to be passed to the Calendar component.\n   */\n  CalendarProps?: Partial<\n    Omit<\n      CalendarSingleProps,\n      | \"selectionVariant\"\n      | \"selectedDate\"\n      | \"defaultSelectedDate\"\n      | \"onSelectedDateChange\"\n      | \"onVisibleMonthChange\"\n    >\n  >;\n  /**\n   * Props to be passed to the CalendarNavigation component.\n   */\n  CalendarNavigationProps?: CalendarNavigationProps;\n  /**\n   * Props to be passed to the CalendarWeekHeader component.\n   */\n  CalendarWeekHeaderProps?: CalendarWeekHeaderProps;\n  /**\n   * Props to be passed to the CalendarDataGrid component.\n   */\n  CalendarDataGridProps?: CalendarDateGridProps;\n}\n\nconst withBaseName = makePrefixer(\"saltDatePickerPanel\");\n\nexport const DatePickerSinglePanel = forwardRef<\n  HTMLDivElement,\n  DatePickerSinglePanelProps<SingleDateSelection>\n>(function DatePickerSinglePanel(props, ref) {\n  const {\n    CalendarProps,\n    CalendarWeekHeaderProps,\n    CalendarNavigationProps,\n    CalendarDataGridProps,\n    className,\n    defaultVisibleMonth,\n    visibleMonth: visibleMonthProp,\n    onVisibleMonthChange,\n    helperText,\n    onSelect,\n    ...rest\n  } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-date-picker-single-panel\",\n    css: datePickerPanelCss,\n    window: targetWindow,\n  });\n\n  const {\n    state: {\n      selectedDate,\n      timeZone = getLocalTimeZone(),\n      minDate = startOfMonth(today(timeZone)),\n      maxDate = minDate.add({ months: 1 }),\n      locale = getCurrentLocale(),\n    },\n    helpers: { setSelectedDate },\n  } = useDatePickerContext({ selectionVariant: \"single\" });\n\n  const [hoveredDate, setHoveredDate] = useState<DateValue | null>(null);\n\n  const [uncontrolledDefaultVisibleMonth] = useState(\n    () => defaultVisibleMonth || startOfMonth(selectedDate || today(timeZone)),\n  );\n  const [visibleMonth, setVisibleMonth] = useControlled({\n    controlled: visibleMonthProp,\n    default: uncontrolledDefaultVisibleMonth,\n    name: \"DatePickerSinglePanel\",\n    state: \"visibleMonth\",\n  });\n\n  const handleSelectedDateChange = useCallback(\n    (event: SyntheticEvent, newDate: SingleDateSelection | null) => {\n      setSelectedDate(newDate, false);\n      onSelect?.(event, newDate);\n    },\n    [setSelectedDate, onSelect],\n  );\n\n  const handleHoveredDateChange = useCallback(\n    (event: SyntheticEvent, newHoveredDate: SingleDateSelection | null) => {\n      setHoveredDate(newHoveredDate);\n      if (newHoveredDate && CalendarProps?.onHoveredDateChange) {\n        CalendarProps.onHoveredDateChange(event, newHoveredDate);\n      }\n    },\n    [CalendarProps?.onHoveredDateChange],\n  );\n\n  const handleVisibleMonthChange = useCallback(\n    (event: SyntheticEvent, newVisibleMonth: DateValue) => {\n      setVisibleMonth(newVisibleMonth);\n      if (onVisibleMonthChange) {\n        onVisibleMonthChange(event, newVisibleMonth);\n      }\n    },\n    [onVisibleMonthChange],\n  );\n\n  const baseCalendarProps: Partial<CalendarSingleProps> = {\n    selectionVariant: \"single\",\n    visibleMonth,\n    hoveredDate,\n    onHoveredDateChange: handleHoveredDateChange,\n    onVisibleMonthChange: handleVisibleMonthChange,\n    onSelectedDateChange: handleSelectedDateChange,\n    hideOutOfRangeDates: true,\n    selectedDate,\n    minDate,\n    maxDate,\n    locale,\n    timeZone,\n    ...CalendarProps,\n  };\n\n  return (\n    <StackLayout\n      separators\n      gap={0}\n      className={clsx(className, withBaseName(\"container\"))}\n      ref={ref}\n      {...rest}\n    >\n      {helperText && (\n        <FlexItem className={withBaseName(\"header\")}>\n          <FormFieldHelperText>{helperText}</FormFieldHelperText>\n        </FlexItem>\n      )}\n      <FlexLayout gap={0}>\n        {/* Avoid Dropdowns in Calendar inheriting the FormField's state */}\n        <FormFieldContext.Provider value={{} as FormFieldContextValue}>\n          <Calendar selectionVariant=\"single\" {...baseCalendarProps}>\n            <CalendarNavigation {...CalendarNavigationProps} />\n            <CalendarWeekHeader {...CalendarWeekHeaderProps} />\n            <CalendarDateGrid {...CalendarDataGridProps} />\n          </Calendar>\n        </FormFieldContext.Provider>\n      </FlexLayout>\n    </StackLayout>\n  );\n});\n"],"names":["DatePickerSinglePanel","datePickerPanelCss"],"mappings":"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"}
+{"version":3,"file":"DatePickerSinglePanel.js","sources":["../src/date-picker/DatePickerSinglePanel.tsx"],"sourcesContent":["import {\n  type DateValue,\n  getLocalTimeZone,\n  startOfMonth,\n  today,\n} from \"@internationalized/date\";\nimport {\n  FlexItem,\n  FlexLayout,\n  FormFieldContext,\n  type FormFieldContextValue,\n  FormFieldHelperText,\n  StackLayout,\n  makePrefixer,\n  useControlled,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport clsx from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type SyntheticEvent,\n  forwardRef,\n  useCallback,\n  useState,\n} from \"react\";\nimport {\n  CalendarDateGrid,\n  type CalendarDateGridProps,\n  CalendarNavigation,\n  type CalendarNavigationProps,\n  type CalendarSingleProps,\n  CalendarWeekHeader,\n  type CalendarWeekHeaderProps,\n  getCurrentLocale,\n} from \"../calendar\";\nimport { Calendar, type SingleDateSelection } from \"../calendar\";\nimport { useDatePickerContext } from \"./DatePickerContext\";\nimport datePickerPanelCss from \"./DatePickerPanel.css\";\n\n/**\n * Props for the DatePickerSinglePanel component.\n * @template T - The type of the selected date.\n */\nexport interface DatePickerSinglePanelProps<T>\n  extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * Callback fired when a date is selected.\n   * @param event - The synthetic event.\n   * @param selectedDate - The selected date or null.\n   */\n  onSelect?: (event: SyntheticEvent, selectedDate?: T | null) => void;\n\n  /**\n   * Helper text to be displayed below the date picker.\n   */\n  helperText?: string;\n\n  /**\n   * The currently visible month.\n   */\n  visibleMonth?: DateValue;\n\n  /**\n   * The default visible month.\n   */\n  defaultVisibleMonth?: DateValue;\n\n  /**\n   * Callback fired when the visible month changes.\n   * @param event - The synthetic event.\n   * @param visibleMonth - The new visible month.\n   */\n  onVisibleMonthChange?: (\n    event: SyntheticEvent,\n    visibleMonth: DateValue,\n  ) => void;\n\n  /**\n   * Props to be passed to the Calendar component.\n   */\n  CalendarProps?: Partial<\n    Omit<\n      CalendarSingleProps,\n      | \"selectionVariant\"\n      | \"selectedDate\"\n      | \"defaultSelectedDate\"\n      | \"onSelectedDateChange\"\n      | \"onVisibleMonthChange\"\n    >\n  >;\n  /**\n   * Props to be passed to the CalendarNavigation component.\n   */\n  CalendarNavigationProps?: CalendarNavigationProps;\n  /**\n   * Props to be passed to the CalendarWeekHeader component.\n   */\n  CalendarWeekHeaderProps?: CalendarWeekHeaderProps;\n  /**\n   * Props to be passed to the CalendarDataGrid component.\n   */\n  CalendarDataGridProps?: CalendarDateGridProps;\n}\n\nconst withBaseName = makePrefixer(\"saltDatePickerPanel\");\n\nexport const DatePickerSinglePanel = forwardRef<\n  HTMLDivElement,\n  DatePickerSinglePanelProps<SingleDateSelection>\n>(function DatePickerSinglePanel(props, ref) {\n  const {\n    CalendarProps,\n    CalendarWeekHeaderProps,\n    CalendarNavigationProps,\n    CalendarDataGridProps,\n    className,\n    defaultVisibleMonth,\n    visibleMonth: visibleMonthProp,\n    onVisibleMonthChange,\n    helperText,\n    onSelect,\n    ...rest\n  } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-date-picker-single-panel\",\n    css: datePickerPanelCss,\n    window: targetWindow,\n  });\n\n  const {\n    state: {\n      selectedDate,\n      timeZone = getLocalTimeZone(),\n      minDate = startOfMonth(today(timeZone)),\n      maxDate = minDate.add({ months: 1 }),\n      locale = getCurrentLocale(),\n    },\n    helpers: { setSelectedDate },\n  } = useDatePickerContext({ selectionVariant: \"single\" });\n\n  const [hoveredDate, setHoveredDate] = useState<DateValue | null>(null);\n\n  const [uncontrolledDefaultVisibleMonth] = useState(\n    () => defaultVisibleMonth || startOfMonth(selectedDate || today(timeZone)),\n  );\n  const [visibleMonth, setVisibleMonth] = useControlled({\n    controlled: visibleMonthProp,\n    default: uncontrolledDefaultVisibleMonth,\n    name: \"DatePickerSinglePanel\",\n    state: \"visibleMonth\",\n  });\n\n  const handleSelectedDateChange = useCallback(\n    (event: SyntheticEvent, newDate: SingleDateSelection | null) => {\n      setSelectedDate(newDate, false);\n      onSelect?.(event, newDate);\n    },\n    [setSelectedDate, onSelect],\n  );\n\n  const handleHoveredDateChange = useCallback(\n    (event: SyntheticEvent, newHoveredDate: SingleDateSelection | null) => {\n      setHoveredDate(newHoveredDate);\n      if (newHoveredDate && CalendarProps?.onHoveredDateChange) {\n        CalendarProps.onHoveredDateChange(event, newHoveredDate);\n      }\n    },\n    [CalendarProps?.onHoveredDateChange],\n  );\n\n  const handleVisibleMonthChange = useCallback(\n    (event: SyntheticEvent, newVisibleMonth: DateValue) => {\n      setVisibleMonth(newVisibleMonth);\n      if (onVisibleMonthChange) {\n        onVisibleMonthChange(event, newVisibleMonth);\n      }\n    },\n    [onVisibleMonthChange],\n  );\n\n  const baseCalendarProps: Partial<CalendarSingleProps> = {\n    selectionVariant: \"single\",\n    visibleMonth,\n    hoveredDate,\n    onHoveredDateChange: handleHoveredDateChange,\n    onVisibleMonthChange: handleVisibleMonthChange,\n    onSelectedDateChange: handleSelectedDateChange,\n    hideOutOfRangeDates: true,\n    selectedDate,\n    minDate,\n    maxDate,\n    locale,\n    timeZone,\n    ...CalendarProps,\n  };\n\n  return (\n    <StackLayout\n      separators\n      gap={0}\n      className={clsx(className, withBaseName(\"container\"))}\n      ref={ref}\n      {...rest}\n    >\n      {helperText && (\n        <FlexItem className={withBaseName(\"header\")}>\n          <FormFieldHelperText>{helperText}</FormFieldHelperText>\n        </FlexItem>\n      )}\n      <FlexLayout gap={0}>\n        {/* Avoid Dropdowns in Calendar inheriting the FormField's state */}\n        <FormFieldContext.Provider value={{} as FormFieldContextValue}>\n          <Calendar selectionVariant=\"single\" {...baseCalendarProps}>\n            <CalendarNavigation {...CalendarNavigationProps} />\n            <CalendarWeekHeader {...CalendarWeekHeaderProps} />\n            <CalendarDateGrid {...CalendarDataGridProps} />\n          </Calendar>\n        </FormFieldContext.Provider>\n      </FlexLayout>\n    </StackLayout>\n  );\n});\n"],"names":["DatePickerSinglePanel","datePickerPanelCss"],"mappings":"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"}

package/dist-es/date-picker/useDatePicker.js

@@ -26,11 +26,11 @@ function useDatePicker(props, ref) {
     onCancel
   } = props;
   const minDate = useMemo(
-    () => minDateProp != null ? minDateProp : startOfMonth(new CalendarDate(CALENDAR_MIN_YEAR, 1, 1)),
+    () => minDateProp ?? startOfMonth(new CalendarDate(CALENDAR_MIN_YEAR, 1, 1)),
     [minDateProp]
   );
   const maxDate = useMemo(
-    () => maxDateProp != null ? maxDateProp : endOfMonth(new CalendarDate(CALENDAR_MAX_YEAR, 1, 1)),
+    () => maxDateProp ?? endOfMonth(new CalendarDate(CALENDAR_MAX_YEAR, 1, 1)),
     [maxDateProp]
   );
   const datePickerRef = useRef(null);

package/dist-es/date-picker/useDatePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"useDatePicker.js","sources":["../src/date-picker/useDatePicker.ts"],"sourcesContent":["import {\n  CalendarDate,\n  type DateValue,\n  endOfMonth,\n  getLocalTimeZone,\n  startOfMonth,\n} from \"@internationalized/date\";\nimport { useControlled, useForkRef, useFormFieldProps } from \"@salt-ds/core\";\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport {\n  CALENDAR_MAX_YEAR,\n  CALENDAR_MIN_YEAR,\n  type DateRangeSelection,\n  type SingleDateSelection,\n  getCurrentLocale,\n} from \"../calendar\";\nimport type {\n  RangeDatePickerError,\n  RangeDatePickerState,\n  SingleDatePickerError,\n  SingleDatePickerState,\n} from \"./DatePickerContext\";\nimport { useDatePickerOverlay } from \"./DatePickerOverlayProvider\";\n\ninterface UseDatePickerBaseProps<T> {\n  /** If `true`, the component is disabled. */\n  disabled?: boolean;\n  /** If `true`, the component is read-only. */\n  readOnly?: boolean;\n  /**\n   * The selected date. The selected date will be controlled when this prop is provided.\n   */\n  selectedDate?: T | null;\n  /**\n   * The initial selected date, when the selected date is uncontrolled.\n   */\n  defaultSelectedDate?: UseDatePickerBaseProps<T>[\"selectedDate\"];\n  /**\n   * The minimum date for the range, default is 1900.\n   */\n  minDate?: DateValue;\n  /**\n   * The maximum date for the range, default is 2100.\n   */\n  maxDate?: DateValue;\n  /**\n   * Handler for when the date selection is cancelled.\n   */\n  onCancel?: () => void;\n  /**\n   * Time zone of the date selection, defaults to the current time zone of the user.\n   */\n  timeZone?: string;\n  /**\n   * Locale of the date selection, defaults to the current locale of the user.\n   */\n  locale?: string;\n}\n\n/**\n * Props for single date selection.\n *\n * @typedef {UseDatePickerBaseProps<SingleDateSelection>} UseDatePickerSingleProps\n * @property {\"single\"} selectionVariant - Single date selection.\n * @property {(selectedSingleDate: SingleDateSelection | null, singleError: string | false) => void} [onSelectedDateChange] - Handler called when the selected date changes.\n * @property {(appliedSingleDate: SingleDateSelection | null, singleError: string | false) => void} [onApply] - Handler called when the selected date is confirmed/applied.\n */\nexport interface UseDatePickerSingleProps\n  extends UseDatePickerBaseProps<SingleDateSelection> {\n  /**\n   * Single date selection.\n   */\n  selectionVariant: \"single\";\n  /**\n   * Handler called when the selected date changes.\n   * @param {SingleDateSelection | null} selectedSingleDate - The selected date.\n   * @param {string | false} singleError - Error returned by the parser or `false`.\n   */\n  onSelectedDateChange?: (\n    selectedSingleDate: SingleDateSelection | null,\n    singleError: string | false,\n  ) => void;\n  /**\n   * Handler called when the selected date is confirmed/applied.\n   * @param {SingleDateSelection | null} appliedSingleDate - The selected date.\n   * @param {string | false} singleError - Error returned by the parser or `false`.\n   */\n  onApply?: (\n    appliedSingleDate: SingleDateSelection | null,\n    singleError: string | false,\n  ) => void;\n}\n\n/**\n * Props for date range selection.\n *\n * @typedef {UseDatePickerBaseProps<DateRangeSelection>} UseDatePickerRangeProps\n * @property {\"range\"} selectionVariant - Date range selection.\n * @property {(selectedRangeDate: DateRangeSelection | null, rangeError: { startDate: string | false; endDate: string | false }) => void} [onSelectedDateChange] - Handler called when the selected date changes.\n * @property {(appliedRangeDate: DateRangeSelection | null, rangeError: { startDate: string | false; endDate: string | false }) => void} [onApply] - Handler called when the selected date is confirmed/applied.\n */\nexport interface UseDatePickerRangeProps\n  extends UseDatePickerBaseProps<DateRangeSelection> {\n  /**\n   * Date range selection.\n   */\n  selectionVariant: \"range\";\n  /**\n   * Handler called when the selected date changes.\n   * @param {DateRangeSelection | null} selectedRangeDate - The selected date.\n   * @param {{ startDate: string | false; endDate: string | false }} rangeError - Error returned by the parser or `false`.\n   */\n  onSelectedDateChange?: (\n    selectedRangeDate: DateRangeSelection | null,\n    rangeError: { startDate: string | false; endDate: string | false },\n  ) => void;\n  /**\n   * Handler called when the selected date is confirmed/applied.\n   * @param {DateRangeSelection | null} appliedRangeDate - The selected date.\n   * @param {{ startDate: string | false; endDate: string | false }} rangeError - Error returned by the parser or `false`.\n   */\n  onApply?: (\n    appliedRangeDate: DateRangeSelection | null,\n    rangeError: { startDate: string | false; endDate: string | false },\n  ) => void;\n}\n\n/**\n * Props for the useDatePicker hook.\n *\n * @template SelectionVariant\n * @typedef {SelectionVariant extends \"single\" ? UseDatePickerSingleProps : SelectionVariant extends \"range\" ? UseDatePickerRangeProps : never} UseDatePickerProps\n */\nexport type UseDatePickerProps<SelectionVariant> =\n  SelectionVariant extends \"single\"\n    ? UseDatePickerSingleProps\n    : SelectionVariant extends \"range\"\n      ? UseDatePickerRangeProps\n      : never;\n\n/**\n * Custom hook for managing date picker state.\n *\n * @template SelectionVariant\n * @param {UseDatePickerProps<SelectionVariant>} props - The props for the date picker.\n * @param {React.ForwardedRef<HTMLDivElement>} ref - The ref for the date picker container.\n * @returns {DatePickerState<SelectionVariant extends \"single\" ? SingleDateSelection : DateRangeSelection>} The date picker state and helpers.\n */\nexport function useDatePicker<SelectionVariant extends \"single\" | \"range\">(\n  props: UseDatePickerProps<SelectionVariant>,\n  ref: React.ForwardedRef<HTMLDivElement>,\n): SingleDatePickerState | RangeDatePickerState {\n  const {\n    readOnly = false,\n    disabled,\n    selectionVariant,\n    defaultSelectedDate = null,\n    selectedDate: selectedDateProp,\n    onSelectedDateChange,\n    onApply,\n    minDate: minDateProp,\n    maxDate: maxDateProp,\n    timeZone = getLocalTimeZone(),\n    locale = getCurrentLocale(),\n    onCancel,\n  } = props;\n\n  const minDate: DateValue = useMemo(\n    () =>\n      minDateProp ?? startOfMonth(new CalendarDate(CALENDAR_MIN_YEAR, 1, 1)),\n    [minDateProp],\n  );\n  const maxDate: DateValue = useMemo(\n    () => maxDateProp ?? endOfMonth(new CalendarDate(CALENDAR_MAX_YEAR, 1, 1)),\n    [maxDateProp],\n  );\n\n  const datePickerRef = useRef<HTMLDivElement>(null);\n  const containerRef = useForkRef(ref, datePickerRef);\n\n  const {\n    state: { open },\n    helpers: { setOpen },\n  } = useDatePickerOverlay();\n\n  const [selectedDate, setSelectedDate] = useControlled({\n    controlled: selectedDateProp,\n    default: defaultSelectedDate,\n    name: \"DatePicker\",\n    state: \"selectedDate\",\n  });\n\n  const [enableApply, setEnableApply] = useState<boolean>(false);\n  const [cancelled, setCancelled] = useState<boolean>(false);\n\n  useEffect(() => {\n    if (open) {\n      setCancelled(false);\n    }\n  }, [open]);\n\n  const { disabled: formFieldDisabled, readOnly: formFieldReadOnly } =\n    useFormFieldProps();\n  const isReadOnly = readOnly || formFieldReadOnly || false;\n  const isDisabled = disabled || formFieldDisabled || false;\n\n  const applySingle = (\n    appliedDate: SingleDateSelection | null,\n    error: SingleDatePickerError,\n  ): void => {\n    setCancelled(false);\n    setOpen(false);\n    if (selectionVariant === \"single\") {\n      onApply?.(appliedDate, error);\n    }\n  };\n\n  const setSelectedSingleDate = useCallback(\n    (selection: SingleDateSelection | null, error: SingleDatePickerError) => {\n      let nextDate: typeof selection;\n      let nextError = error;\n      if (error || !selection) {\n        nextDate = selection;\n      } else {\n        let dateAfterMinDate = true;\n        let dateBeforeMaxDate = true;\n        if (minDate && selection) {\n          dateAfterMinDate = selection.compare(minDate) >= 0;\n        }\n        if (maxDate && selection) {\n          dateBeforeMaxDate = selection.compare(maxDate) <= 0;\n        }\n        nextDate = dateAfterMinDate && dateBeforeMaxDate ? selection : null;\n        nextError = !dateAfterMinDate ? \"is before min date\" : nextError;\n        nextError = !dateBeforeMaxDate ? \"is after max date\" : nextError;\n      }\n      setSelectedDate(nextDate);\n      if (selectionVariant === \"single\") {\n        onSelectedDateChange?.(nextDate, error);\n      }\n\n      if (!enableApply) {\n        setOpen(false);\n      }\n    },\n    [\n      enableApply,\n      minDate,\n      maxDate,\n      onSelectedDateChange,\n      selectionVariant,\n      setSelectedDate,\n      setOpen,\n    ],\n  );\n\n  const applyRange = (\n    appliedDate: DateRangeSelection | null,\n    error: RangeDatePickerError,\n  ): void => {\n    setCancelled(false);\n    if (appliedDate?.startDate && appliedDate?.endDate) {\n      setOpen(false);\n    }\n    if (selectionVariant === \"range\") {\n      onApply?.(appliedDate, error);\n    }\n  };\n\n  const setSelectedRangeDate = useCallback(\n    (selection: DateRangeSelection | null, error: RangeDatePickerError) => {\n      let nextDate: typeof selection;\n      let nextError = { ...error };\n      let startDateInRange = true;\n      let endDateInRange = true;\n      if (error?.startDate || error?.endDate || !selection) {\n        nextDate = selection;\n      } else {\n        if (maxDate && selection?.startDate) {\n          startDateInRange = selection.startDate.compare(minDate) >= 0;\n        }\n        if (maxDate && selection?.endDate) {\n          endDateInRange =\n            selection?.endDate && selection.endDate.compare(maxDate) <= 0;\n        }\n        if (!startDateInRange && !endDateInRange) {\n          nextDate = null;\n          nextError = {\n            startDate: \"is before min date\",\n            endDate: \"is after max date\",\n          };\n        } else {\n          nextDate = {\n            startDate: selection.startDate || null,\n            endDate: selection.endDate || null,\n          };\n          nextError = {\n            startDate: !startDateInRange\n              ? \"is before min date\"\n              : nextError.startDate,\n            endDate: !endDateInRange ? \"is after max date\" : nextError.endDate,\n          };\n        }\n      }\n      setSelectedDate(nextDate);\n      if (selectionVariant === \"range\") {\n        onSelectedDateChange?.(nextDate, nextError);\n      }\n      if (!enableApply && nextDate?.startDate && nextDate?.endDate) {\n        setOpen(false);\n      }\n    },\n    [\n      enableApply,\n      minDate,\n      maxDate,\n      onSelectedDateChange,\n      selectionVariant,\n      setSelectedDate,\n      setOpen,\n    ],\n  );\n\n  const cancel = () => {\n    setCancelled(true);\n    setOpen(false);\n    onCancel?.();\n  };\n\n  const returnValue = {\n    state: {\n      selectionVariant,\n      selectedDate,\n      cancelled,\n      enableApply,\n      disabled: isDisabled,\n      readOnly: isReadOnly,\n      containerRef,\n      minDate,\n      maxDate,\n      locale,\n      timeZone,\n    },\n    helpers: {\n      cancel,\n      setEnableApply,\n    },\n  };\n  if (props.selectionVariant === \"range\") {\n    return {\n      ...returnValue,\n      helpers: {\n        ...returnValue.helpers,\n        apply: applyRange,\n        setSelectedDate: setSelectedRangeDate,\n      },\n    } as RangeDatePickerState;\n  }\n  return {\n    ...returnValue,\n    helpers: {\n      ...returnValue.helpers,\n      apply: applySingle,\n      setSelectedDate: setSelectedSingleDate,\n    },\n  } as SingleDatePickerState;\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"useDatePicker.js","sources":["../src/date-picker/useDatePicker.ts"],"sourcesContent":["import {\n  CalendarDate,\n  type DateValue,\n  endOfMonth,\n  getLocalTimeZone,\n  startOfMonth,\n} from \"@internationalized/date\";\nimport { useControlled, useForkRef, useFormFieldProps } from \"@salt-ds/core\";\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport {\n  CALENDAR_MAX_YEAR,\n  CALENDAR_MIN_YEAR,\n  type DateRangeSelection,\n  type SingleDateSelection,\n  getCurrentLocale,\n} from \"../calendar\";\nimport type {\n  RangeDatePickerError,\n  RangeDatePickerState,\n  SingleDatePickerError,\n  SingleDatePickerState,\n} from \"./DatePickerContext\";\nimport { useDatePickerOverlay } from \"./DatePickerOverlayProvider\";\n\ninterface UseDatePickerBaseProps<T> {\n  /** If `true`, the component is disabled. */\n  disabled?: boolean;\n  /** If `true`, the component is read-only. */\n  readOnly?: boolean;\n  /**\n   * The selected date. The selected date will be controlled when this prop is provided.\n   */\n  selectedDate?: T | null;\n  /**\n   * The initial selected date, when the selected date is uncontrolled.\n   */\n  defaultSelectedDate?: UseDatePickerBaseProps<T>[\"selectedDate\"];\n  /**\n   * The minimum date for the range, default is 1900.\n   */\n  minDate?: DateValue;\n  /**\n   * The maximum date for the range, default is 2100.\n   */\n  maxDate?: DateValue;\n  /**\n   * Handler for when the date selection is cancelled.\n   */\n  onCancel?: () => void;\n  /**\n   * Time zone of the date selection, defaults to the current time zone of the user.\n   */\n  timeZone?: string;\n  /**\n   * Locale of the date selection, defaults to the current locale of the user.\n   */\n  locale?: string;\n}\n\n/**\n * Props for single date selection.\n *\n * @typedef {UseDatePickerBaseProps<SingleDateSelection>} UseDatePickerSingleProps\n * @property {\"single\"} selectionVariant - Single date selection.\n * @property {(selectedSingleDate: SingleDateSelection | null, singleError: string | false) => void} [onSelectedDateChange] - Handler called when the selected date changes.\n * @property {(appliedSingleDate: SingleDateSelection | null, singleError: string | false) => void} [onApply] - Handler called when the selected date is confirmed/applied.\n */\nexport interface UseDatePickerSingleProps\n  extends UseDatePickerBaseProps<SingleDateSelection> {\n  /**\n   * Single date selection.\n   */\n  selectionVariant: \"single\";\n  /**\n   * Handler called when the selected date changes.\n   * @param {SingleDateSelection | null} selectedSingleDate - The selected date.\n   * @param {string | false} singleError - Error returned by the parser or `false`.\n   */\n  onSelectedDateChange?: (\n    selectedSingleDate: SingleDateSelection | null,\n    singleError: string | false,\n  ) => void;\n  /**\n   * Handler called when the selected date is confirmed/applied.\n   * @param {SingleDateSelection | null} appliedSingleDate - The selected date.\n   * @param {string | false} singleError - Error returned by the parser or `false`.\n   */\n  onApply?: (\n    appliedSingleDate: SingleDateSelection | null,\n    singleError: string | false,\n  ) => void;\n}\n\n/**\n * Props for date range selection.\n *\n * @typedef {UseDatePickerBaseProps<DateRangeSelection>} UseDatePickerRangeProps\n * @property {\"range\"} selectionVariant - Date range selection.\n * @property {(selectedRangeDate: DateRangeSelection | null, rangeError: { startDate: string | false; endDate: string | false }) => void} [onSelectedDateChange] - Handler called when the selected date changes.\n * @property {(appliedRangeDate: DateRangeSelection | null, rangeError: { startDate: string | false; endDate: string | false }) => void} [onApply] - Handler called when the selected date is confirmed/applied.\n */\nexport interface UseDatePickerRangeProps\n  extends UseDatePickerBaseProps<DateRangeSelection> {\n  /**\n   * Date range selection.\n   */\n  selectionVariant: \"range\";\n  /**\n   * Handler called when the selected date changes.\n   * @param {DateRangeSelection | null} selectedRangeDate - The selected date.\n   * @param {{ startDate: string | false; endDate: string | false }} rangeError - Error returned by the parser or `false`.\n   */\n  onSelectedDateChange?: (\n    selectedRangeDate: DateRangeSelection | null,\n    rangeError: { startDate: string | false; endDate: string | false },\n  ) => void;\n  /**\n   * Handler called when the selected date is confirmed/applied.\n   * @param {DateRangeSelection | null} appliedRangeDate - The selected date.\n   * @param {{ startDate: string | false; endDate: string | false }} rangeError - Error returned by the parser or `false`.\n   */\n  onApply?: (\n    appliedRangeDate: DateRangeSelection | null,\n    rangeError: { startDate: string | false; endDate: string | false },\n  ) => void;\n}\n\n/**\n * Props for the useDatePicker hook.\n *\n * @template SelectionVariant\n * @typedef {SelectionVariant extends \"single\" ? UseDatePickerSingleProps : SelectionVariant extends \"range\" ? UseDatePickerRangeProps : never} UseDatePickerProps\n */\nexport type UseDatePickerProps<SelectionVariant> =\n  SelectionVariant extends \"single\"\n    ? UseDatePickerSingleProps\n    : SelectionVariant extends \"range\"\n      ? UseDatePickerRangeProps\n      : never;\n\n/**\n * Custom hook for managing date picker state.\n *\n * @template SelectionVariant\n * @param {UseDatePickerProps<SelectionVariant>} props - The props for the date picker.\n * @param {React.ForwardedRef<HTMLDivElement>} ref - The ref for the date picker container.\n * @returns {DatePickerState<SelectionVariant extends \"single\" ? SingleDateSelection : DateRangeSelection>} The date picker state and helpers.\n */\nexport function useDatePicker<SelectionVariant extends \"single\" | \"range\">(\n  props: UseDatePickerProps<SelectionVariant>,\n  ref: React.ForwardedRef<HTMLDivElement>,\n): SingleDatePickerState | RangeDatePickerState {\n  const {\n    readOnly = false,\n    disabled,\n    selectionVariant,\n    defaultSelectedDate = null,\n    selectedDate: selectedDateProp,\n    onSelectedDateChange,\n    onApply,\n    minDate: minDateProp,\n    maxDate: maxDateProp,\n    timeZone = getLocalTimeZone(),\n    locale = getCurrentLocale(),\n    onCancel,\n  } = props;\n\n  const minDate: DateValue = useMemo(\n    () =>\n      minDateProp ?? startOfMonth(new CalendarDate(CALENDAR_MIN_YEAR, 1, 1)),\n    [minDateProp],\n  );\n  const maxDate: DateValue = useMemo(\n    () => maxDateProp ?? endOfMonth(new CalendarDate(CALENDAR_MAX_YEAR, 1, 1)),\n    [maxDateProp],\n  );\n\n  const datePickerRef = useRef<HTMLDivElement>(null);\n  const containerRef = useForkRef(ref, datePickerRef);\n\n  const {\n    state: { open },\n    helpers: { setOpen },\n  } = useDatePickerOverlay();\n\n  const [selectedDate, setSelectedDate] = useControlled({\n    controlled: selectedDateProp,\n    default: defaultSelectedDate,\n    name: \"DatePicker\",\n    state: \"selectedDate\",\n  });\n\n  const [enableApply, setEnableApply] = useState<boolean>(false);\n  const [cancelled, setCancelled] = useState<boolean>(false);\n\n  useEffect(() => {\n    if (open) {\n      setCancelled(false);\n    }\n  }, [open]);\n\n  const { disabled: formFieldDisabled, readOnly: formFieldReadOnly } =\n    useFormFieldProps();\n  const isReadOnly = readOnly || formFieldReadOnly || false;\n  const isDisabled = disabled || formFieldDisabled || false;\n\n  const applySingle = (\n    appliedDate: SingleDateSelection | null,\n    error: SingleDatePickerError,\n  ): void => {\n    setCancelled(false);\n    setOpen(false);\n    if (selectionVariant === \"single\") {\n      onApply?.(appliedDate, error);\n    }\n  };\n\n  const setSelectedSingleDate = useCallback(\n    (selection: SingleDateSelection | null, error: SingleDatePickerError) => {\n      let nextDate: typeof selection;\n      let nextError = error;\n      if (error || !selection) {\n        nextDate = selection;\n      } else {\n        let dateAfterMinDate = true;\n        let dateBeforeMaxDate = true;\n        if (minDate && selection) {\n          dateAfterMinDate = selection.compare(minDate) >= 0;\n        }\n        if (maxDate && selection) {\n          dateBeforeMaxDate = selection.compare(maxDate) <= 0;\n        }\n        nextDate = dateAfterMinDate && dateBeforeMaxDate ? selection : null;\n        nextError = !dateAfterMinDate ? \"is before min date\" : nextError;\n        nextError = !dateBeforeMaxDate ? \"is after max date\" : nextError;\n      }\n      setSelectedDate(nextDate);\n      if (selectionVariant === \"single\") {\n        onSelectedDateChange?.(nextDate, error);\n      }\n\n      if (!enableApply) {\n        setOpen(false);\n      }\n    },\n    [\n      enableApply,\n      minDate,\n      maxDate,\n      onSelectedDateChange,\n      selectionVariant,\n      setSelectedDate,\n      setOpen,\n    ],\n  );\n\n  const applyRange = (\n    appliedDate: DateRangeSelection | null,\n    error: RangeDatePickerError,\n  ): void => {\n    setCancelled(false);\n    if (appliedDate?.startDate && appliedDate?.endDate) {\n      setOpen(false);\n    }\n    if (selectionVariant === \"range\") {\n      onApply?.(appliedDate, error);\n    }\n  };\n\n  const setSelectedRangeDate = useCallback(\n    (selection: DateRangeSelection | null, error: RangeDatePickerError) => {\n      let nextDate: typeof selection;\n      let nextError = { ...error };\n      let startDateInRange = true;\n      let endDateInRange = true;\n      if (error?.startDate || error?.endDate || !selection) {\n        nextDate = selection;\n      } else {\n        if (maxDate && selection?.startDate) {\n          startDateInRange = selection.startDate.compare(minDate) >= 0;\n        }\n        if (maxDate && selection?.endDate) {\n          endDateInRange =\n            selection?.endDate && selection.endDate.compare(maxDate) <= 0;\n        }\n        if (!startDateInRange && !endDateInRange) {\n          nextDate = null;\n          nextError = {\n            startDate: \"is before min date\",\n            endDate: \"is after max date\",\n          };\n        } else {\n          nextDate = {\n            startDate: selection.startDate || null,\n            endDate: selection.endDate || null,\n          };\n          nextError = {\n            startDate: !startDateInRange\n              ? \"is before min date\"\n              : nextError.startDate,\n            endDate: !endDateInRange ? \"is after max date\" : nextError.endDate,\n          };\n        }\n      }\n      setSelectedDate(nextDate);\n      if (selectionVariant === \"range\") {\n        onSelectedDateChange?.(nextDate, nextError);\n      }\n      if (!enableApply && nextDate?.startDate && nextDate?.endDate) {\n        setOpen(false);\n      }\n    },\n    [\n      enableApply,\n      minDate,\n      maxDate,\n      onSelectedDateChange,\n      selectionVariant,\n      setSelectedDate,\n      setOpen,\n    ],\n  );\n\n  const cancel = () => {\n    setCancelled(true);\n    setOpen(false);\n    onCancel?.();\n  };\n\n  const returnValue = {\n    state: {\n      selectionVariant,\n      selectedDate,\n      cancelled,\n      enableApply,\n      disabled: isDisabled,\n      readOnly: isReadOnly,\n      containerRef,\n      minDate,\n      maxDate,\n      locale,\n      timeZone,\n    },\n    helpers: {\n      cancel,\n      setEnableApply,\n    },\n  };\n  if (props.selectionVariant === \"range\") {\n    return {\n      ...returnValue,\n      helpers: {\n        ...returnValue.helpers,\n        apply: applyRange,\n        setSelectedDate: setSelectedRangeDate,\n      },\n    } as RangeDatePickerState;\n  }\n  return {\n    ...returnValue,\n    helpers: {\n      ...returnValue.helpers,\n      apply: applySingle,\n      setSelectedDate: setSelectedSingleDate,\n    },\n  } as SingleDatePickerState;\n}\n"],"names":[],"mappings":"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"}

package/dist-es/deck-item/DeckItem.js

@@ -32,25 +32,30 @@ const DeckItem = forwardRef(
     const classesIndex = animation && position === "current" ? 0 : 1;
     const getActiveClasses = [
       `${animation || "fade"}-in`,
+      // in-right
       `${animation || "fade"}-out`
+      // out-left
     ];
     const id = useId(idProp);
-    return /* @__PURE__ */ jsx("div", {
-      className: clsx(
-        withBaseName(),
-        withBaseName(`${animation ? animation : "static"}-${position}`),
-        {
-          [withBaseName(getActiveClasses[classesIndex])]: animation === "fade"
-        },
-        className
-      ),
-      ref: useForkRef(ref, sliderRef),
-      role,
-      tabIndex: isCurrent ? 0 : -1,
-      id,
-      ...rest,
-      children
-    });
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: clsx(
+          withBaseName(),
+          withBaseName(`${animation ? animation : "static"}-${position}`),
+          {
+            [withBaseName(getActiveClasses[classesIndex])]: animation === "fade"
+          },
+          className
+        ),
+        ref: useForkRef(ref, sliderRef),
+        role,
+        tabIndex: isCurrent ? 0 : -1,
+        id,
+        ...rest,
+        children
+      }
+    );
   }
 );
 

package/dist-es/deck-item/DeckItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"DeckItem.js","sources":["../src/deck-item/DeckItem.tsx"],"sourcesContent":["import { makePrefixer, useForkRef, useId } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { type HTMLAttributes, forwardRef, useMemo, useRef } from \"react\";\nimport type { LayoutAnimation } from \"../deck-layout\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport deckItemCss from \"./DeckItem.css\";\n\nconst withBaseName = makePrefixer(\"saltDeckItem\");\n\nexport interface DeckItemProps extends HTMLAttributes<HTMLDivElement> {\n  activeIndex?: number;\n  animation?: LayoutAnimation;\n  index: number;\n  role?: string;\n}\n\nexport const DeckItem = forwardRef<HTMLDivElement, DeckItemProps>(\n  function DeckItem(\n    {\n      activeIndex = 0,\n      animation,\n      children,\n      className,\n      index,\n      role = \"group\",\n      id: idProp,\n      ...rest\n    },\n    ref,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-deck-item\",\n      css: deckItemCss,\n      window: targetWindow,\n    });\n\n    const sliderRef = useRef<HTMLDivElement | null>(null);\n\n    const isCurrent = activeIndex === index;\n\n    const position = useMemo(() => {\n      return isCurrent ? \"current\" : activeIndex < index ? \"next\" : \"previous\";\n    }, [activeIndex, index, isCurrent]);\n\n    const classesIndex = animation && position === \"current\" ? 0 : 1;\n\n    const getActiveClasses = [\n      `${animation || \"fade\"}-in`, // in-right\n      `${animation || \"fade\"}-out`, // out-left\n    ];\n\n    const id = useId(idProp);\n\n    return (\n      <div\n        className={clsx(\n          withBaseName(),\n          withBaseName(`${animation ? animation : \"static\"}-${position}`),\n          {\n            [withBaseName(getActiveClasses[classesIndex])]:\n              animation === \"fade\",\n          },\n          className,\n        )}\n        ref={useForkRef(ref, sliderRef)}\n        role={role}\n        tabIndex={isCurrent ? 0 : -1}\n        id={id}\n        {...rest}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n"],"names":["DeckItem","deckItemCss"],"mappings":";;;;;;;;AAUA,MAAM,YAAA,GAAe,aAAa,cAAc,CAAA,CAAA;AASzC,MAAM,QAAW,GAAA,UAAA;AAAA,EACtB,SAASA,SACP,CAAA;AAAA,IACE,WAAc,GAAA,CAAA;AAAA,IACd,SAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,KAAA;AAAA,IACA,IAAO,GAAA,OAAA;AAAA,IACP,EAAI,EAAA,MAAA;AAAA,IACD,GAAA,IAAA;AAAA,KAEL,GACA,EAAA;AACA,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,gBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAM,MAAA,SAAA,GAAY,OAA8B,IAAI,CAAA,CAAA;AAEpD,IAAA,MAAM,YAAY,WAAgB,KAAA,KAAA,CAAA;AAElC,IAAM,MAAA,QAAA,GAAW,QAAQ,MAAM;AAC7B,MAAA,OAAO,SAAY,GAAA,SAAA,GAAY,WAAc,GAAA,KAAA,GAAQ,MAAS,GAAA,UAAA,CAAA;AAAA,KAC7D,EAAA,CAAC,WAAa,EAAA,KAAA,EAAO,SAAS,CAAC,CAAA,CAAA;AAElC,IAAA,MAAM,YAAe,GAAA,SAAA,IAAa,QAAa,KAAA,SAAA,GAAY,CAAI,GAAA,CAAA,CAAA;AAE/D,IAAA,MAAM,gBAAmB,GAAA;AAAA,MACvB,GAAG,SAAa,IAAA,MAAA,CAAA,GAAA,CAAA;AAAA,MAChB,GAAG,SAAa,IAAA,MAAA,CAAA,IAAA,CAAA;AAAA,KAClB,CAAA;AAEA,IAAM,MAAA,EAAA,GAAK,MAAM,MAAM,CAAA,CAAA;AAEvB,IAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,MACC,SAAW,EAAA,IAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb,YAAa,CAAA,CAAA,EAAG,SAAY,GAAA,SAAA,GAAY,YAAY,QAAU,CAAA,CAAA,CAAA;AAAA,QAC9D;AAAA,UACE,CAAC,YAAA,CAAa,gBAAiB,CAAA,YAAA,CAAa,IAC1C,SAAc,KAAA,MAAA;AAAA,SAClB;AAAA,QACA,SAAA;AAAA,OACF;AAAA,MACA,GAAA,EAAK,UAAW,CAAA,GAAA,EAAK,SAAS,CAAA;AAAA,MAC9B,IAAA;AAAA,MACA,QAAA,EAAU,YAAY,CAAI,GAAA,CAAA,CAAA;AAAA,MAC1B,EAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEH,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
+{"version":3,"file":"DeckItem.js","sources":["../src/deck-item/DeckItem.tsx"],"sourcesContent":["import { makePrefixer, useForkRef, useId } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { type HTMLAttributes, forwardRef, useMemo, useRef } from \"react\";\nimport type { LayoutAnimation } from \"../deck-layout\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport deckItemCss from \"./DeckItem.css\";\n\nconst withBaseName = makePrefixer(\"saltDeckItem\");\n\nexport interface DeckItemProps extends HTMLAttributes<HTMLDivElement> {\n  activeIndex?: number;\n  animation?: LayoutAnimation;\n  index: number;\n  role?: string;\n}\n\nexport const DeckItem = forwardRef<HTMLDivElement, DeckItemProps>(\n  function DeckItem(\n    {\n      activeIndex = 0,\n      animation,\n      children,\n      className,\n      index,\n      role = \"group\",\n      id: idProp,\n      ...rest\n    },\n    ref,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-deck-item\",\n      css: deckItemCss,\n      window: targetWindow,\n    });\n\n    const sliderRef = useRef<HTMLDivElement | null>(null);\n\n    const isCurrent = activeIndex === index;\n\n    const position = useMemo(() => {\n      return isCurrent ? \"current\" : activeIndex < index ? \"next\" : \"previous\";\n    }, [activeIndex, index, isCurrent]);\n\n    const classesIndex = animation && position === \"current\" ? 0 : 1;\n\n    const getActiveClasses = [\n      `${animation || \"fade\"}-in`, // in-right\n      `${animation || \"fade\"}-out`, // out-left\n    ];\n\n    const id = useId(idProp);\n\n    return (\n      <div\n        className={clsx(\n          withBaseName(),\n          withBaseName(`${animation ? animation : \"static\"}-${position}`),\n          {\n            [withBaseName(getActiveClasses[classesIndex])]:\n              animation === \"fade\",\n          },\n          className,\n        )}\n        ref={useForkRef(ref, sliderRef)}\n        role={role}\n        tabIndex={isCurrent ? 0 : -1}\n        id={id}\n        {...rest}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n"],"names":["DeckItem","deckItemCss"],"mappings":";;;;;;;;AAUA,MAAM,YAAA,GAAe,aAAa,cAAc,CAAA;AASzC,MAAM,QAAW,GAAA,UAAA;AAAA,EACtB,SAASA,SACP,CAAA;AAAA,IACE,WAAc,GAAA,CAAA;AAAA,IACd,SAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,KAAA;AAAA,IACA,IAAO,GAAA,OAAA;AAAA,IACP,EAAI,EAAA,MAAA;AAAA,IACJ,GAAG;AAAA,KAEL,GACA,EAAA;AACA,IAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,gBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAM,MAAA,SAAA,GAAY,OAA8B,IAAI,CAAA;AAEpD,IAAA,MAAM,YAAY,WAAgB,KAAA,KAAA;AAElC,IAAM,MAAA,QAAA,GAAW,QAAQ,MAAM;AAC7B,MAAA,OAAO,SAAY,GAAA,SAAA,GAAY,WAAc,GAAA,KAAA,GAAQ,MAAS,GAAA,UAAA;AAAA,KAC7D,EAAA,CAAC,WAAa,EAAA,KAAA,EAAO,SAAS,CAAC,CAAA;AAElC,IAAA,MAAM,YAAe,GAAA,SAAA,IAAa,QAAa,KAAA,SAAA,GAAY,CAAI,GAAA,CAAA;AAE/D,IAAA,MAAM,gBAAmB,GAAA;AAAA,MACvB,CAAA,EAAG,aAAa,MAAM,CAAA,GAAA,CAAA;AAAA;AAAA,MACtB,CAAA,EAAG,aAAa,MAAM,CAAA,IAAA;AAAA;AAAA,KACxB;AAEA,IAAM,MAAA,EAAA,GAAK,MAAM,MAAM,CAAA;AAEvB,IACE,uBAAA,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAA,IAAA;AAAA,UACT,YAAa,EAAA;AAAA,UACb,aAAa,CAAG,EAAA,SAAA,GAAY,YAAY,QAAQ,CAAA,CAAA,EAAI,QAAQ,CAAE,CAAA,CAAA;AAAA,UAC9D;AAAA,YACE,CAAC,YAAa,CAAA,gBAAA,CAAiB,YAAY,CAAC,CAAC,GAC3C,SAAc,KAAA;AAAA,WAClB;AAAA,UACA;AAAA,SACF;AAAA,QACA,GAAA,EAAK,UAAW,CAAA,GAAA,EAAK,SAAS,CAAA;AAAA,QAC9B,IAAA;AAAA,QACA,QAAA,EAAU,YAAY,CAAI,GAAA,CAAA,CAAA;AAAA,QAC1B,EAAA;AAAA,QACC,GAAG,IAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA;AAGN;;;;"}

package/dist-es/deck-layout/DeckLayout.js

@@ -55,33 +55,42 @@ const DeckLayout = forwardRef(
     const innerStyles = {
       "--deckLayout-transform-value": `-${activeIndex * 100}%`
     };
-    return /* @__PURE__ */ jsx("div", {
-      className: clsx(withBaseName(), className),
-      style: deckLayoutStyles,
-      ref,
-      ...rest,
-      children: /* @__PURE__ */ jsx("div", {
-        className: clsx(
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: clsx(withBaseName(), className),
+        style: deckLayoutStyles,
+        ref,
+        ...rest,
+        children: /* @__PURE__ */ jsx(
+          "div",
           {
-            [withBaseName("animate")]: animation
-          },
-          {
-            [withBaseName(`${animation || "slide"}-${direction}`)]: animation
+            className: clsx(
+              {
+                [withBaseName("animate")]: animation
+              },
+              {
+                [withBaseName(`${animation || "slide"}-${direction}`)]: animation
+              }
+            ),
+            style: innerStyles,
+            children: Children.map(children, (child, index) => {
+              return /* @__PURE__ */ jsx(
+                DeckItem,
+                {
+                  ref: deckItemRef,
+                  index,
+                  activeIndex,
+                  animation,
+                  ...deckItemProps,
+                  children: child
+                }
+              );
+            })
           }
-        ),
-        style: innerStyles,
-        children: Children.map(children, (child, index) => {
-          return /* @__PURE__ */ jsx(DeckItem, {
-            ref: deckItemRef,
-            index,
-            activeIndex,
-            animation,
-            ...deckItemProps,
-            children: child
-          });
-        })
-      })
-    });
+        )
+      }
+    );
   }
 );
 

package/dist-es/deck-layout/DeckLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"DeckLayout.js","sources":["../src/deck-layout/DeckLayout.tsx"],"sourcesContent":["import { makePrefixer, useIsomorphicLayoutEffect } from \"@salt-ds/core\";\nimport {\n  type CSSProperties,\n  Children,\n  type HTMLAttributes,\n  forwardRef,\n  useCallback,\n  useState,\n} from \"react\";\nimport { DeckItem, type DeckItemProps } from \"../deck-item\";\nimport { useWidth } from \"../responsive\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\n\nimport deckLayoutCss from \"./DeckLayout.css\";\n\nexport type LayoutAnimation = \"slide\" | \"fade\";\nexport type LayoutAnimationDirection = \"horizontal\" | \"vertical\";\nexport type LayoutAnimationTransition = \"increase\" | \"decrease\";\n\nexport interface DeckLayoutProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * The initial item to render.\n   **/\n  activeIndex?: number;\n  /**\n   * The animation when the slides are shown.\n   **/\n  animation?: LayoutAnimation;\n  /**\n   * The direction in which items will transition.\n   **/\n  direction?: LayoutAnimationDirection;\n  /**\n   * Props to be passed to the DeckItem component.\n   */\n  deckItemProps?: Partial<DeckItemProps>;\n}\n\nconst withBaseName = makePrefixer(\"saltDeckLayout\");\n\nexport const DeckLayout = forwardRef<HTMLDivElement, DeckLayoutProps>(\n  function DeckLayout(\n    {\n      activeIndex = 0,\n      animation,\n      className,\n      children,\n      direction = \"horizontal\",\n      style,\n      deckItemProps,\n      ...rest\n    },\n    ref,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-deck-layout\",\n      css: deckLayoutCss,\n      window: targetWindow,\n    });\n\n    const [deckItemRef, deckItemWidth] = useWidth<HTMLDivElement>(true);\n\n    const [deckItemHeight, setDeckItemHeight] = useState<number>(0);\n\n    const handleResize = useCallback(function handleResize(\n      contentRect: DOMRect,\n    ) {\n      setDeckItemHeight(contentRect.height);\n    }, []);\n\n    useIsomorphicLayoutEffect(() => {\n      if (!deckItemRef.current) {\n        return undefined;\n      }\n\n      handleResize(deckItemRef.current.getBoundingClientRect());\n\n      const observer = new ResizeObserver(\n        ([{ contentRect }]: ResizeObserverEntry[]) => {\n          handleResize(contentRect);\n        },\n      );\n      observer.observe(deckItemRef.current);\n\n      return () => {\n        observer.disconnect();\n      };\n    }, [deckItemRef, handleResize]);\n\n    const deckLayoutStyles = {\n      ...style,\n      \"--deckLayout-width\": `${deckItemWidth}px`,\n      \"--deckLayout-height\": `${deckItemHeight}px`,\n    };\n\n    const innerStyles = {\n      \"--deckLayout-transform-value\": `-${activeIndex * 100}%`,\n    } as CSSProperties;\n\n    return (\n      <div\n        className={clsx(withBaseName(), className)}\n        style={deckLayoutStyles}\n        ref={ref}\n        {...rest}\n      >\n        <div\n          className={clsx(\n            {\n              [withBaseName(\"animate\")]: animation,\n            },\n            {\n              [withBaseName(`${animation || \"slide\"}-${direction}`)]: animation,\n            },\n          )}\n          style={innerStyles}\n        >\n          {Children.map(children, (child, index) => {\n            return (\n              <DeckItem\n                ref={deckItemRef}\n                index={index}\n                activeIndex={activeIndex}\n                animation={animation}\n                {...deckItemProps}\n              >\n                {child}\n              </DeckItem>\n            );\n          })}\n        </div>\n      </div>\n    );\n  },\n);\n"],"names":["DeckLayout","deckLayoutCss","handleResize"],"mappings":"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"}
+{"version":3,"file":"DeckLayout.js","sources":["../src/deck-layout/DeckLayout.tsx"],"sourcesContent":["import { makePrefixer, useIsomorphicLayoutEffect } from \"@salt-ds/core\";\nimport {\n  type CSSProperties,\n  Children,\n  type HTMLAttributes,\n  forwardRef,\n  useCallback,\n  useState,\n} from \"react\";\nimport { DeckItem, type DeckItemProps } from \"../deck-item\";\nimport { useWidth } from \"../responsive\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\n\nimport deckLayoutCss from \"./DeckLayout.css\";\n\nexport type LayoutAnimation = \"slide\" | \"fade\";\nexport type LayoutAnimationDirection = \"horizontal\" | \"vertical\";\nexport type LayoutAnimationTransition = \"increase\" | \"decrease\";\n\nexport interface DeckLayoutProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * The initial item to render.\n   **/\n  activeIndex?: number;\n  /**\n   * The animation when the slides are shown.\n   **/\n  animation?: LayoutAnimation;\n  /**\n   * The direction in which items will transition.\n   **/\n  direction?: LayoutAnimationDirection;\n  /**\n   * Props to be passed to the DeckItem component.\n   */\n  deckItemProps?: Partial<DeckItemProps>;\n}\n\nconst withBaseName = makePrefixer(\"saltDeckLayout\");\n\nexport const DeckLayout = forwardRef<HTMLDivElement, DeckLayoutProps>(\n  function DeckLayout(\n    {\n      activeIndex = 0,\n      animation,\n      className,\n      children,\n      direction = \"horizontal\",\n      style,\n      deckItemProps,\n      ...rest\n    },\n    ref,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-deck-layout\",\n      css: deckLayoutCss,\n      window: targetWindow,\n    });\n\n    const [deckItemRef, deckItemWidth] = useWidth<HTMLDivElement>(true);\n\n    const [deckItemHeight, setDeckItemHeight] = useState<number>(0);\n\n    const handleResize = useCallback(function handleResize(\n      contentRect: DOMRect,\n    ) {\n      setDeckItemHeight(contentRect.height);\n    }, []);\n\n    useIsomorphicLayoutEffect(() => {\n      if (!deckItemRef.current) {\n        return undefined;\n      }\n\n      handleResize(deckItemRef.current.getBoundingClientRect());\n\n      const observer = new ResizeObserver(\n        ([{ contentRect }]: ResizeObserverEntry[]) => {\n          handleResize(contentRect);\n        },\n      );\n      observer.observe(deckItemRef.current);\n\n      return () => {\n        observer.disconnect();\n      };\n    }, [deckItemRef, handleResize]);\n\n    const deckLayoutStyles = {\n      ...style,\n      \"--deckLayout-width\": `${deckItemWidth}px`,\n      \"--deckLayout-height\": `${deckItemHeight}px`,\n    };\n\n    const innerStyles = {\n      \"--deckLayout-transform-value\": `-${activeIndex * 100}%`,\n    } as CSSProperties;\n\n    return (\n      <div\n        className={clsx(withBaseName(), className)}\n        style={deckLayoutStyles}\n        ref={ref}\n        {...rest}\n      >\n        <div\n          className={clsx(\n            {\n              [withBaseName(\"animate\")]: animation,\n            },\n            {\n              [withBaseName(`${animation || \"slide\"}-${direction}`)]: animation,\n            },\n          )}\n          style={innerStyles}\n        >\n          {Children.map(children, (child, index) => {\n            return (\n              <DeckItem\n                ref={deckItemRef}\n                index={index}\n                activeIndex={activeIndex}\n                animation={animation}\n                {...deckItemProps}\n              >\n                {child}\n              </DeckItem>\n            );\n          })}\n        </div>\n      </div>\n    );\n  },\n);\n"],"names":["DeckLayout","deckLayoutCss","handleResize"],"mappings":"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"}

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

@@ -0,0 +1,4 @@
+var css_248z = "/* Styles applied to the root element */\n.saltDialogHeader {\n  padding-bottom: var(--salt-spacing-300);\n  padding-left: var(--salt-spacing-300);\n  padding-right: var(--salt-spacing-300);\n  align-items: center;\n  display: flex;\n  flex-direction: row;\n  gap: var(--salt-spacing-100);\n  box-sizing: border-box;\n}\n\n.saltDialogHeader-container {\n  flex-grow: 1;\n  margin: 0;\n  display: flex;\n  flex-direction: column;\n  gap: var(--salt-spacing-50);\n}\n\n.saltDialogHeader-header > .saltText {\n  margin: 0;\n}\n\n.saltDialogHeader-actionsContainer {\n  align-self: flex-start;\n}\n\n/* Styles applied to the status indicator icon overriding its default size */\n.saltDialogHeader .saltStatusIndicator.saltIcon {\n  --icon-size: var(--salt-text-h2-lineHeight);\n}\n\n/* Styles applied to DialogHeader when accent={true} */\n.saltDialogHeader-withAccent {\n  position: relative;\n}\n\n.saltDialogHeader-withAccent::before {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: var(--salt-spacing-300);\n  width: var(--salt-size-bar);\n  background: var(--salt-accent-background);\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=DialogHeader.css.js.map

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

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