@carbon/ibm-products
Version:
Carbon for IBM Products
173 lines (171 loc) • 6.93 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_AddSelectFormControl = require("./AddSelectFormControl.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/AddSelectRow.jsx
var import_classnames = /* @__PURE__ */ require_runtime.__toESM(require_index.default);
const blockClass = `${require_settings.pkg.prefix}--add-select__selections`;
const componentName = "AddSelectList";
let AddSelectRow = ({ appliedModifiers, displayMetalPanel, index, focus, item, metaIconDescription, modifiers, multi, multiSelection, navIconDescription, parentId, parentSelected, setAppliedModifiers, setDisplayMetaPanel, setFocus, setMultiSelection, setParentSelected, setSingleSelection, setSize, singleSelection }) => {
const ref = (0, react.useRef)(null);
(0, react.useEffect)(() => {
if (focus === index) ref.current.focus();
}, [focus, index]);
const isSelected = () => {
if (multi) return multiSelection.includes(item.id);
return item.id === singleSelection;
};
const getTabIndex = () => {
if (index === 0 && focus === "") return 0;
if (focus === index && focus !== "") return 0;
return -1;
};
const focusHandler = (0, react.useCallback)((reset) => {
setFocus(reset ? "" : index);
}, [setFocus, index]);
const handleSingleSelection = () => {
setSingleSelection(item.id);
};
const onSelectKeyDown = ({ key }) => {
if (key === "Enter" || key === " ") if (multi) handleMultiSelection();
else handleSingleSelection();
else if (key === "ArrowRight" && item.children) onNavigateItem();
};
const handleMultiSelection = () => {
if (!isSelected()) setMultiSelection([...multiSelection, item.id]);
else setMultiSelection(multiSelection.filter((v) => v !== item.id));
};
const onNavigateItem = () => {
focusHandler(true);
setParentSelected(item.id, item.title, parentId);
};
const modifierHandler = (id, selectedItem) => {
const modifiersClone = [...appliedModifiers];
const modifierIdx = modifiersClone.findIndex((item) => item.id === id);
modifiersClone[modifierIdx] = {
id,
[modifiers.id]: selectedItem
};
setAppliedModifiers(modifiersClone);
};
const metaPanelHandler = () => {
if (item.meta) setDisplayMetaPanel(item);
};
const isInMetaPanel = (id) => id === displayMetalPanel?.id;
const hasModifiers = modifiers?.options?.length > 0;
const tabIndex = getTabIndex();
const selected = isSelected();
const expanded = parentSelected === item.id;
const sharedSelectProps = {
id: `add-select-modifier-${item.id}`,
titleText: modifiers?.title,
type: "inline",
disabled: !isSelected(),
label: modifiers?.label,
items: modifiers?.options
};
return /* @__PURE__ */ react.default.createElement("div", {
className: (0, import_classnames.default)(`${blockClass}-row`, {
[`${blockClass}-row--selected`]: isSelected(),
[`${blockClass}-row-meta--selected`]: isInMetaPanel(item.id),
[`${blockClass}-row--active`]: expanded,
[`${blockClass}-row--focused`]: focus === index
}),
onKeyDown: onSelectKeyDown,
tabIndex,
ref,
role: "row",
"aria-selected": selected,
"aria-posinset": index + 1,
"aria-setsize": setSize,
"aria-expanded": expanded
}, /* @__PURE__ */ react.default.createElement("div", {
className: `${blockClass}-cell`,
role: "gridcell"
}, /* @__PURE__ */ react.default.createElement("div", { className: `${blockClass}-cell-wrapper` }, multi ? /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, /* @__PURE__ */ react.default.createElement(require_AddSelectFormControl.AddSelectFormControl, {
type: "checkbox",
item,
selected,
onClick: handleMultiSelection
}), hasModifiers && /* @__PURE__ */ react.default.createElement(_carbon_react.Layer, null, modifiers?.multiSelect ? /* @__PURE__ */ react.default.createElement(_carbon_react.MultiSelect, {
...sharedSelectProps,
initialSelectedItems: item[modifiers.id],
onChange: ({ selectedItems }) => modifierHandler(item.id, selectedItems)
}) : /* @__PURE__ */ react.default.createElement(_carbon_react.Dropdown, {
...sharedSelectProps,
className: `${blockClass}-dropdown`,
initialSelectedItem: item[modifiers.id],
onChange: ({ selectedItem }) => modifierHandler(item.id, selectedItem)
}))) : /* @__PURE__ */ react.default.createElement(require_AddSelectFormControl.AddSelectFormControl, {
type: "radio",
item,
selected,
onClick: handleSingleSelection
}), item.children && /* @__PURE__ */ react.default.createElement(_carbon_react.Button, {
className: `${blockClass}-view-children`,
renderIcon: (props) => /* @__PURE__ */ react.default.createElement(_carbon_react_icons.ChevronRight, {
size: 16,
...props
}),
iconDescription: navIconDescription,
tooltipPosition: "left",
tooltipAlignment: "center",
hasIconOnly: true,
onClick: onNavigateItem,
kind: "ghost",
size: "sm",
tabIndex: -1,
"aria-hidden": true
}), item.meta && /* @__PURE__ */ react.default.createElement(_carbon_react.Button, {
className: `${blockClass}-view-meta`,
renderIcon: (props) => /* @__PURE__ */ react.default.createElement(_carbon_react_icons.View, {
size: 16,
...props
}),
iconDescription: metaIconDescription,
tooltipPosition: "left",
tooltipAlignment: "center",
hasIconOnly: true,
kind: "ghost",
size: "sm",
onClick: metaPanelHandler
}))));
};
AddSelectRow.propTypes = {
appliedModifiers: prop_types.default.array,
displayMetalPanel: prop_types.default.object,
filteredItems: prop_types.default.array,
focus: prop_types.default.oneOfType([prop_types.default.number, prop_types.default.string]),
index: prop_types.default.number,
item: prop_types.default.object,
metaIconDescription: prop_types.default.string,
modifiers: prop_types.default.object,
multi: prop_types.default.bool,
multiSelection: prop_types.default.array,
navIconDescription: prop_types.default.string,
parentId: prop_types.default.string,
parentSelected: prop_types.default.string,
setAppliedModifiers: prop_types.default.func,
setDisplayMetaPanel: prop_types.default.func,
setFocus: prop_types.default.func,
setMultiSelection: prop_types.default.func,
setParentSelected: prop_types.default.func,
setSingleSelection: prop_types.default.func,
setSize: prop_types.default.number,
singleSelection: prop_types.default.string
};
AddSelectRow.displayName = componentName;
//#endregion
exports.AddSelectRow = AddSelectRow;