@carbon/ibm-products 2.58.0-rc.0 → 2.59.0-rc.0

package/lib/components/ScrollGradient/ScrollGradient.js

@@ -15,6 +15,7 @@ var devtools = require('../../global/js/utils/devtools.js');
 var settings = require('../../settings.js');
 var lodash = require('lodash');
 var constants = require('./constants.js');
+var useIsomorphicEffect = require('../../global/js/hooks/useIsomorphicEffect.js');
 
 var _excluded = ["children", "className", "color", "onScroll", "scrollElementClassName", "getScrollElementRef", "hideStartGradient"];
 var blockClass = "".concat(settings.pkg.prefix, "--scroll-gradient");
@@ -44,6 +45,13 @@ exports.ScrollGradient = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     _ref$hideStartGradien = _ref.hideStartGradient,
     hideStartGradient = _ref$hideStartGradien === void 0 ? defaults.hideStartGradient : _ref$hideStartGradien,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  var scrollContainer = React.useRef(undefined);
+  var contentChildrenContainer = React.useRef(undefined);
+  var _useIsOverflow = constants.useIsOverflow(scrollContainer),
+    xScrollable = _useIsOverflow.xScrollable,
+    yScrollable = _useIsOverflow.yScrollable;
+  var gradientRight = yScrollable && scrollContainer.current && contentChildrenContainer.current ? scrollContainer.current.offsetWidth - contentChildrenContainer.current.offsetWidth : 0;
+  var gradientBottom = xScrollable && scrollContainer.current && contentChildrenContainer.current ? scrollContainer.current.offsetHeight - contentChildrenContainer.current.offsetHeight : 0;
   var _useState = React.useState(constants.ScrollStates.NONE),
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
     verticalPosition = _useState2[0],
@@ -52,8 +60,26 @@ exports.ScrollGradient = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
     horizontalPosition = _useState4[0],
     setHorizontalPosition = _useState4[1];
-  var scrollContainer = React.useRef(undefined);
-  var contentChildrenContainer = React.useRef(undefined);
+  var startVerticalRef = React.useRef(null);
+  var startHorizontalRef = React.useRef(null);
+  var endVerticalRef = React.useRef(null);
+  var endHorizontalRef = React.useRef(null);
+  useIsomorphicEffect.useIsomorphicEffect(function () {
+    // start vertical styles
+    startVerticalRef.current.style.right = gradientRight;
+    startVerticalRef.current.style.backgroundImage = "linear-gradient(0deg, transparent, ".concat(color, " 90%)");
+    // start horizontal styles
+    startHorizontalRef.current.backgroundImage = "linear-gradient(-90deg, transparent, ".concat(color, " 90%)");
+    startHorizontalRef.current.bottom = gradientBottom;
+    // end vertical styles
+    endVerticalRef.current.style.right = gradientRight;
+    endVerticalRef.current.style.bottom = gradientBottom;
+    endVerticalRef.current.style.backgroundImage = "linear-gradient(0deg, ".concat(color, " 10%, transparent)");
+    // end horizontal styles
+    endHorizontalRef.current.style.right = gradientRight;
+    endHorizontalRef.current.style.bottom = gradientBottom;
+    endHorizontalRef.current.style.backgroundImage = "linear-gradient(-90deg, ".concat(color, " 10%, transparent)");
+  }, [color, gradientRight, gradientBottom]);
   var updateScrollState = lodash.throttle(function () {
     var updatedVerticalVal = constants.getScrollState(scrollContainer.current, constants.ScrollDirection.Y);
     var updatedHorizontalVal = constants.getScrollState(scrollContainer.current, constants.ScrollDirection.X);
@@ -71,11 +97,6 @@ exports.ScrollGradient = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   React.useEffect(function () {
     scrollHandler();
   }, [scrollHandler]);
-  var _useIsOverflow = constants.useIsOverflow(scrollContainer),
-    xScrollable = _useIsOverflow.xScrollable,
-    yScrollable = _useIsOverflow.yScrollable;
-  var gradientRight = yScrollable && scrollContainer.current && contentChildrenContainer.current ? scrollContainer.current.offsetWidth - contentChildrenContainer.current.offsetWidth : 0;
-  var gradientBottom = xScrollable && scrollContainer.current && contentChildrenContainer.current ? scrollContainer.current.offsetHeight - contentChildrenContainer.current.offsetHeight : 0;
   return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({}, rest, {
     className: cx(blockClass, "".concat(blockClass, "--x-").concat(horizontalPosition.toLowerCase()), "".concat(blockClass, "--y-").concat(verticalPosition.toLowerCase()), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "--x-scrollable"), xScrollable), "".concat(blockClass, "--y-scrollable"), yScrollable), className),
     ref: ref,
@@ -89,37 +110,23 @@ exports.ScrollGradient = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     ref: contentChildrenContainer,
     className: "".concat(blockClass, "__content-children")
   }, children)), !hideStartGradient && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    ref: startVerticalRef,
     className: "".concat(blockClass, "__start-vertical"),
