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

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

@@ -0,0 +1,98 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@salt-ds/core');
+var clsx = require('clsx');
+var react = require('react');
+var DateInputSingle = require('../date-input/DateInputSingle.js');
+require('../date-input/DateInputRange.js');
+require('@internationalized/date');
+var DatePickerContext = require('./DatePickerContext.js');
+var DatePickerOverlayProvider = require('./DatePickerOverlayProvider.js');
+
+const withBaseName = core.makePrefixer("saltDatePickerSingleInput");
+const DatePickerSingleInput = react.forwardRef(function DatePickerSingleInput2(props, ref) {
+  const {
+    className,
+    onFocus,
+    onBlur,
+    value: valueProp,
+    defaultValue,
+    onDateValueChange,
+    ...rest
+  } = props;
+  const { CalendarIcon } = core.useIcon();
+  const {
+    state: { selectedDate, disabled, readOnly, cancelled, locale, timeZone },
+    helpers: { setSelectedDate }
+  } = DatePickerContext.useDatePickerContext({ selectionVariant: "single" });
+  const {
+    state: { open, floatingUIResult },
+    helpers: { getReferenceProps, setOpen }
+  } = DatePickerOverlayProvider.useDatePickerOverlay();
+  const inputRef = core.useForkRef(ref, floatingUIResult == null ? void 0 : floatingUIResult.reference);
+  const prevState = react.useRef();
+  const [value, setValue] = core.useControlled({
+    controlled: valueProp,
+    default: defaultValue,
+    name: "DatePickerSingleInput",
+    state: "value"
+  });
+  const handleCalendarButton = react.useCallback(() => {
+    setOpen(!open);
+  }, [open, setOpen]);
+  const handleDateChange = react.useCallback(
+    (_event, newDate, error) => {
+      setSelectedDate(newDate, error);
+    },
+    [setSelectedDate]
+  );
+  const handleDateValueChange = (newDateValue, isFormatted) => {
+    setValue(newDateValue);
+    onDateValueChange == null ? void 0 : onDateValueChange(newDateValue, isFormatted);
+  };
+  react.useEffect(() => {
+    if (open) {
+      prevState.current = { date: selectedDate, 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, false);
+    }
+  }, [cancelled]);
+  return /* @__PURE__ */ jsxRuntime.jsx(DateInputSingle.DateInputSingle, {
+    value: value || "",
+    locale,
+    timeZone,
+    className: clsx.clsx(withBaseName(), className),
+    ref: inputRef,
+    date: selectedDate || null,
+    readOnly,
+    onDateChange: handleDateChange,
+    onDateValueChange: handleDateValueChange,
+    endAdornment: /* @__PURE__ */ jsxRuntime.jsx(core.Button, {
+      appearance: "transparent",
+      sentiment: "neutral",
+      onClick: handleCalendarButton,
+      disabled,
+      "aria-label": "Open Calendar",
+      children: /* @__PURE__ */ jsxRuntime.jsx(CalendarIcon, {})
+    }),
+    ...getReferenceProps({
+      ...rest,
+      onKeyDown: (event) => {
+        if (event.key === "ArrowDown") {
+          setOpen(true);
+        }
+      }
+    })
+  });
+});
+
+exports.DatePickerSingleInput = DatePickerSingleInput;
+//# sourceMappingURL=DatePickerSingleInput.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DatePickerSingleInput.js","sources":["../src/date-picker/DatePickerSingleInput.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 SyntheticEvent,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useRef,\n} from \"react\";\nimport type { SingleDateSelection } from \"../calendar\";\nimport {\n  DateInputSingle,\n  type DateInputSingleError,\n  type DateInputSingleProps,\n} from \"../date-input\";\nimport { useDatePickerContext } from \"./DatePickerContext\";\nimport { useDatePickerOverlay } from \"./DatePickerOverlayProvider\";\n\nconst withBaseName = makePrefixer(\"saltDatePickerSingleInput\");\n\n/**\n * Props for the DatePickerSingleInput component.\n */\nexport interface DatePickerSingleInputProps extends DateInputSingleProps {}\n\nexport const DatePickerSingleInput = forwardRef<\n  HTMLDivElement,\n  DatePickerSingleInputProps\n>(function DatePickerSingleInput(props, ref) {\n  const {\n    className,\n    onFocus,\n    onBlur,\n    value: valueProp,\n    defaultValue,\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: \"single\" });\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: \"DatePickerSingleInput\",\n    state: \"value\",\n  });\n\n  const handleCalendarButton = useCallback(() => {\n    setOpen(!open);\n  }, [open, setOpen]);\n\n  const handleDateChange = useCallback(\n    (\n      _event: SyntheticEvent,\n      newDate: SingleDateSelection | null,\n      error: DateInputSingleError,\n    ) => {\n      setSelectedDate(newDate, error);\n    },\n    [setSelectedDate],\n  );\n\n  const handleDateValueChange = (\n    newDateValue: string,\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, false);\n    }\n  }, [cancelled]);\n\n  return (\n    <DateInputSingle\n      value={value || \"\"}\n      locale={locale}\n      timeZone={timeZone}\n      className={clsx(withBaseName(), className)}\n      ref={inputRef}\n      date={selectedDate || null}\n      readOnly={readOnly}\n      onDateChange={handleDateChange}\n      onDateValueChange={handleDateValueChange}\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      {...getReferenceProps({\n        ...rest,\n        onKeyDown: (event: KeyboardEvent<HTMLInputElement>) => {\n          if (event.key === \"ArrowDown\") {\n            setOpen(true);\n          }\n        },\n      })}\n    />\n  );\n});\n"],"names":["makePrefixer","forwardRef","DatePickerSingleInput","useIcon","useDatePickerContext","useDatePickerOverlay","useForkRef","useRef","useControlled","useCallback","useEffect","jsx","DateInputSingle","clsx","Button"],"mappings":"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"}

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

