diff --git a/packages/clay-core/src/table/Body.tsx b/packages/clay-core/src/table/Body.tsx index 4315362f95..225a7cb27d 100644 --- a/packages/clay-core/src/table/Body.tsx +++ b/packages/clay-core/src/table/Body.tsx @@ -58,7 +58,10 @@ function* flatten>( _size: array.length, } as unknown as T; - if (Array.isArray(array[i]![nestedKey])) { + if ( + Array.isArray(array[i]![nestedKey]) && + array[i]![nestedKey].length > 0 + ) { delete item[nestedKey]; // @ts-ignore item._expandable = true; diff --git a/packages/clay-core/src/table/__tests__/IncrementalInteractions.tsx b/packages/clay-core/src/table/__tests__/IncrementalInteractions.tsx index 2592c9f631..a67c7c7470 100644 --- a/packages/clay-core/src/table/__tests__/IncrementalInteractions.tsx +++ b/packages/clay-core/src/table/__tests__/IncrementalInteractions.tsx @@ -37,6 +37,21 @@ const itemsTree = [ }, ]; +const emptyStateItems = [ + { + id: 1, + name: 'Foo', + type: 'PNG', + }, + {id: 2, name: 'Bar', type: 'Files'}, + { + children: [], + id: 3, + name: 'Baz', + type: 'Folder', + }, +]; + describe('Table incremental interactions', () => { afterEach(cleanup); @@ -479,6 +494,35 @@ describe('Table incremental interactions', () => { expect(thirdRow!.getAttribute('aria-expanded')).toBe('false'); }); + it('does not render left arrow button when child array is empty', () => { + const {queryByRole} = render( + + + {(column) => ( + {column.name} + )} + + + + {(row) => ( + + {(column) => ( + + {/** @ts-ignore */} + {row[column.id]} + + )} + + )} + +
+ ); + + const buttonRole = queryByRole('presentation'); + + expect(buttonRole).not.toBeInTheDocument(); + }); + it('pressing the left arrow key moves the focus to the row on the level above', () => { const {getAllByRole} = render(