@itwin/itwinui-react 1.37.1 → 1.38.0

package/cjs/core/ComboBox/ComboBoxEndIcon.js

@@ -0,0 +1,54 @@
+"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.ComboBoxEndIcon = 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 classnames_1 = __importDefault(require("classnames"));
+var react_1 = __importDefault(require("react"));
+var utils_1 = require("../utils");
+var helpers_1 = require("./helpers");
+var CaretDownSmall_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/CaretDownSmall"));
+exports.ComboBoxEndIcon = react_1.default.forwardRef(function (props, forwardedRef) {
+    var className = props.className, children = props.children, onClickProp = props.onClick, disabled = props.disabled, isOpen = props.isOpen, rest = __rest(props, ["className", "children", "onClick", "disabled", "isOpen"]);
+    var dispatch = (0, utils_1.useSafeContext)(helpers_1.ComboBoxActionContext);
+    var toggleButtonRef = (0, utils_1.useSafeContext)(helpers_1.ComboBoxRefsContext).toggleButtonRef;
+    var refs = (0, utils_1.useMergedRefs)(toggleButtonRef, forwardedRef);
+    return (react_1.default.createElement("span", __assign({ ref: refs, className: (0, classnames_1.default)('iui-end-icon', {
+            'iui-actionable': !disabled,
+            'iui-disabled': disabled,
+            'iui-open': isOpen,
+        }, className), onClick: function (e) {
+            onClickProp === null || onClickProp === void 0 ? void 0 : onClickProp(e);
+            if (!e.isDefaultPrevented()) {
+                dispatch([isOpen ? 'close' : 'open']);
+            }
+        } }, rest), children !== null && children !== void 0 ? children : react_1.default.createElement(CaretDownSmall_1.default, { "aria-hidden": true })));
+});
+exports.ComboBoxEndIcon.displayName = 'ComboBoxEndIcon';

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

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

package/cjs/core/ComboBox/ComboBoxInput.js

@@ -0,0 +1,134 @@
+"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.ComboBoxInput = 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 Input_1 = require("../Input");
+var utils_1 = require("../utils");
+var helpers_1 = require("./helpers");
+exports.ComboBoxInput = react_1.default.forwardRef(function (props, forwardedRef) {
+    var onKeyDownProp = props.onKeyDown, onFocusProp = props.onFocus, rest = __rest(props, ["onKeyDown", "onFocus"]);
+    var _a = (0, utils_1.useSafeContext)(helpers_1.ComboBoxStateContext), isOpen = _a.isOpen, id = _a.id, focusedIndex = _a.focusedIndex;
+    var dispatch = (0, utils_1.useSafeContext)(helpers_1.ComboBoxActionContext);
+    var _b = (0, utils_1.useSafeContext)(helpers_1.ComboBoxRefsContext), inputRef = _b.inputRef, menuRef = _b.menuRef, optionsExtraInfoRef = _b.optionsExtraInfoRef;
+    var refs = (0, utils_1.useMergedRefs)(inputRef, forwardedRef);
+    var focusedIndexRef = react_1.default.useRef(focusedIndex !== null && focusedIndex !== void 0 ? focusedIndex : -1);
+    react_1.default.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_1.default.useCallback(function (event) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+        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) {
+                    return dispatch([
+                        'focus',
+                        (_c = (_b = Object.values(optionsExtraInfoRef.current)) === null || _b === void 0 ? void 0 : _b[0].__originalIndex) !== null && _c !== void 0 ? _c : -1,
+                    ]);
+                }
+                var nextIndex = focusedIndexRef.current;
+                do {
+                    var currentElement = (_d = menuRef.current) === null || _d === void 0 ? void 0 : _d.querySelector("[data-iui-index=\"".concat(nextIndex, "\"]"));
+                    var nextElement = (_e = currentElement === null || currentElement === void 0 ? void 0 : currentElement.nextElementSibling) !== null && _e !== void 0 ? _e : (_f = menuRef.current) === null || _f === void 0 ? void 0 : _f.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 (focusedIndexRef.current === -1) {
+                    return dispatch([
+                        'focus',
+                        (_h = (_g = Object.values(optionsExtraInfoRef.current)) === null || _g === void 0 ? void 0 : _g[length - 1].__originalIndex) !== null && _h !== void 0 ? _h : -1,
+                    ]);
+                }
+                var prevIndex = focusedIndexRef.current;
+                do {
+                    var currentElement = (_j = menuRef.current) === null || _j === void 0 ? void 0 : _j.querySelector("[data-iui-index=\"".concat(prevIndex, "\"]"));
+                    var prevElement = (_k = currentElement === null || currentElement === void 0 ? void 0 : currentElement.previousElementSibling) !== null && _k !== void 0 ? _k : (_l = menuRef.current) === null || _l === void 0 ? void 0 : _l.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, isOpen, menuRef, onKeyDownProp, optionsExtraInfoRef]);
+    var handleFocus = react_1.default.useCallback(function (event) {
+        dispatch(['open']);
+        onFocusProp === null || onFocusProp === void 0 ? void 0 : onFocusProp(event);
+    }, [dispatch, onFocusProp]);
+    return (react_1.default.createElement(Input_1.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)));
+});
+exports.ComboBoxInput.displayName = 'ComboBoxInput';

