@itwin/itwinui-react 1.24.0 → 1.27.0

package/cjs/core/Table/TableRowMemoized.js

@@ -14,7 +14,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TableRowMemoized = void 0;
+exports.TableRowMemoized = exports.TableRow = void 0;
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
@@ -59,6 +59,7 @@ var TableRow = function (props) {
         subComponent && (react_1.default.createElement(utils_1.WithCSSTransition, { in: row.isExpanded },
             react_1.default.createElement("div", { className: 'iui-row iui-expanded-content' }, subComponent(row))))));
 };
+exports.TableRow = TableRow;
 var hasAnySelectedSubRow = function (row, selectedRowIds) {
     if (selectedRowIds === null || selectedRowIds === void 0 ? void 0 : selectedRowIds[row.id]) {
         return true;
@@ -67,7 +68,7 @@ var hasAnySelectedSubRow = function (row, selectedRowIds) {
         return hasAnySelectedSubRow(subRow, selectedRowIds);
     });
 };
-exports.TableRowMemoized = react_1.default.memo(TableRow, function (prevProp, nextProp) {
+exports.TableRowMemoized = react_1.default.memo(exports.TableRow, function (prevProp, nextProp) {
     var _a, _b, _c, _d;
     return prevProp.isLast === nextProp.isLast &&
         prevProp.onRowInViewport === nextProp.onRowInViewport &&
@@ -90,5 +91,7 @@ exports.TableRowMemoized = react_1.default.memo(TableRow, function (prevProp, ne
         prevProp.isDisabled === nextProp.isDisabled &&
         prevProp.rowProps === nextProp.rowProps &&
         prevProp.expanderCell === nextProp.expanderCell &&
-        prevProp.tableHasSubRows === nextProp.tableHasSubRows;
+        prevProp.tableHasSubRows === nextProp.tableHasSubRows &&
+        !nextProp.state.columnResizing.isResizingColumn &&
+        !nextProp.state.isTableResizing;
 });

package/cjs/core/Table/actionHandlers/resizeHandler.d.ts

@@ -0,0 +1,51 @@
+import { ActionType, TableState } from 'react-table';
+export declare const onTableResizeStart: <T extends Record<string, unknown>>(state: TableState<T>) => {
+    isTableResizing: boolean;
+    hiddenColumns?: import("react-table").IdType<T>[] | undefined;
+    columnResizing: {
+        startX?: number | undefined;
+        columnWidth?: number | undefined;
+        nextColumnWidth?: number | undefined;
+        headerIdWidths?: [string, number][] | undefined;
+        nextHeaderIdWidths?: [string, number][] | undefined;
+        columnWidths: Record<string, number>;
+        isResizingColumn?: string | undefined;
+    };
+    columnOrder: import("react-table").IdType<T>[];
+    expanded: Record<import("react-table").IdType<T>, boolean>;
+    filters: import("react-table").Filters<T>;
+    globalFilter: any;
+    groupBy: import("react-table").IdType<T>[];
+    pageSize: number;
+    pageIndex: number;
+    selectedRowIds: Record<import("react-table").IdType<T>, boolean>;
+    rowState: Record<string, {
+        cellState: import("react-table").UseRowStateLocalState<T, unknown>;
+    }>;
+    sortBy: import("react-table").SortingRule<T>[];
+};
+export declare const onTableResizeEnd: <T extends Record<string, unknown>>(state: TableState<T>, action: ActionType) => {
+    isTableResizing: boolean;
+    columnResizing: {
+        columnWidths: any;
+        startX?: number | undefined;
+        columnWidth?: number | undefined;
+        nextColumnWidth?: number | undefined;
+        headerIdWidths?: [string, number][] | undefined;
+        nextHeaderIdWidths?: [string, number][] | undefined;
+        isResizingColumn?: string | undefined;
+    };
+    hiddenColumns?: import("react-table").IdType<T>[] | undefined;
+    columnOrder: import("react-table").IdType<T>[];
+    expanded: Record<import("react-table").IdType<T>, boolean>;
+    filters: import("react-table").Filters<T>;
+    globalFilter: any;
+    groupBy: import("react-table").IdType<T>[];
+    pageSize: number;
+    pageIndex: number;
+    selectedRowIds: Record<import("react-table").IdType<T>, boolean>;
+    rowState: Record<string, {
+        cellState: import("react-table").UseRowStateLocalState<T, unknown>;
+    }>;
+    sortBy: import("react-table").SortingRule<T>[];
+};

package/cjs/core/Table/actionHandlers/resizeHandler.js

@@ -0,0 +1,22 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.onTableResizeEnd = exports.onTableResizeStart = void 0;
+var onTableResizeStart = function (state) {
+    return __assign(__assign({}, state), { isTableResizing: true });
+};
+exports.onTableResizeStart = onTableResizeStart;
+var onTableResizeEnd = function (state, action) {
+    return __assign(__assign({}, state), { isTableResizing: false, columnResizing: __assign(__assign({}, state.columnResizing), { columnWidths: __assign({}, action.columnWidths) }) });
+};
+exports.onTableResizeEnd = onTableResizeEnd;

package/cjs/core/Table/actionHandlers/selectHandler.d.ts

@@ -9,6 +9,16 @@ export declare const onSelectHandler: <T extends Record<string, unknown>>(newSta
 export declare const onSingleSelectHandler: <T extends Record<string, unknown>>(state: TableState<T>, action: ActionType, instance?: TableInstance<T> | undefined, onSelect?: ((selectedData: T[] | undefined, tableState?: TableState<T> | undefined) => void) | undefined, isRowDisabled?: ((rowData: T) => boolean) | undefined) => {
     selectedRowIds: Record<string, boolean>;
     hiddenColumns?: import("react-table").IdType<T>[] | undefined;
+    columnResizing: {
+        startX?: number | undefined;
+        columnWidth?: number | undefined;
+        nextColumnWidth?: number | undefined;
+        headerIdWidths?: [string, number][] | undefined;
+        nextHeaderIdWidths?: [string, number][] | undefined;
+        columnWidths: Record<string, number>;
+        isResizingColumn?: string | undefined;
+    };
+    isTableResizing?: boolean | undefined;
     columnOrder: import("react-table").IdType<T>[];
     expanded: Record<import("react-table").IdType<T>, boolean>;
     filters: import("react-table").Filters<T>;
@@ -16,13 +26,6 @@ export declare const onSingleSelectHandler: <T extends Record<string, unknown>>(
     groupBy: import("react-table").IdType<T>[];
     pageSize: number;
     pageIndex: number;
-    columnResizing: {
-        startX?: number | undefined;
-        columnWidth: number;
-        headerIdWidths: Record<string, number>;
-        columnWidths: any;
-        isResizingColumn?: string | undefined;
-    };
     rowState: Record<string, {
         cellState: import("react-table").UseRowStateLocalState<T, unknown>;
     }>;

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

@@ -2,3 +2,4 @@ export { EXPANDER_CELL_ID, useExpanderCell } from './useExpanderCell';
 export { SELECTION_CELL_ID, useSelectionCell } from './useSelectionCell';
 export { useSubRowFiltering } from './useSubRowFiltering';
 export { useSubRowSelection } from './useSubRowSelection';
+export { useResizeColumns } from './useResizeColumns';

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useSubRowSelection = exports.useSubRowFiltering = exports.useSelectionCell = exports.SELECTION_CELL_ID = exports.useExpanderCell = exports.EXPANDER_CELL_ID = void 0;
+exports.useResizeColumns = exports.useSubRowSelection = exports.useSubRowFiltering = exports.useSelectionCell = exports.SELECTION_CELL_ID = exports.useExpanderCell = exports.EXPANDER_CELL_ID = void 0;
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
@@ -15,3 +15,5 @@ var useSubRowFiltering_1 = require("./useSubRowFiltering");
 Object.defineProperty(exports, "useSubRowFiltering", { enumerable: true, get: function () { return useSubRowFiltering_1.useSubRowFiltering; } });
 var useSubRowSelection_1 = require("./useSubRowSelection");
 Object.defineProperty(exports, "useSubRowSelection", { enumerable: true, get: function () { return useSubRowSelection_1.useSubRowSelection; } });
+var useResizeColumns_1 = require("./useResizeColumns");
+Object.defineProperty(exports, "useResizeColumns", { enumerable: true, get: function () { return useResizeColumns_1.useResizeColumns; } });

package/cjs/core/Table/hooks/useResizeColumns.d.ts

@@ -0,0 +1,5 @@
+import { Hooks } from 'react-table';
+export declare const useResizeColumns: {
+    <T extends Record<string, unknown>>(ownerDocument: Document | undefined): (hooks: Hooks<T>) => void;
+    pluginName: string;
+};

package/cjs/core/Table/hooks/useResizeColumns.js

@@ -0,0 +1,271 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __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)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useResizeColumns = void 0;
+var react_table_1 = require("react-table");
+var useResizeColumns = function (ownerDocument) { return function (hooks) {
+    hooks.getResizerProps = [defaultGetResizerProps(ownerDocument)];
+    hooks.stateReducers.push(reducer);
+    hooks.useInstanceBeforeDimensions.push(useInstanceBeforeDimensions);
+}; };
+exports.useResizeColumns = useResizeColumns;
+var isTouchEvent = function (event) {
+    return event.type === 'touchstart';
+};
+var defaultGetResizerProps = function (ownerDocument) { return function (props, _a) {
+    var instance = _a.instance, header = _a.header, nextHeader = _a.nextHeader;
+    if (!ownerDocument) {
+        return props;
+    }
+    var dispatch = instance.dispatch, flatHeaders = instance.flatHeaders;
+    var onResizeStart = function (e, header) {
+        // lets not respond to multiple touches (e.g. 2 or 3 fingers)
+        if (isTouchEvent(e) && e.touches && e.touches.length > 1) {
+            return;
+        }
+        // Setting `width` here because it might take several rerenders until actual column width is set.
+        flatHeaders.forEach(function (h) {
+            if (!h.width) {
+                h.width = h.resizeWidth;
+            }
+        });
+        var headerIdWidths = getLeafHeaders(header).map(function (d) { return [d.id, d.width]; });
+        var nextHeaderIdWidths = nextHeader
+            ? getLeafHeaders(nextHeader).map(function (d) { return [d.id, d.width]; })
+            : [];
+        var clientX = isTouchEvent(e)
+            ? Math.round(e.touches[0].clientX)
+            : e.clientX;
+        var dispatchMove = function (clientXPos) {
+            return dispatch({ type: react_table_1.actions.columnResizing, clientX: clientXPos });
+        };
+        var dispatchEnd = function () {
+            return dispatch({
+                type: react_table_1.actions.columnDoneResizing,
+            });
+        };
+        var handlersAndEvents = {
+            mouse: {
+                moveEvent: 'mousemove',
+                moveHandler: function (e) { return dispatchMove(e.clientX); },
+                upEvent: 'mouseup',
+                upHandler: function () {
+                    ownerDocument.removeEventListener('mousemove', handlersAndEvents.mouse.moveHandler);
+                    ownerDocument.removeEventListener('mouseup', handlersAndEvents.mouse.upHandler);
+                    dispatchEnd();
+                },
+            },
+            touch: {
+                moveEvent: 'touchmove',
+                moveHandler: function (e) {
+                    if (e.cancelable) {
+                        e.preventDefault();
+                        e.stopPropagation();
+                    }
+                    dispatchMove(e.touches[0].clientX);
+                },
+                upEvent: 'touchend',
+                upHandler: function () {
+                    ownerDocument.removeEventListener(handlersAndEvents.touch.moveEvent, handlersAndEvents.touch.moveHandler);
+                    ownerDocument.removeEventListener(handlersAndEvents.touch.upEvent, handlersAndEvents.touch.moveHandler);
+                    dispatchEnd();
+                },
+            },
+        };
+        var events = isTouchEvent(e)
+            ? handlersAndEvents.touch
+            : handlersAndEvents.mouse;
+        var passiveIfSupported = passiveEventSupported()
+            ? { passive: false }
+            : false;
+        ownerDocument.addEventListener(events.moveEvent, events.moveHandler, passiveIfSupported);
+        ownerDocument.addEventListener(events.upEvent, events.upHandler, passiveIfSupported);
+        dispatch({
+            type: react_table_1.actions.columnStartResizing,
+            columnId: header.id,
+            columnWidth: header.width,
+            nextColumnWidth: nextHeader === null || nextHeader === void 0 ? void 0 : nextHeader.width,
+            headerIdWidths: headerIdWidths,
+            nextHeaderIdWidths: nextHeaderIdWidths,
+            clientX: clientX,
+        });
+    };
+    return [
+        props,
+        {
+            onMouseDown: function (e) {
+                e.persist();
+                e.stopPropagation();
+                onResizeStart(e, header);
+            },
+            onTouchStart: function (e) {
+                e.persist();
+                e.stopPropagation();
+                onResizeStart(e, header);
+            },
+            style: {
+                cursor: 'col-resize',
+            },
+            draggable: false,
+            role: 'separator',
+        },
+    ];
+}; };
+exports.useResizeColumns.pluginName = 'useResizeColumns';
+var reducer = function (newState, action, previousState, instance) {
+    if (action.type === react_table_1.actions.init) {
+        return __assign(__assign({}, newState), { columnResizing: {
+                columnWidths: {},
+            } });
+    }
+    if (action.type === react_table_1.actions.resetResize) {
+        return __assign(__assign({}, newState), { columnResizing: {
+                columnWidths: {},
+            } });
+    }
+    if (action.type === react_table_1.actions.columnStartResizing) {
+        var clientX = action.clientX, columnId = action.columnId, columnWidth = action.columnWidth, nextColumnWidth = action.nextColumnWidth, headerIdWidths = action.headerIdWidths, nextHeaderIdWidths = action.nextHeaderIdWidths;
+        return __assign(__assign({}, newState), { columnResizing: __assign(__assign({}, newState.columnResizing), { startX: clientX, columnWidth: columnWidth, nextColumnWidth: nextColumnWidth, headerIdWidths: headerIdWidths, nextHeaderIdWidths: nextHeaderIdWidths, isResizingColumn: columnId }) });
+    }
+    if (action.type === react_table_1.actions.columnResizing) {
+        var clientX = action.clientX;
+        var _a = newState.columnResizing, _b = _a.startX, startX = _b === void 0 ? 0 : _b, _c = _a.columnWidth, columnWidth = _c === void 0 ? 1 : _c, _d = _a.nextColumnWidth, nextColumnWidth = _d === void 0 ? 1 : _d, _e = _a.headerIdWidths, headerIdWidths = _e === void 0 ? [] : _e, _f = _a.nextHeaderIdWidths, nextHeaderIdWidths = _f === void 0 ? [] : _f;
+        var deltaX = clientX - startX;
+        var newColumnWidths = getColumnWidths(headerIdWidths, deltaX / columnWidth);
+        var newNextColumnWidths = getColumnWidths(nextHeaderIdWidths, -deltaX / nextColumnWidth);
+        if (!isNewColumnWidthsValid(newColumnWidths, instance === null || instance === void 0 ? void 0 : instance.flatHeaders) ||
+            !isNewColumnWidthsValid(newNextColumnWidths, instance === null || instance === void 0 ? void 0 : instance.flatHeaders)) {
+            return newState;
+        }
+        return __assign(__assign({}, newState), { columnResizing: __assign(__assign({}, newState.columnResizing), { columnWidths: __assign(__assign(__assign({}, newState.columnResizing.columnWidths), newColumnWidths), newNextColumnWidths) }) });
+    }
+    if (action.type === react_table_1.actions.columnDoneResizing) {
+        return __assign(__assign({}, newState), { columnResizing: __assign(__assign({}, newState.columnResizing), { startX: undefined, isResizingColumn: undefined }) });
+    }
+    return newState;
+};
+var getColumnWidths = function (headerIdWidths, deltaPercentage) {
+    var columnWidths = {};
+    headerIdWidths.forEach(function (_a) {
+        var headerId = _a[0], headerWidth = _a[1];
+        columnWidths[headerId] = Math.max(headerWidth + headerWidth * deltaPercentage, 0);
+    });
+    return columnWidths;
+};
+var isNewColumnWidthsValid = function (columnWidths, headers) {
+    // Prevents from going outside the column bounds
+    if (Object.values(columnWidths).some(function (width) { return width <= 1; })) {
+        return false;
+    }
+    var _loop_1 = function (headerId, width) {
+        var header = headers === null || headers === void 0 ? void 0 : headers.find(function (h) { return h.id === headerId; });
+        if (!header) {
+            return "continue";
+        }
+        var minWidth = header.minWidth || 0;
+        var maxWidth = header.maxWidth || Infinity;
+        if (width < minWidth || width > maxWidth) {
+            return { value: false };
+        }
+    };
+    for (var _i = 0, _a = Object.entries(columnWidths); _i < _a.length; _i++) {
+        var _b = _a[_i], headerId = _b[0], width = _b[1];
+        var state_1 = _loop_1(headerId, width);
+        if (typeof state_1 === "object")
+            return state_1.value;
+    }
+    return true;
+};
+var useInstanceBeforeDimensions = function (instance) {
+    var flatHeaders = instance.flatHeaders, getHooks = instance.getHooks, columnResizing = instance.state.columnResizing;
+    var getInstance = (0, react_table_1.useGetLatest)(instance);
+    flatHeaders.forEach(function (header, index) {
+        var _a;
+        var resizeWidth = columnResizing.columnWidths[header.id];
+        header.width = resizeWidth || header.width || header.originalWidth;
+        header.isResizing = columnResizing.isResizingColumn === header.id;
+        var headerToResize = header.disableResizing
+            ? getPreviousResizableHeader(header, instance)
+            : header;
+        var nextResizableHeader = getNextResizableHeader(header, instance);
+        header.canResize =
+            header.disableResizing != null ? !header.disableResizing : true;
+        // Show resizer when header is resizable or when next header is resizable
+        // and there is resizable columns on the left side of the resizer.
+        header.isResizerVisible =
+            (header.canResize && !!nextResizableHeader) ||
+                (headerToResize && !!((_a = instance.flatHeaders[index + 1]) === null || _a === void 0 ? void 0 : _a.canResize));
+        header.getResizerProps = (0, react_table_1.makePropGetter)(getHooks().getResizerProps, {
+            instance: getInstance(),
+            header: headerToResize,
+            nextHeader: nextResizableHeader,
+        });
+    });
+};
+var getPreviousResizableHeader = function (headerColumn, instance) {
+    var _a;
+    var headersList = ((_a = headerColumn.parent) === null || _a === void 0 ? void 0 : _a.columns) || instance.flatHeaders;
+    var headerIndex = headersList.findIndex(function (h) { return h.id === headerColumn.id; });
+    return __spreadArray([], headersList, true).slice(0, headerIndex)
+        .reverse()
+        .find(function (h) { return !h.disableResizing; });
+};
+var getNextResizableHeader = function (headerColumn, instance) {
+    var _a;
+    var headersList = ((_a = headerColumn.parent) === null || _a === void 0 ? void 0 : _a.columns) || instance.flatHeaders;
+    var headerIndex = headersList.findIndex(function (h) { return h.id === headerColumn.id; });
+    return __spreadArray([], headersList, true).slice(headerIndex + 1)
+        .find(function (h) { return !h.disableResizing; });
+};
+function getLeafHeaders(header) {
+    var leafHeaders = [];
+    var recurseHeader = function (header) {
+        if (header.columns && header.columns.length) {
+            header.columns.map(recurseHeader);
+        }
+        leafHeaders.push(header);
+    };
+    recurseHeader(header);
+    return leafHeaders;
+}
+// https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#safely_detecting_option_support
+var passiveSupported = null;
+var passiveEventSupported = function () {
+    // memoize support to avoid adding multiple test events
+    if (passiveSupported != null) {
+        return passiveSupported;
+    }
+    try {
+        var options = {
+            once: true,
+            get passive() {
+                passiveSupported = true;
+                return false;
+            },
+        };
+        window.addEventListener('test', function () { }, options);
+    }
+    catch (_a) {
+        passiveSupported = false;
+    }
+    return passiveSupported;
+};

package/cjs/core/Table/utils.d.ts

@@ -1,2 +1,2 @@
 import { ColumnInstance } from 'react-table';
-export declare const getCellStyle: <T extends Record<string, unknown>>(column: ColumnInstance<T>) => React.CSSProperties | undefined;
+export declare const getCellStyle: <T extends Record<string, unknown>>(column: ColumnInstance<T>, isTableResizing: boolean) => React.CSSProperties | undefined;

package/cjs/core/Table/utils.js

@@ -1,13 +1,19 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getCellStyle = void 0;
-var getCellStyle = function (column) {
+var getCellStyle = function (column, isTableResizing) {
     var style = {};
     style.flex = "1 1 145px";
     if (column.width) {
         var width = typeof column.width === 'string' ? column.width : column.width + "px";
         style.width = width;
-        style.flex = "0 0 " + width;
+        // This allows flexbox to handle the width of the column on table resize
+        if (isTableResizing && column.canResize) {
+            style.flex = Number(column.width) + " 1 " + width;
+        }
+        else {
+            style.flex = "0 0 " + width;
+        }
     }
     if (column.maxWidth) {
         style.maxWidth = column.maxWidth + "px";

package/cjs/core/Tabs/Tabs.d.ts

@@ -43,6 +43,10 @@ export declare type TabsProps = {
      * Custom CSS class name for tab panel.
      */
     contentClassName?: string;
+    /**
+     * Custom CSS class name for the tabs wrapper.
+     */
+    wrapperClassName?: string;
     /**
      * Content inside the tab panel.
      */

package/cjs/core/Tabs/Tabs.js

@@ -60,45 +60,38 @@ var Tab_1 = require("./Tab");
  * <Tabs labels={tabsWithIcons} type='pill' />
  */
 var Tabs = function (props) {
-    var labels = props.labels, activeIndex = props.activeIndex, onTabSelected = props.onTabSelected, _a = props.focusActivationMode, focusActivationMode = _a === void 0 ? 'auto' : _a, _b = props.type, type = _b === void 0 ? 'default' : _b, _c = props.color, color = _c === void 0 ? 'blue' : _c, _d = props.orientation, orientation = _d === void 0 ? 'horizontal' : _d, tabsClassName = props.tabsClassName, contentClassName = props.contentClassName, children = props.children, rest = __rest(props, ["labels", "activeIndex", "onTabSelected", "focusActivationMode", "type", "color", "orientation", "tabsClassName", "contentClassName", "children"]);
+    var _a, _b, _c;
+    var labels = props.labels, activeIndex = props.activeIndex, onTabSelected = props.onTabSelected, _d = props.focusActivationMode, focusActivationMode = _d === void 0 ? 'auto' : _d, _e = props.type, type = _e === void 0 ? 'default' : _e, _f = props.color, color = _f === void 0 ? 'blue' : _f, _g = props.orientation, orientation = _g === void 0 ? 'horizontal' : _g, tabsClassName = props.tabsClassName, contentClassName = props.contentClassName, wrapperClassName = props.wrapperClassName, children = props.children, rest = __rest(props, ["labels", "activeIndex", "onTabSelected", "focusActivationMode", "type", "color", "orientation", "tabsClassName", "contentClassName", "wrapperClassName", "children"]);
     (0, utils_1.useTheme)();
     var tablistRef = react_1.default.useRef(null);
-    var _e = react_1.default.useState(function () { var _a; return (_a = tablistRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width; }), tabsWidth = _e[0], setTabsWidth = _e[1];
-    var updateTabsWidth = react_1.default.useCallback(function (_a) {
-        var width = _a.width;
-        return setTabsWidth(width);
-    }, []);
-    var tablistSizeRef = (0, utils_1.useResizeObserver)(updateTabsWidth)[0];
+    var _h = (0, utils_1.useContainerWidth)(type !== 'default'), tablistSizeRef = _h[0], tabsWidth = _h[1];
     var refs = (0, utils_1.useMergedRefs)(tablistRef, tablistSizeRef);
-    var _f = react_1.default.useState(function () {
+    var _j = react_1.default.useState(function () {
         return activeIndex != null
             ? (0, utils_1.getBoundedValue)(activeIndex, 0, labels.length - 1)
             : 0;
-    }), currentActiveIndex = _f[0], setCurrentActiveIndex = _f[1];
+    }), currentActiveIndex = _j[0], setCurrentActiveIndex = _j[1];
     react_1.default.useLayoutEffect(function () {
         if (activeIndex != null && currentActiveIndex !== activeIndex) {
             setCurrentActiveIndex((0, utils_1.getBoundedValue)(activeIndex, 0, labels.length - 1));
         }
     }, [activeIndex, currentActiveIndex, labels.length]);
-    var _g = react_1.default.useState({}), stripeStyle = _g[0], setStripeStyle = _g[1];
+    // CSS custom properties to place the active stripe
+    var _k = react_1.default.useState({}), stripeProperties = _k[0], setStripeProperties = _k[1];
     react_1.default.useLayoutEffect(function () {
-        var _a;
-        if (type !== 'default') {
-            var activeTab = (_a = tablistRef.current) === null || _a === void 0 ? void 0 : _a.children[currentActiveIndex];
-            var activeTabRect = activeTab === null || activeTab === void 0 ? void 0 : activeTab.getBoundingClientRect();
-            setStripeStyle({
-                width: orientation === 'horizontal' ? activeTabRect === null || activeTabRect === void 0 ? void 0 : activeTabRect.width : undefined,
-                height: orientation === 'vertical' ? activeTabRect === null || activeTabRect === void 0 ? void 0 : activeTabRect.height : undefined,
-                left: orientation === 'horizontal'
-                    ? activeTab === null || activeTab === void 0 ? void 0 : activeTab.offsetLeft
-                    : (activeTabRect === null || activeTabRect === void 0 ? void 0 : activeTabRect.width) - 2,
-                top: orientation === 'horizontal'
-                    ? (activeTabRect === null || activeTabRect === void 0 ? void 0 : activeTabRect.height) - 2
-                    : activeTab === null || activeTab === void 0 ? void 0 : activeTab.offsetTop,
-            });
+        if (type !== 'default' && tablistRef.current != undefined) {
+            var activeTab = tablistRef.current.children[currentActiveIndex];
+            var activeTabRect = activeTab.getBoundingClientRect();
+            setStripeProperties(__assign(__assign({}, (orientation === 'horizontal' && {
+                '--stripe-width': activeTabRect.width + "px",
+                '--stripe-left': activeTab.offsetLeft + "px",
+            })), (orientation === 'vertical' && {
+                '--stripe-height': activeTabRect.height + "px",
+                '--stripe-top': activeTab.offsetTop + "px",
+            })));
         }
     }, [currentActiveIndex, type, orientation, tabsWidth]);
-    var _h = react_1.default.useState(), focusedIndex = _h[0], setFocusedIndex = _h[1];
+    var _l = react_1.default.useState(), focusedIndex = _l[0], setFocusedIndex = _l[1];
     react_1.default.useEffect(function () {
         var _a;
         if (tablistRef.current && focusedIndex !== undefined) {
@@ -106,7 +99,7 @@ var Tabs = function (props) {
             (_a = tab) === null || _a === void 0 ? void 0 : _a.focus();
         }
     }, [focusedIndex]);
-    var _j = react_1.default.useState(false), hasSublabel = _j[0], setHasSublabel = _j[1]; // used for setting size
+    var _m = react_1.default.useState(false), hasSublabel = _m[0], setHasSublabel = _m[1]; // used for setting size
     react_1.default.useLayoutEffect(function () {
         var _a;
         setHasSublabel(type !== 'pill' && // pill tabs should never have sublabels
@@ -179,10 +172,12 @@ var Tabs = function (props) {
                 break;
         }
     };
-    return (react_1.default.createElement("div", { className: (0, classnames_1.default)('iui-tabs-wrapper', "iui-" + orientation) },
+    var isIE = !((_c = (_b = (_a = (0, utils_1.getWindow)()) === null || _a === void 0 ? void 0 : _a.CSS) === null || _b === void 0 ? void 0 : _b.supports) === null || _c === void 0 ? void 0 : _c.call(_b, '--stripe-width', '100px'));
+    return (react_1.default.createElement("div", { className: (0, classnames_1.default)('iui-tabs-wrapper', "iui-" + orientation, wrapperClassName), style: stripeProperties },
         react_1.default.createElement("ul", __assign({ className: (0, classnames_1.default)('iui-tabs', "iui-" + type, {
                 'iui-green': color === 'green',
-                'iui-animated': type !== 'default',
+                'iui-animated': type !== 'default' && !isIE,
+                'iui-not-animated': isIE,
                 'iui-large': hasSublabel,
             }, tabsClassName), role: 'tablist', ref: refs, onKeyDown: onKeyDown }, rest), labels.map(function (label, index) {
             var onClick = function () {
@@ -204,7 +199,6 @@ var Tabs = function (props) {
                 },
             }))));
         })),
-        type !== 'default' && (react_1.default.createElement("div", { className: 'iui-tab-stripe', style: stripeStyle })),
         children && (react_1.default.createElement("div", { className: (0, classnames_1.default)('iui-tabs-content', contentClassName), role: 'tabpanel' }, children))));
 };
 exports.Tabs = Tabs;

package/cjs/core/index.d.ts

@@ -32,10 +32,12 @@ export { Header, HeaderBreadcrumbs, HeaderButton, HeaderLogo } from './Header';
 export type { HeaderProps, HeaderBreadcrumbsProps, HeaderButtonProps, HeaderLogoProps, } from './Header';
 export { VerticalTabs, Tab, HorizontalTabs, HorizontalTab } from './Tabs';
 export type { VerticalTabsProps, TabProps, HorizontalTabsProps, HorizontalTabProps, } from './Tabs';
-export { InformationPanel, InformationPanelWrapper, InformationPanelHeader, InformationPanelBody, } from './InformationPanel';
-export type { InformationPanelProps, InformationPanelWrapperProps, InformationPanelHeaderProps, InformationPanelBodyProps, } from './InformationPanel';
+export { InformationPanel, InformationPanelWrapper, InformationPanelHeader, InformationPanelBody, InformationPanelContent, } from './InformationPanel';
+export type { InformationPanelProps, InformationPanelWrapperProps, InformationPanelHeaderProps, InformationPanelBodyProps, InformationPanelContentProps, } from './InformationPanel';
 export { Input } from './Input';
 export type { InputProps } from './Input';
+export { Label } from './Label';
+export type { LabelProps } from './Label';
 export { LabeledInput } from './LabeledInput';
 export type { LabeledInputProps } from './LabeledInput';
 export { InputGroup } from './InputGroup';
@@ -86,5 +88,5 @@ export { UserIconGroup } from './UserIconGroup';
 export type { UserIconGroupProps } from './UserIconGroup';
 export { Wizard } from './Wizard';
 export type { WizardProps, StepProperties, WizardType, WizardLocalization, } from './Wizard';
-export { getUserColor, useTheme, ColorValue } from './utils';
-export type { ThemeType } from './utils';
+export { getUserColor, useTheme, ColorValue, MiddleTextTruncation, } from './utils';
+export type { ThemeType, MiddleTextTruncationProps } from './utils';

package/cjs/core/index.js

@@ -3,8 +3,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ProgressRadial = exports.ProgressLinear = exports.ModalButtonBar = exports.Modal = exports.MenuExtraContent = exports.MenuDivider = exports.MenuItem = exports.Menu = exports.LabeledTextarea = exports.LabeledSelect = exports.InputGroup = exports.LabeledInput = exports.Input = exports.InformationPanelBody = exports.InformationPanelHeader = exports.InformationPanelWrapper = exports.InformationPanel = exports.HorizontalTab = exports.HorizontalTabs = exports.Tab = exports.VerticalTabs = exports.HeaderLogo = exports.HeaderButton = exports.HeaderBreadcrumbs = exports.Header = exports.Footer = exports.FileUploadTemplate = exports.FileUpload = exports.Fieldset = exports.ExpandableBlock = exports.ErrorPage = exports.DropdownMenu = exports.generateLocalizedStrings = exports.DatePicker = exports.ComboBox = exports.ColorPalette = exports.ColorInputPanel = exports.ColorBuilder = exports.ColorSwatch = exports.ColorPicker = exports.Checkbox = exports.ButtonGroup = exports.SplitButton = exports.IdeasButton = exports.IconButton = exports.DropdownButton = exports.Button = exports.Breadcrumbs = exports.Badge = exports.Alert = void 0;
-exports.ColorValue = exports.useTheme = exports.getUserColor = exports.Wizard = exports.UserIconGroup = exports.UserIcon = exports.Text = exports.KbdKeys = exports.Kbd = exports.Code = exports.Blockquote = exports.Title = exports.Subheading = exports.Small = exports.Leading = exports.Headline = exports.Body = exports.Tooltip = exports.ToggleSwitch = exports.ThemeProvider = exports.toaster = exports.TimePicker = exports.Tile = exports.Textarea = exports.TagContainer = exports.Tag = exports.TablePaginator = exports.EditableCell = exports.DefaultCell = exports.FilterButtonBar = exports.tableFilters = exports.Table = exports.Slider = exports.SidenavSubmenuHeader = exports.SidenavSubmenu = exports.SidenavButton = exports.SideNavigation = exports.Select = exports.RadioTileGroup = exports.RadioTile = exports.Radio = void 0;
+exports.ModalButtonBar = exports.Modal = exports.MenuExtraContent = exports.MenuDivider = exports.MenuItem = exports.Menu = exports.LabeledTextarea = exports.LabeledSelect = exports.InputGroup = exports.LabeledInput = exports.Label = exports.Input = exports.InformationPanelContent = exports.InformationPanelBody = exports.InformationPanelHeader = exports.InformationPanelWrapper = exports.InformationPanel = exports.HorizontalTab = exports.HorizontalTabs = exports.Tab = exports.VerticalTabs = exports.HeaderLogo = exports.HeaderButton = exports.HeaderBreadcrumbs = exports.Header = exports.Footer = exports.FileUploadTemplate = exports.FileUpload = exports.Fieldset = exports.ExpandableBlock = exports.ErrorPage = exports.DropdownMenu = exports.generateLocalizedStrings = exports.DatePicker = exports.ComboBox = exports.ColorPalette = exports.ColorInputPanel = exports.ColorBuilder = exports.ColorSwatch = exports.ColorPicker = exports.Checkbox = exports.ButtonGroup = exports.SplitButton = exports.IdeasButton = exports.IconButton = exports.DropdownButton = exports.Button = exports.Breadcrumbs = exports.Badge = exports.Alert = void 0;
+exports.MiddleTextTruncation = exports.ColorValue = exports.useTheme = exports.getUserColor = exports.Wizard = exports.UserIconGroup = exports.UserIcon = exports.Text = exports.KbdKeys = exports.Kbd = exports.Code = exports.Blockquote = exports.Title = exports.Subheading = exports.Small = exports.Leading = exports.Headline = exports.Body = exports.Tooltip = exports.ToggleSwitch = exports.ThemeProvider = exports.toaster = exports.TimePicker = exports.Tile = exports.Textarea = exports.TagContainer = exports.Tag = exports.TablePaginator = exports.EditableCell = exports.DefaultCell = exports.FilterButtonBar = exports.tableFilters = exports.Table = exports.Slider = exports.SidenavSubmenuHeader = exports.SidenavSubmenu = exports.SidenavButton = exports.SideNavigation = exports.Select = exports.RadioTileGroup = exports.RadioTile = exports.Radio = exports.ProgressRadial = exports.ProgressLinear = void 0;
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
@@ -64,8 +64,11 @@ Object.defineProperty(exports, "InformationPanel", { enumerable: true, get: func
 Object.defineProperty(exports, "InformationPanelWrapper", { enumerable: true, get: function () { return InformationPanel_1.InformationPanelWrapper; } });
 Object.defineProperty(exports, "InformationPanelHeader", { enumerable: true, get: function () { return InformationPanel_1.InformationPanelHeader; } });
 Object.defineProperty(exports, "InformationPanelBody", { enumerable: true, get: function () { return InformationPanel_1.InformationPanelBody; } });
+Object.defineProperty(exports, "InformationPanelContent", { enumerable: true, get: function () { return InformationPanel_1.InformationPanelContent; } });
 var Input_1 = require("./Input");
 Object.defineProperty(exports, "Input", { enumerable: true, get: function () { return Input_1.Input; } });
+var Label_1 = require("./Label");
+Object.defineProperty(exports, "Label", { enumerable: true, get: function () { return Label_1.Label; } });
 var LabeledInput_1 = require("./LabeledInput");
 Object.defineProperty(exports, "LabeledInput", { enumerable: true, get: function () { return LabeledInput_1.LabeledInput; } });
 var InputGroup_1 = require("./InputGroup");
@@ -145,3 +148,4 @@ var utils_1 = require("./utils");
 Object.defineProperty(exports, "getUserColor", { enumerable: true, get: function () { return utils_1.getUserColor; } });
 Object.defineProperty(exports, "useTheme", { enumerable: true, get: function () { return utils_1.useTheme; } });
 Object.defineProperty(exports, "ColorValue", { enumerable: true, get: function () { return utils_1.ColorValue; } });
+Object.defineProperty(exports, "MiddleTextTruncation", { enumerable: true, get: function () { return utils_1.MiddleTextTruncation; } });