@oracle/oraclejet-preact 15.0.4 → 15.1.0

package/cjs/UNSAFE_SelectMultiple.js

@@ -1,96 +1,131 @@
-/* @oracle/oraclejet-preact: 15.0.4 */
+/* @oracle/oraclejet-preact: 15.1.0 */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var SelectMultiple = require('./SelectMultiple-4c134bb8.js');
-require('preact/jsx-runtime');
-require('preact');
-require('preact/compat');
-require('./PRIVATE_SelectCommon.js');
-require('preact/hooks');
+var jsxRuntime = require('preact/jsx-runtime');
+var preact = require('preact');
+var compat = require('preact/compat');
+var PRIVATE_SelectCommon = require('./PRIVATE_SelectCommon.js');
+require('./UNSAFE_Label.js');
+var UNSAFE_TextField = require('./UNSAFE_TextField.js');
+var UNSAFE_UserAssistance = require('./UNSAFE_UserAssistance.js');
+var UNSAFE_View = require('./UNSAFE_View.js');
+var hooks_UNSAFE_useFocusableTextField = require('./hooks/UNSAFE_useFocusableTextField.js');
+var hooks_UNSAFE_useFormContext = require('./hooks/UNSAFE_useFormContext.js');
+var hooks_UNSAFE_useFormFieldContext = require('./hooks/UNSAFE_useFormFieldContext.js');
+var hooks_UNSAFE_useLoadingIndicatorTimer = require('./hooks/UNSAFE_useLoadingIndicatorTimer.js');
+var hooks_UNSAFE_useTextField = require('./hooks/UNSAFE_useTextField.js');
+var hooks_UNSAFE_useTranslationBundle = require('./hooks/UNSAFE_useTranslationBundle.js');
+require('./UNSAFE_Button.js');
+var UNSAFE_SelectMultiple_themes_MobileDropdownFooterStyles_css = require('./UNSAFE_SelectMultiple/themes/MobileDropdownFooterStyles.css.js');
+var Button = require('./Button-fd5d3ecd.js');
+require('./UNSAFE_Flex.js');
 require("identity-obj-proxy");
+require('./UNSAFE_Chip.js');
+var Chip = require('./Chip-d58797e0.js');
+require('./UNSAFE_IconButton.js');
+require('./UNSAFE_Icon.js');
+var Icon = require('./Icon-67f87a75.js');
+var IconButton = require('./IconButton-27049591.js');
+var Flex = require('./Flex-e2f7dbea.js');
+var hooks = require('preact/hooks');
+require('./hooks/UNSAFE_useFocusWithin.js');
+var hooks_UNSAFE_useUser = require('./hooks/UNSAFE_useUser.js');
+var utils_PRIVATE_keyboardUtils = require('./utils/PRIVATE_keyboardUtils.js');
+var utils_UNSAFE_arrayUtils = require('./utils/UNSAFE_arrayUtils.js');
+require('./utils/UNSAFE_classNames.js');
+var utils_UNSAFE_interpolations_dimensions = require('./utils/UNSAFE_interpolations/dimensions.js');
+var utils_UNSAFE_mergeInterpolations = require('./utils/UNSAFE_mergeInterpolations.js');
+require('./UNSAFE_HiddenAccessible.js');
+require('./UNSAFE_Text.js');
+var PRIVATE_ThemedIcons_CloseIcon = require('./PRIVATE_ThemedIcons/CloseIcon.js');
+var hooks_UNSAFE_useTabbableMode = require('./hooks/UNSAFE_useTabbableMode.js');
+var UNSAFE_SelectMultiple_themes_TextTagStyles_css = require('./UNSAFE_SelectMultiple/themes/TextTagStyles.css.js');
+var classNames = require('./classNames-4bfc0882.js');
+var Text = require('./Text-7cb139ec.js');
+var HiddenAccessible = require('./HiddenAccessible-2129d62d.js');
+var UNSAFE_SelectMultiple_themes_TextTagListStyles_css = require('./UNSAFE_SelectMultiple/themes/TextTagListStyles.css.js');
+var useFocusWithin = require('./useFocusWithin-33d84cca.js');
+var UNSAFE_LiveRegion = require('./UNSAFE_LiveRegion.js');
+var TextFieldInput = require('./TextFieldInput-556029db.js');
+var utils_UNSAFE_interpolations_text = require('./utils/UNSAFE_interpolations/text.js');
+var hooks_UNSAFE_useComponentTheme = require('./hooks/UNSAFE_useComponentTheme.js');
+var UNSAFE_SelectMultiple_themes_SelectMultipleMobileFieldInputStyles_css = require('./UNSAFE_SelectMultiple/themes/SelectMultipleMobileFieldInputStyles.css.js');
+var hooks_UNSAFE_useAccessibleContext = require('./hooks/UNSAFE_useAccessibleContext.js');
+require('./utils/UNSAFE_stringUtils.js');
+var UNSAFE_TextField_themes_redwood_TextFieldInputTheme = require('./UNSAFE_TextField/themes/redwood/TextFieldInputTheme.js');
+var stringUtils = require('./stringUtils-6b4e736b.js');
+var index = require('./index-6540ef97.js');
+var utils_UNSAFE_mergeProps = require('./utils/UNSAFE_mergeProps.js');
+var hooks_PRIVATE_useEffectEvent = require('./hooks/PRIVATE_useEffectEvent.js');
+var Label = require('./Label-886e43d9.js');
+var ReadonlyTextFieldInput = require('./ReadonlyTextFieldInput-655968b6.js');
 require('./UNSAFE_HighlightText.js');
-require('./HighlightText-0eb8d975.js');
+require('./HighlightText-0355e445.js');
 require('./PRIVATE_List.js');
-require('./List-22088681.js');
-require('./utils/UNSAFE_classNames.js');
-require('./classNames-15680036.js');
-require('./utils/UNSAFE_mergeProps.js');
+require('./List-6295a367.js');
 require('./utils/UNSAFE_keys.js');
 require('./PRIVATE_LoadMoreCollection.js');
-require('./LoadMoreCollection-bdba5c2b.js');
+require('./LoadMoreCollection-2334f04f.js');
 require('./PRIVATE_Collection.js');
-require('./Collection-4817295b.js');
+require('./Collection-af83f77e.js');
 require('./hooks/UNSAFE_useViewportIntersect.js');
 require('./PRIVATE_VirtualizedCollection.js');
-require('./VirtualizedCollection-fb74da87.js');
-require('./utils/UNSAFE_arrayUtils.js');
-require('./hooks/UNSAFE_useTabbableMode.js');
+require('./VirtualizedCollection-3a24d85e.js');
 require('./UNSAFE_FocusTrap.js');
-require('./FocusTrap-781b3956.js');
+require('./FocusTrap-988fc178.js');
 require('./utils/PRIVATE_tabbableUtils.js');
