Merge branch 'main' into hidden-date-input-console

yihuiliao · yihuiliao · commit afd7beb8c59a · 2025-10-22T10:23:08.000-07:00
diff --git a/packages/@react-aria/utils/src/scrollIntoView.ts b/packages/@react-aria/utils/src/scrollIntoView.ts
@@ -11,7 +11,6 @@
  */
 
 import {getScrollParents} from './getScrollParents';
-import {isChrome} from './platform';
 
 interface ScrollIntoViewportOpts {
   /** The optional containing element of the target to be centered in the viewport. */
@@ -41,64 +40,32 @@ export function scrollIntoView(scrollView: HTMLElement, element: HTMLElement): v
     scrollPaddingLeft
   } = getComputedStyle(scrollView);
 
-  // Account for scroll margin of the element
-  let {
-    scrollMarginTop,
-    scrollMarginRight,
-    scrollMarginBottom,
-    scrollMarginLeft
-  } = getComputedStyle(element);
-
   let borderAdjustedX = x + parseInt(borderLeftWidth, 10);
   let borderAdjustedY = y + parseInt(borderTopWidth, 10);
   // Ignore end/bottom border via clientHeight/Width instead of offsetHeight/Width
   let maxX = borderAdjustedX + scrollView.clientWidth;
   let maxY = borderAdjustedY + scrollView.clientHeight;
 
-  // Get scroll padding / margin values as pixels - defaults to 0 if no scroll padding / margin
+  // Get scroll padding values as pixels - defaults to 0 if no scroll padding
   // is used.
   let scrollPaddingTopNumber = parseInt(scrollPaddingTop, 10) || 0;
   let scrollPaddingBottomNumber = parseInt(scrollPaddingBottom, 10) || 0;
   let scrollPaddingRightNumber = parseInt(scrollPaddingRight, 10) || 0;
   let scrollPaddingLeftNumber = parseInt(scrollPaddingLeft, 10) || 0;
-  let scrollMarginTopNumber = parseInt(scrollMarginTop, 10) || 0;
-  let scrollMarginBottomNumber = parseInt(scrollMarginBottom, 10) || 0;
-  let scrollMarginRightNumber = parseInt(scrollMarginRight, 10) || 0;
-  let scrollMarginLeftNumber = parseInt(scrollMarginLeft, 10) || 0;
-
-  let targetLeft = offsetX - scrollMarginLeftNumber;
-  let targetRight = offsetX + width + scrollMarginRightNumber;
-  let targetTop = offsetY - scrollMarginTopNumber;
-  let targetBottom = offsetY + height + scrollMarginBottomNumber;
 
