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

UI Kit Core React components.

import { HvFocus } from "../Focus/Focus.js";
import { useWidth } from "../hooks/useWidth.js";
import { useClasses } from "./Stack.styles.js";
import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
import { Children, useCallback, useMemo, useRef } from "react";
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
import { useTheme as useTheme$1 } from "@mui/material/styles";
import MuiDivider from "@mui/material/Divider";
//#region src/Stack/Stack.tsx
/**
* @returns {string} - Returns a direction for the stack: column or row. If the
*                     `direction` property is a string and a valid direction then we
*                     use it. If it's an object with multiple directions by breakpoint
*                     we use the appropriate one or search for the nearest breakpoint
*                     smaller than the current one to use.
*/
var getDirection = (direction, width, breakpoints) => {
	if (typeof direction === "string") return direction;
	for (let i = breakpoints.indexOf(width); i >= 0; i -= 1) if (direction[breakpoints[i]] !== void 0) return direction[breakpoints[i]];
	return "column";
};
/**
* The Stack component arranges its children in a vertical or horizontal layout.
*
* It supports customizable spacing and optional dividers between elements.
*
*/
var HvStack = (props) => {
	const { classes: classesProp, className, children, direction: directionProp = "column", spacing = "sm", divider = false, withNavigation = false, dividerProps = {}, ...others } = useDefaultProps("HvStack", props);
	const { classes, cx } = useClasses(classesProp);
	const width = useWidth();
	const containerRef = useRef(null);
	const { breakpoints } = useTheme$1();
	const direction = useMemo(() => getDirection(directionProp, width, breakpoints.keys), [
		directionProp,
		width,
		breakpoints
	]);
	/**
	* @returns {node} - The divider component to use. If the property `divider` is
	*                   set to `true` then the Material-UI divider is used, otherwise
	*                   we use the custom divider the user passed.
	*/
	const getDividerComponent = useCallback(() => {
		if (typeof divider === "boolean" && divider) return /* @__PURE__ */ jsx(MuiDivider, {
			orientation: direction === "column" ? "horizontal" : "vertical",
			flexItem: direction === "row",
			classes: { root: classes.divider },
			...dividerProps
		});
		return divider;
	}, [
		classes.divider,
		divider,
		dividerProps,
		direction
	]);
	return /* @__PURE__ */ jsx("div", {
		ref: containerRef,
		className: cx(classes.root, classes[direction], classes[spacing], className),
		...others,
		children: Children.map(children, (child, i) => {
			return /* @__PURE__ */ jsxs(Fragment$1, { children: [divider && i !== 0 && getDividerComponent(), withNavigation ? /* @__PURE__ */ jsx(HvFocus, {
				rootRef: containerRef,
				focusDisabled: false,
				strategy: "grid",
				navigationJump: direction === "column" ? 1 : Children.count(children) || 0,
				filterClass: "child",
				children: /* @__PURE__ */ jsx("div", {
					className: "child",
					children: child
				})
			}) : child] });
		})
	});
};
//#endregion
export { HvStack };