@jetbrains/ring-ui 8.0.0-beta.1 → 8.0.0-beta.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jetbrains/ring-ui",
-  "version": "8.0.0-beta.1",
+  "version": "8.0.0-beta.11",
   "description": "JetBrains UI library",
   "author": {
     "name": "JetBrains"
@@ -99,29 +99,29 @@
   },
   "readmeFilename": "README.md",
   "devDependencies": {
-    "@babel/cli": "^7.28.6",
-    "@babel/eslint-parser": "^7.28.6",
+    "@babel/cli": "^8.0.1",
+    "@babel/eslint-parser": "^7.29.7",
     "@csstools/css-parser-algorithms": "^4.0.0",
     "@csstools/stylelint-no-at-nest-rule": "^5.0.0",
     "@eslint/compat": "^2.1.0",
     "@eslint/eslintrc": "^3.3.5",
     "@eslint/js": "^10.0.1",
-    "@figma/code-connect": "^1.4.5",
+    "@figma/code-connect": "^1.4.8",
     "@jetbrains/eslint-config": "^6.0.5",
     "@jetbrains/logos": "3.0.0-canary.734b213.0",
     "@jetbrains/rollup-css-plugin": "./packages/rollup-css-plugin",
     "@jetbrains/stylelint-config": "^4.0.2",
     "@jetbrains/typescript-plugin-css-modules": "^5.3.1",
-    "@primer/octicons": "^19.27.0",
-    "@rollup/plugin-babel": "^7.0.0",
+    "@primer/octicons": "^19.28.1",
+    "@rollup/plugin-babel": "^7.1.0",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^16.0.3",
     "@rollup/plugin-replace": "^6.0.3",
-    "@storybook/addon-a11y": "10.4.1",
-    "@storybook/addon-docs": "^10.4.1",
-    "@storybook/addon-themes": "^10.4.1",
+    "@storybook/addon-a11y": "10.4.6",
+    "@storybook/addon-docs": "10.4.6",
+    "@storybook/addon-themes": "10.4.6",
     "@storybook/csf": "^0.1.13",
-    "@storybook/react-webpack5": "10.4.1",
+    "@storybook/react-webpack5": "10.4.6",
     "@storybook/test-runner": "^0.24.4",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.3.2",
@@ -129,36 +129,36 @@
     "@types/chai-as-promised": "^8.0.2",
     "@types/chai-dom": "1.11.3",
     "@types/markdown-it": "^14.1.2",
-    "@types/react": "^19.2.15",
+    "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
     "@types/webpack-env": "^1.18.8",
-    "@vitejs/plugin-react": "^6.0.2",
-    "@vitest/eslint-plugin": "^1.6.17",
-    "acorn": "^8.16.0",
+    "@vitejs/plugin-react": "^6.0.3",
+    "@vitest/eslint-plugin": "^1.6.20",
+    "acorn": "^8.17.0",
     "babel-plugin-require-context-hook": "^1.0.0",
-    "caniuse-lite": "^1.0.30001793",
+    "caniuse-lite": "^1.0.30001799",
     "chai-as-promised": "^8.0.2",
     "chai-dom": "^1.12.1",
     "cheerio": "^1.2.0",
     "core-js": "^3.49.0",
     "cpy-cli": "^7.0.0",
     "dotenv-cli": "^11.0.0",
-    "eslint": "^9.39.2",
+    "eslint": "^9.39.4",
     "eslint-config-prettier": "^10.1.8",
     "eslint-formatter-jslint-xml": "^9.0.1",
     "eslint-import-resolver-exports": "^1.0.0-beta.5",
-    "eslint-import-resolver-typescript": "^4.4.4",
+    "eslint-import-resolver-typescript": "^4.4.5",
     "eslint-import-resolver-webpack": "^0.13.11",
     "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
-    "eslint-plugin-prettier": "^5.5.5",
+    "eslint-plugin-prettier": "^5.5.6",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^7.1.1",
-    "eslint-plugin-storybook": "^10.4.1",
-    "eslint-plugin-unicorn": "^64.0.0",
+    "eslint-plugin-storybook": "^10.4.6",
+    "eslint-plugin-unicorn": "^70.0.0",
     "events": "^3.3.0",
     "glob": "^13.0.6",
-    "globals": "^17.6.0",
+    "globals": "^17.7.0",
     "html-webpack-plugin": "^5.6.7",
     "http-server": "^14.1.1",
     "husky": "^9.1.7",
@@ -166,41 +166,41 @@
     "jest": "~30.4.2",
     "jest-environment-jsdom": "^30.4.1",
     "jest-teamcity": "^1.12.0",
-    "lint-staged": "^17.0.5",
+    "lint-staged": "^17.0.8",
     "markdown-it": "^14.2.0",
     "merge-options": "^3.0.4",
     "pinst": "^3.0.0",
-    "prettier": "^3.8.3",
+    "prettier": "^3.9.4",
     "raw-loader": "^4.0.2",
-    "react": "^19.2.6",
-    "react-dom": "^19.2.6",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
     "regenerator-runtime": "^0.14.1",
     "rimraf": "^6.1.3",
-    "rollup": "^4.60.4",
+    "rollup": "^4.62.2",
     "rollup-plugin-clear": "^2.0.7",
     "storage-mock": "^2.1.0",
-    "storybook": "10.4.1",
-    "stylelint": "^17.12.0",
+    "storybook": "10.4.6",
+    "stylelint": "^17.14.0",
     "stylelint-config-sass-guidelines": "^13.0.0",
     "svg-inline-loader": "^0.8.2",
     "teamcity-service-messages": "^0.1.14",
-    "terser-webpack-plugin": "^5.6.0",
+    "terser-webpack-plugin": "^5.6.1",
     "typed-css-modules": "^0.9.1",
     "typescript": "~6.0.3",
-    "typescript-eslint": "^8.60.0",
-    "vite": "^8.0.14",
-    "vitest": "^4.1.7",
+    "typescript-eslint": "^8.62.1",
+    "vite": "^8.1.0",
+    "vitest": "^4.1.9",
     "vitest-teamcity-reporter": "^0.4.1",
-    "webpack": "^5.107.1",
-    "webpack-cli": "^7.0.2",
+    "webpack": "^5.108.1",
+    "webpack-cli": "^7.1.0",
     "xmlappend": "^1.0.4"
   },
   "peerDependencies": {
-    "@types/react": ">=18.0.0",
-    "@types/react-dom": ">=18.0.0",
+    "@types/react": ">=19.2.0",
+    "@types/react-dom": ">=19.2.0",
     "core-js": ">=3.0.0",
-    "react": ">=18.0.0",
-    "react-dom": ">=18.0.0",
+    "react": ">=19.2.0",
+    "react-dom": ">=19.2.0",
     "webpack": ">=5.0.0"
   },
   "peerDependenciesMeta": {
@@ -215,10 +215,10 @@
     }
   },
   "dependencies": {
-    "@babel/core": "^7.29.0",
-    "@babel/preset-typescript": "^7.28.5",
+    "@babel/core": "^7.29.7",
+    "@babel/preset-typescript": "^8.0.1",
     "@jetbrains/babel-preset-jetbrains": "^2.4.0",
-    "@jetbrains/icons": "^5.22.0",
+    "@jetbrains/icons": "^5.23.3",
     "@jetbrains/postcss-require-hover": "^0.2.0",
     "@types/combokeys": "^2.4.9",
     "@types/element-resize-detector": "^1.1.6",
@@ -226,32 +226,29 @@
     "@types/util-deprecate": "^1.0.4",
     "babel-loader": "10.1.1",
     "babel-plugin-react-compiler": "^1.0.0",
-    "babel-plugin-transform-define": "^2.1.4",
-    "browserslist": "^4.28.2",
     "change-case": "^4.1.1",
     "classnames": "^2.5.1",
     "combokeys": "^3.0.1",
     "css-loader": "^7.1.4",
     "csstype": "^3.2.1",
-    "date-fns": "^4.3.0",
+    "date-fns": "^4.4.0",
     "dequal": "^2.0.3",
     "element-resize-detector": "^1.2.4",
     "fastdom": "^1.0.12",
     "file-loader": "^6.2.0",
-    "focus-trap": "^8.2.1",
+    "focus-trap": "^8.2.2",
     "highlight.js": "^10.7.2",
     "just-debounce-it": "^3.2.0",
     "memoize-one": "^6.0.0",
-    "postcss": "^8.5.15",
-    "postcss-calc": "^10.1.1",
+    "postcss": "^8.5.25",
+    "postcss-calc": "^11.0.1",
     "postcss-font-family-system-ui": "^5.0.0",
     "postcss-loader": "^8.2.1",
     "postcss-modules-values-replace": "^4.2.2",
-    "postcss-preset-env": "^11.3.0",
+    "postcss-preset-env": "^11.3.1",
     "react-compiler-runtime": "^1.0.0",
     "react-movable": "^3.4.1",
     "react-virtualized": "^9.22.6",
-    "react-waypoint": "^10.3.0",
     "scrollbar-width": "^3.1.1",
     "simply-uuid": "^1.0.1",
     "sniffr": "^1.4.0",
@@ -261,7 +258,7 @@
     "util-deprecate": "^1.0.2"
   },
   "engines": {
-    "node": ">=14.0",
+    "node": "^22.22.3 || ^24.15 || >=26.0",
     "npm": ">=6.0.0"
   },
   "bugs": {

package/components/content-layout/content-layout.css

@@ -1,109 +0,0 @@
-@import '../global/variables.css';
-
-@value extra-small-screen-media, small-screen-media from '../global/global.css';
-
-.contentLayout {
-  --ring-content-layout-sidebar-width: calc(var(--ring-unit) * 30);
-
-  position: relative;
-
-  display: flex;
-  flex-flow: row nowrap;
-}
-
-.contentLayoutContent {
-  align-self: flex-start;
-  flex-grow: 2;
-
-  width: 100%; /* without this hack IE11 render contentLayoutContent wider than its container */
-  margin: 0 calc(var(--ring-unit) * 4);
-}
-
-.sidebarContainer {
-  min-width: var(--ring-content-layout-sidebar-width);
-  max-width: var(--ring-content-layout-sidebar-width);
-}
-
-.sidebarContainerRight {
-  order: 1;
-}
-
-.sidebar {
-  overflow: auto;
-
-  box-sizing: border-box;
-  min-width: var(--ring-content-layout-sidebar-width);
-  max-width: var(--ring-content-layout-sidebar-width);
-  height: 100%;
-  padding-right: calc(var(--ring-unit) * 2);
-  padding-left: calc(var(--ring-unit) * 4);
-}
-
-.sidebarRight {
-  padding-right: calc(var(--ring-unit) * 4);
-  padding-left: calc(var(--ring-unit) * 2);
-}
-
-.sidebarFixedTop {
-  top: 0;
-  bottom: 0;
-
-  &.sidebarFixedTop {
-    position: fixed;
-  }
-}
-
-.sidebarFixedBottom.sidebarFixedBottom {
-  position: absolute;
-  top: auto;
-  bottom: 0;
-}
-
-.bottomMarker {
-  position: absolute;
-  bottom: 0;
-}
-
-.contentLayoutResponsive {
-  @media extra-small-screen-media, small-screen-media {
-    & .contentLayoutContent {
-      margin: 0 16px;
-    }
-
-    & .sidebar {
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      left: 0;
-
-      box-sizing: content-box;
-      padding: 0 16px;
-    }
-
-    & .sidebarFixedTop {
-      position: fixed;
-    }
-
-    & .sidebarFixedBottom {
-      top: auto;
-    }
-
-    & .sidebarRight {
-      right: 0;
-      left: auto;
-    }
-
-    & .sidebarContainer {
-      min-width: 0;
-      max-width: 0;
-    }
-  }
-
-  @media extra-small-screen-media {
-    & .sidebar {
-      width: 80%;
-      min-width: 0;
-      max-width: none;
-    }
-  }
-}

package/components/content-layout/content-layout.d.ts

@@ -1,20 +0,0 @@
-import { Component, type HTMLAttributes } from 'react';
-export interface ContentLayoutProps extends HTMLAttributes<HTMLElement> {
-    responsive: boolean;
-    contentClassName?: string | null | undefined;
-}
-/**
- * @name Content Layout
- * @deprecated Will be removed in Ring UI 8.0.
- */
-export default class ContentLayout extends Component<ContentLayoutProps> {
-    static defaultProps: {
-        responsive: boolean;
-    };
-    state: {
-        contentNode: null;
-    };
-    saveContentNode: (contentNode: HTMLElement | null) => void;
-    render(): import("react").JSX.Element;
-}
-export { default as Sidebar } from './sidebar';

package/components/content-layout/content-layout.js

@@ -1,40 +0,0 @@
-import { Children, cloneElement, Component } from 'react';
-import classNames from 'classnames';
-import Sidebar from './sidebar';
-import styles from './content-layout.css';
-/**
- * @name Content Layout
- * @deprecated Will be removed in Ring UI 8.0.
- */
-export default class ContentLayout extends Component {
-    static defaultProps = {
-        responsive: true,
-    };
-    state = {
-        contentNode: null,
-    };
-    saveContentNode = (contentNode) => {
-        this.setState({ contentNode });
-    };
-    render() {
-        const { children, className, contentClassName, responsive, ...restProps } = this.props;
-        const classes = classNames(styles.contentLayout, className, {
-            [styles.contentLayoutResponsive]: responsive,
-        });
-        const contentClasses = classNames(styles.contentLayoutContent, contentClassName);
-        const childrenArray = Children.toArray(children);
-        const sidebarChild = childrenArray.filter((child) => !!child && typeof child === 'object' && 'type' in child && child.type === Sidebar)[0];
-        const sidebar = sidebarChild &&
-            cloneElement(sidebarChild, {
-                contentNode: this.state.contentNode,
-            });
-        const contentChildren = childrenArray.filter(child => child !== sidebarChild);
-        return (<div data-test='content-layout' {...restProps} className={classes}>
-        {sidebar}
-        <main className={contentClasses} ref={this.saveContentNode}>
-          {contentChildren}
-        </main>
-      </div>);
-    }
-}
-export { default as Sidebar } from './sidebar';

package/components/content-layout/sidebar.d.ts

@@ -1,26 +0,0 @@
-import { Component, type HTMLAttributes } from 'react';
-import { Waypoint } from 'react-waypoint';
-export interface SidebarProps extends HTMLAttributes<HTMLElement> {
-    right?: boolean | null | undefined;
-    containerClassName?: string | null | undefined;
-    fixedClassName?: string | null | undefined;
-    contentNode?: HTMLElement | null | undefined;
-}
-/**
- * @name Sidebar
- * @deprecated Will be removed in Ring UI 8.0.
- */
-export default class Sidebar extends Component<SidebarProps> {
-    state: {
-        topIsOutside: boolean;
-        bottomIsOutside: boolean;
-        sidebarVisibleHeight: undefined;
-    };
-    sidebarNode?: HTMLElement | null;
-    handleTopWaypoint: ({ currentPosition }: Waypoint.CallbackArgs) => void;
-    handleBottomWaypoint: ({ currentPosition, waypointTop }: Waypoint.CallbackArgs) => void;
-    shouldUseFixation(): boolean;
-    shouldFixateBottom(): boolean;
-    sidebarRef: (node: HTMLElement | null) => void;
-    render(): import("react").JSX.Element;
-}

package/components/content-layout/sidebar.js

@@ -1,71 +0,0 @@
-import { Component } from 'react';
-import classNames from 'classnames';
-import { Waypoint } from 'react-waypoint';
-import styles from './content-layout.css';
-const ABOVE = 'above';
-const INSIDE = 'inside';
-/**
- * @name Sidebar
- * @deprecated Will be removed in Ring UI 8.0.
- */
-export default class Sidebar extends Component {
-    state = {
-        topIsOutside: true,
-        bottomIsOutside: true,
-        sidebarVisibleHeight: undefined,
-    };
-    sidebarNode;
-    handleTopWaypoint = ({ currentPosition }) => {
-        this.setState({ topIsOutside: currentPosition === ABOVE });
-    };
-    handleBottomWaypoint = ({ currentPosition, waypointTop }) => {
-        this.setState({
-            sidebarVisibleHeight: waypointTop,
-            bottomIsOutside: currentPosition !== INSIDE,
-        });
-    };
-    shouldUseFixation() {
-        const { contentNode } = this.props;
-        const { sidebarNode } = this;
-        if (!contentNode || !sidebarNode) {
-            return false;
-        }
-        return contentNode.offsetHeight >= sidebarNode.offsetHeight;
-    }
-    shouldFixateBottom() {
-        const { topIsOutside, bottomIsOutside } = this.state;
-        return !bottomIsOutside && topIsOutside && this.shouldUseFixation();
-    }
-    sidebarRef = (node) => {
-        this.sidebarNode = node;
-    };
-    render() {
-        const { right, children, className, containerClassName, fixedClassName, contentNode, ...restProps } = this.props;
-        const { topIsOutside, bottomIsOutside, sidebarVisibleHeight } = this.state;
-        const shouldFixateTop = bottomIsOutside && topIsOutside && this.shouldUseFixation();
-        const shouldFixateBottom = this.shouldFixateBottom();
-        const containerClasses = classNames(styles.sidebarContainer, containerClassName, {
-            [styles.sidebarContainerRight]: right,
-        });
-        const classes = classNames(styles.sidebar, className, {
-            [styles.sidebarRight]: right,
-            [styles.sidebarFixedTop]: shouldFixateTop,
-            [styles.sidebarFixedBottom]: shouldFixateBottom,
-            [fixedClassName ?? '']: shouldFixateTop || shouldFixateBottom,
-        });
-        const style = {
-            maxHeight: shouldFixateBottom && sidebarVisibleHeight ? `${sidebarVisibleHeight}px` : undefined,
-        };
-        return (<aside className={containerClasses} ref={this.sidebarRef}>
-        <Waypoint onEnter={this.handleTopWaypoint} onLeave={this.handleTopWaypoint}/>
-
-        <div {...restProps} style={style} className={classes}>
-          {children}
-        </div>
-
-        <div className={styles.bottomMarker}>
-          <Waypoint onEnter={this.handleBottomWaypoint} onLeave={this.handleBottomWaypoint}/>
-        </div>
-      </aside>);
-    }
-}

package/components/date-picker/use-intersection-observer.d.ts

@@ -1,6 +0,0 @@
-import { type RefObject } from 'react';
-export declare function useIntersectionObserver(containerRef: RefObject<HTMLElement | null>, scrollMargin?: number): IntersectionObserverHandle | null;
-export interface IntersectionObserverHandle {
-    observeVisibility(element: Element, setVisible: (isVisible: boolean) => void): () => void;
-}
-export declare function useVisibility(handle: IntersectionObserverHandle | null, elementRef: RefObject<Element | null>): boolean;

package/components/date-picker/use-intersection-observer.js

@@ -1,48 +0,0 @@
-import { useEffect, useState } from 'react';
-export function useIntersectionObserver(containerRef, scrollMargin = 0) {
-    const [handle, setHandle] = useState(null);
-    useEffect(() => {
-        const container = containerRef.current;
-        if (!container)
-            return;
-        const elementToSetVisible = new Map();
-        const observer = new IntersectionObserver(entries => {
-            for (const entry of entries) {
-                const setVisible = elementToSetVisible.get(entry.target);
-                setVisible?.(entry.isIntersecting);
-            }
-        }, {
-            root: container,
-            ...(scrollMargin
-                ? {
-                    scrollMargin: `${scrollMargin}px`,
-                }
-                : {}),
-        });
-        setHandle({
-            observeVisibility(element, setVisible) {
-                elementToSetVisible.set(element, setVisible);
-                observer.observe(element);
-                return () => {
-                    elementToSetVisible.delete(element);
-                    observer.unobserve(element);
-                };
-            },
-        });
-        return () => {
-            observer.disconnect();
-            setHandle(null);
-        };
-    }, [containerRef, scrollMargin]);
-    return handle;
-}
-export function useVisibility(handle, elementRef) {
-    const [isVisible, setIsVisible] = useState(false);
-    useEffect(() => {
-        const element = elementRef.current;
-        if (!element || !handle)
-            return;
-        return handle.observeVisibility(element, setIsVisible);
-    }, [handle, elementRef, setIsVisible]);
-    return isVisible;
-}

package/components/expand/collapsible-group.d.ts

@@ -1,16 +0,0 @@
-import React from 'react';
-export interface CollapsibleGroupProps {
-    avatar?: React.ReactNode;
-    title: React.ReactNode;
-    subtitle?: React.ReactNode;
-    children?: React.ReactNode;
-    className?: string | null | undefined;
-    defaultExpanded?: boolean;
-    expanded?: boolean | null | undefined;
-    onChange?: (expanded: boolean) => void;
-    disableAnimation?: boolean;
-    interactive?: boolean;
-    'data-test'?: string | null | undefined;
-}
-declare const CollapsibleGroup: React.ForwardRefExoticComponent<CollapsibleGroupProps & React.RefAttributes<HTMLDivElement>>;
-export default CollapsibleGroup;

package/components/global/composeRefs.d.ts

@@ -1,6 +0,0 @@
-import { createComposedRef as _createComposedRef } from './compose-refs';
-/**
- * @deprecated Use createComposedRef from './compose-refs' instead
- */
-declare const createComposedRef: typeof _createComposedRef;
-export { createComposedRef };

package/components/global/composeRefs.js

@@ -1,7 +0,0 @@
-/* eslint-disable unicorn/filename-case */
-import { createComposedRef as _createComposedRef } from './compose-refs';
-/**
- * @deprecated Use createComposedRef from './compose-refs' instead
- */
-const createComposedRef = _createComposedRef;
-export { createComposedRef };

package/components/global/use-event-callback.d.ts

@@ -1 +0,0 @@
-export default function useEventCallback<I extends unknown[], O>(fn: (...args: I) => O): (...args: I) => O;

package/components/global/use-event-callback.js

@@ -1,15 +0,0 @@
-import { useCallback, useLayoutEffect, useRef } from 'react';
-// TODO deprecate in favor of useEffectEvent after dropping support for React < 19.2
-export default function useEventCallback(fn) {
-    const ref = useRef(null);
-    useLayoutEffect(() => {
-        ref.current = fn;
-    });
-    return useCallback((...args) => {
-        const { current } = ref;
-        if (current === null || current === undefined) {
-            throw new Error('callback created in useEventCallback can only be called from event handlers');
-        }
-        return current(...args);
-    }, []);
-}

package/components/grid/col.d.ts

@@ -1,16 +0,0 @@
-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;
-    lg?: boolean | number | null | undefined;
-    xsOffset?: number | null | undefined;
-    smOffset?: number | null | undefined;
-    mdOffset?: number | null | undefined;
-    lgOffset?: number | null | undefined;
-    reverse?: boolean | null | undefined;
-}
-export default class Col extends Component<ColProps> {
-    render(): import("react").JSX.Element;
-}

package/components/grid/col.js

@@ -1,35 +0,0 @@
-import { Component } from 'react';
-import classNames from 'classnames';
-import dataTests from '../global/data-tests';
-import styles from './grid.css';
-const classMap = {
-    xs: 'col-xs',
-    sm: 'col-sm',
-    md: 'col-md',
-    lg: 'col-lg',
-    xsOffset: 'col-xs-offset',
-    smOffset: 'col-sm-offset',
-    mdOffset: 'col-md-offset',
-    lgOffset: 'col-lg-offset',
-};
-/**
- * Converts props like "xs=9 xsOffset={2}" to classes "col-xs-9 col-xs-offset-2"
- * @param {Object} props incoming props
- * @mockReturnValue {Array} result classnames
- */
-function getClassNames(props) {
-    return Object.entries(props)
-        .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, '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 {...restProps} className={classes} data-test={dataTests('ring-grid-column', dataTest)}>
-        {children}
-      </div>);
-    }
-}