/* @oracle/oraclejet-preact: undefined */
import { jsx, jsxs, Fragment } from 'preact/jsx-runtime';
import { Fragment as Fragment$1 } from 'preact';
import { forwardRef } from 'preact/compat';
import { L as Label } from './Label-5d1ae8d7.js';
import { L as LiveRegion } from './LiveRegion-cebac18d.js';
import { useRef, useCallback, useEffect, useState, useMemo, useImperativeHandle } from 'preact/hooks';
import { K as KEYS, i as isControlOrFunctionKey } from './keyboardUtils-986fe923.js';
import { R as ReadonlyTextField } from './StyledTextField-7605d76a.js';
import './ObfuscatedTextFieldInputStyles.styles.css';
import { R as ReadonlyTextFieldInput } from './ReadonlyTextFieldInput-106ce959.js';
import './LayerHost-7931b424.js';
import './FormContext-55fb8000.js';
import { u as useFormContext } from './useFormContext-bb9dc478.js';
import { F as FormFieldContext } from './FormFieldContext-47ca0c20.js';
import './LabelValueLayoutStyles.styles.css';
import './logger-c92f309c.js';
import './UNSAFE_TextField/themes/TextFieldStyles.css.js';
import './SkeletonStyles.styles.css';
import './TextFieldLoadingStyles.styles.css';
import './TextFieldStyles.styles.css';
import './UNSAFE_TextField/themes/redwood/TextFieldBaseTheme.styles.css';
import './UNSAFE_TextField/themes/redwood/TextFieldVariants.css.js';
import './LabelStyles.styles.css';
import './UNSAFE_Label/themes/redwood/LabelBaseTheme.styles.css';
import './UNSAFE_Label/themes/redwood/LabelVariants.css.js';
import './UNSAFE_TextField/themes/FormLayoutStyles.css.js';
import './UNSAFE_TextField/themes/redwood/FormLayoutBaseTheme.styles.css';
import './Flex-03129963.js';
import './LayoutStyles.styles.css';
import './InputGroupContext-20bdbd6e.js';
import './TooltipContentStyles.styles.css';
import './hooks/UNSAFE_useTooltip/themes/redwood/TooltipContentBaseTheme.styles.css';
import './hooks/UNSAFE_useTooltip/themes/redwood/TooltipContentVariants.css.js';
import './tooltipUtils-af0abd38.js';
import { d as defaultTextAlignForVariant } from './formControlUtils-84e2af0e.js';
import { u as useTranslationBundle } from './useTranslationBundle-4822502f.js';
import { T as TabbableModeContext } from './TabbableModeContext-7d8ad946.js';
import './UserAssistanceStyles.styles.css';
import './UNSAFE_UserAssistance/themes/redwood/UserAssistanceBaseTheme.styles.css';
import './UNSAFE_UserAssistance/themes/redwood/UserAssistanceVariants.css.js';
import { a as InlineUserAssistance } from './InlineUserAssistance-890293dd.js';
import { C as CompactUserAssistance } from './CompactUserAssistance-6aa8894b.js';
import './IconStyle.styles.css';
import './Popup-992b6c27.js';
import './HiddenAccessibleStyles.styles.css';
import './UNSAFE_Popup/themes/redwood/PopupBaseTheme.styles.css';
import './UNSAFE_Popup/themes/redwood/PopupVariants.css.js';
import { u as useFocusableTextField } from './useFocusableTextField-8fe41cd4.js';
import { u as useLoadingIndicatorTimer } from './useLoadingIndicatorTimer-898d4e3e.js';
import { u as useTextField } from './useTextField-eb9db737.js';
import { S as Separator } from './Separator-93c70737.js';
import { a as DropdownUserAssistance, L as LinkItem, D as Dropdown, S as SelectMobileDropdown, b as SelectMobileFieldInput } from './SelectMobileFieldInput-345c4d45.js';
import { E as EmptyResults, p as preventDefault, b as DropdownList, j as isSearchTextEmptyOrUndefined, d as useSelectCommon, h as isBeforeDataFetch, f as isPhone, k as isSearchClearedFirstTime, u as useCollectionRenderer, D as DefaultList, g as isTablet } from './useSelectCommon-a3c69d60.js';
import { S as SelectSingleField, a as SelectSingleFieldInput, u as useDisplayValue } from './useDisplayValue-65bbc74e.js';
import { V as View } from './View-5bdd9b3c.js';
import { u as useEffectEvent } from './useEffectEvent-1bb008cb.js';
import { m as mergeProps } from './mergeProps-88ea8306.js';
import { u as useHiddenTestMethod } from './useHiddenTestMethod-f3f25093.js';
import './useFormFieldContext-daf7a676.js';
import './classNames-4e12b00d.js';
import './useComponentTheme-d2f9e47f.js';
import './MessageBannerStyles.styles.css';
import './UNSAFE_MessageBanner/themes/redwood/MessageBannerBaseTheme.styles.css';
import './UNSAFE_MessageBanner/themes/redwood/MessageBannerVariants.css.js';
import './MessageBannerVariants.styles.css';
import './vanilla-extract-recipes-createRuntimeFn.esm-2aaf8c98.js';
import './useTooltip-94af94d4.js';
import './useTooltipControlled-f2cfa454.js';
import './useId-03dbfdf0.js';
import './useHover-85077adb.js';
import './useToggle-8b7fcefe.js';
import './useFocus-38c95977.js';
import './useTouch-4828df25.js';
import './useAnimation-fe39685e.js';
import './useTestId-f24ac480.js';
import './useThemeInterpolations-e144e8ec.js';
import './useColorScheme-c4f6caab.js';
import './useScale-434ad939.js';
import './theme-63551f30.js';
import './Theme-e6dec6db.js';
import './mergeInterpolations-30cd9a69.js';
import './mergeDeepWithKey-33e3d1be.js';
import './_curry3-577eb45e.js';
import './_curry1-63949a9b.js';
import './_curry2-01c87f61.js';
import './_isObject-1fab0f5b.js';
import './useDensity-1acb0153.js';
import './unsafeDomAccess-453eb74e.js';
import './hooks/UNSAFE_useTooltip/themes/redwood/TooltipContentTheme.js';
import './hooks/UNSAFE_useTooltip/themes/TooltipContentStyles.css.js';
import './hooks/UNSAFE_useTooltip/themes/redwood/TooltipContentBaseTheme.css.js';
import './TooltipContentVariants.styles.css';
import './clientHints-a42b510c.js';
import './IconButton-7f91481c.js';
import './BaseButton-41068c85.js';
import './useActive-fb6d4d52.js';
import './dimensions-e4fbc23d.js';
import './size-af1e638c.js';
import './utils-b1eb54f9.js';
import './themeContract.css-1ffed3bf.js';
import './colorUtils-b3804ee8.js';
import './UNSAFE_BaseButton/themes/redwood/BaseButtonTheme.js';
import './UNSAFE_BaseButton/themes/BaseButtonStyles.css.js';
import './BaseButtonStyles.styles.css';
import './UNSAFE_BaseButton/themes/redwood/BaseButtonVariants.css.js';
import './UNSAFE_BaseButton/themes/redwood/BaseButtonBaseTheme.styles.css';
import './BareButton-1e3df7cb.js';
import './useBareButton-ff4bd21e.js';
import './usePress-051f5adb.js';
import './usePressClick-945cc43b.js';
import './useTabbableMode-090ed4b5.js';
import './buttonUtils-55fb1df7.js';
import './id-83adac50.js';
import './ButtonLabelLayout-1631c997.js';
import './Text-834eb35e.js';
import './UNSAFE_Text/themes/TextStyles.css.js';
import './TextStyles.styles.css';
import './useButtonLabelLayoutTheme-448e671d.js';
import './UNSAFE_ButtonLabelLayout/themes/redwood/ButtonLabelLayoutTheme.js';
import './UNSAFE_ButtonLabelLayout/themes/ButtonLabelLayoutStyles.css.js';
import './ButtonLabelLayoutStyles.styles.css';
import './UNSAFE_ButtonLabelLayout/themes/redwood/ButtonLabelLayoutBaseTheme.css.js';
import './UNSAFE_ButtonLabelLayout/themes/redwood/ButtonLabelLayoutBaseTheme.styles.css';
import './UNSAFE_ButtonLabelLayout/themes/redwood/ButtonLabelLayoutVariants.css.js';
import './ButtonLabelLayoutVariants.styles.css';
import './MessageStyles.styles.css';
import './MessageFormattingUtils-cdb25115.js';
import './getLocale-1c41e86a.js';
import './stringUtils-0fe25200.js';
import './TransitionGroup-5fd80dc9.js';
import './MessagesContext-76544845.js';
import './ComponentMessageStyles.styles.css';
import './UNSAFE_ComponentMessage/themes/redwood/ComponentMessageBaseTheme.styles.css';
import './UNSAFE_ComponentMessage/themes/redwood/ComponentMessageVariants.css.js';
import './UNSAFE_Separator/themes/SeparatorStyles.css.js';
import './SeparatorStyles.styles.css';
import './CompactLabelAssistance-e2fcfcab.js';
import './Help-32a9689a.js';
import './Icon-4983d06e.js';
import './UNSAFE_Icon/themes/IconStyle.css.js';
import './useFocusWithin-30b1e2d8.js';
import './UNSAFE_UserAssistance/themes/UserAssistanceStyles.css.js';
import './UNSAFE_Label/themes/redwood/LabelTheme.js';
import './UNSAFE_Label/themes/LabelStyles.css.js';
import './UNSAFE_Label/themes/redwood/LabelBaseTheme.css.js';
import './truncationUtils-e37f95ee.js';
import './UNSAFE_TextField/themes/redwood/TextFieldTheme.js';
import './UNSAFE_TextField/themes/redwood/TextFieldBaseTheme.css.js';
import './TextFieldVariants.styles.css';
import './LiveRegionStyles.styles.css';
import './useAccessibleContext-5744de8b.js';
import './useTextFieldInputHandlers-8122048f.js';
import './textAlign-ad252afa.js';
import './text.styles.css';
import './vanilla-extract-sprinkles-createRuntimeSprinkles.esm-2d655d37.js';
import './TextFieldUtils-8232bca7.js';
import './UNSAFE_TextField/themes/FormControlUtilsStyles.css.js';
import './FormControlUtilsStyles.styles.css';
import './UNSAFE_TextField/themes/redwood/TextFieldInputTheme.js';
import './UNSAFE_TextField/themes/TextFieldInputStyles.css.js';
import './TextFieldInputStyles.styles.css';
import './UNSAFE_TextField/themes/redwood/TextFieldInputVariants.css.js';
import './TextFieldInputVariants.styles.css';
import './LabelValueLayout-c6b9945a.js';
import './StyledLabelValueLayout-bb05f474.js';
import './UNSAFE_TextField/themes/redwood/FormLayoutTheme.js';
import './UNSAFE_TextField/themes/redwood/FormLayoutBaseTheme.css.js';
import './formControlUtils-6fc3a497.js';
import './LayoutStyles.css-6b02421a.js';
import './UNSAFE_Skeleton/themes/redwood/SkeletonTheme.js';
import './UNSAFE_Skeleton/themes/SkeletonStyles.css.js';
import './UNSAFE_Skeleton/themes/redwood/SkeletonBaseTheme.css.js';
import './UNSAFE_Skeleton/themes/redwood/SkeletonBaseTheme.styles.css';
import './UNSAFE_Skeleton/themes/redwood/SkeletonVariants.css.js';
import './useInputGroupContext-1d19411e.js';
import './useUser-06d34d19.js';
import './UNSAFE_TextField/themes/redwood/ReadonlyTextFieldTheme.js';
import './UNSAFE_TextField/themes/ReadonlyTextFieldStyles.css.js';
import './ReadonlyTextFieldStyles.styles.css';
import './UNSAFE_TextField/themes/redwood/ReadonlyTextFieldVariants.css.js';
import './ReadonlyTextFieldVariants.styles.css';
import './UNSAFE_TextField/themes/redwood/ReadonlyTextFieldInputTheme.js';
import './UNSAFE_TextField/themes/ReadonlyTextFieldInputStyles.css.js';
import './ReadonlyTextFieldInputStyles.styles.css';
import './UNSAFE_TextField/themes/redwood/ReadonlyTextFieldInputVariants.css.js';
import './index-aec1cc7f.js';
import './UNSAFE_Layer/themes/LayerHostStyles.css.js';
import './LayerHostStyles.styles.css';
import './boxalignment-8980856d.js';
import './arrayUtils-35a58161.js';
import './boxalignment.styles.css';
import './flexbox-529f25da.js';
import './flexbox.styles.css';
import './flexitem-7b7f7920.js';
import './flexitem.styles.css';
import './FlexStyles.styles.css';
import './EnvironmentProvider-6a0a8212.js';
import './LayerManager-52a26c55.js';
import './Floating-4a82db94.js';
import './useFloating-b9d680f7.js';
import './positionUtils-f26caad9.js';
import './refUtils-76275c69.js';
import './useOutsideClick-b777a43e.js';
import './Layer-535577b5.js';
import './UNSAFE_Layer/themes/LayerStyles.css.js';
import './LayerStyles.styles.css';
import './useModal-953082f2.js';
import './UNSAFE_Floating/themes/redwood/FloatingTheme.js';
import './UNSAFE_Floating/themes/FloatingStyles.css.js';
import './FloatingStyles.styles.css';
import './UNSAFE_Floating/themes/redwood/FloatingBaseTheme.css.js';
import './UNSAFE_Floating/themes/redwood/FloatingBaseTheme.styles.css';
import './UNSAFE_Floating/themes/redwood/FloatingVariants.css.js';
import './vanilla-extract-dynamic.esm-c909758c.js';
import './UNSAFE_Floating/themes/FloatingContract.css.js';
import './useUnsafeDomElementRef-32290273.js';
import './ComponentMessageContainer-d16c8b1f.js';
import './MessagesManager-47000438.js';
import './SuccessS-b5192d40.js';
import './ErrorS-3a890bf6.js';
import './InformationS-d53c2a91.js';
import './WarningS-3e53d87e.js';
import './PRIVATE_Message/themes/MessageStyles.css.js';
import './soundUtils-88264cb5.js';
import './useMessagesContext-9e1dbe91.js';
import './Transition-f9501682.js';
import './HiddenAccessible-61197e7c.js';
import './UNSAFE_ComponentMessage/themes/redwood/ComponentMessageTheme.js';
import './UNSAFE_ComponentMessage/themes/ComponentMessageStyles.css.js';
import './UNSAFE_ComponentMessage/themes/redwood/ComponentMessageBaseTheme.css.js';
import './UNSAFE_UserAssistance/themes/redwood/UserAssistanceTheme.js';
import './UNSAFE_UserAssistance/themes/redwood/UserAssistanceBaseTheme.css.js';
import './InlineHelp-9eaac91c.js';
import './tabbableUtils-c8311ec6.js';
import './head-8f89fe66.js';
import './_arity-be492b9e.js';
import './_isArray-694cc52d.js';
import './_isString-675f1de9.js';
import './FocusTrap-b59d5752.js';
import './FocusTracker-70300f1c.js';
import './PRIVATE_FocusTracker/themes/FocusTrackerStyles.css.js';
import './FocusTrackerStyles.styles.css';
import './Modal-c0f730b8.js';
import './UNSAFE_Modal/themes/ModalStyles.css.js';
import './ModalStyles.styles.css';
import './popupUtils-51366a29.js';
import './WindowOverlay-7264c44a.js';
import './UNSAFE_WindowOverlay/themes/WindowOverlayStyles.css.js';
import './WindowOverlayStyles.styles.css';
import './UNSAFE_WindowOverlay/themes/WindowOverlayContract.css.js';
import './UNSAFE_WindowOverlay/themes/redwood/WindowOverlayTheme.js';
import './UNSAFE_WindowOverlay/themes/redwood/WindowOverlayBaseTheme.css.js';
import './UNSAFE_WindowOverlay/themes/redwood/WindowOverlayBaseTheme.styles.css';
import './UNSAFE_WindowOverlay/themes/redwood/WindowOverlayVariants.css.js';
import './usePopupAnimation-96d2bc83.js';
import './useAnimationStatus-b881f39a.js';
import './popupAnimationUtils-175151d9.js';
import './UNSAFE_Popup/themes/PopupContract.css.js';
import './UNSAFE_Popup/themes/redwood/PopupTheme.js';
import './UNSAFE_Popup/themes/redwood/PopupBaseTheme.css.js';
import './PopupStyles.styles.css';
import './colors-03807160.js';
import './useTimer-571e41e7.js';
import './useMessageSeverity-65295e8f.js';
import './useFormFieldContextProps-31bbc12f.js';
import './PRIVATE_SelectCommon/themes/dropdownStyles.css.js';
import './dropdownStyles.styles2.css';
import './useOutsideMousedown-c45c22c0.js';
import './Link-8503aab2.js';
import './useInteractionStyle-99e32c23.js';
import './UNSAFE_Link/themes/redwood/LinkTheme.js';
import './UNSAFE_Link/themes/LinkStyles.css.js';
import './LinkStyles.styles.css';
import './UNSAFE_Link/themes/redwood/LinkBaseTheme.css.js';
import './UNSAFE_Link/themes/redwood/LinkBaseTheme.styles.css';
import './UNSAFE_Link/themes/redwood/LinkVariants.css.js';
import './LinkVariants.styles.css';
import './PRIVATE_SelectCommon/themes/mobileDropdownStyles.css.js';
import './mobileDropdownStyles.styles.css';
import './PRIVATE_SelectCommon/themes/selectMobileDropdownStyles.css.js';
import './selectMobileDropdownStyles.styles.css';
import './PRIVATE_SelectCommon/themes/SelectMobileFieldInputStyles.css.js';
import './SelectMobileFieldInputStyles.styles.css';
import './HighlightText-0205faef.js';
import './HighlightTextStyles.styles.css';
import './Grid-9e4b4f19.js';
import './grid-65aa641c.js';
import './GridStyles.styles.css';
import './ListItemLayoutStyles.styles.css';
import './ListItemText-d001751c.js';
import './List-4636ba9b.js';
import './keys-49c92dbb.js';
import './collectionUtils-5313629f.js';
import './Selector-23bccbe7.js';
import './BaseSelector-7cbc48bc.js';
import './StyledCheckbox-d6c8f557.js';
import './Check-ac39fe00.js';
import './CheckboxOff-3359a12d.js';
import './CheckboxOn-930b64de.js';
import './CheckboxMixed-c4594250.js';
import './UNSAFE_Checkbox/themes/CheckboxIconContract.css.js';
import './UNSAFE_Checkbox/themes/redwood/CheckboxIconTheme.js';
import './UNSAFE_Checkbox/themes/CheckboxIconStyles.css.js';
import './CheckboxIconStyles.styles.css';
import './UNSAFE_Checkbox/themes/redwood/CheckboxIconBaseTheme.css.js';
import './UNSAFE_Checkbox/themes/redwood/CheckboxIconBaseTheme.styles.css';
import './UNSAFE_Checkbox/themes/redwood/CheckboxIconVariants.css.js';
import './CheckboxIconVariants.styles.css';
import './StyledCheckbox.styles.css';
import './PRIVATE_BaseSelector/themes/SelectorStyles.css.js';
import './SelectorStyles.styles.css';
import './CollectionInteractionContext-7cf19abc.js';
import './useCollectionInteractionContext-3895c632.js';
import './LoadMoreCollection-d9f22790.js';
import './Collection-e1ef8b8d.js';
import './useViewportIntersect-6ff65310.js';
import './VirtualizedCollection-0160e675.js';
import './useNavigation-b257c33a.js';
import './useCurrentKey-5f865bbd.js';
import './useReorderableContext-79b1c941.js';
import './ReorderableContext-0daeea89.js';
import './useCollectionFocusRing-23ac7f97.js';
import './useTabbableModeSet-159b0279.js';
import './PRIVATE_List/themes/ListStyles.css.js';
import './ImageVars.styles.css';
import './ListStyles.styles.css';
import './Skeleton-d6f0969e.js';
import './borders-98a63040.js';
import './ImageVars.css-7b3180c8.js';
import './useTheme-0e7497db.js';
import './useSelection-65134722.js';
import './textSelectionUtils-e87a47ff.js';
import './useAdditiveSelection-3ba8e3e3.js';
import './useItemAction-27b29f5c.js';
import './Inset-8afb9876.js';
import './UNSAFE_Inset/themes/InsetStyles.css.js';
import './InsetStyles.styles.css';
import './PRIVATE_List/themes/redwood/ListBaseTheme.styles.css';
import './CaretDown-4061aefc.js';
import './NavLeft-9bb41f35.js';
import './TextField-7884fcd7.js';
import './padding-90265467.js';
import './aria-efa0582c.js';
import './equals-625352e8.js';

