/* @oracle/oraclejet-preact: undefined */
'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var jsxRuntime = require('preact/jsx-runtime');
var compat = require('preact/compat');
var hooks = require('preact/hooks');
var Calendar = require('./Calendar-779283b2.js');
var HiddenAccessible = require('./HiddenAccessible-087eb49a.js');
var IconButton = require('./IconButton-7503293b.js');
var clientHints = require('./clientHints-c40c5250.js');
var FormFieldContext = require('./FormFieldContext-69fe83d2.js');
require('./logger-2b636482.js');
require('./TabbableModeContext-e99d527e.js');
var useTranslationBundle = require('./useTranslationBundle-12dd087d.js');


require('./UNSAFE_UserAssistance/themes/redwood/UserAssistanceVariants.css.js');
var InlineUserAssistance = require('./InlineUserAssistance-cfaa3d3e.js');
require('./Flex-3a257bc3.js');


require('./UNSAFE_MessageBanner/themes/redwood/MessageBannerVariants.css.js');
require('preact');
require('./LayerHost-3cd73603.js');


require('./hooks/UNSAFE_useTooltip/themes/redwood/TooltipContentVariants.css.js');
require('./tooltipUtils-2bc15136.js');


require('./MessageFormattingUtils-539d75b0.js');
require('./TransitionGroup-b239d98f.js');
require('./MessagesContext-4e939750.js');



require('./UNSAFE_ComponentMessage/themes/redwood/ComponentMessageVariants.css.js');
require('./Popup-de16d915.js');
require('./UNSAFE_Separator/themes/SeparatorStyles.css.js');


require('./UNSAFE_Label/themes/redwood/LabelVariants.css.js');
require('./InputGroupContext-05f2a46f.js');

require('./UNSAFE_Popup/themes/redwood/PopupVariants.css.js');
var UNSAFE_InputDatePicker_themes_InputDatePickerDropdownStyles_css = require('./UNSAFE_InputDatePicker/themes/InputDatePickerDropdownStyles.css.js');
var Sheet = require('./Sheet-1d6e8cf8.js');
var DatePicker = require('./DatePicker-b60f8a7e.js');
var SectionedContent = require('./SectionedContent-5eff5dce.js');
var stringUtils = require('./stringUtils-3e19c8af.js');
require('./FormContext-d1d05967.js');
var useFormContext = require('./useFormContext-a794f7b6.js');
var useId = require('./useId-6c0eeb27.js');
require('./getFormatParse-b70abd1a.js');
var maskUtils = require('./maskUtils-2f481824.js');
var useHiddenTestMethod = require('./useHiddenTestMethod-eae1d48b.js');
var calendarDateUtils = require('./calendarDateUtils-c572f2d3.js');
var useTestId = require('./useTestId-4f53d561.js');
var InputDateMask = require('./InputDateMask-c7baadd4.js');
require('./Icon-56789beb.js');
require('./size-1914356b.js');
require('./utils-c0efcd5e.js');
require('./themeContract.css-f3d431c6.js');
require('./colorUtils-01f3caa2.js');
require('./_curry1-e8f0d7ea.js');
require('./useTooltip-34accecc.js');
require('./useTooltipControlled-0a95856c.js');
require('./useHover-49b0430d.js');
require('./useToggle-3ebba7d8.js');
require('./useFocus-1b288fb9.js');
require('./useTouch-4dec8729.js');
require('./mergeProps-e3da7237.js');
require('./useAnimation-65c0e455.js');
require('./useComponentTheme-082fc8e4.js');
require('./useThemeInterpolations-a37b37d9.js');
require('./useColorScheme-f8b1447d.js');
require('./useScale-db16c2b8.js');
require('./theme-dfd6a9fe.js');
require('./Theme-f06687af.js');
require('./mergeInterpolations-6727b536.js');
require('./classNames-c14c6ef3.js');
require('./mergeDeepWithKey-210b024d.js');
require('./_curry3-18677bca.js');
require('./_curry2-c15d89cd.js');
require('./_isObject-28636267.js');
require('./useDensity-0b9fd9ca.js');
require('./unsafeDomAccess-c3a492f0.js');
require('./hooks/UNSAFE_useTooltip/themes/redwood/TooltipContentTheme.js');
require('./hooks/UNSAFE_useTooltip/themes/TooltipContentStyles.css.js');
require('./hooks/UNSAFE_useTooltip/themes/redwood/TooltipContentBaseTheme.css.js');

