@react-spectrum/button 3.0.0-nightly.2613 → 3.0.0-nightly.2668

package/dist/tr-TR.module.js

@@ -0,0 +1,8 @@
+var $31f966e58b99834b$exports = {};
+$31f966e58b99834b$exports = {
+    "pending": `beklemede`
+};
+
+
+export {$31f966e58b99834b$exports as default};
+//# sourceMappingURL=tr-TR.module.js.map

package/dist/tr-TR.module.js.map

@@ -0,0 +1 @@
+{"mappings":";AAAA,4BAAiB;IAAG,WAAW,CAAC,SAAS,CAAC;AAC1C","sources":["packages/@react-spectrum/button/intl/tr-TR.json"],"sourcesContent":["{\n  \"pending\": \"beklemede\"\n}\n"],"names":[],"version":3,"file":"tr-TR.module.js.map"}

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"mappings":";;;AAmLA;;;;GAIG;AACH,OAAA,IAAI;UAAgH,aAAa,WAAW,CAAC;MAAM,YAAY,CAAC;AC/FhK;;;GAGG;AACH,OAAA,IAAI,qLAA8C,CAAC;ACvEnD,0BAA2B,SAAQ,WAAW,EAAE,QAAQ,EAAE,UAAU;IAClE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IACtC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB;AAsDD,OAAA,IAAI,+JAA4C,CAAC;ACpBjD;;GAEG;AACH,OAAA,IAAI,mLAA4C,CAAC;AC1CjD,2BAA2B,CAAC,SAAS,WAAW,GAAG,QAAQ,CAAE,SAAQ,WAAW,EAAE,2BAA2B,CAAC,CAAC,EAAE,QAAQ,EAAE,UAAU;IACnI,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,YAAY,CAAC,EAAE,OAAO,CAAA;CACvB;AAmDD,OAAA,IAAI,qLAA4C,CAAC;ACQjD;;;GAGG;AACH,OAAA,IAAI,qLAA8C,CAAC;ACzEnD,YAAY,EAAC,yBAAyB,EAAE,mBAAmB,EAAE,wBAAwB,EAAE,yBAAyB,EAAC,MAAM,qBAAqB,CAAC","sources":["packages/@react-spectrum/button/src/packages/@react-spectrum/button/src/Button.tsx","packages/@react-spectrum/button/src/packages/@react-spectrum/button/src/ActionButton.tsx","packages/@react-spectrum/button/src/packages/@react-spectrum/button/src/FieldButton.tsx","packages/@react-spectrum/button/src/packages/@react-spectrum/button/src/LogicButton.tsx","packages/@react-spectrum/button/src/packages/@react-spectrum/button/src/ClearButton.tsx","packages/@react-spectrum/button/src/packages/@react-spectrum/button/src/ToggleButton.tsx","packages/@react-spectrum/button/src/packages/@react-spectrum/button/src/index.ts","packages/@react-spectrum/button/src/index.ts"],"sourcesContent":[null,null,null,null,null,null,null,"/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n/// <reference types=\"css-module-types\" />\nexport {Button} from './Button';\nexport {ActionButton} from './ActionButton';\nexport {FieldButton} from './FieldButton';\nexport {LogicButton} from './LogicButton';\nexport {ClearButton} from './ClearButton';\nexport {ToggleButton} from './ToggleButton';\nexport type {SpectrumActionButtonProps, SpectrumButtonProps, SpectrumLogicButtonProps, SpectrumToggleButtonProps} from '@react-types/button';\n"],"names":[],"version":3,"file":"types.d.ts.map"}
+{"mappings":";;;AA8LA;;;;GAIG;AACH,OAAA,IAAI;UAAgH,aAAa,WAAW,CAAC;MAAM,YAAY,CAAC;AC1GhK;;;GAGG;AACH,OAAA,IAAI,qLAA8C,CAAC;ACvEnD,0BAA2B,SAAQ,WAAW,EAAE,QAAQ,EAAE,UAAU;IAClE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IACtC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB;AAsDD,OAAA,IAAI,+JAA4C,CAAC;ACpBjD;;GAEG;AACH,OAAA,IAAI,mLAA4C,CAAC;AC1CjD,2BAA2B,CAAC,SAAS,WAAW,GAAG,QAAQ,CAAE,SAAQ,WAAW,EAAE,2BAA2B,CAAC,CAAC,EAAE,QAAQ,EAAE,UAAU;IACnI,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,YAAY,CAAC,EAAE,OAAO,CAAA;CACvB;AAmDD,OAAA,IAAI,qLAA4C,CAAC;ACQjD;;;GAGG;AACH,OAAA,IAAI,qLAA8C,CAAC;ACzEnD,YAAY,EAAC,yBAAyB,EAAE,mBAAmB,EAAE,wBAAwB,EAAE,yBAAyB,EAAC,MAAM,qBAAqB,CAAC","sources":["packages/@react-spectrum/button/src/packages/@react-spectrum/button/src/Button.tsx","packages/@react-spectrum/button/src/packages/@react-spectrum/button/src/ActionButton.tsx","packages/@react-spectrum/button/src/packages/@react-spectrum/button/src/FieldButton.tsx","packages/@react-spectrum/button/src/packages/@react-spectrum/button/src/LogicButton.tsx","packages/@react-spectrum/button/src/packages/@react-spectrum/button/src/ClearButton.tsx","packages/@react-spectrum/button/src/packages/@react-spectrum/button/src/ToggleButton.tsx","packages/@react-spectrum/button/src/packages/@react-spectrum/button/src/index.ts","packages/@react-spectrum/button/src/index.ts"],"sourcesContent":[null,null,null,null,null,null,null,"/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n/// <reference types=\"css-module-types\" />\nexport {Button} from './Button';\nexport {ActionButton} from './ActionButton';\nexport {FieldButton} from './FieldButton';\nexport {LogicButton} from './LogicButton';\nexport {ClearButton} from './ClearButton';\nexport {ToggleButton} from './ToggleButton';\nexport type {SpectrumActionButtonProps, SpectrumButtonProps, SpectrumLogicButtonProps, SpectrumToggleButtonProps} from '@react-types/button';\n"],"names":[],"version":3,"file":"types.d.ts.map"}

