@itwin/itwinui-react 1.37.3 → 1.38.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+## [1.38.0](https://www.github.com/iTwin/iTwinUI-react/compare/v1.37.3...v1.38.0) (2022-05-23)
+
+### What's new
+
+* **ComboBox:** Full component refactor to improve performance by using components composition ([#618](https://www.github.com/iTwin/iTwinUI-react/issues/618)) ([5d56809](https://www.github.com/iTwin/iTwinUI-react/commit/5d56809c46ad312402669f9cb2dbf6c8d3c733ad))
+
+### Fixes
+
+* **Table:** Allow 'false' as valid filter value ([#664](https://www.github.com/iTwin/iTwinUI-react/issues/664)) ([628cc26](https://www.github.com/iTwin/iTwinUI-react/commit/628cc26afc044e1b3f1c09b2489b31fe15b34de1))
+* **Toaster:** Do not call `ReactDOM` render multiple times ([#667](https://www.github.com/iTwin/iTwinUI-react/issues/667)) ([195a857](https://www.github.com/iTwin/iTwinUI-react/commit/195a8573157ce6588e0edb40569770ffa4636584))
+* Visuals changes after CSS update ([#678](https://www.github.com/iTwin/iTwinUI-react/issues/678)) ([16b9310](https://www.github.com/iTwin/iTwinUI-react/commit/16b93106c8d3787cc3f6bdee469604db6167ccf0))
+  - **Select:** Arrow color
+  - **Tabs:** Description color
+  - **Skeleton:** Background color
+  - **Checkbox:** Add border to disabled state
+
 ### [1.37.3](https://www.github.com/iTwin/iTwinUI-react/compare/v1.37.2...v1.37.3) (2022-05-06)
 
 ### Fixes

package/cjs/core/Breadcrumbs/Breadcrumbs.js

@@ -67,9 +67,7 @@ exports.Breadcrumbs = react_1.default.forwardRef(function (props, ref) {
         var _b;
         var index = _a.index;
         var item = items[index];
-        return (react_1.default.createElement("li", { className: (0, classnames_1.default)('iui-breadcrumbs-item', {
-                'iui-current': currentIndex === index,
-            }) }, react_1.default.isValidElement(item)
+        return (react_1.default.createElement("li", { className: 'iui-breadcrumbs-item iui-breadcrumbs-item-overrides' }, react_1.default.isValidElement(item)
             ? react_1.default.cloneElement(item, {
                 'aria-current': ((_b = item.props['aria-current']) !== null && _b !== void 0 ? _b : currentIndex === index)
                     ? 'location'
@@ -83,8 +81,8 @@ exports.Breadcrumbs = react_1.default.forwardRef(function (props, ref) {
                 react_1.default.createElement(ListItem, { index: 0 }),
                 react_1.default.createElement(Separator, null))),
             items.length - visibleCount > 0 && (react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement("li", { className: 'iui-breadcrumbs-item' },
-                    react_1.default.createElement("span", null, "\u2026")),
+                react_1.default.createElement("li", { className: 'iui-breadcrumbs-item iui-breadcrumbs-item-overrides' },
+                    react_1.default.createElement("span", { className: 'iui-breadcrumbs-text' }, "\u2026")),
                 react_1.default.createElement(Separator, null))),
             items
                 .slice(visibleCount > 1

package/cjs/core/ColorPicker/ColorSwatch.d.ts

@@ -17,5 +17,5 @@ export declare type ColorSwatchProps = {
  * <ColorSwatch color='#23450b' onClick={onClick}/>
  * <ColorSwatch color={{ r: 255, g: 255, b: 0 }} onClick={onClick}/>
  */
-export declare const ColorSwatch: React.ForwardRefExoticComponent<Pick<ColorSwatchProps, "dir" | "slot" | "style" | "title" | "id" | "aria-disabled" | "role" | "children" | "className" | "onClick" | "accessKey" | "draggable" | "hidden" | "lang" | "translate" | "prefix" | "contentEditable" | "inputMode" | "tabIndex" | "onFocus" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "color" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "contextMenu" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "is" | "isActive"> & React.RefAttributes<HTMLDivElement>>;
+export declare const ColorSwatch: React.ForwardRefExoticComponent<Pick<ColorSwatchProps, "dir" | "slot" | "style" | "title" | "id" | "aria-disabled" | "children" | "role" | "className" | "onClick" | "accessKey" | "draggable" | "hidden" | "lang" | "translate" | "prefix" | "contentEditable" | "inputMode" | "tabIndex" | "onFocus" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "color" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "contextMenu" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "is" | "isActive"> & React.RefAttributes<HTMLDivElement>>;
 export default ColorSwatch;

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

@@ -40,8 +40,10 @@ export declare type ComboBoxProps<T> = {
     emptyStateMessage?: string;
     /**
      * A custom item renderer can be specified to control the rendering.
-     * This function should ideally return a customized version of `MenuItem`,
-     * otherwise you will need to make sure to provide styling for the `isFocused` state.
+     *
+     * For keyboard navigation to work, the returned element should use the `id` provided by this function.
+     * The `isFocused` state is calculated using this `id` and can be used for specifying the focus styling.
+     * If a `MenuItem` is returned, then focus styling is automatically handled.
      */
     itemRenderer?: (option: SelectOption<T>, states: {
         isSelected: boolean;

package/cjs/core/ComboBox/ComboBox.js

@@ -32,13 +32,22 @@ exports.ComboBox = void 0;
  *--------------------------------------------------------------------------------------------*/
 var react_1 = __importDefault(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
-var Input_1 = require("../Input");
 var Menu_1 = require("../Menu");
 var Typography_1 = require("../Typography");
 var utils_1 = require("../utils");
-var CaretDownSmall_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/CaretDownSmall"));
 require("tippy.js/animations/shift-away.css");
-var StatusMessage_1 = require("../StatusMessage");
+var helpers_1 = require("./helpers");
+var ComboBoxDropdown_1 = require("./ComboBoxDropdown");
+var ComboBoxEndIcon_1 = require("./ComboBoxEndIcon");
+var ComboBoxInput_1 = require("./ComboBoxInput");
+var ComboBoxInputContainer_1 = require("./ComboBoxInputContainer");
+var ComboBoxMenu_1 = require("./ComboBoxMenu");
+var ComboBoxMenuItem_1 = require("./ComboBoxMenuItem");
+/** Returns either `option.id` or derives a stable id using `idPrefix` and `option.label` (without whitespace) */
+var getOptionId = function (option, idPrefix) {
+    var _a;
+    return (_a = option.id) !== null && _a !== void 0 ? _a : "".concat(idPrefix, "-option-").concat(option.label.replace(/\s/g, '-'));
+};
 /**
  * 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.
@@ -53,273 +62,147 @@ var StatusMessage_1 = require("../StatusMessage");
  * />
  */
 var ComboBox = function (props) {
-    var options = props.options, value = props.value, onChange = props.onChange, filterFunction = props.filterFunction, className = props.className, inputProps = props.inputProps, dropdownMenuProps = props.dropdownMenuProps, message = props.message, status = props.status, _a = props.emptyStateMessage, emptyStateMessage = _a === void 0 ? 'No options found' : _a, itemRenderer = props.itemRenderer, rest = __rest(props, ["options", "value", "onChange", "filterFunction", "className", "inputProps", "dropdownMenuProps", "message", "status", "emptyStateMessage", "itemRenderer"]);
+    var _a;
+    var options = props.options, valueProp = props.value, onChange = props.onChange, filterFunction = props.filterFunction, inputProps = props.inputProps, dropdownMenuProps = props.dropdownMenuProps, _b = props.emptyStateMessage, emptyStateMessage = _b === void 0 ? 'No options found' : _b, itemRenderer = props.itemRenderer, rest = __rest(props, ["options", "value", "onChange", "filterFunction", "inputProps", "dropdownMenuProps", "emptyStateMessage", "itemRenderer"]);
     // Generate a stateful random id if not specified
     var id = react_1.default.useState(function () {
         var _a, _b;
         return (_b = (_a = props.id) !== null && _a !== void 0 ? _a : ((inputProps === null || inputProps === void 0 ? void 0 : inputProps.id) && "".concat(inputProps.id, "-cb"))) !== null && _b !== void 0 ? _b : "iui-cb-".concat((0, utils_1.getRandomValue)(10));
     })[0];
     (0, utils_1.useTheme)();
-    /** Generates a memoized id for an option, given the index from original list */
-    var getOptionId = react_1.default.useCallback(function (index) {
-        var _a;
-        return (_a = options[index].id) !== null && _a !== void 0 ? _a : "".concat(id, "-option").concat(options.findIndex(function (_a) {
-            var value = _a.value;
-            return value === options[index].value;
-        }));
-    }, [options, id]);
-    var userOnChange = react_1.default.useRef(onChange);
+    // Refs get set in subcomponents
+    var inputRef = react_1.default.useRef(null);
+    var menuRef = react_1.default.useRef(null);
+    var toggleButtonRef = react_1.default.useRef(null);
+    // Latest value of the onChange prop
+    var onChangeProp = react_1.default.useRef(onChange);
     react_1.default.useEffect(function () {
-        userOnChange.current = onChange;
+        onChangeProp.current = onChange;
     }, [onChange]);
-    var memoizedItems = react_1.default.useMemo(function () {
-        return options.map(function (option, index) {
-            var label = option.label, value = option.value, rest = __rest(option, ["label", "value"]);
-            var additionalProps = {
-                value: value,
-                role: 'option',
-                onClick: function () {
-                    var _a;
-                    setSelectedValue(value);
-                    (_a = userOnChange.current) === null || _a === void 0 ? void 0 : _a.call(userOnChange, value);
-                    setIsOpen(false);
-                },
+    // Record to store all extra information (e.g. original indexes), where the key is the id of the option
+    var optionsExtraInfoRef = react_1.default.useRef({});
+    // Clear the extra info when the options change so that it can be reinitialized below
+    react_1.default.useEffect(function () {
+        optionsExtraInfoRef.current = {};
+    }, [options]);
+    // Initialize the extra info only if it is not already initialized
+    if (options.length > 0 &&
+        Object.keys(optionsExtraInfoRef.current).length === 0) {
+        options.forEach(function (option, index) {
+            optionsExtraInfoRef.current[getOptionId(option, id)] = {
+                __originalIndex: index,
             };
-            if (itemRenderer) {
-                return react_1.default.cloneElement(itemRenderer(option, {
-                    id: getOptionId(index),
-                    index: index,
-                    isSelected: false,
-                    isFocused: false,
-                }), additionalProps);
-            }
-            return (react_1.default.createElement(Menu_1.MenuItem, __assign({ id: getOptionId(index), key: getOptionId(index) }, additionalProps, rest), label));
         });
-    }, [options, getOptionId, itemRenderer]);
-    var inputRef = react_1.default.useRef(null);
-    var menuRef = react_1.default.useRef(null);
-    var toggleButtonRef = react_1.default.useRef(null);
-    var _b = react_1.default.useState(false), isOpen = _b[0], setIsOpen = _b[1];
+    }
+    // Reducer where all the component-wide state is stored
+    var _c = react_1.default.useReducer(helpers_1.comboBoxReducer, {
+        isOpen: false,
+        selectedIndex: -1,
+        focusedIndex: -1,
+    }), _d = _c[0], isOpen = _d.isOpen, selectedIndex = _d.selectedIndex, focusedIndex = _d.focusedIndex, dispatch = _c[1];
+    react_1.default.useEffect(function () {
+        var _a, _b;
+        // When the dropdown opens
+        if (isOpen) {
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); // Focus the input
+            setFilteredOptions(options); // Reset the filtered list
+        }
+        // When the dropdown closes
+        else {
+            // Reset the focused index
+            dispatch(['focus']);
+            // Reset the input value
+            setInputValue(selectedIndex != undefined && selectedIndex >= 0
+                ? (_b = options[selectedIndex]) === null || _b === void 0 ? void 0 : _b.label
+                : '');
+        }
+    }, [isOpen, options, selectedIndex]);
     // Set min-width of menu to be same as input
-    var _c = react_1.default.useState(0), minWidth = _c[0], setMinWidth = _c[1];
+    var _e = react_1.default.useState(0), minWidth = _e[0], setMinWidth = _e[1];
     react_1.default.useEffect(function () {
         if (inputRef.current) {
             setMinWidth(inputRef.current.offsetWidth);
         }
     }, [isOpen]);
-    var _d = react_1.default.useState(options), filteredOptions = _d[0], setFilteredOptions = _d[1];
+    // Initialize filtered options to the latest value options
+    var _f = react_1.default.useState(options), filteredOptions = _f[0], setFilteredOptions = _f[1];
     react_1.default.useEffect(function () {
         setFilteredOptions(options);
     }, [options]);
-    var _e = react_1.default.useState(function () {
-        return options.findIndex(function (option) { return value === option.value; });
-    }), focusedIndex = _e[0], setFocusedIndex = _e[1];
-    // Maintain internal selected value state synced with `value` prop
-    var _f = react_1.default.useState(value), selectedValue = _f[0], setSelectedValue = _f[1];
+    // Filter options based on input value
+    var _g = react_1.default.useState((_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps.value) !== null && _a !== void 0 ? _a : ''), inputValue = _g[0], setInputValue = _g[1];
+    var handleOnInput = react_1.default.useCallback(function (event) {
+        var _a, _b;
+        var value = event.currentTarget.value;
+        setInputValue(value);
+        dispatch(['open']); // reopen when typing
+        setFilteredOptions((_a = filterFunction === null || filterFunction === void 0 ? void 0 : filterFunction(options, value)) !== null && _a !== void 0 ? _a : options.filter(function (option) {
+            return option.label.toLowerCase().includes(value.toLowerCase());
+        }));
+        (_b = inputProps === null || inputProps === void 0 ? void 0 : inputProps.onChange) === null || _b === void 0 ? void 0 : _b.call(inputProps, event);
+    }, [filterFunction, inputProps, options]);
+    // Reset focused item when filteredOptions change
     react_1.default.useEffect(function () {
-        setSelectedValue(value);
-    }, [value]);
-    // Controlled input value
-    var _g = react_1.default.useState(''), inputValue = _g[0], setInputValue = _g[1];
-    var onInput = react_1.default.useCallback(function (event) {
-        var _a;
-        setInputValue(event.target.value);
-        (_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps.onChange) === null || _a === void 0 ? void 0 : _a.call(inputProps, event);
-    }, [inputProps]);
-    // update inputValue and focusedIndex every time selected value changes
+        dispatch(['focus']);
+    }, [filteredOptions]);
+    // When the value prop changes, update the selectedIndex
     react_1.default.useEffect(function () {
-        var _a;
-        var selectedOption = options.find(function (_a) {
-            var value = _a.value;
-            return value === selectedValue;
-        });
-        setInputValue((_a = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) !== null && _a !== void 0 ? _a : '');
-        setFocusedIndex(selectedOption ? options.indexOf(selectedOption) : -1);
-    }, [selectedValue, options]);
-    // Filter options and update focus when input value changes
+        dispatch([
+            'select',
+            options.findIndex(function (option) { return option.value === valueProp; }),
+        ]);
+    }, [options, valueProp]);
+    // Call user-defined onChange when the value actually changes
     react_1.default.useEffect(function () {
-        var _a;
-        if (!isOpen) {
-            return;
-        }
-        // if input is empty or same as selected value, show the whole list
-        var selectedOption = options.find(function (_a) {
-            var value = _a.value;
-            return value === selectedValue;
-        });
-        if (!inputValue || (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) === inputValue) {
-            setFilteredOptions(options);
-            return;
-        }
-        var _filteredOptions = (_a = filterFunction === null || filterFunction === void 0 ? void 0 : filterFunction(options, inputValue)) !== null && _a !== void 0 ? _a : options.filter(function (option) {
-            return option.label.toLowerCase().includes(inputValue === null || inputValue === void 0 ? void 0 : inputValue.trim().toLowerCase());
-        });
-        setFilteredOptions(_filteredOptions);
-        setFocusedIndex(function (previouslyFocusedIndex) {
-            if (_filteredOptions.includes(options[previouslyFocusedIndex])) {
-                return previouslyFocusedIndex;
-            }
-            else if (_filteredOptions.find(function (_a) {
-                var value = _a.value;
-                return value === selectedValue;
-            })) {
-                return options.findIndex(function (_a) {
-                    var value = _a.value;
-                    return value === selectedValue;
-                });
-            }
-            else {
-                return -1; // reset focus if previously focused or selected value is not in filtered list
+        var _a, _b;
+        if (selectedIndex != undefined && selectedIndex >= 0) {
+            var value = (_a = options[selectedIndex]) === null || _a === void 0 ? void 0 : _a.value;
+            if (value === valueProp) {
+                return;
             }
-        });
-    }, [inputValue, options, selectedValue, isOpen, filterFunction]);
-    var onKeyDown = react_1.default.useCallback(function (event) {
-        var _a;
-        var focusableOptions = (0, utils_1.getFocusableElements)(menuRef.current);
-        var focusedIndexInFilteredList = focusableOptions.findIndex(function (_a) {
-            var _b;
-            var id = _a.id;
-            return id === ((_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.getAttribute('aria-activedescendant'));
-        });
-        switch (event.key) {
-            case 'ArrowDown':
-                if (isOpen) {
-                    var nextIndex_1 = Math.min(focusedIndexInFilteredList + 1, focusableOptions.length - 1);
-                    setFocusedIndex(options.findIndex(function (_, index) {
-                        return getOptionId(index) === focusableOptions[nextIndex_1].id;
-                    }));
-                }
-                else {
-                    setIsOpen(true); // reopen menu if closed when typing
-                }
-                event.preventDefault();
-                event.stopPropagation();
-                break;
-            case 'ArrowUp':
-                if (isOpen) {
-                    var previousIndex_1 = Math.max(focusedIndexInFilteredList - 1, 0);
-                    setFocusedIndex(options.findIndex(function (_, index) {
-                        return getOptionId(index) === focusableOptions[previousIndex_1].id;
-                    }));
-                }
-                event.preventDefault();
-                event.stopPropagation();
-                break;
-            case 'Enter':
-                if (isOpen) {
-                    setSelectedValue(options[focusedIndex].value);
-                    (_a = userOnChange.current) === null || _a === void 0 ? void 0 : _a.call(userOnChange, options[focusedIndex].value);
-                }
-                setIsOpen(function (open) { return !open; });
-                event.preventDefault();
-                event.stopPropagation();
-                break;
-            case 'Escape':
-                setIsOpen(false);
-                event.preventDefault();
-                event.stopPropagation();
-                break;
-            case 'Tab':
-                setIsOpen(false);
-                break;
-            default:
-                if (!isOpen) {
-                    setIsOpen(true); // reopen menu if closed when typing
-                }
-                break;
+            (_b = onChangeProp.current) === null || _b === void 0 ? void 0 : _b.call(onChangeProp, value);
         }
-    }, [focusedIndex, isOpen, options, getOptionId]);
-    var menuItems = react_1.default.useMemo(function () {
-        if (filteredOptions.length === 0) {
-            return [
-                react_1.default.createElement(Menu_1.MenuExtraContent, { key: 0 },
-                    react_1.default.createElement(Typography_1.Text, { isMuted: true }, emptyStateMessage)),
-            ];
-        }
-        return filteredOptions.map(function (option) {
-            var _a;
-            var index = options.findIndex(function (_a) {
-                var value = _a.value;
-                return option.value === value;
-            });
-            if (index < 0) {
-                return react_1.default.createElement(react_1.default.Fragment, null);
-            }
-            var id = getOptionId(index);
-            var isSelected = selectedValue === option.value;
-            var isFocused = focusedIndex === index;
-            var focusScrollRef = function (el) {
-                return isFocused && (el === null || el === void 0 ? void 0 : el.scrollIntoView({ block: 'nearest' }));
-            };
-            if (isSelected || isFocused) {
-                var item = (_a = itemRenderer === null || itemRenderer === void 0 ? void 0 : itemRenderer(option, { index: index, id: id, isSelected: isSelected, isFocused: isFocused })) !== null && _a !== void 0 ? _a : react_1.default.cloneElement(memoizedItems[index], { isSelected: isSelected });
-                return react_1.default.cloneElement(item, {
-                    className: (0, classnames_1.default)({ 'iui-focused': isFocused }, item.props.className),
-                    ref: (0, utils_1.mergeRefs)(focusScrollRef, item.props.ref),
-                    value: option.value,
-                    role: 'option',
-                    onClick: function () {
-                        var _a;
-                        setSelectedValue(option.value);
-                        (_a = userOnChange.current) === null || _a === void 0 ? void 0 : _a.call(userOnChange, option.value);
-                        setIsOpen(false);
-                    },
-                });
-            }
-            return memoizedItems[index];
-        });
-    }, [
-        filteredOptions,
-        emptyStateMessage,
-        options,
-        getOptionId,
-        selectedValue,
-        focusedIndex,
-        itemRenderer,
-        memoizedItems,
-    ]);
-    return (react_1.default.createElement(utils_1.InputContainer, __assign({ className: className, status: status, statusMessage: typeof message === 'string' ? (react_1.default.createElement(StatusMessage_1.StatusMessage, { status: status }, message)) : (react_1.default.isValidElement(message) &&
-            react_1.default.cloneElement(message, { status: status })) }, rest, { id: id }),
-        react_1.default.createElement("div", { className: 'iui-input-with-icon' },
-            react_1.default.createElement(utils_1.Popover, __assign({ placement: 'bottom-start', visible: isOpen, onClickOutside: function (_, _a) {
-                    var _b;
-                    var target = _a.target;
-                    if (!((_b = toggleButtonRef.current) === null || _b === void 0 ? void 0 : _b.contains(target))) {
-                        setIsOpen(false);
-                    }
-                }, animation: 'shift-away', duration: 200 }, dropdownMenuProps, { content: react_1.default.createElement(Menu_1.Menu, { id: "".concat(id, "-list"), className: 'iui-scroll', style: {
-                        minWidth: minWidth,
-                        maxWidth: "min(".concat(minWidth * 2, "px, 90vw)"),
-                        maxHeight: 300,
-                    }, setFocus: false, role: 'listbox', ref: menuRef }, menuItems), onHide: function (instance) {
-                    var _a;
-                    var selectedIndex = options.findIndex(function (_a) {
-                        var value = _a.value;
-                        return value === selectedValue;
-                    });
-                    setFocusedIndex(selectedIndex);
-                    if (selectedIndex > -1) {
-                        setInputValue(options[selectedIndex].label); // update input value to be same as selected value
-                    }
-                    (_a = dropdownMenuProps === null || dropdownMenuProps === void 0 ? void 0 : dropdownMenuProps.onHide) === null || _a === void 0 ? void 0 : _a.call(dropdownMenuProps, instance);
-                } }),
-                react_1.default.createElement(Input_1.Input, __assign({ ref: inputRef, onKeyDown: onKeyDown, onFocus: function () { return setIsOpen(true); }, value: inputValue, "aria-activedescendant": isOpen && focusedIndex > -1
-                        ? getOptionId(focusedIndex)
-                        : undefined, role: 'combobox', "aria-controls": isOpen ? "".concat(id, "-list") : undefined, "aria-autocomplete": 'list', spellCheck: false, autoCapitalize: 'none', autoCorrect: 'off' }, inputProps, { onChange: onInput }))),
-            react_1.default.createElement("span", { ref: toggleButtonRef, className: (0, classnames_1.default)('iui-end-icon', {
-                    'iui-actionable': !(inputProps === null || inputProps === void 0 ? void 0 : inputProps.disabled),
-                    'iui-disabled': inputProps === null || inputProps === void 0 ? void 0 : inputProps.disabled,
-                    'iui-open': isOpen,
-                }), onClick: function () {
-                    var _a;
-                    if (isOpen) {
-                        setIsOpen(false);
-                    }
-                    else {
-                        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-                    }
-                } },
-                react_1.default.createElement(CaretDownSmall_1.default, { "aria-hidden": true })))));
+    }, [options, selectedIndex, valueProp]);
+    var getMenuItem = react_1.default.useCallback(function (option) {
+        var optionId = getOptionId(option, id);
+        var __originalIndex = optionsExtraInfoRef.current[optionId].__originalIndex;
+        var customItem = itemRenderer
+            ? itemRenderer(option, {
+                isFocused: focusedIndex === __originalIndex,
+                isSelected: selectedIndex === __originalIndex,
+                index: __originalIndex,
+                id: optionId,
+            })
+            : null;
+        return customItem ? (react_1.default.cloneElement(customItem, {
+            onClick: function (e) {
+                var _a, _b;
+                dispatch(['select', __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
+            // but we still need to pass them here for backwards compatibility with MenuItem
+            className: (0, classnames_1.default)(customItem.props.className, {
+                'iui-focused': focusedIndex === __originalIndex,
+            }),
+            'data-iui-index': __originalIndex,
+            ref: (0, utils_1.mergeRefs)(customItem.props.ref, function (el) {
+                // will need to check for virtualization here too
+                if (focusedIndex === __originalIndex) {
+                    el === null || el === void 0 ? void 0 : el.scrollIntoView({ block: 'nearest' });
+                }
+            }),
+        })) : (react_1.default.createElement(ComboBoxMenuItem_1.ComboBoxMenuItem, __assign({ key: optionId, id: optionId }, option, { isSelected: selectedIndex === __originalIndex, onClick: function () { return dispatch(['select', __originalIndex]); }, index: __originalIndex }), option.label));
+    }, [focusedIndex, id, itemRenderer, selectedIndex]);
+    return (react_1.default.createElement(helpers_1.ComboBoxRefsContext.Provider, { value: { inputRef: inputRef, menuRef: menuRef, toggleButtonRef: toggleButtonRef, optionsExtraInfoRef: optionsExtraInfoRef } },
+        react_1.default.createElement(helpers_1.ComboBoxActionContext.Provider, { value: dispatch },
+            react_1.default.createElement(helpers_1.ComboBoxStateContext.Provider, { value: { id: id, minWidth: minWidth, isOpen: isOpen, focusedIndex: focusedIndex } },
+                react_1.default.createElement(ComboBoxInputContainer_1.ComboBoxInputContainer, __assign({ disabled: inputProps === null || inputProps === void 0 ? void 0 : inputProps.disabled }, rest),
+                    react_1.default.createElement(ComboBoxInput_1.ComboBoxInput, __assign({ value: inputValue }, inputProps, { onChange: handleOnInput })),
+                    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, __assign({}, dropdownMenuProps),
+                    react_1.default.createElement(ComboBoxMenu_1.ComboBoxMenu, null, filteredOptions.length > 0 ? (filteredOptions.map(getMenuItem)) : (react_1.default.createElement(Menu_1.MenuExtraContent, null,
+                        react_1.default.createElement(Typography_1.Text, { isMuted: true }, emptyStateMessage)))))))));
 };
 exports.ComboBox = ComboBox;
 exports.default = exports.ComboBox;

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

@@ -0,0 +1,8 @@
+import React from 'react';
+export declare const ComboBoxDropdown: React.ForwardRefExoticComponent<Pick<{
+    visible?: boolean | undefined;
+    trigger?: string | undefined;
+    placement?: import("@popperjs/core").Placement | undefined;
+} & Omit<import("@tippyjs/react").TippyProps, "placement" | "trigger" | "visible"> & {
+    children: JSX.Element;
+}, "disabled" | "children" | "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" | "role" | "theme" | "zIndex" | "className" | "singleton" | "reference"> & React.RefAttributes<Element>>;

package/cjs/core/ComboBox/ComboBoxDropdown.js

@@ -0,0 +1,55 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ComboBoxDropdown = void 0;
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+var react_1 = __importDefault(require("react"));
+var utils_1 = require("../utils");
+var helpers_1 = require("./helpers");
+exports.ComboBoxDropdown = react_1.default.forwardRef(function (props, forwardedRef) {
+    var children = props.children, rest = __rest(props, ["children"]);
+    var isOpen = (0, utils_1.useSafeContext)(helpers_1.ComboBoxStateContext).isOpen;
+    var dispatch = (0, utils_1.useSafeContext)(helpers_1.ComboBoxActionContext);
+    var _a = (0, utils_1.useSafeContext)(helpers_1.ComboBoxRefsContext), inputRef = _a.inputRef, toggleButtonRef = _a.toggleButtonRef;
+    // sync internal isOpen state with user's visible prop
+    react_1.default.useEffect(function () {
+        if (props.visible != undefined) {
+            dispatch([props.visible ? 'open' : 'close']);
+        }
+    }, [dispatch, props.visible]);
+    return (react_1.default.createElement(utils_1.Popover, __assign({ placement: 'bottom-start', visible: isOpen, onClickOutside: react_1.default.useCallback(function (_, _a) {
+            var _b;
+            var target = _a.target;
+            if (!((_b = toggleButtonRef.current) === null || _b === void 0 ? void 0 : _b.contains(target))) {
+                dispatch(['close']);
+            }
+        }, [dispatch, toggleButtonRef]), animation: 'shift-away', duration: 200, reference: inputRef, ref: forwardedRef, content: children }, rest)));
+});
+exports.ComboBoxDropdown.displayName = 'ComboBoxDropdown';

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

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const ComboBoxEndIcon: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "key" | keyof React.HTMLAttributes<HTMLSpanElement>> & {
+    disabled?: boolean | undefined;
+    isOpen?: boolean | undefined;
+} & React.RefAttributes<HTMLSpanElement>>;