@carbon/ibm-products/lib/components/ActionBar/ActionBarOverflowItems.js

Carbon for IBM Products

/**
 * Copyright IBM Corp. 2020, 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.
 */

'use strict';

var React = require('react');
var index = require('../../_virtual/index.js');
var cx = require('classnames');
var react = require('@carbon/react');
var uuidv4 = require('../../global/js/utils/uuidv4.js');
var settings = require('../../settings.js');

// Copyright IBM Corp. 2020, 2023
//
// This source code is licensed under the Apache-2.0 license found in the
// LICENSE file in the root directory of this source tree.
//

const blockClass = `${settings.pkg.prefix}--action-bar-overflow-items`;
const componentName = 'ActionBar';
const ActionBarOverflowItems = _ref => {
  let {
    className,
    menuOptionsClass,
    overflowItems,
    overflowAriaLabel,
    overflowMenuRef
  } = _ref;
  const internalId = React.useRef(uuidv4.default());
  return /*#__PURE__*/React.createElement("div", {
    ref: overflowMenuRef
  }, /*#__PURE__*/React.createElement(react.OverflowMenu, {
    "aria-label": overflowAriaLabel,
    className: cx(blockClass, className),
    direction: "bottom",
    flipped: true,
    iconDescription: overflowAriaLabel // also needs setting to avoid a11y "Accessible name does not match or contain the visible label text"
    ,
    menuOptionsClass: cx(`${blockClass}__options`, menuOptionsClass)
  }, React.Children.map(overflowItems, (item, index) => {
    // This uses a copy of a menu item option
    // NOTE: Cannot use a real Tooltip icon below as it uses a <button /> the
    // div equivalent below is based on Carbon 10.25.0
    const ItemIcon = item?.props.renderIcon;
    return /*#__PURE__*/React.createElement(react.OverflowMenuItem, {
      className: `${blockClass}__item`,
      onClick: item?.props.onClick,
      itemText: /*#__PURE__*/React.createElement("div", {
        className: `${blockClass}__item-content`,
        "aria-describedby": `${internalId.current}-${index}--item-label`
      }, /*#__PURE__*/React.createElement("span", {
        className: `${blockClass}__item-label`,
        id: `${internalId.current}-${index}--item-label`
      }, item?.props.label), typeof item?.props.renderIcon === 'function' ? /*#__PURE__*/React.createElement(ItemIcon, null) : item?.props.renderIcon)
    });
  })));
};
ActionBarOverflowItems.displayName = componentName;
ActionBarOverflowItems.propTypes = {
  // expects action bar item as array or in fragment,
  /**
   * className
   */
  className: index.default.string,
  /**
   * class name applied to the overflow options
   */
  menuOptionsClass: index.default.string,
  /**
   * overflowAriaLabel label for open close button overflow used for action bar items that do nto fit.
   */
  overflowAriaLabel: index.default.string,
  /**
   * overflowItems: items to bre shown in the ActionBar overflow menu
   */
  overflowItems: index.default.arrayOf(index.default.element),
  /**
   * overflowMenuRef for the overflow menu width that is needed to calculate the width of the action bar with overflow
   */
  /**@ts-ignore */
  overflowMenuRef: index.default.oneOfType([index.default.shape({
    current: index.default.elementType
  }), index.default.object, index.default.func]),
  /**
   * Optional tab index
   */
  tabIndex: index.default.number
};

exports.ActionBarOverflowItems = ActionBarOverflowItems;