-require('./_curry1-ac9493f2.js');
-require('./_curry2-f102fefd.js');
-require('./_arity-c5d50816.js');
-require('./_curry3-7ad33a40.js');
+require('./_curry1-1fb76d7e.js');
+require('./_curry2-762d9e39.js');
+require('./_arity-a7b26ffe.js');
+require('./_curry3-fc641adf.js');
 require('./hooks/UNSAFE_useId.js');
 require('./hooks/UNSAFE_useInteractionStyle.js');
 require('./utils/PRIVATE_clientHints.js');
-require('./clientHints-86a4d2ab.js');
+require('./clientHints-8d14e7f2.js');
 require('./hooks/UNSAFE_useHover.js');
 require('./hooks/UNSAFE_useToggle.js');
 require('./hooks/UNSAFE_useActive.js');
-require('./utils/UNSAFE_mergeInterpolations.js');
-require('./_has-42cbc720.js');
 require('./utils/UNSAFE_interpolations/flexitem.js');
-require('./flexitem-31f3a60b.js');
-require('./keys-6a66a32b.js');
+require('./flexitem-ab75bd75.js');
+require('./keys-96c6a26e.js');
+require('./_has-a629c4a5.js');
 require('./PRIVATE_List/themes/ListStyles.css.js');
 
-require('./vanilla-extract-recipes-createRuntimeFn.esm-dfce11db.js');
+require('./vanilla-extract-recipes-createRuntimeFn.esm-bedd82db.js');
 require('./hooks/PRIVATE_useSelection.js');
-require('./hooks/UNSAFE_useUser.js');
-require('./index-276a6540.js');
+require('./utils/PRIVATE_collectionUtils.js');
+require('./index-d698145f.js');
 require('./Common.js');
 require('./Common/themes.js');
 require('./Common/themes/redwood/theme.js');
 require('./Common/themes/themeContract.css.js');
-require('./utils/PRIVATE_collectionUtils.js');
 require('./hooks/PRIVATE_useCurrentKey.js');
 require('./hooks/PRIVATE_useCollectionFocusRing.js');
 require('./hooks/PRIVATE_useTabbableModeSet.js');
 require('./hooks/PRIVATE_useItemAction.js');
-require('./SkeletonContainer-d0a77392.js');
+require('./SkeletonContainer-8fce16c7.js');
 require('./UNSAFE_Skeleton.js');
-require('./Skeleton-2a20b9c4.js');
-require('./utils/UNSAFE_interpolations/dimensions.js');
-require('./utils/UNSAFE_size.js');
-require('./UNSAFE_Theme.js');
-require('./utils-d5c27340.js');
+require('./Skeleton-bfb5d9e0.js');
 require('./utils/UNSAFE_interpolations/borders.js');
-require('./hooks/UNSAFE_useComponentTheme.js');
-require('./utils/UNSAFE_logger.js');
 require('./UNSAFE_Skeleton/themes/redwood/SkeletonTheme.js');
 require('./UNSAFE_Skeleton/themes/SkeletonStyles.css.js');
 
 require('./UNSAFE_Skeleton/themes/redwood/SkeletonBaseTheme.css.js');
 
 require('./UNSAFE_Skeleton/themes/redwood/SkeletonVariants.css.js');
-require('./UNSAFE_Flex.js');
-require('./Flex-fb25b0b4.js');
-require('./utils/UNSAFE_interpolations/boxalignment.js');
-require('./utils/UNSAFE_interpolations/flexbox.js');
-require('./flexbox-d841bc78.js');
+require('./utils/UNSAFE_size.js');
+require('./UNSAFE_Theme.js');
+require('./utils-1b8d2f2b.js');
+require('./utils/UNSAFE_logger.js');
 require('./UNSAFE_Selector.js');
 require('./PRIVATE_ThemedIcons/CheckboxOffIcon.js');
 require('./PRIVATE_Icons/CheckboxOff.js');
-require('./UNSAFE_Icon.js');
-require('./Icon-011c59e1.js');
 require('./hooks/UNSAFE_useTooltip.js');
 require('./UNSAFE_Floating.js');
-require('./Floating-41517191.js');
-require('./index-3e8063c6.js');
+require('./Floating-5f2be86f.js');
+require('./index-46850ea9.js');
 require('./utils/PRIVATE_floatingUtils.js');
 require('./utils/PRIVATE_refUtils.js');
 require('./hooks/UNSAFE_useOutsideClick.js');
@@ -100,17 +135,17 @@ require('./UNSAFE_Floating/themes/FloatingStyles.css.js');
 require('./UNSAFE_Floating/themes/redwood/FloatingBaseTheme.css.js');
 
 require('./UNSAFE_Floating/themes/redwood/FloatingVariants.css.js');
-require('./vanilla-extract-dynamic.esm-ffc61341.js');
+require('./vanilla-extract-dynamic.esm-49466198.js');
 require('./UNSAFE_Floating/themes/FloatingContract.css.js');
 require('./UNSAFE_Layer.js');
-require('./useThemeInterpolations-b73e526a.js');
+require('./useThemeInterpolations-e349a790.js');
 require('./hooks/UNSAFE_useColorScheme.js');
 require('./hooks/UNSAFE_useScale.js');
 require('./utils/UNSAFE_interpolations/theme.js');
 require('./hooks/UNSAFE_useFocus.js');
 require('./hooks/UNSAFE_useTouch.js');
 require('./hooks/UNSAFE_useAnimation.js');
-require('./useAnimation-bce7c2db.js');
+require('./useAnimation-6d34174e.js');
 require('./hooks/UNSAFE_useThemeInterpolations.js');
 require('./hooks/UNSAFE_useTooltip/themes/redwood/TooltipContentTheme.js');
 require('./hooks/UNSAFE_useTooltip/themes/TooltipContentStyles.css.js');
@@ -134,6 +169,9 @@ require('./UNSAFE_Radio/themes/redwood/RadioIconBaseTheme.css.js');
 
 require('./UNSAFE_Radio/themes/redwood/RadioIconVariants.css.js');
 
+require('./utils/UNSAFE_interpolations/boxalignment.js');
+require('./utils/UNSAFE_interpolations/flexbox.js');
+require('./flexbox-3ea7d034.js');
 require('./hooks/PRIVATE_useCollectionGestureContext.js');
 require('./UNSAFE_GroupedList/themes/redwood/GroupedListTheme.js');
 require('./UNSAFE_GroupedList/themes/GroupedListStyles.css.js');
@@ -144,10 +182,23 @@ require('./PRIVATE_SelectCommon/themes/dropdownStyles.css.js');
 
 require('./hooks/UNSAFE_usePress.js');
 require('./PRIVATE_ThemedIcons/DropdownArrowIcon.js');
