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

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

@@ -0,0 +1,98 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { makePrefixer, Button } from '@salt-ds/core';
+import { clsx } from 'clsx';
+import { forwardRef, useEffect } from 'react';
+import './DatePicker.js';
+import { useDatePickerContext } from './DatePickerContext.js';
+import './DatePickerOverlay.js';
+import './DatePickerSingleInput.js';
+import './DatePickerSinglePanel.js';
+import './DatePickerRangeInput.js';
+import './DatePickerRangePanel.js';
+import css_248z from './DatePickerActions.css.js';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+
+const withBaseName = makePrefixer("saltDatePickerActions");
+const DatePickerActions = forwardRef(function DatePickerActions2(props, ref) {
+  const {
+    applyButtonRef,
+    ApplyButtonProps,
+    cancelButtonRef,
+    children,
+    className,
+    CancelButtonProps,
+    onApply,
+    onCancel,
+    selectionVariant
+  } = props;
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "salt-date-picker-actions",
+    css: css_248z,
+    window: targetWindow
+  });
+  let stateAndHelpers;
+  if (selectionVariant === "range") {
+    stateAndHelpers = useDatePickerContext({
+      selectionVariant: "range"
+    });
+  } else {
+    stateAndHelpers = useDatePickerContext({
+      selectionVariant: "single"
+    });
+  }
+  const {
+    state: { selectedDate },
+    helpers: { cancel, apply, setEnableApply }
+  } = stateAndHelpers;
+  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__ */ jsxs("div", {
+    className: clsx(className, withBaseName()),
+    ref,
+    children: [
+      /* @__PURE__ */ jsx("div", {
+        className: withBaseName("body"),
+        children
+      }),
+      /* @__PURE__ */ jsx(Button, {
+        variant: "secondary",
+        ref: cancelButtonRef,
+        ...CancelButtonProps,
+        onClick: handleCancel,
+        className: clsx(withBaseName("action"), CancelButtonProps == null ? void 0 : CancelButtonProps.className),
+        children: "Cancel"
+      }),
+      /* @__PURE__ */ jsx(Button, {
+        variant: "cta",
+        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 { 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  } = 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}>\n      <div className={withBaseName(\"body\")}>{children}</div>\n      <Button\n        variant={\"secondary\"}\n        ref={cancelButtonRef}\n        {...CancelButtonProps}\n        onClick={handleCancel}\n        className={clsx(withBaseName(\"action\"), CancelButtonProps?.className)}\n      >\n        Cancel\n      </Button>\n      <Button\n        variant={\"cta\"}\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"],"mappings":"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"}

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

@@ -1,23 +1,28 @@
 import { createContext } from '@salt-ds/core';
 import { useContext } from 'react';
 
-const DatePickerContext = 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 useContext(DatePickerContext);
+const SingleDateSelectionContext = createContext("SingleDateSelectionContext", void 0);
+const DateRangeSelectionContext = createContext("DateRangeSelectionContext", void 0);
+function useDatePickerContext({
+  selectionVariant
+}) {
+  if (selectionVariant === "range") {
+    const context2 = useContext(DateRangeSelectionContext);
+    if (!context2) {
+      throw new Error(
+        'useDatePickerSelection should be called with props { selectionVariant : "range" } inside DateRangeSelectionContext.Provider'
+      );
+    }
+    return context2;
+  }
+  const context = useContext(SingleDateSelectionContext);
+  if (!context) {
+    throw new Error(
+      'useDatePickerSelection should be called with props { selectionVariant : "single" } inside SingleDateSelectionContext.Provider'
+    );
+  }
+  return context;
 }
 
-export { DatePickerContext, useDatePickerContext };
+export { DateRangeSelectionContext, SingleDateSelectionContext, useDatePickerContext };
 //# sourceMappingURL=DatePickerContext.js.map

package/dist-es/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":[],"mappings":";;;AAyBa,MAAA,iBAAA,GAAoB,cAE/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,OAAO,WAAW,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":["context"],"mappings":";;;AAyKa,MAAA,0BAAA,GAA6B,aAExC,CAAA,4BAAA,EAA8B,KAAS,CAAA,EAAA;AAK5B,MAAA,yBAAA,GAA4B,aAEvC,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,IAAMA,MAAAA,QAAAA,GAAU,WAAW,yBAAyB,CAAA,CAAA;AACpD,IAAA,IAAI,CAACA,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,GAAU,WAAW,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;;;;"}

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-border) var(--salt-selectable-borderStyle-selected) 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,46 @@
+import { jsx } from 'react/jsx-runtime';
+import { makePrefixer, useFloatingComponent, useFormFieldProps, useForkRef } 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,
+    "aria-modal": "true",
+    ref: floatingRef,
+    focusManagerProps: (floatingUIResult == null ? void 0 : floatingUIResult.context) ? {
+      context: floatingUIResult.context,
+      initialFocus: 4
+    } : void 0,
+    ...getFloatingProps ? getFloatingProps({
+      ...a11yProps,
+      ...rest
+    }) : rest,
+    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  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  type ReactNode,\n  forwardRef,\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      aria-modal=\"true\"\n      ref={floatingRef}\n      focusManagerProps={\n        floatingUIResult?.context\n          ? {\n              context: floatingUIResult.context,\n              initialFocus: 4,\n            }\n          : undefined\n      }\n      {...(getFloatingProps\n        ? getFloatingProps({\n            ...a11yProps,\n            ...rest,\n          })\n        : rest)}\n    >\n      {children}\n    </FloatingComponent>\n  );\n});\n"],"names":["DatePickerOverlay","datePickerOverlayCss"],"mappings":";;;;;;;;;AAiBA,MAAM,YAAA,GAAe,aAAa,uBAAuB,CAAA,CAAA;AAa5C,MAAA,iBAAA,GAAoB,WAG/B,SAASA,kBAAAA,CAAkB,EAAE,SAAW,EAAA,QAAA,EAAA,GAAa,IAAK,EAAA,EAAG,GAAK,EAAA;AAClE,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,0BAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,EAAE,SAAA,EAAW,iBAAkB,EAAA,GAAI,oBAAqB,EAAA,CAAA;AAE9D,EAAM,MAAA,EAAE,SAAU,EAAA,GAAI,iBAAkB,EAAA,CAAA;AAExC,EAAM,MAAA;AAAA,IACJ,KAAA,EAAO,EAAE,IAAA,EAAM,gBAAiB,EAAA;AAAA,IAChC,OAAA,EAAS,EAAE,gBAAiB,EAAA;AAAA,MAC1B,oBAAqB,EAAA,CAAA;AAEzB,EAAA,MAAM,WAAc,GAAA,UAAA;AAAA,IAClB,GAAA;AAAA,IACA,gBAAkB,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,gBAAA,CAAA,QAAA;AAAA,GACpB,CAAA;AAEA,EAAA,uBACG,GAAA,CAAA,iBAAA,EAAA;AAAA,IACC,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,IACzC,MAAM,IAAQ,IAAA,KAAA;AAAA,IACd,YAAW,EAAA,MAAA;AAAA,IACX,GAAK,EAAA,WAAA;AAAA,IACL,iBAAA,EAAA,CACE,qDAAkB,OACd,IAAA;AAAA,MACE,SAAS,gBAAiB,CAAA,OAAA;AAAA,MAC1B,YAAc,EAAA,CAAA;AAAA,KAEhB,GAAA,KAAA,CAAA;AAAA,IAEL,GAAI,mBACD,gBAAiB,CAAA;AAAA,MACf,GAAG,SAAA;AAAA,MACH,GAAG,IAAA;AAAA,KACJ,CACD,GAAA,IAAA;AAAA,IAEH,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ,CAAC;;;;"}

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

@@ -0,0 +1,100 @@
+import { jsx } from 'react/jsx-runtime';
+import { flip, useInteractions, useDismiss } from '@floating-ui/react';
+import { createContext, useControlled, useFloatingUI } from '@salt-ds/core';
+import { useRef, useEffect, useCallback, useMemo, useContext } from 'react';
+
+const DatePickerOverlayContext = createContext("DatePickerOverlayContext", void 0);
+const DatePickerOverlayProvider = ({ open: openProp, defaultOpen, children }) => {
+  const [open, setOpenState] = useControlled({
+    controlled: openProp,
+    default: Boolean(defaultOpen),
+    name: "DatePicker",
+    state: "openDatePickerOverlay"
+  });
+  const triggeringElement = useRef(null);
+  useEffect(() => {
+    if (!open) {
+      const trigger = triggeringElement.current;
+      if (trigger) {
+        trigger.focus();
+      }
+      if (trigger instanceof HTMLInputElement) {
+        setTimeout(() => {
+          trigger.setSelectionRange(0, trigger.value.length);
+        }, 0);
+      }
+      triggeringElement.current = null;
+    }
+  }, [open]);
+  const setOpen = useCallback((newOpen) => {
+    if (newOpen) {
+      triggeringElement.current = document.activeElement;
+    }
+    setOpenState(newOpen);
+  }, []);
+  const floatingUIResult = useFloatingUI({
+    open,
+    onOpenChange: setOpen,
+    placement: "bottom-start",
+    middleware: [flip({ fallbackStrategy: "initialPlacement" })]
+  });
+  const {
+    getFloatingProps: _getFloatingPropsCallback,
+    getReferenceProps: _getReferenceProps
+  } = useInteractions([useDismiss(floatingUIResult.context)]);
+  const getFloatingPropsCallback = useMemo(
+    () => _getFloatingPropsCallback,
+    [_getFloatingPropsCallback]
+  );
+  const getReferenceProps = useMemo(
+    () => _getReferenceProps,
+    [_getReferenceProps]
+  );
+  const getFloatingProps = useCallback(
+    (userProps) => {
+      var _a, _b;
+      const { x, y, strategy, elements } = floatingUIResult;
+      return {
+        top: y != null ? y : 0,
+        left: x != null ? x : 0,
+        position: strategy,
+        width: (_a = elements.floating) == null ? void 0 : _a.offsetWidth,
+        height: (_b = elements.floating) == null ? void 0 : _b.offsetHeight,
+        ...getFloatingPropsCallback(userProps)
+      };
+    },
+    [getFloatingPropsCallback, floatingUIResult]
+  );
+  const state = useMemo(
+    () => ({
+      open,
+      floatingUIResult
+    }),
+    [open, floatingUIResult]
+  );
+  const helpers = useMemo(
+    () => ({
+      getFloatingProps,
+      getReferenceProps,
+      setOpen
+    }),
+    [getFloatingProps, getReferenceProps, setOpen]
+  );
+  const contextValue = useMemo(() => ({ state, helpers }), [state, helpers]);
+  return /* @__PURE__ */ jsx(DatePickerOverlayContext.Provider, {
+    value: contextValue,
+    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

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

@@ -0,0 +1 @@
+{"version":3,"file":"DatePickerOverlayProvider.js","sources":["../src/date-picker/DatePickerOverlayProvider.tsx"],"sourcesContent":["import { flip, useDismiss, useInteractions } from \"@floating-ui/react\";\nimport { createContext, useControlled, useFloatingUI } from \"@salt-ds/core\";\nimport {\n  type ReactNode,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n} from \"react\";\n\n/**\n * Interface representing the state for a DatePicker overlay.\n */\ninterface DatePickerOverlayState {\n  /**\n   * If `true`, the overlay is open.\n   */\n  open: boolean;\n  /**\n   * The result of the floating UI calculations.\n   */\n  floatingUIResult: ReturnType<typeof useFloatingUI>;\n}\n\n/**\n * Interface representing the helper functions for a DatePicker overlay.\n */\ninterface DatePickerOverlayHelpers {\n  /**\n   * Function to get the props for the floating element.\n   */\n  getFloatingProps: ReturnType<typeof useInteractions>[\"getFloatingProps\"];\n  /**\n   * Function to get the props for the reference element.\n   */\n  getReferenceProps: ReturnType<typeof useInteractions>[\"getReferenceProps\"];\n  /**\n   * Sets the open state of the overlay.\n   * @param newOpen - The new value for the open state.\n   */\n  setOpen: (newOpen: boolean) => void;\n}\n\n/**\n * Interface representing the context type for a DatePicker overlay.\n */\ninterface DatePickerOverlayContextType {\n  /**\n   * The state of the DatePicker overlay.\n   */\n  state: DatePickerOverlayState;\n  /**\n   * The helper functions for the DatePicker overlay.\n   */\n  helpers: DatePickerOverlayHelpers;\n}\n\n/**\n * Context for the DatePicker overlay.\n */\nconst DatePickerOverlayContext = createContext<\n  DatePickerOverlayContextType | undefined\n>(\"DatePickerOverlayContext\", undefined);\n\n/**\n * Props for the DatePickerOverlayProvider component.\n */\ninterface DatePickerOverlayProviderProps {\n  /**\n   * If `true`, the overlay is open.\n   */\n  open?: boolean;\n  /**\n   * The default open state of the overlay.\n   */\n  defaultOpen?: boolean;\n  /**\n   * The content to be rendered inside the overlay provider.\n   */\n  children: ReactNode;\n}\n\nexport const DatePickerOverlayProvider: React.FC<\n  DatePickerOverlayProviderProps\n> = ({ open: openProp, defaultOpen, children }) => {\n  const [open, setOpenState] = useControlled({\n    controlled: openProp,\n    default: Boolean(defaultOpen),\n    name: \"DatePicker\",\n    state: \"openDatePickerOverlay\",\n  });\n  const triggeringElement = useRef<HTMLElement | null>(null);\n\n  useEffect(() => {\n    if (!open) {\n      const trigger = triggeringElement.current as HTMLElement;\n      if (trigger) {\n        trigger.focus();\n      }\n      if (trigger instanceof HTMLInputElement) {\n        setTimeout(() => {\n          trigger.setSelectionRange(0, trigger.value.length);\n        }, 0);\n      }\n      triggeringElement.current = null;\n    }\n  }, [open]);\n\n  const setOpen = useCallback((newOpen: boolean) => {\n    if (newOpen) {\n      triggeringElement.current = document.activeElement as HTMLElement;\n    }\n    setOpenState(newOpen);\n  }, []);\n\n  const floatingUIResult = useFloatingUI({\n    open,\n    onOpenChange: setOpen,\n    placement: \"bottom-start\",\n    middleware: [flip({ fallbackStrategy: \"initialPlacement\" })],\n  });\n\n  const {\n    getFloatingProps: _getFloatingPropsCallback,\n    getReferenceProps: _getReferenceProps,\n  } = useInteractions([useDismiss(floatingUIResult.context)]);\n  const getFloatingPropsCallback = useMemo(\n    () => _getFloatingPropsCallback,\n    [_getFloatingPropsCallback],\n  );\n  const getReferenceProps = useMemo(\n    () => _getReferenceProps,\n    [_getReferenceProps],\n  );\n\n  const getFloatingProps = useCallback(\n    (userProps: React.HTMLProps<HTMLElement> | undefined) => {\n      const { x, y, strategy, elements } = floatingUIResult;\n      return {\n        top: y ?? 0,\n        left: x ?? 0,\n        position: strategy,\n        width: elements.floating?.offsetWidth,\n        height: elements.floating?.offsetHeight,\n        ...getFloatingPropsCallback(userProps),\n      };\n    },\n    [getFloatingPropsCallback, floatingUIResult],\n  );\n\n  const state: DatePickerOverlayState = useMemo(\n    () => ({\n      open,\n      floatingUIResult,\n    }),\n    [open, floatingUIResult],\n  );\n\n  const helpers: DatePickerOverlayHelpers = useMemo(\n    () => ({\n      getFloatingProps,\n      getReferenceProps,\n      setOpen,\n    }),\n    [getFloatingProps, getReferenceProps, setOpen],\n  );\n  const contextValue = useMemo(() => ({ state, helpers }), [state, helpers]);\n\n  return (\n    <DatePickerOverlayContext.Provider value={contextValue}>\n      {children}\n    </DatePickerOverlayContext.Provider>\n  );\n};\n\nexport const useDatePickerOverlay = (): DatePickerOverlayContextType => {\n  const context = useContext(DatePickerOverlayContext);\n  if (!context) {\n    throw new Error(\n      \"useDatePickerOverlay must be used within a DatePickerOverlayProvider\",\n    );\n  }\n  return context;\n};\n"],"names":[],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-var css_248z = ".saltDatePickerPanel {\n  background: var(--salt-container-primary-background);\n  border: var(--salt-size-border) var(--salt-selectable-borderStyle-selected) 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  border-radius: var(--salt-palette-corner, 0);\n}\n\n.saltDatePickerPanel-container {\n  width: min-content;\n  gap: 1px;\n}\n\n.saltDatePickerPanel-header {\n  padding: var(--salt-spacing-100);\n}\n";
+var css_248z = ".saltDatePickerOverlay {\n  background: var(--salt-container-primary-background);\n  border: var(--salt-size-border) var(--salt-selectable-borderStyle-selected) 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\n.saltDatePickerPanel-container {\n  width: min-content;\n  gap: 1px;\n}\n\n.saltDatePickerPanel-header {\n  padding: var(--salt-spacing-100);\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=DatePickerPanel.css.js.map

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"DatePickerRangeInput.js","sources":["../src/date-picker/DatePickerRangeInput.tsx"],"sourcesContent":["import { Button, makePrefixer, useControlled, useForkRef } from \"@salt-ds/core\";\nimport { CalendarIcon } from \"@salt-ds/icons\";\nimport { clsx } from \"clsx\";\nimport {\n  type KeyboardEvent,\n  type KeyboardEventHandler,\n  type SyntheticEvent,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useRef,\n} from \"react\";\nimport type { DateRangeSelection } from \"../calendar\";\nimport {\n  DateInputRange,\n  type DateInputRangeError,\n  type DateInputRangeProps,\n  type DateInputRangeValue,\n} from \"../date-input\";\nimport { useDatePickerContext } from \"./DatePickerContext\";\nimport { useDatePickerOverlay } from \"./DatePickerOverlayProvider\";\n\nconst withBaseName = makePrefixer(\"saltDatePickerRangeInput\");\n\n/**\n * Props for the DatePickerRangeInput component.\n */\nexport interface DatePickerRangeInputProps extends DateInputRangeProps {}\n\nexport const DatePickerRangeInput = forwardRef<\n  HTMLDivElement,\n  DatePickerRangeInputProps\n>(function DatePickerRangeInput(props, ref) {\n  const {\n    className,\n    endInputProps: endInputPropsProp,\n    startInputProps: startInputPropsProp,\n    onKeyDown,\n    defaultValue,\n    value: valueProp,\n    onChange,\n    onDateValueChange,\n    ...rest\n  } = props;\n\n  const {\n    state: { selectedDate, disabled, readOnly, cancelled, locale, timeZone },\n    helpers: { setSelectedDate },\n  } = useDatePickerContext({ selectionVariant: \"range\" });\n  const {\n    state: { open, floatingUIResult },\n    helpers: { getReferenceProps, setOpen },\n  } = useDatePickerOverlay();\n\n  const inputRef = useForkRef<HTMLDivElement>(ref, floatingUIResult?.reference);\n  const prevState = useRef<\n    { date: typeof selectedDate; value: typeof valueProp } | undefined\n  >();\n\n  const [value, setValue] = useControlled({\n    controlled: valueProp,\n    default: defaultValue,\n    name: \"DatePickerRangeInput\",\n    state: \"dateValue\",\n  });\n\n  const handleCalendarButton = useCallback(() => {\n    setOpen(!open);\n  }, [open, setOpen]);\n\n  const handleDateChange = useCallback(\n    (\n      _event: SyntheticEvent,\n      newDate: DateRangeSelection | null,\n      error: DateInputRangeError,\n    ) => {\n      setSelectedDate(newDate, error);\n    },\n    [setSelectedDate],\n  );\n\n  const handleDateValueChange = (\n    newDateValue: DateInputRangeValue,\n    isFormatted: boolean,\n  ) => {\n    setValue(newDateValue);\n    onDateValueChange?.(newDateValue, isFormatted);\n  };\n\n  // biome-ignore lint/correctness/useExhaustiveDependencies: should run when open changes and not selected date or value\n  useEffect(() => {\n    if (open) {\n      prevState.current = { date: selectedDate, value };\n    }\n  }, [open]);\n\n  useEffect(() => {\n    if (cancelled) {\n      setValue(prevState?.current?.value);\n      setSelectedDate(prevState?.current?.date || null, {\n        startDate: false,\n        endDate: false,\n      });\n    }\n  }, [cancelled, setSelectedDate]);\n\n  const startInputProps: {\n    onKeyDown: KeyboardEventHandler<HTMLInputElement>;\n  } = {\n    onKeyDown: (event: KeyboardEvent<HTMLInputElement>) => {\n      if (event.key === \"ArrowDown\") {\n        setOpen(true);\n      }\n      startInputPropsProp?.onKeyDown?.(event);\n    },\n    ...startInputPropsProp,\n  };\n  const endInputProps: {\n    onKeyDown: KeyboardEventHandler<HTMLInputElement>;\n  } = {\n    onKeyDown: (event: KeyboardEvent<HTMLInputElement>) => {\n      if (event.key === \"ArrowDown\") {\n        setOpen(true);\n      }\n      endInputPropsProp?.onKeyDown?.(event);\n    },\n    ...endInputPropsProp,\n  };\n\n  return (\n    <DateInputRange\n      value={value || { startDate: \"\", endDate: \"\" }}\n      locale={locale}\n      timeZone={timeZone}\n      className={clsx(withBaseName(), className)}\n      ref={inputRef}\n      date={selectedDate}\n      startInputProps={getReferenceProps(startInputProps)}\n      endInputProps={getReferenceProps(endInputProps)}\n      readOnly={readOnly}\n      onDateChange={handleDateChange}\n      onDateValueChange={handleDateValueChange}\n      onChange={onChange}\n      endAdornment={\n        <Button\n          variant=\"secondary\"\n          onClick={handleCalendarButton}\n          disabled={disabled}\n          aria-label=\"Open Calendar\"\n        >\n          <CalendarIcon />\n        </Button>\n      }\n      {...rest}\n    />\n  );\n});\n"],"names":["DatePickerRangeInput"],"mappings":"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"}