@react-spectrum/tag 3.0.0-nightly.1930 → 3.0.0-nightly.1933

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/main.css +1 -1
  2. package/dist/main.js +25 -77
  3. package/dist/main.js.map +1 -1
  4. package/dist/module.js +27 -79
  5. package/dist/module.js.map +1 -1
  6. package/dist/types.d.ts.map +1 -1
  7. package/package.json +14 -18
  8. package/src/Tag.tsx +24 -22
  9. package/src/TagGroup.tsx +10 -51
package/dist/main.css CHANGED
@@ -1 +1 @@
1
- .spectrum-Tags-item_8407eb{--spectrum-focus-ring-border-radius:var(--spectrum-textfield-border-radius,var(--spectrum-alias-border-radius-regular));--spectrum-focus-ring-gap:var(--spectrum-alias-input-focusring-gap);--spectrum-focus-ring-size:var(--spectrum-alias-input-focusring-size);--spectrum-focus-ring-border-size:0px;--spectrum-focus-ring-color:var(--spectrum-high-contrast-focus-ring-color,var(--spectrum-alias-focus-ring-color,var(--spectrum-alias-focus-color)))}.spectrum-Tags-item_8407eb:after{border-radius:calc(var(--spectrum-focus-ring-border-radius) + var(--spectrum-focus-ring-gap));content:"";margin:calc(-1*var(--spectrum-focus-ring-border-size));pointer-events:none;transition:box-shadow var(--spectrum-global-animation-duration-100,.13s)ease-out,margin var(--spectrum-global-animation-duration-100,.13s)ease-out;display:block;position:absolute;top:0;bottom:0;left:0;right:0}.spectrum-Tags-item_8407eb.focus-ring_8407eb:after{margin:calc(var(--spectrum-focus-ring-gap)*-1 - var(--spectrum-focus-ring-border-size));box-shadow:0 0 0 var(--spectrum-focus-ring-size)var(--spectrum-focus-ring-color)}.spectrum-Tags_8407eb{flex-wrap:wrap;margin:0;padding:0;list-style:none;display:inline-flex}[dir=ltr] .spectrum-Tags-item_8407eb{padding-left:calc(var(--spectrum-tag-padding-x,var(--spectrum-global-dimension-size-125)) - var(--spectrum-tag-border-size,var(--spectrum-alias-border-size-thin)))}[dir=rtl] .spectrum-Tags-item_8407eb{padding-right:calc(var(--spectrum-tag-padding-x,var(--spectrum-global-dimension-size-125)) - var(--spectrum-tag-border-size,var(--spectrum-alias-border-size-thin)))}.spectrum-Tags-item_8407eb{--spectrum-focus-ring-border-radius:var(--spectrum-tag-border-radius,var(--spectrum-alias-border-radius-regular));--spectrum-focus-ring-border-size:var(--spectrum-tag-border-size,var(--spectrum-alias-border-size-thin));display:-ms-grid;-ms-grid-columns:1fr auto;box-sizing:border-box;margin:calc(var(--spectrum-taggroup-tag-gap-y,var(--spectrum-global-dimension-size-100))/2)calc(var(--spectrum-taggroup-tag-gap-x,var(--spectrum-global-dimension-size-100))/2);height:var(--spectrum-tag-height,var(--spectrum-global-dimension-size-300));max-width:100%;border-width:var(--spectrum-tag-border-size,var(--spectrum-alias-border-size-thin));border-radius:var(--spectrum-tag-border-radius,var(--spectrum-alias-border-radius-regular));-webkit-user-select:none;user-select:none;transition:border-color var(--spectrum-global-animation-duration-100,.13s)ease-in-out,color var(--spectrum-global-animation-duration-100,.13s)ease-in-out,box-shadow var(--spectrum-global-animation-duration-100,.13s)ease-in-out,background-color var(--spectrum-global-animation-duration-100,.13s)ease-in-out;border-style:solid;outline:none;grid-template-columns:1fr auto;grid-template-areas:"icon content action";align-items:center;display:grid;position:relative}.spectrum-Tags-item_8407eb.is-disabled_8407eb{pointer-events:none}.spectrum-Tags-item_8407eb .spectrum-Tag-action_8407eb{height:calc(var(--spectrum-tag-height,var(--spectrum-global-dimension-size-300)) - 2*var(--spectrum-tag-border-size,var(--spectrum-alias-border-size-thin)));width:var(--spectrum-global-dimension-size-300);grid-area:action}[dir=ltr] .spectrum-Tag-icon_8407eb{margin-right:var(--spectrum-global-dimension-size-100)}[dir=rtl] .spectrum-Tag-icon_8407eb{margin-left:var(--spectrum-global-dimension-size-100)}.spectrum-Tag-icon_8407eb{grid-area:icon}[dir=ltr] .spectrum-Tag-content_8407eb{margin-right:var(--spectrum-tag-padding-x,var(--spectrum-global-dimension-size-125))}[dir=rtl] .spectrum-Tag-content_8407eb{margin-left:var(--spectrum-tag-padding-x,var(--spectrum-global-dimension-size-125))}.spectrum-Tag-content_8407eb{height:100%;line-height:calc(var(--spectrum-tag-height,var(--spectrum-global-dimension-size-300)) - var(--spectrum-tag-border-size,var(--spectrum-alias-border-size-thin))*2);font-size:var(--spectrum-tag-text-size,var(--spectrum-global-dimension-font-size-75));cursor:default;white-space:nowrap;text-overflow:ellipsis;outline:none;flex:auto;grid-area:content;overflow:hidden}[dir=ltr] .tags-removable_8407eb{margin-right:0}[dir=rtl] .tags-removable_8407eb{margin-left:0}.spectrum-Tags-item_8407eb{color:var(--spectrum-tag-text-color,var(--spectrum-global-color-gray-700));background-color:var(--spectrum-tag-background-color,var(--spectrum-global-color-gray-75));border-color:var(--spectrum-tag-border-color,var(--spectrum-global-color-gray-600))}.spectrum-Tags-item_8407eb.is-hovered_8407eb{background-color:var(--spectrum-tag-background-color-hover,var(--spectrum-global-color-gray-75));color:var(--spectrum-tag-text-color-hover,var(--spectrum-global-color-gray-900));border-color:var(--spectrum-tag-border-color-hover,var(--spectrum-global-color-gray-900))}.spectrum-Tags-item_8407eb.focus-ring_8407eb{background-color:var(--spectrum-tag-background-color-key-focus,var(--spectrum-global-color-gray-75));color:var(--spectrum-tag-text-color-key-focus,var(--spectrum-global-color-gray-900));border-color:var(--spectrum-tag-border-color-key-focus,var(--spectrum-alias-border-color-focus))}.spectrum-Tags-item_8407eb.is-selected_8407eb{background-color:var(--spectrum-tag-background-color-selected,var(--spectrum-global-color-gray-700));color:var(--spectrum-tag-text-color-selected,var(--spectrum-global-color-gray-50));border-color:var(--spectrum-tag-border-color-selected,var(--spectrum-alias-border-color-transparent))}.spectrum-Tags-item_8407eb.is-selected_8407eb.is-hovered_8407eb{background-color:var(--spectrum-tag-background-color-selected-hover,var(--spectrum-global-color-gray-800))}.spectrum-Tags-item_8407eb.is-selected_8407eb.focus-ring_8407eb{box-shadow:0 0 0 2px var(--spectrum-tag-border-color-selected-key-focus,var(--spectrum-alias-border-color-focus));border-color:var(--spectrum-tag-text-color-selected-key-focus,var(--spectrum-global-color-gray-50))}.spectrum-Tags-item_8407eb.is-selected_8407eb.is-invalid_8407eb{border-color:var(--spectrum-tag-border-color-error-selected,var(--spectrum-alias-border-color-transparent))}.spectrum-Tags-item_8407eb.is-selected_8407eb.is-invalid_8407eb .spectrum-Tags-itemIcon_8407eb,.spectrum-Tags-item_8407eb.is-selected_8407eb.is-invalid_8407eb .spectrum-Tags-itemLabel_8407eb,.spectrum-Tags-item_8407eb.is-selected_8407eb.is-invalid_8407eb .spectrum-Tags-itemClearButton_8407eb{color:var(--spectrum-tag-text-color-error-selected,var(--spectrum-global-color-gray-50))}.spectrum-Tags-item_8407eb.is-selected_8407eb.is-invalid_8407eb.focus-ring_8407eb{box-shadow:0 0 0 2px var(--spectrum-tag-border-color-key-focus,var(--spectrum-alias-border-color-focus));border-color:var(--spectrum-tag-border-color-error-selected,var(--spectrum-alias-border-color-transparent))}.spectrum-Tags-item_8407eb.is-selected_8407eb.is-invalid_8407eb.is-hovered_8407eb{border-color:var(--spectrum-tag-border-color-selected,var(--spectrum-alias-border-color-transparent))}.spectrum-Tags-item_8407eb.is-invalid_8407eb{color:var(--spectrum-tag-icon-color-error,var(--spectrum-global-color-red-500));border-color:var(--spectrum-tag-border-color-error,var(--spectrum-global-color-red-500))}.spectrum-Tags-item_8407eb.is-invalid_8407eb.is-hovered_8407eb{color:var(--spectrum-tag-icon-color-error-hover,var(--spectrum-global-color-red-600));border-color:var(--spectrum-tag-border-color-error-hover,var(--spectrum-global-color-red-600))}.spectrum-Tags-item_8407eb.is-invalid_8407eb.focus-ring_8407eb{color:var(--spectrum-tag-icon-color-error-hover,var(--spectrum-global-color-red-600));border-color:var(--spectrum-tag-border-color-key-focus,var(--spectrum-alias-border-color-focus))}.spectrum-Tags-item_8407eb.is-invalid_8407eb .spectrum-Tags-itemIcon_8407eb,.spectrum-Tags-item_8407eb.is-invalid_8407eb .spectrum-Tags-itemClearButton_8407eb{color:var(--spectrum-tag-border-color-error,var(--spectrum-global-color-red-500))}.spectrum-Tags-item_8407eb.is-disabled_8407eb{color:var(--spectrum-tag-text-color-disabled,var(--spectrum-global-color-gray-500));background-color:var(--spectrum-tag-background-color-disabled,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-tag-border-color-disabled,var(--spectrum-global-color-gray-200))}.spectrum-Tags-item_8407eb.is-disabled_8407eb .spectrum-Avatar_8407eb{opacity:var(--spectrum-avatar-small-opacity-disabled,.3)}.spectrum-Tags-item--removable_8407eb.is-hovered_8407eb{color:var(--spectrum-tag-removable-text-color-hover,var(--spectrum-global-color-gray-900))}.spectrum-Tags-item--removable_8407eb:active{color:var(--spectrum-tag-removable-text-color-down,var(--spectrum-global-color-gray-700))}.spectrum-Tags-item--removable_8407eb.is-invalid_8407eb.is-hovered_8407eb{border-color:var(--spectrum-tag-removable-border-color-error-hover,var(--spectrum-global-color-red-600))}.spectrum-Tags-item--removable_8407eb.is-invalid_8407eb.is-hovered_8407eb .spectrum-Tags-itemClearButton_8407eb{color:var(--spectrum-tag-removable-border-color-error-hover,var(--spectrum-global-color-red-600))}.spectrum-Tags-item--removable_8407eb.is-invalid_8407eb .spectrum-Tags-itemClearButton_8407eb.is-focused_8407eb{color:var(--spectrum-tag-icon-color-error-hover,var(--spectrum-global-color-red-600))}.spectrum-Tags-item--removable_8407eb.is-invalid_8407eb:active{border-color:var(--spectrum-tag-removable-border-color-error-down,var(--spectrum-global-color-red-700));color:var(--spectrum-tag-removable-text-color-error-down,var(--spectrum-global-color-gray-700))}.spectrum-Tags-item--removable_8407eb.is-focused_8407eb{color:var(--spectrum-tag-removable-text-color-key-focus,var(--spectrum-global-color-gray-700))}.spectrum-Tags-item--removable_8407eb.is-focused_8407eb.is-invalid_8407eb{color:var(--spectrum-tag-removable-text-color-error-key-focus,var(--spectrum-global-color-gray-700))}.spectrum-Tags-item--removable_8407eb.is-selected_8407eb{color:var(--spectrum-tag-removable-text-color-selected,var(--spectrum-global-color-gray-50))}.spectrum-Tags-item--removable_8407eb.is-selected_8407eb.is-focused_8407eb{color:var(--spectrum-tag-removable-text-color-selected-key-focus,var(--spectrum-global-color-gray-50))}.spectrum-Tags-item--removable_8407eb.is-selected_8407eb .spectrum-Tags-itemClearButton_8407eb{color:var(--spectrum-tag-removable-button-icon-color-selected,var(--spectrum-global-color-gray-50))}.spectrum-Tags-item--removable_8407eb.is-selected_8407eb .spectrum-Tags-itemClearButton_8407eb.is-hovered_8407eb{background-color:var(--spectrum-tag-removable-button-background-color-selected-hover,var(--spectrum-global-color-gray-600));color:var(--spectrum-tag-removable-button-icon-color-selected-hover,var(--spectrum-global-color-gray-50))}.spectrum-Tags-item--removable_8407eb .spectrum-Tags-itemClearButton_8407eb.is-focused_8407eb{border:2px solid var(--spectrum-tag-removable-border-color-key-focus,var(--spectrum-alias-border-color-focus));border-radius:var(--spectrum-alias-border-radius-regular,var(--spectrum-global-dimension-size-50));background-color:var(--spectrum-tag-removable-button-background-color-key-focus,var(--spectrum-global-color-gray-600));color:var(--spectrum-tag-removable-button-icon-color-key-focus,var(--spectrum-global-color-gray-900))}.spectrum-Tags-item--removable_8407eb .spectrum-Tags-itemClearButton_8407eb.is-hovered_8407eb{background-color:var(--spectrum-tag-removable-button-background-color-hover,var(--spectrum-global-color-gray-300));color:var(--spectrum-tag-removable-button-icon-color-hover,var(--spectrum-global-color-gray-900))}@media (forced-colors:active){.spectrum-Tags-item_8407eb{forced-color-adjust:none;--spectrum-tag-background-color:ButtonFace;--spectrum-tag-background-color-disabled:ButtonFace;--spectrum-tag-background-color-hover:ButtonFace;--spectrum-tag-background-color-key-focus:ButtonFace;--spectrum-tag-background-color-selected:Highlight;--spectrum-tag-background-color-selected-hover:Highlight;--spectrum-tag-border-color:ButtonText;--spectrum-tag-border-color-disabled:GrayText;--spectrum-tag-border-color-error:ButtonText;--spectrum-tag-border-color-error-hover:ButtonText;--spectrum-tag-border-color-error-selected:HighlightText;--spectrum-tag-border-color-hover:Highlight;--spectrum-tag-border-color-key-focus:Highlight;--spectrum-tag-border-color-selected:HighlightText;--spectrum-tag-border-color-selected-key-focus:ButtonText;--spectrum-tag-icon-color-error:ButtonText;--spectrum-tag-icon-color-error-hover:ButtonText;--spectrum-tag-removable-border-color-error-down:Highlight;--spectrum-tag-removable-border-color-error-hover:Highlight;--spectrum-tag-removable-border-color-key-focus:Highlight;--spectrum-tag-removable-button-background-color-hover:ButtonFace;--spectrum-tag-removable-button-background-color-key-focus:ButtonFace;--spectrum-tag-removable-button-background-color-selected-hover:Highlight;--spectrum-tag-removable-button-icon-color-hover:Highlight;--spectrum-tag-removable-button-icon-color-key-focus:Highlight;--spectrum-tag-removable-button-icon-color-selected:HighlightText;--spectrum-tag-removable-button-icon-color-selected-hover:HighlightText;--spectrum-tag-removable-text-color-down:ButtonText;--spectrum-tag-removable-text-color-error-down:Highlight;--spectrum-tag-removable-text-color-error-key-focus:Highlight;--spectrum-tag-removable-text-color-hover:ButtonText;--spectrum-tag-removable-text-color-key-focus:ButtonText;--spectrum-tag-removable-text-color-selected:HighlightText;--spectrum-tag-removable-text-color-selected-key-focus:HighlightText;--spectrum-tag-text-color:ButtonText;--spectrum-tag-text-color-disabled:GrayText;--spectrum-tag-text-color-error-selected:HighlightText;--spectrum-tag-text-color-hover:ButtonText;--spectrum-tag-text-color-key-focus:ButtonText;--spectrum-tag-text-color-selected:HighlightText;--spectrum-tag-text-color-selected-key-focus:HighlightText}}
1
+ .spectrum-Tags-item_8407eb{--spectrum-focus-ring-border-radius:var(--spectrum-textfield-border-radius,var(--spectrum-alias-border-radius-regular));--spectrum-focus-ring-gap:var(--spectrum-alias-input-focusring-gap);--spectrum-focus-ring-size:var(--spectrum-alias-input-focusring-size);--spectrum-focus-ring-border-size:0px;--spectrum-focus-ring-color:var(--spectrum-high-contrast-focus-ring-color,var(--spectrum-alias-focus-ring-color,var(--spectrum-alias-focus-color)))}.spectrum-Tags-item_8407eb:after{border-radius:calc(var(--spectrum-focus-ring-border-radius) + var(--spectrum-focus-ring-gap));content:"";margin:calc(-1*var(--spectrum-focus-ring-border-size));pointer-events:none;transition:box-shadow var(--spectrum-global-animation-duration-100,.13s)ease-out,margin var(--spectrum-global-animation-duration-100,.13s)ease-out;display:block;position:absolute;top:0;bottom:0;left:0;right:0}.spectrum-Tags-item_8407eb.focus-ring_8407eb:after{margin:calc(var(--spectrum-focus-ring-gap)*-1 - var(--spectrum-focus-ring-border-size));box-shadow:0 0 0 var(--spectrum-focus-ring-size)var(--spectrum-focus-ring-color)}.spectrum-Tags_8407eb{flex-wrap:wrap;margin:0;padding:0;list-style:none;display:flex}[dir=ltr] .spectrum-Tags-item_8407eb{padding-left:calc(var(--spectrum-tag-padding-x,var(--spectrum-global-dimension-size-125)) - var(--spectrum-tag-border-size,var(--spectrum-alias-border-size-thin)))}[dir=rtl] .spectrum-Tags-item_8407eb{padding-right:calc(var(--spectrum-tag-padding-x,var(--spectrum-global-dimension-size-125)) - var(--spectrum-tag-border-size,var(--spectrum-alias-border-size-thin)))}.spectrum-Tags-item_8407eb{--spectrum-focus-ring-border-radius:var(--spectrum-tag-border-radius,var(--spectrum-alias-border-radius-regular));--spectrum-focus-ring-border-size:var(--spectrum-tag-border-size,var(--spectrum-alias-border-size-thin));display:-ms-grid;-ms-grid-columns:auto 1fr auto;box-sizing:border-box;margin:calc(var(--spectrum-taggroup-tag-gap-y,var(--spectrum-global-dimension-size-100))/2)calc(var(--spectrum-taggroup-tag-gap-x,var(--spectrum-global-dimension-size-100))/2);height:var(--spectrum-tag-height,var(--spectrum-global-dimension-size-300));max-width:100%;border-width:var(--spectrum-tag-border-size,var(--spectrum-alias-border-size-thin));border-radius:var(--spectrum-tag-border-radius,var(--spectrum-alias-border-radius-regular));-webkit-user-select:none;user-select:none;transition:border-color var(--spectrum-global-animation-duration-100,.13s)ease-in-out,color var(--spectrum-global-animation-duration-100,.13s)ease-in-out,box-shadow var(--spectrum-global-animation-duration-100,.13s)ease-in-out,background-color var(--spectrum-global-animation-duration-100,.13s)ease-in-out;border-style:solid;outline:none;grid-template-columns:auto 1fr auto;grid-template-areas:"icon content action";align-items:center;display:grid;position:relative}.spectrum-Tags-item_8407eb.is-disabled_8407eb{pointer-events:none}.spectrum-Tags-item_8407eb .spectrum-Tag-action_8407eb{height:calc(var(--spectrum-tag-height,var(--spectrum-global-dimension-size-300)) - 2*var(--spectrum-tag-border-size,var(--spectrum-alias-border-size-thin)));width:var(--spectrum-global-dimension-size-300);grid-area:action}.spectrum-Tags-item_8407eb .spectrum-Tag-cell_8407eb{text-overflow:ellipsis;align-items:center;display:flex;overflow:hidden}[dir=ltr] .spectrum-Tags-item_8407eb .spectrum-Tag-icon_8407eb{margin-right:var(--spectrum-global-dimension-size-100)}[dir=rtl] .spectrum-Tags-item_8407eb .spectrum-Tag-icon_8407eb{margin-left:var(--spectrum-global-dimension-size-100)}.spectrum-Tags-item_8407eb .spectrum-Tag-icon_8407eb{grid-area:icon}[dir=ltr] .spectrum-Tags-item_8407eb .spectrum-Tag-content_8407eb{margin-right:var(--spectrum-tag-padding-x,var(--spectrum-global-dimension-size-125))}[dir=rtl] .spectrum-Tags-item_8407eb .spectrum-Tag-content_8407eb{margin-left:var(--spectrum-tag-padding-x,var(--spectrum-global-dimension-size-125))}.spectrum-Tags-item_8407eb .spectrum-Tag-content_8407eb{line-height:calc(var(--spectrum-tag-height,var(--spectrum-global-dimension-size-300)) - var(--spectrum-tag-border-size,var(--spectrum-alias-border-size-thin))*2);font-size:var(--spectrum-tag-text-size,var(--spectrum-global-dimension-font-size-75));cursor:default;white-space:nowrap;text-overflow:ellipsis;outline:none;flex:auto;grid-area:content;overflow:hidden}[dir=ltr] .spectrum-Tags-item_8407eb.is-removable_8407eb .spectrum-Tag-content_8407eb{margin-right:0}[dir=rtl] .spectrum-Tags-item_8407eb.is-removable_8407eb .spectrum-Tag-content_8407eb{margin-left:0}.spectrum-Tags-item_8407eb{color:var(--spectrum-tag-text-color,var(--spectrum-global-color-gray-700));background-color:var(--spectrum-tag-background-color,var(--spectrum-global-color-gray-75));border-color:var(--spectrum-tag-border-color,var(--spectrum-global-color-gray-600))}.spectrum-Tags-item_8407eb.is-hovered_8407eb{background-color:var(--spectrum-tag-background-color-hover,var(--spectrum-global-color-gray-75));color:var(--spectrum-tag-text-color-hover,var(--spectrum-global-color-gray-900));border-color:var(--spectrum-tag-border-color-hover,var(--spectrum-global-color-gray-900))}.spectrum-Tags-item_8407eb.focus-ring_8407eb{background-color:var(--spectrum-tag-background-color-key-focus,var(--spectrum-global-color-gray-75));color:var(--spectrum-tag-text-color-key-focus,var(--spectrum-global-color-gray-900));border-color:var(--spectrum-tag-border-color-key-focus,var(--spectrum-alias-border-color-focus))}.spectrum-Tags-item_8407eb.is-selected_8407eb{background-color:var(--spectrum-tag-background-color-selected,var(--spectrum-global-color-gray-700));color:var(--spectrum-tag-text-color-selected,var(--spectrum-global-color-gray-50));border-color:var(--spectrum-tag-border-color-selected,var(--spectrum-alias-border-color-transparent))}.spectrum-Tags-item_8407eb.is-selected_8407eb.is-hovered_8407eb{background-color:var(--spectrum-tag-background-color-selected-hover,var(--spectrum-global-color-gray-800))}.spectrum-Tags-item_8407eb.is-selected_8407eb.focus-ring_8407eb{box-shadow:0 0 0 2px var(--spectrum-tag-border-color-selected-key-focus,var(--spectrum-alias-border-color-focus));border-color:var(--spectrum-tag-text-color-selected-key-focus,var(--spectrum-global-color-gray-50))}.spectrum-Tags-item_8407eb.is-selected_8407eb.is-invalid_8407eb{border-color:var(--spectrum-tag-border-color-error-selected,var(--spectrum-alias-border-color-transparent))}.spectrum-Tags-item_8407eb.is-selected_8407eb.is-invalid_8407eb .spectrum-Tags-itemIcon_8407eb,.spectrum-Tags-item_8407eb.is-selected_8407eb.is-invalid_8407eb .spectrum-Tags-itemLabel_8407eb,.spectrum-Tags-item_8407eb.is-selected_8407eb.is-invalid_8407eb .spectrum-Tags-itemClearButton_8407eb{color:var(--spectrum-tag-text-color-error-selected,var(--spectrum-global-color-gray-50))}.spectrum-Tags-item_8407eb.is-selected_8407eb.is-invalid_8407eb.focus-ring_8407eb{box-shadow:0 0 0 2px var(--spectrum-tag-border-color-key-focus,var(--spectrum-alias-border-color-focus));border-color:var(--spectrum-tag-border-color-error-selected,var(--spectrum-alias-border-color-transparent))}.spectrum-Tags-item_8407eb.is-selected_8407eb.is-invalid_8407eb.is-hovered_8407eb{border-color:var(--spectrum-tag-border-color-selected,var(--spectrum-alias-border-color-transparent))}.spectrum-Tags-item_8407eb.is-invalid_8407eb{color:var(--spectrum-tag-icon-color-error,var(--spectrum-global-color-red-500));border-color:var(--spectrum-tag-border-color-error,var(--spectrum-global-color-red-500))}.spectrum-Tags-item_8407eb.is-invalid_8407eb.is-hovered_8407eb{color:var(--spectrum-tag-icon-color-error-hover,var(--spectrum-global-color-red-600));border-color:var(--spectrum-tag-border-color-error-hover,var(--spectrum-global-color-red-600))}.spectrum-Tags-item_8407eb.is-invalid_8407eb.focus-ring_8407eb{color:var(--spectrum-tag-icon-color-error-hover,var(--spectrum-global-color-red-600));border-color:var(--spectrum-tag-border-color-key-focus,var(--spectrum-alias-border-color-focus))}.spectrum-Tags-item_8407eb.is-invalid_8407eb .spectrum-Tags-itemIcon_8407eb,.spectrum-Tags-item_8407eb.is-invalid_8407eb .spectrum-Tags-itemClearButton_8407eb{color:var(--spectrum-tag-border-color-error,var(--spectrum-global-color-red-500))}.spectrum-Tags-item_8407eb.is-disabled_8407eb{color:var(--spectrum-tag-text-color-disabled,var(--spectrum-global-color-gray-500));background-color:var(--spectrum-tag-background-color-disabled,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-tag-border-color-disabled,var(--spectrum-global-color-gray-200))}.spectrum-Tags-item_8407eb.is-disabled_8407eb .spectrum-Avatar_8407eb{opacity:var(--spectrum-avatar-small-opacity-disabled,.3)}.spectrum-Tags-item--removable_8407eb.is-hovered_8407eb{color:var(--spectrum-tag-removable-text-color-hover,var(--spectrum-global-color-gray-900))}.spectrum-Tags-item--removable_8407eb:active{color:var(--spectrum-tag-removable-text-color-down,var(--spectrum-global-color-gray-700))}.spectrum-Tags-item--removable_8407eb.is-invalid_8407eb.is-hovered_8407eb{border-color:var(--spectrum-tag-removable-border-color-error-hover,var(--spectrum-global-color-red-600))}.spectrum-Tags-item--removable_8407eb.is-invalid_8407eb.is-hovered_8407eb .spectrum-Tags-itemClearButton_8407eb{color:var(--spectrum-tag-removable-border-color-error-hover,var(--spectrum-global-color-red-600))}.spectrum-Tags-item--removable_8407eb.is-invalid_8407eb .spectrum-Tags-itemClearButton_8407eb.is-focused_8407eb{color:var(--spectrum-tag-icon-color-error-hover,var(--spectrum-global-color-red-600))}.spectrum-Tags-item--removable_8407eb.is-invalid_8407eb:active{border-color:var(--spectrum-tag-removable-border-color-error-down,var(--spectrum-global-color-red-700));color:var(--spectrum-tag-removable-text-color-error-down,var(--spectrum-global-color-gray-700))}.spectrum-Tags-item--removable_8407eb.is-focused_8407eb{color:var(--spectrum-tag-removable-text-color-key-focus,var(--spectrum-global-color-gray-700))}.spectrum-Tags-item--removable_8407eb.is-focused_8407eb.is-invalid_8407eb{color:var(--spectrum-tag-removable-text-color-error-key-focus,var(--spectrum-global-color-gray-700))}.spectrum-Tags-item--removable_8407eb.is-selected_8407eb{color:var(--spectrum-tag-removable-text-color-selected,var(--spectrum-global-color-gray-50))}.spectrum-Tags-item--removable_8407eb.is-selected_8407eb.is-focused_8407eb{color:var(--spectrum-tag-removable-text-color-selected-key-focus,var(--spectrum-global-color-gray-50))}.spectrum-Tags-item--removable_8407eb.is-selected_8407eb .spectrum-Tags-itemClearButton_8407eb{color:var(--spectrum-tag-removable-button-icon-color-selected,var(--spectrum-global-color-gray-50))}.spectrum-Tags-item--removable_8407eb.is-selected_8407eb .spectrum-Tags-itemClearButton_8407eb.is-hovered_8407eb{background-color:var(--spectrum-tag-removable-button-background-color-selected-hover,var(--spectrum-global-color-gray-600));color:var(--spectrum-tag-removable-button-icon-color-selected-hover,var(--spectrum-global-color-gray-50))}.spectrum-Tags-item--removable_8407eb .spectrum-Tags-itemClearButton_8407eb.is-focused_8407eb{border:2px solid var(--spectrum-tag-removable-border-color-key-focus,var(--spectrum-alias-border-color-focus));border-radius:var(--spectrum-alias-border-radius-regular,var(--spectrum-global-dimension-size-50));background-color:var(--spectrum-tag-removable-button-background-color-key-focus,var(--spectrum-global-color-gray-600));color:var(--spectrum-tag-removable-button-icon-color-key-focus,var(--spectrum-global-color-gray-900))}.spectrum-Tags-item--removable_8407eb .spectrum-Tags-itemClearButton_8407eb.is-hovered_8407eb{background-color:var(--spectrum-tag-removable-button-background-color-hover,var(--spectrum-global-color-gray-300));color:var(--spectrum-tag-removable-button-icon-color-hover,var(--spectrum-global-color-gray-900))}@media (forced-colors:active){.spectrum-Tags-item_8407eb{forced-color-adjust:none;--spectrum-tag-background-color:ButtonFace;--spectrum-tag-background-color-disabled:ButtonFace;--spectrum-tag-background-color-hover:ButtonFace;--spectrum-tag-background-color-key-focus:ButtonFace;--spectrum-tag-background-color-selected:Highlight;--spectrum-tag-background-color-selected-hover:Highlight;--spectrum-tag-border-color:ButtonText;--spectrum-tag-border-color-disabled:GrayText;--spectrum-tag-border-color-error:ButtonText;--spectrum-tag-border-color-error-hover:ButtonText;--spectrum-tag-border-color-error-selected:HighlightText;--spectrum-tag-border-color-hover:Highlight;--spectrum-tag-border-color-key-focus:Highlight;--spectrum-tag-border-color-selected:HighlightText;--spectrum-tag-border-color-selected-key-focus:ButtonText;--spectrum-tag-icon-color-error:ButtonText;--spectrum-tag-icon-color-error-hover:ButtonText;--spectrum-tag-removable-border-color-error-down:Highlight;--spectrum-tag-removable-border-color-error-hover:Highlight;--spectrum-tag-removable-border-color-key-focus:Highlight;--spectrum-tag-removable-button-background-color-hover:ButtonFace;--spectrum-tag-removable-button-background-color-key-focus:ButtonFace;--spectrum-tag-removable-button-background-color-selected-hover:Highlight;--spectrum-tag-removable-button-icon-color-hover:Highlight;--spectrum-tag-removable-button-icon-color-key-focus:Highlight;--spectrum-tag-removable-button-icon-color-selected:HighlightText;--spectrum-tag-removable-button-icon-color-selected-hover:HighlightText;--spectrum-tag-removable-text-color-down:ButtonText;--spectrum-tag-removable-text-color-error-down:Highlight;--spectrum-tag-removable-text-color-error-key-focus:Highlight;--spectrum-tag-removable-text-color-hover:ButtonText;--spectrum-tag-removable-text-color-key-focus:ButtonText;--spectrum-tag-removable-text-color-selected:HighlightText;--spectrum-tag-removable-text-color-selected-key-focus:HighlightText;--spectrum-tag-text-color:ButtonText;--spectrum-tag-text-color-disabled:GrayText;--spectrum-tag-text-color-error-selected:HighlightText;--spectrum-tag-text-color-hover:ButtonText;--spectrum-tag-text-color-key-focus:ButtonText;--spectrum-tag-text-color-selected:HighlightText;--spectrum-tag-text-color-selected-key-focus:HighlightText}}
package/dist/main.js CHANGED
@@ -1,14 +1,11 @@
1
1
  require("./main.css");
