@jetbrains/ring-ui-built 8.0.0-beta.3 → 8.0.0-beta.4

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.
Files changed (82) hide show
  1. package/components/_helpers/heading.js +2 -2
  2. package/components/_helpers/table.js +1 -1
  3. package/components/_helpers/theme.js +1 -1
  4. package/components/alert/alert.js +1 -1
  5. package/components/auth/iframe-flow.js +1 -1
  6. package/components/checkbox/checkbox.d.ts +1 -1
  7. package/components/collapsible-group/collapsible-group.d.ts +20 -0
  8. package/components/collapsible-group/collapsible-group.js +382 -0
  9. package/components/components/util-stories.js +63 -1
  10. package/components/data-list/data-list.js +1 -1
  11. package/components/data-list/title.js +1 -1
  12. package/components/date-picker/date-popup.js +3 -3
  13. package/components/dropdown-menu/dropdown-menu.js +6 -6
  14. package/components/editable-heading/editable-heading.js +122 -109
  15. package/components/expand/collapsible-group.d.ts +8 -20
  16. package/components/expand/collapsible-group.js +34 -365
  17. package/components/global/compose-refs.d.ts +2 -1
  18. package/components/global/compose-refs.js +44 -8
  19. package/components/global/focus-sensor-hoc.js +1 -0
  20. package/components/global/focus-with-temporary-tabindex.d.ts +11 -0
  21. package/components/global/focus-with-temporary-tabindex.js +23 -0
  22. package/components/global/intersection-observer-context.d.ts +29 -9
  23. package/components/global/intersection-observer-context.js +50 -52
  24. package/components/global/is-within-interactive-element.d.ts +6 -0
  25. package/components/global/is-within-interactive-element.js +11 -0
  26. package/components/global/is-within-navigable-element.d.ts +6 -0
  27. package/components/global/is-within-navigable-element.js +11 -0
  28. package/components/global/parse-css-duration.d.ts +5 -0
  29. package/components/global/parse-css-duration.js +14 -0
  30. package/components/global/rerender-hoc.js +1 -0
  31. package/components/global/schedule-with-cleanup.d.ts +12 -0
  32. package/components/global/schedule-with-cleanup.js +36 -0
  33. package/components/global/table-selection.js +1 -1
  34. package/components/global/theme.js +1 -1
  35. package/components/header/header.js +1 -1
  36. package/components/heading/heading.js +3 -3
  37. package/components/input/input.d.ts +1 -1
  38. package/components/internal/column-animation.js +133 -0
  39. package/components/internal/table-header.js +1109 -0
  40. package/components/{table/table-virtualize.js → internal/virtual-items.js} +108 -84
  41. package/components/legacy-table/header-cell.js +2 -2
  42. package/components/legacy-table/row-with-focus-sensor.js +1 -1
  43. package/components/legacy-table/row.d.ts +1 -1
  44. package/components/legacy-table/simple-table.js +1 -1
  45. package/components/legacy-table/smart-table.js +1 -1
  46. package/components/legacy-table/table.js +1 -1
  47. package/components/markdown/markdown.js +2 -2
  48. package/components/message/message.js +1 -1
  49. package/components/old-browsers-message/white-list.js +2 -2
  50. package/components/popup/popup.d.ts +2 -0
  51. package/components/popup/popup.js +5 -1
  52. package/components/select/select-popup.d.ts +1 -1
  53. package/components/select/select.d.ts +1 -1
  54. package/components/style.css +1 -1
  55. package/components/table/default-item-renderer.d.ts +23 -10
  56. package/components/table/default-item-renderer.js +104 -98
  57. package/components/table/internal/column-animation.d.ts +16 -0
  58. package/components/table/internal/table-header.d.ts +4 -0
  59. package/components/table/internal/virtual-items.d.ts +34 -0
  60. package/components/table/item-virtualization.d.ts +35 -0
  61. package/components/table/item-virtualization.js +71 -0
  62. package/components/table/table-const.d.ts +40 -6
  63. package/components/table/table-const.js +15 -6
  64. package/components/table/table-primitives.d.ts +9 -16
  65. package/components/table/table-primitives.js +11 -211
  66. package/components/table/table-props.d.ts +280 -0
  67. package/components/table/table-props.js +1 -0
  68. package/components/table/table.d.ts +205 -209
  69. package/components/table/table.js +356 -15
  70. package/components/tooltip/tooltip.js +1 -1
  71. package/components/user-agreement/service.js +6 -6
  72. package/components/util-stories.d.ts +26 -0
  73. package/package.json +2 -2
  74. package/components/date-picker/use-intersection-observer.d.ts +0 -6
  75. package/components/date-picker/use-intersection-observer.js +0 -93
  76. package/components/global/composeRefs.d.ts +0 -6
  77. package/components/global/composeRefs.js +0 -9
  78. package/components/table/table-component.d.ts +0 -80
  79. package/components/table/table-component.js +0 -290
  80. package/components/table/table-row-focus.d.ts +0 -4
  81. package/components/table/table-row-focus.js +0 -41
  82. package/components/table/table-virtualize.d.ts +0 -32