@@ -0,0 +1,152 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+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');
+var clsx = require('clsx');
+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');
+require('../calendar/internal/CalendarContext.js');
+var formatDate = require('../calendar/formatDate.js');
+require('../calendar/useCalendarSelection.js');
+var DatePickerPanel = require('./DatePickerPanel.css.js');
+require('./DatePicker.js');
+require('./DatePickerActions.js');
+var DatePickerContext = require('./DatePickerContext.js');
+require('./DatePickerOverlay.js');
+require('./DatePickerSingleInput.js');
+require('./DatePickerRangeInput.js');
+require('./DatePickerRangePanel.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var clsx__default = /*#__PURE__*/_interopDefaultLegacy(clsx);
+
+const withBaseName = core.makePrefixer("saltDatePickerPanel");
+const DatePickerSinglePanel = react.forwardRef(function DatePickerSinglePanel2(props, ref) {
+  const {
+    CalendarProps,
+    CalendarWeekHeaderProps,
+    CalendarNavigationProps,
+    CalendarDataGridProps,
+    className,
+    defaultVisibleMonth,
+    visibleMonth: visibleMonthProp,
+    onVisibleMonthChange,
+    helperText,
+    onSelect,
+    ...rest
+  } = props;
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "salt-date-picker-single-panel",
+    css: DatePickerPanel,
+    window: targetWindow
+  });
+  const {
+    state: {
+      selectedDate,
+      timeZone = date.getLocalTimeZone(),
+      minDate = date.startOfMonth(date.today(timeZone)),
+      maxDate = minDate.add({ months: 1 }),
+      locale = formatDate.getCurrentLocale()
+    },
+    helpers: { setSelectedDate }
+  } = DatePickerContext.useDatePickerContext({ selectionVariant: "single" });
+  const [hoveredDate, setHoveredDate] = react.useState(null);
+  const [uncontrolledDefaultVisibleMonth] = react.useState(
+    () => defaultVisibleMonth || date.startOfMonth(selectedDate || date.today(timeZone))
+  );
+  const [visibleMonth, setVisibleMonth] = core.useControlled({
+    controlled: visibleMonthProp,
+    default: uncontrolledDefaultVisibleMonth,
+    name: "DatePickerSinglePanel",
+    state: "visibleMonth"
+  });
+  const handleSelectedDateChange = react.useCallback(
+    (event, newDate) => {
+      setSelectedDate(newDate, false);
+      onSelect == null ? void 0 : onSelect(event, newDate);
+    },
+    [setSelectedDate, onSelect]
+  );
+  const handleHoveredDateChange = react.useCallback(
+    (event, newHoveredDate) => {
+      setHoveredDate(newHoveredDate);
+      if (newHoveredDate && (CalendarProps == null ? void 0 : CalendarProps.onHoveredDateChange)) {
+        CalendarProps.onHoveredDateChange(event, newHoveredDate);
+      }
+    },
+    [CalendarProps == null ? void 0 : CalendarProps.onHoveredDateChange]
+  );
+  const handleVisibleMonthChange = react.useCallback(
+    (event, newVisibleMonth) => {
+      setVisibleMonth(newVisibleMonth);
+      if (onVisibleMonthChange) {
+        onVisibleMonthChange(event, newVisibleMonth);
+      }
+    },
+    [onVisibleMonthChange]
+  );
+  const baseCalendarProps = {
+    selectionVariant: "single",
+    visibleMonth,
+    hoveredDate,
+    onHoveredDateChange: handleHoveredDateChange,
+    onVisibleMonthChange: handleVisibleMonthChange,
+    onSelectedDateChange: handleSelectedDateChange,
+    hideOutOfRangeDates: true,
+    selectedDate,
+    minDate,
+    maxDate,
+    locale,
+    timeZone,
+    ...CalendarProps
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(core.StackLayout, {
+    separators: true,
+    gap: 0,
+    className: clsx__default["default"](className, withBaseName("container")),
+    ref,
+    ...rest,
+    children: [
+      helperText && /* @__PURE__ */ jsxRuntime.jsx(core.FlexItem, {
+        className: withBaseName("header"),
+        children: /* @__PURE__ */ jsxRuntime.jsx(core.FormFieldHelperText, {
+          children: helperText
+        })
+      }),
+      /* @__PURE__ */ jsxRuntime.jsx(core.FlexLayout, {
+        gap: 0,
+        children: /* @__PURE__ */ jsxRuntime.jsx(core.FormFieldContext.Provider, {
+          value: {},
+          children: /* @__PURE__ */ jsxRuntime.jsxs(Calendar.Calendar, {
+            selectionVariant: "single",
+            ...baseCalendarProps,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(CalendarNavigation.CalendarNavigation, {
+                ...CalendarNavigationProps
+              }),
+              /* @__PURE__ */ jsxRuntime.jsx(CalendarWeekHeader.CalendarWeekHeader, {
+                ...CalendarWeekHeaderProps
+              }),
+              /* @__PURE__ */ jsxRuntime.jsx(CalendarDateGrid.CalendarDateGrid, {
+                ...CalendarDataGridProps
+              })
+            ]
+          })
+        })
+      })
+    ]
+  });
+});
+
+exports.DatePickerSinglePanel = DatePickerSinglePanel;
+//# sourceMappingURL=DatePickerSinglePanel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DatePickerSinglePanel.js","sources":["../src/date-picker/DatePickerSinglePanel.tsx"],"sourcesContent":["import {\n  type DateValue,\n  getLocalTimeZone,\n  startOfMonth,\n  today,\n} from \"@internationalized/date\";\nimport {\n  FlexItem,\n  FlexLayout,\n  FormFieldContext,\n  type FormFieldContextValue,\n  FormFieldHelperText,\n  StackLayout,\n  makePrefixer,\n  useControlled,\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 SyntheticEvent,\n  forwardRef,\n  useCallback,\n  useState,\n} from \"react\";\nimport {\n  CalendarDateGrid,\n  type CalendarDateGridProps,\n  CalendarNavigation,\n  type CalendarNavigationProps,\n  type CalendarSingleProps,\n  CalendarWeekHeader,\n  type CalendarWeekHeaderProps,\n  getCurrentLocale,\n} from \"../calendar\";\nimport { Calendar, type SingleDateSelection } from \"../calendar\";\nimport datePickerPanelCss from \"./DatePickerPanel.css\";\nimport { useDatePickerContext } from \"./index\";\n\n/**\n * Props for the DatePickerSinglePanel component.\n * @template T - The type of the selected date.\n */\nexport interface DatePickerSinglePanelProps<T>\n  extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * Callback fired when a date is selected.\n   * @param event - The synthetic event.\n   * @param selectedDate - The selected date or null.\n   */\n  onSelect?: (event: SyntheticEvent, selectedDate?: T | null) => void;\n\n  /**\n   * Helper text to be displayed below the date picker.\n   */\n  helperText?: string;\n\n  /**\n   * The currently visible month.\n   */\n  visibleMonth?: DateValue;\n\n  /**\n   * The default visible month.\n   */\n  defaultVisibleMonth?: DateValue;\n\n  /**\n   * Callback fired when the visible month changes.\n   * @param event - The synthetic event.\n   * @param visibleMonth - The new visible month.\n   */\n  onVisibleMonthChange?: (\n    event: SyntheticEvent,\n    visibleMonth: DateValue,\n  ) => void;\n\n  /**\n   * Props to be passed to the Calendar component.\n   */\n  CalendarProps?: Partial<\n    Omit<\n      CalendarSingleProps,\n      | \"selectionVariant\"\n      | \"selectedDate\"\n      | \"defaultSelectedDate\"\n      | \"onSelectedDateChange\"\n      | \"onVisibleMonthChange\"\n    >\n  >;\n  /**\n   * Props to be passed to the CalendarNavigation component.\n   */\n  CalendarNavigationProps?: CalendarNavigationProps;\n  /**\n   * Props to be passed to the CalendarWeekHeader component.\n   */\n  CalendarWeekHeaderProps?: CalendarWeekHeaderProps;\n  /**\n   * Props to be passed to the CalendarDataGrid component.\n   */\n  CalendarDataGridProps?: CalendarDateGridProps;\n}\n\nconst withBaseName = makePrefixer(\"saltDatePickerPanel\");\n\nexport const DatePickerSinglePanel = forwardRef<\n  HTMLDivElement,\n  DatePickerSinglePanelProps<SingleDateSelection>\n>(function DatePickerSinglePanel(props, ref) {\n  const {\n    CalendarProps,\n    CalendarWeekHeaderProps,\n    CalendarNavigationProps,\n    CalendarDataGridProps,\n    className,\n    defaultVisibleMonth,\n    visibleMonth: visibleMonthProp,\n    onVisibleMonthChange,\n    helperText,\n    onSelect,\n    ...rest\n  } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-date-picker-single-panel\",\n    css: datePickerPanelCss,\n    window: targetWindow,\n  });\n\n  const {\n    state: {\n      selectedDate,\n      timeZone = getLocalTimeZone(),\n      minDate = startOfMonth(today(timeZone)),\n      maxDate = minDate.add({ months: 1 }),\n      locale = getCurrentLocale(),\n    },\n    helpers: { setSelectedDate },\n  } = useDatePickerContext({ selectionVariant: \"single\" });\n\n  const [hoveredDate, setHoveredDate] = useState<DateValue | null>(null);\n\n  const [uncontrolledDefaultVisibleMonth] = useState(\n    () => defaultVisibleMonth || startOfMonth(selectedDate || today(timeZone)),\n  );\n  const [visibleMonth, setVisibleMonth] = useControlled({\n    controlled: visibleMonthProp,\n    default: uncontrolledDefaultVisibleMonth,\n    name: \"DatePickerSinglePanel\",\n    state: \"visibleMonth\",\n  });\n\n  const handleSelectedDateChange = useCallback(\n    (event: SyntheticEvent, newDate: SingleDateSelection | null) => {\n      setSelectedDate(newDate, false);\n      onSelect?.(event, newDate);\n    },\n    [setSelectedDate, onSelect],\n  );\n\n  const handleHoveredDateChange = useCallback(\n    (event: SyntheticEvent, newHoveredDate: SingleDateSelection | null) => {\n      setHoveredDate(newHoveredDate);\n      if (newHoveredDate && CalendarProps?.onHoveredDateChange) {\n        CalendarProps.onHoveredDateChange(event, newHoveredDate);\n      }\n    },\n    [CalendarProps?.onHoveredDateChange],\n  );\n\n  const handleVisibleMonthChange = useCallback(\n    (event: SyntheticEvent, newVisibleMonth: DateValue) => {\n      setVisibleMonth(newVisibleMonth);\n      if (onVisibleMonthChange) {\n        onVisibleMonthChange(event, newVisibleMonth);\n      }\n    },\n    [onVisibleMonthChange],\n  );\n\n  const baseCalendarProps: Partial<CalendarSingleProps> = {\n    selectionVariant: \"single\",\n    visibleMonth,\n    hoveredDate,\n    onHoveredDateChange: handleHoveredDateChange,\n    onVisibleMonthChange: handleVisibleMonthChange,\n    onSelectedDateChange: handleSelectedDateChange,\n    hideOutOfRangeDates: true,\n    selectedDate,\n    minDate,\n    maxDate,\n    locale,\n    timeZone,\n    ...CalendarProps,\n  };\n\n  return (\n    <StackLayout\n      separators\n      gap={0}\n      className={clsx(className, withBaseName(\"container\"))}\n      ref={ref}\n      {...rest}\n    >\n      {helperText && (\n        <FlexItem className={withBaseName(\"header\")}>\n          <FormFieldHelperText>{helperText}</FormFieldHelperText>\n        </FlexItem>\n      )}\n      <FlexLayout gap={0}>\n        {/* Avoid Dropdowns in Calendar inheriting the FormField's state */}\n        <FormFieldContext.Provider value={{} as FormFieldContextValue}>\n          <Calendar selectionVariant=\"single\" {...baseCalendarProps}>\n            <CalendarNavigation {...CalendarNavigationProps} />\n            <CalendarWeekHeader {...CalendarWeekHeaderProps} />\n            <CalendarDateGrid {...CalendarDataGridProps} />\n          </Calendar>\n        </FormFieldContext.Provider>\n      </FlexLayout>\n    </StackLayout>\n  );\n});\n"],"names":["makePrefixer","forwardRef","DatePickerSinglePanel","useWindow","useComponentCssInjection","datePickerPanelCss","getLocalTimeZone","startOfMonth","today","getCurrentLocale","useDatePickerContext","useState","useControlled","useCallback","jsxs","StackLayout","clsx","jsx","FlexItem","FormFieldHelperText","FlexLayout","FormFieldContext","Calendar","CalendarNavigation","CalendarWeekHeader","CalendarDateGrid"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyGA,MAAM,YAAA,GAAeA,kBAAa,qBAAqB,CAAA,CAAA;AAEhD,MAAM,qBAAwB,GAAAC,gBAAA,CAGnC,SAASC,sBAAAA,CAAsB,OAAO,GAAK,EAAA;AAC3C,EAAM,MAAA;AAAA,IACJ,aAAA;AAAA,IACA,uBAAA;AAAA,IACA,uBAAA;AAAA,IACA,qBAAA;AAAA,IACA,SAAA;AAAA,IACA,mBAAA;AAAA,IACA,YAAc,EAAA,gBAAA;AAAA,IACd,oBAAA;AAAA,IACA,UAAA;AAAA,IACA,QAAA;AAAA,IACG,GAAA,IAAA;AAAA,GACD,GAAA,KAAA,CAAA;AAEJ,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,+BAAA;AAAA,IACR,GAAK,EAAAC,eAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA;AAAA,IACJ,KAAO,EAAA;AAAA,MACL,YAAA;AAAA,MACA,WAAWC,qBAAiB,EAAA;AAAA,MAC5B,OAAU,GAAAC,iBAAA,CAAaC,UAAM,CAAA,QAAQ,CAAC,CAAA;AAAA,MACtC,UAAU,OAAQ,CAAA,GAAA,CAAI,EAAE,MAAA,EAAQ,GAAG,CAAA;AAAA,MACnC,SAASC,2BAAiB,EAAA;AAAA,KAC5B;AAAA,IACA,OAAA,EAAS,EAAE,eAAgB,EAAA;AAAA,GACzB,GAAAC,sCAAA,CAAqB,EAAE,gBAAA,EAAkB,UAAU,CAAA,CAAA;AAEvD,EAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAIC,eAA2B,IAAI,CAAA,CAAA;AAErE,EAAM,MAAA,CAAC,+BAA+B,CAAI,GAAAA,cAAA;AAAA,IACxC,MAAM,mBAAuB,IAAAJ,iBAAA,CAAa,YAAgB,IAAAC,UAAA,CAAM,QAAQ,CAAC,CAAA;AAAA,GAC3E,CAAA;AACA,EAAA,MAAM,CAAC,YAAA,EAAc,eAAe,CAAA,GAAII,kBAAc,CAAA;AAAA,IACpD,UAAY,EAAA,gBAAA;AAAA,IACZ,OAAS,EAAA,+BAAA;AAAA,IACT,IAAM,EAAA,uBAAA;AAAA,IACN,KAAO,EAAA,cAAA;AAAA,GACR,CAAA,CAAA;AAED,EAAA,MAAM,wBAA2B,GAAAC,iBAAA;AAAA,IAC/B,CAAC,OAAuB,OAAwC,KAAA;AAC9D,MAAA,eAAA,CAAgB,SAAS,KAAK,CAAA,CAAA;AAC9B,MAAA,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAW,KAAO,EAAA,OAAA,CAAA,CAAA;AAAA,KACpB;AAAA,IACA,CAAC,iBAAiB,QAAQ,CAAA;AAAA,GAC5B,CAAA;AAEA,EAAA,MAAM,uBAA0B,GAAAA,iBAAA;AAAA,IAC9B,CAAC,OAAuB,cAA+C,KAAA;AACrE,MAAA,cAAA,CAAe,cAAc,CAAA,CAAA;AAC7B,MAAI,IAAA,cAAA,KAAkB,+CAAe,mBAAqB,CAAA,EAAA;AACxD,QAAc,aAAA,CAAA,mBAAA,CAAoB,OAAO,cAAc,CAAA,CAAA;AAAA,OACzD;AAAA,KACF;AAAA,IACA,CAAC,+CAAe,mBAAmB,CAAA;AAAA,GACrC,CAAA;AAEA,EAAA,MAAM,wBAA2B,GAAAA,iBAAA;AAAA,IAC/B,CAAC,OAAuB,eAA+B,KAAA;AACrD,MAAA,eAAA,CAAgB,eAAe,CAAA,CAAA;AAC/B,MAAA,IAAI,oBAAsB,EAAA;AACxB,QAAA,oBAAA,CAAqB,OAAO,eAAe,CAAA,CAAA;AAAA,OAC7C;AAAA,KACF;AAAA,IACA,CAAC,oBAAoB,CAAA;AAAA,GACvB,CAAA;AAEA,EAAA,MAAM,iBAAkD,GAAA;AAAA,IACtD,gBAAkB,EAAA,QAAA;AAAA,IAClB,YAAA;AAAA,IACA,WAAA;AAAA,IACA,mBAAqB,EAAA,uBAAA;AAAA,IACrB,oBAAsB,EAAA,wBAAA;AAAA,IACtB,oBAAsB,EAAA,wBAAA;AAAA,IACtB,mBAAqB,EAAA,IAAA;AAAA,IACrB,YAAA;AAAA,IACA,OAAA;AAAA,IACA,OAAA;AAAA,IACA,MAAA;AAAA,IACA,QAAA;AAAA,IACA,GAAG,aAAA;AAAA,GACL,CAAA;AAEA,EAAA,uBACGC,eAAA,CAAAC,gBAAA,EAAA;AAAA,IACC,UAAU,EAAA,IAAA;AAAA,IACV,GAAK,EAAA,CAAA;AAAA,IACL,SAAW,EAAAC,wBAAA,CAAK,SAAW,EAAA,YAAA,CAAa,WAAW,CAAC,CAAA;AAAA,IACpD,GAAA;AAAA,IACC,GAAG,IAAA;AAAA,IAEH,QAAA,EAAA;AAAA,MAAA,UAAA,oBACEC,cAAA,CAAAC,aAAA,EAAA;AAAA,QAAS,SAAA,EAAW,aAAa,QAAQ,CAAA;AAAA,QACxC,QAAC,kBAAAD,cAAA,CAAAE,wBAAA,EAAA;AAAA,UAAqB,QAAA,EAAA,UAAA;AAAA,SAAW,CAAA;AAAA,OACnC,CAAA;AAAA,sBAEDF,cAAA,CAAAG,eAAA,EAAA;AAAA,QAAW,GAAK,EAAA,CAAA;AAAA,QAEf,QAAA,kBAAAH,cAAA,CAACI,sBAAiB,QAAjB,EAAA;AAAA,UAA0B,OAAO,EAAC;AAAA,UACjC,QAAC,kBAAAP,eAAA,CAAAQ,iBAAA,EAAA;AAAA,YAAS,gBAAiB,EAAA,QAAA;AAAA,YAAU,GAAG,iBAAA;AAAA,YACtC,QAAA,EAAA;AAAA,8BAACL,cAAA,CAAAM,qCAAA,EAAA;AAAA,gBAAoB,GAAG,uBAAA;AAAA,eAAyB,CAAA;AAAA,8BAChDN,cAAA,CAAAO,qCAAA,EAAA;AAAA,gBAAoB,GAAG,uBAAA;AAAA,eAAyB,CAAA;AAAA,8BAChDP,cAAA,CAAAQ,iCAAA,EAAA;AAAA,gBAAkB,GAAG,qBAAA;AAAA,eAAuB,CAAA;AAAA,aAAA;AAAA,WAC/C,CAAA;AAAA,SACF,CAAA;AAAA,OACF,CAAA;AAAA,KAAA;AAAA,GACF,CAAA,CAAA;AAEJ,CAAC;;;;"}

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

