@oracle/oraclejet-preact 14.0.0

package/es/UNSAFE_SelectMultiple.js

@@ -0,0 +1,583 @@
+/* @oracle/oraclejet-preact: 14.0.0 */
+import { jsx, jsxs } from 'preact/jsx-runtime';
+import { Fragment } from 'preact';
+import { forwardRef } from 'preact/compat';
+import { useFocusableTextField } from './hooks/UNSAFE_useFocusableTextField.js';
+import { useFormContext } from './hooks/UNSAFE_useFormContext.js';
+import { FormFieldContext } from './hooks/UNSAFE_useFormFieldContext.js';
+import { useLoadingIndicatorTimer } from './hooks/UNSAFE_useLoadingIndicatorTimer.js';
+import { useTextField } from './hooks/UNSAFE_useTextField.js';
+import { Flex } from './UNSAFE_Flex.js';
+import { Label } from './UNSAFE_Label.js';
+import { LiveRegion } from './UNSAFE_LiveRegion.js';
+import { ReadonlyTextField, ReadonlyTextFieldInput, TextFieldInput, TextField } from './UNSAFE_TextField.js';
+import { InlineUserAssistance } from './UNSAFE_UserAssistance.js';
+import { renderItemText, useSelectCommon, KEYS, isControlOrFunctionKey, isBeforeDataFetch, isMobile, DropdownArrow, DropdownUserAssistance, EmptyResults, DefaultList, Dropdown, DropdownList } from './PRIVATE_SelectCommon.js';
+import { _ as __rest } from './tslib.es6-8b94ba02.js';
+import "./UNSAFE_SelectMultiple.css";
+import { Chip } from './UNSAFE_Chip.js';
+import { useTranslationBundle } from './hooks/UNSAFE_useTranslationBundle.js';
+import { useMemo, useState, useCallback, useEffect, useRef } from 'preact/hooks';
+import { mergeProps } from './utils/UNSAFE_mergeProps.js';
+import './hooks/UNSAFE_useFocusWithin.js';
+import './hooks/UNSAFE_useTimer.js';
+import './hooks/UNSAFE_useId.js';
+import './utils/UNSAFE_interpolations/dimensions.js';
+import './utils/UNSAFE_arrayUtils.js';
+import './utils/UNSAFE_size.js';
+import './_curry1-d822c6e1.js';
+import './utils/UNSAFE_mergeInterpolations.js';
+import './utils/UNSAFE_classNames.js';
+import './_curry3-ddab9fe1.js';
+import './_curry2-50442f66.js';
+import './_has-c4aaaf43.js';
+import './utils/UNSAFE_interpolations/boxalignment.js';
+import './keys-fed67954.js';
+import './utils/UNSAFE_interpolations/flexbox.js';
+import './utils/UNSAFE_interpolations/flexitem.js';
+import './hooks/UNSAFE_useTabbableMode.js';
+import './utils/UNSAFE_interpolations/text.js';
+import './UNSAFE_LabelValueLayout.js';
+import './hooks/UNSAFE_useTextFieldInputHandlers.js';
+import './utils/PRIVATE_clientHints.js';
+import './hooks/UNSAFE_useDebounce.js';
+import './UNSAFE_Environment.js';
+import './UNSAFE_Layer.js';
+import './UNSAFE_ComponentMessage.js';
+import './PRIVATE_Message.js';
+import './utils/PRIVATE_timer.js';
+import './UNSAFE_Button.js';
+import './UNSAFE_BaseButton.js';
+import './hooks/UNSAFE_usePress.js';
+import './hooks/UNSAFE_useHover.js';
+import './hooks/UNSAFE_useToggle.js';
+import './hooks/UNSAFE_useActive.js';
+import './UNSAFE_ThemedIcons.js';
+import './UNSAFE_Icons.js';
+import './UNSAFE_Icon.js';
+import './hooks/UNSAFE_useTooltip.js';
+import './UNSAFE_Floating.js';
+import './index-14bba6f7.js';
+import './hooks/UNSAFE_useUser.js';
+import './utils/PRIVATE_floatingUtils.js';
+import './utils/PRIVATE_refUtils.js';
+import './hooks/UNSAFE_useOutsideClick.js';
+import './hooks/UNSAFE_useFocus.js';
+import './hooks/UNSAFE_useTouch.js';
+import './hooks/UNSAFE_useAnimation.js';
+import './hooks/UNSAFE_useTheme.js';
+import './utils/UNSAFE_getLocale.js';
+import './utils/UNSAFE_stringUtils.js';
+import './utils/UNSAFE_logger.js';
+import './utils/UNSAFE_soundUtils.js';
+import './PRIVATE_TransitionGroup.js';
+import './hooks/UNSAFE_useMessagesContext.js';
+import './UNSAFE_HiddenAccessible.js';
+import './UNSAFE_HighlightText.js';
+import './PRIVATE_List.js';
+import './utils/UNSAFE_keys.js';
+import './LoadMoreCollection-5d3b319f.js';
+import './PRIVATE_Collection.js';
+import './hooks/UNSAFE_useViewportIntersect.js';
+import './PRIVATE_VirtualizedCollection.js';
+import './UNSAFE_FocusTrap.js';
+import './utils/PRIVATE_tabbableUtils.js';
+import './hooks/PRIVATE_useSelection.js';
+import './hooks/PRIVATE_useCurrentKey.js';
+import './hooks/PRIVATE_useCollectionFocusRing.js';
+import './hooks/PRIVATE_useTabbableModeSet.js';
+import './hooks/PRIVATE_useItemAction.js';
+import './utils/PRIVATE_collectionUtils.js';
+import './UNSAFE_Skeleton.js';
+import './utils/UNSAFE_interpolations/borders.js';
+import './UNSAFE_Selector.js';
+import './hooks/UNSAFE_useActionable.js';
+
+const rootStyles = "_1r7kbv0"; // This component renders a badge showing the number of selected values
+
+function SelectedValuesCount(_a) {
+  var {
+    accessibleLabel,
+    count = 0,
+    onKeyDown,
+    onKeyUp,
+    onMouseDown
+  } = _a,
+      passThroughProps = __rest(_a, ["accessibleLabel", "count", "onKeyDown", "onKeyUp", "onMouseDown"]);
+
+  const translations = useTranslationBundle('@oracle/oraclejet-preact');
+  const instructions = translations.selectMultiple_showSelectedValues();
+  const accLabel = accessibleLabel ? `${accessibleLabel}. ` : '';
+  const ninetyNinePlus = translations.selectMultiple_countPlus({
+    COUNT: `99`
+  }); // The Chip shows the number of values selected or 99+ if the number is over 99.
+
+  const chipCount = count > 99 ? `${ninetyNinePlus}` : `${count}`; // The screenreader will hear what the number of selected values is along with instructions
+  // like Click to see the full list.
+
+  const valuesSelectedText = translations.selectMultiple_valuesSelected({
+    VALUE_COUNT: `${count}`
+  });
+  const label = `${accLabel}${valuesSelectedText} ${instructions}`;
+  return jsx("div", Object.assign({
+    class: rootStyles,
+    onKeyDown: onKeyDown,
+    onKeyUp: onKeyUp,
+    onMouseDown: onMouseDown
+  }, {
+    children: jsx(Chip, Object.assign({
+      accessibleLabel: label
+    }, passThroughProps, {
+      children: chipCount
+    }))
+  }));
+}
+
+/**
+ * @license
+ * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.
+ * The Universal Permissive License (UPL), Version 1.0
+ * as shown at https://oss.oracle.com/licenses/upl/
+ * @ignore
+ */
+function useDisplayValues(itemText, valueItems) {
+    const translations = useTranslationBundle('@oracle/oraclejet-preact');
+    const separator = translations.plural_separator();
+    // create the text displayed in the field from the selected values
+    const concatenatedDisplayValues = useMemo(() => {
+        if (valueItems === undefined) {
+            return '';
+        }
+        const displayValues = _createDisplayValues(itemText, valueItems);
+        const concatDisplayValues = _concatDisplayValues(displayValues, separator);
+        return concatDisplayValues;
+    }, [valueItems, itemText]);
+    return concatenatedDisplayValues;
+}
+function _concatDisplayValues(displayValues, separator) {
+    return Array.from(displayValues.values()).join(separator);
+}
+function _createDisplayValues(itemText, selectedItems) {
+    const arValues = selectedItems ? [...selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.values()] : [];
+    const mapFunc = (itemContext) => renderItemText(itemContext, itemText);
+    const mappedArray = arValues.map(mapFunc);
+    return new Set(mappedArray);
+}
+
+/**
+ * @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.
+ * @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 the return statement below 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.
+    const selectedOnlyViewDataState = useMemo(() => {
+        var _a;
+        return !isDropdownSelectedOnlyView || !valueItems || valueItems.length === 0
+            ? undefined
+            : {
+                offset: 0,
+                totalSize: (_a = valueItems === null || valueItems === void 0 ? void 0 : valueItems.length) !== null && _a !== void 0 ? _a : 0,
+                sizePrecision: 'exact',
+                data: valueItems.map((valueItem) => {
+                    var _a;
+                    return { data: valueItem.data, metadata: (_a = valueItem.metadata) !== null && _a !== void 0 ? _a : { key: valueItem.key } };
+                })
+            };
+    }, [isDropdownSelectedOnlyView]);
+    return {
+        data: selectedOnlyViewDataState,
+        onLoadRange: undefined
+    };
+}
+
+/**
+ * @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 data Specifies data for the dropdown list.
+ * @param inputRef Ref to the input element.
+ * @param isDisabled Specifies whether the component is disabled.
+ * @param isFocused Specifies whether the component has focus.
+ * @param isReadonly Specifies whether the component is readonly.
+ * @param onCommit Callback invoked when the selected 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({ data: propData, inputRef, isDisabled, isFocused: propIsFocused, isReadonly, onCommit, onFilter, onLoadRange: propOnLoadRange, valueItems }) {
+    const [isDropdownSelectedOnlyView, setDropdownSelectedOnlyView] = useState(false);
+    const selectedValuesCount = valueItems === null || valueItems === void 0 ? void 0 : 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 { currentRow, dropdownRef, handleDropdownArrowClick, handleDropdownAutoDismiss: baseHandleDropdownAutoDismiss, handleInput, handleMainFieldKeyDown: baseHandleMainFieldKeyDown, handleMainFieldKeyUp, handleUpDownArrowKeys, isDropdownOpen, isFocused, isUserFiltering, mainFieldRef, onCurrentKeyChange, onMouseDown, searchText, selectedKeys, setCurrentRow, setDropdownOpen, setSelectedKeys, userInput } = useSelectCommon({
+        data,
+        inputRef,
+        isFocused: propIsFocused,
+        onFilter
+    });
+    const removeDropdown = useCallback(() => {
+        var _a, _b;
+        (_b = (_a = dropdownRef.current) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.removeChild(dropdownRef.current);
+    }, []);
+    const myHandleDropdownAutoDismiss = useCallback((event) => {
+        var _a, _b;
+        if (isDropdownOpen) {
+            if ((event === null || event === void 0 ? void 0 : event.type) === 'keydown') {
+                const keyboardEvent = event;
+                switch (keyboardEvent.code) {
+                    case KEYS.TAB:
+                        // Put focus on an element in the main field, but don't kill the event, so that
+                        // the browser can naturally transfer focus to the next focusable item relative
+                        // to the element in the main field.
+                        if (keyboardEvent.shiftKey || !hasSelectedValuesCount) {
+                            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                        }
+                        else {
+                            (_b = chipRef.current) === null || _b === void 0 ? void 0 : _b.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, isDropdownOpen]);
+    const myHandleMainFieldKeyDown = useCallback((event) => {
+        // const target = event.target as HTMLElement;
+        // ignore control key and function key
+        if (isControlOrFunctionKey(event)) {
+            return;
+        }
+        switch (event.code) {
+            case KEYS.TAB:
+                if (isDropdownOpen && (event.shiftKey || (!hasSelectedValuesCount && !event.shiftKey))) {
+                    // Remove the dropdown immediately, without waiting for a rerender based on changing
+                    // state, so that the open dropdown cannot get focus when the browser handles the
+                    // Tab key.
+                    removeDropdown();
+                    setDropdownOpen(false);
+                }
+                // JET-53183 - core pack compat: stop propagation of handled events
+                // we don't want a parent collection component to jump focus to the next cell and skip
+                // over the selected values count chip
+                if (hasSelectedValuesCount && !event.shiftKey) {
+                    event.stopPropagation();
+                }
+                break;
+            default:
+                break;
+        }
+    }, [hasSelectedValuesCount, isDropdownOpen]);
+    // when the array of valueItems changes, pull out the new set of selectedKeys
+    useEffect(() => {
+        const keys = valueItems === null || valueItems === void 0 ? void 0 : valueItems.reduce((accumKeys, currentItem) => {
+            accumKeys.add(currentItem.key);
+            return accumKeys;
+        }, new Set());
+        setSelectedKeys(keys);
+    }, [valueItems]);
+    const chipRef = useRef(null);
+    useEffect(() => {
+        chipRef.current =
+            hasSelectedValuesCount && mainFieldRef.current
+                ? mainFieldRef.current.querySelector('[role="switch"]')
+                : null;
+    }, [hasSelectedValuesCount, isDisabled, isReadonly]);
+    const handleSelectedValuesCountKeyDown = useCallback((event) => {
+        switch (event.code) {
+            case KEYS.TAB:
+                if (isDropdownOpen && !event.shiftKey) {
+                    // Remove the dropdown immediately, without waiting for a rerender based on changing
+                    // state, so that the open dropdown cannot get focus when the browser handles the
+                    // Tab key.
+                    removeDropdown();
+                    setDropdownOpen(false);
+                }
+                // JET-53183 - core pack compat: stop propagation of handled events
+                // we don't want a parent collection component to jump focus to the next cell and skip
+                // over the input
+                if (event.shiftKey) {
+                    event.stopPropagation();
+                }
+                break;
+            case KEYS.UP:
+            case KEYS.DOWN:
+                // prevent the page from scrolling
+                event.preventDefault();
+                break;
+            case KEYS.ESC:
+                if (isDropdownOpen) {
+                    setDropdownOpen(false);
+                    event.preventDefault();
+                    // JET-53183 - core pack compat: stop propagation of handled events
+                    // we don't want a parent collection component to stop editing the row when we close
+                    // the dropdown
+                    event.stopPropagation();
+                }
+                break;
+            case KEYS.ENTER:
+                // JET-53183 - core pack compat: stop propagation of handled events
+                // we don't want a parent collection component to move focus to the next row when
+                // we toggle between the full and selected only list in the dropdown
+                event.stopPropagation();
+                break;
+            default:
+                break;
+        }
+    }, [isDropdownOpen]);
+    const handleSelectedValuesCountKeyUp = useCallback((event) => {
+        switch (event.code) {
+            case KEYS.UP:
+            case KEYS.DOWN:
+                handleUpDownArrowKeys(event);
+                break;
+            default:
+                break;
+        }
+    }, [handleUpDownArrowKeys]);
+    const handleSelectedValuesCountMouseDown = useCallback((event) => {
+        var _a;
+        // 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()
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, []);
+    const handleSelectedValuesCountToggle = useCallback((detail) => {
+        var _a;
+        if (!isDropdownOpen) {
+            setDropdownOpen(true);
+        }
+        const value = (_a = detail.value) !== null && _a !== void 0 ? _a : false;
+        if (value !== isDropdownSelectedOnlyView) {
+            setDropdownSelectedOnlyView(value);
+        }
+    }, [isDropdownOpen, isDropdownSelectedOnlyView]);
+    // when the dropdown closes, automatically turn off isDropdownSelectedOnlyView
+    useEffect(() => {
+        if (!isDropdownOpen && isDropdownSelectedOnlyView) {
+            setDropdownSelectedOnlyView(false);
+        }
+    }, [isDropdownOpen, isDropdownSelectedOnlyView]);
+    const onSelectionChange = useCallback((detail) => {
+        var _a;
+        const newKeys = new Set((_a = detail.value.keys) === null || _a === void 0 ? void 0 : _a.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);
+        // call the onCommit callback so that the consuming code can update the valueItems
+        onCommit === null || onCommit === void 0 ? void 0 : onCommit({ value: newKeys, previousValue: selectedKeys });
+    }, [onCommit, selectedKeys]);
+    const dropdownEventHandlers = useMemo(() => {
+        return mergeProps({ onAutoDismiss: baseHandleDropdownAutoDismiss }, { onAutoDismiss: myHandleDropdownAutoDismiss });
+    }, [baseHandleDropdownAutoDismiss, myHandleDropdownAutoDismiss]);
+    const inputEventHandlers = useMemo(() => {
+        return mergeProps({
+            onInput: handleInput,
+            onKeyDown: baseHandleMainFieldKeyDown,
+            onKeyUp: handleMainFieldKeyUp
+        }, { onKeyDown: myHandleMainFieldKeyDown });
+    }, [baseHandleMainFieldKeyDown, handleInput, handleMainFieldKeyUp, myHandleMainFieldKeyDown]);
+    useEffect(() => {
+        // clear the current item when the dropdown opens
+        if (isDropdownOpen) {
+            setCurrentRow({ rowKey: undefined });
+        }
+    }, [isDropdownOpen]);
+    return {
+        collectionProps: {
+            currentKey: currentRow.rowKey,
+            onCurrentKeyChange,
+            onSelectionChange,
+            selectedKeys
+        },
+        data,
+        dropdownArrowEventHandlers: {
+            onClick: handleDropdownArrowClick
+        },
+        dropdownEventHandlers,
+        dropdownRef,
+        hasSelectedValuesCount,
+        inputEventHandlers,
+        inputRef,
+        isDropdownOpen,
+        isDropdownSelectedOnlyView,
+        isFocused,
+        isUserFiltering,
+        mainFieldRef,
+        mouseProps: isDisabled || isReadonly ? {} : { onMouseDown },
+        onLoadRange,
+        searchText,
+        selectedValuesCountProps: {
+            onKeyDown: handleSelectedValuesCountKeyDown,
+            onKeyUp: handleSelectedValuesCountKeyUp,
+            onMouseDown: handleSelectedValuesCountMouseDown,
+            onToggle: handleSelectedValuesCountToggle
+        },
+        userInput
+    };
+}
+
+/**
+ * A SelectMultiple is a dropdown list that supports multiple selection and search filtering.
+ */
+const SelectMultiple = forwardRef(({ ariaDescribedBy, assistiveText, data: propData, helpSourceLink, helpSourceText, isDisabled: propIsDisabled, isLoading: propIsLoading, isReadonly: propIsReadonly, isRequired, isRequiredShown, itemText, label, labelEdge: propLabelEdge, labelStartWidth: propLabelStartWidth, messages, onCommit, onFilter, onLoadRange: propOnLoadRange, placeholder, textAlign: propTextAlign, userAssistanceDensity: propUserAssistanceDensity, valueItems, variant = 'default', virtualKeyboard }, ref) => {
+    const { isDisabled: isFormDisabled, isReadonly: isFormReadonly, labelEdge: formLabelEdge, labelStartWidth: formLabelStartWidth, textAlign: formTextAlign, userAssistanceDensity: formUserAssistanceDensity } = useFormContext();
+    // default to FormContext values if component properties are not specified
+    const isDisabled = propIsDisabled !== null && propIsDisabled !== void 0 ? propIsDisabled : isFormDisabled;
+    const isReadonly = propIsReadonly !== null && propIsReadonly !== void 0 ? propIsReadonly : isFormReadonly;
+    const labelEdge = propLabelEdge !== null && propLabelEdge !== void 0 ? propLabelEdge : formLabelEdge;
+    const labelStartWidth = propLabelStartWidth !== null && propLabelStartWidth !== void 0 ? propLabelStartWidth : formLabelStartWidth;
+    const textAlign = propTextAlign !== null && propTextAlign !== void 0 ? propTextAlign : formTextAlign;
+    const userAssistanceDensity = propUserAssistanceDensity !== null && propUserAssistanceDensity !== void 0 ? propUserAssistanceDensity : formUserAssistanceDensity;
+    const { enabledElementRef, focusProps, isFocused: origIsFocused, readonlyElementRef } = useFocusableTextField({ isDisabled, isReadonly, ref });
+    const { collectionProps, data, dropdownArrowEventHandlers, dropdownEventHandlers, dropdownRef, hasSelectedValuesCount, inputEventHandlers, isDropdownOpen, isDropdownSelectedOnlyView, isFocused, isUserFiltering, mainFieldRef, mouseProps, onLoadRange, searchText, selectedValuesCountProps, userInput } = useSelectMultiple({
+        data: propData,
+        inputRef: enabledElementRef,
+        isDisabled,
+        isFocused: origIsFocused,
+        isReadonly,
+        onCommit,
+        onFilter,
+        onLoadRange: propOnLoadRange,
+        valueItems
+    });
+    // The incoming propIsLoading tells us that we are in a loading state, but we don't want to
+    // show the loading indicator until after a delay, because showing it immediately could result
+    // in unwanted flashing.  The isLoading var below will be set to true by useLoadingIndicatorTimer
+    // after the delay, when the timer expires, at which point we should show the loading indicator.
+    // If propIsLoading is set to false before the timer expires, then the timer will be cancelled
+    // and no loading indicator will be shown.
+    // (ListView detects its loading state by checking data === null.  While it would be nice for
+    // us to be consistent and check valueItems === null, we need to use a separate isLoading prop.
+    // If valueItems === null triggers our loading state, then the selections in the dropdown
+    // are cleared for that period of time, which is undesirable.)
+    const isLoading = useLoadingIndicatorTimer(propIsLoading !== null && propIsLoading !== void 0 ? propIsLoading : false);
+    const { baseId, formFieldContext, inputProps, labelProps, textFieldProps, userAssistanceProps } = useTextField({
+        ariaDescribedBy,
+        isDisabled,
+        isFocused,
+        isLoading,
+        isReadonly,
+        labelEdge,
+        messages,
+        styleVariant: variant,
+        value: valueItems !== undefined && valueItems.length > 0 ? true : undefined
+    });
+    const dropdownId = `${baseId}-dropdown`;
+    const displayValue = useDisplayValues(itemText, valueItems);
+    const labelComp = labelEdge !== 'none' ? jsx(Label, Object.assign({}, labelProps, { children: label })) : undefined;
+    const fieldLabelProps = {
+        label: labelEdge !== 'none' ? labelComp : undefined,
+        labelEdge: labelEdge !== 'none' ? labelEdge : undefined,
+        labelStartWidth: labelEdge !== 'none' ? labelStartWidth : undefined
+    };
+    const ariaLabel = labelEdge === 'none' ? label : undefined;
+    const inlineUserAssistance = isDisabled || isReadonly ? (
+    // save space for user assistance if density is 'efficient', even though we don't
+    // render user assistance for disabled or readonly fields
+    userAssistanceDensity !== 'efficient' ? undefined : (jsx(InlineUserAssistance, Object.assign({ userAssistanceDensity: userAssistanceDensity }, userAssistanceProps)))) : (jsx(InlineUserAssistance, Object.assign({ assistiveText: assistiveText, fieldLabel: label, helpSourceLink: helpSourceLink, helpSourceText: helpSourceText, messages: messages, isRequiredShown: isRequiredShown, userAssistanceDensity: userAssistanceDensity }, userAssistanceProps)));
+    const translations = useTranslationBundle('@oracle/oraclejet-preact');
+    if (isReadonly) {
+        return (jsx(FormFieldContext.Provider, Object.assign({ value: formFieldContext }, { children: jsx(ReadonlyTextField, Object.assign({ role: "presentation", inlineUserAssistance: inlineUserAssistance, onBlur: focusProps.onfocusout, onFocus: focusProps.onfocusin }, fieldLabelProps, { children: jsx(ReadonlyTextFieldInput, { ariaDescribedBy: ariaDescribedBy, ariaLabel: ariaLabel, ariaLabelledBy: labelProps.id, as: "div", elementRef: readonlyElementRef, hasInsideLabel: label !== undefined && labelEdge === 'inside', textAlign: textAlign, value: displayValue }) })) })));
+    }
+    const isDataFetched = data !== undefined && data !== null && !isBeforeDataFetch(data);
+    const hasInsideLabel = labelComp !== undefined && labelEdge === 'inside';
+    const liveRegionText = isDropdownOpen && isDataFetched
+        ? (data === null || data === void 0 ? void 0 : data.totalSize) === 0
+            ? translations.select_noMatchesFound()
+            : (data === null || data === void 0 ? void 0 : data.totalSize) === 1
+                ? translations.select_oneMatchFound()
+                : (data === null || data === void 0 ? void 0 : data.sizePrecision) === 'exact'
+                    ? translations.select_sizeMatchesFound({ TOTAL_SIZE: `${data === null || data === void 0 ? void 0 : data.totalSize}` })
+                    : translations.select_sizeOrMoreMatchesFound({ TOTAL_SIZE: `${data === null || data === void 0 ? void 0 : data.totalSize}` })
+        : '';
+    const mainContent = (jsxs(Fragment, { children: [jsx(TextFieldInput, Object.assign({ ariaAutoComplete: "list", ariaControls: dropdownId, ariaExpanded: isDropdownOpen, ariaLabel: ariaLabel, autoComplete: "off", hasInsideLabel: hasInsideLabel, inputRef: enabledElementRef, isRequired: isRequired }, inputEventHandlers, { placeholder: placeholder, role: "combobox", spellcheck: false, textAlign: textAlign, type: isMobile() ? (virtualKeyboard === 'auto' ? 'search' : virtualKeyboard) : undefined, value: isUserFiltering ? userInput : displayValue }, inputProps)), jsx(LiveRegion, { children: liveRegionText })] }));
+    const dropdownArrow = (jsx(DropdownArrow, Object.assign({ isDisabled: isDisabled, size: hasInsideLabel ? 'md' : 'sm' }, dropdownArrowEventHandlers)));
+    const selectedValuesCount = valueItems === null || valueItems === void 0 ? void 0 : valueItems.length;
+    const endContent = isLoading ? undefined : !hasSelectedValuesCount ? (dropdownArrow) : (jsxs(Flex, Object.assign({ align: "center", justify: "center", gap: [0, '1x'] }, { children: [jsx(SelectedValuesCount, Object.assign({ accessibleLabel: label, count: selectedValuesCount, isDisabled: isDisabled, isSelected: isDropdownSelectedOnlyView }, selectedValuesCountProps)), dropdownArrow] })));
+    const dropdownInlineUserAssistance = isDropdownOpen &&
+        !isDisabled &&
+        !isReadonly &&
+        (assistiveText || helpSourceLink) &&
+        (userAssistanceDensity === 'efficient' || userAssistanceDensity === 'reflow') ? (jsx(DropdownUserAssistance, { assistiveText: assistiveText, fieldLabel: label, helpSourceLink: helpSourceLink, helpSourceText: helpSourceText, userAssistanceDensity: userAssistanceDensity })) : undefined;
+    const isEmptyResults = isDataFetched && (data === null || data === void 0 ? void 0 : data.totalSize) === 0;
+    const dropdownListContent = isEmptyResults ? (jsx(EmptyResults, {})) : (jsx(DefaultList, Object.assign({}, collectionProps, { accessibleSummary: label !== null && label !== void 0 ? label : '', data: data, itemText: itemText, onLoadRange: onLoadRange, searchText: isDropdownSelectedOnlyView ? undefined : isUserFiltering ? searchText : undefined, selectionMode: "multiple" })));
+    return (jsxs(Fragment, { children: [jsx(FormFieldContext.Provider, Object.assign({ value: formFieldContext }, { children: jsx(TextField, Object.assign({ endContent: endContent, inlineUserAssistance: inlineUserAssistance, mainContent: mainContent, mainFieldRef: mainFieldRef, onBlur: focusProps === null || focusProps === void 0 ? void 0 : focusProps.onfocusout, onFocus: focusProps === null || focusProps === void 0 ? void 0 : focusProps.onfocusin }, textFieldProps, fieldLabelProps, mouseProps)) })), jsxs(Dropdown, Object.assign({ dropdownRef: dropdownRef, id: dropdownId, isOpen: isDropdownOpen &&
+                    data !== undefined &&
+                    (data === null || data.totalSize > 0 || isBeforeDataFetch(data) || isEmptyResults), anchorRef: mainFieldRef }, dropdownEventHandlers, { children: [jsx(DropdownList, Object.assign({ hasBottomGap: dropdownInlineUserAssistance === undefined, isLoading: data === null }, { children: dropdownListContent })), dropdownInlineUserAssistance] }))] }));
+});
+
+/**
+ * @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
+ */
+
+export { SelectMultiple };
+/*  */
+//# sourceMappingURL=UNSAFE_SelectMultiple.js.map