2
2
  var $dTV3V$reactstatelycollections = require("@react-stately/collections");
3
3
  var $dTV3V$reactspectrumutils = require("@react-spectrum/utils");
4
- var $dTV3V$reactstatelygrid = require("@react-stately/grid");
5
4
  var $dTV3V$reactariautils = require("@react-aria/utils");
6
5
  var $dTV3V$react = require("react");
7
- var $dTV3V$reactariatag = require("@react-aria/tag");
8
- var $dTV3V$reactariagrid = require("@react-aria/grid");
9
- var $dTV3V$reactstatelylist = require("@react-stately/list");
10
- var $dTV3V$reactariai18n = require("@react-aria/i18n");
11
6
  var $dTV3V$reactspectrumprovider = require("@react-spectrum/provider");
7
+ var $dTV3V$reactariatag = require("@react-aria/tag");
8
+ var $dTV3V$reactstatelytag = require("@react-stately/tag");
12
9
  var $dTV3V$reactspectrumbutton = require("@react-spectrum/button");
13
10
  var $dTV3V$reactspectrumtext = require("@react-spectrum/text");
14
11
  var $dTV3V$reactariafocus = require("@react-aria/focus");
@@ -46,7 +43,6 @@ $parcel$export(module.exports, "Item", () => $dTV3V$reactstatelycollections.Item
46
43
  */
47
44
 
48
45
 
49
-
50
46
  var $ed889f8f1f091fc8$exports = {};
51
47
 
52
48
  $parcel$export($ed889f8f1f091fc8$exports, "spectrum-Tags-item", () => $ed889f8f1f091fc8$export$950d8dc0a3751654, (v) => $ed889f8f1f091fc8$export$950d8dc0a3751654 = v);
@@ -54,9 +50,10 @@ $parcel$export($ed889f8f1f091fc8$exports, "focus-ring", () => $ed889f8f1f091fc8$
54
50
  $parcel$export($ed889f8f1f091fc8$exports, "spectrum-Tags", () => $ed889f8f1f091fc8$export$eb7e80013a1212da, (v) => $ed889f8f1f091fc8$export$eb7e80013a1212da = v);
55
51
  $parcel$export($ed889f8f1f091fc8$exports, "is-disabled", () => $ed889f8f1f091fc8$export$d35bc1e505d1ebbf, (v) => $ed889f8f1f091fc8$export$d35bc1e505d1ebbf = v);
56
52
  $parcel$export($ed889f8f1f091fc8$exports, "spectrum-Tag-action", () => $ed889f8f1f091fc8$export$c5a1243e33faa2d4, (v) => $ed889f8f1f091fc8$export$c5a1243e33faa2d4 = v);
53
+ $parcel$export($ed889f8f1f091fc8$exports, "spectrum-Tag-cell", () => $ed889f8f1f091fc8$export$9c4fd4d7faada408, (v) => $ed889f8f1f091fc8$export$9c4fd4d7faada408 = v);
57
54
  $parcel$export($ed889f8f1f091fc8$exports, "spectrum-Tag-icon", () => $ed889f8f1f091fc8$export$21f5254139e14871, (v) => $ed889f8f1f091fc8$export$21f5254139e14871 = v);
58
55
  $parcel$export($ed889f8f1f091fc8$exports, "spectrum-Tag-content", () => $ed889f8f1f091fc8$export$d281c967f4ee071e, (v) => $ed889f8f1f091fc8$export$d281c967f4ee071e = v);
59
- $parcel$export($ed889f8f1f091fc8$exports, "tags-removable", () => $ed889f8f1f091fc8$export$7427262f66a3b803, (v) => $ed889f8f1f091fc8$export$7427262f66a3b803 = v);
56
+ $parcel$export($ed889f8f1f091fc8$exports, "is-removable", () => $ed889f8f1f091fc8$export$52d72cb84c5fde5e, (v) => $ed889f8f1f091fc8$export$52d72cb84c5fde5e = v);
60
57
  $parcel$export($ed889f8f1f091fc8$exports, "is-hovered", () => $ed889f8f1f091fc8$export$b8813cd5d7824ce7, (v) => $ed889f8f1f091fc8$export$b8813cd5d7824ce7 = v);
61
58
  $parcel$export($ed889f8f1f091fc8$exports, "is-selected", () => $ed889f8f1f091fc8$export$1e0fb04f31d3c22a, (v) => $ed889f8f1f091fc8$export$1e0fb04f31d3c22a = v);
62
59
  $parcel$export($ed889f8f1f091fc8$exports, "is-invalid", () => $ed889f8f1f091fc8$export$14a30de2866685fa, (v) => $ed889f8f1f091fc8$export$14a30de2866685fa = v);
@@ -71,9 +68,10 @@ var $ed889f8f1f091fc8$export$f39a09f249340e2a;
71
68
  var $ed889f8f1f091fc8$export$eb7e80013a1212da;
72
69
  var $ed889f8f1f091fc8$export$d35bc1e505d1ebbf;
73
70
  var $ed889f8f1f091fc8$export$c5a1243e33faa2d4;
71
+ var $ed889f8f1f091fc8$export$9c4fd4d7faada408;
74
72
  var $ed889f8f1f091fc8$export$21f5254139e14871;
75
73
  var $ed889f8f1f091fc8$export$d281c967f4ee071e;
76
- var $ed889f8f1f091fc8$export$7427262f66a3b803;
74
+ var $ed889f8f1f091fc8$export$52d72cb84c5fde5e;
77
75
  var $ed889f8f1f091fc8$export$b8813cd5d7824ce7;
78
76
  var $ed889f8f1f091fc8$export$1e0fb04f31d3c22a;
79
77
  var $ed889f8f1f091fc8$export$14a30de2866685fa;
@@ -88,9 +86,10 @@ $ed889f8f1f091fc8$export$f39a09f249340e2a = "focus-ring_8407eb";
88
86
  $ed889f8f1f091fc8$export$eb7e80013a1212da = "spectrum-Tags_8407eb";
89
87
  $ed889f8f1f091fc8$export$d35bc1e505d1ebbf = "is-disabled_8407eb";
90
88
  $ed889f8f1f091fc8$export$c5a1243e33faa2d4 = "spectrum-Tag-action_8407eb";
89
+ $ed889f8f1f091fc8$export$9c4fd4d7faada408 = "spectrum-Tag-cell_8407eb";
91
90
  $ed889f8f1f091fc8$export$21f5254139e14871 = "spectrum-Tag-icon_8407eb";
92
91
  $ed889f8f1f091fc8$export$d281c967f4ee071e = "spectrum-Tag-content_8407eb";
93
- $ed889f8f1f091fc8$export$7427262f66a3b803 = "tags-removable_8407eb";
92
+ $ed889f8f1f091fc8$export$52d72cb84c5fde5e = "is-removable_8407eb";
94
93
  $ed889f8f1f091fc8$export$b8813cd5d7824ce7 = "is-hovered_8407eb";
95
94
  $ed889f8f1f091fc8$export$1e0fb04f31d3c22a = "is-selected_8407eb";
96
95
  $ed889f8f1f091fc8$export$14a30de2866685fa = "is-invalid_8407eb";
@@ -129,7 +128,6 @@ function $dd2c5d00108c1840$export$3288d34c523a1192(props) {
129
128
  let { isFocused: isFocused , isFocusVisible: isFocusVisible , focusProps: focusProps } = (0, $dTV3V$reactariafocus.useFocusRing)({
130
129
  within: true
131
130
  });
132
- let tagRef = (0, $dTV3V$react.useRef)();
133
131
  let tagRowRef = (0, $dTV3V$react.useRef)();
134
132
  let { clearButtonProps: clearButtonProps , labelProps: labelProps , tagProps: tagProps , tagRowProps: tagRowProps } = (0, $dTV3V$reactariatag.useTag)({
135
133
  ...props,
@@ -137,20 +135,20 @@ function $dd2c5d00108c1840$export$3288d34c523a1192(props) {
137
135
  allowsRemoving: allowsRemoving,
138
136
  item: item,
139
137
  onRemove: onRemove,
140
- tagRef: tagRef,
141
138
  tagRowRef: tagRowRef
142
139
  }, state);
143
140
  return /*#__PURE__*/ (0, ($parcel$interopDefault($dTV3V$react))).createElement("div", {
144
- ...tagRowProps,
145
- ref: tagRowRef
146
- }, /*#__PURE__*/ (0, ($parcel$interopDefault($dTV3V$react))).createElement("div", {
147
- ...(0, $dTV3V$reactariautils.mergeProps)(tagProps, hoverProps, focusProps),
141
+ ...(0, $dTV3V$reactariautils.mergeProps)(tagRowProps, hoverProps, focusProps),
148
142
  className: (0, $dTV3V$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($ed889f8f1f091fc8$exports))), "spectrum-Tags-item", {
149
143
  "focus-ring": isFocusVisible,
150
144
  "is-focused": isFocused,
151
- "is-hovered": isHovered
145
+ "is-hovered": isHovered,
146
+ "is-removable": allowsRemoving
152
147
  }, styleProps.className),
153
- ref: tagRef
148
+ ref: tagRowRef
149
+ }, /*#__PURE__*/ (0, ($parcel$interopDefault($dTV3V$react))).createElement("div", {
150
+ className: (0, $dTV3V$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($ed889f8f1f091fc8$exports))), "spectrum-Tag-cell"),
151
+ ...tagProps
154
152
  }, /*#__PURE__*/ (0, ($parcel$interopDefault($dTV3V$react))).createElement((0, $dTV3V$reactspectrumutils.SlotProvider), {
155
153
  slots: {
156
154
  icon: {
@@ -158,26 +156,19 @@ function $dd2c5d00108c1840$export$3288d34c523a1192(props) {
158
156
  size: "XS"
159
157
  },
160
158
  text: {
161
- UNSAFE_className: (0, $dTV3V$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($ed889f8f1f091fc8$exports))), "spectrum-Tag-content", {
162
- "tags-removable": allowsRemoving
163
- }),
159
+ UNSAFE_className: (0, $dTV3V$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($ed889f8f1f091fc8$exports))), "spectrum-Tag-content"),
164
160
  ...labelProps
165
161
  }
166
162
  }
167
- }, typeof children === "string" ? /*#__PURE__*/ (0, ($parcel$interopDefault($dTV3V$react))).createElement((0, $dTV3V$reactspectrumtext.Text), null, children) : children, allowsRemoving && /*#__PURE__*/ (0, ($parcel$interopDefault($dTV3V$react))).createElement($dd2c5d00108c1840$var$TagRemoveButton, {
163
+ }, typeof children === "string" ? /*#__PURE__*/ (0, ($parcel$interopDefault($dTV3V$react))).createElement((0, $dTV3V$reactspectrumtext.Text), null, children) : children, /*#__PURE__*/ (0, ($parcel$interopDefault($dTV3V$react))).createElement((0, $dTV3V$reactspectrumutils.ClearSlots), null, allowsRemoving && /*#__PURE__*/ (0, ($parcel$interopDefault($dTV3V$react))).createElement($dd2c5d00108c1840$var$TagRemoveButton, {
168
164
  item: item,
169
165
  ...clearButtonProps,
170
166
  UNSAFE_className: (0, $dTV3V$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($ed889f8f1f091fc8$exports))), "spectrum-Tag-action")
171
- }))));
167
+ })))));
172
168
  }
