@carbon/ibm-products 2.81.0-rc.0 → 2.82.0-rc.0

package/es/components/BigNumber/constants.js

@@ -0,0 +1,44 @@
+/**
+ * Copyright IBM Corp. 2020, 2026
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+let BigNumberSize = /*#__PURE__*/function (BigNumberSize) {
+  BigNumberSize["Default"] = "default";
+  BigNumberSize["Large"] = "lg";
+  BigNumberSize["XLarge"] = "xl";
+  return BigNumberSize;
+}({});
+
+// = 'default' | 'lg' | 'xl'
+
+let Characters = /*#__PURE__*/function (Characters) {
+  Characters["Dash"] = "\u2013";
+  Characters["Slash"] = "/";
+  return Characters;
+}({});
+const DefaultLocale = 'en-US';
+const formatValue = (locale, value, fractionDigits, truncate) => {
+  if (value === null || value === undefined || typeof value !== 'number') {
+    return null;
+  }
+  return truncate ? Intl.NumberFormat(locale, {
+    notation: 'compact',
+    minimumFractionDigits: fractionDigits,
+    maximumFractionDigits: Math.round(fractionDigits)
+  }).format(value) : Intl.NumberFormat(locale).format(value);
+};
+const getIconSize = size => {
+  switch (size) {
+    case 'lg':
+      return 20;
+    case 'xl':
+      return 24;
+    default:
+      return 16;
+  }
+};
+
+export { BigNumberSize, Characters, DefaultLocale, formatValue, getIconSize };

package/es/components/BigNumber/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Copyright IBM Corp. 2024, 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+export { BigNumber } from './BigNumber';
+export type { BigNumberProps } from './BigNumber';

package/es/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.d.ts

@@ -0,0 +1,25 @@
+export function BreadcrumbWithOverflow({ breadcrumbs, className, label, maxVisible, noTrailingSlash, overflowAriaLabel, overflowTooltipAlign, ...other }: {
+    [x: string]: any;
+    breadcrumbs: any;
+    className: any;
+    label: any;
+    maxVisible: any;
+    noTrailingSlash: any;
+    overflowAriaLabel: any;
+    overflowTooltipAlign: any;
+}): React.JSX.Element;
+export namespace BreadcrumbWithOverflow {
+    export namespace propTypes {
+        let breadcrumbs: any;
+        let className: any;
+        let label: any;
+        let maxVisible: any;
+        let noTrailingSlash: any;
+        let overflowAriaLabel: any;
+        let overflowTooltipAlign: any;
+    }
+    export { componentName as displayName };
+}
+import React from 'react';
+declare const componentName: "BreadcrumbWithOverflow";
+export {};

package/es/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js

