@itwin/itwinui-react 2.0.0-dev.4 → 2.0.1

package/esm/core/Modal/ModalContent.js

@@ -1,6 +1,11 @@
+/*---------------------------------------------------------------------------------------------
+ * 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 { DialogContent } from '../Dialog/DialogContent';
 /**
  * Container for content in `Modal`.
  */
-export const ModalContent = DialogContent;
+export const ModalContent = (props) => (React.createElement(DialogContent, { ...props }));
 export default ModalContent;

package/esm/core/Table/Table.js

@@ -6,7 +6,7 @@ import React from 'react';
 import cx from 'classnames';
 import { actions as TableActions, useFlexLayout, useFilters, useRowSelect, useSortBy, useTable, useExpanded, usePagination, useColumnOrder, useGlobalFilter, } from 'react-table';
 import { ProgressRadial } from '../ProgressIndicators';
-import { useTheme, useResizeObserver, SvgSortDown, SvgSortUp, } from '../utils';
+import { useTheme, useResizeObserver, SvgSortDown, SvgSortUp, useIsomorphicLayoutEffect, } from '../utils';
 import '@itwin/itwinui-css/css/table.css';
 import { getCellStyle, getStickyStyle } from './utils';
 import { TableRowMemoized } from './TableRowMemoized';
@@ -285,7 +285,7 @@ export const Table = (props) => {
     }, [dispatch, state.columnResizing.columnWidths, flatHeaders, instance]);
     const [resizeRef] = useResizeObserver(onTableResize);
     // Flexbox handles columns resize so we take new column widths before browser repaints.
