@hitachivantara/uikit-react-core/dist/cjs/Grid/Grid.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 MuiGrid = require("@mui/material/Grid");
const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
const useWidth = require("../hooks/useWidth.cjs");
const Grid_styles = require("./Grid.styles.cjs");
const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
const MuiGrid__default = /* @__PURE__ */ _interopDefault(MuiGrid);
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 = React.forwardRef(function WidthGrid2(props, ref) {
  const { container, spacing, rowSpacing, columnSpacing, columns, ...others } = props;
  const width = useWidth.useWidth();
  const containerProps = container ? getContainerProps(
    spacing === "auto" ? width : spacing,
    rowSpacing === "auto" ? width : rowSpacing,
    columnSpacing === "auto" ? width : columnSpacing,
    columns
  ) : {};
  return /* @__PURE__ */ jsxRuntime.jsx(MuiGrid__default.default, { ref, ...containerProps, ...others });
});
const HvGrid = React.forwardRef(function HvGrid2(props, ref) {
  const {
    item,
    container,
    spacing = "auto",
    rowSpacing,
    columnSpacing,
    columns,
    classes: classesProp,
    ...others
  } = uikitReactUtils.useDefaultProps("HvGrid", props);
  const { classes } = Grid_styles.useClasses(classesProp);
  if (container && item && (spacing === "auto" || rowSpacing === "auto" || columnSpacing === "auto")) {
    return /* @__PURE__ */ jsxRuntime.jsx(
      WidthGrid,
      {
        ref,
        classes,
        item,
        container,
        spacing,
        rowSpacing,
        columnSpacing,
        columns,
        ...others
      }
    );
  }
  const containerProps = container ? getContainerProps(spacing, rowSpacing, columnSpacing, columns) : {};
  return /* @__PURE__ */ jsxRuntime.jsx(
    MuiGrid__default.default,
    {
      ref,
      classes,
      item,
      ...containerProps,
      ...others
    }
  );
});
exports.gridClasses = Grid_styles.staticClasses;
exports.HvGrid = HvGrid;