@salt-ds/lab 1.0.0-alpha.46 → 1.0.0-alpha.48

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

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

package/dist-es/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":["DatePickerPanel","CalendarProps","dateInputPanelCss"],"mappings":"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"}
+{"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  FormFieldContext,\n  FormFieldContextValue,\n  FormFieldHelperText,\n  makePrefixer,\n  StackLayout,\n  useFloatingComponent,\n  useFormFieldProps,\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  isRangeOrOffsetSelectionWithStartDate,\n  RangeSelectionValueType,\n  SingleSelectionValueType,\n  UseRangeSelectionCalendarProps,\n  UseSingleSelectionCalendarProps,\n} from \"../calendar\";\nimport { DateValue, endOfMonth, startOfMonth } from \"@internationalized/date\";\n\nfunction clampDate(date: DateValue | null, max: DateValue | null) {\n  if (!date || !max) return undefined;\n  return date.compare(max) === 0 ? max : date;\n}\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\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]);\n\n  const firstCalendarProps: CalendarProps = isRangePicker\n    ? {\n        selectionVariant: \"range\",\n        // This clamps the hovered date to the end of the visible month, otherwise the hovered date is mirrored across calendars.\n        hoveredDate:\n          selectedDate?.startDate && !compact\n            ? clampDate(hoveredDate, endOfMonth(selectedDate?.startDate))\n            : hoveredDate,\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":["DatePickerPanel","CalendarProps","dateInputPanelCss"],"mappings":"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"}

package/dist-types/calendar/useCalendar.d.ts