package/dist/uk-UA.main.js

@@ -0,0 +1,6 @@
+module.exports = {
+    "pending": `\u{432} \u{43E}\u{447}\u{456}\u{43A}\u{443}\u{432}\u{430}\u{43D}\u{43D}\u{456}`
+};
+
+
+//# sourceMappingURL=uk-UA.main.js.map

package/dist/uk-UA.main.js.map

@@ -0,0 +1 @@
+{"mappings":"AAAA,iBAAiB;IAAG,WAAW,CAAC,8EAAY,CAAC;AAC7C","sources":["packages/@react-spectrum/button/intl/uk-UA.json"],"sourcesContent":["{\n  \"pending\": \"в очікуванні\"\n}\n"],"names":[],"version":3,"file":"uk-UA.main.js.map"}

package/dist/uk-UA.mjs

@@ -0,0 +1,8 @@
+var $a3d99ea5d46a3d12$exports = {};
+$a3d99ea5d46a3d12$exports = {
+    "pending": `\u{432} \u{43E}\u{447}\u{456}\u{43A}\u{443}\u{432}\u{430}\u{43D}\u{43D}\u{456}`
+};
+
+
+export {$a3d99ea5d46a3d12$exports as default};
+//# sourceMappingURL=uk-UA.module.js.map

package/dist/uk-UA.module.js

@@ -0,0 +1,8 @@
+var $a3d99ea5d46a3d12$exports = {};
+$a3d99ea5d46a3d12$exports = {
+    "pending": `\u{432} \u{43E}\u{447}\u{456}\u{43A}\u{443}\u{432}\u{430}\u{43D}\u{43D}\u{456}`
+};
+
+
+export {$a3d99ea5d46a3d12$exports as default};
+//# sourceMappingURL=uk-UA.module.js.map

package/dist/uk-UA.module.js.map

@@ -0,0 +1 @@
+{"mappings":";AAAA,4BAAiB;IAAG,WAAW,CAAC,8EAAY,CAAC;AAC7C","sources":["packages/@react-spectrum/button/intl/uk-UA.json"],"sourcesContent":["{\n  \"pending\": \"в очікуванні\"\n}\n"],"names":[],"version":3,"file":"uk-UA.module.js.map"}

package/dist/zh-CN.main.js

