@greensight/gds/scss/esm/components/FlexLayout/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 { gapTransform } from './helpers.js';
import { u as useScssTheme } from '../../useTheme-Bslje2r3.js';
export { FlexLayoutItem } from './components/Item/index.js';
import './components/Item/helpers.js';

var _excluded = ["as", "gap", "justify", "align", "className", "children", "wrap"];
var DEFAULT_COMPONENT = 'div';
/**
 * Flex layout component
 */
var FlexComponent = function FlexComponent(_ref, ref) {
  var ComponentProp = _ref.as,
    _ref$gap = _ref.gap,
    gap = _ref$gap === void 0 ? scale(3) : _ref$gap,
    justify = _ref.justify,
    align = _ref.align,
    className = _ref.className,
    children = _ref.children,
    wrap = _ref.wrap,
    props = _objectWithoutProperties(_ref, _excluded);
  var Component = ComponentProp || DEFAULT_COMPONENT;
  var _useScssTheme = useScssTheme(),
    styles = _useScssTheme.components.flexLayout.index;
  var flexGap = useCSSProperty({
    value: gap,
    transform: gapTransform
  });
  var justifyContent = useCSSProperty({
    value: justify
  });
  var alignItems = useCSSProperty({
    value: align
  });
  var wrapValue = useMemo(function () {
    if (typeof wrap === 'boolean') return wrap ? 'wrap' : 'nowrap';
    if (!wrap) return;
    return Object.keys(wrap).reduce(function (acc, key) {
      var value = wrap[key];
      acc[key] = value ? 'wrap' : 'nowrap';
      return acc;
    }, {});
  }, [wrap]);
  var flexWrap = useCSSProperty({
    value: wrapValue
  });
  var propArray = useMemo(function () {
    var properties = [];
    if (flexGap) properties.push({
      name: 'gap',
      value: flexGap
    });
    if (justifyContent) properties.push({
      name: 'justify',
      value: justifyContent
    });
    if (alignItems) properties.push({
      name: 'align',
      value: alignItems
    });
    if (flexWrap) properties.push({
      name: 'wrap',
      value: flexWrap
    });
    return properties;
  }, [alignItems, flexGap, flexWrap, justifyContent]);
  var _useGenerateProperty = useGenerateProperty({
      props: propArray,
      name: 'flexLayout',
      styles: styles
    }),
    mediaStyles = _useGenerateProperty.mediaStyles,
    vars = _useGenerateProperty.vars;
  return /*#__PURE__*/React__default.createElement(Component, _extends({
    ref: ref,
    className: cn(styles.flexLayout, mediaStyles, className),
    style: vars
  }, props), children);
};
var FlexLayout = /*#__PURE__*/forwardRef(FlexComponent);

export { FlexLayout };