@salt-ds/lab 1.0.0-alpha.50 → 1.0.0-alpha.52

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

@@ -0,0 +1,198 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { getLocalTimeZone, startOfMonth, today, isSameMonth, endOfMonth } from '@internationalized/date';
+import { makePrefixer, useControlled, StackLayout, FlexItem, FormFieldHelperText, FlexLayout, FormFieldContext } from '@salt-ds/core';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import clsx from 'clsx';
+import { forwardRef, useState, useCallback } from 'react';
+import { Calendar } from '../calendar/Calendar.js';
+import { CalendarNavigation } from '../calendar/CalendarNavigation.js';
+import '../calendar/internal/CalendarContext.js';
+import { getCurrentLocale } from '../calendar/formatDate.js';
+import '../calendar/useCalendarSelection.js';
+import { useDatePickerContext } from './DatePickerContext.js';
+import css_248z from './DatePickerPanel.css.js';
+
+function getFallbackVisibleMonths(selectedDate, timeZone) {
+  const createConsecutiveRange = (date) => [
+    startOfMonth(date),
+    startOfMonth(date).add({ months: 1 })
+  ];
+  if (selectedDate == null ? void 0 : selectedDate.startDate) {
+    const { startDate, endDate } = selectedDate;
+    if (endDate) {
+      return isSameMonth(startDate, endDate) ? createConsecutiveRange(startDate) : [startOfMonth(startDate), startOfMonth(endDate)];
+    }
+    return createConsecutiveRange(startDate);
+  }
+  const currentMonth = startOfMonth(today(timeZone));
+  return [currentMonth, currentMonth.add({ months: 1 })];
+}
+const withBaseName = makePrefixer("saltDatePickerPanel");
+const DatePickerRangePanel = forwardRef(function DatePickerRangePanel2(props, ref) {
+  const {
+    className,
+    defaultStartVisibleMonth: defaultStartVisibleMonthProp,
+    startVisibleMonth: startVisibleMonthProp,
+    onStartVisibleMonthChange,
+    defaultEndVisibleMonth: defaultEndVisibleMonthProp,
+    endVisibleMonth: endVisibleMonthProp,
+    onEndVisibleMonthChange,
+    helperText,
+    onSelect,
+    StartCalendarProps: StartCalendarPropsProp,
+    StartCalendarNavigationProps,
+    EndCalendarProps: EndCalendarPropsProp,
+    EndCalendarNavigationProps
+  } = props;
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "salt-date-picker-range-panel",
+    css: css_248z,
+    window: targetWindow
+  });
+  const {
+    state: {
+      selectedDate,
+      timeZone = getLocalTimeZone(),
+      minDate = startOfMonth(today(timeZone)),
+      maxDate = minDate.add({ months: 1 }),
+      locale = getCurrentLocale()
+    },
+    helpers: { setSelectedDate }
+  } = useDatePickerContext({ selectionVariant: "range" });
+  const [hoveredDate, setHoveredDate] = useState(null);
+  const [[fallbackStartVisibleMonth, fallbackEndVisibleMonth]] = useState(
+    () => getFallbackVisibleMonths(selectedDate, timeZone)
+  );
+  const [startVisibleMonth, setStartVisibleMonth] = useControlled({
+    controlled: startVisibleMonthProp,
+    default: defaultStartVisibleMonthProp || fallbackStartVisibleMonth,
+    name: "DatePickerRangePanel",
+    state: "startVisibleMonth"
+  });
+  const [endVisibleMonth, setEndVisibleMonth] = useControlled({
+    controlled: endVisibleMonthProp,
+    default: defaultEndVisibleMonthProp || fallbackEndVisibleMonth,
+    name: "DatePickerRangePanel",
+    state: "endVisibleMonth"
+  });
+  const handleSelectedDateChange = useCallback(
+    (event, newDate) => {
+      setSelectedDate(newDate, { startDate: false, endDate: false });
+      onSelect == null ? void 0 : onSelect(event, newDate);
+    },
+    [onSelect, setSelectedDate]
+  );
+  const handleHoveredStartDateChange = useCallback(
+    (event, newHoveredDate) => {
+      var _a;
+      setHoveredDate(newHoveredDate);
+      if (newHoveredDate && (StartCalendarPropsProp == null ? void 0 : StartCalendarPropsProp.onHoveredDateChange)) {
+        (_a = StartCalendarPropsProp.onHoveredDateChange) == null ? void 0 : _a.call(StartCalendarPropsProp, event, newHoveredDate);
+      }
+    },
+    [StartCalendarPropsProp == null ? void 0 : StartCalendarPropsProp.onHoveredDateChange]
+  );
+  const handleHoveredEndDateChange = useCallback(
+    (event, newHoveredDate) => {
+      setHoveredDate(newHoveredDate);
+      if (newHoveredDate && (EndCalendarPropsProp == null ? void 0 : EndCalendarPropsProp.onHoveredDateChange)) {
+        EndCalendarPropsProp.onHoveredDateChange(event, newHoveredDate);
+      }
+    },
+    [EndCalendarPropsProp == null ? void 0 : EndCalendarPropsProp.onHoveredDateChange]
+  );
+  const handleStartVisibleMonthChange = useCallback(
+    (event, newVisibleMonth) => {
+      setStartVisibleMonth(newVisibleMonth);
+      if (newVisibleMonth.compare(endVisibleMonth) >= 0) {
+        setEndVisibleMonth(newVisibleMonth.add({ months: 1 }));
+      }
+      onStartVisibleMonthChange == null ? void 0 : onStartVisibleMonthChange(event, newVisibleMonth);
+    },
+    [endVisibleMonth, onStartVisibleMonthChange]
+  );
+  const handleEndVisibleMonthChange = useCallback(
+    (event, newVisibleMonth) => {
+      setEndVisibleMonth(newVisibleMonth);
+      if (newVisibleMonth.compare(startVisibleMonth) <= 0) {
+        setStartVisibleMonth(
+          startOfMonth(newVisibleMonth.subtract({ months: 1 }))
+        );
+      }
+      onEndVisibleMonthChange == null ? void 0 : onEndVisibleMonthChange(event, newVisibleMonth);
+    },
+    [startVisibleMonth, onEndVisibleMonthChange]
+  );
+  function getHoveredDate(date, hoveredDate2) {
+    return date && hoveredDate2 && (hoveredDate2 == null ? void 0 : hoveredDate2.compare(endOfMonth(date))) > 0 ? endOfMonth(date) : hoveredDate2;
+  }
+  const StartCalendarProps = {
+    visibleMonth: startVisibleMonth,
+    hoveredDate: getHoveredDate(selectedDate == null ? void 0 : selectedDate.startDate, hoveredDate),
+    selectedDate,
+    onHoveredDateChange: handleHoveredStartDateChange,
+    onVisibleMonthChange: handleStartVisibleMonthChange,
+    onSelectedDateChange: handleSelectedDateChange,
+    hideOutOfRangeDates: true,
+    minDate,
+    maxDate,
+    locale,
+    timeZone,
+    ...StartCalendarPropsProp
+  };
+  const EndCalendarProps = {
+    visibleMonth: endVisibleMonth,
+    hoveredDate,
+    selectedDate,
+    onHoveredDateChange: handleHoveredEndDateChange,
+    onVisibleMonthChange: handleEndVisibleMonthChange,
+    onSelectedDateChange: handleSelectedDateChange,
+    hideOutOfRangeDates: true,
+    minDate,
+    maxDate,
+    locale,
+    timeZone,
+    ...EndCalendarPropsProp
+  };
+  return /* @__PURE__ */ jsxs(StackLayout, {
+    separators: true,
+    gap: 0,
+    className: clsx(className, withBaseName("container")),
+    ref,
+    children: [
+      helperText && /* @__PURE__ */ jsx(FlexItem, {
+        className: withBaseName("header"),
+        children: /* @__PURE__ */ jsx(FormFieldHelperText, {
+          children: helperText
+        })
+      }),
+      /* @__PURE__ */ jsx(FlexLayout, {
+        gap: 0,
+        children: /* @__PURE__ */ jsxs(FormFieldContext.Provider, {
+          value: {},
+          children: [
+            /* @__PURE__ */ jsx(Calendar, {
+              selectionVariant: "range",
+              ...StartCalendarProps,
+              children: /* @__PURE__ */ jsx(CalendarNavigation, {
+                ...StartCalendarNavigationProps
+              })
+            }),
+            /* @__PURE__ */ jsx(Calendar, {
+              selectionVariant: "range",
+              ...EndCalendarProps,
+              children: /* @__PURE__ */ jsx(CalendarNavigation, {
+                ...EndCalendarNavigationProps
+              })
+            })
+          ]
+        })
+      })
+    ]
+  });
+});
+
+export { DatePickerRangePanel };
+//# sourceMappingURL=DatePickerRangePanel.js.map

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

