@carbon/ibm-products 1.54.2 → 1.55.0

package/es/global/js/package-settings.js

@@ -72,6 +72,8 @@ var defaults = {
     EditUpdateCards: false,
     ButtonMenu: false,
     // Novice to pro components not yet reviewed and released:
+    InlineTip: false,
+    Guidebanner: false,
     NonLinearReading: false
     /* new component flags here - comment used by generate CLI */
   },

package/lib/components/APIKeyModal/APIKeyModal.js

@@ -80,18 +80,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)());
@@ -140,18 +144,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);
   };
@@ -234,7 +237,7 @@ var APIKeyModal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     preventCloseOnClickOutside: true
   }), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.ModalHeader, {
     className: "".concat(blockClass, "__header"),
-    title: getTitle(),
+    title: title,
     label: modalLabel
   }), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.ModalBody, {
     className: "".concat(blockClass, "__body-container")
@@ -252,7 +255,8 @@ var APIKeyModal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     labelText: apiKeyLabel,
     id: apiKeyInputId.current
   }), (editing || !apiKeyLoaded && nameRequired) && /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Form, {
-    onSubmit: submitHandler
+    onSubmit: submitHandler,
+    "aria-label": title
   }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.TextInput, {
     helperText: nameHelperText,
     placeholder: namePlaceholder,

package/lib/components/ActionBar/ActionBar.js

@@ -71,13 +71,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,
@@ -86,7 +85,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/Carousel/Carousel.js

@@ -0,0 +1,238 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Carousel = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _lodash = require("lodash");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _CarouselItem = require("./CarouselItem");
+var _utils = require("./utils");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _devtools = require("../../global/js/utils/devtools");
+var _settings = require("../../settings");
+var _excluded = ["children", "className", "disableArrowScroll", "fadedEdgeColor", "scrollableChange", "scrollTune"];
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+// Carbon and package components we use.
+/* TODO: @import(s) of carbon components and other package components. */
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+var blockClass = "".concat(_settings.pkg.prefix, "--carousel");
+var componentName = 'Carousel';
+
+// Default values for props
+var defaults = {
+  disableArrowScroll: false,
+  scrollTune: 0
+};
+
+/**
+ * The Carousel acts as a scaffold for other Novice to Pro content.
+ *
+ * This component is not intended for general use.
+ */
+var Carousel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    _ref$disableArrowScro = _ref.disableArrowScroll,
+    disableArrowScroll = _ref$disableArrowScro === void 0 ? defaults.disableArrowScroll : _ref$disableArrowScro,
+    fadedEdgeColor = _ref.fadedEdgeColor,
+    scrollableChange = _ref.scrollableChange,
+    _ref$scrollTune = _ref.scrollTune,
+    scrollTune = _ref$scrollTune === void 0 ? defaults.scrollTune : _ref$scrollTune,
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var carouselScrollPromiseDelay = 700;
+  var totalViews = _react.default.Children.count(children) || 1;
+  var leftFadedEdgeColor = (fadedEdgeColor === null || fadedEdgeColor === void 0 ? void 0 : fadedEdgeColor.left) || fadedEdgeColor;
+  var rightFadedEdgeColor = (fadedEdgeColor === null || fadedEdgeColor === void 0 ? void 0 : fadedEdgeColor.right) || fadedEdgeColor;
+  var _useState = (0, _react.useState)(0),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    currentViewID = _useState2[0],
+    _setCurrentViewID = _useState2[1];
+  var currentViewIDRef = (0, _react.useRef)(currentViewID);
+  var scrollRef = (0, _react.useRef)();
+  var carouselRef = (0, _react.useRef)();
+  var isScrollable = (0, _utils.useIsOverflow)(scrollRef);
+  // Scrolling has no complete callback, nor does it return a promise.
+  // Since there is no way to tell when a scroll is finished we can set a timeout.
+  // Chrome appears to be the slowest implementation.
+  // Here is the spec: https://drafts.csswg.org/cssom-view/#concept-smooth-scroll
+  // found issue: https://github.com/w3c/csswg-drafts/issues/3744
+
+  var scrollNext = (0, _react.useCallback)(function () {
+    return scrollToView(currentViewID + 1);
+  }, [currentViewID, scrollToView]);
+  var scrollPrev = (0, _react.useCallback)(function () {
+    return scrollToView(currentViewID - 1);
+  }, [currentViewID, scrollToView]);
+  var scrollToView = (0, _react.useCallback)(function (viewID) {
+    if (!isScrolling) {
+      var _scrollRef$current;
+      var targetViewID = (0, _lodash.clamp)(viewID, 0, totalViews - 1);
+      setCurrentViewID(targetViewID);
+      setIsScrolling(true);
+      scrollRef.current.scrollLeft = ((_scrollRef$current = scrollRef.current) === null || _scrollRef$current === void 0 ? void 0 : _scrollRef$current.offsetWidth) * targetViewID + scrollTune;
+      return scrollPromise();
+    }
+    return new Promise(function (resolve) {
+      return resolveScroll(resolve);
+    });
+  }, [isScrolling, resolveScroll, scrollPromise, scrollTune, totalViews]);
+  var scrollPromise = (0, _react.useCallback)(function () {
+    return new Promise(function (resolve) {
+      setTimeout(function () {
+        return resolveScroll(resolve);
+      }, carouselScrollPromiseDelay);
+    });
+  }, [resolveScroll]);
+  var resolveScroll = (0, _react.useCallback)(function (resolve) {
+    setIsScrolling(false);
+    var percentage = scrollPosition() / maxScroll();
+    return resolve(parseFloat(percentage.toFixed(2)));
+  }, []);
+  var scrollPosition = function scrollPosition() {
+    var _scrollRef$current2;
+    return (_scrollRef$current2 = scrollRef.current) === null || _scrollRef$current2 === void 0 ? void 0 : _scrollRef$current2.scrollLeft;
+  };
+  var maxScroll = function maxScroll() {
+    var _scrollRef$current3, _scrollRef$current4;
+    return ((_scrollRef$current3 = scrollRef.current) === null || _scrollRef$current3 === void 0 ? void 0 : _scrollRef$current3.scrollWidth) - ((_scrollRef$current4 = scrollRef.current) === null || _scrollRef$current4 === void 0 ? void 0 : _scrollRef$current4.clientWidth);
+  };
+  var handleResize = (0, _lodash.debounce)(function () {
+    scrollToView(currentViewIDRef.current);
+  }, 200);
+  var setCurrentViewID = function setCurrentViewID(val) {
+    currentViewIDRef.current = val;
+    _setCurrentViewID(val);
+  };
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    isScrolling = _useState4[0],
+    setIsScrolling = _useState4[1];
+
+  // EFFECTS
+  (0, _utils.useWindowEvent)('resize', handleResize);
+  (0, _react.useEffect)(function () {
+    if (scrollableChange) {
+      scrollableChange(isScrollable);
+    }
+  }, [isScrollable, scrollableChange]);
+  (0, _react.useEffect)(function () {
+    function updateScrollPosition(event) {
+      // update the scroll position
+      event.stopPropagation();
+      event.preventDefault();
+      event.cancelBubble = false;
+    }
+    var scrollDiv = scrollRef.current;
+    if (scrollDiv) {
+      scrollDiv.addEventListener('wheel', updateScrollPosition, {
+        passive: false
+      });
+      return function () {
+        scrollDiv.removeEventListener('wheel', updateScrollPosition, {
+          passive: false
+        });
+      };
+    }
+  }, []);
+  (0, _react.useEffect)(function () {
+    function keypress(event) {
+      var key = event.key;
+      if ((key === 'ArrowLeft' || key === 'ArrowRight') && disableArrowScroll) {
+        event.stopPropagation();
+        event.preventDefault();
+        event.cancelBubble = false;
+      }
+    }
+    var outerDiv = carouselRef.current;
+    if (outerDiv) {
+      outerDiv.addEventListener('keydown', keypress);
+      return function () {
+        return outerDiv.removeEventListener('keydown', keypress);
+      };
+    }
+  }, [disableArrowScroll]);
+  (0, _react.useImperativeHandle)(ref, function () {
+    return {
+      scrollNext: scrollNext,
+      scrollPrev: scrollPrev,
+      scrollToView: scrollToView,
+      maxScroll: maxScroll
+    };
+  }, [scrollNext, scrollPrev, scrollToView]);
+  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, rest, {
+    tabIndex: -1,
+    className: (0, _classnames.default)(blockClass, className),
+    ref: carouselRef,
+    role: "main"
+  }, (0, _devtools.getDevtoolsProps)(componentName)), /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)("".concat(blockClass, "__elements-container"))
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(blockClass, "__elements"),
+    ref: scrollRef
+  }, _react.default.Children.map(children, function (child) {
+    return /*#__PURE__*/_react.default.createElement(_CarouselItem.CarouselItem, null, child);
+  })), leftFadedEdgeColor && /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(blockClass, "__elements-container--scrolled"),
+    style: {
+      background: "linear-gradient(90deg, ".concat(leftFadedEdgeColor, ", transparent)")
+    }
+  }), rightFadedEdgeColor && /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(blockClass, "__elements-container--scroll-max"),
+    style: {
+      background: "linear-gradient(270deg, ".concat(rightFadedEdgeColor, ", transparent)")
+    }
+  })));
+});
+
+// The display name of the component, used by React. Note that displayName
+// is used in preference to relying on function.name.
+exports.Carousel = Carousel;
+Carousel.displayName = componentName;
+
+// The types and DocGen commentary for the component props,
+// in alphabetical order (for consistency).
+// See https://www.npmjs.com/package/prop-types#usage.
+Carousel.propTypes = {
+  /**
+   * Provide the contents of the Carousel.
+   */
+  children: _propTypes.default.node.isRequired,
+  /**
+   * Provide an optional class to be applied to the containing node.
+   */
+  className: _propTypes.default.string,
+  /**
+   * Disables the ability of the Carousel to scroll
+   * use a keyboard's left and right arrow keys.
+   */
+  disableArrowScroll: _propTypes.default.bool,
+  /**
+   * Enables the edges of the component to have faded styling.
+   *
+   * Pass a single string to specify the same color for left and right.
+   *
+   * Pass `{ left: $color1, right: $color2 }` to specify different colors.
+   */
+  fadedEdgeColor: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.shape({
+    left: _propTypes.default.string,
+    right: _propTypes.default.string
+  })]),
+  /**
+   * Determines how much of the Carousel moves into view on rotation.
+   */
+  scrollTune: _propTypes.default.number,
+  /**
+   * An optional callback function that returns `true`
+   * when the carousel has completed scrolling a single item.
+   */
+  scrollableChange: _propTypes.default.func
+};