@@ -0,0 +1,332 @@
+/**
+ * Copyright IBM Corp. 2020, 2026
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default, { useState, useRef, useEffect } from 'react';
+import PropTypes from '../../_virtual/index.js';
+import cx from 'classnames';
+import { useResizeObserver } from '../../global/js/hooks/useResizeObserver.js';
+import { usePrefix, Breadcrumb, BreadcrumbItem, OverflowMenu, Link, Tooltip, unstable_FeatureFlags, MenuItem } from '@carbon/react';
+import { pkg } from '../../settings.js';
+import { OverflowMenuHorizontal, ArrowLeft } from '@carbon/react/icons';
+import uuidv4 from '../../global/js/utils/uuidv4.js';
+import '../../global/js/utils/props-helper.js';
+import { TooltipTrigger } from '../TooltipTrigger/TooltipTrigger.js';
+
+var _TooltipTrigger;
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+const blockClass = `${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.
+ */
+let BreadcrumbWithOverflow = _ref => {
+  let {
+    breadcrumbs,
+    className,
+    label,
+    maxVisible,
+    noTrailingSlash,
+    overflowAriaLabel,
+    overflowTooltipAlign,
+    ...other
+  } = _ref;
+  const carbonPrefix = usePrefix();
+  const [displayCount, setDisplayCount] = useState(3);
+  const [displayedBreadcrumbItems, setDisplayedBreadcrumbItems] = useState([]);
+  const breadcrumbItemWithOverflow = useRef(null);
+  const sizingContainerRef = useRef(null);
+  const internalId = useRef(uuidv4());
+  const [hiddenSizingItems, setHiddenSizingItems] = useState([]);
+
+  // eslint-disable-next-line react/prop-types
+  const BreadcrumbOverflowMenu = _ref2 => {
+    let {
+      overflowItems
+    } = _ref2;
+    const handleClick = (evt, item) => {
+      if (item?.props?.href) {
+        window.location.href = item.props.href;
+      }
+      item?.props?.onClick?.(evt);
+    };
+    return /*#__PURE__*/React__default.createElement(BreadcrumbItem, {
+      key: `breadcrumb-overflow-${internalId.current}`
+    }, /*#__PURE__*/React__default.createElement(unstable_FeatureFlags, {
+      enableV12Overflowmenu: true
+    }, /*#__PURE__*/React__default.createElement(OverflowMenu, {
+      role: "navigation",
+      "aria-label": overflowAriaLabel,
+      label: overflowAriaLabel // also needs setting to avoid a11y "Accessible name does not match or contain the visible label text"
+      ,
+      renderIcon: props => /*#__PURE__*/React__default.createElement(OverflowMenuHorizontal, _extends({
+        size: 32
+      }, props)),
+      className: `${blockClass}__overflow-menu`,
+      tooltipAlignment: overflowTooltipAlign
+    },
+    // eslint-disable-next-line react/prop-types
+    overflowItems.map((item, index) => /*#__PURE__*/React__default.createElement(MenuItem, {
+      key: `breadcrumb-overflow-menu-item-${internalId.current}-${index}`,
+      onClick: evt => handleClick(evt, item),
+      label: item.props.children
+    })))));
+  };
+
+  // create hidden sizing items
+  useEffect(() => {
+    // Hidden action bar and items used to calculate sizes
+    setHiddenSizingItems(/*#__PURE__*/React__default.createElement("div", {
+      className: `${blockClass}__breadcrumb-container ${blockClass}__breadcrumb-container--hidden`,
+      "aria-hidden": true,
+      ref: sizingContainerRef
+    }, /*#__PURE__*/React__default.createElement(Breadcrumb, {
+      "aria-label": `${label}-hidden`
+    }, /*#__PURE__*/React__default.createElement(BreadcrumbItem, {
+      key: `${blockClass}-hidden-overflow-${internalId}`
+    }, /*#__PURE__*/React__default.createElement(OverflowMenu, {
+      role: "navigation",
+      "aria-label": overflowAriaLabel,
+      renderIcon: props => /*#__PURE__*/React__default.createElement(OverflowMenuHorizontal, _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__default.createElement(BreadcrumbItem, _extends({
+        key: key
+      }, rest, {
+        // ensure id is not duplicated
+        "data-original-id": id,
+        title: title ?? label
+      }), label);
+    }))));
+  }, [breadcrumbs, label, overflowAriaLabel]);
+  useEffect(() => {
+    // updates displayedBreadcrumbItems and overflowBreadcrumbItems based on displayCount and breadcrumbs
+    /* istanbul ignore if */
+    if (breadcrumbs.length === 0) {
+      setDisplayedBreadcrumbItems([]);
+      return;
+    }
+    const newDisplayedBreadcrumbItems = breadcrumbs.map((_ref4, index) => {
+      let {
+        className,
+        key,
+        label,
+        shortTitle,
+        title,
+        ...rest
+      } = _ref4;
+      return /*#__PURE__*/React__default.createElement(BreadcrumbItem, _extends({
+        key: key,
+        className: index > 0 || displayCount > 1 ? cx([className, `${blockClass}__displayed-breadcrumb`]) : className,
+        title: index + 1 === breadcrumbs.length ? title : null
+      }, rest), shortTitle || label);
+    });
+
+    // The breadcrumb has the form [first item] [overflow] [items 2...(n-1)] [last item].
+    // The overflow is only shown if there isn't space to display all the items, and in that case:
+    //  * the last item is always displayed (even if there isn't really space for it -- it can contract to an ellipsis);
+    //  * 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.
+    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__default.createElement(BreadcrumbOverflowMenu, {
+        overflowItems: newOverflowBreadcrumbItems,
+        key: `displayed-breadcrumb-${internalId}-overflow`
+      }));
+    }
+    setDisplayedBreadcrumbItems(newDisplayedBreadcrumbItems);
+  }, [breadcrumbs, displayCount]);
+  const checkFullyVisibleBreadcrumbItems = () => {
+    if (!breadcrumbItemWithOverflow.current) {
+      return;
+    }
+    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;
+
+      if (index === 0) {
+        return itemCount - 1; // the last item in the list
+      } else if (index === 1) {
+        return 1; // the first item in the list
+      } else {
+        return itemCount - index; // count down from itemCount - 2 to 1
+      }
+    };
+    if (maxVisible <= 1) {
+      setDisplayCount(1);
+    } else {
+      // how many will fit?
+      let willFit = 0;
+      let spaceAvailable = breadcrumbItemWithOverflow.current.offsetWidth; // not sure how to test resize
+
+      /* istanbul ignore next */
+      if (sizingContainerRef.current) {
+        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);
+        }
+        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
+          const index = displayItemIndex(breadcrumbWidthsIncludingMargin.length, i);
+          if (spaceAvailable >= breadcrumbWidthsIncludingMargin[index]) {
+            spaceAvailable -= breadcrumbWidthsIncludingMargin[index];
+            willFit += 1;
+          } else {
+            break;
+          }
+        }
+
+        // if not enough space for all breadcrumb items
+        if (willFit < breadcrumbWidthsIncludingMargin.length - 1) {
+          // -1 for overflow item
+
+          while (willFit > 0 && spaceAvailable < overflowWidth) {
+            willFit -= 1;
+
+            // 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
+            const itemToRemove = displayItemIndex(breadcrumbWidthsIncludingMargin.length, willFit);
+            spaceAvailable += breadcrumbWidthsIncludingMargin[itemToRemove];
+          }
+        }
+      }
+      if (willFit <= 1) {
+        setDisplayCount(1);
+      } else {
+        setDisplayCount(maxVisible ? Math.min(willFit, maxVisible) : willFit);
+      }
+    }
+  };
+  useEffect(() => {
+    checkFullyVisibleBreadcrumbItems();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [hiddenSizingItems, maxVisible]);
+
+  /* istanbul ignore next */ // not sure how to test resize
+  const handleResize = () => {
+    /* istanbul ignore next */ // not sure how to test resize
+    checkFullyVisibleBreadcrumbItems();
+  };
+  let backItem = breadcrumbs[breadcrumbs.length - 1];
+  /* istanbul ignore if */ // not sure how to test media queries
+  if (backItem.isCurrentPage) {
+    backItem = breadcrumbs[breadcrumbs.length - 2];
+  }
+
+  // container resize
+  useResizeObserver(sizingContainerRef, handleResize);
+  // item resize
+  useResizeObserver(breadcrumbItemWithOverflow, handleResize);
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: cx(blockClass, className, {
+      [`${blockClass}__with-items`]: displayedBreadcrumbItems.length > 1
+    }),
+    ref: breadcrumbItemWithOverflow
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: cx([`${blockClass}__space`])
+  }, hiddenSizingItems, /*#__PURE__*/React__default.createElement(Breadcrumb, _extends({
+    "aria-label": label,
+    className: cx(`${blockClass}__breadcrumb-container`, {
+      [`${blockClass}__breadcrumb-container-with-items`]: displayedBreadcrumbItems.length > 1
+    }),
+    noTrailingSlash: noTrailingSlash
+  }, other), backItem?.href && (backItem?.label || backItem?.title) && /*#__PURE__*/React__default.createElement(BreadcrumbItem, {
+    className: cx(`${blockClass}__breadcrumb-back`)
+  }, /*#__PURE__*/React__default.createElement(Link, {
+    href: backItem.href,
+    renderIcon: () => /*#__PURE__*/React__default.createElement(Tooltip, {
+      align: "right",
+      label: backItem.title || backItem.label,
+      className: `${blockClass}__back__button ${carbonPrefix}--icon-tooltip`
+    }, _TooltipTrigger || (_TooltipTrigger = /*#__PURE__*/React__default.createElement(TooltipTrigger, null, /*#__PURE__*/React__default.createElement(ArrowLeft, {
+      size: 16
+    }))))
+  })), displayedBreadcrumbItems)));
+};
+
+// Return a placeholder if not released and not enabled by feature flag
+BreadcrumbWithOverflow = pkg.checkComponentEnabled(BreadcrumbWithOverflow, componentName);
+BreadcrumbWithOverflow.propTypes = {
+  breadcrumbs: PropTypes.arrayOf(PropTypes.shape({
+    /**
+     * Optional string representing the link location for the BreadcrumbItem
+     */
+    href: PropTypes.string,
+    /**
+     * Provide if this breadcrumb item represents the current page
+     */
+    isCurrentPage: PropTypes.bool,
+    /**
+     * Key required to render array efficiently
+     */
+    key: PropTypes.string.isRequired,
+    /**
+     * Pass in content that will be inside of the BreadcrumbItem
+     */
+    label: PropTypes.node,
+    /**
+     * An optional title label for extra long breadcrumb
+     */
+    shortTitle: PropTypes.string,
+    /**
+     * A string based alternative to the children, required only if children is not of type string
+     */
+    title: PropTypes.string
+  })),
+  /**
+   * className
+   */
+  className: PropTypes.string,
+  /**
+   * Label for the Breadcrumb component
+   */
+  label: PropTypes.string,
+  /**
+   * maxVisible: maximum visible breadcrumb-items before overflow is used (values less than 1 are treated as 1)
+   */
+  maxVisible: PropTypes.number,
+  /**
+   * noTrailing slash - same as for Carbon
+   */
+  noTrailingSlash: PropTypes.bool,
+  /**
+   * overflowAriaLabel label for open close button overflow used for breadcrumb items that do not fit.
+   */
+  overflowAriaLabel: PropTypes.string,
+  /**
+   * overflowTooltipAlign: align tooltip position
+   */
+  overflowTooltipAlign: Tooltip.propTypes.align
+};
+BreadcrumbWithOverflow.displayName = componentName;
+
+export { BreadcrumbWithOverflow };

