@jetbrains/ring-ui 7.0.66 → 7.0.68

package/components/analytics/analytics-custom-plugin.js

@@ -51,7 +51,7 @@ export default class AnalyticsCustomPlugin {
     }
     _addDataToFlushingPack(sendingData) {
         this._data.push(sendingData);
-        if (this._flushMaxPackSize && this._data.length >= this._flushMaxPackSize) {
+        if (this._flushMaxPackSize !== undefined && this._data.length >= this._flushMaxPackSize) {
             this._flush?.();
         }
     }

package/components/auth/auth-core.js

@@ -745,7 +745,7 @@ class Auth {
         const scopes = scope ? scope.split(' ') : newState.scopes || defaultScope || [];
         const effectiveExpiresIn = expiresIn ? parseInt(expiresIn, 10) : defaultExpiresIn;
         const expires = TokenValidator._epoch() + effectiveExpiresIn;
-        if (accessToken) {
+        if (accessToken !== undefined) {
             await this._storage?.saveToken({ accessToken, scopes, expires, lifeTime: effectiveExpiresIn });
         }
         return newState;

package/components/auth/window-flow.js

@@ -58,9 +58,7 @@ export default class WindowFlow {
                     reject(new AuthResponseParser.AuthError(state));
                 }
             });
-            if (this._loginWindow === null ||
-                this._loginWindow === undefined ||
-                (this._loginWindow && this._loginWindow.closed)) {
+            if (!this._loginWindow || (this._loginWindow && this._loginWindow.closed)) {
                 this._loginWindow = this._openWindow(authRequest.url);
             }
             else if (this._loginWindow) {
@@ -82,7 +80,7 @@ export default class WindowFlow {
         clearTimeout(this._timeoutId);
     };
     stop() {
-        if (this._loginWindow !== null && this._loginWindow !== undefined) {
+        if (this._loginWindow) {
             this._loginWindow.close();
         }
         if (this.reject) {

package/components/data-list/data-list.js

@@ -45,7 +45,7 @@ class DataList extends PureComponent {
     onEqualPress = () => {
         const { selection, itemFormatter } = this.props;
         const focused = selection.getFocused();
-        if (!focused) {
+        if (focused === null || focused === undefined) {
             throw new Error('No focused item');
         }
         const item = itemFormatter(focused);

package/components/date-picker/date-picker.js

@@ -69,9 +69,7 @@ export default class DatePicker extends PureComponent {
     static contextType = I18nContext;
     handleChange = (change) => {
         const { onChange, withTime, applyTimeInput } = this.props;
-        const adjustedChange = withTime && !(change instanceof Date) && change?.date !== null && change?.date !== undefined
-            ? applyTimeInput(change.date, change.time)
-            : change;
+        const adjustedChange = withTime && !(change instanceof Date) && change?.date ? applyTimeInput(change.date, change.time) : change;
         onChange(adjustedChange);
     };
     clear = () => {
@@ -102,7 +100,7 @@ export default class DatePicker extends PureComponent {
     formatTime() {
         const { displayTimeFormat, locale } = this.props;
         const date = this.parse(this.props.date);
-        if (date !== null && date !== undefined) {
+        if (date) {
             return displayTimeFormat(date, locale);
         }
         return null;

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

@@ -11,7 +11,7 @@ export default class Day extends Component<DayProps> {
     isDay: (date: Date) => boolean;
     is: (name: "date" | "from" | "to" | "activeDate") => boolean;
     inRange: (range: [Date, Date] | null) => boolean | null;
-    isDisabled: (date: Date) => boolean | null;
+    isDisabled: (date: Date) => boolean;
     parse(text: string | null | undefined): Date | null;
     render(): import("react/jsx-runtime").JSX.Element;
 }

package/components/date-picker/day.js

@@ -36,7 +36,7 @@ export default class Day extends Component {
     isDisabled = (date) => {
         const min = this.parse(this.props.minDate);
         const max = this.parse(this.props.maxDate);
-        return (min && isBefore(startOfDay(date), startOfDay(min))) || (max && isAfter(startOfDay(date), startOfDay(max)));
+        return ((!!min && isBefore(startOfDay(date), startOfDay(min))) || (!!max && isAfter(startOfDay(date), startOfDay(max))));
     };
     parse(text) {
         return this.props.parseDateInput(text);
@@ -49,7 +49,7 @@ export default class Day extends Component {
             return range && [range[0], addDays(range[1], 1)];
         }
         const spreadRange = makeSpreadRange(currentRange);
-        const disabled = !!this.isDisabled(day);
+        const disabled = this.isDisabled(day);
         const activeSpreadRange = makeSpreadRange(activeRange);
         return (
         // TODO make keyboard navigation actually work

package/components/dialog/dialog.js

@@ -131,7 +131,7 @@ export default class Dialog extends PureComponent {
                 if (portalTarget instanceof HTMLElement) {
                     targetElement = portalTarget;
                 }
-                else if (contextTarget) {
+                else if (contextTarget !== undefined) {
                     const container = getPopupContainer(contextTarget);
                     if (container) {
                         targetElement = container;

package/components/loader/loader.css

@@ -1,5 +1,13 @@
 @import '../global/variables.css';
 
+/* stylelint-disable color-no-hex */
+:root {
+  --ring-loader-color-1: #3bea62;
+  --ring-loader-color-2: #6b57ff;
+  --ring-loader-color-3: #07c3f2;
+}
+/* stylelint-enable */
+
 @keyframes rotation-keyframes {
   100% {
     transform: rotate(360deg);
@@ -14,6 +22,147 @@
   pointer-events: none;
 }
 
+.squares {
+  position: relative;
+
+  width: 60px;
+  height: 60px;
+}
+
+@keyframes square-animation-main {
+  0% {
+    transform: rotate(0deg);
+    animation-timing-function: cubic-bezier(0.333, 0, 0, 1);
+  }
+
+  37.5% {
+    transform: rotate(182deg);
+    animation-timing-function: cubic-bezier(0.333, 0, 0.657, 1);
+  }
+
+  50% {
+    transform: rotate(180deg);
+    animation-timing-function: cubic-bezier(0.333, 0, 0, 1);
+  }
+
+  87.5% {
+    transform: rotate(362deg);
+    animation-timing-function: cubic-bezier(0.333, 0, 0.657, 1);
+  }
+
+  100% {
+    transform: rotate(360deg);
+    animation-timing-function: cubic-bezier(0.333, 0, 0, 1);
+  }
+}
+
+@keyframes square-animation-pseudo {
+  0% {
+    animation-timing-function: cubic-bezier(0.333, 0, 0, 1);
+
+    opacity: 0;
+  }
+
+  18.75% {
+    animation-timing-function: cubic-bezier(0.333, 0, 0.657, 1);
+
+    opacity: 1;
+  }
+
+  25% {
+    animation-timing-function: cubic-bezier(0.333, 0, 0, 1);
+
+    opacity: 1;
+  }
+
+  43.75% {
+    animation-timing-function: cubic-bezier(0.333, 0, 0.657, 1);
+
+    opacity: 0;
+  }
+
+  100% {
+    animation-timing-function: cubic-bezier(0.333, 0, 0, 1);
+
+    opacity: 0;
+  }
+}
+
+.square {
+  animation: square-animation-main 3.2s infinite;
+
+  background: var(--ring-loader-color-1);
+  mask-image: linear-gradient(to top, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
+
+  &,
+  &::before,
+  &::after {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+
+    border-radius: 20%;
+  }
+
+  &::before {
+    content: '';
+    animation: square-animation-pseudo 6.4s infinite;
+
+    opacity: 0;
+
+    background: var(--ring-loader-color-2);
+  }
+
+  &::after {
+    content: '';
+    animation: square-animation-pseudo 6.4s 3.2s infinite;
+
+    opacity: 0;
+
+    background: var(--ring-loader-color-3);
+  }
+}
+
+.inner {
+  top: 20px;
+  right: 20px;
+  bottom: 20px;
+  left: 20px;
+}
+
+.middle {
+  top: 10px;
+  right: 10px;
+  bottom: 10px;
+  left: 10px;
+
+  opacity: 0.8;
+
+  &,
+  &::before {
+    animation-delay: 0.08s;
+  }
+
+  &::after {
+    animation-delay: 3.28s;
+  }
+}
+
+.outer {
+  opacity: 0.7;
+
+  &,
+  &::before {
+    animation-delay: 0.16s;
+  }
+
+  &::after {
+    animation-delay: 3.36s;
+  }
+}
+
 .animate {
   animation: rotation-keyframes 36s linear infinite;
 }

package/components/loader/loader.d.ts

@@ -1,7 +1,15 @@
 import { type HTMLAttributes, PureComponent } from 'react';
 import LoaderCore, { type LoaderCoreProps } from './loader-core';
+declare module 'csstype' {
+    interface Properties {
+        '--ring-loader-color-1'?: string;
+        '--ring-loader-color-2'?: string;
+        '--ring-loader-color-3'?: string;
+    }
+}
 export interface LoaderProps extends Partial<LoaderCoreProps>, HTMLAttributes<HTMLElement> {
     'data-test'?: string | null | undefined;
+    squares?: boolean;
 }
 /**
  * @name Loader

package/components/loader/loader.js

@@ -1,6 +1,8 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { PureComponent } from 'react';
+import classNames from 'classnames';
 import LoaderCore from './loader-core';
+import styles from './loader.css';
 /**
  * @name Loader
  */
@@ -28,7 +30,11 @@ export default class Loader extends PureComponent {
         }
     };
     render() {
-        const { message, size, colors, 'data-test': dataTest, stop, deterministic, ...restProps } = this.props;
-        return _jsx("div", { ...restProps, ref: this.initLoader });
+        const { message, size, colors, 'data-test': dataTest, stop, deterministic, squares, ...restProps } = this.props;
+        return squares ? (_jsxs("div", { ...restProps, children: [_jsxs("div", { className: classNames(styles.canvas, styles.squares), style: {
+                        '--ring-loader-color-1': colors?.[0] ? `rgb(${colors[0].r}, ${colors[0].g}, ${colors[0].b})` : undefined,
+                        '--ring-loader-color-2': colors?.[1] ? `rgb(${colors[1].r}, ${colors[1].g}, ${colors[1].b})` : undefined,
+                        '--ring-loader-color-3': colors?.[2] ? `rgb(${colors[2].r}, ${colors[2].g}, ${colors[2].b})` : undefined,
+                    }, children: [_jsx("div", { className: classNames(styles.square, styles.outer) }), _jsx("div", { className: classNames(styles.square, styles.middle) }), _jsx("div", { className: classNames(styles.square, styles.inner) })] }), message && _jsx("div", { className: styles.text, children: message })] })) : (_jsx("div", { ...restProps, ref: this.initLoader }));
     }
 }

package/components/pager/pager.css

@@ -5,13 +5,14 @@
 }
 
 .links {
+  display: flex;
+  gap: calc(var(--ring-unit) * 2);
+
   margin-bottom: calc(var(--ring-unit) * 2);
 }
 
 .link {
   display: inline-block;
-
-  margin-right: calc(var(--ring-unit) * 2);
 }
 
 .linkDisabled {

package/components/permissions/permissions-cache.js

@@ -196,7 +196,7 @@ export default class PermissionCache {
             }
         }
         else {
-            result = !!t && this.testPermission(t, projectId);
+            result = t !== undefined && this.testPermission(t, projectId);
         }
         return result;
     }

package/components/popup/position-css.js

@@ -43,7 +43,7 @@ export const setCSSAnchorPositioning = ({ popup, anchor, uid, minWidth, top, lef
     }
     popup.style.setProperty('position-anchor', anchorName);
     const calculatedMinWidth = calculateMinWidth(getRect(anchor).width, minWidth);
-    if (calculatedMinWidth) {
+    if (calculatedMinWidth !== null) {
         popup.style.minWidth = `${calculatedMinWidth}px`;
     }
     if (top) {

package/components/popup/position.js

@@ -1,4 +1,4 @@
-import { getDocumentScrollLeft, getDocumentScrollTop, getRect, getWindowHeight, isMounted, } from '../global/dom';
+import { getDocumentScrollLeft, getDocumentScrollTop, getRect, isMounted, } from '../global/dom';
 import { Dimension, Directions, MaxHeight, MinWidth } from './popup.consts';
 export { Dimension, Directions, MaxHeight, MinWidth };
 function getScrollingCoordinates(container) {
@@ -40,7 +40,7 @@ function getPositionStyles(popup, anchorRect, anchorLeft, anchorTop, offset) {
     };
 }
 function verticalOverflow(styles, scrollingCoordinates, attrs) {
-    const containerHeight = attrs.container ? attrs.container.clientHeight : getWindowHeight();
+    const containerHeight = attrs.container ? attrs.container.clientHeight : document.documentElement.clientHeight;
     const viewportMinX = scrollingCoordinates.top + attrs.sidePadding;
     const viewportMaxX = scrollingCoordinates.top + containerHeight - attrs.sidePadding;
     const topOverflow = Math.max(viewportMinX - styles.top, 0);
@@ -50,7 +50,7 @@ function verticalOverflow(styles, scrollingCoordinates, attrs) {
     return topOverflow + bottomOverflow;
 }
 function horizontalOverflow(styles, scrollingCoordinates, attrs) {
-    const containerWidth = attrs.container ? attrs.container.clientWidth : window.innerWidth;
+    const containerWidth = attrs.container ? attrs.container.clientWidth : document.documentElement.clientWidth;
     const viewportMinY = scrollingCoordinates.left + attrs.sidePadding;
     const viewportMaxY = scrollingCoordinates.left + containerWidth - attrs.sidePadding;
     const leftOverflow = Math.max(viewportMinY - styles.left, 0);
@@ -195,7 +195,7 @@ export default function position(attrs) {
         });
     }
     const newMinWidth = calculateMinWidth(anchorRect.width, minWidth);
-    if (newMinWidth) {
+    if (newMinWidth !== null) {
         styles.minWidth = newMinWidth;
     }
     return { styles, direction: chosenDirection };

package/components/query-assist/query-assist.js

@@ -229,7 +229,7 @@ export default class QueryAssist extends Component {
         const caretOffset = this.caret?.getOffset();
         if (this.input?.clientWidth !== this.input?.scrollWidth &&
             caretOffset &&
-            this.input?.clientWidth &&
+            this.input?.clientWidth !== undefined &&
             caretOffset > this.input?.clientWidth) {
             this.input.scrollLeft += caretOffset;
         }

package/components/radio/radio-item.js

@@ -22,6 +22,6 @@ export class RadioItemInner extends Component {
     }
 }
 const RadioItem = forwardRef(function RadioItem(props, ref) {
-    return (_jsx(RadioContext.Consumer, { children: ({ value, onChange, ...restContext }) => (_jsx(RadioItemInner, { ref: ref, ...restContext, checked: value ? value === props.value : undefined, onChange: onChange ? () => onChange(props.value) : undefined, ...props })) }));
+    return (_jsx(RadioContext.Consumer, { children: ({ value, onChange, ...restContext }) => (_jsx(RadioItemInner, { ref: ref, ...restContext, checked: value !== undefined ? value === props.value : undefined, onChange: onChange ? () => onChange(props.value) : undefined, ...props })) }));
 });
 export default RadioItem;

package/components/slider/slider.js

@@ -78,7 +78,7 @@ export const Slider = ({ defaultValue, value, min = 0, max = HUNDRED, step = 1,
         }
         const index = e.currentTarget.getAttribute('data-index');
         const nextValue = calculateValue(ref, e.pageX, min, max, validStep);
-        if (nextValue && !isNaN(nextValue) && !index) {
+        if (nextValue !== null && !isNaN(nextValue) && !index) {
             const rangeIndex = Number(Math.abs(validValues[0] - nextValue) > Math.abs(validValues[1] - nextValue));
             setDraggedIndex(isRange ? rangeIndex : 0);
         }

package/components/tabs/collapsible-tabs.js

@@ -103,7 +103,7 @@ export const CollapsibleTabs = ({ children, selected, onSelect, onLastVisibleInd
             }, { visible: [], hidden: [], ready: elements.lastVisibleIndex !== null });
             if (selectedIndex > (elements.lastVisibleIndex ?? 0)) {
                 const selectedItem = children.find(tab => !tab.props.alwaysHidden && tab.props.id === selected);
-                if (selectedItem) {
+                if (selectedItem !== null && selectedItem !== undefined) {
                     res.visible.push(selectedItem);
                 }
             }

package/components/tags-input/tags-input.js

@@ -206,7 +206,8 @@ export default class TagsInput extends PureComponent {
                 return false;
             }
             if ((key === 'Delete' || key === 'Backspace') &&
-                this.state.activeIndex &&
+                this.state.activeIndex !== null &&
+                this.state.activeIndex !== undefined &&
                 this.state.tags[this.state.activeIndex]) {
                 this.onRemoveTag(this.state.tags[this.state.activeIndex]).then(() => this.selectTag(true));
                 return false;

package/components/user-agreement/service.js

@@ -71,7 +71,7 @@ export default class UserAgreementService {
         this.hideDialog();
     };
     onStorageEvent = (event) => {
-        if (event.key === storageKey && event.newValue) {
+        if (event.key === storageKey && event.newValue !== null) {
             const { tabId, command } = JSON.parse(event.newValue);
             if (tabId !== this.tabId) {
                 if (command === showMessage) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jetbrains/ring-ui",
-  "version": "7.0.66",
+  "version": "7.0.68",
   "description": "JetBrains UI library",
   "author": {
     "name": "JetBrains"
@@ -99,24 +99,24 @@
     "@babel/eslint-parser": "^7.28.4",
     "@csstools/css-parser-algorithms": "^3.0.4",
     "@csstools/stylelint-no-at-nest-rule": "^4.0.0",
-    "@eslint/compat": "^1.3.2",
+    "@eslint/compat": "^1.4.0",
     "@eslint/eslintrc": "^3.2.0",
-    "@eslint/js": "^9.36.0",
-    "@figma/code-connect": "^1.3.5",
+    "@eslint/js": "^9.37.0",
+    "@figma/code-connect": "^1.3.6",
     "@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.18.0",
+    "@primer/octicons": "^19.19.0",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-json": "^6.1.0",
-    "@rollup/plugin-node-resolve": "^16.0.1",
+    "@rollup/plugin-node-resolve": "^16.0.2",
     "@rollup/plugin-replace": "^6.0.2",
-    "@storybook/addon-a11y": "9.1.7",
-    "@storybook/addon-docs": "^9.1.7",
-    "@storybook/addon-themes": "^9.1.7",
+    "@storybook/addon-a11y": "9.1.10",
+    "@storybook/addon-docs": "^9.1.10",
+    "@storybook/addon-themes": "^9.1.10",
     "@storybook/csf": "^0.1.13",
-    "@storybook/react-webpack5": "9.1.7",
+    "@storybook/react-webpack5": "9.1.10",
     "@storybook/test-runner": "^0.23.0",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.3.0",
@@ -125,21 +125,21 @@
     "@types/chai-dom": "1.11.3",
     "@types/eslint__js": "^9.14.0",
     "@types/markdown-it": "^14.1.2",
-    "@types/react": "^19.1.13",
-    "@types/react-dom": "^19.1.9",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.1",
     "@types/webpack-env": "^1.18.8",
-    "@vitejs/plugin-react": "^5.0.2",
-    "@vitest/eslint-plugin": "^1.3.12",
+    "@vitejs/plugin-react": "^5.0.4",
+    "@vitest/eslint-plugin": "^1.3.16",
     "acorn": "^8.15.0",
     "babel-plugin-require-context-hook": "^1.0.0",
-    "caniuse-lite": "^1.0.30001741",
+    "caniuse-lite": "^1.0.30001750",
     "chai-as-promised": "^8.0.2",
     "chai-dom": "^1.12.1",
     "cheerio": "^1.1.2",
-    "core-js": "^3.45.1",
+    "core-js": "^3.46.0",
     "cpy-cli": "^6.0.0",
     "dotenv-cli": "^10.0.0",
-    "eslint": "^9.36.0",
+    "eslint": "^9.37.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-formatter-jslint-xml": "^8.40.0",
     "eslint-import-resolver-exports": "^1.0.0-beta.5",
@@ -149,8 +149,8 @@
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-prettier": "^5.5.4",
     "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-react-hooks": "^5.2.0",
-    "eslint-plugin-storybook": "^9.1.5",
+    "eslint-plugin-react-hooks": "^7.0.0",
+    "eslint-plugin-storybook": "^9.1.10",
     "eslint-plugin-unicorn": "^61.0.2",
     "events": "^3.3.0",
     "glob": "^11.0.3",
@@ -159,34 +159,34 @@
     "http-server": "^14.1.1",
     "husky": "^9.1.7",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "~30.1.3",
-    "jest-environment-jsdom": "^30.1.2",
+    "jest": "~30.2.0",
+    "jest-environment-jsdom": "^30.2.0",
     "jest-teamcity": "^1.12.0",
-    "lint-staged": "^16.1.6",
+    "lint-staged": "^16.2.4",
     "markdown-it": "^14.1.0",
     "merge-options": "^3.0.4",
     "pinst": "^3.0.0",
     "prettier": "^3.6.2",
     "raw-loader": "^4.0.2",
-    "react": "^19.1.1",
-    "react-dom": "^19.1.1",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
     "regenerator-runtime": "^0.14.1",
     "rimraf": "^6.0.1",
-    "rollup": "^4.52.0",
+    "rollup": "^4.52.4",
     "rollup-plugin-clear": "^2.0.7",
     "storage-mock": "^2.1.0",
-    "storybook": "9.1.7",
-    "stylelint": "^16.24.0",
+    "storybook": "9.1.10",
+    "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.2",
-    "typescript-eslint": "^8.44.0",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.46.0",
     "vitest": "^3.2.4",
     "vitest-teamcity-reporter": "^0.3.1",
     "wallaby-webpack": "^3.9.16",
-    "webpack": "^5.101.3",
+    "webpack": "^5.102.1",
     "webpack-cli": "^6.0.1",
     "xmlappend": "^1.0.4"
   },
@@ -213,7 +213,7 @@
     "@babel/core": "^7.28.4",
     "@babel/preset-typescript": "^7.27.1",
     "@jetbrains/babel-preset-jetbrains": "^2.4.0",
-    "@jetbrains/icons": "^5.13.0",
+    "@jetbrains/icons": "^5.15.0",
     "@jetbrains/postcss-require-hover": "^0.2.0",
     "@types/combokeys": "^2.4.9",
     "@types/element-resize-detector": "^1.1.6",
@@ -242,7 +242,7 @@
     "postcss-font-family-system-ui": "^5.0.0",
     "postcss-loader": "^8.2.0",
     "postcss-modules-values-replace": "^4.2.2",
-    "postcss-preset-env": "^10.3.1",
+    "postcss-preset-env": "^10.4.0",
     "react-movable": "^3.4.1",
     "react-virtualized": "^9.22.6",
     "react-waypoint": "^10.3.0",
@@ -264,5 +264,11 @@
   "homepage": "https://github.com/JetBrains/ring-ui#readme",
   "overrides": {
     "storybook": "$storybook"
-  }
+  },
+  "browserslist": [
+    "defaults",
+    ">1%",
+    "baseline widely available",
+    "not dead"
+  ]
 }