@react-spectrum/button 3.15.0 → 3.16.1

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, isAppleDevice as $d7FTw$isAppleDevice, isFirefox as $d7FTw$isFirefox, 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";
@@ -47,205 +47,205 @@ function $parcel$export(e, n, v, s) {
 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}...`
+    "pending": `\u{642}\u{64A}\u{62F} \u{627}\u{644}\u{627}\u{646}\u{62A}\u{638}\u{627}\u{631}`
 };
 
 
 var $b09fec806b7b8f22$exports = {};
 $b09fec806b7b8f22$exports = {
-    "loading": `\u{417}\u{430}\u{440}\u{435}\u{436}\u{434}\u{430}\u{43D}\u{435}...`
+    "pending": `\u{43D}\u{435}\u{434}\u{43E}\u{432}\u{44A}\u{440}\u{448}\u{435}\u{43D}\u{43E}`
 };
 
 
 var $ca0549dfb1669363$exports = {};
 $ca0549dfb1669363$exports = {
-    "loading": `Na\u{10D}\xedt\xe1n\xed...`
+    "pending": `\u{10D}ek\xe1 na vy\u{159}\xedzen\xed`
 };
 
 
 var $98f2907c0694c5b6$exports = {};
 $98f2907c0694c5b6$exports = {
-    "loading": `Indl\xe6ser ...`
+    "pending": `afventende`
 };
 
 
 var $9d6fce77106482c8$exports = {};
 $9d6fce77106482c8$exports = {
-    "loading": `Wird geladen \u{2026}`
+    "pending": `Ausstehend`
 };
 
 
 var $db5c63cb8d95d7a4$exports = {};
 $db5c63cb8d95d7a4$exports = {
-    "loading": `\u{3A6}\u{3CC}\u{3C1}\u{3C4}\u{3C9}\u{3C3}\u{3B7}\u{2026}`
+    "pending": `\u{3C3}\u{3B5} \u{3B5}\u{3BA}\u{3BA}\u{3C1}\u{3B5}\u{3BC}\u{3CC}\u{3C4}\u{3B7}\u{3C4}\u{3B1}`
 };
 
 
 var $94e4262f3b79d866$exports = {};
 $94e4262f3b79d866$exports = {
-    "loading": `Loading\u{2026}`
+    "pending": `pending`
 };
 
 
 var $16cf2bb6affc1ca9$exports = {};
 $16cf2bb6affc1ca9$exports = {
-    "loading": `Cargando\u{2026}`
+    "pending": `pendiente`
 };
 
 
 var $d2a4cd1ccd3b9660$exports = {};
 $d2a4cd1ccd3b9660$exports = {
-    "loading": `Laadimine...`
+    "pending": `ootel`
 };
 
 
 var $0aa3ceafb597db1b$exports = {};
 $0aa3ceafb597db1b$exports = {
-    "loading": `Ladataan\u{2026}`
+    "pending": `odottaa`
 };
 
 
 var $5779b104f19b7b1a$exports = {};
 $5779b104f19b7b1a$exports = {
-    "loading": `Chargement en cours\u{2026}`
+    "pending": `En attente`
 };
 
 
 var $33aba885fd306c4d$exports = {};
 $33aba885fd306c4d$exports = {
-    "loading": `\u{5D8}\u{5D5}\u{5E2}\u{5DF}...`
+    "pending": `\u{5DE}\u{5DE}\u{5EA}\u{5D9}\u{5DF} \u{5DC}`
 };
 
 
 var $30a099a3f19b59af$exports = {};
 $30a099a3f19b59af$exports = {
-    "loading": `U\u{10D}itavam...`
+    "pending": `u tijeku`
 };
 
 
 var $f257504b02c6b23f$exports = {};
 $f257504b02c6b23f$exports = {
-    "loading": `Bet\xf6lt\xe9s folyamatban\u{2026}`
+    "pending": `f\xfcgg\u{151}ben lev\u{151}`
 };
 
 
 var $b6e12833733478ab$exports = {};
 $b6e12833733478ab$exports = {
-    "loading": `Caricamento...`
+    "pending": `in sospeso`
 };
 
 
 var $e69fac8c5f9d6043$exports = {};
 $e69fac8c5f9d6043$exports = {
-    "loading": `\u{8AAD}\u{307F}\u{8FBC}\u{307F}\u{4E2D}...`
+    "pending": `\u{4FDD}\u{7559}`
 };
 
 
 var $a9b740b7d23548d0$exports = {};
 $a9b740b7d23548d0$exports = {
-    "loading": `\u{B85C}\u{B4DC} \u{C911}\u{2026}`
+    "pending": `\u{BCF4}\u{B958} \u{C911}`
 };
 
 
 var $4d8ca888adc67de0$exports = {};
 $4d8ca888adc67de0$exports = {
-    "loading": `\u{12E}keliama\u{2026}`
+    "pending": `laukiama`
 };
 
 
 var $5d3a845adaaa328a$exports = {};
 $5d3a845adaaa328a$exports = {
-    "loading": `Notiek iel\u{101}de\u{2026}`
+    "pending": `gaida`
 };
 
 
 var $20112446b2d06d6e$exports = {};
 $20112446b2d06d6e$exports = {
-    "loading": `Laster inn ...`
+    "pending": `avventer`
 };
 
 
 var $168501f8ff8ad607$exports = {};
 $168501f8ff8ad607$exports = {
-    "loading": `Laden...`
+    "pending": `in behandeling`
 };
 
 
 var $7d885e2935e9ed01$exports = {};
 $7d885e2935e9ed01$exports = {
-    "loading": `Wczytywanie...`
+    "pending": `oczekuj\u{105}ce`
 };
 
 
 var $ece77a10c9739c65$exports = {};
 $ece77a10c9739c65$exports = {
-    "loading": `Carregando...`
+    "pending": `pendente`
 };
 
 
 var $8dbae7e3487e6fc7$exports = {};
 $8dbae7e3487e6fc7$exports = {
-    "loading": `A carregar...`
+    "pending": `pendente`
 };
 
 
 var $4ab371254445a3f4$exports = {};
 $4ab371254445a3f4$exports = {
-    "loading": `Se \xeencarc\u{103}...`
+    "pending": `\xeen a\u{219}teptare`
 };
 
 
 var $c5ac7ec630c67dba$exports = {};
 $c5ac7ec630c67dba$exports = {
-    "loading": `\u{417}\u{430}\u{433}\u{440}\u{443}\u{437}\u{43A}\u{430}...`
+    "pending": `\u{432} \u{43E}\u{436}\u{438}\u{434}\u{430}\u{43D}\u{438}\u{438}`
 };
 
 
 var $846eaea7e21f7fbf$exports = {};
 $846eaea7e21f7fbf$exports = {
-    "loading": `Na\u{10D}\xedtava sa...`
+    "pending": `\u{10D}akaj\xface`
 };
 
 
 var $dde062d6acd4e43a$exports = {};
 $dde062d6acd4e43a$exports = {
-    "loading": `Nalaganje ...`
+    "pending": `v teku`
 };
 
 
 var $579b7ae9c5494112$exports = {};
 $579b7ae9c5494112$exports = {
-    "loading": `U\u{10D}itavam...`
+    "pending": `nere\u{161}eno`
 };
 
 
 var $3b62c0bcc6cf3c98$exports = {};
 $3b62c0bcc6cf3c98$exports = {
-    "loading": `L\xe4ser in...`
+    "pending": `v\xe4ntande`
 };
 
 
 var $31f966e58b99834b$exports = {};
 $31f966e58b99834b$exports = {
-    "loading": `Y\xfckleniyor...`
+    "pending": `beklemede`
 };
 
 
 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}`
