@salt-ds/lab 1.0.0-alpha.47 → 1.0.0-alpha.49

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

@@ -3,137 +3,153 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
+var date = require('@internationalized/date');
 var core = require('@salt-ds/core');
-var clsx = require('clsx');
-var DatePickerContext = require('./DatePickerContext.js');
-var DatePickerPanel$1 = require('./DatePickerPanel.css.js');
-var window = require('@salt-ds/window');
 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 date = require('@internationalized/date');
 require('../calendar/internal/CalendarContext.js');
 require('../calendar/internal/utils.js');
-require('../calendar/useSelection.js');
+var useSelection = require('../calendar/useSelection.js');
+var DatePickerContext = require('./DatePickerContext.js');
+var DatePickerPanel$1 = require('./DatePickerPanel.css.js');
 
 const withBaseName = core.makePrefixer("saltDatePickerPanel");
-const DatePickerPanel = React.forwardRef(
-  function DatePickerPanel2(props, ref) {
-    var _a;
-    const { className, onSelect, helperText, CalendarProps: CalendarProps2, ...rest } = props;
-    const targetWindow = window.useWindow();
-    styles.useComponentCssInjection({
-      testId: "salt-date-picker-panel",
-      css: DatePickerPanel$1,
-      window: targetWindow
-    });
-    const { Component: FloatingComponent } = core.useFloatingComponent();
-    const [hoveredDate, setHoveredDate] = React.useState(null);
-    const {
-      openState,
-      startDate,
-      setStartDate,
-      startVisibleMonth,
-      setStartVisibleMonth,
-      endDate,
-      setEndDate,
-      endVisibleMonth,
-      setEndVisibleMonth,
-      setOpen,
-      selectionVariant,
-      context,
-      getPanelPosition
-    } = DatePickerContext.useDatePickerContext();
-    const { a11yProps } = core.useFormFieldProps();
-    const setRangeDate = (event, newDate) => {
-      setStartDate(newDate.startDate);
-      setEndDate(newDate.endDate);
-      onSelect == null ? void 0 : onSelect(event, newDate);
-      if (newDate.startDate && newDate.endDate) {
-        setOpen(false);
-      }
-    };
-    const setSingleDate = (event, newDate) => {
-      setStartDate(newDate);
-      onSelect == null ? void 0 : onSelect(event, newDate);
+function getHoveredDate(date$1, compact, hoveredDate) {
+  return date$1 && !compact && hoveredDate && hoveredDate.compare(date.endOfMonth(date$1)) > 0 ? date.endOfMonth(date$1) : hoveredDate;
+}
+const DatePickerPanel = React.forwardRef(function DatePickerPanel2(props, ref) {
+  var _a;
+  const {
+    className,
+    onSelect,
+    helperText,
+    CalendarProps,
+    visibleMonths,
+    ...rest
+  } = props;
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "salt-date-picker-panel",
+    css: DatePickerPanel$1,
+    window: targetWindow
+  });
+  const { Component: FloatingComponent } = core.useFloatingComponent();
+  const [hoveredDate, setHoveredDate] = React.useState(null);
+  const {
+    openState,
+    selectedDate,
+    setSelectedDate,
+    startVisibleMonth,
+    setStartVisibleMonth,
+    endVisibleMonth,
+    setEndVisibleMonth,
+    setOpen,
+    context,
+    getPanelPosition,
+    selectionVariant
+  } = DatePickerContext.useDatePickerContext();
+  const { a11yProps } = core.useFormFieldProps();
+  const isRangePicker = useSelection.isRangeOrOffsetSelectionWithStartDate(selectedDate) || selectionVariant === "range" && selectedDate === void 0;
+  const compact = visibleMonths === 1;
+  const setRangeDate = (event, newDate) => {
+    setSelectedDate(newDate);
+    onSelect == null ? void 0 : onSelect(event, newDate);
+    if (newDate.startDate && newDate.endDate) {
       setOpen(false);
-    };
-    const handleHoveredDateChange = (_, newHoveredDate) => {
-      setHoveredDate(newHoveredDate);
-    };
-    React.useEffect(() => {
-      if (startDate) {
-        setStartVisibleMonth(startDate);
-        setEndVisibleMonth(startDate.add({ months: 1 }));
+    }
+  };
+  const setSingleDate = (event, newDate) => {
+    setSelectedDate(newDate);
+    onSelect == null ? void 0 : onSelect(event, newDate);
+    setOpen(false);
+  };
+  const handleHoveredDateChange = (_, newHoveredDate) => {
+    setHoveredDate(newHoveredDate);
+  };
+  React.useEffect(() => {
+    if (isRangePicker) {
+      if (selectedDate == null ? void 0 : selectedDate.startDate) {
+        setStartVisibleMonth(selectedDate.startDate);
+        setEndVisibleMonth(selectedDate.startDate.add({ months: 1 }));
       }
-    }, [startDate]);
-    const isRangePicker = selectionVariant === "range";
-    const firstCalendarProps = isRangePicker ? {
-      selectionVariant: "range",
-      hoveredDate: startDate && hoveredDate && hoveredDate.compare(date.endOfMonth(startDate)) > 0 ? date.endOfMonth(startDate) : hoveredDate,
-      onHoveredDateChange: handleHoveredDateChange,
-      selectedDate: { startDate, endDate },
-      onSelectedDateChange: setRangeDate,
-      maxDate: startDate && date.endOfMonth(startDate),
-      hideOutOfRangeDates: true
-    } : {
-      selectionVariant: "default",
-      selectedDate: startDate,
-      onSelectedDateChange: setSingleDate
-    };
-    return /* @__PURE__ */ jsxRuntime.jsx(FloatingComponent, {
-      open: openState,
-      className: clsx.clsx(withBaseName(), className),
-      "aria-modal": "true",
-      ref,
-      focusManagerProps: context ? {
-        context,
-        initialFocus: 4
-      } : void 0,
-      ...getPanelPosition(),
-      ...a11yProps,
-      ...rest,
-      children: /* @__PURE__ */ jsxRuntime.jsxs(core.StackLayout, {
-        separators: true,
-        gap: 0,
-        className: withBaseName("container"),
-        children: [
-          helperText && /* @__PURE__ */ jsxRuntime.jsx(core.FlexItem, {
-            className: withBaseName("header"),
-            children: /* @__PURE__ */ jsxRuntime.jsx(core.FormFieldHelperText, {
-              children: helperText
-            })
-          }),
-          /* @__PURE__ */ jsxRuntime.jsx(core.FlexLayout, {
-            children: /* @__PURE__ */ jsxRuntime.jsxs(core.FormFieldContext.Provider, {
-              value: {},
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx(Calendar.Calendar, {
-                  visibleMonth: startVisibleMonth,
-                  onVisibleMonthChange: (_, month) => setStartVisibleMonth(month),
-                  ...firstCalendarProps,
-                  ...CalendarProps2
-                }),
-                isRangePicker && /* @__PURE__ */ jsxRuntime.jsx(Calendar.Calendar, {
-                  selectionVariant: "range",
-                  hoveredDate,
-                  onHoveredDateChange: handleHoveredDateChange,
-                  selectedDate: { startDate, endDate },
-                  onSelectedDateChange: setRangeDate,
-                  visibleMonth: endVisibleMonth,
-                  onVisibleMonthChange: (_, month) => setEndVisibleMonth(month),
-                  hideOutOfRangeDates: true,
-                  minDate: startDate ? (_a = date.startOfMonth(startDate)) == null ? void 0 : _a.add({ months: 1 }) : void 0,
-                  ...CalendarProps2
-                })
-              ]
-            })
+    } else {
+      setStartVisibleMonth(selectedDate);
+    }
+  }, [selectedDate, setEndVisibleMonth, setStartVisibleMonth]);
+  const firstCalendarProps = isRangePicker ? {
+    selectionVariant: "range",
+    hoveredDate: getHoveredDate(
+      selectedDate == null ? void 0 : selectedDate.startDate,
+      compact,
+      hoveredDate
+    ),
+    onHoveredDateChange: handleHoveredDateChange,
+    selectedDate,
+    onSelectedDateChange: setRangeDate,
+    maxDate: !compact && (selectedDate == null ? void 0 : selectedDate.startDate) ? date.endOfMonth(selectedDate == null ? void 0 : selectedDate.startDate) : void 0,
+    hideOutOfRangeDates: true
+  } : {
+    selectionVariant: "default",
+    selectedDate,
+    onSelectedDateChange: setSingleDate
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(FloatingComponent, {
+    open: openState,
+    className: clsx.clsx(withBaseName(), className),
+    "aria-modal": "true",
+    ref,
+    focusManagerProps: context ? {
+      context,
+      initialFocus: 4
+    } : void 0,
+    ...getPanelPosition(),
+    ...a11yProps,
+    ...rest,
+    children: /* @__PURE__ */ jsxRuntime.jsxs(core.StackLayout, {
+      separators: true,
+      gap: 0,
+      className: withBaseName("container"),
+      children: [
+        helperText && /* @__PURE__ */ jsxRuntime.jsx(core.FlexItem, {
+          className: withBaseName("header"),
+          children: /* @__PURE__ */ jsxRuntime.jsx(core.FormFieldHelperText, {
+            children: helperText
+          })
+        }),
+        /* @__PURE__ */ jsxRuntime.jsx(core.FlexLayout, {
+          children: /* @__PURE__ */ jsxRuntime.jsxs(core.FormFieldContext.Provider, {
+            value: {},
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(Calendar.Calendar, {
+                visibleMonth: startVisibleMonth,
+                onVisibleMonthChange: (_, month) => setStartVisibleMonth(month),
+                ...firstCalendarProps,
+                ...CalendarProps
+              }),
+              isRangePicker && !compact && /* @__PURE__ */ jsxRuntime.jsx(Calendar.Calendar, {
+                selectionVariant: "range",
+                hoveredDate,
+                onHoveredDateChange: handleHoveredDateChange,
+                selectedDate,
+                onSelectedDateChange: setRangeDate,
+                visibleMonth: endVisibleMonth,
+                onVisibleMonthChange: (_, month) => setEndVisibleMonth(month),
+                hideOutOfRangeDates: true,
+                minDate: (selectedDate == null ? void 0 : selectedDate.startDate) ? (_a = date.startOfMonth(selectedDate == null ? void 0 : selectedDate.startDate)) == null ? void 0 : _a.add({
+                  months: 1
+                }) : void 0,
+                ...CalendarProps
+              })
+            ]
           })
-        ]
-      })
-    });
-  }
-);
+        })
+      ]
+    })
+  });
+});
 
 exports.DatePickerPanel = DatePickerPanel;
 //# sourceMappingURL=DatePickerPanel.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DatePickerPanel.js","sources":["../src/date-picker/DatePickerPanel.tsx"],"sourcesContent":["import {\n  ComponentPropsWithoutRef,\n  forwardRef,\n  SyntheticEvent,\n  useEffect,\n  useState,\n} from \"react\";\nimport {\n  FlexItem,\n  FlexLayout,\n  FormFieldHelperText,\n  makePrefixer,\n  StackLayout,\n  useFloatingComponent,\n  useFormFieldProps,\n  FormFieldContext,\n  FormFieldContextValue,\n} from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { useDatePickerContext } from \"./DatePickerContext\";\nimport dateInputPanelCss from \"./DatePickerPanel.css\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport {\n  Calendar,\n  CalendarProps,\n  UseRangeSelectionCalendarProps,\n  UseSingleSelectionCalendarProps,\n} from \"../calendar\";\nimport { DateValue, endOfMonth, startOfMonth } from \"@internationalized/date\";\n\nexport interface DatePickerPanelProps extends ComponentPropsWithoutRef<\"div\"> {\n  onSelect?: (\n    event: SyntheticEvent,\n    selectedDate?: DateValue | { startDate?: DateValue; endDate?: DateValue }\n  ) => void;\n  helperText?: string;\n  CalendarProps?: Partial<\n    Omit<\n      CalendarProps,\n      | \"selectionVariant\"\n      | \"selectedDate\"\n      | \"defaultSelectedDate\"\n      | \"onSelectedDateChange\"\n    >\n  >;\n}\n\nconst withBaseName = makePrefixer(\"saltDatePickerPanel\");\n\nexport const DatePickerPanel = forwardRef<HTMLDivElement, DatePickerPanelProps>(\n  function DatePickerPanel(props, ref) {\n    const { className, onSelect, helperText, CalendarProps, ...rest } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-date-picker-panel\",\n      css: dateInputPanelCss,\n      window: targetWindow,\n    });\n\n    const { Component: FloatingComponent } = useFloatingComponent();\n    const [hoveredDate, setHoveredDate] = useState<DateValue | null>(null);\n\n    const {\n      openState,\n      startDate,\n      setStartDate,\n      startVisibleMonth,\n      setStartVisibleMonth,\n      endDate,\n      setEndDate,\n      endVisibleMonth,\n      setEndVisibleMonth,\n      setOpen,\n      selectionVariant,\n      context,\n      getPanelPosition,\n    } = useDatePickerContext();\n\n    const { a11yProps } = useFormFieldProps();\n\n    const setRangeDate: UseRangeSelectionCalendarProps[\"onSelectedDateChange\"] =\n      (event, newDate) => {\n        setStartDate(newDate.startDate);\n        setEndDate(newDate.endDate);\n        onSelect?.(event, newDate);\n        if (newDate.startDate && newDate.endDate) {\n          setOpen(false);\n        }\n      };\n    const setSingleDate: UseSingleSelectionCalendarProps[\"onSelectedDateChange\"] =\n      (event, newDate) => {\n        setStartDate(newDate);\n        onSelect?.(event, newDate);\n        setOpen(false);\n      };\n    const handleHoveredDateChange: CalendarProps[\"onHoveredDateChange\"] = (\n      _,\n      newHoveredDate\n    ) => {\n      setHoveredDate(newHoveredDate);\n    };\n    useEffect(() => {\n      if (startDate) {\n        setStartVisibleMonth(startDate);\n        setEndVisibleMonth(startDate.add({ months: 1 }));\n      }\n    }, [startDate]);\n\n    const isRangePicker = selectionVariant === \"range\";\n    const firstCalendarProps: CalendarProps = isRangePicker\n      ? {\n          selectionVariant: \"range\",\n          hoveredDate:\n            startDate &&\n            hoveredDate &&\n            hoveredDate.compare(endOfMonth(startDate)) > 0\n              ? endOfMonth(startDate)\n              : hoveredDate,\n          onHoveredDateChange: handleHoveredDateChange,\n          selectedDate: { startDate, endDate },\n          onSelectedDateChange: setRangeDate,\n          maxDate: startDate && endOfMonth(startDate),\n          hideOutOfRangeDates: true,\n        }\n      : {\n          selectionVariant: \"default\",\n          selectedDate: startDate,\n          onSelectedDateChange: setSingleDate,\n        };\n    return (\n      <FloatingComponent\n        open={openState}\n        className={clsx(withBaseName(), className)}\n        aria-modal=\"true\"\n        ref={ref}\n        focusManagerProps={\n          context\n            ? {\n                context: context,\n                initialFocus: 4,\n              }\n            : undefined\n        }\n        {...getPanelPosition()}\n        {...a11yProps}\n        {...rest}\n      >\n        <StackLayout separators gap={0} className={withBaseName(\"container\")}>\n          {helperText && (\n            <FlexItem className={withBaseName(\"header\")}>\n              <FormFieldHelperText>{helperText}</FormFieldHelperText>\n            </FlexItem>\n          )}\n          <FlexLayout>\n            {/* Avoid Dropdowns in Calendar inheriting the FormField's state */}\n            <FormFieldContext.Provider value={{} as FormFieldContextValue}>\n              <Calendar\n                visibleMonth={startVisibleMonth}\n                onVisibleMonthChange={(_, month) => setStartVisibleMonth(month)}\n                {...firstCalendarProps}\n                {...CalendarProps}\n              />\n              {isRangePicker && (\n                <Calendar\n                  selectionVariant=\"range\"\n                  hoveredDate={hoveredDate}\n                  onHoveredDateChange={handleHoveredDateChange}\n                  selectedDate={{ startDate, endDate }}\n                  onSelectedDateChange={setRangeDate}\n                  visibleMonth={endVisibleMonth}\n                  onVisibleMonthChange={(_, month) => setEndVisibleMonth(month)}\n                  hideOutOfRangeDates\n                  minDate={\n                    startDate\n                      ? startOfMonth(startDate)?.add({ months: 1 })\n                      : undefined\n                  }\n                  {...CalendarProps}\n                />\n              )}\n            </FormFieldContext.Provider>\n          </FlexLayout>\n        </StackLayout>\n      </FloatingComponent>\n    );\n  }\n);\n"],"names":["makePrefixer","forwardRef","DatePickerPanel","CalendarProps","useWindow","useComponentCssInjection","dateInputPanelCss","useFloatingComponent","useState","useDatePickerContext","useFormFieldProps","useEffect","endOfMonth","jsx","clsx","jsxs","StackLayout","FlexItem","FormFieldHelperText","FlexLayout","FormFieldContext","Calendar","startOfMonth"],"mappings":"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"}
