@itwin/itwinui-react 2.0.2 → 2.1.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # Changelog
 
+## [2.1.0](https://www.github.com/iTwin/iTwinUI-react/compare/v2.0.2...v2.1.0) (2022-12-12)
+
+### What's new
+
+* **Combobox:** Add support for multi-selection through `multiple` prop ([#830](https://www.github.com/iTwin/iTwinUI-react/issues/830)) ([ced7588](https://www.github.com/iTwin/iTwinUI-react/commit/ced7588acee5273e83c0b0d05a732f260997b9bb))
+* **ThemeProvider:** Add `applyBackground` to `themeOptions` prop. ([#974](https://www.github.com/iTwin/iTwinUI-react/issues/974)) ([13cff7f](https://www.github.com/iTwin/iTwinUI-react/commit/13cff7fab356e1015e2e7c361f15c6a7c8fe4d6b))
+  * Defaults to true for the topmost ThemeProvider in the tree.
+* **Table:** Ctrl + Shift click now keeps previous selection & also shift clicks ([#888](https://www.github.com/iTwin/iTwinUI-react/issues/888)) ([13edfb5](https://www.github.com/iTwin/iTwinUI-react/commit/13edfb5ecc62de284ac03cc2fc27b8a41b4f7b61))
+
+### Fixes
+
+* **Table:** Ctrl and checkbox clicks update start row of shift selection ([#889](https://www.github.com/iTwin/iTwinUI-react/issues/889)) ([21900d4](https://www.github.com/iTwin/iTwinUI-react/commit/21900d42900f7a03305bf2040cc64ddb29361b2d))
+
+### 2.0.3 (2022-12-12)
+
+### Fixes
+
+* **ComboBox:** Move max-height to outer element to fix virtual scroll ([#986](https://www.github.com/iTwin/iTwinUI-react/issues/986)) ([596559e](https://www.github.com/iTwin/iTwinUI-react/commit/596559e7158877e09c98c5c672e8a58a9507a33d))
+
 ### [2.0.2](https://www.github.com/iTwin/iTwinUI-react/compare/v2.0.1...v2.0.2) (2022-12-07)
 
 ### Fixes

package/cjs/core/ComboBox/ComboBox.d.ts

@@ -3,24 +3,41 @@ import { InputProps } from '../Input';
 import { SelectOption } from '../Select';
 import { PopoverProps, CommonProps, InputContainerProps } from '../utils';
 import 'tippy.js/animations/shift-away.css';
-export declare type ComboBoxProps<T> = {
+declare type ActionType = 'added' | 'removed';
+declare type MultipleOnChangeProps<T> = {
+    value: T;
+    type: ActionType;
+};
+export declare type ComboboxMultipleTypeProps<T> = {
     /**
-     * Array of options that populate the dropdown list.
+     * Enable multiple selection.
+     * @default false
      */
-    options: SelectOption<T>[];
+    multiple?: false;
     /**
      * Controlled value of ComboBox.
+     * If `multiple` is enabled, it is an array of values.
      */
     value?: T;
+    /**
+     * Callback fired when selected value changes.
+     */
+    onChange?: (value: T) => void;
+} | {
+    multiple: true;
+    value?: T[];
+    onChange?: (value: T[], event: MultipleOnChangeProps<T>) => void;
+};
+export declare type ComboBoxProps<T> = {
+    /**
+     * Array of options that populate the dropdown list.
+     */
+    options: SelectOption<T>[];
     /**
      * Message shown below the combobox.
      * Use `StatusMessage` component.
      */
     message?: React.ReactNode;
-    /**
-     * Callback fired when selected value changes.
-     */
-    onChange?: (value: T) => void;
     /**
      * Function to customize the default filtering logic.
      */
@@ -67,7 +84,7 @@ export declare type ComboBoxProps<T> = {
      * Callback fired when dropdown menu is closed.
      */
     onHide?: () => void;
-} & Pick<InputContainerProps, 'status'> & Omit<CommonProps, 'title'>;
+} & ComboboxMultipleTypeProps<T> & Pick<InputContainerProps, 'status'> & Omit<CommonProps, 'title'>;
 /**
  * ComboBox component that allows typing a value to filter the options in dropdown list.
  * Values can be selected either using mouse clicks or using the Enter key.

package/cjs/core/ComboBox/ComboBox.js

@@ -11,6 +11,7 @@ exports.ComboBox = void 0;
 const react_1 = __importDefault(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const Menu_1 = require("../Menu");
+const SelectTag_1 = __importDefault(require("../Select/SelectTag"));
 const Typography_1 = require("../Typography");
 const utils_1 = require("../utils");
 require("tippy.js/animations/shift-away.css");
@@ -21,6 +22,14 @@ const ComboBoxInput_1 = require("./ComboBoxInput");
 const ComboBoxInputContainer_1 = require("./ComboBoxInputContainer");
 const ComboBoxMenu_1 = require("./ComboBoxMenu");
 const ComboBoxMenuItem_1 = require("./ComboBoxMenuItem");
+// Type guard for enabling multiple
+const isMultipleEnabled = (variable, multiple) => {
+    return multiple && (Array.isArray(variable) || variable === undefined);
+};
+// Type guard for user onChange
+const isSingleOnChange = (onChange, multiple) => {
+    return !multiple;
+};
 /** Returns either `option.id` or derives a stable id using `idPrefix` and `option.label` (without whitespace) */
 const getOptionId = (option, idPrefix) => {
     var _a;
@@ -41,7 +50,7 @@ const getOptionId = (option, idPrefix) => {
  */
 const ComboBox = (props) => {
     var _a, _b;
-    const { options, value: valueProp, onChange, filterFunction, inputProps, dropdownMenuProps, emptyStateMessage = 'No options found', itemRenderer, enableVirtualization = false, onShow, onHide, ...rest } = props;
+    const { options, value: valueProp, onChange, filterFunction, inputProps, dropdownMenuProps, emptyStateMessage = 'No options found', itemRenderer, enableVirtualization = false, multiple = false, onShow, onHide, ...rest } = props;
     // Generate a stateful random id if not specified
     const [id] = react_1.default.useState(() => {
         var _a, _b;
@@ -52,8 +61,6 @@ const ComboBox = (props) => {
     const inputRef = react_1.default.useRef(null);
     const menuRef = react_1.default.useRef(null);
     const toggleButtonRef = react_1.default.useRef(null);
-    const mounted = react_1.default.useRef(false);
-    const valuePropRef = (0, utils_1.useLatestRef)(valueProp);
     const onChangeProp = (0, utils_1.useLatestRef)(onChange);
     const optionsRef = (0, utils_1.useLatestRef)(options);
     // Record to store all extra information (e.g. original indexes), where the key is the id of the option
@@ -71,12 +78,23 @@ const ComboBox = (props) => {
             };
         });
     }
+    // Get indices of selected elements in options array when we have selected values.
+    const getSelectedIndexes = react_1.default.useCallback(() => {
+        if (isMultipleEnabled(valueProp, multiple)) {
+            const indexArray = [];
+            valueProp === null || valueProp === void 0 ? void 0 : valueProp.forEach((value) => {
+                indexArray.push(options.findIndex((option) => option.value === value));
+            });
+            return indexArray;
+        }
+        else {
+            return options.findIndex((option) => option.value === valueProp);
+        }
+    }, [multiple, options, valueProp]);
     // Reducer where all the component-wide state is stored
-    const [{ isOpen, selectedIndex, focusedIndex }, dispatch] = react_1.default.useReducer(helpers_1.comboBoxReducer, {
+    const [{ isOpen, selected, focusedIndex }, dispatch] = react_1.default.useReducer(helpers_1.comboBoxReducer, {
         isOpen: false,
-        selectedIndex: valueProp
-            ? optionsRef.current.findIndex((option) => option.value === valueProp)
-            : -1,
+        selected: getSelectedIndexes(),
         focusedIndex: -1,
     });
     (0, utils_1.useIsomorphicLayoutEffect)(() => {
@@ -84,19 +102,24 @@ const ComboBox = (props) => {
         // When the dropdown opens
         if (isOpen) {
             (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); // Focus the input
-            setFilteredOptions(optionsRef.current); // Reset the filtered list
-            dispatch(['focus']);
+            // Reset the filtered list (does not reset when multiple enabled)
+            if (!multiple) {
+                setFilteredOptions(optionsRef.current);
+                dispatch({ type: 'focus', value: undefined });
+            }
         }
         // When the dropdown closes
         else {
             // Reset the focused index
-            dispatch(['focus']);
-            // Reset the input value
-            setInputValue(selectedIndex != undefined && selectedIndex >= 0
-                ? (_b = optionsRef.current[selectedIndex]) === null || _b === void 0 ? void 0 : _b.label
-                : '');
+            dispatch({ type: 'focus', value: undefined });
+            // Reset the input value if not multiple
+            if (!isMultipleEnabled(selected, multiple)) {
+                setInputValue(selected != undefined && selected >= 0
+                    ? (_b = optionsRef.current[selected]) === null || _b === void 0 ? void 0 : _b.label
+                    : '');
+            }
         }
-    }, [isOpen, optionsRef, selectedIndex]);
+    }, [isOpen, multiple, optionsRef, selected]);
     // Set min-width of menu to be same as input
     const [minWidth, setMinWidth] = react_1.default.useState(0);
     react_1.default.useEffect(() => {
@@ -114,7 +137,7 @@ const ComboBox = (props) => {
         else {
             setFilteredOptions(options);
         }
-        dispatch(['focus']);
+        dispatch({ type: 'focus', value: undefined });
         // Only need to call on options update
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [options]);
@@ -124,41 +147,101 @@ const ComboBox = (props) => {
         var _a, _b;
         const { value } = event.currentTarget;
         setInputValue(value);
-        dispatch(['open']); // reopen when typing
+        dispatch({ type: 'open' }); // reopen when typing
         setFilteredOptions((_a = filterFunction === null || filterFunction === void 0 ? void 0 : filterFunction(optionsRef.current, value)) !== null && _a !== void 0 ? _a : optionsRef.current.filter((option) => option.label.toLowerCase().includes(value.toLowerCase())));
         if (focusedIndex != -1) {
-            dispatch(['focus', -1]);
+            dispatch({ type: 'focus', value: -1 });
         }
         (_b = inputProps === null || inputProps === void 0 ? void 0 : inputProps.onChange) === null || _b === void 0 ? void 0 : _b.call(inputProps, event);
     }, [filterFunction, focusedIndex, inputProps, optionsRef]);
-    // When the value prop changes, update the selectedIndex
+    // When the value prop changes, update the selected index/indices
     react_1.default.useEffect(() => {
-        dispatch([
-            'select',
-            options.findIndex((option) => option.value === valueProp),
-        ]);
-    }, [options, valueProp]);
-    // Call user-defined onChange when the value actually changes
-    react_1.default.useEffect(() => {
-        var _a, _b;
-        // Prevent user-defined onChange to be called on mount
-        if (!mounted.current) {
-            mounted.current = true;
-            return;
+        if (isMultipleEnabled(valueProp, multiple)) {
+            if (valueProp) {
+                // If user provided array of selected values
+                const indexes = valueProp.map((value) => {
+                    return options.findIndex((option) => option.value === value);
+                });
+                dispatch({
+                    type: 'multiselect',
+                    value: indexes.filter((index) => index !== -1), // Add available options
+                });
+            }
+            else {
+                // if user provided one value or undefined
+                dispatch({
+                    type: 'multiselect',
+                    value: [], // Add empty list
+                });
+            }
+        }
+        else {
+            dispatch({
+                type: 'select',
+                value: options.findIndex((option) => option.value === valueProp),
+            });
+        }
+    }, [valueProp, options, multiple]);
+    const isMenuItemSelected = react_1.default.useCallback((index) => {
+        if (isMultipleEnabled(selected, multiple)) {
+            return !!selected.includes(index);
         }
-        const currentValue = (_a = optionsRef.current[selectedIndex]) === null || _a === void 0 ? void 0 : _a.value;
-        if (currentValue === valuePropRef.current || selectedIndex === -1) {
-            return;
+        else {
+            return selected === index;
+        }
+    }, [multiple, selected]);
+    // Generates new array when item is added or removed
+    const selectedChangeHandler = react_1.default.useCallback((__originalIndex, action) => {
+        if (action === 'added') {
+            return [...selected, __originalIndex];
+        }
+        else {
+            return selected.filter((index) => index !== __originalIndex);
+        }
+    }, [selected]);
+    // Calls user defined onChange
+    const onChangeHandler = react_1.default.useCallback((__originalIndex, actionType, newArray) => {
+        var _a, _b, _c, _d;
+        if (isSingleOnChange(onChangeProp.current, multiple)) {
+            (_a = onChangeProp.current) === null || _a === void 0 ? void 0 : _a.call(onChangeProp, (_b = optionsRef.current[__originalIndex]) === null || _b === void 0 ? void 0 : _b.value);
+        }
+        else {
+            actionType &&
+                newArray &&
+                ((_c = onChangeProp.current) === null || _c === void 0 ? void 0 : _c.call(onChangeProp, newArray === null || newArray === void 0 ? void 0 : newArray.map((item) => { var _a; return (_a = optionsRef.current[item]) === null || _a === void 0 ? void 0 : _a.value; }), {
+                    value: (_d = optionsRef.current[__originalIndex]) === null || _d === void 0 ? void 0 : _d.value,
+                    type: actionType,
+                }));
+        }
+    }, [multiple, onChangeProp, optionsRef]);
+    const onClickHandler = react_1.default.useCallback((__originalIndex) => {
+        if (isMultipleEnabled(selected, multiple)) {
+            const actionType = isMenuItemSelected(__originalIndex)
+                ? 'removed'
+                : 'added';
+            const newArray = selectedChangeHandler(__originalIndex, actionType);
+            dispatch({ type: 'multiselect', value: newArray });
+            onChangeHandler(__originalIndex, actionType, newArray);
+        }
+        else {
+            dispatch({ type: 'select', value: __originalIndex });
+            dispatch({ type: 'close' });
+            onChangeHandler(__originalIndex);
         }
-        (_b = onChangeProp.current) === null || _b === void 0 ? void 0 : _b.call(onChangeProp, currentValue);
-    }, [onChangeProp, optionsRef, selectedIndex, valuePropRef]);
+    }, [
+        selectedChangeHandler,
+        isMenuItemSelected,
+        multiple,
+        onChangeHandler,
+        selected,
+    ]);
     const getMenuItem = react_1.default.useCallback((option, filteredIndex) => {
         const optionId = getOptionId(option, id);
         const { __originalIndex } = optionsExtraInfoRef.current[optionId];
         const customItem = itemRenderer
             ? itemRenderer(option, {
                 isFocused: focusedIndex === __originalIndex,
-                isSelected: selectedIndex === __originalIndex,
+                isSelected: selected === __originalIndex,
                 index: __originalIndex,
                 id: optionId,
             })
@@ -166,8 +249,7 @@ const ComboBox = (props) => {
         return customItem ? (react_1.default.cloneElement(customItem, {
             onClick: (e) => {
                 var _a, _b;
-                dispatch(['select', __originalIndex]);
-                dispatch(['close']);
+                onClickHandler(__originalIndex);
                 (_b = (_a = customItem.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, e);
             },
             // ComboBox.MenuItem handles scrollIntoView, data-iui-index and iui-focused through context
@@ -182,11 +264,18 @@ const ComboBox = (props) => {
                     el === null || el === void 0 ? void 0 : el.scrollIntoView({ block: 'nearest' });
                 }
             }),
-        })) : (react_1.default.createElement(ComboBoxMenuItem_1.ComboBoxMenuItem, { key: optionId, id: optionId, ...option, isSelected: selectedIndex === __originalIndex, onClick: () => {
-                dispatch(['select', __originalIndex]);
-                dispatch(['close']);
+        })) : (react_1.default.createElement(ComboBoxMenuItem_1.ComboBoxMenuItem, { key: optionId, id: optionId, ...option, isSelected: isMenuItemSelected(__originalIndex), onClick: () => {
+                onClickHandler(__originalIndex);
             }, index: __originalIndex, "data-iui-filtered-index": filteredIndex }, option.label));
-    }, [enableVirtualization, focusedIndex, id, itemRenderer, selectedIndex]);
+    }, [
+        enableVirtualization,
+        focusedIndex,
+        id,
+        isMenuItemSelected,
+        itemRenderer,
+        onClickHandler,
+        selected,
+    ]);
     const emptyContent = react_1.default.useMemo(() => (react_1.default.createElement(react_1.default.Fragment, null, react_1.default.isValidElement(emptyStateMessage) ? (emptyStateMessage) : (react_1.default.createElement(Menu_1.MenuExtraContent, null,
         react_1.default.createElement(Typography_1.Text, { isMuted: true }, emptyStateMessage))))), [emptyStateMessage]);
     return (react_1.default.createElement(helpers_1.ComboBoxRefsContext.Provider, { value: { inputRef, menuRef, toggleButtonRef, optionsExtraInfoRef } },
@@ -196,12 +285,20 @@ const ComboBox = (props) => {
                     minWidth,
                     isOpen,
                     focusedIndex,
+                    onClickHandler,
                     enableVirtualization,
                     filteredOptions,
                     getMenuItem,
+                    multiple,
                 } },
                 react_1.default.createElement(ComboBoxInputContainer_1.ComboBoxInputContainer, { disabled: inputProps === null || inputProps === void 0 ? void 0 : inputProps.disabled, ...rest },
-                    react_1.default.createElement(ComboBoxInput_1.ComboBoxInput, { value: inputValue, ...inputProps, onChange: handleOnInput }),
+                    react_1.default.createElement(react_1.default.Fragment, null,
+                        react_1.default.createElement(ComboBoxInput_1.ComboBoxInput, { value: inputValue, ...inputProps, onChange: handleOnInput, selectTags: isMultipleEnabled(selected, multiple)
+                                ? selected.map((index) => {
+                                    const item = optionsRef.current[index];
+                                    return (react_1.default.createElement(SelectTag_1.default, { key: item.label, label: item.label }));
+                                })
+                                : undefined })),
                     react_1.default.createElement(ComboBoxEndIcon_1.ComboBoxEndIcon, { disabled: inputProps === null || inputProps === void 0 ? void 0 : inputProps.disabled, isOpen: isOpen })),
                 react_1.default.createElement(ComboBoxDropdown_1.ComboBoxDropdown, { ...dropdownMenuProps, onShow: onShow, onHide: onHide },
                     react_1.default.createElement(ComboBoxMenu_1.ComboBoxMenu, null, filteredOptions.length > 0 && !enableVirtualization

package/cjs/core/ComboBox/ComboBoxDropdown.d.ts

@@ -3,5 +3,5 @@ import { PopoverProps } from '../utils';
 declare type ComboBoxDropdownProps = PopoverProps & {
     children: JSX.Element;
 };
-export declare const ComboBoxDropdown: React.ForwardRefExoticComponent<Pick<ComboBoxDropdownProps, "disabled" | "theme" | "children" | "className" | "role" | "placement" | "trigger" | "visible" | "content" | "render" | "animateFill" | "appendTo" | "aria" | "delay" | "duration" | "followCursor" | "getReferenceClientRect" | "hideOnClick" | "ignoreAttributes" | "inlinePositioning" | "interactive" | "interactiveBorder" | "interactiveDebounce" | "moveTransition" | "offset" | "plugins" | "popperOptions" | "showOnCreate" | "sticky" | "touch" | "triggerTarget" | "onAfterUpdate" | "onBeforeUpdate" | "onCreate" | "onDestroy" | "onHidden" | "onHide" | "onMount" | "onShow" | "onShown" | "onTrigger" | "onUntrigger" | "onClickOutside" | "allowHTML" | "animation" | "arrow" | "inertia" | "maxWidth" | "zIndex" | "singleton" | "reference"> & React.RefAttributes<Element>>;
+export declare const ComboBoxDropdown: React.ForwardRefExoticComponent<Pick<ComboBoxDropdownProps, "disabled" | "theme" | "children" | "className" | "role" | "offset" | "content" | "plugins" | "placement" | "trigger" | "visible" | "render" | "animateFill" | "appendTo" | "aria" | "delay" | "duration" | "followCursor" | "getReferenceClientRect" | "hideOnClick" | "ignoreAttributes" | "inlinePositioning" | "interactive" | "interactiveBorder" | "interactiveDebounce" | "moveTransition" | "popperOptions" | "showOnCreate" | "sticky" | "touch" | "triggerTarget" | "onAfterUpdate" | "onBeforeUpdate" | "onCreate" | "onDestroy" | "onHidden" | "onHide" | "onMount" | "onShow" | "onShown" | "onTrigger" | "onUntrigger" | "onClickOutside" | "allowHTML" | "animation" | "arrow" | "inertia" | "maxWidth" | "zIndex" | "singleton" | "reference"> & React.RefAttributes<Element>>;
 export {};

package/cjs/core/ComboBox/ComboBoxDropdown.js

@@ -19,13 +19,13 @@ exports.ComboBoxDropdown = react_1.default.forwardRef((props, forwardedRef) => {
     // sync internal isOpen state with user's visible prop
     react_1.default.useEffect(() => {
         if (props.visible != undefined) {
-            dispatch([props.visible ? 'open' : 'close']);
+            dispatch({ type: props.visible ? 'open' : 'close' });
         }
     }, [dispatch, props.visible]);
     return (react_1.default.createElement(utils_1.Popover, { placement: 'bottom-start', visible: isOpen, onClickOutside: react_1.default.useCallback((_, { target }) => {
             var _a;
             if (!((_a = toggleButtonRef.current) === null || _a === void 0 ? void 0 : _a.contains(target))) {
-                dispatch(['close']);
+                dispatch({ type: 'close' });
             }
         }, [dispatch, toggleButtonRef]), animation: 'shift-away', duration: 200, reference: inputRef, ref: forwardedRef, content: children, ...rest }));
 });

package/cjs/core/ComboBox/ComboBoxEndIcon.js

@@ -24,7 +24,7 @@ exports.ComboBoxEndIcon = react_1.default.forwardRef((props, forwardedRef) => {
         }, className), onClick: (e) => {
             onClickProp === null || onClickProp === void 0 ? void 0 : onClickProp(e);
             if (!e.isDefaultPrevented()) {
-                dispatch([isOpen ? 'close' : 'open']);
+                dispatch({ type: isOpen ? 'close' : 'open' });
             }
         }, ...rest }, children !== null && children !== void 0 ? children : react_1.default.createElement(utils_1.SvgCaretDownSmall, { "aria-hidden": true })));
 });

package/cjs/core/ComboBox/ComboBoxInput.d.ts

@@ -1,5 +1,7 @@
 import React from 'react';
 export declare const ComboBoxInput: React.ForwardRefExoticComponent<{
+    selectTags?: JSX.Element[] | undefined;
+} & {
     setFocus?: boolean | undefined;
     size?: "small" | "large" | undefined;
 } & Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & React.RefAttributes<HTMLInputElement>>;

package/cjs/core/ComboBox/ComboBoxInput.js

@@ -11,10 +11,11 @@ exports.ComboBoxInput = void 0;
 const react_1 = __importDefault(require("react"));
 const Input_1 = require("../Input");
 const utils_1 = require("../utils");
+const ComboBoxMultipleContainer_1 = require("./ComboBoxMultipleContainer");
 const helpers_1 = require("./helpers");
 exports.ComboBoxInput = react_1.default.forwardRef((props, forwardedRef) => {
-    const { onKeyDown: onKeyDownProp, onFocus: onFocusProp, ...rest } = props;
-    const { isOpen, id, focusedIndex, enableVirtualization } = (0, utils_1.useSafeContext)(helpers_1.ComboBoxStateContext);
+    const { onKeyDown: onKeyDownProp, onFocus: onFocusProp, selectTags, ...rest } = props;
+    const { isOpen, id, focusedIndex, enableVirtualization, multiple, onClickHandler, } = (0, utils_1.useSafeContext)(helpers_1.ComboBoxStateContext);
     const dispatch = (0, utils_1.useSafeContext)(helpers_1.ComboBoxActionContext);
     const { inputRef, menuRef, optionsExtraInfoRef } = (0, utils_1.useSafeContext)(helpers_1.ComboBoxRefsContext);
     const refs = (0, utils_1.useMergedRefs)(inputRef, forwardedRef);
@@ -34,17 +35,17 @@ exports.ComboBoxInput = react_1.default.forwardRef((props, forwardedRef) => {
             case 'ArrowDown': {
                 event.preventDefault();
                 if (!isOpen) {
-                    return dispatch(['open']);
+                    return dispatch({ type: 'open' });
                 }
                 if (length === 0) {
                     return;
                 }
                 if (focusedIndexRef.current === -1) {
                     const currentElement = (_b = menuRef.current) === null || _b === void 0 ? void 0 : _b.querySelector('[data-iui-index]');
-                    return dispatch([
-                        'focus',
-                        Number((_c = currentElement === null || currentElement === void 0 ? void 0 : currentElement.getAttribute('data-iui-index')) !== null && _c !== void 0 ? _c : 0),
-                    ]);
+                    return dispatch({
+                        type: 'focus',
+                        value: Number((_c = currentElement === null || currentElement === void 0 ? void 0 : currentElement.getAttribute('data-iui-index')) !== null && _c !== void 0 ? _c : 0),
+                    });
                 }
                 // If virtualization is enabled, dont let round scrolling
                 if (enableVirtualization &&
@@ -57,7 +58,7 @@ exports.ComboBoxInput = react_1.default.forwardRef((props, forwardedRef) => {
                     const nextElement = (_g = currentElement === null || currentElement === void 0 ? void 0 : currentElement.nextElementSibling) !== null && _g !== void 0 ? _g : (_h = menuRef.current) === null || _h === void 0 ? void 0 : _h.querySelector('[data-iui-index]');
                     nextIndex = Number(nextElement === null || nextElement === void 0 ? void 0 : nextElement.getAttribute('data-iui-index'));
                     if ((nextElement === null || nextElement === void 0 ? void 0 : nextElement.ariaDisabled) !== 'true') {
-                        return dispatch(['focus', nextIndex]);
+                        return dispatch({ type: 'focus', value: nextIndex });
                     }
                 } while (nextIndex !== focusedIndexRef.current);
                 break;
@@ -65,7 +66,7 @@ exports.ComboBoxInput = react_1.default.forwardRef((props, forwardedRef) => {
             case 'ArrowUp': {
                 event.preventDefault();
                 if (!isOpen) {
-                    return dispatch(['open']);
+                    return dispatch({ type: 'open' });
                 }
                 if (length === 0) {
                     return;
@@ -76,10 +77,10 @@ exports.ComboBoxInput = react_1.default.forwardRef((props, forwardedRef) => {
                     return;
                 }
                 if (focusedIndexRef.current === -1) {
-                    return dispatch([
-                        'focus',
-                        (_m = (_l = Object.values(optionsExtraInfoRef.current)) === null || _l === void 0 ? void 0 : _l[length - 1].__originalIndex) !== null && _m !== void 0 ? _m : -1,
-                    ]);
+                    return dispatch({
+                        type: 'focus',
+                        value: (_m = (_l = Object.values(optionsExtraInfoRef.current)) === null || _l === void 0 ? void 0 : _l[length - 1].__originalIndex) !== null && _m !== void 0 ? _m : -1,
+                    });
                 }
                 let prevIndex = focusedIndexRef.current;
                 do {
@@ -87,7 +88,7 @@ exports.ComboBoxInput = react_1.default.forwardRef((props, forwardedRef) => {
                     const prevElement = (_p = currentElement === null || currentElement === void 0 ? void 0 : currentElement.previousElementSibling) !== null && _p !== void 0 ? _p : (_q = menuRef.current) === null || _q === void 0 ? void 0 : _q.querySelector('[data-iui-index]:last-of-type');
                     prevIndex = Number(prevElement === null || prevElement === void 0 ? void 0 : prevElement.getAttribute('data-iui-index'));
                     if ((prevElement === null || prevElement === void 0 ? void 0 : prevElement.ariaDisabled) !== 'true') {
-                        return dispatch(['focus', prevIndex]);
+                        return dispatch({ type: 'focus', value: prevIndex });
                     }
                 } while (prevIndex !== focusedIndexRef.current);
                 break;
@@ -95,21 +96,32 @@ exports.ComboBoxInput = react_1.default.forwardRef((props, forwardedRef) => {
             case 'Enter': {
                 event.preventDefault();
                 if (isOpen) {
-                    dispatch(['select', focusedIndexRef.current]);
-                    dispatch(['close']);
+                    if (multiple) {
+                        // Keep menu open when multiselect is enabled and user selects an item
+                        if (focusedIndexRef.current > -1) {
+                            onClickHandler === null || onClickHandler === void 0 ? void 0 : onClickHandler(focusedIndexRef.current);
+                        }
+                        else {
+                            dispatch({ type: 'close' });
+                        }
+                    }
+                    else {
+                        onClickHandler === null || onClickHandler === void 0 ? void 0 : onClickHandler(focusedIndexRef.current);
+                        dispatch({ type: 'close' });
+                    }
                 }
                 else {
-                    dispatch(['open']);
+                    dispatch({ type: 'open' });
                 }
                 break;
             }
             case 'Escape': {
                 event.preventDefault();
-                dispatch(['close']);
+                dispatch({ type: 'close' });
                 break;
             }
             case 'Tab':
-                dispatch(['close']);
+                dispatch({ type: 'close' });
                 break;
         }
     }, [
@@ -117,15 +129,20 @@ exports.ComboBoxInput = react_1.default.forwardRef((props, forwardedRef) => {
         enableVirtualization,
         isOpen,
         menuRef,
+        multiple,
+        onClickHandler,
         onKeyDownProp,
         optionsExtraInfoRef,
     ]);
     const handleFocus = react_1.default.useCallback((event) => {
-        dispatch(['open']);
+        dispatch({ type: 'open' });
         onFocusProp === null || onFocusProp === void 0 ? void 0 : onFocusProp(event);
     }, [dispatch, onFocusProp]);
-    return (react_1.default.createElement(Input_1.Input, { ref: refs, onKeyDown: handleKeyDown, onFocus: handleFocus, "aria-activedescendant": isOpen && focusedIndex != undefined && focusedIndex > -1
-            ? getIdFromIndex(focusedIndex)
-            : undefined, role: 'combobox', "aria-controls": isOpen ? `${id}-list` : undefined, "aria-autocomplete": 'list', spellCheck: false, autoCapitalize: 'none', autoCorrect: 'off', ...rest }));
+    const [tagContainerWidthRef, tagContainerWidth] = (0, utils_1.useContainerWidth)();
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(Input_1.Input, { ref: refs, onKeyDown: handleKeyDown, onFocus: handleFocus, "aria-activedescendant": isOpen && focusedIndex != undefined && focusedIndex > -1
+                ? getIdFromIndex(focusedIndex)
+                : undefined, role: 'combobox', "aria-controls": isOpen ? `${id}-list` : undefined, "aria-autocomplete": 'list', spellCheck: false, autoCapitalize: 'none', autoCorrect: 'off', style: multiple ? { paddingLeft: tagContainerWidth + 18 } : {}, ...rest }),
+        multiple && selectTags && (react_1.default.createElement(ComboBoxMultipleContainer_1.ComboBoxMultipleContainer, { ref: tagContainerWidthRef, selectedItems: selectTags }))));
 });
 exports.ComboBoxInput.displayName = 'ComboBoxInput';

package/cjs/core/ComboBox/ComboBoxMenu.js

@@ -14,8 +14,8 @@ const Menu_1 = require("../Menu");
 const Surface_1 = require("../Surface");
 const utils_1 = require("../utils");
 const helpers_1 = require("./helpers");
+const isOverflowOverlaySupported = () => { var _a, _b, _c; return (_c = (_b = (_a = (0, utils_1.getWindow)()) === null || _a === void 0 ? void 0 : _a.CSS) === null || _b === void 0 ? void 0 : _b.supports) === null || _c === void 0 ? void 0 : _c.call(_b, 'overflow: overlay'); };
 const VirtualizedComboBoxMenu = react_1.default.forwardRef(({ children, className, style, ...rest }, forwardedRef) => {
-    var _a, _b, _c;
     const { minWidth, id, filteredOptions, getMenuItem, focusedIndex } = (0, utils_1.useSafeContext)(helpers_1.ComboBoxStateContext);
     const { menuRef } = (0, utils_1.useSafeContext)(helpers_1.ComboBoxRefsContext);
     const virtualItemRenderer = react_1.default.useCallback((index) => filteredOptions.length > 0
@@ -37,16 +37,17 @@ const VirtualizedComboBoxMenu = react_1.default.forwardRef(({ children, classNam
         itemRenderer: virtualItemRenderer,
         scrollToIndex: focusedVisibleIndex,
     });
-    const overflowY = ((_c = (_b = (_a = (0, utils_1.getWindow)()) === null || _a === void 0 ? void 0 : _a.CSS) === null || _b === void 0 ? void 0 : _b.supports) === null || _c === void 0 ? void 0 : _c.call(_b, 'overflow-x: overlay'))
-        ? { overflowY: 'overlay' }
-        : { overflowY: 'auto' };
-    const styles = react_1.default.useMemo(() => ({
+    const surfaceStyles = {
         minWidth,
         maxWidth: `min(${minWidth * 2}px, 90vw)`,
-    }), [minWidth]);
-    return (react_1.default.createElement(Surface_1.Surface, { elevation: 1, style: { ...styles, ...overflowY, ...style }, ...rest },
+        // max-height must be on the outermost element for virtual scroll
+        maxHeight: 'calc((var(--iui-component-height) - 1px) * 8.5)',
+        overflowY: isOverflowOverlaySupported() ? 'overlay' : 'auto',
+        ...style,
+    };
+    return (react_1.default.createElement(Surface_1.Surface, { style: surfaceStyles, ...rest },
         react_1.default.createElement("div", { ...outerProps },
-            react_1.default.createElement(Menu_1.Menu, { id: `${id}-list`, setFocus: false, role: 'listbox', ref: (0, utils_1.mergeRefs)(menuRef, innerProps.ref, forwardedRef), className: (0, classnames_1.default)('iui-scroll', className), style: innerProps.style }, visibleChildren))));
+            react_1.default.createElement(Menu_1.Menu, { id: `${id}-list`, setFocus: false, role: 'listbox', ref: (0, utils_1.mergeRefs)(menuRef, innerProps.ref, forwardedRef), className: className, style: innerProps.style }, visibleChildren))));
 });
 exports.ComboBoxMenu = react_1.default.forwardRef((props, forwardedRef) => {
     const { className, style, ...rest } = props;

package/cjs/core/ComboBox/ComboBoxMenuItem.js

@@ -13,7 +13,7 @@ const react_1 = __importDefault(require("react"));
 const utils_1 = require("../utils");
 const helpers_1 = require("./helpers");
 exports.ComboBoxMenuItem = react_1.default.memo(react_1.default.forwardRef((props, forwardedRef) => {
-    const { children, isSelected, disabled, value, onClick, sublabel, size = !!sublabel ? 'large' : 'default', icon, badge, className, role = 'menuitem', index, ...rest } = props;
+    const { children, isSelected, disabled, value, onClick, sublabel, size = !!sublabel ? 'large' : 'default', icon, badge, className, role = 'option', index, ...rest } = props;
     const { focusedIndex, enableVirtualization } = (0, utils_1.useSafeContext)(helpers_1.ComboBoxStateContext);
     const focusRef = (el) => {
         if (!enableVirtualization && focusedIndex === index) {

package/cjs/core/ComboBox/ComboBoxMultipleContainer.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const ComboBoxMultipleContainer: React.ForwardRefExoticComponent<{
+    selectedItems?: React.ReactNode[] | undefined;
+} & Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "children"> & React.RefAttributes<HTMLDivElement>>;

package/cjs/core/ComboBox/ComboBoxMultipleContainer.js

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ComboBoxMultipleContainer = void 0;
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+const react_1 = __importDefault(require("react"));
+const SelectTagContainer_1 = __importDefault(require("../Select/SelectTagContainer"));
+exports.ComboBoxMultipleContainer = react_1.default.forwardRef((props, ref) => {
+    const { selectedItems = [], ...rest } = props;
+    return react_1.default.createElement(SelectTagContainer_1.default, { ref: ref, tags: selectedItems, ...rest });
+});
+exports.ComboBoxMultipleContainer.displayName = 'ComboBoxMultipleContainer';