@itwin/itwinui-react 1.37.1 → 1.38.0

package/cjs/core/Slider/Track.js

@@ -29,10 +29,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;
@@ -43,18 +51,21 @@ function generateSegments(values, min, max) {
  */
 var Track = function (props) {
     var trackDisplayMode = props.trackDisplayMode, sliderMin = props.sliderMin, sliderMax = props.sliderMax, values = props.values;
-    var _a = react_1.default.useState(__spreadArray([], values, true).sort(function (a, b) { return a - b; })), currentValues = _a[0], setCurrentValues = _a[1];
+    var _a = react_1.default.useState(function () {
+        return generateSegments(values, sliderMin, sliderMax);
+    }), segments = _a[0], setSegments = _a[1];
     react_1.default.useEffect(function () {
-        var newValues = __spreadArray([], values, true);
-        newValues.sort(function (a, b) { return a - b; });
-        setCurrentValues(newValues);
-    }, [values]);
-    var segments = react_1.default.useMemo(function () { return generateSegments(currentValues, sliderMin, sliderMax); }, [currentValues, sliderMin, sliderMax]);
+        setSegments(generateSegments(values, sliderMin, sliderMax));
+    }, [values, sliderMin, sliderMax]);
     return (react_1.default.createElement(react_1.default.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_1.default.createElement(react_1.default.Fragment, { key: index }, shouldDisplaySegment(index, trackDisplayMode) ? (react_1.default.createElement("div", { className: 'iui-slider-track', style: { left: "".concat(leftPercent, "%"), right: "".concat(rightPercent, "%") } })) : null));
         })));
 };

package/cjs/core/Table/Table.js

@@ -49,6 +49,16 @@ var columns_1 = require("./columns");
 var singleRowSelectedAction = 'singleRowSelected';
 exports.tableResizeStartAction = 'tableResizeStart';
 var tableResizeEndAction = 'tableResizeEnd';
