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

Core React components for the NEXT Design System.

"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const jsxRuntime = require("react/jsx-runtime");
const React = require("react");
const MuiDivider = require("@mui/material/Divider");
const styles = require("@mui/material/styles");
const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
const useWidth = require("../hooks/useWidth.cjs");
const Stack_styles = require("./Stack.styles.cjs");
const Focus = require("../Focus/Focus.cjs");
const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
const MuiDivider__default = /* @__PURE__ */ _interopDefault(MuiDivider);
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
  } = uikitReactUtils.useDefaultProps("HvStack", props);
  const { classes, cx } = Stack_styles.useClasses(classesProp);
  const width = useWidth.useWidth();
  const containerRef = React.useRef(null);
  const { breakpoints } = styles.useTheme();
  const direction = React.useMemo(
    () => getDirection(directionProp, width, breakpoints.keys),
    [directionProp, width, breakpoints]
  );
  const getDividerComponent = React.useCallback(() => {
    if (typeof divider === "boolean" && divider) {
      return /* @__PURE__ */ jsxRuntime.jsx(
        MuiDivider__default.default,
        {
          orientation: direction === "column" ? "horizontal" : "vertical",
          flexItem: direction === "row",
          classes: {
            root: classes.divider
          },
          ...dividerProps
        }
      );
    }
    return divider;
  }, [classes.divider, divider, dividerProps, direction]);
  return /* @__PURE__ */ jsxRuntime.jsx(
    "div",
    {
      ref: containerRef,
      className: cx(
        classes.root,
        classes[direction],
        classes[spacing],
        className
      ),
      ...others,
      children: React.Children.map(children, (child, i) => {
        return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
          divider && i !== 0 && getDividerComponent(),
          withNavigation ? /* @__PURE__ */ jsxRuntime.jsx(
            Focus.HvFocus,
            {
              rootRef: containerRef,
              focusDisabled: false,
              strategy: "grid",
              navigationJump: direction === "column" ? 1 : React.Children.count(children) || 0,
              filterClass: "child",
              children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "child", children: child })
            }
          ) : child
        ] });
      })
    }
  );
};
exports.stackClasses = Stack_styles.staticClasses;
exports.HvStack = HvStack;