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

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 -1
  2. package/dist/main.css.map +1 -1
  3. package/dist/main.js +83 -36
  4. package/dist/main.js.map +1 -1
  5. package/dist/module.js +82 -36
  6. package/dist/module.js.map +1 -1
  7. package/dist/types.d.ts +3 -2
  8. package/dist/types.d.ts.map +1 -1
  9. package/package.json +14 -14
  10. package/src/ListView.tsx +32 -9
  11. package/src/ListViewItem.tsx +22 -11
  12. package/src/listview.css +71 -19
package/src/ListViewItem.tsx CHANGED
@@ -21,12 +21,14 @@ import {mergeProps} from '@react-aria/utils';
21
21
  import React, {useContext, useRef} from 'react';
22
22
  import {useFocusRing} from '@react-aria/focus';
23
23
  import {useGridCell, useGridRow, useGridSelectionCheckbox} from '@react-aria/grid';
24
- import {useHover} from '@react-aria/interactions';
24
+ import {useHover, usePress} from '@react-aria/interactions';
25
25
  import {useLocale} from '@react-aria/i18n';
26
26
 
27
27
  export function ListViewItem(props) {
28
28
  let {
29
- item
29
+ item,
30
+ onAction,
31
+ isEmphasized
30
32
  } = props;
31
33
  let cellNode = [...item.childNodes][0];
32
34
  let {state} = useContext(ListViewContext);
@@ -38,18 +40,21 @@ export function ListViewItem(props) {
38
40
  focusProps: focusWithinProps
39
41
  } = useFocusRing({within: true});
40
42
  let {isFocusVisible, focusProps} = useFocusRing();
41
- let isDisabled = state.disabledKeys.has(item.key);
43
+ let allowsInteraction = state.selectionManager.selectionMode !== 'none' || onAction;
44
+ let isDisabled = !allowsInteraction || state.disabledKeys.has(item.key);
42
45
  let {hoverProps, isHovered} = useHover({isDisabled});
46
+ let {pressProps, isPressed} = usePress({isDisabled});
43
47
  let {rowProps} = useGridRow({
44
48
  node: item,
45
- isVirtualized: true
49
+ isVirtualized: true,
50
+ onAction: onAction ? () => onAction(item.key) : null
46
51
  }, state, rowRef);
47
52
  let {gridCellProps} = useGridCell({
48
53
  node: cellNode,
49
54
  focusMode: 'cell'
50
55
  }, state, cellRef);
51
56
  const mergedProps = mergeProps(
52
- rowProps,
57
+ gridCellProps,
53
58
  hoverProps,
54
59
  focusWithinProps,
55
60
  focusProps
@@ -71,10 +76,11 @@ export function ListViewItem(props) {
71
76
  );
72
77
  }
73
78
 
74
- let showCheckbox = state.selectionManager.selectionMode !== 'none';
79
+ let showCheckbox = state.selectionManager.selectionMode !== 'none' && state.selectionManager.selectionBehavior === 'toggle';
80
+ let isSelected = state.selectionManager.isSelected(item.key);
75
81
  return (
76
82
  <div
77
- {...mergedProps}
83
+ {...mergeProps(rowProps, pressProps)}
78
84
  ref={rowRef}>
79
85
  <div
80
86
  className={
@@ -82,20 +88,24 @@ export function ListViewItem(props) {
82
88
  listStyles,
83
89
  'react-spectrum-ListViewItem',
84
90
  {
91
+ 'is-active': isPressed,
85
92
  'is-focused': isFocusVisibleWithin,
86
93
  'focus-ring': isFocusVisible,
87
- 'is-hovered': isHovered
94
+ 'is-hovered': isHovered,
95
+ 'is-selected': isSelected,
96
+ 'is-previous-selected': state.selectionManager.isSelected(item.prevKey),
97
+ 'react-spectrum-ListViewItem--highlightSelection': state.selectionManager.selectionBehavior === 'replace' && (isSelected || state.selectionManager.isSelected(item.nextKey))
88
98
  }
89
99
  )
90
100
  }
91
101
  ref={cellRef}
92
- {...gridCellProps}>
102
+ {...mergedProps}>
93
103
  <Grid UNSAFE_className={listStyles['react-spectrum-ListViewItem-grid']}>
94
104
  {showCheckbox && (
95
105
  <Checkbox
96
106
  UNSAFE_className={listStyles['react-spectrum-ListViewItem-checkbox']}
97
107
  {...checkboxProps}
98
- isEmphasized />
108
+ isEmphasized={isEmphasized} />
99
109
  )}
100
110
  <SlotProvider
101
111
  slots={{
@@ -110,7 +120,8 @@ export function ListViewItem(props) {
110
120
  UNSAFE_className: listStyles['react-spectrum-ListViewItem-actions'],
111
121
  isQuiet: true,
112
122
  density: 'compact'
113
- }
123
+ },
124
+ actionMenu: {UNSAFE_className: listStyles['react-spectrum-ListViewItem-actionmenu'], isQuiet: true}
114
125
  }}>
115
126
  {typeof item.rendered === 'string' ? <Content>{item.rendered}</Content> : item.rendered}
116
127
  <ClearSlots>
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,42 +48,77 @@
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);
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
+ /* give first and last items border-radius to match listview container */
102
+ div:first-child > div[role="row"] > & {
103
+ border-start-start-radius: var(--spectrum-listview-item-start-end-border-radius);
104
+ border-start-end-radius: var(--spectrum-listview-item-start-end-border-radius);
105
+ }
106
+ div:last-child > div[role="row"] > & {
107
+ border-end-start-radius: var(--spectrum-listview-item-start-end-border-radius);
108
+ border-end-end-radius: var(--spectrum-listview-item-start-end-border-radius);
68
109
  }
