@carbon/ibm-products 2.0.0-rc.3 → 2.0.0-rc.32

package/lib/components/Tearsheet/TearsheetNarrow.js

@@ -1,44 +1,41 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.deprecatedProps = exports.TearsheetNarrow = void 0;
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _devtools = require("../../global/js/utils/devtools");
-
 var _propsHelper = require("../../global/js/utils/props-helper");
-
 var _settings = require("../../settings");
-
 var _react2 = require("@carbon/react");
-
 var _ActionSet = require("../ActionSet");
-
 var _TearsheetShell = require("./TearsheetShell");
-
 var _excluded = ["verticalPosition"];
-
+/**
+ * Copyright IBM Corp. 2020, 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+// Import portions of React that are needed.
+// Other standard imports.
+// Carbon and package components we use.
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var componentName = 'TearsheetNarrow';
 
-var componentName = 'TearsheetNarrow'; // NOTE: the component SCSS is not imported here: it is rolled up separately.
-// Default values for props
+// NOTE: the component SCSS is not imported here: it is rolled up separately.
 
+// Default values for props
 var defaults = {
   verticalPosition: 'lower'
 };
+
 /**
  * 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
@@ -47,23 +44,23 @@ var defaults = {
  * A narrow tearsheet comprises 3 zones: a heading area including a title, the
  * main content area, and a set of action buttons.
  */
-
 var TearsheetNarrow = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   var _ref$verticalPosition = _ref.verticalPosition,
-      verticalPosition = _ref$verticalPosition === void 0 ? defaults.verticalPosition : _ref$verticalPosition,
-      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+    verticalPosition = _ref$verticalPosition === void 0 ? defaults.verticalPosition : _ref$verticalPosition,
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   return /*#__PURE__*/_react.default.createElement(_TearsheetShell.TearsheetShell, _objectSpread(_objectSpread(_objectSpread({}, (0, _devtools.getDevtoolsProps)(componentName)), (0, _propsHelper.prepareProps)(rest, _TearsheetShell.tearsheetShellWideProps)), {}, {
     verticalPosition: verticalPosition,
     ref: ref,
     size: 'narrow'
   }));
-}); // Return a placeholder if not released and not enabled by feature flag
-
+});
 
+// Return a placeholder if not released and not enabled by feature flag
 exports.TearsheetNarrow = TearsheetNarrow;
-exports.TearsheetNarrow = TearsheetNarrow = _settings.pkg.checkComponentEnabled(TearsheetNarrow, componentName); // The display name of the component, used by React. Note that displayName
-// is used in preference to relying on function.name.
+exports.TearsheetNarrow = TearsheetNarrow = _settings.pkg.checkComponentEnabled(TearsheetNarrow, componentName);
 
