@itwin/itwinui-react 1.43.0 → 1.45.0

package/cjs/core/utils/hooks/useOverflow.js

@@ -76,7 +76,10 @@ var useOverflow = function (items, disabled, orientation) {
         }
         else if (needsFullRerender.current) {
             var childrenSize = Array.from(containerRef.current.children).reduce(function (sum, child) { return sum + child["offset".concat(dimension)]; }, 0);
-            var avgItemSize = childrenSize / visibleCount;
+            // Previous `useEffect` might have updated visible count, but we still have old one
+            // If it is 0, lets try to update it with items length.
+            var currentVisibleCount = visibleCount || Math.min(items.length, STARTING_MAX_ITEMS_COUNT);
+            var avgItemSize = childrenSize / currentVisibleCount;
             var visibleItems = Math.floor(availableSize / avgItemSize);
             if (!isNaN(visibleItems)) {
                 // Doubling the visible items to overflow the container. Just to be safe.

package/esm/core/Dialog/DialogTitleBar.js

@@ -27,7 +27,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React from 'react';
 import cx from 'classnames';
 import SvgClose from '@itwin/itwinui-icons-react/cjs/icons/Close';
-import { useTheme } from '@storybook/theming';
+import { useTheme } from '../utils';
 import { IconButton } from '../Buttons';
 import '@itwin/itwinui-css/css/dialog.css';
 import { useDialogContext } from './DialogContext';

package/esm/core/Dialog/DialogTitleBarTitle.js

@@ -26,7 +26,7 @@ var __rest = (this && this.__rest) || function (s, e) {
  *--------------------------------------------------------------------------------------------*/
 import React from 'react';
 import cx from 'classnames';
-import { useTheme } from '@storybook/theming';
+import { useTheme } from '../utils';
 import '@itwin/itwinui-css/css/dialog.css';
 /**
  * Dialog title bar. Recommended to be used as a child of `Dialog`.

package/esm/core/Menu/Menu.js

@@ -37,9 +37,6 @@ export var Menu = React.forwardRef(function (props, ref) {
     var _c = React.useState(), focusedIndex = _c[0], setFocusedIndex = _c[1];
     var menuRef = React.useRef(null);
     var refs = useMergedRefs(menuRef, ref);
-    React.useEffect(function () {
-        setFocusedIndex(null);
-    }, [children]);
     var getFocusableNodes = React.useCallback(function () {
         var focusableItems = getFocusableElements(menuRef.current);
         // Filter out focusable elements that are inside each menu item, e.g. checkbox, anchor

package/esm/core/Select/Select.d.ts

@@ -44,19 +44,38 @@ export declare type SelectOption<T> = {
      */
     [key: string]: unknown;
 } & CommonProps;
-export declare type SelectProps<T> = {
+export declare type SelectValueChangeEvent = 'added' | 'removed';
+export declare type SelectMultipleTypeProps<T> = {
     /**
-     * Array of options that populates the select menu.
+     * Enable multiple selection.
+     * @default false
      */
-    options: SelectOption<T>[];
+    multiple?: false;
+    /**
+     * Custom renderer for the selected item in select.
+     * If `multiple` is enabled, it will give array of options to render.
+     */
+    selectedItemRenderer?: (option: SelectOption<T>) => JSX.Element;
     /**
      * Selected option value.
+     * If `multiple` is enabled, it is an array of values.
      */
     value?: T;
     /**
      * Callback function handling change event on select.
      */
     onChange?: (value: T) => void;
+} | {
+    multiple: true;
+    selectedItemRenderer?: (options: SelectOption<T>[]) => JSX.Element;
+    value?: T[];
+    onChange?: (value: T, event: SelectValueChangeEvent) => void;
+};
+export declare type SelectProps<T> = {
+    /**
+     * Array of options that populates the select menu.
+     */
+    options: SelectOption<T>[];
     /**
      * Placeholder when no item is selected.
      */
@@ -79,10 +98,6 @@ export declare type SelectProps<T> = {
      * Custom renderer for an item in the dropdown list. `MenuItem` item props are going to be populated if not provided.
      */
     itemRenderer?: (option: SelectOption<T>, itemProps: ItemRendererProps) => JSX.Element;
-    /**
-     * Custom renderer for the selected item in select.
-     */
-    selectedItemRenderer?: (option: SelectOption<T>) => JSX.Element;
     /**
      * Custom class for menu.
      */
@@ -96,7 +111,7 @@ export declare type SelectProps<T> = {
      * @see [tippy.js props](https://atomiks.github.io/tippyjs/v6/all-props/)
      */
     popoverProps?: Omit<PopoverProps, 'onShow' | 'onHide' | 'disabled'>;
-} & Pick<PopoverProps, 'onShow' | 'onHide'> & Omit<React.ComponentPropsWithoutRef<'div'>, 'size' | 'disabled' | 'placeholder' | 'onChange'>;
+} & SelectMultipleTypeProps<T> & Pick<PopoverProps, 'onShow' | 'onHide'> & Omit<React.ComponentPropsWithoutRef<'div'>, 'size' | 'disabled' | 'placeholder' | 'onChange'>;
 /**
  * Select component to select value from options.
  * Generic type is used for value. It prevents you from mistakenly using other types in `options`, `value` and `onChange`.

package/esm/core/Select/Select.js

@@ -28,9 +28,17 @@ import React from 'react';
 import cx from 'classnames';
 import { DropdownMenu } from '../DropdownMenu';
 import { MenuItem } from '../Menu/MenuItem';
-import { useTheme } from '../utils';
+import { useTheme, useOverflow, } from '../utils';
 import '@itwin/itwinui-css/css/inputs.css';
 import SvgCaretDownSmall from '@itwin/itwinui-icons-react/cjs/icons/CaretDownSmall';
+import SelectTag from './SelectTag';
+var isMultipleEnabled = function (variable, multiple) {
+    return multiple;
+};
+// Type guard for multiple did not work
+var isSingleOnChange = function (onChange, multiple) {
+    return !multiple;
+};
 /**
  * Select component to select value from options.
  * Generic type is used for value. It prevents you from mistakenly using other types in `options`, `value` and `onChange`.
@@ -83,13 +91,13 @@ import SvgCaretDownSmall from '@itwin/itwinui-icons-react/cjs/icons/CaretDownSma
 export var Select = function (props) {
     var _a;
     var _b;
-    var options = props.options, value = props.value, onChange = props.onChange, placeholder = props.placeholder, _c = props.disabled, disabled = _c === void 0 ? false : _c, size = props.size, _d = props.setFocus, setFocus = _d === void 0 ? false : _d, itemRenderer = props.itemRenderer, selectedItemRenderer = props.selectedItemRenderer, className = props.className, style = props.style, menuClassName = props.menuClassName, menuStyle = props.menuStyle, onShow = props.onShow, onHide = props.onHide, popoverProps = props.popoverProps, rest = __rest(props, ["options", "value", "onChange", "placeholder", "disabled", "size", "setFocus", "itemRenderer", "selectedItemRenderer", "className", "style", "menuClassName", "menuStyle", "onShow", "onHide", "popoverProps"]);
+    var options = props.options, value = props.value, onChange = props.onChange, placeholder = props.placeholder, _c = props.disabled, disabled = _c === void 0 ? false : _c, size = props.size, _d = props.setFocus, setFocus = _d === void 0 ? false : _d, itemRenderer = props.itemRenderer, selectedItemRenderer = props.selectedItemRenderer, className = props.className, style = props.style, menuClassName = props.menuClassName, menuStyle = props.menuStyle, onShow = props.onShow, onHide = props.onHide, popoverProps = props.popoverProps, _e = props.multiple, multiple = _e === void 0 ? false : _e, rest = __rest(props, ["options", "value", "onChange", "placeholder", "disabled", "size", "setFocus", "itemRenderer", "selectedItemRenderer", "className", "style", "menuClassName", "menuStyle", "onShow", "onHide", "popoverProps", "multiple"]);
     useTheme();
-    var _e = React.useState((_b = popoverProps === null || popoverProps === void 0 ? void 0 : popoverProps.visible) !== null && _b !== void 0 ? _b : false), isOpen = _e[0], setIsOpen = _e[1];
+    var _f = React.useState((_b = popoverProps === null || popoverProps === void 0 ? void 0 : popoverProps.visible) !== null && _b !== void 0 ? _b : false), isOpen = _f[0], setIsOpen = _f[1];
     React.useEffect(function () {
         setIsOpen(function (open) { var _a; return (_a = popoverProps === null || popoverProps === void 0 ? void 0 : popoverProps.visible) !== null && _a !== void 0 ? _a : open; });
     }, [popoverProps]);
-    var _f = React.useState(0), minWidth = _f[0], setMinWidth = _f[1];
+    var _g = React.useState(0), minWidth = _g[0], setMinWidth = _g[1];
     var toggle = function () { return setIsOpen(function (open) { return !open; }); };
     var selectRef = React.useRef(null);
     var toggleButtonRef = React.useRef(null);
@@ -116,8 +124,10 @@ export var Select = function (props) {
             case 'Enter':
             case ' ':
             case 'Spacebar':
-                toggle();
-                event.preventDefault();
+                if (event.target === selectRef.current) {
+                    toggle();
+                    event.preventDefault();
+                }
                 break;
             default:
                 break;
@@ -125,20 +135,41 @@ export var Select = function (props) {
     };
     var menuItems = React.useCallback(function (close) {
         return options.map(function (option, index) {
-            var isSelected = value === option.value;
+            var _a;
+            var isSelected = isMultipleEnabled(value, multiple)
+                ? (_a = value === null || value === void 0 ? void 0 : value.includes(option.value)) !== null && _a !== void 0 ? _a : false
+                : value === option.value;
             var menuItem = itemRenderer ? (itemRenderer(option, { close: close, isSelected: isSelected })) : (React.createElement(MenuItem, null, option.label));
-            return React.cloneElement(menuItem, __assign(__assign({ key: "".concat(option.label, "-").concat(index), isSelected: isSelected, onClick: function () {
-                    !option.disabled && (onChange === null || onChange === void 0 ? void 0 : onChange(option.value));
-                    close();
-                }, ref: function (el) { return isSelected && (el === null || el === void 0 ? void 0 : el.scrollIntoView()); }, role: 'option' }, option), menuItem.props));
+            var label = option.label, restOption = __rest(option, ["label"]);
+            return React.cloneElement(menuItem, __assign(__assign({ key: "".concat(label, "-").concat(index), isSelected: isSelected, onClick: function () {
+                    if (option.disabled) {
+                        return;
+                    }
+                    if (isSingleOnChange(onChange, multiple)) {
+                        onChange === null || onChange === void 0 ? void 0 : onChange(option.value);
+                        close();
+                    }
+                    else {
+                        onChange === null || onChange === void 0 ? void 0 : onChange(option.value, isSelected ? 'removed' : 'added');
+                    }
+                }, ref: function (el) {
+                    if (isSelected && !multiple) {
+                        el === null || el === void 0 ? void 0 : el.scrollIntoView();
+                    }
+                }, role: 'option' }, restOption), menuItem.props));
         });
-    }, [itemRenderer, onChange, options, value]);
-    var selectedItem = React.useMemo(function () {
+    }, [itemRenderer, multiple, onChange, options, value]);
+    var selectedItems = React.useMemo(function () {
         if (value == null) {
             return undefined;
         }
-        return options.find(function (option) { return option.value === value; });
-    }, [options, value]);
+        return isMultipleEnabled(value, multiple)
+            ? options.filter(function (option) { return value.some(function (val) { return val === option.value; }); })
+            : options.find(function (option) { return option.value === value; });
+    }, [multiple, options, value]);
+    var tagRenderer = React.useCallback(function (item) {
+        return React.createElement(SelectTag, { key: item.label, label: item.label });
+    }, []);
     return (React.createElement("div", __assign({ className: cx('iui-input-with-icon', className), "aria-expanded": isOpen, "aria-haspopup": 'listbox', style: style }, rest),
         React.createElement(DropdownMenu, __assign({ menuItems: menuItems, placement: 'bottom-start', className: cx('iui-scroll', menuClassName), style: __assign({ minWidth: minWidth, maxWidth: "min(".concat(minWidth * 2, "px, 90vw)"), maxHeight: 315 }, menuStyle), role: 'listbox', onShow: onShowHandler, onHide: onHideHandler, disabled: disabled }, popoverProps, { visible: isOpen, onClickOutside: function (_, _a) {
                 var _b;
@@ -148,21 +179,13 @@ export var Select = function (props) {
                 }
             } }),
             React.createElement("div", { ref: selectRef, className: cx('iui-select-button', (_a = {
-                        'iui-placeholder': !selectedItem && !!placeholder,
+                        'iui-placeholder': (!selectedItems || selectedItems.length === 0) && !!placeholder,
                         'iui-disabled': disabled
                     },
                     _a["iui-".concat(size)] = !!size,
                     _a)), onClick: function () { return !disabled && toggle(); }, onKeyDown: function (e) { return !disabled && onKeyDown(e, toggle); }, tabIndex: !disabled ? 0 : undefined },
-                !selectedItem && React.createElement("span", { className: 'iui-content' }, placeholder),
-                selectedItem &&
-                    selectedItemRenderer &&
-                    selectedItemRenderer(selectedItem),
-                selectedItem && !selectedItemRenderer && (React.createElement(React.Fragment, null,
-                    (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.icon) &&
-                        React.cloneElement(selectedItem.icon, {
-                            className: cx(selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.icon.props.className, 'iui-icon'),
-                        }),
-                    React.createElement("span", { className: 'iui-content' }, selectedItem.label))))),
+                (!selectedItems || selectedItems.length === 0) && (React.createElement("span", { className: 'iui-content' }, placeholder)),
+                isMultipleEnabled(selectedItems, multiple) ? (React.createElement(MultipleSelectButton, { selectedItems: selectedItems, selectedItemsRenderer: selectedItemRenderer, tagRenderer: tagRenderer })) : (React.createElement(SingleSelectButton, { selectedItem: selectedItems, selectedItemRenderer: selectedItemRenderer })))),
         React.createElement("span", { ref: toggleButtonRef, className: cx('iui-end-icon', {
                 'iui-actionable': !disabled,
                 'iui-disabled': disabled,
@@ -170,4 +193,38 @@ export var Select = function (props) {
             }), onClick: function () { return !disabled && toggle(); } },
             React.createElement(SvgCaretDownSmall, { "aria-hidden": true }))));
 };
+var SingleSelectButton = function (_a) {
+    var selectedItem = _a.selectedItem, selectedItemRenderer = _a.selectedItemRenderer;
+    return (React.createElement(React.Fragment, null,
+        selectedItem &&
+            selectedItemRenderer &&
+            selectedItemRenderer(selectedItem),
+        selectedItem && !selectedItemRenderer && (React.createElement(React.Fragment, null,
+            selectedItem.icon &&
+                React.cloneElement(selectedItem.icon, {
+                    className: cx(selectedItem.icon.props.className, 'iui-icon'),
+                }),
+            React.createElement("span", { className: 'iui-content' }, selectedItem.label)))));
+};
+var MultipleSelectButton = function (_a) {
+    var selectedItems = _a.selectedItems, selectedItemsRenderer = _a.selectedItemsRenderer, tagRenderer = _a.tagRenderer;
+    var selectedItemsElements = React.useMemo(function () {
+        if (!selectedItems) {
+            return [];
+        }
+        return selectedItems.map(function (item) { return tagRenderer(item); });
+    }, [selectedItems, tagRenderer]);
+    var _b = useOverflow(selectedItemsElements), containerRef = _b[0], visibleCount = _b[1];
+    return (React.createElement(React.Fragment, null,
+        selectedItems &&
+            selectedItemsRenderer &&
+            selectedItemsRenderer(selectedItems),
+        selectedItems && !selectedItemsRenderer && (React.createElement("span", { className: 'iui-content' },
+            React.createElement("div", { className: 'iui-select-tag-container', ref: containerRef },
+                React.createElement(React.Fragment, null,
+                    visibleCount < selectedItemsElements.length
+                        ? selectedItemsElements.slice(0, visibleCount - 1)
+                        : selectedItemsElements,
+                    visibleCount < selectedItemsElements.length && (React.createElement(SelectTag, { label: "+".concat(selectedItemsElements.length - visibleCount + 1, " item(s)") }))))))));
+};
 export default Select;

package/esm/core/Select/SelectTag.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { CommonProps } from '../utils';
+import '@itwin/itwinui-css/css/inputs.css';
+export declare type SelectTagProps = {
+    /**
+     * Text inside the tag.
+     */
+    label: string;
+} & CommonProps;
+/**
+ * Tag for showing selected value in `Select`.
+ * @private
+ */
+export declare const SelectTag: (props: SelectTagProps) => JSX.Element;
+export default SelectTag;

package/esm/core/Select/SelectTag.js

@@ -0,0 +1,41 @@
+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 { useTheme } from '../utils';
+import '@itwin/itwinui-css/css/inputs.css';
+/**
+ * Tag for showing selected value in `Select`.
+ * @private
+ */
+export var SelectTag = function (props) {
+    var className = props.className, label = props.label, rest = __rest(props, ["className", "label"]);
+    useTheme();
+    return (React.createElement("span", __assign({ className: cx('iui-select-tag', className) }, rest),
+        React.createElement("span", { className: 'iui-select-tag-label' }, label)));
+};
+export default SelectTag;

package/esm/core/Select/index.d.ts

@@ -1,4 +1,4 @@
 export { Select } from './Select';
-export type { SelectProps, SelectOption, ItemRendererProps } from './Select';
+export type { SelectProps, SelectOption, ItemRendererProps, SelectValueChangeEvent, } from './Select';
 declare const _default: "./Select";
 export default _default;

package/esm/core/Table/Table.d.ts

@@ -129,7 +129,9 @@ export declare type TableProps<T extends Record<string, unknown> = Record<string
      * Function that should return custom props passed to the each row.
      * Must be memoized.
      */
-    rowProps?: (row: Row<T>) => React.ComponentPropsWithRef<'div'>;
+    rowProps?: (row: Row<T>) => React.ComponentPropsWithRef<'div'> & {
+        status?: 'positive' | 'warning' | 'negative';
+    };
     /**
      * Modify the density of the table (adjusts the row height).
      * @default 'default'

package/esm/core/Table/Table.js

@@ -353,7 +353,8 @@ export var Table = function (props) {
                             (showFilterButton(column) ||
                                 showSortButton(column)) && (React.createElement("div", { className: 'iui-table-header-actions-container' },
                                 showFilterButton(column) && (React.createElement(FilterToggle, { column: column, ownerDocument: ownerDocument })),
-                                showSortButton(column) && (React.createElement("div", { className: 'iui-cell-end-icon' }, column.isSorted && column.isSortedDesc ? (React.createElement(SvgSortDown, { className: 'iui-icon iui-sort', "aria-hidden": true })) : (React.createElement(SvgSortUp, { className: 'iui-icon iui-sort', "aria-hidden": true })))))),
+                                showSortButton(column) && (React.createElement("div", { className: 'iui-cell-end-icon' }, column.isSortedDesc ||
+                                    (!column.isSorted && column.sortDescFirst) ? (React.createElement(SvgSortDown, { className: 'iui-icon iui-sort', "aria-hidden": true })) : (React.createElement(SvgSortUp, { className: 'iui-icon iui-sort', "aria-hidden": true })))))),
                             isResizable &&
                                 column.isResizerVisible &&
                                 index !== headerGroup.headers.length - 1 && (React.createElement("div", __assign({}, column.getResizerProps(), { className: 'iui-resizer' }),

package/esm/core/Table/TableRowMemoized.d.ts

@@ -8,7 +8,11 @@ import { CellProps, Row, TableInstance, TableState } from 'react-table';
  */
 export declare const TableRow: <T extends Record<string, unknown>>(props: {
     row: Row<T>;
-    rowProps?: ((row: Row<T>) => React.ComponentPropsWithRef<'div'>) | undefined;
+    rowProps?: ((row: Row<T>) => Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+        ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+    } & {
+        status?: "positive" | "warning" | "negative" | undefined;
+    }) | undefined;
     isLast: boolean;
     onRowInViewport: React.MutableRefObject<((rowData: T) => void) | undefined>;
     onBottomReached: React.MutableRefObject<(() => void) | undefined>;
@@ -25,7 +29,11 @@ export declare const TableRow: <T extends Record<string, unknown>>(props: {
 }) => JSX.Element;
 export declare const TableRowMemoized: <T extends Record<string, unknown>>(props: {
     row: Row<T>;
-    rowProps?: ((row: Row<T>) => React.ComponentPropsWithRef<'div'>) | undefined;
+    rowProps?: ((row: Row<T>) => Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+        ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+    } & {
+        status?: "positive" | "warning" | "negative" | undefined;
+    }) | undefined;
     isLast: boolean;
     onRowInViewport: React.MutableRefObject<((rowData: T) => void) | undefined>;
     onBottomReached: React.MutableRefObject<(() => void) | undefined>;

package/esm/core/Table/TableRowMemoized.js

@@ -9,6 +9,17 @@ var __assign = (this && this.__assign) || function () {
     };
     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.
@@ -24,6 +35,8 @@ import { TableCell } from './TableCell';
  * When adding new features check whether it changes state that affects row. If it does then add equality check to `React.memo`.
  */
 export var TableRow = function (props) {
+    var _a;
+    var _b;
     var row = props.row, rowProps = props.rowProps, isLast = props.isLast, onRowInViewport = props.onRowInViewport, onBottomReached = props.onBottomReached, intersectionMargin = props.intersectionMargin, onClick = props.onClick, subComponent = props.subComponent, isDisabled = props.isDisabled, tableHasSubRows = props.tableHasSubRows, tableInstance = props.tableInstance, expanderCell = props.expanderCell, bodyRef = props.bodyRef, tableRowRef = props.tableRowRef;
     var onIntersect = React.useCallback(function () {
         var _a, _b;
@@ -44,13 +57,16 @@ export var TableRow = function (props) {
         rootMargin: "".concat(intersectionMargin, "px"),
         root: intersectionRoot,
     });
-    var userRowProps = rowProps === null || rowProps === void 0 ? void 0 : rowProps(row);
-    var mergedProps = __assign(__assign(__assign({}, row.getRowProps({ style: { flex: "0 0 auto", minWidth: '100%' } })), userRowProps), {
-        className: cx('iui-row', {
-            'iui-selected': row.isSelected,
-            'iui-row-expanded': row.isExpanded && subComponent,
-            'iui-disabled': isDisabled,
-        }, userRowProps === null || userRowProps === void 0 ? void 0 : userRowProps.className),
+    var userRowProps = (_b = rowProps === null || rowProps === void 0 ? void 0 : rowProps(row)) !== null && _b !== void 0 ? _b : {};
+    var status = userRowProps.status, restUserRowProps = __rest(userRowProps, ["status"]);
+    var mergedProps = __assign(__assign(__assign({}, row.getRowProps({ style: { flex: "0 0 auto", minWidth: '100%' } })), restUserRowProps), {
+        className: cx('iui-row', (_a = {
+                'iui-selected': row.isSelected,
+                'iui-row-expanded': row.isExpanded && subComponent,
+                'iui-disabled': isDisabled
+            },
+            _a["iui-".concat(status)] = !!status,
+            _a), userRowProps === null || userRowProps === void 0 ? void 0 : userRowProps.className),
     });
     var refs = useMergedRefs(intersectionRef, mergedProps.ref, tableRowRef);
     return (React.createElement(React.Fragment, null,

package/esm/core/Table/cells/DefaultCell.d.ts

@@ -1,6 +1,19 @@
 import React from 'react';
 import { CellRendererProps } from 'react-table';
-export declare type DefaultCellProps<T extends Record<string, unknown>> = CellRendererProps<T> & React.ComponentPropsWithoutRef<'div'>;
+export declare type DefaultCellProps<T extends Record<string, unknown>> = {
+    /**
+     * Custom icon to be displayed at the beginning of the cell.
+     */
+    startIcon?: JSX.Element;
+    /**
+     * Custom icon to be displayed at the end of the cell.
+     */
+    endIcon?: JSX.Element;
+    /**
+     * Status of the cell.
+     */
+    status?: 'positive' | 'negative' | 'warning';
+} & CellRendererProps<T> & React.ComponentPropsWithoutRef<'div'>;
 /**
  * Default cell.
  * It should be passed to `cellRenderer`.

package/esm/core/Table/cells/DefaultCell.js

@@ -38,11 +38,17 @@ import cx from 'classnames';
  * }
  */
 export var DefaultCell = function (props) {
+    var _a;
     // Omitting `cellProps`
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    var _a = props.cellElementProps, cellElementClassName = _a.className, cellElementStyle = _a.style, cellElementProps = __rest(_a, ["className", "style"]), children = props.children, cellProps = props.cellProps, isDisabled = props.isDisabled, className = props.className, style = props.style, rest = __rest(props, ["cellElementProps", "children", "cellProps", "isDisabled", "className", "style"]);
-    return (React.createElement("div", __assign({}, cellElementProps, rest, { className: cx(cellElementClassName, className, {
-            'iui-disabled': isDisabled === null || isDisabled === void 0 ? void 0 : isDisabled(cellProps.row.original),
-        }), style: __assign(__assign({}, cellElementStyle), style) }), children));
+    var _b = props.cellElementProps, cellElementClassName = _b.className, cellElementStyle = _b.style, cellElementProps = __rest(_b, ["className", "style"]), children = props.children, startIcon = props.startIcon, endIcon = props.endIcon, cellProps = props.cellProps, isDisabled = props.isDisabled, className = props.className, style = props.style, status = props.status, rest = __rest(props, ["cellElementProps", "children", "startIcon", "endIcon", "cellProps", "isDisabled", "className", "style", "status"]);
+    return (React.createElement("div", __assign({}, cellElementProps, rest, { className: cx(cellElementClassName, className, (_a = {
+                'iui-disabled': isDisabled === null || isDisabled === void 0 ? void 0 : isDisabled(cellProps.row.original)
+            },
+            _a["iui-".concat(status)] = !!status,
+            _a)), style: __assign(__assign({}, cellElementStyle), style) }),
+        startIcon && React.createElement("div", { className: 'iui-cell-start-icon' }, startIcon),
+        children,
+        endIcon && React.createElement("div", { className: 'iui-cell-end-icon' }, endIcon)));
 };
 export default DefaultCell;

package/esm/core/index.d.ts

@@ -61,7 +61,7 @@ export type { RadioProps } from './Radio';
 export { RadioTile, RadioTileGroup } from './RadioTiles';
 export type { RadioTileGroupProps, RadioTileProps } from './RadioTiles';
 export { Select } from './Select';
-export type { SelectProps, SelectOption, ItemRendererProps } from './Select';
+export type { SelectProps, SelectOption, ItemRendererProps, SelectValueChangeEvent, } from './Select';
 export { SideNavigation, SidenavButton, SidenavSubmenu, SidenavSubmenuHeader, } from './SideNavigation';
 export type { SideNavigationProps, SidenavButtonProps, SidenavSubmenuProps, SidenavSubmenuHeaderProps, } from './SideNavigation';
 export { SkipToContentLink } from './SkipToContentLink';

package/esm/core/utils/components/MiddleTextTruncation.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { CommonProps } from '../props';
 export declare type MiddleTextTruncationProps = {
     /**
@@ -10,12 +10,26 @@ export declare type MiddleTextTruncationProps = {
      * @default 6
      */
     endCharsCount?: number;
+    /**
+     * Custom renderer for the truncated text.
+     */
+    textRenderer?: (truncatedText: string, originalText: string) => React.ReactNode;
 } & CommonProps;
 /**
  * Truncates text with the ellipsis in the middle,
  * leaving defined number of chars at the end.
  * @example
  * <MiddleTextTruncation text='ThisIsMyVeryLongFileName.dgn' />
+ * @example
+ * <MiddleTextTruncation text='ThisIsMyVeryLongFileName.dgn' endCharsCount={10} />
+ * @example
+ * <MiddleTextTruncation
+ *   text='ThisIsMyVeryLongFileName.dgn'
+ *   textRenderer={React.useCallback(
+ *     (truncatedText) => <b>{truncatedText}</b>,
+ *     []
+ *   )}
+ * />
  */
 export declare const MiddleTextTruncation: (props: MiddleTextTruncationProps) => JSX.Element;
 export default MiddleTextTruncation;

package/esm/core/utils/components/MiddleTextTruncation.js

@@ -32,10 +32,21 @@ var ELLIPSIS_CHAR = '…';
  * leaving defined number of chars at the end.
  * @example
  * <MiddleTextTruncation text='ThisIsMyVeryLongFileName.dgn' />
+ * @example
+ * <MiddleTextTruncation text='ThisIsMyVeryLongFileName.dgn' endCharsCount={10} />
+ * @example
+ * <MiddleTextTruncation
+ *   text='ThisIsMyVeryLongFileName.dgn'
+ *   textRenderer={React.useCallback(
+ *     (truncatedText) => <b>{truncatedText}</b>,
+ *     []
+ *   )}
+ * />
  */
 export var MiddleTextTruncation = function (props) {
-    var text = props.text, _a = props.endCharsCount, endCharsCount = _a === void 0 ? 6 : _a, style = props.style, rest = __rest(props, ["text", "endCharsCount", "style"]);
-    var _b = useOverflow(text), ref = _b[0], visibleCount = _b[1];
+    var _a;
+    var text = props.text, _b = props.endCharsCount, endCharsCount = _b === void 0 ? 6 : _b, textRenderer = props.textRenderer, style = props.style, rest = __rest(props, ["text", "endCharsCount", "textRenderer", "style"]);
+    var _c = useOverflow(text), ref = _c[0], visibleCount = _c[1];
     var truncatedText = React.useMemo(function () {
         if (visibleCount < text.length) {
             return "".concat(text.substring(0, visibleCount - endCharsCount - ELLIPSIS_CHAR.length)).concat(ELLIPSIS_CHAR).concat(text.substring(text.length - endCharsCount));
@@ -44,6 +55,6 @@ export var MiddleTextTruncation = function (props) {
             return text;
         }
     }, [endCharsCount, text, visibleCount]);
-    return (React.createElement("span", __assign({ style: __assign({ display: 'flex', minWidth: 0, flexGrow: 1, whiteSpace: 'nowrap' }, style), ref: ref }, rest), truncatedText));
+    return (React.createElement("span", __assign({ style: __assign({ display: 'flex', minWidth: 0, flexGrow: 1, whiteSpace: 'nowrap' }, style), ref: ref }, rest), (_a = textRenderer === null || textRenderer === void 0 ? void 0 : textRenderer(truncatedText, text)) !== null && _a !== void 0 ? _a : truncatedText));
 };
 export default MiddleTextTruncation;

package/esm/core/utils/hooks/useOverflow.js

@@ -70,7 +70,10 @@ export var useOverflow = function (items, disabled, orientation) {
         }
         else if (needsFullRerender.current) {
             var childrenSize = Array.from(containerRef.current.children).reduce(function (sum, child) { return sum + child["offset".concat(dimension)]; }, 0);
-            var avgItemSize = childrenSize / visibleCount;
+            // Previous `useEffect` might have updated visible count, but we still have old one
+            // If it is 0, lets try to update it with items length.
+            var currentVisibleCount = visibleCount || Math.min(items.length, STARTING_MAX_ITEMS_COUNT);
+            var avgItemSize = childrenSize / currentVisibleCount;
             var visibleItems = Math.floor(availableSize / avgItemSize);
             if (!isNaN(visibleItems)) {
                 // Doubling the visible items to overflow the container. Just to be safe.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/itwinui-react",
-  "version": "1.43.0",
+  "version": "1.45.0",
   "author": "Bentley Systems",
   "license": "MIT",
   "main": "cjs/index.js",