@carbon/ibm-products 2.65.0 → 2.66.0

package/lib/components/Tearsheet/TearsheetShell.js

@@ -16,7 +16,6 @@ var settings = require('../../settings.js');
 var pconsole = require('../../global/js/utils/pconsole.js');
 var getNodeTextContent = require('../../global/js/utils/getNodeTextContent.js');
 var propsHelper = require('../../global/js/utils/props-helper.js');
-var checkForOverflow = require('../../global/js/utils/checkForOverflow.js');
 var react = require('@carbon/react');
 var ActionSet = require('../ActionSet/ActionSet.js');
 var Wrap = require('../../global/js/utils/Wrap.js');
@@ -25,12 +24,10 @@ var useFocus = require('../../global/js/hooks/useFocus.js');
 var usePreviousValue = require('../../global/js/hooks/usePreviousValue.js');
 var useIsomorphicEffect = require('../../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(settings.pkg.prefix, "--tearsheet");
-var componentName = 'TearsheetShell';
-var maxDepth = 3;
+const bc = `${settings.pkg.prefix}--tearsheet`;
+const componentName = 'TearsheetShell';
+const maxDepth = 3;
 
 // NOTE: the component SCSS is not imported here: it is rolled up separately.
 
@@ -44,28 +41,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 = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+const SectionLevel3 = _ref => {
+  let {
+    children,
+    ...rest
+  } = _ref;
   return /*#__PURE__*/React.createElement(react.Section, _rollupPluginBabelHelpers.extends({
     level: 3
   }, rest), children);
@@ -78,77 +73,69 @@ var SectionLevel3 = function SectionLevel3(_ref) {
  *
  * See the canvas tab for the component API details.
  * */
-var TearsheetShell = /*#__PURE__*/React.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 = _rollupPluginBabelHelpers.objectWithoutProperties(_ref2, _excluded2);
-  var carbonPrefix = react.usePrefix();
-  var bcModalHeader = "".concat(carbonPrefix, "--modal-header");
-  var renderPortalUse = usePortalTarget.usePortalTarget(portalTargetIn);
-  var localRef = React.useRef(undefined);
-  var resizer = React.useRef(null);
-  var modalBodyRef = React.useRef(null);
-  var modalRef = ref || localRef;
-  var _useResizeObserver = useResizeObserver.useResizeObserver(resizer),
-    width = _useResizeObserver.width;
-  var prevOpen = usePreviousValue.usePreviousValue(open);
-  var _useFocus = useFocus.useFocus(modalRef, selectorPrimaryFocus),
-    keyDownListener = _useFocus.keyDownListener,
-    claimFocus = _useFocus.claimFocus;
+const TearsheetShell = /*#__PURE__*/React.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 = react.usePrefix();
+  const bcModalHeader = `${carbonPrefix}--modal-header`;
+  const renderPortalUse = usePortalTarget.usePortalTarget(portalTargetIn);
+  const localRef = React.useRef(undefined);
+  const resizer = React.useRef(null);
+  const modalBodyRef = React.useRef(null);
+  const modalRef = ref || localRef;
+  const {
+    width
+  } = useResizeObserver.useResizeObserver(resizer);
+  const prevOpen = usePreviousValue.usePreviousValue(open);
+  const {
+    keyDownListener,
+    claimFocus
+  } = useFocus.useFocus(modalRef, selectorPrimaryFocus);
   modalRef.current;
-  var descriptionRef = React.useRef(null);
-  var isOverflowing = checkForOverflow.checkHeightOverflow(descriptionRef.current);
-  var descriptionContent = /*#__PURE__*/React.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 = React.useState(0),
-    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
-    depth = _useState2[0],
-    setDepth = _useState2[1];
-  var _useState3 = React.useState(0),
-    _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
-    position = _useState4[0],
-    setPosition = _useState4[1];
+  const [depth, setDepth] = React.useState(0);
+  const [position, setPosition] = React.useState(0);
 
   // Keep a record of the previous value of depth.
-  var prevDepth = React.useRef(undefined);
-  React.useEffect(function () {
+  const prevDepth = React.useRef(undefined);
+  React.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.
@@ -156,39 +143,35 @@ var TearsheetShell = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
     setDepth(newDepth);
     setPosition(newPosition);
   }
-  React.useEffect(function () {
+  React.useEffect(() => {
     if (open) {
       claimFocus();
     }
   }, [open, currentStep, effectiveHasCloseIcon, claimFocus]);
-  React.useEffect(function () {
-    if (prevOpen && !open && launcherButtonRef !== null && launcherButtonRef !== void 0 && launcherButtonRef.current) {
-      setTimeout(function () {
-        launcherButtonRef === null || launcherButtonRef === void 0 || launcherButtonRef.current.focus();
+  React.useEffect(() => {
+    if (prevOpen && !open && launcherButtonRef?.current) {
+      setTimeout(() => {
+        launcherButtonRef?.current.focus();
       }, 0);
     }
   }, [open, prevOpen, launcherButtonRef]);
-  React.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))) {
+  React.useEffect(() => {
+    requestAnimationFrame(() => {
+      if (open && depth === position && !modalRef?.current?.contains(document.activeElement)) {
         claimFocus();
       }
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [claimFocus, depth, modalRef, position]);
-  React.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))) {
+  React.useEffect(() => {
+    if (hasError && !modalRef?.current?.contains(document.activeElement)) {
       claimFocus();
     }
   }, [claimFocus, hasError, modalRef]);
-  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);
-      });
-    };
+  React.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);
@@ -214,117 +197,135 @@ var TearsheetShell = /*#__PURE__*/React.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.useIsomorphicEffect(function () {
-    var setScaleValues = function setScaleValues() {
+  const areAllSameSizeVariant = () => new Set(stack.sizes).size === 1;
+  useIsomorphicEffect.useIsomorphicEffect(() => {
+    const setScaleValues = () => {
       if (!areAllSameSizeVariant()) {
-        return _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.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 _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.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 = _rollupPluginBabelHelpers.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.createElement(react.unstable_FeatureFlags, {
       enableExperimentalFocusWrapWithoutSentinels: true
     }, /*#__PURE__*/React.createElement(react.ComposedModal, _rollupPluginBabelHelpers.extends({}, rest, {
       "aria-label": ariaLabel || getNodeTextContent.getNodeTextContent(title),
-      className: cx(bc, className, _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.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)),
+      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"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.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(_rollupPluginBabelHelpers.toConsumableArray(selectorsFloatingMenus)),
+      selectorsFloatingMenus: [`.${carbonPrefix}--overflow-menu-options`, `.${carbonPrefix}--tooltip`, '.flatpickr-calendar', `.${bc}__container`, ...selectorsFloatingMenus],
       size: "sm"
     }), includeHeader && /*#__PURE__*/React.createElement(react.ModalHeader, {
-      className: cx("".concat(bc, "__header"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(bc, "__header--with-close-icon"), effectiveHasCloseIcon), "".concat(bc, "__header--with-nav"), navigation)),
-      closeClassName: cx(_rollupPluginBabelHelpers.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.createElement(Wrap.Wrap, {
-      className: "".concat(bc, "__header-content"),
+      className: `${bc}__header-content`,
       element: wide ? react.Layer : undefined
     }, /*#__PURE__*/React.createElement(Wrap.Wrap, {
-      className: "".concat(bc, "__header-fields")
+      className: `${bc}__header-fields`
     }, /*#__PURE__*/React.createElement(Wrap.Wrap, {
       element: "h2",
-      className: "".concat(bcModalHeader, "__label")
+      className: `${bcModalHeader}__label`
     }, label), /*#__PURE__*/React.createElement(Wrap.Wrap, {
       element: "h3",
-      className: cx("".concat(bcModalHeader, "__heading"), "".concat(bc, "__heading"))
+      className: cx(`${bcModalHeader}__heading`, `${bc}__heading`)
     }, title), /*#__PURE__*/React.createElement(Wrap.Wrap, {
-      className: "".concat(bc, "__header-description")
-    }, isOverflowing ? /*#__PURE__*/React.createElement(react.DefinitionTooltip, {
-      definition: description,
-      className: "".concat(bc, "__description-tooltip")
-    }, descriptionContent) : descriptionContent)), /*#__PURE__*/React.createElement(Wrap.Wrap, {
-      className: "".concat(bc, "__header-actions")
+      className: `${bc}__header-description`
+    }, description)), /*#__PURE__*/React.createElement(Wrap.Wrap, {
+      className: `${bc}__header-actions`
     }, headerActions)), /*#__PURE__*/React.createElement(Wrap.Wrap, {
-      className: "".concat(bc, "__header-navigation")
+      className: `${bc}__header-navigation`
     }, navigation)), /*#__PURE__*/React.createElement(Wrap.Wrap, {
       ref: modalBodyRef,
-      className: "".concat(carbonPrefix, "--modal-content ").concat(bc, "__body")
+      className: `${carbonPrefix}--modal-content ${bc}__body`
     }, /*#__PURE__*/React.createElement(Wrap.Wrap, {
-      className: cx(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.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.createElement(Wrap.Wrap, {
-      className: "".concat(bc, "__right")
+      className: `${bc}__right`
     }, /*#__PURE__*/React.createElement(Wrap.Wrap, {
-      className: "".concat(bc, "__main"),
+      className: `${bc}__main`,
       alwaysRender: includeActions
     }, /*#__PURE__*/React.createElement(Wrap.Wrap, {
-      className: "".concat(bc, "__content"),
+      className: `${bc}__content`,
       alwaysRender: !!(influencer && influencerPosition === 'right'),
       tabIndex: -1,
       element: SectionLevel3
     }, children), /*#__PURE__*/React.createElement(Wrap.Wrap, {
-      className: cx(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.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.createElement(Wrap.Wrap, {
-      className: "".concat(bc, "__button-container")
+      className: `${bc}__button-container`
     }, /*#__PURE__*/React.createElement(ActionSet.ActionSet, {
       actions: actions,
       buttonSize: wide ? '2xl' : undefined,
-      className: "".concat(bc, "__buttons"),
+      className: `${bc}__buttons`,
       size: wide ? '2xl' : 'lg',
       "aria-hidden": !open
     })))), /*#__PURE__*/React.createElement("div", {
-      className: "".concat(bc, "__resize-detector"),
+      className: `${bc}__resize-detector`,
       ref: resizer
     }))));
   } else {
@@ -336,10 +337,10 @@ var TearsheetShell = /*#__PURE__*/React.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' ? index.default.object :
+const portalType = typeof Element === 'undefined' ? index.default.object :
 // eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope
 index.default.instanceOf(Element);
-var deprecatedProps = {
+const deprecatedProps = {
   /**
    *  @deprecated Property replaced by `decorator`
    */
@@ -362,7 +363,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 = _rollupPluginBabelHelpers.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
@@ -380,14 +381,16 @@ TearsheetShell.propTypes = _rollupPluginBabelHelpers.objectSpread2({
   actions: index.default.arrayOf(
   // NB we don't include the validator here, as the component wrapping this
   // one should ensure appropriate validation is done.
-  index.default.shape(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, react.Button.propTypes), {}, {
+  index.default.shape({
+    /**@ts-ignore*/
+    ...react.Button.propTypes,
     kind: index.default.oneOf(['ghost', 'danger--ghost', 'secondary', 'danger', 'primary']),
     label: index.default.string,
     loading: index.default.bool,
     // we duplicate this Button prop to improve the DocGen here
     /**@ts-ignore*/
     onClick: react.Button.propTypes.onClick
-  }))),
+  })),
   /**
    * The main content of the tearsheet.
    */
@@ -497,8 +500,9 @@ TearsheetShell.propTypes = _rollupPluginBabelHelpers.objectSpread2({
   /**
    * The main title of the tearsheet, displayed in the header area.
    */
-  title: index.default.node
-}, deprecatedProps);
+  title: index.default.node,
+  ...deprecatedProps
+};
 
 exports.TearsheetShell = TearsheetShell;
 exports.deprecatedProps = deprecatedProps;

package/lib/components/Toolbar/Toolbar.js

@@ -15,66 +15,61 @@ var cx = require('classnames');
 var devtools = require('../../global/js/utils/devtools.js');
 var settings = require('../../settings.js');
 
-var _excluded = ["children", "className", "vertical"];
-var checkComponentEnabled = settings.pkg.checkComponentEnabled,
-  prefix = settings.pkg.prefix;
-var blockClass = "".concat(prefix, "--toolbar");
-var ToolbarContext = /*#__PURE__*/React.createContext({});
+const {
+  checkComponentEnabled,
+  prefix
+} = settings.pkg;
+const blockClass = `${prefix}--toolbar`;
+const ToolbarContext = /*#__PURE__*/React.createContext({});
 
 /** Toolbars are a collection of action items that organize a program’s interaction patterns into a series of closely related commands. */
-exports.Toolbar = /*#__PURE__*/React.forwardRef(function (_ref, r) {
-  var children = _ref.children,
-    className = _ref.className,
-    vertical = _ref.vertical,
-    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-  var focusableElements = React.useRef(undefined);
-  var getFocusableElements$1 = React.useCallback(function () {
-    return focusableElements.current;
-  }, [focusableElements]);
-  var localRef = React.useRef(null);
-  var ref = r || localRef;
-  var _useState = React.useState(-1),
-    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
-    focus = _useState2[0],
-    setFocus = _useState2[1];
-  React.useEffect(function () {
-    focusableElements.current = getFocusableElements.getFocusableElements(ref === null || ref === void 0 ? void 0 : ref['current']);
+exports.Toolbar = /*#__PURE__*/React.forwardRef((_ref, r) => {
+  let {
+    children,
+    className,
+    vertical,
+    ...rest
+  } = _ref;
+  const focusableElements = React.useRef(undefined);
+  const getFocusableElements$1 = React.useCallback(() => focusableElements.current, [focusableElements]);
+  const localRef = React.useRef(null);
+  const ref = r || localRef;
+  const [focus, setFocus] = React.useState(-1);
+  React.useEffect(() => {
+    focusableElements.current = getFocusableElements.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');
       });
     }
   });
-  React.useEffect(function () {
+  React.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 = _rollupPluginBabelHelpers.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);
@@ -87,7 +82,9 @@ exports.Toolbar = /*#__PURE__*/React.forwardRef(function (_ref, r) {
   }
   return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({}, rest, {
     ref: ref,
-    className: cx(blockClass, className, _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "--vertical"), vertical)),
+    className: cx(blockClass, className, {
+      [`${blockClass}--vertical`]: vertical
+    }),
     onFocus: onFocus,
     onKeyDown: onKeyDown
   }, vertical && {
@@ -96,11 +93,11 @@ exports.Toolbar = /*#__PURE__*/React.forwardRef(function (_ref, r) {
     role: "toolbar"
   }), /*#__PURE__*/React.createElement(ToolbarContext.Provider, {
     value: {
-      vertical: vertical
+      vertical
     }
   }, children));
 });
-var componentName = 'Toolbar';
+const componentName = 'Toolbar';
 exports.Toolbar.displayName = componentName;
 exports.Toolbar.propTypes = {
   /** Provide the content of the `Toolbar` */