@hitachivantara/uikit-react-core/dist/ListContainer/ListContainer.js

UI Kit Core React components.

import { useForkRef } from "../hooks/useForkRef.js";
import { useClasses } from "./ListContainer.styles.js";
import ListContext from "./ListContext/ListContext.js";
import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
import { Children, cloneElement, forwardRef, isValidElement, useContext, useMemo, useRef } from "react";
import { jsx } from "react/jsx-runtime";
//#region src/ListContainer/ListContainer.tsx
/**
* A **list** is any enumeration of a set of items.
* The simple list is for continuous **vertical indexes of text or icons+text**. The content of these lists must be simple: ideally simples fields.
* This pattern is ideal for **selections**. It should be used inside an `HvPanel`.
*/
var HvListContainer = forwardRef(function HvListContainer(props, ref) {
	const { id, classes: classesProp, className, interactive = false, selectable, condensed, disableGutters, children: childrenProp, ...others } = useDefaultProps("HvListContainer", props);
	const { classes, cx } = useClasses(classesProp);
	const containerRef = useRef(null);
	const { topContainerRef, nesting = -1 } = useContext(ListContext);
	const listContext = useMemo(() => ({
		topContainerRef: topContainerRef || containerRef,
		condensed,
		selectable,
		disableGutters,
		interactive,
		nesting: nesting + 1
	}), [
		condensed,
		selectable,
		disableGutters,
		interactive,
		nesting,
		topContainerRef
	]);
	const children = useMemo(() => {
		if (!interactive) return childrenProp;
		const anySelected = Children.toArray(childrenProp).some((child) => isValidElement(child) && child.props.selected && !child.props.disabled);
		return Children.map(childrenProp, (child, i) => {
			return cloneElement(child, {
				tabIndex: child.props.tabIndex || !anySelected && i === 0 || child.props.selected && !child.props.disabled ? 0 : -1,
				interactive
			});
		});
	}, [childrenProp, interactive]);
	const handleRef = useForkRef(ref, containerRef);
	return /* @__PURE__ */ jsx(ListContext.Provider, {
		value: listContext,
		children: /* @__PURE__ */ jsx("ul", {
			ref: handleRef,
			id,
			className: cx(classes.root, className),
			...others,
			children
		})
	});
});
//#endregion
export { HvListContainer };