@carbon/ibm-products 2.65.0 → 2.66.0

package/es/components/Tearsheet/TearsheetShell.js

@@ -5,17 +5,16 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectSpread2 as _objectSpread2, objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, defineProperty as _defineProperty, extends as _extends, toConsumableArray as _toConsumableArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { useRef, useState, useEffect } from 'react';
 import { useResizeObserver } from '../../global/js/hooks/useResizeObserver.js';
 import PropTypes from '../../_virtual/index.js';
 import cx from 'classnames';
 import { pkg } from '../../settings.js';
 import pconsole from '../../global/js/utils/pconsole.js';
-import { getNodeTextContent as _getNodeTextContent } from '../../global/js/utils/getNodeTextContent.js';
+import { getNodeTextContent } from '../../global/js/utils/getNodeTextContent.js';
 import { deprecateProp } from '../../global/js/utils/props-helper.js';
-import { checkHeightOverflow } from '../../global/js/utils/checkForOverflow.js';
-import { Button, usePrefix, unstable_FeatureFlags, ComposedModal, ModalHeader, Layer, DefinitionTooltip, Section } from '@carbon/react';
+import { Button, usePrefix, unstable_FeatureFlags, ComposedModal, ModalHeader, Layer, Section } from '@carbon/react';
 import { ActionSet } from '../ActionSet/ActionSet.js';
 import { Wrap } from '../../global/js/utils/Wrap.js';
 import { usePortalTarget } from '../../global/js/hooks/usePortalTarget.js';
@@ -23,12 +22,10 @@ import { useFocus } from '../../global/js/hooks/useFocus.js';
 import { usePreviousValue } from '../../global/js/hooks/usePreviousValue.js';
 import { useIsomorphicEffect } from '../../global/js/hooks/useIsomorphicEffect.js';
 
-var _excluded = ["children"],
-  _excluded2 = ["actions", "decorator", "ariaLabel", "children", "className", "closeIconDescription", "currentStep", "description", "hasCloseIcon", "hasError", "headerActions", "influencer", "influencerPosition", "influencerWidth", "label", "navigation", "onClose", "open", "portalTarget", "selectorPrimaryFocus", "selectorsFloatingMenus", "size", "slug", "title", "verticalPosition", "launcherButtonRef"];
 // The block part of our conventional BEM class names (bc__E--M).
-var bc = "".concat(pkg.prefix, "--tearsheet");
-var componentName = 'TearsheetShell';
-var maxDepth = 3;
+const bc = `${pkg.prefix}--tearsheet`;
+const componentName = 'TearsheetShell';
+const maxDepth = 3;
 
 // NOTE: the component SCSS is not imported here: it is rolled up separately.
 
@@ -42,28 +39,26 @@ var maxDepth = 3;
 // This is so we can opt-out of including the stacking scale effect when there
 // are stacked tearsheets with mixed sizes (ie, using wide and narrow together)
 
