@itwin/itwinui-react 1.25.0 → 1.28.0

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

@@ -0,0 +1,269 @@
+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));
+};
+import { actions, makePropGetter, useGetLatest, } from 'react-table';
+export var useResizeColumns = function (ownerDocument) { return function (hooks) {
+    hooks.getResizerProps = [defaultGetResizerProps(ownerDocument)];
+    hooks.stateReducers.push(reducer);
+    hooks.useInstanceBeforeDimensions.push(useInstanceBeforeDimensions);
+}; };
+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: actions.columnResizing, clientX: clientXPos });
+        };
+        var dispatchEnd = function () {
+            return dispatch({
+                type: 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: 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',
+        },
+    ];
+}; };
+useResizeColumns.pluginName = 'useResizeColumns';
+var reducer = function (newState, action, previousState, instance) {
+    if (action.type === actions.init) {
+        return __assign(__assign({}, newState), { columnResizing: {
+                columnWidths: {},
+            } });
+    }
+    if (action.type === actions.resetResize) {
+        return __assign(__assign({}, newState), { columnResizing: {
+                columnWidths: {},
+            } });
+    }
+    if (action.type === 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 === 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 === 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 = 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 = 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/esm/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/esm/core/Table/utils.js

@@ -1,10 +1,16 @@
-export var getCellStyle = function (column) {
+export 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/esm/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/esm/core/Tabs/Tabs.js

@@ -26,7 +26,7 @@ var __rest = (this && this.__rest) || function (s, e) {
  *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
 import React from 'react';
-import { useTheme, useResizeObserver, useMergedRefs, getBoundedValue, getWindow, } from '../utils';
+import { useTheme, useMergedRefs, getBoundedValue, getWindow, useContainerWidth, } from '../utils';
 import '@itwin/itwinui-css/css/tabs.css';
 import { Tab } from './Tab';
 /**
@@ -55,15 +55,10 @@ import { Tab } from './Tab';
  */
 export 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"]);
     useTheme();
     var tablistRef = React.useRef(null);
-    var _h = React.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.useCallback(function (_a) {
-        var width = _a.width;
-        return setTabsWidth(width);
-    }, []);
-    var tablistSizeRef = useResizeObserver(updateTabsWidth)[0];
+    var _h = useContainerWidth(type !== 'default'), tablistSizeRef = _h[0], tabsWidth = _h[1];
     var refs = useMergedRefs(tablistRef, tablistSizeRef);
     var _j = React.useState(function () {
         return activeIndex != null
@@ -172,7 +167,7 @@ export var Tabs = function (props) {
         }
     };
     var isIE = !((_c = (_b = (_a = 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.createElement("div", { className: cx('iui-tabs-wrapper', "iui-" + orientation), style: stripeProperties },
+    return (React.createElement("div", { className: cx('iui-tabs-wrapper', "iui-" + orientation, wrapperClassName), style: stripeProperties },
         React.createElement("ul", __assign({ className: cx('iui-tabs', "iui-" + type, {
                 'iui-green': color === 'green',
                 'iui-animated': type !== 'default' && !isIE,

package/esm/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/esm/core/index.js

@@ -19,7 +19,7 @@ export { FileUpload, FileUploadTemplate } from './FileUpload';
 export { Footer } from './Footer';
 export { Header, HeaderBreadcrumbs, HeaderButton, HeaderLogo } from './Header';
 export { VerticalTabs, Tab, HorizontalTabs, HorizontalTab } from './Tabs';
-export { InformationPanel, InformationPanelWrapper, InformationPanelHeader, InformationPanelBody, } from './InformationPanel';
+export { InformationPanel, InformationPanelWrapper, InformationPanelHeader, InformationPanelBody, InformationPanelContent, } from './InformationPanel';
 export { Input } from './Input';
 export { Label } from './Label';
 export { LabeledInput } from './LabeledInput';
@@ -47,4 +47,4 @@ export { Body, Headline, Leading, Small, Subheading, Title, Blockquote, Code, Kb
 export { UserIcon } from './UserIcon';
 export { UserIconGroup } from './UserIconGroup';
 export { Wizard } from './Wizard';
-export { getUserColor, useTheme, ColorValue } from './utils';
+export { getUserColor, useTheme, ColorValue, MiddleTextTruncation, } from './utils';

package/esm/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/esm/core/utils/components/MiddleTextTruncation.js

@@ -0,0 +1,49 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import React from 'react';
+import { useOverflow } from '../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' />
+ */
+export var MiddleTextTruncation = function (props) {
+    var text = props.text, _a = props.endCharsCount, endCharsCount = _a === void 0 ? 6 : _a, style = props.style, rest = __rest(props, ["text", "endCharsCount", "style"]);
+    var _b = useOverflow(text), ref = _b[0], visibleCount = _b[1];
+    var truncatedText = React.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.createElement("span", __assign({ style: __assign({ display: 'flex', minWidth: 0, flexGrow: 1, whiteSpace: 'nowrap' }, style), ref: ref }, rest), truncatedText));
+};
+export default MiddleTextTruncation;

package/esm/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/esm/core/utils/components/index.js

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

package/esm/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/esm/core/utils/hooks/index.js

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

package/esm/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/esm/core/utils/hooks/useContainerWidth.js

@@ -0,0 +1,43 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import React from 'react';
+import { useMergedRefs } from './useMergedRefs';
+import { useResizeObserver } from './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>;
+ */
+export var useContainerWidth = function (watchResizes) {
+    if (watchResizes === void 0) { watchResizes = true; }
+    var _a = React.useState(0), contentWidth = _a[0], setContentWidth = _a[1];
+    var ref = React.useCallback(function (element) {
+        if (!element) {
+            return;
+        }
+        setContentWidth(element.getBoundingClientRect().width);
+    }, []);
+    var updateWidth = React.useCallback(function (_a) {
+        var width = _a.width;
+        return setContentWidth(width);
+    }, []);
+    var _b = useResizeObserver(updateWidth), resizeRef = _b[0], resizeObserver = _b[1];
+    if (!watchResizes) {
+        resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect();
+    }
+    var refs = useMergedRefs(ref, watchResizes ? resizeRef : undefined);
+    return [refs, contentWidth];
+};
+export default useContainerWidth;

package/esm/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/esm/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/itwinui-react",
-  "version": "1.25.0",
+  "version": "1.28.0",
   "author": "Bentley Systems",
   "license": "MIT",
   "main": "cjs/index.js",
@@ -40,7 +40,7 @@
     "build-storybook": "build-storybook"
   },
   "dependencies": {
-    "@itwin/itwinui-css": "^0.39.1",
+    "@itwin/itwinui-css": "^0.43.0",
     "@itwin/itwinui-icons-react": "^1.1.1",
     "@itwin/itwinui-illustrations-react": "^1.0.1",
     "@tippyjs/react": "^4.2.5",
@@ -63,6 +63,7 @@
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^12.0.0",
     "@testing-library/react-hooks": "^7.0.1",
+    "@testing-library/user-event": "^13.5.0",
     "@types/classnames": "^2.2.7",
     "@types/jest": "^27.0.0",
     "@types/node": "^10.12.2",
@@ -81,14 +82,15 @@
     "eslint-plugin-react": "^7.25.1",
     "eslint-plugin-react-hooks": "^4.2.0",
     "fast-glob": "^3.2.5",
-    "husky": "^3.0.0",
+    "husky": "^4.0.0",
     "inquirer": "^6.2.2",
     "jest": "^27.0.6",
     "jest-cli": "^27.0.6",
     "jest-junit": "^12.0.0",
+    "lint-staged": "^12.1.2",
     "markdown-to-jsx": "6.11.4",
     "mkdirp": "^1.0.4",
-    "prettier": "^2.2.1",
+    "prettier": "2.2.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "rimraf": "^2.6.2",
@@ -120,9 +122,16 @@
   },
   "husky": {
     "hooks": {
-      "pre-commit": "yarn pretty && yarn lint:fix"
+      "pre-commit": "lint-staged"
     }
   },
+  "lint-staged": {
+    "*.{tsx,ts,jsx,js}": [
+      "prettier --write",
+      "eslint --fix",
+      "yarn lint:copyright --fix"
+    ]
+  },
   "sideEffects": [
     "**/*.scss",
     "**/*.css"