@itwin/itwinui-react 1.37.3 → 1.39.0

package/esm/core/ComboBox/ComboBoxInput.js

@@ -0,0 +1,146 @@
+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;
+};
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import React from 'react';
+import { Input } from '../Input';
+import { useSafeContext, useMergedRefs } from '../utils';
+import { ComboBoxStateContext, ComboBoxActionContext, ComboBoxRefsContext, } from './helpers';
+export var ComboBoxInput = React.forwardRef(function (props, forwardedRef) {
+    var onKeyDownProp = props.onKeyDown, onFocusProp = props.onFocus, rest = __rest(props, ["onKeyDown", "onFocus"]);
+    var _a = useSafeContext(ComboBoxStateContext), isOpen = _a.isOpen, id = _a.id, focusedIndex = _a.focusedIndex, enableVirtualization = _a.enableVirtualization;
+    var dispatch = useSafeContext(ComboBoxActionContext);
+    var _b = useSafeContext(ComboBoxRefsContext), inputRef = _b.inputRef, menuRef = _b.menuRef, optionsExtraInfoRef = _b.optionsExtraInfoRef;
+    var refs = useMergedRefs(inputRef, forwardedRef);
+    var focusedIndexRef = React.useRef(focusedIndex !== null && focusedIndex !== void 0 ? focusedIndex : -1);
+    React.useEffect(function () {
+        focusedIndexRef.current = focusedIndex !== null && focusedIndex !== void 0 ? focusedIndex : -1;
+    }, [focusedIndex]);
+    var getIdFromIndex = function (index) {
+        var _a, _b, _c;
+        return ((_c = (_b = (_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.querySelector("[data-iui-index=\"".concat(index, "\"]"))) === null || _b === void 0 ? void 0 : _b.id) !== null && _c !== void 0 ? _c : '');
+    };
+    var handleKeyDown = React.useCallback(function (event) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+        onKeyDownProp === null || onKeyDownProp === void 0 ? void 0 : onKeyDownProp(event);
+        var length = (_a = Object.keys(optionsExtraInfoRef.current).length) !== null && _a !== void 0 ? _a : 0;
+        switch (event.key) {
+            case 'ArrowDown': {
+                event.preventDefault();
+                if (!isOpen) {
+                    return dispatch(['open']);
+                }
+                if (length === 0) {
+                    return;
+                }
+                if (focusedIndexRef.current === -1) {
+                    var 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),
+                    ]);
+                }
+                // If virtualization is enabled, dont let round scrolling
+                if (enableVirtualization &&
+                    !((_e = (_d = menuRef.current) === null || _d === void 0 ? void 0 : _d.querySelector("[data-iui-index=\"".concat(focusedIndexRef.current, "\"]"))) === null || _e === void 0 ? void 0 : _e.nextElementSibling)) {
+                    return;
+                }
+                var nextIndex = focusedIndexRef.current;
+                do {
+                    var currentElement = (_f = menuRef.current) === null || _f === void 0 ? void 0 : _f.querySelector("[data-iui-index=\"".concat(nextIndex, "\"]"));
+                    var 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]);
+                    }
+                } while (nextIndex !== focusedIndexRef.current);
+                break;
+            }
+            case 'ArrowUp': {
+                event.preventDefault();
+                if (!isOpen) {
+                    return dispatch(['open']);
+                }
+                if (length === 0) {
+                    return;
+                }
+                // If virtualization is enabled, dont let round scrolling
+                if (enableVirtualization &&
+                    !((_k = (_j = menuRef.current) === null || _j === void 0 ? void 0 : _j.querySelector("[data-iui-index=\"".concat(focusedIndexRef.current, "\"]"))) === null || _k === void 0 ? void 0 : _k.previousElementSibling)) {
+                    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,
+                    ]);
+                }
+                var prevIndex = focusedIndexRef.current;
+                do {
+                    var currentElement = (_o = menuRef.current) === null || _o === void 0 ? void 0 : _o.querySelector("[data-iui-index=\"".concat(prevIndex, "\"]"));
+                    var 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]);
+                    }
+                } while (prevIndex !== focusedIndexRef.current);
+                break;
+            }
+            case 'Enter': {
+                event.preventDefault();
+                if (isOpen) {
+                    dispatch(['select', focusedIndexRef.current]);
+                }
+                else {
+                    dispatch(['open']);
+                }
+                break;
+            }
+            case 'Escape': {
+                event.preventDefault();
+                dispatch(['close']);
+                break;
+            }
+            case 'Tab':
+                dispatch(['close']);
+                break;
+        }
+    }, [
+        dispatch,
+        enableVirtualization,
+        isOpen,
+        menuRef,
+        onKeyDownProp,
+        optionsExtraInfoRef,
+    ]);
+    var handleFocus = React.useCallback(function (event) {
+        dispatch(['open']);
+        onFocusProp === null || onFocusProp === void 0 ? void 0 : onFocusProp(event);
+    }, [dispatch, onFocusProp]);
+    return (React.createElement(Input, __assign({ ref: refs, onKeyDown: handleKeyDown, onFocus: handleFocus, "aria-activedescendant": isOpen && focusedIndex != undefined && focusedIndex > -1
+            ? getIdFromIndex(focusedIndex)
+            : undefined, role: 'combobox', "aria-controls": isOpen ? "".concat(id, "-list") : undefined, "aria-autocomplete": 'list', spellCheck: false, autoCapitalize: 'none', autoCorrect: 'off' }, rest)));
+});
+ComboBoxInput.displayName = 'ComboBoxInput';

