@react-spectrum/tag 3.0.0-nightly.1502 → 3.0.0-nightly.1505

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 (11) hide show
  1. package/dist/main.css +1 -1
  2. package/dist/main.js +18 -50
  3. package/dist/main.js.map +1 -1
  4. package/dist/module.js +15 -33
  5. package/dist/module.js.map +1 -1
  6. package/dist/types.d.ts +1 -0
  7. package/dist/types.d.ts.map +1 -1
  8. package/package.json +18 -18
  9. package/src/Tag.tsx +7 -7
  10. package/src/TagGroup.tsx +3 -17
  11. package/src/index.ts +2 -3
package/dist/main.css CHANGED
@@ -1 +1 @@
1
- .spectrum-Tags_8407eb{display:inherit;margin:0;padding:0;list-style:none}[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{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-global-dimension-size-50);-webkit-user-select:none;user-select:none;transition:border-color var(--spectrum-global-animation-duration-100,130ms)ease-in-out,color var(--spectrum-global-animation-duration-100,130ms)ease-in-out,box-shadow var(--spectrum-global-animation-duration-100,130ms)ease-in-out,background-color var(--spectrum-global-animation-duration-100,130ms)ease-in-out;border-style:solid;outline:0;grid-template-columns:1fr auto;grid-template-areas:"icon content action";align-items:center;display:grid}.spectrum-Tags-item_8407eb.is-disabled_8407eb{pointer-events:none}[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:0;flex:auto;grid-area:content;overflow:hidden}[dir=ltr] .tags-removable_8407eb{margin-right:0}[dir=rtl] .tags-removable_8407eb{margin-left:0}.spectrum-Tag-label_8407eb{grid-area:label}.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{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));box-shadow:0 0 0 1px 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));box-shadow:0 0 0 1px 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,0.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_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{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-global-dimension-size-50);-webkit-user-select:none;user-select:none;transition:border-color var(--spectrum-global-animation-duration-100,130ms)ease-in-out,color var(--spectrum-global-animation-duration-100,130ms)ease-in-out,box-shadow var(--spectrum-global-animation-duration-100,130ms)ease-in-out,background-color var(--spectrum-global-animation-duration-100,130ms)ease-in-out;border-style:solid;outline:0;grid-template-columns:1fr auto;grid-template-areas:"icon content action";align-items:center;display:grid}.spectrum-Tags-item_8407eb.is-disabled_8407eb{pointer-events:none}[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:0;flex:auto;grid-area:content;overflow:hidden}[dir=ltr] .tags-removable_8407eb{margin-right:0}[dir=rtl] .tags-removable_8407eb{margin-left:0}.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{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));box-shadow:0 0 0 1px 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));box-shadow:0 0 0 1px 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,0.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,4 +1,5 @@
1
1
  require("./main.css");
2
+ var $dTV3V$reactstatelycollections = require("@react-stately/collections");
2
3
  var $dTV3V$reactspectrumutils = require("@react-spectrum/utils");
3
4
  var $dTV3V$reactstatelygrid = require("@react-stately/grid");
4
5
  var $dTV3V$reactariautils = require("@react-aria/utils");
@@ -13,31 +14,15 @@ var $dTV3V$reactspectrumtext = require("@react-spectrum/text");
13
14
  var $dTV3V$reactariafocus = require("@react-aria/focus");
14
15
  var $dTV3V$reactariainteractions = require("@react-aria/interactions");
15
16
 
