@salt-ds/lab 1.0.0-alpha.54 → 1.0.0-alpha.56

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 { 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;;;;"}
+{"version":3,"file":"DatePickerContext.js","sources":["../src/date-picker/DatePickerContext.ts"],"sourcesContent":["import { createContext } from \"@salt-ds/core\";\nimport type { DateFrameworkType } 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<TDate extends DateFrameworkType> {\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?: TDate;\n    /**\n     * The maximum selectable date.\n     */\n    maxDate?: TDate;\n    /**\n     * Reference to the container element.\n     */\n    containerRef: Ref<HTMLDivElement>;\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 * Interface representing the state for a single date picker.\n */\nexport interface SingleDatePickerState<TDate extends DateFrameworkType>\n  extends DatePickerBaseState<TDate> {\n  /**\n   * The state properties of the single date picker.\n   */\n  state: DatePickerBaseState<TDate>[\"state\"] & {\n    /**\n     * The selected date.\n     */\n    selectedDate: SingleDateSelection<TDate> | null;\n    /**\n     * The default selected date.\n     */\n    defaultSelectedDate?: SingleDateSelection<TDate>;\n  };\n  /**\n   * Helper functions for managing the single date picker state.\n   */\n  helpers: DatePickerBaseState<TDate>[\"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<TDate> | 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<TDate> | null,\n      details?: DateInputSingleDetails,\n    ) => void;\n  };\n}\n\n/**\n * Interface representing the state for a range date picker.\n */\nexport interface RangeDatePickerState<TDate extends DateFrameworkType>\n  extends DatePickerBaseState<TDate> {\n  /**\n   * The state properties of the range date picker.\n   */\n  state: DatePickerBaseState<TDate>[\"state\"] & {\n    /**\n     * The selected date range.\n     */\n    selectedDate: DateRangeSelection<TDate> | null;\n    /**\n     * The default selected date range.\n     */\n    defaultSelectedDate?: DateRangeSelection<TDate>;\n  };\n  /**\n   * Helper functions for managing the range date picker state.\n   */\n  helpers: DatePickerBaseState<TDate>[\"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<TDate> | 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<TDate> | 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<TDate extends DateFrameworkType> =\n  | SingleDatePickerState<TDate>\n  | RangeDatePickerState<TDate>;\n\n/**\n * Context for single date selection.\n */\nexport const SingleDateSelectionContext = createContext<\n  SingleDatePickerState<any> | undefined\n>(\"SingleDateSelectionContext\", undefined);\n\n/**\n * Context for date range selection.\n */\nexport const DateRangeSelectionContext = createContext<\n  RangeDatePickerState<any> | 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<TDate extends DateFrameworkType>(props: {\n  selectionVariant: \"single\";\n}): SingleDatePickerState<TDate>;\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<TDate extends DateFrameworkType>(props: {\n  selectionVariant: \"range\";\n}): RangeDatePickerState<TDate>;\n\nexport function useDatePickerContext<TDate extends DateFrameworkType>({\n  selectionVariant,\n}: UseDatePickerContextProps): DatePickerState<TDate> {\n  if (selectionVariant === \"range\") {\n    const context = useContext(\n      DateRangeSelectionContext as Context<\n        RangeDatePickerState<TDate> | undefined\n      >,\n    );\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(\n    SingleDateSelectionContext as Context<\n      SingleDatePickerState<TDate> | undefined\n    >,\n  );\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":";;;AAiKa,MAAA,0BAAA,GAA6B,aAExC,CAAA,4BAAA,EAA8B,KAAS,CAAA;AAK5B,MAAA,yBAAA,GAA4B,aAEvC,CAAA,2BAAA,EAA6B,KAAS,CAAA;AAgCjC,SAAS,oBAAsD,CAAA;AAAA,EACpE;AACF,CAAsD,EAAA;AACpD,EAAA,IAAI,qBAAqB,OAAS,EAAA;AAChC,IAAA,MAAMA,QAAU,GAAA,UAAA;AAAA,MACd;AAAA,KAGF;AACA,IAAA,IAAI,CAACA,QAAS,EAAA;AACZ,MAAA,MAAM,IAAI,KAAA;AAAA,QACR;AAAA,OACF;AAAA;AAEF,IAAOA,OAAAA,QAAAA;AAAA;AAET,EAAA,MAAM,OAAU,GAAA,UAAA;AAAA,IACd;AAAA,GAGF;AACA,EAAA,IAAI,CAAC,OAAS,EAAA;AACZ,IAAA,MAAM,IAAI,KAAA;AAAA,MACR;AAAA,KACF;AAAA;AAEF,EAAO,OAAA,OAAA;AACT;;;;"}

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

@@ -25,21 +25,25 @@ const DatePickerOverlay = forwardRef(function DatePickerOverlay2({ className, ch
     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
-  });
+  return /* @__PURE__ */ jsx(
+    FloatingComponent,
+    {
+      className: clsx(withBaseName(), className),
+      open: open || false,
+      role: "dialog",
+      "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 };

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

@@ -1 +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;;;;"}
+{"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      role=\"dialog\"\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;AAa5C,MAAA,iBAAA,GAAoB,UAG/B,CAAA,SAASA,kBAAkB,CAAA,EAAE,WAAW,QAAU,EAAA,GAAG,IAAK,EAAA,EAAG,GAAK,EAAA;AAClE,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,0BAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,EAAE,SAAA,EAAW,iBAAkB,EAAA,GAAI,oBAAqB,EAAA;AAE9D,EAAM,MAAA,EAAE,SAAU,EAAA,GAAI,iBAAkB,EAAA;AAExC,EAAM,MAAA;AAAA,IACJ,KAAA,EAAO,EAAE,IAAA,EAAM,gBAAiB,EAAA;AAAA,IAChC,OAAA,EAAS,EAAE,gBAAiB;AAAA,MAC1B,oBAAqB,EAAA;AAEzB,EAAA,MAAM,WAAc,GAAA,UAAA;AAAA,IAClB,GAAA;AAAA,IACA,gBAAkB,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,gBAAA,CAAA;AAAA,GACpB;AAEA,EACE,uBAAA,GAAA;AAAA,IAAC,iBAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACzC,MAAM,IAAQ,IAAA,KAAA;AAAA,MACd,IAAK,EAAA,QAAA;AAAA,MACL,YAAW,EAAA,MAAA;AAAA,MACX,GAAK,EAAA,WAAA;AAAA,MACL,iBAAA,EAAA,CACE,qDAAkB,OACd,IAAA;AAAA,QACE,SAAS,gBAAiB,CAAA,OAAA;AAAA,QAC1B,YAAc,EAAA;AAAA,OAEhB,GAAA,KAAA,CAAA;AAAA,MAEL,GAAI,mBACD,gBAAiB,CAAA;AAAA,QACf,GAAG,SAAA;AAAA,QACH,GAAG;AAAA,OACJ,CACD,GAAA,IAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ,CAAC;;;;"}

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

@@ -4,7 +4,7 @@ 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 DatePickerOverlayProvider = ({ open: openProp, defaultOpen, onOpen, children }) => {
   const [open, setOpenState] = useControlled({
     controlled: openProp,
     default: Boolean(defaultOpen),
@@ -12,6 +12,7 @@ const DatePickerOverlayProvider = ({ open: openProp, defaultOpen, children }) =>
     state: "openDatePickerOverlay"
   });
   const triggeringElement = useRef(null);
+  const onDismissCallback = useRef();
   useEffect(() => {
     if (!open) {
       const trigger = triggeringElement.current;
@@ -26,12 +27,20 @@ const DatePickerOverlayProvider = ({ open: openProp, defaultOpen, children }) =>
       triggeringElement.current = null;
     }
   }, [open]);
-  const setOpen = useCallback((newOpen) => {
-    if (newOpen) {
-      triggeringElement.current = document.activeElement;
-    }
-    setOpenState(newOpen);
-  }, []);
+  const setOpen = useCallback(
+    (newOpen, _event, reason) => {
+      var _a;
+      if (newOpen) {
+        triggeringElement.current = document.activeElement;
+      }
+      setOpenState(newOpen);
+      onOpen == null ? void 0 : onOpen(newOpen);
+      if (reason === "escape-key" || reason === "outside-press" && onDismissCallback.current) {
+        (_a = onDismissCallback == null ? void 0 : onDismissCallback.current) == null ? void 0 : _a.call(onDismissCallback);
+      }
+    },
+    [onOpen]
+  );
   const floatingUIResult = useFloatingUI({
     open,
     onOpenChange: setOpen,
@@ -55,8 +64,8 @@ const DatePickerOverlayProvider = ({ open: openProp, defaultOpen, children }) =>
       var _a, _b;
       const { x, y, strategy, elements } = floatingUIResult;
       return {
-        top: y != null ? y : 0,
-        left: x != null ? x : 0,
+        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,
@@ -65,6 +74,9 @@ const DatePickerOverlayProvider = ({ open: openProp, defaultOpen, children }) =>
     },
     [getFloatingPropsCallback, floatingUIResult]
   );
+  const setOnDismiss = useCallback((dismissCallback) => {
+    onDismissCallback.current = dismissCallback;
+  }, []);
   const state = useMemo(
     () => ({
       open,
@@ -76,15 +88,13 @@ const DatePickerOverlayProvider = ({ open: openProp, defaultOpen, children }) =>
     () => ({
       getFloatingProps,
       getReferenceProps,
-      setOpen
+      setOpen,
+      setOnDismiss
     }),
     [getFloatingProps, getReferenceProps, setOpen]
   );
   const contextValue = useMemo(() => ({ state, helpers }), [state, helpers]);
-  return /* @__PURE__ */ jsx(DatePickerOverlayContext.Provider, {
-    value: contextValue,
-    children
-  });
+  return /* @__PURE__ */ jsx(DatePickerOverlayContext.Provider, { value: contextValue, children });
 };
 const useDatePickerOverlay = () => {
   const context = useContext(DatePickerOverlayContext);

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

@@ -1 +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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"}
+{"version":3,"file":"DatePickerOverlayProvider.js","sources":["../src/date-picker/DatePickerOverlayProvider.tsx"],"sourcesContent":["import {\n  type OpenChangeReason,\n  flip,\n  useDismiss,\n  useInteractions,\n} 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   * Register a callback for when onDismiss is called\n   * @param onDismissCallback\n   */\n  setOnDismiss: (onDismissCallback: () => void) => 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   * Handler for when open state changes\n   * @param newOpen - true when opened\n   */\n  onOpen?: (newOpen: boolean) => void;\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, onOpen, 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  const onDismissCallback = useRef<() => void>();\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(\n    (\n      newOpen: boolean,\n      _event?: Event | undefined,\n      reason?: OpenChangeReason | undefined,\n    ) => {\n      if (newOpen) {\n        triggeringElement.current = document.activeElement as HTMLElement;\n      }\n      setOpenState(newOpen);\n      onOpen?.(newOpen);\n      if (\n        reason === \"escape-key\" ||\n        (reason === \"outside-press\" && onDismissCallback.current)\n      ) {\n        onDismissCallback?.current?.();\n      }\n    },\n    [onOpen],\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  const setOnDismiss = useCallback((dismissCallback: () => void) => {\n    onDismissCallback.current = dismissCallback;\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      setOnDismiss,\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/DatePickerRangeInput.js

@@ -1,37 +1,84 @@
 import { jsx } from 'react/jsx-runtime';
-import { makePrefixer, useIcon, useForkRef, useControlled, Button } from '@salt-ds/core';
+import { makePrefixer, useIcon, useControlled, Button } from '@salt-ds/core';
+import { DateDetailErrorEnum } from '@salt-ds/date-adapters';
 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 { useLocalization } from '../localization-provider/LocalizationProvider.js';
 import { useDatePickerContext } from './DatePickerContext.js';
 import { useDatePickerOverlay } from './DatePickerOverlayProvider.js';
 
 const withBaseName = makePrefixer("saltDatePickerRangeInput");
+function defaultRangeValidator(dateAdapter, date, details, minDate, maxDate) {
+  const { startDate, endDate } = date || {};
+  if (!startDate) {
+    details.startDate = details.startDate || {};
+    details.startDate.errors = details.startDate.errors || [];
+    details.startDate.errors.push({
+      type: DateDetailErrorEnum.UNSET,
+      message: "no start date defined"
+    });
+  }
+  if (!endDate) {
+    details.endDate = details.endDate || {};
+    details.endDate.errors = details.endDate.errors || [];
+    details.endDate.errors.push({
+      type: DateDetailErrorEnum.UNSET,
+      message: "no end date defined"
+    });
+  }
+  if (dateAdapter.isValid(startDate) && dateAdapter.isValid(endDate) && dateAdapter.compare(startDate, endDate) > 0) {
+    details.startDate = details.startDate || {};
+    details.startDate.errors = details.startDate.errors || [];
+    details.startDate.errors.push({
+      type: "greater-than-end-date",
+      message: "start date after end date"
+    });
+  }
+  if (minDate && dateAdapter.isValid(startDate) && dateAdapter.compare(startDate, minDate) < 0) {
+    details.startDate = details.startDate || {};
+    details.startDate.errors = details.startDate.errors || [];
+    details.startDate.errors.push({
+      type: "min-date",
+      message: "is before min date"
+    });
+  }
+  if (maxDate && dateAdapter.isValid(endDate) && dateAdapter.compare(endDate, maxDate) > 0) {
+    details.endDate = details.endDate || {};
+    details.endDate.errors = details.endDate.errors || [];
+    details.endDate.errors.push({
+      type: "max-date",
+      message: "is after max date"
+    });
+  }
+  return details;
+}
 const DatePickerRangeInput = forwardRef(function DatePickerRangeInput2(props, ref) {
+  const { dateAdapter } = useLocalization();
   const {
     className,
     endInputProps: endInputPropsProp,
     startInputProps: startInputPropsProp,
     onKeyDown,
     defaultValue,
+    format,
     value: valueProp,
+    validate,
     onChange,
     onDateValueChange,
     ...rest
   } = props;
   const { CalendarIcon } = useIcon();
   const {
-    state: { selectedDate, disabled, readOnly, cancelled, locale, timeZone },
-    helpers: { setSelectedDate }
+    state: { selectedDate, disabled, readOnly, cancelled, minDate, maxDate },
+    helpers: { select }
   } = useDatePickerContext({ selectionVariant: "range" });
   const {
-    state: { open, floatingUIResult },
-    helpers: { getReferenceProps, setOpen }
+    state: { open },
+    helpers: { setOpen }
   } = useDatePickerOverlay();
-  const inputRef = useForkRef(ref, floatingUIResult == null ? void 0 : floatingUIResult.reference);
-  const prevState = useRef();
+  const previousValue = useRef();
   const [value, setValue] = useControlled({
     controlled: valueProp,
     default: defaultValue,
@@ -42,28 +89,27 @@ const DatePickerRangeInput = forwardRef(function DatePickerRangeInput2(props, re
     setOpen(!open);
   }, [open, setOpen]);
   const handleDateChange = useCallback(
-    (_event, newDate, error) => {
-      setSelectedDate(newDate, error);
+    (event, date, details) => {
+      const validatedDetails = validate ? validate(date, details) : defaultRangeValidator(dateAdapter, date, details, minDate, maxDate);
+      select(event, date, validatedDetails);
     },
-    [setSelectedDate]
+    [select, minDate, maxDate]
+  );
+  const handleDateValueChange = useCallback(
+    (event, newDateValue) => {
+      setValue(newDateValue);
+      onDateValueChange == null ? void 0 : onDateValueChange(event, newDateValue);
+    },
+    [onDateValueChange]
   );
-  const handleDateValueChange = (newDateValue, isFormatted) => {
-    setValue(newDateValue);
-    onDateValueChange == null ? void 0 : onDateValueChange(newDateValue, isFormatted);
-  };
   useEffect(() => {
     if (open) {
-      prevState.current = { date: selectedDate, value };
+      previousValue.current = 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
-      });
+      setValue(previousValue.current);
     }
   }, [cancelled]);
   const startInputProps = {
@@ -86,30 +132,37 @@ const DatePickerRangeInput = forwardRef(function DatePickerRangeInput2(props, re
     },
     ...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, {
-      appearance: "transparent",
-      sentiment: "neutral",
-      onClick: handleCalendarButton,
-      disabled,
-      "aria-label": "Open Calendar",
-      children: /* @__PURE__ */ jsx(CalendarIcon, {})
-    }),
-    ...rest
-  });
+  return /* @__PURE__ */ jsx(
+    DateInputRange,
+    {
+      value: value ?? {
+        startDate: dateAdapter.format(value, format),
+        endDate: dateAdapter.format(value, format)
+      },
+      className: clsx(withBaseName(), className),
+      date: selectedDate ?? null,
+      startInputProps,
+      endInputProps,
+      readOnly,
+      ref,
+      onDateChange: handleDateChange,
+      onDateValueChange: handleDateValueChange,
+      onChange,
+      endAdornment: /* @__PURE__ */ jsx(
+        Button,
+        {
+          appearance: "transparent",
+          sentiment: "neutral",
+          onClick: handleCalendarButton,
+          disabled,
+          "aria-label": "Open Calendar",
+          children: /* @__PURE__ */ jsx(CalendarIcon, {})
+        }
+      ),
+      ...rest
+    }
+  );
 });
 
-export { DatePickerRangeInput };
+export { DatePickerRangeInput, defaultRangeValidator };
 //# sourceMappingURL=DatePickerRangeInput.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DatePickerRangeInput.js","sources":["../src/date-picker/DatePickerRangeInput.tsx"],"sourcesContent":["import {\n  Button,\n  makePrefixer,\n  useControlled,\n  useForkRef,\n  useIcon,\n} from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport {\n  type KeyboardEvent,\n  type 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 { CalendarIcon } = useIcon();\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  // biome-ignore lint/correctness/useExhaustiveDependencies: avoid excessive re-rendering\n  useEffect(() => {\n    if (cancelled) {\n      setValue(prevState?.current?.value);\n      setSelectedDate(prevState?.current?.date || null, {\n        startDate: false,\n        endDate: false,\n      });\n    }\n  }, [cancelled]);\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          appearance=\"transparent\"\n          sentiment=\"neutral\"\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":";;;;;;;;;;AA2BA,MAAM,YAAA,GAAe,aAAa,0BAA0B,CAAA,CAAA;AAOrD,MAAM,oBAAuB,GAAA,UAAA,CAGlC,SAASA,qBAAAA,CAAqB,OAAO,GAAK,EAAA;AAC1C,EAAM,MAAA;AAAA,IACJ,SAAA;AAAA,IACA,aAAe,EAAA,iBAAA;AAAA,IACf,eAAiB,EAAA,mBAAA;AAAA,IACjB,SAAA;AAAA,IACA,YAAA;AAAA,IACA,KAAO,EAAA,SAAA;AAAA,IACP,QAAA;AAAA,IACA,iBAAA;AAAA,IACG,GAAA,IAAA;AAAA,GACD,GAAA,KAAA,CAAA;AAEJ,EAAM,MAAA,EAAE,YAAa,EAAA,GAAI,OAAQ,EAAA,CAAA;AAEjC,EAAM,MAAA;AAAA,IACJ,OAAO,EAAE,YAAA,EAAc,UAAU,QAAU,EAAA,SAAA,EAAW,QAAQ,QAAS,EAAA;AAAA,IACvE,OAAA,EAAS,EAAE,eAAgB,EAAA;AAAA,GACzB,GAAA,oBAAA,CAAqB,EAAE,gBAAA,EAAkB,SAAS,CAAA,CAAA;AACtD,EAAM,MAAA;AAAA,IACJ,KAAA,EAAO,EAAE,IAAA,EAAM,gBAAiB,EAAA;AAAA,IAChC,OAAA,EAAS,EAAE,iBAAA,EAAmB,OAAQ,EAAA;AAAA,MACpC,oBAAqB,EAAA,CAAA;AAEzB,EAAA,MAAM,QAAW,GAAA,UAAA,CAA2B,GAAK,EAAA,gBAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,gBAAA,CAAkB,SAAS,CAAA,CAAA;AAC5E,EAAA,MAAM,YAAY,MAEhB,EAAA,CAAA;AAEF,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAI,aAAc,CAAA;AAAA,IACtC,UAAY,EAAA,SAAA;AAAA,IACZ,OAAS,EAAA,YAAA;AAAA,IACT,IAAM,EAAA,sBAAA;AAAA,IACN,KAAO,EAAA,WAAA;AAAA,GACR,CAAA,CAAA;AAED,EAAM,MAAA,oBAAA,GAAuB,YAAY,MAAM;AAC7C,IAAA,OAAA,CAAQ,CAAC,IAAI,CAAA,CAAA;AAAA,GACZ,EAAA,CAAC,IAAM,EAAA,OAAO,CAAC,CAAA,CAAA;AAElB,EAAA,MAAM,gBAAmB,GAAA,WAAA;AAAA,IACvB,CACE,MACA,EAAA,OAAA,EACA,KACG,KAAA;AACH,MAAA,eAAA,CAAgB,SAAS,KAAK,CAAA,CAAA;AAAA,KAChC;AAAA,IACA,CAAC,eAAe,CAAA;AAAA,GAClB,CAAA;AAEA,EAAM,MAAA,qBAAA,GAAwB,CAC5B,YAAA,EACA,WACG,KAAA;AACH,IAAA,QAAA,CAAS,YAAY,CAAA,CAAA;AACrB,IAAA,iBAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,iBAAA,CAAoB,YAAc,EAAA,WAAA,CAAA,CAAA;AAAA,GACpC,CAAA;AAGA,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,IAAM,EAAA;AACR,MAAA,SAAA,CAAU,OAAU,GAAA,EAAE,IAAM,EAAA,YAAA,EAAc,KAAM,EAAA,CAAA;AAAA,KAClD;AAAA,GACF,EAAG,CAAC,IAAI,CAAC,CAAA,CAAA;AAGT,EAAA,SAAA,CAAU,MAAM;AAxGlB,IAAA,IAAA,EAAA,EAAA,EAAA,CAAA;AAyGI,IAAA,IAAI,SAAW,EAAA;AACb,MAAS,QAAA,CAAA,CAAA,EAAA,GAAA,SAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,SAAA,CAAW,OAAX,KAAA,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAoB,KAAK,CAAA,CAAA;AAClC,MAAA,eAAA,CAAA,CAAA,CAAgB,EAAW,GAAA,SAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,SAAA,CAAA,OAAA,KAAX,IAAoB,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,IAAA,KAAQ,IAAM,EAAA;AAAA,QAChD,SAAW,EAAA,KAAA;AAAA,QACX,OAAS,EAAA,KAAA;AAAA,OACV,CAAA,CAAA;AAAA,KACH;AAAA,GACF,EAAG,CAAC,SAAS,CAAC,CAAA,CAAA;AAEd,EAAA,MAAM,eAEF,GAAA;AAAA,IACF,SAAA,EAAW,CAAC,KAA2C,KAAA;AArH3D,MAAA,IAAA,EAAA,CAAA;AAsHM,MAAI,IAAA,KAAA,CAAM,QAAQ,WAAa,EAAA;AAC7B,QAAA,OAAA,CAAQ,IAAI,CAAA,CAAA;AAAA,OACd;AACA,MAAA,CAAA,EAAA,GAAA,mBAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,mBAAA,CAAqB,cAArB,IAAiC,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,IAAA,CAAA,mBAAA,EAAA,KAAA,CAAA,CAAA;AAAA,KACnC;AAAA,IACA,GAAG,mBAAA;AAAA,GACL,CAAA;AACA,EAAA,MAAM,aAEF,GAAA;AAAA,IACF,SAAA,EAAW,CAAC,KAA2C,KAAA;AAhI3D,MAAA,IAAA,EAAA,CAAA;AAiIM,MAAI,IAAA,KAAA,CAAM,QAAQ,WAAa,EAAA;AAC7B,QAAA,OAAA,CAAQ,IAAI,CAAA,CAAA;AAAA,OACd;AACA,MAAA,CAAA,EAAA,GAAA,iBAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,iBAAA,CAAmB,cAAnB,IAA+B,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,IAAA,CAAA,iBAAA,EAAA,KAAA,CAAA,CAAA;AAAA,KACjC;AAAA,IACA,GAAG,iBAAA;AAAA,GACL,CAAA;AAEA,EAAA,uBACG,GAAA,CAAA,cAAA,EAAA;AAAA,IACC,OAAO,KAAS,IAAA,EAAE,SAAW,EAAA,EAAA,EAAI,SAAS,EAAG,EAAA;AAAA,IAC7C,MAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,IACzC,GAAK,EAAA,QAAA;AAAA,IACL,IAAM,EAAA,YAAA;AAAA,IACN,eAAA,EAAiB,kBAAkB,eAAe,CAAA;AAAA,IAClD,aAAA,EAAe,kBAAkB,aAAa,CAAA;AAAA,IAC9C,QAAA;AAAA,IACA,YAAc,EAAA,gBAAA;AAAA,IACd,iBAAmB,EAAA,qBAAA;AAAA,IACnB,QAAA;AAAA,IACA,8BACG,GAAA,CAAA,MAAA,EAAA;AAAA,MACC,UAAW,EAAA,aAAA;AAAA,MACX,SAAU,EAAA,SAAA;AAAA,MACV,OAAS,EAAA,oBAAA;AAAA,MACT,QAAA;AAAA,MACA,YAAW,EAAA,eAAA;AAAA,MAEX,8BAAC,YAAa,EAAA,EAAA,CAAA;AAAA,KAChB,CAAA;AAAA,IAED,GAAG,IAAA;AAAA,GACN,CAAA,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"DatePickerRangeInput.js","sources":["../src/date-picker/DatePickerRangeInput.tsx"],"sourcesContent":["import { Button, makePrefixer, useControlled, useIcon } from \"@salt-ds/core\";\nimport {\n  DateDetailErrorEnum,\n  type DateFrameworkType,\n  type SaltDateAdapter,\n} from \"@salt-ds/date-adapters\";\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, SingleDateSelection } from \"../calendar\";\nimport {\n  DateInputRange,\n  type DateInputRangeDetails,\n  type DateInputRangeProps,\n  type DateInputRangeValue,\n} from \"../date-input\";\nimport { useLocalization } from \"../localization-provider\";\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<TDate extends DateFrameworkType>\n  extends DateInputRangeProps<TDate> {\n  /**\n   * Function to validate the entered date\n   * @param date - The selected date\n   * @param details - The details of date selection, either a valid date or error\n   * @returns updated DateInputRangeDetails details\n   */\n  validate?: (\n    date: DateRangeSelection<TDate> | null,\n    details: DateInputRangeDetails,\n  ) => DateInputRangeDetails;\n}\n\nexport function defaultRangeValidator<TDate extends DateFrameworkType>(\n  dateAdapter: SaltDateAdapter<TDate>,\n  date: DateRangeSelection<TDate> | null,\n  details: DateInputRangeDetails,\n  minDate: TDate | undefined,\n  maxDate: TDate | undefined,\n): DateInputRangeDetails {\n  const { startDate, endDate } = date || {};\n\n  if (!startDate) {\n    details.startDate = details.startDate || {};\n    details.startDate.errors = details.startDate.errors || [];\n    details.startDate.errors.push({\n      type: DateDetailErrorEnum.UNSET,\n      message: \"no start date defined\",\n    });\n  }\n  if (!endDate) {\n    details.endDate = details.endDate || {};\n    details.endDate.errors = details.endDate.errors || [];\n    details.endDate.errors.push({\n      type: DateDetailErrorEnum.UNSET,\n      message: \"no end date defined\",\n    });\n  }\n\n  // If startDate is after endDate\n  if (\n    dateAdapter.isValid(startDate) &&\n    dateAdapter.isValid(endDate) &&\n    dateAdapter.compare(startDate, endDate) > 0\n  ) {\n    details.startDate = details.startDate || {};\n    details.startDate.errors = details.startDate.errors || [];\n    details.startDate.errors.push({\n      type: \"greater-than-end-date\",\n      message: \"start date after end date\",\n    });\n  }\n  // If startDate is before minDate\n  if (\n    minDate &&\n    dateAdapter.isValid(startDate) &&\n    dateAdapter.compare(startDate, minDate) < 0\n  ) {\n    details.startDate = details.startDate || {};\n    details.startDate.errors = details.startDate.errors || [];\n    details.startDate.errors.push({\n      type: \"min-date\",\n      message: \"is before min date\",\n    });\n  }\n  // If endDate is after maxDate\n  if (\n    maxDate &&\n    dateAdapter.isValid(endDate) &&\n    dateAdapter.compare(endDate, maxDate) > 0\n  ) {\n    details.endDate = details.endDate || {};\n    details.endDate.errors = details.endDate.errors || [];\n    details.endDate.errors.push({\n      type: \"max-date\",\n      message: \"is after max date\",\n    });\n  }\n  return details;\n}\n\nexport const DatePickerRangeInput = forwardRef(function DatePickerRangeInput<\n  TDate extends DateFrameworkType,\n>(\n  props: DatePickerRangeInputProps<SingleDateSelection<TDate>>,\n  ref: React.Ref<HTMLDivElement>,\n) {\n  const { dateAdapter } = useLocalization<TDate>();\n  const {\n    className,\n    endInputProps: endInputPropsProp,\n    startInputProps: startInputPropsProp,\n    onKeyDown,\n    defaultValue,\n    format,\n    value: valueProp,\n    validate,\n    onChange,\n    onDateValueChange,\n    ...rest\n  } = props;\n\n  const { CalendarIcon } = useIcon();\n\n  const {\n    state: { selectedDate, disabled, readOnly, cancelled, minDate, maxDate },\n    helpers: { select },\n  } = useDatePickerContext<TDate>({ selectionVariant: \"range\" });\n  const {\n    state: { open },\n    helpers: { setOpen },\n  } = useDatePickerOverlay();\n\n  const previousValue = useRef<typeof valueProp>();\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      date: DateRangeSelection<TDate> | null,\n      details: DateInputRangeDetails,\n    ) => {\n      const validatedDetails = validate\n        ? validate(date, details)\n        : defaultRangeValidator(dateAdapter, date, details, minDate, maxDate);\n      select(event, date, validatedDetails);\n    },\n    [select, minDate, maxDate],\n  );\n\n  const handleDateValueChange = useCallback(\n    (event: SyntheticEvent | null, newDateValue: DateInputRangeValue) => {\n      setValue(newDateValue);\n      onDateValueChange?.(event, newDateValue);\n    },\n    [onDateValueChange],\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      previousValue.current = value;\n    }\n  }, [open]);\n\n  // biome-ignore lint/correctness/useExhaustiveDependencies: avoid excessive re-rendering\n  useEffect(() => {\n    if (cancelled) {\n      setValue(previousValue.current);\n    }\n  }, [cancelled]);\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={\n        value ?? {\n          startDate: dateAdapter.format(value, format),\n          endDate: dateAdapter.format(value, format),\n        }\n      }\n      className={clsx(withBaseName(), className)}\n      date={selectedDate ?? null}\n      startInputProps={startInputProps}\n      endInputProps={endInputProps}\n      readOnly={readOnly}\n      ref={ref}\n      onDateChange={handleDateChange}\n      onDateValueChange={handleDateValueChange}\n      onChange={onChange}\n      endAdornment={\n        <Button\n          appearance=\"transparent\"\n          sentiment=\"neutral\"\n          onClick={handleCalendarButton}\n          disabled={disabled}\n          aria-label=\"Open Calendar\"\n        >\n          <CalendarIcon />\n        </Button>\n      }\n      {...rest}\n    />\n  );\n});\n"],"names":["DatePickerRangeInput"],"mappings":"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"}