@itwin/itwinui-react 1.37.1 → 1.38.0

package/esm/core/ComboBox/ComboBoxInput.js

@@ -0,0 +1,128 @@
+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;
+    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;
+        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.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,39 @@
+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 { useSafeContext, useMergedRefs } from '../utils';
+import { ComboBoxStateContext, ComboBoxRefsContext } from './helpers';
+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;
+    var menuRef = useSafeContext(ComboBoxRefsContext).menuRef;
+    var refs = useMergedRefs(menuRef, forwardedRef);
+    return (React.createElement(Menu, __assign({ id: "".concat(id, "-list"), style: React.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: cx('iui-scroll', className) }, rest)));
+});
+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,59 @@
+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 focusedIndex = useSafeContext(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 = 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,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/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/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/Slider/Thumb.js

@@ -64,7 +64,21 @@ export var Thumb = function (props) {
     }, [disabled, index, onThumbActivated]);
     var _a = React.useState(false), hasFocus = _a[0], setHasFocus = _a[1];
     var _b = React.useState(false), isHovered = _b[0], setIsHovered = _b[1];
-    var leftPercent = (100.0 * (value - sliderMin)) / (sliderMax - sliderMin);
+    var adjustedValue = React.useMemo(function () {
+        if (value < sliderMin) {
+            return sliderMin;
+        }
+        if (value > sliderMax) {
+            return sliderMax;
+        }
+        return value;
+    }, [sliderMax, sliderMin, value]);
+    var leftPercent = React.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.createElement(Tooltip, __assign({ visible: isActive || hasFocus || isHovered, placement: 'top' }, tooltipProps),
         React.createElement("div", __assign({}, rest, { "data-index": index, ref: thumbRef, style: __assign(__assign({}, style), { left: "".concat(leftPercent, "%") }), className: cx('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); } }))));

package/esm/core/Slider/Track.js

@@ -23,10 +23,18 @@ function shouldDisplaySegment(segmentIndex, mode) {
 }
 function generateSegments(values, min, max) {
     var segments = [];
+    var newValues = __spreadArray([], values, true);
+    newValues.sort(function (a, b) { return a - b; });
+    if (0 === newValues.length ||
+        newValues[0] < min ||
+        newValues[newValues.length - 1] > max ||
+        min === max) {
+        return [];
+    }
     var lastValue = min;
-    for (var i = 0; i < values.length; i++) {
-        segments.push({ left: lastValue, right: values[i] });
-        lastValue = values[i];
+    for (var i = 0; i < newValues.length; i++) {
+        segments.push({ left: lastValue, right: newValues[i] });
+        lastValue = newValues[i];
     }
     segments.push({ left: lastValue, right: max });
     return segments;
@@ -37,18 +45,21 @@ function generateSegments(values, min, max) {
  */
 export var Track = function (props) {
     var trackDisplayMode = props.trackDisplayMode, sliderMin = props.sliderMin, sliderMax = props.sliderMax, values = props.values;
-    var _a = React.useState(__spreadArray([], values, true).sort(function (a, b) { return a - b; })), currentValues = _a[0], setCurrentValues = _a[1];
+    var _a = React.useState(function () {
+        return generateSegments(values, sliderMin, sliderMax);
+    }), segments = _a[0], setSegments = _a[1];
     React.useEffect(function () {
-        var newValues = __spreadArray([], values, true);
-        newValues.sort(function (a, b) { return a - b; });
-        setCurrentValues(newValues);
-    }, [values]);
-    var segments = React.useMemo(function () { return generateSegments(currentValues, sliderMin, sliderMax); }, [currentValues, sliderMin, sliderMax]);
+        setSegments(generateSegments(values, sliderMin, sliderMax));
+    }, [values, sliderMin, sliderMax]);
     return (React.createElement(React.Fragment, null, 'none' !== trackDisplayMode &&
         segments.map(function (segment, index) {
-            var leftPercent = (100.0 * (segment.left - sliderMin)) / (sliderMax - sliderMin);
-            var rightPercent = (100.0 * (segment.right - sliderMin)) / (sliderMax - sliderMin);
-            rightPercent = 100.0 - rightPercent;
+            var leftPercent = segment.left >= sliderMin && sliderMax !== sliderMin
+                ? (100.0 * (segment.left - sliderMin)) / (sliderMax - sliderMin)
+                : 0;
+            var rightPercent = segment.right >= sliderMin && sliderMax !== sliderMin
+                ? 100.0 -
+                    (100.0 * (segment.right - sliderMin)) / (sliderMax - sliderMin)
+                : 100;
             return (React.createElement(React.Fragment, { key: index }, shouldDisplaySegment(index, trackDisplayMode) ? (React.createElement("div", { className: 'iui-slider-track', style: { left: "".concat(leftPercent, "%"), right: "".concat(rightPercent, "%") } })) : null));
         })));
 };