@carbon/ibm-products
Version:
Carbon for IBM Products
130 lines (128 loc) • 4.89 kB
JavaScript
/**
* 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 { __toESM } from "../../_virtual/_rolldown/runtime.js";
import { require_classnames } from "../../node_modules/classnames/index.js";
import { pkg } from "../../settings.js";
import { prepareProps } from "../../global/js/utils/props-helper.js";
import uuidv4 from "../../global/js/utils/uuidv4.js";
import { ActionBarItem } from "./ActionBarItem.js";
import { ActionBarOverflowItems } from "./ActionBarOverflowItems.js";
import { useOverflowItems } from "../../global/js/hooks/useOverflowItems/useOverflowItems.js";
import React, { useRef } from "react";
import PropTypes from "prop-types";
import { Button } from "@carbon/react";
//#region src/components/ActionBar/ActionBar.tsx
var import_classnames = /* @__PURE__ */ __toESM(require_classnames());
const blockClass = `${pkg.prefix}--action-bar`;
const componentName = "ActionBar";
const defaults = { actions: Object.freeze([]) };
/**
* The ActionBar is used internally by the PageHeader to wrap ActionBarItems.
*/
const ActionBar = React.forwardRef(({ actions = defaults.actions, className, maxVisible, menuOptionsClass, onWidthChange, overflowAriaLabel, overflowMenuRef, rightAlign, ...rest }, ref) => {
const internalId = useRef(uuidv4());
const refDisplayedItems = useRef(null);
const backupRef = useRef(null);
const localRef = ref || backupRef;
const _offsetRef = useRef(null);
const offsetRef = overflowMenuRef || _offsetRef;
const { visibleItems, hiddenItems, itemRefHandler, offsetRefHandler } = useOverflowItems(actions.map((action) => ({
id: action?.key,
...action
})), localRef, offsetRef, maxVisible, onWidthChange);
const overflowMenuItems = hiddenItems?.map(({ id: key, ...rest }) => /* @__PURE__ */ React.createElement(ActionBarItem, {
...rest,
key
}));
return /* @__PURE__ */ React.createElement("div", {
...rest,
className: (0, import_classnames.default)([blockClass, className]),
ref: localRef
}, /* @__PURE__ */ React.createElement("div", {
ref: refDisplayedItems,
className: (0, import_classnames.default)([`${blockClass}__displayed-items`, { [`${blockClass}__displayed-items--right`]: rightAlign }])
}, visibleItems.map(({ key, id, ...rest }) => /* @__PURE__ */ React.createElement(ActionBarItem, {
id,
...rest,
key,
ref: (node) => {
itemRefHandler(id, node);
}
})), overflowMenuItems?.length > 0 && /* @__PURE__ */ React.createElement(ActionBarOverflowItems, {
menuOptionsClass,
overflowAriaLabel,
overflowMenuRef: (node) => offsetRef.current = offsetRefHandler(node),
overflowItems: overflowMenuItems,
key: `overflow-menu-${internalId.current}`
})));
});
ActionBar.displayName = componentName;
ActionBar.propTypes = {
/**
* Specifies the action bar items. Each item is specified as an object
* with required fields: key for array rendering, renderIcon, iconDescription and
* label to provide the icon to display,
* and optional 'onClick' to receive notifications when the button is clicked.
* Additional fields in the object will be passed to the
* Button component, and these can include 'disabled', 'ref', 'className',
* and any other Button props.
*
* Note that the Button props 'kind', 'size',
* 'tooltipPosition', 'tooltipAlignment' and 'type' are ignored, as these
* cannot be used for an action bar item.
*
* Carbon Button API https://react.carbondesignsystem.com/?path=/docs/components-button--default#component-api
*/
/**@ts-ignore */
actions: PropTypes.arrayOf(PropTypes.shape({
/**@ts-ignore */
...prepareProps(Button.propTypes, [
"kind",
"size",
"tooltipPosition",
"tooltipAlignment"
]),
id: PropTypes.string,
key: PropTypes.string.isRequired,
iconDescription: PropTypes.string.isRequired,
label: PropTypes.string.isRequired,
/**@ts-ignore */
renderIcon: Button.propTypes.renderIcon.isRequired,
onClick: PropTypes.func
})),
/**
* className
*/
className: PropTypes.string,
/**
* maxVisible : Maximum action bar items visible before going into the overflow menu
*/
maxVisible: PropTypes.number,
/**
* class name applied to the overflow options
*/
menuOptionsClass: PropTypes.string,
/**
* onItemCountChange - event reporting maxWidth
*/
onWidthChange: PropTypes.func,
/**
* overflowAriaLabel label for open close button overflow used for action bar items that do nto fit.
*/
overflowAriaLabel: PropTypes.string.isRequired,
/**
* overflowMenuRef for the overflow menu width that is needed to calculate the width of the action bar with overflow
*/
/**@ts-ignore */
overflowMenuRef: PropTypes.oneOfType([PropTypes.shape({ current: PropTypes.elementType }), PropTypes.object]),
/**
* align tags to right of available space
*/
rightAlign: PropTypes.bool
};
//#endregion
export { ActionBar };