package/esm/core/ComboBox/ComboBoxInputContainer.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { InputContainerProps } from '../utils';
+declare type ComboBoxInputContainerProps = React.ComponentPropsWithoutRef<'div'> & Pick<InputContainerProps, 'status' | 'message' | 'disabled'>;
+export declare const ComboBoxInputContainer: {
+    (props: ComboBoxInputContainerProps): JSX.Element;
+    displayName: string;
+};
+export {};

package/esm/core/ComboBox/ComboBoxInputContainer.js

@@ -0,0 +1,38 @@
+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;
+};
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import React from 'react';
+import { StatusMessage } from '../StatusMessage';
+import { InputContainer, useSafeContext } from '../utils';
+import { ComboBoxStateContext } from './helpers';
+export var ComboBoxInputContainer = function (props) {
+    var className = props.className, status = props.status, message = props.message, children = props.children, rest = __rest(props, ["className", "status", "message", "children"]);
+    var id = useSafeContext(ComboBoxStateContext).id;
+    return (React.createElement(InputContainer, __assign({ className: className, status: status, statusMessage: typeof message === 'string' ? (React.createElement(StatusMessage, { status: status }, message)) : (React.isValidElement(message) &&
+            React.cloneElement(message, { status: status })) }, rest, { id: id }),
+        React.createElement("div", { className: 'iui-input-with-icon' }, children)));
+};
+ComboBoxInputContainer.displayName = 'ComboBoxInputContainer';

package/esm/core/ComboBox/ComboBoxMenu.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { MenuProps } from '../Menu';
+export declare const ComboBoxMenu: React.ForwardRefExoticComponent<Omit<MenuProps, "onClick"> & Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "key" | keyof React.HTMLAttributes<HTMLUListElement>> & React.RefAttributes<HTMLUListElement>>;

package/esm/core/ComboBox/ComboBoxMenu.js

