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

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

@@ -0,0 +1 @@
+{"version":3,"file":"DateInputSingle.js","sources":["../src/date-input/DateInputSingle.tsx"],"sourcesContent":["import {\n  makePrefixer,\n  StatusAdornment,\n  useControlled,\n  useForkRef,\n  useFormFieldProps,\n  useId,\n} from \"@salt-ds/core\";\nimport type {\n  DateDetail,\n  DateFrameworkType,\n  ParserResult,\n  TimeFields,\n  Timezone,\n} from \"@salt-ds/date-adapters\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ChangeEventHandler,\n  type ComponentPropsWithoutRef,\n  type FocusEventHandler,\n  forwardRef,\n  type InputHTMLAttributes,\n  type KeyboardEventHandler,\n  type MouseEventHandler,\n  type ReactNode,\n  type Ref,\n  type SyntheticEvent,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport type { SingleDateSelection } from \"../calendar\";\nimport { useLocalization } from \"../localization-provider\";\nimport dateInputCss from \"./DateInput.css\";\n\nconst withBaseName = makePrefixer(\"saltDateInput\");\n\n/**\n * Details of parsing the date\n */\nexport type DateInputSingleDetails = DateDetail;\n\n/**\n * Props for the DateInputSingle component.\n */\nexport interface DateInputSingleProps\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"defaultValue\">,\n    Pick<\n      ComponentPropsWithoutRef<\"input\">,\n      \"disabled\" | \"value\" | \"defaultValue\" | \"placeholder\"\n    > {\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   * Start adornment component\n   */\n  startAdornment?: ReactNode;\n  /**\n   * Validation status.\n   */\n  validationStatus?: \"error\" | \"warning\" | \"success\";\n  /**\n   * Styling variant. Defaults to \"primary\".\n   */\n  variant?: \"primary\" | \"secondary\" | \"tertiary\";\n  /**\n   * Format string for date.\n   */\n  format?: string;\n  /**\n   * Reference for the input.\n   */\n  inputRef?: Ref<HTMLInputElement>;\n  /**\n   * Parser callback, if not using the adapter's parser\n   * @param value - date string to parse\n   * @param format - format required\n   */\n  parse?: (value: string, format: string) => ParserResult;\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?: DateFrameworkType | null;\n  /**\n   * The initial selected date value. Use when the component is uncontrolled.\n   */\n  defaultDate?: DateFrameworkType | null;\n  /**\n   * Callback fired when the selected date changes.\n   * @param event - The synthetic event.\n   * @param date - the selected date, invalid date if not a valid date or undefined (uncontrolled) or null (controlled) if not defined\n   * @param details - The details of date selection, either a valid date or error\n   */\n  onDateChange?: (\n    event: SyntheticEvent,\n    date: SingleDateSelection | null | undefined,\n    details: DateInputSingleDetails,\n  ) => void;\n  /**\n   * Called when input value changes, either due to user interaction or programmatic formatting of valid dates.\n   * @param event - The synthetic event or null if a programmatic change.\n   * @param newValue - The new date input value.\n   */\n  onDateValueChange?: (event: SyntheticEvent | null, newValue: string) => void;\n  /**\n   * Specifies the timezone behavior:\n   * - If undefined, the timezone will be derived from the passed date, or from `defaultSelectedDate`/`selectedDate`.\n   * - If set to \"default\", the default timezone of the date library will be used.\n   * - If set to \"system\", the local system's timezone will be applied.\n   * - If set to \"UTC\", the time will be returned in UTC.\n   * - If set to a valid IANA timezone identifier, the time will be returned for that specific timezone.\n   */\n  timezone?: Timezone;\n}\n\nexport const DateInputSingle = forwardRef<HTMLDivElement, DateInputSingleProps>(\n  (props: DateInputSingleProps, ref: React.Ref<HTMLDivElement>) => {\n    const { dateAdapter } = useLocalization();\n    const {\n      bordered = false,\n      className,\n      disabled,\n      \"aria-label\": ariaLabel,\n      date: dateProp,\n      defaultDate,\n      onDateChange,\n      value: valueProp,\n      format = \"DD MMM YYYY\",\n      defaultValue = \"\",\n      id,\n      onChange,\n      onMouseDown,\n      emptyReadOnlyMarker = \"—\",\n      endAdornment,\n      inputProps = {},\n      inputRef: inputRefProp = null,\n      parse: parseProp,\n      placeholder = format.toLowerCase(),\n      readOnly: readOnlyProp,\n      startAdornment,\n      validationStatus: validationStatusProp,\n      variant = \"primary\",\n      onDateValueChange,\n      timezone = dateProp || defaultDate\n        ? dateAdapter.getTimezone(\n            (dateProp ?? defaultDate) as DateFrameworkType,\n          )\n        : \"default\",\n      ...rest\n    } = props;\n    const wrapperRef = useRef(null);\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(id);\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      // biome-ignore lint/correctness/useExhaustiveDependencies: just on mount\n      default: useMemo(() => {\n        if (defaultDate) {\n          return defaultDate;\n        }\n        if (!defaultValue) {\n          return undefined;\n        }\n        return dateAdapter.parse(defaultValue, format)\n          .date as DateFrameworkType;\n      }, []),\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 lastAppliedValue = useRef<string>(dateValue);\n    const preservedTime = useRef<TimeFields | null>(null);\n    preservedTime.current = dateAdapter.isValid(date)\n      ? dateAdapter.getTime(date)\n      : null;\n\n    // biome-ignore lint/correctness/useExhaustiveDependencies: Update date string value ONLY when selected date changes, not when date string itself change\n    useEffect(() => {\n      const formattedValue = dateAdapter.format(date, format);\n      const hasValueChanged = formattedValue !== dateValue;\n      if (\n        // should not reset \"error\" input values\n        (date === null || dateAdapter.isValid(date)) &&\n        hasValueChanged\n      ) {\n        setDateValue(formattedValue);\n        onDateValueChange?.(null, formattedValue);\n        lastAppliedValue.current = formattedValue;\n      }\n    }, [date, dateAdapter.format, format]);\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 inputAriaLabelledBy =\n      clsx(formFieldLabelledBy, dateInputLabelledBy) || undefined;\n    const inputAriaDescribedBy =\n      clsx(formFieldDescribedBy, dateInputDescribedBy) || undefined;\n\n    const isRequired = formFieldRequired\n      ? [\"required\", \"asterisk\"].includes(formFieldRequired)\n      : dateInputPropsRequired;\n\n    const apply = (event: SyntheticEvent) => {\n      const parse = parseProp ?? dateAdapter.parse.bind(dateAdapter);\n      const parseResult = parse(dateValue ?? \"\", format);\n      let parsedDate: DateFrameworkType | null;\n      let parseDetails: DateDetail;\n      ({ date: parsedDate, ...parseDetails } = parseResult);\n      parsedDate = dateValue ? parsedDate : null;\n      let formattedValue = \"\";\n      const isDateValid = dateAdapter.isValid(parsedDate);\n      if (isDateValid && parsedDate) {\n        parsedDate = dateAdapter.setTimezone(parsedDate, timezone);\n        if (preservedTime.current) {\n          parsedDate = dateAdapter.set(parsedDate, preservedTime.current);\n        }\n        formattedValue = dateAdapter.format(parsedDate, format);\n      }\n      const hasValueChanged = formattedValue !== dateValue;\n      const newValue = isDateValid ? formattedValue : dateValue;\n      if (hasValueChanged) {\n        setDateValue(newValue);\n        onDateValueChange?.(event, newValue);\n      }\n\n      setDate(parsedDate);\n\n      if (lastAppliedValue.current !== newValue) {\n        onDateChange?.(event, parsedDate, parseDetails);\n      }\n      lastAppliedValue.current = newValue;\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?.(event, newDateValue);\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 handleMouseDown: MouseEventHandler<HTMLDivElement> = (event) => {\n      if (event.target === wrapperRef.current) {\n        event.preventDefault();\n        innerInputRef.current?.focus();\n      }\n      onMouseDown?.(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        onMouseDown={handleMouseDown}\n        {...rest}\n      >\n        {startAdornment && (\n          <div className={withBaseName(\"startAdornmentContainer\")}>\n            {startAdornment}\n          </div>\n        )}\n        <input\n          autoComplete=\"off\"\n          aria-describedby={inputAriaDescribedBy}\n          aria-labelledby={inputAriaLabelledBy}\n          aria-invalid={\n            (!isReadOnly && validationStatus === \"error\") || undefined\n          }\n          aria-label={ariaLabel ?? \"date input\"}\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          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 && validationStatus && (\n            <StatusAdornment status={validationStatus} />\n          )}\n          {endAdornment}\n        </div>\n        <div className={withBaseName(\"activationIndicator\")} />\n      </div>\n    );\n  },\n);\n"],"names":["dateInputCss"],"mappings":"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"}

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

