@itwin/itwinui-react 3.7.3 → 3.8.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # 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
+
+- [#1944](https://github.com/iTwin/iTwinUI/pull/1944): Fixed an issue where `Tooltip` would stay open after clicking on the trigger element. The tooltip will now be correctly dismissed upon click.
+
+  Also affects other components that use tooltips internally: `IconButton`, `SideNavigation`, etc.
+
+- [#1955](https://github.com/iTwin/iTwinUI/pull/1955): Fixed a regression in `Tabs` where the panel content was not occupying the full width of the container.
+- [#1954](https://github.com/iTwin/iTwinUI/pull/1954): Fixed an issue in older Safari versions where visually-hidden styles inside `ProgressRadial` were not being applied.
+
 ## 3.7.3
 
 ### 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?: {
@@ -71,28 +71,10 @@ export declare const Carousel: PolymorphicForwardRefComponent<"section", Carouse
                 ariaStrategy?: "label" | "description" | "none" | undefined;
                 id?: string | undefined;
             }> & {
-                content: React.ReactNode; /**
-                 * The Carousel component consists of a set of slides, normally displayed one at a time. A navigation section is
-                 * shown below the slides, consisting of "dots" and "previous"/"next" buttons, used for changing slides; this navigation
-                 * section must be present _before_ the slides in DOM order, even though it is visually shown below the slides.
-                 *
-                 * The currently shown slide can also be changed using the left/right arrow keys or by dragging on a touch device.
-                 *
-                 * This component uses a composition approach so it should be used with the provided subcomponents.
-                 *
-                 * @example
-                 * <Carousel>
-                 *   <Carousel.Navigation />
-                 *   <Carousel.Slider>
-                 *     <Carousel.Slide>...</Carousel.Slide>
-                 *     <Carousel.Slide>...</Carousel.Slide>
-                 *     <Carousel.Slide>...</Carousel.Slide>
-                 *   </Carousel.Slider>
-                 * </Carousel>
-                 */
+                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?: {
@@ -129,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?: {
@@ -152,28 +134,10 @@ export declare const Carousel: PolymorphicForwardRefComponent<"section", Carouse
                 ariaStrategy?: "label" | "description" | "none" | undefined;
                 id?: string | undefined;
             }> & {
-                content: React.ReactNode; /**
-                 * The Carousel component consists of a set of slides, normally displayed one at a time. A navigation section is
-                 * shown below the slides, consisting of "dots" and "previous"/"next" buttons, used for changing slides; this navigation
-                 * section must be present _before_ the slides in DOM order, even though it is visually shown below the slides.
-                 *
-                 * The currently shown slide can also be changed using the left/right arrow keys or by dragging on a touch device.
-                 *
-                 * This component uses a composition approach so it should be used with the provided subcomponents.
-                 *
-                 * @example
-                 * <Carousel>
-                 *   <Carousel.Navigation />
-                 *   <Carousel.Slider>
-                 *     <Carousel.Slide>...</Carousel.Slide>
-                 *     <Carousel.Slide>...</Carousel.Slide>
-                 *     <Carousel.Slide>...</Carousel.Slide>
-                 *   </Carousel.Slider>
-                 * </Carousel>
-                 */
+                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,15 +255,12 @@ 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?: {
                 ancestorScroll?: boolean | undefined;
-                ancestorResize?: boolean | undefined; /**
-                 * Display a loading state.
-                 * @default false
-                 */
+                ancestorResize?: boolean | undefined;
                 elementResize?: boolean | undefined;
                 animationFrame?: boolean | undefined;
                 layoutShift?: boolean | undefined;
@@ -284,15 +281,12 @@ 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?: {
                 ancestorScroll?: boolean | undefined;
-                ancestorResize?: boolean | undefined; /**
-                 * Display a loading state.
-                 * @default false
-                 */
+                ancestorResize?: boolean | undefined;
                 elementResize?: boolean | undefined;
                 animationFrame?: boolean | undefined;
                 layoutShift?: boolean | undefined;

package/cjs/core/Tooltip/Tooltip.js

@@ -66,10 +66,13 @@ const useTooltip = (options = {}) => {
         (0, react_1.useHover)(floating.context, {
             delay: delay ?? { open: 50, close: 250 },
             handleClose: (0, react_1.safePolygon)({ buffer: -Infinity }),
+            move: false,
         }),
         (0, react_1.useFocus)(floating.context),
-        (0, react_1.useClick)(floating.context),
-        (0, react_1.useDismiss)(floating.context),
+        (0, react_1.useDismiss)(floating.context, {
+            referencePress: true,
+            referencePressEvent: 'click',
+        }),
     ]);
     // Manually add attributes and event handlers to external reference element,
     // because we cannot spread getReferenceProps onto it.

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

@@ -1,11 +1,13 @@
 import * as React from 'react';
+type ShadowRootProps = {
+    children: React.ReactNode;
+    css?: string;
+};
 /**
  * Wrapper around `<template>` element that attaches shadow root to its parent
  * and moves its children into the shadow root.
  *
  * @private
  */
-export declare const ShadowRoot: ({ children, css, }: {
-    children: React.ReactNode;
-    css?: string | undefined;
-}) => React.JSX.Element | null;
+export declare const ShadowRoot: ({ children, css }: ShadowRootProps) => React.JSX.Element | null;
+export {};

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

@@ -30,6 +30,8 @@ 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;
@@ -39,28 +41,8 @@ const supportsAdoptedStylesheets = isBrowser && 'adoptedStyleSheets' in Document
  *
  * @private
  */
-const ShadowRoot = ({ children, css, }) => {
-    const [shadowRoot, setShadowRoot] = React.useState();
-    const isFirstRender = useIsFirstRender();
-    const styleSheet = React.useRef();
-    const attachShadowRef = React.useCallback((template) => {
-        const parent = template?.parentElement;
-        if (!template || !parent) {
-            return;
-        }
-        if (parent.shadowRoot) {
-            parent.shadowRoot.replaceChildren(); // Remove previous shadowroot content
-        }
-        queueMicrotask(() => {
-            const shadow = parent.shadowRoot || parent.attachShadow({ mode: 'open' });
-            if (css && supportsAdoptedStylesheets) {
-                styleSheet.current || (styleSheet.current = new CSSStyleSheet());
-                styleSheet.current.replaceSync(css);
-                shadow.adoptedStyleSheets = [styleSheet.current];
-            }
-            ReactDOM.flushSync(() => setShadowRoot(shadow));
-        });
-    }, [css]);
+const ShadowRoot = ({ children, css }) => {
+    const isHydrating = (0, index_js_2.useHydration)() === 'hydrating';
     if (!isBrowser) {
         return (React.createElement("template", { shadowrootmode: 'open' },
             css && React.createElement("style", null, css),
@@ -68,15 +50,69 @@ 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(React.Fragment, null, shadowRoot ? (ReactDOM.createPortal(children, shadowRoot)) : (React.createElement("template", { ref: attachShadowRef }))));
+    return React.createElement(ClientShadowRoot, { css: css }, children);
 };
 exports.ShadowRoot = ShadowRoot;
 // ----------------------------------------------------------------------------
-function useIsFirstRender() {
-    const [isFirstRender, setIsFirstRender] = React.useState(true);
-    React.useEffect(() => setIsFirstRender(false), []);
-    return isFirstRender;
+const ClientShadowRoot = ({ children, css }) => {
+    const templateRef = React.useRef(null);
+    const shadowRoot = useShadowRoot(templateRef, { css });
+    // fallback to <style> tag if adoptedStyleSheets is not supported
+    const fallbackCss = !supportsAdoptedStylesheets && css ? React.createElement("style", null, css) : null;
+    return shadowRoot ? (ReactDOM.createPortal(React.createElement(React.Fragment, null,
+        fallbackCss,
+        children), shadowRoot)) : (React.createElement("template", { ref: templateRef }));
+};
+// ----------------------------------------------------------------------------
+/**
+ * Given a ref, this hook will return a shadowRoot attached to its parent element.
+ *
+ * The css will be added to the shadowRoot using `adoptedStyleSheets` (if supported).
+ */
+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;
+        }
+        const setupOrReuseShadowRoot = () => {
+            if (parent.shadowRoot && latestShadowRoot.current === null) {
+                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);
+                }
+            }
+            // 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, latestShadowRoot]);
+    // Synchronize `css` with contents of the existing stylesheet
+    (0, index_js_1.useLayoutEffect)(() => {
+        if (css && supportsAdoptedStylesheets) {
+            styleSheet.current?.replaceSync(css);
+        }
+    }, [css]);
+    return shadowRoot;
 }

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;