+{"version":3,"file":"DatePickerPanel.js","sources":["../src/date-picker/DatePickerPanel.tsx"],"sourcesContent":["import {\n  type DateValue,\n  endOfMonth,\n  startOfMonth,\n} from \"@internationalized/date\";\nimport {\n  FlexItem,\n  FlexLayout,\n  FormFieldContext,\n  type FormFieldContextValue,\n  FormFieldHelperText,\n  StackLayout,\n  makePrefixer,\n  useFloatingComponent,\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 SyntheticEvent,\n  forwardRef,\n  useEffect,\n  useState,\n} from \"react\";\nimport {\n  Calendar,\n  type CalendarProps,\n  type RangeSelectionValueType,\n  type SingleSelectionValueType,\n  type UseRangeSelectionCalendarProps,\n  type UseSingleSelectionCalendarProps,\n  isRangeOrOffsetSelectionWithStartDate,\n} from \"../calendar\";\nimport { useDatePickerContext } from \"./DatePickerContext\";\nimport dateInputPanelCss from \"./DatePickerPanel.css\";\n\nexport interface DatePickerPanelProps<SelectionVariantType>\n  extends ComponentPropsWithoutRef<\"div\"> {\n  onSelect?: (\n    event: SyntheticEvent,\n    selectedDate?: SelectionVariantType,\n  ) => void;\n  helperText?: string;\n  visibleMonths?: 1 | 2;\n  CalendarProps?: Partial<\n    Omit<\n      CalendarProps,\n      | \"selectionVariant\"\n      | \"selectedDate\"\n      | \"defaultSelectedDate\"\n      | \"onSelectedDateChange\"\n    >\n  >;\n}\n\nconst withBaseName = makePrefixer(\"saltDatePickerPanel\");\n\nfunction getHoveredDate(\n  date?: DateValue | null,\n  compact?: boolean,\n  hoveredDate?: DateValue | null,\n) {\n  return date &&\n    !compact &&\n    hoveredDate &&\n    hoveredDate.compare(endOfMonth(date)) > 0\n    ? endOfMonth(date)\n    : hoveredDate;\n}\n\nexport const DatePickerPanel = forwardRef<\n  HTMLDivElement,\n  DatePickerPanelProps<SingleSelectionValueType | RangeSelectionValueType>\n>(function DatePickerPanel(props, ref) {\n  const {\n    className,\n    onSelect,\n    helperText,\n    CalendarProps,\n    visibleMonths,\n    ...rest\n  } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-date-picker-panel\",\n    css: dateInputPanelCss,\n    window: targetWindow,\n  });\n\n  const { Component: FloatingComponent } = useFloatingComponent();\n  const [hoveredDate, setHoveredDate] = useState<DateValue | null>(null);\n\n  const {\n    openState,\n    selectedDate,\n    setSelectedDate,\n    startVisibleMonth,\n    setStartVisibleMonth,\n    endVisibleMonth,\n    setEndVisibleMonth,\n    setOpen,\n    context,\n    getPanelPosition,\n    selectionVariant,\n  } = useDatePickerContext();\n\n  const { a11yProps } = useFormFieldProps();\n  const isRangePicker =\n    isRangeOrOffsetSelectionWithStartDate(selectedDate) ||\n    (selectionVariant === \"range\" && selectedDate === undefined);\n  const compact = visibleMonths === 1;\n\n  const setRangeDate: UseRangeSelectionCalendarProps[\"onSelectedDateChange\"] = (\n    event,\n    newDate,\n  ) => {\n    setSelectedDate(newDate);\n    onSelect?.(event, newDate);\n    if (newDate.startDate && newDate.endDate) {\n      setOpen(false);\n    }\n  };\n  const setSingleDate: UseSingleSelectionCalendarProps[\"onSelectedDateChange\"] =\n    (event, newDate) => {\n      setSelectedDate(newDate);\n      onSelect?.(event, newDate);\n      setOpen(false);\n    };\n  const handleHoveredDateChange: CalendarProps[\"onHoveredDateChange\"] = (\n    _,\n    newHoveredDate,\n  ) => {\n    setHoveredDate(newHoveredDate);\n  };\n  useEffect(() => {\n    if (isRangePicker) {\n      if (selectedDate?.startDate) {\n        setStartVisibleMonth(selectedDate.startDate);\n        setEndVisibleMonth(selectedDate.startDate.add({ months: 1 }));\n      }\n    } else {\n      setStartVisibleMonth(selectedDate);\n    }\n  }, [selectedDate, setEndVisibleMonth, setStartVisibleMonth]);\n\n  const firstCalendarProps: CalendarProps = isRangePicker\n    ? {\n        selectionVariant: \"range\",\n        hoveredDate: getHoveredDate(\n          selectedDate?.startDate,\n          compact,\n          hoveredDate,\n        ),\n        onHoveredDateChange: handleHoveredDateChange,\n        selectedDate: selectedDate,\n        onSelectedDateChange: setRangeDate,\n        maxDate:\n          !compact && selectedDate?.startDate\n            ? endOfMonth(selectedDate?.startDate)\n            : undefined,\n        hideOutOfRangeDates: true,\n      }\n    : {\n        selectionVariant: \"default\",\n        selectedDate: selectedDate,\n        onSelectedDateChange: setSingleDate,\n      };\n  return (\n    <FloatingComponent\n      open={openState}\n      className={clsx(withBaseName(), className)}\n      aria-modal=\"true\"\n      ref={ref}\n      focusManagerProps={\n        context\n          ? {\n              context: context,\n              initialFocus: 4,\n            }\n          : undefined\n      }\n      {...getPanelPosition()}\n      {...a11yProps}\n      {...rest}\n    >\n      <StackLayout separators gap={0} className={withBaseName(\"container\")}>\n        {helperText && (\n          <FlexItem className={withBaseName(\"header\")}>\n            <FormFieldHelperText>{helperText}</FormFieldHelperText>\n          </FlexItem>\n        )}\n        <FlexLayout>\n          {/* Avoid Dropdowns in Calendar inheriting the FormField's state */}\n          <FormFieldContext.Provider value={{} as FormFieldContextValue}>\n            <Calendar\n              visibleMonth={startVisibleMonth}\n              onVisibleMonthChange={(_, month) => setStartVisibleMonth(month)}\n              {...firstCalendarProps}\n              {...CalendarProps}\n            />\n            {isRangePicker && !compact && (\n              <Calendar\n                selectionVariant=\"range\"\n                hoveredDate={hoveredDate}\n                onHoveredDateChange={handleHoveredDateChange}\n                selectedDate={selectedDate}\n                onSelectedDateChange={setRangeDate}\n                visibleMonth={endVisibleMonth}\n                onVisibleMonthChange={(_, month) => setEndVisibleMonth(month)}\n                hideOutOfRangeDates\n                minDate={\n                  selectedDate?.startDate\n                    ? startOfMonth(selectedDate?.startDate)?.add({\n                        months: 1,\n                      })\n                    : undefined\n                }\n                {...CalendarProps}\n              />\n            )}\n          </FormFieldContext.Provider>\n        </FlexLayout>\n      </StackLayout>\n    </FloatingComponent>\n  );\n});\n"],"names":["makePrefixer","date","endOfMonth","forwardRef","DatePickerPanel","useWindow","useComponentCssInjection","dateInputPanelCss","useFloatingComponent","useState","useDatePickerContext","useFormFieldProps","isRangeOrOffsetSelectionWithStartDate","useEffect","jsx","clsx","jsxs","StackLayout","FlexItem","FormFieldHelperText","FlexLayout","FormFieldContext","Calendar","startOfMonth"],"mappings":"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"}