@@ -0,0 +1,83 @@
+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;
+};
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import cx from 'classnames';
+import React from 'react';
+import { Menu } from '../Menu';
+import { Surface } from '../Surface';
+import { useSafeContext, useMergedRefs, useVirtualization, mergeRefs, getWindow, } from '../utils';
+import { ComboBoxStateContext, ComboBoxRefsContext } from './helpers';
+var VirtualizedComboBoxMenu = React.forwardRef(function (_a, forwardedRef) {
+    var _b, _c, _d;
+    var children = _a.children, style = _a.style, rest = __rest(_a, ["children", "style"]);
+    var _e = useSafeContext(ComboBoxStateContext), minWidth = _e.minWidth, id = _e.id, filteredOptions = _e.filteredOptions, getMenuItem = _e.getMenuItem, focusedIndex = _e.focusedIndex;
+    var menuRef = useSafeContext(ComboBoxRefsContext).menuRef;
+    var virtualItemRenderer = React.useCallback(function (index) {
+        return filteredOptions.length > 0
+            ? getMenuItem(filteredOptions[index], index)
+            : children;
+    }, // Here is expected empty state content
+    [filteredOptions, getMenuItem, children]);
+    var focusedVisibleIndex = React.useMemo(function () {
+        var _a, _b;
+        var currentElement = (_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.querySelector("[data-iui-index=\"".concat(focusedIndex, "\"]"));
+        if (!currentElement) {
+            return focusedIndex;
+        }
+        return Number((_b = currentElement.getAttribute('data-iui-filtered-index')) !== null && _b !== void 0 ? _b : focusedIndex);
+    }, [focusedIndex, menuRef]);
+    var _f = useVirtualization({
+        // 'Fool' VirtualScroll by passing length 1
+        // whenever there is no elements, to show empty state message
+        itemsLength: filteredOptions.length || 1,
+        itemRenderer: virtualItemRenderer,
+        scrollToIndex: focusedVisibleIndex,
+    }), outerProps = _f.outerProps, innerProps = _f.innerProps, visibleChildren = _f.visibleChildren;
+    var overflowY = ((_d = (_c = (_b = getWindow()) === null || _b === void 0 ? void 0 : _b.CSS) === null || _c === void 0 ? void 0 : _c.supports) === null || _d === void 0 ? void 0 : _d.call(_c, 'overflow-x: overlay'))
+        ? { overflowY: 'overlay' }
+        : { overflowY: 'auto' };
+    var styles = React.useMemo(function () { return ({
+        minWidth: minWidth,
+        maxWidth: "min(".concat(minWidth * 2, "px, 90vw)"),
+        maxHeight: 315,
+    }); }, [minWidth]);
+    return (React.createElement(Surface, __assign({ elevation: 1, style: __assign(__assign(__assign({}, styles), overflowY), style) }, rest),
+        React.createElement("div", __assign({}, outerProps),
+            React.createElement(Menu, { id: "".concat(id, "-list"), setFocus: false, role: 'listbox', ref: mergeRefs(menuRef, innerProps.ref, forwardedRef), style: innerProps.style }, visibleChildren))));
+});
+export var ComboBoxMenu = React.forwardRef(function (props, forwardedRef) {
+    var className = props.className, style = props.style, rest = __rest(props, ["className", "style"]);
+    var _a = useSafeContext(ComboBoxStateContext), minWidth = _a.minWidth, id = _a.id, enableVirtualization = _a.enableVirtualization;
+    var menuRef = useSafeContext(ComboBoxRefsContext).menuRef;
+    var refs = useMergedRefs(menuRef, forwardedRef);
+    var styles = React.useMemo(function () { return ({
+        minWidth: minWidth,
+        maxWidth: "min(".concat(minWidth * 2, "px, 90vw)"),
+        maxHeight: 315,
+    }); }, [minWidth]);
+    return (React.createElement(React.Fragment, null, !enableVirtualization ? (React.createElement(Menu, __assign({ id: "".concat(id, "-list"), style: __assign(__assign({}, styles), style), setFocus: false, role: 'listbox', ref: refs, className: cx('iui-scroll', className) }, rest))) : (React.createElement(VirtualizedComboBoxMenu, __assign({ ref: forwardedRef }, props)))));
+});
+ComboBoxMenu.displayName = 'ComboBoxMenu';

package/esm/core/ComboBox/ComboBoxMenuItem.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+export declare const ComboBoxMenuItem: React.MemoExoticComponent<React.ForwardRefExoticComponent<{
+    isSelected?: boolean | undefined;
+    disabled?: boolean | undefined;
+    value?: unknown;
+    onClick?: ((value?: unknown) => void) | undefined;
+    size?: "default" | "large" | undefined;
+    sublabel?: React.ReactNode;
+    icon?: JSX.Element | undefined;
+    badge?: JSX.Element | undefined;
+    role?: string | undefined;
+    subMenuItems?: JSX.Element[] | undefined;
+    children?: React.ReactNode;
+} & {
+    title?: string | undefined;
+    id?: string | undefined;
+} & {
+    style?: React.CSSProperties | undefined;
+} & import("../utils").ClassNameProps & {
+    index: number;
+} & React.RefAttributes<HTMLLIElement>>>;

package/esm/core/ComboBox/ComboBoxMenuItem.js

@@ -0,0 +1,58 @@
+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;
+};
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import cx from 'classnames';
+import React from 'react';
+import { useSafeContext, useMergedRefs } from '../utils';
+import { ComboBoxStateContext } from './helpers';
+export var ComboBoxMenuItem = React.memo(React.forwardRef(function (props, forwardedRef) {
+    var children = props.children, isSelected = props.isSelected, disabled = props.disabled, value = props.value, onClick = props.onClick, sublabel = props.sublabel, _a = props.size, size = _a === void 0 ? !!sublabel ? 'large' : 'default' : _a, icon = props.icon, badge = props.badge, className = props.className, _b = props.role, role = _b === void 0 ? 'menuitem' : _b, index = props.index, rest = __rest(props, ["children", "isSelected", "disabled", "value", "onClick", "sublabel", "size", "icon", "badge", "className", "role", "index"]);
+    var _c = useSafeContext(ComboBoxStateContext), focusedIndex = _c.focusedIndex, enableVirtualization = _c.enableVirtualization;
+    var focusRef = function (el) {
+        if (!enableVirtualization && focusedIndex === index) {
+            el === null || el === void 0 ? void 0 : el.scrollIntoView({ block: 'nearest' });
+        }
+    };
+    var refs = useMergedRefs(forwardedRef, focusRef);
+    return (React.createElement("li", __assign({ className: cx('iui-menu-item', {
+            'iui-large': size === 'large',
+            'iui-active': isSelected,
+            'iui-disabled': disabled,
+            'iui-focused': focusedIndex === index,
+        }, className), ref: refs, onClick: function () { return !disabled && (onClick === null || onClick === void 0 ? void 0 : onClick(value)); }, role: role, tabIndex: disabled || role === 'presentation' ? undefined : -1, "aria-selected": isSelected, "aria-disabled": disabled, "data-iui-index": index }, rest),
+        icon &&
+            React.cloneElement(icon, {
+                className: cx(icon.props.className, 'iui-icon'),
+            }),
+        React.createElement("span", { className: 'iui-content' },
+            React.createElement("div", { className: 'iui-menu-label' }, children),
+            sublabel && React.createElement("div", { className: 'iui-menu-description' }, sublabel)),
+        badge &&
+            React.cloneElement(badge, {
+                className: cx(badge.props.className, 'iui-icon'),
+            })));
+}));
+ComboBoxMenuItem.displayName = 'ComboBoxMenuItem';

