@carbon/ibm-products 2.0.0-rc.2 → 2.0.0-rc.21

package/es/components/AddSelect/AddSelectSort.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 //
-// Copyright IBM Corp. 2022
+// Copyright IBM Corp. 2022, 2022
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
@@ -9,7 +9,7 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import React from 'react';
 import PropTypes from 'prop-types';
 import { OverflowMenu, OverflowMenuItem } from '@carbon/react';
-import { ArrowsVertical, ArrowUp, ArrowDown } from '@carbon/icons-react';
+import { ArrowsVertical, ArrowUp, ArrowDown } from '@carbon/react/icons';
 import { pkg } from '../../settings';
 var blockClass = "".concat(pkg.prefix, "--add-select-sort");
 var componentName = 'AddSelectSort';

package/es/components/AddSelect/add-select-utils.js

@@ -6,6 +6,13 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 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) { _defineProperty(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; }
 
+//
+// Copyright IBM Corp. 2022, 2022
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
 /**
  * to be able to more easily and efficiently the child entries the data needs to be
  * normalized. this function recursively goes through the data array to build a single
@@ -85,7 +92,7 @@ export var getFilteredItems = function getFilteredItems(useNormalizedItems, norm
 
     if (searchTerm || globalFiltersApplied) {
       var results = itemIds.reduce(function (prev, cur) {
-        if (normalizedItems[cur].title.toLowerCase().includes(searchTerm)) {
+        if (normalizedItems[cur].title.toLowerCase().includes(searchTerm.toLowerCase())) {
           prev.push(normalizedItems[cur]);
         }
 
@@ -132,7 +139,7 @@ export var getFilteredItems = function getFilteredItems(useNormalizedItems, norm
   } else {
     if (searchTerm) {
       return items.entries.filter(function (item) {
-        return item.title.toLowerCase().includes(searchTerm);
+        return item.title.toLowerCase().includes(searchTerm.toLowerCase());
       });
     }
 

package/es/components/AddSelect/hooks/useItemSort.js

@@ -1,4 +1,10 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+//
+// Copyright IBM Corp. 2022, 2022
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
 import { useState } from 'react';
 export var useItemSort = function useItemSort() {
   var _useState = useState(''),

package/es/components/AddSelect/hooks/useParentSelect.js

@@ -1,4 +1,10 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+//
+// Copyright IBM Corp. 2022, 2022
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
 import { useState } from 'react';
 
 var useParentSelect = function useParentSelect() {

package/es/components/AddSelect/hooks/usePath.js

@@ -6,7 +6,13 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 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) { _defineProperty(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; }
 
-import { useState } from 'react';
+//
+// Copyright IBM Corp. 2022, 2022
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+import { useState, useEffect } from 'react';
 
 var usePath = function usePath() {
   var itemsLabel = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
@@ -19,6 +25,13 @@ var usePath = function usePath() {
       path = _useState2[0],
       setPath = _useState2[1];
 
+  useEffect(function () {
+    setPath([{
+      id: 'base_of_path',
+      title: itemsLabel
+    }]);
+  }, [itemsLabel]);
+
   var handler = function handler(id, title, parentId) {
     if (path.find(function (entry) {
       return entry.id === id;
@@ -56,10 +69,18 @@ var usePath = function usePath() {
     setPath(_toConsumableArray(pathCopy));
   };
 
+  var resetPath = function resetPath() {
+    setPath([{
+      id: 'base_of_path',
+      title: itemsLabel
+    }]);
+  };
+
   return {
     path: path,
     setPath: handler,
-    pathOnclick: pathClickHandler
+    pathOnclick: pathClickHandler,
+    resetPath: resetPath
   };
 };
 

package/es/components/AddSelect/index.js

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2021
+// Copyright IBM Corp. 2022, 2022
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.

package/es/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js

@@ -23,13 +23,11 @@ import React, { useState, useEffect, useRef } from 'react'; // Other standard im
 
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import { Link, IconButton, usePrefix } from '@carbon/react';
-import { pkg } from '../../settings';
-import { useResizeDetector } from 'react-resize-detector';
-import { ArrowLeft } from '@carbon/icons-react'; // Carbon and package components we use.
+import { useResizeDetector } from 'react-resize-detector'; // Carbon and package components we use.
 
-import { Breadcrumb, BreadcrumbItem, OverflowMenu, OverflowMenuItem } from '@carbon/react';
-import { OverflowMenuHorizontal } from '@carbon/icons-react';
+import { Breadcrumb, BreadcrumbItem, Link, IconButton, OverflowMenu, OverflowMenuItem, usePrefix } from '@carbon/react';
+import { pkg } from '../../settings';
+import { ArrowLeft, OverflowMenuHorizontal } from '@carbon/react/icons';
 import uuidv4 from '../../global/js/utils/uuidv4';
 import '../../global/js/utils/props-helper'; // The block part of our conventional BEM class names (blockClass__E--M).
 

package/es/components/ButtonMenu/ButtonMenu.js

@@ -54,6 +54,7 @@ export var ButtonMenu = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     ),
     ariaLabel: menuAriaLabel,
     menuOptionsClass: cx("".concat(blockClass, "__options"), menuOptionsClass),
+    size: size,
     renderIcon: function renderIcon() {
       return /*#__PURE__*/React.createElement("div", {
         className: cx(["".concat(blockClass, "__trigger"), "".concat(carbonPrefix, "--btn"), "".concat(carbonPrefix, "--btn--").concat(kind), "".concat(carbonPrefix, "--btn--").concat(size)])
@@ -120,8 +121,8 @@ ButtonMenu.propTypes = {
   renderIcon: Button.propTypes.renderIcon,
 
   /**
-   * The size of the button for the menu trigger. The values can be any valid
-   * value for the carbon Button component 'size' prop.
+   * The size of the button for the menu trigger.
+   * The menu button supports: sm, md, lg
    */
-  size: Button.propTypes.size
+  size: PropTypes.oneOf(['sm', 'md', 'lg'])
 };

package/es/components/Card/Card.js

@@ -1,7 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["actionIcons", "actionsPlacement", "children", "className", "clickZone", "description", "label", "media", "mediaPosition", "onClick", "onKeyDown", "onPrimaryButtonClick", "overflowActions", "overflowAriaLabel", "onSecondaryButtonClick", "pictogram", "primaryButtonHref", "primaryButtonIcon", "primaryButtonKind", "primaryButtonText", "productive", "secondaryButtonHref", "secondaryButtonIcon", "secondaryButtonKind", "secondaryButtonText", "title", "titleSize"],
+var _excluded = ["actionIcons", "actionsPlacement", "children", "className", "clickZone", "description", "label", "media", "mediaPosition", "onClick", "onKeyDown", "onPrimaryButtonClick", "overflowActions", "overflowAriaLabel", "onSecondaryButtonClick", "pictogram", "primaryButtonHref", "primaryButtonIcon", "primaryButtonKind", "primaryButtonPlacement", "primaryButtonText", "productive", "secondaryButtonHref", "secondaryButtonIcon", "secondaryButtonKind", "secondaryButtonText", "title", "titleSize"],
     _excluded2 = ["id"],
     _excluded3 = ["id", "icon", "onClick", "iconDescription", "href"];
 
@@ -31,6 +31,7 @@ var defaults = {
   mediaPosition: 'top',
   overflowActions: Object.freeze([]),
   primaryButtonKind: 'primary',
+  primaryButtonPlacement: 'bottom',
   productive: false,
   secondaryButtonKind: 'secondary',
   titleSize: 'default'
@@ -61,6 +62,8 @@ export var Card = /*#__PURE__*/forwardRef(function (_ref, ref) {
       primaryButtonIcon = _ref.primaryButtonIcon,
       _ref$primaryButtonKin = _ref.primaryButtonKind,
       primaryButtonKind = _ref$primaryButtonKin === void 0 ? defaults.primaryButtonKind : _ref$primaryButtonKin,
+      _ref$primaryButtonPla = _ref.primaryButtonPlacement,
+      primaryButtonPlacement = _ref$primaryButtonPla === void 0 ? defaults.primaryButtonPlacement : _ref$primaryButtonPla,
       primaryButtonText = _ref.primaryButtonText,
       _ref$productive = _ref.productive,
       productive = _ref$productive === void 0 ? defaults.productive : _ref$productive,
@@ -75,9 +78,9 @@ export var Card = /*#__PURE__*/forwardRef(function (_ref, ref) {
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var blockClass = "".concat(pkg.prefix, "--card");
-  var hasActions = actionIcons.length > 0 || overflowActions.length > 0;
+  var hasActions = actionIcons.length > 0 || overflowActions.length > 0 || !!primaryButtonText && primaryButtonPlacement === 'top';
   var hasFooterActions = hasActions && actionsPlacement === 'bottom';
-  var hasFooterButton = !!secondaryButtonText || !!primaryButtonText;
+  var hasFooterButton = !!secondaryButtonText || !!primaryButtonText && primaryButtonPlacement === 'bottom';
   var hasBottomBar = hasFooterActions || hasFooterButton;
   var hasClickEvent = !!onClick || !!onKeyDown;
   var clickableProps = {
@@ -178,10 +181,15 @@ export var Card = /*#__PURE__*/forwardRef(function (_ref, ref) {
 
   var getHeaderProps = function getHeaderProps() {
     return {
-      actions: getActions(),
+      actions: actionsPlacement === 'top' ? getActions() : '',
+      noActionIcons: actionIcons.length > 0 && actionsPlacement === 'top' ? false : true,
       actionsPlacement: actionsPlacement,
+      onPrimaryButtonClick: onPrimaryButtonClick,
+      primaryButtonIcon: primaryButtonIcon,
+      primaryButtonPlacement: primaryButtonPlacement,
+      primaryButtonText: primaryButtonText,
       description: description,
-      hasActions: hasActions && actionsPlacement === 'top',
+      hasActions: hasActions,
       label: label,
       title: title,
       titleSize: titleSize
@@ -200,7 +208,7 @@ export var Card = /*#__PURE__*/forwardRef(function (_ref, ref) {
 
   var getFooterProps = function getFooterProps() {
     return {
-      actions: getActions(),
+      actions: actionsPlacement === 'bottom' ? getActions() : '',
       actionsPlacement: actionsPlacement,
       hasActions: hasFooterActions,
       hasButton: hasFooterButton,
@@ -209,6 +217,7 @@ export var Card = /*#__PURE__*/forwardRef(function (_ref, ref) {
       primaryButtonHref: primaryButtonHref,
       primaryButtonIcon: primaryButtonIcon,
       primaryButtonKind: primaryButtonKind,
+      primaryButtonPlacement: primaryButtonPlacement,
       primaryButtonText: primaryButtonText,
       productive: productive,
       secondaryButtonHref: secondaryButtonHref,
@@ -258,6 +267,7 @@ Card.propTypes = {
   primaryButtonHref: PropTypes.string,
   primaryButtonIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   primaryButtonKind: PropTypes.oneOf(['primary', 'ghost']),
+  primaryButtonPlacement: PropTypes.oneOf(['top', 'bottom']),
   primaryButtonText: PropTypes.node,
   productive: PropTypes.bool,
   secondaryButtonHref: PropTypes.string,

package/es/components/Card/CardFooter.js

@@ -28,6 +28,7 @@ export var CardFooter = function CardFooter(_ref) {
       primaryButtonIcon = _ref.primaryButtonIcon,
       _ref$primaryButtonKin = _ref.primaryButtonKind,
       primaryButtonKind = _ref$primaryButtonKin === void 0 ? defaults.primaryButtonKind : _ref$primaryButtonKin,
+      primaryButtonPlacement = _ref.primaryButtonPlacement,
       primaryButtonText = _ref.primaryButtonText,
       _ref$productive = _ref.productive,
       productive = _ref$productive === void 0 ? defaults.productive : _ref$productive,
@@ -47,7 +48,7 @@ export var CardFooter = function CardFooter(_ref) {
     size: "md",
     renderIcon: secondaryButtonIcon,
     href: secondaryButtonHref
-  }, secondaryButtonText), primaryButtonText && /*#__PURE__*/React.createElement(Button, {
+  }, secondaryButtonText), primaryButtonText && primaryButtonPlacement === 'bottom' && /*#__PURE__*/React.createElement(Button, {
     kind: productive ? 'ghost' : primaryButtonKind,
     onClick: onPrimaryButtonClick,
     size: "md",
@@ -66,6 +67,7 @@ CardFooter.propTypes = {
   primaryButtonHref: PropTypes.string,
   primaryButtonIcon: PropTypes.string,
   primaryButtonKind: PropTypes.oneOf(['primary', 'ghost']),
+  primaryButtonPlacement: PropTypes.oneOf(['top', 'bottom']),
   primaryButtonText: PropTypes.string,
   productive: PropTypes.bool,
   secondaryButtonHref: PropTypes.string,

package/es/components/Card/CardHeader.js

@@ -9,6 +9,7 @@ import React from 'react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import { pkg } from '../../settings';
+import { Button } from '@carbon/react';
 var componentName = 'CardHeader';
 var defaults = {
   hasActions: false,
@@ -18,6 +19,11 @@ export var CardHeader = function CardHeader(_ref) {
   var _cx;
 
   var actions = _ref.actions,
+      noActionIcons = _ref.noActionIcons,
+      onPrimaryButtonClick = _ref.onPrimaryButtonClick,
+      primaryButtonIcon = _ref.primaryButtonIcon,
+      primaryButtonPlacement = _ref.primaryButtonPlacement,
+      primaryButtonText = _ref.primaryButtonText,
       description = _ref.description,
       _ref$hasActions = _ref.hasActions,
       hasActions = _ref$hasActions === void 0 ? defaults.hasActions : _ref$hasActions,
@@ -28,6 +34,8 @@ export var CardHeader = function CardHeader(_ref) {
   var blockClass = "".concat(pkg.prefix, "--card");
   var headerClass = "".concat(blockClass, "__header");
   var headerClasses = cx(headerClass, (_cx = {}, _defineProperty(_cx, "".concat(headerClass, "-label-only"), label && !title && !description), _defineProperty(_cx, "".concat(headerClass, "-has-label"), !!label), _defineProperty(_cx, "".concat(blockClass, "__title-lg"), titleSize === 'large'), _cx));
+  var actionGhostButton = "".concat(blockClass, "__actions-header-ghost-button");
+  var actionGhostButtonClass = cx(actionGhostButton, _defineProperty({}, "".concat(actionGhostButton, "--only"), noActionIcons));
   return /*#__PURE__*/React.createElement("div", {
     className: headerClasses
   }, /*#__PURE__*/React.createElement("div", {
@@ -42,13 +50,24 @@ export var CardHeader = function CardHeader(_ref) {
     className: "".concat(blockClass, "__description")
   }, description)), hasActions && /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass, "__actions ").concat(blockClass, "__actions-header")
-  }, actions)));
+  }, actions, primaryButtonText && primaryButtonPlacement === 'top' && /*#__PURE__*/React.createElement(Button, {
+    kind: "ghost",
+    size: "small",
+    renderIcon: primaryButtonIcon,
+    onClick: onPrimaryButtonClick,
+    className: actionGhostButtonClass
+  }, primaryButtonText))));
 };
 CardHeader.propTypes = {
   actions: PropTypes.oneOfType([PropTypes.array, PropTypes.node]),
   description: PropTypes.string,
   hasActions: PropTypes.bool,
   label: PropTypes.string,
+  noActionIcons: PropTypes.bool,
+  onPrimaryButtonClick: PropTypes.func,
+  primaryButtonIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  primaryButtonPlacement: PropTypes.oneOf(['top', 'bottom']),
+  primaryButtonText: PropTypes.string,
   title: PropTypes.string,
   titleSize: PropTypes.oneOf(['default', 'large'])
 };

package/es/components/ComboButton/ComboButton.js

@@ -17,7 +17,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { ChevronDown, ChevronUp } from '@carbon/icons-react';
+import { ChevronDown, ChevronUp } from '@carbon/react/icons';
 import { Button, OverflowMenuItem, OverflowMenu } from '@carbon/react';
 import classnames from 'classnames';
 import { node, shape, string } from 'prop-types';

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", "submitButtonText"];
+var _excluded = ["backButtonText", "cancelButtonText", "children", "className", "modalDangerButtonText", "modalDescription", "modalSecondaryButtonText", "modalTitle", "nextButtonText", "onClose", "onRequestSubmit", "firstFocusElement", "submitButtonText"];
 
 /**
  * Copyright IBM Corp. 2021, 2022
@@ -43,6 +43,7 @@ export var CreateFullPage = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       nextButtonText = _ref.nextButtonText,
       onClose = _ref.onClose,
       onRequestSubmit = _ref.onRequestSubmit,
+      firstFocusElement = _ref.firstFocusElement,
       submitButtonText = _ref.submitButtonText,
       rest = _objectWithoutProperties(_ref, _excluded);
 
@@ -124,7 +125,8 @@ export var CreateFullPage = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     previousState: previousState,
     currentStep: currentStep,
     blockClass: blockClass,
-    onMount: onMount
+    onMount: onMount,
+    firstFocusElement: firstFocusElement
   });
   useValidCreateStepCount(stepData.length, componentName);
   useCreateComponentStepChange({
@@ -198,7 +200,10 @@ export var CreateFullPage = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     className: "".concat(blockClass, "__modal"),
     size: "sm",
     open: modalIsOpen,
-    "aria-label": modalTitle
+    "aria-label": modalTitle,
+    onClose: function onClose() {
+      setModalIsOpen(false);
+    }
   }, /*#__PURE__*/React.createElement(ModalHeader, {
     title: modalTitle
   }), /*#__PURE__*/React.createElement(ModalBody, null, /*#__PURE__*/React.createElement("p", null, modalDescription)), /*#__PURE__*/React.createElement(ModalFooter, null, /*#__PURE__*/React.createElement(Button, {
@@ -242,6 +247,11 @@ CreateFullPage.propTypes = {
    */
   className: PropTypes.string,
 
+  /**
+   * Specifies elements to focus on first on render.
+   */
+  firstFocusElement: PropTypes.string,
+
   /**
    * The primary 'danger' button text in the modal
    */

package/es/components/CreateTearsheet/CreateTearsheet.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", "description", "influencerWidth", "initialStep", "label", "nextButtonText", "onClose", "onRequestSubmit", "open", "submitButtonText", "title", "verticalPosition"];
+var _excluded = ["backButtonText", "cancelButtonText", "children", "className", "description", "influencerWidth", "initialStep", "label", "nextButtonText", "onClose", "onRequestSubmit", "open", "firstFocusElement", "submitButtonText", "title", "verticalPosition"];
 
 /**
  * Copyright IBM Corp. 2021, 2022
@@ -20,6 +20,7 @@ import { pkg } from '../../settings';
 import { usePreviousValue, useValidCreateStepCount, useResetCreateComponent, useCreateComponentFocus, useCreateComponentStepChange } from '../../global/js/hooks';
 import { getDevtoolsProps } from '../../global/js/utils/devtools';
 import { lastIndexInArray } from '../../global/js/utils/lastIndexInArray';
+import { getNumberOfHiddenSteps } from '../../global/js/utils/getNumberOfHiddenSteps';
 var componentName = 'CreateTearsheet';
 var blockClass = "".concat(pkg.prefix, "--tearsheet-create"); // This is a general context for the steps container
 // containing information about the state of the container
@@ -48,6 +49,7 @@ export var CreateTearsheet = /*#__PURE__*/forwardRef(function (_ref, ref) {
       onClose = _ref.onClose,
       onRequestSubmit = _ref.onRequestSubmit,
       open = _ref.open,
+      firstFocusElement = _ref.firstFocusElement,
       submitButtonText = _ref.submitButtonText,
       title = _ref.title,
       _ref$verticalPosition = _ref.verticalPosition,
@@ -122,12 +124,18 @@ export var CreateTearsheet = /*#__PURE__*/forwardRef(function (_ref, ref) {
     if (lastItem !== lastIncludedStep) {
       setLastIncludedStep(lastItem);
     }
-  }, [stepData, firstIncludedStep, lastIncludedStep]);
+
+    if (open && initialStep) {
+      var numberOfHiddenSteps = getNumberOfHiddenSteps(stepData, initialStep);
+      setCurrentStep(Number(initialStep + numberOfHiddenSteps));
+    }
+  }, [stepData, firstIncludedStep, lastIncludedStep, initialStep, open]);
   useCreateComponentFocus({
     previousState: previousState,
     currentStep: currentStep,
     blockClass: blockClass,
-    onMount: onMount
+    onMount: onMount,
+    firstFocusElement: firstFocusElement
   });
   useValidCreateStepCount(stepData.length, componentName);
   useResetCreateComponent({
@@ -135,6 +143,7 @@ export var CreateTearsheet = /*#__PURE__*/forwardRef(function (_ref, ref) {
     previousState: previousState,
     open: open,
     setCurrentStep: setCurrentStep,
+    stepData: stepData,
     initialStep: initialStep,
     totalSteps: stepData === null || stepData === void 0 ? void 0 : stepData.length,
     componentName: componentName
@@ -256,6 +265,11 @@ CreateTearsheet.propTypes = {
    */
   description: PropTypes.node,
 
+  /**
+   * Specifies elements to focus on first on render.
+   */
+  firstFocusElement: PropTypes.string,
+
   /**
    * Used to set the size of the influencer
    */

package/es/components/CreateTearsheet/preview-components/MultiStepTearsheet.js

@@ -49,6 +49,7 @@ export var MultiStepTearsheet = function MultiStepTearsheet(_ref2) {
       cancelButtonText = _ref2.cancelButtonText,
       className = _ref2.className,
       description = _ref2.description,
+      firstFocusElement = _ref2.firstFocusElement,
       influencerWidth = _ref2.influencerWidth,
       label = _ref2.label,
       nextButtonText = _ref2.nextButtonText,
@@ -150,7 +151,8 @@ export var MultiStepTearsheet = function MultiStepTearsheet(_ref2) {
           resolve();
         }, simulatedDelay);
       });
-    }
+    },
+    firstFocusElement: firstFocusElement
   }, /*#__PURE__*/React.createElement(CreateTearsheetStep, {
     onNext: function onNext() {
       return new Promise(function (resolve, reject) {

package/es/components/CreateTearsheetNarrow/CreateTearsheetNarrow.js

@@ -114,9 +114,9 @@ CreateTearsheetNarrow.propTypes = {
   formDescription: PropTypes.node,
 
   /**
-   * Specifies a required field that provides a title for a form
+   * Specifies a field that provides a title for a form
    */
-  formTitle: PropTypes.node.isRequired,
+  formTitle: PropTypes.node,
 
   /**
    * A label for the tearsheet, displayed in the header area of the tearsheet