-    style: {
-      right: gradientRight,
-      backgroundImage: "linear-gradient(0deg, transparent, ".concat(color, " 90%)")
-    },
     role: "presentation",
     "aria-hidden": true
   }), /*#__PURE__*/React.createElement("div", {
+    ref: startHorizontalRef,
     className: "".concat(blockClass, "__start-horizontal"),
-    style: {
-      backgroundImage: "linear-gradient(-90deg, transparent, ".concat(color, " 90%)"),
-      bottom: gradientBottom
-    },
     role: "presentation",
     "aria-hidden": true
   })), /*#__PURE__*/React.createElement("div", {
+    ref: endVerticalRef,
     className: "".concat(blockClass, "__end-vertical"),
-    style: {
-      right: gradientRight,
-      bottom: gradientBottom,
-      backgroundImage: "linear-gradient(0deg, ".concat(color, " 10%, transparent)")
-    },
     role: "presentation",
     "aria-hidden": true
   }), /*#__PURE__*/React.createElement("div", {
+    ref: endHorizontalRef,
     className: "".concat(blockClass, "__end-horizontal"),
-    style: {
-      right: gradientRight,
-      bottom: gradientBottom,
-      backgroundImage: "linear-gradient(-90deg, ".concat(color, " 10%, transparent)")
-    },
     role: "presentation",
     "aria-hidden": true
   }));

package/lib/components/StringFormatter/StringFormatter.js

@@ -16,6 +16,7 @@ var settings = require('../../settings.js');
 var react = require('@carbon/react');
 var enums = require('./utils/enums.js');
 var propsHelper = require('../../global/js/utils/props-helper.js');
+var useIsomorphicEffect = require('../../global/js/hooks/useIsomorphicEffect.js');
 
 var _excluded = ["className", "lines", "tooltipDirection", "truncate", "width", "value"];
 var blockClass = "".concat(settings.pkg.prefix, "--string-formatter");
@@ -43,12 +44,14 @@ exports.StringFormatter = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     width = _ref$width === void 0 ? defaults.width : _ref$width,
     value = _ref.value,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  var contentRef = React.useRef(null);
