@instructure/ui-react-utils 11.6.0 → 11.6.1-snapshot-129

package/es/index.js

@@ -33,4 +33,4 @@ export { passthroughProps } from "./passthroughProps.js";
 export { pickProps } from "./pickProps.js";
 export { safeCloneElement } from "./safeCloneElement.js";
 export { windowMessageListener } from "./windowMessageListener.js";
-export { DeterministicIdContext, DeterministicIdContextProvider, withDeterministicId } from "./DeterministicIdContext/index.js";
+export { DeterministicIdContext, DeterministicIdContextProvider, withDeterministicId, useDeterministicId } from "./DeterministicIdContext/index.js";

package/lib/DeterministicIdContext/index.js

@@ -15,6 +15,12 @@ Object.defineProperty(exports, "DeterministicIdContextProvider", {
     return _DeterministicIdContextProvider.DeterministicIdContextProvider;
   }
 });
+Object.defineProperty(exports, "useDeterministicId", {
+  enumerable: true,
+  get: function () {
+    return _useDeterministicId.useDeterministicId;
+  }
+});
 Object.defineProperty(exports, "withDeterministicId", {
   enumerable: true,
   get: function () {
@@ -23,4 +29,5 @@ Object.defineProperty(exports, "withDeterministicId", {
 });
 var _DeterministicIdContextProvider = require("./DeterministicIdContextProvider");
 var _DeterministicIdContext = require("./DeterministicIdContext");
-var _withDeterministicId = require("./withDeterministicId");
+var _withDeterministicId = require("./withDeterministicId");
+var _useDeterministicId = require("./useDeterministicId");

package/lib/DeterministicIdContext/useDeterministicId.js

@@ -0,0 +1,66 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+exports.useDeterministicId = useDeterministicId;
+var _react = require("react");
+var _generateId = require("@instructure/ui-utils/lib/generateId.js");
+var _DeterministicIdContext = require("./DeterministicIdContext");
+/*
+ * 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.
+ */
+
+/**
+ * A React hook that provides deterministic ID generation for functional components.
+ *
+ * This hook is the functional component equivalent of the `withDeterministicId` decorator.
+ * It uses the `DeterministicIdContext` which is needed for deterministic id generation.
+ *
+ * The context is there for the users to pass an `instanceCounterMap` Map which is then used
+ * in the child components to deterministically create ids for them based on the `instanceCounterMap`.
+ * Read more about it here: [SSR guide](https://instructure.design/#server-side-rendering)
+ *
+ * @param componentName - Optional component name to use as the ID prefix.
+ * @returns A function that generates deterministic IDs. The function accepts an optional instanceName parameter.
+ *
+ * @example
+ * ```tsx
+ * const MyComponent = () => {
+ *     const [deterministicId, setDeterministicId] = useState()
+ *     const getId = useDeterministicId('MyComponent')
+ *     useEffect(() => {
+ *       setDeterministicId(getId())
+ *     }, [])
+ *   return <div id={deterministicId}>Content</div>
+ * }
+ * ```
+ */
+function useDeterministicId(componentName) {
+  const instanceCounterMap = (0, _react.useContext)(_DeterministicIdContext.DeterministicIdContext);
+  return (instanceName = componentName) => {
+    return (0, _generateId.generateId)(instanceName, instanceCounterMap);
+  };
+}
+var _default = exports.default = useDeterministicId;

package/lib/index.js

@@ -75,6 +75,12 @@ Object.defineProperty(exports, "safeCloneElement", {
     return _safeCloneElement.safeCloneElement;
   }
 });
+Object.defineProperty(exports, "useDeterministicId", {
+  enumerable: true,
+  get: function () {
+    return _DeterministicIdContext.useDeterministicId;
+  }
+});
 Object.defineProperty(exports, "windowMessageListener", {
   enumerable: true,
   get: function () {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-react-utils",
-  "version": "11.6.0",
+  "version": "11.6.1-snapshot-129",
   "description": "A React utility library made by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -17,17 +17,17 @@
     "@babel/runtime": "^7.27.6",
     "@emotion/is-prop-valid": "^1.3.1",
     "hoist-non-react-statics": "^3.3.2",
-    "@instructure/shared-types": "11.6.0",
-    "@instructure/ui-decorator": "11.6.0",
-    "@instructure/console": "11.6.0",
-    "@instructure/ui-dom-utils": "11.6.0",
-    "@instructure/ui-utils": "11.6.0"
+    "@instructure/console": "11.6.1-snapshot-129",
+    "@instructure/shared-types": "11.6.1-snapshot-129",
+    "@instructure/ui-decorator": "11.6.1-snapshot-129",
+    "@instructure/ui-utils": "11.6.1-snapshot-129",
+    "@instructure/ui-dom-utils": "11.6.1-snapshot-129"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "15.0.7",
     "vitest": "^3.2.2",
-    "@instructure/ui-babel-preset": "11.6.0"
+    "@instructure/ui-babel-preset": "11.6.1-snapshot-129"
   },
   "peerDependencies": {
     "react": ">=18 <=19",
@@ -39,6 +39,7 @@
   "sideEffects": false,
   "exports": {
     ".": {
+      "src": "./src/index.ts",
       "types": "./types/index.d.ts",
       "import": "./es/index.js",
       "require": "./lib/index.js",

package/src/DeterministicIdContext/index.ts

@@ -25,5 +25,6 @@
 export { DeterministicIdContextProvider } from './DeterministicIdContextProvider'
 export { DeterministicIdContext } from './DeterministicIdContext'
 export { withDeterministicId } from './withDeterministicId'
+export { useDeterministicId } from './useDeterministicId'
 export type { DeterministicIdProviderValue } from './DeterministicIdContextProvider'
 export type { WithDeterministicIdProps } from './withDeterministicId'

package/src/DeterministicIdContext/useDeterministicId.tsx

@@ -0,0 +1,65 @@
+/*
+ * 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 { generateId } from '@instructure/ui-utils'
+import { DeterministicIdContext } from './DeterministicIdContext'
+
+/**
+ * A React hook that provides deterministic ID generation for functional components.
+ *
+ * This hook is the functional component equivalent of the `withDeterministicId` decorator.
+ * It uses the `DeterministicIdContext` which is needed for deterministic id generation.
+ *
+ * The context is there for the users to pass an `instanceCounterMap` Map which is then used
+ * in the child components to deterministically create ids for them based on the `instanceCounterMap`.
+ * Read more about it here: [SSR guide](https://instructure.design/#server-side-rendering)
+ *
+ * @param componentName - Optional component name to use as the ID prefix.
+ * @returns A function that generates deterministic IDs. The function accepts an optional instanceName parameter.
+ *
+ * @example
+ * ```tsx
+ * const MyComponent = () => {
+ *     const [deterministicId, setDeterministicId] = useState()
+ *     const getId = useDeterministicId('MyComponent')
+ *     useEffect(() => {
+ *       setDeterministicId(getId())
+ *     }, [])
+ *   return <div id={deterministicId}>Content</div>
+ * }
+ * ```
+ */
+function useDeterministicId(
+  componentName: string
+): (instanceName?: string) => string {
+  const instanceCounterMap = useContext(DeterministicIdContext)
+
+  return (instanceName = componentName) => {
+    return generateId(instanceName, instanceCounterMap)
+  }
+}
+
+export default useDeterministicId
+export { useDeterministicId }

package/src/index.ts

@@ -37,7 +37,8 @@ export { windowMessageListener } from './windowMessageListener'
 export {
   DeterministicIdContext,
   DeterministicIdContextProvider,
-  withDeterministicId
+  withDeterministicId,
+  useDeterministicId
 } from './DeterministicIdContext'
 
 export type { GetInteractionOptions } from './getInteraction'