173
169
  function $dd2c5d00108c1840$var$TagRemoveButton(props) {
174
- props = (0, $dTV3V$reactspectrumutils.useSlotProps)(props, "tagRemoveButton");
175
170
  let { styleProps: styleProps } = (0, $dTV3V$reactspectrumutils.useStyleProps)(props);
176
- let clearBtnRef = (0, $dTV3V$react.useRef)();
177
- return /*#__PURE__*/ (0, ($parcel$interopDefault($dTV3V$react))).createElement("span", {
178
- ...styleProps,
179
- ref: clearBtnRef
180
- }, /*#__PURE__*/ (0, ($parcel$interopDefault($dTV3V$react))).createElement((0, $dTV3V$reactspectrumbutton.ClearButton), {
171
+ return /*#__PURE__*/ (0, ($parcel$interopDefault($dTV3V$react))).createElement("span", styleProps, /*#__PURE__*/ (0, ($parcel$interopDefault($dTV3V$react))).createElement((0, $dTV3V$reactspectrumbutton.ClearButton), {
181
172
  preventFocus: true,
182
173
  ...props
183
174
  }));
@@ -187,71 +178,28 @@ function $dd2c5d00108c1840$var$TagRemoveButton(props) {
187
178
 
188
179
 
189
180
 
190
-
191
-
192
181
  function $e7b72d8874e98cd4$var$TagGroup(props, ref) {
193
182
  props = (0, $dTV3V$reactspectrumprovider.useProviderProps)(props);
194
183
  let { allowsRemoving: allowsRemoving , onRemove: onRemove , ...otherProps } = props;
195
184
  let domRef = (0, $dTV3V$reactspectrumutils.useDOMRef)(ref);
196
185
  let { styleProps: styleProps } = (0, $dTV3V$reactspectrumutils.useStyleProps)(otherProps);
197
- let { direction: direction } = (0, $dTV3V$reactariai18n.useLocale)();
198
- let listState = (0, $dTV3V$reactstatelylist.useListState)(props);
199
- let gridCollection = (0, $dTV3V$react.useMemo)(()=>new (0, $dTV3V$reactstatelygrid.GridCollection)({
200
- columnCount: 1,
201
- items: [
202
- ...listState.collection
203
- ].map((item)=>{
204
- let childNodes = [
205
- {
206
- ...item,
207
- index: 0,
208
- type: "cell"
209
- }
210
- ];
211
- return {
212
- type: "item",
213
- childNodes: childNodes
214
- };
215
- })
216
- }), [
217
- listState.collection,
218
- allowsRemoving
219
- ]);
220
- let state = (0, $dTV3V$reactstatelygrid.useGridState)({
221
- ...props,
222
- collection: gridCollection,
223
- focusMode: "cell"
224
- });
225
- let keyboardDelegate = new (0, $dTV3V$reactariatag.TagKeyboardDelegate)({
226
- collection: state.collection,
227
- disabledKeys: new Set(),
228
- ref: domRef,
229
- direction: direction,
230
- focusMode: "cell"
231
- });
232
- let { gridProps: gridProps } = (0, $dTV3V$reactariagrid.useGrid)({
233
- ...props,
234
- keyboardDelegate: keyboardDelegate
235
- }, state, domRef);
236
- const { tagGroupProps: tagGroupProps } = (0, $dTV3V$reactariatag.useTagGroup)(props);
237
- // Don't want the grid to be focusable or accessible via keyboard
238
- // eslint-disable-next-line @typescript-eslint/no-unused-vars
239
- let { tabIndex: tabIndex , role: role , ...otherGridProps } = gridProps;
186
+ let state = (0, $dTV3V$reactstatelytag.useTagGroupState)(props);
187
+ let { tagGroupProps: tagGroupProps } = (0, $dTV3V$reactariatag.useTagGroup)(props, state, domRef);
240
188
  return /*#__PURE__*/ (0, ($parcel$interopDefault($dTV3V$react))).createElement("div", {
241
- ...(0, $dTV3V$reactariautils.mergeProps)(styleProps, tagGroupProps, otherGridProps),
189
+ ...(0, $dTV3V$reactariautils.mergeProps)(styleProps, tagGroupProps),
242
190
  className: (0, $dTV3V$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($ed889f8f1f091fc8$exports))), "spectrum-Tags", styleProps.className),
243
191
  role: state.collection.size ? "grid" : null,
244
192
  ref: domRef
245
193
  }, [
246
- ...gridCollection
194
+ ...state.collection
247
195
  ].map((item)=>/*#__PURE__*/ (0, ($parcel$interopDefault($dTV3V$react))).createElement((0, $dd2c5d00108c1840$export$3288d34c523a1192), {
248
- ...item.childNodes[0].props,
196
+ ...item.props,
249
197
  key: item.key,
250
198
  item: item,
251
199
  state: state,
252
200
  allowsRemoving: allowsRemoving,
253
201
  onRemove: onRemove
254
- }, item.childNodes[0].rendered)));
202
+ }, item.rendered)));
255
203
  }