@@ -0,0 +1,80 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { DateRangeSelectionContext, SingleDateSelectionContext } from './DatePickerContext.js';
+import { DatePickerOverlayProvider } from './DatePickerOverlayProvider.js';
+import { useDatePicker } from './useDatePicker.js';
+
+const DatePickerMain = forwardRef(
+  (props, ref) => {
+    var _a, _b;
+    const {
+      createAnnouncement,
+      children,
+      readOnly,
+      disabled,
+      isDayHighlighted,
+      isDayUnselectable,
+      selectionVariant,
+      defaultSelectedDate,
+      selectedDate,
+      onSelectionChange,
+      onApply,
+      minDate,
+      maxDate,
+      onCancel,
+      timezone,
+      ...rest
+    } = props;
+    const useDatePickerProps = {
+      createAnnouncement,
+      readOnly,
+      disabled,
+      isDayHighlighted,
+      isDayUnselectable,
+      selectionVariant,
+      defaultSelectedDate,
+      selectedDate,
+      onSelectionChange,
+      onApply,
+      minDate,
+      maxDate,
+      onCancel,
+      timezone
+    };
+    const stateAndHelpers = useDatePicker(useDatePickerProps, ref);
+    if (props.selectionVariant === "range") {
+      return /* @__PURE__ */ jsx(
+        DateRangeSelectionContext.Provider,
+        {
+          value: stateAndHelpers,
+          children: /* @__PURE__ */ jsx("div", { ref: (_a = stateAndHelpers == null ? void 0 : stateAndHelpers.state) == null ? void 0 : _a.containerRef, ...rest, children })
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      SingleDateSelectionContext.Provider,
+      {
+        value: stateAndHelpers,
+        children: /* @__PURE__ */ jsx("div", { ref: (_b = stateAndHelpers == null ? void 0 : stateAndHelpers.state) == null ? void 0 : _b.containerRef, ...rest, children })
+      }
+    );
+  }
+);
+const DatePicker = forwardRef(function DatePicker2(props, ref) {
+  const { defaultOpen, open, openOnClick, onOpenChange, readOnly, ...rest } = props;
+  return /* @__PURE__ */ jsx(
+    DatePickerOverlayProvider,
+    {
+      disabled: rest.disabled,
+      defaultOpen,
+      open,
+      openOnClick,
+      onOpenChange,
+      readOnly,
+      children: /* @__PURE__ */ jsx(DatePickerMain, { ...rest, readOnly, ref })
+    }
+  );
+});
+
+export { DatePicker, DatePickerMain };
+//# sourceMappingURL=DatePicker.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker.js","sources":["../src/date-picker/DatePicker.tsx"],"sourcesContent":["import type { Timezone } from \"@salt-ds/date-adapters\";\nimport { forwardRef, type ReactNode } from \"react\";\nimport {\n  DateRangeSelectionContext,\n  type RangeDatePickerState,\n  type SingleDatePickerState,\n  SingleDateSelectionContext,\n} from \"./DatePickerContext\";\nimport {\n  type DatePickerOpenChangeReason,\n  DatePickerOverlayProvider,\n} 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  /** When `open` is uncontrolled, set this to `true` to open on click */\n  openOnClick?: boolean;\n  /**\n   * Handler for when open state changes\n   * @param newOpen - true when opened\n   * @param reason - reason for the the state change\n   */\n  onOpenChange?: (\n    newOpen: boolean,\n    reason?: DatePickerOpenChangeReason,\n  ) => void;\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   * Specifies the timezone behavior:\n   * - If undefined, the timezone will be derived from the passed date, or from `defaultSelectedDate`/`selectedDate`.\n   * - If set to \"default\", the default timezone of the date library will be used.\n   * - If set to \"system\", the local system's timezone will be applied.\n   * - If set to \"UTC\", the time will be returned in UTC.\n   * - If set to a valid IANA timezone identifier, the time will be returned for that specific timezone.\n   */\n  timezone?: Timezone;\n}\n\n/**\n * Props for the DatePicker component, when `selectionVariant` is `single`.\n */\nexport interface DatePickerSingleProps\n  extends DatePickerBaseProps,\n    UseDatePickerSingleProps {\n  selectionVariant: \"single\";\n}\n\n/**\n * Props for the DatePicker component, when `selectionVariant` is `range`.\n */\nexport interface DatePickerRangeProps\n  extends DatePickerBaseProps,\n    UseDatePickerRangeProps {\n  selectionVariant: \"range\";\n}\n\n/**\n * Props for the DatePicker component.\n */\nexport type DatePickerProps = DatePickerSingleProps | DatePickerRangeProps;\n\nexport const DatePickerMain = forwardRef<HTMLDivElement, DatePickerProps>(\n  (props: DatePickerProps, ref: React.Ref<HTMLDivElement>) => {\n    const {\n      createAnnouncement,\n      children,\n      readOnly,\n      disabled,\n      isDayHighlighted,\n      isDayUnselectable,\n      selectionVariant,\n      defaultSelectedDate,\n      selectedDate,\n      onSelectionChange,\n      onApply,\n      minDate,\n      maxDate,\n      onCancel,\n      timezone,\n      ...rest\n    } = props;\n    // biome-ignore lint/suspicious/noExplicitAny: type guard\n    const useDatePickerProps: any = {\n      createAnnouncement,\n      readOnly,\n      disabled,\n      isDayHighlighted,\n      isDayUnselectable,\n      selectionVariant,\n      defaultSelectedDate,\n      selectedDate,\n      onSelectionChange,\n      onApply,\n      minDate,\n      maxDate,\n      onCancel,\n      timezone,\n    };\n\n    const stateAndHelpers = useDatePicker(useDatePickerProps, ref);\n\n    if (props.selectionVariant === \"range\") {\n      return (\n        <DateRangeSelectionContext.Provider\n          value={stateAndHelpers as RangeDatePickerState}\n        >\n          <div ref={stateAndHelpers?.state?.containerRef} {...rest}>\n            {children}\n          </div>\n        </DateRangeSelectionContext.Provider>\n      );\n    }\n\n    return (\n      <SingleDateSelectionContext.Provider\n        value={stateAndHelpers as SingleDatePickerState}\n      >\n        <div ref={stateAndHelpers?.state?.containerRef} {...rest}>\n          {children}\n        </div>\n      </SingleDateSelectionContext.Provider>\n    );\n  },\n);\n\nexport const DatePicker = forwardRef(function DatePicker(\n  props: DatePickerProps,\n  ref: React.Ref<HTMLDivElement>,\n) {\n  const { defaultOpen, open, openOnClick, onOpenChange, readOnly, ...rest } =\n    props;\n\n  return (\n    <DatePickerOverlayProvider\n      disabled={rest.disabled}\n      defaultOpen={defaultOpen}\n      open={open}\n      openOnClick={openOnClick}\n      onOpenChange={onOpenChange}\n      readOnly={readOnly}\n    >\n      <DatePickerMain {...rest} readOnly={readOnly} ref={ref} />\n    </DatePickerOverlayProvider>\n  );\n});\n"],"names":["DatePicker"],"mappings":";;;;;;AA2EO,MAAM,cAAA,GAAiB,UAAA;AAAA,EAC5B,CAAC,OAAwB,GAAA,KAAmC;AA5E9D,IAAA,IAAA,EAAA,EAAA,EAAA;AA6EI,IAAA,MAAM;AAAA,MACJ,kBAAA;AAAA,MACA,QAAA;AAAA,MACA,QAAA;AAAA,MACA,QAAA;AAAA,MACA,gBAAA;AAAA,MACA,iBAAA;AAAA,MACA,gBAAA;AAAA,MACA,mBAAA;AAAA,MACA,YAAA;AAAA,MACA,iBAAA;AAAA,MACA,OAAA;AAAA,MACA,OAAA;AAAA,MACA,OAAA;AAAA,MACA,QAAA;AAAA,MACA,QAAA;AAAA,MACA,GAAG;AAAA,KACL,GAAI,KAAA;AAEJ,IAAA,MAAM,kBAAA,GAA0B;AAAA,MAC9B,kBAAA;AAAA,MACA,QAAA;AAAA,MACA,QAAA;AAAA,MACA,gBAAA;AAAA,MACA,iBAAA;AAAA,MACA,gBAAA;AAAA,MACA,mBAAA;AAAA,MACA,YAAA;AAAA,MACA,iBAAA;AAAA,MACA,OAAA;AAAA,MACA,OAAA;AAAA,MACA,OAAA;AAAA,MACA,QAAA;AAAA,MACA;AAAA,KACF;AAEA,IAAA,MAAM,eAAA,GAAkB,aAAA,CAAc,kBAAA,EAAoB,GAAG,CAAA;AAE7D,IAAA,IAAI,KAAA,CAAM,qBAAqB,OAAA,EAAS;AACtC,MAAA,uBACE,GAAA;AAAA,QAAC,yBAAA,CAA0B,QAAA;AAAA,QAA1B;AAAA,UACC,KAAA,EAAO,eAAA;AAAA,UAEP,QAAA,kBAAA,GAAA,CAAC,SAAI,GAAA,EAAA,CAAK,EAAA,GAAA,eAAA,IAAA,IAAA,GAAA,MAAA,GAAA,eAAA,CAAiB,UAAjB,IAAA,GAAA,MAAA,GAAA,EAAA,CAAwB,YAAA,EAAe,GAAG,IAAA,EACjD,QAAA,EACH;AAAA;AAAA,OACF;AAAA,IAEJ;AAEA,IAAA,uBACE,GAAA;AAAA,MAAC,0BAAA,CAA2B,QAAA;AAAA,MAA3B;AAAA,QACC,KAAA,EAAO,eAAA;AAAA,QAEP,QAAA,kBAAA,GAAA,CAAC,SAAI,GAAA,EAAA,CAAK,EAAA,GAAA,eAAA,IAAA,IAAA,GAAA,MAAA,GAAA,eAAA,CAAiB,UAAjB,IAAA,GAAA,MAAA,GAAA,EAAA,CAAwB,YAAA,EAAe,GAAG,IAAA,EACjD,QAAA,EACH;AAAA;AAAA,KACF;AAAA,EAEJ;AACF;AAEO,MAAM,UAAA,GAAa,UAAA,CAAW,SAASA,WAAAA,CAC5C,OACA,GAAA,EACA;AACA,EAAA,MAAM,EAAE,aAAa,IAAA,EAAM,WAAA,EAAa,cAAc,QAAA,EAAU,GAAG,MAAK,GACtE,KAAA;AAEF,EAAA,uBACE,GAAA;AAAA,IAAC,yBAAA;AAAA,IAAA;AAAA,MACC,UAAU,IAAA,CAAK,QAAA;AAAA,MACf,WAAA;AAAA,MACA,IAAA;AAAA,MACA,WAAA;AAAA,MACA,YAAA;AAAA,MACA,QAAA;AAAA,MAEA,QAAA,kBAAA,GAAA,CAAC,cAAA,EAAA,EAAgB,GAAG,IAAA,EAAM,UAAoB,GAAA,EAAU;AAAA;AAAA,GAC1D;AAEJ,CAAC;;;;"}

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

@@ -0,0 +1,4 @@
+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 + .saltDatePickerActions-action {\n  margin-left: var(--salt-spacing-100);\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=DatePickerActions.css.js.map

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

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

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

@@ -0,0 +1,117 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { makePrefixer, Button } from '@salt-ds/core';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { clsx } from 'clsx';
+import { forwardRef, useEffect } from 'react';
+import { useLocalization } from '../localization-provider/LocalizationProvider.js';
+import css_248z from './DatePickerActions.css.js';
+import { useDatePickerContext } from './DatePickerContext.js';
+
+const withBaseName = makePrefixer("saltDatePickerActions");
+const DatePickerActions = forwardRef(function DatePickerActions2(props, ref) {
+  const {
+    applyButtonRef,
+    ApplyButtonProps,
+    cancelButtonRef,
+    children,
+    className,
+    CancelButtonProps,
+    onApply,
+    onCancel,
+    selectionVariant,
+    ...rest
+  } = props;
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "salt-date-picker-actions",
+    css: css_248z,
+    window: targetWindow
+  });
+  const { dateAdapter } = useLocalization();
+  const stateAndHelpers = useDatePickerContext({
+    selectionVariant
+  });
+  const {
+    state: { selectedDate },
+    helpers: { cancel, setEnableApply }
+  } = stateAndHelpers;
+  useEffect(() => {
+    setEnableApply(true);
+  }, [setEnableApply]);
+  const handleCancel = (event) => {
+    var _a;
+    cancel(event.nativeEvent);
+    (_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 === "range") {
+      const {
+        helpers: { apply },
+        state: { selectedDate: selectedDate2 }
+      } = stateAndHelpers;
+      apply(event, selectedDate2);
+      onApply == null ? void 0 : onApply(event, selectedDate2);
+    } else {
+      const {
+        helpers: { apply },
+        state: { selectedDate: selectedDate2 }
+      } = stateAndHelpers;
+      apply(event, selectedDate2);
+      onApply == null ? void 0 : onApply(event, selectedDate2);
+    }
+    (_a = ApplyButtonProps == null ? void 0 : ApplyButtonProps.onClick) == null ? void 0 : _a.call(ApplyButtonProps, event);
+  };
+  let selectedLabel = "";
+  if (selectedDate === null) {
+    selectedLabel = "no date selected";
+  } else if (selectionVariant === "single") {
+    const date = selectedDate;
+    if (Array.isArray(date)) {
+      selectedLabel = (date == null ? void 0 : date.length) === 0 ? "no dates selected" : `${date.length} single dates`;
+    } else {
+      selectedLabel = `${dateAdapter.format(date, "dddd D MMMM YYYY")}`;
+    }
+  } else if (selectionVariant === "range") {
+    const dateRange = selectedDate;
+    if (Array.isArray(dateRange)) {
+      selectedLabel = (dateRange == null ? void 0 : dateRange.length) === 0 ? "no dates selected" : `${dateRange.length} range dates`;
+    } else {
+      selectedLabel = `${dateAdapter.format(dateRange == null ? void 0 : dateRange.startDate, "dddd D MMMM YYYY")} to ${dateAdapter.format(dateRange == null ? void 0 : dateRange.endDate, "dddd D MMMM YYYY")}`;
+    }
+  }
+  return /* @__PURE__ */ jsxs("div", { className: clsx(className, withBaseName()), ref, ...rest, children: [
+    /* @__PURE__ */ jsx("div", { className: withBaseName("body"), children }),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        "aria-label": `Cancel ${selectedLabel}`,
+        appearance: "bordered",
+        sentiment: "neutral",
+        ref: cancelButtonRef,
+        ...CancelButtonProps,
+        onClick: handleCancel,
+        className: clsx(withBaseName("action"), CancelButtonProps == null ? void 0 : CancelButtonProps.className),
+        children: "Cancel"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        "aria-label": `Apply ${selectedLabel}`,
+        appearance: "solid",
+        sentiment: "accented",
+        ref: applyButtonRef,
+        ...ApplyButtonProps,
+        onClick: handleApply,
+        className: clsx(withBaseName("action"), ApplyButtonProps == null ? void 0 : ApplyButtonProps.className),
+        children: "Apply"
+      }
+    )
+  ] });
+});
+
+export { DatePickerActions };
+//# sourceMappingURL=DatePickerActions.js.map

