@oracle/oraclejet 13.0.1 → 13.0.2

package/dist/js/libs/oraclejet-preact/cjs/SelectMultiple-4c46f338.js

@@ -0,0 +1,846 @@
+/* @oracle/oraclejet-preact: 13.0.2 */
+'use strict';
+
+var jsxRuntime = require('preact/jsx-runtime');
+var preact = require('preact');
+var compat = require('preact/compat');
+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');
+require('./UNSAFE_Flex.js');
+var UNSAFE_Label = require('./UNSAFE_Label.js');
+var UNSAFE_LiveRegion = require('./UNSAFE_LiveRegion.js');
+var UNSAFE_TextField = require('./UNSAFE_TextField.js');
+var UNSAFE_UserAssistance = require('./UNSAFE_UserAssistance.js');
+require('./utils/PRIVATE_clientHints.js');
+var hooks = require('preact/hooks');
+
+require('./UNSAFE_HighlightText.js');
+require('./UNSAFE_ListView.js');
+var utils_UNSAFE_logger = require('./utils/UNSAFE_logger.js');
+var HighlightText = require('./HighlightText-593a12b8.js');
+var ListView = require('./ListView-36cc1b35.js');
+var UNSAFE_Floating = require('./UNSAFE_Floating.js');
+var UNSAFE_Layer = require('./UNSAFE_Layer.js');
+var hooks_UNSAFE_useOutsideClick = require('./hooks/UNSAFE_useOutsideClick.js');
+var hooks_UNSAFE_usePress = require('./hooks/UNSAFE_usePress.js');
+require('./utils/UNSAFE_classNames.js');
+var classNames = require('./classNames-7897cd9a.js');
+var tslib_es6 = require('./tslib.es6-fd51dea5.js');
+require('./UNSAFE_Chip.js');
+var hooks_UNSAFE_useTranslationBundle = require('./hooks/UNSAFE_useTranslationBundle.js');
+var Chip = require('./Chip-d1137e11.js');
+var TextFieldInput = require('./TextFieldInput-5538a6d3.js');
+var Flex = require('./Flex-90ba9f0a.js');
+var clientHints = require('./clientHints-ed023784.js');
+
+/**
+ * @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 renderItemText(item, itemText) {
+    var _a;
+    // if item-text is a string and the data has the specified field, return it;
+    // otherwise log an error
+    if (typeof itemText === 'string') {
+        if ((_a = item.data) === null || _a === void 0 ? void 0 : _a.hasOwnProperty(itemText)) {
+            return item.data[itemText];
+        }
+        utils_UNSAFE_logger.Logger.error('SelectMultiple: itemText specifies field that does not exist: ' + itemText);
+        // return undefined if the field doesn't exist
+        return undefined;
+    }
+    // if item-text is a function, call it to create a display label
+    return itemText(item);
+}
+
+const itemStyles = "idd6a1a";
+
+const noOp = () => {};
+
+function DefaultList({
+  accessibleSummary,
+  currentKey,
+  data,
+  itemText,
+  onCurrentKeyChange,
+  onLoadRange = noOp,
+  onSelectionChange,
+  searchText,
+  selectedKeys
+}) {
+  const listItemRenderer = hooks.useCallback(listItemContext => {
+    const itemContext = {
+      data: listItemContext.data,
+      key: listItemContext.metadata.key,
+      metadata: listItemContext.metadata
+    };
+    const renderedItemText = renderItemText(itemContext, itemText);
+    return jsxRuntime.jsx("div", Object.assign({
+      class: itemStyles
+    }, {
+      children: jsxRuntime.jsx(HighlightText.HighlightText, Object.assign({
+        matchText: searchText
+      }, {
+        children: renderedItemText
+      }))
+    }));
+  }, [itemText, searchText]);
+  return jsxRuntime.jsx(ListView.ListView, Object.assign({
+    accessibleSummary: accessibleSummary,
+    currentKey: currentKey,
+    data: data !== null && data !== void 0 ? data : null,
+    gridlines: "hidden",
+    onCurrentKeyChange: onCurrentKeyChange,
+    onLoadRange: onLoadRange,
+    onSelectionChange: onSelectionChange,
+    selectedKeys: {
+      all: false,
+      keys: selectedKeys !== null && selectedKeys !== void 0 ? selectedKeys : new Set()
+    },
+    selectionMode: "multiple"
+  }, {
+    children: context => listItemRenderer(context)
+  }));
+}
+
+const KEYS = {
+    TAB: 'Tab',
+    ENTER: 'Enter',
+    ESC: 'Escape',
+    SPACE: 'Space',
+    LEFT: 'ArrowLeft',
+    UP: 'ArrowUp',
+    RIGHT: 'ArrowRight',
+    DOWN: 'ArrowDown',
+    SHIFT_LEFT: 'ShiftLeft',
+    SHIFT_RIGHT: 'ShiftRight',
+    CTRL_LEFT: 'ControlLeft',
+    CTRL_RIGHT: 'ControlRight',
+    ALT_LEFT: 'AltLeft',
+    ALT_RIGHT: 'AltRight',
+    PAGE_UP: 'PageUp',
+    PAGE_DOWN: 'PageDown',
+    HOME: 'Home',
+    END: 'End',
+    BACKSPACE: 'Backspace',
+    DELETE: 'Delete'
+};
+const isControlKey = (event) => {
+    switch (event.code) {
+        case KEYS.SHIFT_LEFT:
+        case KEYS.SHIFT_RIGHT:
+        case KEYS.CTRL_LEFT:
+        case KEYS.CTRL_RIGHT:
+        case KEYS.ALT_LEFT:
+        case KEYS.ALT_RIGHT:
+            return true;
+        default:
+            return event.metaKey || event.ctrlKey;
+    }
+};
+const isFunctionKey = (event) => {
+    return /\bF([1-9]|1[0-2])\b/i.test(event.code);
+};
+const isControlOrFunctionKey = (event) => {
+    return isControlKey(event) || isFunctionKey(event);
+};
+const isSimpleClick = (event) => {
+    return event.button === 0 && !event.ctrlKey;
+};
+
+const rootStyles$3 = {
+  base: "b1x3qtg"
+};
+function Dropdown({
+  anchorRef,
+  children,
+  dropdownRef,
+  id,
+  isOpen,
+  onAutoDismiss
+}) {
+  var _a;
+
+  const handleAutoDismiss = hooks.useCallback(event => {
+    onAutoDismiss === null || onAutoDismiss === void 0 ? void 0 : onAutoDismiss(event);
+  }, [onAutoDismiss]);
+  const handleKeyDown = hooks.useCallback(event => {
+    if (event.defaultPrevented || isControlOrFunctionKey(event)) {
+      return;
+    }
+
+    switch (event.code) {
+      case KEYS.ESC:
+      case KEYS.TAB:
+        handleAutoDismiss(event);
+        break;
+    }
+  }, [handleAutoDismiss]);
+  hooks_UNSAFE_useOutsideClick["default"]({
+    isDisabled: !isOpen,
+    ref: [anchorRef, dropdownRef],
+    handler: handleAutoDismiss
+  }); // TODO: get dropdown y (mainAxis) offset from --oj-c-PRIVATE-DO-NOT-USE-private-core-global-dropdown-offset
+
+  const offsetValue = {
+    mainAxis: 4,
+    crossAxis: 0
+  };
+  const inlineStyle = {
+    minWidth: `${(_a = anchorRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth}px`
+  };
+  return !isOpen ? null : jsxRuntime.jsx(UNSAFE_Layer.Layer, {
+    children: jsxRuntime.jsx(UNSAFE_Floating.Floating, Object.assign({
+      anchorRef: anchorRef,
+      ref: dropdownRef,
+      placement: "bottom-start",
+      offsetValue: offsetValue
+    }, {
+      children: jsxRuntime.jsx("div", Object.assign({
+        class: rootStyles$3.base,
+        id: id,
+        style: inlineStyle,
+        onKeyDown: handleKeyDown
+      }, {
+        children: children
+      }))
+    }))
+  });
+}
+
+const ojButtonHeight = '2.75rem'; // TODO: replace this with var(--oj-button-sm-height) once it is available
+
+const ojButtonSmHeight = '2.25rem'; // TODO: replace this with var(--oj-button-border-radius) once it is available
+
+const ojButtonBorderRadius = 'var(--oj-c-PRIVATE-DO-NOT-USE-core-border-radius-md)'; // TODO: replace this with var(--oj-button-borderless-chrome-text-color) once it is available
+
+const ojButtonBorderlessChromeTextColor = 'var(--oj-c-PRIVATE-DO-NOT-USE-core-text-color-primary)'; // TODO: replace this with var (--oj-button-borderless-chrome-text-color-disabled) once it is available
+
+const ojButtonBorderlessChromeTextColorDisabled = 'var(--oj-c-PRIVATE-DO-NOT-USE-core-text-color-disabled)'; // TODO: replace this with var(--oj-button-borderless-chrome-text-color-hover) once it is available
+
+const ojButtonBorderlessChromeTextColorHover = 'var(--oj-c-PRIVATE-DO-NOT-USE-core-text-color-primary)'; // TODO: replace this with var(--oj-button-borderless-chrome-bg-color-hover) once it is available
+
+const ojButtonBorderlessChromeBgColorHover = 'var(--oj-c-PRIVATE-DO-NOT-USE-core-bg-color-hover)'; // TODO: replace this with var(--oj-button-borderless-chrome-border-color-hover) once it is available
+
+const ojButtonBorderlessChromeBorderColorHover = 'transparent';
+const rootStyles$2 = {
+  base: "bd2dc79",
+  sizeMd: "s15qor59",
+  sizeSm: "s12pbwsa",
+  enabled: "e1yzq7zc",
+  disabled: "d13seyx8"
+};
+
+const noop = () => {};
+
+function DropdownArrow({
+  isDisabled = false,
+  onClick,
+  size = 'md'
+}) {
+  const preventDefault = hooks.useCallback(event => {
+    event.preventDefault();
+  }, []);
+  const {
+    pressProps
+  } = hooks_UNSAFE_usePress.usePress(onClick !== null && onClick !== void 0 ? onClick : noop, {
+    isDisabled
+  });
+  const styleClasses = classNames.classNames([rootStyles$2.base, size === 'sm' ? rootStyles$2.sizeSm : rootStyles$2.sizeMd, isDisabled ? rootStyles$2.disabled : rootStyles$2.enabled]);
+  return jsxRuntime.jsx("span", Object.assign({
+    "aria-hidden": "true",
+    class: styleClasses,
+    tabIndex: -1,
+    onMouseDown: preventDefault
+  }, pressProps, {
+    children: jsxRuntime.jsx("svg", Object.assign({
+      height: "24",
+      viewBox: "0 0 24 24",
+      width: "24",
+      xmlns: "http://www.w3.org/2000/svg"
+    }, {
+      children: jsxRuntime.jsx("path", {
+        d: "m6.00803369 8.9999991c3.96646621 4 5.94968971 6 5.94967061 6-.0000192 0 1.9832044-2 5.9496706-6z",
+        // fill="#100f0e"
+        fill: "currentColor",
+        "fill-rule": "evenodd"
+      })
+    }))
+  }));
+}
+
+const rootStyles$1 = {
+  base: "b4ys03i",
+  // TODO: This should really be applied directly to the child ListView so that the content
+  // displays under the padding when scrolled, but we can't apply styles to the child collection.
+  // TODO: Also need to figure out how to determine whether the collection is a ListView (in
+  // the collectionRenderer case) in order to apply this styling.
+  listView: "lchlgjc",
+  loading: "l6rxyq0"
+};
+function DropdownList({
+  children,
+  isLoading = false
+}) {
+  const styleClasses = classNames.classNames([rootStyles$1.base, rootStyles$1.listView, isLoading && rootStyles$1.loading]);
+  return jsxRuntime.jsx("div", Object.assign({
+    class: styleClasses
+  }, {
+    children: children
+  }));
+}
+
+const rootStyles = "r1onwb12"; // This component renders a badge showing the number of selected values
+
+function SelectedValuesCount(_a) {
+  var {
+    accessibleLabel,
+    count = 0,
+    onKeyDown,
+    onKeyUp,
+    onMouseDown
+  } = _a,
+      passThroughProps = tslib_es6.__rest(_a, ["accessibleLabel", "count", "onKeyDown", "onKeyUp", "onMouseDown"]);
+
+  const translations = hooks_UNSAFE_useTranslationBundle.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 jsxRuntime.jsx("div", Object.assign({
+    class: rootStyles,
+    onKeyDown: onKeyDown,
+    onKeyUp: onKeyUp,
+    onMouseDown: onMouseDown
+  }, {
+    children: jsxRuntime.jsx(Chip.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) {
+    // create the text displayed in the field from the selected values
+    const concatenatedDisplayValues = hooks.useMemo(() => {
+        if (!valueItems) {
+            return '';
+        }
+        const displayValues = _createDisplayValues(itemText, valueItems);
+        const concatDisplayValues = _concatDisplayValues(displayValues);
+        return concatDisplayValues;
+    }, [valueItems, itemText]);
+    return concatenatedDisplayValues;
+}
+function _concatDisplayValues(displayValues) {
+    return Array.from(displayValues.values()).join(', ');
+}
+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 = hooks.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, isReadonly, onCommit, onFilter, onLoadRange: propOnLoadRange, valueItems }) {
+    const mainFieldRef = hooks.useRef(null);
+    const dropdownRef = hooks.useRef(null);
+    const [isDropdownOpen, setDropdownOpen] = hooks.useState(false);
+    const [isDropdownSelectedOnlyView, setDropdownSelectedOnlyView] = hooks.useState(false);
+    const [currentRow, setCurrentRow] = hooks.useState({
+        rowKey: undefined
+    });
+    const [selectedKeys, setSelectedKeys] = hooks.useState();
+    const [isUserFiltering, setUserFiltering] = hooks.useState(false);
+    const [userInput, setUserInput] = hooks.useState();
+    const [searchText, setSearchText] = hooks.useState();
+    const selectedValuesCount = valueItems === null || valueItems === void 0 ? void 0 : valueItems.length;
+    const hasSelectedValuesCount = (selectedValuesCount !== undefined && selectedValuesCount > 0) || isDropdownSelectedOnlyView;
+    // when the array of valueItems changes, pull out the new set of selectedKeys
+    hooks.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 = hooks.useRef(null);
+    hooks.useEffect(() => {
+        chipRef.current =
+            hasSelectedValuesCount && mainFieldRef.current
+                ? mainFieldRef.current.querySelector('[tabindex="0"]')
+                : null;
+    }, [hasSelectedValuesCount, isDisabled, isReadonly]);
+    // 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 onMouseDown = hooks.useCallback((event) => {
+        // const target = event.target as HTMLElement;
+        if (event.defaultPrevented || !isSimpleClick(event)) {
+            return;
+        }
+        if (!isDropdownOpen) {
+            setDropdownOpen(true);
+        }
+        // this is needed to focus the input when clicking on the inside label when there is no
+        // value;  otherwise the component looks focused but doesn't actually have physical focus
+        setTimeout(function () {
+            var _a;
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }, 0);
+    }, [isDropdownOpen, setDropdownOpen]);
+    const handleDropdownArrowClick = hooks.useCallback(() => {
+        var _a;
+        setDropdownOpen(!isDropdownOpen);
+        // focus the input so that if the user Tabs afterwards, it loses focus and the dropdown closes
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, [isDropdownOpen]);
+    const handleDropdownAutoDismiss = hooks.useCallback((event) => {
+        var _a, _b, _c;
+        if (isDropdownOpen) {
+            setDropdownOpen(false);
+            if ((event === null || event === void 0 ? void 0 : event.type) === 'keydown') {
+                const keyboardEvent = event;
+                switch (keyboardEvent.code) {
+                    case KEYS.ESC:
+                        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                        break;
+                    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) {
+                            (_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.focus();
+                        }
+                        else {
+                            (_c = chipRef.current) === null || _c === void 0 ? void 0 : _c.focus();
+                        }
+                        break;
+                }
+            }
+        }
+    }, [hasSelectedValuesCount, isDropdownOpen]);
+    const handleUpDownArrowKeys = hooks.useCallback((event) => {
+        var _a, _b, _c, _d;
+        if (!isDropdownOpen) {
+            setDropdownOpen(true);
+        }
+        else {
+            // transfer physical focus into the dropdown
+            const firstFocusableElem = (_a = dropdownRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('[tabindex="0"]');
+            firstFocusableElem === null || firstFocusableElem === void 0 ? void 0 : firstFocusableElem.focus();
+            // if there is no current item set, make the first item current
+            if (data !== undefined && currentRow.rowKey === undefined) {
+                setCurrentRow({ rowKey: (_d = (_c = (_b = data === null || data === void 0 ? void 0 : data.data) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.metadata) === null || _d === void 0 ? void 0 : _d.key });
+            }
+        }
+        // prevent the page from scrolling
+        event.preventDefault();
+    }, [currentRow, data, isDropdownOpen]);
+    const handleMainFieldKeyDown = hooks.useCallback((event) => {
+        // const target = event.target as HTMLElement;
+        // ignore control key and function key
+        if (isControlOrFunctionKey(event)) {
+            return;
+        }
+        switch (event.code) {
+            case KEYS.PAGE_UP:
+            case KEYS.PAGE_DOWN:
+                // prevent the page from scrolling
+                event.preventDefault();
+                return;
+            case KEYS.UP:
+            case KEYS.DOWN:
+                // prevent the page from scrolling
+                event.preventDefault();
+                break;
+            case KEYS.TAB:
+                if (isDropdownOpen && (event.shiftKey || (!hasSelectedValuesCount && !event.shiftKey))) {
+                    setDropdownOpen(false);
+                }
+                break;
+            case KEYS.ESC:
+                if (isDropdownOpen) {
+                    setDropdownOpen(false);
+                    event.preventDefault();
+                }
+                break;
+            default:
+                break;
+        }
+    }, [hasSelectedValuesCount, isDropdownOpen]);
+    const handleMainFieldKeyUp = hooks.useCallback((event) => {
+        // ignore control key and function key
+        if (isControlOrFunctionKey(event)) {
+            return;
+        }
+        switch (event.code) {
+            case KEYS.UP:
+            case KEYS.DOWN:
+                handleUpDownArrowKeys(event);
+                break;
+            default:
+                break;
+        }
+    }, [handleUpDownArrowKeys]);
+    const handleInput = hooks.useCallback((detail) => {
+        var _a;
+        if (!isDropdownOpen) {
+            setDropdownOpen(true);
+        }
+        setUserFiltering(true);
+        setUserInput(detail.value);
+        const str = (_a = detail.value) === null || _a === void 0 ? void 0 : _a.trim();
+        setSearchText(str);
+        onFilter === null || onFilter === void 0 ? void 0 : onFilter({ searchText: str });
+    }, [isDropdownOpen, onFilter]);
+    const handleSelectedValuesCountKeyDown = hooks.useCallback((event) => {
+        switch (event.code) {
+            case KEYS.TAB:
+                if (isDropdownOpen && !event.shiftKey) {
+                    setDropdownOpen(false);
+                }
+                break;
+            case KEYS.UP:
+            case KEYS.DOWN:
+                // prevent the page from scrolling
+                event.preventDefault();
+                break;
+            case KEYS.ESC:
+                if (isDropdownOpen) {
+                    setDropdownOpen(false);
+                    event.preventDefault();
+                }
+                break;
+            default:
+                break;
+        }
+    }, [isDropdownOpen]);
+    const handleSelectedValuesCountKeyUp = hooks.useCallback((event) => {
+        switch (event.code) {
+            case KEYS.UP:
+            case KEYS.DOWN:
+                handleUpDownArrowKeys(event);
+                break;
+            default:
+                break;
+        }
+    }, [handleUpDownArrowKeys]);
+    const handleSelectedValuesCountMouseDown = hooks.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 = hooks.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
+    hooks.useEffect(() => {
+        if (!isDropdownOpen && isDropdownSelectedOnlyView) {
+            setDropdownSelectedOnlyView(false);
+        }
+    }, [isDropdownOpen, isDropdownSelectedOnlyView]);
+    // TODO: need to specify type <any> for onSelectionChange and onCurrentKeyChange because
+    // otherwise there's an error in SelectMultiple where it renders the DefaultList:
+    // Types of property 'onSelectionChange' are incompatible.
+    //     Type '(detail: SelectionDetail<K>) => void' is not assignable to type '(detail: SelectionDetail<string | number>) => void'.
+    //       Types of parameters 'detail' and 'detail' are incompatible.
+    //         Type 'SelectionDetail<string | number>' is not assignable to type 'SelectionDetail<K>'.
+    //           Type 'string | number' is not assignable to type 'K'.
+    //             'string | number' is assignable to the constraint of type 'K', but 'K' could be instantiated with a different subtype of constraint 'string | number'.
+    const onSelectionChange = hooks.useCallback((detail) => {
+        const newKeys = detail.value.keys;
+        // 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 onCurrentKeyChange = hooks.useCallback((detail) => {
+        setCurrentRow({ rowKey: detail.value });
+    }, []);
+    hooks.useEffect(() => {
+        // clear the current item when the dropdown opens
+        if (isDropdownOpen) {
+            setCurrentRow({ rowKey: undefined });
+        }
+        // TODO: when filtering, set the first result of the filtered data set to be the current item
+        // if (isDropdownOpen && data !== undefined && isFiltering) {
+        //   setCurrentRow({ rowKey: data?.data?.[0]?.metadata?.key });
+        // }
+    }, [isDropdownOpen]);
+    // the user is not actively filtering if the dropdown is closed and the component doesn't
+    // have focus
+    hooks.useEffect(() => {
+        if (!isDropdownOpen && !isFocused && isUserFiltering) {
+            setUserFiltering(false);
+            setUserInput('');
+            setSearchText('');
+        }
+    }, [isDropdownOpen, isFocused, isUserFiltering]);
+    // need to call onFilter with undefined searchText when the dropdown opens and the
+    // user is NOT filtering
+    hooks.useEffect(() => {
+        if (isDropdownOpen && !isUserFiltering) {
+            onFilter === null || onFilter === void 0 ? void 0 : onFilter({ searchText: undefined });
+        }
+    }, [isDropdownOpen, isUserFiltering]);
+    return {
+        collectionProps: {
+            currentKey: currentRow.rowKey,
+            onCurrentKeyChange,
+            onSelectionChange,
+            selectedKeys
+        },
+        data,
+        dropdownArrowEventHandlers: {
+            onClick: handleDropdownArrowClick
+        },
+        dropdownEventHandlers: {
+            onAutoDismiss: handleDropdownAutoDismiss
+        },
+        dropdownRef,
+        hasSelectedValuesCount,
+        inputEventHandlers: {
+            onInput: handleInput,
+            onKeyDown: handleMainFieldKeyDown,
+            onKeyUp: handleMainFieldKeyUp
+        },
+        inputRef,
+        isDropdownOpen,
+        isDropdownSelectedOnlyView,
+        // the field should remain to look focused while the dropdown is open,
+        // in case physical focus is in the dropdown
+        isFocused: isFocused || isDropdownOpen,
+        isUserFiltering,
+        mainFieldRef,
+        mouseProps: isDisabled || isReadonly ? {} : { onMouseDown },
+        onLoadRange,
+        searchText,
+        selectedValuesCountProps: {
+            onKeyDown: handleSelectedValuesCountKeyDown,
+            onKeyUp: handleSelectedValuesCountKeyUp,
+            onMouseDown: handleSelectedValuesCountMouseDown,
+            onToggle: handleSelectedValuesCountToggle
+        },
+        userInput
+    };
+}
+
+const SelectMultiple = compat.forwardRef(({ assistiveText, data: propData, helpSourceLink, helpSourceText, id: propId, isDisabled: propIsDisabled, isLoading: propIsLoading, isReadonly: propIsReadonly, isRequired = false, isRequiredShown, itemText, label, labelEdge: propLabelEdge, labelStartWidth: propLabelStartWidth, messages, onCommit, onFilter, onLoadRange: propOnLoadRange, placeholder, textAlign: propTextAlign, userAssistanceDensity: propUserAssistanceDensity, valueItems, 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 !== 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 } = hooks_UNSAFE_useFocusableTextField.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 = hooks_UNSAFE_useLoadingIndicatorTimer.useLoadingIndicatorTimer(propIsLoading !== null && propIsLoading !== void 0 ? propIsLoading : false);
+    const { baseId, formFieldContext, inputProps, labelProps, textFieldProps, userAssistanceProps } = hooks_UNSAFE_useTextField.useTextField({
+        id: propId,
+        isDisabled,
+        isFocused,
+        isLoading,
+        isReadonly,
+        labelEdge,
+        messages,
+        value: valueItems !== undefined && valueItems.length > 0 ? true : undefined
+    });
+    const dropdownId = `${baseId}-dropdown`;
+    const displayValue = useDisplayValues(itemText, valueItems);
+    const labelComp = labelEdge !== 'none' ? jsxRuntime.jsx(UNSAFE_Label.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 : (jsxRuntime.jsx(UNSAFE_UserAssistance.InlineUserAssistance, Object.assign({ userAssistanceDensity: userAssistanceDensity }, userAssistanceProps)))) : (jsxRuntime.jsx(UNSAFE_UserAssistance.InlineUserAssistance, Object.assign({ assistiveText: assistiveText, helpSourceLink: helpSourceLink, helpSourceText: helpSourceText, messages: messages, isRequiredShown: isRequiredShown, userAssistanceDensity: userAssistanceDensity }, userAssistanceProps)));
+    if (isReadonly) {
+        return (jsxRuntime.jsx(hooks_UNSAFE_useFormFieldContext.FormFieldContext.Provider, Object.assign({ value: formFieldContext }, { children: jsxRuntime.jsx(UNSAFE_TextField.ReadonlyTextField, Object.assign({ role: "presentation", inlineUserAssistance: inlineUserAssistance, onBlur: focusProps.onfocusout, onFocus: focusProps.onfocusin }, fieldLabelProps, { children: jsxRuntime.jsx(UNSAFE_TextField.ReadonlyTextFieldInput, { ariaLabel: ariaLabel, ariaLabelledby: labelProps.id, as: "div", elementRef: readonlyElementRef, hasInsideLabel: label !== undefined && labelEdge === 'inside', id: textFieldProps.id, textAlign: textAlign, value: displayValue }) })) })));
+    }
+    const hasInsideLabel = labelComp !== undefined && labelEdge === 'inside';
+    const translations = hooks_UNSAFE_useTranslationBundle.useTranslationBundle('@oracle/oraclejet-preact');
+    const liveRegionText = isDropdownOpen && data !== undefined && data !== null
+        ? (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 = (jsxRuntime.jsxs(preact.Fragment, { children: [jsxRuntime.jsx(TextFieldInput.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 : undefined, value: isUserFiltering ? userInput : displayValue }, inputProps)), jsxRuntime.jsx(UNSAFE_LiveRegion.LiveRegion, { children: liveRegionText })] }));
+    const dropdownArrow = (jsxRuntime.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) : (jsxRuntime.jsxs(Flex.Flex, Object.assign({ align: "center", justify: "center", gap: [0, '1x'] }, { children: [jsxRuntime.jsx(SelectedValuesCount, Object.assign({ accessibleLabel: label, count: selectedValuesCount, isDisabled: isDisabled, isSelected: isDropdownSelectedOnlyView }, selectedValuesCountProps)), dropdownArrow] })));
+    return (jsxRuntime.jsxs(preact.Fragment, { children: [jsxRuntime.jsx(hooks_UNSAFE_useFormFieldContext.FormFieldContext.Provider, Object.assign({ value: formFieldContext }, { children: jsxRuntime.jsx(UNSAFE_TextField.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)) })), jsxRuntime.jsx(Dropdown, Object.assign({ dropdownRef: dropdownRef, id: dropdownId, isOpen: isDropdownOpen && data !== undefined && (data === null || data.totalSize > 0), anchorRef: mainFieldRef }, dropdownEventHandlers, { children: jsxRuntime.jsx(DropdownList, Object.assign({ isLoading: data === null }, { children: jsxRuntime.jsx(DefaultList, Object.assign({}, collectionProps, { accessibleSummary: label !== null && label !== void 0 ? label : '', data: data, itemText: itemText, onLoadRange: onLoadRange, searchText: isDropdownSelectedOnlyView ? undefined : isUserFiltering ? searchText : undefined })) })) }))] }));
+});
+/**
+ * Helper function to determine whether the current device is a mobile device
+ * @returns true if runnning on a mobile device, false otherwise
+ */
+function isMobile() {
+    const deviceType = clientHints.getClientHints().deviceType;
+    return deviceType === 'phone' || deviceType === 'tablet';
+}
+
+exports.KEYS = KEYS;
+exports.SelectMultiple = SelectMultiple;
+/*  */
+//# sourceMappingURL=SelectMultiple-4c46f338.js.map