+    "pending": `\u{432} \u{43E}\u{447}\u{456}\u{43A}\u{443}\u{432}\u{430}\u{43D}\u{43D}\u{456}`
 };
 
 
 var $6e4b63af77288b7a$exports = {};
 $6e4b63af77288b7a$exports = {
-    "loading": `\u{6B63}\u{5728}\u{52A0}\u{8F7D}...`
+    "pending": `\u{5F85}\u{5904}\u{7406}`
 };
 
 
 var $be993a68bccef72a$exports = {};
 $be993a68bccef72a$exports = {
-    "loading": `\u{8F09}\u{5165}\u{4E2D}\u{2026}`
+    "pending": `\u{5F85}\u{8655}\u{7406}`
 };
 
 
@@ -426,6 +426,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 +436,23 @@ 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($94fed84ca44dbd5b$exports))), "@react-spectrum/button");
     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 iconId = (0, $d7FTw$useId)();
+    let textId = (0, $d7FTw$useId)();
+    let spinnerId = (0, $d7FTw$useId)();
     (0, $d7FTw$useEffect)(()=>{
         let timeout;
         if (isPending) // Start timer when isPending is set to true.
@@ -460,18 +473,25 @@ function $b865a6f0049e2d66$var$Button(props, ref) {
         variant = "primary";
         staticColor = "white";
     }
+    const isPendingAriaLiveLabel = `${hasAriaLabel ? buttonProps["aria-label"] : ""} ${stringFormatter.format("pending")}`.trim();
+    var _buttonProps_arialabelledby_replace;
+    const isPendingAriaLiveLabelledby = hasAriaLabel ? (_buttonProps_arialabelledby_replace = (_buttonProps_arialabelledby = buttonProps["aria-labelledby"]) === null || _buttonProps_arialabelledby === void 0 ? void 0 : _buttonProps_arialabelledby.replace(buttonId, spinnerId)) !== null && _buttonProps_arialabelledby_replace !== void 0 ? _buttonProps_arialabelledby_replace : spinnerId : `${hasIcon ? iconId : ""} ${hasLabel ? textId : ""} ${spinnerId}`.trim();
+    let ariaLive = "polite";
+    if ((0, $d7FTw$isAppleDevice)() && (!hasAriaLabel || (0, $d7FTw$isFirefox)())) ariaLive = "off";
     return /*#__PURE__*/ (0, $d7FTw$react).createElement((0, $d7FTw$FocusRing), {
         focusRingClass: (0, $d7FTw$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($086e93d2352a4536$exports))), "focus-ring"),
         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 ? isPendingAriaLiveLabel : buttonProps["aria-label"],
+        "aria-labelledby": isPending ? isPendingAriaLiveLabelledby : buttonProps["aria-labelledby"],
         className: (0, $d7FTw$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($086e93d2352a4536$exports))), "spectrum-Button", {
             "spectrum-Button--iconOnly": hasIcon && !hasLabel,
             "is-disabled": isDisabled || isProgressVisible,
@@ -482,20 +502,36 @@ 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("div", {
+        "aria-hidden": "true",
+        style: {
+            visibility: isProgressVisible ? "visible" : "hidden"
+        },
+        className: (0, $d7FTw$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($086e93d2352a4536$exports))), "spectrum-Button-circleLoader")
+    }, /*#__PURE__*/ (0, $d7FTw$react).createElement((0, $d7FTw$ProgressCircle), {
+        "aria-label": isPendingAriaLiveLabel,
         isIndeterminate: true,
         size: "S",
-        UNSAFE_className: (0, $d7FTw$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($086e93d2352a4536$exports))), "spectrum-Button-circleLoader"),
         staticColor: staticColor
-    }), typeof children === "string" ? /*#__PURE__*/ (0, $d7FTw$react).createElement((0, $d7FTw$Text), null, children) : children)));
+    })), isPending && /*#__PURE__*/ (0, $d7FTw$react).createElement((0, $d7FTw$react).Fragment, null, /*#__PURE__*/ (0, $d7FTw$react).createElement("div", {
+        "aria-live": isFocused ? ariaLive : "off"
+    }, isProgressVisible && /*#__PURE__*/ (0, $d7FTw$react).createElement("div", {
+        role: "img",
+        "aria-labelledby": isPendingAriaLiveLabelledby
+    })), /*#__PURE__*/ (0, $d7FTw$react).createElement("div", {
+        id: spinnerId,
+        role: "img",
+        "aria-label": isPendingAriaLiveLabel
+    })))));
 }
 /**
  * Buttons allow users to perform an action or to navigate to another page.