@react-spectrum/button 3.12.4 → 3.13.0

package/dist/import.mjs

@@ -2,10 +2,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 $d7FTw$react from "react";
+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 {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";
 import $d7FTw$spectrumiconsuiCrossSmall from "@spectrum-icons/ui/CrossSmall";
@@ -40,6 +42,250 @@ function $parcel$export(e, n, v, s) {
  * governing permissions and limitations under the License.
  */ 
 
+var $94fed84ca44dbd5b$exports = {};
+var $3d5058299051dde5$exports = {};
+$3d5058299051dde5$exports = {
+    "loading": `جارٍ التحميل...`
+};
+
+
+var $b09fec806b7b8f22$exports = {};
+$b09fec806b7b8f22$exports = {
+    "loading": `Зареждане...`
+};
+
+
+var $ca0549dfb1669363$exports = {};
+$ca0549dfb1669363$exports = {
+    "loading": `Načítání...`
+};
+
+
+var $98f2907c0694c5b6$exports = {};
+$98f2907c0694c5b6$exports = {
+    "loading": `Indlæser ...`
+};
+
+
+var $9d6fce77106482c8$exports = {};
+$9d6fce77106482c8$exports = {
+    "loading": `Wird geladen …`
+};
+
+
+var $db5c63cb8d95d7a4$exports = {};
+$db5c63cb8d95d7a4$exports = {
+    "loading": `Φόρτωση…`
+};
+
+
+var $94e4262f3b79d866$exports = {};
+$94e4262f3b79d866$exports = {
+    "loading": `Loading…`
+};
+
+
+var $16cf2bb6affc1ca9$exports = {};
+$16cf2bb6affc1ca9$exports = {
+    "loading": `Cargando…`
+};
+
+
+var $d2a4cd1ccd3b9660$exports = {};
+$d2a4cd1ccd3b9660$exports = {
+    "loading": `Laadimine...`
+};
+
+
+var $0aa3ceafb597db1b$exports = {};
+$0aa3ceafb597db1b$exports = {
+    "loading": `Ladataan…`
+};
+
+
+var $5779b104f19b7b1a$exports = {};
+$5779b104f19b7b1a$exports = {
+    "loading": `Chargement en cours…`
+};
+
+
+var $33aba885fd306c4d$exports = {};
+$33aba885fd306c4d$exports = {
+    "loading": `טוען...`
+};
+
+
+var $30a099a3f19b59af$exports = {};
+$30a099a3f19b59af$exports = {
+    "loading": `Učitavam...`
+};
+
+
+var $f257504b02c6b23f$exports = {};
+$f257504b02c6b23f$exports = {
+    "loading": `Betöltés folyamatban…`
+};
+
+
+var $b6e12833733478ab$exports = {};
+$b6e12833733478ab$exports = {
+    "loading": `Caricamento...`
+};
+
+
+var $e69fac8c5f9d6043$exports = {};
+$e69fac8c5f9d6043$exports = {
+    "loading": `読み込み中...`
+};
+
+
+var $a9b740b7d23548d0$exports = {};
+$a9b740b7d23548d0$exports = {
+    "loading": `로드 중…`
+};
+
+
+var $4d8ca888adc67de0$exports = {};
+$4d8ca888adc67de0$exports = {
+    "loading": `Įkeliama…`
+};
+
+
+var $5d3a845adaaa328a$exports = {};
+$5d3a845adaaa328a$exports = {
+    "loading": `Notiek ielāde…`
+};
+
+
+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 încarcă...`
+};
+
+
+var $c5ac7ec630c67dba$exports = {};
+$c5ac7ec630c67dba$exports = {
+    "loading": `Загрузка...`
+};
+
+
+var $846eaea7e21f7fbf$exports = {};
+$846eaea7e21f7fbf$exports = {
+    "loading": `Načítava sa...`
+};
+
+
+var $dde062d6acd4e43a$exports = {};
+$dde062d6acd4e43a$exports = {
+    "loading": `Nalaganje ...`
+};
+
+
+var $579b7ae9c5494112$exports = {};
+$579b7ae9c5494112$exports = {
+    "loading": `Učitavam...`
+};
+
+
+var $3b62c0bcc6cf3c98$exports = {};
+$3b62c0bcc6cf3c98$exports = {
+    "loading": `Läser in...`
+};
+
+
+var $31f966e58b99834b$exports = {};
+$31f966e58b99834b$exports = {
+    "loading": `Yükleniyor...`
+};
+
+
+var $a3d99ea5d46a3d12$exports = {};
+$a3d99ea5d46a3d12$exports = {
+    "loading": `Завантаження…`
+};
+
+
+var $6e4b63af77288b7a$exports = {};
+$6e4b63af77288b7a$exports = {
+    "loading": `正在加载...`
+};
+
+
+var $be993a68bccef72a$exports = {};
+$be993a68bccef72a$exports = {
+    "loading": `載入中…`
+};
+
+
+$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
+};
+
+
+
 
 
 var $086e93d2352a4536$exports = {};
@@ -55,6 +301,8 @@ $parcel$export($086e93d2352a4536$exports, "spectrum-Icon", () => $086e93d2352a45
 $parcel$export($086e93d2352a4536$exports, "is-hovered", () => $086e93d2352a4536$export$b8813cd5d7824ce7, (v) => $086e93d2352a4536$export$b8813cd5d7824ce7 = v);
 $parcel$export($086e93d2352a4536$exports, "spectrum-Button-label", () => $086e93d2352a4536$export$c081ba562e204942, (v) => $086e93d2352a4536$export$c081ba562e204942 = v);
 $parcel$export($086e93d2352a4536$exports, "spectrum-Button--iconOnly", () => $086e93d2352a4536$export$c1d306ec0fae3838, (v) => $086e93d2352a4536$export$c1d306ec0fae3838 = v);
+$parcel$export($086e93d2352a4536$exports, "spectrum-Button--pending", () => $086e93d2352a4536$export$54592d0984f245d5, (v) => $086e93d2352a4536$export$54592d0984f245d5 = v);
+$parcel$export($086e93d2352a4536$exports, "spectrum-Button-circleLoader", () => $086e93d2352a4536$export$76d4531f0342bbe0, (v) => $086e93d2352a4536$export$76d4531f0342bbe0 = v);
 $parcel$export($086e93d2352a4536$exports, "spectrum-ActionButton-label", () => $086e93d2352a4536$export$ebb4635c66bacdb9, (v) => $086e93d2352a4536$export$ebb4635c66bacdb9 = v);
 $parcel$export($086e93d2352a4536$exports, "spectrum-ActionButton-hold", () => $086e93d2352a4536$export$4a4f01c443eff992, (v) => $086e93d2352a4536$export$4a4f01c443eff992 = v);
 $parcel$export($086e93d2352a4536$exports, "spectrum-ActionButton--quiet", () => $086e93d2352a4536$export$40e1f009544bacf3, (v) => $086e93d2352a4536$export$40e1f009544bacf3 = v);
@@ -85,6 +333,8 @@ var $086e93d2352a4536$export$d374b04f30360026;
 var $086e93d2352a4536$export$b8813cd5d7824ce7;
 var $086e93d2352a4536$export$c081ba562e204942;
 var $086e93d2352a4536$export$c1d306ec0fae3838;
+var $086e93d2352a4536$export$54592d0984f245d5;
+var $086e93d2352a4536$export$76d4531f0342bbe0;
 var $086e93d2352a4536$export$ebb4635c66bacdb9;
 var $086e93d2352a4536$export$4a4f01c443eff992;
 var $086e93d2352a4536$export$40e1f009544bacf3;
@@ -115,6 +365,8 @@ $086e93d2352a4536$export$d374b04f30360026 = "spectrum-Icon_e2d99e";
 $086e93d2352a4536$export$b8813cd5d7824ce7 = "is-hovered_e2d99e";
 $086e93d2352a4536$export$c081ba562e204942 = "spectrum-Button-label_e2d99e";
 $086e93d2352a4536$export$c1d306ec0fae3838 = "spectrum-Button--iconOnly_e2d99e";
+$086e93d2352a4536$export$54592d0984f245d5 = "spectrum-Button--pending_e2d99e";
+$086e93d2352a4536$export$76d4531f0342bbe0 = "spectrum-Button-circleLoader_e2d99e";
 $086e93d2352a4536$export$ebb4635c66bacdb9 = "spectrum-ActionButton-label_e2d99e";
 $086e93d2352a4536$export$4a4f01c443eff992 = "spectrum-ActionButton-hold_e2d99e";
 $086e93d2352a4536$export$40e1f009544bacf3 = "spectrum-ActionButton--quiet_e2d99e";
@@ -140,18 +392,52 @@ $086e93d2352a4536$export$5cda1128f9112d2e = "spectrum-Button--overBackground_e2d
 
 
 
+
+function $b865a6f0049e2d66$var$disablePendingProps(props) {
+    // Don't allow interaction while UNSTABLE_isPending is true
+    if (props.UNSTABLE_isPending) {
+        props.onPress = undefined;
+        props.onPressStart = undefined;
+        props.onPressEnd = undefined;
+        props.onPressChange = undefined;
+        props.onPressUp = undefined;
+        props.onKeyDown = undefined;
+        props.onKeyUp = undefined;
+        props.onClick = undefined;
+        props.href = undefined;
+    }
+    return props;
+}
 function $b865a6f0049e2d66$var$Button(props, ref) {
     props = (0, $d7FTw$useProviderProps)(props);
     props = (0, $d7FTw$useSlotProps)(props, "button");
-    let { elementType: ElementType = "button" , children: children , variant: variant , style: style = variant === "accent" || variant === "cta" ? "fill" : "outline" , staticColor: staticColor , isDisabled: isDisabled , autoFocus: autoFocus , ...otherProps } = props;
+    props = $b865a6f0049e2d66$var$disablePendingProps(props);
+    let { elementType: ElementType = "button" , children: children , variant: variant , style: style = variant === "accent" || variant === "cta" ? "fill" : "outline" , staticColor: staticColor , isDisabled: isDisabled , UNSTABLE_isPending: UNSTABLE_isPending , autoFocus: autoFocus , ...otherProps } = props;
     let domRef = (0, $d7FTw$useFocusableRef)(ref);
     let { buttonProps: buttonProps , isPressed: isPressed  } = (0, $d7FTw$useButton)(props, domRef);
     let { hoverProps: hoverProps , isHovered: isHovered  } = (0, $d7FTw$useHover)({
         isDisabled: isDisabled
     });
+    let stringFormatter = (0, $d7FTw$useLocalizedStringFormatter)((0, (/*@__PURE__*/$parcel$interopDefault($94fed84ca44dbd5b$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);
+    let [isProgressVisible, setIsProgressVisible] = (0, $d7FTw$useState)(false);
+    (0, $d7FTw$useEffect)(()=>{
+        let timeout;
+        if (UNSTABLE_isPending) // Start timer when UNSTABLE_isPending is set to true.
+        timeout = setTimeout(()=>{
+            setIsProgressVisible(true);
+        }, 1000);
+        else // Exit loading state when UNSTABLE_isPending is set to false. */
+        setIsProgressVisible(false);
+        return ()=>{
+            // Clean up on unmount or when user removes UNSTABLE_isPending prop before entering loading state.
+            clearTimeout(timeout);
+        };
+    }, [
+        UNSTABLE_isPending
+    ]);
     if (variant === "cta") variant = "accent";
     else if (variant === "overBackground") {
         variant = "primary";
@@ -167,11 +453,14 @@ function $b865a6f0049e2d66$var$Button(props, ref) {
         "data-variant": variant,
         "data-style": style,
         "data-static-color": staticColor || undefined,
+        "aria-disabled": UNSTABLE_isPending || undefined,
+        "aria-live": UNSTABLE_isPending ? "polite" : undefined,
         className: (0, $d7FTw$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($086e93d2352a4536$exports))), "spectrum-Button", {
             "spectrum-Button--iconOnly": hasIcon && !hasLabel,
-            "is-disabled": isDisabled,
+            "is-disabled": isDisabled || isProgressVisible,
             "is-active": isPressed,
-            "is-hovered": isHovered
+            "is-hovered": isHovered,
+            "spectrum-Button--pending": isProgressVisible
         }, styleProps.className)
     }, /*#__PURE__*/ (0, $d7FTw$react).createElement((0, $d7FTw$SlotProvider), {
         slots: {
@@ -183,7 +472,13 @@ function $b865a6f0049e2d66$var$Button(props, ref) {
                 UNSAFE_className: (0, $d7FTw$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($086e93d2352a4536$exports))), "spectrum-Button-label")
             }
         }
-    }, typeof children === "string" ? /*#__PURE__*/ (0, $d7FTw$react).createElement((0, $d7FTw$Text), null, children) : children)));
+    }, isProgressVisible && /*#__PURE__*/ (0, $d7FTw$react).createElement((0, $d7FTw$ProgressCircle), {
+        "aria-label": stringFormatter.format("loading"),
+        isIndeterminate: true,
+        size: "S",
+        UNSAFE_className: (0, $d7FTw$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($086e93d2352a4536$exports))), "spectrum-Button-circleLoader"),
+        variant: staticColor ? "overBackground" : undefined
+    }), typeof children === "string" ? /*#__PURE__*/ (0, $d7FTw$react).createElement((0, $d7FTw$Text), null, children) : children)));
 }
 /**
  * Buttons allow users to perform an action or to navigate to another page.
@@ -280,7 +575,7 @@ function $042ad0b3a4a55b33$var$ActionButton(props, ref) {
 // @private
 function $b43bd559b476d0c4$var$FieldButton(props, ref) {
     props = (0, $d7FTw$useSlotProps)(props, "button");
-    let { isQuiet: isQuiet , isDisabled: isDisabled , validationState: validationState , children: children , autoFocus: autoFocus , isActive: isActive , focusRingClass: focusRingClass , ...otherProps } = props;
+    let { isQuiet: isQuiet , isDisabled: isDisabled , validationState: validationState , isInvalid: isInvalid , children: children , autoFocus: autoFocus , isActive: isActive , focusRingClass: focusRingClass , ...otherProps } = props;
     let domRef = (0, $d7FTw$useFocusableRef)(ref);
     let { buttonProps: buttonProps , isPressed: isPressed  } = (0, $d7FTw$useButton)(props, domRef);
     let { hoverProps: hoverProps , isHovered: isHovered  } = (0, $d7FTw$useHover)({
@@ -297,7 +592,7 @@ function $b43bd559b476d0c4$var$FieldButton(props, ref) {
             "spectrum-FieldButton--quiet": isQuiet,
             "is-active": isActive || isPressed,
             "is-disabled": isDisabled,
-            "spectrum-FieldButton--invalid": validationState === "invalid",
+            "spectrum-FieldButton--invalid": isInvalid || validationState === "invalid",
             "is-hovered": isHovered
         }, styleProps.className)
     }, /*#__PURE__*/ (0, $d7FTw$react).createElement((0, $d7FTw$SlotProvider), {