Add translations to RSP Dropzone (#4989)

* Add translations to RSP Dropzone

* update name for clarity

Author: yihuiliao

packages/@react-spectrum/dropzone/intl/en-US.json

@@ -0,0 +1,3 @@
+{
+  "replaceMessage": "Drop file to replace"
+}

packages/@react-spectrum/dropzone/package.json

@@ -37,11 +37,12 @@
     "url": "https://github.com/adobe/react-spectrum"
   },
   "dependencies": {
+    "@react-aria/i18n": "^3.8.1",
     "@react-aria/utils": "^3.19.0",
     "@react-spectrum/utils": "^3.10.1",
     "@react-types/shared": "^3.19.0",
-    "react-aria-components": "^1.0.0-alpha.6",
-    "@swc/helpers": "^0.5.0"
+    "@swc/helpers": "^0.5.0",
+    "react-aria-components": "^1.0.0-alpha.6"
   },
   "devDependencies": {
     "@adobe/spectrum-css-temp": "3.0.0-alpha.1",

packages/@react-spectrum/dropzone/src/DropZone.tsx

@@ -13,9 +13,12 @@
 import {AriaLabelingProps, DOMProps, DOMRef, StyleProps} from '@react-types/shared';
 import {classNames, SlotProvider, useDOMRef, useStyleProps} from '@react-spectrum/utils';
 import {DropZoneProps, DropZone as RACDropZone} from 'react-aria-components';
+// @ts-ignore
+import intlMessages from '../intl/*.json';
 import {mergeProps, useId} from '@react-aria/utils';
 import React, {ReactNode} from 'react';
 import styles from '@adobe/spectrum-css-temp/components/dropzone/vars.css';
+import {useLocalizedStringFormatter} from '@react-aria/i18n';
 
 export interface SpectrumDropZoneProps extends DropZoneProps, DOMProps, StyleProps, AriaLabelingProps {
   /** The content to display in the drop zone. */
@@ -31,6 +34,7 @@ function DropZone(props: SpectrumDropZoneProps, ref: DOMRef<HTMLDivElement>) {
   let {styleProps} = useStyleProps(props);
   let domRef = useDOMRef(ref);
   let messageId = useId();
+  let stringFormatter = useLocalizedStringFormatter(intlMessages);
 
   return (
     <RACDropZone
@@ -64,7 +68,7 @@ function DropZone(props: SpectrumDropZoneProps, ref: DOMRef<HTMLDivElement>) {
             styleProps.className
           )
         }>
-        {replaceMessage ? replaceMessage : 'Drop file to replace'}
+        {replaceMessage ? replaceMessage : stringFormatter.format('replaceMessage')}
       </div>
     </RACDropZone>
   );