@@ -1,290 +0,0 @@
1
- import { c } from 'react/compiler-runtime';
2
- import { useRef } from 'react';
3
- import classNames from 'classnames';
4
- import { mergeRefs } from 'react-merge-refs';
5
- import { IntersectionObserverContext } from '../global/intersection-observer-context.js';
6
- import { useTableVirtualize, SpacerRow } from './table-virtualize.js';
7
- import { DefaultItemRenderer } from './default-item-renderer.js';
8
- import { TablePropsContext, CollapseItemIntoSpacerContext, defaultMinScrollAndResizeDeltaPx, defaultLookaheadPx, defaultRetentionMarginPx, ColumnIndexContext, defaultRowHeight } from './table-const.js';
9
- import { onBlurCaptureTbody, onKeyDownTbody } from './table-row-focus.js';
10
- import { s as styles } from '../_helpers/table.js';
11
- import { jsx, jsxs } from 'react/jsx-runtime';
12
- import './table-primitives.js';
13
- import '@jetbrains/icons/unsorted-12px';
14
- import '@jetbrains/icons/arrow-12px-down';
15
- import '@jetbrains/icons/arrow-12px-up';
16
- import '@jetbrains/icons/trash-12px';
17
- import '../icon/icon.js';
18
- import 'util-deprecate';
19
- import '../icon/icon.constants.js';
20
- import '../_helpers/icon-svg.js';
21
- import '../global/memoize.js';
22
-
23
- function Table(props) {
24
- const $ = c(56);
25
- if ($[0] !== "9306af42aa8ad63ab7b8766f741b6ce2a028dd9b7f320f9f4ee30c0e95ec844f") {
26
- for (let $i = 0; $i < 56; $i += 1) {
27
- $[$i] = Symbol.for("react.memo_cache_sentinel");
28
- }
29
- $[0] = "9306af42aa8ad63ab7b8766f741b6ce2a028dd9b7f320f9f4ee30c0e95ec844f";
30
- }
31
- let className;
32
- let columns;
33
- let data;
34
- let getKey;
35
- let noHeader;
36
- let renderItem;
37
- let restProps;
38
- let scrollerRef;
39
- let t0;
40
- let t1;
41
- let t2;
42
- let t3;
43
- let t4;
44
- let tbodyClassName;
45
- let theadClassName;
46
- let theadTrClassName;
47
- let userRef;
48
- if ($[1] !== props) {
49
- const {
50
- data: t5,
51
- columns: t6,
52
- getKey: t7,
53
- noHeader: t8,
54
- onItemMove,
55
- onSort,
56
- onColumnDelete,
57
- onColumnMove,
58
- renderItem: t9,
59
- virtualizeRows: t10,
60
- scrollerRef: t11,
61
- estimateHeight: t12,
62
- lookaheadPx: t13,
63
- retentionMarginPx: t14,
64
- minScrollAndResizeDeltaPx: t15,
65
- columnEditButton,
66
- theadClassName: t16,
67
- theadTrClassName: t17,
68
- tbodyClassName: t18,
69
- ref: t19,
70
- className: t20,
71
- ...t21
72
- } = props;
73
- data = t5;
74
- columns = t6;
75
- getKey = t7;
76
- noHeader = t8;
77
- renderItem = t9;
78
- t0 = t10;
79
- scrollerRef = t11;
80
- t1 = t12;
81
- t2 = t13;
82
- t3 = t14;
83
- t4 = t15;
84
- theadClassName = t16;
85
- theadTrClassName = t17;
86
- tbodyClassName = t18;
87
- userRef = t19;
88
- className = t20;
89
- restProps = t21;
90
- $[1] = props;
91
- $[2] = className;
92
- $[3] = columns;
93
- $[4] = data;
94
- $[5] = getKey;
95
- $[6] = noHeader;
96
- $[7] = renderItem;
97
- $[8] = restProps;
98
- $[9] = scrollerRef;
99
- $[10] = t0;
100
- $[11] = t1;
101
- $[12] = t2;
102
- $[13] = t3;
103
- $[14] = t4;
104
- $[15] = tbodyClassName;
105
- $[16] = theadClassName;
106
- $[17] = theadTrClassName;
107
- $[18] = userRef;
108
- } else {
109
- className = $[2];
110
- columns = $[3];
111
- data = $[4];
112
- getKey = $[5];
113
- noHeader = $[6];
114
- renderItem = $[7];
115
- restProps = $[8];
116
- scrollerRef = $[9];
117
- t0 = $[10];
118
- t1 = $[11];
119
- t2 = $[12];
120
- t3 = $[13];
121
- t4 = $[14];
122
- tbodyClassName = $[15];
123
- theadClassName = $[16];
124
- theadTrClassName = $[17];
125
- userRef = $[18];
126
- }
127
- const virtualizeRows = t0 === undefined ? false : t0;
128
- const estimateHeight = t1 === undefined ? _temp : t1;
129
- const lookaheadPx = t2 === undefined ? defaultLookaheadPx : t2;
130
- const retentionMarginPx = t3 === undefined ? defaultRetentionMarginPx : t3;
131
- const minScrollAndResizeDeltaPx = t4 === undefined ? defaultMinScrollAndResizeDeltaPx : t4;
132
- const localRef = useRef(null);
133
- const {
134
- virtualItems,
135
- intersectionObserverHandle,
136
- collapseItemIntoSpacer
137
- } = useTableVirtualize({
138
- enabled: virtualizeRows,
139
- data,
140
- scrollerRef,
141
- tableRef: localRef,
142
- estimateHeight,
143
- lookaheadPx,
144
- retentionMarginPx,
145
- minScrollAndResizeDeltaPx
146
- });
147
- const T0 = TablePropsContext;
148
- const T1 = IntersectionObserverContext;
149
- let t5;
150
- if ($[19] !== className) {
151
- t5 = classNames(styles.table, className);
152
- $[19] = className;
153
- $[20] = t5;
154
- } else {
155
- t5 = $[20];
156
- }
157
- const t6 = mergeRefs([userRef, localRef]);
158
- let t7;
159
- if ($[21] !== columns || $[22] !== noHeader || $[23] !== theadClassName || $[24] !== theadTrClassName) {
160
- t7 = !noHeader && /*#__PURE__*/jsx("thead", {
161
- className: theadClassName,
162
- children: /*#__PURE__*/jsx("tr", {
163
- className: classNames(styles.headerRow, theadTrClassName),
164
- children: columns.map(_temp2)
165
- })
166
- });
167
- $[21] = columns;
168
- $[22] = noHeader;
169
- $[23] = theadClassName;
170
- $[24] = theadTrClassName;
171
- $[25] = t7;
172
- } else {
173
- t7 = $[25];
174
- }
175
- let t8;
176
- if ($[26] !== collapseItemIntoSpacer || $[27] !== columns || $[28] !== data || $[29] !== getKey || $[30] !== renderItem || $[31] !== virtualItems) {
177
- let t9;
178
- if ($[33] !== collapseItemIntoSpacer || $[34] !== columns || $[35] !== data || $[36] !== getKey || $[37] !== renderItem) {
179
- t9 = virtualItem => {
180
- if (virtualItem.type === "spacer") {
181
- return /*#__PURE__*/jsx(SpacerRow, {
182
- spacer: virtualItem,
183
- colSpan: columns.length
184
- }, virtualItem.key);
185
- }
186
- const index = virtualItem.index;
187
- const item = data[index];
188
- const key = getKey(item, index, data);
189
- return /*#__PURE__*/jsx(CollapseItemIntoSpacerContext, {
190
- value: height => collapseItemIntoSpacer(index, height),
191
- children: renderItem ? renderItem(item, index, data) : /*#__PURE__*/jsx(DefaultItemRenderer, {
192
- index: index
193
- })
194
- }, key);
195
- };
196
- $[33] = collapseItemIntoSpacer;
197
- $[34] = columns;
198
- $[35] = data;
199
- $[36] = getKey;
200
- $[37] = renderItem;
201
- $[38] = t9;
202
- } else {
203
- t9 = $[38];
204
- }
205
- t8 = virtualItems.map(t9);
206
- $[26] = collapseItemIntoSpacer;
207
- $[27] = columns;
208
- $[28] = data;
209
- $[29] = getKey;
210
- $[30] = renderItem;
211
- $[31] = virtualItems;
212
- $[32] = t8;
213
- } else {
214
- t8 = $[32];
215
- }
216
- let t9;
217
- if ($[39] !== t8 || $[40] !== tbodyClassName) {
218
- t9 = /*#__PURE__*/jsx("tbody", {
219
- className: tbodyClassName,
220
- onKeyDown: onKeyDownTbody,
221
- onBlurCapture: onBlurCaptureTbody,
222
- children: t8
223
- });
224
- $[39] = t8;
225
- $[40] = tbodyClassName;
226
- $[41] = t9;
227
- } else {
228
- t9 = $[41];
229
- }
230
- let t10;
231
- if ($[42] !== restProps || $[43] !== t5 || $[44] !== t6 || $[45] !== t7 || $[46] !== t9) {
232
- t10 = /*#__PURE__*/jsxs("table", {
233
- className: t5,
234
- ref: t6,
235
- ...restProps,
236
- children: [t7, t9]
237
- });
238
- $[42] = restProps;
239
- $[43] = t5;
240
- $[44] = t6;
241
- $[45] = t7;
242
- $[46] = t9;
243
- $[47] = t10;
244
- } else {
245
- t10 = $[47];
246
- }
247
- let t11;
248
- if ($[48] !== T1 || $[49] !== intersectionObserverHandle || $[50] !== t10) {
249
- t11 = /*#__PURE__*/jsx(T1, {
250
- value: intersectionObserverHandle,
251
- children: t10
252
- });
253
- $[48] = T1;
254
- $[49] = intersectionObserverHandle;
255
- $[50] = t10;
256
- $[51] = t11;
257
- } else {
258
- t11 = $[51];
259
- }
260
- let t12;
261
- if ($[52] !== T0 || $[53] !== props || $[54] !== t11) {
262
- t12 = /*#__PURE__*/jsx(T0, {
263
- value: props,
264
- children: t11
265
- });
266
- $[52] = T0;
267
- $[53] = props;
268
- $[54] = t11;
269
- $[55] = t12;
270
- } else {
271
- t12 = $[55];
272
- }
273
- return t12;
274
- }
275
- function _temp2(column, columnIndex) {
276
- var _ref, _column$renderHeader;
277
- return /*#__PURE__*/jsx("th", {
278
- className: classNames(styles.headerCell, column.thClassName),
279
- "aria-sort": column.sortOrder,
280
- children: /*#__PURE__*/jsx(ColumnIndexContext, {
281
- value: columnIndex,
282
- children: (_ref = (_column$renderHeader = column.renderHeader?.()) !== null && _column$renderHeader !== void 0 ? _column$renderHeader : column.name) !== null && _ref !== void 0 ? _ref : String(column.key)
283
- })
284
- }, column.key);
285
- }
286
- function _temp() {
287
- return defaultRowHeight;
288
- }
289
-
290
- export { Table as default };
@@ -1,4 +0,0 @@
1
- export declare const keyboardFocusableAttrName = "data-keyboard-focusable";
2
- export declare function focusRow(row: HTMLTableRowElement): void;
3
- export declare function onKeyDownTbody(e: React.KeyboardEvent<HTMLTableSectionElement>): void;
4
- export declare function onBlurCaptureTbody(e: React.FocusEvent<HTMLTableSectionElement>): void;
@@ -1,41 +0,0 @@
1
- const keyboardFocusableAttrName = 'data-keyboard-focusable';
2
- const temporaryTabIndexAttrName = 'data-temporary-tabindex';
3
- function focusRow(row) {
4
- if (!row.hasAttribute('tabindex')) {
5
- row.tabIndex = 0;
6
- row.setAttribute(temporaryTabIndexAttrName, '');
7
- }
8
- row.focus();
9
- }
10
- function onKeyDownTbody(e) {
11
- if (e.key !== 'ArrowUp' && e.key !== 'ArrowDown') {
12
- return;
13
- }
14
- const tbody = e.currentTarget;
15
- const currentRow = e.target.closest('tr');
16
- if (!(currentRow instanceof HTMLTableRowElement) || currentRow.parentElement !== tbody) {
17
- return;
18
- }
19
- let candidate = currentRow;
20
- while (candidate) {
21
- candidate = e.key === 'ArrowUp' ? candidate.previousElementSibling : candidate.nextElementSibling;
22
- if (candidate?.hasAttribute(keyboardFocusableAttrName)) {
23
- focusRow(candidate);
24
- e.preventDefault();
25
- return;
26
- }
27
- }
28
- }
29
- function onBlurCaptureTbody(e) {
30
- const tbody = e.currentTarget;
31
- if (!(e.target instanceof HTMLTableRowElement) || e.target.parentElement !== tbody) {
32
- return;
33
- }
34
- const row = e.target;
35
- if (row.hasAttribute(temporaryTabIndexAttrName)) {
36
- row.removeAttribute('tabindex');
37
- row.removeAttribute(temporaryTabIndexAttrName);
38
- }
39
- }
40
-
41
- export { focusRow, keyboardFocusableAttrName, onBlurCaptureTbody, onKeyDownTbody };
@@ -1,32 +0,0 @@
1
- import { type RefObject } from 'react';
2
- export type VirtualItem = RenderedItem | Spacer;
3
- interface RenderedItem {
4
- type: 'rendered';
5
- index: number;
6
- }
7
- interface Spacer {
8
- type: 'spacer';
9
- from: number;
10
- to: number;
11
- height: number;
12
- key: string;
13
- }
14
- export declare function useTableVirtualize<T>({ enabled, data, data: { length }, scrollerRef, tableRef, estimateHeight, lookaheadPx, retentionMarginPx, minScrollAndResizeDeltaPx, }: {
15
- enabled: boolean;
16
- data: T[];
17
- scrollerRef: RefObject<HTMLElement | null> | undefined;
18
- tableRef: RefObject<HTMLTableElement | null>;
19
- estimateHeight: (item: T, index: number, items: T[]) => number;
20
- lookaheadPx: number;
21
- retentionMarginPx: number;
22
- minScrollAndResizeDeltaPx: number;
23
- }): {
24
- virtualItems: VirtualItem[];
25
- intersectionObserverHandle: import("../global/intersection-observer-context").IntersectionObserverHandle | null;
26
- collapseItemIntoSpacer: (index: number, height: number) => void;
27
- };
28
- export declare function SpacerRow({ spacer: { from, to, height }, colSpan }: {
29
- spacer: Spacer;
30
- colSpan: number;
31
- }): import("react").JSX.Element;
32
- export {};