@react-spectrum/list 3.0.0-alpha.1 → 3.0.0-alpha.5

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 +244 -82
  4. package/dist/main.js.map +1 -1
  5. package/dist/module.js +225 -78
  6. package/dist/module.js.map +1 -1
  7. package/dist/types.d.ts +10 -3
  8. package/dist/types.d.ts.map +1 -1
  9. package/package.json +30 -29
  10. package/src/ListView.tsx +74 -18
  11. package/src/ListViewItem.tsx +81 -15
  12. package/src/listview.css +166 -9
package/dist/main.css CHANGED
@@ -1,2 +1,2 @@
1
- ._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%}
1
+ ._react-spectrum-ListView_ba3f2{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_ba3f2 [role=row]{outline:none}._react-spectrum-ListView--quiet_ba3f2{background-color:initial;border-width:0}._react-spectrum-ListViewItem_ba3f2{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_ba3f2 ._react-spectrum-ListViewItem_ba3f2._is-selected_ba3f2{background-color:var(--spectrum-alias-highlight-selected);border-color:var(--spectrum-global-color-blue-500)}._react-spectrum-ListView--emphasized_ba3f2 ._react-spectrum-ListViewItem_ba3f2._is-selected_ba3f2._is-active_ba3f2,._react-spectrum-ListView--emphasized_ba3f2 ._react-spectrum-ListViewItem_ba3f2._is-selected_ba3f2._is-hovered_ba3f2{background-color:var(--spectrum-alias-highlight-selected)}._react-spectrum-ListView--emphasized_ba3f2 ._react-spectrum-ListViewItem_ba3f2._is-selected_ba3f2._is-previous-selected_ba3f2:not(._is-focused_ba3f2){border-top-color:transparent}._react-spectrum-ListViewItem_ba3f2._focus-ring_ba3f2,._react-spectrum-ListViewItem_ba3f2._is-focused_ba3f2,._react-spectrum-ListViewItem_ba3f2._is-hovered_ba3f2{background-color:var(--spectrum-alias-highlight-hover)}._react-spectrum-ListViewItem_ba3f2._focus-ring_ba3f2{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_ba3f2._is-active_ba3f2{background-color:var(--spectrum-alias-highlight-active)}._react-spectrum-ListViewItem_ba3f2._is-selected_ba3f2,._react-spectrum-ListViewItem_ba3f2._is-selected_ba3f2._is-active_ba3f2,._react-spectrum-ListViewItem_ba3f2._is-selected_ba3f2._is-hovered_ba3f2{background-color:var(--spectrum-alias-highlight-hover)}._react-spectrum-ListViewItem_ba3f2._has-checkbox_ba3f2{padding-top:0;padding-bottom:0}[dir=ltr] div:first-child>div[role=row]>._react-spectrum-ListViewItem_ba3f2{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_ba3f2,[dir=rtl] div:first-child>div[role=row]>._react-spectrum-ListViewItem_ba3f2{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_ba3f2{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_ba3f2{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_ba3f2,[dir=rtl] div:last-child>div[role=row]>._react-spectrum-ListViewItem_ba3f2{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_ba3f2{border-bottom-left-radius:calc(var(--spectrum-global-dimension-size-50) - var(--spectrum-global-dimension-static-size-10, 1px))}._react-spectrum-ListView--compact_ba3f2 ._react-spectrum-ListViewItem_ba3f2{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_ba3f2 ._react-spectrum-ListViewItem_ba3f2{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_ba3f2{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_ba3f2{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_ba3f2>span{margin:0}._react-spectrum-ListViewItem-icon_ba3f2,._react-spectrum-ListViewItem-image_ba3f2{grid-area:image;-ms-flex-align:center;align-items:center;-ms-grid-column-align:center;justify-items:center}[dir=ltr] ._react-spectrum-ListViewItem-icon_ba3f2,[dir=ltr] ._react-spectrum-ListViewItem-image_ba3f2{padding-right:var(--spectrum-global-dimension-size-100)}[dir=rtl] ._react-spectrum-ListViewItem-icon_ba3f2,[dir=rtl] ._react-spectrum-ListViewItem-image_ba3f2{padding-left:var(--spectrum-global-dimension-size-100)}._react-spectrum-ListViewItem-image_ba3f2{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_ba3f2,._react-spectrum-ListViewItem-description_ba3f2{-ms-flex-positive:1;flex-grow:1}._react-spectrum-ListViewItem-content_ba3f2{grid-area:content}._react-spectrum-ListViewItem-description_ba3f2{grid-area:description}._react-spectrum-ListViewItem-actions_ba3f2{grid-area:actions;-ms-flex-positive:0;flex-grow:0;-ms-flex-negative:0;flex-shrink:0}._react-spectrum-ListViewItem-actionmenu_ba3f2{grid-area:actionmenu}._react-spectrum-ListView-centeredWrapper_ba3f2{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_ba3f2{grid-area:chevron}[dir=ltr] ._react-spectrum-ListViewItem-parentIndicator_ba3f2{padding-left:var(--spectrum-global-dimension-size-75)}[dir=rtl] ._react-spectrum-ListViewItem-parentIndicator_ba3f2{padding-right:var(--spectrum-global-dimension-size-75)}
2
2
  /*# sourceMappingURL=main.css.map */
package/dist/main.css.map CHANGED
@@ -1 +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"}
1
+ {"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 CHANGED
@@ -13,17 +13,18 @@ var {
13
13
  } = require("@react-spectrum/provider");
14
14
 
15
15
  var {
16
- useCollator,
16
+ ProgressCircle
17
+ } = require("@react-spectrum/progress");
18
+
19
+ var {
17
20
  useLocale,
21
+ useCollator,
18
22
  useMessageFormatter
19
23
  } = require("@react-aria/i18n");
20
24
 
21
25
  var {
22
- ProgressCircle
23
- } = require("@react-spectrum/progress");
24
-
25
- var {
26
- useHover
26
+ useHover,
27
+ usePress
27
28
  } = require("@react-aria/interactions");
28
29
 
29
30
  var {
@@ -44,6 +45,22 @@ var {
44
45
  mergeProps
45
46
  } = require("@react-aria/utils");
46
47
 
48
+ var {
49
+ Grid
50
+ } = require("@react-spectrum/layout");
51
+
52
+ var {
53
+ Content
54
+ } = require("@react-spectrum/view");
55
+
56
+ var _spectrumIconsUiChevronRightMedium = $parcel$interopDefault(require("@spectrum-icons/ui/ChevronRightMedium"));
57
+
58
+ var _spectrumIconsUiChevronLeftMedium = $parcel$interopDefault(require("@spectrum-icons/ui/ChevronLeftMedium"));
59
+
60
+ var {
61
+ Checkbox
62
+ } = require("@react-spectrum/checkbox");
63
+
47
64
  var {
48
65
  useListState
49
66
  } = require("@react-stately/list");
@@ -56,7 +73,8 @@ var {
56
73
  GridKeyboardDelegate,
57
74
  useGrid,
58
75
  useGridCell,
59
- useGridRow
76
+ useGridRow,
77
+ useGridSelectionCheckbox
60
78
  } = require("@react-aria/grid");
61
79
 
62
80
  var {
@@ -67,7 +85,9 @@ var {
67
85
  var {
68
86
  classNames,
69
87
  useDOMRef,
70
- useStyleProps
88
+ useStyleProps,
89
+ ClearSlots,
90
+ SlotProvider
71
91
  } = require("@react-spectrum/utils");
72
92
 
73
93
  var _babelRuntimeHelpersInteropRequireDefault = $parcel$interopDefault(require("@babel/runtime/helpers/interopRequireDefault"));
@@ -80,128 +100,152 @@ function $parcel$interopDefault(a) {
80
100
  return a && a.__esModule ? a.default : a;
81
101
  }
82
102
 
83
- // ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-spectrum/list/src/listview.css
103
+ // ASSET: /Users/govett/Downloads/react-spectrum-release/packages/@react-spectrum/list/src/listview.css
84
104
  var $b12595b6ccb9db4fe8501811c0117e$exports = {};
85
105
  $b12595b6ccb9db4fe8501811c0117e$exports = {
86
- "react-spectrum-ListView": "_react-spectrum-ListView_49612",
87
- "react-spectrum-ListViewItem": "_react-spectrum-ListViewItem_49612",
88
- "is-hovered": "_is-hovered_49612",
89
- "is-focused": "_is-focused_49612",
90
- "focus-ring": "_focus-ring_49612",
91
- "react-spectrum-ListView-centeredWrapper": "_react-spectrum-ListView-centeredWrapper_49612"
106
+ "react-spectrum-ListView": "_react-spectrum-ListView_ba3f2",
107
+ "react-spectrum-ListView--quiet": "_react-spectrum-ListView--quiet_ba3f2",
108
+ "react-spectrum-ListViewItem": "_react-spectrum-ListViewItem_ba3f2",
109
+ "react-spectrum-ListView--emphasized": "_react-spectrum-ListView--emphasized_ba3f2",
110
+ "is-selected": "_is-selected_ba3f2",
111
+ "is-hovered": "_is-hovered_ba3f2",
112
+ "is-active": "_is-active_ba3f2",
113
+ "is-previous-selected": "_is-previous-selected_ba3f2",
114
+ "is-focused": "_is-focused_ba3f2",
115
+ "focus-ring": "_focus-ring_ba3f2",
116
+ "has-checkbox": "_has-checkbox_ba3f2",
117
+ "react-spectrum-ListView--compact": "_react-spectrum-ListView--compact_ba3f2",
118
+ "react-spectrum-ListView--spacious": "_react-spectrum-ListView--spacious_ba3f2",
119
+ "react-spectrum-ListViewItem-grid": "_react-spectrum-ListViewItem-grid_ba3f2",
120
+ "react-spectrum-ListViewItem-checkbox": "_react-spectrum-ListViewItem-checkbox_ba3f2",
121
+ "react-spectrum-ListViewItem-icon": "_react-spectrum-ListViewItem-icon_ba3f2",
122
+ "react-spectrum-ListViewItem-image": "_react-spectrum-ListViewItem-image_ba3f2",
123
+ "react-spectrum-ListViewItem-content": "_react-spectrum-ListViewItem-content_ba3f2",
124
+ "react-spectrum-ListViewItem-description": "_react-spectrum-ListViewItem-description_ba3f2",
125
+ "react-spectrum-ListViewItem-actions": "_react-spectrum-ListViewItem-actions_ba3f2",
126
+ "react-spectrum-ListViewItem-actionmenu": "_react-spectrum-ListViewItem-actionmenu_ba3f2",
127
+ "react-spectrum-ListView-centeredWrapper": "_react-spectrum-ListView-centeredWrapper_ba3f2",
128
+ "react-spectrum-ListViewItem-parentIndicator": "_react-spectrum-ListViewItem-parentIndicator_ba3f2"
92
129
  };
93
- // ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-spectrum/list/intl/ar-AE.json
130
+ // ASSET: /Users/govett/Downloads/react-spectrum-release/packages/@react-spectrum/list/intl/ar-AE.json
94
131
  var $c0e73e536a6214a8$exports = {};
95
- $c0e73e536a6214a8$exports = JSON.parse("{\"loading\":\"جار التحميل...\",\"loadingMore\":\"جار تحميل المزيد...\"}");
96
- // ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-spectrum/list/intl/bg-BG.json
132
+ $c0e73e536a6214a8$exports = JSON.parse("{\"loading\":\"جارٍ التحميل...\",\"loadingMore\":\"جارٍ تحميل المزيد...\"}");
133
+ // ASSET: /Users/govett/Downloads/react-spectrum-release/packages/@react-spectrum/list/intl/bg-BG.json
97
134
  var $d10e45f855dd264d361dc8417eccf336$exports = {};
98
135
  $d10e45f855dd264d361dc8417eccf336$exports = JSON.parse("{\"loading\":\"Зареждане...\",\"loadingMore\":\"Зареждане на още...\"}");
99
- // ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-spectrum/list/intl/cs-CZ.json
136
+ // ASSET: /Users/govett/Downloads/react-spectrum-release/packages/@react-spectrum/list/intl/cs-CZ.json
100
137
  var $cd57c650420f55c782af53645a8625a0$exports = {};
101
138
  $cd57c650420f55c782af53645a8625a0$exports = JSON.parse("{\"loading\":\"Načítání...\",\"loadingMore\":\"Načítání dalších...\"}");
102
- // ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-spectrum/list/intl/da-DK.json
139
+ // ASSET: /Users/govett/Downloads/react-spectrum-release/packages/@react-spectrum/list/intl/da-DK.json
103
140
  var $e9251f61576dcc7468e044107eabac1b$exports = {};
104
- $e9251f61576dcc7468e044107eabac1b$exports = JSON.parse("{\"loading\":\"Indlæser ...\",\"loadingMore\":\"Indlæser flere ...\"}");
105
- // ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-spectrum/list/intl/de-DE.json
141
+ $e9251f61576dcc7468e044107eabac1b$exports = JSON.parse("{\"loading\":\"Indlæser...\",\"loadingMore\":\"Indlæser flere...\"}");
142
+ // ASSET: /Users/govett/Downloads/react-spectrum-release/packages/@react-spectrum/list/intl/de-DE.json
106
143
  var $bcd4b4f77717e3d175ac72b639918cf4$exports = {};
107
144
  $bcd4b4f77717e3d175ac72b639918cf4$exports = JSON.parse("{\"loading\":\"Laden...\",\"loadingMore\":\"Mehr laden ...\"}");
108
- // ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-spectrum/list/intl/el-GR.json
145
+ // ASSET: /Users/govett/Downloads/react-spectrum-release/packages/@react-spectrum/list/intl/el-GR.json
109
146
  var $ab298f8dbeba836e700636ab2a97bf8c$exports = {};
110
147
  $ab298f8dbeba836e700636ab2a97bf8c$exports = JSON.parse("{\"loading\":\"Φόρτωση...\",\"loadingMore\":\"Φόρτωση περισσότερων...\"}");
111
- // ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-spectrum/list/intl/en-US.json
148
+ // ASSET: /Users/govett/Downloads/react-spectrum-release/packages/@react-spectrum/list/intl/en-US.json
112
149
  var $aac00a6bac6abfc759ed86b86a1650e$exports = {};
113
150
  $aac00a6bac6abfc759ed86b86a1650e$exports = JSON.parse("{\"loading\":\"Loading…\",\"loadingMore\":\"Loading more…\"}");
114
- // ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-spectrum/list/intl/es-ES.json
151
+ // ASSET: /Users/govett/Downloads/react-spectrum-release/packages/@react-spectrum/list/intl/es-ES.json
115
152
  var $bdd8095fcfa119b973a573ad0c3ce$exports = {};
116
153
  $bdd8095fcfa119b973a573ad0c3ce$exports = JSON.parse("{\"loading\":\"Cargando…\",\"loadingMore\":\"Cargando más…\"}");
117
- // ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-spectrum/list/intl/et-EE.json
154
+ // ASSET: /Users/govett/Downloads/react-spectrum-release/packages/@react-spectrum/list/intl/et-EE.json
118
155
  var $d984f4a9658089f7e11de7b3c7f$exports = {};
119
156
  $d984f4a9658089f7e11de7b3c7f$exports = JSON.parse("{\"loading\":\"Laadimine...\",\"loadingMore\":\"Laadi rohkem...\"}");
120
- // ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-spectrum/list/intl/fi-FI.json
157
+ // ASSET: /Users/govett/Downloads/react-spectrum-release/packages/@react-spectrum/list/intl/fi-FI.json
121
158
  var $c47984d866dae8367700c9cdd9d0c079$exports = {};
122
159
  $c47984d866dae8367700c9cdd9d0c079$exports = JSON.parse("{\"loading\":\"Ladataan…\",\"loadingMore\":\"Ladataan lisää…\"}");
123
- // ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-spectrum/list/intl/fr-FR.json
160
+ // ASSET: /Users/govett/Downloads/react-spectrum-release/packages/@react-spectrum/list/intl/fr-FR.json
124
161
  var $f95e76092a4bfe2ee57f72058fb13$exports = {};
125
162
  $f95e76092a4bfe2ee57f72058fb13$exports = JSON.parse("{\"loading\":\"Chargement...\",\"loadingMore\":\"Chargement supplémentaire...\"}");
126
- // ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-spectrum/list/intl/he-IL.json
163
+ // ASSET: /Users/govett/Downloads/react-spectrum-release/packages/@react-spectrum/list/intl/he-IL.json
127
164
  var $d33e3efe54c3a770d7368daf$exports = {};
128
165
  $d33e3efe54c3a770d7368daf$exports = JSON.parse("{\"loading\":\"טוען...\",\"loadingMore\":\"טוען עוד...\"}");
129
- // ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-spectrum/list/intl/hr-HR.json
166
+ // ASSET: /Users/govett/Downloads/react-spectrum-release/packages/@react-spectrum/list/intl/hr-HR.json
130
167
  var $a383f48f336c23414040048982c3d36e$exports = {};
131
168
  $a383f48f336c23414040048982c3d36e$exports = JSON.parse("{\"loading\":\"Učitavam...\",\"loadingMore\":\"Učitavam još...\"}");
132
- // ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-spectrum/list/intl/hu-HU.json
169
+ // ASSET: /Users/govett/Downloads/react-spectrum-release/packages/@react-spectrum/list/intl/hu-HU.json
133
170
  var $c22d03cce2b659bfe201bdc8cfd49d6c$exports = {};
134
171
  $c22d03cce2b659bfe201bdc8cfd49d6c$exports = JSON.parse("{\"loading\":\"Betöltés folyamatban…\",\"loadingMore\":\"Továbbiak betöltése folyamatban…\"}");
135
- // ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-spectrum/list/intl/it-IT.json
172
+ // ASSET: /Users/govett/Downloads/react-spectrum-release/packages/@react-spectrum/list/intl/it-IT.json
136
173
  var $a18cd27dd03b78d5da27b762ba304d8b$exports = {};
137
174
  $a18cd27dd03b78d5da27b762ba304d8b$exports = JSON.parse("{\"loading\":\"Caricamento...\",\"loadingMore\":\"Caricamento altri...\"}");
138
- // ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-spectrum/list/intl/ja-JP.json
175
+ // ASSET: /Users/govett/Downloads/react-spectrum-release/packages/@react-spectrum/list/intl/ja-JP.json
139
176
  var $d16135f8943668f309b50ec769b683d$exports = {};
140
177
  $d16135f8943668f309b50ec769b683d$exports = JSON.parse("{\"loading\":\"読み込み中...\",\"loadingMore\":\"さらに読み込み中...\"}");
141
- // ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-spectrum/list/intl/ko-KR.json
178
+ // ASSET: /Users/govett/Downloads/react-spectrum-release/packages/@react-spectrum/list/intl/ko-KR.json
142
179
  var $a3cc2b02a5ac5ed2a1cec2bccb52$exports = {};
143
- $a3cc2b02a5ac5ed2a1cec2bccb52$exports = JSON.parse("{\"loading\":\"로드 중\",\"loadingMore\":\"추가 로드 중\"}");
144
- // ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-spectrum/list/intl/lt-LT.json
180
+ $a3cc2b02a5ac5ed2a1cec2bccb52$exports = JSON.parse("{\"loading\":\"로드 중…\",\"loadingMore\":\"추가 로드 중…\"}");
181
+ // ASSET: /Users/govett/Downloads/react-spectrum-release/packages/@react-spectrum/list/intl/lt-LT.json
145
182
  var $ae93571eb401fed294c5dab20b33bb$exports = {};
146
183
  $ae93571eb401fed294c5dab20b33bb$exports = JSON.parse("{\"loading\":\"Įkeliama...\",\"loadingMore\":\"Įkeliama daugiau...\"}");
147
- // ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-spectrum/list/intl/lv-LV.json
184
+ // ASSET: /Users/govett/Downloads/react-spectrum-release/packages/@react-spectrum/list/intl/lv-LV.json
148
185
  var $be5175fef81d226e7f779256abe1dcd5$exports = {};
149
186
  $be5175fef81d226e7f779256abe1dcd5$exports = JSON.parse("{\"loading\":\"Notiek ielāde...\",\"loadingMore\":\"Tiek ielādēts vēl...\"}");
150
- // ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-spectrum/list/intl/nb-NO.json
187
+ // ASSET: /Users/govett/Downloads/react-spectrum-release/packages/@react-spectrum/list/intl/nb-NO.json
151
188
  var $a48a712b8517c3f86d8ede3eb7ad77a$exports = {};
152
189
  $a48a712b8517c3f86d8ede3eb7ad77a$exports = JSON.parse("{\"loading\":\"Laster inn ...\",\"loadingMore\":\"Laster inn flere ...\"}");
153
- // ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-spectrum/list/intl/nl-NL.json
190
+ // ASSET: /Users/govett/Downloads/react-spectrum-release/packages/@react-spectrum/list/intl/nl-NL.json
154
191
  var $e2337a2939c9da82394706e415a3$exports = {};
155
192
  $e2337a2939c9da82394706e415a3$exports = JSON.parse("{\"loading\":\"Laden...\",\"loadingMore\":\"Meer laden...\"}");
156
- // ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-spectrum/list/intl/pl-PL.json
193
+ // ASSET: /Users/govett/Downloads/react-spectrum-release/packages/@react-spectrum/list/intl/pl-PL.json
157
194
  var $fd52b05db65f6cf28f965b2e45a4107f$exports = {};
158
195
  $fd52b05db65f6cf28f965b2e45a4107f$exports = JSON.parse("{\"loading\":\"Ładowanie...\",\"loadingMore\":\"Wczytywanie większej liczby...\"}");
159
- // ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-spectrum/list/intl/pt-BR.json
196
+ // ASSET: /Users/govett/Downloads/react-spectrum-release/packages/@react-spectrum/list/intl/pt-BR.json
160
197
  var $e9b4f7ff9fac8fb1d98cca0baf7a9e0c$exports = {};
161
198
  $e9b4f7ff9fac8fb1d98cca0baf7a9e0c$exports = JSON.parse("{\"loading\":\"Carregando...\",\"loadingMore\":\"Carregando mais...\"}");
162
- // ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-spectrum/list/intl/pt-PT.json
199
+ // ASSET: /Users/govett/Downloads/react-spectrum-release/packages/@react-spectrum/list/intl/pt-PT.json
163
200
  var $d902cdfcc9371d068ee49ad19aabdd1$exports = {};
164
201
  $d902cdfcc9371d068ee49ad19aabdd1$exports = JSON.parse("{\"loading\":\"A carregar...\",\"loadingMore\":\"A carregar mais...\"}");
165
- // ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-spectrum/list/intl/ro-RO.json
202
+ // ASSET: /Users/govett/Downloads/react-spectrum-release/packages/@react-spectrum/list/intl/ro-RO.json
166
203
  var $e3452733acd9f9e5a3ac8cbb48d4e751$exports = {};
167
204
  $e3452733acd9f9e5a3ac8cbb48d4e751$exports = JSON.parse("{\"loading\":\"Se încarcă...\",\"loadingMore\":\"Se încarcă mai multe...\"}");
168
- // ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-spectrum/list/intl/ru-RU.json
205
+ // ASSET: /Users/govett/Downloads/react-spectrum-release/packages/@react-spectrum/list/intl/ru-RU.json
169
206
  var $b670eb7e3cbf30871c98ed1e9d89e2db$exports = {};
170
207
  $b670eb7e3cbf30871c98ed1e9d89e2db$exports = JSON.parse("{\"loading\":\"Загрузка...\",\"loadingMore\":\"Дополнительная загрузка...\"}");
171
- // ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-spectrum/list/intl/sk-SK.json
208
+ // ASSET: /Users/govett/Downloads/react-spectrum-release/packages/@react-spectrum/list/intl/sk-SK.json
172
209
  var $c8639b246b747f6e33ea70c42946934c$exports = {};
173
210
  $c8639b246b747f6e33ea70c42946934c$exports = JSON.parse("{\"loading\":\"Načítava sa...\",\"loadingMore\":\"Načítava sa viac...\"}");
174
- // ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-spectrum/list/intl/sl-SI.json
211
+ // ASSET: /Users/govett/Downloads/react-spectrum-release/packages/@react-spectrum/list/intl/sl-SI.json
175
212
  var $c0edc9a424436a2a0151fb5159f578c9$exports = {};
176
- $c0edc9a424436a2a0151fb5159f578c9$exports = JSON.parse("{\"loading\":\"Nalaganje...\",\"loadingMore\":\"Nalaganje več vsebine...\"}");
177
- // ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-spectrum/list/intl/sr-SP.json
213
+ $c0edc9a424436a2a0151fb5159f578c9$exports = JSON.parse("{\"loading\":\"Nalaganje ...\",\"loadingMore\":\"Nalaganje več vsebine ...\"}");
214
+ // ASSET: /Users/govett/Downloads/react-spectrum-release/packages/@react-spectrum/list/intl/sr-SP.json
178
215
  var $b674b388f9c4f9e79fa495de7ad1a8c$exports = {};
179
216
  $b674b388f9c4f9e79fa495de7ad1a8c$exports = JSON.parse("{\"loading\":\"Učitavam...\",\"loadingMore\":\"Učitavam još...\"}");
180
- // ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-spectrum/list/intl/sv-SE.json
217
+ // ASSET: /Users/govett/Downloads/react-spectrum-release/packages/@react-spectrum/list/intl/sv-SE.json
181
218
  var $ceba4cbd80d48b8dc0b4e431446a0a4$exports = {};
182
219
  $ceba4cbd80d48b8dc0b4e431446a0a4$exports = JSON.parse("{\"loading\":\"Läser in...\",\"loadingMore\":\"Läser in mer...\"}");
183
- // ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-spectrum/list/intl/tr-TR.json
220
+ // ASSET: /Users/govett/Downloads/react-spectrum-release/packages/@react-spectrum/list/intl/tr-TR.json
184
221
  var $caef6c965d83763c0f3046bc6cb23d7$exports = {};
185
222
  $caef6c965d83763c0f3046bc6cb23d7$exports = JSON.parse("{\"loading\":\"Yükleniyor...\",\"loadingMore\":\"Daha fazla yükleniyor...\"}");
186
- // ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-spectrum/list/intl/uk-UA.json
223
+ // ASSET: /Users/govett/Downloads/react-spectrum-release/packages/@react-spectrum/list/intl/uk-UA.json
187
224
  var $bcc2656e6d1975b0ba57e3d35d$exports = {};
188
225
  $bcc2656e6d1975b0ba57e3d35d$exports = JSON.parse("{\"loading\":\"Завантаження…\",\"loadingMore\":\"Завантаження інших об’єктів...\"}");
189
- // ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-spectrum/list/intl/zh-CN.json
226
+ // ASSET: /Users/govett/Downloads/react-spectrum-release/packages/@react-spectrum/list/intl/zh-CN.json
190
227
  var $fd0c1523885c2930fa91facf8ca5329$exports = {};
191
228
  $fd0c1523885c2930fa91facf8ca5329$exports = JSON.parse("{\"loading\":\"正在加载...\",\"loadingMore\":\"正在加载更多...\"}");
192
- // ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-spectrum/list/intl/zh-TW.json
229
+ // ASSET: /Users/govett/Downloads/react-spectrum-release/packages/@react-spectrum/list/intl/zh-TW.json
193
230
  var $b982929e1b75088f0588b4b23816b9af$exports = {};
194
- $b982929e1b75088f0588b4b23816b9af$exports = JSON.parse("{\"loading\":\"正在載入\",\"loadingMore\":\"正在載入更多…\"}");
231
+ $b982929e1b75088f0588b4b23816b9af$exports = JSON.parse("{\"loading\":\"載入中…\",\"loadingMore\":\"正在載入更多…\"}");
195
232
  var $b12595b6ccb9db4fe8501811c0117e$$interop$default = $parcel$interopDefault($b12595b6ccb9db4fe8501811c0117e$exports);
196
233
 
197
234
  function $e22a5a34a012c87bfba45a66714099d$export$ListViewItem(props) {
198
235
  let {
199
- item
236
+ item,
237
+ onAction,
238
+ isEmphasized
200
239
  } = props;
240
+ let cellNode = [...item.childNodes][0];
201
241
  let {
202
242
  state
203
243
  } = useContext($e7c536fff73c6a7b9c1c07582f0c25a$export$ListViewContext);
204
- let ref = useRef();
244
+ let {
245
+ direction
246
+ } = useLocale();
247
+ let rowRef = useRef();
248
+ let cellRef = useRef();
205
249
  let {
206
250
  isFocusVisible: isFocusVisibleWithin,
207
251
  focusProps: focusWithinProps
@@ -212,31 +256,109 @@ function $e22a5a34a012c87bfba45a66714099d$export$ListViewItem(props) {
212
256
  isFocusVisible,
213
257
  focusProps
214
258
  } = useFocusRing();
259
+ let allowsInteraction = state.selectionManager.selectionMode !== 'none' || onAction;
260
+ let isDisabled = !allowsInteraction || state.disabledKeys.has(item.key);
215
261
  let {
216
262
  hoverProps,
217
263
  isHovered
218
- } = useHover({});
264
+ } = useHover({
265
+ isDisabled
266
+ });
267
+ let {
268
+ pressProps,
269
+ isPressed
270
+ } = usePress({
271
+ isDisabled
272
+ });
219
273
  let {
220
274
  rowProps
221
275
  } = useGridRow({
222
276
  node: item,
223
- isVirtualized: true
224
- }, state, ref);
277
+ isVirtualized: true,
278
+ onAction: onAction ? () => onAction(item.key) : undefined
279
+ }, state, rowRef);
225
280
  let {
226
281
  gridCellProps
227
282
  } = useGridCell({
228
- node: item,
283
+ node: cellNode,
229
284
  focusMode: 'cell'
230
- }, state, ref);
285
+ }, state, cellRef);
231
286
  const mergedProps = mergeProps(gridCellProps, hoverProps, focusWithinProps, focusProps);
232
- return /*#__PURE__*/_react.createElement("div", rowProps, /*#__PURE__*/_react.createElement("div", _babelRuntimeHelpersExtends({
287
+ let {
288
+ checkboxProps
289
+ } = useGridSelectionCheckbox(_babelRuntimeHelpersExtends({}, props, {
290
+ key: item.key
291
+ }), state);
292
+ let chevron = null;
293
+
294
+ if (item.props.hasChildItems) {
295
+ chevron = direction === 'ltr' ? /*#__PURE__*/_react.createElement(_spectrumIconsUiChevronRightMedium, {
296
+ "aria-hidden": "true",
297
+ UNSAFE_className: $b12595b6ccb9db4fe8501811c0117e$$interop$default['react-spectrum-ListViewItem-parentIndicator']
298
+ }) : /*#__PURE__*/_react.createElement(_spectrumIconsUiChevronLeftMedium, {
299
+ "aria-hidden": "true",
300
+ UNSAFE_className: $b12595b6ccb9db4fe8501811c0117e$$interop$default['react-spectrum-ListViewItem-parentIndicator']
301
+ });
302
+ }
303
+
304
+ let showCheckbox = state.selectionManager.selectionMode !== 'none' && state.selectionManager.selectionBehavior === 'toggle';
305
+ let isSelected = state.selectionManager.isSelected(item.key);
306
+ return /*#__PURE__*/_react.createElement("div", _babelRuntimeHelpersExtends({}, mergeProps(rowProps, pressProps), {
307
+ ref: rowRef
308
+ }), /*#__PURE__*/_react.createElement("div", _babelRuntimeHelpersExtends({
233
309
  className: classNames($b12595b6ccb9db4fe8501811c0117e$$interop$default, 'react-spectrum-ListViewItem', {
310
+ 'is-active': isPressed,
234
311
  'is-focused': isFocusVisibleWithin,
235
312
  'focus-ring': isFocusVisible,
236
- 'is-hovered': isHovered
313
+ 'is-hovered': isHovered,
314
+ 'is-selected': isSelected,
315
+ 'is-previous-selected': state.selectionManager.isSelected(item.prevKey),
316
+ 'react-spectrum-ListViewItem--highlightSelection': state.selectionManager.selectionBehavior === 'replace' && (isSelected || state.selectionManager.isSelected(item.nextKey))
237
317
  }),
238
- ref: ref
239
- }, mergedProps), item.rendered));
318
+ ref: cellRef
319
+ }, mergedProps), /*#__PURE__*/_react.createElement(Grid, {
320
+ UNSAFE_className: $b12595b6ccb9db4fe8501811c0117e$$interop$default['react-spectrum-ListViewItem-grid']
321
+ }, showCheckbox && /*#__PURE__*/_react.createElement(Checkbox, _babelRuntimeHelpersExtends({
322
+ UNSAFE_className: $b12595b6ccb9db4fe8501811c0117e$$interop$default['react-spectrum-ListViewItem-checkbox']
323
+ }, checkboxProps, {
324
+ isEmphasized: isEmphasized
325
+ })), /*#__PURE__*/_react.createElement(SlotProvider, {
326
+ slots: {
327
+ content: {
328
+ UNSAFE_className: $b12595b6ccb9db4fe8501811c0117e$$interop$default['react-spectrum-ListViewItem-content']
329
+ },
330
+ text: {
331
+ UNSAFE_className: $b12595b6ccb9db4fe8501811c0117e$$interop$default['react-spectrum-ListViewItem-content']
332
+ },
333
+ description: {
334
+ UNSAFE_className: $b12595b6ccb9db4fe8501811c0117e$$interop$default['react-spectrum-ListViewItem-description']
335
+ },
336
+ icon: {
337
+ UNSAFE_className: $b12595b6ccb9db4fe8501811c0117e$$interop$default['react-spectrum-ListViewItem-icon'],
338
+ size: 'M'
339
+ },
340
+ image: {
341
+ UNSAFE_className: $b12595b6ccb9db4fe8501811c0117e$$interop$default['react-spectrum-ListViewItem-image']
342
+ },
343
+ link: {
344
+ UNSAFE_className: $b12595b6ccb9db4fe8501811c0117e$$interop$default['react-spectrum-ListViewItem-content'],
345
+ isQuiet: true
346
+ },
347
+ actionButton: {
348
+ UNSAFE_className: $b12595b6ccb9db4fe8501811c0117e$$interop$default['react-spectrum-ListViewItem-actions'],
349
+ isQuiet: true
350
+ },
351
+ actionGroup: {
352
+ UNSAFE_className: $b12595b6ccb9db4fe8501811c0117e$$interop$default['react-spectrum-ListViewItem-actions'],
353
+ isQuiet: true,
354
+ density: 'compact'
355
+ },
356
+ actionMenu: {
357
+ UNSAFE_className: $b12595b6ccb9db4fe8501811c0117e$$interop$default['react-spectrum-ListViewItem-actionmenu'],
358
+ isQuiet: true
359
+ }
360
+ }
361
+ }, typeof item.rendered === 'string' ? /*#__PURE__*/_react.createElement(Content, null, item.rendered) : item.rendered, /*#__PURE__*/_react.createElement(ClearSlots, null, chevron)))));
240
362
  }
241
363
 
242
364
  // @ts-ignore
@@ -279,7 +401,22 @@ const $e7c536fff73c6a7b9c1c07582f0c25a$var$intlMessages = {
279
401
 
280
402
  const $e7c536fff73c6a7b9c1c07582f0c25a$export$ListViewContext = /*#__PURE__*/_react.createContext(null);
281
403
 
282
- function $e7c536fff73c6a7b9c1c07582f0c25a$export$useListLayout(state) {
404
+ const $e7c536fff73c6a7b9c1c07582f0c25a$var$ROW_HEIGHTS = {
405
+ compact: {
406
+ medium: 32,
407
+ large: 40
408
+ },
409
+ regular: {
410
+ medium: 40,
411
+ large: 50
412
+ },
413
+ spacious: {
414
+ medium: 48,
415
+ large: 60
416
+ }
417
+ };
418
+
419
+ function $e7c536fff73c6a7b9c1c07582f0c25a$export$useListLayout(state, density) {
283
420
  let {
284
421
  scale
285
422
  } = useProvider();
@@ -288,10 +425,10 @@ function $e7c536fff73c6a7b9c1c07582f0c25a$export$useListLayout(state) {
288
425
  sensitivity: 'base'
289
426
  });
290
427
  let layout = useMemo(() => new ListLayout({
291
- estimatedRowHeight: scale === 'large' ? 48 : 32,
428
+ estimatedRowHeight: $e7c536fff73c6a7b9c1c07582f0c25a$var$ROW_HEIGHTS[density][scale],
292
429
  padding: 0,
293
430
  collator
294
- }), [collator, scale]);
431
+ }), [collator, scale, density]);
295
432
  layout.collection = state.collection;
296
433
  layout.disabledKeys = state.disabledKeys;
297
434
  return layout;
@@ -299,7 +436,11 @@ function $e7c536fff73c6a7b9c1c07582f0c25a$export$useListLayout(state) {
299
436
 
300
437
  function $e7c536fff73c6a7b9c1c07582f0c25a$var$ListView(props, ref) {
301
438
  let {
302
- transitionDuration = 0
439
+ density = 'regular',
440
+ loadingState,
441
+ isQuiet,
442
+ transitionDuration = 0,
443
+ onAction
303
444
  } = props;
304
445
  let domRef = useDOMRef(ref);
305
446
  let {
@@ -318,24 +459,35 @@ function $e7c536fff73c6a7b9c1c07582f0c25a$var$ListView(props, ref) {
318
459
  });
319
460
  let gridCollection = useMemo(() => new GridCollection({
320
461
  columnCount: 1,
321
- items: [...collection].map(item => ({
322
- type: 'item',
323
- childNodes: [_babelRuntimeHelpersExtends({}, item, {
462
+ items: [...collection].map(item => _babelRuntimeHelpersExtends({}, item, {
463
+ hasChildNodes: true,
464
+ childNodes: [{
465
+ key: "cell-" + item.key,
466
+ type: 'cell',
324
467
  index: 0,
325
- type: 'cell'
326
- })]
468
+ value: null,
469
+ level: 0,
470
+ rendered: null,
471
+ textValue: item.textValue,
472
+ hasChildNodes: false,
473
+ childNodes: []
474
+ }]
327
475
  }))
328
476
  }), [collection]);
329
477
  let state = useGridState(_babelRuntimeHelpersExtends({}, props, {
330
- collection: gridCollection
478
+ collection: gridCollection,
479
+ focusMode: 'cell',
480
+ selectionBehavior: props.selectionStyle === 'highlight' ? 'replace' : 'toggle'
331
481
  }));
332
- let layout = $e7c536fff73c6a7b9c1c07582f0c25a$export$useListLayout(state);
482
+ let layout = $e7c536fff73c6a7b9c1c07582f0c25a$export$useListLayout(state, props.density || 'regular');
333
483
  let keyboardDelegate = useMemo(() => new GridKeyboardDelegate({
334
484
  collection: state.collection,
335
485
  disabledKeys: state.disabledKeys,
336
486
  ref: domRef,
337
487
  direction,
338
488
  collator,
489
+ // Focus the ListView cell instead of the row so that focus doesn't change with left/right arrow keys when there aren't any
490
+ // focusable children in the cell.
339
491
  focusMode: 'cell'
340
492
  }), [state, domRef, direction, collator]);
341
493
  let {
@@ -345,7 +497,14 @@ function $e7c536fff73c6a7b9c1c07582f0c25a$var$ListView(props, ref) {
345
497
  keyboardDelegate
346
498
  }), state, domRef); // Sync loading state into the layout.
347
499
 
348
- layout.isLoading = props.isLoading;
500
+ layout.isLoading = loadingState === 'loading';
501
+ let focusedKey = state.selectionManager.focusedKey;
502
+ let focusedItem = gridCollection.getItem(state.selectionManager.focusedKey);
503
+
504
+ if ((focusedItem == null ? void 0 : focusedItem.parentKey) != null) {
505
+ focusedKey = focusedItem.parentKey;
506
+ }
507
+
349
508
  return /*#__PURE__*/_react.createElement($e7c536fff73c6a7b9c1c07582f0c25a$export$ListViewContext.Provider, {
350
509
  value: {
351
510
  state,
@@ -353,17 +512,20 @@ function $e7c536fff73c6a7b9c1c07582f0c25a$var$ListView(props, ref) {
353
512
  }
354
513
  }, /*#__PURE__*/_react.createElement(Virtualizer, _babelRuntimeHelpersExtends({}, gridProps, styleProps, {
355
514
  ref: domRef,
356
- focusedKey: state.selectionManager.focusedKey,
357
- sizeToFit: "height",
515
+ focusedKey: focusedKey,
358
516
  scrollDirection: "vertical",
359
- className: classNames($b12595b6ccb9db4fe8501811c0117e$$interop$default, 'react-spectrum-ListView', styleProps.className),
517
+ className: classNames($b12595b6ccb9db4fe8501811c0117e$$interop$default, 'react-spectrum-ListView', "react-spectrum-ListView--" + density, 'react-spectrum-ListView--emphasized', {
518
+ 'react-spectrum-ListView--quiet': isQuiet
519
+ }, styleProps.className),
360
520
  layout: layout,
361
- collection: collection,
521
+ collection: gridCollection,
362
522
  transitionDuration: transitionDuration
363
523
  }), (type, item) => {
364
524
  if (type === 'item') {
365
525
  return /*#__PURE__*/_react.createElement($e22a5a34a012c87bfba45a66714099d$export$ListViewItem, {
366
- item: item
526
+ item: item,
527
+ onAction: onAction,
528
+ isEmphasized: true
367
529
  });
368
530
  } else if (type === 'loader') {
369
531
  return /*#__PURE__*/_react.createElement($e7c536fff73c6a7b9c1c07582f0c25a$var$CenteredWrapper, null, /*#__PURE__*/_react.createElement(ProgressCircle, {