@carbon/react/es/components/ContainedList/ContainedList.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.
 */

import { usePrefix } from "../../internal/usePrefix.js";
import { useId } from "../../internal/useId.js";
import { isComponentElement } from "../../internal/utils.js";
import { LayoutConstraint } from "../Layout/index.js";
import ContainedListItem_default from "./ContainedListItem/index.js";
import Search from "../Search/Search.js";
import ExpandableSearch_default from "../ExpandableSearch/index.js";
import classNames from "classnames";
import "react";
import PropTypes from "prop-types";
import { jsx, jsxs } from "react/jsx-runtime";
//#region src/components/ContainedList/ContainedList.tsx
const variants = ["on-page", "disclosed"];
const isSearchComponent = (node) => isComponentElement(node, Search) || isComponentElement(node, ExpandableSearch_default);
const filterChildren = (children) => {
	if (Array.isArray(children)) return children.filter((child) => !isSearchComponent(child));
	if (children && !isSearchComponent(children)) return children;
	return null;
};
const ContainedList = ({ action, children, className, isInset, kind = variants[0], label, size, ...rest }) => {
	const labelId = `${useId("contained-list")}-header`;
	const prefix = usePrefix();
	const classes = classNames(`${prefix}--contained-list`, {
		[`${prefix}--contained-list--inset-rulers`]: isInset,
		[`${prefix}--contained-list--${size}`]: size,
		[`${prefix}--layout--size-${size}`]: size
	}, `${prefix}--contained-list--${kind}`, className);
	const filteredChildren = filterChildren(children);
	const isActionSearch = isSearchComponent(action);
	return /* @__PURE__ */ jsxs("div", {
		className: classes,
		...rest,
		children: [label && /* @__PURE__ */ jsxs("div", {
			className: `${prefix}--contained-list__header`,
			children: [/* @__PURE__ */ jsx("div", {
				id: labelId,
				className: `${prefix}--contained-list__label`,
				children: label
			}), /* @__PURE__ */ jsx(LayoutConstraint, {
				size: {
					min: "sm",
					max: "xl"
				},
				className: `${prefix}--contained-list__action`,
				children: action
			})]
		}), children && /* @__PURE__ */ jsx(
			"ul",
			/**
			* Webkit removes implicit "list" semantics when "list-style-type: none" is set.
			* Explicitly setting the "list" role ensures assistive technology in webkit
			* browsers correctly announce the semantics.
			*
			* Ref https://bugs.webkit.org/show_bug.cgi?id=170179#c1
			*/
			{
				role: "list",
				"aria-labelledby": label ? labelId : void 0,
				children: isActionSearch ? filteredChildren : children
			}
		)]
	});
};
ContainedList.propTypes = {
	action: PropTypes.node,
	children: PropTypes.node,
	className: PropTypes.string,
	isInset: PropTypes.bool,
	kind: PropTypes.oneOf(variants),
	label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
	size: PropTypes.oneOf([
		"sm",
		"md",
		"lg",
		"xl"
	])
};
Object.assign(ContainedList, { ContainedListItem: ContainedListItem_default });
//#endregion
export { ContainedList as default };