package/es/components/BreadcrumbWithOverflow/index.d.ts

@@ -0,0 +1 @@
+export { BreadcrumbWithOverflow } from "./BreadcrumbWithOverflow";

package/es/components/ButtonSetWithOverflow/ButtonSetWithOverflow.d.ts

@@ -0,0 +1,22 @@
+export function ButtonSetWithOverflow({ buttons, className, onWidthChange, buttonSetOverflowLabel, menuOptionsClass, rightAlign, }: {
+    buttons: any;
+    className: any;
+    onWidthChange: any;
+    buttonSetOverflowLabel: any;
+    menuOptionsClass: any;
+    rightAlign: any;
+}): React.JSX.Element;
+export namespace ButtonSetWithOverflow {
+    export namespace propTypes {
+        let buttonSetOverflowLabel: any;
+        let buttons: any;
+        let className: any;
+        let menuOptionsClass: any;
+        let onWidthChange: any;
+        let rightAlign: any;
+    }
+    export { componentName as displayName };
+}
+import React from 'react';
+declare const componentName: "ButtonSetWithOverflow";
+export {};

package/es/components/ButtonSetWithOverflow/ButtonSetWithOverflow.js

@@ -0,0 +1,201 @@
+/**
+ * Copyright IBM Corp. 2020, 2026
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default, { useState, useRef, useEffect } from 'react';
+import PropTypes from '../../_virtual/index.js';
+import cx from 'classnames';
+import { useResizeObserver } from '../../global/js/hooks/useResizeObserver.js';
+import { usePrefix, ButtonSet, Button, MenuButton, MenuItem } from '@carbon/react';
+import { pkg } from '../../settings.js';
+import { prepareProps } from '../../global/js/utils/props-helper.js';
+
+const blockClass = `${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 = usePrefix();
+  const [showAsOverflow, setShowAsOverflow] = useState(false);
+  const spaceAvailableRef = useRef(null);
+  const sizingContainerRefSet = useRef(null);
+  const sizingContainerRefCombo = useRef(null);
+  const sizes = useRef({});
+
+  /**
+   * checkFullyVisibleItems determines display count based on space available and width of pageActions
+   *
+   * ButtonSetWithOverflow switches between a Carbon ButtonSet and use of the ButtonMenu component depending
+   * on the space available. While there is sufficient space to show all of the buttons side by side the
+   * ButtonSet is used, once this is no longer the case it switches to a ButtonMenu.
+   *
+   */
+  const checkFullyVisibleItems = () => {
+    const spaceAvailable = spaceAvailableRef.current?.offsetWidth;
+    let newShowAsOverflow = true;
+
+    // get all of the hidden sizing buttons
+    const sizingSet = sizingContainerRefSet.current?.querySelectorAll(`.${carbonPrefix}--btn`);
+
+    // calculate total width of button set
+    let sizingSetTotalSize = 0;
+    for (let item of sizingSet) {
+      sizingSetTotalSize += item.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({
+        ...sizes.current
+      });
+    }
+
+    // only if space available use ButtonSet.
+    if (sizingSetTotalSize <= spaceAvailable) {
+      newShowAsOverflow = false;
+    }
+    setShowAsOverflow(newShowAsOverflow);
+  };
+  useEffect(() => {
+    checkFullyVisibleItems();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [buttons]);
+  const AButtonSet = /*#__PURE__*/React__default.forwardRef((_ref2, ref) => {
+    let {
+      isHidden = false,
+      buttons,
+      ...rest
+    } = _ref2;
+    return /*#__PURE__*/React__default.createElement(ButtonSet, _extends({}, rest, {
+      ref: ref
+    }), buttons.map(_ref3 => {
+      let {
+        label,
+        key,
+        kind,
+        id,
+        ...other
+      } = _ref3;
+      const kindFix = kind === 'default' ? 'primary' : kind;
+      return /*#__PURE__*/React__default.createElement(Button, _extends({}, other, {
+        key: key && `button-set-${key}`,
+        size: buttonSize,
+        type: "button",
+        kind: kindFix,
+        id: id ? isHidden ? `${id}--hidden` : id : null
+      }), label);
+    }));
+  });
+  AButtonSet.propTypes = {
+    /**
+     *  isHidden - Used to conditionally change id if one is passed to the `AButtonSet` component
+     *  in order to avoid duplicate ids between the visible and hidden button set buttons
+     */
+    isHidden: PropTypes.bool
+  };
+  const AButtonMenu = /*#__PURE__*/React__default.forwardRef((_ref4, ref) => {
+    let {
+      buttons,
+      ...rest
+    } = _ref4;
+    return /*#__PURE__*/React__default.createElement(MenuButton, _extends({}, rest, {
+      ref: ref,
+      label: buttonSetOverflowLabel
+    }), buttons.map(_ref5 => {
+      let {
+        key,
+        kind,
+        ...other
+      } = _ref5;
+      // menu items only come in default and danger flavors
+      const kindFix = kind === 'danger' ? 'danger' : 'default';
+      return /*#__PURE__*/React__default.createElement(MenuItem, _extends({}, prepareProps(other, ['iconDescription', 'renderIcon']), {
+        key: key && `button-menu-${key}`,
+        kind: kindFix
+      }));
+    }).reverse());
+  });
+  useResizeObserver(sizingContainerRefSet, checkFullyVisibleItems);
+  useResizeObserver(sizingContainerRefCombo, checkFullyVisibleItems);
+  useResizeObserver(spaceAvailableRef, checkFullyVisibleItems);
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: cx([blockClass, className, {
+      [`${blockClass}--right`]: rightAlign
+    }]),
+    ref: spaceAvailableRef
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: `${blockClass}__button-container ${blockClass}__button-container--hidden`
+  }, /*#__PURE__*/React__default.createElement(AButtonSet, {
+    "aria-hidden": true,
+    ref: sizingContainerRefSet,
+    size: buttonSize,
+    buttons: buttons,
+    isHidden: true
+  })), /*#__PURE__*/React__default.createElement("div", {
+    className: `${blockClass}__button-container ${blockClass}__button-container--hidden`,
+    "aria-hidden": true
+  }, /*#__PURE__*/React__default.createElement(AButtonMenu, {
+    className: menuOptionsClass,
+    ref: sizingContainerRefCombo,
+    buttons: buttons,
+    size: buttonSize
+  })), /*#__PURE__*/React__default.createElement("div", {
+    className: `${blockClass}__button-container ${blockClass}__button-container--visible`
+  }, showAsOverflow ? /*#__PURE__*/React__default.createElement(AButtonMenu, {
+    buttons: buttons,
+    size: buttonSize,
+    className: menuOptionsClass
+  }) : /*#__PURE__*/React__default.createElement(AButtonSet, {
+    className: `${blockClass}__button-container`,
+    size: buttonSize,
+    buttons: buttons
+  })));
+};
+ButtonSetWithOverflow.propTypes = {
+  /**
+   *  buttonSetOverflowLabel - used when button set is shown as combo button
+   */
+  buttonSetOverflowLabel: PropTypes.node.isRequired,
+  /**
+   * Specifies the buttons for the ButtonSetWithOverflow. Each item is specified as an object
+   * with the properties of a Carbon Button plus a label.
+   *
+   * Carbon Button API https://react.carbondesignsystem.com/?path=/docs/components-button--default#component-api
+   */
+  buttons: PropTypes.array.isRequired,
+  /**
+   * className
+   */
+  className: PropTypes.string,
+  /**
+   * class name applied to the overflow options
+   */
+  menuOptionsClass: PropTypes.string,
+  /**
+   * onResize reports maxSize on resize
+   */
+  onWidthChange: PropTypes.func,
+  /**
+   * align buttons to right of available space
+   */
+  rightAlign: PropTypes.bool
+};
+ButtonSetWithOverflow.displayName = componentName;
+
+export { ButtonSetWithOverflow };

package/es/components/ButtonSetWithOverflow/index.d.ts

@@ -0,0 +1 @@
+export { ButtonSetWithOverflow } from "./ButtonSetWithOverflow";