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

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;