@adobe/react-spectrum 3.47.0 → 3.47.1

package/dist/private/list/styles_css.mjs.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@adobe/react-spectrum/src/list/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":"styles_css.mjs.map"}
+{"mappings":"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","sources":["packages/@adobe/react-spectrum/src/list/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(\n    --spectrum-table-border-size,\n    var(--spectrum-alias-border-size-thin)\n  );\n  --spectrum-listview-border-radius: var(\n    --spectrum-table-border-radius,\n    var(--spectrum-alias-border-radius-regular)\n  );\n  --spectrum-listview-item-border-radius: calc(\n    var(--spectrum-listview-border-radius) - var(--spectrum-listview-border-width)\n  );\n  --spectrum-listview-row-sticky-focus-indicator-width: 3px;\n  --spectrum-listview-item-line-height: calc(\n    var(--spectrum-table-cell-text-size, var(--spectrum-alias-font-size-default)) *\n      var(--spectrum-table-cell-text-line-height, var(--spectrum-alias-body-text-line-height)) - 1px\n  );\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(\n    --spectrum-table-border-color,\n    var(--spectrum-alias-border-color-mid)\n  );\n  --spectrum-listview-border-color-key-focus: var(\n    --spectrum-table-cell-border-color-key-focus,\n    var(--spectrum-alias-focus-color)\n  );\n  --spectrum-listview-background-color: var(\n    --spectrum-table-background-color,\n    var(--spectrum-global-color-gray-50)\n  );\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(\n    --spectrum-table-row-background-color-selected\n  );\n  --spectrum-listview-item-background-color-selected-hover: var(\n    --spectrum-table-row-background-color-selected\n  );\n  --spectrum-listview-item-background-color-selected-key-focus: var(\n    --spectrum-table-row-background-color-selected-key-focus\n  );\n  --spectrum-listview-item-border-color: var(\n    --spectrum-table-cell-border-color,\n    var(--spectrum-alias-border-color-mid)\n  );\n  --spectrum-listview-item-border-color-selected: var(--spectrum-global-color-blue-500);\n  --spectrum-listview-item-border-color-key-focus: var(\n    --spectrum-table-cell-border-color-key-focus,\n    var(--spectrum-alias-focus-color)\n  );\n  --spectrum-listview-row-sticky-focus-indicator-color: var(\n    --spectrum-selectlist-option-focus-indicator-color\n  );\n  --spectrum-listview-quiet-background-color: var(--spectrum-alias-background-color-transparent);\n  --spectrum-listview-item-text-color: var(\n    --spectrum-table-cell-text-color,\n    var(--spectrum-alias-text-color)\n  );\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(\n    --spectrum-dropindicator-circle-border-color\n  );\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(\n    --spectrum-dropzone-border-color-selected-hover\n  );\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(\n    --spectrum-listview-item-border-color-key-focus\n  );\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(\n            .react-spectrum-ListViewItem--isFlushBottom\n          ) {\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(\n    --spectrum-table-cell-text-font-weight,\n    var(--spectrum-global-font-weight-regular)\n  );\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    &,\n    .react-spectrum-ListViewItem-content,\n    .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    .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:\n      inset 0 0 0 1px var(--spectrum-listview-item-border-color-key-focus),\n      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(\n        var(--spectrum-listview-dropindicator-circle-size) * -1 / 2 +\n          var(--spectrum-listview-dropindicator-border-size) / 2\n      );\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\n            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"],"names":[],"version":3,"file":"styles_css.mjs.map"}

package/dist/private/listbox/ListBox.cjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;AAeM,MAAM,0DAAU,CAAA,GAAA,sCAAI,EAAE,UAAU,CAAC,SAAS,QAA0B,KAA8B,EAAE,GAA2B;IACpI,IAAI,QAAQ,CAAA,GAAA,4CAAW,EAAE;IACzB,IAAI,SAAS,CAAA,GAAA,0CAAe;IAC5B,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IAEvB,qBACE,0DAAC,CAAA,GAAA,qCAAU;QACR,GAAG,KAAK;QACT,KAAK;QACL,OAAO;QACP,QAAQ;;AAEd","sources":["packages/@adobe/react-spectrum/src/listbox/ListBox.tsx"],"sourcesContent":["/*\n * Copyright 2020 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\nimport {DOMRef} from '@react-types/shared';\nimport {ListBoxBase, SpectrumListBoxProps, useListBoxLayout} from './ListBoxBase';\nimport React, {ReactElement} from 'react';\nimport {useDOMRef} from '../utils/useDOMRef';\nimport {useListState} from 'react-stately/useListState';\n\n// forwardRef doesn't support generic parameters, so cast the result to the correct type\n// https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref\n\n\n/**\n * A list of options that can allow selection of one or more.\n */\nexport const ListBox = React.forwardRef(function ListBox<T extends object>(props: SpectrumListBoxProps<T>, ref: DOMRef<HTMLDivElement>) {\n  let state = useListState(props);\n  let layout = useListBoxLayout();\n  let domRef = useDOMRef(ref);\n\n  return (\n    <ListBoxBase\n      {...props}\n      ref={domRef}\n      state={state}\n      layout={layout} />\n  );\n}) as <T>(props: SpectrumListBoxProps<T> & {ref?: DOMRef<HTMLDivElement>}) => ReactElement;\n"],"names":[],"version":3,"file":"ListBox.cjs.map"}
+{"mappings":";;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;AAcM,MAAM,0DAAU,CAAA,GAAA,sCAAI,EAAE,UAAU,CAAC,SAAS,QAC/C,KAA8B,EAC9B,GAA2B;IAE3B,IAAI,QAAQ,CAAA,GAAA,4CAAW,EAAE;IACzB,IAAI,SAAS,CAAA,GAAA,0CAAe;IAC5B,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IAEvB,qBAAO,0DAAC,CAAA,GAAA,qCAAU;QAAG,GAAG,KAAK;QAAE,KAAK;QAAQ,OAAO;QAAO,QAAQ;;AACpE","sources":["packages/@adobe/react-spectrum/src/listbox/ListBox.tsx"],"sourcesContent":["/*\n * Copyright 2020 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\nimport {DOMRef} from '@react-types/shared';\nimport {ListBoxBase, SpectrumListBoxProps, useListBoxLayout} from './ListBoxBase';\nimport React, {ReactElement} from 'react';\nimport {useDOMRef} from '../utils/useDOMRef';\nimport {useListState} from 'react-stately/useListState';\n\n// forwardRef doesn't support generic parameters, so cast the result to the correct type\n// https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref\n\n/**\n * A list of options that can allow selection of one or more.\n */\nexport const ListBox = React.forwardRef(function ListBox<T extends object>(\n  props: SpectrumListBoxProps<T>,\n  ref: DOMRef<HTMLDivElement>\n) {\n  let state = useListState(props);\n  let layout = useListBoxLayout();\n  let domRef = useDOMRef(ref);\n\n  return <ListBoxBase {...props} ref={domRef} state={state} layout={layout} />;\n}) as <T>(props: SpectrumListBoxProps<T> & {ref?: DOMRef<HTMLDivElement>}) => ReactElement;\n"],"names":[],"version":3,"file":"ListBox.cjs.map"}

package/dist/private/listbox/ListBox.js.map

@@ -1 +1 @@
-{"mappings":";;;;;AAAA;;;;;;;;;;CAUC;;;;AAeM,MAAM,0DAAU,CAAA,GAAA,YAAI,EAAE,UAAU,CAAC,SAAS,QAA0B,KAA8B,EAAE,GAA2B;IACpI,IAAI,QAAQ,CAAA,GAAA,mBAAW,EAAE;IACzB,IAAI,SAAS,CAAA,GAAA,yCAAe;IAC5B,IAAI,SAAS,CAAA,GAAA,yCAAQ,EAAE;IAEvB,qBACE,gCAAC,CAAA,GAAA,yCAAU;QACR,GAAG,KAAK;QACT,KAAK;QACL,OAAO;QACP,QAAQ;;AAEd","sources":["packages/@adobe/react-spectrum/src/listbox/ListBox.tsx"],"sourcesContent":["/*\n * Copyright 2020 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\nimport {DOMRef} from '@react-types/shared';\nimport {ListBoxBase, SpectrumListBoxProps, useListBoxLayout} from './ListBoxBase';\nimport React, {ReactElement} from 'react';\nimport {useDOMRef} from '../utils/useDOMRef';\nimport {useListState} from 'react-stately/useListState';\n\n// forwardRef doesn't support generic parameters, so cast the result to the correct type\n// https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref\n\n\n/**\n * A list of options that can allow selection of one or more.\n */\nexport const ListBox = React.forwardRef(function ListBox<T extends object>(props: SpectrumListBoxProps<T>, ref: DOMRef<HTMLDivElement>) {\n  let state = useListState(props);\n  let layout = useListBoxLayout();\n  let domRef = useDOMRef(ref);\n\n  return (\n    <ListBoxBase\n      {...props}\n      ref={domRef}\n      state={state}\n      layout={layout} />\n  );\n}) as <T>(props: SpectrumListBoxProps<T> & {ref?: DOMRef<HTMLDivElement>}) => ReactElement;\n"],"names":[],"version":3,"file":"ListBox.js.map"}
+{"mappings":";;;;;AAAA;;;;;;;;;;CAUC;;;;AAcM,MAAM,0DAAU,CAAA,GAAA,YAAI,EAAE,UAAU,CAAC,SAAS,QAC/C,KAA8B,EAC9B,GAA2B;IAE3B,IAAI,QAAQ,CAAA,GAAA,mBAAW,EAAE;IACzB,IAAI,SAAS,CAAA,GAAA,yCAAe;IAC5B,IAAI,SAAS,CAAA,GAAA,yCAAQ,EAAE;IAEvB,qBAAO,gCAAC,CAAA,GAAA,yCAAU;QAAG,GAAG,KAAK;QAAE,KAAK;QAAQ,OAAO;QAAO,QAAQ;;AACpE","sources":["packages/@adobe/react-spectrum/src/listbox/ListBox.tsx"],"sourcesContent":["/*\n * Copyright 2020 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\nimport {DOMRef} from '@react-types/shared';\nimport {ListBoxBase, SpectrumListBoxProps, useListBoxLayout} from './ListBoxBase';\nimport React, {ReactElement} from 'react';\nimport {useDOMRef} from '../utils/useDOMRef';\nimport {useListState} from 'react-stately/useListState';\n\n// forwardRef doesn't support generic parameters, so cast the result to the correct type\n// https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref\n\n/**\n * A list of options that can allow selection of one or more.\n */\nexport const ListBox = React.forwardRef(function ListBox<T extends object>(\n  props: SpectrumListBoxProps<T>,\n  ref: DOMRef<HTMLDivElement>\n) {\n  let state = useListState(props);\n  let layout = useListBoxLayout();\n  let domRef = useDOMRef(ref);\n\n  return <ListBoxBase {...props} ref={domRef} state={state} layout={layout} />;\n}) as <T>(props: SpectrumListBoxProps<T> & {ref?: DOMRef<HTMLDivElement>}) => ReactElement;\n"],"names":[],"version":3,"file":"ListBox.js.map"}

package/dist/private/listbox/ListBox.mjs.map

@@ -1 +1 @@
-{"mappings":";;;;;AAAA;;;;;;;;;;CAUC;;;;AAeM,MAAM,0DAAU,CAAA,GAAA,YAAI,EAAE,UAAU,CAAC,SAAS,QAA0B,KAA8B,EAAE,GAA2B;IACpI,IAAI,QAAQ,CAAA,GAAA,mBAAW,EAAE;IACzB,IAAI,SAAS,CAAA,GAAA,yCAAe;IAC5B,IAAI,SAAS,CAAA,GAAA,yCAAQ,EAAE;IAEvB,qBACE,gCAAC,CAAA,GAAA,yCAAU;QACR,GAAG,KAAK;QACT,KAAK;QACL,OAAO;QACP,QAAQ;;AAEd","sources":["packages/@adobe/react-spectrum/src/listbox/ListBox.tsx"],"sourcesContent":["/*\n * Copyright 2020 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\nimport {DOMRef} from '@react-types/shared';\nimport {ListBoxBase, SpectrumListBoxProps, useListBoxLayout} from './ListBoxBase';\nimport React, {ReactElement} from 'react';\nimport {useDOMRef} from '../utils/useDOMRef';\nimport {useListState} from 'react-stately/useListState';\n\n// forwardRef doesn't support generic parameters, so cast the result to the correct type\n// https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref\n\n\n/**\n * A list of options that can allow selection of one or more.\n */\nexport const ListBox = React.forwardRef(function ListBox<T extends object>(props: SpectrumListBoxProps<T>, ref: DOMRef<HTMLDivElement>) {\n  let state = useListState(props);\n  let layout = useListBoxLayout();\n  let domRef = useDOMRef(ref);\n\n  return (\n    <ListBoxBase\n      {...props}\n      ref={domRef}\n      state={state}\n      layout={layout} />\n  );\n}) as <T>(props: SpectrumListBoxProps<T> & {ref?: DOMRef<HTMLDivElement>}) => ReactElement;\n"],"names":[],"version":3,"file":"ListBox.mjs.map"}
+{"mappings":";;;;;AAAA;;;;;;;;;;CAUC;;;;AAcM,MAAM,0DAAU,CAAA,GAAA,YAAI,EAAE,UAAU,CAAC,SAAS,QAC/C,KAA8B,EAC9B,GAA2B;IAE3B,IAAI,QAAQ,CAAA,GAAA,mBAAW,EAAE;IACzB,IAAI,SAAS,CAAA,GAAA,yCAAe;IAC5B,IAAI,SAAS,CAAA,GAAA,yCAAQ,EAAE;IAEvB,qBAAO,gCAAC,CAAA,GAAA,yCAAU;QAAG,GAAG,KAAK;QAAE,KAAK;QAAQ,OAAO;QAAO,QAAQ;;AACpE","sources":["packages/@adobe/react-spectrum/src/listbox/ListBox.tsx"],"sourcesContent":["/*\n * Copyright 2020 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\nimport {DOMRef} from '@react-types/shared';\nimport {ListBoxBase, SpectrumListBoxProps, useListBoxLayout} from './ListBoxBase';\nimport React, {ReactElement} from 'react';\nimport {useDOMRef} from '../utils/useDOMRef';\nimport {useListState} from 'react-stately/useListState';\n\n// forwardRef doesn't support generic parameters, so cast the result to the correct type\n// https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref\n\n/**\n * A list of options that can allow selection of one or more.\n */\nexport const ListBox = React.forwardRef(function ListBox<T extends object>(\n  props: SpectrumListBoxProps<T>,\n  ref: DOMRef<HTMLDivElement>\n) {\n  let state = useListState(props);\n  let layout = useListBoxLayout();\n  let domRef = useDOMRef(ref);\n\n  return <ListBoxBase {...props} ref={domRef} state={state} layout={layout} />;\n}) as <T>(props: SpectrumListBoxProps<T> & {ref?: DOMRef<HTMLDivElement>}) => ReactElement;\n"],"names":[],"version":3,"file":"ListBox.mjs.map"}

package/dist/private/listbox/ListBoxBase.cjs

