@rescui/chip-list 0.14.3-RUI-297-Add-react-compiler-to-the-packages-build-dbbefd7b8.14 → 0.14.3-RUI-297-Add-react-compiler-to-the-packages-build-8aaaed4be.43
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/lib/chip-list-multi.js +117 -31
- package/lib/chip-list.js +131 -31
- package/lib/index.css +51 -46
- package/lib/parts/chip-list-base.d.ts +1 -1
- package/lib/parts/chip-list-base.js +198 -60
- package/lib/parts/chip-list-context.js +4 -2
- package/lib/parts/chip-list.p.module.css.js +24 -24
- package/lib/parts/chip.js +369 -101
- package/lib/parts/use-items-ids.js +114 -65
- package/lib/parts/use-roving-tab-index.js +62 -31
- package/lib/parts/use-safe-id.d.ts +3 -1
- package/lib/parts/use-safe-id.js +6 -11
- package/lib/public-api.p.css +5 -0
- package/lib/public-api.pcss +5 -0
- package/package.json +6 -5
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { c } from 'react-compiler-runtime';
|
|
2
|
+
import React, { useRef, cloneElement } from 'react';
|
|
2
3
|
import { deepMap } from './deep-map.js';
|
|
3
4
|
import Chip from './chip.js';
|
|
4
5
|
|
|
@@ -32,81 +33,129 @@ const hasElHref = el => typeof el.props?.href !== 'undefined';
|
|
|
32
33
|
|
|
33
34
|
const hasElAriaControls = el => typeof el.props?.['aria-controls'] !== 'undefined';
|
|
34
35
|
|
|
35
|
-
|
|
36
|
-
let
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
const
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
36
|
+
function getChildrenWithValues(children, compareValues, value, createChipRef) {
|
|
37
|
+
let counter = 0;
|
|
38
|
+
const currentSelectedItemIds = [];
|
|
39
|
+
let currentHasHref = false;
|
|
40
|
+
let currentHasControls = false;
|
|
41
|
+
let currentAllItemsHaveControls = true;
|
|
42
|
+
const items = deepMap(children, child => {
|
|
43
|
+
if (child.type === Chip) {
|
|
44
|
+
if (hasElHref(child)) {
|
|
45
|
+
currentHasHref = true;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
if (hasElAriaControls(child)) {
|
|
49
|
+
currentHasControls = true;
|
|
50
|
+
} else {
|
|
51
|
+
currentAllItemsHaveControls = false;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
const childValue = hasElValue(child) ? child.props.value : counter;
|
|
55
|
+
const isSelectedItem = compareValues(value, childValue);
|
|
56
|
+
|
|
57
|
+
if (isSelectedItem) {
|
|
58
|
+
currentSelectedItemIds.push(counter);
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
const patchedItem = patchItemIfNeeded({
|
|
62
|
+
child,
|
|
63
|
+
itemId: counter,
|
|
64
|
+
childValue,
|
|
65
|
+
ref: createChipRef(counter, getElementRef(child))
|
|
66
|
+
});
|
|
67
|
+
counter += 1;
|
|
68
|
+
return patchedItem;
|
|
45
69
|
} else {
|
|
46
|
-
|
|
70
|
+
return child;
|
|
47
71
|
}
|
|
72
|
+
});
|
|
73
|
+
return {
|
|
74
|
+
childrenWithValues: React.Children.toArray(items),
|
|
75
|
+
selectedIds: currentSelectedItemIds,
|
|
76
|
+
hasHref: currentHasHref,
|
|
77
|
+
hasControls: currentHasControls,
|
|
78
|
+
allItemsHaveControls: counter > 0 && currentAllItemsHaveControls
|
|
79
|
+
};
|
|
80
|
+
}
|
|
48
81
|
|
|
49
|
-
|
|
50
|
-
|
|
82
|
+
const useItemsIds = t0 => {
|
|
83
|
+
const $ = c(12);
|
|
51
84
|
const {
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
currentAllItemsHaveControls = false;
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
const childValue = hasElValue(child) ? child.props.value : counter;
|
|
76
|
-
const isSelectedItem = compareValues(value, childValue);
|
|
77
|
-
|
|
78
|
-
if (isSelectedItem) {
|
|
79
|
-
currentSelectedItemIds.push(counter);
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
const patchedItem = patchItemIfNeeded({
|
|
83
|
-
child,
|
|
84
|
-
itemId: counter,
|
|
85
|
-
childValue,
|
|
86
|
-
ref: createChipRef(counter, getElementRef(child))
|
|
87
|
-
});
|
|
88
|
-
counter += 1;
|
|
89
|
-
return patchedItem;
|
|
85
|
+
children,
|
|
86
|
+
compareValues,
|
|
87
|
+
value
|
|
88
|
+
} = t0;
|
|
89
|
+
let t1;
|
|
90
|
+
|
|
91
|
+
if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
|
|
92
|
+
t1 = new Map();
|
|
93
|
+
$[0] = t1;
|
|
94
|
+
} else {
|
|
95
|
+
t1 = $[0];
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
const tabRefs = useRef(t1);
|
|
99
|
+
let t2;
|
|
100
|
+
|
|
101
|
+
if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
|
|
102
|
+
t2 = (itemId, childRef) => node => {
|
|
103
|
+
if (node) {
|
|
104
|
+
tabRefs.current.set(itemId, node);
|
|
90
105
|
} else {
|
|
91
|
-
|
|
106
|
+
tabRefs.current.delete(itemId);
|
|
92
107
|
}
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
childrenWithValues: React.Children.toArray(items),
|
|
96
|
-
selectedIds: currentSelectedItemIds,
|
|
97
|
-
hasHref: currentHasHref,
|
|
98
|
-
hasControls: currentHasControls,
|
|
99
|
-
allItemsHaveControls: counter > 0 && currentAllItemsHaveControls
|
|
108
|
+
|
|
109
|
+
setRef(childRef, node);
|
|
100
110
|
};
|
|
101
|
-
|
|
102
|
-
|
|
111
|
+
|
|
112
|
+
$[1] = t2;
|
|
113
|
+
} else {
|
|
114
|
+
t2 = $[1];
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
const createChipRef = t2;
|
|
118
|
+
let t3;
|
|
119
|
+
|
|
120
|
+
if ($[2] !== children || $[3] !== compareValues || $[4] !== value) {
|
|
121
|
+
t3 = getChildrenWithValues(children, compareValues, value, createChipRef);
|
|
122
|
+
$[2] = children;
|
|
123
|
+
$[3] = compareValues;
|
|
124
|
+
$[4] = value;
|
|
125
|
+
$[5] = t3;
|
|
126
|
+
} else {
|
|
127
|
+
t3 = $[5];
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
const {
|
|
103
131
|
childrenWithValues,
|
|
104
132
|
selectedIds,
|
|
105
133
|
hasHref,
|
|
106
134
|
hasControls,
|
|
107
|
-
allItemsHaveControls
|
|
108
|
-
|
|
109
|
-
|
|
135
|
+
allItemsHaveControls
|
|
136
|
+
} = t3;
|
|
137
|
+
let t4;
|
|
138
|
+
|
|
139
|
+
if ($[6] !== allItemsHaveControls || $[7] !== childrenWithValues || $[8] !== hasControls || $[9] !== hasHref || $[10] !== selectedIds) {
|
|
140
|
+
t4 = {
|
|
141
|
+
childrenWithValues,
|
|
142
|
+
selectedIds,
|
|
143
|
+
hasHref,
|
|
144
|
+
hasControls,
|
|
145
|
+
allItemsHaveControls,
|
|
146
|
+
tabRefs
|
|
147
|
+
};
|
|
148
|
+
$[6] = allItemsHaveControls;
|
|
149
|
+
$[7] = childrenWithValues;
|
|
150
|
+
$[8] = hasControls;
|
|
151
|
+
$[9] = hasHref;
|
|
152
|
+
$[10] = selectedIds;
|
|
153
|
+
$[11] = t4;
|
|
154
|
+
} else {
|
|
155
|
+
t4 = $[11];
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
return t4;
|
|
110
159
|
};
|
|
111
160
|
|
|
112
161
|
export { useItemsIds };
|
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
import _includesInstanceProperty from
|
|
2
|
-
import
|
|
1
|
+
import _includesInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/includes';
|
|
2
|
+
import { c } from 'react-compiler-runtime';
|
|
3
|
+
import { useState } from 'react';
|
|
3
4
|
|
|
4
5
|
const getNextItemId = _ref => {
|
|
5
6
|
let {
|
|
@@ -31,43 +32,73 @@ const getNextItemId = _ref => {
|
|
|
31
32
|
return currentItemId;
|
|
32
33
|
};
|
|
33
34
|
|
|
34
|
-
const useRovingTabIndex =
|
|
35
|
-
|
|
35
|
+
const useRovingTabIndex = t0 => {
|
|
36
|
+
const $ = c(6);
|
|
37
|
+
const {
|
|
36
38
|
enabled,
|
|
37
39
|
selectedId,
|
|
38
40
|
tabRefs
|
|
39
|
-
} =
|
|
40
|
-
const [currentTabStopId, setCurrentTabStopId] =
|
|
41
|
-
|
|
42
|
-
|
|
41
|
+
} = t0;
|
|
42
|
+
const [currentTabStopId, setCurrentTabStopId] = useState(selectedId ?? 0);
|
|
43
|
+
const [previousSelectedId, setPreviousSelectedId] = useState(selectedId);
|
|
44
|
+
|
|
45
|
+
if (!Object.is(selectedId, previousSelectedId)) {
|
|
46
|
+
setPreviousSelectedId(selectedId);
|
|
47
|
+
|
|
48
|
+
if (typeof selectedId !== "undefined") {
|
|
43
49
|
setCurrentTabStopId(selectedId);
|
|
44
50
|
}
|
|
45
|
-
}
|
|
46
|
-
const onTabKeyDown = React.useCallback((e, itemId) => {
|
|
47
|
-
var _context;
|
|
51
|
+
}
|
|
48
52
|
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
}
|
|
53
|
+
const currentTabsRefs = tabRefs?.current;
|
|
54
|
+
let t1;
|
|
52
55
|
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
+
if ($[0] !== currentTabsRefs || $[1] !== enabled) {
|
|
57
|
+
t1 = (e, itemId) => {
|
|
58
|
+
var _context;
|
|
59
|
+
|
|
60
|
+
if (!enabled) {
|
|
61
|
+
return;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
if (!_includesInstanceProperty(_context = ["ArrowLeft", "ArrowRight", "Home", "End"]).call(_context, e.key)) {
|
|
65
|
+
return;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
const itemsCount = currentTabsRefs.size ?? 0;
|
|
69
|
+
const nextItemId = getNextItemId({
|
|
70
|
+
currentItemId: itemId,
|
|
71
|
+
itemsCount,
|
|
72
|
+
key: e.key
|
|
73
|
+
});
|
|
74
|
+
e.preventDefault();
|
|
75
|
+
setCurrentTabStopId(nextItemId);
|
|
76
|
+
currentTabsRefs.get(nextItemId)?.focus();
|
|
77
|
+
};
|
|
78
|
+
|
|
79
|
+
$[0] = currentTabsRefs;
|
|
80
|
+
$[1] = enabled;
|
|
81
|
+
$[2] = t1;
|
|
82
|
+
} else {
|
|
83
|
+
t1 = $[2];
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
const onTabKeyDown = t1;
|
|
87
|
+
let t2;
|
|
88
|
+
|
|
89
|
+
if ($[3] !== currentTabStopId || $[4] !== onTabKeyDown) {
|
|
90
|
+
t2 = {
|
|
91
|
+
currentTabStopId,
|
|
92
|
+
onTabKeyDown
|
|
93
|
+
};
|
|
94
|
+
$[3] = currentTabStopId;
|
|
95
|
+
$[4] = onTabKeyDown;
|
|
96
|
+
$[5] = t2;
|
|
97
|
+
} else {
|
|
98
|
+
t2 = $[5];
|
|
99
|
+
}
|
|
56
100
|
|
|
57
|
-
|
|
58
|
-
const nextItemId = getNextItemId({
|
|
59
|
-
currentItemId: itemId,
|
|
60
|
-
itemsCount,
|
|
61
|
-
key: e.key
|
|
62
|
-
});
|
|
63
|
-
e.preventDefault();
|
|
64
|
-
setCurrentTabStopId(nextItemId);
|
|
65
|
-
tabRefs?.current.get(nextItemId)?.focus();
|
|
66
|
-
}, [enabled, tabRefs]);
|
|
67
|
-
return {
|
|
68
|
-
currentTabStopId,
|
|
69
|
-
onTabKeyDown
|
|
70
|
-
};
|
|
101
|
+
return t2;
|
|
71
102
|
};
|
|
72
103
|
|
|
73
104
|
export { useRovingTabIndex };
|
package/lib/parts/use-safe-id.js
CHANGED
|
@@ -1,15 +1,10 @@
|
|
|
1
|
-
import React, {
|
|
1
|
+
import React, { useState } from 'react';
|
|
2
|
+
let nextFallbackId = 0;
|
|
2
3
|
|
|
3
|
-
|
|
4
|
-
const id =
|
|
4
|
+
function useFallbackId() {
|
|
5
|
+
const [id] = useState(() => nextFallbackId++);
|
|
6
|
+
return id;
|
|
7
|
+
}
|
|
5
8
|
|
|
6
|
-
if (id.current === null) {
|
|
7
|
-
id.current = useFallbackId.counter++;
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
return id.current.toString();
|
|
11
|
-
};
|
|
12
|
-
|
|
13
|
-
useFallbackId.counter = 0;
|
|
14
9
|
const useSafeId = React.useId ?? useFallbackId;
|
|
15
10
|
export { useSafeId };
|
package/lib/public-api.p.css
CHANGED
package/lib/public-api.pcss
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@rescui/chip-list",
|
|
3
|
-
"version": "0.14.3-RUI-297-Add-react-compiler-to-the-packages-build-
|
|
3
|
+
"version": "0.14.3-RUI-297-Add-react-compiler-to-the-packages-build-8aaaed4be.43+8aaaed4be",
|
|
4
4
|
"description": "",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"author": "JetBrains",
|
|
@@ -17,7 +17,8 @@
|
|
|
17
17
|
},
|
|
18
18
|
"dependencies": {
|
|
19
19
|
"@babel/runtime-corejs3": "^7.26.0",
|
|
20
|
-
"classnames": "^2.2.6"
|
|
20
|
+
"classnames": "^2.2.6",
|
|
21
|
+
"react-compiler-runtime": "^1.0.0"
|
|
21
22
|
},
|
|
22
23
|
"peerDependencies": {
|
|
23
24
|
"@rescui/ui-contexts": "^0.6.0",
|
|
@@ -25,9 +26,9 @@
|
|
|
25
26
|
"react": ">=17.0.0 <20"
|
|
26
27
|
},
|
|
27
28
|
"devDependencies": {
|
|
28
|
-
"@rescui/colors": "0.3.3-RUI-297-Add-react-compiler-to-the-packages-build-
|
|
29
|
+
"@rescui/colors": "0.3.3-RUI-297-Add-react-compiler-to-the-packages-build-8aaaed4be.43+8aaaed4be",
|
|
29
30
|
"@rescui/scripts": "0.5.2",
|
|
30
|
-
"@rescui/typography": "0.27.3-RUI-297-Add-react-compiler-to-the-packages-build-
|
|
31
|
+
"@rescui/typography": "0.27.3-RUI-297-Add-react-compiler-to-the-packages-build-8aaaed4be.43+8aaaed4be",
|
|
31
32
|
"@rescui/visual-regression": "0.1.4"
|
|
32
33
|
},
|
|
33
34
|
"scripts": {
|
|
@@ -35,5 +36,5 @@
|
|
|
35
36
|
"build-pcss-api": "rescui-scripts build-pcss-api --file public-api.p.css"
|
|
36
37
|
},
|
|
37
38
|
"nx": {},
|
|
38
|
-
"gitHead": "
|
|
39
|
+
"gitHead": "8aaaed4bee650c002b7f195438380b70c31cc5a4"
|
|
39
40
|
}
|