function SelectSingleDesktopDropdown({ assistiveText, collectionRenderer, collectionRendererContext, data, dropdownId, dropdownRef, helpSourceLink, helpSourceText, isAddToListShown, isAdvancedSearchShown, isDisabled, isDropdownAbove, isEmptyResults, isOpen, isReadonly, label, mainFieldRef, onAddToListAction, onAdvancedSearchAction, onAutoDismiss, onPosition, userAssistanceDensity }) {
    const translations = useTranslationBundle('@oracle/oraclejet-preact');
    const dropdownInlineUserAssistance = isOpen &&
        !isDropdownAbove &&
        !isDisabled &&
        !isReadonly &&
        (assistiveText || helpSourceLink) &&
        (userAssistanceDensity === 'efficient' || userAssistanceDensity === 'reflow') ? (jsx(TabbableModeContext.Provider, { value: { isTabbable: false }, children: jsx(DropdownUserAssistance, { assistiveText: assistiveText, fieldLabel: label, helpSourceLink: helpSourceLink, helpSourceText: helpSourceText, userAssistanceDensity: userAssistanceDensity }) })) : undefined;
    const dropdownListContent = isEmptyResults ? (isAddToListShown || isAdvancedSearchShown ? undefined : (jsx(EmptyResults, {}))) : (collectionRenderer(collectionRendererContext));
    const addToListContent = isAddToListShown ? (jsxs(Fragment, { children: [!isEmptyResults && (jsx("div", { onMouseDown: preventDefault, children: jsx(Separator, {}) })), jsx(LinkItem, { isHighlighted: isEmptyResults, onAction: onAddToListAction, children: translations.select_addToList() })] })) : undefined;
    const advancedSearchContent = isAdvancedSearchShown ? (jsxs(Fragment, { children: [!isEmptyResults && (jsx("div", { onMouseDown: preventDefault, children: jsx(Separator, {}) })), jsx(LinkItem, { isHighlighted: isEmptyResults, onAction: onAdvancedSearchAction, children: translations.select_moreSearchOptions() })] })) : undefined;
    return (jsxs(Dropdown, { anchorRef: mainFieldRef, dropdownRef: dropdownRef, id: dropdownId, isOpen: isOpen, onAutoDismiss: onAutoDismiss, onPosition: onPosition, children: [jsxs(DropdownList, { hasBottomGap: dropdownInlineUserAssistance === undefined, isLoading: data === null, children: [dropdownListContent, addToListContent, advancedSearchContent] }), dropdownInlineUserAssistance] }));
}

