Merge main into react_18

package.json

@@ -71,14 +71,14 @@
     "@parcel/transformer-typescript-types": "^2.2.1",
     "@spectrum-css/component-builder": "^1.0.0",
     "@spectrum-css/vars": "^2.3.0",
-    "@storybook/addon-a11y": "^6.5.0-beta.6",
-    "@storybook/addon-actions": "^6.5.0-beta.6",
+    "@storybook/addon-a11y": "^6.5.3",
+    "@storybook/addon-actions": "^6.5.3",
     "@storybook/addon-knobs": "^6.4.0",
-    "@storybook/addon-links": "^6.5.0-beta.6",
-    "@storybook/addons": "^6.5.0-beta.6",
-    "@storybook/api": "^6.5.0-beta.6",
-    "@storybook/components": "^6.5.0-beta.6",
-    "@storybook/react": "^6.5.0-beta.6",
+    "@storybook/addon-links": "^6.5.3",
+    "@storybook/addons": "^6.5.3",
+    "@storybook/api": "^6.5.3",
+    "@storybook/components": "^6.5.3",
+    "@storybook/react": "^6.5.3",
     "@testing-library/dom": "^8.0.0",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^13.2.0",

packages/@adobe/react-spectrum/src/index.ts

@@ -26,7 +26,7 @@ export {Image} from '@react-spectrum/image';
 export {Flex, Grid, fitContent, minmax, repeat} from '@react-spectrum/layout';
 export {Link} from '@react-spectrum/link';
 export {ListBox} from '@react-spectrum/listbox';
-export {Menu, MenuTrigger} from '@react-spectrum/menu';
+export {ActionMenu, Menu, MenuTrigger} from '@react-spectrum/menu';
 export {Meter} from '@react-spectrum/meter';
 export {NumberField} from '@react-spectrum/numberfield';
 export {Picker} from '@react-spectrum/picker';

packages/@adobe/spectrum-css-temp/components/table/index.css

@@ -196,6 +196,7 @@ svg.spectrum-Table-sortedIcon {
   line-height: calc(calc(var(--spectrum-table-cell-text-size) * var(--spectrum-table-cell-text-line-height)) - 1px);
   padding: var(--spectrum-table-cell-regular-padding-y) var(--spectrum-table-cell-padding-x);
 }
+.spectrum-Table--regular {}
 
 .spectrum-Table--compact .spectrum-Table-cell {
   padding-top: var(--spectrum-table-cell-compact-padding-y);
@@ -337,6 +338,32 @@ svg.spectrum-Table-sortedIcon {
       }
     }
   }
+  &.spectrum-Table--isVerticalScrollbarVisible {
+    .spectrum-Table-row {
+      &.spectrum-Table-row--firstRow.is-selected {
+        &:after {
+          border-start-end-radius: 0;
+        }
+      }
+      /* beat specificity of isFlushBottom */
+      &.spectrum-Table-row--lastRow.is-selected.is-selected {
+        &:after {
+          border-end-end-radius: 0;
+        }
+      }
+    }
+  }
+  &.spectrum-Table--isHorizontalScrollbarVisible {
+    .spectrum-Table-row {
+      /* beat specificity of isFlushBottom */
+      &.spectrum-Table-row--lastRow.is-selected.is-selected {
+        &:after {
+          border-end-start-radius: 0;
+          border-end-end-radius: 0;
+        }
+      }
+    }
+  }
 }
 
 /* the CSS logical properties postcss plugin doesn't seem to work with :focus-ring. */

packages/@adobe/spectrum-css-temp/components/tabs/skin.css

