Selection checkbox should always toggle regardless of selectionBehavior (#6526)

Author: devongovett

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

@@ -31,7 +31,8 @@ export function useGridSelectionCheckbox<T, C extends GridCollection<T>>(props:
   let isDisabled = !state.selectionManager.canSelectItem(key);
   let isSelected = state.selectionManager.isSelected(key);
 
-  let onChange = () => manager.select(key);
+  // Checkbox should always toggle selection, regardless of selectionBehavior.
+  let onChange = () => manager.toggleSelection(key);
 
   const stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-aria/grid');
 

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

@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {Button, GridList, GridListItem, GridListItemProps} from 'react-aria-components';
+import {Button, Checkbox, CheckboxProps, GridList, GridListItem, GridListItemProps} from 'react-aria-components';
 import {classNames} from '@react-spectrum/utils';
 import React from 'react';
 import styles from '../example/index.css';
@@ -47,12 +47,17 @@ const MyGridListItem = (props: GridListItemProps) => {
   return (
     <GridListItem
       {...props}
-      style={{display: 'flex', alignItems: 'center', justifyContent: 'center'}}
+      style={{display: 'flex', alignItems: 'center', gap: 8}}
       className={({isFocused, isSelected, isHovered}) => classNames(styles, 'item', {
         focused: isFocused,
         selected: isSelected,
         hovered: isHovered
-      })} />
+      })}>
+      {({selectionMode}) => (<>
+        {selectionMode !== 'none' ? <MyCheckbox slot="selection" /> : null}
+        {props.children as any}
+      </>)}
+    </GridListItem>
   );
 };
 
@@ -68,6 +73,33 @@ GridListExample.story = {
     keyboardNavigationBehavior: {
       control: 'radio',
       options: ['arrow', 'tab']
+    },
+    selectionMode: {
+      control: 'radio',
+      options: ['none', 'single', 'multiple']
+    },
+    selectionBehavior: {
+      control: 'radio',
+      options: ['toggle', 'replace']
     }
   }
 };
+
+const MyCheckbox = ({children, ...props}: CheckboxProps) => {
+  return (
+    <Checkbox {...props}>
+      {({isIndeterminate}) => (
+        <>
+          <div className="checkbox">
+            <svg viewBox="0 0 18 18" aria-hidden="true">
+              {isIndeterminate
+                ? <rect x={1} y={7.5} width={15} height={3} />
+                : <polyline points="1 9 7 14 15 4" />}
+            </svg>
+          </div>
+          {children}
+        </>
+      )}
+    </Checkbox>
+  );
+};

packages/react-aria-components/test/GridList.test.js

@@ -334,6 +334,24 @@ describe('GridList', () => {
     expect(document.activeElement).toBe(document.body);
   });
 
+  it('should support selectionMode="replace" with checkboxes', async () => {
+    let {getAllByRole} = renderGridList({selectionMode: 'multiple', selectionBehavior: 'replace'});
+    let items = getAllByRole('row');
+
+    await user.click(items[0]);
+    await user.click(items[1]);
+    
+    expect(items[0]).toHaveAttribute('aria-selected', 'false');
+    expect(items[1]).toHaveAttribute('aria-selected', 'true');
+    expect(items[2]).toHaveAttribute('aria-selected', 'false');
+
+    await user.click(within(items[2]).getByRole('checkbox'));
+
+    expect(items[0]).toHaveAttribute('aria-selected', 'false');
+    expect(items[1]).toHaveAttribute('aria-selected', 'true');
+    expect(items[2]).toHaveAttribute('aria-selected', 'true');
+  });
+
   describe('drag and drop', () => {
     it('should support drag button slot', () => {
       let {getAllByRole} = render(<DraggableGridList />);