@react-spectrum/button 3.0.0-nightly.2597 → 3.0.0-nightly.2602

package/dist/import.mjs

@@ -1,12 +1,12 @@
 import "./main.css";
 import {useSlotProps as $d7FTw$useSlotProps, useFocusableRef as $d7FTw$useFocusableRef, useStyleProps as $d7FTw$useStyleProps, useHasChild as $d7FTw$useHasChild, classNames as $d7FTw$classNames, SlotProvider as $d7FTw$SlotProvider} from "@react-spectrum/utils";
 import {FocusRing as $d7FTw$FocusRing} from "@react-aria/focus";
-import {mergeProps as $d7FTw$mergeProps} from "@react-aria/utils";
+import {useId as $d7FTw$useId, mergeProps as $d7FTw$mergeProps} from "@react-aria/utils";
 import {ProgressCircle as $d7FTw$ProgressCircle} from "@react-spectrum/progress";
 import $d7FTw$react, {useState as $d7FTw$useState, useEffect as $d7FTw$useEffect} from "react";
 import {Text as $d7FTw$Text} from "@react-spectrum/text";
 import {useButton as $d7FTw$useButton, useToggleButton as $d7FTw$useToggleButton} from "@react-aria/button";
-import {useHover as $d7FTw$useHover} from "@react-aria/interactions";
+import {useHover as $d7FTw$useHover, useFocus as $d7FTw$useFocus} from "@react-aria/interactions";
 import {useLocalizedStringFormatter as $d7FTw$useLocalizedStringFormatter} from "@react-aria/i18n";
 import {useProviderProps as $d7FTw$useProviderProps} from "@react-spectrum/provider";
 import $d7FTw$spectrumiconsuiCornerTriangle from "@spectrum-icons/ui/CornerTriangle";
