@react-spectrum/dropzone 3.0.0-rc.3 → 3.0.0

package/dist/{main.css → vars.c0db847d.css}

@@ -23,11 +23,7 @@
   font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Microsoft JhengHei UI, Microsoft JhengHei, Heiti TC Light, sans-serif;
 }
 
-.b5Gu6W_i18nFontFamily:lang(zh-SG) {
-  font-family: adobe-clean-han-simplified-c, source-han-simplified-c, SimSun, Heiti SC Light, sans-serif;
-}
-
-.b5Gu6W_i18nFontFamily:lang(zh-CN) {
+.b5Gu6W_i18nFontFamily:lang(zh-SG), .b5Gu6W_i18nFontFamily:lang(zh-CN) {
   font-family: adobe-clean-han-simplified-c, source-han-simplified-c, SimSun, Heiti SC Light, sans-serif;
 }
 
@@ -55,13 +51,7 @@
   transition: box-shadow var(--spectrum-global-animation-duration-100, .13s) ease-out, margin var(--spectrum-global-animation-duration-100, .13s) ease-out;
   display: block;
   position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-}
-
-.b5Gu6W_spectrum-FocusRing {
+  inset: 0;
 }
 
 .b5Gu6W_spectrum-FocusRing.b5Gu6W_focus-ring:after {
@@ -78,6 +68,16 @@
   box-shadow: 0 var(--spectrum-focus-ring-size) 0 var(--spectrum-focus-ring-color);
 }
 
+@media (forced-colors: active) {
+  .b5Gu6W_spectrum-FocusRing, .b5Gu6W_spectrum-FocusRing-ring, .b5Gu6W_spectrum-FocusRing--quiet {
+    --spectrum-high-contrast-focus-ring-color: Highlight;
+  }
+
+  :is(.b5Gu6W_spectrum-FocusRing, .b5Gu6W_spectrum-FocusRing-ring, .b5Gu6W_spectrum-FocusRing--quiet):after {
+    forced-color-adjust: none;
+  }
+}
+
 .b5Gu6W_spectrum-Dropzone {
   text-align: center;
   border-width: var(--spectrum-dropzone-border-width, var(--spectrum-alias-border-size-thick));
@@ -91,10 +91,7 @@
   content: "";
   display: none;
   position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
+  inset: 0;
 }
 
 .b5Gu6W_spectrum-Dropzone:focus {
@@ -106,11 +103,7 @@
   border-style: solid;
 }
 
-.b5Gu6W_spectrum-Dropzone[data-drop-target].b5Gu6W_spectrum-Dropzone--filled .b5Gu6W_spectrum-Dropzone-banner {
-  display: block;
-}
-
-.b5Gu6W_spectrum-Dropzone[data-drop-target] .b5Gu6W_spectrum-Dropzone-backdrop {
+.b5Gu6W_spectrum-Dropzone[data-drop-target].b5Gu6W_spectrum-Dropzone--filled .b5Gu6W_spectrum-Dropzone-banner, .b5Gu6W_spectrum-Dropzone[data-drop-target] .b5Gu6W_spectrum-Dropzone-backdrop {
   display: block;
 }
 
@@ -139,9 +132,6 @@
 
 .b5Gu6W_spectrum-Dropzone {
   --spectrum-dropzone-illustratedmessage-illustration-color-key-focus: var(--spectrum-global-color-blue-500);
-}
-
-.b5Gu6W_spectrum-Dropzone {
   border-color: var(--spectrum-dropzone-border-color, var(--spectrum-global-color-gray-300));
 }
 
@@ -176,5 +166,4 @@
     --spectrum-dropzone-illustratedmessage-illustration-color-key-focus: Highlight;
   }
 }
-
-/*# sourceMappingURL=main.css.map */
+/*# sourceMappingURL=vars.c0db847d.css.map */

package/dist/vars.c0db847d.css.map

@@ -0,0 +1 @@
+{"mappings":"AA4DA;;;;;AAIE;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAQA;;;;AAIA;;;;AAKF;;;;;;;;AAOE;;;;;;;;;;;AAqBE;;;;;AAQF;;;;AAKE;;;;;AAOJ;EACE;;;;EAIE;;;;;AAMJ;;;;;;;;;AAQE;;;;;;;AAUA;;;;;AAGE;;;;AAMA;;;;AAYJ;;;;;;;;;;;;;AAaA;EAGM;;;;EAKA;;;;;AAmBN;;;;;AAOE;;;;AAIA;;;;;;AAMI;;;;AAKF;;;;AAMA;;;;AAMJ;EACE","sources":["packages/@adobe/spectrum-css-temp/components/dropzone/vars.css"],"sourcesContent":["/*\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\n@import './index.css';\n@import './skin.css';\n"],"names":[],"version":3,"file":"vars.c0db847d.css.map"}

package/dist/zh-CN.mjs