69
110
  }
70
111
 
71
112
  .react-spectrum-ListView--compact .react-spectrum-ListViewItem {
72
113
  padding-top: var(--spectrum-listview-item-compact-padding-y);
73
114
  padding-bottom: var(--spectrum-listview-item-compact-padding-y);
115
+ min-height: var(--spectrum-global-dimension-size-400);
74
116
  }
75
117
 
76
118
  .react-spectrum-ListView--spacious .react-spectrum-ListViewItem {
77
119
  padding-top: var(--spectrum-listview-item-spacious-padding-y);
78
120
  padding-bottom: var(--spectrum-listview-item-spacious-padding-y);
121
+ min-height: var(--spectrum-global-dimension-size-600);
79
122
  }
80
123
 
81
124
  .react-spectrum-ListViewItem-grid {
@@ -83,8 +126,8 @@
83
126
  grid-template-columns: auto auto auto 1fr auto auto;
84
127
  grid-template-rows: 1fr auto;
85
128
  grid-template-areas:
86
- "checkbox icon image content actions chevron"
87
- "checkbox icon image description actions chevron"
129
+ "checkbox icon image content actions actionmenu chevron"
130
+ "checkbox icon image description actions actionmenu chevron"
88
131
  ;
89
132
  align-items: center;
90
133
  }
@@ -93,6 +136,11 @@
93
136
  grid-area: checkbox;
94
137
  align-items: center;
95
138
  justify-items: center;
139
+ min-height: 0;
140
+ height: 100%;
141
+ > span {
142
+ margin: 0;
143
+ }
96
144
  }
97
145
 
98
146
  .react-spectrum-ListViewItem-icon,
@@ -134,6 +182,10 @@
134
182
  flex-shrink: 0;
135
183
  }
136
184
 
185
+ .react-spectrum-ListViewItem-actionmenu {
186
+ grid-area: actionmenu;
187
+ }
188
+
137
189
  .react-spectrum-ListView-centeredWrapper {
138
190
  display: flex;
139
191
  align-items: center;