@react-spectrum/list 3.7.9-nightly.4494 → 3.7.9-nightly.4506

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 (8) hide show
  1. package/dist/import.mjs +1 -1
  2. package/dist/main.css +30 -94
  3. package/dist/main.css.map +1 -1
  4. package/dist/main.js +1 -1
  5. package/dist/module.css +839 -0
  6. package/dist/module.css.map +1 -0
  7. package/dist/module.js +1 -1
  8. package/package.json +26 -26
package/dist/module.css.map ADDED
@@ -0,0 +1 @@
1
+ {"mappings":"AAYA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4CA;;;;;;;;;;;;;;;;;;;AAiBE;;;;AAQM;;;;;AAQF;;;;;;;;;;AAeA;;;;AAEE;;;;AAKA;;;;AAKA;;;;;AAaE;;;;AAYA;;;;AAMA;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AASA;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AAUE;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAQA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAUA;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AAUR;;;;;AAQJ;;;;AAII;;;;;;;;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAgBJ;;;;;;AAQQ;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAIF;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AAIE;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AASA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAIF;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AAIE;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AASR;;;;AAIA;;;;;;;;;;;;;AAaE;;;;AASA;;;;AAIA;;;;AAQE;;;;AAMA;;;;AAKF;;;;;AAMA;;;;;;;;AAUA;;;;;;;;;;AAWE;;;;;;;;AAOE;;;;;;AAUJ;;;;;;;AAQA;;;;;AAIE;;;;AAKF;;;;;;;;;;;;AAYE;;;;;AAMF;;;;;;;;AAWA;;;;;;AAOE;;;;AAKF;;;;;;AAMA;;;;;;AAMA;;;;AAIA;;;;;;;AAME;;;;AAKF;;;;;;;;AASE;;;;;AAKA;;;;;AAKA;;;;;;AAOA;;;;;;;;AAQA;;;;AAGE;;;;;;;;;;;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAkBF;;;;AAUF;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AAKA;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AAME;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAIA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAMA;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AAUA;;;;;AAIA;;;;AAMJ;;;;;;AAMA;;;;;;AAMA;;;;AAII;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAMJ;;;;;;AAYA;;;;;;;AASE;;;;AAKF;;;;;;;;AAME;;;;AAKF;;;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAME;;;;;;AAQE;;;;AAIA;;;;AAIA;;;;;;;;;;;;;;;AAoBJ;;;;;AAKA;;;;;AAUA;;;;;AAME;;;;;AAMF;EACE;;;;;;;;;;;;;;;;;;;EA0BM;;;;;;;EAUN;;;;EAGE","sources":["packages/@react-spectrum/list/src/styles.css"],"sourcesContent":["/*\n * Copyright 2022 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n*/\n\n.react-spectrum-ListView,\n.react-spectrum-ListViewItem {\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-85);\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-border-radius: calc(var(--spectrum-listview-border-radius) - var(--spectrum-listview-border-width));\n --spectrum-listview-row-sticky-focus-indicator-width: 3px;\n --spectrum-listview-item-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 --spectrum-listview-item-title-text-color: var(--spectrum-global-color-gray-800);\n --spectrum-listview-item-title-text-size: var(--spectrum-global-dimension-font-size-100);\n --spectrum-listview-item-description-text-color: var(--spectrum-global-color-gray-700);\n --spectrum-listview-item-description-text-size: var(--spectrum-global-dimension-font-size-75);\n\n --spectrum-listview-border-color: var(--spectrum-table-border-color, var(--spectrum-alias-border-color-mid));\n --spectrum-listview-border-color-key-focus: var(--spectrum-table-cell-border-color-key-focus, var(--spectrum-alias-focus-color));\n --spectrum-listview-background-color: var(--spectrum-table-background-color, var(--spectrum-global-color-gray-50));\n --spectrum-listview-item-background-color-hover: var(--spectrum-table-row-background-color-hover);\n --spectrum-listview-item-background-color-down: var(--spectrum-table-row-background-color-down);\n --spectrum-listview-item-background-color-selected: var(--spectrum-table-row-background-color-selected);\n --spectrum-listview-item-background-color-selected-hover: var(--spectrum-table-row-background-color-selected);\n --spectrum-listview-item-background-color-selected-key-focus: var(--spectrum-table-row-background-color-selected-key-focus);\n --spectrum-listview-item-border-color: var(--spectrum-table-cell-border-color, var(--spectrum-alias-border-color-mid));\n --spectrum-listview-item-border-color-selected: var(--spectrum-global-color-blue-500);\n --spectrum-listview-item-border-color-key-focus: var(--spectrum-table-cell-border-color-key-focus, var(--spectrum-alias-focus-color));\n --spectrum-listview-row-sticky-focus-indicator-color: var(--spectrum-selectlist-option-focus-indicator-color);\n --spectrum-listview-quiet-background-color: var(--spectrum-alias-background-color-transparent);\n --spectrum-listview-item-text-color: var(--spectrum-table-cell-text-color, var(--spectrum-alias-text-color));\n --spectrum-listview-item-text-color-disabled: var(--spectrum-alias-text-color-disabled);\n --spectrum-listview-droptarget-background-color: var(--spectrum-alias-highlight-selected);\n --spectrum-listview-dropindicator-border-color: var(--spectrum-dropindicator-border-color);\n --spectrum-listview-dropindicator-circle-border-color: var(--spectrum-dropindicator-circle-border-color);\n\n --spectrum-listview-dropindicator-circle-size: var(--spectrum-dropindicator-circle-size);\n --spectrum-listview-dropindicator-border-size: var(--spectrum-dropindicator-border-size);\n\n --spectrum-listview-dropzone-border-color-selected-hover: var(--spectrum-dropzone-border-color-selected-hover);\n --spectrum-listview-item-badge-text-color: var(--spectrum-global-color-static-white);\n --spectrum-listview-item-badge-background-color: var(--spectrum-global-color-blue-400);\n\n --spectrum-listview-item-draghandle-border-color-key-focus: var(--spectrum-listview-item-border-color-key-focus);\n}\n\n.react-spectrum-ListView {\n box-sizing: border-box;\n border-color: var(--spectrum-listview-border-color);\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-listview-background-color);\n outline: 0;\n user-select: none;\n\n .react-spectrum-ListView-row {\n outline: none;\n }\n\n &.react-spectrum-ListView--emphasized {\n &.react-spectrum-ListView--dropTarget {\n .react-spectrum-ListViewItem:not(.is-selected) {\n /* shift bottom border inwards so it doesn't overlap the root drop target */\n &:after {\n inset-inline-start: 1px;\n inset-inline-end: 1px;\n }\n }\n }\n .react-spectrum-ListViewItem {\n /* common pseudoelement for box shadows */\n &:after {\n content: '';\n display: block;\n position: absolute;\n inset-inline-start: 0;\n inset-inline-end: 0;\n inset-block-end: 0;\n inset-block-start: 0;\n z-index: 3;\n pointer-events: none;\n\n /* forced-color-adjust: none, so that box-shadow style will render */\n forced-color-adjust: none;\n }\n\n &.is-selected {\n background-color: var(--spectrum-listview-item-background-color-selected);\n &.is-hovered,\n &.is-active {\n background-color: var(--spectrum-listview-item-background-color-selected-hover);\n }\n\n &:focus-visible {\n background-color: var(--spectrum-listview-item-background-color-selected-key-focus);\n }\n\n /* Negative block start causes borders to actually be shared between items. Only works if we allow item overflow to be visible, like card focus rings. */\n &:after {\n inset-block-start: -1px;\n box-shadow:\n inset 1px 0 0 0 var(--spectrum-listview-item-border-color-selected),\n inset -1px 0 0 0 var(--spectrum-listview-item-border-color-selected),\n inset 0 -1px 0 0 var(--spectrum-listview-item-border-color-selected),\n inset 0 1px 0 0 var(--spectrum-listview-item-border-color-selected);\n }\n }\n\n /* First item in the ListView should not have a border that extends outside of itself to the top, it doesn't need to share a border space. */\n &.react-spectrum-ListViewItem--firstRow {\n &.is-selected {\n &:after {\n inset-block-start: 0px;\n }\n }\n }\n }\n\n &:not(.react-spectrum-ListView--quiet) {\n .react-spectrum-ListViewItem {\n /* Box shadow for bottom border for non-selected rows that aren't immediately above a selected row (grey border bottom). */\n /* Also omit bottom border for last row if the total content height of the ListView is equal or greater than the height of the container. This avoids overlapping bottom borders. */\n &:not(.is-selected):not(.is-next-selected):not(.react-spectrum-ListViewItem--isFlushBottom) {\n &:after {\n box-shadow: inset 0 -1px 0 0 var(--spectrum-listview-item-border-color);\n }\n }\n\n &.react-spectrum-ListViewItem--firstRow.is-selected {\n &:after {\n border-start-start-radius: var(--spectrum-listview-item-border-radius);\n border-start-end-radius: var(--spectrum-listview-item-border-radius);\n }\n }\n }\n\n &:not(.react-spectrum-ListView--loadingMore) {\n .react-spectrum-ListViewItem--lastRow.react-spectrum-ListViewItem--isFlushBottom.is-selected {\n &:after {\n border-end-start-radius: var(--spectrum-listview-item-border-radius);\n border-end-end-radius: var(--spectrum-listview-item-border-radius);\n }\n }\n }\n\n &.react-spectrum-ListView--isVerticalScrollbarVisible {\n .react-spectrum-ListViewItem {\n &.react-spectrum-ListViewItem--firstRow.is-selected {\n &:after {\n border-start-end-radius: 0;\n }\n }\n }\n\n &:not(.react-spectrum-ListView--loadingMore) {\n .react-spectrum-ListViewItem--lastRow.react-spectrum-ListViewItem--isFlushBottom.is-selected {\n &:after {\n border-end-end-radius: 0;\n }\n }\n }\n }\n\n &.react-spectrum-ListView--isHorizontalScrollbarVisible {\n &:not(.react-spectrum-ListView--loadingMore) {\n .react-spectrum-ListViewItem--lastRow.react-spectrum-ListViewItem--isFlushBottom.is-selected {\n &:after {\n border-end-start-radius: 0;\n border-end-end-radius: 0;\n }\n }\n }\n }\n }\n }\n &.react-spectrum-ListView--wrap .react-spectrum-ListViewItem {\n & .react-spectrum-ListViewItem-content,\n & .react-spectrum-ListViewItem-description {\n white-space: normal;\n height: auto;\n }\n }\n}\n\n.react-spectrum-ListView-row {\n cursor: default;\n /* Not sticky because listview is a single column. If we want to make sticky, will need a cell wrapper like TableView for display: inline-block */\n &:focus-visible {\n &:before {\n content: '';\n position: absolute;\n inset-block-start: 0;\n inset-block-end: 0;\n inset-inline-start: 0;\n width: var(--spectrum-listview-row-sticky-focus-indicator-width);\n z-index: 4;\n background: var(--spectrum-listview-row-sticky-focus-indicator-color);\n\n /* forced-color-adjust: none, so that background color will render for the sticky focus indicator. */\n forced-color-adjust: none;\n }\n }\n}\n\n.react-spectrum-ListView.react-spectrum-ListView--quiet {\n background-color: var(--spectrum-listview-quiet-background-color);\n border-width: 0;\n border-radius: 0;\n\n .react-spectrum-ListView-row {\n &.round-tops {\n &:focus-visible {\n &:before {\n border-start-start-radius: var(--spectrum-listview-item-border-radius);\n }\n }\n & > .react-spectrum-ListViewItem {\n border-start-start-radius: var(--spectrum-listview-item-border-radius);\n border-start-end-radius: var(--spectrum-listview-item-border-radius);\n\n &:after {\n border-start-start-radius: var(--spectrum-listview-item-border-radius);\n border-start-end-radius: var(--spectrum-listview-item-border-radius);\n }\n }\n }\n\n &.round-bottoms {\n &:focus-visible {\n &:before {\n border-end-start-radius: var(--spectrum-listview-item-border-radius);\n }\n }\n & > .react-spectrum-ListViewItem {\n border-end-start-radius: var(--spectrum-listview-item-border-radius);\n border-end-end-radius: var(--spectrum-listview-item-border-radius);\n\n &:after {\n border-end-start-radius: var(--spectrum-listview-item-border-radius);\n border-end-end-radius: var(--spectrum-listview-item-border-radius);\n }\n }\n }\n }\n}\n\n.react-spectrum-ListView-row[data-href] {\n cursor: pointer;\n}\n\n.react-spectrum-ListViewItem {\n display: grid; /* TODO: define grid areas */\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: var(--spectrum-listview-item-line-height);\n padding: var(--spectrum-listview-item-regular-padding-y) var(--spectrum-global-dimension-size-160);\n position: relative;\n /*background-color: var(--spectrum-table-background-color, var(--spectrum-global-color-gray-50));*/\n color: var(--spectrum-listview-item-text-color);\n outline: 0;\n min-height: var(--spectrum-global-dimension-size-500);\n\n &.is-hovered,\n &.is-focused {\n background-color: var(--spectrum-listview-item-background-color-hover);\n }\n\n &:focus-visible {\n background-color: var(--spectrum-listview-item-background-color-hover);\n }\n\n &.is-active {\n background-color: var(--spectrum-listview-item-background-color-down);\n }\n\n &.is-selected {\n background-color: var(--spectrum-listview-item-background-color-hover);\n\n &.is-hovered,\n &.is-active {\n background-color: var(--spectrum-listview-item-background-color-hover);\n }\n\n &:focus-visible {\n background-color: var(--spectrum-listview-item-background-color-selected-key-focus);\n }\n }\n\n &.is-disabled {\n &, .react-spectrum-ListViewItem-content, .react-spectrum-ListViewItem-description {\n color: var(--spectrum-listview-item-text-color-disabled);\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 .react-spectrum-ListViewItem-grid {\n display: grid;\n grid-template-columns: auto auto auto 1fr auto auto auto;\n grid-template-rows: 1fr auto;\n grid-template-areas:\n \"draghandle checkbox thumbnail content actions actionmenu chevron\"\n \"draghandle checkbox thumbnail description actions actionmenu chevron\";\n align-items: center;\n }\n\n .react-spectrum-ListViewItem-draghandle-container {\n grid-area: draghandle;\n width: var(--spectrum-global-dimension-size-250);\n display: flex;\n align-self: stretch;\n justify-self: stretch;\n justify-content: center;\n padding: var(--spectrum-global-dimension-size-25);\n padding-inline-start: var(--spectrum-global-dimension-size-40);\n\n\n .react-spectrum-ListViewItem-draghandle-button {\n width: var(--spectrum-global-dimension-size-200);\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: var(--spectrum-alias-border-radius-regular);\n\n &:focus-visible {\n box-shadow: inset 0 0 0 2px var(--spectrum-listview-item-draghandle-border-color-key-focus);\n outline: none;\n\n /* forced-color-adjust: none, so that box-shadow style will render */\n forced-color-adjust: none;\n }\n }\n }\n\n .react-spectrum-ListViewItem-checkboxWrapper {\n grid-area: checkbox;\n align-items: center;\n justify-items: center;\n transition-duration: 160ms;\n display: flex;\n }\n\n .react-spectrum-ListViewItem-checkbox {\n min-height: 0;\n height: 100%;\n\n > span {\n margin: 0;\n }\n }\n\n .react-spectrum-ListViewItem-thumbnail {\n box-sizing: content-box;\n grid-area: thumbnail;\n justify-items: center;\n padding-inline-end: var(--spectrum-global-dimension-size-100);\n display: flex;\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 align-items: center;\n justify-content: center;\n\n > img {\n width: unset;\n height: 100%;\n }\n }\n\n .react-spectrum-ListViewItem-content,\n .react-spectrum-ListViewItem-description {\n flex-grow: 1;\n\n /* truncate text with ellipsis */\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n height: var(--spectrum-listview-item-line-height);\n }\n\n .react-spectrum-ListViewItem-content {\n grid-area: content;\n color: var(--spectrum-listview-item-title-text-color);\n font-size: var(--spectrum-listview-item-title-text-size);\n }\n\n &:not(.react-spectrum-ListView--hasDescription) {\n .react-spectrum-ListViewItem-content {\n grid-area: content / description;\n }\n }\n\n .react-spectrum-ListViewItem-description {\n grid-area: description;\n color: var(--spectrum-listview-item-description-text-color);\n font-size: var(--spectrum-listview-item-description-text-size);\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-ListViewItem-parentIndicator {\n grid-area: chevron;\n padding-inline-start: var(--spectrum-global-dimension-size-75);\n display: none;\n transition: color var(--spectrum-global-animation-duration-100);\n\n &.is-disabled {\n color: var(--spectrum-alias-icon-color-disabled);\n }\n }\n\n &.react-spectrum-ListViewItem-dragPreview {\n width: var(--spectrum-global-dimension-size-2400);\n border: 1px solid var(--spectrum-listview-dropzone-border-color-selected-hover);\n border-radius: var(--spectrum-alias-border-radius-regular);\n background-color: var(--spectrum-listview-background-color);\n\n /* forced-color-adjust: none, so that background-color style will render */\n forced-color-adjust: none;\n\n &.react-spectrum-ListViewItem-dragPreview--compact {\n padding-top: var(--spectrum-listview-item-compact-padding-y);\n padding-bottom: var(--spectrum-listview-item-compact-padding-y);\n }\n\n &.react-spectrum-ListViewItem-dragPreview--spacious {\n padding-top: var(--spectrum-listview-item-spacious-padding-y);\n padding-bottom: var(--spectrum-listview-item-spacious-padding-y);\n }\n\n .react-spectrum-ListViewItem-grid {\n grid-template-areas:\n \"thumbnail content . badge\"\n \"thumbnail description . badge\";\n grid-template-columns: auto auto 1fr auto;\n }\n\n .react-spectrum-ListViewItem-badge {\n grid-area: badge;\n color: var(--spectrum-listview-item-badge-text-color);\n background: var(--spectrum-listview-item-badge-background-color);\n padding: 0 8px;\n border-radius: var(--spectrum-alias-border-radius-regular);\n }\n\n &.react-spectrum-ListViewItem-dragPreview--multiple {\n position: relative;\n\n &:after {\n content: '';\n display: block;\n position: absolute;\n z-index: -1;\n top: 4px;\n inset-inline-start: 4px;\n width: 100%;\n height: 100%;\n border: 1px solid var(--spectrum-listview-dropzone-border-color-selected-hover);\n border-radius: var(--spectrum-alias-border-radius-regular);\n background-color: var(--spectrum-listview-background-color);\n\n /* forced-color-adjust: none, so that box-shadow style will render */\n forced-color-adjust: none;\n }\n }\n\n .react-spectrum-ListViewItem-actions,\n .react-spectrum-ListViewItem-actionmenu {\n display: none;\n }\n }\n}\n.react-spectrum-ListView:not(.react-spectrum-ListView--quiet) {\n /* give first and last items border-radius to match listview container */\n\n .react-spectrum-ListViewItem--firstRow.react-spectrum-ListViewItem {\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\n .react-spectrum-ListViewItem--lastRow.react-spectrum-ListViewItem {\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 &.react-spectrum-ListView--isVerticalScrollbarVisible {\n .react-spectrum-ListViewItem--firstRow.react-spectrum-ListViewItem {\n border-start-end-radius: 0;\n }\n\n .react-spectrum-ListViewItem--lastRow.react-spectrum-ListViewItem {\n border-end-end-radius: 0;\n }\n }\n\n &.react-spectrum-ListView--isHorizontalScrollbarVisible {\n .react-spectrum-ListViewItem--lastRow.react-spectrum-ListViewItem {\n border-end-start-radius: 0;\n border-end-end-radius: 0;\n }\n }\n}\n\n.react-spectrum-ListView {\n /* When we can use subgrid, get rid of this. */\n &.react-spectrum-ListView--hasAnyChildren {\n .react-spectrum-ListViewItem-parentIndicator {\n display: inline-block;\n visibility: hidden;\n }\n .react-spectrum-ListViewItem-parentIndicator--hasChildItems {\n visibility: visible;\n }\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-ListView--draggable .react-spectrum-ListViewItem {\n padding-inline-start: 0;\n\n .react-spectrum-ListViewItem-checkbox {\n input {\n inset-inline-start: 0;\n }\n }\n}\n\n.react-spectrum-ListViewItem--dropTarget {\n background-color: var(--spectrum-listview-droptarget-background-color);\n box-shadow:\n inset 2px 0 0 0 var(--spectrum-listview-item-border-color-key-focus),\n inset -2px 0 0 0 var(--spectrum-listview-item-border-color-key-focus),\n inset 0 -3px 0 0 var(--spectrum-listview-item-border-color-key-focus),\n inset 0 2px 0 0 var(--spectrum-listview-item-border-color-key-focus);\n\n /* forced-color-adjust: none, so that box-shadow style will render */\n forced-color-adjust: none;\n}\n\n.react-spectrum-ListView.react-spectrum-ListView--dropTarget {\n border-color: var(--spectrum-listview-border-color-key-focus);\n background-color: var(--spectrum-listview-droptarget-background-color);\n box-shadow: inset 0 0 0 1px var(--spectrum-listview-item-border-color-key-focus);\n\n /* forced-color-adjust: none, so that box-shadow and background color styles will render */\n forced-color-adjust: none;\n\n /* Add border to quiet ListView only when it is a drop target */\n &.react-spectrum-ListView--quiet {\n box-shadow: inset 0 0 0 1px var(--spectrum-listview-item-border-color-key-focus), 0 0 0 1px var(--spectrum-listview-item-border-color-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 &.react-spectrum-ListView-centeredWrapper--loadingMore {\n padding-top: var(--spectrum-global-dimension-size-50);\n }\n}\n\n.react-spectrum-ListViewInsertionIndicator {\n width: calc(100% - (2 * var(--spectrum-listview-dropindicator-circle-size)));\n inset-inline-start: var(--spectrum-listview-dropindicator-circle-size);\n position: absolute;\n outline: none;\n\n &.react-spectrum-ListViewInsertionIndicator--dropTarget {\n background: var(--spectrum-listview-dropindicator-border-color);\n border-bottom: 2px solid var(--spectrum-listview-dropindicator-border-color);\n\n /* forced-color-adjust: none, so that background color\n will render border for insertion indicator. */\n forced-color-adjust: none;\n\n &:before {\n left: calc(var(--spectrum-listview-dropindicator-circle-size) * -1);\n }\n\n &:after {\n right: calc(var(--spectrum-listview-dropindicator-circle-size) * -1);\n }\n\n &:before,\n &:after {\n content: '';\n position: absolute;\n top: calc(var(--spectrum-listview-dropindicator-circle-size) * -1 / 2 + var(--spectrum-listview-dropindicator-border-size) / 2);\n width: var(--spectrum-listview-dropindicator-circle-size);\n height: var(--spectrum-listview-dropindicator-circle-size);\n border-radius: 50%;\n border: var(--spectrum-listview-dropindicator-border-size) solid;\n box-sizing: border-box;\n border-color: var(--spectrum-listview-dropindicator-circle-border-color);\n background-color: var(--spectrum-listview-background-color);\n z-index: 5;\n\n /* forced-color-adjust: none, so that box-shadow and background-color styles will render */\n forced-color-adjust: none;\n }\n }\n}\n\n.react-spectrum-ListViewItem-checkbox--enter {\n opacity: 0.01;\n max-width: 0px;\n}\n.react-spectrum-ListViewItem-checkbox--enterActive {\n opacity: 1;\n max-width: 80px;\n}\n.react-spectrum-ListViewItem-checkbox--exit {\n opacity: 1;\n max-width: 80px;\n}\n.react-spectrum-ListViewItem-checkbox--exitActive {\n opacity: 0.01;\n max-width: 0px;\n}\n\n.react-spectrum-ListView {\n &:focus-visible {\n border-color: var(--spectrum-listview-border-color-key-focus);\n box-shadow: inset 0 0 0 1px var(--spectrum-listview-border-color-key-focus);\n }\n}\n\n@media (forced-colors: active) {\n .react-spectrum-ListView,\n .react-spectrum-ListViewItem {\n --spectrum-listview-background-color: Canvas;\n --spectrum-listview-item-background-color: Canvas;\n --spectrum-listview-item-background-color-selected: Canvas;\n --spectrum-listview-border-color-key-focus: Highlight;\n --spectrum-listview-item-border-color: CanvasText;\n --spectrum-listview-item-border-color-selected: Highlight;\n --spectrum-listview-item-border-color-key-focus: Highlight;\n --spectrum-listview-row-sticky-focus-indicator-color: Highlight;\n --spectrum-listview-droptarget-background-color: var(--spectrum-alias-global-color-transparent);\n --spectrum-listview-dropindicator-border-color: Highlight;\n --spectrum-listview-dropindicator-circle-border-color: Highlight;\n --spectrum-listview-dropzone-border-color-selected-hover: Highlight;\n --spectrum-listview-item-badge-text-color: HighlightText;\n --spectrum-listview-item-badge-background-color: Highlight;\n --spectrum-listview-item-title-text-color: CanvasText;\n --spectrum-listview-item-description-text-color: CanvasText;\n }\n\n .react-spectrum-ListView-row {\n &:focus-visible {\n .react-spectrum-ListViewItem {\n /* Adds a full outline style to the focused listview item to better distinguish between\n the selected, not selected, selected + focused and selected + not focused\n states without using a background color on the row in forced-colors: active mode. */\n &:after {\n outline: var(--spectrum-listview-row-sticky-focus-indicator-width) solid var(--spectrum-listview-row-sticky-focus-indicator-color);\n outline-offset: calc(-1 * var(--spectrum-listview-row-sticky-focus-indicator-width));\n top: calc(-1 * var(--spectrum-listview-border-width));\n height: calc(100% + var(--spectrum-listview-border-width));\n }\n }\n }\n }\n\n .react-spectrum-ListViewItem-draghandle-container {\n box-sizing: content-box;\n\n .react-spectrum-ListViewItem-draghandle-button {\n /* Use CanvasText, so that focus ring color on drag handle button matches\n focus ring color for other interactive elements within the listview item. */\n --spectrum-listview-item-draghandle-border-color-key-focus: CanvasText;\n }\n }\n\n}\n"],"names":[],"version":3,"file":"module.css.map"}
package/dist/module.js CHANGED
@@ -1,4 +1,3 @@
1
- import "./main.css";
2
1
  import $a8be062dce739a7d$exports from "./ar-AE.module.js";