-  let scrollPortLeft = x + parseInt(borderLeftWidth, 10) + scrollPaddingLeftNumber;
-  let scrollPortRight = maxX - scrollPaddingRightNumber;
-  let scrollPortTop = y + parseInt(borderTopWidth, 10) + scrollPaddingTopNumber;
-  let scrollPortBottom = maxY - scrollPaddingBottomNumber;
-
-  if (targetLeft > scrollPortLeft || targetRight < scrollPortRight) {
-    if (targetLeft <= x + scrollPaddingLeftNumber) {
-      x = targetLeft - parseInt(borderLeftWidth, 10) - scrollPaddingLeftNumber;
-    } else if (targetRight > maxX - scrollPaddingRightNumber) {
-      x += targetRight - maxX + scrollPaddingRightNumber;
-    }
+  if (offsetX <= x + scrollPaddingLeftNumber) {
+    x = offsetX - parseInt(borderLeftWidth, 10) - scrollPaddingLeftNumber;
+  } else if (offsetX + width > maxX - scrollPaddingRightNumber) {
+    x += offsetX + width - maxX + scrollPaddingRightNumber;
   }
-
-  if (targetTop > scrollPortTop || targetBottom < scrollPortBottom) {
-    if (targetTop <= borderAdjustedY + scrollPaddingTopNumber) {
-      y = targetTop - parseInt(borderTopWidth, 10) - scrollPaddingTopNumber;
-    } else if (targetBottom > maxY - scrollPaddingBottomNumber) {
-      y += targetBottom - maxY + scrollPaddingBottomNumber;
-    }
-  }
-
-  if (process.env.NODE_ENV === 'test') {
-    scrollView.scrollLeft = x;
-    scrollView.scrollTop = y;
-    return;
+  if (offsetY <= borderAdjustedY + scrollPaddingTopNumber) {
+    y = offsetY - parseInt(borderTopWidth, 10) - scrollPaddingTopNumber;
+  } else if (offsetY + height > maxY - scrollPaddingBottomNumber) {
+    y += offsetY + height - maxY + scrollPaddingBottomNumber;
   }
 
-  scrollView.scrollTo({left: x, top: y});
+  scrollView.scrollLeft = x;
+  scrollView.scrollTop = y;
 }
 
 /**
@@ -134,9 +101,8 @@ export function scrollIntoViewport(targetElement: Element | null, opts?: ScrollI
   if (targetElement && document.contains(targetElement)) {
     let root = document.scrollingElement || document.documentElement;
     let isScrollPrevented = window.getComputedStyle(root).overflow === 'hidden';
-    // If scrolling is not currently prevented then we aren't in a overlay nor is a overlay open, just use element.scrollIntoView to bring the element into view
-    // Also ignore in chrome because of this bug: https://issues.chromium.org/issues/40074749
-    if (!isScrollPrevented && !isChrome()) {
+    // If scrolling is not currently prevented then we aren’t in a overlay nor is a overlay open, just use element.scrollIntoView to bring the element into view
+    if (!isScrollPrevented) {
       let {left: originalLeft, top: originalTop} = targetElement.getBoundingClientRect();
 
       // use scrollIntoView({block: 'nearest'}) instead of .focus to check if the element is fully in view or not since .focus()
diff --git a/packages/@react-spectrum/s2/src/Field.tsx b/packages/@react-spectrum/s2/src/Field.tsx
@@ -200,8 +200,8 @@ export const FieldGroup = forwardRef(function FieldGroup(props: FieldGroupProps,
           (e.currentTarget.querySelector('input, textarea') as HTMLElement)?.focus();
         }
       }}
-      onPointerUp={e => {
-        if (e.pointerType !== 'mouse' && !(e.target as Element).closest('button,input,textarea')) {
+      onTouchEnd={e => {
+        if (!(e.target as Element).closest('button,input,textarea')) {
           e.preventDefault();
           (e.currentTarget.querySelector('input, textarea') as HTMLElement)?.focus();
         }
diff --git a/packages/@react-stately/select/src/useSelectState.ts b/packages/@react-stately/select/src/useSelectState.ts
@@ -162,13 +162,13 @@ export function useSelectState<T extends object, M extends SelectionMode = 'sing
     focusStrategy,
     open(focusStrategy: FocusStrategy | null = null) {
       // Don't open if the collection is empty.
-      if (listState.collection.size !== 0) {
+      if (listState.collection.size !== 0 || props.allowsEmptyCollection) {
         setFocusStrategy(focusStrategy);
         triggerState.open();
       }
     },
     toggle(focusStrategy: FocusStrategy | null = null) {
-      if (listState.collection.size !== 0) {
+      if (listState.collection.size !== 0 || props.allowsEmptyCollection) {
         setFocusStrategy(focusStrategy);
         triggerState.toggle();
       }
diff --git a/packages/@react-types/select/src/index.d.ts b/packages/@react-types/select/src/index.d.ts
@@ -61,7 +61,9 @@ export interface SelectProps<T, M extends SelectionMode = 'single'> extends Coll
   /** Sets the default open state of the menu. */
   defaultOpen?: boolean,
   /** Method that is called when the open state of the menu changes. */
-  onOpenChange?: (isOpen: boolean) => void
+  onOpenChange?: (isOpen: boolean) => void,
+  /** Whether the select should be allowed to be open when the collection is empty. */
+  allowsEmptyCollection?: boolean
 }
 
 export interface AriaSelectProps<T, M extends SelectionMode = 'single'> extends SelectProps<T, M>, DOMProps, AriaLabelingProps, FocusableDOMProps {
diff --git a/packages/react-aria-components/stories/ListBox.stories.tsx b/packages/react-aria-components/stories/ListBox.stories.tsx
@@ -743,46 +743,6 @@ export const AsyncListBoxVirtualized: StoryFn<typeof AsyncListBoxRender> = (args
   );
 };
 