package/dist-es/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 { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type MouseEventHandler,\n  type Ref,\n  type SyntheticEvent,\n  useEffect,\n} from \"react\";\nimport type { DateRangeSelection, SingleDateSelection } from \"../calendar\";\nimport { useLocalization } from \"../localization-provider\";\nimport datePickerActions from \"./DatePickerActions.css\";\nimport {\n  type RangeDatePickerState,\n  type SingleDatePickerState,\n  useDatePickerContext,\n} from \"./DatePickerContext\";\n\nconst withBaseName = makePrefixer(\"saltDatePickerActions\");\n\n/**\n * Base props for DatePicker actions component.\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(function DatePickerActions(\n  props: DatePickerActionsProps<\"single\" | \"range\">,\n  ref: React.Ref<HTMLDivElement>,\n) {\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  const { dateAdapter } = useLocalization();\n\n  const stateAndHelpers = useDatePickerContext({\n    selectionVariant,\n  });\n\n  const {\n    state: { selectedDate },\n    helpers: { cancel, setEnableApply },\n  } = stateAndHelpers;\n\n  useEffect(() => {\n    setEnableApply(true);\n  }, [setEnableApply]);\n\n  const handleCancel: MouseEventHandler<HTMLButtonElement> = (event) => {\n    cancel(event.nativeEvent);\n    CancelButtonProps?.onClick?.(event);\n    onCancel?.(event);\n  };\n\n  const handleApply: MouseEventHandler<HTMLButtonElement> = (event) => {\n    if (selectionVariant === \"range\") {\n      const {\n        helpers: { apply },\n        state: { selectedDate },\n      } = stateAndHelpers as RangeDatePickerState;\n      apply(event, selectedDate);\n      onApply?.(event, selectedDate);\n    } else {\n      const {\n        helpers: { apply },\n        state: { selectedDate },\n      } = stateAndHelpers as SingleDatePickerState;\n      apply(event, selectedDate);\n      onApply?.(event, selectedDate);\n    }\n    ApplyButtonProps?.onClick?.(event);\n  };\n\n  let selectedLabel = \"\";\n  if (selectedDate === null) {\n    selectedLabel = \"no date selected\";\n  } else if (selectionVariant === \"single\") {\n    const date = selectedDate as SingleDateSelection[] | SingleDateSelection;\n    if (Array.isArray(date)) {\n      selectedLabel =\n        date?.length === 0\n          ? \"no dates selected\"\n          : `${date.length} single dates`;\n    } else {\n      selectedLabel = `${dateAdapter.format(date, \"dddd D MMMM YYYY\")}`;\n    }\n  } else if (selectionVariant === \"range\") {\n    const dateRange = selectedDate as DateRangeSelection;\n    if (Array.isArray(dateRange)) {\n      selectedLabel =\n        dateRange?.length === 0\n          ? \"no dates selected\"\n          : `${dateRange.length} range dates`;\n    } else {\n      selectedLabel = `${dateAdapter.format(dateRange?.startDate, \"dddd D MMMM YYYY\")} to ${dateAdapter.format(dateRange?.endDate, \"dddd D MMMM YYYY\")}`;\n    }\n  }\n\n  return (\n    <div className={clsx(className, withBaseName())} ref={ref} {...rest}>\n      <div className={withBaseName(\"body\")}>{children}</div>\n      <Button\n        aria-label={`Cancel ${selectedLabel}`}\n        appearance=\"bordered\"\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        aria-label={`Apply ${selectedLabel}`}\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":["DatePickerActions","datePickerActions","selectedDate"],"mappings":"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"}

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