@@ -44,246 +44,15 @@ function $parcel$export(e, n, v, s) {
  * governing permissions and limitations under the License.
  */ 
 
-var $94fed84ca44dbd5b$exports = {};
-var $3d5058299051dde5$exports = {};
-$3d5058299051dde5$exports = {
-    "loading": `\u{62C}\u{627}\u{631}\u{64D} \u{627}\u{644}\u{62A}\u{62D}\u{645}\u{64A}\u{644}...`
-};
-
-
-var $b09fec806b7b8f22$exports = {};
-$b09fec806b7b8f22$exports = {
-    "loading": `\u{417}\u{430}\u{440}\u{435}\u{436}\u{434}\u{430}\u{43D}\u{435}...`
-};
-
-
-var $ca0549dfb1669363$exports = {};
-$ca0549dfb1669363$exports = {
-    "loading": `Na\u{10D}\xedt\xe1n\xed...`
-};
-
-
-var $98f2907c0694c5b6$exports = {};
-$98f2907c0694c5b6$exports = {
-    "loading": `Indl\xe6ser ...`
-};
-
-
-var $9d6fce77106482c8$exports = {};
-$9d6fce77106482c8$exports = {
-    "loading": `Wird geladen \u{2026}`
-};
-
-
-var $db5c63cb8d95d7a4$exports = {};
-$db5c63cb8d95d7a4$exports = {
-    "loading": `\u{3A6}\u{3CC}\u{3C1}\u{3C4}\u{3C9}\u{3C3}\u{3B7}\u{2026}`
-};
-
-
+var $8cc8e92eff102fe0$exports = {};
 var $94e4262f3b79d866$exports = {};
 $94e4262f3b79d866$exports = {
-    "loading": `Loading\u{2026}`
-};
-
-
-var $16cf2bb6affc1ca9$exports = {};
-$16cf2bb6affc1ca9$exports = {
-    "loading": `Cargando\u{2026}`
-};
-
-
-var $d2a4cd1ccd3b9660$exports = {};
-$d2a4cd1ccd3b9660$exports = {
-    "loading": `Laadimine...`
-};
-
-
-var $0aa3ceafb597db1b$exports = {};
-$0aa3ceafb597db1b$exports = {
-    "loading": `Ladataan\u{2026}`
-};
-
-
-var $5779b104f19b7b1a$exports = {};
-$5779b104f19b7b1a$exports = {
-    "loading": `Chargement en cours\u{2026}`
-};
-
-
-var $33aba885fd306c4d$exports = {};
-$33aba885fd306c4d$exports = {
-    "loading": `\u{5D8}\u{5D5}\u{5E2}\u{5DF}...`
-};
-
-
-var $30a099a3f19b59af$exports = {};
-$30a099a3f19b59af$exports = {
-    "loading": `U\u{10D}itavam...`
-};
-
-
-var $f257504b02c6b23f$exports = {};
-$f257504b02c6b23f$exports = {
-    "loading": `Bet\xf6lt\xe9s folyamatban\u{2026}`
-};
-
-
-var $b6e12833733478ab$exports = {};
-$b6e12833733478ab$exports = {
-    "loading": `Caricamento...`
-};
-
-
-var $e69fac8c5f9d6043$exports = {};
-$e69fac8c5f9d6043$exports = {
-    "loading": `\u{8AAD}\u{307F}\u{8FBC}\u{307F}\u{4E2D}...`
-};
-
-
-var $a9b740b7d23548d0$exports = {};
-$a9b740b7d23548d0$exports = {
-    "loading": `\u{B85C}\u{B4DC} \u{C911}\u{2026}`
-};
-
-
-var $4d8ca888adc67de0$exports = {};
-$4d8ca888adc67de0$exports = {
-    "loading": `\u{12E}keliama\u{2026}`
+    "pending": `pending`
 };
 
 
-var $5d3a845adaaa328a$exports = {};
-$5d3a845adaaa328a$exports = {
-    "loading": `Notiek iel\u{101}de\u{2026}`
-};
-
-
-var $20112446b2d06d6e$exports = {};
-$20112446b2d06d6e$exports = {
-    "loading": `Laster inn ...`
-};
-
-
-var $168501f8ff8ad607$exports = {};
-$168501f8ff8ad607$exports = {
-    "loading": `Laden...`
-};
-
-
-var $7d885e2935e9ed01$exports = {};
-$7d885e2935e9ed01$exports = {
-    "loading": `Wczytywanie...`
-};
-
-
-var $ece77a10c9739c65$exports = {};
-$ece77a10c9739c65$exports = {
-    "loading": `Carregando...`
-};
-
-
-var $8dbae7e3487e6fc7$exports = {};
-$8dbae7e3487e6fc7$exports = {
-    "loading": `A carregar...`
-};
-
-
-var $4ab371254445a3f4$exports = {};
-$4ab371254445a3f4$exports = {
-    "loading": `Se \xeencarc\u{103}...`
-};
-
-
-var $c5ac7ec630c67dba$exports = {};
-$c5ac7ec630c67dba$exports = {
-    "loading": `\u{417}\u{430}\u{433}\u{440}\u{443}\u{437}\u{43A}\u{430}...`
-};
-
-
-var $846eaea7e21f7fbf$exports = {};
-$846eaea7e21f7fbf$exports = {
-    "loading": `Na\u{10D}\xedtava sa...`
-};
-
-
-var $dde062d6acd4e43a$exports = {};
-$dde062d6acd4e43a$exports = {
-    "loading": `Nalaganje ...`
-};
-
-
-var $579b7ae9c5494112$exports = {};
-$579b7ae9c5494112$exports = {
-    "loading": `U\u{10D}itavam...`
-};
-
-
-var $3b62c0bcc6cf3c98$exports = {};
-$3b62c0bcc6cf3c98$exports = {
-    "loading": `L\xe4ser in...`
-};
-
-
-var $31f966e58b99834b$exports = {};
-$31f966e58b99834b$exports = {
-    "loading": `Y\xfckleniyor...`
-};
-
-
-var $a3d99ea5d46a3d12$exports = {};
-$a3d99ea5d46a3d12$exports = {
-    "loading": `\u{417}\u{430}\u{432}\u{430}\u{43D}\u{442}\u{430}\u{436}\u{435}\u{43D}\u{43D}\u{44F}\u{2026}`
-};
-
-
-var $6e4b63af77288b7a$exports = {};
-$6e4b63af77288b7a$exports = {
-    "loading": `\u{6B63}\u{5728}\u{52A0}\u{8F7D}...`
-};
-
-
-var $be993a68bccef72a$exports = {};
-$be993a68bccef72a$exports = {
-    "loading": `\u{8F09}\u{5165}\u{4E2D}\u{2026}`
-};
-
-
-$94fed84ca44dbd5b$exports = {
-    "ar-AE": $3d5058299051dde5$exports,
-    "bg-BG": $b09fec806b7b8f22$exports,
-    "cs-CZ": $ca0549dfb1669363$exports,
-    "da-DK": $98f2907c0694c5b6$exports,
-    "de-DE": $9d6fce77106482c8$exports,
-    "el-GR": $db5c63cb8d95d7a4$exports,
-    "en-US": $94e4262f3b79d866$exports,
-    "es-ES": $16cf2bb6affc1ca9$exports,
-    "et-EE": $d2a4cd1ccd3b9660$exports,
-    "fi-FI": $0aa3ceafb597db1b$exports,
-    "fr-FR": $5779b104f19b7b1a$exports,
-    "he-IL": $33aba885fd306c4d$exports,
-    "hr-HR": $30a099a3f19b59af$exports,
-    "hu-HU": $f257504b02c6b23f$exports,
-    "it-IT": $b6e12833733478ab$exports,
-    "ja-JP": $e69fac8c5f9d6043$exports,
-    "ko-KR": $a9b740b7d23548d0$exports,
-    "lt-LT": $4d8ca888adc67de0$exports,
-    "lv-LV": $5d3a845adaaa328a$exports,
-    "nb-NO": $20112446b2d06d6e$exports,
-    "nl-NL": $168501f8ff8ad607$exports,
-    "pl-PL": $7d885e2935e9ed01$exports,
-    "pt-BR": $ece77a10c9739c65$exports,
-    "pt-PT": $8dbae7e3487e6fc7$exports,
-    "ro-RO": $4ab371254445a3f4$exports,
-    "ru-RU": $c5ac7ec630c67dba$exports,
-    "sk-SK": $846eaea7e21f7fbf$exports,
-    "sl-SI": $dde062d6acd4e43a$exports,
-    "sr-SP": $579b7ae9c5494112$exports,
-    "sv-SE": $3b62c0bcc6cf3c98$exports,
-    "tr-TR": $31f966e58b99834b$exports,
-    "uk-UA": $a3d99ea5d46a3d12$exports,
-    "zh-CN": $6e4b63af77288b7a$exports,
-    "zh-TW": $be993a68bccef72a$exports
+$8cc8e92eff102fe0$exports = {
+    "en-US": $94e4262f3b79d866$exports
 };
 
 
@@ -426,6 +195,7 @@ function $b865a6f0049e2d66$var$disablePendingProps(props) {
     return props;
 }
 function $b865a6f0049e2d66$var$Button(props, ref) {
+    var _buttonProps_arialabelledby;
     props = (0, $d7FTw$useProviderProps)(props);
     props = (0, $d7FTw$useSlotProps)(props, "button");
     props = $b865a6f0049e2d66$var$disablePendingProps(props);
@@ -435,11 +205,24 @@ function $b865a6f0049e2d66$var$Button(props, ref) {
     let { hoverProps: hoverProps, isHovered: isHovered } = (0, $d7FTw$useHover)({
         isDisabled: isDisabled
     });
-    let stringFormatter = (0, $d7FTw$useLocalizedStringFormatter)((0, (/*@__PURE__*/$parcel$interopDefault($94fed84ca44dbd5b$exports))));
+    let [isFocused, onFocusChange] = (0, $d7FTw$useState)(false);
+    let { focusProps: focusProps } = (0, $d7FTw$useFocus)({
+        onFocusChange: onFocusChange,
+        isDisabled: isDisabled
+    });
+    let stringFormatter = (0, $d7FTw$useLocalizedStringFormatter)((0, (/*@__PURE__*/$parcel$interopDefault($8cc8e92eff102fe0$exports))));
     let { styleProps: styleProps } = (0, $d7FTw$useStyleProps)(otherProps);
     let hasLabel = (0, $d7FTw$useHasChild)(`.${(0, (/*@__PURE__*/$parcel$interopDefault($086e93d2352a4536$exports)))["spectrum-Button-label"]}`, domRef);
     let hasIcon = (0, $d7FTw$useHasChild)(`.${(0, (/*@__PURE__*/$parcel$interopDefault($086e93d2352a4536$exports)))["spectrum-Icon"]}`, domRef);
+    // an aria label will block children and their labels from being read, this is undesirable for pending state
+    let hasAriaLabel = !!buttonProps["aria-label"] || !!buttonProps["aria-labelledby"];
     let [isProgressVisible, setIsProgressVisible] = (0, $d7FTw$useState)(false);
+    let backupButtonId = (0, $d7FTw$useId)();
+    let buttonId = buttonProps.id || backupButtonId;
+    let spinnerId = (0, $d7FTw$useId)();
+    let textId = (0, $d7FTw$useId)();
+    let iconId = (0, $d7FTw$useId)();
+    let auxLabelId = (0, $d7FTw$useId)();
     (0, $d7FTw$useEffect)(()=>{
         let timeout;
         if (isPending) // Start timer when isPending is set to true.
@@ -465,13 +248,16 @@ function $b865a6f0049e2d66$var$Button(props, ref) {
         autoFocus: autoFocus
     }, /*#__PURE__*/ (0, $d7FTw$react).createElement(Element, {
         ...styleProps,
-        ...(0, $d7FTw$mergeProps)(buttonProps, hoverProps),
+        ...(0, $d7FTw$mergeProps)(buttonProps, hoverProps, focusProps),
+        id: buttonId,
         ref: domRef,
         "data-variant": variant,
         "data-style": style,
         "data-static-color": staticColor || undefined,
-        "aria-disabled": isPending || undefined,
-        "aria-live": isPending ? "polite" : undefined,
+        "aria-disabled": isPending ? "true" : undefined,
+        "aria-label": isPending ? undefined : buttonProps["aria-label"],
+        "aria-labelledby": isPending ? undefined : buttonProps["aria-labelledby"],
+        "aria-live": isPending && isFocused ? "polite" : undefined,
         className: (0, $d7FTw$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($086e93d2352a4536$exports))), "spectrum-Button", {
             "spectrum-Button--iconOnly": hasIcon && !hasLabel,
             "is-disabled": isDisabled || isProgressVisible,
@@ -482,20 +268,34 @@ function $b865a6f0049e2d66$var$Button(props, ref) {
     }, /*#__PURE__*/ (0, $d7FTw$react).createElement((0, $d7FTw$SlotProvider), {
         slots: {
             icon: {
+                id: iconId,
                 size: "S",
                 UNSAFE_className: (0, $d7FTw$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($086e93d2352a4536$exports))), "spectrum-Icon")
             },
             text: {
+                id: textId,
                 UNSAFE_className: (0, $d7FTw$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($086e93d2352a4536$exports))), "spectrum-Button-label")
             }
         }
-    }, isProgressVisible && /*#__PURE__*/ (0, $d7FTw$react).createElement((0, $d7FTw$ProgressCircle), {
-        "aria-label": stringFormatter.format("loading"),
+    }, typeof children === "string" ? /*#__PURE__*/ (0, $d7FTw$react).createElement((0, $d7FTw$Text), null, children) : children, isPending && /*#__PURE__*/ (0, $d7FTw$react).createElement((0, $d7FTw$ProgressCircle), {
+        "aria-hidden": "true",
         isIndeterminate: true,
         size: "S",
         UNSAFE_className: (0, $d7FTw$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($086e93d2352a4536$exports))), "spectrum-Button-circleLoader"),
+        UNSAFE_style: {
+            visibility: isProgressVisible ? "visible" : "hidden"
+        },
         staticColor: staticColor
-    }), typeof children === "string" ? /*#__PURE__*/ (0, $d7FTw$react).createElement((0, $d7FTw$Text), null, children) : children)));
+    }), isPending && hasAriaLabel && /*#__PURE__*/ (0, $d7FTw$react).createElement("div", {
+        "aria-hidden": "true",
+        id: auxLabelId,
+        "aria-label": buttonProps["aria-label"],
+        "aria-labelledby": (_buttonProps_arialabelledby = buttonProps["aria-labelledby"]) === null || _buttonProps_arialabelledby === void 0 ? void 0 : _buttonProps_arialabelledby.replace(buttonId, auxLabelId)
+    }), isPending && /*#__PURE__*/ (0, $d7FTw$react).createElement("div", {
+        id: spinnerId,
+        "aria-label": stringFormatter.format("pending"),
+        "aria-labelledby": `${hasAriaLabel ? "" : iconId} ${hasAriaLabel ? auxLabelId : textId} ${spinnerId}`
+    }))));
 }
 /**
  * Buttons allow users to perform an action or to navigate to another page.