Merge branch 'main' into ts-strict-update-react-aria-b

# Conflicts:
#	packages/@react-aria/listbox/src/useOption.ts

Author: snowystinger

.eslintrc.js

@@ -31,7 +31,7 @@ module.exports = {
       'jsdoc/require-description-complete-sentence': [ERROR, {abbreviations: ['e.g', 'i.e']}],
       'jsdoc/check-alignment': ERROR,
       'jsdoc/check-indentation': ERROR,
-      'jsdoc/check-tag-names': [ERROR, {definedTags: ['selector']}],
+      'jsdoc/check-tag-names': [ERROR, {definedTags: ['selector', 'note']}],
       // enable this rule to see literally everything missing jsdocs, this rule needs some refinement but is good as a sanity check.
       // 'jsdoc/require-jsdoc': [ERROR, {contexts:['TSInterfaceDeclaration TSPropertySignature', 'TSInterfaceDeclaration TSMethodSignature']}],
       'jsdoc/require-description': [ERROR, {exemptedBy: ['deprecated'], checkConstructors: false}],

packages/@react-aria/grid/src/useGridCell.ts

@@ -240,6 +240,21 @@ export function useGridCell<T, C extends GridCollection<T>>(props: GridCellProps
     gridCellProps['aria-colindex'] = (node.colIndex ?? node.index) + 1; // aria-colindex is 1-based
   }
 
+  // When pressing with a pointer and cell selection is not enabled, usePress will be applied to the
+  // row rather than the cell. However, when the row is draggable, usePress cannot preventDefault
+  // on pointer down, so the browser will try to focus the cell which has a tabIndex applied.
+  // To avoid this, remove the tabIndex from the cell briefly on pointer down.
+  if (shouldSelectOnPressUp && gridCellProps.tabIndex != null && gridCellProps.onPointerDown == null) {
+    gridCellProps.onPointerDown = (e) => {
+      let el = e.currentTarget;
+      let tabindex = el.getAttribute('tabindex');
+      el.removeAttribute('tabindex');
+      requestAnimationFrame(() => {
+        el.setAttribute('tabindex', tabindex);
+      });
+    };
+  }
+
   return {
     gridCellProps,
     isPressed

packages/@react-aria/listbox/docs/useListBox.mdx

@@ -251,7 +251,7 @@ function Example() {
         <Item key="egg">Egg Salad</Item>
         <Item key="ham">Ham</Item>
       </ListBox>
-      <p>Current selection (controlled): {[...selected].join(', ')}</p>
+      <p>Current selection (controlled): {selected === 'all' ? 'all' : [...selected].join(', ')}</p>
     </>
   );
 }

packages/@react-aria/listbox/src/useOption.ts

@@ -30,7 +30,10 @@ export interface OptionAria extends SelectableItemStates {
   descriptionProps: DOMAttributes,
 
   /** Whether the option is currently focused. */
-  isFocused: boolean
+  isFocused: boolean,
+
+  /** Whether the option is keyboard focused. */
+  isFocusVisible: boolean
 }
 
 export interface AriaOptionProps {
@@ -92,7 +95,6 @@ export function useOption<T>(props: AriaOptionProps, state: ListState<T>, ref: R
 
   let isDisabled = props.isDisabled ?? state.disabledKeys.has(key);
   let isSelected = props.isSelected ?? state.selectionManager.isSelected(key);
-  let isFocused = state.selectionManager.focusedKey === key;
   let shouldSelectOnPressUp = props.shouldSelectOnPressUp ?? data?.shouldSelectOnPressUp;
   let shouldFocusOnHover = props.shouldFocusOnHover ?? data?.shouldFocusOnHover;
   let shouldUseVirtualFocus = props.shouldUseVirtualFocus ?? data?.shouldUseVirtualFocus;
@@ -122,7 +124,7 @@ export function useOption<T>(props: AriaOptionProps, state: ListState<T>, ref: R
     optionProps['aria-setsize'] = getItemCount(state.collection);
   }
 
-  let {itemProps, isPressed, hasAction, allowsSelection} = useSelectableItem({
+  let {itemProps, isPressed, isFocused, hasAction, allowsSelection} = useSelectableItem({
     selectionManager: state.selectionManager,
     key,
     ref,
@@ -157,6 +159,7 @@ export function useOption<T>(props: AriaOptionProps, state: ListState<T>, ref: R
       id: descriptionId
     },
     isFocused,
+    isFocusVisible: isFocused && isFocusVisible(),
     isSelected,
     isDisabled,
     isPressed,

packages/@react-aria/menu/docs/useMenu.mdx

@@ -366,7 +366,7 @@ function Example() {
         <Item key='tools'>Tools</Item>
         <Item key='console'>Console</Item>
       </MenuButton>
-      <p>Current selection (controlled): {[...selected].join(', ')}</p>
+      <p>Current selection (controlled): {selected === 'all' ? 'all' : [...selected].join(', ')}</p>
     </>
   );
 }

packages/@react-aria/table/src/useTableCell.ts

@@ -22,6 +22,8 @@ export interface AriaTableCellProps {
   node: GridNode<unknown>,
   /** Whether the cell is contained in a virtual scroller. */
   isVirtualized?: boolean,
+  /** Whether selection should occur on press up instead of press down. */
+  shouldSelectOnPressUp?: boolean,
   /**
    * Handler that is called when a user performs an action on the cell.
    * Please use onCellAction at the collection level instead.

packages/@react-spectrum/menu/docs/Menu.mdx

@@ -167,7 +167,7 @@ function Example() {
           <Item key='Console'>Console</Item>
         </Menu>
       </MenuTrigger>
-      <p>Current selection (controlled): {[...selected].join(', ')}</p>
+      <p>Current selection (controlled): {selected === 'all' ? 'all' : [...selected].join(', ')}</p>
     </>
   );
 }

packages/@react-spectrum/numberfield/test/NumberField.test.js

@@ -882,7 +882,7 @@ describe('NumberField', function () {
     textField.setSelectionRange(2, 3);
     userEvent.type(textField, '{backspace}');
     expect(announce).toHaveBeenCalledTimes(2);
-    expect(announce).toHaveBeenLastCalledWith('−$.00', 'assertive');
+    expect(announce).toHaveBeenLastCalledWith('−$0.00', 'assertive');
     textField.setSelectionRange(2, 2);
     typeText(textField, '1');
     expect(announce).toHaveBeenCalledTimes(3);
@@ -902,7 +902,7 @@ describe('NumberField', function () {
     userEvent.type(textField, '{backspace}');
     expect(textField).toHaveAttribute('value', '($18.00');
     expect(announce).toHaveBeenCalledTimes(5);
-    expect(announce).toHaveBeenLastCalledWith('($18.00', 'assertive');
+    expect(announce).toHaveBeenLastCalledWith('$18.00', 'assertive');
     act(() => {textField.blur();});
     expect(textField).toHaveAttribute('value', '$18.00');
     expect(onChangeSpy).toHaveBeenCalledTimes(3);
@@ -914,9 +914,8 @@ describe('NumberField', function () {
     expect(announce).toHaveBeenLastCalledWith('Empty', 'assertive');
     typeText(textField, '($32)');
     expect(textField).toHaveAttribute('value', '($32)');
-    expect(announce).toHaveBeenCalledTimes(11);
-    console.log(announce.mock.calls[4]);
-    expect(announce).toHaveBeenLastCalledWith('−$32', 'assertive');
+    expect(announce).toHaveBeenCalledTimes(9);
+    expect(announce).toHaveBeenLastCalledWith('−$32.00', 'assertive');
     act(() => {textField.blur();});
     expect(textField).toHaveAttribute('value', '($32.00)');
     expect(onChangeSpy).toHaveBeenCalledTimes(4);
@@ -932,17 +931,15 @@ describe('NumberField', function () {
     act(() => {textField.focus();});
     userEvent.type(textField, '(10)');
     expect(textField).toHaveAttribute('value', '(10)');
-    expect(announce).toHaveBeenCalledTimes(4);
-    expect(announce).toHaveBeenLastCalledWith('−10', 'assertive');
-    expect(announce).toHaveBeenCalledTimes(4);
-    expect(announce).toHaveBeenLastCalledWith('−10', 'assertive');
+    expect(announce).toHaveBeenCalledTimes(3);
+    expect(announce).toHaveBeenLastCalledWith('؜−١٠٫٠٠ US$', 'assertive');
     act(() => {textField.blur();});
     expect(textField).toHaveAttribute('value', '(US$10.00)');
     expect(onChangeSpy).toHaveBeenCalledTimes(1);
     expect(onChangeSpy).toHaveBeenLastCalledWith(-10);
   });
 
-  it.only.each`
+  it.each`
     Name
     ${'NumberField'}
   `('$Name can edit a currencySign accounting in a locale that does not use the parenthesis notation', () => {

packages/@spectrum-icons/workflow/package.json

@@ -22,7 +22,7 @@
     "make-icons": "babel-node --extensions '.cjs,.js' --presets @babel/env ./scripts/generateIcons.cjs -i '[]' && yarn generate-types"
   },
   "dependencies": {
-    "@adobe/react-spectrum-workflow": "2.3.3",
+    "@adobe/react-spectrum-workflow": "2.3.4",
     "@react-spectrum/icon": "^3.7.0",
     "@swc/helpers": "^0.4.14"
   },

packages/dev/docs/src/Layout.js

@@ -72,6 +72,14 @@ const mdxComponents = {
       </span>
     </h3>
   ),
+  h4: ({children, ...props}) => (
+    <h4 {...props} className={clsx(typographyStyles['spectrum-Heading5'], docStyles['sectionHeader'], docStyles['docsHeader'])}>
+      {children}
+      <span className={docStyles['headingAnchor']}>
+        <a className={clsx(linkStyle['spectrum-Link'], docStyles.link, docStyles.anchor)} href={`#${props.id}`} aria-label={`Direct link to ${children}`}>#</a>
+      </span>
+    </h4>
+  ),
   p: ({children, ...props}) => <p className={typographyStyles['spectrum-Body3']} {...props}>{children}</p>,
   ul: ({children, ...props}) => <ul {...props} className={typographyStyles['spectrum-Body3']}>{children}</ul>,
   ol: ({children, ...props}) => <ol {...props} className={typographyStyles['spectrum-Body3']}>{children}</ol>,

packages/dev/docs/src/StateTable.js

@@ -17,7 +17,12 @@ import styles from './docs.css';
 import tableStyles from '@adobe/spectrum-css-temp/components/table/vars.css';
 import typographyStyles from '@adobe/spectrum-css-temp/components/typography/vars.css';
 
-export function StateTable({properties}) {
+export function StateTable({properties, showOptional}) {
+  let props = Object.values(properties);
+  if (!showOptional) {
+    props = props.filter(prop => !prop.optional);
+  }
+
   return (
     <table className={`${tableStyles['spectrum-Table']} ${tableStyles['spectrum-Table--quiet']} ${styles.propTable}`}>
       <thead>
@@ -28,7 +33,7 @@ export function StateTable({properties}) {
         </tr>
       </thead>
       <tbody className={tableStyles['spectrum-Table-body']}>
-        {Object.values(properties).map((prop, index) => (
+        {props.map((prop, index) => (
           <tr key={index} className={clsx(tableStyles['spectrum-Table-row'], styles.tableRow)}>
             <td role="rowheader" className={clsx(tableStyles['spectrum-Table-cell'], styles.tableCell)} data-column="Name">
               <code className={`${typographyStyles['spectrum-Code4']}`}>

packages/dev/parcel-transformer-mdx-docs/MDXTransformer.js

@@ -87,7 +87,7 @@ module.exports = new Transformer({
 
             // We'd like to exclude certain sections of the code from being rendered on the page, but they need to be there to actually
             // execute. So, you can wrap that section in a ///- begin collapse -/// ... ///- end collapse -/// block to mark it.
-            node.value = node.value.replace(/\n*\/\/\/- begin collapse -\/\/\/(.|\n)*?\/\/\/- end collapse -\/\/\//g, () => '').trim();
+            node.value = node.value.replace(/\n*\/\/\/- begin collapse -\/\/\/(.|\n)*?\/\/\/- end collapse -\/\/\/(\s*\n*(?=\s*(\/\/|\/\*)))?/g, () => '').trim();
 
             if (options.includes('render=false')) {
               node.meta = null;

packages/react-aria-components/docs/ComboBox.mdx

@@ -118,20 +118,13 @@ import {ComboBox, Label, Input, Button, Popover, ListBox, Item} from 'react-aria
 .react-aria-ListBox {
   --highlight-background: slateblue;
   --highlight-foreground: white;
-  --border-color: var(--spectrum-global-color-gray-400);
-  --background-color: var(--page-background);
   --text-color: var(--spectrum-alias-text-color);
   --text-color-disabled: var(--spectrum-alias-text-color-disabled);
 
   max-height: inherit;
   overflow: auto;
   padding: 2px;
-  border: 1px solid var(--border-color);
-  box-shadow: 0 8px 20px rgba(0 0 0 / 0.1);
-  border-radius: 6px;
-  background: var(--background-color);
-  width: var(--combobox-width);
-  box-sizing: border-box;
+  outline: none;
 
   .react-aria-Section:not(:first-child) {
     margin-top: 12px;
@@ -188,6 +181,19 @@ import {ComboBox, Label, Input, Button, Popover, ListBox, Item} from 'react-aria
   }
 }
 
+.react-aria-Popover {
+  --background-color: var(--page-background);
+  --border-color: var(--spectrum-global-color-gray-400);
+
+  border: 1px solid var(--border-color);
+  width: var(--trigger-width);
+  box-sizing: border-box;
+  box-shadow: 0 8px 20px rgba(0 0 0 / 0.1);
+  border-radius: 6px;
+  background: var(--background-color);
+  outline: none;
+}
+
 @media (forced-colors: active) {
   .react-aria-ListBox {
     forced-color-adjust: none;
@@ -425,11 +431,11 @@ A [Button](Button.html) can be targeted with the `.react-aria-Button` CSS select
 
 The [Popover](Popover.html) component can be targeted with the `.react-aria-Popover` CSS selector, or by overriding with a custom `className`. Note that it renders in a [React Portal](https://reactjs.org/docs/portals.html), so it will not appear as a descendant of the ComboBox in the DOM.
 
-The `--combobox-width` CSS custom property will be set on the popover, which you can use to make the popover match the width of the combobox.
+The `--trigger-width` CSS custom property will be set on the popover, which you can use to make the popover match the width of the combobox.
 
 ```css render=false
 .react-aria-Popover {
-  width: var(--combobox-width);
+  width: var(--trigger-width);
 }
 ```
 

packages/react-aria-components/docs/Dialog.mdx

@@ -273,7 +273,7 @@ A `Dialog` may be placed within a [Popover](Popover.html) to display it in conte
 import {Popover, OverlayArrow} from 'react-aria-components';
 
 <DialogTrigger>
-  <Button aria-label="Help">?⃝</Button>
+  <Button aria-label="Help">ⓘ</Button>
   <Popover>
     <OverlayArrow>
       <svg width={12} height={12}><path d="M0 0,L6 6,L12 0" /></svg>
@@ -291,18 +291,21 @@ import {Popover, OverlayArrow} from 'react-aria-components';
 
 ```css
 .react-aria-Popover {
-  border: 1px solid var(--spectrum-global-color-gray-400);
+  --background-color: var(--page-background);
+  --border-color: var(--spectrum-global-color-gray-400);
+
+  border: 1px solid var(--border-color);
   box-shadow: 0 8px 20px rgba(0 0 0 / 0.1);
   border-radius: 6px;
-  background: var(--page-background);
+  background: var(--background-color);
   outline: none;
   padding: 30px;
   max-width: 250px;
 
   & .react-aria-OverlayArrow svg {
     display: block;
-    fill: var(--page-background);
-    stroke: var(--spectrum-global-color-gray-400);
+    fill: var(--background-color);
+    stroke: var(--border-color);
     stroke-width: 1px;
   }
 
@@ -355,6 +358,13 @@ import {Popover, OverlayArrow} from 'react-aria-components';
     opacity: 1;
   }
 }
+
+@media (forced-colors: active) {
+  .react-aria-Popover {
+    --background-color: Canvas;
+    --border-color: ButtonBorder;
+  }
+}
 ```
 
 </details>