@react-spectrum/list 3.0.0-alpha.1 → 3.0.0-alpha.10

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 (13) hide show
  1. package/dist/main.css +1 -2
  2. package/dist/main.js +725 -372
  3. package/dist/main.js.map +1 -1
  4. package/dist/module.js +738 -326
  5. package/dist/module.js.map +1 -1
  6. package/dist/types.d.ts +33 -6
  7. package/dist/types.d.ts.map +1 -1
  8. package/package.json +39 -30
  9. package/src/DragPreview.tsx +72 -0
  10. package/src/ListView.tsx +152 -29
  11. package/src/ListViewItem.tsx +149 -17
  12. package/src/listview.css +322 -10
  13. package/dist/main.css.map +0 -1
package/src/listview.css CHANGED
@@ -1,9 +1,21 @@
1
+
2
+ :root {
3
+ --spectrum-listview-item-compact-padding-y: var(--spectrum-global-dimension-size-50);
4
+ --spectrum-listview-item-regular-padding-y: var(--spectrum-global-dimension-size-85);
5
+ --spectrum-listview-item-spacious-padding-y: var(--spectrum-global-dimension-size-100);
6
+ --spectrum-listview-border-width: var(--spectrum-table-border-size, var(--spectrum-alias-border-size-thin));
7
+ --spectrum-listview-border-radius: var(--spectrum-table-border-radius, var(--spectrum-alias-border-radius-regular));
8
+ --spectrum-listview-item-border-radius: calc(var(--spectrum-listview-border-radius) - var(--spectrum-listview-border-width));
9
+ --spectrum-listview-row-sticky-focus-indicator-width: 3px;
10
+ }
11
+
1
12
  .react-spectrum-ListView {
13
+ box-sizing: border-box;
2
14
  border-color: var(--spectrum-table-border-color, var(--spectrum-alias-border-color-mid));
3
15
  border-style: solid;
4
16
  position: relative;
5
- border-width: var(--spectrum-table-border-size, var(--spectrum-alias-border-size-thin));
6
- border-radius: var(--spectrum-table-border-radius, var(--spectrum-alias-border-radius-regular));
17
+ border-width: var(--spectrum-listview-border-width);
18
+ border-radius: var(--spectrum-listview-border-radius);
7
19
  overflow: auto;
8
20
  vertical-align: var(--spectrum-table-cell-vertical-alignment);
9
21
  border-collapse: separate;
@@ -12,31 +24,328 @@
12
24
  padding: 0;
13
25
  background-color: var(--spectrum-table-background-color, var(--spectrum-global-color-gray-50));
14
26
  outline: 0;
27
+ user-select: none;
28
+
29
+ .react-spectrum-ListView-row {
30
+ outline: none;
31
+ }
32
+
33
+ &.react-spectrum-ListView--emphasized {
34
+ .react-spectrum-ListViewItem {
35
+ /* common pseudoelement for box shadows */
36
+ &:after {
37
+ content: '';
38
+ display: block;
39
+ position: absolute;
40
+ inset-inline-start: 0;
41
+ inset-inline-end: 0;
42
+ inset-block-end: 0;
43
+ inset-block-start: 0;
44
+ z-index: 3;
45
+ pointer-events: none;
46
+ }
47
+
48
+ /* Box shadow for bottom border for non-selected rows that is immmediately above a selected row. */
49
+ &.is-next-selected {
50
+ &:after {
51
+ box-shadow: inset 0 -1px 0 0 var(--spectrum-global-color-blue-500);
52
+ }
53
+ }
54
+
55
+ &.is-selected {
56
+ background-color: var(--spectrum-table-row-background-color-selected);
57
+ &.is-hovered,
58
+ &.is-active {
59
+ background-color: var(--spectrum-table-row-background-color-selected-hover);
60
+ }
61
+
62
+ &:focus-ring {
63
+ background-color: var(--spectrum-table-row-background-color-selected-key-focus);
64
+ }
65
+
66
+ /* Box shadow for left, right, and bottom border for selected rows. */
67
+ &:after {
68
+ box-shadow: inset 1px 0 0 0 var(--spectrum-global-color-blue-500), inset -1px 0 0 0 var(--spectrum-global-color-blue-500), inset 0 -1px 0 0 var(--spectrum-global-color-blue-500);
69
+ }
70
+
71
+ /* Box shadow for left, right, bottom, and top border for first row when selected (needs 1px top blue border). */
72
+ &.react-spectrum-ListViewItem--firstRow {
73
+ &:after {
74
+ box-shadow: inset 1px 0 0 0 var(--spectrum-global-color-blue-500), inset -1px 0 0 0 var(--spectrum-global-color-blue-500), inset 0 -1px 0 0 var(--spectrum-global-color-blue-500), inset 0 1px 0 0 var(--spectrum-global-color-blue-500);
75
+ }
76
+ }
77
+
78
+ /* Box shadow for left, right, and bottom border for last row when selected (needs 1px bottom blue border). */
79
+ &.react-spectrum-ListViewItem--lastRow {
80
+ &:after {
81
+ box-shadow: inset 1px 0 0 0 var(--spectrum-global-color-blue-500), inset -1px 0 0 0 var(--spectrum-global-color-blue-500), inset 0 -1px 0 0 var(--spectrum-global-color-blue-500);
82
+ }
83
+ }
84
+ }
85
+ }
86
+
87
+ &:not(.react-spectrum-ListView--quiet) {
88
+ .react-spectrum-ListViewItem {
89
+ /* Box shadow for bottom border for non-selected rows that aren't immediatly above a selected row (grey border bottom). */
90
+ /* Also omit bottom border for last row if the total content height of the ListView is equal or greater than the height of the container. This avoids overlapping bottom borders. */
91
+ &:not(.is-selected):not(.is-next-selected):not(.react-spectrum-ListViewItem--isFlushBottom) {
92
+ &:after {
93
+ box-shadow: inset 0 -1px 0 0 var(--spectrum-table-cell-border-color);
94
+ }
95
+ }
96
+
97
+ &.react-spectrum-ListViewItem--firstRow.is-selected {
98
+ &:after {
99
+ border-start-start-radius: var(--spectrum-listview-item-border-radius);
100
+ border-start-end-radius: var(--spectrum-listview-item-border-radius);
101
+ }
102
+ }
103
+ }
104
+
105
+ &:not(.react-spectrum-ListView--loadingMore) {
106
+ .react-spectrum-ListViewItem--lastRow.react-spectrum-ListViewItem--isFlushBottom.is-selected {
107
+ &:after {
108
+ border-end-start-radius: var(--spectrum-listview-item-border-radius);
109
+ border-end-end-radius: var(--spectrum-listview-item-border-radius);
110
+ }
111
+ }
112
+ }
113
+ }
114
+ }
115
+ }
116
+
117
+ .react-spectrum-ListView-row {
118
+ cursor: default;
119
+ /* Not sticky because listview is a single column. If we want to make sticky, will need a cell wrapper like TableView for display: inline-block */
120
+ &:focus-ring {
121
+ &:before {
122
+ content: '';
123
+ position: absolute;
124
+ inset-block-start: 0;
125
+ inset-block-end: 0;
126
+ inset-inline-start: 0;
127
+ width: var(--spectrum-listview-row-sticky-focus-indicator-width);
128
+ z-index: 4;
129
+ background: var(--spectrum-selectlist-option-focus-indicator-color);
130
+ }
131
+ }
132
+ }
133
+
134
+ .react-spectrum-ListView--quiet {
135
+ background-color: var(--spectrum-alias-background-color-transparent);
136
+ border-width: 0;
137
+ border-radius: 0;
15
138
  }
