@greensight/gds/scss/esm/components/GridLayout/index.js

Greensight Design System

'use client';
import { _ as _objectWithoutProperties, a as _extends, c as cn } from '../../index-BWlsKM8g.js';
import React__default, { forwardRef, useMemo } from 'react';
import { u as useCSSProperty, a as useGenerateProperty } from '../../useGenerateProperty-CWzXNwSD.js';
import { s as scale } from '../../scale-C8q7jx7a.js';
import { colsTransform, rowsTransform, gapTransform } from './helpers.js';
import { u as useScssTheme } from '../../useTheme-Bslje2r3.js';

var _excluded = ["as", "cols", "gap", "rows", "justify", "align", "className", "children"];
var DEFAULT_COMPONENT = 'div';

/**
 * Grid layout component
 */
var GridComponent = function GridComponent(_ref, ref) {
  var ComponentProp = _ref.as,
    _ref$cols = _ref.cols,
    cols = _ref$cols === void 0 ? 12 : _ref$cols,
    _ref$gap = _ref.gap,
    gap = _ref$gap === void 0 ? scale(3) : _ref$gap,
    rows = _ref.rows,
    justify = _ref.justify,
    align = _ref.align,
    className = _ref.className,
    children = _ref.children,
    props = _objectWithoutProperties(_ref, _excluded);
  var Component = ComponentProp || DEFAULT_COMPONENT;
  var _useScssTheme = useScssTheme(),
    styles = _useScssTheme.components.gridLayout.index;
  var gridTemplateColumns = useCSSProperty({
    value: cols,
    transform: colsTransform
  });
  var gridTemplateRows = useCSSProperty({
    value: rows,
    transform: rowsTransform
  });
  var gridGap = useCSSProperty({
    value: gap,
    transform: gapTransform
  });
  var justifyContent = useCSSProperty({
    value: justify
  });
  var alignItems = useCSSProperty({
    value: align
  });
  var propArray = useMemo(function () {
    var properties = [];
    if (gridTemplateColumns) properties.push({
      name: 'cols',
      value: gridTemplateColumns
    });
    if (gridTemplateRows) properties.push({
      name: 'rows',
      value: gridTemplateRows
    });
    if (gridGap) properties.push({
      name: 'gap',
      value: gridGap
    });
    if (justifyContent) properties.push({
      name: 'justify',
      value: justifyContent
    });
    if (alignItems) properties.push({
      name: 'align',
      value: alignItems
    });
    return properties;
  }, [alignItems, gridGap, gridTemplateColumns, gridTemplateRows, justifyContent]);
  var _useGenerateProperty = useGenerateProperty({
      name: 'gridLayout',
      props: propArray,
      styles: styles
    }),
    mediaStyles = _useGenerateProperty.mediaStyles,
    vars = _useGenerateProperty.vars;
  return /*#__PURE__*/React__default.createElement(Component, _extends({
    ref: ref,
    className: cn(styles.gridLayout, mediaStyles, className),
    style: vars
  }, props), children);
};
var GridLayout = /*#__PURE__*/forwardRef(GridComponent);

export { GridLayout };