@vuu-ui/vuu-ui-controls 2.1.18 → 2.1.19-beta.2

package/src/context-panel-provider/ContextPanelProvider.js

@@ -0,0 +1,80 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useState } from "react";
+import { isUnconfiguredProperty, layoutFromJson, useLayoutOperation } from "@vuu-ui/vuu-layout";
+import { Dialog, DialogCloseButton, DialogContent, DialogHeader } from "@salt-ds/core";
+const UndefinedShowContextPanel = ()=>{
+    console.warn("[ContextPanelContext] no implementation for showContextPanel, you need to add a ContextPanelProvider");
+};
+const ContextPanelContext = /*#__PURE__*/ createContext({
+    showContextPanel: UndefinedShowContextPanel
+});
+const ContextPanelProvider = ({ children, hideContextPanel: hideContextPanelProp, showContextPanel: showContextPanelProp })=>{
+    const { hideContextPanel: inheritedHideContextPanel, showContextPanel: inheritedShowContextPanel } = useContext(ContextPanelContext);
+    const { showComponentInContextPanel } = useLayoutOperation();
+    const [dialog, setDialog] = useState(null);
+    const handleOpenChange = useCallback((isOpen)=>{
+        if (!isOpen) setDialog(null);
+    }, []);
+    const hideContextPanel = hideContextPanelProp ?? inheritedHideContextPanel;
+    const showContextPanel = useCallback((elementOrComponentType, title, props)=>{
+        if (showContextPanelProp) showContextPanelProp(elementOrComponentType, title, props);
+        else if (inheritedShowContextPanel !== UndefinedShowContextPanel) inheritedShowContextPanel(elementOrComponentType, title, props);
+        else if (isUnconfiguredProperty(showComponentInContextPanel)) {
+            if ("string" == typeof elementOrComponentType) {
+                const component = "string" == typeof elementOrComponentType ? layoutFromJson({
+                    type: elementOrComponentType,
+                    props
+                }, "") : elementOrComponentType;
+                setDialog(/*#__PURE__*/ jsxs(Dialog, {
+                    open: true,
+                    onOpenChange: handleOpenChange,
+                    children: [
+                        /*#__PURE__*/ jsx(DialogCloseButton, {
+                            appearance: "transparent",
+                            "data-embedded": true,
+                            "data-icon": "close",
+                            onClick: ()=>setDialog(null),
+                            sentiment: "neutral"
+                        }),
+                        /*#__PURE__*/ jsx(DialogHeader, {
+                            header: title
+                        }),
+                        /*#__PURE__*/ jsx(DialogContent, {
+                            children: component
+                        })
+                    ]
+                }));
+            }
+        } else {
+            const component = "string" == typeof elementOrComponentType ? {
+                type: elementOrComponentType,
+                props
+            } : elementOrComponentType;
+            showComponentInContextPanel(component, title);
+        }
+    }, [
+        handleOpenChange,
+        inheritedShowContextPanel,
+        showComponentInContextPanel,
+        showContextPanelProp
+    ]);
+    return /*#__PURE__*/ jsxs(ContextPanelContext.Provider, {
+        value: {
+            hideContextPanel,
+            showContextPanel
+        },
+        children: [
+            children,
+            dialog
+        ]
+    });
+};
+function useContextPanel() {
+    const { showContextPanel } = useContext(ContextPanelContext);
+    return showContextPanel;
+}
+function useHideContextPanel() {
+    const { hideContextPanel } = useContext(ContextPanelContext);
+    return hideContextPanel;
+}
+export { ContextPanelContext, ContextPanelProvider, useContextPanel, useHideContextPanel };

package/src/cycle-state-button/CycleStateButton.js