+// The display name of the component, used by React. Note that displayName
+// is used in preference to relying on function.name.
 TearsheetNarrow.displayName = componentName;
 var deprecatedProps = {
   /**
@@ -76,12 +73,14 @@ var deprecatedProps = {
    * to allow an action bar navigation or breadcrumbs to also show through.
    */
   verticalPosition: _propTypes.default.oneOf(['normal', 'lower'])
-}; // The types and DocGen commentary for the component props,
+};
+
+// 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 Tearsheet and TearsheetShell components.
-
 exports.deprecatedProps = deprecatedProps;
 TearsheetNarrow.propTypes = _objectSpread({
   /**
@@ -106,12 +105,10 @@ TearsheetNarrow.propTypes = _objectSpread({
     // we duplicate this Button prop to improve the DocGen here
     onClick: _react2.Button.propTypes.onClick
   })))]),
-
   /**
    * An optional class or classes to be added to the outermost element.
    */
   className: _propTypes.default.string,
-
   /**
    * The accessibility title for the close icon (if shown).
    *
@@ -120,15 +117,13 @@ TearsheetNarrow.propTypes = _objectSpread({
    */
   closeIconDescription: _propTypes.default.string.isRequired.if(function (_ref2) {
     var actions = _ref2.actions,
-        hasCloseIcon = _ref2.hasCloseIcon;
+      hasCloseIcon = _ref2.hasCloseIcon;
     return (0, _TearsheetShell.tearsheetHasCloseIcon)(actions, hasCloseIcon);
   }),
-
   /**
    * A description of the flow, displayed in the header area of the tearsheet.
    */
   description: _propTypes.default.node,
-
   /**
    * Enable a close icon ('x') in the header area of the tearsheet. By default,
    * a tearsheet does not display a close icon, but one should be enabled if
@@ -136,26 +131,26 @@ TearsheetNarrow.propTypes = _objectSpread({
    * a "passive tearsheet").
    */
   hasCloseIcon: _propTypes.default.bool,
-
   /**
    * 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: _propTypes.default.node,
-
   /**
    * 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: _propTypes.default.func,
-
   /**
    * Specifies whether the tearsheet is currently open.
    */
   open: _propTypes.default.bool,
-
+  /**
+   * The DOM node the tearsheet should be rendered within. Defaults to document.body.
+   */
+  portalTarget: _propTypes.default.node,
   /**
    * The main title of the tearsheet, displayed in the header area.
    */

package/lib/components/Tearsheet/TearsheetShell.js

@@ -1,113 +1,98 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.tearsheetShellWideProps = exports.tearsheetIsPassive = exports.tearsheetHasCloseIcon = exports.deprecatedProps = exports.TearsheetShell = void 0;
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _reactDom = require("react-dom");
-
-var _reactResizeDetector = require("react-resize-detector");
-
+var _useResizeObserver2 = require("../../global/js/hooks/useResizeObserver");
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _settings = require("../../settings");
-
 var _pconsole = _interopRequireDefault(require("../../global/js/utils/pconsole"));
-
 var _react2 = require("@carbon/react");
-
 var _ActionSet = require("../ActionSet");
-
 var _Wrap = require("../../global/js/utils/Wrap");
-
 var _excluded = ["actions", "children", "className", "closeIconDescription", "description", "hasCloseIcon", "headerActions", "influencer", "influencerPosition", "influencerWidth", "label", "navigation", "onClose", "open", "selectorPrimaryFocus", "size", "portalTarget", "title", "verticalPosition"];
-
+/**
+ * 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.
+ */
+// Import portions of React that are needed.
+// Other standard imports.
+// Carbon and package components we use.
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 // The block part of our conventional BEM class names (bc__E--M).
 var bc = "".concat(_settings.pkg.prefix, "--tearsheet");
 var componentName = 'TearsheetShell';
-var maxDepth = 3; // NOTE: the component SCSS is not imported here: it is rolled up separately.
+var maxDepth = 3;
+
+// NOTE: the component SCSS is not imported here: it is rolled up separately.
+
 // Global data structure to communicate the state of tearsheet stacking
 // (i.e. when more than one tearsheet is open). Each tearsheet supplies a
 // handler to be called whenever the stacking of the tearsheets changes, which
 // happens when a tearsheet opens or closes. The 'open' array contains one
 // handler per OPEN tearsheet ordered from lowest to highest in visual z-order.
 // The 'all' array contains all the handlers for open and closed tearsheets.
-
 var stack = {
   open: [],
   all: []
-}; // these props are only applicable when size='wide'
+};
 
+// these props are only applicable when size='wide'
 var tearsheetShellWideProps = ['headerActions', 'influencer', 'influencerPosition', 'influencerWidth', 'navigation'];
 exports.tearsheetShellWideProps = tearsheetShellWideProps;
-
 var tearsheetIsPassive = function tearsheetIsPassive(actions) {
   return !actions || !(actions !== null && actions !== void 0 && actions.length);
 };
-
 exports.tearsheetIsPassive = tearsheetIsPassive;
-
 var tearsheetHasCloseIcon = function tearsheetHasCloseIcon(actions, hasCloseIcon) {
   return hasCloseIcon !== null && hasCloseIcon !== void 0 ? hasCloseIcon : tearsheetIsPassive(actions);
-}; // TearSheetShell is used internally by TearSheet and TearSheetNarrow
-
+};
 
