@ui5/webcomponents-react/dist/components/ResponsiveGridLayout/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 { classNames, styleData } from './ResponsiveGridLayout.module.css.js';
import { jsx as _jsx } from "react/jsx-runtime";
/**
 * The Responsive Grid Layout positions UI elements in a multi-column flow layout.
 * They can be configured to display a variable number of columns depending on available screen size.
 * With these controls, it is possible to achieve flexible layouts and line breaks for large, medium,
 * and small-sized screens, such as desktop, tablet, and mobile.
 *
 * @deprecated there are no design concepts regarding this component outside a `Form`.
 * As the `Form` is now a UI5 web component which implements wrapping behavior on its own, this component is not needed anymore and will be removed in the next major version.
 *
 * @since 0.16.4
 */
const ResponsiveGridLayout = /*#__PURE__*/forwardRef((props, ref) => {
  const {
    children,
    columnGap = '0.5rem',
    rowGap = '0.5rem',
    columnsS = 4,
    columnsM = 8,
    columnsL = 12,
    columnsXL = 16,
    columnSpanS = 1,
    columnSpanM = 1,
    columnSpanL = 1,
    columnSpanXL = 1,
    style,
    className,
    ...rest
  } = props;
  useStylesheet(styleData, ResponsiveGridLayout.displayName);
  const finalClassNames = clsx(classNames.container, className);
  return /*#__PURE__*/_jsx("div", {
    ref: ref,
    className: finalClassNames,
    style: {
      rowGap: rowGap,
      columnGap: columnGap,
      '--_ui5wcr-rgl-columns-s': columnsS,
      '--_ui5wcr-rgl-columns-m': columnsM,
      '--_ui5wcr-rgl-columns-l': columnsL,
      '--_ui5wcr-rgl-columns-xl': columnsXL,
      '--_ui5wcr-rgl-column-span-s': columnSpanS,
      '--_ui5wcr-rgl-column-span-m': columnSpanM,
      '--_ui5wcr-rgl-column-span-l': columnSpanL,
      '--_ui5wcr-rgl-column-span-xl': columnSpanXL,
      ...style
    },
    ...rest,
    children: children
  });
});
ResponsiveGridLayout.displayName = 'ResponsiveGridLayout';
export { ResponsiveGridLayout };