@oracle/oraclejet-preact 20.0.3 → 20.1.0

package/cjs/useRovingTabIndexContainer-46b897fd.js

@@ -0,0 +1,108 @@
+/* @oracle/oraclejet-preact: undefined */
+'use strict';
+
+var hooks = require('preact/hooks');
+var useUser = require('./useUser-cc045b3e.js');
+var clientHints = require('./clientHints-c40c5250.js');
+
+/**
+ * Utility hook for setting up roving tab indexes on children of the consuming parent container
+ * For more details: https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_roving_tabindex
+ * @param isDisabled boolean flag to communicate disabled state of consumer
+ * @returns id of currently focused element, and props to be spread onto the consuming element
+ */
+const useRovingTabIndexContainer = (isDisabled, containerChildren) => {
+    const rootRef = hooks.useRef(null);
+    const { direction } = useUser.useUser();
+    const isRtl = direction === 'rtl';
+    const [focusedId, setFocusedId] = hooks.useState(undefined);
+    const [isShiftTabbing, setIsShiftTabbing] = hooks.useState(false); // shift tabbing is tracked in order to toggle wrapper out of the tab order
+    const clientHints$1 = clientHints.getClientHints();
+    const [hasFocusableItems, setHasFocusableItems] = hooks.useState(false);
+    const getRovingItems = () => {
+        return rootRef.current
+            ? Array.from(rootRef.current.querySelectorAll('[data-oj-roving-tabindex-item]'))
+            : [];
+    };
+    const handleKeyDown = (e) => {
+        if (e.code === 'ArrowRight' || e.code === 'ArrowLeft') {
+            const items = getRovingItems();
+            if (items.length === 0)
+                return;
+            const nextItem = getNextItem(items, e.code, focusedId, isRtl);
+            nextItem.focus();
+        }
+        else if (e.shiftKey && e.code === 'Tab') {
+            setIsShiftTabbing(true);
+        }
+    };
+    // In Safari 16 and earlier, clicking on an HTML button element does not trigger a focus(in) event,
+    // and as such our handleFocus logic does not kick in and our focusedId state is never updated.
+    // To work around this, we manually update the focusedId in response to mouse downs. This has been fixed in Safari 17.
+    // This fix can be removed once Safari 18 is released.
+    const handleMouseDown = (e) => {
+        const rovingItemId = getRovingItemId(e.target, true);
+        if (rovingItemId) {
+            setFocusedId(rovingItemId);
+        }
+    };
+    const handleFocus = (e) => {
+        if (e.target !== e.currentTarget) {
+            //focus has moved to one of the roving items
+            if (e.target) {
+                setFocusedId(getRovingItemId(e.target));
+            }
+        }
+        else {
+            //focus has moved to the container, and has to be passed onto the eligble item to receive focus
+            const items = getRovingItems();
+            if (items.length === 0)
+                return;
+            setHasFocusableItems(items.length > 0);
+            const currentIndex = getCurrentRovingIndex(items, focusedId);
+            items[currentIndex].focus();
+        }
+    };
+    hooks.useEffect(() => {
+        if (!rootRef.current)
+            return;
+        const items = getRovingItems();
+        setHasFocusableItems(items.length > 0);
+    }, [containerChildren]);
+    const rovingTabIndexContainerProps = {
+        ref: rootRef,
+        onBlur: () => setIsShiftTabbing(false),
+        onFocus: handleFocus,
+        onKeyDown: handleKeyDown,
+        ...(clientHints$1.browser === 'safari' && { onMouseDown: handleMouseDown }), // mouseDown handler needed for Safari 16
+        tabIndex: isShiftTabbing || isDisabled || !hasFocusableItems ? undefined : 0 // tab index is needed on the container in order to pass focus to the first child
+    };
+    return { focusedId, rovingTabIndexContainerProps };
+};
+const getRovingItemId = (item, useClosest = false) => {
+    if (useClosest) {
+        const ancestor = item.closest('data-oj-roving-tabindex-item');
+        if (ancestor) {
+            item = ancestor;
+        }
+    }
+    return item.getAttribute('data-oj-roving-tabindex-item') || undefined;
+};
+const getCurrentRovingIndex = (items, focusedId) => {
+    const currentIndex = items.findIndex((item) => getRovingItemId(item) === focusedId);
+    return currentIndex === -1 ? 0 : currentIndex;
+};
+const getNextItem = (items, eventCode, focusedId, isRtl) => {
+    const currentIndex = getCurrentRovingIndex(items, focusedId);
+    let nextIndex = -1;
+    if ((!isRtl && eventCode === 'ArrowRight') || (isRtl && eventCode === 'ArrowLeft')) {
+        nextIndex = currentIndex === items.length - 1 ? 0 : currentIndex + 1;
+    }
+    if ((!isRtl && eventCode === 'ArrowLeft') || (isRtl && eventCode === 'ArrowRight')) {
+        nextIndex = currentIndex === 0 ? items.length - 1 : currentIndex - 1;
+    }
+    return items[nextIndex];
+};
+
+exports.useRovingTabIndexContainer = useRovingTabIndexContainer;
+//# sourceMappingURL=useRovingTabIndexContainer-46b897fd.js.map