+// TearSheetShell is used internally by TearSheet and TearSheetNarrow
 exports.tearsheetHasCloseIcon = tearsheetHasCloseIcon;
-
 var TearsheetShell = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   var actions = _ref.actions,
-      children = _ref.children,
-      className = _ref.className,
-      closeIconDescription = _ref.closeIconDescription,
-      description = _ref.description,
-      hasCloseIcon = _ref.hasCloseIcon,
-      headerActions = _ref.headerActions,
-      influencer = _ref.influencer,
-      influencerPosition = _ref.influencerPosition,
-      influencerWidth = _ref.influencerWidth,
-      label = _ref.label,
-      navigation = _ref.navigation,
-      onClose = _ref.onClose,
-      open = _ref.open,
-      selectorPrimaryFocus = _ref.selectorPrimaryFocus,
-      size = _ref.size,
-      portalTargetIn = _ref.portalTarget,
-      title = _ref.title,
-      verticalPosition = _ref.verticalPosition,
-      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+    children = _ref.children,
+    className = _ref.className,
+    closeIconDescription = _ref.closeIconDescription,
+    description = _ref.description,
+    hasCloseIcon = _ref.hasCloseIcon,
+    headerActions = _ref.headerActions,
+    influencer = _ref.influencer,
+    influencerPosition = _ref.influencerPosition,
+    influencerWidth = _ref.influencerWidth,
+    label = _ref.label,
+    navigation = _ref.navigation,
+    onClose = _ref.onClose,
+    open = _ref.open,
+    selectorPrimaryFocus = _ref.selectorPrimaryFocus,
+    size = _ref.size,
+    portalTargetIn = _ref.portalTarget,
+    title = _ref.title,
+    verticalPosition = _ref.verticalPosition,
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var carbonPrefix = (0, _react2.usePrefix)();
-  var bcModalHeader = "".concat(carbonPrefix, "--modal-header"); // node the modal tearsheet is hosted in
-
+  var bcModalHeader = "".concat(carbonPrefix, "--modal-header");
+  // node the modal tearsheet is hosted in
   var _useState = (0, _react.useState)(null),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      portalTarget = _useState2[0],
-      setPortalTarget = _useState2[1];
-
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    portalTarget = _useState2[0],
+    setPortalTarget = _useState2[1];
   (0, _react.useEffect)(function () {
     if (portalTargetIn) {
       setPortalTarget(portalTargetIn);
@@ -118,92 +103,89 @@ var TearsheetShell = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
     }
   }, [portalTargetIn]);
   var localRef = (0, _react.useRef)();
+  var resizer = (0, _react.useRef)(null);
   var modalRef = ref || localRef;
+  var _useResizeObserver = (0, _useResizeObserver2.useResizeObserver)(resizer),
+    width = _useResizeObserver.width;
+  var wide = size === 'wide';
 
-  var _useResizeDetector = (0, _reactResizeDetector.useResizeDetector)({
-    handleHeight: false
-  }),
-      width = _useResizeDetector.width,
-      resizer = _useResizeDetector.ref; // Keep track of the stack depth and our position in it (1-based, 0=closed)
-
-
+  // Keep track of the stack depth and our position in it (1-based, 0=closed)
   var _useState3 = (0, _react.useState)(0),
-      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      depth = _useState4[0],
-      setDepth = _useState4[1];
-
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    depth = _useState4[0],
+    setDepth = _useState4[1];
   var _useState5 = (0, _react.useState)(0),
-      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-      position = _useState6[0],
-      setPosition = _useState6[1]; // Keep a record of the previous value of depth.
-
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    position = _useState6[0],
+    setPosition = _useState6[1];
 
+  // Keep a record of the previous value of depth.
   var prevDepth = (0, _react.useRef)();
   (0, _react.useEffect)(function () {
     prevDepth.current = depth;
-  }); // A "passive" tearsheet is one with no navigation actions.
+  });
 
+  // A "passive" tearsheet is one with no navigation actions.
   var isPassive = tearsheetIsPassive(actions);
