@itwin/itwinui-react 2.0.0 → 2.0.1

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+### [2.0.1](https://www.github.com/iTwin/iTwinUI-react/compare/v2.0.0...v2.0.1) (2022-12-05)
+
+### Fixes
+
+* **useTheme:** Exit early if theme is already set on body ([#963](https://www.github.com/iTwin/iTwinUI-react/issues/963)) ([29033d4](https://www.github.com/iTwin/iTwinUI-react/commit/29033d488bc6cefb3ea064305898ade85475e2ff))
+* **ModalButtonBar, ModalContent:** Wrap `DialogButtonBar` and `DialogContent` instead of directly assigning ([#961](https://www.github.com/iTwin/iTwinUI-react/issues/961)) ([0881e92](https://www.github.com/iTwin/iTwinUI-react/commit/0881e92f037b7ce717f05742014ac2d6dd8c580d))
+* **Table:** Added localization for selected rows count ([#945](https://www.github.com/iTwin/iTwinUI-react/issues/945)) ([71f2326](https://www.github.com/iTwin/iTwinUI-react/commit/71f232605237e0095ebe0bff4cf01d241c143c49))
+* Replaced all instances of `useLayoutEffect` with `useIsomorphicLayoutEffect` to fix SSR warnings ([#964](https://www.github.com/iTwin/iTwinUI-react/issues/964)) ([15b0389](https://www.github.com/iTwin/iTwinUI-react/commit/15b038934e55d3f61631113d91f2952127426c1d))
+* Fixed css warnings about `start` vs `flex-start` through base itwinui-css update ([#962](https://www.github.com/iTwin/iTwinUI-react/issues/962))
+
 ## [2.0.0](https://www.github.com/iTwin/iTwinUI-react/compare/v1.48.1...v2.0.0) (2022-11-15)
 
 Welcome to the v2 release of iTwinUI-react. 🎉
@@ -10,11 +20,19 @@ These release notes offer a brief summary of the main changes. Check out the [iT
 
 ### ⚠ BREAKING CHANGES
 
-There is only one new breaking change in this release.
+iTwinUI no longer supports Internet Explorer. The build output now targets `es2018` rather than `es5`, and CSS variables and grid are used without fallbacks.
+
+As for breaking API changes, there is only one:
 
 * **Table:** `columns` prop must now be an array. First level `Header` is no longer required ([#935](https://www.github.com/iTwin/iTwinUI-react/issues/935)) ([83d5cfe](https://www.github.com/iTwin/iTwinUI-react/commit/83d5cfe93980b628c79ec3951d05663a054699fc))
+```diff
+- const columns = { Header: 'Table', columns: [{ accessor: 'name', Header: 'Name' }, … ] };
++ const columns = [{ accessor: 'name', Header: 'Name' }, … ];
+
+ <Table columns={columns} data={data} />
+```
 
-Other than that, we have removed props and components that were already deprecated in v1.
+Other than that, props and components that were already deprecated in v1 have been removed:
 
 * **Tabs:** Remove deprecated `HorizontalTab` and `HorizontalTabProps` ([#852](https://www.github.com/iTwin/iTwinUI-react/issues/852)) ([31ddeae](https://www.github.com/iTwin/iTwinUI-react/commit/31ddeaed3dc5919f69edb1bd9580d766fabc35c2))
 * **Checkbox, Radio:** Remove deprecated `checkmarkClassName` and `checkmarkStyle` ([#855](https://www.github.com/iTwin/iTwinUI-react/issues/855)) ([5c339be](https://www.github.com/iTwin/iTwinUI-react/commit/5c339beddd117bdf5a834b96dff65d4fd67d5255))
@@ -22,7 +40,7 @@ Other than that, we have removed props and components that were already deprecat
 
 ### Deprecations
 
-We have taken this opportunity to deprecate a few more things while not removing them just yet, to minimize the number of breaking changes.
+We have also taken this opportunity to deprecate a few more things while not removing them just yet, to minimize the number of breaking changes.
 
 * **Avatar, AvatarGroup:** Deprecate `UserIcon`/`UserIconGroup`, replace with `Avatar`/`AvatarGroup` ([#902](https://www.github.com/iTwin/iTwinUI-react/issues/902)) ([4001bd1](https://www.github.com/iTwin/iTwinUI-react/commit/4001bd12aa9021fdcbb3e49c271eec10ec853a83))
   - Also deprecated `userIcon` prop in `Header`.
@@ -40,7 +58,7 @@ We have taken this opportunity to deprecate a few more things while not removing
 * **Table:** Row selection count for paginator ([#837](https://www.github.com/iTwin/iTwinUI-react/issues/837)) ([e43148a](https://www.github.com/iTwin/iTwinUI-react/commit/e43148af9fc6250cf2470d258831a3ef8d33e582))
 * **Tile:** Add status and loading state ([#872](https://www.github.com/iTwin/iTwinUI-react/issues/872)) ([2fcb41f](https://www.github.com/iTwin/iTwinUI-react/commit/2fcb41f5c41a8a32d32a3312edecf8e2b646033e))
 
-If you're interested in more details about every signle change, check out a full diff in [`v1.48.1..v2.0.0`](https://www.github.com/iTwin/iTwinUI/compare/v1.48.1...v2.0.0).
+If you're interested in more details about every signle change, check out a full diff in [`v1.48.1..v2.0.0`](https://www.github.com/iTwin/iTwinUI-react/compare/v1.48.1...v2.0.0).
 
 ## 1.X
 

package/cjs/core/Avatar/Avatar.d.ts

@@ -11,7 +11,7 @@ export declare type StatusTitles = {
 };
 export declare type AvatarProps = {
     /**
-     * Size of a avatar.
+     * Size of an avatar.
      * @default 'small'
      */
     size?: 'small' | 'medium' | 'large' | 'x-large';

package/cjs/core/AvatarGroup/AvatarGroup.d.ts

@@ -44,7 +44,7 @@ export declare type UserIconGroupProps = AvatarGroupProps;
  * You can add custom Count Avatar behavior by using `countAvatarProps`.
  *
  * @example
- * <AvatarGroup avatarSize='medium'>
+ * <AvatarGroup iconSize='medium'>
  *  <Avatar
  *    abbreviation="TR"
  *    backgroundColor={getUserColor("Terry Rivers")}

package/cjs/core/AvatarGroup/AvatarGroup.js

@@ -21,7 +21,7 @@ require("@itwin/itwinui-css/css/avatar.css");
  * You can add custom Count Avatar behavior by using `countAvatarProps`.
  *
  * @example
- * <AvatarGroup avatarSize='medium'>
+ * <AvatarGroup iconSize='medium'>
  *  <Avatar
  *    abbreviation="TR"
  *    backgroundColor={getUserColor("Terry Rivers")}

package/cjs/core/Carousel/CarouselSlider.js

@@ -21,7 +21,7 @@ exports.CarouselSlider = react_1.default.forwardRef((props, ref) => {
     if (!context) {
         throw new Error('CarouselSlider must be used within Carousel');
     }
-    const { setSlideCount, idPrefix, scrollToSlide, isManuallyUpdating, } = context;
+    const { setSlideCount, idPrefix, scrollToSlide, isManuallyUpdating } = context;
     const items = react_1.default.useMemo(() => {
         var _a;
         return (_a = react_1.default.Children.map(children, (child, index) => react_1.default.isValidElement(child)
@@ -31,7 +31,7 @@ exports.CarouselSlider = react_1.default.forwardRef((props, ref) => {
             })
             : child)) !== null && _a !== void 0 ? _a : [];
     }, [children, idPrefix]);
-    react_1.default.useLayoutEffect(() => {
+    (0, utils_1.useIsomorphicLayoutEffect)(() => {
         setSlideCount(items.length);
     }, [items.length, setSlideCount]);
     const sliderRef = react_1.default.useRef(null);

package/cjs/core/ColorPicker/ColorBuilder.js

@@ -37,14 +37,9 @@ exports.ColorBuilder = react_1.default.forwardRef((props, ref) => {
     // Set values for slider
     const hueSliderColor = react_1.default.useMemo(() => utils_1.ColorValue.create({ h: hsvColor.h, s: 100, v: 100 }), [hsvColor.h]);
     const sliderValue = react_1.default.useMemo(() => hsvColor.h, [hsvColor]);
-    const alphaValue = react_1.default.useMemo(() => { var _a; return (showAlpha ? (_a = hsvColor.a) !== null && _a !== void 0 ? _a : 1 : 1); }, [
-        hsvColor.a,
-        showAlpha,
-    ]);
+    const alphaValue = react_1.default.useMemo(() => { var _a; return (showAlpha ? (_a = hsvColor.a) !== null && _a !== void 0 ? _a : 1 : 1); }, [hsvColor.a, showAlpha]);
     // Set values for color square and color dot
-    const dotColorString = react_1.default.useMemo(() => activeColor.toHexString(), [
-        activeColor,
-    ]);
+    const dotColorString = react_1.default.useMemo(() => activeColor.toHexString(), [activeColor]);
     const [colorDotActive, setColorDotActive] = react_1.default.useState(false);
     const hueColorString = hueSliderColor.toHexString();
     const squareTop = 100 - hsvColor.v;

package/cjs/core/ColorPicker/ColorPalette.js

@@ -29,7 +29,7 @@ require("@itwin/itwinui-css/css/color-picker.css");
 exports.ColorPalette = react_1.default.forwardRef((props, ref) => {
     const { colors, label, className, children, ...rest } = props;
     (0, utils_1.useTheme)();
-    const { activeColor, setActiveColor, onChangeComplete, } = (0, ColorPickerContext_1.useColorPickerContext)();
+    const { activeColor, setActiveColor, onChangeComplete } = (0, ColorPickerContext_1.useColorPickerContext)();
     const [focusedIndex, setFocusedIndex] = react_1.default.useState();
     // callback ref to set tabindex=0 on first child if none of the swatches are tabbable
     const setDefaultTabIndex = (el) => {

package/cjs/core/ColorPicker/ColorPicker.js

@@ -44,9 +44,7 @@ const ColorPicker = (props) => {
             tabbableElements[0].focus();
         }
     }, [setFocus]);
-    const inColor = react_1.default.useMemo(() => (0, exports.getColorValue)(selectedColor), [
-        selectedColor,
-    ]);
+    const inColor = react_1.default.useMemo(() => (0, exports.getColorValue)(selectedColor), [selectedColor]);
     const activeColorTbgr = react_1.default.useRef(inColor.toTbgr());
     const [activeColor, setActiveColor] = react_1.default.useState(inColor); // Color of colorDot or active ColorSwatch
     react_1.default.useEffect(() => {

package/cjs/core/ComboBox/ComboBox.js

@@ -79,7 +79,7 @@ const ComboBox = (props) => {
             : -1,
         focusedIndex: -1,
     });
-    react_1.default.useLayoutEffect(() => {
+    (0, utils_1.useIsomorphicLayoutEffect)(() => {
         var _a, _b;
         // When the dropdown opens
         if (isOpen) {

package/cjs/core/ComboBox/ComboBoxMenu.js

@@ -16,7 +16,7 @@ const utils_1 = require("../utils");
 const helpers_1 = require("./helpers");
 const VirtualizedComboBoxMenu = react_1.default.forwardRef(({ children, className, style, ...rest }, forwardedRef) => {
     var _a, _b, _c;
-    const { minWidth, id, filteredOptions, getMenuItem, focusedIndex, } = (0, utils_1.useSafeContext)(helpers_1.ComboBoxStateContext);
+    const { minWidth, id, filteredOptions, getMenuItem, focusedIndex } = (0, utils_1.useSafeContext)(helpers_1.ComboBoxStateContext);
     const { menuRef } = (0, utils_1.useSafeContext)(helpers_1.ComboBoxRefsContext);
     const virtualItemRenderer = react_1.default.useCallback((index) => filteredOptions.length > 0
         ? getMenuItem(filteredOptions[index], index)

package/cjs/core/Dialog/DialogMain.js

@@ -108,7 +108,7 @@ exports.DialogMain = react_1.default.forwardRef((props, ref) => {
         }
     }, [isDraggable, onPointerDown]);
     // Prevents dialog from moving when window is being resized
-    react_1.default.useLayoutEffect(() => {
+    (0, utils_1.useIsomorphicLayoutEffect)(() => {
         var _a;
         if (!isDraggable || !isOpen) {
             return;

package/cjs/core/Modal/ModalButtonBar.d.ts

@@ -9,5 +9,5 @@ export declare type ModalButtonBarProps = {
 /**
  * Container for Buttons in modal.
  */
-export declare const ModalButtonBar: React.ForwardRefExoticComponent<Pick<import("../Dialog/DialogButtonBar").DialogButtonBarProps, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & React.RefAttributes<HTMLDivElement>>;
+export declare const ModalButtonBar: (props: ModalButtonBarProps) => JSX.Element;
 export default ModalButtonBar;

package/cjs/core/Modal/ModalButtonBar.js

@@ -1,9 +1,18 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ModalButtonBar = void 0;
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+const react_1 = __importDefault(require("react"));
 const DialogButtonBar_1 = require("../Dialog/DialogButtonBar");
 /**
  * Container for Buttons in modal.
  */
-exports.ModalButtonBar = DialogButtonBar_1.DialogButtonBar;
+const ModalButtonBar = (props) => (react_1.default.createElement(DialogButtonBar_1.DialogButtonBar, { ...props }));
+exports.ModalButtonBar = ModalButtonBar;
 exports.default = exports.ModalButtonBar;

package/cjs/core/Modal/ModalContent.d.ts

@@ -9,5 +9,5 @@ export declare type ModalContentProps = {
 /**
  * Container for content in `Modal`.
  */
-export declare const ModalContent: React.ForwardRefExoticComponent<Pick<import("../Dialog/DialogContent").DialogContentProps, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & React.RefAttributes<HTMLDivElement>>;
+export declare const ModalContent: (props: ModalContentProps) => JSX.Element;
 export default ModalContent;

package/cjs/core/Modal/ModalContent.js

@@ -1,9 +1,18 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ModalContent = void 0;
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+const react_1 = __importDefault(require("react"));
 const DialogContent_1 = require("../Dialog/DialogContent");
 /**
  * Container for content in `Modal`.
  */
-exports.ModalContent = DialogContent_1.DialogContent;
+const ModalContent = (props) => (react_1.default.createElement(DialogContent_1.DialogContent, { ...props }));
+exports.ModalContent = ModalContent;
 exports.default = exports.ModalContent;

package/cjs/core/Table/Table.js

@@ -291,7 +291,7 @@ const Table = (props) => {
     }, [dispatch, state.columnResizing.columnWidths, flatHeaders, instance]);
     const [resizeRef] = (0, utils_1.useResizeObserver)(onTableResize);
     // Flexbox handles columns resize so we take new column widths before browser repaints.
-    react_1.default.useLayoutEffect(() => {
+    (0, utils_1.useIsomorphicLayoutEffect)(() => {
         if (state.isTableResizing) {
             const newColumnWidths = {};
             flatHeaders.forEach((column) => {

package/cjs/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/cjs/core/Table/TablePaginator.js

@@ -24,6 +24,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.
@@ -126,7 +127,7 @@ const TablePaginator = (props) => {
         return null;
     }
     return (react_1.default.createElement("div", { className: (0, classnames_1.default)('iui-table-paginator', className), ref: paginatorResizeRef, ...rest },
-        react_1.default.createElement("div", { className: 'iui-left' }, totalSelectedRowsCount > 0 && (react_1.default.createElement("span", null, `${totalSelectedRowsCount} ${totalSelectedRowsCount === 1 ? 'row' : 'rows'} selected`))),
+        react_1.default.createElement("div", { className: 'iui-left' }, totalSelectedRowsCount > 0 && (react_1.default.createElement("span", null, localization.rowsSelectedLabel(totalSelectedRowsCount)))),
         showPagesList && (react_1.default.createElement("div", { className: 'iui-center', ref: overflowRef },
             react_1.default.createElement(Buttons_1.IconButton, { styleType: 'borderless', disabled: currentPage === 0, onClick: () => onPageChange(currentPage - 1), size: buttonSize, "aria-label": localization.previousPage },
                 react_1.default.createElement(utils_1.SvgChevronLeft, null)),

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

@@ -43,7 +43,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/cjs/core/Tabs/Tabs.js

@@ -49,14 +49,14 @@ const Tabs = (props) => {
     const [currentActiveIndex, setCurrentActiveIndex] = react_1.default.useState(() => activeIndex != null
         ? (0, utils_1.getBoundedValue)(activeIndex, 0, labels.length - 1)
         : 0);
-    react_1.default.useLayoutEffect(() => {
+    (0, utils_1.useIsomorphicLayoutEffect)(() => {
         if (activeIndex != null && currentActiveIndex !== activeIndex) {
             setCurrentActiveIndex((0, utils_1.getBoundedValue)(activeIndex, 0, labels.length - 1));
         }
     }, [activeIndex, currentActiveIndex, labels.length]);
     // CSS custom properties to place the active stripe
     const [stripeProperties, setStripeProperties] = react_1.default.useState({});
-    react_1.default.useLayoutEffect(() => {
+    (0, utils_1.useIsomorphicLayoutEffect)(() => {
         if (type !== 'default' && tablistRef.current != undefined) {
             const activeTab = tablistRef.current.children[currentActiveIndex];
             const activeTabRect = activeTab.getBoundingClientRect();
@@ -80,7 +80,7 @@ const Tabs = (props) => {
         }
     }, [focusedIndex]);
     const [hasSublabel, setHasSublabel] = react_1.default.useState(false); // used for setting size
-    react_1.default.useLayoutEffect(() => {
+    (0, utils_1.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/cjs/core/utils/color/ColorValue.js

@@ -219,7 +219,8 @@ 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 [
@@ -232,7 +233,8 @@ 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/cjs/core/utils/components/Resizer.js

@@ -32,7 +32,7 @@ const Resizer = (props) => {
         const initialPointerX = event.clientX;
         const initialPointerY = event.clientY;
         const [initialTranslateX, initialTranslateY] = (0, functions_1.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;
@@ -132,7 +132,8 @@ 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/cjs/core/utils/components/VirtualScroll.js

@@ -10,7 +10,6 @@ exports.useVirtualization = exports.VirtualScroll = void 0;
  *--------------------------------------------------------------------------------------------*/
 const react_1 = __importDefault(require("react"));
 const hooks_1 = require("../hooks");
-const useResizeObserver_1 = require("../hooks/useResizeObserver");
 const getScrollableParent = (element, ownerDocument = document) => {
     if (!element || element === ownerDocument.body) {
         return ownerDocument.body;
@@ -149,21 +148,21 @@ const useVirtualization = (props) => {
         setScrollContainerHeight(height);
         updateChildHeight();
     }, [updateChildHeight]);
-    const [resizeRef, resizeObserver] = (0, useResizeObserver_1.useResizeObserver)(onResize);
+    const [resizeRef, resizeObserver] = (0, hooks_1.useResizeObserver)(onResize);
     // Find scrollable parent
     // Needed only on init
-    react_1.default.useLayoutEffect(() => {
+    (0, hooks_1.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_1.default.useLayoutEffect(() => {
+    (0, hooks_1.useIsomorphicLayoutEffect)(() => {
         return () => resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect();
     }, [resizeObserver]);
     // Get child height when children available
-    react_1.default.useLayoutEffect(() => updateChildHeight(), [updateChildHeight]);
+    (0, hooks_1.useIsomorphicLayoutEffect)(() => updateChildHeight(), [updateChildHeight]);
     const updateVirtualScroll = react_1.default.useCallback(() => {
         const scrollableContainer = getScrollableContainer();
         if (!scrollableContainer) {
@@ -197,7 +196,7 @@ const useVirtualization = (props) => {
             : scrollContainer.current.removeEventListener('scroll', onScrollRef.current);
     }, []);
     // Add event listener to the scrollable container.
-    react_1.default.useLayoutEffect(() => {
+    (0, hooks_1.useIsomorphicLayoutEffect)(() => {
         var _a, _b;
         removeScrollListener();
         onScrollRef.current = onScroll;
@@ -210,7 +209,7 @@ const useVirtualization = (props) => {
         }
         return removeScrollListener;
     }, [onScroll, removeScrollListener]);
-    react_1.default.useLayoutEffect(() => {
+    (0, hooks_1.useIsomorphicLayoutEffect)(() => {
         if (!isMounted) {
             return;
         }
@@ -262,7 +261,7 @@ const useVirtualization = (props) => {
             }
         }
     }, [scrollToIndex, isMounted]);
-    react_1.default.useLayoutEffect(() => {
+    (0, hooks_1.useIsomorphicLayoutEffect)(() => {
         if (!scrollContainerHeight) {
             return;
         }

package/cjs/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/cjs/core/utils/functions/styles.js

@@ -8,7 +8,7 @@ exports.getTranslateValues = void 0;
 /**
  * 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]`
  */
 const getTranslateValues = (element) => {
     if (!element) {

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

@@ -41,7 +41,7 @@ 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] = (0, functions_1.getTranslateValues)(elementRef.current);
         containerRectRef.current = getContainerRect(containerRef);
         if (bottom > containerRectRef.current.bottom) {

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

@@ -11,6 +11,7 @@ exports.useOverflow = void 0;
 const react_1 = __importDefault(require("react"));
 const useMergedRefs_1 = require("./useMergedRefs");
 const useResizeObserver_1 = require("./useResizeObserver");
+const useIsomorphicLayoutEffect_1 = require("./useIsomorphicLayoutEffect");
 const STARTING_MAX_ITEMS_COUNT = 20;
 /**
  * Hook that observes the size of an element and returns the number of items
@@ -43,7 +44,7 @@ const useOverflow = (items, disabled = false, orientation = 'horizontal') => {
     const updateContainerSize = react_1.default.useCallback(({ width, height }) => setContainerSize(orientation === 'horizontal' ? width : height), [orientation]);
     const [resizeRef, observer] = (0, useResizeObserver_1.useResizeObserver)(updateContainerSize);
     const resizeObserverRef = react_1.default.useRef(observer);
-    react_1.default.useLayoutEffect(() => {
+    (0, useIsomorphicLayoutEffect_1.useIsomorphicLayoutEffect)(() => {
         if (disabled) {
             setVisibleCount(items.length);
         }
@@ -53,7 +54,7 @@ const useOverflow = (items, disabled = false, orientation = 'horizontal') => {
         }
     }, [containerSize, disabled, items]);
     const mergedRefs = (0, useMergedRefs_1.useMergedRefs)(containerRef, resizeRef);
-    react_1.default.useLayoutEffect(() => {
+    (0, useIsomorphicLayoutEffect_1.useIsomorphicLayoutEffect)(() => {
         var _a;
         if (!containerRef.current || disabled) {
             (_a = resizeObserverRef.current) === null || _a === void 0 ? void 0 : _a.disconnect();
@@ -81,7 +82,7 @@ const useOverflow = (items, disabled = false, orientation = 'horizontal') => {
         }
         needsFullRerender.current = false;
     }, [containerSize, visibleCount, disabled, items.length, orientation]);
-    react_1.default.useLayoutEffect(() => {
+    (0, useIsomorphicLayoutEffect_1.useIsomorphicLayoutEffect)(() => {
         previousContainerSize.current = containerSize;
     }, [containerSize]);
     return [mergedRefs, visibleCount];

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

@@ -28,8 +28,8 @@ const useTheme = (theme, themeOptions) => {
     const themeContext = react_1.default.useContext(ThemeProvider_1.ThemeContext);
     const ownerDocument = (_a = themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.ownerDocument) !== null && _a !== void 0 ? _a : (0, functions_1.getDocument)();
     (0, useIsomorphicLayoutEffect_1.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/esm/core/Avatar/Avatar.d.ts

@@ -11,7 +11,7 @@ export declare type StatusTitles = {
 };
 export declare type AvatarProps = {
     /**
-     * Size of a avatar.
+     * Size of an avatar.
      * @default 'small'
      */
     size?: 'small' | 'medium' | 'large' | 'x-large';

package/esm/core/AvatarGroup/AvatarGroup.d.ts

@@ -44,7 +44,7 @@ export declare type UserIconGroupProps = AvatarGroupProps;
  * You can add custom Count Avatar behavior by using `countAvatarProps`.
  *
  * @example
- * <AvatarGroup avatarSize='medium'>
+ * <AvatarGroup iconSize='medium'>
  *  <Avatar
  *    abbreviation="TR"
  *    backgroundColor={getUserColor("Terry Rivers")}

package/esm/core/AvatarGroup/AvatarGroup.js

@@ -15,7 +15,7 @@ import '@itwin/itwinui-css/css/avatar.css';
  * You can add custom Count Avatar behavior by using `countAvatarProps`.
  *
  * @example
- * <AvatarGroup avatarSize='medium'>
+ * <AvatarGroup iconSize='medium'>
  *  <Avatar
  *    abbreviation="TR"
  *    backgroundColor={getUserColor("Terry Rivers")}

package/esm/core/Carousel/CarouselSlider.js

@@ -5,7 +5,7 @@
 import React from 'react';
 import cx from 'classnames';
 import { CarouselContext } from './CarouselContext';
-import { getWindow, useMergedRefs } from '../utils';
+import { getWindow, useMergedRefs, useIsomorphicLayoutEffect } from '../utils';
 /**
  * `CarouselSlider` is the scrollable list that should consist of `CarouselSlide` components.
  */
@@ -15,7 +15,7 @@ export const CarouselSlider = React.forwardRef((props, ref) => {
     if (!context) {
         throw new Error('CarouselSlider must be used within Carousel');
     }
-    const { setSlideCount, idPrefix, scrollToSlide, isManuallyUpdating, } = context;
+    const { setSlideCount, idPrefix, scrollToSlide, isManuallyUpdating } = context;
     const items = React.useMemo(() => {
         var _a;
         return (_a = React.Children.map(children, (child, index) => React.isValidElement(child)
@@ -25,7 +25,7 @@ export const CarouselSlider = React.forwardRef((props, ref) => {
             })
             : child)) !== null && _a !== void 0 ? _a : [];
     }, [children, idPrefix]);
-    React.useLayoutEffect(() => {
+    useIsomorphicLayoutEffect(() => {
         setSlideCount(items.length);
     }, [items.length, setSlideCount]);
     const sliderRef = React.useRef(null);

package/esm/core/ColorPicker/ColorBuilder.js

@@ -31,14 +31,9 @@ export const ColorBuilder = React.forwardRef((props, ref) => {
     // Set values for slider
     const hueSliderColor = React.useMemo(() => ColorValue.create({ h: hsvColor.h, s: 100, v: 100 }), [hsvColor.h]);
     const sliderValue = React.useMemo(() => hsvColor.h, [hsvColor]);
-    const alphaValue = React.useMemo(() => { var _a; return (showAlpha ? (_a = hsvColor.a) !== null && _a !== void 0 ? _a : 1 : 1); }, [
-        hsvColor.a,
-        showAlpha,
-    ]);
+    const alphaValue = React.useMemo(() => { var _a; return (showAlpha ? (_a = hsvColor.a) !== null && _a !== void 0 ? _a : 1 : 1); }, [hsvColor.a, showAlpha]);
     // Set values for color square and color dot
-    const dotColorString = React.useMemo(() => activeColor.toHexString(), [
-        activeColor,
-    ]);
+    const dotColorString = React.useMemo(() => activeColor.toHexString(), [activeColor]);
     const [colorDotActive, setColorDotActive] = React.useState(false);
     const hueColorString = hueSliderColor.toHexString();
     const squareTop = 100 - hsvColor.v;

package/esm/core/ColorPicker/ColorPalette.js

@@ -23,7 +23,7 @@ import '@itwin/itwinui-css/css/color-picker.css';
 export const ColorPalette = React.forwardRef((props, ref) => {
     const { colors, label, className, children, ...rest } = props;
     useTheme();
-    const { activeColor, setActiveColor, onChangeComplete, } = useColorPickerContext();
+    const { activeColor, setActiveColor, onChangeComplete } = useColorPickerContext();
     const [focusedIndex, setFocusedIndex] = React.useState();
     // callback ref to set tabindex=0 on first child if none of the swatches are tabbable
     const setDefaultTabIndex = (el) => {

package/esm/core/ColorPicker/ColorPicker.js

@@ -37,9 +37,7 @@ export const ColorPicker = (props) => {
             tabbableElements[0].focus();
         }
     }, [setFocus]);
-    const inColor = React.useMemo(() => getColorValue(selectedColor), [
-        selectedColor,
-    ]);
+    const inColor = React.useMemo(() => getColorValue(selectedColor), [selectedColor]);
     const activeColorTbgr = React.useRef(inColor.toTbgr());
     const [activeColor, setActiveColor] = React.useState(inColor); // Color of colorDot or active ColorSwatch
     React.useEffect(() => {

package/esm/core/ComboBox/ComboBox.js

@@ -6,7 +6,7 @@ import React from 'react';
 import cx from 'classnames';
 import { MenuExtraContent } from '../Menu';
 import { Text } from '../Typography';
-import { useTheme, getRandomValue, mergeRefs, useLatestRef, } from '../utils';
+import { useTheme, getRandomValue, mergeRefs, useLatestRef, useIsomorphicLayoutEffect, } from '../utils';
 import 'tippy.js/animations/shift-away.css';
 import { ComboBoxActionContext, comboBoxReducer, ComboBoxRefsContext, ComboBoxStateContext, } from './helpers';
 import { ComboBoxDropdown } from './ComboBoxDropdown';
@@ -73,7 +73,7 @@ export const ComboBox = (props) => {
             : -1,
         focusedIndex: -1,
     });
-    React.useLayoutEffect(() => {
+    useIsomorphicLayoutEffect(() => {
         var _a, _b;
         // When the dropdown opens
         if (isOpen) {

package/esm/core/ComboBox/ComboBoxMenu.js

@@ -10,7 +10,7 @@ import { useSafeContext, useMergedRefs, useVirtualization, mergeRefs, getWindow,
 import { ComboBoxStateContext, ComboBoxRefsContext } from './helpers';
 const VirtualizedComboBoxMenu = React.forwardRef(({ children, className, style, ...rest }, forwardedRef) => {
     var _a, _b, _c;
-    const { minWidth, id, filteredOptions, getMenuItem, focusedIndex, } = useSafeContext(ComboBoxStateContext);
+    const { minWidth, id, filteredOptions, getMenuItem, focusedIndex } = useSafeContext(ComboBoxStateContext);
     const { menuRef } = useSafeContext(ComboBoxRefsContext);
     const virtualItemRenderer = React.useCallback((index) => filteredOptions.length > 0
         ? getMenuItem(filteredOptions[index], index)

package/esm/core/Dialog/DialogMain.js

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import React from 'react';
 import cx from 'classnames';
-import { FocusTrap, getTranslateValues, useLatestRef, Resizer, useMergedRefs, useTheme, } from '../utils';
+import { FocusTrap, getTranslateValues, useLatestRef, Resizer, useMergedRefs, useTheme, useIsomorphicLayoutEffect, } from '../utils';
 import '@itwin/itwinui-css/css/dialog.css';
 import { useDialogContext } from './DialogContext';
 import { CSSTransition } from 'react-transition-group';
@@ -102,7 +102,7 @@ export const DialogMain = React.forwardRef((props, ref) => {
         }
     }, [isDraggable, onPointerDown]);
     // Prevents dialog from moving when window is being resized
-    React.useLayoutEffect(() => {
+    useIsomorphicLayoutEffect(() => {
         var _a;
         if (!isDraggable || !isOpen) {
             return;

package/esm/core/Modal/ModalButtonBar.d.ts

@@ -9,5 +9,5 @@ export declare type ModalButtonBarProps = {
 /**
  * Container for Buttons in modal.
  */
-export declare const ModalButtonBar: React.ForwardRefExoticComponent<Pick<import("../Dialog/DialogButtonBar").DialogButtonBarProps, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & React.RefAttributes<HTMLDivElement>>;
+export declare const ModalButtonBar: (props: ModalButtonBarProps) => JSX.Element;
 export default ModalButtonBar;

package/esm/core/Modal/ModalButtonBar.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 { DialogButtonBar } from '../Dialog/DialogButtonBar';
 /**
  * Container for Buttons in modal.
  */
-export const ModalButtonBar = DialogButtonBar;
+export const ModalButtonBar = (props) => (React.createElement(DialogButtonBar, { ...props }));
 export default ModalButtonBar;

package/esm/core/Modal/ModalContent.d.ts

@@ -9,5 +9,5 @@ export declare type ModalContentProps = {
 /**
  * Container for content in `Modal`.
  */
-export declare const ModalContent: React.ForwardRefExoticComponent<Pick<import("../Dialog/DialogContent").DialogContentProps, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & React.RefAttributes<HTMLDivElement>>;
+export declare const ModalContent: (props: ModalContentProps) => JSX.Element;
 export default ModalContent;

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",
+  "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",