@jetbrains/ring-ui 7.0.91 → 7.0.93

package/components/auth/background-flow.js

@@ -40,8 +40,7 @@ export default class BackgroundFlow {
      * promise is rejected if no token was received after {@link BackgroundToken.BACKGROUND_TIMEOUT} ms.
      */
     async _load() {
-        const authRequest = await this._requestBuilder
-            .prepareAuthRequest({ request_credentials: 'silent' }, { nonRedirect: true });
+        const authRequest = await this._requestBuilder.prepareAuthRequest({ request_credentials: 'silent' }, { nonRedirect: true });
         return new Promise((resolve, reject) => {
             function onMessage(e) {
                 if (e.data === HUB_AUTH_PAGE_OPENED) {

package/components/avatar-stack/avatar-stack.js

@@ -17,8 +17,8 @@ export default function AvatarStack({ children, className, size = Size.Size20, e
                 height: size,
                 '--ring-avatar-stack-index': Children.count(children),
                 fontSize: fontSizes[size],
-            }} anchor={(<button type='button' className={styles.extraButton}>
+            }} anchor={<button type='button' className={styles.extraButton}>
               <Avatar size={size} info={<span className={styles.extraText}>{`+${extraItems.length}`}</span>}/>
-            </button>)} data={extraItems} menuProps={{ offset: 4, ...dropdownMenuProps?.menuProps }} {...dropdownMenuProps}/>) : null}
+            </button>} data={extraItems} menuProps={{ offset: 4, ...dropdownMenuProps?.menuProps }} {...dropdownMenuProps}/>) : null}
     </div>);
 }

package/components/popup/popup.js

