@itwin/itwinui-react 3.7.4 → 3.8.1

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.1",
   "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",