@jetbrains/ring-ui-built 7.0.0-beta.9 → 7.0.0
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.
- package/components/_helpers/anchor.js +4 -4
- package/components/_helpers/button__classes.js +13 -13
- package/components/_helpers/caption.js +3 -3
- package/components/_helpers/card.js +23 -20
- package/components/_helpers/date-picker.js +2 -2
- package/components/_helpers/dialog__body-scroll-preventer.js +4 -4
- package/components/_helpers/grid.js +2 -2
- package/components/_helpers/header.js +2 -2
- package/components/_helpers/heading.js +2 -2
- package/components/_helpers/icon__svg.js +6 -6
- package/components/_helpers/input.js +14 -14
- package/components/_helpers/island.js +2 -2
- package/components/_helpers/link.js +2 -2
- package/components/_helpers/list.js +2 -2
- package/components/_helpers/query-assist__suggestions.js +7 -7
- package/components/_helpers/select__filter.js +3 -3
- package/components/_helpers/services-link.js +3 -3
- package/components/_helpers/sidebar.js +9 -9
- package/components/_helpers/tab-link.js +7 -7
- package/components/_helpers/table.js +2 -2
- package/components/_helpers/theme.js +10 -10
- package/components/_helpers/title.js +7 -7
- package/components/alert/alert.d.ts +2 -2
- package/components/alert/alert.js +12 -13
- package/components/alert/container.js +4 -4
- package/components/alert-service/alert-service.js +0 -1
- package/components/auth/auth.js +0 -1
- package/components/auth/auth__core.js +1 -2
- package/components/auth/background-flow.js +2 -2
- package/components/auth/down-notification.js +5 -6
- package/components/auth/iframe-flow.js +0 -1
- package/components/auth/storage.js +0 -1
- package/components/auth/token-validator.js +1 -1
- package/components/auth-dialog/auth-dialog.js +10 -11
- package/components/auth-dialog-service/auth-dialog-service.js +2 -3
- package/components/avatar/avatar.js +6 -6
- package/components/breadcrumbs/breadcrumbs.js +2 -2
- package/components/button/button.js +4 -4
- package/components/button/button__classes.d.ts +1 -1
- package/components/button-group/button-group.js +3 -4
- package/components/button-set/button-set.js +2 -3
- package/components/button-toolbar/button-toolbar.d.ts +1 -1
- package/components/button-toolbar/button-toolbar.js +2 -3
- package/components/checkbox/checkbox.js +8 -8
- package/components/clipboard/clipboard.js +0 -1
- package/components/code/code.d.ts +1 -1
- package/components/code/code.js +7 -7
- package/components/collapse/collapse-content.d.ts +1 -2
- package/components/collapse/collapse-content.js +25 -11
- package/components/collapse/collapse-control.js +0 -1
- package/components/confirm/confirm.d.ts +2 -2
- package/components/confirm/confirm.js +3 -4
- package/components/confirm-service/confirm-service.d.ts +1 -1
- package/components/confirm-service/confirm-service.js +1 -2
- package/components/content-layout/content-layout.js +4 -4
- package/components/contenteditable/contenteditable.d.ts +1 -1
- package/components/control-help/control-help.js +2 -2
- package/components/control-label/control-label.js +5 -5
- package/components/data-list/data-list.d.ts +2 -2
- package/components/data-list/data-list.js +6 -7
- package/components/data-list/data-list.mock.js +16 -10
- package/components/data-list/item.js +8 -9
- package/components/date-picker/date-input.js +2 -2
- package/components/date-picker/date-picker.d.ts +2 -1
- package/components/date-picker/date-picker.js +12 -12
- package/components/date-picker/date-popup.js +4 -5
- package/components/date-picker/day.js +15 -15
- package/components/date-picker/month-names.js +5 -5
- package/components/date-picker/month-slider.js +3 -3
- package/components/date-picker/month.js +3 -3
- package/components/date-picker/months.js +3 -3
- package/components/date-picker/weekdays.js +4 -4
- package/components/date-picker/years.js +5 -5
- package/components/dialog/dialog.d.ts +1 -0
- package/components/dialog/dialog.js +22 -18
- package/components/dropdown/dropdown.d.ts +2 -2
- package/components/dropdown/dropdown.js +2 -3
- package/components/dropdown-menu/dropdown-menu.js +0 -1
- package/components/editable-heading/editable-heading.js +19 -19
- package/components/error-bubble/error-bubble.js +5 -5
- package/components/error-message/error-message.js +6 -7
- package/components/footer/footer.js +9 -10
- package/components/form/form.js +2 -3
- package/components/global/compose.js +0 -2
- package/components/global/data-tests.js +0 -1
- package/components/global/theme.js +1 -2
- package/components/grid/col.js +5 -4
- package/components/grid/grid.js +5 -4
- package/components/grid/row.js +5 -5
- package/components/group/group.js +5 -3
- package/components/header/header-icon.js +4 -4
- package/components/header/header.js +3 -4
- package/components/header/links.js +2 -2
- package/components/header/logo.js +2 -2
- package/components/header/profile.d.ts +2 -2
- package/components/header/profile.js +10 -11
- package/components/header/services-link.js +0 -1
- package/components/header/services.js +7 -8
- package/components/header/smart-profile.js +0 -1
- package/components/header/smart-services.js +0 -1
- package/components/header/tray.js +3 -3
- package/components/heading/heading.js +3 -3
- package/components/http/http.d.ts +3 -3
- package/components/icon/icon.js +8 -6
- package/components/input/input-legacy.js +2 -3
- package/components/input-size/input-size.js +2 -3
- package/components/island/content.js +7 -7
- package/components/island/header.js +4 -4
- package/components/island/island.js +4 -5
- package/components/link/link.js +7 -8
- package/components/list/list.d.ts +1 -1
- package/components/list/list.js +5 -6
- package/components/list/list__custom.js +5 -6
- package/components/list/list__hint.js +2 -2
- package/components/list/list__item.js +22 -23
- package/components/list/list__link.js +5 -6
- package/components/list/list__separator.js +3 -3
- package/components/list/list__title.js +5 -5
- package/components/list/list__users-groups-source.js +0 -1
- package/components/loader/loader.js +0 -1
- package/components/loader/loader__core.js +5 -5
- package/components/loader-inline/loader-inline.js +3 -4
- package/components/loader-screen/loader-screen.js +4 -5
- package/components/login-dialog/login-dialog.js +6 -7
- package/components/login-dialog/service.js +1 -2
- package/components/markdown/markdown.d.ts +2 -2
- package/components/markdown/markdown.js +6 -6
- package/components/message/message.js +9 -10
- package/components/old-browsers-message/old-browsers-message.js +0 -1
- package/components/old-browsers-message/old-browsers-message__stop.js +0 -1
- package/components/old-browsers-message/white-list.js +2 -3
- package/components/pager/pager.js +9 -10
- package/components/panel/panel.js +2 -2
- package/components/permissions/permissions.js +0 -1
- package/components/permissions/permissions__cache.js +2 -3
- package/components/popup/popup.js +6 -7
- package/components/popup/position.js +2 -2
- package/components/popup-menu/popup-menu.js +0 -1
- package/components/progress-bar/progress-bar.d.ts +2 -2
- package/components/progress-bar/progress-bar.js +5 -5
- package/components/query-assist/query-assist.js +27 -28
- package/components/query-assist/query-assist__suggestions.js +0 -1
- package/components/radio/radio__item.js +5 -5
- package/components/scrollable-section/scrollable-section.js +6 -6
- package/components/select/select.d.ts +1 -1
- package/components/select/select.js +25 -25
- package/components/select/select__filter.js +0 -1
- package/components/select/select__popup.js +11 -12
- package/components/shortcuts/core.js +1 -1
- package/components/slider/slider.js +20 -20
- package/components/storage/storage.js +0 -1
- package/components/storage/storage__local.js +0 -1
- package/components/style.css +1 -1
- package/components/tab-trap/tab-trap.js +2 -2
- package/components/table/cell.js +2 -3
- package/components/table/header-cell.js +8 -9
- package/components/table/header.d.ts +1 -2
- package/components/table/header.js +7 -14
- package/components/table/row-with-focus-sensor.js +0 -1
- package/components/table/row.d.ts +0 -1
- package/components/table/row.js +11 -18
- package/components/table/selection.d.ts +2 -3
- package/components/table/simple-table.js +2 -3
- package/components/table/smart-table.js +0 -1
- package/components/table/table.d.ts +0 -1
- package/components/table/table.js +17 -20
- package/components/tabs/collapsible-more.d.ts +1 -1
- package/components/tabs/collapsible-more.js +6 -7
- package/components/tabs/collapsible-tab.js +4 -5
- package/components/tabs/collapsible-tabs.d.ts +2 -2
- package/components/tabs/collapsible-tabs.js +5 -6
- package/components/tabs/dumb-tabs.js +5 -6
- package/components/tabs/smart-tabs.js +0 -1
- package/components/tabs/tab-link.js +0 -1
- package/components/tabs/tab.js +0 -1
- package/components/tabs/tabs.js +0 -1
- package/components/tag/tag.d.ts +1 -1
- package/components/tag/tag.js +14 -15
- package/components/tags-input/tags-input.js +8 -9
- package/components/tags-list/tags-list.d.ts +2 -2
- package/components/tags-list/tags-list.js +2 -2
- package/components/text/text.js +7 -7
- package/components/toggle/toggle.d.ts +2 -2
- package/components/toggle/toggle.js +12 -13
- package/components/tooltip/tooltip.js +12 -6
- package/components/user-agreement/service.js +1 -2
- package/components/user-agreement/user-agreement.js +7 -8
- package/components/user-card/card.js +3 -2
- package/components/user-card/smart-user-card-tooltip.js +5 -4
- package/components/user-card/tooltip.js +5 -4
- package/components/user-card/user-card.js +3 -2
- package/package.json +6 -5
- package/typings.d.ts +2 -4
- package/components/_helpers/badge.js +0 -3
- package/components/badge/badge.d.ts +0 -14
- package/components/badge/badge.js +0 -47
- package/components/island-legacy/content-legacy.d.ts +0 -5
- package/components/island-legacy/content-legacy.js +0 -23
- package/components/island-legacy/header-legacy.d.ts +0 -5
- package/components/island-legacy/header-legacy.js +0 -26
- package/components/island-legacy/island-legacy.d.ts +0 -7
- package/components/island-legacy/island-legacy.js +0 -25
@@ -5,7 +5,7 @@ import { isNodeInVisiblePartOfPage } from '../global/dom.js';
|
|
5
5
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
6
6
|
import 'core-js/modules/es.regexp.exec.js';
|
7
7
|
|
8
|
-
var
|
8
|
+
var styles = {"trapButton":"trapButton_rui_11f0"};
|
9
9
|
|
10
10
|
const _excluded = ["children", "trapDisabled", "autoFocusFirst", "focusBackOnClose", "focusBackOnExit"];
|
11
11
|
const FOCUSABLE_ELEMENTS = 'input, button, select, textarea, a[href], *[tabindex]:not([data-trap-button]):not([data-scrollable-container])';
|
@@ -130,7 +130,7 @@ const TabTrap = /*#__PURE__*/forwardRef(function TabTrap(_ref, ref) {
|
|
130
130
|
// eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
|
131
131
|
tabIndex: 0,
|
132
132
|
ref: trapButtonNodeRef,
|
133
|
-
className:
|
133
|
+
className: styles.trapButton,
|
134
134
|
onFocus: focusLastIfEnabled,
|
135
135
|
onBlur: handleBlurIfWithoutFocus,
|
136
136
|
"data-trap-button": true
|
package/components/table/cell.js
CHANGED
@@ -2,14 +2,13 @@ import { b as _objectSpread2 } from '../_helpers/_rollupPluginBabelHelpers.js';
|
|
2
2
|
import { PureComponent } from 'react';
|
3
3
|
import classNames from 'classnames';
|
4
4
|
import joinDataTestAttributes from '../global/data-tests.js';
|
5
|
-
import {
|
5
|
+
import { s as style } from '../_helpers/table.js';
|
6
6
|
import { jsx } from 'react/jsx-runtime';
|
7
|
-
import 'core-js/modules/es.array.reduce.js';
|
8
7
|
import 'core-js/modules/web.dom-collections.iterator.js';
|
9
8
|
|
10
9
|
class Cell extends PureComponent {
|
11
10
|
render() {
|
12
|
-
const classes = classNames(
|
11
|
+
const classes = classNames(style.cell, this.props.className);
|
13
12
|
return /*#__PURE__*/jsx("td", _objectSpread2(_objectSpread2({}, this.props), {}, {
|
14
13
|
className: classes,
|
15
14
|
"data-test": joinDataTestAttributes('ring-table-cell', this.props['data-test']),
|
@@ -6,7 +6,7 @@ import sortableIcon from '@jetbrains/icons/unsorted-10px';
|
|
6
6
|
import chevronDown from '@jetbrains/icons/chevron-10px';
|
7
7
|
import Icon from '../icon/icon.js';
|
8
8
|
import joinDataTestAttributes from '../global/data-tests.js';
|
9
|
-
import {
|
9
|
+
import { s as style } from '../_helpers/table.js';
|
10
10
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
11
11
|
import 'util-deprecate';
|
12
12
|
import '../icon/icon__constants.js';
|
@@ -14,7 +14,6 @@ import '../_helpers/icon__svg.js';
|
|
14
14
|
import 'core-js/modules/es.regexp.exec.js';
|
15
15
|
import 'core-js/modules/es.string.replace.js';
|
16
16
|
import '../global/memoize.js';
|
17
|
-
import 'core-js/modules/es.array.reduce.js';
|
18
17
|
|
19
18
|
const _excluded = ["className", "column", "onSort", "sortKey", "sortOrder", "data-test"];
|
20
19
|
class HeaderCell extends PureComponent {
|
@@ -54,11 +53,11 @@ class HeaderCell extends PureComponent {
|
|
54
53
|
this.sorted = sortKey === column.id;
|
55
54
|
const glyph = this.sorted ? chevronDown : sortableIcon;
|
56
55
|
const classes = classNames(className, column.headerClassName, {
|
57
|
-
[
|
58
|
-
[
|
59
|
-
[
|
60
|
-
[
|
61
|
-
[
|
56
|
+
[style.headerCell]: true,
|
57
|
+
[style.headerCellSortable]: this.sortable,
|
58
|
+
[style.headerCellSorted]: this.sorted,
|
59
|
+
[style.sortedUp]: sortOrder && this.sorted,
|
60
|
+
[style.cellRight]: column.rightAlign
|
62
61
|
});
|
63
62
|
return /*#__PURE__*/jsxs("th", _objectSpread2(_objectSpread2({}, restProps), {}, {
|
64
63
|
className: classes,
|
@@ -69,10 +68,10 @@ class HeaderCell extends PureComponent {
|
|
69
68
|
role: "presentation",
|
70
69
|
children: this.props.children
|
71
70
|
}), column.getHeaderValue ? column.getHeaderValue() : column.title, this.sortable && /*#__PURE__*/jsx("span", {
|
72
|
-
className:
|
71
|
+
className: style.sorter,
|
73
72
|
children: /*#__PURE__*/jsx(Icon, {
|
74
73
|
glyph: glyph,
|
75
|
-
className:
|
74
|
+
className: style.icon
|
76
75
|
})
|
77
76
|
})]
|
78
77
|
}));
|
@@ -13,7 +13,6 @@ export interface HeaderProps {
|
|
13
13
|
sortOrder: boolean;
|
14
14
|
caption?: string | null | undefined;
|
15
15
|
checkboxDisabled?: boolean | undefined;
|
16
|
-
maxColSpan?: number;
|
17
16
|
}
|
18
17
|
export default class Header extends PureComponent<HeaderProps> {
|
19
18
|
static defaultProps: {
|
@@ -29,7 +28,7 @@ export default class Header extends PureComponent<HeaderProps> {
|
|
29
28
|
};
|
30
29
|
id: string;
|
31
30
|
onCheckboxFocus: (event: SyntheticEvent<HTMLElement>) => void;
|
32
|
-
createCells(widths?: never[]):
|
31
|
+
createCells(widths?: never[]): import("react").JSX.Element[];
|
33
32
|
render(): import("react").JSX.Element;
|
34
33
|
}
|
35
34
|
export type HeaderAttrs = JSX.LibraryManagedAttributes<typeof Header, HeaderProps>;
|
@@ -4,7 +4,7 @@ import { PureComponent } from 'react';
|
|
4
4
|
import classNames from 'classnames';
|
5
5
|
import Checkbox from '../checkbox/checkbox.js';
|
6
6
|
import getUID from '../global/get-uid.js';
|
7
|
-
import {
|
7
|
+
import { s as style } from '../_helpers/table.js';
|
8
8
|
import HeaderCell from './header-cell.js';
|
9
9
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
10
10
|
import '@jetbrains/icons/checkmark-12px';
|
@@ -22,7 +22,6 @@ import '../control-help/control-help.js';
|
|
22
22
|
import '@jetbrains/icons/unsorted-10px';
|
23
23
|
import '@jetbrains/icons/chevron-10px';
|
24
24
|
import '../global/data-tests.js';
|
25
|
-
import 'core-js/modules/es.array.reduce.js';
|
26
25
|
|
27
26
|
class Header extends PureComponent {
|
28
27
|
constructor() {
|
@@ -45,7 +44,7 @@ class Header extends PureComponent {
|
|
45
44
|
sortKey,
|
46
45
|
sortOrder
|
47
46
|
} = this.props;
|
48
|
-
const metaColumnClasses = classNames(
|
47
|
+
const metaColumnClasses = classNames(style.metaColumn, style.headerMetaColumn);
|
49
48
|
const metaColumn = /*#__PURE__*/jsx("div", {
|
50
49
|
className: metaColumnClasses,
|
51
50
|
children: selectable && /*#__PURE__*/jsx(Checkbox, {
|
@@ -56,7 +55,6 @@ class Header extends PureComponent {
|
|
56
55
|
onFocus: this.onCheckboxFocus
|
57
56
|
})
|
58
57
|
});
|
59
|
-
let colSpan = 0;
|
60
58
|
return columns.map((column, index) => {
|
61
59
|
const columnStyle = widths[index] ? {
|
62
60
|
width: widths[index]
|
@@ -68,13 +66,8 @@ class Header extends PureComponent {
|
|
68
66
|
sortOrder,
|
69
67
|
style: columnStyle
|
70
68
|
};
|
71
|
-
colSpan += column.colSpan || 1;
|
72
|
-
if (colSpan > (this.props.maxColSpan || Infinity)) {
|
73
|
-
return null;
|
74
|
-
}
|
75
69
|
return /*#__PURE__*/jsx(HeaderCell, _objectSpread2(_objectSpread2({
|
76
|
-
"data-test": column.id
|
77
|
-
colSpan: column.colSpan
|
70
|
+
"data-test": column.id
|
78
71
|
}, props), {}, {
|
79
72
|
children: index === 0 && (draggable || selectable) && metaColumn
|
80
73
|
}), column.id);
|
@@ -94,19 +87,19 @@ class Header extends PureComponent {
|
|
94
87
|
top: topStickOffset
|
95
88
|
},
|
96
89
|
className: classNames({
|
97
|
-
[
|
98
|
-
[
|
90
|
+
[style.tableHead]: true,
|
91
|
+
[style.subHeaderSticky]: sticky
|
99
92
|
}),
|
100
93
|
children: [caption && /*#__PURE__*/jsx("tr", {
|
101
94
|
"data-test": "ring-table-header-row",
|
102
95
|
children: /*#__PURE__*/jsx("th", {
|
103
|
-
className: classNames(
|
96
|
+
className: classNames(style.headerCell, style.caption),
|
104
97
|
colSpan: regularCells.length + 1,
|
105
98
|
"data-test": "ring-table-header-cell",
|
106
99
|
children: caption
|
107
100
|
})
|
108
101
|
}), /*#__PURE__*/jsx("tr", {
|
109
|
-
className:
|
102
|
+
className: style.subHeader,
|
110
103
|
"data-test": "ring-table-header-row",
|
111
104
|
children: regularCells
|
112
105
|
})]
|
@@ -37,7 +37,6 @@ import 'combokeys';
|
|
37
37
|
import '../global/sniffer.js';
|
38
38
|
import 'sniffr';
|
39
39
|
import '../global/data-tests.js';
|
40
|
-
import 'core-js/modules/es.array.reduce.js';
|
41
40
|
import '../tab-trap/tab-trap.js';
|
42
41
|
import '../popup/position.js';
|
43
42
|
import 'core-js/modules/es.array.sort.js';
|
@@ -6,7 +6,6 @@ import { SelectionItem } from './selection';
|
|
6
6
|
export interface RowProps<T extends SelectionItem> extends Omit<HTMLAttributes<HTMLTableRowElement>, 'onClick' | 'onDoubleClick' | 'onSelect'>, FocusSensorAddProps<HTMLTableRowElement> {
|
7
7
|
item: T;
|
8
8
|
columns: readonly Column<T>[] | ((item: T) => readonly Column<T>[]);
|
9
|
-
maxColSpan?: number;
|
10
9
|
selectable: boolean;
|
11
10
|
showFocus: boolean;
|
12
11
|
draggable: boolean;
|
package/components/table/row.js
CHANGED
@@ -12,7 +12,7 @@ import joinDataTestAttributes from '../global/data-tests.js';
|
|
12
12
|
import getUID from '../global/get-uid.js';
|
13
13
|
import { createComposedRef } from '../global/composeRefs.js';
|
14
14
|
import Cell from './cell.js';
|
15
|
-
import {
|
15
|
+
import { s as style } from '../_helpers/table.js';
|
16
16
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
17
17
|
import '@jetbrains/icons/checkmark-12px';
|
18
18
|
import '@jetbrains/icons/remove-12px';
|
@@ -42,17 +42,16 @@ import 'core-js/modules/es.array.sort.js';
|
|
42
42
|
import '../popup/popup.consts.js';
|
43
43
|
import '../popup/popup.target.js';
|
44
44
|
import '../_helpers/theme.js';
|
45
|
-
import 'core-js/modules/es.array.reduce.js';
|
46
45
|
import 'memoize-one';
|
47
46
|
|
48
|
-
const _excluded = ["item", "columns", "selectable", "selected", "showFocus", "draggable", "alwaysShowDragHandle", "dragHandleTitle", "level", "collapsible", "parentCollapsible", "collapsed", "
|
47
|
+
const _excluded = ["item", "columns", "selectable", "selected", "showFocus", "draggable", "alwaysShowDragHandle", "dragHandleTitle", "level", "collapsible", "parentCollapsible", "collapsed", "onCollapse", "onExpand", "showDisabledSelection", "onSelect", "checkboxTooltip", "innerRef", "focused", "autofocus", "onFocusReset", "onFocusRestore", "onHover", "className", "metaColumnClassName", "data-test"];
|
49
48
|
const DragHandle = _ref => {
|
50
49
|
let {
|
51
50
|
alwaysShowDragHandle,
|
52
51
|
dragHandleTitle = 'Drag to reorder'
|
53
52
|
} = _ref;
|
54
|
-
const classes = classNames(
|
55
|
-
[
|
53
|
+
const classes = classNames(style.dragHandle, {
|
54
|
+
[style.visibleDragHandle]: alwaysShowDragHandle
|
56
55
|
});
|
57
56
|
return /*#__PURE__*/jsx(Button, {
|
58
57
|
"data-movable-handle": true,
|
@@ -125,7 +124,6 @@ class Row extends PureComponent {
|
|
125
124
|
collapsible,
|
126
125
|
parentCollapsible,
|
127
126
|
collapsed,
|
128
|
-
maxColSpan,
|
129
127
|
onCollapse,
|
130
128
|
onExpand,
|
131
129
|
showDisabledSelection,
|
@@ -143,15 +141,15 @@ class Row extends PureComponent {
|
|
143
141
|
} = _this$props,
|
144
142
|
restProps = _objectWithoutProperties(_this$props, _excluded);
|
145
143
|
const classes = classNames(className, {
|
146
|
-
[
|
147
|
-
[
|
148
|
-
[
|
144
|
+
[style.row]: true,
|
145
|
+
[style.rowFocused]: showFocus,
|
146
|
+
[style.rowSelected]: selected
|
149
147
|
});
|
150
148
|
const testAttrs = {
|
151
149
|
'data-test-focused': showFocus || undefined,
|
152
150
|
'data-test-selected': selected || undefined
|
153
151
|
};
|
154
|
-
const metaColumnClasses = classNames(metaColumnClassName,
|
152
|
+
const metaColumnClasses = classNames(metaColumnClassName, style.metaColumn);
|
155
153
|
const SUBITEM_OFFSET = 30;
|
156
154
|
const COLLAPSIBLE_PARENT_OFFSET = 20;
|
157
155
|
const gap = level * SUBITEM_OFFSET + (parentCollapsible ? COLLAPSIBLE_PARENT_OFFSET : 0);
|
@@ -182,29 +180,24 @@ class Row extends PureComponent {
|
|
182
180
|
disabled: true
|
183
181
|
})
|
184
182
|
}), collapsible && collapsed && /*#__PURE__*/jsx(Button, {
|
185
|
-
className:
|
183
|
+
className: style.rowCollapseExpandButton,
|
186
184
|
icon: chevronRightIcon,
|
187
185
|
onClick: () => onExpand(item)
|
188
186
|
}), collapsible && !collapsed && /*#__PURE__*/jsx(Button, {
|
189
|
-
className:
|
187
|
+
className: style.rowCollapseExpandButton,
|
190
188
|
icon: chevronDownIcon,
|
191
189
|
onClick: () => onCollapse(item)
|
192
190
|
})]
|
193
191
|
});
|
194
192
|
const columns = typeof columnProps === 'function' ? columnProps(item) : columnProps;
|
195
|
-
let colSpan = 0;
|
196
193
|
const cells = columns.map((column, index) => {
|
197
194
|
const getValue = column.getValue || (() => item[column.id]);
|
198
195
|
const getDataTest = column.getDataTest || (() => column.id);
|
199
196
|
const value = getValue(item, column);
|
200
197
|
const cellClasses = classNames({
|
201
|
-
[
|
198
|
+
[style.cellRight]: column.rightAlign
|
202
199
|
}, column.className);
|
203
200
|
const showMetaColumn = draggable || selectable || collapsible || showDisabledSelection || !!level;
|
204
|
-
colSpan += column.colSpan || 1;
|
205
|
-
if (colSpan > (maxColSpan || Infinity)) {
|
206
|
-
return null;
|
207
|
-
}
|
208
201
|
return /*#__PURE__*/jsxs(Cell, {
|
209
202
|
colSpan: column.colSpan,
|
210
203
|
className: cellClasses,
|
@@ -1,6 +1,5 @@
|
|
1
1
|
export interface SelectionItem {
|
2
2
|
id: string | number;
|
3
|
-
[key: string]: unknown;
|
4
3
|
}
|
5
4
|
export interface TableSelectionConfig<T extends SelectionItem> {
|
6
5
|
data?: readonly T[] | undefined;
|
@@ -17,13 +16,13 @@ export interface CloneWithConfig<T> {
|
|
17
16
|
}
|
18
17
|
export default class Selection<T extends SelectionItem> {
|
19
18
|
private _rawData;
|
20
|
-
protected _getChildren: (
|
19
|
+
protected _getChildren: (item: T) => readonly T[];
|
21
20
|
protected _data: Set<T>;
|
22
21
|
protected _selected: Set<T>;
|
23
22
|
protected _focused: T | null;
|
24
23
|
private _getKey;
|
25
24
|
protected _isItemSelectable: (item: T) => boolean | undefined;
|
26
|
-
constructor({ data, selected, focused, getKey, getChildren, isItemSelectable }?: TableSelectionConfig<T>);
|
25
|
+
constructor({ data, selected, focused, getKey, getChildren, isItemSelectable, }?: TableSelectionConfig<T>);
|
27
26
|
protected _buildData(data: readonly T[] | null | undefined): Set<T>;
|
28
27
|
protected _buildSelected(data: Set<T>, selected: Set<T>): Set<T>;
|
29
28
|
cloneWith({ data, selected, focused }: CloneWithConfig<T>): Selection<T>;
|
@@ -2,7 +2,7 @@ import { _ as _defineProperty, b as _objectSpread2 } from '../_helpers/_rollupPl
|
|
2
2
|
import 'core-js/modules/web.dom-collections.iterator.js';
|
3
3
|
import { PureComponent } from 'react';
|
4
4
|
import classNames from 'classnames';
|
5
|
-
import {
|
5
|
+
import { s as style } from '../_helpers/table.js';
|
6
6
|
import TableContainer from './table.js';
|
7
7
|
import Selection$1 from './selection.js';
|
8
8
|
import { jsx } from 'react/jsx-runtime';
|
@@ -19,7 +19,6 @@ import '../global/sniffer.js';
|
|
19
19
|
import 'sniffr';
|
20
20
|
import '../loader/loader.js';
|
21
21
|
import '../global/data-tests.js';
|
22
|
-
import 'core-js/modules/es.array.reduce.js';
|
23
22
|
import '../loader/loader__core.js';
|
24
23
|
import '../global/dom.js';
|
25
24
|
import './header.js';
|
@@ -67,7 +66,7 @@ class SimpleTable extends PureComponent {
|
|
67
66
|
data: this.props.data
|
68
67
|
})
|
69
68
|
});
|
70
|
-
_defineProperty(this, "classes", classNames(
|
69
|
+
_defineProperty(this, "classes", classNames(style.disabledHover, this.props.className));
|
71
70
|
}
|
72
71
|
render() {
|
73
72
|
return /*#__PURE__*/jsx(TableContainer, _objectSpread2(_objectSpread2({}, this.props), {}, {
|
@@ -18,7 +18,6 @@ import '../global/sniffer.js';
|
|
18
18
|
import 'sniffr';
|
19
19
|
import '../loader/loader.js';
|
20
20
|
import '../global/data-tests.js';
|
21
|
-
import 'core-js/modules/es.array.reduce.js';
|
22
21
|
import '../loader/loader__core.js';
|
23
22
|
import '../global/dom.js';
|
24
23
|
import './header.js';
|
@@ -18,7 +18,6 @@ export interface ReorderParams<T> {
|
|
18
18
|
export interface TableProps<T extends SelectionItem> extends FocusSensorAddProps<HTMLTableRowElement>, SelectionShortcutsAddProps<T>, DisableHoverAddProps {
|
19
19
|
data: readonly T[];
|
20
20
|
columns: readonly Column<T>[] | ((item: T | null) => readonly Column<T>[]);
|
21
|
-
maxColSpan?: number;
|
22
21
|
isItemSelectable: (item: T) => boolean;
|
23
22
|
loading: boolean;
|
24
23
|
onSort: (params: SortParams) => void;
|
@@ -8,7 +8,7 @@ import getUID from '../global/get-uid.js';
|
|
8
8
|
import Shortcuts from '../shortcuts/shortcuts.js';
|
9
9
|
import Loader from '../loader/loader.js';
|
10
10
|
import Header from './header.js';
|
11
|
-
import {
|
11
|
+
import { s as style } from '../_helpers/table.js';
|
12
12
|
import selectionShortcutsHOC from './selection-shortcuts-hoc.js';
|
13
13
|
import disableHoverHOC from './disable-hover-hoc.js';
|
14
14
|
import RowWithFocusSensorCallbacks from './row-with-focus-sensor.js';
|
@@ -21,7 +21,6 @@ import 'combokeys';
|
|
21
21
|
import '../global/sniffer.js';
|
22
22
|
import 'sniffr';
|
23
23
|
import '../global/data-tests.js';
|
24
|
-
import 'core-js/modules/es.array.reduce.js';
|
25
24
|
import '../loader/loader__core.js';
|
26
25
|
import '../global/dom.js';
|
27
26
|
import '../checkbox/checkbox.js';
|
@@ -190,21 +189,20 @@ class Table extends PureComponent {
|
|
190
189
|
onItemDoubleClick,
|
191
190
|
onItemClick,
|
192
191
|
renderEmpty,
|
193
|
-
maxColSpan,
|
194
192
|
RowComponent
|
195
193
|
} = this.props;
|
196
194
|
// NOTE: Do not construct new object per render because it causes all rows rerendering
|
195
|
+
const columnsArray = typeof columns === 'function' ? columns(null) : columns;
|
197
196
|
const headerProps = {
|
198
197
|
caption,
|
199
198
|
selectable,
|
200
199
|
draggable,
|
201
|
-
columns:
|
200
|
+
columns: columnsArray,
|
202
201
|
onSort,
|
203
202
|
sortKey,
|
204
203
|
sortOrder,
|
205
204
|
sticky: stickyHeader,
|
206
|
-
topStickOffset: stickyHeaderOffset
|
207
|
-
maxColSpan: this.props.maxColSpan
|
205
|
+
topStickOffset: stickyHeaderOffset
|
208
206
|
};
|
209
207
|
const selectedSize = selection.getSelected().size;
|
210
208
|
const allSelectedSize = selection.selectAll().getSelected().size;
|
@@ -212,15 +210,15 @@ class Table extends PureComponent {
|
|
212
210
|
headerProps.onCheckboxChange = this.onCheckboxChange;
|
213
211
|
headerProps.checkboxDisabled = this.props.data.length === 0;
|
214
212
|
const wrapperClasses = classNames({
|
215
|
-
[
|
216
|
-
[
|
213
|
+
[style.tableWrapper]: true,
|
214
|
+
[style.loading]: loading
|
217
215
|
});
|
218
216
|
const classes = classNames(this.props.className, {
|
219
|
-
[
|
220
|
-
[
|
221
|
-
[
|
222
|
-
[
|
223
|
-
[
|
217
|
+
[style.table]: true,
|
218
|
+
[style.wideFirstColumn]: this.props.wideFirstColumn,
|
219
|
+
[style.multiSelection]: selection.getSelected().size > 0,
|
220
|
+
[style.userSelectNone]: this.state.userSelectNone,
|
221
|
+
[style.disabledHover]: this.props.disabledHover
|
224
222
|
});
|
225
223
|
const renderList = _ref3 => {
|
226
224
|
let {
|
@@ -229,8 +227,8 @@ class Table extends PureComponent {
|
|
229
227
|
} = _ref3;
|
230
228
|
const empty = /*#__PURE__*/jsx("tr", {
|
231
229
|
children: /*#__PURE__*/jsx("td", {
|
232
|
-
colSpan:
|
233
|
-
className:
|
230
|
+
colSpan: columnsArray.length || 1,
|
231
|
+
className: style.tableMessage,
|
234
232
|
children: renderEmpty ? renderEmpty() : null
|
235
233
|
})
|
236
234
|
});
|
@@ -279,21 +277,20 @@ class Table extends PureComponent {
|
|
279
277
|
showDisabledSelection: isDisabledSelectionVisible(value),
|
280
278
|
checkboxTooltip: getCheckboxTooltip(value),
|
281
279
|
className: classNames(getItemClassName(value), {
|
282
|
-
[
|
280
|
+
[style.draggingRow]: isDragged
|
283
281
|
}),
|
284
282
|
metaColumnClassName: getMetaColumnClassName(value),
|
285
283
|
draggable: draggable,
|
286
284
|
alwaysShowDragHandle: alwaysShowDragHandle,
|
287
285
|
dragHandleTitle: dragHandleTitle,
|
288
286
|
columns: columns,
|
289
|
-
"data-test": getItemDataTest(value)
|
290
|
-
maxColSpan: maxColSpan
|
287
|
+
"data-test": getItemDataTest(value)
|
291
288
|
}, restProps), {}, {
|
292
289
|
key: (_restProps$key = restProps.key) !== null && _restProps$key !== void 0 ? _restProps$key : getItemKey(value)
|
293
290
|
}));
|
294
291
|
return isDragged ? /*#__PURE__*/jsx("table", {
|
295
292
|
style: _objectSpread2({}, props.style),
|
296
|
-
className:
|
293
|
+
className: style.draggingTable,
|
297
294
|
children: /*#__PURE__*/jsx("tbody", {
|
298
295
|
children: row
|
299
296
|
})
|
@@ -321,7 +318,7 @@ class Table extends PureComponent {
|
|
321
318
|
}))
|
322
319
|
})
|
323
320
|
}), loading && /*#__PURE__*/jsx("div", {
|
324
|
-
className:
|
321
|
+
className: style.loadingOverlay,
|
325
322
|
children: /*#__PURE__*/jsx(Loader, {
|
326
323
|
className: loaderClassName
|
327
324
|
})
|
@@ -17,5 +17,5 @@ export interface MoreButtonProps {
|
|
17
17
|
morePopupItemClassName?: string | undefined;
|
18
18
|
morePopupBeforeEnd: ReactNode;
|
19
19
|
}
|
20
|
-
export declare const MoreButton: import("react").MemoExoticComponent<({ items, selected, onSelect, moreClassName, moreActiveClassName, morePopupClassName, morePopupItemClassName, morePopupBeforeEnd }: MoreButtonProps) => import("react").JSX.Element | null>;
|
20
|
+
export declare const MoreButton: import("react").MemoExoticComponent<({ items, selected, onSelect, moreClassName, moreActiveClassName, morePopupClassName, morePopupItemClassName, morePopupBeforeEnd, }: MoreButtonProps) => import("react").JSX.Element | null>;
|
21
21
|
export declare const FakeMoreButton: import("react").MemoExoticComponent<({ moreClassName, moreActiveClassName, hasActiveChildren }: FakeMoreButtonProps) => import("react").JSX.Element>;
|
@@ -7,7 +7,7 @@ import PopupMenu, { ListProps } from '../popup-menu/popup-menu.js';
|
|
7
7
|
import Dropdown from '../dropdown/dropdown.js';
|
8
8
|
import Link from '../link/link.js';
|
9
9
|
import Icon from '../icon/icon.js';
|
10
|
-
import {
|
10
|
+
import { s as styles } from '../_helpers/tab-link.js';
|
11
11
|
import getTabTitles from './collapsible-tab.js';
|
12
12
|
import { CustomItem } from './custom-item.js';
|
13
13
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
@@ -25,7 +25,6 @@ import 'combokeys';
|
|
25
25
|
import '../global/sniffer.js';
|
26
26
|
import 'sniffr';
|
27
27
|
import '../global/data-tests.js';
|
28
|
-
import 'core-js/modules/es.array.reduce.js';
|
29
28
|
import '../tab-trap/tab-trap.js';
|
30
29
|
import '../popup/position.js';
|
31
30
|
import 'core-js/modules/es.array.sort.js';
|
@@ -76,14 +75,14 @@ const AnchorLink = _ref => {
|
|
76
75
|
moreActiveClassName
|
77
76
|
} = _ref,
|
78
77
|
restProps = _objectWithoutProperties(_ref, _excluded);
|
79
|
-
const classnames = classNames(
|
78
|
+
const classnames = classNames(styles.title, hasActiveChildren && styles.selected, hasActiveChildren && moreActiveClassName, moreClassName);
|
80
79
|
return /*#__PURE__*/jsxs(Link, _objectSpread2(_objectSpread2({
|
81
80
|
title: 'More',
|
82
81
|
className: classnames
|
83
82
|
}, restProps), {}, {
|
84
83
|
children: ['More', /*#__PURE__*/jsx(Icon, {
|
85
84
|
glyph: chevronDown,
|
86
|
-
className:
|
85
|
+
className: styles.chevron
|
87
86
|
})]
|
88
87
|
}));
|
89
88
|
};
|
@@ -128,7 +127,7 @@ const MoreButton = /*#__PURE__*/memo(_ref2 => {
|
|
128
127
|
popupItems.push({
|
129
128
|
template: morePopupBeforeEnd,
|
130
129
|
key: 'before-end-content',
|
131
|
-
className:
|
130
|
+
className: styles.morePopupBeforeEnd,
|
132
131
|
rgItemType: ListProps.Type.CUSTOM
|
133
132
|
});
|
134
133
|
}
|
@@ -149,7 +148,7 @@ const MoreButton = /*#__PURE__*/memo(_ref2 => {
|
|
149
148
|
return null;
|
150
149
|
}
|
151
150
|
return /*#__PURE__*/jsx("div", {
|
152
|
-
className: classNames(
|
151
|
+
className: classNames(styles.title, moreClassName, hasActiveChild && moreActiveClassName),
|
153
152
|
children: /*#__PURE__*/jsx(Dropdown, {
|
154
153
|
hoverMode: true,
|
155
154
|
anchor: popupAnchor,
|
@@ -165,7 +164,7 @@ const FakeMoreButton = /*#__PURE__*/memo(_ref3 => {
|
|
165
164
|
hasActiveChildren
|
166
165
|
} = _ref3;
|
167
166
|
return /*#__PURE__*/jsx("div", {
|
168
|
-
className: classNames(
|
167
|
+
className: classNames(styles.moreButton, styles.title),
|
169
168
|
children: /*#__PURE__*/jsx(AnchorLink, {
|
170
169
|
moreClassName: moreClassName,
|
171
170
|
moreActiveClassName: moreActiveClassName,
|
@@ -1,12 +1,11 @@
|
|
1
1
|
import { a as _objectWithoutProperties, b as _objectSpread2 } from '../_helpers/_rollupPluginBabelHelpers.js';
|
2
2
|
import * as React from 'react';
|
3
3
|
import classNames from 'classnames';
|
4
|
-
import {
|
4
|
+
import { s as styles, T as TabLink } from '../_helpers/tab-link.js';
|
5
5
|
import { CustomItem } from './custom-item.js';
|
6
6
|
import { jsx } from 'react/jsx-runtime';
|
7
7
|
import '../link/link.js';
|
8
8
|
import '../global/data-tests.js';
|
9
|
-
import 'core-js/modules/es.array.reduce.js';
|
10
9
|
import 'core-js/modules/web.dom-collections.iterator.js';
|
11
10
|
import '../link/clickableLink.js';
|
12
11
|
import '../_helpers/link.js';
|
@@ -34,9 +33,9 @@ const TabTitle = /*#__PURE__*/React.memo(function TabTitle(_ref) {
|
|
34
33
|
collapsedClassName,
|
35
34
|
collapsedActiveClassName
|
36
35
|
} = child.props;
|
37
|
-
const titleClasses = classNames(
|
38
|
-
[
|
39
|
-
[
|
36
|
+
const titleClasses = classNames(styles.title, className, {
|
37
|
+
[styles.selected]: selected,
|
38
|
+
[styles.collapsed]: collapsed,
|
40
39
|
[activeClassName !== null && activeClassName !== void 0 ? activeClassName : '']: selected,
|
41
40
|
[collapsedClassName !== null && collapsedClassName !== void 0 ? collapsedClassName : '']: collapsed,
|
42
41
|
[collapsedActiveClassName !== null && collapsedActiveClassName !== void 0 ? collapsedActiveClassName : '']: collapsed && selected
|
@@ -11,6 +11,6 @@ export interface CollapsibleTabsProps {
|
|
11
11
|
initialVisibleItems?: number | null | undefined;
|
12
12
|
morePopupBeforeEnd?: ReactNode;
|
13
13
|
}
|
14
|
-
export declare const CollapsibleTabs: ({ children, selected, onSelect, moreClassName, moreActiveClassName, morePopupClassName, morePopupBeforeEnd, morePopupItemClassName, initialVisibleItems }: CollapsibleTabsProps) => import("react").JSX.Element;
|
15
|
-
declare const _default: import("react").MemoExoticComponent<({ children, selected, onSelect, moreClassName, moreActiveClassName, morePopupClassName, morePopupBeforeEnd, morePopupItemClassName, initialVisibleItems }: CollapsibleTabsProps) => import("react").JSX.Element>;
|
14
|
+
export declare const CollapsibleTabs: ({ children, selected, onSelect, moreClassName, moreActiveClassName, morePopupClassName, morePopupBeforeEnd, morePopupItemClassName, initialVisibleItems, }: CollapsibleTabsProps) => import("react").JSX.Element;
|
15
|
+
declare const _default: import("react").MemoExoticComponent<({ children, selected, onSelect, moreClassName, moreActiveClassName, morePopupClassName, morePopupBeforeEnd, morePopupItemClassName, initialVisibleItems, }: CollapsibleTabsProps) => import("react").JSX.Element>;
|
16
16
|
export default _default;
|
@@ -1,11 +1,10 @@
|
|
1
|
-
import 'core-js/modules/es.array.reduce.js';
|
2
1
|
import 'core-js/modules/es.regexp.exec.js';
|
3
2
|
import 'core-js/modules/es.string.replace.js';
|
4
3
|
import 'core-js/modules/web.dom-collections.iterator.js';
|
5
4
|
import { memo, useState, useRef, useMemo, useCallback, useEffect } from 'react';
|
6
5
|
import classNames from 'classnames';
|
7
6
|
import fastdom from 'fastdom';
|
8
|
-
import {
|
7
|
+
import { s as styles } from '../_helpers/tab-link.js';
|
9
8
|
import { MoreButton, FakeMoreButton } from './collapsible-more.js';
|
10
9
|
import getTabTitles from './collapsible-tab.js';
|
11
10
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
@@ -257,11 +256,11 @@ const CollapsibleTabs = _ref => {
|
|
257
256
|
};
|
258
257
|
}, [adjustTabs]);
|
259
258
|
const isAdjusted = elements.lastVisibleIndex !== null && preparedElements.ready === true || initialVisibleItems;
|
260
|
-
const className = classNames(
|
259
|
+
const className = classNames(styles.titles, styles.autoCollapse, isAdjusted && styles.adjusted);
|
261
260
|
return /*#__PURE__*/jsxs("div", {
|
262
|
-
className:
|
261
|
+
className: styles.autoCollapseContainer,
|
263
262
|
children: [/*#__PURE__*/jsxs("div", {
|
264
|
-
className: classNames(className,
|
263
|
+
className: classNames(className, styles.rendered),
|
265
264
|
children: [visibleElements, /*#__PURE__*/jsx(MoreButton, {
|
266
265
|
moreClassName: moreClassName,
|
267
266
|
moreActiveClassName: moreActiveClassName,
|
@@ -274,7 +273,7 @@ const CollapsibleTabs = _ref => {
|
|
274
273
|
})]
|
275
274
|
}), /*#__PURE__*/jsxs("div", {
|
276
275
|
ref: measureRef,
|
277
|
-
className: classNames(className,
|
276
|
+
className: classNames(className, styles.measure),
|
278
277
|
children: [childrenToMeasure, /*#__PURE__*/jsx(FakeMoreButton, {
|
279
278
|
hasActiveChildren: preparedElements.hidden.some(item => item.props.alwaysHidden && item.props.id === selected),
|
280
279
|
moreClassName: moreClassName,
|
@@ -5,11 +5,10 @@ import { PureComponent } from 'react';
|
|
5
5
|
import classNames from 'classnames';
|
6
6
|
import memoize from '../global/memoize.js';
|
7
7
|
import joinDataTestAttributes from '../global/data-tests.js';
|
8
|
-
import {
|
8
|
+
import { s as styles, T as TabLink } from '../_helpers/tab-link.js';
|
9
9
|
import CollapsibleTabs from './collapsible-tabs.js';
|
10
10
|
import { CustomItem } from './custom-item.js';
|
11
11
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
12
|
-
import 'core-js/modules/es.array.reduce.js';
|
13
12
|
import '../link/link.js';
|
14
13
|
import '../link/clickableLink.js';
|
15
14
|
import '../_helpers/link.js';
|
@@ -95,8 +94,8 @@ class Tabs extends PureComponent {
|
|
95
94
|
} = child.props;
|
96
95
|
const key = id || String(i);
|
97
96
|
const isSelected = key === selected;
|
98
|
-
const titleClasses = classNames(
|
99
|
-
[
|
97
|
+
const titleClasses = classNames(styles.title, className, isSelected && activeClassName, {
|
98
|
+
[styles.selected]: isSelected
|
100
99
|
});
|
101
100
|
return /*#__PURE__*/jsx(TabLink, _objectSpread2({
|
102
101
|
title: title,
|
@@ -119,7 +118,7 @@ class Tabs extends PureComponent {
|
|
119
118
|
'data-test': dataTest
|
120
119
|
} = _this$props,
|
121
120
|
restProps = _objectWithoutProperties(_this$props, _excluded);
|
122
|
-
const classes = classNames(
|
121
|
+
const classes = classNames(styles.tabs, className);
|
123
122
|
const childrenArray = React.Children.toArray(children).filter(Boolean);
|
124
123
|
return /*#__PURE__*/jsxs("div", {
|
125
124
|
className: classes,
|
@@ -129,7 +128,7 @@ class Tabs extends PureComponent {
|
|
129
128
|
selected: selected,
|
130
129
|
children: childrenArray
|
131
130
|
})) : /*#__PURE__*/jsx("div", {
|
132
|
-
className:
|
131
|
+
className: styles.titles,
|
133
132
|
children: childrenArray.map(this.getTabTitle)
|
134
133
|
}), /*#__PURE__*/jsx("div", {
|
135
134
|
className: classNames(tabContainerClassName),
|