@carbon/ibm-products
Version:
Carbon for IBM Products
127 lines (125 loc) • 5.17 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 { AddSelectContext, blockClass } from "./context.js";
import React, { forwardRef, useContext } from "react";
import PropTypes from "prop-types";
import { Checkbox, IconButton, RadioButton } from "@carbon/react";
import { ChevronRight, View } from "@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__ */ __toESM(require_classnames());
const AddSelectRow = 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 } = useContext(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)(`${blockClass}-row`, className, {
[`${blockClass}-row--selected`]: isSelected,
[`${blockClass}-row--disabled`]: disabled,
[`${blockClass}-row-item-panel--selected`]: itemPanelOpen
});
return /* @__PURE__ */ React.createElement("div", {
className: rowClasses,
role: "row",
"aria-selected": isSelected,
tabIndex: -1,
"data-has-children": hasChildren || void 0,
ref,
...rest
}, /* @__PURE__ */ React.createElement("div", {
className: `${blockClass}-row__cell`,
role: "gridcell"
}, /* @__PURE__ */ React.createElement("div", { className: `${blockClass}-row__cell-wrapper` }, multi ? /* @__PURE__ */ React.createElement(Checkbox, {
id: `checkbox-${itemId}`,
className: `${blockClass}-row__checkbox`,
checked: isSelected,
indeterminate,
disabled,
labelText: title,
hideLabel: true,
onChange: handleSelect,
...checkboxProps
}) : /* @__PURE__ */ React.createElement(RadioButton, {
id: `radio-${itemId}`,
className: `${blockClass}-row__radio`,
checked: isSelected,
disabled,
labelText: title,
hideLabel: true,
value: itemId,
onChange: handleSelect,
...radioButtonProps
}), /* @__PURE__ */ React.createElement("div", { className: `${blockClass}-row__content` }, icon && /* @__PURE__ */ React.createElement("div", { className: `${blockClass}-row__icon` }, icon), rowContent || /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: `${blockClass}-row__text` }, /* @__PURE__ */ React.createElement("div", { className: `${blockClass}-row__title` }, title), subtitle && /* @__PURE__ */ React.createElement("div", { className: `${blockClass}-row__subtitle` }, subtitle)), children)), hasItemPanel && /* @__PURE__ */ React.createElement(IconButton, {
label: itemPanelIconDescription,
onClick: handleItemPanelClick,
kind: "ghost",
size: "sm",
autoAlign: true,
className: `${blockClass}-row__view-item-panel`,
...itemPanelIconButtonProps
}, /* @__PURE__ */ React.createElement(View, { size: 16 })), hasChildren && /* @__PURE__ */ React.createElement("div", {
className: `${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.createElement(ChevronRight, { size: 16 })))));
});
AddSelectRow.propTypes = {
/**@ts-ignore */
checkboxProps: PropTypes.object,
children: PropTypes.node,
className: PropTypes.string,
disabled: PropTypes.bool,
hasChildren: PropTypes.bool,
hasItemPanel: PropTypes.bool,
headerContent: PropTypes.node,
icon: PropTypes.node,
indeterminate: PropTypes.bool,
itemId: PropTypes.string.isRequired,
/**@ts-ignore */
itemPanelIconButtonProps: PropTypes.object,
itemPanelIconDescription: PropTypes.string,
itemPanelOpen: PropTypes.bool,
/**@ts-ignore */
onItemPanelClick: PropTypes.func,
parentId: PropTypes.string,
/**@ts-ignore */
radioButtonProps: PropTypes.object,
selected: PropTypes.bool,
subtitle: PropTypes.string,
title: PropTypes.string.isRequired,
value: PropTypes.string.isRequired
};
AddSelectRow.displayName = "AddSelectRow";
//#endregion
export { AddSelectRow as default };