package/esm/core/ComboBox/helpers.d.ts

@@ -0,0 +1,32 @@
+import React from 'react';
+import { SelectOption } from '../Select/Select';
+declare type ComboBoxAction = 'open' | 'close' | 'select' | 'focus';
+export declare const comboBoxReducer: (state: {
+    isOpen: boolean;
+    selectedIndex: number;
+    focusedIndex: number;
+}, [type, value]: [ComboBoxAction] | [ComboBoxAction, number | undefined]) => {
+    isOpen: boolean;
+    selectedIndex: number;
+    focusedIndex: number;
+};
+export declare const ComboBoxRefsContext: React.Context<{
+    inputRef: React.RefObject<HTMLInputElement>;
+    menuRef: React.RefObject<HTMLUListElement>;
+    toggleButtonRef: React.RefObject<HTMLSpanElement>;
+    optionsExtraInfoRef: React.MutableRefObject<Record<string, {
+        __originalIndex: number;
+    }>>;
+} | undefined>;
+declare type ComboBoxStateContextProps<T = unknown> = {
+    isOpen: boolean;
+    id: string;
+    minWidth: number;
+    enableVirtualization: boolean;
+    filteredOptions: SelectOption<T>[];
+    getMenuItem: (option: SelectOption<T>, filteredIndex?: number) => JSX.Element;
+    focusedIndex?: number;
+};
+export declare const ComboBoxStateContext: React.Context<ComboBoxStateContextProps<unknown> | undefined>;
+export declare const ComboBoxActionContext: React.Context<((x: [ComboBoxAction] | [ComboBoxAction, number]) => void) | undefined>;
+export {};

