@react-spectrum/tag 3.3.9 → 3.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (204) hide show
  1. package/dist/import.mjs +3 -3
  2. package/dist/main.js +4 -4
  3. package/dist/main.js.map +1 -1
  4. package/dist/module.js +3 -3
  5. package/dist/module.js.map +1 -1
  6. package/dist/types/src/index.d.ts +3 -0
  7. package/package.json +14 -39
  8. package/src/index.ts +4 -3
  9. package/dist/Tag.main.js +0 -95
  10. package/dist/Tag.main.js.map +0 -1
  11. package/dist/Tag.mjs +0 -90
  12. package/dist/Tag.module.js +0 -90
  13. package/dist/Tag.module.js.map +0 -1
  14. package/dist/TagGroup.main.js +0 -269
  15. package/dist/TagGroup.main.js.map +0 -1
  16. package/dist/TagGroup.mjs +0 -264
  17. package/dist/TagGroup.module.js +0 -264
  18. package/dist/TagGroup.module.js.map +0 -1
  19. package/dist/ar-AE.main.js +0 -9
  20. package/dist/ar-AE.main.js.map +0 -1
  21. package/dist/ar-AE.mjs +0 -11
  22. package/dist/ar-AE.module.js +0 -11
  23. package/dist/ar-AE.module.js.map +0 -1
  24. package/dist/bg-BG.main.js +0 -9
  25. package/dist/bg-BG.main.js.map +0 -1
  26. package/dist/bg-BG.mjs +0 -11
  27. package/dist/bg-BG.module.js +0 -11
  28. package/dist/bg-BG.module.js.map +0 -1
  29. package/dist/cs-CZ.main.js +0 -9
  30. package/dist/cs-CZ.main.js.map +0 -1
  31. package/dist/cs-CZ.mjs +0 -11
  32. package/dist/cs-CZ.module.js +0 -11
  33. package/dist/cs-CZ.module.js.map +0 -1
  34. package/dist/da-DK.main.js +0 -9
  35. package/dist/da-DK.main.js.map +0 -1
  36. package/dist/da-DK.mjs +0 -11
  37. package/dist/da-DK.module.js +0 -11
  38. package/dist/da-DK.module.js.map +0 -1
  39. package/dist/de-DE.main.js +0 -9
  40. package/dist/de-DE.main.js.map +0 -1
  41. package/dist/de-DE.mjs +0 -11
  42. package/dist/de-DE.module.js +0 -11
  43. package/dist/de-DE.module.js.map +0 -1
  44. package/dist/el-GR.main.js +0 -9
  45. package/dist/el-GR.main.js.map +0 -1
  46. package/dist/el-GR.mjs +0 -11
  47. package/dist/el-GR.module.js +0 -11
  48. package/dist/el-GR.module.js.map +0 -1
  49. package/dist/en-US.main.js +0 -9
  50. package/dist/en-US.main.js.map +0 -1
  51. package/dist/en-US.mjs +0 -11
  52. package/dist/en-US.module.js +0 -11
  53. package/dist/en-US.module.js.map +0 -1
  54. package/dist/es-ES.main.js +0 -9
  55. package/dist/es-ES.main.js.map +0 -1
  56. package/dist/es-ES.mjs +0 -11
  57. package/dist/es-ES.module.js +0 -11
  58. package/dist/es-ES.module.js.map +0 -1
  59. package/dist/et-EE.main.js +0 -9
  60. package/dist/et-EE.main.js.map +0 -1
  61. package/dist/et-EE.mjs +0 -11
  62. package/dist/et-EE.module.js +0 -11
  63. package/dist/et-EE.module.js.map +0 -1
  64. package/dist/fi-FI.main.js +0 -9
  65. package/dist/fi-FI.main.js.map +0 -1
  66. package/dist/fi-FI.mjs +0 -11
  67. package/dist/fi-FI.module.js +0 -11
  68. package/dist/fi-FI.module.js.map +0 -1
  69. package/dist/fr-FR.main.js +0 -9
  70. package/dist/fr-FR.main.js.map +0 -1
  71. package/dist/fr-FR.mjs +0 -11
  72. package/dist/fr-FR.module.js +0 -11
  73. package/dist/fr-FR.module.js.map +0 -1
  74. package/dist/he-IL.main.js +0 -9
  75. package/dist/he-IL.main.js.map +0 -1
  76. package/dist/he-IL.mjs +0 -11
  77. package/dist/he-IL.module.js +0 -11
  78. package/dist/he-IL.module.js.map +0 -1
  79. package/dist/hr-HR.main.js +0 -9
  80. package/dist/hr-HR.main.js.map +0 -1
  81. package/dist/hr-HR.mjs +0 -11
  82. package/dist/hr-HR.module.js +0 -11
  83. package/dist/hr-HR.module.js.map +0 -1
  84. package/dist/hu-HU.main.js +0 -9
  85. package/dist/hu-HU.main.js.map +0 -1
  86. package/dist/hu-HU.mjs +0 -11
  87. package/dist/hu-HU.module.js +0 -11
  88. package/dist/hu-HU.module.js.map +0 -1
  89. package/dist/intlStrings.main.js +0 -108
  90. package/dist/intlStrings.main.js.map +0 -1
  91. package/dist/intlStrings.mjs +0 -110
  92. package/dist/intlStrings.module.js +0 -110
  93. package/dist/intlStrings.module.js.map +0 -1
  94. package/dist/it-IT.main.js +0 -9
  95. package/dist/it-IT.main.js.map +0 -1
  96. package/dist/it-IT.mjs +0 -11
  97. package/dist/it-IT.module.js +0 -11
  98. package/dist/it-IT.module.js.map +0 -1
  99. package/dist/ja-JP.main.js +0 -9
  100. package/dist/ja-JP.main.js.map +0 -1
  101. package/dist/ja-JP.mjs +0 -11
  102. package/dist/ja-JP.module.js +0 -11
  103. package/dist/ja-JP.module.js.map +0 -1
  104. package/dist/ko-KR.main.js +0 -9
  105. package/dist/ko-KR.main.js.map +0 -1
  106. package/dist/ko-KR.mjs +0 -11
  107. package/dist/ko-KR.module.js +0 -11
  108. package/dist/ko-KR.module.js.map +0 -1
  109. package/dist/lt-LT.main.js +0 -9
  110. package/dist/lt-LT.main.js.map +0 -1
  111. package/dist/lt-LT.mjs +0 -11
  112. package/dist/lt-LT.module.js +0 -11
  113. package/dist/lt-LT.module.js.map +0 -1
  114. package/dist/lv-LV.main.js +0 -9
  115. package/dist/lv-LV.main.js.map +0 -1
  116. package/dist/lv-LV.mjs +0 -11
  117. package/dist/lv-LV.module.js +0 -11
  118. package/dist/lv-LV.module.js.map +0 -1
  119. package/dist/nb-NO.main.js +0 -9
  120. package/dist/nb-NO.main.js.map +0 -1
  121. package/dist/nb-NO.mjs +0 -11
  122. package/dist/nb-NO.module.js +0 -11
  123. package/dist/nb-NO.module.js.map +0 -1
  124. package/dist/nl-NL.main.js +0 -9
  125. package/dist/nl-NL.main.js.map +0 -1
  126. package/dist/nl-NL.mjs +0 -11
  127. package/dist/nl-NL.module.js +0 -11
  128. package/dist/nl-NL.module.js.map +0 -1
  129. package/dist/pl-PL.main.js +0 -9
  130. package/dist/pl-PL.main.js.map +0 -1
  131. package/dist/pl-PL.mjs +0 -11
  132. package/dist/pl-PL.module.js +0 -11
  133. package/dist/pl-PL.module.js.map +0 -1
  134. package/dist/pt-BR.main.js +0 -9
  135. package/dist/pt-BR.main.js.map +0 -1
  136. package/dist/pt-BR.mjs +0 -11
  137. package/dist/pt-BR.module.js +0 -11
  138. package/dist/pt-BR.module.js.map +0 -1
  139. package/dist/pt-PT.main.js +0 -9
  140. package/dist/pt-PT.main.js.map +0 -1
  141. package/dist/pt-PT.mjs +0 -11
  142. package/dist/pt-PT.module.js +0 -11
  143. package/dist/pt-PT.module.js.map +0 -1
  144. package/dist/ro-RO.main.js +0 -9
  145. package/dist/ro-RO.main.js.map +0 -1
  146. package/dist/ro-RO.mjs +0 -11
  147. package/dist/ro-RO.module.js +0 -11
  148. package/dist/ro-RO.module.js.map +0 -1
  149. package/dist/ru-RU.main.js +0 -9
  150. package/dist/ru-RU.main.js.map +0 -1
  151. package/dist/ru-RU.mjs +0 -11
  152. package/dist/ru-RU.module.js +0 -11
  153. package/dist/ru-RU.module.js.map +0 -1
  154. package/dist/sk-SK.main.js +0 -9
  155. package/dist/sk-SK.main.js.map +0 -1
  156. package/dist/sk-SK.mjs +0 -11
  157. package/dist/sk-SK.module.js +0 -11
  158. package/dist/sk-SK.module.js.map +0 -1
  159. package/dist/sl-SI.main.js +0 -9
  160. package/dist/sl-SI.main.js.map +0 -1
  161. package/dist/sl-SI.mjs +0 -11
  162. package/dist/sl-SI.module.js +0 -11
  163. package/dist/sl-SI.module.js.map +0 -1
  164. package/dist/sr-SP.main.js +0 -9
  165. package/dist/sr-SP.main.js.map +0 -1
  166. package/dist/sr-SP.mjs +0 -11
  167. package/dist/sr-SP.module.js +0 -11
  168. package/dist/sr-SP.module.js.map +0 -1
  169. package/dist/sv-SE.main.js +0 -9
  170. package/dist/sv-SE.main.js.map +0 -1
  171. package/dist/sv-SE.mjs +0 -11
  172. package/dist/sv-SE.module.js +0 -11
  173. package/dist/sv-SE.module.js.map +0 -1
  174. package/dist/tag.9dd3cf2c.css +0 -270
  175. package/dist/tag.9dd3cf2c.css.map +0 -1
  176. package/dist/tags_vars_css.main.js +0 -86
  177. package/dist/tags_vars_css.main.js.map +0 -1
  178. package/dist/tags_vars_css.mjs +0 -88
  179. package/dist/tags_vars_css.module.js +0 -88
  180. package/dist/tags_vars_css.module.js.map +0 -1
  181. package/dist/tr-TR.main.js +0 -9
  182. package/dist/tr-TR.main.js.map +0 -1
  183. package/dist/tr-TR.mjs +0 -11
  184. package/dist/tr-TR.module.js +0 -11
  185. package/dist/tr-TR.module.js.map +0 -1
  186. package/dist/types.d.ts +0 -20
  187. package/dist/types.d.ts.map +0 -1
  188. package/dist/uk-UA.main.js +0 -9
  189. package/dist/uk-UA.main.js.map +0 -1
  190. package/dist/uk-UA.mjs +0 -11
  191. package/dist/uk-UA.module.js +0 -11
  192. package/dist/uk-UA.module.js.map +0 -1
  193. package/dist/zh-CN.main.js +0 -9
  194. package/dist/zh-CN.main.js.map +0 -1
  195. package/dist/zh-CN.mjs +0 -11
  196. package/dist/zh-CN.module.js +0 -11
  197. package/dist/zh-CN.module.js.map +0 -1
  198. package/dist/zh-TW.main.js +0 -9
  199. package/dist/zh-TW.main.js.map +0 -1
  200. package/dist/zh-TW.mjs +0 -11
  201. package/dist/zh-TW.module.js +0 -11
  202. package/dist/zh-TW.module.js.map +0 -1
  203. package/src/Tag.tsx +0 -87
  204. package/src/TagGroup.tsx +0 -278