@@ -10,6 +10,17 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
+:root {
+  --spectrum-tabs-emphasized-text-color: var(--spectrum-global-color-blue-600);
+  --spectrum-tabs-emphasized-icon-color: var(--spectrum-global-color-blue-600);
+  --spectrum-tabs-emphasized-selection-indicator-color: var(--spectrum-global-color-blue-600);
+  --spectrum-tabs-emphasized-text-color-hover: var(--spectrum-global-color-blue-700);
+  --spectrum-tabs-emphasized-icon-color-hover: var(--spectrum-global-color-blue-700);
+  --spectrum-tabs-emphasized-text-color-key-focus: var(--spectrum-global-color-blue-600);
+  --spectrum-tabs-emphasized-icon-color-key-focus: var(--spectrum-global-color-blue-600);
+  --spectrum-tabs-emphasized-focus-ring-color: var(--spectrum-global-color-blue-600);
+}
+
 .spectrum-Tabs {
   border-block-end-color: var(--spectrum-tabs-rule-color);
 
@@ -29,6 +40,12 @@ governing permissions and limitations under the License.
   border-inline-start-color: var(--spectrum-tabs-vertical-rule-color);
 }
 
+.spectrum-Tabs--emphasized {
+  .spectrum-Tabs-selectionIndicator {
+    background-color: var(--spectrum-tabs-emphasized-selection-indicator-color);
+  }
+}
+
 .spectrum-Tabs-selectionIndicator {
   background-color: var(--spectrum-tabs-selection-indicator-color);
 }
@@ -77,12 +94,50 @@ governing permissions and limitations under the License.
   }
 }
 
+.spectrum-Tabs--emphasized {
+  .spectrum-Tabs-item {
+    &.is-selected {
+      color: var(--spectrum-tabs-emphasized-text-color);
+
+      .spectrum-Icon {
+        fill: var(--spectrum-tabs-emphasized-icon-color);
+      }
+
+      &:focus-ring {
+        color: var(--spectrum-tabs-emphasized-text-color-key-focus);
+
+        &::before {
+          border-color: var(--spectrum-tabs-emphasized-focus-ring-color);
+        }
+
+        .spectrum-Icon {
+          fill: var(--spectrum-tabs-emphasized-icon-color-key-focus);
+        }
+      }
+
+      &:hover {
+        color: var(--spectrum-tabs-emphasized-text-color-hover);
+
+        .spectrum-Icon {
+          fill: var(--spectrum-tabs-emphasized-icon-color-hover);
+        }
+      }
+    }
+  }
+}
+
 .spectrum-Tabs--quiet {
   border-block-end-color: var(--spectrum-tabs-quiet-rule-color);
 
   .spectrum-Tabs-selectionIndicator {
     background-color: var(--spectrum-tabs-quiet-selection-indicator-color);
   }
+
+  &.spectrum-Tabs--emphasized {
+    .spectrum-Tabs-selectionIndicator {
+      background-color: var(--spectrum-tabs-emphasized-selection-indicator-color);
+    }
+  }
 }
 
 .spectrum-Tabs--vertical {
@@ -94,6 +149,12 @@ governing permissions and limitations under the License.
       background-color: var(--spectrum-tabs-quiet-selection-indicator-color);
     }
   }
