@jetbrains/ring-ui 7.0.50 → 7.0.51

package/components/dialog/dialog.css

@@ -1,6 +1,7 @@
 @import "../global/variables.css";
 
 @value header, scrollableWrapper from "../island/island.css";
+@value panel from "../panel/panel.css";
 
 .container {
   position: fixed;

package/components/panel/panel.css

@@ -1,8 +1,6 @@
 @import "../global/variables.css";
 
 .panel {
-  composes: panel from "../dialog/dialog.css"; /* TODO: Invert dependency using :externals CSS Modules selector */
-
   position: relative;
 
   margin-top: calc(var(--ring-unit) * 2);

package/components/select/select.d.ts

@@ -138,7 +138,7 @@ export interface SelectState<T = unknown> {
     data: SelectItem<T>[];
     shownData: SelectItem<T>[];
     selected: SelectItem<T> | SelectItem<T>[] | null | undefined;
-    selectedIndex: number | null;
+    lastInteractedKey: string | number | null;
     filterValue: string;
     shortcutsEnabled: boolean;
     popupShortcuts: boolean;
@@ -226,7 +226,7 @@ export default class Select<T = unknown> extends Component<SelectProps<T>, Selec
     private _onEsc;
     _inputShortcutHandler: () => void;
     getValueForFilter(selected: SelectItem<T> | readonly SelectItem<T>[] | null | undefined): string;
-    _getSelectedIndex(selected: SelectItem<T> | readonly SelectItem<T>[] | null | undefined, data: readonly SelectItem<T>[]): number | null;
+    private _getActiveIndex;
     popupRef: (el: SelectPopup<SelectItemData<T>> | null) => void;
     _getResetOption(): SelectItem<T> | null;
     _prependResetOption(shownData: SelectItem<T>[]): SelectItem<T>[];

package/components/select/select.js

@@ -135,22 +135,6 @@ function getListItems(props, state, rawFilterString, data = props.data) {
     }
     return { filteredData, addButton };
 }
-function getSelectedIndex(selected, data) {
-    const firstSelected = Array.isArray(selected) ? selected[0] : selected;
-    if (firstSelected == null) {
-        return null;
-    }
-    for (let i = 0; i < data.length; i++) {
-        const item = data[i];
-        if (item.key === undefined) {
-            continue;
-        }
-        if (item.key === firstSelected.key) {
-            return i;
-        }
-    }
-    return null;
-}
 const getItemLabel = ({ selectedLabel, label }) => {
     if (selectedLabel != null) {
         return selectedLabel;
@@ -158,16 +142,6 @@ const getItemLabel = ({ selectedLabel, label }) => {
     return typeof label === 'string' ? label : '';
 };
 const getValueForFilter = (selected, type, filterValue) => (selected && !isArray(selected) && isInputMode(type) ? getItemLabel(selected) : filterValue);
-function isSameSelected(prevSelected, selected) {
-    if (!prevSelected || !selected || prevSelected.length !== selected.length) {
-        return false;
-    }
-    const keysMap = selected.reduce((result, item) => {
-        result[item.key] = true;
-        return result;
-    }, {});
-    return prevSelected.every(it => keysMap[it.key]);
-}
 /**
  * @name Select
  * @constructor
@@ -239,21 +213,16 @@ export default class Select extends Component {
             Object.assign(nextState, { shownData: filteredData, addButton });
             if (prevState.selected) {
                 Object.assign(nextState, {
-                    selectedIndex: getSelectedIndex(prevState.selected, data),
                     filterValue: getValueForFilter(prevState.selected, type, filterValue),
                 });
             }
         }
         if ('selected' in nextProps && nextProps.selected !== prevSelected) {
             const selected = nextProps.selected || (multiple ? [] : null);
-            const selectedIndex = getSelectedIndex(selected, data || prevData);
             Object.assign(nextState, {
                 selected,
                 filterValue: getValueForFilter(selected, type, filterValue),
             });
-            if (!Array.isArray(prevSelected) || !Array.isArray(selected) || !isSameSelected(prevSelected, selected)) {
-                Object.assign(nextState, { selectedIndex });
-            }
         }
         if (prevMultiple !== multiple && !dequal(prevMultiple, multiple)) {
             nextState.selected = multiple ? [] : null;
@@ -267,13 +236,17 @@ export default class Select extends Component {
             const { filteredData, addButton } = getListItems(nextProps, nextState, filterValue, data);
             Object.assign(nextState, { shownData: filteredData, addButton });
         }
+        const isSelectionEmpty = nextProps.selected == null || (Array.isArray(nextProps.selected) && nextProps.selected.length === 0);
+        if (isSelectionEmpty) {
+            nextState.lastInteractedKey = null;
+        }
         return nextState;
     }
     state = {
         data: [],
         shownData: [],
         selected: this.props.multiple ? [] : null,
-        selectedIndex: null,
+        lastInteractedKey: null,
         filterValue: (this.props.filter && typeof this.props.filter === 'object' && this.props.filter.value) || '',
         shortcutsEnabled: false,
         popupShortcuts: false,
@@ -384,8 +357,28 @@ export default class Select extends Component {
     getValueForFilter(selected) {
         return getValueForFilter(selected, this.props.type, this.state.filterValue);
     }
-    _getSelectedIndex(selected, data) {
-        return getSelectedIndex(selected, data);
+    _getActiveIndex(items) {
+        const { selected, lastInteractedKey } = this.state;
+        const isNonOptionItem = (item) => item.isResetItem || List.isItemType(List.ListProps.Type.SEPARATOR, item);
+        if (lastInteractedKey != null) {
+            const index = items.findIndex(item => item.key === lastInteractedKey && !isNonOptionItem(item));
+            if (index >= 0)
+                return index;
+        }
+        let selectedItems = [];
+        if (Array.isArray(selected)) {
+            selectedItems = selected;
+        }
+        else if (selected) {
+            selectedItems = [selected];
+        }
+        if (selectedItems.length > 0) {
+            const lastSelected = selectedItems[selectedItems.length - 1];
+            const index = items.findIndex(item => item.key === lastSelected.key);
+            if (index >= 0)
+                return index;
+        }
+        return items.findIndex(item => !isNonOptionItem(item));
     }
     popupRef = (el) => {
         this._popup = el;
@@ -433,6 +426,7 @@ export default class Select extends Component {
         const anchorElement = this.props.targetElement || this.node;
         const { showPopup, shownData } = this.state;
         const _shownData = this._prependResetOption(shownData);
+        const activeIndex = this._getActiveIndex(_shownData);
         return (_jsx(I18nContext.Consumer, { children: ({ translate }) => {
                 let message;
                 if (this.props.loading) {
@@ -441,7 +435,7 @@ export default class Select extends Component {
                 else if (!shownData.length) {
                     message = this.props.notFoundMessage ?? translate('noOptionsFound');
                 }
-                return (_jsx(SelectPopup, { data: _shownData, message: message, toolbar: showPopup && this.getToolbar(), topbar: this.getTopbar(), loading: this.props.loading, activeIndex: this.state.selectedIndex, hidden: !showPopup, ref: this.popupRef, maxHeight: this.props.maxHeight, minWidth: this.props.minWidth, directions: this.props.directions, className: this.props.popupClassName, style: this.props.popupStyle, top: this.props.top, left: this.props.left, offset: this.props.offset, filter: this.isInputMode() ? false : this.props.filter, filterIcon: this.props.filterIcon, filterRef: this.props.filterRef, multiple: this.props.multiple, filterValue: this.state.filterValue, anchorElement: anchorElement, onCloseAttempt: this._onCloseAttempt, onOutsideClick: this.props.onOutsideClick, onSelect: this._listSelectHandler, onSelectAll: this._listSelectAllHandler, onFilter: this._filterChangeHandler, onClear: this.clearFilter, onLoadMore: this.props.onLoadMore, isInputMode: this.isInputMode(), selected: this.state.selected, tags: this.props.tags, compact: this.props.compact, renderOptimization: this.props.renderOptimization, ringPopupTarget: this.props.ringPopupTarget, disableMoveOverflow: this.props.disableMoveOverflow, disableScrollToActive: this.props.disableScrollToActive, dir: this.props.dir, onEmptyPopupEnter: this.onEmptyPopupEnter, listId: this.listId, preventListOverscroll: this.props.preventListOverscroll }));
+                return (_jsx(SelectPopup, { data: _shownData, message: message, toolbar: showPopup && this.getToolbar(), topbar: this.getTopbar(), loading: this.props.loading, activeIndex: activeIndex, hidden: !showPopup, ref: this.popupRef, maxHeight: this.props.maxHeight, minWidth: this.props.minWidth, directions: this.props.directions, className: this.props.popupClassName, style: this.props.popupStyle, top: this.props.top, left: this.props.left, offset: this.props.offset, filter: this.isInputMode() ? false : this.props.filter, filterIcon: this.props.filterIcon, filterRef: this.props.filterRef, multiple: this.props.multiple, filterValue: this.state.filterValue, anchorElement: anchorElement, onCloseAttempt: this._onCloseAttempt, onOutsideClick: this.props.onOutsideClick, onSelect: this._listSelectHandler, onSelectAll: this._listSelectAllHandler, onFilter: this._filterChangeHandler, onClear: this.clearFilter, onLoadMore: this.props.onLoadMore, isInputMode: this.isInputMode(), selected: this.state.selected, tags: this.props.tags, compact: this.props.compact, renderOptimization: this.props.renderOptimization, ringPopupTarget: this.props.ringPopupTarget, disableMoveOverflow: this.props.disableMoveOverflow, disableScrollToActive: this.props.disableScrollToActive, dir: this.props.dir, onEmptyPopupEnter: this.onEmptyPopupEnter, listId: this.listId, preventListOverscroll: this.props.preventListOverscroll }));
             } }));
     }
     _showPopup = () => {
@@ -459,6 +453,7 @@ export default class Select extends Component {
             this.setState(prevState => ({
                 showPopup: false,
                 filterValue: this.props.allowAny ? prevState.filterValue : '',
+                lastInteractedKey: null,
             }));
             if (tryFocusAnchor) {
                 this.focus();
@@ -543,7 +538,6 @@ export default class Select extends Component {
             };
             this.setState({
                 selected: filterValue === '' ? null : fakeSelected,
-                selectedIndex: null,
             }, () => {
                 this.props.onSelect(fakeSelected, event);
                 this.props.onChange(fakeSelected, event);
@@ -582,6 +576,7 @@ export default class Select extends Component {
         if ((!isItem(selected) && !isCustomItem(selected)) || selected.disabled || selected.isResetItem) {
             return;
         }
+        const lastInteractedKey = selected?.key ?? null;
         const tryKeepOpen = this.props.tryKeepOpen ?? opts.tryKeepOpen;
         if (!this.props.multiple) {
             if (!tryKeepOpen) {
@@ -589,7 +584,7 @@ export default class Select extends Component {
             }
             this.setState({
                 selected,
-                selectedIndex: this._getSelectedIndex(selected, this.props.data),
+                lastInteractedKey: selected?.key ?? null,
             }, () => {
                 const newFilterValue = this.isInputMode() && !this.props.hideSelected ? getItemLabel(selected) : '';
                 this.filterValue(newFilterValue);
@@ -617,7 +612,7 @@ export default class Select extends Component {
                 const nextState = {
                     filterValue: '',
                     selected: nextSelection,
-                    selectedIndex: this._getSelectedIndex(selected, this.props.data),
+                    lastInteractedKey: tryKeepOpen ? lastInteractedKey : null,
                 };
                 if (typeof this.props.multiple === 'object' &&
                     this.props.multiple.limit &&
@@ -670,7 +665,6 @@ export default class Select extends Component {
             return {
                 filterValue: '',
                 selected: nextSelection,
-                selectedIndex: isSelectAll ? this._getSelectedIndex(nextSelection, this.props.data) : null,
                 shownData: prevState.shownData.map(item => ({ ...item, checkbox: isSelectAll })),
                 multipleMap: isSelectAll ? buildMultipleMap(this.props.data.filter(item => !item.disabled)) : {},
             };
@@ -706,7 +700,7 @@ export default class Select extends Component {
         const empty = this.props.multiple ? [] : null;
         this.setState({
             selected: empty,
-            selectedIndex: null,
+            lastInteractedKey: null,
             filterValue: '',
         }, () => {
             if (this.props.onChange) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jetbrains/ring-ui",
-  "version": "7.0.50",
+  "version": "7.0.51",
   "description": "JetBrains UI library",
   "author": {
     "name": "JetBrains"
@@ -67,7 +67,7 @@
     "figma-connect-unpublish": "npx figma connect unpublish --token=$FIGMA_CODE_CONNECT_TOKEN",
     "figma-connect-unpublish-local": "dotenv -- npm run figma-connect-unpublish",
     "prebuild": "rimraf components && tsc --project tsconfig-build.json && cpy './**/*' '!**/*.stories.*' '!**/*.ts' '!**/*.tsx' '!**/__mocks__/**' ../components --parents --cwd=src/",
-    "build": "./node_modules/.bin/rollup -c --bundleConfigAsCjs",
+    "build": "BROWSERSLIST_ENV=dist ./node_modules/.bin/rollup -c --bundleConfigAsCjs",
     "postbuild": "cpy './**/*.d.ts' ../dist --parents --cwd=components/",
     "serve": "http-server storybook-dist/ -p 9999",
     "start": "storybook dev -p 9999",
@@ -114,12 +114,12 @@
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^16.0.1",
     "@rollup/plugin-replace": "^6.0.2",
-    "@storybook/addon-a11y": "9.0.6",
-    "@storybook/addon-docs": "^9.0.6",
-    "@storybook/addon-themes": "^9.0.6",
+    "@storybook/addon-a11y": "9.0.9",
+    "@storybook/addon-docs": "^9.0.9",
+    "@storybook/addon-themes": "^9.0.9",
     "@storybook/csf": "^0.1.13",
-    "@storybook/react-webpack5": "9.0.6",
-    "@storybook/test-runner": "^0.22.1",
+    "@storybook/react-webpack5": "9.0.9",
+    "@storybook/test-runner": "^0.23.0",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
@@ -132,11 +132,11 @@
     "@types/react-dom": "^19.1.6",
     "@types/webpack-env": "^1.18.8",
     "@vitejs/plugin-react": "^4.5.2",
-    "@vitest/eslint-plugin": "^1.2.2",
+    "@vitest/eslint-plugin": "^1.2.4",
     "acorn": "^8.15.0",
     "axe-playwright": "^2.1.0",
     "babel-plugin-require-context-hook": "^1.0.0",
-    "caniuse-lite": "^1.0.30001720",
+    "caniuse-lite": "^1.0.30001723",
     "chai": "^5.2.0",
     "chai-as-promised": "^8.0.1",
     "chai-dom": "^1.12.1",
@@ -155,15 +155,15 @@
     "eslint-plugin-prettier": "^5.4.1",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^5.2.0",
-    "eslint-plugin-storybook": "^9.0.8",
+    "eslint-plugin-storybook": "^9.0.9",
     "events": "^3.3.0",
-    "glob": "^11.0.2",
+    "glob": "^11.0.3",
     "globals": "^16.2.0",
     "html-webpack-plugin": "^5.6.3",
     "http-server": "^14.1.1",
     "husky": "^9.1.7",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "~29.7.0",
+    "jest": "~30.0.0",
     "jest-environment-jsdom": "^30.0.0",
     "jest-teamcity": "^1.12.0",
     "lint-staged": "^16.1.0",
@@ -179,7 +179,7 @@
     "rollup": "^4.43.0",
     "rollup-plugin-clear": "^2.0.7",
     "storage-mock": "^2.1.0",
-    "storybook": "9.0.6",
+    "storybook": "9.0.9",
     "stylelint": "^16.20.0",
     "svg-inline-loader": "^0.8.2",
     "teamcity-service-messages": "^0.1.14",