@@ -143,7 +143,7 @@ export default class Popup extends PureComponent {
         }
     };
     shouldUseCssPositioning() {
-        if (!supportsCSSAnchorPositioning()) {
+        if (!supportsCSSAnchorPositioning) {
             return false;
         }
         return this.props.cssPositioning ?? this.cssPositioningFromContext ?? getConfiguration().popupsCssPositioning;

package/components/popup/position-css.d.ts

@@ -1,5 +1,5 @@
 import { Directions } from './popup.consts';
-export declare const supportsCSSAnchorPositioning: () => boolean;
+export declare const supportsCSSAnchorPositioning: boolean;
 interface SetCSSAnchorPositioningParams {
     popup: HTMLElement;
     anchor: HTMLElement;

package/components/popup/position-css.js

@@ -1,7 +1,12 @@
 import { getRect } from '../global/dom';
 import { calculateMinWidth, MaxHeight } from './position';
 import { Directions, Dimension } from './popup.consts';
-export const supportsCSSAnchorPositioning = () => CSS?.supports?.('anchor-name', 'none');
+import sniffr from '../global/sniffer';
+const doesSupportCSSAnchorPositioning = () => {
+    const isSafari = sniffr.browser.name === 'safari';
+    return !isSafari && CSS?.supports?.('anchor-name', 'none');
+};
+export const supportsCSSAnchorPositioning = doesSupportCSSAnchorPositioning();
 const getPositionArea = (direction) => {
     switch (direction) {
         case Directions.BOTTOM_RIGHT:
@@ -54,7 +59,10 @@ export const setCSSAnchorPositioning = ({ popup, anchor, uid, minWidth, top, lef
     }
     // When all directions are BOTTOM, the `max-height: 100%` from CSS should stay applied so popup doesn't overflow the anchor RG-2754
     const SHOULD_AUTO_SHRINK = directions.every(d => d.startsWith('BOTTOM'));
-    if (!SHOULD_AUTO_SHRINK) {
+    if (SHOULD_AUTO_SHRINK) {
+        popup.style.removeProperty('max-height'); // Reset to 100% from CSS to allow shrinking based on viewport height
+    }
+    else {
         const screenWithMargin = `calc(100vh - ${Dimension.MARGIN * 2}px)`;
         if (maxHeight === 'screen' || maxHeight === MaxHeight.SCREEN) {
             popup.style.maxHeight = screenWithMargin;
@@ -62,9 +70,9 @@ export const setCSSAnchorPositioning = ({ popup, anchor, uid, minWidth, top, lef
         else if (typeof maxHeight === 'number' && maxHeight > 0) {
             popup.style.maxHeight = `min(${screenWithMargin}, ${maxHeight}px)`;
         }
-    }
-    else {
-        popup.style.maxHeight = '';
+        else {
+            popup.style.maxHeight = 'none';
+        }
     }
     const [initialPositionStyle, initialPositionName] = getPositionArea(directions[0]);
     popup.style.setProperty('position-area', initialPositionStyle);

package/components/popup/position.js

@@ -1,4 +1,4 @@
-import { getDocumentScrollLeft, getDocumentScrollTop, getRect, 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) {

package/components/select/select-popup.d.ts

@@ -15,6 +15,7 @@ import { type SelectItem } from './select';
 export type FilterFn<T> = (itemToCheck: SelectItem<T>, checkString: string, data: readonly SelectItem<T>[]) => boolean;
 export interface Filter<T = unknown> {
     fn?: FilterFn<T> | null | undefined;
+    preserveSeparators?: boolean | null | undefined;
     fuzzy?: boolean | null | undefined;
     value?: string | null | undefined;
     placeholder?: string | undefined;

package/components/select/select.d.ts

@@ -6,7 +6,7 @@ import { type LabelType } from '../control-label/control-label';
 import { type ListDataItem } from '../list/consts';
 import { type Directions } from '../popup/popup.consts';
 import { ControlsHeight, ControlsHeightContext } from '../global/controls-height';
-import SelectPopup, { type Filter, type FilterFn, type Multiple, type Tags } from './select-popup';
+import SelectPopup, { type Filter, type Multiple, type Tags } from './select-popup';
 /**
  * @name Select
  */
@@ -240,7 +240,6 @@ export default class Select<T = unknown> extends Component<SelectProps<T>, Selec
     getTopbar(): ReactNode;
     getLowerCaseLabel: typeof getLowerCaseLabel;
     doesLabelMatch: typeof doesLabelMatch;
-    getFilterFn(): FilterFn<T>;
     getListItems(rawFilterString: string, data?: SelectItem<T>[]): SelectItem<T>[];
     filterValue(): string;
     filterValue(setValue: string): void;

package/components/select/select.js

@@ -62,15 +62,18 @@ function doesLabelMatch(itemToCheck, fn) {
     return fn(lowerCaseLabel);
 }
 function getFilterFn(filter) {
+    const preserveSeparators = filter === false || (typeof filter === 'object' && filter.preserveSeparators);
     if (typeof filter === 'object') {
         if (filter.fn) {
-            return filter.fn;
+            return { check: filter.fn, preserveSeparators };
         }
         if (filter.fuzzy) {
-            return (itemToCheck, checkString) => doesLabelMatch(itemToCheck, lowerCaseLabel => fuzzyHighlight(checkString, lowerCaseLabel).matched);
+            const check = (itemToCheck, checkString) => doesLabelMatch(itemToCheck, lowerCaseLabel => fuzzyHighlight(checkString, lowerCaseLabel).matched);
+            return { check, preserveSeparators };
         }
     }
-    return (itemToCheck, checkString) => doesLabelMatch(itemToCheck, lowerCaseLabel => lowerCaseLabel.indexOf(checkString) >= 0);
+    const check = (itemToCheck, checkString) => doesLabelMatch(itemToCheck, lowerCaseLabel => lowerCaseLabel.indexOf(checkString) >= 0);
+    return { check, preserveSeparators };
 }
 function buildMultipleMap(selected) {
     return selected.reduce((acc, item) => {
@@ -91,10 +94,15 @@ function getListItems(props, state, rawFilterString, data = props.data) {
     const lowerCaseString = filterString.toLowerCase();
     const filteredData = [];
     let exactMatch = false;
-    const check = getFilterFn(props.filter);
+    const { check, preserveSeparators } = getFilterFn(props.filter);
     for (let i = 0; i < data.length; i++) {
         const item = { ...data[i] };
         if (check(item, lowerCaseString, data)) {
+            if (!preserveSeparators &&
+                List.isItemType(List.ListProps.Type.SEPARATOR, item) &&
+                (!filteredData.length || List.isItemType(List.ListProps.Type.SEPARATOR, filteredData[filteredData.length - 1]))) {
+                continue;
+            }
             exactMatch = item.label === filterString;
             if (props.multiple && !(typeof props.multiple === 'object' && props.multiple.removeSelectedItems)) {
                 item.checkbox = !!state.multipleMap?.[item.key];
@@ -116,6 +124,11 @@ function getListItems(props, state, rawFilterString, data = props.data) {
             }
         }
     }
+    if (!preserveSeparators &&
+        filteredData.length &&
+        List.isItemType(List.ListProps.Type.SEPARATOR, filteredData[filteredData.length - 1])) {
+        filteredData.pop();
+    }
     let addButton = null;
     const { add } = props;
     if ((add && filterString && !exactMatch) || (add && add.alwaysVisible)) {
@@ -497,9 +510,6 @@ export default class Select extends Component {
     }
     getLowerCaseLabel = getLowerCaseLabel;
     doesLabelMatch = doesLabelMatch;
-    getFilterFn() {
-        return getFilterFn(this.props.filter);
-    }
     getListItems(rawFilterString, data) {
         const { filteredData, addButton } = getListItems(this.props, this.state, rawFilterString, data);
         this.setState({ addButton });

package/components/tag/tag.css

@@ -196,6 +196,7 @@
 .avatarContainer {
   display: inline-block;
   overflow: hidden;
+  flex-shrink: 0;
 
   box-sizing: border-box;
   width: var(--ring-tag-max-height);

package/components/user-card/smart-user-card-tooltip.js

@@ -23,9 +23,9 @@ export default class SmartUserCardTooltip extends Component {
             this.setState({ loading: false });
         }
     };
-    renderNoUser = () => (this.state.loading ? (<div className={styles.userCardSpaced}>
+    renderNoUser = () => this.state.loading ? (<div className={styles.userCardSpaced}>
         <LoaderInline />
-      </div>) : (''));
+      </div>) : ('');
     render() {
         const { user } = this.state;
         const { children, userDataSource, ...restProps } = this.props;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jetbrains/ring-ui",
-  "version": "7.0.91",
+  "version": "7.0.93",
   "description": "JetBrains UI library",
   "author": {
     "name": "JetBrains"
@@ -93,44 +93,44 @@
     "@babel/eslint-parser": "^7.28.6",
     "@csstools/css-parser-algorithms": "^4.0.0",
     "@csstools/stylelint-no-at-nest-rule": "^5.0.0",
-    "@eslint/compat": "^2.0.1",
+    "@eslint/compat": "^2.0.2",
     "@eslint/eslintrc": "^3.3.3",
     "@eslint/js": "^9.39.2",
-    "@figma/code-connect": "^1.3.12",
+    "@figma/code-connect": "^1.3.13",
     "@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.21.2",
+    "@primer/octicons": "^19.22.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.3",
-    "@storybook/addon-a11y": "10.1.11",
-    "@storybook/addon-docs": "^10.1.11",
-    "@storybook/addon-themes": "^10.1.11",
+    "@storybook/addon-a11y": "10.2.8",
+    "@storybook/addon-docs": "^10.2.8",
+    "@storybook/addon-themes": "^10.2.8",
     "@storybook/csf": "^0.1.13",
-    "@storybook/react-webpack5": "10.1.11",
+    "@storybook/react-webpack5": "10.2.8",
     "@storybook/test-runner": "^0.24.2",
     "@testing-library/dom": "^10.4.1",
-    "@testing-library/react": "^16.3.1",
+    "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
     "@types/chai-as-promised": "^8.0.2",
     "@types/chai-dom": "1.11.3",
     "@types/markdown-it": "^14.1.2",
-    "@types/react": "^19.2.8",
+    "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "@types/webpack-env": "^1.18.8",
-    "@vitejs/plugin-react": "^5.1.2",
-    "@vitest/eslint-plugin": "^1.6.6",
+    "@vitejs/plugin-react": "^5.1.4",
+    "@vitest/eslint-plugin": "^1.6.7",
     "acorn": "^8.15.0",
     "babel-plugin-require-context-hook": "^1.0.0",
-    "caniuse-lite": "^1.0.30001764",
+    "caniuse-lite": "^1.0.30001769",
     "chai-as-promised": "^8.0.2",
     "chai-dom": "^1.12.1",
-    "cheerio": "^1.1.2",
-    "core-js": "^3.47.0",
-    "cpy-cli": "^6.0.0",
+    "cheerio": "^1.2.0",
+    "core-js": "^3.48.0",
+    "cpy-cli": "^7.0.0",
     "dotenv-cli": "^11.0.0",
     "eslint": "^9.39.2",
     "eslint-config-prettier": "^10.1.8",
@@ -142,11 +142,11 @@
     "eslint-plugin-prettier": "^5.5.5",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^7.0.1",
-    "eslint-plugin-storybook": "^10.1.11",
+    "eslint-plugin-storybook": "^10.2.8",
     "eslint-plugin-unicorn": "^62.0.0",
     "events": "^3.3.0",
-    "glob": "^13.0.0",
-    "globals": "^17.0.0",
+    "glob": "^13.0.3",
+    "globals": "^17.3.0",
     "html-webpack-plugin": "^5.6.6",
     "http-server": "^14.1.1",
     "husky": "^9.1.7",
@@ -155,29 +155,29 @@
     "jest-environment-jsdom": "^30.2.0",
     "jest-teamcity": "^1.12.0",
     "lint-staged": "^16.2.7",
-    "markdown-it": "^14.1.0",
+    "markdown-it": "^14.1.1",
     "merge-options": "^3.0.4",
     "pinst": "^3.0.0",
-    "prettier": "^3.8.0",
+    "prettier": "^3.8.1",
     "raw-loader": "^4.0.2",
-    "react": "^19.2.3",
-    "react-dom": "^19.2.3",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
     "regenerator-runtime": "^0.14.1",
     "rimraf": "^6.1.2",
-    "rollup": "^4.55.1",
+    "rollup": "^4.57.1",
     "rollup-plugin-clear": "^2.0.7",
     "storage-mock": "^2.1.0",
-    "storybook": "10.1.11",
-    "stylelint": "^17.0.0",
+    "storybook": "10.2.8",
+    "stylelint": "^17.3.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.16",
     "typescript": "~5.9.3",
-    "typescript-eslint": "^8.53.0",
+    "typescript-eslint": "^8.55.0",
     "vitest": "^4.0.18",
     "vitest-teamcity-reporter": "^0.4.1",
-    "webpack": "^5.104.1",
+    "webpack": "^5.105.2",
     "webpack-cli": "^6.0.1"
   },
   "peerDependencies": {
@@ -200,10 +200,10 @@
     }
   },
   "dependencies": {
-    "@babel/core": "^7.28.6",
+    "@babel/core": "^7.29.0",
     "@babel/preset-typescript": "^7.28.5",
     "@jetbrains/babel-preset-jetbrains": "^2.4.0",
-    "@jetbrains/icons": "^5.15.0",
+    "@jetbrains/icons": "^5.16.0",
     "@jetbrains/postcss-require-hover": "^0.2.0",
     "@types/combokeys": "^2.4.9",
     "@types/element-resize-detector": "^1.1.6",
@@ -216,14 +216,14 @@
     "change-case": "^4.1.1",
     "classnames": "^2.5.1",
     "combokeys": "^3.0.1",
-    "css-loader": "^7.1.2",
+    "css-loader": "^7.1.3",
     "csstype": "^3.2.1",
     "date-fns": "^4.1.0",
     "dequal": "^2.0.3",
     "element-resize-detector": "^1.2.4",
     "fastdom": "^1.0.12",
     "file-loader": "^6.2.0",
-    "focus-trap": "^7.8.0",
+    "focus-trap": "^8.0.0",
     "highlight.js": "^10.7.2",
     "just-debounce-it": "^3.2.0",
     "memoize-one": "^6.0.0",
@@ -233,7 +233,7 @@
     "postcss-font-family-system-ui": "^5.0.0",
     "postcss-loader": "^8.2.0",
     "postcss-modules-values-replace": "^4.2.2",
-    "postcss-preset-env": "^11.1.1",
+    "postcss-preset-env": "^11.1.3",
     "react-compiler-runtime": "^1.0.0",
     "react-movable": "^3.4.1",
     "react-virtualized": "^9.22.6",