package/lib/components/Carousel/CarouselItem.js

@@ -0,0 +1,66 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CarouselItem = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _utils = require("./utils");
+var _devtools = require("../../global/js/utils/devtools");
+var _settings = require("../../settings");
+var _excluded = ["children", "className"];
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+// Carbon and package components we use.
+/* TODO: @import(s) of carbon components and other package components. */
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+var blockClass = "".concat(_settings.pkg.prefix, "--carousel__item");
+var componentName = 'CarouselItem';
+
+/**
+ * TODO: A description of the component.
+ */
+var CarouselItem = function CarouselItem(_ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var itemRef = (0, _react.useRef)();
+  var isInView = (0, _utils.useIntersection)(itemRef, 0.85);
+  (0, _react.useEffect)(function () {
+    var _itemRef$current;
+    var matches = (_itemRef$current = itemRef.current) === null || _itemRef$current === void 0 ? void 0 : _itemRef$current.querySelectorAll('a, button, [role="button"], [tabindex]');
+    if (matches) {
+      var ti = isInView ? 0 : -1;
+      (0, _toConsumableArray2.default)(matches).forEach(function (match) {
+        match.tabIndex = ti;
+      });
+    }
+  }, [isInView]);
+  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, rest, {
+    className: (0, _classnames.default)(blockClass, className),
+    ref: itemRef
+  }, (0, _devtools.getDevtoolsProps)(componentName)), children);
+};
+
+// The types and DocGen commentary for the component props,
+// in alphabetical order (for consistency).
+// See https://www.npmjs.com/package/prop-types#usage.
+exports.CarouselItem = CarouselItem;
+CarouselItem.propTypes = {
+  /**
+   * Provide the contents of the CarouselItem.
+   */
+  children: _propTypes.default.node.isRequired,
+  /**
+   * Provide an optional class to be applied to the containing node.
+   */
+  className: _propTypes.default.string
+};