@@ -0,0 +1,30 @@
+import { jsx } from "react/jsx-runtime";
+import { Button } from "@salt-ds/core";
+import clsx from "clsx";
+import { forwardRef, useCallback } from "react";
+const classBase = "vuuCycleStateButton";
+const getNextValue = (value, valueList)=>{
+    const index = valueList.map((v)=>v.toUpperCase()).indexOf(value.toUpperCase());
+    if (index === valueList.length - 1) return valueList[0];
+    return valueList[index + 1];
+};
+const CycleStateButton_CycleStateButton = /*#__PURE__*/ forwardRef(function({ className, onChange, onCommit, value = "", values, ...buttonProps }, forwardedRef) {
+    const handleClick = useCallback(async (evt)=>{
+        const nextValue = getNextValue(value, values);
+        onChange?.(nextValue);
+        onCommit?.(evt, nextValue);
+    }, [
+        onChange,
+        onCommit,
+        value,
+        values
+    ]);
+    return /*#__PURE__*/ jsx(Button, {
+        ...buttonProps,
+        className: clsx(classBase, className, `${classBase}-${value.toLowerCase()}`),
+        onClick: handleClick,
+        ref: forwardedRef,
+        children: value
+    });
+});
+export { CycleStateButton_CycleStateButton as CycleStateButton };

package/src/cycle-state-button/index.js

@@ -0,0 +1 @@
+export * from "./CycleStateButton.js";

package/src/date-input/DateInput.css.js

