@itwin/itwinui-react 1.26.1 → 1.27.0

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

@@ -0,0 +1,267 @@
+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();
+                e.stopPropagation();
+                onResizeStart(e, header);
+            },
+            onTouchStart: function (e) {
+                e.persist();
+                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

@@ -55,7 +55,7 @@ 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 = useContainerWidth(type !== 'default'), tablistSizeRef = _h[0], tabsWidth = _h[1];
@@ -167,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/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.26.1",
+  "version": "1.27.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.41.1",
     "@itwin/itwinui-icons-react": "^1.1.1",
     "@itwin/itwinui-illustrations-react": "^1.0.1",
     "@tippyjs/react": "^4.2.5",
@@ -81,14 +81,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 +121,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"