16
- function $parcel$exportWildcard(dest, source) {
17
- Object.keys(source).forEach(function(key) {
18
- if (key === 'default' || key === '__esModule' || dest.hasOwnProperty(key)) {
19
- return;
20
- }
21
-
22
- Object.defineProperty(dest, key, {
23
- enumerable: true,
24
- get: function get() {
25
- return source[key];
26
- }
27
- });
28
- });
29
-
30
- return dest;
17
+ function $parcel$export(e, n, v, s) {
18
+ Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
31
19
  }
32
20
  function $parcel$interopDefault(a) {
33
21
  return a && a.__esModule ? a.default : a;
34
22
  }
35
- function $parcel$export(e, n, v, s) {
36
- Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
37
- }
38
- var $e7b72d8874e98cd4$exports = {};
39
23
 
40
- $parcel$export($e7b72d8874e98cd4$exports, "TagGroup", () => $e7b72d8874e98cd4$export$67ea30858aaf75e3);
24
+ $parcel$export(module.exports, "TagGroup", () => $e7b72d8874e98cd4$export$67ea30858aaf75e3);
25
+ $parcel$export(module.exports, "Item", () => $dTV3V$reactstatelycollections.Item);
41
26
 
42
27
 
43
28
 
@@ -50,7 +35,6 @@ $parcel$export($ed889f8f1f091fc8$exports, "is-disabled", () => $ed889f8f1f091fc8
50
35
  $parcel$export($ed889f8f1f091fc8$exports, "spectrum-Tag-icon", () => $ed889f8f1f091fc8$export$21f5254139e14871, (v) => $ed889f8f1f091fc8$export$21f5254139e14871 = v);
51
36
  $parcel$export($ed889f8f1f091fc8$exports, "spectrum-Tag-content", () => $ed889f8f1f091fc8$export$d281c967f4ee071e, (v) => $ed889f8f1f091fc8$export$d281c967f4ee071e = v);
52
37
  $parcel$export($ed889f8f1f091fc8$exports, "tags-removable", () => $ed889f8f1f091fc8$export$7427262f66a3b803, (v) => $ed889f8f1f091fc8$export$7427262f66a3b803 = v);
53
- $parcel$export($ed889f8f1f091fc8$exports, "spectrum-Tag-label", () => $ed889f8f1f091fc8$export$7ea9e20fd4ac0076, (v) => $ed889f8f1f091fc8$export$7ea9e20fd4ac0076 = v);
54
38
  $parcel$export($ed889f8f1f091fc8$exports, "spectrum-Tag-action", () => $ed889f8f1f091fc8$export$c5a1243e33faa2d4, (v) => $ed889f8f1f091fc8$export$c5a1243e33faa2d4 = v);
55
39
  $parcel$export($ed889f8f1f091fc8$exports, "is-hovered", () => $ed889f8f1f091fc8$export$b8813cd5d7824ce7, (v) => $ed889f8f1f091fc8$export$b8813cd5d7824ce7 = v);
56
40
  $parcel$export($ed889f8f1f091fc8$exports, "focus-ring", () => $ed889f8f1f091fc8$export$f39a09f249340e2a, (v) => $ed889f8f1f091fc8$export$f39a09f249340e2a = v);
@@ -68,7 +52,6 @@ var $ed889f8f1f091fc8$export$d35bc1e505d1ebbf;
68
52
  var $ed889f8f1f091fc8$export$21f5254139e14871;
69
53
  var $ed889f8f1f091fc8$export$d281c967f4ee071e;
70
54
  var $ed889f8f1f091fc8$export$7427262f66a3b803;
71
- var $ed889f8f1f091fc8$export$7ea9e20fd4ac0076;
72
55
  var $ed889f8f1f091fc8$export$c5a1243e33faa2d4;
73
56
  var $ed889f8f1f091fc8$export$b8813cd5d7824ce7;
74
57
  var $ed889f8f1f091fc8$export$f39a09f249340e2a;
@@ -86,7 +69,6 @@ $ed889f8f1f091fc8$export$d35bc1e505d1ebbf = "is-disabled_8407eb";
86
69
  $ed889f8f1f091fc8$export$21f5254139e14871 = "spectrum-Tag-icon_8407eb";
87
70
  $ed889f8f1f091fc8$export$d281c967f4ee071e = "spectrum-Tag-content_8407eb";
88
71
  $ed889f8f1f091fc8$export$7427262f66a3b803 = "tags-removable_8407eb";
89
- $ed889f8f1f091fc8$export$7ea9e20fd4ac0076 = "spectrum-Tag-label_8407eb";
90
72
  $ed889f8f1f091fc8$export$c5a1243e33faa2d4 = "spectrum-Tag-action_8407eb";
91
73
  $ed889f8f1f091fc8$export$b8813cd5d7824ce7 = "is-hovered_8407eb";
92
74
  $ed889f8f1f091fc8$export$f39a09f249340e2a = "focus-ring_8407eb";
@@ -119,7 +101,6 @@ function $dd2c5d00108c1840$export$3288d34c523a1192(props) {
119
101
  let { isFocused: isFocused , isFocusVisible: isFocusVisible , focusProps: focusProps } = $dTV3V$reactariafocus.useFocusRing({
120
102
  within: true
121
103
  });
122
- let labelRef = $dTV3V$react.useRef();
123
104
  let tagRef = $dTV3V$react.useRef();
124
105
  let tagRowRef = $dTV3V$react.useRef();
125
106
  let { clearButtonProps: clearButtonProps , labelProps: labelProps , tagProps: tagProps , tagRowProps: tagRowProps } = $dTV3V$reactariatag.useTag({
@@ -132,21 +113,21 @@ function $dd2c5d00108c1840$export$3288d34c523a1192(props) {
132
113
  tagRef: tagRef,
133
114
  tagRowRef: tagRowRef
134
115
  }, state);
135
- return(/*#__PURE__*/ ($parcel$interopDefault($dTV3V$react)).createElement("div", tagRowProps, /*#__PURE__*/ ($parcel$interopDefault($dTV3V$react)).createElement("div", {
116
+ return(/*#__PURE__*/ ($parcel$interopDefault($dTV3V$react)).createElement("div", {
117
+ ...tagRowProps,
118
+ ref: tagRowRef
119
+ }, /*#__PURE__*/ ($parcel$interopDefault($dTV3V$react)).createElement("div", {
136
120
  ...$dTV3V$reactariautils.mergeProps(tagProps, hoverProps, focusProps),
137
- role: "gridcell",
138
121
  className: $dTV3V$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($ed889f8f1f091fc8$exports)), 'spectrum-Tags-item', {
139
122
  'is-disabled': isDisabled,
140
123
  'focus-ring': isFocusVisible,
141
124
  'is-focused': isFocused,
142
125
  'not-removable': !isRemovable,
143
126
  'is-hovered': isHovered
144
- }, styleProps.className)
127
+ }, styleProps.className),
128
+ ref: tagRef
145
129
  }, /*#__PURE__*/ ($parcel$interopDefault($dTV3V$react)).createElement($dTV3V$reactspectrumutils.SlotProvider, {
146
130
  slots: {
147
- tagLabel: {
148
- UNSAFE_className: $dTV3V$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($ed889f8f1f091fc8$exports)), 'spectrum-Tag-label')
149
- },
150
131
  icon: {
151
132
  UNSAFE_className: $dTV3V$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($ed889f8f1f091fc8$exports)), 'spectrum-Tag-icon'),
152
133
  size: 'XS'
@@ -154,13 +135,11 @@ function $dd2c5d00108c1840$export$3288d34c523a1192(props) {
154
135
  text: {
155
136
  UNSAFE_className: $dTV3V$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($ed889f8f1f091fc8$exports)), 'spectrum-Tag-content', {
156
137
  'tags-removable': isRemovable
157
- })
138
+ }),
139
+ ...labelProps
158
140
  }
159
141
  }
160
- }, typeof children === 'string' ? /*#__PURE__*/ ($parcel$interopDefault($dTV3V$react)).createElement("div", {
161
- ref: labelRef,
162
- ...labelProps
163
- }, /*#__PURE__*/ ($parcel$interopDefault($dTV3V$react)).createElement($dTV3V$reactspectrumtext.Text, null, children)) : children, isRemovable && /*#__PURE__*/ ($parcel$interopDefault($dTV3V$react)).createElement($dd2c5d00108c1840$var$TagRemoveButton, {
142
+ }, typeof children === 'string' ? /*#__PURE__*/ ($parcel$interopDefault($dTV3V$react)).createElement($dTV3V$reactspectrumtext.Text, null, children) : children, isRemovable && /*#__PURE__*/ ($parcel$interopDefault($dTV3V$react)).createElement($dd2c5d00108c1840$var$TagRemoveButton, {
164
143
  item: item,
165
144
  ...clearButtonProps,
166
145
  UNSAFE_className: $dTV3V$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($ed889f8f1f091fc8$exports)), 'spectrum-Tag-action')
@@ -193,7 +172,7 @@ function $e7b72d8874e98cd4$var$TagGroup(props, ref1) {
193
172
  let { direction: direction } = $dTV3V$reactariai18n.useLocale();
194
173
  let listState = $dTV3V$reactstatelylist.useListState(props);
195
174
  let gridCollection = $dTV3V$react.useMemo(()=>new $dTV3V$reactstatelygrid.GridCollection({
196
- columnCount: isRemovable ? 2 : 1,
175
+ columnCount: 1,
197
176
  items: [
198
177
  ...listState.collection
199
178
  ].map((item)=>{
@@ -204,18 +183,6 @@ function $e7b72d8874e98cd4$var$TagGroup(props, ref1) {
204
183
  type: 'cell'
205
184
  }
206
185
  ];
207
- // add column of clear buttons if removable
208
- if (isRemovable) childNodes.push({
209
- key: `remove-${item.key}`,
210
- type: 'cell',
211
- index: 1,
212
- value: null,
213
- level: 0,
214
- rendered: null,
215
- textValue: item.textValue,
216
- hasChildNodes: false,
217
- childNodes: []
218
- });
219
186
  return {
220
187
  type: 'item',
221
188
  childNodes: childNodes
@@ -245,12 +212,13 @@ function $e7b72d8874e98cd4$var$TagGroup(props, ref1) {
245
212
  const { tagGroupProps: tagGroupProps } = $dTV3V$reactariatag.useTagGroup(props, listState);
246
213
  // Don't want the grid to be focusable or accessible via keyboard
247
214
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
248
- let { tabIndex: tabIndex , ...otherGridProps } = gridProps;
215
+ let { tabIndex: tabIndex , role: role , ...otherGridProps } = gridProps;
249
216
  return(/*#__PURE__*/ ($parcel$interopDefault($dTV3V$react)).createElement("div", {
250
217
  ...$dTV3V$reactariautils.mergeProps(styleProps, tagGroupProps, otherGridProps),
251
218
  className: $dTV3V$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($ed889f8f1f091fc8$exports)), 'spectrum-Tags', {
252
219
  'is-disabled': isDisabled
253
220
  }, styleProps.className),
221
+ role: state.collection.size ? 'grid' : null,
254
222
  ref: domRef
255
223
  }, [
256
224
  ...gridCollection
@@ -270,7 +238,7 @@ function $e7b72d8874e98cd4$var$TagGroup(props, ref1) {
270
238
  const $e7b72d8874e98cd4$export$67ea30858aaf75e3 = /*#__PURE__*/ ($parcel$interopDefault($dTV3V$react)).forwardRef($e7b72d8874e98cd4$var$TagGroup);
271
239
 
272
240
 
273
- $parcel$exportWildcard(module.exports, $e7b72d8874e98cd4$exports);
241
+
274
242
 
275
243
 
276
244
  //# sourceMappingURL=main.js.map
package/dist/main.js.map CHANGED
@@ -1 +1 @@
1
- {"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AEAA,GAA+B;AAC/B,GAAoC;AACpC,GAA6B;AAC7B,GAAmC;AACnC,GAAsC;AACtC,GAAgC;AAChC,GAAoC;AACpC,GAAqC;AACrC,GAA4B;AAC5B,GAA4B;AAC5B,GAA6B;AAC7B,GAA4B;AAC5B,GAAwC;AACxC,GAAyC;AACzC,GAA+C;AAC/C,GAAiC;AACjC,GAA+C;AAC/C,GAA4B;AAjB5B,yCAA+B,GAAG,CAAsB;AACxD,yCAAoC,GAAG,CAA2B;AAClE,yCAA6B,GAAG,CAAoB;AACpD,yCAAmC,GAAG,CAA0B;AAChE,yCAAsC,GAAG,CAA6B;AACtE,yCAAgC,GAAG,CAAuB;AAC1D,yCAAoC,GAAG,CAA2B;AAClE,yCAAqC,GAAG,CAA4B;AACpE,yCAA4B,GAAG,CAAmB;AAClD,yCAA4B,GAAG,CAAmB;AAClD,yCAA6B,GAAG,CAAoB;AACpD,yCAA4B,GAAG,CAAmB;AAClD,yCAAwC,GAAG,CAA+B;AAC1E,yCAAyC,GAAG,CAAgC;AAC5E,yCAA+C,GAAG,CAAsC;AACxF,yCAAiC,GAAG,CAAwB;AAC5D,yCAA+C,GAAG,CAAsC;AACxF,yCAA4B,GAAG,CAAmB;;;;;;;;;;;;SCMlC,yCAAG,CAAI,KAA0B,EAAE,CAAC;IAClD,KAAK,CAAC,CAAC,WACL,QAAQ,eACR,UAAU,gBACV,WAAW,SACX,IAAI,UACJ,KAAK,aACL,QAAQ,MACL,UAAU,CACf,CAAC,GAAG,KAAK;IAET,EAAa,AAAb,WAAa;IACb,GAAG,CAAC,CAAC,aAAA,UAAU,EAAA,CAAC,GAAG,uCAAa,CAAC,UAAU;IAC3C,GAAG,CAAC,CAAC,aAAA,UAAU,cAAE,SAAS,EAAA,CAAC,GAAG,qCAAQ,CAAC,CAAC;oBAAA,UAAU;IAAA,CAAC;IACnD,GAAG,CAAC,CAAC,YAAA,SAAS,mBAAE,cAAc,eAAE,UAAU,EAAA,CAAC,GAAG,kCAAY,CAAC,CAAC;QAAA,MAAM,EAAE,IAAI;IAAA,CAAC;IACzE,GAAG,CAAC,QAAQ,GAAG,mBAAM;IACrB,GAAG,CAAC,MAAM,GAAG,mBAAM;IACnB,GAAG,CAAC,SAAS,GAAG,mBAAM;IACtB,GAAG,CAAC,CAAC,mBAAA,gBAAgB,eAAE,UAAU,aAAE,QAAQ,gBAAE,WAAW,EAAA,CAAC,GAAG,0BAAM,CAAC,CAAC;WAC/D,KAAK;oBACR,UAAU;mBACV,SAAS;qBACT,WAAW;cACX,IAAI;kBACJ,QAAQ;gBACR,MAAM;mBACN,SAAS;IACX,CAAC,EAAE,KAAK;IAER,MAAM,oEACH,CAAG,MACE,WAAW,qEACd,CAAG;WACE,gCAAU,CAAC,QAAQ,EAAE,UAAU,EAAE,UAAU;QAC/C,IAAI,EAAC,CAAU;QACf,SAAS,EAAE,oCAAU,CACnB,gEAAM,EACN,CAAoB,qBACpB,CAAC;YACC,CAAa,cAAE,UAAU;YACzB,CAAY,aAAE,cAAc;YAC5B,CAAY,aAAE,SAAS;YACvB,CAAe,iBAAG,WAAW;YAC7B,CAAY,aAAE,SAAS;QACzB,CAAC,EACD,UAAU,CAAC,SAAS;0EAErB,sCAAY;QACX,KAAK,EAAE,CAAC;YACN,QAAQ,EAAE,CAAC;gBAAA,gBAAgB,EAAE,oCAAU,CAAC,gEAAM,EAAE,CAAoB;YAAC,CAAC;YACtE,IAAI,EAAE,CAAC;gBAAA,gBAAgB,EAAE,oCAAU,CAAC,gEAAM,EAAE,CAAmB;gBAAG,IAAI,EAAE,CAAI;YAAA,CAAC;YAC7E,IAAI,EAAE,CAAC;gBAAA,gBAAgB,EAAE,oCAAU,CAAC,gEAAM,EAAE,CAAsB,uBAAE,CAAC;oBAAA,CAAgB,iBAAE,WAAW;gBAAA,CAAC;YAAC,CAAC;QACvG,CAAC;OACA,MAAM,CAAC,QAAQ,KAAK,CAAQ,6EAAI,CAAG;QAAC,GAAG,EAAE,QAAQ;WAAM,UAAU;0EAAG,6BAAI,QAAE,QAAQ,KAAiB,QAAQ,EAC3G,WAAW,uEAAK,qCAAe;QAAC,IAAI,EAAE,IAAI;WAAM,gBAAgB;QAAE,gBAAgB,EAAE,oCAAU,CAAC,gEAAM,EAAE,CAAqB;;AAKvI,CAAC;SAEQ,qCAAe,CAAC,KAAK,EAAE,CAAC;IAC/B,KAAK,GAAG,sCAAY,CAAC,KAAK,EAAE,CAAiB;IAC7C,GAAG,CAAC,CAAC,aAAA,UAAU,EAAA,CAAC,GAAG,uCAAa,CAAC,KAAK;IACtC,GAAG,CAAC,WAAW,GAAG,mBAAM;IAExB,MAAM,oEACH,CAAI;WACC,UAAU;QACd,GAAG,EAAE,WAAW;0EACf,sCAAW;QACV,YAAY,EAAZ,IAAY;WACR,KAAK;;AAGjB,CAAC;;;;;;;;SFvEQ,8BAAQ,CAAmB,KAA+B,EAAE,IAA2B,EAAE,CAAC;IACjG,KAAK,GAAG,6CAAgB,CAAC,KAAK;IAC9B,GAAG,CAAC,CAAC,aACH,UAAU,gBACV,WAAW,aACX,QAAQ,MACL,UAAU,CACf,CAAC,GAAG,KAAK;IACT,GAAG,CAAC,MAAM,GAAG,mCAAS,CAAC,IAAG;IAC1B,GAAG,CAAC,CAAC,aAAA,UAAU,EAAA,CAAC,GAAG,uCAAa,CAAC,UAAU;IAC3C,GAAG,CAAC,CAAC,YAAA,SAAS,EAAA,CAAC,GAAG,8BAAS;IAC3B,GAAG,CAAC,SAAS,GAAG,oCAAY,CAAC,KAAK;IAClC,GAAG,CAAC,cAAc,GAAG,oBAAO,KAAO,GAAG,CAAC,sCAAc,CAAC,CAAC;YACrD,WAAW,EAAE,WAAW,GAAG,CAAC,GAAG,CAAC;YAChC,KAAK,EAAE,CAAC;mBAAG,SAAS,CAAC,UAAU;YAAA,CAAC,CAAC,GAAG,EAAC,IAAI,GAAI,CAAC;gBAC5C,GAAG,CAAC,UAAU,GAAG,CAAC;oBAAA,CAAC;2BACd,IAAI;wBACP,KAAK,EAAE,CAAC;wBACR,IAAI,EAAE,CAAM;oBACd,CAAC;gBAAA,CAAC;gBAEF,EAA2C,AAA3C,yCAA2C;gBAC3C,EAAE,EAAE,WAAW,EACb,UAAU,CAAC,IAAI,CAAC,CAAC;oBACf,GAAG,GAAG,OAAO,EAAE,IAAI,CAAC,GAAG;oBACvB,IAAI,EAAE,CAAM;oBACZ,KAAK,EAAE,CAAC;oBACR,KAAK,EAAE,IAAI;oBACX,KAAK,EAAE,CAAC;oBACR,QAAQ,EAAE,IAAI;oBACd,SAAS,EAAE,IAAI,CAAC,SAAS;oBACzB,aAAa,EAAE,KAAK;oBACpB,UAAU,EAAE,CAAC,CAAC;gBAChB,CAAC;gBAGH,MAAM,CAAC,CAAC;oBACN,IAAI,EAAE,CAAM;gCACZ,UAAU;gBACZ,CAAC;YACH,CAAC;QACH,CAAC;MAAG,CAAC;QAAA,SAAS,CAAC,UAAU;QAAE,WAAW;IAAA,CAAC;IACvC,GAAG,CAAC,KAAK,GAAG,oCAAY,CAAC,CAAC;WACrB,KAAK;QACR,UAAU,EAAE,cAAc;QAC1B,SAAS,EAAE,CAAM;IACnB,CAAC;IACD,GAAG,CAAC,gBAAgB,GAAG,GAAG,CAAC,uCAAmB,CAAC,CAAC;QAC9C,UAAU,EAAE,KAAK,CAAC,UAAU;QAC5B,YAAY,EAAE,KAAK,CAAC,YAAY;QAChC,GAAG,EAAE,MAAM;mBACX,SAAS;QACT,SAAS,EAAE,CAAM;IACnB,CAAC;IACD,GAAG,CAAC,CAAC,YAAA,SAAS,EAAA,CAAC,GAAG,4BAAO,CAAC,CAAC;WACtB,KAAK;0BACR,gBAAgB;IAClB,CAAC,EAAE,KAAK,EAAE,MAAM;IAChB,KAAK,CAAC,CAAC,gBAAA,aAAa,EAAA,CAAC,GAAG,+BAAW,CAAC,KAAK,EAAE,SAAS;IAEpD,EAAiE,AAAjE,+DAAiE;IACjE,EAA6D,AAA7D,2DAA6D;IAC7D,GAAG,CAAC,CAAC,WAAA,QAAQ,MAAK,cAAc,CAAA,CAAC,GAAG,SAAS;IAC7C,MAAM,oEACH,CAAG;WACE,gCAAU,CAAC,UAAU,EAAE,aAAa,EAAE,cAAc;QACxD,SAAS,EACP,oCAAU,CACR,gEAAM,EACN,CAAe,gBACf,CAAC;YACC,CAAa,cAAE,UAAU;QAC3B,CAAC,EACD,UAAU,CAAC,SAAS;QAGxB,GAAG,EAAE,MAAM;OACV,CAAC;WAAG,cAAc;IAAA,CAAC,CAAC,GAAG,EAAC,IAAI;;kFAC1B,yCAAG;eACE,IAAI,CAAC,UAAU,CAAC,CAAC,EAAE,KAAK;YAC5B,GAAG,EAAE,IAAI,CAAC,GAAG;YACb,IAAI,EAAE,IAAI;YACV,KAAK,EAAE,KAAK;YACZ,UAAU,EAAE,UAAU,IAAI,KAAK,CAAC,YAAY,CAAC,GAAG,QAAC,IAAI,aAAJ,IAAI,KAAJ,IAAI,CAAJ,CAAgB,GAAhB,IAAI,CAAJ,CAAgB,GAAhB,IAAI,CAAE,UAAU,CAAC,CAAC,uBAAlB,IAAI,CAAJ,CAAwB,GAAxB,IAAI,CAAJ,CAAwB,OAAH,GAAG;YACzE,WAAW,EAAE,WAAW;YACxB,QAAQ,EAAE,QAAQ;WACjB,IAAI,CAAC,UAAU,CAAC,CAAC,EAAE,QAAQ;;AAKtC,CAAC;AAED,KAAK,CAAC,yCAAS,iBAAG,sCAAK,CAAC,UAAU,CAAC,8BAAQ","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\n/// <reference types=\"css-module-types\" />\n\nexport * from './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\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 isDisabled,\n isRemovable,\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: isRemovable ? 2 : 1,\n items: [...listState.collection].map(item => {\n let childNodes = [{\n ...item,\n index: 0,\n type: 'cell'\n }];\n\n // add column of clear buttons if removable\n if (isRemovable) {\n childNodes.push({\n key: `remove-${item.key}`,\n type: 'cell',\n index: 1,\n value: null,\n level: 0,\n rendered: null,\n textValue: item.textValue, // TODO localize?\n hasChildNodes: false,\n childNodes: []\n });\n }\n\n return {\n type: 'item',\n childNodes\n };\n })\n }), [listState.collection, isRemovable]);\n let state = useGridState({\n ...props,\n collection: gridCollection,\n focusMode: 'cell'\n });\n let keyboardDelegate = new TagKeyboardDelegate({\n collection: state.collection,\n disabledKeys: state.disabledKeys,\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, listState);\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, ...otherGridProps} = gridProps;\n return (\n <div\n {...mergeProps(styleProps, tagGroupProps, otherGridProps)}\n className={\n classNames(\n styles,\n 'spectrum-Tags',\n {\n 'is-disabled': isDisabled\n },\n styleProps.className\n )\n }\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 isDisabled={isDisabled || state.disabledKeys.has(item?.childNodes[0]?.key)}\n isRemovable={isRemovable}\n onRemove={onRemove}>\n {item.childNodes[0].rendered}\n </Tag>\n ))}\n </div>\n );\n}\n\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 isDisabled,\n isRemovable,\n item,\n state,\n onRemove,\n ...otherProps\n } = props;\n\n // @ts-ignore\n let {styleProps} = useStyleProps(otherProps);\n let {hoverProps, isHovered} = useHover({isDisabled});\n let {isFocused, isFocusVisible, focusProps} = useFocusRing({within: true});\n let labelRef = useRef();\n let tagRef = useRef();\n let tagRowRef = useRef();\n let {clearButtonProps, labelProps, tagProps, tagRowProps} = useTag({\n ...props,\n isDisabled,\n isFocused,\n isRemovable,\n item,\n onRemove,\n tagRef,\n tagRowRef\n }, state);\n\n return (\n <div\n {...tagRowProps}>\n <div\n {...mergeProps(tagProps, hoverProps, focusProps)}\n role=\"gridcell\"\n className={classNames(\n styles,\n 'spectrum-Tags-item',\n {\n 'is-disabled': isDisabled,\n 'focus-ring': isFocusVisible,\n 'is-focused': isFocused,\n 'not-removable': !isRemovable,\n 'is-hovered': isHovered\n },\n styleProps.className\n )}>\n <SlotProvider\n slots={{\n tagLabel: {UNSAFE_className: classNames(styles, 'spectrum-Tag-label')},\n icon: {UNSAFE_className: classNames(styles, 'spectrum-Tag-icon'), size: 'XS'},\n text: {UNSAFE_className: classNames(styles, 'spectrum-Tag-content', {'tags-removable': isRemovable})}\n }}>\n {typeof children === 'string' ? <div ref={labelRef} {...labelProps}><Text>{children}</Text></div> : children}\n {isRemovable && <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';\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 isDisabled,\n isRemovable,\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 }), [listState.collection, isRemovable]);\n let state = useGridState({\n ...props,\n collection: gridCollection,\n focusMode: 'cell'\n });\n let keyboardDelegate = new TagKeyboardDelegate({\n collection: state.collection,\n disabledKeys: state.disabledKeys,\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, listState);\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 {\n 'is-disabled': isDisabled\n },\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 isDisabled={isDisabled || state.disabledKeys.has(item?.childNodes[0]?.key)}\n isRemovable={isRemovable}\n onRemove={onRemove}>\n {item.childNodes[0].rendered}\n </Tag>\n ))}\n </div>\n );\n}\n\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 isDisabled,\n isRemovable,\n item,\n state,\n onRemove,\n ...otherProps\n } = props;\n\n // @ts-ignore\n let {styleProps} = useStyleProps(otherProps);\n let {hoverProps, isHovered} = useHover({isDisabled});\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 isDisabled,\n isFocused,\n isRemovable,\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 'is-disabled': isDisabled,\n 'focus-ring': isFocusVisible,\n 'is-focused': isFocused,\n 'not-removable': !isRemovable,\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': isRemovable}), ...labelProps}\n }}>\n\n {typeof children === 'string' ? <Text>{children}</Text> : children}\n {isRemovable && <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"}
package/dist/module.js CHANGED
@@ -1,4 +1,5 @@
1
1
  import "./main.css";
2
+ import {Item as $c14698d57a91452e$re_export$Item} from "@react-stately/collections";
2
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";
3
4
  import {GridCollection as $fUaQ2$GridCollection, useGridState as $fUaQ2$useGridState} from "@react-stately/grid";
4
5
  import {mergeProps as $fUaQ2$mergeProps} from "@react-aria/utils";
@@ -19,9 +20,6 @@ function $parcel$interopDefault(a) {
19
20
  function $parcel$export(e, n, v, s) {
20
21
  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
21
22
  }
22
- var $880d112c7a588209$exports = {};
23
-
24
- $parcel$export($880d112c7a588209$exports, "TagGroup", () => $880d112c7a588209$export$67ea30858aaf75e3);
25
23
 
26
24
 
27
25
 
@@ -34,7 +32,6 @@ $parcel$export($c033a7c057e84ef1$exports, "is-disabled", () => $c033a7c057e84ef1
34
32
  $parcel$export($c033a7c057e84ef1$exports, "spectrum-Tag-icon", () => $c033a7c057e84ef1$export$21f5254139e14871, (v) => $c033a7c057e84ef1$export$21f5254139e14871 = v);
35
33
  $parcel$export($c033a7c057e84ef1$exports, "spectrum-Tag-content", () => $c033a7c057e84ef1$export$d281c967f4ee071e, (v) => $c033a7c057e84ef1$export$d281c967f4ee071e = v);
36
34
  $parcel$export($c033a7c057e84ef1$exports, "tags-removable", () => $c033a7c057e84ef1$export$7427262f66a3b803, (v) => $c033a7c057e84ef1$export$7427262f66a3b803 = v);
37
- $parcel$export($c033a7c057e84ef1$exports, "spectrum-Tag-label", () => $c033a7c057e84ef1$export$7ea9e20fd4ac0076, (v) => $c033a7c057e84ef1$export$7ea9e20fd4ac0076 = v);
38
35
  $parcel$export($c033a7c057e84ef1$exports, "spectrum-Tag-action", () => $c033a7c057e84ef1$export$c5a1243e33faa2d4, (v) => $c033a7c057e84ef1$export$c5a1243e33faa2d4 = v);
39
36
  $parcel$export($c033a7c057e84ef1$exports, "is-hovered", () => $c033a7c057e84ef1$export$b8813cd5d7824ce7, (v) => $c033a7c057e84ef1$export$b8813cd5d7824ce7 = v);
40
37
  $parcel$export($c033a7c057e84ef1$exports, "focus-ring", () => $c033a7c057e84ef1$export$f39a09f249340e2a, (v) => $c033a7c057e84ef1$export$f39a09f249340e2a = v);
@@ -52,7 +49,6 @@ var $c033a7c057e84ef1$export$d35bc1e505d1ebbf;
52
49
  var $c033a7c057e84ef1$export$21f5254139e14871;
53
50
  var $c033a7c057e84ef1$export$d281c967f4ee071e;
54
51
  var $c033a7c057e84ef1$export$7427262f66a3b803;
55
- var $c033a7c057e84ef1$export$7ea9e20fd4ac0076;
56
52
  var $c033a7c057e84ef1$export$c5a1243e33faa2d4;
57
53
  var $c033a7c057e84ef1$export$b8813cd5d7824ce7;
58
54
  var $c033a7c057e84ef1$export$f39a09f249340e2a;
@@ -70,7 +66,6 @@ $c033a7c057e84ef1$export$d35bc1e505d1ebbf = "is-disabled_8407eb";
70
66
  $c033a7c057e84ef1$export$21f5254139e14871 = "spectrum-Tag-icon_8407eb";
71
67
  $c033a7c057e84ef1$export$d281c967f4ee071e = "spectrum-Tag-content_8407eb";
72
68
  $c033a7c057e84ef1$export$7427262f66a3b803 = "tags-removable_8407eb";
73
- $c033a7c057e84ef1$export$7ea9e20fd4ac0076 = "spectrum-Tag-label_8407eb";
74
69
  $c033a7c057e84ef1$export$c5a1243e33faa2d4 = "spectrum-Tag-action_8407eb";
75
70
  $c033a7c057e84ef1$export$b8813cd5d7824ce7 = "is-hovered_8407eb";
76
71
  $c033a7c057e84ef1$export$f39a09f249340e2a = "focus-ring_8407eb";
@@ -103,7 +98,6 @@ function $b5f5ee35d3b6b95c$export$3288d34c523a1192(props) {
103
98
  let { isFocused: isFocused , isFocusVisible: isFocusVisible , focusProps: focusProps } = $fUaQ2$useFocusRing({
104
99
  within: true
105
100
  });
106
- let labelRef = $fUaQ2$useRef();
107
101
  let tagRef = $fUaQ2$useRef();
108
102
  let tagRowRef = $fUaQ2$useRef();
109
103
  let { clearButtonProps: clearButtonProps , labelProps: labelProps , tagProps: tagProps , tagRowProps: tagRowProps } = $fUaQ2$useTag({
@@ -116,21 +110,21 @@ function $b5f5ee35d3b6b95c$export$3288d34c523a1192(props) {
116
110
  tagRef: tagRef,
117
111
  tagRowRef: tagRowRef
118
112
  }, state);
119
- return(/*#__PURE__*/ $fUaQ2$react.createElement("div", tagRowProps, /*#__PURE__*/ $fUaQ2$react.createElement("div", {
113
+ return(/*#__PURE__*/ $fUaQ2$react.createElement("div", {
114
+ ...tagRowProps,
115
+ ref: tagRowRef
116
+ }, /*#__PURE__*/ $fUaQ2$react.createElement("div", {
120
117
  ...$fUaQ2$mergeProps(tagProps, hoverProps, focusProps),
121
- role: "gridcell",
122
118
  className: $fUaQ2$classNames((/*@__PURE__*/$parcel$interopDefault($c033a7c057e84ef1$exports)), 'spectrum-Tags-item', {
123
119
  'is-disabled': isDisabled,
124
120
  'focus-ring': isFocusVisible,
125
121
  'is-focused': isFocused,
126
122
  'not-removable': !isRemovable,
127
123
  'is-hovered': isHovered
128
- }, styleProps.className)
124
+ }, styleProps.className),
125
+ ref: tagRef
129
126
  }, /*#__PURE__*/ $fUaQ2$react.createElement($fUaQ2$SlotProvider, {
130
127
  slots: {
131
- tagLabel: {
132
- UNSAFE_className: $fUaQ2$classNames((/*@__PURE__*/$parcel$interopDefault($c033a7c057e84ef1$exports)), 'spectrum-Tag-label')
133
- },
134
128
  icon: {
135
129
  UNSAFE_className: $fUaQ2$classNames((/*@__PURE__*/$parcel$interopDefault($c033a7c057e84ef1$exports)), 'spectrum-Tag-icon'),
136
130
  size: 'XS'
@@ -138,13 +132,11 @@ function $b5f5ee35d3b6b95c$export$3288d34c523a1192(props) {
138
132
  text: {
139
133
  UNSAFE_className: $fUaQ2$classNames((/*@__PURE__*/$parcel$interopDefault($c033a7c057e84ef1$exports)), 'spectrum-Tag-content', {
140
134
  'tags-removable': isRemovable
141
- })
135
+ }),
136
+ ...labelProps
142
137
  }
143
138
  }
144
- }, typeof children === 'string' ? /*#__PURE__*/ $fUaQ2$react.createElement("div", {
145
- ref: labelRef,
146
- ...labelProps
147
- }, /*#__PURE__*/ $fUaQ2$react.createElement($fUaQ2$Text, null, children)) : children, isRemovable && /*#__PURE__*/ $fUaQ2$react.createElement($b5f5ee35d3b6b95c$var$TagRemoveButton, {
139
+ }, typeof children === 'string' ? /*#__PURE__*/ $fUaQ2$react.createElement($fUaQ2$Text, null, children) : children, isRemovable && /*#__PURE__*/ $fUaQ2$react.createElement($b5f5ee35d3b6b95c$var$TagRemoveButton, {
148
140
  item: item,
149
141
  ...clearButtonProps,
150
142
  UNSAFE_className: $fUaQ2$classNames((/*@__PURE__*/$parcel$interopDefault($c033a7c057e84ef1$exports)), 'spectrum-Tag-action')
@@ -177,7 +169,7 @@ function $880d112c7a588209$var$TagGroup(props, ref1) {
177
169
  let { direction: direction } = $fUaQ2$useLocale();
178
170
  let listState = $fUaQ2$useListState(props);
179
171
  let gridCollection = $fUaQ2$useMemo(()=>new $fUaQ2$GridCollection({
180
- columnCount: isRemovable ? 2 : 1,
172
+ columnCount: 1,
181
173
  items: [
182
174
  ...listState.collection
183
175
  ].map((item)=>{
@@ -188,18 +180,6 @@ function $880d112c7a588209$var$TagGroup(props, ref1) {
188
180
  type: 'cell'
189
181
  }
190
182
  ];
191
- // add column of clear buttons if removable
192
- if (isRemovable) childNodes.push({
193
- key: `remove-${item.key}`,
194
- type: 'cell',
195
- index: 1,
196
- value: null,
197
- level: 0,
198
- rendered: null,
199
- textValue: item.textValue,
200
- hasChildNodes: false,
201
- childNodes: []
202
- });
203
183
  return {
204
184
  type: 'item',
205
185
  childNodes: childNodes
@@ -229,12 +209,13 @@ function $880d112c7a588209$var$TagGroup(props, ref1) {
229
209
  const { tagGroupProps: tagGroupProps } = $fUaQ2$useTagGroup(props, listState);
230
210
  // Don't want the grid to be focusable or accessible via keyboard
231
211
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
232
- let { tabIndex: tabIndex , ...otherGridProps } = gridProps;
212
+ let { tabIndex: tabIndex , role: role , ...otherGridProps } = gridProps;
233
213
  return(/*#__PURE__*/ $fUaQ2$react.createElement("div", {
234
214
  ...$fUaQ2$mergeProps(styleProps, tagGroupProps, otherGridProps),
235
215
  className: $fUaQ2$classNames((/*@__PURE__*/$parcel$interopDefault($c033a7c057e84ef1$exports)), 'spectrum-Tags', {
236
216
  'is-disabled': isDisabled
237
217
  }, styleProps.className),
218
+ role: state.collection.size ? 'grid' : null,
238
219
  ref: domRef
239
220
  }, [
240
221
  ...gridCollection
@@ -256,5 +237,6 @@ const $880d112c7a588209$export$67ea30858aaf75e3 = /*#__PURE__*/ $fUaQ2$react.for
256
237
 
257
238
 
258
239
 
259
- export {$880d112c7a588209$export$67ea30858aaf75e3 as TagGroup};
240
+
241
+ export {$880d112c7a588209$export$67ea30858aaf75e3 as TagGroup, $c14698d57a91452e$re_export$Item as Item};
260
242
  //# sourceMappingURL=module.js.map
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\n/// <reference types=\"css-module-types\" />\n\nexport * from './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\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 isDisabled,\n isRemovable,\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: isRemovable ? 2 : 1,\n items: [...listState.collection].map(item => {\n let childNodes = [{\n ...item,\n index: 0,\n type: 'cell'\n }];\n\n // add column of clear buttons if removable\n if (isRemovable) {\n childNodes.push({\n key: `remove-${item.key}`,\n type: 'cell',\n index: 1,\n value: null,\n level: 0,\n rendered: null,\n textValue: item.textValue, // TODO localize?\n hasChildNodes: false,\n childNodes: []\n });\n }\n\n return {\n type: 'item',\n childNodes\n };\n })\n }), [listState.collection, isRemovable]);\n let state = useGridState({\n ...props,\n collection: gridCollection,\n focusMode: 'cell'\n });\n let keyboardDelegate = new TagKeyboardDelegate({\n collection: state.collection,\n disabledKeys: state.disabledKeys,\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, listState);\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, ...otherGridProps} = gridProps;\n return (\n <div\n {...mergeProps(styleProps, tagGroupProps, otherGridProps)}\n className={\n classNames(\n styles,\n 'spectrum-Tags',\n {\n 'is-disabled': isDisabled\n },\n styleProps.className\n )\n }\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 isDisabled={isDisabled || state.disabledKeys.has(item?.childNodes[0]?.key)}\n isRemovable={isRemovable}\n onRemove={onRemove}>\n {item.childNodes[0].rendered}\n </Tag>\n ))}\n </div>\n );\n}\n\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 isDisabled,\n isRemovable,\n item,\n state,\n onRemove,\n ...otherProps\n } = props;\n\n // @ts-ignore\n let {styleProps} = useStyleProps(otherProps);\n let {hoverProps, isHovered} = useHover({isDisabled});\n let {isFocused, isFocusVisible, focusProps} = useFocusRing({within: true});\n let labelRef = useRef();\n let tagRef = useRef();\n let tagRowRef = useRef();\n let {clearButtonProps, labelProps, tagProps, tagRowProps} = useTag({\n ...props,\n isDisabled,\n isFocused,\n isRemovable,\n item,\n onRemove,\n tagRef,\n tagRowRef\n }, state);\n\n return (\n <div\n {...tagRowProps}>\n <div\n {...mergeProps(tagProps, hoverProps, focusProps)}\n role=\"gridcell\"\n className={classNames(\n styles,\n 'spectrum-Tags-item',\n {\n 'is-disabled': isDisabled,\n 'focus-ring': isFocusVisible,\n 'is-focused': isFocused,\n 'not-removable': !isRemovable,\n 'is-hovered': isHovered\n },\n styleProps.className\n )}>\n <SlotProvider\n slots={{\n tagLabel: {UNSAFE_className: classNames(styles, 'spectrum-Tag-label')},\n icon: {UNSAFE_className: classNames(styles, 'spectrum-Tag-icon'), size: 'XS'},\n text: {UNSAFE_className: classNames(styles, 'spectrum-Tag-content', {'tags-removable': isRemovable})}\n }}>\n {typeof children === 'string' ? <div ref={labelRef} {...labelProps}><Text>{children}</Text></div> : children}\n {isRemovable && <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';\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 isDisabled,\n isRemovable,\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 }), [listState.collection, isRemovable]);\n let state = useGridState({\n ...props,\n collection: gridCollection,\n focusMode: 'cell'\n });\n let keyboardDelegate = new TagKeyboardDelegate({\n collection: state.collection,\n disabledKeys: state.disabledKeys,\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, listState);\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 {\n 'is-disabled': isDisabled\n },\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 isDisabled={isDisabled || state.disabledKeys.has(item?.childNodes[0]?.key)}\n isRemovable={isRemovable}\n onRemove={onRemove}>\n {item.childNodes[0].rendered}\n </Tag>\n ))}\n </div>\n );\n}\n\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 isDisabled,\n isRemovable,\n item,\n state,\n onRemove,\n ...otherProps\n } = props;\n\n // @ts-ignore\n let {styleProps} = useStyleProps(otherProps);\n let {hoverProps, isHovered} = useHover({isDisabled});\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 isDisabled,\n isFocused,\n isRemovable,\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 'is-disabled': isDisabled,\n 'focus-ring': isFocusVisible,\n 'is-focused': isFocused,\n 'not-removable': !isRemovable,\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': isRemovable}), ...labelProps}\n }}>\n\n {typeof children === 'string' ? <Text>{children}</Text> : children}\n {isRemovable && <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"}
package/dist/types.d.ts CHANGED
@@ -4,5 +4,6 @@ import { SpectrumTagGroupProps } from "@react-types/tag";
4
4
  export const TagGroup: <T>(props: SpectrumTagGroupProps<T> & {
5
5
  ref?: DOMRef<HTMLDivElement>;
6
6
  }) => ReactElement;
7
+ export { Item } from '@react-stately/collections';
7
8
 
8
9
  //# sourceMappingURL=types.d.ts.map
package/dist/types.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"mappings":";;;ACwHA,OAAA,MAAM;UAAuF,OAAO,cAAc,CAAC;MAAM,YAAY,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\n/// <reference types=\"css-module-types\" />\n\nexport * from './TagGroup';\n"],"names":[],"version":3,"file":"types.d.ts.map"}
1
+ {"mappings":";;;AC0GA,OAAA,MAAM;UAAuF,OAAO,cAAc,CAAC;MAAM,YAAY,CAAC;AC7FtI,OAAO,EAAC,IAAI,EAAC,MAAM,4BAA4B,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';\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.1502+bacfedcaa",
3
+ "version": "3.0.0-nightly.1505+378582d60",
4
4
  "description": "Spectrum UI components in React",
5
5
  "license": "Apache-2.0",
6
6
  "main": "dist/main.js",
@@ -32,24 +32,24 @@
32
32
  },
33
33
  "dependencies": {
34
34
  "@babel/runtime": "^7.6.2",
35
- "@react-aria/focus": "3.0.0-nightly.1502+bacfedcaa",
36
- "@react-aria/grid": "3.2.6-nightly.3201+bacfedcaa",
37
- "@react-aria/i18n": "3.0.0-nightly.1502+bacfedcaa",
38
- "@react-aria/interactions": "3.0.0-nightly.1502+bacfedcaa",
39
- "@react-aria/tag": "3.0.0-nightly.1502+bacfedcaa",
40
- "@react-aria/utils": "3.0.0-nightly.1502+bacfedcaa",
41
- "@react-spectrum/button": "3.0.0-nightly.1502+bacfedcaa",
42
- "@react-spectrum/text": "3.1.8-nightly.3201+bacfedcaa",
43
- "@react-spectrum/utils": "3.0.0-nightly.1502+bacfedcaa",
44
- "@react-stately/collections": "3.0.0-nightly.1502+bacfedcaa",
45
- "@react-stately/grid": "3.1.4-nightly.3201+bacfedcaa",
46
- "@react-stately/list": "3.4.5-nightly.3201+bacfedcaa",
47
- "@react-types/shared": "3.0.0-nightly.1502+bacfedcaa",
48
- "@react-types/tag": "3.0.0-nightly.1502+bacfedcaa",
49
- "@spectrum-icons/workflow": "3.0.0-nightly.1502+bacfedcaa"
35
+ "@react-aria/focus": "3.0.0-nightly.1505+378582d60",
36
+ "@react-aria/grid": "3.2.6-nightly.3204+378582d60",
37
+ "@react-aria/i18n": "3.0.0-nightly.1505+378582d60",
38
+ "@react-aria/interactions": "3.0.0-nightly.1505+378582d60",
39
+ "@react-aria/tag": "3.0.0-nightly.1505+378582d60",
40
+ "@react-aria/utils": "3.0.0-nightly.1505+378582d60",
41
+ "@react-spectrum/button": "3.0.0-nightly.1505+378582d60",
42
+ "@react-spectrum/text": "3.1.8-nightly.3204+378582d60",
43
+ "@react-spectrum/utils": "3.0.0-nightly.1505+378582d60",
44
+ "@react-stately/collections": "3.0.0-nightly.1505+378582d60",
45
+ "@react-stately/grid": "3.1.4-nightly.3204+378582d60",
46
+ "@react-stately/list": "3.4.5-nightly.3204+378582d60",
47
+ "@react-types/shared": "3.0.0-nightly.1505+378582d60",
48
+ "@react-types/tag": "3.0.0-nightly.1505+378582d60",
49
+ "@spectrum-icons/workflow": "3.0.0-nightly.1505+378582d60"
50
50
  },
51
51
  "devDependencies": {
52
- "@adobe/spectrum-css-temp": "3.0.0-nightly.1502+bacfedcaa"
52
+ "@adobe/spectrum-css-temp": "3.0.0-nightly.1505+378582d60"
53
53
  },
54
54
  "peerDependencies": {
55
55
  "@react-spectrum/provider": "^3.0.0",
@@ -58,5 +58,5 @@
58
58
  "publishConfig": {
59
59
  "access": "public"
60
60
  },
61
- "gitHead": "bacfedcaa8ffbc8a750cca94c5eca77895db93b9"
61
+ "gitHead": "378582d606bf55c9937d74c82eb5a9f4fcb82018"
62
62
  }
package/src/Tag.tsx CHANGED
@@ -36,7 +36,6 @@ export function Tag<T>(props: SpectrumTagProps<T>) {
36
36
  let {styleProps} = useStyleProps(otherProps);
37
37
  let {hoverProps, isHovered} = useHover({isDisabled});
38
38
  let {isFocused, isFocusVisible, focusProps} = useFocusRing({within: true});
39
- let labelRef = useRef();
40
39
  let tagRef = useRef();
41
40
  let tagRowRef = useRef();
42
41
  let {clearButtonProps, labelProps, tagProps, tagRowProps} = useTag({
@@ -52,10 +51,10 @@ export function Tag<T>(props: SpectrumTagProps<T>) {
52
51
 
53
52
  return (
54
53
  <div
55
- {...tagRowProps}>
54
+ {...tagRowProps}
55
+ ref={tagRowRef}>
56
56
  <div
57
57
  {...mergeProps(tagProps, hoverProps, focusProps)}
58
- role="gridcell"
59
58
  className={classNames(
60
59
  styles,
61
60
  'spectrum-Tags-item',
@@ -67,14 +66,15 @@ export function Tag<T>(props: SpectrumTagProps<T>) {
67
66
  'is-hovered': isHovered
68
67
  },
69
68
  styleProps.className
70
- )}>
69
+ )}
70
+ ref={tagRef}>
71
71
  <SlotProvider
72
72
  slots={{
73
- tagLabel: {UNSAFE_className: classNames(styles, 'spectrum-Tag-label')},
74
73
  icon: {UNSAFE_className: classNames(styles, 'spectrum-Tag-icon'), size: 'XS'},
75
- text: {UNSAFE_className: classNames(styles, 'spectrum-Tag-content', {'tags-removable': isRemovable})}
74
+ text: {UNSAFE_className: classNames(styles, 'spectrum-Tag-content', {'tags-removable': isRemovable}), ...labelProps}
76
75
  }}>
77
- {typeof children === 'string' ? <div ref={labelRef} {...labelProps}><Text>{children}</Text></div> : children}
76
+
77
+ {typeof children === 'string' ? <Text>{children}</Text> : children}
78
78
  {isRemovable && <TagRemoveButton item={item} {...clearButtonProps} UNSAFE_className={classNames(styles, 'spectrum-Tag-action')} />}
79
79
  </SlotProvider>
80
80
  </div>
package/src/TagGroup.tsx CHANGED
@@ -38,7 +38,7 @@ function TagGroup<T extends object>(props: SpectrumTagGroupProps<T>, ref: DOMRef
38
38
  let {direction} = useLocale();
39
39
  let listState = useListState(props);
40
40
  let gridCollection = useMemo(() => new GridCollection({
41
- columnCount: isRemovable ? 2 : 1,
41
+ columnCount: 1, // unused, but required for grid collections
42
42
  items: [...listState.collection].map(item => {
43
43
  let childNodes = [{
44
44
  ...item,
@@ -46,21 +46,6 @@ function TagGroup<T extends object>(props: SpectrumTagGroupProps<T>, ref: DOMRef
46
46
  type: 'cell'
47
47
  }];
48
48
 
49
- // add column of clear buttons if removable
50
- if (isRemovable) {
51
- childNodes.push({
52
- key: `remove-${item.key}`,
53
- type: 'cell',
54
- index: 1,
55
- value: null,
56
- level: 0,
57
- rendered: null,
58
- textValue: item.textValue, // TODO localize?
59
- hasChildNodes: false,
60
- childNodes: []
61
- });
62
- }
63
-
64
49
  return {
65
50
  type: 'item',
66
51
  childNodes
@@ -87,7 +72,7 @@ function TagGroup<T extends object>(props: SpectrumTagGroupProps<T>, ref: DOMRef
87
72
 
88
73
  // Don't want the grid to be focusable or accessible via keyboard
89
74
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
90
- let {tabIndex, ...otherGridProps} = gridProps;
75
+ let {tabIndex, role, ...otherGridProps} = gridProps;
91
76
  return (
92
77
  <div
93
78
  {...mergeProps(styleProps, tagGroupProps, otherGridProps)}
@@ -101,6 +86,7 @@ function TagGroup<T extends object>(props: SpectrumTagGroupProps<T>, ref: DOMRef
101
86
  styleProps.className
102
87
  )
103
88
  }
89
+ role={state.collection.size ? 'grid' : null}
104
90
  ref={domRef}>
105
91
  {[...gridCollection].map(item => (
106
92
  <Tag
package/src/index.ts CHANGED
@@ -10,6 +10,5 @@
10
10
  * governing permissions and limitations under the License.
11
11
  */
12
12
 
13
- /// <reference types="css-module-types" />
14
-
15
- export * from './TagGroup';
13
+ export {TagGroup} from './TagGroup';
14
+ export {Item} from '@react-stately/collections';