256
204
  /** Tags allow users to categorize content. They can represent keywords or people, and are grouped to describe an item or a search request. */ const $e7b72d8874e98cd4$export$67ea30858aaf75e3 = /*#__PURE__*/ (0, ($parcel$interopDefault($dTV3V$react))).forwardRef($e7b72d8874e98cd4$var$TagGroup);
257
205
 
package/dist/main.js.map CHANGED
@@ -1 +1 @@
1
- {"mappings":"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","sources":["packages/@react-spectrum/tag/src/index.ts","packages/@react-spectrum/tag/src/TagGroup.tsx","packages/@adobe/spectrum-css-temp/components/tags/vars.css","packages/@react-spectrum/tag/src/Tag.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\nexport {TagGroup} from './TagGroup';\nexport {Item} from '@react-stately/collections';\nexport type {SpectrumTagGroupProps} from '@react-types/tag';\n","/*\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 {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils';\nimport {DOMRef} from '@react-types/shared';\nimport {GridCollection, useGridState} from '@react-stately/grid';\nimport {mergeProps} from '@react-aria/utils';\nimport React, {ReactElement, useMemo} from 'react';\nimport {SpectrumTagGroupProps} from '@react-types/tag';\nimport styles from '@adobe/spectrum-css-temp/components/tags/vars.css';\nimport {Tag} from './Tag';\nimport {TagKeyboardDelegate, useTagGroup} from '@react-aria/tag';\nimport {useGrid} from '@react-aria/grid';\nimport {useListState} from '@react-stately/list';\nimport {useLocale} from '@react-aria/i18n';\nimport {useProviderProps} from '@react-spectrum/provider';\n\n\nfunction TagGroup<T extends object>(props: SpectrumTagGroupProps<T>, ref: DOMRef<HTMLDivElement>) {\n props = useProviderProps(props);\n let {\n allowsRemoving,\n onRemove,\n ...otherProps\n } = props;\n let domRef = useDOMRef(ref);\n let {styleProps} = useStyleProps(otherProps);\n let {direction} = useLocale();\n let listState = useListState(props);\n let gridCollection = useMemo(() => new GridCollection({\n columnCount: 1, // unused, but required for grid collections\n items: [...listState.collection].map(item => {\n let childNodes = [{\n ...item,\n index: 0,\n type: 'cell'\n }];\n\n return {\n type: 'item',\n childNodes\n };\n })\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }), [listState.collection, allowsRemoving]);\n let state = useGridState({\n ...props,\n collection: gridCollection,\n focusMode: 'cell'\n });\n let keyboardDelegate = new TagKeyboardDelegate({\n collection: state.collection,\n disabledKeys: new Set(),\n ref: domRef,\n direction,\n focusMode: 'cell'\n });\n let {gridProps} = useGrid({\n ...props,\n keyboardDelegate\n }, state, domRef);\n const {tagGroupProps} = useTagGroup(props);\n\n // Don't want the grid to be focusable or accessible via keyboard\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n let {tabIndex, role, ...otherGridProps} = gridProps;\n return (\n <div\n {...mergeProps(styleProps, tagGroupProps, otherGridProps)}\n className={\n classNames(\n styles,\n 'spectrum-Tags',\n styleProps.className\n )\n }\n role={state.collection.size ? 'grid' : null}\n ref={domRef}>\n {[...gridCollection].map(item => (\n <Tag\n {...item.childNodes[0].props}\n key={item.key}\n item={item}\n state={state}\n allowsRemoving={allowsRemoving}\n onRemove={onRemove}>\n {item.childNodes[0].rendered}\n </Tag>\n ))}\n </div>\n );\n}\n\n/** Tags allow users to categorize content. They can represent keywords or people, and are grouped to describe an item or a search request. */\nconst _TagGroup = React.forwardRef(TagGroup) as <T>(props: SpectrumTagGroupProps<T> & {ref?: DOMRef<HTMLDivElement>}) => ReactElement;\nexport {_TagGroup as TagGroup};\n","/*\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\n@import './index.css';\n@import './skin.css';\n","/*\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 {classNames, SlotProvider, useSlotProps, useStyleProps} from '@react-spectrum/utils';\nimport {ClearButton} from '@react-spectrum/button';\nimport {mergeProps} from '@react-aria/utils';\nimport React, {useRef} from 'react';\nimport {SpectrumTagProps} from '@react-types/tag';\nimport styles from '@adobe/spectrum-css-temp/components/tags/vars.css';\nimport {Text} from '@react-spectrum/text';\nimport {useFocusRing} from '@react-aria/focus';\nimport {useHover} from '@react-aria/interactions';\nimport {useTag} from '@react-aria/tag';\n\nexport function Tag<T>(props: SpectrumTagProps<T>) {\n const {\n children,\n allowsRemoving,\n item,\n state,\n onRemove,\n ...otherProps\n } = props;\n\n // @ts-ignore\n let {styleProps} = useStyleProps(otherProps);\n let {hoverProps, isHovered} = useHover({});\n let {isFocused, isFocusVisible, focusProps} = useFocusRing({within: true});\n let tagRef = useRef();\n let tagRowRef = useRef();\n let {clearButtonProps, labelProps, tagProps, tagRowProps} = useTag({\n ...props,\n isFocused,\n allowsRemoving,\n item,\n onRemove,\n tagRef,\n tagRowRef\n }, state);\n\n return (\n <div\n {...tagRowProps}\n ref={tagRowRef}>\n <div\n {...mergeProps(tagProps, hoverProps, focusProps)}\n className={classNames(\n styles,\n 'spectrum-Tags-item',\n {\n 'focus-ring': isFocusVisible,\n 'is-focused': isFocused,\n 'is-hovered': isHovered\n },\n styleProps.className\n )}\n ref={tagRef}>\n <SlotProvider\n slots={{\n icon: {UNSAFE_className: classNames(styles, 'spectrum-Tag-icon'), size: 'XS'},\n text: {UNSAFE_className: classNames(styles, 'spectrum-Tag-content', {'tags-removable': allowsRemoving}), ...labelProps}\n }}>\n\n {typeof children === 'string' ? <Text>{children}</Text> : children}\n {allowsRemoving && <TagRemoveButton item={item} {...clearButtonProps} UNSAFE_className={classNames(styles, 'spectrum-Tag-action')} />}\n </SlotProvider>\n </div>\n </div>\n );\n}\n\nfunction TagRemoveButton(props) {\n props = useSlotProps(props, 'tagRemoveButton');\n let {styleProps} = useStyleProps(props);\n let clearBtnRef = useRef();\n\n return (\n <span\n {...styleProps}\n ref={clearBtnRef}>\n <ClearButton\n preventFocus\n {...props} />\n </span>\n );\n}\n"],"names":[],"version":3,"file":"main.js.map"}
1
+ {"mappings":"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","sources":["packages/@react-spectrum/tag/src/index.ts","packages/@react-spectrum/tag/src/TagGroup.tsx","packages/@adobe/spectrum-css-temp/components/tags/vars.css","packages/@react-spectrum/tag/src/Tag.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\nexport {TagGroup} from './TagGroup';\nexport {Item} from '@react-stately/collections';\nexport type {SpectrumTagGroupProps} from '@react-types/tag';\n","/*\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 {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils';\nimport {DOMRef} from '@react-types/shared';\nimport {mergeProps} from '@react-aria/utils';\nimport React, {ReactElement} from 'react';\nimport {SpectrumTagGroupProps} from '@react-types/tag';\nimport styles from '@adobe/spectrum-css-temp/components/tags/vars.css';\nimport {Tag} from './Tag';\nimport {useProviderProps} from '@react-spectrum/provider';\nimport {useTagGroup} from '@react-aria/tag';\nimport {useTagGroupState} from '@react-stately/tag';\n\nfunction TagGroup<T extends object>(props: SpectrumTagGroupProps<T>, ref: DOMRef<HTMLDivElement>) {\n props = useProviderProps(props);\n let {\n allowsRemoving,\n onRemove,\n ...otherProps\n } = props;\n let domRef = useDOMRef(ref);\n let {styleProps} = useStyleProps(otherProps);\n let state = useTagGroupState(props);\n let {tagGroupProps} = useTagGroup(props, state, domRef);\n return (\n <div\n {...mergeProps(styleProps, tagGroupProps)}\n className={\n classNames(\n styles,\n 'spectrum-Tags',\n styleProps.className\n )\n }\n role={state.collection.size ? 'grid' : null}\n ref={domRef}>\n {[...state.collection].map(item => (\n <Tag\n {...item.props}\n key={item.key}\n item={item}\n state={state}\n allowsRemoving={allowsRemoving}\n onRemove={onRemove}>\n {item.rendered}\n </Tag>\n ))}\n </div>\n );\n}\n\n/** Tags allow users to categorize content. They can represent keywords or people, and are grouped to describe an item or a search request. */\nconst _TagGroup = React.forwardRef(TagGroup) as <T>(props: SpectrumTagGroupProps<T> & {ref?: DOMRef<HTMLDivElement>}) => ReactElement;\nexport {_TagGroup as TagGroup};\n","/*\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\n@import './index.css';\n@import './skin.css';\n","/*\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 {classNames, ClearSlots, SlotProvider, useStyleProps} from '@react-spectrum/utils';\nimport {ClearButton} from '@react-spectrum/button';\nimport {mergeProps} from '@react-aria/utils';\nimport React, {useRef} from 'react';\nimport styles from '@adobe/spectrum-css-temp/components/tags/vars.css';\nimport type {TagGroupState} from '@react-stately/tag';\nimport {TagProps} from '@react-types/tag';\nimport {Text} from '@react-spectrum/text';\nimport {useFocusRing} from '@react-aria/focus';\nimport {useHover} from '@react-aria/interactions';\nimport {useTag} from '@react-aria/tag';\n\nexport interface SpectrumTagProps<T> extends TagProps<T> {\n state: TagGroupState<T>\n}\n\nexport function Tag<T>(props: SpectrumTagProps<T>) {\n const {\n children,\n allowsRemoving,\n item,\n state,\n onRemove,\n ...otherProps\n } = props;\n\n // @ts-ignore\n let {styleProps} = useStyleProps(otherProps);\n let {hoverProps, isHovered} = useHover({});\n let {isFocused, isFocusVisible, focusProps} = useFocusRing({within: true});\n let tagRowRef = useRef();\n let {clearButtonProps, labelProps, tagProps, tagRowProps} = useTag({\n ...props,\n isFocused,\n allowsRemoving,\n item,\n onRemove,\n tagRowRef\n }, state);\n\n return (\n <div\n {...mergeProps(tagRowProps, hoverProps, focusProps)}\n className={classNames(\n styles,\n 'spectrum-Tags-item',\n {\n 'focus-ring': isFocusVisible,\n 'is-focused': isFocused,\n 'is-hovered': isHovered,\n 'is-removable': allowsRemoving\n },\n styleProps.className\n )}\n ref={tagRowRef}>\n <div\n className={classNames(styles, 'spectrum-Tag-cell')}\n {...tagProps}>\n <SlotProvider\n slots={{\n icon: {UNSAFE_className: classNames(styles, 'spectrum-Tag-icon'), size: 'XS'},\n text: {UNSAFE_className: classNames(styles, 'spectrum-Tag-content'), ...labelProps}\n }}>\n {typeof children === 'string' ? <Text>{children}</Text> : children}\n <ClearSlots>\n {allowsRemoving && <TagRemoveButton item={item} {...clearButtonProps} UNSAFE_className={classNames(styles, 'spectrum-Tag-action')} />}\n </ClearSlots>\n </SlotProvider>\n </div>\n </div>\n );\n}\n\nfunction TagRemoveButton(props) {\n let {styleProps} = useStyleProps(props);\n\n return (\n <span\n {...styleProps}>\n <ClearButton\n preventFocus\n {...props} />\n </span>\n );\n}\n"],"names":[],"version":3,"file":"main.js.map"}
package/dist/module.js CHANGED
@@ -1,14 +1,11 @@
1
1
  import "./main.css";