-require('./hooks/UNSAFE_useFormFieldContext.js');
-require('./UNSAFE_UserAssistance.js');
-require('./InlineHelpSource-bed2375d.js');
-require('./hooks/UNSAFE_useTranslationBundle.js');
+require('./UNSAFE_WindowOverlay.js');
+require('./UNSAFE_WindowOverlay/themes/WindowOverlayStyles.css.js');
+
+require('./UNSAFE_WindowOverlay/themes/WindowOverlayContract.css.js');
+require('./UNSAFE_WindowOverlay/themes/redwood/WindowOverlayTheme.js');
+require('./UNSAFE_WindowOverlay/themes/redwood/WindowOverlayBaseTheme.css.js');
+
+require('./UNSAFE_WindowOverlay/themes/redwood/WindowOverlayVariants.css.js');
+require('./PRIVATE_SelectCommon/themes/mobileDropdownStyles.css.js');
+
+require('./UNSAFE_Divider.js');
+require('./Divider-f04d32b9.js');
+require('./UNSAFE_Divider/themes/DividerStyles.css.js');
+
+require('./PRIVATE_SelectCommon/themes/selectMobileDropdownStyles.css.js');
+
+require('./InlineHelpSource-bb508f4d.js');
 require('./UNSAFE_UserAssistance/themes/redwood/UserAssistanceTheme.js');
 require('./UNSAFE_UserAssistance/themes/UserAssistanceStyles.css.js');
 
@@ -155,37 +206,24 @@ require('./UNSAFE_UserAssistance/themes/redwood/UserAssistanceBaseTheme.css.js')
 
 require('./UNSAFE_UserAssistance/themes/redwood/UserAssistanceVariants.css.js');
 require('./UNSAFE_ComponentMessage.js');
-require('./ComponentMessage-db199fd7.js');
+require('./ComponentMessage-562de9da.js');
 require('./PRIVATE_Message.js');
 require('./utils/PRIVATE_timer.js');
 require('./PRIVATE_Message/themes/MessageStyles.css.js');
 
-require('./MessageCloseButton-e337b12a.js');
-require('./UNSAFE_IconButton.js');
-require('./IconButton-85dc12b9.js');
-require('./UNSAFE_BaseButton.js');
-require('./BaseButton-490f1a4c.js');
-require('./UNSAFE_ButtonLayout.js');
-require('./ButtonLayout-7aab4522.js');
-require('./UNSAFE_Text.js');
-require('./Text-11bf3716.js');
-require('./UNSAFE_Text/themes/TextStyles.css.js');
-
-require('./PRIVATE_ThemedIcons/CloseIcon.js');
-require('./MessageDetail-6f2dc814.js');
-require('./MessageFormattingUtils-141db9b4.js');
+require('./MessageCloseButton-ca47687e.js');
+require('./MessageDetail-b8b9aa77.js');
+require('./MessageFormattingUtils-f2730f12.js');
 require('./utils/UNSAFE_getLocale.js');
-require('./utils/UNSAFE_stringUtils.js');
-require('./stringUtils-8daba4b6.js');
-require('./Message.types-88147239.js');
-require('./MessageStartIcon-cf83b98c.js');
+require('./Message.types-fdcdadfc.js');
+require('./MessageStartIcon-c22c3754.js');
 require('./PRIVATE_ThemedIcons/MessageConfirmationIcon.js');
 require('./PRIVATE_ThemedIcons/MessageErrorIcon.js');
 require('./PRIVATE_ThemedIcons/MessageInfoIcon.js');
 require('./PRIVATE_ThemedIcons/MessageWarningIcon.js');
-require('./MessageSummary-c15ca316.js');
-require('./MessageTimestamp-64736789.js');
-require('./MessageUtils-24bb94b6.js');
+require('./MessageSummary-82cfd1a9.js');
+require('./MessageTimestamp-cb4242ae.js');
+require('./MessageUtils-862f66cf.js');
 require('./utils/UNSAFE_soundUtils.js');
 require('./UNSAFE_MessageBanner/themes/redwood/MessageBannerTheme.js');
 require('./UNSAFE_MessageBanner/themes/MessageBannerStyles.css.js');
@@ -194,19 +232,22 @@ require('./UNSAFE_MessageBanner/themes/redwood/MessageBannerBaseTheme.css.js');
 
 require('./UNSAFE_MessageBanner/themes/redwood/MessageBannerVariants.css.js');
 
-require('./MessagesManager-35c6b938.js');
+require('./MessagesManager-110350d2.js');
 require('./PRIVATE_TransitionGroup.js');
 require('./hooks/UNSAFE_useMessagesContext.js');
-require('./UNSAFE_HiddenAccessible.js');
-require('./HiddenAccessible-231dfe68.js');
+require('./UNSAFE_BaseButton.js');
+require('./BaseButton-b9be6336.js');
+require('./UNSAFE_ButtonLayout.js');
+require('./ButtonLayout-76cfbeda.js');
+require('./UNSAFE_Text/themes/TextStyles.css.js');
+
 require('./UNSAFE_ComponentMessage/themes/redwood/ComponentMessageTheme.js');
 require('./UNSAFE_ComponentMessage/themes/ComponentMessageStyles.css.js');
 
 require('./UNSAFE_ComponentMessage/themes/redwood/ComponentMessageBaseTheme.css.js');
 
 require('./UNSAFE_ComponentMessage/themes/redwood/ComponentMessageVariants.css.js');
-require('./ComponentMessageContainer-69bb8c61.js');
-require('./hooks/UNSAFE_useFormContext.js');
+require('./ComponentMessageContainer-900c72f4.js');
 require('./hooks/UNSAFE_useInputGroupContext.js');
 require('./UNSAFE_Popup.js');
 require('./hooks/PRIVATE_useAnimationStatus.js');
@@ -216,34 +257,14 @@ require('./UNSAFE_Popup/themes/redwood/PopupBaseTheme.css.js');
 
 require('./UNSAFE_Popup/themes/redwood/PopupVariants.css.js');
 
-require('./UNSAFE_Divider.js');
-require('./Divider-ded4b08e.js');
-require('./UNSAFE_Divider/themes/DividerStyles.css.js');
-
-require('./CompactHelpSource-012ede09.js');
+require('./CompactHelpSource-1ffcf262.js');
 require('./PRIVATE_ThemedIcons/HelpIcon.js');
-require('./hooks/UNSAFE_useFocusWithin.js');
-require('./useFocusWithin-87a93982.js');
 require('./UNSAFE_Label/themes/redwood/LabelTheme.js');
 require('./UNSAFE_Label/themes/LabelStyles.css.js');
 
 require('./UNSAFE_Label/themes/redwood/LabelBaseTheme.css.js');
 
 require('./UNSAFE_Label/themes/redwood/LabelVariants.css.js');
-require('./UNSAFE_WindowOverlay.js');
-require('./UNSAFE_WindowOverlay/themes/WindowOverlayStyles.css.js');
-
-require('./UNSAFE_WindowOverlay/themes/WindowOverlayContract.css.js');
-require('./UNSAFE_WindowOverlay/themes/redwood/WindowOverlayTheme.js');
-require('./UNSAFE_WindowOverlay/themes/redwood/WindowOverlayBaseTheme.css.js');
-
-require('./UNSAFE_WindowOverlay/themes/redwood/WindowOverlayVariants.css.js');
-require('./PRIVATE_SelectCommon/themes/mobileDropdownStyles.css.js');
-
-require('./PRIVATE_SelectCommon/themes/selectMobileDropdownStyles.css.js');
-
-require('./UNSAFE_Label.js');
-require('./Label-e6ce84d5.js');
 require('./UNSAFE_TextField/themes/redwood/TextFieldTheme.js');
 require('./UNSAFE_TextField/themes/TextFieldStyles.css.js');
 
