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

package/dist-cjs/date-input/DateInputSingle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateInputSingle.js","sources":["../src/date-input/DateInputSingle.tsx"],"sourcesContent":["import {\n  type DateValue,\n  type TimeFields,\n  getLocalTimeZone,\n} from \"@internationalized/date\";\nimport {\n  StatusAdornment,\n  makePrefixer,\n  useControlled,\n  useForkRef,\n  useFormFieldProps,\n  useId,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ChangeEventHandler,\n  type ComponentPropsWithoutRef,\n  type FocusEventHandler,\n  type InputHTMLAttributes,\n  type KeyboardEventHandler,\n  type MouseEventHandler,\n  type ReactNode,\n  type RefObject,\n  type SyntheticEvent,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport {\n  type SingleDateSelection,\n  formatDate as defaultFormatDate,\n  getCurrentLocale,\n} from \"../calendar\";\nimport dateInputCss from \"./DateInput.css\";\nimport { extractTimeFieldsFromDate, parseCalendarDate } from \"./utils\";\n\nconst withBaseName = makePrefixer(\"saltDateInput\");\n\n/**\n * Date error produced by DateInputSingle parser.\n */\nexport type DateInputSingleParserError = string | false;\n\n/**\n * Date error produced by DateInputSingle parser.\n */\nexport type DateInputSingleError = DateInputSingleParserError;\n\n/**\n * Return value of DateInputSingle parser.\n * @template T\n */\nexport interface DateInputSingleParserResult<T = DateValue | null> {\n  /**\n   * The parsed date value.\n   */\n  date: T;\n  /**\n   * The error encountered during parsing, if any.\n   */\n  error: DateInputSingleParserError;\n}\n\n/**\n * Props for the DateInputSingle component.\n * @template T\n */\nexport interface DateInputSingleProps<T = SingleDateSelection>\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"defaultValue\">,\n    Pick<\n      ComponentPropsWithoutRef<\"input\">,\n      \"disabled\" | \"value\" | \"defaultValue\" | \"placeholder\"\n    > {\n  /**\n   * The aria-label for accessibility.\n   */\n  ariaLabel?: string;\n  /**\n   * Styling variant with full border. Defaults to false.\n   */\n  bordered?: boolean;\n  /**\n   * The marker to use in an empty read-only DateInput.\n   * Use `''` to disable this feature. Defaults to '—'.\n   */\n  emptyReadOnlyMarker?: string;\n  /**\n   * End adornment component.\n   */\n  endAdornment?: ReactNode;\n  /**\n   * Attributes applied to the `input` element.\n   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dateInput#Attributes\n   */\n  inputProps?: InputHTMLAttributes<HTMLInputElement>;\n  /**\n   * If `true`, the component is read-only.\n   */\n  readOnly?: boolean;\n  /**\n   * Validation status.\n   */\n  validationStatus?: \"error\" | \"warning\" | \"success\";\n  /**\n   * Styling variant. Defaults to \"primary\".\n   */\n  variant?: \"primary\" | \"secondary\";\n  /**\n   * Function to format the input value.\n   */\n  format?: (date: DateValue | null) => string;\n  /**\n   * Reference for the input.\n   */\n  inputRef?: RefObject<HTMLInputElement>;\n  /**\n   * Input value. Use when the input value is controlled.\n   */\n  value?: string;\n  /**\n   * The initial input value. Use when the component is uncontrolled.\n   */\n  defaultValue?: string;\n  /**\n   * The date value. Use when the component is controlled.\n   */\n  date?: T | null;\n  /**\n   * The initial selected date value. Use when the component is uncontrolled.\n   */\n  defaultDate?: T | null;\n  /**\n   * Callback fired when the selected date changes.\n   * @param event - The synthetic event.\n   * @param date - The new date value.\n   * @param error - The date input single error.\n   */\n  onDateChange?: (\n    event: SyntheticEvent,\n    date: T | null,\n    error: DateInputSingleError,\n  ) => void;\n  /**\n   * Function to parse date string to valid `DateValue` or null, if invalid or empty.\n   * @param inputDate - The input date string.\n   * @returns The result of the date input single parser.\n   */\n  parse?: (inputDate: string) => DateInputSingleParserResult;\n  /**\n   * Called when input value changes, either due to user interaction or programmatic formatting of valid dates.\n   * @param newValue - The new date input value.\n   * @param isFormatted - Whether the value is formatted.\n   */\n  onDateValueChange?: (newValue: string, isFormatted: boolean) => void;\n  /**\n   * Locale of the entered date.\n   */\n  locale?: string;\n  /**\n   * Timezone of the entered date.\n   */\n  timeZone?: string;\n}\nexport const DateInputSingle = forwardRef<HTMLDivElement, DateInputSingleProps>(\n  function DateInput(props, ref) {\n    const {\n      bordered = false,\n      className,\n      disabled,\n      \"aria-label\": ariaLabel,\n      date: dateProp,\n      defaultDate,\n      onDateChange,\n      value: valueProp,\n      defaultValue = \"\",\n      onChange,\n      onClick,\n      emptyReadOnlyMarker = \"—\",\n      endAdornment,\n      format: formatProp,\n      inputProps = {},\n      inputRef: inputRefProp = null,\n      parse = parseCalendarDate,\n      placeholder = \"dd mmm yyyy\",\n      readOnly: readOnlyProp,\n      validationStatus: validationStatusProp,\n      variant = \"primary\",\n      onDateValueChange,\n      locale = getCurrentLocale(),\n      timeZone = getLocalTimeZone(),\n      ...rest\n    } = props;\n    const wrapperRef = useRef(null);\n    const lastError = useRef<string | false>(false);\n    const handleWrapperRef = useForkRef<HTMLDivElement>(ref, wrapperRef);\n    const innerInputRef = useRef<HTMLInputElement>(null);\n    const handleInputRef = useForkRef<HTMLInputElement>(\n      innerInputRef,\n      inputRefProp,\n    );\n\n    const inputId = useId();\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-date-input-single\",\n      css: dateInputCss,\n      window: targetWindow,\n    });\n\n    const [date, setDate] = useControlled({\n      controlled: dateProp,\n      default: defaultDate,\n      name: \"DateInputSingle\",\n      state: \"date\",\n    });\n    const [dateValue, setDateValue] = useControlled({\n      controlled: valueProp,\n      default: defaultValue,\n      name: \"DateInputSingle\",\n      state: \"dateValue\",\n    });\n    const preservedTime = useRef<TimeFields | undefined>(\n      extractTimeFieldsFromDate(date || null),\n    );\n\n    const format = useCallback(\n      (date: DateValue | null) => {\n        return formatProp\n          ? formatProp(date)\n          : defaultFormatDate(date, locale, { timeZone });\n      },\n      [formatProp, locale, timeZone],\n    );\n\n    // Update date string value when selected date changes\n    useEffect(() => {\n      const formattedDate = format(date || null);\n      if (formattedDate) {\n        setDateValue(formattedDate);\n        onDateValueChange?.(formattedDate, true);\n      }\n    }, [date, format, locale, timeZone]);\n\n    const [focused, setFocused] = useState(false);\n\n    const {\n      a11yProps: {\n        \"aria-describedby\": formFieldDescribedBy,\n        \"aria-labelledby\": formFieldLabelledBy,\n      } = {},\n      disabled: formFieldDisabled,\n      readOnly: formFieldReadOnly,\n      necessity: formFieldRequired,\n      validationStatus: formFieldValidationStatus,\n    } = useFormFieldProps();\n\n    const isReadOnly = readOnlyProp || formFieldReadOnly;\n    const isDisabled = disabled || formFieldDisabled;\n\n    const validationStatus = formFieldValidationStatus ?? validationStatusProp;\n\n    const {\n      \"aria-describedby\": dateInputDescribedBy,\n      \"aria-labelledby\": dateInputLabelledBy,\n      onBlur: inputPropsOnBlur,\n      onChange: inputPropsOnChange,\n      onKeyDown: inputPropsOnKeyDown,\n      onFocus: inputPropsOnFocus,\n      required: dateInputPropsRequired,\n      ...restDateInputProps\n    } = inputProps;\n\n    const isRequired = formFieldRequired\n      ? [\"required\", \"asterisk\"].includes(formFieldRequired)\n      : dateInputPropsRequired;\n\n    const apply = (event: SyntheticEvent) => {\n      const { date: parsedDate, error } = parse(dateValue ?? \"\");\n      let newDate = parsedDate;\n      if (newDate) {\n        const formattedDate = format(newDate);\n        if (formattedDate) {\n          setDateValue(formattedDate);\n          onDateValueChange?.(formattedDate, true);\n        }\n      }\n      const hasDateChanged =\n        newDate && date ? newDate.compare(date) !== 0 : newDate !== date;\n      if (hasDateChanged) {\n        setDate(newDate);\n        if (newDate && preservedTime.current) {\n          newDate = newDate.set(preservedTime.current);\n        }\n      }\n      if (hasDateChanged || lastError.current !== error) {\n        onDateChange?.(event, newDate, error);\n      }\n      lastError.current = error;\n    };\n\n    const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n      const newDateValue = event.target.value;\n      setDateValue(newDateValue);\n      inputPropsOnChange?.(event);\n      onChange?.(event);\n      onDateValueChange?.(newDateValue, false);\n    };\n\n    const handleFocus: FocusEventHandler<HTMLInputElement> = (event) => {\n      setFocused(true);\n      inputPropsOnFocus?.(event);\n    };\n    const handleBlur: FocusEventHandler<HTMLInputElement> = (event) => {\n      setFocused(false);\n      apply(event);\n      inputPropsOnBlur?.(event);\n    };\n\n    const handleKeyDown: KeyboardEventHandler<HTMLInputElement> = (event) => {\n      if (event.key === \"Enter\") {\n        apply(event);\n      }\n      inputPropsOnKeyDown?.(event);\n    };\n\n    const handleClick: MouseEventHandler<HTMLDivElement> = (event) => {\n      if (event.target === wrapperRef.current) {\n        innerInputRef?.current?.focus();\n      }\n      onClick?.(event);\n    };\n\n    return (\n      <div\n        className={clsx(\n          withBaseName(),\n          withBaseName(variant),\n          {\n            [withBaseName(\"focused\")]: !isDisabled && focused,\n            [withBaseName(\"disabled\")]: isDisabled,\n            [withBaseName(\"readOnly\")]: isReadOnly,\n            [withBaseName(validationStatus ?? \"\")]: validationStatus,\n            [withBaseName(\"bordered\")]: bordered,\n          },\n          className,\n        )}\n        ref={handleWrapperRef}\n        onClick={handleClick}\n        {...rest}\n      >\n        <input\n          autoComplete=\"off\"\n          aria-describedby={clsx(formFieldDescribedBy, dateInputDescribedBy)}\n          aria-labelledby={clsx(\n            formFieldLabelledBy,\n            dateInputLabelledBy,\n            inputId,\n          )}\n          aria-label={clsx(\"Selected date\", ariaLabel)}\n          id={inputId}\n          className={withBaseName(\"input\")}\n          disabled={isDisabled}\n          readOnly={isReadOnly}\n          ref={handleInputRef}\n          tabIndex={isDisabled ? -1 : 0}\n          placeholder={placeholder}\n          size={placeholder.length}\n          value={isReadOnly && !dateValue ? emptyReadOnlyMarker : dateValue}\n          {...restDateInputProps}\n          onBlur={handleBlur}\n          onChange={handleChange}\n          onKeyDown={handleKeyDown}\n          onFocus={!isDisabled ? handleFocus : undefined}\n          required={isRequired}\n        />\n        <div className={withBaseName(\"endAdornmentContainer\")}>\n          {!isDisabled && !isReadOnly && validationStatus && (\n            <StatusAdornment status={validationStatus} />\n          )}\n          {endAdornment}\n        </div>\n        <div className={withBaseName(\"activationIndicator\")} />\n      </div>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","DateInput","parseCalendarDate","getCurrentLocale","getLocalTimeZone","useRef","useForkRef","useId","useWindow","useComponentCssInjection","dateInputCss","date","useControlled","extractTimeFieldsFromDate","useCallback","defaultFormatDate","useEffect","useState","useFormFieldProps","jsxs","clsx","jsx","StatusAdornment"],"mappings":"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"}