package/cjs/useRovingTabIndexContainer-46b897fd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRovingTabIndexContainer-46b897fd.js","sources":["../../src/hooks/PRIVATE_useRovingTabIndexContainer/useRovingTabIndexContainer.tsx"],"sourcesContent":["import { useState, useRef, useEffect } from 'preact/hooks';\nimport { useUser } from '../UNSAFE_useUser';\nimport { getClientHints } from '../../utils/PRIVATE_clientHints';\nimport type { ComponentChildren } from 'preact';\n\n/**\n * Utility hook for setting up roving tab indexes on children of the consuming parent container\n * For more details: https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_roving_tabindex\n * @param isDisabled boolean flag to communicate disabled state of consumer\n * @returns id of currently focused element, and props to be spread onto the consuming element\n */\nconst useRovingTabIndexContainer = (\n  isDisabled?: boolean,\n  containerChildren?: ComponentChildren\n) => {\n  const rootRef = useRef<HTMLDivElement | null>(null);\n  const { direction } = useUser();\n  const isRtl = direction === 'rtl';\n  const [focusedId, setFocusedId] = useState<string | undefined>(undefined);\n  const [isShiftTabbing, setIsShiftTabbing] = useState(false); // shift tabbing is tracked in order to toggle wrapper out of the tab order\n  const clientHints = getClientHints();\n  const [hasFocusableItems, setHasFocusableItems] = useState(false);\n\n  const getRovingItems = () => {\n    return rootRef.current\n      ? Array.from(rootRef.current.querySelectorAll<HTMLElement>('[data-oj-roving-tabindex-item]'))\n      : [];\n  };\n\n  const handleKeyDown = (e: KeyboardEvent) => {\n    if (e.code === 'ArrowRight' || e.code === 'ArrowLeft') {\n      const items = getRovingItems();\n      if (items.length === 0) return;\n      const nextItem = getNextItem(items, e.code, focusedId, isRtl);\n      nextItem.focus();\n    } else if (e.shiftKey && e.code === 'Tab') {\n      setIsShiftTabbing(true);\n    }\n  };\n\n  // In Safari 16 and earlier, clicking on an HTML button element does not trigger a focus(in) event,\n  // and as such our handleFocus logic does not kick in and our focusedId state is never updated.\n  // To work around this, we manually update the focusedId in response to mouse downs. This has been fixed in Safari 17.\n  // This fix can be removed once Safari 18 is released.\n  const handleMouseDown = (e: MouseEvent) => {\n    const rovingItemId = getRovingItemId(e.target as HTMLElement, true);\n    if (rovingItemId) {\n      setFocusedId(rovingItemId);\n    }\n  };\n\n  const handleFocus = (e: FocusEvent) => {\n    if (e.target !== e.currentTarget) {\n      //focus has moved to one of the roving items\n      if (e.target) {\n        setFocusedId(getRovingItemId(e.target as HTMLElement));\n      }\n    } else {\n      //focus has moved to the container, and has to be passed onto the eligble item to receive focus\n      const items = getRovingItems();\n      if (items.length === 0) return;\n      setHasFocusableItems(items.length > 0);\n      const currentIndex = getCurrentRovingIndex(items, focusedId);\n      items[currentIndex].focus();\n    }\n  };\n\n  useEffect(() => {\n    if (!rootRef.current) return;\n\n    const items = getRovingItems();\n    setHasFocusableItems(items.length > 0);\n  }, [containerChildren]);\n\n  const rovingTabIndexContainerProps = {\n    ref: rootRef,\n    onBlur: () => setIsShiftTabbing(false),\n    onFocus: handleFocus,\n    onKeyDown: handleKeyDown,\n    ...(clientHints.browser === 'safari' && { onMouseDown: handleMouseDown }), // mouseDown handler needed for Safari 16\n    tabIndex: isShiftTabbing || isDisabled || !hasFocusableItems ? undefined : 0 // tab index is needed on the container in order to pass focus to the first child\n  };\n\n  return { focusedId, rovingTabIndexContainerProps };\n};\n\nconst getRovingItemId = (item: Element, useClosest = false) => {\n  if (useClosest) {\n    const ancestor = item.closest('data-oj-roving-tabindex-item');\n    if (ancestor) {\n      item = ancestor;\n    }\n  }\n\n  return item.getAttribute('data-oj-roving-tabindex-item') || undefined;\n};\n\nconst getCurrentRovingIndex = (items: HTMLElement[], focusedId: string | undefined) => {\n  const currentIndex = items.findIndex((item) => getRovingItemId(item) === focusedId);\n  return currentIndex === -1 ? 0 : currentIndex;\n};\n\nconst getNextItem = (\n  items: HTMLElement[],\n  eventCode: string,\n  focusedId: string | undefined,\n  isRtl: boolean\n) => {\n  const currentIndex = getCurrentRovingIndex(items, focusedId);\n  let nextIndex = -1;\n  if ((!isRtl && eventCode === 'ArrowRight') || (isRtl && eventCode === 'ArrowLeft')) {\n    nextIndex = currentIndex === items.length - 1 ? 0 : currentIndex + 1;\n  }\n  if ((!isRtl && eventCode === 'ArrowLeft') || (isRtl && eventCode === 'ArrowRight')) {\n    nextIndex = currentIndex === 0 ? items.length - 1 : currentIndex - 1;\n  }\n  return items[nextIndex];\n};\n\nexport { useRovingTabIndexContainer };\n"],"names":["useRef","useUser","useState","clientHints","getClientHints","useEffect"],"mappings":"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"}

package/cjs/useScale-529046e3.js

@@ -0,0 +1,21 @@
+/* @oracle/oraclejet-preact: undefined */
+'use strict';
+
+var hooks = require('preact/hooks');
+var LayerHost = require('./LayerHost-21391a0d.js');
+require('preact/jsx-runtime');
+require('preact/compat');
+
+/**
+ * @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 useScale() {
+    return hooks.useContext(LayerHost.EnvironmentContext).scale;
+}
+
+exports.useScale = useScale;
+//# sourceMappingURL=useScale-529046e3.js.map

package/cjs/useScale-529046e3.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useScale-529046e3.js","sources":["../../src/hooks/UNSAFE_useScale/useScale.ts"],"sourcesContent":["/**\n * @license\n * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.\n * The Universal Permissive License (UPL), Version 1.0\n * as shown at https://oss.oracle.com/licenses/upl/\n * @ignore\n */\nimport { useContext } from 'preact/hooks';\nimport { EnvironmentContext } from '../../UNSAFE_Environment';\n\nexport function useScale() {\n  return useContext(EnvironmentContext).scale;\n}\n"],"names":["useContext","EnvironmentContext"],"mappings":";;;;;;;;AAAA;;;;;;AAMG;SAIa,QAAQ,GAAA;AACtB,IAAA,OAAOA,gBAAU,CAACC,4BAAkB,CAAC,CAAC,KAAK,CAAC;AAC9C;;;;"}

package/cjs/useSelectCommon-728573f9.js

@@ -0,0 +1,507 @@
+/* @oracle/oraclejet-preact: undefined */
+'use strict';
+
+var jsxRuntime = require('preact/jsx-runtime');
+var Flex = require('./Flex-ec48072d.js');
+var HighlightText = require('./HighlightText-93f2fea0.js');
+require('./Grid-156807d4.js');
+
+var ListItemText = require('./ListItemText-3e93c76c.js');
+var hooks = require('preact/hooks');
+var logger = require('./logger-2b636482.js');
+var PRIVATE_SelectCommon_themes_dropdownStyles_css = require('./PRIVATE_SelectCommon/themes/dropdownStyles.css.js');
+var List = require('./List-afcfa338.js');
+var usePress = require('./usePress-886180e4.js');
+var CaretDown = require('./CaretDown-bdf57d9c.js');
+var classNames = require('./classNames-c14c6ef3.js');
+var useComponentTheme = require('./useComponentTheme-082fc8e4.js');
+var UNSAFE_ButtonLabelLayout_themes_redwood_ButtonLabelLayoutTheme = require('./UNSAFE_ButtonLabelLayout/themes/redwood/ButtonLabelLayoutTheme.js');
+var useTestId = require('./useTestId-a8b07506.js');
+var UNSAFE_BaseButton_themes_redwood_BaseButtonTheme = require('./UNSAFE_BaseButton/themes/redwood/BaseButtonTheme.js');
+var CollectionInteractionContext = require('./CollectionInteractionContext-f84ff7a1.js');
+var Text = require('./Text-056f1ec5.js');
+var useTranslationBundle = require('./useTranslationBundle-990e7928.js');
+var clientHints = require('./clientHints-c40c5250.js');
+var compat = require('preact/compat');
+var keyboardUtils = require('./keyboardUtils-b42fe7d5.js');
+var tabbableUtils = require('./tabbableUtils-22a50472.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, componentName) {
+    // if item-text is a string and the data has the specified field, return it;
+    // otherwise log an error
+    if (typeof itemText === 'string') {
+        // JET-78134: in 26C rc0 preflight, line type is not editable in PRC
+        // Some JS applications incorrectly pass {} as valueItem/value-item instead of null
+        // or leaving the property unset for the empty state. Older releases already handled that misconfiguration
+        // by logging this custom error; keep that behavior and avoid throwing when item.data is missing.
+        const itemData = item.data;
+        if (itemData != null && Object.prototype.hasOwnProperty.call(itemData, itemText)) {
+            const retData = itemData[itemText];
+            return String(retData);
+        }
+        logger.error(`${componentName}: 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 noOp = () => { };
+function DefaultList({ 'aria-label': ariaLabel, componentName, currentItemVariant, currentKey, data, itemRenderer, itemText, onCurrentKeyChange, onItemAction, onLoadRange = noOp, onSelectionChange, searchText, selectedKeys, selectionMode }) {
+    const listItemRenderer = hooks.useCallback((listItemContext) => {
+        // specify the listItemContext props that we want to expose individually instead of
+        // spreading the whole object so that we don't automatically include any new props that
+        // may be added to it
+        const itemRendererProps = {
+            data: listItemContext.data,
+            index: listItemContext.index,
+            metadata: listItemContext.metadata,
+            selector: listItemContext.selector,
+            searchText,
+            selectedKeys,
+            onSelectionChange: ({ value }) => {
+                onSelectionChange?.({ value });
+            }
+        };
+        const itemContext = {
+            data: listItemContext.data,
+            key: listItemContext.metadata.key,
+            metadata: listItemContext.metadata
+        };
+        return itemRenderer ? (itemRenderer(itemRendererProps)) : (jsxRuntime.jsxs(Flex.Flex, { align: "center", children: [listItemContext.selector && (jsxRuntime.jsx("div", { class: PRIVATE_SelectCommon_themes_dropdownStyles_css.dropdownStyles.selectorWrapper, children: listItemContext.selector() })), jsxRuntime.jsx("div", { class: selectionMode === 'single'
+                        ? PRIVATE_SelectCommon_themes_dropdownStyles_css.dropdownStyles.singleSelectItem
+                        : PRIVATE_SelectCommon_themes_dropdownStyles_css.dropdownStyles.multiSelectItem, children: jsxRuntime.jsx(ListItemText.ListItemText, { variant: "primary", children: jsxRuntime.jsx(HighlightText.HighlightText, { matchText: searchText, children: renderItemText(itemContext, itemText, componentName) }) }) })] }));
+    }, [
+        componentName,
+        itemRenderer,
+        itemText,
+        onSelectionChange,
+        searchText,
+        selectedKeys,
+        selectionMode
+    ]);
+    const keys = hooks.useMemo(() => {
+        return { all: false, keys: selectedKeys ?? new Set() };
+    }, [selectedKeys]);
+    const currentItemOverride = hooks.useMemo(() => (currentKey !== undefined ? { rowKey: currentKey } : undefined), [currentKey]);
+    const handleItemAction = hooks.useCallback(({ context: { data, metadata } }) => {
+        onItemAction?.({ context: { data, key: metadata.key, metadata } });
+    }, [onItemAction]);
+    const handleSelectionChange = hooks.useCallback(({ value }) => {
+        onSelectionChange?.({ value: new Set(value.keys?.values()) });
+    }, [onSelectionChange]);
+    return (jsxRuntime.jsx(List.List, { "aria-label": ariaLabel, allowTabbableMode: false, currentItemVariant: currentItemVariant, currentItemOverride: currentItemOverride, data: data ?? null, onPersistCurrentItem: onCurrentKeyChange, onItemAction: handleItemAction, onLoadRange: onLoadRange, onSelectionChange: handleSelectionChange, role: "listbox", selectedKeys: keys, selectionMode: selectionMode, children: (context) => listItemRenderer(context) }));
+}
+
+const isSimpleClick = (event) => {
+    return event.button === 0 && !event.ctrlKey;
+};
+const preventDefault = (event) => {
+    event.preventDefault();
+};
+const preventDefaultForCurrentTarget = (event) => {
+    if (event.currentTarget === event.target) {
+        event.preventDefault();
+    }
+};
+
+const noop = () => { };
+function DropdownArrow({ isDisabled = false, onClick, testId }) {
+    const { classes } = useComponentTheme.useComponentTheme(UNSAFE_ButtonLabelLayout_themes_redwood_ButtonLabelLayoutTheme.ButtonLabelLayoutRedwoodTheme, { size: 'sm' });
+    const { baseTheme } = useComponentTheme.useComponentTheme(UNSAFE_BaseButton_themes_redwood_BaseButtonTheme.BaseButtonRedwoodTheme);
+    const preventDefault = hooks.useCallback((event) => {
+        event.preventDefault();
+    }, []);
+    const { pressProps } = usePress.usePress(onClick ?? noop, { isDisabled });
+    // TODO: JET-67410 replace this with a icon button
+    const styleClasses = classNames.classNames([
+        classes,
+        baseTheme,
+        PRIVATE_SelectCommon_themes_dropdownStyles_css.dropdownStyles.arrow.base,
+        isDisabled ? PRIVATE_SelectCommon_themes_dropdownStyles_css.dropdownStyles.arrow.disabled : PRIVATE_SelectCommon_themes_dropdownStyles_css.dropdownStyles.arrow.enabled
+    ]);
+    const testIdProps = useTestId.useTestId(testId);
+    return (jsxRuntime.jsx("span", { "aria-hidden": "true", class: styleClasses, tabIndex: -1, onMouseDown: preventDefault, ...testIdProps, ...pressProps, children: jsxRuntime.jsx(CaretDown.SvgCaretDown, {}) }));
+}
+
+function DropdownList({ children, id, dropdownListRef, hasTopGap = true, hasBottomGap = true, isLoading = false, onKeyDown }) {
+    const styleClasses = classNames.classNames([
+        PRIVATE_SelectCommon_themes_dropdownStyles_css.dropdownStyles.list.base,
+        hasTopGap && PRIVATE_SelectCommon_themes_dropdownStyles_css.dropdownStyles.list.topGap,
+        hasBottomGap && PRIVATE_SelectCommon_themes_dropdownStyles_css.dropdownStyles.list.bottomGap,
+        isLoading && PRIVATE_SelectCommon_themes_dropdownStyles_css.dropdownStyles.list.loading
+    ]);
+    return (jsxRuntime.jsx(CollectionInteractionContext.CollectionInteractionContext.Provider, { value: 'embedded', children: jsxRuntime.jsx("div", { ref: dropdownListRef, class: styleClasses, id: id, onMouseDown: preventDefaultForCurrentTarget, onKeyDown: onKeyDown, children: children }) }));
+}
+
+function EmptyResults() {
+    const translations = useTranslationBundle.useTranslationBundle('@oracle/oraclejet-preact');
+    // call preventDefault for mousedown on this div so that focus does not transfer from
+    // the input
+    return (jsxRuntime.jsx("div", { class: PRIVATE_SelectCommon_themes_dropdownStyles_css.dropdownStyles.results.extraItem, onMouseDown: preventDefaultForCurrentTarget, children: jsxRuntime.jsx(Text.Text, { variant: "primary", children: translations.select_noMatchesFound() }) }));
+}
+
+/**
+ * @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
+ */
+/**
+ * Helper function to determine whether the current device is a mobile device
+ * @returns true if running on a mobile device, false otherwise
+ */
+function isMobile() {
+    const deviceType = clientHints.getClientHints().deviceType;
+    return deviceType === 'phone' || deviceType === 'tablet';
+}
+/**
+ * Helper function to determine whether the current device is a phone
+ * @returns true if running on a phone, false otherwise
+ */
+function isPhone() {
+    return clientHints.getClientHints().deviceType === 'phone';
+}
+/**
+ * Helper function to determine whether the current device is a tablet
+ * @returns true if running on a tablet, false otherwise
+ */
+function isTablet() {
+    return clientHints.getClientHints().deviceType === 'tablet';
+}
+function isBeforeDataFetch(data) {
+    return data.sizePrecision === 'atLeast' && data.totalSize === 0;
+}
+function isSearchTextEmptyOrUndefined(searchText) {
+    return searchText === undefined || searchText.length === 0;
+}
+function isSearchClearedFirstTime(prevSearchText, searchText) {
+    return prevSearchText === undefined && searchText === '';
+}
+/**
+ * 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
+ */
+function createKeysFromValueItems(valueItems) {
+    const keys = valueItems?.reduce((accumKeys, currentItem) => {
+        accumKeys.add(currentItem.key);
+        return accumKeys;
+    }, new Set());
+    return keys;
+}
+
+/**
+ * A custom hook that constructs the context for SelectSingle/SelectMultiple's collectionRenderer.
+ * @param param0 Parameters for constructing the collection renderer context
+ * @returns the CollectionRendererContext object
+ */
+function useCollectionRenderer({ currentKey, onCurrentKeyChange, onItemAction, onSelectedKeysChange, searchText, selectedKeys, selectedOnlyData }) {
+    return compat.useMemo(() => {
+        const common = {
+            searchText,
+            currentRowKeyOverride: currentKey,
+            onPersistCurrentRowKey: onCurrentKeyChange,
+            selected: selectedKeys
+        };
+        // If onItemAction is present, then we are constructing context for SelectSingle. So,
+        // return the context satisfying SelectSingleCollectionRendererContext type.
+        if (onItemAction !== undefined)
+            return {
+                ...common,
+                onRowAction: onItemAction
+            };
+        // If onItemAction is not present, then we are constructing context for SelectMultiple. So,
+        // return the context satisfying SelectMultipleCollectionRendererContext type.
+        return {
+            ...common,
+            onSelectedChange: onSelectedKeysChange,
+            selectedOnlyData
+        };
+    }, [
+        currentKey,
+        onCurrentKeyChange,
+        onItemAction,
+        onSelectedKeysChange,
+        searchText,
+        selectedKeys,
+        selectedOnlyData
+    ]);
+}
+
+/**
+ * @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 state and behavior for a Select* component.  This hook creates state
+ * variables and event listeners, returning properties to apply to components internally
+ * rendered by a Select* component, as well as state information.
+ *
+ * @param data Specifies data for the dropdown list.
+ * @param inputRef Ref to the input element.
+ * @param isFocused Specifies whether the component has focus.
+ * @param onFilter Callback function to trigger loading data for the dropdown list,
+ * which may or may not be filtered by user entered text.
+ *
+ * @returns Component state and event listeners.
+ */
+function useSelectCommon({ data, inputRef, isFocused, onFilter }) {
+    const mainFieldRef = hooks.useRef(null);
+    const dropdownRef = hooks.useRef(null);
+    const [isDropdownOpen, setDropdownOpen] = hooks.useState(false);
+    const [isDropdownAbove, setDropdownAbove] = hooks.useState(false);
+    // We only need to push currentRow when we need to override the
+    // current row, like when the dropdown is opened and we want to set the initial
+    // focused row or when filtering and we want to focus the first row.
+    const [currentRowOverride, _setCurrentRowOverride] = hooks.useState({
+        rowKey: undefined
+    });
+    // We still need information on what the current row actually is, but we do not need
+    // to react to it until certain scenarios like pressing Tab from the dropdown. So, we
+    // just store this in a ref.
+    const currentRowKeyRef = hooks.useRef();
+    // When we want to update the currentRowOverride, we also want to keep the currentRowKeyRef
+    // in sync as the collection will not call onChanged for this change.
+    const setCurrentRowOverride = hooks.useCallback((currentRow) => {
+        currentRowKeyRef.current = currentRow.rowKey;
+        _setCurrentRowOverride(currentRow);
+    }, []);
+    const [isUserFiltering, setUserFiltering] = hooks.useState(false);
+    const [userInput, setUserInput] = hooks.useState();
+    const [searchText, setSearchText] = hooks.useState();
+    const [prevIsDropdownOpen, setPrevIsDropdownOpen] = hooks.useState(isDropdownOpen);
+    const [prevIsFocused, setPrevIsFocused] = hooks.useState(isFocused);
+    const [prevIsUserFiltering, setPrevIsUserFiltering] = hooks.useState(isUserFiltering);
+    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 () {
+            inputRef.current?.focus();
+        }, 0);
+    }, [inputRef, isDropdownOpen]);
+    const handleDropdownArrowClick = hooks.useCallback(() => {
+        setDropdownOpen(!isDropdownOpen);
+        // focus the input so that if the user Tabs afterwards, it loses focus and the dropdown closes
+        inputRef.current?.focus();
+    }, [inputRef, isDropdownOpen]);
+    const handleDropdownAutoDismiss = hooks.useCallback((event) => {
+        if (isDropdownOpen) {
+            setDropdownOpen(false);
+            switch (event?.type) {
+                case 'keydown': {
+                    const keyboardEvent = event;
+                    switch (keyboardEvent.code) {
+                        case keyboardUtils.KEYS.ESC:
+                            // focus the input when the user cancels out of the dropdown
+                            inputRef.current?.focus();
+                            break;
+                    }
+                    break;
+                }
+                case 'mousedown':
+                    // if focus is in the dropdown, focus the input before the dropdown is hidden so that
+                    // focus will transfer correctly when the target is not focusable;
+                    // otherwise the text cursor appears in the input again
+                    if (dropdownRef.current?.contains(document.activeElement)) {
+                        inputRef.current?.focus();
+                    }
+                    break;
+            }
+        }
+    }, [inputRef, isDropdownOpen]);
+    const handleDropdownPosition = hooks.useCallback((data) => {
+        setDropdownAbove(data.placement.startsWith('top'));
+    }, []);
+    const getDropdownTabbableElems = hooks.useCallback(() => {
+        return isDropdownOpen && dropdownRef.current
+            ? tabbableUtils.allTabbableElements(dropdownRef.current)
+            : undefined;
+    }, [isDropdownOpen]);
+    const handleUpDownArrowKeys = hooks.useCallback((event) => {
+        if (!isDropdownOpen) {
+            setDropdownOpen(true);
+        }
+        else {
+            // JET-64909 - focus / 'current' dropped when arrow keying during loading
+            // Transfer physical focus into the dropdown only if the data is present and the dropdown
+            // has rendered the data. Otherwise, keep the focus in the field.
+            if (data != null) {
+                const tabbableElems = getDropdownTabbableElems();
+                tabbableElems?.[0]?.focus();
+                // if there is no current item set, make the first item current
+                if (currentRowOverride.rowKey === undefined) {
+                    setCurrentRowOverride({ rowKey: data.data[0]?.metadata?.key });
+                }
+            }
+        }
+        // prevent the page from scrolling
+        event.preventDefault();
+    }, [currentRowOverride, data, getDropdownTabbableElems, isDropdownOpen, setCurrentRowOverride]);
+    const handleMainFieldKeyDown = hooks.useCallback((event) => {
+        // const target = event.target as HTMLElement;
+        // ignore control key and function key
+        if (keyboardUtils.isControlOrFunctionKey(event)) {
+            return;
+        }
+        switch (event.code) {
+            case keyboardUtils.KEYS.PAGE_UP:
+            case keyboardUtils.KEYS.PAGE_DOWN:
+                // prevent the page from scrolling
+                event.preventDefault();
+                return;
+            case keyboardUtils.KEYS.UP:
+            case keyboardUtils.KEYS.DOWN:
+                // prevent the page from scrolling
+                event.preventDefault();
+                break;
+            case keyboardUtils.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;
+        }
+    }, [isDropdownOpen]);
+    const handleMainFieldKeyUp = hooks.useCallback((event) => {
+        // ignore control key and function key
+        if (keyboardUtils.isControlOrFunctionKey(event)) {
+            return;
+        }
+        switch (event.code) {
+            case keyboardUtils.KEYS.UP:
+            case keyboardUtils.KEYS.DOWN:
+                handleUpDownArrowKeys(event);
+                break;
+        }
+    }, [handleUpDownArrowKeys]);
+    const handleInput = hooks.useCallback((detail) => {
+        if (!isDropdownOpen) {
+            setDropdownOpen(true);
+        }
+        setUserFiltering(true);
+        setUserInput(detail.value);
+        const str = detail.value;
+        setSearchText(str);
+        onFilter?.({ searchText: str });
+    }, [isDropdownOpen, onFilter]);
+    const onCurrentKeyChange = hooks.useCallback((detail) => {
+        // when the collection changes the current key, we only want to store the information
+        // and not do anything.
+        currentRowKeyRef.current = detail.value;
+    }, []);
+    const stopFiltering = hooks.useCallback(() => {
+        setUserFiltering(false);
+        setUserInput('');
+        // Set this to `undefined` as this represents the initial state.
+        // We need to do this for select-single as we need to highlight different
+        // rows based on whether it is the initial dropdown navigation or empty filter navigation.
+        setSearchText(undefined);
+    }, []);
+    const updateFiltering = hooks.useCallback((value) => {
+        setUserFiltering(true);
+        setUserInput(value);
+        setSearchText(value);
+    }, []);
+    // the user is not actively filtering if the dropdown is closed and the component doesn't
+    // have focus
+    if (prevIsDropdownOpen !== isDropdownOpen ||
+        prevIsFocused !== isFocused ||
+        prevIsUserFiltering !== isUserFiltering) {
+        if (!isDropdownOpen && !isFocused && isUserFiltering) {
+            stopFiltering();
+        }
+    }
+    // need to call onFilter with undefined searchText when the dropdown opens and the
+    // user is NOT filtering
+    hooks.useEffect(() => {
+        if (isDropdownOpen && !isUserFiltering) {
+            onFilter?.({ searchText: undefined });
+        }
+    }, [isDropdownOpen, isUserFiltering, onFilter]);
+    // when the dropdown closes, reset the isDropdownAbove flag
+    if (prevIsDropdownOpen !== isDropdownOpen) {
+        if (!isDropdownOpen) {
+            setDropdownAbove(false);
+        }
+        setPrevIsDropdownOpen(isDropdownOpen);
+    }
+    if (prevIsFocused !== isFocused) {
+        setPrevIsFocused(isFocused);
+    }
+    if (prevIsUserFiltering !== isUserFiltering) {
+        setPrevIsUserFiltering(isUserFiltering);
+    }
+    return {
+        currentRowKeyRef,
+        currentRowOverride,
+        dropdownRef,
+        getDropdownTabbableElems,
+        handleDropdownArrowClick,
+        handleDropdownAutoDismiss,
+        handleDropdownPosition,
+        handleInput,
+        handleMainFieldKeyDown,
+        handleMainFieldKeyUp,
+        handleUpDownArrowKeys,
+        isDropdownAbove,
+        isDropdownOpen,
+        // 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,
+        onCurrentKeyChange,
+        onMouseDown,
+        searchText,
+        setCurrentRowOverride,
+        setDropdownOpen,
+        setUserInput,
+        stopFiltering,
+        updateFiltering,
+        userInput
+    };
+}
+
+exports.DefaultList = DefaultList;
+exports.DropdownArrow = DropdownArrow;
+exports.DropdownList = DropdownList;
+exports.EmptyResults = EmptyResults;
+exports.createKeysFromValueItems = createKeysFromValueItems;
+exports.isBeforeDataFetch = isBeforeDataFetch;
+exports.isMobile = isMobile;
+exports.isPhone = isPhone;
+exports.isSearchClearedFirstTime = isSearchClearedFirstTime;
+exports.isSearchTextEmptyOrUndefined = isSearchTextEmptyOrUndefined;
+exports.isSimpleClick = isSimpleClick;
+exports.isTablet = isTablet;
+exports.preventDefault = preventDefault;
+exports.preventDefaultForCurrentTarget = preventDefaultForCurrentTarget;
+exports.renderItemText = renderItemText;
+exports.useCollectionRenderer = useCollectionRenderer;
+exports.useSelectCommon = useSelectCommon;
+//# sourceMappingURL=useSelectCommon-728573f9.js.map