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

Core React components for the NEXT Design System.

import { jsx, jsxs, Fragment } from "react/jsx-runtime";
import { useRef, useMemo, useCallback, Children } from "react";
import MuiDivider from "@mui/material/Divider";
import { useTheme } from "@mui/material/styles";
import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
import { useWidth } from "../hooks/useWidth.js";
import { useClasses } from "./Stack.styles.js";
import { staticClasses } from "./Stack.styles.js";
import { HvFocus } from "../Focus/Focus.js";
const 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";
};
const 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();
  const direction = useMemo(
    () => getDirection(directionProp, width, breakpoints.keys),
    [directionProp, width, breakpoints]
  );
  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, { 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
        ] });
      })
    }
  );
};
export {
  HvStack,
  staticClasses as stackClasses
};