@jetbrains/ring-ui 7.0.105 → 7.0.106

package/components/grid/col.d.ts

@@ -1,6 +1,6 @@
-import { Component, type ReactNode } from 'react';
-export interface ColProps {
-    children?: ReactNode;
+import { Component, type HTMLAttributes } from 'react';
+export interface ColProps extends HTMLAttributes<HTMLDivElement> {
+    'data-test'?: string | null | undefined;
     xs?: boolean | number | null | undefined;
     sm?: boolean | number | null | undefined;
     md?: boolean | number | null | undefined;
@@ -10,7 +10,6 @@ export interface ColProps {
     mdOffset?: number | null | undefined;
     lgOffset?: number | null | undefined;
     reverse?: boolean | null | undefined;
-    className?: string | null | undefined;
 }
 export default class Col extends Component<ColProps> {
     render(): import("react").JSX.Element;

package/components/grid/col.js

@@ -1,5 +1,6 @@
 import { Component } from 'react';
 import classNames from 'classnames';
+import dataTests from '../global/data-tests';
 import styles from './grid.css';
 const classMap = {
     xs: 'col-xs',
@@ -18,16 +19,16 @@ const classMap = {
  */
 function getClassNames(props) {
     return Object.entries(props)
-        .filter(([key]) => classMap[key])
+        .filter(([key, value]) => classMap[key] && value != null)
         .map(([key, value]) => styles[Number.isInteger(value) ? `${classMap[key]}-${value}` : classMap[key]]);
 }
 export default class Col extends Component {
     render() {
-        const { children, className, reverse, ...restProps } = this.props;
-        const classes = classNames(styles.col, className, getClassNames(restProps), {
+        const { children, className, 'data-test': dataTest, reverse, xs, sm, md, lg, xsOffset, smOffset, mdOffset, lgOffset, ...restProps } = this.props;
+        const classes = classNames(styles.col, className, getClassNames({ xs, sm, md, lg, xsOffset, smOffset, mdOffset, lgOffset }), {
             [styles.reverse]: reverse,
         });
-        return (<div className={classes} data-test='ring-grid-column'>
+        return (<div {...restProps} className={classes} data-test={dataTests('ring-grid-column', dataTest)}>
         {children}
       </div>);
     }

package/components/grid/grid.d.ts

@@ -1,9 +1,12 @@
 import { Component, type HTMLAttributes } from 'react';
+export interface GridProps extends HTMLAttributes<HTMLDivElement> {
+    'data-test'?: string | null | undefined;
+}
 /**
  * @name Grid
  * @deprecated Will be removed in Ring UI 8.0. Use flexbox or another layout library instead.
  */
-export declare class Grid extends Component<HTMLAttributes<HTMLDivElement>> {
+export declare class Grid extends Component<GridProps> {
     render(): import("react").JSX.Element;
 }
 export { default as Row } from './row';

package/components/grid/grid.js

@@ -1,5 +1,6 @@
 import { Component } from 'react';
 import classNames from 'classnames';
+import dataTests from '../global/data-tests';
 import styles from './grid.css';
 /**
  * @name Grid
@@ -7,9 +8,9 @@ import styles from './grid.css';
  */
 export class Grid extends Component {
     render() {
-        const { children, className, ...restProps } = this.props;
+        const { children, className, 'data-test': dataTest, ...restProps } = this.props;
         const classes = classNames(styles['container-fluid'], className);
-        return (<div data-test='ring-grid' {...restProps} className={classes}>
+        return (<div data-test={dataTests('ring-grid', dataTest)} {...restProps} className={classes}>
         {children}
       </div>);
     }

package/components/grid/row.d.ts

@@ -1,7 +1,7 @@
-import { Component, type ReactNode } from 'react';
+import { Component, type HTMLAttributes } from 'react';
 type ModifierType = 'xs' | 'sm' | 'md' | 'lg';
-export interface RowProps {
-    children?: ReactNode;
+export interface RowProps extends HTMLAttributes<HTMLDivElement> {
+    'data-test'?: string | null | undefined;
     reverse?: boolean | null | undefined;
     start?: ModifierType | null | undefined;
     center?: ModifierType | null | undefined;
@@ -14,7 +14,6 @@ export interface RowProps {
     between?: ModifierType | null | undefined;
     first?: ModifierType | null | undefined;
     last?: ModifierType | null | undefined;
-    className?: string | null | undefined;
 }
 export default class Row extends Component<RowProps> {
     render(): import("react").JSX.Element;

package/components/grid/row.js

@@ -1,5 +1,6 @@
 import { Component } from 'react';
 import classNames from 'classnames';
+import dataTests from '../global/data-tests';
 import styles from './grid.css';
 const modifierKeys = [
     'start',
@@ -29,11 +30,11 @@ function getModifierClassNames(props) {
 }
 export default class Row extends Component {
     render() {
-        const { children, className, reverse, ...restProps } = this.props;
-        const classes = classNames(className, styles.row, getModifierClassNames(restProps), {
+        const { children, className, 'data-test': dataTest, reverse, start, center, end, top, middle, baseline, bottom, around, between, first, last, ...restProps } = this.props;
+        const classes = classNames(className, styles.row, getModifierClassNames({ start, center, end, top, middle, baseline, bottom, around, between, first, last }), {
             [styles.reverse]: reverse,
         });
-        return (<div className={classes} data-test='ring-grid-row'>
+        return (<div {...restProps} className={classes} data-test={dataTests('ring-grid-row', dataTest)}>
         {children}
       </div>);
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jetbrains/ring-ui",
-  "version": "7.0.105",
+  "version": "7.0.106",
   "description": "JetBrains UI library",
   "author": {
     "name": "JetBrains"