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

package/es/components/TagOverflow/TagOverflow.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends, defineProperty as _defineProperty, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2, extends as _extends, defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { useRef, useState, useCallback, useEffect } from 'react';
 import PropTypes from '../../node_modules/prop-types/index.js';
 import cx from 'classnames';
@@ -19,13 +19,13 @@ import { TagOverflowPopover } from './TagOverflowPopover.js';
 import { TagOverflowModal } from './TagOverflowModal.js';
 
 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(pkg.prefix, "--tag-overflow");
 var componentName = 'TagOverflow';
 var allTagsModalSearchThreshold = 10;
 
-// TODO: support prop overflowType
-
 // Default values for props
 var defaults = {
   items: [],
@@ -164,39 +164,53 @@ var TagOverflow = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
       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 = _objectWithoutProperties(_ref2, _excluded3);
+      return _objectSpread2({
+        type: tagType
+      }, other);
     });
     setVisibleItems(visibleItemsArr);
     setOverflowItems(overflowItemsArr);
     onOverflowTagChange === null || onOverflowTagChange === void 0 || onOverflowTagChange(overflowItemsArr);
   }, [containerWidth, items, maxVisible, getVisibleItems, onOverflowTagChange]);
+  var handleTagOnClose = useCallback(function (onClose, index) {
+    onClose === null || onClose === void 0 || onClose();
+    if (index <= visibleItems.length - 1) {
+      setPopoverOpen(false);
+    }
+  }, [visibleItems]);
   return /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
     className: cx(blockClass, className, "".concat(blockClass, "--align-").concat(align), _defineProperty({}, "".concat(blockClass, "--multiline"), multiline)),
     ref: containerRef,
     role: "main"