16
139
 
17
140
  .react-spectrum-ListViewItem {
18
141
  display: grid; /* TODO: define grid areas */
19
- border-bottom: 1px solid var(--spectrum-tabel-cell-border-color, var(--spectrum-global-color-gray-300));
20
142
  box-sizing: border-box;
21
143
  font-size: var(--spectrum-table-cell-text-size, var(--spectrum-alias-font-size-default));
22
144
  font-weight: var(--spectrum-table-cell-text-font-weight, var(--spectrum-global-font-weight-regular));
23
145
  line-height: calc(var(--spectrum-table-cell-text-size, var(--spectrum-alias-font-size-default)) * var(--spectrum-table-cell-text-line-height, var(--spectrum-alias-body-text-line-height)) - 1px);
24
- padding: var(--spectrum-global-dimension-size-125) var(--spectrum-table-cell-padding-x, var(--spectrum-global-dimension-size-200));
25
- transition: background-color var(--spectrum-global-animation-duration-100) ease-in-out;
146
+ padding: var(--spectrum-listview-item-regular-padding-y) var(--spectrum-global-dimension-size-160);
26
147
  position: relative;
27
- background-color: var(--spectrum-table-background-color, var(--spectrum-global-color-gray-50));
148
+ /*background-color: var(--spectrum-table-background-color, var(--spectrum-global-color-gray-50));*/
28
149
  color: var(--spectrum-table-cell-text-color, var(--spectrum-alias-text-color));
29
150
  outline: 0;
151
+ min-height: var(--spectrum-global-dimension-size-500);
30
152
 
31
153
  &.is-hovered,
32
154
  &.is-focused {
33
- background-color: var(--spectrum-table-row-background-color-hover);
155
+ background-color: var(--spectrum-table-row-background-color-hover);
34
156
  }
35
157
 
36
158
  &:focus-ring {
37
- background-color: var(--spectrum-table-row-background-color-hover);
38
- box-shadow: inset 0 0 0 2px var(--spectrum-table-cell-border-color-key-focus);
39
- border-radius: var(--spectrum-table-cell-border-radius-key-focus);
159
+ background-color: var(--spectrum-table-row-background-color-hover);
160
+ }
161
+
162
+ &.is-active {
163
+ background-color: var(--spectrum-table-row-background-color-down);
164
+ }
165
+
166
+ &.is-selected {
167
+ background-color: var(--spectrum-table-row-background-color-hover);
168
+
169
+ &.is-hovered,
170
+ &.is-active {
171
+ background-color: var(--spectrum-table-row-background-color-hover);
172
+ }
173
+
174
+ &:focus-ring {
175
+ background-color: var(--spectrum-table-row-background-color-selected-key-focus);
176
+ }
177
+ }
178
+
179
+ &.has-checkbox {
180
+ /* have to eliminate vertical padding to allow proper vertical alignment */
181
+ padding-top: 0px;
182
+ padding-bottom: 0px;
183
+ }
184
+
185
+ .react-spectrum-ListViewItem-grid {
186
+ display: grid;
187
+ grid-template-columns: auto auto auto auto 1fr auto auto;
188
+ grid-template-rows: 1fr auto;
189
+ grid-template-areas:
190
+ "draghandle checkbox icon image content actions actionmenu chevron"
191
+ "draghandle checkbox icon image description actions actionmenu chevron"
192
+ ;
193
+ align-items: center;
194
+ }
195
+
196
+ .react-spectrum-ListViewItem-draghandle-container {
197
+ grid-area: draghandle;
198
+ width: var(--spectrum-global-dimension-size-250);
199
+ display: flex;
200
+ align-self: stretch;
201
+ justify-self: stretch;
202
+ justify-content: center;
203
+ padding: var(--spectrum-global-dimension-size-25);
204
+ padding-inline-start: var(--spectrum-global-dimension-size-40);
205
+
206
+
207
+ .react-spectrum-ListViewItem-draghandle-button {
208
+ width: var(--spectrum-global-dimension-size-200);
209
+ display: flex;
210
+ align-items: center;
211
+ justify-content: center;
212
+ border-radius: var(--spectrum-alias-border-radius-regular);
213
+
214
+ &:focus-ring {
215
+ box-shadow: inset 0 0 0 2px var(--spectrum-table-cell-border-color-key-focus);
216
+ outline: none;
217
+ }
218
+ }
219
+ }
220
+
221
+ .react-spectrum-ListViewItem-checkbox {
222
+ grid-area: checkbox;
223
+ align-items: center;
224
+ justify-items: center;
225
+ min-height: 0;
226
+ height: 100%;
227
+ > span {
228
+ margin: 0;
229
+ }
230
+ }
231
+
232
+ .react-spectrum-ListViewItem-icon,
233
+ .react-spectrum-ListViewItem-image {
234
+ grid-area: image;
235
+ align-items: center;
236
+ justify-items: center;
237
+ padding-inline-end: var(--spectrum-global-dimension-size-100);
238
+ }
239
+
240
+ .react-spectrum-ListViewItem-image {
241
+ border-radius: var(--spectrum-global-dimension-size-25);
242
+ width: var(--spectrum-global-dimension-size-400);
243
+ height: var(--spectrum-global-dimension-size-400);
244
+ }
245
+
246
+ .react-spectrum-ListViewItem-content,
247
+ .react-spectrum-ListViewItem-description {
248
+ flex-grow: 1;
249
+ }
250
+
251
+ .react-spectrum-ListViewItem-content {
252
+ grid-area: content;
253
+ }
254
+
255
+ .react-spectrum-ListViewItem-description {
256
+ grid-area: description;
257
+ }
258
+
259
+ .react-spectrum-ListViewItem-actions {
260
+ grid-area: actions;
261
+ flex-grow: 0;
262
+ flex-shrink: 0;
263
+ }
264
+
265
+ .react-spectrum-ListViewItem-actionmenu {
266
+ grid-area: actionmenu;
267
+ }
268
+
269
+ .react-spectrum-ListViewItem-parentIndicator {
270
+ grid-area: chevron;
271
+ padding-inline-start: var(--spectrum-global-dimension-size-75);
272
+ }
273
+
274
+ &.react-spectrum-ListViewItem-dragPreview {
275
+ width: var(--spectrum-global-dimension-size-2400);
276
+ border: 1px solid var(--spectrum-dropzone-border-color-selected-hover);
277
+ border-radius: var(--spectrum-alias-border-radius-regular);
278
+ background-color: var(--spectrum-table-background-color, var(--spectrum-global-color-gray-50));
279
+
280
+ .react-spectrum-ListViewItem-grid {
281
+ grid-template-areas:
282
+ "icon image content . badge"
283
+ "icon image description . badge"
284
+ ;
285
+ grid-template-columns: auto auto auto 1fr;
286
+ }
287
+
288
+ .react-spectrum-ListViewItem-badge {
289
+ grid-area: badge;
290
+ color: white;
291
+ background: var(--spectrum-global-color-blue-400);
292
+ padding: 0 8px;
293
+ border-radius: var(--spectrum-alias-border-radius-regular);
294
+ }
295
+
296
+ &.react-spectrum-ListViewItem-dragPreview--multiple {
297
+ position: relative;
298
+ &:after {
299
+ content: '';
300
+ display: block;
301
+ position: absolute;
302
+ z-index: -1;
303
+ top: 4px;
304
+ inset-inline-start: 4px;
305
+ width: 100%;
306
+ height: 100%;
307
+ border: 1px solid var(--spectrum-dropzone-border-color-selected-hover);
308
+ border-radius: var(--spectrum-alias-border-radius-regular);
309
+ background-color: var(--spectrum-table-background-color, var(--spectrum-global-color-gray-50));
310
+ }
311
+ }
312
+
313
+ .react-spectrum-ListViewItem-actions,
314
+ .react-spectrum-ListViewItem-actionmenu {
315
+ display: none;
316
+ }
317
+ }
318
+
319
+ /* give first and last items border-radius to match listview container */
320
+ div:first-child > div[role="row"] > & {
321
+ border-start-start-radius: var(--spectrum-listview-item-start-end-border-radius);
322
+ border-start-end-radius: var(--spectrum-listview-item-start-end-border-radius);
323
+ }
324
+ div:last-child > div[role="row"] > & {
325
+ border-end-start-radius: var(--spectrum-listview-item-start-end-border-radius);
326
+ border-end-end-radius: var(--spectrum-listview-item-start-end-border-radius);
327
+ }
328
+ }
329
+
330
+ .react-spectrum-ListView--compact .react-spectrum-ListViewItem {
331
+ padding-top: var(--spectrum-listview-item-compact-padding-y);
332
+ padding-bottom: var(--spectrum-listview-item-compact-padding-y);
333
+ min-height: var(--spectrum-global-dimension-size-400);
334
+ }
335
+
336
+ .react-spectrum-ListView--spacious .react-spectrum-ListViewItem {
337
+ padding-top: var(--spectrum-listview-item-spacious-padding-y);
338
+ padding-bottom: var(--spectrum-listview-item-spacious-padding-y);
339
+ min-height: var(--spectrum-global-dimension-size-600);
340
+ }
341
+
342
+ .react-spectrum-ListView--draggable .react-spectrum-ListViewItem {
343
+ padding-inline-start: 0;
344
+ }
345
+
346
+ .react-spectrum-ListViewItem--draggable {
347
+ .react-spectrum-ListViewItem-checkbox input {
348
+ inset-inline-start: 0;
40
349
  }
41
350
  }
