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

package/dist/main.css

@@ -1,2 +1,2 @@
-._react-spectrum-ListView_49612{border:var(--spectrum-global-dimension-static-size-10,1px) solid var(--spectrum-global-color-gray-300);border-radius:var(--spectrum-global-dimension-size-50);overflow:auto;vertical-align:top;border-collapse:initial;border-spacing:0;transform:translateZ(0);padding:0}._react-spectrum-ListView_49612,._react-spectrum-ListViewItem_49612{position:relative;background-color:var(--spectrum-global-color-gray-50);outline:0}._react-spectrum-ListViewItem_49612{display:-ms-grid;display:grid;border-bottom:1px solid var(--spectrum-global-color-gray-300);box-sizing:border-box;font-size:var(--spectrum-global-dimension-font-size-100);font-weight:400;line-height:calc(var(--spectrum-global-dimension-font-size-100) * var(--spectrum-global-font-line-height-medium, 1.5) - 1px);padding:var(--spectrum-global-dimension-size-125) var(--spectrum-global-dimension-size-200);transition:background-color .13s ease-in-out;color:var(--spectrum-global-color-gray-800)}._react-spectrum-ListViewItem_49612._focus-ring_49612,._react-spectrum-ListViewItem_49612._is-focused_49612,._react-spectrum-ListViewItem_49612._is-hovered_49612{background-color:var(--spectrum-alias-highlight-hover)}._react-spectrum-ListViewItem_49612._focus-ring_49612{box-shadow:inset 0 0 0 2px var(--spectrum-alias-border-color-focus,var(--spectrum-global-color-blue-400));border-radius:var(--spectrum-alias-border-radius-regular,var(--spectrum-global-dimension-size-50))}._react-spectrum-ListView-centeredWrapper_49612{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%}
+._react-spectrum-ListView_42387{box-sizing:border-box;position:relative;border:var(--spectrum-global-dimension-static-size-10,1px) solid var(--spectrum-global-color-gray-300);border-radius:var(--spectrum-global-dimension-size-50);overflow:auto;vertical-align:top;border-collapse:initial;border-spacing:0;transform:translateZ(0);padding:0;background-color:var(--spectrum-global-color-gray-50);outline:0}._react-spectrum-ListView_42387 [role=row]{outline:none}._react-spectrum-ListView--quiet_42387{background-color:initial;border-width:0}._react-spectrum-ListViewItem_42387{display:-ms-grid;display:grid;border:1px solid transparent;border-bottom:1px solid var(--spectrum-global-color-gray-300);box-sizing:border-box;font-size:var(--spectrum-global-dimension-font-size-100);font-weight:400;line-height:calc(var(--spectrum-global-dimension-font-size-100) * var(--spectrum-global-font-line-height-medium, 1.5) - 1px);padding:var(--spectrum-global-dimension-size-75) var(--spectrum-global-dimension-size-150);transition:background-color .13s ease-in-out;position:relative;color:var(--spectrum-global-color-gray-800);outline:0;min-height:var(--spectrum-global-dimension-size-500)}._react-spectrum-ListView--emphasized_42387 ._react-spectrum-ListViewItem_42387._is-selected_42387{background-color:var(--spectrum-alias-highlight-selected);border-color:var(--spectrum-global-color-blue-500)}._react-spectrum-ListView--emphasized_42387 ._react-spectrum-ListViewItem_42387._is-selected_42387._is-active_42387,._react-spectrum-ListView--emphasized_42387 ._react-spectrum-ListViewItem_42387._is-selected_42387._is-hovered_42387{background-color:var(--spectrum-alias-highlight-selected)}._react-spectrum-ListView--emphasized_42387 ._react-spectrum-ListViewItem_42387._is-selected_42387._is-previous-selected_42387:not(._is-focused_42387){border-top-color:transparent}._react-spectrum-ListViewItem_42387._focus-ring_42387,._react-spectrum-ListViewItem_42387._is-focused_42387,._react-spectrum-ListViewItem_42387._is-hovered_42387{background-color:var(--spectrum-alias-highlight-hover)}._react-spectrum-ListViewItem_42387._focus-ring_42387{box-shadow:inset 0 0 0 1px var(--spectrum-alias-border-color-focus,var(--spectrum-global-color-blue-400));border-color:var(--spectrum-global-color-blue-500)}._react-spectrum-ListViewItem_42387._is-active_42387{background-color:var(--spectrum-alias-highlight-active)}._react-spectrum-ListViewItem_42387._is-selected_42387,._react-spectrum-ListViewItem_42387._is-selected_42387._is-active_42387,._react-spectrum-ListViewItem_42387._is-selected_42387._is-hovered_42387{background-color:var(--spectrum-alias-highlight-hover)}._react-spectrum-ListViewItem_42387._has-checkbox_42387{padding-top:0;padding-bottom:0}[dir=ltr] div:first-child>div[role=row]>._react-spectrum-ListViewItem_42387{border-top-left-radius:calc(var(--spectrum-global-dimension-size-50) - var(--spectrum-global-dimension-static-size-10, 1px))}[dir=ltr] div:first-child>div[role=row]>._react-spectrum-ListViewItem_42387,[dir=rtl] div:first-child>div[role=row]>._react-spectrum-ListViewItem_42387{border-top-right-radius:calc(var(--spectrum-global-dimension-size-50) - var(--spectrum-global-dimension-static-size-10, 1px))}[dir=rtl] div:first-child>div[role=row]>._react-spectrum-ListViewItem_42387{border-top-left-radius:calc(var(--spectrum-global-dimension-size-50) - var(--spectrum-global-dimension-static-size-10, 1px))}[dir=ltr] div:last-child>div[role=row]>._react-spectrum-ListViewItem_42387{border-bottom-left-radius:calc(var(--spectrum-global-dimension-size-50) - var(--spectrum-global-dimension-static-size-10, 1px))}[dir=ltr] div:last-child>div[role=row]>._react-spectrum-ListViewItem_42387,[dir=rtl] div:last-child>div[role=row]>._react-spectrum-ListViewItem_42387{border-bottom-right-radius:calc(var(--spectrum-global-dimension-size-50) - var(--spectrum-global-dimension-static-size-10, 1px))}[dir=rtl] div:last-child>div[role=row]>._react-spectrum-ListViewItem_42387{border-bottom-left-radius:calc(var(--spectrum-global-dimension-size-50) - var(--spectrum-global-dimension-static-size-10, 1px))}._react-spectrum-ListView--compact_42387 ._react-spectrum-ListViewItem_42387{padding-top:var(--spectrum-global-dimension-size-50);padding-bottom:var(--spectrum-global-dimension-size-50);min-height:var(--spectrum-global-dimension-size-400)}._react-spectrum-ListView--spacious_42387 ._react-spectrum-ListViewItem_42387{padding-top:var(--spectrum-global-dimension-size-100);padding-bottom:var(--spectrum-global-dimension-size-100);min-height:var(--spectrum-global-dimension-size-600)}._react-spectrum-ListViewItem-grid_42387{display:-ms-grid;display:grid;-ms-grid-columns:auto auto auto 1fr auto auto;grid-template-columns:auto auto auto 1fr auto auto;-ms-grid-rows:1fr auto;grid-template-rows:1fr auto;grid-template-areas:"checkbox icon image content actions actionmenu chevron" "checkbox icon image description actions actionmenu chevron";-ms-flex-align:center;align-items:center}._react-spectrum-ListViewItem-checkbox_42387{grid-area:checkbox;-ms-flex-align:center;align-items:center;-ms-grid-column-align:center;justify-items:center;min-height:0;height:100%}._react-spectrum-ListViewItem-checkbox_42387>span{margin:0}._react-spectrum-ListViewItem-icon_42387,._react-spectrum-ListViewItem-image_42387{grid-area:image;-ms-flex-align:center;align-items:center;-ms-grid-column-align:center;justify-items:center}[dir=ltr] ._react-spectrum-ListViewItem-icon_42387,[dir=ltr] ._react-spectrum-ListViewItem-image_42387{padding-right:var(--spectrum-global-dimension-size-100)}[dir=rtl] ._react-spectrum-ListViewItem-icon_42387,[dir=rtl] ._react-spectrum-ListViewItem-image_42387{padding-left:var(--spectrum-global-dimension-size-100)}._react-spectrum-ListViewItem-image_42387{border-radius:var(--spectrum-global-dimension-size-25);width:var(--spectrum-global-dimension-size-400);height:var(--spectrum-global-dimension-size-400)}._react-spectrum-ListViewItem-content_42387,._react-spectrum-ListViewItem-description_42387{-ms-flex-positive:1;flex-grow:1}._react-spectrum-ListViewItem-content_42387{grid-area:content}._react-spectrum-ListViewItem-description_42387{grid-area:description}._react-spectrum-ListViewItem-actions_42387{grid-area:actions;-ms-flex-positive:0;flex-grow:0;-ms-flex-negative:0;flex-shrink:0}._react-spectrum-ListViewItem-actionmenu_42387{grid-area:actionmenu}._react-spectrum-ListView-centeredWrapper_42387{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%}._react-spectrum-ListViewItem-parentIndicator_42387{grid-area:chevron}[dir=ltr] ._react-spectrum-ListViewItem-parentIndicator_42387{padding-left:var(--spectrum-global-dimension-size-75)}[dir=rtl] ._react-spectrum-ListViewItem-parentIndicator_42387{padding-right:var(--spectrum-global-dimension-size-75)}
 /*# sourceMappingURL=main.css.map */

