@ui5/webcomponents-react/wrappers/components/FlexBox/index.js

React Wrapper for UI5 Web Components and additional components

'use client';

import { useStylesheet } from '@ui5/webcomponents-react-base';
import { clsx } from 'clsx';
import { forwardRef } from 'react';
import { FlexBoxAlignItems } from '../../enums/FlexBoxAlignItems.js';
import { FlexBoxDirection } from '../../enums/FlexBoxDirection.js';
import { FlexBoxJustifyContent } from '../../enums/FlexBoxJustifyContent.js';
import { FlexBoxWrap } from '../../enums/FlexBoxWrap.js';
import { classNames, styleData } from './FlexBox.module.css.js';
import { jsx as _jsx } from "react/jsx-runtime";
/**
 * The `FlexBox` builds the container for a flexible box layout by leveraging the CSS flexbox layout.
 *
 * __Note:__ Since `FlexBox` is purely a layout component, it does not have any associated global design specifications.
 */
const FlexBox = /*#__PURE__*/forwardRef((props, ref) => {
  const {
    children,
    justifyContent = FlexBoxJustifyContent.Start,
    direction = FlexBoxDirection.Row,
    alignItems = FlexBoxAlignItems.Stretch,
    displayInline,
    wrap = FlexBoxWrap.NoWrap,
    className,
    fitContainer,
    gap,
    as = 'div',
    style,
    ...rest
  } = props;
  useStylesheet(styleData, FlexBox.displayName);
  const flexBoxClasses = clsx(classNames.flexBox, classNames[`flexBoxDirection${direction}`], classNames[`justifyContent${justifyContent}`], classNames[`alignItems${alignItems}`], classNames[`flexWrap${wrap}`], displayInline && classNames.flexBoxDisplayInline, fitContainer && classNames.fitContainer, className);
  const CustomTag = as;
  return /*#__PURE__*/_jsx(CustomTag, {
    ref: ref,
    className: flexBoxClasses,
    style: {
      gap,
      ...style
    },
    ...rest,
    children: children
  });
});
FlexBox.displayName = 'FlexBox';
export { FlexBox };