@@ -0,0 +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  CalendarNavigation,\n  type CalendarNavigationProps,\n  type CalendarOffsetProps,\n  type CalendarProps,\n  type CalendarRangeProps,\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  /**\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\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    EndCalendarProps: EndCalendarPropsProp,\n    EndCalendarNavigationProps,\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    >\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          </Calendar>\n          <Calendar selectionVariant={\"range\"} {...EndCalendarProps}>\n            <CalendarNavigation {...EndCalendarNavigationProps} />\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

@@ -0,0 +1,93 @@
+import { jsx } from 'react/jsx-runtime';
+import { makePrefixer, useForkRef, useControlled, Button } from '@salt-ds/core';
+import { CalendarIcon } from '@salt-ds/icons';
+import { clsx } from 'clsx';
+import { forwardRef, useRef, useCallback, useEffect } from 'react';
+import { DateInputSingle } from '../date-input/DateInputSingle.js';
+import '../date-input/DateInputRange.js';
+import '@internationalized/date';
+import { useDatePickerContext } from './DatePickerContext.js';
+import { useDatePickerOverlay } from './DatePickerOverlayProvider.js';
+
+const withBaseName = makePrefixer("saltDatePickerSingleInput");
+const DatePickerSingleInput = forwardRef(function DatePickerSingleInput2(props, ref) {
+  const {
+    className,
+    onFocus,
+    onBlur,
+    value: valueProp,
+    defaultValue,
+    onDateValueChange,
+    ...rest
+  } = props;
+  const {
+    state: { selectedDate, disabled, readOnly, cancelled, locale, timeZone },
+    helpers: { setSelectedDate }
+  } = useDatePickerContext({ selectionVariant: "single" });
+  const {
+    state: { open, floatingUIResult },
+    helpers: { getReferenceProps, setOpen }
+  } = useDatePickerOverlay();
+  const inputRef = useForkRef(ref, floatingUIResult == null ? void 0 : floatingUIResult.reference);
+  const prevState = useRef();
+  const [value, setValue] = useControlled({
+    controlled: valueProp,
+    default: defaultValue,
+    name: "DatePickerSingleInput",
+    state: "value"
+  });
+  const handleCalendarButton = useCallback(() => {
+    setOpen(!open);
+  }, [open, setOpen]);
+  const handleDateChange = useCallback(
+    (_event, newDate, error) => {
+      setSelectedDate(newDate, error);
+    },
+    [setSelectedDate]
+  );
+  const handleDateValueChange = (newDateValue, isFormatted) => {
+    setValue(newDateValue);
+    onDateValueChange == null ? void 0 : onDateValueChange(newDateValue, isFormatted);
+  };
+  useEffect(() => {
+    if (open) {
+      prevState.current = { date: selectedDate, value };
+    }
+  }, [open]);
+  useEffect(() => {
+    var _a, _b;
+    if (cancelled) {
+      setValue((_a = prevState == null ? void 0 : prevState.current) == null ? void 0 : _a.value);
+      setSelectedDate(((_b = prevState == null ? void 0 : prevState.current) == null ? void 0 : _b.date) || null, false);
+    }
+  }, [cancelled, setSelectedDate]);
+  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, {
+      variant: "secondary",
+      onClick: handleCalendarButton,
+      disabled,
+      "aria-label": "Open Calendar",
+      children: /* @__PURE__ */ jsx(CalendarIcon, {})
+    }),
+    ...getReferenceProps({
+      ...rest,
+      onKeyDown: (event) => {
+        if (event.key === "ArrowDown") {
+          setOpen(true);
+        }
+      }
+    })
+  });
+});
+
+export { DatePickerSingleInput };
+//# sourceMappingURL=DatePickerSingleInput.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DatePickerSingleInput.js","sources":["../src/date-picker/DatePickerSingleInput.tsx"],"sourcesContent":["import { Button, makePrefixer, useControlled, useForkRef } from \"@salt-ds/core\";\nimport { CalendarIcon } from \"@salt-ds/icons\";\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 {\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  useEffect(() => {\n    if (cancelled) {\n      setValue(prevState?.current?.value);\n      setSelectedDate(prevState?.current?.date || null, false);\n    }\n  }, [cancelled, setSelectedDate]);\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          variant=\"secondary\"\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