package/dist/main.css.map

@@ -1 +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"}
+{"mappings":"AAUA,gCACE,qBAAsB,CAGtB,iBAAkB,CAClB,sGAAmD,CACnD,sDAAqD,CACrD,aAAc,CACd,kBAA6D,CAC7D,uBAAyB,CACzB,gBAAiB,CACjB,uBAA+B,CAC/B,SAAU,CACV,qDAA8F,CAC9F,SAKF,CAHE,2CACE,YACF,CAGF,uCACE,wBAAoE,CACpE,cACF,CAEA,oCACE,gBAAa,CAAb,YAAa,CAEb,4BAAmG,CAAnG,6DAAmG,CACnG,qBAAsB,CACtB,wDAAwF,CACxF,eAAoG,CACpG,4HAAiM,CACjM,0FAAkG,CAClG,4CAAsF,CACtF,iBAAkB,CAElB,2CAA8E,CAC9E,SAAU,CACV,oDA2DF,CAxDI,mGACE,yDAAqE,CACrE,kDAYF,CAXE,yOAEE,yDACF,CAIE,uJACE,4BACF,CAUN,kKAHE,sDAOF,CAJA,sDAEE,yGAA6E,CAC7E,kDACF,CAEA,qDACE,uDACF,CAKE,wMAEE,sDACF,CAGF,wDAEE,aAAgB,CAChB,gBACF,CAGA,4EACE,4HAEF,CAHA,wJAEE,6HACF,CAHA,4EAEE,4HACF,CACA,2EACE,+HAEF,CAHA,sJAEE,gIACF,CAHA,2EAEE,+HACF,CAGF,6EACE,oDAA4D,CAC5D,uDAA+D,CAC/D,oDACF,CAEA,8EACE,qDAA6D,CAC7D,wDAAgE,CAChE,oDACF,CAEA,yCACE,gBAAa,CAAb,YAAa,CACb,6CAAmD,CAAnD,kDAAmD,CACnD,sBAA4B,CAA5B,2BAA4B,CAC5B,yIAGA,CACA,qBAAmB,CAAnB,kBACF,CAEA,6CACE,kBAAmB,CACnB,qBAAmB,CAAnB,kBAAmB,CACnB,4BAAqB,CAArB,oBAAqB,CACrB,YAAa,CACb,WAIF,CAHE,kDACE,QACF,CAGF,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,+CACE,oBACF,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  --spectrum-listview-border-width: var(--spectrum-table-border-size, var(--spectrum-alias-border-size-thin));\n  --spectrum-listview-border-radius: var(--spectrum-table-border-radius, var(--spectrum-alias-border-radius-regular));\n  --spectrum-listview-item-start-end-border-radius: calc(var(--spectrum-listview-border-radius) - var(--spectrum-listview-border-width));\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-listview-border-width);\n  border-radius: var(--spectrum-listview-border-radius);\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  [role=\"row\"] {\n    outline: none;\n  }\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: 1px solid transparent;\n  border-bottom-color: var(--spectrum-table-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  min-height: var(--spectrum-global-dimension-size-500);\n\n  .react-spectrum-ListView--emphasized & {\n    &.is-selected {\n      background-color: var(--spectrum-table-row-background-color-selected);\n      border-color: var(--spectrum-global-color-blue-500);\n      &.is-hovered,\n      &.is-active {\n        background-color: var(--spectrum-table-row-background-color-selected);\n      }\n\n      /* avoid double border for adjacent selected items */\n      &.is-previous-selected {        \n        &:not(.is-focused) {\n          border-top-color: transparent;\n        }\n      }\n    }\n  }\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 1px var(--spectrum-table-cell-border-color-key-focus);\n    border-color: var(--spectrum-global-color-blue-500);\n  }\n\n  &.is-active {\n    background-color: var(--spectrum-table-row-background-color-down);\n  }\n\n  &.is-selected {\n    background-color: var(--spectrum-table-row-background-color-hover);\n\n    &.is-hovered,\n    &.is-active {\n      background-color: var(--spectrum-table-row-background-color-hover);\n    }\n  }\n\n  &.has-checkbox {\n    /* have to eliminate vertical padding to allow proper vertical alignment */\n    padding-top: 0px;\n    padding-bottom: 0px;\n  }\n  \n  /* give first and last items border-radius to match listview container */\n  div:first-child > div[role=\"row\"] > & {\n    border-start-start-radius: var(--spectrum-listview-item-start-end-border-radius);\n    border-start-end-radius: var(--spectrum-listview-item-start-end-border-radius);\n  }\n  div:last-child > div[role=\"row\"] > & {\n    border-end-start-radius: var(--spectrum-listview-item-start-end-border-radius);\n    border-end-end-radius: var(--spectrum-listview-item-start-end-border-radius);\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  min-height: var(--spectrum-global-dimension-size-400);\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  min-height: var(--spectrum-global-dimension-size-600);\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 actionmenu chevron\"\n    \"checkbox icon image description actions actionmenu 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  min-height: 0;\n  height: 100%;\n  > span {\n    margin: 0;\n  }\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-ListViewItem-actionmenu {\n  grid-area: actionmenu;\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"}

