@carbon/ibm-products 2.65.0 → 2.66.0

package/lib/components/CoachmarkStack/CoachmarkStack.js

@@ -21,17 +21,15 @@ var context = require('../Coachmark/utils/context.js');
 var enums = require('../Coachmark/utils/enums.js');
 var useIsomorphicEffect = require('../../global/js/hooks/useIsomorphicEffect.js');
 
-var _excluded = ["children", "className", "onClose", "description", "renderMedia", "navLinkLabels", "portalTarget", "closeButtonLabel", "tagline", "theme", "title", "tooltipAlign"];
-
 // Carbon and package components we use.
 /* TODO: @import(s) of carbon components and other package components. */
 
 // The block part of our conventional BEM class names (blockClass__E--M).
-var blockClass = "".concat(settings.pkg.prefix, "--coachmark-stack");
-var componentName = 'CoachmarkStack';
-var elementBlockClass = "".concat(settings.pkg.prefix, "--coachmark-stack-element");
-var defaults = {
-  onClose: function onClose() {},
+const blockClass = `${settings.pkg.prefix}--coachmark-stack`;
+const componentName = 'CoachmarkStack';
+const elementBlockClass = `${settings.pkg.prefix}--coachmark-stack-element`;
+const defaults = {
+  onClose: () => {},
   // Pass through to CoachmarkStackHome
   theme: 'light',
   portalTarget: 'body'
@@ -50,75 +48,63 @@ var defaults = {
  * user to gain understanding of the product's main value and discover new use cases.
  * This variant allows the stacking of multiple coachmark overlays to be displayed by interacting with the tagline.
  */
-exports.CoachmarkStack = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var children = _ref.children,
-    className = _ref.className,
-    _ref$onClose = _ref.onClose,
-    onClose = _ref$onClose === void 0 ? defaults.onClose : _ref$onClose,
-    description = _ref.description,
-    renderMedia = _ref.renderMedia,
-    navLinkLabels = _ref.navLinkLabels,
-    _ref$portalTarget = _ref.portalTarget,
-    portalTarget = _ref$portalTarget === void 0 ? defaults.portalTarget : _ref$portalTarget,
-    closeButtonLabel = _ref.closeButtonLabel,
-    tagline = _ref.tagline,
-    _ref$theme = _ref.theme,
-    theme = _ref$theme === void 0 ? defaults.theme : _ref$theme,
-    title = _ref.title,
-    tooltipAlign = _ref.tooltipAlign,
-    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-  var portalNode = React.useRef(null);
-  useIsomorphicEffect.useIsomorphicEffect(function () {
-    var _document$querySelect, _document, _document2, _document3;
-    portalNode.current = portalTarget ? (_document$querySelect = (_document = document) === null || _document === void 0 ? void 0 : _document.querySelector(portalTarget)) !== null && _document$querySelect !== void 0 ? _document$querySelect : (_document2 = document) === null || _document2 === void 0 ? void 0 : _document2.querySelector('body') : (_document3 = document) === null || _document3 === void 0 ? void 0 : _document3.querySelector('body');
+exports.CoachmarkStack = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    children,
+    className,
+    onClose = defaults.onClose,
+    // Pass through to CoachmarkStackHome
+    description,
+    renderMedia,
+    navLinkLabels,
+    portalTarget = defaults.portalTarget,
+    closeButtonLabel,
+    tagline,
+    theme = defaults.theme,
+    title,
+    tooltipAlign,
+    ...rest
+  } = _ref;
+  const portalNode = React.useRef(null);
+  useIsomorphicEffect.useIsomorphicEffect(() => {
+    portalNode.current = portalTarget ? document?.querySelector(portalTarget) ?? document?.querySelector('body') : document?.querySelector('body');
   }, [portalTarget]);
-  var stackHomeRef = React.useRef(null);
-  var stackedCoachmarkRefs = React.useRef([]);
-  var _useState = React.useState(false),
-    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
-    isOpen = _useState2[0],
-    setIsOpen = _useState2[1];
+  const stackHomeRef = React.useRef(null);
+  const stackedCoachmarkRefs = React.useRef([]);
+  const [isOpen, setIsOpen] = React.useState(false);
   // selectedItemNumber -1 = parent close button was clicked, remove entire stack
   // selectedItemNumber 0 = (default) the parent is visible, all children are hidden
   // selectedItemNumber 1+ = a child is visible and stacked atop the parent
-  var _useState3 = React.useState(0),
-    _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
-    selectedItemNumber = _useState4[0],
-    setSelectedItemNumber = _useState4[1];
+  const [selectedItemNumber, setSelectedItemNumber] = React.useState(0);
   // // The parent height and width values to return to after unstacked
-  var _useState5 = React.useState(),
-    _useState6 = _rollupPluginBabelHelpers.slicedToArray(_useState5, 2),
-    parentHeight = _useState6[0],
-    setParentHeight = _useState6[1];
+  const [parentHeight, setParentHeight] = React.useState();
   // parent height = child height when stacked behind a child that is shorter
-  var childArray = React.Children.toArray(children);
-  var mountedRef = React.useRef(undefined);
+  const childArray = React.Children.toArray(children);
+  const mountedRef = React.useRef(undefined);
   // same value as CSS animation speed
-  var delayMs = 240;
+  const delayMs = 240;
 
   // Unmount or unstack a child
-  var handleClickNavItem = function handleClickNavItem(itemNumber) {
+  const handleClickNavItem = itemNumber => {
     setSelectedItemNumber(itemNumber);
   };
-  var handleClose = React.useCallback(function (isParentCloseButton) {
+  const handleClose = React.useCallback(isParentCloseButton => {
     if (isParentCloseButton) {
       // Trigger slide-out animation
       setSelectedItemNumber(-1);
 
       // Unmount after animation is complete
-      var timer = setTimeout(function () {
+      const timer = setTimeout(() => {
         setIsOpen(false);
         onClose();
       }, delayMs);
-      return function () {
-        return clearTimeout(timer);
-      };
+      return () => clearTimeout(timer);
     } else {
       // Unstack child
       setSelectedItemNumber(0);
     }
   }, [onClose]);
-  var escFunction = React.useCallback(function (event) {
+  const escFunction = React.useCallback(event => {
     if (event.key === 'Escape') {
       if (selectedItemNumber === 0) {
         handleClose(true);
@@ -127,52 +113,50 @@ exports.CoachmarkStack = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       }
     }
   }, [handleClose, selectedItemNumber]);
-  React.useEffect(function () {
+  React.useEffect(() => {
     document.addEventListener('keydown', escFunction, false);
-    return function () {
+    return () => {
       document.removeEventListener('keydown', escFunction, false);
     };
   }, [escFunction]);
-  var contextValue = {
+  const contextValue = {
     buttonProps: {
       tabIndex: 0,
       'aria-expanded': isOpen,
-      onClick: function onClick() {
+      onClick: () => {
         setIsOpen(true);
       },
       // Compensate for accidental open/close on double-click.
       // Only open on double-click.
-      onDoubleClick: function onDoubleClick() {
+      onDoubleClick: () => {
         setIsOpen(true);
       }
     },
     closeButtonProps: {
-      onClick: function onClick() {
-        return handleClose(false);
-      }
+      onClick: () => handleClose(false)
     },
     isOpen: isOpen
   };
-  React.useEffect(function () {
+  React.useEffect(() => {
     mountedRef.current = true;
-    return function () {
+    return () => {
       mountedRef.current = false;
     };
   }, []);
-  React.useEffect(function () {
-    setTimeout(function () {
+  React.useEffect(() => {
+    setTimeout(() => {
       if (stackHomeRef.current) {
         setParentHeight(stackHomeRef.current.clientHeight + 16);
       }
     }, 0);
   }, [stackHomeRef]);
-  React.useEffect(function () {
-    var targetSelectedItem = selectedItemNumber - 1;
+  React.useEffect(() => {
+    const targetSelectedItem = selectedItemNumber - 1;
     if (!parentHeight) {
       return;
     }
     if (stackHomeRef.current) {
-      stackHomeRef.current.style.height = "".concat(parentHeight, "px");
+      stackHomeRef.current.style.height = `${parentHeight}px`;
     }
     if (!isOpen || targetSelectedItem < 0) {
       if (stackHomeRef.current) {
@@ -180,52 +164,50 @@ exports.CoachmarkStack = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       }
       return;
     }
-    var targetHomeHeight = stackedCoachmarkRefs.current[targetSelectedItem].clientHeight;
+    const targetHomeHeight = stackedCoachmarkRefs.current[targetSelectedItem].clientHeight;
     if (stackHomeRef.current) {
-      stackHomeRef.current.style.height = "".concat(targetHomeHeight, "px");
+      stackHomeRef.current.style.height = `${targetHomeHeight}px`;
       stackedCoachmarkRefs.current[targetSelectedItem].focus();
     }
   }, [selectedItemNumber, isOpen, parentHeight]);
-  var wrappedChildren = React.Children.map(childArray, function (child, idx) {
-    var mountedClass = mountedRef.current ? "".concat(elementBlockClass, "--is-mounted") : '';
+  const wrappedChildren = React.Children.map(childArray, (child, idx) => {
+    const mountedClass = mountedRef.current ? `${elementBlockClass}--is-mounted` : '';
     return /*#__PURE__*/React.createElement(CoachmarkOverlay.CoachmarkOverlay, {
       key: idx,
-      ref: function ref(_ref2) {
-        stackedCoachmarkRefs.current[idx] = _ref2;
+      ref: ref => {
+        stackedCoachmarkRefs.current[idx] = ref;
       },
       kind: enums.COACHMARK_OVERLAY_KIND.STACKED,
-      onClose: function onClose() {
-        return handleClose(false);
-      },
+      onClose: () => handleClose(false),
       theme: theme,
       fixedIsVisible: false,
-      className: cx(elementBlockClass, mountedClass, idx === selectedItemNumber - 1 && "".concat(elementBlockClass, "--is-visible"), mountedRef.current && "".concat(elementBlockClass, "--is-mounted"))
+      className: cx(elementBlockClass, mountedClass, idx === selectedItemNumber - 1 && `${elementBlockClass}--is-visible`, mountedRef.current && `${elementBlockClass}--is-mounted`)
     }, child);
   });
   return /*#__PURE__*/React.createElement(context.CoachmarkContext.Provider, {
     value: contextValue
   }, /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({}, rest, {
-    className: cx(blockClass, "".concat(settings.pkg.prefix, "--coachmark-overlay--stack"), className),
+    className: cx(blockClass, `${settings.pkg.prefix}--coachmark-overlay--stack`, className),
     ref: ref
   }, devtools.getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement(CoachmarkTagline.CoachmarkTagline, {
     title: tagline,
     onClose: onClose
   }), /*#__PURE__*/React.createElement(CoachmarkStackHome.CoachmarkStackHome, {
     ref: stackHomeRef,
-    className: cx("".concat(settings.pkg.prefix, "--coachmark-overlay"), "".concat(settings.pkg.prefix, "--coachmark-overlay__").concat(theme), elementBlockClass, selectedItemNumber > 0 && "".concat(elementBlockClass, "--is-stacked"), selectedItemNumber > 0 && "".concat(elementBlockClass, "--is-stacked__").concat(theme), isOpen && "".concat(elementBlockClass, "--is-visible"), mountedRef.current && "".concat(elementBlockClass, "--is-mounted")),
+    className: cx(`${settings.pkg.prefix}--coachmark-overlay`, `${settings.pkg.prefix}--coachmark-overlay__${theme}`, elementBlockClass, selectedItemNumber > 0 && `${elementBlockClass}--is-stacked`, selectedItemNumber > 0 && `${elementBlockClass}--is-stacked__${theme}`, isOpen && `${elementBlockClass}--is-visible`, mountedRef.current && `${elementBlockClass}--is-mounted`),
     isOpen: isOpen && selectedItemNumber < 1,
     description: description,
     renderMedia: renderMedia,
     navLinkLabels: navLinkLabels,
     onClickNavItem: handleClickNavItem,
-    onClose: function onClose() {
+    onClose: () => {
       handleClose(true);
     },
     portalTarget: portalTarget,
     closeButtonLabel: closeButtonLabel,
     title: title,
     tooltipAlign: tooltipAlign
-  }), portalNode !== null && portalNode !== void 0 && portalNode.current ? /*#__PURE__*/reactDom.createPortal(wrappedChildren, portalNode === null || portalNode === void 0 ? void 0 : portalNode.current) : null));
+  }), portalNode?.current ? /*#__PURE__*/reactDom.createPortal(wrappedChildren, portalNode?.current) : null));
 });
 
 // Return a placeholder if not released and not enabled by feature flag

package/lib/components/CoachmarkStack/CoachmarkStackHome.js

@@ -20,81 +20,74 @@ var reactDom = require('react-dom');
 var CoachmarkHeader = require('../Coachmark/CoachmarkHeader.js');
 var useIsomorphicEffect = require('../../global/js/hooks/useIsomorphicEffect.js');
 
-var _excluded = ["className", "description", "isOpen", "renderMedia", "navLinkLabels", "onClickNavItem", "onClose", "portalTarget", "closeButtonLabel", "title", "tooltipAlign"];
 // Carbon and package components we use.
 /* TODO: @import(s) of carbon components and other package components. */
 
 // The block part of our conventional BEM class names (blockClass__E--M).
-var blockClass = "".concat(settings.pkg.prefix, "--coachmark-stacked-home");
-var overlayClass = "".concat(settings.pkg.prefix, "--coachmark-overlay");
-var componentName = 'CoachmarkStackHome';
+const blockClass = `${settings.pkg.prefix}--coachmark-stacked-home`;
+const overlayClass = `${settings.pkg.prefix}--coachmark-overlay`;
+const componentName = 'CoachmarkStackHome';
 
 /**
  * DO NOT USE. This component is for the exclusive use
  * of other Onboarding components.
  */
-exports.CoachmarkStackHome = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var className = _ref.className,
-    description = _ref.description,
-    isOpen = _ref.isOpen,
-    renderMedia = _ref.renderMedia,
-    navLinkLabels = _ref.navLinkLabels,
-    onClickNavItem = _ref.onClickNavItem,
-    _onClose = _ref.onClose,
-    portalTarget = _ref.portalTarget,
-    closeButtonLabel = _ref.closeButtonLabel,
-    title = _ref.title,
-    tooltipAlign = _ref.tooltipAlign,
-    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-  var buttonFocusRef = React.useRef(null);
-  var _useState = React.useState(0),
-    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
-    linkFocusIndex = _useState2[0],
-    setLinkFocusIndex = _useState2[1];
-  var navItemRefs = React.useRef([]);
-  var _useState3 = React.useState([]),
-    _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
-    overflowStates = _useState4[0],
-    setOverflowStates = _useState4[1];
-  React.useEffect(function () {
-    setTimeout(function () {
+exports.CoachmarkStackHome = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    className,
+    description,
+    isOpen,
+    renderMedia,
+    navLinkLabels,
+    onClickNavItem,
+    onClose,
+    portalTarget,
+    closeButtonLabel,
+    title,
+    tooltipAlign,
+    ...rest
+  } = _ref;
+  const buttonFocusRef = React.useRef(null);
+  const [linkFocusIndex, setLinkFocusIndex] = React.useState(0);
+  const navItemRefs = React.useRef([]);
+  const [overflowStates, setOverflowStates] = React.useState([]);
+  React.useEffect(() => {
+    setTimeout(() => {
       if (isOpen && buttonFocusRef.current) {
         buttonFocusRef.current.focus();
       }
     }, 100);
   }, [isOpen]);
-  var portalNode = React.useRef(null);
-  useIsomorphicEffect.useIsomorphicEffect(function () {
-    var _document$querySelect, _document, _document2, _document3;
-    portalNode.current = portalTarget ? (_document$querySelect = (_document = document) === null || _document === void 0 ? void 0 : _document.querySelector(portalTarget)) !== null && _document$querySelect !== void 0 ? _document$querySelect : (_document2 = document) === null || _document2 === void 0 ? void 0 : _document2.querySelector('body') : (_document3 = document) === null || _document3 === void 0 ? void 0 : _document3.querySelector('body');
+  const portalNode = React.useRef(null);
+  useIsomorphicEffect.useIsomorphicEffect(() => {
+    portalNode.current = portalTarget ? document?.querySelector(portalTarget) ?? document?.querySelector('body') : document?.querySelector('body');
   }, [portalTarget]);
   if (!navLinkLabels) {
-    return pconsole.default.warn("".concat(componentName, " is an Onboarding internal component and is not intended for general use."));
+    return pconsole.default.warn(`${componentName} is an Onboarding internal component and is not intended for general use.`);
   }
-  var itemRefHandler = function itemRefHandler(index, node) {
+  const itemRefHandler = (index, node) => {
     if (node && navItemRefs.current[index] !== node) {
-      var isOverflowing = node.scrollWidth > node.clientWidth;
+      const isOverflowing = node.scrollWidth > node.clientWidth;
       navItemRefs.current[index] = node;
-      setOverflowStates(function (prev) {
-        var newState = _rollupPluginBabelHelpers.toConsumableArray(prev);
+      setOverflowStates(prev => {
+        const newState = [...prev];
         newState[index] = isOverflowing;
         return newState;
       });
     }
   };
   function renderNavLink(index, label) {
-    var _overflowStates$index;
-    var ref = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
-    var isOverflowing = (_overflowStates$index = overflowStates[index]) !== null && _overflowStates$index !== void 0 ? _overflowStates$index : false;
+    let ref = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
+    const isOverflowing = overflowStates[index] ?? false;
     return /*#__PURE__*/React.createElement("li", {
       key: index,
-      ref: function ref(node) {
+      ref: node => {
         itemRefHandler(index, node);
       }
     }, /*#__PURE__*/React.createElement(react.Button, {
       kind: "ghost",
       size: "sm",
-      onClick: function onClick() {
+      onClick: () => {
         setLinkFocusIndex(index);
         onClickNavItem(index + 1);
       },
@@ -103,52 +96,52 @@ exports.CoachmarkStackHome = /*#__PURE__*/React.forwardRef(function (_ref, ref)
       highContrast: false,
       label: label,
       align: tooltipAlign,
-      className: "".concat(blockClass, "__navLinkLabels-tooltip")
+      className: `${blockClass}__navLinkLabels-tooltip`
     }, /*#__PURE__*/React.createElement("span", {
-      className: "".concat(blockClass, "__navLinkLabels-text")
+      className: `${blockClass}__navLinkLabels-text`
     }, label)) : label));
   }
-  return portalNode !== null && portalNode !== void 0 && portalNode.current ? /*#__PURE__*/reactDom.createPortal(/*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({}, rest, {
+  return portalNode?.current ? /*#__PURE__*/reactDom.createPortal(/*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({}, rest, {
     className: cx(blockClass, className),
     ref: ref
   }, devtools.getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement(CoachmarkHeader.CoachmarkHeader, {
-    onClose: function onClose() {
+    onClose: () => {
       setLinkFocusIndex(0);
-      _onClose();
+      onClose();
     }
   }), /*#__PURE__*/React.createElement("div", {
-    className: "".concat(overlayClass, "__body")
+    className: `${overlayClass}__body`
   }, /*#__PURE__*/React.createElement("div", {
-    className: "".concat(overlayClass, "-element")
+    className: `${overlayClass}-element`
   }, !renderMedia && /*#__PURE__*/React.createElement(icons.Idea, {
     size: 20,
-    className: "".concat(blockClass, "__icon-idea")
+    className: `${blockClass}__icon-idea`
   }), renderMedia && /*#__PURE__*/React.createElement("div", {
-    className: "".concat(blockClass, "__element-stepped-media")
+    className: `${blockClass}__element-stepped-media`
   }, renderMedia({
     playStep: 0
   })), /*#__PURE__*/React.createElement("div", {
-    className: "".concat(overlayClass, "-element__content")
+    className: `${overlayClass}-element__content`
   }, title && /*#__PURE__*/React.createElement("h2", {
-    className: "".concat(overlayClass, "-element__title")
+    className: `${overlayClass}-element__title`
   }, title), description && /*#__PURE__*/React.createElement("p", {
-    className: "".concat(overlayClass, "-element__body")
+    className: `${overlayClass}-element__body`
   }, description)), /*#__PURE__*/React.createElement("ul", {
-    className: "".concat(blockClass, "__nav-links")
-  }, navLinkLabels.map(function (label, index) {
+    className: `${blockClass}__nav-links`
+  }, navLinkLabels.map((label, index) => {
     if (index === linkFocusIndex) {
       return renderNavLink(index, label, buttonFocusRef);
     }
     return renderNavLink(index, label);
   })), closeButtonLabel && /*#__PURE__*/React.createElement("div", {
-    className: "".concat(overlayClass, "__footer")
+    className: `${overlayClass}__footer`
   }, /*#__PURE__*/React.createElement(react.Button, {
     size: "sm",
-    onClick: function onClick() {
+    onClick: () => {
       setLinkFocusIndex(0);
-      _onClose();
+      onClose();
     }
-  }, closeButtonLabel))))), portalNode === null || portalNode === void 0 ? void 0 : portalNode.current) : null;
+  }, closeButtonLabel))))), portalNode?.current) : null;
 });
 
 // Return a placeholder if not released and not enabled by feature flag

package/lib/components/ComboButton/ComboButton.js

@@ -16,73 +16,66 @@ var cx = require('classnames');
 var settings = require('../../settings.js');
 var uuidv4 = require('../../global/js/utils/uuidv4.js');
 
-var _excluded = ["children", "className", "overflowMenu"],
-  _excluded2 = ["children", "renderIcon"];
-var blockClass = "".concat(settings.pkg.prefix, "--combo-button");
-var componentName = 'ComboButton';
+const blockClass = `${settings.pkg.prefix}--combo-button`;
+const componentName = 'ComboButton';
 /**
  * The combo button consolidates similar actions, while exposing the most commonly used one.
  */
-var ComboButton = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var children = props.children,
-    className = props.className,
-    overflowMenu = props.overflowMenu,
-    rest = _rollupPluginBabelHelpers.objectWithoutProperties(props, _excluded);
-  var _useRef = React.useRef(uuidv4.default()),
-    instanceId = _useRef.current;
-  var _useState = React.useState(false),
-    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
-    isOpen = _useState2[0],
-    setIsOpen = _useState2[1];
-  var actions = React.Children.toArray(children).filter(Boolean).map(function (child) {
+const ComboButton = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+    children,
+    className,
+    overflowMenu,
+    ...rest
+  } = props;
+  const {
+    current: instanceId
+  } = React.useRef(uuidv4.default());
+  const [isOpen, setIsOpen] = React.useState(false);
+  const actions = React.Children.toArray(children).filter(Boolean).map(child => {
     if (/*#__PURE__*/React.isValidElement(child)) {
-      var _props = child.props;
-      return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, _props), {}, {
+      const {
+        props
+      } = child;
+      return {
+        ...props,
         children: /*#__PURE__*/React.createElement("span", {
-          className: "".concat(blockClass, "__action")
+          className: `${blockClass}__action`
         }, child)
-      });
+      };
     }
     return null;
   });
-  var primaryAction = actions.slice(0, 1);
-  var secondaryActions = actions.slice(1);
+  const primaryAction = actions.slice(0, 1);
+  const secondaryActions = actions.slice(1);
   return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({}, rest, {
     ref: ref,
     className: cx(blockClass, className),
     "data-floating-menu-container": true
   }), /*#__PURE__*/React.createElement(react.Button, primaryAction), secondaryActions.length > 0 && /*#__PURE__*/React.createElement(react.OverflowMenu, _rollupPluginBabelHelpers.extends({}, overflowMenu, {
-    className: "".concat(blockClass, "__overflow-menu"),
-    menuOptionsClass: "".concat(blockClass, "__overflow-menu__list"),
-    onClick: function onClick() {
-      return !isOpen && setIsOpen(true);
-    },
-    onClose: function onClose() {
-      return setIsOpen(false);
-    },
-    renderIcon: function renderIcon() {
-      return /*#__PURE__*/React.createElement(isOpen ? function (props) {
-        return /*#__PURE__*/React.createElement(icons.ChevronUp, _rollupPluginBabelHelpers.extends({
-          size: 16
-        }, props));
-      } : function (props) {
-        return /*#__PURE__*/React.createElement(icons.ChevronDown, _rollupPluginBabelHelpers.extends({
-          size: 16
-        }, props));
-      }, {
-        className: "".concat(blockClass, "__overflow-menu__icon")
-      });
-    },
+    className: `${blockClass}__overflow-menu`,
+    menuOptionsClass: `${blockClass}__overflow-menu__list`,
+    onClick: () => !isOpen && setIsOpen(true),
+    onClose: () => setIsOpen(false),
+    renderIcon: () => /*#__PURE__*/React.createElement(isOpen ? props => /*#__PURE__*/React.createElement(icons.ChevronUp, _rollupPluginBabelHelpers.extends({
+      size: 16
+    }, props)) : props => /*#__PURE__*/React.createElement(icons.ChevronDown, _rollupPluginBabelHelpers.extends({
+      size: 16
+    }, props)), {
+      className: `${blockClass}__overflow-menu__icon`
+    }),
     flipped: true
-  }), secondaryActions.map(function (_ref, index) {
-    var children = _ref.children,
-      Icon = _ref.renderIcon,
-      action = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded2);
+  }), secondaryActions.map((_ref, index) => {
+    let {
+      children,
+      renderIcon: Icon,
+      ...action
+    } = _ref;
     return /*#__PURE__*/React.createElement(react.OverflowMenuItem, _rollupPluginBabelHelpers.extends({}, action, {
-      key: "".concat(blockClass, "--").concat(instanceId, "__overflow-menu__item__").concat(index),
-      className: "".concat(blockClass, "__overflow-menu__item"),
+      key: `${blockClass}--${instanceId}__overflow-menu__item__${index}`,
+      className: `${blockClass}__overflow-menu__item`,
       itemText: /*#__PURE__*/React.createElement(React.Fragment, null, children, Icon && /*#__PURE__*/React.createElement("span", {
-        className: "".concat(blockClass, "__overflow-menu__item__icon")
+        className: `${blockClass}__overflow-menu__item__icon`
       }, /*#__PURE__*/React.createElement(Icon, null)))
     }));
   })));
@@ -91,7 +84,7 @@ var ComboButton = /*#__PURE__*/React.forwardRef(function (props, ref) {
 /**@ts-ignore*/
 ComboButton.deprecated = {
   level: 'warn',
-  details: "Please replace ".concat(componentName, " with Carbon's ComboButton")
+  details: `Please replace ${componentName} with Carbon's ComboButton`
 };
 ComboButton.displayName = componentName;
 ComboButton.propTypes = {

package/lib/components/ComboButton/ComboButtonItem/index.js

@@ -7,15 +7,16 @@
 
 'use strict';
 
-var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
 var index = require('../../../_virtual/index.js');
 var React = require('react');
 
 /**
  * The combo button item provides additional actions a user can take.
  */
-var ComboButtonItem = function ComboButtonItem(_ref) {
-  var rest = _rollupPluginBabelHelpers.extends({}, (_rollupPluginBabelHelpers.objectDestructuringEmpty(_ref), _ref));
+const ComboButtonItem = _ref => {
+  let {
+    ...rest
+  } = _ref;
   return /*#__PURE__*/React.createElement("span", rest);
 };
 ComboButtonItem.propTypes = {