@@ -0,0 +1,32 @@
+import { createContext } from '@salt-ds/core';
+import { useContext } from 'react';
+
+const SingleDateSelectionContext = createContext("SingleDateSelectionContext", void 0);
+const DateRangeSelectionContext = createContext("DateRangeSelectionContext", void 0);
+function useDatePickerContext({
+  selectionVariant
+}) {
+  const rangeContext = useContext(
+    DateRangeSelectionContext
+  );
+  const singleContext = useContext(
+    SingleDateSelectionContext
+  );
+  if (selectionVariant === "range") {
+    if (!rangeContext) {
+      throw new Error(
+        'useDatePickerSelection should be called with props { selectionVariant : "range" } inside DateRangeSelectionContext.Provider'
+      );
+    }
+    return rangeContext;
+  }
+  if (!singleContext) {
+    throw new Error(
+      'useDatePickerSelection should be called with props { selectionVariant : "single" } inside SingleDateSelectionContext.Provider'
+    );
+  }
+  return singleContext;
+}
+
+export { DateRangeSelectionContext, SingleDateSelectionContext, useDatePickerContext };
+//# sourceMappingURL=DatePickerContext.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DatePickerContext.js","sources":["../src/date-picker/DatePickerContext.ts"],"sourcesContent":["import { createContext } from \"@salt-ds/core\";\nimport type { DateFrameworkType, Timezone } from \"@salt-ds/date-adapters\";\nimport { type Context, type Ref, type SyntheticEvent, useContext } from \"react\";\nimport type { DateRangeSelection, SingleDateSelection } from \"../calendar\";\nimport type {\n  DateInputRangeDetails,\n  DateInputSingleDetails,\n} 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?: DateFrameworkType;\n    /**\n     * The maximum selectable date.\n     */\n    maxDate?: DateFrameworkType;\n    /**\n     * Reference to the container element.\n     */\n    containerRef: Ref<HTMLDivElement>;\n    /**\n     * Specifies the timezone behavior:\n     * - If undefined, the timezone will be derived from the passed date, or from `defaultSelectedDate`/`selectedDate`.\n     * - If set to \"default\", the default timezone of the date library will be used.\n     * - If set to \"system\", the local system's timezone will be applied.\n     * - If set to \"UTC\", the time will be returned in UTC.\n     * - If set to a valid IANA timezone identifier, the time will be returned for that specific timezone.\n     */\n    timezone?: Timezone;\n  };\n  /**\n   * Helper functions for managing the DatePicker state.\n   */\n  helpers: {\n    /**\n     * Cancels the DatePicker action.\n     * @param event - event that triggered the state change\n     */\n    cancel: (event?: Event) => void;\n    /**\n     * Function to determine if a day is highlighted.\n     * @param date - The date to check.\n     * @returns A string reason if the day is highlighted, otherwise `false` or `undefined`.\n     */\n    isDayHighlighted?: (date: DateFrameworkType) => string | false | undefined;\n    /**\n     * Function to determine if a day is unselectable.\n     * @param date - The date to check.\n     * @returns A string reason if the day is unselectable, otherwise `false` or `undefined`.\n     */\n    isDayUnselectable?: (date: DateFrameworkType) => string | false | undefined;\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 * 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<DateFrameworkType> | null;\n    /**\n     * The default selected date.\n     */\n    defaultSelectedDate?: SingleDateSelection<DateFrameworkType>;\n  };\n  /**\n   * Helper functions for managing the single date picker state.\n   */\n  helpers: DatePickerBaseState[\"helpers\"] & {\n    /**\n     * Apply the selected single date.\n     * @param event - The synthetic event.\n     * @param date - The new applied date.\n     */\n    apply: (\n      event: SyntheticEvent,\n      date: SingleDateSelection<DateFrameworkType> | null,\n    ) => void;\n    /**\n     * Select a single date.\n     * @param event - The synthetic event.\n     * @param date - The selected date or null.\n     * @param details - Details of selection, such as errors and original value.\n     */\n    select: (\n      event: SyntheticEvent,\n      date: SingleDateSelection<DateFrameworkType> | null,\n      details?: DateInputSingleDetails,\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<DateFrameworkType> | null;\n    /**\n     * The default selected date range.\n     */\n    defaultSelectedDate?: DateRangeSelection<DateFrameworkType>;\n  };\n  /**\n   * Helper functions for managing the range date picker state.\n   */\n  helpers: DatePickerBaseState[\"helpers\"] & {\n    /**\n     * Apply the selected date range.\n     * @param event - The synthetic event.\n     * @param date - The new applied date range\n     */\n    apply: (\n      event: SyntheticEvent,\n      date: DateRangeSelection<DateFrameworkType> | null,\n    ) => void;\n    /**\n     * Select a date range.\n     * @param event - The synthetic event.\n     * @param date - The selected date.\n     * @param details - Details of selection, such as errors and original value.     */\n    select: (\n      event: SyntheticEvent,\n      date: DateRangeSelection<DateFrameworkType> | null,\n      details?: DateInputRangeDetails,\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\nexport function useDatePickerContext({\n  selectionVariant,\n}: UseDatePickerContextProps): DatePickerState {\n  const rangeContext = useContext(\n    DateRangeSelectionContext as Context<RangeDatePickerState | undefined>,\n  );\n\n  const singleContext = useContext(\n    SingleDateSelectionContext as Context<SingleDatePickerState | undefined>,\n  );\n\n  if (selectionVariant === \"range\") {\n    if (!rangeContext) {\n      throw new Error(\n        'useDatePickerSelection should be called with props { selectionVariant : \"range\" } inside DateRangeSelectionContext.Provider',\n      );\n    }\n    return rangeContext;\n  }\n\n  if (!singleContext) {\n    throw new Error(\n      'useDatePickerSelection should be called with props { selectionVariant : \"single\" } inside SingleDateSelectionContext.Provider',\n    );\n  }\n  return singleContext;\n}\n"],"names":[],"mappings":";;;AAmLO,MAAM,0BAAA,GAA6B,aAAA,CAExC,4BAAA,EAA8B,MAAS;AAKlC,MAAM,yBAAA,GAA4B,aAAA,CAEvC,2BAAA,EAA6B,MAAS;AAcjC,SAAS,oBAAA,CAAqB;AAAA,EACnC;AACF,CAAA,EAA+C;AAC7C,EAAA,MAAM,YAAA,GAAe,UAAA;AAAA,IACnB;AAAA,GACF;AAEA,EAAA,MAAM,aAAA,GAAgB,UAAA;AAAA,IACpB;AAAA,GACF;AAEA,EAAA,IAAI,qBAAqB,OAAA,EAAS;AAChC,IAAA,IAAI,CAAC,YAAA,EAAc;AACjB,MAAA,MAAM,IAAI,KAAA;AAAA,QACR;AAAA,OACF;AAAA,IACF;AACA,IAAA,OAAO,YAAA;AAAA,EACT;AAEA,EAAA,IAAI,CAAC,aAAA,EAAe;AAClB,IAAA,MAAM,IAAI,KAAA;AAAA,MACR;AAAA,KACF;AAAA,EACF;AACA,EAAA,OAAO,aAAA;AACT;;;;"}

