@carbon/ibm-products
Version:
Carbon for IBM Products
129 lines (127 loc) • 5.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.
*/
const require_runtime = require("../../../_virtual/_rolldown/runtime.js");
const require_index = require("../../../node_modules/classnames/index.js");
const require_context = require("./context.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");
let _carbon_react_icons = require("@carbon/react/icons");
//#region src/components/AddSelect/next/AddSelectRow.tsx
/**
* Copyright IBM Corp. 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.
*/
var import_classnames = /* @__PURE__ */ require_runtime.__toESM(require_index.default);
const AddSelectRow = (0, react.forwardRef)(({ itemId, title, subtitle, value, selected = false, indeterminate = false, disabled = false, hasChildren = false, parentId = "", icon, children, rowContent, hasItemPanel = false, onItemPanelClick, itemPanelIconDescription = "View details", itemPanelOpen = false, className, checkboxProps, radioButtonProps, itemPanelIconButtonProps, ...rest }, ref) => {
const { multi, onItemSelect, onNavigate, selectedItems } = (0, react.useContext)(require_context.AddSelectContext);
const isSelected = selectedItems?.has(itemId) ?? selected;
const handleSelect = () => {
if (disabled) return;
onItemSelect?.(itemId, !isSelected, value);
};
const handleNavigate = (event) => {
event.stopPropagation();
if (!hasChildren) return;
onNavigate?.(itemId, title, parentId);
};
const handleItemPanelClick = (event) => {
event.stopPropagation();
onItemPanelClick?.(itemId);
};
const rowClasses = (0, import_classnames.default)(`${require_context.blockClass}-row`, className, {
[`${require_context.blockClass}-row--selected`]: isSelected,
[`${require_context.blockClass}-row--disabled`]: disabled,
[`${require_context.blockClass}-row-item-panel--selected`]: itemPanelOpen
});
return /* @__PURE__ */ react.default.createElement("div", {
className: rowClasses,
role: "row",
"aria-selected": isSelected,
tabIndex: -1,
"data-has-children": hasChildren || void 0,
ref,
...rest
}, /* @__PURE__ */ react.default.createElement("div", {
className: `${require_context.blockClass}-row__cell`,
role: "gridcell"
}, /* @__PURE__ */ react.default.createElement("div", { className: `${require_context.blockClass}-row__cell-wrapper` }, multi ? /* @__PURE__ */ react.default.createElement(_carbon_react.Checkbox, {
id: `checkbox-${itemId}`,
className: `${require_context.blockClass}-row__checkbox`,
checked: isSelected,
indeterminate,
disabled,
labelText: title,
hideLabel: true,
onChange: handleSelect,
...checkboxProps
}) : /* @__PURE__ */ react.default.createElement(_carbon_react.RadioButton, {
id: `radio-${itemId}`,
className: `${require_context.blockClass}-row__radio`,
checked: isSelected,
disabled,
labelText: title,
hideLabel: true,
value: itemId,
onChange: handleSelect,
...radioButtonProps
}), /* @__PURE__ */ react.default.createElement("div", { className: `${require_context.blockClass}-row__content` }, icon && /* @__PURE__ */ react.default.createElement("div", { className: `${require_context.blockClass}-row__icon` }, icon), rowContent || /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, /* @__PURE__ */ react.default.createElement("div", { className: `${require_context.blockClass}-row__text` }, /* @__PURE__ */ react.default.createElement("div", { className: `${require_context.blockClass}-row__title` }, title), subtitle && /* @__PURE__ */ react.default.createElement("div", { className: `${require_context.blockClass}-row__subtitle` }, subtitle)), children)), hasItemPanel && /* @__PURE__ */ react.default.createElement(_carbon_react.IconButton, {
label: itemPanelIconDescription,
onClick: handleItemPanelClick,
kind: "ghost",
size: "sm",
autoAlign: true,
className: `${require_context.blockClass}-row__view-item-panel`,
...itemPanelIconButtonProps
}, /* @__PURE__ */ react.default.createElement(_carbon_react_icons.View, { size: 16 })), hasChildren && /* @__PURE__ */ react.default.createElement("div", {
className: `${require_context.blockClass}-row__nav-indicator`,
onClick: handleNavigate,
onKeyDown: (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
e.stopPropagation();
if (hasChildren) onNavigate?.(itemId, title, parentId);
}
},
role: "button",
tabIndex: -1,
"aria-label": "Navigate to children"
}, /* @__PURE__ */ react.default.createElement(_carbon_react_icons.ChevronRight, { size: 16 })))));
});
AddSelectRow.propTypes = {
/**@ts-ignore */
checkboxProps: prop_types.default.object,
children: prop_types.default.node,
className: prop_types.default.string,
disabled: prop_types.default.bool,
hasChildren: prop_types.default.bool,
hasItemPanel: prop_types.default.bool,
headerContent: prop_types.default.node,
icon: prop_types.default.node,
indeterminate: prop_types.default.bool,
itemId: prop_types.default.string.isRequired,
/**@ts-ignore */
itemPanelIconButtonProps: prop_types.default.object,
itemPanelIconDescription: prop_types.default.string,
itemPanelOpen: prop_types.default.bool,
/**@ts-ignore */
onItemPanelClick: prop_types.default.func,
parentId: prop_types.default.string,
/**@ts-ignore */
radioButtonProps: prop_types.default.object,
selected: prop_types.default.bool,
subtitle: prop_types.default.string,
title: prop_types.default.string.isRequired,
value: prop_types.default.string.isRequired
};
AddSelectRow.displayName = "AddSelectRow";
//#endregion
exports.default = AddSelectRow;