package/dist/main.js

@@ -13,17 +13,18 @@ var {
 } = require("@react-spectrum/provider");
 
 var {
-  useCollator,
+  ProgressCircle
+} = require("@react-spectrum/progress");
+
+var {
   useLocale,
+  useCollator,
   useMessageFormatter
 } = require("@react-aria/i18n");
 
 var {
-  ProgressCircle
-} = require("@react-spectrum/progress");
-
-var {
-  useHover
+  useHover,
+  usePress
 } = require("@react-aria/interactions");
 
 var {
@@ -44,6 +45,22 @@ var {
   mergeProps
 } = require("@react-aria/utils");
 
+var {
+  Grid
+} = require("@react-spectrum/layout");
+
+var {
+  Content
+} = require("@react-spectrum/view");
+
+var _spectrumIconsUiChevronRightMedium = $parcel$interopDefault(require("@spectrum-icons/ui/ChevronRightMedium"));
+
+var _spectrumIconsUiChevronLeftMedium = $parcel$interopDefault(require("@spectrum-icons/ui/ChevronLeftMedium"));
+
+var {
+  Checkbox
+} = require("@react-spectrum/checkbox");
+
 var {
   useListState
 } = require("@react-stately/list");
@@ -56,7 +73,8 @@ var {
   GridKeyboardDelegate,
   useGrid,
   useGridCell,
-  useGridRow
+  useGridRow,
+  useGridSelectionCheckbox
 } = require("@react-aria/grid");
 
 var {
@@ -67,7 +85,9 @@ var {
 var {
   classNames,
   useDOMRef,
-  useStyleProps
+  useStyleProps,
+  ClearSlots,
+  SlotProvider
 } = require("@react-spectrum/utils");
 
 var _babelRuntimeHelpersInteropRequireDefault = $parcel$interopDefault(require("@babel/runtime/helpers/interopRequireDefault"));
@@ -83,16 +103,33 @@ function $parcel$interopDefault(a) {
 // ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-spectrum/list/src/listview.css
 var $b12595b6ccb9db4fe8501811c0117e$exports = {};
 $b12595b6ccb9db4fe8501811c0117e$exports = {
-  "react-spectrum-ListView": "_react-spectrum-ListView_49612",
-  "react-spectrum-ListViewItem": "_react-spectrum-ListViewItem_49612",
-  "is-hovered": "_is-hovered_49612",
-  "is-focused": "_is-focused_49612",
-  "focus-ring": "_focus-ring_49612",
-  "react-spectrum-ListView-centeredWrapper": "_react-spectrum-ListView-centeredWrapper_49612"
+  "react-spectrum-ListView": "_react-spectrum-ListView_42387",
+  "react-spectrum-ListView--quiet": "_react-spectrum-ListView--quiet_42387",
+  "react-spectrum-ListViewItem": "_react-spectrum-ListViewItem_42387",
+  "react-spectrum-ListView--emphasized": "_react-spectrum-ListView--emphasized_42387",
+  "is-selected": "_is-selected_42387",
+  "is-hovered": "_is-hovered_42387",
+  "is-active": "_is-active_42387",
+  "is-previous-selected": "_is-previous-selected_42387",
+  "is-focused": "_is-focused_42387",
+  "focus-ring": "_focus-ring_42387",
+  "has-checkbox": "_has-checkbox_42387",
+  "react-spectrum-ListView--compact": "_react-spectrum-ListView--compact_42387",
+  "react-spectrum-ListView--spacious": "_react-spectrum-ListView--spacious_42387",
+  "react-spectrum-ListViewItem-grid": "_react-spectrum-ListViewItem-grid_42387",
+  "react-spectrum-ListViewItem-checkbox": "_react-spectrum-ListViewItem-checkbox_42387",
+  "react-spectrum-ListViewItem-icon": "_react-spectrum-ListViewItem-icon_42387",
+  "react-spectrum-ListViewItem-image": "_react-spectrum-ListViewItem-image_42387",
+  "react-spectrum-ListViewItem-content": "_react-spectrum-ListViewItem-content_42387",
+  "react-spectrum-ListViewItem-description": "_react-spectrum-ListViewItem-description_42387",
+  "react-spectrum-ListViewItem-actions": "_react-spectrum-ListViewItem-actions_42387",
+  "react-spectrum-ListViewItem-actionmenu": "_react-spectrum-ListViewItem-actionmenu_42387",
+  "react-spectrum-ListView-centeredWrapper": "_react-spectrum-ListView-centeredWrapper_42387",
+  "react-spectrum-ListViewItem-parentIndicator": "_react-spectrum-ListViewItem-parentIndicator_42387"
 };
 // ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-spectrum/list/intl/ar-AE.json
 var $c0e73e536a6214a8$exports = {};
-$c0e73e536a6214a8$exports = JSON.parse("{\"loading\":\"جار التحميل...\",\"loadingMore\":\"جار تحميل المزيد...\"}");
+$c0e73e536a6214a8$exports = JSON.parse("{\"loading\":\"جارٍ التحميل...\",\"loadingMore\":\"جارٍ تحميل المزيد...\"}");
 // ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-spectrum/list/intl/bg-BG.json
 var $d10e45f855dd264d361dc8417eccf336$exports = {};
 $d10e45f855dd264d361dc8417eccf336$exports = JSON.parse("{\"loading\":\"Зареждане...\",\"loadingMore\":\"Зареждане на още...\"}");
@@ -101,7 +138,7 @@ var $cd57c650420f55c782af53645a8625a0$exports = {};
 $cd57c650420f55c782af53645a8625a0$exports = JSON.parse("{\"loading\":\"Načítání...\",\"loadingMore\":\"Načítání dalších...\"}");
 // ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-spectrum/list/intl/da-DK.json
 var $e9251f61576dcc7468e044107eabac1b$exports = {};
-$e9251f61576dcc7468e044107eabac1b$exports = JSON.parse("{\"loading\":\"Indlæser ...\",\"loadingMore\":\"Indlæser flere ...\"}");
+$e9251f61576dcc7468e044107eabac1b$exports = JSON.parse("{\"loading\":\"Indlæser...\",\"loadingMore\":\"Indlæser flere...\"}");
 // ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-spectrum/list/intl/de-DE.json
 var $bcd4b4f77717e3d175ac72b639918cf4$exports = {};
 $bcd4b4f77717e3d175ac72b639918cf4$exports = JSON.parse("{\"loading\":\"Laden...\",\"loadingMore\":\"Mehr laden ...\"}");
@@ -140,7 +177,7 @@ var $d16135f8943668f309b50ec769b683d$exports = {};
 $d16135f8943668f309b50ec769b683d$exports = JSON.parse("{\"loading\":\"読み込み中...\",\"loadingMore\":\"さらに読み込み中...\"}");
 // ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-spectrum/list/intl/ko-KR.json
 var $a3cc2b02a5ac5ed2a1cec2bccb52$exports = {};
-$a3cc2b02a5ac5ed2a1cec2bccb52$exports = JSON.parse("{\"loading\":\"로드 중\",\"loadingMore\":\"추가 로드 중\"}");
+$a3cc2b02a5ac5ed2a1cec2bccb52$exports = JSON.parse("{\"loading\":\"로드 중…\",\"loadingMore\":\"추가 로드 중…\"}");
 // ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-spectrum/list/intl/lt-LT.json
 var $ae93571eb401fed294c5dab20b33bb$exports = {};
 $ae93571eb401fed294c5dab20b33bb$exports = JSON.parse("{\"loading\":\"Įkeliama...\",\"loadingMore\":\"Įkeliama daugiau...\"}");
@@ -173,7 +210,7 @@ var $c8639b246b747f6e33ea70c42946934c$exports = {};
 $c8639b246b747f6e33ea70c42946934c$exports = JSON.parse("{\"loading\":\"Načítava sa...\",\"loadingMore\":\"Načítava sa viac...\"}");
 // ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-spectrum/list/intl/sl-SI.json
 var $c0edc9a424436a2a0151fb5159f578c9$exports = {};
-$c0edc9a424436a2a0151fb5159f578c9$exports = JSON.parse("{\"loading\":\"Nalaganje...\",\"loadingMore\":\"Nalaganje več vsebine...\"}");
+$c0edc9a424436a2a0151fb5159f578c9$exports = JSON.parse("{\"loading\":\"Nalaganje ...\",\"loadingMore\":\"Nalaganje več vsebine ...\"}");
 // ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-spectrum/list/intl/sr-SP.json
 var $b674b388f9c4f9e79fa495de7ad1a8c$exports = {};
 $b674b388f9c4f9e79fa495de7ad1a8c$exports = JSON.parse("{\"loading\":\"Učitavam...\",\"loadingMore\":\"Učitavam još...\"}");
@@ -191,17 +228,24 @@ var $fd0c1523885c2930fa91facf8ca5329$exports = {};
 $fd0c1523885c2930fa91facf8ca5329$exports = JSON.parse("{\"loading\":\"正在加载...\",\"loadingMore\":\"正在加载更多...\"}");
 // ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-spectrum/list/intl/zh-TW.json
 var $b982929e1b75088f0588b4b23816b9af$exports = {};
-$b982929e1b75088f0588b4b23816b9af$exports = JSON.parse("{\"loading\":\"正在載入\",\"loadingMore\":\"正在載入更多…\"}");
+$b982929e1b75088f0588b4b23816b9af$exports = JSON.parse("{\"loading\":\"載入中…\",\"loadingMore\":\"正在載入更多…\"}");
 var $b12595b6ccb9db4fe8501811c0117e$$interop$default = $parcel$interopDefault($b12595b6ccb9db4fe8501811c0117e$exports);
 
 function $e22a5a34a012c87bfba45a66714099d$export$ListViewItem(props) {
   let {
-    item
+    item,
+    onAction,
+    isEmphasized
   } = props;
+  let cellNode = [...item.childNodes][0];
   let {
     state
   } = useContext($e7c536fff73c6a7b9c1c07582f0c25a$export$ListViewContext);
-  let ref = useRef();
+  let {
+    direction
+  } = useLocale();
+  let rowRef = useRef();
+  let cellRef = useRef();
   let {
     isFocusVisible: isFocusVisibleWithin,
     focusProps: focusWithinProps
@@ -212,33 +256,109 @@ function $e22a5a34a012c87bfba45a66714099d$export$ListViewItem(props) {
     isFocusVisible,
     focusProps
   } = useFocusRing();
+  let allowsInteraction = state.selectionManager.selectionMode !== 'none' || onAction;
+  let isDisabled = !allowsInteraction || state.disabledKeys.has(item.key);
   let {
     hoverProps,
     isHovered
-  } = useHover({});
+  } = useHover({
+    isDisabled
+  });
+  let {
+    pressProps,
+    isPressed
+  } = usePress({
+    isDisabled
+  });
   let {
     rowProps
   } = useGridRow({
     node: item,
     isVirtualized: true,
-    ref
-  }, state);
+    onAction: onAction ? () => onAction(item.key) : null
+  }, state, rowRef);
   let {
     gridCellProps
   } = useGridCell({
-    node: item,
-    ref,
+    node: cellNode,
     focusMode: 'cell'
-  }, state);
+  }, state, cellRef);
   const mergedProps = mergeProps(gridCellProps, hoverProps, focusWithinProps, focusProps);
-  return /*#__PURE__*/_react.createElement("div", rowProps, /*#__PURE__*/_react.createElement("div", _babelRuntimeHelpersExtends({
+  let {
+    checkboxProps
+  } = useGridSelectionCheckbox(_babelRuntimeHelpersExtends({}, props, {
+    key: item.key
+  }), state);
+  let chevron = null;
+
+  if (item.props.hasChildItems) {
+    chevron = direction === 'ltr' ? /*#__PURE__*/_react.createElement(_spectrumIconsUiChevronRightMedium, {
+      "aria-hidden": "true",
+      UNSAFE_className: $b12595b6ccb9db4fe8501811c0117e$$interop$default['react-spectrum-ListViewItem-parentIndicator']
+    }) : /*#__PURE__*/_react.createElement(_spectrumIconsUiChevronLeftMedium, {
+      "aria-hidden": "true",
+      UNSAFE_className: $b12595b6ccb9db4fe8501811c0117e$$interop$default['react-spectrum-ListViewItem-parentIndicator']
+    });
+  }
+
+  let showCheckbox = state.selectionManager.selectionMode !== 'none' && state.selectionManager.selectionBehavior === 'toggle';
+  let isSelected = state.selectionManager.isSelected(item.key);
+  return /*#__PURE__*/_react.createElement("div", _babelRuntimeHelpersExtends({}, mergeProps(rowProps, pressProps), {
+    ref: rowRef
+  }), /*#__PURE__*/_react.createElement("div", _babelRuntimeHelpersExtends({
     className: classNames($b12595b6ccb9db4fe8501811c0117e$$interop$default, 'react-spectrum-ListViewItem', {
+      'is-active': isPressed,
       'is-focused': isFocusVisibleWithin,
       'focus-ring': isFocusVisible,
-      'is-hovered': isHovered
+      'is-hovered': isHovered,
+      'is-selected': isSelected,
+      'is-previous-selected': state.selectionManager.isSelected(item.prevKey),
+      'react-spectrum-ListViewItem--highlightSelection': state.selectionManager.selectionBehavior === 'replace' && (isSelected || state.selectionManager.isSelected(item.nextKey))
     }),
-    ref: ref
-  }, mergedProps), item.rendered));
+    ref: cellRef
+  }, mergedProps), /*#__PURE__*/_react.createElement(Grid, {
+    UNSAFE_className: $b12595b6ccb9db4fe8501811c0117e$$interop$default['react-spectrum-ListViewItem-grid']
+  }, showCheckbox && /*#__PURE__*/_react.createElement(Checkbox, _babelRuntimeHelpersExtends({
+    UNSAFE_className: $b12595b6ccb9db4fe8501811c0117e$$interop$default['react-spectrum-ListViewItem-checkbox']
+  }, checkboxProps, {
+    isEmphasized: isEmphasized
+  })), /*#__PURE__*/_react.createElement(SlotProvider, {
+    slots: {
+      content: {
+        UNSAFE_className: $b12595b6ccb9db4fe8501811c0117e$$interop$default['react-spectrum-ListViewItem-content']
+      },
+      text: {
+        UNSAFE_className: $b12595b6ccb9db4fe8501811c0117e$$interop$default['react-spectrum-ListViewItem-content']
+      },
+      description: {
+        UNSAFE_className: $b12595b6ccb9db4fe8501811c0117e$$interop$default['react-spectrum-ListViewItem-description']
+      },
+      icon: {
+        UNSAFE_className: $b12595b6ccb9db4fe8501811c0117e$$interop$default['react-spectrum-ListViewItem-icon'],
+        size: 'M'
+      },
+      image: {
+        UNSAFE_className: $b12595b6ccb9db4fe8501811c0117e$$interop$default['react-spectrum-ListViewItem-image']
+      },
+      link: {
+        UNSAFE_className: $b12595b6ccb9db4fe8501811c0117e$$interop$default['react-spectrum-ListViewItem-content'],
+        isQuiet: true
+      },
+      actionButton: {
+        UNSAFE_className: $b12595b6ccb9db4fe8501811c0117e$$interop$default['react-spectrum-ListViewItem-actions'],
+        isQuiet: true
+      },
+      actionGroup: {
+        UNSAFE_className: $b12595b6ccb9db4fe8501811c0117e$$interop$default['react-spectrum-ListViewItem-actions'],
+        isQuiet: true,
+        density: 'compact'
+      },
+      actionMenu: {
+        UNSAFE_className: $b12595b6ccb9db4fe8501811c0117e$$interop$default['react-spectrum-ListViewItem-actionmenu'],
+        isQuiet: true
+      }
+    }
+  }, typeof item.rendered === 'string' ? /*#__PURE__*/_react.createElement(Content, null, item.rendered) : item.rendered, /*#__PURE__*/_react.createElement(ClearSlots, null, chevron)))));
 }
 
 // @ts-ignore