@@ -5,4 +5,4 @@ $1ba57165d5de0b25$exports = {
 
 
 export {$1ba57165d5de0b25$exports as default};
-//# sourceMappingURL=zh-CN.module.js.map
+//# sourceMappingURL=zh-CN.mjs.map

package/dist/zh-TW.mjs

@@ -5,4 +5,4 @@ $586e20fd0bf5d7aa$exports = {
 
 
 export {$586e20fd0bf5d7aa$exports as default};
-//# sourceMappingURL=zh-TW.module.js.map
+//# sourceMappingURL=zh-TW.mjs.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-spectrum/dropzone",
-  "version": "3.0.0-rc.3",
+  "version": "3.0.0",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "main": "dist/main.js",
@@ -36,16 +36,16 @@
     "url": "https://github.com/adobe/react-spectrum"
   },
   "dependencies": {
-    "@react-aria/i18n": "^3.10.2",
-    "@react-aria/utils": "^3.23.2",
-    "@react-spectrum/utils": "^3.11.5",
-    "@react-types/shared": "^3.22.1",
+    "@react-aria/i18n": "^3.11.0",
+    "@react-aria/utils": "^3.24.0",
+    "@react-spectrum/utils": "^3.11.6",
+    "@react-types/shared": "^3.23.0",
     "@swc/helpers": "^0.5.0",
-    "react-aria-components": "^1.1.1"
+    "react-aria-components": "^1.2.0"
   },
   "devDependencies": {
     "@adobe/spectrum-css-temp": "3.0.0-alpha.1",
-    "@react-spectrum/test-utils": "3.0.0-alpha.1"
+    "@react-spectrum/test-utils-internal": "3.0.0-alpha.1"
   },
   "peerDependencies": {
     "@react-spectrum/provider": "^3.0.0",
@@ -54,5 +54,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "de9f84a22583fc741c29b341d14cd35ef4cca161"
+  "gitHead": "f645f29edc1322153fd60af4640cbcab1d992dbd"
 }

package/src/DropZone.tsx

@@ -12,7 +12,7 @@
 
 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';
+import {DropZoneProps, HeadingContext, Provider, DropZone as RACDropZone} from 'react-aria-components';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
 import {mergeProps, useId} from '@react-aria/utils';
@@ -20,7 +20,7 @@ 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 Omit<DropZoneProps, 'onHoverStart' | 'onHoverChange' | 'onHoverEnd'>, DOMProps, StyleProps, AriaLabelingProps {
+export interface SpectrumDropZoneProps extends Omit<DropZoneProps, 'onHoverStart' | 'onHoverChange' | 'onHoverEnd' | 'isDisabled' | 'className' | 'style'>, DOMProps, StyleProps, AriaLabelingProps {
   /** The content to display in the drop zone. */
   children: ReactNode,
   /** Whether the drop zone has been filled. */
@@ -41,43 +41,50 @@ function DropZone(props: SpectrumDropZoneProps, ref: DOMRef<HTMLDivElement>) {
   let {styleProps} = useStyleProps(props);
   let domRef = useDOMRef(ref);
   let messageId = useId();
+  let headingId = useId();
   let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/dropzone');
+  let ariaLabelledby = isFilled ? `${headingId} ${messageId}` : headingId;
 
   return (
-    <RACDropZone
-      {...mergeProps(filterProps(otherProps))}
-      {...styleProps as Omit<React.HTMLAttributes<HTMLElement>, 'onDrop'>}
-      aria-labelledby={isFilled && messageId}
-      className={
-      classNames(
-        styles,
-        'spectrum-Dropzone',
-        styleProps.className,
-        {'spectrum-Dropzone--filled': isFilled}
-      )}
-      ref={domRef}>
-      <SlotProvider
-        slots={{
-          illustration: {UNSAFE_className: classNames(
-            styles,
-            'spectrum-Dropzone-illustratedMessage'
-            )}
-        }}>
-        {children}
-      </SlotProvider>
-      <div className={classNames(styles, 'spectrum-Dropzone-backdrop')} />
-      <div
-        id={messageId}
+    <Provider
+      values={[
+        [HeadingContext, {id: headingId}]
+      ]}>
+      <RACDropZone
+        {...mergeProps(filterProps(otherProps))}
+        {...styleProps as Omit<React.HTMLAttributes<HTMLElement>, 'onDrop'>}
+        aria-labelledby={ariaLabelledby}
         className={
-          classNames(
-            styles,
-            'spectrum-Dropzone-banner',
-            styleProps.className
-          )
-        }>
-        {replaceMessage ? replaceMessage : stringFormatter.format('replaceMessage')}
-      </div>
-    </RACDropZone>
+        classNames(
+          styles,
+          'spectrum-Dropzone',
+          styleProps.className,
+          {'spectrum-Dropzone--filled': isFilled}
+        )}
+        ref={domRef}>
+        <SlotProvider
+          slots={{
+            illustration: {UNSAFE_className: classNames(
+              styles,
+              'spectrum-Dropzone-illustratedMessage'
+              )}
+          }}>
+          {children}
+        </SlotProvider>
+        <div className={classNames(styles, 'spectrum-Dropzone-backdrop')} />
+        <div
+          id={messageId}
+          className={
+            classNames(
+              styles,
+              'spectrum-Dropzone-banner',
+              styleProps.className
+            )
+          }>
+          {replaceMessage ? replaceMessage : stringFormatter.format('replaceMessage')}
+        </div>
+      </RACDropZone>
+    </Provider>
   );
 }
 

package/dist/main.css.map

@@ -1 +0,0 @@
-{"mappings":"AA4DA;;;;;AAIE;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAKF;;;;;;;;AAOE;;;;;;;;;;;;;;AAiBF;;;AAII;;;;;AAQF;;;;AAKE;;;;;AAOJ;;;;;;;;;AAQE;;;;;;;;;;AAUA;;;;;AAGE;;;;AAMA;;;;AAMA;;;;AAMJ;;;;;;;;;;;;;AAaA;EAGM;;;;EAKA;;;;;AAmBN;;;;AAIA;;;;AAGE;;;;AAIA;;;;;;AAMI;;;;AAKF;;;;AAMA;;;;AAMJ;EACE","sources":["packages/@adobe/spectrum-css-temp/components/dropzone/vars.css"],"sourcesContent":["/*\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\n@import './index.css';\n@import './skin.css';\n"],"names":[],"version":3,"file":"main.css.map"}