@instructure/ui-react-utils 8.17.1-snapshot.1 → 8.17.1-snapshot.18

package/es/DeterministicIdContext/DeterministicIdContext.js

@@ -0,0 +1,27 @@
+/*
+ * 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 React from 'react';
+import { generateInstanceCounterMap } from './generateInstanceCounterMap';
+const DeterministicIdContext = /*#__PURE__*/React.createContext(generateInstanceCounterMap());
+export { DeterministicIdContext };

package/es/DeterministicIdContext/DeterministicIdProvider.js

@@ -0,0 +1,47 @@
+/*
+ * 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 React from 'react';
+import { generateInstanceCounterMap } from './generateInstanceCounterMap';
+import { DeterministicIdContext } from './DeterministicIdContext';
+const defaultContextValue = generateInstanceCounterMap();
+/**
+ * ---
+ * category: components/utilities
+ * ---
+ * This is utility component for wrapping components with `DeterministicIdContext.Provider`
+ * See detailed documentation about how to use it: [InstUISettingsProvider](/#InstUISettingsProvider)
+ */
+
+const DeterministicIdContextProvider = _ref => {
+  let children = _ref.children,
+      instanceCounterMap = _ref.instanceCounterMap;
+  return /*#__PURE__*/React.createElement(DeterministicIdContext.Provider, {
+    value: instanceCounterMap
+  }, children);
+};
+
+DeterministicIdContextProvider.defaultProps = {
+  instanceCounterMap: defaultContextValue
+};
+export { DeterministicIdContextProvider };

package/es/DeterministicIdContext/generateInstanceCounterMap.js

@@ -0,0 +1,29 @@
+/*
+ * 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.
+ */
+function generateInstanceCounterMap() {
+  return new Map();
+}
+
+export default generateInstanceCounterMap;
+export { generateInstanceCounterMap };

package/es/DeterministicIdContext/index.js

@@ -0,0 +1,27 @@
+/*
+ * 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 { generateInstanceCounterMap } from './generateInstanceCounterMap';
+export { DeterministicIdContextProvider } from './DeterministicIdProvider';
+export { DeterministicIdContext } from './DeterministicIdContext';
+export { withDeterministicId } from './withDeterministicId';

package/es/DeterministicIdContext/withDeterministicId.js

@@ -0,0 +1,74 @@
+/*
+ * 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 React, { forwardRef, useContext } from 'react';
+import hoistNonReactStatics from 'hoist-non-react-statics';
+import { DeterministicIdContext } from './DeterministicIdContext';
+import { decorator } from '@instructure/ui-decorator';
+import { generateId } from '@instructure/ui-utils';
+import { warn } from '@instructure/console';
+
+/**
+ * This decorator is used to enable the decorated class to use 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)
+ */
+const withDeterministicId = decorator(ComposedComponent => {
+  const WithDeterministicId = /*#__PURE__*/forwardRef((props, ref) => {
+    const componentName = ComposedComponent.componentId || ComposedComponent.displayName || ComposedComponent.name;
+    const instanceCounterMap = useContext(DeterministicIdContext);
+
+    const deterministicId = function () {
+      let instanceName = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : componentName;
+      return generateId(instanceName, instanceCounterMap);
+    };
+
+    if (props.deterministicId) {
+      warn(false, `Manually passing the "deterministicId" property is not allowed on the ${componentName} component.\n`, props.deterministicId);
+    }
+
+    return /*#__PURE__*/React.createElement(ComposedComponent, Object.assign({
+      ref: ref,
+      deterministicId: deterministicId
+    }, props));
+  });
+  hoistNonReactStatics(WithDeterministicId, ComposedComponent); // we have to pass these on, because sometimes users
+  // access propTypes of the component in other components
+  // eslint-disable-next-line react/forbid-foreign-prop-types
+
+  WithDeterministicId.propTypes = ComposedComponent.propTypes;
+  WithDeterministicId.defaultProps = ComposedComponent.defaultProps; // These static fields exist on InstUI components
+
+  WithDeterministicId.allowedProps = ComposedComponent.allowedProps;
+
+  if (process.env.NODE_ENV !== 'production') {
+    WithDeterministicId.displayName = `WithDeterministicId(${ComposedComponent.displayName})`;
+  }
+
+  return WithDeterministicId;
+});
+export default withDeterministicId;
+export { withDeterministicId };

package/es/index.js

@@ -37,4 +37,5 @@ export { omitProps } from './omitProps';
 export { passthroughProps } from './passthroughProps';
 export { pickProps } from './pickProps';
 export { safeCloneElement } from './safeCloneElement';