@@ -0,0 +1,6 @@
+module.exports = {
+    "pending": `\u{5F85}\u{5904}\u{7406}`
+};
+
+
+//# sourceMappingURL=zh-CN.main.js.map

package/dist/zh-CN.main.js.map

@@ -0,0 +1 @@
+{"mappings":"AAAA,iBAAiB;IAAG,WAAW,CAAC,wBAAG,CAAC;AACpC","sources":["packages/@react-spectrum/button/intl/zh-CN.json"],"sourcesContent":["{\n  \"pending\": \"待处理\"\n}\n"],"names":[],"version":3,"file":"zh-CN.main.js.map"}

package/dist/zh-CN.mjs

@@ -0,0 +1,8 @@
+var $6e4b63af77288b7a$exports = {};
+$6e4b63af77288b7a$exports = {
+    "pending": `\u{5F85}\u{5904}\u{7406}`
+};
+
+
+export {$6e4b63af77288b7a$exports as default};
+//# sourceMappingURL=zh-CN.module.js.map

package/dist/zh-CN.module.js

@@ -0,0 +1,8 @@
+var $6e4b63af77288b7a$exports = {};
+$6e4b63af77288b7a$exports = {
+    "pending": `\u{5F85}\u{5904}\u{7406}`
+};
+
+
+export {$6e4b63af77288b7a$exports as default};
+//# sourceMappingURL=zh-CN.module.js.map

package/dist/zh-CN.module.js.map

@@ -0,0 +1 @@
+{"mappings":";AAAA,4BAAiB;IAAG,WAAW,CAAC,wBAAG,CAAC;AACpC","sources":["packages/@react-spectrum/button/intl/zh-CN.json"],"sourcesContent":["{\n  \"pending\": \"待处理\"\n}\n"],"names":[],"version":3,"file":"zh-CN.module.js.map"}

package/dist/zh-TW.main.js

@@ -0,0 +1,6 @@
+module.exports = {
+    "pending": `\u{5F85}\u{8655}\u{7406}`
+};
+
+
+//# sourceMappingURL=zh-TW.main.js.map

package/dist/zh-TW.main.js.map

@@ -0,0 +1 @@
+{"mappings":"AAAA,iBAAiB;IAAG,WAAW,CAAC,wBAAG,CAAC;AACpC","sources":["packages/@react-spectrum/button/intl/zh-TW.json"],"sourcesContent":["{\n  \"pending\": \"待處理\"\n}\n"],"names":[],"version":3,"file":"zh-TW.main.js.map"}

package/dist/zh-TW.mjs

@@ -0,0 +1,8 @@
+var $be993a68bccef72a$exports = {};
+$be993a68bccef72a$exports = {
+    "pending": `\u{5F85}\u{8655}\u{7406}`
+};
+
+
+export {$be993a68bccef72a$exports as default};
+//# sourceMappingURL=zh-TW.module.js.map

package/dist/zh-TW.module.js

@@ -0,0 +1,8 @@
+var $be993a68bccef72a$exports = {};
+$be993a68bccef72a$exports = {
+    "pending": `\u{5F85}\u{8655}\u{7406}`
+};
+
+
+export {$be993a68bccef72a$exports as default};
+//# sourceMappingURL=zh-TW.module.js.map

package/dist/zh-TW.module.js.map