package/dist-cjs/deck-item/DeckItem.js

@@ -3,11 +3,11 @@
 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 core = require('@salt-ds/core');
-var window = require('@salt-ds/window');
 var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
 var DeckItem$1 = require('./DeckItem.css.js');
 
 const withBaseName = core.makePrefixer("saltDeckItem");

package/dist-cjs/deck-item/DeckItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"DeckItem.js","sources":["../src/deck-item/DeckItem.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { forwardRef, HTMLAttributes, useMemo, useRef } from \"react\";\nimport { makePrefixer, useForkRef, useId } from \"@salt-ds/core\";\nimport { LayoutAnimation } from \"../deck-layout\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport deckItemCss from \"./DeckItem.css\";\n\nconst withBaseName = makePrefixer(\"saltDeckItem\");\n\nexport interface DeckItemProps extends HTMLAttributes<HTMLDivElement> {\n  activeIndex?: number;\n  animation?: LayoutAnimation;\n  index: number;\n  role?: string;\n}\n\nexport const DeckItem = forwardRef<HTMLDivElement, DeckItemProps>(\n  function DeckItem(\n    {\n      activeIndex = 0,\n      animation,\n      children,\n      className,\n      index,\n      role = \"group\",\n      id: idProp,\n      ...rest\n    },\n    ref\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-deck-item\",\n      css: deckItemCss,\n      window: targetWindow,\n    });\n\n    const sliderRef = useRef<HTMLDivElement | null>(null);\n\n    const isCurrent = activeIndex === index;\n\n    const position = useMemo(() => {\n      return isCurrent ? \"current\" : activeIndex < index ? \"next\" : \"previous\";\n    }, [activeIndex, index, isCurrent]);\n\n    const classesIndex = animation && position === \"current\" ? 0 : 1;\n\n    const getActiveClasses = [\n      `${animation || \"fade\"}-in`, // in-right\n      `${animation || \"fade\"}-out`, // out-left\n    ];\n\n    const id = useId(idProp);\n\n    return (\n      <div\n        className={clsx(\n          withBaseName(),\n          withBaseName(`${animation ? animation : \"static\"}-${position}`),\n          {\n            [withBaseName(getActiveClasses[classesIndex])]:\n              animation === \"fade\",\n          },\n          className\n        )}\n        ref={useForkRef(ref, sliderRef)}\n        role={role}\n        tabIndex={isCurrent ? 0 : -1}\n        id={id}\n        {...rest}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n"],"names":["makePrefixer","forwardRef","DeckItem","useWindow","useComponentCssInjection","deckItemCss","useRef","useMemo","useId","jsx","clsx","useForkRef"],"mappings":";;;;;;;;;;;;AAUA,MAAM,YAAA,GAAeA,kBAAa,cAAc,CAAA,CAAA;AASzC,MAAM,QAAW,GAAAC,gBAAA;AAAA,EACtB,SAASC,SACP,CAAA;AAAA,IACE,WAAc,GAAA,CAAA;AAAA,IACd,SAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,KAAA;AAAA,IACA,IAAO,GAAA,OAAA;AAAA,IACP,EAAI,EAAA,MAAA;AAAA,IACD,GAAA,IAAA;AAAA,KAEL,GACA,EAAA;AACA,IAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,gBAAA;AAAA,MACR,GAAK,EAAAC,UAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAM,MAAA,SAAA,GAAYC,aAA8B,IAAI,CAAA,CAAA;AAEpD,IAAA,MAAM,YAAY,WAAgB,KAAA,KAAA,CAAA;AAElC,IAAM,MAAA,QAAA,GAAWC,cAAQ,MAAM;AAC7B,MAAA,OAAO,SAAY,GAAA,SAAA,GAAY,WAAc,GAAA,KAAA,GAAQ,MAAS,GAAA,UAAA,CAAA;AAAA,KAC7D,EAAA,CAAC,WAAa,EAAA,KAAA,EAAO,SAAS,CAAC,CAAA,CAAA;AAElC,IAAA,MAAM,YAAe,GAAA,SAAA,IAAa,QAAa,KAAA,SAAA,GAAY,CAAI,GAAA,CAAA,CAAA;AAE/D,IAAA,MAAM,gBAAmB,GAAA;AAAA,MACvB,GAAG,SAAa,IAAA,MAAA,CAAA,GAAA,CAAA;AAAA,MAChB,GAAG,SAAa,IAAA,MAAA,CAAA,IAAA,CAAA;AAAA,KAClB,CAAA;AAEA,IAAM,MAAA,EAAA,GAAKC,WAAM,MAAM,CAAA,CAAA;AAEvB,IAAA,uBACGC,cAAA,CAAA,KAAA,EAAA;AAAA,MACC,SAAW,EAAAC,SAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb,YAAa,CAAA,CAAA,EAAG,SAAY,GAAA,SAAA,GAAY,YAAY,QAAU,CAAA,CAAA,CAAA;AAAA,QAC9D;AAAA,UACE,CAAC,YAAA,CAAa,gBAAiB,CAAA,YAAA,CAAa,IAC1C,SAAc,KAAA,MAAA;AAAA,SAClB;AAAA,QACA,SAAA;AAAA,OACF;AAAA,MACA,GAAA,EAAKC,eAAW,CAAA,GAAA,EAAK,SAAS,CAAA;AAAA,MAC9B,IAAA;AAAA,MACA,QAAA,EAAU,YAAY,CAAI,GAAA,CAAA,CAAA;AAAA,MAC1B,EAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEH,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
+{"version":3,"file":"DeckItem.js","sources":["../src/deck-item/DeckItem.tsx"],"sourcesContent":["import { makePrefixer, useForkRef, useId } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { type HTMLAttributes, forwardRef, useMemo, useRef } from \"react\";\nimport type { LayoutAnimation } from \"../deck-layout\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport deckItemCss from \"./DeckItem.css\";\n\nconst withBaseName = makePrefixer(\"saltDeckItem\");\n\nexport interface DeckItemProps extends HTMLAttributes<HTMLDivElement> {\n  activeIndex?: number;\n  animation?: LayoutAnimation;\n  index: number;\n  role?: string;\n}\n\nexport const DeckItem = forwardRef<HTMLDivElement, DeckItemProps>(\n  function DeckItem(\n    {\n      activeIndex = 0,\n      animation,\n      children,\n      className,\n      index,\n      role = \"group\",\n      id: idProp,\n      ...rest\n    },\n    ref,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-deck-item\",\n      css: deckItemCss,\n      window: targetWindow,\n    });\n\n    const sliderRef = useRef<HTMLDivElement | null>(null);\n\n    const isCurrent = activeIndex === index;\n\n    const position = useMemo(() => {\n      return isCurrent ? \"current\" : activeIndex < index ? \"next\" : \"previous\";\n    }, [activeIndex, index, isCurrent]);\n\n    const classesIndex = animation && position === \"current\" ? 0 : 1;\n\n    const getActiveClasses = [\n      `${animation || \"fade\"}-in`, // in-right\n      `${animation || \"fade\"}-out`, // out-left\n    ];\n\n    const id = useId(idProp);\n\n    return (\n      <div\n        className={clsx(\n          withBaseName(),\n          withBaseName(`${animation ? animation : \"static\"}-${position}`),\n          {\n            [withBaseName(getActiveClasses[classesIndex])]:\n              animation === \"fade\",\n          },\n          className,\n        )}\n        ref={useForkRef(ref, sliderRef)}\n        role={role}\n        tabIndex={isCurrent ? 0 : -1}\n        id={id}\n        {...rest}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","DeckItem","useWindow","useComponentCssInjection","deckItemCss","useRef","useMemo","useId","jsx","clsx","useForkRef"],"mappings":";;;;;;;;;;;;AAUA,MAAM,YAAA,GAAeA,kBAAa,cAAc,CAAA,CAAA;AASzC,MAAM,QAAW,GAAAC,gBAAA;AAAA,EACtB,SAASC,SACP,CAAA;AAAA,IACE,WAAc,GAAA,CAAA;AAAA,IACd,SAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,KAAA;AAAA,IACA,IAAO,GAAA,OAAA;AAAA,IACP,EAAI,EAAA,MAAA;AAAA,IACD,GAAA,IAAA;AAAA,KAEL,GACA,EAAA;AACA,IAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,gBAAA;AAAA,MACR,GAAK,EAAAC,UAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAM,MAAA,SAAA,GAAYC,aAA8B,IAAI,CAAA,CAAA;AAEpD,IAAA,MAAM,YAAY,WAAgB,KAAA,KAAA,CAAA;AAElC,IAAM,MAAA,QAAA,GAAWC,cAAQ,MAAM;AAC7B,MAAA,OAAO,SAAY,GAAA,SAAA,GAAY,WAAc,GAAA,KAAA,GAAQ,MAAS,GAAA,UAAA,CAAA;AAAA,KAC7D,EAAA,CAAC,WAAa,EAAA,KAAA,EAAO,SAAS,CAAC,CAAA,CAAA;AAElC,IAAA,MAAM,YAAe,GAAA,SAAA,IAAa,QAAa,KAAA,SAAA,GAAY,CAAI,GAAA,CAAA,CAAA;AAE/D,IAAA,MAAM,gBAAmB,GAAA;AAAA,MACvB,GAAG,SAAa,IAAA,MAAA,CAAA,GAAA,CAAA;AAAA,MAChB,GAAG,SAAa,IAAA,MAAA,CAAA,IAAA,CAAA;AAAA,KAClB,CAAA;AAEA,IAAM,MAAA,EAAA,GAAKC,WAAM,MAAM,CAAA,CAAA;AAEvB,IAAA,uBACGC,cAAA,CAAA,KAAA,EAAA;AAAA,MACC,SAAW,EAAAC,SAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb,YAAa,CAAA,CAAA,EAAG,SAAY,GAAA,SAAA,GAAY,YAAY,QAAU,CAAA,CAAA,CAAA;AAAA,QAC9D;AAAA,UACE,CAAC,YAAA,CAAa,gBAAiB,CAAA,YAAA,CAAa,IAC1C,SAAc,KAAA,MAAA;AAAA,SAClB;AAAA,QACA,SAAA;AAAA,OACF;AAAA,MACA,GAAA,EAAKC,eAAW,CAAA,GAAA,EAAK,SAAS,CAAA;AAAA,MAC9B,IAAA;AAAA,MACA,QAAA,EAAU,YAAY,CAAI,GAAA,CAAA,CAAA;AAAA,MAC1B,EAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEH,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-cjs/deck-layout/DeckLayout.js

@@ -3,14 +3,14 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
 var core = require('@salt-ds/core');
+var React = require('react');
 var DeckItem = require('../deck-item/DeckItem.js');
 require('../responsive/useResizeObserver.js');
 var useWidth = require('../responsive/useWidth.js');
-var clsx = require('clsx');
-var window = require('@salt-ds/window');
 var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var clsx = require('clsx');
 var DeckLayout$1 = require('./DeckLayout.css.js');
 
 const withBaseName = core.makePrefixer("saltDeckLayout");
@@ -33,12 +33,9 @@ const DeckLayout = React.forwardRef(
     });
     const [deckItemRef, deckItemWidth] = useWidth.useWidth(true);
     const [deckItemHeight, setDeckItemHeight] = React.useState(0);