@@ -0,0 +1,195 @@
+const css = `
+.saltDateInput {
+  --input-border: none;
+  --input-borderColor: var(--salt-editable-borderColor);
+  --input-borderStyle: var(--salt-editable-borderStyle);
+  --input-outlineColor: var(--salt-focused-outlineColor);
+  --input-borderWidth: var(--salt-size-border);
+  background: var(--saltDateInput-background, var(--input-background));
+  border: var(--input-border);
+  border-radius: var(--salt-palette-corner-weak, 0);
+  color: var(--saltDateInput-color, var(--salt-content-primary-foreground));
+  align-items: center;
+  gap: var(--salt-spacing-50);
+  font-family: var(--salt-text-fontFamily);
+  font-size: var(--saltDateInput-fontSize, var(--salt-text-fontSize));
+  height: var(--saltDateInput-height, var(--salt-size-base));
+  line-height: var(--saltDateInput-lineHeight, var(--salt-text-lineHeight));
+  min-height: var(--saltDateInput-minHeight, var(--salt-size-base));
+  min-width: var(--saltDateInput-minWidth, 4em);
+  padding-left: var(--saltDateInput-paddingLeft, var(--salt-spacing-100));
+  padding-right: var(--saltDateInput-paddingRight, var(--salt-spacing-100));
+  box-sizing: border-box;
+  width: 100%;
+  display: inline-flex;
+  position: relative;
+  overflow: hidden;
+}
+
+.saltDateInput:hover {
+  --input-borderStyle: var(--salt-editable-borderStyle-hover);
+  --input-borderColor: var(--salt-editable-borderColor-hover);
+  background: var(--saltDateInput-background-hover, var(--input-background-hover));
+  cursor: var(--salt-editable-cursor-hover);
+}
+
+.saltDateInput:active {
+  --input-borderColor: var(--salt-editable-borderColor-active);
+  --input-borderStyle: var(--salt-editable-borderStyle-active);
+  --input-borderWidth: var(--salt-editable-borderWidth-active);
+  background: var(--saltDateInput-background-active, var(--input-background-active));
+  cursor: var(--salt-editable-cursor-active);
+}
+
+.saltDateInput-primary {
+  --input-background: var(--salt-editable-primary-background);
+  --input-background-active: var(--salt-editable-primary-background-active);
+  --input-background-hover: var(--salt-editable-primary-background-hover);
+  --input-background-disabled: var(--salt-editable-primary-background-disabled);
+  --input-background-readonly: var(--salt-editable-primary-background-readonly);
+}
+
+.saltDateInput-secondary {
+  --input-background: var(--salt-editable-secondary-background);
+  --input-background-active: var(--salt-editable-secondary-background-active);
+  --input-background-hover: var(--salt-editable-secondary-background-active);
+  --input-background-disabled: var(--salt-editable-secondary-background-disabled);
+  --input-background-readonly: var(--salt-editable-secondary-background-readonly);
+}
+
+.saltDateInput-error, .saltDateInput-error:hover {
+  --input-background: var(--salt-status-error-background);
+  --input-background-active: var(--salt-status-error-background);
+  --input-background-hover: var(--salt-status-error-background);
+  --input-borderColor: var(--salt-status-error-borderColor);
+  --input-outlineColor: var(--salt-status-error-borderColor);
+}
+
+.saltDateInput-warning, .saltDateInput-warning:hover {
+  --input-background: var(--salt-status-warning-background);
+  --input-background-active: var(--salt-status-warning-background);
+  --input-background-hover: var(--salt-status-warning-background);
+  --input-borderColor: var(--salt-status-warning-borderColor);
+  --input-outlineColor: var(--salt-status-warning-borderColor);
+}
+
+.saltDateInput-success, .saltDateInput-success:hover {
+  --input-background: var(--salt-status-success-background);
+  --input-background-active: var(--salt-status-success-background);
+  --input-background-hover: var(--salt-status-success-background);
+  --input-borderColor: var(--salt-status-success-borderColor);
+  --input-outlineColor: var(--salt-status-success-borderColor);
+}
+
+.saltDateInput-input {
+  box-sizing: content-box;
+  color: inherit;
+  cursor: inherit;
+  font: inherit;
+  height: 100%;
+  letter-spacing: var(--saltDateInput-letterSpacing, 0);
+  text-align: left;
+  background: none;
+  border: none;
+  width: min-content;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  display: block;
+  overflow: hidden;
+}
+
+.saltDateInput-input:focus {
+  outline: none;
+}
+
+.saltDateInput-input::selection {
+  background: var(--salt-content-foreground-highlight);
+}
+
+.saltDateInput-input::placeholder {
+  color: var(--salt-content-secondary-foreground);
+  font-weight: var(--salt-text-fontWeight-small);
+}
+
+.saltDateInput-focused {
+  --input-borderColor: var(--input-outlineColor);
+  --input-borderWidth: var(--salt-editable-borderWidth-active);
+  outline: var(--saltDateInput-outline, var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--input-outlineColor));
+}
+
+.saltDateInput.saltDateInput-readOnly {
+  --input-borderColor: var(--salt-editable-borderColor-readonly);
+  --input-borderStyle: var(--salt-editable-borderStyle-readonly);
+  --input-borderWidth: var(--salt-size-border);
+  background: var(--input-background-readonly);
+  cursor: var(--salt-editable-cursor-readonly);
+}
+
+.saltDateInput-focused.saltDateInput-disabled {
+  --input-borderWidth: var(--salt-size-border);
+  outline: none;
+}
+
+.saltDateInput-focused.saltDateInput-readOnly {
+  --input-borderWidth: var(--salt-size-border);
+}
+
+.saltDateInput-disabled .saltDateInput-input::selection {
+  background: none;
+}
+
+.saltDateInput.saltDateInput-disabled, .saltDateInput.saltDateInput-disabled:hover, .saltDateInput.saltDateInput-disabled:active {
+  --input-borderColor: var(--salt-editable-borderColor-disabled);
+  --input-borderStyle: var(--salt-editable-borderStyle-disabled);
+  --input-borderWidth: var(--salt-size-border);
+  background: var(--input-background-disabled);
+  cursor: var(--salt-editable-cursor-disabled);
+  color: var(--saltDateInput-color-disabled, var(--salt-content-primary-foreground-disabled));
+}
+
+.saltDateInput-activationIndicator {
+  border-bottom: var(--input-borderWidth) var(--input-borderStyle) var(--input-borderColor);
+  width: 100%;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+}
+
+.saltDateInput.saltDateInput-bordered {
+  --input-border: var(--salt-size-border) var(--salt-container-borderStyle) var(--input-borderColor);
+  --input-borderWidth: 0;
+}
+
+.saltDateInput-bordered.saltDateInput-focused, .saltDateInput-bordered:active {
+  --input-borderWidth: var(--salt-editable-borderWidth-active);
+}
+
+.saltDateInput-bordered.saltDateInput-readOnly, .saltDateInput-bordered.saltDateInput-disabled:hover {
+  --input-borderWidth: 0;
+}
+
+.saltDateInput-endAdornmentContainer {
+  padding-left: var(--salt-spacing-100);
+  column-gap: var(--salt-spacing-100);
+  align-items: end;
+  margin-left: auto;
+  display: inline-flex;
+}
+
+.saltDateInput-endAdornmentContainer .saltButton ~ .saltButton {
+  margin-left: calc(-1 * var(--salt-spacing-50));
+}
+
+.saltDateInput-endAdornmentContainer .saltButton:last-child {
+  margin-right: calc(var(--salt-spacing-50) * -1);
+}
+
+.saltDateInput-endAdornmentContainer > .saltButton {
+  --saltButton-padding: var(--salt-spacing-50);
+  --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-100));
+}
+
+
+`;
+export default css;

