Merge branch 'main' into testing-session-fixes

snowystinger · snowystinger · commit b46392f8dd5d · 2025-02-05T09:23:57.000+11:00
diff --git a/bin/pure-render.js b/bin/pure-render.js
@@ -52,7 +52,8 @@ module.exports = {
             node.type === 'IfStatement' &&
             node.test.type === 'BinaryExpression' &&
             (node.test.operator === '==' || node.test.operator === '===') &&
-            isMemberExpressionEqual(node.test.left, member)
+            (isMemberExpressionEqual(node.test.left, member) ||
+            isMemberExpressionEqual(node.test.right, member))
           ) {
             conditional = node.test;
           }
@@ -98,7 +99,7 @@ module.exports = {
               type: 'Identifier',
               name: 'undefined'
             };
-            if (isLiteralEqual(conditional.operator, init, conditional.right)) {
+            if (isLiteralEqual(conditional.operator, init, conditional.right) || isLiteralEqual(conditional.operator, init, conditional.left)) {
               return;
             }
           }
diff --git a/package.json b/package.json
@@ -140,7 +140,7 @@
     "babel-plugin-transform-glob-import": "^1.0.1",
     "babelify": "^10.0.0",
     "chalk": "^4.1.2",
-    "chromatic": "^11.3.0",
+    "chromatic": "^11.25.2",
     "clsx": "^2.0.0",
     "color-space": "^1.16.0",
     "concurrently": "^6.0.2",
diff --git a/packages/@react-aria/utils/src/mergeProps.ts b/packages/@react-aria/utils/src/mergeProps.ts
@@ -34,10 +34,10 @@ type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (
  * @param args - Multiple sets of props to merge together.
  */
 export function mergeProps<T extends PropsArg[]>(...args: T): UnionToIntersection<TupleTypes<T>> {
-  // Start with a base clone of the first argument. This is a lot faster than starting
+  // Start with a base clone of the last argument. This is a lot faster than starting
   // with an empty object and adding properties as we go.
-  let result: Props = {...args[0]};
-  for (let i = 1; i < args.length; i++) {
+  let result: Props = {...args[args.length - 1]};
+  for (let i = args.length - 2; i >= 0; i--) {
     let props = args[i];
     for (let key in props) {
       let a = result[key];
@@ -53,20 +53,20 @@ export function mergeProps<T extends PropsArg[]>(...args: T): UnionToIntersectio
         key.charCodeAt(2) >= /* 'A' */ 65 &&
         key.charCodeAt(2) <= /* 'Z' */ 90
       ) {
-        result[key] = chain(a, b);
+        result[key] = chain(b, a);
 
         // Merge classnames, sometimes classNames are empty string which eval to false, so we just need to do a type check
       } else if (
         (key === 'className' || key === 'UNSAFE_className') &&
         typeof a === 'string' &&
         typeof b === 'string'
       ) {
-        result[key] = clsx(a, b);
+        result[key] = clsx(b, a);
       } else if (key === 'id' && a && b) {
-        result.id = mergeIds(a, b);
+        result.id = mergeIds(b, a);
         // Override others
-      } else {
-        result[key] = b !== undefined ? b : a;
+      } else if (a === undefined) {
+        result[key] = b;
       }
     }
   }
diff --git a/packages/@react-aria/utils/src/useId.ts b/packages/@react-aria/utils/src/useId.ts
@@ -54,14 +54,15 @@ export function useId(defaultId?: string): string {
     };
   }, [res]);
 
-  // This cannot cause an infinite loop because the ref is updated first.
+  // This cannot cause an infinite loop because the ref is always cleaned up.
   // eslint-disable-next-line
   useEffect(() => {
     let newId = nextId.current;
-    if (newId) {
-      nextId.current = null;
-      setValue(newId);
-    }
+    if (newId) { setValue(newId); }
+
+    return () => {
+      if (newId) { nextId.current = null; }
+    };
   });
 
   return res;
diff --git a/packages/@react-aria/utils/test/mergeProps.test.jsx b/packages/@react-aria/utils/test/mergeProps.test.jsx
@@ -11,16 +11,16 @@
  */
 
 import clsx from 'clsx';
