@carbon/ibm-products 2.65.0 → 2.66.0

package/es/components/CoachmarkStack/CoachmarkStack.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 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { useRef, useState, Children, useCallback, useEffect } from 'react';
 import { createPortal } from 'react-dom';
 import PropTypes from '../../_virtual/index.js';
@@ -19,17 +19,15 @@ import { CoachmarkContext } from '../Coachmark/utils/context.js';
 import { COACHMARK_OVERLAY_KIND } from '../Coachmark/utils/enums.js';
 import { useIsomorphicEffect } from '../../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(pkg.prefix, "--coachmark-stack");
-var componentName = 'CoachmarkStack';
-var elementBlockClass = "".concat(pkg.prefix, "--coachmark-stack-element");
-var defaults = {
-  onClose: function onClose() {},
+const blockClass = `${pkg.prefix}--coachmark-stack`;
+const componentName = 'CoachmarkStack';
+const elementBlockClass = `${pkg.prefix}--coachmark-stack-element`;
+const defaults = {
+  onClose: () => {},
   // Pass through to CoachmarkStackHome
   theme: 'light',
   portalTarget: 'body'
@@ -48,75 +46,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.
  */
-var CoachmarkStack = /*#__PURE__*/React__default.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 = _objectWithoutProperties(_ref, _excluded);
-  var portalNode = useRef(null);
-  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');
+let CoachmarkStack = /*#__PURE__*/React__default.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 = useRef(null);
+  useIsomorphicEffect(() => {
+    portalNode.current = portalTarget ? document?.querySelector(portalTarget) ?? document?.querySelector('body') : document?.querySelector('body');
   }, [portalTarget]);
-  var stackHomeRef = useRef(null);
-  var stackedCoachmarkRefs = useRef([]);
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    isOpen = _useState2[0],
-    setIsOpen = _useState2[1];
+  const stackHomeRef = useRef(null);
+  const stackedCoachmarkRefs = useRef([]);
+  const [isOpen, setIsOpen] = 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 = useState(0),
-    _useState4 = _slicedToArray(_useState3, 2),
-    selectedItemNumber = _useState4[0],
-    setSelectedItemNumber = _useState4[1];
+  const [selectedItemNumber, setSelectedItemNumber] = useState(0);
   // // The parent height and width values to return to after unstacked
-  var _useState5 = useState(),
-    _useState6 = _slicedToArray(_useState5, 2),
-    parentHeight = _useState6[0],
-    setParentHeight = _useState6[1];
+  const [parentHeight, setParentHeight] = useState();
   // parent height = child height when stacked behind a child that is shorter
-  var childArray = Children.toArray(children);
-  var mountedRef = useRef(undefined);
+  const childArray = Children.toArray(children);
+  const mountedRef = 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 = useCallback(function (isParentCloseButton) {
+  const handleClose = 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 = useCallback(function (event) {
+  const escFunction = useCallback(event => {
     if (event.key === 'Escape') {
       if (selectedItemNumber === 0) {
         handleClose(true);
@@ -125,52 +111,50 @@ var CoachmarkStack = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
       }
     }
   }, [handleClose, selectedItemNumber]);
-  useEffect(function () {
+  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
   };
-  useEffect(function () {
+  useEffect(() => {
     mountedRef.current = true;
-    return function () {
+    return () => {
       mountedRef.current = false;
     };
   }, []);
-  useEffect(function () {
-    setTimeout(function () {
+  useEffect(() => {
+    setTimeout(() => {
       if (stackHomeRef.current) {
         setParentHeight(stackHomeRef.current.clientHeight + 16);
       }
     }, 0);
   }, [stackHomeRef]);
-  useEffect(function () {
-    var targetSelectedItem = selectedItemNumber - 1;
+  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) {
@@ -178,52 +162,50 @@ var CoachmarkStack = /*#__PURE__*/React__default.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 = Children.map(childArray, function (child, idx) {
-    var mountedClass = mountedRef.current ? "".concat(elementBlockClass, "--is-mounted") : '';
+  const wrappedChildren = Children.map(childArray, (child, idx) => {
+    const mountedClass = mountedRef.current ? `${elementBlockClass}--is-mounted` : '';
     return /*#__PURE__*/React__default.createElement(CoachmarkOverlay, {
       key: idx,
-      ref: function ref(_ref2) {
-        stackedCoachmarkRefs.current[idx] = _ref2;
+      ref: ref => {
+        stackedCoachmarkRefs.current[idx] = ref;
       },
       kind: 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__default.createElement(CoachmarkContext.Provider, {
     value: contextValue
   }, /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
-    className: cx(blockClass, "".concat(pkg.prefix, "--coachmark-overlay--stack"), className),
+    className: cx(blockClass, `${pkg.prefix}--coachmark-overlay--stack`, className),
     ref: ref
   }, getDevtoolsProps(componentName)), /*#__PURE__*/React__default.createElement(CoachmarkTagline, {
     title: tagline,
     onClose: onClose
   }), /*#__PURE__*/React__default.createElement(CoachmarkStackHome, {
     ref: stackHomeRef,
-    className: cx("".concat(pkg.prefix, "--coachmark-overlay"), "".concat(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(`${pkg.prefix}--coachmark-overlay`, `${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__*/createPortal(wrappedChildren, portalNode === null || portalNode === void 0 ? void 0 : portalNode.current) : null));
+  }), portalNode?.current ? /*#__PURE__*/createPortal(wrappedChildren, portalNode?.current) : null));
 });
 
 // Return a placeholder if not released and not enabled by feature flag

package/es/components/CoachmarkStack/CoachmarkStackHome.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, toConsumableArray as _toConsumableArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { forwardRef, useRef, useState, useEffect } from 'react';
 import pconsole from '../../global/js/utils/pconsole.js';
 import PropTypes from '../../_virtual/index.js';
@@ -18,81 +18,74 @@ import { createPortal } from 'react-dom';
 import { CoachmarkHeader } from '../Coachmark/CoachmarkHeader.js';
 import { useIsomorphicEffect } from '../../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(pkg.prefix, "--coachmark-stacked-home");
-var overlayClass = "".concat(pkg.prefix, "--coachmark-overlay");
-var componentName = 'CoachmarkStackHome';
+const blockClass = `${pkg.prefix}--coachmark-stacked-home`;
+const overlayClass = `${pkg.prefix}--coachmark-overlay`;
+const componentName = 'CoachmarkStackHome';
 
 /**
  * DO NOT USE. This component is for the exclusive use
  * of other Onboarding components.
  */
-var CoachmarkStackHome = /*#__PURE__*/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 = _objectWithoutProperties(_ref, _excluded);
-  var buttonFocusRef = useRef(null);
-  var _useState = useState(0),
-    _useState2 = _slicedToArray(_useState, 2),
-    linkFocusIndex = _useState2[0],
-    setLinkFocusIndex = _useState2[1];
-  var navItemRefs = useRef([]);
-  var _useState3 = useState([]),
-    _useState4 = _slicedToArray(_useState3, 2),
-    overflowStates = _useState4[0],
-    setOverflowStates = _useState4[1];
-  useEffect(function () {
-    setTimeout(function () {
+let CoachmarkStackHome = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    className,
+    description,
+    isOpen,
+    renderMedia,
+    navLinkLabels,
+    onClickNavItem,
+    onClose,
+    portalTarget,
+    closeButtonLabel,
+    title,
+    tooltipAlign,
+    ...rest
+  } = _ref;
+  const buttonFocusRef = useRef(null);
+  const [linkFocusIndex, setLinkFocusIndex] = useState(0);
+  const navItemRefs = useRef([]);
+  const [overflowStates, setOverflowStates] = useState([]);
+  useEffect(() => {
+    setTimeout(() => {
       if (isOpen && buttonFocusRef.current) {
         buttonFocusRef.current.focus();
       }
     }, 100);
   }, [isOpen]);
-  var portalNode = useRef(null);
-  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 = useRef(null);
+  useIsomorphicEffect(() => {
+    portalNode.current = portalTarget ? document?.querySelector(portalTarget) ?? document?.querySelector('body') : document?.querySelector('body');
   }, [portalTarget]);
   if (!navLinkLabels) {
-    return pconsole.warn("".concat(componentName, " is an Onboarding internal component and is not intended for general use."));
+    return pconsole.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 = _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__default.createElement("li", {
       key: index,
-      ref: function ref(node) {
+      ref: node => {
         itemRefHandler(index, node);
       }
     }, /*#__PURE__*/React__default.createElement(Button, {
       kind: "ghost",
       size: "sm",
-      onClick: function onClick() {
+      onClick: () => {
         setLinkFocusIndex(index);
         onClickNavItem(index + 1);
       },
@@ -101,52 +94,52 @@ var CoachmarkStackHome = /*#__PURE__*/forwardRef(function (_ref, ref) {
       highContrast: false,
       label: label,
       align: tooltipAlign,
-      className: "".concat(blockClass, "__navLinkLabels-tooltip")
+      className: `${blockClass}__navLinkLabels-tooltip`
     }, /*#__PURE__*/React__default.createElement("span", {
-      className: "".concat(blockClass, "__navLinkLabels-text")
+      className: `${blockClass}__navLinkLabels-text`
     }, label)) : label));
   }
-  return portalNode !== null && portalNode !== void 0 && portalNode.current ? /*#__PURE__*/createPortal(/*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
+  return portalNode?.current ? /*#__PURE__*/createPortal(/*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
     className: cx(blockClass, className),
     ref: ref
   }, getDevtoolsProps(componentName)), /*#__PURE__*/React__default.createElement(CoachmarkHeader, {
-    onClose: function onClose() {
+    onClose: () => {
       setLinkFocusIndex(0);
-      _onClose();
+      onClose();
     }
   }), /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(overlayClass, "__body")
+    className: `${overlayClass}__body`
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(overlayClass, "-element")
+    className: `${overlayClass}-element`
   }, !renderMedia && /*#__PURE__*/React__default.createElement(Idea, {
     size: 20,
-    className: "".concat(blockClass, "__icon-idea")
+    className: `${blockClass}__icon-idea`
   }), renderMedia && /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(blockClass, "__element-stepped-media")
+    className: `${blockClass}__element-stepped-media`
   }, renderMedia({
     playStep: 0
   })), /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(overlayClass, "-element__content")
+    className: `${overlayClass}-element__content`
   }, title && /*#__PURE__*/React__default.createElement("h2", {
-    className: "".concat(overlayClass, "-element__title")
+    className: `${overlayClass}-element__title`
   }, title), description && /*#__PURE__*/React__default.createElement("p", {
-    className: "".concat(overlayClass, "-element__body")
+    className: `${overlayClass}-element__body`
   }, description)), /*#__PURE__*/React__default.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__default.createElement("div", {
-    className: "".concat(overlayClass, "__footer")
+    className: `${overlayClass}__footer`
   }, /*#__PURE__*/React__default.createElement(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/es/components/ComboButton/ComboButton.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { OverflowMenu, Button, OverflowMenuItem } from '@carbon/react';
 import { ChevronUp, ChevronDown } from '@carbon/react/icons';
 import React__default, { forwardRef, useRef, useState, Children, createElement } from 'react';
@@ -14,73 +14,66 @@ import cx from 'classnames';
 import { pkg } from '../../settings.js';
 import uuidv4 from '../../global/js/utils/uuidv4.js';
 
-var _excluded = ["children", "className", "overflowMenu"],
-  _excluded2 = ["children", "renderIcon"];
-var blockClass = "".concat(pkg.prefix, "--combo-button");
-var componentName = 'ComboButton';
+const blockClass = `${pkg.prefix}--combo-button`;
+const componentName = 'ComboButton';
 /**
  * The combo button consolidates similar actions, while exposing the most commonly used one.
  */
-var ComboButton = /*#__PURE__*/forwardRef(function (props, ref) {
-  var children = props.children,
-    className = props.className,
-    overflowMenu = props.overflowMenu,
-    rest = _objectWithoutProperties(props, _excluded);
-  var _useRef = useRef(uuidv4()),
-    instanceId = _useRef.current;
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    isOpen = _useState2[0],
-    setIsOpen = _useState2[1];
-  var actions = Children.toArray(children).filter(Boolean).map(function (child) {
+const ComboButton = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    children,
+    className,
+    overflowMenu,
+    ...rest
+  } = props;
+  const {
+    current: instanceId
+  } = useRef(uuidv4());
+  const [isOpen, setIsOpen] = useState(false);
+  const actions = Children.toArray(children).filter(Boolean).map(child => {
     if (/*#__PURE__*/React__default.isValidElement(child)) {
-      var _props = child.props;
-      return _objectSpread2(_objectSpread2({}, _props), {}, {
+      const {
+        props
+      } = child;
+      return {
+        ...props,
         children: /*#__PURE__*/React__default.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__default.createElement("div", _extends({}, rest, {
     ref: ref,
     className: cx(blockClass, className),
     "data-floating-menu-container": true
   }), /*#__PURE__*/React__default.createElement(Button, primaryAction), secondaryActions.length > 0 && /*#__PURE__*/React__default.createElement(OverflowMenu, _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__*/createElement(isOpen ? function (props) {
-        return /*#__PURE__*/React__default.createElement(ChevronUp, _extends({
-          size: 16
-        }, props));
-      } : function (props) {
-        return /*#__PURE__*/React__default.createElement(ChevronDown, _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__*/createElement(isOpen ? props => /*#__PURE__*/React__default.createElement(ChevronUp, _extends({
+      size: 16
+    }, props)) : props => /*#__PURE__*/React__default.createElement(ChevronDown, _extends({
+      size: 16
+    }, props)), {
+      className: `${blockClass}__overflow-menu__icon`
+    }),
     flipped: true
-  }), secondaryActions.map(function (_ref, index) {
-    var children = _ref.children,
-      Icon = _ref.renderIcon,
-      action = _objectWithoutProperties(_ref, _excluded2);
+  }), secondaryActions.map((_ref, index) => {
+    let {
+      children,
+      renderIcon: Icon,
+      ...action
+    } = _ref;
     return /*#__PURE__*/React__default.createElement(OverflowMenuItem, _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__default.createElement(React__default.Fragment, null, children, Icon && /*#__PURE__*/React__default.createElement("span", {
-        className: "".concat(blockClass, "__overflow-menu__item__icon")
+        className: `${blockClass}__overflow-menu__item__icon`
       }, /*#__PURE__*/React__default.createElement(Icon, null)))
     }));
   })));
@@ -89,7 +82,7 @@ var ComboButton = /*#__PURE__*/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/es/components/ComboButton/ComboButtonItem/index.js

@@ -5,15 +5,16 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { extends as _extends, objectDestructuringEmpty as _objectDestructuringEmpty } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import { p as propTypesExports } from '../../../_virtual/index.js';
 import React__default from 'react';
 
 /**
  * The combo button item provides additional actions a user can take.
  */
-var ComboButtonItem = function ComboButtonItem(_ref) {
-  var rest = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
+const ComboButtonItem = _ref => {
+  let {
+    ...rest
+  } = _ref;
   return /*#__PURE__*/React__default.createElement("span", rest);
 };
 ComboButtonItem.propTypes = {