@itwin/itwinui-react 1.25.0 → 1.28.0

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

@@ -0,0 +1,273 @@
+"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();
+                // Prevents from triggering sort
+                e.stopPropagation();
+                onResizeStart(e, header);
+            },
+            onTouchStart: function (e) {
+                e.persist();
+                // Prevents from triggering sort
+                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

@@ -61,15 +61,10 @@ var Tab_1 = require("./Tab");
  */
 var Tabs = function (props) {
     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, children = props.children, rest = __rest(props, ["labels", "activeIndex", "onTabSelected", "focusActivationMode", "type", "color", "orientation", "tabsClassName", "contentClassName", "children"]);
+    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 _h = react_1.default.useState(function () { var _a; return (_a = tablistRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width; }), tabsWidth = _h[0], setTabsWidth = _h[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 _j = react_1.default.useState(function () {
         return activeIndex != null
@@ -178,7 +173,7 @@ var Tabs = function (props) {
         }
     };
     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), style: stripeProperties },
+    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' && !isIE,

package/cjs/core/index.d.ts

@@ -32,8 +32,8 @@ 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';
@@ -88,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.ProgressLinear = 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.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 = exports.ProgressRadial = 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,6 +64,7 @@ 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");
@@ -147,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; } });

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

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import { CommonProps } from '../props';
+export declare type MiddleTextTruncationProps = {
+    /**
+     * Text to truncate.
+     */
+    text: string;
+    /**
+     * Number of characters to leave at the end.
+     * @default 6
+     */
+    endCharsCount?: number;
+} & CommonProps;
+/**
+ * Truncates text with the ellipsis in the middle,
+ * leaving defined number of chars at the end.
+ * @example
+ * <MiddleTextTruncation text='ThisIsMyVeryLongFileName.dgn' />
+ */
+export declare const MiddleTextTruncation: (props: MiddleTextTruncationProps) => JSX.Element;
+export default MiddleTextTruncation;

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

@@ -0,0 +1,56 @@
+"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 __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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MiddleTextTruncation = 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"));
+var useOverflow_1 = require("../hooks/useOverflow");
+var ELLIPSIS_CHAR = '…';
+/**
+ * Truncates text with the ellipsis in the middle,
+ * leaving defined number of chars at the end.
+ * @example
+ * <MiddleTextTruncation text='ThisIsMyVeryLongFileName.dgn' />
+ */
+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 = (0, useOverflow_1.useOverflow)(text), ref = _b[0], visibleCount = _b[1];
+    var truncatedText = react_1.default.useMemo(function () {
+        if (visibleCount < text.length) {
+            return "" + text.substr(0, visibleCount - endCharsCount - ELLIPSIS_CHAR.length) + ELLIPSIS_CHAR + text.substr(text.length - endCharsCount);
+        }
+        else {
+            return text;
+        }
+    }, [endCharsCount, text, visibleCount]);
+    return (react_1.default.createElement("span", __assign({ style: __assign({ display: 'flex', minWidth: 0, flexGrow: 1, whiteSpace: 'nowrap' }, style), ref: ref }, rest), truncatedText));
+};
+exports.MiddleTextTruncation = MiddleTextTruncation;
+exports.default = exports.MiddleTextTruncation;

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

@@ -3,3 +3,4 @@ export * from './FocusTrap';
 export * from './InputContainer';
 export * from './icons';
 export * from './WithCSSTransition';
+export * from './MiddleTextTruncation';

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

@@ -19,3 +19,4 @@ __exportStar(require("./FocusTrap"), exports);
 __exportStar(require("./InputContainer"), exports);
 __exportStar(require("./icons"), exports);
 __exportStar(require("./WithCSSTransition"), exports);
+__exportStar(require("./MiddleTextTruncation"), exports);

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

@@ -2,5 +2,6 @@ export * from './useEventListener';
 export * from './useMergedRefs';
 export * from './useOverflow';
 export * from './useResizeObserver';
+export * from './useContainerWidth';
 export * from './useTheme';
 export * from './useIntersection';

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

@@ -18,5 +18,6 @@ __exportStar(require("./useEventListener"), exports);
 __exportStar(require("./useMergedRefs"), exports);
 __exportStar(require("./useOverflow"), exports);
 __exportStar(require("./useResizeObserver"), exports);
