@carbon/ibm-products 2.65.0 → 2.66.0

package/lib/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js

@@ -20,135 +20,123 @@ require('../../global/js/utils/props-helper.js');
 var TooltipTrigger = require('../TooltipTrigger/TooltipTrigger.js');
 
 var _TooltipTrigger;
-var _excluded = ["breadcrumbs", "className", "label", "maxVisible", "noTrailingSlash", "overflowAriaLabel", "overflowTooltipAlign"],
-  _excluded2 = ["label", "key", "title", "id", "shortTitle"],
-  _excluded3 = ["className", "key", "label", "shortTitle", "title"];
 
 // The block part of our conventional BEM class names (blockClass__E--M).
-var blockClass = "".concat(settings.pkg.prefix, "--breadcrumb-with-overflow");
-var componentName = 'BreadcrumbWithOverflow';
+const blockClass = `${settings.pkg.prefix}--breadcrumb-with-overflow`;
+const componentName = 'BreadcrumbWithOverflow';
 
 // NOTE: the component SCSS is not imported here: it is rolled up separately.
 
 /**
  * The BreadcrumbWithOverflow is used internally by the PageHeader to wrap BreadcrumbItems.
  */
-exports.BreadcrumbWithOverflow = function BreadcrumbWithOverflow(_ref) {
-  var _backItem, _backItem2, _backItem3;
-  var breadcrumbs = _ref.breadcrumbs,
-    className = _ref.className,
-    label = _ref.label,
-    maxVisible = _ref.maxVisible,
-    noTrailingSlash = _ref.noTrailingSlash,
-    overflowAriaLabel = _ref.overflowAriaLabel,
-    overflowTooltipAlign = _ref.overflowTooltipAlign,
-    other = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-  var carbonPrefix = react.usePrefix();
-  var _useState = React.useState(3),
-    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
-    displayCount = _useState2[0],
-    setDisplayCount = _useState2[1];
-  var _useState3 = React.useState([]),
-    _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
-    displayedBreadcrumbItems = _useState4[0],
-    setDisplayedBreadcrumbItems = _useState4[1];
-  var breadcrumbItemWithOverflow = React.useRef(null);
-  var sizingContainerRef = React.useRef(null);
-  var internalId = React.useRef(uuidv4.default());
-  var _useState5 = React.useState([]),
-    _useState6 = _rollupPluginBabelHelpers.slicedToArray(_useState5, 2),
-    hiddenSizingItems = _useState6[0],
-    setHiddenSizingItems = _useState6[1];
+exports.BreadcrumbWithOverflow = _ref => {
+  let {
+    breadcrumbs,
+    className,
+    label,
+    maxVisible,
+    noTrailingSlash,
+    overflowAriaLabel,
+    overflowTooltipAlign,
+    ...other
+  } = _ref;
+  const carbonPrefix = react.usePrefix();
+  const [displayCount, setDisplayCount] = React.useState(3);
+  const [displayedBreadcrumbItems, setDisplayedBreadcrumbItems] = React.useState([]);
+  const breadcrumbItemWithOverflow = React.useRef(null);
+  const sizingContainerRef = React.useRef(null);
+  const internalId = React.useRef(uuidv4.default());
+  const [hiddenSizingItems, setHiddenSizingItems] = React.useState([]);
 
   // eslint-disable-next-line react/prop-types
-  var BreadcrumbOverflowMenu = function BreadcrumbOverflowMenu(_ref2) {
-    var overflowItems = _ref2.overflowItems;
-    var handleClick = function handleClick(evt, item) {
-      var _item$props, _item$props2, _item$props2$onClick;
-      if (item !== null && item !== void 0 && (_item$props = item.props) !== null && _item$props !== void 0 && _item$props.href) {
+  const BreadcrumbOverflowMenu = _ref2 => {
+    let {
+      overflowItems
+    } = _ref2;
+    const handleClick = (evt, item) => {
+      if (item?.props?.href) {
         window.location.href = item.props.href;
       }
-      item === null || item === void 0 || (_item$props2 = item.props) === null || _item$props2 === void 0 || (_item$props2$onClick = _item$props2.onClick) === null || _item$props2$onClick === void 0 || _item$props2$onClick.call(_item$props2, evt);
+      item?.props?.onClick?.(evt);
     };
     return /*#__PURE__*/React.createElement(react.BreadcrumbItem, {
-      key: "breadcrumb-overflow-".concat(internalId.current)
+      key: `breadcrumb-overflow-${internalId.current}`
     }, /*#__PURE__*/React.createElement(react.unstable_FeatureFlags, {
       enableV12Overflowmenu: true
     }, /*#__PURE__*/React.createElement(react.OverflowMenu, {
       "aria-label": overflowAriaLabel,
       label: overflowAriaLabel // also needs setting to avoid a11y "Accessible name does not match or contain the visible label text"
       ,
-      renderIcon: function renderIcon(props) {
-        return /*#__PURE__*/React.createElement(icons.OverflowMenuHorizontal, _rollupPluginBabelHelpers.extends({
-          size: 32
-        }, props));
-      },
-      className: "".concat(blockClass, "__overflow-menu"),
+      renderIcon: props => /*#__PURE__*/React.createElement(icons.OverflowMenuHorizontal, _rollupPluginBabelHelpers.extends({
+        size: 32
+      }, props)),
+      className: `${blockClass}__overflow-menu`,
       tooltipAlignment: overflowTooltipAlign
     },
     // eslint-disable-next-line react/prop-types
-    overflowItems.map(function (item, index) {
-      return /*#__PURE__*/React.createElement(react.MenuItem, {
-        key: "breadcrumb-overflow-menu-item-".concat(internalId.current, "-").concat(index),
-        onClick: function onClick(evt) {
-          return handleClick(evt, item);
-        },
-        label: item.props.children
-      });
-    }))));
+    overflowItems.map((item, index) => /*#__PURE__*/React.createElement(react.MenuItem, {
+      key: `breadcrumb-overflow-menu-item-${internalId.current}-${index}`,
+      onClick: evt => handleClick(evt, item),
+      label: item.props.children
+    })))));
   };
 
   // create hidden sizing items
-  React.useEffect(function () {
+  React.useEffect(() => {
     // Hidden action bar and items used to calculate sizes
     setHiddenSizingItems(/*#__PURE__*/React.createElement("div", {
-      className: "".concat(blockClass, "__breadcrumb-container ").concat(blockClass, "__breadcrumb-container--hidden"),
+      className: `${blockClass}__breadcrumb-container ${blockClass}__breadcrumb-container--hidden`,
       "aria-hidden": true,
       ref: sizingContainerRef
     }, /*#__PURE__*/React.createElement(react.Breadcrumb, {
-      "aria-label": "".concat(label, "-hidden")
+      "aria-label": `${label}-hidden`
     }, /*#__PURE__*/React.createElement(react.BreadcrumbItem, {
-      key: "".concat(blockClass, "-hidden-overflow-").concat(internalId)
+      key: `${blockClass}-hidden-overflow-${internalId}`
     }, /*#__PURE__*/React.createElement(react.OverflowMenu, {
       "aria-label": overflowAriaLabel,
-      renderIcon: function renderIcon(props) {
-        return /*#__PURE__*/React.createElement(icons.OverflowMenuHorizontal, _rollupPluginBabelHelpers.extends({
-          size: 32
-        }, props));
-      }
-    })), breadcrumbs.map(function (_ref3) {
-      var label = _ref3.label,
-        key = _ref3.key,
-        title = _ref3.title,
-        id = _ref3.id;
-        _ref3.shortTitle;
-        var rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref3, _excluded2);
+      renderIcon: props => /*#__PURE__*/React.createElement(icons.OverflowMenuHorizontal, _rollupPluginBabelHelpers.extends({
+        size: 32
+      }, props))
+    })), breadcrumbs.map(_ref3 => {
+      let {
+        label,
+        key,
+        title,
+        id,
+        // short title isn't necessary for the hidden sizing
+        // eslint-disable-next-line no-unused-vars
+        shortTitle,
+        ...rest
+      } = _ref3;
       return /*#__PURE__*/React.createElement(react.BreadcrumbItem, _rollupPluginBabelHelpers.extends({
         key: key
       }, rest, {
         // ensure id is not duplicated
         "data-original-id": id,
-        title: title !== null && title !== void 0 ? title : label
+        title: title ?? label
       }), label);
     }))));
   }, [breadcrumbs, label, overflowAriaLabel]);
-  React.useEffect(function () {
+  React.useEffect(() => {
     // updates displayedBreadcrumbItems and overflowBreadcrumbItems based on displayCount and breadcrumbs
     /* istanbul ignore if */
     if (breadcrumbs.length === 0) {
       setDisplayedBreadcrumbItems([]);
       return;
     }
-    var newDisplayedBreadcrumbItems = breadcrumbs.map(function (_ref4, index) {
-      var className = _ref4.className,
-        key = _ref4.key,
-        label = _ref4.label,
-        shortTitle = _ref4.shortTitle,
-        title = _ref4.title,
-        rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref4, _excluded3);
+    const newDisplayedBreadcrumbItems = breadcrumbs.map((_ref4, index) => {
+      let {
+        className,
+        key,
+        label,
+        shortTitle,
+        title,
+        ...rest
+      } = _ref4;
       return /*#__PURE__*/React.createElement(react.BreadcrumbItem, _rollupPluginBabelHelpers.extends({
         key: key,
-        className: index > 0 || displayCount > 1 ? cx([className, "".concat(blockClass, "__displayed-breadcrumb")]) : className,
+        className: index > 0 || displayCount > 1 ? cx([className, `${blockClass}__displayed-breadcrumb`]) : className,
         title: index + 1 === breadcrumbs.length ? title : null
       }, rest), shortTitle || label);
     });
@@ -159,23 +147,23 @@ exports.BreadcrumbWithOverflow = function BreadcrumbWithOverflow(_ref) {
     //  * the first item is the next to be displayed, if there's space once the last item and overflow are shown;
     //  * any remaining space after the first item, last item and overflow are shown is used to show items (n-1), (n-2), (n-3), ..., until the space is used up ;
     // Note that displayCount (min 1) has been computed based on the available space and the above sequence.
-    var overflowPosition = displayCount > 1 ? 1 : 0;
-    var newOverflowBreadcrumbItems = newDisplayedBreadcrumbItems.splice(overflowPosition, breadcrumbs.length - displayCount);
+    const overflowPosition = displayCount > 1 ? 1 : 0;
+    let newOverflowBreadcrumbItems = newDisplayedBreadcrumbItems.splice(overflowPosition, breadcrumbs.length - displayCount);
 
     // if needed add overflow menu
     if (newOverflowBreadcrumbItems.length) {
       newDisplayedBreadcrumbItems.splice(overflowPosition, 0, /*#__PURE__*/React.createElement(BreadcrumbOverflowMenu, {
         overflowItems: newOverflowBreadcrumbItems,
-        key: "displayed-breadcrumb-".concat(internalId, "-overflow")
+        key: `displayed-breadcrumb-${internalId}-overflow`
       }));
     }
     setDisplayedBreadcrumbItems(newDisplayedBreadcrumbItems);
   }, [breadcrumbs, displayCount]);
-  var checkFullyVisibleBreadcrumbItems = function checkFullyVisibleBreadcrumbItems() {
+  const checkFullyVisibleBreadcrumbItems = () => {
     if (!breadcrumbItemWithOverflow.current) {
       return;
     }
-    var displayItemIndex = function displayItemIndex(itemCount, index) {
+    const displayItemIndex = (itemCount, index) => {
       // In this data set the overflow measuring item is [0]
       // so the first displayItem in the list is [1]
       // we never return 0;
@@ -192,31 +180,22 @@ exports.BreadcrumbWithOverflow = function BreadcrumbWithOverflow(_ref) {
       setDisplayCount(1);
     } else {
       // how many will fit?
-      var willFit = 0;
-      var spaceAvailable = breadcrumbItemWithOverflow.current.offsetWidth; // not sure how to test resize
+      let willFit = 0;
+      let spaceAvailable = breadcrumbItemWithOverflow.current.offsetWidth; // not sure how to test resize
 
       /* istanbul ignore next */
       if (sizingContainerRef.current) {
-        var sizingBreadcrumbItems = sizingContainerRef.current.querySelectorAll(".".concat(carbonPrefix, "--breadcrumb-item"));
-        var breadcrumbWidthsIncludingMargin = [];
-        var _iterator = _rollupPluginBabelHelpers.createForOfIteratorHelper(sizingBreadcrumbItems),
-          _step;
-        try {
-          for (_iterator.s(); !(_step = _iterator.n()).done;) {
-            var item = _step.value;
-            var computedStyle = window ? window.getComputedStyle(sizingBreadcrumbItems[0]) : null;
-            var marginWidths = computedStyle ? parseFloat(computedStyle.marginLeft || 0, 10) + parseFloat(computedStyle.marginRight || 0, 10) : 0;
-            breadcrumbWidthsIncludingMargin.push(item.offsetWidth + marginWidths);
-          }
-        } catch (err) {
-          _iterator.e(err);
-        } finally {
-          _iterator.f();
+        const sizingBreadcrumbItems = sizingContainerRef.current.querySelectorAll(`.${carbonPrefix}--breadcrumb-item`);
+        const breadcrumbWidthsIncludingMargin = [];
+        for (let item of sizingBreadcrumbItems) {
+          const computedStyle = window ? window.getComputedStyle(sizingBreadcrumbItems[0]) : null;
+          const marginWidths = computedStyle ? parseFloat(computedStyle.marginLeft || 0, 10) + parseFloat(computedStyle.marginRight || 0, 10) : 0;
+          breadcrumbWidthsIncludingMargin.push(item.offsetWidth + marginWidths);
         }
-        var overflowWidth = breadcrumbWidthsIncludingMargin[0];
-        for (var i = 0; i < breadcrumbWidthsIncludingMargin.length - 1; i++) {
+        let overflowWidth = breadcrumbWidthsIncludingMargin[0];
+        for (let i = 0; i < breadcrumbWidthsIncludingMargin.length - 1; i++) {
           // count used one less than length to account for the included overflow item
-          var index = displayItemIndex(breadcrumbWidthsIncludingMargin.length, i);
+          const index = displayItemIndex(breadcrumbWidthsIncludingMargin.length, i);
           if (spaceAvailable >= breadcrumbWidthsIncludingMargin[index]) {
             spaceAvailable -= breadcrumbWidthsIncludingMargin[index];
             willFit += 1;
@@ -235,7 +214,7 @@ exports.BreadcrumbWithOverflow = function BreadcrumbWithOverflow(_ref) {
             // Highly unlikely any useful breadcrumb-item is smaller than the overflow menu, but we loop anyway just in case
 
             // item removed is based on last item added which is the current value of willFit
-            var itemToRemove = displayItemIndex(breadcrumbWidthsIncludingMargin.length, willFit);
+            const itemToRemove = displayItemIndex(breadcrumbWidthsIncludingMargin.length, willFit);
             spaceAvailable += breadcrumbWidthsIncludingMargin[itemToRemove];
           }
         }
@@ -247,17 +226,17 @@ exports.BreadcrumbWithOverflow = function BreadcrumbWithOverflow(_ref) {
       }
     }
   };
-  React.useEffect(function () {
+  React.useEffect(() => {
     checkFullyVisibleBreadcrumbItems();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [hiddenSizingItems, maxVisible]);
 
   /* istanbul ignore next */ // not sure how to test resize
-  var handleResize = function handleResize() {
+  const handleResize = () => {
     /* istanbul ignore next */ // not sure how to test resize
     checkFullyVisibleBreadcrumbItems();
   };
-  var backItem = breadcrumbs[breadcrumbs.length - 1];
+  let backItem = breadcrumbs[breadcrumbs.length - 1];
   /* istanbul ignore if */ // not sure how to test media queries
   if (backItem.isCurrentPage) {
     backItem = breadcrumbs[breadcrumbs.length - 2];
@@ -268,27 +247,29 @@ exports.BreadcrumbWithOverflow = function BreadcrumbWithOverflow(_ref) {
   // item resize
   useResizeObserver.useResizeObserver(breadcrumbItemWithOverflow, handleResize);
   return /*#__PURE__*/React.createElement("div", {
-    className: cx(blockClass, className, _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__with-items"), displayedBreadcrumbItems.length > 1)),
+    className: cx(blockClass, className, {
+      [`${blockClass}__with-items`]: displayedBreadcrumbItems.length > 1
+    }),
     ref: breadcrumbItemWithOverflow
   }, /*#__PURE__*/React.createElement("div", {
-    className: cx(["".concat(blockClass, "__space")])
+    className: cx([`${blockClass}__space`])
   }, hiddenSizingItems, /*#__PURE__*/React.createElement(react.Breadcrumb, _rollupPluginBabelHelpers.extends({
     "aria-label": label,
-    className: cx("".concat(blockClass, "__breadcrumb-container"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__breadcrumb-container-with-items"), displayedBreadcrumbItems.length > 1)),
+    className: cx(`${blockClass}__breadcrumb-container`, {
+      [`${blockClass}__breadcrumb-container-with-items`]: displayedBreadcrumbItems.length > 1
+    }),
     noTrailingSlash: noTrailingSlash
-  }, other), ((_backItem = backItem) === null || _backItem === void 0 ? void 0 : _backItem.href) && (((_backItem2 = backItem) === null || _backItem2 === void 0 ? void 0 : _backItem2.label) || ((_backItem3 = backItem) === null || _backItem3 === void 0 ? void 0 : _backItem3.title)) && /*#__PURE__*/React.createElement(react.BreadcrumbItem, {
-    className: cx("".concat(blockClass, "__breadcrumb-back"))
+  }, other), backItem?.href && (backItem?.label || backItem?.title) && /*#__PURE__*/React.createElement(react.BreadcrumbItem, {
+    className: cx(`${blockClass}__breadcrumb-back`)
   }, /*#__PURE__*/React.createElement(react.Link, {
     href: backItem.href,
-    renderIcon: function renderIcon() {
-      return /*#__PURE__*/React.createElement(react.Tooltip, {
-        align: "right",
-        label: backItem.title || backItem.label,
-        className: "".concat(blockClass, "__back__button ").concat(carbonPrefix, "--icon-tooltip")
-      }, _TooltipTrigger || (_TooltipTrigger = /*#__PURE__*/React.createElement(TooltipTrigger.TooltipTrigger, null, /*#__PURE__*/React.createElement(icons.ArrowLeft, {
-        size: 16
-      }))));
-    }
+    renderIcon: () => /*#__PURE__*/React.createElement(react.Tooltip, {
+      align: "right",
+      label: backItem.title || backItem.label,
+      className: `${blockClass}__back__button ${carbonPrefix}--icon-tooltip`
+    }, _TooltipTrigger || (_TooltipTrigger = /*#__PURE__*/React.createElement(TooltipTrigger.TooltipTrigger, null, /*#__PURE__*/React.createElement(icons.ArrowLeft, {
+      size: 16
+    }))))
   })), displayedBreadcrumbItems)));
 };
 
@@ -319,8 +300,10 @@ exports.BreadcrumbWithOverflow.propTypes = {
     /**
      * A string based alternative to the children, required only if children is not of type string
      */
-    title: index.default.string.isRequired.if(function (_ref5) {
-      var label = _ref5.label;
+    title: index.default.string.isRequired.if(_ref5 => {
+      let {
+        label
+      } = _ref5;
       return typeof label !== 'string';
     })
   })),
@@ -343,8 +326,10 @@ exports.BreadcrumbWithOverflow.propTypes = {
   /**
    * overflowAriaLabel label for open close button overflow used for breadcrumb items that do not fit.
    */
-  overflowAriaLabel: index.default.string.isRequired.if(function (_ref6) {
-    var breadcrumbs = _ref6.breadcrumbs;
+  overflowAriaLabel: index.default.string.isRequired.if(_ref6 => {
+    let {
+      breadcrumbs
+    } = _ref6;
     return breadcrumbs.length > 1;
   }),
   /**

package/lib/components/ButtonSetWithOverflow/ButtonSetWithOverflow.js

@@ -16,29 +16,24 @@ var react = require('@carbon/react');
 var settings = require('../../settings.js');
 var propsHelper = require('../../global/js/utils/props-helper.js');
 
-var _excluded = ["isHidden", "buttons"],
-  _excluded2 = ["label", "key", "kind", "id"],
-  _excluded3 = ["buttons"],
-  _excluded4 = ["key", "kind"];
-var blockClass = "".concat(settings.pkg.prefix, "--button-set-with-overflow");
-var componentName = 'ButtonSetWithOverflow';
-var buttonSize = 'md';
-var ButtonSetWithOverflow = function ButtonSetWithOverflow(_ref) {
-  var buttons = _ref.buttons,
-    className = _ref.className,
-    onWidthChange = _ref.onWidthChange,
-    buttonSetOverflowLabel = _ref.buttonSetOverflowLabel,
-    menuOptionsClass = _ref.menuOptionsClass,
-    rightAlign = _ref.rightAlign;
-  var carbonPrefix = react.usePrefix();
-  var _useState = React.useState(false),
-    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
-    showAsOverflow = _useState2[0],
-    setShowAsOverflow = _useState2[1];
-  var spaceAvailableRef = React.useRef(null);
-  var sizingContainerRefSet = React.useRef(null);
-  var sizingContainerRefCombo = React.useRef(null);
-  var sizes = React.useRef({});
+const blockClass = `${settings.pkg.prefix}--button-set-with-overflow`;
+const componentName = 'ButtonSetWithOverflow';
+const buttonSize = 'md';
+const ButtonSetWithOverflow = _ref => {
+  let {
+    buttons,
+    className,
+    onWidthChange,
+    buttonSetOverflowLabel,
+    menuOptionsClass,
+    rightAlign
+  } = _ref;
+  const carbonPrefix = react.usePrefix();
+  const [showAsOverflow, setShowAsOverflow] = React.useState(false);
+  const spaceAvailableRef = React.useRef(null);
+  const sizingContainerRefSet = React.useRef(null);
+  const sizingContainerRefCombo = React.useRef(null);
+  const sizes = React.useRef({});
 
   /**
    * checkFullyVisibleItems determines display count based on space available and width of pageActions
@@ -48,37 +43,29 @@ var ButtonSetWithOverflow = function ButtonSetWithOverflow(_ref) {
    * ButtonSet is used, once this is no longer the case it switches to a ButtonMenu.
    *
    */
-  var checkFullyVisibleItems = function checkFullyVisibleItems() {
-    var _spaceAvailableRef$cu, _sizingContainerRefSe, _sizingContainerRefCo;
-    var spaceAvailable = (_spaceAvailableRef$cu = spaceAvailableRef.current) === null || _spaceAvailableRef$cu === void 0 ? void 0 : _spaceAvailableRef$cu.offsetWidth;
-    var newShowAsOverflow = true;
+  const checkFullyVisibleItems = () => {
+    const spaceAvailable = spaceAvailableRef.current?.offsetWidth;
+    let newShowAsOverflow = true;
 
     // get all of the hidden sizing buttons
-    var sizingSet = (_sizingContainerRefSe = sizingContainerRefSet.current) === null || _sizingContainerRefSe === void 0 ? void 0 : _sizingContainerRefSe.querySelectorAll(".".concat(carbonPrefix, "--btn"));
+    const sizingSet = sizingContainerRefSet.current?.querySelectorAll(`.${carbonPrefix}--btn`);
 
     // calculate total width of button set
-    var sizingSetTotalSize = 0;
-    var _iterator = _rollupPluginBabelHelpers.createForOfIteratorHelper(sizingSet),
-      _step;
-    try {
-      for (_iterator.s(); !(_step = _iterator.n()).done;) {
-        var item = _step.value;
-        sizingSetTotalSize += item.offsetWidth;
-      }
-
-      // check ButtonMenu size
-    } catch (err) {
-      _iterator.e(err);
-    } finally {
-      _iterator.f();
+    let sizingSetTotalSize = 0;
+    for (let item of sizingSet) {
+      sizingSetTotalSize += item.offsetWidth;
     }
-    var sizingComboSize = (_sizingContainerRefCo = sizingContainerRefCombo.current) === null || _sizingContainerRefCo === void 0 ? void 0 : _sizingContainerRefCo.offsetWidth;
+
+    // check ButtonMenu size
+    const sizingComboSize = sizingContainerRefCombo.current?.offsetWidth;
     if (onWidthChange && (sizes.current.minWidth !== sizingComboSize || sizes.current.maxWidth !== sizingSetTotalSize)) {
       sizes.current.minWidth = sizingComboSize;
       sizes.current.maxWidth = sizingSetTotalSize;
 
       // report min and max width required to host
-      onWidthChange(_rollupPluginBabelHelpers.objectSpread2({}, sizes.current));
+      onWidthChange({
+        ...sizes.current
+      });
     }
 
     // only if space available use ButtonSet.
@@ -87,30 +74,33 @@ var ButtonSetWithOverflow = function ButtonSetWithOverflow(_ref) {
     }
     setShowAsOverflow(newShowAsOverflow);
   };
-  React.useEffect(function () {
+  React.useEffect(() => {
     checkFullyVisibleItems();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [buttons]);
-  var AButtonSet = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
-    var _ref2$isHidden = _ref2.isHidden,
-      isHidden = _ref2$isHidden === void 0 ? false : _ref2$isHidden,
-      buttons = _ref2.buttons,
-      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref2, _excluded);
+  const AButtonSet = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
+    let {
+      isHidden = false,
+      buttons,
+      ...rest
+    } = _ref2;
     return /*#__PURE__*/React.createElement(react.ButtonSet, _rollupPluginBabelHelpers.extends({}, rest, {
       ref: ref
-    }), buttons.map(function (_ref3) {
-      var label = _ref3.label,
-        key = _ref3.key,
-        kind = _ref3.kind,
-        id = _ref3.id,
-        other = _rollupPluginBabelHelpers.objectWithoutProperties(_ref3, _excluded2);
-      var kindFix = kind === 'default' ? 'primary' : kind;
+    }), buttons.map(_ref3 => {
+      let {
+        label,
+        key,
+        kind,
+        id,
+        ...other
+      } = _ref3;
+      const kindFix = kind === 'default' ? 'primary' : kind;
       return /*#__PURE__*/React.createElement(react.Button, _rollupPluginBabelHelpers.extends({}, other, {
-        key: key && "button-set-".concat(key),
+        key: key && `button-set-${key}`,
         size: buttonSize,
         type: "button",
         kind: kindFix,
-        id: id ? isHidden ? "".concat(id, "--hidden") : id : null
+        id: id ? isHidden ? `${id}--hidden` : id : null
       }), label);
     }));
   });
@@ -121,20 +111,24 @@ var ButtonSetWithOverflow = function ButtonSetWithOverflow(_ref) {
      */
     isHidden: index.default.bool
   };
-  var AButtonMenu = /*#__PURE__*/React.forwardRef(function (_ref4, ref) {
-    var buttons = _ref4.buttons,
-      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref4, _excluded3);
+  const AButtonMenu = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
+    let {
+      buttons,
+      ...rest
+    } = _ref4;
     return /*#__PURE__*/React.createElement(react.MenuButton, _rollupPluginBabelHelpers.extends({}, rest, {
       ref: ref,
       label: buttonSetOverflowLabel
-    }), buttons.map(function (_ref5) {
-      var key = _ref5.key,
-        kind = _ref5.kind,
-        other = _rollupPluginBabelHelpers.objectWithoutProperties(_ref5, _excluded4);
+    }), buttons.map(_ref5 => {
+      let {
+        key,
+        kind,
+        ...other
+      } = _ref5;
       // menu items only come in default and danger flavors
-      var kindFix = kind === 'danger' ? 'danger' : 'default';
+      const kindFix = kind === 'danger' ? 'danger' : 'default';
       return /*#__PURE__*/React.createElement(react.MenuItem, _rollupPluginBabelHelpers.extends({}, propsHelper.prepareProps(other, ['iconDescription', 'renderIcon']), {
-        key: key && "button-menu-".concat(key),
+        key: key && `button-menu-${key}`,
         kind: kindFix
       }));
     }).reverse());
@@ -143,10 +137,12 @@ var ButtonSetWithOverflow = function ButtonSetWithOverflow(_ref) {
   useResizeObserver.useResizeObserver(sizingContainerRefCombo, checkFullyVisibleItems);
   useResizeObserver.useResizeObserver(spaceAvailableRef, checkFullyVisibleItems);
   return /*#__PURE__*/React.createElement("div", {
-    className: cx([blockClass, className, _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "--right"), rightAlign)]),
+    className: cx([blockClass, className, {
+      [`${blockClass}--right`]: rightAlign
+    }]),
     ref: spaceAvailableRef
   }, /*#__PURE__*/React.createElement("div", {
-    className: "".concat(blockClass, "__button-container ").concat(blockClass, "__button-container--hidden")
+    className: `${blockClass}__button-container ${blockClass}__button-container--hidden`
   }, /*#__PURE__*/React.createElement(AButtonSet, {
     "aria-hidden": true,
     ref: sizingContainerRefSet,
@@ -154,7 +150,7 @@ var ButtonSetWithOverflow = function ButtonSetWithOverflow(_ref) {
     buttons: buttons,
     isHidden: true
   })), /*#__PURE__*/React.createElement("div", {
-    className: "".concat(blockClass, "__button-container ").concat(blockClass, "__button-container--hidden"),
+    className: `${blockClass}__button-container ${blockClass}__button-container--hidden`,
     "aria-hidden": true
   }, /*#__PURE__*/React.createElement(AButtonMenu, {
     className: menuOptionsClass,
@@ -162,13 +158,13 @@ var ButtonSetWithOverflow = function ButtonSetWithOverflow(_ref) {
     buttons: buttons,
     size: buttonSize
   })), /*#__PURE__*/React.createElement("div", {
-    className: "".concat(blockClass, "__button-container ").concat(blockClass, "__button-container--visible")
+    className: `${blockClass}__button-container ${blockClass}__button-container--visible`
   }, showAsOverflow ? /*#__PURE__*/React.createElement(AButtonMenu, {
     buttons: buttons,
     size: buttonSize,
     className: menuOptionsClass
   }) : /*#__PURE__*/React.createElement(AButtonSet, {
-    className: "".concat(blockClass, "__button-container"),
+    className: `${blockClass}__button-container`,
     size: buttonSize,
     buttons: buttons
   })));

package/lib/components/Card/Card.d.ts

@@ -1,25 +1,29 @@
 import React, { PropsWithChildren, ReactNode } from 'react';
-type ActionIcon = {
+interface Metadata {
     id?: string;
     icon?: () => ReactNode;
-    onKeydown?: () => void;
-    onClick?: () => void;
     iconDescription?: string;
-    href?: string;
+}
+type LinkType = {
+    href: string;
+} & {
+    [key: string]: unknown;
 };
+export interface ActionIcon extends Metadata {
+    onKeydown?: (event: KeyboardEvent) => void;
+    onClick?: (event: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
+    /**
+     * @deprecated please use the `link.href` instead
+     */
+    href?: string;
+    link?: LinkType;
+}
 type OverflowActions = {
     id?: string;
     itemText?: string;
     onClick?: () => void;
     onKeydown?: () => void;
 };
-type Metadata = {
-    id?: string;
-    icon?: () => ReactNode;
-    iconDescription?: string;
-    onClick?: () => void;
-    href?: string;
-};
 interface CardProp extends PropsWithChildren {
     actionIcons?: readonly ActionIcon[];
     actionsPlacement?: 'top' | 'bottom';