@@ -16,10 +16,7 @@ interface BaseUseCalendarProps {
 export declare type useCalendarProps = (Omit<UseSingleSelectionCalendarProps, "isDaySelectable"> | Omit<UseMultiSelectionCalendarProps, "isDaySelectable"> | Omit<UseRangeSelectionCalendarProps, "isDaySelectable"> | Omit<UseOffsetSelectionCalendarProps, "isDaySelectable">) & BaseUseCalendarProps;
 export declare function useCalendar(props: useCalendarProps): {
     state: {
-        selectedDate: import("@internationalized/date").CalendarDate | import("@internationalized/date").CalendarDateTime | import("@internationalized/date").ZonedDateTime | {
-            startDate?: DateValue | undefined;
-            endDate?: DateValue | undefined;
-        } | {
+        selectedDate: import("@internationalized/date").CalendarDate | import("@internationalized/date").CalendarDateTime | import("@internationalized/date").ZonedDateTime | import("./useSelection").RangeSelectionValueType | {
             startDate?: DateValue | undefined;
             endDate?: DateValue | undefined;
         } | DateValue[] | null | undefined;

package/dist-types/calendar/useSelection.d.ts

@@ -8,9 +8,9 @@ interface BaseUseSelectionCalendarProps<SelectionVariantType> {
     isDaySelectable: (date?: DateValue) => boolean;
     onHoveredDateChange?: (event: SyntheticEvent, hoveredDate: DateValue | null) => void;
 }
-declare type SingleSelectionValueType = DateValue;
+export declare type SingleSelectionValueType = DateValue;
 declare type MultiSelectionValueType = DateValue[];
-declare type RangeSelectionValueType = {
+export declare type RangeSelectionValueType = {
     startDate?: DateValue;
     endDate?: DateValue;
 };

package/dist-types/date-input/DateInput.d.ts

@@ -1,6 +1,7 @@
-import { ChangeEventHandler, ComponentPropsWithoutRef, InputHTMLAttributes, ReactNode, RefObject, SyntheticEvent } from "react";
+import { ChangeEvent, ComponentPropsWithoutRef, InputHTMLAttributes, ReactNode, RefObject, SyntheticEvent } from "react";
 import { DateValue } from "@internationalized/date";
-export interface DateInputProps extends Omit<ComponentPropsWithoutRef<"div">, "defaultValue">, Pick<ComponentPropsWithoutRef<"input">, "disabled" | "placeholder"> {
+import { RangeSelectionValueType, SingleSelectionValueType } from "../calendar";
+export interface DateInputProps<SelectionVariantType> extends Omit<ComponentPropsWithoutRef<"div">, "defaultValue" | "onChange">, Pick<ComponentPropsWithoutRef<"input">, "disabled" | "placeholder"> {
     ariaLabel?: string;
     /**
      * The marker to use in an empty read only DateInput.
@@ -44,12 +45,12 @@ export interface DateInputProps extends Omit<ComponentPropsWithoutRef<"div">, "d
      */
     selectionVariant?: "default" | "range";
     /**
-     * Callback fired when the selected daate change.
+     * Callback fired when the selected date change.
      */
-    onSelectionChange?: (event: SyntheticEvent, selectedDate?: DateValue | {
-        startDate?: DateValue;
-        endDate?: DateValue;
-    }) => void;
-    onChange?: ChangeEventHandler<HTMLInputElement>;
+    onSelectionChange?: (event: SyntheticEvent, selectedDate?: SelectionVariantType) => void;
+    /**
+     * Callback fired when the input value change.
+     */
+    onChange?: SelectionVariantType extends SingleSelectionValueType ? (event: ChangeEvent<HTMLInputElement>, selectedDateInputValue?: string) => void : (event: ChangeEvent<HTMLInputElement>, startDateInputValue?: string, endDateInputValue?: string) => void;
 }
-export declare const DateInput: import("react").ForwardRefExoticComponent<DateInputProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const DateInput: import("react").ForwardRefExoticComponent<DateInputProps<DateValue | RangeSelectionValueType> & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/date-picker/DatePicker.d.ts

@@ -1,8 +1,8 @@
-import { ChangeEventHandler, ComponentPropsWithoutRef, SyntheticEvent } from "react";
+import { ChangeEvent, SyntheticEvent } from "react";
+import { DateInputProps } from "../date-input";
 import { DateValue } from "@internationalized/date";
-import { CalendarProps } from "../calendar";
-export interface DatePickerProps extends Omit<ComponentPropsWithoutRef<"div">, "defaultValue">, Pick<ComponentPropsWithoutRef<"input">, "disabled" | "value" | "defaultValue" | "placeholder"> {
-    inputAriaLabel?: string;
+import { CalendarProps, RangeSelectionValueType, SingleSelectionValueType } from "../calendar";
+export interface DatePickerProps<SelectionVariantType> extends DateInputProps<SelectionVariantType> {
     /**
      * Selection variant. Defaults to single select.
      */
@@ -15,18 +15,12 @@ export interface DatePickerProps extends Omit<ComponentPropsWithoutRef<"div">, "
      * The selected date value. Use when the component is controlled.
      * Can be a single date or an object with start and end dates for range selection.
      */
-    selectedDate?: DateValue | {
-        startDate?: DateValue;
-        endDate?: DateValue;
-    };
+    selectedDate?: SelectionVariantType;
     /**
      * The default date value. Use when the component is not controlled.
      * Can be a single date or an object with start and end dates for range selection.
      */
-    defaultSelectedDate?: DateValue | {
-        startDate: DateValue;
-        endDate: DateValue;
-    };
+    defaultSelectedDate?: SelectionVariantType;
     /**
      * Props to be passed to the Calendar component.
      */
@@ -44,13 +38,13 @@ export interface DatePickerProps extends Omit<ComponentPropsWithoutRef<"div">, "
      */
     open?: boolean;
     /**
-     * Helper text to display in the panel
+     * The default open value. Use when the component is not controlled.
      */
-    helperText?: string;
+    defaultOpen?: boolean;
     /**
-     * If `true`, the component is read only.
+     * Helper text to display in the panel
      */
-    readOnly?: boolean;
+    helperText?: string;
     /**
      * Validation status.
      */
@@ -58,13 +52,15 @@ export interface DatePickerProps extends Omit<ComponentPropsWithoutRef<"div">, "
     /**
      * Callback fired when the selected date change.
      */
-    onSelectionChange?: (event: SyntheticEvent, selectedDate?: DateValue | {
-        startDate?: DateValue;
-        endDate?: DateValue;
-    }) => void;
+    onSelectionChange?: (event: SyntheticEvent, selectedDate?: SelectionVariantType) => void;
     /**
      * Callback fired when the input value change.
      */
-    onChange?: ChangeEventHandler<HTMLInputElement>;
+    onChange?: SelectionVariantType extends SingleSelectionValueType ? (event: ChangeEvent<HTMLInputElement>, selectedDateInputValue?: string) => void : (event: ChangeEvent<HTMLInputElement>, startDateInputValue?: string, endDateInputValue?: string) => void;
+    /**
+     * Number of Calendars to be shown if selectionVariant is range.
+     * 2 is the default value.
+     */
+    visibleMonths?: 1 | 2;
 }
-export declare const DatePicker: import("react").ForwardRefExoticComponent<DatePickerProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const DatePicker: import("react").ForwardRefExoticComponent<DatePickerProps<DateValue | RangeSelectionValueType> & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/date-picker/DatePickerContext.d.ts

@@ -1,21 +1,19 @@
 import { UseFloatingUIReturn } from "@salt-ds/core";
 import { DateValue } from "@internationalized/date";
-export interface DatePickerContextValue extends Partial<Pick<UseFloatingUIReturn, "context">> {
+import { RangeSelectionValueType } from "../calendar";
+export interface DatePickerContextValue<SelectionVariantType> extends Partial<Pick<UseFloatingUIReturn, "context">> {
     openState: boolean;
     setOpen: (newOpen: boolean) => void;
     disabled: boolean;
-    startDate: DateValue | undefined;
-    defaultStartDate: DateValue | undefined;
-    setStartDate: (newStartDate: DateValue | undefined) => void;
+    selectedDate: SelectionVariantType | undefined;
+    defaultSelectedDate: SelectionVariantType | undefined;
+    setSelectedDate: (newStartDate: SelectionVariantType | undefined) => void;
     startVisibleMonth: DateValue | undefined;
     setStartVisibleMonth: (newStartDate: DateValue | undefined) => void;
-    endDate: DateValue | undefined;
     endVisibleMonth: DateValue | undefined;
     setEndVisibleMonth: (newStartDate: DateValue | undefined) => void;
-    defaultEndDate: DateValue | undefined;
-    setEndDate: (newEndDate: DateValue | undefined) => void;
     selectionVariant: "default" | "range";
     getPanelPosition: () => Record<string, unknown>;
 }
-export declare const DatePickerContext: import("react").Context<DatePickerContextValue>;
-export declare function useDatePickerContext(): DatePickerContextValue;
+export declare const DatePickerContext: import("react").Context<DatePickerContextValue<DateValue | RangeSelectionValueType>>;
+export declare function useDatePickerContext(): DatePickerContextValue<DateValue | RangeSelectionValueType>;

package/dist-types/date-picker/DatePickerPanel.d.ts

@@ -1,12 +1,10 @@
 import { ComponentPropsWithoutRef, SyntheticEvent } from "react";
-import { CalendarProps } from "../calendar";
+import { CalendarProps, RangeSelectionValueType } from "../calendar";
 import { DateValue } from "@internationalized/date";
-export interface DatePickerPanelProps extends ComponentPropsWithoutRef<"div"> {
-    onSelect?: (event: SyntheticEvent, selectedDate?: DateValue | {
-        startDate?: DateValue;
-        endDate?: DateValue;
-    }) => void;
+export interface DatePickerPanelProps<SelectionVariantType> extends ComponentPropsWithoutRef<"div"> {
+    onSelect?: (event: SyntheticEvent, selectedDate?: SelectionVariantType) => void;
     helperText?: string;
+    visibleMonths?: 1 | 2;
     CalendarProps?: Partial<Omit<CalendarProps, "selectionVariant" | "selectedDate" | "defaultSelectedDate" | "onSelectedDateChange">>;
 }
-export declare const DatePickerPanel: import("react").ForwardRefExoticComponent<DatePickerPanelProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const DatePickerPanel: import("react").ForwardRefExoticComponent<DatePickerPanelProps<DateValue | RangeSelectionValueType> & import("react").RefAttributes<HTMLDivElement>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salt-ds/lab",
-  "version": "1.0.0-alpha.46",
+  "version": "1.0.0-alpha.48",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -26,10 +26,10 @@
     "react-window": "^1.8.6",
     "rifm": "^0.12.0",
     "tinycolor2": "^1.4.2",
-    "@salt-ds/core": "^1.28.1",
+    "@salt-ds/core": "^1.30.0",
     "@salt-ds/window": "^0.1.1",
     "@salt-ds/styles": "^0.2.1",
-    "@salt-ds/icons": "^1.12.0"
+    "@salt-ds/icons": "^1.12.1"
   },
   "peerDependencies": {
     "@types/react": ">=16.14.0",