@oracle/oraclejet-preact 15.0.16 → 15.0.17

package/es/SelectMultiple-dc96d6b9.js

@@ -1,1057 +0,0 @@
-/* @oracle/oraclejet-preact: 15.0.16 */
-import { jsx, jsxs, Fragment } from 'preact/jsx-runtime';
-import { Fragment as Fragment$1 } from 'preact';
-import { forwardRef } from 'preact/compat';
-import { DropdownArrow, renderItemText, useSelectCommon, KEYS, isControlOrFunctionKey, isPhone, isBeforeDataFetch, DropdownUserAssistance, EmptyResults, DefaultList, isTablet, SelectMobileDropdown, DropdownList, Dropdown } from './PRIVATE_SelectCommon.js';
-import './UNSAFE_Label.js';
-import { TextField, ReadonlyTextField } from './UNSAFE_TextField.js';
-import { InlineUserAssistance, CompactUserAssistance } from './UNSAFE_UserAssistance.js';
-import { View } from './UNSAFE_View.js';
-import { useFocusableTextField } from './hooks/UNSAFE_useFocusableTextField.js';
-import { useFormContext } from './hooks/UNSAFE_useFormContext.js';
-import { useFormFieldContext, FormFieldContext } from './hooks/UNSAFE_useFormFieldContext.js';
-import { useLoadingIndicatorTimer } from './hooks/UNSAFE_useLoadingIndicatorTimer.js';
-import { useTextField } from './hooks/UNSAFE_useTextField.js';
-import { useTranslationBundle } from './hooks/UNSAFE_useTranslationBundle.js';
-import './UNSAFE_Button.js';
-import { mobileDropdownFooterStyles } from './UNSAFE_SelectMultiple/themes/MobileDropdownFooterStyles.css.js';
-import { B as Button } from './Button-303f37a9.js';
-import './UNSAFE_Flex.js';
-
-import './UNSAFE_Chip.js';
-import { C as Chip } from './Chip-b9343f80.js';
-import './UNSAFE_IconButton.js';
-import './UNSAFE_Icon.js';
-import { I as Icon } from './Icon-28529ee1.js';
-import { I as IconButton } from './IconButton-cbc0dfbb.js';
-import { F as Flex } from './Flex-afef736f.js';
-import { T as TextTagList } from './TextTagList-0b6b9929.js';
-import { LiveRegion } from './UNSAFE_LiveRegion.js';
-import './UNSAFE_HiddenAccessible.js';
-import { T as TextFieldInput, i as isInputPlaceholderShown } from './TextFieldInput-ee3716b8.js';
-import { H as HiddenAccessible } from './HiddenAccessible-c2b43695.js';
-import { textInterpolations } from './utils/UNSAFE_interpolations/text.js';
-import { mergeInterpolations } from './utils/UNSAFE_mergeInterpolations.js';
-import { useComponentTheme } from './hooks/UNSAFE_useComponentTheme.js';
-import './utils/UNSAFE_classNames.js';
-import { selectMultipleMobileFieldInputStyles } from './UNSAFE_SelectMultiple/themes/SelectMultipleMobileFieldInputStyles.css.js';
-import { useTabbableMode } from './hooks/UNSAFE_useTabbableMode.js';
-import './UNSAFE_Text.js';
-import { useAccessibleContext } from './hooks/UNSAFE_useAccessibleContext.js';
-import './utils/UNSAFE_stringUtils.js';
-import { TextFieldInputRedwoodTheme } from './UNSAFE_TextField/themes/redwood/TextFieldInputTheme.js';
-import { m as merge, a as isEmptyOrUndefined } from './stringUtils-3ce29fac.js';
-import { c as classNames } from './classNames-367d0663.js';
-import { T as Text } from './Text-3201189f.js';
-import { useMemo, useRef, useState, useCallback, useEffect, useId } from 'preact/hooks';
-import { e as equals } from './index-9d77c908.js';
-import { useUser } from './hooks/UNSAFE_useUser.js';
-import { mergeProps } from './utils/UNSAFE_mergeProps.js';
-import { useEffectEvent } from './hooks/PRIVATE_useEffectEvent.js';
-import { L as Label } from './Label-661ce5ca.js';
-import { R as ReadonlyTextFieldInput } from './ReadonlyTextFieldInput-c74bf50b.js';
-
-function MobileDropdownFooter({ onApply }) {
-    const translations = useTranslationBundle('@oracle/oraclejet-preact');
-    return (jsx("div", { class: mobileDropdownFooterStyles.base, children: jsx(Button, { display: "label", edge: "bottom", label: translations.selectMultiple_apply(), size: "sm", variant: "callToAction", onAction: onApply }) }));
-}
-
-const rootStyles = "_19e2lo";
-// This component renders a badge showing the number of selected values
-function SelectedValuesCount({
-  'aria-label': ariaLabel,
-  count = 0,
-  onKeyDown,
-  onKeyUp,
-  onMouseDown,
-  ...passThroughProps
-}) {
-  const translations = useTranslationBundle('@oracle/oraclejet-preact');
-  const instructions = translations.selectMultiple_showSelectedValues();
-  const accLabel = ariaLabel ? `${ariaLabel}. ` : '';
-  const ninetyNinePlus = translations.selectMultiple_countPlus({
-    COUNT: `99`
-  });
-  // The Chip shows the number of values selected or 99+ if the number is over 99.
-  const chipCount = count > 99 ? `${ninetyNinePlus}` : `${count}`;
-  // The screenreader will hear what the number of selected values is along with instructions
-  // like Click to see the full list.
-  const valuesSelectedText = translations.selectMultiple_valuesSelected({
-    VALUE_COUNT: `${count}`
-  });
-  const label = `${accLabel}${valuesSelectedText} ${instructions}`;
-  return jsx("div", {
-    class: rootStyles,
-    onKeyDown: onKeyDown,
-    onKeyUp: onKeyUp,
-    onMouseDown: onMouseDown,
-    children: jsx(Chip, {
-      "aria-label": label,
-      ...passThroughProps,
-      children: chipCount
-    })
-  });
-}
-
-const SvgNavLeft = (props) => (jsx(Icon, { viewBox: "0 0 24 24", ...props, children: jsx("g", { fill: "none", children: jsx("path", { d: "m9.414 12 7.293-7.293-1.414-1.414L6.586 12l8.707 8.707 1.414-1.414L9.414 12z", fill: "currentcolor" }) }) }));
-
-/**
- * @license
- * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.
- * Licensed under The Universal Permissive License (UPL), Version 1.0
- * as shown at https://oss.oracle.com/licenses/upl/
- * @ignore
- */
-
-const SvgCancelS = (props) => (jsx(Icon, { viewBox: "0 0 24 24", ...props, children: jsx("path", { d: "M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10S2 17.514 2 12 6.486 2 12 2zm3.498 5L12 10.498 8.502 7 7 8.502 10.498 12 7 15.498 8.502 17 12 13.502 15.498 17 17 15.498 13.502 12 17 8.502z", fill: "currentcolor", fillRule: "evenodd" }) }));
-
-/**
- * @license
- * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.
- * Licensed under The Universal Permissive License (UPL), Version 1.0
- * as shown at https://oss.oracle.com/licenses/upl/
- * @ignore
- */
-
-function SelectMultipleField({ children, fieldLabel, hasInsideLabel, isBackButtonShown, isClearButtonShown, isDropdownArrowShown, isDropdownSelectedOnlyView, isSelectedValuesCountShown, selectedValuesCount, onBackButtonClick, onClearButtonClick, onDropdownArrowClick, onSelectedValuesCountKeyDown, onSelectedValuesCountKeyUp, onSelectedValuesCountMouseDown, onSelectedValuesCountToggle, ...passThroughTextFieldProps }) {
-    const { isDisabled, isLoading } = useFormFieldContext();
-    const translations = useTranslationBundle('@oracle/oraclejet-preact');
-    const backButton = (jsx(IconButton, { "aria-label": translations.selectMultiple_back(), variant: "borderless", onAction: onBackButtonClick, children: jsx(SvgNavLeft, {}) }));
-    const clearButton = (jsx(IconButton, { "aria-label": translations.formControl_clear(), size: hasInsideLabel ? 'md' : 'sm', variant: "borderless", onAction: onClearButtonClick, children: jsx(SvgCancelS, {}) }));
-    const dropdownArrow = (jsx(DropdownArrow, { isDisabled: isDisabled, size: hasInsideLabel ? 'md' : 'sm', onClick: onDropdownArrowClick }));
-    const endContent = isLoading ? undefined : !isSelectedValuesCountShown ? (jsxs(Fragment, { children: [isClearButtonShown && clearButton, isDropdownArrowShown && dropdownArrow] })) : (jsxs(Flex, { align: "center", justify: "center", gap: [0, '1x'], children: [jsx(SelectedValuesCount, { "aria-label": fieldLabel, count: selectedValuesCount, isDisabled: isDisabled, isSelected: isDropdownSelectedOnlyView, onKeyDown: onSelectedValuesCountKeyDown, onKeyUp: onSelectedValuesCountKeyUp, onMouseDown: onSelectedValuesCountMouseDown, onToggle: onSelectedValuesCountToggle }), isClearButtonShown && clearButton, isDropdownArrowShown && dropdownArrow] }));
-    return (jsx(TextField, { startContent: isBackButtonShown && backButton, mainContent: children, endContent: endContent, ...passThroughTextFieldProps }));
-}
-
-function SelectMultipleFieldInput({ displayValue, isTextTagListShown, isUserFiltering, liveRegionText, onExitNavigation, onRemove, removeIcon, selectedValuesDescriptionId, textTagListData, textTagListRef, userInput, virtualKeyboard, ...passThroughTextFieldInputProps }) {
-    const translations = useTranslationBundle('@oracle/oraclejet-preact');
-    return (jsxs(Fragment, { children: [isTextTagListShown && (jsx(TextTagList, { "aria-label": translations.selectMultiple_selectedValues(), data: textTagListData, hasInsideLabel: passThroughTextFieldInputProps.hasInsideLabel, maxWidth: "50%", onExitNavigation: onExitNavigation, onRemove: onRemove, ref: textTagListRef, removeIcon: removeIcon })), jsx(Flex, { flex: 1, children: jsx(TextFieldInput, { "aria-autocomplete": "list", autoComplete: "off", 
-                    // When focused, we show the tag list, which can be treated as having prefix
-                    hasPrefix: isTextTagListShown, role: "combobox", spellcheck: false, type: virtualKeyboard === 'auto' ? 'search' : virtualKeyboard, value: isUserFiltering || isTextTagListShown ? userInput : displayValue, ...passThroughTextFieldInputProps }) }), 
-            // Show description text when focused as we will not be
-            // showing display text in the input.
-            isTextTagListShown && (jsx(HiddenAccessible, { id: selectedValuesDescriptionId, 
-                // We want the content to be hidden for screen readers too by default.
-                // But, it will be overridden when we link the aria-describedby attribute.
-                // Otherwise, the content here will be read twice.
-                isHidden: true, children: displayValue })), jsx(LiveRegion, { children: liveRegionText })] }));
-}
-
-const interpolations = [...Object.values(textInterpolations)];
-const styleInterpolations = mergeInterpolations(interpolations);
-/**
- * This component is used for rendering the main field in mobile phones. This is a bit different from the
- * normal main field (SelectMultipleFieldInput) that we use for desktop & tablet devices in the way that
- * a user will not be able to edit the value of this field. But, one can still have other functionalities
- * of having a placeholder, tab in & out of it, and other such functionalities of an enabled field.
- *
- * This also differs from ReadonlyTextFieldInput in the following ways:
- * 1. This will be rendered as div as well, but has a role of combobox set on it
- * 2. This will not be read as readonly input by the screen readers
- * 3. This has the stylings much similar to the TextFieldInput component
- * 4. This supports the use of placeholder and shows it when there is no value present
- * 5. This supports having the variant property and styles accordingly
- *
- * As such, this is very similar to the TextFieldInput except that this does not allow user input.
- * Note: we cannot use TextFieldInput with readonly set on it; even though it might provide us the
- * behavior we need, it will make the field as readonly and screen readers read the same about this
- * field. This will be an incorrect representation contextually as one can still edit the value by opening
- * the dropdown and changing the selection.
- */
-const SelectMultipleMobileFieldInput = forwardRef(({ 'aria-controls': ariaControls, 'aria-describedby': ariaDescribedBy, 'aria-expanded': ariaExpanded, 'aria-invalid': ariaInvalid, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, displayValue, hasEmptyLabel, hasInsideLabel = false, isRequired, onBlur, onFocus, placeholder, textAlign, variant = 'default' }, ref) => {
-    // consume required contexts
-    const { isDisabled, isFocused, hasValue = false } = useFormFieldContext();
-    const { isTabbable, tabbableModeProps } = useTabbableMode();
-    // setup properties
-    const myPlaceholder = isInputPlaceholderShown(hasInsideLabel, hasValue, isFocused)
-        ? placeholder
-        : undefined;
-    // Add unsafe API for specifying an external label which is added to ariaLabelledBy on the input,
-    // only when labelEdge is 'none' and label is ''. Since ariaLabelledBy takes precedence over all other
-    // kinds of labels, this helps to ensure we don't override a meaningful label.
-    const { UNSAFE_ariaLabelledBy } = useAccessibleContext();
-    const mergedAriaLabelledBy = hasEmptyLabel
-        ? merge([ariaLabelledBy, UNSAFE_ariaLabelledBy])
-        : ariaLabelledBy;
-    // setup style classes
-    const { class: styleInterpolationClasses } = styleInterpolations({ textAlign });
-    const { classes: themeClasses } = useComponentTheme(TextFieldInputRedwoodTheme, {
-        type: 'notPassword',
-        styleVariant: variant,
-        textarea: 'notTextArea',
-        input: 'isInput',
-        prefix: 'noPrefix',
-        suffix: 'noSuffix',
-        startContent: 'noStartContent',
-        endContent: 'hasEndContent',
-        insideLabel: hasInsideLabel ? 'hasInsideLabel' : 'noInsideLabel',
-        value: hasValue ? 'hasValue' : 'noValue',
-        focused: isFocused ? 'isFocused' : 'notFocused',
-        disabled: isDisabled ? 'isDisabled' : 'notDisabled'
-    });
-    const rootDivStyleClasses = classNames([
-        selectMultipleMobileFieldInputStyles.base,
-        styleInterpolationClasses,
-        themeClasses
-    ]);
-    return (jsx("div", { "aria-autocomplete": "list", "aria-controls": ariaControls, "aria-describedby": ariaDescribedBy, "aria-expanded": ariaExpanded, "aria-invalid": ariaInvalid, "aria-label": ariaLabel, "aria-labelledby": mergedAriaLabelledBy, "aria-required": isRequired ? 'true' : undefined, class: rootDivStyleClasses, onBlur: onBlur, onFocus: onFocus, ref: ref, role: "combobox", ...(isTabbable && tabbableModeProps), children: jsx("div", { class: selectMultipleMobileFieldInputStyles.content, children: jsx(Text, { variant: displayValue ? 'inherit' : 'secondary', children: displayValue || myPlaceholder }) }) }));
-});
-
-/**
- * @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
- */
-function useDisplayValues(itemText, valueItems) {
-    const translations = useTranslationBundle('@oracle/oraclejet-preact');
-    const separator = translations.plural_separator();
-    // create the text displayed in the field from the selected values
-    const concatenatedDisplayValues = useMemo(() => {
-        if (valueItems === undefined) {
-            return '';
-        }
-        const displayValues = createDisplayValues(itemText, valueItems);
-        const concatenatedDisplayValues = concatDisplayValues(displayValues, separator);
-        return concatenatedDisplayValues;
-    }, [itemText, separator, valueItems]);
-    // create the text tags to display when the component is focused
-    const textTags = useMemo(() => (valueItems === undefined ? [] : createTextTags(itemText, valueItems)), [itemText, valueItems]);
-    return {
-        displayValue: concatenatedDisplayValues,
-        textTags
-    };
-}
-function concatDisplayValues(displayValues, separator) {
-    return Array.from(displayValues.values()).join(separator);
-}
-function createDisplayValues(itemText, selectedItems) {
-    const arValues = selectedItems ? [...selectedItems?.values()] : [];
-    const mapFunc = (itemContext) => renderItemText(itemContext, itemText);
-    const mappedArray = arValues.map(mapFunc);
-    return new Set(mappedArray);
-}
-function createTextTags(itemText, selectedItems = []) {
-    return selectedItems.map((item) => ({
-        label: renderItemText(item, itemText) ?? '',
-        value: item.key
-    }));
-}
-
-/**
- * @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
- */
-/**
- * Get the data to show in the dropdown for the selected-only view.
- * While the component is showing only selected values in the dropdown, that list of values should
- * not change as the user deselects items within it.  For example, if the list initially shows
- * selected items "Item A" and "Item B", and the user deselects "Item B", we do not want to remove
- * "Item B" from the list.  The reason is that the user may want to reselect it again.  So the
- * list should remain static as of the time the user toggled the selected-only view on.
- * If isDropdownSelectedOnlyView is false, then the data returned from this hook will be undefined.
- * If isDropdownSelectedOnlyView is true, then the data returned from this hook will consist of
- * all of the valueItems that were selected at the time isDropdownSelectedOnlyView was set to true.
- * @param isDropdownSelectedOnlyView Whether the component is showing only selected
- * values in the dropdown: true if so, false if not.
- * @param valueItems The keys, data, and optional metadata for the selected values.
- * @returns An object with data and onLoadRange properties that can be passed on to the
- * list in the dropdown.
- */
-function useSelectedOnlyData({ isDropdownSelectedOnlyView, valueItems }) {
-    // Need to specify type of useMemo here so that dependent code in SelectMultiple and
-    // useSelectMultiple doesn't show a type error related to the sizePrecision prop on DataState:
-    //   Type 'string' is not assignable to type '"exact" | "atLeast"'.
-    // Note that useMemo here only depends on isDropdownSelectedOnlyView because we only want to
-    // recalculate when that value changes.  While the selected only view is shown, we want the
-    // data set to remain static with the set of valueItems as of the time the view was changed to
-    // only show selected items so that the user can deselect and reselect items.
-    // If useMemo depended on the valueItems too, then the data set would change as the user
-    // deselected items, which means those items would disappear from the dropdown and the user
-    // could not reselect them.
-    // ref for the static set of value items we want to show in the selected only view
-    const selectedOnlyValueItemsRef = useRef(valueItems);
-    // ref for the previous value of isDropdownSelectedOnlyView
-    const prevIsDropdownSelectedOnlyViewRef = useRef(isDropdownSelectedOnlyView);
-    // if the value of isDropdownSelectedOnlyView has changed, store the new static set of
-    // value items to show in selected only view, otherwise leave it the same
-    selectedOnlyValueItemsRef.current =
-        prevIsDropdownSelectedOnlyViewRef.current !== isDropdownSelectedOnlyView
-            ? valueItems
-            : selectedOnlyValueItemsRef.current;
-    // update the ref for the previous value of isDropdownSelectedOnlyView AFTER using it to
-    // update the ref for the static set of value items
-    prevIsDropdownSelectedOnlyViewRef.current = isDropdownSelectedOnlyView;
-    const selectedOnlyViewDataState = useMemo(() => {
-        return !isDropdownSelectedOnlyView ||
-            !selectedOnlyValueItemsRef.current ||
-            selectedOnlyValueItemsRef.current.length === 0
-            ? undefined
-            : {
-                offset: 0,
-                totalSize: selectedOnlyValueItemsRef.current.length ?? 0,
-                sizePrecision: 'exact',
-                data: selectedOnlyValueItemsRef.current.map((valueItem) => {
-                    return { data: valueItem.data, metadata: valueItem.metadata ?? { key: valueItem.key } };
-                })
-            };
-    }, [isDropdownSelectedOnlyView]);
-    return {
-        data: selectedOnlyViewDataState,
-        onLoadRange: undefined
-    };
-}
-
-function useMobileDropdown({ data, inputRef, isDropdownOpen, isDropdownSelectedOnlyView, itemText, textTagListRef, userInput, valueItems = [], onCommit, onLoadRange, setDropdownOpen, setUserInput, stopFiltering }) {
-    const [currentRow, setCurrentRow] = useState({
-        rowKey: undefined
-    });
-    const [dropdownSelectedKeys, setDropdownSelectedKeys] = useState(keysFromValueItems(valueItems));
-    const dataCache = useRef(new Map());
-    const currentValueItems = useMemo(() => {
-        const items = [];
-        dropdownSelectedKeys.forEach((key) => {
-            // Initially check if they are in valueItems
-            const item = valueItems.find((item) => item.key === key);
-            if (item) {
-                items.push(item);
-                return;
-            }
-            // otherwise check if it is available in the dataCache
-            if (dataCache.current.has(key)) {
-                items.push(dataCache.current.get(key));
-            }
-        });
-        return items;
-    }, [dropdownSelectedKeys, valueItems]);
-    const { textTags, displayValue } = useDisplayValues(itemText, currentValueItems);
-    // Create a ref for the input in the dropdown
-    const dropdownInputRef = useRef(null);
-    // show only the selected values in the dropdown if isDropdownSelectedOnlyView is true,
-    // otherwise show the full data set
-    // TODO: We may need to revisit this for hierarchical data because the selected valueItems
-    // won't have any information about ancestor group nodes, and we should probably show selected
-    // items in context within the hierarchy.  Also, the order of the items in the selected-only
-    // view right now follows the order in which they were selected, not the order in which they
-    // would appear in the full data set.  This may be more of a problem for hierarchical data
-    // if items have to appear within the correct group ancestors.  We may need to move
-    // construction of the selected-only DataState out of the component to the consuming code,
-    // and take a callback that we can call as a notification that the app should provide this
-    // special DataState to us (kind of like onLoadRange).  Note that we may also need an
-    // enhancement on the DataProvider API to be able to specify a filterCriterion to filter by
-    // the selected keys through a fetchFirst call, because a regular fetchByKeys call would
-    // still return results in the order in which the keys were specified and would not return
-    // data for the ancestor group nodes.
-    const { data: selectedOnlyData, onLoadRange: selectedOnlyOnLoadRange } = useSelectedOnlyData({
-        isDropdownSelectedOnlyView,
-        valueItems: currentValueItems
-    });
-    const onCurrentKeyChange = useCallback((detail) => {
-        setCurrentRow({ rowKey: detail.value });
-    }, [setCurrentRow]);
-    const onSelectionChange = useCallback((detail) => {
-        const newKeys = new Set(detail.value.keys?.values());
-        // update the dropdownSelectedKeys so that the selection visual state of the collection
-        // updates immediately while waiting for new valueItems to be set
-        setDropdownSelectedKeys(newKeys);
-        // clear the filter text typed by the user, but do NOT clear the actual filter criterion
-        // or highlighting in the list
-        setUserInput('');
-        // update the data cache on each selection if data is present
-        if (data) {
-            updateCache(dataCache.current, data, newKeys);
-        }
-    }, [data, setDropdownSelectedKeys, setUserInput]);
-    const closeDropdown = useCallback(() => {
-        // reset dropdownSelectedKeys as you close the dropdown so that
-        // the next time the dropdown is opened, it will have the actual component's valueItems
-        setDropdownSelectedKeys(new Set(valueItems.map((v) => v.key)));
-        // Empty the cached map
-        dataCache.current.clear();
-        setDropdownOpen(false);
-        // stop filtering before closing the dropdown
-        stopFiltering();
-        // revert the focus back to the main field
-        inputRef.current?.focus();
-    }, [inputRef, setDropdownOpen, stopFiltering, valueItems]);
-    const onApply = useCallback(() => {
-        // Commit the current value items and close the dropdown
-        onCommit({
-            previousValue: keysFromValueItems(valueItems),
-            value: dropdownSelectedKeys
-        });
-        closeDropdown();
-    }, [dropdownSelectedKeys, valueItems, closeDropdown, onCommit]);
-    const onBackButtonClick = useCallback(() => {
-        closeDropdown();
-    }, [closeDropdown]);
-    const onClearButtonClick = useCallback(() => {
-        setDropdownSelectedKeys(new Set());
-        stopFiltering();
-    }, [stopFiltering]);
-    const onTextTagRemove = useCallback((keys) => {
-        const newSelectedKeys = new Set(dropdownSelectedKeys);
-        keys.forEach((key) => newSelectedKeys.delete(key));
-        setDropdownSelectedKeys(newSelectedKeys);
-    }, [dropdownSelectedKeys]);
-    const onTextTagExitNavigation = useCallback(() => {
-        // Focus the input on the next tick. Doing it in the same event cycle will
-        // trigger the key press on the input element which makes the caret move by
-        // one character.
-        setTimeout(() => dropdownInputRef.current?.focus(), 0);
-    }, []);
-    const wasDropdownOpen = useRef(isDropdownOpen);
-    useEffect(() => {
-        // if the dropdown is open, ignore any valueItems update
-        if (isDropdownOpen) {
-            // if it was open before, then this is a valueItems change, so no action
-            if (wasDropdownOpen.current)
-                return;
-            // otherwise this dropdown is opened now, so set the focus on the input field
-            setTimeout(() => dropdownInputRef.current?.focus(), 0);
-            wasDropdownOpen.current = true;
-            return;
-        }
-        // if dropdown is closed, keep the valueItems in sync with the dropdown selected keys
-        setDropdownSelectedKeys((prevDropdownSelectedKeys) => {
-            const nextDropdownSelectedKeys = keysFromValueItems(valueItems);
-            // since valueItems can be a different array with the same values and keysFromValueItems
-            // will create a new set every time, compare the value and update the set only if the
-            // values have changed
-            return equals(prevDropdownSelectedKeys, nextDropdownSelectedKeys)
-                ? prevDropdownSelectedKeys
-                : nextDropdownSelectedKeys;
-        });
-        wasDropdownOpen.current = false;
-    }, [isDropdownOpen, valueItems]);
-    return {
-        collectionProps: {
-            currentKey: currentRow.rowKey,
-            data: isDropdownSelectedOnlyView ? selectedOnlyData : data,
-            selectedKeys: dropdownSelectedKeys,
-            onCurrentKeyChange,
-            onLoadRange: isDropdownSelectedOnlyView ? selectedOnlyOnLoadRange : onLoadRange,
-            onSelectionChange
-        },
-        footerProps: {
-            onApply
-        },
-        selectMultipleFieldInputProps: {
-            displayValue,
-            hasEmptyLabel: false,
-            hasInsideLabel: true,
-            inputRef: dropdownInputRef,
-            isTextTagListShown: textTags.length > 0,
-            isUserFiltering: true,
-            removeIcon: 'always',
-            userInput,
-            textTagListData: textTags,
-            textTagListRef: textTagListRef,
-            onExitNavigation: onTextTagExitNavigation,
-            onRemove: onTextTagRemove
-        },
-        selectMultipleFieldProps: {
-            hasInsideLabel: true,
-            isBackButtonShown: true,
-            isClearButtonShown: !isEmptyOrUndefined(userInput) || textTags.length !== 0,
-            isDropdownArrowShown: false,
-            isDropdownSelectedOnlyView,
-            isSelectedValuesCountShown: dropdownSelectedKeys.size > 0 || isDropdownSelectedOnlyView,
-            selectedValuesCount: dropdownSelectedKeys.size,
-            styleVariant: 'embedded',
-            onBackButtonClick,
-            onClearButtonClick
-        }
-    };
-}
-/**
- * A function to cache the data for the current set of keys from the current data state
- * and current set of keys.
- *
- * The idea is that, the data state might not contain all the selected keys. However, as
- * a key is selected, if we update the cache, it will always contain the data for the selected
- * keys. Reason is that, when a key is selected, at that moment it will be in the current data
- * state. We will fetch that information and store it. While the current data state might not
- * contain information about all the selected keys, it will always have the information about
- * current selected key.
- *
- * @param cache The data cache
- * @param data The current data state
- * @param keys The current set of keys
- */
-const updateCache = (cache, data, keys) => 
-// iterate through the data and if a selected key's match is found, update the cache
-data.data.forEach((item) => {
-    if (!keys.has(item.metadata.key))
-        return;
-    cache.set(item.metadata.key, {
-        data: item.data,
-        key: item.metadata.key,
-        metadata: item.metadata
-    });
-});
-/**
- * Extract keys from a value items array.
- *
- * @param valueItems The value items from which the keys are to be extracted
- * @returns The set of keys
- */
-const keysFromValueItems = (valueItems) => new Set(valueItems.map((i) => i.key));
-
-/**
- * @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 SelectMultiple state and behavior.  This hook creates state variables and
- * event listeners, returning properties to apply to components internally rendered by
- * SelectMultiple, as well as state information.
- *
- * @param ariaDescribedBy Specifies the ID of elements that describe the input.
- * @param data Specifies data for the dropdown list.
- * @param inputRef Ref to the input element (this can be an input in desktop and a div in mobile).
- * @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 values are 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 onLoadRange Callback function to handle when the viewport of the dropdown list has
- * changed, including the case where the user scrolls to the end of the list and there are more
- * items to load.  The function should set a new DataState on the component for the specified
- * range.
- * @param valueItems Specifies the keys, data, and optional metadata for the selected values.
- *
- * @returns Properties to apply to internal components that SelectMultiple renders, and component
- * state.
- */
-function useSelectMultiple({ ariaDescribedBy, data: propData, inputRef, isDisabled, isFocused: propIsFocused, isReadonly, onCommit, onFilter, onLoadRange: propOnLoadRange, valueItems }) {
-    const [isDropdownSelectedOnlyView, setDropdownSelectedOnlyView] = useState(false);
-    const selectedValuesCount = valueItems?.length;
-    const hasSelectedValuesCount = (selectedValuesCount !== undefined && selectedValuesCount > 0) || isDropdownSelectedOnlyView;
-    // show only the selected values in the dropdown if isDropdownSelectedOnlyView is true,
-    // otherwise show the full data set
-    // TODO: We may need to revisit this for hierarchical data because the selected valueItems
-    // won't have any information about ancestor group nodes, and we should probably show selected
-    // items in context within the hierarchy.  Also, the order of the items in the selected-only
-    // view right now follows the order in which they were selected, not the order in which they
-    // would appear in the full data set.  This may be more of a problem for hierarchical data
-    // if items have to appear within the correct group ancestors.  We may need to move
-    // construction of the selected-only DataState out of the component to the consuming code,
-    // and take a callback that we can call as a notification that the app should provide this
-    // special DataState to us (kind of like onLoadRange).  Note that we may also need an
-    // enhancement on the DataProvider API to be able to specify a filterCriterion to filter by
-    // the selected keys through a fetchFirst call, because a regular fetchByKeys call would
-    // still return results in the order in which the keys were specified and would not return
-    // data for the ancestor group nodes.
-    const selectedOnlyDataProps = useSelectedOnlyData({
-        isDropdownSelectedOnlyView,
-        valueItems
-    });
-    const data = isDropdownSelectedOnlyView ? selectedOnlyDataProps.data : propData;
-    const onLoadRange = isDropdownSelectedOnlyView
-        ? selectedOnlyDataProps.onLoadRange
-        : propOnLoadRange;
-    const handleOnFilter = useCallback((args) => {
-        // when the user is filtering, we need to toggle out from selected only view
-        // we consider it filtering only if there is a non-empty filter text is present
-        if (!isEmptyOrUndefined(args.searchText)) {
-            setDropdownSelectedOnlyView(false);
-        }
-        onFilter?.(args);
-    }, [onFilter]); // setDropdownSelectedOnlyView is stable so not needed in dep array
-    const { currentRow, dropdownRef, handleDropdownArrowClick, handleDropdownAutoDismiss: baseHandleDropdownAutoDismiss, handleDropdownPosition, handleInput, handleMainFieldKeyDown: baseHandleMainFieldKeyDown, handleMainFieldKeyUp, handleUpDownArrowKeys, isDropdownAbove, isDropdownOpen, isFocused, isUserFiltering, mainFieldRef, onCurrentKeyChange, onMouseDown, searchText, selectedKeys, setCurrentRow, setDropdownOpen, setSelectedKeys, setUserInput, stopFiltering, userInput } = useSelectCommon({
-        data,
-        inputRef,
-        isFocused: propIsFocused,
-        onFilter: handleOnFilter
-    });
-    const textTagListRef = useRef(null);
-    const { direction } = useUser();
-    const selectedValuesDescriptionId = useId();
-    const combinedAriaDescribedBy = merge([
-        // when focused, we will show the text tag list.
-        // so, we need the screen readers to read them when focusing on the input.
-        isFocused && selectedValuesDescriptionId,
-        ariaDescribedBy
-    ]);
-    const removeDropdown = useCallback(() => {
-        dropdownRef.current?.parentElement?.removeChild(dropdownRef.current);
-    }, [dropdownRef]);
-    const shouldSelectCurrentRow = useCallback((currentRowArg) => {
-        // current row needs to be selected if all the conditions below are satisfied
-        // 1. user is filtering
-        // 2. dropdown is open
-        // 3. user has entered a search text
-        // 4. current data state has data
-        // 5. currentRow exists
-        return (isUserFiltering &&
-            isDropdownOpen &&
-            !isEmptyOrUndefined(userInput) &&
-            (data?.data.length ?? 0) > 0 &&
-            currentRowArg.rowKey !== undefined);
-    }, [data, isDropdownOpen, isUserFiltering, userInput]);
-    const selectRow = useCallback((key) => {
-        // If the key is already selected, do nothing
-        if (selectedKeys?.has(key))
-            return;
-        // If it is not already selected, add it to the selection
-        const newValue = selectedKeys === undefined ? new Set([key]) : new Set([...selectedKeys.values(), key]);
-        onCommit({ previousValue: selectedKeys, value: newValue });
-        setSelectedKeys(newValue);
-    }, [onCommit, selectedKeys, setSelectedKeys]);
-    const myHandleDropdownAutoDismiss = useCallback((event) => {
-        if (isDropdownOpen) {
-            if (event?.type === 'keydown') {
-                const keyboardEvent = event;
-                switch (keyboardEvent.code) {
-                    case KEYS.TAB:
-                        // 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.
-                        if (keyboardEvent.shiftKey || !hasSelectedValuesCount) {
-                            inputRef.current?.focus();
-                        }
-                        else {
-                            chipRef.current?.focus();
-                        }
-                        // 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;
-                    default:
-                        break;
-                }
-            }
-        }
-    }, [hasSelectedValuesCount, inputRef, isDropdownOpen, removeDropdown]);
-    const myHandleMainFieldKeyDown = useCallback((event) => {
-        // const target = event.target as HTMLElement;
-        // ignore control key and function key
-        if (isControlOrFunctionKey(event)) {
-            return;
-        }
-        switch (event.code) {
-            case KEYS.TAB:
-                if (isDropdownOpen && (event.shiftKey || (!hasSelectedValuesCount && !event.shiftKey))) {
-                    // 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);
-                }
-                // JET-53183 - core pack compat: stop propagation of handled events
-                // we don't want a parent collection component to jump focus to the next cell and skip
-                // over the selected values count chip
-                if (hasSelectedValuesCount && !event.shiftKey) {
-                    event.stopPropagation();
-                }
-                break;
-            case KEYS.LEFT:
-                // Move focus to the text tag if we are in LTR and the cursor is at the
-                // beginning of the text (and there is no selection)
-                if (direction === 'ltr' &&
-                    inputRef.current instanceof HTMLInputElement &&
-                    inputRef.current?.selectionStart === 0 &&
-                    inputRef.current?.selectionEnd === 0) {
-                    textTagListRef.current?.focus();
-                }
-                break;
-            case KEYS.RIGHT:
-                // Move focus to the text tag if we are in RTL and the cursor is at the
-                // beginning of the text (and there is no selection)
-                if (direction === 'rtl' &&
-                    inputRef.current instanceof HTMLInputElement &&
-                    inputRef.current?.selectionStart === 0 &&
-                    inputRef.current?.selectionEnd === 0) {
-                    textTagListRef.current?.focus();
-                }
-                break;
-            case KEYS.ENTER:
-            case KEYS.NUMPAD_ENTER:
-                // 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;
-                if (shouldSelectCurrentRow(currentRow)) {
-                    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();
-                    selectRow(currentRow.rowKey);
-                }
-                break;
-            default:
-                break;
-        }
-    }, [
-        currentRow,
-        direction,
-        hasSelectedValuesCount,
-        inputRef,
-        isDropdownOpen,
-        removeDropdown,
-        selectRow,
-        setDropdownOpen,
-        shouldSelectCurrentRow,
-        stopFiltering
-    ]);
-    // when the array of valueItems changes, pull out the new set of selectedKeys
-    useEffect(() => {
-        const keys = valueItems?.reduce((accumKeys, currentItem) => {
-            accumKeys.add(currentItem.key);
-            return accumKeys;
-        }, new Set());
-        setSelectedKeys(keys);
-    }, [setSelectedKeys, valueItems]);
-    const chipRef = useRef(null);
-    useEffect(() => {
-        chipRef.current =
-            hasSelectedValuesCount && mainFieldRef.current?.querySelector
-                ? mainFieldRef.current.querySelector('[role="switch"]')
-                : null;
-    }, [hasSelectedValuesCount, isDisabled, isReadonly, mainFieldRef]);
-    const handleSelectedValuesCountKeyDown = useCallback((event) => {
-        switch (event.code) {
-            case KEYS.TAB:
-                if (isDropdownOpen && !event.shiftKey) {
-                    // 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);
-                }
-                // JET-53183 - core pack compat: stop propagation of handled events
-                // we don't want a parent collection component to jump focus to the next cell and skip
-                // over the input
-                if (event.shiftKey) {
-                    event.stopPropagation();
-                }
-                break;
-            case KEYS.UP:
-            case KEYS.DOWN:
-                // prevent the page from scrolling
-                event.preventDefault();
-                break;
-            case KEYS.ESC:
-                if (isDropdownOpen) {
-                    setDropdownOpen(false);
-                    event.preventDefault();
-                    // JET-53183 - core pack compat: stop propagation of handled events
-                    // we don't want a parent collection component to stop editing the row when we close
-                    // the dropdown
-                    event.stopPropagation();
-                }
-                break;
-            case KEYS.ENTER:
-                // JET-53183 - core pack compat: stop propagation of handled events
-                // we don't want a parent collection component to move focus to the next row when
-                // we toggle between the full and selected only list in the dropdown
-                event.stopPropagation();
-                break;
-            default:
-                break;
-        }
-    }, [isDropdownOpen, removeDropdown, setDropdownOpen]);
-    const handleSelectedValuesCountKeyUp = useCallback((event) => {
-        switch (event.code) {
-            case KEYS.UP:
-            case KEYS.DOWN:
-                handleUpDownArrowKeys(event);
-                break;
-            default:
-                break;
-        }
-    }, [handleUpDownArrowKeys]);
-    const handleSelectedValuesCountMouseDown = useCallback((event) => {
-        // call preventDefault so that the dropdown doesn't open showing the full list on mousedown
-        // on the chip before switching to show only the selected values on mouseup when the click
-        // is handled
-        event.preventDefault();
-        // explicitly focus the input because it won't happen naturally due to preventDefault()
-        inputRef.current?.focus();
-    }, [inputRef]);
-    const handleSelectedValuesCountToggle = useCallback((detail) => {
-        if (!isDropdownOpen) {
-            setDropdownOpen(true);
-        }
-        const value = detail.value ?? false;
-        if (value !== isDropdownSelectedOnlyView) {
-            setDropdownSelectedOnlyView(value);
-            // if the selected only toggle is enabled, we need to stop user filtering
-            if (value) {
-                stopFiltering();
-            }
-        }
-    }, [isDropdownOpen, isDropdownSelectedOnlyView, setDropdownOpen, stopFiltering]);
-    // when the dropdown closes, automatically turn off isDropdownSelectedOnlyView
-    useEffect(() => {
-        if (!isDropdownOpen && isDropdownSelectedOnlyView) {
-            setDropdownSelectedOnlyView(false);
-        }
-    }, [isDropdownOpen, isDropdownSelectedOnlyView]);
-    const onSelectionChange = useCallback((detail) => {
-        const newKeys = new Set(detail.value.keys?.values());
-        // update the selectedKeys so that the selection visual state of the collection
-        // updates immediately while waiting for new valueItems to be set
-        setSelectedKeys(newKeys);
-        // clear the filter text typed by the user, but do NOT clear the actual filter criterion
-        // or highlighting in the list
-        setUserInput('');
-        // call the onCommit callback so that the consuming code can update the valueItems
-        onCommit?.({ value: newKeys, previousValue: selectedKeys });
-    }, [onCommit, selectedKeys, setSelectedKeys, setUserInput]);
-    const onTextTagListExitNavigation = useCallback(() => {
-        // Focus the input on the next tick. Doing it in the same event cycle will
-        // trigger the key press on the input element which makes the caret move by
-        // one character.
-        setTimeout(() => inputRef.current?.focus(), 0);
-    }, [inputRef]);
-    const onTextTagListRemove = useCallback((keys) => {
-        const previousValue = selectedKeys;
-        const value = new Set(selectedKeys);
-        keys.forEach((key) => value.delete(key));
-        onCommit?.({ previousValue, value });
-    }, [onCommit, selectedKeys]);
-    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 textTagListProps = useMemo(() => ({
-        textTagListRef,
-        onExitNavigation: onTextTagListExitNavigation,
-        onRemove: onTextTagListRemove
-    }), [onTextTagListExitNavigation, onTextTagListRemove]);
-    useEffect(() => {
-        // clear the current item when the dropdown opens
-        if (isDropdownOpen) {
-            setCurrentRow({ rowKey: undefined });
-        }
-    }, [isDropdownOpen, setCurrentRow]);
-    // We need to highlight the first result whenever the data changes
-    const STABLE_onDataChange = useEffectEvent((newData) => {
-        // 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)
-        const firstResultKey = newData?.data[0]?.metadata.key;
-        if (isDropdownOpen && isUserFiltering && firstResultKey != null && data?.offset === 0) {
-            // if there are results and search text, highlight the first row, otherwise clear
-            // an existing highlight
-            setCurrentRow({
-                rowKey: isEmptyOrUndefined(searchText) ? undefined : firstResultKey
-            });
-        }
-    });
-    useEffect(() => {
-        STABLE_onDataChange(data);
-    }, [STABLE_onDataChange, data]);
-    return {
-        ariaProps: {
-            ariaDescribedBy: combinedAriaDescribedBy
-        },
-        collectionProps: {
-            currentKey: currentRow.rowKey,
-            data,
-            onCurrentKeyChange,
-            onSelectionChange,
-            onLoadRange,
-            selectedKeys
-        },
-        data,
-        dropdownArrowEventHandlers: {
-            onClick: handleDropdownArrowClick
-        },
-        dropdownEventHandlers,
-        dropdownRef,
-        hasSelectedValuesCount,
-        inputEventHandlers,
-        inputRef,
-        isDropdownAbove,
-        isDropdownOpen,
-        isDropdownSelectedOnlyView,
-        isFocused,
-        isUserFiltering,
-        mainFieldRef,
-        mouseProps: isDisabled || isReadonly ? {} : { onMouseDown },
-        searchText,
-        selectedValuesCountProps: {
-            onKeyDown: handleSelectedValuesCountKeyDown,
-            onKeyUp: handleSelectedValuesCountKeyUp,
-            onMouseDown: handleSelectedValuesCountMouseDown,
-            onToggle: handleSelectedValuesCountToggle
-        },
-        selectedValuesDescriptionId,
-        setDropdownOpen,
-        setUserInput,
-        stopFiltering,
-        textTagListProps,
-        userInput
-    };
-}
-
-/**
- * A SelectMultiple is a dropdown list that supports multiple selection and search filtering.
- */
-const SelectMultiple = forwardRef(({ 'aria-describedby': propAriaDescribedBy, assistiveText, data: propData, helpSourceLink, helpSourceText, isDisabled: propIsDisabled, isLoading: propIsLoading, isReadonly: propIsReadonly, isRequired, isRequiredShown, itemRenderer, itemText, label, labelEdge: propLabelEdge, labelStartWidth: propLabelStartWidth, messages, onCommit, onFilter, onLoadRange: propOnLoadRange, placeholder, textAlign: propTextAlign, userAssistanceDensity: propUserAssistanceDensity, valueItems, 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;
-    const userAssistanceDensity = propUserAssistanceDensity ?? formUserAssistanceDensity;
-    const { enabledElementRef, focusProps, isFocused: origIsFocused, readonlyElementRef } = useFocusableTextField({ isDisabled, isReadonly, ref });
-    const { ariaProps, collectionProps, data, dropdownArrowEventHandlers, dropdownEventHandlers, dropdownRef, hasSelectedValuesCount, inputEventHandlers, isDropdownAbove, isDropdownOpen, isDropdownSelectedOnlyView, isFocused, isUserFiltering, mainFieldRef, mouseProps, searchText, selectedValuesCountProps, selectedValuesDescriptionId, setDropdownOpen, setUserInput, stopFiltering, textTagListProps, userInput } = useSelectMultiple({
-        ariaDescribedBy: propAriaDescribedBy,
-        data: propData,
-        inputRef: enabledElementRef,
-        isDisabled,
-        isFocused: origIsFocused,
-        isReadonly,
-        onCommit,
-        onFilter,
-        onLoadRange: propOnLoadRange,
-        valueItems
-    });
-    const { collectionProps: mobileDropdownCollectionProps, footerProps: mobileDropdownFooterProps, selectMultipleFieldInputProps: mobileDropdownSelectMultipleFieldInputProps, selectMultipleFieldProps: mobileDropdownSelectMultipleFieldProps } = useMobileDropdown({
-        data,
-        inputRef: enabledElementRef,
-        isDropdownOpen,
-        isDropdownSelectedOnlyView,
-        itemText,
-        textTagListRef: textTagListProps.textTagListRef,
-        userInput,
-        valueItems,
-        onCommit,
-        onLoadRange: propOnLoadRange,
-        setDropdownOpen,
-        setUserInput,
-        stopFiltering
-    });
-    // 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: ariaProps.ariaDescribedBy,
-        helpSourceLink,
-        helpSourceText,
-        isDisabled,
-        isFocused,
-        isLoading,
-        isReadonly,
-        isRequiredShown,
-        labelEdge,
-        messages,
-        styleVariant: variant,
-        userAssistanceDensity,
-        value: valueItems !== undefined && valueItems.length > 0 ? true : undefined
-    });
-    // for dropdown field
-    const { formFieldContext: mobileDropdownFormFieldContext, inputProps: mobileDropdownInputProps, labelProps: mobileDropdownLabelProps, textFieldProps: mobileDropdownTextFieldProps, userAssistanceProps: mobileDropdownUserAssistanceProps } = useTextField({
-        ariaDescribedBy: ariaProps.ariaDescribedBy,
-        helpSourceLink,
-        helpSourceText,
-        isDisabled: false,
-        isFocused,
-        isLoading,
-        isReadonly: false,
-        isRequiredShown: false,
-        labelEdge: 'inside',
-        styleVariant: 'default',
-        value: mobileDropdownSelectMultipleFieldProps.selectedValuesCount > 0 ? 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;
-    mobileDropdownFormFieldContext.hasValue =
-        propIsLoading || mobileDropdownFormFieldContext.hasValue;
-    const dropdownId = `${baseId}-dropdown`;
-    const { displayValue, textTags } = useDisplayValues(itemText, valueItems);
-    // Do not set a forId in phone as we will be using aria-labelledby instead.
-    // This is because we will using a div and not input when rendering in a phone.
-    const labelComp = (jsx(Label, { ...labelProps, ...(isPhone() ? { forId: undefined } : {}), children: label }));
-    const fieldLabelProps = {
-        label: labelEdge !== 'none' ? labelComp : undefined,
-        labelEdge: labelEdge !== 'none' ? labelEdge : undefined,
-        labelStartWidth: labelEdge !== 'none' ? labelStartWidth : undefined
-    };
-    const mobileDropdownFieldLabelProps = {
-        label: jsx(Label, { ...mobileDropdownLabelProps, children: label }),
-        labelEdge: 'inside'
-    };
-    const ariaLabel = labelEdge === 'none' ? label : undefined;
-    const isInlineDensity = userAssistanceDensity === 'efficient' || userAssistanceDensity === 'reflow';
-    const inlineUserAssistance = isInlineDensity ? (isDisabled || isReadonly ? (
-    // save space for user assistance if density is 'efficient', even though we don't
-    // render user assistance for disabled or readonly fields
-    userAssistanceDensity !== 'efficient' ? undefined : (jsx(InlineUserAssistance, { 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');
-    if (isReadonly) {
-        return (jsx(FormFieldContext.Provider, { value: formFieldContext, children: jsx(ReadonlyTextField, { role: "presentation", compactUserAssistance: compactUserAssistance, inlineUserAssistance: inlineUserAssistance, onBlur: focusProps.onfocusout, onFocus: focusProps.onfocusin, ref: mainFieldRef, ...fieldLabelProps, children: jsx(ReadonlyTextFieldInput, { "aria-describedby": inputProps['aria-describedby'], "aria-label": ariaLabel, "aria-labelledby": labelProps.id, as: "div", elementRef: readonlyElementRef, hasEmptyLabel: label === '' && labelEdge === 'none', hasInsideLabel: label !== undefined && labelEdge === 'inside', textAlign: textAlign, value: displayValue }) }) }));
-    }
-    const isDataFetched = data !== undefined && data !== null && !isBeforeDataFetch(data);
-    const hasInsideLabel = 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 dropdownInlineUserAssistance = isDropdownOpen &&
-        !isDropdownAbove &&
-        !isDisabled &&
-        !isReadonly &&
-        (assistiveText || helpSourceLink) &&
-        (userAssistanceDensity === 'efficient' || userAssistanceDensity === 'reflow') ? (jsx(DropdownUserAssistance, { assistiveText: assistiveText, fieldLabel: label, helpSourceLink: helpSourceLink, helpSourceText: helpSourceText, userAssistanceDensity: userAssistanceDensity, ...(isPhone() ? mobileDropdownUserAssistanceProps : {}) })) : undefined;
-    const isEmptyResults = isDataFetched && data?.totalSize === 0;
-    const dropdownListContent = isEmptyResults ? (jsx(EmptyResults, {})) : (jsx(DefaultList, { ...(isPhone() ? mobileDropdownCollectionProps : collectionProps), "aria-label": label ?? '', currentItemVariant: "highlight", itemRenderer: itemRenderer, itemText: itemText, searchText: isDropdownSelectedOnlyView ? undefined : isUserFiltering ? searchText : undefined, selectionMode: "multiple" }));
-    const shouldShowDropdown = isDropdownOpen &&
-        data !== undefined &&
-        (data === null || data.totalSize > 0 || isBeforeDataFetch(data) || isEmptyResults);
-    const hasEmptyLabel = label === '' && labelEdge === 'none';
-    const defaultMainFieldInput = (jsx(SelectMultipleFieldInput, { "aria-controls": dropdownId, "aria-expanded": isDropdownOpen, "aria-label": ariaLabel, displayValue: displayValue, hasEmptyLabel: hasEmptyLabel, hasInsideLabel: hasInsideLabel, inputRef: enabledElementRef, isRequired: isRequired, isTextTagListShown: isFocused && textTags.length !== 0, isUserFiltering: isUserFiltering, liveRegionText: liveRegionText, placeholder: placeholder, 
-        // we only want the remove icon in the main field for tablets
-        removeIcon: isTablet() ? 'always' : 'never', selectedValuesDescriptionId: selectedValuesDescriptionId, textAlign: textAlign, textTagListData: textTags, userInput: userInput, 
-        // In tablet, we would want to show the virtual keyboard
-        virtualKeyboard: isTablet() ? virtualKeyboard : undefined, ...inputEventHandlers, ...inputProps, ...textTagListProps }));
-    const phoneMainFieldInput = (jsx(SelectMultipleMobileFieldInput, { "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 }));
-    return (jsxs(Fragment$1, { children: [jsx(FormFieldContext.Provider, { value: formFieldContext, children: jsx(SelectMultipleField, { compactUserAssistance: compactUserAssistance, fieldLabel: label, hasInsideLabel: hasInsideLabel, inlineUserAssistance: inlineUserAssistance, isDropdownArrowShown: true, isDropdownSelectedOnlyView: isDropdownSelectedOnlyView, isSelectedValuesCountShown: hasSelectedValuesCount, mainFieldRef: mainFieldRef, onBlur: focusProps.onfocusout, onFocus: focusProps.onfocusin, onDropdownArrowClick: dropdownArrowEventHandlers.onClick, onSelectedValuesCountKeyDown: selectedValuesCountProps.onKeyDown, onSelectedValuesCountKeyUp: selectedValuesCountProps.onKeyUp, onSelectedValuesCountMouseDown: selectedValuesCountProps.onMouseDown, onSelectedValuesCountToggle: selectedValuesCountProps.onToggle, selectedValuesCount: valueItems?.length, ...fieldLabelProps, ...mouseProps, ...textFieldProps, children: 
-                    // Use the mobile field if the component is being rendered in a phone
-                    // and it is not disabled.
-                    isPhone() && !isDisabled ? phoneMainFieldInput : defaultMainFieldInput }) }), isPhone() ? (jsx(SelectMobileDropdown, { header: jsxs(FormFieldContext.Provider, { value: mobileDropdownFormFieldContext, children: [jsx(View, { children: jsx(SelectMultipleField, { fieldLabel: label, onBlur: focusProps.onfocusout, onFocus: focusProps.onfocusin, onDropdownArrowClick: dropdownArrowEventHandlers.onClick, onSelectedValuesCountKeyDown: selectedValuesCountProps.onKeyDown, onSelectedValuesCountKeyUp: selectedValuesCountProps.onKeyUp, onSelectedValuesCountMouseDown: selectedValuesCountProps.onMouseDown, onSelectedValuesCountToggle: selectedValuesCountProps.onToggle, ...mobileDropdownFieldLabelProps, ...mobileDropdownTextFieldProps, ...mobileDropdownSelectMultipleFieldProps, children: jsx(SelectMultipleFieldInput, { "aria-controls": dropdownId, "aria-expanded": isDropdownOpen, "aria-label": ariaLabel, isRequired: isRequired, liveRegionText: liveRegionText, placeholder: placeholder, selectedValuesDescriptionId: selectedValuesDescriptionId, textAlign: textAlign, virtualKeyboard: virtualKeyboard, ...inputEventHandlers, ...mobileDropdownInputProps, ...mobileDropdownSelectMultipleFieldInputProps }) }) }), dropdownInlineUserAssistance] }), footer: jsx(MobileDropdownFooter, { ...mobileDropdownFooterProps }), id: dropdownId, isOpen: shouldShowDropdown, children: jsx(DropdownList, { hasBottomGap: true, isLoading: data === null, children: dropdownListContent }) })) : (jsxs(Dropdown, { dropdownRef: dropdownRef, id: dropdownId, isOpen: shouldShowDropdown, anchorRef: mainFieldRef, ...dropdownEventHandlers, children: [jsx(DropdownList, { hasBottomGap: dropdownInlineUserAssistance === undefined, isLoading: data === null, children: dropdownListContent }), dropdownInlineUserAssistance] }))] }));
-});
-
-export { SelectMultiple as S };
-//# sourceMappingURL=SelectMultiple-dc96d6b9.js.map