New React Aria Landing Page (#5596)

Author: devongovett

README.md

@@ -10,7 +10,7 @@ A React implementation of Spectrum, Adobe’s design system. Spectrum provides a
 
 ### React Aria
 
-A library of React Hooks that provides accessible UI primitives for your design system.
+A library of unstyled React components and hooks that helps you build accessible, high quality UI components for your application or design system.
 
 [Learn more about React Aria](https://react-spectrum.adobe.com/react-aria/index.html)
 
@@ -38,7 +38,7 @@ A collection of framework-agnostic internationalization libraries for the web.
 React Spectrum includes several libraries, which you can choose depending on your usecase.
 
 * [React Spectrum](https://react-spectrum.adobe.com/react-spectrum/getting-started.html) is an implementation of Adobe's design system. If you’re integrating with Adobe software or would like a complete component library to use in your project, look no further!
-* [React Aria](https://react-spectrum.adobe.com/react-aria/getting-started.html) is a collection of React Hooks that provides accessible UI primitives for use in your own design system. If you're building a component library for the web from scratch with your own styling, start here.
+* [React Aria](https://react-spectrum.adobe.com/react-aria/getting-started.html) is a collection of unstyled React components and hooks that helps you build accessible, high quality UI components for your own application or design system. If you're building a component library for the web from scratch with your own styling, start here.
 * [React Stately](https://react-spectrum.adobe.com/react-stately/getting-started.html) is a library of state management hooks for use in your component library. If you're using React Aria, you'll likely also use React Stately, but it can also be used independently (e.g. on other platforms like React Native).
 
 [Read more about our architecture](https://react-spectrum.adobe.com/architecture.html).

package.json

@@ -143,6 +143,7 @@
     "jest-matchmedia-mock": "^1.1.0",
     "lerna": "^3.13.2",
     "lfcdn": "^0.4.2",
+    "lucide-react": "^0.294.0",
     "md5": "^2.2.1",
     "npm-cli-login": "^1.0.0",
     "nyc": "^10.2.0",
@@ -166,6 +167,7 @@
     "sharp": "^0.31.2",
     "sinon": "^7.3.1",
     "storybook-dark-mode": "^1.1.1-canary.120.3843.0",
+    "tailwind-variants": "^0.1.18",
     "tailwindcss": "^3.2.2",
     "tailwindcss-animate": "^1.0.7",
     "tempy": "^0.5.0",
@@ -189,7 +191,10 @@
   "@parcel/transformer-css": {
     "cssModules": {
       "global": true,
-      "exclude": ["**/*.global.css", "packages/@react-aria/example-theme/**"]
+      "exclude": [
+        "**/*.global.css",
+        "packages/@react-aria/example-theme/**"
+      ]
     },
     "drafts": {
       "nesting": true

packages/@internationalized/number/src/NumberFormatter.ts

@@ -145,8 +145,11 @@ export class NumberFormatter implements Intl.NumberFormat {
 
 function getCachedNumberFormatter(locale: string, options: NumberFormatOptions = {}): Intl.NumberFormat {
   let {numberingSystem} = options;
-  if (numberingSystem && locale.indexOf('-u-nu-') === -1) {
-    locale = `${locale}-u-nu-${numberingSystem}`;
+  if (numberingSystem && locale.includes('-nu-')) {
+    if (!locale.includes('-u-')) {
+      locale += '-u-';
+    }
+    locale += `-nu-${numberingSystem}`;
   }
 
   if (options.style === 'unit' && !supportsUnit) {

packages/@react-aria/dnd/src/useAutoScroll.ts

@@ -17,9 +17,14 @@ const AUTOSCROLL_AREA_SIZE = 20;
 
 export function useAutoScroll(ref: RefObject<Element>) {
   let scrollableRef = useRef<Element>(null);
+  let scrollableX = useRef(true);
+  let scrollableY = useRef(true);
   useEffect(() => {
     if (ref.current) {
       scrollableRef.current = isScrollable(ref.current) ? ref.current : getScrollParent(ref.current);
+      let style = window.getComputedStyle(scrollableRef.current);
+      scrollableX.current = /(auto|scroll)/.test(style.overflowX);
+      scrollableY.current = /(auto|scroll)/.test(style.overflowY);
     }
   }, [ref]);
 
@@ -40,8 +45,12 @@ export function useAutoScroll(ref: RefObject<Element>) {
   }, [state]);
 
   let scroll = useCallback(() => {
-    scrollableRef.current.scrollLeft += state.dx;
-    scrollableRef.current.scrollTop += state.dy;
+    if (scrollableX.current) {
+      scrollableRef.current.scrollLeft += state.dx;
+    }
+    if (scrollableY.current) {
+      scrollableRef.current.scrollTop += state.dy;
+    }
 
     if (state.timer) {
       state.timer = requestAnimationFrame(scroll);

packages/@react-aria/dnd/test/useDroppableCollection.test.js

@@ -216,7 +216,7 @@ describe('useDroppableCollection', () => {
       }
       let tree = render(<>
         <Draggable />
-        <DroppableGridExample style={{overflow: 'scroll'}} items={items} onDropEnter={onDropEnter} onDropExit={onDragExit} onDrop={onDrop} />
+        <DroppableGridExample style={{overflowY: 'scroll'}} items={items} onDropEnter={onDropEnter} onDropExit={onDragExit} onDrop={onDrop} />
       </>);
 
       let draggable = tree.getByText('Drag me');

packages/dev/docs/package.json

@@ -34,5 +34,8 @@
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-lowlight": "^2.0.0"
+  },
+  "alias": {
+    "tailwind-starter": "../../../starters/tailwind/src"
   }
 }

packages/dev/docs/pages/assets/ReactAriaOpenGraph.webp

@@ -58,7 +58,7 @@ A collection of libraries and tools that help you build adaptive, accessible, an
   },
   {
     title: 'React Aria',
-    description: 'A library of React Hooks that provides accessible UI primitives for your design system.',
+    description: 'A library of unstyled React components and hooks that helps you build accessible, high quality UI components for your application or design system.',
     url: './react-aria/index.html',
     urlText: <>Learn more<VisuallyHidden elementType="span"> about React Aria</VisuallyHidden></>
   },

packages/dev/docs/pages/assets/iphone-frame.webp

@@ -0,0 +1,5 @@
+{
+  "plugins": {
+    "tailwindcss": {}
+  }
+}