-    const handleResize = React.useCallback(
-      function handleResize2(contentRect) {
-        setDeckItemHeight(contentRect.height);
-      },
-      []
-    );
+    const handleResize = React.useCallback(function handleResize2(contentRect) {
+      setDeckItemHeight(contentRect.height);
+    }, []);
     core.useIsomorphicLayoutEffect(() => {
       if (!deckItemRef.current) {
         return void 0;

package/dist-cjs/deck-layout/DeckLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"DeckLayout.js","sources":["../src/deck-layout/DeckLayout.tsx"],"sourcesContent":["import {\n  Children,\n  CSSProperties,\n  forwardRef,\n  HTMLAttributes,\n  useCallback,\n  useState,\n} from \"react\";\nimport { makePrefixer, useIsomorphicLayoutEffect } from \"@salt-ds/core\";\nimport { DeckItem, DeckItemProps } from \"../deck-item\";\nimport { useWidth } from \"../responsive\";\n\nimport { clsx } from \"clsx\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport deckLayoutCss from \"./DeckLayout.css\";\n\nexport type LayoutAnimation = \"slide\" | \"fade\";\nexport type LayoutAnimationDirection = \"horizontal\" | \"vertical\";\nexport type LayoutAnimationTransition = \"increase\" | \"decrease\";\n\nexport interface DeckLayoutProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * The initial item to render.\n   **/\n  activeIndex?: number;\n  /**\n   * The animation when the slides are shown.\n   **/\n  animation?: LayoutAnimation;\n  /**\n   * The direction in which items will transition.\n   **/\n  direction?: LayoutAnimationDirection;\n  /**\n   * Props to be passed to the DeckItem component.\n   */\n  deckItemProps?: Partial<DeckItemProps>;\n}\n\nconst withBaseName = makePrefixer(\"saltDeckLayout\");\n\nexport const DeckLayout = forwardRef<HTMLDivElement, DeckLayoutProps>(\n  function DeckLayout(\n    {\n      activeIndex = 0,\n      animation,\n      className,\n      children,\n      direction = \"horizontal\",\n      style,\n      deckItemProps,\n      ...rest\n    },\n    ref\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-deck-layout\",\n      css: deckLayoutCss,\n      window: targetWindow,\n    });\n\n    const [deckItemRef, deckItemWidth] = useWidth<HTMLDivElement>(true);\n\n    const [deckItemHeight, setDeckItemHeight] = useState<number>(0);\n\n    const handleResize = useCallback(function handleResize(\n      contentRect: DOMRect\n    ) {\n      setDeckItemHeight(contentRect.height);\n    },\n    []);\n\n    useIsomorphicLayoutEffect(() => {\n      if (!deckItemRef.current) {\n        return undefined;\n      }\n\n      handleResize(deckItemRef.current.getBoundingClientRect());\n\n      const observer = new ResizeObserver(\n        ([{ contentRect }]: ResizeObserverEntry[]) => {\n          handleResize(contentRect);\n        }\n      );\n      observer.observe(deckItemRef.current);\n\n      return () => {\n        observer.disconnect();\n      };\n    }, [deckItemRef, handleResize]);\n\n    const deckLayoutStyles = {\n      ...style,\n      \"--deckLayout-width\": `${deckItemWidth}px`,\n      \"--deckLayout-height\": `${deckItemHeight}px`,\n    };\n\n    const innerStyles = {\n      \"--deckLayout-transform-value\": `-${activeIndex * 100}%`,\n    } as CSSProperties;\n\n    return (\n      <div\n        className={clsx(withBaseName(), className)}\n        style={deckLayoutStyles}\n        ref={ref}\n        {...rest}\n      >\n        <div\n          className={clsx(\n            {\n              [withBaseName(\"animate\")]: animation,\n            },\n            {\n              [withBaseName(`${animation || \"slide\"}-${direction}`)]: animation,\n            }\n          )}\n          style={innerStyles}\n        >\n          {Children.map(children, (child, index) => {\n            return (\n              <DeckItem\n                ref={deckItemRef}\n                index={index}\n                activeIndex={activeIndex}\n                animation={animation}\n                {...deckItemProps}\n              >\n                {child}\n              </DeckItem>\n            );\n          })}\n        </div>\n      </div>\n    );\n  }\n);\n"],"names":["makePrefixer","forwardRef","DeckLayout","useWindow","useComponentCssInjection","deckLayoutCss","useWidth","useState","useCallback","handleResize","useIsomorphicLayoutEffect","jsx","clsx","Children","DeckItem"],"mappings":"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"}
+{"version":3,"file":"DeckLayout.js","sources":["../src/deck-layout/DeckLayout.tsx"],"sourcesContent":["import { makePrefixer, useIsomorphicLayoutEffect } from \"@salt-ds/core\";\nimport {\n  type CSSProperties,\n  Children,\n  type HTMLAttributes,\n  forwardRef,\n  useCallback,\n  useState,\n} from \"react\";\nimport { DeckItem, type DeckItemProps } from \"../deck-item\";\nimport { useWidth } from \"../responsive\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\n\nimport deckLayoutCss from \"./DeckLayout.css\";\n\nexport type LayoutAnimation = \"slide\" | \"fade\";\nexport type LayoutAnimationDirection = \"horizontal\" | \"vertical\";\nexport type LayoutAnimationTransition = \"increase\" | \"decrease\";\n\nexport interface DeckLayoutProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * The initial item to render.\n   **/\n  activeIndex?: number;\n  /**\n   * The animation when the slides are shown.\n   **/\n  animation?: LayoutAnimation;\n  /**\n   * The direction in which items will transition.\n   **/\n  direction?: LayoutAnimationDirection;\n  /**\n   * Props to be passed to the DeckItem component.\n   */\n  deckItemProps?: Partial<DeckItemProps>;\n}\n\nconst withBaseName = makePrefixer(\"saltDeckLayout\");\n\nexport const DeckLayout = forwardRef<HTMLDivElement, DeckLayoutProps>(\n  function DeckLayout(\n    {\n      activeIndex = 0,\n      animation,\n      className,\n      children,\n      direction = \"horizontal\",\n      style,\n      deckItemProps,\n      ...rest\n    },\n    ref,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-deck-layout\",\n      css: deckLayoutCss,\n      window: targetWindow,\n    });\n\n    const [deckItemRef, deckItemWidth] = useWidth<HTMLDivElement>(true);\n\n    const [deckItemHeight, setDeckItemHeight] = useState<number>(0);\n\n    const handleResize = useCallback(function handleResize(\n      contentRect: DOMRect,\n    ) {\n      setDeckItemHeight(contentRect.height);\n    }, []);\n\n    useIsomorphicLayoutEffect(() => {\n      if (!deckItemRef.current) {\n        return undefined;\n      }\n\n      handleResize(deckItemRef.current.getBoundingClientRect());\n\n      const observer = new ResizeObserver(\n        ([{ contentRect }]: ResizeObserverEntry[]) => {\n          handleResize(contentRect);\n        },\n      );\n      observer.observe(deckItemRef.current);\n\n      return () => {\n        observer.disconnect();\n      };\n    }, [deckItemRef, handleResize]);\n\n    const deckLayoutStyles = {\n      ...style,\n      \"--deckLayout-width\": `${deckItemWidth}px`,\n      \"--deckLayout-height\": `${deckItemHeight}px`,\n    };\n\n    const innerStyles = {\n      \"--deckLayout-transform-value\": `-${activeIndex * 100}%`,\n    } as CSSProperties;\n\n    return (\n      <div\n        className={clsx(withBaseName(), className)}\n        style={deckLayoutStyles}\n        ref={ref}\n        {...rest}\n      >\n        <div\n          className={clsx(\n            {\n              [withBaseName(\"animate\")]: animation,\n            },\n            {\n              [withBaseName(`${animation || \"slide\"}-${direction}`)]: animation,\n            },\n          )}\n          style={innerStyles}\n        >\n          {Children.map(children, (child, index) => {\n            return (\n              <DeckItem\n                ref={deckItemRef}\n                index={index}\n                activeIndex={activeIndex}\n                animation={animation}\n                {...deckItemProps}\n              >\n                {child}\n              </DeckItem>\n            );\n          })}\n        </div>\n      </div>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","DeckLayout","useWindow","useComponentCssInjection","deckLayoutCss","useWidth","useState","useCallback","handleResize","useIsomorphicLayoutEffect","jsx","clsx","Children","DeckItem"],"mappings":"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"}

package/dist-cjs/dropdown/Dropdown.js

@@ -32,7 +32,7 @@ const Dropdown = React.forwardRef(function Dropdown2({
   source,
   triggerComponent,
   ListItem,
-  ListProps: ListProps2,
+  ListProps,
   width = 180,
   ...props
 }, forwardedRef) {
@@ -56,14 +56,14 @@ const Dropdown = React.forwardRef(function Dropdown2({
     ...dropdownListHook
   } = useDropdown.useDropdown({
     collectionHook,
-    defaultHighlightedIndex: ListProps2 == null ? void 0 : ListProps2.defaultHighlightedIndex,
+    defaultHighlightedIndex: ListProps == null ? void 0 : ListProps.defaultHighlightedIndex,
     defaultIsOpen,
     defaultSelected: collectionHook.itemToCollectionItem(defaultSelected),
-    highlightedIndex: ListProps2 == null ? void 0 : ListProps2.highlightedIndex,
+    highlightedIndex: ListProps == null ? void 0 : ListProps.highlightedIndex,
     isOpen: isOpenProp,
     itemToString: itemToString$1,
     label: "Dropdown",
-    onHighlight: ListProps2 == null ? void 0 : ListProps2.onHighlight,
+    onHighlight: ListProps == null ? void 0 : ListProps.onHighlight,
     onOpenChange,
     onSelectionChange,
     onSelect,
@@ -74,7 +74,8 @@ const Dropdown = React.forwardRef(function Dropdown2({
     (itemOrItems) => {
       if (Array.isArray(itemOrItems)) {
         return itemOrItems.map((i) => i.value);
-      } else if (itemOrItems) {
+      }
+      if (itemOrItems) {
         return itemOrItems.value;
       }
     },
@@ -94,13 +95,12 @@ const Dropdown = React.forwardRef(function Dropdown2({
           ...ariaProps
         })
       );
-    } else {
-      return /* @__PURE__ */ jsxRuntime.jsx(DropdownButton.DropdownButton, {
-        label: triggerLabel,
-        ...dropdownListHook.isOpen ? listControlProps : {},
-        ...ariaProps
-      });
     }
+    return /* @__PURE__ */ jsxRuntime.jsx(DropdownButton.DropdownButton, {
+      label: triggerLabel,
+      ...dropdownListHook.isOpen ? listControlProps : {},
+      ...ariaProps
+    });
   };
   return /* @__PURE__ */ jsxRuntime.jsx(collectionProvider.CollectionProvider, {
     collectionHook,
@@ -116,7 +116,7 @@ const Dropdown = React.forwardRef(function Dropdown2({
         /* @__PURE__ */ jsxRuntime.jsx(List.List, {
           ListItem,
           itemToString: itemToString$1,
-          ...ListProps2,
+          ...ListProps,
           highlightedIndex,
           listHandlers,
           onSelectionChange,

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

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.js","sources":["../src/dropdown/Dropdown.tsx"],"sourcesContent":["import { useForkRef, useIdMemo as useId } from \"@salt-ds/core\";\nimport {\n  cloneElement,\n  ForwardedRef,\n  forwardRef,\n  ReactElement,\n  useCallback,\n  useRef,\n} from \"react\";\n\nimport {\n  CollectionItem,\n  CollectionProvider,\n  itemToString as defaultItemToString,\n  SelectionProps,\n  SelectionStrategy,\n  SingleSelectionStrategy,\n  useCollectionItems,\n} from \"../common-hooks\";\nimport { List } from \"../list/List\";\nimport { ListProps } from \"../list/listTypes\";\nimport { DropdownBase, MaybeChildProps } from \"./DropdownBase\";\nimport { DropdownButton } from \"./DropdownButton\";\nimport { DropdownBaseProps } from \"./dropdownTypes\";\nimport { useDropdown } from \"./useDropdown\";\nimport { forwardCallbackProps } from \"../utils\";\n\nexport interface DropdownProps<\n  Item = string,\n  Selection extends SelectionStrategy = \"default\"\n> extends DropdownBaseProps,\n    Pick<\n      ListProps<Item, Selection>,\n      \"ListItem\" | \"itemToString\" | \"source\" | \"width\"\n    >,\n    SelectionProps<Item, Selection> {\n  ListProps?: Omit<\n    ListProps<Item, Selection>,\n    \"ListItem\" | \"itemToString\" | \"source\"\n  >;\n}\n\nexport const Dropdown = forwardRef(function Dropdown<\n  Item = string,\n  Selection extends SelectionStrategy = \"default\"\n>(\n  {\n    \"aria-label\": ariaLabel,\n    children,\n    defaultIsOpen,\n    defaultSelected,\n    id: idProp,\n    isOpen: isOpenProp,\n    itemToString = defaultItemToString,\n    onOpenChange,\n    onSelectionChange,\n    onSelect,\n    selected: selectedProp,\n    selectionStrategy,\n    source,\n    triggerComponent,\n    ListItem,\n    ListProps,\n    width = 180,\n    ...props\n  }: DropdownProps<Item, Selection>,\n  forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n  const id = useId(idProp);\n  const rootRef = useRef<HTMLDivElement>(null);\n  const forkedRef = useForkRef<HTMLDivElement>(rootRef, forwardedRef);\n\n  const collectionHook = useCollectionItems<Item>({\n    id,\n    source,\n    children,\n    options: {\n      itemToString,\n    },\n  });\n\n  const {\n    highlightedIndex,\n    triggerLabel,\n    listHandlers,\n    listControlProps,\n    selected,\n    ...dropdownListHook\n  } = useDropdown<Item, Selection>({\n    collectionHook,\n    defaultHighlightedIndex: ListProps?.defaultHighlightedIndex,\n    defaultIsOpen,\n    defaultSelected: collectionHook.itemToCollectionItem<\n      Selection,\n      typeof defaultSelected\n    >(defaultSelected),\n    highlightedIndex: ListProps?.highlightedIndex,\n    isOpen: isOpenProp,\n    itemToString,\n    label: \"Dropdown\",\n    onHighlight: ListProps?.onHighlight,\n    onOpenChange,\n    onSelectionChange,\n    onSelect,\n    selected: collectionHook.itemToCollectionItem<\n      Selection,\n      typeof selectedProp\n    >(selectedProp),\n    selectionStrategy,\n  });\n\n  const collectionItemsToItem = useCallback(\n    (\n      itemOrItems?: CollectionItem<Item> | null | CollectionItem<Item>[]\n    ):\n      | undefined\n      | (Selection extends SingleSelectionStrategy ? Item | null : Item[]) => {\n      type returnType = Selection extends SingleSelectionStrategy\n        ? Item | null\n        : Item[];\n      if (Array.isArray(itemOrItems)) {\n        return itemOrItems.map((i) => i.value) as returnType;\n      } else if (itemOrItems) {\n        return itemOrItems.value as returnType;\n      }\n    },\n    []\n  );\n\n  const getTriggerComponent = () => {\n    const ariaProps = {\n      \"aria-activedescendant\": dropdownListHook.isOpen\n        ? listControlProps?.[\"aria-activedescendant\"]\n        : undefined,\n      \"aria-label\": ariaLabel,\n    };\n    if (triggerComponent) {\n      const ownProps = triggerComponent.props as MaybeChildProps;\n      return cloneElement(\n        triggerComponent,\n        forwardCallbackProps(ownProps, {\n          ...(dropdownListHook.isOpen ? listControlProps : {}),\n          ...ariaProps,\n        })\n      );\n    } else {\n      return (\n        <DropdownButton\n          label={triggerLabel}\n          {...(dropdownListHook.isOpen ? listControlProps : {})}\n          {...ariaProps}\n        />\n      );\n    }\n  };\n\n  return (\n    <CollectionProvider<Item> collectionHook={collectionHook}>\n      <DropdownBase\n        {...props}\n        id={id}\n        isOpen={dropdownListHook.isOpen}\n        onOpenChange={dropdownListHook.onOpenChange}\n        ref={forkedRef}\n        width={width}\n      >\n        {getTriggerComponent()}\n        <List<Item, Selection>\n          ListItem={ListItem}\n          itemToString={itemToString}\n          {...ListProps}\n          highlightedIndex={highlightedIndex}\n          listHandlers={listHandlers}\n          onSelectionChange={onSelectionChange}\n          onSelect={onSelect}\n          selected={collectionItemsToItem(selected)}\n          selectionStrategy={selectionStrategy}\n          data-testid=\"dropdown-list\"\n        />\n      </DropdownBase>\n    </CollectionProvider>\n  );\n}) as <Item, Selection extends SelectionStrategy = \"default\">(\n  props: DropdownProps<Item, Selection> & {\n    ref?: ForwardedRef<HTMLDivElement>;\n  }\n) => ReactElement<DropdownProps<Item, Selection>>;\n"],"names":["forwardRef","Dropdown","itemToString","defaultItemToString","ListProps","useId","useRef","useForkRef","useCollectionItems","useDropdown","useCallback","cloneElement","forwardCallbackProps","jsx","DropdownButton","CollectionProvider","jsxs","DropdownBase","List"],"mappings":"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"}
+{"version":3,"file":"Dropdown.js","sources":["../src/dropdown/Dropdown.tsx"],"sourcesContent":["import { useForkRef, useIdMemo as useId } from \"@salt-ds/core\";\nimport {\n  type ForwardedRef,\n  type ReactElement,\n  cloneElement,\n  forwardRef,\n  useCallback,\n  useRef,\n} from \"react\";\n\nimport {\n  type CollectionItem,\n  CollectionProvider,\n  type SelectionProps,\n  type SelectionStrategy,\n  type SingleSelectionStrategy,\n  itemToString as defaultItemToString,\n  useCollectionItems,\n} from \"../common-hooks\";\nimport { List } from \"../list/List\";\nimport type { ListProps } from \"../list/listTypes\";\nimport { forwardCallbackProps } from \"../utils\";\nimport { DropdownBase, type MaybeChildProps } from \"./DropdownBase\";\nimport { DropdownButton } from \"./DropdownButton\";\nimport type { DropdownBaseProps } from \"./dropdownTypes\";\nimport { useDropdown } from \"./useDropdown\";\n\nexport interface DropdownProps<\n  Item = string,\n  Selection extends SelectionStrategy = \"default\",\n> extends DropdownBaseProps,\n    Pick<\n      ListProps<Item, Selection>,\n      \"ListItem\" | \"itemToString\" | \"source\" | \"width\"\n    >,\n    SelectionProps<Item, Selection> {\n  ListProps?: Omit<\n    ListProps<Item, Selection>,\n    \"ListItem\" | \"itemToString\" | \"source\"\n  >;\n}\n\nexport const Dropdown = forwardRef(function Dropdown<\n  Item = string,\n  Selection extends SelectionStrategy = \"default\",\n>(\n  {\n    \"aria-label\": ariaLabel,\n    children,\n    defaultIsOpen,\n    defaultSelected,\n    id: idProp,\n    isOpen: isOpenProp,\n    itemToString = defaultItemToString,\n    onOpenChange,\n    onSelectionChange,\n    onSelect,\n    selected: selectedProp,\n    selectionStrategy,\n    source,\n    triggerComponent,\n    ListItem,\n    ListProps,\n    width = 180,\n    ...props\n  }: DropdownProps<Item, Selection>,\n  forwardedRef: ForwardedRef<HTMLDivElement>,\n) {\n  const id = useId(idProp);\n  const rootRef = useRef<HTMLDivElement>(null);\n  const forkedRef = useForkRef<HTMLDivElement>(rootRef, forwardedRef);\n\n  const collectionHook = useCollectionItems<Item>({\n    id,\n    source,\n    children,\n    options: {\n      itemToString,\n    },\n  });\n\n  const {\n    highlightedIndex,\n    triggerLabel,\n    listHandlers,\n    listControlProps,\n    selected,\n    ...dropdownListHook\n  } = useDropdown<Item, Selection>({\n    collectionHook,\n    defaultHighlightedIndex: ListProps?.defaultHighlightedIndex,\n    defaultIsOpen,\n    defaultSelected: collectionHook.itemToCollectionItem<\n      Selection,\n      typeof defaultSelected\n    >(defaultSelected),\n    highlightedIndex: ListProps?.highlightedIndex,\n    isOpen: isOpenProp,\n    itemToString,\n    label: \"Dropdown\",\n    onHighlight: ListProps?.onHighlight,\n    onOpenChange,\n    onSelectionChange,\n    onSelect,\n    selected: collectionHook.itemToCollectionItem<\n      Selection,\n      typeof selectedProp\n    >(selectedProp),\n    selectionStrategy,\n  });\n\n  const collectionItemsToItem = useCallback(\n    (\n      itemOrItems?: CollectionItem<Item> | null | CollectionItem<Item>[],\n    ):\n      | undefined\n      | (Selection extends SingleSelectionStrategy ? Item | null : Item[]) => {\n      type returnType = Selection extends SingleSelectionStrategy\n        ? Item | null\n        : Item[];\n      if (Array.isArray(itemOrItems)) {\n        return itemOrItems.map((i) => i.value) as returnType;\n      }\n      if (itemOrItems) {\n        return itemOrItems.value as returnType;\n      }\n    },\n    [],\n  );\n\n  const getTriggerComponent = () => {\n    const ariaProps = {\n      \"aria-activedescendant\": dropdownListHook.isOpen\n        ? listControlProps?.[\"aria-activedescendant\"]\n        : undefined,\n      \"aria-label\": ariaLabel,\n    };\n    if (triggerComponent) {\n      const ownProps = triggerComponent.props as MaybeChildProps;\n      return cloneElement(\n        triggerComponent,\n        forwardCallbackProps(ownProps, {\n          ...(dropdownListHook.isOpen ? listControlProps : {}),\n          ...ariaProps,\n        }),\n      );\n    }\n    return (\n      <DropdownButton\n        label={triggerLabel}\n        {...(dropdownListHook.isOpen ? listControlProps : {})}\n        {...ariaProps}\n      />\n    );\n  };\n\n  return (\n    <CollectionProvider<Item> collectionHook={collectionHook}>\n      <DropdownBase\n        {...props}\n        id={id}\n        isOpen={dropdownListHook.isOpen}\n        onOpenChange={dropdownListHook.onOpenChange}\n        ref={forkedRef}\n        width={width}\n      >\n        {getTriggerComponent()}\n        <List<Item, Selection>\n          ListItem={ListItem}\n          itemToString={itemToString}\n          {...ListProps}\n          highlightedIndex={highlightedIndex}\n          listHandlers={listHandlers}\n          onSelectionChange={onSelectionChange}\n          onSelect={onSelect}\n          selected={collectionItemsToItem(selected)}\n          selectionStrategy={selectionStrategy}\n          data-testid=\"dropdown-list\"\n        />\n      </DropdownBase>\n    </CollectionProvider>\n  );\n}) as <Item, Selection extends SelectionStrategy = \"default\">(\n  props: DropdownProps<Item, Selection> & {\n    ref?: ForwardedRef<HTMLDivElement>;\n  },\n) => ReactElement<DropdownProps<Item, Selection>>;\n"],"names":["forwardRef","Dropdown","itemToString","defaultItemToString","useId","useRef","useForkRef","useCollectionItems","useDropdown","useCallback","cloneElement","forwardCallbackProps","jsx","DropdownButton","CollectionProvider","jsxs","DropdownBase","List"],"mappings":"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"}

package/dist-cjs/dropdown/DropdownBase.js

@@ -5,14 +5,14 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('@floating-ui/react');
 var core = require('@salt-ds/core');
+var styles = require('@salt-ds/styles');
 var clsx = require('clsx');
 var React = require('react');
-var forwardCallbackProps = require('../utils/forwardCallbackProps.js');
-var useDropdownBase = require('./useDropdownBase.js');
 var Portal = require('../portal/Portal.js');
+var forwardCallbackProps = require('../utils/forwardCallbackProps.js');
 var WindowContext = require('../window/WindowContext.js');
 require('../window/ElectronWindow.js');
-var styles = require('@salt-ds/styles');
+var useDropdownBase = require('./useDropdownBase.js');
 var window = require('@salt-ds/window');
 var Dropdown = require('./Dropdown.css.js');
 

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

@@ -1 +1 @@
-{"version":3,"file":"DropdownBase.js","sources":["../src/dropdown/DropdownBase.tsx"],"sourcesContent":["import { flip, limitShift, shift, size } from \"@floating-ui/react\";\nimport {\n  makePrefixer,\n  useFloatingUI,\n  useForkRef,\n  useIdMemo as useId,\n} from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { Children, cloneElement, forwardRef, useRef, useState } from \"react\";\nimport { forwardCallbackProps } from \"../utils\";\nimport { DropdownBaseProps } from \"./dropdownTypes\";\nimport { useDropdownBase } from \"./useDropdownBase\";\nimport { Portal } from \"../portal\";\nimport { isDesktop, useWindow as usePortalWindow } from \"../window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport { useWindow } from \"@salt-ds/window\";\n\nimport dropdownCss from \"./Dropdown.css\";\n// Any component may be passed as our trigger or popup component.\n// Define the common props that we will act on, if present,\n// so we can type them.\nexport type MaybeChildProps = {\n  className?: string;\n  id?: string;\n  role?: string;\n  width: number | string;\n};\n\nconst withBaseName = makePrefixer(\"saltDropdown\");\n\nexport const DropdownBase = forwardRef<HTMLDivElement, DropdownBaseProps>(\n  function Dropdown(\n    {\n      \"aria-labelledby\": ariaLabelledByProp,\n      children,\n      className: classNameProp,\n      container,\n      defaultIsOpen,\n      disabled,\n      disablePortal,\n      fullWidth,\n      id: idProp,\n      isOpen: isOpenProp,\n      onKeyDown,\n      onOpenChange,\n      openOnFocus,\n      placement = \"bottom-start\",\n      popupWidth,\n      width,\n      ...htmlAttributes\n    },\n    forwardedRef\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-dropdown\",\n      css: dropdownCss,\n      window: targetWindow,\n    });\n\n    const rootRef = useRef<HTMLDivElement>(null);\n    const className = clsx(withBaseName(), classNameProp, {\n      [withBaseName(\"fullWidth\")]: fullWidth,\n      [withBaseName(\"disabled\")]: disabled,\n    });\n    const [trigger, popupComponent] = Children.toArray(\n      children\n    ) as JSX.Element[];\n    const id = useId(idProp);\n    const Window = usePortalWindow();\n\n    const { componentProps, popperRef, isOpen, triggerProps } = useDropdownBase(\n      {\n        ariaLabelledBy: ariaLabelledByProp,\n        defaultIsOpen,\n        disabled,\n        fullWidth,\n        id,\n        isOpen: isOpenProp,\n        onOpenChange,\n        onKeyDown,\n        openOnFocus,\n        popupComponent,\n        popupWidth,\n        rootRef,\n        width,\n      }\n    );\n    const [maxPopupHeight, setMaxPopupHeight] = useState<number | undefined>(\n      undefined\n    );\n\n    const middleware = isDesktop\n      ? []\n      : [\n          flip({\n            fallbackPlacements: [\"bottom-start\", \"top-start\"],\n          }),\n          shift({ limiter: limitShift() }),\n          size({\n            apply({ availableHeight }) {\n              setMaxPopupHeight(availableHeight);\n            },\n          }),\n        ];\n\n    const { reference, floating, x, y, strategy } = useFloatingUI({\n      placement,\n      middleware,\n    });\n\n    const handlePopperListAdapterRef = useForkRef<HTMLDivElement>(\n      reference,\n      forwardedRef\n    );\n    const handleRootRef = useForkRef(rootRef, handlePopperListAdapterRef);\n    const handleFloatingRef = useForkRef<HTMLDivElement>(floating, popperRef);\n    // TODO maybe we should pass style, with maxHeight, to the popupComponent\n\n    const getTriggerComponent = () => {\n      const {\n        id: defaultId,\n        role: defaultRole,\n        ...restTriggerProps\n      } = triggerProps;\n\n      const {\n        id = defaultId,\n        role = defaultRole,\n        ...ownProps\n      } = trigger.props as MaybeChildProps;\n\n      return cloneElement(\n        trigger,\n        forwardCallbackProps(ownProps, {\n          ...restTriggerProps,\n          id,\n          role,\n        })\n      );\n    };\n\n    const getPopupComponent = () => {\n      const { id: defaultId, width, ...restComponentProps } = componentProps;\n      const {\n        className,\n        id = defaultId,\n        width: ownWidth,\n        ...ownProps\n      } = popupComponent.props as MaybeChildProps;\n      return cloneElement(popupComponent, {\n        ...ownProps,\n        ...restComponentProps,\n        className: clsx(className, withBaseName(\"popup-component\")),\n        id,\n        width: ownWidth ?? width,\n      });\n    };\n\n    return (\n      <div\n        {...htmlAttributes}\n        className={className}\n        data-testid=\"dropdown\"\n        id={idProp}\n        ref={handleRootRef}\n      >\n        {getTriggerComponent()}\n        {isOpen && (\n          <Portal disablePortal={disablePortal} container={container}>\n            <Window\n              className={clsx(withBaseName(\"popup\"), classNameProp)}\n              id={`${id}-popup`}\n              style={{\n                top: y ?? 0,\n                left: x ?? 0,\n                position: strategy,\n                maxHeight: maxPopupHeight,\n              }}\n              ref={handleFloatingRef}\n            >\n              {getPopupComponent()}\n            </Window>\n          </Portal>\n        )}\n      </div>\n    );\n  }\n);\n"],"names":["makePrefixer","forwardRef","Dropdown","useWindow","useComponentCssInjection","dropdownCss","useRef","clsx","Children","useId","usePortalWindow","useDropdownBase","useState","isDesktop","flip","shift","limitShift","size","useFloatingUI","useForkRef","id","cloneElement","forwardCallbackProps","width","className","jsxs","jsx","Portal"],"mappings":"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"}
+{"version":3,"file":"DropdownBase.js","sources":["../src/dropdown/DropdownBase.tsx"],"sourcesContent":["import { flip, limitShift, shift, size } from \"@floating-ui/react\";\nimport {\n  makePrefixer,\n  useFloatingUI,\n  useForkRef,\n  useIdMemo as useId,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { clsx } from \"clsx\";\nimport { Children, cloneElement, forwardRef, useRef, useState } from \"react\";\nimport { Portal } from \"../portal\";\nimport { forwardCallbackProps } from \"../utils\";\nimport { isDesktop, useWindow as usePortalWindow } from \"../window\";\nimport type { DropdownBaseProps } from \"./dropdownTypes\";\nimport { useDropdownBase } from \"./useDropdownBase\";\n\nimport { useWindow } from \"@salt-ds/window\";\n\nimport dropdownCss from \"./Dropdown.css\";\n// Any component may be passed as our trigger or popup component.\n// Define the common props that we will act on, if present,\n// so we can type them.\nexport type MaybeChildProps = {\n  className?: string;\n  id?: string;\n  role?: string;\n  width: number | string;\n};\n\nconst withBaseName = makePrefixer(\"saltDropdown\");\n\nexport const DropdownBase = forwardRef<HTMLDivElement, DropdownBaseProps>(\n  function Dropdown(\n    {\n      \"aria-labelledby\": ariaLabelledByProp,\n      children,\n      className: classNameProp,\n      container,\n      defaultIsOpen,\n      disabled,\n      disablePortal,\n      fullWidth,\n      id: idProp,\n      isOpen: isOpenProp,\n      onKeyDown,\n      onOpenChange,\n      openOnFocus,\n      placement = \"bottom-start\",\n      popupWidth,\n      width,\n      ...htmlAttributes\n    },\n    forwardedRef,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-dropdown\",\n      css: dropdownCss,\n      window: targetWindow,\n    });\n\n    const rootRef = useRef<HTMLDivElement>(null);\n    const className = clsx(withBaseName(), classNameProp, {\n      [withBaseName(\"fullWidth\")]: fullWidth,\n      [withBaseName(\"disabled\")]: disabled,\n    });\n    const [trigger, popupComponent] = Children.toArray(\n      children,\n    ) as JSX.Element[];\n    const id = useId(idProp);\n    const Window = usePortalWindow();\n\n    const { componentProps, popperRef, isOpen, triggerProps } = useDropdownBase(\n      {\n        ariaLabelledBy: ariaLabelledByProp,\n        defaultIsOpen,\n        disabled,\n        fullWidth,\n        id,\n        isOpen: isOpenProp,\n        onOpenChange,\n        onKeyDown,\n        openOnFocus,\n        popupComponent,\n        popupWidth,\n        rootRef,\n        width,\n      },\n    );\n    const [maxPopupHeight, setMaxPopupHeight] = useState<number | undefined>(\n      undefined,\n    );\n\n    const middleware = isDesktop\n      ? []\n      : [\n          flip({\n            fallbackPlacements: [\"bottom-start\", \"top-start\"],\n          }),\n          shift({ limiter: limitShift() }),\n          size({\n            apply({ availableHeight }) {\n              setMaxPopupHeight(availableHeight);\n            },\n          }),\n        ];\n\n    const { reference, floating, x, y, strategy } = useFloatingUI({\n      placement,\n      middleware,\n    });\n\n    const handlePopperListAdapterRef = useForkRef<HTMLDivElement>(\n      reference,\n      forwardedRef,\n    );\n    const handleRootRef = useForkRef(rootRef, handlePopperListAdapterRef);\n    const handleFloatingRef = useForkRef<HTMLDivElement>(floating, popperRef);\n    // TODO maybe we should pass style, with maxHeight, to the popupComponent\n\n    const getTriggerComponent = () => {\n      const {\n        id: defaultId,\n        role: defaultRole,\n        ...restTriggerProps\n      } = triggerProps;\n\n      const {\n        id = defaultId,\n        role = defaultRole,\n        ...ownProps\n      } = trigger.props as MaybeChildProps;\n\n      return cloneElement(\n        trigger,\n        forwardCallbackProps(ownProps, {\n          ...restTriggerProps,\n          id,\n          role,\n        }),\n      );\n    };\n\n    const getPopupComponent = () => {\n      const { id: defaultId, width, ...restComponentProps } = componentProps;\n      const {\n        className,\n        id = defaultId,\n        width: ownWidth,\n        ...ownProps\n      } = popupComponent.props as MaybeChildProps;\n      return cloneElement(popupComponent, {\n        ...ownProps,\n        ...restComponentProps,\n        className: clsx(className, withBaseName(\"popup-component\")),\n        id,\n        width: ownWidth ?? width,\n      });\n    };\n\n    return (\n      <div\n        {...htmlAttributes}\n        className={className}\n        data-testid=\"dropdown\"\n        id={idProp}\n        ref={handleRootRef}\n      >\n        {getTriggerComponent()}\n        {isOpen && (\n          <Portal disablePortal={disablePortal} container={container}>\n            <Window\n              className={clsx(withBaseName(\"popup\"), classNameProp)}\n              id={`${id}-popup`}\n              style={{\n                top: y ?? 0,\n                left: x ?? 0,\n                position: strategy,\n                maxHeight: maxPopupHeight,\n              }}\n              ref={handleFloatingRef}\n            >\n              {getPopupComponent()}\n            </Window>\n          </Portal>\n        )}\n      </div>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","Dropdown","useWindow","useComponentCssInjection","dropdownCss","useRef","clsx","Children","useId","usePortalWindow","useDropdownBase","useState","isDesktop","flip","shift","limitShift","size","useFloatingUI","useForkRef","id","cloneElement","forwardCallbackProps","width","className","jsxs","jsx","Portal"],"mappings":"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"}