package/cjs/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/cjs/core/ComboBox/ComboBoxInputContainer.js

@@ -0,0 +1,45 @@
+"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.ComboBoxInputContainer = 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 StatusMessage_1 = require("../StatusMessage");
+var utils_1 = require("../utils");
+var helpers_1 = require("./helpers");
+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 = (0, utils_1.useSafeContext)(helpers_1.ComboBoxStateContext).id;
+    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' }, children)));
+};
+exports.ComboBoxInputContainer = ComboBoxInputContainer;
+exports.ComboBoxInputContainer.displayName = 'ComboBoxInputContainer';

package/cjs/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/cjs/core/ComboBox/ComboBoxMenu.js

@@ -0,0 +1,45 @@
+"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.ComboBoxMenu = 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 classnames_1 = __importDefault(require("classnames"));
+var react_1 = __importDefault(require("react"));
+var Menu_1 = require("../Menu");
+var utils_1 = require("../utils");
+var helpers_1 = require("./helpers");
+exports.ComboBoxMenu = react_1.default.forwardRef(function (props, forwardedRef) {
+    var className = props.className, style = props.style, rest = __rest(props, ["className", "style"]);
+    var _a = (0, utils_1.useSafeContext)(helpers_1.ComboBoxStateContext), minWidth = _a.minWidth, id = _a.id;
+    var menuRef = (0, utils_1.useSafeContext)(helpers_1.ComboBoxRefsContext).menuRef;
+    var refs = (0, utils_1.useMergedRefs)(menuRef, forwardedRef);
+    return (react_1.default.createElement(Menu_1.Menu, __assign({ id: "".concat(id, "-list"), style: react_1.default.useMemo(function () { return (__assign({ minWidth: minWidth, maxWidth: "min(".concat(minWidth * 2, "px, 90vw)"), maxHeight: 300 }, style)); }, [minWidth, style]), setFocus: false, role: 'listbox', ref: refs, className: (0, classnames_1.default)('iui-scroll', className) }, rest)));
+});
+exports.ComboBoxMenu.displayName = 'ComboBoxMenu';

package/cjs/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/cjs/core/ComboBox/ComboBoxMenuItem.js

@@ -0,0 +1,65 @@
+"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.ComboBoxMenuItem = 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 classnames_1 = __importDefault(require("classnames"));
+var react_1 = __importDefault(require("react"));
+var utils_1 = require("../utils");
+var helpers_1 = require("./helpers");
+exports.ComboBoxMenuItem = react_1.default.memo(react_1.default.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 focusedIndex = (0, utils_1.useSafeContext)(helpers_1.ComboBoxStateContext).focusedIndex;
+    var focusRef = function (el) {
+        // will need to check for virtualization here too
+        if (focusedIndex === index) {
+            el === null || el === void 0 ? void 0 : el.scrollIntoView({ block: 'nearest' });
+        }
+    };
+    var refs = (0, utils_1.useMergedRefs)(forwardedRef, focusRef);
+    return (react_1.default.createElement("li", __assign({ className: (0, classnames_1.default)('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_1.default.cloneElement(icon, {
+                className: (0, classnames_1.default)(icon.props.className, 'iui-icon'),
+            }),
+        react_1.default.createElement("span", { className: 'iui-content' },
+            react_1.default.createElement("div", { className: 'iui-menu-label' }, children),
+            sublabel && react_1.default.createElement("div", { className: 'iui-menu-description' }, sublabel)),
+        badge &&
+            react_1.default.cloneElement(badge, {
+                className: (0, classnames_1.default)(badge.props.className, 'iui-icon'),
+            })));
+}));
+exports.ComboBoxMenuItem.displayName = 'ComboBoxMenuItem';

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

