@react-spectrum/tag 3.0.0-alpha.1 → 3.0.0-alpha.10
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.
- package/dist/main.css +1 -1
- package/dist/main.js +134 -166
- package/dist/main.js.map +1 -1
- package/dist/module.js +127 -145
- package/dist/module.js.map +1 -1
- package/dist/types.d.ts +2 -0
- package/dist/types.d.ts.map +1 -1
- package/package.json +18 -18
- package/src/Tag.tsx +7 -7
- package/src/TagGroup.tsx +3 -17
- package/src/index.ts +3 -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}.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: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-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,128 +1,109 @@
|
|
|
1
1
|
require("./main.css");
|
|
2
|
-
var $
|
|
3
|
-
var $
|
|
4
|
-
var $
|
|
5
|
-
var $
|
|
6
|
-
var $
|
|
7
|
-
var $
|
|
8
|
-
var $
|
|
9
|
-
var $
|
|
10
|
-
var $
|
|
11
|
-
var $
|
|
12
|
-
var $
|
|
13
|
-
var $
|
|
14
|
-
var $
|
|
2
|
+
var $dTV3V$reactstatelycollections = require("@react-stately/collections");
|
|
3
|
+
var $dTV3V$reactspectrumutils = require("@react-spectrum/utils");
|
|
4
|
+
var $dTV3V$reactstatelygrid = require("@react-stately/grid");
|
|
5
|
+
var $dTV3V$reactariautils = require("@react-aria/utils");
|
|
6
|
+
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
|
+
var $dTV3V$reactspectrumprovider = require("@react-spectrum/provider");
|
|
12
|
+
var $dTV3V$reactspectrumbutton = require("@react-spectrum/button");
|
|
13
|
+
var $dTV3V$reactspectrumtext = require("@react-spectrum/text");
|
|
14
|
+
var $dTV3V$reactariafocus = require("@react-aria/focus");
|
|
15
|
+
var $dTV3V$reactariainteractions = require("@react-aria/interactions");
|
|
15
16
|
|
|
16
|
-
function $parcel$
|
|
17
|
-
Object.
|
|
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 $e6b76ce04f7077be$exports = {};
|
|
39
|
-
|
|
40
|
-
$parcel$export($e6b76ce04f7077be$exports, "TagGroup", () => $e6b76ce04f7077be$export$67ea30858aaf75e3);
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
var $0cba5287e7bab019$exports = {};
|
|
46
|
-
|
|
47
|
-
$parcel$export($0cba5287e7bab019$exports, "spectrum-Tags", () => $0cba5287e7bab019$export$eb7e80013a1212da, (v) => $0cba5287e7bab019$export$eb7e80013a1212da = v);
|
|
48
|
-
$parcel$export($0cba5287e7bab019$exports, "spectrum-Tags-item", () => $0cba5287e7bab019$export$950d8dc0a3751654, (v) => $0cba5287e7bab019$export$950d8dc0a3751654 = v);
|
|
49
|
-
$parcel$export($0cba5287e7bab019$exports, "is-disabled", () => $0cba5287e7bab019$export$d35bc1e505d1ebbf, (v) => $0cba5287e7bab019$export$d35bc1e505d1ebbf = v);
|
|
50
|
-
$parcel$export($0cba5287e7bab019$exports, "spectrum-Tag-icon", () => $0cba5287e7bab019$export$21f5254139e14871, (v) => $0cba5287e7bab019$export$21f5254139e14871 = v);
|
|
51
|
-
$parcel$export($0cba5287e7bab019$exports, "spectrum-Tag-content", () => $0cba5287e7bab019$export$d281c967f4ee071e, (v) => $0cba5287e7bab019$export$d281c967f4ee071e = v);
|
|
52
|
-
$parcel$export($0cba5287e7bab019$exports, "tags-removable", () => $0cba5287e7bab019$export$7427262f66a3b803, (v) => $0cba5287e7bab019$export$7427262f66a3b803 = v);
|
|
53
|
-
$parcel$export($0cba5287e7bab019$exports, "spectrum-Tag-label", () => $0cba5287e7bab019$export$7ea9e20fd4ac0076, (v) => $0cba5287e7bab019$export$7ea9e20fd4ac0076 = v);
|
|
54
|
-
$parcel$export($0cba5287e7bab019$exports, "spectrum-Tag-action", () => $0cba5287e7bab019$export$c5a1243e33faa2d4, (v) => $0cba5287e7bab019$export$c5a1243e33faa2d4 = v);
|
|
55
|
-
$parcel$export($0cba5287e7bab019$exports, "is-hovered", () => $0cba5287e7bab019$export$b8813cd5d7824ce7, (v) => $0cba5287e7bab019$export$b8813cd5d7824ce7 = v);
|
|
56
|
-
$parcel$export($0cba5287e7bab019$exports, "focus-ring", () => $0cba5287e7bab019$export$f39a09f249340e2a, (v) => $0cba5287e7bab019$export$f39a09f249340e2a = v);
|
|
57
|
-
$parcel$export($0cba5287e7bab019$exports, "is-selected", () => $0cba5287e7bab019$export$1e0fb04f31d3c22a, (v) => $0cba5287e7bab019$export$1e0fb04f31d3c22a = v);
|
|
58
|
-
$parcel$export($0cba5287e7bab019$exports, "is-invalid", () => $0cba5287e7bab019$export$14a30de2866685fa, (v) => $0cba5287e7bab019$export$14a30de2866685fa = v);
|
|
59
|
-
$parcel$export($0cba5287e7bab019$exports, "spectrum-Tags-itemIcon", () => $0cba5287e7bab019$export$8c615c557fdf3d9c, (v) => $0cba5287e7bab019$export$8c615c557fdf3d9c = v);
|
|
60
|
-
$parcel$export($0cba5287e7bab019$exports, "spectrum-Tags-itemLabel", () => $0cba5287e7bab019$export$23caf26adee41b84, (v) => $0cba5287e7bab019$export$23caf26adee41b84 = v);
|
|
61
|
-
$parcel$export($0cba5287e7bab019$exports, "spectrum-Tags-itemClearButton", () => $0cba5287e7bab019$export$90881dd581d6be55, (v) => $0cba5287e7bab019$export$90881dd581d6be55 = v);
|
|
62
|
-
$parcel$export($0cba5287e7bab019$exports, "spectrum-Avatar", () => $0cba5287e7bab019$export$2e049b8d031600fb, (v) => $0cba5287e7bab019$export$2e049b8d031600fb = v);
|
|
63
|
-
$parcel$export($0cba5287e7bab019$exports, "spectrum-Tags-item--removable", () => $0cba5287e7bab019$export$c1666977f4e14f87, (v) => $0cba5287e7bab019$export$c1666977f4e14f87 = v);
|
|
64
|
-
$parcel$export($0cba5287e7bab019$exports, "is-focused", () => $0cba5287e7bab019$export$e7dc768d35940237, (v) => $0cba5287e7bab019$export$e7dc768d35940237 = v);
|
|
65
|
-
var $0cba5287e7bab019$export$eb7e80013a1212da;
|
|
66
|
-
var $0cba5287e7bab019$export$950d8dc0a3751654;
|
|
67
|
-
var $0cba5287e7bab019$export$d35bc1e505d1ebbf;
|
|
68
|
-
var $0cba5287e7bab019$export$21f5254139e14871;
|
|
69
|
-
var $0cba5287e7bab019$export$d281c967f4ee071e;
|
|
70
|
-
var $0cba5287e7bab019$export$7427262f66a3b803;
|
|
71
|
-
var $0cba5287e7bab019$export$7ea9e20fd4ac0076;
|
|
72
|
-
var $0cba5287e7bab019$export$c5a1243e33faa2d4;
|
|
73
|
-
var $0cba5287e7bab019$export$b8813cd5d7824ce7;
|
|
74
|
-
var $0cba5287e7bab019$export$f39a09f249340e2a;
|
|
75
|
-
var $0cba5287e7bab019$export$1e0fb04f31d3c22a;
|
|
76
|
-
var $0cba5287e7bab019$export$14a30de2866685fa;
|
|
77
|
-
var $0cba5287e7bab019$export$8c615c557fdf3d9c;
|
|
78
|
-
var $0cba5287e7bab019$export$23caf26adee41b84;
|
|
79
|
-
var $0cba5287e7bab019$export$90881dd581d6be55;
|
|
80
|
-
var $0cba5287e7bab019$export$2e049b8d031600fb;
|
|
81
|
-
var $0cba5287e7bab019$export$c1666977f4e14f87;
|
|
82
|
-
var $0cba5287e7bab019$export$e7dc768d35940237;
|
|
83
|
-
$0cba5287e7bab019$export$eb7e80013a1212da = "spectrum-Tags_8407eb";
|
|
84
|
-
$0cba5287e7bab019$export$950d8dc0a3751654 = "spectrum-Tags-item_8407eb";
|
|
85
|
-
$0cba5287e7bab019$export$d35bc1e505d1ebbf = "is-disabled_8407eb";
|
|
86
|
-
$0cba5287e7bab019$export$21f5254139e14871 = "spectrum-Tag-icon_8407eb";
|
|
87
|
-
$0cba5287e7bab019$export$d281c967f4ee071e = "spectrum-Tag-content_8407eb";
|
|
88
|
-
$0cba5287e7bab019$export$7427262f66a3b803 = "tags-removable_8407eb";
|
|
89
|
-
$0cba5287e7bab019$export$7ea9e20fd4ac0076 = "spectrum-Tag-label_8407eb";
|
|
90
|
-
$0cba5287e7bab019$export$c5a1243e33faa2d4 = "spectrum-Tag-action_8407eb";
|
|
91
|
-
$0cba5287e7bab019$export$b8813cd5d7824ce7 = "is-hovered_8407eb";
|
|
92
|
-
$0cba5287e7bab019$export$f39a09f249340e2a = "focus-ring_8407eb";
|
|
93
|
-
$0cba5287e7bab019$export$1e0fb04f31d3c22a = "is-selected_8407eb";
|
|
94
|
-
$0cba5287e7bab019$export$14a30de2866685fa = "is-invalid_8407eb";
|
|
95
|
-
$0cba5287e7bab019$export$8c615c557fdf3d9c = "spectrum-Tags-itemIcon_8407eb";
|
|
96
|
-
$0cba5287e7bab019$export$23caf26adee41b84 = "spectrum-Tags-itemLabel_8407eb";
|
|
97
|
-
$0cba5287e7bab019$export$90881dd581d6be55 = "spectrum-Tags-itemClearButton_8407eb";
|
|
98
|
-
$0cba5287e7bab019$export$2e049b8d031600fb = "spectrum-Avatar_8407eb";
|
|
99
|
-
$0cba5287e7bab019$export$c1666977f4e14f87 = "spectrum-Tags-item--removable_8407eb";
|
|
100
|
-
$0cba5287e7bab019$export$e7dc768d35940237 = "is-focused_8407eb";
|
|
101
23
|
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
24
|
+
$parcel$export(module.exports, "TagGroup", () => $e7b72d8874e98cd4$export$67ea30858aaf75e3);
|
|
25
|
+
$parcel$export(module.exports, "Item", () => $dTV3V$reactstatelycollections.Item);
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
|
|
30
|
+
var $ed889f8f1f091fc8$exports = {};
|
|
31
|
+
|
|
32
|
+
$parcel$export($ed889f8f1f091fc8$exports, "spectrum-Tags", () => $ed889f8f1f091fc8$export$eb7e80013a1212da, (v) => $ed889f8f1f091fc8$export$eb7e80013a1212da = v);
|
|
33
|
+
$parcel$export($ed889f8f1f091fc8$exports, "spectrum-Tags-item", () => $ed889f8f1f091fc8$export$950d8dc0a3751654, (v) => $ed889f8f1f091fc8$export$950d8dc0a3751654 = v);
|
|
34
|
+
$parcel$export($ed889f8f1f091fc8$exports, "is-disabled", () => $ed889f8f1f091fc8$export$d35bc1e505d1ebbf, (v) => $ed889f8f1f091fc8$export$d35bc1e505d1ebbf = v);
|
|
35
|
+
$parcel$export($ed889f8f1f091fc8$exports, "spectrum-Tag-action", () => $ed889f8f1f091fc8$export$c5a1243e33faa2d4, (v) => $ed889f8f1f091fc8$export$c5a1243e33faa2d4 = v);
|
|
36
|
+
$parcel$export($ed889f8f1f091fc8$exports, "spectrum-Tag-icon", () => $ed889f8f1f091fc8$export$21f5254139e14871, (v) => $ed889f8f1f091fc8$export$21f5254139e14871 = v);
|
|
37
|
+
$parcel$export($ed889f8f1f091fc8$exports, "spectrum-Tag-content", () => $ed889f8f1f091fc8$export$d281c967f4ee071e, (v) => $ed889f8f1f091fc8$export$d281c967f4ee071e = v);
|
|
38
|
+
$parcel$export($ed889f8f1f091fc8$exports, "tags-removable", () => $ed889f8f1f091fc8$export$7427262f66a3b803, (v) => $ed889f8f1f091fc8$export$7427262f66a3b803 = v);
|
|
39
|
+
$parcel$export($ed889f8f1f091fc8$exports, "is-hovered", () => $ed889f8f1f091fc8$export$b8813cd5d7824ce7, (v) => $ed889f8f1f091fc8$export$b8813cd5d7824ce7 = v);
|
|
40
|
+
$parcel$export($ed889f8f1f091fc8$exports, "focus-ring", () => $ed889f8f1f091fc8$export$f39a09f249340e2a, (v) => $ed889f8f1f091fc8$export$f39a09f249340e2a = v);
|
|
41
|
+
$parcel$export($ed889f8f1f091fc8$exports, "is-selected", () => $ed889f8f1f091fc8$export$1e0fb04f31d3c22a, (v) => $ed889f8f1f091fc8$export$1e0fb04f31d3c22a = v);
|
|
42
|
+
$parcel$export($ed889f8f1f091fc8$exports, "is-invalid", () => $ed889f8f1f091fc8$export$14a30de2866685fa, (v) => $ed889f8f1f091fc8$export$14a30de2866685fa = v);
|
|
43
|
+
$parcel$export($ed889f8f1f091fc8$exports, "spectrum-Tags-itemIcon", () => $ed889f8f1f091fc8$export$8c615c557fdf3d9c, (v) => $ed889f8f1f091fc8$export$8c615c557fdf3d9c = v);
|
|
44
|
+
$parcel$export($ed889f8f1f091fc8$exports, "spectrum-Tags-itemLabel", () => $ed889f8f1f091fc8$export$23caf26adee41b84, (v) => $ed889f8f1f091fc8$export$23caf26adee41b84 = v);
|
|
45
|
+
$parcel$export($ed889f8f1f091fc8$exports, "spectrum-Tags-itemClearButton", () => $ed889f8f1f091fc8$export$90881dd581d6be55, (v) => $ed889f8f1f091fc8$export$90881dd581d6be55 = v);
|
|
46
|
+
$parcel$export($ed889f8f1f091fc8$exports, "spectrum-Avatar", () => $ed889f8f1f091fc8$export$2e049b8d031600fb, (v) => $ed889f8f1f091fc8$export$2e049b8d031600fb = v);
|
|
47
|
+
$parcel$export($ed889f8f1f091fc8$exports, "spectrum-Tags-item--removable", () => $ed889f8f1f091fc8$export$c1666977f4e14f87, (v) => $ed889f8f1f091fc8$export$c1666977f4e14f87 = v);
|
|
48
|
+
$parcel$export($ed889f8f1f091fc8$exports, "is-focused", () => $ed889f8f1f091fc8$export$e7dc768d35940237, (v) => $ed889f8f1f091fc8$export$e7dc768d35940237 = v);
|
|
49
|
+
var $ed889f8f1f091fc8$export$eb7e80013a1212da;
|
|
50
|
+
var $ed889f8f1f091fc8$export$950d8dc0a3751654;
|
|
51
|
+
var $ed889f8f1f091fc8$export$d35bc1e505d1ebbf;
|
|
52
|
+
var $ed889f8f1f091fc8$export$c5a1243e33faa2d4;
|
|
53
|
+
var $ed889f8f1f091fc8$export$21f5254139e14871;
|
|
54
|
+
var $ed889f8f1f091fc8$export$d281c967f4ee071e;
|
|
55
|
+
var $ed889f8f1f091fc8$export$7427262f66a3b803;
|
|
56
|
+
var $ed889f8f1f091fc8$export$b8813cd5d7824ce7;
|
|
57
|
+
var $ed889f8f1f091fc8$export$f39a09f249340e2a;
|
|
58
|
+
var $ed889f8f1f091fc8$export$1e0fb04f31d3c22a;
|
|
59
|
+
var $ed889f8f1f091fc8$export$14a30de2866685fa;
|
|
60
|
+
var $ed889f8f1f091fc8$export$8c615c557fdf3d9c;
|
|
61
|
+
var $ed889f8f1f091fc8$export$23caf26adee41b84;
|
|
62
|
+
var $ed889f8f1f091fc8$export$90881dd581d6be55;
|
|
63
|
+
var $ed889f8f1f091fc8$export$2e049b8d031600fb;
|
|
64
|
+
var $ed889f8f1f091fc8$export$c1666977f4e14f87;
|
|
65
|
+
var $ed889f8f1f091fc8$export$e7dc768d35940237;
|
|
66
|
+
$ed889f8f1f091fc8$export$eb7e80013a1212da = "spectrum-Tags_8407eb";
|
|
67
|
+
$ed889f8f1f091fc8$export$950d8dc0a3751654 = "spectrum-Tags-item_8407eb";
|
|
68
|
+
$ed889f8f1f091fc8$export$d35bc1e505d1ebbf = "is-disabled_8407eb";
|
|
69
|
+
$ed889f8f1f091fc8$export$c5a1243e33faa2d4 = "spectrum-Tag-action_8407eb";
|
|
70
|
+
$ed889f8f1f091fc8$export$21f5254139e14871 = "spectrum-Tag-icon_8407eb";
|
|
71
|
+
$ed889f8f1f091fc8$export$d281c967f4ee071e = "spectrum-Tag-content_8407eb";
|
|
72
|
+
$ed889f8f1f091fc8$export$7427262f66a3b803 = "tags-removable_8407eb";
|
|
73
|
+
$ed889f8f1f091fc8$export$b8813cd5d7824ce7 = "is-hovered_8407eb";
|
|
74
|
+
$ed889f8f1f091fc8$export$f39a09f249340e2a = "focus-ring_8407eb";
|
|
75
|
+
$ed889f8f1f091fc8$export$1e0fb04f31d3c22a = "is-selected_8407eb";
|
|
76
|
+
$ed889f8f1f091fc8$export$14a30de2866685fa = "is-invalid_8407eb";
|
|
77
|
+
$ed889f8f1f091fc8$export$8c615c557fdf3d9c = "spectrum-Tags-itemIcon_8407eb";
|
|
78
|
+
$ed889f8f1f091fc8$export$23caf26adee41b84 = "spectrum-Tags-itemLabel_8407eb";
|
|
79
|
+
$ed889f8f1f091fc8$export$90881dd581d6be55 = "spectrum-Tags-itemClearButton_8407eb";
|
|
80
|
+
$ed889f8f1f091fc8$export$2e049b8d031600fb = "spectrum-Avatar_8407eb";
|
|
81
|
+
$ed889f8f1f091fc8$export$c1666977f4e14f87 = "spectrum-Tags-item--removable_8407eb";
|
|
82
|
+
$ed889f8f1f091fc8$export$e7dc768d35940237 = "is-focused_8407eb";
|
|
83
|
+
|
|
84
|
+
|
|
85
|
+
|
|
86
|
+
|
|
87
|
+
|
|
88
|
+
|
|
89
|
+
|
|
90
|
+
|
|
91
|
+
|
|
92
|
+
|
|
93
|
+
|
|
94
|
+
function $dd2c5d00108c1840$export$3288d34c523a1192(props) {
|
|
113
95
|
const { children: children , isDisabled: isDisabled , isRemovable: isRemovable , item: item , state: state , onRemove: onRemove , ...otherProps } = props;
|
|
114
96
|
// @ts-ignore
|
|
115
|
-
let { styleProps: styleProps } = $
|
|
116
|
-
let { hoverProps: hoverProps , isHovered: isHovered } = $
|
|
97
|
+
let { styleProps: styleProps } = $dTV3V$reactspectrumutils.useStyleProps(otherProps);
|
|
98
|
+
let { hoverProps: hoverProps , isHovered: isHovered } = $dTV3V$reactariainteractions.useHover({
|
|
117
99
|
isDisabled: isDisabled
|
|
118
100
|
});
|
|
119
|
-
let { isFocused: isFocused , isFocusVisible: isFocusVisible , focusProps: focusProps } = $
|
|
101
|
+
let { isFocused: isFocused , isFocusVisible: isFocusVisible , focusProps: focusProps } = $dTV3V$reactariafocus.useFocusRing({
|
|
120
102
|
within: true
|
|
121
103
|
});
|
|
122
|
-
let
|
|
123
|
-
let
|
|
124
|
-
let
|
|
125
|
-
let { clearButtonProps: clearButtonProps , labelProps: labelProps , tagProps: tagProps , tagRowProps: tagRowProps } = $ghvgM$reactariatag.useTag({
|
|
104
|
+
let tagRef = $dTV3V$react.useRef();
|
|
105
|
+
let tagRowRef = $dTV3V$react.useRef();
|
|
106
|
+
let { clearButtonProps: clearButtonProps , labelProps: labelProps , tagProps: tagProps , tagRowProps: tagRowProps } = $dTV3V$reactariatag.useTag({
|
|
126
107
|
...props,
|
|
127
108
|
isDisabled: isDisabled,
|
|
128
109
|
isFocused: isFocused,
|
|
@@ -132,48 +113,46 @@ function $906ab035e46a13e2$export$3288d34c523a1192(props) {
|
|
|
132
113
|
tagRef: tagRef,
|
|
133
114
|
tagRowRef: tagRowRef
|
|
134
115
|
}, state);
|
|
135
|
-
return(/*#__PURE__*/ ($parcel$interopDefault($
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
116
|
+
return(/*#__PURE__*/ ($parcel$interopDefault($dTV3V$react)).createElement("div", {
|
|
117
|
+
...tagRowProps,
|
|
118
|
+
ref: tagRowRef
|
|
119
|
+
}, /*#__PURE__*/ ($parcel$interopDefault($dTV3V$react)).createElement("div", {
|
|
120
|
+
...$dTV3V$reactariautils.mergeProps(tagProps, hoverProps, focusProps),
|
|
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)
|
|
145
|
-
|
|
127
|
+
}, styleProps.className),
|
|
128
|
+
ref: tagRef
|
|
129
|
+
}, /*#__PURE__*/ ($parcel$interopDefault($dTV3V$react)).createElement($dTV3V$reactspectrumutils.SlotProvider, {
|
|
146
130
|
slots: {
|
|
147
|
-
tagLabel: {
|
|
148
|
-
UNSAFE_className: $ghvgM$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($0cba5287e7bab019$exports)), 'spectrum-Tag-label')
|
|
149
|
-
},
|
|
150
131
|
icon: {
|
|
151
|
-
UNSAFE_className: $
|
|
132
|
+
UNSAFE_className: $dTV3V$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($ed889f8f1f091fc8$exports)), 'spectrum-Tag-icon'),
|
|
152
133
|
size: 'XS'
|
|
153
134
|
},
|
|
154
135
|
text: {
|
|
155
|
-
UNSAFE_className: $
|
|
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($
|
|
161
|
-
ref: labelRef,
|
|
162
|
-
...labelProps
|
|
163
|
-
}, /*#__PURE__*/ ($parcel$interopDefault($ghvgM$react)).createElement($ghvgM$reactspectrumtext.Text, null, children)) : children, isRemovable && /*#__PURE__*/ ($parcel$interopDefault($ghvgM$react)).createElement($906ab035e46a13e2$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
|
-
UNSAFE_className: $
|
|
145
|
+
UNSAFE_className: $dTV3V$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($ed889f8f1f091fc8$exports)), 'spectrum-Tag-action')
|
|
167
146
|
})))));
|
|
168
147
|
}
|
|
169
|
-
function $
|
|
170
|
-
props = $
|
|
171
|
-
let { styleProps: styleProps } = $
|
|
172
|
-
let clearBtnRef = $
|
|
173
|
-
return(/*#__PURE__*/ ($parcel$interopDefault($
|
|
148
|
+
function $dd2c5d00108c1840$var$TagRemoveButton(props) {
|
|
149
|
+
props = $dTV3V$reactspectrumutils.useSlotProps(props, 'tagRemoveButton');
|
|
150
|
+
let { styleProps: styleProps } = $dTV3V$reactspectrumutils.useStyleProps(props);
|
|
151
|
+
let clearBtnRef = $dTV3V$react.useRef();
|
|
152
|
+
return(/*#__PURE__*/ ($parcel$interopDefault($dTV3V$react)).createElement("span", {
|
|
174
153
|
...styleProps,
|
|
175
154
|
ref: clearBtnRef
|
|
176
|
-
}, /*#__PURE__*/ ($parcel$interopDefault($
|
|
155
|
+
}, /*#__PURE__*/ ($parcel$interopDefault($dTV3V$react)).createElement($dTV3V$reactspectrumbutton.ClearButton, {
|
|
177
156
|
preventFocus: true,
|
|
178
157
|
...props
|
|
179
158
|
})));
|
|
@@ -185,15 +164,15 @@ function $906ab035e46a13e2$var$TagRemoveButton(props) {
|
|
|
185
164
|
|
|
186
165
|
|
|
187
166
|
|
|
188
|
-
function $
|
|
189
|
-
props = $
|
|
167
|
+
function $e7b72d8874e98cd4$var$TagGroup(props, ref1) {
|
|
168
|
+
props = $dTV3V$reactspectrumprovider.useProviderProps(props);
|
|
190
169
|
let { isDisabled: isDisabled , isRemovable: isRemovable , onRemove: onRemove , ...otherProps } = props;
|
|
191
|
-
let domRef = $
|
|
192
|
-
let { styleProps: styleProps } = $
|
|
193
|
-
let { direction: direction } = $
|
|
194
|
-
let listState = $
|
|
195
|
-
let gridCollection = $
|
|
196
|
-
columnCount:
|
|
170
|
+
let domRef = $dTV3V$reactspectrumutils.useDOMRef(ref1);
|
|
171
|
+
let { styleProps: styleProps } = $dTV3V$reactspectrumutils.useStyleProps(otherProps);
|
|
172
|
+
let { direction: direction } = $dTV3V$reactariai18n.useLocale();
|
|
173
|
+
let listState = $dTV3V$reactstatelylist.useListState(props);
|
|
174
|
+
let gridCollection = $dTV3V$react.useMemo(()=>new $dTV3V$reactstatelygrid.GridCollection({
|
|
175
|
+
columnCount: 1,
|
|
197
176
|
items: [
|
|
198
177
|
...listState.collection
|
|
199
178
|
].map((item)=>{
|
|
@@ -204,18 +183,6 @@ function $e6b76ce04f7077be$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
|
|
@@ -226,37 +193,38 @@ function $e6b76ce04f7077be$var$TagGroup(props, ref1) {
|
|
|
226
193
|
listState.collection,
|
|
227
194
|
isRemovable
|
|
228
195
|
]);
|
|
229
|
-
let state = $
|
|
196
|
+
let state = $dTV3V$reactstatelygrid.useGridState({
|
|
230
197
|
...props,
|
|
231
198
|
collection: gridCollection,
|
|
232
199
|
focusMode: 'cell'
|
|
233
200
|
});
|
|
234
|
-
let keyboardDelegate = new $
|
|
201
|
+
let keyboardDelegate = new $dTV3V$reactariatag.TagKeyboardDelegate({
|
|
235
202
|
collection: state.collection,
|
|
236
203
|
disabledKeys: state.disabledKeys,
|
|
237
204
|
ref: domRef,
|
|
238
205
|
direction: direction,
|
|
239
206
|
focusMode: 'cell'
|
|
240
207
|
});
|
|
241
|
-
let { gridProps: gridProps } = $
|
|
208
|
+
let { gridProps: gridProps } = $dTV3V$reactariagrid.useGrid({
|
|
242
209
|
...props,
|
|
243
210
|
keyboardDelegate: keyboardDelegate
|
|
244
211
|
}, state, domRef);
|
|
245
|
-
const { tagGroupProps: tagGroupProps } = $
|
|
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;
|
|
249
|
-
return(/*#__PURE__*/ ($parcel$interopDefault($
|
|
250
|
-
...$
|
|
251
|
-
className: $
|
|
215
|
+
let { tabIndex: tabIndex , role: role , ...otherGridProps } = gridProps;
|
|
216
|
+
return(/*#__PURE__*/ ($parcel$interopDefault($dTV3V$react)).createElement("div", {
|
|
217
|
+
...$dTV3V$reactariautils.mergeProps(styleProps, tagGroupProps, otherGridProps),
|
|
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
|
|
257
225
|
].map((item)=>{
|
|
258
226
|
var ref;
|
|
259
|
-
return(/*#__PURE__*/ ($parcel$interopDefault($
|
|
227
|
+
return(/*#__PURE__*/ ($parcel$interopDefault($dTV3V$react)).createElement($dd2c5d00108c1840$export$3288d34c523a1192, {
|
|
260
228
|
...item.childNodes[0].props,
|
|
261
229
|
key: item.key,
|
|
262
230
|
item: item,
|
|
@@ -267,10 +235,10 @@ function $e6b76ce04f7077be$var$TagGroup(props, ref1) {
|
|
|
267
235
|
}, item.childNodes[0].rendered));
|
|
268
236
|
})));
|
|
269
237
|
}
|
|
270
|
-
const $
|
|
238
|
+
const $e7b72d8874e98cd4$export$67ea30858aaf75e3 = /*#__PURE__*/ ($parcel$interopDefault($dTV3V$react)).forwardRef($e7b72d8874e98cd4$var$TagGroup);
|
|
239
|
+
|
|
271
240
|
|
|
272
241
|
|
|
273
|
-
$parcel$exportWildcard(module.exports, $e6b76ce04f7077be$exports);
|
|
274
242
|
|
|
275
243
|
|
|
276
244
|
//# sourceMappingURL=main.js.map
|
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\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';\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 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,17 +1,18 @@
|
|
|
1
1
|
import "./main.css";
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
9
|
-
import {
|
|
10
|
-
import {
|
|
11
|
-
import {
|
|
12
|
-
import {
|
|
13
|
-
import {
|
|
14
|
-
import {
|
|
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";
|
|
5
|
+
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";
|
|
11
|
+
import {useProviderProps as $fUaQ2$useProviderProps} from "@react-spectrum/provider";
|
|
12
|
+
import {ClearButton as $fUaQ2$ClearButton} from "@react-spectrum/button";
|
|
13
|
+
import {Text as $fUaQ2$Text} from "@react-spectrum/text";
|
|
14
|
+
import {useFocusRing as $fUaQ2$useFocusRing} from "@react-aria/focus";
|
|
15
|
+
import {useHover as $fUaQ2$useHover} from "@react-aria/interactions";
|
|
15
16
|
|
|
16
17
|
function $parcel$interopDefault(a) {
|
|
17
18
|
return a && a.__esModule ? a.default : a;
|
|
@@ -19,94 +20,87 @@ 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 $e46ef3428fde7faa$exports = {};
|
|
23
23
|
|
|
24
|
-
$parcel$export($e46ef3428fde7faa$exports, "TagGroup", () => $e46ef3428fde7faa$export$67ea30858aaf75e3);
|
|
25
24
|
|
|
26
25
|
|
|
27
26
|
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
$parcel$export($
|
|
32
|
-
$parcel$export($
|
|
33
|
-
$parcel$export($
|
|
34
|
-
$parcel$export($
|
|
35
|
-
$parcel$export($
|
|
36
|
-
$parcel$export($
|
|
37
|
-
$parcel$export($
|
|
38
|
-
$parcel$export($
|
|
39
|
-
$parcel$export($
|
|
40
|
-
$parcel$export($
|
|
41
|
-
$parcel$export($
|
|
42
|
-
$parcel$export($
|
|
43
|
-
$parcel$export($
|
|
44
|
-
$parcel$export($
|
|
45
|
-
$parcel$export($
|
|
46
|
-
$parcel$export($
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
var $
|
|
50
|
-
var $
|
|
51
|
-
var $
|
|
52
|
-
var $
|
|
53
|
-
var $
|
|
54
|
-
var $
|
|
55
|
-
var $
|
|
56
|
-
var $
|
|
57
|
-
var $
|
|
58
|
-
var $
|
|
59
|
-
var $
|
|
60
|
-
var $
|
|
61
|
-
var $
|
|
62
|
-
var $
|
|
63
|
-
var $
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
$
|
|
68
|
-
$
|
|
69
|
-
$
|
|
70
|
-
$
|
|
71
|
-
$
|
|
72
|
-
$
|
|
73
|
-
$
|
|
74
|
-
$
|
|
75
|
-
$
|
|
76
|
-
$
|
|
77
|
-
$
|
|
78
|
-
$
|
|
79
|
-
$
|
|
80
|
-
$
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
function $4e93ae2a45104215$export$3288d34c523a1192(props) {
|
|
27
|
+
var $c033a7c057e84ef1$exports = {};
|
|
28
|
+
|
|
29
|
+
$parcel$export($c033a7c057e84ef1$exports, "spectrum-Tags", () => $c033a7c057e84ef1$export$eb7e80013a1212da, (v) => $c033a7c057e84ef1$export$eb7e80013a1212da = v);
|
|
30
|
+
$parcel$export($c033a7c057e84ef1$exports, "spectrum-Tags-item", () => $c033a7c057e84ef1$export$950d8dc0a3751654, (v) => $c033a7c057e84ef1$export$950d8dc0a3751654 = v);
|
|
31
|
+
$parcel$export($c033a7c057e84ef1$exports, "is-disabled", () => $c033a7c057e84ef1$export$d35bc1e505d1ebbf, (v) => $c033a7c057e84ef1$export$d35bc1e505d1ebbf = v);
|
|
32
|
+
$parcel$export($c033a7c057e84ef1$exports, "spectrum-Tag-action", () => $c033a7c057e84ef1$export$c5a1243e33faa2d4, (v) => $c033a7c057e84ef1$export$c5a1243e33faa2d4 = v);
|
|
33
|
+
$parcel$export($c033a7c057e84ef1$exports, "spectrum-Tag-icon", () => $c033a7c057e84ef1$export$21f5254139e14871, (v) => $c033a7c057e84ef1$export$21f5254139e14871 = v);
|
|
34
|
+
$parcel$export($c033a7c057e84ef1$exports, "spectrum-Tag-content", () => $c033a7c057e84ef1$export$d281c967f4ee071e, (v) => $c033a7c057e84ef1$export$d281c967f4ee071e = v);
|
|
35
|
+
$parcel$export($c033a7c057e84ef1$exports, "tags-removable", () => $c033a7c057e84ef1$export$7427262f66a3b803, (v) => $c033a7c057e84ef1$export$7427262f66a3b803 = v);
|
|
36
|
+
$parcel$export($c033a7c057e84ef1$exports, "is-hovered", () => $c033a7c057e84ef1$export$b8813cd5d7824ce7, (v) => $c033a7c057e84ef1$export$b8813cd5d7824ce7 = v);
|
|
37
|
+
$parcel$export($c033a7c057e84ef1$exports, "focus-ring", () => $c033a7c057e84ef1$export$f39a09f249340e2a, (v) => $c033a7c057e84ef1$export$f39a09f249340e2a = v);
|
|
38
|
+
$parcel$export($c033a7c057e84ef1$exports, "is-selected", () => $c033a7c057e84ef1$export$1e0fb04f31d3c22a, (v) => $c033a7c057e84ef1$export$1e0fb04f31d3c22a = v);
|
|
39
|
+
$parcel$export($c033a7c057e84ef1$exports, "is-invalid", () => $c033a7c057e84ef1$export$14a30de2866685fa, (v) => $c033a7c057e84ef1$export$14a30de2866685fa = v);
|
|
40
|
+
$parcel$export($c033a7c057e84ef1$exports, "spectrum-Tags-itemIcon", () => $c033a7c057e84ef1$export$8c615c557fdf3d9c, (v) => $c033a7c057e84ef1$export$8c615c557fdf3d9c = v);
|
|
41
|
+
$parcel$export($c033a7c057e84ef1$exports, "spectrum-Tags-itemLabel", () => $c033a7c057e84ef1$export$23caf26adee41b84, (v) => $c033a7c057e84ef1$export$23caf26adee41b84 = v);
|
|
42
|
+
$parcel$export($c033a7c057e84ef1$exports, "spectrum-Tags-itemClearButton", () => $c033a7c057e84ef1$export$90881dd581d6be55, (v) => $c033a7c057e84ef1$export$90881dd581d6be55 = v);
|
|
43
|
+
$parcel$export($c033a7c057e84ef1$exports, "spectrum-Avatar", () => $c033a7c057e84ef1$export$2e049b8d031600fb, (v) => $c033a7c057e84ef1$export$2e049b8d031600fb = v);
|
|
44
|
+
$parcel$export($c033a7c057e84ef1$exports, "spectrum-Tags-item--removable", () => $c033a7c057e84ef1$export$c1666977f4e14f87, (v) => $c033a7c057e84ef1$export$c1666977f4e14f87 = v);
|
|
45
|
+
$parcel$export($c033a7c057e84ef1$exports, "is-focused", () => $c033a7c057e84ef1$export$e7dc768d35940237, (v) => $c033a7c057e84ef1$export$e7dc768d35940237 = v);
|
|
46
|
+
var $c033a7c057e84ef1$export$eb7e80013a1212da;
|
|
47
|
+
var $c033a7c057e84ef1$export$950d8dc0a3751654;
|
|
48
|
+
var $c033a7c057e84ef1$export$d35bc1e505d1ebbf;
|
|
49
|
+
var $c033a7c057e84ef1$export$c5a1243e33faa2d4;
|
|
50
|
+
var $c033a7c057e84ef1$export$21f5254139e14871;
|
|
51
|
+
var $c033a7c057e84ef1$export$d281c967f4ee071e;
|
|
52
|
+
var $c033a7c057e84ef1$export$7427262f66a3b803;
|
|
53
|
+
var $c033a7c057e84ef1$export$b8813cd5d7824ce7;
|
|
54
|
+
var $c033a7c057e84ef1$export$f39a09f249340e2a;
|
|
55
|
+
var $c033a7c057e84ef1$export$1e0fb04f31d3c22a;
|
|
56
|
+
var $c033a7c057e84ef1$export$14a30de2866685fa;
|
|
57
|
+
var $c033a7c057e84ef1$export$8c615c557fdf3d9c;
|
|
58
|
+
var $c033a7c057e84ef1$export$23caf26adee41b84;
|
|
59
|
+
var $c033a7c057e84ef1$export$90881dd581d6be55;
|
|
60
|
+
var $c033a7c057e84ef1$export$2e049b8d031600fb;
|
|
61
|
+
var $c033a7c057e84ef1$export$c1666977f4e14f87;
|
|
62
|
+
var $c033a7c057e84ef1$export$e7dc768d35940237;
|
|
63
|
+
$c033a7c057e84ef1$export$eb7e80013a1212da = "spectrum-Tags_8407eb";
|
|
64
|
+
$c033a7c057e84ef1$export$950d8dc0a3751654 = "spectrum-Tags-item_8407eb";
|
|
65
|
+
$c033a7c057e84ef1$export$d35bc1e505d1ebbf = "is-disabled_8407eb";
|
|
66
|
+
$c033a7c057e84ef1$export$c5a1243e33faa2d4 = "spectrum-Tag-action_8407eb";
|
|
67
|
+
$c033a7c057e84ef1$export$21f5254139e14871 = "spectrum-Tag-icon_8407eb";
|
|
68
|
+
$c033a7c057e84ef1$export$d281c967f4ee071e = "spectrum-Tag-content_8407eb";
|
|
69
|
+
$c033a7c057e84ef1$export$7427262f66a3b803 = "tags-removable_8407eb";
|
|
70
|
+
$c033a7c057e84ef1$export$b8813cd5d7824ce7 = "is-hovered_8407eb";
|
|
71
|
+
$c033a7c057e84ef1$export$f39a09f249340e2a = "focus-ring_8407eb";
|
|
72
|
+
$c033a7c057e84ef1$export$1e0fb04f31d3c22a = "is-selected_8407eb";
|
|
73
|
+
$c033a7c057e84ef1$export$14a30de2866685fa = "is-invalid_8407eb";
|
|
74
|
+
$c033a7c057e84ef1$export$8c615c557fdf3d9c = "spectrum-Tags-itemIcon_8407eb";
|
|
75
|
+
$c033a7c057e84ef1$export$23caf26adee41b84 = "spectrum-Tags-itemLabel_8407eb";
|
|
76
|
+
$c033a7c057e84ef1$export$90881dd581d6be55 = "spectrum-Tags-itemClearButton_8407eb";
|
|
77
|
+
$c033a7c057e84ef1$export$2e049b8d031600fb = "spectrum-Avatar_8407eb";
|
|
78
|
+
$c033a7c057e84ef1$export$c1666977f4e14f87 = "spectrum-Tags-item--removable_8407eb";
|
|
79
|
+
$c033a7c057e84ef1$export$e7dc768d35940237 = "is-focused_8407eb";
|
|
80
|
+
|
|
81
|
+
|
|
82
|
+
|
|
83
|
+
|
|
84
|
+
|
|
85
|
+
|
|
86
|
+
|
|
87
|
+
|
|
88
|
+
|
|
89
|
+
|
|
90
|
+
|
|
91
|
+
function $b5f5ee35d3b6b95c$export$3288d34c523a1192(props) {
|
|
97
92
|
const { children: children , isDisabled: isDisabled , isRemovable: isRemovable , item: item , state: state , onRemove: onRemove , ...otherProps } = props;
|
|
98
93
|
// @ts-ignore
|
|
99
|
-
let { styleProps: styleProps } = $
|
|
100
|
-
let { hoverProps: hoverProps , isHovered: isHovered } = $
|
|
94
|
+
let { styleProps: styleProps } = $fUaQ2$useStyleProps(otherProps);
|
|
95
|
+
let { hoverProps: hoverProps , isHovered: isHovered } = $fUaQ2$useHover({
|
|
101
96
|
isDisabled: isDisabled
|
|
102
97
|
});
|
|
103
|
-
let { isFocused: isFocused , isFocusVisible: isFocusVisible , focusProps: focusProps } = $
|
|
98
|
+
let { isFocused: isFocused , isFocusVisible: isFocusVisible , focusProps: focusProps } = $fUaQ2$useFocusRing({
|
|
104
99
|
within: true
|
|
105
100
|
});
|
|
106
|
-
let
|
|
107
|
-
let
|
|
108
|
-
let
|
|
109
|
-
let { clearButtonProps: clearButtonProps , labelProps: labelProps , tagProps: tagProps , tagRowProps: tagRowProps } = $hfpGw$useTag({
|
|
101
|
+
let tagRef = $fUaQ2$useRef();
|
|
102
|
+
let tagRowRef = $fUaQ2$useRef();
|
|
103
|
+
let { clearButtonProps: clearButtonProps , labelProps: labelProps , tagProps: tagProps , tagRowProps: tagRowProps } = $fUaQ2$useTag({
|
|
110
104
|
...props,
|
|
111
105
|
isDisabled: isDisabled,
|
|
112
106
|
isFocused: isFocused,
|
|
@@ -116,48 +110,46 @@ function $4e93ae2a45104215$export$3288d34c523a1192(props) {
|
|
|
116
110
|
tagRef: tagRef,
|
|
117
111
|
tagRowRef: tagRowRef
|
|
118
112
|
}, state);
|
|
119
|
-
return(/*#__PURE__*/ $
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
113
|
+
return(/*#__PURE__*/ $fUaQ2$react.createElement("div", {
|
|
114
|
+
...tagRowProps,
|
|
115
|
+
ref: tagRowRef
|
|
116
|
+
}, /*#__PURE__*/ $fUaQ2$react.createElement("div", {
|
|
117
|
+
...$fUaQ2$mergeProps(tagProps, hoverProps, focusProps),
|
|
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)
|
|
129
|
-
|
|
124
|
+
}, styleProps.className),
|
|
125
|
+
ref: tagRef
|
|
126
|
+
}, /*#__PURE__*/ $fUaQ2$react.createElement($fUaQ2$SlotProvider, {
|
|
130
127
|
slots: {
|
|
131
|
-
tagLabel: {
|
|
132
|
-
UNSAFE_className: $hfpGw$classNames((/*@__PURE__*/$parcel$interopDefault($8ab5e53ee66e2d71$exports)), 'spectrum-Tag-label')
|
|
133
|
-
},
|
|
134
128
|
icon: {
|
|
135
|
-
UNSAFE_className: $
|
|
129
|
+
UNSAFE_className: $fUaQ2$classNames((/*@__PURE__*/$parcel$interopDefault($c033a7c057e84ef1$exports)), 'spectrum-Tag-icon'),
|
|
136
130
|
size: 'XS'
|
|
137
131
|
},
|
|
138
132
|
text: {
|
|
139
|
-
UNSAFE_className: $
|
|
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__*/ $
|
|
145
|
-
ref: labelRef,
|
|
146
|
-
...labelProps
|
|
147
|
-
}, /*#__PURE__*/ $hfpGw$react.createElement($hfpGw$Text, null, children)) : children, isRemovable && /*#__PURE__*/ $hfpGw$react.createElement($4e93ae2a45104215$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
|
-
UNSAFE_className: $
|
|
142
|
+
UNSAFE_className: $fUaQ2$classNames((/*@__PURE__*/$parcel$interopDefault($c033a7c057e84ef1$exports)), 'spectrum-Tag-action')
|
|
151
143
|
})))));
|
|
152
144
|
}
|
|
153
|
-
function $
|
|
154
|
-
props = $
|
|
155
|
-
let { styleProps: styleProps } = $
|
|
156
|
-
let clearBtnRef = $
|
|
157
|
-
return(/*#__PURE__*/ $
|
|
145
|
+
function $b5f5ee35d3b6b95c$var$TagRemoveButton(props) {
|
|
146
|
+
props = $fUaQ2$useSlotProps(props, 'tagRemoveButton');
|
|
147
|
+
let { styleProps: styleProps } = $fUaQ2$useStyleProps(props);
|
|
148
|
+
let clearBtnRef = $fUaQ2$useRef();
|
|
149
|
+
return(/*#__PURE__*/ $fUaQ2$react.createElement("span", {
|
|
158
150
|
...styleProps,
|
|
159
151
|
ref: clearBtnRef
|
|
160
|
-
}, /*#__PURE__*/ $
|
|
152
|
+
}, /*#__PURE__*/ $fUaQ2$react.createElement($fUaQ2$ClearButton, {
|
|
161
153
|
preventFocus: true,
|
|
162
154
|
...props
|
|
163
155
|
})));
|
|
@@ -169,15 +161,15 @@ function $4e93ae2a45104215$var$TagRemoveButton(props) {
|
|
|
169
161
|
|
|
170
162
|
|
|
171
163
|
|
|
172
|
-
function $
|
|
173
|
-
props = $
|
|
164
|
+
function $880d112c7a588209$var$TagGroup(props, ref1) {
|
|
165
|
+
props = $fUaQ2$useProviderProps(props);
|
|
174
166
|
let { isDisabled: isDisabled , isRemovable: isRemovable , onRemove: onRemove , ...otherProps } = props;
|
|
175
|
-
let domRef = $
|
|
176
|
-
let { styleProps: styleProps } = $
|
|
177
|
-
let { direction: direction } = $
|
|
178
|
-
let listState = $
|
|
179
|
-
let gridCollection = $
|
|
180
|
-
columnCount:
|
|
167
|
+
let domRef = $fUaQ2$useDOMRef(ref1);
|
|
168
|
+
let { styleProps: styleProps } = $fUaQ2$useStyleProps(otherProps);
|
|
169
|
+
let { direction: direction } = $fUaQ2$useLocale();
|
|
170
|
+
let listState = $fUaQ2$useListState(props);
|
|
171
|
+
let gridCollection = $fUaQ2$useMemo(()=>new $fUaQ2$GridCollection({
|
|
172
|
+
columnCount: 1,
|
|
181
173
|
items: [
|
|
182
174
|
...listState.collection
|
|
183
175
|
].map((item)=>{
|
|
@@ -188,18 +180,6 @@ function $e46ef3428fde7faa$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
|
|
@@ -210,37 +190,38 @@ function $e46ef3428fde7faa$var$TagGroup(props, ref1) {
|
|
|
210
190
|
listState.collection,
|
|
211
191
|
isRemovable
|
|
212
192
|
]);
|
|
213
|
-
let state = $
|
|
193
|
+
let state = $fUaQ2$useGridState({
|
|
214
194
|
...props,
|
|
215
195
|
collection: gridCollection,
|
|
216
196
|
focusMode: 'cell'
|
|
217
197
|
});
|
|
218
|
-
let keyboardDelegate = new $
|
|
198
|
+
let keyboardDelegate = new $fUaQ2$TagKeyboardDelegate({
|
|
219
199
|
collection: state.collection,
|
|
220
200
|
disabledKeys: state.disabledKeys,
|
|
221
201
|
ref: domRef,
|
|
222
202
|
direction: direction,
|
|
223
203
|
focusMode: 'cell'
|
|
224
204
|
});
|
|
225
|
-
let { gridProps: gridProps } = $
|
|
205
|
+
let { gridProps: gridProps } = $fUaQ2$useGrid({
|
|
226
206
|
...props,
|
|
227
207
|
keyboardDelegate: keyboardDelegate
|
|
228
208
|
}, state, domRef);
|
|
229
|
-
const { tagGroupProps: tagGroupProps } = $
|
|
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;
|
|
233
|
-
return(/*#__PURE__*/ $
|
|
234
|
-
...$
|
|
235
|
-
className: $
|
|
212
|
+
let { tabIndex: tabIndex , role: role , ...otherGridProps } = gridProps;
|
|
213
|
+
return(/*#__PURE__*/ $fUaQ2$react.createElement("div", {
|
|
214
|
+
...$fUaQ2$mergeProps(styleProps, tagGroupProps, otherGridProps),
|
|
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
|
|
241
222
|
].map((item)=>{
|
|
242
223
|
var ref;
|
|
243
|
-
return(/*#__PURE__*/ $
|
|
224
|
+
return(/*#__PURE__*/ $fUaQ2$react.createElement($b5f5ee35d3b6b95c$export$3288d34c523a1192, {
|
|
244
225
|
...item.childNodes[0].props,
|
|
245
226
|
key: item.key,
|
|
246
227
|
item: item,
|
|
@@ -251,10 +232,11 @@ function $e46ef3428fde7faa$var$TagGroup(props, ref1) {
|
|
|
251
232
|
}, item.childNodes[0].rendered));
|
|
252
233
|
})));
|
|
253
234
|
}
|
|
254
|
-
const $
|
|
235
|
+
const $880d112c7a588209$export$67ea30858aaf75e3 = /*#__PURE__*/ $fUaQ2$react.forwardRef($880d112c7a588209$var$TagGroup);
|
|
236
|
+
|
|
255
237
|
|
|
256
238
|
|
|
257
239
|
|
|
258
240
|
|
|
259
|
-
export {$
|
|
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';\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 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,7 @@ 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';
|
|
8
|
+
export type { SpectrumTagGroupProps } from '@react-types/tag';
|
|
7
9
|
|
|
8
10
|
//# sourceMappingURL=types.d.ts.map
|
package/dist/types.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;
|
|
1
|
+
{"mappings":";;;AC0GA,OAAA,MAAM;UAAuF,OAAO,cAAc,CAAC;MAAM,YAAY,CAAC;AC7FtI,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-alpha.
|
|
3
|
+
"version": "3.0.0-alpha.10",
|
|
4
4
|
"description": "Spectrum UI components in React",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"main": "dist/main.js",
|
|
@@ -32,31 +32,31 @@
|
|
|
32
32
|
},
|
|
33
33
|
"dependencies": {
|
|
34
34
|
"@babel/runtime": "^7.6.2",
|
|
35
|
-
"@react-aria/focus": "^3.
|
|
36
|
-
"@react-aria/grid": "^3.
|
|
37
|
-
"@react-aria/i18n": "^3.
|
|
38
|
-
"@react-aria/interactions": "^3.
|
|
39
|
-
"@react-aria/tag": "3.0.0-alpha.
|
|
40
|
-
"@react-aria/utils": "^3.
|
|
41
|
-
"@react-spectrum/button": "^3.
|
|
42
|
-
"@react-spectrum/text": "^3.
|
|
43
|
-
"@react-spectrum/utils": "^3.
|
|
44
|
-
"@react-stately/collections": "^3.
|
|
45
|
-
"@react-stately/grid": "^3.
|
|
46
|
-
"@react-stately/list": "^3.4
|
|
47
|
-
"@react-types/shared": "^3.
|
|
48
|
-
"@react-types/tag": "3.0.0-alpha.
|
|
49
|
-
"@spectrum-icons/workflow": "^
|
|
35
|
+
"@react-aria/focus": "^3.9.0",
|
|
36
|
+
"@react-aria/grid": "^3.5.0",
|
|
37
|
+
"@react-aria/i18n": "^3.6.1",
|
|
38
|
+
"@react-aria/interactions": "^3.12.0",
|
|
39
|
+
"@react-aria/tag": "3.0.0-alpha.10",
|
|
40
|
+
"@react-aria/utils": "^3.14.0",
|
|
41
|
+
"@react-spectrum/button": "^3.10.0",
|
|
42
|
+
"@react-spectrum/text": "^3.3.2",
|
|
43
|
+
"@react-spectrum/utils": "^3.7.4",
|
|
44
|
+
"@react-stately/collections": "^3.4.4",
|
|
45
|
+
"@react-stately/grid": "^3.4.0",
|
|
46
|
+
"@react-stately/list": "^3.5.4",
|
|
47
|
+
"@react-types/shared": "^3.15.0",
|
|
48
|
+
"@react-types/tag": "3.0.0-alpha.8",
|
|
49
|
+
"@spectrum-icons/workflow": "^4.0.3"
|
|
50
50
|
},
|
|
51
51
|
"devDependencies": {
|
|
52
52
|
"@adobe/spectrum-css-temp": "3.0.0-alpha.1"
|
|
53
53
|
},
|
|
54
54
|
"peerDependencies": {
|
|
55
55
|
"@react-spectrum/provider": "^3.0.0",
|
|
56
|
-
"react": "^16.8.0 || ^17.0.0-rc.1"
|
|
56
|
+
"react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
|
|
57
57
|
},
|
|
58
58
|
"publishConfig": {
|
|
59
59
|
"access": "public"
|
|
60
60
|
},
|
|
61
|
-
"gitHead": "
|
|
61
|
+
"gitHead": "9202ef59e8c104dd06ffe33148445ef7932a5d1b"
|
|
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
|
-
|
|
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:
|
|
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,6 @@
|
|
|
10
10
|
* governing permissions and limitations under the License.
|
|
11
11
|
*/
|
|
12
12
|
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
export
|
|
13
|
+
export {TagGroup} from './TagGroup';
|
|
14
|
+
export {Item} from '@react-stately/collections';
|
|
15
|
+
export type {SpectrumTagGroupProps} from '@react-types/tag';
|