@itwin/itwinui-react 1.20.0 → 1.21.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [1.21.0](https://www.github.com/iTwin/iTwinUI-react/compare/v1.20.0...v1.21.0) (2021-10-05)
+
+### What's new
+
+* **ComboBox:** Add new `ComboBox` component with list autocomplete (list is filtered when typing in input) ([#338](https://www.github.com/iTwin/iTwinUI-react/issues/338)) ([92ac59e](https://www.github.com/iTwin/iTwinUI-react/commit/92ac59e01614bb658783d8a49aa7558f6bf61938))
+* **Tile:** Make `thumbnail` prop optional ([#354](https://www.github.com/iTwin/iTwinUI-react/issues/354)) ([b5a5a4e](https://www.github.com/iTwin/iTwinUI-react/commit/b5a5a4ed295ffd373180b84635ed198966f3a993))
+
 ## [1.20.0](https://www.github.com/iTwin/iTwinUI-react/compare/v1.19.0...v1.20.0) (2021-09-28)
 
 ### What's new

package/cjs/core/Alert/Alert.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { CommonProps } from '../utils/props';
+import { CommonProps } from '../utils';
 import '@itwin/itwinui-css/css/alert.css';
 export declare type AlertProps = {
     /**

package/cjs/core/Alert/Alert.js

@@ -33,10 +33,9 @@ exports.Alert = void 0;
 var CloseSmall_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/CloseSmall"));
 var classnames_1 = __importDefault(require("classnames"));
 var react_1 = __importDefault(require("react"));
-var useTheme_1 = require("../utils/hooks/useTheme");
+var utils_1 = require("../utils");
 require("@itwin/itwinui-css/css/alert.css");
 var IconButton_1 = require("../Buttons/IconButton");
-var common_1 = require("../utils/common");
 /**
  * A small box to quickly grab user attention and communicate a brief message
  * @example
@@ -48,8 +47,8 @@ var common_1 = require("../utils/common");
  */
 var Alert = function (props) {
     var children = props.children, className = props.className, _a = props.type, type = _a === void 0 ? 'informational' : _a, clickableText = props.clickableText, onClick = props.onClick, onClose = props.onClose, style = props.style, _b = props.isSticky, isSticky = _b === void 0 ? false : _b, rest = __rest(props, ["children", "className", "type", "clickableText", "onClick", "onClose", "style", "isSticky"]);
-    (0, useTheme_1.useTheme)();
-    var StatusIcon = common_1.StatusIconMap[type];
+    (0, utils_1.useTheme)();
+    var StatusIcon = utils_1.StatusIconMap[type];
     return (react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)('iui-alert', "iui-" + type, { 'iui-sticky': isSticky }, className), style: style }, rest),
         react_1.default.createElement(StatusIcon, { className: 'iui-icon' }),
         react_1.default.createElement("span", { className: 'iui-message' },

package/cjs/core/Badge/Badge.d.ts

@@ -1,7 +1,6 @@
 /// <reference types="react" />
-import { CommonProps } from '../utils/props';
+import { CommonProps, SoftBackgrounds } from '../utils';
 import '@itwin/itwinui-css/css/badge.css';
-import { SoftBackgrounds } from '../utils/common';
 export declare type BadgeProps = {
     /**
      * Background color of the badge.

package/cjs/core/Badge/Badge.js

@@ -32,9 +32,8 @@ exports.Badge = void 0;
  *--------------------------------------------------------------------------------------------*/
 var react_1 = __importDefault(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
-var useTheme_1 = require("../utils/hooks/useTheme");
+var utils_1 = require("../utils");
 require("@itwin/itwinui-css/css/badge.css");
-var common_1 = require("../utils/common");
 /**
  * Helper function that returns one of the preset badge color values.
  */
@@ -52,7 +51,7 @@ var getBadgeColorValue = function (color) {
         case 'warning':
             return '#F9D7AB';
         default:
-            return (0, common_1.isSoftBackground)(color) ? common_1.SoftBackgrounds[color] : color;
+            return (0, utils_1.isSoftBackground)(color) ? utils_1.SoftBackgrounds[color] : color;
     }
 };
 /**
@@ -65,9 +64,9 @@ var getBadgeColorValue = function (color) {
 var Badge = function (props) {
     var _a, _b, _c;
     var backgroundColor = props.backgroundColor, style = props.style, className = props.className, children = props.children, rest = __rest(props, ["backgroundColor", "style", "className", "children"]);
-    (0, useTheme_1.useTheme)();
+    (0, utils_1.useTheme)();
     var _style = backgroundColor &&
-        ((_c = (_b = (_a = (0, common_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, "--badge-color: " + backgroundColor))
+        ((_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, "--badge-color: " + backgroundColor))
         ? __assign({ '--badge-color': getBadgeColorValue(backgroundColor) }, style) : __assign({ backgroundColor: getBadgeColorValue(backgroundColor) }, style);
     return (react_1.default.createElement("span", __assign({ className: (0, classnames_1.default)('iui-badge', className), style: _style }, rest), children));
 };

package/cjs/core/Breadcrumbs/Breadcrumbs.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { CommonProps } from '../utils/props';
+import { CommonProps } from '../utils';
 import '@itwin/itwinui-css/css/breadcrumbs.css';
 export declare type BreadcrumbsProps = {
     /**

package/cjs/core/Breadcrumbs/Breadcrumbs.js

@@ -32,11 +32,9 @@ exports.Breadcrumbs = void 0;
  *--------------------------------------------------------------------------------------------*/
 var react_1 = __importDefault(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
-var useTheme_1 = require("../utils/hooks/useTheme");
+var utils_1 = require("../utils");
 var ChevronRight_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/ChevronRight"));
 require("@itwin/itwinui-css/css/breadcrumbs.css");
-var useMergedRefs_1 = require("../utils/hooks/useMergedRefs");
-var useOverflow_1 = require("../utils/hooks/useOverflow");
 /**
  * A breadcrumb trail is used as a navigational aid to help users keep track
  * of their place in the application. It is often placed before a page's main content.
@@ -61,9 +59,9 @@ var useOverflow_1 = require("../utils/hooks/useOverflow");
  */
 exports.Breadcrumbs = react_1.default.forwardRef(function (props, ref) {
     var items = props.children, _a = props.currentIndex, currentIndex = _a === void 0 ? items.length - 1 : _a, separator = props.separator, className = props.className, rest = __rest(props, ["children", "currentIndex", "separator", "className"]);
-    (0, useTheme_1.useTheme)();
-    var _b = (0, useOverflow_1.useOverflow)(items), overflowRef = _b[0], visibleCount = _b[1];
-    var refs = (0, useMergedRefs_1.useMergedRefs)(overflowRef, ref);
+    (0, utils_1.useTheme)();
+    var _b = (0, utils_1.useOverflow)(items), overflowRef = _b[0], visibleCount = _b[1];
+    var refs = (0, utils_1.useMergedRefs)(overflowRef, ref);
     var Separator = function () { return (react_1.default.createElement("li", { className: 'iui-breadcrumbs-separator', "aria-hidden": true }, separator !== null && separator !== void 0 ? separator : react_1.default.createElement(ChevronRight_1.default, null))); };
     var ListItem = function (_a) {
         var _b;

package/cjs/core/ButtonGroup/ButtonGroup.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { CommonProps } from '../utils/props';
+import { CommonProps } from '../utils';
 import '@itwin/itwinui-css/css/button.css';
 export declare type ButtonGroupProps = {
     /**

package/cjs/core/ButtonGroup/ButtonGroup.js

@@ -32,8 +32,7 @@ exports.ButtonGroup = void 0;
  *--------------------------------------------------------------------------------------------*/
 var react_1 = __importDefault(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
-var useTheme_1 = require("../utils/hooks/useTheme");
-var useOverflow_1 = require("../utils/hooks/useOverflow");
+var utils_1 = require("../utils");
 require("@itwin/itwinui-css/css/button.css");
 /**
  * Group buttons together for common actions.
@@ -68,8 +67,8 @@ var ButtonGroup = function (props) {
     var items = react_1.default.useMemo(function () { return react_1.default.Children.toArray(children); }, [
         children,
     ]);
-    (0, useTheme_1.useTheme)();
-    var _a = (0, useOverflow_1.useOverflow)(items, !overflowButton), overflowRef = _a[0], visibleCount = _a[1];
+    (0, utils_1.useTheme)();
+    var _a = (0, utils_1.useOverflow)(items, !overflowButton), overflowRef = _a[0], visibleCount = _a[1];
     return (react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)('iui-button-group', className), style: __assign(__assign({}, (!!overflowButton && { width: '100%' })), style), ref: overflowRef }, rest), !!overflowButton && visibleCount < items.length ? (react_1.default.createElement(react_1.default.Fragment, null,
         items.slice(0, visibleCount - 1),
         overflowButton(visibleCount))) : (children)));

package/cjs/core/Buttons/Button/Button.js

@@ -32,7 +32,7 @@ exports.Button = void 0;
  *--------------------------------------------------------------------------------------------*/
 var classnames_1 = __importDefault(require("classnames"));
 var react_1 = __importDefault(require("react"));
-var useTheme_1 = require("../../utils/hooks/useTheme");
+var utils_1 = require("../../utils");
 require("@itwin/itwinui-css/css/button.css");
 /**
  * Generic button component
@@ -46,7 +46,7 @@ require("@itwin/itwinui-css/css/button.css");
 exports.Button = react_1.default.forwardRef(function (props, ref) {
     var _a;
     var children = props.children, className = props.className, size = props.size, style = props.style, _b = props.styleType, styleType = _b === void 0 ? 'default' : _b, _c = props.type, type = _c === void 0 ? 'button' : _c, startIcon = props.startIcon, endIcon = props.endIcon, rest = __rest(props, ["children", "className", "size", "style", "styleType", "type", "startIcon", "endIcon"]);
-    (0, useTheme_1.useTheme)();
+    (0, utils_1.useTheme)();
     return (react_1.default.createElement("button", __assign({ ref: ref, className: (0, classnames_1.default)('iui-button', (_a = {},
             _a["iui-" + size] = !!size,
             _a["iui-" + styleType] = styleType !== 'default',

package/cjs/core/Buttons/DropdownButton/DropdownButton.js

@@ -36,8 +36,7 @@ var Button_1 = require("../Button");
 var DropdownMenu_1 = require("../../DropdownMenu");
 var CaretDownSmall_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/CaretDownSmall"));
 var CaretUpSmall_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/CaretUpSmall"));
-var useTheme_1 = require("../../utils/hooks/useTheme");
-var useMergedRefs_1 = require("../../utils/hooks/useMergedRefs");
+var utils_1 = require("../../utils");
 require("@itwin/itwinui-css/css/button.css");
 /**
  * Button that opens a DropdownMenu.
@@ -50,11 +49,11 @@ require("@itwin/itwinui-css/css/button.css");
  */
 exports.DropdownButton = react_1.default.forwardRef(function (props, ref) {
     var menuItems = props.menuItems, className = props.className, size = props.size, styleType = props.styleType, children = props.children, rest = __rest(props, ["menuItems", "className", "size", "styleType", "children"]);
-    (0, useTheme_1.useTheme)();
+    (0, utils_1.useTheme)();
     var _a = react_1.default.useState(false), isMenuOpen = _a[0], setIsMenuOpen = _a[1];
     var _b = react_1.default.useState(0), menuWidth = _b[0], setMenuWidth = _b[1];
     var buttonRef = react_1.default.useRef(null);
-    var refs = (0, useMergedRefs_1.useMergedRefs)(ref, buttonRef);
+    var refs = (0, utils_1.useMergedRefs)(ref, buttonRef);
     react_1.default.useEffect(function () {
         if (buttonRef.current) {
             setMenuWidth(buttonRef.current.offsetWidth);

package/cjs/core/Buttons/IconButton/IconButton.js

@@ -32,7 +32,7 @@ exports.IconButton = void 0;
  *--------------------------------------------------------------------------------------------*/
 var classnames_1 = __importDefault(require("classnames"));
 var react_1 = __importDefault(require("react"));
-var useTheme_1 = require("../../utils/hooks/useTheme");
+var utils_1 = require("../../utils");
 require("@itwin/itwinui-css/css/button.css");
 /**
  * Icon button
@@ -43,7 +43,7 @@ require("@itwin/itwinui-css/css/button.css");
 exports.IconButton = react_1.default.forwardRef(function (props, ref) {
     var _a;
     var isActive = props.isActive, children = props.children, _b = props.styleType, styleType = _b === void 0 ? 'default' : _b, size = props.size, _c = props.type, type = _c === void 0 ? 'button' : _c, className = props.className, rest = __rest(props, ["isActive", "children", "styleType", "size", "type", "className"]);
-    (0, useTheme_1.useTheme)();
+    (0, utils_1.useTheme)();
     return (react_1.default.createElement("button", __assign({ ref: ref, className: (0, classnames_1.default)('iui-button', (_a = {},
             _a["iui-" + size] = !!size,
             _a["iui-" + styleType] = styleType !== 'default',

package/cjs/core/Buttons/IdeasButton/IdeasButton.js

@@ -32,7 +32,7 @@ exports.IdeasButton = void 0;
  *--------------------------------------------------------------------------------------------*/
 var react_1 = __importDefault(require("react"));
 var SmileyHappy_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/SmileyHappy"));
-var useTheme_1 = require("../../utils/hooks/useTheme");
+var utils_1 = require("../../utils");
 var Button_1 = require("../Button");
 /**
  * Ideas button
@@ -41,7 +41,7 @@ var Button_1 = require("../Button");
  */
 exports.IdeasButton = react_1.default.forwardRef(function (props, ref) {
     var _a = props.feedbackLabel, feedbackLabel = _a === void 0 ? 'Feedback' : _a, onClick = props.onClick, rest = __rest(props, ["feedbackLabel", "onClick"]);
-    (0, useTheme_1.useTheme)();
+    (0, utils_1.useTheme)();
     return (react_1.default.createElement(Button_1.Button, __assign({ ref: ref, className: 'iui-idea', onClick: onClick, startIcon: react_1.default.createElement(SmileyHappy_1.default, { "aria-hidden": true }) }, rest), feedbackLabel));
 });
 exports.default = exports.IdeasButton;

package/cjs/core/Buttons/SplitButton/SplitButton.js

@@ -37,7 +37,7 @@ var IconButton_1 = require("../IconButton");
 var DropdownMenu_1 = require("../../DropdownMenu");
 var CaretDownSmall_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/CaretDownSmall"));
 var CaretUpSmall_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/CaretUpSmall"));
-var useTheme_1 = require("../../utils/hooks/useTheme");
+var utils_1 = require("../../utils");
 require("@itwin/itwinui-css/css/button.css");
 /**
  * Split button component with a DropdownMenu.
@@ -51,7 +51,7 @@ require("@itwin/itwinui-css/css/button.css");
  */
 var SplitButton = function (props) {
     var onClick = props.onClick, menuItems = props.menuItems, className = props.className, _a = props.menuPlacement, menuPlacement = _a === void 0 ? 'bottom-end' : _a, _b = props.styleType, styleType = _b === void 0 ? 'default' : _b, size = props.size, children = props.children, style = props.style, title = props.title, rest = __rest(props, ["onClick", "menuItems", "className", "menuPlacement", "styleType", "size", "children", "style", "title"]);
-    (0, useTheme_1.useTheme)();
+    (0, utils_1.useTheme)();
     var _c = react_1.default.useState(false), isMenuOpen = _c[0], setIsMenuOpen = _c[1];
     var _d = react_1.default.useState(0), menuWidth = _d[0], setMenuWidth = _d[1];
     var ref = react_1.default.useRef(null);

package/cjs/core/Checkbox/Checkbox.js

@@ -33,8 +33,7 @@ exports.Checkbox = void 0;
 var classnames_1 = __importDefault(require("classnames"));
 var react_1 = __importDefault(require("react"));
 var ProgressIndicators_1 = require("../ProgressIndicators");
-var useMergedRefs_1 = require("../utils/hooks/useMergedRefs");
-var useTheme_1 = require("../utils/hooks/useTheme");
+var utils_1 = require("../utils");
 require("@itwin/itwinui-css/css/inputs.css");
 /**
  * Simple input checkbox
@@ -49,9 +48,9 @@ require("@itwin/itwinui-css/css/inputs.css");
 exports.Checkbox = react_1.default.forwardRef(function (props, ref) {
     var _a;
     var className = props.className, _b = props.disabled, disabled = _b === void 0 ? false : _b, _c = props.indeterminate, indeterminate = _c === void 0 ? false : _c, label = props.label, status = props.status, setFocus = props.setFocus, _d = props.isLoading, isLoading = _d === void 0 ? false : _d, style = props.style, checkmarkClassName = props.checkmarkClassName, checkmarkStyle = props.checkmarkStyle, rest = __rest(props, ["className", "disabled", "indeterminate", "label", "status", "setFocus", "isLoading", "style", "checkmarkClassName", "checkmarkStyle"]);
-    (0, useTheme_1.useTheme)();
+    (0, utils_1.useTheme)();
     var inputElementRef = react_1.default.useRef(null);
-    var refs = (0, useMergedRefs_1.useMergedRefs)(inputElementRef, ref);
+    var refs = (0, utils_1.useMergedRefs)(inputElementRef, ref);
     react_1.default.useEffect(function () {
         if (inputElementRef.current && setFocus) {
             inputElementRef.current.focus();

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

@@ -0,0 +1,51 @@
+/// <reference types="react" />
+import { InputProps } from '../Input';
+import { SelectOption } from '../Select';
+import { PopoverProps, CommonProps } from '../utils';
+import 'tippy.js/animations/shift-away.css';
+export declare type ComboBoxProps<T> = {
+    /**
+     * Array of options that populate the dropdown list.
+     */
+    options: SelectOption<T>[];
+    /**
+     * Controlled value of ComboBox.
+     */
+    value?: T;
+    /**
+     * Callback fired when selected value changes.
+     */
+    onChange?: (value: T) => void;
+    /**
+     * Function to customize the default filtering logic.
+     */
+    filterFunction?: (options: SelectOption<T>[], inputValue: string) => SelectOption<T>[];
+    /**
+     * Native input element props.
+     */
+    inputProps?: Omit<InputProps, 'setFocus'>;
+    /**
+     * Props to customize dropdown menu behavior.
+     */
+    dropdownMenuProps?: PopoverProps;
+    /**
+     * Message shown when no options are available.
+     * @default 'No options found'
+     */
+    emptyStateMessage?: string;
+} & 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.
+ * @example
+ * <ComboBox
+ *   options={[
+ *     { label: 'Item 1', value: 1 },
+ *     { label: 'Item 2', value: 2 },
+ *     { label: 'Item 3', value: 3 },
+ *   ]}
+ *   onChange={() => {}}
+ * />
+ */
+export declare const ComboBox: <T>(props: ComboBoxProps<T>) => JSX.Element;
+export default ComboBox;

package/cjs/core/ComboBox/ComboBox.js

@@ -0,0 +1,268 @@
+"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.ComboBox = 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 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");
+/**
+ * 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.
+ * @example
+ * <ComboBox
+ *   options={[
+ *     { label: 'Item 1', value: 1 },
+ *     { label: 'Item 2', value: 2 },
+ *     { label: 'Item 3', value: 3 },
+ *   ]}
+ *   onChange={() => {}}
+ * />
+ */
+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, _a = props.emptyStateMessage, emptyStateMessage = _a === void 0 ? 'No options found' : _a, rest = __rest(props, ["options", "value", "onChange", "filterFunction", "className", "inputProps", "dropdownMenuProps", "emptyStateMessage"]);
+    // 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) + "-cb") !== null && _b !== void 0 ? _b : "iui-cb-" + (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 : id + "-option" + options.findIndex(function (_a) {
+            var value = _a.value;
+            return value === options[index].value;
+        });
+    }, [options, id]);
+    var memoizedItems = react_1.default.useMemo(function () {
+        return options.map(function (_a, index) {
+            var label = _a.label, value = _a.value, rest = __rest(_a, ["label", "value"]);
+            return (react_1.default.createElement(Menu_1.MenuItem, __assign({ id: getOptionId(index), key: getOptionId(index), value: value, role: 'option', onClick: function (value) {
+                    setSelectedValue(value);
+                    setIsOpen(false);
+                } }, rest), label));
+        });
+    }, [options, getOptionId]);
+    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];
+    // Set min-width of menu to be same as input
+    var _c = react_1.default.useState(0), minWidth = _c[0], setMinWidth = _c[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];
+    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(), selectedValue = _f[0], setSelectedValue = _f[1];
+    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]);
+    // Fire onChange callback and update inputValue every time selected value changes
+    react_1.default.useEffect(function () {
+        var _a, _b;
+        if (selectedValue != undefined) {
+            onChange === null || onChange === void 0 ? void 0 : onChange(selectedValue);
+            setInputValue((_b = (_a = options.find(function (_a) {
+                var value = _a.value;
+                return value === selectedValue;
+            })) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : '');
+        }
+    }, [selectedValue, onChange, options]);
+    // Filter options and update focus when input value 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
+            }
+        });
+    }, [inputValue, options, selectedValue, isOpen, filterFunction]);
+    var onKeyDown = react_1.default.useCallback(function (event) {
+        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);
+                }
+                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;
+        }
+    }, [focusedIndex, isOpen, options, getOptionId]);
+    var menuItems = react_1.default.useMemo(function () {
+        if (filteredOptions.length === 0) {
+            return (react_1.default.createElement(Menu_1.MenuItem, { className: 'iui-menu-content', role: 'presentation' },
+                react_1.default.createElement(Typography_1.Text, { isMuted: true }, emptyStateMessage)));
+        }
+        return filteredOptions.map(function (option) {
+            var index = options.findIndex(function (_a) {
+                var value = _a.value;
+                return option.value === value;
+            });
+            return focusedIndex !== index && selectedValue !== option.value
+                ? memoizedItems[index]
+                : react_1.default.cloneElement(memoizedItems[index], {
+                    className: (0, classnames_1.default)({ 'iui-focused': focusedIndex === index }),
+                    isSelected: selectedValue === option.value,
+                    ref: function (el) {
+                        return focusedIndex === index && (el === null || el === void 0 ? void 0 : el.scrollIntoView(false));
+                    },
+                });
+        });
+    }, [
+        filteredOptions,
+        emptyStateMessage,
+        options,
+        focusedIndex,
+        selectedValue,
+        memoizedItems,
+    ]);
+    return (react_1.default.createElement(utils_1.InputContainer, __assign({ className: className, isIconInline: true, icon: react_1.default.createElement("span", { ref: toggleButtonRef, className: (0, classnames_1.default)('iui-actionable', { '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 })) }, rest, { id: id }),
+        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: id + "-list", className: 'iui-scroll', style: {
+                    minWidth: minWidth,
+                    maxWidth: "min(" + 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); }, onChange: onInput, value: inputValue, "aria-activedescendant": isOpen && focusedIndex > -1 ? getOptionId(focusedIndex) : undefined, role: 'combobox', "aria-controls": isOpen ? id + "-list" : undefined, "aria-autocomplete": 'list', spellCheck: false, autoCapitalize: 'none', autoCorrect: 'off' }, inputProps)))));
+};
+exports.ComboBox = ComboBox;
+exports.default = exports.ComboBox;

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

@@ -0,0 +1,4 @@
+export { ComboBox } from './ComboBox';
+export type { ComboBoxProps } from './ComboBox';
+declare const _default: "./ComboBox";
+export default _default;

package/cjs/core/ComboBox/index.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ComboBox = 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 ComboBox_1 = require("./ComboBox");
+Object.defineProperty(exports, "ComboBox", { enumerable: true, get: function () { return ComboBox_1.ComboBox; } });
+exports.default = './ComboBox';

package/cjs/core/DatePicker/DatePicker.js

@@ -34,7 +34,7 @@ var ChevronLeft_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icon
 var ChevronRight_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/ChevronRight"));
 var classnames_1 = __importDefault(require("classnames"));
 var react_1 = __importDefault(require("react"));
-var useTheme_1 = require("../utils/hooks/useTheme");
+var utils_1 = require("../utils");
 require("@itwin/itwinui-css/css/date-picker.css");
 var IconButton_1 = require("../Buttons/IconButton");
 var TimePicker_1 = require("../TimePicker");
@@ -128,7 +128,7 @@ exports.generateLocalizedStrings = generateLocalizedStrings;
 var DatePicker = function (props) {
     var _a, _b, _c;
     var date = props.date, onChange = props.onChange, localizedNames = props.localizedNames, className = props.className, style = props.style, _d = props.setFocus, setFocus = _d === void 0 ? false : _d, _e = props.showTime, showTime = _e === void 0 ? false : _e, _f = props.use12Hours, use12Hours = _f === void 0 ? false : _f, precision = props.precision, hourStep = props.hourStep, minuteStep = props.minuteStep, secondStep = props.secondStep, rest = __rest(props, ["date", "onChange", "localizedNames", "className", "style", "setFocus", "showTime", "use12Hours", "precision", "hourStep", "minuteStep", "secondStep"]);
-    (0, useTheme_1.useTheme)();
+    (0, utils_1.useTheme)();
     var monthNames = (_a = localizedNames === null || localizedNames === void 0 ? void 0 : localizedNames.months) !== null && _a !== void 0 ? _a : defaultMonths;
     var shortDays = (_b = localizedNames === null || localizedNames === void 0 ? void 0 : localizedNames.shortDays) !== null && _b !== void 0 ? _b : defaultShortDays;
     var longDays = (_c = localizedNames === null || localizedNames === void 0 ? void 0 : localizedNames.days) !== null && _c !== void 0 ? _c : defaultLongDays;