@carbon/ibm-products
Version:
Carbon for IBM Products
132 lines (130 loc) • 5.5 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.
*/
const require_runtime = require("../../_virtual/_rolldown/runtime.js");
const require_index = require("../../node_modules/classnames/index.js");
const require_settings = require("../../settings.js");
const require_props_helper = require("../../global/js/utils/props-helper.js");
const require_uuidv4 = require("../../global/js/utils/uuidv4.js");
const require_ActionBarItem = require("./ActionBarItem.js");
const require_ActionBarOverflowItems = require("./ActionBarOverflowItems.js");
const require_useOverflowItems = require("../../global/js/hooks/useOverflowItems/useOverflowItems.js");
let react = require("react");
react = require_runtime.__toESM(react);
let prop_types = require("prop-types");
prop_types = require_runtime.__toESM(prop_types);
let _carbon_react = require("@carbon/react");
//#region src/components/ActionBar/ActionBar.tsx
var import_classnames = /* @__PURE__ */ require_runtime.__toESM(require_index.default);
const blockClass = `${require_settings.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.default.forwardRef(({ actions = defaults.actions, className, maxVisible, menuOptionsClass, onWidthChange, overflowAriaLabel, overflowMenuRef, rightAlign, ...rest }, ref) => {
const internalId = (0, react.useRef)(require_uuidv4.default());
const refDisplayedItems = (0, react.useRef)(null);
const backupRef = (0, react.useRef)(null);
const localRef = ref || backupRef;
const _offsetRef = (0, react.useRef)(null);
const offsetRef = overflowMenuRef || _offsetRef;
const { visibleItems, hiddenItems, itemRefHandler, offsetRefHandler } = require_useOverflowItems.useOverflowItems(actions.map((action) => ({
id: action?.key,
...action
})), localRef, offsetRef, maxVisible, onWidthChange);
const overflowMenuItems = hiddenItems?.map(({ id: key, ...rest }) => /* @__PURE__ */ react.default.createElement(require_ActionBarItem.ActionBarItem, {
...rest,
key
}));
return /* @__PURE__ */ react.default.createElement("div", {
...rest,
className: (0, import_classnames.default)([blockClass, className]),
ref: localRef
}, /* @__PURE__ */ react.default.createElement("div", {
ref: refDisplayedItems,
className: (0, import_classnames.default)([`${blockClass}__displayed-items`, { [`${blockClass}__displayed-items--right`]: rightAlign }])
}, visibleItems.map(({ key, id, ...rest }) => /* @__PURE__ */ react.default.createElement(require_ActionBarItem.ActionBarItem, {
id,
...rest,
key,
ref: (node) => {
itemRefHandler(id, node);
}
})), overflowMenuItems?.length > 0 && /* @__PURE__ */ react.default.createElement(require_ActionBarOverflowItems.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: prop_types.default.arrayOf(prop_types.default.shape({
/**@ts-ignore */
...require_props_helper.prepareProps(_carbon_react.Button.propTypes, [
"kind",
"size",
"tooltipPosition",
"tooltipAlignment"
]),
id: prop_types.default.string,
key: prop_types.default.string.isRequired,
iconDescription: prop_types.default.string.isRequired,
label: prop_types.default.string.isRequired,
/**@ts-ignore */
renderIcon: _carbon_react.Button.propTypes.renderIcon.isRequired,
onClick: prop_types.default.func
})),
/**
* className
*/
className: prop_types.default.string,
/**
* maxVisible : Maximum action bar items visible before going into the overflow menu
*/
maxVisible: prop_types.default.number,
/**
* class name applied to the overflow options
*/
menuOptionsClass: prop_types.default.string,
/**
* onItemCountChange - event reporting maxWidth
*/
onWidthChange: prop_types.default.func,
/**
* overflowAriaLabel label for open close button overflow used for action bar items that do nto fit.
*/
overflowAriaLabel: prop_types.default.string.isRequired,
/**
* overflowMenuRef for the overflow menu width that is needed to calculate the width of the action bar with overflow
*/
/**@ts-ignore */
overflowMenuRef: prop_types.default.oneOfType([prop_types.default.shape({ current: prop_types.default.elementType }), prop_types.default.object]),
/**
* align tags to right of available space
*/
rightAlign: prop_types.default.bool
};
//#endregion
exports.ActionBar = ActionBar;