@jetbrains/ring-ui-built 7.0.0-beta.8 → 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 +18 -12
- 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.d.ts +4 -2
- 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 +2 -10
- package/components/table/header.js +7 -14
- package/components/table/row-with-focus-sensor.js +1 -1
- package/components/table/row.d.ts +0 -1
- package/components/table/row.js +12 -18
- package/components/table/selection.d.ts +2 -3
- package/components/table/simple-table.js +3 -3
- package/components/table/smart-table.js +1 -1
- package/components/table/table.d.ts +0 -1
- package/components/table/table.js +18 -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.d.ts +4 -1
- package/components/tooltip/tooltip.js +35 -20
- 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 +7 -6
- 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
|
}));
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import { ChangeEventHandler, PureComponent,
|
1
|
+
import { ChangeEventHandler, PureComponent, SyntheticEvent } from 'react';
|
2
2
|
import { Column, SortParams } from './header-cell';
|
3
3
|
export interface HeaderProps {
|
4
4
|
columns: readonly Column[];
|
@@ -13,14 +13,6 @@ export interface HeaderProps {
|
|
13
13
|
sortOrder: boolean;
|
14
14
|
caption?: string | null | undefined;
|
15
15
|
checkboxDisabled?: boolean | undefined;
|
16
|
-
maxColSpan?: number;
|
17
|
-
}
|
18
|
-
declare module 'react-waypoint' {
|
19
|
-
namespace Waypoint {
|
20
|
-
interface WaypointProps {
|
21
|
-
children?: ReactNode;
|
22
|
-
}
|
23
|
-
}
|
24
16
|
}
|
25
17
|
export default class Header extends PureComponent<HeaderProps> {
|
26
18
|
static defaultProps: {
|
@@ -36,7 +28,7 @@ export default class Header extends PureComponent<HeaderProps> {
|
|
36
28
|
};
|
37
29
|
id: string;
|
38
30
|
onCheckboxFocus: (event: SyntheticEvent<HTMLElement>) => void;
|
39
|
-
createCells(widths?: never[]):
|
31
|
+
createCells(widths?: never[]): import("react").JSX.Element[];
|
40
32
|
render(): import("react").JSX.Element;
|
41
33
|
}
|
42
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,12 +37,12 @@ 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';
|
44
43
|
import '../popup/popup.consts.js';
|
45
44
|
import '../popup/popup.target.js';
|
45
|
+
import '../_helpers/theme.js';
|
46
46
|
import './cell.js';
|
47
47
|
import '../_helpers/table.js';
|
48
48
|
|
@@ -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';
|
@@ -41,17 +41,17 @@ import '../popup/position.js';
|
|
41
41
|
import 'core-js/modules/es.array.sort.js';
|
42
42
|
import '../popup/popup.consts.js';
|
43
43
|
import '../popup/popup.target.js';
|
44
|
-
import '
|
44
|
+
import '../_helpers/theme.js';
|
45
45
|
import 'memoize-one';
|
46
46
|
|
47
|
-
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"];
|
48
48
|
const DragHandle = _ref => {
|
49
49
|
let {
|
50
50
|
alwaysShowDragHandle,
|
51
51
|
dragHandleTitle = 'Drag to reorder'
|
52
52
|
} = _ref;
|
53
|
-
const classes = classNames(
|
54
|
-
[
|
53
|
+
const classes = classNames(style.dragHandle, {
|
54
|
+
[style.visibleDragHandle]: alwaysShowDragHandle
|
55
55
|
});
|
56
56
|
return /*#__PURE__*/jsx(Button, {
|
57
57
|
"data-movable-handle": true,
|
@@ -124,7 +124,6 @@ class Row extends PureComponent {
|
|
124
124
|
collapsible,
|
125
125
|
parentCollapsible,
|
126
126
|
collapsed,
|
127
|
-
maxColSpan,
|
128
127
|
onCollapse,
|
129
128
|
onExpand,
|
130
129
|
showDisabledSelection,
|
@@ -142,15 +141,15 @@ class Row extends PureComponent {
|
|
142
141
|
} = _this$props,
|
143
142
|
restProps = _objectWithoutProperties(_this$props, _excluded);
|
144
143
|
const classes = classNames(className, {
|
145
|
-
[
|
146
|
-
[
|
147
|
-
[
|
144
|
+
[style.row]: true,
|
145
|
+
[style.rowFocused]: showFocus,
|
146
|
+
[style.rowSelected]: selected
|
148
147
|
});
|
149
148
|
const testAttrs = {
|
150
149
|
'data-test-focused': showFocus || undefined,
|
151
150
|
'data-test-selected': selected || undefined
|
152
151
|
};
|
153
|
-
const metaColumnClasses = classNames(metaColumnClassName,
|
152
|
+
const metaColumnClasses = classNames(metaColumnClassName, style.metaColumn);
|
154
153
|
const SUBITEM_OFFSET = 30;
|
155
154
|
const COLLAPSIBLE_PARENT_OFFSET = 20;
|
156
155
|
const gap = level * SUBITEM_OFFSET + (parentCollapsible ? COLLAPSIBLE_PARENT_OFFSET : 0);
|
@@ -181,29 +180,24 @@ class Row extends PureComponent {
|
|
181
180
|
disabled: true
|
182
181
|
})
|
183
182
|
}), collapsible && collapsed && /*#__PURE__*/jsx(Button, {
|
184
|
-
className:
|
183
|
+
className: style.rowCollapseExpandButton,
|
185
184
|
icon: chevronRightIcon,
|
186
185
|
onClick: () => onExpand(item)
|
187
186
|
}), collapsible && !collapsed && /*#__PURE__*/jsx(Button, {
|
188
|
-
className:
|
187
|
+
className: style.rowCollapseExpandButton,
|
189
188
|
icon: chevronDownIcon,
|
190
189
|
onClick: () => onCollapse(item)
|
191
190
|
})]
|
192
191
|
});
|
193
192
|
const columns = typeof columnProps === 'function' ? columnProps(item) : columnProps;
|
194
|
-
let colSpan = 0;
|
195
193
|
const cells = columns.map((column, index) => {
|
196
194
|
const getValue = column.getValue || (() => item[column.id]);
|
197
195
|
const getDataTest = column.getDataTest || (() => column.id);
|
198
196
|
const value = getValue(item, column);
|
199
197
|
const cellClasses = classNames({
|
200
|
-
[
|
198
|
+
[style.cellRight]: column.rightAlign
|
201
199
|
}, column.className);
|
202
200
|
const showMetaColumn = draggable || selectable || collapsible || showDisabledSelection || !!level;
|
203
|
-
colSpan += column.colSpan || 1;
|
204
|
-
if (colSpan > (maxColSpan || Infinity)) {
|
205
|
-
return null;
|
206
|
-
}
|
207
201
|
return /*#__PURE__*/jsxs(Cell, {
|
208
202
|
colSpan: column.colSpan,
|
209
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';
|
@@ -56,6 +55,7 @@ import '../popup/position.js';
|
|
56
55
|
import 'core-js/modules/es.array.sort.js';
|
57
56
|
import '../popup/popup.consts.js';
|
58
57
|
import '../popup/popup.target.js';
|
58
|
+
import '../_helpers/theme.js';
|
59
59
|
import './cell.js';
|
60
60
|
|
61
61
|
class SimpleTable extends PureComponent {
|
@@ -66,7 +66,7 @@ class SimpleTable extends PureComponent {
|
|
66
66
|
data: this.props.data
|
67
67
|
})
|
68
68
|
});
|
69
|
-
_defineProperty(this, "classes", classNames(
|
69
|
+
_defineProperty(this, "classes", classNames(style.disabledHover, this.props.className));
|
70
70
|
}
|
71
71
|
render() {
|
72
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';
|
@@ -56,6 +55,7 @@ import '../popup/position.js';
|
|
56
55
|
import 'core-js/modules/es.array.sort.js';
|
57
56
|
import '../popup/popup.consts.js';
|
58
57
|
import '../popup/popup.target.js';
|
58
|
+
import '../_helpers/theme.js';
|
59
59
|
import './cell.js';
|
60
60
|
|
61
61
|
class SmartTable extends PureComponent {
|
@@ -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';
|
@@ -54,6 +53,7 @@ import '../popup/position.js';
|
|
54
53
|
import 'core-js/modules/es.array.sort.js';
|
55
54
|
import '../popup/popup.consts.js';
|
56
55
|
import '../popup/popup.target.js';
|
56
|
+
import '../_helpers/theme.js';
|
57
57
|
import './cell.js';
|
58
58
|
|
59
59
|
const _excluded = ["ref"];
|
@@ -189,21 +189,20 @@ class Table extends PureComponent {
|
|
189
189
|
onItemDoubleClick,
|
190
190
|
onItemClick,
|
191
191
|
renderEmpty,
|
192
|
-
maxColSpan,
|
193
192
|
RowComponent
|
194
193
|
} = this.props;
|
195
194
|
// NOTE: Do not construct new object per render because it causes all rows rerendering
|
195
|
+
const columnsArray = typeof columns === 'function' ? columns(null) : columns;
|
196
196
|
const headerProps = {
|
197
197
|
caption,
|
198
198
|
selectable,
|
199
199
|
draggable,
|
200
|
-
columns:
|
200
|
+
columns: columnsArray,
|
201
201
|
onSort,
|
202
202
|
sortKey,
|
203
203
|
sortOrder,
|
204
204
|
sticky: stickyHeader,
|
205
|
-
topStickOffset: stickyHeaderOffset
|
206
|
-
maxColSpan: this.props.maxColSpan
|
205
|
+
topStickOffset: stickyHeaderOffset
|
207
206
|
};
|
208
207
|
const selectedSize = selection.getSelected().size;
|
209
208
|
const allSelectedSize = selection.selectAll().getSelected().size;
|
@@ -211,15 +210,15 @@ class Table extends PureComponent {
|
|
211
210
|
headerProps.onCheckboxChange = this.onCheckboxChange;
|
212
211
|
headerProps.checkboxDisabled = this.props.data.length === 0;
|
213
212
|
const wrapperClasses = classNames({
|
214
|
-
[
|
215
|
-
[
|
213
|
+
[style.tableWrapper]: true,
|
214
|
+
[style.loading]: loading
|
216
215
|
});
|
217
216
|
const classes = classNames(this.props.className, {
|
218
|
-
[
|
219
|
-
[
|
220
|
-
[
|
221
|
-
[
|
222
|
-
[
|
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
|
223
222
|
});
|
224
223
|
const renderList = _ref3 => {
|
225
224
|
let {
|
@@ -228,8 +227,8 @@ class Table extends PureComponent {
|
|
228
227
|
} = _ref3;
|
229
228
|
const empty = /*#__PURE__*/jsx("tr", {
|
230
229
|
children: /*#__PURE__*/jsx("td", {
|
231
|
-
colSpan:
|
232
|
-
className:
|
230
|
+
colSpan: columnsArray.length || 1,
|
231
|
+
className: style.tableMessage,
|
233
232
|
children: renderEmpty ? renderEmpty() : null
|
234
233
|
})
|
235
234
|
});
|
@@ -278,21 +277,20 @@ class Table extends PureComponent {
|
|
278
277
|
showDisabledSelection: isDisabledSelectionVisible(value),
|
279
278
|
checkboxTooltip: getCheckboxTooltip(value),
|
280
279
|
className: classNames(getItemClassName(value), {
|
281
|
-
[
|
280
|
+
[style.draggingRow]: isDragged
|
282
281
|
}),
|
283
282
|
metaColumnClassName: getMetaColumnClassName(value),
|
284
283
|
draggable: draggable,
|
285
284
|
alwaysShowDragHandle: alwaysShowDragHandle,
|
286
285
|
dragHandleTitle: dragHandleTitle,
|
287
286
|
columns: columns,
|
288
|
-
"data-test": getItemDataTest(value)
|
289
|
-
maxColSpan: maxColSpan
|
287
|
+
"data-test": getItemDataTest(value)
|
290
288
|
}, restProps), {}, {
|
291
289
|
key: (_restProps$key = restProps.key) !== null && _restProps$key !== void 0 ? _restProps$key : getItemKey(value)
|
292
290
|
}));
|
293
291
|
return isDragged ? /*#__PURE__*/jsx("table", {
|
294
292
|
style: _objectSpread2({}, props.style),
|
295
|
-
className:
|
293
|
+
className: style.draggingTable,
|
296
294
|
children: /*#__PURE__*/jsx("tbody", {
|
297
295
|
children: row
|
298
296
|
})
|
@@ -320,7 +318,7 @@ class Table extends PureComponent {
|
|
320
318
|
}))
|
321
319
|
})
|
322
320
|
}), loading && /*#__PURE__*/jsx("div", {
|
323
|
-
className:
|
321
|
+
className: style.loadingOverlay,
|
324
322
|
children: /*#__PURE__*/jsx(Loader, {
|
325
323
|
className: loaderClassName
|
326
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,
|