@react-spectrum/list 3.0.0-alpha.1 → 3.0.0-alpha.5
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/dist/main.css +1 -1
- package/dist/main.css.map +1 -1
- package/dist/main.js +244 -82
- package/dist/main.js.map +1 -1
- package/dist/module.js +225 -78
- package/dist/module.js.map +1 -1
- package/dist/types.d.ts +10 -3
- package/dist/types.d.ts.map +1 -1
- package/package.json +30 -29
- package/src/ListView.tsx +74 -18
- package/src/ListViewItem.tsx +81 -15
- package/src/listview.css +166 -9
package/dist/module.js
CHANGED
|
@@ -2,17 +2,22 @@ import { Item } from "@react-stately/collections";
|
|
|
2
2
|
export { Item };
|
|
3
3
|
import { Virtualizer } from "@react-aria/virtualizer";
|
|
4
4
|
import { useProvider } from "@react-spectrum/provider";
|
|
5
|
-
import { useCollator, useLocale, useMessageFormatter } from "@react-aria/i18n";
|
|
6
5
|
import { ProgressCircle } from "@react-spectrum/progress";
|
|
7
|
-
import {
|
|
6
|
+
import { useLocale, useCollator, useMessageFormatter } from "@react-aria/i18n";
|
|
7
|
+
import { useHover, usePress } from "@react-aria/interactions";
|
|
8
8
|
import { useFocusRing } from "@react-aria/focus";
|
|
9
9
|
import _react, { useContext, useRef, useMemo } from "react";
|
|
10
10
|
import { mergeProps } from "@react-aria/utils";
|
|
11
|
+
import { Grid } from "@react-spectrum/layout";
|
|
12
|
+
import { Content } from "@react-spectrum/view";
|
|
13
|
+
import _spectrumIconsUiChevronRightMedium from "@spectrum-icons/ui/ChevronRightMedium";
|
|
14
|
+
import _spectrumIconsUiChevronLeftMedium from "@spectrum-icons/ui/ChevronLeftMedium";
|
|
15
|
+
import { Checkbox } from "@react-spectrum/checkbox";
|
|
11
16
|
import { useListState } from "@react-stately/list";
|
|
12
17
|
import { ListLayout } from "@react-stately/layout";
|
|
13
|
-
import { GridKeyboardDelegate, useGrid, useGridCell, useGridRow } from "@react-aria/grid";
|
|
18
|
+
import { GridKeyboardDelegate, useGrid, useGridCell, useGridRow, useGridSelectionCheckbox } from "@react-aria/grid";
|
|
14
19
|
import { GridCollection, useGridState } from "@react-stately/grid";
|
|
15
|
-
import { classNames, useDOMRef, useStyleProps } from "@react-spectrum/utils";
|
|
20
|
+
import { classNames, useDOMRef, useStyleProps, ClearSlots, SlotProvider } from "@react-spectrum/utils";
|
|
16
21
|
import _babelRuntimeHelpersEsmInteropRequireDefault from "@babel/runtime/helpers/esm/interopRequireDefault";
|
|
17
22
|
import _babelRuntimeHelpersEsmExtends from "@babel/runtime/helpers/esm/extends";
|
|
18
23
|
import "./main.css";
|
|
@@ -21,128 +26,152 @@ function $parcel$interopDefault(a) {
|
|
|
21
26
|
return a && a.__esModule ? a.default : a;
|
|
22
27
|
}
|
|
23
28
|
|
|
24
|
-
// ASSET: /Users/govett/
|
|
29
|
+
// ASSET: /Users/govett/Downloads/react-spectrum-release/packages/@react-spectrum/list/src/listview.css
|
|
25
30
|
var $ebb597d7e6956599eca07e96d462420$exports = {};
|
|
26
31
|
$ebb597d7e6956599eca07e96d462420$exports = {
|
|
27
|
-
"react-spectrum-ListView": "_react-spectrum-
|
|
28
|
-
"react-spectrum-
|
|
29
|
-
"
|
|
30
|
-
"
|
|
31
|
-
"
|
|
32
|
-
"
|
|
32
|
+
"react-spectrum-ListView": "_react-spectrum-ListView_ba3f2",
|
|
33
|
+
"react-spectrum-ListView--quiet": "_react-spectrum-ListView--quiet_ba3f2",
|
|
34
|
+
"react-spectrum-ListViewItem": "_react-spectrum-ListViewItem_ba3f2",
|
|
35
|
+
"react-spectrum-ListView--emphasized": "_react-spectrum-ListView--emphasized_ba3f2",
|
|
36
|
+
"is-selected": "_is-selected_ba3f2",
|
|
37
|
+
"is-hovered": "_is-hovered_ba3f2",
|
|
38
|
+
"is-active": "_is-active_ba3f2",
|
|
39
|
+
"is-previous-selected": "_is-previous-selected_ba3f2",
|
|
40
|
+
"is-focused": "_is-focused_ba3f2",
|
|
41
|
+
"focus-ring": "_focus-ring_ba3f2",
|
|
42
|
+
"has-checkbox": "_has-checkbox_ba3f2",
|
|
43
|
+
"react-spectrum-ListView--compact": "_react-spectrum-ListView--compact_ba3f2",
|
|
44
|
+
"react-spectrum-ListView--spacious": "_react-spectrum-ListView--spacious_ba3f2",
|
|
45
|
+
"react-spectrum-ListViewItem-grid": "_react-spectrum-ListViewItem-grid_ba3f2",
|
|
46
|
+
"react-spectrum-ListViewItem-checkbox": "_react-spectrum-ListViewItem-checkbox_ba3f2",
|
|
47
|
+
"react-spectrum-ListViewItem-icon": "_react-spectrum-ListViewItem-icon_ba3f2",
|
|
48
|
+
"react-spectrum-ListViewItem-image": "_react-spectrum-ListViewItem-image_ba3f2",
|
|
49
|
+
"react-spectrum-ListViewItem-content": "_react-spectrum-ListViewItem-content_ba3f2",
|
|
50
|
+
"react-spectrum-ListViewItem-description": "_react-spectrum-ListViewItem-description_ba3f2",
|
|
51
|
+
"react-spectrum-ListViewItem-actions": "_react-spectrum-ListViewItem-actions_ba3f2",
|
|
52
|
+
"react-spectrum-ListViewItem-actionmenu": "_react-spectrum-ListViewItem-actionmenu_ba3f2",
|
|
53
|
+
"react-spectrum-ListView-centeredWrapper": "_react-spectrum-ListView-centeredWrapper_ba3f2",
|
|
54
|
+
"react-spectrum-ListViewItem-parentIndicator": "_react-spectrum-ListViewItem-parentIndicator_ba3f2"
|
|
33
55
|
};
|
|
34
|
-
// ASSET: /Users/govett/
|
|
56
|
+
// ASSET: /Users/govett/Downloads/react-spectrum-release/packages/@react-spectrum/list/intl/ar-AE.json
|
|
35
57
|
var $b85ce4af889dd6c3d521a587c1900ce$exports = {};
|
|
36
|
-
$b85ce4af889dd6c3d521a587c1900ce$exports = JSON.parse("{\"loading\":\"
|
|
37
|
-
// ASSET: /Users/govett/
|
|
58
|
+
$b85ce4af889dd6c3d521a587c1900ce$exports = JSON.parse("{\"loading\":\"جارٍ التحميل...\",\"loadingMore\":\"جارٍ تحميل المزيد...\"}");
|
|
59
|
+
// ASSET: /Users/govett/Downloads/react-spectrum-release/packages/@react-spectrum/list/intl/bg-BG.json
|
|
38
60
|
var $f9bd76206a32f1e5f95049501e98f982$exports = {};
|
|
39
61
|
$f9bd76206a32f1e5f95049501e98f982$exports = JSON.parse("{\"loading\":\"Зареждане...\",\"loadingMore\":\"Зареждане на още...\"}");
|
|
40
|
-
// ASSET: /Users/govett/
|
|
62
|
+
// ASSET: /Users/govett/Downloads/react-spectrum-release/packages/@react-spectrum/list/intl/cs-CZ.json
|
|
41
63
|
var $b3c202afa442ab7441e85fe6c9c17b$exports = {};
|
|
42
64
|
$b3c202afa442ab7441e85fe6c9c17b$exports = JSON.parse("{\"loading\":\"Načítání...\",\"loadingMore\":\"Načítání dalších...\"}");
|
|
43
|
-
// ASSET: /Users/govett/
|
|
65
|
+
// ASSET: /Users/govett/Downloads/react-spectrum-release/packages/@react-spectrum/list/intl/da-DK.json
|
|
44
66
|
var $cb726518541bec80dee545ccee5d8$exports = {};
|
|
45
|
-
$cb726518541bec80dee545ccee5d8$exports = JSON.parse("{\"loading\":\"Indlæser
|
|
46
|
-
// ASSET: /Users/govett/
|
|
67
|
+
$cb726518541bec80dee545ccee5d8$exports = JSON.parse("{\"loading\":\"Indlæser...\",\"loadingMore\":\"Indlæser flere...\"}");
|
|
68
|
+
// ASSET: /Users/govett/Downloads/react-spectrum-release/packages/@react-spectrum/list/intl/de-DE.json
|
|
47
69
|
var $f3c59bef8b03aa544e246afc598cf$exports = {};
|
|
48
70
|
$f3c59bef8b03aa544e246afc598cf$exports = JSON.parse("{\"loading\":\"Laden...\",\"loadingMore\":\"Mehr laden ...\"}");
|
|
49
|
-
// ASSET: /Users/govett/
|
|
71
|
+
// ASSET: /Users/govett/Downloads/react-spectrum-release/packages/@react-spectrum/list/intl/el-GR.json
|
|
50
72
|
var $bf0bac8fed5f008c5fea0705ee4c9491$exports = {};
|
|
51
73
|
$bf0bac8fed5f008c5fea0705ee4c9491$exports = JSON.parse("{\"loading\":\"Φόρτωση...\",\"loadingMore\":\"Φόρτωση περισσότερων...\"}");
|
|
52
|
-
// ASSET: /Users/govett/
|
|
74
|
+
// ASSET: /Users/govett/Downloads/react-spectrum-release/packages/@react-spectrum/list/intl/en-US.json
|
|
53
75
|
var $c5670f96e4b56f68645a3f73e33f3b1b$exports = {};
|
|
54
76
|
$c5670f96e4b56f68645a3f73e33f3b1b$exports = JSON.parse("{\"loading\":\"Loading…\",\"loadingMore\":\"Loading more…\"}");
|
|
55
|
-
// ASSET: /Users/govett/
|
|
77
|
+
// ASSET: /Users/govett/Downloads/react-spectrum-release/packages/@react-spectrum/list/intl/es-ES.json
|
|
56
78
|
var $ec3e00d035b1adeeb9629bb2e63ec670$exports = {};
|
|
57
79
|
$ec3e00d035b1adeeb9629bb2e63ec670$exports = JSON.parse("{\"loading\":\"Cargando…\",\"loadingMore\":\"Cargando más…\"}");
|
|
58
|
-
// ASSET: /Users/govett/
|
|
80
|
+
// ASSET: /Users/govett/Downloads/react-spectrum-release/packages/@react-spectrum/list/intl/et-EE.json
|
|
59
81
|
var $d5d5e8c9bdbf05fe30b91f9d09c105b$exports = {};
|
|
60
82
|
$d5d5e8c9bdbf05fe30b91f9d09c105b$exports = JSON.parse("{\"loading\":\"Laadimine...\",\"loadingMore\":\"Laadi rohkem...\"}");
|
|
61
|
-
// ASSET: /Users/govett/
|
|
83
|
+
// ASSET: /Users/govett/Downloads/react-spectrum-release/packages/@react-spectrum/list/intl/fi-FI.json
|
|
62
84
|
var $f63b02513f4fa2e33b24779bb246576d$exports = {};
|
|
63
85
|
$f63b02513f4fa2e33b24779bb246576d$exports = JSON.parse("{\"loading\":\"Ladataan…\",\"loadingMore\":\"Ladataan lisää…\"}");
|
|
64
|
-
// ASSET: /Users/govett/
|
|
86
|
+
// ASSET: /Users/govett/Downloads/react-spectrum-release/packages/@react-spectrum/list/intl/fr-FR.json
|
|
65
87
|
var $fdf3ec38576fab939834da5f4ce751b$exports = {};
|
|
66
88
|
$fdf3ec38576fab939834da5f4ce751b$exports = JSON.parse("{\"loading\":\"Chargement...\",\"loadingMore\":\"Chargement supplémentaire...\"}");
|
|
67
|
-
// ASSET: /Users/govett/
|
|
89
|
+
// ASSET: /Users/govett/Downloads/react-spectrum-release/packages/@react-spectrum/list/intl/he-IL.json
|
|
68
90
|
var $c4be854bbfb0f62f0627be06cf8631df$exports = {};
|
|
69
91
|
$c4be854bbfb0f62f0627be06cf8631df$exports = JSON.parse("{\"loading\":\"טוען...\",\"loadingMore\":\"טוען עוד...\"}");
|
|
70
|
-
// ASSET: /Users/govett/
|
|
92
|
+
// ASSET: /Users/govett/Downloads/react-spectrum-release/packages/@react-spectrum/list/intl/hr-HR.json
|
|
71
93
|
var $d7efbca7550093dc4bacef75b5a1a4$exports = {};
|
|
72
94
|
$d7efbca7550093dc4bacef75b5a1a4$exports = JSON.parse("{\"loading\":\"Učitavam...\",\"loadingMore\":\"Učitavam još...\"}");
|
|
73
|
-
// ASSET: /Users/govett/
|
|
95
|
+
// ASSET: /Users/govett/Downloads/react-spectrum-release/packages/@react-spectrum/list/intl/hu-HU.json
|
|
74
96
|
var $bb8e1768aa7416bf5f81e846bf6$exports = {};
|
|
75
97
|
$bb8e1768aa7416bf5f81e846bf6$exports = JSON.parse("{\"loading\":\"Betöltés folyamatban…\",\"loadingMore\":\"Továbbiak betöltése folyamatban…\"}");
|
|
76
|
-
// ASSET: /Users/govett/
|
|
98
|
+
// ASSET: /Users/govett/Downloads/react-spectrum-release/packages/@react-spectrum/list/intl/it-IT.json
|
|
77
99
|
var $f5b0ed82b6b6173b7821fde8af$exports = {};
|
|
78
100
|
$f5b0ed82b6b6173b7821fde8af$exports = JSON.parse("{\"loading\":\"Caricamento...\",\"loadingMore\":\"Caricamento altri...\"}");
|
|
79
|
-
// ASSET: /Users/govett/
|
|
101
|
+
// ASSET: /Users/govett/Downloads/react-spectrum-release/packages/@react-spectrum/list/intl/ja-JP.json
|
|
80
102
|
var $c8babc235c2f5405863947540a42d114$exports = {};
|
|
81
103
|
$c8babc235c2f5405863947540a42d114$exports = JSON.parse("{\"loading\":\"読み込み中...\",\"loadingMore\":\"さらに読み込み中...\"}");
|
|
82
|
-
// ASSET: /Users/govett/
|
|
104
|
+
// ASSET: /Users/govett/Downloads/react-spectrum-release/packages/@react-spectrum/list/intl/ko-KR.json
|
|
83
105
|
var $c20e3c7d8998036371e02f16e8903916$exports = {};
|
|
84
|
-
$c20e3c7d8998036371e02f16e8903916$exports = JSON.parse("{\"loading\":\"로드
|
|
85
|
-
// ASSET: /Users/govett/
|
|
106
|
+
$c20e3c7d8998036371e02f16e8903916$exports = JSON.parse("{\"loading\":\"로드 중…\",\"loadingMore\":\"추가 로드 중…\"}");
|
|
107
|
+
// ASSET: /Users/govett/Downloads/react-spectrum-release/packages/@react-spectrum/list/intl/lt-LT.json
|
|
86
108
|
var $ae483c709c0388e9340b3940c084f6e$exports = {};
|
|
87
109
|
$ae483c709c0388e9340b3940c084f6e$exports = JSON.parse("{\"loading\":\"Įkeliama...\",\"loadingMore\":\"Įkeliama daugiau...\"}");
|
|
88
|
-
// ASSET: /Users/govett/
|
|
110
|
+
// ASSET: /Users/govett/Downloads/react-spectrum-release/packages/@react-spectrum/list/intl/lv-LV.json
|
|
89
111
|
var $f664e164342bc5fb300120570ce2ac$exports = {};
|
|
90
112
|
$f664e164342bc5fb300120570ce2ac$exports = JSON.parse("{\"loading\":\"Notiek ielāde...\",\"loadingMore\":\"Tiek ielādēts vēl...\"}");
|
|
91
|
-
// ASSET: /Users/govett/
|
|
113
|
+
// ASSET: /Users/govett/Downloads/react-spectrum-release/packages/@react-spectrum/list/intl/nb-NO.json
|
|
92
114
|
var $eda9f5aec26d5a4f32b87634d$exports = {};
|
|
93
115
|
$eda9f5aec26d5a4f32b87634d$exports = JSON.parse("{\"loading\":\"Laster inn ...\",\"loadingMore\":\"Laster inn flere ...\"}");
|
|
94
|
-
// ASSET: /Users/govett/
|
|
116
|
+
// ASSET: /Users/govett/Downloads/react-spectrum-release/packages/@react-spectrum/list/intl/nl-NL.json
|
|
95
117
|
var $d4566582f28d40bb28b61fa439ffe9d$exports = {};
|
|
96
118
|
$d4566582f28d40bb28b61fa439ffe9d$exports = JSON.parse("{\"loading\":\"Laden...\",\"loadingMore\":\"Meer laden...\"}");
|
|
97
|
-
// ASSET: /Users/govett/
|
|
119
|
+
// ASSET: /Users/govett/Downloads/react-spectrum-release/packages/@react-spectrum/list/intl/pl-PL.json
|
|
98
120
|
var $b52f55f57cf8e85e9bea148521ebbe81$exports = {};
|
|
99
121
|
$b52f55f57cf8e85e9bea148521ebbe81$exports = JSON.parse("{\"loading\":\"Ładowanie...\",\"loadingMore\":\"Wczytywanie większej liczby...\"}");
|
|
100
|
-
// ASSET: /Users/govett/
|
|
122
|
+
// ASSET: /Users/govett/Downloads/react-spectrum-release/packages/@react-spectrum/list/intl/pt-BR.json
|
|
101
123
|
var $ce84caf8c6cafeca94546ad1b32$exports = {};
|
|
102
124
|
$ce84caf8c6cafeca94546ad1b32$exports = JSON.parse("{\"loading\":\"Carregando...\",\"loadingMore\":\"Carregando mais...\"}");
|
|
103
|
-
// ASSET: /Users/govett/
|
|
125
|
+
// ASSET: /Users/govett/Downloads/react-spectrum-release/packages/@react-spectrum/list/intl/pt-PT.json
|
|
104
126
|
var $b634896634f9a0e466f643ad9796b88$exports = {};
|
|
105
127
|
$b634896634f9a0e466f643ad9796b88$exports = JSON.parse("{\"loading\":\"A carregar...\",\"loadingMore\":\"A carregar mais...\"}");
|
|
106
|
-
// ASSET: /Users/govett/
|
|
128
|
+
// ASSET: /Users/govett/Downloads/react-spectrum-release/packages/@react-spectrum/list/intl/ro-RO.json
|
|
107
129
|
var $db4befc046436cf26bbc1e4e9cd54$exports = {};
|
|
108
130
|
$db4befc046436cf26bbc1e4e9cd54$exports = JSON.parse("{\"loading\":\"Se încarcă...\",\"loadingMore\":\"Se încarcă mai multe...\"}");
|
|
109
|
-
// ASSET: /Users/govett/
|
|
131
|
+
// ASSET: /Users/govett/Downloads/react-spectrum-release/packages/@react-spectrum/list/intl/ru-RU.json
|
|
110
132
|
var $bd45f53368cd48957b7d9d0068e4f5$exports = {};
|
|
111
133
|
$bd45f53368cd48957b7d9d0068e4f5$exports = JSON.parse("{\"loading\":\"Загрузка...\",\"loadingMore\":\"Дополнительная загрузка...\"}");
|
|
112
|
-
// ASSET: /Users/govett/
|
|
134
|
+
// ASSET: /Users/govett/Downloads/react-spectrum-release/packages/@react-spectrum/list/intl/sk-SK.json
|
|
113
135
|
var $d2f2737dc6babb85bc380b1a2bf09$exports = {};
|
|
114
136
|
$d2f2737dc6babb85bc380b1a2bf09$exports = JSON.parse("{\"loading\":\"Načítava sa...\",\"loadingMore\":\"Načítava sa viac...\"}");
|
|
115
|
-
// ASSET: /Users/govett/
|
|
137
|
+
// ASSET: /Users/govett/Downloads/react-spectrum-release/packages/@react-spectrum/list/intl/sl-SI.json
|
|
116
138
|
var $eeb3a7903c61400c140262784bb766$exports = {};
|
|
117
|
-
$eeb3a7903c61400c140262784bb766$exports = JSON.parse("{\"loading\":\"Nalaganje...\",\"loadingMore\":\"Nalaganje več vsebine...\"}");
|
|
118
|
-
// ASSET: /Users/govett/
|
|
139
|
+
$eeb3a7903c61400c140262784bb766$exports = JSON.parse("{\"loading\":\"Nalaganje ...\",\"loadingMore\":\"Nalaganje več vsebine ...\"}");
|
|
140
|
+
// ASSET: /Users/govett/Downloads/react-spectrum-release/packages/@react-spectrum/list/intl/sr-SP.json
|
|
119
141
|
var $d2ad74d8daf20becf3ecd2bf05c65b4$exports = {};
|
|
120
142
|
$d2ad74d8daf20becf3ecd2bf05c65b4$exports = JSON.parse("{\"loading\":\"Učitavam...\",\"loadingMore\":\"Učitavam još...\"}");
|
|
121
|
-
// ASSET: /Users/govett/
|
|
143
|
+
// ASSET: /Users/govett/Downloads/react-spectrum-release/packages/@react-spectrum/list/intl/sv-SE.json
|
|
122
144
|
var $dcdce261cd753187c50474a7b8f270b3$exports = {};
|
|
123
145
|
$dcdce261cd753187c50474a7b8f270b3$exports = JSON.parse("{\"loading\":\"Läser in...\",\"loadingMore\":\"Läser in mer...\"}");
|
|
124
|
-
// ASSET: /Users/govett/
|
|
146
|
+
// ASSET: /Users/govett/Downloads/react-spectrum-release/packages/@react-spectrum/list/intl/tr-TR.json
|
|
125
147
|
var $b6016d4e7c60b9c6efab2e245dfc18c$exports = {};
|
|
126
148
|
$b6016d4e7c60b9c6efab2e245dfc18c$exports = JSON.parse("{\"loading\":\"Yükleniyor...\",\"loadingMore\":\"Daha fazla yükleniyor...\"}");
|
|
127
|
-
// ASSET: /Users/govett/
|
|
149
|
+
// ASSET: /Users/govett/Downloads/react-spectrum-release/packages/@react-spectrum/list/intl/uk-UA.json
|
|
128
150
|
var $f33211f6b6e538f6ea263208c631f$exports = {};
|
|
129
151
|
$f33211f6b6e538f6ea263208c631f$exports = JSON.parse("{\"loading\":\"Завантаження…\",\"loadingMore\":\"Завантаження інших об’єктів...\"}");
|
|
130
|
-
// ASSET: /Users/govett/
|
|
152
|
+
// ASSET: /Users/govett/Downloads/react-spectrum-release/packages/@react-spectrum/list/intl/zh-CN.json
|
|
131
153
|
var $bb43f9b51eb6e106311801ab5f8f582$exports = {};
|
|
132
154
|
$bb43f9b51eb6e106311801ab5f8f582$exports = JSON.parse("{\"loading\":\"正在加载...\",\"loadingMore\":\"正在加载更多...\"}");
|
|
133
|
-
// ASSET: /Users/govett/
|
|
155
|
+
// ASSET: /Users/govett/Downloads/react-spectrum-release/packages/@react-spectrum/list/intl/zh-TW.json
|
|
134
156
|
var $c3d5030460fd41d7a5870ddf63de81d5$exports = {};
|
|
135
|
-
$c3d5030460fd41d7a5870ddf63de81d5$exports = JSON.parse("{\"loading\":\"
|
|
157
|
+
$c3d5030460fd41d7a5870ddf63de81d5$exports = JSON.parse("{\"loading\":\"載入中…\",\"loadingMore\":\"正在載入更多…\"}");
|
|
136
158
|
var $ebb597d7e6956599eca07e96d462420$$interop$default = $parcel$interopDefault($ebb597d7e6956599eca07e96d462420$exports);
|
|
137
159
|
|
|
138
160
|
function $ac0abb3242b77613ec5573307b88e112$export$ListViewItem(props) {
|
|
139
161
|
let {
|
|
140
|
-
item
|
|
162
|
+
item,
|
|
163
|
+
onAction,
|
|
164
|
+
isEmphasized
|
|
141
165
|
} = props;
|
|
166
|
+
let cellNode = [...item.childNodes][0];
|
|
142
167
|
let {
|
|
143
168
|
state
|
|
144
169
|
} = useContext($cef2d30b40f481de186f4529c10639c$export$ListViewContext);
|
|
145
|
-
let
|
|
170
|
+
let {
|
|
171
|
+
direction
|
|
172
|
+
} = useLocale();
|
|
173
|
+
let rowRef = useRef();
|
|
174
|
+
let cellRef = useRef();
|
|
146
175
|
let {
|
|
147
176
|
isFocusVisible: isFocusVisibleWithin,
|
|
148
177
|
focusProps: focusWithinProps
|
|
@@ -153,31 +182,109 @@ function $ac0abb3242b77613ec5573307b88e112$export$ListViewItem(props) {
|
|
|
153
182
|
isFocusVisible,
|
|
154
183
|
focusProps
|
|
155
184
|
} = useFocusRing();
|
|
185
|
+
let allowsInteraction = state.selectionManager.selectionMode !== 'none' || onAction;
|
|
186
|
+
let isDisabled = !allowsInteraction || state.disabledKeys.has(item.key);
|
|
156
187
|
let {
|
|
157
188
|
hoverProps,
|
|
158
189
|
isHovered
|
|
159
|
-
} = useHover({
|
|
190
|
+
} = useHover({
|
|
191
|
+
isDisabled
|
|
192
|
+
});
|
|
193
|
+
let {
|
|
194
|
+
pressProps,
|
|
195
|
+
isPressed
|
|
196
|
+
} = usePress({
|
|
197
|
+
isDisabled
|
|
198
|
+
});
|
|
160
199
|
let {
|
|
161
200
|
rowProps
|
|
162
201
|
} = useGridRow({
|
|
163
202
|
node: item,
|
|
164
|
-
isVirtualized: true
|
|
165
|
-
|
|
203
|
+
isVirtualized: true,
|
|
204
|
+
onAction: onAction ? () => onAction(item.key) : undefined
|
|
205
|
+
}, state, rowRef);
|
|
166
206
|
let {
|
|
167
207
|
gridCellProps
|
|
168
208
|
} = useGridCell({
|
|
169
|
-
node:
|
|
209
|
+
node: cellNode,
|
|
170
210
|
focusMode: 'cell'
|
|
171
|
-
}, state,
|
|
211
|
+
}, state, cellRef);
|
|
172
212
|
const mergedProps = mergeProps(gridCellProps, hoverProps, focusWithinProps, focusProps);
|
|
173
|
-
|
|
213
|
+
let {
|
|
214
|
+
checkboxProps
|
|
215
|
+
} = useGridSelectionCheckbox(_babelRuntimeHelpersEsmExtends({}, props, {
|
|
216
|
+
key: item.key
|
|
217
|
+
}), state);
|
|
218
|
+
let chevron = null;
|
|
219
|
+
|
|
220
|
+
if (item.props.hasChildItems) {
|
|
221
|
+
chevron = direction === 'ltr' ? /*#__PURE__*/_react.createElement(_spectrumIconsUiChevronRightMedium, {
|
|
222
|
+
"aria-hidden": "true",
|
|
223
|
+
UNSAFE_className: $ebb597d7e6956599eca07e96d462420$$interop$default['react-spectrum-ListViewItem-parentIndicator']
|
|
224
|
+
}) : /*#__PURE__*/_react.createElement(_spectrumIconsUiChevronLeftMedium, {
|
|
225
|
+
"aria-hidden": "true",
|
|
226
|
+
UNSAFE_className: $ebb597d7e6956599eca07e96d462420$$interop$default['react-spectrum-ListViewItem-parentIndicator']
|
|
227
|
+
});
|
|
228
|
+
}
|
|
229
|
+
|
|
230
|
+
let showCheckbox = state.selectionManager.selectionMode !== 'none' && state.selectionManager.selectionBehavior === 'toggle';
|
|
231
|
+
let isSelected = state.selectionManager.isSelected(item.key);
|
|
232
|
+
return /*#__PURE__*/_react.createElement("div", _babelRuntimeHelpersEsmExtends({}, mergeProps(rowProps, pressProps), {
|
|
233
|
+
ref: rowRef
|
|
234
|
+
}), /*#__PURE__*/_react.createElement("div", _babelRuntimeHelpersEsmExtends({
|
|
174
235
|
className: classNames($ebb597d7e6956599eca07e96d462420$$interop$default, 'react-spectrum-ListViewItem', {
|
|
236
|
+
'is-active': isPressed,
|
|
175
237
|
'is-focused': isFocusVisibleWithin,
|
|
176
238
|
'focus-ring': isFocusVisible,
|
|
177
|
-
'is-hovered': isHovered
|
|
239
|
+
'is-hovered': isHovered,
|
|
240
|
+
'is-selected': isSelected,
|
|
241
|
+
'is-previous-selected': state.selectionManager.isSelected(item.prevKey),
|
|
242
|
+
'react-spectrum-ListViewItem--highlightSelection': state.selectionManager.selectionBehavior === 'replace' && (isSelected || state.selectionManager.isSelected(item.nextKey))
|
|
178
243
|
}),
|
|
179
|
-
ref:
|
|
180
|
-
}, mergedProps),
|
|
244
|
+
ref: cellRef
|
|
245
|
+
}, mergedProps), /*#__PURE__*/_react.createElement(Grid, {
|
|
246
|
+
UNSAFE_className: $ebb597d7e6956599eca07e96d462420$$interop$default['react-spectrum-ListViewItem-grid']
|
|
247
|
+
}, showCheckbox && /*#__PURE__*/_react.createElement(Checkbox, _babelRuntimeHelpersEsmExtends({
|
|
248
|
+
UNSAFE_className: $ebb597d7e6956599eca07e96d462420$$interop$default['react-spectrum-ListViewItem-checkbox']
|
|
249
|
+
}, checkboxProps, {
|
|
250
|
+
isEmphasized: isEmphasized
|
|
251
|
+
})), /*#__PURE__*/_react.createElement(SlotProvider, {
|
|
252
|
+
slots: {
|
|
253
|
+
content: {
|
|
254
|
+
UNSAFE_className: $ebb597d7e6956599eca07e96d462420$$interop$default['react-spectrum-ListViewItem-content']
|
|
255
|
+
},
|
|
256
|
+
text: {
|
|
257
|
+
UNSAFE_className: $ebb597d7e6956599eca07e96d462420$$interop$default['react-spectrum-ListViewItem-content']
|
|
258
|
+
},
|
|
259
|
+
description: {
|
|
260
|
+
UNSAFE_className: $ebb597d7e6956599eca07e96d462420$$interop$default['react-spectrum-ListViewItem-description']
|
|
261
|
+
},
|
|
262
|
+
icon: {
|
|
263
|
+
UNSAFE_className: $ebb597d7e6956599eca07e96d462420$$interop$default['react-spectrum-ListViewItem-icon'],
|
|
264
|
+
size: 'M'
|
|
265
|
+
},
|
|
266
|
+
image: {
|
|
267
|
+
UNSAFE_className: $ebb597d7e6956599eca07e96d462420$$interop$default['react-spectrum-ListViewItem-image']
|
|
268
|
+
},
|
|
269
|
+
link: {
|
|
270
|
+
UNSAFE_className: $ebb597d7e6956599eca07e96d462420$$interop$default['react-spectrum-ListViewItem-content'],
|
|
271
|
+
isQuiet: true
|
|
272
|
+
},
|
|
273
|
+
actionButton: {
|
|
274
|
+
UNSAFE_className: $ebb597d7e6956599eca07e96d462420$$interop$default['react-spectrum-ListViewItem-actions'],
|
|
275
|
+
isQuiet: true
|
|
276
|
+
},
|
|
277
|
+
actionGroup: {
|
|
278
|
+
UNSAFE_className: $ebb597d7e6956599eca07e96d462420$$interop$default['react-spectrum-ListViewItem-actions'],
|
|
279
|
+
isQuiet: true,
|
|
280
|
+
density: 'compact'
|
|
281
|
+
},
|
|
282
|
+
actionMenu: {
|
|
283
|
+
UNSAFE_className: $ebb597d7e6956599eca07e96d462420$$interop$default['react-spectrum-ListViewItem-actionmenu'],
|
|
284
|
+
isQuiet: true
|
|
285
|
+
}
|
|
286
|
+
}
|
|
287
|
+
}, typeof item.rendered === 'string' ? /*#__PURE__*/_react.createElement(Content, null, item.rendered) : item.rendered, /*#__PURE__*/_react.createElement(ClearSlots, null, chevron)))));
|
|
181
288
|
}
|
|
182
289
|
|
|
183
290
|
// @ts-ignore
|
|
@@ -220,7 +327,22 @@ const $cef2d30b40f481de186f4529c10639c$var$intlMessages = {
|
|
|
220
327
|
|
|
221
328
|
const $cef2d30b40f481de186f4529c10639c$export$ListViewContext = /*#__PURE__*/_react.createContext(null);
|
|
222
329
|
|
|
223
|
-
|
|
330
|
+
const $cef2d30b40f481de186f4529c10639c$var$ROW_HEIGHTS = {
|
|
331
|
+
compact: {
|
|
332
|
+
medium: 32,
|
|
333
|
+
large: 40
|
|
334
|
+
},
|
|
335
|
+
regular: {
|
|
336
|
+
medium: 40,
|
|
337
|
+
large: 50
|
|
338
|
+
},
|
|
339
|
+
spacious: {
|
|
340
|
+
medium: 48,
|
|
341
|
+
large: 60
|
|
342
|
+
}
|
|
343
|
+
};
|
|
344
|
+
|
|
345
|
+
function $cef2d30b40f481de186f4529c10639c$export$useListLayout(state, density) {
|
|
224
346
|
let {
|
|
225
347
|
scale
|
|
226
348
|
} = useProvider();
|
|
@@ -229,10 +351,10 @@ function $cef2d30b40f481de186f4529c10639c$export$useListLayout(state) {
|
|
|
229
351
|
sensitivity: 'base'
|
|
230
352
|
});
|
|
231
353
|
let layout = useMemo(() => new ListLayout({
|
|
232
|
-
estimatedRowHeight: scale
|
|
354
|
+
estimatedRowHeight: $cef2d30b40f481de186f4529c10639c$var$ROW_HEIGHTS[density][scale],
|
|
233
355
|
padding: 0,
|
|
234
356
|
collator
|
|
235
|
-
}), [collator, scale]);
|
|
357
|
+
}), [collator, scale, density]);
|
|
236
358
|
layout.collection = state.collection;
|
|
237
359
|
layout.disabledKeys = state.disabledKeys;
|
|
238
360
|
return layout;
|
|
@@ -240,7 +362,11 @@ function $cef2d30b40f481de186f4529c10639c$export$useListLayout(state) {
|
|
|
240
362
|
|
|
241
363
|
function $cef2d30b40f481de186f4529c10639c$var$ListView(props, ref) {
|
|
242
364
|
let {
|
|
243
|
-
|
|
365
|
+
density = 'regular',
|
|
366
|
+
loadingState,
|
|
367
|
+
isQuiet,
|
|
368
|
+
transitionDuration = 0,
|
|
369
|
+
onAction
|
|
244
370
|
} = props;
|
|
245
371
|
let domRef = useDOMRef(ref);
|
|
246
372
|
let {
|
|
@@ -259,24 +385,35 @@ function $cef2d30b40f481de186f4529c10639c$var$ListView(props, ref) {
|
|
|
259
385
|
});
|
|
260
386
|
let gridCollection = useMemo(() => new GridCollection({
|
|
261
387
|
columnCount: 1,
|
|
262
|
-
items: [...collection].map(item => ({
|
|
263
|
-
|
|
264
|
-
childNodes: [
|
|
388
|
+
items: [...collection].map(item => _babelRuntimeHelpersEsmExtends({}, item, {
|
|
389
|
+
hasChildNodes: true,
|
|
390
|
+
childNodes: [{
|
|
391
|
+
key: "cell-" + item.key,
|
|
392
|
+
type: 'cell',
|
|
265
393
|
index: 0,
|
|
266
|
-
|
|
267
|
-
|
|
394
|
+
value: null,
|
|
395
|
+
level: 0,
|
|
396
|
+
rendered: null,
|
|
397
|
+
textValue: item.textValue,
|
|
398
|
+
hasChildNodes: false,
|
|
399
|
+
childNodes: []
|
|
400
|
+
}]
|
|
268
401
|
}))
|
|
269
402
|
}), [collection]);
|
|
270
403
|
let state = useGridState(_babelRuntimeHelpersEsmExtends({}, props, {
|
|
271
|
-
collection: gridCollection
|
|
404
|
+
collection: gridCollection,
|
|
405
|
+
focusMode: 'cell',
|
|
406
|
+
selectionBehavior: props.selectionStyle === 'highlight' ? 'replace' : 'toggle'
|
|
272
407
|
}));
|
|
273
|
-
let layout = $cef2d30b40f481de186f4529c10639c$export$useListLayout(state);
|
|
408
|
+
let layout = $cef2d30b40f481de186f4529c10639c$export$useListLayout(state, props.density || 'regular');
|
|
274
409
|
let keyboardDelegate = useMemo(() => new GridKeyboardDelegate({
|
|
275
410
|
collection: state.collection,
|
|
276
411
|
disabledKeys: state.disabledKeys,
|
|
277
412
|
ref: domRef,
|
|
278
413
|
direction,
|
|
279
414
|
collator,
|
|
415
|
+
// Focus the ListView cell instead of the row so that focus doesn't change with left/right arrow keys when there aren't any
|
|
416
|
+
// focusable children in the cell.
|
|
280
417
|
focusMode: 'cell'
|
|
281
418
|
}), [state, domRef, direction, collator]);
|
|
282
419
|
let {
|
|
@@ -286,7 +423,14 @@ function $cef2d30b40f481de186f4529c10639c$var$ListView(props, ref) {
|
|
|
286
423
|
keyboardDelegate
|
|
287
424
|
}), state, domRef); // Sync loading state into the layout.
|
|
288
425
|
|
|
289
|
-
layout.isLoading =
|
|
426
|
+
layout.isLoading = loadingState === 'loading';
|
|
427
|
+
let focusedKey = state.selectionManager.focusedKey;
|
|
428
|
+
let focusedItem = gridCollection.getItem(state.selectionManager.focusedKey);
|
|
429
|
+
|
|
430
|
+
if ((focusedItem == null ? void 0 : focusedItem.parentKey) != null) {
|
|
431
|
+
focusedKey = focusedItem.parentKey;
|
|
432
|
+
}
|
|
433
|
+
|
|
290
434
|
return /*#__PURE__*/_react.createElement($cef2d30b40f481de186f4529c10639c$export$ListViewContext.Provider, {
|
|
291
435
|
value: {
|
|
292
436
|
state,
|
|
@@ -294,17 +438,20 @@ function $cef2d30b40f481de186f4529c10639c$var$ListView(props, ref) {
|
|
|
294
438
|
}
|
|
295
439
|
}, /*#__PURE__*/_react.createElement(Virtualizer, _babelRuntimeHelpersEsmExtends({}, gridProps, styleProps, {
|
|
296
440
|
ref: domRef,
|
|
297
|
-
focusedKey:
|
|
298
|
-
sizeToFit: "height",
|
|
441
|
+
focusedKey: focusedKey,
|
|
299
442
|
scrollDirection: "vertical",
|
|
300
|
-
className: classNames($ebb597d7e6956599eca07e96d462420$$interop$default, 'react-spectrum-ListView',
|
|
443
|
+
className: classNames($ebb597d7e6956599eca07e96d462420$$interop$default, 'react-spectrum-ListView', "react-spectrum-ListView--" + density, 'react-spectrum-ListView--emphasized', {
|
|
444
|
+
'react-spectrum-ListView--quiet': isQuiet
|
|
445
|
+
}, styleProps.className),
|
|
301
446
|
layout: layout,
|
|
302
|
-
collection:
|
|
447
|
+
collection: gridCollection,
|
|
303
448
|
transitionDuration: transitionDuration
|
|
304
449
|
}), (type, item) => {
|
|
305
450
|
if (type === 'item') {
|
|
306
451
|
return /*#__PURE__*/_react.createElement($ac0abb3242b77613ec5573307b88e112$export$ListViewItem, {
|
|
307
|
-
item: item
|
|
452
|
+
item: item,
|
|
453
|
+
onAction: onAction,
|
|
454
|
+
isEmphasized: true
|
|
308
455
|
});
|
|
309
456
|
} else if (type === 'loader') {
|
|
310
457
|
return /*#__PURE__*/_react.createElement($cef2d30b40f481de186f4529c10639c$var$CenteredWrapper, null, /*#__PURE__*/_react.createElement(ProgressCircle, {
|