@itwin/itwinui-react 3.7.4 → 3.8.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # Changelog
 
+## 3.8.0
+
+### Minor Changes
+
+- [#1957](https://github.com/iTwin/iTwinUI/pull/1957): Bumped the minimum required version of `@floating-ui/react` from `^0.26.3` to `^0.26.10`. (Make sure to also update transitive deps!)
+
+### Patch Changes
+
+- [#1962](https://github.com/iTwin/iTwinUI/pull/1962): Hydration checks have been added in some components to facilitate showing pure client-rendered content more eagerly.
+- [#1968](https://github.com/iTwin/iTwinUI/pull/1968): Fixed a regression in `Table` where the layout of a custom `Cell` unexpectedly changed from horizontal to vertical.
+
 ## 3.7.4
 
 ### Patch Changes

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

@@ -413,7 +413,7 @@ 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(utils_js_1.TableColumnsContext.Provider, { value: columns },
         React.createElement(index_js_1.Box, { ref: (0, index_js_1.useMergedRefs)(tableRef, (element) => {
                 ownerDocument.current = element?.ownerDocument;
                 resizeRef(element);

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

@@ -34,6 +34,7 @@ exports.DefaultCell = void 0;
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const index_js_1 = require("../../utils/index.js");
+const utils_js_1 = require("../utils.js");
 /**
  * Default cell.
  * It should be passed to `cellRenderer`.
@@ -46,7 +47,11 @@ const index_js_1 = require("../../utils/index.js");
  * }
  */
 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(utils_js_1.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(index_js_1.Box, { ...cellElementProps, ...rest, className: (0, classnames_1.default)(cellElementClassName, className), "aria-disabled": isDisabled?.(cellProps.row.original) || undefined, "data-iui-status": status, style: { ...cellElementStyle, ...style } },
         React.createElement(index_js_1.ShadowRoot, null,
             React.createElement("slot", { name: 'start' }),

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

@@ -1,6 +1,34 @@
 "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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getSubRowStyle = exports.getStickyStyle = exports.getCellStyle = void 0;
+exports.TableColumnsContext = exports.getSubRowStyle = exports.getStickyStyle = exports.getCellStyle = 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 = __importStar(require("react"));
 const getCellStyle = (column, isTableResizing) => {
     const style = {};
     style.flex = `1 1 145px`;
@@ -65,3 +93,4 @@ const getSubRowStyle = ({ density = 'default', depth = 1 }) => {
     };
 };
 exports.getSubRowStyle = getSubRowStyle;
+exports.TableColumnsContext = React.createContext([]);

package/cjs/core/ThemeProvider/ThemeProvider.js

@@ -85,13 +85,14 @@ exports.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_js_1.ThemeContext.Provider, { value: contextValue },
-        includeCss && rootElement ? React.createElement(FallbackStyles, { root: rootElement }) : null,
-        React.createElement(Root, { theme: theme, themeOptions: themeOptions, ref: (0, index_js_1.useMergedRefs)(forwardedRef, setRootElement), ...rest },
-            React.createElement(Toaster_js_1.ToastProvider, null,
-                children,
-                portaledPortalContainer ? (ReactDOM.createPortal(React.createElement(Toaster_js_1.Toaster, null), portaledPortalContainer)) : (React.createElement("div", { ref: setPortalContainer, style: { display: 'contents' } },
-                    React.createElement(Toaster_js_1.Toaster, null)))))));
+    return (React.createElement(index_js_1.HydrationProvider, null,
+        React.createElement(ThemeContext_js_1.ThemeContext.Provider, { value: contextValue },
+            includeCss && rootElement ? (React.createElement(FallbackStyles, { root: rootElement })) : null,
+            React.createElement(Root, { theme: theme, themeOptions: themeOptions, ref: (0, index_js_1.useMergedRefs)(forwardedRef, setRootElement), ...rest },
+                React.createElement(Toaster_js_1.ToastProvider, null,
+                    children,
+                    portaledPortalContainer ? (ReactDOM.createPortal(React.createElement(Toaster_js_1.Toaster, null), portaledPortalContainer)) : (React.createElement("div", { ref: setPortalContainer, style: { display: 'contents' } },
+                        React.createElement(Toaster_js_1.Toaster, null))))))));
 });
 // ----------------------------------------------------------------------------
 const Root = React.forwardRef((props, forwardedRef) => {

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

@@ -46,12 +46,12 @@ const index_js_1 = require("../utils/index.js");
  */
 exports.VisuallyHidden = React.forwardRef((props, ref) => {
     const { as: asProp = 'span', className, unhideOnFocus = true, children: childrenProp, ...rest } = props;
-    const isMounted = (0, index_js_1.useIsClient)();
+    const isHydrated = (0, index_js_1.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(index_js_1.ShadowRoot, { css: css },
             React.createElement("slot", null)),
-        isMounted && childrenProp));
+        isHydrated && childrenProp));
     return (React.createElement(index_js_1.Box, { as: asProp, className: (0, classnames_1.default)('iui-visually-hidden', className), "data-iui-unhide-on-focus": unhideOnFocus ? true : undefined, ref: ref, ...rest }, children));
 });
 // ----------------------------------------------------------------------------

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

@@ -31,6 +31,7 @@ exports.ShadowRoot = void 0;
 const React = __importStar(require("react"));
 const ReactDOM = __importStar(require("react-dom"));
 const index_js_1 = require("../hooks/index.js");
+const index_js_2 = require("../providers/index.js");
 const isBrowser = typeof document !== 'undefined';
 const supportsDSD = isBrowser && 'shadowRootMode' in HTMLTemplateElement.prototype;
 const supportsAdoptedStylesheets = isBrowser && 'adoptedStyleSheets' in Document.prototype;
@@ -41,7 +42,7 @@ const supportsAdoptedStylesheets = isBrowser && 'adoptedStyleSheets' in Document
  * @private
  */
 const ShadowRoot = ({ children, css }) => {
-    const isFirstRender = useIsFirstRender();
+    const isHydrating = (0, index_js_2.useHydration)() === 'hydrating';
     if (!isBrowser) {
         return (React.createElement("template", { shadowrootmode: 'open' },
             css && React.createElement("style", null, css),
@@ -49,7 +50,7 @@ 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);
@@ -75,31 +76,38 @@ function useShadowRoot(templateRef, { css = '' }) {
     const [shadowRoot, setShadowRoot] = React.useState(null);
     const styleSheet = React.useRef();
     const latestCss = (0, index_js_1.useLatestRef)(css);
+    const latestShadowRoot = (0, index_js_1.useLatestRef)(shadowRoot);
     (0, index_js_1.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
     (0, index_js_1.useLayoutEffect)(() => {
         if (css && supportsAdoptedStylesheets) {
@@ -108,9 +116,3 @@ function useShadowRoot(templateRef, { css = '' }) {
     }, [css]);
     return shadowRoot;
 }
-// ----------------------------------------------------------------------------
-function useIsFirstRender() {
-    const [isFirstRender, setIsFirstRender] = React.useState(true);
-    React.useEffect(() => setIsFirstRender(false), []);
-    return isFirstRender;
-}

package/cjs/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/cjs/core/utils/hooks/index.js

@@ -32,3 +32,4 @@ __exportStar(require("./useIsomorphicLayoutEffect.js"), exports);
 __exportStar(require("./useIsClient.js"), exports);
 __exportStar(require("./useId.js"), exports);
 __exportStar(require("./useControlledState.js"), exports);
+__exportStar(require("./useSyncExternalStore.js"), exports);

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

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

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

@@ -29,33 +29,18 @@ exports.useMediaQuery = void 0;
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 const React = __importStar(require("react"));
-const index_js_1 = require("../functions/index.js");
-const useIsomorphicLayoutEffect_js_1 = require("./useIsomorphicLayoutEffect.js");
+const useSyncExternalStore_js_1 = require("./useSyncExternalStore.js");
 const useMediaQuery = (queryString) => {
-    const [matches, setMatches] = React.useState();
-    (0, useIsomorphicLayoutEffect_js_1.useLayoutEffect)(() => {
-        const mediaQueryList = (0, index_js_1.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 (0, useSyncExternalStore_js_1.useSyncExternalStore)(subscribe, getSnapshot, () => undefined);
 };
 exports.useMediaQuery = useMediaQuery;

package/cjs/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/cjs/core/utils/hooks/useSyncExternalStore.js

@@ -0,0 +1,68 @@
+"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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSyncExternalStore = 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 = __importStar(require("react"));
+const _React = React; // prevent bundlers from stripping the namespace import
+/**
+ * Wrapper around `React.useSyncExternalStore` that uses a shim for React 17.
+ */
+exports.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/cjs/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/cjs/core/utils/index.js

@@ -25,3 +25,4 @@ __exportStar(require("./props.js"), exports);
 __exportStar(require("./color/index.js"), exports);
 __exportStar(require("./icons/index.js"), exports);
 __exportStar(require("./types.js"), exports);
+__exportStar(require("./providers/index.js"), exports);

package/cjs/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/cjs/core/utils/providers/HydrationProvider.js

@@ -0,0 +1,75 @@
+"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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HydrationProvider = exports.useHydration = 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 = __importStar(require("react"));
+const index_js_1 = require("../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
+ */
+const useHydration = () => {
+    // Returns true only if getServerSnapshot is called on the client.
+    // In React 18, this is true during hydration.
+    const hydrating = (0, index_js_1.useSyncExternalStore)(noopSubscribe, () => false, () => !isServer);
+    // Returns true after hydration is complete (in all React versions).
+    const hydrated = React.useContext(HydrationContext);
+    const hydratedFallback = (0, index_js_1.useIsClient)();
+    if (hydrated || hydratedFallback) {
+        return 'hydrated';
+    }
+    else if (hydrating) {
+        return 'hydrating';
+    }
+    return undefined;
+};
+exports.useHydration = useHydration;
+/** @private */
+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));
+};
+exports.HydrationProvider = HydrationProvider;
+/** This is extracted into a child component to ensure it runs first. */
+const HydrationCheck = ({ onHydrate }) => {
+    React.useEffect(() => void onHydrate(), [onHydrate]);
+    return null;
+};

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

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