2
2
  import {Item as $c14698d57a91452e$re_export$Item} from "@react-stately/collections";
3
- import {useDOMRef as $fUaQ2$useDOMRef, useStyleProps as $fUaQ2$useStyleProps, classNames as $fUaQ2$classNames, SlotProvider as $fUaQ2$SlotProvider, useSlotProps as $fUaQ2$useSlotProps} from "@react-spectrum/utils";
4
- import {GridCollection as $fUaQ2$GridCollection, useGridState as $fUaQ2$useGridState} from "@react-stately/grid";
3
+ import {useDOMRef as $fUaQ2$useDOMRef, useStyleProps as $fUaQ2$useStyleProps, classNames as $fUaQ2$classNames, SlotProvider as $fUaQ2$SlotProvider, ClearSlots as $fUaQ2$ClearSlots} from "@react-spectrum/utils";
5
4
  import {mergeProps as $fUaQ2$mergeProps} from "@react-aria/utils";
6
- import $fUaQ2$react, {useMemo as $fUaQ2$useMemo, useRef as $fUaQ2$useRef} from "react";
7
- import {TagKeyboardDelegate as $fUaQ2$TagKeyboardDelegate, useTagGroup as $fUaQ2$useTagGroup, useTag as $fUaQ2$useTag} from "@react-aria/tag";
8
- import {useGrid as $fUaQ2$useGrid} from "@react-aria/grid";
9
- import {useListState as $fUaQ2$useListState} from "@react-stately/list";
10
- import {useLocale as $fUaQ2$useLocale} from "@react-aria/i18n";
5
+ import $fUaQ2$react, {useRef as $fUaQ2$useRef} from "react";
11
6
  import {useProviderProps as $fUaQ2$useProviderProps} from "@react-spectrum/provider";
7
+ import {useTagGroup as $fUaQ2$useTagGroup, useTag as $fUaQ2$useTag} from "@react-aria/tag";
8
+ import {useTagGroupState as $fUaQ2$useTagGroupState} from "@react-stately/tag";
12
9
  import {ClearButton as $fUaQ2$ClearButton} from "@react-spectrum/button";
13
10
  import {Text as $fUaQ2$Text} from "@react-spectrum/text";
14
11
  import {useFocusRing as $fUaQ2$useFocusRing} from "@react-aria/focus";