@@ -252,15 +273,6 @@ require('./UNSAFE_TextField/themes/redwood/TextFieldBaseTheme.css.js');
 
 require('./UNSAFE_TextField/themes/redwood/TextFieldVariants.css.js');
 
-require('./UNSAFE_TextField.js');
-require('./ReadonlyTextFieldInput-3e9c4bb1.js');
-require('./hooks/UNSAFE_useAccessibleContext.js');
-require('./utils/UNSAFE_interpolations/text.js');
-require('./index-55683a63.js');
-require('./UNSAFE_TextField/themes/redwood/ReadonlyTextFieldInputTheme.js');
-require('./UNSAFE_TextField/themes/ReadonlyTextFieldInputStyles.css.js');
-
-require('./UNSAFE_TextField/themes/redwood/ReadonlyTextFieldInputVariants.css.js');
 require('./UNSAFE_LabelValueLayout.js');
 
 require('./UNSAFE_Radio/themes/redwood/RadioTheme.js');
@@ -278,43 +290,1239 @@ require('./UNSAFE_TextField/themes/ReadonlyTextFieldStyles.css.js');
 
 require('./UNSAFE_TextField/themes/redwood/ReadonlyTextFieldVariants.css.js');
 
-require('./TextFieldInput-d93589c9.js');
+require('./hooks/UNSAFE_useDebounce.js');
+require('./UNSAFE_TextField/themes/redwood/ReadonlyTextFieldInputTheme.js');
+require('./UNSAFE_TextField/themes/ReadonlyTextFieldInputStyles.css.js');
+
+require('./UNSAFE_TextField/themes/redwood/ReadonlyTextFieldInputVariants.css.js');
 require('./hooks/UNSAFE_useTextFieldInputHandlers.js');
-require('./UNSAFE_TextField/themes/redwood/TextFieldInputTheme.js');
 require('./UNSAFE_TextField/themes/TextFieldInputStyles.css.js');
 
 require('./UNSAFE_TextField/themes/redwood/TextFieldInputVariants.css.js');
-require('./hooks/UNSAFE_useDebounce.js');
-require('./UNSAFE_LiveRegion.js');
-require('./UNSAFE_View.js');
 require('./utils/UNSAFE_interpolations/colors.js');
 require('./utils/UNSAFE_interpolations/padding.js');
 require('./utils/UNSAFE_interpolations/aria.js');
-require('./hooks/UNSAFE_useFocusableTextField.js');
-require('./hooks/UNSAFE_useLoadingIndicatorTimer.js');
 require('./hooks/UNSAFE_useTimer.js');
-require('./hooks/UNSAFE_useTextField.js');
 require('./hooks/PRIVATE_useMessageSeverity.js');
 require('./hooks/UNSAFE_useFormFieldContextProps.js');
-require('./UNSAFE_Button.js');
-require('./Button-20e0d735.js');
-require('./UNSAFE_SelectMultiple/themes/MobileDropdownFooterStyles.css.js');
 
-require('./UNSAFE_Chip.js');
-require('./Chip-5adbb0dd.js');
 require('./hooks/UNSAFE_useActionable.js');
 require('./UNSAFE_Chip/themes/ChipStyles.css.js');
 
-require('./TextTagList-28f51150.js');
-require('./utils/PRIVATE_keyboardUtils.js');
-require('./TextTag-37ccf247.js');
-require('./UNSAFE_SelectMultiple/themes/TextTagStyles.css.js');
 
-require('./UNSAFE_SelectMultiple/themes/TextTagListStyles.css.js');
 
-require('./UNSAFE_SelectMultiple/themes/SelectMultipleMobileFieldInputStyles.css.js');
 