function useMobileDropdown({ clearValue, displayValue, inputRef, isDropdownOpen, userInput, setDropdownOpen, stopFiltering, setUserInput }) {
    // Create a ref for the input in the dropdown
    const dropdownInputRef = useRef(null);
    const closeDropdown = useCallback(() => {
        setDropdownOpen(false);
        // stop filtering before closing the dropdown
        stopFiltering();
        // revert the focus back to the main field
        inputRef.current?.focus();
    }, [inputRef, setDropdownOpen, stopFiltering]);
    const onBackButtonClick = useCallback(() => {
        closeDropdown();
    }, [closeDropdown]);
    const onClearButtonClick = useCallback(() => {
        // reset the user filter and the value of the component
        stopFiltering();
        // clear the value but do not close the dropdown
        clearValue(false);
        // set focus to the dropdown input field
        dropdownInputRef.current?.focus();
    }, [clearValue, stopFiltering]);
    const wasDropdownOpen = useRef(isDropdownOpen);
    useEffect(() => {
        // if the dropdown is open, ignore any valueItems update
        if (isDropdownOpen) {
            // this dropdown is opened now, so set the focus on the input field
            setTimeout(() => dropdownInputRef.current?.focus(), 0);
        }
        wasDropdownOpen.current = isDropdownOpen;
    }, [isDropdownOpen]);
    const isInitialRender = useRef(true);
    if (isInitialRender.current) {
        isInitialRender.current = false;
        setUserInput(displayValue);
    }
    return {
        selectSingleFieldInputProps: {
            displayValue: userInput ?? '',
            hasEmptyLabel: false,
            hasInsideLabel: true,
            inputRef: dropdownInputRef,
            isUserFiltering: true,
            removeIcon: 'always',
            userInput
        },
        selectSingleFieldProps: {
            hasInsideLabel: true,
            isBackButtonShown: true,
            isClearButtonShown: !isSearchTextEmptyOrUndefined(userInput) || !isSearchTextEmptyOrUndefined(displayValue),
            isDropdownArrowShown: false,
            styleVariant: 'embedded',
            onBackButtonClick,
            onClearButtonClick
        }
    };
}

