@itwin/itwinui-react 2.0.0 → 2.0.2

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