@react-spectrum/list 3.0.0-alpha.3 → 3.0.0-alpha.7

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 (12) hide show
  1. package/dist/main.css +1 -2
  2. package/dist/main.js +538 -481
  3. package/dist/main.js.map +1 -1
  4. package/dist/module.js +557 -427
  5. package/dist/module.js.map +1 -1
  6. package/dist/types.d.ts +6 -5
  7. package/dist/types.d.ts.map +1 -1
  8. package/package.json +27 -27
  9. package/src/ListView.tsx +49 -12
  10. package/src/ListViewItem.tsx +22 -11
  11. package/src/listview.css +121 -78
  12. package/dist/main.css.map +0 -1
package/src/listview.css CHANGED
@@ -3,6 +3,9 @@
3
3
  --spectrum-listview-item-compact-padding-y: var(--spectrum-global-dimension-size-50);
4
4
  --spectrum-listview-item-regular-padding-y: var(--spectrum-global-dimension-size-75);
5
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-start-end-border-radius: calc(var(--spectrum-listview-border-radius) - var(--spectrum-listview-border-width));
6
9
  }
7
10
 
8
11
  .react-spectrum-ListView {
@@ -10,8 +13,8 @@
10
13
  border-color: var(--spectrum-table-border-color, var(--spectrum-alias-border-color-mid));
11
14
  border-style: solid;
12
15
  position: relative;
13
- border-width: var(--spectrum-table-border-size, var(--spectrum-alias-border-size-thin));
14
- border-radius: var(--spectrum-table-border-radius, var(--spectrum-alias-border-radius-regular));
16
+ border-width: var(--spectrum-listview-border-width);
17
+ border-radius: var(--spectrum-listview-border-radius);
15
18
  overflow: auto;
16
19
  vertical-align: var(--spectrum-table-cell-vertical-alignment);
17
20
  border-collapse: separate;
@@ -20,6 +23,10 @@
20
23
  padding: 0;
21
24
  background-color: var(--spectrum-table-background-color, var(--spectrum-global-color-gray-50));
22
25
  outline: 0;
26
+
27
+ [role="row"] {
28
+ outline: none;
29
+ }
23
30
  }
24
31
 