package/esm/core/ComboBox/helpers.js

@@ -0,0 +1,43 @@
+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);
+};
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import React from 'react';
+export var comboBoxReducer = function (state, _a) {
+    var _b;
+    var type = _a[0], value = _a[1];
+    switch (type) {
+        case 'open': {
+            return __assign(__assign({}, state), { isOpen: true });
+        }
+        case 'close': {
+            return __assign(__assign({}, state), { isOpen: false });
+        }
+        case 'select': {
+            return __assign(__assign({}, state), { isOpen: false, selectedIndex: value !== null && value !== void 0 ? value : state.selectedIndex, focusedIndex: value !== null && value !== void 0 ? value : state.focusedIndex });
+        }
+        case 'focus': {
+            return __assign(__assign({}, state), { focusedIndex: (_b = value !== null && value !== void 0 ? value : state.selectedIndex) !== null && _b !== void 0 ? _b : -1 });
+        }
+        default: {
+            return state;
+        }
+    }
+};
+export var ComboBoxRefsContext = React.createContext(undefined);
+ComboBoxRefsContext.displayName = 'ComboBoxRefsContext';
+export var ComboBoxStateContext = React.createContext(undefined);
+ComboBoxStateContext.displayName = 'ComboBoxStateContext';
+export var ComboBoxActionContext = React.createContext(undefined);
+ComboBoxActionContext.displayName = 'ComboBoxActionContext';

package/esm/core/DatePicker/DatePicker.d.ts

@@ -5,7 +5,7 @@ import { TimePickerProps } from '../TimePicker';
  * Generate localized months and days strings using `Intl.DateTimeFormat` for passed locale to use in DatePicker component.
  * If locale is not passed, browser locale will be used.
  */