package/dist-cjs/date-input/utils.js

@@ -0,0 +1,65 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var date = require('@internationalized/date');
+
+function parseCalendarDate(inputDate) {
+  if (!(inputDate == null ? void 0 : inputDate.length)) {
+    return { date: null, error: false };
+  }
+  const date$1 = new Date(inputDate);
+  if (Number.isNaN(date$1.getTime())) {
+    return { date: null, error: "not a valid date" };
+  }
+  const year = date$1.getFullYear();
+  const month = date$1.getMonth() + 1;
+  const day = date$1.getDate();
+  try {
+    const isoDate = new date.CalendarDate(year, month, day);
+    return { date: isoDate, error: false };
+  } catch (err) {
+    return { date: null, error: err.message };
+  }
+}
+function parseZonedDateTime(inputDate, timeZone = date.getLocalTimeZone()) {
+  const parsedDate = parseCalendarDate(inputDate);
+  if (!parsedDate.date || parsedDate.error) {
+    return { ...parsedDate, date: null };
+  }
+  try {
+    const zonedDate = date.toZoned(parsedDate.date, timeZone, "compatible");
+    return { date: zonedDate, error: false };
+  } catch (err) {
+    return { date: null, error: err.message };
+  }
+}
+const dateSupportsTime = (date$1) => date$1 instanceof date.CalendarDateTime || date$1 instanceof date.ZonedDateTime;
+function extractTimeFieldsFromDateRange(selectedDate) {
+  let startTime;
+  let endTime;
+  if (selectedDate) {
+    if (selectedDate.startDate && dateSupportsTime(selectedDate.startDate)) {
+      const { hour, minute, second, millisecond } = selectedDate.startDate;
+      startTime = { hour, minute, second, millisecond };
+    }
+    if (selectedDate.endDate && dateSupportsTime(selectedDate.endDate)) {
+      const { hour, minute, second, millisecond } = selectedDate.endDate;
+      endTime = { hour, minute, second, millisecond };
+    }
+  }
+  return { startTime, endTime };
+}
+function extractTimeFieldsFromDate(selectedDate) {
+  if (selectedDate && dateSupportsTime(selectedDate)) {
+    const { hour, minute, second, millisecond } = selectedDate;
+    return { hour, minute, second, millisecond };
+  }
+}
+
+exports.dateSupportsTime = dateSupportsTime;
+exports.extractTimeFieldsFromDate = extractTimeFieldsFromDate;
+exports.extractTimeFieldsFromDateRange = extractTimeFieldsFromDateRange;
+exports.parseCalendarDate = parseCalendarDate;
+exports.parseZonedDateTime = parseZonedDateTime;
+//# sourceMappingURL=utils.js.map

package/dist-cjs/date-input/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../src/date-input/utils.ts"],"sourcesContent":["import {\n  CalendarDate,\n  CalendarDateTime,\n  type DateValue,\n  type TimeFields,\n  ZonedDateTime,\n  getLocalTimeZone,\n  toZoned,\n} from \"@internationalized/date\";\nimport type { DateRangeSelection, SingleDateSelection } from \"../calendar\";\n\nexport type RangeTimeFields = {\n  startTime?: TimeFields;\n  endTime?: TimeFields;\n};\n\n/**\n * Parses a string into a CalendarDate.\n * @param inputDate - The input date string.\n * @returns An object containing the parsed date and any error encountered.\n */\nexport function parseCalendarDate(inputDate: string): {\n  date: DateValue | null;\n  error: string | false;\n} {\n  if (!inputDate?.length) {\n    return { date: null, error: false };\n  }\n  const date = new Date(inputDate);\n  if (Number.isNaN(date.getTime())) {\n    return { date: null, error: \"not a valid date\" };\n  }\n\n  const year = date.getFullYear();\n  const month = date.getMonth() + 1;\n  const day = date.getDate();\n\n  try {\n    const isoDate = new CalendarDate(year, month, day);\n    return { date: isoDate, error: false };\n  } catch (err) {\n    return { date: null, error: (err as Error).message };\n  }\n}\n\n/**\n * Parses a string into a ZonedDateTime.\n * @param inputDate - The input date string.\n * @param timeZone - The time zone to use for parsing. Defaults to the local time zone.\n * @returns An object containing the parsed date and any error encountered.\n */\nexport function parseZonedDateTime(\n  inputDate: string,\n  timeZone: string = getLocalTimeZone(),\n): {\n  date: DateValue | null;\n  error: string | false;\n} {\n  const parsedDate = parseCalendarDate(inputDate);\n  if (!parsedDate.date || parsedDate.error) {\n    return { ...parsedDate, date: null };\n  }\n  try {\n    const zonedDate = toZoned(parsedDate.date, timeZone, \"compatible\");\n    return { date: zonedDate, error: false };\n  } catch (err) {\n    return { date: null, error: (err as Error).message };\n  }\n}\n\n/**\n * Checks if a date supports time fields.\n * @param date - The date to check.\n * @returns `true` if the date supports time fields, otherwise `false`.\n */\nexport const dateSupportsTime = (\n  date: DateValue,\n): date is CalendarDateTime | ZonedDateTime =>\n  date instanceof CalendarDateTime || date instanceof ZonedDateTime;\n\n/**\n * Extracts time fields from a date range selection.\n * @param selectedDate - The selected date range.\n * @returns An object containing the start and end time fields.\n */\nexport function extractTimeFieldsFromDateRange(\n  selectedDate: DateRangeSelection | null,\n): RangeTimeFields {\n  let startTime: TimeFields | undefined;\n  let endTime: TimeFields | undefined;\n  if (selectedDate) {\n    if (selectedDate.startDate && dateSupportsTime(selectedDate.startDate)) {\n      const { hour, minute, second, millisecond } = selectedDate.startDate;\n      startTime = { hour, minute, second, millisecond };\n    }\n    if (selectedDate.endDate && dateSupportsTime(selectedDate.endDate)) {\n      const { hour, minute, second, millisecond } = selectedDate.endDate;\n      endTime = { hour, minute, second, millisecond };\n    }\n  }\n  return { startTime, endTime };\n}\n\n/**\n * Extracts time fields from a single date selection.\n * @param selectedDate - The selected date.\n * @returns The time fields of the selected date, if available.\n */\nexport function extractTimeFieldsFromDate(\n  selectedDate: SingleDateSelection | null,\n): TimeFields | undefined {\n  if (selectedDate && dateSupportsTime(selectedDate)) {\n    const { hour, minute, second, millisecond } = selectedDate;\n    return { hour, minute, second, millisecond };\n  }\n}\n"],"names":["date","CalendarDate","getLocalTimeZone","toZoned","CalendarDateTime","ZonedDateTime"],"mappings":"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"}