-var stack = {
+const stack = {
   open: [],
   all: [],
   sizes: []
 };
 
 // these props are only applicable when size='wide'
-var tearsheetShellWideProps = ['headerActions', 'influencer', 'influencerPosition', 'influencerWidth', 'navigation'];
-var tearsheetIsPassive = function tearsheetIsPassive(actions) {
-  return !actions || !(actions !== null && actions !== void 0 && actions.length);
-};
-var tearsheetHasCloseIcon = function tearsheetHasCloseIcon(actions, hasCloseIcon) {
-  return hasCloseIcon !== null && hasCloseIcon !== void 0 ? hasCloseIcon : tearsheetIsPassive(actions);
-};
+const tearsheetShellWideProps = ['headerActions', 'influencer', 'influencerPosition', 'influencerWidth', 'navigation'];
+const tearsheetIsPassive = actions => !actions || !actions?.length;
+const tearsheetHasCloseIcon = (actions, hasCloseIcon) => hasCloseIcon ?? tearsheetIsPassive(actions);
 
 /**
  * Since the Tearsheet has an H3 heading, any headings inside the Tearsheet should start at H4.
  * This is a helper to do that.
  */
-var SectionLevel3 = function SectionLevel3(_ref) {
-  var children = _ref.children,
-    rest = _objectWithoutProperties(_ref, _excluded);
+const SectionLevel3 = _ref => {
+  let {
+    children,
+    ...rest
+  } = _ref;
   return /*#__PURE__*/React__default.createElement(Section, _extends({
     level: 3
   }, rest), children);
@@ -76,77 +71,69 @@ var SectionLevel3 = function SectionLevel3(_ref) {
  *
  * See the canvas tab for the component API details.
  * */
-var TearsheetShell = /*#__PURE__*/React__default.forwardRef(function (_ref2, ref) {
-  var actions = _ref2.actions,
-    decorator = _ref2.decorator,
-    ariaLabel = _ref2.ariaLabel,
-    children = _ref2.children,
-    className = _ref2.className,
-    _ref2$closeIconDescri = _ref2.closeIconDescription,
-    closeIconDescription = _ref2$closeIconDescri === void 0 ? 'Close' : _ref2$closeIconDescri,
-    currentStep = _ref2.currentStep,
-    description = _ref2.description,
-    hasCloseIcon = _ref2.hasCloseIcon,
-    hasError = _ref2.hasError,
-    headerActions = _ref2.headerActions,
-    influencer = _ref2.influencer,
-    influencerPosition = _ref2.influencerPosition,
-    influencerWidth = _ref2.influencerWidth,
-    label = _ref2.label,
-    navigation = _ref2.navigation,
-    onClose = _ref2.onClose,
-    open = _ref2.open,
-    portalTargetIn = _ref2.portalTarget,
-    selectorPrimaryFocus = _ref2.selectorPrimaryFocus,
-    _ref2$selectorsFloati = _ref2.selectorsFloatingMenus,
-    selectorsFloatingMenus = _ref2$selectorsFloati === void 0 ? [] : _ref2$selectorsFloati,
-    size = _ref2.size,
-    deprecated_slug = _ref2.slug,
-    title = _ref2.title,
-    verticalPosition = _ref2.verticalPosition,
-    launcherButtonRef = _ref2.launcherButtonRef,
-    rest = _objectWithoutProperties(_ref2, _excluded2);
-  var carbonPrefix = usePrefix();
-  var bcModalHeader = "".concat(carbonPrefix, "--modal-header");
-  var renderPortalUse = usePortalTarget(portalTargetIn);
-  var localRef = useRef(undefined);
-  var resizer = useRef(null);
-  var modalBodyRef = useRef(null);
-  var modalRef = ref || localRef;
-  var _useResizeObserver = useResizeObserver(resizer),
-    width = _useResizeObserver.width;
-  var prevOpen = usePreviousValue(open);
-  var _useFocus = useFocus(modalRef, selectorPrimaryFocus),
-    keyDownListener = _useFocus.keyDownListener,
-    claimFocus = _useFocus.claimFocus;
+const TearsheetShell = /*#__PURE__*/React__default.forwardRef((_ref2, ref) => {
+  let {
+    // The component props, in alphabetical order (for consistency).
+    actions,
+    decorator,
+    ariaLabel,
+    children,
+    className,
+    closeIconDescription = 'Close',
+    currentStep,
+    description,
+    hasCloseIcon,
+    hasError,
+    headerActions,
+    influencer,
+    influencerPosition,
+    influencerWidth,
+    label,
+    navigation,
+    onClose,
+    open,
+    portalTarget: portalTargetIn,
+    selectorPrimaryFocus,
+    selectorsFloatingMenus = [],
+    size,
+    slug: deprecated_slug,
+    title,
+    verticalPosition,
+    launcherButtonRef,
+    // Collect any other property values passed in.
+    ...rest
+  } = _ref2;
+  const carbonPrefix = usePrefix();
+  const bcModalHeader = `${carbonPrefix}--modal-header`;
+  const renderPortalUse = usePortalTarget(portalTargetIn);
+  const localRef = useRef(undefined);
+  const resizer = useRef(null);
+  const modalBodyRef = useRef(null);
+  const modalRef = ref || localRef;
+  const {
+    width
+  } = useResizeObserver(resizer);
+  const prevOpen = usePreviousValue(open);
+  const {
+    keyDownListener,
+    claimFocus
+  } = useFocus(modalRef, selectorPrimaryFocus);
   modalRef.current;
-  var descriptionRef = useRef(null);
-  var isOverflowing = checkHeightOverflow(descriptionRef.current);
-  var descriptionContent = /*#__PURE__*/React__default.createElement("span", {
-    ref: descriptionRef,
-    className: "".concat(bc, "__description-text")
-  }, description);
-  var wide = size === 'wide';
+  const wide = size === 'wide';
 
   // Keep track of the stack depth and our position in it (1-based, 0=closed)
-  var _useState = useState(0),
-    _useState2 = _slicedToArray(_useState, 2),
-    depth = _useState2[0],
-    setDepth = _useState2[1];
-  var _useState3 = useState(0),
-    _useState4 = _slicedToArray(_useState3, 2),
-    position = _useState4[0],
-    setPosition = _useState4[1];
+  const [depth, setDepth] = useState(0);
+  const [position, setPosition] = useState(0);
 
   // Keep a record of the previous value of depth.
-  var prevDepth = useRef(undefined);
-  useEffect(function () {
+  const prevDepth = useRef(undefined);
+  useEffect(() => {
     prevDepth.current = depth;
   });
 
   // A "passive" tearsheet is one with no navigation actions.
-  var isPassive = tearsheetIsPassive(actions);
-  var effectiveHasCloseIcon = tearsheetHasCloseIcon(actions, hasCloseIcon);
+  const isPassive = tearsheetIsPassive(actions);
+  const effectiveHasCloseIcon = tearsheetHasCloseIcon(actions, hasCloseIcon);
 
   // Callback that will be called whenever the stacking order changes.
   // position is 1-based with 0 indicating closed.
@@ -154,39 +141,35 @@ var TearsheetShell = /*#__PURE__*/React__default.forwardRef(function (_ref2, ref
     setDepth(newDepth);
     setPosition(newPosition);
   }
-  useEffect(function () {
+  useEffect(() => {
     if (open) {
       claimFocus();
     }
   }, [open, currentStep, effectiveHasCloseIcon, claimFocus]);
-  useEffect(function () {
-    if (prevOpen && !open && launcherButtonRef !== null && launcherButtonRef !== void 0 && launcherButtonRef.current) {
-      setTimeout(function () {
-        launcherButtonRef === null || launcherButtonRef === void 0 || launcherButtonRef.current.focus();
+  useEffect(() => {
+    if (prevOpen && !open && launcherButtonRef?.current) {
+      setTimeout(() => {
+        launcherButtonRef?.current.focus();
       }, 0);
     }
   }, [open, prevOpen, launcherButtonRef]);
-  useEffect(function () {
-    requestAnimationFrame(function () {
-      var _modalRef$current;
-      if (open && depth === position && !(modalRef !== null && modalRef !== void 0 && (_modalRef$current = modalRef.current) !== null && _modalRef$current !== void 0 && _modalRef$current.contains(document.activeElement))) {
+  useEffect(() => {
+    requestAnimationFrame(() => {
+      if (open && depth === position && !modalRef?.current?.contains(document.activeElement)) {
         claimFocus();
       }
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [claimFocus, depth, modalRef, position]);
-  useEffect(function () {
-    var _modalRef$current2;
-    if (hasError && !(modalRef !== null && modalRef !== void 0 && (_modalRef$current2 = modalRef.current) !== null && _modalRef$current2 !== void 0 && _modalRef$current2.contains(document.activeElement))) {
+  useEffect(() => {
+    if (hasError && !modalRef?.current?.contains(document.activeElement)) {
       claimFocus();
     }
   }, [claimFocus, hasError, modalRef]);
-  useEffect(function () {
-    var notify = function notify() {
-      return stack.all.forEach(function (handler) {
-        handler(Math.min(stack.open.length, maxDepth), stack.open.indexOf(handler) + 1);
-      });
-    };
+  useEffect(() => {
+    const notify = () => stack.all.forEach(handler => {
+      handler(Math.min(stack.open.length, maxDepth), stack.open.indexOf(handler) + 1);
+    });
 
     // Register this tearsheet's stack change callback/listener.
     stack.all.push(handleStackChange);
@@ -212,117 +195,135 @@ var TearsheetShell = /*#__PURE__*/React__default.forwardRef(function (_ref2, ref
       // 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);
+      const openIndex = stack.open.indexOf(handleStackChange);
       if (openIndex >= 0) {
         stack.open.splice(openIndex, 1);
         notify();
       }
     };
   }, [open, size]);
-  var areAllSameSizeVariant = function areAllSameSizeVariant() {
-    return new Set(stack.sizes).size === 1;
-  };
-  useIsomorphicEffect(function () {
-    var setScaleValues = function setScaleValues() {
+  const areAllSameSizeVariant = () => new Set(stack.sizes).size === 1;
+  useIsomorphicEffect(() => {
+    const setScaleValues = () => {
       if (!areAllSameSizeVariant()) {
-        return _defineProperty(_defineProperty({}, "--".concat(bc, "--stacking-scale-factor-single"), 1), "--".concat(bc, "--stacking-scale-factor-double"), 1);
+        return {
+          [`--${bc}--stacking-scale-factor-single`]: 1,
+          [`--${bc}--stacking-scale-factor-double`]: 1
+        };
       }
-      return _defineProperty(_defineProperty({}, "--".concat(bc, "--stacking-scale-factor-single"), (width - 32) / width), "--".concat(bc, "--stacking-scale-factor-double"), (width - 64) / width);
+      return {
+        [`--${bc}--stacking-scale-factor-single`]: (width - 32) / width,
+        [`--${bc}--stacking-scale-factor-double`]: (width - 64) / width
+      };
     };
     if (modalRef.current) {
-      Object.entries(setScaleValues()).map(function (_ref5) {
-        var _ref6 = _slicedToArray(_ref5, 2),
-          key = _ref6[0],
-          value = _ref6[1];
+      Object.entries(setScaleValues()).map(_ref3 => {
+        let [key, value] = _ref3;
         modalRef.current.style.setProperty(key, String(value));
       });
     }
   }, [modalRef, width]);
   if (position <= depth) {
-    var _prevDepth$current, _decorator$type, _decorator$type2;
     // 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;
+    const 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;
-    var _areAllSameSizeVariant = function _areAllSameSizeVariant() {
-      return new Set(stack.sizes).size === 1;
-    };
+    const includeActions = actions && actions?.length > 0;
+    const areAllSameSizeVariant = () => new Set(stack.sizes).size === 1;
     return renderPortalUse(/*#__PURE__*/React__default.createElement(unstable_FeatureFlags, {
       enableExperimentalFocusWrapWithoutSentinels: true
     }, /*#__PURE__*/React__default.createElement(ComposedModal, _extends({}, rest, {
-      "aria-label": ariaLabel || _getNodeTextContent(title),
-      className: cx(bc, className, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".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 = prevDepth === null || prevDepth === void 0 ? void 0 : prevDepth.current) !== null && _prevDepth$current !== void 0 ? _prevDepth$current : 0) > 1), "".concat(bc, "--wide"), wide), "".concat(bc, "--narrow"), !wide), "".concat(bc, "--has-slug"), deprecated_slug), "".concat(bc, "--has-ai-label"), !!decorator && ((_decorator$type = decorator['type']) === null || _decorator$type === void 0 ? void 0 : _decorator$type.displayName) === 'AILabel'), "".concat(bc, "--has-decorator"), !!decorator && ((_decorator$type2 = decorator['type']) === null || _decorator$type2 === void 0 ? void 0 : _decorator$type2.displayName) !== 'AILabel'), "".concat(bc, "--has-close"), effectiveHasCloseIcon)),
+      "aria-label": ariaLabel || getNodeTextContent(title),
+      className: cx(bc, className, {
+        [`${bc}--stacked-${position}-of-${depth}`]:
+        // Don't apply this on the initial open of a single tearsheet.
+        depth > 1 || depth === 1 && (prevDepth?.current ?? 0) > 1,
+        [`${bc}--wide`]: wide,
+        [`${bc}--narrow`]: !wide,
+        [`${bc}--has-slug`]: deprecated_slug,
+        [`${bc}--has-ai-label`]: !!decorator && decorator['type']?.displayName === 'AILabel',
+        [`${bc}--has-decorator`]: !!decorator && decorator['type']?.displayName !== 'AILabel',
+        [`${bc}--has-close`]: effectiveHasCloseIcon
+      }),
       decorator: decorator || deprecated_slug,
-      containerClassName: cx("".concat(bc, "__container"), _defineProperty(_defineProperty({}, "".concat(bc, "__container--lower"), verticalPosition === 'lower'), "".concat(bc, "__container--mixed-size-stacking"), !_areAllSameSizeVariant())),
-      onClose: onClose,
-      open: open,
-      selectorPrimaryFocus: selectorPrimaryFocus,
+      containerClassName: cx(`${bc}__container`, {
+        [`${bc}__container--lower`]: verticalPosition === 'lower',
+        [`${bc}__container--mixed-size-stacking`]: !areAllSameSizeVariant()
+      }),
+      onClose,
+      open,
+      selectorPrimaryFocus,
       onKeyDown: keyDownListener,
       preventCloseOnClickOutside: !isPassive,
       ref: modalRef,
-      selectorsFloatingMenus: [".".concat(carbonPrefix, "--overflow-menu-options"), ".".concat(carbonPrefix, "--tooltip"), '.flatpickr-calendar', ".".concat(bc, "__container")].concat(_toConsumableArray(selectorsFloatingMenus)),
+      selectorsFloatingMenus: [`.${carbonPrefix}--overflow-menu-options`, `.${carbonPrefix}--tooltip`, '.flatpickr-calendar', `.${bc}__container`, ...selectorsFloatingMenus],
       size: "sm"
     }), includeHeader && /*#__PURE__*/React__default.createElement(ModalHeader, {
-      className: cx("".concat(bc, "__header"), _defineProperty(_defineProperty({}, "".concat(bc, "__header--with-close-icon"), effectiveHasCloseIcon), "".concat(bc, "__header--with-nav"), navigation)),
-      closeClassName: cx(_defineProperty({}, "".concat(bc, "__header--no-close-icon"), !effectiveHasCloseIcon)),
+      className: cx(`${bc}__header`, {
+        [`${bc}__header--with-close-icon`]: effectiveHasCloseIcon,
+        [`${bc}__header--with-nav`]: navigation
+      }),
+      closeClassName: cx({
+        [`${bc}__header--no-close-icon`]: !effectiveHasCloseIcon
+      }),
       closeModal: onClose,
       iconDescription: closeIconDescription
     }, /*#__PURE__*/React__default.createElement(Wrap, {
-      className: "".concat(bc, "__header-content"),
+      className: `${bc}__header-content`,
       element: wide ? Layer : undefined
     }, /*#__PURE__*/React__default.createElement(Wrap, {
-      className: "".concat(bc, "__header-fields")
+      className: `${bc}__header-fields`
     }, /*#__PURE__*/React__default.createElement(Wrap, {
       element: "h2",
-      className: "".concat(bcModalHeader, "__label")
+      className: `${bcModalHeader}__label`
     }, label), /*#__PURE__*/React__default.createElement(Wrap, {
       element: "h3",
-      className: cx("".concat(bcModalHeader, "__heading"), "".concat(bc, "__heading"))
+      className: cx(`${bcModalHeader}__heading`, `${bc}__heading`)
     }, title), /*#__PURE__*/React__default.createElement(Wrap, {
-      className: "".concat(bc, "__header-description")
-    }, isOverflowing ? /*#__PURE__*/React__default.createElement(DefinitionTooltip, {
-      definition: description,
-      className: "".concat(bc, "__description-tooltip")
-    }, descriptionContent) : descriptionContent)), /*#__PURE__*/React__default.createElement(Wrap, {
-      className: "".concat(bc, "__header-actions")
+      className: `${bc}__header-description`
+    }, description)), /*#__PURE__*/React__default.createElement(Wrap, {
+      className: `${bc}__header-actions`
     }, headerActions)), /*#__PURE__*/React__default.createElement(Wrap, {
-      className: "".concat(bc, "__header-navigation")
+      className: `${bc}__header-navigation`
     }, navigation)), /*#__PURE__*/React__default.createElement(Wrap, {
       ref: modalBodyRef,
-      className: "".concat(carbonPrefix, "--modal-content ").concat(bc, "__body")
+      className: `${carbonPrefix}--modal-content ${bc}__body`
     }, /*#__PURE__*/React__default.createElement(Wrap, {
-      className: cx(_defineProperty(_defineProperty({}, "".concat(bc, "__influencer"), true), "".concat(bc, "__influencer--wide"), influencerWidth === 'wide')),
+      className: cx({
+        [`${bc}__influencer`]: true,
+        [`${bc}__influencer--wide`]: influencerWidth === 'wide'
+      }),
       neverRender: influencerPosition === 'right',
       element: SectionLevel3
     }, influencer), /*#__PURE__*/React__default.createElement(Wrap, {
-      className: "".concat(bc, "__right")
+      className: `${bc}__right`
     }, /*#__PURE__*/React__default.createElement(Wrap, {
-      className: "".concat(bc, "__main"),
+      className: `${bc}__main`,
       alwaysRender: includeActions
     }, /*#__PURE__*/React__default.createElement(Wrap, {
-      className: "".concat(bc, "__content"),
+      className: `${bc}__content`,
       alwaysRender: !!(influencer && influencerPosition === 'right'),
       tabIndex: -1,
       element: SectionLevel3
     }, children), /*#__PURE__*/React__default.createElement(Wrap, {
-      className: cx(_defineProperty(_defineProperty({}, "".concat(bc, "__influencer"), true), "".concat(bc, "__influencer--wide"), influencerWidth === 'wide')),
+      className: cx({
+        [`${bc}__influencer`]: true,
+        [`${bc}__influencer--wide`]: influencerWidth === 'wide'
+      }),
       neverRender: influencerPosition !== 'right',
       element: SectionLevel3
     }, influencer)), includeActions && /*#__PURE__*/React__default.createElement(Wrap, {
-      className: "".concat(bc, "__button-container")
+      className: `${bc}__button-container`
     }, /*#__PURE__*/React__default.createElement(ActionSet, {
       actions: actions,
       buttonSize: wide ? '2xl' : undefined,
-      className: "".concat(bc, "__buttons"),
+      className: `${bc}__buttons`,
       size: wide ? '2xl' : 'lg',
       "aria-hidden": !open
     })))), /*#__PURE__*/React__default.createElement("div", {
-      className: "".concat(bc, "__resize-detector"),
+      className: `${bc}__resize-detector`,
       ref: resizer
     }))));
   } else {
@@ -334,10 +335,10 @@ var TearsheetShell = /*#__PURE__*/React__default.forwardRef(function (_ref2, ref
 // The display name of the component, used by React. Note that displayName
 // is used in preference to relying on function.name.
 TearsheetShell.displayName = componentName;
-var portalType = typeof Element === 'undefined' ? PropTypes.object :
+const portalType = typeof Element === 'undefined' ? PropTypes.object :
 // eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope
 PropTypes.instanceOf(Element);
-var deprecatedProps = {
+const deprecatedProps = {
   /**
    *  @deprecated Property replaced by `decorator`
    */
@@ -360,7 +361,7 @@ var deprecatedProps = {
 
 // Note that the descriptions here should be kept in sync with those for the
 // corresponding props for Tearsheet and TearsheetNarrow components.
-TearsheetShell.propTypes = _objectSpread2({
+TearsheetShell.propTypes = {
   /**
    * The 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
@@ -378,14 +379,16 @@ TearsheetShell.propTypes = _objectSpread2({
   actions: PropTypes.arrayOf(
   // NB we don't include the validator here, as the component wrapping this
   // one should ensure appropriate validation is done.
-  PropTypes.shape(_objectSpread2(_objectSpread2({}, Button.propTypes), {}, {
+  PropTypes.shape({
+    /**@ts-ignore*/
+    ...Button.propTypes,
     kind: PropTypes.oneOf(['ghost', 'danger--ghost', 'secondary', 'danger', 'primary']),
     label: PropTypes.string,
     loading: PropTypes.bool,
     // we duplicate this Button prop to improve the DocGen here
     /**@ts-ignore*/
     onClick: Button.propTypes.onClick
-  }))),
+  })),
   /**
    * The main content of the tearsheet.
    */
@@ -495,7 +498,8 @@ TearsheetShell.propTypes = _objectSpread2({
   /**
    * The main title of the tearsheet, displayed in the header area.
    */
-  title: PropTypes.node
-}, deprecatedProps);
+  title: PropTypes.node,
+  ...deprecatedProps
+};
 
 export { TearsheetShell, deprecatedProps, portalType, tearsheetHasCloseIcon, tearsheetIsPassive, tearsheetShellWideProps };

package/es/components/Toolbar/Toolbar.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 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { forwardRef, useRef, useCallback, useState, useEffect, createContext } from 'react';
 import { p as propTypesExports } from '../../_virtual/index.js';
 import { getFocusableElements } from '../../global/js/utils/getFocusableElements.js';
@@ -13,66 +13,61 @@ import cx from 'classnames';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import { pkg } from '../../settings.js';
 
-var _excluded = ["children", "className", "vertical"];
-var checkComponentEnabled = pkg.checkComponentEnabled,
-  prefix = pkg.prefix;
-var blockClass = "".concat(prefix, "--toolbar");
-var ToolbarContext = /*#__PURE__*/createContext({});
+const {
+  checkComponentEnabled,
+  prefix
+} = pkg;
+const blockClass = `${prefix}--toolbar`;
+const ToolbarContext = /*#__PURE__*/createContext({});
 
 /** Toolbars are a collection of action items that organize a program’s interaction patterns into a series of closely related commands. */
-var Toolbar = /*#__PURE__*/forwardRef(function (_ref, r) {
-  var children = _ref.children,
-    className = _ref.className,
-    vertical = _ref.vertical,
-    rest = _objectWithoutProperties(_ref, _excluded);
-  var focusableElements = useRef(undefined);
-  var getFocusableElements$1 = useCallback(function () {
-    return focusableElements.current;
-  }, [focusableElements]);
-  var localRef = useRef(null);
-  var ref = r || localRef;
-  var _useState = useState(-1),
-    _useState2 = _slicedToArray(_useState, 2),
-    focus = _useState2[0],
-    setFocus = _useState2[1];
-  useEffect(function () {
-    focusableElements.current = getFocusableElements(ref === null || ref === void 0 ? void 0 : ref['current']);
+let Toolbar = /*#__PURE__*/forwardRef((_ref, r) => {
+  let {
+    children,
+    className,
+    vertical,
+    ...rest
+  } = _ref;
+  const focusableElements = useRef(undefined);
+  const getFocusableElements$1 = useCallback(() => focusableElements.current, [focusableElements]);
+  const localRef = useRef(null);
+  const ref = r || localRef;
+  const [focus, setFocus] = useState(-1);
+  useEffect(() => {
+    focusableElements.current = getFocusableElements(ref?.['current']);
     if (focus !== -1) {
-      var _getFocusableElements2;
-      (_getFocusableElements2 = getFocusableElements$1()) === null || _getFocusableElements2 === void 0 || _getFocusableElements2.forEach(function (element, index) {
+      getFocusableElements$1()?.forEach((element, index) => {
         element[index !== focus ? 'setAttribute' : 'removeAttribute']('tabindex', '-1');
       });
     }
   });
-  useEffect(function () {
+  useEffect(() => {
     if (focus !== -1) {
-      var _getFocusableElements3;
-      (_getFocusableElements3 = getFocusableElements$1()) === null || _getFocusableElements3 === void 0 || _getFocusableElements3[focus].focus();
+      getFocusableElements$1()?.[focus].focus();
     }
   }, [focus, getFocusableElements$1]);
-  var _ref2 = !vertical ? ['ArrowRight', 'ArrowLeft'] : ['ArrowDown', 'ArrowUp'],
-    _ref3 = _slicedToArray(_ref2, 2),
-    arrowNext = _ref3[0],
-    arrowPrevious = _ref3[1];
+  const [arrowNext, arrowPrevious] = !vertical ? ['ArrowRight', 'ArrowLeft'] : ['ArrowDown', 'ArrowUp'];
   function onArrowDown(increment) {
-    var _getFocusableElements4;
-    var nextFocus = focus + increment;
-    if ((_getFocusableElements4 = getFocusableElements$1()) !== null && _getFocusableElements4 !== void 0 && _getFocusableElements4[nextFocus]) {
+    const nextFocus = focus + increment;
+    if (getFocusableElements$1()?.[nextFocus]) {
       setFocus(nextFocus);
     }
   }
-  function onFocus(_ref4) {
-    var target = _ref4.target;
-    var elements = getFocusableElements$1();
-    if (elements !== null && elements !== void 0 && elements.includes(target)) {
+  function onFocus(_ref2) {
+    let {
+      target
+    } = _ref2;
+    const elements = getFocusableElements$1();
+    if (elements?.includes(target)) {
       setFocus(elements.indexOf(target));
     }
   }
-  function onKeyDown(_ref5) {
-    var _getFocusableElements5;
-    var key = _ref5.key,
-      target = _ref5.target;
-    if ((_getFocusableElements5 = getFocusableElements$1()) !== null && _getFocusableElements5 !== void 0 && _getFocusableElements5.includes(target)) {
+  function onKeyDown(_ref3) {
+    let {
+      key,
+      target
+    } = _ref3;
+    if (getFocusableElements$1()?.includes(target)) {
       switch (key) {
         case arrowNext:
           onArrowDown(1);
@@ -85,7 +80,9 @@ var Toolbar = /*#__PURE__*/forwardRef(function (_ref, r) {
   }
   return /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
     ref: ref,
-    className: cx(blockClass, className, _defineProperty({}, "".concat(blockClass, "--vertical"), vertical)),
+    className: cx(blockClass, className, {
+      [`${blockClass}--vertical`]: vertical
+    }),
     onFocus: onFocus,
     onKeyDown: onKeyDown
   }, vertical && {
@@ -94,11 +91,11 @@ var Toolbar = /*#__PURE__*/forwardRef(function (_ref, r) {
     role: "toolbar"
   }), /*#__PURE__*/React__default.createElement(ToolbarContext.Provider, {
     value: {
-      vertical: vertical
+      vertical
     }
   }, children));
 });
-var componentName = 'Toolbar';
+const componentName = 'Toolbar';
 Toolbar.displayName = componentName;
 Toolbar.propTypes = {
   /** Provide the content of the `Toolbar` */