+__exportStar(require("./useContainerWidth"), exports);
 __exportStar(require("./useTheme"), exports);
 __exportStar(require("./useIntersection"), exports);

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

@@ -0,0 +1,17 @@
+/**
+ * Hook that returns the width of an element in three stages:
+ *  - initialized with 0
+ *  - immediately set to element's initial width as soon as it's mounted
+ *  - update to new width every time it changes (using `useResizeObserver` hook)
+ *
+ * @private
+ * @param watchResizes If false, ResizeObserver will not be connected and only the initial width will be returned
+ * @returns [ref to attach to the element, stateful width of the element]
+ *
+ * @example
+ * const [ref, width] = useContainerWidth();
+ * ... // do something with width
+ * return <div ref={ref}>...</div>;
+ */
+export declare const useContainerWidth: <T extends HTMLElement>(watchResizes?: boolean) => readonly [(instance: HTMLElement | null) => void, number];
+export default useContainerWidth;

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

@@ -0,0 +1,50 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useContainerWidth = 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"));
+var useMergedRefs_1 = require("./useMergedRefs");
+var useResizeObserver_1 = require("./useResizeObserver");
+/**
+ * Hook that returns the width of an element in three stages:
+ *  - initialized with 0
+ *  - immediately set to element's initial width as soon as it's mounted
+ *  - update to new width every time it changes (using `useResizeObserver` hook)
+ *
+ * @private
+ * @param watchResizes If false, ResizeObserver will not be connected and only the initial width will be returned
+ * @returns [ref to attach to the element, stateful width of the element]
+ *
+ * @example
+ * const [ref, width] = useContainerWidth();
+ * ... // do something with width
+ * return <div ref={ref}>...</div>;
+ */
+var useContainerWidth = function (watchResizes) {
+    if (watchResizes === void 0) { watchResizes = true; }
+    var _a = react_1.default.useState(0), contentWidth = _a[0], setContentWidth = _a[1];
+    var ref = react_1.default.useCallback(function (element) {
+        if (!element) {
+            return;
+        }
+        setContentWidth(element.getBoundingClientRect().width);
+    }, []);
+    var updateWidth = react_1.default.useCallback(function (_a) {
+        var width = _a.width;
+        return setContentWidth(width);
+    }, []);
+    var _b = (0, useResizeObserver_1.useResizeObserver)(updateWidth), resizeRef = _b[0], resizeObserver = _b[1];
+    if (!watchResizes) {
+        resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect();
+    }
+    var refs = (0, useMergedRefs_1.useMergedRefs)(ref, watchResizes ? resizeRef : undefined);
+    return [refs, contentWidth];
+};
+exports.useContainerWidth = useContainerWidth;
+exports.default = exports.useContainerWidth;

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

@@ -20,4 +20,4 @@ import React from 'react';
  *   </div>
  * );
  */
-export declare const useOverflow: <T extends HTMLElement>(items: React.ReactNode[], disabled?: boolean) => readonly [(instance: T | null) => void, number];
+export declare const useOverflow: <T extends HTMLElement>(items: React.ReactNode[] | string, disabled?: boolean) => readonly [(instance: T | null) => void, number];

package/cjs/types/react-table-config.d.ts

@@ -6,7 +6,7 @@ declare module 'react-table' {
         cellProps: CellProps<D>;
         children: React.ReactNode;
     };