package/dist-cjs/date-picker/DatePicker.js

@@ -3,161 +3,86 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
-var clsx = require('clsx');
 var react = require('react');
-var react$1 = require('@floating-ui/react');
-var date = require('@internationalized/date');
-var core = require('@salt-ds/core');
-var icons = require('@salt-ds/icons');
-require('../calendar/Calendar.js');
-require('../calendar/internal/CalendarContext.js');
-require('../calendar/internal/utils.js');
-var useSelection = require('../calendar/useSelection.js');
-var DateInput = require('../date-input/DateInput.js');
 var DatePickerContext = require('./DatePickerContext.js');
-var DatePickerPanel = require('./DatePickerPanel.js');
+var DatePickerOverlayProvider = require('./DatePickerOverlayProvider.js');
+var useDatePicker = require('./useDatePicker.js');
 
-const withBaseName = core.makePrefixer("saltDatePicker");
-const DatePicker = react.forwardRef(function DatePicker2({
-  selectionVariant = "default",
-  disabled = false,
-  placeholder = "dd mmm yyyy",
-  selectedDate: selectedDateProp,
-  defaultSelectedDate,
-  dateFormatter,
-  CalendarProps,
-  className,
-  open: openProp,
-  defaultOpen,
-  onOpenChange: onOpenChangeProp,
-  helperText,
-  readOnly: readOnlyProp,
-  validationStatus,
-  onSelectionChange,
-  onChange,
-  visibleMonths = 2,
-  bordered,
-  ...rest
-}, ref) {
-  var _a, _b, _c;
-  const [open, setOpen] = core.useControlled({
-    controlled: openProp,
-    default: Boolean(defaultOpen),
-    name: "openPanel",
-    state: "openPanel"
-  });
-  const [selectedDate, setSelectedDate] = core.useControlled({
-    controlled: selectedDateProp,
-    default: defaultSelectedDate,
-    name: "Calendar",
-    state: "selectedDate"
-  });
-  const [startVisibleMonth, setStartVisibleMonth] = react.useState(
-    (_a = useSelection.isRangeOrOffsetSelectionWithStartDate(selectedDate) ? selectedDate == null ? void 0 : selectedDate.startDate : selectedDate) != null ? _a : date.today(date.getLocalTimeZone())
-  );
-  const [endVisibleMonth, setEndVisibleMonth] = react.useState(
-    (_c = useSelection.isRangeOrOffsetSelectionWithStartDate(selectedDate) ? (_b = selectedDate.startDate) == null ? void 0 : _b.add({ months: 1 }) : selectedDate) != null ? _c : date.today(date.getLocalTimeZone()).add({ months: 1 })
-  );
-  const onOpenChange = (newState) => {
-    var _a2;
-    setOpen(newState);
-    (_a2 = startInputRef == null ? void 0 : startInputRef.current) == null ? void 0 : _a2.focus();
-    onOpenChangeProp == null ? void 0 : onOpenChangeProp(newState);
-  };
-  const { x, y, strategy, elements, floating, reference, context } = core.useFloatingUI({
-    open,
-    onOpenChange,
-    placement: "bottom-start",
-    middleware: [react$1.offset(1), react$1.flip({ fallbackStrategy: "initialPlacement" })]
-  });
-  const { getReferenceProps, getFloatingProps } = react$1.useInteractions([
-    react$1.useDismiss(context)
-  ]);
-  const { disabled: formFieldDisabled, readOnly: formFieldReadOnly } = core.useFormFieldProps();
-  const isReadOnly = readOnlyProp || formFieldReadOnly;
-  const getPanelPosition = () => {
-    var _a2, _b2;
-    return {
-      top: y != null ? y : 0,
-      left: x != null ? x : 0,
-      position: strategy,
-      width: (_a2 = elements.floating) == null ? void 0 : _a2.offsetWidth,
-      height: (_b2 = elements.floating) == null ? void 0 : _b2.offsetHeight
+const DatePickerMain = react.forwardRef(
+  function DatePickerMain2(props, ref) {
+    var _a, _b;
+    const {
+      children,
+      readOnly,
+      disabled,
+      selectionVariant,
+      defaultSelectedDate,
+      selectedDate,
+      onSelectedDateChange,
+      onApply,
+      minDate,
+      maxDate,
+      timeZone,
+      locale,
+      onCancel,
+      ...rest
+    } = props;
+    const useDatePickerProps = {
+      readOnly,
+      disabled,
+      selectionVariant,
+      defaultSelectedDate,
+      selectedDate,
+      onSelectedDateChange,
+      onApply,
+      minDate,
+      maxDate,
+      timeZone,
+      locale,
+      onCancel
     };
-  };
-  const panelRef = react.useRef(null);
-  const startInputRef = react.useRef(null);
-  const endInputRef = react.useRef(null);
-  const inputRef = core.useForkRef(ref, reference);
-  const floatingRef = core.useForkRef(panelRef, floating);
-  const handleSelect = (event, selectedDate2) => {
-    var _a2, _b2;
-    if (selectionVariant === "default" && selectedDate2) {
-      (_a2 = startInputRef == null ? void 0 : startInputRef.current) == null ? void 0 : _a2.focus();
+    if (props.selectionVariant === "range") {
+      const stateAndHelpers2 = useDatePicker.useDatePicker(
+        useDatePickerProps,
+        ref
+      );
+      return /* @__PURE__ */ jsxRuntime.jsx(DatePickerContext.DateRangeSelectionContext.Provider, {
+        value: stateAndHelpers2,
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", {
+          ref: (_a = stateAndHelpers2 == null ? void 0 : stateAndHelpers2.state) == null ? void 0 : _a.containerRef,
+          ...rest,
+          children
+        })
+      });
     }
-    if (useSelection.isRangeOrOffsetSelectionWithStartDate(selectedDate2) && selectedDate2.endDate) {
-      (_b2 = endInputRef == null ? void 0 : endInputRef.current) == null ? void 0 : _b2.focus();
-    }
-    onSelectionChange == null ? void 0 : onSelectionChange(event, selectedDate2);
-  };
-  const handleCalendarButton = () => {
-    var _a2;
-    (_a2 = startInputRef == null ? void 0 : startInputRef.current) == null ? void 0 : _a2.focus();
-    setOpen(!open);
-  };
-  const datePickerContextValue = {
-    openState: open,
-    setOpen,
-    disabled,
-    selectedDate,
-    setSelectedDate,
-    defaultSelectedDate,
-    startVisibleMonth,
-    setStartVisibleMonth,
-    endVisibleMonth,
-    setEndVisibleMonth,
-    selectionVariant,
-    context,
-    getPanelPosition
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs(DatePickerContext.DatePickerContext.Provider, {
-    value: datePickerContextValue,
-    children: [
-      /* @__PURE__ */ jsxRuntime.jsx(DateInput.DateInput, {
-        validationStatus,
-        bordered,
-        className: clsx.clsx(withBaseName(), className),
-        ref: inputRef,
-        ...getReferenceProps(),
-        startInputRef,
-        endInputRef,
-        placeholder,
-        dateFormatter,
-        readOnly: isReadOnly,
-        onSelectionChange,
-        onChange,
-        endAdornment: /* @__PURE__ */ jsxRuntime.jsx(core.Button, {
-          variant: "secondary",
-          onClick: handleCalendarButton,
-          disabled: disabled || isReadOnly || formFieldDisabled,
-          "aria-label": "Open Calendar",
-          children: /* @__PURE__ */ jsxRuntime.jsx(icons.CalendarIcon, {
-            "aria-hidden": true
-          })
-        }),
-        ...rest
-      }),
-      /* @__PURE__ */ jsxRuntime.jsx(DatePickerPanel.DatePickerPanel, {
-        ref: floatingRef,
-        ...getFloatingProps(),
-        onSelect: handleSelect,
-        CalendarProps: { ...CalendarProps, borderedDropdown: bordered },
-        helperText,
-        visibleMonths
+    const stateAndHelpers = useDatePicker.useDatePicker(
+      useDatePickerProps,
+      ref
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx(DatePickerContext.SingleDateSelectionContext.Provider, {
+      value: stateAndHelpers,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", {
+        ref: (_b = stateAndHelpers == null ? void 0 : stateAndHelpers.state) == null ? void 0 : _b.containerRef,
+        ...rest,
+        children
+      })
+    });
+  }
+);
+const DatePicker = react.forwardRef(
+  function DatePicker2(props, ref) {
+    const { open, defaultOpen, ...rest } = props;
+    return /* @__PURE__ */ jsxRuntime.jsx(DatePickerOverlayProvider.DatePickerOverlayProvider, {
+      open,
+      defaultOpen,
+      children: /* @__PURE__ */ jsxRuntime.jsx(DatePickerMain, {
+        ...rest,
+        ref
       })
-    ]
-  });
-});
+    });
+  }
+);
 
 exports.DatePicker = DatePicker;
+exports.DatePickerMain = DatePickerMain;
 //# sourceMappingURL=DatePicker.js.map

package/dist-cjs/date-picker/DatePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.js","sources":["../src/date-picker/DatePicker.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n  type ChangeEvent,\n  type SyntheticEvent,\n  forwardRef,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { flip, offset, useDismiss, useInteractions } from \"@floating-ui/react\";\nimport {\n  type DateValue,\n  getLocalTimeZone,\n  today,\n} from \"@internationalized/date\";\nimport {\n  Button,\n  makePrefixer,\n  useControlled,\n  useFloatingUI,\n  useForkRef,\n  useFormFieldProps,\n} from \"@salt-ds/core\";\nimport { CalendarIcon } from \"@salt-ds/icons\";\nimport {\n  type CalendarProps,\n  type RangeSelectionValueType,\n  type SingleSelectionValueType,\n  isRangeOrOffsetSelectionWithStartDate,\n} from \"../calendar\";\nimport { DateInput, type DateInputProps } from \"../date-input\";\nimport { DatePickerContext } from \"./DatePickerContext\";\nimport { DatePickerPanel } from \"./DatePickerPanel\";\n\nconst withBaseName = makePrefixer(\"saltDatePicker\");\n\nexport interface DatePickerProps<SelectionVariantType>\n  extends DateInputProps<SelectionVariantType> {\n  /**\n   * Selection variant. Defaults to single select.\n   */\n  selectionVariant?: \"default\" | \"range\";\n  /**\n   * If `true`, the component will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * The selected date value. Use when the component is controlled.\n   * Can be a single date or an object with start and end dates for range selection.\n   */\n  selectedDate?: SelectionVariantType;\n  /**\n   * The default date value. Use when the component is not controlled.\n   * Can be a single date or an object with start and end dates for range selection.\n   */\n  defaultSelectedDate?: SelectionVariantType;\n  /**\n   * Props to be passed to the Calendar component.\n   */\n  CalendarProps?: Partial<\n    Omit<\n      CalendarProps,\n      | \"selectionVariant\"\n      | \"selectedDate\"\n      | \"defaultSelectedDate\"\n      | \"onSelectedDateChange\"\n    >\n  >;\n  /**\n   * Function to format the input value.\n   */\n  dateFormatter?: (input: DateValue | undefined) => string;\n  /**\n   * Callback function triggered when open state changes.\n   */\n  onOpenChange?: (newOpen: boolean) => void;\n  /**\n   * Display or hide the component.\n   */\n  open?: boolean;\n  /**\n   * The default open value. Use when the component is not controlled.\n   */\n  defaultOpen?: boolean;\n  /**\n   * Helper text to display in the panel\n   */\n  helperText?: string;\n  /**\n   * Validation status.\n   */\n  validationStatus?: \"error\" | \"warning\" | \"success\";\n  /**\n   * Callback fired when the selected date change.\n   */\n  onSelectionChange?: (\n    event: SyntheticEvent,\n    selectedDate?: SelectionVariantType,\n  ) => void;\n  /**\n   * Callback fired when the input value change.\n   */\n  onChange?: SelectionVariantType extends SingleSelectionValueType\n    ? (\n        event: ChangeEvent<HTMLInputElement>,\n        selectedDateInputValue?: string,\n      ) => void\n    : (\n        event: ChangeEvent<HTMLInputElement>,\n        startDateInputValue?: string,\n        endDateInputValue?: string,\n      ) => void;\n  /**\n   * Number of Calendars to be shown if selectionVariant is range.\n   * 2 is the default value.\n   */\n  visibleMonths?: 1 | 2;\n}\n\nexport const DatePicker = forwardRef<\n  HTMLDivElement,\n  DatePickerProps<SingleSelectionValueType | RangeSelectionValueType>\n>(function DatePicker(\n  {\n    selectionVariant = \"default\",\n    disabled = false,\n    placeholder = \"dd mmm yyyy\",\n    selectedDate: selectedDateProp,\n    defaultSelectedDate,\n    dateFormatter,\n    CalendarProps,\n    className,\n    open: openProp,\n    defaultOpen,\n    onOpenChange: onOpenChangeProp,\n    helperText,\n    readOnly: readOnlyProp,\n    validationStatus,\n    onSelectionChange,\n    onChange,\n    visibleMonths = 2,\n    bordered,\n    ...rest\n  },\n  ref,\n) {\n  const [open, setOpen] = useControlled({\n    controlled: openProp,\n    default: Boolean(defaultOpen),\n    name: \"openPanel\",\n    state: \"openPanel\",\n  });\n\n  const [selectedDate, setSelectedDate] = useControlled({\n    controlled: selectedDateProp,\n    default: defaultSelectedDate,\n    name: \"Calendar\",\n    state: \"selectedDate\",\n  });\n\n  const [startVisibleMonth, setStartVisibleMonth] = useState<\n    DateValue | undefined\n  >(\n    (isRangeOrOffsetSelectionWithStartDate(selectedDate)\n      ? selectedDate?.startDate\n      : selectedDate) ?? today(getLocalTimeZone()),\n  );\n\n  const [endVisibleMonth, setEndVisibleMonth] = useState<DateValue | undefined>(\n    (isRangeOrOffsetSelectionWithStartDate(selectedDate)\n      ? selectedDate.startDate?.add({ months: 1 })\n      : selectedDate) ?? today(getLocalTimeZone()).add({ months: 1 }),\n  );\n\n  const onOpenChange = (newState: boolean) => {\n    setOpen(newState);\n    startInputRef?.current?.focus();\n    onOpenChangeProp?.(newState);\n  };\n\n  const { x, y, strategy, elements, floating, reference, context } =\n    useFloatingUI({\n      open: open,\n      onOpenChange: onOpenChange,\n      placement: \"bottom-start\",\n      middleware: [offset(1), flip({ fallbackStrategy: \"initialPlacement\" })],\n    });\n\n  const { getReferenceProps, getFloatingProps } = useInteractions([\n    useDismiss(context),\n  ]);\n  const { disabled: formFieldDisabled, readOnly: formFieldReadOnly } =\n    useFormFieldProps();\n  const isReadOnly = readOnlyProp || formFieldReadOnly;\n\n  const getPanelPosition = () => ({\n    top: y ?? 0,\n    left: x ?? 0,\n    position: strategy,\n    width: elements.floating?.offsetWidth,\n    height: elements.floating?.offsetHeight,\n  });\n\n  const panelRef = useRef<HTMLDivElement>(null);\n  const startInputRef = useRef<HTMLInputElement>(null);\n  const endInputRef = useRef<HTMLInputElement>(null);\n  const inputRef = useForkRef<HTMLDivElement>(ref, reference);\n  const floatingRef = useForkRef<HTMLDivElement>(panelRef, floating);\n\n  // Handlers\n  const handleSelect = (\n    event: SyntheticEvent,\n    selectedDate?: DateValue | { startDate?: DateValue; endDate?: DateValue },\n  ) => {\n    if (selectionVariant === \"default\" && selectedDate) {\n      startInputRef?.current?.focus();\n    }\n\n    if (\n      isRangeOrOffsetSelectionWithStartDate(selectedDate) &&\n      selectedDate.endDate\n    ) {\n      endInputRef?.current?.focus();\n    }\n    onSelectionChange?.(event, selectedDate);\n  };\n  const handleCalendarButton = () => {\n    startInputRef?.current?.focus();\n    setOpen(!open);\n  };\n\n  // Context\n  const datePickerContextValue = {\n    openState: open,\n    setOpen,\n    disabled,\n    selectedDate,\n    setSelectedDate,\n    defaultSelectedDate,\n    startVisibleMonth,\n    setStartVisibleMonth,\n    endVisibleMonth,\n    setEndVisibleMonth,\n    selectionVariant,\n    context,\n    getPanelPosition,\n  };\n\n  return (\n    <DatePickerContext.Provider value={datePickerContextValue}>\n      <DateInput\n        validationStatus={validationStatus}\n        bordered={bordered}\n        className={clsx(withBaseName(), className)}\n        ref={inputRef}\n        {...getReferenceProps()}\n        startInputRef={startInputRef}\n        endInputRef={endInputRef}\n        placeholder={placeholder}\n        dateFormatter={dateFormatter}\n        readOnly={isReadOnly}\n        onSelectionChange={onSelectionChange}\n        onChange={onChange}\n        endAdornment={\n          <Button\n            variant=\"secondary\"\n            onClick={handleCalendarButton}\n            disabled={disabled || isReadOnly || formFieldDisabled}\n            aria-label=\"Open Calendar\"\n          >\n            <CalendarIcon aria-hidden />\n          </Button>\n        }\n        {...rest}\n      />\n      <DatePickerPanel\n        ref={floatingRef}\n        {...getFloatingProps()}\n        onSelect={handleSelect}\n        CalendarProps={{ ...CalendarProps, borderedDropdown: bordered }}\n        helperText={helperText}\n        visibleMonths={visibleMonths}\n      />\n    </DatePickerContext.Provider>\n  );\n});\n"],"names":["makePrefixer","forwardRef","DatePicker","useControlled","useState","isRangeOrOffsetSelectionWithStartDate","today","getLocalTimeZone","_a","useFloatingUI","offset","flip","useInteractions","useDismiss","useFormFieldProps","_b","useRef","useForkRef","selectedDate","jsxs","DatePickerContext","jsx","DateInput","clsx","Button","CalendarIcon","DatePickerPanel"],"mappings":"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"}
+{"version":3,"file":"DatePicker.js","sources":["../src/date-picker/DatePicker.tsx"],"sourcesContent":["import { type ReactNode, forwardRef } from \"react\";\nimport {\n  DateRangeSelectionContext,\n  type RangeDatePickerState,\n  type SingleDatePickerState,\n  SingleDateSelectionContext,\n} from \"./DatePickerContext\";\nimport { DatePickerOverlayProvider } from \"./DatePickerOverlayProvider\";\nimport {\n  type UseDatePickerRangeProps,\n  type UseDatePickerSingleProps,\n  useDatePicker,\n} from \"./useDatePicker\";\n\n/**\n * Base props for DatePicker.\n */\nexport interface DatePickerBaseProps {\n  className?: string;\n  children?: ReactNode;\n  /** the open/close state of the overlay. The open/close state will be controlled when this prop is provided. */\n  open?: boolean;\n  /**\n   * the initial open/close state of the overlay, when the open/close state is un-controlled.\n   */\n  defaultOpen?: DatePickerBaseProps[\"open\"];\n}\n\nexport interface DatePickerSingleProps\n  extends DatePickerBaseProps,\n    UseDatePickerSingleProps {\n  selectionVariant: \"single\";\n}\n\nexport interface DatePickerRangeProps\n  extends DatePickerBaseProps,\n    UseDatePickerRangeProps {\n  selectionVariant: \"range\";\n}\n\nexport type DatePickerProps = DatePickerSingleProps | DatePickerRangeProps;\n\nexport const DatePickerMain = forwardRef<HTMLDivElement, DatePickerProps>(\n  function DatePickerMain(props, ref) {\n    const {\n      children,\n      readOnly,\n      disabled,\n      selectionVariant,\n      defaultSelectedDate,\n      selectedDate,\n      onSelectedDateChange,\n      onApply,\n      minDate,\n      maxDate,\n      timeZone,\n      locale,\n      onCancel,\n      ...rest\n    } = props;\n    // biome-ignore lint/suspicious/noExplicitAny: type guard\n    const useDatePickerProps: any = {\n      readOnly,\n      disabled,\n      selectionVariant,\n      defaultSelectedDate,\n      selectedDate,\n      onSelectedDateChange,\n      onApply,\n      minDate,\n      maxDate,\n      timeZone,\n      locale,\n      onCancel,\n    };\n    if (props.selectionVariant === \"range\") {\n      const stateAndHelpers = useDatePicker(\n        useDatePickerProps,\n        ref,\n      ) as RangeDatePickerState;\n      return (\n        <DateRangeSelectionContext.Provider value={stateAndHelpers}>\n          <div ref={stateAndHelpers?.state?.containerRef} {...rest}>\n            {children}\n          </div>\n        </DateRangeSelectionContext.Provider>\n      );\n    }\n    const stateAndHelpers = useDatePicker(\n      useDatePickerProps,\n      ref,\n    ) as SingleDatePickerState;\n    return (\n      <SingleDateSelectionContext.Provider value={stateAndHelpers}>\n        <div ref={stateAndHelpers?.state?.containerRef} {...rest}>\n          {children}\n        </div>\n      </SingleDateSelectionContext.Provider>\n    );\n  },\n);\n\nexport const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(\n  function DatePicker(props, ref) {\n    const { open, defaultOpen, ...rest } = props;\n\n    return (\n      <DatePickerOverlayProvider open={open} defaultOpen={defaultOpen}>\n        <DatePickerMain {...rest} ref={ref} />\n      </DatePickerOverlayProvider>\n    );\n  },\n);\n"],"names":["forwardRef","DatePickerMain","stateAndHelpers","useDatePicker","jsx","DateRangeSelectionContext","SingleDateSelectionContext","DatePicker","DatePickerOverlayProvider"],"mappings":";;;;;;;;;;AA0CO,MAAM,cAAiB,GAAAA,gBAAA;AAAA,EAC5B,SAASC,eAAe,CAAA,KAAA,EAAO,GAAK,EAAA;AA3CtC,IAAA,IAAA,EAAA,EAAA,EAAA,CAAA;AA4CI,IAAM,MAAA;AAAA,MACJ,QAAA;AAAA,MACA,QAAA;AAAA,MACA,QAAA;AAAA,MACA,gBAAA;AAAA,MACA,mBAAA;AAAA,MACA,YAAA;AAAA,MACA,oBAAA;AAAA,MACA,OAAA;AAAA,MACA,OAAA;AAAA,MACA,OAAA;AAAA,MACA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,QAAA;AAAA,MACG,GAAA,IAAA;AAAA,KACD,GAAA,KAAA,CAAA;AAEJ,IAAA,MAAM,kBAA0B,GAAA;AAAA,MAC9B,QAAA;AAAA,MACA,QAAA;AAAA,MACA,gBAAA;AAAA,MACA,mBAAA;AAAA,MACA,YAAA;AAAA,MACA,oBAAA;AAAA,MACA,OAAA;AAAA,MACA,OAAA;AAAA,MACA,OAAA;AAAA,MACA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,QAAA;AAAA,KACF,CAAA;AACA,IAAI,IAAA,KAAA,CAAM,qBAAqB,OAAS,EAAA;AACtC,MAAA,MAAMC,gBAAkB,GAAAC,2BAAA;AAAA,QACtB,kBAAA;AAAA,QACA,GAAA;AAAA,OACF,CAAA;AACA,MACE,uBAAAC,cAAA,CAACC,4CAA0B,QAA1B,EAAA;AAAA,QAAmC,KAAOH,EAAAA,gBAAAA;AAAA,QACzC,QAAC,kBAAAE,cAAA,CAAA,KAAA,EAAA;AAAA,UAAI,MAAK,EAAAF,GAAAA,gBAAAA,IAAA,IAAAA,GAAAA,KAAAA,CAAAA,GAAAA,gBAAAA,CAAiB,UAAjB,IAAwB,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,YAAA;AAAA,UAAe,GAAG,IAAA;AAAA,UACjD,QAAA;AAAA,SACH,CAAA;AAAA,OACF,CAAA,CAAA;AAAA,KAEJ;AACA,IAAA,MAAM,eAAkB,GAAAC,2BAAA;AAAA,MACtB,kBAAA;AAAA,MACA,GAAA;AAAA,KACF,CAAA;AACA,IACE,uBAAAC,cAAA,CAACE,6CAA2B,QAA3B,EAAA;AAAA,MAAoC,KAAO,EAAA,eAAA;AAAA,MAC1C,QAAC,kBAAAF,cAAA,CAAA,KAAA,EAAA;AAAA,QAAI,GAAA,EAAA,CAAK,EAAiB,GAAA,eAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,eAAA,CAAA,KAAA,KAAjB,IAAwB,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,YAAA;AAAA,QAAe,GAAG,IAAA;AAAA,QACjD,QAAA;AAAA,OACH,CAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF,EAAA;AAEO,MAAM,UAAa,GAAAJ,gBAAA;AAAA,EACxB,SAASO,WAAW,CAAA,KAAA,EAAO,GAAK,EAAA;AAC9B,IAAA,MAAM,EAAE,IAAA,EAAM,WAAgB,EAAA,GAAA,IAAA,EAAS,GAAA,KAAA,CAAA;AAEvC,IAAA,uBACGH,cAAA,CAAAI,mDAAA,EAAA;AAAA,MAA0B,IAAA;AAAA,MAAY,WAAA;AAAA,MACrC,QAAC,kBAAAJ,cAAA,CAAA,cAAA,EAAA;AAAA,QAAgB,GAAG,IAAA;AAAA,QAAM,GAAA;AAAA,OAAU,CAAA;AAAA,KACtC,CAAA,CAAA;AAAA,GAEJ;AACF;;;;;"}

