@jetbrains/ring-ui 6.0.20 → 6.0.22

package/components/button/button.css

@@ -371,6 +371,10 @@
 
   color: var(--ring-icon-secondary-color);
 
+  .primary & {
+    color: unset;
+  }
+
   line-height: normal;
 }
 

package/components/list/list.js

@@ -480,7 +480,7 @@ export default class List extends Component {
                 default:
                     throw new Error(`Unknown menu element type: ${itemProps.rgItemType}`);
             }
-            el = <ItemComponent {...itemProps}/>;
+            el = <ItemComponent {...itemProps} key={itemProps.key}/>;
         }
         return parent
             ? (<CellMeasurer cache={this._cache} key={itemKey} parent={parent} rowIndex={index} columnIndex={0}>

package/components/select/select-popup.css

@@ -44,6 +44,10 @@
   overscroll-behavior: contain;
 }
 
+.popupOverscrollNone {
+  overscroll-behavior: none;
+}
+
 .filterWrapper {
   position: relative;
 

package/components/select/select.d.ts

@@ -102,6 +102,7 @@ export interface BaseSelectProps<T = unknown> {
     left?: number | undefined;
     renderOptimization?: boolean | undefined;
     ringPopupTarget?: string | null | undefined;
+    preventListOverscroll?: boolean | undefined;
     error?: ReactNode | null | undefined;
     hint?: ReactNode;
     add?: Add | null | undefined;

package/components/select/select.js

@@ -443,7 +443,7 @@ export default class Select extends Component {
                     message = this.props.notFoundMessage ?? translate('noOptionsFound');
                 }
                 return (<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} filter={this.isInputMode() ? false : this.props.filter} // disable popup filter in INPUT mode
-                 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}/>);
+                 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}/>);
             }}
       </I18nContext.Consumer>);
     }