function SelectSingleMobileDropdown({ 'aria-describedby': ariaDescribedBy, 'aria-label': ariaLabel, assistiveText, clearValue, collectionRenderer, collectionRendererContext, data, displayValue, dropdownId, helpSourceLink, helpSourceText, isAddToListShown, isAdvancedSearchShown, isEmptyResults, isFocused, isLoading, isOpen = false, isRequired, label, liveRegionText, mainFieldInputRef, onAddToListAction, onAdvancedSearchAction, onFieldBlur, onFieldFocus, onFieldInput, onFieldKeyDown, onFieldKeyUp, placeholder, propIsLoading, setDropdownOpen, setUserInput, stopFiltering, textAlign, userAssistanceDensity, userInput, virtualKeyboard }) {
    const translations = useTranslationBundle('@oracle/oraclejet-preact');
    const { formFieldContext, inputProps, labelProps, textFieldProps, userAssistanceProps } = useTextField({
        ariaDescribedBy,
        helpSourceLink,
        helpSourceText,
        isDisabled: false,
        isFocused,
        isLoading,
        isReadonly: false,
        isRequiredShown: false,
        labelEdge: 'inside',
        styleVariant: 'default',
        value: ''
    });
    const { selectSingleFieldInputProps, selectSingleFieldProps } = useMobileDropdown({
        clearValue,
        displayValue,
        inputRef: mainFieldInputRef,
        isDropdownOpen: isOpen,
        setDropdownOpen,
        setUserInput,
        stopFiltering,
        userInput
    });
    // JET-54256 - inside label animates up on initial display with selected value
    // If we're waiting for the selected values to load, the component should look like it
    // has a value in the meantime.
    // Use the original propIsLoading instead of isLoading because we don't want to delay
    // the inside label position by a timer like we do the progressive loading indicator.
    formFieldContext.hasValue = propIsLoading || formFieldContext.hasValue;
    const mobileDropdownFieldLabelProps = {
        label: jsx(Label, { ...labelProps, children: label }),
        labelEdge: 'inside'
    };
    const dropdownInlineUserAssistance = isOpen &&
        (assistiveText || helpSourceLink) &&
        (userAssistanceDensity === 'efficient' || userAssistanceDensity === 'reflow') ? (jsx(DropdownUserAssistance, { assistiveText: assistiveText, fieldLabel: label, helpSourceLink: helpSourceLink, helpSourceText: helpSourceText, userAssistanceDensity: userAssistanceDensity, ...userAssistanceProps })) : undefined;
    const dropdownListContent = isEmptyResults ? (isAddToListShown || isAdvancedSearchShown ? undefined : (jsx(EmptyResults, {}))) : (collectionRenderer(collectionRendererContext));
    const addToListContent = isAddToListShown ? (jsxs(Fragment, { children: [jsx("div", { onMouseDown: preventDefault, children: jsx(Separator, {}) }), jsx(LinkItem, { onAction: onAddToListAction, children: translations.select_addToList() })] })) : undefined;
    const advancedSearchContent = isAdvancedSearchShown ? (jsxs(Fragment, { children: [jsx("div", { onMouseDown: preventDefault, children: jsx(Separator, {}) }), jsx(LinkItem, { onAction: onAdvancedSearchAction, children: translations.select_moreSearchOptions() })] })) : undefined;
    return (jsx(SelectMobileDropdown, { header: jsxs(FormFieldContext.Provider, { value: formFieldContext, children: [jsx(View, { children: jsx(SelectSingleField, { ...textFieldProps, ...mobileDropdownFieldLabelProps, ...selectSingleFieldProps, onFocus: onFieldFocus, onBlur: onFieldBlur, children: jsx(SelectSingleFieldInput, { ...inputProps, ...selectSingleFieldInputProps, "aria-controls": dropdownId, "aria-expanded": isOpen, "aria-label": ariaLabel, isAddToListShown: isAddToListShown, isAdvancedSearchShown: isAdvancedSearchShown, isRequired: isRequired, liveRegionText: liveRegionText, placeholder: placeholder, textAlign: textAlign, virtualKeyboard: virtualKeyboard, onInput: onFieldInput, onKeyDown: onFieldKeyDown, onKeyUp: onFieldKeyUp }) }) }), dropdownInlineUserAssistance, addToListContent, advancedSearchContent] }), hasHeaderSeparator: !(isAdvancedSearchShown && isEmptyResults), id: dropdownId, isOpen: isOpen, labelId: labelProps.id, children: jsx(DropdownList, { isLoading: data === null, hasTopGap: !(isAddToListShown || isAdvancedSearchShown), children: dropdownListContent }) }));
}