package/dist-cjs/date-picker/DatePickerActions.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = ".saltDatePickerActions {\n  box-sizing: border-box;\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  width: 100%;\n  padding-top: var(--salt-spacing-100);\n  padding-bottom: var(--salt-spacing-100);\n  padding-left: var(--salt-spacing-100);\n  padding-right: var(--salt-spacing-100);\n}\n\n.saltDatePickerActions-body {\n  flex-grow: 1;\n}\n\n.saltDatePickerActions-action {\n  /* No margin needed here */\n}\n\n.saltDatePickerActions-action + .saltDatePickerActions-action {\n  margin-left: var(--salt-spacing-100);\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=DatePickerActions.css.js.map

package/dist-cjs/date-picker/DatePickerActions.css.js.map

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

package/dist-cjs/date-picker/DatePickerActions.js

@@ -0,0 +1,106 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@salt-ds/core');
+var clsx = require('clsx');
+var react = require('react');
+require('./DatePicker.js');
+var DatePickerContext = require('./DatePickerContext.js');
+require('./DatePickerOverlay.js');
+require('./DatePickerSingleInput.js');
+require('./DatePickerSinglePanel.js');
+require('./DatePickerRangeInput.js');
+require('./DatePickerRangePanel.js');
+var DatePickerActions$1 = require('./DatePickerActions.css.js');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+
+const withBaseName = core.makePrefixer("saltDatePickerActions");
+const DatePickerActions = react.forwardRef(function DatePickerActions2(props, ref) {
+  const {
+    applyButtonRef,
+    ApplyButtonProps,
+    cancelButtonRef,
+    children,
+    className,
+    CancelButtonProps,
+    onApply,
+    onCancel,
+    selectionVariant,
+    ...rest
+  } = props;
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "salt-date-picker-actions",
+    css: DatePickerActions$1,
+    window: targetWindow
+  });
+  let stateAndHelpers;
+  if (selectionVariant === "range") {
+    stateAndHelpers = DatePickerContext.useDatePickerContext({
+      selectionVariant: "range"
+    });
+  } else {
+    stateAndHelpers = DatePickerContext.useDatePickerContext({
+      selectionVariant: "single"
+    });
+  }
+  const {
+    state: { selectedDate },
+    helpers: { cancel, apply, setEnableApply }
+  } = stateAndHelpers;
+  react.useEffect(() => {
+    setEnableApply(true);
+  }, [setEnableApply]);
+  const handleCancel = (event) => {
+    var _a;
+    cancel();
+    (_a = CancelButtonProps == null ? void 0 : CancelButtonProps.onClick) == null ? void 0 : _a.call(CancelButtonProps, event);
+    onCancel == null ? void 0 : onCancel(event);
+  };
+  const handleApply = (event) => {
+    var _a;
+    if (selectionVariant === "single") {
+      apply(selectedDate, false);
+      onApply == null ? void 0 : onApply(event, selectedDate);
+    } else {
+      apply(selectedDate, { startDate: false, endDate: false });
+      onApply == null ? void 0 : onApply(event, selectedDate);
+    }
+    (_a = ApplyButtonProps == null ? void 0 : ApplyButtonProps.onClick) == null ? void 0 : _a.call(ApplyButtonProps, event);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", {
+    className: clsx.clsx(className, withBaseName()),
+    ref,
+    ...rest,
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", {
+        className: withBaseName("body"),
+        children
+      }),
+      /* @__PURE__ */ jsxRuntime.jsx(core.Button, {
+        appearance: "transparent",
+        sentiment: "neutral",
+        ref: cancelButtonRef,
+        ...CancelButtonProps,
+        onClick: handleCancel,
+        className: clsx.clsx(withBaseName("action"), CancelButtonProps == null ? void 0 : CancelButtonProps.className),
+        children: "Cancel"
+      }),
+      /* @__PURE__ */ jsxRuntime.jsx(core.Button, {
+        appearance: "solid",
+        sentiment: "accented",
+        ref: applyButtonRef,
+        ...ApplyButtonProps,
+        onClick: handleApply,
+        className: clsx.clsx(withBaseName("action"), ApplyButtonProps == null ? void 0 : ApplyButtonProps.className),
+        children: "Apply"
+      })
+    ]
+  });
+});
+
+exports.DatePickerActions = DatePickerActions;
+//# sourceMappingURL=DatePickerActions.js.map