require('./vanilla-extract-recipes-createRuntimeFn.esm-d1301b2d.js');
require('./UNSAFE_Icon/themes/IconStyle.css.js');
require('./BaseButton-d8f96bfa.js');
require('./useActive-6770f917.js');
require('./dimensions-6101ca1f.js');
require('./UNSAFE_BaseButton/themes/redwood/BaseButtonTheme.js');
require('./UNSAFE_BaseButton/themes/BaseButtonStyles.css.js');

require('./UNSAFE_BaseButton/themes/redwood/BaseButtonVariants.css.js');

require('./BareButton-e8a030d7.js');
require('./useBareButton-463210c9.js');
require('./usePress-886180e4.js');
require('./usePressClick-7a34624a.js');
require('./useTabbableMode-dbd254e8.js');
require('./buttonUtils-dff2ea3e.js');
require('./id-86356250.js');
require('./ButtonLabelLayout-c876923f.js');
require('./Text-056f1ec5.js');
require('./UNSAFE_Text/themes/TextStyles.css.js');

require('./useButtonLabelLayoutTheme-d09db0c9.js');
require('./UNSAFE_ButtonLabelLayout/themes/redwood/ButtonLabelLayoutTheme.js');
require('./UNSAFE_ButtonLabelLayout/themes/ButtonLabelLayoutStyles.css.js');

require('./UNSAFE_ButtonLabelLayout/themes/redwood/ButtonLabelLayoutBaseTheme.css.js');

require('./UNSAFE_ButtonLabelLayout/themes/redwood/ButtonLabelLayoutVariants.css.js');

require('./ComponentMessageContainer-b692adf3.js');
require('./MessagesManager-cba4bc60.js');
require('./SuccessS-b6757c64.js');
require('./ErrorS-b027f7ad.js');
require('./InformationS-b0bb102b.js');
require('./WarningS-cdb0a7ad.js');
require('./PRIVATE_Message/themes/MessageStyles.css.js');
require('./soundUtils-ff3c9c0d.js');
require('./useMessagesContext-23d62331.js');
require('./Transition-942950ed.js');
require('./UNSAFE_ComponentMessage/themes/redwood/ComponentMessageTheme.js');
require('./UNSAFE_ComponentMessage/themes/ComponentMessageStyles.css.js');
require('./UNSAFE_ComponentMessage/themes/redwood/ComponentMessageBaseTheme.css.js');
require('./UNSAFE_UserAssistance/themes/redwood/UserAssistanceTheme.js');
require('./UNSAFE_UserAssistance/themes/UserAssistanceStyles.css.js');
require('./UNSAFE_UserAssistance/themes/redwood/UserAssistanceBaseTheme.css.js');
require('./useFormFieldContext-4632eb73.js');
require('./InlineHelp-2add2d34.js');
require('./useInputGroupContext-4c10bd57.js');
require('./boxalignment-e287d370.js');
require('./arrayUtils-7d8dcfc3.js');

require('./vanilla-extract-sprinkles-createRuntimeSprinkles.esm-d68f3e0f.js');
require('./flexbox-2cae9a01.js');

require('./flexitem-fee13e26.js');



require('./index-0aa99b92.js');
require('./UNSAFE_Layer/themes/LayerHostStyles.css.js');

require('./EnvironmentProvider-5f2435e6.js');
require('./LayerManager-c535d963.js');
require('./Floating-79cbe5ad.js');
require('./useFloating-c753a7f9.js');
require('./useUser-1295b5cb.js');
require('./positionUtils-a780137e.js');
require('./refUtils-a9872e75.js');
require('./useOutsideClick-dbf3d604.js');
require('./Layer-b60deb1b.js');
require('./UNSAFE_Layer/themes/LayerStyles.css.js');

require('./useModal-0739a528.js');
require('./UNSAFE_Floating/themes/redwood/FloatingTheme.js');
require('./UNSAFE_Floating/themes/FloatingStyles.css.js');

require('./UNSAFE_Floating/themes/redwood/FloatingBaseTheme.css.js');