package/dist-es/date-picker/DatePickerHelperText.css.js

@@ -0,0 +1,4 @@
+var css_248z = ".saltDatePickerHelperText {\n  visibility: visible;\n  margin-top: var(--salt-spacing-75);\n}\n\n.saltDatePickerHelperText-open {\n  visibility: hidden;\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=DatePickerHelperText.css.js.map

package/dist-es/date-picker/DatePickerHelperText.css.js.map

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

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

@@ -0,0 +1,34 @@
+import { jsx } from 'react/jsx-runtime';
+import { makePrefixer, FormFieldHelperText } from '@salt-ds/core';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+import css_248z from './DatePickerHelperText.css.js';
+import { useDatePickerOverlay } from './DatePickerOverlayProvider.js';
+
+const withBaseName = makePrefixer("saltDatePickerHelperText");
+const DatePickerHelperText = forwardRef(function DatePickerHelperText2({ className, ...rest }, ref) {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "salt-date-picker-helper-text",
+    css: css_248z,
+    window: targetWindow
+  });
+  const {
+    state: { open }
+  } = useDatePickerOverlay();
+  return /* @__PURE__ */ jsx(
+    FormFieldHelperText,
+    {
+      ref,
+      className: clsx(className, withBaseName(), {
+        [withBaseName("open")]: open
+      }),
+      ...rest
+    }
+  );
+});
+
+export { DatePickerHelperText };
+//# sourceMappingURL=DatePickerHelperText.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DatePickerHelperText.js","sources":["../src/date-picker/DatePickerHelperText.tsx"],"sourcesContent":["import {\n  FormFieldHelperText,\n  type FormFieldHelperTextProps,\n  makePrefixer,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { forwardRef } from \"react\";\nimport datePickerHelperText from \"./DatePickerHelperText.css\";\nimport { useDatePickerOverlay } from \"./DatePickerOverlayProvider\";\n\nconst withBaseName = makePrefixer(\"saltDatePickerHelperText\");\n\nexport interface DatePickerHelperTextProps extends FormFieldHelperTextProps {}\n\nexport const DatePickerHelperText = forwardRef(function DatePickerHelperText(\n  { className, ...rest }: DatePickerHelperTextProps,\n  ref: React.Ref<HTMLLabelElement>,\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-date-picker-helper-text\",\n    css: datePickerHelperText,\n    window: targetWindow,\n  });\n\n  const {\n    state: { open },\n  } = useDatePickerOverlay();\n\n  return (\n    <FormFieldHelperText\n      ref={ref}\n      className={clsx(className, withBaseName(), {\n        [withBaseName(\"open\")]: open,\n      })}\n      {...rest}\n    />\n  );\n});\n"],"names":["DatePickerHelperText","datePickerHelperText"],"mappings":";;;;;;;;;AAYA,MAAM,YAAA,GAAe,aAAa,0BAA0B,CAAA;AAIrD,MAAM,oBAAA,GAAuB,WAAW,SAASA,qBAAAA,CACtD,EAAE,SAAA,EAAW,GAAG,IAAA,EAAK,EACrB,GAAA,EACA;AACA,EAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,EAAA,wBAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,8BAAA;AAAA,IACR,GAAA,EAAKC,QAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,MAAM;AAAA,IACJ,KAAA,EAAO,EAAE,IAAA;AAAK,MACZ,oBAAA,EAAqB;AAEzB,EAAA,uBACE,GAAA;AAAA,IAAC,mBAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAA,EAAW,IAAA,CAAK,SAAA,EAAW,YAAA,EAAa,EAAG;AAAA,QACzC,CAAC,YAAA,CAAa,MAAM,CAAC,GAAG;AAAA,OACzB,CAAA;AAAA,MACA,GAAG;AAAA;AAAA,GACN;AAEJ,CAAC;;;;"}

