@itwin/itwinui-react 3.7.3 → 3.8.0

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

@@ -4,6 +4,8 @@
  *--------------------------------------------------------------------------------------------*/
 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;
@@ -13,28 +15,8 @@ const supportsAdoptedStylesheets = isBrowser && 'adoptedStyleSheets' in Document
  *
  * @private
  */
-export 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]);
+export const ShadowRoot = ({ children, css }) => {
+    const isHydrating = useHydration() === 'hydrating';
     if (!isBrowser) {
         return (React.createElement("template", { shadowrootmode: 'open' },
             css && React.createElement("style", null, css),
@@ -42,14 +24,68 @@ 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(React.Fragment, null, shadowRoot ? (ReactDOM.createPortal(children, shadowRoot)) : (React.createElement("template", { ref: attachShadowRef }))));
+    return React.createElement(ClientShadowRoot, { css: css }, children);
 };
 // ----------------------------------------------------------------------------
-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 = useLatestRef(css);
+    const latestShadowRoot = useLatestRef(shadowRoot);
+    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
+    useLayoutEffect(() => {
+        if (css && supportsAdoptedStylesheets) {
+            styleSheet.current?.replaceSync(css);
+        }
+    }, [css]);
+    return shadowRoot;
 }

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.3",
+  "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",