@carbon/ibm-products 2.39.0 → 2.40.1-canary.10

package/lib/components/SingleAddSelect/SingleAddSelect.js

@@ -22,7 +22,6 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 var componentName = 'SingleAddSelect';
-
 /**
  * Used to add or select one or more items from larger lists or hierarchies.
  */
@@ -38,6 +37,7 @@ exports.SingleAddSelect.propTypes = {
   /**
    * optional class name
    */
+  /**@ts-ignore */
   className: index["default"].string,
   /**
    * text description that appears under the title
@@ -55,6 +55,7 @@ exports.SingleAddSelect.propTypes = {
    * object that contains the item data. for more information reference the
    * "Structuring items" section in the docs tab
    */
+  /**@ts-ignore */
   items: index["default"].shape({
     entries: index["default"].arrayOf(index["default"].shape({
       children: index["default"].object,

package/lib/components/TagOverflow/TagOverflow.js

@@ -28,13 +28,13 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var _excluded = ["items", "tagComponent", "align", "showAllTagsLabel", "allTagsModalSearchLabel", "allTagsModalSearchPlaceholderText", "allTagsModalTarget", "allTagsModalTitle", "className", "containingElementRef", "measurementOffset", "maxVisible", "multiline", "overflowAlign", "overflowClassName", "overflowType", "onOverflowTagChange"],
-  _excluded2 = ["className", "id"];
+  _excluded2 = ["className", "id"],
+  _excluded3 = ["tagType"],
+  _excluded4 = ["id", "label", "tagType", "onClose"];
 var blockClass = "".concat(settings.pkg.prefix, "--tag-overflow");
 var componentName = 'TagOverflow';
 var allTagsModalSearchThreshold = 10;
 
-// TODO: support prop overflowType
-
 // Default values for props
 var defaults = {
   items: [],
@@ -173,39 +173,53 @@ exports.TagOverflow = /*#__PURE__*/React__default["default"].forwardRef(function
       visibleItemsArr = (_visibleItemsArr = visibleItemsArr) === null || _visibleItemsArr === void 0 ? void 0 : _visibleItemsArr.slice(0, maxVisible);
     }
     var hiddenItems = items === null || items === void 0 ? void 0 : items.slice(visibleItemsArr.length);
-    var overflowItemsArr = hiddenItems === null || hiddenItems === void 0 ? void 0 : hiddenItems.map(function (item) {
-      return {
-        type: item.tagType,
-        label: item.label,
-        id: item.id
-      };
+    var overflowItemsArr = hiddenItems === null || hiddenItems === void 0 ? void 0 : hiddenItems.map(function (_ref2) {
+      var tagType = _ref2.tagType,
+        other = _rollupPluginBabelHelpers.objectWithoutProperties(_ref2, _excluded3);
+      return _rollupPluginBabelHelpers.objectSpread2({
+        type: tagType
+      }, other);
     });
     setVisibleItems(visibleItemsArr);
     setOverflowItems(overflowItemsArr);
     onOverflowTagChange === null || onOverflowTagChange === void 0 || onOverflowTagChange(overflowItemsArr);
   }, [containerWidth, items, maxVisible, getVisibleItems, onOverflowTagChange]);
+  var handleTagOnClose = React.useCallback(function (onClose, index) {
+    onClose === null || onClose === void 0 || onClose();
+    if (index <= visibleItems.length - 1) {
+      setPopoverOpen(false);
+    }
+  }, [visibleItems]);
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
     className: cx__default["default"](blockClass, className, "".concat(blockClass, "--align-").concat(align), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "--multiline"), multiline)),
     ref: containerRef,
     role: "main"
-  }, devtools.getDevtoolsProps(componentName)), visibleItems.length > 0 && visibleItems.map(function (item) {
+  }, devtools.getDevtoolsProps(componentName)), visibleItems.length > 0 && visibleItems.map(function (item, index) {
     // Render custom components
     if (tagComponent) {
       return getCustomComponent(item);
     } else {
+      var id = item.id,
+        label = item.label,
+        tagType = item.tagType,
+        _onClose = item.onClose,
+        other = _rollupPluginBabelHelpers.objectWithoutProperties(item, _excluded4);
       // If there is no template prop, then render items as Tags
       return /*#__PURE__*/React__default["default"].createElement("div", {
         ref: function ref(node) {
-          return itemRefHandler(item.id, node);
+          return itemRefHandler(id, node);
         },
-        key: item.id
+        key: id
       }, /*#__PURE__*/React__default["default"].createElement(react.Tooltip, {
-        align: "bottom",
-        label: item.label
-      }, /*#__PURE__*/React__default["default"].createElement(react.Tag, {
+        align: overflowAlign,
+        label: label
+      }, /*#__PURE__*/React__default["default"].createElement(react.Tag, _rollupPluginBabelHelpers["extends"]({}, other, {
         className: "".concat(blockClass, "__item--tag"),
-        type: item.tagType
-      }, item.label)));
+        type: tagType,
+        onClose: function onClose() {
+          return handleTagOnClose(_onClose, index);
+        }
+      }), label)));
     }
   }), /*#__PURE__*/React__default["default"].createElement("span", {
     className: "".concat(blockClass, "__indicator"),
@@ -227,6 +241,7 @@ exports.TagOverflow = /*#__PURE__*/React__default["default"].forwardRef(function
     open: showAllModalOpen,
     title: allTagsModalTitle,
     onClose: handleModalClose,
+    overflowType: overflowType,
     searchLabel: allTagsModalSearchLabel,
     searchPlaceholder: allTagsModalSearchPlaceholderText,
     portalTarget: allTagsModalTarget
@@ -245,8 +260,8 @@ var tagTypes = Object.keys(constants.TYPES);
  * The strings shown in the showAllModal are only shown if we have more than allTagsModalSearchLThreshold
  * @returns null if no problems
  */
-var string_required_if_more_than_10_tags = propsHelper.isRequiredIf(index["default"].string, function (_ref2) {
-  var items = _ref2.items;
+var string_required_if_more_than_10_tags = propsHelper.isRequiredIf(index["default"].string, function (_ref3) {
+  var items = _ref3.items;
   return items && items.length > allTagsModalSearchThreshold;
 });
 

package/lib/components/TagOverflow/TagOverflowModal.d.ts

@@ -1,10 +1,11 @@
-export function TagOverflowModal({ allTags, className, title, onClose, open, portalTarget: portalTargetIn, searchLabel, searchPlaceholder, ...rest }: {
+export function TagOverflowModal({ allTags, className, title, onClose, open, overflowType, portalTarget: portalTargetIn, searchLabel, searchPlaceholder, ...rest }: {
     [x: string]: any;
     allTags: any;
     className: any;
     title: any;
     onClose: any;
     open: any;
+    overflowType: any;
     portalTarget: any;
     searchLabel?: string | undefined;
     searchPlaceholder: any;
@@ -17,6 +18,7 @@ export namespace TagOverflowModal {
         let className: PropTypes.Requireable<string>;
         let onClose: PropTypes.Requireable<(...args: any[]) => any>;
         let open: PropTypes.Requireable<boolean>;
+        let overflowType: PropTypes.Requireable<string>;
         let portalTarget: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         let searchLabel: PropTypes.Requireable<string>;
         let searchPlaceholder: PropTypes.Requireable<string>;

package/lib/components/TagOverflow/TagOverflowModal.js

@@ -23,8 +23,8 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-var _excluded = ["allTags", "className", "title", "onClose", "open", "portalTarget", "searchLabel", "searchPlaceholder"],
-  _excluded2 = ["label", "id"];
+var _excluded = ["allTags", "className", "title", "onClose", "open", "overflowType", "portalTarget", "searchLabel", "searchPlaceholder"],
+  _excluded2 = ["label", "id", "filter"];
 var componentName = 'TagOverflowModal';
 var blockClass = "".concat(settings.pkg.prefix, "--tag-overflow-modal");
 
@@ -39,6 +39,7 @@ var TagOverflowModal = function TagOverflowModal(_ref) {
     title = _ref.title,
     onClose = _ref.onClose,
     open = _ref.open,
+    overflowType = _ref.overflowType,
     portalTargetIn = _ref.portalTarget,
     _ref$searchLabel = _ref.searchLabel,
     searchLabel = _ref$searchLabel === void 0 ? defaults.searchLabel : _ref$searchLabel,
@@ -50,23 +51,13 @@ var TagOverflowModal = function TagOverflowModal(_ref) {
     setSearch = _useState2[1];
   var renderPortalUse = usePortalTarget.usePortalTarget(portalTargetIn);
   var getFilteredItems = function getFilteredItems() {
-    var newFilteredModalTags = [];
-    if (open) {
-      if (search === '') {
-        newFilteredModalTags = allTags.slice(0);
-      } else {
-        var lCaseSearch = search.toLocaleLowerCase();
-        allTags.forEach(function (tag) {
-          var _tag$dataSearch, _tag$label;
-          var dataSearch = (_tag$dataSearch = tag['data-search']) === null || _tag$dataSearch === void 0 || (_tag$dataSearch = _tag$dataSearch.toLocaleLowerCase()) === null || _tag$dataSearch === void 0 ? void 0 : _tag$dataSearch.indexOf(lCaseSearch);
-          var labelSearch = (_tag$label = tag.label) === null || _tag$label === void 0 || (_tag$label = _tag$label.toLocaleLowerCase()) === null || _tag$label === void 0 ? void 0 : _tag$label.indexOf(lCaseSearch);
-          if (dataSearch > -1 || labelSearch > -1) {
-            newFilteredModalTags.push(tag);
-          }
-        });
-      }
+    if (open && search) {
+      return allTags.filter(function (tag) {
+        var _tag$label;
+        return (_tag$label = tag.label) === null || _tag$label === void 0 || (_tag$label = _tag$label.toLocaleLowerCase()) === null || _tag$label === void 0 ? void 0 : _tag$label.includes(search.toLocaleLowerCase());
+      });
     }
-    return newFilteredModalTags;
+    return allTags;
   };
   var handleSearch = function handleSearch(evt) {
     setSearch(evt.target.value || '');
@@ -95,10 +86,12 @@ var TagOverflowModal = function TagOverflowModal(_ref) {
   }, getFilteredItems().map(function (_ref2) {
     var label = _ref2.label,
       id = _ref2.id,
+      filter = _ref2.filter,
       other = _rollupPluginBabelHelpers.objectWithoutProperties(_ref2, _excluded2);
+    var isFilterable = overflowType === 'tag' ? filter : false;
     return /*#__PURE__*/React__default["default"].createElement(react.Tag, _rollupPluginBabelHelpers["extends"]({}, other, {
-      filter: false,
-      key: id
+      key: id,
+      filter: isFilterable
     }), label);
   })), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "".concat(blockClass, "__fade")
@@ -111,6 +104,7 @@ TagOverflowModal.propTypes = {
   className: index["default"].string,
   onClose: index["default"].func,
   open: index["default"].bool,
+  overflowType: index["default"].oneOf(['default', 'tag']),
   portalTarget: index["default"].node,
   searchLabel: index["default"].string,
   searchPlaceholder: index["default"].string,

package/lib/components/TagOverflow/TagOverflowPopover.js

@@ -22,7 +22,8 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-var _excluded = ["allTagsModalSearchThreshold", "className", "onShowAllClick", "overflowAlign", "overflowTags", "overflowType", "showAllTagsLabel", "popoverOpen", "setPopoverOpen"];
+var _excluded = ["allTagsModalSearchThreshold", "className", "onShowAllClick", "overflowAlign", "overflowTags", "overflowType", "showAllTagsLabel", "popoverOpen", "setPopoverOpen"],
+  _excluded2 = ["label", "id", "tagType", "filter", "onClose"];
 var componentName = 'TagOverflowPopover';
 var blockClass = "".concat(settings.pkg.prefix, "--tag-overflow-popover");
 
@@ -89,11 +90,25 @@ var TagOverflowPopover = /*#__PURE__*/React__default["default"].forwardRef(funct
     className: "".concat(blockClass, "__content")
   }, /*#__PURE__*/React__default["default"].createElement("ul", {
     className: "".concat(blockClass, "__tag-list")
-  }, getOverflowPopoverItems().map(function (tag) {
+  }, getOverflowPopoverItems().map(function (_ref2) {
+    var label = _ref2.label,
+      id = _ref2.id,
+      tagType = _ref2.tagType,
+      filter = _ref2.filter,
+      _onClose = _ref2.onClose,
+      other = _rollupPluginBabelHelpers.objectWithoutProperties(_ref2, _excluded2);
+    var typeValue = overflowType === 'tag' ? 'high-contrast' : tagType;
+    var isFilterable = overflowType === 'tag' ? filter : false;
     return /*#__PURE__*/React__default["default"].createElement("li", {
       className: cx__default["default"]("".concat(blockClass, "__tag-item"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__tag-item--default"), overflowType === 'default'), "".concat(blockClass, "__tag-item--tag"), overflowType === 'tag')),
-      key: tag.id
-    }, tag.label);
+      key: id
+    }, overflowType === 'tag' ? /*#__PURE__*/React__default["default"].createElement(react.Tag, _rollupPluginBabelHelpers["extends"]({}, other, {
+      onClose: function onClose() {
+        return _onClose === null || _onClose === void 0 ? void 0 : _onClose();
+      },
+      type: typeValue,
+      filter: isFilterable
+    }), label) : label);
   })), overflowTags.length > allTagsModalSearchThreshold && /*#__PURE__*/React__default["default"].createElement(react.Link, {
     className: "".concat(blockClass, "__show-all-tags-link"),
     href: "",

package/lib/components/Tearsheet/Tearsheet.d.ts

@@ -1,3 +1,121 @@
+/**
+ * Copyright IBM Corp. 2020, 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.
+ */
+/// <reference path="../../../src/custom-typings/index.d.ts" />
+import React, { PropsWithChildren, ReactNode } from 'react';
+import PropTypes from 'prop-types';
+import { ButtonProps } from '@carbon/react';
+/**
+ * The accessibility title for the close icon (if shown).
+ *
+ * **Note:** This prop is only required if a close icon is shown, i.e. if
+ * there are a no navigation actions and/or hasCloseIcon is true.
+ */
+export type CloseIconDescriptionTypes = {
+    hasCloseIcon?: false;
+    closeIconDescription?: string;
+} | {
+    hasCloseIcon: true;
+    closeIconDescription: string;
+};
+interface TearsheetProps extends PropsWithChildren {
+    /**
+     * The navigation actions to be shown as buttons in the action area at the
+     * bottom of the tearsheet. Each action is specified as an object with
+     * optional fields: 'label' to supply the button label, 'kind' to select the
+     * button kind (must be 'primary', 'secondary' or 'ghost'), 'loading' to
+     * display a loading indicator, and 'onClick' to receive notifications when
+     * the button is clicked. Additional fields in the object will be passed to
+     * the Button component, and these can include 'disabled', 'ref', 'className',
+     * and any other Button props, except 'size'. Any other fields in the object will
+     * be passed through to the button element as HTML attributes.
+     *
+     * See https://react.carbondesignsystem.com/?path=/docs/components-button--default#component-api
+     */
+    actions: ButtonProps[];
+    /**
+     * The aria-label for the tearsheet, which is optional.
+     * if it is not passed, the title will be used as the aria-label.
+     */
+    ariaLabel?: string;
+    /**
+     * An optional class or classes to be added to the outermost element.
+     */
+    className?: string;
+    /**
+     * A description of the flow, displayed in the header area of the tearsheet.
+     */
+    description?: ReactNode;
+    /**
+     * Enable a close icon ('x') in the header area of the tearsheet. By default,
+     * (when this prop is omitted, or undefined or null) a tearsheet does not
+     * display a close icon if there are navigation actions ("transactional
+     * tearsheet") and displays one if there are no navigation actions ("passive
+     * tearsheet"), and that behavior can be overridden if required by setting
+     * this prop to either true or false.
+     */
+    hasCloseIcon?: boolean;
+    /**
+     * The content for the influencer section of the tearsheet, displayed
+     * alongside the main content. This is typically a menu, or filter, or
+     * progress indicator, or similar.
+     */
+    influencer?: ReactNode;
+    /**
+     * The position of the influencer section, 'left' or 'right'.
+     */
+    influencerPosition?: 'left' | 'right';
+    /**
+     * The width of the influencer: 'narrow' (the default) is 256px, and 'wide'
+     * is 320px.
+     */
+    influencerWidth?: 'narrow' | 'wide';
+    /**
+     * A label for the tearsheet, displayed in the header area of the tearsheet
+     * to maintain context for the tearsheet (e.g. as the title changes from page
+     * to page of a multi-page task).
+     */
+    label?: ReactNode;
+    /**
+     * Navigation content, such as a set of tabs, to be displayed at the bottom
+     * of the header area of the tearsheet.
+     */
+    navigation?: ReactNode;
+    /**
+     * An optional handler that is called when the user closes the tearsheet (by
+     * clicking the close button, if enabled, or clicking outside, if enabled).
+     * Returning `false` here prevents the modal from closing.
+     */
+    onClose?: () => void;
+    /**
+     * Specifies whether the tearsheet is currently open.
+     */
+    open?: boolean;
+    /**
+     * The DOM element that the tearsheet should be rendered within. Defaults to document.body.
+     */
+    portalTarget: ReactNode;
+    /**
+     * Specify a CSS selector that matches the DOM element that should be focused when the Modal opens
+     */
+    selectorPrimaryFocus?: string;
+    /**
+     * The main title of the tearsheet, displayed in the header area.
+     */
+    title?: ReactNode;
+    /** @deprecated */
+    /**
+     * The position of the top of tearsheet in the viewport. The 'normal'
+     * position is a short distance down from the top of the
+     * viewport, leaving room at the top for a global header bar to show through
+     * from below. The 'lower' position (the default) provides a little extra room at the top
+     * to allow an action bar navigation or breadcrumbs to also show through.
+     */
+    verticalPosition?: 'normal' | 'lower';
+}
 /**
  * A tearsheet is a mostly full-screen type of dialog that keeps users
  * in-context and focused by bringing actionable content front and center while
@@ -10,9 +128,17 @@
  * panel on either the left or right side, the main content area, and a set of
  * action buttons.
  */
-export let Tearsheet: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-export namespace deprecatedProps {
-    let verticalPosition: PropTypes.Requireable<string>;
-}
-import React from 'react';
-import PropTypes from 'prop-types';
+export declare let Tearsheet: React.ForwardRefExoticComponent<(TearsheetProps & CloseIconDescriptionTypes) & React.RefAttributes<HTMLDivElement>>;
+export declare const deprecatedProps: {
+    /**
+     * **Deprecated**
+     *
+     * The position of the top of tearsheet in the viewport. The 'normal'
+     * position is a short distance down from the top of the
+     * viewport, leaving room at the top for a global header bar to show through
+     * from below. The 'lower' position (the default) provides a little extra room at the top
+     * to allow an action bar navigation or breadcrumbs to also show through.
+     */
+    verticalPosition: PropTypes.Requireable<string>;
+};
+export {};

package/lib/components/Tearsheet/Tearsheet.js

@@ -23,17 +23,24 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var _excluded = ["influencerPosition", "influencerWidth", "verticalPosition"];
+var _excluded = ["influencerPosition", "influencerWidth"];
 var componentName = 'Tearsheet';
 
 // NOTE: the component SCSS is not imported here: it is rolled up separately.
 
-// Default values for props
-var defaults = {
-  influencerPosition: 'left',
-  influencerWidth: 'narrow',
-  verticalPosition: 'lower'
-};
+/**
+ * The accessibility title for the close icon (if shown).
+ *
+ * **Note:** This prop is only required if a close icon is shown, i.e. if
+ * there are a no navigation actions and/or hasCloseIcon is true.
+ */
+
+// The types and DocGen commentary for the component props,
+// in alphabetical order (for consistency).
+// See https://www.npmjs.com/package/prop-types#usage.
+
+// Note that the descriptions here should be kept in sync with those for the
+// corresponding props for TearsheetNarrow and TearsheetShell components.
 
 /**
  * A tearsheet is a mostly full-screen type of dialog that keeps users
@@ -49,16 +56,13 @@ var defaults = {
  */
 exports.Tearsheet = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
   var _ref$influencerPositi = _ref.influencerPosition,
-    influencerPosition = _ref$influencerPositi === void 0 ? defaults.influencerPosition : _ref$influencerPositi,
+    influencerPosition = _ref$influencerPositi === void 0 ? 'left' : _ref$influencerPositi,
     _ref$influencerWidth = _ref.influencerWidth,
-    influencerWidth = _ref$influencerWidth === void 0 ? defaults.influencerWidth : _ref$influencerWidth,
-    _ref$verticalPosition = _ref.verticalPosition,
-    verticalPosition = _ref$verticalPosition === void 0 ? defaults.verticalPosition : _ref$verticalPosition,
+    influencerWidth = _ref$influencerWidth === void 0 ? 'narrow' : _ref$influencerWidth,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/React__default["default"].createElement(TearsheetShell.TearsheetShell, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, devtools.getDevtoolsProps(componentName)), rest), {}, {
     influencerPosition: influencerPosition,
     influencerWidth: influencerWidth,
-    verticalPosition: verticalPosition,
     ref: ref,
     size: 'wide'
   }));
@@ -103,7 +107,8 @@ exports.Tearsheet.propTypes = _rollupPluginBabelHelpers.objectSpread2({
    *
    * See https://react.carbondesignsystem.com/?path=/docs/components-button--default#component-api
    */
-  actions: propsHelper.allPropTypes([ActionSet.ActionSet.validateActions(function () {
+  actions: propsHelper.allPropTypes([/**@ts-ignore */
+  ActionSet.ActionSet.validateActions(function () {
     return '2xl';
   }), index["default"].arrayOf(index["default"].shape(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, react.Button.propTypes), {}, {
     kind: index["default"].oneOf(['ghost', 'danger--ghost', 'secondary', 'danger', 'primary']),
@@ -127,6 +132,7 @@ exports.Tearsheet.propTypes = _rollupPluginBabelHelpers.objectSpread2({
    * **Note:** This prop is only required if a close icon is shown, i.e. if
    * there are a no navigation actions and/or hasCloseIcon is true.
    */
+  /**@ts-ignore */
   closeIconDescription: index["default"].string.isRequired.if(function (_ref2) {
     var actions = _ref2.actions,
       hasCloseIcon = _ref2.hasCloseIcon;
@@ -144,6 +150,7 @@ exports.Tearsheet.propTypes = _rollupPluginBabelHelpers.objectSpread2({
    * tearsheet"), and that behavior can be overridden if required by setting
    * this prop to either true or false.
    */
+  /**@ts-ignore */
   hasCloseIcon: index["default"].bool,
   /**
    * The content for the influencer section of the tearsheet, displayed
@@ -166,6 +173,10 @@ exports.Tearsheet.propTypes = _rollupPluginBabelHelpers.objectSpread2({
    * to page of a multi-page task).
    */
   label: index["default"].node,
+  /**
+   * Provide a ref to return focus to once the tearsheet is closed.
+   */
+  launcherButtonRef: index["default"].any,
   /**
    * Navigation content, such as a set of tabs, to be displayed at the bottom
    * of the header area of the tearsheet.
@@ -184,6 +195,7 @@ exports.Tearsheet.propTypes = _rollupPluginBabelHelpers.objectSpread2({
   /**
    * The DOM element that the tearsheet should be rendered within. Defaults to document.body.
    */
+  /**@ts-ignore */
   portalTarget: TearsheetShell.portalType,
   /**
    * Specify a CSS selector that matches the DOM element that should be focused when the Modal opens

package/lib/components/Tearsheet/TearsheetShell.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 /// <reference path="../../../src/custom-typings/index.d.ts" />
-import React, { PropsWithChildren, ReactNode } from 'react';
+import React, { PropsWithChildren, ReactNode, RefObject } from 'react';
 import PropTypes from 'prop-types';
 import { type ButtonProps } from '@carbon/react';
 interface TearsheetShellProps extends PropsWithChildren {
@@ -57,6 +57,10 @@ interface TearsheetShellProps extends PropsWithChildren {
      * to page of a multi-page task).
      */
     label?: ReactNode;
+    /**
+     * Provide a ref to return focus to once the tearsheet is closed.
+     */
+    launcherButtonRef?: RefObject<any>;
     /**
      * Navigation content, such as a set of tabs, to be displayed at the bottom
      * of the header area of the tearsheet. NB the navigation is only applicable

package/lib/components/Tearsheet/TearsheetShell.js

@@ -21,6 +21,7 @@ var react = require('@carbon/react');
 var Wrap = require('../../global/js/utils/Wrap.js');
 var usePortalTarget = require('../../global/js/hooks/usePortalTarget.js');
 var useFocus = require('../../global/js/hooks/useFocus.js');
+var usePreviousValue = require('../../global/js/hooks/usePreviousValue.js');
 var ActionSet = require('../ActionSet/ActionSet.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -28,7 +29,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-var _excluded = ["actions", "ariaLabel", "children", "className", "closeIconDescription", "description", "hasCloseIcon", "headerActions", "influencer", "influencerPosition", "influencerWidth", "label", "navigation", "onClose", "open", "portalTarget", "selectorPrimaryFocus", "size", "slug", "title", "verticalPosition"];
+var _excluded = ["actions", "ariaLabel", "children", "className", "closeIconDescription", "description", "hasCloseIcon", "headerActions", "influencer", "influencerPosition", "influencerWidth", "label", "navigation", "onClose", "open", "portalTarget", "selectorPrimaryFocus", "size", "slug", "title", "verticalPosition", "launcherButtonRef"];
 
 // The block part of our conventional BEM class names (bc__E--M).
 var bc = "".concat(settings.pkg.prefix, "--tearsheet");
@@ -91,6 +92,7 @@ var TearsheetShell = /*#__PURE__*/React__default["default"].forwardRef(function
     slug = _ref.slug,
     title = _ref.title,
     verticalPosition = _ref.verticalPosition,
+    launcherButtonRef = _ref.launcherButtonRef,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   var carbonPrefix = react.usePrefix();
   var bcModalHeader = "".concat(carbonPrefix, "--modal-header");
@@ -101,9 +103,11 @@ var TearsheetShell = /*#__PURE__*/React__default["default"].forwardRef(function
   var modalRef = ref || localRef;
   var _useResizeObserver = useResizeObserver.useResizeObserver(resizer),
     width = _useResizeObserver.width;
-  var _useFocus = useFocus.useFocus(modalRef),
+  var prevOpen = usePreviousValue.usePreviousValue(open);
+  var _useFocus = useFocus.useFocus(modalRef, selectorPrimaryFocus),
     firstElement = _useFocus.firstElement,
-    keyDownListener = _useFocus.keyDownListener;
+    keyDownListener = _useFocus.keyDownListener,
+    specifiedElement = _useFocus.specifiedElement;
   var modalRefValue = modalRef.current;
   var wide = size === 'wide';
 
@@ -142,17 +146,30 @@ var TearsheetShell = /*#__PURE__*/React__default["default"].forwardRef(function
 
   // Callback to give the tearsheet the opportunity to claim focus
   handleStackChange.claimFocus = function () {
+    if (selectorPrimaryFocus) {
+      return specifiedElement === null || specifiedElement === void 0 ? void 0 : specifiedElement.focus();
+    }
     firstElement === null || firstElement === void 0 || firstElement.focus();
   };
   React.useEffect(function () {
     if (open) {
-      // Focusing the first element
+      // Focusing the first element or selectorPrimaryFocus element
       setTimeout(function () {
+        if (selectorPrimaryFocus) {
+          return specifiedElement === null || specifiedElement === void 0 ? void 0 : specifiedElement.focus();
+        }
         firstElement === null || firstElement === void 0 || firstElement.focus();
       }, 0);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [open]);
+  React.useEffect(function () {
+    if (prevOpen && !open && launcherButtonRef) {
+      setTimeout(function () {
+        launcherButtonRef.current.focus();
+      }, 0);
+    }
+  }, [launcherButtonRef, open, prevOpen]);
   React.useEffect(function () {
     if (open && position !== depth) {
       setTimeout(function () {
@@ -411,6 +428,11 @@ TearsheetShell.propTypes = _rollupPluginBabelHelpers.objectSpread2({
    * to page of a multi-page task).
    */
   label: index["default"].node,
+  /**
+   * Provide a ref to return focus to once the tearsheet is closed.
+   */
+  /**@ts-ignore */
+  launcherButtonRef: index["default"].any,
   /**
    * Navigation content, such as a set of tabs, to be displayed at the bottom
    * of the header area of the tearsheet. NB the navigation is only applicable

package/lib/components/WebTerminal/WebTerminal.d.ts

@@ -41,6 +41,10 @@ interface WebTerminalProps extends PropsWithChildren {
      * Optionally pass if the web terminal should be open by default
      */
     isInitiallyOpen?: boolean;
+    /**
+     * Specifies aria label for Web terminal
+     */
+    webTerminalAriaLabel?: string;
 }
 /**
  * The `WebTerminal` is prompted by the user and is persistent until dismissed. The purpose of a web terminal is to provide users with the ability to type commands manually instead of using the GUI.