@react-spectrum/actiongroup 3.10.5-nightly.4624 → 3.10.5

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 (4) hide show
  1. package/dist/ActionGroup.main.js +53 -53
  2. package/dist/ActionGroup.mjs +53 -53
  3. package/dist/ActionGroup.module.js +53 -53
  4. package/package.json +18 -18
package/dist/ActionGroup.main.js CHANGED
@@ -55,8 +55,8 @@ $parcel$export(module.exports, "ActionGroup", () => $9f46a6387592b67c$export$c21
55
55
 
56
56
  function $9f46a6387592b67c$var$ActionGroup(props, ref) {
57
57
  props = (0, $2RJq8$reactspectrumprovider.useProviderProps)(props);
58
- props = (0, $2RJq8$reactspectrumutils.useSlotProps)(props, "actionGroup");
59
- let { isEmphasized: isEmphasized, density: density, isJustified: isJustified, isDisabled: isDisabled, orientation: orientation = "horizontal", isQuiet: isQuiet, staticColor: staticColor, overflowMode: overflowMode = "wrap", onAction: onAction, buttonLabelBehavior: buttonLabelBehavior, summaryIcon: summaryIcon, ...otherProps } = props;
58
+ props = (0, $2RJq8$reactspectrumutils.useSlotProps)(props, 'actionGroup');
59
+ let { isEmphasized: isEmphasized, density: density, isJustified: isJustified, isDisabled: isDisabled, orientation: orientation = 'horizontal', isQuiet: isQuiet, staticColor: staticColor, overflowMode: overflowMode = 'wrap', onAction: onAction, buttonLabelBehavior: buttonLabelBehavior, summaryIcon: summaryIcon, ...otherProps } = props;
60
60
  let domRef = (0, $2RJq8$reactspectrumutils.useDOMRef)(ref);
61
61
  let wrapperRef = (0, $2RJq8$react.useRef)(null);
62
62
  let state = (0, $2RJq8$reactstatelylist.useListState)({
@@ -64,7 +64,7 @@ function $9f46a6387592b67c$var$ActionGroup(props, ref) {
64
64
  suppressTextValueWarning: true
65
65
  });
66
66
  let { actionGroupProps: actionGroupProps } = (0, $2RJq8$reactariaactiongroup.useActionGroup)(props, state, domRef);
67
- let isVertical = orientation === "vertical";
67
+ let isVertical = orientation === 'vertical';
68
68
  let providerProps = {
69
69
  isEmphasized: isEmphasized,
70
70
  isDisabled: isDisabled,
@@ -74,44 +74,44 @@ function $9f46a6387592b67c$var$ActionGroup(props, ref) {
74
74
  // Only hide button text if every item contains more than just plain text (we assume an icon).
75
75
  let isIconCollapsible = (0, $2RJq8$react.useMemo)(()=>[
76
76
  ...state.collection
77
- ].every((item)=>typeof item.rendered !== "string"), [
77
+ ].every((item)=>typeof item.rendered !== 'string'), [
78
78
  state.collection
79
79
  ]);
80
80
  let [{ visibleItems: visibleItems, hideButtonText: hideButtonText, isMeasuring: isMeasuring }, setVisibleItems] = (0, $2RJq8$reactariautils.useValueEffect)({
81
81
  visibleItems: state.collection.size,
82
- hideButtonText: buttonLabelBehavior === "hide" && isIconCollapsible,
82
+ hideButtonText: buttonLabelBehavior === 'hide' && isIconCollapsible,
83
83
  isMeasuring: false
84
84
  });
85
85
  let selectionMode = state.selectionManager.selectionMode;
86
86
  let updateOverflow = (0, $2RJq8$react.useCallback)(()=>{
87
- if (overflowMode === "wrap") return;
88
- if (orientation === "vertical" && selectionMode !== "none") // Collapsing vertical action groups with selection is currently unsupported by Spectrum.
87
+ if (overflowMode === 'wrap') return;
88
+ if (orientation === 'vertical' && selectionMode !== 'none') // Collapsing vertical action groups with selection is currently unsupported by Spectrum.
89
89
  return;
90
90
  let computeVisibleItems = (visibleItems)=>{
91
91
  if (domRef.current && wrapperRef.current) {
92
92
  let listItems = Array.from(domRef.current.children);
93
- let containerSize = orientation === "horizontal" ? wrapperRef.current.getBoundingClientRect().width : wrapperRef.current.getBoundingClientRect().height;
93
+ let containerSize = orientation === 'horizontal' ? wrapperRef.current.getBoundingClientRect().width : wrapperRef.current.getBoundingClientRect().height;
94
94
  let isShowingMenu = visibleItems < state.collection.size;
95
95
  let calculatedSize = 0;
96
96
  let newVisibleItems = 0;
97
97
  if (isShowingMenu) {
98
98
  let item = listItems.pop();
99
- if (item) calculatedSize += orientation === "horizontal" ? $9f46a6387592b67c$var$outerWidth(item, false, true) : $9f46a6387592b67c$var$outerHeight(item, false, true);
99
+ if (item) calculatedSize += orientation === 'horizontal' ? $9f46a6387592b67c$var$outerWidth(item, false, true) : $9f46a6387592b67c$var$outerHeight(item, false, true);
100
100
  }
101
101
  for (let [i, item] of listItems.entries()){
102
- calculatedSize += orientation === "horizontal" ? $9f46a6387592b67c$var$outerWidth(item, i === 0, i === listItems.length - 1) : $9f46a6387592b67c$var$outerHeight(item, i === 0, i === listItems.length - 1);
102
+ calculatedSize += orientation === 'horizontal' ? $9f46a6387592b67c$var$outerWidth(item, i === 0, i === listItems.length - 1) : $9f46a6387592b67c$var$outerHeight(item, i === 0, i === listItems.length - 1);
103
103
  if (Math.round(calculatedSize) <= Math.round(containerSize)) newVisibleItems++;
104
104
  else break;
105
105
  }
106
106
  // If selection is enabled, and not all of the items fit, collapse all of them into a dropdown
107
107
  // immediately rather than having some visible and some not.
108
- if (selectionMode !== "none" && newVisibleItems < state.collection.size) return 0;
108
+ if (selectionMode !== 'none' && newVisibleItems < state.collection.size) return 0;
109
109
  return newVisibleItems;
110
110
  }
111
111
  return visibleItems;
112
112
  };
113
113
  setVisibleItems(function*() {
114
- let hideButtonText = buttonLabelBehavior === "hide" && isIconCollapsible;
114
+ let hideButtonText = buttonLabelBehavior === 'hide' && isIconCollapsible;
115
115
  // Update to show all items.
116
116
  yield {
117
117
  visibleItems: state.collection.size,
@@ -123,7 +123,7 @@ function $9f46a6387592b67c$var$ActionGroup(props, ref) {
123
123
  let isMeasuring = newVisibleItems < state.collection.size && newVisibleItems > 0;
124
124
  // If not all of the buttons fit, and buttonLabelBehavior is 'collapse', then first try hiding
125
125
  // the button text and only showing icons. Only if that still doesn't fit collapse into a menu.
126
- if (newVisibleItems < state.collection.size && buttonLabelBehavior === "collapse" && isIconCollapsible) {
126
+ if (newVisibleItems < state.collection.size && buttonLabelBehavior === 'collapse' && isIconCollapsible) {
127
127
  yield {
128
128
  visibleItems: state.collection.size,
129
129
  hideButtonText: true,
@@ -167,7 +167,7 @@ function $9f46a6387592b67c$var$ActionGroup(props, ref) {
167
167
  wrapperRef
168
168
  ]);
169
169
  (0, $2RJq8$reactariautils.useResizeObserver)({
170
- ref: overflowMode !== "wrap" ? parentRef : undefined,
170
+ ref: overflowMode !== 'wrap' ? parentRef : undefined,
171
171
  onResize: updateOverflow
172
172
  });
173
173
  (0, $2RJq8$reactariautils.useLayoutEffect)(updateOverflow, [
@@ -181,13 +181,13 @@ function $9f46a6387592b67c$var$ActionGroup(props, ref) {
181
181
  let menuProps = {};
182
182
  // If there are no visible items, don't apply any props to the action group container
183
183
  // and pass all aria labeling props through to the menu button.
184
- if (overflowMode === "collapse" && visibleItems === 0) {
184
+ if (overflowMode === 'collapse' && visibleItems === 0) {
185
185
  menuProps = (0, $2RJq8$reactariautils.filterDOMProps)(props, {
186
186
  labelable: true
187
187
  });
188
188
  actionGroupProps = {};
189
189
  }
190
- if (overflowMode === "collapse" && visibleItems < state.collection.size) {
190
+ if (overflowMode === 'collapse' && visibleItems < state.collection.size) {
191
191
  let menuChildren = children.slice(visibleItems);
192
192
  children = children.slice(0, visibleItems);
193
193
  menuItem = /*#__PURE__*/ (0, ($parcel$interopDefault($2RJq8$react))).createElement($9f46a6387592b67c$var$ActionGroupMenu, {
@@ -207,22 +207,22 @@ function $9f46a6387592b67c$var$ActionGroup(props, ref) {
207
207
  let style = {
208
208
  ...styleProps.style,
209
209
  // While measuring, take up as much space as possible.
210
- flexBasis: isMeasuring ? "100%" : undefined
210
+ flexBasis: isMeasuring ? '100%' : undefined
211
211
  };
212
212
  return /*#__PURE__*/ (0, ($parcel$interopDefault($2RJq8$react))).createElement((0, $2RJq8$reactariafocus.FocusScope), null, /*#__PURE__*/ (0, ($parcel$interopDefault($2RJq8$react))).createElement("div", {
213
213
  ...styleProps,
214
214
  style: style,
215
- className: (0, $2RJq8$reactspectrumutils.classNames)((0, ($parcel$interopDefault($d9f76447f7a8d3f9$exports))), "flex-container", styleProps.className),
215
+ className: (0, $2RJq8$reactspectrumutils.classNames)((0, ($parcel$interopDefault($d9f76447f7a8d3f9$exports))), 'flex-container', styleProps.className),
216
216
  ref: wrapperRef
217
217
  }, /*#__PURE__*/ (0, ($parcel$interopDefault($2RJq8$react))).createElement("div", {
218
218
  ...actionGroupProps,
219
219
  ref: domRef,
220
- className: (0, $2RJq8$reactspectrumutils.classNames)((0, ($parcel$interopDefault($d9f76447f7a8d3f9$exports))), "flex-gap", "spectrum-ActionGroup", {
221
- "spectrum-ActionGroup--quiet": isQuiet,
222
- "spectrum-ActionGroup--vertical": isVertical,
223
- "spectrum-ActionGroup--compact": density === "compact",
224
- "spectrum-ActionGroup--justified": isJustified && !isMeasuring,
225
- "spectrum-ActionGroup--overflowCollapse": overflowMode === "collapse"
220
+ className: (0, $2RJq8$reactspectrumutils.classNames)((0, ($parcel$interopDefault($d9f76447f7a8d3f9$exports))), 'flex-gap', 'spectrum-ActionGroup', {
221
+ 'spectrum-ActionGroup--quiet': isQuiet,
222
+ 'spectrum-ActionGroup--vertical': isVertical,
223
+ 'spectrum-ActionGroup--compact': density === 'compact',
224
+ 'spectrum-ActionGroup--justified': isJustified && !isMeasuring,
225
+ 'spectrum-ActionGroup--overflowCollapse': overflowMode === 'collapse'
226
226
  }, otherProps.UNSAFE_className)
227
227
  }, /*#__PURE__*/ (0, ($parcel$interopDefault($2RJq8$react))).createElement((0, $2RJq8$reactspectrumprovider.Provider), providerProps, children.map((item)=>/*#__PURE__*/ (0, ($parcel$interopDefault($2RJq8$react))).createElement($9f46a6387592b67c$var$ActionGroupItem, {
228
228
  key: item.key,
@@ -256,7 +256,7 @@ function $9f46a6387592b67c$var$ActionGroupItem({ item: item, state: state, isDis
256
256
  // If button text is hidden, we need to show it as a tooltip instead, so
257
257
  // go find the text element in the DOM after rendering.
258
258
  let textId = (0, $2RJq8$reactariautils.useId)();
259
- let [textContent, setTextContent] = (0, $2RJq8$react.useState)("");
259
+ let [textContent, setTextContent] = (0, $2RJq8$react.useState)('');
260
260
  (0, $2RJq8$reactariautils.useLayoutEffect)(()=>{
261
261
  var _document_getElementById;
262
262
  if (hideButtonText) setTextContent((_document_getElementById = document.getElementById(textId)) === null || _document_getElementById === void 0 ? void 0 : _document_getElementById.textContent);
@@ -278,22 +278,22 @@ function $9f46a6387592b67c$var$ActionGroupItem({ item: item, state: state, isDis
278
278
  ref: ref,
279
279
  // @ts-ignore (private)
280
280
  hideButtonText: hideButtonText,
281
- UNSAFE_className: (0, $2RJq8$reactspectrumutils.classNames)((0, ($parcel$interopDefault($d9f76447f7a8d3f9$exports))), "spectrum-ActionGroup-item", {
282
- "is-selected": isSelected,
283
- "is-hovered": isHovered,
284
- "spectrum-ActionGroup-item--iconOnly": hideButtonText,
285
- "spectrum-ActionGroup-item--isDisabled": isDisabled
281
+ UNSAFE_className: (0, $2RJq8$reactspectrumutils.classNames)((0, ($parcel$interopDefault($d9f76447f7a8d3f9$exports))), 'spectrum-ActionGroup-item', {
282
+ 'is-selected': isSelected,
283
+ 'is-hovered': isHovered,
284
+ 'spectrum-ActionGroup-item--iconOnly': hideButtonText,
285
+ 'spectrum-ActionGroup-item--isDisabled': isDisabled
286
286
  }, (0, $2RJq8$reactspectrumutils.classNames)((0, ($parcel$interopDefault($afc5a4514aca2340$exports))), {
287
- "spectrum-ActionButton--emphasized": isEmphasized,
288
- "is-selected": isSelected
287
+ 'spectrum-ActionButton--emphasized': isEmphasized,
288
+ 'is-selected': isSelected
289
289
  })),
290
290
  isDisabled: isDisabled,
291
291
  staticColor: staticColor,
292
- "aria-label": item["aria-label"],
293
- "aria-labelledby": item["aria-label"] == null && hideButtonText ? textId : undefined
292
+ "aria-label": item['aria-label'],
293
+ "aria-labelledby": item['aria-label'] == null && hideButtonText ? textId : undefined
294
294
  }, item.rendered))));
295
295
  if (hideButtonText && textContent) button = /*#__PURE__*/ (0, ($parcel$interopDefault($2RJq8$react))).createElement((0, $2RJq8$reactspectrumtooltip.TooltipTrigger), {
296
- placement: orientation === "vertical" ? "end" : "top"
296
+ placement: orientation === 'vertical' ? 'end' : 'top'
297
297
  }, button, /*#__PURE__*/ (0, ($parcel$interopDefault($2RJq8$react))).createElement((0, $2RJq8$reactspectrumtooltip.Tooltip), null, textContent));
298
298
  if (item.wrapper) button = item.wrapper(button);
299
299
  return button;
@@ -308,48 +308,48 @@ function $9f46a6387592b67c$var$ActionGroupMenu({ state: state, isDisabled: isDis
308
308
  // The menu button shouldn't act like an actual action group item.
309
309
  delete buttonProps.onPress;
310
310
  delete buttonProps.role;
311
- delete buttonProps["aria-checked"];
311
+ delete buttonProps['aria-checked'];
312
312
  let { hoverProps: hoverProps, isHovered: isHovered } = (0, $2RJq8$reactariainteractions.useHover)({
313
313
  isDisabled: isDisabled
314
314
  });
315
315
  // If no aria-label or aria-labelledby is given, provide a default one.
316
- let ariaLabel = otherProps["aria-label"] || (otherProps["aria-labelledby"] ? undefined : "\u2026");
317
- let ariaLabelledby = otherProps["aria-labelledby"];
316
+ let ariaLabel = otherProps['aria-label'] || (otherProps['aria-labelledby'] ? undefined : "\u2026");
317
+ let ariaLabelledby = otherProps['aria-labelledby'];
318
318
  let textId = (0, $2RJq8$reactariautils.useId)();
319
319
  let id = (0, $2RJq8$reactariautils.useId)();
320
320
  // Summary icon only applies when selection is enabled.
321
- if (state.selectionManager.selectionMode === "none") summaryIcon = null;
321
+ if (state.selectionManager.selectionMode === 'none') summaryIcon = null;
322
322
  let iconOnly = false;
323
323
  // If there is a selection, show the selected state on the menu button.
324
- let isSelected = state.selectionManager.selectionMode !== "none" && !state.selectionManager.isEmpty;
324
+ let isSelected = state.selectionManager.selectionMode !== 'none' && !state.selectionManager.isEmpty;
325
325
  // If single selection and empty selection is not allowed, swap the contents of the button to the selected item (like a Picker).
326
- if (!summaryIcon && state.selectionManager.selectionMode === "single" && state.selectionManager.disallowEmptySelection && state.selectionManager.firstSelectedKey != null) {
326
+ if (!summaryIcon && state.selectionManager.selectionMode === 'single' && state.selectionManager.disallowEmptySelection && state.selectionManager.firstSelectedKey != null) {
327
327
  let selectedItem = state.collection.getItem(state.selectionManager.firstSelectedKey);
328
328
  if (selectedItem) {
329
329
  summaryIcon = selectedItem.rendered;
330
- if (typeof summaryIcon === "string") summaryIcon = /*#__PURE__*/ (0, ($parcel$interopDefault($2RJq8$react))).createElement((0, $2RJq8$reactspectrumtext.Text), null, summaryIcon);
330
+ if (typeof summaryIcon === 'string') summaryIcon = /*#__PURE__*/ (0, ($parcel$interopDefault($2RJq8$react))).createElement((0, $2RJq8$reactspectrumtext.Text), null, summaryIcon);
331
331
  iconOnly = !!hideButtonText;
332
332
  ariaLabelledby = `${ariaLabelledby !== null && ariaLabelledby !== void 0 ? ariaLabelledby : id} ${textId}`;
333
333
  }
334
334
  }
335
335
  if (summaryIcon) // If there's a custom summary icon, also add a chevron.
336
336
  summaryIcon = /*#__PURE__*/ (0, ($parcel$interopDefault($2RJq8$react))).createElement((0, ($parcel$interopDefault($2RJq8$react))).Fragment, null, /*#__PURE__*/ (0, ($parcel$interopDefault($2RJq8$react))).createElement((0, ($parcel$interopDefault($2RJq8$spectrumiconsuiChevronDownMedium))), {
337
- UNSAFE_className: (0, $2RJq8$reactspectrumutils.classNames)((0, ($parcel$interopDefault($d9f76447f7a8d3f9$exports))), "spectrum-ActionGroup-menu-chevron")
337
+ UNSAFE_className: (0, $2RJq8$reactspectrumutils.classNames)((0, ($parcel$interopDefault($d9f76447f7a8d3f9$exports))), 'spectrum-ActionGroup-menu-chevron')
338
338
  }), /*#__PURE__*/ (0, ($parcel$interopDefault($2RJq8$react))).createElement("span", {
339
- className: (0, $2RJq8$reactspectrumutils.classNames)((0, ($parcel$interopDefault($d9f76447f7a8d3f9$exports))), "spectrum-ActionGroup-menu-contents", {
340
- "spectrum-ActionGroup-item--iconOnly": iconOnly
339
+ className: (0, $2RJq8$reactspectrumutils.classNames)((0, ($parcel$interopDefault($d9f76447f7a8d3f9$exports))), 'spectrum-ActionGroup-menu-contents', {
340
+ 'spectrum-ActionGroup-item--iconOnly': iconOnly
341
341
  })
342
342
  }, summaryIcon));
343
343
  return(// Use a PressResponder to send DOM props through.
344
344
  /*#__PURE__*/ (0, ($parcel$interopDefault($2RJq8$react))).createElement((0, $2RJq8$reactspectrummenu.MenuTrigger), {
345
- align: isOnlyItem ? "start" : "end",
346
- direction: orientation === "vertical" ? "end" : "bottom"
345
+ align: isOnlyItem ? 'start' : 'end',
346
+ direction: orientation === 'vertical' ? 'end' : 'bottom'
347
347
  }, /*#__PURE__*/ (0, ($parcel$interopDefault($2RJq8$react))).createElement((0, $2RJq8$reactspectrumutils.SlotProvider), {
348
348
  slots: {
349
349
  text: {
350
350
  id: hideButtonText ? textId : null,
351
351
  isHidden: hideButtonText,
352
- UNSAFE_className: (0, $2RJq8$reactspectrumutils.classNames)((0, ($parcel$interopDefault($d9f76447f7a8d3f9$exports))), "spectrum-ActionGroup-menu-text")
352
+ UNSAFE_className: (0, $2RJq8$reactspectrumutils.classNames)((0, ($parcel$interopDefault($d9f76447f7a8d3f9$exports))), 'spectrum-ActionGroup-menu-text')
353
353
  }
354
354
  }
355
355
  }, /*#__PURE__*/ (0, ($parcel$interopDefault($2RJq8$react))).createElement((0, $2RJq8$reactariainteractions.PressResponder), (0, $2RJq8$reactariautils.mergeProps)(buttonProps, hoverProps), /*#__PURE__*/ (0, ($parcel$interopDefault($2RJq8$react))).createElement((0, $2RJq8$reactspectrumbutton.ActionButton), {
@@ -357,12 +357,12 @@ function $9f46a6387592b67c$var$ActionGroupMenu({ state: state, isDisabled: isDis
357
357
  id: id,
358
358
  "aria-label": ariaLabel,
359
359
  "aria-labelledby": ariaLabelledby,
360
- UNSAFE_className: (0, $2RJq8$reactspectrumutils.classNames)((0, ($parcel$interopDefault($d9f76447f7a8d3f9$exports))), "spectrum-ActionGroup-item", "spectrum-ActionGroup-menu", {
361
- "is-hovered": isHovered,
362
- "is-selected": isSelected
360
+ UNSAFE_className: (0, $2RJq8$reactspectrumutils.classNames)((0, ($parcel$interopDefault($d9f76447f7a8d3f9$exports))), 'spectrum-ActionGroup-item', 'spectrum-ActionGroup-menu', {
361
+ 'is-hovered': isHovered,
362
+ 'is-selected': isSelected
363
363
  }, (0, $2RJq8$reactspectrumutils.classNames)((0, ($parcel$interopDefault($afc5a4514aca2340$exports))), {
364
- "is-selected": isSelected,
365
- "spectrum-ActionButton--emphasized": isEmphasized
364
+ 'is-selected': isSelected,
365
+ 'spectrum-ActionButton--emphasized': isEmphasized
366
366
  })),
367
367
  isDisabled: isDisabled,
368
368
  staticColor: staticColor
package/dist/ActionGroup.mjs CHANGED
@@ -49,8 +49,8 @@ function $parcel$interopDefault(a) {
49
49
 
50
50
  function $a04ee251ffcc2690$var$ActionGroup(props, ref) {
51
51
  props = (0, $lajJX$useProviderProps)(props);
52
- props = (0, $lajJX$useSlotProps)(props, "actionGroup");
53
- let { isEmphasized: isEmphasized, density: density, isJustified: isJustified, isDisabled: isDisabled, orientation: orientation = "horizontal", isQuiet: isQuiet, staticColor: staticColor, overflowMode: overflowMode = "wrap", onAction: onAction, buttonLabelBehavior: buttonLabelBehavior, summaryIcon: summaryIcon, ...otherProps } = props;
52
+ props = (0, $lajJX$useSlotProps)(props, 'actionGroup');
53
+ let { isEmphasized: isEmphasized, density: density, isJustified: isJustified, isDisabled: isDisabled, orientation: orientation = 'horizontal', isQuiet: isQuiet, staticColor: staticColor, overflowMode: overflowMode = 'wrap', onAction: onAction, buttonLabelBehavior: buttonLabelBehavior, summaryIcon: summaryIcon, ...otherProps } = props;
54
54
  let domRef = (0, $lajJX$useDOMRef)(ref);
55
55
  let wrapperRef = (0, $lajJX$useRef)(null);
56
56
  let state = (0, $lajJX$useListState)({
@@ -58,7 +58,7 @@ function $a04ee251ffcc2690$var$ActionGroup(props, ref) {
58
58
  suppressTextValueWarning: true
59
59
  });
60
60
  let { actionGroupProps: actionGroupProps } = (0, $lajJX$useActionGroup)(props, state, domRef);
61
- let isVertical = orientation === "vertical";
61
+ let isVertical = orientation === 'vertical';
62
62
  let providerProps = {
63
63
  isEmphasized: isEmphasized,
64
64
  isDisabled: isDisabled,
@@ -68,44 +68,44 @@ function $a04ee251ffcc2690$var$ActionGroup(props, ref) {
68
68
  // Only hide button text if every item contains more than just plain text (we assume an icon).
69
69
  let isIconCollapsible = (0, $lajJX$useMemo)(()=>[
70
70
  ...state.collection
71
- ].every((item)=>typeof item.rendered !== "string"), [
71
+ ].every((item)=>typeof item.rendered !== 'string'), [
72
72
  state.collection
73
73
  ]);
74
74
  let [{ visibleItems: visibleItems, hideButtonText: hideButtonText, isMeasuring: isMeasuring }, setVisibleItems] = (0, $lajJX$useValueEffect)({
75
75
  visibleItems: state.collection.size,
76
- hideButtonText: buttonLabelBehavior === "hide" && isIconCollapsible,
76
+ hideButtonText: buttonLabelBehavior === 'hide' && isIconCollapsible,
77
77
  isMeasuring: false
78
78
  });
79
79
  let selectionMode = state.selectionManager.selectionMode;
80
80
  let updateOverflow = (0, $lajJX$useCallback)(()=>{
81
- if (overflowMode === "wrap") return;
82
- if (orientation === "vertical" && selectionMode !== "none") // Collapsing vertical action groups with selection is currently unsupported by Spectrum.
81
+ if (overflowMode === 'wrap') return;
82
+ if (orientation === 'vertical' && selectionMode !== 'none') // Collapsing vertical action groups with selection is currently unsupported by Spectrum.
83
83
  return;
84
84
  let computeVisibleItems = (visibleItems)=>{
85
85
  if (domRef.current && wrapperRef.current) {
86
86
  let listItems = Array.from(domRef.current.children);
87
- let containerSize = orientation === "horizontal" ? wrapperRef.current.getBoundingClientRect().width : wrapperRef.current.getBoundingClientRect().height;
87
+ let containerSize = orientation === 'horizontal' ? wrapperRef.current.getBoundingClientRect().width : wrapperRef.current.getBoundingClientRect().height;
88
88
  let isShowingMenu = visibleItems < state.collection.size;
89
89
  let calculatedSize = 0;
90
90
  let newVisibleItems = 0;
91
91
  if (isShowingMenu) {
92
92
  let item = listItems.pop();
93
- if (item) calculatedSize += orientation === "horizontal" ? $a04ee251ffcc2690$var$outerWidth(item, false, true) : $a04ee251ffcc2690$var$outerHeight(item, false, true);
93
+ if (item) calculatedSize += orientation === 'horizontal' ? $a04ee251ffcc2690$var$outerWidth(item, false, true) : $a04ee251ffcc2690$var$outerHeight(item, false, true);
94
94
  }
95
95
  for (let [i, item] of listItems.entries()){
96
- calculatedSize += orientation === "horizontal" ? $a04ee251ffcc2690$var$outerWidth(item, i === 0, i === listItems.length - 1) : $a04ee251ffcc2690$var$outerHeight(item, i === 0, i === listItems.length - 1);
96
+ calculatedSize += orientation === 'horizontal' ? $a04ee251ffcc2690$var$outerWidth(item, i === 0, i === listItems.length - 1) : $a04ee251ffcc2690$var$outerHeight(item, i === 0, i === listItems.length - 1);
97
97
  if (Math.round(calculatedSize) <= Math.round(containerSize)) newVisibleItems++;
98
98
  else break;
99
99
  }
100
100
  // If selection is enabled, and not all of the items fit, collapse all of them into a dropdown
101
101
  // immediately rather than having some visible and some not.
102
- if (selectionMode !== "none" && newVisibleItems < state.collection.size) return 0;
102
+ if (selectionMode !== 'none' && newVisibleItems < state.collection.size) return 0;
103
103
  return newVisibleItems;
104
104
  }
105
105
  return visibleItems;
106
106
  };
107
107
  setVisibleItems(function*() {
108
- let hideButtonText = buttonLabelBehavior === "hide" && isIconCollapsible;
108
+ let hideButtonText = buttonLabelBehavior === 'hide' && isIconCollapsible;
109
109
  // Update to show all items.
110
110
  yield {
111
111
  visibleItems: state.collection.size,
@@ -117,7 +117,7 @@ function $a04ee251ffcc2690$var$ActionGroup(props, ref) {
117
117
  let isMeasuring = newVisibleItems < state.collection.size && newVisibleItems > 0;
118
118
  // If not all of the buttons fit, and buttonLabelBehavior is 'collapse', then first try hiding
119
119
  // the button text and only showing icons. Only if that still doesn't fit collapse into a menu.
120
- if (newVisibleItems < state.collection.size && buttonLabelBehavior === "collapse" && isIconCollapsible) {
120
+ if (newVisibleItems < state.collection.size && buttonLabelBehavior === 'collapse' && isIconCollapsible) {
121
121
  yield {
122
122
  visibleItems: state.collection.size,
123
123
  hideButtonText: true,
@@ -161,7 +161,7 @@ function $a04ee251ffcc2690$var$ActionGroup(props, ref) {
161
161
  wrapperRef
162
162
  ]);
163
163
  (0, $lajJX$useResizeObserver)({
164
- ref: overflowMode !== "wrap" ? parentRef : undefined,
164
+ ref: overflowMode !== 'wrap' ? parentRef : undefined,
165
165
  onResize: updateOverflow
166
166
  });
167
167
  (0, $lajJX$useLayoutEffect)(updateOverflow, [
@@ -175,13 +175,13 @@ function $a04ee251ffcc2690$var$ActionGroup(props, ref) {
175
175
  let menuProps = {};
176
176
  // If there are no visible items, don't apply any props to the action group container
177
177
  // and pass all aria labeling props through to the menu button.
178
- if (overflowMode === "collapse" && visibleItems === 0) {
178
+ if (overflowMode === 'collapse' && visibleItems === 0) {
179
179
  menuProps = (0, $lajJX$filterDOMProps)(props, {
180
180
  labelable: true
181
181
  });
182
182
  actionGroupProps = {};
183
183
  }
184
- if (overflowMode === "collapse" && visibleItems < state.collection.size) {
184
+ if (overflowMode === 'collapse' && visibleItems < state.collection.size) {
185
185
  let menuChildren = children.slice(visibleItems);
186
186
  children = children.slice(0, visibleItems);
187
187
  menuItem = /*#__PURE__*/ (0, $lajJX$react).createElement($a04ee251ffcc2690$var$ActionGroupMenu, {
@@ -201,22 +201,22 @@ function $a04ee251ffcc2690$var$ActionGroup(props, ref) {
201
201
  let style = {
202
202
  ...styleProps.style,
203
203
  // While measuring, take up as much space as possible.
204
- flexBasis: isMeasuring ? "100%" : undefined
204
+ flexBasis: isMeasuring ? '100%' : undefined
205
205
  };
206
206
  return /*#__PURE__*/ (0, $lajJX$react).createElement((0, $lajJX$FocusScope), null, /*#__PURE__*/ (0, $lajJX$react).createElement("div", {
207
207
  ...styleProps,
208
208
  style: style,
209
- className: (0, $lajJX$classNames)((0, ($parcel$interopDefault($lajJX$actiongroup_vars_cssmodulejs))), "flex-container", styleProps.className),
209
+ className: (0, $lajJX$classNames)((0, ($parcel$interopDefault($lajJX$actiongroup_vars_cssmodulejs))), 'flex-container', styleProps.className),
210
210
  ref: wrapperRef
211
211
  }, /*#__PURE__*/ (0, $lajJX$react).createElement("div", {
212
212
  ...actionGroupProps,
213
213
  ref: domRef,
214
- className: (0, $lajJX$classNames)((0, ($parcel$interopDefault($lajJX$actiongroup_vars_cssmodulejs))), "flex-gap", "spectrum-ActionGroup", {
215
- "spectrum-ActionGroup--quiet": isQuiet,
216
- "spectrum-ActionGroup--vertical": isVertical,
217
- "spectrum-ActionGroup--compact": density === "compact",
218
- "spectrum-ActionGroup--justified": isJustified && !isMeasuring,
219
- "spectrum-ActionGroup--overflowCollapse": overflowMode === "collapse"
214
+ className: (0, $lajJX$classNames)((0, ($parcel$interopDefault($lajJX$actiongroup_vars_cssmodulejs))), 'flex-gap', 'spectrum-ActionGroup', {
215
+ 'spectrum-ActionGroup--quiet': isQuiet,
216
+ 'spectrum-ActionGroup--vertical': isVertical,
217
+ 'spectrum-ActionGroup--compact': density === 'compact',
218
+ 'spectrum-ActionGroup--justified': isJustified && !isMeasuring,
219
+ 'spectrum-ActionGroup--overflowCollapse': overflowMode === 'collapse'
220
220
  }, otherProps.UNSAFE_className)
221
221
  }, /*#__PURE__*/ (0, $lajJX$react).createElement((0, $lajJX$Provider), providerProps, children.map((item)=>/*#__PURE__*/ (0, $lajJX$react).createElement($a04ee251ffcc2690$var$ActionGroupItem, {
222
222
  key: item.key,
@@ -250,7 +250,7 @@ function $a04ee251ffcc2690$var$ActionGroupItem({ item: item, state: state, isDis
250
250
  // If button text is hidden, we need to show it as a tooltip instead, so
251
251
  // go find the text element in the DOM after rendering.
252
252
  let textId = (0, $lajJX$useId)();
253
- let [textContent, setTextContent] = (0, $lajJX$useState)("");
253
+ let [textContent, setTextContent] = (0, $lajJX$useState)('');
254
254
  (0, $lajJX$useLayoutEffect)(()=>{
255
255
  var _document_getElementById;
256
256
  if (hideButtonText) setTextContent((_document_getElementById = document.getElementById(textId)) === null || _document_getElementById === void 0 ? void 0 : _document_getElementById.textContent);
@@ -272,22 +272,22 @@ function $a04ee251ffcc2690$var$ActionGroupItem({ item: item, state: state, isDis
272
272
  ref: ref,
273
273
  // @ts-ignore (private)
274
274
  hideButtonText: hideButtonText,
275
- UNSAFE_className: (0, $lajJX$classNames)((0, ($parcel$interopDefault($lajJX$actiongroup_vars_cssmodulejs))), "spectrum-ActionGroup-item", {
276
- "is-selected": isSelected,
277
- "is-hovered": isHovered,
278
- "spectrum-ActionGroup-item--iconOnly": hideButtonText,
279
- "spectrum-ActionGroup-item--isDisabled": isDisabled
275
+ UNSAFE_className: (0, $lajJX$classNames)((0, ($parcel$interopDefault($lajJX$actiongroup_vars_cssmodulejs))), 'spectrum-ActionGroup-item', {
276
+ 'is-selected': isSelected,
277
+ 'is-hovered': isHovered,
278
+ 'spectrum-ActionGroup-item--iconOnly': hideButtonText,
279
+ 'spectrum-ActionGroup-item--isDisabled': isDisabled
280
280
  }, (0, $lajJX$classNames)((0, ($parcel$interopDefault($lajJX$button_vars_cssmodulejs))), {
281
- "spectrum-ActionButton--emphasized": isEmphasized,
282
- "is-selected": isSelected
281
+ 'spectrum-ActionButton--emphasized': isEmphasized,
282
+ 'is-selected': isSelected
283
283
  })),
284
284
  isDisabled: isDisabled,
285
285
  staticColor: staticColor,
286
- "aria-label": item["aria-label"],
287
- "aria-labelledby": item["aria-label"] == null && hideButtonText ? textId : undefined
286
+ "aria-label": item['aria-label'],
287
+ "aria-labelledby": item['aria-label'] == null && hideButtonText ? textId : undefined
288
288
  }, item.rendered))));
289
289
  if (hideButtonText && textContent) button = /*#__PURE__*/ (0, $lajJX$react).createElement((0, $lajJX$TooltipTrigger), {
290
- placement: orientation === "vertical" ? "end" : "top"
290
+ placement: orientation === 'vertical' ? 'end' : 'top'
291
291
  }, button, /*#__PURE__*/ (0, $lajJX$react).createElement((0, $lajJX$Tooltip), null, textContent));
292
292
  if (item.wrapper) button = item.wrapper(button);
293
293
  return button;
@@ -302,48 +302,48 @@ function $a04ee251ffcc2690$var$ActionGroupMenu({ state: state, isDisabled: isDis
302
302
  // The menu button shouldn't act like an actual action group item.
303
303
  delete buttonProps.onPress;
304
304
  delete buttonProps.role;
305
- delete buttonProps["aria-checked"];
305
+ delete buttonProps['aria-checked'];
306
306
  let { hoverProps: hoverProps, isHovered: isHovered } = (0, $lajJX$useHover)({
307
307
  isDisabled: isDisabled
308
308
  });
309
309
  // If no aria-label or aria-labelledby is given, provide a default one.
310
- let ariaLabel = otherProps["aria-label"] || (otherProps["aria-labelledby"] ? undefined : "\u2026");
311
- let ariaLabelledby = otherProps["aria-labelledby"];
310
+ let ariaLabel = otherProps['aria-label'] || (otherProps['aria-labelledby'] ? undefined : "\u2026");
311
+ let ariaLabelledby = otherProps['aria-labelledby'];
312
312
  let textId = (0, $lajJX$useId)();
313
313
  let id = (0, $lajJX$useId)();
314
314
  // Summary icon only applies when selection is enabled.
315
- if (state.selectionManager.selectionMode === "none") summaryIcon = null;
315
+ if (state.selectionManager.selectionMode === 'none') summaryIcon = null;
316
316
  let iconOnly = false;
317
317
  // If there is a selection, show the selected state on the menu button.
318
- let isSelected = state.selectionManager.selectionMode !== "none" && !state.selectionManager.isEmpty;
318
+ let isSelected = state.selectionManager.selectionMode !== 'none' && !state.selectionManager.isEmpty;
319
319
  // If single selection and empty selection is not allowed, swap the contents of the button to the selected item (like a Picker).
320
- if (!summaryIcon && state.selectionManager.selectionMode === "single" && state.selectionManager.disallowEmptySelection && state.selectionManager.firstSelectedKey != null) {
320
+ if (!summaryIcon && state.selectionManager.selectionMode === 'single' && state.selectionManager.disallowEmptySelection && state.selectionManager.firstSelectedKey != null) {
321
321
  let selectedItem = state.collection.getItem(state.selectionManager.firstSelectedKey);
322
322
  if (selectedItem) {
323
323
  summaryIcon = selectedItem.rendered;
324
- if (typeof summaryIcon === "string") summaryIcon = /*#__PURE__*/ (0, $lajJX$react).createElement((0, $lajJX$Text), null, summaryIcon);
324
+ if (typeof summaryIcon === 'string') summaryIcon = /*#__PURE__*/ (0, $lajJX$react).createElement((0, $lajJX$Text), null, summaryIcon);
325
325
  iconOnly = !!hideButtonText;
326
326
  ariaLabelledby = `${ariaLabelledby !== null && ariaLabelledby !== void 0 ? ariaLabelledby : id} ${textId}`;
327
327
  }
328
328
  }
329
329
  if (summaryIcon) // If there's a custom summary icon, also add a chevron.
330
330
  summaryIcon = /*#__PURE__*/ (0, $lajJX$react).createElement((0, $lajJX$react).Fragment, null, /*#__PURE__*/ (0, $lajJX$react).createElement((0, $lajJX$spectrumiconsuiChevronDownMedium), {
331
- UNSAFE_className: (0, $lajJX$classNames)((0, ($parcel$interopDefault($lajJX$actiongroup_vars_cssmodulejs))), "spectrum-ActionGroup-menu-chevron")
331
+ UNSAFE_className: (0, $lajJX$classNames)((0, ($parcel$interopDefault($lajJX$actiongroup_vars_cssmodulejs))), 'spectrum-ActionGroup-menu-chevron')
332
332
  }), /*#__PURE__*/ (0, $lajJX$react).createElement("span", {
333
- className: (0, $lajJX$classNames)((0, ($parcel$interopDefault($lajJX$actiongroup_vars_cssmodulejs))), "spectrum-ActionGroup-menu-contents", {
334
- "spectrum-ActionGroup-item--iconOnly": iconOnly
333
+ className: (0, $lajJX$classNames)((0, ($parcel$interopDefault($lajJX$actiongroup_vars_cssmodulejs))), 'spectrum-ActionGroup-menu-contents', {
334
+ 'spectrum-ActionGroup-item--iconOnly': iconOnly
335
335
  })
336
336
  }, summaryIcon));
337
337
  return(// Use a PressResponder to send DOM props through.
338
338
  /*#__PURE__*/ (0, $lajJX$react).createElement((0, $lajJX$MenuTrigger), {
339
- align: isOnlyItem ? "start" : "end",
340
- direction: orientation === "vertical" ? "end" : "bottom"
339
+ align: isOnlyItem ? 'start' : 'end',
340
+ direction: orientation === 'vertical' ? 'end' : 'bottom'
341
341
  }, /*#__PURE__*/ (0, $lajJX$react).createElement((0, $lajJX$SlotProvider), {
342
342
  slots: {
343
343
  text: {
344
344
  id: hideButtonText ? textId : null,
345
345
  isHidden: hideButtonText,
346
- UNSAFE_className: (0, $lajJX$classNames)((0, ($parcel$interopDefault($lajJX$actiongroup_vars_cssmodulejs))), "spectrum-ActionGroup-menu-text")
346
+ UNSAFE_className: (0, $lajJX$classNames)((0, ($parcel$interopDefault($lajJX$actiongroup_vars_cssmodulejs))), 'spectrum-ActionGroup-menu-text')
347
347
  }
348
348
  }
349
349
  }, /*#__PURE__*/ (0, $lajJX$react).createElement((0, $lajJX$PressResponder), (0, $lajJX$mergeProps)(buttonProps, hoverProps), /*#__PURE__*/ (0, $lajJX$react).createElement((0, $lajJX$ActionButton), {
@@ -351,12 +351,12 @@ function $a04ee251ffcc2690$var$ActionGroupMenu({ state: state, isDisabled: isDis
351
351
  id: id,
352
352
  "aria-label": ariaLabel,
353
353
  "aria-labelledby": ariaLabelledby,
354
- UNSAFE_className: (0, $lajJX$classNames)((0, ($parcel$interopDefault($lajJX$actiongroup_vars_cssmodulejs))), "spectrum-ActionGroup-item", "spectrum-ActionGroup-menu", {
355
- "is-hovered": isHovered,
356
- "is-selected": isSelected
354
+ UNSAFE_className: (0, $lajJX$classNames)((0, ($parcel$interopDefault($lajJX$actiongroup_vars_cssmodulejs))), 'spectrum-ActionGroup-item', 'spectrum-ActionGroup-menu', {
355
+ 'is-hovered': isHovered,
356
+ 'is-selected': isSelected
357
357
  }, (0, $lajJX$classNames)((0, ($parcel$interopDefault($lajJX$button_vars_cssmodulejs))), {
358
- "is-selected": isSelected,
359
- "spectrum-ActionButton--emphasized": isEmphasized
358
+ 'is-selected': isSelected,
359
+ 'spectrum-ActionButton--emphasized': isEmphasized
360
360
  })),
361
361
  isDisabled: isDisabled,
362
362
  staticColor: staticColor
package/dist/ActionGroup.module.js CHANGED
@@ -49,8 +49,8 @@ function $parcel$interopDefault(a) {
49
49
 
50
50
  function $a04ee251ffcc2690$var$ActionGroup(props, ref) {
51
51
  props = (0, $lajJX$useProviderProps)(props);
52
- props = (0, $lajJX$useSlotProps)(props, "actionGroup");
53
- let { isEmphasized: isEmphasized, density: density, isJustified: isJustified, isDisabled: isDisabled, orientation: orientation = "horizontal", isQuiet: isQuiet, staticColor: staticColor, overflowMode: overflowMode = "wrap", onAction: onAction, buttonLabelBehavior: buttonLabelBehavior, summaryIcon: summaryIcon, ...otherProps } = props;
52
+ props = (0, $lajJX$useSlotProps)(props, 'actionGroup');
53
+ let { isEmphasized: isEmphasized, density: density, isJustified: isJustified, isDisabled: isDisabled, orientation: orientation = 'horizontal', isQuiet: isQuiet, staticColor: staticColor, overflowMode: overflowMode = 'wrap', onAction: onAction, buttonLabelBehavior: buttonLabelBehavior, summaryIcon: summaryIcon, ...otherProps } = props;
54
54
  let domRef = (0, $lajJX$useDOMRef)(ref);
55
55
  let wrapperRef = (0, $lajJX$useRef)(null);
56
56
  let state = (0, $lajJX$useListState)({
@@ -58,7 +58,7 @@ function $a04ee251ffcc2690$var$ActionGroup(props, ref) {
58
58
  suppressTextValueWarning: true
59
59
  });
60
60
  let { actionGroupProps: actionGroupProps } = (0, $lajJX$useActionGroup)(props, state, domRef);
61
- let isVertical = orientation === "vertical";
61
+ let isVertical = orientation === 'vertical';
62
62
  let providerProps = {
63
63
  isEmphasized: isEmphasized,
64
64
  isDisabled: isDisabled,
@@ -68,44 +68,44 @@ function $a04ee251ffcc2690$var$ActionGroup(props, ref) {
68
68
  // Only hide button text if every item contains more than just plain text (we assume an icon).
69
69
  let isIconCollapsible = (0, $lajJX$useMemo)(()=>[
70
70
  ...state.collection
71
- ].every((item)=>typeof item.rendered !== "string"), [
71
+ ].every((item)=>typeof item.rendered !== 'string'), [
72
72
  state.collection
73
73
  ]);
74
74
  let [{ visibleItems: visibleItems, hideButtonText: hideButtonText, isMeasuring: isMeasuring }, setVisibleItems] = (0, $lajJX$useValueEffect)({
75
75
  visibleItems: state.collection.size,
76
- hideButtonText: buttonLabelBehavior === "hide" && isIconCollapsible,
76
+ hideButtonText: buttonLabelBehavior === 'hide' && isIconCollapsible,
77
77
  isMeasuring: false
78
78
  });
79
79
  let selectionMode = state.selectionManager.selectionMode;
80
80
  let updateOverflow = (0, $lajJX$useCallback)(()=>{
81
- if (overflowMode === "wrap") return;
82
- if (orientation === "vertical" && selectionMode !== "none") // Collapsing vertical action groups with selection is currently unsupported by Spectrum.
81
+ if (overflowMode === 'wrap') return;
82
+ if (orientation === 'vertical' && selectionMode !== 'none') // Collapsing vertical action groups with selection is currently unsupported by Spectrum.
83
83
  return;
84
84
  let computeVisibleItems = (visibleItems)=>{
85
85
  if (domRef.current && wrapperRef.current) {
86
86
  let listItems = Array.from(domRef.current.children);
87
- let containerSize = orientation === "horizontal" ? wrapperRef.current.getBoundingClientRect().width : wrapperRef.current.getBoundingClientRect().height;
87
+ let containerSize = orientation === 'horizontal' ? wrapperRef.current.getBoundingClientRect().width : wrapperRef.current.getBoundingClientRect().height;
88
88
  let isShowingMenu = visibleItems < state.collection.size;
89
89
  let calculatedSize = 0;
90
90
  let newVisibleItems = 0;
91
91
  if (isShowingMenu) {
92
92
  let item = listItems.pop();
93
- if (item) calculatedSize += orientation === "horizontal" ? $a04ee251ffcc2690$var$outerWidth(item, false, true) : $a04ee251ffcc2690$var$outerHeight(item, false, true);
93
+ if (item) calculatedSize += orientation === 'horizontal' ? $a04ee251ffcc2690$var$outerWidth(item, false, true) : $a04ee251ffcc2690$var$outerHeight(item, false, true);
94
94
  }
95
95
  for (let [i, item] of listItems.entries()){
96
- calculatedSize += orientation === "horizontal" ? $a04ee251ffcc2690$var$outerWidth(item, i === 0, i === listItems.length - 1) : $a04ee251ffcc2690$var$outerHeight(item, i === 0, i === listItems.length - 1);
96
+ calculatedSize += orientation === 'horizontal' ? $a04ee251ffcc2690$var$outerWidth(item, i === 0, i === listItems.length - 1) : $a04ee251ffcc2690$var$outerHeight(item, i === 0, i === listItems.length - 1);
97
97
  if (Math.round(calculatedSize) <= Math.round(containerSize)) newVisibleItems++;
98
98
  else break;
99
99
  }
100
100
  // If selection is enabled, and not all of the items fit, collapse all of them into a dropdown
101
101
  // immediately rather than having some visible and some not.
102
- if (selectionMode !== "none" && newVisibleItems < state.collection.size) return 0;
102
+ if (selectionMode !== 'none' && newVisibleItems < state.collection.size) return 0;
103
103
  return newVisibleItems;
104
104
  }
105
105
  return visibleItems;
106
106
  };
107
107
  setVisibleItems(function*() {
108
- let hideButtonText = buttonLabelBehavior === "hide" && isIconCollapsible;
108
+ let hideButtonText = buttonLabelBehavior === 'hide' && isIconCollapsible;
109
109
  // Update to show all items.
110
110
  yield {
111
111
  visibleItems: state.collection.size,
@@ -117,7 +117,7 @@ function $a04ee251ffcc2690$var$ActionGroup(props, ref) {
117
117
  let isMeasuring = newVisibleItems < state.collection.size && newVisibleItems > 0;
118
118
  // If not all of the buttons fit, and buttonLabelBehavior is 'collapse', then first try hiding
119
119
  // the button text and only showing icons. Only if that still doesn't fit collapse into a menu.
120
- if (newVisibleItems < state.collection.size && buttonLabelBehavior === "collapse" && isIconCollapsible) {
120
+ if (newVisibleItems < state.collection.size && buttonLabelBehavior === 'collapse' && isIconCollapsible) {
121
121
  yield {
122
122
  visibleItems: state.collection.size,
123
123
  hideButtonText: true,
@@ -161,7 +161,7 @@ function $a04ee251ffcc2690$var$ActionGroup(props, ref) {
161
161
  wrapperRef
162
162
  ]);
163
163
  (0, $lajJX$useResizeObserver)({
164
- ref: overflowMode !== "wrap" ? parentRef : undefined,
164
+ ref: overflowMode !== 'wrap' ? parentRef : undefined,
165
165
  onResize: updateOverflow
166
166
  });
167
167
  (0, $lajJX$useLayoutEffect)(updateOverflow, [
@@ -175,13 +175,13 @@ function $a04ee251ffcc2690$var$ActionGroup(props, ref) {
175
175
  let menuProps = {};
176
176
  // If there are no visible items, don't apply any props to the action group container
177
177
  // and pass all aria labeling props through to the menu button.
178
- if (overflowMode === "collapse" && visibleItems === 0) {
178
+ if (overflowMode === 'collapse' && visibleItems === 0) {
179
179
  menuProps = (0, $lajJX$filterDOMProps)(props, {
180
180
  labelable: true
181
181
  });
182
182
  actionGroupProps = {};
183
183
  }
184
- if (overflowMode === "collapse" && visibleItems < state.collection.size) {
184
+ if (overflowMode === 'collapse' && visibleItems < state.collection.size) {
185
185
  let menuChildren = children.slice(visibleItems);
186
186
  children = children.slice(0, visibleItems);
187
187
  menuItem = /*#__PURE__*/ (0, $lajJX$react).createElement($a04ee251ffcc2690$var$ActionGroupMenu, {
@@ -201,22 +201,22 @@ function $a04ee251ffcc2690$var$ActionGroup(props, ref) {
201
201
  let style = {
202
202
  ...styleProps.style,
203
203
  // While measuring, take up as much space as possible.
204
- flexBasis: isMeasuring ? "100%" : undefined
204
+ flexBasis: isMeasuring ? '100%' : undefined
205
205
  };
206
206
  return /*#__PURE__*/ (0, $lajJX$react).createElement((0, $lajJX$FocusScope), null, /*#__PURE__*/ (0, $lajJX$react).createElement("div", {
207
207
  ...styleProps,
208
208
  style: style,
209
- className: (0, $lajJX$classNames)((0, ($parcel$interopDefault($lajJX$actiongroup_vars_cssmodulejs))), "flex-container", styleProps.className),
209
+ className: (0, $lajJX$classNames)((0, ($parcel$interopDefault($lajJX$actiongroup_vars_cssmodulejs))), 'flex-container', styleProps.className),
210
210
  ref: wrapperRef
211
211
  }, /*#__PURE__*/ (0, $lajJX$react).createElement("div", {
212
212
  ...actionGroupProps,
213
213
  ref: domRef,
214
- className: (0, $lajJX$classNames)((0, ($parcel$interopDefault($lajJX$actiongroup_vars_cssmodulejs))), "flex-gap", "spectrum-ActionGroup", {
215
- "spectrum-ActionGroup--quiet": isQuiet,
216
- "spectrum-ActionGroup--vertical": isVertical,
217
- "spectrum-ActionGroup--compact": density === "compact",
218
- "spectrum-ActionGroup--justified": isJustified && !isMeasuring,
219
- "spectrum-ActionGroup--overflowCollapse": overflowMode === "collapse"
214
+ className: (0, $lajJX$classNames)((0, ($parcel$interopDefault($lajJX$actiongroup_vars_cssmodulejs))), 'flex-gap', 'spectrum-ActionGroup', {
215
+ 'spectrum-ActionGroup--quiet': isQuiet,
216
+ 'spectrum-ActionGroup--vertical': isVertical,
217
+ 'spectrum-ActionGroup--compact': density === 'compact',
218
+ 'spectrum-ActionGroup--justified': isJustified && !isMeasuring,
219
+ 'spectrum-ActionGroup--overflowCollapse': overflowMode === 'collapse'
220
220
  }, otherProps.UNSAFE_className)
221
221
  }, /*#__PURE__*/ (0, $lajJX$react).createElement((0, $lajJX$Provider), providerProps, children.map((item)=>/*#__PURE__*/ (0, $lajJX$react).createElement($a04ee251ffcc2690$var$ActionGroupItem, {
222
222
  key: item.key,
@@ -250,7 +250,7 @@ function $a04ee251ffcc2690$var$ActionGroupItem({ item: item, state: state, isDis
250
250
  // If button text is hidden, we need to show it as a tooltip instead, so
251
251
  // go find the text element in the DOM after rendering.
252
252
  let textId = (0, $lajJX$useId)();
253
- let [textContent, setTextContent] = (0, $lajJX$useState)("");
253
+ let [textContent, setTextContent] = (0, $lajJX$useState)('');
254
254
  (0, $lajJX$useLayoutEffect)(()=>{
255
255
  var _document_getElementById;
256
256
  if (hideButtonText) setTextContent((_document_getElementById = document.getElementById(textId)) === null || _document_getElementById === void 0 ? void 0 : _document_getElementById.textContent);
@@ -272,22 +272,22 @@ function $a04ee251ffcc2690$var$ActionGroupItem({ item: item, state: state, isDis
272
272
  ref: ref,
273
273
  // @ts-ignore (private)
274
274
  hideButtonText: hideButtonText,
275
- UNSAFE_className: (0, $lajJX$classNames)((0, ($parcel$interopDefault($lajJX$actiongroup_vars_cssmodulejs))), "spectrum-ActionGroup-item", {
276
- "is-selected": isSelected,
277
- "is-hovered": isHovered,
278
- "spectrum-ActionGroup-item--iconOnly": hideButtonText,
279
- "spectrum-ActionGroup-item--isDisabled": isDisabled
275
+ UNSAFE_className: (0, $lajJX$classNames)((0, ($parcel$interopDefault($lajJX$actiongroup_vars_cssmodulejs))), 'spectrum-ActionGroup-item', {
276
+ 'is-selected': isSelected,
277
+ 'is-hovered': isHovered,
278
+ 'spectrum-ActionGroup-item--iconOnly': hideButtonText,
279
+ 'spectrum-ActionGroup-item--isDisabled': isDisabled
280
280
  }, (0, $lajJX$classNames)((0, ($parcel$interopDefault($lajJX$button_vars_cssmodulejs))), {
281
- "spectrum-ActionButton--emphasized": isEmphasized,
282
- "is-selected": isSelected
281
+ 'spectrum-ActionButton--emphasized': isEmphasized,
282
+ 'is-selected': isSelected
283
283
  })),
284
284
  isDisabled: isDisabled,
285
285
  staticColor: staticColor,
286
- "aria-label": item["aria-label"],
287
- "aria-labelledby": item["aria-label"] == null && hideButtonText ? textId : undefined
286
+ "aria-label": item['aria-label'],
287
+ "aria-labelledby": item['aria-label'] == null && hideButtonText ? textId : undefined
288
288
  }, item.rendered))));
289
289
  if (hideButtonText && textContent) button = /*#__PURE__*/ (0, $lajJX$react).createElement((0, $lajJX$TooltipTrigger), {
290
- placement: orientation === "vertical" ? "end" : "top"
290
+ placement: orientation === 'vertical' ? 'end' : 'top'
291
291
  }, button, /*#__PURE__*/ (0, $lajJX$react).createElement((0, $lajJX$Tooltip), null, textContent));
292
292
  if (item.wrapper) button = item.wrapper(button);
293
293
  return button;
@@ -302,48 +302,48 @@ function $a04ee251ffcc2690$var$ActionGroupMenu({ state: state, isDisabled: isDis
302
302
  // The menu button shouldn't act like an actual action group item.
303
303
  delete buttonProps.onPress;
304
304
  delete buttonProps.role;
305
- delete buttonProps["aria-checked"];
305
+ delete buttonProps['aria-checked'];
306
306
  let { hoverProps: hoverProps, isHovered: isHovered } = (0, $lajJX$useHover)({
307
307
  isDisabled: isDisabled
308
308
  });
309
309
  // If no aria-label or aria-labelledby is given, provide a default one.
310
- let ariaLabel = otherProps["aria-label"] || (otherProps["aria-labelledby"] ? undefined : "\u2026");
311
- let ariaLabelledby = otherProps["aria-labelledby"];
310
+ let ariaLabel = otherProps['aria-label'] || (otherProps['aria-labelledby'] ? undefined : "\u2026");
311
+ let ariaLabelledby = otherProps['aria-labelledby'];
312
312
  let textId = (0, $lajJX$useId)();
313
313
  let id = (0, $lajJX$useId)();
314
314
  // Summary icon only applies when selection is enabled.
315
- if (state.selectionManager.selectionMode === "none") summaryIcon = null;
315
+ if (state.selectionManager.selectionMode === 'none') summaryIcon = null;
316
316
  let iconOnly = false;
317
317
  // If there is a selection, show the selected state on the menu button.
318
- let isSelected = state.selectionManager.selectionMode !== "none" && !state.selectionManager.isEmpty;
318
+ let isSelected = state.selectionManager.selectionMode !== 'none' && !state.selectionManager.isEmpty;
319
319
  // If single selection and empty selection is not allowed, swap the contents of the button to the selected item (like a Picker).
320
- if (!summaryIcon && state.selectionManager.selectionMode === "single" && state.selectionManager.disallowEmptySelection && state.selectionManager.firstSelectedKey != null) {
320
+ if (!summaryIcon && state.selectionManager.selectionMode === 'single' && state.selectionManager.disallowEmptySelection && state.selectionManager.firstSelectedKey != null) {
321
321
  let selectedItem = state.collection.getItem(state.selectionManager.firstSelectedKey);
322
322
  if (selectedItem) {
323
323
  summaryIcon = selectedItem.rendered;
324
- if (typeof summaryIcon === "string") summaryIcon = /*#__PURE__*/ (0, $lajJX$react).createElement((0, $lajJX$Text), null, summaryIcon);
324
+ if (typeof summaryIcon === 'string') summaryIcon = /*#__PURE__*/ (0, $lajJX$react).createElement((0, $lajJX$Text), null, summaryIcon);
325
325
  iconOnly = !!hideButtonText;
326
326
  ariaLabelledby = `${ariaLabelledby !== null && ariaLabelledby !== void 0 ? ariaLabelledby : id} ${textId}`;
327
327
  }
328
328
  }
329
329
  if (summaryIcon) // If there's a custom summary icon, also add a chevron.
330
330
  summaryIcon = /*#__PURE__*/ (0, $lajJX$react).createElement((0, $lajJX$react).Fragment, null, /*#__PURE__*/ (0, $lajJX$react).createElement((0, $lajJX$spectrumiconsuiChevronDownMedium), {
331
- UNSAFE_className: (0, $lajJX$classNames)((0, ($parcel$interopDefault($lajJX$actiongroup_vars_cssmodulejs))), "spectrum-ActionGroup-menu-chevron")
331
+ UNSAFE_className: (0, $lajJX$classNames)((0, ($parcel$interopDefault($lajJX$actiongroup_vars_cssmodulejs))), 'spectrum-ActionGroup-menu-chevron')
332
332
  }), /*#__PURE__*/ (0, $lajJX$react).createElement("span", {
333
- className: (0, $lajJX$classNames)((0, ($parcel$interopDefault($lajJX$actiongroup_vars_cssmodulejs))), "spectrum-ActionGroup-menu-contents", {
334
- "spectrum-ActionGroup-item--iconOnly": iconOnly
333
+ className: (0, $lajJX$classNames)((0, ($parcel$interopDefault($lajJX$actiongroup_vars_cssmodulejs))), 'spectrum-ActionGroup-menu-contents', {
334
+ 'spectrum-ActionGroup-item--iconOnly': iconOnly
335
335
  })
336
336
  }, summaryIcon));
337
337
  return(// Use a PressResponder to send DOM props through.
338
338
  /*#__PURE__*/ (0, $lajJX$react).createElement((0, $lajJX$MenuTrigger), {
339
- align: isOnlyItem ? "start" : "end",
340
- direction: orientation === "vertical" ? "end" : "bottom"
339
+ align: isOnlyItem ? 'start' : 'end',
340
+ direction: orientation === 'vertical' ? 'end' : 'bottom'
341
341
  }, /*#__PURE__*/ (0, $lajJX$react).createElement((0, $lajJX$SlotProvider), {
342
342
  slots: {
343
343
  text: {
344
344
  id: hideButtonText ? textId : null,
345
345
  isHidden: hideButtonText,
346
- UNSAFE_className: (0, $lajJX$classNames)((0, ($parcel$interopDefault($lajJX$actiongroup_vars_cssmodulejs))), "spectrum-ActionGroup-menu-text")
346
+ UNSAFE_className: (0, $lajJX$classNames)((0, ($parcel$interopDefault($lajJX$actiongroup_vars_cssmodulejs))), 'spectrum-ActionGroup-menu-text')
347
347
  }
348
348
  }
349
349
  }, /*#__PURE__*/ (0, $lajJX$react).createElement((0, $lajJX$PressResponder), (0, $lajJX$mergeProps)(buttonProps, hoverProps), /*#__PURE__*/ (0, $lajJX$react).createElement((0, $lajJX$ActionButton), {
@@ -351,12 +351,12 @@ function $a04ee251ffcc2690$var$ActionGroupMenu({ state: state, isDisabled: isDis
351
351
  id: id,
352
352
  "aria-label": ariaLabel,
353
353
  "aria-labelledby": ariaLabelledby,
354
- UNSAFE_className: (0, $lajJX$classNames)((0, ($parcel$interopDefault($lajJX$actiongroup_vars_cssmodulejs))), "spectrum-ActionGroup-item", "spectrum-ActionGroup-menu", {
355
- "is-hovered": isHovered,
356
- "is-selected": isSelected
354
+ UNSAFE_className: (0, $lajJX$classNames)((0, ($parcel$interopDefault($lajJX$actiongroup_vars_cssmodulejs))), 'spectrum-ActionGroup-item', 'spectrum-ActionGroup-menu', {
355
+ 'is-hovered': isHovered,
356
+ 'is-selected': isSelected
357
357
  }, (0, $lajJX$classNames)((0, ($parcel$interopDefault($lajJX$button_vars_cssmodulejs))), {
358
- "is-selected": isSelected,
359
- "spectrum-ActionButton--emphasized": isEmphasized
358
+ 'is-selected': isSelected,
359
+ 'spectrum-ActionButton--emphasized': isEmphasized
360
360
  })),
361
361
  isDisabled: isDisabled,
362
362
  staticColor: staticColor
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@react-spectrum/actiongroup",
3
- "version": "3.10.5-nightly.4624+d80999e89",
3
+ "version": "3.10.5",
4
4
  "description": "Spectrum UI components in React",
5
5
  "license": "Apache-2.0",
6
6
  "main": "dist/main.js",
@@ -36,25 +36,25 @@
36
36
  "url": "https://github.com/adobe/react-spectrum"
37
37
  },
38
38
  "dependencies": {
39
- "@react-aria/actiongroup": "3.7.5-nightly.4624+d80999e89",
40
- "@react-aria/focus": "3.0.0-nightly.2912+d80999e89",
41
- "@react-aria/interactions": "3.0.0-nightly.2912+d80999e89",
42
- "@react-aria/utils": "3.0.0-nightly.2912+d80999e89",
43
- "@react-spectrum/button": "3.0.0-nightly.2912+d80999e89",
44
- "@react-spectrum/menu": "3.19.1-nightly.4624+d80999e89",
45
- "@react-spectrum/text": "3.5.5-nightly.4624+d80999e89",
46
- "@react-spectrum/tooltip": "3.0.0-nightly.2912+d80999e89",
47
- "@react-spectrum/utils": "3.0.0-nightly.2912+d80999e89",
48
- "@react-stately/collections": "3.0.0-nightly.2912+d80999e89",
49
- "@react-stately/list": "3.10.5-nightly.4624+d80999e89",
50
- "@react-types/actiongroup": "3.4.9-nightly.4624+d80999e89",
51
- "@react-types/shared": "3.0.0-nightly.2912+d80999e89",
52
- "@spectrum-icons/ui": "3.0.0-nightly.2912+d80999e89",
53
- "@spectrum-icons/workflow": "3.0.0-nightly.2912+d80999e89",
39
+ "@react-aria/actiongroup": "^3.7.5",
40
+ "@react-aria/focus": "^3.17.1",
41
+ "@react-aria/interactions": "^3.21.3",
42
+ "@react-aria/utils": "^3.24.1",
43
+ "@react-spectrum/button": "^3.16.4",
44
+ "@react-spectrum/menu": "^3.19.1",
45
+ "@react-spectrum/text": "^3.5.5",
46
+ "@react-spectrum/tooltip": "^3.6.7",
47
+ "@react-spectrum/utils": "^3.11.7",
48
+ "@react-stately/collections": "^3.10.7",
49
+ "@react-stately/list": "^3.10.5",
50
+ "@react-types/actiongroup": "^3.4.9",
51
+ "@react-types/shared": "^3.23.1",
52
+ "@spectrum-icons/ui": "^3.6.7",
53
+ "@spectrum-icons/workflow": "^4.2.12",
54
54
  "@swc/helpers": "^0.5.0"
55
55
  },
56
56
  "devDependencies": {
57
- "@adobe/spectrum-css-temp": "3.0.0-nightly.2912+d80999e89"
57
+ "@adobe/spectrum-css-temp": "3.0.0-alpha.1"
58
58
  },
59
59
  "peerDependencies": {
60
60
  "@react-spectrum/provider": "^3.2.0",
@@ -64,5 +64,5 @@
64
64
  "publishConfig": {
65
65
  "access": "public"
66
66
  },
67
- "gitHead": "d80999e897b4d4db9fcfb4e9b8fcdc9fdd700882"
67
+ "gitHead": "b77d7d594dff4dcfb5359bffbcfd18142b146433"
68
68
  }