@@ -1,269 +0,0 @@
1
- var $a85da3418799ba7d$exports = require("./intlStrings.main.js");
2
- require("./tag.9dd3cf2c.css");
3
- var $ed889f8f1f091fc8$exports = require("./tags_vars_css.main.js");
4
- var $dd2c5d00108c1840$exports = require("./Tag.main.js");
5
- var $gBwi7$reactspectrumbutton = require("@react-spectrum/button");
6
- var $gBwi7$reactariatag = require("@react-aria/tag");
7
- var $gBwi7$reactspectrumutils = require("@react-spectrum/utils");
8
- var $gBwi7$reactspectrumlabel = require("@react-spectrum/label");
9
- var $gBwi7$reactariafocus = require("@react-aria/focus");
10
- var $gBwi7$reactstatelylist = require("@react-stately/list");
11
- var $gBwi7$reactariaselection = require("@react-aria/selection");
12
- var $gBwi7$reactspectrumprovider = require("@react-spectrum/provider");
13
- var $gBwi7$react = require("react");
14
- var $gBwi7$reactspectrumform = require("@react-spectrum/form");
15
- var $gBwi7$reactariautils = require("@react-aria/utils");
16
- var $gBwi7$reactariai18n = require("@react-aria/i18n");
17
-
18
-
19
- function $parcel$interopDefault(a) {
20
- return a && a.__esModule ? a.default : a;
21
- }
22
-
23
- function $parcel$export(e, n, v, s) {
24
- Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
25
- }
26
-
27
- $parcel$export(module.exports, "TagGroup", () => $e7b72d8874e98cd4$export$67ea30858aaf75e3);
28
- /*
29
- * Copyright 2020 Adobe. All rights reserved.
30
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
31
- * you may not use this file except in compliance with the License. You may obtain a copy
32
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
33
- *
34
- * Unless required by applicable law or agreed to in writing, software distributed under
35
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
36
- * OF ANY KIND, either express or implied. See the License for the specific language
37
- * governing permissions and limitations under the License.
38
- */
39
-
40
-
41
-
42
-
43
-
44
-
45
-
46
-
47
-
48
-
49
-
50
-
51
-
52
-
53
- const $e7b72d8874e98cd4$var$TAG_STYLES = {
54
- medium: {
55
- height: 24,
56
- margin: 4
57
- },
58
- large: {
59
- height: 30,
60
- margin: 5
61
- }
62
- };
63
- const $e7b72d8874e98cd4$export$67ea30858aaf75e3 = /*#__PURE__*/ (0, ($parcel$interopDefault($gBwi7$react))).forwardRef(function TagGroup(props, ref) {
64
- props = (0, $gBwi7$reactspectrumprovider.useProviderProps)(props);
65
- props = (0, $gBwi7$reactspectrumform.useFormProps)(props);
66
- let { maxRows: maxRows, children: children, actionLabel: actionLabel, onAction: onAction, labelPosition: labelPosition, renderEmptyState: renderEmptyState = ()=>stringFormatter.format('noTags') } = props;
67
- let domRef = (0, $gBwi7$reactspectrumutils.useDOMRef)(ref);
68
- let containerRef = (0, $gBwi7$react.useRef)(null);
69
- let tagsRef = (0, $gBwi7$react.useRef)(null);
70
- let { direction: direction } = (0, $gBwi7$reactariai18n.useLocale)();
71
- let { scale: scale } = (0, $gBwi7$reactspectrumprovider.useProvider)();
72
- let stringFormatter = (0, $gBwi7$reactariai18n.useLocalizedStringFormatter)((0, ($parcel$interopDefault($a85da3418799ba7d$exports))), '@react-spectrum/tag');
73
- let [isCollapsed, setIsCollapsed] = (0, $gBwi7$react.useState)(maxRows != null);
74
- let state = (0, $gBwi7$reactstatelylist.useListState)(props);
75
- let [tagState, setTagState] = (0, $gBwi7$reactariautils.useValueEffect)({
76
- visibleTagCount: state.collection.size,
77
- showCollapseButton: false
78
- });
79
- let keyboardDelegate = (0, $gBwi7$react.useMemo)(()=>{
80
- let collection = isCollapsed ? new (0, $gBwi7$reactstatelylist.ListCollection)([
81
- ...state.collection
82
- ].slice(0, tagState.visibleTagCount)) : new (0, $gBwi7$reactstatelylist.ListCollection)([
83
- ...state.collection
84
- ]);
85
- return new (0, $gBwi7$reactariaselection.ListKeyboardDelegate)({
86
- collection: collection,
87
- ref: tagsRef,
88
- direction: direction,
89
- orientation: 'horizontal'
90
- });
91
- }, [
92
- direction,
93
- isCollapsed,
94
- state.collection,
95
- tagState.visibleTagCount,
96
- tagsRef
97
- ]);
98
- // Remove onAction from props so it doesn't make it into useGridList.
99
- delete props.onAction;
100
- let { gridProps: gridProps, labelProps: labelProps, descriptionProps: descriptionProps, errorMessageProps: errorMessageProps } = (0, $gBwi7$reactariatag.useTagGroup)({
101
- ...props,
102
- keyboardDelegate: keyboardDelegate
103
- }, state, tagsRef);
104
- let actionsId = (0, $gBwi7$reactariautils.useId)();
105
- let actionsRef = (0, $gBwi7$react.useRef)(null);
106
- let updateVisibleTagCount = (0, $gBwi7$react.useCallback)(()=>{
107
- if (maxRows && maxRows > 0) {
108
- let computeVisibleTagCount = ()=>{
109
- // Refs can be null at runtime.
110
- let currContainerRef = containerRef.current;
111
- let currTagsRef = tagsRef.current;
112
- let currActionsRef = actionsRef.current;
113
- if (!currContainerRef || !currTagsRef || !currActionsRef || state.collection.size === 0) return {
114
- visibleTagCount: 0,
115
- showCollapseButton: false
116
- };
117
- // Count rows and show tags until we hit the maxRows.
118
- let tags = [
119
- ...currTagsRef.children
120
- ];
121
- let currY = -Infinity;
122
- let rowCount = 0;
123
- let index = 0;
124
- let tagWidths = [];
125
- for (let tag of tags){
126
- let { width: width, y: y } = tag.getBoundingClientRect();
127
- if (y !== currY) {
128
- currY = y;
129
- rowCount++;
130
- }
131
- if (maxRows && rowCount > maxRows) break;
132
- tagWidths.push(width);
133
- index++;
134
- }
135
- // Remove tags until there is space for the collapse button and action button (if present) on the last row.
136
- let buttons = [
137
- ...currActionsRef.children
138
- ];
139
- if (maxRows && buttons.length > 0 && rowCount >= maxRows && currContainerRef.parentElement) {
140
- var _tags_;
141
- let buttonsWidth = buttons.reduce((acc, curr)=>acc += curr.getBoundingClientRect().width, 0);
142
- buttonsWidth += $e7b72d8874e98cd4$var$TAG_STYLES[scale].margin * 2 * buttons.length;
143
- let end = direction === 'ltr' ? 'right' : 'left';
144
- let containerEnd = currContainerRef.parentElement.getBoundingClientRect()[end];
145
- let lastTagEnd = (_tags_ = tags[index - 1]) === null || _tags_ === void 0 ? void 0 : _tags_.getBoundingClientRect()[end];
146
- lastTagEnd += $e7b72d8874e98cd4$var$TAG_STYLES[scale].margin;
147
- let availableWidth = containerEnd - lastTagEnd;
148
- while(availableWidth < buttonsWidth && index > 0){
149
- availableWidth += tagWidths.pop();
150
- index--;
151
- }
152
- }
153
- return {
154
- visibleTagCount: Math.max(index, 1),
155
- showCollapseButton: index < state.collection.size
156
- };
157
- };
158
- setTagState(function*() {
159
- // Update to show all items.
160
- yield {
161
- visibleTagCount: state.collection.size,
162
- showCollapseButton: true
163
- };
164
- // Measure, and update to show the items until maxRows is reached.
165
- yield computeVisibleTagCount();
166
- });
167
- }
168
- }, [
169
- maxRows,
170
- setTagState,
171
- direction,
172
- scale,
173
- state.collection.size
174
- ]);
175
- (0, $gBwi7$reactariautils.useResizeObserver)({
176
- ref: containerRef,
177
- onResize: updateVisibleTagCount
178
- });
179
- // eslint-disable-next-line react-hooks/exhaustive-deps
180
- (0, $gBwi7$reactariautils.useLayoutEffect)(updateVisibleTagCount, [
181
- children
182
- ]);
183
- (0, $gBwi7$react.useEffect)(()=>{
184
- var // Recalculate visible tags when fonts are loaded.
185
- _document_fonts;
186
- (_document_fonts = document.fonts) === null || _document_fonts === void 0 ? void 0 : _document_fonts.ready.then(()=>updateVisibleTagCount());
187
- // eslint-disable-next-line react-hooks/exhaustive-deps
188
- }, []);
189
- let visibleTags = (0, $gBwi7$react.useMemo)(()=>[
190
- ...state.collection
191
- ].slice(0, isCollapsed ? tagState.visibleTagCount : state.collection.size), [
192
- isCollapsed,
193
- state.collection,
194
- tagState.visibleTagCount
195
- ]);
196
- let handlePressCollapse = ()=>{
197
- // Prevents button from losing focus if focusedKey got collapsed.
198
- state.selectionManager.setFocusedKey(null);
199
- setIsCollapsed((prevCollapsed)=>!prevCollapsed);
200
- };
201
- let showActions = tagState.showCollapseButton || actionLabel && onAction;
202
- let isEmpty = state.collection.size === 0;
203
- let containerStyle = (0, $gBwi7$react.useMemo)(()=>{
204
- if (maxRows == null || !isCollapsed || isEmpty) return undefined;
205
- let maxHeight = ($e7b72d8874e98cd4$var$TAG_STYLES[scale].height + $e7b72d8874e98cd4$var$TAG_STYLES[scale].margin * 2) * maxRows;
206
- return {
207
- maxHeight: maxHeight,
208
- overflow: 'hidden'
209
- };
210
- }, [
211
- isCollapsed,
212
- maxRows,
213
- isEmpty,
214
- scale
215
- ]);
216
- return /*#__PURE__*/ (0, ($parcel$interopDefault($gBwi7$react))).createElement((0, $gBwi7$reactariafocus.FocusScope), null, /*#__PURE__*/ (0, ($parcel$interopDefault($gBwi7$react))).createElement((0, $gBwi7$reactspectrumlabel.Field), {
217
- ...props,
218
- labelProps: labelProps,
219
- descriptionProps: descriptionProps,
220
- errorMessageProps: errorMessageProps,
221
- showErrorIcon: true,
222
- ref: domRef,
223
- elementType: "span",
224
- wrapperClassName: (0, $gBwi7$reactspectrumutils.classNames)((0, ($parcel$interopDefault($ed889f8f1f091fc8$exports))), 'spectrum-Tags-fieldWrapper', {
225
- 'spectrum-Tags-fieldWrapper--positionSide': labelPosition === 'side'
226
- })
227
- }, /*#__PURE__*/ (0, ($parcel$interopDefault($gBwi7$react))).createElement("div", {
228
- ref: containerRef,
229
- style: containerStyle,
230
- className: (0, $gBwi7$reactspectrumutils.classNames)((0, ($parcel$interopDefault($ed889f8f1f091fc8$exports))), 'spectrum-Tags-container', {
231
- 'spectrum-Tags-container--empty': isEmpty
232
- })
233
- }, /*#__PURE__*/ (0, ($parcel$interopDefault($gBwi7$react))).createElement((0, $gBwi7$reactariafocus.FocusRing), {
234
- focusRingClass: (0, $gBwi7$reactspectrumutils.classNames)((0, ($parcel$interopDefault($ed889f8f1f091fc8$exports))), 'focus-ring')
235
- }, /*#__PURE__*/ (0, ($parcel$interopDefault($gBwi7$react))).createElement("div", {
236
- ref: tagsRef,
237
- ...gridProps,
238
- className: (0, $gBwi7$reactspectrumutils.classNames)((0, ($parcel$interopDefault($ed889f8f1f091fc8$exports))), 'spectrum-Tags')
239
- }, visibleTags.map((item)=>/*#__PURE__*/ (0, ($parcel$interopDefault($gBwi7$react))).createElement((0, $dd2c5d00108c1840$exports.Tag), {
240
- ...item.props,
241
- key: item.key,
242
- item: item,
243
- state: state
244
- }, item.rendered)), isEmpty && /*#__PURE__*/ (0, ($parcel$interopDefault($gBwi7$react))).createElement("div", {
245
- className: (0, $gBwi7$reactspectrumutils.classNames)((0, ($parcel$interopDefault($ed889f8f1f091fc8$exports))), 'spectrum-Tags-empty-state')
246
- }, renderEmptyState()))), showActions && !isEmpty && /*#__PURE__*/ (0, ($parcel$interopDefault($gBwi7$react))).createElement((0, $gBwi7$reactspectrumprovider.Provider), {
247
- isDisabled: false
248
- }, /*#__PURE__*/ (0, ($parcel$interopDefault($gBwi7$react))).createElement("div", {
249
- role: "group",
250
- ref: actionsRef,
251
- id: actionsId,
252
- "aria-label": stringFormatter.format('actions'),
253
- "aria-labelledby": `${gridProps.id} ${actionsId}`,
254
- className: (0, $gBwi7$reactspectrumutils.classNames)((0, ($parcel$interopDefault($ed889f8f1f091fc8$exports))), 'spectrum-Tags-actions')
255
- }, tagState.showCollapseButton && /*#__PURE__*/ (0, ($parcel$interopDefault($gBwi7$react))).createElement((0, $gBwi7$reactspectrumbutton.ActionButton), {
256
- isQuiet: true,
257
- onPress: handlePressCollapse,
258
- UNSAFE_className: (0, $gBwi7$reactspectrumutils.classNames)((0, ($parcel$interopDefault($ed889f8f1f091fc8$exports))), 'spectrum-Tags-actionButton')
259
- }, isCollapsed ? stringFormatter.format('showAllButtonLabel', {
260
- tagCount: state.collection.size
261
- }) : stringFormatter.format('hideButtonLabel')), actionLabel && onAction && /*#__PURE__*/ (0, ($parcel$interopDefault($gBwi7$react))).createElement((0, $gBwi7$reactspectrumbutton.ActionButton), {
262
- isQuiet: true,
263
- onPress: ()=>onAction === null || onAction === void 0 ? void 0 : onAction(),
264
- UNSAFE_className: (0, $gBwi7$reactspectrumutils.classNames)((0, ($parcel$interopDefault($ed889f8f1f091fc8$exports))), 'spectrum-Tags-actionButton')
265
- }, actionLabel))))));
266
- });
267
-
268
-
269
- //# sourceMappingURL=TagGroup.main.js.map
@@ -1 +0,0 @@
1
- {"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;;;;;AAoBD,MAAM,mCAAa;IACjB,QAAQ;QACN,QAAQ;QACR,QAAQ;IACV;IACA,OAAO;QACL,QAAQ;QACR,QAAQ;IACV;AACF;AAcO,MAAM,0DAAW,CAAA,GAAA,sCAAI,EAAE,UAAU,CAAC,SAAS,SAA2B,KAA+B,EAAE,GAA2B;IACvI,QAAQ,CAAA,GAAA,6CAAe,EAAE;IACzB,QAAQ,CAAA,GAAA,qCAAW,EAAE;IACrB,IAAI,WACF,OAAO,YACP,QAAQ,eACR,WAAW,YACX,QAAQ,iBACR,aAAa,oBACb,mBAAmB,IAAM,gBAAgB,MAAM,CAAC,WACjD,GAAG;IACJ,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IACvB,IAAI,eAAe,CAAA,GAAA,mBAAK,EAAkB;IAC1C,IAAI,UAAU,CAAA,GAAA,mBAAK,EAAyB;IAC5C,IAAI,aAAC,SAAS,EAAC,GAAG,CAAA,GAAA,8BAAQ;IAC1B,IAAI,SAAC,KAAK,EAAC,GAAG,CAAA,GAAA,wCAAU;IACxB,IAAI,kBAAkB,CAAA,GAAA,gDAA0B,EAAE,CAAA,GAAA,mDAAW,GAAG;IAChE,IAAI,CAAC,aAAa,eAAe,GAAG,CAAA,GAAA,qBAAO,EAAE,WAAW;IACxD,IAAI,QAAQ,CAAA,GAAA,oCAAW,EAAE;IACzB,IAAI,CAAC,UAAU,YAAY,GAAG,CAAA,GAAA,oCAAa,EAAE;QAAC,iBAAiB,MAAM,UAAU,CAAC,IAAI;QAAE,oBAAoB;IAAK;IAC/G,IAAI,mBAAmB,CAAA,GAAA,oBAAM,EAAE;QAC7B,IAAI,aAAc,cACd,IAAI,CAAA,GAAA,sCAAa,EAAE;eAAI,MAAM,UAAU;SAAC,CAAC,KAAK,CAAC,GAAG,SAAS,eAAe,KAC1E,IAAI,CAAA,GAAA,sCAAa,EAAE;eAAI,MAAM,UAAU;SAAC;QAC5C,OAAO,IAAI,CAAA,GAAA,8CAAmB,EAAE;wBAC9B;YACA,KAAK;uBACL;YACA,aAAa;QACf;IACF,GAAG;QAAC;QAAW;QAAa,MAAM,UAAU;QAAE,SAAS,eAAe;QAAE;KAAQ;IAChF,qEAAqE;IACrE,OAAO,MAAM,QAAQ;IACrB,IAAI,aAAC,SAAS,cAAE,UAAU,oBAAE,gBAAgB,qBAAE,iBAAiB,EAAC,GAAG,CAAA,GAAA,+BAAU,EAAE;QAAC,GAAG,KAAK;0BAAE;IAAgB,GAAG,OAAO;IACpH,IAAI,YAAY,CAAA,GAAA,2BAAI;IACpB,IAAI,aAAa,CAAA,GAAA,mBAAK,EAAkB;IAExC,IAAI,wBAAwB,CAAA,GAAA,wBAAU,EAAE;QACtC,IAAI,WAAW,UAAU,GAAG;YAC1B,IAAI,yBAAyB;gBAC3B,+BAA+B;gBAC/B,IAAI,mBAA0C,aAAa,OAAO;gBAClE,IAAI,cAAqC,QAAQ,OAAO;gBACxD,IAAI,iBAAwC,WAAW,OAAO;gBAC9D,IAAI,CAAC,oBAAoB,CAAC,eAAe,CAAC,kBAAkB,MAAM,UAAU,CAAC,IAAI,KAAK,GACpF,OAAO;oBACL,iBAAiB;oBACjB,oBAAoB;gBACtB;gBAGF,qDAAqD;gBACrD,IAAI,OAAO;uBAAI,YAAY,QAAQ;iBAAC;gBACpC,IAAI,QAAQ,CAAC;gBACb,IAAI,WAAW;gBACf,IAAI,QAAQ;gBACZ,IAAI,YAAsB,EAAE;gBAC5B,KAAK,IAAI,OAAO,KAAM;oBACpB,IAAI,SAAC,KAAK,KAAE,CAAC,EAAC,GAAG,IAAI,qBAAqB;oBAE1C,IAAI,MAAM,OAAO;wBACf,QAAQ;wBACR;oBACF;oBAEA,IAAI,WAAW,WAAW,SACxB;oBAEF,UAAU,IAAI,CAAC;oBACf;gBACF;gBAEA,2GAA2G;gBAC3G,IAAI,UAAU;uBAAI,eAAe,QAAQ;iBAAC;gBAC1C,IAAI,WAAW,QAAQ,MAAM,GAAG,KAAK,YAAY,WAAW,iBAAiB,aAAa,EAAE;wBAKzE;oBAJjB,IAAI,eAAe,QAAQ,MAAM,CAAC,CAAC,KAAK,OAAS,OAAO,KAAK,qBAAqB,GAAG,KAAK,EAAE;oBAC5F,gBAAgB,gCAAU,CAAC,MAAM,CAAC,MAAM,GAAG,IAAI,QAAQ,MAAM;oBAC7D,IAAI,MAAM,cAAc,QAAQ,UAAU;oBAC1C,IAAI,eAAe,iBAAiB,aAAa,CAAC,qBAAqB,EAAE,CAAC,IAAI;oBAC9E,IAAI,cAAa,SAAA,IAAI,CAAC,QAAQ,EAAE,cAAf,6BAAA,OAAiB,qBAAqB,EAAE,CAAC,IAAI;oBAC9D,cAAc,gCAAU,CAAC,MAAM,CAAC,MAAM;oBACtC,IAAI,iBAAiB,eAAe;oBAEpC,MAAO,iBAAiB,gBAAgB,QAAQ,EAAG;wBACjD,kBAAkB,UAAU,GAAG;wBAC/B;oBACF;gBACF;gBAEA,OAAO;oBACL,iBAAiB,KAAK,GAAG,CAAC,OAAO;oBACjC,oBAAoB,QAAQ,MAAM,UAAU,CAAC,IAAI;gBACnD;YACF;YAEA,YAAY;gBACV,4BAA4B;gBAC5B,MAAM;oBAAC,iBAAiB,MAAM,UAAU,CAAC,IAAI;oBAAE,oBAAoB;gBAAI;gBAEvE,kEAAkE;gBAClE,MAAM;YACR;QACF;IACF,GAAG;QAAC;QAAS;QAAa;QAAW;QAAO,MAAM,UAAU,CAAC,IAAI;KAAC;IAElE,CAAA,GAAA,uCAAgB,EAAE;QAAC,KAAK;QAAc,UAAU;IAAqB;IACrE,uDAAuD;IACvD,CAAA,GAAA,qCAAc,EAAE,uBAAuB;QAAC;KAAS;IAEjD,CAAA,GAAA,sBAAQ,EAAE;YACR,kDAAkD;QAClD;SAAA,kBAAA,SAAS,KAAK,cAAd,sCAAA,gBAAgB,KAAK,CAAC,IAAI,CAAC,IAAM;IACjC,uDAAuD;IACzD,GAAG,EAAE;IAEL,IAAI,cAAc,CAAA,GAAA,oBAAM,EAAE,IACxB;eAAI,MAAM,UAAU;SAAC,CAAC,KAAK,CAAC,GAAG,cAAc,SAAS,eAAe,GAAG,MAAM,UAAU,CAAC,IAAI,GAC7F;QAAC;QAAa,MAAM,UAAU;QAAE,SAAS,eAAe;KAAC;IAG3D,IAAI,sBAAsB;QACxB,iEAAiE;QACjE,MAAM,gBAAgB,CAAC,aAAa,CAAC;QACrC,eAAe,CAAA,gBAAiB,CAAC;IACnC;IAEA,IAAI,cAAc,SAAS,kBAAkB,IAAK,eAAe;IACjE,IAAI,UAAU,MAAM,UAAU,CAAC,IAAI,KAAK;IAExC,IAAI,iBAAiB,CAAA,GAAA,oBAAM,EAAE;QAC3B,IAAI,WAAW,QAAQ,CAAC,eAAe,SACrC,OAAO;QAET,IAAI,YAAY,AAAC,CAAA,gCAAU,CAAC,MAAM,CAAC,MAAM,GAAI,gCAAU,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,IAAK;QAC9E,OAAO;uBAAC;YAAW,UAAU;QAAQ;IACvC,GAAG;QAAC;QAAa;QAAS;QAAS;KAAM;IAEzC,qBACE,0DAAC,CAAA,GAAA,gCAAS,uBACR,0DAAC,CAAA,GAAA,+BAAI;QACF,GAAG,KAAK;QACT,YAAY;QACZ,kBAAkB;QAClB,mBAAmB;QACnB,eAAA;QACA,KAAK;QACL,aAAY;QACZ,kBACE,CAAA,GAAA,oCAAS,EACP,CAAA,GAAA,mDAAK,GACL,8BACA;YACE,4CAA4C,kBAAkB;QAChE;qBAGJ,0DAAC;QACC,KAAK;QACL,OAAO;QACP,WACE,CAAA,GAAA,oCAAS,EACP,CAAA,GAAA,mDAAK,GACL,2BACA;YACE,kCAAkC;QACpC;qBAGJ,0DAAC,CAAA,GAAA,+BAAQ;QAAE,gBAAgB,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;qBAC5C,0DAAC;QACC,KAAK;QACJ,GAAG,SAAS;QACb,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;OAC7B,YAAY,GAAG,CAAC,CAAA,qBACf,0DAAC,CAAA,GAAA,6BAAE;YACA,GAAG,KAAK,KAAK;YACd,KAAK,KAAK,GAAG;YACb,MAAM;YACN,OAAO;WACN,KAAK,QAAQ,IAGjB,yBACC,0DAAC;QAAI,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;OAChC,uBAKR,eAAe,CAAC,yBACf,0DAAC,CAAA,GAAA,qCAAO;QAAE,YAAY;qBACpB,0DAAC;QACC,MAAK;QACL,KAAK;QACL,IAAI;QACJ,cAAY,gBAAgB,MAAM,CAAC;QACnC,mBAAiB,GAAG,UAAU,EAAE,CAAC,CAAC,EAAE,WAAW;QAC/C,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;OAC7B,SAAS,kBAAkB,kBAC1B,0DAAC,CAAA,GAAA,uCAAW;QACV,SAAA;QACA,SAAS;QACT,kBAAkB,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;OACpC,cACC,gBAAgB,MAAM,CAAC,sBAAsB;QAAC,UAAU,MAAM,UAAU,CAAC,IAAI;IAAA,KAC7E,gBAAgB,MAAM,CAAC,qBAI5B,eAAe,0BACd,0DAAC,CAAA,GAAA,uCAAW;QACV,SAAA;QACA,SAAS,IAAM,qBAAA,+BAAA;QACf,kBAAkB,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;OACpC;AAUrB","sources":["packages/@react-spectrum/tag/src/TagGroup.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {ActionButton} from '@react-spectrum/button';\nimport {AriaTagGroupProps, useTagGroup} from '@react-aria/tag';\nimport {classNames, useDOMRef} from '@react-spectrum/utils';\nimport {Collection, DOMRef, Node, SpectrumLabelableProps, StyleProps, Validation} from '@react-types/shared';\nimport {Field} from '@react-spectrum/label';\nimport {FocusRing, FocusScope} from '@react-aria/focus';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {ListCollection, useListState} from '@react-stately/list';\nimport {ListKeyboardDelegate} from '@react-aria/selection';\nimport {Provider, useProvider, useProviderProps} from '@react-spectrum/provider';\nimport React, {JSX, ReactNode, useCallback, useEffect, useMemo, useRef, useState} from 'react';\nimport styles from '@adobe/spectrum-css-temp/components/tags/vars.css';\nimport {Tag} from './Tag';\nimport {useFormProps} from '@react-spectrum/form';\nimport {useId, useLayoutEffect, useResizeObserver, useValueEffect} from '@react-aria/utils';\nimport {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';\n\nconst TAG_STYLES = {\n medium: {\n height: 24,\n margin: 4\n },\n large: {\n height: 30,\n margin: 5\n }\n};\n\nexport interface SpectrumTagGroupProps<T> extends Omit<AriaTagGroupProps<T>, 'selectionMode' | 'disallowEmptySelection' | 'selectedKeys' | 'defaultSelectedKeys' | 'onSelectionChange' | 'selectionBehavior' | 'disabledKeys'>, StyleProps, Omit<SpectrumLabelableProps, 'isRequired' | 'necessityIndicator'>, Pick<Validation<any>, 'isInvalid' | 'validationState'> {\n /** The label to display on the action button. */\n actionLabel?: string,\n /** Handler that is called when the action button is pressed. */\n onAction?: () => void,\n /** Sets what the TagGroup should render when there are no tags to display. */\n renderEmptyState?: () => JSX.Element,\n /** Limit the number of rows initially shown. This will render a button that allows the user to expand to show all tags. */\n maxRows?: number\n}\n\n/** Tags allow users to categorize content. They can represent keywords or people, and are grouped to describe an item or a search request. */\nexport const TagGroup = React.forwardRef(function TagGroup<T extends object>(props: SpectrumTagGroupProps<T>, ref: DOMRef<HTMLDivElement>) {\n props = useProviderProps(props);\n props = useFormProps(props);\n let {\n maxRows,\n children,\n actionLabel,\n onAction,\n labelPosition,\n renderEmptyState = () => stringFormatter.format('noTags')\n } = props;\n let domRef = useDOMRef(ref);\n let containerRef = useRef<HTMLDivElement>(null);\n let tagsRef = useRef<HTMLDivElement | null>(null);\n let {direction} = useLocale();\n let {scale} = useProvider();\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/tag');\n let [isCollapsed, setIsCollapsed] = useState(maxRows != null);\n let state = useListState(props);\n let [tagState, setTagState] = useValueEffect({visibleTagCount: state.collection.size, showCollapseButton: false});\n let keyboardDelegate = useMemo(() => {\n let collection = (isCollapsed\n ? new ListCollection([...state.collection].slice(0, tagState.visibleTagCount))\n : new ListCollection([...state.collection])) as Collection<Node<T>>;\n return new ListKeyboardDelegate({\n collection,\n ref: tagsRef,\n direction,\n orientation: 'horizontal'\n });\n }, [direction, isCollapsed, state.collection, tagState.visibleTagCount, tagsRef]) as ListKeyboardDelegate<T>;\n // Remove onAction from props so it doesn't make it into useGridList.\n delete props.onAction;\n let {gridProps, labelProps, descriptionProps, errorMessageProps} = useTagGroup({...props, keyboardDelegate}, state, tagsRef);\n let actionsId = useId();\n let actionsRef = useRef<HTMLDivElement>(null);\n\n let updateVisibleTagCount = useCallback(() => {\n if (maxRows && maxRows > 0) {\n let computeVisibleTagCount = () => {\n // Refs can be null at runtime.\n let currContainerRef: HTMLDivElement | null = containerRef.current;\n let currTagsRef: HTMLDivElement | null = tagsRef.current;\n let currActionsRef: HTMLDivElement | null = actionsRef.current;\n if (!currContainerRef || !currTagsRef || !currActionsRef || state.collection.size === 0) {\n return {\n visibleTagCount: 0,\n showCollapseButton: false\n };\n }\n\n // Count rows and show tags until we hit the maxRows.\n let tags = [...currTagsRef.children];\n let currY = -Infinity;\n let rowCount = 0;\n let index = 0;\n let tagWidths: number[] = [];\n for (let tag of tags) {\n let {width, y} = tag.getBoundingClientRect();\n\n if (y !== currY) {\n currY = y;\n rowCount++;\n }\n\n if (maxRows && rowCount > maxRows) {\n break;\n }\n tagWidths.push(width);\n index++;\n }\n\n // Remove tags until there is space for the collapse button and action button (if present) on the last row.\n let buttons = [...currActionsRef.children];\n if (maxRows && buttons.length > 0 && rowCount >= maxRows && currContainerRef.parentElement) {\n let buttonsWidth = buttons.reduce((acc, curr) => acc += curr.getBoundingClientRect().width, 0);\n buttonsWidth += TAG_STYLES[scale].margin * 2 * buttons.length;\n let end = direction === 'ltr' ? 'right' : 'left';\n let containerEnd = currContainerRef.parentElement.getBoundingClientRect()[end];\n let lastTagEnd = tags[index - 1]?.getBoundingClientRect()[end];\n lastTagEnd += TAG_STYLES[scale].margin;\n let availableWidth = containerEnd - lastTagEnd;\n\n while (availableWidth < buttonsWidth && index > 0) {\n availableWidth += tagWidths.pop()!;\n index--;\n }\n }\n\n return {\n visibleTagCount: Math.max(index, 1),\n showCollapseButton: index < state.collection.size\n };\n };\n\n setTagState(function *() {\n // Update to show all items.\n yield {visibleTagCount: state.collection.size, showCollapseButton: true};\n\n // Measure, and update to show the items until maxRows is reached.\n yield computeVisibleTagCount();\n });\n }\n }, [maxRows, setTagState, direction, scale, state.collection.size]);\n\n useResizeObserver({ref: containerRef, onResize: updateVisibleTagCount});\n // eslint-disable-next-line react-hooks/exhaustive-deps\n useLayoutEffect(updateVisibleTagCount, [children]);\n\n useEffect(() => {\n // Recalculate visible tags when fonts are loaded.\n document.fonts?.ready.then(() => updateVisibleTagCount());\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n let visibleTags = useMemo(() =>\n [...state.collection].slice(0, isCollapsed ? tagState.visibleTagCount : state.collection.size),\n [isCollapsed, state.collection, tagState.visibleTagCount]\n );\n\n let handlePressCollapse = () => {\n // Prevents button from losing focus if focusedKey got collapsed.\n state.selectionManager.setFocusedKey(null);\n setIsCollapsed(prevCollapsed => !prevCollapsed);\n };\n\n let showActions = tagState.showCollapseButton || (actionLabel && onAction);\n let isEmpty = state.collection.size === 0;\n\n let containerStyle = useMemo(() => {\n if (maxRows == null || !isCollapsed || isEmpty) {\n return undefined;\n }\n let maxHeight = (TAG_STYLES[scale].height + (TAG_STYLES[scale].margin * 2)) * maxRows;\n return {maxHeight, overflow: 'hidden'};\n }, [isCollapsed, maxRows, isEmpty, scale]);\n\n return (\n <FocusScope>\n <Field\n {...props}\n labelProps={labelProps}\n descriptionProps={descriptionProps}\n errorMessageProps={errorMessageProps}\n showErrorIcon\n ref={domRef}\n elementType=\"span\"\n wrapperClassName={\n classNames(\n styles,\n 'spectrum-Tags-fieldWrapper',\n {\n 'spectrum-Tags-fieldWrapper--positionSide': labelPosition === 'side'\n }\n )\n }>\n <div\n ref={containerRef}\n style={containerStyle}\n className={\n classNames(\n styles,\n 'spectrum-Tags-container',\n {\n 'spectrum-Tags-container--empty': isEmpty\n }\n )\n }>\n <FocusRing focusRingClass={classNames(styles, 'focus-ring')}>\n <div\n ref={tagsRef}\n {...gridProps}\n className={classNames(styles, 'spectrum-Tags')}>\n {visibleTags.map(item => (\n <Tag\n {...item.props}\n key={item.key}\n item={item}\n state={state}>\n {item.rendered}\n </Tag>\n ))}\n {isEmpty && (\n <div className={classNames(styles, 'spectrum-Tags-empty-state')}>\n {renderEmptyState()}\n </div>\n )}\n </div>\n </FocusRing>\n {showActions && !isEmpty &&\n <Provider isDisabled={false}>\n <div\n role=\"group\"\n ref={actionsRef}\n id={actionsId}\n aria-label={stringFormatter.format('actions')}\n aria-labelledby={`${gridProps.id} ${actionsId}`}\n className={classNames(styles, 'spectrum-Tags-actions')}>\n {tagState.showCollapseButton &&\n <ActionButton\n isQuiet\n onPress={handlePressCollapse}\n UNSAFE_className={classNames(styles, 'spectrum-Tags-actionButton')}>\n {isCollapsed ?\n stringFormatter.format('showAllButtonLabel', {tagCount: state.collection.size}) :\n stringFormatter.format('hideButtonLabel')\n }\n </ActionButton>\n }\n {actionLabel && onAction &&\n <ActionButton\n isQuiet\n onPress={() => onAction?.()}\n UNSAFE_className={classNames(styles, 'spectrum-Tags-actionButton')}>\n {actionLabel}\n </ActionButton>\n }\n </div>\n </Provider>\n }\n </div>\n </Field>\n </FocusScope>\n );\n}) as <T>(props: SpectrumTagGroupProps<T> & {ref?: DOMRef<HTMLDivElement>}) => ReactNode;\n"],"names":[],"version":3,"file":"TagGroup.main.js.map"}
package/dist/TagGroup.mjs DELETED
@@ -1,264 +0,0 @@
1
- import $jTkY3$intlStringsmodulejs from "./intlStrings.mjs";
2
- import "./tag.9dd3cf2c.css";
3
- import $jTkY3$tags_vars_cssmodulejs from "./tags_vars_css.mjs";
4
- import {Tag as $b5f5ee35d3b6b95c$export$3288d34c523a1192} from "./Tag.mjs";
5
- import {ActionButton as $jTkY3$ActionButton} from "@react-spectrum/button";
6
- import {useTagGroup as $jTkY3$useTagGroup} from "@react-aria/tag";
7
- import {useDOMRef as $jTkY3$useDOMRef, classNames as $jTkY3$classNames} from "@react-spectrum/utils";
8
- import {Field as $jTkY3$Field} from "@react-spectrum/label";
9
- import {FocusScope as $jTkY3$FocusScope, FocusRing as $jTkY3$FocusRing} from "@react-aria/focus";
10
- import {useListState as $jTkY3$useListState, ListCollection as $jTkY3$ListCollection} from "@react-stately/list";
11
- import {ListKeyboardDelegate as $jTkY3$ListKeyboardDelegate} from "@react-aria/selection";
12
- import {useProviderProps as $jTkY3$useProviderProps, useProvider as $jTkY3$useProvider, Provider as $jTkY3$Provider} from "@react-spectrum/provider";
13
- import $jTkY3$react, {useRef as $jTkY3$useRef, useState as $jTkY3$useState, useMemo as $jTkY3$useMemo, useCallback as $jTkY3$useCallback, useEffect as $jTkY3$useEffect} from "react";
14
- import {useFormProps as $jTkY3$useFormProps} from "@react-spectrum/form";
15
- import {useValueEffect as $jTkY3$useValueEffect, useId as $jTkY3$useId, useResizeObserver as $jTkY3$useResizeObserver, useLayoutEffect as $jTkY3$useLayoutEffect} from "@react-aria/utils";
16
- import {useLocale as $jTkY3$useLocale, useLocalizedStringFormatter as $jTkY3$useLocalizedStringFormatter} from "@react-aria/i18n";
17
-
18
-
19
- function $parcel$interopDefault(a) {
20
- return a && a.__esModule ? a.default : a;
21
- }
22
- /*
23
- * Copyright 2020 Adobe. All rights reserved.
24
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
25
- * you may not use this file except in compliance with the License. You may obtain a copy
26
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
27
- *
28
- * Unless required by applicable law or agreed to in writing, software distributed under
29
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
30
- * OF ANY KIND, either express or implied. See the License for the specific language
31
- * governing permissions and limitations under the License.
32
- */
33
-
34
-
35
-
36
-
37
-
38
-
39
-
40
-
41
-
42
-
43
-
44
-
45
-
46
-
47
- const $880d112c7a588209$var$TAG_STYLES = {
48
- medium: {
49
- height: 24,
50
- margin: 4
51
- },
52
- large: {
53
- height: 30,
54
- margin: 5
55
- }
56
- };
57
- const $880d112c7a588209$export$67ea30858aaf75e3 = /*#__PURE__*/ (0, $jTkY3$react).forwardRef(function TagGroup(props, ref) {
58
- props = (0, $jTkY3$useProviderProps)(props);
59
- props = (0, $jTkY3$useFormProps)(props);
60
- let { maxRows: maxRows, children: children, actionLabel: actionLabel, onAction: onAction, labelPosition: labelPosition, renderEmptyState: renderEmptyState = ()=>stringFormatter.format('noTags') } = props;
61
- let domRef = (0, $jTkY3$useDOMRef)(ref);
62
- let containerRef = (0, $jTkY3$useRef)(null);
63
- let tagsRef = (0, $jTkY3$useRef)(null);
64
- let { direction: direction } = (0, $jTkY3$useLocale)();
65
- let { scale: scale } = (0, $jTkY3$useProvider)();
66
- let stringFormatter = (0, $jTkY3$useLocalizedStringFormatter)((0, ($parcel$interopDefault($jTkY3$intlStringsmodulejs))), '@react-spectrum/tag');
67
- let [isCollapsed, setIsCollapsed] = (0, $jTkY3$useState)(maxRows != null);
68
- let state = (0, $jTkY3$useListState)(props);
69
- let [tagState, setTagState] = (0, $jTkY3$useValueEffect)({
70
- visibleTagCount: state.collection.size,
71
- showCollapseButton: false
72
- });
73
- let keyboardDelegate = (0, $jTkY3$useMemo)(()=>{
74
- let collection = isCollapsed ? new (0, $jTkY3$ListCollection)([
75
- ...state.collection
76
- ].slice(0, tagState.visibleTagCount)) : new (0, $jTkY3$ListCollection)([
77
- ...state.collection
78
- ]);
79
- return new (0, $jTkY3$ListKeyboardDelegate)({
80
- collection: collection,
81
- ref: tagsRef,
82
- direction: direction,
83
- orientation: 'horizontal'
84
- });
85
- }, [
86
- direction,
87
- isCollapsed,
88
- state.collection,
89
- tagState.visibleTagCount,
90
- tagsRef
91
- ]);
92
- // Remove onAction from props so it doesn't make it into useGridList.
93
- delete props.onAction;
94
- let { gridProps: gridProps, labelProps: labelProps, descriptionProps: descriptionProps, errorMessageProps: errorMessageProps } = (0, $jTkY3$useTagGroup)({
95
- ...props,
96
- keyboardDelegate: keyboardDelegate
97
- }, state, tagsRef);
98
- let actionsId = (0, $jTkY3$useId)();
99
- let actionsRef = (0, $jTkY3$useRef)(null);
100
- let updateVisibleTagCount = (0, $jTkY3$useCallback)(()=>{
101
- if (maxRows && maxRows > 0) {
102
- let computeVisibleTagCount = ()=>{
103
- // Refs can be null at runtime.
104
- let currContainerRef = containerRef.current;
105
- let currTagsRef = tagsRef.current;
106
- let currActionsRef = actionsRef.current;
107
- if (!currContainerRef || !currTagsRef || !currActionsRef || state.collection.size === 0) return {
108
- visibleTagCount: 0,
109
- showCollapseButton: false
110
- };
111
- // Count rows and show tags until we hit the maxRows.
112
- let tags = [
113
- ...currTagsRef.children
114
- ];
115
- let currY = -Infinity;
116
- let rowCount = 0;
117
- let index = 0;
118
- let tagWidths = [];
119
- for (let tag of tags){
120
- let { width: width, y: y } = tag.getBoundingClientRect();
121
- if (y !== currY) {
122
- currY = y;
123
- rowCount++;
124
- }
125
- if (maxRows && rowCount > maxRows) break;
126
- tagWidths.push(width);
127
- index++;
128
- }
129
- // Remove tags until there is space for the collapse button and action button (if present) on the last row.
130
- let buttons = [
131
- ...currActionsRef.children
132
- ];
133
- if (maxRows && buttons.length > 0 && rowCount >= maxRows && currContainerRef.parentElement) {
134
- var _tags_;
135
- let buttonsWidth = buttons.reduce((acc, curr)=>acc += curr.getBoundingClientRect().width, 0);
136
- buttonsWidth += $880d112c7a588209$var$TAG_STYLES[scale].margin * 2 * buttons.length;
137
- let end = direction === 'ltr' ? 'right' : 'left';
138
- let containerEnd = currContainerRef.parentElement.getBoundingClientRect()[end];
139
- let lastTagEnd = (_tags_ = tags[index - 1]) === null || _tags_ === void 0 ? void 0 : _tags_.getBoundingClientRect()[end];
140
- lastTagEnd += $880d112c7a588209$var$TAG_STYLES[scale].margin;
141
- let availableWidth = containerEnd - lastTagEnd;
142
- while(availableWidth < buttonsWidth && index > 0){
143
- availableWidth += tagWidths.pop();
144
- index--;
145
- }
146
- }
147
- return {
148
- visibleTagCount: Math.max(index, 1),
149
- showCollapseButton: index < state.collection.size
150
- };
151
- };
152
- setTagState(function*() {
153
- // Update to show all items.
154
- yield {
155
- visibleTagCount: state.collection.size,
156
- showCollapseButton: true
157
- };
158
- // Measure, and update to show the items until maxRows is reached.
159
- yield computeVisibleTagCount();
160
- });
161
- }
162
- }, [
163
- maxRows,
164
- setTagState,
165
- direction,
166
- scale,
167
- state.collection.size
168
- ]);
169
- (0, $jTkY3$useResizeObserver)({
170
- ref: containerRef,
171
- onResize: updateVisibleTagCount
172
- });
173
- // eslint-disable-next-line react-hooks/exhaustive-deps
174
- (0, $jTkY3$useLayoutEffect)(updateVisibleTagCount, [
175
- children
176
- ]);
177
- (0, $jTkY3$useEffect)(()=>{
178
- var // Recalculate visible tags when fonts are loaded.
179
- _document_fonts;
180
- (_document_fonts = document.fonts) === null || _document_fonts === void 0 ? void 0 : _document_fonts.ready.then(()=>updateVisibleTagCount());
181
- // eslint-disable-next-line react-hooks/exhaustive-deps
182
- }, []);
183
- let visibleTags = (0, $jTkY3$useMemo)(()=>[
184
- ...state.collection
185
- ].slice(0, isCollapsed ? tagState.visibleTagCount : state.collection.size), [
186
- isCollapsed,
187
- state.collection,
188
- tagState.visibleTagCount
189
- ]);
190
- let handlePressCollapse = ()=>{
191
- // Prevents button from losing focus if focusedKey got collapsed.
192
- state.selectionManager.setFocusedKey(null);
193
- setIsCollapsed((prevCollapsed)=>!prevCollapsed);
194
- };
195
- let showActions = tagState.showCollapseButton || actionLabel && onAction;
196
- let isEmpty = state.collection.size === 0;
197
- let containerStyle = (0, $jTkY3$useMemo)(()=>{
198
- if (maxRows == null || !isCollapsed || isEmpty) return undefined;
199
- let maxHeight = ($880d112c7a588209$var$TAG_STYLES[scale].height + $880d112c7a588209$var$TAG_STYLES[scale].margin * 2) * maxRows;
200
- return {
201
- maxHeight: maxHeight,
202
- overflow: 'hidden'
203
- };
204
- }, [
205
- isCollapsed,
206
- maxRows,
207
- isEmpty,
208
- scale
209
- ]);
210
- return /*#__PURE__*/ (0, $jTkY3$react).createElement((0, $jTkY3$FocusScope), null, /*#__PURE__*/ (0, $jTkY3$react).createElement((0, $jTkY3$Field), {
211
- ...props,
212
- labelProps: labelProps,
213
- descriptionProps: descriptionProps,
214
- errorMessageProps: errorMessageProps,
215
- showErrorIcon: true,
216
- ref: domRef,
217
- elementType: "span",
218
- wrapperClassName: (0, $jTkY3$classNames)((0, ($parcel$interopDefault($jTkY3$tags_vars_cssmodulejs))), 'spectrum-Tags-fieldWrapper', {
219
- 'spectrum-Tags-fieldWrapper--positionSide': labelPosition === 'side'
220
- })
221
- }, /*#__PURE__*/ (0, $jTkY3$react).createElement("div", {
222
- ref: containerRef,
223
- style: containerStyle,
224
- className: (0, $jTkY3$classNames)((0, ($parcel$interopDefault($jTkY3$tags_vars_cssmodulejs))), 'spectrum-Tags-container', {
225
- 'spectrum-Tags-container--empty': isEmpty
226
- })
227
- }, /*#__PURE__*/ (0, $jTkY3$react).createElement((0, $jTkY3$FocusRing), {
228
- focusRingClass: (0, $jTkY3$classNames)((0, ($parcel$interopDefault($jTkY3$tags_vars_cssmodulejs))), 'focus-ring')
229
- }, /*#__PURE__*/ (0, $jTkY3$react).createElement("div", {
230
- ref: tagsRef,
231
- ...gridProps,
232
- className: (0, $jTkY3$classNames)((0, ($parcel$interopDefault($jTkY3$tags_vars_cssmodulejs))), 'spectrum-Tags')
233
- }, visibleTags.map((item)=>/*#__PURE__*/ (0, $jTkY3$react).createElement((0, $b5f5ee35d3b6b95c$export$3288d34c523a1192), {
234
- ...item.props,
235
- key: item.key,
236
- item: item,
237
- state: state
238
- }, item.rendered)), isEmpty && /*#__PURE__*/ (0, $jTkY3$react).createElement("div", {
239
- className: (0, $jTkY3$classNames)((0, ($parcel$interopDefault($jTkY3$tags_vars_cssmodulejs))), 'spectrum-Tags-empty-state')
240
- }, renderEmptyState()))), showActions && !isEmpty && /*#__PURE__*/ (0, $jTkY3$react).createElement((0, $jTkY3$Provider), {
241
- isDisabled: false
242
- }, /*#__PURE__*/ (0, $jTkY3$react).createElement("div", {
243
- role: "group",
244
- ref: actionsRef,
245
- id: actionsId,
246
- "aria-label": stringFormatter.format('actions'),
247
- "aria-labelledby": `${gridProps.id} ${actionsId}`,
248
- className: (0, $jTkY3$classNames)((0, ($parcel$interopDefault($jTkY3$tags_vars_cssmodulejs))), 'spectrum-Tags-actions')
249
- }, tagState.showCollapseButton && /*#__PURE__*/ (0, $jTkY3$react).createElement((0, $jTkY3$ActionButton), {
250
- isQuiet: true,
251
- onPress: handlePressCollapse,
252
- UNSAFE_className: (0, $jTkY3$classNames)((0, ($parcel$interopDefault($jTkY3$tags_vars_cssmodulejs))), 'spectrum-Tags-actionButton')
253
- }, isCollapsed ? stringFormatter.format('showAllButtonLabel', {
254
- tagCount: state.collection.size
255
- }) : stringFormatter.format('hideButtonLabel')), actionLabel && onAction && /*#__PURE__*/ (0, $jTkY3$react).createElement((0, $jTkY3$ActionButton), {
256
- isQuiet: true,
257
- onPress: ()=>onAction === null || onAction === void 0 ? void 0 : onAction(),
258
- UNSAFE_className: (0, $jTkY3$classNames)((0, ($parcel$interopDefault($jTkY3$tags_vars_cssmodulejs))), 'spectrum-Tags-actionButton')
259
- }, actionLabel))))));
260
- });
261
-
262
-
263
- export {$880d112c7a588209$export$67ea30858aaf75e3 as TagGroup};
264
- //# sourceMappingURL=TagGroup.module.js.map