require('./UNSAFE_Floating/themes/redwood/FloatingVariants.css.js');
require('./vanilla-extract-dynamic.esm-2e1b7c25.js');
require('./UNSAFE_Floating/themes/FloatingContract.css.js');
require('./useUnsafeDomElementRef-f22a2f0c.js');
require('./getLocale-8e17dc46.js');
require('./tabbableUtils-22a50472.js');
require('./head-68d0992f.js');
require('./_arity-c228159c.js');
require('./_isArray-73160ad5.js');
require('./_isString-f4443c9e.js');
require('./FocusTrap-4873a3f2.js');
require('./FocusTracker-e2ea43c3.js');
require('./PRIVATE_FocusTracker/themes/FocusTrackerStyles.css.js');

require('./Modal-b751b643.js');
require('./UNSAFE_Modal/themes/ModalStyles.css.js');

require('./popupUtils-1d123cbe.js');
require('./WindowOverlay-85d999fa.js');
require('./UNSAFE_WindowOverlay/themes/WindowOverlayStyles.css.js');

require('./UNSAFE_WindowOverlay/themes/WindowOverlayContract.css.js');
require('./UNSAFE_WindowOverlay/themes/redwood/WindowOverlayTheme.js');
require('./UNSAFE_WindowOverlay/themes/redwood/WindowOverlayBaseTheme.css.js');

require('./UNSAFE_WindowOverlay/themes/redwood/WindowOverlayVariants.css.js');
require('./usePopupAnimation-f3b34413.js');
require('./useAnimationStatus-8075dc19.js');
require('./popupAnimationUtils-dcace427.js');
require('./LiveRegion-62ce9ac7.js');

require('./UNSAFE_Popup/themes/PopupContract.css.js');
require('./UNSAFE_Popup/themes/redwood/PopupTheme.js');
require('./UNSAFE_Popup/themes/redwood/PopupBaseTheme.css.js');

require('./colors-f3ce979a.js');


require('./UNSAFE_Sheet/themes/SheetStyles.css.js');

require('./animationUtils-54852d03.js');
require('./useFocusWithin-eb7f956a.js');
require('./useBreakpointValues-66b40e00.js');
require('./useBreakpoints-9dbbd61b.js');
require('./Button-020e0381.js');
require('./UNSAFE_DatePicker/themes/DatePickerContract.css.js');
require('./UNSAFE_DatePicker/themes/redwood/DatePickerTheme.js');
require('./UNSAFE_DatePicker/themes/DatePickerStyles.css.js');

require('./UNSAFE_DatePicker/themes/redwood/DatePickerBaseTheme.css.js');

require('./DatePickerHeader-1010204c.js');
require('./CaretDown-bdf57d9c.js');
require('./ChevronLeft-2dcc3b2e.js');
require('./ChevronRight-d1c46e18.js');
require('./ToggleButton-5ebfe20e.js');
require('./useToggleAction-e4f15550.js');
require('./toggleButtonUtils-245111a7.js');
require('./ToggleButtonLabel-c8f36317.js');
require('./View-ed116d78.js');
require('./borders-4b8488cb.js');
require('./padding-ba041f6a.js');
require('./aria-889aedd0.js');
require('./equals-098f7781.js');
require('./PRIVATE_DatePickerHeader/themes/DatePickerHeaderStyles.css.js');

require('./MonthView-a2661a58.js');
require('./dayUtils-075bd7a7.js');
require('./supplementalData-cdc1a84a.js');
require('./StyledDatePickerButton-becd2a7d.js');
require('./PRIVATE_StyledDatePickerButton/themes/StyledDatePickerButtonStyles.css.js');

require('./useCellNavigation-09201a92.js');
require('./PRIVATE_MonthView/themes/DayCellStyles.css.js');

require('./Grid-cef20569.js');
require('./grid-7c06084e.js');

require('./PRIVATE_MonthView/themes/redwood/MonthViewTheme.js');
require('./PRIVATE_MonthView/themes/MonthViewStyles.css.js');

require('./PRIVATE_MonthView/themes/MonthViewContract.css.js');
require('./PRIVATE_MonthView/themes/WeekNumberCellStyle.css.js');

