@carbon/ibm-products/lib/components/ActionBar/ActionBarItem.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 _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
var React = require('react');
var index = require('../../_virtual/index.js');
var cx = require('classnames');
var settings = require('../../settings.js');
var react = require('@carbon/react');

// The block part of our conventional BEM class names (blockClass__E--M).
const componentName = 'ActionBarItem';
const blockClass = `${settings.pkg.prefix}--action-bar-item`;
// NOTE: the component SCSS is not imported here: it is rolled up separately.

/**
 * The ActionBarItem is used in the page header to populate the action bar
 */
exports.ActionBarItem = /*#__PURE__*/React.forwardRef((_ref, ref) => {
  let {
    label,
    className,
    renderIcon,
    ...rest
  } = _ref;
  const Icon = renderIcon;
  return /*#__PURE__*/React.createElement(react.IconButton, _rollupPluginBabelHelpers.extends({}, rest, {
    ref,
    className: cx(blockClass, className),
    kind: 'ghost',
    size: 'md',
    align: 'bottom-end',
    type: 'button',
    label
  }), Icon ? /*#__PURE__*/React.createElement(Icon, null) : null);
});

// Return a placeholder if not released and not enabled by feature flag
exports.ActionBarItem = settings.pkg.checkComponentEnabled(exports.ActionBarItem, componentName);

// Props the user cannot change
const reservedProps = ['kind', 'size', 'align', 'type'];
// Base props on Carbon Button
const propTypes = {
  ...react.IconButton.propTypes
};

// Remove reserved props
reservedProps.forEach(prop => {
  delete propTypes[prop];
});
exports.ActionBarItem.displayName = componentName;
exports.ActionBarItem.propTypes = {
  /**
   * The ...propTypes are copies of those from Button minus the props reserved for use by this component
   */
  ...propTypes,
  /* ***************************************
  /
  /  The declarations below allow storybook & DocGen to produce documentation.
  /  Some or all of them may be inherited from the underlying Carbon component.
  /
  / ****************************************/
  /**
   * Specify an optional className to be added to your Button
   *
   * (inherited from Carbon Button)
   */
  className: index.default.string,
  /**
   * If specifying the `renderIcon` prop, provide a description for that icon that can
   * be read by screen readers
   *
   * (inherited from Carbon Button)
   */
  label: index.default.string,
  /**
   * Optional click handler
   *
   * (inherited from Carbon Button)
   */
  onClick: index.default.func,
  /**
   * Optional prop to allow overriding the icon rendering.
   * Can be a React component class
   *
   * (inherited from Carbon Button)
   */
  /**@ts-ignore */
  renderIcon: index.default.oneOfType([index.default.func, index.default.object]),
  /**
   * Optional tab index
   */
  tabIndex: index.default.number
};