/**
 * @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 manages SelectSingle state and behavior.  This hook creates state variables and
 * event listeners, returning properties to apply to components internally rendered by
 * SelectSingle, as well as state information.
 *
 * @param data Specifies data for the dropdown list.
 * @param inputRef Ref to the input element.
 * @param isDisabled Specifies whether the component is disabled.
 * @param isFocused Specifies whether the component has focus.
 * @param isReadonly Specifies whether the component is readonly.
 * @param onCommit Callback invoked when the selected value is committed.
 * @param onFilter Callback function to trigger loading data for the dropdown list,
 * which may or may not be filtered by user entered text.
 * @param valueItem Specifies the key, data, and optional metadata for the selected value.
 *
 * @returns Properties to apply to internal components that SelectSingle renders, and component
 * state.
 */
function useSelectSingle({ addToList, advancedSearch, data, inputRef, isDisabled, isFocused: propIsFocused, isReadonly, onAddToListAction, onAdvancedSearchAction, onCommit: propOnCommit, onFilter, valueItem }) {
    const { currentRowKeyRef, currentRowOverride, dropdownRef, getDropdownTabbableElems, handleDropdownArrowClick, handleDropdownAutoDismiss: baseHandleDropdownAutoDismiss, handleDropdownPosition, handleInput, handleMainFieldKeyDown: baseHandleMainFieldKeyDown, handleMainFieldKeyUp, isDropdownAbove, isDropdownOpen, isFocused, isUserFiltering, mainFieldRef, onCurrentKeyChange, onMouseDown, searchText, setCurrentRowOverride, setDropdownOpen, setUserInput, stopFiltering, userInput } = useSelectCommon({
        data,
        inputRef,
        isFocused: propIsFocused,
        onFilter
    });
    const [selectedKeys, setSelectedKeys] = useState();
    const [isBlurClearValue, setBlurClearValue] = useState(false);
    const [prevIsFocused, setPrevIsFocused] = useState(isFocused);
    const [isTabbingOutOfDropdown, setTabbingOutOfDropdown] = useState(false);
    // refs used by some of the effects below to determine whether the effect needs to run,
    // for when the list of dependencies is longer than what we want the trigger to actually be
    const prevDataRef = useRef(data);
    const prevDropdownOpenRef = useRef(isDropdownOpen);
    const prevSearchText = useRef(searchText);
    const isAdvancedSearchShown = advancedSearch === 'on' && isUserFiltering && searchText != null && searchText.length > 0;
    const isDataFetched = data !== undefined && data !== null && !isBeforeDataFetch(data);
    const isEmptyResults = isDataFetched && data?.totalSize === 0;
    // advanced search and add to list should not be shown at the same time, so if both are on,
    // let advanced search win because it is shown more often than add to list in the dropdown
    // (even when the list is not empty) and its external UI could potentially include the
    // ability to add to list too
    const isAddToListShown = addToList === 'on' &&
        advancedSearch !== 'on' &&
        isUserFiltering &&
        searchText != null &&
        searchText.length > 0;
    const handleAddToListAction = useCallback(() => {
        setDropdownOpen(false);
        stopFiltering();
        onAddToListAction?.({ searchText: isUserFiltering ? searchText : undefined });
    }, [isUserFiltering, onAddToListAction, searchText, setDropdownOpen, stopFiltering]);
    const handleAdvancedSearchAction = useCallback(() => {
        setDropdownOpen(false);
        stopFiltering();
        onAdvancedSearchAction?.({ searchText: isUserFiltering ? searchText : undefined });
    }, [isUserFiltering, onAdvancedSearchAction, searchText, setDropdownOpen, stopFiltering]);
    const onCommit = useCallback((value) => {
        propOnCommit?.({
            value: value,
            previousValue: valueItem !== undefined ? valueItem.key : undefined
        });
    }, [propOnCommit, valueItem]);
    const clearValue = useCallback((shouldCloseDropdown = true) => {
        if (shouldCloseDropdown) {
            setDropdownOpen(false);
        }
        setSelectedKeys(new Set());
        // call the onCommit callback so that the consuming code can update the valueItem
        onCommit(undefined);
    }, [onCommit, setDropdownOpen]);
    // determine if we need to clear the value because the user has deleted all the text
    const isClearValueNeeded = useCallback(() => {
        return isUserFiltering && userInput === '' && valueItem !== undefined;
    }, [isUserFiltering, userInput, valueItem]);
    const clearValueIfNeeded = useCallback(() => {
        if (isClearValueNeeded()) {
            clearValue();
            return true;
        }
        return false;
    }, [clearValue, isClearValueNeeded]);
    // JET-65757 - Empty value rejected when not confirmed by Enter/Tab
    // When the field loses focus, check to see if we need to clear the value and set a state flag
    // to later check in a useEffect.
    // (We have to make this check outside of the useEffect itself because by the time the useEffect
    // is called, the state we check here to see if we need to clear the value may have already
    // been changed.)
    if (prevIsFocused &&
        !isFocused &&
        !isTabbingOutOfDropdown &&
        !isBlurClearValue &&
        isClearValueNeeded()) {
        setBlurClearValue(true);
    }
    // Create this function with useEffectEvent so that it is stable and by itself won't cause
    // the below dependent useEffect to trigger.
    const handleBlur_stable = useEffectEvent(() => {
        // if we need to clear the value, do it now and reset the flag
        if (isBlurClearValue) {
            clearValue();
            setBlurClearValue(false);
        }
        // if we were tabbing out of the dropdown, reset the flag now that we've lost focus
        if (isTabbingOutOfDropdown) {
            setTabbingOutOfDropdown(false);
        }
    });
    // only run this effect when focus changes (handleBlur_stable has to be listed
    // as a dependency, but it's stable and won't change across renders)
    useEffect(() => {
        if (!isFocused) {
            handleBlur_stable();
        }
    }, [handleBlur_stable, isFocused]);
    // JET-60376, JET-62113: Create a changeValue method that can be called by a test adapter to
    // simulate a user changing the value. This method calls the onCommit callback, just like what
    // would happen if a user (or test) made a change through the UI.
    const textFieldRef = useRef(null);
    const changeValue = useCallback((value) => {
        // 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) {
            onCommit(value);
            return Promise.resolve();
        }
        return Promise.reject('Component is readonly or disabled');
    }, [isDisabled, isReadonly, onCommit]);
    // Expose _changeValue as a hidden method on the root DOM.
    useHiddenTestMethod({
        elementRef: isReadonly ? mainFieldRef : textFieldRef,
        method: changeValue,
        name: '_changeValue'
    });
    const focusInput = useCallback(() => {
        inputRef.current?.focus();
    }, [inputRef]);
    const removeDropdown = useCallback(() => {
        dropdownRef.current?.parentElement?.removeChild(dropdownRef.current);
    }, [dropdownRef]);
    const myHandleDropdownAutoDismiss = useCallback((event) => {
        if (isDropdownOpen) {
            if (event?.type === 'keydown') {
                const keyboardEvent = event;
                switch (keyboardEvent.code) {
                    case KEYS.TAB: {
                        // if there are multiple tabbable elements in the dropdown, like the list and
                        // the advanced search link, then leave the dropdown open when tabbing among them
                        const isShift = keyboardEvent.shiftKey;
                        const tabbableElems = getDropdownTabbableElems();
                        if (tabbableElems && tabbableElems.length > 1) {
                            const firstTabbableElem = tabbableElems[0];
                            const lastTabbableElem = tabbableElems[tabbableElems.length - 1];
                            // check if tabbing forwards and focus is not on the last tabbable elem or
                            // tabbing backwards and focus is not on the first tabbable elem,
                            // then keep the dropdown open and simply return
                            if ((!isShift && document.activeElement !== lastTabbableElem) ||
                                (isShift && document.activeElement !== firstTabbableElem)) {
                                setDropdownOpen(true);
                                return;
                            }
                        }
                        // if there is a currentRow in the dropdown, select it and commit it
                        if (currentRowKeyRef.current !== undefined && data != null && data.data.length > 0) {
                            setSelectedKeys(new Set([currentRowKeyRef.current]));
                            onCommit(currentRowKeyRef.current);
                            // set flag that we're tabbing out of dropdown so that we can check it in a
                            // useEffect that gets executed when we lose focus
                            setTabbingOutOfDropdown(true);
                        }
                        // Put focus on an element in the main field, but don't kill the event, so that
                        // the browser can naturally transfer focus to the next focusable item relative
                        // to the element in the main field.
                        focusInput();
                        // Remove the dropdown immediately, without waiting for a rerender based on changing
                        // state, so that the open dropdown cannot get focus when the browser handles the
                        // Tab key.
                        removeDropdown();
                        break;
                    }
                }
            }
        }
    }, [
        currentRowKeyRef,
        data,
        focusInput,
        getDropdownTabbableElems,
        isDropdownOpen,
        onCommit,
        removeDropdown,
        setDropdownOpen
    ]);
    const myHandleMainFieldKeyDown = useCallback((event) => {
        // ignore control key and function key
        if (isControlOrFunctionKey(event)) {
            return;
        }
        switch (event.code) {
            case KEYS.TAB: {
                // if we're not going to clear the value when the component loses focus,
                // check whether we need to select the current item
                const isValueClearedTab = isClearValueNeeded();
                if (!isValueClearedTab && isDropdownOpen && data != null && data.data.length > 0) {
                    // JET-68215 (Error state is lost after mouse click + Tab). If the user is just tabbing
                    // to navigate between controls, we don't want to consider that a selection. Only commit
                    // if the user has interacted with the control. isUserFiltering is set to true whenever
                    // the user types to filter and will get reset when the dropdown closes.
                    if (isUserFiltering) {
                        // if there is a currentRow in the dropdown (meaning a highlighted item that would
                        // have keyboard focus if the dropdown list had physical focus, which may be different
                        // from the currently selected item), select it and commit it;
                        // otherwise commit the currently selected value again so that a valueAction event
                        // will be fired
                        if (currentRowKeyRef.current !== undefined) {
                            setSelectedKeys(new Set([currentRowKeyRef.current]));
                            onCommit(currentRowKeyRef.current);
                        }
                        else {
                            onCommit(valueItem?.key ?? undefined);
                        }
                    }
                }
                // Remove the dropdown immediately, without waiting for a rerender based on changing
                // state, so that the open dropdown cannot get focus when the browser handles the
                // Tab key.
                removeDropdown();
                setDropdownOpen(false);
                break;
            }
            case KEYS.ENTER: {
                // if this is on a mobile device (only phone and not in tablet devices), do not do anything
                if (isPhone()) {
                    return;
                }
                // if add to list is shown and there are no results, trigger the add to list link
                if (isAddToListShown && isEmptyResults) {
                    handleAddToListAction();
                    return;
                }
                // if advanced search is shown and there are no results, trigger the advanced
                // search link
                if (isAdvancedSearchShown && isEmptyResults) {
                    handleAdvancedSearchAction();
                    return;
                }
                // check whether we need to clear the value;
                // if not, check whether we need to select the current item
                const isValueCleared = clearValueIfNeeded();
                if (!isValueCleared && isDropdownOpen && data != null && data.data.length > 0) {
                    setDropdownOpen(false);
                    // after selecting a value, the user is no longer actively filtering, so update related
                    // state accordingly so that the newly selected value appears in the field
                    stopFiltering();
                    // if there is a currentRow in the dropdown, select it and commit it;
                    // otherwise commit the currently selected value again
                    if (currentRowKeyRef.current !== undefined) {
                        setSelectedKeys(new Set([currentRowKeyRef.current]));
                        onCommit(currentRowKeyRef.current);
                    }
                    else {
                        onCommit(valueItem?.key ?? undefined);
                    }
                }
                break;
            }
        }
    }, [
        clearValueIfNeeded,
        currentRowKeyRef,
        data,
        handleAddToListAction,
        handleAdvancedSearchAction,
        isAddToListShown,
        isAdvancedSearchShown,
        isClearValueNeeded,
        isDropdownOpen,
        isEmptyResults,
        isUserFiltering,
        onCommit,
        removeDropdown,
        setDropdownOpen,
        stopFiltering,
        valueItem
    ]);
    // when the valueItem changes, save the new selectedKeys
    useEffect(() => {
        setSelectedKeys(valueItem === undefined ? undefined : new Set([valueItem.key]));
    }, [valueItem]);
    const onItemAction = useCallback((detail) => {
        focusInput();
        setDropdownOpen(false);
        // after selecting a value, the user is no longer actively filtering, so update related
        // state accordingly so that the newly selected value appears in the field
        stopFiltering();
        const newKey = detail.context.key;
        // update the selectedKeys so that the selection visual state of the collection
        // updates immediately while waiting for a new valueItem to be set
        setSelectedKeys(new Set([newKey]));
        // call the onCommit callback so that the consuming code can update the valueItem
        onCommit(newKey);
    }, [focusInput, onCommit, setDropdownOpen, stopFiltering]);
    useEffect(() => {
        // Only run this effect when data changes because we need to wait for the new set of
        // filtered data to be set before highlighting the first result.
        // We also need to do this when the user clears the field for the first time. This is because,
        // when opening the dropdown with a selected value, we show all the data but we start navigation
        // from the selected item. But, if one clears the field, then the data stays the same but we need
        // to start the navigation from the first row.
        if (data === prevDataRef.current &&
            !isSearchClearedFirstTime(prevSearchText.current, searchText)) {
            return;
        }
        // when filtering, set the first result of the filtered data set to be the current item
        // (check the data offset so we don't try to highlight again if the user scrolls through
        // the list and more data is fetched)
        if (isDropdownOpen &&
            isUserFiltering &&
            data != null &&
            data.offset === 0 &&
            data.data.length > 0) {
            // if there are results and search text, highlight the first row, otherwise clear
            // an existing highlight
            setCurrentRowOverride({
                rowKey: !isSearchTextEmptyOrUndefined(searchText) ? data.data[0].metadata.key : undefined
            });
        }
    }, [data, isDropdownOpen, isUserFiltering, searchText, setCurrentRowOverride]);
    useEffect(() => {
        // only run this effect when the state of the dropdown changes
        if (isDropdownOpen === prevDropdownOpenRef.current) {
            return;
        }
        // JET-66783 - <oj-c-select-single> scroll position is not at selected item when we open the list second time.
        // JET-75708 - Clearing the filter without opening the dropdown starts navigation from an incorrect item
        // when the dropdown opens update the current row
        if (isDropdownOpen) {
            // if not filtering and there are selected rows, set that as the current row
            // otherwise, clear the current row
            if (!isUserFiltering && selectedKeys && selectedKeys.size > 0) {
                setCurrentRowOverride({ rowKey: Array.from(selectedKeys)[0] });
            }
            else {
                setCurrentRowOverride({ rowKey: undefined });
            }
        }
    }, [isDropdownOpen, isUserFiltering, selectedKeys, setCurrentRowOverride]);
    const dropdownEventHandlers = useMemo(() => {
        return mergeProps({
            onAutoDismiss: baseHandleDropdownAutoDismiss,
            onPosition: handleDropdownPosition
        }, { onAutoDismiss: myHandleDropdownAutoDismiss });
    }, [baseHandleDropdownAutoDismiss, handleDropdownPosition, myHandleDropdownAutoDismiss]);
    const inputEventHandlers = useMemo(() => {
        return mergeProps({
            onInput: handleInput,
            onKeyDown: baseHandleMainFieldKeyDown,
            onKeyUp: handleMainFieldKeyUp
        }, { onKeyDown: myHandleMainFieldKeyDown });
    }, [baseHandleMainFieldKeyDown, handleInput, handleMainFieldKeyUp, myHandleMainFieldKeyDown]);
    const collectionRendererContext = useCollectionRenderer({
        currentKey: currentRowOverride.rowKey,
        searchText,
        selectedKeys,
        onCurrentKeyChange,
        onItemAction
    });
    if (isFocused !== prevIsFocused) {
        setPrevIsFocused(isFocused);
    }
    // update refs used in some of the above effects in a useEffect on every render so that they
    // update after the above effects run
    useEffect(() => {
        prevDataRef.current = data;
        prevDropdownOpenRef.current = isDropdownOpen;
        prevSearchText.current = searchText;
    });
    return {
        addToListEventHandlers: {
            onAction: handleAddToListAction
        },
        advancedSearchEventHandlers: {
            onAction: handleAdvancedSearchAction
        },
        collectionRendererContext,
        dropdownArrowEventHandlers: {
            onClick: handleDropdownArrowClick
        },
        clearValue,
        dropdownEventHandlers,
        dropdownRef,
        inputEventHandlers,
        inputRef,
        isAddToListShown,
        isAdvancedSearchShown,
        isDataFetched,
        isDropdownAbove,
        isDropdownOpen,
        isEmptyResults,
        isFocused,
        isUserFiltering,
        mainFieldRef,
        mouseProps: isDisabled || isReadonly ? {} : { onMouseDown },
        setDropdownOpen,
        setUserInput,
        stopFiltering,
        textFieldRef,
        userInput
    };
}

