@itwin/itwinui-react 1.39.0 → 1.40.0

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

@@ -0,0 +1,80 @@
+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));
+};
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import { actions, } from 'react-table';
+actions.setScrolledLeft = 'setScrolledLeft';
+actions.setScrolledRight = 'setScrolledRight';
+export var useStickyColumns = function (hooks) {
+    hooks.stateReducers.push(reducer);
+    hooks.useInstance.push(useInstance);
+};
+var reducer = function (newState, action) {
+    var _a, _b;
+    if (action.type === actions.init) {
+        return __assign(__assign({}, newState), { sticky: {} });
+    }
+    if (action.type === actions.setScrolledLeft &&
+        ((_a = newState.sticky) === null || _a === void 0 ? void 0 : _a.isScrolledToLeft) !== action.value // Prevents unnecessary re-render
+    ) {
+        return __assign(__assign({}, newState), { sticky: __assign(__assign({}, newState.sticky), { isScrolledToLeft: action.value }) });
+    }
+    if (action.type === actions.setScrolledRight &&
+        ((_b = newState.sticky) === null || _b === void 0 ? void 0 : _b.isScrolledToRight) !== action.value // Prevents unnecessary re-render
+    ) {
+        return __assign(__assign({}, newState), { sticky: __assign(__assign({}, newState.sticky), { isScrolledToRight: action.value }) });
+    }
+    return newState;
+};
+var useInstance = function (instance) {
+    var flatHeaders = instance.flatHeaders;
+    // Edge case. Saving original sticky state in case sticky columns are reordered.
+    flatHeaders.forEach(function (header) {
+        var _a;
+        if (!header.originalSticky) {
+            header.originalSticky = (_a = header.sticky) !== null && _a !== void 0 ? _a : 'none';
+        }
+        header.sticky =
+            header.originalSticky === 'none' ? undefined : header.originalSticky;
+    });
+    // If there is a column that is sticked to the left, make every column prior to that sticky too.
+    var hasLeftStickyColumn = false;
+    __spreadArray([], flatHeaders, true).reverse().forEach(function (header) {
+        if (header.sticky === 'left') {
+            hasLeftStickyColumn = true;
+        }
+        if (hasLeftStickyColumn) {
+            header.sticky = 'left';
+        }
+    });
+    // If there is a column that is sticked to the right, make every column after to that sticky too.
+    var hasRightStickyColumn = false;
+    flatHeaders.forEach(function (header) {
+        if (header.sticky === 'right') {
+            hasRightStickyColumn = true;
+        }
+        if (hasRightStickyColumn) {
+            header.sticky = 'right';
+        }
+    });
+};

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

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

package/esm/core/Table/utils.js

@@ -1,3 +1,12 @@
+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));
+};
 export var getCellStyle = function (column, isTableResizing) {
     var style = {};
     style.flex = "1 1 145px";
@@ -20,3 +29,28 @@ export var getCellStyle = function (column, isTableResizing) {
     }
     return style;
 };
+export var getStickyStyle = function (column, columnList) {
+    if (!column.sticky) {
+        return {};
+    }
+    var left = 0;
+    for (var _i = 0, columnList_1 = columnList; _i < columnList_1.length; _i++) {
+        var col = columnList_1[_i];
+        if (col.id === column.id) {
+            break;
+        }
+        left += Number(col.width || col.resizeWidth || 0);
+    }
+    var right = 0;
+    for (var _a = 0, _b = __spreadArray([], columnList, true).reverse(); _a < _b.length; _a++) {
+        var col = _b[_a];
+        if (col.id === column.id) {
+            break;
+        }
+        right += Number(col.width || col.resizeWidth || 0);
+    }
+    return {
+        '--iui-table-sticky-left': column.sticky === 'left' ? "".concat(left, "px") : undefined,
+        '--iui-table-sticky-right': column.sticky === 'right' ? "".concat(right, "px") : undefined,
+    };
+};

package/esm/core/index.d.ts

@@ -48,8 +48,8 @@ export { LabeledSelect } from './LabeledSelect';
 export type { LabeledSelectProps } from './LabeledSelect';
 export { LabeledTextarea } from './LabeledTextarea';
 export type { LabeledTextareaProps } from './LabeledTextarea';
