@jetbrains/ring-ui 5.1.13 → 5.1.14

package/components/list/consts.d.ts

@@ -56,7 +56,7 @@ export type ListDataItem<T = unknown> = T & Partial<Omit<LinkProps, 'onClick' |
     originalModel?: never;
     LinkComponent?: ComponentType<ClickableLinkProps> | string | null | undefined;
     template?: ReactNode | ((props: ListDataItemProps<T>) => ReactNode);
-    wrapper?: (children: ReactNode) => ReactElement;
+    labelWrapper?: (children: ReactNode) => ReactElement;
     custom?: boolean | null | undefined;
     onClick?: ((item: ListDataItem<T>, event: Event | SyntheticEvent) => void) | null | undefined;
     onMouseUp?: ((item: ListDataItem<T>, event: Event | SyntheticEvent) => void) | null | undefined;

package/components/list/list.js

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

package/components/list/list__item.js

@@ -20,7 +20,7 @@ export default class ListItem extends PureComponent {
     stopBubbling = (e) => e.stopPropagation();
     _isString = (val) => typeof val === 'string' || val instanceof String;
     render() {
-        const { scrolling, className, disabled, checkbox, avatar, subavatar, glyph, icon, rightGlyph, description, label, title, details, hover, rgItemType, level, tabIndex, compact, onClick, onCheckboxChange, onMouseOver, onMouseDown, onMouseUp, rightNodes, leftNodes, showGeneratedAvatar, username, ...restProps } = this.props;
+        const { scrolling, className, disabled, checkbox, avatar, subavatar, glyph, icon, rightGlyph, description, label, title, details, hover, rgItemType, level, tabIndex, compact, onClick, onCheckboxChange, onMouseOver, onMouseDown, onMouseUp, rightNodes, leftNodes, showGeneratedAvatar, username, labelWrapper, ...restProps } = this.props;
         const checkable = checkbox !== undefined;
         const shouldShowGeneratedAvatar = showGeneratedAvatar && username != null;
         const hasLeftNodes = leftNodes || glyph || avatar || shouldShowGeneratedAvatar;
@@ -56,6 +56,7 @@ export default class ListItem extends PureComponent {
             'ring-list-item-action': !disabled,
             'ring-list-item-selected': checkbox
         }, restProps['data-test']);
+        const labelElement = (<span className={styles.label} title={computedTitle} data-test="ring-list-item-label">{label}</span>);
         return (<div className={styles.itemContainer} data-test={dataTest}>
         {showCheckbox && (<div className={styles.checkboxContainer}>
             <Checkbox aria-labelledby={this.id} checked={checkbox} disabled={disabled} onChange={onCheckboxChange} onClick={this.stopBubbling}/>
@@ -68,7 +69,7 @@ export default class ListItem extends PureComponent {
                 {(avatar || shouldShowGeneratedAvatar) && (<Avatar className={styles.avatar} url={avatar} size={AvatarSize.Size20} subavatar={subavatar} username={username}/>)}
               </div>)}
 
-            <span className={styles.label} title={computedTitle} data-test="ring-list-item-label">{label}</span>
+            {labelWrapper ? labelWrapper(labelElement) : labelElement}
 
             {description && (<span className={styles.description} data-test="ring-list-item-description">{description}</span>)}
 

package/dist/list/consts.d.ts

@@ -56,7 +56,7 @@ export type ListDataItem<T = unknown> = T & Partial<Omit<LinkProps, 'onClick' |
     originalModel?: never;
     LinkComponent?: ComponentType<ClickableLinkProps> | string | null | undefined;
     template?: ReactNode | ((props: ListDataItemProps<T>) => ReactNode);
-    wrapper?: (children: ReactNode) => ReactElement;
+    labelWrapper?: (children: ReactNode) => ReactElement;
     custom?: boolean | null | undefined;
     onClick?: ((item: ListDataItem<T>, event: Event | SyntheticEvent) => void) | null | undefined;
     onMouseUp?: ((item: ListDataItem<T>, event: Event | SyntheticEvent) => void) | null | undefined;

package/dist/list/list.js

@@ -419,11 +419,7 @@ var List = /*#__PURE__*/function (_Component) {
           default:
             throw new Error("Unknown menu element type: ".concat(itemProps.rgItemType));
         }
-        if (itemProps.wrapper) {
-          el = itemProps.wrapper( /*#__PURE__*/React.createElement(ItemComponent, itemProps));
-        } else {
-          el = /*#__PURE__*/React.createElement(ItemComponent, itemProps);
-        }
+        el = /*#__PURE__*/React.createElement(ItemComponent, itemProps);
       }
       return parent ? /*#__PURE__*/React.createElement(CellMeasurer, {
         cache: _this._cache,

package/dist/list/list__item.js

@@ -51,7 +51,7 @@ import 'core-js/modules/es.weak-map.js';
 
 var modules_5b0fb3e8 = {"unit":"8px","footer-height":"64px","breakpoint-small":"640px","breakpoint-middle":"960px","breakpoint-large":"1200px","extra-small-screen-media":"(max-width: 639px)","small-screen-media":"(min-width: 640px) and (max-width: 959px)","middle-screen-media":"(min-width: 960px) and (max-width: 1199px)","large-screen-media":"(min-width: 1200px)","clearfix":"clearfix_rui_8bff","font":"font_rui_8bff","font-lower":"font-lower_rui_8bff font_rui_8bff","font-smaller":"font-smaller_rui_8bff font-lower_rui_8bff font_rui_8bff","font-smaller-lower":"font-smaller-lower_rui_8bff font-smaller_rui_8bff font-lower_rui_8bff font_rui_8bff","font-larger-lower":"font-larger-lower_rui_8bff font-lower_rui_8bff font_rui_8bff","font-larger":"font-larger_rui_8bff font-larger-lower_rui_8bff font-lower_rui_8bff font_rui_8bff","thin-font":"thin-font_rui_8bff","monospace-font":"monospace-font_rui_8bff","ellipsis":"ellipsis_rui_8bff","resetButton":"resetButton_rui_8bff"};
 
-var _excluded = ["scrolling", "className", "disabled", "checkbox", "avatar", "subavatar", "glyph", "icon", "rightGlyph", "description", "label", "title", "details", "hover", "rgItemType", "level", "tabIndex", "compact", "onClick", "onCheckboxChange", "onMouseOver", "onMouseDown", "onMouseUp", "rightNodes", "leftNodes", "showGeneratedAvatar", "username"];
+var _excluded = ["scrolling", "className", "disabled", "checkbox", "avatar", "subavatar", "glyph", "icon", "rightGlyph", "description", "label", "title", "details", "hover", "rgItemType", "level", "tabIndex", "compact", "onClick", "onCheckboxChange", "onMouseOver", "onMouseDown", "onMouseUp", "rightNodes", "leftNodes", "showGeneratedAvatar", "username", "labelWrapper"];
 /**
  * @constructor
  * @extends {ReactComponent}
@@ -110,6 +110,7 @@ var ListItem = /*#__PURE__*/function (_PureComponent) {
         leftNodes = _this$props.leftNodes,
         showGeneratedAvatar = _this$props.showGeneratedAvatar,
         username = _this$props.username,
+        labelWrapper = _this$props.labelWrapper,
         restProps = _objectWithoutProperties(_this$props, _excluded);
       var checkable = checkbox !== undefined;
       var shouldShowGeneratedAvatar = showGeneratedAvatar && username != null;
@@ -134,6 +135,11 @@ var ListItem = /*#__PURE__*/function (_PureComponent) {
         'ring-list-item-action': !disabled,
         'ring-list-item-selected': checkbox
       }, restProps['data-test']);
+      var labelElement = /*#__PURE__*/React.createElement("span", {
+        className: modules_3b67a421.label,
+        title: computedTitle,
+        "data-test": "ring-list-item-label"
+      }, label);
       return /*#__PURE__*/React.createElement("div", {
         className: modules_3b67a421.itemContainer,
         "data-test": dataTest
@@ -172,11 +178,7 @@ var ListItem = /*#__PURE__*/function (_PureComponent) {
         size: Size.Size20,
         subavatar: subavatar,
         username: username
-      })), /*#__PURE__*/React.createElement("span", {
-        className: modules_3b67a421.label,
-        title: computedTitle,
-        "data-test": "ring-list-item-label"
-      }, label), description && /*#__PURE__*/React.createElement("span", {
+      })), labelWrapper ? labelWrapper(labelElement) : labelElement, description && /*#__PURE__*/React.createElement("span", {
         className: modules_3b67a421.description,
         "data-test": "ring-list-item-description"
       }, description), /*#__PURE__*/React.createElement("div", {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jetbrains/ring-ui",
-  "version": "5.1.13",
+  "version": "5.1.14",
   "description": "JetBrains UI library",
   "author": "JetBrains",
   "license": "Apache-2.0",
@@ -97,7 +97,7 @@
     "@storybook/preview-api": "7.4.5",
     "@storybook/react": "7.5.2",
     "@storybook/source-loader": "7.5.1",
-    "@storybook/theming": "7.5.1",
+    "@storybook/theming": "7.5.2",
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.5.1",
     "@types/chai": "^4.3.9",