ListView updates

packages/@react-spectrum/actiongroup/src/ActionGroup.tsx

@@ -14,7 +14,7 @@ import {ActionButton} from '@react-spectrum/button';
 import {AriaLabelingProps, DOMProps, DOMRef, Node, StyleProps} from '@react-types/shared';
 import buttonStyles from '@adobe/spectrum-css-temp/components/button/vars.css';
 import ChevronDownMedium from '@spectrum-icons/ui/ChevronDownMedium';
-import {classNames, SlotProvider, useDOMRef, useStyleProps, useValueEffect} from '@react-spectrum/utils';
+import {classNames, SlotProvider, useDOMRef, useSlotProps, useStyleProps, useValueEffect} from '@react-spectrum/utils';
 import {filterDOMProps, mergeProps, useId, useLayoutEffect, useResizeObserver} from '@react-aria/utils';
 import {Item, Menu, MenuTrigger} from '@react-spectrum/menu';
 import {ListState, useListState} from '@react-stately/list';
@@ -32,6 +32,7 @@ import {useProviderProps} from '@react-spectrum/provider';
 
 function ActionGroup<T extends object>(props: SpectrumActionGroupProps<T>, ref: DOMRef<HTMLDivElement>) {
   props = useProviderProps(props);
+  props = useSlotProps(props, 'actionGroup');
 
   let {
     isEmphasized,

packages/@react-spectrum/button/src/ActionButton.tsx

@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {classNames, SlotProvider, useFocusableRef, useStyleProps} from '@react-spectrum/utils';
+import {classNames, SlotProvider, useFocusableRef, useSlotProps, useStyleProps} from '@react-spectrum/utils';
 import {FocusableRef} from '@react-types/shared';
 import {FocusRing} from '@react-aria/focus';
 import {mergeProps} from '@react-aria/utils';
@@ -24,6 +24,7 @@ import {useProviderProps} from '@react-spectrum/provider';
 
 function ActionButton(props: SpectrumActionButtonProps, ref: FocusableRef<HTMLButtonElement>) {
   props = useProviderProps(props);
+  props = useSlotProps(props, 'actionButton');
   let {
     isQuiet,
     isDisabled,

packages/@react-spectrum/link/src/Link.tsx

@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {classNames, getWrappedElement, useStyleProps} from '@react-spectrum/utils';
+import {classNames, getWrappedElement, useSlotProps, useStyleProps} from '@react-spectrum/utils';
 import {FocusRing} from '@react-aria/focus';
 import {mergeProps} from '@react-aria/utils';
 import React, {useRef} from 'react';
@@ -26,6 +26,7 @@ import {useProviderProps} from '@react-spectrum/provider';
  */
 export function Link(props: SpectrumLinkProps) {
   props = useProviderProps(props);
+  props = useSlotProps(props, 'link');
   let {
     variant = 'primary',
     isQuiet,

packages/@react-spectrum/list/intl/ar-AE.json

@@ -1,4 +1,5 @@
 {
   "loading": "جار التحميل...",
-  "loadingMore": "جار تحميل المزيد..."
+  "loadingMore": "جار تحميل المزيد...",
+  "select": "يحدد"
 }

packages/@react-spectrum/list/intl/bg-BG.json

@@ -1,4 +1,5 @@
 {
   "loading": "Зареждане...",
-  "loadingMore": "Зареждане на още..."
+  "loadingMore": "Зареждане на още...",
+  "select": "Избирам"
 }

packages/@react-spectrum/list/intl/cs-CZ.json

@@ -1,4 +1,5 @@
 {
   "loading": "Načítání...",
-  "loadingMore": "Načítání dalších..."
+  "loadingMore": "Načítání dalších...",
+  "select": "Vybrat"
 }

packages/@react-spectrum/list/intl/da-DK.json

@@ -1,4 +1,5 @@
 {
   "loading": "Indlæser ...",
-  "loadingMore": "Indlæser flere ..."
+  "loadingMore": "Indlæser flere ...",
+  "select": "Vælg"
 }

packages/@react-spectrum/list/intl/de-DE.json

@@ -1,4 +1,5 @@
 {
   "loading": "Laden...",
-  "loadingMore": "Mehr laden ..."
+  "loadingMore": "Mehr laden ...",
+  "select": "Auswählen"
 }

packages/@react-spectrum/list/intl/el-GR.json

@@ -1,4 +1,5 @@
 {
   "loading": "Φόρτωση...",
-  "loadingMore": "Φόρτωση περισσότερων..."
+  "loadingMore": "Φόρτωση περισσότερων...",
+  "select": "Επιλέγω"
 }

packages/@react-spectrum/list/intl/en-US.json

@@ -1,4 +1,5 @@
 {
   "loading": "Loading…",
-  "loadingMore": "Loading more…"
+  "loadingMore": "Loading more…",
+  "select": "Select"
 }

packages/@react-spectrum/list/intl/es-ES.json

@@ -1,4 +1,5 @@
 {
   "loading": "Cargando…",
-  "loadingMore": "Cargando más…"
+  "loadingMore": "Cargando más…",
+  "select": "Seleccionar"
 }

packages/@react-spectrum/list/intl/et-EE.json

@@ -1,4 +1,5 @@
 {
   "loading": "Laadimine...",
-  "loadingMore": "Laadi rohkem..."
+  "loadingMore": "Laadi rohkem...",
+  "select": "Vali"
 }

packages/@react-spectrum/list/intl/fi-FI.json

@@ -1,4 +1,5 @@
 {
   "loading": "Ladataan…",
-  "loadingMore": "Ladataan lisää…"
+  "loadingMore": "Ladataan lisää…",
+  "select": "Valitse"
 }

packages/@react-spectrum/list/intl/fr-FR.json

@@ -1,4 +1,5 @@
 {
   "loading": "Chargement...",
-  "loadingMore": "Chargement supplémentaire..."
+  "loadingMore": "Chargement supplémentaire...",
+  "select": "Sélectionner"
 }

packages/@react-spectrum/list/intl/he-IL.json

@@ -1,4 +1,5 @@
 {
   "loading": "טוען...",
-  "loadingMore": "טוען עוד..."
+  "loadingMore": "טוען עוד...",
+  "select": "בחר"
 }

packages/@react-spectrum/list/intl/hr-HR.json

@@ -1,4 +1,5 @@
 {
   "loading": "Učitavam...",
-  "loadingMore": "Učitavam još..."
+  "loadingMore": "Učitavam još...",
+  "select": "Odaberi"
 }

packages/@react-spectrum/list/intl/hu-HU.json

@@ -1,4 +1,5 @@
 {
   "loading": "Betöltés folyamatban…",
-  "loadingMore": "Továbbiak betöltése folyamatban…"
+  "loadingMore": "Továbbiak betöltése folyamatban…",
+  "select": "Kijelölés"
 }

packages/@react-spectrum/list/intl/it-IT.json

@@ -1,4 +1,5 @@
 {
   "loading": "Caricamento...",
-  "loadingMore": "Caricamento altri..."
+  "loadingMore": "Caricamento altri...",
+  "select": "Seleziona"
 }

packages/@react-spectrum/list/intl/ja-JP.json

@@ -1,4 +1,5 @@
 {
   "loading": "読み込み中...",
-  "loadingMore": "さらに読み込み中..."
+  "loadingMore": "さらに読み込み中...",
+  "select": "選択"
 }

packages/@react-spectrum/list/intl/ko-KR.json

@@ -1,4 +1,5 @@
 {
   "loading": "로드 중",
-  "loadingMore": "추가 로드 중"
+  "loadingMore": "추가 로드 중",
+  "select": "선택"
 }

packages/@react-spectrum/list/intl/lt-LT.json

@@ -1,4 +1,5 @@
 {
   "loading": "Įkeliama...",
-  "loadingMore": "Įkeliama daugiau..."
+  "loadingMore": "Įkeliama daugiau...",
+  "select": "Žymėti"
 }

packages/@react-spectrum/list/intl/lv-LV.json

@@ -1,4 +1,5 @@
 {
   "loading": "Notiek ielāde...",
-  "loadingMore": "Tiek ielādēts vēl..."
+  "loadingMore": "Tiek ielādēts vēl...",
+  "select": "Atlasīt"
 }

packages/@react-spectrum/list/intl/nb-NO.json

@@ -1,4 +1,5 @@
 {
   "loading": "Laster inn ...",
-  "loadingMore": "Laster inn flere ..."
+  "loadingMore": "Laster inn flere ...",
+  "select": "Velg"
 }

packages/@react-spectrum/list/intl/nl-NL.json

@@ -1,4 +1,5 @@
 {
   "loading": "Laden...",
-  "loadingMore": "Meer laden..."
+  "loadingMore": "Meer laden...",
+  "select": "Selecteren"
 }

packages/@react-spectrum/list/intl/pl-PL.json

@@ -1,4 +1,5 @@
 {
   "loading": "Ładowanie...",
-  "loadingMore": "Wczytywanie większej liczby..."
+  "loadingMore": "Wczytywanie większej liczby...",
+  "select": "Zaznacz"
 }

packages/@react-spectrum/list/intl/pt-BR.json

@@ -1,4 +1,5 @@
 {
   "loading": "Carregando...",
-  "loadingMore": "Carregando mais..."
+  "loadingMore": "Carregando mais...",
+  "select": "Selecionar"
 }

packages/@react-spectrum/list/intl/pt-PT.json

@@ -1,4 +1,5 @@
 {
   "loading": "A carregar...",
-  "loadingMore": "A carregar mais..."
+  "loadingMore": "A carregar mais...",
+  "select": "Selecionar"
 }

packages/@react-spectrum/list/intl/ro-RO.json

@@ -1,4 +1,5 @@
 {
   "loading": "Se încarcă...",
-  "loadingMore": "Se încarcă mai multe..."
+  "loadingMore": "Se încarcă mai multe...",
+  "select": "Selectați"
 }

packages/@react-spectrum/list/intl/ru-RU.json

@@ -1,4 +1,5 @@
 {
   "loading": "Загрузка...",
-  "loadingMore": "Дополнительная загрузка..."
+  "loadingMore": "Дополнительная загрузка...",
+  "select": "Выбрать"
 }

packages/@react-spectrum/list/intl/sk-SK.json

@@ -1,4 +1,5 @@
 {
   "loading": "Načítava sa...",
-  "loadingMore": "Načítava sa viac..."
+  "loadingMore": "Načítava sa viac...",
+  "select": "Vybrať"
 }

packages/@react-spectrum/list/intl/sl-SI.json

@@ -1,4 +1,5 @@
 {
   "loading": "Nalaganje...",
-  "loadingMore": "Nalaganje več vsebine..."
+  "loadingMore": "Nalaganje več vsebine...",
+  "select": "Izberi"
 }

packages/@react-spectrum/list/intl/sr-SP.json

@@ -1,4 +1,5 @@
 {
   "loading": "Učitavam...",
-  "loadingMore": "Učitavam još..."
+  "loadingMore": "Učitavam još...",
+  "select": "Izaberi"
 }

packages/@react-spectrum/list/intl/sv-SE.json

@@ -1,4 +1,5 @@
 {
   "loading": "Läser in...",
-  "loadingMore": "Läser in mer..."
+  "loadingMore": "Läser in mer...",
+  "select": "Markera"
 }

packages/@react-spectrum/list/intl/tr-TR.json

@@ -1,4 +1,5 @@
 {
   "loading": "Yükleniyor...",
-  "loadingMore": "Daha fazla yükleniyor..."
+  "loadingMore": "Daha fazla yükleniyor...",
+  "select": "Seç"
 }

packages/@react-spectrum/list/intl/uk-UA.json

@@ -1,4 +1,5 @@
 {
   "loading": "Завантаження…",
-  "loadingMore": "Завантаження інших об’єктів..."
+  "loadingMore": "Завантаження інших об’єктів...",
+  "select": "Вибрати"
 }

packages/@react-spectrum/list/intl/zh-CN.json

@@ -1,4 +1,5 @@
 {
   "loading": "正在加载...",
-  "loadingMore": "正在加载更多..."
+  "loadingMore": "正在加载更多...",
+  "select": "选择"
 }

packages/@react-spectrum/list/intl/zh-TW.json

@@ -1,4 +1,5 @@
 {
   "loading": "正在載入",
-  "loadingMore": "正在載入更多…"
+  "loadingMore": "正在載入更多…",
+  "select": "選取"
 }

packages/@react-spectrum/list/package.json

@@ -41,6 +41,7 @@
     "@react-aria/utils": "^3.8.2",
     "@react-aria/virtualizer": "^3.3.4",
     "@react-spectrum/button": "^3.5.1",
+    "@react-spectrum/checkbox": "^3.2.3",
     "@react-spectrum/layout": "^3.2.1",
     "@react-spectrum/listbox": "^3.5.1",
     "@react-spectrum/progress": "^3.1.3",

packages/@react-spectrum/list/src/ListView.tsx

@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-import {AriaLabelingProps, CollectionBase, DOMProps, DOMRef, StyleProps} from '@react-types/shared';
+import {AriaLabelingProps, CollectionBase, DOMProps, DOMRef, MultipleSelection, StyleProps} from '@react-types/shared';
 import {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils';
 import {GridCollection, useGridState} from '@react-stately/grid';
 import {GridKeyboardDelegate, useGrid} from '@react-aria/grid';
@@ -20,7 +20,7 @@ import {ListState, useListState} from '@react-stately/list';
 import listStyles from './listview.css';
 import {ListViewItem} from './ListViewItem';
 import {ProgressCircle} from '@react-spectrum/progress';
-import React, {ReactElement, useContext, useMemo} from 'react';
+import React, {Key, ReactElement, useContext, useMemo, useState} from 'react';
 import {useCollator, useLocale, useMessageFormatter} from '@react-aria/i18n';
 import {useProvider} from '@react-spectrum/provider';
 import {Virtualizer} from '@react-aria/virtualizer';
@@ -33,7 +33,7 @@ export function useListLayout<T>(state: ListState<T>) {
   let collator = useCollator({usage: 'search', sensitivity: 'base'});
   let layout = useMemo(() =>
       new ListLayout<T>({
-        estimatedRowHeight: scale === 'large' ? 48 : 32,
+        estimatedRowHeight: scale === 'large' ? 40 : 32,
         padding: 0,
         collator
       })
@@ -44,19 +44,28 @@ export function useListLayout<T>(state: ListState<T>) {
   return layout;
 }
 
-interface ListViewProps<T> extends CollectionBase<T>, DOMProps, AriaLabelingProps, StyleProps {
+interface ListViewProps<T> extends CollectionBase<T>, DOMProps, AriaLabelingProps, StyleProps, MultipleSelection {
+  /**
+   * Sets the amount of vertical padding within each cell.
+   * @default 'regular'
+   */
+  density?: 'compact' | 'regular' | 'spacious',
   isLoading?: boolean,
   renderEmptyState?: () => JSX.Element,
-  transitionDuration?: number
+  transitionDuration?: number,
+  onAction?: (key: Key) => void
 }
 
 function ListView<T extends object>(props: ListViewProps<T>, ref: DOMRef<HTMLDivElement>) {
   let {
-    transitionDuration = 0
+    density = 'regular',
+    transitionDuration = 0,
+    onAction
   } = props;
   let domRef = useDOMRef(ref);
   let {collection} = useListState(props);
   let formatMessage = useMessageFormatter(intlMessages);
+  let [selectionMode, setSelectionMode] = useState(false);
 
   let {styleProps} = useStyleProps(props);
   let {direction} = useLocale();
@@ -95,7 +104,7 @@ function ListView<T extends object>(props: ListViewProps<T>, ref: DOMRef<HTMLDiv
   layout.isLoading = props.isLoading;
 
   return (
-    <ListViewContext.Provider value={{state, keyboardDelegate}}>
+    <ListViewContext.Provider value={{state, keyboardDelegate, onAction, selectionMode, setSelectionMode}}>
       <Virtualizer
         {...gridProps}
         {...styleProps}
@@ -107,6 +116,7 @@ function ListView<T extends object>(props: ListViewProps<T>, ref: DOMRef<HTMLDiv
           classNames(
             listStyles,
             'react-spectrum-ListView',
+            `react-spectrum-ListView--${density}`,
             styleProps.className
           )
         }