@@ -0,0 +1,130 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { getLocalTimeZone, startOfMonth, today } from '@internationalized/date';
+import { makePrefixer, useControlled, StackLayout, FlexItem, FormFieldHelperText, FlexLayout, FormFieldContext } from '@salt-ds/core';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import clsx from 'clsx';
+import { forwardRef, useState, useCallback } from 'react';
+import { Calendar } from '../calendar/Calendar.js';
+import { CalendarNavigation } from '../calendar/CalendarNavigation.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';
+
+const withBaseName = makePrefixer("saltDatePickerPanel");
+const DatePickerSinglePanel = forwardRef(function DatePickerSinglePanel2(props, ref) {
+  const {
+    CalendarProps,
+    CalendarNavigationProps,
+    className,
+    defaultVisibleMonth,
+    visibleMonth: visibleMonthProp,
+    onVisibleMonthChange,
+    helperText,
+    onSelect
+  } = props;
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "salt-date-picker-single-panel",
+    css: css_248z,
+    window: targetWindow
+  });
+  const {
+    state: {
+      selectedDate,
+      timeZone = getLocalTimeZone(),
+      minDate = startOfMonth(today(timeZone)),
+      maxDate = minDate.add({ months: 1 }),
+      locale = getCurrentLocale()
+    },
+    helpers: { setSelectedDate }
+  } = useDatePickerContext({ selectionVariant: "single" });
+  const [hoveredDate, setHoveredDate] = useState(null);
+  const [uncontrolledDefaultVisibleMonth] = useState(
+    () => defaultVisibleMonth || startOfMonth(selectedDate || today(timeZone))
+  );
+  const [visibleMonth, setVisibleMonth] = useControlled({
+    controlled: visibleMonthProp,
+    default: uncontrolledDefaultVisibleMonth,
+    name: "DatePickerSinglePanel",
+    state: "visibleMonth"
+  });
+  const handleSelectedDateChange = useCallback(
+    (event, newDate) => {
+      setSelectedDate(newDate, false);
+      onSelect == null ? void 0 : onSelect(event, newDate);
+    },
+    [setSelectedDate, onSelect]
+  );
+  const handleHoveredDateChange = useCallback(
+    (event, newHoveredDate) => {
+      setHoveredDate(newHoveredDate);
+      if (newHoveredDate && (CalendarProps == null ? void 0 : CalendarProps.onHoveredDateChange)) {
+        CalendarProps.onHoveredDateChange(event, newHoveredDate);
+      }
+    },
+    [CalendarProps == null ? void 0 : CalendarProps.onHoveredDateChange]
+  );
+  const handleVisibleMonthChange = useCallback(
+    (event, newVisibleMonth) => {
+      setVisibleMonth(newVisibleMonth);
+      if (onVisibleMonthChange) {
+        onVisibleMonthChange(event, newVisibleMonth);
+      }
+    },
+    [onVisibleMonthChange]
+  );
+  const baseCalendarProps = {
+    selectionVariant: "single",
+    visibleMonth,
+    hoveredDate,
+    onHoveredDateChange: handleHoveredDateChange,
+    onVisibleMonthChange: handleVisibleMonthChange,
+    onSelectedDateChange: handleSelectedDateChange,
+    hideOutOfRangeDates: true,
+    selectedDate,
+    minDate,
+    maxDate,
+    locale,
+    timeZone,
+    ...CalendarProps
+  };
+  return /* @__PURE__ */ jsxs(StackLayout, {
+    separators: true,
+    gap: 0,
+    className: clsx(className, withBaseName("container")),
+    ref,
+    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__ */ jsx(Calendar, {
+            selectionVariant: "single",
+            ...baseCalendarProps,
+            children: /* @__PURE__ */ jsx(CalendarNavigation, {
+              ...CalendarNavigationProps
+            })
+          })
+        })
+      })
+    ]
+  });
+});
+
+export { DatePickerSinglePanel };
+//# sourceMappingURL=DatePickerSinglePanel.js.map

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