@@ -0,0 +1 @@
+{"mappings":";AAAA,4BAAiB;IAAG,WAAW,CAAC,wBAAG,CAAC;AACpC","sources":["packages/@react-spectrum/button/intl/zh-TW.json"],"sourcesContent":["{\n  \"pending\": \"待處理\"\n}\n"],"names":[],"version":3,"file":"zh-TW.module.js.map"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-spectrum/button",
-  "version": "3.0.0-nightly.2613+a2146aa2e",
+  "version": "3.0.0-nightly.2668+86b38c878",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "main": "dist/main.js",
@@ -36,23 +36,23 @@
     "url": "https://github.com/adobe/react-spectrum"
   },
   "dependencies": {
-    "@react-aria/button": "3.0.0-nightly.2613+a2146aa2e",
-    "@react-aria/focus": "3.0.0-nightly.2613+a2146aa2e",
-    "@react-aria/i18n": "3.0.0-nightly.2613+a2146aa2e",
-    "@react-aria/interactions": "3.0.0-nightly.2613+a2146aa2e",
-    "@react-aria/utils": "3.0.0-nightly.2613+a2146aa2e",
-    "@react-spectrum/progress": "3.0.0-nightly.2613+a2146aa2e",
-    "@react-spectrum/text": "3.5.1-nightly.4324+a2146aa2e",
-    "@react-spectrum/utils": "3.0.0-nightly.2613+a2146aa2e",
-    "@react-stately/toggle": "3.0.0-nightly.2613+a2146aa2e",
-    "@react-types/button": "3.9.2-nightly.4324+a2146aa2e",
-    "@react-types/shared": "3.0.0-nightly.2613+a2146aa2e",
-    "@spectrum-icons/ui": "3.0.0-nightly.2613+a2146aa2e",
+    "@react-aria/button": "3.0.0-nightly.2668+86b38c878",
+    "@react-aria/focus": "3.0.0-nightly.2668+86b38c878",
+    "@react-aria/i18n": "3.0.0-nightly.2668+86b38c878",
+    "@react-aria/interactions": "3.0.0-nightly.2668+86b38c878",
+    "@react-aria/utils": "3.0.0-nightly.2668+86b38c878",
+    "@react-spectrum/progress": "3.0.0-nightly.2668+86b38c878",
+    "@react-spectrum/text": "3.5.2-nightly.4380+86b38c878",
+    "@react-spectrum/utils": "3.0.0-nightly.2668+86b38c878",
+    "@react-stately/toggle": "3.0.0-nightly.2668+86b38c878",
+    "@react-types/button": "3.9.2-nightly.4380+86b38c878",
+    "@react-types/shared": "3.0.0-nightly.2668+86b38c878",
+    "@spectrum-icons/ui": "3.0.0-nightly.2668+86b38c878",
     "@swc/helpers": "^0.5.0"
   },
   "devDependencies": {
-    "@adobe/spectrum-css-temp": "3.0.0-nightly.2613+a2146aa2e",
-    "@react-spectrum/test-utils": "3.0.0-nightly.2613+a2146aa2e"
+    "@adobe/spectrum-css-temp": "3.0.0-nightly.2668+86b38c878",
+    "@react-spectrum/test-utils": "3.0.0-nightly.2668+86b38c878"
   },
   "peerDependencies": {
     "@react-spectrum/provider": "^3.0.0",
@@ -61,5 +61,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "a2146aa2eb9cc28f4d90c8f520e6be5ff90471c4"
+  "gitHead": "86b38c87868ce7f262e0df905e5ac4eb2653791d"
 }

package/src/Button.tsx

@@ -22,7 +22,7 @@ import {FocusableRef} from '@react-types/shared';
 import {FocusRing} from '@react-aria/focus';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
-import {mergeProps, useId} from '@react-aria/utils';
+import {isAppleDevice, isFirefox, mergeProps, useId} from '@react-aria/utils';
 import {ProgressCircle} from '@react-spectrum/progress';
 import React, {ElementType, ReactElement, useEffect, useState} from 'react';
 import {SpectrumButtonProps} from '@react-types/button';