25
32
  .react-spectrum-ListView--quiet {
@@ -29,7 +36,8 @@
29
36
 
30
37
  .react-spectrum-ListViewItem {
31
38
  display: grid; /* TODO: define grid areas */
32
- border-bottom: 1px solid var(--spectrum-tabel-cell-border-color, var(--spectrum-global-color-gray-300));
39
+ border: 1px solid transparent;
40
+ border-bottom-color: var(--spectrum-table-cell-border-color, var(--spectrum-global-color-gray-300));
33
41
  box-sizing: border-box;
34
42
  font-size: var(--spectrum-table-cell-text-size, var(--spectrum-alias-font-size-default));
35
43
  font-weight: var(--spectrum-table-cell-text-font-weight, var(--spectrum-global-font-weight-regular));
@@ -40,98 +48,141 @@
40
48
  /*background-color: var(--spectrum-table-background-color, var(--spectrum-global-color-gray-50));*/
41
49
  color: var(--spectrum-table-cell-text-color, var(--spectrum-alias-text-color));
42
50
  outline: 0;
43
-
44
- .react-spectrum-ListView--quiet & {
45
- border-bottom: 0;
51
+ min-height: var(--spectrum-global-dimension-size-500);
52
+
53
+ .react-spectrum-ListView--emphasized & {
54
+ &.is-selected {
55
+ background-color: var(--spectrum-table-row-background-color-selected);
56
+ border-color: var(--spectrum-global-color-blue-500);
57
+ &.is-hovered,
58
+ &.is-active {
59
+ background-color: var(--spectrum-table-row-background-color-selected);
60
+ }
61
+
62
+ /* avoid double border for adjacent selected items */
63
+ &.is-previous-selected {
64
+ &:not(.is-focused) {
65
+ border-top-color: transparent;
66
+ }
67
+ }
68
+ }
46
69
  }
47
70
 
48
71
  &.is-hovered,
49
72
  &.is-focused {
50
73
  background-color: var(--spectrum-table-row-background-color-hover);
51
-
52
- .react-spectrum-ListView--quiet & {
53
- border-radius: var(--spectrum-table-border-radius, var(--spectrum-alias-border-radius-regular));
54
- }
55
74
  }
56
75
 
57
76
  &:focus-ring {
58
77
  background-color: var(--spectrum-table-row-background-color-hover);
59
- box-shadow: inset 0 0 0 2px var(--spectrum-table-cell-border-color-key-focus);
60
- border-radius: var(--spectrum-table-cell-border-radius-key-focus);
78
+ box-shadow: inset 0 0 0 1px var(--spectrum-table-cell-border-color-key-focus);
79
+ border-color: var(--spectrum-global-color-blue-500);
61
80
  }
62
- }
63
81
 
64
- .react-spectrum-ListViewItem-selected {
65
- background-color: var(--spectrum-table-row-background-color-selected, var(--spectrum-alias-highlight-selected));
66
- &.is-hovered {
67
- background-color: var(--spectrum-table-quiet-row-background-color-selected-hover);
82
+ &.is-active {
83
+ background-color: var(--spectrum-table-row-background-color-down);
68
84
  }
69
- }
70
85
 
71
- .react-spectrum-ListView--compact .react-spectrum-ListViewItem {
72
- padding-top: var(--spectrum-listview-item-compact-padding-y);
73
- padding-bottom: var(--spectrum-listview-item-compact-padding-y);
74
- }
86
+ &.is-selected {
87
+ background-color: var(--spectrum-table-row-background-color-hover);
75
88
 
76
- .react-spectrum-ListView--spacious .react-spectrum-ListViewItem {
77
- padding-top: var(--spectrum-listview-item-spacious-padding-y);
78
- padding-bottom: var(--spectrum-listview-item-spacious-padding-y);
79
- }
89
+ &.is-hovered,
90
+ &.is-active {
91
+ background-color: var(--spectrum-table-row-background-color-hover);
92
+ }
93
+ }
80
94
 
81
- .react-spectrum-ListViewItem-grid {
82
- display: grid;
83
- grid-template-columns: auto auto auto 1fr auto auto;
84
- grid-template-rows: 1fr auto;
85
- grid-template-areas:
86
- "checkbox icon image content actions chevron"
87
- "checkbox icon image description actions chevron"
88
- ;
89
- align-items: center;
90
- }
95
+ &.has-checkbox {
96
+ /* have to eliminate vertical padding to allow proper vertical alignment */
97
+ padding-top: 0px;
98
+ padding-bottom: 0px;
99
+ }
91
100
 
92
- .react-spectrum-ListViewItem-checkbox {
93
- grid-area: checkbox;
94
- align-items: center;
95
- justify-items: center;
96
- }
101
+ .react-spectrum-ListViewItem-grid {
102
+ display: grid;
103
+ grid-template-columns: auto auto auto 1fr auto auto;
104
+ grid-template-rows: 1fr auto;
105
+ grid-template-areas:
106
+ "checkbox icon image content actions actionmenu chevron"
107
+ "checkbox icon image description actions actionmenu chevron"
108
+ ;
109
+ align-items: center;
110
+ }
97
111
 
98
- .react-spectrum-ListViewItem-icon,
99
- .react-spectrum-ListViewItem-image {
100
- grid-area: image;
101
- align-items: center;
102
- justify-items: center;
112
+ .react-spectrum-ListViewItem-checkbox {
113
+ grid-area: checkbox;
114
+ align-items: center;
115
+ justify-items: center;
116
+ min-height: 0;
117
+ height: 100%;
118
+ > span {
119
+ margin: 0;
120
+ }
121
+ }
103
122
 
104
- [dir="ltr"] & {
105
- padding-right: var(--spectrum-global-dimension-size-100);
123
+ .react-spectrum-ListViewItem-icon,
124
+ .react-spectrum-ListViewItem-image {
125
+ grid-area: image;
126
+ align-items: center;
127
+ justify-items: center;
128
+ padding-inline-end: var(--spectrum-global-dimension-size-100);
106
129
  }
107
- [dir="rtl"] & {
108
- padding-left: var(--spectrum-global-dimension-size-100);
130
+
131
+ .react-spectrum-ListViewItem-image {
132
+ border-radius: var(--spectrum-global-dimension-size-25);
133
+ width: var(--spectrum-global-dimension-size-400);
134
+ height: var(--spectrum-global-dimension-size-400);
109
135
  }
110
- }
111
136
 
112
- .react-spectrum-ListViewItem-image {
113
- border-radius: var(--spectrum-global-dimension-size-25);
114
- width: var(--spectrum-global-dimension-size-400);
115
- height: var(--spectrum-global-dimension-size-400);
116
- }
137
+ .react-spectrum-ListViewItem-content,
138
+ .react-spectrum-ListViewItem-description {
139
+ flex-grow: 1;
140
+ }
117
141
 
118
- .react-spectrum-ListViewItem-content,
119
- .react-spectrum-ListViewItem-description {
120
- flex-grow: 1;
121
- }
142
+ .react-spectrum-ListViewItem-content {
143
+ grid-area: content;
144
+ }
122
145
 
123
- .react-spectrum-ListViewItem-content {
124
- grid-area: content;
146
+ .react-spectrum-ListViewItem-description {
147
+ grid-area: description;
148
+ }
149
+
150
+ .react-spectrum-ListViewItem-actions {
151
+ grid-area: actions;
152
+ flex-grow: 0;
153
+ flex-shrink: 0;
154
+ }
155
+
156
+ .react-spectrum-ListViewItem-actionmenu {
157
+ grid-area: actionmenu;
158
+ }
159
+
160
+ .react-spectrum-ListViewItem-parentIndicator {
161
+ grid-area: chevron;
162
+ padding-inline-start: var(--spectrum-global-dimension-size-75);
163
+ }
164
+
165
+ /* give first and last items border-radius to match listview container */
166
+ div:first-child > div[role="row"] > & {
167
+ border-start-start-radius: var(--spectrum-listview-item-start-end-border-radius);
168
+ border-start-end-radius: var(--spectrum-listview-item-start-end-border-radius);
169
+ }
170
+ div:last-child > div[role="row"] > & {
171
+ border-end-start-radius: var(--spectrum-listview-item-start-end-border-radius);
172
+ border-end-end-radius: var(--spectrum-listview-item-start-end-border-radius);
173
+ }
125
174
  }
126
175
 
127
- .react-spectrum-ListViewItem-description {
128
- grid-area: description;
176
+ .react-spectrum-ListView--compact .react-spectrum-ListViewItem {
177
+ padding-top: var(--spectrum-listview-item-compact-padding-y);
178
+ padding-bottom: var(--spectrum-listview-item-compact-padding-y);
179
+ min-height: var(--spectrum-global-dimension-size-400);
129
180
  }
130
181
 
131
- .react-spectrum-ListViewItem-actions {
132
- grid-area: actions;
133
- flex-grow: 0;
134
- flex-shrink: 0;
182
+ .react-spectrum-ListView--spacious .react-spectrum-ListViewItem {
183
+ padding-top: var(--spectrum-listview-item-spacious-padding-y);
184
+ padding-bottom: var(--spectrum-listview-item-spacious-padding-y);
185
+ min-height: var(--spectrum-global-dimension-size-600);
135
186
  }
136
187
 
137
188
  .react-spectrum-ListView-centeredWrapper {
@@ -140,15 +191,7 @@
140
191
  justify-content: center;
141
192
  width: 100%;
142
193
  height: 100%;
143
- }
144
-
145
- .react-spectrum-ListViewItem-parentIndicator {
146
- grid-area: chevron;
147
-
148
- [dir="ltr"] & {
149
- padding-left: var(--spectrum-global-dimension-size-75);
150
- }
151
- [dir="rtl"] & {
152
- padding-right: var(--spectrum-global-dimension-size-75);
194
+ &.react-spectrum-ListView-centeredWrapper--loadingMore {
195
+ padding-top: var(--spectrum-global-dimension-size-50);
153
196
  }
154
197
  }
package/dist/main.css.map DELETED
@@ -1 +0,0 @@
1
- {"mappings":"AAOA,gCACE,qBAAsB,CAGtB,iBAAkB,CAClB,sGAAuF,CACvF,sDAA+F,CAC/F,aAAc,CACd,kBAA6D,CAC7D,uBAAyB,CACzB,gBAAiB,CACjB,uBAA+B,CAC/B,SAAU,CACV,qDAA8F,CAC9F,SACF,CAEA,uCACE,wBAAoE,CACpE,cACF,CAEA,oCACE,gBAAa,CAAb,YAAa,CACb,6DAAuG,CACvG,qBAAsB,CACtB,wDAAwF,CACxF,eAAoG,CACpG,4HAAiM,CACjM,0FAAkG,CAClG,4CAAsF,CACtF,iBAAkB,CAElB,2CAA8E,CAC9E,SAoBF,CAlBE,2EACE,eACF,CAEA,4GAEE,sDAKF,CAHE,0LACE,sDACF,CAGF,sDACE,sDAAkE,CAClE,yGAA6E,CAC7E,kGACF,CAGF,6CACE,yDAIF,CAHE,+DACE,+DACF,CAGF,6EACE,oDAA4D,CAC5D,uDACF,CAEA,8EACE,qDAA6D,CAC7D,wDACF,CAEA,yCACE,gBAAa,CAAb,YAAa,CACb,6CAAmD,CAAnD,kDAAmD,CACnD,sBAA4B,CAA5B,2BAA4B,CAC5B,mHAGA,CACA,qBAAmB,CAAnB,kBACF,CAEA,6CACE,kBAAmB,CACnB,qBAAmB,CAAnB,kBAAmB,CACnB,4BAAqB,CAArB,oBACF,CAEA,mFAEE,eAAgB,CAChB,qBAAmB,CAAnB,kBAAmB,CACnB,4BAAqB,CAArB,oBAQF,CANE,uGACE,uDACF,CACA,uGACE,sDACF,CAGF,0CACE,sDAAuD,CACvD,+CAAgD,CAChD,gDACF,CAEA,4FAEE,mBAAY,CAAZ,WACF,CAEA,4CACE,iBACF,CAEA,gDACE,qBACF,CAEA,4CACE,iBAAkB,CAClB,mBAAY,CAAZ,WAAY,CACZ,mBAAc,CAAd,aACF,CAEA,gDACE,mBAAa,CAAb,YAAa,CACb,qBAAmB,CAAnB,kBAAmB,CACnB,oBAAuB,CAAvB,sBAAuB,CACvB,UAAW,CACX,WACF,CAEA,oDACE,iBAQF,CANE,8DACE,qDACF,CACA,8DACE,sDACF","sources":["./packages/@react-spectrum/list/src/listview.css"],"sourcesContent":["\n:root {\n --spectrum-listview-item-compact-padding-y: var(--spectrum-global-dimension-size-50);\n --spectrum-listview-item-regular-padding-y: var(--spectrum-global-dimension-size-75);\n --spectrum-listview-item-spacious-padding-y: var(--spectrum-global-dimension-size-100);\n}\n\n.react-spectrum-ListView {\n box-sizing: border-box;\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-ListView--quiet {\n background-color: var(--spectrum-alias-background-color-transparent);\n border-width: 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-listview-item-regular-padding-y) var(--spectrum-global-dimension-size-150);\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 .react-spectrum-ListView--quiet & {\n border-bottom: 0;\n }\n\n &.is-hovered,\n &.is-focused {\n background-color: var(--spectrum-table-row-background-color-hover);\n\n .react-spectrum-ListView--quiet & {\n border-radius: var(--spectrum-table-border-radius, var(--spectrum-alias-border-radius-regular));\n }\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-ListViewItem-selected {\n background-color: var(--spectrum-table-row-background-color-selected, var(--spectrum-alias-highlight-selected));\n &.is-hovered {\n background-color: var(--spectrum-table-quiet-row-background-color-selected-hover);\n }\n}\n\n.react-spectrum-ListView--compact .react-spectrum-ListViewItem {\n padding-top: var(--spectrum-listview-item-compact-padding-y);\n padding-bottom: var(--spectrum-listview-item-compact-padding-y);\n}\n\n.react-spectrum-ListView--spacious .react-spectrum-ListViewItem {\n padding-top: var(--spectrum-listview-item-spacious-padding-y);\n padding-bottom: var(--spectrum-listview-item-spacious-padding-y);\n}\n\n.react-spectrum-ListViewItem-grid {\n display: grid;\n grid-template-columns: auto auto auto 1fr auto auto;\n grid-template-rows: 1fr auto;\n grid-template-areas:\n \"checkbox icon image content actions chevron\"\n \"checkbox icon image description actions chevron\"\n ;\n align-items: center;\n}\n\n.react-spectrum-ListViewItem-checkbox {\n grid-area: checkbox;\n align-items: center;\n justify-items: center;\n}\n\n.react-spectrum-ListViewItem-icon,\n.react-spectrum-ListViewItem-image {\n grid-area: image;\n align-items: center;\n justify-items: center;\n\n [dir=\"ltr\"] & {\n padding-right: var(--spectrum-global-dimension-size-100);\n }\n [dir=\"rtl\"] & {\n padding-left: var(--spectrum-global-dimension-size-100);\n }\n}\n\n.react-spectrum-ListViewItem-image {\n border-radius: var(--spectrum-global-dimension-size-25);\n width: var(--spectrum-global-dimension-size-400);\n height: var(--spectrum-global-dimension-size-400);\n}\n\n.react-spectrum-ListViewItem-content,\n.react-spectrum-ListViewItem-description {\n flex-grow: 1;\n}\n\n.react-spectrum-ListViewItem-content {\n grid-area: content;\n}\n\n.react-spectrum-ListViewItem-description {\n grid-area: description;\n}\n\n.react-spectrum-ListViewItem-actions {\n grid-area: actions;\n flex-grow: 0;\n flex-shrink: 0;\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\n.react-spectrum-ListViewItem-parentIndicator {\n grid-area: chevron;\n\n [dir=\"ltr\"] & {\n padding-left: var(--spectrum-global-dimension-size-75);\n }\n [dir=\"rtl\"] & {\n padding-right: var(--spectrum-global-dimension-size-75);\n }\n}\n"],"names":[],"version":3,"file":"main.css.map"}