@jetbrains/ring-ui 7.0.99 → 7.0.100

package/components/dropdown-menu/dropdown-menu.js

@@ -9,8 +9,8 @@ const defaultAriaLabel = 'Dropdown menu';
 function DropdownAnchorWrapper({ anchor, pinned, active, activeListItemId, listId, ...restProps }) {
     const anchorAriaProps = {
         ...(listId ? { 'aria-haspopup': true } : {}),
-        ...(activeListItemId ? { 'aria-activedescendant': activeListItemId, 'aria-owns': listId } : {}),
-        ...(active ? { 'aria-expanded': true } : {}),
+        ...(activeListItemId ? { 'aria-activedescendant': activeListItemId } : {}),
+        ...(active ? { 'aria-expanded': true, 'aria-owns': listId } : {}),
     };
     const anchorProps = { active, pinned, ...restProps, ...anchorAriaProps };
     const anchorComponentProps = { ...anchorProps, pinned: `${anchorProps.pinned}` };
@@ -39,7 +39,7 @@ const DropdownMenu = forwardRef(function DropdownMenu({ id, anchor, ariaLabel, d
         id: listId,
         ariaLabel: ariaLabel || defaultAriaLabel,
         closeOnSelect: true,
-        activateFirstItem: true,
+        activateFirstItem: false,
         data,
         onSelect,
         ...menuProps,

package/components/input/input.js

@@ -97,7 +97,7 @@ export class Input extends PureComponent {
         // Modifiers
         size, multiline, borderless, 
         // Props
-        label, labelType, error, help, className, inputClassName, children, value, onClear, disabled, inputRef, onChange, enableShortcuts, id, placeholder, icon, translations, height = typeof this.context === 'function' ? this.context() : this.context, beforeInput, afterInput, autogrow, ...restProps } = this.props;
+        label, labelType, error, help, className, inputClassName, clearButtonClassName, children, value, onClear, disabled, inputRef, onChange, enableShortcuts, id, placeholder, icon, translations, height = typeof this.context === 'function' ? this.context() : this.context, beforeInput, afterInput, autogrow, ...restProps } = this.props;
         const { empty } = this.state;
         const clearable = !!onClear;
         const classes = classNames(className, styles.outerContainer, size && size !== Size.AUTO && styles[`size${size}`], styles[`height${height}`], {
@@ -129,7 +129,7 @@ export class Input extends PureComponent {
               {icon && <Icon glyph={icon} className={styles.icon}/>}
               {beforeInput}
               {multiline ? (<textarea onChange={this.handleTextareaChange} rows={1} {...commonProps} {...restProps}/>) : (<input onChange={this.handleInputChange} {...commonProps} {...restProps}/>)}
-              {clearable && !disabled && (<Button title={translations?.clear ?? translate('clear')} data-test='ring-input-clear' className={classNames(styles.clear, this.props.clearButtonClassName)} icon={closeIcon} onClick={this.clear}/>)}
+              {clearable && !disabled && (<Button title={translations?.clear ?? translate('clear')} data-test='ring-input-clear' className={classNames(styles.clear, clearButtonClassName)} icon={closeIcon} onClick={this.clear}/>)}
               {afterInput}
             </div>
             {error ? (<div className={styles.errorText}>{error}</div>) : (help && <ControlHelp className={styles.helpText}>{help}</ControlHelp>)}

package/components/list/list-item.d.ts

@@ -1,5 +1,9 @@
 import { PureComponent, type SyntheticEvent } from 'react';
 import { type ListDataItemProps } from './consts';
+/**
+ * @constructor
+ * @extends {ReactComponent}
+ */
 export default class ListItem<T> extends PureComponent<ListDataItemProps<T>> {
     id: string;
     stopBubbling: (e: SyntheticEvent) => void;

package/components/list/list-item.js

@@ -13,9 +13,6 @@ import styles from './list.css';
  * @constructor
  * @extends {ReactComponent}
  */
-const RING_UNIT = 8;
-const DEFAULT_PADDING = 8;
-const CHECKBOX_WIDTH = 28;
 export default class ListItem extends PureComponent {
     id = getUID('list-item-');
     stopBubbling = (e) => e.stopPropagation();
@@ -31,10 +28,12 @@ export default class ListItem extends PureComponent {
         const classes = getListClasses(this.props);
         const detailsClasses = classNames({
             [styles.details]: details,
-            [styles.padded]: icon !== undefined || checkbox !== undefined || glyph !== undefined,
+            [styles.padded]: !showCheckbox && hasLeftNodes,
         }, detailsClassName);
+        const levelPadding = `var(--ring-unit) * ${1 + (Number(level) || 0)}`;
+        const checkboxPadding = showCheckbox ? ' + var(--ring-list-item-icon-size) + var(--ring-unit)' : '';
         const style = {
-            paddingLeft: `${(Number(level) || 0) * RING_UNIT + DEFAULT_PADDING + (showCheckbox ? CHECKBOX_WIDTH : 0)}px`,
+            paddingLeft: `calc(${levelPadding}${checkboxPadding})`,
         };
         let computedTitle;
         if (this._isString(title)) {

package/components/list/list.css

@@ -74,6 +74,8 @@
 }
 
 .itemContainer {
+  --ring-list-item-icon-size: 20px;
+
   position: relative;
 }
 
@@ -150,7 +152,7 @@
 }
 
 .padded {
-  margin-left: 20px;
+  margin-left: calc(var(--ring-unit) + var(--ring-list-item-icon-size));
 }
 
 /* Override :last-child */
@@ -194,8 +196,8 @@
 .icon {
   display: inline-block;
 
-  width: 20px;
-  height: 20px;
+  width: var(--ring-list-item-icon-size);
+  height: var(--ring-list-item-icon-size);
   margin-left: calc(var(--ring-unit) * 2);
 
   background-repeat: no-repeat;
@@ -215,7 +217,7 @@
 .glyph {
   float: left;
 
-  width: 20px;
+  width: var(--ring-list-item-icon-size);
 
   margin-right: var(--ring-unit);
 
@@ -227,7 +229,7 @@
 
   top: 0;
 
-  height: 20px;
+  height: var(--ring-list-item-icon-size);
 
   object-fit: cover;
   object-position: center;
@@ -247,8 +249,8 @@
   top: 7px;
   left: 19px;
 
-  width: 20px;
-  height: 20px;
+  width: var(--ring-list-item-icon-size);
+  height: var(--ring-list-item-icon-size);
   margin-right: var(--ring-unit);
 }
 

package/components/list/list.js

@@ -342,7 +342,13 @@ export default class List extends Component {
         else {
             const itemId = this.getId(this.props.data[activeIndex]);
             if (itemId) {
-                document.getElementById(itemId)?.scrollIntoView?.({ block: 'center' });
+                // scrollIntoView({container: 'nearest'}) is not yet supported in Firefox and Safari, emulating
+                const itemElement = document.getElementById(itemId);
+                const scrollerElement = this.inner;
+                if (itemElement && scrollerElement) {
+                    scrollerElement.scrollTop =
+                        itemElement.offsetTop + itemElement.clientHeight / 2 - scrollerElement.clientHeight / 2;
+                }
             }
         }
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jetbrains/ring-ui",
-  "version": "7.0.99",
+  "version": "7.0.100",
   "description": "JetBrains UI library",
   "author": {
     "name": "JetBrains"