@jetbrains/ring-ui 7.0.74 → 7.0.75

package/babel.config.js

@@ -9,6 +9,7 @@ module.exports = function config(api) {
         'babel-plugin-react-compiler',
         {
           target: '18', // should be the minimal supported version from peerDependencies
+          panicThreshold: 'all_errors',
         },
       ],
       [

package/components/banner/banner.jsx

@@ -10,9 +10,10 @@ import Link from '../link/link';
 import Tooltip from '../tooltip/tooltip';
 import styles from './banner.css';
 export function Banner(props) {
-    const { title, children, mode = 'info', withIcon = false, inline = false, onClose, closeButtonTitle, className, ['data-test']: dataTest, translations = {
+    const { title, children, mode = 'info', withIcon = false, inline = false, onClose, closeButtonTitle, className, translations = {
         close: 'Close',
     }, } = props;
+    const dataTest = props['data-test'];
     let icon = infoIcon;
     if (mode === 'error') {
         icon = exceptionIcon;

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

@@ -5,6 +5,7 @@ export interface ContentLayoutProps extends HTMLAttributes<HTMLElement> {
 }
 /**
  * @name Content Layout
+ * @deprecated Will be removed in Ring UI 8.0.
  */
 export default class ContentLayout extends Component<ContentLayoutProps> {
     static defaultProps: {

package/components/content-layout/content-layout.jsx

@@ -4,6 +4,7 @@ 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 = {

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

@@ -6,6 +6,10 @@ export interface SidebarProps extends HTMLAttributes<HTMLElement> {
     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;

package/components/content-layout/sidebar.jsx

@@ -4,6 +4,10 @@ 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,

package/components/date-picker/consts.d.ts

@@ -59,7 +59,7 @@ export interface DatePopupState {
     active: Field;
     text: string | null;
     hoverDate: Date | null;
-    scrollDate: number | null;
+    scrollDate: number | Date | null;
 }
 export interface DatePopupBaseProps {
     date?: Date | number | string | null | undefined;

package/components/date-picker/date-popup.jsx

@@ -35,13 +35,14 @@ export default class DatePopup extends Component {
         if (!range) {
             const parsedDate = this.parse(props.date, 'date');
             const active = withTime && parsedDate && !props.time ? 'time' : 'date';
-            this.state = { ...defaultState, active };
-        }
-        else if (props.from && !props.to) {
-            this.state = { ...defaultState, active: 'to' };
+            this.state = { ...defaultState, active, scrollDate: parsedDate };
         }
         else {
-            this.state = { ...defaultState, active: 'from' };
+            this.state = {
+                ...defaultState,
+                active: props.from && !props.to ? 'to' : 'from',
+                scrollDate: this.parse(props.from, 'from'),
+            };
         }
     }
     componentDidMount() {
@@ -245,7 +246,7 @@ export default class DatePopup extends Component {
     };
     // eslint-disable-next-line complexity
     render() {
-        const { range, withTime, locale } = this.props;
+        const { range, locale } = this.props;
         const { from, to, date, time, ...restProps } = this.props;
         const parsedDate = this.parse(this.props.date, 'date');
         const parsedTo = this.parse(this.props.to, 'to');
@@ -284,9 +285,7 @@ export default class DatePopup extends Component {
                     break;
             }
         }
-        const scrollDate = withTime && !range
-            ? this.state.scrollDate || dates.date || new Date()
-            : this.state.scrollDate || dates[this.state.active] || new Date();
+        const scrollDate = this.state.scrollDate || new Date();
         const calendarProps = {
             ...restProps,
             ...dates,

package/components/grid/grid.d.ts

@@ -1,6 +1,7 @@
 import { Component, type HTMLAttributes } from 'react';
 /**
  * @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>> {
     render(): import("react").JSX.Element;

package/components/grid/grid.jsx

@@ -3,6 +3,7 @@ import classNames from 'classnames';
 import styles from './grid.css';
 /**
  * @name Grid
+ * @deprecated Will be removed in Ring UI 8.0. Use flexbox or another layout library instead.
  */
 export class Grid extends Component {
     render() {

package/components/popup/popup.d.ts

@@ -94,6 +94,7 @@ export default class Popup<P extends BasePopupProps = PopupProps> extends PureCo
     parent?: HTMLElement | null;
     container?: HTMLElement | null;
     ringPopupTarget?: string | Element;
+    clickStartedInsidePopup: boolean;
     shouldUseShortcuts(): boolean;
     listeners: Listeners;
     redrawScheduler: (cb: () => void) => void;
@@ -136,8 +137,9 @@ export default class Popup<P extends BasePopupProps = PopupProps> extends PureCo
     isVisible(): boolean;
     _onCloseAttempt(evt?: Event | SyntheticEvent, isEsc?: boolean): void;
     private _onEscPress;
+    private _onDocumentPointerDown;
     /**
-     * @param {jQuery.Event} evt
+     * @param {MouseEvent} evt
      * @private
      */
     private _onDocumentClick;

package/components/popup/popup.jsx

@@ -41,7 +41,7 @@ const stop = (event) => {
         event.stopPropagation();
     }
 };
-export const getPopupContainer = (target) => (typeof target === 'string' ? document.querySelector(`[data-portaltarget=${target}]`) : target);
+export const getPopupContainer = (target) => typeof target === 'string' ? document.querySelector(`[data-portaltarget=${target}]`) : target;
 /**
  * @constructor
  * @name Popup
@@ -100,6 +100,7 @@ export default class Popup extends PureComponent {
     parent;
     container;
     ringPopupTarget;
+    clickStartedInsidePopup = false;
     shouldUseShortcuts() {
         const { shortcuts, hidden } = this.props;
         return shortcuts && !hidden;
@@ -239,7 +240,8 @@ export default class Popup extends PureComponent {
                         el = el.parentElement;
                     }
                 }
-                this.listeners.add(document, 'pointerdown', this._onDocumentClick, true);
+                this.listeners.add(document, 'pointerdown', this._onDocumentPointerDown, true);
+                this.listeners.add(document, 'click', this._onDocumentClick, true);
             }, 0);
             return;
         }
@@ -263,12 +265,20 @@ export default class Popup extends PureComponent {
         this.props.onEscPress(evt);
         this._onCloseAttempt(evt, true);
     };
+    _onDocumentPointerDown = (evt) => {
+        this.clickStartedInsidePopup = !!(evt.target instanceof Node &&
+            this.container &&
+            this.container.contains(evt.target));
+    };
     /**
-     * @param {jQuery.Event} evt
+     * @param {MouseEvent} evt
      * @private
      */
     _onDocumentClick = (evt) => {
+        const clickStartedInsidePopup = this.clickStartedInsidePopup;
+        this.clickStartedInsidePopup = false;
         if ((this.container && evt.target instanceof Node && this.container.contains(evt.target)) ||
+            clickStartedInsidePopup ||
             !this._listenersEnabled ||
             (this.props.dontCloseOnAnchorClick && evt.target instanceof Node && this._getAnchor()?.contains(evt.target)) ||
             // ignore clicks in shadow DOM, e.g., Grammarly suggestions

package/components/tabs/collapsible-tab.jsx

@@ -8,12 +8,9 @@ const TabTitle = React.memo(function TabTitle({ selected, child, handleSelect, c
         return child;
     }
     const { title, titleProps, disabled, href, className, activeClassName, collapsedClassName, collapsedActiveClassName } = child.props;
-    const titleClasses = classNames(styles.title, className, {
+    const titleClasses = classNames(styles.title, className, selected && activeClassName, collapsed && collapsedClassName, collapsed && selected && collapsedActiveClassName, {
         [styles.selected]: selected,
         [styles.collapsed]: collapsed,
-        [activeClassName ?? '']: selected,
-        [collapsedClassName ?? '']: collapsed,
-        [collapsedActiveClassName ?? '']: collapsed && selected,
     });
     return (<TabLink title={title} isSelected={selected} active href={href} className={titleClasses} disabled={disabled} onPlainLeftClick={handleSelect} tabIndex={tabIndex} collapsed={collapsed} {...titleProps}/>);
 });

package/components/upload/upload.jsx

@@ -3,7 +3,8 @@ import classNames from 'classnames';
 import attachmentIcon from '@jetbrains/icons/attachment';
 import Icon from '../icon';
 import styles from './upload.css';
-export const Upload = forwardRef(function Upload({ children, className, onFilesSelected, onFilesRejected, validate = () => true, variant = 'empty', multiple, renderIcon = () => <Icon className={styles.attachmentIcon} glyph={attachmentIcon}/>, accept, disabled, }, ref) {
+const defaultRenderIcon = () => <Icon className={styles.attachmentIcon} glyph={attachmentIcon}/>;
+export const Upload = forwardRef(function Upload({ children, className, onFilesSelected, onFilesRejected, validate = () => true, variant = 'empty', multiple, renderIcon = defaultRenderIcon, accept, disabled, }, ref) {
     const fileInputRef = useRef(null);
     const [dragOver, setDragOver] = useState(false);
     useImperativeHandle(ref, () => ({ openFilePicker: () => fileInputRef.current?.click() }), []);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jetbrains/ring-ui",
-  "version": "7.0.74",
+  "version": "7.0.75",
   "description": "JetBrains UI library",
   "author": {
     "name": "JetBrains"
@@ -93,31 +93,30 @@
     "@babel/eslint-parser": "^7.28.5",
     "@csstools/css-parser-algorithms": "^3.0.4",
     "@csstools/stylelint-no-at-nest-rule": "^4.0.0",
-    "@eslint/compat": "^1.4.0",
+    "@eslint/compat": "^1.4.1",
     "@eslint/eslintrc": "^3.2.0",
-    "@eslint/js": "^9.38.0",
-    "@figma/code-connect": "^1.3.7",
+    "@eslint/js": "^9.39.1",
+    "@figma/code-connect": "^1.3.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",
-    "@primer/octicons": "^19.19.0",
+    "@primer/octicons": "^19.20.0",
     "@rollup/plugin-babel": "^6.1.0",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^16.0.3",
-    "@rollup/plugin-replace": "^6.0.2",
-    "@storybook/addon-a11y": "9.1.15",
-    "@storybook/addon-docs": "^9.1.15",
-    "@storybook/addon-themes": "^9.1.15",
+    "@rollup/plugin-replace": "^6.0.3",
+    "@storybook/addon-a11y": "10.0.6",
+    "@storybook/addon-docs": "^10.0.6",
+    "@storybook/addon-themes": "^10.0.6",
     "@storybook/csf": "^0.1.13",
-    "@storybook/react-webpack5": "9.1.15",
-    "@storybook/test-runner": "^0.23.0",
+    "@storybook/react-webpack5": "10.0.6",
+    "@storybook/test-runner": "^0.24.1",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
     "@types/chai-as-promised": "^8.0.2",
     "@types/chai-dom": "1.11.3",
-    "@types/eslint__js": "^9.14.0",
     "@types/markdown-it": "^14.1.2",
     "@types/react": "^19.2.2",
     "@types/react-dom": "^19.2.2",
@@ -127,14 +126,14 @@
     "acorn": "^8.15.0",
     "babel-plugin-react-compiler": "^1.0.0",
     "babel-plugin-require-context-hook": "^1.0.0",
-    "caniuse-lite": "^1.0.30001751",
+    "caniuse-lite": "^1.0.30001754",
     "chai-as-promised": "^8.0.2",
     "chai-dom": "^1.12.1",
     "cheerio": "^1.1.2",
     "core-js": "^3.46.0",
     "cpy-cli": "^6.0.0",
-    "dotenv-cli": "^10.0.0",
-    "eslint": "^9.38.0",
+    "dotenv-cli": "^11.0.0",
+    "eslint": "^9.39.1",
     "eslint-config-prettier": "^10.1.8",
     "eslint-import-resolver-exports": "^1.0.0-beta.5",
     "eslint-import-resolver-typescript": "^4.4.4",
@@ -144,11 +143,11 @@
     "eslint-plugin-prettier": "^5.5.4",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^7.0.1",
-    "eslint-plugin-storybook": "^9.1.15",
+    "eslint-plugin-storybook": "^10.0.6",
     "eslint-plugin-unicorn": "^62.0.0",
     "events": "^3.3.0",
     "glob": "^11.0.3",
-    "globals": "^16.4.0",
+    "globals": "^16.5.0",
     "html-webpack-plugin": "^5.6.4",
     "http-server": "^14.1.1",
     "husky": "^9.1.7",
@@ -165,24 +164,22 @@
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "regenerator-runtime": "^0.14.1",
-    "rimraf": "^6.0.1",
-    "rollup": "^4.52.5",
+    "rimraf": "^6.1.0",
+    "rollup": "^4.53.1",
     "rollup-plugin-clear": "^2.0.7",
     "storage-mock": "^2.1.0",
-    "storybook": "9.1.15",
+    "storybook": "10.0.6",
     "stylelint": "^16.25.0",
     "stylelint-config-sass-guidelines": "^12.1.0",
     "svg-inline-loader": "^0.8.2",
     "teamcity-service-messages": "^0.1.14",
     "terser-webpack-plugin": "^5.3.14",
     "typescript": "~5.9.3",
-    "typescript-eslint": "^8.46.2",
+    "typescript-eslint": "^8.46.3",
     "vitest": "^3.2.4",
     "vitest-teamcity-reporter": "^0.3.1",
-    "wallaby-webpack": "^3.9.16",
     "webpack": "^5.102.1",
-    "webpack-cli": "^6.0.1",
-    "xmlappend": "^1.0.4"
+    "webpack-cli": "^6.0.1"
   },
   "peerDependencies": {
     "@types/react": ">=18.0.0",
@@ -226,7 +223,7 @@
     "element-resize-detector": "^1.2.4",
     "fastdom": "^1.0.12",
     "file-loader": "^6.2.0",
-    "focus-trap": "^7.6.5",
+    "focus-trap": "^7.6.6",
     "highlight.js": "^10.7.2",
     "just-debounce-it": "^3.2.0",
     "memoize-one": "^6.0.0",