@@ -43,7 +40,6 @@ function $parcel$export(e, n, v, s) {
43
40
  */
44
41
 
45
42
 
46
-
47
43
  var $c033a7c057e84ef1$exports = {};
48
44
 
49
45
  $parcel$export($c033a7c057e84ef1$exports, "spectrum-Tags-item", () => $c033a7c057e84ef1$export$950d8dc0a3751654, (v) => $c033a7c057e84ef1$export$950d8dc0a3751654 = v);
@@ -51,9 +47,10 @@ $parcel$export($c033a7c057e84ef1$exports, "focus-ring", () => $c033a7c057e84ef1$
51
47
  $parcel$export($c033a7c057e84ef1$exports, "spectrum-Tags", () => $c033a7c057e84ef1$export$eb7e80013a1212da, (v) => $c033a7c057e84ef1$export$eb7e80013a1212da = v);
52
48
  $parcel$export($c033a7c057e84ef1$exports, "is-disabled", () => $c033a7c057e84ef1$export$d35bc1e505d1ebbf, (v) => $c033a7c057e84ef1$export$d35bc1e505d1ebbf = v);
53
49
  $parcel$export($c033a7c057e84ef1$exports, "spectrum-Tag-action", () => $c033a7c057e84ef1$export$c5a1243e33faa2d4, (v) => $c033a7c057e84ef1$export$c5a1243e33faa2d4 = v);
50
+ $parcel$export($c033a7c057e84ef1$exports, "spectrum-Tag-cell", () => $c033a7c057e84ef1$export$9c4fd4d7faada408, (v) => $c033a7c057e84ef1$export$9c4fd4d7faada408 = v);
54
51
  $parcel$export($c033a7c057e84ef1$exports, "spectrum-Tag-icon", () => $c033a7c057e84ef1$export$21f5254139e14871, (v) => $c033a7c057e84ef1$export$21f5254139e14871 = v);
55
52
  $parcel$export($c033a7c057e84ef1$exports, "spectrum-Tag-content", () => $c033a7c057e84ef1$export$d281c967f4ee071e, (v) => $c033a7c057e84ef1$export$d281c967f4ee071e = v);
56
- $parcel$export($c033a7c057e84ef1$exports, "tags-removable", () => $c033a7c057e84ef1$export$7427262f66a3b803, (v) => $c033a7c057e84ef1$export$7427262f66a3b803 = v);
53
+ $parcel$export($c033a7c057e84ef1$exports, "is-removable", () => $c033a7c057e84ef1$export$52d72cb84c5fde5e, (v) => $c033a7c057e84ef1$export$52d72cb84c5fde5e = v);
57
54
  $parcel$export($c033a7c057e84ef1$exports, "is-hovered", () => $c033a7c057e84ef1$export$b8813cd5d7824ce7, (v) => $c033a7c057e84ef1$export$b8813cd5d7824ce7 = v);
58
55
  $parcel$export($c033a7c057e84ef1$exports, "is-selected", () => $c033a7c057e84ef1$export$1e0fb04f31d3c22a, (v) => $c033a7c057e84ef1$export$1e0fb04f31d3c22a = v);
59
56
  $parcel$export($c033a7c057e84ef1$exports, "is-invalid", () => $c033a7c057e84ef1$export$14a30de2866685fa, (v) => $c033a7c057e84ef1$export$14a30de2866685fa = v);
@@ -68,9 +65,10 @@ var $c033a7c057e84ef1$export$f39a09f249340e2a;
68
65
  var $c033a7c057e84ef1$export$eb7e80013a1212da;
69
66
  var $c033a7c057e84ef1$export$d35bc1e505d1ebbf;
70
67
  var $c033a7c057e84ef1$export$c5a1243e33faa2d4;
68
+ var $c033a7c057e84ef1$export$9c4fd4d7faada408;
71
69
  var $c033a7c057e84ef1$export$21f5254139e14871;
72
70
  var $c033a7c057e84ef1$export$d281c967f4ee071e;
73
- var $c033a7c057e84ef1$export$7427262f66a3b803;
71
+ var $c033a7c057e84ef1$export$52d72cb84c5fde5e;
74
72
  var $c033a7c057e84ef1$export$b8813cd5d7824ce7;
75
73
  var $c033a7c057e84ef1$export$1e0fb04f31d3c22a;
76
74
  var $c033a7c057e84ef1$export$14a30de2866685fa;
@@ -85,9 +83,10 @@ $c033a7c057e84ef1$export$f39a09f249340e2a = "focus-ring_8407eb";
85
83
  $c033a7c057e84ef1$export$eb7e80013a1212da = "spectrum-Tags_8407eb";
86
84
  $c033a7c057e84ef1$export$d35bc1e505d1ebbf = "is-disabled_8407eb";
87
85
  $c033a7c057e84ef1$export$c5a1243e33faa2d4 = "spectrum-Tag-action_8407eb";
86
+ $c033a7c057e84ef1$export$9c4fd4d7faada408 = "spectrum-Tag-cell_8407eb";
88
87
  $c033a7c057e84ef1$export$21f5254139e14871 = "spectrum-Tag-icon_8407eb";
89
88
  $c033a7c057e84ef1$export$d281c967f4ee071e = "spectrum-Tag-content_8407eb";
90
- $c033a7c057e84ef1$export$7427262f66a3b803 = "tags-removable_8407eb";
89
+ $c033a7c057e84ef1$export$52d72cb84c5fde5e = "is-removable_8407eb";
91
90
  $c033a7c057e84ef1$export$b8813cd5d7824ce7 = "is-hovered_8407eb";
92
91
  $c033a7c057e84ef1$export$1e0fb04f31d3c22a = "is-selected_8407eb";
93
92
  $c033a7c057e84ef1$export$14a30de2866685fa = "is-invalid_8407eb";
@@ -126,7 +125,6 @@ function $b5f5ee35d3b6b95c$export$3288d34c523a1192(props) {
126
125
  let { isFocused: isFocused , isFocusVisible: isFocusVisible , focusProps: focusProps } = (0, $fUaQ2$useFocusRing)({
127
126
  within: true
128
127
  });
129
- let tagRef = (0, $fUaQ2$useRef)();
130
128
  let tagRowRef = (0, $fUaQ2$useRef)();
131
129
  let { clearButtonProps: clearButtonProps , labelProps: labelProps , tagProps: tagProps , tagRowProps: tagRowProps } = (0, $fUaQ2$useTag)({
132
130
  ...props,
@@ -134,20 +132,20 @@ function $b5f5ee35d3b6b95c$export$3288d34c523a1192(props) {
134
132
  allowsRemoving: allowsRemoving,
135
133
  item: item,
136
134
  onRemove: onRemove,
137
- tagRef: tagRef,
138
135
  tagRowRef: tagRowRef
139
136
  }, state);
140
137
  return /*#__PURE__*/ (0, $fUaQ2$react).createElement("div", {
141
- ...tagRowProps,
142
- ref: tagRowRef
143
- }, /*#__PURE__*/ (0, $fUaQ2$react).createElement("div", {
144
- ...(0, $fUaQ2$mergeProps)(tagProps, hoverProps, focusProps),
138
+ ...(0, $fUaQ2$mergeProps)(tagRowProps, hoverProps, focusProps),
145
139
  className: (0, $fUaQ2$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($c033a7c057e84ef1$exports))), "spectrum-Tags-item", {
146
140
  "focus-ring": isFocusVisible,
147
141
  "is-focused": isFocused,
148
- "is-hovered": isHovered
142
+ "is-hovered": isHovered,
143
+ "is-removable": allowsRemoving
149
144
  }, styleProps.className),
150
- ref: tagRef
145
+ ref: tagRowRef
146
+ }, /*#__PURE__*/ (0, $fUaQ2$react).createElement("div", {
147
+ className: (0, $fUaQ2$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($c033a7c057e84ef1$exports))), "spectrum-Tag-cell"),
148
+ ...tagProps
151
149
  }, /*#__PURE__*/ (0, $fUaQ2$react).createElement((0, $fUaQ2$SlotProvider), {
152
150
  slots: {
153
151
  icon: {
@@ -155,26 +153,19 @@ function $b5f5ee35d3b6b95c$export$3288d34c523a1192(props) {
155
153
  size: "XS"
156
154
  },
157
155
  text: {
158
- UNSAFE_className: (0, $fUaQ2$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($c033a7c057e84ef1$exports))), "spectrum-Tag-content", {
159
- "tags-removable": allowsRemoving
160
- }),
156
+ UNSAFE_className: (0, $fUaQ2$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($c033a7c057e84ef1$exports))), "spectrum-Tag-content"),
161
157
  ...labelProps
162
158
  }
163
159
  }
164
- }, typeof children === "string" ? /*#__PURE__*/ (0, $fUaQ2$react).createElement((0, $fUaQ2$Text), null, children) : children, allowsRemoving && /*#__PURE__*/ (0, $fUaQ2$react).createElement($b5f5ee35d3b6b95c$var$TagRemoveButton, {
160
+ }, typeof children === "string" ? /*#__PURE__*/ (0, $fUaQ2$react).createElement((0, $fUaQ2$Text), null, children) : children, /*#__PURE__*/ (0, $fUaQ2$react).createElement((0, $fUaQ2$ClearSlots), null, allowsRemoving && /*#__PURE__*/ (0, $fUaQ2$react).createElement($b5f5ee35d3b6b95c$var$TagRemoveButton, {
165
161
  item: item,
166
162
  ...clearButtonProps,
167
163
  UNSAFE_className: (0, $fUaQ2$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($c033a7c057e84ef1$exports))), "spectrum-Tag-action")
168
- }))));
164
+ })))));
169
165
  }
170
166
  function $b5f5ee35d3b6b95c$var$TagRemoveButton(props) {
171
- props = (0, $fUaQ2$useSlotProps)(props, "tagRemoveButton");
172
167
  let { styleProps: styleProps } = (0, $fUaQ2$useStyleProps)(props);
173
- let clearBtnRef = (0, $fUaQ2$useRef)();
174
- return /*#__PURE__*/ (0, $fUaQ2$react).createElement("span", {
175
- ...styleProps,
176
- ref: clearBtnRef
177
- }, /*#__PURE__*/ (0, $fUaQ2$react).createElement((0, $fUaQ2$ClearButton), {
168
+ return /*#__PURE__*/ (0, $fUaQ2$react).createElement("span", styleProps, /*#__PURE__*/ (0, $fUaQ2$react).createElement((0, $fUaQ2$ClearButton), {
178
169
  preventFocus: true,
179
170
  ...props
180
171
  }));
@@ -184,71 +175,28 @@ function $b5f5ee35d3b6b95c$var$TagRemoveButton(props) {
184
175
 
185
176
 
186
177
 
187
-
188
-
189
178
  function $880d112c7a588209$var$TagGroup(props, ref) {
190
179
  props = (0, $fUaQ2$useProviderProps)(props);
191
180
  let { allowsRemoving: allowsRemoving , onRemove: onRemove , ...otherProps } = props;
192
181
  let domRef = (0, $fUaQ2$useDOMRef)(ref);
193
182
  let { styleProps: styleProps } = (0, $fUaQ2$useStyleProps)(otherProps);
194
- let { direction: direction } = (0, $fUaQ2$useLocale)();
195
- let listState = (0, $fUaQ2$useListState)(props);
196
- let gridCollection = (0, $fUaQ2$useMemo)(()=>new (0, $fUaQ2$GridCollection)({
197
- columnCount: 1,
198
- items: [
199
- ...listState.collection
200
- ].map((item)=>{
201
- let childNodes = [
202
- {
203
- ...item,
204
- index: 0,
205
- type: "cell"
206
- }
207
- ];
208
- return {
209
- type: "item",
210
- childNodes: childNodes
211
- };
212
- })
213
- }), [
214
- listState.collection,
215
- allowsRemoving
216
- ]);
217
- let state = (0, $fUaQ2$useGridState)({
218
- ...props,
219
- collection: gridCollection,
220
- focusMode: "cell"
221
- });
222
- let keyboardDelegate = new (0, $fUaQ2$TagKeyboardDelegate)({
223
- collection: state.collection,
224
- disabledKeys: new Set(),
225
- ref: domRef,
226
- direction: direction,
227
- focusMode: "cell"
228
- });
229
- let { gridProps: gridProps } = (0, $fUaQ2$useGrid)({
230
- ...props,
231
- keyboardDelegate: keyboardDelegate
232
- }, state, domRef);
233
- const { tagGroupProps: tagGroupProps } = (0, $fUaQ2$useTagGroup)(props);
234
- // Don't want the grid to be focusable or accessible via keyboard
235
- // eslint-disable-next-line @typescript-eslint/no-unused-vars
236
- let { tabIndex: tabIndex , role: role , ...otherGridProps } = gridProps;
183
+ let state = (0, $fUaQ2$useTagGroupState)(props);
184
+ let { tagGroupProps: tagGroupProps } = (0, $fUaQ2$useTagGroup)(props, state, domRef);
237
185
  return /*#__PURE__*/ (0, $fUaQ2$react).createElement("div", {
238
- ...(0, $fUaQ2$mergeProps)(styleProps, tagGroupProps, otherGridProps),
186
+ ...(0, $fUaQ2$mergeProps)(styleProps, tagGroupProps),
239
187
  className: (0, $fUaQ2$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($c033a7c057e84ef1$exports))), "spectrum-Tags", styleProps.className),
240
188
  role: state.collection.size ? "grid" : null,
241
189
  ref: domRef
242
190
  }, [
243
- ...gridCollection
191
+ ...state.collection
244
192
  ].map((item)=>/*#__PURE__*/ (0, $fUaQ2$react).createElement((0, $b5f5ee35d3b6b95c$export$3288d34c523a1192), {
245
- ...item.childNodes[0].props,
193
+ ...item.props,
246
194
  key: item.key,
247
195
  item: item,
248
196
  state: state,
249
197
  allowsRemoving: allowsRemoving,
250
198
  onRemove: onRemove
251
- }, item.childNodes[0].rendered)));
199
+ }, item.rendered)));
252
200
  }