42
351
 
@@ -46,4 +355,7 @@
46
355
  justify-content: center;
47
356
  width: 100%;
48
357
  height: 100%;
358
+ &.react-spectrum-ListView-centeredWrapper--loadingMore {
359
+ padding-top: var(--spectrum-global-dimension-size-50);
360
+ }
49
361
  }
package/dist/main.css.map DELETED
@@ -1 +0,0 @@
1
- {"mappings":"AAAA,gCAIE,sGAAuF,CACvF,sDAA+F,CAC/F,aAAc,CACd,kBAA6D,CAC7D,uBAAyB,CACzB,gBAAiB,CACjB,uBAA+B,CAC/B,SAGF,CAEA,oEAbE,iBAAkB,CASlB,qDAA8F,CAC9F,SA2BF,CAxBA,oCACE,gBAAa,CAAb,YAAa,CACb,6DAAuG,CACvG,qBAAsB,CACtB,wDAAwF,CACxF,eAAoG,CACpG,4HAAiM,CACjM,2FAAkI,CAClI,4CAAsF,CAGtF,2CAaF,CALE,kKAHG,sDAOH,CAJA,sDAEG,yGAA6E,CAC7E,kGACH,CAGF,gDACE,mBAAa,CAAb,YAAa,CACb,qBAAmB,CAAnB,kBAAmB,CACnB,oBAAuB,CAAvB,sBAAuB,CACvB,UAAW,CACX,WACF","sources":["./packages/@react-spectrum/list/src/listview.css"],"sourcesContent":[".react-spectrum-ListView {\n border-color: var(--spectrum-table-border-color, var(--spectrum-alias-border-color-mid));\n border-style: solid;\n position: relative;\n border-width: var(--spectrum-table-border-size, var(--spectrum-alias-border-size-thin));\n border-radius: var(--spectrum-table-border-radius, var(--spectrum-alias-border-radius-regular));\n overflow: auto;\n vertical-align: var(--spectrum-table-cell-vertical-alignment);\n border-collapse: separate;\n border-spacing: 0;\n transform: translate3d(0, 0, 0);\n padding: 0;\n background-color: var(--spectrum-table-background-color, var(--spectrum-global-color-gray-50));\n outline: 0;\n}\n\n.react-spectrum-ListViewItem {\n display: grid; /* TODO: define grid areas */\n border-bottom: 1px solid var(--spectrum-tabel-cell-border-color, var(--spectrum-global-color-gray-300));\n box-sizing: border-box;\n font-size: var(--spectrum-table-cell-text-size, var(--spectrum-alias-font-size-default));\n font-weight: var(--spectrum-table-cell-text-font-weight, var(--spectrum-global-font-weight-regular));\n line-height: calc(var(--spectrum-table-cell-text-size, var(--spectrum-alias-font-size-default)) * var(--spectrum-table-cell-text-line-height, var(--spectrum-alias-body-text-line-height)) - 1px);\n padding: var(--spectrum-global-dimension-size-125) var(--spectrum-table-cell-padding-x, var(--spectrum-global-dimension-size-200));\n transition: background-color var(--spectrum-global-animation-duration-100) ease-in-out;\n position: relative;\n background-color: var(--spectrum-table-background-color, var(--spectrum-global-color-gray-50));\n color: var(--spectrum-table-cell-text-color, var(--spectrum-alias-text-color));\n outline: 0;\n\n &.is-hovered,\n &.is-focused {\n background-color: var(--spectrum-table-row-background-color-hover);\n }\n\n &:focus-ring {\n background-color: var(--spectrum-table-row-background-color-hover);\n box-shadow: inset 0 0 0 2px var(--spectrum-table-cell-border-color-key-focus);\n border-radius: var(--spectrum-table-cell-border-radius-key-focus);\n }\n}\n\n.react-spectrum-ListView-centeredWrapper {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n}\n"],"names":[],"version":3,"file":"main.css.map"}