Function Example

packages/@adobe/react-spectrum/test/table/TableDnd.test.js:1079–1130

()

        it('should call onRootDrop when dropping on a empty table', async function () {
          function Example() {
            let columns = [
              {id: 'id', value: 'ID'},
              {id: 'name', value: 'Name'},
              {id: 'type', value: 'Type'}
            ];

            let list1 = useListData({
              initialItems: []
            });

            let list2 = useListData({
              initialItems: [
                {id: '7', type: 'folder', name: 'Pictures'},
                {id: '8', type: 'file', name: 'Adobe Fresco'},
                {id: '9', type: 'folder', name: 'Apps'},
                {id: '10', type: 'file', name: 'Adobe Illustrator'},
                {id: '11', type: 'file', name: 'Adobe Lightroom'},
                {id: '12', type: 'file', name: 'Adobe Dreamweaver'}
              ]
            });

            let {dragAndDropHooks: table1Hooks} = useDragAndDrop({
              ...mockUtilityOptions,
              acceptedDragTypes: 'all'
            });

            let {dragAndDropHooks: table2Hooks} = useDragAndDrop({
              getItems: keys =>
                [...keys].map(key => {
                  let item = list2.getItem(key);
                  return {
                    [`${item.type}`]: JSON.stringify(item),
                    'text/plain': JSON.stringify(item)
                  };
                })
            });

            return (
              <Flex wrap gap="size-300">
                <TableView
                  aria-label="Droppable TableView"
                  selectionMode="multiple"
                  width="size-3600"
                  height="size-3600"
                  dragAndDropHooks={table1Hooks}>
                  <TableHeader columns={columns}>
                    {column => (
                      <Column minWidth={100} isRowHeader={column.id === 'name'}>
                        {column.name}
                      </Column>
                    )}
                  </TableHeader>
                  <TableBody items={list1.items}>
                    {item => (