/**
 * A SelectSingle is a dropdown list that supports single selection and search filtering.
 */
const SelectSingle = forwardRef(({ addToList = 'off', advancedSearch = 'off', 'aria-describedby': ariaDescribedBy, assistiveText, collectionRenderer, columnSpan, data, helpSourceLink, helpSourceText, isDisabled: propIsDisabled, isLoading: propIsLoading, isReadonly: propIsReadonly, isRequired, isRequiredShown, itemRenderer, itemText, label, labelEdge: propLabelEdge, labelStartWidth: propLabelStartWidth, messages, onAddToListAction, onAdvancedSearchAction, onCommit, onFilter, onLoadRange, placeholder, testId, textAlign: propTextAlign, userAssistanceDensity: propUserAssistanceDensity, valueItem, variant = 'default', virtualKeyboard }, ref) => {
    const { isDisabled: isFormDisabled, isReadonly: isFormReadonly, labelEdge: formLabelEdge, labelStartWidth: formLabelStartWidth, textAlign: formTextAlign, userAssistanceDensity: formUserAssistanceDensity } = useFormContext();
    // default to FormContext values if component properties are not specified
    const isDisabled = propIsDisabled ?? isFormDisabled;
    const isReadonly = propIsReadonly ?? isFormReadonly;
    const labelEdge = propLabelEdge ?? formLabelEdge;
    const labelStartWidth = propLabelStartWidth ?? formLabelStartWidth;
    const textAlign = propTextAlign ?? formTextAlign ?? defaultTextAlignForVariant(variant);
    const userAssistanceDensity = propUserAssistanceDensity ?? formUserAssistanceDensity;
    const enabledElementRef = useRef(null);
    const readonlyElementRef = useRef(null);
    const { focusProps, isFocused: origIsFocused, methods: focusMethods } = useFocusableTextField({
        isDisabled,
        isReadonly,
        enabledElementRef,
        readonlyElementRef
    });
    useImperativeHandle(ref, () => focusMethods, [focusMethods]);
    const { addToListEventHandlers, advancedSearchEventHandlers, clearValue, collectionRendererContext, dropdownArrowEventHandlers, dropdownEventHandlers, dropdownRef, inputEventHandlers, isAddToListShown, isAdvancedSearchShown, isDataFetched, isDropdownAbove, isDropdownOpen, isEmptyResults, isFocused, isUserFiltering, mainFieldRef, mouseProps, setDropdownOpen, setUserInput, stopFiltering, textFieldRef, userInput } = useSelectSingle({
        addToList,
        advancedSearch,
        data,
        inputRef: enabledElementRef,
        isDisabled,
        isFocused: origIsFocused,
        isReadonly,
        onAddToListAction,
        onAdvancedSearchAction,
        onCommit,
        onFilter,
        valueItem
    });
    // The incoming propIsLoading tells us that we are in a loading state, but we don't want to
    // show the loading indicator until after a delay, because showing it immediately could result
    // in unwanted flashing.  The isLoading var below will be set to true by useLoadingIndicatorTimer
    // after the delay, when the timer expires, at which point we should show the loading indicator.
    // If propIsLoading is set to false before the timer expires, then the timer will be cancelled
    // and no loading indicator will be shown.
    // (ListView detects its loading state by checking data === null.  While it would be nice for
    // us to be consistent and check valueItems === null, we need to use a separate isLoading prop.
    // If valueItems === null triggers our loading state, then the selections in the dropdown
    // are cleared for that period of time, which is undesirable.)
    const isLoading = useLoadingIndicatorTimer(propIsLoading ?? false);
    const { baseId, formFieldContext, inputProps, labelProps, textFieldProps, userAssistanceProps } = useTextField({
        ariaDescribedBy,
        helpSourceLink,
        helpSourceText,
        isDisabled,
        isFocused,
        isLoading,
        isReadonly,
        isRequiredShown,
        labelEdge,
        messages,
        styleVariant: variant,
        userAssistanceDensity,
        value: valueItem !== undefined ? true : undefined
    });
    // JET-54256 - inside label animates up on initial display with selected value
    // If we're waiting for the selected values to load, the component should look like it
    // has a value in the meantime.
    // Use the original propIsLoading instead of isLoading because we don't want to delay
    // the inside label position by a timer like we do the progressive loading indicator.
    formFieldContext.hasValue = propIsLoading || formFieldContext.hasValue;
    const dropdownId = `${baseId}-dropdown`;
    const displayValue = useDisplayValue(itemText, valueItem);
    const labelComp = labelEdge !== 'none' ? jsx(Label, { ...labelProps, children: label }) : undefined;
    const fieldLabelProps = {
        label: labelEdge !== 'none' ? labelComp : undefined,
        labelEdge: labelEdge !== 'none' ? labelEdge : undefined,
        labelStartWidth: labelEdge !== 'none' ? labelStartWidth : undefined,
        labelText: labelEdge === 'inside' && !isDisabled ? label : undefined
    };
    const ariaLabel = labelEdge === 'none' ? label : undefined;
    const isInlineDensity = userAssistanceDensity === 'efficient' || userAssistanceDensity === 'reflow';
    const inlineUserAssistance = isInlineDensity ? (isDisabled ? (
    // save space for user assistance if density is 'efficient', even though we don't
    // render user assistance for disabled fields
    userAssistanceDensity !== 'efficient' ? undefined : (jsx(InlineUserAssistance, { userAssistanceDensity: userAssistanceDensity, ...userAssistanceProps }))) : isReadonly ? (jsx(InlineUserAssistance, { fieldLabel: label, messages: messages, userAssistanceDensity: userAssistanceDensity, ...userAssistanceProps })) : (jsx(InlineUserAssistance, { assistiveText: assistiveText, fieldLabel: label, helpSourceLink: helpSourceLink, helpSourceText: helpSourceText, messages: messages, isRequiredShown: isRequiredShown, userAssistanceDensity: userAssistanceDensity, ...userAssistanceProps }))) : undefined;
    const compactUserAssistance = userAssistanceDensity === 'compact' ? (jsx(CompactUserAssistance, { anchorRef: mainFieldRef, messages: messages, assistiveText: assistiveText, ...userAssistanceProps })) : undefined;
    const translations = useTranslationBundle('@oracle/oraclejet-preact');
    const defaultCollectionRenderer = useCallback(({ onPersistCurrentRowKey, onRowAction, selected, searchText, currentRowKeyOverride }) => (jsx(DefaultList, { "aria-label": label ?? '', componentName: "SelectSingle", currentItemVariant: "highlight", currentKey: currentRowKeyOverride, data: data, itemRenderer: itemRenderer, itemText: itemText, onCurrentKeyChange: onPersistCurrentRowKey, onItemAction: onRowAction, onLoadRange: onLoadRange, searchText: isUserFiltering ? searchText : undefined, selectedKeys: selected, selectionMode: "single" })), [data, isUserFiltering, itemRenderer, itemText, label, onLoadRange]);
    if (isReadonly) {
        const mainContent = (jsx(ReadonlyTextFieldInput, { "aria-describedby": inputProps['aria-describedby'], "aria-label": ariaLabel, "aria-labelledby": labelProps.id, as: "div", elementRef: readonlyElementRef, formVariant: variant, hasEmptyLabel: label === '' && labelEdge === 'none', hasInsideLabel: label !== undefined && labelEdge === 'inside', onBlur: inputProps.onBlur, onFocus: inputProps.onFocus, textAlign: textAlign, value: displayValue }));
        return (jsx(FormFieldContext.Provider, { value: formFieldContext, children: jsx(ReadonlyTextField, { role: "presentation", columnSpan: columnSpan, compactUserAssistance: compactUserAssistance, inlineUserAssistance: inlineUserAssistance, onBlur: focusProps.onFocusOut, onFocus: focusProps.onFocusIn, ref: mainFieldRef, mainContent: mainContent, testId: testId, ...fieldLabelProps }) }));
    }
    const hasInsideLabel = labelComp !== undefined && labelEdge === 'inside';
    const liveRegionText = isDropdownOpen && isDataFetched
        ? data?.totalSize === 0
            ? translations.select_noMatchesFound()
            : data?.totalSize === 1
                ? translations.select_oneMatchFound()
                : data?.sizePrecision === 'exact'
                    ? translations.select_sizeMatchesFound({ TOTAL_SIZE: `${data?.totalSize}` })
                    : translations.select_sizeOrMoreMatchesFound({ TOTAL_SIZE: `${data?.totalSize}` })
        : '';
    const hasEmptyLabel = label === '' && labelEdge === 'none';
    // Use the mobile field if the component is being rendered in a phone
    // and it is not disabled.
    const isPhoneMainFieldInput = isPhone() && !isDisabled;
    const mainContent = !isPhoneMainFieldInput ? (jsx(SelectSingleFieldInput, { "aria-controls": dropdownId, "aria-expanded": isDropdownOpen, "aria-label": ariaLabel, displayValue: displayValue, hasEmptyLabel: label === '' && labelEdge === 'none', hasInsideLabel: hasInsideLabel, inputRef: enabledElementRef, isAddToListShown: isAddToListShown, isAdvancedSearchShown: isAdvancedSearchShown, isRequired: isRequired, isUserFiltering: isUserFiltering, liveRegionText: liveRegionText, placeholder: placeholder, textAlign: textAlign, userInput: userInput, 
        // In tablet, we would want to show the virtual keyboard
        virtualKeyboard: isTablet() ? virtualKeyboard : undefined, ...inputProps, ...inputEventHandlers })) : (jsx(SelectMobileFieldInput, { "aria-controls": dropdownId, "aria-describedby": inputProps['aria-describedby'], "aria-expanded": isDropdownOpen, "aria-invalid": inputProps['aria-invalid'], "aria-label": ariaLabel, "aria-labelledby": labelProps.id, displayValue: displayValue, hasEmptyLabel: hasEmptyLabel, hasInsideLabel: hasInsideLabel, isRequired: isRequired, onBlur: inputProps.onBlur, onFocus: inputProps.onFocus, placeholder: placeholder, ref: enabledElementRef, textAlign: textAlign, variant: inputProps.variant }));
    const shouldShowDropdown = isDropdownOpen &&
        data !== undefined &&
        (data === null || data.totalSize > 0 || isBeforeDataFetch(data) || isEmptyResults);
    const dropdown = !shouldShowDropdown ? null : isPhone() ? (jsx(SelectSingleMobileDropdown, { "aria-describedby": ariaDescribedBy, "aria-label": ariaLabel, assistiveText: assistiveText, clearValue: clearValue, collectionRenderer: collectionRenderer ?? defaultCollectionRenderer, collectionRendererContext: collectionRendererContext, data: data, displayValue: displayValue, dropdownId: dropdownId, helpSourceLink: helpSourceLink, helpSourceText: helpSourceText, isAddToListShown: isAddToListShown, isAdvancedSearchShown: isAdvancedSearchShown, isEmptyResults: isEmptyResults, isFocused: isFocused, isLoading: isLoading, isOpen: shouldShowDropdown, isRequired: isRequired, label: label, liveRegionText: liveRegionText, mainFieldInputRef: enabledElementRef, onAddToListAction: addToListEventHandlers.onAction, onAdvancedSearchAction: advancedSearchEventHandlers.onAction, onFieldBlur: focusProps.onFocusOut, onFieldFocus: focusProps.onFocusIn, onFieldInput: inputEventHandlers.onInput, onFieldKeyDown: inputEventHandlers.onKeyDown, onFieldKeyUp: inputEventHandlers.onKeyUp, placeholder: placeholder, propIsLoading: propIsLoading, setDropdownOpen: setDropdownOpen, stopFiltering: stopFiltering, setUserInput: setUserInput, textAlign: textAlign, userAssistanceDensity: userAssistanceDensity, userInput: userInput, virtualKeyboard: virtualKeyboard })) : (jsx(SelectSingleDesktopDropdown, { ...dropdownEventHandlers, assistiveText: assistiveText, collectionRenderer: collectionRenderer ?? defaultCollectionRenderer, collectionRendererContext: collectionRendererContext, data: data, dropdownId: dropdownId, dropdownRef: dropdownRef, helpSourceLink: helpSourceLink, helpSourceText: helpSourceText, isAddToListShown: isAddToListShown, isAdvancedSearchShown: isAdvancedSearchShown, isDisabled: isDisabled, isDropdownAbove: isDropdownAbove, isEmptyResults: isEmptyResults, isOpen: shouldShowDropdown, isReadonly: isReadonly, label: label, mainFieldRef: mainFieldRef, onAddToListAction: addToListEventHandlers.onAction, onAdvancedSearchAction: advancedSearchEventHandlers.onAction, userAssistanceDensity: userAssistanceDensity }));
    return (jsxs(Fragment$1, { children: [jsxs(FormFieldContext.Provider, { value: formFieldContext, children: [jsx(SelectSingleField, { columnSpan: columnSpan, compactUserAssistance: compactUserAssistance, hasInsideLabel: hasInsideLabel, inlineUserAssistance: inlineUserAssistance, isDropdownArrowShown: true, mainFieldRef: mainFieldRef, onBlur: focusProps?.onFocusOut, onDropdownArrowClick: dropdownArrowEventHandlers.onClick, onFocus: focusProps?.onFocusIn, rootRef: textFieldRef, testId: testId, ...textFieldProps, ...fieldLabelProps, ...mouseProps, children: mainContent }), !isPhone() && (jsx(LiveRegion, { children: shouldShowDropdown ? translations.select_closeDropdown() : undefined }))] }), dropdown] }));
}); // forwardRef will remove generics, so we cast it explicitly to preserve generics.

export { SelectSingle };
//# sourceMappingURL=UNSAFE_SelectSingle.js.map