-export { Menu, MenuItem, MenuDivider, MenuExtraContent } from './Menu';
-export type { MenuProps, MenuItemProps, MenuDividerProps, MenuExtraContentProps, } from './Menu';
+export { Menu, MenuItem, MenuDivider, MenuExtraContent, MenuItemSkeleton, } from './Menu';
+export type { MenuProps, MenuItemProps, MenuDividerProps, MenuExtraContentProps, MenuItemSkeletonProps, } from './Menu';
 export { Modal, ModalButtonBar, ModalContent } from './Modal';
 export type { ModalProps, ModalButtonBarProps, ModalContentProps, } from './Modal';
 export { ProgressLinear, ProgressRadial } from './ProgressIndicators';

package/esm/core/index.js

@@ -27,7 +27,7 @@ export { LabeledInput } from './LabeledInput';
 export { InputGroup } from './InputGroup';
 export { LabeledSelect } from './LabeledSelect';
 export { LabeledTextarea } from './LabeledTextarea';
-export { Menu, MenuItem, MenuDivider, MenuExtraContent } from './Menu';
+export { Menu, MenuItem, MenuDivider, MenuExtraContent, MenuItemSkeleton, } from './Menu';
 export { Modal, ModalButtonBar, ModalContent } from './Modal';
 export { ProgressLinear, ProgressRadial } from './ProgressIndicators';
 export { Radio } from './Radio';

package/esm/core/utils/components/VisuallyHidden.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export declare type VisuallyHiddenProps = React.ComponentPropsWithRef<'div'>;
+/**
+ * Hides content visually but is still accessible to screen readers.
+ */
+export declare const VisuallyHidden: React.ForwardRefExoticComponent<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & React.RefAttributes<HTMLDivElement>>;
+export default VisuallyHidden;

package/esm/core/utils/components/VisuallyHidden.js

@@ -0,0 +1,38 @@
+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 cx from 'classnames';
+import { useTheme } from '../hooks';
+/**
+ * Hides content visually but is still accessible to screen readers.
+ */
+export var VisuallyHidden = React.forwardRef(function (props, ref) {
+    var className = props.className, rest = __rest(props, ["className"]);
+    useTheme();
+    return (React.createElement("div", __assign({ className: cx('iui-visually-hidden', className), ref: ref }, rest)));
+});
+export default VisuallyHidden;

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

@@ -5,3 +5,4 @@ export * from './icons';
 export * from './WithCSSTransition';
 export * from './MiddleTextTruncation';
 export * from './VirtualScroll';
+export * from './VisuallyHidden';

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

@@ -9,3 +9,4 @@ export * from './icons';
 export * from './WithCSSTransition';
 export * from './MiddleTextTruncation';
 export * from './VirtualScroll';
+export * from './VisuallyHidden';

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

@@ -46,6 +46,10 @@ declare module 'react-table' {
         };
         isTableResizing?: boolean;
         columnReorderStartIndex: number;
+        sticky: {
+            isScrolledToRight?: boolean;
+            isScrolledToLeft?: boolean;
+        };
     }
     interface ColumnInterface<D extends object = {}> extends UseSortByColumnOptions<D>, UseFiltersColumnOptions<D>, UseResizeColumnsColumnOptions<D> {
         /**
@@ -91,12 +95,17 @@ declare module 'react-table' {
          * @default false
          */
         disableToggleVisibility?: boolean;
+        /**
+         * Side on which column should be sticked to.
+         */
+        sticky?: 'left' | 'right';
     }
     interface ColumnInstance<D extends object = {}> extends UseFiltersColumnProps<D>, UseGroupByColumnProps<D>, UseResizeColumnsColumnProps<D>, UseSortByColumnProps<D> {
         originalWidth: number;
         resizeWidth?: number;
         isResizerVisible?: boolean;
         getDragAndDropProps: () => TableKeyedProps;
+        originalSticky?: 'left' | 'right' | 'none';
     }
     interface Cell<D extends object = {}> extends UseGroupByCellProps<D>, UseRowStateCellProps<D> {
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/itwinui-react",
-  "version": "1.39.0",
+  "version": "1.40.0",
   "author": "Bentley Systems",
   "license": "MIT",
   "main": "cjs/index.js",
@@ -43,7 +43,7 @@
     "dev": "yarn build:watch"
   },
   "dependencies": {
-    "@itwin/itwinui-css": "^0.59.1",
+    "@itwin/itwinui-css": "^0.59.2",
     "@itwin/itwinui-icons-react": "^1.10.1",
     "@itwin/itwinui-illustrations-react": "^1.3.1",
     "@tippyjs/react": "^4.2.5",