+  useIsomorphicEffect.useIsomorphicEffect(function () {
+    contentRef.current.style.maxWidth = width;
+    contentRef.current.style.WebkitLineClamp = lines;
+  }, [lines, width]);
   var stringFormatterContent = /*#__PURE__*/React.createElement("span", {
-    className: cx("".concat(blockClass, "--content"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "--truncate"), truncate)),
-    style: {
-      maxWidth: width,
-      WebkitLineClamp: lines
-    }
+    ref: contentRef,
+    className: cx("".concat(blockClass, "--content"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "--truncate"), truncate))
   }, value);
   return /*#__PURE__*/React.createElement("span", _rollupPluginBabelHelpers.extends({}, rest, {
     className: cx(blockClass, className),

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

@@ -26,10 +26,19 @@ export interface TagOverflowProps {
     allTagsModalTitle?: string;
     autoAlign?: boolean;
     className?: string;
-    containingElementRef?: RefObject<HTMLElement>;
+    /**
+     * @deprecated The `containingElementRef` prop is no longer going to be used in favor of the forwarded ref.
+     */
+    containingElementRef?: RefObject<HTMLDivElement>;
     items: TagOverflowItem[];
     maxVisible?: number;
+    /**
+     * @deprecated The `measurementOffset` prop is no longer going to be used. This value will now be calculated automatically.
+     */
     measurementOffset?: number;
+    /**
+     * @deprecated The `multiline` prop is no longer going to be used. This component should only be used when you need to hide overflowing items.
+     */
     multiline?: boolean;
     overflowAlign?: 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'left-bottom' | 'left-top' | 'right' | 'right-bottom' | 'right-top';
     overflowClassName?: string;

package/lib/components/TagOverflow/TagOverflow.js

@@ -18,12 +18,11 @@ var cx = require('classnames');
 var devtools = require('../../global/js/utils/devtools.js');
 var propsHelper = require('../../global/js/utils/props-helper.js');
 var settings = require('../../settings.js');
-var useResizeObserver = require('../../global/js/hooks/useResizeObserver.js');
+var useOverflowItems = require('../../global/js/hooks/useOverflowItems.js');
 
-var _excluded = ["align", "allTagsModalAriaLabel", "allTagsModalSearchLabel", "allTagsModalSearchPlaceholderText", "allTagsModalTarget", "allTagsModalTitle", "autoAlign", "className", "containingElementRef", "items", "maxVisible", "measurementOffset", "multiline", "overflowAlign", "overflowClassName", "overflowType", "onOverflowTagChange", "showAllTagsLabel", "tagComponent"],
-  _excluded2 = ["className", "id"],
-  _excluded3 = ["tagType"],
-  _excluded4 = ["id", "label", "tagType", "onClose", "filter"];
+var _excluded = ["align", "allTagsModalAriaLabel", "allTagsModalSearchLabel", "allTagsModalSearchPlaceholderText", "allTagsModalTarget", "allTagsModalTitle", "autoAlign", "className", "items", "maxVisible", "overflowAlign", "overflowClassName", "overflowType", "onOverflowTagChange", "showAllTagsLabel", "tagComponent"],
+  _excluded2 = ["className"],
+  _excluded3 = ["id", "label", "tagType", "onClose", "filter"];
 var blockClass = "".concat(settings.pkg.prefix, "--tag-overflow");
 var componentName = 'TagOverflow';
 var allTagsModalSearchThreshold = 10;
@@ -37,12 +36,8 @@ exports.TagOverflow = /*#__PURE__*/React.forwardRef(function (props, ref) {
     allTagsModalTitle = props.allTagsModalTitle,
     autoAlign = props.autoAlign,
     className = props.className,
-    containingElementRef = props.containingElementRef,
     items = props.items,
     maxVisible = props.maxVisible,
-    _props$measurementOff = props.measurementOffset,
-    measurementOffset = _props$measurementOff === void 0 ? 0 : _props$measurementOff,
-    multiline = props.multiline,
     _props$overflowAlign = props.overflowAlign,
     overflowAlign = _props$overflowAlign === void 0 ? 'bottom' : _props$overflowAlign,
     overflowClassName = props.overflowClassName,
@@ -52,119 +47,33 @@ exports.TagOverflow = /*#__PURE__*/React.forwardRef(function (props, ref) {
     showAllTagsLabel = props.showAllTagsLabel,
     tagComponent = props.tagComponent,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(props, _excluded);
-  var localContainerRef = React.useRef(null);
-  var containerRef = ref || localContainerRef;
-  var itemRefs = React.useRef(null);
-  var overflowRef = React.useRef(null);
-  // itemOffset is the value of margin applied on each items
-  // This value is required for calculating how many items will fit within the container
-  var itemOffset = 4;
-  var overflowIndicatorWidth = 40;
-  var _useState = React.useState(0),
+  var containerRef = React.useRef(null);
+  var offsetRef = React.useRef(null);
+  var _useState = React.useState(false),
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
-    containerWidth = _useState2[0],
-    setContainerWidth = _useState2[1];
-  var _useState3 = React.useState([]),
+    showAllModalOpen = _useState2[0],
+    setShowAllModalOpen = _useState2[1];
+  var _useState3 = React.useState(false),
     _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
-    visibleItems = _useState4[0],
-    setVisibleItems = _useState4[1];
-  var _useState5 = React.useState([]),
-    _useState6 = _rollupPluginBabelHelpers.slicedToArray(_useState5, 2),
-    overflowItems = _useState6[0],
-    setOverflowItems = _useState6[1];
-  var _useState7 = React.useState(false),
-    _useState8 = _rollupPluginBabelHelpers.slicedToArray(_useState7, 2),
-    showAllModalOpen = _useState8[0],
-    setShowAllModalOpen = _useState8[1];
-  var _useState9 = React.useState(false),
-    _useState10 = _rollupPluginBabelHelpers.slicedToArray(_useState9, 2),
-    popoverOpen = _useState10[0],
-    setPopoverOpen = _useState10[1];
-  var resizeElm = containingElementRef && containingElementRef.current ? containingElementRef : containerRef;
+    popoverOpen = _useState4[0],
+    setPopoverOpen = _useState4[1];
+  var _useOverflowItems = useOverflowItems.useOverflowItems(items, containerRef, offsetRef, maxVisible, onOverflowTagChange),
+    visibleItems = _useOverflowItems.visibleItems,
+    overflowItems = _useOverflowItems.hiddenItems,
+    itemRefHandler = _useOverflowItems.itemRefHandler;
   var handleShowAllClick = function handleShowAllClick() {
     setShowAllModalOpen(true);
   };
   var handleModalClose = function handleModalClose() {
     setShowAllModalOpen(false);
   };
-  var handleResize = function handleResize() {
-    if (typeof resizeElm !== 'function' && resizeElm.current) {
-      setContainerWidth(resizeElm.current.offsetWidth);
-    }
-  };
-  useResizeObserver.useResizeObserver(resizeElm, handleResize);
-  var getMap = function getMap() {
-    if (!itemRefs.current) {
-      itemRefs.current = new Map();
-    }
-    return itemRefs.current;
-  };
-  var itemRefHandler = function itemRefHandler(id, node) {
-    var map = getMap();
-    if (id && node && map.get(id) !== node.offsetWidth) {
-      map.set(id, node.offsetWidth);
-    }
-  };
-  var getVisibleItems = React.useCallback(function () {
-    if (!itemRefs.current) {
-      return items;
-    }
-    if (multiline) {
-      var _visibleItems = maxVisible ? items === null || items === void 0 ? void 0 : items.slice(0, maxVisible) : items;
-      return _visibleItems;
-    }
-    var map = getMap();
-    var optionalContainingElement = containingElementRef === null || containingElementRef === void 0 ? void 0 : containingElementRef.current;
-    var measurementOffsetValue = typeof measurementOffset === 'number' ? measurementOffset : 0;
-    var spaceAvailable = optionalContainingElement ? optionalContainingElement.offsetWidth - measurementOffsetValue : containerWidth;
-    var overflowContainerWidth = overflowRef && overflowRef.current && overflowRef.current.offsetWidth > overflowIndicatorWidth ? overflowRef.current.offsetWidth : overflowIndicatorWidth;
-    var maxWidth = spaceAvailable - overflowContainerWidth;
-    var childrenWidth = 0;
-    var maxReached = false;
-    return items.reduce(function (prev, cur) {
-      if (!maxReached) {
-        var itemWidth = (map ? Number(map.get(cur.id)) : 0) + itemOffset;
-        var fits = itemWidth + childrenWidth < maxWidth;
-        if (fits) {
-          childrenWidth += itemWidth;
-          prev.push(cur);
-        } else {
-          maxReached = true;
-        }
-      }
-      return prev;
-    }, []);
-  }, [containerWidth, containingElementRef, items, maxVisible, measurementOffset, multiline]);
   var getCustomComponent = function getCustomComponent(item, tagComponent) {
     var className = item.className,
-      id = item.id,
       other = _rollupPluginBabelHelpers.objectWithoutProperties(item, _excluded2);
     return /*#__PURE__*/React.createElement(tagComponent, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, other), {}, {
-      key: id,
-      className: cx("".concat(blockClass, "__item"), className),
-      ref: function ref(node) {
-        return itemRefHandler(id, node);
-      }
+      className: cx("".concat(blockClass, "__item"), className)
     }));
   };
-  React.useEffect(function () {
-    var visibleItemsArr = getVisibleItems();
-    if (maxVisible && maxVisible < visibleItemsArr.length) {
-      var _visibleItemsArr;
-      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 (_ref) {
-      var tagType = _ref.tagType,
-        other = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded3);
-      return _rollupPluginBabelHelpers.objectSpread2({
-        type: tagType
-      }, other);
-    });
-    setVisibleItems(visibleItemsArr);
-    setOverflowItems(overflowItemsArr);
-    onOverflowTagChange === null || onOverflowTagChange === void 0 || onOverflowTagChange(overflowItemsArr);
-  }, [getVisibleItems, items, maxVisible, onOverflowTagChange]);
   var handleTagOnClose = React.useCallback(function (onClose, index) {
     onClose === null || onClose === void 0 || onClose();
     if (index <= (visibleItems === null || visibleItems === void 0 ? void 0 : visibleItems.length) - 1) {
@@ -172,41 +81,40 @@ exports.TagOverflow = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }
   }, [visibleItems]);
   return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({}, rest, {
-    className: cx(blockClass, className, "".concat(blockClass, "--align-").concat(align), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "--multiline"), multiline)),
+    className: cx(blockClass, className)
+  }, devtools.getDevtoolsProps(componentName), {
+    ref: ref
+  }), /*#__PURE__*/React.createElement("div", {
+    className: cx("".concat(blockClass, "__visible-tags"), "".concat(blockClass, "--align-").concat(align)),
     ref: containerRef
-  }, devtools.getDevtoolsProps(componentName)), (visibleItems === null || visibleItems === void 0 ? void 0 : visibleItems.length) > 0 && visibleItems.map(function (item, index) {
-    // Render custom components
-    if (tagComponent) {
-      return getCustomComponent(item, tagComponent);
-    } else {
-      var id = item.id,
-        label = item.label,
-        tagType = item.tagType,
-        _onClose = item.onClose,
-        filter = item.filter,
-        other = _rollupPluginBabelHelpers.objectWithoutProperties(item, _excluded4);
-      // If there is no template prop, then render items as Tags
-      return /*#__PURE__*/React.createElement("div", {
-        ref: function ref(node) {
-          return itemRefHandler(id, node);
-        },
-        key: id
-      }, typeof _onClose === 'function' || filter ? /*#__PURE__*/React.createElement(react.DismissibleTag, _rollupPluginBabelHelpers.extends({}, other, {
-        className: "".concat(blockClass, "__item--tag"),
-        type: tagType,
-        onClose: function onClose() {
-          return handleTagOnClose(_onClose, index);
-        },
-        text: label
-      })) : /*#__PURE__*/React.createElement(react.Tag, _rollupPluginBabelHelpers.extends({}, other, {
-        className: "".concat(blockClass, "__item--tag"),
-        type: tagType
-      }), label));
-    }
-  }), /*#__PURE__*/React.createElement("span", {
+  }, visibleItems.map(function (item, index) {
+    var id = item.id,
+      label = item.label,
+      tagType = item.tagType,
+      _onClose = item.onClose,
+      filter = item.filter,
+      other = _rollupPluginBabelHelpers.objectWithoutProperties(item, _excluded3);
+    return /*#__PURE__*/React.createElement("div", {
+      className: "".concat(blockClass, "__tag-container"),
+      ref: function ref(node) {
+        itemRefHandler(id, node);
+      },
+      key: id
+    }, tagComponent ? getCustomComponent(item, tagComponent) : typeof _onClose === 'function' || filter ? /*#__PURE__*/React.createElement(react.DismissibleTag, _rollupPluginBabelHelpers.extends({}, other, {
+      className: "".concat(blockClass, "__item--tag"),
+      type: tagType,
+      onClose: function onClose() {
+        return handleTagOnClose(_onClose, index);
+      },
+      text: label
+    })) : /*#__PURE__*/React.createElement(react.Tag, _rollupPluginBabelHelpers.extends({}, other, {
+      className: "".concat(blockClass, "__item--tag"),
+      type: tagType
+    }), label));
+  }), overflowItems.length > 0 && /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass, "__indicator"),
-    ref: overflowRef
-  }, (overflowItems === null || overflowItems === void 0 ? void 0 : overflowItems.length) > 0 && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TagOverflowPopover.TagOverflowPopover, {
+    ref: offsetRef
+  }, /*#__PURE__*/React.createElement(TagOverflowPopover.TagOverflowPopover, {
     allTagsModalSearchThreshold: allTagsModalSearchThreshold,
     className: overflowClassName,
     onShowAllClick: handleShowAllClick,
@@ -215,7 +123,7 @@ exports.TagOverflow = /*#__PURE__*/React.forwardRef(function (props, ref) {
     overflowType: overflowType,
     showAllTagsLabel: showAllTagsLabel,
     key: "tag-overflow-popover",
-    ref: overflowRef,
+    ref: offsetRef,
     popoverOpen: popoverOpen,
     setPopoverOpen: setPopoverOpen,
     autoAlign: autoAlign
@@ -244,8 +152,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 (_ref) {
+  var items = _ref.items;
   return (items === null || items === void 0 ? void 0 : items.length) > allTagsModalSearchThreshold;
 });
 

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

@@ -8,19 +8,6 @@
 import { type ButtonProps } from '@carbon/react';
 import React, { PropsWithChildren, ReactNode } from 'react';
 import PropTypes from 'prop-types';
-/**
- * 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;
-};
 export interface TearsheetAction extends ButtonProps<'button'> {
     label?: string;
 }
@@ -48,6 +35,11 @@ export interface TearsheetProps extends PropsWithChildren {
      * An optional class or classes to be added to the outermost element.
      */
     className?: string;
+    /**
+     * The accessibility title for the close icon (if shown).
+     *
+     */
+    closeIconDescription?: string;
     /**
      * A description of the flow, displayed in the header area of the tearsheet.
      */
@@ -145,7 +137,7 @@ export interface TearsheetProps extends PropsWithChildren {
  * panel on either the left or right side, the main content area, and a set of
  * action buttons.
  */
-export declare let Tearsheet: React.ForwardRefExoticComponent<(TearsheetProps & CloseIconDescriptionTypes) & React.RefAttributes<HTMLDivElement>>;
+export declare let Tearsheet: React.ForwardRefExoticComponent<TearsheetProps & React.RefAttributes<HTMLDivElement>>;
 export declare const deprecatedProps: {
     /**
      * **Deprecated**

package/lib/components/Tearsheet/Tearsheet.js

@@ -21,14 +21,6 @@ var _excluded = ["influencerPosition", "influencerWidth"];
 var componentName = 'Tearsheet';
 
 // NOTE: the component SCSS is not imported here: it is rolled up separately.
-
-/**
- * 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.
@@ -124,15 +116,8 @@ exports.Tearsheet.propTypes = _rollupPluginBabelHelpers.objectSpread2({
   /**
    * 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.
    */
-  /**@ts-ignore */
-  closeIconDescription: index.default.string.isRequired.if(function (_ref2) {
-    var actions = _ref2.actions,
-      hasCloseIcon = _ref2.hasCloseIcon;
-    return TearsheetShell.tearsheetHasCloseIcon(actions, hasCloseIcon);
-  }),
+  closeIconDescription: index.default.string,
   /**
    * A description of the flow, displayed in the header area of the tearsheet.
    */
@@ -145,7 +130,6 @@ 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 header actions area, displayed alongside the title in

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

@@ -6,10 +6,9 @@
  */
 /// <reference path="../../../src/custom-typings/index.d.ts" />
 import { ButtonProps } from '@carbon/react';
-import { CloseIconDescriptionTypes } from './TearsheetShell';
 import React, { PropsWithChildren, ReactNode } from 'react';
 import PropTypes from 'prop-types';
-interface TearsheetNarrowBaseProps extends PropsWithChildren {
+export interface TearsheetNarrowProps 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
@@ -33,6 +32,11 @@ interface TearsheetNarrowBaseProps extends PropsWithChildren {
      * An optional class or classes to be added to the outermost element.
      */
     className?: string;
+    /**
+     * The accessibility title for the close icon (if shown).
+     *
+     */
+    closeIconDescription?: string;
     /**
      * A description of the flow, displayed in the header area of the tearsheet.
      */
@@ -90,7 +94,6 @@ interface TearsheetNarrowBaseProps extends PropsWithChildren {
      */
     verticalPosition?: 'normal' | 'lower';
 }
-export type TearsheetNarrowProps = TearsheetNarrowBaseProps & CloseIconDescriptionTypes;
 /**
  * A narrow tearsheet is a slimmer variant of the tearsheet, providing a dialog
  * that keeps users in-context and focused by bringing actionable content front
@@ -112,4 +115,3 @@ export declare const deprecatedProps: {
      */
     verticalPosition: PropTypes.Requireable<string>;
 };
-export {};

package/lib/components/Tearsheet/TearsheetNarrow.js

@@ -109,15 +109,8 @@ exports.TearsheetNarrow.propTypes = _rollupPluginBabelHelpers.objectSpread2({
   /**
    * 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.
    */
-  /**@ts-ignore */
-  closeIconDescription: index.default.string.isRequired.if(function (_ref2) {
-    var actions = _ref2.actions,
-      hasCloseIcon = _ref2.hasCloseIcon;
-    return TearsheetShell.tearsheetHasCloseIcon(actions, hasCloseIcon);
-  }),
+  closeIconDescription: index.default.string,
   /**
    * A description of the flow, displayed in the header area of the tearsheet.
    */
@@ -128,7 +121,6 @@ exports.TearsheetNarrow.propTypes = _rollupPluginBabelHelpers.objectSpread2({
    * the tearsheet is read-only or has no navigation actions (sometimes called
    * a "passive tearsheet").
    */
-  /**@ts-ignore*/
   hasCloseIcon: index.default.bool,
   /**
    * A label for the tearsheet, displayed in the header area of the tearsheet

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

@@ -14,6 +14,13 @@ interface TearsheetShellProps extends PropsWithChildren {
      * An optional class or classes to be added to the outermost element.
      */
     className?: string;
+    /**
+     * 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.
+     */
+    closeIconDescription?: string;
     /**
      * Used to track the current step on components which use `StepsContext` and `TearsheetShell`
      */
@@ -118,13 +125,6 @@ interface TearsheetShellProps extends PropsWithChildren {
      */
     slug?: ReactNode;
 }
-export type CloseIconDescriptionTypes = {
-    hasCloseIcon?: false;
-    closeIconDescription?: string;
-} | {
-    hasCloseIcon: true;
-    closeIconDescription: string;
-};
 export declare const tearsheetShellWideProps: string[];
 export declare const tearsheetIsPassive: (actions: any) => boolean;
 export declare const tearsheetHasCloseIcon: (actions: any, hasCloseIcon: any) => any;
@@ -135,7 +135,7 @@ export declare const tearsheetHasCloseIcon: (actions: any, hasCloseIcon: any) =>
  *
  * See the canvas tab for the component API details.
  * */
-export declare const TearsheetShell: React.ForwardRefExoticComponent<(TearsheetShellProps & CloseIconDescriptionTypes) & React.RefAttributes<HTMLDivElement>>;
+export declare const TearsheetShell: React.ForwardRefExoticComponent<TearsheetShellProps & React.RefAttributes<HTMLDivElement>>;
 export declare const portalType: PropTypes.Requireable<object>;
 export declare const deprecatedProps: {
     /**