@@ -69,7 +69,7 @@ function Button<T extends ElementType = 'button'>(props: SpectrumButtonProps<T>,
   let {hoverProps, isHovered} = useHover({isDisabled});
   let [isFocused, onFocusChange] = useState(false);
   let {focusProps} = useFocus({onFocusChange, isDisabled});
-  let stringFormatter = useLocalizedStringFormatter(intlMessages);
+  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/button');
   let {styleProps} = useStyleProps(otherProps);
   let hasLabel = useHasChild(`.${styles['spectrum-Button-label']}`, domRef);
   let hasIcon = useHasChild(`.${styles['spectrum-Icon']}`, domRef);
@@ -78,10 +78,9 @@ function Button<T extends ElementType = 'button'>(props: SpectrumButtonProps<T>,
   let [isProgressVisible, setIsProgressVisible] = useState(false);
   let backupButtonId = useId();
   let buttonId = buttonProps.id || backupButtonId;
-  let spinnerId = useId();
-  let textId = useId();
   let iconId = useId();
-  let auxLabelId = useId();
+  let textId = useId();
+  let spinnerId = useId();
 
   useEffect(() => {
     let timeout: ReturnType<typeof setTimeout>;
@@ -108,6 +107,13 @@ function Button<T extends ElementType = 'button'>(props: SpectrumButtonProps<T>,
     staticColor = 'white';
   }
 
+  const isPendingAriaLiveLabel = `${hasAriaLabel ? buttonProps['aria-label'] : ''} ${stringFormatter.format('pending')}`.trim();
+  const isPendingAriaLiveLabelledby = hasAriaLabel ? (buttonProps['aria-labelledby']?.replace(buttonId, spinnerId) ?? spinnerId) : `${hasIcon ? iconId : ''} ${hasLabel ? textId : ''} ${spinnerId}`.trim();
+
+  let ariaLive: 'off' | 'polite' | 'assertive' = 'polite';
+  if (isAppleDevice() && (!hasAriaLabel || isFirefox())) {
+    ariaLive = 'off';
+  }
   return (
     <FocusRing focusRingClass={classNames(styles, 'focus-ring')} autoFocus={autoFocus}>
       <Element
@@ -119,9 +125,8 @@ function Button<T extends ElementType = 'button'>(props: SpectrumButtonProps<T>,
         data-style={style}
         data-static-color={staticColor || 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}
+        aria-label={isPending ? isPendingAriaLiveLabel : buttonProps['aria-label']}
+        aria-labelledby={isPending ? isPendingAriaLiveLabelledby : buttonProps['aria-labelledby']}
         className={
           classNames(
             styles,
@@ -151,25 +156,31 @@ function Button<T extends ElementType = 'button'>(props: SpectrumButtonProps<T>,
           {typeof children === 'string'
             ? <Text>{children}</Text>
             : children}
-          {isPending && <ProgressCircle
-            aria-hidden="true"
-            isIndeterminate
-            size="S"
-            UNSAFE_className={classNames(styles, 'spectrum-Button-circleLoader')}
-            UNSAFE_style={{visibility: isProgressVisible ? 'visible' : 'hidden'}}
-            staticColor={staticColor} />
-          }
-          {/* Adding the element here with the same labels as the button itself causes aria-live to pick up the change in Safari.
-           Safari with VO unfortunately doesn't announce changes to *all* of its labels specifically for button
-           https://a11ysupport.io/tests/tech__html__button-name-change#assertion-aria-aria-label_attribute-convey_name_change-html-button_element-vo_macos-safari
-           The aria-live does cause extra announcements in other browsers. */}
-          {isPending && hasAriaLabel &&
-            <div aria-hidden="true" id={auxLabelId} aria-label={buttonProps['aria-label']} aria-labelledby={buttonProps['aria-labelledby']?.replace(buttonId, auxLabelId)} />
-          }
-          {isPending && <div
-            id={spinnerId}
-            aria-label={stringFormatter.format('pending')}
-            aria-labelledby={`${hasAriaLabel ? '' : iconId} ${hasAriaLabel ? auxLabelId : textId} ${spinnerId}`} />
+          {isPending && (
+            <div
+              aria-hidden="true"
+              style={{visibility: isProgressVisible ? 'visible' : 'hidden'}}
+              className={classNames(styles, 'spectrum-Button-circleLoader')}>
+              <ProgressCircle
+                aria-label={isPendingAriaLiveLabel}
+                isIndeterminate
+                size="S"
+                staticColor={staticColor} />
+            </div>
+          )}
+          {isPending &&
+            <>
+              <div aria-live={isFocused ? ariaLive : 'off'}>
+                {isProgressVisible &&
+                  <div role="img" aria-labelledby={isPendingAriaLiveLabelledby} />
+                }
+              </div>
+              {/* Adding the element here with the same labels as the button itself causes aria-live to pick up the change in Safari.
+              Safari with VO unfortunately doesn't announce changes to *all* of its labels specifically for button
+              https://a11ysupport.io/tests/tech__html__button-name-change#assertion-aria-aria-label_attribute-convey_name_change-html-button_element-vo_macos-safari
+              The aria-live may cause extra announcements in other browsers. */}
+              <div id={spinnerId} role="img" aria-label={isPendingAriaLiveLabel} />
+            </>
           }
         </SlotProvider>
       </Element>