@@ -137,7 +137,9 @@ const $cb7ee1d9d5613db9$export$1afdcf349979fb7e = /*#__PURE__*/ (0, ($parcel$int
 function $cb7ee1d9d5613db9$var$LoadingState() {
     let { state: state } = (0, $jqD6t$react.useContext)((0, $b02f16a34f83c86b$exports.ListBoxContext));
     let stringFormatter = (0, $jqD6t$reactariauseLocalizedStringFormatter.useLocalizedStringFormatter)((0, ($parcel$interopDefault($daca6c13ca89ba55$exports))), '@react-spectrum/listbox');
-    return /*#__PURE__*/ (0, ($parcel$interopDefault($jqD6t$react))).createElement("div", {
+    return(// aria-selected isn't needed here since this option is not selectable.
+    /*#__PURE__*/ (0, ($parcel$interopDefault($jqD6t$react))).createElement("div", {
+        // eslint-disable-next-line jsx-a11y/role-has-required-aria-props
         role: "option",
         style: {
             display: 'flex',
@@ -150,7 +152,7 @@ function $cb7ee1d9d5613db9$var$LoadingState() {
         size: "S",
         "aria-label": state.collection.size > 0 ? stringFormatter.format('loadingMore') : stringFormatter.format('loading'),
         UNSAFE_className: (0, $69fd630bd812ba47$exports.classNames)((0, ($parcel$interopDefault($35d34152ff885d5c$exports))), 'spectrum-Dropdown-progressCircle')
-    }));
+    })));
 }
 function $cb7ee1d9d5613db9$var$EmptyState() {
     let { renderEmptyState: renderEmptyState } = (0, $jqD6t$react.useContext)((0, $b02f16a34f83c86b$exports.ListBoxContext));

package/dist/private/listbox/ListBoxBase.cjs.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@adobe/react-spectrum/src/listbox/ListBoxBase.tsx"],"sourcesContent":["/*\n * Copyright 2020 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\nimport {AriaLabelingProps, AsyncLoadable, DOMProps, FocusStrategy, Node, RefObject, StyleProps} from '@react-types/shared';\nimport {AriaListBoxOptions, AriaListBoxPropsBase, useListBox} from 'react-aria/useListBox';\nimport {classNames} from '../utils/classNames';\nimport {FocusScope} from 'react-aria/FocusScope';\nimport intlMessages from '../../intl/listbox/*.json';\n// @ts-ignore\nimport {ListBoxContext} from './ListBoxContext';\nimport {ListBoxLayout} from './ListBoxLayout';\nimport {ListBoxOption} from './ListBoxOption';\nimport {ListBoxSection} from './ListBoxSection';\nimport {ListState} from 'react-stately/useListState';\nimport {mergeProps} from 'react-aria/mergeProps';\nimport {ProgressCircle} from '../progress/ProgressCircle';\nimport React, {ForwardedRef, HTMLAttributes, ReactElement, ReactNode, useCallback, useContext, useMemo} from 'react';\nimport {ReusableView} from 'react-stately/useVirtualizerState';\nimport styles from '@adobe/spectrum-css-temp/components/menu/vars.css';\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\nimport {useObjectRef} from 'react-aria/useObjectRef';\nimport {useProvider} from '../provider/Provider';\nimport {useStyleProps} from '../utils/styleProps';\nimport {Virtualizer} from 'react-aria/private/virtualizer/Virtualizer';\nimport {VirtualizerItem} from 'react-aria/private/virtualizer/VirtualizerItem';\n\nexport interface SpectrumListBoxProps<T> extends AriaListBoxPropsBase<T>, AsyncLoadable, StyleProps {}\n\ninterface ListBoxBaseProps<T> extends AriaListBoxOptions<T>, DOMProps, AriaLabelingProps, StyleProps {\n  layout: ListBoxLayout<T>,\n  state: ListState<T>,\n  autoFocus?: boolean | FocusStrategy,\n  shouldFocusWrap?: boolean,\n  shouldSelectOnPressUp?: boolean,\n  focusOnPointerEnter?: boolean,\n  domProps?: HTMLAttributes<HTMLElement>,\n  disallowEmptySelection?: boolean,\n  shouldUseVirtualFocus?: boolean,\n  isLoading?: boolean,\n  showLoadingSpinner?: boolean,\n  onLoadMore?: () => void,\n  renderEmptyState?: () => ReactNode,\n  onScroll?: () => void\n}\n\n/** @private */\nexport function useListBoxLayout<T>(): ListBoxLayout<T> {\n  let {scale} = useProvider();\n  let layout = useMemo(() =>\n    new ListBoxLayout<T>({\n      estimatedRowHeight: scale === 'large' ? 48 : 32,\n      estimatedHeadingHeight: scale === 'large' ? 33 : 26,\n      paddingY: scale === 'large' ? 5 : 4, // TODO: get from DNA\n      placeholderHeight: scale === 'large' ? 48 : 32\n    })\n  , [scale]);\n\n  return layout;\n}\n\n// forwardRef doesn't support generic parameters, so cast the result to the correct type\n// https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref\n/** @private */\nexport const ListBoxBase = React.forwardRef(function ListBoxBase<T extends object>(props: ListBoxBaseProps<T>, ref: ForwardedRef<HTMLDivElement | null>) {\n  let {layout, state, shouldFocusOnHover = false, shouldUseVirtualFocus = false, domProps = {}, isLoading, showLoadingSpinner = isLoading, onScroll, renderEmptyState} = props;\n  let objectRef = useObjectRef(ref);\n  let {listBoxProps} = useListBox({\n    ...props,\n    layoutDelegate: layout,\n    isVirtualized: true\n  }, state, objectRef);\n  let {styleProps} = useStyleProps(props);\n\n  // This overrides collection view's renderWrapper to support hierarchy of items in sections.\n  // The header is extracted from the children so it can receive ARIA labeling properties.\n  type View = ReusableView<Node<T>, ReactNode>;\n  let renderWrapper = useCallback((parent: View | null, reusableView: View, children: View[], renderChildren: (views: View[]) => ReactElement[]) => {\n    if (reusableView.viewType === 'section') {\n      return (\n        <ListBoxSection\n          key={reusableView.key}\n          item={reusableView.content!}\n          layoutInfo={reusableView.layoutInfo!}\n          virtualizer={reusableView.virtualizer}\n          headerLayoutInfo={children.find(c => c.viewType === 'header')?.layoutInfo ?? null}>\n          {renderChildren(children.filter(c => c.viewType === 'item'))}\n        </ListBoxSection>\n      );\n    }\n\n    return (\n      <VirtualizerItem\n        key={reusableView.key}\n        layoutInfo={reusableView.layoutInfo!}\n        virtualizer={reusableView.virtualizer}\n        parent={parent?.layoutInfo}>\n        {reusableView.rendered}\n      </VirtualizerItem>\n    );\n  }, []);\n\n  let focusedKey = state.selectionManager.focusedKey;\n  let persistedKeys = useMemo(() => focusedKey != null ? new Set([focusedKey]) : null, [focusedKey]);\n\n  return (\n    <ListBoxContext.Provider value={{state, renderEmptyState, shouldFocusOnHover, shouldUseVirtualFocus}}>\n      <FocusScope>\n        <Virtualizer\n          {...styleProps}\n          {...mergeProps(listBoxProps, domProps)}\n          ref={objectRef}\n          persistedKeys={persistedKeys}\n          autoFocus={!!props.autoFocus || undefined}\n          scrollDirection=\"vertical\"\n          className={\n            classNames(\n              styles,\n              'spectrum-Menu',\n              styleProps.className\n            )\n          }\n          layout={layout}\n          layoutOptions={useMemo(() => ({\n            isLoading: showLoadingSpinner\n          }), [showLoadingSpinner])}\n          collection={state.collection}\n          renderWrapper={renderWrapper}\n          isLoading={isLoading}\n          onLoadMore={props.onLoadMore}\n          onScroll={onScroll}>\n          {useCallback((type, item: Node<T>): ReactNode => {\n            if (type === 'item') {\n              return <ListBoxOption item={item} />;\n            } else if (type === 'loader') {\n              return <LoadingState />;\n            } else if (type === 'placeholder') {\n              return <EmptyState />;\n            } else {\n              return null;\n            }\n          }, [])}\n        </Virtualizer>\n      </FocusScope>\n    </ListBoxContext.Provider>\n  );\n}) as <T>(props: ListBoxBaseProps<T> & {ref?: RefObject<HTMLDivElement | null>}) => ReactElement;\n\nfunction LoadingState() {\n  let {state} = useContext(ListBoxContext)!;\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/listbox');\n  return (\n    // aria-selected isn't needed here since this option is not selectable.\n    // eslint-disable-next-line jsx-a11y/role-has-required-aria-props\n    (<div role=\"option\" style={{display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%'}}>\n      <ProgressCircle\n        isIndeterminate\n        size=\"S\"\n        aria-label={state.collection.size > 0 ? stringFormatter.format('loadingMore') : stringFormatter.format('loading')}\n        UNSAFE_className={classNames(styles, 'spectrum-Dropdown-progressCircle')} />\n    </div>)\n  );\n}\n\nfunction EmptyState() {\n  let {renderEmptyState} = useContext(ListBoxContext)!;\n  let emptyState = renderEmptyState ? renderEmptyState() : null;\n  if (emptyState == null) {\n    return null;\n  }\n\n  return (\n    <div\n      // aria-selected isn't needed here since this option is not selectable.\n      // eslint-disable-next-line jsx-a11y/role-has-required-aria-props\n      role=\"option\">\n      {emptyState}\n    </div>\n  );\n}\n"],"names":[],"version":3,"file":"ListBoxBase.cjs.map"}
+{"mappings":"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","sources":["packages/@adobe/react-spectrum/src/listbox/ListBoxBase.tsx"],"sourcesContent":["/*\n * Copyright 2020 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\nimport {\n  AriaLabelingProps,\n  AsyncLoadable,\n  DOMProps,\n  FocusStrategy,\n  Node,\n  RefObject,\n  StyleProps\n} from '@react-types/shared';\nimport {AriaListBoxOptions, AriaListBoxPropsBase, useListBox} from 'react-aria/useListBox';\nimport {classNames} from '../utils/classNames';\nimport {FocusScope} from 'react-aria/FocusScope';\nimport intlMessages from '../../intl/listbox/*.json';\n// @ts-ignore\nimport {ListBoxContext} from './ListBoxContext';\nimport {ListBoxLayout} from './ListBoxLayout';\nimport {ListBoxOption} from './ListBoxOption';\nimport {ListBoxSection} from './ListBoxSection';\nimport {ListState} from 'react-stately/useListState';\nimport {mergeProps} from 'react-aria/mergeProps';\nimport {ProgressCircle} from '../progress/ProgressCircle';\nimport React, {\n  ForwardedRef,\n  HTMLAttributes,\n  ReactElement,\n  ReactNode,\n  useCallback,\n  useContext,\n  useMemo\n} from 'react';\nimport {ReusableView} from 'react-stately/useVirtualizerState';\nimport styles from '@adobe/spectrum-css-temp/components/menu/vars.css';\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\nimport {useObjectRef} from 'react-aria/useObjectRef';\nimport {useProvider} from '../provider/Provider';\nimport {useStyleProps} from '../utils/styleProps';\nimport {Virtualizer} from 'react-aria/private/virtualizer/Virtualizer';\nimport {VirtualizerItem} from 'react-aria/private/virtualizer/VirtualizerItem';\n\nexport interface SpectrumListBoxProps<T>\n  extends AriaListBoxPropsBase<T>, AsyncLoadable, StyleProps {}\n\ninterface ListBoxBaseProps<T>\n  extends AriaListBoxOptions<T>, DOMProps, AriaLabelingProps, StyleProps {\n  layout: ListBoxLayout<T>;\n  state: ListState<T>;\n  autoFocus?: boolean | FocusStrategy;\n  shouldFocusWrap?: boolean;\n  shouldSelectOnPressUp?: boolean;\n  focusOnPointerEnter?: boolean;\n  domProps?: HTMLAttributes<HTMLElement>;\n  disallowEmptySelection?: boolean;\n  shouldUseVirtualFocus?: boolean;\n  isLoading?: boolean;\n  showLoadingSpinner?: boolean;\n  onLoadMore?: () => void;\n  renderEmptyState?: () => ReactNode;\n  onScroll?: () => void;\n}\n\n/** @private */\nexport function useListBoxLayout<T>(): ListBoxLayout<T> {\n  let {scale} = useProvider();\n  let layout = useMemo(\n    () =>\n      new ListBoxLayout<T>({\n        estimatedRowHeight: scale === 'large' ? 48 : 32,\n        estimatedHeadingHeight: scale === 'large' ? 33 : 26,\n        paddingY: scale === 'large' ? 5 : 4, // TODO: get from DNA\n        placeholderHeight: scale === 'large' ? 48 : 32\n      }),\n    [scale]\n  );\n\n  return layout;\n}\n\n// forwardRef doesn't support generic parameters, so cast the result to the correct type\n// https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref\n/** @private */\nexport const ListBoxBase = React.forwardRef(function ListBoxBase<T extends object>(\n  props: ListBoxBaseProps<T>,\n  ref: ForwardedRef<HTMLDivElement | null>\n) {\n  let {\n    layout,\n    state,\n    shouldFocusOnHover = false,\n    shouldUseVirtualFocus = false,\n    domProps = {},\n    isLoading,\n    showLoadingSpinner = isLoading,\n    onScroll,\n    renderEmptyState\n  } = props;\n  let objectRef = useObjectRef(ref);\n  let {listBoxProps} = useListBox(\n    {\n      ...props,\n      layoutDelegate: layout,\n      isVirtualized: true\n    },\n    state,\n    objectRef\n  );\n  let {styleProps} = useStyleProps(props);\n\n  // This overrides collection view's renderWrapper to support hierarchy of items in sections.\n  // The header is extracted from the children so it can receive ARIA labeling properties.\n  type View = ReusableView<Node<T>, ReactNode>;\n  let renderWrapper = useCallback(\n    (\n      parent: View | null,\n      reusableView: View,\n      children: View[],\n      renderChildren: (views: View[]) => ReactElement[]\n    ) => {\n      if (reusableView.viewType === 'section') {\n        return (\n          <ListBoxSection\n            key={reusableView.key}\n            item={reusableView.content!}\n            layoutInfo={reusableView.layoutInfo!}\n            virtualizer={reusableView.virtualizer}\n            headerLayoutInfo={children.find(c => c.viewType === 'header')?.layoutInfo ?? null}>\n            {renderChildren(children.filter(c => c.viewType === 'item'))}\n          </ListBoxSection>\n        );\n      }\n\n      return (\n        <VirtualizerItem\n          key={reusableView.key}\n          layoutInfo={reusableView.layoutInfo!}\n          virtualizer={reusableView.virtualizer}\n          parent={parent?.layoutInfo}>\n          {reusableView.rendered}\n        </VirtualizerItem>\n      );\n    },\n    []\n  );\n\n  let focusedKey = state.selectionManager.focusedKey;\n  let persistedKeys = useMemo(\n    () => (focusedKey != null ? new Set([focusedKey]) : null),\n    [focusedKey]\n  );\n\n  return (\n    <ListBoxContext.Provider\n      value={{state, renderEmptyState, shouldFocusOnHover, shouldUseVirtualFocus}}>\n      <FocusScope>\n        <Virtualizer\n          {...styleProps}\n          {...mergeProps(listBoxProps, domProps)}\n          ref={objectRef}\n          persistedKeys={persistedKeys}\n          autoFocus={!!props.autoFocus || undefined}\n          scrollDirection=\"vertical\"\n          className={classNames(styles, 'spectrum-Menu', styleProps.className)}\n          layout={layout}\n          layoutOptions={useMemo(\n            () => ({\n              isLoading: showLoadingSpinner\n            }),\n            [showLoadingSpinner]\n          )}\n          collection={state.collection}\n          renderWrapper={renderWrapper}\n          isLoading={isLoading}\n          onLoadMore={props.onLoadMore}\n          onScroll={onScroll}>\n          {useCallback((type, item: Node<T>): ReactNode => {\n            if (type === 'item') {\n              return <ListBoxOption item={item} />;\n            } else if (type === 'loader') {\n              return <LoadingState />;\n            } else if (type === 'placeholder') {\n              return <EmptyState />;\n            } else {\n              return null;\n            }\n          }, [])}\n        </Virtualizer>\n      </FocusScope>\n    </ListBoxContext.Provider>\n  );\n}) as <T>(props: ListBoxBaseProps<T> & {ref?: RefObject<HTMLDivElement | null>}) => ReactElement;\n\nfunction LoadingState() {\n  let {state} = useContext(ListBoxContext)!;\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/listbox');\n  return (\n    // aria-selected isn't needed here since this option is not selectable.\n    <div\n      // eslint-disable-next-line jsx-a11y/role-has-required-aria-props\n      role=\"option\"\n      style={{display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%'}}>\n      <ProgressCircle\n        isIndeterminate\n        size=\"S\"\n        aria-label={\n          state.collection.size > 0\n            ? stringFormatter.format('loadingMore')\n            : stringFormatter.format('loading')\n        }\n        UNSAFE_className={classNames(styles, 'spectrum-Dropdown-progressCircle')}\n      />\n    </div>\n  );\n}\n\nfunction EmptyState() {\n  let {renderEmptyState} = useContext(ListBoxContext)!;\n  let emptyState = renderEmptyState ? renderEmptyState() : null;\n  if (emptyState == null) {\n    return null;\n  }\n\n  return (\n    <div\n      // aria-selected isn't needed here since this option is not selectable.\n      // eslint-disable-next-line jsx-a11y/role-has-required-aria-props\n      role=\"option\">\n      {emptyState}\n    </div>\n  );\n}\n"],"names":[],"version":3,"file":"ListBoxBase.cjs.map"}

package/dist/private/listbox/ListBoxBase.js

@@ -132,7 +132,9 @@ const $45f8932a4e549cb6$export$1afdcf349979fb7e = /*#__PURE__*/ (0, $cAm8F$react
 function $45f8932a4e549cb6$var$LoadingState() {
     let { state: state } = (0, $cAm8F$useContext)((0, $90de0e4b1949420b$export$7ff8f37d2d81a48d));
     let stringFormatter = (0, $cAm8F$useLocalizedStringFormatter)((0, ($parcel$interopDefault($cAm8F$intlStringsjs))), '@react-spectrum/listbox');
-    return /*#__PURE__*/ (0, $cAm8F$react).createElement("div", {
+    return(// aria-selected isn't needed here since this option is not selectable.
+    /*#__PURE__*/ (0, $cAm8F$react).createElement("div", {
+        // eslint-disable-next-line jsx-a11y/role-has-required-aria-props
         role: "option",
         style: {
             display: 'flex',
@@ -145,7 +147,7 @@ function $45f8932a4e549cb6$var$LoadingState() {
         size: "S",
         "aria-label": state.collection.size > 0 ? stringFormatter.format('loadingMore') : stringFormatter.format('loading'),
         UNSAFE_className: (0, $512ba93e663f149c$export$ce4ab0c55987d1ff)((0, ($parcel$interopDefault($cAm8F$menu_vars_cssmjs))), 'spectrum-Dropdown-progressCircle')
-    }));
+    })));
 }
 function $45f8932a4e549cb6$var$EmptyState() {
     let { renderEmptyState: renderEmptyState } = (0, $cAm8F$useContext)((0, $90de0e4b1949420b$export$7ff8f37d2d81a48d));

package/dist/private/listbox/ListBoxBase.js.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@adobe/react-spectrum/src/listbox/ListBoxBase.tsx"],"sourcesContent":["/*\n * Copyright 2020 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\nimport {AriaLabelingProps, AsyncLoadable, DOMProps, FocusStrategy, Node, RefObject, StyleProps} from '@react-types/shared';\nimport {AriaListBoxOptions, AriaListBoxPropsBase, useListBox} from 'react-aria/useListBox';\nimport {classNames} from '../utils/classNames';\nimport {FocusScope} from 'react-aria/FocusScope';\nimport intlMessages from '../../intl/listbox/*.json';\n// @ts-ignore\nimport {ListBoxContext} from './ListBoxContext';\nimport {ListBoxLayout} from './ListBoxLayout';\nimport {ListBoxOption} from './ListBoxOption';\nimport {ListBoxSection} from './ListBoxSection';\nimport {ListState} from 'react-stately/useListState';\nimport {mergeProps} from 'react-aria/mergeProps';\nimport {ProgressCircle} from '../progress/ProgressCircle';\nimport React, {ForwardedRef, HTMLAttributes, ReactElement, ReactNode, useCallback, useContext, useMemo} from 'react';\nimport {ReusableView} from 'react-stately/useVirtualizerState';\nimport styles from '@adobe/spectrum-css-temp/components/menu/vars.css';\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\nimport {useObjectRef} from 'react-aria/useObjectRef';\nimport {useProvider} from '../provider/Provider';\nimport {useStyleProps} from '../utils/styleProps';\nimport {Virtualizer} from 'react-aria/private/virtualizer/Virtualizer';\nimport {VirtualizerItem} from 'react-aria/private/virtualizer/VirtualizerItem';\n\nexport interface SpectrumListBoxProps<T> extends AriaListBoxPropsBase<T>, AsyncLoadable, StyleProps {}\n\ninterface ListBoxBaseProps<T> extends AriaListBoxOptions<T>, DOMProps, AriaLabelingProps, StyleProps {\n  layout: ListBoxLayout<T>,\n  state: ListState<T>,\n  autoFocus?: boolean | FocusStrategy,\n  shouldFocusWrap?: boolean,\n  shouldSelectOnPressUp?: boolean,\n  focusOnPointerEnter?: boolean,\n  domProps?: HTMLAttributes<HTMLElement>,\n  disallowEmptySelection?: boolean,\n  shouldUseVirtualFocus?: boolean,\n  isLoading?: boolean,\n  showLoadingSpinner?: boolean,\n  onLoadMore?: () => void,\n  renderEmptyState?: () => ReactNode,\n  onScroll?: () => void\n}\n\n/** @private */\nexport function useListBoxLayout<T>(): ListBoxLayout<T> {\n  let {scale} = useProvider();\n  let layout = useMemo(() =>\n    new ListBoxLayout<T>({\n      estimatedRowHeight: scale === 'large' ? 48 : 32,\n      estimatedHeadingHeight: scale === 'large' ? 33 : 26,\n      paddingY: scale === 'large' ? 5 : 4, // TODO: get from DNA\n      placeholderHeight: scale === 'large' ? 48 : 32\n    })\n  , [scale]);\n\n  return layout;\n}\n\n// forwardRef doesn't support generic parameters, so cast the result to the correct type\n// https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref\n/** @private */\nexport const ListBoxBase = React.forwardRef(function ListBoxBase<T extends object>(props: ListBoxBaseProps<T>, ref: ForwardedRef<HTMLDivElement | null>) {\n  let {layout, state, shouldFocusOnHover = false, shouldUseVirtualFocus = false, domProps = {}, isLoading, showLoadingSpinner = isLoading, onScroll, renderEmptyState} = props;\n  let objectRef = useObjectRef(ref);\n  let {listBoxProps} = useListBox({\n    ...props,\n    layoutDelegate: layout,\n    isVirtualized: true\n  }, state, objectRef);\n  let {styleProps} = useStyleProps(props);\n\n  // This overrides collection view's renderWrapper to support hierarchy of items in sections.\n  // The header is extracted from the children so it can receive ARIA labeling properties.\n  type View = ReusableView<Node<T>, ReactNode>;\n  let renderWrapper = useCallback((parent: View | null, reusableView: View, children: View[], renderChildren: (views: View[]) => ReactElement[]) => {\n    if (reusableView.viewType === 'section') {\n      return (\n        <ListBoxSection\n          key={reusableView.key}\n          item={reusableView.content!}\n          layoutInfo={reusableView.layoutInfo!}\n          virtualizer={reusableView.virtualizer}\n          headerLayoutInfo={children.find(c => c.viewType === 'header')?.layoutInfo ?? null}>\n          {renderChildren(children.filter(c => c.viewType === 'item'))}\n        </ListBoxSection>\n      );\n    }\n\n    return (\n      <VirtualizerItem\n        key={reusableView.key}\n        layoutInfo={reusableView.layoutInfo!}\n        virtualizer={reusableView.virtualizer}\n        parent={parent?.layoutInfo}>\n        {reusableView.rendered}\n      </VirtualizerItem>\n    );\n  }, []);\n\n  let focusedKey = state.selectionManager.focusedKey;\n  let persistedKeys = useMemo(() => focusedKey != null ? new Set([focusedKey]) : null, [focusedKey]);\n\n  return (\n    <ListBoxContext.Provider value={{state, renderEmptyState, shouldFocusOnHover, shouldUseVirtualFocus}}>\n      <FocusScope>\n        <Virtualizer\n          {...styleProps}\n          {...mergeProps(listBoxProps, domProps)}\n          ref={objectRef}\n          persistedKeys={persistedKeys}\n          autoFocus={!!props.autoFocus || undefined}\n          scrollDirection=\"vertical\"\n          className={\n            classNames(\n              styles,\n              'spectrum-Menu',\n              styleProps.className\n            )\n          }\n          layout={layout}\n          layoutOptions={useMemo(() => ({\n            isLoading: showLoadingSpinner\n          }), [showLoadingSpinner])}\n          collection={state.collection}\n          renderWrapper={renderWrapper}\n          isLoading={isLoading}\n          onLoadMore={props.onLoadMore}\n          onScroll={onScroll}>\n          {useCallback((type, item: Node<T>): ReactNode => {\n            if (type === 'item') {\n              return <ListBoxOption item={item} />;\n            } else if (type === 'loader') {\n              return <LoadingState />;\n            } else if (type === 'placeholder') {\n              return <EmptyState />;\n            } else {\n              return null;\n            }\n          }, [])}\n        </Virtualizer>\n      </FocusScope>\n    </ListBoxContext.Provider>\n  );\n}) as <T>(props: ListBoxBaseProps<T> & {ref?: RefObject<HTMLDivElement | null>}) => ReactElement;\n\nfunction LoadingState() {\n  let {state} = useContext(ListBoxContext)!;\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/listbox');\n  return (\n    // aria-selected isn't needed here since this option is not selectable.\n    // eslint-disable-next-line jsx-a11y/role-has-required-aria-props\n    (<div role=\"option\" style={{display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%'}}>\n      <ProgressCircle\n        isIndeterminate\n        size=\"S\"\n        aria-label={state.collection.size > 0 ? stringFormatter.format('loadingMore') : stringFormatter.format('loading')}\n        UNSAFE_className={classNames(styles, 'spectrum-Dropdown-progressCircle')} />\n    </div>)\n  );\n}\n\nfunction EmptyState() {\n  let {renderEmptyState} = useContext(ListBoxContext)!;\n  let emptyState = renderEmptyState ? renderEmptyState() : null;\n  if (emptyState == null) {\n    return null;\n  }\n\n  return (\n    <div\n      // aria-selected isn't needed here since this option is not selectable.\n      // eslint-disable-next-line jsx-a11y/role-has-required-aria-props\n      role=\"option\">\n      {emptyState}\n    </div>\n  );\n}\n"],"names":[],"version":3,"file":"ListBoxBase.js.map"}
+{"mappings":"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","sources":["packages/@adobe/react-spectrum/src/listbox/ListBoxBase.tsx"],"sourcesContent":["/*\n * Copyright 2020 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\nimport {\n  AriaLabelingProps,\n  AsyncLoadable,\n  DOMProps,\n  FocusStrategy,\n  Node,\n  RefObject,\n  StyleProps\n} from '@react-types/shared';\nimport {AriaListBoxOptions, AriaListBoxPropsBase, useListBox} from 'react-aria/useListBox';\nimport {classNames} from '../utils/classNames';\nimport {FocusScope} from 'react-aria/FocusScope';\nimport intlMessages from '../../intl/listbox/*.json';\n// @ts-ignore\nimport {ListBoxContext} from './ListBoxContext';\nimport {ListBoxLayout} from './ListBoxLayout';\nimport {ListBoxOption} from './ListBoxOption';\nimport {ListBoxSection} from './ListBoxSection';\nimport {ListState} from 'react-stately/useListState';\nimport {mergeProps} from 'react-aria/mergeProps';\nimport {ProgressCircle} from '../progress/ProgressCircle';\nimport React, {\n  ForwardedRef,\n  HTMLAttributes,\n  ReactElement,\n  ReactNode,\n  useCallback,\n  useContext,\n  useMemo\n} from 'react';\nimport {ReusableView} from 'react-stately/useVirtualizerState';\nimport styles from '@adobe/spectrum-css-temp/components/menu/vars.css';\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\nimport {useObjectRef} from 'react-aria/useObjectRef';\nimport {useProvider} from '../provider/Provider';\nimport {useStyleProps} from '../utils/styleProps';\nimport {Virtualizer} from 'react-aria/private/virtualizer/Virtualizer';\nimport {VirtualizerItem} from 'react-aria/private/virtualizer/VirtualizerItem';\n\nexport interface SpectrumListBoxProps<T>\n  extends AriaListBoxPropsBase<T>, AsyncLoadable, StyleProps {}\n\ninterface ListBoxBaseProps<T>\n  extends AriaListBoxOptions<T>, DOMProps, AriaLabelingProps, StyleProps {\n  layout: ListBoxLayout<T>;\n  state: ListState<T>;\n  autoFocus?: boolean | FocusStrategy;\n  shouldFocusWrap?: boolean;\n  shouldSelectOnPressUp?: boolean;\n  focusOnPointerEnter?: boolean;\n  domProps?: HTMLAttributes<HTMLElement>;\n  disallowEmptySelection?: boolean;\n  shouldUseVirtualFocus?: boolean;\n  isLoading?: boolean;\n  showLoadingSpinner?: boolean;\n  onLoadMore?: () => void;\n  renderEmptyState?: () => ReactNode;\n  onScroll?: () => void;\n}\n\n/** @private */\nexport function useListBoxLayout<T>(): ListBoxLayout<T> {\n  let {scale} = useProvider();\n  let layout = useMemo(\n    () =>\n      new ListBoxLayout<T>({\n        estimatedRowHeight: scale === 'large' ? 48 : 32,\n        estimatedHeadingHeight: scale === 'large' ? 33 : 26,\n        paddingY: scale === 'large' ? 5 : 4, // TODO: get from DNA\n        placeholderHeight: scale === 'large' ? 48 : 32\n      }),\n    [scale]\n  );\n\n  return layout;\n}\n\n// forwardRef doesn't support generic parameters, so cast the result to the correct type\n// https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref\n/** @private */\nexport const ListBoxBase = React.forwardRef(function ListBoxBase<T extends object>(\n  props: ListBoxBaseProps<T>,\n  ref: ForwardedRef<HTMLDivElement | null>\n) {\n  let {\n    layout,\n    state,\n    shouldFocusOnHover = false,\n    shouldUseVirtualFocus = false,\n    domProps = {},\n    isLoading,\n    showLoadingSpinner = isLoading,\n    onScroll,\n    renderEmptyState\n  } = props;\n  let objectRef = useObjectRef(ref);\n  let {listBoxProps} = useListBox(\n    {\n      ...props,\n      layoutDelegate: layout,\n      isVirtualized: true\n    },\n    state,\n    objectRef\n  );\n  let {styleProps} = useStyleProps(props);\n\n  // This overrides collection view's renderWrapper to support hierarchy of items in sections.\n  // The header is extracted from the children so it can receive ARIA labeling properties.\n  type View = ReusableView<Node<T>, ReactNode>;\n  let renderWrapper = useCallback(\n    (\n      parent: View | null,\n      reusableView: View,\n      children: View[],\n      renderChildren: (views: View[]) => ReactElement[]\n    ) => {\n      if (reusableView.viewType === 'section') {\n        return (\n          <ListBoxSection\n            key={reusableView.key}\n            item={reusableView.content!}\n            layoutInfo={reusableView.layoutInfo!}\n            virtualizer={reusableView.virtualizer}\n            headerLayoutInfo={children.find(c => c.viewType === 'header')?.layoutInfo ?? null}>\n            {renderChildren(children.filter(c => c.viewType === 'item'))}\n          </ListBoxSection>\n        );\n      }\n\n      return (\n        <VirtualizerItem\n          key={reusableView.key}\n          layoutInfo={reusableView.layoutInfo!}\n          virtualizer={reusableView.virtualizer}\n          parent={parent?.layoutInfo}>\n          {reusableView.rendered}\n        </VirtualizerItem>\n      );\n    },\n    []\n  );\n\n  let focusedKey = state.selectionManager.focusedKey;\n  let persistedKeys = useMemo(\n    () => (focusedKey != null ? new Set([focusedKey]) : null),\n    [focusedKey]\n  );\n\n  return (\n    <ListBoxContext.Provider\n      value={{state, renderEmptyState, shouldFocusOnHover, shouldUseVirtualFocus}}>\n      <FocusScope>\n        <Virtualizer\n          {...styleProps}\n          {...mergeProps(listBoxProps, domProps)}\n          ref={objectRef}\n          persistedKeys={persistedKeys}\n          autoFocus={!!props.autoFocus || undefined}\n          scrollDirection=\"vertical\"\n          className={classNames(styles, 'spectrum-Menu', styleProps.className)}\n          layout={layout}\n          layoutOptions={useMemo(\n            () => ({\n              isLoading: showLoadingSpinner\n            }),\n            [showLoadingSpinner]\n          )}\n          collection={state.collection}\n          renderWrapper={renderWrapper}\n          isLoading={isLoading}\n          onLoadMore={props.onLoadMore}\n          onScroll={onScroll}>\n          {useCallback((type, item: Node<T>): ReactNode => {\n            if (type === 'item') {\n              return <ListBoxOption item={item} />;\n            } else if (type === 'loader') {\n              return <LoadingState />;\n            } else if (type === 'placeholder') {\n              return <EmptyState />;\n            } else {\n              return null;\n            }\n          }, [])}\n        </Virtualizer>\n      </FocusScope>\n    </ListBoxContext.Provider>\n  );\n}) as <T>(props: ListBoxBaseProps<T> & {ref?: RefObject<HTMLDivElement | null>}) => ReactElement;\n\nfunction LoadingState() {\n  let {state} = useContext(ListBoxContext)!;\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/listbox');\n  return (\n    // aria-selected isn't needed here since this option is not selectable.\n    <div\n      // eslint-disable-next-line jsx-a11y/role-has-required-aria-props\n      role=\"option\"\n      style={{display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%'}}>\n      <ProgressCircle\n        isIndeterminate\n        size=\"S\"\n        aria-label={\n          state.collection.size > 0\n            ? stringFormatter.format('loadingMore')\n            : stringFormatter.format('loading')\n        }\n        UNSAFE_className={classNames(styles, 'spectrum-Dropdown-progressCircle')}\n      />\n    </div>\n  );\n}\n\nfunction EmptyState() {\n  let {renderEmptyState} = useContext(ListBoxContext)!;\n  let emptyState = renderEmptyState ? renderEmptyState() : null;\n  if (emptyState == null) {\n    return null;\n  }\n\n  return (\n    <div\n      // aria-selected isn't needed here since this option is not selectable.\n      // eslint-disable-next-line jsx-a11y/role-has-required-aria-props\n      role=\"option\">\n      {emptyState}\n    </div>\n  );\n}\n"],"names":[],"version":3,"file":"ListBoxBase.js.map"}

package/dist/private/listbox/ListBoxBase.mjs

@@ -130,7 +130,9 @@ const $ee13b4eccaed924f$export$1afdcf349979fb7e = /*#__PURE__*/ (0, $kfmBr$react
 function $ee13b4eccaed924f$var$LoadingState() {
     let { state: state } = (0, $kfmBr$useContext)((0, $200f4a7d8a01d3bb$export$7ff8f37d2d81a48d));
     let stringFormatter = (0, $kfmBr$useLocalizedStringFormatter)((0, ($parcel$interopDefault($kfmBr$intlStringsmjs))), '@react-spectrum/listbox');
-    return /*#__PURE__*/ (0, $kfmBr$react).createElement("div", {
+    return(// aria-selected isn't needed here since this option is not selectable.
+    /*#__PURE__*/ (0, $kfmBr$react).createElement("div", {
+        // eslint-disable-next-line jsx-a11y/role-has-required-aria-props
         role: "option",
         style: {
             display: 'flex',
@@ -143,7 +145,7 @@ function $ee13b4eccaed924f$var$LoadingState() {
         size: "S",
         "aria-label": state.collection.size > 0 ? stringFormatter.format('loadingMore') : stringFormatter.format('loading'),
         UNSAFE_className: (0, $6e6392558d48dfec$export$ce4ab0c55987d1ff)((0, ($parcel$interopDefault($kfmBr$menu_vars_cssmjs))), 'spectrum-Dropdown-progressCircle')
-    }));
+    })));
 }
 function $ee13b4eccaed924f$var$EmptyState() {
     let { renderEmptyState: renderEmptyState } = (0, $kfmBr$useContext)((0, $200f4a7d8a01d3bb$export$7ff8f37d2d81a48d));

package/dist/private/listbox/ListBoxBase.mjs.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@adobe/react-spectrum/src/listbox/ListBoxBase.tsx"],"sourcesContent":["/*\n * Copyright 2020 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\nimport {AriaLabelingProps, AsyncLoadable, DOMProps, FocusStrategy, Node, RefObject, StyleProps} from '@react-types/shared';\nimport {AriaListBoxOptions, AriaListBoxPropsBase, useListBox} from 'react-aria/useListBox';\nimport {classNames} from '../utils/classNames';\nimport {FocusScope} from 'react-aria/FocusScope';\nimport intlMessages from '../../intl/listbox/*.json';\n// @ts-ignore\nimport {ListBoxContext} from './ListBoxContext';\nimport {ListBoxLayout} from './ListBoxLayout';\nimport {ListBoxOption} from './ListBoxOption';\nimport {ListBoxSection} from './ListBoxSection';\nimport {ListState} from 'react-stately/useListState';\nimport {mergeProps} from 'react-aria/mergeProps';\nimport {ProgressCircle} from '../progress/ProgressCircle';\nimport React, {ForwardedRef, HTMLAttributes, ReactElement, ReactNode, useCallback, useContext, useMemo} from 'react';\nimport {ReusableView} from 'react-stately/useVirtualizerState';\nimport styles from '@adobe/spectrum-css-temp/components/menu/vars.css';\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\nimport {useObjectRef} from 'react-aria/useObjectRef';\nimport {useProvider} from '../provider/Provider';\nimport {useStyleProps} from '../utils/styleProps';\nimport {Virtualizer} from 'react-aria/private/virtualizer/Virtualizer';\nimport {VirtualizerItem} from 'react-aria/private/virtualizer/VirtualizerItem';\n\nexport interface SpectrumListBoxProps<T> extends AriaListBoxPropsBase<T>, AsyncLoadable, StyleProps {}\n\ninterface ListBoxBaseProps<T> extends AriaListBoxOptions<T>, DOMProps, AriaLabelingProps, StyleProps {\n  layout: ListBoxLayout<T>,\n  state: ListState<T>,\n  autoFocus?: boolean | FocusStrategy,\n  shouldFocusWrap?: boolean,\n  shouldSelectOnPressUp?: boolean,\n  focusOnPointerEnter?: boolean,\n  domProps?: HTMLAttributes<HTMLElement>,\n  disallowEmptySelection?: boolean,\n  shouldUseVirtualFocus?: boolean,\n  isLoading?: boolean,\n  showLoadingSpinner?: boolean,\n  onLoadMore?: () => void,\n  renderEmptyState?: () => ReactNode,\n  onScroll?: () => void\n}\n\n/** @private */\nexport function useListBoxLayout<T>(): ListBoxLayout<T> {\n  let {scale} = useProvider();\n  let layout = useMemo(() =>\n    new ListBoxLayout<T>({\n      estimatedRowHeight: scale === 'large' ? 48 : 32,\n      estimatedHeadingHeight: scale === 'large' ? 33 : 26,\n      paddingY: scale === 'large' ? 5 : 4, // TODO: get from DNA\n      placeholderHeight: scale === 'large' ? 48 : 32\n    })\n  , [scale]);\n\n  return layout;\n}\n\n// forwardRef doesn't support generic parameters, so cast the result to the correct type\n// https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref\n/** @private */\nexport const ListBoxBase = React.forwardRef(function ListBoxBase<T extends object>(props: ListBoxBaseProps<T>, ref: ForwardedRef<HTMLDivElement | null>) {\n  let {layout, state, shouldFocusOnHover = false, shouldUseVirtualFocus = false, domProps = {}, isLoading, showLoadingSpinner = isLoading, onScroll, renderEmptyState} = props;\n  let objectRef = useObjectRef(ref);\n  let {listBoxProps} = useListBox({\n    ...props,\n    layoutDelegate: layout,\n    isVirtualized: true\n  }, state, objectRef);\n  let {styleProps} = useStyleProps(props);\n\n  // This overrides collection view's renderWrapper to support hierarchy of items in sections.\n  // The header is extracted from the children so it can receive ARIA labeling properties.\n  type View = ReusableView<Node<T>, ReactNode>;\n  let renderWrapper = useCallback((parent: View | null, reusableView: View, children: View[], renderChildren: (views: View[]) => ReactElement[]) => {\n    if (reusableView.viewType === 'section') {\n      return (\n        <ListBoxSection\n          key={reusableView.key}\n          item={reusableView.content!}\n          layoutInfo={reusableView.layoutInfo!}\n          virtualizer={reusableView.virtualizer}\n          headerLayoutInfo={children.find(c => c.viewType === 'header')?.layoutInfo ?? null}>\n          {renderChildren(children.filter(c => c.viewType === 'item'))}\n        </ListBoxSection>\n      );\n    }\n\n    return (\n      <VirtualizerItem\n        key={reusableView.key}\n        layoutInfo={reusableView.layoutInfo!}\n        virtualizer={reusableView.virtualizer}\n        parent={parent?.layoutInfo}>\n        {reusableView.rendered}\n      </VirtualizerItem>\n    );\n  }, []);\n\n  let focusedKey = state.selectionManager.focusedKey;\n  let persistedKeys = useMemo(() => focusedKey != null ? new Set([focusedKey]) : null, [focusedKey]);\n\n  return (\n    <ListBoxContext.Provider value={{state, renderEmptyState, shouldFocusOnHover, shouldUseVirtualFocus}}>\n      <FocusScope>\n        <Virtualizer\n          {...styleProps}\n          {...mergeProps(listBoxProps, domProps)}\n          ref={objectRef}\n          persistedKeys={persistedKeys}\n          autoFocus={!!props.autoFocus || undefined}\n          scrollDirection=\"vertical\"\n          className={\n            classNames(\n              styles,\n              'spectrum-Menu',\n              styleProps.className\n            )\n          }\n          layout={layout}\n          layoutOptions={useMemo(() => ({\n            isLoading: showLoadingSpinner\n          }), [showLoadingSpinner])}\n          collection={state.collection}\n          renderWrapper={renderWrapper}\n          isLoading={isLoading}\n          onLoadMore={props.onLoadMore}\n          onScroll={onScroll}>\n          {useCallback((type, item: Node<T>): ReactNode => {\n            if (type === 'item') {\n              return <ListBoxOption item={item} />;\n            } else if (type === 'loader') {\n              return <LoadingState />;\n            } else if (type === 'placeholder') {\n              return <EmptyState />;\n            } else {\n              return null;\n            }\n          }, [])}\n        </Virtualizer>\n      </FocusScope>\n    </ListBoxContext.Provider>\n  );\n}) as <T>(props: ListBoxBaseProps<T> & {ref?: RefObject<HTMLDivElement | null>}) => ReactElement;\n\nfunction LoadingState() {\n  let {state} = useContext(ListBoxContext)!;\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/listbox');\n  return (\n    // aria-selected isn't needed here since this option is not selectable.\n    // eslint-disable-next-line jsx-a11y/role-has-required-aria-props\n    (<div role=\"option\" style={{display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%'}}>\n      <ProgressCircle\n        isIndeterminate\n        size=\"S\"\n        aria-label={state.collection.size > 0 ? stringFormatter.format('loadingMore') : stringFormatter.format('loading')}\n        UNSAFE_className={classNames(styles, 'spectrum-Dropdown-progressCircle')} />\n    </div>)\n  );\n}\n\nfunction EmptyState() {\n  let {renderEmptyState} = useContext(ListBoxContext)!;\n  let emptyState = renderEmptyState ? renderEmptyState() : null;\n  if (emptyState == null) {\n    return null;\n  }\n\n  return (\n    <div\n      // aria-selected isn't needed here since this option is not selectable.\n      // eslint-disable-next-line jsx-a11y/role-has-required-aria-props\n      role=\"option\">\n      {emptyState}\n    </div>\n  );\n}\n"],"names":[],"version":3,"file":"ListBoxBase.mjs.map"}
+{"mappings":"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","sources":["packages/@adobe/react-spectrum/src/listbox/ListBoxBase.tsx"],"sourcesContent":["/*\n * Copyright 2020 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\nimport {\n  AriaLabelingProps,\n  AsyncLoadable,\n  DOMProps,\n  FocusStrategy,\n  Node,\n  RefObject,\n  StyleProps\n} from '@react-types/shared';\nimport {AriaListBoxOptions, AriaListBoxPropsBase, useListBox} from 'react-aria/useListBox';\nimport {classNames} from '../utils/classNames';\nimport {FocusScope} from 'react-aria/FocusScope';\nimport intlMessages from '../../intl/listbox/*.json';\n// @ts-ignore\nimport {ListBoxContext} from './ListBoxContext';\nimport {ListBoxLayout} from './ListBoxLayout';\nimport {ListBoxOption} from './ListBoxOption';\nimport {ListBoxSection} from './ListBoxSection';\nimport {ListState} from 'react-stately/useListState';\nimport {mergeProps} from 'react-aria/mergeProps';\nimport {ProgressCircle} from '../progress/ProgressCircle';\nimport React, {\n  ForwardedRef,\n  HTMLAttributes,\n  ReactElement,\n  ReactNode,\n  useCallback,\n  useContext,\n  useMemo\n} from 'react';\nimport {ReusableView} from 'react-stately/useVirtualizerState';\nimport styles from '@adobe/spectrum-css-temp/components/menu/vars.css';\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\nimport {useObjectRef} from 'react-aria/useObjectRef';\nimport {useProvider} from '../provider/Provider';\nimport {useStyleProps} from '../utils/styleProps';\nimport {Virtualizer} from 'react-aria/private/virtualizer/Virtualizer';\nimport {VirtualizerItem} from 'react-aria/private/virtualizer/VirtualizerItem';\n\nexport interface SpectrumListBoxProps<T>\n  extends AriaListBoxPropsBase<T>, AsyncLoadable, StyleProps {}\n\ninterface ListBoxBaseProps<T>\n  extends AriaListBoxOptions<T>, DOMProps, AriaLabelingProps, StyleProps {\n  layout: ListBoxLayout<T>;\n  state: ListState<T>;\n  autoFocus?: boolean | FocusStrategy;\n  shouldFocusWrap?: boolean;\n  shouldSelectOnPressUp?: boolean;\n  focusOnPointerEnter?: boolean;\n  domProps?: HTMLAttributes<HTMLElement>;\n  disallowEmptySelection?: boolean;\n  shouldUseVirtualFocus?: boolean;\n  isLoading?: boolean;\n  showLoadingSpinner?: boolean;\n  onLoadMore?: () => void;\n  renderEmptyState?: () => ReactNode;\n  onScroll?: () => void;\n}\n\n/** @private */\nexport function useListBoxLayout<T>(): ListBoxLayout<T> {\n  let {scale} = useProvider();\n  let layout = useMemo(\n    () =>\n      new ListBoxLayout<T>({\n        estimatedRowHeight: scale === 'large' ? 48 : 32,\n        estimatedHeadingHeight: scale === 'large' ? 33 : 26,\n        paddingY: scale === 'large' ? 5 : 4, // TODO: get from DNA\n        placeholderHeight: scale === 'large' ? 48 : 32\n      }),\n    [scale]\n  );\n\n  return layout;\n}\n\n// forwardRef doesn't support generic parameters, so cast the result to the correct type\n// https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref\n/** @private */\nexport const ListBoxBase = React.forwardRef(function ListBoxBase<T extends object>(\n  props: ListBoxBaseProps<T>,\n  ref: ForwardedRef<HTMLDivElement | null>\n) {\n  let {\n    layout,\n    state,\n    shouldFocusOnHover = false,\n    shouldUseVirtualFocus = false,\n    domProps = {},\n    isLoading,\n    showLoadingSpinner = isLoading,\n    onScroll,\n    renderEmptyState\n  } = props;\n  let objectRef = useObjectRef(ref);\n  let {listBoxProps} = useListBox(\n    {\n      ...props,\n      layoutDelegate: layout,\n      isVirtualized: true\n    },\n    state,\n    objectRef\n  );\n  let {styleProps} = useStyleProps(props);\n\n  // This overrides collection view's renderWrapper to support hierarchy of items in sections.\n  // The header is extracted from the children so it can receive ARIA labeling properties.\n  type View = ReusableView<Node<T>, ReactNode>;\n  let renderWrapper = useCallback(\n    (\n      parent: View | null,\n      reusableView: View,\n      children: View[],\n      renderChildren: (views: View[]) => ReactElement[]\n    ) => {\n      if (reusableView.viewType === 'section') {\n        return (\n          <ListBoxSection\n            key={reusableView.key}\n            item={reusableView.content!}\n            layoutInfo={reusableView.layoutInfo!}\n            virtualizer={reusableView.virtualizer}\n            headerLayoutInfo={children.find(c => c.viewType === 'header')?.layoutInfo ?? null}>\n            {renderChildren(children.filter(c => c.viewType === 'item'))}\n          </ListBoxSection>\n        );\n      }\n\n      return (\n        <VirtualizerItem\n          key={reusableView.key}\n          layoutInfo={reusableView.layoutInfo!}\n          virtualizer={reusableView.virtualizer}\n          parent={parent?.layoutInfo}>\n          {reusableView.rendered}\n        </VirtualizerItem>\n      );\n    },\n    []\n  );\n\n  let focusedKey = state.selectionManager.focusedKey;\n  let persistedKeys = useMemo(\n    () => (focusedKey != null ? new Set([focusedKey]) : null),\n    [focusedKey]\n  );\n\n  return (\n    <ListBoxContext.Provider\n      value={{state, renderEmptyState, shouldFocusOnHover, shouldUseVirtualFocus}}>\n      <FocusScope>\n        <Virtualizer\n          {...styleProps}\n          {...mergeProps(listBoxProps, domProps)}\n          ref={objectRef}\n          persistedKeys={persistedKeys}\n          autoFocus={!!props.autoFocus || undefined}\n          scrollDirection=\"vertical\"\n          className={classNames(styles, 'spectrum-Menu', styleProps.className)}\n          layout={layout}\n          layoutOptions={useMemo(\n            () => ({\n              isLoading: showLoadingSpinner\n            }),\n            [showLoadingSpinner]\n          )}\n          collection={state.collection}\n          renderWrapper={renderWrapper}\n          isLoading={isLoading}\n          onLoadMore={props.onLoadMore}\n          onScroll={onScroll}>\n          {useCallback((type, item: Node<T>): ReactNode => {\n            if (type === 'item') {\n              return <ListBoxOption item={item} />;\n            } else if (type === 'loader') {\n              return <LoadingState />;\n            } else if (type === 'placeholder') {\n              return <EmptyState />;\n            } else {\n              return null;\n            }\n          }, [])}\n        </Virtualizer>\n      </FocusScope>\n    </ListBoxContext.Provider>\n  );\n}) as <T>(props: ListBoxBaseProps<T> & {ref?: RefObject<HTMLDivElement | null>}) => ReactElement;\n\nfunction LoadingState() {\n  let {state} = useContext(ListBoxContext)!;\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/listbox');\n  return (\n    // aria-selected isn't needed here since this option is not selectable.\n    <div\n      // eslint-disable-next-line jsx-a11y/role-has-required-aria-props\n      role=\"option\"\n      style={{display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%'}}>\n      <ProgressCircle\n        isIndeterminate\n        size=\"S\"\n        aria-label={\n          state.collection.size > 0\n            ? stringFormatter.format('loadingMore')\n            : stringFormatter.format('loading')\n        }\n        UNSAFE_className={classNames(styles, 'spectrum-Dropdown-progressCircle')}\n      />\n    </div>\n  );\n}\n\nfunction EmptyState() {\n  let {renderEmptyState} = useContext(ListBoxContext)!;\n  let emptyState = renderEmptyState ? renderEmptyState() : null;\n  if (emptyState == null) {\n    return null;\n  }\n\n  return (\n    <div\n      // aria-selected isn't needed here since this option is not selectable.\n      // eslint-disable-next-line jsx-a11y/role-has-required-aria-props\n      role=\"option\">\n      {emptyState}\n    </div>\n  );\n}\n"],"names":[],"version":3,"file":"ListBoxBase.mjs.map"}

package/dist/private/listbox/ListBoxContext.cjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;AAYM,MAAM,4CAAiB,CAAA,GAAA,sCAAI,EAAE,aAAa,CAA6B","sources":["packages/@adobe/react-spectrum/src/listbox/ListBoxContext.ts"],"sourcesContent":["/*\n * Copyright 2020 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\nimport {ListState} from 'react-stately/useListState';\nimport React, {ReactNode} from 'react';\n\ninterface ListBoxContextValue {\n  state: ListState<unknown>,\n  renderEmptyState?: () => ReactNode,\n  shouldFocusOnHover: boolean,\n  shouldUseVirtualFocus: boolean\n}\n\nexport const ListBoxContext = React.createContext<ListBoxContextValue | null>(null);\n"],"names":[],"version":3,"file":"ListBoxContext.cjs.map"}
+{"mappings":";;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;AAYM,MAAM,4CAAiB,CAAA,GAAA,sCAAI,EAAE,aAAa,CAA6B","sources":["packages/@adobe/react-spectrum/src/listbox/ListBoxContext.ts"],"sourcesContent":["/*\n * Copyright 2020 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\nimport {ListState} from 'react-stately/useListState';\nimport React, {ReactNode} from 'react';\n\ninterface ListBoxContextValue {\n  state: ListState<unknown>;\n  renderEmptyState?: () => ReactNode;\n  shouldFocusOnHover: boolean;\n  shouldUseVirtualFocus: boolean;\n}\n\nexport const ListBoxContext = React.createContext<ListBoxContextValue | null>(null);\n"],"names":[],"version":3,"file":"ListBoxContext.cjs.map"}

package/dist/private/listbox/ListBoxContext.js.map

@@ -1 +1 @@
-{"mappings":";;AAAA;;;;;;;;;;CAUC;AAYM,MAAM,4CAAiB,CAAA,GAAA,YAAI,EAAE,aAAa,CAA6B","sources":["packages/@adobe/react-spectrum/src/listbox/ListBoxContext.ts"],"sourcesContent":["/*\n * Copyright 2020 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\nimport {ListState} from 'react-stately/useListState';\nimport React, {ReactNode} from 'react';\n\ninterface ListBoxContextValue {\n  state: ListState<unknown>,\n  renderEmptyState?: () => ReactNode,\n  shouldFocusOnHover: boolean,\n  shouldUseVirtualFocus: boolean\n}\n\nexport const ListBoxContext = React.createContext<ListBoxContextValue | null>(null);\n"],"names":[],"version":3,"file":"ListBoxContext.js.map"}
+{"mappings":";;AAAA;;;;;;;;;;CAUC;AAYM,MAAM,4CAAiB,CAAA,GAAA,YAAI,EAAE,aAAa,CAA6B","sources":["packages/@adobe/react-spectrum/src/listbox/ListBoxContext.ts"],"sourcesContent":["/*\n * Copyright 2020 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\nimport {ListState} from 'react-stately/useListState';\nimport React, {ReactNode} from 'react';\n\ninterface ListBoxContextValue {\n  state: ListState<unknown>;\n  renderEmptyState?: () => ReactNode;\n  shouldFocusOnHover: boolean;\n  shouldUseVirtualFocus: boolean;\n}\n\nexport const ListBoxContext = React.createContext<ListBoxContextValue | null>(null);\n"],"names":[],"version":3,"file":"ListBoxContext.js.map"}

package/dist/private/listbox/ListBoxContext.mjs.map

@@ -1 +1 @@
-{"mappings":";;AAAA;;;;;;;;;;CAUC;AAYM,MAAM,4CAAiB,CAAA,GAAA,YAAI,EAAE,aAAa,CAA6B","sources":["packages/@adobe/react-spectrum/src/listbox/ListBoxContext.ts"],"sourcesContent":["/*\n * Copyright 2020 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\nimport {ListState} from 'react-stately/useListState';\nimport React, {ReactNode} from 'react';\n\ninterface ListBoxContextValue {\n  state: ListState<unknown>,\n  renderEmptyState?: () => ReactNode,\n  shouldFocusOnHover: boolean,\n  shouldUseVirtualFocus: boolean\n}\n\nexport const ListBoxContext = React.createContext<ListBoxContextValue | null>(null);\n"],"names":[],"version":3,"file":"ListBoxContext.mjs.map"}
+{"mappings":";;AAAA;;;;;;;;;;CAUC;AAYM,MAAM,4CAAiB,CAAA,GAAA,YAAI,EAAE,aAAa,CAA6B","sources":["packages/@adobe/react-spectrum/src/listbox/ListBoxContext.ts"],"sourcesContent":["/*\n * Copyright 2020 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\nimport {ListState} from 'react-stately/useListState';\nimport React, {ReactNode} from 'react';\n\ninterface ListBoxContextValue {\n  state: ListState<unknown>;\n  renderEmptyState?: () => ReactNode;\n  shouldFocusOnHover: boolean;\n  shouldUseVirtualFocus: boolean;\n}\n\nexport const ListBoxContext = React.createContext<ListBoxContextValue | null>(null);\n"],"names":[],"version":3,"file":"ListBoxContext.mjs.map"}

package/dist/private/listbox/ListBoxLayout.cjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;AAYO,MAAM,iDAAyB,CAAA,GAAA,iDAAS;IAK7C,YAAY,IAA0B,CAAE;QACtC,KAAK,CAAC,YALA,YAAqB;QAM3B,IAAI,CAAC,iBAAiB,GAAG,KAAK,iBAAiB;QAC/C,IAAI,CAAC,QAAQ,GAAG,KAAK,QAAQ;IAC/B;IAEA,OAAO,mBAA4D,EAAQ;QACzE,IAAI,CAAC,SAAS,GAAG,oBAAoB,aAAa,EAAE,aAAa;QACjE,KAAK,CAAC,OAAO;IACf;IAEU,kBAAgC;QACxC,IAAI,QAAQ,KAAK,CAAC,gBAAgB,IAAI,CAAC,QAAQ;QAC/C,IAAI,IAAI,IAAI,CAAC,WAAW,CAAC,MAAM;QAE/B,IAAI,IAAI,CAAC,SAAS,EAAE;YAClB,IAAI,OAAO,IAAI,CAAA,GAAA,2CAAG,EAAE,GAAG,GAAG,IAAI,CAAC,WAAW,CAAE,WAAW,CAAC,KAAK,EAAE;YAC/D,IAAI,SAAS,IAAI,CAAA,GAAA,iDAAS,EAAE,UAAU,UAAU;YAChD,IAAI,OAAO;gBACT,YAAY;gBACZ,WAAW,OAAO,IAAI;YACxB;YACA,MAAM,IAAI,CAAC;YACX,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,OAAO,GAAG,EAAE;YACjC,IAAI,OAAO,IAAI,CAAC,IAAI;QACtB;QAEA,IAAI,MAAM,MAAM,KAAK,GAAG;YACtB,IAAI,OAAO,IAAI,CAAA,GAAA,2CAAG,EAAE,GAAG,GAAG,IAAI,CAAC,WAAW,CAAE,WAAW,CAAC,KAAK,EAAE,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,WAAW,CAAE,WAAW,CAAC,MAAM;YAC7H,IAAI,cAAc,IAAI,CAAA,GAAA,iDAAS,EAAE,eAAe,eAAe;YAC/D,IAAI,OAAO;gBACT,YAAY;gBACZ,WAAW,YAAY,IAAI;YAC7B;YACA,MAAM,IAAI,CAAC;YACX,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,YAAY,GAAG,EAAE;YACtC,IAAI,YAAY,IAAI,CAAC,IAAI;QAC3B;QAEA,IAAI,CAAC,WAAW,CAAC,MAAM,GAAG,IAAI,IAAI,CAAC,QAAQ;QAC3C,OAAO;IACT;IAEU,aAAa,IAAa,EAAE,CAAS,EAAE,CAAS,EAAc;QACtE,+CAA+C;QAC/C,IAAI,aAAa;YACf,MAAM;YACN,KAAK,KAAK,GAAG,GAAG;YAChB,WAAW,KAAK,GAAG;YACnB,OAAO;YACP,OAAO,KAAK,KAAK;YACjB,OAAO,KAAK,KAAK;YACjB,eAAe;YACf,YAAY,EAAE;YACd,UAAU,KAAK,QAAQ;YACvB,WAAW,KAAK,SAAS;QAC3B;QAEA,oEAAoE;QACpE,IAAI,SAAS,IAAI,CAAC,kBAAkB,CAAC,YAAY,GAAG;QACpD,OAAO,IAAI,GAAG;QACd,OAAO,UAAU,CAAC,SAAS,GAAG,KAAK,GAAG;QACtC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,WAAW,GAAG,EAAE;QACrC,KAAK,OAAO,UAAU,CAAC,IAAI,CAAC,MAAM;QAElC,IAAI,UAAU,KAAK,CAAC,aAAa,MAAM,GAAG;QAC1C,QAAQ,QAAQ,CAAE,OAAO,CAAC;QAC1B,OAAO;IACT;AACF","sources":["packages/@adobe/react-spectrum/src/listbox/ListBoxLayout.ts"],"sourcesContent":["import {InvalidationContext, LayoutInfo, LayoutNode, ListLayout, ListLayoutOptions, Rect} from 'react-stately/useVirtualizerState';\nimport {Node} from '@react-types/shared';\n\ninterface ListBoxLayoutProps extends ListLayoutOptions {\n  isLoading?: boolean\n}\n\ninterface ListBoxLayoutOptions extends ListLayoutOptions {\n  placeholderHeight: number,\n  paddingY: number\n}\n\nexport class ListBoxLayout<T> extends ListLayout<T, ListBoxLayoutProps> {\n  private isLoading: boolean = false;\n  private placeholderHeight: number;\n  private paddingY: number;\n\n  constructor(opts: ListBoxLayoutOptions) {\n    super(opts);\n    this.placeholderHeight = opts.placeholderHeight;\n    this.paddingY = opts.paddingY;\n  }\n\n  update(invalidationContext: InvalidationContext<ListBoxLayoutProps>): void {\n    this.isLoading = invalidationContext.layoutOptions?.isLoading || false;\n    super.update(invalidationContext);\n  }\n\n  protected buildCollection(): LayoutNode[] {\n    let nodes = super.buildCollection(this.paddingY);\n    let y = this.contentSize.height;\n\n    if (this.isLoading) {\n      let rect = new Rect(0, y, this.virtualizer!.visibleRect.width, 40);\n      let loader = new LayoutInfo('loader', 'loader', rect);\n      let node = {\n        layoutInfo: loader,\n        validRect: loader.rect\n      };\n      nodes.push(node);\n      this.layoutNodes.set(loader.key, node);\n      y = loader.rect.maxY;\n    }\n\n    if (nodes.length === 0) {\n      let rect = new Rect(0, y, this.virtualizer!.visibleRect.width, this.placeholderHeight ?? this.virtualizer!.visibleRect.height);\n      let placeholder = new LayoutInfo('placeholder', 'placeholder', rect);\n      let node = {\n        layoutInfo: placeholder,\n        validRect: placeholder.rect\n      };\n      nodes.push(node);\n      this.layoutNodes.set(placeholder.key, node);\n      y = placeholder.rect.maxY;\n    }\n\n    this.contentSize.height = y + this.paddingY;\n    return nodes;\n  }\n\n  protected buildSection(node: Node<T>, x: number, y: number): LayoutNode {\n    // Synthesize a collection node for the header.\n    let headerNode = {\n      type: 'header',\n      key: node.key + ':header',\n      parentKey: node.key,\n      value: null,\n      level: node.level,\n      index: node.index,\n      hasChildNodes: false,\n      childNodes: [],\n      rendered: node.rendered,\n      textValue: node.textValue\n    };\n\n    // Build layout node for it and adjust y offset of section children.\n    let header = this.buildSectionHeader(headerNode, x, y);\n    header.node = headerNode;\n    header.layoutInfo.parentKey = node.key;\n    this.layoutNodes.set(headerNode.key, header);\n    y += header.layoutInfo.rect.height;\n\n    let section = super.buildSection(node, x, y);\n    section.children!.unshift(header);\n    return section;\n  }\n}\n"],"names":[],"version":3,"file":"ListBoxLayout.cjs.map"}
+{"mappings":";;;;;;;;;AAmBO,MAAM,iDAAyB,CAAA,GAAA,iDAAS;IAK7C,YAAY,IAA0B,CAAE;QACtC,KAAK,CAAC,YALA,YAAqB;QAM3B,IAAI,CAAC,iBAAiB,GAAG,KAAK,iBAAiB;QAC/C,IAAI,CAAC,QAAQ,GAAG,KAAK,QAAQ;IAC/B;IAEA,OAAO,mBAA4D,EAAQ;QACzE,IAAI,CAAC,SAAS,GAAG,oBAAoB,aAAa,EAAE,aAAa;QACjE,KAAK,CAAC,OAAO;IACf;IAEU,kBAAgC;QACxC,IAAI,QAAQ,KAAK,CAAC,gBAAgB,IAAI,CAAC,QAAQ;QAC/C,IAAI,IAAI,IAAI,CAAC,WAAW,CAAC,MAAM;QAE/B,IAAI,IAAI,CAAC,SAAS,EAAE;YAClB,IAAI,OAAO,IAAI,CAAA,GAAA,2CAAG,EAAE,GAAG,GAAG,IAAI,CAAC,WAAW,CAAE,WAAW,CAAC,KAAK,EAAE;YAC/D,IAAI,SAAS,IAAI,CAAA,GAAA,iDAAS,EAAE,UAAU,UAAU;YAChD,IAAI,OAAO;gBACT,YAAY;gBACZ,WAAW,OAAO,IAAI;YACxB;YACA,MAAM,IAAI,CAAC;YACX,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,OAAO,GAAG,EAAE;YACjC,IAAI,OAAO,IAAI,CAAC,IAAI;QACtB;QAEA,IAAI,MAAM,MAAM,KAAK,GAAG;YACtB,IAAI,OAAO,IAAI,CAAA,GAAA,2CAAG,EAChB,GACA,GACA,IAAI,CAAC,WAAW,CAAE,WAAW,CAAC,KAAK,EACnC,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,WAAW,CAAE,WAAW,CAAC,MAAM;YAEhE,IAAI,cAAc,IAAI,CAAA,GAAA,iDAAS,EAAE,eAAe,eAAe;YAC/D,IAAI,OAAO;gBACT,YAAY;gBACZ,WAAW,YAAY,IAAI;YAC7B;YACA,MAAM,IAAI,CAAC;YACX,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,YAAY,GAAG,EAAE;YACtC,IAAI,YAAY,IAAI,CAAC,IAAI;QAC3B;QAEA,IAAI,CAAC,WAAW,CAAC,MAAM,GAAG,IAAI,IAAI,CAAC,QAAQ;QAC3C,OAAO;IACT;IAEU,aAAa,IAAa,EAAE,CAAS,EAAE,CAAS,EAAc;QACtE,+CAA+C;QAC/C,IAAI,aAAa;YACf,MAAM;YACN,KAAK,KAAK,GAAG,GAAG;YAChB,WAAW,KAAK,GAAG;YACnB,OAAO;YACP,OAAO,KAAK,KAAK;YACjB,OAAO,KAAK,KAAK;YACjB,eAAe;YACf,YAAY,EAAE;YACd,UAAU,KAAK,QAAQ;YACvB,WAAW,KAAK,SAAS;QAC3B;QAEA,oEAAoE;QACpE,IAAI,SAAS,IAAI,CAAC,kBAAkB,CAAC,YAAY,GAAG;QACpD,OAAO,IAAI,GAAG;QACd,OAAO,UAAU,CAAC,SAAS,GAAG,KAAK,GAAG;QACtC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,WAAW,GAAG,EAAE;QACrC,KAAK,OAAO,UAAU,CAAC,IAAI,CAAC,MAAM;QAElC,IAAI,UAAU,KAAK,CAAC,aAAa,MAAM,GAAG;QAC1C,QAAQ,QAAQ,CAAE,OAAO,CAAC;QAC1B,OAAO;IACT;AACF","sources":["packages/@adobe/react-spectrum/src/listbox/ListBoxLayout.ts"],"sourcesContent":["import {\n  InvalidationContext,\n  LayoutInfo,\n  LayoutNode,\n  ListLayout,\n  ListLayoutOptions,\n  Rect\n} from 'react-stately/useVirtualizerState';\nimport {Node} from '@react-types/shared';\n\ninterface ListBoxLayoutProps extends ListLayoutOptions {\n  isLoading?: boolean;\n}\n\ninterface ListBoxLayoutOptions extends ListLayoutOptions {\n  placeholderHeight: number;\n  paddingY: number;\n}\n\nexport class ListBoxLayout<T> extends ListLayout<T, ListBoxLayoutProps> {\n  private isLoading: boolean = false;\n  private placeholderHeight: number;\n  private paddingY: number;\n\n  constructor(opts: ListBoxLayoutOptions) {\n    super(opts);\n    this.placeholderHeight = opts.placeholderHeight;\n    this.paddingY = opts.paddingY;\n  }\n\n  update(invalidationContext: InvalidationContext<ListBoxLayoutProps>): void {\n    this.isLoading = invalidationContext.layoutOptions?.isLoading || false;\n    super.update(invalidationContext);\n  }\n\n  protected buildCollection(): LayoutNode[] {\n    let nodes = super.buildCollection(this.paddingY);\n    let y = this.contentSize.height;\n\n    if (this.isLoading) {\n      let rect = new Rect(0, y, this.virtualizer!.visibleRect.width, 40);\n      let loader = new LayoutInfo('loader', 'loader', rect);\n      let node = {\n        layoutInfo: loader,\n        validRect: loader.rect\n      };\n      nodes.push(node);\n      this.layoutNodes.set(loader.key, node);\n      y = loader.rect.maxY;\n    }\n\n    if (nodes.length === 0) {\n      let rect = new Rect(\n        0,\n        y,\n        this.virtualizer!.visibleRect.width,\n        this.placeholderHeight ?? this.virtualizer!.visibleRect.height\n      );\n      let placeholder = new LayoutInfo('placeholder', 'placeholder', rect);\n      let node = {\n        layoutInfo: placeholder,\n        validRect: placeholder.rect\n      };\n      nodes.push(node);\n      this.layoutNodes.set(placeholder.key, node);\n      y = placeholder.rect.maxY;\n    }\n\n    this.contentSize.height = y + this.paddingY;\n    return nodes;\n  }\n\n  protected buildSection(node: Node<T>, x: number, y: number): LayoutNode {\n    // Synthesize a collection node for the header.\n    let headerNode = {\n      type: 'header',\n      key: node.key + ':header',\n      parentKey: node.key,\n      value: null,\n      level: node.level,\n      index: node.index,\n      hasChildNodes: false,\n      childNodes: [],\n      rendered: node.rendered,\n      textValue: node.textValue\n    };\n\n    // Build layout node for it and adjust y offset of section children.\n    let header = this.buildSectionHeader(headerNode, x, y);\n    header.node = headerNode;\n    header.layoutInfo.parentKey = node.key;\n    this.layoutNodes.set(headerNode.key, header);\n    y += header.layoutInfo.rect.height;\n\n    let section = super.buildSection(node, x, y);\n    section.children!.unshift(header);\n    return section;\n  }\n}\n"],"names":[],"version":3,"file":"ListBoxLayout.cjs.map"}

package/dist/private/listbox/ListBoxLayout.js.map

@@ -1 +1 @@
-{"mappings":";;;AAYO,MAAM,iDAAyB,CAAA,GAAA,iBAAS;IAW7C,OAAO,mBAA4D,EAAQ;YACxD;QAAjB,IAAI,CAAC,SAAS,GAAG,EAAA,qCAAA,oBAAoB,aAAa,cAAjC,yDAAA,mCAAmC,SAAS,KAAI;QACjE,KAAK,CAAC,OAAO;IACf;IAEU,kBAAgC;QACxC,IAAI,QAAQ,KAAK,CAAC,gBAAgB,IAAI,CAAC,QAAQ;QAC/C,IAAI,IAAI,IAAI,CAAC,WAAW,CAAC,MAAM;QAE/B,IAAI,IAAI,CAAC,SAAS,EAAE;YAClB,IAAI,OAAO,IAAI,CAAA,GAAA,WAAG,EAAE,GAAG,GAAG,IAAI,CAAC,WAAW,CAAE,WAAW,CAAC,KAAK,EAAE;YAC/D,IAAI,SAAS,IAAI,CAAA,GAAA,iBAAS,EAAE,UAAU,UAAU;YAChD,IAAI,OAAO;gBACT,YAAY;gBACZ,WAAW,OAAO,IAAI;YACxB;YACA,MAAM,IAAI,CAAC;YACX,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,OAAO,GAAG,EAAE;YACjC,IAAI,OAAO,IAAI,CAAC,IAAI;QACtB;QAEA,IAAI,MAAM,MAAM,KAAK,GAAG;gBACyC;YAA/D,IAAI,OAAO,IAAI,CAAA,GAAA,WAAG,EAAE,GAAG,GAAG,IAAI,CAAC,WAAW,CAAE,WAAW,CAAC,KAAK,EAAE,CAAA,0BAAA,IAAI,CAAC,iBAAiB,cAAtB,qCAAA,0BAA0B,IAAI,CAAC,WAAW,CAAE,WAAW,CAAC,MAAM;YAC7H,IAAI,cAAc,IAAI,CAAA,GAAA,iBAAS,EAAE,eAAe,eAAe;YAC/D,IAAI,OAAO;gBACT,YAAY;gBACZ,WAAW,YAAY,IAAI;YAC7B;YACA,MAAM,IAAI,CAAC;YACX,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,YAAY,GAAG,EAAE;YACtC,IAAI,YAAY,IAAI,CAAC,IAAI;QAC3B;QAEA,IAAI,CAAC,WAAW,CAAC,MAAM,GAAG,IAAI,IAAI,CAAC,QAAQ;QAC3C,OAAO;IACT;IAEU,aAAa,IAAa,EAAE,CAAS,EAAE,CAAS,EAAc;QACtE,+CAA+C;QAC/C,IAAI,aAAa;YACf,MAAM;YACN,KAAK,KAAK,GAAG,GAAG;YAChB,WAAW,KAAK,GAAG;YACnB,OAAO;YACP,OAAO,KAAK,KAAK;YACjB,OAAO,KAAK,KAAK;YACjB,eAAe;YACf,YAAY,EAAE;YACd,UAAU,KAAK,QAAQ;YACvB,WAAW,KAAK,SAAS;QAC3B;QAEA,oEAAoE;QACpE,IAAI,SAAS,IAAI,CAAC,kBAAkB,CAAC,YAAY,GAAG;QACpD,OAAO,IAAI,GAAG;QACd,OAAO,UAAU,CAAC,SAAS,GAAG,KAAK,GAAG;QACtC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,WAAW,GAAG,EAAE;QACrC,KAAK,OAAO,UAAU,CAAC,IAAI,CAAC,MAAM;QAElC,IAAI,UAAU,KAAK,CAAC,aAAa,MAAM,GAAG;QAC1C,QAAQ,QAAQ,CAAE,OAAO,CAAC;QAC1B,OAAO;IACT;IApEA,YAAY,IAA0B,CAAE;QACtC,KAAK,CAAC,YALA,YAAqB;QAM3B,IAAI,CAAC,iBAAiB,GAAG,KAAK,iBAAiB;QAC/C,IAAI,CAAC,QAAQ,GAAG,KAAK,QAAQ;IAC/B;AAiEF","sources":["packages/@adobe/react-spectrum/src/listbox/ListBoxLayout.ts"],"sourcesContent":["import {InvalidationContext, LayoutInfo, LayoutNode, ListLayout, ListLayoutOptions, Rect} from 'react-stately/useVirtualizerState';\nimport {Node} from '@react-types/shared';\n\ninterface ListBoxLayoutProps extends ListLayoutOptions {\n  isLoading?: boolean\n}\n\ninterface ListBoxLayoutOptions extends ListLayoutOptions {\n  placeholderHeight: number,\n  paddingY: number\n}\n\nexport class ListBoxLayout<T> extends ListLayout<T, ListBoxLayoutProps> {\n  private isLoading: boolean = false;\n  private placeholderHeight: number;\n  private paddingY: number;\n\n  constructor(opts: ListBoxLayoutOptions) {\n    super(opts);\n    this.placeholderHeight = opts.placeholderHeight;\n    this.paddingY = opts.paddingY;\n  }\n\n  update(invalidationContext: InvalidationContext<ListBoxLayoutProps>): void {\n    this.isLoading = invalidationContext.layoutOptions?.isLoading || false;\n    super.update(invalidationContext);\n  }\n\n  protected buildCollection(): LayoutNode[] {\n    let nodes = super.buildCollection(this.paddingY);\n    let y = this.contentSize.height;\n\n    if (this.isLoading) {\n      let rect = new Rect(0, y, this.virtualizer!.visibleRect.width, 40);\n      let loader = new LayoutInfo('loader', 'loader', rect);\n      let node = {\n        layoutInfo: loader,\n        validRect: loader.rect\n      };\n      nodes.push(node);\n      this.layoutNodes.set(loader.key, node);\n      y = loader.rect.maxY;\n    }\n\n    if (nodes.length === 0) {\n      let rect = new Rect(0, y, this.virtualizer!.visibleRect.width, this.placeholderHeight ?? this.virtualizer!.visibleRect.height);\n      let placeholder = new LayoutInfo('placeholder', 'placeholder', rect);\n      let node = {\n        layoutInfo: placeholder,\n        validRect: placeholder.rect\n      };\n      nodes.push(node);\n      this.layoutNodes.set(placeholder.key, node);\n      y = placeholder.rect.maxY;\n    }\n\n    this.contentSize.height = y + this.paddingY;\n    return nodes;\n  }\n\n  protected buildSection(node: Node<T>, x: number, y: number): LayoutNode {\n    // Synthesize a collection node for the header.\n    let headerNode = {\n      type: 'header',\n      key: node.key + ':header',\n      parentKey: node.key,\n      value: null,\n      level: node.level,\n      index: node.index,\n      hasChildNodes: false,\n      childNodes: [],\n      rendered: node.rendered,\n      textValue: node.textValue\n    };\n\n    // Build layout node for it and adjust y offset of section children.\n    let header = this.buildSectionHeader(headerNode, x, y);\n    header.node = headerNode;\n    header.layoutInfo.parentKey = node.key;\n    this.layoutNodes.set(headerNode.key, header);\n    y += header.layoutInfo.rect.height;\n\n    let section = super.buildSection(node, x, y);\n    section.children!.unshift(header);\n    return section;\n  }\n}\n"],"names":[],"version":3,"file":"ListBoxLayout.js.map"}
+{"mappings":";;;AAmBO,MAAM,iDAAyB,CAAA,GAAA,iBAAS;IAW7C,OAAO,mBAA4D,EAAQ;YACxD;QAAjB,IAAI,CAAC,SAAS,GAAG,EAAA,qCAAA,oBAAoB,aAAa,cAAjC,yDAAA,mCAAmC,SAAS,KAAI;QACjE,KAAK,CAAC,OAAO;IACf;IAEU,kBAAgC;QACxC,IAAI,QAAQ,KAAK,CAAC,gBAAgB,IAAI,CAAC,QAAQ;QAC/C,IAAI,IAAI,IAAI,CAAC,WAAW,CAAC,MAAM;QAE/B,IAAI,IAAI,CAAC,SAAS,EAAE;YAClB,IAAI,OAAO,IAAI,CAAA,GAAA,WAAG,EAAE,GAAG,GAAG,IAAI,CAAC,WAAW,CAAE,WAAW,CAAC,KAAK,EAAE;YAC/D,IAAI,SAAS,IAAI,CAAA,GAAA,iBAAS,EAAE,UAAU,UAAU;YAChD,IAAI,OAAO;gBACT,YAAY;gBACZ,WAAW,OAAO,IAAI;YACxB;YACA,MAAM,IAAI,CAAC;YACX,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,OAAO,GAAG,EAAE;YACjC,IAAI,OAAO,IAAI,CAAC,IAAI;QACtB;QAEA,IAAI,MAAM,MAAM,KAAK,GAAG;gBAKpB;YAJF,IAAI,OAAO,IAAI,CAAA,GAAA,WAAG,EAChB,GACA,GACA,IAAI,CAAC,WAAW,CAAE,WAAW,CAAC,KAAK,EACnC,CAAA,0BAAA,IAAI,CAAC,iBAAiB,cAAtB,qCAAA,0BAA0B,IAAI,CAAC,WAAW,CAAE,WAAW,CAAC,MAAM;YAEhE,IAAI,cAAc,IAAI,CAAA,GAAA,iBAAS,EAAE,eAAe,eAAe;YAC/D,IAAI,OAAO;gBACT,YAAY;gBACZ,WAAW,YAAY,IAAI;YAC7B;YACA,MAAM,IAAI,CAAC;YACX,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,YAAY,GAAG,EAAE;YACtC,IAAI,YAAY,IAAI,CAAC,IAAI;QAC3B;QAEA,IAAI,CAAC,WAAW,CAAC,MAAM,GAAG,IAAI,IAAI,CAAC,QAAQ;QAC3C,OAAO;IACT;IAEU,aAAa,IAAa,EAAE,CAAS,EAAE,CAAS,EAAc;QACtE,+CAA+C;QAC/C,IAAI,aAAa;YACf,MAAM;YACN,KAAK,KAAK,GAAG,GAAG;YAChB,WAAW,KAAK,GAAG;YACnB,OAAO;YACP,OAAO,KAAK,KAAK;YACjB,OAAO,KAAK,KAAK;YACjB,eAAe;YACf,YAAY,EAAE;YACd,UAAU,KAAK,QAAQ;YACvB,WAAW,KAAK,SAAS;QAC3B;QAEA,oEAAoE;QACpE,IAAI,SAAS,IAAI,CAAC,kBAAkB,CAAC,YAAY,GAAG;QACpD,OAAO,IAAI,GAAG;QACd,OAAO,UAAU,CAAC,SAAS,GAAG,KAAK,GAAG;QACtC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,WAAW,GAAG,EAAE;QACrC,KAAK,OAAO,UAAU,CAAC,IAAI,CAAC,MAAM;QAElC,IAAI,UAAU,KAAK,CAAC,aAAa,MAAM,GAAG;QAC1C,QAAQ,QAAQ,CAAE,OAAO,CAAC;QAC1B,OAAO;IACT;IAzEA,YAAY,IAA0B,CAAE;QACtC,KAAK,CAAC,YALA,YAAqB;QAM3B,IAAI,CAAC,iBAAiB,GAAG,KAAK,iBAAiB;QAC/C,IAAI,CAAC,QAAQ,GAAG,KAAK,QAAQ;IAC/B;AAsEF","sources":["packages/@adobe/react-spectrum/src/listbox/ListBoxLayout.ts"],"sourcesContent":["import {\n  InvalidationContext,\n  LayoutInfo,\n  LayoutNode,\n  ListLayout,\n  ListLayoutOptions,\n  Rect\n} from 'react-stately/useVirtualizerState';\nimport {Node} from '@react-types/shared';\n\ninterface ListBoxLayoutProps extends ListLayoutOptions {\n  isLoading?: boolean;\n}\n\ninterface ListBoxLayoutOptions extends ListLayoutOptions {\n  placeholderHeight: number;\n  paddingY: number;\n}\n\nexport class ListBoxLayout<T> extends ListLayout<T, ListBoxLayoutProps> {\n  private isLoading: boolean = false;\n  private placeholderHeight: number;\n  private paddingY: number;\n\n  constructor(opts: ListBoxLayoutOptions) {\n    super(opts);\n    this.placeholderHeight = opts.placeholderHeight;\n    this.paddingY = opts.paddingY;\n  }\n\n  update(invalidationContext: InvalidationContext<ListBoxLayoutProps>): void {\n    this.isLoading = invalidationContext.layoutOptions?.isLoading || false;\n    super.update(invalidationContext);\n  }\n\n  protected buildCollection(): LayoutNode[] {\n    let nodes = super.buildCollection(this.paddingY);\n    let y = this.contentSize.height;\n\n    if (this.isLoading) {\n      let rect = new Rect(0, y, this.virtualizer!.visibleRect.width, 40);\n      let loader = new LayoutInfo('loader', 'loader', rect);\n      let node = {\n        layoutInfo: loader,\n        validRect: loader.rect\n      };\n      nodes.push(node);\n      this.layoutNodes.set(loader.key, node);\n      y = loader.rect.maxY;\n    }\n\n    if (nodes.length === 0) {\n      let rect = new Rect(\n        0,\n        y,\n        this.virtualizer!.visibleRect.width,\n        this.placeholderHeight ?? this.virtualizer!.visibleRect.height\n      );\n      let placeholder = new LayoutInfo('placeholder', 'placeholder', rect);\n      let node = {\n        layoutInfo: placeholder,\n        validRect: placeholder.rect\n      };\n      nodes.push(node);\n      this.layoutNodes.set(placeholder.key, node);\n      y = placeholder.rect.maxY;\n    }\n\n    this.contentSize.height = y + this.paddingY;\n    return nodes;\n  }\n\n  protected buildSection(node: Node<T>, x: number, y: number): LayoutNode {\n    // Synthesize a collection node for the header.\n    let headerNode = {\n      type: 'header',\n      key: node.key + ':header',\n      parentKey: node.key,\n      value: null,\n      level: node.level,\n      index: node.index,\n      hasChildNodes: false,\n      childNodes: [],\n      rendered: node.rendered,\n      textValue: node.textValue\n    };\n\n    // Build layout node for it and adjust y offset of section children.\n    let header = this.buildSectionHeader(headerNode, x, y);\n    header.node = headerNode;\n    header.layoutInfo.parentKey = node.key;\n    this.layoutNodes.set(headerNode.key, header);\n    y += header.layoutInfo.rect.height;\n\n    let section = super.buildSection(node, x, y);\n    section.children!.unshift(header);\n    return section;\n  }\n}\n"],"names":[],"version":3,"file":"ListBoxLayout.js.map"}

package/dist/private/listbox/ListBoxLayout.mjs.map

@@ -1 +1 @@
-{"mappings":";;;AAYO,MAAM,iDAAyB,CAAA,GAAA,iBAAS;IAK7C,YAAY,IAA0B,CAAE;QACtC,KAAK,CAAC,YALA,YAAqB;QAM3B,IAAI,CAAC,iBAAiB,GAAG,KAAK,iBAAiB;QAC/C,IAAI,CAAC,QAAQ,GAAG,KAAK,QAAQ;IAC/B;IAEA,OAAO,mBAA4D,EAAQ;QACzE,IAAI,CAAC,SAAS,GAAG,oBAAoB,aAAa,EAAE,aAAa;QACjE,KAAK,CAAC,OAAO;IACf;IAEU,kBAAgC;QACxC,IAAI,QAAQ,KAAK,CAAC,gBAAgB,IAAI,CAAC,QAAQ;QAC/C,IAAI,IAAI,IAAI,CAAC,WAAW,CAAC,MAAM;QAE/B,IAAI,IAAI,CAAC,SAAS,EAAE;YAClB,IAAI,OAAO,IAAI,CAAA,GAAA,WAAG,EAAE,GAAG,GAAG,IAAI,CAAC,WAAW,CAAE,WAAW,CAAC,KAAK,EAAE;YAC/D,IAAI,SAAS,IAAI,CAAA,GAAA,iBAAS,EAAE,UAAU,UAAU;YAChD,IAAI,OAAO;gBACT,YAAY;gBACZ,WAAW,OAAO,IAAI;YACxB;YACA,MAAM,IAAI,CAAC;YACX,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,OAAO,GAAG,EAAE;YACjC,IAAI,OAAO,IAAI,CAAC,IAAI;QACtB;QAEA,IAAI,MAAM,MAAM,KAAK,GAAG;YACtB,IAAI,OAAO,IAAI,CAAA,GAAA,WAAG,EAAE,GAAG,GAAG,IAAI,CAAC,WAAW,CAAE,WAAW,CAAC,KAAK,EAAE,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,WAAW,CAAE,WAAW,CAAC,MAAM;YAC7H,IAAI,cAAc,IAAI,CAAA,GAAA,iBAAS,EAAE,eAAe,eAAe;YAC/D,IAAI,OAAO;gBACT,YAAY;gBACZ,WAAW,YAAY,IAAI;YAC7B;YACA,MAAM,IAAI,CAAC;YACX,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,YAAY,GAAG,EAAE;YACtC,IAAI,YAAY,IAAI,CAAC,IAAI;QAC3B;QAEA,IAAI,CAAC,WAAW,CAAC,MAAM,GAAG,IAAI,IAAI,CAAC,QAAQ;QAC3C,OAAO;IACT;IAEU,aAAa,IAAa,EAAE,CAAS,EAAE,CAAS,EAAc;QACtE,+CAA+C;QAC/C,IAAI,aAAa;YACf,MAAM;YACN,KAAK,KAAK,GAAG,GAAG;YAChB,WAAW,KAAK,GAAG;YACnB,OAAO;YACP,OAAO,KAAK,KAAK;YACjB,OAAO,KAAK,KAAK;YACjB,eAAe;YACf,YAAY,EAAE;YACd,UAAU,KAAK,QAAQ;YACvB,WAAW,KAAK,SAAS;QAC3B;QAEA,oEAAoE;QACpE,IAAI,SAAS,IAAI,CAAC,kBAAkB,CAAC,YAAY,GAAG;QACpD,OAAO,IAAI,GAAG;QACd,OAAO,UAAU,CAAC,SAAS,GAAG,KAAK,GAAG;QACtC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,WAAW,GAAG,EAAE;QACrC,KAAK,OAAO,UAAU,CAAC,IAAI,CAAC,MAAM;QAElC,IAAI,UAAU,KAAK,CAAC,aAAa,MAAM,GAAG;QAC1C,QAAQ,QAAQ,CAAE,OAAO,CAAC;QAC1B,OAAO;IACT;AACF","sources":["packages/@adobe/react-spectrum/src/listbox/ListBoxLayout.ts"],"sourcesContent":["import {InvalidationContext, LayoutInfo, LayoutNode, ListLayout, ListLayoutOptions, Rect} from 'react-stately/useVirtualizerState';\nimport {Node} from '@react-types/shared';\n\ninterface ListBoxLayoutProps extends ListLayoutOptions {\n  isLoading?: boolean\n}\n\ninterface ListBoxLayoutOptions extends ListLayoutOptions {\n  placeholderHeight: number,\n  paddingY: number\n}\n\nexport class ListBoxLayout<T> extends ListLayout<T, ListBoxLayoutProps> {\n  private isLoading: boolean = false;\n  private placeholderHeight: number;\n  private paddingY: number;\n\n  constructor(opts: ListBoxLayoutOptions) {\n    super(opts);\n    this.placeholderHeight = opts.placeholderHeight;\n    this.paddingY = opts.paddingY;\n  }\n\n  update(invalidationContext: InvalidationContext<ListBoxLayoutProps>): void {\n    this.isLoading = invalidationContext.layoutOptions?.isLoading || false;\n    super.update(invalidationContext);\n  }\n\n  protected buildCollection(): LayoutNode[] {\n    let nodes = super.buildCollection(this.paddingY);\n    let y = this.contentSize.height;\n\n    if (this.isLoading) {\n      let rect = new Rect(0, y, this.virtualizer!.visibleRect.width, 40);\n      let loader = new LayoutInfo('loader', 'loader', rect);\n      let node = {\n        layoutInfo: loader,\n        validRect: loader.rect\n      };\n      nodes.push(node);\n      this.layoutNodes.set(loader.key, node);\n      y = loader.rect.maxY;\n    }\n\n    if (nodes.length === 0) {\n      let rect = new Rect(0, y, this.virtualizer!.visibleRect.width, this.placeholderHeight ?? this.virtualizer!.visibleRect.height);\n      let placeholder = new LayoutInfo('placeholder', 'placeholder', rect);\n      let node = {\n        layoutInfo: placeholder,\n        validRect: placeholder.rect\n      };\n      nodes.push(node);\n      this.layoutNodes.set(placeholder.key, node);\n      y = placeholder.rect.maxY;\n    }\n\n    this.contentSize.height = y + this.paddingY;\n    return nodes;\n  }\n\n  protected buildSection(node: Node<T>, x: number, y: number): LayoutNode {\n    // Synthesize a collection node for the header.\n    let headerNode = {\n      type: 'header',\n      key: node.key + ':header',\n      parentKey: node.key,\n      value: null,\n      level: node.level,\n      index: node.index,\n      hasChildNodes: false,\n      childNodes: [],\n      rendered: node.rendered,\n      textValue: node.textValue\n    };\n\n    // Build layout node for it and adjust y offset of section children.\n    let header = this.buildSectionHeader(headerNode, x, y);\n    header.node = headerNode;\n    header.layoutInfo.parentKey = node.key;\n    this.layoutNodes.set(headerNode.key, header);\n    y += header.layoutInfo.rect.height;\n\n    let section = super.buildSection(node, x, y);\n    section.children!.unshift(header);\n    return section;\n  }\n}\n"],"names":[],"version":3,"file":"ListBoxLayout.mjs.map"}
+{"mappings":";;;AAmBO,MAAM,iDAAyB,CAAA,GAAA,iBAAS;IAK7C,YAAY,IAA0B,CAAE;QACtC,KAAK,CAAC,YALA,YAAqB;QAM3B,IAAI,CAAC,iBAAiB,GAAG,KAAK,iBAAiB;QAC/C,IAAI,CAAC,QAAQ,GAAG,KAAK,QAAQ;IAC/B;IAEA,OAAO,mBAA4D,EAAQ;QACzE,IAAI,CAAC,SAAS,GAAG,oBAAoB,aAAa,EAAE,aAAa;QACjE,KAAK,CAAC,OAAO;IACf;IAEU,kBAAgC;QACxC,IAAI,QAAQ,KAAK,CAAC,gBAAgB,IAAI,CAAC,QAAQ;QAC/C,IAAI,IAAI,IAAI,CAAC,WAAW,CAAC,MAAM;QAE/B,IAAI,IAAI,CAAC,SAAS,EAAE;YAClB,IAAI,OAAO,IAAI,CAAA,GAAA,WAAG,EAAE,GAAG,GAAG,IAAI,CAAC,WAAW,CAAE,WAAW,CAAC,KAAK,EAAE;YAC/D,IAAI,SAAS,IAAI,CAAA,GAAA,iBAAS,EAAE,UAAU,UAAU;YAChD,IAAI,OAAO;gBACT,YAAY;gBACZ,WAAW,OAAO,IAAI;YACxB;YACA,MAAM,IAAI,CAAC;YACX,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,OAAO,GAAG,EAAE;YACjC,IAAI,OAAO,IAAI,CAAC,IAAI;QACtB;QAEA,IAAI,MAAM,MAAM,KAAK,GAAG;YACtB,IAAI,OAAO,IAAI,CAAA,GAAA,WAAG,EAChB,GACA,GACA,IAAI,CAAC,WAAW,CAAE,WAAW,CAAC,KAAK,EACnC,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,WAAW,CAAE,WAAW,CAAC,MAAM;YAEhE,IAAI,cAAc,IAAI,CAAA,GAAA,iBAAS,EAAE,eAAe,eAAe;YAC/D,IAAI,OAAO;gBACT,YAAY;gBACZ,WAAW,YAAY,IAAI;YAC7B;YACA,MAAM,IAAI,CAAC;YACX,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,YAAY,GAAG,EAAE;YACtC,IAAI,YAAY,IAAI,CAAC,IAAI;QAC3B;QAEA,IAAI,CAAC,WAAW,CAAC,MAAM,GAAG,IAAI,IAAI,CAAC,QAAQ;QAC3C,OAAO;IACT;IAEU,aAAa,IAAa,EAAE,CAAS,EAAE,CAAS,EAAc;QACtE,+CAA+C;QAC/C,IAAI,aAAa;YACf,MAAM;YACN,KAAK,KAAK,GAAG,GAAG;YAChB,WAAW,KAAK,GAAG;YACnB,OAAO;YACP,OAAO,KAAK,KAAK;YACjB,OAAO,KAAK,KAAK;YACjB,eAAe;YACf,YAAY,EAAE;YACd,UAAU,KAAK,QAAQ;YACvB,WAAW,KAAK,SAAS;QAC3B;QAEA,oEAAoE;QACpE,IAAI,SAAS,IAAI,CAAC,kBAAkB,CAAC,YAAY,GAAG;QACpD,OAAO,IAAI,GAAG;QACd,OAAO,UAAU,CAAC,SAAS,GAAG,KAAK,GAAG;QACtC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,WAAW,GAAG,EAAE;QACrC,KAAK,OAAO,UAAU,CAAC,IAAI,CAAC,MAAM;QAElC,IAAI,UAAU,KAAK,CAAC,aAAa,MAAM,GAAG;QAC1C,QAAQ,QAAQ,CAAE,OAAO,CAAC;QAC1B,OAAO;IACT;AACF","sources":["packages/@adobe/react-spectrum/src/listbox/ListBoxLayout.ts"],"sourcesContent":["import {\n  InvalidationContext,\n  LayoutInfo,\n  LayoutNode,\n  ListLayout,\n  ListLayoutOptions,\n  Rect\n} from 'react-stately/useVirtualizerState';\nimport {Node} from '@react-types/shared';\n\ninterface ListBoxLayoutProps extends ListLayoutOptions {\n  isLoading?: boolean;\n}\n\ninterface ListBoxLayoutOptions extends ListLayoutOptions {\n  placeholderHeight: number;\n  paddingY: number;\n}\n\nexport class ListBoxLayout<T> extends ListLayout<T, ListBoxLayoutProps> {\n  private isLoading: boolean = false;\n  private placeholderHeight: number;\n  private paddingY: number;\n\n  constructor(opts: ListBoxLayoutOptions) {\n    super(opts);\n    this.placeholderHeight = opts.placeholderHeight;\n    this.paddingY = opts.paddingY;\n  }\n\n  update(invalidationContext: InvalidationContext<ListBoxLayoutProps>): void {\n    this.isLoading = invalidationContext.layoutOptions?.isLoading || false;\n    super.update(invalidationContext);\n  }\n\n  protected buildCollection(): LayoutNode[] {\n    let nodes = super.buildCollection(this.paddingY);\n    let y = this.contentSize.height;\n\n    if (this.isLoading) {\n      let rect = new Rect(0, y, this.virtualizer!.visibleRect.width, 40);\n      let loader = new LayoutInfo('loader', 'loader', rect);\n      let node = {\n        layoutInfo: loader,\n        validRect: loader.rect\n      };\n      nodes.push(node);\n      this.layoutNodes.set(loader.key, node);\n      y = loader.rect.maxY;\n    }\n\n    if (nodes.length === 0) {\n      let rect = new Rect(\n        0,\n        y,\n        this.virtualizer!.visibleRect.width,\n        this.placeholderHeight ?? this.virtualizer!.visibleRect.height\n      );\n      let placeholder = new LayoutInfo('placeholder', 'placeholder', rect);\n      let node = {\n        layoutInfo: placeholder,\n        validRect: placeholder.rect\n      };\n      nodes.push(node);\n      this.layoutNodes.set(placeholder.key, node);\n      y = placeholder.rect.maxY;\n    }\n\n    this.contentSize.height = y + this.paddingY;\n    return nodes;\n  }\n\n  protected buildSection(node: Node<T>, x: number, y: number): LayoutNode {\n    // Synthesize a collection node for the header.\n    let headerNode = {\n      type: 'header',\n      key: node.key + ':header',\n      parentKey: node.key,\n      value: null,\n      level: node.level,\n      index: node.index,\n      hasChildNodes: false,\n      childNodes: [],\n      rendered: node.rendered,\n      textValue: node.textValue\n    };\n\n    // Build layout node for it and adjust y offset of section children.\n    let header = this.buildSectionHeader(headerNode, x, y);\n    header.node = headerNode;\n    header.layoutInfo.parentKey = node.key;\n    this.layoutNodes.set(headerNode.key, header);\n    y += header.layoutInfo.rect.height;\n\n    let section = super.buildSection(node, x, y);\n    section.children!.unshift(header);\n    return section;\n  }\n}\n"],"names":[],"version":3,"file":"ListBoxLayout.mjs.map"}

package/dist/private/listbox/ListBoxOption.cjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;;;AAsBM,SAAS,0CAAiB,KAAqB;IACpD,IAAI,QAAC,IAAI,EAAC,GAAG;IAEb,IAAI,YACF,QAAQ,OACR,GAAG,EACJ,GAAG;IACJ,IAAI,cAAiC,KAAK,KAAK,CAAC,IAAI,GAAG,MAAM;IAC7D,IAAI,SAAC,KAAK,sBAAE,kBAAkB,yBAAE,qBAAqB,EAAC,GAAG,CAAA,GAAA,uBAAS,EAAE,CAAA,GAAA,wCAAa;IAEjF,IAAI,MAAM,CAAA,GAAA,mBAAK,EAAO;IACtB,IAAI,eAAC,WAAW,cAAE,UAAU,oBAAE,gBAAgB,cAAE,UAAU,cAAE,UAAU,aAAE,SAAS,EAAC,GAAG,CAAA,GAAA,oCAAQ,EAC3F;QACE,cAAc,IAAI,CAAC,aAAa;aAChC;QACA,eAAe;IACjB,GACA,OACA;IAEF,IAAI,cAAC,UAAU,aAAE,SAAS,EAAC,GAAG,CAAA,GAAA,iCAAO,EAAE;QACrC,GAAG,KAAK;oBACR;IACF;IAEA,IAAI,WAAW,OAAO,aAAa,yBAC/B,0DAAC,CAAA,GAAA,8BAAG,SAAG,YACP;IAEJ,IAAI,qBAAqB,CAAA,GAAA,iEAAa;IAEtC,qBACE,0DAAC,CAAA,GAAA,mCAAQ;QAAE,gBAAgB,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;qBAC5C,0DAAC;QACE,GAAG,CAAA,GAAA,qCAAS,EAAE,aAAa,qBAAqB,CAAC,IAAI,WAAW;QACjE,KAAK;QACL,WAAW,CAAA,GAAA,oCAAS,EAClB,CAAA,GAAA,mDAAK,GACL,sBACA;YACE,+GAA+G;YAC/G,cAAc,yBAAyB,aAAa;YACpD,eAAe;YACf,eAAe;YACf,iBAAiB,MAAM,gBAAgB,CAAC,aAAa,KAAK;YAC1D,yFAAyF;YACzF,0EAA0E;YAC1E,cAAc,AAAC,aAAa,CAAC,sBAAwB,aAAa,CAAC;QACrE;qBAEF,0DAAC,CAAA,GAAA,8BAAG;QACF,kBACE,CAAA,GAAA,oCAAS,EACP,CAAA,GAAA,mDAAK,GACL;qBAGJ,0DAAC,CAAA,GAAA,oCAAS,uBACR,0DAAC,CAAA,GAAA,sCAAW;QACV,OAAO;YACL,MAAM;gBAAC,kBAAkB,CAAA,GAAA,mDAAK,CAAC,CAAC,0BAA0B;gBAAE,GAAG,UAAU;YAAA;YACzE,MAAM;gBAAC,MAAM;gBAAK,kBAAkB,CAAA,GAAA,mDAAK,CAAC,CAAC,qBAAqB;YAAA;YAChE,QAAQ;gBAAC,MAAM;gBAAmB,kBAAkB,CAAA,GAAA,mDAAK,CAAC,CAAC,uBAAuB;YAAA;YAClF,aAAa;gBAAC,kBAAkB,CAAA,GAAA,mDAAK,CAAC,CAAC,4BAA4B;gBAAE,GAAG,gBAAgB;YAAA;QAC1F;OACC,UACA,4BACC,0DAAC,CAAA,GAAA,+DAAc;QACb,MAAK;QACL,kBACE,CAAA,GAAA,oCAAS,EACP,CAAA,GAAA,mDAAK,GACL;;AAUtB","sources":["packages/@adobe/react-spectrum/src/listbox/ListBoxOption.tsx"],"sourcesContent":["/*\n * Copyright 2020 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\nimport CheckmarkMedium from '@spectrum-icons/ui/CheckmarkMedium';\nimport {classNames} from '../utils/classNames';\nimport {ClearSlots, SlotProvider} from '../utils/Slots';\nimport {FocusRing} from 'react-aria/FocusRing';\nimport {Grid} from '../layout/Grid';\nimport {isFocusVisible} from 'react-aria/private/interactions/useFocusVisible';\nimport {ListBoxContext} from './ListBoxContext';\nimport {mergeProps} from 'react-aria/mergeProps';\nimport {Node} from '@react-types/shared';\nimport React, {JSX, useContext, useRef} from 'react';\nimport styles from '@adobe/spectrum-css-temp/components/menu/vars.css';\nimport {Text} from '../text/Text';\nimport {useHover} from 'react-aria/useHover';\nimport {useOption} from 'react-aria/useListBox';\n\ninterface OptionProps<T> {\n  item: Node<T>\n}\n\n/** @private */\nexport function ListBoxOption<T>(props: OptionProps<T>): JSX.Element {\n  let {item} = props;\n\n  let {\n    rendered,\n    key\n  } = item;\n  let ElementType: React.ElementType = item.props.href ? 'a' : 'div';\n  let {state, shouldFocusOnHover, shouldUseVirtualFocus} = useContext(ListBoxContext)!;\n\n  let ref = useRef<any>(undefined);\n  let {optionProps, labelProps, descriptionProps, isSelected, isDisabled, isFocused} = useOption(\n    {\n      'aria-label': item['aria-label'],\n      key,\n      isVirtualized: true\n    },\n    state,\n    ref\n  );\n  let {hoverProps, isHovered} = useHover({\n    ...props,\n    isDisabled\n  });\n\n  let contents = typeof rendered === 'string'\n    ? <Text>{rendered}</Text>\n    : rendered;\n\n  let isKeyboardModality = isFocusVisible();\n\n  return (\n    <FocusRing focusRingClass={classNames(styles, 'focus-ring')}>\n      <ElementType\n        {...mergeProps(optionProps, shouldFocusOnHover ? {} : hoverProps)}\n        ref={ref}\n        className={classNames(\n          styles,\n          'spectrum-Menu-item',\n          {\n            // If using virtual focus, apply focused styles to the item when the user is interacting with keyboard modality\n            'is-focused': shouldUseVirtualFocus && isFocused && isKeyboardModality,\n            'is-disabled': isDisabled,\n            'is-selected': isSelected,\n            'is-selectable': state.selectionManager.selectionMode !== 'none',\n            // When shouldFocusOnHover is false, apply hover styles both when hovered with the mouse.\n            // Otherwise, apply hover styles when focused using non-keyboard modality.\n            'is-hovered': (isHovered && !shouldFocusOnHover) || (isFocused && !isKeyboardModality)\n          }\n        )}>\n        <Grid\n          UNSAFE_className={\n            classNames(\n              styles,\n              'spectrum-Menu-itemGrid'\n            )\n          }>\n          <ClearSlots>\n            <SlotProvider\n              slots={{\n                text: {UNSAFE_className: styles['spectrum-Menu-itemLabel'], ...labelProps},\n                icon: {size: 'S', UNSAFE_className: styles['spectrum-Menu-icon']},\n                avatar: {size: 'avatar-size-100', UNSAFE_className: styles['spectrum-Menu-avatar']},\n                description: {UNSAFE_className: styles['spectrum-Menu-description'], ...descriptionProps}\n              }}>\n              {contents}\n              {isSelected &&\n                <CheckmarkMedium\n                  slot=\"checkmark\"\n                  UNSAFE_className={\n                    classNames(\n                      styles,\n                      'spectrum-Menu-checkmark'\n                    )\n                  } />\n              }\n            </SlotProvider>\n          </ClearSlots>\n        </Grid>\n      </ElementType>\n    </FocusRing>\n  );\n}\n"],"names":[],"version":3,"file":"ListBoxOption.cjs.map"}
+{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;;;AAsBM,SAAS,0CAAiB,KAAqB;IACpD,IAAI,QAAC,IAAI,EAAC,GAAG;IAEb,IAAI,YAAC,QAAQ,OAAE,GAAG,EAAC,GAAG;IACtB,IAAI,cAAiC,KAAK,KAAK,CAAC,IAAI,GAAG,MAAM;IAC7D,IAAI,SAAC,KAAK,sBAAE,kBAAkB,yBAAE,qBAAqB,EAAC,GAAG,CAAA,GAAA,uBAAS,EAAE,CAAA,GAAA,wCAAa;IAEjF,IAAI,MAAM,CAAA,GAAA,mBAAK,EAAO;IACtB,IAAI,eAAC,WAAW,cAAE,UAAU,oBAAE,gBAAgB,cAAE,UAAU,cAAE,UAAU,aAAE,SAAS,EAAC,GAAG,CAAA,GAAA,oCAAQ,EAC3F;QACE,cAAc,IAAI,CAAC,aAAa;aAChC;QACA,eAAe;IACjB,GACA,OACA;IAEF,IAAI,cAAC,UAAU,aAAE,SAAS,EAAC,GAAG,CAAA,GAAA,iCAAO,EAAE;QACrC,GAAG,KAAK;oBACR;IACF;IAEA,IAAI,WAAW,OAAO,aAAa,yBAAW,0DAAC,CAAA,GAAA,8BAAG,SAAG,YAAmB;IAExE,IAAI,qBAAqB,CAAA,GAAA,iEAAa;IAEtC,qBACE,0DAAC,CAAA,GAAA,mCAAQ;QAAE,gBAAgB,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;qBAC5C,0DAAC;QACE,GAAG,CAAA,GAAA,qCAAS,EAAE,aAAa,qBAAqB,CAAC,IAAI,WAAW;QACjE,KAAK;QACL,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG,sBAAsB;YAClD,+GAA+G;YAC/G,cAAc,yBAAyB,aAAa;YACpD,eAAe;YACf,eAAe;YACf,iBAAiB,MAAM,gBAAgB,CAAC,aAAa,KAAK;YAC1D,yFAAyF;YACzF,0EAA0E;YAC1E,cAAc,AAAC,aAAa,CAAC,sBAAwB,aAAa,CAAC;QACrE;qBACA,0DAAC,CAAA,GAAA,8BAAG;QAAE,kBAAkB,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;qBACzC,0DAAC,CAAA,GAAA,oCAAS,uBACR,0DAAC,CAAA,GAAA,sCAAW;QACV,OAAO;YACL,MAAM;gBAAC,kBAAkB,CAAA,GAAA,mDAAK,CAAC,CAAC,0BAA0B;gBAAE,GAAG,UAAU;YAAA;YACzE,MAAM;gBAAC,MAAM;gBAAK,kBAAkB,CAAA,GAAA,mDAAK,CAAC,CAAC,qBAAqB;YAAA;YAChE,QAAQ;gBAAC,MAAM;gBAAmB,kBAAkB,CAAA,GAAA,mDAAK,CAAC,CAAC,uBAAuB;YAAA;YAClF,aAAa;gBACX,kBAAkB,CAAA,GAAA,mDAAK,CAAC,CAAC,4BAA4B;gBACrD,GAAG,gBAAgB;YACrB;QACF;OACC,UACA,4BACC,0DAAC,CAAA,GAAA,+DAAc;QACb,MAAK;QACL,kBAAkB,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;;AASvD","sources":["packages/@adobe/react-spectrum/src/listbox/ListBoxOption.tsx"],"sourcesContent":["/*\n * Copyright 2020 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\nimport CheckmarkMedium from '@spectrum-icons/ui/CheckmarkMedium';\nimport {classNames} from '../utils/classNames';\nimport {ClearSlots, SlotProvider} from '../utils/Slots';\nimport {FocusRing} from 'react-aria/FocusRing';\nimport {Grid} from '../layout/Grid';\nimport {isFocusVisible} from 'react-aria/private/interactions/useFocusVisible';\nimport {ListBoxContext} from './ListBoxContext';\nimport {mergeProps} from 'react-aria/mergeProps';\nimport {Node} from '@react-types/shared';\nimport React, {JSX, useContext, useRef} from 'react';\nimport styles from '@adobe/spectrum-css-temp/components/menu/vars.css';\nimport {Text} from '../text/Text';\nimport {useHover} from 'react-aria/useHover';\nimport {useOption} from 'react-aria/useListBox';\n\ninterface OptionProps<T> {\n  item: Node<T>;\n}\n\n/** @private */\nexport function ListBoxOption<T>(props: OptionProps<T>): JSX.Element {\n  let {item} = props;\n\n  let {rendered, key} = item;\n  let ElementType: React.ElementType = item.props.href ? 'a' : 'div';\n  let {state, shouldFocusOnHover, shouldUseVirtualFocus} = useContext(ListBoxContext)!;\n\n  let ref = useRef<any>(undefined);\n  let {optionProps, labelProps, descriptionProps, isSelected, isDisabled, isFocused} = useOption(\n    {\n      'aria-label': item['aria-label'],\n      key,\n      isVirtualized: true\n    },\n    state,\n    ref\n  );\n  let {hoverProps, isHovered} = useHover({\n    ...props,\n    isDisabled\n  });\n\n  let contents = typeof rendered === 'string' ? <Text>{rendered}</Text> : rendered;\n\n  let isKeyboardModality = isFocusVisible();\n\n  return (\n    <FocusRing focusRingClass={classNames(styles, 'focus-ring')}>\n      <ElementType\n        {...mergeProps(optionProps, shouldFocusOnHover ? {} : hoverProps)}\n        ref={ref}\n        className={classNames(styles, 'spectrum-Menu-item', {\n          // If using virtual focus, apply focused styles to the item when the user is interacting with keyboard modality\n          'is-focused': shouldUseVirtualFocus && isFocused && isKeyboardModality,\n          'is-disabled': isDisabled,\n          'is-selected': isSelected,\n          'is-selectable': state.selectionManager.selectionMode !== 'none',\n          // When shouldFocusOnHover is false, apply hover styles both when hovered with the mouse.\n          // Otherwise, apply hover styles when focused using non-keyboard modality.\n          'is-hovered': (isHovered && !shouldFocusOnHover) || (isFocused && !isKeyboardModality)\n        })}>\n        <Grid UNSAFE_className={classNames(styles, 'spectrum-Menu-itemGrid')}>\n          <ClearSlots>\n            <SlotProvider\n              slots={{\n                text: {UNSAFE_className: styles['spectrum-Menu-itemLabel'], ...labelProps},\n                icon: {size: 'S', UNSAFE_className: styles['spectrum-Menu-icon']},\n                avatar: {size: 'avatar-size-100', UNSAFE_className: styles['spectrum-Menu-avatar']},\n                description: {\n                  UNSAFE_className: styles['spectrum-Menu-description'],\n                  ...descriptionProps\n                }\n              }}>\n              {contents}\n              {isSelected && (\n                <CheckmarkMedium\n                  slot=\"checkmark\"\n                  UNSAFE_className={classNames(styles, 'spectrum-Menu-checkmark')}\n                />\n              )}\n            </SlotProvider>\n          </ClearSlots>\n        </Grid>\n      </ElementType>\n    </FocusRing>\n  );\n}\n"],"names":[],"version":3,"file":"ListBoxOption.cjs.map"}