-require('./hooks/PRIVATE_useEffectEvent.js');
+
+function MobileDropdownFooter({ onApply }) {
+    const translations = hooks_UNSAFE_useTranslationBundle.useTranslationBundle('@oracle/oraclejet-preact');
+    return (jsxRuntime.jsx("div", { class: UNSAFE_SelectMultiple_themes_MobileDropdownFooterStyles_css.mobileDropdownFooterStyles.base, children: jsxRuntime.jsx(Button.Button, { display: "label", edge: "bottom", label: translations.selectMultiple_apply(), size: "sm", variant: "callToAction", onAction: onApply }) }));
+}
+
+const rootStyles = "wv5awv";
+// This component renders a badge showing the number of selected values
+function SelectedValuesCount({
+  'aria-label': ariaLabel,
+  count = 0,
+  onKeyDown,
+  onKeyUp,
+  onMouseDown,
+  ...passThroughProps
+}) {
+  const translations = hooks_UNSAFE_useTranslationBundle.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 jsxRuntime.jsx("div", {
+    class: rootStyles,
+    onKeyDown: onKeyDown,
+    onKeyUp: onKeyUp,
+    onMouseDown: onMouseDown,
+    children: jsxRuntime.jsx(Chip.Chip, {
+      "aria-label": label,
+      ...passThroughProps,
+      children: chipCount
+    })
+  });
+}
+
+const SvgNavLeft = (props) => (jsxRuntime.jsx(Icon.Icon, { viewBox: "0 0 24 24", ...props, children: jsxRuntime.jsx("g", { fill: "none", children: jsxRuntime.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) => (jsxRuntime.jsx(Icon.Icon, { viewBox: "0 0 24 24", ...props, children: jsxRuntime.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 } = hooks_UNSAFE_useFormFieldContext.useFormFieldContext();
+    const translations = hooks_UNSAFE_useTranslationBundle.useTranslationBundle('@oracle/oraclejet-preact');
+    const backButton = (jsxRuntime.jsx(IconButton.IconButton, { "aria-label": translations.selectMultiple_back(), variant: "borderless", onAction: onBackButtonClick, children: jsxRuntime.jsx(SvgNavLeft, {}) }));
+    const clearButton = (jsxRuntime.jsx(IconButton.IconButton, { "aria-label": translations.formControl_clear(), size: hasInsideLabel ? 'md' : 'sm', variant: "borderless", onAction: onClearButtonClick, children: jsxRuntime.jsx(SvgCancelS, {}) }));
+    const dropdownArrow = (jsxRuntime.jsx(PRIVATE_SelectCommon.DropdownArrow, { isDisabled: isDisabled, size: hasInsideLabel ? 'md' : 'sm', onClick: onDropdownArrowClick }));
+    const endContent = isLoading ? undefined : !isSelectedValuesCountShown ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [isClearButtonShown && clearButton, isDropdownArrowShown && dropdownArrow] })) : (jsxRuntime.jsxs(Flex.Flex, { align: "center", justify: "center", gap: [0, '1x'], children: [jsxRuntime.jsx(SelectedValuesCount, { "aria-label": fieldLabel, count: selectedValuesCount, isDisabled: isDisabled, isSelected: isDropdownSelectedOnlyView, onKeyDown: onSelectedValuesCountKeyDown, onKeyUp: onSelectedValuesCountKeyUp, onMouseDown: onSelectedValuesCountMouseDown, onToggle: onSelectedValuesCountToggle }), isClearButtonShown && clearButton, isDropdownArrowShown && dropdownArrow] }));
+    return (jsxRuntime.jsx(UNSAFE_TextField.TextField, { startContent: isBackButtonShown && backButton, mainContent: children, endContent: endContent, ...passThroughTextFieldProps }));
+}
+
+/**
+ * The component for rendering selectable/removable TextTag
+ *
+ * @param param0 The props for the TextTag component
+ */
+function TextTag({ children, removeIcon = 'never', isSelected = false, onRemoveAction, onSelect, onRemoveIconClick, isFocused, value }) {
+    const translations = hooks_UNSAFE_useTranslationBundle.useTranslationBundle('@oracle/oraclejet-preact');
+    const spanRef = hooks.useRef(null);
+    const navigationTextId = hooks.useId();
+    const rootClasses = classNames.classNames([UNSAFE_SelectMultiple_themes_TextTagStyles_css.textTagStyles.base, isSelected && UNSAFE_SelectMultiple_themes_TextTagStyles_css.textTagStyles.selected]);
+    const onRemoveActionCallback = hooks.useCallback(() => {
+        onRemoveAction?.(value);
+    }, [value, onRemoveAction]);
+    const onSelectCallback = hooks.useCallback(() => {
+        onSelect?.(value);
+    }, [value, onSelect]);
+    const onRemoveIconClickCallback = hooks.useCallback(() => {
+        onRemoveIconClick?.(value);
+    }, [value, onRemoveIconClick]);
+    const onKeyUp = hooks.useCallback((event) => {
+        if (utils_PRIVATE_keyboardUtils.isBackspaceOrDelete(event)) {
+            onRemoveActionCallback();
+            return;
+        }
+    }, [onRemoveActionCallback]);
+    hooks.useEffect(() => {
+        if (isFocused && isSelected) {
+            spanRef.current?.focus();
+            spanRef.current?.scrollIntoView({ block: 'nearest' });
+        }
+    }, [isFocused, isSelected]);
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("span", { ref: spanRef, class: rootClasses, tabIndex: -1, onClick: onSelectCallback, onKeyUp: onKeyUp, 
+                // Kill mouse down event to prevent focus transfer done by the parent container.
+                // We will programmatically take back focus in response to the onClick event.
+                onMouseDown: PRIVATE_SelectCommon.preventDefault, role: "option", "aria-describedby": navigationTextId, "aria-selected": isSelected ? 'true' : 'false', children: [jsxRuntime.jsx(Text.Text, { size: "md", variant: "inherit", children: children }), removeIcon === 'always' && (jsxRuntime.jsx(hooks_UNSAFE_useTabbableMode.TabbableModeContext.Provider, { value: { isTabbable: false }, children: jsxRuntime.jsx(IconButton.IconButton, { size: "xs", variant: "ghost", onAction: onRemoveIconClickCallback, children: jsxRuntime.jsx(PRIVATE_ThemedIcons_CloseIcon.CloseIcon, {}) }) }))] }), jsxRuntime.jsx(HiddenAccessible.HiddenAccessible, { id: navigationTextId, children: translations.selectMultiple_removeSelectedTagInstructionText() })] }));
+}
+
+/**
+ * Supported style props
+ */
+const supportedDimensions = utils_UNSAFE_arrayUtils.stringLiteralArray(['maxWidth']);
+/**
+ * Setting up interpolations
+ */
+const supportedInterpolations = Array.from(supportedDimensions, (x) => utils_UNSAFE_interpolations_dimensions.dimensionInterpolations[x]);
+const styleInterpolations$1 = utils_UNSAFE_mergeInterpolations.mergeInterpolations(supportedInterpolations);
+/**
+ * TextTagList component for rendering the collection of TextTags as well
+ * as managing the navigation.
+ *
+ * @param param0 The props for the TextTagList component
+ * @param ref The ref for the component
+ */
+function _TextTagList(props, ref = () => { }) {
+    // destructure props
+    const { 'aria-label': ariaLabel, data, hasInsideLabel = false, removeIcon = 'never', onExitNavigation, onRemove } = props;
+    // ref for setting the scroll position for the div
+    const divRef = hooks.useRef(null);
+    // Internal state for storing the current selected tags
+    const [selectedTags, setSelectedTags] = hooks.useState([]);
+    // The navigation of focus will depend on the reading direction, so we need to
+    // get the current reading direction
+    const { direction } = hooks_UNSAFE_useUser.useUser();
+    // Create a ref for maintaining the current selected tag. This is used for
+    // determining which tag needs to be selected next when pressing ArrowLeft or
+    // ArrowRight.
+    const currentSelectedTagIndex = hooks.useRef(-1);
+    // Create a ref that holds the last tag which is needed when receiving focus
+    // programmatically.
+    const lastTag = data.at(-1)?.value;
+    const lastTagMeta = hooks.useRef({ value: lastTag, index: data.length - 1 });
+    lastTagMeta.current = { value: lastTag, index: data.length - 1 };
+    // A function to select the tag at the given index
+    const selectTagAtIndex = hooks.useCallback((index) => {
+        const key = data.at(index)?.value;
+        if (key == null)
+            return;
+        setSelectedTags([key]);
+    }, [data] // setSelectedTags is stable and not needed in dep array
+    );
+    // A function to clear the selection
+    const clearSelection = hooks.useCallback(() => {
+        setSelectedTags((previousSelectedTags) => {
+            currentSelectedTagIndex.current = -1;
+            return previousSelectedTags.length ? [] : previousSelectedTags;
+        });
+    }, []); // setSelectedTags is stable and not needed in dep array
+    // Handle the remove & delete events from the tags
+    const onTagRemoveIconClick = hooks.useCallback((value) => {
+        // on remove icon click we only need to remove the tag that
+        // invoked the event
+        onRemove?.([value]);
+        onExitNavigation?.();
+        // Firefox & Safari are not calling onBlur when focusing out of the
+        // tag list through onExitNavigation, so clear the selections explicitly
+        // here.
+        clearSelection();
+    }, [clearSelection, onExitNavigation, onRemove]);
+    const onTagRemoveAction = hooks.useCallback((value) => {
+        // on delete action we need to remove the tag that invoked the delete action
+        // as well as the selected tags.
+        const valuesToRemove = [...selectedTags];
+        if (!selectedTags.includes(value)) {
+            valuesToRemove.push(value);
+        }
+        onRemove?.(valuesToRemove);
+        onExitNavigation?.();
+        // Firefox & Safari are not calling onBlur when focusing out of the
+        // tag list through onExitNavigation, so clear the selections explicitly
+        // here.
+        clearSelection();
+    }, [selectedTags, clearSelection, onExitNavigation, onRemove]);
+    // Handle the select event from the tags
+    const onTagSelect = hooks.useCallback((value) => {
+        setSelectedTags([value]);
+        currentSelectedTagIndex.current = data.findIndex((tag) => tag.value === value);
+    }, [data, setSelectedTags]);
+    // Handle keyDown event on the tags container
+    const onTagKeyDown = hooks.useCallback((event) => {
+        if (data.length === 0)
+            return;
+        // Move towards the beginning of the list when pressing
+        // Left arrow (or Right arrow in rtl).
+        if ((direction === 'ltr' && event.code === 'ArrowLeft') ||
+            (direction === 'rtl' && event.code === 'ArrowRight')) {
+            if (currentSelectedTagIndex.current === 0)
+                return;
+            currentSelectedTagIndex.current -= 1;
+            selectTagAtIndex(currentSelectedTagIndex.current);
+            return;
+        }
+        // Move towards the end of the list when pressing
+        // Right arrow (or Left arrow in rtl). If at the end,
+        // invoke onExitNavigation.
+        if ((direction === 'ltr' && event.code === 'ArrowRight') ||
+            (direction === 'rtl' && event.code === 'ArrowLeft')) {
+            if (currentSelectedTagIndex.current === data.length - 1) {
+                // We have reached the end, so exit navigation
+                onExitNavigation?.();
+                return;
+            }
+            currentSelectedTagIndex.current += 1;
+            selectTagAtIndex(currentSelectedTagIndex.current);
+            return;
+        }
+        // When pressing the Home key, move the focus to the first tag
+        if (event.code === 'Home') {
+            currentSelectedTagIndex.current = 0;
+            selectTagAtIndex(currentSelectedTagIndex.current);
+            return;
+        }
+        // When pressing the End key, move the focus to the last tag
+        if (event.code === 'End') {
+            currentSelectedTagIndex.current = data.length - 1;
+            selectTagAtIndex(currentSelectedTagIndex.current);
+            return;
+        }
+        // If it is a Select All event, then select all the tags and do
+        // not move the focus
+        if (utils_PRIVATE_keyboardUtils.isSelectAll(event)) {
+            setSelectedTags(data.map((tag) => tag.value));
+            // prevent default to prevent selection of the whole screen
+            event.preventDefault();
+            return;
+        }
+    }, [data, direction, onExitNavigation, selectTagAtIndex, setSelectedTags]);
+    const handleOnFocus = hooks.useCallback(() => {
+        setSelectedTags((previousSelectedTags) => {
+            // select the tag only if there are no current selected tags
+            // and there is data
+            if (previousSelectedTags.length || lastTagMeta.current.value === undefined)
+                return previousSelectedTags;
+            currentSelectedTagIndex.current = lastTagMeta.current.index;
+            return [lastTagMeta.current.value];
+        });
+    }, []); // setSelectedTags is stable and not needed in the dep array
+    const handleOnBlur = hooks.useCallback(() => {
+        clearSelection();
+    }, [clearSelection]);
+    // When blurring out of the component, remove all selections
+    const { focusProps } = useFocusWithin.useFocusWithin({
+        onBlurWithin: handleOnBlur
+    });
+    // Update the ref to include the handler methods
+    hooks.useImperativeHandle(ref, () => ({
+        blur: handleOnBlur,
+        focus: handleOnFocus
+    }), [handleOnBlur, handleOnFocus]);
+    hooks.useEffect(() => {
+        // every time the data is changed, scroll to the end of the list to show the latest added
+        // pill
+        // In ltr we need to scroll to the right, so positive value should be passed and in rtl we
+        // need to scroll to the left, so negative value should be passed
+        divRef.current?.scrollTo({
+            left: divRef.current.scrollWidth * (direction === 'ltr' ? 1 : -1)
+        });
+    }, [data, direction]);
+    // the styles for the component
+    const styles = styleInterpolations$1(props);
+    // TODO: use theming and multi-variant styles
+    // 
+    const rootClasses = classNames.classNames([
+        UNSAFE_SelectMultiple_themes_TextTagListStyles_css.textTagListStyles.textTagListBase,
+        hasInsideLabel && UNSAFE_SelectMultiple_themes_TextTagListStyles_css.textTagListStyles.textTagListInsideLabel
+    ]);
+    return (jsxRuntime.jsx("div", { class: rootClasses, ref: divRef, tabIndex: -1, onKeyDown: onTagKeyDown, role: "listbox", "aria-label": ariaLabel, "aria-multiselectable": "true", style: styles, ...focusProps, children: data.map((tag, index) => (jsxRuntime.jsx(TextTag, { isFocused: currentSelectedTagIndex.current === index, isSelected: selectedTags.includes(tag.value), onRemoveAction: onTagRemoveAction, onSelect: onTagSelect, onRemoveIconClick: onTagRemoveIconClick, removeIcon: removeIcon, value: tag.value, children: tag.label }, tag.value))) }));
+}
+const TextTagList = compat.forwardRef(_TextTagList);
+
+function SelectMultipleFieldInput({ displayValue, isTextTagListShown, isUserFiltering, liveRegionText, onExitNavigation, onRemove, removeIcon, selectedValuesDescriptionId, textTagListData, textTagListRef, userInput, virtualKeyboard, ...passThroughTextFieldInputProps }) {
+    const translations = hooks_UNSAFE_useTranslationBundle.useTranslationBundle('@oracle/oraclejet-preact');
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [isTextTagListShown && (jsxRuntime.jsx(TextTagList, { "aria-label": translations.selectMultiple_selectedValues(), data: textTagListData, hasInsideLabel: passThroughTextFieldInputProps.hasInsideLabel, maxWidth: "50%", onExitNavigation: onExitNavigation, onRemove: onRemove, ref: textTagListRef, removeIcon: removeIcon })), jsxRuntime.jsx(Flex.Flex, { flex: 1, children: jsxRuntime.jsx(TextFieldInput.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 && (jsxRuntime.jsx(HiddenAccessible.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 })), jsxRuntime.jsx(UNSAFE_LiveRegion.LiveRegion, { children: liveRegionText })] }));
+}
+
+const interpolations = [...Object.values(utils_UNSAFE_interpolations_text.textInterpolations)];
+const styleInterpolations = utils_UNSAFE_mergeInterpolations.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 = compat.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 } = hooks_UNSAFE_useFormFieldContext.useFormFieldContext();
+    const { isTabbable, tabbableModeProps } = hooks_UNSAFE_useTabbableMode.useTabbableMode();
+    // setup properties
+    const myPlaceholder = TextFieldInput.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 } = hooks_UNSAFE_useAccessibleContext.useAccessibleContext();
+    const mergedAriaLabelledBy = hasEmptyLabel
+        ? stringUtils.merge([ariaLabelledBy, UNSAFE_ariaLabelledBy])
+        : ariaLabelledBy;
+    // setup style classes
+    const { class: styleInterpolationClasses } = styleInterpolations({ textAlign });
+    const { classes: themeClasses } = hooks_UNSAFE_useComponentTheme.useComponentTheme(UNSAFE_TextField_themes_redwood_TextFieldInputTheme.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.classNames([
+        UNSAFE_SelectMultiple_themes_SelectMultipleMobileFieldInputStyles_css.selectMultipleMobileFieldInputStyles.base,
+        styleInterpolationClasses,
+        themeClasses
+    ]);
+    return (jsxRuntime.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: jsxRuntime.jsx("div", { class: UNSAFE_SelectMultiple_themes_SelectMultipleMobileFieldInputStyles_css.selectMultipleMobileFieldInputStyles.content, children: jsxRuntime.jsx(Text.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 = hooks_UNSAFE_useTranslationBundle.useTranslationBundle('@oracle/oraclejet-preact');
+    const separator = translations.plural_separator();
+    // create the text displayed in the field from the selected values
+    const concatenatedDisplayValues = hooks.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 = hooks.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) => PRIVATE_SelectCommon.renderItemText(itemContext, itemText);
+    const mappedArray = arValues.map(mapFunc);
+    return new Set(mappedArray);
+}
+function createTextTags(itemText, selectedItems = []) {
+    return selectedItems.map((item) => ({
+        label: PRIVATE_SelectCommon.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 = hooks.useRef(valueItems);
+    // ref for the previous value of isDropdownSelectedOnlyView
+    const prevIsDropdownSelectedOnlyViewRef = hooks.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 = hooks.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] = hooks.useState({
+        rowKey: undefined
+    });
+    const [dropdownSelectedKeys, setDropdownSelectedKeys] = hooks.useState(keysFromValueItems(valueItems));
+    const dataCache = hooks.useRef(new Map());
+    const currentValueItems = hooks.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 = hooks.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 = hooks.useCallback((detail) => {
+        setCurrentRow({ rowKey: detail.value });
+    }, [setCurrentRow]);
+    const onSelectionChange = hooks.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 = hooks.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 = hooks.useCallback(() => {
+        // Commit the current value items and close the dropdown
+        onCommit({
+            previousValue: keysFromValueItems(valueItems),
+            value: dropdownSelectedKeys
+        });
+        closeDropdown();
+    }, [dropdownSelectedKeys, valueItems, closeDropdown, onCommit]);
+    const onBackButtonClick = hooks.useCallback(() => {
+        closeDropdown();
+    }, [closeDropdown]);
+    const onClearButtonClick = hooks.useCallback(() => {
+        setDropdownSelectedKeys(new Set());
+        stopFiltering();
+    }, [stopFiltering]);
+    const onTextTagRemove = hooks.useCallback((keys) => {
+        const newSelectedKeys = new Set(dropdownSelectedKeys);
+        keys.forEach((key) => newSelectedKeys.delete(key));
+        setDropdownSelectedKeys(newSelectedKeys);
+    }, [dropdownSelectedKeys]);
+    const onTextTagExitNavigation = hooks.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 = hooks.useRef(isDropdownOpen);
+    hooks.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 index.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: !stringUtils.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] = hooks.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 = hooks.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 (!stringUtils.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 } = PRIVATE_SelectCommon.useSelectCommon({
+        data,
+        inputRef,
+        isFocused: propIsFocused,
+        onFilter: handleOnFilter
+    });
+    const textTagListRef = hooks.useRef(null);
+    const { direction } = hooks_UNSAFE_useUser.useUser();
+    const selectedValuesDescriptionId = hooks.useId();
+    const combinedAriaDescribedBy = stringUtils.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 = hooks.useCallback(() => {
+        dropdownRef.current?.parentElement?.removeChild(dropdownRef.current);
+    }, [dropdownRef]);
+    const shouldSelectCurrentRow = hooks.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 &&
+            !stringUtils.isEmptyOrUndefined(userInput) &&
+            (data?.data.length ?? 0) > 0 &&
+            currentRowArg.rowKey !== undefined);
+    }, [data, isDropdownOpen, isUserFiltering, userInput]);
+    const selectRow = hooks.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 = hooks.useCallback((event) => {
+        if (isDropdownOpen) {
+            if (event?.type === 'keydown') {
+                const keyboardEvent = event;
+                switch (keyboardEvent.code) {
+                    case PRIVATE_SelectCommon.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 = hooks.useCallback((event) => {
+        // const target = event.target as HTMLElement;
+        // ignore control key and function key
+        if (PRIVATE_SelectCommon.isControlOrFunctionKey(event)) {
+            return;
+        }
+        switch (event.code) {
+            case PRIVATE_SelectCommon.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 PRIVATE_SelectCommon.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 PRIVATE_SelectCommon.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 PRIVATE_SelectCommon.KEYS.ENTER:
+            case PRIVATE_SelectCommon.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
+    hooks.useEffect(() => {
+        const keys = valueItems?.reduce((accumKeys, currentItem) => {
+            accumKeys.add(currentItem.key);
+            return accumKeys;
+        }, new Set());
+        setSelectedKeys(keys);
+    }, [setSelectedKeys, valueItems]);
+    const chipRef = hooks.useRef(null);
+    hooks.useEffect(() => {
+        chipRef.current =
+            hasSelectedValuesCount && mainFieldRef.current?.querySelector
+                ? mainFieldRef.current.querySelector('[role="switch"]')
+                : null;
+    }, [hasSelectedValuesCount, isDisabled, isReadonly, mainFieldRef]);
+    const handleSelectedValuesCountKeyDown = hooks.useCallback((event) => {
+        switch (event.code) {
+            case PRIVATE_SelectCommon.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 PRIVATE_SelectCommon.KEYS.UP:
+            case PRIVATE_SelectCommon.KEYS.DOWN:
+                // prevent the page from scrolling
+                event.preventDefault();
+                break;
+            case PRIVATE_SelectCommon.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 PRIVATE_SelectCommon.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 = hooks.useCallback((event) => {
+        switch (event.code) {
+            case PRIVATE_SelectCommon.KEYS.UP:
+            case PRIVATE_SelectCommon.KEYS.DOWN:
+                handleUpDownArrowKeys(event);
+                break;
+            default:
+                break;
+        }
+    }, [handleUpDownArrowKeys]);
+    const handleSelectedValuesCountMouseDown = hooks.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 = hooks.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
+    hooks.useEffect(() => {
+        if (!isDropdownOpen && isDropdownSelectedOnlyView) {
+            setDropdownSelectedOnlyView(false);
+        }
+    }, [isDropdownOpen, isDropdownSelectedOnlyView]);
+    const onSelectionChange = hooks.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 = hooks.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 = hooks.useCallback((keys) => {
+        const previousValue = selectedKeys;
+        const value = new Set(selectedKeys);
+        keys.forEach((key) => value.delete(key));
+        onCommit?.({ previousValue, value });
+    }, [onCommit, selectedKeys]);
+    const dropdownEventHandlers = hooks.useMemo(() => {
+        return utils_UNSAFE_mergeProps.mergeProps({
+            onAutoDismiss: baseHandleDropdownAutoDismiss,
+            onPosition: handleDropdownPosition
+        }, { onAutoDismiss: myHandleDropdownAutoDismiss });
+    }, [baseHandleDropdownAutoDismiss, handleDropdownPosition, myHandleDropdownAutoDismiss]);
+    const inputEventHandlers = hooks.useMemo(() => {
+        return utils_UNSAFE_mergeProps.mergeProps({
+            onInput: handleInput,
+            onKeyDown: baseHandleMainFieldKeyDown,
+            onKeyUp: handleMainFieldKeyUp
+        }, { onKeyDown: myHandleMainFieldKeyDown });
+    }, [baseHandleMainFieldKeyDown, handleInput, handleMainFieldKeyUp, myHandleMainFieldKeyDown]);
+    const textTagListProps = hooks.useMemo(() => ({
+        textTagListRef,
+        onExitNavigation: onTextTagListExitNavigation,
+        onRemove: onTextTagListRemove
+    }), [onTextTagListExitNavigation, onTextTagListRemove]);
+    hooks.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 = hooks_PRIVATE_useEffectEvent.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: stringUtils.isEmptyOrUndefined(searchText) ? undefined : firstResultKey
+            });
+        }
+    });
+    hooks.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 = compat.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 } = hooks_UNSAFE_useFormContext.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 } = hooks_UNSAFE_useFocusableTextField.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 = hooks_UNSAFE_useLoadingIndicatorTimer.useLoadingIndicatorTimer(propIsLoading ?? false);
+    const { baseId, formFieldContext, inputProps, labelProps, textFieldProps, userAssistanceProps } = hooks_UNSAFE_useTextField.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 } = hooks_UNSAFE_useTextField.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 = (jsxRuntime.jsx(Label.Label, { ...labelProps, ...(PRIVATE_SelectCommon.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: jsxRuntime.jsx(Label.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 : (jsxRuntime.jsx(UNSAFE_UserAssistance.InlineUserAssistance, { userAssistanceDensity: userAssistanceDensity, ...userAssistanceProps }))) : (jsxRuntime.jsx(UNSAFE_UserAssistance.InlineUserAssistance, { assistiveText: assistiveText, fieldLabel: label, helpSourceLink: helpSourceLink, helpSourceText: helpSourceText, messages: messages, isRequiredShown: isRequiredShown, userAssistanceDensity: userAssistanceDensity, ...userAssistanceProps }))) : undefined;
+    const compactUserAssistance = userAssistanceDensity === 'compact' ? (jsxRuntime.jsx(UNSAFE_UserAssistance.CompactUserAssistance, { anchorRef: mainFieldRef, messages: messages, assistiveText: assistiveText, ...userAssistanceProps })) : undefined;
+    const translations = hooks_UNSAFE_useTranslationBundle.useTranslationBundle('@oracle/oraclejet-preact');
+    if (isReadonly) {
+        return (jsxRuntime.jsx(hooks_UNSAFE_useFormFieldContext.FormFieldContext.Provider, { value: formFieldContext, children: jsxRuntime.jsx(UNSAFE_TextField.ReadonlyTextField, { role: "presentation", compactUserAssistance: compactUserAssistance, inlineUserAssistance: inlineUserAssistance, onBlur: focusProps.onfocusout, onFocus: focusProps.onfocusin, ref: mainFieldRef, ...fieldLabelProps, children: jsxRuntime.jsx(ReadonlyTextFieldInput.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 && !PRIVATE_SelectCommon.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') ? (jsxRuntime.jsx(PRIVATE_SelectCommon.DropdownUserAssistance, { assistiveText: assistiveText, fieldLabel: label, helpSourceLink: helpSourceLink, helpSourceText: helpSourceText, userAssistanceDensity: userAssistanceDensity, ...(PRIVATE_SelectCommon.isPhone() ? mobileDropdownUserAssistanceProps : {}) })) : undefined;
+    const isEmptyResults = isDataFetched && data?.totalSize === 0;
+    const dropdownListContent = isEmptyResults ? (jsxRuntime.jsx(PRIVATE_SelectCommon.EmptyResults, {})) : (jsxRuntime.jsx(PRIVATE_SelectCommon.DefaultList, { ...(PRIVATE_SelectCommon.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 || PRIVATE_SelectCommon.isBeforeDataFetch(data) || isEmptyResults);
+    const hasEmptyLabel = label === '' && labelEdge === 'none';
+    const defaultMainFieldInput = (jsxRuntime.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: PRIVATE_SelectCommon.isTablet() ? 'always' : 'never', selectedValuesDescriptionId: selectedValuesDescriptionId, textAlign: textAlign, textTagListData: textTags, userInput: userInput, 
+        // In tablet, we would want to show the virtual keyboard
+        virtualKeyboard: PRIVATE_SelectCommon.isTablet() ? virtualKeyboard : undefined, ...inputEventHandlers, ...inputProps, ...textTagListProps }));
+    const phoneMainFieldInput = (jsxRuntime.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 (jsxRuntime.jsxs(preact.Fragment, { children: [jsxRuntime.jsx(hooks_UNSAFE_useFormFieldContext.FormFieldContext.Provider, { value: formFieldContext, children: jsxRuntime.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.
+                    PRIVATE_SelectCommon.isPhone() && !isDisabled ? phoneMainFieldInput : defaultMainFieldInput }) }), PRIVATE_SelectCommon.isPhone() ? (jsxRuntime.jsx(PRIVATE_SelectCommon.SelectMobileDropdown, { header: jsxRuntime.jsxs(hooks_UNSAFE_useFormFieldContext.FormFieldContext.Provider, { value: mobileDropdownFormFieldContext, children: [jsxRuntime.jsx(UNSAFE_View.View, { children: jsxRuntime.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: jsxRuntime.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: jsxRuntime.jsx(MobileDropdownFooter, { ...mobileDropdownFooterProps }), id: dropdownId, isOpen: shouldShowDropdown, children: jsxRuntime.jsx(PRIVATE_SelectCommon.DropdownList, { hasBottomGap: true, isLoading: data === null, children: dropdownListContent }) })) : (jsxRuntime.jsxs(PRIVATE_SelectCommon.Dropdown, { dropdownRef: dropdownRef, id: dropdownId, isOpen: shouldShowDropdown, anchorRef: mainFieldRef, ...dropdownEventHandlers, children: [jsxRuntime.jsx(PRIVATE_SelectCommon.DropdownList, { hasBottomGap: dropdownInlineUserAssistance === undefined, isLoading: data === null, children: dropdownListContent }), dropdownInlineUserAssistance] }))] }));
+});
 
 /**
  * @license
@@ -324,5 +1532,5 @@ require('./hooks/PRIVATE_useEffectEvent.js');
  * @ignore
  */
 
-exports.SelectMultiple = SelectMultiple.SelectMultiple;
+exports.SelectMultiple = SelectMultiple;
 //# sourceMappingURL=UNSAFE_SelectMultiple.js.map