-  var effectiveHasCloseIcon = tearsheetHasCloseIcon(actions, hasCloseIcon); // Callback that will be called whenever the stacking order changes.
-  // position is 1-based with 0 indicating closed.
+  var effectiveHasCloseIcon = tearsheetHasCloseIcon(actions, hasCloseIcon);
 
+  // Callback that will be called whenever the stacking order changes.
+  // position is 1-based with 0 indicating closed.
   function handleStackChange(newDepth, newPosition) {
     setDepth(newDepth);
     setPosition(newPosition);
   }
-
   handleStackChange.checkFocus = function () {
     // if we are now the topmost tearsheet, ensure we have focus
     if (position === depth && modalRef.current && !modalRef.current.contains(document.activeElement)) {
       handleStackChange.claimFocus();
     }
-  }; // Callback to give the tearsheet the opportunity to claim focus
-
+  };
 
+  // Callback to give the tearsheet the opportunity to claim focus
   handleStackChange.claimFocus = function () {
     var element = selectorPrimaryFocus ? modalRef.current.querySelector(selectorPrimaryFocus) : modalRef.current;
     setTimeout(function () {
       return element.focus();
     }, 1);
   };
-
   (0, _react.useEffect)(function () {
     var notify = function notify() {
       return stack.all.forEach(function (handler) {
         handler(Math.min(stack.open.length, maxDepth), stack.open.indexOf(handler) + 1);
         handler.checkFocus();
       });
-    }; // Register this tearsheet's stack change callback/listener.
+    };
 
+    // Register this tearsheet's stack change callback/listener.
+    stack.all.push(handleStackChange);
 
-    stack.all.push(handleStackChange); // If the tearsheet is mounting with open=true or open is changing from
+    // If the tearsheet is mounting with open=true or open is changing from
     // false to true to open it then append its notification callback to
     // the end of the stack array (as its ID), and call all the callbacks
     // to notify all open tearsheets that the stacking has changed.
-
     if (open) {
       stack.open.push(handleStackChange);
       notify();
-    } // Cleanup function called whenever the tearsheet unmounts or the open
+    }
+
+    // Cleanup function called whenever the tearsheet unmounts or the open
     // prop changes value (in which case it is called prior to this hook
     // being called again).
-
-
     return function cleanup() {
       // Remove the notification callback from the all handlers array.
-      stack.all.splice(stack.all.indexOf(handleStackChange), 1); // Remove the notification callback from the open handlers array, if
+      stack.all.splice(stack.all.indexOf(handleStackChange), 1);
+
+      // Remove the notification callback from the open handlers array, if
       // it's there, and notify all open tearsheets that the stacking has
       // changed (only necessary if this tearsheet was open).
-
       var openIndex = stack.open.indexOf(handleStackChange);
-
       if (openIndex >= 0) {
         stack.open.splice(openIndex, 1);
         notify();
       }
     };
   }, [open]);
-
   function handleFocus() {
     // If something within us is receiving focus but we are not the topmost
     // stacked tearsheet, transfer focus to the topmost tearsheet instead
@@ -211,22 +193,22 @@ var TearsheetShell = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
       stack.open[stack.open.length - 1].claimFocus();
     }
   }