require('./YearsGridView-d0d4e8e1.js');
require('./Dropdown-1ba432a8.js');
require('./keyboardUtils-b42fe7d5.js');
require('./CollectionInteractionContext-f84ff7a1.js');
require('./UNSAFE_Dropdown/themes/dropdownStyles.css.js');

require('./useOutsideMousedown-70f36cca.js');
require('./useEffectEvent-832ffba5.js');
require('./types-55573a46.js');
require('./Label-eb654b0e.js');
require('./CompactLabelAssistance-e910bb56.js');
require('./Help-dbc23ccd.js');
require('./UNSAFE_Label/themes/redwood/LabelTheme.js');
require('./UNSAFE_Label/themes/LabelStyles.css.js');
require('./UNSAFE_Label/themes/redwood/LabelBaseTheme.css.js');
require('./truncationUtils-2d44b04b.js');
require('./UNSAFE_TextField/themes/redwood/TextFieldTheme.js');
require('./UNSAFE_TextField/themes/TextFieldStyles.css.js');



require('./UNSAFE_TextField/themes/redwood/TextFieldBaseTheme.css.js');

require('./UNSAFE_TextField/themes/redwood/TextFieldVariants.css.js');

require('./StyledTextField-7839c90d.js');
require('./useAccessibleContext-c49d8d1b.js');
require('./useTextFieldInputHandlers-850d395c.js');
require('./formControlUtils-596c9dc3.js');
require('./textAlign-f41f49db.js');

require('./TextFieldUtils-96baac38.js');
require('./UNSAFE_TextField/themes/FormControlUtilsStyles.css.js');

require('./UNSAFE_TextField/themes/redwood/TextFieldInputTheme.js');
require('./UNSAFE_TextField/themes/TextFieldInputStyles.css.js');

require('./UNSAFE_TextField/themes/redwood/TextFieldInputVariants.css.js');

require('./LabelValueLayout-d67109b3.js');
require('./StyledLabelValueLayout-48da61b9.js');

require('./UNSAFE_TextField/themes/redwood/FormLayoutTheme.js');
require('./UNSAFE_TextField/themes/FormLayoutStyles.css.js');
require('./UNSAFE_TextField/themes/redwood/FormLayoutBaseTheme.css.js');

require('./formControlUtils-31d8bc55.js');
require('./LayoutStyles.css-b4025421.js');

require('./UNSAFE_Skeleton/themes/redwood/SkeletonTheme.js');
require('./UNSAFE_Skeleton/themes/SkeletonStyles.css.js');
require('./UNSAFE_Skeleton/themes/redwood/SkeletonBaseTheme.css.js');

require('./UNSAFE_Skeleton/themes/redwood/SkeletonVariants.css.js');
require('./UNSAFE_TextField/themes/redwood/ReadonlyTextFieldTheme.js');
require('./UNSAFE_TextField/themes/ReadonlyTextFieldStyles.css.js');

require('./UNSAFE_TextField/themes/redwood/ReadonlyTextFieldVariants.css.js');


require('./ReadonlyTextFieldInput-60965d77.js');
require('./UNSAFE_TextField/themes/redwood/ReadonlyTextFieldInputTheme.js');
require('./UNSAFE_TextField/themes/ReadonlyTextFieldInputStyles.css.js');

require('./UNSAFE_TextField/themes/redwood/ReadonlyTextFieldInputVariants.css.js');
require('./TextField-5c164264.js');
require('./CompactUserAssistance-a5f1bb2b.js');
require('./Separator-85962472.js');
require('./useFocusableTextField-2c36840d.js');
require('./useTextField-6ecf97b7.js');
require('./useMessageSeverity-cfc4ae9d.js');
require('./useFormFieldContextProps-0fa67f6c.js');
require('./UNSAFE_InputDateMask/themes/SegmentStyles.css.js');

require('./useDoubleTap-d3937fb6.js');

/**
 * Component that renders DatePicker either inside a dropdown or sheet; at small screen
 * widths, it renders inside a sheet. Additionally, when a dropdown is being shown beneath
 * the component, we also show any user assistance text or messages below the picker
 * because otherwise that information would be obscured from view. When a sheet is being
 * shown, it will always display UA and messages at the bottom of the sheet.
 */
