@carbon/ibm-products 2.3.0 → 2.3.2

package/README.md

@@ -104,6 +104,44 @@ const App = () => {
 };
 ```
 
+### Package prefix
+
+The `@carbon/ibm-products` package uses a default prefix of `c4p` for CSS
+selectors and some IDs.
+
+#### Changing the prefix
+
+Before any `@carbon/ibm-products` components are loaded in script or styling
+ensure you have done the following.
+
+```js
+import { pkg } from '@carbon/ibm-products/es/settings';
+
+pkg.prefix = 'tst';
+```
+
+When using multiple components from the library:
+
+```css
+@use '@carbon/ibm-products/scss' with (
+  $pkg-prefix: 'tst'
+);
+```
+
+When using individual components e.g. AboutModal:
+
+```css
+@use '@carbon/ibm-products/scss/config' with (
+  $pkg-prefix: 'tst'
+);
+
+@use '@carbon/ibm-products/scss/components/AboutModal';
+```
+
+See the
+[example gallery](https://ibm-products.carbondesignsystem.com/?path=/story/overview-examples--c-4-p-gallery-code-sandbox)
+for the most up-to-date prefix examples.
+
 ### Enabling Canary components and flagged features
 
 Components that have not yet completed the release review process are considered

package/es/components/APIKeyModal/APIKeyModal.js

@@ -77,18 +77,22 @@ export var APIKeyModal = /*#__PURE__*/forwardRef(function (_ref, ref) {
     previousStepButtonText = _ref.previousStepButtonText,
     showAPIKeyLabel = _ref.showAPIKeyLabel,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var _useState = useState(false),
+  var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
-    copyError = _useState2[0],
-    setCopyError = _useState2[1];
-  var _useState3 = useState(apiKeyName),
+    title = _useState2[0],
+    setTitle = _useState2[1];
+  var _useState3 = useState(false),
     _useState4 = _slicedToArray(_useState3, 2),
-    name = _useState4[0],
-    setName = _useState4[1];
-  var _useState5 = useState(0),
+    copyError = _useState4[0],
+    setCopyError = _useState4[1];
+  var _useState5 = useState(apiKeyName),
     _useState6 = _slicedToArray(_useState5, 2),
-    currentStep = _useState6[0],
-    setCurrentStep = _useState6[1];
+    name = _useState6[0],
+    setName = _useState6[1];
+  var _useState7 = useState(0),
+    _useState8 = _slicedToArray(_useState7, 2),
+    currentStep = _useState8[0],
+    setCurrentStep = _useState8[1];
   var copyRef = useRef();
   var apiKeyInputId = useRef(uuidv4());
   var nameInputId = useRef(uuidv4());
@@ -141,18 +145,17 @@ export var APIKeyModal = /*#__PURE__*/forwardRef(function (_ref, ref) {
     }
     return closeButtonText;
   };
-  var getTitle = function getTitle() {
+  useEffect(function () {
     if (editing && editSuccess) {
-      return editSuccessTitle;
-    }
-    if (apiKeyLoaded) {
-      return generateSuccessTitle;
-    }
-    if (hasSteps) {
-      return customSteps[currentStep].title;
+      setTitle(editSuccessTitle);
+    } else if (apiKeyLoaded) {
+      setTitle(generateSuccessTitle);
+    } else if (hasSteps) {
+      setTitle(customSteps[currentStep].title);
+    } else {
+      setTitle(generateTitle);
     }
-    return generateTitle;
-  };
+  }, [apiKeyLoaded, editing, editSuccess, editSuccessTitle, hasSteps, generateSuccessTitle, generateTitle, currentStep, customSteps]);
   var setNameHandler = function setNameHandler(evt) {
     setName(evt.target.value);
   };
@@ -235,7 +238,7 @@ export var APIKeyModal = /*#__PURE__*/forwardRef(function (_ref, ref) {
     preventCloseOnClickOutside: true
   }), /*#__PURE__*/React.createElement(ModalHeader, {
     className: "".concat(blockClass, "__header"),
-    title: getTitle(),
+    title: title,
     label: modalLabel
   }), /*#__PURE__*/React.createElement(ModalBody, {
     className: "".concat(blockClass, "__body-container")
@@ -253,7 +256,8 @@ export var APIKeyModal = /*#__PURE__*/forwardRef(function (_ref, ref) {
     labelText: apiKeyLabel,
     id: apiKeyInputId.current
   }), (editing || !apiKeyLoaded && nameRequired) && /*#__PURE__*/React.createElement(Form, {
-    onSubmit: submitHandler
+    onSubmit: submitHandler,
+    "aria-label": title
   }, /*#__PURE__*/React.createElement(TextInput, {
     helperText: nameHelperText,
     placeholder: namePlaceholder,

package/es/components/ActionBar/ActionBar.js

@@ -74,13 +74,12 @@ export var ActionBar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       className: "".concat(blockClass, "__hidden-sizing-items"),
       "aria-hidden": true,
       ref: sizingRef
-    }, /*#__PURE__*/React.createElement("span", {
-      "aria-hidden": false
-    }, /*#__PURE__*/React.createElement(ActionBarOverflowItems, {
+    }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(ActionBarOverflowItems, {
       className: "".concat(blockClass, "__hidden-sizing-item"),
       overflowAriaLabel: "hidden sizing overflow items",
       overflowItems: [],
-      key: "hidden-overflow-menu"
+      key: "hidden-overflow-menu",
+      tabIndex: -1
     }), actions.map(function (_ref2) {
       var key = _ref2.key,
         id = _ref2.id,
@@ -89,7 +88,8 @@ export var ActionBar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         // ensure id is not duplicated
         "data-original-id": id,
         key: "hidden-item-".concat(key),
-        className: "".concat(blockClass, "__hidden-sizing-item")
+        className: "".concat(blockClass, "__hidden-sizing-item"),
+        tabIndex: -1
       }));
     }))));
   }, [actions]);

package/es/components/CreateFullPage/CreateFullPage.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["backButtonText", "cancelButtonText", "children", "className", "modalDangerButtonText", "modalDescription", "modalSecondaryButtonText", "modalTitle", "nextButtonText", "onClose", "onRequestSubmit", "firstFocusElement", "submitButtonText"];
+var _excluded = ["backButtonText", "cancelButtonText", "children", "className", "modalDangerButtonText", "modalDescription", "modalSecondaryButtonText", "modalTitle", "nextButtonText", "onClose", "onRequestSubmit", "firstFocusElement", "submitButtonText", "title"];
 /**
  * Copyright IBM Corp. 2021, 2023
  *
@@ -62,6 +62,7 @@ export var CreateFullPage = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     onRequestSubmit = _ref.onRequestSubmit,
     firstFocusElement = _ref.firstFocusElement,
     submitButtonText = _ref.submitButtonText,
+    title = _ref.title,
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useState = useState([]),
     _useState2 = _slicedToArray(_useState, 2),
@@ -172,7 +173,8 @@ export var CreateFullPage = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass, "__content")
   }, /*#__PURE__*/React.createElement(Form, {
-    className: "".concat(blockClass, "__form")
+    className: "".concat(blockClass, "__form"),
+    "aria-label": title
   }, /*#__PURE__*/React.createElement(StepsContext.Provider, {
     value: {
       currentStep: currentStep,

package/es/components/CreateModal/CreateModal.docs-page.js

@@ -8,7 +8,7 @@ var DocsPage = function DocsPage() {
       story: stories.Default
     }, {
       title: 'Form validation',
-      description: "All forms, including that within the `CreateModal` should follow C&CS guidelines\nfor form validation.\n\nThis includes the following:\n\n- The `Submit` button in the modal should be disabled, until all required inputs\n  are filled in and valid\n- All required inputs should _only_ throw an invalid error _after_ the element\n  loses focus\n- All optional form fields should have an `(optional)` text at the end of the\n  input `labelText`. Optional should always be in parentheses\n\nYou can find more information on how to validate your form fields in\n[Carbon's Form usage page](https://www.carbondesignsystem.com/components/form/usage)."
+      description: "All forms, including that within the `CreateModal` should follow @carbon/ibm-products guidelines\nfor form validation.\n\nThis includes the following:\n\n- The `Submit` button in the modal should be disabled, until all required inputs\n  are filled in and valid\n- All required inputs should _only_ throw an invalid error _after_ the element\n  loses focus\n- All optional form fields should have an `(optional)` text at the end of the\n  input `labelText`. Optional should always be in parentheses\n\nYou can find more information on how to validate your form fields in\n[Carbon's Form usage page](https://www.carbondesignsystem.com/components/form/usage)."
     }, {
       title: 'Overriding Carbon theme',
       description: "The design recommendation is to use a dark theme for the CreateModal if the\napplication is currently using a light theme, and vice versa. The theme applied\nto the CreateModal can easily be customized as follows:\n\nIn SCSS:",

package/es/components/CreateModal/CreateModal.js

@@ -73,7 +73,8 @@ export var CreateModal = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
   }, description && /*#__PURE__*/React.createElement("p", {
     className: "".concat(blockClass, "__description")
   }, description), /*#__PURE__*/React.createElement(Form, {
-    className: "".concat(blockClass, "__form")
+    className: "".concat(blockClass, "__form"),
+    "aria-label": title
   }, children)), /*#__PURE__*/React.createElement(ModalFooter, null, /*#__PURE__*/React.createElement(Button, {
     type: "button",
     kind: "secondary",

package/es/components/CreateSidePanel/CreateSidePanel.docs-page.js

@@ -11,7 +11,7 @@ var DocsPage = function DocsPage() {
       story: stories.Default
     }, {
       title: 'Form validation',
-      description: "All forms, including that within the `CreateSidePanel` should follow C&CS\nguidelines for form validation.\n\nThis includes the following:\n\n- The `Submit` button in the side panel should be disabled, until all required\n  inputs are filled in and valid\n- All required inputs should _only_ throw an invalid error _after_ the element\n  loses focus\n- All optional form fields should have an `(optional)` text at the end of the\n  input `labelText`. Optional should always be in parentheses\n\nYou can find more information on how to validate your form fields in\n[Carbon's Form usage page](https://www.carbondesignsystem.com/components/form/usage)."
+      description: "All forms, including that within the `CreateSidePanel` should follow @carbon/ibm-products\nguidelines for form validation.\n\nThis includes the following:\n\n- The `Submit` button in the side panel should be disabled, until all required\n  inputs are filled in and valid\n- All required inputs should _only_ throw an invalid error _after_ the element\n  loses focus\n- All optional form fields should have an `(optional)` text at the end of the\n  input `labelText`. Optional should always be in parentheses\n\nYou can find more information on how to validate your form fields in\n[Carbon's Form usage page](https://www.carbondesignsystem.com/components/form/usage)."
     }]
   });
 };

package/es/components/CreateSidePanel/CreateSidePanel.js

@@ -23,6 +23,7 @@ import { getDevtoolsProps } from '../../global/js/utils/devtools';
 // Carbon and package components we use.
 import { Form } from '@carbon/react';
 import { SidePanel } from '../SidePanel';
+import uuidv4 from '../../global/js/utils/uuidv4';
 
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(pkg.prefix, "--create-side-panel");
@@ -63,6 +64,7 @@ export var CreateSidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref)
     onClick: onRequestClose,
     kind: 'secondary'
   }];
+  var formTitleId = uuidv4();
   return selectorPageContent && /*#__PURE__*/React.createElement(SidePanel, _extends({}, rest, _objectSpread({
     open: open,
     ref: ref,
@@ -79,11 +81,13 @@ export var CreateSidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref)
     size: "md",
     actions: actions
   }), /*#__PURE__*/React.createElement("h3", {
-    className: "".concat(blockClass, "__form-title-text ").concat(blockClass, "__content-text")
+    className: "".concat(blockClass, "__form-title-text ").concat(blockClass, "__content-text"),
+    id: formTitleId
   }, formTitle), /*#__PURE__*/React.createElement("p", {
     className: "".concat(blockClass, "__form-description-text ").concat(blockClass, "__content-text")
   }, formDescription), /*#__PURE__*/React.createElement(Form, {
-    className: "".concat(blockClass, "__form")
+    className: "".concat(blockClass, "__form"),
+    "aria-labelledby": formTitleId
   }, children));
 });
 CreateSidePanel = pkg.checkComponentEnabled(CreateSidePanel, componentName);

package/es/components/CreateTearsheet/CreateTearsheet.js

@@ -196,7 +196,9 @@ export var CreateTearsheet = /*#__PURE__*/forwardRef(function (_ref, ref) {
     className: "".concat(blockClass, "__content"),
     onBlur: handleBlur,
     ref: contentRef
-  }, /*#__PURE__*/React.createElement(Form, null, /*#__PURE__*/React.createElement(StepsContext.Provider, {
+  }, /*#__PURE__*/React.createElement(Form, {
+    "aria-label": title
+  }, /*#__PURE__*/React.createElement(StepsContext.Provider, {
     value: {
       currentStep: currentStep,
       setIsDisabled: setIsDisabled,

package/es/components/CreateTearsheetNarrow/CreateTearsheetNarrow.js

@@ -18,6 +18,7 @@ import { Form } from '@carbon/react';
 import { getDevtoolsProps } from '../../global/js/utils/devtools';
 import { pkg } from '../../settings';
 import { TearsheetNarrow } from '../Tearsheet/TearsheetNarrow';
+import uuidv4 from '../../global/js/utils/uuidv4';
 
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(pkg.prefix, "--create-tearsheet-narrow");
@@ -57,6 +58,7 @@ export var CreateTearsheetNarrow = /*#__PURE__*/React.forwardRef(function (_ref,
     kind: 'secondary'
   }];
   var formTextClass = "".concat(blockClass, "__content-text");
+  var formTitleId = uuidv4();
   return /*#__PURE__*/React.createElement(TearsheetNarrow, _extends({}, rest, {
     title: title,
     description: description,
@@ -73,11 +75,13 @@ export var CreateTearsheetNarrow = /*#__PURE__*/React.forwardRef(function (_ref,
     verticalPosition: verticalPosition,
     role: "presentation"
   }, getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement("h3", {
-    className: cx("".concat(blockClass, "__form-title-text"), formTextClass)
+    className: cx("".concat(blockClass, "__form-title-text"), formTextClass),
+    id: formTitleId
   }, formTitle), /*#__PURE__*/React.createElement("p", {
     className: cx("".concat(blockClass, "__form-description-text"), formTextClass)
   }, formDescription), /*#__PURE__*/React.createElement(Form, {
-    className: "".concat(blockClass, "__form")
+    className: "".concat(blockClass, "__form"),
+    "aria-labelledby": formTitleId
   }, children));
 });
 

package/es/components/EditSidePanel/EditSidePanel.js

@@ -24,6 +24,7 @@ import { pkg /*, carbon */ } from '../../settings';
 import { Form } from '@carbon/react';
 import { SidePanel } from '../SidePanel';
 import '../../global/js/utils/props-helper';
+import uuidv4 from '../../global/js/utils/uuidv4';
 
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(pkg.prefix, "--edit-side-panel");
@@ -75,6 +76,7 @@ export var EditSidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     onClick: onRequestClose,
     kind: 'secondary'
   }];
+  var formTitleId = uuidv4();
   return /*#__PURE__*/React.createElement(SidePanel, _extends({}, rest, _objectSpread({
     open: open,
     ref: ref,
@@ -92,11 +94,13 @@ export var EditSidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     preventCloseOnClickOutside: true,
     actions: actions
   }), formTitle && /*#__PURE__*/React.createElement("h3", {
+    id: formTitleId,
     className: "".concat(blockClass, "__form-title-text ").concat(blockClass, "__content-text")
   }, formTitle), formDescription && /*#__PURE__*/React.createElement("p", {
     className: "".concat(blockClass, "__form-description-text ").concat(blockClass, "__content-text")
   }, formDescription), /*#__PURE__*/React.createElement(Form, {
-    className: "".concat(blockClass, "__form")
+    className: "".concat(blockClass, "__form"),
+    "aria-labelledby": formTitleId
   }, children));
 });
 
@@ -131,7 +135,7 @@ EditSidePanel.propTypes = {
   /**
    * Specifies a required field that provides a title for a form
    */
-  formTitle: PropTypes.node,
+  formTitle: PropTypes.node.isRequired,
   /**
    * Specifies an optional handler which is called when the CreateSidePanel
    * is closed.

package/es/components/Tearsheet/TearsheetShell.js

@@ -261,7 +261,8 @@ export var TearsheetShell = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       actions: actions,
       buttonSize: wide ? '2xl' : null,
       className: "".concat(bc, "__buttons"),
-      size: wide ? '2xl' : 'lg'
+      size: wide ? '2xl' : 'lg',
+      "aria-hidden": !open
     })))), /*#__PURE__*/React.createElement("div", {
       className: "".concat(bc, "__resize-detector"),
       ref: resizer

package/es/global/js/hooks/useResizeObserver.js

@@ -52,7 +52,7 @@ export var useResizeObserver = function useResizeObserver(ref, callback) {
       observer = null;
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [ref]);
+  }, [ref.current]);
   return {
     width: width,
     height: height

package/lib/components/APIKeyModal/APIKeyModal.js

@@ -85,18 +85,22 @@ var APIKeyModal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     previousStepButtonText = _ref.previousStepButtonText,
     showAPIKeyLabel = _ref.showAPIKeyLabel,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var _useState = (0, _react.useState)(false),
+  var _useState = (0, _react.useState)(null),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    copyError = _useState2[0],
-    setCopyError = _useState2[1];
-  var _useState3 = (0, _react.useState)(apiKeyName),
+    title = _useState2[0],
+    setTitle = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    name = _useState4[0],
-    setName = _useState4[1];
-  var _useState5 = (0, _react.useState)(0),
+    copyError = _useState4[0],
+    setCopyError = _useState4[1];
+  var _useState5 = (0, _react.useState)(apiKeyName),
     _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-    currentStep = _useState6[0],
-    setCurrentStep = _useState6[1];
+    name = _useState6[0],
+    setName = _useState6[1];
+  var _useState7 = (0, _react.useState)(0),
+    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+    currentStep = _useState8[0],
+    setCurrentStep = _useState8[1];
   var copyRef = (0, _react.useRef)();
   var apiKeyInputId = (0, _react.useRef)((0, _uuidv.default)());
   var nameInputId = (0, _react.useRef)((0, _uuidv.default)());
@@ -149,18 +153,17 @@ var APIKeyModal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     }
     return closeButtonText;
   };
-  var getTitle = function getTitle() {
+  (0, _react.useEffect)(function () {
     if (editing && editSuccess) {
-      return editSuccessTitle;
-    }
-    if (apiKeyLoaded) {
-      return generateSuccessTitle;
-    }
-    if (hasSteps) {
-      return customSteps[currentStep].title;
+      setTitle(editSuccessTitle);
+    } else if (apiKeyLoaded) {
+      setTitle(generateSuccessTitle);
+    } else if (hasSteps) {
+      setTitle(customSteps[currentStep].title);
+    } else {
+      setTitle(generateTitle);
     }
-    return generateTitle;
-  };
+  }, [apiKeyLoaded, editing, editSuccess, editSuccessTitle, hasSteps, generateSuccessTitle, generateTitle, currentStep, customSteps]);
   var setNameHandler = function setNameHandler(evt) {
     setName(evt.target.value);
   };
@@ -243,7 +246,7 @@ var APIKeyModal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     preventCloseOnClickOutside: true
   }), /*#__PURE__*/_react.default.createElement(_react2.ModalHeader, {
     className: "".concat(blockClass, "__header"),
-    title: getTitle(),
+    title: title,
     label: modalLabel
   }), /*#__PURE__*/_react.default.createElement(_react2.ModalBody, {
     className: "".concat(blockClass, "__body-container")
@@ -261,7 +264,8 @@ var APIKeyModal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     labelText: apiKeyLabel,
     id: apiKeyInputId.current
   }), (editing || !apiKeyLoaded && nameRequired) && /*#__PURE__*/_react.default.createElement(_react2.Form, {
-    onSubmit: submitHandler
+    onSubmit: submitHandler,
+    "aria-label": title
   }, /*#__PURE__*/_react.default.createElement(_react2.TextInput, {
     helperText: nameHelperText,
     placeholder: namePlaceholder,

package/lib/components/ActionBar/ActionBar.js

@@ -79,13 +79,12 @@ var ActionBar = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
       className: "".concat(blockClass, "__hidden-sizing-items"),
       "aria-hidden": true,
       ref: sizingRef
-    }, /*#__PURE__*/_react.default.createElement("span", {
-      "aria-hidden": false
-    }, /*#__PURE__*/_react.default.createElement(_ActionBarOverflowItems.ActionBarOverflowItems, {
+    }, /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_ActionBarOverflowItems.ActionBarOverflowItems, {
       className: "".concat(blockClass, "__hidden-sizing-item"),
       overflowAriaLabel: "hidden sizing overflow items",
       overflowItems: [],
-      key: "hidden-overflow-menu"
+      key: "hidden-overflow-menu",
+      tabIndex: -1
     }), actions.map(function (_ref2) {
       var key = _ref2.key,
         id = _ref2.id,
@@ -94,7 +93,8 @@ var ActionBar = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
         // ensure id is not duplicated
         "data-original-id": id,
         key: "hidden-item-".concat(key),
-        className: "".concat(blockClass, "__hidden-sizing-item")
+        className: "".concat(blockClass, "__hidden-sizing-item"),
+        tabIndex: -1
       }));
     }))));
   }, [actions]);

package/lib/components/CreateFullPage/CreateFullPage.js

@@ -19,7 +19,7 @@ var _CreateInfluencer = require("../CreateInfluencer");
 var _ActionSet = require("../ActionSet");
 var _hooks = require("../../global/js/hooks");
 var _lastIndexInArray = require("../../global/js/utils/lastIndexInArray");
-var _excluded = ["backButtonText", "cancelButtonText", "children", "className", "modalDangerButtonText", "modalDescription", "modalSecondaryButtonText", "modalTitle", "nextButtonText", "onClose", "onRequestSubmit", "firstFocusElement", "submitButtonText"];
+var _excluded = ["backButtonText", "cancelButtonText", "children", "className", "modalDangerButtonText", "modalDescription", "modalSecondaryButtonText", "modalTitle", "nextButtonText", "onClose", "onRequestSubmit", "firstFocusElement", "submitButtonText", "title"];
 /**
  * Copyright IBM Corp. 2021, 2023
  *
@@ -71,6 +71,7 @@ var CreateFullPage = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
     onRequestSubmit = _ref.onRequestSubmit,
     firstFocusElement = _ref.firstFocusElement,
     submitButtonText = _ref.submitButtonText,
+    title = _ref.title,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var _useState = (0, _react.useState)([]),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -181,7 +182,8 @@ var CreateFullPage = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "__content")
   }, /*#__PURE__*/_react.default.createElement(_react2.Form, {
-    className: "".concat(blockClass, "__form")
+    className: "".concat(blockClass, "__form"),
+    "aria-label": title
   }, /*#__PURE__*/_react.default.createElement(StepsContext.Provider, {
     value: {
       currentStep: currentStep,

package/lib/components/CreateModal/CreateModal.docs-page.js

@@ -18,7 +18,7 @@ var DocsPage = function DocsPage() {
       story: stories.Default
     }, {
       title: 'Form validation',
-      description: "All forms, including that within the `CreateModal` should follow C&CS guidelines\nfor form validation.\n\nThis includes the following:\n\n- The `Submit` button in the modal should be disabled, until all required inputs\n  are filled in and valid\n- All required inputs should _only_ throw an invalid error _after_ the element\n  loses focus\n- All optional form fields should have an `(optional)` text at the end of the\n  input `labelText`. Optional should always be in parentheses\n\nYou can find more information on how to validate your form fields in\n[Carbon's Form usage page](https://www.carbondesignsystem.com/components/form/usage)."
+      description: "All forms, including that within the `CreateModal` should follow @carbon/ibm-products guidelines\nfor form validation.\n\nThis includes the following:\n\n- The `Submit` button in the modal should be disabled, until all required inputs\n  are filled in and valid\n- All required inputs should _only_ throw an invalid error _after_ the element\n  loses focus\n- All optional form fields should have an `(optional)` text at the end of the\n  input `labelText`. Optional should always be in parentheses\n\nYou can find more information on how to validate your form fields in\n[Carbon's Form usage page](https://www.carbondesignsystem.com/components/form/usage)."
     }, {
       title: 'Overriding Carbon theme',
       description: "The design recommendation is to use a dark theme for the CreateModal if the\napplication is currently using a light theme, and vice versa. The theme applied\nto the CreateModal can easily be customized as follows:\n\nIn SCSS:",

package/lib/components/CreateModal/CreateModal.js

@@ -78,7 +78,8 @@ var CreateModal = /*#__PURE__*/_react.default.forwardRef(function (_ref2, ref) {
   }, description && /*#__PURE__*/_react.default.createElement("p", {
     className: "".concat(blockClass, "__description")
   }, description), /*#__PURE__*/_react.default.createElement(_react2.Form, {
-    className: "".concat(blockClass, "__form")
+    className: "".concat(blockClass, "__form"),
+    "aria-label": title
   }, children)), /*#__PURE__*/_react.default.createElement(_react2.ModalFooter, null, /*#__PURE__*/_react.default.createElement(_react2.Button, {
     type: "button",
     kind: "secondary",

package/lib/components/CreateSidePanel/CreateSidePanel.docs-page.js

@@ -21,7 +21,7 @@ var DocsPage = function DocsPage() {
       story: stories.Default
     }, {
       title: 'Form validation',
-      description: "All forms, including that within the `CreateSidePanel` should follow C&CS\nguidelines for form validation.\n\nThis includes the following:\n\n- The `Submit` button in the side panel should be disabled, until all required\n  inputs are filled in and valid\n- All required inputs should _only_ throw an invalid error _after_ the element\n  loses focus\n- All optional form fields should have an `(optional)` text at the end of the\n  input `labelText`. Optional should always be in parentheses\n\nYou can find more information on how to validate your form fields in\n[Carbon's Form usage page](https://www.carbondesignsystem.com/components/form/usage)."
+      description: "All forms, including that within the `CreateSidePanel` should follow @carbon/ibm-products\nguidelines for form validation.\n\nThis includes the following:\n\n- The `Submit` button in the side panel should be disabled, until all required\n  inputs are filled in and valid\n- All required inputs should _only_ throw an invalid error _after_ the element\n  loses focus\n- All optional form fields should have an `(optional)` text at the end of the\n  input `labelText`. Optional should always be in parentheses\n\nYou can find more information on how to validate your form fields in\n[Carbon's Form usage page](https://www.carbondesignsystem.com/components/form/usage)."
     }]
   });
 };

package/lib/components/CreateSidePanel/CreateSidePanel.js

@@ -15,6 +15,7 @@ var _settings = require("../../settings");
 var _devtools = require("../../global/js/utils/devtools");
 var _react2 = require("@carbon/react");
 var _SidePanel = require("../SidePanel");
+var _uuidv = _interopRequireDefault(require("../../global/js/utils/uuidv4"));
 var _excluded = ["className", "children", "disableSubmit", "formTitle", "formDescription", "onRequestClose", "onRequestSubmit", "open", "primaryButtonText", "secondaryButtonText", "selectorPageContent", "selectorPrimaryFocus", "subtitle", "title"];
 /**
  * Copyright IBM Corp. 2021, 2021
@@ -66,6 +67,7 @@ var CreateSidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
     onClick: onRequestClose,
     kind: 'secondary'
   }];
+  var formTitleId = (0, _uuidv.default)();
   return selectorPageContent && /*#__PURE__*/_react.default.createElement(_SidePanel.SidePanel, (0, _extends2.default)({}, rest, _objectSpread({
     open: open,
     ref: ref,
@@ -82,11 +84,13 @@ var CreateSidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
     size: "md",
     actions: actions
   }), /*#__PURE__*/_react.default.createElement("h3", {
-    className: "".concat(blockClass, "__form-title-text ").concat(blockClass, "__content-text")
+    className: "".concat(blockClass, "__form-title-text ").concat(blockClass, "__content-text"),
+    id: formTitleId
   }, formTitle), /*#__PURE__*/_react.default.createElement("p", {
     className: "".concat(blockClass, "__form-description-text ").concat(blockClass, "__content-text")
   }, formDescription), /*#__PURE__*/_react.default.createElement(_react2.Form, {
-    className: "".concat(blockClass, "__form")
+    className: "".concat(blockClass, "__form"),
+    "aria-labelledby": formTitleId
   }, children));
 });
 exports.CreateSidePanel = CreateSidePanel;

package/lib/components/CreateTearsheet/CreateTearsheet.js

@@ -207,7 +207,9 @@ var CreateTearsheet = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     className: "".concat(blockClass, "__content"),
     onBlur: handleBlur,
     ref: contentRef
-  }, /*#__PURE__*/_react.default.createElement(_react2.Form, null, /*#__PURE__*/_react.default.createElement(StepsContext.Provider, {
+  }, /*#__PURE__*/_react.default.createElement(_react2.Form, {
+    "aria-label": title
+  }, /*#__PURE__*/_react.default.createElement(StepsContext.Provider, {
     value: {
       currentStep: currentStep,
       setIsDisabled: setIsDisabled,

package/lib/components/CreateTearsheetNarrow/CreateTearsheetNarrow.js

@@ -14,6 +14,7 @@ var _react2 = require("@carbon/react");
 var _devtools = require("../../global/js/utils/devtools");
 var _settings = require("../../settings");
 var _TearsheetNarrow = require("../Tearsheet/TearsheetNarrow");
+var _uuidv = _interopRequireDefault(require("../../global/js/utils/uuidv4"));
 var _excluded = ["children", "className", "description", "disableSubmit", "formDescription", "formTitle", "label", "open", "onRequestClose", "onRequestSubmit", "primaryButtonText", "secondaryButtonText", "selectorPrimaryFocus", "title", "verticalPosition"];
 /**
  * Copyright IBM Corp. 2021, 2021
@@ -61,6 +62,7 @@ var CreateTearsheetNarrow = /*#__PURE__*/_react.default.forwardRef(function (_re
     kind: 'secondary'
   }];
   var formTextClass = "".concat(blockClass, "__content-text");
+  var formTitleId = (0, _uuidv.default)();
   return /*#__PURE__*/_react.default.createElement(_TearsheetNarrow.TearsheetNarrow, (0, _extends2.default)({}, rest, {
     title: title,
     description: description,
@@ -77,11 +79,13 @@ var CreateTearsheetNarrow = /*#__PURE__*/_react.default.forwardRef(function (_re
     verticalPosition: verticalPosition,
     role: "presentation"
   }, (0, _devtools.getDevtoolsProps)(componentName)), /*#__PURE__*/_react.default.createElement("h3", {
-    className: (0, _classnames.default)("".concat(blockClass, "__form-title-text"), formTextClass)
+    className: (0, _classnames.default)("".concat(blockClass, "__form-title-text"), formTextClass),
+    id: formTitleId
   }, formTitle), /*#__PURE__*/_react.default.createElement("p", {
     className: (0, _classnames.default)("".concat(blockClass, "__form-description-text"), formTextClass)
   }, formDescription), /*#__PURE__*/_react.default.createElement(_react2.Form, {
-    className: "".concat(blockClass, "__form")
+    className: "".concat(blockClass, "__form"),
+    "aria-labelledby": formTitleId
   }, children));
 });
 

package/lib/components/EditSidePanel/EditSidePanel.js

@@ -16,6 +16,7 @@ var _settings = require("../../settings");
 var _react2 = require("@carbon/react");
 var _SidePanel = require("../SidePanel");
 require("../../global/js/utils/props-helper");
+var _uuidv = _interopRequireDefault(require("../../global/js/utils/uuidv4"));
 var _excluded = ["children", "className", "disableSubmit", "formTitle", "formDescription", "onRequestClose", "onRequestSubmit", "open", "placement", "primaryButtonText", "secondaryButtonText", "selectorPrimaryFocus", "selectorPageContent", "size", "slideIn", "subtitle", "title"];
 /**
  * Copyright IBM Corp. 2021, 2021
@@ -78,6 +79,7 @@ var EditSidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
     onClick: onRequestClose,
     kind: 'secondary'
   }];
+  var formTitleId = (0, _uuidv.default)();
   return /*#__PURE__*/_react.default.createElement(_SidePanel.SidePanel, (0, _extends2.default)({}, rest, _objectSpread({
     open: open,
     ref: ref,
@@ -95,11 +97,13 @@ var EditSidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
     preventCloseOnClickOutside: true,
     actions: actions
   }), formTitle && /*#__PURE__*/_react.default.createElement("h3", {
+    id: formTitleId,
     className: "".concat(blockClass, "__form-title-text ").concat(blockClass, "__content-text")
   }, formTitle), formDescription && /*#__PURE__*/_react.default.createElement("p", {
     className: "".concat(blockClass, "__form-description-text ").concat(blockClass, "__content-text")
   }, formDescription), /*#__PURE__*/_react.default.createElement(_react2.Form, {
-    className: "".concat(blockClass, "__form")
+    className: "".concat(blockClass, "__form"),
+    "aria-labelledby": formTitleId
   }, children));
 });
 
@@ -135,7 +139,7 @@ EditSidePanel.propTypes = {
   /**
    * Specifies a required field that provides a title for a form
    */
-  formTitle: _propTypes.default.node,
+  formTitle: _propTypes.default.node.isRequired,
   /**
    * Specifies an optional handler which is called when the CreateSidePanel
    * is closed.

package/lib/components/Tearsheet/TearsheetShell.js

@@ -270,7 +270,8 @@ var TearsheetShell = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
       actions: actions,
       buttonSize: wide ? '2xl' : null,
       className: "".concat(bc, "__buttons"),
-      size: wide ? '2xl' : 'lg'
+      size: wide ? '2xl' : 'lg',
+      "aria-hidden": !open
     })))), /*#__PURE__*/_react.default.createElement("div", {
       className: "".concat(bc, "__resize-detector"),
       ref: resizer

package/lib/global/js/hooks/useResizeObserver.js

@@ -60,7 +60,7 @@ var useResizeObserver = function useResizeObserver(ref, callback) {
       observer = null;
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [ref]);
+  }, [ref.current]);
   return {
     width: width,
     height: height

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.3.0",
+  "version": "2.3.2",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -88,11 +88,11 @@
     "@carbon/grid": "^11.15.0",
     "@carbon/layout": "^11.15.0",
     "@carbon/motion": "^11.12.0",
-    "@carbon/react": "~1.31.3",
+    "@carbon/react": "^1.31.3",
     "@carbon/themes": "^11.20.0",
     "@carbon/type": "^11.19.0",
     "react": "^16.8.6 || ^17.0.1",
     "react-dom": "^16.8.6 || ^17.0.1"
   },
-  "gitHead": "921bd04d38883be8c837181166e3b8156210a24f"
+  "gitHead": "d10acc630bdeb946d794ea2430d5df1ebf650c14"
 }