package/src/date-input/DateInput.js

@@ -0,0 +1,210 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import { clsx } from "clsx";
+import { forwardRef, useEffect, useRef, useState } from "react";
+import { CalendarDate, DateFormatter, getLocalTimeZone, parseAbsoluteToLocal } from "@internationalized/date";
+import { StatusAdornment, makePrefixer, useForkRef, useFormFieldProps, useId } from "@salt-ds/core";
+import { isRangeOrOffsetSelectionWithStartDate } from "../calendar/index.js";
+import { useDatePickerContext } from "../date-picker/DatePickerContext.js";
+import DateInput_0 from "./DateInput.css";
+const withBaseName = makePrefixer("saltDateInput");
+const isInvalidDate = (value)=>value && Number.isNaN(new Date(value).getDay());
+const createDate = (date)=>{
+    if (!date || isInvalidDate(date)) return null;
+    return new Date(date);
+};
+const getIsoDate = (date)=>{
+    try {
+        return parseAbsoluteToLocal(date?.toISOString());
+    } catch (err) {
+        return;
+    }
+};
+function getCalendarDate(inputDate) {
+    const date = createDate(inputDate);
+    if (!date) return;
+    const isoDate = getIsoDate(date);
+    return isoDate && new CalendarDate(isoDate.year, isoDate.month, isoDate.day);
+}
+const defaultDateFormatter = (date)=>date ? new DateFormatter("EN-GB", {
+        day: "2-digit",
+        month: "short",
+        year: "numeric"
+    }).format(date.toDate(getLocalTimeZone())) : "";
+const DateInput_DateInput = /*#__PURE__*/ forwardRef(function({ className, disabled, "aria-label": ariaLabel, selectionVariant: selectionVariantProp, emptyReadOnlyMarker = "—", inputProps = {}, endAdornment, readOnly: readOnlyProp, validationStatus: validationStatusProp, variant = "primary", bordered = false, dateFormatter = defaultDateFormatter, placeholder = "dd mmm yyyy", startInputRef, endInputRef, onSelectionChange, onChange, ...rest }, ref) {
+    const wrapperRef = useRef(null);
+    const inputRef = useForkRef(ref, wrapperRef);
+    const inputStringFormatter = (input)=>{
+        const date = getCalendarDate(input);
+        return input && date ? dateFormatter(date) : input;
+    };
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "salt-dateInput",
+        css: DateInput_0,
+        window: targetWindow
+    });
+    const { selectedDate, setSelectedDate, selectionVariant: pickerSelectionVariant, openState, setOpen } = useDatePickerContext();
+    const selectionVariant = selectionVariantProp ?? pickerSelectionVariant;
+    const isRangePicker = isRangeOrOffsetSelectionWithStartDate(selectedDate) || "range" === selectionVariant;
+    const endDateInputID = useId();
+    const startDateInputID = useId();
+    const [focused, setFocused] = useState(false);
+    const [startDateStringValue, setStartDateStringValue] = useState(dateFormatter(isRangeOrOffsetSelectionWithStartDate(selectedDate) ? selectedDate?.startDate : selectedDate));
+    const [endDateStringValue, setEndDateStringValue] = useState(dateFormatter(isRangeOrOffsetSelectionWithStartDate(selectedDate) ? selectedDate?.endDate : void 0));
+    const { a11yProps: { "aria-describedby": formFieldDescribedBy, "aria-labelledby": formFieldLabelledBy } = {}, disabled: formFieldDisabled, readOnly: formFieldReadOnly, necessity: formFieldRequired, validationStatus: formFieldValidationStatus } = useFormFieldProps();
+    const isReadOnly = readOnlyProp || formFieldReadOnly;
+    const isDisabled = disabled || formFieldDisabled;
+    const validationStatus = formFieldValidationStatus ?? validationStatusProp;
+    const { "aria-describedby": dateInputDescribedBy, "aria-labelledby": dateInputLabelledBy, onBlur, onKeyDown, onFocus, required: dateInputPropsRequired, ...restDateInputProps } = inputProps;
+    useEffect(()=>{
+        if (isRangeOrOffsetSelectionWithStartDate(selectedDate)) {
+            selectedDate?.startDate && setStartDateStringValue(dateFormatter(selectedDate?.startDate));
+            selectedDate?.endDate && setEndDateStringValue(dateFormatter(selectedDate?.endDate));
+        } else setStartDateStringValue(dateFormatter(selectedDate));
+    }, [
+        selectedDate,
+        dateFormatter
+    ]);
+    const isRequired = formFieldRequired ? [
+        "required",
+        "asterisk"
+    ].includes(formFieldRequired) : dateInputPropsRequired;
+    const updateStartDate = (event, dateString)=>{
+        const inputDate = inputStringFormatter(dateString);
+        const calendarDate = getCalendarDate(inputDate);
+        const newSelectedDate = isRangePicker ? {
+            ...selectedDate,
+            startDate: calendarDate
+        } : calendarDate;
+        setSelectedDate(newSelectedDate);
+        onSelectionChange?.(event, newSelectedDate);
+    };
+    const updateEndDate = (event, dateString)=>{
+        const inputDate = inputStringFormatter(dateString);
+        const calendarDate = getCalendarDate(inputDate);
+        const newSelectedDate = {
+            ...selectedDate,
+            endDate: calendarDate
+        };
+        setSelectedDate(newSelectedDate);
+        onSelectionChange?.(event, newSelectedDate);
+    };
+    const handleFocus = (event)=>{
+        onFocus?.(event);
+        setFocused(true);
+    };
+    const handleStartDateBlur = (event)=>{
+        updateStartDate(event, event.target.value);
+        setFocused(false);
+    };
+    const handleStartDateChange = (event)=>{
+        const newStartValue = event.target.value;
+        setStartDateStringValue(newStartValue);
+        onChange?.(event, newStartValue, endDateStringValue);
+    };
+    const handleStartDateKeyDown = (event)=>{
+        if ("Enter" === event.key) {
+            updateStartDate(event, startDateStringValue);
+            setOpen(false);
+        }
+        if ("Tab" === event.key && event.shiftKey && openState) setOpen(false);
+    };
+    const handleEndDateBlur = (event)=>{
+        updateEndDate(event, event.target.value);
+        setFocused(false);
+    };
+    const handleEndDateChange = (event)=>{
+        const newEndValue = event.target.value;
+        setEndDateStringValue(newEndValue);
+        onChange?.(event, startDateStringValue, newEndValue);
+    };
+    const handleEndDateKeyDown = (event)=>{
+        if ("Enter" === event.key) {
+            updateEndDate(event, endDateStringValue);
+            setOpen(false);
+        }
+    };
+    const handleInputClick = (event)=>{
+        if (event.target === wrapperRef.current) startInputRef?.current?.focus();
+    };
+    return /*#__PURE__*/ jsxs("div", {
+        className: clsx(withBaseName(), withBaseName(variant), {
+            [withBaseName("focused")]: !isDisabled && focused,
+            [withBaseName("disabled")]: isDisabled,
+            [withBaseName("readOnly")]: isReadOnly,
+            [withBaseName(validationStatus ?? "")]: validationStatus,
+            [withBaseName("bordered")]: bordered
+        }, className),
+        onClick: (event)=>handleInputClick(event),
+        onKeyDown: onKeyDown,
+        onBlur: onBlur,
+        ref: inputRef,
+        ...rest,
+        children: [
+            /*#__PURE__*/ jsx("input", {
+                autoComplete: "off",
+                "aria-describedby": clsx(formFieldDescribedBy, dateInputDescribedBy),
+                "aria-labelledby": clsx(formFieldLabelledBy, dateInputLabelledBy, startDateInputID),
+                "aria-label": clsx("Start date", ariaLabel),
+                id: startDateInputID,
+                className: withBaseName("input"),
+                disabled: isDisabled,
+                readOnly: isReadOnly,
+                ref: startInputRef,
+                tabIndex: isDisabled ? -1 : 0,
+                onBlur: handleStartDateBlur,
+                onChange: handleStartDateChange,
+                onKeyDown: handleStartDateKeyDown,
+                onFocus: isDisabled ? void 0 : handleFocus,
+                placeholder: placeholder,
+                size: placeholder.length,
+                value: isReadOnly && !startDateStringValue ? emptyReadOnlyMarker : startDateStringValue,
+                ...restDateInputProps,
+                required: isRequired
+            }),
+            "range" === selectionVariant && /*#__PURE__*/ jsxs(Fragment, {
+                children: [
+                    /*#__PURE__*/ jsx("span", {
+                        children: "-"
+                    }),
+                    /*#__PURE__*/ jsx("input", {
+                        autoComplete: "off",
+                        "aria-describedby": clsx(formFieldDescribedBy, dateInputDescribedBy),
+                        "aria-labelledby": clsx(formFieldLabelledBy, dateInputLabelledBy, endDateInputID),
+                        "aria-label": clsx("End date", ariaLabel),
+                        id: endDateInputID,
+                        className: withBaseName("input"),
+                        disabled: isDisabled,
+                        readOnly: isReadOnly,
+                        ref: endInputRef,
+                        tabIndex: isDisabled ? -1 : 0,
+                        onBlur: handleEndDateBlur,
+                        onChange: handleEndDateChange,
+                        onKeyDown: handleEndDateKeyDown,
+                        onFocus: isDisabled ? void 0 : handleFocus,
+                        placeholder: placeholder,
+                        size: placeholder.length,
+                        value: isReadOnly && !endDateStringValue ? emptyReadOnlyMarker : endDateStringValue,
+                        required: isRequired,
+                        ...restDateInputProps
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                className: withBaseName("endAdornmentContainer"),
+                children: [
+                    !isDisabled && !isReadOnly && validationStatus && /*#__PURE__*/ jsx(StatusAdornment, {
+                        status: validationStatus
+                    }),
+                    endAdornment
+                ]
+            }),
+            /*#__PURE__*/ jsx("div", {
+                className: withBaseName("activationIndicator")
+            })
+        ]
+    });
+});
+export { DateInput_DateInput as DateInput };

package/src/date-input/index.js

@@ -0,0 +1 @@
+export * from "./DateInput.js";

package/src/date-picker/DatePicker.js

@@ -0,0 +1,137 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { forwardRef, useRef, useState } from "react";
+import { flip, offset, useDismiss, useInteractions } from "@floating-ui/react";
+import { getLocalTimeZone, today } from "@internationalized/date";
+import { Button, makePrefixer, useControlled, useFloatingUI, useForkRef, useFormFieldProps, useId } from "@salt-ds/core";
+import { CalendarIcon } from "@salt-ds/icons";
+import { isRangeOrOffsetSelectionWithStartDate } from "../calendar/index.js";
+import { DateInput } from "../date-input/index.js";
+import { DatePickerContext } from "./DatePickerContext.js";
+import { DatePickerPanel } from "./DatePickerPanel.js";
+const withBaseName = makePrefixer("saltDatePicker");
+const DatePicker_DatePicker = /*#__PURE__*/ forwardRef(function({ selectionVariant = "default", disabled = false, placeholder = "dd mmm yyyy", selectedDate: selectedDateProp, defaultSelectedDate, dateFormatter, CalendarProps, className, id: idProp, open: openProp, defaultOpen, onOpenChange: onOpenChangeProp, helperText, readOnly: readOnlyProp, validationStatus, onSelectionChange, onChange, visibleMonths = 2, bordered, ...rest }, ref) {
+    const [open, setOpen] = useControlled({
+        controlled: openProp,
+        default: Boolean(defaultOpen),
+        name: "openPanel",
+        state: "openPanel"
+    });
+    const [selectedDate, setSelectedDate] = useControlled({
+        controlled: selectedDateProp,
+        default: defaultSelectedDate,
+        name: "Calendar",
+        state: "selectedDate"
+    });
+    const id = useId(idProp);
+    const [startVisibleMonth, setStartVisibleMonth] = useState((isRangeOrOffsetSelectionWithStartDate(selectedDate) ? selectedDate?.startDate : selectedDate) ?? today(getLocalTimeZone()));
+    const [endVisibleMonth, setEndVisibleMonth] = useState((isRangeOrOffsetSelectionWithStartDate(selectedDate) ? selectedDate.startDate?.add({
+        months: 1
+    }) : selectedDate) ?? today(getLocalTimeZone()).add({
+        months: 1
+    }));
+    const onOpenChange = (newState)=>{
+        setOpen(newState);
+        startInputRef?.current?.focus();
+        onOpenChangeProp?.(newState);
+    };
+    const { x, y, strategy, elements, floating, reference, context } = useFloatingUI({
+        open: open,
+        onOpenChange: onOpenChange,
+        placement: "bottom-start",
+        middleware: [
+            offset(1),
+            flip({
+                fallbackStrategy: "initialPlacement"
+            })
+        ]
+    });
+    const { getReferenceProps, getFloatingProps } = useInteractions([
+        useDismiss(context)
+    ]);
+    const { disabled: formFieldDisabled, readOnly: formFieldReadOnly } = useFormFieldProps();
+    const isReadOnly = readOnlyProp || formFieldReadOnly;
+    const getPanelPosition = ()=>({
+            top: y ?? 0,
+            left: x ?? 0,
+            position: strategy,
+            width: elements.floating?.offsetWidth,
+            height: elements.floating?.offsetHeight
+        });
+    const panelRef = useRef(null);
+    const startInputRef = useRef(null);
+    const endInputRef = useRef(null);
+    const inputRef = useForkRef(ref, reference);
+    const floatingRef = useForkRef(panelRef, floating);
+    const handleSelect = (event, selectedDate)=>{
+        if ("default" === selectionVariant && selectedDate) startInputRef?.current?.focus();
+        if (isRangeOrOffsetSelectionWithStartDate(selectedDate) && selectedDate.endDate) endInputRef?.current?.focus();
+        onSelectionChange?.(event, selectedDate);
+    };
+    const handleCalendarButton = ()=>{
+        startInputRef?.current?.focus();
+        const newState = !open;
+        setOpen(newState);
+        onOpenChangeProp?.(newState);
+    };
+    const datePickerContextValue = {
+        openState: open,
+        setOpen,
+        disabled,
+        selectedDate,
+        setSelectedDate,
+        defaultSelectedDate,
+        startVisibleMonth,
+        setStartVisibleMonth,
+        endVisibleMonth,
+        setEndVisibleMonth,
+        selectionVariant,
+        context,
+        getPanelPosition
+    };
+    const calendarId = `${id}-calendar`;
+    return /*#__PURE__*/ jsxs(DatePickerContext.Provider, {
+        value: datePickerContextValue,
+        children: [
+            /*#__PURE__*/ jsx(DateInput, {
+                "aria-owns": calendarId,
+                validationStatus: validationStatus,
+                bordered: bordered,
+                className: clsx(withBaseName(), className),
+                id: id,
+                ref: inputRef,
+                ...getReferenceProps(),
+                startInputRef: startInputRef,
+                endInputRef: endInputRef,
+                placeholder: placeholder,
+                dateFormatter: dateFormatter,
+                readOnly: isReadOnly,
+                onSelectionChange: onSelectionChange,
+                onChange: onChange,
+                endAdornment: /*#__PURE__*/ jsx(Button, {
+                    variant: "secondary",
+                    onClick: handleCalendarButton,
+                    disabled: disabled || isReadOnly || formFieldDisabled,
+                    "aria-label": "Open Calendar",
+                    children: /*#__PURE__*/ jsx(CalendarIcon, {
+                        "aria-hidden": true
+                    })
+                }),
+                ...rest
+            }),
+            /*#__PURE__*/ jsx(DatePickerPanel, {
+                ref: floatingRef,
+                ...getFloatingProps(),
+                onSelect: handleSelect,
+                CalendarProps: {
+                    ...CalendarProps,
+                    borderedDropdown: bordered,
+                    id: calendarId
+                },
+                helperText: helperText,
+                visibleMonths: visibleMonths
+            })
+        ]
+    });
+});
+export { DatePicker_DatePicker as DatePicker };

package/src/date-picker/DatePickerContext.js

@@ -0,0 +1,20 @@
+import { createContext } from "@salt-ds/core";
+import { useContext } from "react";
+const DatePickerContext = createContext("DatePickerContext", {
+    openState: false,
+    setOpen: ()=>void 0,
+    disabled: false,
+    selectedDate: void 0,
+    defaultSelectedDate: void 0,
+    setSelectedDate: ()=>void 0,
+    startVisibleMonth: void 0,
+    setStartVisibleMonth: ()=>void 0,
+    endVisibleMonth: void 0,
+    setEndVisibleMonth: ()=>void 0,
+    selectionVariant: "default",
+    getPanelPosition: ()=>({})
+});
+function useDatePickerContext() {
+    return useContext(DatePickerContext);
+}
+export { DatePickerContext, useDatePickerContext };