package/dist-es/date-picker/DatePickerOverlay.css.js

@@ -0,0 +1,4 @@
+var css_248z = ".saltDatePickerOverlay {\n  background: var(--salt-container-primary-background);\n  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor-selected);\n  overflow: hidden;\n  overflow-y: auto;\n  position: relative;\n  z-index: var(--salt-zIndex-flyover);\n  box-shadow: var(--salt-overlayable-shadow-popout);\n  box-sizing: border-box;\n  display: flex;\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=DatePickerOverlay.css.js.map

package/dist-es/date-picker/DatePickerOverlay.css.js.map

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

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

@@ -0,0 +1,47 @@
+import { jsx } from 'react/jsx-runtime';
+import { makePrefixer, useFloatingComponent, useFormFieldProps, useForkRef, AriaAnnouncerProvider } from '@salt-ds/core';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+import css_248z from './DatePickerOverlay.css.js';
+import { useDatePickerOverlay } from './DatePickerOverlayProvider.js';
+
+const withBaseName = makePrefixer("saltDatePickerOverlay");
+const DatePickerOverlay = forwardRef(function DatePickerOverlay2({ className, children, ...rest }, ref) {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "salt-date-picker-overlay",
+    css: css_248z,
+    window: targetWindow
+  });
+  const { Component: FloatingComponent } = useFloatingComponent();
+  const { a11yProps } = useFormFieldProps();
+  const {
+    state: { open, floatingUIResult },
+    helpers: { getFloatingProps }
+  } = useDatePickerOverlay();
+  const floatingRef = useForkRef(
+    ref,
+    floatingUIResult == null ? void 0 : floatingUIResult.floating
+  );
+  return /* @__PURE__ */ jsx(
+    FloatingComponent,
+    {
+      className: clsx(withBaseName(), className),
+      open: open || false,
+      role: "dialog",
+      "aria-modal": "true",
+      ref: floatingRef,
+      "aria-label": "date picker",
+      ...getFloatingProps ? getFloatingProps({
+        ...a11yProps,
+        ...rest
+      }) : rest,
+      children: /* @__PURE__ */ jsx(AriaAnnouncerProvider, { children })
+    }
+  );
+});
+
+export { DatePickerOverlay };
+//# sourceMappingURL=DatePickerOverlay.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DatePickerOverlay.js","sources":["../src/date-picker/DatePickerOverlay.tsx"],"sourcesContent":["import {\n  AriaAnnouncerProvider,\n  makePrefixer,\n  useFloatingComponent,\n  useForkRef,\n  useFormFieldProps,\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  forwardRef,\n  type ReactNode,\n} from \"react\";\nimport datePickerOverlayCss from \"./DatePickerOverlay.css\";\nimport { useDatePickerOverlay } from \"./DatePickerOverlayProvider\";\n\nconst withBaseName = makePrefixer(\"saltDatePickerOverlay\");\n\n/**\n * Props for the DatePickerOverlay component.\n */\nexport interface DatePickerOverlayProps\n  extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * The content to be rendered inside the overlay.\n   */\n  children: ReactNode;\n}\n\nexport const DatePickerOverlay = forwardRef<\n  HTMLDivElement,\n  DatePickerOverlayProps\n>(function DatePickerOverlay({ className, children, ...rest }, ref) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-date-picker-overlay\",\n    css: datePickerOverlayCss,\n    window: targetWindow,\n  });\n\n  const { Component: FloatingComponent } = useFloatingComponent();\n\n  const { a11yProps } = useFormFieldProps();\n\n  const {\n    state: { open, floatingUIResult },\n    helpers: { getFloatingProps },\n  } = useDatePickerOverlay();\n\n  const floatingRef = useForkRef<HTMLDivElement>(\n    ref,\n    floatingUIResult?.floating,\n  );\n\n  return (\n    <FloatingComponent\n      className={clsx(withBaseName(), className)}\n      open={open || false}\n      role=\"dialog\"\n      aria-modal=\"true\"\n      ref={floatingRef}\n      aria-label=\"date picker\"\n      {...(getFloatingProps\n        ? getFloatingProps({\n            ...a11yProps,\n            ...rest,\n          })\n        : rest)}\n    >\n      <AriaAnnouncerProvider>{children}</AriaAnnouncerProvider>\n    </FloatingComponent>\n  );\n});\n"],"names":["DatePickerOverlay","datePickerOverlayCss"],"mappings":";;;;;;;;;AAkBA,MAAM,YAAA,GAAe,aAAa,uBAAuB,CAAA;AAalD,MAAM,iBAAA,GAAoB,UAAA,CAG/B,SAASA,kBAAAA,CAAkB,EAAE,WAAW,QAAA,EAAU,GAAG,IAAA,EAAK,EAAG,GAAA,EAAK;AAClE,EAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,EAAA,wBAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,0BAAA;AAAA,IACR,GAAA,EAAKC,QAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,MAAM,EAAE,SAAA,EAAW,iBAAA,EAAkB,GAAI,oBAAA,EAAqB;AAE9D,EAAA,MAAM,EAAE,SAAA,EAAU,GAAI,iBAAA,EAAkB;AAExC,EAAA,MAAM;AAAA,IACJ,KAAA,EAAO,EAAE,IAAA,EAAM,gBAAA,EAAiB;AAAA,IAChC,OAAA,EAAS,EAAE,gBAAA;AAAiB,MAC1B,oBAAA,EAAqB;AAEzB,EAAA,MAAM,WAAA,GAAc,UAAA;AAAA,IAClB,GAAA;AAAA,IACA,gBAAA,IAAA,IAAA,GAAA,MAAA,GAAA,gBAAA,CAAkB;AAAA,GACpB;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,iBAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,IAAA,CAAK,YAAA,EAAa,EAAG,SAAS,CAAA;AAAA,MACzC,MAAM,IAAA,IAAQ,KAAA;AAAA,MACd,IAAA,EAAK,QAAA;AAAA,MACL,YAAA,EAAW,MAAA;AAAA,MACX,GAAA,EAAK,WAAA;AAAA,MACL,YAAA,EAAW,aAAA;AAAA,MACV,GAAI,mBACD,gBAAA,CAAiB;AAAA,QACf,GAAG,SAAA;AAAA,QACH,GAAG;AAAA,OACJ,CAAA,GACD,IAAA;AAAA,MAEJ,QAAA,kBAAA,GAAA,CAAC,yBAAuB,QAAA,EAAS;AAAA;AAAA,GACnC;AAEJ,CAAC;;;;"}

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

