@itwin/itwinui-react 1.42.0 → 1.43.0

package/esm/core/Table/columns/actionColumn.js

@@ -1,3 +1,14 @@
+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);
+};
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
@@ -11,6 +22,7 @@ import { MenuItem } from '../../Menu';
 import { tableResizeStartAction } from '../Table';
 import { SELECTION_CELL_ID } from './selectionColumn';
 import { EXPANDER_CELL_ID } from './expanderColumn';
+import cx from 'classnames';
 var ACTION_CELL_ID = 'iui-table-action';
 /**
  * Action column that adds column manager to the Table header.
@@ -46,6 +58,7 @@ export var ActionColumn = function (_a) {
         Header: function (_a) {
             var allColumns = _a.allColumns, dispatch = _a.dispatch, state = _a.state;
             var _b = React.useState(false), isOpen = _b[0], setIsOpen = _b[1];
+            var buttonRef = React.useRef(null);
             if (!columnManager) {
                 return null;
             }
@@ -71,13 +84,31 @@ export var ActionColumn = function (_a) {
                         }
                         // Triggers an update to resize the widths of all visible columns
                         dispatch({ type: tableResizeStartAction });
+                        // If some columns were resized and some columns visibility was enabled, then horizontal scrollbar appears
+                        // and table is scrolled to the very left which means our visibility dropdown menu is not visible.
+                        // So for better UX we need to scroll to that dropdown menu.
+                        queueMicrotask(function () {
+                            var _a;
+                            (_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView();
+                        });
                     };
                     return (React.createElement(MenuItem, { key: column.id, icon: React.createElement(Checkbox, { checked: checked, disabled: column.disableToggleVisibility, onClick: function (e) { return e.stopPropagation(); }, onChange: onClick, "aria-labelledby": "iui-column-".concat(column.id) }), onClick: onClick, disabled: column.disableToggleVisibility },
                         React.createElement("div", { id: "iui-column-".concat(column.id) }, column.render('Header'))));
                 });
             };
-            return (React.createElement(DropdownMenu, { menuItems: headerCheckBoxes, onHide: function () { return setIsOpen(false); }, onShow: function () { return setIsOpen(true); } },
-                React.createElement(IconButton, { styleType: 'borderless', isActive: isOpen },
+            var dropdownMenuProps = typeof columnManager !== 'boolean'
+                ? columnManager.dropdownMenuProps
+                : {};
+            return (React.createElement(DropdownMenu, __assign({}, dropdownMenuProps, { menuItems: headerCheckBoxes, onHide: function (i) {
+                    var _a;
+                    setIsOpen(false);
+                    (_a = dropdownMenuProps.onHide) === null || _a === void 0 ? void 0 : _a.call(dropdownMenuProps, i);
+                }, onShow: function (i) {
+                    var _a;
+                    setIsOpen(true);
+                    (_a = dropdownMenuProps.onShow) === null || _a === void 0 ? void 0 : _a.call(dropdownMenuProps, i);
+                }, style: __assign({ maxHeight: '315px' }, dropdownMenuProps.style), className: cx('iui-scroll', dropdownMenuProps.className) }),
+                React.createElement(IconButton, { styleType: 'borderless', isActive: isOpen, ref: buttonRef },
                     React.createElement(SvgColumnManager, null))));
         },
     };

package/esm/core/Table/hooks/useScrollToRow.d.ts

@@ -7,5 +7,5 @@ declare type ScrollToRow<T extends Record<string, unknown>> = {
 declare type ScrollToRowProps<T extends Record<string, unknown>> = TableProps<T> & {
     page: Row<T>[];
 };
-export declare function useScrollToRow<T extends Record<string, unknown>>({ data, enableVirtualization, page, paginatorRenderer, scrollToRow, onBottomReached, }: ScrollToRowProps<T>): ScrollToRow<T>;
+export declare function useScrollToRow<T extends Record<string, unknown>>({ data, enableVirtualization, page, paginatorRenderer, scrollToRow, }: ScrollToRowProps<T>): ScrollToRow<T>;
 export {};

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

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import React from 'react';
 export function useScrollToRow(_a) {
-    var data = _a.data, enableVirtualization = _a.enableVirtualization, page = _a.page, paginatorRenderer = _a.paginatorRenderer, scrollToRow = _a.scrollToRow, onBottomReached = _a.onBottomReached;
+    var data = _a.data, enableVirtualization = _a.enableVirtualization, page = _a.page, paginatorRenderer = _a.paginatorRenderer, scrollToRow = _a.scrollToRow;
     var rowRefs = React.useRef({});
     // Refs prevents from having `page` and `data` as dependencies
     // therefore we avoid unnecessary scroll to row.
@@ -15,12 +15,12 @@ export function useScrollToRow(_a) {
     // For virtualized tables, all we need to do is pass the index of the item
     // to the VirtualScroll component
     var scrollToIndex = React.useMemo(function () {
-        if (!scrollToRow || paginatorRenderer || onBottomReached) {
+        if (!scrollToRow || paginatorRenderer) {
             return undefined;
         }
         var index = scrollToRow(pageRef.current, dataRef.current);
         return index < 0 ? undefined : index;
-    }, [onBottomReached, paginatorRenderer, scrollToRow]);
+    }, [paginatorRenderer, scrollToRow]);
     // For non-virtualized tables, we need to add a ref to each row
     // and scroll to the element
     React.useEffect(function () {

package/esm/core/index.d.ts

@@ -1,5 +1,7 @@
 export { Alert } from './Alert';
 export type { AlertProps } from './Alert';
+export { Backdrop } from './Backdrop';
+export type { BackdropProps } from './Backdrop';
 export { Badge } from './Badge';
 export type { BadgeProps } from './Badge';
 export { Breadcrumbs } from './Breadcrumbs';
@@ -28,7 +30,7 @@ export { Fieldset } from './Fieldset';
 export type { FieldsetProps } from './Fieldset';
 export { FileUpload, FileUploadTemplate } from './FileUpload';
 export type { FileUploadProps, FileUploadTemplateProps } from './FileUpload';
-export { Footer } from './Footer';
+export { Footer, defaultFooterElements } from './Footer';
 export type { FooterProps, FooterElement, TitleTranslations } from './Footer';
 export { Header, HeaderBreadcrumbs, HeaderButton, HeaderLogo } from './Header';
 export type { HeaderProps, HeaderBreadcrumbsProps, HeaderButtonProps, HeaderLogoProps, } from './Header';

package/esm/core/index.js

@@ -3,6 +3,7 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 export { Alert } from './Alert';
+export { Backdrop } from './Backdrop';
 export { Badge } from './Badge';
 export { Breadcrumbs } from './Breadcrumbs';
 export { Button, DropdownButton, IconButton, IdeasButton, SplitButton, } from './Buttons';
@@ -17,7 +18,7 @@ export { ErrorPage } from './ErrorPage';
 export { ExpandableBlock } from './ExpandableBlock';
 export { Fieldset } from './Fieldset';
 export { FileUpload, FileUploadTemplate } from './FileUpload';
-export { Footer } from './Footer';
+export { Footer, defaultFooterElements } from './Footer';
 export { Header, HeaderBreadcrumbs, HeaderButton, HeaderLogo } from './Header';
 export { VerticalTabs, Tab, HorizontalTabs, HorizontalTab } from './Tabs';
 export { InformationPanel, InformationPanelWrapper, InformationPanelHeader, InformationPanelBody, InformationPanelContent, } from './InformationPanel';

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

@@ -36,7 +36,7 @@ export var FocusTrap = function (props) {
             lastElement === null || lastElement === void 0 ? void 0 : lastElement.focus();
         }
     };
-    return (React.createElement("div", null,
+    return (React.createElement(React.Fragment, null,
         React.createElement("div", { tabIndex: 0, onFocus: onFirstFocus, "aria-hidden": true }),
         React.cloneElement(children, {
             ref: mergeRefs(children.ref, childRef),

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

@@ -38,7 +38,7 @@ export var MiddleTextTruncation = function (props) {
     var _b = useOverflow(text), ref = _b[0], visibleCount = _b[1];
     var truncatedText = React.useMemo(function () {
         if (visibleCount < text.length) {
-            return "".concat(text.substr(0, visibleCount - endCharsCount - ELLIPSIS_CHAR.length)).concat(ELLIPSIS_CHAR).concat(text.substr(text.length - endCharsCount));
+            return "".concat(text.substring(0, visibleCount - endCharsCount - ELLIPSIS_CHAR.length)).concat(ELLIPSIS_CHAR).concat(text.substring(text.length - endCharsCount));
         }
         else {
             return text;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/itwinui-react",
-  "version": "1.42.0",
+  "version": "1.43.0",
   "author": "Bentley Systems",
   "license": "MIT",
   "main": "cjs/index.js",
@@ -29,10 +29,11 @@
     "ux"
   ],
   "scripts": {
-    "build": "yarn clean && yarn copy-files && tsc -p tsconfig.cjs.json && tsc -p tsconfig.esm.json",
-    "build:watch": "yarn clean && yarn copy-files && concurrently \"tsc -p tsconfig.cjs.json --watch\" \"tsc -p tsconfig.esm.json --watch\"",
-    "clean": "yarn clean:coverage && rimraf esm && rimraf cjs",
+    "build": "yarn clean:build && yarn copy-files && tsc -p tsconfig.cjs.json && tsc -p tsconfig.esm.json",
+    "build:watch": "yarn clean:build && yarn copy-files && concurrently \"tsc -p tsconfig.cjs.json --watch\" \"tsc -p tsconfig.esm.json --watch\"",
+    "clean:build": "yarn clean:coverage && rimraf esm && rimraf cjs",
     "clean:coverage": "rimraf coverage",
+    "clean": "rimraf .turbo && yarn clean:coverage && yarn clean:build && rimraf node_modules",
     "test": "jest",
     "test:watch": "jest --watch",
     "format": "prettier --config .prettierrc **/*.{tsx,ts,js} --ignore-path .gitignore --write",
@@ -43,7 +44,7 @@
     "createComponent": "node ../../scripts/createComponent.js"
   },
   "dependencies": {
-    "@itwin/itwinui-css": "^0.61.0",
+    "@itwin/itwinui-css": "^0.63.0",
     "@itwin/itwinui-icons-react": "^1.10.1",
     "@itwin/itwinui-illustrations-react": "^1.3.1",
     "@tippyjs/react": "^4.2.5",