@adobe/react-spectrum 3.47.1 → 3.47.3

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/ContextualHelpTrigger.cjs

@@ -64,6 +64,7 @@ function $6b61ca38ae72d583$var$ContextualHelpTrigger(props) {
         ...rootMenuTriggerState,
         ...state
     });
+    // oxlint-disable-next-line react/react-compiler
     let submenuRef = (0, $65aea7b37663976b$exports.unwrapDOMRef)(popoverRef);
     let { submenuTriggerProps: submenuTriggerProps, popoverProps: popoverProps } = (0, $6kttE$reactariauseMenu.useSubmenuTrigger)({
         parentMenuRef: parentMenuRef,
@@ -74,7 +75,8 @@ function $6b61ca38ae72d583$var$ContextualHelpTrigger(props) {
     let isMobile = (0, $0b97cdf6ccc1e502$exports.useIsMobileDevice)();
     let [traySubmenuAnimation, setTraySubmenuAnimation] = (0, $6kttE$react.useState)('');
     (0, $6kttE$react.useEffect)(()=>{
-        if (submenuTriggerState.isOpen) setTraySubmenuAnimation('spectrum-TraySubmenu-enter');
+        if (submenuTriggerState.isOpen) // oxlint-disable-next-line react/react-compiler
+        setTraySubmenuAnimation('spectrum-TraySubmenu-enter');
     }, [
         submenuTriggerState.isOpen
     ]);
@@ -112,8 +114,11 @@ function $6b61ca38ae72d583$var$ContextualHelpTrigger(props) {
         }, 220); // Matches transition duration
     };
     if (isMobile) {
+        // oxlint-disable-next-line react/react-compiler
         delete submenuTriggerProps.onBlur;
+        // oxlint-disable-next-line react/react-compiler
         delete submenuTriggerProps.onHoverChange;
+        // oxlint-disable-next-line react/react-compiler
         if (trayContainerRef.current && submenuTriggerState.isOpen) {
             let subDialogKeyDown = (e)=>{
                 switch(e.key){
@@ -130,6 +135,7 @@ function $6b61ca38ae72d583$var$ContextualHelpTrigger(props) {
                 wrapperKeyDown: subDialogKeyDown,
                 onBackButtonPress: onBackButtonPress
             }, content);
+            // oxlint-disable-next-line react/react-compiler
             overlay = /*#__PURE__*/ (0, ($parcel$interopDefault($6kttE$reactdom))).createPortal(tray, trayContainerRef.current);
         }
     } else {

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

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@adobe/react-spectrum/src/menu/ContextualHelpTrigger.tsx"],"sourcesContent":["/*\n * Copyright 2023 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 {classNames} from '../utils/classNames';\n\nimport {DOMRefValue, ItemProps, Key} from '@react-types/shared';\nimport {FocusScope} from 'react-aria/FocusScope';\nimport {getInteractionModality} from 'react-aria/private/interactions/useFocusVisible';\nimport helpStyles from '@adobe/spectrum-css-temp/components/contextualhelp/vars.css';\nimport {isFocusWithin, nodeContains} from 'react-aria/private/utils/shadowdom/DOMFunctions';\nimport {Popover} from '../overlays/Popover';\nimport React, {JSX, KeyboardEventHandler, ReactElement, useEffect, useRef, useState} from 'react';\nimport ReactDOM from 'react-dom';\nimport {SlotProvider} from '../utils/Slots';\nimport styles from '@adobe/spectrum-css-temp/components/menu/vars.css';\nimport {SubmenuTriggerContext, useMenuStateContext} from './context';\nimport {TrayHeaderWrapper} from './Menu';\nimport {unwrapDOMRef} from '../utils/useDOMRef';\nimport {useIsMobileDevice} from '../utils/useIsMobileDevice';\nimport {useSubmenuTrigger} from 'react-aria/useMenu';\nimport {useSubmenuTriggerState} from 'react-stately/useMenuTriggerState';\n\ninterface MenuDialogTriggerProps {\n  /** Whether the menu item is currently unavailable. */\n  isUnavailable?: boolean;\n  /** The triggering Item and the Dialog, respectively. */\n  children: [ReactElement, ReactElement];\n}\n\ninterface InternalMenuDialogTriggerProps extends MenuDialogTriggerProps {\n  targetKey: Key;\n}\n\nexport interface SpectrumMenuDialogTriggerProps extends MenuDialogTriggerProps {}\n\nfunction ContextualHelpTrigger(props: InternalMenuDialogTriggerProps): ReactElement {\n  let {isUnavailable = false, targetKey} = props;\n\n  let triggerRef = useRef<HTMLLIElement>(null);\n  let popoverRef = useRef<DOMRefValue<HTMLDivElement> | null>(null);\n  let {\n    popoverContainer,\n    trayContainerRef,\n    rootMenuTriggerState,\n    menu: parentMenuRef,\n    state\n  } = useMenuStateContext()!;\n  let submenuTriggerState = useSubmenuTriggerState(\n    {triggerKey: targetKey},\n    {...rootMenuTriggerState!, ...state}\n  );\n  let submenuRef = unwrapDOMRef(popoverRef);\n  let {submenuTriggerProps, popoverProps} = useSubmenuTrigger(\n    {\n      parentMenuRef,\n      submenuRef,\n      type: 'dialog',\n      isDisabled: !isUnavailable\n    },\n    submenuTriggerState,\n    triggerRef\n  );\n  let isMobile = useIsMobileDevice();\n  let [traySubmenuAnimation, setTraySubmenuAnimation] = useState('');\n  useEffect(() => {\n    if (submenuTriggerState.isOpen) {\n      setTraySubmenuAnimation('spectrum-TraySubmenu-enter');\n    }\n  }, [submenuTriggerState.isOpen]);\n  let slots = {};\n  if (isUnavailable) {\n    slots = {\n      dialog: {\n        UNSAFE_className: classNames(\n          helpStyles,\n          'react-spectrum-ContextualHelp-dialog',\n          {\n            'react-spectrum-ContextualHelp-dialog--isMobile': isMobile\n          },\n          classNames(styles, {\n            'spectrum-Menu-subdialog': !isMobile,\n            [traySubmenuAnimation]: isMobile\n          })\n        )\n      },\n      content: {UNSAFE_className: helpStyles['react-spectrum-ContextualHelp-content']},\n      footer: {UNSAFE_className: helpStyles['react-spectrum-ContextualHelp-footer']}\n    };\n  }\n  let [trigger] = React.Children.toArray(props.children);\n  let [, content] = props.children as [ReactElement, ReactElement];\n\n  let onBlurWithin = e => {\n    if (\n      e.relatedTarget &&\n      popoverRef.current &&\n      !nodeContains(popoverRef.current.UNSAFE_getDOMNode(), e.relatedTarget) &&\n      !(e.relatedTarget === triggerRef.current && getInteractionModality() === 'pointer')\n    ) {\n      if (submenuTriggerState.isOpen) {\n        submenuTriggerState.close();\n      }\n    }\n  };\n\n  let overlay;\n  let tray;\n  let onBackButtonPress = () => {\n    setTraySubmenuAnimation('spectrum-TraySubmenu-exit');\n    setTimeout(() => {\n      submenuTriggerState.close();\n      if (parentMenuRef.current && !isFocusWithin(parentMenuRef.current)) {\n        parentMenuRef.current.focus();\n      }\n    }, 220); // Matches transition duration\n  };\n\n  if (isMobile) {\n    delete submenuTriggerProps.onBlur;\n    delete submenuTriggerProps.onHoverChange;\n    if (trayContainerRef.current && submenuTriggerState.isOpen) {\n      let subDialogKeyDown: KeyboardEventHandler = e => {\n        switch (e.key) {\n          case 'Escape':\n            e.stopPropagation();\n            onBackButtonPress();\n            break;\n        }\n      };\n\n      tray = (\n        <TrayHeaderWrapper\n          isSubmenu\n          parentMenuTreeState={state}\n          rootMenuTriggerState={rootMenuTriggerState}\n          wrapperKeyDown={subDialogKeyDown}\n          onBackButtonPress={onBackButtonPress}>\n          {content}\n        </TrayHeaderWrapper>\n      );\n\n      overlay = ReactDOM.createPortal(tray, trayContainerRef.current);\n    }\n  } else {\n    let onDismissButtonPress = () => {\n      submenuTriggerState.close();\n      parentMenuRef.current?.focus();\n    };\n\n    overlay = (\n      <Popover\n        {...popoverProps}\n        UNSAFE_style={{clipPath: 'unset', overflow: 'visible', filter: 'unset', borderWidth: '0px'}}\n        UNSAFE_className={classNames(styles, 'spectrum-Submenu-popover')}\n        onDismissButtonPress={onDismissButtonPress}\n        onBlurWithin={onBlurWithin}\n        container={popoverContainer!}\n        state={submenuTriggerState}\n        ref={popoverRef}\n        triggerRef={triggerRef}\n        placement=\"end top\"\n        containerPadding={0}\n        hideArrow\n        enableBothDismissButtons>\n        <FocusScope restoreFocus contain>\n          {content}\n        </FocusScope>\n      </Popover>\n    );\n  }\n\n  return (\n    <>\n      <SubmenuTriggerContext.Provider value={{isUnavailable, triggerRef, ...submenuTriggerProps}}>\n        {trigger}\n      </SubmenuTriggerContext.Provider>\n      <SlotProvider slots={slots}>{submenuTriggerState.isOpen && overlay}</SlotProvider>\n    </>\n  );\n}\n\nContextualHelpTrigger.getCollectionNode = function* getCollectionNode<T>(props: ItemProps<T>) {\n  let childArray: ReactElement[] = [];\n  React.Children.forEach(props.children, child => {\n    if (React.isValidElement(child)) {\n      childArray.push(child);\n    }\n  });\n  let [trigger] = childArray;\n  let [, content] = props.children as [ReactElement, ReactElement];\n\n  yield {\n    element: React.cloneElement(trigger, {\n      ...(trigger.props as any),\n      hasChildItems: true,\n      isTrigger: true\n    }),\n    wrapper: element => (\n      <ContextualHelpTrigger key={element.key} targetKey={element.key} {...props}>\n        {element}\n        {content}\n      </ContextualHelpTrigger>\n    )\n  };\n};\n\nlet _Item = ContextualHelpTrigger as unknown as (\n  props: SpectrumMenuDialogTriggerProps\n) => JSX.Element;\nexport {_Item as ContextualHelpTrigger};\n"],"names":[],"version":3,"file":"ContextualHelpTrigger.cjs.map"}
+{"mappings":"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","sources":["packages/@adobe/react-spectrum/src/menu/ContextualHelpTrigger.tsx"],"sourcesContent":["/*\n * Copyright 2023 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 {classNames} from '../utils/classNames';\n\nimport {DOMRefValue, ItemProps, Key} from '@react-types/shared';\nimport {FocusScope} from 'react-aria/FocusScope';\nimport {getInteractionModality} from 'react-aria/private/interactions/useFocusVisible';\nimport helpStyles from '@adobe/spectrum-css-temp/components/contextualhelp/vars.css';\nimport {isFocusWithin, nodeContains} from 'react-aria/private/utils/shadowdom/DOMFunctions';\nimport {Popover} from '../overlays/Popover';\nimport React, {JSX, KeyboardEventHandler, ReactElement, useEffect, useRef, useState} from 'react';\nimport ReactDOM from 'react-dom';\nimport {SlotProvider} from '../utils/Slots';\nimport styles from '@adobe/spectrum-css-temp/components/menu/vars.css';\nimport {SubmenuTriggerContext, useMenuStateContext} from './context';\nimport {TrayHeaderWrapper} from './Menu';\nimport {unwrapDOMRef} from '../utils/useDOMRef';\nimport {useIsMobileDevice} from '../utils/useIsMobileDevice';\nimport {useSubmenuTrigger} from 'react-aria/useMenu';\nimport {useSubmenuTriggerState} from 'react-stately/useMenuTriggerState';\n\ninterface MenuDialogTriggerProps {\n  /** Whether the menu item is currently unavailable. */\n  isUnavailable?: boolean;\n  /** The triggering Item and the Dialog, respectively. */\n  children: [ReactElement, ReactElement];\n}\n\ninterface InternalMenuDialogTriggerProps extends MenuDialogTriggerProps {\n  targetKey: Key;\n}\n\nexport interface SpectrumMenuDialogTriggerProps extends MenuDialogTriggerProps {}\n\nfunction ContextualHelpTrigger(props: InternalMenuDialogTriggerProps): ReactElement {\n  let {isUnavailable = false, targetKey} = props;\n\n  let triggerRef = useRef<HTMLLIElement>(null);\n  let popoverRef = useRef<DOMRefValue<HTMLDivElement> | null>(null);\n  let {\n    popoverContainer,\n    trayContainerRef,\n    rootMenuTriggerState,\n    menu: parentMenuRef,\n    state\n  } = useMenuStateContext()!;\n  let submenuTriggerState = useSubmenuTriggerState(\n    {triggerKey: targetKey},\n    {...rootMenuTriggerState!, ...state}\n  );\n  // oxlint-disable-next-line react/react-compiler\n  let submenuRef = unwrapDOMRef(popoverRef);\n  let {submenuTriggerProps, popoverProps} = useSubmenuTrigger(\n    {\n      parentMenuRef,\n      submenuRef,\n      type: 'dialog',\n      isDisabled: !isUnavailable\n    },\n    submenuTriggerState,\n    triggerRef\n  );\n  let isMobile = useIsMobileDevice();\n  let [traySubmenuAnimation, setTraySubmenuAnimation] = useState('');\n  useEffect(() => {\n    if (submenuTriggerState.isOpen) {\n      // oxlint-disable-next-line react/react-compiler\n      setTraySubmenuAnimation('spectrum-TraySubmenu-enter');\n    }\n  }, [submenuTriggerState.isOpen]);\n  let slots = {};\n  if (isUnavailable) {\n    slots = {\n      dialog: {\n        UNSAFE_className: classNames(\n          helpStyles,\n          'react-spectrum-ContextualHelp-dialog',\n          {\n            'react-spectrum-ContextualHelp-dialog--isMobile': isMobile\n          },\n          classNames(styles, {\n            'spectrum-Menu-subdialog': !isMobile,\n            [traySubmenuAnimation]: isMobile\n          })\n        )\n      },\n      content: {UNSAFE_className: helpStyles['react-spectrum-ContextualHelp-content']},\n      footer: {UNSAFE_className: helpStyles['react-spectrum-ContextualHelp-footer']}\n    };\n  }\n  let [trigger] = React.Children.toArray(props.children);\n  let [, content] = props.children as [ReactElement, ReactElement];\n\n  let onBlurWithin = e => {\n    if (\n      e.relatedTarget &&\n      popoverRef.current &&\n      !nodeContains(popoverRef.current.UNSAFE_getDOMNode(), e.relatedTarget) &&\n      !(e.relatedTarget === triggerRef.current && getInteractionModality() === 'pointer')\n    ) {\n      if (submenuTriggerState.isOpen) {\n        submenuTriggerState.close();\n      }\n    }\n  };\n\n  let overlay;\n  let tray;\n  let onBackButtonPress = () => {\n    setTraySubmenuAnimation('spectrum-TraySubmenu-exit');\n    setTimeout(() => {\n      submenuTriggerState.close();\n      if (parentMenuRef.current && !isFocusWithin(parentMenuRef.current)) {\n        parentMenuRef.current.focus();\n      }\n    }, 220); // Matches transition duration\n  };\n\n  if (isMobile) {\n    // oxlint-disable-next-line react/react-compiler\n    delete submenuTriggerProps.onBlur;\n    // oxlint-disable-next-line react/react-compiler\n    delete submenuTriggerProps.onHoverChange;\n    // oxlint-disable-next-line react/react-compiler\n    if (trayContainerRef.current && submenuTriggerState.isOpen) {\n      let subDialogKeyDown: KeyboardEventHandler = e => {\n        switch (e.key) {\n          case 'Escape':\n            e.stopPropagation();\n            onBackButtonPress();\n            break;\n        }\n      };\n\n      tray = (\n        <TrayHeaderWrapper\n          isSubmenu\n          parentMenuTreeState={state}\n          rootMenuTriggerState={rootMenuTriggerState}\n          wrapperKeyDown={subDialogKeyDown}\n          onBackButtonPress={onBackButtonPress}>\n          {content}\n        </TrayHeaderWrapper>\n      );\n\n      // oxlint-disable-next-line react/react-compiler\n      overlay = ReactDOM.createPortal(tray, trayContainerRef.current);\n    }\n  } else {\n    let onDismissButtonPress = () => {\n      submenuTriggerState.close();\n      parentMenuRef.current?.focus();\n    };\n\n    overlay = (\n      <Popover\n        {...popoverProps}\n        UNSAFE_style={{clipPath: 'unset', overflow: 'visible', filter: 'unset', borderWidth: '0px'}}\n        UNSAFE_className={classNames(styles, 'spectrum-Submenu-popover')}\n        onDismissButtonPress={onDismissButtonPress}\n        onBlurWithin={onBlurWithin}\n        container={popoverContainer!}\n        state={submenuTriggerState}\n        ref={popoverRef}\n        triggerRef={triggerRef}\n        placement=\"end top\"\n        containerPadding={0}\n        hideArrow\n        enableBothDismissButtons>\n        <FocusScope restoreFocus contain>\n          {content}\n        </FocusScope>\n      </Popover>\n    );\n  }\n\n  return (\n    <>\n      <SubmenuTriggerContext.Provider value={{isUnavailable, triggerRef, ...submenuTriggerProps}}>\n        {trigger}\n      </SubmenuTriggerContext.Provider>\n      <SlotProvider slots={slots}>{submenuTriggerState.isOpen && overlay}</SlotProvider>\n    </>\n  );\n}\n\nContextualHelpTrigger.getCollectionNode = function* getCollectionNode<T>(props: ItemProps<T>) {\n  let childArray: ReactElement[] = [];\n  React.Children.forEach(props.children, child => {\n    if (React.isValidElement(child)) {\n      childArray.push(child);\n    }\n  });\n  let [trigger] = childArray;\n  let [, content] = props.children as [ReactElement, ReactElement];\n\n  yield {\n    element: React.cloneElement(trigger, {\n      ...(trigger.props as any),\n      hasChildItems: true,\n      isTrigger: true\n    }),\n    wrapper: element => (\n      <ContextualHelpTrigger key={element.key} targetKey={element.key} {...props}>\n        {element}\n        {content}\n      </ContextualHelpTrigger>\n    )\n  };\n};\n\nlet _Item = ContextualHelpTrigger as unknown as (\n  props: SpectrumMenuDialogTriggerProps\n) => JSX.Element;\nexport {_Item as ContextualHelpTrigger};\n"],"names":[],"version":3,"file":"ContextualHelpTrigger.cjs.map"}

package/dist/private/menu/ContextualHelpTrigger.js

@@ -58,6 +58,7 @@ function $6bc666e61b0562d8$var$ContextualHelpTrigger(props) {
         ...rootMenuTriggerState,
         ...state
     });
+    // oxlint-disable-next-line react/react-compiler
     let submenuRef = (0, $c234463e9ef56637$export$c7e28c72a4823176)(popoverRef);
     let { submenuTriggerProps: submenuTriggerProps, popoverProps: popoverProps } = (0, $b0zQ7$useSubmenuTrigger)({
         parentMenuRef: parentMenuRef,
@@ -68,7 +69,8 @@ function $6bc666e61b0562d8$var$ContextualHelpTrigger(props) {
     let isMobile = (0, $196ab9279fe71c29$export$736bf165441b18c7)();
     let [traySubmenuAnimation, setTraySubmenuAnimation] = (0, $b0zQ7$useState)('');
     (0, $b0zQ7$useEffect)(()=>{
-        if (submenuTriggerState.isOpen) setTraySubmenuAnimation('spectrum-TraySubmenu-enter');
+        if (submenuTriggerState.isOpen) // oxlint-disable-next-line react/react-compiler
+        setTraySubmenuAnimation('spectrum-TraySubmenu-enter');
     }, [
         submenuTriggerState.isOpen
     ]);
@@ -106,8 +108,11 @@ function $6bc666e61b0562d8$var$ContextualHelpTrigger(props) {
         }, 220); // Matches transition duration
     };
     if (isMobile) {
+        // oxlint-disable-next-line react/react-compiler
         delete submenuTriggerProps.onBlur;
+        // oxlint-disable-next-line react/react-compiler
         delete submenuTriggerProps.onHoverChange;
+        // oxlint-disable-next-line react/react-compiler
         if (trayContainerRef.current && submenuTriggerState.isOpen) {
             let subDialogKeyDown = (e)=>{
                 switch(e.key){
@@ -124,6 +129,7 @@ function $6bc666e61b0562d8$var$ContextualHelpTrigger(props) {
                 wrapperKeyDown: subDialogKeyDown,
                 onBackButtonPress: onBackButtonPress
             }, content);
+            // oxlint-disable-next-line react/react-compiler
             overlay = /*#__PURE__*/ (0, $b0zQ7$reactdom).createPortal(tray, trayContainerRef.current);
         }
     } else {

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

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@adobe/react-spectrum/src/menu/ContextualHelpTrigger.tsx"],"sourcesContent":["/*\n * Copyright 2023 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 {classNames} from '../utils/classNames';\n\nimport {DOMRefValue, ItemProps, Key} from '@react-types/shared';\nimport {FocusScope} from 'react-aria/FocusScope';\nimport {getInteractionModality} from 'react-aria/private/interactions/useFocusVisible';\nimport helpStyles from '@adobe/spectrum-css-temp/components/contextualhelp/vars.css';\nimport {isFocusWithin, nodeContains} from 'react-aria/private/utils/shadowdom/DOMFunctions';\nimport {Popover} from '../overlays/Popover';\nimport React, {JSX, KeyboardEventHandler, ReactElement, useEffect, useRef, useState} from 'react';\nimport ReactDOM from 'react-dom';\nimport {SlotProvider} from '../utils/Slots';\nimport styles from '@adobe/spectrum-css-temp/components/menu/vars.css';\nimport {SubmenuTriggerContext, useMenuStateContext} from './context';\nimport {TrayHeaderWrapper} from './Menu';\nimport {unwrapDOMRef} from '../utils/useDOMRef';\nimport {useIsMobileDevice} from '../utils/useIsMobileDevice';\nimport {useSubmenuTrigger} from 'react-aria/useMenu';\nimport {useSubmenuTriggerState} from 'react-stately/useMenuTriggerState';\n\ninterface MenuDialogTriggerProps {\n  /** Whether the menu item is currently unavailable. */\n  isUnavailable?: boolean;\n  /** The triggering Item and the Dialog, respectively. */\n  children: [ReactElement, ReactElement];\n}\n\ninterface InternalMenuDialogTriggerProps extends MenuDialogTriggerProps {\n  targetKey: Key;\n}\n\nexport interface SpectrumMenuDialogTriggerProps extends MenuDialogTriggerProps {}\n\nfunction ContextualHelpTrigger(props: InternalMenuDialogTriggerProps): ReactElement {\n  let {isUnavailable = false, targetKey} = props;\n\n  let triggerRef = useRef<HTMLLIElement>(null);\n  let popoverRef = useRef<DOMRefValue<HTMLDivElement> | null>(null);\n  let {\n    popoverContainer,\n    trayContainerRef,\n    rootMenuTriggerState,\n    menu: parentMenuRef,\n    state\n  } = useMenuStateContext()!;\n  let submenuTriggerState = useSubmenuTriggerState(\n    {triggerKey: targetKey},\n    {...rootMenuTriggerState!, ...state}\n  );\n  let submenuRef = unwrapDOMRef(popoverRef);\n  let {submenuTriggerProps, popoverProps} = useSubmenuTrigger(\n    {\n      parentMenuRef,\n      submenuRef,\n      type: 'dialog',\n      isDisabled: !isUnavailable\n    },\n    submenuTriggerState,\n    triggerRef\n  );\n  let isMobile = useIsMobileDevice();\n  let [traySubmenuAnimation, setTraySubmenuAnimation] = useState('');\n  useEffect(() => {\n    if (submenuTriggerState.isOpen) {\n      setTraySubmenuAnimation('spectrum-TraySubmenu-enter');\n    }\n  }, [submenuTriggerState.isOpen]);\n  let slots = {};\n  if (isUnavailable) {\n    slots = {\n      dialog: {\n        UNSAFE_className: classNames(\n          helpStyles,\n          'react-spectrum-ContextualHelp-dialog',\n          {\n            'react-spectrum-ContextualHelp-dialog--isMobile': isMobile\n          },\n          classNames(styles, {\n            'spectrum-Menu-subdialog': !isMobile,\n            [traySubmenuAnimation]: isMobile\n          })\n        )\n      },\n      content: {UNSAFE_className: helpStyles['react-spectrum-ContextualHelp-content']},\n      footer: {UNSAFE_className: helpStyles['react-spectrum-ContextualHelp-footer']}\n    };\n  }\n  let [trigger] = React.Children.toArray(props.children);\n  let [, content] = props.children as [ReactElement, ReactElement];\n\n  let onBlurWithin = e => {\n    if (\n      e.relatedTarget &&\n      popoverRef.current &&\n      !nodeContains(popoverRef.current.UNSAFE_getDOMNode(), e.relatedTarget) &&\n      !(e.relatedTarget === triggerRef.current && getInteractionModality() === 'pointer')\n    ) {\n      if (submenuTriggerState.isOpen) {\n        submenuTriggerState.close();\n      }\n    }\n  };\n\n  let overlay;\n  let tray;\n  let onBackButtonPress = () => {\n    setTraySubmenuAnimation('spectrum-TraySubmenu-exit');\n    setTimeout(() => {\n      submenuTriggerState.close();\n      if (parentMenuRef.current && !isFocusWithin(parentMenuRef.current)) {\n        parentMenuRef.current.focus();\n      }\n    }, 220); // Matches transition duration\n  };\n\n  if (isMobile) {\n    delete submenuTriggerProps.onBlur;\n    delete submenuTriggerProps.onHoverChange;\n    if (trayContainerRef.current && submenuTriggerState.isOpen) {\n      let subDialogKeyDown: KeyboardEventHandler = e => {\n        switch (e.key) {\n          case 'Escape':\n            e.stopPropagation();\n            onBackButtonPress();\n            break;\n        }\n      };\n\n      tray = (\n        <TrayHeaderWrapper\n          isSubmenu\n          parentMenuTreeState={state}\n          rootMenuTriggerState={rootMenuTriggerState}\n          wrapperKeyDown={subDialogKeyDown}\n          onBackButtonPress={onBackButtonPress}>\n          {content}\n        </TrayHeaderWrapper>\n      );\n\n      overlay = ReactDOM.createPortal(tray, trayContainerRef.current);\n    }\n  } else {\n    let onDismissButtonPress = () => {\n      submenuTriggerState.close();\n      parentMenuRef.current?.focus();\n    };\n\n    overlay = (\n      <Popover\n        {...popoverProps}\n        UNSAFE_style={{clipPath: 'unset', overflow: 'visible', filter: 'unset', borderWidth: '0px'}}\n        UNSAFE_className={classNames(styles, 'spectrum-Submenu-popover')}\n        onDismissButtonPress={onDismissButtonPress}\n        onBlurWithin={onBlurWithin}\n        container={popoverContainer!}\n        state={submenuTriggerState}\n        ref={popoverRef}\n        triggerRef={triggerRef}\n        placement=\"end top\"\n        containerPadding={0}\n        hideArrow\n        enableBothDismissButtons>\n        <FocusScope restoreFocus contain>\n          {content}\n        </FocusScope>\n      </Popover>\n    );\n  }\n\n  return (\n    <>\n      <SubmenuTriggerContext.Provider value={{isUnavailable, triggerRef, ...submenuTriggerProps}}>\n        {trigger}\n      </SubmenuTriggerContext.Provider>\n      <SlotProvider slots={slots}>{submenuTriggerState.isOpen && overlay}</SlotProvider>\n    </>\n  );\n}\n\nContextualHelpTrigger.getCollectionNode = function* getCollectionNode<T>(props: ItemProps<T>) {\n  let childArray: ReactElement[] = [];\n  React.Children.forEach(props.children, child => {\n    if (React.isValidElement(child)) {\n      childArray.push(child);\n    }\n  });\n  let [trigger] = childArray;\n  let [, content] = props.children as [ReactElement, ReactElement];\n\n  yield {\n    element: React.cloneElement(trigger, {\n      ...(trigger.props as any),\n      hasChildItems: true,\n      isTrigger: true\n    }),\n    wrapper: element => (\n      <ContextualHelpTrigger key={element.key} targetKey={element.key} {...props}>\n        {element}\n        {content}\n      </ContextualHelpTrigger>\n    )\n  };\n};\n\nlet _Item = ContextualHelpTrigger as unknown as (\n  props: SpectrumMenuDialogTriggerProps\n) => JSX.Element;\nexport {_Item as ContextualHelpTrigger};\n"],"names":[],"version":3,"file":"ContextualHelpTrigger.js.map"}
+{"mappings":"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","sources":["packages/@adobe/react-spectrum/src/menu/ContextualHelpTrigger.tsx"],"sourcesContent":["/*\n * Copyright 2023 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 {classNames} from '../utils/classNames';\n\nimport {DOMRefValue, ItemProps, Key} from '@react-types/shared';\nimport {FocusScope} from 'react-aria/FocusScope';\nimport {getInteractionModality} from 'react-aria/private/interactions/useFocusVisible';\nimport helpStyles from '@adobe/spectrum-css-temp/components/contextualhelp/vars.css';\nimport {isFocusWithin, nodeContains} from 'react-aria/private/utils/shadowdom/DOMFunctions';\nimport {Popover} from '../overlays/Popover';\nimport React, {JSX, KeyboardEventHandler, ReactElement, useEffect, useRef, useState} from 'react';\nimport ReactDOM from 'react-dom';\nimport {SlotProvider} from '../utils/Slots';\nimport styles from '@adobe/spectrum-css-temp/components/menu/vars.css';\nimport {SubmenuTriggerContext, useMenuStateContext} from './context';\nimport {TrayHeaderWrapper} from './Menu';\nimport {unwrapDOMRef} from '../utils/useDOMRef';\nimport {useIsMobileDevice} from '../utils/useIsMobileDevice';\nimport {useSubmenuTrigger} from 'react-aria/useMenu';\nimport {useSubmenuTriggerState} from 'react-stately/useMenuTriggerState';\n\ninterface MenuDialogTriggerProps {\n  /** Whether the menu item is currently unavailable. */\n  isUnavailable?: boolean;\n  /** The triggering Item and the Dialog, respectively. */\n  children: [ReactElement, ReactElement];\n}\n\ninterface InternalMenuDialogTriggerProps extends MenuDialogTriggerProps {\n  targetKey: Key;\n}\n\nexport interface SpectrumMenuDialogTriggerProps extends MenuDialogTriggerProps {}\n\nfunction ContextualHelpTrigger(props: InternalMenuDialogTriggerProps): ReactElement {\n  let {isUnavailable = false, targetKey} = props;\n\n  let triggerRef = useRef<HTMLLIElement>(null);\n  let popoverRef = useRef<DOMRefValue<HTMLDivElement> | null>(null);\n  let {\n    popoverContainer,\n    trayContainerRef,\n    rootMenuTriggerState,\n    menu: parentMenuRef,\n    state\n  } = useMenuStateContext()!;\n  let submenuTriggerState = useSubmenuTriggerState(\n    {triggerKey: targetKey},\n    {...rootMenuTriggerState!, ...state}\n  );\n  // oxlint-disable-next-line react/react-compiler\n  let submenuRef = unwrapDOMRef(popoverRef);\n  let {submenuTriggerProps, popoverProps} = useSubmenuTrigger(\n    {\n      parentMenuRef,\n      submenuRef,\n      type: 'dialog',\n      isDisabled: !isUnavailable\n    },\n    submenuTriggerState,\n    triggerRef\n  );\n  let isMobile = useIsMobileDevice();\n  let [traySubmenuAnimation, setTraySubmenuAnimation] = useState('');\n  useEffect(() => {\n    if (submenuTriggerState.isOpen) {\n      // oxlint-disable-next-line react/react-compiler\n      setTraySubmenuAnimation('spectrum-TraySubmenu-enter');\n    }\n  }, [submenuTriggerState.isOpen]);\n  let slots = {};\n  if (isUnavailable) {\n    slots = {\n      dialog: {\n        UNSAFE_className: classNames(\n          helpStyles,\n          'react-spectrum-ContextualHelp-dialog',\n          {\n            'react-spectrum-ContextualHelp-dialog--isMobile': isMobile\n          },\n          classNames(styles, {\n            'spectrum-Menu-subdialog': !isMobile,\n            [traySubmenuAnimation]: isMobile\n          })\n        )\n      },\n      content: {UNSAFE_className: helpStyles['react-spectrum-ContextualHelp-content']},\n      footer: {UNSAFE_className: helpStyles['react-spectrum-ContextualHelp-footer']}\n    };\n  }\n  let [trigger] = React.Children.toArray(props.children);\n  let [, content] = props.children as [ReactElement, ReactElement];\n\n  let onBlurWithin = e => {\n    if (\n      e.relatedTarget &&\n      popoverRef.current &&\n      !nodeContains(popoverRef.current.UNSAFE_getDOMNode(), e.relatedTarget) &&\n      !(e.relatedTarget === triggerRef.current && getInteractionModality() === 'pointer')\n    ) {\n      if (submenuTriggerState.isOpen) {\n        submenuTriggerState.close();\n      }\n    }\n  };\n\n  let overlay;\n  let tray;\n  let onBackButtonPress = () => {\n    setTraySubmenuAnimation('spectrum-TraySubmenu-exit');\n    setTimeout(() => {\n      submenuTriggerState.close();\n      if (parentMenuRef.current && !isFocusWithin(parentMenuRef.current)) {\n        parentMenuRef.current.focus();\n      }\n    }, 220); // Matches transition duration\n  };\n\n  if (isMobile) {\n    // oxlint-disable-next-line react/react-compiler\n    delete submenuTriggerProps.onBlur;\n    // oxlint-disable-next-line react/react-compiler\n    delete submenuTriggerProps.onHoverChange;\n    // oxlint-disable-next-line react/react-compiler\n    if (trayContainerRef.current && submenuTriggerState.isOpen) {\n      let subDialogKeyDown: KeyboardEventHandler = e => {\n        switch (e.key) {\n          case 'Escape':\n            e.stopPropagation();\n            onBackButtonPress();\n            break;\n        }\n      };\n\n      tray = (\n        <TrayHeaderWrapper\n          isSubmenu\n          parentMenuTreeState={state}\n          rootMenuTriggerState={rootMenuTriggerState}\n          wrapperKeyDown={subDialogKeyDown}\n          onBackButtonPress={onBackButtonPress}>\n          {content}\n        </TrayHeaderWrapper>\n      );\n\n      // oxlint-disable-next-line react/react-compiler\n      overlay = ReactDOM.createPortal(tray, trayContainerRef.current);\n    }\n  } else {\n    let onDismissButtonPress = () => {\n      submenuTriggerState.close();\n      parentMenuRef.current?.focus();\n    };\n\n    overlay = (\n      <Popover\n        {...popoverProps}\n        UNSAFE_style={{clipPath: 'unset', overflow: 'visible', filter: 'unset', borderWidth: '0px'}}\n        UNSAFE_className={classNames(styles, 'spectrum-Submenu-popover')}\n        onDismissButtonPress={onDismissButtonPress}\n        onBlurWithin={onBlurWithin}\n        container={popoverContainer!}\n        state={submenuTriggerState}\n        ref={popoverRef}\n        triggerRef={triggerRef}\n        placement=\"end top\"\n        containerPadding={0}\n        hideArrow\n        enableBothDismissButtons>\n        <FocusScope restoreFocus contain>\n          {content}\n        </FocusScope>\n      </Popover>\n    );\n  }\n\n  return (\n    <>\n      <SubmenuTriggerContext.Provider value={{isUnavailable, triggerRef, ...submenuTriggerProps}}>\n        {trigger}\n      </SubmenuTriggerContext.Provider>\n      <SlotProvider slots={slots}>{submenuTriggerState.isOpen && overlay}</SlotProvider>\n    </>\n  );\n}\n\nContextualHelpTrigger.getCollectionNode = function* getCollectionNode<T>(props: ItemProps<T>) {\n  let childArray: ReactElement[] = [];\n  React.Children.forEach(props.children, child => {\n    if (React.isValidElement(child)) {\n      childArray.push(child);\n    }\n  });\n  let [trigger] = childArray;\n  let [, content] = props.children as [ReactElement, ReactElement];\n\n  yield {\n    element: React.cloneElement(trigger, {\n      ...(trigger.props as any),\n      hasChildItems: true,\n      isTrigger: true\n    }),\n    wrapper: element => (\n      <ContextualHelpTrigger key={element.key} targetKey={element.key} {...props}>\n        {element}\n        {content}\n      </ContextualHelpTrigger>\n    )\n  };\n};\n\nlet _Item = ContextualHelpTrigger as unknown as (\n  props: SpectrumMenuDialogTriggerProps\n) => JSX.Element;\nexport {_Item as ContextualHelpTrigger};\n"],"names":[],"version":3,"file":"ContextualHelpTrigger.js.map"}