-export declare const generateLocalizedStrings: (locale?: string | undefined) => {
+export declare const generateLocalizedStrings: (locale?: string) => {
     months: string[];
     shortDays: string[];
     days: string[];

package/esm/core/Modal/Modal.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { CommonProps } from '../utils';
-import '@itwin/itwinui-css/css/modal.css';
+import '@itwin/itwinui-css/css/dialog.css';
 export declare type ModalProps = {
     /**
      * Flag whether modal should be shown.

package/esm/core/Modal/Modal.js

@@ -29,7 +29,7 @@ import ReactDOM from 'react-dom';
 import cx from 'classnames';
 import SvgClose from '@itwin/itwinui-icons-react/cjs/icons/Close';
 import { useTheme, getContainer, getDocument, FocusTrap, } from '../utils';
-import '@itwin/itwinui-css/css/modal.css';
+import '@itwin/itwinui-css/css/dialog.css';
 import { IconButton } from '../Buttons/IconButton';
 import { CSSTransition } from 'react-transition-group';
 /**
@@ -112,12 +112,12 @@ export var Modal = function (props) {
             onClose(event);
         }
     };
-    return !!container ? (ReactDOM.createPortal(React.createElement(CSSTransition, { in: isOpen, classNames: 'iui-modal-animation', timeout: { exit: 600 }, unmountOnExit: true },
+    return !!container ? (ReactDOM.createPortal(React.createElement(CSSTransition, { in: isOpen, classNames: 'iui-dialog-animation', timeout: { exit: 600 }, unmountOnExit: true },
         React.createElement(FocusTrap, null,
-            React.createElement("div", __assign({ className: cx('iui-modal', { 'iui-modal-full-page': styleType === 'fullPage' }, { 'iui-modal-visible': isOpen }, className), tabIndex: -1, onKeyDown: handleKeyDown, ref: overlayRef, onMouseDown: handleMouseDown }, rest),
-                React.createElement("div", { className: 'iui-modal-dialog', id: id, style: style, role: 'dialog', "aria-modal": 'true' },
-                    React.createElement("div", { className: 'iui-title-bar' },
-                        React.createElement("div", { className: 'iui-title' }, title),
+            React.createElement("div", __assign({ className: cx('iui-dialog-backdrop', { 'iui-dialog-default': styleType === 'default' }, { 'iui-dialog-full-page': styleType === 'fullPage' }, { 'iui-dialog-visible': isOpen }, className), tabIndex: -1, onKeyDown: handleKeyDown, ref: overlayRef, onMouseDown: handleMouseDown }, rest),
+                React.createElement("div", { className: 'iui-dialog', id: id, style: style, role: 'dialog', "aria-modal": 'true' },
+                    React.createElement("div", { className: 'iui-dialog-title-bar' },
+                        React.createElement("div", { className: 'iui-dialog-title' }, title),
                         isDismissible && (React.createElement(IconButton, { size: 'small', styleType: 'borderless', onClick: onClose, "aria-label": 'Close' },
                             React.createElement(SvgClose, null)))),
                     children)))), container)) : (React.createElement(React.Fragment, null));

package/esm/core/Modal/ModalButtonBar.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { CommonProps } from '../utils';
-import '@itwin/itwinui-css/css/modal.css';
+import '@itwin/itwinui-css/css/dialog.css';
 export declare type ModalButtonBarProps = {
     /**
      * Buttons in the modal bar.

package/esm/core/Modal/ModalButtonBar.js

@@ -27,13 +27,13 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React from 'react';
 import cx from 'classnames';
 import { useTheme } from '../utils';
-import '@itwin/itwinui-css/css/modal.css';
+import '@itwin/itwinui-css/css/dialog.css';
 /**
  * Container for Buttons in modal.
  */
 export var ModalButtonBar = function (props) {
     var children = props.children, className = props.className, rest = __rest(props, ["children", "className"]);
     useTheme();
-    return (React.createElement("div", __assign({ className: cx('iui-button-bar', className) }, rest), children));
+    return (React.createElement("div", __assign({ className: cx('iui-dialog-button-bar', className) }, rest), children));
 };
 export default ModalButtonBar;

package/esm/core/Modal/ModalContent.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { CommonProps } from '../utils';
-import '@itwin/itwinui-css/css/modal.css';
+import '@itwin/itwinui-css/css/dialog.css';
 export declare type ModalContentProps = {
     /**
      * Main content in the `Modal`.

package/esm/core/Modal/ModalContent.js

@@ -27,13 +27,13 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React from 'react';
 import cx from 'classnames';
 import { useTheme } from '../utils';
-import '@itwin/itwinui-css/css/modal.css';
+import '@itwin/itwinui-css/css/dialog.css';
 /**
  * Container for content in `Modal`.
  */
 export var ModalContent = function (props) {
     var children = props.children, className = props.className, rest = __rest(props, ["children", "className"]);
     useTheme();
-    return (React.createElement("div", __assign({ className: cx('iui-modal-content', className) }, rest), children));
+    return (React.createElement("div", __assign({ className: cx('iui-dialog-content', className) }, rest), children));
 };
 export default ModalContent;

package/esm/core/RadioTiles/RadioTile.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import '@itwin/itwinui-css/css/inputs.css';
+import '@itwin/itwinui-css/css/radio-tile.css';
 export declare type RadioTileProps = {
     /**
      * Icon to be used.

package/esm/core/RadioTiles/RadioTile.js

@@ -24,11 +24,10 @@ var __rest = (this && this.__rest) || function (s, e) {
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-import SvgCheckmark from '@itwin/itwinui-icons-react/cjs/icons/Checkmark';
 import cx from 'classnames';
 import React from 'react';
 import { useMergedRefs, useTheme } from '../utils';
-import '@itwin/itwinui-css/css/inputs.css';
+import '@itwin/itwinui-css/css/radio-tile.css';
 /**
  * RadioTile component to be used in RadioTileGroup component
  * @example
@@ -44,15 +43,14 @@ export var RadioTile = React.forwardRef(function (props, ref) {
             inputElementRef.current.focus();
         }
     }, [setFocus]);
-    return (React.createElement("label", { className: className, style: style },
-        React.createElement("input", __assign({ type: 'radio', ref: refs }, rest)),
-        React.createElement("div", { className: 'iui-radio-tile' },
-            React.createElement(SvgCheckmark, { className: 'iui-checkmark', "aria-hidden": true }),
+    return (React.createElement("label", { className: cx('iui-radio-tile', className), style: style },
+        React.createElement("input", __assign({ className: 'iui-radio-tile-input', type: 'radio', ref: refs }, rest)),
+        React.createElement("div", { className: 'iui-radio-tile-content' },
             icon &&
                 React.cloneElement(icon, {
-                    className: cx('iui-icon', icon.props.className),
+                    className: cx('iui-radio-tile-icon', icon.props.className),
                 }),
-            label && React.createElement("div", { className: 'iui-label' }, label),
-            description && React.createElement("div", { className: 'iui-description' }, description))));
+            label && React.createElement("div", { className: 'iui-radio-tile-label' }, label),
+            description && (React.createElement("div", { className: 'iui-radio-tile-sublabel' }, description)))));
 });
 export default RadioTile;

package/esm/core/Select/Select.js

@@ -140,7 +140,7 @@ export var Select = function (props) {
         return options.find(function (option) { return option.value === value; });
     }, [options, value]);
     return (React.createElement("div", __assign({ className: cx('iui-input-with-icon', className), "aria-expanded": isOpen, "aria-haspopup": 'listbox', style: style }, rest),
-        React.createElement(DropdownMenu, __assign({ menuItems: menuItems, placement: 'bottom-start', className: cx('iui-scroll', menuClassName), style: __assign({ minWidth: minWidth, maxWidth: "min(".concat(minWidth * 2, "px, 90vw)"), maxHeight: "300px" }, menuStyle), role: 'listbox', onShow: onShowHandler, onHide: onHideHandler, disabled: disabled }, popoverProps, { visible: isOpen, onClickOutside: function (_, _a) {
+        React.createElement(DropdownMenu, __assign({ menuItems: menuItems, placement: 'bottom-start', className: cx('iui-scroll', menuClassName), style: __assign({ minWidth: minWidth, maxWidth: "min(".concat(minWidth * 2, "px, 90vw)"), maxHeight: 315 }, menuStyle), role: 'listbox', onShow: onShowHandler, onHide: onHideHandler, disabled: disabled }, popoverProps, { visible: isOpen, onClickOutside: function (_, _a) {
                 var _b;
                 var target = _a.target;
                 if (!((_b = toggleButtonRef.current) === null || _b === void 0 ? void 0 : _b.contains(target))) {