@@ -0,0 +1,161 @@
+import { jsx } from 'react/jsx-runtime';
+import { flip, useDismiss, useClick, useInteractions } from '@floating-ui/react';
+import { createContext, useControlled, useFloatingUI } from '@salt-ds/core';
+import { useRef, useState, useCallback, useMemo, useContext } from 'react';
+import { useFocusOut } from './useFocusOut.js';
+import { useKeyboard } from './useKeyboard.js';
+
+const DatePickerOverlayContext = createContext("DatePickerOverlayContext", void 0);
+const DatePickerOverlayProvider = ({
+  disabled,
+  open: openProp,
+  openOnClick,
+  defaultOpen,
+  onOpenChange,
+  children,
+  interactions,
+  readOnly
+}) => {
+  const [open, setOpenState, isOpenControlled] = useControlled({
+    controlled: openProp,
+    default: Boolean(defaultOpen),
+    name: "DatePicker",
+    state: "openDatePickerOverlay"
+  });
+  const triggeringElementRef = useRef(null);
+  const initialFocusRef = useRef(null);
+  const [focused, setFocused] = useState(false);
+  const onDismissCallback = useRef();
+  const handleOpenChange = useCallback(
+    (newOpen, _event, reason) => {
+      var _a;
+      if (newOpen) {
+        if (readOnly) {
+          return;
+        }
+        triggeringElementRef.current = document.activeElement;
+        setFocused(true);
+      } else if (!isOpenControlled && reason !== "focus-out") {
+        const trigger = triggeringElementRef.current;
+        if (trigger) {
+          trigger.focus();
+        }
+        if (trigger instanceof HTMLInputElement) {
+          setTimeout(() => {
+            trigger.setSelectionRange(0, trigger.value.length);
+          }, 1);
+        }
+        triggeringElementRef.current = null;
+      }
+      setOpenState(newOpen);
+      onOpenChange == null ? void 0 : onOpenChange(newOpen, reason);
+      if (reason === "focus-out" || reason === "escape-key" || reason === "outside-press" && onDismissCallback.current) {
+        (_a = onDismissCallback == null ? void 0 : onDismissCallback.current) == null ? void 0 : _a.call(onDismissCallback);
+      }
+    },
+    [isOpenControlled, onOpenChange, readOnly]
+  );
+  const openState = open && !readOnly;
+  const floatingUIResult = useFloatingUI({
+    open: openState,
+    onOpenChange: handleOpenChange,
+    placement: "bottom-start",
+    middleware: [flip({ fallbackStrategy: "initialPlacement" })]
+  });
+  const handleContainerBlur = useCallback(() => {
+    setTimeout(() => {
+      var _a, _b;
+      setFocused(
+        !!((_b = (_a = floatingUIResult == null ? void 0 : floatingUIResult.refs.floating) == null ? void 0 : _a.current) == null ? void 0 : _b.contains(
+          document.activeElement
+        ))
+      );
+    }, 0);
+  }, [floatingUIResult]);
+  const defaultInteractions = [
+    useDismiss(floatingUIResult.context, {}),
+    useKeyboard(floatingUIResult.context, {
+      enabled: !readOnly,
+      onArrowDown: (event) => {
+        handleOpenChange(true, event.nativeEvent, "reference-press");
+      }
+    }),
+    useClick(floatingUIResult.context, {
+      enabled: !disabled && !!openOnClick && !readOnly,
+      toggle: false,
+      keyboardHandlers: false
+    }),
+    useFocusOut(floatingUIResult.context, {
+      enabled: !readOnly
+    })
+  ];
+  const {
+    getFloatingProps: getFloatingPropsCallback,
+    getReferenceProps: getReferencePropsCallback
+  } = useInteractions(
+    interactions ? interactions(floatingUIResult.context) : defaultInteractions
+  );
+  const getFloatingProps = useCallback(
+    (userProps) => {
+      var _a, _b;
+      const { x, y, strategy, elements } = floatingUIResult;
+      return {
+        top: y ?? 0,
+        left: x ?? 0,
+        position: strategy,
+        width: (_a = elements.floating) == null ? void 0 : _a.offsetWidth,
+        height: (_b = elements.floating) == null ? void 0 : _b.offsetHeight,
+        ...getFloatingPropsCallback(userProps),
+        focusManagerProps: {
+          returnFocus: false,
+          context: floatingUIResult.context,
+          initialFocus: initialFocusRef
+        }
+      };
+    },
+    [getFloatingPropsCallback, floatingUIResult]
+  );
+  const setOnDismiss = useCallback(
+    (dismissCallback) => {
+      onDismissCallback.current = dismissCallback;
+    },
+    []
+  );
+  const state = useMemo(
+    () => ({
+      open: openState,
+      focused,
+      floatingUIResult,
+      initialFocusRef
+    }),
+    [focused, openState, floatingUIResult]
+  );
+  const helpers = useMemo(
+    () => ({
+      getFloatingProps,
+      getReferenceProps: getReferencePropsCallback,
+      setOpen: handleOpenChange,
+      setOnDismiss
+    }),
+    [
+      getFloatingProps,
+      getReferencePropsCallback,
+      handleOpenChange,
+      setOnDismiss
+    ]
+  );
+  const contextValue = useMemo(() => ({ state, helpers }), [state, helpers]);
+  return /* @__PURE__ */ jsx(DatePickerOverlayContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("div", { onBlur: handleContainerBlur, children }) });
+};
+const useDatePickerOverlay = () => {
+  const context = useContext(DatePickerOverlayContext);
+  if (!context) {
+    throw new Error(
+      "useDatePickerOverlay must be used within a DatePickerOverlayProvider"
+    );
+  }
+  return context;
+};
+
+export { DatePickerOverlayProvider, useDatePickerOverlay };
+//# sourceMappingURL=DatePickerOverlayProvider.js.map