@salt-ds/lab 1.0.0-alpha.55 → 1.0.0-alpha.57

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

@@ -1 +1 @@
-{"version":3,"file":"DatePickerContext.js","sources":["../src/date-picker/DatePickerContext.ts"],"sourcesContent":["import type { DateValue } from \"@internationalized/date\";\nimport { createContext } from \"@salt-ds/core\";\nimport { useContext } from \"react\";\nimport type { DateRangeSelection, SingleDateSelection } from \"../calendar\";\nimport type { DateInputRangeError, DateInputSingleError } from \"../date-input\";\n\n/**\n * Interface representing the base state for a DatePicker.\n */\ninterface DatePickerBaseState {\n  /**\n   * The state properties of the DatePicker.\n   */\n  state: {\n    /**\n     * If `true`, the DatePicker is disabled.\n     */\n    disabled?: boolean;\n    /**\n     * If `true`, the DatePicker is read-only.\n     */\n    readOnly?: boolean;\n    /**\n     * If `true`, the DatePicker has been cancelled.\n     */\n    cancelled?: boolean;\n    /**\n     * If `true`, the apply action is enabled.\n     */\n    enableApply?: boolean;\n    /**\n     * The minimum selectable date.\n     */\n    minDate?: DateValue;\n    /**\n     * The maximum selectable date.\n     */\n    maxDate?: DateValue;\n    /**\n     * Reference to the container element.\n     */\n    containerRef: React.Ref<HTMLDivElement>;\n    /**\n     * The locale used for date formatting.\n     */\n    locale?: string;\n    /**\n     * The time zone used for date formatting.\n     */\n    timeZone?: string;\n  };\n  /**\n   * Helper functions for managing the DatePicker state.\n   */\n  helpers: {\n    /**\n     * Cancels the DatePicker action.\n     */\n    cancel: () => void;\n    /**\n     * Sets the enableApply state.\n     * @param newEnableApply - The new value for enableApply.\n     */\n    setEnableApply: (newEnableApply: boolean) => void;\n  };\n}\n\n/**\n * Type representing a single date picker error.\n */\nexport type SingleDatePickerError = DateInputSingleError;\n\n/**\n * Type representing a range date picker error.\n */\nexport type RangeDatePickerError = DateInputRangeError;\n\n/**\n * Interface representing the state for a single date picker.\n */\nexport interface SingleDatePickerState extends DatePickerBaseState {\n  /**\n   * The state properties of the single date picker.\n   */\n  state: DatePickerBaseState[\"state\"] & {\n    /**\n     * The selected date.\n     */\n    selectedDate: SingleDateSelection | null;\n    /**\n     * The default selected date.\n     */\n    defaultSelectedDate?: SingleDateSelection;\n  };\n  /**\n   * Helper functions for managing the single date picker state.\n   */\n  helpers: DatePickerBaseState[\"helpers\"] & {\n    /**\n     * Applies the selected date.\n     * @param newDate - The new selected date.\n     * @param error - The error encountered during selection, if any.\n     */\n    apply: (\n      newDate: SingleDateSelection | null,\n      error: SingleDatePickerError,\n    ) => void;\n    /**\n     * Sets the selected date.\n     * @param newDate - The new selected date.\n     * @param error - The error encountered during selection, if any.\n     */\n    setSelectedDate: (\n      newDate: SingleDateSelection | null,\n      error: string | false,\n    ) => void;\n  };\n}\n\n/**\n * Interface representing the state for a range date picker.\n */\nexport interface RangeDatePickerState extends DatePickerBaseState {\n  /**\n   * The state properties of the range date picker.\n   */\n  state: DatePickerBaseState[\"state\"] & {\n    /**\n     * The selected date range.\n     */\n    selectedDate: DateRangeSelection | null;\n    /**\n     * The default selected date range.\n     */\n    defaultSelectedDate?: DateRangeSelection;\n  };\n  /**\n   * Helper functions for managing the range date picker state.\n   */\n  helpers: DatePickerBaseState[\"helpers\"] & {\n    /**\n     * Applies the selected date range.\n     * @param newDate - The new selected date range.\n     * @param error - The error encountered during selection, if any.\n     */\n    apply: (\n      newDate: DateRangeSelection | null,\n      error: RangeDatePickerError,\n    ) => void;\n    /**\n     * Sets the selected date range.\n     * @param newDate - The new selected date range.\n     * @param error - The error encountered during selection, if any.\n     */\n    setSelectedDate: (\n      newDate: DateRangeSelection | null,\n      error: { startDate: string | false; endDate: string | false },\n    ) => void;\n  };\n}\n\n/**\n * Type representing the state of a date picker, either single or range.\n */\nexport type DatePickerState = SingleDatePickerState | RangeDatePickerState;\n\n/**\n * Context for single date selection.\n */\nexport const SingleDateSelectionContext = createContext<\n  SingleDatePickerState | undefined\n>(\"SingleDateSelectionContext\", undefined);\n\n/**\n * Context for date range selection.\n */\nexport const DateRangeSelectionContext = createContext<\n  RangeDatePickerState | undefined\n>(\"DateRangeSelectionContext\", undefined);\n\n/**\n * Props for using the date picker context.\n */\nexport interface UseDatePickerContextProps {\n  /**\n   * The selection variant, either \"single\" or \"range\".\n   */\n  selectionVariant: \"single\" | \"range\";\n}\n\n// Overloads\n\n/**\n * Hook to use the date picker context for single date selection.\n * @param props - The props for the hook.\n * @returns The state of the single date picker.\n */\nexport function useDatePickerContext(props: {\n  selectionVariant: \"single\";\n}): SingleDatePickerState;\n\n/**\n * Hook to use the date picker context for range date selection.\n * @param props - The props for the hook.\n * @returns The state of the range date picker.\n */\nexport function useDatePickerContext(props: {\n  selectionVariant: \"range\";\n}): RangeDatePickerState;\nexport function useDatePickerContext({\n  selectionVariant,\n}: UseDatePickerContextProps): DatePickerState {\n  if (selectionVariant === \"range\") {\n    const context = useContext(DateRangeSelectionContext);\n    if (!context) {\n      throw new Error(\n        'useDatePickerSelection should be called with props { selectionVariant : \"range\" } inside DateRangeSelectionContext.Provider',\n      );\n    }\n    return context;\n  }\n  const context = useContext(SingleDateSelectionContext);\n  if (!context) {\n    throw new Error(\n      'useDatePickerSelection should be called with props { selectionVariant : \"single\" } inside SingleDateSelectionContext.Provider',\n    );\n  }\n  return context;\n}\n"],"names":["createContext","context","useContext"],"mappings":";;;;;AAyKa,MAAA,0BAAA,GAA6BA,kBAExC,CAAA,4BAAA,EAA8B,KAAS,CAAA;AAK5B,MAAA,yBAAA,GAA4BA,kBAEvC,CAAA,2BAAA,EAA6B,KAAS,CAAA;AA+BjC,SAAS,oBAAqB,CAAA;AAAA,EACnC;AACF,CAA+C,EAAA;AAC7C,EAAA,IAAI,qBAAqB,OAAS,EAAA;AAChC,IAAMC,MAAAA,QAAAA,GAAUC,iBAAW,yBAAyB,CAAA;AACpD,IAAA,IAAI,CAACD,QAAS,EAAA;AACZ,MAAA,MAAM,IAAI,KAAA;AAAA,QACR;AAAA,OACF;AAAA;AAEF,IAAOA,OAAAA,QAAAA;AAAA;AAET,EAAM,MAAA,OAAA,GAAUC,iBAAW,0BAA0B,CAAA;AACrD,EAAA,IAAI,CAAC,OAAS,EAAA;AACZ,IAAA,MAAM,IAAI,KAAA;AAAA,MACR;AAAA,KACF;AAAA;AAEF,EAAO,OAAA,OAAA;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":["createContext","context","useContext"],"mappings":";;;;;AAiKa,MAAA,0BAAA,GAA6BA,kBAExC,CAAA,4BAAA,EAA8B,KAAS,CAAA;AAK5B,MAAA,yBAAA,GAA4BA,kBAEvC,CAAA,2BAAA,EAA6B,KAAS,CAAA;AAgCjC,SAAS,oBAAsD,CAAA;AAAA,EACpE;AACF,CAAsD,EAAA;AACpD,EAAA,IAAI,qBAAqB,OAAS,EAAA;AAChC,IAAA,MAAMC,QAAU,GAAAC,gBAAA;AAAA,MACd;AAAA,KAGF;AACA,IAAA,IAAI,CAACD,QAAS,EAAA;AACZ,MAAA,MAAM,IAAI,KAAA;AAAA,QACR;AAAA,OACF;AAAA;AAEF,IAAOA,OAAAA,QAAAA;AAAA;AAET,EAAA,MAAM,OAAU,GAAAC,gBAAA;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-cjs/date-picker/DatePickerOverlay.js

@@ -32,6 +32,7 @@ const DatePickerOverlay = react.forwardRef(function DatePickerOverlay2({ classNa
     {
       className: clsx.clsx(withBaseName(), className),
       open: open || false,
+      role: "dialog",
       "aria-modal": "true",
       ref: floatingRef,
       focusManagerProps: (floatingUIResult == null ? void 0 : floatingUIResult.context) ? {

package/dist-cjs/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":["makePrefixer","forwardRef","DatePickerOverlay","useWindow","useComponentCssInjection","datePickerOverlayCss","useFloatingComponent","useFormFieldProps","useDatePickerOverlay","useForkRef","jsx","clsx"],"mappings":";;;;;;;;;;;AAiBA,MAAM,YAAA,GAAeA,kBAAa,uBAAuB,CAAA;AAa5C,MAAA,iBAAA,GAAoBC,gBAG/B,CAAA,SAASC,kBAAkB,CAAA,EAAE,WAAW,QAAU,EAAA,GAAG,IAAK,EAAA,EAAG,GAAK,EAAA;AAClE,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,0BAAA;AAAA,IACR,GAAK,EAAAC,mBAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,EAAE,SAAA,EAAW,iBAAkB,EAAA,GAAIC,yBAAqB,EAAA;AAE9D,EAAM,MAAA,EAAE,SAAU,EAAA,GAAIC,sBAAkB,EAAA;AAExC,EAAM,MAAA;AAAA,IACJ,KAAA,EAAO,EAAE,IAAA,EAAM,gBAAiB,EAAA;AAAA,IAChC,OAAA,EAAS,EAAE,gBAAiB;AAAA,MAC1BC,8CAAqB,EAAA;AAEzB,EAAA,MAAM,WAAc,GAAAC,eAAA;AAAA,IAClB,GAAA;AAAA,IACA,gBAAkB,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,gBAAA,CAAA;AAAA,GACpB;AAEA,EACE,uBAAAC,cAAA;AAAA,IAAC,iBAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACzC,MAAM,IAAQ,IAAA,KAAA;AAAA,MACd,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;;;;"}
+{"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":["makePrefixer","forwardRef","DatePickerOverlay","useWindow","useComponentCssInjection","datePickerOverlayCss","useFloatingComponent","useFormFieldProps","useDatePickerOverlay","useForkRef","jsx","clsx"],"mappings":";;;;;;;;;;;AAiBA,MAAM,YAAA,GAAeA,kBAAa,uBAAuB,CAAA;AAa5C,MAAA,iBAAA,GAAoBC,gBAG/B,CAAA,SAASC,kBAAkB,CAAA,EAAE,WAAW,QAAU,EAAA,GAAG,IAAK,EAAA,EAAG,GAAK,EAAA;AAClE,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,0BAAA;AAAA,IACR,GAAK,EAAAC,mBAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,EAAE,SAAA,EAAW,iBAAkB,EAAA,GAAIC,yBAAqB,EAAA;AAE9D,EAAM,MAAA,EAAE,SAAU,EAAA,GAAIC,sBAAkB,EAAA;AAExC,EAAM,MAAA;AAAA,IACJ,KAAA,EAAO,EAAE,IAAA,EAAM,gBAAiB,EAAA;AAAA,IAChC,OAAA,EAAS,EAAE,gBAAiB;AAAA,MAC1BC,8CAAqB,EAAA;AAEzB,EAAA,MAAM,WAAc,GAAAC,eAAA;AAAA,IAClB,GAAA;AAAA,IACA,gBAAkB,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,gBAAA,CAAA;AAAA,GACpB;AAEA,EACE,uBAAAC,cAAA;AAAA,IAAC,iBAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAAC,SAAA,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-cjs/date-picker/DatePickerOverlayProvider.js

@@ -6,7 +6,7 @@ var core = require('@salt-ds/core');
 var react = require('react');
 
 const DatePickerOverlayContext = core.createContext("DatePickerOverlayContext", void 0);
-const DatePickerOverlayProvider = ({ open: openProp, defaultOpen, children }) => {
+const DatePickerOverlayProvider = ({ open: openProp, defaultOpen, onOpen, children }) => {
   const [open, setOpenState] = core.useControlled({
     controlled: openProp,
     default: Boolean(defaultOpen),
@@ -14,6 +14,7 @@ const DatePickerOverlayProvider = ({ open: openProp, defaultOpen, children }) =>
     state: "openDatePickerOverlay"
   });
   const triggeringElement = react.useRef(null);
+  const onDismissCallback = react.useRef();
   react.useEffect(() => {
     if (!open) {
       const trigger = triggeringElement.current;
@@ -28,12 +29,20 @@ const DatePickerOverlayProvider = ({ open: openProp, defaultOpen, children }) =>
       triggeringElement.current = null;
     }
   }, [open]);
-  const setOpen = react.useCallback((newOpen) => {
-    if (newOpen) {
-      triggeringElement.current = document.activeElement;
-    }
-    setOpenState(newOpen);
-  }, []);
+  const setOpen = react.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 = core.useFloatingUI({
     open,
     onOpenChange: setOpen,
@@ -67,6 +76,9 @@ const DatePickerOverlayProvider = ({ open: openProp, defaultOpen, children }) =>
     },
     [getFloatingPropsCallback, floatingUIResult]
   );
+  const setOnDismiss = react.useCallback((dismissCallback) => {
+    onDismissCallback.current = dismissCallback;
+  }, []);
   const state = react.useMemo(
     () => ({
       open,
@@ -78,7 +90,8 @@ const DatePickerOverlayProvider = ({ open: openProp, defaultOpen, children }) =>
     () => ({
       getFloatingProps,
       getReferenceProps,
-      setOpen
+      setOpen,
+      setOnDismiss
     }),
     [getFloatingProps, getReferenceProps, setOpen]
   );

package/dist-cjs/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":["createContext","useControlled","useRef","useEffect","useCallback","useFloatingUI","flip","useInteractions","useDismiss","useMemo","useContext"],"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":["createContext","useControlled","useRef","useEffect","useCallback","useFloatingUI","flip","useInteractions","useDismiss","useMemo","useContext"],"mappings":"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"}

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

@@ -2,38 +2,85 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var core = require('@salt-ds/core');
+var dateAdapters = require('@salt-ds/date-adapters');
 var clsx = require('clsx');
 var react = require('react');
 require('../date-input/DateInputSingle.js');
 var DateInputRange = require('../date-input/DateInputRange.js');
-require('@internationalized/date');
+var LocalizationProvider = require('../localization-provider/LocalizationProvider.js');
 var DatePickerContext = require('./DatePickerContext.js');
 var DatePickerOverlayProvider = require('./DatePickerOverlayProvider.js');
 
 const withBaseName = core.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: dateAdapters.DateDetailErrorEnum.UNSET,
+      message: "no start date defined"
+    });
+  }
+  if (!endDate) {
+    details.endDate = details.endDate || {};
+    details.endDate.errors = details.endDate.errors || [];
+    details.endDate.errors.push({
+      type: dateAdapters.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 = react.forwardRef(function DatePickerRangeInput2(props, ref) {
+  const { dateAdapter } = LocalizationProvider.useLocalization();
   const {
     className,
     endInputProps: endInputPropsProp,
     startInputProps: startInputPropsProp,
     onKeyDown,
     defaultValue,
+    format,
     value: valueProp,
+    validate,
     onChange,
     onDateValueChange,
     ...rest
   } = props;
   const { CalendarIcon } = core.useIcon();
   const {
-    state: { selectedDate, disabled, readOnly, cancelled, locale, timeZone },
-    helpers: { setSelectedDate }
+    state: { selectedDate, disabled, readOnly, cancelled, minDate, maxDate },
+    helpers: { select }
   } = DatePickerContext.useDatePickerContext({ selectionVariant: "range" });
   const {
-    state: { open, floatingUIResult },
-    helpers: { getReferenceProps, setOpen }
+    state: { open },
+    helpers: { setOpen }
   } = DatePickerOverlayProvider.useDatePickerOverlay();
-  const inputRef = core.useForkRef(ref, floatingUIResult == null ? void 0 : floatingUIResult.reference);
-  const prevState = react.useRef();
+  const previousValue = react.useRef();
   const [value, setValue] = core.useControlled({
     controlled: valueProp,
     default: defaultValue,
@@ -44,28 +91,27 @@ const DatePickerRangeInput = react.forwardRef(function DatePickerRangeInput2(pro
     setOpen(!open);
   }, [open, setOpen]);
   const handleDateChange = react.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 = react.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);
-  };
   react.useEffect(() => {
     if (open) {
-      prevState.current = { date: selectedDate, value };
+      previousValue.current = value;
     }
   }, [open]);
   react.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 = {
@@ -91,15 +137,16 @@ const DatePickerRangeInput = react.forwardRef(function DatePickerRangeInput2(pro
   return /* @__PURE__ */ jsxRuntime.jsx(
     DateInputRange.DateInputRange,
     {
-      value: value || { startDate: "", endDate: "" },
-      locale,
-      timeZone,
+      value: value ?? {
+        startDate: dateAdapter.format(value, format),
+        endDate: dateAdapter.format(value, format)
+      },
       className: clsx.clsx(withBaseName(), className),
-      ref: inputRef,
-      date: selectedDate,
-      startInputProps: getReferenceProps(startInputProps),
-      endInputProps: getReferenceProps(endInputProps),
+      date: selectedDate ?? null,
+      startInputProps,
+      endInputProps,
       readOnly,
+      ref,
       onDateChange: handleDateChange,
       onDateValueChange: handleDateValueChange,
       onChange,
@@ -114,10 +161,12 @@ const DatePickerRangeInput = react.forwardRef(function DatePickerRangeInput2(pro
           children: /* @__PURE__ */ jsxRuntime.jsx(CalendarIcon, {})
         }
       ),
+      format,
       ...rest
     }
   );
 });
 
 exports.DatePickerRangeInput = DatePickerRangeInput;
+exports.defaultRangeValidator = defaultRangeValidator;
 //# sourceMappingURL=DatePickerRangeInput.js.map

package/dist-cjs/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":["makePrefixer","forwardRef","DatePickerRangeInput","useIcon","useDatePickerContext","useDatePickerOverlay","useForkRef","useRef","useControlled","useCallback","useEffect","jsx","DateInputRange","clsx","Button"],"mappings":"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"}
+{"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      format={format}\n      {...rest}\n    />\n  );\n});\n"],"names":["makePrefixer","DateDetailErrorEnum","forwardRef","DatePickerRangeInput","useLocalization","useIcon","useDatePickerContext","useDatePickerOverlay","useRef","useControlled","useCallback","useEffect","jsx","DateInputRange","clsx","Button"],"mappings":"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"}

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

@@ -1,7 +1,6 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var date = require('@internationalized/date');
 var core = require('@salt-ds/core');
 var styles = require('@salt-ds/styles');
 var window = require('@salt-ds/window');
@@ -10,30 +9,35 @@ var react = require('react');
 var Calendar = require('../calendar/Calendar.js');
 var CalendarNavigation = require('../calendar/CalendarNavigation.js');
 var CalendarWeekHeader = require('../calendar/CalendarWeekHeader.js');
-var CalendarDateGrid = require('../calendar/CalendarDateGrid.js');
+var CalendarGrid = require('../calendar/CalendarGrid.js');
+var LocalizationProvider = require('../localization-provider/LocalizationProvider.js');
 require('../calendar/internal/CalendarContext.js');
-var formatDate = require('../calendar/formatDate.js');
 require('../calendar/useCalendarSelection.js');
 var DatePickerContext = require('./DatePickerContext.js');
 var DatePickerPanel = require('./DatePickerPanel.css.js');
 
-function getFallbackVisibleMonths(selectedDate, timeZone) {
-  const createConsecutiveRange = (date$1) => [
-    date.startOfMonth(date$1),
-    date.startOfMonth(date$1).add({ months: 1 })
-  ];
-  if (selectedDate == null ? void 0 : selectedDate.startDate) {
+function getFallbackVisibleMonths(dateAdapter, selectedDate) {
+  function createConsecutiveRange(date) {
+    const startDate = dateAdapter.startOf(date, "month");
+    const endDate = dateAdapter.add(startDate, { months: 1 });
+    return [startDate, endDate];
+  }
+  if (selectedDate && dateAdapter.isValid(selectedDate == null ? void 0 : selectedDate.startDate)) {
     const { startDate, endDate } = selectedDate;
-    if (endDate) {
-      return date.isSameMonth(startDate, endDate) ? createConsecutiveRange(startDate) : [date.startOfMonth(startDate), date.startOfMonth(endDate)];
+    if (dateAdapter.isValid(endDate)) {
+      return dateAdapter.isSame(startDate, endDate, "month") ? createConsecutiveRange(startDate) : [
+        dateAdapter.startOf(startDate, "month"),
+        dateAdapter.startOf(endDate, "month")
+      ];
     }
     return createConsecutiveRange(startDate);
   }
-  const currentMonth = date.startOfMonth(date.today(timeZone));
-  return [currentMonth, currentMonth.add({ months: 1 })];
+  const currentMonth = dateAdapter.startOf(dateAdapter.today(), "month");
+  return [currentMonth, dateAdapter.add(currentMonth, { months: 1 })];
 }
 const withBaseName = core.makePrefixer("saltDatePickerPanel");
 const DatePickerRangePanel = react.forwardRef(function DatePickerRangePanel2(props, ref) {
+  const { dateAdapter } = LocalizationProvider.useLocalization();
   const {
     className,
     defaultStartVisibleMonth: defaultStartVisibleMonthProp,
@@ -43,7 +47,7 @@ const DatePickerRangePanel = react.forwardRef(function DatePickerRangePanel2(pro
     endVisibleMonth: endVisibleMonthProp,
     onEndVisibleMonthChange,
     helperText,
-    onSelect,
+    onSelectionChange,
     StartCalendarProps: StartCalendarPropsProp,
     StartCalendarNavigationProps,
     StartCalendarWeekHeaderProps,
@@ -63,16 +67,14 @@ const DatePickerRangePanel = react.forwardRef(function DatePickerRangePanel2(pro
   const {
     state: {
       selectedDate,
-      timeZone = date.getLocalTimeZone(),
-      minDate = date.startOfMonth(date.today(timeZone)),
-      maxDate = minDate.add({ months: 1 }),
-      locale = formatDate.getCurrentLocale()
+      minDate = dateAdapter.startOf(dateAdapter.today(), "month"),
+      maxDate = dateAdapter.add(minDate, { months: 1 })
     },
-    helpers: { setSelectedDate }
+    helpers: { select }
   } = DatePickerContext.useDatePickerContext({ selectionVariant: "range" });
   const [hoveredDate, setHoveredDate] = react.useState(null);
   const [[fallbackStartVisibleMonth, fallbackEndVisibleMonth]] = react.useState(
-    () => getFallbackVisibleMonths(selectedDate, timeZone)
+    () => getFallbackVisibleMonths(dateAdapter, selectedDate)
   );
   const [startVisibleMonth, setStartVisibleMonth] = core.useControlled({
     controlled: startVisibleMonthProp,
@@ -86,12 +88,12 @@ const DatePickerRangePanel = react.forwardRef(function DatePickerRangePanel2(pro
     name: "DatePickerRangePanel",
     state: "endVisibleMonth"
   });
-  const handleSelectedDateChange = react.useCallback(
+  const handleSelectionChange = react.useCallback(
     (event, newDate) => {
-      setSelectedDate(newDate, { startDate: false, endDate: false });
-      onSelect == null ? void 0 : onSelect(event, newDate);
+      select(event, newDate);
+      onSelectionChange == null ? void 0 : onSelectionChange(event, newDate);
     },
-    [onSelect, setSelectedDate]
+    [select, onSelectionChange]
   );
   const handleHoveredStartDateChange = react.useCallback(
     (event, newHoveredDate) => {
@@ -115,8 +117,8 @@ const DatePickerRangePanel = react.forwardRef(function DatePickerRangePanel2(pro
   const handleStartVisibleMonthChange = react.useCallback(
     (event, newVisibleMonth) => {
       setStartVisibleMonth(newVisibleMonth);
-      if (newVisibleMonth.compare(endVisibleMonth) >= 0) {
-        setEndVisibleMonth(newVisibleMonth.add({ months: 1 }));
+      if (dateAdapter.compare(newVisibleMonth, endVisibleMonth) >= 0) {
+        setEndVisibleMonth(dateAdapter.add(newVisibleMonth, { months: 1 }));
       }
       onStartVisibleMonthChange == null ? void 0 : onStartVisibleMonthChange(event, newVisibleMonth);
     },
@@ -125,44 +127,47 @@ const DatePickerRangePanel = react.forwardRef(function DatePickerRangePanel2(pro
   const handleEndVisibleMonthChange = react.useCallback(
     (event, newVisibleMonth) => {
       setEndVisibleMonth(newVisibleMonth);
-      if (newVisibleMonth.compare(startVisibleMonth) <= 0) {
+      if (dateAdapter.compare(newVisibleMonth, startVisibleMonth) <= 0) {
         setStartVisibleMonth(
-          date.startOfMonth(newVisibleMonth.subtract({ months: 1 }))
+          dateAdapter.startOf(
+            dateAdapter.subtract(newVisibleMonth, { months: 1 }),
+            "month"
+          )
         );
       }
       onEndVisibleMonthChange == null ? void 0 : onEndVisibleMonthChange(event, newVisibleMonth);
     },
     [startVisibleMonth, onEndVisibleMonthChange]
   );
-  function getHoveredDate(date$1, hoveredDate2) {
-    return date$1 && hoveredDate2 && (hoveredDate2 == null ? void 0 : hoveredDate2.compare(date.endOfMonth(date$1))) > 0 ? date.endOfMonth(date$1) : hoveredDate2;
+  function getHoveredDate(date, hoveredDate2) {
+    return date && hoveredDate2 && dateAdapter.compare(hoveredDate2, dateAdapter.endOf(date, "month")) > 0 ? dateAdapter.endOf(date, "month") : hoveredDate2;
   }
+  const calendarSelectedDate = {
+    startDate: selectedDate && dateAdapter.isValid(selectedDate.startDate) ? selectedDate.startDate : null,
+    endDate: selectedDate && dateAdapter.isValid(selectedDate.endDate) ? selectedDate.endDate : null
+  };
   const StartCalendarProps = {
     visibleMonth: startVisibleMonth,
     hoveredDate: getHoveredDate(selectedDate == null ? void 0 : selectedDate.startDate, hoveredDate),
-    selectedDate,
+    selectedDate: calendarSelectedDate,
     onHoveredDateChange: handleHoveredStartDateChange,
     onVisibleMonthChange: handleStartVisibleMonthChange,
-    onSelectedDateChange: handleSelectedDateChange,
+    onSelectionChange: handleSelectionChange,
     hideOutOfRangeDates: true,
     minDate,
     maxDate,
-    locale,
-    timeZone,
     ...StartCalendarPropsProp
   };
   const EndCalendarProps = {
     visibleMonth: endVisibleMonth,
     hoveredDate,
-    selectedDate,
+    selectedDate: calendarSelectedDate,
     onHoveredDateChange: handleHoveredEndDateChange,
     onVisibleMonthChange: handleEndVisibleMonthChange,
-    onSelectedDateChange: handleSelectedDateChange,
+    onSelectionChange: handleSelectionChange,
     hideOutOfRangeDates: true,
     minDate,
     maxDate,
-    locale,
-    timeZone,
     ...EndCalendarPropsProp
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -179,12 +184,12 @@ const DatePickerRangePanel = react.forwardRef(function DatePickerRangePanel2(pro
           /* @__PURE__ */ jsxRuntime.jsxs(Calendar.Calendar, { selectionVariant: "range", ...StartCalendarProps, children: [
             /* @__PURE__ */ jsxRuntime.jsx(CalendarNavigation.CalendarNavigation, { ...StartCalendarNavigationProps }),
             /* @__PURE__ */ jsxRuntime.jsx(CalendarWeekHeader.CalendarWeekHeader, { ...StartCalendarWeekHeaderProps }),
-            /* @__PURE__ */ jsxRuntime.jsx(CalendarDateGrid.CalendarDateGrid, { ...StartCalendarDataGridProps })
+            /* @__PURE__ */ jsxRuntime.jsx(CalendarGrid.CalendarGrid, { ...StartCalendarDataGridProps })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs(Calendar.Calendar, { selectionVariant: "range", ...EndCalendarProps, children: [
             /* @__PURE__ */ jsxRuntime.jsx(CalendarNavigation.CalendarNavigation, { ...EndCalendarNavigationProps }),
             /* @__PURE__ */ jsxRuntime.jsx(CalendarWeekHeader.CalendarWeekHeader, { ...EndCalendarWeekHeaderProps }),
-            /* @__PURE__ */ jsxRuntime.jsx(CalendarDateGrid.CalendarDateGrid, { ...EndCalendarDataGridProps })
+            /* @__PURE__ */ jsxRuntime.jsx(CalendarGrid.CalendarGrid, { ...EndCalendarDataGridProps })
           ] })
         ] }) })
       ]