@@ -0,0 +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  CalendarNavigation,\n  type CalendarNavigationProps,\n  type CalendarSingleProps,\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  /**\n   * Props to be passed to the CalendarNavigation component.\n   */\n  CalendarNavigationProps?: CalendarNavigationProps;\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    CalendarNavigationProps,\n    className,\n    defaultVisibleMonth,\n    visibleMonth: visibleMonthProp,\n    onVisibleMonthChange,\n    helperText,\n    onSelect,\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    >\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          </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

@@ -0,0 +1,175 @@
+import { getLocalTimeZone, startOfMonth, CalendarDate, endOfMonth } from '@internationalized/date';
+import { useForkRef, useControlled, useFormFieldProps } from '@salt-ds/core';
+import { useRef, useState, useEffect } from 'react';
+import '../calendar/Calendar.js';
+import '../calendar/CalendarNavigation.js';
+import '../calendar/internal/CalendarContext.js';
+import { getCurrentLocale } from '../calendar/formatDate.js';
+import { CALENDAR_MIN_YEAR, CALENDAR_MAX_YEAR } from '../calendar/useCalendarSelection.js';
+import { useDatePickerOverlay } from './DatePickerOverlayProvider.js';
+
+function useDatePicker(props, ref) {
+  const {
+    readOnly = false,
+    disabled,
+    selectionVariant,
+    defaultSelectedDate = null,
+    selectedDate: selectedDateProp,
+    onSelectedDateChange,
+    onApply,
+    minDate: minDateProp,
+    maxDate: maxDateProp,
+    timeZone = getLocalTimeZone(),
+    locale = getCurrentLocale(),
+    onCancel,
+    ...rest
+  } = props;
+  const minDate = minDateProp != null ? minDateProp : startOfMonth(new CalendarDate(CALENDAR_MIN_YEAR, 1, 1));
+  const maxDate = maxDateProp != null ? maxDateProp : endOfMonth(new CalendarDate(CALENDAR_MAX_YEAR, 1, 1));
+  const datePickerRef = useRef(null);
+  const containerRef = useForkRef(ref, datePickerRef);
+  const {
+    state: { open },
+    helpers: { setOpen }
+  } = useDatePickerOverlay();
+  const [selectedDate, setSelectedDate] = useControlled({
+    controlled: selectedDateProp,
+    default: defaultSelectedDate,
+    name: "DatePicker",
+    state: "selectedDate"
+  });
+  const [enableApply, setEnableApply] = useState(false);
+  const [cancelled, setCancelled] = useState(false);
+  useEffect(() => {
+    if (open) {
+      setCancelled(false);
+    }
+  }, [open]);
+  const { disabled: formFieldDisabled, readOnly: formFieldReadOnly } = useFormFieldProps();
+  const isReadOnly = readOnly || formFieldReadOnly || false;
+  const isDisabled = disabled || formFieldDisabled || false;
+  const applySingle = (appliedDate, error) => {
+    setCancelled(false);
+    setOpen(false);
+    if (selectionVariant === "single") {
+      onApply == null ? void 0 : onApply(appliedDate, error);
+    }
+  };
+  const setSelectedSingleDate = (selection, error) => {
+    let nextDate;
+    if (error || !selection) {
+      nextDate = selection;
+    } else {
+      let dateAfterMinDate = true;
+      let dateBeforeMaxDate = true;
+      if (minDate && selection) {
+        dateAfterMinDate = selection.compare(minDate) >= 0;
+      }
+      if (maxDate && selection) {
+        dateBeforeMaxDate = selection.compare(maxDate) <= 0;
+      }
+      nextDate = dateAfterMinDate && dateBeforeMaxDate ? selection : null;
+    }
+    setSelectedDate(nextDate);
+    if (selectionVariant === "single") {
+      onSelectedDateChange == null ? void 0 : onSelectedDateChange(nextDate, error);
+    }
+    if (!enableApply) {
+      setOpen(false);
+    }
+  };
+  const applyRange = (appliedDate, error) => {
+    setCancelled(false);
+    if ((appliedDate == null ? void 0 : appliedDate.startDate) && (appliedDate == null ? void 0 : appliedDate.endDate)) {
+      setOpen(false);
+    }
+    if (selectionVariant === "range") {
+      onApply == null ? void 0 : onApply(appliedDate, error);
+    }
+  };
+  const setSelectedRangeDate = (selection, error) => {
+    let nextDate;
+    let nextError = { ...error };
+    let startDateInRange = true;
+    let endDateInRange = true;
+    if ((error == null ? void 0 : error.startDate) || (error == null ? void 0 : error.endDate) || !selection) {
+      nextDate = selection;
+    } else {
+      if (maxDate && (selection == null ? void 0 : selection.startDate)) {
+        startDateInRange = selection.startDate.compare(minDate) >= 0;
+      }
+      if (maxDate && (selection == null ? void 0 : selection.endDate)) {
+        endDateInRange = (selection == null ? void 0 : selection.endDate) && selection.endDate.compare(maxDate) <= 0;
+      }
+      if (!startDateInRange && !endDateInRange) {
+        nextDate = null;
+        nextError = {
+          startDate: "is before min date",
+          endDate: "is after max date"
+        };
+      } else {
+        nextDate = {
+          startDate: selection.startDate || null,
+          endDate: selection.endDate || null
+        };
+        nextError = {
+          startDate: !startDateInRange ? "is before min date" : nextError.startDate,
+          endDate: !endDateInRange ? "is after max date" : nextError.endDate
+        };
+      }
+    }
+    setSelectedDate(nextDate);
+    if (selectionVariant === "range") {
+      onSelectedDateChange == null ? void 0 : onSelectedDateChange(nextDate, nextError);
+    }
+    if (!enableApply && (nextDate == null ? void 0 : nextDate.startDate) && (nextDate == null ? void 0 : nextDate.endDate)) {
+      setOpen(false);
+    }
+  };
+  const cancel = () => {
+    setCancelled(true);
+    setOpen(false);
+    onCancel == null ? void 0 : onCancel();
+  };
+  const returnValue = {
+    state: {
+      selectionVariant,
+      selectedDate,
+      cancelled,
+      enableApply,
+      disabled: isDisabled,
+      readOnly: isReadOnly,
+      containerRef,
+      minDate,
+      maxDate,
+      locale,
+      timeZone,
+      ...rest
+    },
+    helpers: {
+      cancel,
+      setEnableApply
+    }
+  };
+  if (props.selectionVariant === "range") {
+    return {
+      ...returnValue,
+      helpers: {
+        ...returnValue.helpers,
+        apply: applyRange,
+        setSelectedDate: setSelectedRangeDate
+      }
+    };
+  }
+  return {
+    ...returnValue,
+    helpers: {
+      ...returnValue.helpers,
+      apply: applySingle,
+      setSelectedDate: setSelectedSingleDate
+    }
+  };
+}
+
+export { useDatePicker };
+//# sourceMappingURL=useDatePicker.js.map