@greensight/gds/scss/cjs/components/FlexLayout/index.js

Greensight Design System

'use client';
var index = require('../../index-DpARvNVo.js');
var React = require('react');
var useGenerateProperty = require('../../useGenerateProperty-DHwkeN7J.js');
var scale = require('../../scale-CDrjtMXp.js');
var components_FlexLayout_helpers = require('./helpers.js');
var useTheme = require('../../useTheme-Cmzhs1Ba.js');
var components_FlexLayout_components_Item_index = require('./components/Item/index.js');
require('./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.scale(3) : _ref$gap,
    justify = _ref.justify,
    align = _ref.align,
    className = _ref.className,
    children = _ref.children,
    wrap = _ref.wrap,
    props = index._objectWithoutProperties(_ref, _excluded);
  var Component = ComponentProp || DEFAULT_COMPONENT;
  var _useScssTheme = useTheme.useScssTheme(),
    styles = _useScssTheme.components.flexLayout.index;
  var flexGap = useGenerateProperty.useCSSProperty({
    value: gap,
    transform: components_FlexLayout_helpers.gapTransform
  });
  var justifyContent = useGenerateProperty.useCSSProperty({
    value: justify
  });
  var alignItems = useGenerateProperty.useCSSProperty({
    value: align
  });
  var wrapValue = React.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 = useGenerateProperty.useCSSProperty({
    value: wrapValue
  });
  var propArray = React.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.useGenerateProperty({
      props: propArray,
      name: 'flexLayout',
      styles: styles
    }),
    mediaStyles = _useGenerateProperty.mediaStyles,
    vars = _useGenerateProperty.vars;
  return /*#__PURE__*/React.createElement(Component, index._extends({
    ref: ref,
    className: index.cn(styles.flexLayout, mediaStyles, className),
    style: vars
  }, props), children);
};
var FlexLayout = /*#__PURE__*/React.forwardRef(FlexComponent);

exports.FlexLayoutItem = components_FlexLayout_components_Item_index.FlexLayoutItem;
exports.FlexLayout = FlexLayout;