@adobe/react-spectrum 3.47.1 → 3.47.2

package/dist/private/list/styles.css.map

@@ -1 +1 @@
-{"mappings":"AAYA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0IU;;;;AAMA;;;;;;;;;;;;;;AA2BE;;;;AAUA;;;;;;;;;;;;;;AAsBR;;;;;;;;;;;;;;;;;;;;;AA4BE;;;;;;;;;AAiBA;;;;;;;;;AAiBN;;;;;;;;;;;;;;;;;AAsBE;;;;AAIA;;;;AAGE;;;;AAWA;;;;AAOF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4DA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCA;;;;;;;;;;;;;;;;AAgBA;;;;;;;;;;;AAWA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqCI;;;;;;;;;;;;;;;;;;;AA4BJ;;;;;;;;;;;;;;AAeE;;;;AAMA;;;;;;;;;;;;;;AAoBJ;;;;;;;;;;;;;;;;AAgBI;;;;AAMJ;;;;;;;;;;AAqBE;;;;;;;;;;;AAaA;;;;;;;;;;;;;;;;;;;;;;;;;AA2BE","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.map"}
+{"mappings":"AAYA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAyEI;IACE;MAEE;;;;;;;IAQF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuHF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAgCI;;;;;;;;;;;;;;;;;;MAiBA;;;;;;;;;;;;;AAaR;;;;;;;;;;;;;;;;EAsBE;;;;EAIA;;;;;;;IAQE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8DF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA2FE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0CA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAmEA","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.map"}

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 {\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"}
+{"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';\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.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 {\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"}
+{"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';\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.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 {\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"}
+{"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';\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/menu/ActionMenu.cjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;AA4CM,MAAM,0DAAa,CAAA,GAAA,uBAAS,EAAE,SAAS,WAC5C,KAAiC,EACjC,GAAoC;IAEpC,QAAQ,CAAA,GAAA,sCAAW,EAAE,OAAO;IAC5B,IAAI,kBAAkB,CAAA,GAAA,uEAA0B,EAAE,CAAA,GAAA,mDAAW,GAAG;IAChE,IAAI,cAAc,CAAA,GAAA,6CAAa,EAAE,OAAO;QAAC,WAAW;IAAI;IACxD,IAAI,WAAW,CAAC,aAAa,KAAK,WAChC,WAAW,CAAC,aAAa,GAAG,gBAAgB,MAAM,CAAC;IAGrD,qBACE,0DAAC,CAAA,GAAA,qCAAU;QACT,QAAQ,MAAM,MAAM;QACpB,aAAa,MAAM,WAAW;QAC9B,cAAc,MAAM,YAAY;QAChC,OAAO,MAAM,KAAK;QAClB,WAAW,MAAM,SAAS;QAC1B,YAAY,MAAM,UAAU;qBAC5B,0DAAC,CAAA,GAAA,sCAAW;QAAE,KAAK;QAAM,GAAG,KAAK;QAAG,GAAG,WAAW;qBAChD,0DAAC,CAAA,GAAA,0DAAG,yBAEN,0DAAC,CAAA,GAAA,8BAAG;QACF,UAAU,MAAM,QAAQ;QACxB,OAAO,MAAM,KAAK;QAClB,cAAc,MAAM,YAAY;QAChC,UAAU,MAAM,QAAQ;;AAIhC","sources":["packages/@adobe/react-spectrum/src/menu/ActionMenu.tsx"],"sourcesContent":["/*\n * Copyright 2021 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 {ActionButton} from '../button/ActionButton';\nimport {\n  AriaLabelingProps,\n  CollectionBase,\n  DOMProps,\n  FocusableRef,\n  Key,\n  StyleProps\n} from '@react-types/shared';\nimport {filterDOMProps} from 'react-aria/filterDOMProps';\n// @ts-ignore\nimport intlMessages from '../../intl/menu/*.json';\nimport {Menu} from './Menu';\nimport {MenuTrigger, SpectrumMenuTriggerProps} from './MenuTrigger';\nimport More from '@spectrum-icons/workflow/More';\nimport React, {forwardRef, ReactElement} from 'react';\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\nimport {useSlotProps} from '../utils/Slots';\n\nexport interface SpectrumActionMenuProps<T>\n  extends\n    CollectionBase<T>,\n    Omit<SpectrumMenuTriggerProps, 'children'>,\n    StyleProps,\n    DOMProps,\n    AriaLabelingProps {\n  /** Whether the button is disabled. */\n  isDisabled?: boolean;\n  /**\n   * Whether the button should be displayed with a [quiet\n   * style](https://spectrum.adobe.com/page/action-button/#Quiet).\n   */\n  isQuiet?: boolean;\n  /** Whether the element should receive focus on render. */\n  autoFocus?: boolean;\n  /** Handler that is called when an item is selected. */\n  onAction?: (key: Key) => void;\n}\n\n/**\n * ActionMenu combines an ActionButton with a Menu for simple \"more actions\" use cases.\n */\nexport const ActionMenu = forwardRef(function ActionMenu<T extends object>(\n  props: SpectrumActionMenuProps<T>,\n  ref: FocusableRef<HTMLButtonElement>\n) {\n  props = useSlotProps(props, 'actionMenu');\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/menu');\n  let buttonProps = filterDOMProps(props, {labelable: true});\n  if (buttonProps['aria-label'] === undefined) {\n    buttonProps['aria-label'] = stringFormatter.format('moreActions');\n  }\n\n  return (\n    <MenuTrigger\n      isOpen={props.isOpen}\n      defaultOpen={props.defaultOpen}\n      onOpenChange={props.onOpenChange}\n      align={props.align}\n      direction={props.direction}\n      shouldFlip={props.shouldFlip}>\n      <ActionButton ref={ref} {...props} {...buttonProps}>\n        <More />\n      </ActionButton>\n      <Menu\n        children={props.children}\n        items={props.items}\n        disabledKeys={props.disabledKeys}\n        onAction={props.onAction}\n      />\n    </MenuTrigger>\n  );\n}) as <T>(\n  props: SpectrumActionMenuProps<T> & {ref?: FocusableRef<HTMLButtonElement>}\n) => ReactElement;\n"],"names":[],"version":3,"file":"ActionMenu.cjs.map"}
+{"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;AA2CM,MAAM,0DAAa,CAAA,GAAA,uBAAS,EAAE,SAAS,WAC5C,KAAiC,EACjC,GAAoC;IAEpC,QAAQ,CAAA,GAAA,sCAAW,EAAE,OAAO;IAC5B,IAAI,kBAAkB,CAAA,GAAA,uEAA0B,EAAE,CAAA,GAAA,mDAAW,GAAG;IAChE,IAAI,cAAc,CAAA,GAAA,6CAAa,EAAE,OAAO;QAAC,WAAW;IAAI;IACxD,IAAI,WAAW,CAAC,aAAa,KAAK,WAChC,WAAW,CAAC,aAAa,GAAG,gBAAgB,MAAM,CAAC;IAGrD,qBACE,0DAAC,CAAA,GAAA,qCAAU;QACT,QAAQ,MAAM,MAAM;QACpB,aAAa,MAAM,WAAW;QAC9B,cAAc,MAAM,YAAY;QAChC,OAAO,MAAM,KAAK;QAClB,WAAW,MAAM,SAAS;QAC1B,YAAY,MAAM,UAAU;qBAC5B,0DAAC,CAAA,GAAA,sCAAW;QAAE,KAAK;QAAM,GAAG,KAAK;QAAG,GAAG,WAAW;qBAChD,0DAAC,CAAA,GAAA,0DAAG,yBAEN,0DAAC,CAAA,GAAA,8BAAG;QACF,UAAU,MAAM,QAAQ;QACxB,OAAO,MAAM,KAAK;QAClB,cAAc,MAAM,YAAY;QAChC,UAAU,MAAM,QAAQ;;AAIhC","sources":["packages/@adobe/react-spectrum/src/menu/ActionMenu.tsx"],"sourcesContent":["/*\n * Copyright 2021 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 {ActionButton} from '../button/ActionButton';\nimport {\n  AriaLabelingProps,\n  CollectionBase,\n  DOMProps,\n  FocusableRef,\n  Key,\n  StyleProps\n} from '@react-types/shared';\nimport {filterDOMProps} from 'react-aria/filterDOMProps';\nimport intlMessages from '../../intl/menu/*.json';\nimport {Menu} from './Menu';\nimport {MenuTrigger, SpectrumMenuTriggerProps} from './MenuTrigger';\nimport More from '@spectrum-icons/workflow/More';\nimport React, {forwardRef, ReactElement} from 'react';\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\nimport {useSlotProps} from '../utils/Slots';\n\nexport interface SpectrumActionMenuProps<T>\n  extends\n    CollectionBase<T>,\n    Omit<SpectrumMenuTriggerProps, 'children'>,\n    StyleProps,\n    DOMProps,\n    AriaLabelingProps {\n  /** Whether the button is disabled. */\n  isDisabled?: boolean;\n  /**\n   * Whether the button should be displayed with a [quiet\n   * style](https://spectrum.adobe.com/page/action-button/#Quiet).\n   */\n  isQuiet?: boolean;\n  /** Whether the element should receive focus on render. */\n  autoFocus?: boolean;\n  /** Handler that is called when an item is selected. */\n  onAction?: (key: Key) => void;\n}\n\n/**\n * ActionMenu combines an ActionButton with a Menu for simple \"more actions\" use cases.\n */\nexport const ActionMenu = forwardRef(function ActionMenu<T extends object>(\n  props: SpectrumActionMenuProps<T>,\n  ref: FocusableRef<HTMLButtonElement>\n) {\n  props = useSlotProps(props, 'actionMenu');\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/menu');\n  let buttonProps = filterDOMProps(props, {labelable: true});\n  if (buttonProps['aria-label'] === undefined) {\n    buttonProps['aria-label'] = stringFormatter.format('moreActions');\n  }\n\n  return (\n    <MenuTrigger\n      isOpen={props.isOpen}\n      defaultOpen={props.defaultOpen}\n      onOpenChange={props.onOpenChange}\n      align={props.align}\n      direction={props.direction}\n      shouldFlip={props.shouldFlip}>\n      <ActionButton ref={ref} {...props} {...buttonProps}>\n        <More />\n      </ActionButton>\n      <Menu\n        children={props.children}\n        items={props.items}\n        disabledKeys={props.disabledKeys}\n        onAction={props.onAction}\n      />\n    </MenuTrigger>\n  );\n}) as <T>(\n  props: SpectrumActionMenuProps<T> & {ref?: FocusableRef<HTMLButtonElement>}\n) => ReactElement;\n"],"names":[],"version":3,"file":"ActionMenu.cjs.map"}

package/dist/private/menu/ActionMenu.js.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;AA4CM,MAAM,0DAAa,CAAA,GAAA,iBAAS,EAAE,SAAS,WAC5C,KAAiC,EACjC,GAAoC;IAEpC,QAAQ,CAAA,GAAA,yCAAW,EAAE,OAAO;IAC5B,IAAI,kBAAkB,CAAA,GAAA,kCAA0B,EAAE,CAAA,GAAA,8CAAW,GAAG;IAChE,IAAI,cAAc,CAAA,GAAA,qBAAa,EAAE,OAAO;QAAC,WAAW;IAAI;IACxD,IAAI,WAAW,CAAC,aAAa,KAAK,WAChC,WAAW,CAAC,aAAa,GAAG,gBAAgB,MAAM,CAAC;IAGrD,qBACE,gCAAC,CAAA,GAAA,yCAAU;QACT,QAAQ,MAAM,MAAM;QACpB,aAAa,MAAM,WAAW;QAC9B,cAAc,MAAM,YAAY;QAChC,OAAO,MAAM,KAAK;QAClB,WAAW,MAAM,SAAS;QAC1B,YAAY,MAAM,UAAU;qBAC5B,gCAAC,CAAA,GAAA,yCAAW;QAAE,KAAK;QAAM,GAAG,KAAK;QAAG,GAAG,WAAW;qBAChD,gCAAC,CAAA,GAAA,gCAAG,yBAEN,gCAAC,CAAA,GAAA,yCAAG;QACF,UAAU,MAAM,QAAQ;QACxB,OAAO,MAAM,KAAK;QAClB,cAAc,MAAM,YAAY;QAChC,UAAU,MAAM,QAAQ;;AAIhC","sources":["packages/@adobe/react-spectrum/src/menu/ActionMenu.tsx"],"sourcesContent":["/*\n * Copyright 2021 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 {ActionButton} from '../button/ActionButton';\nimport {\n  AriaLabelingProps,\n  CollectionBase,\n  DOMProps,\n  FocusableRef,\n  Key,\n  StyleProps\n} from '@react-types/shared';\nimport {filterDOMProps} from 'react-aria/filterDOMProps';\n// @ts-ignore\nimport intlMessages from '../../intl/menu/*.json';\nimport {Menu} from './Menu';\nimport {MenuTrigger, SpectrumMenuTriggerProps} from './MenuTrigger';\nimport More from '@spectrum-icons/workflow/More';\nimport React, {forwardRef, ReactElement} from 'react';\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\nimport {useSlotProps} from '../utils/Slots';\n\nexport interface SpectrumActionMenuProps<T>\n  extends\n    CollectionBase<T>,\n    Omit<SpectrumMenuTriggerProps, 'children'>,\n    StyleProps,\n    DOMProps,\n    AriaLabelingProps {\n  /** Whether the button is disabled. */\n  isDisabled?: boolean;\n  /**\n   * Whether the button should be displayed with a [quiet\n   * style](https://spectrum.adobe.com/page/action-button/#Quiet).\n   */\n  isQuiet?: boolean;\n  /** Whether the element should receive focus on render. */\n  autoFocus?: boolean;\n  /** Handler that is called when an item is selected. */\n  onAction?: (key: Key) => void;\n}\n\n/**\n * ActionMenu combines an ActionButton with a Menu for simple \"more actions\" use cases.\n */\nexport const ActionMenu = forwardRef(function ActionMenu<T extends object>(\n  props: SpectrumActionMenuProps<T>,\n  ref: FocusableRef<HTMLButtonElement>\n) {\n  props = useSlotProps(props, 'actionMenu');\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/menu');\n  let buttonProps = filterDOMProps(props, {labelable: true});\n  if (buttonProps['aria-label'] === undefined) {\n    buttonProps['aria-label'] = stringFormatter.format('moreActions');\n  }\n\n  return (\n    <MenuTrigger\n      isOpen={props.isOpen}\n      defaultOpen={props.defaultOpen}\n      onOpenChange={props.onOpenChange}\n      align={props.align}\n      direction={props.direction}\n      shouldFlip={props.shouldFlip}>\n      <ActionButton ref={ref} {...props} {...buttonProps}>\n        <More />\n      </ActionButton>\n      <Menu\n        children={props.children}\n        items={props.items}\n        disabledKeys={props.disabledKeys}\n        onAction={props.onAction}\n      />\n    </MenuTrigger>\n  );\n}) as <T>(\n  props: SpectrumActionMenuProps<T> & {ref?: FocusableRef<HTMLButtonElement>}\n) => ReactElement;\n"],"names":[],"version":3,"file":"ActionMenu.js.map"}
+{"mappings":";;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;AA2CM,MAAM,0DAAa,CAAA,GAAA,iBAAS,EAAE,SAAS,WAC5C,KAAiC,EACjC,GAAoC;IAEpC,QAAQ,CAAA,GAAA,yCAAW,EAAE,OAAO;IAC5B,IAAI,kBAAkB,CAAA,GAAA,kCAA0B,EAAE,CAAA,GAAA,8CAAW,GAAG;IAChE,IAAI,cAAc,CAAA,GAAA,qBAAa,EAAE,OAAO;QAAC,WAAW;IAAI;IACxD,IAAI,WAAW,CAAC,aAAa,KAAK,WAChC,WAAW,CAAC,aAAa,GAAG,gBAAgB,MAAM,CAAC;IAGrD,qBACE,gCAAC,CAAA,GAAA,yCAAU;QACT,QAAQ,MAAM,MAAM;QACpB,aAAa,MAAM,WAAW;QAC9B,cAAc,MAAM,YAAY;QAChC,OAAO,MAAM,KAAK;QAClB,WAAW,MAAM,SAAS;QAC1B,YAAY,MAAM,UAAU;qBAC5B,gCAAC,CAAA,GAAA,yCAAW;QAAE,KAAK;QAAM,GAAG,KAAK;QAAG,GAAG,WAAW;qBAChD,gCAAC,CAAA,GAAA,gCAAG,yBAEN,gCAAC,CAAA,GAAA,yCAAG;QACF,UAAU,MAAM,QAAQ;QACxB,OAAO,MAAM,KAAK;QAClB,cAAc,MAAM,YAAY;QAChC,UAAU,MAAM,QAAQ;;AAIhC","sources":["packages/@adobe/react-spectrum/src/menu/ActionMenu.tsx"],"sourcesContent":["/*\n * Copyright 2021 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 {ActionButton} from '../button/ActionButton';\nimport {\n  AriaLabelingProps,\n  CollectionBase,\n  DOMProps,\n  FocusableRef,\n  Key,\n  StyleProps\n} from '@react-types/shared';\nimport {filterDOMProps} from 'react-aria/filterDOMProps';\nimport intlMessages from '../../intl/menu/*.json';\nimport {Menu} from './Menu';\nimport {MenuTrigger, SpectrumMenuTriggerProps} from './MenuTrigger';\nimport More from '@spectrum-icons/workflow/More';\nimport React, {forwardRef, ReactElement} from 'react';\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\nimport {useSlotProps} from '../utils/Slots';\n\nexport interface SpectrumActionMenuProps<T>\n  extends\n    CollectionBase<T>,\n    Omit<SpectrumMenuTriggerProps, 'children'>,\n    StyleProps,\n    DOMProps,\n    AriaLabelingProps {\n  /** Whether the button is disabled. */\n  isDisabled?: boolean;\n  /**\n   * Whether the button should be displayed with a [quiet\n   * style](https://spectrum.adobe.com/page/action-button/#Quiet).\n   */\n  isQuiet?: boolean;\n  /** Whether the element should receive focus on render. */\n  autoFocus?: boolean;\n  /** Handler that is called when an item is selected. */\n  onAction?: (key: Key) => void;\n}\n\n/**\n * ActionMenu combines an ActionButton with a Menu for simple \"more actions\" use cases.\n */\nexport const ActionMenu = forwardRef(function ActionMenu<T extends object>(\n  props: SpectrumActionMenuProps<T>,\n  ref: FocusableRef<HTMLButtonElement>\n) {\n  props = useSlotProps(props, 'actionMenu');\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/menu');\n  let buttonProps = filterDOMProps(props, {labelable: true});\n  if (buttonProps['aria-label'] === undefined) {\n    buttonProps['aria-label'] = stringFormatter.format('moreActions');\n  }\n\n  return (\n    <MenuTrigger\n      isOpen={props.isOpen}\n      defaultOpen={props.defaultOpen}\n      onOpenChange={props.onOpenChange}\n      align={props.align}\n      direction={props.direction}\n      shouldFlip={props.shouldFlip}>\n      <ActionButton ref={ref} {...props} {...buttonProps}>\n        <More />\n      </ActionButton>\n      <Menu\n        children={props.children}\n        items={props.items}\n        disabledKeys={props.disabledKeys}\n        onAction={props.onAction}\n      />\n    </MenuTrigger>\n  );\n}) as <T>(\n  props: SpectrumActionMenuProps<T> & {ref?: FocusableRef<HTMLButtonElement>}\n) => ReactElement;\n"],"names":[],"version":3,"file":"ActionMenu.js.map"}

package/dist/private/menu/ActionMenu.mjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;AA4CM,MAAM,0DAAa,CAAA,GAAA,iBAAS,EAAE,SAAS,WAC5C,KAAiC,EACjC,GAAoC;IAEpC,QAAQ,CAAA,GAAA,yCAAW,EAAE,OAAO;IAC5B,IAAI,kBAAkB,CAAA,GAAA,kCAA0B,EAAE,CAAA,GAAA,+CAAW,GAAG;IAChE,IAAI,cAAc,CAAA,GAAA,qBAAa,EAAE,OAAO;QAAC,WAAW;IAAI;IACxD,IAAI,WAAW,CAAC,aAAa,KAAK,WAChC,WAAW,CAAC,aAAa,GAAG,gBAAgB,MAAM,CAAC;IAGrD,qBACE,gCAAC,CAAA,GAAA,yCAAU;QACT,QAAQ,MAAM,MAAM;QACpB,aAAa,MAAM,WAAW;QAC9B,cAAc,MAAM,YAAY;QAChC,OAAO,MAAM,KAAK;QAClB,WAAW,MAAM,SAAS;QAC1B,YAAY,MAAM,UAAU;qBAC5B,gCAAC,CAAA,GAAA,yCAAW;QAAE,KAAK;QAAM,GAAG,KAAK;QAAG,GAAG,WAAW;qBAChD,gCAAC,CAAA,GAAA,gCAAG,yBAEN,gCAAC,CAAA,GAAA,yCAAG;QACF,UAAU,MAAM,QAAQ;QACxB,OAAO,MAAM,KAAK;QAClB,cAAc,MAAM,YAAY;QAChC,UAAU,MAAM,QAAQ;;AAIhC","sources":["packages/@adobe/react-spectrum/src/menu/ActionMenu.tsx"],"sourcesContent":["/*\n * Copyright 2021 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 {ActionButton} from '../button/ActionButton';\nimport {\n  AriaLabelingProps,\n  CollectionBase,\n  DOMProps,\n  FocusableRef,\n  Key,\n  StyleProps\n} from '@react-types/shared';\nimport {filterDOMProps} from 'react-aria/filterDOMProps';\n// @ts-ignore\nimport intlMessages from '../../intl/menu/*.json';\nimport {Menu} from './Menu';\nimport {MenuTrigger, SpectrumMenuTriggerProps} from './MenuTrigger';\nimport More from '@spectrum-icons/workflow/More';\nimport React, {forwardRef, ReactElement} from 'react';\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\nimport {useSlotProps} from '../utils/Slots';\n\nexport interface SpectrumActionMenuProps<T>\n  extends\n    CollectionBase<T>,\n    Omit<SpectrumMenuTriggerProps, 'children'>,\n    StyleProps,\n    DOMProps,\n    AriaLabelingProps {\n  /** Whether the button is disabled. */\n  isDisabled?: boolean;\n  /**\n   * Whether the button should be displayed with a [quiet\n   * style](https://spectrum.adobe.com/page/action-button/#Quiet).\n   */\n  isQuiet?: boolean;\n  /** Whether the element should receive focus on render. */\n  autoFocus?: boolean;\n  /** Handler that is called when an item is selected. */\n  onAction?: (key: Key) => void;\n}\n\n/**\n * ActionMenu combines an ActionButton with a Menu for simple \"more actions\" use cases.\n */\nexport const ActionMenu = forwardRef(function ActionMenu<T extends object>(\n  props: SpectrumActionMenuProps<T>,\n  ref: FocusableRef<HTMLButtonElement>\n) {\n  props = useSlotProps(props, 'actionMenu');\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/menu');\n  let buttonProps = filterDOMProps(props, {labelable: true});\n  if (buttonProps['aria-label'] === undefined) {\n    buttonProps['aria-label'] = stringFormatter.format('moreActions');\n  }\n\n  return (\n    <MenuTrigger\n      isOpen={props.isOpen}\n      defaultOpen={props.defaultOpen}\n      onOpenChange={props.onOpenChange}\n      align={props.align}\n      direction={props.direction}\n      shouldFlip={props.shouldFlip}>\n      <ActionButton ref={ref} {...props} {...buttonProps}>\n        <More />\n      </ActionButton>\n      <Menu\n        children={props.children}\n        items={props.items}\n        disabledKeys={props.disabledKeys}\n        onAction={props.onAction}\n      />\n    </MenuTrigger>\n  );\n}) as <T>(\n  props: SpectrumActionMenuProps<T> & {ref?: FocusableRef<HTMLButtonElement>}\n) => ReactElement;\n"],"names":[],"version":3,"file":"ActionMenu.mjs.map"}
+{"mappings":";;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;AA2CM,MAAM,0DAAa,CAAA,GAAA,iBAAS,EAAE,SAAS,WAC5C,KAAiC,EACjC,GAAoC;IAEpC,QAAQ,CAAA,GAAA,yCAAW,EAAE,OAAO;IAC5B,IAAI,kBAAkB,CAAA,GAAA,kCAA0B,EAAE,CAAA,GAAA,+CAAW,GAAG;IAChE,IAAI,cAAc,CAAA,GAAA,qBAAa,EAAE,OAAO;QAAC,WAAW;IAAI;IACxD,IAAI,WAAW,CAAC,aAAa,KAAK,WAChC,WAAW,CAAC,aAAa,GAAG,gBAAgB,MAAM,CAAC;IAGrD,qBACE,gCAAC,CAAA,GAAA,yCAAU;QACT,QAAQ,MAAM,MAAM;QACpB,aAAa,MAAM,WAAW;QAC9B,cAAc,MAAM,YAAY;QAChC,OAAO,MAAM,KAAK;QAClB,WAAW,MAAM,SAAS;QAC1B,YAAY,MAAM,UAAU;qBAC5B,gCAAC,CAAA,GAAA,yCAAW;QAAE,KAAK;QAAM,GAAG,KAAK;QAAG,GAAG,WAAW;qBAChD,gCAAC,CAAA,GAAA,gCAAG,yBAEN,gCAAC,CAAA,GAAA,yCAAG;QACF,UAAU,MAAM,QAAQ;QACxB,OAAO,MAAM,KAAK;QAClB,cAAc,MAAM,YAAY;QAChC,UAAU,MAAM,QAAQ;;AAIhC","sources":["packages/@adobe/react-spectrum/src/menu/ActionMenu.tsx"],"sourcesContent":["/*\n * Copyright 2021 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 {ActionButton} from '../button/ActionButton';\nimport {\n  AriaLabelingProps,\n  CollectionBase,\n  DOMProps,\n  FocusableRef,\n  Key,\n  StyleProps\n} from '@react-types/shared';\nimport {filterDOMProps} from 'react-aria/filterDOMProps';\nimport intlMessages from '../../intl/menu/*.json';\nimport {Menu} from './Menu';\nimport {MenuTrigger, SpectrumMenuTriggerProps} from './MenuTrigger';\nimport More from '@spectrum-icons/workflow/More';\nimport React, {forwardRef, ReactElement} from 'react';\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\nimport {useSlotProps} from '../utils/Slots';\n\nexport interface SpectrumActionMenuProps<T>\n  extends\n    CollectionBase<T>,\n    Omit<SpectrumMenuTriggerProps, 'children'>,\n    StyleProps,\n    DOMProps,\n    AriaLabelingProps {\n  /** Whether the button is disabled. */\n  isDisabled?: boolean;\n  /**\n   * Whether the button should be displayed with a [quiet\n   * style](https://spectrum.adobe.com/page/action-button/#Quiet).\n   */\n  isQuiet?: boolean;\n  /** Whether the element should receive focus on render. */\n  autoFocus?: boolean;\n  /** Handler that is called when an item is selected. */\n  onAction?: (key: Key) => void;\n}\n\n/**\n * ActionMenu combines an ActionButton with a Menu for simple \"more actions\" use cases.\n */\nexport const ActionMenu = forwardRef(function ActionMenu<T extends object>(\n  props: SpectrumActionMenuProps<T>,\n  ref: FocusableRef<HTMLButtonElement>\n) {\n  props = useSlotProps(props, 'actionMenu');\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/menu');\n  let buttonProps = filterDOMProps(props, {labelable: true});\n  if (buttonProps['aria-label'] === undefined) {\n    buttonProps['aria-label'] = stringFormatter.format('moreActions');\n  }\n\n  return (\n    <MenuTrigger\n      isOpen={props.isOpen}\n      defaultOpen={props.defaultOpen}\n      onOpenChange={props.onOpenChange}\n      align={props.align}\n      direction={props.direction}\n      shouldFlip={props.shouldFlip}>\n      <ActionButton ref={ref} {...props} {...buttonProps}>\n        <More />\n      </ActionButton>\n      <Menu\n        children={props.children}\n        items={props.items}\n        disabledKeys={props.disabledKeys}\n        onAction={props.onAction}\n      />\n    </MenuTrigger>\n  );\n}) as <T>(\n  props: SpectrumActionMenuProps<T> & {ref?: FocusableRef<HTMLButtonElement>}\n) => ReactElement;\n"],"names":[],"version":3,"file":"ActionMenu.mjs.map"}

package/dist/private/menu/Menu.cjs.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@adobe/react-spectrum/src/menu/Menu.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 {ActionButton} from '../button/ActionButton';\n\nimport {AriaMenuProps, useMenu} from 'react-aria/useMenu';\nimport ArrowDownSmall from '@spectrum-icons/ui/ArrowDownSmall';\nimport {classNames} from '../utils/classNames';\nimport {DOMRef, StyleProps} from '@react-types/shared';\nimport {FocusScope} from 'react-aria/FocusScope';\nimport intlMessages from '../../intl/menu/*.json';\nimport {MenuContext, MenuStateContext, useMenuStateContext} from './context';\nimport {MenuItem} from './MenuItem';\n// @ts-ignore\nimport {MenuSection} from './MenuSection';\nimport {mergeProps} from 'react-aria/mergeProps';\nimport React, {\n  KeyboardEventHandler,\n  ReactElement,\n  ReactNode,\n  RefObject,\n  useContext,\n  useEffect,\n  useRef,\n  useState\n} from 'react';\nimport {RootMenuTriggerState} from 'react-stately/useMenuTriggerState';\nimport styles from '@adobe/spectrum-css-temp/components/menu/vars.css';\nimport {TreeState, useTreeState} from 'react-stately/useTreeState';\nimport {useDOMRef} from '../utils/useDOMRef';\nimport {useIsMobileDevice} from '../utils/useIsMobileDevice';\nimport {useLayoutEffect} from 'react-aria/private/utils/useLayoutEffect';\nimport {useLocale} from 'react-aria/I18nProvider';\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\nimport {useSlotId} from 'react-aria/private/utils/useId';\nimport {useStyleProps} from '../utils/styleProps';\nimport {useSyncRef} from 'react-aria/private/utils/useSyncRef';\n\nexport interface SpectrumMenuProps<T> extends AriaMenuProps<T>, StyleProps {}\n\n/**\n * Menus display a list of actions or options that a user can choose.\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\nexport const Menu = React.forwardRef(function Menu<T extends object>(\n  props: SpectrumMenuProps<T>,\n  ref: DOMRef<HTMLDivElement>\n) {\n  let isSubmenu = true;\n  let contextProps = useContext(MenuContext);\n  let parentMenuContext = useMenuStateContext();\n  let {rootMenuTriggerState, state: parentMenuTreeState} = parentMenuContext || {\n    rootMenuTriggerState: contextProps.state\n  };\n  if (!parentMenuContext) {\n    isSubmenu = false;\n  }\n  let completeProps = {\n    ...mergeProps(contextProps, props)\n  };\n  let domRef = useDOMRef(ref);\n  let [popoverContainer, setPopoverContainer] = useState<HTMLElement | null>(null);\n  let trayContainerRef = useRef<HTMLDivElement | null>(null);\n  let state = useTreeState(completeProps);\n  let submenuRef = useRef<HTMLDivElement>(null);\n  let {menuProps} = useMenu(completeProps, state, domRef);\n  let {styleProps} = useStyleProps(completeProps);\n  useSyncRef(contextProps, domRef);\n  let [leftOffset, setLeftOffset] = useState({left: 0});\n  let prevPopoverContainer = useRef<HTMLElement | null>(null);\n\n  useLayoutEffect(() => {\n    if (\n      popoverContainer &&\n      prevPopoverContainer.current !== popoverContainer &&\n      leftOffset.left === 0\n    ) {\n      prevPopoverContainer.current = popoverContainer;\n      let {left} = popoverContainer.getBoundingClientRect();\n      setLeftOffset({left: -1 * left});\n    }\n  }, [leftOffset, popoverContainer]);\n\n  let menuLevel = contextProps.submenuLevel ?? -1;\n  let nextMenuLevelKey = rootMenuTriggerState?.expandedKeysStack[menuLevel + 1];\n  let hasOpenSubmenu = false;\n  if (nextMenuLevelKey != null) {\n    let nextMenuLevel = state.collection.getItem(nextMenuLevelKey);\n    hasOpenSubmenu = nextMenuLevel != null;\n  }\n\n  return (\n    <MenuStateContext.Provider\n      value={{\n        popoverContainer,\n        trayContainerRef,\n        menu: domRef,\n        submenu: submenuRef,\n        rootMenuTriggerState,\n        state\n      }}>\n      <div style={{height: hasOpenSubmenu ? '100%' : undefined}} ref={trayContainerRef} />\n      <FocusScope>\n        <TrayHeaderWrapper\n          onBackButtonPress={contextProps.onBackButtonPress}\n          hasOpenSubmenu={hasOpenSubmenu}\n          isSubmenu={isSubmenu}\n          parentMenuTreeState={parentMenuTreeState}\n          rootMenuTriggerState={rootMenuTriggerState}\n          menuRef={domRef}>\n          <div\n            {...menuProps}\n            style={mergeProps(styleProps.style, menuProps.style)}\n            ref={domRef}\n            className={classNames(styles, 'spectrum-Menu', styleProps.className)}>\n            {[...state.collection].map(item => {\n              if (item.type === 'section') {\n                return <MenuSection key={item.key} item={item} state={state} />;\n              }\n\n              let menuItem = <MenuItem key={item.key} item={item} state={state} />;\n\n              if (item.wrapper) {\n                menuItem = item.wrapper(menuItem);\n              }\n\n              return menuItem;\n            })}\n          </div>\n        </TrayHeaderWrapper>\n        {rootMenuTriggerState?.isOpen && (\n          <div\n            ref={setPopoverContainer}\n            style={{width: '100vw', position: 'absolute', top: -5, ...leftOffset}}\n          />\n        )}\n      </FocusScope>\n    </MenuStateContext.Provider>\n  );\n}) as <T>(props: SpectrumMenuProps<T> & {ref?: DOMRef<HTMLDivElement>}) => ReactElement;\n\nexport function TrayHeaderWrapper(props: {\n  children: ReactNode;\n  isSubmenu?: boolean;\n  hasOpenSubmenu?: boolean;\n  parentMenuTreeState?: TreeState<any>;\n  rootMenuTriggerState?: RootMenuTriggerState;\n  onBackButtonPress?: () => void;\n  wrapperKeyDown?: KeyboardEventHandler<HTMLDivElement> | undefined;\n  menuRef?: RefObject<HTMLDivElement | null>;\n}): ReactNode {\n  let {\n    children,\n    isSubmenu,\n    hasOpenSubmenu,\n    parentMenuTreeState,\n    rootMenuTriggerState,\n    onBackButtonPress,\n    wrapperKeyDown,\n    menuRef\n  } = props;\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/menu');\n  let lastKey = rootMenuTriggerState?.expandedKeysStack.slice(-1)[0];\n  let backButtonText = '';\n  if (lastKey != null) {\n    backButtonText = parentMenuTreeState?.collection.getItem(lastKey)?.textValue ?? '';\n  }\n  let backButtonLabel = stringFormatter.format('backButton', {\n    prevMenuButton: backButtonText ?? ''\n  });\n  let headingId = useSlotId();\n  let isMobile = useIsMobileDevice();\n  let {direction} = useLocale();\n\n  let [traySubmenuAnimation, setTraySubmenuAnimation] = useState('');\n  useLayoutEffect(() => {\n    if (!hasOpenSubmenu) {\n      setTraySubmenuAnimation('spectrum-TraySubmenu-enter');\n    }\n  }, [hasOpenSubmenu, isMobile]);\n\n  let timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  let handleBackButtonPress = () => {\n    setTraySubmenuAnimation('spectrum-TraySubmenu-exit');\n    timeoutRef.current = setTimeout(() => {\n      onBackButtonPress?.();\n    }, 220); // Matches transition duration\n  };\n\n  useEffect(() => {\n    return () => {\n      if (timeoutRef.current) {\n        clearTimeout(timeoutRef.current);\n      }\n    };\n  }, []);\n\n  // When opening submenu in tray, focus the first item in the submenu after animation completes\n  // This fixes an issue with iOS VO where the closed submenu was getting focus\n  let focusTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  useEffect(() => {\n    if (\n      isMobile &&\n      isSubmenu &&\n      !hasOpenSubmenu &&\n      traySubmenuAnimation === 'spectrum-TraySubmenu-enter'\n    ) {\n      focusTimeoutRef.current = setTimeout(() => {\n        let firstItem = menuRef?.current?.querySelector(\n          '[role=\"menuitem\"], [role=\"menuitemcheckbox\"], [role=\"menuitemradio\"]'\n        ) as HTMLElement;\n        firstItem?.focus();\n      }, 220);\n    }\n    return () => {\n      if (focusTimeoutRef.current) {\n        clearTimeout(focusTimeoutRef.current);\n      }\n    };\n  }, [hasOpenSubmenu, isMobile, isSubmenu, menuRef, traySubmenuAnimation]);\n\n  return (\n    <>\n      <div\n        role={headingId ? 'dialog' : undefined}\n        aria-labelledby={headingId}\n        aria-hidden={isMobile && hasOpenSubmenu}\n        data-testid=\"menu-wrapper\"\n        className={classNames(styles, 'spectrum-Menu-wrapper', {\n          'spectrum-Menu-wrapper--isMobile': isMobile,\n          'is-expanded': hasOpenSubmenu,\n          [traySubmenuAnimation]: isMobile\n        })}>\n        <div\n          role=\"presentation\"\n          className={classNames(styles, 'spectrum-Submenu-wrapper', {\n            'spectrum-Submenu-wrapper--isMobile': isMobile\n          })}\n          onKeyDown={wrapperKeyDown}>\n          {isMobile && isSubmenu && !hasOpenSubmenu && (\n            <div className={classNames(styles, 'spectrum-Submenu-headingWrapper')}>\n              <ActionButton aria-label={backButtonLabel} isQuiet onPress={handleBackButtonPress}>\n                {/* We don't have a ArrowLeftSmall so make due with ArrowDownSmall and transforms */}\n                {direction === 'rtl' ? (\n                  <ArrowDownSmall UNSAFE_style={{rotate: '270deg'}} />\n                ) : (\n                  <ArrowDownSmall UNSAFE_style={{rotate: '90deg'}} />\n                )}\n              </ActionButton>\n              <h1 id={headingId} className={classNames(styles, 'spectrum-Submenu-heading')}>\n                {backButtonText}\n              </h1>\n            </div>\n          )}\n          {children}\n        </div>\n      </div>\n    </>\n  );\n}\n"],"names":[],"version":3,"file":"Menu.cjs.map"}
+{"mappings":"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","sources":["packages/@adobe/react-spectrum/src/menu/Menu.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 {ActionButton} from '../button/ActionButton';\nimport {AriaMenuProps, useMenu} from 'react-aria/useMenu';\nimport ArrowDownSmall from '@spectrum-icons/ui/ArrowDownSmall';\nimport {classNames} from '../utils/classNames';\nimport {DOMRef, StyleProps} from '@react-types/shared';\nimport {FocusScope} from 'react-aria/FocusScope';\nimport intlMessages from '../../intl/menu/*.json';\nimport {MenuContext, MenuStateContext, useMenuStateContext} from './context';\nimport {MenuItem} from './MenuItem';\nimport {MenuSection} from './MenuSection';\nimport {mergeProps} from 'react-aria/mergeProps';\nimport React, {\n  KeyboardEventHandler,\n  ReactElement,\n  ReactNode,\n  RefObject,\n  useContext,\n  useEffect,\n  useRef,\n  useState\n} from 'react';\nimport {RootMenuTriggerState} from 'react-stately/useMenuTriggerState';\nimport styles from '@adobe/spectrum-css-temp/components/menu/vars.css';\nimport {TreeState, useTreeState} from 'react-stately/useTreeState';\nimport {useDOMRef} from '../utils/useDOMRef';\nimport {useIsMobileDevice} from '../utils/useIsMobileDevice';\nimport {useLayoutEffect} from 'react-aria/private/utils/useLayoutEffect';\nimport {useLocale} from 'react-aria/I18nProvider';\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\nimport {useSlotId} from 'react-aria/private/utils/useId';\nimport {useStyleProps} from '../utils/styleProps';\nimport {useSyncRef} from 'react-aria/private/utils/useSyncRef';\n\nexport interface SpectrumMenuProps<T> extends AriaMenuProps<T>, StyleProps {}\n\n/**\n * Menus display a list of actions or options that a user can choose.\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\nexport const Menu = React.forwardRef(function Menu<T extends object>(\n  props: SpectrumMenuProps<T>,\n  ref: DOMRef<HTMLDivElement>\n) {\n  let isSubmenu = true;\n  let contextProps = useContext(MenuContext);\n  let parentMenuContext = useMenuStateContext();\n  let {rootMenuTriggerState, state: parentMenuTreeState} = parentMenuContext || {\n    rootMenuTriggerState: contextProps.state\n  };\n  if (!parentMenuContext) {\n    isSubmenu = false;\n  }\n  let completeProps = {\n    ...mergeProps(contextProps, props)\n  };\n  let domRef = useDOMRef(ref);\n  let [popoverContainer, setPopoverContainer] = useState<HTMLElement | null>(null);\n  let trayContainerRef = useRef<HTMLDivElement | null>(null);\n  let state = useTreeState(completeProps);\n  let submenuRef = useRef<HTMLDivElement>(null);\n  let {menuProps} = useMenu(completeProps, state, domRef);\n  let {styleProps} = useStyleProps(completeProps);\n  useSyncRef(contextProps, domRef);\n  let [leftOffset, setLeftOffset] = useState({left: 0});\n  let prevPopoverContainer = useRef<HTMLElement | null>(null);\n\n  useLayoutEffect(() => {\n    if (\n      popoverContainer &&\n      prevPopoverContainer.current !== popoverContainer &&\n      leftOffset.left === 0\n    ) {\n      prevPopoverContainer.current = popoverContainer;\n      let {left} = popoverContainer.getBoundingClientRect();\n      setLeftOffset({left: -1 * left});\n    }\n  }, [leftOffset, popoverContainer]);\n\n  let menuLevel = contextProps.submenuLevel ?? -1;\n  let nextMenuLevelKey = rootMenuTriggerState?.expandedKeysStack[menuLevel + 1];\n  let hasOpenSubmenu = false;\n  if (nextMenuLevelKey != null) {\n    let nextMenuLevel = state.collection.getItem(nextMenuLevelKey);\n    hasOpenSubmenu = nextMenuLevel != null;\n  }\n\n  return (\n    <MenuStateContext.Provider\n      value={{\n        popoverContainer,\n        trayContainerRef,\n        menu: domRef,\n        submenu: submenuRef,\n        rootMenuTriggerState,\n        state\n      }}>\n      <div style={{height: hasOpenSubmenu ? '100%' : undefined}} ref={trayContainerRef} />\n      <FocusScope>\n        <TrayHeaderWrapper\n          onBackButtonPress={contextProps.onBackButtonPress}\n          hasOpenSubmenu={hasOpenSubmenu}\n          isSubmenu={isSubmenu}\n          parentMenuTreeState={parentMenuTreeState}\n          rootMenuTriggerState={rootMenuTriggerState}\n          menuRef={domRef}>\n          <div\n            {...menuProps}\n            style={mergeProps(styleProps.style, menuProps.style)}\n            ref={domRef}\n            className={classNames(styles, 'spectrum-Menu', styleProps.className)}>\n            {[...state.collection].map(item => {\n              if (item.type === 'section') {\n                return <MenuSection key={item.key} item={item} state={state} />;\n              }\n\n              let menuItem = <MenuItem key={item.key} item={item} state={state} />;\n\n              if (item.wrapper) {\n                menuItem = item.wrapper(menuItem);\n              }\n\n              return menuItem;\n            })}\n          </div>\n        </TrayHeaderWrapper>\n        {rootMenuTriggerState?.isOpen && (\n          <div\n            ref={setPopoverContainer}\n            style={{width: '100vw', position: 'absolute', top: -5, ...leftOffset}}\n          />\n        )}\n      </FocusScope>\n    </MenuStateContext.Provider>\n  );\n}) as <T>(props: SpectrumMenuProps<T> & {ref?: DOMRef<HTMLDivElement>}) => ReactElement;\n\nexport function TrayHeaderWrapper(props: {\n  children: ReactNode;\n  isSubmenu?: boolean;\n  hasOpenSubmenu?: boolean;\n  parentMenuTreeState?: TreeState<any>;\n  rootMenuTriggerState?: RootMenuTriggerState;\n  onBackButtonPress?: () => void;\n  wrapperKeyDown?: KeyboardEventHandler<HTMLDivElement> | undefined;\n  menuRef?: RefObject<HTMLDivElement | null>;\n}): ReactNode {\n  let {\n    children,\n    isSubmenu,\n    hasOpenSubmenu,\n    parentMenuTreeState,\n    rootMenuTriggerState,\n    onBackButtonPress,\n    wrapperKeyDown,\n    menuRef\n  } = props;\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/menu');\n  let lastKey = rootMenuTriggerState?.expandedKeysStack.slice(-1)[0];\n  let backButtonText = '';\n  if (lastKey != null) {\n    backButtonText = parentMenuTreeState?.collection.getItem(lastKey)?.textValue ?? '';\n  }\n  let backButtonLabel = stringFormatter.format('backButton', {\n    prevMenuButton: backButtonText ?? ''\n  });\n  let headingId = useSlotId();\n  let isMobile = useIsMobileDevice();\n  let {direction} = useLocale();\n\n  let [traySubmenuAnimation, setTraySubmenuAnimation] = useState('');\n  useLayoutEffect(() => {\n    if (!hasOpenSubmenu) {\n      setTraySubmenuAnimation('spectrum-TraySubmenu-enter');\n    }\n  }, [hasOpenSubmenu, isMobile]);\n\n  let timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  let handleBackButtonPress = () => {\n    setTraySubmenuAnimation('spectrum-TraySubmenu-exit');\n    timeoutRef.current = setTimeout(() => {\n      onBackButtonPress?.();\n    }, 220); // Matches transition duration\n  };\n\n  useEffect(() => {\n    return () => {\n      if (timeoutRef.current) {\n        clearTimeout(timeoutRef.current);\n      }\n    };\n  }, []);\n\n  // When opening submenu in tray, focus the first item in the submenu after animation completes\n  // This fixes an issue with iOS VO where the closed submenu was getting focus\n  let focusTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  useEffect(() => {\n    if (\n      isMobile &&\n      isSubmenu &&\n      !hasOpenSubmenu &&\n      traySubmenuAnimation === 'spectrum-TraySubmenu-enter'\n    ) {\n      focusTimeoutRef.current = setTimeout(() => {\n        let firstItem = menuRef?.current?.querySelector(\n          '[role=\"menuitem\"], [role=\"menuitemcheckbox\"], [role=\"menuitemradio\"]'\n        ) as HTMLElement;\n        firstItem?.focus();\n      }, 220);\n    }\n    return () => {\n      if (focusTimeoutRef.current) {\n        clearTimeout(focusTimeoutRef.current);\n      }\n    };\n  }, [hasOpenSubmenu, isMobile, isSubmenu, menuRef, traySubmenuAnimation]);\n\n  return (\n    <>\n      <div\n        role={headingId ? 'dialog' : undefined}\n        aria-labelledby={headingId}\n        aria-hidden={isMobile && hasOpenSubmenu}\n        data-testid=\"menu-wrapper\"\n        className={classNames(styles, 'spectrum-Menu-wrapper', {\n          'spectrum-Menu-wrapper--isMobile': isMobile,\n          'is-expanded': hasOpenSubmenu,\n          [traySubmenuAnimation]: isMobile\n        })}>\n        <div\n          role=\"presentation\"\n          className={classNames(styles, 'spectrum-Submenu-wrapper', {\n            'spectrum-Submenu-wrapper--isMobile': isMobile\n          })}\n          onKeyDown={wrapperKeyDown}>\n          {isMobile && isSubmenu && !hasOpenSubmenu && (\n            <div className={classNames(styles, 'spectrum-Submenu-headingWrapper')}>\n              <ActionButton aria-label={backButtonLabel} isQuiet onPress={handleBackButtonPress}>\n                {/* We don't have a ArrowLeftSmall so make due with ArrowDownSmall and transforms */}\n                {direction === 'rtl' ? (\n                  <ArrowDownSmall UNSAFE_style={{rotate: '270deg'}} />\n                ) : (\n                  <ArrowDownSmall UNSAFE_style={{rotate: '90deg'}} />\n                )}\n              </ActionButton>\n              <h1 id={headingId} className={classNames(styles, 'spectrum-Submenu-heading')}>\n                {backButtonText}\n              </h1>\n            </div>\n          )}\n          {children}\n        </div>\n      </div>\n    </>\n  );\n}\n"],"names":[],"version":3,"file":"Menu.cjs.map"}

package/dist/private/menu/Menu.js.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@adobe/react-spectrum/src/menu/Menu.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 {ActionButton} from '../button/ActionButton';\n\nimport {AriaMenuProps, useMenu} from 'react-aria/useMenu';\nimport ArrowDownSmall from '@spectrum-icons/ui/ArrowDownSmall';\nimport {classNames} from '../utils/classNames';\nimport {DOMRef, StyleProps} from '@react-types/shared';\nimport {FocusScope} from 'react-aria/FocusScope';\nimport intlMessages from '../../intl/menu/*.json';\nimport {MenuContext, MenuStateContext, useMenuStateContext} from './context';\nimport {MenuItem} from './MenuItem';\n// @ts-ignore\nimport {MenuSection} from './MenuSection';\nimport {mergeProps} from 'react-aria/mergeProps';\nimport React, {\n  KeyboardEventHandler,\n  ReactElement,\n  ReactNode,\n  RefObject,\n  useContext,\n  useEffect,\n  useRef,\n  useState\n} from 'react';\nimport {RootMenuTriggerState} from 'react-stately/useMenuTriggerState';\nimport styles from '@adobe/spectrum-css-temp/components/menu/vars.css';\nimport {TreeState, useTreeState} from 'react-stately/useTreeState';\nimport {useDOMRef} from '../utils/useDOMRef';\nimport {useIsMobileDevice} from '../utils/useIsMobileDevice';\nimport {useLayoutEffect} from 'react-aria/private/utils/useLayoutEffect';\nimport {useLocale} from 'react-aria/I18nProvider';\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\nimport {useSlotId} from 'react-aria/private/utils/useId';\nimport {useStyleProps} from '../utils/styleProps';\nimport {useSyncRef} from 'react-aria/private/utils/useSyncRef';\n\nexport interface SpectrumMenuProps<T> extends AriaMenuProps<T>, StyleProps {}\n\n/**\n * Menus display a list of actions or options that a user can choose.\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\nexport const Menu = React.forwardRef(function Menu<T extends object>(\n  props: SpectrumMenuProps<T>,\n  ref: DOMRef<HTMLDivElement>\n) {\n  let isSubmenu = true;\n  let contextProps = useContext(MenuContext);\n  let parentMenuContext = useMenuStateContext();\n  let {rootMenuTriggerState, state: parentMenuTreeState} = parentMenuContext || {\n    rootMenuTriggerState: contextProps.state\n  };\n  if (!parentMenuContext) {\n    isSubmenu = false;\n  }\n  let completeProps = {\n    ...mergeProps(contextProps, props)\n  };\n  let domRef = useDOMRef(ref);\n  let [popoverContainer, setPopoverContainer] = useState<HTMLElement | null>(null);\n  let trayContainerRef = useRef<HTMLDivElement | null>(null);\n  let state = useTreeState(completeProps);\n  let submenuRef = useRef<HTMLDivElement>(null);\n  let {menuProps} = useMenu(completeProps, state, domRef);\n  let {styleProps} = useStyleProps(completeProps);\n  useSyncRef(contextProps, domRef);\n  let [leftOffset, setLeftOffset] = useState({left: 0});\n  let prevPopoverContainer = useRef<HTMLElement | null>(null);\n\n  useLayoutEffect(() => {\n    if (\n      popoverContainer &&\n      prevPopoverContainer.current !== popoverContainer &&\n      leftOffset.left === 0\n    ) {\n      prevPopoverContainer.current = popoverContainer;\n      let {left} = popoverContainer.getBoundingClientRect();\n      setLeftOffset({left: -1 * left});\n    }\n  }, [leftOffset, popoverContainer]);\n\n  let menuLevel = contextProps.submenuLevel ?? -1;\n  let nextMenuLevelKey = rootMenuTriggerState?.expandedKeysStack[menuLevel + 1];\n  let hasOpenSubmenu = false;\n  if (nextMenuLevelKey != null) {\n    let nextMenuLevel = state.collection.getItem(nextMenuLevelKey);\n    hasOpenSubmenu = nextMenuLevel != null;\n  }\n\n  return (\n    <MenuStateContext.Provider\n      value={{\n        popoverContainer,\n        trayContainerRef,\n        menu: domRef,\n        submenu: submenuRef,\n        rootMenuTriggerState,\n        state\n      }}>\n      <div style={{height: hasOpenSubmenu ? '100%' : undefined}} ref={trayContainerRef} />\n      <FocusScope>\n        <TrayHeaderWrapper\n          onBackButtonPress={contextProps.onBackButtonPress}\n          hasOpenSubmenu={hasOpenSubmenu}\n          isSubmenu={isSubmenu}\n          parentMenuTreeState={parentMenuTreeState}\n          rootMenuTriggerState={rootMenuTriggerState}\n          menuRef={domRef}>\n          <div\n            {...menuProps}\n            style={mergeProps(styleProps.style, menuProps.style)}\n            ref={domRef}\n            className={classNames(styles, 'spectrum-Menu', styleProps.className)}>\n            {[...state.collection].map(item => {\n              if (item.type === 'section') {\n                return <MenuSection key={item.key} item={item} state={state} />;\n              }\n\n              let menuItem = <MenuItem key={item.key} item={item} state={state} />;\n\n              if (item.wrapper) {\n                menuItem = item.wrapper(menuItem);\n              }\n\n              return menuItem;\n            })}\n          </div>\n        </TrayHeaderWrapper>\n        {rootMenuTriggerState?.isOpen && (\n          <div\n            ref={setPopoverContainer}\n            style={{width: '100vw', position: 'absolute', top: -5, ...leftOffset}}\n          />\n        )}\n      </FocusScope>\n    </MenuStateContext.Provider>\n  );\n}) as <T>(props: SpectrumMenuProps<T> & {ref?: DOMRef<HTMLDivElement>}) => ReactElement;\n\nexport function TrayHeaderWrapper(props: {\n  children: ReactNode;\n  isSubmenu?: boolean;\n  hasOpenSubmenu?: boolean;\n  parentMenuTreeState?: TreeState<any>;\n  rootMenuTriggerState?: RootMenuTriggerState;\n  onBackButtonPress?: () => void;\n  wrapperKeyDown?: KeyboardEventHandler<HTMLDivElement> | undefined;\n  menuRef?: RefObject<HTMLDivElement | null>;\n}): ReactNode {\n  let {\n    children,\n    isSubmenu,\n    hasOpenSubmenu,\n    parentMenuTreeState,\n    rootMenuTriggerState,\n    onBackButtonPress,\n    wrapperKeyDown,\n    menuRef\n  } = props;\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/menu');\n  let lastKey = rootMenuTriggerState?.expandedKeysStack.slice(-1)[0];\n  let backButtonText = '';\n  if (lastKey != null) {\n    backButtonText = parentMenuTreeState?.collection.getItem(lastKey)?.textValue ?? '';\n  }\n  let backButtonLabel = stringFormatter.format('backButton', {\n    prevMenuButton: backButtonText ?? ''\n  });\n  let headingId = useSlotId();\n  let isMobile = useIsMobileDevice();\n  let {direction} = useLocale();\n\n  let [traySubmenuAnimation, setTraySubmenuAnimation] = useState('');\n  useLayoutEffect(() => {\n    if (!hasOpenSubmenu) {\n      setTraySubmenuAnimation('spectrum-TraySubmenu-enter');\n    }\n  }, [hasOpenSubmenu, isMobile]);\n\n  let timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  let handleBackButtonPress = () => {\n    setTraySubmenuAnimation('spectrum-TraySubmenu-exit');\n    timeoutRef.current = setTimeout(() => {\n      onBackButtonPress?.();\n    }, 220); // Matches transition duration\n  };\n\n  useEffect(() => {\n    return () => {\n      if (timeoutRef.current) {\n        clearTimeout(timeoutRef.current);\n      }\n    };\n  }, []);\n\n  // When opening submenu in tray, focus the first item in the submenu after animation completes\n  // This fixes an issue with iOS VO where the closed submenu was getting focus\n  let focusTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  useEffect(() => {\n    if (\n      isMobile &&\n      isSubmenu &&\n      !hasOpenSubmenu &&\n      traySubmenuAnimation === 'spectrum-TraySubmenu-enter'\n    ) {\n      focusTimeoutRef.current = setTimeout(() => {\n        let firstItem = menuRef?.current?.querySelector(\n          '[role=\"menuitem\"], [role=\"menuitemcheckbox\"], [role=\"menuitemradio\"]'\n        ) as HTMLElement;\n        firstItem?.focus();\n      }, 220);\n    }\n    return () => {\n      if (focusTimeoutRef.current) {\n        clearTimeout(focusTimeoutRef.current);\n      }\n    };\n  }, [hasOpenSubmenu, isMobile, isSubmenu, menuRef, traySubmenuAnimation]);\n\n  return (\n    <>\n      <div\n        role={headingId ? 'dialog' : undefined}\n        aria-labelledby={headingId}\n        aria-hidden={isMobile && hasOpenSubmenu}\n        data-testid=\"menu-wrapper\"\n        className={classNames(styles, 'spectrum-Menu-wrapper', {\n          'spectrum-Menu-wrapper--isMobile': isMobile,\n          'is-expanded': hasOpenSubmenu,\n          [traySubmenuAnimation]: isMobile\n        })}>\n        <div\n          role=\"presentation\"\n          className={classNames(styles, 'spectrum-Submenu-wrapper', {\n            'spectrum-Submenu-wrapper--isMobile': isMobile\n          })}\n          onKeyDown={wrapperKeyDown}>\n          {isMobile && isSubmenu && !hasOpenSubmenu && (\n            <div className={classNames(styles, 'spectrum-Submenu-headingWrapper')}>\n              <ActionButton aria-label={backButtonLabel} isQuiet onPress={handleBackButtonPress}>\n                {/* We don't have a ArrowLeftSmall so make due with ArrowDownSmall and transforms */}\n                {direction === 'rtl' ? (\n                  <ArrowDownSmall UNSAFE_style={{rotate: '270deg'}} />\n                ) : (\n                  <ArrowDownSmall UNSAFE_style={{rotate: '90deg'}} />\n                )}\n              </ActionButton>\n              <h1 id={headingId} className={classNames(styles, 'spectrum-Submenu-heading')}>\n                {backButtonText}\n              </h1>\n            </div>\n          )}\n          {children}\n        </div>\n      </div>\n    </>\n  );\n}\n"],"names":[],"version":3,"file":"Menu.js.map"}
+{"mappings":"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","sources":["packages/@adobe/react-spectrum/src/menu/Menu.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 {ActionButton} from '../button/ActionButton';\nimport {AriaMenuProps, useMenu} from 'react-aria/useMenu';\nimport ArrowDownSmall from '@spectrum-icons/ui/ArrowDownSmall';\nimport {classNames} from '../utils/classNames';\nimport {DOMRef, StyleProps} from '@react-types/shared';\nimport {FocusScope} from 'react-aria/FocusScope';\nimport intlMessages from '../../intl/menu/*.json';\nimport {MenuContext, MenuStateContext, useMenuStateContext} from './context';\nimport {MenuItem} from './MenuItem';\nimport {MenuSection} from './MenuSection';\nimport {mergeProps} from 'react-aria/mergeProps';\nimport React, {\n  KeyboardEventHandler,\n  ReactElement,\n  ReactNode,\n  RefObject,\n  useContext,\n  useEffect,\n  useRef,\n  useState\n} from 'react';\nimport {RootMenuTriggerState} from 'react-stately/useMenuTriggerState';\nimport styles from '@adobe/spectrum-css-temp/components/menu/vars.css';\nimport {TreeState, useTreeState} from 'react-stately/useTreeState';\nimport {useDOMRef} from '../utils/useDOMRef';\nimport {useIsMobileDevice} from '../utils/useIsMobileDevice';\nimport {useLayoutEffect} from 'react-aria/private/utils/useLayoutEffect';\nimport {useLocale} from 'react-aria/I18nProvider';\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\nimport {useSlotId} from 'react-aria/private/utils/useId';\nimport {useStyleProps} from '../utils/styleProps';\nimport {useSyncRef} from 'react-aria/private/utils/useSyncRef';\n\nexport interface SpectrumMenuProps<T> extends AriaMenuProps<T>, StyleProps {}\n\n/**\n * Menus display a list of actions or options that a user can choose.\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\nexport const Menu = React.forwardRef(function Menu<T extends object>(\n  props: SpectrumMenuProps<T>,\n  ref: DOMRef<HTMLDivElement>\n) {\n  let isSubmenu = true;\n  let contextProps = useContext(MenuContext);\n  let parentMenuContext = useMenuStateContext();\n  let {rootMenuTriggerState, state: parentMenuTreeState} = parentMenuContext || {\n    rootMenuTriggerState: contextProps.state\n  };\n  if (!parentMenuContext) {\n    isSubmenu = false;\n  }\n  let completeProps = {\n    ...mergeProps(contextProps, props)\n  };\n  let domRef = useDOMRef(ref);\n  let [popoverContainer, setPopoverContainer] = useState<HTMLElement | null>(null);\n  let trayContainerRef = useRef<HTMLDivElement | null>(null);\n  let state = useTreeState(completeProps);\n  let submenuRef = useRef<HTMLDivElement>(null);\n  let {menuProps} = useMenu(completeProps, state, domRef);\n  let {styleProps} = useStyleProps(completeProps);\n  useSyncRef(contextProps, domRef);\n  let [leftOffset, setLeftOffset] = useState({left: 0});\n  let prevPopoverContainer = useRef<HTMLElement | null>(null);\n\n  useLayoutEffect(() => {\n    if (\n      popoverContainer &&\n      prevPopoverContainer.current !== popoverContainer &&\n      leftOffset.left === 0\n    ) {\n      prevPopoverContainer.current = popoverContainer;\n      let {left} = popoverContainer.getBoundingClientRect();\n      setLeftOffset({left: -1 * left});\n    }\n  }, [leftOffset, popoverContainer]);\n\n  let menuLevel = contextProps.submenuLevel ?? -1;\n  let nextMenuLevelKey = rootMenuTriggerState?.expandedKeysStack[menuLevel + 1];\n  let hasOpenSubmenu = false;\n  if (nextMenuLevelKey != null) {\n    let nextMenuLevel = state.collection.getItem(nextMenuLevelKey);\n    hasOpenSubmenu = nextMenuLevel != null;\n  }\n\n  return (\n    <MenuStateContext.Provider\n      value={{\n        popoverContainer,\n        trayContainerRef,\n        menu: domRef,\n        submenu: submenuRef,\n        rootMenuTriggerState,\n        state\n      }}>\n      <div style={{height: hasOpenSubmenu ? '100%' : undefined}} ref={trayContainerRef} />\n      <FocusScope>\n        <TrayHeaderWrapper\n          onBackButtonPress={contextProps.onBackButtonPress}\n          hasOpenSubmenu={hasOpenSubmenu}\n          isSubmenu={isSubmenu}\n          parentMenuTreeState={parentMenuTreeState}\n          rootMenuTriggerState={rootMenuTriggerState}\n          menuRef={domRef}>\n          <div\n            {...menuProps}\n            style={mergeProps(styleProps.style, menuProps.style)}\n            ref={domRef}\n            className={classNames(styles, 'spectrum-Menu', styleProps.className)}>\n            {[...state.collection].map(item => {\n              if (item.type === 'section') {\n                return <MenuSection key={item.key} item={item} state={state} />;\n              }\n\n              let menuItem = <MenuItem key={item.key} item={item} state={state} />;\n\n              if (item.wrapper) {\n                menuItem = item.wrapper(menuItem);\n              }\n\n              return menuItem;\n            })}\n          </div>\n        </TrayHeaderWrapper>\n        {rootMenuTriggerState?.isOpen && (\n          <div\n            ref={setPopoverContainer}\n            style={{width: '100vw', position: 'absolute', top: -5, ...leftOffset}}\n          />\n        )}\n      </FocusScope>\n    </MenuStateContext.Provider>\n  );\n}) as <T>(props: SpectrumMenuProps<T> & {ref?: DOMRef<HTMLDivElement>}) => ReactElement;\n\nexport function TrayHeaderWrapper(props: {\n  children: ReactNode;\n  isSubmenu?: boolean;\n  hasOpenSubmenu?: boolean;\n  parentMenuTreeState?: TreeState<any>;\n  rootMenuTriggerState?: RootMenuTriggerState;\n  onBackButtonPress?: () => void;\n  wrapperKeyDown?: KeyboardEventHandler<HTMLDivElement> | undefined;\n  menuRef?: RefObject<HTMLDivElement | null>;\n}): ReactNode {\n  let {\n    children,\n    isSubmenu,\n    hasOpenSubmenu,\n    parentMenuTreeState,\n    rootMenuTriggerState,\n    onBackButtonPress,\n    wrapperKeyDown,\n    menuRef\n  } = props;\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/menu');\n  let lastKey = rootMenuTriggerState?.expandedKeysStack.slice(-1)[0];\n  let backButtonText = '';\n  if (lastKey != null) {\n    backButtonText = parentMenuTreeState?.collection.getItem(lastKey)?.textValue ?? '';\n  }\n  let backButtonLabel = stringFormatter.format('backButton', {\n    prevMenuButton: backButtonText ?? ''\n  });\n  let headingId = useSlotId();\n  let isMobile = useIsMobileDevice();\n  let {direction} = useLocale();\n\n  let [traySubmenuAnimation, setTraySubmenuAnimation] = useState('');\n  useLayoutEffect(() => {\n    if (!hasOpenSubmenu) {\n      setTraySubmenuAnimation('spectrum-TraySubmenu-enter');\n    }\n  }, [hasOpenSubmenu, isMobile]);\n\n  let timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  let handleBackButtonPress = () => {\n    setTraySubmenuAnimation('spectrum-TraySubmenu-exit');\n    timeoutRef.current = setTimeout(() => {\n      onBackButtonPress?.();\n    }, 220); // Matches transition duration\n  };\n\n  useEffect(() => {\n    return () => {\n      if (timeoutRef.current) {\n        clearTimeout(timeoutRef.current);\n      }\n    };\n  }, []);\n\n  // When opening submenu in tray, focus the first item in the submenu after animation completes\n  // This fixes an issue with iOS VO where the closed submenu was getting focus\n  let focusTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  useEffect(() => {\n    if (\n      isMobile &&\n      isSubmenu &&\n      !hasOpenSubmenu &&\n      traySubmenuAnimation === 'spectrum-TraySubmenu-enter'\n    ) {\n      focusTimeoutRef.current = setTimeout(() => {\n        let firstItem = menuRef?.current?.querySelector(\n          '[role=\"menuitem\"], [role=\"menuitemcheckbox\"], [role=\"menuitemradio\"]'\n        ) as HTMLElement;\n        firstItem?.focus();\n      }, 220);\n    }\n    return () => {\n      if (focusTimeoutRef.current) {\n        clearTimeout(focusTimeoutRef.current);\n      }\n    };\n  }, [hasOpenSubmenu, isMobile, isSubmenu, menuRef, traySubmenuAnimation]);\n\n  return (\n    <>\n      <div\n        role={headingId ? 'dialog' : undefined}\n        aria-labelledby={headingId}\n        aria-hidden={isMobile && hasOpenSubmenu}\n        data-testid=\"menu-wrapper\"\n        className={classNames(styles, 'spectrum-Menu-wrapper', {\n          'spectrum-Menu-wrapper--isMobile': isMobile,\n          'is-expanded': hasOpenSubmenu,\n          [traySubmenuAnimation]: isMobile\n        })}>\n        <div\n          role=\"presentation\"\n          className={classNames(styles, 'spectrum-Submenu-wrapper', {\n            'spectrum-Submenu-wrapper--isMobile': isMobile\n          })}\n          onKeyDown={wrapperKeyDown}>\n          {isMobile && isSubmenu && !hasOpenSubmenu && (\n            <div className={classNames(styles, 'spectrum-Submenu-headingWrapper')}>\n              <ActionButton aria-label={backButtonLabel} isQuiet onPress={handleBackButtonPress}>\n                {/* We don't have a ArrowLeftSmall so make due with ArrowDownSmall and transforms */}\n                {direction === 'rtl' ? (\n                  <ArrowDownSmall UNSAFE_style={{rotate: '270deg'}} />\n                ) : (\n                  <ArrowDownSmall UNSAFE_style={{rotate: '90deg'}} />\n                )}\n              </ActionButton>\n              <h1 id={headingId} className={classNames(styles, 'spectrum-Submenu-heading')}>\n                {backButtonText}\n              </h1>\n            </div>\n          )}\n          {children}\n        </div>\n      </div>\n    </>\n  );\n}\n"],"names":[],"version":3,"file":"Menu.js.map"}