@itwin/itwinui-react 1.37.3 → 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/Table/Table.js

@@ -180,7 +180,7 @@ export var Table = function (props) {
         }
         return result;
     }, {});
-    var areFiltersSet = allColumns.some(function (column) { return !!column.filterValue; });
+    var areFiltersSet = allColumns.some(function (column) { return column.filterValue != null && column.filterValue !== ''; });
     var onRowClickHandler = React.useCallback(function (event, row) {
         var isDisabled = isRowDisabled === null || isRowDisabled === void 0 ? void 0 : isRowDisabled(row.original);
         if (!isDisabled) {
@@ -296,7 +296,7 @@ export var Table = function (props) {
                     className: 'iui-row',
                 });
                 return (React.createElement("div", __assign({}, headerGroupProps, { key: headerGroupProps.key }), headerGroup.headers.map(function (column, index) {
-                    var columnProps = column.getHeaderProps(__assign(__assign({}, column.getSortByToggleProps()), { className: cx('iui-cell', { 'iui-actionable': column.canSort }, { 'iui-sorted': column.isSorted }, column.columnClassName), style: __assign({}, getCellStyle(column, !!state.isTableResizing)) }));
+                    var columnProps = column.getHeaderProps(__assign(__assign({}, column.getSortByToggleProps()), { className: cx('iui-cell', { 'iui-actionable': column.canSort }, { 'iui-sorted': column.isSorted }, column.columnClassName), style: __assign(__assign({}, getCellStyle(column, !!state.isTableResizing)), { flexWrap: 'unset' }) }));
                     return (React.createElement("div", __assign({}, columnProps, column.getDragAndDropProps(), { key: columnProps.key, title: undefined, ref: function (el) {
                             if (el && isResizable) {
                                 columnRefs.current[column.id] = el;

package/esm/core/Table/filters/FilterToggle.js

@@ -47,10 +47,11 @@ export var FilterToggle = function (props) {
         column.setFilter(undefined);
         close();
     }, [close, column]);
+    var isColumnFiltered = column.filterValue != null && column.filterValue !== '';
     return (React.createElement(React.Fragment, null, column.canFilter && column.Filter && (React.createElement(Popover, { content: column.render('Filter', { close: close, setFilter: setFilter, clearFilter: clearFilter }), placement: 'bottom-start', visible: isVisible, onClickOutside: close, appendTo: ownerDocument === null || ownerDocument === void 0 ? void 0 : ownerDocument.body },
-        React.createElement(IconButton, __assign({ styleType: 'borderless', isActive: isVisible || column.filterValue, className: cx('iui-filter-button', className), onClick: function (e) {
+        React.createElement(IconButton, __assign({ styleType: 'borderless', isActive: isVisible || isColumnFiltered, className: cx('iui-filter-button', className), onClick: function (e) {
                 setIsVisible(function (v) { return !v; });
                 // Prevents from triggering sort
                 e.stopPropagation();
-            } }, rest), column.filterValue ? React.createElement(SvgFilter, null) : React.createElement(SvgFilterHollow, null))))));
+            } }, rest), isColumnFiltered ? React.createElement(SvgFilter, null) : React.createElement(SvgFilterHollow, null))))));
 };

package/esm/core/Toast/ToastWrapper.d.ts

@@ -1,9 +1,11 @@
-/// <reference types="react" />
 import '@itwin/itwinui-css/css/toast-notification.css';
+import React from 'react';
 import { ToastProps } from './Toast';
 import { ToasterSettings } from './Toaster';
-declare type ToastWrapperProps = {
-    toasts: ToastProps[];
-} & Pick<ToasterSettings, 'placement'>;
-export declare const ToastWrapper: (props: ToastWrapperProps) => JSX.Element;
+declare type ToastPlacement = NonNullable<ToasterSettings['placement']>;
+export declare type ToastWrapperHandle = {
+    setToasts: (toasts: ToastProps[]) => void;
+    setPlacement: (placement: ToastPlacement) => void;
+};
+export declare const ToastWrapper: React.ForwardRefExoticComponent<React.RefAttributes<ToastWrapperHandle>>;
 export {};

package/esm/core/Toast/ToastWrapper.js

@@ -17,10 +17,15 @@ import '@itwin/itwinui-css/css/toast-notification.css';
 import React from 'react';
 import cx from 'classnames';
 import Toast from './Toast';
-export var ToastWrapper = function (props) {
-    var toasts = props.toasts, _a = props.placement, placement = _a === void 0 ? 'top' : _a;
+export var ToastWrapper = React.forwardRef(function (_, ref) {
+    var _a = React.useState([]), toasts = _a[0], setToasts = _a[1];
+    var _b = React.useState('top'), placement = _b[0], setPlacement = _b[1];
     var placementPosition = placement.startsWith('top') ? 'top' : 'bottom';
+    React.useImperativeHandle(ref, function () { return ({
+        setToasts: setToasts,
+        setPlacement: setPlacement,
+    }); }, []);
     return (React.createElement("span", { className: cx("iui-toast-wrapper", "iui-placement-".concat(placement)) }, toasts.map(function (toastProps) {
         return (React.createElement(Toast, __assign({ key: toastProps.id, placementPosition: placementPosition }, toastProps)));
     })));
-};
+});

package/esm/core/Toast/Toaster.d.ts

@@ -20,6 +20,8 @@ export default class Toaster {
     private toasts;
     private lastId;
     private settings;
+    private toastsRef;
+    private isInitialized;
     /**
      * Set global Toaster settings for toasts order and placement.
      * Settings will be applied to new toasts on the page.
@@ -39,6 +41,7 @@ export default class Toaster {
     };
     private createToast;
     private removeToast;
+    private createContainer;
     private updateView;
     private closeToast;
     closeAll(): void;