@hitachivantara/uikit-react-lab/dist/Blades/Blades.js

Contributed React components to UI Kit by the community.

import { useClasses } from "./Blades.styles.js";
import { Children, cloneElement, useCallback, useMemo } from "react";
import { useControlled, useDefaultProps } from "@hitachivantara/uikit-react-core";
import { jsx } from "react/jsx-runtime";
//#region src/Blades/Blades.tsx
function getExpandedBlades(defaultExpanded, children, atMostOneExpanded, atLeastOneExpanded) {
	const childrenArray = Children.toArray(children);
	const expandedBlades = defaultExpanded ?? childrenArray.map((child, i) => {
		return (child?.props?.expanded !== void 0 ? child?.props?.expanded : child?.props?.defaultExpanded) ? i : void 0;
	}).filter((v) => v !== void 0);
	const numberOfExpandedBlades = expandedBlades.length;
	if (atLeastOneExpanded && numberOfExpandedBlades === 0 && childrenArray.length > 0) return [0];
	if (atMostOneExpanded && numberOfExpandedBlades > 1) return [expandedBlades[0]];
	return expandedBlades;
}
/**
* `HvBlades` is a component that groups multiple `HvBlade` components.
*
* It allows for better control over the expanded state of blades, suitable for both
* controlled and uncontrolled scenarios.
*/
var HvBlades = (props) => {
	const { id, className, classes: classesProp, children, expanded: expandedProp, defaultExpanded, atMostOneExpanded = false, atLeastOneExpanded = false, fullWidthBlades = false, onChange, ...others } = useDefaultProps("HvBlades", props);
	const { classes, cx } = useClasses(classesProp);
	const [expanded, setExpanded] = useControlled(expandedProp, () => getExpandedBlades(defaultExpanded, children, atMostOneExpanded, atLeastOneExpanded));
	const onChildChangeInterceptor = useCallback((index, childOnChange, event, isExpanded) => {
		const newValue = [];
		if (atMostOneExpanded) {
			if (isExpanded) newValue.push(index);
		} else {
			newValue.push(...expanded);
			if (isExpanded) newValue.push(index);
			else newValue.splice(newValue.indexOf(index), 1);
		}
		if (atLeastOneExpanded && newValue.length === 0) newValue.push(index);
		childOnChange?.(event, isExpanded);
		onChange?.(event, newValue);
		setExpanded(newValue);
	}, [
		onChange,
		expanded,
		setExpanded,
		atMostOneExpanded,
		atLeastOneExpanded
	]);
	const modifiedChildren = useMemo(() => {
		return Children.map(children, (child, i) => {
			const childIsExpanded = expanded.includes(i);
			return cloneElement(child, {
				expanded: childIsExpanded,
				fullWidth: child?.props?.fullWidth ?? fullWidthBlades,
				buttonProps: {
					...child?.props?.buttonProps,
					"aria-disabled": child?.props?.disabled || childIsExpanded && atMostOneExpanded && expanded.length === 1 ? true : void 0
				},
				onChange: (event, isExpanded) => onChildChangeInterceptor(i, child?.props?.onChange, event, isExpanded)
			});
		});
	}, [
		children,
		expanded,
		fullWidthBlades,
		atMostOneExpanded,
		onChildChangeInterceptor
	]);
	return /* @__PURE__ */ jsx("div", {
		id,
		className: cx(classes.root, className),
		...others,
		children: modifiedChildren
	});
};
//#endregion
export { HvBlades };