-  }, getDevtoolsProps(componentName)), visibleItems.length > 0 && visibleItems.map(function (item) {
+  }, 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 = _objectWithoutProperties(item, _excluded4);
       // If there is no template prop, then render items as Tags
       return /*#__PURE__*/React__default.createElement("div", {
         ref: function ref(node) {
-          return itemRefHandler(item.id, node);
+          return itemRefHandler(id, node);
         },
-        key: item.id
+        key: id
       }, /*#__PURE__*/React__default.createElement(Tooltip, {
-        align: "bottom",
-        label: item.label
-      }, /*#__PURE__*/React__default.createElement(Tag, {
+        align: overflowAlign,
+        label: label
+      }, /*#__PURE__*/React__default.createElement(Tag, _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.createElement("span", {
     className: "".concat(blockClass, "__indicator"),
@@ -218,6 +232,7 @@ var TagOverflow = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     open: showAllModalOpen,
     title: allTagsModalTitle,
     onClose: handleModalClose,
+    overflowType: overflowType,
     searchLabel: allTagsModalSearchLabel,
     searchPlaceholder: allTagsModalSearchPlaceholderText,
     portalTarget: allTagsModalTarget
@@ -236,8 +251,8 @@ var tagTypes = Object.keys(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 = isRequiredIf(PropTypes.string, function (_ref2) {
-  var items = _ref2.items;
+var string_required_if_more_than_10_tags = isRequiredIf(PropTypes.string, function (_ref3) {
+  var items = _ref3.items;
   return items && items.length > allTagsModalSearchThreshold;
 });
 

package/es/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/es/components/TagOverflow/TagOverflowModal.js

@@ -14,8 +14,8 @@ import { pkg } from '../../settings.js';
 import { prepareProps } from '../../global/js/utils/props-helper.js';
 import { usePortalTarget } from '../../global/js/hooks/usePortalTarget.js';
 
-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(pkg.prefix, "--tag-overflow-modal");
 
@@ -30,6 +30,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,
@@ -41,23 +42,13 @@ var TagOverflowModal = function TagOverflowModal(_ref) {
     setSearch = _useState2[1];
   var renderPortalUse = 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 || '');
@@ -86,10 +77,12 @@ var TagOverflowModal = function TagOverflowModal(_ref) {
   }, getFilteredItems().map(function (_ref2) {
     var label = _ref2.label,
       id = _ref2.id,
+      filter = _ref2.filter,
       other = _objectWithoutProperties(_ref2, _excluded2);
+    var isFilterable = overflowType === 'tag' ? filter : false;
     return /*#__PURE__*/React__default.createElement(Tag, _extends({}, other, {
-      filter: false,
-      key: id
+      key: id,
+      filter: isFilterable
     }), label);
   })), /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(blockClass, "__fade")
@@ -102,6 +95,7 @@ TagOverflowModal.propTypes = {
   className: PropTypes.string,
   onClose: PropTypes.func,
   open: PropTypes.bool,
+  overflowType: PropTypes.oneOf(['default', 'tag']),
   portalTarget: PropTypes.node,
   searchLabel: PropTypes.string,
   searchPlaceholder: PropTypes.string,

package/es/components/TagOverflow/TagOverflowPopover.js

@@ -13,7 +13,8 @@ import { Popover, Tag, PopoverContent, Link } from '@carbon/react';
 import { pkg } from '../../settings.js';
 import { useClickOutside } from '../../global/js/hooks/useClickOutside.js';
 
-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(pkg.prefix, "--tag-overflow-popover");
 
@@ -80,11 +81,25 @@ var TagOverflowPopover = /*#__PURE__*/React__default.forwardRef(function (_ref,
     className: "".concat(blockClass, "__content")
   }, /*#__PURE__*/React__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 = _objectWithoutProperties(_ref2, _excluded2);
+    var typeValue = overflowType === 'tag' ? 'high-contrast' : tagType;
+    var isFilterable = overflowType === 'tag' ? filter : false;
     return /*#__PURE__*/React__default.createElement("li", {
       className: cx("".concat(blockClass, "__tag-item"), _defineProperty(_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.createElement(Tag, _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.createElement(Link, {
     className: "".concat(blockClass, "__show-all-tags-link"),
     href: "",

package/es/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/es/components/Tearsheet/Tearsheet.js

@@ -15,17 +15,24 @@ import { Button } from '@carbon/react';
 import { TearsheetShell, tearsheetHasCloseIcon, portalType } from './TearsheetShell.js';
 import { ActionSet } from '../ActionSet/ActionSet.js';
 
-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
@@ -41,16 +48,13 @@ var defaults = {
  */
 var Tearsheet = /*#__PURE__*/React__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 = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/React__default.createElement(TearsheetShell, _objectSpread2(_objectSpread2(_objectSpread2({}, getDevtoolsProps(componentName)), rest), {}, {
     influencerPosition: influencerPosition,
     influencerWidth: influencerWidth,
-    verticalPosition: verticalPosition,
     ref: ref,
     size: 'wide'
   }));
@@ -95,7 +99,8 @@ Tearsheet.propTypes = _objectSpread2({
    *
    * See https://react.carbondesignsystem.com/?path=/docs/components-button--default#component-api
    */
-  actions: allPropTypes([ActionSet.validateActions(function () {
+  actions: allPropTypes([/**@ts-ignore */
+  ActionSet.validateActions(function () {
     return '2xl';
   }), PropTypes.arrayOf(PropTypes.shape(_objectSpread2(_objectSpread2({}, Button.propTypes), {}, {
     kind: PropTypes.oneOf(['ghost', 'danger--ghost', 'secondary', 'danger', 'primary']),
@@ -119,6 +124,7 @@ Tearsheet.propTypes = _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: PropTypes.string.isRequired.if(function (_ref2) {
     var actions = _ref2.actions,
       hasCloseIcon = _ref2.hasCloseIcon;
@@ -136,6 +142,7 @@ Tearsheet.propTypes = _objectSpread2({
    * tearsheet"), and that behavior can be overridden if required by setting
    * this prop to either true or false.
    */
+  /**@ts-ignore */
   hasCloseIcon: PropTypes.bool,
   /**
    * The content for the influencer section of the tearsheet, displayed
@@ -158,6 +165,10 @@ Tearsheet.propTypes = _objectSpread2({
    * to page of a multi-page task).
    */
   label: PropTypes.node,
+  /**
+   * Provide a ref to return focus to once the tearsheet is closed.
+   */
+  launcherButtonRef: PropTypes.any,
   /**
    * Navigation content, such as a set of tabs, to be displayed at the bottom
    * of the header area of the tearsheet.
@@ -176,6 +187,7 @@ Tearsheet.propTypes = _objectSpread2({
   /**
    * The DOM element that the tearsheet should be rendered within. Defaults to document.body.
    */
+  /**@ts-ignore */
   portalTarget: portalType,
   /**
    * Specify a CSS selector that matches the DOM element that should be focused when the Modal opens

package/es/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/es/components/Tearsheet/TearsheetShell.js

@@ -17,9 +17,10 @@ import { Button, usePrefix, ComposedModal, ModalHeader, Layer } from '@carbon/re
 import { Wrap } from '../../global/js/utils/Wrap.js';
 import { usePortalTarget } from '../../global/js/hooks/usePortalTarget.js';
 import { useFocus } from '../../global/js/hooks/useFocus.js';
+import { usePreviousValue } from '../../global/js/hooks/usePreviousValue.js';
 import { ActionSet } from '../ActionSet/ActionSet.js';
 
-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(pkg.prefix, "--tearsheet");
@@ -82,6 +83,7 @@ var TearsheetShell = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
     slug = _ref.slug,
     title = _ref.title,
     verticalPosition = _ref.verticalPosition,
+    launcherButtonRef = _ref.launcherButtonRef,
     rest = _objectWithoutProperties(_ref, _excluded);
   var carbonPrefix = usePrefix();
   var bcModalHeader = "".concat(carbonPrefix, "--modal-header");
@@ -92,9 +94,11 @@ var TearsheetShell = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
   var modalRef = ref || localRef;
   var _useResizeObserver = useResizeObserver(resizer),
     width = _useResizeObserver.width;
-  var _useFocus = useFocus(modalRef),
+  var prevOpen = usePreviousValue(open);
+  var _useFocus = useFocus(modalRef, selectorPrimaryFocus),
     firstElement = _useFocus.firstElement,
-    keyDownListener = _useFocus.keyDownListener;
+    keyDownListener = _useFocus.keyDownListener,
+    specifiedElement = _useFocus.specifiedElement;
   var modalRefValue = modalRef.current;
   var wide = size === 'wide';
 
@@ -133,17 +137,30 @@ var TearsheetShell = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
 
   // 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();
   };
   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]);
+  useEffect(function () {
+    if (prevOpen && !open && launcherButtonRef) {
+      setTimeout(function () {
+        launcherButtonRef.current.focus();
+      }, 0);
+    }
+  }, [launcherButtonRef, open, prevOpen]);
   useEffect(function () {
     if (open && position !== depth) {
       setTimeout(function () {
@@ -402,6 +419,11 @@ TearsheetShell.propTypes = _objectSpread2({
    * to page of a multi-page task).
    */
   label: PropTypes.node,
+  /**
+   * Provide a ref to return focus to once the tearsheet is closed.
+   */
+  /**@ts-ignore */
+  launcherButtonRef: PropTypes.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/es/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.

package/es/components/WebTerminal/WebTerminal.js

@@ -16,7 +16,7 @@ import { moderate02 } from '@carbon/motion';
 import { useWebTerminal } from './hooks/index.js';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 
-var _excluded = ["actions", "children", "className", "closeIconDescription", "documentationLinks", "documentationLinksIconDescription", "isInitiallyOpen"];
+var _excluded = ["actions", "children", "className", "closeIconDescription", "documentationLinks", "documentationLinksIconDescription", "isInitiallyOpen", "webTerminalAriaLabel"];
 
 // The block part of our conventional BEM class names (blockClass__E--M).
 var componentName = 'WebTerminal';
@@ -27,7 +27,8 @@ var defaults = {
   actions: Object.freeze([]),
   documentationLinks: Object.freeze([]),
   documentationLinksIconDescription: 'Show documentation links',
-  isInitiallyOpen: false
+  isInitiallyOpen: false,
+  webTerminalAriaLabel: 'Web terminal header'
 };
 /**
  * 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.
@@ -44,6 +45,8 @@ var WebTerminal = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     documentationLinksIconDescription = _ref$documentationLin2 === void 0 ? defaults.documentationLinksIconDescription : _ref$documentationLin2,
     _ref$isInitiallyOpen = _ref.isInitiallyOpen,
     isInitiallyOpen = _ref$isInitiallyOpen === void 0 ? defaults.isInitiallyOpen : _ref$isInitiallyOpen,
+    _ref$webTerminalAriaL = _ref.webTerminalAriaLabel,
+    webTerminalAriaLabel = _ref$webTerminalAriaL === void 0 ? defaults.webTerminalAriaLabel : _ref$webTerminalAriaL,
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useWebTerminal = useWebTerminal(),
     open = _useWebTerminal.open,
@@ -102,6 +105,7 @@ var WebTerminal = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     },
     onAnimationEnd: onAnimationEnd
   }), /*#__PURE__*/React__default.createElement("header", {
+    "aria-label": webTerminalAriaLabel,
     className: "".concat(blockClass, "__bar")
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(blockClass, "__actions")
@@ -196,7 +200,11 @@ WebTerminal.propTypes = {
   /**
    * Optionally pass if the web terminal should be open by default
    */
-  isInitiallyOpen: PropTypes.bool
+  isInitiallyOpen: PropTypes.bool,
+  /**
+   * Specifies aria label for Web terminal
+   */
+  webTerminalAriaLabel: PropTypes.string
 };
 
 export { WebTerminal };

package/es/global/js/hooks/useFocus.d.ts

@@ -1,11 +1,13 @@
-export function useFocus(modalRef: any): {
+export function useFocus(modalRef: any, selectorPrimaryFocus: any): {
     firstElement: any;
     lastElement: any;
     allElements: any;
+    specifiedElement: any;
     keyDownListener: (event: any) => void;
     getFocusable: () => {
         first: any;
         last: any;
         all: any;
+        specifiedElement: any;
     };
 };