const InputDatePickerDropdown = ({ anchorRef, assistiveText, dayFormatter, daysOutsideMonth, helpSourceLink, helpSourceText, isDisabled, isOpen, isReadonly, label, onClose, onCommit, max, messages, min, monthAndYearPicker, testId, todayButton, todayTimeZone, userAssistanceDensity, value, weekDisplay }) => {
    // If the dropdown opens above the component, we don't want to show UA or messages.
    const [isDropdownAbove, setDropdownAbove] = hooks.useState(false);
    const [prevIsOpen, setPrevIsOpen] = hooks.useState(isOpen);
    const handleDropdownPosition = hooks.useCallback((data) => {
        setDropdownAbove(data.placement.startsWith('top'));
    }, []);
    // Reset the flag when the dropdown is closed.
    if (prevIsOpen !== isOpen) {
        setPrevIsOpen(isOpen);
        if (!isOpen) {
            setDropdownAbove(false);
        }
    }
    const sizeOptions = {
        isMaxWidthAdjusted: false,
        isMaxHeightAdjusted: true
    };
    // On mobile phones, the dropdown becomes a sheet.
    const shouldShowSheet = isPhone();
    const { datePicker_label } = useTranslationBundle.useTranslationBundle('@oracle/oraclejet-preact');
    const datePickerAriaLabel = datePicker_label();
    const datePickerMainContent = (jsxRuntime.jsx(DatePicker.DatePicker, { dayFormatter: dayFormatter, daysOutsideMonth: daysOutsideMonth, height: !shouldShowSheet ? 'auto' : undefined, onCommit: onCommit, max: max, min: min, 
        // for sheet, we want the width to grow to the width of the sheet, otherwise it will use the theme default.
        maxWidth: shouldShowSheet ? '100%' : undefined, width: "100%", monthAndYearPicker: monthAndYearPicker, testId: testId, todayTimeZone: todayTimeZone, todayButton: todayButton, value: value, weekDisplay: weekDisplay }));
    const inlineUserAssistanceFooter = isOpen &&
        (!isDropdownAbove || shouldShowSheet) &&
        !isDisabled &&
        !isReadonly &&
        (assistiveText || helpSourceLink || (messages && messages.length > 0)) &&
        (userAssistanceDensity === 'efficient' || userAssistanceDensity === 'reflow') ? (jsxRuntime.jsx(FormFieldContext.FormFieldContext.Provider, { value: { isFocused: true }, children: jsxRuntime.jsx("div", { class: UNSAFE_InputDatePicker_themes_InputDatePickerDropdownStyles_css.userAssistanceStyles, children: jsxRuntime.jsx(InlineUserAssistance.InlineUserAssistance, { assistiveText: assistiveText, fieldLabel: label, helpSourceLink: helpSourceLink, helpSourceText: helpSourceText, messages: messages, userAssistanceDensity: userAssistanceDensity }) }) })) : undefined;
    const contentTestId = testId ? testId + (shouldShowSheet ? '_sheet' : '_dropdown') : undefined;
    // The same content is displayed either in a dropdown or sheet: date picker and inline UA.
    // Add styling to the dropdown to enforce a fixed width.
    const dropdownContent = (jsxRuntime.jsx("div", { class: UNSAFE_InputDatePicker_themes_InputDatePickerDropdownStyles_css.dropdownStyles, children: jsxRuntime.jsx(SectionedContent.SectionedContent, { "aria-label": datePickerAriaLabel, footer: inlineUserAssistanceFooter, hasFocusTrap: true, main: datePickerMainContent, role: "dialog", testId: contentTestId }) }));
    const dropdown = shouldShowSheet ? (jsxRuntime.jsx(Sheet.Sheet, { initialFocus: "firstFocusable", isOpen: isOpen, onClose: onClose, children: jsxRuntime.jsx(SectionedContent.SectionedContent, { "aria-label": datePickerAriaLabel, footer: inlineUserAssistanceFooter, hasFocusTrap: true, main: datePickerMainContent, role: "dialog", testId: contentTestId }) })) : (jsxRuntime.jsx(SectionedContent.StickyPositioningDropdown, { anchorRef: anchorRef, initialFocus: "firstFocusable", isOpen: isOpen, onClose: onClose, onPosition: handleDropdownPosition, sizeOptions: sizeOptions, children: dropdownContent }));
    return dropdown;
};
const isPhone = () => {
    return clientHints.getClientHints().deviceType === 'phone';
};