@@ -0,0 +1,27 @@
+import React from 'react';
+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>;
+export declare const ComboBoxStateContext: React.Context<{
+    isOpen: boolean;
+    id: string;
+    minWidth: number;
+    focusedIndex?: number | undefined;
+} | undefined>;
+export declare const ComboBoxActionContext: React.Context<((x: [ComboBoxAction] | [ComboBoxAction, number]) => void) | undefined>;
+export {};

package/cjs/core/ComboBox/helpers.js

@@ -0,0 +1,50 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ComboBoxActionContext = exports.ComboBoxStateContext = exports.ComboBoxRefsContext = exports.comboBoxReducer = 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 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;
+        }
+    }
+};
+exports.comboBoxReducer = comboBoxReducer;
+exports.ComboBoxRefsContext = react_1.default.createContext(undefined);
+exports.ComboBoxRefsContext.displayName = 'ComboBoxRefsContext';
+exports.ComboBoxStateContext = react_1.default.createContext(undefined);
+exports.ComboBoxStateContext.displayName = 'ComboBoxStateContext';
+exports.ComboBoxActionContext = react_1.default.createContext(undefined);
+exports.ComboBoxActionContext.displayName = 'ComboBoxActionContext';

package/cjs/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/cjs/core/Modal/Modal.js

@@ -35,7 +35,7 @@ var react_dom_1 = __importDefault(require("react-dom"));
 var classnames_1 = __importDefault(require("classnames"));
 var Close_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/Close"));
 var utils_1 = require("../utils");
-require("@itwin/itwinui-css/css/modal.css");
+require("@itwin/itwinui-css/css/dialog.css");
 var IconButton_1 = require("../Buttons/IconButton");
 var react_transition_group_1 = require("react-transition-group");
 /**
@@ -118,12 +118,12 @@ var Modal = function (props) {
             onClose(event);
         }
     };
-    return !!container ? (react_dom_1.default.createPortal(react_1.default.createElement(react_transition_group_1.CSSTransition, { in: isOpen, classNames: 'iui-modal-animation', timeout: { exit: 600 }, unmountOnExit: true },
+    return !!container ? (react_dom_1.default.createPortal(react_1.default.createElement(react_transition_group_1.CSSTransition, { in: isOpen, classNames: 'iui-dialog-animation', timeout: { exit: 600 }, unmountOnExit: true },
         react_1.default.createElement(utils_1.FocusTrap, null,
-            react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)('iui-modal', { 'iui-modal-full-page': styleType === 'fullPage' }, { 'iui-modal-visible': isOpen }, className), tabIndex: -1, onKeyDown: handleKeyDown, ref: overlayRef, onMouseDown: handleMouseDown }, rest),
-                react_1.default.createElement("div", { className: 'iui-modal-dialog', id: id, style: style, role: 'dialog', "aria-modal": 'true' },
-                    react_1.default.createElement("div", { className: 'iui-title-bar' },
-                        react_1.default.createElement("div", { className: 'iui-title' }, title),
+            react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)('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_1.default.createElement("div", { className: 'iui-dialog', id: id, style: style, role: 'dialog', "aria-modal": 'true' },
+                    react_1.default.createElement("div", { className: 'iui-dialog-title-bar' },
+                        react_1.default.createElement("div", { className: 'iui-dialog-title' }, title),
                         isDismissible && (react_1.default.createElement(IconButton_1.IconButton, { size: 'small', styleType: 'borderless', onClick: onClose, "aria-label": 'Close' },
                             react_1.default.createElement(Close_1.default, null)))),
                     children)))), container)) : (react_1.default.createElement(react_1.default.Fragment, null));

package/cjs/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/cjs/core/Modal/ModalButtonBar.js

@@ -33,14 +33,14 @@ exports.ModalButtonBar = void 0;
 var react_1 = __importDefault(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
 var utils_1 = require("../utils");
-require("@itwin/itwinui-css/css/modal.css");
+require("@itwin/itwinui-css/css/dialog.css");
 /**
  * Container for Buttons in modal.
  */
 var ModalButtonBar = function (props) {
     var children = props.children, className = props.className, rest = __rest(props, ["children", "className"]);
     (0, utils_1.useTheme)();
-    return (react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)('iui-button-bar', className) }, rest), children));
+    return (react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)('iui-dialog-button-bar', className) }, rest), children));
 };
 exports.ModalButtonBar = ModalButtonBar;
 exports.default = exports.ModalButtonBar;

package/cjs/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/cjs/core/Modal/ModalContent.js

