@itwin/itwinui-react 2.0.0 → 2.0.2

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+### [2.0.2](https://www.github.com/iTwin/iTwinUI-react/compare/v2.0.1...v2.0.2) (2022-12-07)
+
+### Fixes
+
+* **ThemeProvider:** Improved types to exclude `ownerDocument` from `themeOptions` if children passed ([#973](https://www.github.com/iTwin/iTwinUI-react/issues/973)) ([36997de](https://www.github.com/iTwin/iTwinUI-react/commit/36997de383c4783c192318f2fb617289a7dce2dd))
+
+### [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 +26,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 +46,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 +64,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/ColorPicker/ColorSwatch.d.ts

@@ -17,5 +17,5 @@ export declare type ColorSwatchProps = {
  * <ColorSwatch color='#23450b' onClick={onClick}/>
  * <ColorSwatch color={{ r: 255, g: 255, b: 0 }} onClick={onClick}/>
  */
-export declare const ColorSwatch: React.ForwardRefExoticComponent<Pick<ColorSwatchProps, "dir" | "slot" | "style" | "title" | "id" | "aria-disabled" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "isActive"> & React.RefAttributes<HTMLDivElement>>;
+export declare const ColorSwatch: React.ForwardRefExoticComponent<Pick<ColorSwatchProps, "dir" | "slot" | "style" | "title" | "id" | "aria-disabled" | "children" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "isActive"> & React.RefAttributes<HTMLDivElement>>;
 export default ColorSwatch;

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/ComboBoxDropdown.d.ts

@@ -3,5 +3,5 @@ import { PopoverProps } from '../utils';
 declare type ComboBoxDropdownProps = PopoverProps & {
     children: JSX.Element;
 };
-export declare const ComboBoxDropdown: React.ForwardRefExoticComponent<Pick<ComboBoxDropdownProps, "disabled" | "theme" | "className" | "role" | "children" | "placement" | "trigger" | "visible" | "content" | "render" | "animateFill" | "appendTo" | "aria" | "delay" | "duration" | "followCursor" | "getReferenceClientRect" | "hideOnClick" | "ignoreAttributes" | "inlinePositioning" | "interactive" | "interactiveBorder" | "interactiveDebounce" | "moveTransition" | "offset" | "plugins" | "popperOptions" | "showOnCreate" | "sticky" | "touch" | "triggerTarget" | "onAfterUpdate" | "onBeforeUpdate" | "onCreate" | "onDestroy" | "onHidden" | "onHide" | "onMount" | "onShow" | "onShown" | "onTrigger" | "onUntrigger" | "onClickOutside" | "allowHTML" | "animation" | "arrow" | "inertia" | "maxWidth" | "zIndex" | "singleton" | "reference"> & React.RefAttributes<Element>>;
+export declare const ComboBoxDropdown: React.ForwardRefExoticComponent<Pick<ComboBoxDropdownProps, "disabled" | "theme" | "children" | "className" | "role" | "placement" | "trigger" | "visible" | "content" | "render" | "animateFill" | "appendTo" | "aria" | "delay" | "duration" | "followCursor" | "getReferenceClientRect" | "hideOnClick" | "ignoreAttributes" | "inlinePositioning" | "interactive" | "interactiveBorder" | "interactiveDebounce" | "moveTransition" | "offset" | "plugins" | "popperOptions" | "showOnCreate" | "sticky" | "touch" | "triggerTarget" | "onAfterUpdate" | "onBeforeUpdate" | "onCreate" | "onDestroy" | "onHidden" | "onHide" | "onMount" | "onShow" | "onShown" | "onTrigger" | "onUntrigger" | "onClickOutside" | "allowHTML" | "animation" | "arrow" | "inertia" | "maxWidth" | "zIndex" | "singleton" | "reference"> & React.RefAttributes<Element>>;
 export {};

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/LabeledInput/LabeledInput.d.ts

@@ -84,7 +84,7 @@ export declare const LabeledInput: React.ForwardRefExoticComponent<{
      * - 'inline' - appears in the same line as input.
      * @default 'default'
      */
-    displayStyle?: "default" | "inline" | undefined;
+    displayStyle?: "inline" | "default" | undefined;
     /**
      * Set display style of icon.
      * Supported values:

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/ThemeProvider/ThemeProvider.d.ts

@@ -1,8 +1,26 @@
 import React from 'react';
-import type { PolymorphicComponentProps, PolymorphicForwardRefComponent, ThemeOptions, ThemeType, UseThemeProps } from '../utils';
+import type { PolymorphicComponentProps, PolymorphicForwardRefComponent, ThemeOptions, ThemeType } from '../utils';
 import '@itwin/itwinui-css/css/global.css';
 import '@itwin/itwinui-variables/index.css';
-export declare type ThemeProviderProps<T extends React.ElementType = 'div'> = PolymorphicComponentProps<T, UseThemeProps>;
+export declare type ThemeProviderProps<T extends React.ElementType = 'div'> = PolymorphicComponentProps<T, ThemeProviderOwnProps>;
+declare type ThemeProviderOwnProps = {
+    /**
+     * Theme to be applied. Can be 'light' or 'dark' or 'os'.
+     *
+     * Note that 'os' will respect the system preference on client but will fallback to 'light'
+     * in SSR environments because it is not possible detect system preference on the server.
+     * This can cause a flash of incorrect theme on first render.
+     *
+     * @default 'light'
+     */
+    theme?: ThemeType;
+} & ({
+    themeOptions?: Pick<ThemeOptions, 'highContrast'>;
+    children: Required<React.ReactNode>;
+} | {
+    themeOptions?: ThemeOptions;
+    children?: undefined;
+});
 /**
  * This component provides global styles and applies theme to the entire tree
  * that it is wrapping around. The `theme` prop is optional and defaults to the
@@ -23,7 +41,7 @@ export declare type ThemeProviderProps<T extends React.ElementType = 'div'> = Po
  *   <App />
  * </ThemeProvider>
  */
-export declare const ThemeProvider: PolymorphicForwardRefComponent<"div", UseThemeProps>;
+export declare const ThemeProvider: PolymorphicForwardRefComponent<"div", ThemeProviderOwnProps>;
 export default ThemeProvider;
 export declare const ThemeContext: React.Context<{
     theme?: ThemeType | undefined;

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/Popover.d.ts

@@ -26,7 +26,7 @@ export declare type PopoverProps = {
  * with pre-configured props and plugins (e.g. lazy mounting, focus, etc).
  * @private
  */
-export declare const Popover: React.ForwardRefExoticComponent<Pick<PopoverProps, "disabled" | "theme" | "className" | "role" | "children" | "placement" | "trigger" | "visible" | "content" | "render" | "animateFill" | "appendTo" | "aria" | "delay" | "duration" | "followCursor" | "getReferenceClientRect" | "hideOnClick" | "ignoreAttributes" | "inlinePositioning" | "interactive" | "interactiveBorder" | "interactiveDebounce" | "moveTransition" | "offset" | "plugins" | "popperOptions" | "showOnCreate" | "sticky" | "touch" | "triggerTarget" | "onAfterUpdate" | "onBeforeUpdate" | "onCreate" | "onDestroy" | "onHidden" | "onHide" | "onMount" | "onShow" | "onShown" | "onTrigger" | "onUntrigger" | "onClickOutside" | "allowHTML" | "animation" | "arrow" | "inertia" | "maxWidth" | "zIndex" | "singleton" | "reference"> & React.RefAttributes<unknown>>;
+export declare const Popover: React.ForwardRefExoticComponent<Pick<PopoverProps, "disabled" | "theme" | "children" | "className" | "role" | "placement" | "trigger" | "visible" | "content" | "render" | "animateFill" | "appendTo" | "aria" | "delay" | "duration" | "followCursor" | "getReferenceClientRect" | "hideOnClick" | "ignoreAttributes" | "inlinePositioning" | "interactive" | "interactiveBorder" | "interactiveDebounce" | "moveTransition" | "offset" | "plugins" | "popperOptions" | "showOnCreate" | "sticky" | "touch" | "triggerTarget" | "onAfterUpdate" | "onBeforeUpdate" | "onCreate" | "onDestroy" | "onHidden" | "onHide" | "onMount" | "onShow" | "onShown" | "onTrigger" | "onUntrigger" | "onClickOutside" | "allowHTML" | "animation" | "arrow" | "inertia" | "maxWidth" | "zIndex" | "singleton" | "reference"> & React.RefAttributes<unknown>>;
 /**
  * Plugin to hide Popover when either Esc key is pressed,
  * or when the content inside is not tabbable and Tab key is pressed.

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);