@react-spectrum/list 3.0.0-alpha.2 → 3.0.0-alpha.6

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 +544 -372
  3. package/dist/main.js.map +1 -1
  4. package/dist/module.js +558 -327
  5. package/dist/module.js.map +1 -1
  6. package/dist/types.d.ts +13 -6
  7. package/dist/types.d.ts.map +1 -1
  8. package/package.json +27 -26
  9. package/src/ListView.tsx +90 -20
  10. package/src/ListViewItem.tsx +81 -15
  11. package/src/listview.css +157 -9
  12. package/dist/main.css.map +0 -1
package/src/listview.css CHANGED
@@ -1,9 +1,20 @@
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-75);
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));
9
+ }
10
+
1
11
  .react-spectrum-ListView {
12
+ box-sizing: border-box;
2
13
  border-color: var(--spectrum-table-border-color, var(--spectrum-alias-border-color-mid));
3
14
  border-style: solid;
4
15
  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));
16
+ border-width: var(--spectrum-listview-border-width);
17
+ border-radius: var(--spectrum-listview-border-radius);
7
18
  overflow: auto;
8
19
  vertical-align: var(--spectrum-table-cell-vertical-alignment);
9
20
  border-collapse: separate;
@@ -12,38 +23,175 @@
12
23
  padding: 0;
13
24
  background-color: var(--spectrum-table-background-color, var(--spectrum-global-color-gray-50));
14
25
  outline: 0;
26
+
27
+ [role="row"] {
28
+ outline: none;
29
+ }
30
+ }
31
+
32
+ .react-spectrum-ListView--quiet {
33
+ background-color: var(--spectrum-alias-background-color-transparent);
34
+ border-width: 0;
15
35
  }
16
36
 
17
37
  .react-spectrum-ListViewItem {
18
38
  display: grid; /* TODO: define grid areas */
19
- 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));
20
41
  box-sizing: border-box;
21
42
  font-size: var(--spectrum-table-cell-text-size, var(--spectrum-alias-font-size-default));
22
43
  font-weight: var(--spectrum-table-cell-text-font-weight, var(--spectrum-global-font-weight-regular));
23
44
  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));
45
+ padding: var(--spectrum-listview-item-regular-padding-y) var(--spectrum-global-dimension-size-150);
25
46
  transition: background-color var(--spectrum-global-animation-duration-100) ease-in-out;
26
47
  position: relative;
27
- background-color: var(--spectrum-table-background-color, var(--spectrum-global-color-gray-50));
48
+ /*background-color: var(--spectrum-table-background-color, var(--spectrum-global-color-gray-50));*/
28
49
  color: var(--spectrum-table-cell-text-color, var(--spectrum-alias-text-color));
29
50
  outline: 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
+ }
69
+ }
30
70
 
31
71
  &.is-hovered,
32
72
  &.is-focused {
33
- background-color: var(--spectrum-table-row-background-color-hover);
73
+ background-color: var(--spectrum-table-row-background-color-hover);
34
74
  }
35
75
 
36
76
  &: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);
77
+ background-color: var(--spectrum-table-row-background-color-hover);
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);
80
+ }
81
+
82
+ &.is-active {
83
+ background-color: var(--spectrum-table-row-background-color-down);
84
+ }
85
+
86
+ &.is-selected {
87
+ background-color: var(--spectrum-table-row-background-color-hover);
88
+
89
+ &.is-hovered,
90
+ &.is-active {
91
+ background-color: var(--spectrum-table-row-background-color-hover);
92
+ }
93
+ }
94
+
95
+ &.has-checkbox {
96
+ /* have to eliminate vertical padding to allow proper vertical alignment */
97
+ padding-top: 0px;
98
+ padding-bottom: 0px;
99
+ }
100
+
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
+ }
111
+
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
+ }
122
+
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);
129
+ }
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);
135
+ }
136
+
137
+ .react-spectrum-ListViewItem-content,
138
+ .react-spectrum-ListViewItem-description {
139
+ flex-grow: 1;
140
+ }
141
+
142
+ .react-spectrum-ListViewItem-content {
143
+ grid-area: content;
144
+ }
145
+
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);
40
173
  }
41
174
  }
42
175
 
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);
180
+ }
181
+
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);
186
+ }
187
+
43
188
  .react-spectrum-ListView-centeredWrapper {
44
189
  display: flex;
45
190
  align-items: center;
46
191
  justify-content: center;
47
192
  width: 100%;
48
193
  height: 100%;
194
+ &.react-spectrum-ListView-centeredWrapper--loadingMore {
195
+ padding-top: var(--spectrum-global-dimension-size-50);
196
+ }
49
197
  }
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"}