fix: add Checkbox default slot to GridList and Table (#7188)

* Fix Checkbox default slot

* fix lint

Author: snowystinger

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

@@ -375,6 +375,7 @@ export const GridListItem = /*#__PURE__*/ createLeafComponent('item', function G
             values={[
               [CheckboxContext, {
                 slots: {
+                  [DEFAULT_SLOT]: {},
                   selection: checkboxProps
                 }
               }],

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

@@ -1118,6 +1118,7 @@ export const Row = /*#__PURE__*/ createBranchComponent(
             values={[
               [CheckboxContext, {
                 slots: {
+                  [DEFAULT_SLOT]: {},
                   selection: checkboxProps
                 }
               }],

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

@@ -14,11 +14,15 @@ import {act, fireEvent, mockClickDefault, pointerMap, render, within} from '@rea
 import {
   Button,
   Checkbox,
+  Dialog,
+  DialogTrigger,
   DropIndicator,
   GridList,
   GridListContext,
   GridListItem,
+  Label,
   UNSTABLE_ListLayout as ListLayout,
+  Modal,
   RouterProvider,
   Tag,
   TagGroup,
@@ -465,6 +469,29 @@ describe('GridList', () => {
     expect(document.activeElement).toBe(document.body);
   });
 
+  it('should not propagate the checkbox context from selection into other cells', async () => {
+    let tree = render(
+      <GridList aria-label="Test" selectionMode="multiple">
+        <GridListItem id="dialog" textValue="dialog">
+          <DialogTrigger>
+            <Button>Open</Button>
+            <Modal>
+              <Dialog>
+                <Checkbox><Label>Agree</Label></Checkbox>
+              </Dialog>
+            </Modal>
+          </DialogTrigger>
+        </GridListItem>
+        <GridListItem id="dog" textValue="Dog">Dog</GridListItem>
+        <GridListItem id="kangaroo">Kangaroo</GridListItem>
+      </GridList>
+    );
+
+    await user.click(tree.getByRole('button'));
+    let checkbox = tree.getByRole('checkbox');
+    expect(checkbox).toBeInTheDocument();
+  });
+
   describe('drag and drop', () => {
     it('should support drag button slot', () => {
       let {getAllByRole} = render(<DraggableGridList />);

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

@@ -11,7 +11,7 @@
  */
 
 import {act, fireEvent, installPointerEvent, mockClickDefault, pointerMap, render, triggerLongPress, within} from '@react-spectrum/test-utils-internal';
-import {Button, Cell, Checkbox, Collection, Column, ColumnResizer, DropIndicator, ResizableTableContainer, Row, Table, TableBody, TableHeader, UNSTABLE_TableLayout as TableLayout, useDragAndDrop, useTableOptions, UNSTABLE_Virtualizer as Virtualizer} from '../';
+import {Button, Cell, Checkbox, Collection, Column, ColumnResizer, Dialog, DialogTrigger, DropIndicator, Label, Modal, ResizableTableContainer, Row, Table, TableBody, TableHeader, UNSTABLE_TableLayout as TableLayout, useDragAndDrop, useTableOptions, UNSTABLE_Virtualizer as Virtualizer} from '../';
 import {composeStories} from '@storybook/react';
 import {DataTransfer, DragEvent} from '@react-aria/dnd/test/mocks';
 import React, {useMemo, useRef, useState} from 'react';
@@ -1798,4 +1798,37 @@ describe('Table', () => {
       }
     });
   });
+
+  describe('contexts', () => {
+    it('should not propagate the checkbox context from selection into other cells', async () => {
+      let tree = render(
+        <Table aria-label="Files" selectionMode="multiple">
+          <MyTableHeader>
+            <MyColumn id="name" isRowHeader>Name</MyColumn>
+            <MyColumn>Type</MyColumn>
+            <MyColumn>Date Modified</MyColumn>
+          </MyTableHeader>
+          <TableBody>
+            <MyRow id="1" textValue="Games">
+              <Cell>Games</Cell>
+              <Cell>File folder</Cell>
+              <Cell>
+                <DialogTrigger>
+                  <Button>Open</Button>
+                  <Modal>
+                    <Dialog>
+                      <Checkbox><Label>Agree</Label></Checkbox>
+                    </Dialog>
+                  </Modal>
+                </DialogTrigger>
+              </Cell>
+            </MyRow>
+          </TableBody>
+        </Table>
+      );
+      await user.click(tree.getByRole('button'));
+      let checkbox = tree.getByRole('checkbox');
+      expect(checkbox).toBeInTheDocument();
+    });
+  });
 });