@itwin/itwinui-react 3.7.4 → 3.8.0

package/cjs/core/utils/providers/index.js

@@ -0,0 +1,21 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+__exportStar(require("./HydrationProvider.js"), exports);

package/esm/core/Carousel/Carousel.d.ts

@@ -48,7 +48,7 @@ export declare const Carousel: PolymorphicForwardRefComponent<"section", Carouse
             labelProps?: Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
                 ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
             }, "as" | "children" | "content" | "portal" | keyof {
-                placement?: import("@floating-ui/core").Placement | undefined;
+                placement?: import("@floating-ui/utils").Placement | undefined;
                 visible?: boolean | undefined;
                 onVisibleChange?: ((visible: boolean) => void) | undefined;
                 autoUpdateOptions?: {
@@ -74,7 +74,7 @@ export declare const Carousel: PolymorphicForwardRefComponent<"section", Carouse
                 content: React.ReactNode;
                 children?: React.ReactNode;
             } & import("../utils/index.js").PortalProps & {
-                placement?: import("@floating-ui/core").Placement | undefined;
+                placement?: import("@floating-ui/utils").Placement | undefined;
                 visible?: boolean | undefined;
                 onVisibleChange?: ((visible: boolean) => void) | undefined;
                 autoUpdateOptions?: {
@@ -111,7 +111,7 @@ export declare const Carousel: PolymorphicForwardRefComponent<"section", Carouse
             labelProps?: Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
                 ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
             }, "as" | "children" | "content" | "portal" | keyof {
-                placement?: import("@floating-ui/core").Placement | undefined;
+                placement?: import("@floating-ui/utils").Placement | undefined;
                 visible?: boolean | undefined;
                 onVisibleChange?: ((visible: boolean) => void) | undefined;
                 autoUpdateOptions?: {
@@ -137,7 +137,7 @@ export declare const Carousel: PolymorphicForwardRefComponent<"section", Carouse
                 content: React.ReactNode;
                 children?: React.ReactNode;
             } & import("../utils/index.js").PortalProps & {
-                placement?: import("@floating-ui/core").Placement | undefined;
+                placement?: import("@floating-ui/utils").Placement | undefined;
                 visible?: boolean | undefined;
                 onVisibleChange?: ((visible: boolean) => void) | undefined;
                 autoUpdateOptions?: {

package/esm/core/Carousel/CarouselNavigation.d.ts

@@ -15,7 +15,7 @@ export declare const CarouselNavigation: PolymorphicForwardRefComponent<"div", {
         labelProps?: Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
             ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
         }, "as" | "children" | "content" | "portal" | keyof {
-            placement?: import("@floating-ui/core").Placement | undefined;
+            placement?: import("@floating-ui/utils").Placement | undefined;
             visible?: boolean | undefined;
             onVisibleChange?: ((visible: boolean) => void) | undefined;
             autoUpdateOptions?: {
@@ -41,7 +41,7 @@ export declare const CarouselNavigation: PolymorphicForwardRefComponent<"div", {
             content: React.ReactNode;
             children?: React.ReactNode;
         } & import("../utils/index.js").PortalProps & {
-            placement?: import("@floating-ui/core").Placement | undefined;
+            placement?: import("@floating-ui/utils").Placement | undefined;
             visible?: boolean | undefined;
             onVisibleChange?: ((visible: boolean) => void) | undefined;
             autoUpdateOptions?: {
@@ -78,7 +78,7 @@ export declare const CarouselNavigation: PolymorphicForwardRefComponent<"div", {
         labelProps?: Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
             ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
         }, "as" | "children" | "content" | "portal" | keyof {
-            placement?: import("@floating-ui/core").Placement | undefined;
+            placement?: import("@floating-ui/utils").Placement | undefined;
             visible?: boolean | undefined;
             onVisibleChange?: ((visible: boolean) => void) | undefined;
             autoUpdateOptions?: {
@@ -104,7 +104,7 @@ export declare const CarouselNavigation: PolymorphicForwardRefComponent<"div", {
             content: React.ReactNode;
             children?: React.ReactNode;
         } & import("../utils/index.js").PortalProps & {
-            placement?: import("@floating-ui/core").Placement | undefined;
+            placement?: import("@floating-ui/utils").Placement | undefined;
             visible?: boolean | undefined;
             onVisibleChange?: ((visible: boolean) => void) | undefined;
             autoUpdateOptions?: {

package/esm/core/LabeledSelect/LabeledSelect.d.ts

@@ -297,7 +297,7 @@ export declare const LabeledSelect: <T>(props: ({
     menuClassName?: string | undefined;
     menuStyle?: React.CSSProperties | undefined;
     popoverProps?: Pick<{
-        placement?: import("@floating-ui/core").Placement | undefined;
+        placement?: import("@floating-ui/utils").Placement | undefined;
         visible?: boolean | undefined;
         onVisibleChange?: ((visible: boolean) => void) | undefined;
         closeOnOutsideClick?: boolean | undefined;
@@ -427,7 +427,7 @@ export declare const LabeledSelect: <T>(props: ({
     menuClassName?: string | undefined;
     menuStyle?: React.CSSProperties | undefined;
     popoverProps?: Pick<{
-        placement?: import("@floating-ui/core").Placement | undefined;
+        placement?: import("@floating-ui/utils").Placement | undefined;
         visible?: boolean | undefined;
         onVisibleChange?: ((visible: boolean) => void) | undefined;
         closeOnOutsideClick?: boolean | undefined;

package/esm/core/Popover/Popover.d.ts

@@ -71,7 +71,7 @@ type PopoverInternalProps = {
 };
 export declare const usePopover: (options: PopoverOptions & PopoverInternalProps) => {
     placement: Placement;
-    strategy: import("@floating-ui/react").Strategy;
+    strategy: import("@floating-ui/utils").Strategy;
     middlewareData: import("@floating-ui/core").MiddlewareData;
     x: number;
     y: number;
@@ -92,7 +92,7 @@ export declare const usePopover: (options: PopoverOptions & PopoverInternalProps
         x: number;
         y: number;
         placement: Placement;
-        strategy: import("@floating-ui/react").Strategy;
+        strategy: import("@floating-ui/utils").Strategy;
         middlewareData: import("@floating-ui/core").MiddlewareData;
         isPositioned: boolean;
         update: () => void;

package/esm/core/Table/Table.js

@@ -7,7 +7,7 @@ import cx from 'classnames';
 import { actions as TableActions, useFlexLayout, useFilters, useRowSelect, useSortBy, useTable, useExpanded, usePagination, useColumnOrder, useGlobalFilter, } from 'react-table';
 import { ProgressRadial } from '../ProgressIndicators/ProgressRadial.js';
 import { useGlobals, useResizeObserver, SvgSortDown, SvgSortUp, useLayoutEffect, Box, createWarningLogger, ShadowRoot, LineClamp, useMergedRefs, } from '../utils/index.js';
-import { getCellStyle, getStickyStyle, getSubRowStyle } from './utils.js';
+import { TableColumnsContext, getCellStyle, getStickyStyle, getSubRowStyle, } from './utils.js';
 import { TableRowMemoized } from './TableRowMemoized.js';
 import { FilterToggle } from './filters/index.js';
 import { customFilterFunctions } from './filters/customFilterFunctions.js';
@@ -384,7 +384,7 @@ export const Table = (props) => {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     const isHeaderDirectClick = React.useRef(false);
-    return (React.createElement(React.Fragment, null,
+    return (React.createElement(TableColumnsContext.Provider, { value: columns },
         React.createElement(Box, { ref: useMergedRefs(tableRef, (element) => {
                 ownerDocument.current = element?.ownerDocument;
                 resizeRef(element);

package/esm/core/Table/cells/DefaultCell.d.ts

@@ -16,7 +16,8 @@ export type DefaultCellProps<T extends Record<string, unknown>> = {
     /**
      * Should the contents of the cell be clamped after a certain number of lines?
      *
-     * Will be enabled by default if the cell content is a string.
+     * Will be enabled by default if the cell content is a string and a custom `Cell`
+     * is not specified in the column object.
      */
     clamp?: boolean;
 } & CellRendererProps<T> & React.ComponentPropsWithoutRef<'div'>;

package/esm/core/Table/cells/DefaultCell.js

@@ -5,6 +5,7 @@
 import * as React from 'react';
 import cx from 'classnames';
 import { Box, LineClamp, ShadowRoot } from '../../utils/index.js';
+import { TableColumnsContext } from '../utils.js';
 /**
  * Default cell.
  * It should be passed to `cellRenderer`.
@@ -17,7 +18,11 @@ import { Box, LineClamp, ShadowRoot } from '../../utils/index.js';
  * }
  */
 export const DefaultCell = (props) => {
-    const { cellElementProps: { className: cellElementClassName, style: cellElementStyle, ...cellElementProps }, children, startIcon, endIcon, cellProps, isDisabled, className, style, status, clamp = typeof cellProps.value === 'string', ...rest } = props;
+    const columnsProp = React.useContext(TableColumnsContext);
+    const isCustomCell = React.useMemo(() => columnsProp
+        .find(({ id }) => props.cellProps.column.id === id)
+        ?.hasOwnProperty('Cell'), [props.cellProps.column.id, columnsProp]);
+    const { cellElementProps: { className: cellElementClassName, style: cellElementStyle, ...cellElementProps }, children, startIcon, endIcon, cellProps, isDisabled, className, style, status, clamp = typeof cellProps.value === 'string' && !isCustomCell, ...rest } = props;
     return (React.createElement(Box, { ...cellElementProps, ...rest, className: cx(cellElementClassName, className), "aria-disabled": isDisabled?.(cellProps.row.original) || undefined, "data-iui-status": status, style: { ...cellElementStyle, ...style } },
         React.createElement(ShadowRoot, null,
             React.createElement("slot", { name: 'start' }),

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

@@ -1,4 +1,5 @@
-import type { ColumnInstance } from '../../react-table/react-table.js';
+import * as React from 'react';
+import type { ColumnInstance, Column } from '../../react-table/react-table.js';
 export declare const getCellStyle: <T extends Record<string, unknown>>(column: ColumnInstance<T>, isTableResizing: boolean) => React.CSSProperties | undefined;
 export declare const getStickyStyle: <T extends Record<string, unknown>>(column: ColumnInstance<T>, columnList: ColumnInstance<T>[]) => React.CSSProperties;
 export declare const getSubRowStyle: ({ density, depth }: {
@@ -7,3 +8,4 @@ export declare const getSubRowStyle: ({ density, depth }: {
 }) => {
     paddingInlineStart: number;
 };
+export declare const TableColumnsContext: React.Context<Column[]>;

package/esm/core/Table/utils.js

@@ -1,3 +1,8 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import * as React from 'react';
 export const getCellStyle = (column, isTableResizing) => {
     const style = {};
     style.flex = `1 1 145px`;
@@ -59,3 +64,4 @@ export const getSubRowStyle = ({ density = 'default', depth = 1 }) => {
         paddingInlineStart: cellPadding + depth * multiplier,
     };
 };
+export const TableColumnsContext = React.createContext([]);

package/esm/core/ThemeProvider/ThemeProvider.js

@@ -5,7 +5,7 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import cx from 'classnames';
-import { useMediaQuery, useMergedRefs, Box, useLayoutEffect, useControlledState, useLatestRef, importCss, isUnitTest, } from '../utils/index.js';
+import { useMediaQuery, useMergedRefs, Box, useLayoutEffect, useControlledState, useLatestRef, importCss, isUnitTest, HydrationProvider, } from '../utils/index.js';
 import { ThemeContext } from './ThemeContext.js';
 import { ToastProvider, Toaster } from '../Toast/Toaster.js';
 /**
@@ -56,13 +56,14 @@ export const ThemeProvider = React.forwardRef((props, forwardedRef) => {
     // we do include all dependencies below, but we want to stringify the objects as they could be different on each render
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [theme, JSON.stringify(themeOptions), portalContainer]);
-    return (React.createElement(ThemeContext.Provider, { value: contextValue },
-        includeCss && rootElement ? React.createElement(FallbackStyles, { root: rootElement }) : null,
-        React.createElement(Root, { theme: theme, themeOptions: themeOptions, ref: useMergedRefs(forwardedRef, setRootElement), ...rest },
-            React.createElement(ToastProvider, null,
-                children,
-                portaledPortalContainer ? (ReactDOM.createPortal(React.createElement(Toaster, null), portaledPortalContainer)) : (React.createElement("div", { ref: setPortalContainer, style: { display: 'contents' } },
-                    React.createElement(Toaster, null)))))));
+    return (React.createElement(HydrationProvider, null,
+        React.createElement(ThemeContext.Provider, { value: contextValue },
+            includeCss && rootElement ? (React.createElement(FallbackStyles, { root: rootElement })) : null,
+            React.createElement(Root, { theme: theme, themeOptions: themeOptions, ref: useMergedRefs(forwardedRef, setRootElement), ...rest },
+                React.createElement(ToastProvider, null,
+                    children,
+                    portaledPortalContainer ? (ReactDOM.createPortal(React.createElement(Toaster, null), portaledPortalContainer)) : (React.createElement("div", { ref: setPortalContainer, style: { display: 'contents' } },
+                        React.createElement(Toaster, null))))))));
 });
 // ----------------------------------------------------------------------------
 const Root = React.forwardRef((props, forwardedRef) => {

package/esm/core/Tile/Tile.d.ts

@@ -255,7 +255,7 @@ export declare const Tile: PolymorphicForwardRefComponent<"div", TileLegacyProps
         labelProps?: Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
             ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
         }, "as" | "children" | "content" | "portal" | keyof {
-            placement?: import("@floating-ui/core").Placement | undefined;
+            placement?: import("@floating-ui/utils").Placement | undefined;
             visible?: boolean | undefined;
             onVisibleChange?: ((visible: boolean) => void) | undefined;
             autoUpdateOptions?: {
@@ -281,7 +281,7 @@ export declare const Tile: PolymorphicForwardRefComponent<"div", TileLegacyProps
             content: React.ReactNode;
             children?: React.ReactNode;
         } & import("../utils/index.js").PortalProps & {
-            placement?: import("@floating-ui/core").Placement | undefined;
+            placement?: import("@floating-ui/utils").Placement | undefined;
             visible?: boolean | undefined;
             onVisibleChange?: ((visible: boolean) => void) | undefined;
             autoUpdateOptions?: {

package/esm/core/VisuallyHidden/VisuallyHidden.js

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import { Box, ShadowRoot, useIsClient } from '../utils/index.js';
+import { Box, ShadowRoot, useHydration } from '../utils/index.js';
 /**
  * Hides content visually but keeps it still accessible to screen readers
  * and other assistive technologies.
@@ -17,12 +17,12 @@ import { Box, ShadowRoot, useIsClient } from '../utils/index.js';
  */
 export const VisuallyHidden = React.forwardRef((props, ref) => {
     const { as: asProp = 'span', className, unhideOnFocus = true, children: childrenProp, ...rest } = props;
-    const isMounted = useIsClient();
+    const isHydrated = useHydration() === 'hydrated';
     // ShadowRoot is not supported on all elements, so we only use it for few common ones.
     const children = !['div', 'span', 'p'].includes(asProp) ? (childrenProp) : (React.createElement(React.Fragment, null,
         React.createElement(ShadowRoot, { css: css },
             React.createElement("slot", null)),
-        isMounted && childrenProp));
+        isHydrated && childrenProp));
     return (React.createElement(Box, { as: asProp, className: cx('iui-visually-hidden', className), "data-iui-unhide-on-focus": unhideOnFocus ? true : undefined, ref: ref, ...rest }, children));
 });
 // ----------------------------------------------------------------------------

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

@@ -5,6 +5,7 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { useLatestRef, useLayoutEffect } from '../hooks/index.js';
+import { useHydration } from '../providers/index.js';
 const isBrowser = typeof document !== 'undefined';
 const supportsDSD = isBrowser && 'shadowRootMode' in HTMLTemplateElement.prototype;
 const supportsAdoptedStylesheets = isBrowser && 'adoptedStyleSheets' in Document.prototype;
@@ -15,7 +16,7 @@ const supportsAdoptedStylesheets = isBrowser && 'adoptedStyleSheets' in Document
  * @private
  */
 export const ShadowRoot = ({ children, css }) => {
-    const isFirstRender = useIsFirstRender();
+    const isHydrating = useHydration() === 'hydrating';
     if (!isBrowser) {
         return (React.createElement("template", { shadowrootmode: 'open' },
             css && React.createElement("style", null, css),
@@ -23,7 +24,7 @@ export const ShadowRoot = ({ children, css }) => {
     }
     // In browsers that support DSD, the template will be automatically removed as soon as it's parsed.
     // To pass hydration, the first client render needs to emulate this browser behavior and return null.
-    if (supportsDSD && isFirstRender) {
+    if (supportsDSD && isHydrating) {
         return null;
     }
     return React.createElement(ClientShadowRoot, { css: css }, children);
@@ -48,31 +49,38 @@ function useShadowRoot(templateRef, { css = '' }) {
     const [shadowRoot, setShadowRoot] = React.useState(null);
     const styleSheet = React.useRef();
     const latestCss = useLatestRef(css);
+    const latestShadowRoot = useLatestRef(shadowRoot);
     useLayoutEffect(() => {
         const parent = templateRef.current?.parentElement;
         if (!parent) {
             return;
         }
-        if (parent.shadowRoot) {
-            parent.shadowRoot.replaceChildren(); // Remove previous shadowroot content
-        }
-        const shadow = parent.shadowRoot || parent.attachShadow({ mode: 'open' });
-        if (supportsAdoptedStylesheets) {
-            // create an empty stylesheet and add it to the shadowRoot
-            const currentWindow = shadow.ownerDocument.defaultView || globalThis;
-            styleSheet.current = new currentWindow.CSSStyleSheet();
-            shadow.adoptedStyleSheets = [styleSheet.current];
-            // add the CSS immediately to avoid FOUC (one-time)
-            if (latestCss.current) {
-                styleSheet.current.replaceSync(latestCss.current);
+        const setupOrReuseShadowRoot = () => {
+            if (parent.shadowRoot && latestShadowRoot.current === null) {
+                parent.shadowRoot.replaceChildren(); // Remove previous shadowroot content
             }
-        }
-        queueMicrotask(() => {
-            // Flush the state immediately to ensure layout measurements in parent component are correct
+            const shadow = parent.shadowRoot || parent.attachShadow({ mode: 'open' });
+            if (supportsAdoptedStylesheets) {
+                // create an empty stylesheet and add it to the shadowRoot
+                const currentWindow = shadow.ownerDocument.defaultView || globalThis;
+                styleSheet.current = new currentWindow.CSSStyleSheet();
+                shadow.adoptedStyleSheets = [styleSheet.current];
+                // add the CSS immediately to avoid FOUC (one-time)
+                if (latestCss.current) {
+                    styleSheet.current.replaceSync(latestCss.current);
+                }
+            }
+            // Flush the state immediately after shadow-root is attached, to ensure that layout
+            // measurements in parent component are correct.
+            // Without this, the parent component may end up measuring the layout when the shadow-root
+            // is attached in the DOM but React hasn't rendered any slots or content into it yet.
             ReactDOM.flushSync(() => setShadowRoot(shadow));
+        };
+        queueMicrotask(() => {
+            setupOrReuseShadowRoot();
         });
         return () => void setShadowRoot(null);
-    }, [templateRef, latestCss]);
+    }, [templateRef, latestCss, latestShadowRoot]);
     // Synchronize `css` with contents of the existing stylesheet
     useLayoutEffect(() => {
         if (css && supportsAdoptedStylesheets) {
@@ -81,9 +89,3 @@ function useShadowRoot(templateRef, { css = '' }) {
     }, [css]);
     return shadowRoot;
 }
-// ----------------------------------------------------------------------------
-function useIsFirstRender() {
-    const [isFirstRender, setIsFirstRender] = React.useState(true);
-    React.useEffect(() => setIsFirstRender(false), []);
-    return isFirstRender;
-}

package/esm/core/utils/hooks/index.d.ts

@@ -12,3 +12,4 @@ export * from './useIsomorphicLayoutEffect.js';
 export * from './useIsClient.js';
 export * from './useId.js';
 export * from './useControlledState.js';
+export * from './useSyncExternalStore.js';

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

@@ -16,3 +16,4 @@ export * from './useIsomorphicLayoutEffect.js';
 export * from './useIsClient.js';
 export * from './useId.js';
 export * from './useControlledState.js';
+export * from './useSyncExternalStore.js';

package/esm/core/utils/hooks/useMediaQuery.d.ts

@@ -1 +1 @@
-export declare const useMediaQuery: (queryString: string) => boolean;
+export declare const useMediaQuery: (queryString: string) => boolean | undefined;

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

@@ -3,32 +3,17 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import { getWindow } from '../functions/index.js';
-import { useLayoutEffect } from './useIsomorphicLayoutEffect.js';
+import { useSyncExternalStore } from './useSyncExternalStore.js';
 export const useMediaQuery = (queryString) => {
-    const [matches, setMatches] = React.useState();
-    useLayoutEffect(() => {
-        const mediaQueryList = getWindow()?.matchMedia?.(queryString);
-        const handleChange = ({ matches }) => setMatches(matches);
-        if (mediaQueryList != undefined) {
-            setMatches(mediaQueryList.matches);
-            try {
-                mediaQueryList.addEventListener('change', handleChange);
-            }
-            catch {
-                // Safari 13 fallback
-                mediaQueryList.addListener?.(handleChange);
-            }
-        }
-        return () => {
-            try {
-                mediaQueryList?.removeEventListener('change', handleChange);
-            }
-            catch {
-                // Safari 13 fallback
-                mediaQueryList?.removeListener?.(handleChange);
-            }
-        };
+    const getSnapshot = React.useCallback(() => {
+        return typeof window !== 'undefined'
+            ? window.matchMedia?.(queryString).matches
+            : undefined;
     }, [queryString]);
-    return !!matches;
+    const subscribe = React.useCallback((onChange) => {
+        const mediaQueryList = window.matchMedia?.(queryString);
+        mediaQueryList?.addEventListener?.('change', onChange);
+        return () => mediaQueryList?.removeEventListener?.('change', onChange);
+    }, [queryString]);
+    return useSyncExternalStore(subscribe, getSnapshot, () => undefined);
 };

package/esm/core/utils/hooks/useSyncExternalStore.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+/**
+ * Wrapper around `React.useSyncExternalStore` that uses a shim for React 17.
+ */
+export declare const useSyncExternalStore: typeof React.useSyncExternalStore;

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

@@ -0,0 +1,42 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import * as React from 'react';
+const _React = React; // prevent bundlers from stripping the namespace import
+/**
+ * Wrapper around `React.useSyncExternalStore` that uses a shim for React 17.
+ */
+export const useSyncExternalStore = _React.useSyncExternalStore || useSyncExternalStoreShim;
+// ----------------------------------------------------------------------------
+/**
+ * The shim below is adapted from React's source to make it ESM-compatible.
+ *
+ * Note: This does not use `getServerSnapshot` at all, because there is
+ * apparently no way to check "hydrating" state in pre-18.
+ *
+ * @see https://github.com/facebook/react/tree/main/packages/use-sync-external-store
+ */
+function useSyncExternalStoreShim(subscribe, getSnapshot) {
+    const value = getSnapshot();
+    const [{ instance }, forceUpdate] = React.useState({
+        instance: { value, getSnapshot },
+    });
+    React.useLayoutEffect(() => {
+        instance.value = value;
+        instance.getSnapshot = getSnapshot;
+        if (!Object.is(value, getSnapshot())) {
+            forceUpdate({ instance });
+        }
+    }, [subscribe, value, getSnapshot]); // eslint-disable-line
+    React.useEffect(() => {
+        const synchronize = () => {
+            if (!Object.is(instance.value, instance.getSnapshot())) {
+                forceUpdate({ instance });
+            }
+        };
+        synchronize();
+        return subscribe(synchronize);
+    }, [subscribe]); // eslint-disable-line
+    return value;
+}

package/esm/core/utils/index.d.ts

@@ -5,3 +5,4 @@ export * from './props.js';
 export * from './color/index.js';
 export * from './icons/index.js';
 export * from './types.js';
+export * from './providers/index.js';

package/esm/core/utils/index.js

@@ -9,3 +9,4 @@ export * from './props.js';
 export * from './color/index.js';
 export * from './icons/index.js';
 export * from './types.js';
+export * from './providers/index.js';

package/esm/core/utils/providers/HydrationProvider.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+/**
+ * Hook that returns the hydration status of the app.
+ *
+ * @returns one of the following values:
+ * - `"hydrated"` after hydration is *definitely* complete (or is a pure client render)
+ * - `"hydrating"` if we know for sure that hydration is happening (in React 18)
+ * - `undefined` if the hydration status is unknown
+ *
+ * @private
+ */
+export declare const useHydration: () => "hydrated" | "hydrating" | undefined;
+/** @private */
+export declare const HydrationProvider: ({ children, }: {
+    children: React.ReactNode;
+}) => React.JSX.Element;

package/esm/core/utils/providers/HydrationProvider.js

@@ -0,0 +1,47 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import * as React from 'react';
+import { useSyncExternalStore, useIsClient } from '../hooks/index.js';
+const HydrationContext = React.createContext(false);
+const noopSubscribe = () => () => { };
+const isServer = typeof window === 'undefined';
+/**
+ * Hook that returns the hydration status of the app.
+ *
+ * @returns one of the following values:
+ * - `"hydrated"` after hydration is *definitely* complete (or is a pure client render)
+ * - `"hydrating"` if we know for sure that hydration is happening (in React 18)
+ * - `undefined` if the hydration status is unknown
+ *
+ * @private
+ */
+export const useHydration = () => {
+    // Returns true only if getServerSnapshot is called on the client.
+    // In React 18, this is true during hydration.
+    const hydrating = useSyncExternalStore(noopSubscribe, () => false, () => !isServer);
+    // Returns true after hydration is complete (in all React versions).
+    const hydrated = React.useContext(HydrationContext);
+    const hydratedFallback = useIsClient();
+    if (hydrated || hydratedFallback) {
+        return 'hydrated';
+    }
+    else if (hydrating) {
+        return 'hydrating';
+    }
+    return undefined;
+};
+/** @private */
+export const HydrationProvider = ({ children, }) => {
+    const [isHydrated, setIsHydrated] = React.useState(React.useContext(HydrationContext));
+    const onHydrate = React.useCallback(() => setIsHydrated(true), []);
+    return (React.createElement(HydrationContext.Provider, { value: isHydrated },
+        !isHydrated ? React.createElement(HydrationCheck, { onHydrate: onHydrate }) : null,
+        children));
+};
+/** This is extracted into a child component to ensure it runs first. */
+const HydrationCheck = ({ onHydrate }) => {
+    React.useEffect(() => void onHydrate(), [onHydrate]);
+    return null;
+};

package/esm/core/utils/providers/index.d.ts

@@ -0,0 +1 @@
+export * from './HydrationProvider.js';

package/esm/core/utils/providers/index.js

@@ -0,0 +1,5 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+export * from './HydrationProvider.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/itwinui-react",
-  "version": "3.7.4",
+  "version": "3.8.0",
   "author": "Bentley Systems",
   "license": "MIT",
   "type": "module",
@@ -56,7 +56,7 @@
     "ux"
   ],
   "dependencies": {
-    "@floating-ui/react": "^0.26.3",
+    "@floating-ui/react": "^0.26.10",
     "@itwin/itwinui-illustrations-react": "^2.1.0",
     "classnames": "^2.3.2",
     "react-table": "^7.8.0",