@@ -281,7 +401,22 @@ const $e7c536fff73c6a7b9c1c07582f0c25a$var$intlMessages = {
 
 const $e7c536fff73c6a7b9c1c07582f0c25a$export$ListViewContext = /*#__PURE__*/_react.createContext(null);
 
-function $e7c536fff73c6a7b9c1c07582f0c25a$export$useListLayout(state) {
+const $e7c536fff73c6a7b9c1c07582f0c25a$var$ROW_HEIGHTS = {
+  compact: {
+    medium: 32,
+    large: 40
+  },
+  regular: {
+    medium: 40,
+    large: 50
+  },
+  spacious: {
+    medium: 48,
+    large: 60
+  }
+};
+
+function $e7c536fff73c6a7b9c1c07582f0c25a$export$useListLayout(state, density) {
   let {
     scale
   } = useProvider();
@@ -290,10 +425,10 @@ function $e7c536fff73c6a7b9c1c07582f0c25a$export$useListLayout(state) {
     sensitivity: 'base'
   });
   let layout = useMemo(() => new ListLayout({
-    estimatedRowHeight: scale === 'large' ? 48 : 32,
+    estimatedRowHeight: $e7c536fff73c6a7b9c1c07582f0c25a$var$ROW_HEIGHTS[density][scale],
     padding: 0,
     collator
-  }), [collator, scale]);
+  }), [collator, scale, density]);
   layout.collection = state.collection;
   layout.disabledKeys = state.disabledKeys;
   return layout;