+
+  &.spectrum-Tabs--emphasized {
+    .spectrum-Tabs-selectionIndicator {
+      background-color: var(--spectrum-tabs-emphasized-selection-indicator-color);
+    }
+  }
 }
 
 .spectrum-TabsPanel-tabpanel {

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

@@ -215,7 +215,9 @@ function getSymbols(formatter: Intl.NumberFormat, intlOptions: Intl.ResolvedNumb
   let pluralLiterals = allParts.filter(p => !nonLiteralParts.has(p.type)).map(p => escapeRegex(p.value));
   let singularLiterals = singularParts.filter(p => !nonLiteralParts.has(p.type)).map(p => escapeRegex(p.value));
   let sortedLiterals = [...new Set([...singularLiterals, ...pluralLiterals])].sort((a, b) => b.length - a.length);
-  let literals = new RegExp(`${sortedLiterals.join('|')}|[\\p{White_Space}]`, 'gu');
+  let literals = sortedLiterals.length === 0 ? 
+      new RegExp('[\\p{White_Space}]', 'gu') :
+      new RegExp(`${sortedLiterals.join('|')}|[\\p{White_Space}]`, 'gu');
 
   // These are for replacing non-latn characters with the latn equivalent
   let numerals = [...new Intl.NumberFormat(intlOptions.locale, {useGrouping: false}).format(9876543210)].reverse();

packages/@internationalized/number/test/NumberParser.test.js

@@ -263,6 +263,7 @@ describe('NumberParser', function () {
 
   describe('getNumberingSystem', function () {
     it('should return the default numbering system for a locale', function () {
+      expect(new NumberParser('en-US', {style: 'decimal'}).getNumberingSystem(' ')).toBe('latn');
       expect(new NumberParser('en-US', {style: 'decimal'}).getNumberingSystem('12')).toBe('latn');
       expect(new NumberParser('en-US', {style: 'decimal'}).getNumberingSystem('.')).toBe('latn');
       expect(new NumberParser('en-US', {style: 'decimal'}).getNumberingSystem('12.5')).toBe('latn');

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

@@ -64,6 +64,10 @@ export function useDrag(options: DragOptions): DragResult {
   let {addGlobalListener, removeAllGlobalListeners} = useGlobalListeners();
 
   let onDragStart = (e: DragEvent) => {
+    if (e.defaultPrevented) {
+      return;
+    }
+
     if (typeof options.onDragStart === 'function') {
       options.onDragStart({
         type: 'dragstart',

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

@@ -21,11 +21,11 @@ import {useDroppableItem} from './useDroppableItem';
 import {useId} from '@react-aria/utils';
 import {useMessageFormatter} from '@react-aria/i18n';
 
-interface DropIndicatorProps {
+export interface DropIndicatorProps {
   target: DropTarget
 }
 
-interface DropIndicatorAria {
+export interface DropIndicatorAria {
   dropIndicatorProps: HTMLAttributes<HTMLElement>
 }
 

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

@@ -21,12 +21,12 @@ import {useAutoScroll} from './useAutoScroll';
 import {useDrop} from './useDrop';
 import {useDroppableCollectionId} from './utils';
 
-interface DroppableCollectionOptions extends DroppableCollectionProps {
+export interface DroppableCollectionOptions extends DroppableCollectionProps {
   keyboardDelegate: KeyboardDelegate,
   getDropTargetFromPoint: (x: number, y: number) => DropTarget | null
 }
 
-interface DroppableCollectionResult {
+export interface DroppableCollectionResult {
   collectionProps: HTMLAttributes<HTMLElement>
 }
 
@@ -68,11 +68,6 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
         return 'cancel';
       }
 
-      if (state.isDropTarget(target)) {
-        localState.nextTarget = target;
-        return localState.dropOperation;
-      }
-
       localState.dropOperation = state.getDropOperation(target, types, allowedOperations);
 
       // If the target doesn't accept the drop, see if the root accepts it instead.

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

@@ -17,11 +17,11 @@ import {getTypes} from './utils';
 import {HTMLAttributes, RefObject, useEffect} from 'react';
 import {useVirtualDrop} from './useVirtualDrop';
 
-interface DroppableItemOptions {
+export interface DroppableItemOptions {
   target: DropTarget
 }
 
-interface DroppableItemResult {
+export interface DroppableItemResult {
   dropProps: HTMLAttributes<HTMLElement>
 }
 

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

@@ -16,3 +16,5 @@ export * from './useGridRowGroup';
 export * from './useGridRow';
 export * from './useGridCell';
 export * from './useGridSelectionCheckbox';
+export * from './useHighlightSelectionDescription';
+export * from './useGridSelectionAnnouncement';

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

@@ -10,17 +10,15 @@
  * governing permissions and limitations under the License.
  */
 
-import {announce} from '@react-aria/live-announcer';
-import {AriaLabelingProps, DOMProps, KeyboardDelegate, Selection} from '@react-types/shared';
-import {filterDOMProps, mergeProps, useId, useUpdateEffect} from '@react-aria/utils';
+import {AriaLabelingProps, DOMProps, KeyboardDelegate} from '@react-types/shared';
+import {filterDOMProps, mergeProps, useId} from '@react-aria/utils';
 import {GridCollection} from '@react-types/grid';
 import {GridKeyboardDelegate} from './GridKeyboardDelegate';
 import {gridMap} from './utils';
 import {GridState} from '@react-stately/grid';
-import {HTMLAttributes, Key, RefObject, useMemo, useRef} from 'react';
-// @ts-ignore
-import intlMessages from '../intl/*.json';
-import {useCollator, useLocale, useMessageFormatter} from '@react-aria/i18n';
+import {HTMLAttributes, Key, RefObject, useMemo} from 'react';
+import {useCollator, useLocale} from '@react-aria/i18n';
+import {useGridSelectionAnnouncement} from './useGridSelectionAnnouncement';
 import {useHighlightSelectionDescription} from './useHighlightSelectionDescription';
 import {useSelectableCollection} from '@react-aria/selection';
 
@@ -69,12 +67,11 @@ export function useGrid<T>(props: GridProps, state: GridState<T, GridCollection<
     isVirtualized,
     keyboardDelegate,
     focusMode,
-    getRowText = (key) => state.collection.getItem(key)?.textValue,
     scrollRef,
+    getRowText,
     onRowAction,
     onCellAction
   } = props;
-  let formatMessage = useMessageFormatter(intlMessages);
 
   if (!props['aria-label'] && !props['aria-labelledby']) {
     console.warn('An aria-label or aria-labelledby prop is required for accessibility.');
@@ -126,78 +123,8 @@ export function useGrid<T>(props: GridProps, state: GridState<T, GridCollection<
     gridProps['aria-colcount'] = state.collection.columnCount;
   }
 
-  // Many screen readers do not announce when items in a grid are selected/deselected.
-  // We do this using an ARIA live region.
-  let selection = state.selectionManager.rawSelection;
-  let lastSelection = useRef(selection);
-  useUpdateEffect(() => {
-    if (!state.selectionManager.isFocused) {
-      lastSelection.current = selection;
-
-      return;
-    }
-
-    let addedKeys = diffSelection(selection, lastSelection.current);
-    let removedKeys = diffSelection(lastSelection.current, selection);
-
-    // If adding or removing a single row from the selection, announce the name of that item.
-    let isReplace = state.selectionManager.selectionBehavior === 'replace';
-    let messages = [];
-
-    if ((state.selectionManager.selectedKeys.size === 1 && isReplace)) {
-      if (state.collection.getItem(state.selectionManager.selectedKeys.keys().next().value)) {
-        let currentSelectionText = getRowText(state.selectionManager.selectedKeys.keys().next().value);
-        if (currentSelectionText) {
-          messages.push(formatMessage('selectedItem', {item: currentSelectionText}));
-        }
-      }
-    } else if (addedKeys.size === 1 && removedKeys.size === 0) {
-      let addedText = getRowText(addedKeys.keys().next().value);
-      if (addedText) {
-        messages.push(formatMessage('selectedItem', {item: addedText}));
-      }
-    } else if (removedKeys.size === 1 && addedKeys.size === 0) {
-      if (state.collection.getItem(removedKeys.keys().next().value)) {
-        let removedText = getRowText(removedKeys.keys().next().value);
-        if (removedText) {
-          messages.push(formatMessage('deselectedItem', {item: removedText}));
-        }
-      }
-    }
-
-    // Announce how many items are selected, except when selecting the first item.
-    if (state.selectionManager.selectionMode === 'multiple') {
-      if (messages.length === 0 || selection === 'all' || selection.size > 1 || lastSelection.current === 'all' || lastSelection.current?.size > 1) {
-        messages.push(selection === 'all'
-          ? formatMessage('selectedAll')
-          : formatMessage('selectedCount', {count: selection.size})
-        );
-      }
-    }
-
-    if (messages.length > 0) {
-      announce(messages.join(' '));
-    }
-
-    lastSelection.current = selection;
-  }, [selection]);
-
+  useGridSelectionAnnouncement({getRowText}, state);
   return {
     gridProps
   };
 }
-
-function diffSelection(a: Selection, b: Selection): Set<Key> {
-  let res = new Set<Key>();
-  if (a === 'all' || b === 'all') {
-    return res;
-  }
-
-  for (let key of a.keys()) {
-    if (!b.has(key)) {
-      res.add(key);
-    }
-  }
-
-  return res;
-}