/**
 * @license
 * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.
 * The Universal Permissive License (UPL), Version 1.0
 * as shown at https://oss.oracle.com/licenses/upl/
 * @ignore
 */
// If dateVal is a complete date, return it as a CalendarDateRequired
// otherwise return undefined.
const convertToCalendarDateRequired = (dateVal) => {
    return !dateVal || !calendarDateUtils.isCompleteCalendarDate(dateVal)
        ? undefined
        : dateVal;
};
// Use a reducer function to manage InputDatePickerState.
const inputDatePickerReducer = (state, action) => {
    switch (action.type) {
        case 'dateChanged': {
            return {
                ...state,
                dateValue: action.data,
                completeDateValue: convertToCalendarDateRequired(action.data)
            };
        }
        case 'dateSelected': {
            return { ...state, dateValue: action.data, completeDateValue: action.data };
        }
        case 'reset': {
            return {
                completeDateValue: convertToCalendarDateRequired(action.data),
                dateValue: action.data
            };
        }
        default:
            return state;
    }
};
/**
 * useInputDatePickerState calls useReducer to determine the initial state. Any changes to that state
 * are managed by dispatching actions to the reducer function.
 */
const useInputDatePickerState = ({ value }) => {
    const [state, dispatch] = hooks.useReducer(inputDatePickerReducer, {
        completeDateValue: convertToCalendarDateRequired(value),
        dateValue: value
    });
    return { state, dispatch };
};

/**
 * @license
 * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.
 * The Universal Permissive License (UPL), Version 1.0
 * as shown at https://oss.oracle.com/licenses/upl/
 * @ignore
 */
/**
 * Hook that provides handlers and other functionality for InputDatePicker.
 */