-    interface TableOptions<D extends object = {}> extends Omit<UseTableOptions<D>, 'data'>, UseRowSelectOptions<D>, UseExpandedOptions<D>, UseFiltersOptions<D>, UsePaginationOptions<D>, UseSortByOptions<D> {
+    interface TableOptions<D extends object = {}> extends Omit<UseTableOptions<D>, 'data'>, UseRowSelectOptions<D>, UseExpandedOptions<D>, UseFiltersOptions<D>, UsePaginationOptions<D>, Omit<UseResizeColumnsOptions<D>, 'disableResizing'>, UseSortByOptions<D> {
         /**
          * Table data list.
          * Must be memoized.
@@ -21,9 +21,19 @@ declare module 'react-table' {
     interface TableInstance<D extends object = {}> extends UseColumnOrderInstanceProps<D>, UseExpandedInstanceProps<D>, UseFiltersInstanceProps<D>, UseGlobalFiltersInstanceProps<D>, UseGroupByInstanceProps<D>, UsePaginationInstanceProps<D>, UseRowSelectInstanceProps<D>, UseRowStateInstanceProps<D>, UseSortByInstanceProps<D> {
         initialRows: Row<D>[];
     }
-    interface TableState<D extends object = {}> extends UseColumnOrderState<D>, UseExpandedState<D>, UseFiltersState<D>, UseGlobalFiltersState<D>, UseGroupByState<D>, UsePaginationState<D>, UseResizeColumnsState<D>, UseRowSelectState<D>, UseRowStateState<D>, UseSortByState<D> {
+    interface TableState<D extends object = {}> extends UseColumnOrderState<D>, UseExpandedState<D>, UseFiltersState<D>, UseGlobalFiltersState<D>, UseGroupByState<D>, UsePaginationState<D>, UseRowSelectState<D>, UseRowStateState<D>, UseSortByState<D> {
+        columnResizing: {
+            startX?: number;
+            columnWidth?: number;
+            nextColumnWidth?: number;
+            headerIdWidths?: Array<[string, number]>;
+            nextHeaderIdWidths?: Array<[string, number]>;
+            columnWidths: Record<string, number>;
+            isResizingColumn?: string;
+        };
+        isTableResizing?: boolean;
     }
-    interface ColumnInterface<D extends object = {}> extends UseSortByColumnOptions<D>, UseFiltersColumnOptions<D> {
+    interface ColumnInterface<D extends object = {}> extends UseSortByColumnOptions<D>, UseFiltersColumnOptions<D>, UseResizeColumnsColumnOptions<D> {
         /**
          * Custom class name applied to header column cell.
          */
@@ -59,6 +69,9 @@ declare module 'react-table' {
         cellRenderer?: (props: CellRendererProps<D>) => React.ReactNode;
     }
     interface ColumnInstance<D extends object = {}> extends UseFiltersColumnProps<D>, UseGroupByColumnProps<D>, UseResizeColumnsColumnProps<D>, UseSortByColumnProps<D> {
+        originalWidth: number;
+        resizeWidth?: number;
+        isResizerVisible?: boolean;
     }
     interface Cell<D extends object = {}> extends UseGroupByCellProps<D>, UseRowStateCellProps<D> {
     }

package/esm/core/ButtonGroup/ButtonGroup.js

@@ -58,14 +58,12 @@ import '@itwin/itwinui-css/css/button.css';
  */
 export var ButtonGroup = React.forwardRef(function (props, ref) {
     var children = props.children, className = props.className, style = props.style, overflowButton = props.overflowButton, rest = __rest(props, ["children", "className", "style", "overflowButton"]);
-    var items = React.useMemo(function () { return React.Children.toArray(children); }, [
-        children,
-    ]);
+    var items = React.useMemo(function () { var _a; return (_a = React.Children.map(children, function (child) { return React.createElement("div", null, child); })) !== null && _a !== void 0 ? _a : []; }, [children]);
     useTheme();
     var _a = useOverflow(items, !overflowButton), overflowRef = _a[0], visibleCount = _a[1];
     var refs = useMergedRefs(overflowRef, ref);
     return (React.createElement("div", __assign({ className: cx('iui-button-group', className), style: __assign(__assign({}, (!!overflowButton && { width: '100%' })), style), ref: refs }, rest), !!overflowButton && visibleCount < items.length ? (React.createElement(React.Fragment, null,
         items.slice(0, visibleCount - 1),
-        overflowButton(visibleCount))) : (children)));
+        overflowButton(visibleCount))) : (items)));
 });
 export default ButtonGroup;

package/esm/core/Buttons/Button/Button.d.ts

@@ -43,7 +43,7 @@ export declare const Button: React.ForwardRefExoticComponent<{
      * Use 'borderless' to hide outline.
      * @default 'default'
      */
-    styleType?: "cta" | "high-visibility" | "default" | "borderless" | undefined;
+    styleType?: "default" | "cta" | "high-visibility" | "borderless" | undefined;
     /**
      * Icon shown before the main button content.
      */