253
201
  /** Tags allow users to categorize content. They can represent keywords or people, and are grouped to describe an item or a search request. */ const $880d112c7a588209$export$67ea30858aaf75e3 = /*#__PURE__*/ (0, $fUaQ2$react).forwardRef($880d112c7a588209$var$TagGroup);
254
202
 
package/dist/module.js.map CHANGED
@@ -1 +1 @@
1
- {"mappings":"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","sources":["packages/@react-spectrum/tag/src/index.ts","packages/@react-spectrum/tag/src/TagGroup.tsx","packages/@adobe/spectrum-css-temp/components/tags/vars.css","packages/@react-spectrum/tag/src/Tag.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\nexport {TagGroup} from './TagGroup';\nexport {Item} from '@react-stately/collections';\nexport type {SpectrumTagGroupProps} from '@react-types/tag';\n","/*\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 {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils';\nimport {DOMRef} from '@react-types/shared';\nimport {GridCollection, useGridState} from '@react-stately/grid';\nimport {mergeProps} from '@react-aria/utils';\nimport React, {ReactElement, useMemo} from 'react';\nimport {SpectrumTagGroupProps} from '@react-types/tag';\nimport styles from '@adobe/spectrum-css-temp/components/tags/vars.css';\nimport {Tag} from './Tag';\nimport {TagKeyboardDelegate, useTagGroup} from '@react-aria/tag';\nimport {useGrid} from '@react-aria/grid';\nimport {useListState} from '@react-stately/list';\nimport {useLocale} from '@react-aria/i18n';\nimport {useProviderProps} from '@react-spectrum/provider';\n\n\nfunction TagGroup<T extends object>(props: SpectrumTagGroupProps<T>, ref: DOMRef<HTMLDivElement>) {\n props = useProviderProps(props);\n let {\n allowsRemoving,\n onRemove,\n ...otherProps\n } = props;\n let domRef = useDOMRef(ref);\n let {styleProps} = useStyleProps(otherProps);\n let {direction} = useLocale();\n let listState = useListState(props);\n let gridCollection = useMemo(() => new GridCollection({\n columnCount: 1, // unused, but required for grid collections\n items: [...listState.collection].map(item => {\n let childNodes = [{\n ...item,\n index: 0,\n type: 'cell'\n }];\n\n return {\n type: 'item',\n childNodes\n };\n })\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }), [listState.collection, allowsRemoving]);\n let state = useGridState({\n ...props,\n collection: gridCollection,\n focusMode: 'cell'\n });\n let keyboardDelegate = new TagKeyboardDelegate({\n collection: state.collection,\n disabledKeys: new Set(),\n ref: domRef,\n direction,\n focusMode: 'cell'\n });\n let {gridProps} = useGrid({\n ...props,\n keyboardDelegate\n }, state, domRef);\n const {tagGroupProps} = useTagGroup(props);\n\n // Don't want the grid to be focusable or accessible via keyboard\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n let {tabIndex, role, ...otherGridProps} = gridProps;\n return (\n <div\n {...mergeProps(styleProps, tagGroupProps, otherGridProps)}\n className={\n classNames(\n styles,\n 'spectrum-Tags',\n styleProps.className\n )\n }\n role={state.collection.size ? 'grid' : null}\n ref={domRef}>\n {[...gridCollection].map(item => (\n <Tag\n {...item.childNodes[0].props}\n key={item.key}\n item={item}\n state={state}\n allowsRemoving={allowsRemoving}\n onRemove={onRemove}>\n {item.childNodes[0].rendered}\n </Tag>\n ))}\n </div>\n );\n}\n\n/** Tags allow users to categorize content. They can represent keywords or people, and are grouped to describe an item or a search request. */\nconst _TagGroup = React.forwardRef(TagGroup) as <T>(props: SpectrumTagGroupProps<T> & {ref?: DOMRef<HTMLDivElement>}) => ReactElement;\nexport {_TagGroup as TagGroup};\n","/*\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\n@import './index.css';\n@import './skin.css';\n","/*\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 {classNames, SlotProvider, useSlotProps, useStyleProps} from '@react-spectrum/utils';\nimport {ClearButton} from '@react-spectrum/button';\nimport {mergeProps} from '@react-aria/utils';\nimport React, {useRef} from 'react';\nimport {SpectrumTagProps} from '@react-types/tag';\nimport styles from '@adobe/spectrum-css-temp/components/tags/vars.css';\nimport {Text} from '@react-spectrum/text';\nimport {useFocusRing} from '@react-aria/focus';\nimport {useHover} from '@react-aria/interactions';\nimport {useTag} from '@react-aria/tag';\n\nexport function Tag<T>(props: SpectrumTagProps<T>) {\n const {\n children,\n allowsRemoving,\n item,\n state,\n onRemove,\n ...otherProps\n } = props;\n\n // @ts-ignore\n let {styleProps} = useStyleProps(otherProps);\n let {hoverProps, isHovered} = useHover({});\n let {isFocused, isFocusVisible, focusProps} = useFocusRing({within: true});\n let tagRef = useRef();\n let tagRowRef = useRef();\n let {clearButtonProps, labelProps, tagProps, tagRowProps} = useTag({\n ...props,\n isFocused,\n allowsRemoving,\n item,\n onRemove,\n tagRef,\n tagRowRef\n }, state);\n\n return (\n <div\n {...tagRowProps}\n ref={tagRowRef}>\n <div\n {...mergeProps(tagProps, hoverProps, focusProps)}\n className={classNames(\n styles,\n 'spectrum-Tags-item',\n {\n 'focus-ring': isFocusVisible,\n 'is-focused': isFocused,\n 'is-hovered': isHovered\n },\n styleProps.className\n )}\n ref={tagRef}>\n <SlotProvider\n slots={{\n icon: {UNSAFE_className: classNames(styles, 'spectrum-Tag-icon'), size: 'XS'},\n text: {UNSAFE_className: classNames(styles, 'spectrum-Tag-content', {'tags-removable': allowsRemoving}), ...labelProps}\n }}>\n\n {typeof children === 'string' ? <Text>{children}</Text> : children}\n {allowsRemoving && <TagRemoveButton item={item} {...clearButtonProps} UNSAFE_className={classNames(styles, 'spectrum-Tag-action')} />}\n </SlotProvider>\n </div>\n </div>\n );\n}\n\nfunction TagRemoveButton(props) {\n props = useSlotProps(props, 'tagRemoveButton');\n let {styleProps} = useStyleProps(props);\n let clearBtnRef = useRef();\n\n return (\n <span\n {...styleProps}\n ref={clearBtnRef}>\n <ClearButton\n preventFocus\n {...props} />\n </span>\n );\n}\n"],"names":[],"version":3,"file":"module.js.map"}
1
+ {"mappings":"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","sources":["packages/@react-spectrum/tag/src/index.ts","packages/@react-spectrum/tag/src/TagGroup.tsx","packages/@adobe/spectrum-css-temp/components/tags/vars.css","packages/@react-spectrum/tag/src/Tag.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\nexport {TagGroup} from './TagGroup';\nexport {Item} from '@react-stately/collections';\nexport type {SpectrumTagGroupProps} from '@react-types/tag';\n","/*\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 {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils';\nimport {DOMRef} from '@react-types/shared';\nimport {mergeProps} from '@react-aria/utils';\nimport React, {ReactElement} from 'react';\nimport {SpectrumTagGroupProps} from '@react-types/tag';\nimport styles from '@adobe/spectrum-css-temp/components/tags/vars.css';\nimport {Tag} from './Tag';\nimport {useProviderProps} from '@react-spectrum/provider';\nimport {useTagGroup} from '@react-aria/tag';\nimport {useTagGroupState} from '@react-stately/tag';\n\nfunction TagGroup<T extends object>(props: SpectrumTagGroupProps<T>, ref: DOMRef<HTMLDivElement>) {\n props = useProviderProps(props);\n let {\n allowsRemoving,\n onRemove,\n ...otherProps\n } = props;\n let domRef = useDOMRef(ref);\n let {styleProps} = useStyleProps(otherProps);\n let state = useTagGroupState(props);\n let {tagGroupProps} = useTagGroup(props, state, domRef);\n return (\n <div\n {...mergeProps(styleProps, tagGroupProps)}\n className={\n classNames(\n styles,\n 'spectrum-Tags',\n styleProps.className\n )\n }\n role={state.collection.size ? 'grid' : null}\n ref={domRef}>\n {[...state.collection].map(item => (\n <Tag\n {...item.props}\n key={item.key}\n item={item}\n state={state}\n allowsRemoving={allowsRemoving}\n onRemove={onRemove}>\n {item.rendered}\n </Tag>\n ))}\n </div>\n );\n}\n\n/** Tags allow users to categorize content. They can represent keywords or people, and are grouped to describe an item or a search request. */\nconst _TagGroup = React.forwardRef(TagGroup) as <T>(props: SpectrumTagGroupProps<T> & {ref?: DOMRef<HTMLDivElement>}) => ReactElement;\nexport {_TagGroup as TagGroup};\n","/*\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\n@import './index.css';\n@import './skin.css';\n","/*\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 {classNames, ClearSlots, SlotProvider, useStyleProps} from '@react-spectrum/utils';\nimport {ClearButton} from '@react-spectrum/button';\nimport {mergeProps} from '@react-aria/utils';\nimport React, {useRef} from 'react';\nimport styles from '@adobe/spectrum-css-temp/components/tags/vars.css';\nimport type {TagGroupState} from '@react-stately/tag';\nimport {TagProps} from '@react-types/tag';\nimport {Text} from '@react-spectrum/text';\nimport {useFocusRing} from '@react-aria/focus';\nimport {useHover} from '@react-aria/interactions';\nimport {useTag} from '@react-aria/tag';\n\nexport interface SpectrumTagProps<T> extends TagProps<T> {\n state: TagGroupState<T>\n}\n\nexport function Tag<T>(props: SpectrumTagProps<T>) {\n const {\n children,\n allowsRemoving,\n item,\n state,\n onRemove,\n ...otherProps\n } = props;\n\n // @ts-ignore\n let {styleProps} = useStyleProps(otherProps);\n let {hoverProps, isHovered} = useHover({});\n let {isFocused, isFocusVisible, focusProps} = useFocusRing({within: true});\n let tagRowRef = useRef();\n let {clearButtonProps, labelProps, tagProps, tagRowProps} = useTag({\n ...props,\n isFocused,\n allowsRemoving,\n item,\n onRemove,\n tagRowRef\n }, state);\n\n return (\n <div\n {...mergeProps(tagRowProps, hoverProps, focusProps)}\n className={classNames(\n styles,\n 'spectrum-Tags-item',\n {\n 'focus-ring': isFocusVisible,\n 'is-focused': isFocused,\n 'is-hovered': isHovered,\n 'is-removable': allowsRemoving\n },\n styleProps.className\n )}\n ref={tagRowRef}>\n <div\n className={classNames(styles, 'spectrum-Tag-cell')}\n {...tagProps}>\n <SlotProvider\n slots={{\n icon: {UNSAFE_className: classNames(styles, 'spectrum-Tag-icon'), size: 'XS'},\n text: {UNSAFE_className: classNames(styles, 'spectrum-Tag-content'), ...labelProps}\n }}>\n {typeof children === 'string' ? <Text>{children}</Text> : children}\n <ClearSlots>\n {allowsRemoving && <TagRemoveButton item={item} {...clearButtonProps} UNSAFE_className={classNames(styles, 'spectrum-Tag-action')} />}\n </ClearSlots>\n </SlotProvider>\n </div>\n </div>\n );\n}\n\nfunction TagRemoveButton(props) {\n let {styleProps} = useStyleProps(props);\n\n return (\n <span\n {...styleProps}>\n <ClearButton\n preventFocus\n {...props} />\n </span>\n );\n}\n"],"names":[],"version":3,"file":"module.js.map"}
package/dist/types.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"mappings":";;;ACsGA,8IAA8I;AAC9I,OAAA,MAAM;UAAuF,OAAO,cAAc,CAAC;MAAM,YAAY,CAAC;AC1FtI,OAAO,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAChD,YAAY,EAAC,qBAAqB,EAAC,MAAM,kBAAkB,CAAC","sources":["packages/@react-spectrum/tag/src/packages/@react-spectrum/tag/src/Tag.tsx","packages/@react-spectrum/tag/src/packages/@react-spectrum/tag/src/TagGroup.tsx","packages/@react-spectrum/tag/src/packages/@react-spectrum/tag/src/index.ts","packages/@react-spectrum/tag/src/index.ts"],"sourcesContent":[null,null,null,"/*\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\nexport {TagGroup} from './TagGroup';\nexport {Item} from '@react-stately/collections';\nexport type {SpectrumTagGroupProps} from '@react-types/tag';\n"],"names":[],"version":3,"file":"types.d.ts.map"}
1
+ {"mappings":";;;AC6DA,8IAA8I;AAC9I,OAAA,MAAM;UAAuF,OAAO,cAAc,CAAC;MAAM,YAAY,CAAC;ACjDtI,OAAO,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAChD,YAAY,EAAC,qBAAqB,EAAC,MAAM,kBAAkB,CAAC","sources":["packages/@react-spectrum/tag/src/packages/@react-spectrum/tag/src/Tag.tsx","packages/@react-spectrum/tag/src/packages/@react-spectrum/tag/src/TagGroup.tsx","packages/@react-spectrum/tag/src/packages/@react-spectrum/tag/src/index.ts","packages/@react-spectrum/tag/src/index.ts"],"sourcesContent":[null,null,null,"/*\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\nexport {TagGroup} from './TagGroup';\nexport {Item} from '@react-stately/collections';\nexport type {SpectrumTagGroupProps} from '@react-types/tag';\n"],"names":[],"version":3,"file":"types.d.ts.map"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@react-spectrum/tag",
3
- "version": "3.0.0-nightly.1930+7bf553f6f",
3
+ "version": "3.0.0-nightly.1933+080488a85",
4
4
  "description": "Spectrum UI components in React",
5
5
  "license": "Apache-2.0",
6
6
  "main": "dist/main.js",
@@ -31,25 +31,21 @@
31
31
  "url": "https://github.com/adobe/react-spectrum"
32
32
  },