@@ -301,7 +436,11 @@ function $e7c536fff73c6a7b9c1c07582f0c25a$export$useListLayout(state) {
 
 function $e7c536fff73c6a7b9c1c07582f0c25a$var$ListView(props, ref) {
   let {
-    transitionDuration = 0
+    density = 'regular',
+    loadingState,
+    isQuiet,
+    transitionDuration = 0,
+    onAction
   } = props;
   let domRef = useDOMRef(ref);
   let {
@@ -320,35 +459,52 @@ function $e7c536fff73c6a7b9c1c07582f0c25a$var$ListView(props, ref) {
   });
   let gridCollection = useMemo(() => new GridCollection({
     columnCount: 1,
-    items: [...collection].map(item => ({
-      type: 'item',
-      childNodes: [_babelRuntimeHelpersExtends({}, item, {
+    items: [...collection].map(item => _babelRuntimeHelpersExtends({}, item, {
+      hasChildNodes: true,
+      childNodes: [{
+        key: "cell-" + item.key,
+        type: 'cell',
         index: 0,
-        type: 'cell'
-      })]
+        value: null,
+        level: 0,
+        rendered: null,
+        textValue: item.textValue,
+        hasChildNodes: false,
+        childNodes: []
+      }]
     }))
   }), [collection]);
   let state = useGridState(_babelRuntimeHelpersExtends({}, props, {
-    collection: gridCollection
+    collection: gridCollection,
+    focusMode: 'cell',
+    selectionBehavior: props.selectionStyle === 'highlight' ? 'replace' : 'toggle'
   }));
-  let layout = $e7c536fff73c6a7b9c1c07582f0c25a$export$useListLayout(state);
+  let layout = $e7c536fff73c6a7b9c1c07582f0c25a$export$useListLayout(state, props.density || 'regular');
   let keyboardDelegate = useMemo(() => new GridKeyboardDelegate({
     collection: state.collection,
     disabledKeys: state.disabledKeys,
     ref: domRef,
     direction,
     collator,
+    // Focus the ListView cell instead of the row so that focus doesn't change with left/right arrow keys when there aren't any
+    // focusable children in the cell.
     focusMode: 'cell'
   }), [state, domRef, direction, collator]);
   let {
     gridProps
   } = useGrid(_babelRuntimeHelpersExtends({}, props, {
     isVirtualized: true,
-    keyboardDelegate,
-    ref: domRef
-  }), state); // Sync loading state into the layout.
+    keyboardDelegate
+  }), state, domRef); // Sync loading state into the layout.
+
+  layout.isLoading = loadingState === 'loading';
+  let focusedKey = state.selectionManager.focusedKey;
+  let focusedItem = gridCollection.getItem(state.selectionManager.focusedKey);
+
+  if ((focusedItem == null ? void 0 : focusedItem.parentKey) != null) {
+    focusedKey = focusedItem.parentKey;
+  }
 
-  layout.isLoading = props.isLoading;
   return /*#__PURE__*/_react.createElement($e7c536fff73c6a7b9c1c07582f0c25a$export$ListViewContext.Provider, {
     value: {
       state,
@@ -356,17 +512,20 @@ function $e7c536fff73c6a7b9c1c07582f0c25a$var$ListView(props, ref) {
     }
   }, /*#__PURE__*/_react.createElement(Virtualizer, _babelRuntimeHelpersExtends({}, gridProps, styleProps, {
     ref: domRef,
-    focusedKey: state.selectionManager.focusedKey,
-    sizeToFit: "height",
+    focusedKey: focusedKey,
     scrollDirection: "vertical",
-    className: classNames($b12595b6ccb9db4fe8501811c0117e$$interop$default, 'react-spectrum-ListView', styleProps.className),
+    className: classNames($b12595b6ccb9db4fe8501811c0117e$$interop$default, 'react-spectrum-ListView', "react-spectrum-ListView--" + density, 'react-spectrum-ListView--emphasized', {
+      'react-spectrum-ListView--quiet': isQuiet
+    }, styleProps.className),
     layout: layout,
-    collection: collection,
+    collection: gridCollection,
     transitionDuration: transitionDuration
   }), (type, item) => {
     if (type === 'item') {
       return /*#__PURE__*/_react.createElement($e22a5a34a012c87bfba45a66714099d$export$ListViewItem, {
-        item: item
+        item: item,
+        onAction: onAction,
+        isEmphasized: true
       });
     } else if (type === 'loader') {
       return /*#__PURE__*/_react.createElement($e7c536fff73c6a7b9c1c07582f0c25a$var$CenteredWrapper, null, /*#__PURE__*/_react.createElement(ProgressCircle, {