package/lib/components/Carousel/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Carousel", {
+  enumerable: true,
+  get: function get() {
+    return _Carousel.Carousel;
+  }
+});
+Object.defineProperty(exports, "CarouselItem", {
+  enumerable: true,
+  get: function get() {
+    return _CarouselItem.CarouselItem;
+  }
+});
+var _Carousel = require("./Carousel");
+var _CarouselItem = require("./CarouselItem");

package/lib/components/Carousel/utils.js

@@ -0,0 +1,108 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useWindowEvent = exports.useIsOverflow = exports.useIntersection = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+/**
+ * Copyright IBM Corp. 2023, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+var useIntersection = function useIntersection(element, threshold) {
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    isVisible = _useState2[0],
+    setState = _useState2[1];
+  (0, _react.useEffect)(function () {
+    var el = element.current;
+    var observer = new IntersectionObserver(function (_ref) {
+      var _ref2 = (0, _slicedToArray2.default)(_ref, 1),
+        entry = _ref2[0];
+      setState(entry.isIntersecting);
+    }, {
+      threshold: threshold
+    });
+    el && observer.observe(el);
+    return function () {
+      return observer.unobserve(el);
+    };
+  }, [element, threshold]);
+  return isVisible;
+};
+exports.useIntersection = useIntersection;
+var useIsOverflow = function useIsOverflow(ref) {
+  var _useState3 = (0, _react.useState)(),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    isScrollable = _useState4[0],
+    setIsScrollable = _useState4[1];
+  var _useState5 = (0, _react.useState)(),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    mutationObserver = _useState6[0],
+    setMutationObserver = _useState6[1];
+  var _useState7 = (0, _react.useState)(),
+    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+    resizeObserver = _useState8[0],
+    setResizeObserver = _useState8[1];
+  var checkOverflow = (0, _react.useCallback)(function () {
+    if (!ref.current) {
+      return;
+    }
+    var hasOverflow = ref.current.scrollWidth > ref.current.clientWidth;
+    setIsScrollable(hasOverflow);
+  }, [ref]);
+  (0, _react.useEffect)(function () {
+    if (!mutationObserver) {
+      return;
+    }
+    return function () {
+      if (mutationObserver) {
+        mutationObserver.disconnect();
+      }
+      if (resizeObserver) {
+        resizeObserver.disconnect();
+      }
+    };
+  });
+  (0, _react.useLayoutEffect)(function () {
+    var current = ref.current;
+    if (current) {
+      if ('ResizeObserver' in window && !resizeObserver) {
+        setResizeObserver(new ResizeObserver(checkOverflow).observe(current));
+      }
+      if ('MutationObserver' in window && !mutationObserver) {
+        setMutationObserver(new MutationObserver(checkOverflow).observe(current, {
+          attributes: false,
+          childList: true,
+          subtree: false
+        }));
+      }
+      checkOverflow();
+    }
+  }, [ref, checkOverflow, mutationObserver, resizeObserver]);
+  return isScrollable;
+};
+exports.useIsOverflow = useIsOverflow;
+var useWindowEvent = function useWindowEvent(eventName, callback) {
+  var savedCallback = (0, _react.useRef)(null);
+  (0, _react.useEffect)(function () {
+    savedCallback.current = callback;
+  });
+  (0, _react.useEffect)(function () {
+    function handler(event) {
+      if (savedCallback.current) {
+        savedCallback.current(event);
+      }
+    }
+    window.addEventListener(eventName, handler);
+    return function () {
+      window.removeEventListener(eventName, handler);
+    };
+  }, [eventName]);
+};
+exports.useWindowEvent = useWindowEvent;

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"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var blockClass = "".concat(_settings.pkg.prefix, "--create-full-page");
@@ -49,6 +49,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),
@@ -159,7 +160,8 @@ var CreateFullPage = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "__content")
   }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Grid, null, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.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.js

@@ -63,7 +63,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(_carbonComponentsReact.Form, {
-    className: "".concat(blockClass, "__form")
+    className: "".concat(blockClass, "__form"),
+    "aria-label": title
   }, children)), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.ModalFooter, null, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
     type: "button",
     kind: "secondary",

package/lib/components/CreateSidePanel/CreateSidePanel.js

@@ -15,6 +15,7 @@ var _settings = require("../../settings");
 var _devtools = require("../../global/js/utils/devtools");
 var _carbonComponentsReact = require("carbon-components-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"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -57,6 +58,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,
@@ -73,11 +75,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(_carbonComponentsReact.Form, {
-    className: "".concat(blockClass, "__form")
+    className: "".concat(blockClass, "__form"),
+    "aria-labelledby": formTitleId
   }, children));
 });
 exports.CreateSidePanel = CreateSidePanel;

package/lib/components/CreateTearsheet/CreateTearsheet.js

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