+var flattenColumns = function (columns) {
+    var flatColumns = [];
+    columns.forEach(function (column) {
+        flatColumns.push(column);
+        if (column.columns) {
+            flatColumns.push.apply(flatColumns, flattenColumns(column.columns));
+        }
+    });
+    return flatColumns;
+};
 /**
  * Table based on [react-table](https://react-table.tanstack.com/docs/api/overview).
  * @example
@@ -93,10 +103,9 @@ var tableResizeEndAction = 'tableResizeEnd';
  */
 var Table = function (props) {
     var _a;
-    var _b;
-    var data = props.data, columns = props.columns, _c = props.isLoading, isLoading = _c === void 0 ? false : _c, emptyTableContent = props.emptyTableContent, className = props.className, style = props.style, id = props.id, _d = props.isSelectable, isSelectable = _d === void 0 ? false : _d, onSelect = props.onSelect, onRowClick = props.onRowClick, _e = props.selectionMode, selectionMode = _e === void 0 ? 'multi' : _e, _f = props.isSortable, isSortable = _f === void 0 ? false : _f, onSort = props.onSort, stateReducer = props.stateReducer, onBottomReached = props.onBottomReached, onRowInViewport = props.onRowInViewport, _g = props.intersectionMargin, intersectionMargin = _g === void 0 ? 300 : _g, subComponent = props.subComponent, onExpand = props.onExpand, onFilter = props.onFilter, emptyFilteredTableContent = props.emptyFilteredTableContent, filterFunctions = props.filterTypes, expanderCell = props.expanderCell, isRowDisabled = props.isRowDisabled, rowProps = props.rowProps, _h = props.density, density = _h === void 0 ? 'default' : _h, _j = props.selectSubRows, selectSubRows = _j === void 0 ? true : _j, getSubRows = props.getSubRows, _k = props.selectRowOnClick, selectRowOnClick = _k === void 0 ? true : _k, paginatorRenderer = props.paginatorRenderer, _l = props.pageSize, pageSize = _l === void 0 ? 25 : _l, _m = props.isResizable, isResizable = _m === void 0 ? false : _m, _o = props.styleType, styleType = _o === void 0 ? 'default' : _o, _p = props.enableVirtualization, enableVirtualization = _p === void 0 ? false : _p, _q = props.enableColumnReordering, enableColumnReordering = _q === void 0 ? false : _q, rest = __rest(props, ["data", "columns", "isLoading", "emptyTableContent", "className", "style", "id", "isSelectable", "onSelect", "onRowClick", "selectionMode", "isSortable", "onSort", "stateReducer", "onBottomReached", "onRowInViewport", "intersectionMargin", "subComponent", "onExpand", "onFilter", "emptyFilteredTableContent", "filterTypes", "expanderCell", "isRowDisabled", "rowProps", "density", "selectSubRows", "getSubRows", "selectRowOnClick", "paginatorRenderer", "pageSize", "isResizable", "styleType", "enableVirtualization", "enableColumnReordering"]);
+    var data = props.data, columns = props.columns, _b = props.isLoading, isLoading = _b === void 0 ? false : _b, emptyTableContent = props.emptyTableContent, className = props.className, style = props.style, id = props.id, _c = props.isSelectable, isSelectable = _c === void 0 ? false : _c, onSelect = props.onSelect, onRowClick = props.onRowClick, _d = props.selectionMode, selectionMode = _d === void 0 ? 'multi' : _d, _e = props.isSortable, isSortable = _e === void 0 ? false : _e, onSort = props.onSort, stateReducer = props.stateReducer, onBottomReached = props.onBottomReached, onRowInViewport = props.onRowInViewport, _f = props.intersectionMargin, intersectionMargin = _f === void 0 ? 300 : _f, subComponent = props.subComponent, onExpand = props.onExpand, onFilter = props.onFilter, emptyFilteredTableContent = props.emptyFilteredTableContent, filterFunctions = props.filterTypes, expanderCell = props.expanderCell, isRowDisabled = props.isRowDisabled, rowProps = props.rowProps, _g = props.density, density = _g === void 0 ? 'default' : _g, _h = props.selectSubRows, selectSubRows = _h === void 0 ? true : _h, getSubRows = props.getSubRows, _j = props.selectRowOnClick, selectRowOnClick = _j === void 0 ? true : _j, paginatorRenderer = props.paginatorRenderer, _k = props.pageSize, pageSize = _k === void 0 ? 25 : _k, _l = props.isResizable, isResizable = _l === void 0 ? false : _l, _m = props.styleType, styleType = _m === void 0 ? 'default' : _m, _o = props.enableVirtualization, enableVirtualization = _o === void 0 ? false : _o, _p = props.enableColumnReordering, enableColumnReordering = _p === void 0 ? false : _p, rest = __rest(props, ["data", "columns", "isLoading", "emptyTableContent", "className", "style", "id", "isSelectable", "onSelect", "onRowClick", "selectionMode", "isSortable", "onSort", "stateReducer", "onBottomReached", "onRowInViewport", "intersectionMargin", "subComponent", "onExpand", "onFilter", "emptyFilteredTableContent", "filterTypes", "expanderCell", "isRowDisabled", "rowProps", "density", "selectSubRows", "getSubRows", "selectRowOnClick", "paginatorRenderer", "pageSize", "isResizable", "styleType", "enableVirtualization", "enableColumnReordering"]);
     (0, utils_1.useTheme)();
-    var _r = react_1.default.useState(), ownerDocument = _r[0], setOwnerDocument = _r[1];
+    var _q = react_1.default.useState(), ownerDocument = _q[0], setOwnerDocument = _q[1];
     var defaultColumn = react_1.default.useMemo(function () { return ({
         maxWidth: 0,
         minWidth: 0,
@@ -109,7 +118,10 @@ var Table = function (props) {
         onBottomReachedRef.current = onBottomReached;
         onRowInViewportRef.current = onRowInViewport;
     }, [onBottomReached, onRowInViewport]);
-    var hasManualSelectionColumn = (_b = columns[0]) === null || _b === void 0 ? void 0 : _b.columns.some(function (column) { return column.id === columns_1.SELECTION_CELL_ID; });
+    var hasManualSelectionColumn = react_1.default.useMemo(function () {
+        var flatColumns = flattenColumns(columns);
+        return flatColumns.some(function (column) { return column.id === columns_1.SELECTION_CELL_ID; });
+    }, [columns]);
     var tableStateReducer = react_1.default.useCallback(function (newState, action, previousState, instance) {
         switch (action.type) {
             case react_table_1.actions.toggleSortBy:
@@ -174,7 +186,7 @@ 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_1.default.useCallback(function (event, row) {
         var isDisabled = isRowDisabled === null || isRowDisabled === void 0 ? void 0 : isRowDisabled(row.original);
         if (!isDisabled) {
@@ -290,7 +302,7 @@ var Table = function (props) {
                     className: 'iui-row',
                 });
                 return (react_1.default.createElement("div", __assign({}, headerGroupProps, { key: headerGroupProps.key }), headerGroup.headers.map(function (column, index) {
-                    var columnProps = column.getHeaderProps(__assign(__assign({}, column.getSortByToggleProps()), { className: (0, classnames_1.default)('iui-cell', { 'iui-actionable': column.canSort }, { 'iui-sorted': column.isSorted }, column.columnClassName), style: __assign({}, (0, utils_2.getCellStyle)(column, !!state.isTableResizing)) }));
+                    var columnProps = column.getHeaderProps(__assign(__assign({}, column.getSortByToggleProps()), { className: (0, classnames_1.default)('iui-cell', { 'iui-actionable': column.canSort }, { 'iui-sorted': column.isSorted }, column.columnClassName), style: __assign(__assign({}, (0, utils_2.getCellStyle)(column, !!state.isTableResizing)), { flexWrap: 'unset' }) }));
                     return (react_1.default.createElement("div", __assign({}, columnProps, column.getDragAndDropProps(), { key: columnProps.key, title: undefined, ref: function (el) {
                             if (el && isResizable) {
                                 columnRefs.current[column.id] = el;
@@ -299,7 +311,7 @@ var Table = function (props) {
                         } }),
                         column.render('Header'),
                         (data.length !== 0 || areFiltersSet) && (react_1.default.createElement(filters_1.FilterToggle, { column: column, ownerDocument: ownerDocument })),
-                        data.length !== 0 && column.canSort && (react_1.default.createElement("div", { className: 'iui-cell-end-icon' }, column.isSorted && column.isSortedDesc ? (react_1.default.createElement(SortUp_1.default, { className: 'iui-icon iui-sort', "aria-hidden": true })) : (react_1.default.createElement(SortDown_1.default, { className: 'iui-icon iui-sort', "aria-hidden": true })))),
+                        data.length !== 0 && column.canSort && (react_1.default.createElement("div", { className: 'iui-cell-end-icon' }, column.isSorted && column.isSortedDesc ? (react_1.default.createElement(SortDown_1.default, { className: 'iui-icon iui-sort', "aria-hidden": true })) : (react_1.default.createElement(SortUp_1.default, { className: 'iui-icon iui-sort', "aria-hidden": true })))),
                         isResizable &&
                             column.isResizerVisible &&
                             index !== headerGroup.headers.length - 1 && (react_1.default.createElement("div", __assign({}, column.getResizerProps(), { className: 'iui-resizer' }),

package/cjs/core/Table/cells/EditableCell.js

@@ -42,7 +42,8 @@ var react_1 = __importDefault(require("react"));
  * }
  */
 var EditableCell = function (props) {
-    var cellElementProps = props.cellElementProps, cellProps = props.cellProps, onCellEdit = props.onCellEdit, children = props.children, rest = __rest(props, ["cellElementProps", "cellProps", "onCellEdit", "children"]);
+    var cellElementProps = props.cellElementProps, cellProps = props.cellProps, onCellEdit = props.onCellEdit, children = props.children, isDisabled = props.isDisabled, rest = __rest(props, ["cellElementProps", "cellProps", "onCellEdit", "children", "isDisabled"]);
+    isDisabled; // To omit and prevent eslint error.
     var sanitizeString = function (text) {
         return text.replace(/(\r\n|\n|\r)+/gm, ' ');
     };

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

@@ -53,11 +53,12 @@ var FilterToggle = function (props) {
         column.setFilter(undefined);
         close();
     }, [close, column]);
+    var isColumnFiltered = column.filterValue != null && column.filterValue !== '';
     return (react_1.default.createElement(react_1.default.Fragment, null, column.canFilter && column.Filter && (react_1.default.createElement(utils_1.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_1.default.createElement(Buttons_1.IconButton, __assign({ styleType: 'borderless', isActive: isVisible || column.filterValue, className: (0, classnames_1.default)('iui-filter-button', className), onClick: function (e) {
+        react_1.default.createElement(Buttons_1.IconButton, __assign({ styleType: 'borderless', isActive: isVisible || isColumnFiltered, className: (0, classnames_1.default)('iui-filter-button', className), onClick: function (e) {
                 setIsVisible(function (v) { return !v; });
                 // Prevents from triggering sort
                 e.stopPropagation();
-            } }, rest), column.filterValue ? react_1.default.createElement(Filter_1.default, null) : react_1.default.createElement(FilterHollow_1.default, null))))));
+            } }, rest), isColumnFiltered ? react_1.default.createElement(Filter_1.default, null) : react_1.default.createElement(FilterHollow_1.default, null))))));
 };
 exports.FilterToggle = FilterToggle;

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

@@ -23,11 +23,15 @@ require("@itwin/itwinui-css/css/toast-notification.css");
 var react_1 = __importDefault(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
 var Toast_1 = __importDefault(require("./Toast"));
-var ToastWrapper = function (props) {
-    var toasts = props.toasts, _a = props.placement, placement = _a === void 0 ? 'top' : _a;
+exports.ToastWrapper = react_1.default.forwardRef(function (_, ref) {
+    var _a = react_1.default.useState([]), toasts = _a[0], setToasts = _a[1];
+    var _b = react_1.default.useState('top'), placement = _b[0], setPlacement = _b[1];
     var placementPosition = placement.startsWith('top') ? 'top' : 'bottom';
+    react_1.default.useImperativeHandle(ref, function () { return ({
+        setToasts: setToasts,
+        setPlacement: setPlacement,
+    }); }, []);
     return (react_1.default.createElement("span", { className: (0, classnames_1.default)("iui-toast-wrapper", "iui-placement-".concat(placement)) }, toasts.map(function (toastProps) {
         return (react_1.default.createElement(Toast_1.default, __assign({ key: toastProps.id, placementPosition: placementPosition }, toastProps)));
     })));
-};
-exports.ToastWrapper = ToastWrapper;
+});

package/cjs/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;

package/cjs/core/Toast/Toaster.js

@@ -10,6 +10,42 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
 var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
         if (ar || !(i in from)) {
@@ -40,18 +76,21 @@ var Toaster = /** @class */ (function () {
             order: 'descending',
             placement: 'top',
         };
+        this.toastsRef = react_1.default.createRef();
+        this.isInitialized = false;
     }
     /**
      * Set global Toaster settings for toasts order and placement.
      * Settings will be applied to new toasts on the page.
      */
     Toaster.prototype.setSettings = function (newSettings) {
-        var _a, _b, _c;
+        var _a, _b, _c, _d, _e;
         (_a = newSettings.placement) !== null && _a !== void 0 ? _a : (newSettings.placement = this.settings.placement);
         (_b = newSettings.order) !== null && _b !== void 0 ? _b : (newSettings.order = ((_c = newSettings.placement) === null || _c === void 0 ? void 0 : _c.startsWith('bottom'))
             ? 'ascending'
             : 'descending');
         this.settings = newSettings;
+        (_d = this.toastsRef.current) === null || _d === void 0 ? void 0 : _d.setPlacement((_e = this.settings.placement) !== null && _e !== void 0 ? _e : 'top');
     };
     Toaster.prototype.positive = function (content, options) {
         return this.createToast(content, 'positive', options);
@@ -83,12 +122,34 @@ var Toaster = /** @class */ (function () {
         this.toasts = this.toasts.filter(function (toast) { return toast.id !== id; });
         this.updateView();
     };
+    // Create container on demand.
+    // Cannot do it in constructor, because SSG/SSR apps would fail.
+    Toaster.prototype.createContainer = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            var container;
+            return __generator(this, function (_a) {
+                container = (0, utils_1.getContainer)(TOASTS_CONTAINER_ID);
+                if (!container) {
+                    return [2 /*return*/];
+                }
+                react_dom_1.default.render(react_1.default.createElement(ToastWrapper_1.ToastWrapper, { ref: this.toastsRef }), container);
+                return [2 /*return*/];
+            });
+        });
+    };
     Toaster.prototype.updateView = function () {
-        var container = (0, utils_1.getContainer)(TOASTS_CONTAINER_ID);
-        if (!container) {
-            return;
+        var _this = this;
+        var _a;
+        if (!this.isInitialized) {
+            this.createContainer().then(function () {
+                var _a;
+                _this.isInitialized = true;
+                (_a = _this.toastsRef.current) === null || _a === void 0 ? void 0 : _a.setToasts(_this.toasts);
+            });
+        }
+        else {
+            (_a = this.toastsRef.current) === null || _a === void 0 ? void 0 : _a.setToasts(this.toasts);
         }
-        react_dom_1.default.render(react_1.default.createElement(ToastWrapper_1.ToastWrapper, { toasts: this.toasts, placement: this.settings.placement }), container);
     };
     Toaster.prototype.closeToast = function (toastId) {
         this.toasts = this.toasts.map(function (toast) {

package/cjs/core/utils/components/Popover.d.ts

@@ -43,7 +43,7 @@ export declare const Popover: React.ForwardRefExoticComponent<Pick<{
      * @see [tippy.js placement prop](https://atomiks.github.io/tippyjs/v6/all-props/#placement).
      */
     placement?: import("@popperjs/core").Placement | undefined;
-} & Omit<TippyProps, "placement" | "trigger" | "visible">, "disabled" | "placement" | "trigger" | "visible" | "content" | "render" | "animateFill" | "appendTo" | "aria" | "delay" | "duration" | "followCursor" | "getReferenceClientRect" | "hideOnClick" | "ignoreAttributes" | "inlinePositioning" | "interactive" | "interactiveBorder" | "interactiveDebounce" | "moveTransition" | "offset" | "plugins" | "popperOptions" | "showOnCreate" | "sticky" | "touch" | "triggerTarget" | "onAfterUpdate" | "onBeforeUpdate" | "onCreate" | "onDestroy" | "onHidden" | "onHide" | "onMount" | "onShow" | "onShown" | "onTrigger" | "onUntrigger" | "onClickOutside" | "allowHTML" | "animation" | "arrow" | "inertia" | "maxWidth" | "role" | "theme" | "zIndex" | "children" | "className" | "singleton" | "reference"> & React.RefAttributes<unknown>>;
+} & Omit<TippyProps, "placement" | "trigger" | "visible">, "disabled" | "children" | "placement" | "trigger" | "visible" | "content" | "render" | "animateFill" | "appendTo" | "aria" | "delay" | "duration" | "followCursor" | "getReferenceClientRect" | "hideOnClick" | "ignoreAttributes" | "inlinePositioning" | "interactive" | "interactiveBorder" | "interactiveDebounce" | "moveTransition" | "offset" | "plugins" | "popperOptions" | "showOnCreate" | "sticky" | "touch" | "triggerTarget" | "onAfterUpdate" | "onBeforeUpdate" | "onCreate" | "onDestroy" | "onHidden" | "onHide" | "onMount" | "onShow" | "onShown" | "onTrigger" | "onUntrigger" | "onClickOutside" | "allowHTML" | "animation" | "arrow" | "inertia" | "maxWidth" | "role" | "theme" | "zIndex" | "className" | "singleton" | "reference"> & React.RefAttributes<unknown>>;
 /**
  * Plugin to hide Popover when either Esc key is pressed,
  * or when the content inside is not tabbable and Tab key is pressed.

package/cjs/core/utils/hooks/index.d.ts

@@ -6,3 +6,4 @@ export * from './useContainerWidth';
 export * from './useTheme';
 export * from './useIntersection';
 export * from './useMediaQuery';
+export * from './useSafeContext';

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

@@ -26,3 +26,4 @@ __exportStar(require("./useContainerWidth"), exports);
 __exportStar(require("./useTheme"), exports);
 __exportStar(require("./useIntersection"), exports);
 __exportStar(require("./useMediaQuery"), exports);
+__exportStar(require("./useSafeContext"), exports);

package/cjs/core/utils/hooks/useSafeContext.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+/**
+ * Wrapper hook around `useContext` that throws an error if the context is not provided.
+ * @param context Context to use. Must have a `displayName` for useful errors.
+ */
+export declare const useSafeContext: <T>(context: React.Context<T>) => NonNullable<T>;

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

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSafeContext = void 0;
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+var react_1 = __importDefault(require("react"));
+/**
+ * Wrapper hook around `useContext` that throws an error if the context is not provided.
+ * @param context Context to use. Must have a `displayName` for useful errors.
+ */
+var useSafeContext = function (context) {
+    var value = react_1.default.useContext(context);
+    if (!value) {
+        throw new Error("".concat(context.displayName, " is undefined"));
+    }
+    return value; // eslint-disable-line @typescript-eslint/no-non-null-assertion -- we already checked for undefined
+};
+exports.useSafeContext = useSafeContext;

package/esm/core/Breadcrumbs/Breadcrumbs.js

@@ -61,9 +61,7 @@ export var Breadcrumbs = React.forwardRef(function (props, ref) {
         var _b;
         var index = _a.index;
         var item = items[index];
-        return (React.createElement("li", { className: cx('iui-breadcrumbs-item', {
-                'iui-current': currentIndex === index,
-            }) }, React.isValidElement(item)
+        return (React.createElement("li", { className: 'iui-breadcrumbs-item iui-breadcrumbs-item-overrides' }, React.isValidElement(item)
             ? React.cloneElement(item, {
                 'aria-current': ((_b = item.props['aria-current']) !== null && _b !== void 0 ? _b : currentIndex === index)
                     ? 'location'
@@ -77,8 +75,8 @@ export var Breadcrumbs = React.forwardRef(function (props, ref) {
                 React.createElement(ListItem, { index: 0 }),
                 React.createElement(Separator, null))),
             items.length - visibleCount > 0 && (React.createElement(React.Fragment, null,
-                React.createElement("li", { className: 'iui-breadcrumbs-item' },
-                    React.createElement("span", null, "\u2026")),
+                React.createElement("li", { className: 'iui-breadcrumbs-item iui-breadcrumbs-item-overrides' },
+                    React.createElement("span", { className: 'iui-breadcrumbs-text' }, "\u2026")),
                 React.createElement(Separator, null))),
             items
                 .slice(visibleCount > 1

package/esm/core/ColorPicker/ColorSwatch.d.ts

@@ -17,5 +17,5 @@ export declare type ColorSwatchProps = {
  * <ColorSwatch color='#23450b' onClick={onClick}/>
  * <ColorSwatch color={{ r: 255, g: 255, b: 0 }} onClick={onClick}/>
  */
-export declare const ColorSwatch: React.ForwardRefExoticComponent<Pick<ColorSwatchProps, "dir" | "slot" | "style" | "title" | "id" | "aria-disabled" | "role" | "children" | "className" | "onClick" | "accessKey" | "draggable" | "hidden" | "lang" | "translate" | "prefix" | "contentEditable" | "inputMode" | "tabIndex" | "onFocus" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "color" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "contextMenu" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "is" | "isActive"> & React.RefAttributes<HTMLDivElement>>;
+export declare const ColorSwatch: React.ForwardRefExoticComponent<Pick<ColorSwatchProps, "dir" | "slot" | "style" | "title" | "id" | "aria-disabled" | "children" | "role" | "className" | "onClick" | "accessKey" | "draggable" | "hidden" | "lang" | "translate" | "prefix" | "contentEditable" | "inputMode" | "tabIndex" | "onFocus" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "color" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "contextMenu" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "is" | "isActive"> & React.RefAttributes<HTMLDivElement>>;
 export default ColorSwatch;

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

@@ -40,8 +40,10 @@ export declare type ComboBoxProps<T> = {
     emptyStateMessage?: string;
     /**
      * A custom item renderer can be specified to control the rendering.
-     * This function should ideally return a customized version of `MenuItem`,
-     * otherwise you will need to make sure to provide styling for the `isFocused` state.
+     *
+     * For keyboard navigation to work, the returned element should use the `id` provided by this function.
+     * The `isFocused` state is calculated using this `id` and can be used for specifying the focus styling.
+     * If a `MenuItem` is returned, then focus styling is automatically handled.
      */
     itemRenderer?: (option: SelectOption<T>, states: {
         isSelected: boolean;