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

Core React components for the NEXT Design System.

import { jsx } from "react/jsx-runtime";
import { forwardRef } from "react";
import MuiGrid from "@mui/material/Grid";
import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
import { useWidth } from "../hooks/useWidth.js";
import { useClasses } from "./Grid.styles.js";
import { staticClasses } from "./Grid.styles.js";
const BREAKPOINT_GUTTERS = {
  xs: 2,
  sm: 2,
  md: 4,
  lg: 4,
  xl: 4
};
const BREAKPOINT_COLUMNS = {
  xs: 4,
  sm: 8,
  md: 12,
  lg: 12,
  xl: 12
};
function getGridSpacing(spacing) {
  let gridSpacing;
  if (typeof spacing === "string") {
    if (spacing === "auto") {
      gridSpacing = BREAKPOINT_GUTTERS;
    } else {
      gridSpacing = BREAKPOINT_GUTTERS[spacing];
    }
  } else if (typeof spacing === "object") {
    gridSpacing = Object.keys(spacing).reduce(
      (acc, bp) => {
        acc[bp] = BREAKPOINT_GUTTERS[spacing[bp]] ?? spacing[bp];
        return acc;
      },
      {}
    );
  } else if (spacing === 0) {
    gridSpacing = { xs: 0 };
  } else {
    gridSpacing = spacing;
  }
  return gridSpacing;
}
function getNumberOfColumns(columns) {
  let numberOfColumns;
  if (columns === "auto") {
    numberOfColumns = BREAKPOINT_COLUMNS;
  } else {
    numberOfColumns = columns;
  }
  return numberOfColumns;
}
function getContainerProps(spacing, rowSpacing, columnSpacing, columns) {
  const containerProps = { container: true };
  if (spacing != null) {
    containerProps.spacing = getGridSpacing(spacing);
  }
  if (rowSpacing != null) {
    containerProps.rowSpacing = getGridSpacing(rowSpacing);
  }
  if (columnSpacing != null) {
    containerProps.columnSpacing = getGridSpacing(columnSpacing);
  }
  if (columns != null) {
    containerProps.columns = getNumberOfColumns(columns);
  }
  return containerProps;
}
const WidthGrid = forwardRef(function WidthGrid2(props, ref) {
  const { container, spacing, rowSpacing, columnSpacing, columns, ...others } = props;
  const width = useWidth();
  const containerProps = container ? getContainerProps(
    spacing === "auto" ? width : spacing,
    rowSpacing === "auto" ? width : rowSpacing,
    columnSpacing === "auto" ? width : columnSpacing,
    columns
  ) : {};
  return /* @__PURE__ */ jsx(MuiGrid, { ref, ...containerProps, ...others });
});
const HvGrid = forwardRef(function HvGrid2(props, ref) {
  const {
    item,
    container,
    spacing = "auto",
    rowSpacing,
    columnSpacing,
    columns,
    classes: classesProp,
    ...others
  } = useDefaultProps("HvGrid", props);
  const { classes } = useClasses(classesProp);
  if (container && item && (spacing === "auto" || rowSpacing === "auto" || columnSpacing === "auto")) {
    return /* @__PURE__ */ jsx(
      WidthGrid,
      {
        ref,
        classes,
        item,
        container,
        spacing,
        rowSpacing,
        columnSpacing,
        columns,
        ...others
      }
    );
  }
  const containerProps = container ? getContainerProps(spacing, rowSpacing, columnSpacing, columns) : {};
  return /* @__PURE__ */ jsx(
    MuiGrid,
    {
      ref,
      classes,
      item,
      ...containerProps,
      ...others
    }
  );
});
export {
  HvGrid,
  staticClasses as gridClasses
};