@@ -0,0 +1,207 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var date = require('@internationalized/date');
+var core = require('@salt-ds/core');
+var react = require('react');
+require('../calendar/Calendar.js');
+require('../calendar/CalendarNavigation.js');
+require('../calendar/CalendarWeekHeader.js');
+require('../calendar/CalendarDateGrid.js');
+require('../calendar/internal/CalendarContext.js');
+var formatDate = require('../calendar/formatDate.js');
+var useCalendarSelection = require('../calendar/useCalendarSelection.js');
+var DatePickerOverlayProvider = require('./DatePickerOverlayProvider.js');
+
+function useDatePicker(props, ref) {
+  const {
+    readOnly = false,
+    disabled,
+    selectionVariant,
+    defaultSelectedDate = null,
+    selectedDate: selectedDateProp,
+    onSelectedDateChange,
+    onApply,
+    minDate: minDateProp,
+    maxDate: maxDateProp,
+    timeZone = date.getLocalTimeZone(),
+    locale = formatDate.getCurrentLocale(),
+    onCancel
+  } = props;
+  const minDate = react.useMemo(
+    () => minDateProp != null ? minDateProp : date.startOfMonth(new date.CalendarDate(useCalendarSelection.CALENDAR_MIN_YEAR, 1, 1)),
+    [minDateProp]
+  );
+  const maxDate = react.useMemo(
+    () => maxDateProp != null ? maxDateProp : date.endOfMonth(new date.CalendarDate(useCalendarSelection.CALENDAR_MAX_YEAR, 1, 1)),
+    [maxDateProp]
+  );
+  const datePickerRef = react.useRef(null);
+  const containerRef = core.useForkRef(ref, datePickerRef);
+  const {
+    state: { open },
+    helpers: { setOpen }
+  } = DatePickerOverlayProvider.useDatePickerOverlay();
+  const [selectedDate, setSelectedDate] = core.useControlled({
+    controlled: selectedDateProp,
+    default: defaultSelectedDate,
+    name: "DatePicker",
+    state: "selectedDate"
+  });
+  const [enableApply, setEnableApply] = react.useState(false);
+  const [cancelled, setCancelled] = react.useState(false);
+  react.useEffect(() => {
+    if (open) {
+      setCancelled(false);
+    }
+  }, [open]);
+  const { disabled: formFieldDisabled, readOnly: formFieldReadOnly } = core.useFormFieldProps();
+  const isReadOnly = readOnly || formFieldReadOnly || false;
+  const isDisabled = disabled || formFieldDisabled || false;
+  const applySingle = (appliedDate, error) => {
+    setCancelled(false);
+    setOpen(false);
+    if (selectionVariant === "single") {
+      onApply == null ? void 0 : onApply(appliedDate, error);
+    }
+  };
+  const setSelectedSingleDate = react.useCallback(
+    (selection, error) => {
+      let nextDate;
+      if (error || !selection) {
+        nextDate = selection;
+      } else {
+        let dateAfterMinDate = true;
+        let dateBeforeMaxDate = true;
+        if (minDate && selection) {
+          dateAfterMinDate = selection.compare(minDate) >= 0;
+        }
+        if (maxDate && selection) {
+          dateBeforeMaxDate = selection.compare(maxDate) <= 0;
+        }
+        nextDate = dateAfterMinDate && dateBeforeMaxDate ? selection : null;
+      }
+      setSelectedDate(nextDate);
+      if (selectionVariant === "single") {
+        onSelectedDateChange == null ? void 0 : onSelectedDateChange(nextDate, error);
+      }
+      if (!enableApply) {
+        setOpen(false);
+      }
+    },
+    [
+      enableApply,
+      minDate,
+      maxDate,
+      onSelectedDateChange,
+      selectionVariant,
+      setSelectedDate,
+      setOpen
+    ]
+  );
+  const applyRange = (appliedDate, error) => {
+    setCancelled(false);
+    if ((appliedDate == null ? void 0 : appliedDate.startDate) && (appliedDate == null ? void 0 : appliedDate.endDate)) {
+      setOpen(false);
+    }
+    if (selectionVariant === "range") {
+      onApply == null ? void 0 : onApply(appliedDate, error);
+    }
+  };
+  const setSelectedRangeDate = react.useCallback(
+    (selection, error) => {
+      let nextDate;
+      let nextError = { ...error };
+      let startDateInRange = true;
+      let endDateInRange = true;
+      if ((error == null ? void 0 : error.startDate) || (error == null ? void 0 : error.endDate) || !selection) {
+        nextDate = selection;
+      } else {
+        if (maxDate && (selection == null ? void 0 : selection.startDate)) {
+          startDateInRange = selection.startDate.compare(minDate) >= 0;
+        }
+        if (maxDate && (selection == null ? void 0 : selection.endDate)) {
+          endDateInRange = (selection == null ? void 0 : selection.endDate) && selection.endDate.compare(maxDate) <= 0;
+        }
+        if (!startDateInRange && !endDateInRange) {
+          nextDate = null;
+          nextError = {
+            startDate: "is before min date",
+            endDate: "is after max date"
+          };
+        } else {
+          nextDate = {
+            startDate: selection.startDate || null,
+            endDate: selection.endDate || null
+          };
+          nextError = {
+            startDate: !startDateInRange ? "is before min date" : nextError.startDate,
+            endDate: !endDateInRange ? "is after max date" : nextError.endDate
+          };
+        }
+      }
+      setSelectedDate(nextDate);
+      if (selectionVariant === "range") {
+        onSelectedDateChange == null ? void 0 : onSelectedDateChange(nextDate, nextError);
+      }
+      if (!enableApply && (nextDate == null ? void 0 : nextDate.startDate) && (nextDate == null ? void 0 : nextDate.endDate)) {
+        setOpen(false);
+      }
+    },
+    [
+      enableApply,
+      minDate,
+      maxDate,
+      onSelectedDateChange,
+      selectionVariant,
+      setSelectedDate,
+      setOpen
+    ]
+  );
+  const cancel = () => {
+    setCancelled(true);
+    setOpen(false);
+    onCancel == null ? void 0 : onCancel();
+  };
+  const returnValue = {
+    state: {
+      selectionVariant,
+      selectedDate,
+      cancelled,
+      enableApply,
+      disabled: isDisabled,
+      readOnly: isReadOnly,
+      containerRef,
+      minDate,
+      maxDate,
+      locale,
+      timeZone
+    },
+    helpers: {
+      cancel,
+      setEnableApply
+    }
+  };
+  if (props.selectionVariant === "range") {
+    return {
+      ...returnValue,
+      helpers: {
+        ...returnValue.helpers,
+        apply: applyRange,
+        setSelectedDate: setSelectedRangeDate
+      }
+    };
+  }
+  return {
+    ...returnValue,
+    helpers: {
+      ...returnValue.helpers,
+      apply: applySingle,
+      setSelectedDate: setSelectedSingleDate
+    }
+  };
+}
+
+exports.useDatePicker = useDatePicker;
+//# sourceMappingURL=useDatePicker.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useDatePicker.js","sources":["../src/date-picker/useDatePicker.ts"],"sourcesContent":["import {\n  CalendarDate,\n  type DateValue,\n  endOfMonth,\n  getLocalTimeZone,\n  startOfMonth,\n} from \"@internationalized/date\";\nimport { useControlled, useForkRef, useFormFieldProps } from \"@salt-ds/core\";\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport {\n  CALENDAR_MAX_YEAR,\n  CALENDAR_MIN_YEAR,\n  type DateRangeSelection,\n  type SingleDateSelection,\n  getCurrentLocale,\n} from \"../calendar\";\nimport type {\n  RangeDatePickerError,\n  RangeDatePickerState,\n  SingleDatePickerError,\n  SingleDatePickerState,\n} from \"./DatePickerContext\";\nimport { useDatePickerOverlay } from \"./DatePickerOverlayProvider\";\n\ninterface UseDatePickerBaseProps<T> {\n  /** If `true`, the component is disabled. */\n  disabled?: boolean;\n  /** If `true`, the component is read-only. */\n  readOnly?: boolean;\n  /**\n   * The selected date. The selected date will be controlled when this prop is provided.\n   */\n  selectedDate?: T | null;\n  /**\n   * The initial selected date, when the selected date is uncontrolled.\n   */\n  defaultSelectedDate?: UseDatePickerBaseProps<T>[\"selectedDate\"];\n  /**\n   * The minimum date for the range, default is 1900.\n   */\n  minDate?: DateValue;\n  /**\n   * The maximum date for the range, default is 2100.\n   */\n  maxDate?: DateValue;\n  /**\n   * Handler for when the date selection is cancelled.\n   */\n  onCancel?: () => void;\n  /**\n   * Time zone of the date selection, defaults to the current time zone of the user.\n   */\n  timeZone?: string;\n  /**\n   * Locale of the date selection, defaults to the current locale of the user.\n   */\n  locale?: string;\n}\n\n/**\n * Props for single date selection.\n *\n * @typedef {UseDatePickerBaseProps<SingleDateSelection>} UseDatePickerSingleProps\n * @property {\"single\"} selectionVariant - Single date selection.\n * @property {(selectedSingleDate: SingleDateSelection | null, singleError: string | false) => void} [onSelectedDateChange] - Handler called when the selected date changes.\n * @property {(appliedSingleDate: SingleDateSelection | null, singleError: string | false) => void} [onApply] - Handler called when the selected date is confirmed/applied.\n */\nexport interface UseDatePickerSingleProps\n  extends UseDatePickerBaseProps<SingleDateSelection> {\n  /**\n   * Single date selection.\n   */\n  selectionVariant: \"single\";\n  /**\n   * Handler called when the selected date changes.\n   * @param {SingleDateSelection | null} selectedSingleDate - The selected date.\n   * @param {string | false} singleError - Error returned by the parser or `false`.\n   */\n  onSelectedDateChange?: (\n    selectedSingleDate: SingleDateSelection | null,\n    singleError: string | false,\n  ) => void;\n  /**\n   * Handler called when the selected date is confirmed/applied.\n   * @param {SingleDateSelection | null} appliedSingleDate - The selected date.\n   * @param {string | false} singleError - Error returned by the parser or `false`.\n   */\n  onApply?: (\n    appliedSingleDate: SingleDateSelection | null,\n    singleError: string | false,\n  ) => void;\n}\n\n/**\n * Props for date range selection.\n *\n * @typedef {UseDatePickerBaseProps<DateRangeSelection>} UseDatePickerRangeProps\n * @property {\"range\"} selectionVariant - Date range selection.\n * @property {(selectedRangeDate: DateRangeSelection | null, rangeError: { startDate: string | false; endDate: string | false }) => void} [onSelectedDateChange] - Handler called when the selected date changes.\n * @property {(appliedRangeDate: DateRangeSelection | null, rangeError: { startDate: string | false; endDate: string | false }) => void} [onApply] - Handler called when the selected date is confirmed/applied.\n */\nexport interface UseDatePickerRangeProps\n  extends UseDatePickerBaseProps<DateRangeSelection> {\n  /**\n   * Date range selection.\n   */\n  selectionVariant: \"range\";\n  /**\n   * Handler called when the selected date changes.\n   * @param {DateRangeSelection | null} selectedRangeDate - The selected date.\n   * @param {{ startDate: string | false; endDate: string | false }} rangeError - Error returned by the parser or `false`.\n   */\n  onSelectedDateChange?: (\n    selectedRangeDate: DateRangeSelection | null,\n    rangeError: { startDate: string | false; endDate: string | false },\n  ) => void;\n  /**\n   * Handler called when the selected date is confirmed/applied.\n   * @param {DateRangeSelection | null} appliedRangeDate - The selected date.\n   * @param {{ startDate: string | false; endDate: string | false }} rangeError - Error returned by the parser or `false`.\n   */\n  onApply?: (\n    appliedRangeDate: DateRangeSelection | null,\n    rangeError: { startDate: string | false; endDate: string | false },\n  ) => void;\n}\n\n/**\n * Props for the useDatePicker hook.\n *\n * @template SelectionVariant\n * @typedef {SelectionVariant extends \"single\" ? UseDatePickerSingleProps : SelectionVariant extends \"range\" ? UseDatePickerRangeProps : never} UseDatePickerProps\n */\nexport type UseDatePickerProps<SelectionVariant> =\n  SelectionVariant extends \"single\"\n    ? UseDatePickerSingleProps\n    : SelectionVariant extends \"range\"\n      ? UseDatePickerRangeProps\n      : never;\n\n/**\n * Custom hook for managing date picker state.\n *\n * @template SelectionVariant\n * @param {UseDatePickerProps<SelectionVariant>} props - The props for the date picker.\n * @param {React.ForwardedRef<HTMLDivElement>} ref - The ref for the date picker container.\n * @returns {DatePickerState<SelectionVariant extends \"single\" ? SingleDateSelection : DateRangeSelection>} The date picker state and helpers.\n */\nexport function useDatePicker<SelectionVariant extends \"single\" | \"range\">(\n  props: UseDatePickerProps<SelectionVariant>,\n  ref: React.ForwardedRef<HTMLDivElement>,\n): SingleDatePickerState | RangeDatePickerState {\n  const {\n    readOnly = false,\n    disabled,\n    selectionVariant,\n    defaultSelectedDate = null,\n    selectedDate: selectedDateProp,\n    onSelectedDateChange,\n    onApply,\n    minDate: minDateProp,\n    maxDate: maxDateProp,\n    timeZone = getLocalTimeZone(),\n    locale = getCurrentLocale(),\n    onCancel,\n  } = props;\n\n  const minDate: DateValue = useMemo(\n    () =>\n      minDateProp ?? startOfMonth(new CalendarDate(CALENDAR_MIN_YEAR, 1, 1)),\n    [minDateProp],\n  );\n  const maxDate: DateValue = useMemo(\n    () => maxDateProp ?? endOfMonth(new CalendarDate(CALENDAR_MAX_YEAR, 1, 1)),\n    [maxDateProp],\n  );\n\n  const datePickerRef = useRef<HTMLDivElement>(null);\n  const containerRef = useForkRef(ref, datePickerRef);\n\n  const {\n    state: { open },\n    helpers: { setOpen },\n  } = useDatePickerOverlay();\n\n  const [selectedDate, setSelectedDate] = useControlled({\n    controlled: selectedDateProp,\n    default: defaultSelectedDate,\n    name: \"DatePicker\",\n    state: \"selectedDate\",\n  });\n\n  const [enableApply, setEnableApply] = useState<boolean>(false);\n  const [cancelled, setCancelled] = useState<boolean>(false);\n\n  useEffect(() => {\n    if (open) {\n      setCancelled(false);\n    }\n  }, [open]);\n\n  const { disabled: formFieldDisabled, readOnly: formFieldReadOnly } =\n    useFormFieldProps();\n  const isReadOnly = readOnly || formFieldReadOnly || false;\n  const isDisabled = disabled || formFieldDisabled || false;\n\n  const applySingle = (\n    appliedDate: SingleDateSelection | null,\n    error: SingleDatePickerError,\n  ): void => {\n    setCancelled(false);\n    setOpen(false);\n    if (selectionVariant === \"single\") {\n      onApply?.(appliedDate, error);\n    }\n  };\n\n  const setSelectedSingleDate = useCallback(\n    (selection: SingleDateSelection | null, error: SingleDatePickerError) => {\n      let nextDate: typeof selection;\n      let nextError = error;\n      if (error || !selection) {\n        nextDate = selection;\n      } else {\n        let dateAfterMinDate = true;\n        let dateBeforeMaxDate = true;\n        if (minDate && selection) {\n          dateAfterMinDate = selection.compare(minDate) >= 0;\n        }\n        if (maxDate && selection) {\n          dateBeforeMaxDate = selection.compare(maxDate) <= 0;\n        }\n        nextDate = dateAfterMinDate && dateBeforeMaxDate ? selection : null;\n        nextError = !dateAfterMinDate ? \"is before min date\" : nextError;\n        nextError = !dateBeforeMaxDate ? \"is after max date\" : nextError;\n      }\n      setSelectedDate(nextDate);\n      if (selectionVariant === \"single\") {\n        onSelectedDateChange?.(nextDate, error);\n      }\n\n      if (!enableApply) {\n        setOpen(false);\n      }\n    },\n    [\n      enableApply,\n      minDate,\n      maxDate,\n      onSelectedDateChange,\n      selectionVariant,\n      setSelectedDate,\n      setOpen,\n    ],\n  );\n\n  const applyRange = (\n    appliedDate: DateRangeSelection | null,\n    error: RangeDatePickerError,\n  ): void => {\n    setCancelled(false);\n    if (appliedDate?.startDate && appliedDate?.endDate) {\n      setOpen(false);\n    }\n    if (selectionVariant === \"range\") {\n      onApply?.(appliedDate, error);\n    }\n  };\n\n  const setSelectedRangeDate = useCallback(\n    (selection: DateRangeSelection | null, error: RangeDatePickerError) => {\n      let nextDate: typeof selection;\n      let nextError = { ...error };\n      let startDateInRange = true;\n      let endDateInRange = true;\n      if (error?.startDate || error?.endDate || !selection) {\n        nextDate = selection;\n      } else {\n        if (maxDate && selection?.startDate) {\n          startDateInRange = selection.startDate.compare(minDate) >= 0;\n        }\n        if (maxDate && selection?.endDate) {\n          endDateInRange =\n            selection?.endDate && selection.endDate.compare(maxDate) <= 0;\n        }\n        if (!startDateInRange && !endDateInRange) {\n          nextDate = null;\n          nextError = {\n            startDate: \"is before min date\",\n            endDate: \"is after max date\",\n          };\n        } else {\n          nextDate = {\n            startDate: selection.startDate || null,\n            endDate: selection.endDate || null,\n          };\n          nextError = {\n            startDate: !startDateInRange\n              ? \"is before min date\"\n              : nextError.startDate,\n            endDate: !endDateInRange ? \"is after max date\" : nextError.endDate,\n          };\n        }\n      }\n      setSelectedDate(nextDate);\n      if (selectionVariant === \"range\") {\n        onSelectedDateChange?.(nextDate, nextError);\n      }\n      if (!enableApply && nextDate?.startDate && nextDate?.endDate) {\n        setOpen(false);\n      }\n    },\n    [\n      enableApply,\n      minDate,\n      maxDate,\n      onSelectedDateChange,\n      selectionVariant,\n      setSelectedDate,\n      setOpen,\n    ],\n  );\n\n  const cancel = () => {\n    setCancelled(true);\n    setOpen(false);\n    onCancel?.();\n  };\n\n  const returnValue = {\n    state: {\n      selectionVariant,\n      selectedDate,\n      cancelled,\n      enableApply,\n      disabled: isDisabled,\n      readOnly: isReadOnly,\n      containerRef,\n      minDate,\n      maxDate,\n      locale,\n      timeZone,\n    },\n    helpers: {\n      cancel,\n      setEnableApply,\n    },\n  };\n  if (props.selectionVariant === \"range\") {\n    return {\n      ...returnValue,\n      helpers: {\n        ...returnValue.helpers,\n        apply: applyRange,\n        setSelectedDate: setSelectedRangeDate,\n      },\n    } as RangeDatePickerState;\n  }\n  return {\n    ...returnValue,\n    helpers: {\n      ...returnValue.helpers,\n      apply: applySingle,\n      setSelectedDate: setSelectedSingleDate,\n    },\n  } as SingleDatePickerState;\n}\n"],"names":["getLocalTimeZone","getCurrentLocale","useMemo","startOfMonth","CalendarDate","CALENDAR_MIN_YEAR","endOfMonth","CALENDAR_MAX_YEAR","useRef","useForkRef","useDatePickerOverlay","useControlled","useState","useEffect","useFormFieldProps","useCallback"],"mappings":"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"}