package/dist-cjs/date-picker/DatePickerActions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePickerActions.js","sources":["../src/date-picker/DatePickerActions.tsx"],"sourcesContent":["import { Button, type ButtonProps, makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport React, {\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  useEffect,\n  type SyntheticEvent,\n  type MouseEventHandler,\n  type Ref,\n} from \"react\";\nimport type { DateRangeSelection, SingleDateSelection } from \"../calendar\";\nimport {\n  type RangeDatePickerState,\n  type SingleDatePickerState,\n  useDatePickerContext,\n} from \"./index\";\nimport \"./DatePickerActions.css\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport datePickerActions from \"./DatePickerActions.css\";\n\nconst withBaseName = makePrefixer(\"saltDatePickerActions\");\n\n/**\n * Base props for DatePicker actions.\n */\nexport interface DatePickerActionsBaseProps\n  extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * Callback fired when the cancel action is triggered.\n   * @param _event - The synthetic event.\n   */\n  onCancel?: (_event: SyntheticEvent) => void;\n  /**\n   * Ref to apply button\n   */\n  applyButtonRef?: Ref<HTMLButtonElement>;\n  /**\n   * Props for the apply button.\n   */\n  ApplyButtonProps?: ButtonProps;\n  /**\n   * Props for the cancel button.\n   */\n  CancelButtonProps?: ButtonProps;\n  /**\n   * Ref to cancel button\n   */\n  cancelButtonRef?: Ref<HTMLButtonElement>;\n}\n\n/**\n * Props for the DatePicker actions component.\n * @template SelectionVariant - The selection variant, either \"single\" or \"range\".\n */\nexport type DatePickerActionsProps<\n  SelectionVariant extends \"single\" | \"range\",\n> = SelectionVariant extends \"single\"\n  ? DatePickerActionsBaseProps & {\n      /**\n       * The selection variant, set to \"single\".\n       */\n      selectionVariant: \"single\";\n      /**\n       * Callback fired when the apply action is triggered.\n       * @param _event - The synthetic event.\n       * @param date - The selected single date or null.\n       */\n      onApply?: (\n        _event: SyntheticEvent,\n        date: SingleDateSelection | null,\n      ) => void;\n    }\n  : DatePickerActionsBaseProps & {\n      /**\n       * The selection variant, set to \"range\".\n       */\n      selectionVariant: \"range\";\n      /**\n       * Callback fired when the apply action is triggered.\n       * @param _event - The synthetic event.\n       * @param date - The selected date range or null.\n       */\n      onApply?: (\n        _event: SyntheticEvent,\n        date: DateRangeSelection | null,\n      ) => void;\n    };\n\nexport const DatePickerActions = forwardRef<\n  HTMLDivElement,\n  DatePickerActionsProps<\"single\" | \"range\">\n>(function DatePickerActions(props, ref) {\n  const {\n    applyButtonRef,\n    ApplyButtonProps,\n    cancelButtonRef,\n    children,\n    className,\n    CancelButtonProps,\n    onApply,\n    onCancel,\n    selectionVariant,\n    ...rest\n  } = props;\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-date-picker-actions\",\n    css: datePickerActions,\n    window: targetWindow,\n  });\n\n  // biome-ignore lint/suspicious/noExplicitAny: state and helpers coerced based on selectionVariant\n  let stateAndHelpers: any;\n  if (selectionVariant === \"range\") {\n    stateAndHelpers = useDatePickerContext({\n      selectionVariant: \"range\",\n    }) as RangeDatePickerState;\n  } else {\n    stateAndHelpers = useDatePickerContext({\n      selectionVariant: \"single\",\n    }) as SingleDatePickerState;\n  }\n\n  const {\n    state: { selectedDate },\n    helpers: { cancel, apply, setEnableApply },\n  } = stateAndHelpers;\n\n  useEffect(() => {\n    setEnableApply(true);\n  }, [setEnableApply]);\n\n  const handleCancel: MouseEventHandler<HTMLButtonElement> = (event) => {\n    cancel();\n    CancelButtonProps?.onClick?.(event);\n    onCancel?.(event);\n  };\n\n  const handleApply: MouseEventHandler<HTMLButtonElement> = (event) => {\n    if (selectionVariant === \"single\") {\n      apply(selectedDate, false);\n      onApply?.(event, selectedDate);\n    } else {\n      apply(selectedDate, { startDate: false, endDate: false });\n      onApply?.(event, selectedDate);\n    }\n    ApplyButtonProps?.onClick?.(event);\n  };\n\n  return (\n    <div className={clsx(className, withBaseName())} ref={ref} {...rest}>\n      <div className={withBaseName(\"body\")}>{children}</div>\n      <Button\n        appearance=\"transparent\"\n        sentiment=\"neutral\"\n        ref={cancelButtonRef}\n        {...CancelButtonProps}\n        onClick={handleCancel}\n        className={clsx(withBaseName(\"action\"), CancelButtonProps?.className)}\n      >\n        Cancel\n      </Button>\n      <Button\n        appearance=\"solid\"\n        sentiment=\"accented\"\n        ref={applyButtonRef}\n        {...ApplyButtonProps}\n        onClick={handleApply}\n        className={clsx(withBaseName(\"action\"), ApplyButtonProps?.className)}\n      >\n        Apply\n      </Button>\n    </div>\n  );\n});\n"],"names":["makePrefixer","forwardRef","DatePickerActions","useWindow","useComponentCssInjection","datePickerActions","useDatePickerContext","useEffect","jsxs","clsx","jsx","Button"],"mappings":"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"}

