@carbon/react/lib/components/StructuredList/StructuredList.js

React components for the Carbon Design System

/**
 * Copyright IBM Corp. 2016, 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_usePrefix = require("../../internal/usePrefix.js");
const require_Text = require("../Text/Text.js");
const require_useId = require("../../internal/useId.js");
const require_deprecate = require("../../prop-types/deprecate.js");
const require_useOutsideClick = require("../../internal/useOutsideClick.js");
let classnames = require("classnames");
classnames = require_runtime.__toESM(classnames);
let react = require("react");
react = require_runtime.__toESM(react);
let prop_types = require("prop-types");
prop_types = require_runtime.__toESM(prop_types);
let react_jsx_runtime = require("react/jsx-runtime");
let _carbon_icons_react = require("@carbon/icons-react");
//#region src/components/StructuredList/StructuredList.tsx
/**
* Copyright IBM Corp. 2016, 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 GridSelectedRowStateContext = react.default.createContext(null);
const GridSelectedRowDispatchContext = react.default.createContext(null);
function StructuredListWrapper(props) {
	const { children, selection, className, ["aria-label"]: ariaLabel = "Structured list section", ariaLabel: deprecatedAriaLabel, isCondensed, isFlush, selectedInitialRow, ...other } = props;
	const prefix = require_usePrefix.usePrefix();
	const classes = (0, classnames.default)(`${prefix}--structured-list`, {
		[`${prefix}--structured-list--selection`]: selection,
		[`${prefix}--structured-list--condensed`]: isCondensed,
		[`${prefix}--structured-list--flush`]: isFlush && !selection
	}, className);
	const [selectedRow, setSelectedRow] = react.default.useState(selectedInitialRow ?? null);
	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GridSelectedRowStateContext.Provider, {
		value: selectedRow,
		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GridSelectedRowDispatchContext.Provider, {
			value: setSelectedRow,
			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
				role: "table",
				className: classes,
				...other,
				"aria-label": deprecatedAriaLabel || ariaLabel,
				children
			})
		})
	});
}
StructuredListWrapper.propTypes = {
	["aria-label"]: prop_types.default.string,
	ariaLabel: require_deprecate.deprecate(prop_types.default.string, "This prop syntax has been deprecated. Please use the new `aria-label`."),
	children: prop_types.default.node,
	className: prop_types.default.string,
	isCondensed: prop_types.default.bool,
	isFlush: prop_types.default.bool,
	selection: prop_types.default.bool,
	selectedInitialRow: prop_types.default.string
};
function StructuredListHead(props) {
	const { children, className, ...other } = props;
	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
		role: "rowgroup",
		className: (0, classnames.default)(`${require_usePrefix.usePrefix()}--structured-list-thead`, className),
		...other,
		children
	});
}
StructuredListHead.propTypes = {
	children: prop_types.default.node,
	className: prop_types.default.string
};
function StructuredListBody(props) {
	const { children, className, ...other } = props;
	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
		className: (0, classnames.default)(`${require_usePrefix.usePrefix()}--structured-list-tbody`, className),
		role: "rowgroup",
		...other,
		children
	});
}
StructuredListBody.propTypes = {
	children: prop_types.default.node,
	className: prop_types.default.string,
	head: prop_types.default.bool,
	onKeyDown: prop_types.default.func
};
const GridRowContext = react.default.createContext(null);
function StructuredListRow(props) {
	const { onKeyDown, children, className, head, onClick, selection, id, ...other } = props;
	const [hasFocusWithin, setHasFocusWithin] = (0, react.useState)(false);
	const generatedRowId = require_useId.useId("grid-input");
	const rowId = id ?? generatedRowId;
	const selectedRow = react.default.useContext(GridSelectedRowStateContext);
	const setSelectedRow = react.default.useContext(GridSelectedRowDispatchContext);
	const prefix = require_usePrefix.usePrefix();
	const value = { id: rowId };
	const classes = (0, classnames.default)(`${prefix}--structured-list-row`, {
		[`${prefix}--structured-list-row--header-row`]: head,
		[`${prefix}--structured-list-row--focused-within`]: hasFocusWithin && !selection || hasFocusWithin && selection && (selectedRow === rowId || selectedRow === null),
		[`${prefix}--structured-list-row--selected`]: selectedRow === rowId
	}, className);
	const itemRef = (0, react.useRef)(null);
	const handleClick = () => {
		setHasFocusWithin(false);
	};
	require_useOutsideClick.useOutsideClick(itemRef, handleClick);
	return head ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
		role: "row",
		...other,
		className: classes,
		children: [selection && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StructuredListCell, { head: true }), children]
	}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
		...other,
		role: "row",
		className: classes,
		ref: itemRef,
		onClick: (event) => {
			setSelectedRow?.(rowId);
			onClick?.(event);
			if (selection) setHasFocusWithin(true);
		},
		onFocus: (event) => {
			if (selection || event.currentTarget === event.target) setHasFocusWithin(true);
		},
		onBlur: () => {
			setHasFocusWithin(false);
		},
		onKeyDown,
		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(GridRowContext.Provider, {
			value,
			children: [selection && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StructuredListCell, { children: selectedRow === rowId ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_carbon_icons_react.RadioButtonChecked, { className: `${prefix}--structured-list__icon` }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_carbon_icons_react.RadioButton, { className: `${prefix}--structured-list__icon` }) }), children]
		})
	});
}
StructuredListRow.propTypes = {
	children: prop_types.default.node,
	className: prop_types.default.string,
	head: prop_types.default.bool,
	label: require_deprecate.deprecate(prop_types.default.bool, `\nThe \`label\` prop is no longer needed and will be removed in the next major version of Carbon.`),
	onClick: prop_types.default.func,
	onKeyDown: prop_types.default.func,
	selection: prop_types.default.bool,
	id: prop_types.default.string
};
function StructuredListInput(props) {
	const defaultId = require_useId.useId("structureListInput");
	const { className, name = `structured-list-input-${defaultId}`, title, id, onChange, ...other } = props;
	const prefix = require_usePrefix.usePrefix();
	const classes = (0, classnames.default)(`${prefix}--structured-list-input`, `${prefix}--visually-hidden`, className);
	const row = react.default.useContext(GridRowContext);
	const selectedRow = react.default.useContext(GridSelectedRowStateContext);
	const setSelectedRow = react.default.useContext(GridSelectedRowDispatchContext);
	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
		...other,
		type: "radio",
		tabIndex: 0,
		checked: !!row && row.id === selectedRow,
		value: row?.id ?? "",
		onChange: (event) => {
			setSelectedRow?.(event.target.value);
			onChange?.(event);
		},
		id: id ?? defaultId,
		className: classes,
		name,
		title
	});
}
StructuredListInput.propTypes = {
	className: prop_types.default.string,
	defaultChecked: require_deprecate.deprecate(prop_types.default.bool, `\nThe prop \`defaultChecked\` is no longer needed and will be removed in the next major version of Carbon.`),
	id: prop_types.default.string,
	name: prop_types.default.string,
	onChange: prop_types.default.func,
	title: prop_types.default.string,
	value: require_deprecate.deprecate(prop_types.default.oneOfType([prop_types.default.string, prop_types.default.number]).isRequired, `\nThe prop \`value\` will be removed in the next major version of Carbon.`)
};
function StructuredListCell(props) {
	const { children, className, head, noWrap, ...other } = props;
	const prefix = require_usePrefix.usePrefix();
	const classes = (0, classnames.default)({
		[`${prefix}--structured-list-th`]: head,
		[`${prefix}--structured-list-td`]: !head,
		[`${prefix}--structured-list-content--nowrap`]: noWrap
	}, className);
	if (head) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.Text, {
		className: classes,
		role: "columnheader",
		...other,
		children
	});
	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.Text, {
		as: "div",
		className: classes,
		role: "cell",
		...other,
		children
	});
}
StructuredListCell.propTypes = {
	children: prop_types.default.node,
	className: prop_types.default.string,
	head: prop_types.default.bool,
	noWrap: prop_types.default.bool
};
//#endregion
exports.StructuredListBody = StructuredListBody;
exports.StructuredListCell = StructuredListCell;
exports.StructuredListHead = StructuredListHead;
exports.StructuredListInput = StructuredListInput;
exports.StructuredListRow = StructuredListRow;
exports.StructuredListWrapper = StructuredListWrapper;