33
33
  "dependencies": {
34
- "@react-aria/focus": "3.0.0-nightly.1930+7bf553f6f",
35
- "@react-aria/grid": "3.5.3-nightly.3630+7bf553f6f",
36
- "@react-aria/i18n": "3.0.0-nightly.1930+7bf553f6f",
37
- "@react-aria/interactions": "3.0.0-nightly.1930+7bf553f6f",
38
- "@react-aria/tag": "3.0.0-nightly.1930+7bf553f6f",
39
- "@react-aria/utils": "3.0.0-nightly.1930+7bf553f6f",
40
- "@react-spectrum/button": "3.0.0-nightly.1930+7bf553f6f",
41
- "@react-spectrum/text": "3.3.5-nightly.3630+7bf553f6f",
42
- "@react-spectrum/utils": "3.0.0-nightly.1930+7bf553f6f",
43
- "@react-stately/collections": "3.0.0-nightly.1930+7bf553f6f",
44
- "@react-stately/grid": "3.4.3-nightly.3630+7bf553f6f",
45
- "@react-stately/list": "3.6.2-nightly.3630+7bf553f6f",
46
- "@react-types/shared": "3.0.0-nightly.1930+7bf553f6f",
47
- "@react-types/tag": "3.0.0-nightly.1930+7bf553f6f",
48
- "@spectrum-icons/workflow": "3.0.0-nightly.1930+7bf553f6f",
34
+ "@react-aria/focus": "3.0.0-nightly.1933+080488a85",
35
+ "@react-aria/interactions": "3.0.0-nightly.1933+080488a85",
36
+ "@react-aria/tag": "3.0.0-nightly.1933+080488a85",
37
+ "@react-aria/utils": "3.0.0-nightly.1933+080488a85",
38
+ "@react-spectrum/button": "3.0.0-nightly.1933+080488a85",
39
+ "@react-spectrum/text": "3.3.5-nightly.3633+080488a85",
40
+ "@react-spectrum/utils": "3.0.0-nightly.1933+080488a85",
41
+ "@react-stately/collections": "3.0.0-nightly.1933+080488a85",
42
+ "@react-stately/tag": "3.0.0-nightly.3633+080488a85",
43
+ "@react-types/shared": "3.0.0-nightly.1933+080488a85",
44
+ "@react-types/tag": "3.0.0-nightly.1933+080488a85",
49
45
  "@swc/helpers": "^0.4.14"
50
46
  },
51
47
  "devDependencies": {
52
- "@adobe/spectrum-css-temp": "3.0.0-nightly.1930+7bf553f6f"
48
+ "@adobe/spectrum-css-temp": "3.0.0-nightly.1933+080488a85"
53
49
  },
54
50
  "peerDependencies": {
55
51
  "@react-spectrum/provider": "^3.0.0",
@@ -58,5 +54,5 @@
58
54
  "publishConfig": {
59
55
  "access": "public"
60
56
  },
61
- "gitHead": "7bf553f6fb9b9dad8c07b29ad925baae31eda585"
57
+ "gitHead": "080488a859be32a1ee30f4f9fdcc4d5e8331a144"
62
58
  }
package/src/Tag.tsx CHANGED
@@ -10,17 +10,22 @@
10
10
  * governing permissions and limitations under the License.
11
11
  */
12
12
 
13
- import {classNames, SlotProvider, useSlotProps, useStyleProps} from '@react-spectrum/utils';
13
+ import {classNames, ClearSlots, SlotProvider, useStyleProps} from '@react-spectrum/utils';
14
14
  import {ClearButton} from '@react-spectrum/button';
15
15
  import {mergeProps} from '@react-aria/utils';
16
16
  import React, {useRef} from 'react';
17
- import {SpectrumTagProps} from '@react-types/tag';
18
17
  import styles from '@adobe/spectrum-css-temp/components/tags/vars.css';
18
+ import type {TagGroupState} from '@react-stately/tag';
19
+ import {TagProps} from '@react-types/tag';
19
20
  import {Text} from '@react-spectrum/text';
20
21
  import {useFocusRing} from '@react-aria/focus';
21
22
  import {useHover} from '@react-aria/interactions';
22
23
  import {useTag} from '@react-aria/tag';
23
24
 
25
+ export interface SpectrumTagProps<T> extends TagProps<T> {
26
+ state: TagGroupState<T>
27
+ }
28
+
24
29
  export function Tag<T>(props: SpectrumTagProps<T>) {
25
30
  const {
26
31
  children,
@@ -35,7 +40,6 @@ export function Tag<T>(props: SpectrumTagProps<T>) {
35
40
  let {styleProps} = useStyleProps(otherProps);
36
41
  let {hoverProps, isHovered} = useHover({});
37
42
  let {isFocused, isFocusVisible, focusProps} = useFocusRing({within: true});
38
- let tagRef = useRef();
39
43
  let tagRowRef = useRef();
40
44
  let {clearButtonProps, labelProps, tagProps, tagRowProps} = useTag({
41
45
  ...props,
@@ -43,35 +47,36 @@ export function Tag<T>(props: SpectrumTagProps<T>) {
43
47
  allowsRemoving,
44
48
  item,
45
49
  onRemove,
46
- tagRef,
47
50
  tagRowRef
48
51
  }, state);
49
52
 
50
53
  return (
51
54
  <div
52
- {...tagRowProps}
53
- ref={tagRowRef}>
54
- <div
55
- {...mergeProps(tagProps, hoverProps, focusProps)}
56
- className={classNames(
55
+ {...mergeProps(tagRowProps, hoverProps, focusProps)}
56
+ className={classNames(
57
57
  styles,
58
58
  'spectrum-Tags-item',
59
- {
60
- 'focus-ring': isFocusVisible,
61
- 'is-focused': isFocused,
62
- 'is-hovered': isHovered
63
- },
59
+ {
60
+ 'focus-ring': isFocusVisible,
61
+ 'is-focused': isFocused,
62
+ 'is-hovered': isHovered,
63
+ 'is-removable': allowsRemoving
64
+ },
64
65
  styleProps.className
65
66
  )}
66
- ref={tagRef}>
67
+ ref={tagRowRef}>
68
+ <div
69
+ className={classNames(styles, 'spectrum-Tag-cell')}
70
+ {...tagProps}>
67
71
  <SlotProvider
68
72
  slots={{
69
73
  icon: {UNSAFE_className: classNames(styles, 'spectrum-Tag-icon'), size: 'XS'},
70
- text: {UNSAFE_className: classNames(styles, 'spectrum-Tag-content', {'tags-removable': allowsRemoving}), ...labelProps}
74
+ text: {UNSAFE_className: classNames(styles, 'spectrum-Tag-content'), ...labelProps}
71
75
  }}>
72
-
73
76
  {typeof children === 'string' ? <Text>{children}</Text> : children}
74
- {allowsRemoving && <TagRemoveButton item={item} {...clearButtonProps} UNSAFE_className={classNames(styles, 'spectrum-Tag-action')} />}
77
+ <ClearSlots>
78
+ {allowsRemoving && <TagRemoveButton item={item} {...clearButtonProps} UNSAFE_className={classNames(styles, 'spectrum-Tag-action')} />}
79
+ </ClearSlots>
75
80
  </SlotProvider>
76
81
  </div>
77
82
  </div>
@@ -79,14 +84,11 @@ export function Tag<T>(props: SpectrumTagProps<T>) {
79
84
  }
80
85
 
81
86
  function TagRemoveButton(props) {
82
- props = useSlotProps(props, 'tagRemoveButton');
83
87
  let {styleProps} = useStyleProps(props);
84
- let clearBtnRef = useRef();
85
88
 
86
89
  return (
87
90
  <span
88
- {...styleProps}
89
- ref={clearBtnRef}>
91
+ {...styleProps}>
90
92
  <ClearButton
91
93
  preventFocus
92
94
  {...props} />
package/src/TagGroup.tsx CHANGED
@@ -12,18 +12,14 @@
12
12
 
13
13
  import {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils';
14
14
  import {DOMRef} from '@react-types/shared';
15
- import {GridCollection, useGridState} from '@react-stately/grid';
16
15
  import {mergeProps} from '@react-aria/utils';
17
- import React, {ReactElement, useMemo} from 'react';
16
+ import React, {ReactElement} from 'react';
18
17
  import {SpectrumTagGroupProps} from '@react-types/tag';
19
18
  import styles from '@adobe/spectrum-css-temp/components/tags/vars.css';
20
19
  import {Tag} from './Tag';
21
- import {TagKeyboardDelegate, useTagGroup} from '@react-aria/tag';
22
- import {useGrid} from '@react-aria/grid';
23
- import {useListState} from '@react-stately/list';
24
- import {useLocale} from '@react-aria/i18n';
25
20
  import {useProviderProps} from '@react-spectrum/provider';
26
-
21
+ import {useTagGroup} from '@react-aria/tag';
22
+ import {useTagGroupState} from '@react-stately/tag';
27
23
 
28
24
  function TagGroup<T extends object>(props: SpectrumTagGroupProps<T>, ref: DOMRef<HTMLDivElement>) {
29
25
  props = useProviderProps(props);
@@ -34,48 +30,11 @@ function TagGroup<T extends object>(props: SpectrumTagGroupProps<T>, ref: DOMRef
34
30
  } = props;
35
31
  let domRef = useDOMRef(ref);
36
32
  let {styleProps} = useStyleProps(otherProps);
37
- let {direction} = useLocale();
38
- let listState = useListState(props);
39
- let gridCollection = useMemo(() => new GridCollection({
40
- columnCount: 1, // unused, but required for grid collections
41
- items: [...listState.collection].map(item => {
42
- let childNodes = [{
43
- ...item,
44
- index: 0,
45
- type: 'cell'
46
- }];
47
-
48
- return {
49
- type: 'item',
50
- childNodes
51
- };
52
- })
53
- // eslint-disable-next-line react-hooks/exhaustive-deps
54
- }), [listState.collection, allowsRemoving]);
55
- let state = useGridState({
56
- ...props,
57
- collection: gridCollection,
58
- focusMode: 'cell'
59
- });
60
- let keyboardDelegate = new TagKeyboardDelegate({
61
- collection: state.collection,
62
- disabledKeys: new Set(),
63
- ref: domRef,
64
- direction,
65
- focusMode: 'cell'
66
- });
67
- let {gridProps} = useGrid({
68
- ...props,
69
- keyboardDelegate
70
- }, state, domRef);
71
- const {tagGroupProps} = useTagGroup(props);
72
-
73
- // Don't want the grid to be focusable or accessible via keyboard
74
- // eslint-disable-next-line @typescript-eslint/no-unused-vars
75
- let {tabIndex, role, ...otherGridProps} = gridProps;
33
+ let state = useTagGroupState(props);
34
+ let {tagGroupProps} = useTagGroup(props, state, domRef);
76
35
  return (
77
36
  <div
78
- {...mergeProps(styleProps, tagGroupProps, otherGridProps)}
37
+ {...mergeProps(styleProps, tagGroupProps)}
79
38
  className={
80
39
  classNames(
81
40
  styles,
@@ -85,17 +44,17 @@ function TagGroup<T extends object>(props: SpectrumTagGroupProps<T>, ref: DOMRef
85
44
  }
86
45
  role={state.collection.size ? 'grid' : null}
87
46
  ref={domRef}>
88
- {[...gridCollection].map(item => (
47
+ {[...state.collection].map(item => (
89
48
  <Tag
90
- {...item.childNodes[0].props}
49
+ {...item.props}
91
50
  key={item.key}
92
51
  item={item}
93
52
  state={state}
94
53
  allowsRemoving={allowsRemoving}
95
54
  onRemove={onRemove}>
96
- {item.childNodes[0].rendered}
55
+ {item.rendered}
97
56
  </Tag>
98
- ))}
57
+ ))}
99
58
  </div>
100
59
  );
101
60
  }