@jetbrains/ring-ui 7.0.26 → 7.0.28
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -331,6 +331,12 @@
|
|
|
331
331
|
box-shadow: var(--ring-button-shadow) var(--ring-button-default-border-color);
|
|
332
332
|
}
|
|
333
333
|
|
|
334
|
+
.loader.inline {
|
|
335
|
+
animation-name: text-loading;
|
|
336
|
+
animation-duration: 1200ms;
|
|
337
|
+
animation-iteration-count: infinite;
|
|
338
|
+
}
|
|
339
|
+
|
|
334
340
|
.loaderBackground {
|
|
335
341
|
position: absolute;
|
|
336
342
|
z-index: -1;
|
|
@@ -365,8 +371,7 @@
|
|
|
365
371
|
}
|
|
366
372
|
}
|
|
367
373
|
|
|
368
|
-
.flat .loaderBackground
|
|
369
|
-
.inline .loaderBackground {
|
|
374
|
+
.flat .loaderBackground {
|
|
370
375
|
top: 0;
|
|
371
376
|
right: 0;
|
|
372
377
|
bottom: 0;
|
|
@@ -408,3 +413,9 @@
|
|
|
408
413
|
transform: translateX(0);
|
|
409
414
|
}
|
|
410
415
|
}
|
|
416
|
+
|
|
417
|
+
@keyframes text-loading {
|
|
418
|
+
50% {
|
|
419
|
+
opacity: 0.5;
|
|
420
|
+
}
|
|
421
|
+
}
|
|
@@ -40,7 +40,7 @@ export class Button extends PureComponent {
|
|
|
40
40
|
tabIndex: loader ? -1 : 0,
|
|
41
41
|
...props,
|
|
42
42
|
className: classes,
|
|
43
|
-
children: (_jsxs(_Fragment, { children: [loader && _jsx("div", { className: styles.loaderBackground }), content] })),
|
|
43
|
+
children: (_jsxs(_Fragment, { children: [loader && !isInline && _jsx("div", { className: styles.loaderBackground }), content] })),
|
|
44
44
|
};
|
|
45
45
|
return commonProps.href != null ? (_jsx(ClickableLink, { ...commonProps })) : (_jsx("button", { ref: this.buttonRef, type: "button", ...commonProps }));
|
|
46
46
|
}
|
package/components/list/list.js
CHANGED
|
@@ -18,7 +18,6 @@ import memoize from '../global/memoize';
|
|
|
18
18
|
import { preventDefault } from '../global/dom';
|
|
19
19
|
import Shortcuts from '../shortcuts/shortcuts';
|
|
20
20
|
import createStatefulContext from '../global/create-stateful-context';
|
|
21
|
-
import ListLink from './list__link';
|
|
22
21
|
import ListItem from './list__item';
|
|
23
22
|
import ListCustom from './list__custom';
|
|
24
23
|
import ListTitle from './list__title';
|
|
@@ -394,9 +393,6 @@ export default class List extends Component {
|
|
|
394
393
|
itemProps.isFirst = isFirst;
|
|
395
394
|
break;
|
|
396
395
|
case Type.LINK:
|
|
397
|
-
ItemComponent = ListLink;
|
|
398
|
-
this.addItemDataTestToProp(itemProps);
|
|
399
|
-
break;
|
|
400
396
|
case Type.ITEM:
|
|
401
397
|
ItemComponent = ListItem;
|
|
402
398
|
this.addItemDataTestToProp(itemProps);
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
2
|
import { PureComponent } from 'react';
|
|
3
3
|
import classNames from 'classnames';
|
|
4
4
|
import dataTests from '../global/data-tests';
|
|
@@ -6,7 +6,9 @@ import Avatar, { Size as AvatarSize } from '../avatar/avatar';
|
|
|
6
6
|
import Checkbox from '../checkbox/checkbox';
|
|
7
7
|
import Icon from '../icon/icon';
|
|
8
8
|
import getUID from '../global/get-uid';
|
|
9
|
+
import Link, { linkHOC } from '../link/link';
|
|
9
10
|
import styles from './list.css';
|
|
11
|
+
import { Type } from './consts';
|
|
10
12
|
import { getListClasses } from './list__classes';
|
|
11
13
|
/**
|
|
12
14
|
* @constructor
|
|
@@ -20,7 +22,7 @@ export default class ListItem extends PureComponent {
|
|
|
20
22
|
stopBubbling = (e) => e.stopPropagation();
|
|
21
23
|
_isString = (val) => typeof val === 'string' || val instanceof String;
|
|
22
24
|
render() {
|
|
23
|
-
const { disabled, checkbox, avatar, subavatar, glyph, icon, rightGlyph, description, label, title, details, hover, level,
|
|
25
|
+
const { disabled, checkbox, avatar, subavatar, glyph, icon, rightGlyph, description, label, title, details, hover, level, onCheckboxChange, rightNodes, leftNodes, showGeneratedAvatar, username, labelWrapper, rgItemType, scrolling, 'data-test': dataTest, className, url, LinkComponent, compact, hoverClassName, children, ...restProps } = this.props;
|
|
24
26
|
const checkable = checkbox !== undefined;
|
|
25
27
|
const shouldShowGeneratedAvatar = showGeneratedAvatar && username != null;
|
|
26
28
|
const hasLeftNodes = leftNodes || glyph || avatar || shouldShowGeneratedAvatar;
|
|
@@ -43,12 +45,23 @@ export default class ListItem extends PureComponent {
|
|
|
43
45
|
// label can also be an element, use empty string in this case
|
|
44
46
|
computedTitle = this._isString(label) ? label : '';
|
|
45
47
|
}
|
|
46
|
-
const
|
|
47
|
-
|
|
48
|
+
const isLink = rgItemType === Type.LINK;
|
|
49
|
+
const combinedDataTest = dataTests({
|
|
50
|
+
'ring-list-item': (dataTest || '').indexOf('ring-list-item') === -1,
|
|
48
51
|
'ring-list-item-action': !disabled,
|
|
49
52
|
'ring-list-item-selected': checkbox,
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
+
'ring-list-link': isLink,
|
|
54
|
+
}, dataTest);
|
|
55
|
+
const labelElement = (_jsx("span", { className: styles.label, title: computedTitle, "data-test": "ring-list-item-label", children: label ?? children }));
|
|
56
|
+
const commonProps = {
|
|
57
|
+
...restProps,
|
|
58
|
+
id: this.id,
|
|
59
|
+
className: classes,
|
|
60
|
+
style,
|
|
61
|
+
disabled,
|
|
62
|
+
children: (_jsxs(_Fragment, { children: [_jsxs("div", { className: styles.top, onMouseOut: this.stopBubbling, onBlur: this.stopBubbling, children: [!showCheckbox && (_jsxs("div", { className: styles.left, children: [leftNodes, glyph && (_jsx(Icon, { className: styles.glyph, glyph: glyph, size: this.props.iconSize, suppressSizeWarning: this.props.suppressSizeWarning })), (avatar || shouldShowGeneratedAvatar) && (_jsx(Avatar, { className: styles.avatar, url: avatar, size: AvatarSize.Size20, subavatar: subavatar, username: username }))] })), labelWrapper ? labelWrapper(labelElement) : labelElement, description && (_jsx("span", { className: styles.description, "data-test": "ring-list-item-description", children: description })), _jsxs("div", { className: styles.right, children: [rightGlyph && (_jsx(Icon, { className: styles.rightGlyph, glyph: rightGlyph, suppressSizeWarning: this.props.suppressSizeWarning, size: this.props.iconSize })), icon && _jsx("div", { className: styles.icon, style: { backgroundImage: `url("${icon}")` } }), rightNodes] })] }), details && _jsx("div", { className: detailsClasses, children: details })] })),
|
|
63
|
+
};
|
|
64
|
+
const LinkComponentToUse = LinkComponent ? linkHOC(LinkComponent) : Link;
|
|
65
|
+
return (_jsxs("div", { className: styles.itemContainer, "data-test": combinedDataTest, children: [showCheckbox && (_jsx("div", { className: styles.checkboxContainer, children: _jsx(Checkbox, { "aria-labelledby": this.id, checked: checkbox, disabled: disabled, onChange: onCheckboxChange, onClick: this.stopBubbling }) })), isLink ? (_jsx(LinkComponentToUse, { pseudo: !restProps.href, ...commonProps })) : (_jsx("button", { type: "button", ...commonProps }))] }));
|
|
53
66
|
}
|
|
54
67
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@jetbrains/ring-ui",
|
|
3
|
-
"version": "7.0.
|
|
3
|
+
"version": "7.0.28",
|
|
4
4
|
"description": "JetBrains UI library",
|
|
5
5
|
"author": {
|
|
6
6
|
"name": "JetBrains"
|
|
@@ -90,7 +90,7 @@
|
|
|
90
90
|
"@babel/plugin-syntax-import-assertions": "^7.26.0",
|
|
91
91
|
"@csstools/css-parser-algorithms": "^3.0.4",
|
|
92
92
|
"@csstools/stylelint-no-at-nest-rule": "^4.0.0",
|
|
93
|
-
"@eslint/compat": "^1.2.
|
|
93
|
+
"@eslint/compat": "^1.2.6",
|
|
94
94
|
"@eslint/eslintrc": "^3.2.0",
|
|
95
95
|
"@eslint/js": "^9.19.0",
|
|
96
96
|
"@figma/code-connect": "^1.2.4",
|
|
@@ -98,23 +98,23 @@
|
|
|
98
98
|
"@jetbrains/logos": "3.0.0-canary.734b213.0",
|
|
99
99
|
"@jetbrains/rollup-css-plugin": "./packages/rollup-css-plugin",
|
|
100
100
|
"@jetbrains/stylelint-config": "^4.0.2",
|
|
101
|
-
"@primer/octicons": "^19.
|
|
101
|
+
"@primer/octicons": "^19.15.0",
|
|
102
102
|
"@rollup/plugin-babel": "^6.0.4",
|
|
103
103
|
"@rollup/plugin-json": "^6.1.0",
|
|
104
104
|
"@rollup/plugin-node-resolve": "^16.0.0",
|
|
105
105
|
"@rollup/plugin-replace": "^6.0.2",
|
|
106
|
-
"@storybook/addon-a11y": "8.5.
|
|
107
|
-
"@storybook/addon-docs": "8.5.
|
|
108
|
-
"@storybook/addon-essentials": "8.5.
|
|
109
|
-
"@storybook/addon-themes": "^8.5.
|
|
110
|
-
"@storybook/components": "8.5.
|
|
106
|
+
"@storybook/addon-a11y": "8.5.3",
|
|
107
|
+
"@storybook/addon-docs": "8.5.3",
|
|
108
|
+
"@storybook/addon-essentials": "8.5.3",
|
|
109
|
+
"@storybook/addon-themes": "^8.5.3",
|
|
110
|
+
"@storybook/components": "8.5.3",
|
|
111
111
|
"@storybook/csf": "^0.1.13",
|
|
112
|
-
"@storybook/manager-api": "8.5.
|
|
113
|
-
"@storybook/preview-api": "8.5.
|
|
114
|
-
"@storybook/react": "8.5.
|
|
115
|
-
"@storybook/react-webpack5": "8.5.
|
|
112
|
+
"@storybook/manager-api": "8.5.3",
|
|
113
|
+
"@storybook/preview-api": "8.5.3",
|
|
114
|
+
"@storybook/react": "8.5.3",
|
|
115
|
+
"@storybook/react-webpack5": "8.5.3",
|
|
116
116
|
"@storybook/test-runner": "^0.21.0",
|
|
117
|
-
"@storybook/theming": "8.5.
|
|
117
|
+
"@storybook/theming": "8.5.3",
|
|
118
118
|
"@testing-library/dom": "^10.4.0",
|
|
119
119
|
"@testing-library/react": "^16.2.0",
|
|
120
120
|
"@testing-library/user-event": "^14.6.1",
|
|
@@ -134,15 +134,15 @@
|
|
|
134
134
|
"@vitest/eslint-plugin": "^1.1.25",
|
|
135
135
|
"@wojtekmaj/enzyme-adapter-react-17": "^0.8.0",
|
|
136
136
|
"acorn": "^8.14.0",
|
|
137
|
-
"axe-playwright": "^2.0
|
|
137
|
+
"axe-playwright": "^2.1.0",
|
|
138
138
|
"babel-plugin-require-context-hook": "^1.0.0",
|
|
139
|
-
"caniuse-lite": "^1.0.
|
|
139
|
+
"caniuse-lite": "^1.0.30001698",
|
|
140
140
|
"chai": "^5.1.2",
|
|
141
141
|
"chai-as-promised": "^8.0.1",
|
|
142
142
|
"chai-dom": "^1.10.0",
|
|
143
143
|
"chai-enzyme": "1.0.0-beta.1",
|
|
144
144
|
"cheerio": "^1.0.0-rc.12",
|
|
145
|
-
"chromatic": "^11.25.
|
|
145
|
+
"chromatic": "^11.25.2",
|
|
146
146
|
"core-js": "^3.40.0",
|
|
147
147
|
"cpy-cli": "^5.0.0",
|
|
148
148
|
"dotenv-cli": "^8.0.0",
|
|
@@ -178,19 +178,19 @@
|
|
|
178
178
|
"react-test-renderer": "^19.0.0",
|
|
179
179
|
"regenerator-runtime": "^0.14.1",
|
|
180
180
|
"rimraf": "^6.0.1",
|
|
181
|
-
"rollup": "^4.
|
|
181
|
+
"rollup": "^4.34.5",
|
|
182
182
|
"rollup-plugin-clear": "^2.0.7",
|
|
183
183
|
"sinon": "^19.0.2",
|
|
184
184
|
"sinon-chai": "^4.0.0",
|
|
185
185
|
"storage-mock": "^2.1.0",
|
|
186
|
-
"storybook": "8.5.
|
|
186
|
+
"storybook": "8.5.3",
|
|
187
187
|
"stylelint": "^16.14.1",
|
|
188
188
|
"svg-inline-loader": "^0.8.2",
|
|
189
189
|
"teamcity-service-messages": "^0.1.14",
|
|
190
190
|
"terser-webpack-plugin": "^5.3.11",
|
|
191
191
|
"typescript": "~5.7.3",
|
|
192
|
-
"typescript-eslint": "^8.
|
|
193
|
-
"vitest": "^3.0.
|
|
192
|
+
"typescript-eslint": "^8.23.0",
|
|
193
|
+
"vitest": "^3.0.5",
|
|
194
194
|
"vitest-teamcity-reporter": "^0.3.1",
|
|
195
195
|
"wallaby-webpack": "^3.9.16",
|
|
196
196
|
"webpack": "^5.97.1",
|
|
@@ -245,7 +245,7 @@
|
|
|
245
245
|
"just-debounce-it": "^3.2.0",
|
|
246
246
|
"memoize-one": "^6.0.0",
|
|
247
247
|
"postcss": "^8.5.1",
|
|
248
|
-
"postcss-calc": "^10.1.
|
|
248
|
+
"postcss-calc": "^10.1.1",
|
|
249
249
|
"postcss-flexbugs-fixes": "^5.0.2",
|
|
250
250
|
"postcss-font-family-system-ui": "^5.0.0",
|
|
251
251
|
"postcss-loader": "^8.1.1",
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import { PureComponent } from 'react';
|
|
2
|
-
import { ListDataItemProps } from './consts';
|
|
3
|
-
/**
|
|
4
|
-
* @constructor
|
|
5
|
-
* @extends {ReactComponent}
|
|
6
|
-
*/
|
|
7
|
-
export default class ListLink<T> extends PureComponent<ListDataItemProps<T>> {
|
|
8
|
-
render(): import("react/jsx-runtime").JSX.Element;
|
|
9
|
-
}
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { PureComponent } from 'react';
|
|
3
|
-
import Link, { linkHOC } from '../link/link';
|
|
4
|
-
import dataTests from '../global/data-tests';
|
|
5
|
-
import { getListClasses } from './list__classes';
|
|
6
|
-
/**
|
|
7
|
-
* @constructor
|
|
8
|
-
* @extends {ReactComponent}
|
|
9
|
-
*/
|
|
10
|
-
export default class ListLink extends PureComponent {
|
|
11
|
-
render() {
|
|
12
|
-
const { scrolling, 'data-test': dataTest, className, label, hover, description, rgItemType, url, onCheckboxChange, disabled, LinkComponent, compact, hoverClassName, children, ...restProps } = this.props;
|
|
13
|
-
const classes = getListClasses(this.props);
|
|
14
|
-
const Comp = LinkComponent ? linkHOC(LinkComponent) : Link;
|
|
15
|
-
return (_jsx(Comp, { pseudo: !this.props.href, ...restProps, className: classes, "data-test": dataTests('ring-list-link', dataTest), children: label ?? children }));
|
|
16
|
-
}
|
|
17
|
-
}
|