-import {mergeIds} from '../src/useId';
-import {mergeProps} from '../';
-
+import { mergeIds, useId } from '../src/useId';
+import { mergeProps } from '../src/mergeProps';
+import { render } from '@react-spectrum/test-utils-internal';
 
 describe('mergeProps', function () {
   it('handles one argument', function () {
-    let onClick = () => {};
+    let onClick = () => { };
     let className = 'primary';
     let id = 'test_id';
-    let mergedProps = mergeProps({onClick, className, id});
+    let mergedProps = mergeProps({ onClick, className, id });
     expect(mergedProps.onClick).toBe(onClick);
     expect(mergedProps.className).toBe(className);
     expect(mergedProps.id).toBe(id);
@@ -32,9 +32,9 @@ describe('mergeProps', function () {
     let message2 = 'click2';
     let message3 = 'click3';
     let mergedProps = mergeProps(
-      {onClick: () => mockFn(message1)},
-      {onClick: () => mockFn(message2)},
-      {onClick: () => mockFn(message3)}
+      { onClick: () => mockFn(message1) },
+      { onClick: () => mockFn(message2) },
+      { onClick: () => mockFn(message3) }
     );
     mergedProps.onClick();
     expect(mockFn).toHaveBeenNthCalledWith(1, message1);
@@ -51,14 +51,15 @@ describe('mergeProps', function () {
     let focus = 'focus';
     let margin = 2;
     const mergedProps = mergeProps(
-      {onClick: () => mockFn(click1)},
-      {onHover: () => mockFn(hover), styles: {margin}},
-      {onClick: () => mockFn(click2), onFocus: () => mockFn(focus)}
+      { onClick: () => mockFn(click1) },
+      { onHover: () => mockFn(hover), styles: { margin } },
+      { onClick: () => mockFn(click2), onFocus: () => mockFn(focus) }
     );
-
     mergedProps.onClick();
+    let callOrder = mockFn.mock.invocationCallOrder;
     expect(mockFn).toHaveBeenNthCalledWith(1, click1);
     expect(mockFn).toHaveBeenNthCalledWith(2, click2);
+    expect(callOrder[0]).toBeLessThan(callOrder[1]);
     mergedProps.onFocus();
     expect(mockFn).toHaveBeenNthCalledWith(3, focus);
     mergedProps.onHover();
@@ -71,7 +72,7 @@ describe('mergeProps', function () {
     let className1 = 'primary';
     let className2 = 'hover';
     let className3 = 'focus';
-    let mergedProps = mergeProps({className: className1}, {className: className2}, {className: className3});
+    let mergedProps = mergeProps({ className: className1 }, { className: className2 }, { className: className3 });
     let mergedClassNames = clsx(className1, className2, className3);
     expect(mergedProps.className).toBe(mergedClassNames);
   });
@@ -80,8 +81,45 @@ describe('mergeProps', function () {
     let id1 = 'id1';
     let id2 = 'id2';
     let id3 = 'id3';
-    let mergedProps = mergeProps({id: id1}, {id: id2}, {id: id3});
+    let mergedProps = mergeProps({ id: id1 }, { id: id2 }, { id: id3 });
     let mergedIds = mergeIds(mergeIds(id1, id2), id3);
     expect(mergedProps.id).toBe(mergedIds);
   });
+
+  it('combines ids with aria ids', function () {
+    let Spy = jest.fn((props) => <div {...props} />);
+
+    const Component = () => {
+      let id1 = 'id1';
+      let id2 = useId('id2');
+
+      mergeProps({ id: id1 }, { id: id2 });
+
+      return <Spy id={id2} />
+    };
+
+    render(<Component />);
+
+    // We use stringMatching to support optional refs in React 19.
+    expect(Spy).toHaveBeenCalledWith({ id: 'id2' }, expect.not.stringMatching(/\A(?!x)x/));
+    expect(Spy).toHaveBeenLastCalledWith({ id: 'id1' }, expect.not.stringMatching(/\A(?!x)x/));
+  });
+
+  it('combines reoccuring ids', function () {
+    const Component = () => {
+      let id1 = useId('id1');
+      let id2 = useId('id2');
+
+      return <div {...mergeProps({ id: id1 }, { id: id2 }, { id: id1 })} />;
+    };
+
+    expect(() => render(<Component />)).not.toThrow();
+  });
+
+  it('overrides other props', function () {
+    let id1 = 'id1';
+    let id2 = 'id2';
+    let mergedProps = mergeProps({ data: id1 }, { data: id2 });
+    expect(mergedProps.data).toBe(id2);
+  });
 });
diff --git a/packages/@react-spectrum/datepicker/src/styles.css b/packages/@react-spectrum/datepicker/src/styles.css
@@ -88,7 +88,7 @@
 }
 
 .react-spectrum-Datepicker-segments {
-  display: inline;
+  display: inline-block;
   align-items: center;
 }
 
diff --git a/packages/@react-spectrum/s2/src/Image.tsx b/packages/@react-spectrum/s2/src/Image.tsx
@@ -1,5 +1,5 @@
 import {ContextValue, SlotProps} from 'react-aria-components';
-import {createContext, ForwardedRef, forwardRef, HTMLAttributeReferrerPolicy, ReactNode, useCallback, useContext, useMemo, useReducer, useRef} from 'react';
+import {createContext, ForwardedRef, forwardRef, HTMLAttributeReferrerPolicy, ReactNode, useCallback, useContext, useMemo, useReducer, useRef, version} from 'react';
 import {DefaultImageGroup, ImageGroup} from './ImageCoordinator';
 import {loadingStyle, useIsSkeleton, useLoadingAnimation} from './Skeleton';
 import {mergeStyles} from '../style/runtime';
@@ -27,8 +27,11 @@ export interface ImageProps extends UnsafeStyles, SlotProps {
    * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#decoding).
    */
   decoding?: 'async' | 'auto' | 'sync',
-  // Only supported in React 19...
-  // fetchPriority?: 'high' | 'low' | 'auto',
+  /**
+   * Provides a hint of the relative priority to use when fetching the image.
+   * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#fetchpriority).
+   */
+  fetchPriority?: 'high' | 'low' | 'auto',
   /**
    * Whether the image should be loaded immediately or lazily when scrolled into view.
    * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#loading).
@@ -146,6 +149,7 @@ export const Image = forwardRef(function Image(props: ImageProps, domRef: Forwar
     alt,
     crossOrigin,
     decoding,
+    fetchPriority,
     loading,
     referrerPolicy,
     slot
@@ -223,6 +227,7 @@ export const Image = forwardRef(function Image(props: ImageProps, domRef: Forwar
       {errorState}
       {!errorState && (
         <img
+          {...getFetchPriorityProp(fetchPriority)}
           src={src}
           alt={alt}
           crossOrigin={crossOrigin}
@@ -235,5 +240,14 @@ export const Image = forwardRef(function Image(props: ImageProps, domRef: Forwar
           className={imgStyles({isRevealed, isTransitioning})} />
         )}
     </div>
-  ), [slot, hidden, domRef, UNSAFE_style, UNSAFE_className, styles, isAnimating, errorState, src, alt, crossOrigin, decoding, loading, referrerPolicy, onLoad, onError, isRevealed, isTransitioning]);
+  ), [slot, hidden, domRef, UNSAFE_style, UNSAFE_className, styles, isAnimating, errorState, src, alt, crossOrigin, decoding, fetchPriority, loading, referrerPolicy, onLoad, onError, isRevealed, isTransitioning]);
 });
+
+function getFetchPriorityProp(fetchPriority?: 'high' | 'low' | 'auto'): Record<string, string | undefined> {
+  const pieces = version.split('.');
+  const major = parseInt(pieces[0], 10);
+  if (major >= 19) {
+    return {fetchPriority};
+  }
+  return {fetchpriority: fetchPriority};
+}
diff --git a/yarn.lock b/yarn.lock
@@ -14370,9 +14370,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"chromatic@npm:^11.3.0":
-  version: 11.3.0
-  resolution: "chromatic@npm:11.3.0"
+"chromatic@npm:^11.25.2":
+  version: 11.25.2
+  resolution: "chromatic@npm:11.25.2"
   peerDependencies:
     "@chromatic-com/cypress": ^0.*.* || ^1.0.0
     "@chromatic-com/playwright": ^0.*.* || ^1.0.0
@@ -14385,7 +14385,7 @@ __metadata:
     chroma: dist/bin.js
     chromatic: dist/bin.js
     chromatic-cli: dist/bin.js
-  checksum: 10c0/e977ef43a43ebb0250ec8fc46f5751c8cb9b798f75fcf9ec52485c1127caf9d6cef0346a9dd1660a8967faf1a7cde579571a0ac130cfaf475d6f22e4929003b6
+  checksum: 10c0/2cb4bb40a062005292a4cd606321f6c9bdaa31e255e66bae12c780bca9b72e883c017ebe48c5a9228db88a010f5977571ef7dfdcdd4195ad0e7b955f9966d7df
   languageName: node
   linkType: hard
 
@@ -29355,7 +29355,7 @@ __metadata:
     babel-plugin-transform-glob-import: "npm:^1.0.1"
     babelify: "npm:^10.0.0"
     chalk: "npm:^4.1.2"
-    chromatic: "npm:^11.3.0"
+    chromatic: "npm:^11.25.2"
     clsx: "npm:^2.0.0"
     color-space: "npm:^1.16.0"
     concurrently: "npm:^6.0.2"

Original file line number	Diff line number	Diff line change
`@@ -52,7 +52,8 @@ module.exports = {`
`52`	`52`	`node.type === 'IfStatement' &&`
`53`	`53`	`node.test.type === 'BinaryExpression' &&`
`54`	`54`	`(node.test.operator === '==' \|\| node.test.operator === '===') &&`
`55`		`- isMemberExpressionEqual(node.test.left, member)`
	`55`	`+ (isMemberExpressionEqual(node.test.left, member) \|\|`
	`56`	`+ isMemberExpressionEqual(node.test.right, member))`
`56`	`57`	`) {`
`57`	`58`	`conditional = node.test;`
`58`	`59`	`}`
`@@ -98,7 +99,7 @@ module.exports = {`
`98`	`99`	`type: 'Identifier',`
`99`	`100`	`name: 'undefined'`
`100`	`101`	`};`
`101`		`- if (isLiteralEqual(conditional.operator, init, conditional.right)) {`
	`102`	`+ if (isLiteralEqual(conditional.operator, init, conditional.right) \|\| isLiteralEqual(conditional.operator, init, conditional.left)) {`
`102`	`103`	`return;`
`103`	`104`	`}`
`104`	`105`	`}`
Original file line number	Diff line number	Diff line change
`@@ -88,7 +88,7 @@`
`88`	`88`	`}`
`89`	`89`
`90`	`90`	`.react-spectrum-Datepicker-segments {`
`91`		`- display: inline;`
	`91`	`+ display: inline-block;`
`92`	`92`	`align-items: center;`
`93`	`93`	`}`
`94`	`94`