3
2
  import $ebee5026543c5714$exports from "./bg-BG.module.js";
4
3
  import $ec2dceffa5b2d037$exports from "./cs-CZ.module.js";
@@ -33,6 +32,7 @@ import $7af10700b945dced$exports from "./tr-TR.module.js";
33
32
  import $00a02749c6fa842b$exports from "./uk-UA.module.js";
34
33
  import $e3b2b7128a600af6$exports from "./zh-CN.module.js";
35
34
  import $8751d9847e270a98$exports from "./zh-TW.module.js";
35
+ import "./module.css";
36
36
  import {Item as $75e4a7b01832b12d$re_export$Item} from "@react-stately/collections";
37
37
  import {useGridList as $fWI2a$useGridList, useGridListItem as $fWI2a$useGridListItem, useGridListSelectionCheckbox as $fWI2a$useGridListSelectionCheckbox} from "@react-aria/gridlist";
38
38
  import {useDOMRef as $fWI2a$useDOMRef, useStyleProps as $fWI2a$useStyleProps, classNames as $fWI2a$classNames, useHasChild as $fWI2a$useHasChild, SlotProvider as $fWI2a$SlotProvider, ClearSlots as $fWI2a$ClearSlots} from "@react-spectrum/utils";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@react-spectrum/list",
