Add data-selection-mode attribute (#5018)

Author: devongovett

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

@@ -161,10 +161,15 @@ import {MenuTrigger, Button, Popover, Menu, Item} from 'react-aria-components';
       text-align: end;
     }
 
-    &[data-selected] {
+    &[data-selection-mode] {
       padding-left: 24px;
+      &::before {
+        position: absolute;
+        left: 4px;
+        font-weight: 600;
+      }
 
-      &[data-selected]::before {
+      &[data-selection-mode=multiple][data-selected]::before {
         content: '✓';
         content: '✓' / '';
         alt: ' ';
@@ -173,7 +178,7 @@ import {MenuTrigger, Button, Popover, Menu, Item} from 'react-aria-components';
         font-weight: 600;
       }
 
-      &[role=menuitemradio][data-selected]::before {
+      &[data-selection-mode=single][data-selected]::before {
         content: '●';
         content: '●' / '';
         transform: scale(0.7)
@@ -791,7 +796,7 @@ A `Header` within a `Section` can be targeted with the `.react-aria-Header` CSS
 
 An `Item` can be targeted with the `.react-aria-Item` CSS selector, or by overriding with a custom `className`. It supports the following states and render props:
 
-<StateTable properties={docs.exports.MenuItemRenderProps.properties} />
+<StateTable properties={docs.exports.ItemRenderProps.properties} />
 
 Items also support two slots: a label, and a description. When provided using the `<Text>` element, the item will have `aria-labelledby` and `aria-describedby` attributes pointing to these slots, improving screen reader announcement. See [complex items](#complex-items) for an example.
 

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

@@ -1311,22 +1311,6 @@ function Example() {
   box-sizing: border-box;
   outline: none;
 
-  .react-aria-Section:not(:first-child) {
-    margin-top: 12px;
-  }
-
-  .react-aria-Header {
-    font-size: 1.143rem;
-    font-weight: bold;
-    padding: 0 0.714rem;
-  }
-
-  [role=separator] {
-    height: 1px;
-    background: var(--separator-color);
-    margin: 2px 4px;
-  }
-
   .react-aria-Item {
     margin: 2px;
     padding: 0.286rem 0.571rem;
@@ -1346,45 +1330,6 @@ function Example() {
       background: var(--highlight-background);
       color: var(--highlight-foreground);
     }
-
-    &[data-disabled] {
-      color: var(--text-color-disabled);
-    }
-
-    [slot=label] {
-      font-weight: bold;
-      grid-area: label;
-    }
-
-    [slot=description] {
-      font-size: small;
-      grid-area: desc;
-    }
-
-    & kbd {
-      grid-area: kbd;
-      font-family: monospace;
-      text-align: end;
-    }
-
-    &[data-checked] {
-      padding-left: 24px;
-
-      &[data-checked=true]::before {
-        content: '✓';
-        content: '✓' / '';
-        alt: ' ';
-        position: absolute;
-        left: 4px;
-        font-weight: 600;
-      }
-
-      &[role=menuitemradio][data-checked=true]::before {
-        content: '●';
-        content: '●' / '';
-        transform: scale(0.7)
-      }
-    }
   }
 }
 

packages/react-aria-components/src/Collection.tsx

@@ -814,7 +814,10 @@ export interface ItemRenderProps {
    * @selector [data-disabled]
    */
   isDisabled: boolean,
-  /** The type of selection that is allowed in the collection. */
+  /**
+   * The type of selection that is allowed in the collection.
+   * @selector [data-selection-mode="single | multiple"]
+   */
   selectionMode: SelectionMode,
   /** The selection behavior for the collection. */
   selectionBehavior: SelectionBehavior,

packages/react-aria-components/src/GridList.tsx

@@ -341,7 +341,8 @@ function GridListItem({item}) {
         data-pressed={states.isPressed || undefined}
         data-allows-dragging={!!dragState || undefined}
         data-dragging={isDragging || undefined}
-        data-drop-target={dropIndicator?.isDropTarget || undefined}>
+        data-drop-target={dropIndicator?.isDropTarget || undefined}
+        data-selection-mode={state.selectionManager.selectionMode === 'none' ? undefined : state.selectionManager.selectionMode}>
         <div {...gridCellProps}>
           <Provider
             values={[

packages/react-aria-components/src/ListBox.tsx

@@ -410,7 +410,8 @@ function Option<T>({item}: OptionProps<T>) {
         data-focus-visible={states.isFocusVisible || undefined}
         data-pressed={states.isPressed || undefined}
         data-dragging={isDragging || undefined}
-        data-drop-target={droppableItem?.isDropTarget || undefined}>
+        data-drop-target={droppableItem?.isDropTarget || undefined}
+        data-selection-mode={state.selectionManager.selectionMode === 'none' ? undefined : state.selectionManager.selectionMode}>
         <Provider
           values={[
             [TextContext, {

packages/react-aria-components/src/Menu.tsx

@@ -12,7 +12,7 @@
 
 
 import {AriaMenuProps, mergeProps, useFocusRing, useMenu, useMenuItem, useMenuSection, useMenuTrigger} from 'react-aria';
-import {BaseCollection, CollectionProps, ItemProps, ItemRenderProps, useCachedChildren, useCollection} from './Collection';
+import {BaseCollection, CollectionProps, ItemProps, useCachedChildren, useCollection} from './Collection';
 import {MenuTriggerProps as BaseMenuTriggerProps, Node, TreeState, useMenuTriggerState, useTreeState} from 'react-stately';
 import {ButtonContext} from './Button';
 import {ContextValue, forwardRefType, Provider, SlotProps, StyleProps, useContextProps, useRenderProps, useSlot} from './utils';
@@ -169,14 +169,6 @@ function MenuSection<T>({section, className, style, ...otherProps}: MenuSectionP
   );
 }
 
-export interface MenuItemRenderProps extends ItemRenderProps {
-  /**
-   * Whether the item is currently selected.
-   * @selector [data-selected]
-   */
-   isSelected: boolean
-}
-
 interface MenuItemProps<T> {
   item: Node<T>
 }
@@ -215,7 +207,8 @@ function MenuItem<T>({item}: MenuItemProps<T>) {
       data-focused={states.isFocused || undefined}
       data-focus-visible={isFocusVisible || undefined}
       data-pressed={states.isPressed || undefined}
-      data-selected={states.isSelected || undefined}>
+      data-selected={states.isSelected || undefined}
+      data-selection-mode={state.selectionManager.selectionMode === 'none' ? undefined : state.selectionManager.selectionMode}>
       <Provider
         values={[
           [TextContext, {

packages/react-aria-components/src/Table.tsx

@@ -1081,7 +1081,8 @@ function TableRow<T>({item}: {item: GridNode<T>}) {
         data-focus-visible={isFocusVisible || undefined}
         data-pressed={states.isPressed || undefined}
         data-dragging={isDragging || undefined}
-        data-drop-target={dropIndicator?.isDropTarget || undefined}>
+        data-drop-target={dropIndicator?.isDropTarget || undefined}
+        data-selection-mode={state.selectionManager.selectionMode === 'none' ? undefined : state.selectionManager.selectionMode}>
         <Provider
           values={[
             [CheckboxContext, {

packages/react-aria-components/src/TagGroup.tsx

@@ -245,7 +245,8 @@ function TagItem({item}) {
       data-focused={states.isFocused || undefined}
       data-focus-visible={isFocusVisible || undefined}
       data-pressed={states.isPressed || undefined}
-      data-allows-removing={states.allowsRemoving || undefined}>
+      data-allows-removing={states.allowsRemoving || undefined}
+      data-selection-mode={state.selectionManager.selectionMode === 'none' ? undefined : state.selectionManager.selectionMode}>
       <div {...gridCellProps}>
         <Provider
           values={[

packages/react-aria-components/src/index.ts

@@ -74,7 +74,7 @@ export type {LabelProps} from './Label';
 export type {LinkProps} from './Link';
 export type {LinkRenderProps} from './Link';
 export type {ListBoxProps, ListBoxRenderProps} from './ListBox';
-export type {MenuItemRenderProps, MenuProps, MenuTriggerProps} from './Menu';
+export type {MenuProps, MenuTriggerProps} from './Menu';
 export type {MeterProps, MeterRenderProps} from './Meter';
 export type {ModalOverlayProps, ModalRenderProps} from './Modal';
 export type {NumberFieldProps, NumberFieldRenderProps} from './NumberField';