-    React.useLayoutEffect(() => {
+    useIsomorphicLayoutEffect(() => {
         if (state.isTableResizing) {
             const newColumnWidths = {};
             flatHeaders.forEach((column) => {

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

@@ -56,6 +56,12 @@ export declare type TablePaginatorProps = {
          * @default 'Rows per page'
          */
         rowsPerPageLabel?: string | null;
+        /**
+         * Function that returns a label shown in the bottom left to notify how many rows are selected.
+         * Only used if multi-selection mode is enabled.
+         * @default (totalSelectedRowsCount: number) => `${totalSelectedRowsCount} ${totalSelectedRowsCount === 1 ? 'row' : 'rows'} selected`;
+         */
+        rowsSelectedLabel?: (totalSelectedRowsCount: number) => string;
     };
 } & TablePaginatorRendererProps & Omit<CommonProps, 'title'>;
 /**

package/esm/core/Table/TablePaginator.js

@@ -18,6 +18,7 @@ const defaultLocalization = {
     nextPage: 'Next page',
     goToPageLabel: (page) => `Go to page ${page}`,
     rowsPerPageLabel: 'Rows per page',
+    rowsSelectedLabel: (totalSelectedRowsCount) => `${totalSelectedRowsCount} ${totalSelectedRowsCount === 1 ? 'row' : 'rows'} selected`,
 };
 /**
  * Table paginator component. Recommended to pass to the `Table` as `paginatorRenderer` prop.
@@ -120,7 +121,7 @@ export const TablePaginator = (props) => {
         return null;
     }
     return (React.createElement("div", { className: cx('iui-table-paginator', className), ref: paginatorResizeRef, ...rest },
-        React.createElement("div", { className: 'iui-left' }, totalSelectedRowsCount > 0 && (React.createElement("span", null, `${totalSelectedRowsCount} ${totalSelectedRowsCount === 1 ? 'row' : 'rows'} selected`))),
+        React.createElement("div", { className: 'iui-left' }, totalSelectedRowsCount > 0 && (React.createElement("span", null, localization.rowsSelectedLabel(totalSelectedRowsCount)))),
         showPagesList && (React.createElement("div", { className: 'iui-center', ref: overflowRef },
             React.createElement(IconButton, { styleType: 'borderless', disabled: currentPage === 0, onClick: () => onPageChange(currentPage - 1), size: buttonSize, "aria-label": localization.previousPage },
                 React.createElement(SvgChevronLeft, null)),

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

@@ -39,7 +39,9 @@ const defaultGetDragAndDropProps = (isEnabled) => (props, { instance, header, })
         event.preventDefault();
         const headerIndex = instance.flatHeaders.indexOf(header);
         if (instance.state.columnReorderStartIndex !== headerIndex) {
-            setOnDragColumnStyle(event, instance.state.columnReorderStartIndex > headerIndex ? 'left' : 'right');
+            setOnDragColumnStyle(event, instance.state.columnReorderStartIndex > headerIndex
+                ? 'left'
+                : 'right');
         }
     };
     const onDragLeave = (event) => {

package/esm/core/Tabs/Tabs.js

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
 import React from 'react';
-import { useTheme, useMergedRefs, getBoundedValue, useContainerWidth, } from '../utils';
+import { useTheme, useMergedRefs, getBoundedValue, useContainerWidth, useIsomorphicLayoutEffect, } from '../utils';
 import '@itwin/itwinui-css/css/tabs.css';
 import { Tab } from './Tab';
 /**
@@ -43,14 +43,14 @@ export const Tabs = (props) => {
     const [currentActiveIndex, setCurrentActiveIndex] = React.useState(() => activeIndex != null
         ? getBoundedValue(activeIndex, 0, labels.length - 1)
         : 0);
-    React.useLayoutEffect(() => {
+    useIsomorphicLayoutEffect(() => {
         if (activeIndex != null && currentActiveIndex !== activeIndex) {
             setCurrentActiveIndex(getBoundedValue(activeIndex, 0, labels.length - 1));
         }
     }, [activeIndex, currentActiveIndex, labels.length]);
     // CSS custom properties to place the active stripe
     const [stripeProperties, setStripeProperties] = React.useState({});
-    React.useLayoutEffect(() => {
+    useIsomorphicLayoutEffect(() => {
         if (type !== 'default' && tablistRef.current != undefined) {
             const activeTab = tablistRef.current.children[currentActiveIndex];
             const activeTabRect = activeTab.getBoundingClientRect();
@@ -74,7 +74,7 @@ export const Tabs = (props) => {
         }
     }, [focusedIndex]);
     const [hasSublabel, setHasSublabel] = React.useState(false); // used for setting size
-    React.useLayoutEffect(() => {
+    useIsomorphicLayoutEffect(() => {
         var _a;
         setHasSublabel(type !== 'pill' && // pill tabs should never have sublabels
             !!((_a = tablistRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('.iui-tab-description')));

package/esm/core/utils/color/ColorValue.js

@@ -213,7 +213,8 @@ export class ColorValue {
             switch (name) {
                 case 'rgb':
                 case 'rgba':
-                    color = /^(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*(\d*\.?\d+)\s*)?$/.exec(components);
+                    color =
+                        /^(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*(\d*\.?\d+)\s*)?$/.exec(components);
                     if (color) {
                         // rgb(255,0,0) rgba(255,0,0,0.5)
                         return [
@@ -226,7 +227,8 @@ export class ColorValue {
                     break;
                 case 'hsl':
                 case 'hsla':
-                    color = /^(\d*\.?\d+)\s*,\s*(\d+)\%\s*,\s*(\d+)\%\s*(?:,\s*(\d*\.?\d+)\s*)?$/.exec(components);
+                    color =
+                        /^(\d*\.?\d+)\s*,\s*(\d+)\%\s*,\s*(\d+)\%\s*(?:,\s*(\d*\.?\d+)\s*)?$/.exec(components);
                     if (color) {
                         // hsl(120,50%,50%) hsla(120,50%,50%,0.5)
                         const h = parseFloat(color[1]);

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

@@ -26,7 +26,7 @@ export const Resizer = (props) => {
         const initialPointerX = event.clientX;
         const initialPointerY = event.clientY;
         const [initialTranslateX, initialTranslateY] = getTranslateValues(elementRef.current);
-        const { width: initialWidth, height: initialHeight, } = elementRef.current.getBoundingClientRect();
+        const { width: initialWidth, height: initialHeight } = elementRef.current.getBoundingClientRect();
         let width = `${initialWidth}px`;
         let height = `${initialHeight}px`;
         let translateX = initialTranslateX;
@@ -126,7 +126,8 @@ export const Resizer = (props) => {
         elementRef.current.ownerDocument.addEventListener('pointerup', () => {
             document.removeEventListener('pointermove', onResizePointerMove);
             if (elementRef.current) {
-                elementRef.current.ownerDocument.body.style.userSelect = originalUserSelect;
+                elementRef.current.ownerDocument.body.style.userSelect =
+                    originalUserSelect;
                 isResizing.current = false;
                 onResizeEnd === null || onResizeEnd === void 0 ? void 0 : onResizeEnd({
                     width,

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

@@ -3,8 +3,7 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import React from 'react';
-import { mergeRefs } from '../hooks';
-import { useResizeObserver } from '../hooks/useResizeObserver';
+import { mergeRefs, useResizeObserver, useIsomorphicLayoutEffect, } from '../hooks';
 const getScrollableParent = (element, ownerDocument = document) => {
     if (!element || element === ownerDocument.body) {
         return ownerDocument.body;
@@ -146,18 +145,18 @@ export const useVirtualization = (props) => {
     const [resizeRef, resizeObserver] = useResizeObserver(onResize);
     // Find scrollable parent
     // Needed only on init
-    React.useLayoutEffect(() => {
+    useIsomorphicLayoutEffect(() => {
         var _a;
         const scrollableParent = getScrollableParent(parentRef.current, (_a = parentRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument);
         scrollContainer.current = scrollableParent;
         resizeRef(scrollableParent);
     }, [resizeRef]);
     // Stop watching resize, when virtual scroll is unmounted
-    React.useLayoutEffect(() => {
+    useIsomorphicLayoutEffect(() => {
         return () => resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect();
     }, [resizeObserver]);
     // Get child height when children available
-    React.useLayoutEffect(() => updateChildHeight(), [updateChildHeight]);
+    useIsomorphicLayoutEffect(() => updateChildHeight(), [updateChildHeight]);
     const updateVirtualScroll = React.useCallback(() => {
         const scrollableContainer = getScrollableContainer();
         if (!scrollableContainer) {
@@ -191,7 +190,7 @@ export const useVirtualization = (props) => {
             : scrollContainer.current.removeEventListener('scroll', onScrollRef.current);
     }, []);
     // Add event listener to the scrollable container.
-    React.useLayoutEffect(() => {
+    useIsomorphicLayoutEffect(() => {
         var _a, _b;
         removeScrollListener();
         onScrollRef.current = onScroll;
@@ -204,7 +203,7 @@ export const useVirtualization = (props) => {
         }
         return removeScrollListener;
     }, [onScroll, removeScrollListener]);
-    React.useLayoutEffect(() => {
+    useIsomorphicLayoutEffect(() => {
         if (!isMounted) {
             return;
         }
@@ -256,7 +255,7 @@ export const useVirtualization = (props) => {
             }
         }
     }, [scrollToIndex, isMounted]);
-    React.useLayoutEffect(() => {
+    useIsomorphicLayoutEffect(() => {
         if (!scrollContainerHeight) {
             return;
         }

package/esm/core/utils/functions/styles.d.ts

@@ -1,6 +1,6 @@
 /**
  * Returns translate values as an array of a given element.
  * @param element HTML element you want to get translate value of
- * @returns Translate values in pixels in a array `[translateX, translateY]`
+ * @returns Translate values in pixels in an array `[translateX, translateY]`
  */
 export declare const getTranslateValues: (element: HTMLElement | null | undefined) => number[];

package/esm/core/utils/functions/styles.js

@@ -5,7 +5,7 @@
 /**
  * Returns translate values as an array of a given element.
  * @param element HTML element you want to get translate value of
- * @returns Translate values in pixels in a array `[translateX, translateY]`
+ * @returns Translate values in pixels in an array `[translateX, translateY]`
  */
 export const getTranslateValues = (element) => {
     if (!element) {

package/esm/core/utils/hooks/useDragAndDrop.js

@@ -35,7 +35,7 @@ export const useDragAndDrop = (elementRef, containerRef, enabled = true) => {
         if (!elementRef.current || !enabled) {
             return;
         }
-        const { top, right, bottom, left, } = (_a = elementRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+        const { top, right, bottom, left } = (_a = elementRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
         let [newTranslateX, newTranslateY] = getTranslateValues(elementRef.current);
         containerRectRef.current = getContainerRect(containerRef);
         if (bottom > containerRectRef.current.bottom) {

package/esm/core/utils/hooks/useOverflow.js

@@ -5,6 +5,7 @@
 import React from 'react';
 import { useMergedRefs } from './useMergedRefs';
 import { useResizeObserver } from './useResizeObserver';
+import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';
 const STARTING_MAX_ITEMS_COUNT = 20;
 /**
  * Hook that observes the size of an element and returns the number of items
@@ -37,7 +38,7 @@ export const useOverflow = (items, disabled = false, orientation = 'horizontal')
     const updateContainerSize = React.useCallback(({ width, height }) => setContainerSize(orientation === 'horizontal' ? width : height), [orientation]);
     const [resizeRef, observer] = useResizeObserver(updateContainerSize);
     const resizeObserverRef = React.useRef(observer);
-    React.useLayoutEffect(() => {
+    useIsomorphicLayoutEffect(() => {
         if (disabled) {
             setVisibleCount(items.length);
         }
@@ -47,7 +48,7 @@ export const useOverflow = (items, disabled = false, orientation = 'horizontal')
         }
     }, [containerSize, disabled, items]);
     const mergedRefs = useMergedRefs(containerRef, resizeRef);
-    React.useLayoutEffect(() => {
+    useIsomorphicLayoutEffect(() => {
         var _a;
         if (!containerRef.current || disabled) {
             (_a = resizeObserverRef.current) === null || _a === void 0 ? void 0 : _a.disconnect();
@@ -75,7 +76,7 @@ export const useOverflow = (items, disabled = false, orientation = 'horizontal')
         }
         needsFullRerender.current = false;
     }, [containerSize, visibleCount, disabled, items.length, orientation]);
-    React.useLayoutEffect(() => {
+    useIsomorphicLayoutEffect(() => {
         previousContainerSize.current = containerSize;
     }, [containerSize]);
     return [mergedRefs, visibleCount];

package/esm/core/utils/hooks/useTheme.js

@@ -22,8 +22,8 @@ export const useTheme = (theme, themeOptions) => {
     const themeContext = React.useContext(ThemeContext);
     const ownerDocument = (_a = themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.ownerDocument) !== null && _a !== void 0 ? _a : getDocument();
     useIsomorphicLayoutEffect(() => {
-        // exit early if theme was already set by provider
-        if (themeContext || !ownerDocument) {
+        // exit early if theme was already set by provider or is present on <body>
+        if (themeContext || !ownerDocument || ownerDocument.body.dataset.iuiTheme) {
             return;
         }
         ownerDocument.body.classList.toggle('iui-root', true);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/itwinui-react",
-  "version": "2.0.0-dev.4",
+  "version": "2.0.1",
   "author": "Bentley Systems",
   "license": "MIT",
   "main": "cjs/index.js",
@@ -46,8 +46,8 @@
     "ux"
   ],
   "scripts": {
-    "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\"",
+    "build": "yarn clean:build && tsc -p tsconfig.cjs.json && tsc -p tsconfig.esm.json",
+    "build:watch": "yarn clean:build && 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",
@@ -56,12 +56,11 @@
     "format": "prettier --config .prettierrc **/*.{tsx,ts,js} --ignore-path .gitignore --write",
     "lint": "eslint \"**/*.{js,ts,tsx}\" --max-warnings=0",
     "lint:fix": "yarn lint --fix && node ../configs/copyrightLinter.js --fix \"*/**/*.{js,ts,tsx}\"",
-    "copy-files": "cpy \"../../{README,LICENSE}.md\" .",
     "dev": "yarn build:watch",
     "createComponent": "node ../../scripts/createComponent.js"
   },
   "dependencies": {
-    "@itwin/itwinui-css": "^1.0.0",
+    "@itwin/itwinui-css": "^1.1.0",
     "@itwin/itwinui-illustrations-react": "^2.0.0",
     "@itwin/itwinui-variables": "^1.0.0",
     "@tippyjs/react": "^4.2.6",