-export const ListBoxScrollMargin: ListBoxStory = (args) => {
-  let items: {id: number, name: string, description: string}[] = [];
-  for (let i = 0; i < 100; i++) {
-    items.push({id: i, name: `Item ${i}`, description: `Description ${i}`});
-  }
-  return (
-    <ListBox 
-      className={styles.menu} 
-      {...args}
-      aria-label="test listbox" 
-      style={{height: 200, width: 100, overflow: 'scroll'}} 
-      items={items}>
-      {item => (
-        <MyListBoxItem style={{scrollMargin: 10, width: 150, display: 'flex', padding: '2px 20px', justifyContent: 'space-between'}}>
-          <span>{item.name}</span>
-          <span>{item.description}</span>
-        </MyListBoxItem>
-      )}
-    </ListBox>
-  );
-};
-
-export const ListBoxSmoothScroll: ListBoxStory = (args) => {
-  let items: {id: number, name: string}[] = [];
-  for (let i = 0; i < 100; i++) {
-    items.push({id: i, name: `Item ${i}`});
-  }
-  return (
-    <ListBox 
-      className={styles.menu} 
-      {...args} 
-      aria-label="test listbox" 
-      style={{height: 200, width: 200, overflow: 'scroll', display: 'grid', gridTemplateColumns: 'repeat(4, 80px)', scrollBehavior: 'smooth'}} 
-      items={items} 
-      layout="grid">
-      {item => <MyListBoxItem style={{minHeight: 32}}>{item.name}</MyListBoxItem>}
-    </ListBox>
-  );
-};
-
 AsyncListBoxVirtualized.story = {
   args: {
     delay: 50
diff --git a/starters/docs/stories/Autocomplete.stories.tsx b/starters/docs/stories/Autocomplete.stories.tsx
@@ -1,33 +1,33 @@
-import {Autocomplete} from '../src/Autocomplete';
+import {Button} from '../src/Button';
+import {CommandPalette} from '../src/CommandPalette';
+import {DialogTrigger} from '../src/Dialog';
 import {MenuItem} from '../src/Menu';
 
 import type {Meta, StoryFn} from '@storybook/react';
 
-const meta: Meta<typeof Autocomplete> = {
-  component: Autocomplete,
+const meta: Meta<typeof CommandPalette> = {
+  component: CommandPalette,
   parameters: {
     layout: 'centered'
   },
   tags: ['autodocs']
 };
 
 export default meta;
-type Story = StoryFn<typeof Autocomplete>;
+type Story = StoryFn<typeof CommandPalette>;
 
 export const Example: Story = (args) => (
-  <Autocomplete {...args}>
-    <MenuItem>Create new file...</MenuItem>
-    <MenuItem>Create new folder...</MenuItem>
-    <MenuItem>Assign to...</MenuItem>
-    <MenuItem>Assign to me</MenuItem>
-    <MenuItem>Change status...</MenuItem>
-    <MenuItem>Change priority...</MenuItem>
-    <MenuItem>Add label...</MenuItem>
-    <MenuItem>Remove label...</MenuItem>
-  </Autocomplete>
+  <DialogTrigger>
+    <Button>Open Command Palette <kbd>⌘ J</kbd></Button>
+    <CommandPalette {...args}>
+      <MenuItem>Create new file...</MenuItem>
+      <MenuItem>Create new folder...</MenuItem>
+      <MenuItem>Assign to...</MenuItem>
+      <MenuItem>Assign to me</MenuItem>
+      <MenuItem>Change status...</MenuItem>
+      <MenuItem>Change priority...</MenuItem>
+      <MenuItem>Add label...</MenuItem>
+      <MenuItem>Remove label...</MenuItem>
+    </CommandPalette>
+  </DialogTrigger>
 );
-
-Example.args = {
-  label: 'Commands',
-  placeholder: 'Search commands...'
-};
diff --git a/starters/tailwind/stories/Autocomplete.stories.tsx b/starters/tailwind/stories/Autocomplete.stories.tsx
@@ -1,28 +1,36 @@
-import { Meta } from '@storybook/react';
-import React from 'react';
-import { Autocomplete, AutocompleteItem, AutocompleteSection } from '../src/Autocomplete';
+import {Meta} from "@storybook/react";
+import React from "react";
+import {CommandPalette} from "../src/CommandPalette";
+import {Button} from "../src/Button";
+import {DialogTrigger} from "react-aria-components";
+import {MenuItem, MenuSection} from "../src/Menu";
 
-const meta: Meta<typeof Autocomplete> = {
-  component: Autocomplete,
+const meta: Meta<typeof CommandPalette> = {
+  component: CommandPalette,
   parameters: {
     layout: 'centered'
   },
-  tags: ['autodocs'],
-  args: {
-    label: 'Ice cream flavor'
-  }
+  tags: ['autodocs']
 };
 
 export default meta;
 
 export const Example = (args: any) => (
-  <Autocomplete {...args}>
-    <AutocompleteItem>Chocolate</AutocompleteItem>
-    <AutocompleteItem id="mint">Mint</AutocompleteItem>
-    <AutocompleteItem>Strawberry</AutocompleteItem>
-    <AutocompleteItem>Vanilla</AutocompleteItem>
-    <AutocompleteItem>Cookies and Cream</AutocompleteItem>
-  </Autocomplete>
+  <DialogTrigger>
+    <Button>
+      Open Command Palette{' '}
+      <kbd className="px-1 ml-4 font-sans text-xs rounded-sm border border-white/20 bg-white/10">
+        ⌘ J
+      </kbd>
+    </Button>
+    <CommandPalette {...args}>
+      <MenuItem>Chocolate</MenuItem>
+      <MenuItem id="mint">Mint</MenuItem>
+      <MenuItem>Strawberry</MenuItem>
+      <MenuItem>Vanilla</MenuItem>
+      <MenuItem>Cookies and Cream</MenuItem>
+    </CommandPalette>
+  </DialogTrigger>
 );
 
 export const DisabledItems = (args: any) => <Example {...args} />;
@@ -31,30 +39,38 @@ DisabledItems.args = {
 };
 
 export const Sections = (args: any) => (
-  <Autocomplete {...args}>
-    <AutocompleteSection title="Fruit">
-      <AutocompleteItem id="Apple">Apple</AutocompleteItem>
-      <AutocompleteItem id="Banana">Banana</AutocompleteItem>
-      <AutocompleteItem id="Orange">Orange</AutocompleteItem>
-      <AutocompleteItem id="Honeydew">Honeydew</AutocompleteItem>
-      <AutocompleteItem id="Grapes">Grapes</AutocompleteItem>
-      <AutocompleteItem id="Watermelon">Watermelon</AutocompleteItem>
-      <AutocompleteItem id="Cantaloupe">Cantaloupe</AutocompleteItem>
-      <AutocompleteItem id="Pear">Pear</AutocompleteItem>
-    </AutocompleteSection>
-    <AutocompleteSection title="Vegetable">
-      <AutocompleteItem id="Cabbage">Cabbage</AutocompleteItem>
-      <AutocompleteItem id="Broccoli">Broccoli</AutocompleteItem>
-      <AutocompleteItem id="Carrots">Carrots</AutocompleteItem>
-      <AutocompleteItem id="Lettuce">Lettuce</AutocompleteItem>
-      <AutocompleteItem id="Spinach">Spinach</AutocompleteItem>
-      <AutocompleteItem id="Bok Choy">Bok Choy</AutocompleteItem>
-      <AutocompleteItem id="Cauliflower">Cauliflower</AutocompleteItem>
-      <AutocompleteItem id="Potatoes">Potatoes</AutocompleteItem>
-    </AutocompleteSection>
-  </Autocomplete>
+  <DialogTrigger>
+    <Button>
+      Open Command Palette{' '}
+      <kbd className="px-1 ml-4 font-sans text-xs rounded-sm border border-white/20 bg-white/10">
+        ⌘ J
+      </kbd>
+    </Button>
+    <CommandPalette {...args}>
+      <MenuSection title="Fruit">
+        <MenuItem id="Apple">Apple</MenuItem>
+        <MenuItem id="Banana">Banana</MenuItem>
+        <MenuItem id="Orange">Orange</MenuItem>
+        <MenuItem id="Honeydew">Honeydew</MenuItem>
+        <MenuItem id="Grapes">Grapes</MenuItem>
+        <MenuItem id="Watermelon">Watermelon</MenuItem>
+        <MenuItem id="Cantaloupe">Cantaloupe</MenuItem>
+        <MenuItem id="Pear">Pear</MenuItem>
+      </MenuSection>
+      <MenuSection title="Vegetable">
+        <MenuItem id="Cabbage">Cabbage</MenuItem>
+        <MenuItem id="Broccoli">Broccoli</MenuItem>
+        <MenuItem id="Carrots">Carrots</MenuItem>
+        <MenuItem id="Lettuce">Lettuce</MenuItem>
+        <MenuItem id="Spinach">Spinach</MenuItem>
+        <MenuItem id="Bok Choy">Bok Choy</MenuItem>
+        <MenuItem id="Cauliflower">Cauliflower</MenuItem>
+        <MenuItem id="Potatoes">Potatoes</MenuItem>
+      </MenuSection>
+    </CommandPalette>
+  </DialogTrigger>
 );
 
 Sections.args = {
-  label: 'Preferred fruit or vegetable'
+  label: 'Preferred fruit or vegetable',
 };

Original file line number	Diff line number	Diff line change
`@@ -200,8 +200,8 @@ export const FieldGroup = forwardRef(function FieldGroup(props: FieldGroupProps,`
`200`	`200`	`(e.currentTarget.querySelector('input, textarea') as HTMLElement)?.focus();`
`201`	`201`	`}`
`202`	`202`	`}}`
`203`		`- onPointerUp={e => {`
`204`		`- if (e.pointerType !== 'mouse' && !(e.target as Element).closest('button,input,textarea')) {`
	`203`	`+ onTouchEnd={e => {`
	`204`	`+ if (!(e.target as Element).closest('button,input,textarea')) {`
`205`	`205`	`e.preventDefault();`
`206`	`206`	`(e.currentTarget.querySelector('input, textarea') as HTMLElement)?.focus();`
`207`	`207`	`}`