@instructure/ui-react-utils 11.7.10-snapshot--1 → 11.7.11-snapshot-0

package/CHANGELOG.md

@@ -3,7 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [11.7.10-snapshot--1](https://github.com/instructure/instructure-ui/compare/v11.7.8...v11.7.10-snapshot--1) (2026-10-14)
+## [11.7.11-snapshot-0](https://github.com/instructure/instructure-ui/compare/v11.7.10...v11.7.11-snapshot-0) (2026-10-14)
+
+### Features
+
+* **INSTUI-5156:** new skeleton loader ([#2720](https://github.com/instructure/instructure-ui/issues/2720)) ([f83433e](https://github.com/instructure/instructure-ui/commit/f83433ee71854ecc409ee042fabbcf9b92336a3a))
+
+
+## [11.7.10](https://github.com/instructure/instructure-ui/compare/v11.7.8...v11.7.10) (2026-10-14)
 
 **Note:** Version bump only for package @instructure/ui-react-utils
 

package/es/HydrationContext/HydrationContext.js

@@ -0,0 +1,33 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { createContext } from 'react';
+
+/**
+ * Whether the page has hydrated. `undefined` means there's no
+ * `HydrationProvider` above, and `false` means hydration hasn't finished yet.
+ */
+const HydrationContext = /*#__PURE__*/createContext(undefined);
+export { HydrationContext };
+export default HydrationContext;

package/es/HydrationContext/HydrationGate.js

@@ -0,0 +1,49 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { useIsHydratedContext } from './useIsHydratedContext.js';
+import { Fragment as _Fragment, jsx as _jsx } from "@emotion/react/jsx-runtime";
+/**
+ * ---
+ * category: utilities/SSR
+ * ---
+ * Lets class components know whether the page has hydrated. It works with or
+ * without a `HydrationProvider` above it.
+ *
+ * ```jsx
+ * <HydrationGate>
+ *   {(isHydrated) => (isHydrated ? <Content /> : <Placeholder />)}
+ * </HydrationGate>
+ * ```
+ */
+function HydrationGate({
+  children
+}) {
+  return _jsx(_Fragment, {
+    children: children(useIsHydratedContext())
+  });
+}
+HydrationGate.displayName = 'HydrationGate';
+export { HydrationGate };
+export default HydrationGate;

package/es/HydrationContext/HydrationProvider.js

@@ -0,0 +1,49 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { HydrationContext } from './HydrationContext.js';
+import { useIsHydrated } from '../useIsHydrated.js';
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+/**
+ * ---
+ * category: utilities/SSR
+ * ---
+ * Shares whether the page has hydrated with every component below it, so they
+ * all switch from their server output at the same time. Class components read
+ * it with `HydrationGate`.
+ *
+ * `InstUISettingsProvider` already includes it, so you usually don't need to
+ * add it yourself.
+ */
+function HydrationProvider({
+  children
+}) {
+  const isHydrated = useIsHydrated();
+  return _jsx(HydrationContext.Provider, {
+    value: isHydrated,
+    children: children
+  });
+}
+export { HydrationProvider };
+export default HydrationProvider;

package/es/HydrationContext/index.js

@@ -0,0 +1,28 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+export { HydrationContext } from './HydrationContext.js';
+export { HydrationProvider } from './HydrationProvider.js';
+export { useIsHydratedContext } from './useIsHydratedContext.js';
+export { HydrationGate } from './HydrationGate.js';

package/es/HydrationContext/useIsHydratedContext.js

@@ -0,0 +1,46 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { useContext } from 'react';
+import { HydrationContext } from './HydrationContext.js';
+import { useIsHydrated } from '../useIsHydrated.js';
+
+/**
+ * ---
+ * category: utilities/SSR
+ * ---
+ * Like `useIsHydrated`, but reads the value from the nearest
+ * `HydrationProvider` when there is one.
+ *
+ * @module useIsHydratedContext
+ * @returns {boolean} `true` once the page has hydrated
+ */
+const useIsHydratedContext = () => {
+  const fromProvider = useContext(HydrationContext);
+  // Hooks can't be called conditionally, so this always runs.
+  const standalone = useIsHydrated();
+  return fromProvider ?? standalone;
+};
+export { useIsHydratedContext };
+export default useIsHydratedContext;

package/es/index.js

@@ -33,5 +33,7 @@ export { omitProps } from './omitProps.js';
 export { passthroughProps } from './passthroughProps.js';
 export { pickProps } from './pickProps.js';
 export { safeCloneElement } from './safeCloneElement.js';
+export { useIsHydrated } from './useIsHydrated.js';
 export { windowMessageListener } from './windowMessageListener.js';
-export { DeterministicIdContext, DeterministicIdContextProvider, withDeterministicId, useDeterministicId } from './DeterministicIdContext/index.js';
+export { DeterministicIdContext, DeterministicIdContextProvider, withDeterministicId, useDeterministicId } from './DeterministicIdContext/index.js';
+export { HydrationContext, HydrationProvider, useIsHydratedContext, HydrationGate } from './HydrationContext/index.js';

package/es/useIsHydrated.js

@@ -0,0 +1,45 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { useSyncExternalStore } from 'react';
+
+// The value never changes, so there's nothing to subscribe to.
+const noopSubscribe = () => () => {};
+const getClientSnapshot = () => true;
+const getServerSnapshot = () => false;
+
+/**
+ * ---
+ * category: utilities/SSR
+ * ---
+ * Returns `false` on the server and while React is hydrating, then `true`.
+ * Use it to render something different on the client without causing a
+ * hydration mismatch. In class components, use `HydrationGate` instead.
+ *
+ * @module useIsHydrated
+ * @returns {boolean} `true` once the page has hydrated
+ */
+const useIsHydrated = () => useSyncExternalStore(noopSubscribe, getClientSnapshot, getServerSnapshot);
+export default useIsHydrated;
+export { useIsHydrated };

package/lib/HydrationContext/HydrationContext.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.HydrationContext = void 0;
+var _react = require("react");
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+/**
+ * Whether the page has hydrated. `undefined` means there's no
+ * `HydrationProvider` above, and `false` means hydration hasn't finished yet.
+ */
+const HydrationContext = exports.HydrationContext = /*#__PURE__*/(0, _react.createContext)(undefined);
+var _default = exports.default = HydrationContext;

package/lib/HydrationContext/HydrationGate.js

@@ -0,0 +1,55 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.HydrationGate = HydrationGate;
+exports.default = void 0;
+var _useIsHydratedContext = require("./useIsHydratedContext.js");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+/**
+ * ---
+ * category: utilities/SSR
+ * ---
+ * Lets class components know whether the page has hydrated. It works with or
+ * without a `HydrationProvider` above it.
+ *
+ * ```jsx
+ * <HydrationGate>
+ *   {(isHydrated) => (isHydrated ? <Content /> : <Placeholder />)}
+ * </HydrationGate>
+ * ```
+ */
+function HydrationGate({
+  children
+}) {
+  return (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: children((0, _useIsHydratedContext.useIsHydratedContext)())
+  });
+}
+HydrationGate.displayName = 'HydrationGate';
+var _default = exports.default = HydrationGate;

package/lib/HydrationContext/HydrationProvider.js

@@ -0,0 +1,55 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.HydrationProvider = HydrationProvider;
+exports.default = void 0;
+var _HydrationContext = require("./HydrationContext.js");
+var _useIsHydrated = require("../useIsHydrated.js");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+/**
+ * ---
+ * category: utilities/SSR
+ * ---
+ * Shares whether the page has hydrated with every component below it, so they
+ * all switch from their server output at the same time. Class components read
+ * it with `HydrationGate`.
+ *
+ * `InstUISettingsProvider` already includes it, so you usually don't need to
+ * add it yourself.
+ */
+function HydrationProvider({
+  children
+}) {
+  const isHydrated = (0, _useIsHydrated.useIsHydrated)();
+  return (0, _jsxRuntime.jsx)(_HydrationContext.HydrationContext.Provider, {
+    value: isHydrated,
+    children: children
+  });
+}
+var _default = exports.default = HydrationProvider;

package/lib/HydrationContext/index.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "HydrationContext", {
+  enumerable: true,
+  get: function () {
+    return _HydrationContext.HydrationContext;
+  }
+});
+Object.defineProperty(exports, "HydrationGate", {
+  enumerable: true,
+  get: function () {
+    return _HydrationGate.HydrationGate;
+  }
+});
+Object.defineProperty(exports, "HydrationProvider", {
+  enumerable: true,
+  get: function () {
+    return _HydrationProvider.HydrationProvider;
+  }
+});
+Object.defineProperty(exports, "useIsHydratedContext", {
+  enumerable: true,
+  get: function () {
+    return _useIsHydratedContext.useIsHydratedContext;
+  }
+});
+var _HydrationContext = require("./HydrationContext.js");
+var _HydrationProvider = require("./HydrationProvider.js");
+var _useIsHydratedContext = require("./useIsHydratedContext.js");
+var _HydrationGate = require("./HydrationGate.js");

package/lib/HydrationContext/useIsHydratedContext.js

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useIsHydratedContext = exports.default = void 0;
+var _react = require("react");
+var _HydrationContext = require("./HydrationContext.js");
+var _useIsHydrated = require("../useIsHydrated.js");
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+/**
+ * ---
+ * category: utilities/SSR
+ * ---
+ * Like `useIsHydrated`, but reads the value from the nearest
+ * `HydrationProvider` when there is one.
+ *
+ * @module useIsHydratedContext
+ * @returns {boolean} `true` once the page has hydrated
+ */
+const useIsHydratedContext = () => {
+  const fromProvider = (0, _react.useContext)(_HydrationContext.HydrationContext);
+  // Hooks can't be called conditionally, so this always runs.
+  const standalone = (0, _useIsHydrated.useIsHydrated)();
+  return fromProvider ?? standalone;
+};
+exports.useIsHydratedContext = useIsHydratedContext;
+var _default = exports.default = useIsHydratedContext;

package/lib/index.js

@@ -15,6 +15,24 @@ Object.defineProperty(exports, "DeterministicIdContextProvider", {
     return _index.DeterministicIdContextProvider;
   }
 });