const useInputDatePicker = ({ isDisabled, isReadonly, onCommit, onInput, rootRef, value: currentValue }) => {
    // Whether the dropdown is open.
    const [isOpen, setIsOpen] = hooks.useState(false);
    // Ref to the calendar icon button.
    const iconRef = hooks.useRef(null);
    // Ref to the InputDateMask component.
    const maskRef = hooks.useRef(null);
    // Keep track of whether the dropdown was just dismissed from an outside mousedown event.
    const outsideMousedownRef = hooks.useRef(false);
    const outsideMousedownTimerRef = hooks.useRef();
    // Keep track of the last date values passed to onInput and onCommit.
    const lastCommittedDateRef = hooks.useRef(currentValue);
    const lastDateRef = hooks.useRef(currentValue);
    // Keep track of the last controlled value passed from the parent, so we can detect a programmatic change.
    const lastValueFromParentRef = hooks.useRef(currentValue);
    // Keep track of whether a date was selected in the date picker.
    const dateSelectedRef = hooks.useRef(false);
    const { state, dispatch } = useInputDatePickerState({ value: currentValue });
    // If a new value is being pushed from the parent, and that value differs from
    // the current value of the reducer, then this is a programmatic update
    // and we need to call 'reset' to update the reducer state. Otherwise, the only
    // time the reducer state is updated from the value is on mount.
    if (maskUtils.calendarDatesAreDifferent(lastValueFromParentRef.current, currentValue)) {
        lastValueFromParentRef.current = currentValue;
        if (maskUtils.calendarDatesAreDifferent(currentValue, state.dateValue)) {
            dispatch({ type: 'reset', data: currentValue });
            lastDateRef.current = currentValue;
            lastCommittedDateRef.current = currentValue;
        }
    }
    // Reducer updates are async, so wait until the state updates and then call our callbacks.
    hooks.useEffect(() => {
        if (maskUtils.calendarDatesAreDifferent(state.dateValue, lastDateRef.current)) {
            onInput({ previousValue: lastDateRef.current, value: state.dateValue });
            lastDateRef.current = state.dateValue;
        }
        if (dateSelectedRef.current &&
            maskUtils.calendarDatesAreDifferent(state.dateValue, lastCommittedDateRef.current)) {
            onCommit?.({ previousValue: lastCommittedDateRef.current, value: state.dateValue });
            lastCommittedDateRef.current = state.dateValue;
            dateSelectedRef.current = false;
        }
    }, [onCommit, onInput, state.dateValue]);
    // Handle onInput from InputDateMask as segment values are being added or changed in the input field.
    // We wait for the state to update before calling onInput.
    const maskInputHandler = hooks.useCallback((detail) => {
        dispatch({ type: 'dateChanged', data: detail.value });
    }, [dispatch]);
    // Handle onCommit from InputDateMask, which is called when the user presses Enter or the field is blurred.
    const maskCommitHandler = hooks.useCallback((detail) => {
        // If the value we get from InputDateMask's onCommit differs from the last committed value, then call onCommit.
        if (maskUtils.calendarDatesAreDifferent(lastCommittedDateRef.current, detail.value)) {
            onCommit?.({ value: detail.value, previousValue: lastCommittedDateRef.current });
            lastCommittedDateRef.current = detail.value;
        }
    }, [onCommit]);
    // Respond to onAction event from the calendar icon button. Toggles the date picker dropdown.
    const calendarIconActionHandler = hooks.useCallback(() => {
        // Only toggle the value of isOpen if we didn't just dismiss the dropdown.
        if (!outsideMousedownRef.current) {
            setIsOpen((prevIsOpen) => !prevIsOpen);
        }
        outsideMousedownRef.current = false;
    }, []);
    const dropdownCloseHandler = hooks.useCallback((detail) => {
        // Keep track of when the dropdown is closed via outside mousedown, including when the calendar icon
        // is clicked. We need this in order to toggle visibility of the picker and dropdown.
        if (detail.reason === 'outsideMousedown') {
            outsideMousedownRef.current = true;
            clearTimeout(outsideMousedownTimerRef.current);
            // Clear the flag after a short delay to ensure the dropdown can be opened again.
            outsideMousedownTimerRef.current = setTimeout(() => {
                outsideMousedownRef.current = false;
            }, 200);
        }
        else if (detail.reason === 'dismissed' || detail.reason === 'keyboardDismissed') {
            // Focus the calendar icon when the dropdown is closed.
            iconRef.current?.focus();
        }
        setIsOpen(false);
    }, []);
    // Handle date selection in the picker.
    //   - Updates the value in state.
    //   - Closes the dropdown.
    //   - Sets focus to the date field.
    const datePickerCommitHandler = hooks.useCallback((detail) => {
        // Set focus to the calendar icon when a date is selected.
        iconRef.current?.focus();
        // Set a ref indicating a date was selected.
        dateSelectedRef.current = true;
        dispatch({ type: 'dateSelected', data: detail.value });
        setIsOpen(false);
    }, [dispatch]);
    // Create a changeValue method that can be called by a test adapter to simulate a user
    // changing the value and committing it.
    const changeValue = hooks.useCallback((newValue) => {
        // We always want this method available on the DOM element so that a test can call it,
        // but we only want it to change the value when the component is enabled because that's
        // the only time the user could change the value through the UI.
        if (!isReadonly && !isDisabled) {
            onInput({ value: newValue, previousValue: currentValue });
            onCommit?.({ value: newValue, previousValue: currentValue });
            return Promise.resolve();
        }
        return Promise.reject('Component is readonly or disabled');
    }, [currentValue, isDisabled, isReadonly, onCommit, onInput]);
    // Expose _changeValue as a hidden method on the root DOM.
    useHiddenTestMethod.useHiddenTestMethod({
        elementRef: rootRef,
        method: changeValue,
        name: '_changeValue'
    });
    return {
        calendarIconActionHandler,
        datePickerCommitHandler,
        dropdownCloseHandler,
        completeDateValue: state.completeDateValue,
        dateValue: state.dateValue,
        iconRef,
        isOpen,
        maskCommitHandler,
        maskInputHandler,
        maskRef
    };
};

/**
 * InputDatePicker allows users to enter or select a single date using a calendar interface.
 */