@@ -33,14 +33,14 @@ exports.ModalContent = void 0;
 var react_1 = __importDefault(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
 var utils_1 = require("../utils");
-require("@itwin/itwinui-css/css/modal.css");
+require("@itwin/itwinui-css/css/dialog.css");
 /**
  * Container for content in `Modal`.
  */
 var ModalContent = function (props) {
     var children = props.children, className = props.className, rest = __rest(props, ["children", "className"]);
     (0, utils_1.useTheme)();
-    return (react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)('iui-modal-content', className) }, rest), children));
+    return (react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)('iui-dialog-content', className) }, rest), children));
 };
 exports.ModalContent = ModalContent;
 exports.default = exports.ModalContent;

package/cjs/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/cjs/core/RadioTiles/RadioTile.js

@@ -30,11 +30,10 @@ exports.RadioTile = 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 Checkmark_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/Checkmark"));
 var classnames_1 = __importDefault(require("classnames"));
 var react_1 = __importDefault(require("react"));
 var utils_1 = require("../utils");
-require("@itwin/itwinui-css/css/inputs.css");
+require("@itwin/itwinui-css/css/radio-tile.css");
 /**
  * RadioTile component to be used in RadioTileGroup component
  * @example
@@ -50,15 +49,14 @@ exports.RadioTile = react_1.default.forwardRef(function (props, ref) {
             inputElementRef.current.focus();
         }
     }, [setFocus]);
-    return (react_1.default.createElement("label", { className: className, style: style },
-        react_1.default.createElement("input", __assign({ type: 'radio', ref: refs }, rest)),
-        react_1.default.createElement("div", { className: 'iui-radio-tile' },
-            react_1.default.createElement(Checkmark_1.default, { className: 'iui-checkmark', "aria-hidden": true }),
+    return (react_1.default.createElement("label", { className: (0, classnames_1.default)('iui-radio-tile', className), style: style },
+        react_1.default.createElement("input", __assign({ className: 'iui-radio-tile-input', type: 'radio', ref: refs }, rest)),
+        react_1.default.createElement("div", { className: 'iui-radio-tile-content' },
             icon &&
                 react_1.default.cloneElement(icon, {
-                    className: (0, classnames_1.default)('iui-icon', icon.props.className),
+                    className: (0, classnames_1.default)('iui-radio-tile-icon', icon.props.className),
                 }),
-            label && react_1.default.createElement("div", { className: 'iui-label' }, label),
-            description && react_1.default.createElement("div", { className: 'iui-description' }, description))));
+            label && react_1.default.createElement("div", { className: 'iui-radio-tile-label' }, label),
+            description && (react_1.default.createElement("div", { className: 'iui-radio-tile-sublabel' }, description)))));
 });
 exports.default = exports.RadioTile;

package/cjs/core/Slider/Thumb.js

@@ -70,7 +70,21 @@ var Thumb = function (props) {
     }, [disabled, index, onThumbActivated]);
     var _a = react_1.default.useState(false), hasFocus = _a[0], setHasFocus = _a[1];
     var _b = react_1.default.useState(false), isHovered = _b[0], setIsHovered = _b[1];
-    var leftPercent = (100.0 * (value - sliderMin)) / (sliderMax - sliderMin);
+    var adjustedValue = react_1.default.useMemo(function () {
+        if (value < sliderMin) {
+            return sliderMin;
+        }
+        if (value > sliderMax) {
+            return sliderMax;
+        }
+        return value;
+    }, [sliderMax, sliderMin, value]);
+    var leftPercent = react_1.default.useMemo(function () {
+        if (sliderMax === sliderMin) {
+            return 0;
+        }
+        return (100.0 * (adjustedValue - sliderMin)) / (sliderMax - sliderMin);
+    }, [adjustedValue, sliderMax, sliderMin]);
     var _c = thumbProps || {}, style = _c.style, className = _c.className, rest = __rest(_c, ["style", "className"]);
     return (react_1.default.createElement(Tooltip_1.Tooltip, __assign({ visible: isActive || hasFocus || isHovered, placement: 'top' }, tooltipProps),
         react_1.default.createElement("div", __assign({}, rest, { "data-index": index, ref: thumbRef, style: __assign(__assign({}, style), { left: "".concat(leftPercent, "%") }), className: (0, classnames_1.default)('iui-slider-thumb', { 'iui-active': isActive }, className), role: 'slider', tabIndex: disabled ? undefined : 0, "aria-valuemin": minVal, "aria-valuenow": value, "aria-valuemax": maxVal, "aria-disabled": disabled, onPointerDown: handlePointerDownOnThumb, onKeyDown: handleOnKeyDown, onFocus: function () { return setHasFocus(true); }, onBlur: function () { return setHasFocus(false); }, onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); } }))));