3
- "version": "3.7.9-nightly.4494+361d47080",
3
+ "version": "3.7.9-nightly.4506+4608dc5c3",
4
4
  "description": "Spectrum UI components in React",
5
5
  "license": "Apache-2.0",
6
6
  "main": "dist/main.js",
@@ -36,34 +36,34 @@
36
36
  "url": "https://github.com/adobe/react-spectrum"
37
37
  },
38
38
  "dependencies": {
39
- "@react-aria/button": "3.0.0-nightly.2782+361d47080",
40
- "@react-aria/focus": "3.0.0-nightly.2782+361d47080",
41
- "@react-aria/gridlist": "3.7.6-nightly.4494+361d47080",
42
- "@react-aria/i18n": "3.0.0-nightly.2782+361d47080",
43
- "@react-aria/interactions": "3.0.0-nightly.2782+361d47080",
44
- "@react-aria/utils": "3.0.0-nightly.2782+361d47080",
45
- "@react-aria/virtualizer": "3.9.11-nightly.4494+361d47080",
46
- "@react-aria/visually-hidden": "3.0.0-nightly.2782+361d47080",
47
- "@react-spectrum/checkbox": "3.0.0-nightly.2782+361d47080",
48
- "@react-spectrum/dnd": "3.3.9-nightly.4494+361d47080",
49
- "@react-spectrum/layout": "3.6.4-nightly.4494+361d47080",
50
- "@react-spectrum/progress": "3.0.0-nightly.2782+361d47080",
51
- "@react-spectrum/text": "3.5.4-nightly.4494+361d47080",
52
- "@react-spectrum/utils": "3.0.0-nightly.2782+361d47080",
53
- "@react-stately/collections": "3.0.0-nightly.2782+361d47080",
54
- "@react-stately/layout": "3.13.8-nightly.4494+361d47080",
55
- "@react-stately/list": "3.10.4-nightly.4494+361d47080",
56
- "@react-types/grid": "3.2.5-nightly.4494+361d47080",
57
- "@react-types/shared": "3.0.0-nightly.2782+361d47080",
58
- "@spectrum-icons/ui": "3.0.0-nightly.2782+361d47080",
39
+ "@react-aria/button": "3.0.0-nightly.2794+4608dc5c3",
40
+ "@react-aria/focus": "3.0.0-nightly.2794+4608dc5c3",
41
+ "@react-aria/gridlist": "3.7.6-nightly.4506+4608dc5c3",
42
+ "@react-aria/i18n": "3.0.0-nightly.2794+4608dc5c3",
43
+ "@react-aria/interactions": "3.0.0-nightly.2794+4608dc5c3",
44
+ "@react-aria/utils": "3.0.0-nightly.2794+4608dc5c3",
45
+ "@react-aria/virtualizer": "3.9.11-nightly.4506+4608dc5c3",
46
+ "@react-aria/visually-hidden": "3.0.0-nightly.2794+4608dc5c3",
47
+ "@react-spectrum/checkbox": "3.0.0-nightly.2794+4608dc5c3",
48
+ "@react-spectrum/dnd": "3.3.9-nightly.4506+4608dc5c3",
49
+ "@react-spectrum/layout": "3.6.4-nightly.4506+4608dc5c3",
50
+ "@react-spectrum/progress": "3.0.0-nightly.2794+4608dc5c3",
51
+ "@react-spectrum/text": "3.5.4-nightly.4506+4608dc5c3",
52
+ "@react-spectrum/utils": "3.0.0-nightly.2794+4608dc5c3",
53
+ "@react-stately/collections": "3.0.0-nightly.2794+4608dc5c3",
54
+ "@react-stately/layout": "3.13.8-nightly.4506+4608dc5c3",
55
+ "@react-stately/list": "3.10.4-nightly.4506+4608dc5c3",
56
+ "@react-types/grid": "3.2.5-nightly.4506+4608dc5c3",
57
+ "@react-types/shared": "3.0.0-nightly.2794+4608dc5c3",
58
+ "@spectrum-icons/ui": "3.0.0-nightly.2794+4608dc5c3",
59
59
  "@swc/helpers": "^0.5.0",
60
60
  "react-transition-group": "^4.4.5"
61
61
  },
62
62
  "devDependencies": {
63
- "@adobe/spectrum-css-temp": "3.0.0-nightly.2782+361d47080",
64
- "@react-aria/dnd": "3.5.4-nightly.4494+361d47080",
65
- "@react-spectrum/button": "3.0.0-nightly.2782+361d47080",
66
- "@react-stately/dnd": "3.2.9-nightly.4494+361d47080"
63
+ "@adobe/spectrum-css-temp": "3.0.0-nightly.2794+4608dc5c3",
64
+ "@react-aria/dnd": "3.5.4-nightly.4506+4608dc5c3",
65
+ "@react-spectrum/button": "3.0.0-nightly.2794+4608dc5c3",
66
+ "@react-stately/dnd": "3.2.9-nightly.4506+4608dc5c3"
67
67
  },
68
68
  "peerDependencies": {
69
69
  "@react-spectrum/provider": "^3.2.0",
@@ -73,5 +73,5 @@
73
73
  "publishConfig": {
74
74
  "access": "public"
75
75
  },
76
- "gitHead": "361d47080c79e4d52ee287078b9e3c27ed312f2e"
76
+ "gitHead": "4608dc5c390e87bec882a1c8ecd0e585fcf6b404"
77
77
  }