@@ -925,6 +925,7 @@ Select.propTypes = {
     directions: PropTypes.array,
     popupClassName: PropTypes.string,
     popupStyle: PropTypes.object,
+    preventListOverscroll: PropTypes.bool,
     top: PropTypes.number,
     left: PropTypes.number,
     renderOptimization: PropTypes.bool,

package/components/select/select__popup.d.ts

@@ -77,6 +77,7 @@ export interface SelectPopupProps<T = unknown> {
     multiple: boolean | Multiple;
     selected: ListDataItem<T> | readonly ListDataItem<T>[] | null;
     tags: Tags | boolean | null;
+    preventListOverscroll?: boolean | undefined;
 }
 export default class SelectPopup<T = unknown> extends PureComponent<SelectPopupProps<T>> {
     static defaultProps: SelectPopupProps;

package/components/select/select__popup.js

@@ -252,7 +252,9 @@ export default class SelectPopup extends PureComponent {
             if (this.props.toolbar) {
                 maxHeight -= TOOLBAR_HEIGHT;
             }
-            return (<List id={this.props.listId} maxHeight={maxHeight} data={this.props.data} activeIndex={this.props.activeIndex} ref={this.listRef} restoreActiveIndex activateFirstItem onSelect={this.onListSelect} onResize={this.handleListResize} onScrollToBottom={this.props.onLoadMore} hidden={this.props.hidden} shortcuts={!this.props.hidden} disableMoveOverflow={this.props.disableMoveOverflow} disableMoveDownOverflow={this.props.loading} disableScrollToActive={this.props.disableScrollToActive} compact={this.props.compact} renderOptimization={this.props.renderOptimization}/>);
+            return (<List id={this.props.listId} maxHeight={maxHeight} data={this.props.data} activeIndex={this.props.activeIndex} ref={this.listRef} restoreActiveIndex activateFirstItem onSelect={this.onListSelect} onResize={this.handleListResize} onScrollToBottom={this.props.onLoadMore} hidden={this.props.hidden} shortcuts={!this.props.hidden} disableMoveOverflow={this.props.disableMoveOverflow} disableMoveDownOverflow={this.props.loading} disableScrollToActive={this.props.disableScrollToActive} compact={this.props.compact} className={this.props.preventListOverscroll
+                    ? styles.popupOverscrollNone
+                    : undefined} renderOptimization={this.props.renderOptimization}/>);
         }
         return null;
     }
@@ -404,5 +406,6 @@ SelectPopup.propTypes = {
     tags: PropTypes.object,
     toolbar: PropTypes.node,
     topbar: PropTypes.node,
-    top: PropTypes.number
+    top: PropTypes.number,
+    preventListOverscroll: PropTypes.bool
 };

package/components/table/table.js

@@ -151,7 +151,7 @@ export class Table extends PureComponent {
                 return null;
             }
             const { ref, ...restProps } = props;
-            const row = (<Row innerRef={ref} key={getItemKey(value)} level={getItemLevel(value)} item={value} showFocus={selection.isFocused(value)} autofocus={selection.isFocused(value)} focused={focused && selection.isFocused(value)} selectable={selectable && isItemSelectable(value)} selected={selectable && selection.isSelected(value)} onFocus={this.onRowFocus} onSelect={this.onRowSelect} onDoubleClick={onItemDoubleClick} onClick={onItemClick} collapsible={isItemCollapsible(value)} parentCollapsible={isParentCollapsible(value)} collapsed={isItemCollapsed(value)} onCollapse={onItemCollapse} onExpand={onItemExpand} showDisabledSelection={isDisabledSelectionVisible(value)} checkboxTooltip={getCheckboxTooltip(value)} className={classNames(getItemClassName(value), { [style.draggingRow]: isDragged })} metaColumnClassName={getMetaColumnClassName(value)} draggable={draggable} alwaysShowDragHandle={alwaysShowDragHandle} dragHandleTitle={dragHandleTitle} columns={columns} data-test={getItemDataTest(value)} {...restProps}/>);
+            const row = (<Row innerRef={ref} level={getItemLevel(value)} item={value} showFocus={selection.isFocused(value)} autofocus={selection.isFocused(value)} focused={focused && selection.isFocused(value)} selectable={selectable && isItemSelectable(value)} selected={selectable && selection.isSelected(value)} onFocus={this.onRowFocus} onSelect={this.onRowSelect} onDoubleClick={onItemDoubleClick} onClick={onItemClick} collapsible={isItemCollapsible(value)} parentCollapsible={isParentCollapsible(value)} collapsed={isItemCollapsed(value)} onCollapse={onItemCollapse} onExpand={onItemExpand} showDisabledSelection={isDisabledSelectionVisible(value)} checkboxTooltip={getCheckboxTooltip(value)} className={classNames(getItemClassName(value), { [style.draggingRow]: isDragged })} metaColumnClassName={getMetaColumnClassName(value)} draggable={draggable} alwaysShowDragHandle={alwaysShowDragHandle} dragHandleTitle={dragHandleTitle} columns={columns} data-test={getItemDataTest(value)} {...restProps} key={restProps.key ?? getItemKey(value)}/>);
             return isDragged
                 ? (<table style={{ ...props.style }} className={style.draggingTable}>
             <tbody>{row}</tbody>

package/components/tags-list/tags-list.js

@@ -31,7 +31,7 @@ export default class TagsList extends Component {
         const readOnly = this.props.disabled || tag.readOnly ||
             (this.props.canNotBeEmpty && this.props.tags.length === 1);
         const { tagClassName } = this.props;
-        return (<TagComponent {...tag} readOnly={readOnly} disabled={this.props.disabled || tag.disabled} focused={focusTag} onClick={this.props.handleClick(tag)} onRemove={this.props.handleRemove(tag)} className={tagClassName}>{tag.label}</TagComponent>);
+        return (<TagComponent {...tag} key={tag.key} readOnly={readOnly} disabled={this.props.disabled || tag.disabled} focused={focusTag} onClick={this.props.handleClick(tag)} onRemove={this.props.handleRemove(tag)} className={tagClassName}>{tag.label}</TagComponent>);
     }
     render() {
         const { children, className, customTagComponent, canNotBeEmpty, handleClick, tagClassName, handleRemove, tags, activeIndex, ...props } = this.props;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jetbrains/ring-ui",
-  "version": "6.0.20",
+  "version": "6.0.22",
   "description": "JetBrains UI library",
   "author": "JetBrains",
   "license": "Apache-2.0",
@@ -77,8 +77,8 @@
   },
   "readmeFilename": "README.md",
   "devDependencies": {
-    "@babel/cli": "^7.24.1",
-    "@babel/eslint-parser": "^7.24.1",
+    "@babel/cli": "^7.24.5",
+    "@babel/eslint-parser": "^7.24.5",
     "@csstools/css-parser-algorithms": "^2.6.1",
     "@csstools/stylelint-no-at-nest-rule": "^2.0.0",
     "@jetbrains/eslint-config": "^5.4.2",
@@ -108,12 +108,12 @@
     "@types/chai-enzyme": "^0.6.13",
     "@types/enzyme": "^3.10.18",
     "@types/markdown-it": "^14.0.1",
-    "@types/react": "^18.2.79",
-    "@types/react-dom": "^18.2.25",
+    "@types/react": "^18.3.1",
+    "@types/react-dom": "^18.3.0",
     "@types/sinon": "^17.0.3",
     "@types/sinon-chai": "^3.2.12",
-    "@typescript-eslint/eslint-plugin": "^7.7.1",
-    "@typescript-eslint/parser": "^7.7.1",
+    "@typescript-eslint/eslint-plugin": "^7.8.0",
+    "@typescript-eslint/parser": "^7.8.0",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.8.0",
     "acorn": "^8.11.3",
     "axe-playwright": "^2.0.1",
@@ -156,14 +156,14 @@
     "mocha": "^10.4.0",
     "pinst": "^3.0.0",
     "prettier": "^3.2.5",
-    "puppeteer": "^22.7.0",
+    "puppeteer": "^22.7.1",
     "raw-loader": "^4.0.2",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-test-renderer": "^18.2.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-test-renderer": "^18.3.1",
     "regenerator-runtime": "^0.14.1",
     "rimraf": "^5.0.5",
-    "rollup": "^4.16.4",
+    "rollup": "^4.17.2",
     "rollup-plugin-clear": "^2.0.7",
     "rollup-plugin-styles": "^4.0.0",
     "sinon": "^17.0.1",
@@ -201,7 +201,7 @@
     }
   },
   "dependencies": {
-    "@babel/core": "^7.24.4",
+    "@babel/core": "^7.24.5",
     "@babel/preset-typescript": "^7.24.1",
     "@jetbrains/babel-preset-jetbrains": "^2.3.2",
     "@jetbrains/icons": "^4.2.0",
@@ -226,7 +226,7 @@
     "deep-equal": "^2.2.3",
     "element-resize-detector": "^1.2.4",
     "es6-error": "^4.1.1",
-    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-hooks": "^4.6.2",
     "fastdom": "^1.0.12",
     "file-loader": "^6.2.0",
     "focus-trap": "^7.5.4",
@@ -234,7 +234,7 @@
     "just-debounce-it": "^3.2.0",
     "memoize-one": "^6.0.0",
     "postcss": "^8.4.38",
-    "postcss-calc": "^9.0.1",
+    "postcss-calc": "^10.0.0",
     "postcss-flexbugs-fixes": "^5.0.2",
     "postcss-font-family-system-ui": "^5.0.0",
     "postcss-loader": "^8.1.1",