-
   if (position <= depth) {
     var _cx, _ref2, _cx3, _cx5, _cx6;
-
     // Include a modal header if and only if one or more of these is given.
     // We can't use a Wrap for the ModalHeader because ComposedModal requires
     // the direct child to be the ModalHeader instance.
-    var includeHeader = label || title || description || headerActions || navigation || effectiveHasCloseIcon; // Include an ActionSet if and only if one or more actions is given.
+    var includeHeader = label || title || description || headerActions || navigation || effectiveHasCloseIcon;
 
+    // Include an ActionSet if and only if one or more actions is given.
     var includeActions = actions && (actions === null || actions === void 0 ? void 0 : actions.length) > 0;
     return (portalTarget ? _reactDom.createPortal : function (children) {
       return children;
     })( /*#__PURE__*/_react.default.createElement(_react2.ComposedModal, (0, _extends2.default)({}, rest, {
       "aria-label": title,
-      className: (0, _classnames.default)(bc, className, (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(bc, "--stacked-").concat(position, "-of-").concat(depth), // Don't apply this on the initial open of a single tearsheet.
-      depth > 1 || depth === 1 && prevDepth.current > 1), (0, _defineProperty2.default)(_cx, "".concat(bc, "--wide"), size === 'wide'), (0, _defineProperty2.default)(_cx, "".concat(bc, "--narrow"), size !== 'wide'), _cx)),
+      className: (0, _classnames.default)(bc, className, (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(bc, "--stacked-").concat(position, "-of-").concat(depth),
+      // Don't apply this on the initial open of a single tearsheet.
+      depth > 1 || depth === 1 && prevDepth.current > 1), (0, _defineProperty2.default)(_cx, "".concat(bc, "--wide"), wide), (0, _defineProperty2.default)(_cx, "".concat(bc, "--narrow"), !wide), _cx)),
       style: (_ref2 = {}, (0, _defineProperty2.default)(_ref2, "--".concat(bc, "--stacking-scale-factor-single"), (width - 32) / width), (0, _defineProperty2.default)(_ref2, "--".concat(bc, "--stacking-scale-factor-double"), (width - 64) / width), _ref2),
       containerClassName: (0, _classnames.default)("".concat(bc, "__container"), (0, _defineProperty2.default)({}, "".concat(bc, "__container--lower"), verticalPosition === 'lower')),
       onClose: onClose,
@@ -267,11 +249,13 @@ var TearsheetShell = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
     }, influencer), /*#__PURE__*/_react.default.createElement(_Wrap.Wrap, {
       className: "".concat(bc, "__right")
     }, /*#__PURE__*/_react.default.createElement(_Wrap.Wrap, {
+      className: "".concat(bc, "__main"),
       alwaysRender: includeActions,
-      className: "".concat(bc, "__main")
+      element: wide ? _react2.Layer : undefined
     }, /*#__PURE__*/_react.default.createElement(_Wrap.Wrap, {
+      className: "".concat(bc, "__content"),
       alwaysRender: influencer && influencerPosition === 'right',
-      className: "".concat(bc, "__content")
+      element: wide ? _react2.Layer : undefined
     }, children), /*#__PURE__*/_react.default.createElement(_Wrap.Wrap, {
       className: (0, _classnames.default)((_cx6 = {}, (0, _defineProperty2.default)(_cx6, "".concat(bc, "__influencer"), true), (0, _defineProperty2.default)(_cx6, "".concat(bc, "__influencer--wide"), influencerWidth === 'wide'), _cx6)),
       neverRender: influencerPosition !== 'right'
@@ -279,22 +263,21 @@ var TearsheetShell = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
       className: "".concat(bc, "__button-container")
     }, /*#__PURE__*/_react.default.createElement(_ActionSet.ActionSet, {
       actions: actions,
-      buttonSize: size === 'wide' ? 'xl' : null,
+      buttonSize: wide ? '2xl' : null,
       className: "".concat(bc, "__buttons"),
-      size: size === 'wide' ? '2xl' : 'lg'
+      size: wide ? '2xl' : 'lg'
     })))), /*#__PURE__*/_react.default.createElement("div", {
       className: "".concat(bc, "__resize-detector"),
       ref: resizer
     })), portalTarget);
   } else {
     _pconsole.default.warn('Tearsheet not rendered: maximum stacking depth exceeded.');
-
     return null;
   }
-}); // The display name of the component, used by React. Note that displayName
-// is used in preference to relying on function.name.
-
+});
 