-export { windowMessageListener } from './windowMessageListener';
+export { windowMessageListener } from './windowMessageListener';
+export { DeterministicIdContext, generateInstanceCounterMap, DeterministicIdContextProvider, withDeterministicId } from './DeterministicIdContext';

package/es/omitProps.js

@@ -29,7 +29,7 @@
  * Return an object with the remaining props after the given props are omitted.
  *
  * Automatically excludes the following props:
- * 'theme', 'children', 'className', 'style', 'styles', 'makeStyles', 'themeOverride'
+ * 'theme', 'children', 'className', 'style', 'styles', 'makeStyles', 'themeOverride', 'deterministicId'
  * @module omitProps
  * @param props The object to process
  * @param propsToOmit list disallowed prop keys or an object whose
@@ -54,7 +54,7 @@ const omit = (originalObject, keysToOmit) => {
   for (const key in originalObject) {
     // special case because we always want to omit these and === is faster than
     // concat'ing them in
-    if (key === 'theme' || key === 'children' || key === 'className' || key === 'style' || key === 'styles' || key === 'makeStyles' || key === 'themeOverride') {
+    if (key === 'theme' || key === 'children' || key === 'className' || key === 'style' || key === 'styles' || key === 'makeStyles' || key === 'themeOverride' || key === 'deterministicId') {
       continue;
     }
 

package/es/passthroughProps.js

@@ -28,7 +28,7 @@ import isPropValid from '@emotion/is-prop-valid';
  * HTML or SVG elements (see https://github.com/emotion-js/emotion/tree/main/packages/is-prop-valid)
  *
  * Disallowed is anything else and 'style', 'styles', 'className', 'children',
- * 'makeStyles'
+ * 'makeStyles', 'deterministicId'
  * @param props The props to process
  */
 
@@ -36,7 +36,7 @@ function passthroughProps(props) {
   const validProps = {};
   Object.keys(props) // style and className need to be explicitly passed through
   // styles and makeStyle can not pass through
-  .filter(propName => isPropValid(propName) && propName !== 'style' && propName !== 'className' && propName !== 'children' && propName !== 'styles' && propName !== 'makeStyles').forEach(propName => {
+  .filter(propName => isPropValid(propName) && propName !== 'style' && propName !== 'className' && propName !== 'children' && propName !== 'styles' && propName !== 'makeStyles' && propName !== 'deterministicId').forEach(propName => {
     validProps[propName] = props[propName];
   });
   return validProps;

package/lib/DeterministicIdContext/DeterministicIdContext.js

@@ -0,0 +1,39 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DeterministicIdContext = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _generateInstanceCounterMap = require("./generateInstanceCounterMap");
+
+/*
+ * 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.
+ */
+const DeterministicIdContext = /*#__PURE__*/_react.default.createContext((0, _generateInstanceCounterMap.generateInstanceCounterMap)());
+
+exports.DeterministicIdContext = DeterministicIdContext;

package/lib/DeterministicIdContext/DeterministicIdProvider.js

@@ -0,0 +1,59 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DeterministicIdContextProvider = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _generateInstanceCounterMap = require("./generateInstanceCounterMap");
+
+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.
+ */
+const defaultContextValue = (0, _generateInstanceCounterMap.generateInstanceCounterMap)();
+/**
+ * ---
+ * category: components/utilities
+ * ---
+ * This is utility component for wrapping components with `DeterministicIdContext.Provider`
+ * See detailed documentation about how to use it: [InstUISettingsProvider](/#InstUISettingsProvider)
+ */
+
+const DeterministicIdContextProvider = _ref => {
+  let children = _ref.children,
+      instanceCounterMap = _ref.instanceCounterMap;
+  return /*#__PURE__*/_react.default.createElement(_DeterministicIdContext.DeterministicIdContext.Provider, {
+    value: instanceCounterMap
+  }, children);
+};
+
+exports.DeterministicIdContextProvider = DeterministicIdContextProvider;
+DeterministicIdContextProvider.defaultProps = {
+  instanceCounterMap: defaultContextValue
+};

package/lib/DeterministicIdContext/generateInstanceCounterMap.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+exports.generateInstanceCounterMap = generateInstanceCounterMap;
+
+/*
+ * 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.
+ */
+function generateInstanceCounterMap() {
+  return new Map();
+}
+
+var _default = generateInstanceCounterMap;
+exports.default = _default;

package/lib/DeterministicIdContext/index.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "DeterministicIdContext", {
+  enumerable: true,
+  get: function () {
+    return _DeterministicIdContext.DeterministicIdContext;
+  }
+});
+Object.defineProperty(exports, "DeterministicIdContextProvider", {
+  enumerable: true,
+  get: function () {
+    return _DeterministicIdProvider.DeterministicIdContextProvider;
+  }
+});
+Object.defineProperty(exports, "generateInstanceCounterMap", {
+  enumerable: true,
+  get: function () {
+    return _generateInstanceCounterMap.generateInstanceCounterMap;
+  }
+});
+Object.defineProperty(exports, "withDeterministicId", {
+  enumerable: true,
+  get: function () {
+    return _withDeterministicId.withDeterministicId;
+  }
+});
+
+var _generateInstanceCounterMap = require("./generateInstanceCounterMap");
+
+var _DeterministicIdProvider = require("./DeterministicIdProvider");
+
+var _DeterministicIdContext = require("./DeterministicIdContext");
+
+var _withDeterministicId = require("./withDeterministicId");

package/lib/DeterministicIdContext/withDeterministicId.js

@@ -0,0 +1,92 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.withDeterministicId = exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _hoistNonReactStatics = _interopRequireDefault(require("hoist-non-react-statics"));
+
+var _DeterministicIdContext = require("./DeterministicIdContext");
+
+var _decorator = require("@instructure/ui-decorator/lib/decorator.js");
+
+var _generateId = require("@instructure/ui-utils/lib/generateId.js");
+
+var _console = require("@instructure/console");
+
+/*
+ * 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.
+ */
+
+/**
+ * This decorator is used to enable the decorated class to use 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)
+ */
+const withDeterministicId = (0, _decorator.decorator)(ComposedComponent => {
+  const WithDeterministicId = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
+    const componentName = ComposedComponent.componentId || ComposedComponent.displayName || ComposedComponent.name;
+    const instanceCounterMap = (0, _react.useContext)(_DeterministicIdContext.DeterministicIdContext);
+
+    const deterministicId = function () {
+      let instanceName = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : componentName;
+      return (0, _generateId.generateId)(instanceName, instanceCounterMap);
+    };
+
+    if (props.deterministicId) {
+      (0, _console.warn)(false, `Manually passing the "deterministicId" property is not allowed on the ${componentName} component.\n`, props.deterministicId);
+    }
+
+    return /*#__PURE__*/_react.default.createElement(ComposedComponent, Object.assign({
+      ref: ref,
+      deterministicId: deterministicId
+    }, props));
+  });
+  (0, _hoistNonReactStatics.default)(WithDeterministicId, ComposedComponent); // we have to pass these on, because sometimes users
+  // access propTypes of the component in other components
+  // eslint-disable-next-line react/forbid-foreign-prop-types
+
+  WithDeterministicId.propTypes = ComposedComponent.propTypes;
+  WithDeterministicId.defaultProps = ComposedComponent.defaultProps; // These static fields exist on InstUI components
+
+  WithDeterministicId.allowedProps = ComposedComponent.allowedProps;
+
+  if (process.env.NODE_ENV !== 'production') {
+    WithDeterministicId.displayName = `WithDeterministicId(${ComposedComponent.displayName})`;
+  }
+
+  return WithDeterministicId;
+});
+exports.withDeterministicId = withDeterministicId;
+var _default = withDeterministicId;
+exports.default = _default;

package/lib/index.js

@@ -9,6 +9,18 @@ Object.defineProperty(exports, "ComponentIdentifier", {
     return _ComponentIdentifier.ComponentIdentifier;
   }
 });
+Object.defineProperty(exports, "DeterministicIdContext", {
+  enumerable: true,
+  get: function () {
+    return _DeterministicIdContext.DeterministicIdContext;
+  }
+});
+Object.defineProperty(exports, "DeterministicIdContextProvider", {
+  enumerable: true,
+  get: function () {
+    return _DeterministicIdContext.DeterministicIdContextProvider;
+  }
+});
 Object.defineProperty(exports, "callRenderProp", {
   enumerable: true,
   get: function () {
@@ -33,6 +45,12 @@ Object.defineProperty(exports, "experimental", {
     return _experimental.experimental;
   }
 });
+Object.defineProperty(exports, "generateInstanceCounterMap", {
+  enumerable: true,
+  get: function () {
+    return _DeterministicIdContext.generateInstanceCounterMap;
+  }
+});
 Object.defineProperty(exports, "getDisplayName", {
   enumerable: true,
   get: function () {
@@ -93,6 +111,12 @@ Object.defineProperty(exports, "windowMessageListener", {
     return _windowMessageListener.windowMessageListener;
   }
 });
+Object.defineProperty(exports, "withDeterministicId", {
+  enumerable: true,
+  get: function () {
+    return _DeterministicIdContext.withDeterministicId;
+  }
+});
 
 var _callRenderProp = require("./callRenderProp");
 
@@ -122,4 +146,6 @@ var _pickProps = require("./pickProps");
 
 var _safeCloneElement = require("./safeCloneElement");
 
-var _windowMessageListener = require("./windowMessageListener");
+var _windowMessageListener = require("./windowMessageListener");
+
+var _DeterministicIdContext = require("./DeterministicIdContext");

package/lib/omitProps.js

@@ -37,7 +37,7 @@ exports.omitProps = omitProps;
  * Return an object with the remaining props after the given props are omitted.
  *
  * Automatically excludes the following props:
- * 'theme', 'children', 'className', 'style', 'styles', 'makeStyles', 'themeOverride'
+ * 'theme', 'children', 'className', 'style', 'styles', 'makeStyles', 'themeOverride', 'deterministicId'
  * @module omitProps
  * @param props The object to process
  * @param propsToOmit list disallowed prop keys or an object whose
@@ -62,7 +62,7 @@ const omit = (originalObject, keysToOmit) => {
   for (const key in originalObject) {
     // special case because we always want to omit these and === is faster than
     // concat'ing them in
-    if (key === 'theme' || key === 'children' || key === 'className' || key === 'style' || key === 'styles' || key === 'makeStyles' || key === 'themeOverride') {
+    if (key === 'theme' || key === 'children' || key === 'className' || key === 'style' || key === 'styles' || key === 'makeStyles' || key === 'themeOverride' || key === 'deterministicId') {
       continue;
     }
 

package/lib/passthroughProps.js

@@ -40,14 +40,14 @@ var _isPropValid = _interopRequireDefault(require("@emotion/is-prop-valid"));
  * HTML or SVG elements (see https://github.com/emotion-js/emotion/tree/main/packages/is-prop-valid)
  *
  * Disallowed is anything else and 'style', 'styles', 'className', 'children',
- * 'makeStyles'
+ * 'makeStyles', 'deterministicId'
  * @param props The props to process
  */
 function passthroughProps(props) {
   const validProps = {};
   Object.keys(props) // style and className need to be explicitly passed through
   // styles and makeStyle can not pass through
-  .filter(propName => (0, _isPropValid.default)(propName) && propName !== 'style' && propName !== 'className' && propName !== 'children' && propName !== 'styles' && propName !== 'makeStyles').forEach(propName => {
+  .filter(propName => (0, _isPropValid.default)(propName) && propName !== 'style' && propName !== 'className' && propName !== 'children' && propName !== 'styles' && propName !== 'makeStyles' && propName !== 'deterministicId').forEach(propName => {
     validProps[propName] = props[propName];
   });
   return validProps;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-react-utils",
-  "version": "8.17.1-snapshot.1+3eaf62445",
+  "version": "8.17.1-snapshot.18+9f145a7d2",
   "description": "A React utility library made by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -22,17 +22,18 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.17.1-snapshot.1+3eaf62445",
-    "@instructure/ui-test-utils": "8.17.1-snapshot.1+3eaf62445"
+    "@instructure/ui-babel-preset": "8.17.1-snapshot.18+9f145a7d2",
+    "@instructure/ui-test-utils": "8.17.1-snapshot.18+9f145a7d2"
   },
   "dependencies": {
     "@babel/runtime": "^7.13.10",
     "@emotion/is-prop-valid": "^1",
-    "@instructure/console": "8.17.1-snapshot.1+3eaf62445",
-    "@instructure/shared-types": "8.17.1-snapshot.1+3eaf62445",
-    "@instructure/ui-decorator": "8.17.1-snapshot.1+3eaf62445",
-    "@instructure/ui-dom-utils": "8.17.1-snapshot.1+3eaf62445",
-    "@instructure/ui-utils": "8.17.1-snapshot.1+3eaf62445",
+    "@instructure/console": "8.17.1-snapshot.18+9f145a7d2",
+    "@instructure/shared-types": "8.17.1-snapshot.18+9f145a7d2",
+    "@instructure/ui-decorator": "8.17.1-snapshot.18+9f145a7d2",
+    "@instructure/ui-dom-utils": "8.17.1-snapshot.18+9f145a7d2",
+    "@instructure/ui-utils": "8.17.1-snapshot.18+9f145a7d2",
+    "hoist-non-react-statics": "^3.3.2",
     "prop-types": "^15"
   },
   "peerDependencies": {
@@ -43,5 +44,5 @@
     "access": "public"
   },
   "sideEffects": false,
-  "gitHead": "3eaf62445635c7ef2927ddfcf610fb561a729fd1"
+  "gitHead": "9f145a7d2f84eda965b570fa5702e1fda0c92e58"
 }