const InputDatePicker = compat.forwardRef(({ 'aria-describedby': propDescribedBy, assistiveText, dayFormatter, daysOutsideMonth, helpSourceLink, helpSourceText, isDisabled, isReadonly, label, max, messages, min, monthAndYearPicker, todayTimeZone, todayButton, value, onCommit, onInput, testId, userAssistanceDensity: propUserAssistanceDensity, weekDisplay, ...dateMaskProps }, ref) => {
    const testIdProps = useTestId.useTestId(testId);
    const rootRef = hooks.useRef(null);
    const { calendarIconActionHandler, datePickerCommitHandler, completeDateValue, dateValue, dropdownCloseHandler, iconRef, isOpen, maskCommitHandler, maskInputHandler, maskRef } = useInputDatePicker({
        isDisabled,
        isReadonly,
        onCommit,
        onInput,
        rootRef,
        value
    });
    const mainFieldRef = hooks.useRef(null);
    const { inputDatePicker_selectDate, inputDatePicker_instruction } = useTranslationBundle.useTranslationBundle('@oracle/oraclejet-preact');
    const calendarIconAriaLabel = inputDatePicker_selectDate();
    // We need this to determine if UA/messaging should be shown in the dropdown.
    const { userAssistanceDensity: formUserAssistanceDensity } = useFormContext.useFormContext();
    const userAssistanceDensity = propUserAssistanceDensity ?? formUserAssistanceDensity;
    hooks.useImperativeHandle(ref, () => ({
        focus: () => {
            maskRef.current?.focus();
        },
        blur: () => {
            maskRef.current?.blur();
        }
    }));
    const maskFieldInstructionId = useId.useId();
    const maskFieldInstructionText = inputDatePicker_instruction();
    const maskFieldInstruction = !isDisabled && !isReadonly ? (jsxRuntime.jsx(HiddenAccessible.HiddenAccessible, { id: maskFieldInstructionId, isHidden: true, children: maskFieldInstructionText })) : undefined;
    const ariaDescribedBy = !isDisabled && !isReadonly
        ? stringUtils.l([propDescribedBy, maskFieldInstructionId])
        : propDescribedBy;
    const endContent = (jsxRuntime.jsx(IconButton.IconButton, { "aria-haspopup": "dialog", "aria-label": calendarIconAriaLabel, isDisabled: isDisabled, ref: iconRef, size: "sm", testId: testId ? testId + '_calendarIcon' : undefined, variant: "ghost", onAction: calendarIconActionHandler, children: jsxRuntime.jsx(Calendar.SvgCalendar, {}) }));
    const shouldShowDropdown = isOpen;
    return (jsxRuntime.jsxs("div", { ...testIdProps, ref: rootRef, children: [jsxRuntime.jsx(InputDateMask.InputDateMaskContext.Provider, { value: { isDropdownOpen: isOpen, isInputDatePickerParent: true }, children: jsxRuntime.jsx(InputDateMask.InputDateMask, { "aria-describedby": ariaDescribedBy, assistiveText: assistiveText, endContent: endContent, helpSourceLink: helpSourceLink, helpSourceText: helpSourceText, isDisabled: isDisabled, isReadonly: isReadonly, label: label, onCommit: maskCommitHandler, onInput: maskInputHandler, mainFieldRef: mainFieldRef, messages: messages, testId: testId ? testId + '_mask' : undefined, ref: maskRef, userAssistanceDensity: propUserAssistanceDensity, value: dateValue, ...dateMaskProps }) }), maskFieldInstruction, shouldShowDropdown && (jsxRuntime.jsx(InputDatePickerDropdown, { anchorRef: mainFieldRef, assistiveText: assistiveText, dayFormatter: dayFormatter, daysOutsideMonth: daysOutsideMonth, helpSourceLink: helpSourceLink, helpSourceText: helpSourceText, isDisabled: isDisabled, isReadonly: isReadonly, isOpen: isOpen, label: label, onClose: dropdownCloseHandler, onCommit: datePickerCommitHandler, max: max, messages: messages, min: min, monthAndYearPicker: monthAndYearPicker, testId: testId ? testId + '_datePicker' : undefined, todayTimeZone: todayTimeZone, todayButton: todayButton, userAssistanceDensity: userAssistanceDensity, value: completeDateValue, weekDisplay: weekDisplay }))] }));
});

exports.InputDatePicker = InputDatePicker;
//# sourceMappingURL=UNSAFE_InputDatePicker.js.map