package/dist-cjs/date-picker/DatePickerContext.js

@@ -5,24 +5,30 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var core = require('@salt-ds/core');
 var react = require('react');
 
-const DatePickerContext = core.createContext("DatePickerContext", {
-  openState: false,
-  setOpen: () => void 0,
-  disabled: false,
-  selectedDate: void 0,
-  defaultSelectedDate: void 0,
-  setSelectedDate: () => void 0,
-  startVisibleMonth: void 0,
-  setStartVisibleMonth: () => void 0,
-  endVisibleMonth: void 0,
-  setEndVisibleMonth: () => void 0,
-  selectionVariant: "default",
-  getPanelPosition: () => ({})
-});
-function useDatePickerContext() {
-  return react.useContext(DatePickerContext);
+const SingleDateSelectionContext = core.createContext("SingleDateSelectionContext", void 0);
+const DateRangeSelectionContext = core.createContext("DateRangeSelectionContext", void 0);
+function useDatePickerContext({
+  selectionVariant
+}) {
+  if (selectionVariant === "range") {
+    const context2 = react.useContext(DateRangeSelectionContext);
+    if (!context2) {
+      throw new Error(
+        'useDatePickerSelection should be called with props { selectionVariant : "range" } inside DateRangeSelectionContext.Provider'
+      );
+    }
+    return context2;
+  }
+  const context = react.useContext(SingleDateSelectionContext);
+  if (!context) {
+    throw new Error(
+      'useDatePickerSelection should be called with props { selectionVariant : "single" } inside SingleDateSelectionContext.Provider'
+    );
+  }
+  return context;
 }
 
-exports.DatePickerContext = DatePickerContext;
+exports.DateRangeSelectionContext = DateRangeSelectionContext;
+exports.SingleDateSelectionContext = SingleDateSelectionContext;
 exports.useDatePickerContext = useDatePickerContext;
 //# sourceMappingURL=DatePickerContext.js.map

package/dist-cjs/date-picker/DatePickerContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePickerContext.js","sources":["../src/date-picker/DatePickerContext.ts"],"sourcesContent":["import type { DateValue } from \"@internationalized/date\";\nimport { type UseFloatingUIReturn, createContext } from \"@salt-ds/core\";\nimport { useContext } from \"react\";\nimport type {\n  RangeSelectionValueType,\n  SingleSelectionValueType,\n} from \"../calendar\";\n\nexport interface DatePickerContextValue<SelectionVariantType>\n  extends Partial<Pick<UseFloatingUIReturn, \"context\">> {\n  openState: boolean;\n  setOpen: (newOpen: boolean) => void;\n  disabled: boolean;\n  //\n  selectedDate: SelectionVariantType | undefined;\n  defaultSelectedDate: SelectionVariantType | undefined;\n  setSelectedDate: (newStartDate: SelectionVariantType | undefined) => void;\n  startVisibleMonth: DateValue | undefined;\n  setStartVisibleMonth: (newStartDate: DateValue | undefined) => void;\n  endVisibleMonth: DateValue | undefined;\n  setEndVisibleMonth: (newStartDate: DateValue | undefined) => void;\n  selectionVariant: \"default\" | \"range\";\n  getPanelPosition: () => Record<string, unknown>;\n}\n\nexport const DatePickerContext = createContext<\n  DatePickerContextValue<SingleSelectionValueType | RangeSelectionValueType>\n>(\"DatePickerContext\", {\n  openState: false,\n  setOpen: () => undefined,\n  disabled: false,\n  selectedDate: undefined,\n  defaultSelectedDate: undefined,\n  setSelectedDate: () => undefined,\n  startVisibleMonth: undefined,\n  setStartVisibleMonth: () => undefined,\n  endVisibleMonth: undefined,\n  setEndVisibleMonth: () => undefined,\n  selectionVariant: \"default\",\n  getPanelPosition: () => ({}),\n});\n\nexport function useDatePickerContext() {\n  return useContext(DatePickerContext);\n}\n"],"names":["createContext","useContext"],"mappings":";;;;;;;AAyBa,MAAA,iBAAA,GAAoBA,mBAE/B,mBAAqB,EAAA;AAAA,EACrB,SAAW,EAAA,KAAA;AAAA,EACX,SAAS,MAAM,KAAA,CAAA;AAAA,EACf,QAAU,EAAA,KAAA;AAAA,EACV,YAAc,EAAA,KAAA,CAAA;AAAA,EACd,mBAAqB,EAAA,KAAA,CAAA;AAAA,EACrB,iBAAiB,MAAM,KAAA,CAAA;AAAA,EACvB,iBAAmB,EAAA,KAAA,CAAA;AAAA,EACnB,sBAAsB,MAAM,KAAA,CAAA;AAAA,EAC5B,eAAiB,EAAA,KAAA,CAAA;AAAA,EACjB,oBAAoB,MAAM,KAAA,CAAA;AAAA,EAC1B,gBAAkB,EAAA,SAAA;AAAA,EAClB,gBAAA,EAAkB,OAAO,EAAC,CAAA;AAC5B,CAAC,EAAA;AAEM,SAAS,oBAAuB,GAAA;AACrC,EAAA,OAAOC,iBAAW,iBAAiB,CAAA,CAAA;AACrC;;;;;"}
+{"version":3,"file":"DatePickerContext.js","sources":["../src/date-picker/DatePickerContext.ts"],"sourcesContent":["import type { DateValue } from \"@internationalized/date\";\nimport { createContext } from \"@salt-ds/core\";\nimport { useContext } from \"react\";\nimport type { DateRangeSelection, SingleDateSelection } from \"../calendar\";\nimport type { DateInputRangeError, DateInputSingleError } from \"../date-input\";\n\n/**\n * Interface representing the base state for a DatePicker.\n */\ninterface DatePickerBaseState {\n  /**\n   * The state properties of the DatePicker.\n   */\n  state: {\n    /**\n     * If `true`, the DatePicker is disabled.\n     */\n    disabled?: boolean;\n    /**\n     * If `true`, the DatePicker is read-only.\n     */\n    readOnly?: boolean;\n    /**\n     * If `true`, the DatePicker has been cancelled.\n     */\n    cancelled?: boolean;\n    /**\n     * If `true`, the apply action is enabled.\n     */\n    enableApply?: boolean;\n    /**\n     * The minimum selectable date.\n     */\n    minDate?: DateValue;\n    /**\n     * The maximum selectable date.\n     */\n    maxDate?: DateValue;\n    /**\n     * Reference to the container element.\n     */\n    containerRef: React.Ref<HTMLDivElement>;\n    /**\n     * The locale used for date formatting.\n     */\n    locale?: string;\n    /**\n     * The time zone used for date formatting.\n     */\n    timeZone?: string;\n  };\n  /**\n   * Helper functions for managing the DatePicker state.\n   */\n  helpers: {\n    /**\n     * Cancels the DatePicker action.\n     */\n    cancel: () => void;\n    /**\n     * Sets the enableApply state.\n     * @param newEnableApply - The new value for enableApply.\n     */\n    setEnableApply: (newEnableApply: boolean) => void;\n  };\n}\n\n/**\n * Type representing a single date picker error.\n */\nexport type SingleDatePickerError = DateInputSingleError;\n\n/**\n * Type representing a range date picker error.\n */\nexport type RangeDatePickerError = DateInputRangeError;\n\n/**\n * Interface representing the state for a single date picker.\n */\nexport interface SingleDatePickerState extends DatePickerBaseState {\n  /**\n   * The state properties of the single date picker.\n   */\n  state: DatePickerBaseState[\"state\"] & {\n    /**\n     * The selected date.\n     */\n    selectedDate: SingleDateSelection | null;\n    /**\n     * The default selected date.\n     */\n    defaultSelectedDate?: SingleDateSelection;\n  };\n  /**\n   * Helper functions for managing the single date picker state.\n   */\n  helpers: DatePickerBaseState[\"helpers\"] & {\n    /**\n     * Applies the selected date.\n     * @param newDate - The new selected date.\n     * @param error - The error encountered during selection, if any.\n     */\n    apply: (\n      newDate: SingleDateSelection | null,\n      error: SingleDatePickerError,\n    ) => void;\n    /**\n     * Sets the selected date.\n     * @param newDate - The new selected date.\n     * @param error - The error encountered during selection, if any.\n     */\n    setSelectedDate: (\n      newDate: SingleDateSelection | null,\n      error: string | false,\n    ) => void;\n  };\n}\n\n/**\n * Interface representing the state for a range date picker.\n */\nexport interface RangeDatePickerState extends DatePickerBaseState {\n  /**\n   * The state properties of the range date picker.\n   */\n  state: DatePickerBaseState[\"state\"] & {\n    /**\n     * The selected date range.\n     */\n    selectedDate: DateRangeSelection | null;\n    /**\n     * The default selected date range.\n     */\n    defaultSelectedDate?: DateRangeSelection;\n  };\n  /**\n   * Helper functions for managing the range date picker state.\n   */\n  helpers: DatePickerBaseState[\"helpers\"] & {\n    /**\n     * Applies the selected date range.\n     * @param newDate - The new selected date range.\n     * @param error - The error encountered during selection, if any.\n     */\n    apply: (\n      newDate: DateRangeSelection | null,\n      error: RangeDatePickerError,\n    ) => void;\n    /**\n     * Sets the selected date range.\n     * @param newDate - The new selected date range.\n     * @param error - The error encountered during selection, if any.\n     */\n    setSelectedDate: (\n      newDate: DateRangeSelection | null,\n      error: { startDate: string | false; endDate: string | false },\n    ) => void;\n  };\n}\n\n/**\n * Type representing the state of a date picker, either single or range.\n */\nexport type DatePickerState = SingleDatePickerState | RangeDatePickerState;\n\n/**\n * Context for single date selection.\n */\nexport const SingleDateSelectionContext = createContext<\n  SingleDatePickerState | undefined\n>(\"SingleDateSelectionContext\", undefined);\n\n/**\n * Context for date range selection.\n */\nexport const DateRangeSelectionContext = createContext<\n  RangeDatePickerState | undefined\n>(\"DateRangeSelectionContext\", undefined);\n\n/**\n * Props for using the date picker context.\n */\nexport interface UseDatePickerContextProps {\n  /**\n   * The selection variant, either \"single\" or \"range\".\n   */\n  selectionVariant: \"single\" | \"range\";\n}\n\n// Overloads\n\n/**\n * Hook to use the date picker context for single date selection.\n * @param props - The props for the hook.\n * @returns The state of the single date picker.\n */\nexport function useDatePickerContext(props: {\n  selectionVariant: \"single\";\n}): SingleDatePickerState;\n\n/**\n * Hook to use the date picker context for range date selection.\n * @param props - The props for the hook.\n * @returns The state of the range date picker.\n */\nexport function useDatePickerContext(props: {\n  selectionVariant: \"range\";\n}): RangeDatePickerState;\nexport function useDatePickerContext({\n  selectionVariant,\n}: UseDatePickerContextProps): DatePickerState {\n  if (selectionVariant === \"range\") {\n    const context = useContext(DateRangeSelectionContext);\n    if (!context) {\n      throw new Error(\n        'useDatePickerSelection should be called with props { selectionVariant : \"range\" } inside DateRangeSelectionContext.Provider',\n      );\n    }\n    return context;\n  }\n  const context = useContext(SingleDateSelectionContext);\n  if (!context) {\n    throw new Error(\n      'useDatePickerSelection should be called with props { selectionVariant : \"single\" } inside SingleDateSelectionContext.Provider',\n    );\n  }\n  return context;\n}\n"],"names":["createContext","context","useContext"],"mappings":";;;;;;;AAyKa,MAAA,0BAAA,GAA6BA,kBAExC,CAAA,4BAAA,EAA8B,KAAS,CAAA,EAAA;AAK5B,MAAA,yBAAA,GAA4BA,kBAEvC,CAAA,2BAAA,EAA6B,KAAS,CAAA,EAAA;AA+BjC,SAAS,oBAAqB,CAAA;AAAA,EACnC,gBAAA;AACF,CAA+C,EAAA;AAC7C,EAAA,IAAI,qBAAqB,OAAS,EAAA;AAChC,IAAMC,MAAAA,QAAAA,GAAUC,iBAAW,yBAAyB,CAAA,CAAA;AACpD,IAAA,IAAI,CAACD,QAAS,EAAA;AACZ,MAAA,MAAM,IAAI,KAAA;AAAA,QACR,6HAAA;AAAA,OACF,CAAA;AAAA,KACF;AACA,IAAOA,OAAAA,QAAAA,CAAAA;AAAA,GACT;AACA,EAAM,MAAA,OAAA,GAAUC,iBAAW,0BAA0B,CAAA,CAAA;AACrD,EAAA,IAAI,CAAC,OAAS,EAAA;AACZ,IAAA,MAAM,IAAI,KAAA;AAAA,MACR,+HAAA;AAAA,KACF,CAAA;AAAA,GACF;AACA,EAAO,OAAA,OAAA,CAAA;AACT;;;;;;"}