+// The display name of the component, used by React. Note that displayName
+// is used in preference to relying on function.name.
 exports.TearsheetShell = TearsheetShell;
 TearsheetShell.displayName = componentName;
 var deprecatedProps = {
@@ -308,12 +291,14 @@ var deprecatedProps = {
    * to allow an action bar navigation or breadcrumbs to also show through.
    */
   verticalPosition: _propTypes.default.oneOf(['normal', 'lower'])
-}; // The types and DocGen commentary for the component props,
+};
+
+// 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 Tearsheet and TearsheetNarrow components.
-
 exports.deprecatedProps = deprecatedProps;
 TearsheetShell.propTypes = _objectSpread({
   /**
@@ -329,7 +314,8 @@ TearsheetShell.propTypes = _objectSpread({
    *
    * See https://react.carbondesignsystem.com/?path=/docs/components-button--default#component-api
    */
-  actions: _propTypes.default.arrayOf( // NB we don't include the validator here, as the component wrapping this
+  actions: _propTypes.default.arrayOf(
+  // NB we don't include the validator here, as the component wrapping this
   // one should ensure appropriate validation is done.
   _propTypes.default.shape(_objectSpread(_objectSpread({}, _react2.Button.propTypes), {}, {
     kind: _propTypes.default.oneOf(['ghost', 'danger--ghost', 'secondary', 'danger', 'primary']),
@@ -338,17 +324,14 @@ TearsheetShell.propTypes = _objectSpread({
     // we duplicate this Button prop to improve the DocGen here
     onClick: _react2.Button.propTypes.onClick
   }))),
-
   /**
    * The main content of the tearsheet.
    */
   children: _propTypes.default.node,
-
   /**
    * An optional class or classes to be added to the outermost element.
    */
   className: _propTypes.default.string,
-
   /**
    * The accessibility title for the close icon (if shown).
    *
@@ -357,15 +340,13 @@ TearsheetShell.propTypes = _objectSpread({
    */
   closeIconDescription: _propTypes.default.string.isRequired.if(function (_ref3) {
     var actions = _ref3.actions,
-        hasCloseIcon = _ref3.hasCloseIcon;
+      hasCloseIcon = _ref3.hasCloseIcon;
     return tearsheetHasCloseIcon(actions, hasCloseIcon);
   }),
-
   /**
    * A description of the flow, displayed in the header area of the tearsheet.
    */
   description: _propTypes.default.node,
-
   /**
    * 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
@@ -375,7 +356,6 @@ TearsheetShell.propTypes = _objectSpread({
    * this prop to either true or false.
    */
   hasCloseIcon: _propTypes.default.bool,
-
   /**
    * The content for the header actions area, displayed alongside the title in
    * the header area of the tearsheet. This is typically a drop-down, or a set
@@ -383,7 +363,6 @@ TearsheetShell.propTypes = _objectSpread({
    * wide tearsheets.
    */
   headerActions: _propTypes.default.element,
-
   /**
    * The content for the influencer section of the tearsheet, displayed
    * alongside the main content. This is typically a menu, or filter, or
@@ -391,54 +370,45 @@ TearsheetShell.propTypes = _objectSpread({
    * wide tearsheets.
    */
   influencer: _propTypes.default.element,
-
   /**
    * The position of the influencer section, 'left' or 'right'.
    */
   influencerPosition: _propTypes.default.oneOf(['left', 'right']),
-
   /**
    * The width of the influencer: 'narrow' (the default) is 256px, and 'wide'
    * is 320px.
    */
   influencerWidth: _propTypes.default.oneOf(['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: _propTypes.default.node,
-
   /**
    * 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
    * for wide tearsheets.
    */
   navigation: _propTypes.default.element,
-
   /**
    * 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: _propTypes.default.func,
-
   /**
    * Specifies whether the tearsheet is currently open.
    */
   open: _propTypes.default.bool,
-
   /**
-   * portal target for the all tags modal
+   * The DOM node the tearsheet should be rendered within. Defaults to document.body.
    */
   portalTarget: _propTypes.default.node,
-
   /**
    * Specifies the width of the tearsheet, 'narrow' or 'wide'.
    */
   size: _propTypes.default.oneOf(['narrow', 'wide']).isRequired,
-
   /**
    * The main title of the tearsheet, displayed in the header area.
    */

package/lib/components/Tearsheet/index.js

@@ -15,7 +15,5 @@ Object.defineProperty(exports, "TearsheetNarrow", {
     return _TearsheetNarrow.TearsheetNarrow;
   }
 });
-
 var _Tearsheet = require("./Tearsheet");
-
 var _TearsheetNarrow = require("./TearsheetNarrow");