+Object.defineProperty(exports, "HydrationContext", {
+  enumerable: true,
+  get: function () {
+    return _index2.HydrationContext;
+  }
+});
+Object.defineProperty(exports, "HydrationGate", {
+  enumerable: true,
+  get: function () {
+    return _index2.HydrationGate;
+  }
+});
+Object.defineProperty(exports, "HydrationProvider", {
+  enumerable: true,
+  get: function () {
+    return _index2.HydrationProvider;
+  }
+});
 Object.defineProperty(exports, "callRenderProp", {
   enumerable: true,
   get: function () {
@@ -81,6 +99,18 @@ Object.defineProperty(exports, "useDeterministicId", {
     return _index.useDeterministicId;
   }
 });
+Object.defineProperty(exports, "useIsHydrated", {
+  enumerable: true,
+  get: function () {
+    return _useIsHydrated.useIsHydrated;
+  }
+});
+Object.defineProperty(exports, "useIsHydratedContext", {
+  enumerable: true,
+  get: function () {
+    return _index2.useIsHydratedContext;
+  }
+});
 Object.defineProperty(exports, "windowMessageListener", {
   enumerable: true,
   get: function () {
@@ -103,5 +133,7 @@ var _omitProps = require("./omitProps.js");
 var _passthroughProps = require("./passthroughProps.js");
 var _pickProps = require("./pickProps.js");
 var _safeCloneElement = require("./safeCloneElement.js");
+var _useIsHydrated = require("./useIsHydrated.js");
 var _windowMessageListener = require("./windowMessageListener.js");
-var _index = require("./DeterministicIdContext/index.js");
+var _index = require("./DeterministicIdContext/index.js");
+var _index2 = require("./HydrationContext/index.js");

package/lib/useIsHydrated.js

@@ -0,0 +1,50 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useIsHydrated = exports.default = void 0;
+var _react = require("react");
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+// The value never changes, so there's nothing to subscribe to.
+const noopSubscribe = () => () => {};
+const getClientSnapshot = () => true;
+const getServerSnapshot = () => false;
+
+/**
+ * ---
+ * category: utilities/SSR
+ * ---
+ * Returns `false` on the server and while React is hydrating, then `true`.
+ * Use it to render something different on the client without causing a
+ * hydration mismatch. In class components, use `HydrationGate` instead.
+ *
+ * @module useIsHydrated
+ * @returns {boolean} `true` once the page has hydrated
+ */
+const useIsHydrated = () => (0, _react.useSyncExternalStore)(noopSubscribe, getClientSnapshot, getServerSnapshot);
+exports.useIsHydrated = useIsHydrated;
+var _default = exports.default = useIsHydrated;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-react-utils",
-  "version": "11.7.10-snapshot--1",
+  "version": "11.7.11-snapshot-0",
   "description": "A React utility library made by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -16,15 +16,15 @@
   "dependencies": {
     "@babel/runtime": "^7.29.7",
     "@emotion/is-prop-valid": "^1.4.0",
-    "@instructure/console": "11.7.10-snapshot--1",
-    "@instructure/shared-types": "11.7.10-snapshot--1",
-    "@instructure/ui-decorator": "11.7.10-snapshot--1",
-    "@instructure/ui-dom-utils": "11.7.10-snapshot--1",
-    "@instructure/ui-utils": "11.7.10-snapshot--1",
+    "@instructure/console": "11.7.11-snapshot-0",
+    "@instructure/shared-types": "11.7.11-snapshot-0",
+    "@instructure/ui-decorator": "11.7.11-snapshot-0",
+    "@instructure/ui-dom-utils": "11.7.11-snapshot-0",
+    "@instructure/ui-utils": "11.7.11-snapshot-0",
     "hoist-non-react-statics": "^3.3.2"
   },
   "devDependencies": {
-    "@instructure/ui-babel-preset": "11.7.10-snapshot--1",
+    "@instructure/ui-babel-preset": "11.7.11-snapshot-0",
     "@types/hoist-non-react-statics": "^3.3.7",
     "vitest": "^5.0.0"
   },