package/dist-cjs/dropdown/DropdownButton.js

@@ -15,7 +15,7 @@ var DropdownButton$1 = require('./DropdownButton.css.js');
 
 const withBaseName = core.makePrefixer("saltDropdownButton");
 const DropdownButton = react.forwardRef(function DropdownButton2({
-  IconComponent = icons.ChevronDownIcon,
+  IconComponent,
   ariaHideOptionRole,
   className,
   disabled,
@@ -35,6 +35,8 @@ const DropdownButton = react.forwardRef(function DropdownButton2({
     css: DropdownButton$1,
     window: targetWindow
   });
+  const { ExpandIcon } = core.useIcon();
+  const Icon = IconComponent === void 0 ? ExpandIcon : IconComponent;
   const { inFormField } = useFormFieldLegacyProps.useFormFieldLegacyProps();
   return /* @__PURE__ */ jsxRuntime.jsx(core.Button, {
     className: clsx.clsx(
@@ -61,7 +63,7 @@ const DropdownButton = react.forwardRef(function DropdownButton2({
           role: "option",
           children: label
         }),
-        /* @__PURE__ */ jsxRuntime.jsx(IconComponent, {
+        /* @__PURE__ */ jsxRuntime.jsx(Icon, {
           className: withBaseName("icon"),
           size: iconSize,
           "aria-label": null,

package/dist-cjs/dropdown/DropdownButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownButton.js","sources":["../src/dropdown/DropdownButton.tsx"],"sourcesContent":["import { Button, type ButtonProps, makePrefixer } from \"@salt-ds/core\";\nimport {\n  ChevronDownIcon,\n  DEFAULT_ICON_SIZE,\n  type IconProps,\n} from \"@salt-ds/icons\";\nimport { clsx } from \"clsx\";\nimport {\n  type AriaAttributes,\n  type ComponentType,\n  type ForwardedRef,\n  forwardRef,\n} from \"react\";\nimport { useFormFieldLegacyProps } from \"../form-field-context-legacy\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport dropdownButtonCss from \"./DropdownButton.css\";\n\nexport interface DropdownButtonProps extends ButtonProps {\n  /**\n   * Replace the default Icon component\n   */\n  IconComponent?: ComponentType<any>;\n  /**\n   * Whether the dropdown button should hide role='option' via 'aria-hidden'\n   */\n  ariaHideOptionRole?: boolean;\n  /**\n   * If, `true`, the Dropdown button will occupy the full width of it's container\n   */\n  fullWidth?: boolean;\n  /**\n   * Sets the size of the down arrow icon. If this is not specified, a default size based on density is used.\n   */\n  iconSize?: IconProps[\"size\"];\n  /**\n   * Is the dropdown list open\n   */\n  isOpen?: boolean;\n  /**\n   * Label for the dropdown button\n   */\n  label?: string;\n  /**\n   * Id for the label. This is needed for ARIA attributes.\n   */\n  labelId?: string;\n  /**\n   * When the dropdown is collapsed this value is set as aria-posinset on the span containing the selected value\n   * **/\n  posInSet?: number;\n  /**\n   * When the dropdown is collapsed this value is set as aria-setsize on the span containing the selected value\n   * **/\n  setSize?: number;\n  /**\n   *\n   * **/\n  labelAriaAttributes?: Pick<\n    AriaAttributes,\n    \"aria-posinset\" | \"aria-setsize\" | \"aria-selected\"\n  >;\n}\n\nconst withBaseName = makePrefixer(\"saltDropdownButton\");\n\nexport const DropdownButton = forwardRef(function DropdownButton(\n  {\n    IconComponent = ChevronDownIcon,\n    ariaHideOptionRole,\n    className,\n    disabled,\n    iconSize = DEFAULT_ICON_SIZE,\n    isOpen,\n    label,\n    labelId,\n    fullWidth,\n    posInSet,\n    setSize,\n    labelAriaAttributes,\n    ...rest\n  }: DropdownButtonProps,\n  ref: ForwardedRef<HTMLButtonElement>,\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-dropdown-button\",\n    css: dropdownButtonCss,\n    window: targetWindow,\n  });\n\n  const { inFormField } = useFormFieldLegacyProps();\n  // FIXME: use polymorphic button\n  // We don't want the 'button' tag to be shown in the DOM to trigger some accessibility testing\n  // tool's false alarm on role of 'listbox'\n  return (\n    <Button\n      className={clsx(\n        withBaseName(),\n        {\n          [withBaseName(\"fullwidth\")]: fullWidth,\n          [withBaseName(\"formField\")]: inFormField,\n        },\n        className,\n      )}\n      data-testid=\"dropdown-button\"\n      disabled={disabled}\n      variant=\"secondary\"\n      {...rest}\n      ref={ref}\n    >\n      <div className={withBaseName(\"content\")}>\n        <span\n          // 'hidden' so that screen reader won't be confused the additional 'option' which is just a label\n          aria-hidden={ariaHideOptionRole ? \"true\" : undefined}\n          {...labelAriaAttributes}\n          className={withBaseName(\"buttonLabel\")}\n          id={labelId}\n          // 'option' role here is to suppress accessibility testing tool warning about 'listbox' missing children role.\n          role=\"option\"\n        >\n          {label}\n        </span>\n        <IconComponent\n          className={withBaseName(\"icon\")}\n          size={iconSize}\n          aria-label={null}\n          aria-hidden=\"true\"\n        />\n      </div>\n    </Button>\n  );\n});\n"],"names":["makePrefixer","forwardRef","DropdownButton","ChevronDownIcon","DEFAULT_ICON_SIZE","useWindow","useComponentCssInjection","dropdownButtonCss","useFormFieldLegacyProps","jsx","Button","clsx","jsxs"],"mappings":";;;;;;;;;;;;;;;AAkEA,MAAM,YAAA,GAAeA,kBAAa,oBAAoB,CAAA,CAAA;AAEzC,MAAA,cAAA,GAAiBC,gBAAW,CAAA,SAASC,eAChD,CAAA;AAAA,EACE,aAAgB,GAAAC,qBAAA;AAAA,EAChB,kBAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAW,GAAAC,uBAAA;AAAA,EACX,MAAA;AAAA,EACA,KAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAA;AAAA,EACA,mBAAA;AAAA,EACG,GAAA,IAAA;AACL,CAAA,EACA,GACA,EAAA;AACA,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,sBAAA;AAAA,IACR,GAAK,EAAAC,gBAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,EAAE,WAAY,EAAA,GAAIC,+CAAwB,EAAA,CAAA;AAIhD,EAAA,uBACGC,cAAA,CAAAC,WAAA,EAAA;AAAA,IACC,SAAW,EAAAC,SAAA;AAAA,MACT,YAAa,EAAA;AAAA,MACb;AAAA,QACE,CAAC,YAAa,CAAA,WAAW,CAAI,GAAA,SAAA;AAAA,QAC7B,CAAC,YAAa,CAAA,WAAW,CAAI,GAAA,WAAA;AAAA,OAC/B;AAAA,MACA,SAAA;AAAA,KACF;AAAA,IACA,aAAY,EAAA,iBAAA;AAAA,IACZ,QAAA;AAAA,IACA,OAAQ,EAAA,WAAA;AAAA,IACP,GAAG,IAAA;AAAA,IACJ,GAAA;AAAA,IAEA,QAAC,kBAAAC,eAAA,CAAA,KAAA,EAAA;AAAA,MAAI,SAAA,EAAW,aAAa,SAAS,CAAA;AAAA,MACpC,QAAA,EAAA;AAAA,wBAACH,cAAA,CAAA,MAAA,EAAA;AAAA,UAEC,aAAA,EAAa,qBAAqB,MAAS,GAAA,KAAA,CAAA;AAAA,UAC1C,GAAG,mBAAA;AAAA,UACJ,SAAA,EAAW,aAAa,aAAa,CAAA;AAAA,UACrC,EAAI,EAAA,OAAA;AAAA,UAEJ,IAAK,EAAA,QAAA;AAAA,UAEJ,QAAA,EAAA,KAAA;AAAA,SACH,CAAA;AAAA,wBACCA,cAAA,CAAA,aAAA,EAAA;AAAA,UACC,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,UAC9B,IAAM,EAAA,QAAA;AAAA,UACN,YAAY,EAAA,IAAA;AAAA,UACZ,aAAY,EAAA,MAAA;AAAA,SACd,CAAA;AAAA,OAAA;AAAA,KACF,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"DropdownButton.js","sources":["../src/dropdown/DropdownButton.tsx"],"sourcesContent":["import { Button, type ButtonProps, makePrefixer, useIcon } from \"@salt-ds/core\";\nimport { DEFAULT_ICON_SIZE, type IconProps } from \"@salt-ds/icons\";\nimport { clsx } from \"clsx\";\nimport {\n  type AriaAttributes,\n  type ComponentType,\n  type ForwardedRef,\n  forwardRef,\n} from \"react\";\nimport { useFormFieldLegacyProps } from \"../form-field-context-legacy\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport dropdownButtonCss from \"./DropdownButton.css\";\n\nexport interface DropdownButtonProps extends ButtonProps {\n  /**\n   * Replace the default Icon component\n   */\n  IconComponent?: ComponentType<any>;\n  /**\n   * Whether the dropdown button should hide role='option' via 'aria-hidden'\n   */\n  ariaHideOptionRole?: boolean;\n  /**\n   * If, `true`, the Dropdown button will occupy the full width of it's container\n   */\n  fullWidth?: boolean;\n  /**\n   * Sets the size of the down arrow icon. If this is not specified, a default size based on density is used.\n   */\n  iconSize?: IconProps[\"size\"];\n  /**\n   * Is the dropdown list open\n   */\n  isOpen?: boolean;\n  /**\n   * Label for the dropdown button\n   */\n  label?: string;\n  /**\n   * Id for the label. This is needed for ARIA attributes.\n   */\n  labelId?: string;\n  /**\n   * When the dropdown is collapsed this value is set as aria-posinset on the span containing the selected value\n   * **/\n  posInSet?: number;\n  /**\n   * When the dropdown is collapsed this value is set as aria-setsize on the span containing the selected value\n   * **/\n  setSize?: number;\n  /**\n   *\n   * **/\n  labelAriaAttributes?: Pick<\n    AriaAttributes,\n    \"aria-posinset\" | \"aria-setsize\" | \"aria-selected\"\n  >;\n}\n\nconst withBaseName = makePrefixer(\"saltDropdownButton\");\n\nexport const DropdownButton = forwardRef(function DropdownButton(\n  {\n    IconComponent,\n    ariaHideOptionRole,\n    className,\n    disabled,\n    iconSize = DEFAULT_ICON_SIZE,\n    isOpen,\n    label,\n    labelId,\n    fullWidth,\n    posInSet,\n    setSize,\n    labelAriaAttributes,\n    ...rest\n  }: DropdownButtonProps,\n  ref: ForwardedRef<HTMLButtonElement>,\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-dropdown-button\",\n    css: dropdownButtonCss,\n    window: targetWindow,\n  });\n  const { ExpandIcon } = useIcon();\n  const Icon = IconComponent === undefined ? ExpandIcon : IconComponent;\n  const { inFormField } = useFormFieldLegacyProps();\n  // FIXME: use polymorphic button\n  // We don't want the 'button' tag to be shown in the DOM to trigger some accessibility testing\n  // tool's false alarm on role of 'listbox'\n  return (\n    <Button\n      className={clsx(\n        withBaseName(),\n        {\n          [withBaseName(\"fullwidth\")]: fullWidth,\n          [withBaseName(\"formField\")]: inFormField,\n        },\n        className,\n      )}\n      data-testid=\"dropdown-button\"\n      disabled={disabled}\n      variant=\"secondary\"\n      {...rest}\n      ref={ref}\n    >\n      <div className={withBaseName(\"content\")}>\n        <span\n          // 'hidden' so that screen reader won't be confused the additional 'option' which is just a label\n          aria-hidden={ariaHideOptionRole ? \"true\" : undefined}\n          {...labelAriaAttributes}\n          className={withBaseName(\"buttonLabel\")}\n          id={labelId}\n          // 'option' role here is to suppress accessibility testing tool warning about 'listbox' missing children role.\n          role=\"option\"\n        >\n          {label}\n        </span>\n        <Icon\n          className={withBaseName(\"icon\")}\n          size={iconSize}\n          aria-label={null}\n          aria-hidden=\"true\"\n        />\n      </div>\n    </Button>\n  );\n});\n"],"names":["makePrefixer","forwardRef","DropdownButton","DEFAULT_ICON_SIZE","useWindow","useComponentCssInjection","dropdownButtonCss","useIcon","useFormFieldLegacyProps","jsx","Button","clsx","jsxs"],"mappings":";;;;;;;;;;;;;;;AA8DA,MAAM,YAAA,GAAeA,kBAAa,oBAAoB,CAAA,CAAA;AAEzC,MAAA,cAAA,GAAiBC,gBAAW,CAAA,SAASC,eAChD,CAAA;AAAA,EACE,aAAA;AAAA,EACA,kBAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAW,GAAAC,uBAAA;AAAA,EACX,MAAA;AAAA,EACA,KAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAA;AAAA,EACA,mBAAA;AAAA,EACG,GAAA,IAAA;AACL,CAAA,EACA,GACA,EAAA;AACA,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,sBAAA;AAAA,IACR,GAAK,EAAAC,gBAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AACD,EAAM,MAAA,EAAE,UAAW,EAAA,GAAIC,YAAQ,EAAA,CAAA;AAC/B,EAAM,MAAA,IAAA,GAAO,aAAkB,KAAA,KAAA,CAAA,GAAY,UAAa,GAAA,aAAA,CAAA;AACxD,EAAM,MAAA,EAAE,WAAY,EAAA,GAAIC,+CAAwB,EAAA,CAAA;AAIhD,EAAA,uBACGC,cAAA,CAAAC,WAAA,EAAA;AAAA,IACC,SAAW,EAAAC,SAAA;AAAA,MACT,YAAa,EAAA;AAAA,MACb;AAAA,QACE,CAAC,YAAa,CAAA,WAAW,CAAI,GAAA,SAAA;AAAA,QAC7B,CAAC,YAAa,CAAA,WAAW,CAAI,GAAA,WAAA;AAAA,OAC/B;AAAA,MACA,SAAA;AAAA,KACF;AAAA,IACA,aAAY,EAAA,iBAAA;AAAA,IACZ,QAAA;AAAA,IACA,OAAQ,EAAA,WAAA;AAAA,IACP,GAAG,IAAA;AAAA,IACJ,GAAA;AAAA,IAEA,QAAC,kBAAAC,eAAA,CAAA,KAAA,EAAA;AAAA,MAAI,SAAA,EAAW,aAAa,SAAS,CAAA;AAAA,MACpC,QAAA,EAAA;AAAA,wBAACH,cAAA,CAAA,MAAA,EAAA;AAAA,UAEC,aAAA,EAAa,qBAAqB,MAAS,GAAA,KAAA,CAAA;AAAA,UAC1C,GAAG,mBAAA;AAAA,UACJ,SAAA,EAAW,aAAa,aAAa,CAAA;AAAA,UACrC,EAAI,EAAA,OAAA;AAAA,UAEJ,IAAK,EAAA,QAAA;AAAA,UAEJ,QAAA,EAAA,KAAA;AAAA,SACH,CAAA;AAAA,wBACCA,cAAA,CAAA,IAAA,EAAA;AAAA,UACC,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,UAC9B,IAAM,EAAA,QAAA;AAAA,UACN,YAAY,EAAA,IAAA;AAAA,UACZ,aAAY,EAAA,MAAA;AAAA,SACd,CAAA;AAAA,OAAA;AAAA,KACF,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist-cjs/dropdown/useDropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"useDropdown.js","sources":["../src/dropdown/useDropdown.ts"],"sourcesContent":["import { useControlled } from \"@salt-ds/core\";\nimport { useCallback, useMemo } from \"react\";\nimport {\n  type CollectionItem,\n  type SelectHandler,\n  type SelectionChangeHandler,\n  type SelectionStrategy,\n  itemToString as defaultItemToString,\n} from \"../common-hooks\";\nimport { type ListHookProps, type ListHookResult, useList } from \"../list\";\nimport type { DropdownHookProps, DropdownHookResult } from \"./dropdownTypes\";\n\nconst NULL_REF = { current: null };\n\nexport interface DropdownListHookProps<Item, Strategy extends SelectionStrategy>\n  extends Partial<Omit<DropdownHookProps, \"onKeyDown\">>,\n    Omit<ListHookProps<Item, Strategy>, \"containerRef\"> {\n  itemToString?: (item: Item) => string;\n}\n\nexport interface DropdownListHookResult<\n  Item,\n  Selection extends SelectionStrategy,\n> extends Partial<ListHookResult<Item, Selection>>,\n    Partial<DropdownHookResult> {\n  onOpenChange: any;\n  triggerLabel?: string;\n}\n\nexport const useDropdown = <\n  Item,\n  Selection extends SelectionStrategy = \"default\",\n>({\n  collectionHook,\n  defaultHighlightedIndex: defaultHighlightedIndexProp,\n  defaultIsOpen,\n  defaultSelected,\n  highlightedIndex: highlightedIndexProp,\n  isOpen: isOpenProp,\n  itemToString = defaultItemToString,\n  onHighlight,\n  onOpenChange,\n  onSelectionChange,\n  onSelect,\n  selected,\n  selectionStrategy,\n}: DropdownListHookProps<Item, Selection>): DropdownListHookResult<\n  Item,\n  Selection\n> => {\n  const isMultiSelect =\n    selectionStrategy === \"multiple\" || selectionStrategy === \"extended\";\n\n  const [isOpen, setIsOpen] = useControlled<boolean>({\n    controlled: isOpenProp,\n    default: defaultIsOpen ?? false,\n    name: \"useDropdownList\",\n  });\n\n  const handleSelectionChange = useCallback<\n    SelectionChangeHandler<Item, Selection>\n  >(\n    (evt, selected) => {\n      if (!isMultiSelect) {\n        setIsOpen(false);\n        onOpenChange?.(false);\n      }\n      onSelectionChange?.(evt, selected);\n    },\n    [isMultiSelect, onOpenChange, onSelectionChange],\n  );\n\n  const handleSelect = useCallback<SelectHandler<Item>>(\n    (evt, selected) => {\n      if (!isMultiSelect) {\n        setIsOpen(false);\n        onOpenChange?.(false);\n      }\n      onSelect?.(evt, selected);\n    },\n    [isMultiSelect, onOpenChange, onSelect],\n  );\n\n  const listHook = useList<Item, Selection>({\n    collectionHook,\n    defaultHighlightedIndex:\n      defaultHighlightedIndexProp ?? highlightedIndexProp === undefined\n        ? 0\n        : undefined,\n    defaultSelected,\n    label: \"useDropDownList\",\n    onSelectionChange: handleSelectionChange,\n    onSelect: handleSelect,\n    containerRef: NULL_REF,\n    highlightedIndex: highlightedIndexProp,\n    onHighlight,\n    selected,\n    selectionStrategy,\n    tabToSelect: !isMultiSelect,\n  });\n\n  const handleOpenChange = useCallback(\n    (open: boolean) => {\n      setIsOpen(open);\n      onOpenChange?.(open);\n    },\n    [onOpenChange],\n  );\n\n  const triggerLabel = useMemo(() => {\n    if (isMultiSelect && Array.isArray(listHook.selected)) {\n      const selectedItems = listHook.selected as CollectionItem<Item>[];\n      if (selectedItems.length === 0) {\n        return undefined;\n      }\n      if (selectedItems.length === 1) {\n        const { value } = selectedItems[0];\n        return value === null ? undefined : itemToString(value);\n      }\n      return `${selectedItems.length} items selected`;\n    }\n    const selectedItem = listHook.selected as CollectionItem<Item>;\n    return selectedItem == null || selectedItem.value === null\n      ? undefined\n      : itemToString(selectedItem.value);\n  }, [isMultiSelect, itemToString, listHook.selected]);\n\n  return {\n    isOpen,\n    onOpenChange: handleOpenChange,\n    triggerLabel,\n    ...listHook,\n  };\n};\n"],"names":["itemToString","defaultItemToString","useControlled","useCallback","selected","useList","useMemo"],"mappings":"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"}
+{"version":3,"file":"useDropdown.js","sources":["../src/dropdown/useDropdown.ts"],"sourcesContent":["import { useControlled } from \"@salt-ds/core\";\nimport { useCallback, useMemo } from \"react\";\nimport {\n  type CollectionItem,\n  type SelectHandler,\n  type SelectionChangeHandler,\n  type SelectionStrategy,\n  itemToString as defaultItemToString,\n} from \"../common-hooks\";\nimport { type ListHookProps, type ListHookResult, useList } from \"../list\";\nimport type { DropdownHookProps, DropdownHookResult } from \"./dropdownTypes\";\n\nconst NULL_REF = { current: null };\n\nexport interface DropdownListHookProps<Item, Strategy extends SelectionStrategy>\n  extends Partial<Omit<DropdownHookProps, \"onKeyDown\">>,\n    Omit<ListHookProps<Item, Strategy>, \"containerRef\"> {\n  itemToString?: (item: Item) => string;\n}\n\nexport interface DropdownListHookResult<\n  Item,\n  Selection extends SelectionStrategy,\n> extends Partial<ListHookResult<Item, Selection>>,\n    Partial<DropdownHookResult> {\n  onOpenChange: any;\n  triggerLabel?: string;\n}\n\nexport const useDropdown = <\n  Item,\n  Selection extends SelectionStrategy = \"default\",\n>({\n  collectionHook,\n  defaultHighlightedIndex: defaultHighlightedIndexProp,\n  defaultIsOpen,\n  defaultSelected,\n  highlightedIndex: highlightedIndexProp,\n  isOpen: isOpenProp,\n  itemToString = defaultItemToString,\n  onHighlight,\n  onOpenChange,\n  onSelectionChange,\n  onSelect,\n  selected,\n  selectionStrategy,\n}: DropdownListHookProps<Item, Selection>): DropdownListHookResult<\n  Item,\n  Selection\n> => {\n  const isMultiSelect =\n    selectionStrategy === \"multiple\" || selectionStrategy === \"extended\";\n\n  const [isOpen, setIsOpen] = useControlled<boolean>({\n    controlled: isOpenProp,\n    default: defaultIsOpen ?? false,\n    name: \"useDropdownList\",\n  });\n\n  const handleSelectionChange = useCallback<\n    SelectionChangeHandler<Item, Selection>\n  >(\n    (evt, selected) => {\n      if (!isMultiSelect) {\n        setIsOpen(false);\n        onOpenChange?.(false);\n      }\n      onSelectionChange?.(evt, selected);\n    },\n    [isMultiSelect, onOpenChange, onSelectionChange],\n  );\n\n  const handleSelect = useCallback<SelectHandler<Item>>(\n    (evt, selected) => {\n      if (!isMultiSelect) {\n        setIsOpen(false);\n        onOpenChange?.(false);\n      }\n      onSelect?.(evt, selected);\n    },\n    [isMultiSelect, onOpenChange, onSelect],\n  );\n\n  const listHook = useList<Item, Selection>({\n    collectionHook,\n    defaultHighlightedIndex:\n      (defaultHighlightedIndexProp ?? highlightedIndexProp === undefined)\n        ? 0\n        : undefined,\n    defaultSelected,\n    label: \"useDropDownList\",\n    onSelectionChange: handleSelectionChange,\n    onSelect: handleSelect,\n    containerRef: NULL_REF,\n    highlightedIndex: highlightedIndexProp,\n    onHighlight,\n    selected,\n    selectionStrategy,\n    tabToSelect: !isMultiSelect,\n  });\n\n  const handleOpenChange = useCallback(\n    (open: boolean) => {\n      setIsOpen(open);\n      onOpenChange?.(open);\n    },\n    [onOpenChange],\n  );\n\n  const triggerLabel = useMemo(() => {\n    if (isMultiSelect && Array.isArray(listHook.selected)) {\n      const selectedItems = listHook.selected as CollectionItem<Item>[];\n      if (selectedItems.length === 0) {\n        return undefined;\n      }\n      if (selectedItems.length === 1) {\n        const { value } = selectedItems[0];\n        return value === null ? undefined : itemToString(value);\n      }\n      return `${selectedItems.length} items selected`;\n    }\n    const selectedItem = listHook.selected as CollectionItem<Item>;\n    return selectedItem == null || selectedItem.value === null\n      ? undefined\n      : itemToString(selectedItem.value);\n  }, [isMultiSelect, itemToString, listHook.selected]);\n\n  return {\n    isOpen,\n    onOpenChange: handleOpenChange,\n    triggerLabel,\n    ...listHook,\n  };\n};\n"],"names":["itemToString","defaultItemToString","useControlled","useCallback","selected","useList","useMemo"],"mappings":";;;;;;;;;;;;;;;;;AAYA,MAAM,QAAA,GAAW,EAAE,OAAA,EAAS,IAAK,EAAA,CAAA;AAiB1B,MAAM,cAAc,CAGzB;AAAA,EACA,cAAA;AAAA,EACA,uBAAyB,EAAA,2BAAA;AAAA,EACzB,aAAA;AAAA,EACA,eAAA;AAAA,EACA,gBAAkB,EAAA,oBAAA;AAAA,EAClB,MAAQ,EAAA,UAAA;AAAA,gBACRA,cAAe,GAAAC,yBAAA;AAAA,EACf,WAAA;AAAA,EACA,YAAA;AAAA,EACA,iBAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,iBAAA;AACF,CAGK,KAAA;AACH,EAAM,MAAA,aAAA,GACJ,iBAAsB,KAAA,UAAA,IAAc,iBAAsB,KAAA,UAAA,CAAA;AAE5D,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,CAAA,GAAIC,kBAAuB,CAAA;AAAA,IACjD,UAAY,EAAA,UAAA;AAAA,IACZ,SAAS,aAAiB,IAAA,IAAA,GAAA,aAAA,GAAA,KAAA;AAAA,IAC1B,IAAM,EAAA,iBAAA;AAAA,GACP,CAAA,CAAA;AAED,EAAA,MAAM,qBAAwB,GAAAC,iBAAA;AAAA,IAG5B,CAAC,KAAKC,SAAa,KAAA;AACjB,MAAA,IAAI,CAAC,aAAe,EAAA;AAClB,QAAA,SAAA,CAAU,KAAK,CAAA,CAAA;AACf,QAAe,YAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,YAAA,CAAA,KAAA,CAAA,CAAA;AAAA,OACjB;AACA,MAAA,iBAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,iBAAA,CAAoB,GAAKA,EAAAA,SAAAA,CAAAA,CAAAA;AAAA,KAC3B;AAAA,IACA,CAAC,aAAe,EAAA,YAAA,EAAc,iBAAiB,CAAA;AAAA,GACjD,CAAA;AAEA,EAAA,MAAM,YAAe,GAAAD,iBAAA;AAAA,IACnB,CAAC,KAAKC,SAAa,KAAA;AACjB,MAAA,IAAI,CAAC,aAAe,EAAA;AAClB,QAAA,SAAA,CAAU,KAAK,CAAA,CAAA;AACf,QAAe,YAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,YAAA,CAAA,KAAA,CAAA,CAAA;AAAA,OACjB;AACA,MAAA,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAW,GAAKA,EAAAA,SAAAA,CAAAA,CAAAA;AAAA,KAClB;AAAA,IACA,CAAC,aAAe,EAAA,YAAA,EAAc,QAAQ,CAAA;AAAA,GACxC,CAAA;AAEA,EAAA,MAAM,WAAWC,eAAyB,CAAA;AAAA,IACxC,cAAA;AAAA,IACA,uBACG,EAAA,CAAA,2BAAA,IAAA,IAAA,GAAA,2BAAA,GAA+B,oBAAyB,KAAA,KAAA,CAAA,IACrD,CACA,GAAA,KAAA,CAAA;AAAA,IACN,eAAA;AAAA,IACA,KAAO,EAAA,iBAAA;AAAA,IACP,iBAAmB,EAAA,qBAAA;AAAA,IACnB,QAAU,EAAA,YAAA;AAAA,IACV,YAAc,EAAA,QAAA;AAAA,IACd,gBAAkB,EAAA,oBAAA;AAAA,IAClB,WAAA;AAAA,IACA,QAAA;AAAA,IACA,iBAAA;AAAA,IACA,aAAa,CAAC,aAAA;AAAA,GACf,CAAA,CAAA;AAED,EAAA,MAAM,gBAAmB,GAAAF,iBAAA;AAAA,IACvB,CAAC,IAAkB,KAAA;AACjB,MAAA,SAAA,CAAU,IAAI,CAAA,CAAA;AACd,MAAe,YAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,YAAA,CAAA,IAAA,CAAA,CAAA;AAAA,KACjB;AAAA,IACA,CAAC,YAAY,CAAA;AAAA,GACf,CAAA;AAEA,EAAM,MAAA,YAAA,GAAeG,cAAQ,MAAM;AACjC,IAAA,IAAI,aAAiB,IAAA,KAAA,CAAM,OAAQ,CAAA,QAAA,CAAS,QAAQ,CAAG,EAAA;AACrD,MAAA,MAAM,gBAAgB,QAAS,CAAA,QAAA,CAAA;AAC/B,MAAI,IAAA,aAAA,CAAc,WAAW,CAAG,EAAA;AAC9B,QAAO,OAAA,KAAA,CAAA,CAAA;AAAA,OACT;AACA,MAAI,IAAA,aAAA,CAAc,WAAW,CAAG,EAAA;AAC9B,QAAM,MAAA,EAAE,KAAM,EAAA,GAAI,aAAc,CAAA,CAAA,CAAA,CAAA;AAChC,QAAA,OAAO,KAAU,KAAA,IAAA,GAAO,KAAY,CAAA,GAAAN,cAAA,CAAa,KAAK,CAAA,CAAA;AAAA,OACxD;AACA,MAAA,OAAO,GAAG,aAAc,CAAA,MAAA,CAAA,eAAA,CAAA,CAAA;AAAA,KAC1B;AACA,IAAA,MAAM,eAAe,QAAS,CAAA,QAAA,CAAA;AAC9B,IAAO,OAAA,YAAA,IAAgB,QAAQ,YAAa,CAAA,KAAA,KAAU,OAClD,KACA,CAAA,GAAAA,cAAA,CAAa,aAAa,KAAK,CAAA,CAAA;AAAA,KAClC,CAAC,aAAA,EAAeA,cAAc,EAAA,QAAA,CAAS,QAAQ,CAAC,CAAA,CAAA;AAEnD,EAAO,OAAA;AAAA,IACL,MAAA;AAAA,IACA,YAAc,EAAA,gBAAA;AAAA,IACd,YAAA;AAAA,IACA,GAAG,QAAA;AAAA,GACL,CAAA;AACF;;;;"}