feat(structure): Sheet View columns (#6661)

* feat(structure): Rendering sheet list layout option in test-studio * feat(structure): branching the rendering of different document list panes * feat(structure): renaming of generic pane components * feat(structure): fixing typing for new sheetList * fix(studio): adding tooltip to read-only bool inputs (#6580) * fix(studio): adding tooltip to read-only bool inputs * fix(studio): testing for tooltip on boolean read-only inputs * fix(studio): removing memoisation as it was useless * chore(deps): dedupe pnpm-lock.yaml (#6607) Co-authored-by: juice49 <[email protected]> * feat: add canHandleIntent to Structure Builder component (#6516) * feat: add canHandleIntent to S.component * fix: properly type canHandleIntent * Update packages/sanity/src/structure/structureBuilder/Component.ts Co-authored-by: Ash <[email protected]> --------- Co-authored-by: Ash <[email protected]> * {wip} saved 2024-05-8 16:18 * fix(structure): use case insensitive search for inspect dialog (#6588) * test(core): await publish action to prevent test flakiness (#6609) * fix(deps): update dependency get-it to ^8.4.29 (#6603) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * fix(deps): update dependency @sanity/client to ^6.18.0 (#6604) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * feat(vision): add "save result as json/csv" buttons (#6158) * feat(vision): add download as json/csv buttons * fix(vision): use blob urls for downloads (#6213) * fix(vision): use Translate component to avoid splitting i18n strings * fix(vision): clean up i18n resources for result saving feature --------- Co-authored-by: Espen Hovlandsdal <[email protected]> * fix(core/form): prevent onFocus for root object paths being called by editing form (#6610) This will prevent any input calling element.onFocus() on any opened block or inline-object inside the PT-input, as that will close the editing modal for them (through DocumentPaneProvider) * feat(core): add useEditStateList hook * feat(sheet-list): add table view * feat(structure): rendering columns in sheet list * Merge branch 'edx-1284' into EDX-1308 * feat(core, structure) sheet list menu option (#6593) * feat(structure): Rendering sheet list layout option in test-studio * feat(structure): branching the rendering of different document list panes * feat(structure): renaming of generic pane components * feat(structure): fixing typing for new sheetList * feat(structure): resolving a default export to named * feat(structure): testing sheet view pane display logcic * fix(structure): resolving testing for useStructureTool * test(core, desk): add tests for keyvalue storage (#6587) * test(core): add tests for document list sort and display * test(structure): add test for inspect dialog * test(core): add tests for saved searches * v3.41.0 * test(core): fixes flaky test with document publish (#6595) * test(core): fixes flaky test with document publish * test(core): use more realistic fix for flaky test * chore(deps): update linters (#6590) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * chore(deps): update dependency styled-components to ^6.1.10 (#6585) * chore(deps): update dependency styled-components to ^6.1.10 * chore: update test snapshot --------- Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Cody Olsen <[email protected]> * chore(lockfile): update dependency zod to v3.23.7 (#6527) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * chore(deps): update dependency @sanity/pkg-utils to v6.8.13 (#6599) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * chore(deps): update dependency @sanity/tsdoc to v1.0.51 (#6600) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * chore(lockfile): update dependency @sanity/react-loader to v1.9.17 (#6584) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * fix(presentation): regression causing a crash when in an embedded studio (#6606) * v3.41.1 * fix(studio): adding tooltip to read-only bool inputs (#6580) * fix(studio): adding tooltip to read-only bool inputs * fix(studio): testing for tooltip on boolean read-only inputs * fix(studio): removing memoisation as it was useless * chore(deps): dedupe pnpm-lock.yaml (#6607) Co-authored-by: juice49 <[email protected]> * feat: add canHandleIntent to Structure Builder component (#6516) * feat: add canHandleIntent to S.component * fix: properly type canHandleIntent * Update packages/sanity/src/structure/structureBuilder/Component.ts Co-authored-by: Ash <[email protected]> --------- Co-authored-by: Ash <[email protected]> * fix(structure): use case insensitive search for inspect dialog (#6588) * test(core): await publish action to prevent test flakiness (#6609) * fix(deps): update dependency get-it to ^8.4.29 (#6603) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * fix(deps): update dependency @sanity/client to ^6.18.0 (#6604) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * feat(vision): add "save result as json/csv" buttons (#6158) * feat(vision): add download as json/csv buttons * fix(vision): use blob urls for downloads (#6213) * fix(vision): use Translate component to avoid splitting i18n strings * fix(vision): clean up i18n resources for result saving feature --------- Co-authored-by: Espen Hovlandsdal <[email protected]> * fix(core/form): prevent onFocus for root object paths being called by editing form (#6610) This will prevent any input calling element.onFocus() on any opened block or inline-object inside the PT-input, as that will close the editing modal for them (through DocumentPaneProvider) * feat(core, structure) sheet list menu option (#6593) * feat(structure): Rendering sheet list layout option in test-studio * feat(structure): branching the rendering of different document list panes * feat(structure): renaming of generic pane components * feat(structure): fixing typing for new sheetList * feat(structure): resolving a default export to named * feat(structure): testing sheet view pane display logcic * fix(structure): resolving testing for useStructureTool * v3.41.0 * chore(lockfile): update dependency zod to v3.23.7 (#6527) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * chore(deps): update dependency @sanity/pkg-utils to v6.8.13 (#6599) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * chore(deps): update dependency @sanity/tsdoc to v1.0.51 (#6600) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * fix(presentation): regression causing a crash when in an embedded studio (#6606) * v3.41.1 * fix(deps): update dependency @sanity/client to ^6.18.0 (#6604) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * feat(core, structure) sheet list menu option (#6593) * feat(structure): Rendering sheet list layout option in test-studio * feat(structure): branching the rendering of different document list panes * feat(structure): renaming of generic pane components * feat(structure): fixing typing for new sheetList * feat(structure): resolving a default export to named * feat(structure): testing sheet view pane display logcic * fix(structure): resolving testing for useStructureTool * chore(lockfile): update dependency zod to v3.23.7 (#6527) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * chore(deps): update dependency @sanity/pkg-utils to v6.8.13 (#6599) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * chore(deps): update dependency @sanity/tsdoc to v1.0.51 (#6600) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * feat(sheet-list): add paginated sheet list view * feat(structure): control column visibility in sheet list * feat(structure): control column visibility in sheet list * feat(structure): control column visibility in sheet list * feat(structure): row selection * chore(bundle): remove unnecessary bundles and make root imports index (#6616) * chore(bundle): remove unnecessary bundles and make root imports index * chore: remove unnecessary depcheck updates * feat(pte): add `hideToolbar` and `fullscreen` props to `PortableTextInput` (#6621) * feat(form/inputs): add prop to hide the toolbar in PT-input * feat(form/inputs): control PT-input fullscreen from props * chore(test-studio): add example document type with custom block editor variants * refactor: rename `fullscreen` to `initialFullscreen` * refactor: don't unnecessarily alias `initialFullscreen` prop --------- Co-authored-by: Per-Kristian Nordnes <[email protected]> * fix(pte): don't render the PTE block extras container when not in use, disable pointer events on highlights (#6620) * fix(pte): don't unnecessarily render PTE block actions container * fix: remove pointer-events from validation + change highlight blocks * chore(lockfile): update dependency @sanity/assist to v3.0.4 (#6601) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * skip recalling invokePrepare (#6608) * feat(structure): only showing the column select for hideable columns * fix(core): update test snapshots (#6629) * fix(e2e): support headless/headful env var toggle (#6558) * fix(deps): update dependency @sanity/presentation to v1.15.2 (#6632) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * feat(structure): booleans render as selects * feat: add icon to BlockStyleDefinition (#6613) * feat(pte): initial support for `renderEditable` in portable text inputs (#6627) * feat(form/inputs): support rendering PTE Editable through PortableTextInput * fix(form/inputs): render with props, but without defaultRender defaultRender is not part of the PortableTextEditor's Editable props * refactor: rename useSpellcheck hook for consistency * refactor: prefer importing react MutableRefObject type directly * chore(test-studio): update custom block editor schema * chore: mark renderEditable as hidden and in beta --------- Co-authored-by: Per-Kristian Nordnes <[email protected]> * chore(ci): add a circleci config to bundle packages (#6446) * chore(ci): add a circleci config to bundle packages * fix: store escaped package names in the manifest * chore: run job only on current * chore(lockfile): update dependency esbuild to v0.21.2 (#6602) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * feat(structure): add virtualised documentSheetList and sheetListStore * feat(core): add useEditStateList hook * feat(sheet-list): add table view * feat(sheet-list): add paginated sheet list view * feat(structure): clean files and implement paginated sheet list with filter * fix(core): remove useEditStateList hook * chore(core): refactor search elements for export and reusability * feat(structure): adding columns control back in * fix(structure): update documentSheetList test * chore(structure): rename useDocumentSheetListStore properties * feat(structure): refactor for cols control * feat(structure): always require 1 column visible * feat(structure): testing for Columns Control * feat(structure): spreadsheet styling on sheetlistcell * fix(deps): Update dev-non-major (#6659) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * fix(scheduled-publishing): don't include it if it's the only plugin available (#6530) * fix(scheduled-publishing): don't include the tool if it's the plugin available * chore(core): add tests for resolve default plugins * feat(structure): add virtualised documentSheetList and sheetListStore * feat(core): add useEditStateList hook * feat(sheet-list): add table view * feat(sheet-list): add paginated sheet list view * feat(structure): clean files and implement paginated sheet list with filter * fix(core): remove useEditStateList hook * chore(core): refactor search elements for export and reusability * fix(structure): update documentSheetList test * chore(structure): rename useDocumentSheetListStore properties * chore(structure): rename documentSheet* to documentSheetList* * Merge branch 'edx-1284' into EDX-1308 * Merge branch 'edx-1284' into EDX-1308 * Merge branch 'edx-1284' into EDX-1308 * feat(structure): removing changes to book schema * fix(structure): remove useEffect and set table columns as initial state (#6712) * fix(structure): remove useEffect and set table columns as initial state * fix(structure): use resetColumnVisibility() helper * feat(structure): testing for useDocumentSheetColumns with initial cols * feat(structure): PR comments to improve types and remove WIP * feat(structure): fixing broken test for init col visibilities --------- Co-authored-by: ecospark[bot] <128108030+ecospark[bot]@users.noreply.github.com> Co-authored-by: juice49 <[email protected]> Co-authored-by: Carolina Gonzalez <[email protected]> Co-authored-by: Ash <[email protected]> Co-authored-by: Pedro Bonamin <[email protected]> Co-authored-by: Espen Hovlandsdal <[email protected]> Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Rostislav Melkumyan <[email protected]> Co-authored-by: Per-Kristian Nordnes <[email protected]> Co-authored-by: Binoy Patel <[email protected]> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Cody Olsen <[email protected]> Co-authored-by: Cody Olsen <[email protected]> Co-authored-by: Robin Pyon <[email protected]> Co-authored-by: Evensix <[email protected]> Co-authored-by: Bjørge Næss <[email protected]> Co-authored-by: Pedro Bonamin <[email protected]>
sanity-io · May 20, 2024 · d8a37a8 · d8a37a8
1 parent d66def2
commit d8a37a8
Show file tree

Hide file tree

Showing 6 changed files with 413 additions and 74 deletions.
diff --git a/packages/sanity/src/structure/panes/documentList/ColumnsControl.tsx b/packages/sanity/src/structure/panes/documentList/ColumnsControl.tsx
@@ -0,0 +1,81 @@
+/* eslint-disable @sanity/i18n/no-attribute-string-literals */
+/* eslint-disable i18next/no-literal-string */
+import {Box, Button, Card, Checkbox, Flex, Menu, MenuButton, Stack, Text} from '@sanity/ui'
+import {type Column, type Table} from '@tanstack/react-table'
+import {useCallback} from 'react'
+import {type SanityDocument} from 'sanity'
+
+import {VISIBLE_COLUMN_LIMIT} from './useDocumentSheetColumns'
+
+type ColumnsControlProps = {
+  table: Table<SanityDocument>
+}
+
+export function ColumnsControl({table}: ColumnsControlProps) {
+  const isVisibleLimitReached =
+    table.getVisibleLeafColumns().filter((col) => col.getCanHide()).length >= VISIBLE_COLUMN_LIMIT
+
+  const setInitialColumns = useCallback(() => {
+    table.resetColumnVisibility()
+  }, [table])
+
+  const handleColumnOnChange = (column: Column<SanityDocument, unknown>) => () => {
+    column.toggleVisibility()
+  }
+
+  const getColumnVisibilityDisabled = (column: Column<SanityDocument, unknown>) => {
+    const isColumnVisible = column.getIsVisible()
+    const isSingleColumnVisible =
+      table.getVisibleLeafColumns().filter((col) => col.getCanHide()).length === 1
+
+    return (isVisibleLimitReached && !isColumnVisible) || (isSingleColumnVisible && isColumnVisible)
+  }
+
+  return (
+    <MenuButton
+      button={<Button text="Columns" />}
+      id="columns-control"
+      menu={
+        <Menu padding={3} paddingBottom={1} style={{maxHeight: 300, overflow: 'scroll'}}>
+          <Button size={0} text="Reset" onClick={setInitialColumns} />
+          <Stack>
+            {table
+              .getAllLeafColumns()
+              .filter((column) => column.getCanHide())
+              .map((column) => (
+                <Flex key={column.id} marginY={2} align="center">
+                  <Checkbox
+                    readOnly={getColumnVisibilityDisabled(column)}
+                    checked={column.getIsVisible()}
+                    onChange={handleColumnOnChange(column)}
+                    id={`col-visibility-${column.id}`}
+                    style={{display: 'block'}}
+                  />
+                  <Box flex={1} paddingLeft={3}>
+                    <Text size={1}>
+                      <label htmlFor={`col-visibility-${column.id}`}>
+                        {column.columnDef.header?.toString()}
+                      </label>
+                    </Text>
+                  </Box>
+                </Flex>
+              ))}
+            {isVisibleLimitReached && (
+              <Card
+                padding={2}
+                style={{position: 'sticky', bottom: 0}}
+                radius={2}
+                shadow={1}
+                tone="caution"
+              >
+                <Text size={1}>You may only have {VISIBLE_COLUMN_LIMIT} columns visible</Text>
+              </Card>
+            )}
+          </Stack>
+        </Menu>
+      }
+      placement="bottom"
+      popover={{portal: true}}
+    />
+  )
+}
diff --git a/packages/sanity/src/structure/panes/documentList/DocumentSheetListPane.tsx b/packages/sanity/src/structure/panes/documentList/DocumentSheetListPane.tsx
@@ -1,4 +1,4 @@
-import {type SanityDocument, type SchemaType} from '@sanity/types'
+import {isDocumentSchemaType, type ObjectSchemaType, type SanityDocument} from '@sanity/types'
 import {Box, Flex, Text} from '@sanity/ui'
 import {
   flexRender,
@@ -13,6 +13,7 @@ import {SearchProvider, useSchema, useSearchState} from 'sanity'
 import {styled} from 'styled-components'
 
 import {type BaseStructureToolPaneProps} from '../types'
+import {ColumnsControl} from './ColumnsControl'
 import {DocumentSheetListFilter} from './DocumentSheetListFilter'
 import {DocumentSheetListPaginator} from './DocumentSheetListPaginator'
 import {useDocumentSheetColumns} from './useDocumentSheetColumns'
@@ -46,6 +47,7 @@ const Table = styled.table`
   tr {
     border-bottom: 1px solid lightgray;
     display: flex;
+    padding: 0;
   }
   tr:last-child {
     border-bottom: none;
@@ -58,17 +60,17 @@ const Table = styled.table`
   }
 
   td {
-    padding: 0 3px;
+    padding: 0;
   }
 `
 
 function DocumentSheetListPaneInner({
-  schemaType,
-}: DocumentSheetListPaneProps & {schemaType: SchemaType}) {
+  documentSchemaType,
+}: DocumentSheetListPaneProps & {documentSchemaType: ObjectSchemaType}) {
   const {dispatch, state} = useSearchState()
-  const columns = useDocumentSheetColumns(schemaType)
+  const {columns, initialColumnsVisibility} = useDocumentSheetColumns(documentSchemaType)
   const {data} = useDocumentSheetList({
-    typeName: schemaType.name,
+    typeName: documentSchemaType.name,
   })
 
   const totalRows = state.result.hits.length
@@ -82,17 +84,18 @@ function DocumentSheetListPaneInner({
     autoResetPageIndex: false,
     initialState: {
       pagination: {pageSize: 25},
+      columnVisibility: initialColumnsVisibility,
     },
   })
 
   const {rows} = table.getRowModel()
 
   useEffect(() => {
-    dispatch({type: 'TERMS_TYPE_ADD', schemaType: schemaType})
+    dispatch({type: 'TERMS_TYPE_ADD', schemaType: documentSchemaType})
     return () => {
-      dispatch({type: 'TERMS_TYPE_REMOVE', schemaType: schemaType})
+      dispatch({type: 'TERMS_TYPE_REMOVE', schemaType: documentSchemaType})
     }
-  }, [schemaType, dispatch])
+  }, [documentSchemaType, dispatch])
 
   const renderRow = useCallback((row: Row<SanityDocument>) => {
     return (
@@ -130,6 +133,7 @@ function DocumentSheetListPaneInner({
         </Text>
       </Flex>
       <TableContainer>
+        <ColumnsControl table={table} />
         <Table>
           <thead>
             {table.getHeaderGroups().map((headerGroup) => (
@@ -164,12 +168,12 @@ export function DocumentSheetListPane(props: DocumentSheetListPaneProps) {
   const typeName = props.pane.schemaTypeName
 
   const schemaType = schema.get(typeName)
-  if (!schemaType) {
-    throw new Error(`Schema type "${typeName}" not found`)
+  if (!schemaType || !isDocumentSchemaType(schemaType)) {
+    throw new Error(`Schema type "${typeName}" not found or not a document schema`)
   }
   return (
     <SearchProvider>
-      <DocumentSheetListPaneInner {...props} schemaType={schemaType} />
+      <DocumentSheetListPaneInner {...props} documentSchemaType={schemaType} />
     </SearchProvider>
   )
 }
diff --git a/packages/sanity/src/structure/panes/documentList/SheetListCell.tsx b/packages/sanity/src/structure/panes/documentList/SheetListCell.tsx
@@ -0,0 +1,52 @@
+/* eslint-disable i18next/no-literal-string */
+import {type ObjectFieldType} from '@sanity/types'
+import {Select, TextInput} from '@sanity/ui'
+import {type CellContext} from '@tanstack/react-table'
+import {type FormEvent, useCallback, useEffect, useState} from 'react'
+import {type SanityDocument} from 'sanity'
+
+interface SheetListCellProps extends CellContext<SanityDocument, unknown> {
+  fieldType: ObjectFieldType
+}
+
+export function SheetListCell(props: SheetListCellProps) {
+  const {getValue, column, row, fieldType} = props
+  const initialValue = getValue() || ''
+  // We need to keep and update the state of the cell normally
+  const [value, setValue] = useState(initialValue)
+
+  const handleOnChange = useCallback((e: FormEvent<HTMLInputElement>) => {
+    setValue(e.currentTarget.value)
+  }, [])
+
+  useEffect(() => {
+    setValue(initialValue || '')
+  }, [initialValue])
+
+  if (fieldType.name === 'boolean') {
+    return (
+      <Select
+        radius={0}
+        style={{
+          boxShadow: 'none',
+        }}
+        value={JSON.stringify(value)}
+        onChange={() => null}
+      >
+        <option value="True">True</option>
+        <option value="False">False</option>
+      </Select>
+    )
+  }
+
+  return (
+    <TextInput
+      size={0}
+      id={`cell-${column.id}-${row.id}`}
+      radius={0}
+      border={false}
+      onChange={handleOnChange}
+      value={typeof value === 'string' || typeof value === 'number' ? value : JSON.stringify(value)}
+    />
+  )
+}
diff --git a/packages/sanity/src/structure/panes/documentList/__tests__/ColumnsControl.test.tsx b/packages/sanity/src/structure/panes/documentList/__tests__/ColumnsControl.test.tsx
@@ -0,0 +1,99 @@
+import {afterEach} from 'node:test'
+
+import {beforeEach, describe, expect, it, jest} from '@jest/globals'
+import {studioTheme, ThemeProvider} from '@sanity/ui'
+import {useReactTable} from '@tanstack/react-table'
+import {fireEvent, render, screen} from '@testing-library/react'
+import {type SanityDocument} from 'sanity'
+
+import {ColumnsControl} from '../ColumnsControl'
+
+const TableHarness = ({columns}) => {
+  const initialVisibilityState = {
+    'First Column': true,
+    'Second Column': true,
+    'Third Column': true,
+    'Nested First Column': true,
+    'Nested Second Column': true,
+    'Fifth Column': true,
+    'Sixth Column': false,
+  }
+  const table = useReactTable<SanityDocument>({
+    columns,
+    data: [],
+    getCoreRowModel: () => {
+      throw new Error('getCoreRowModel not implemented.')
+    },
+    initialState: {
+      columnVisibility: initialVisibilityState,
+    },
+  })
+
+  return <ColumnsControl table={table} />
+}
+
+describe('ColumnsControl', () => {
+  beforeEach(() => {
+    render(
+      <ThemeProvider theme={studioTheme}>
+        <TableHarness
+          columns={[
+            {header: 'First Column', enableHiding: true},
+            {header: 'Second Column', enableHiding: true},
+            {header: 'Third Column', enableHiding: false},
+            {
+              header: 'Fourth Column',
+              enableHiding: true,
+              columns: [
+                {header: 'Nested First Column', enableHiding: true},
+                {header: 'Nested Second Column', enableHiding: true},
+              ],
+            },
+            {header: 'Fifth Column', enableHiding: true},
+            {header: 'Sixth Column', enableHiding: true},
+          ]}
+        />
+      </ThemeProvider>,
+    )
+  })
+
+  afterEach(() => {
+    jest.clearAllMocks()
+  })
+
+  it('should set default column visibilities', () => {
+    fireEvent.click(screen.getByText('Columns'))
+    expect(screen.getByRole('checkbox', {name: 'First Column'})).toBeChecked()
+    expect(screen.getByRole('checkbox', {name: 'Nested First Column'})).toBeChecked()
+    expect(screen.getByRole('checkbox', {name: 'Sixth Column'})).not.toBeChecked()
+  })
+
+  it('should not allow unhideable columns to be hidden', () => {
+    fireEvent.click(screen.getByText('Columns'))
+    expect(screen.queryByRole('checkbox', {name: 'Third Column'})).toBeNull()
+  })
+
+  it('should toggle column visibility', () => {
+    fireEvent.click(screen.getByText('Columns'))
+    fireEvent.click(screen.getByRole('checkbox', {name: 'First Column'}))
+    expect(screen.getByRole('checkbox', {name: 'First Column'})).not.toBeChecked()
+  })
+
+  it('should not allow more than 5 columns to be visible', () => {
+    fireEvent.click(screen.getByText('Columns'))
+
+    expect(screen.getByRole('checkbox', {name: 'Sixth Column'})).toBeDisabled()
+    screen.getByText('You may only have 5 columns visible')
+  })
+
+  it('should not allow the last visible column to be hidden', () => {
+    fireEvent.click(screen.getByText('Columns'))
+
+    fireEvent.click(screen.getByRole('checkbox', {name: 'First Column'}))
+    fireEvent.click(screen.getByRole('checkbox', {name: 'Second Column'}))
+    fireEvent.click(screen.getByRole('checkbox', {name: 'Nested Second Column'}))
+    fireEvent.click(screen.getByRole('checkbox', {name: 'Nested First Column'}))
+
+    expect(screen.getByRole('checkbox', {name: 'Fifth Column'})).toBeDisabled()
+  })
+})
diff --git a/packages/sanity/src/structure/panes/documentList/__tests__/useDocumentSheetColumns.test.ts b/packages/sanity/src/structure/panes/documentList/__tests__/useDocumentSheetColumns.test.ts
@@ -0,0 +1,52 @@
+import {describe, expect, it, jest} from '@jest/globals'
+import {renderHook} from '@testing-library/react'
+
+import {useDocumentSheetColumns} from '../useDocumentSheetColumns'
+
+jest.mock('sanity', () => ({
+  ...(jest.requireActual('sanity') || {}),
+  useDocumentPreviewStore: jest.fn().mockReturnValue({}),
+}))
+
+describe('useDocumentSheetColumns', () => {
+  it('returns initial column visibilities', () => {
+    const mockSchemaType = {
+      name: 'author',
+      title: 'Author',
+      type: 'document',
+      fields: [
+        {name: 'name', type: {name: 'string'}},
+        {name: 'nickname', type: {name: 'string'}},
+        {name: 'email', type: {name: 'string'}},
+        {name: 'age', type: {name: 'number'}},
+        {
+          name: 'address',
+          type: {
+            name: 'object',
+            jsonType: 'object',
+            fields: [
+              {name: 'street', type: {name: 'string'}},
+              {name: 'country', type: {name: 'string'}},
+            ],
+          },
+        },
+        {name: 'phone number', type: {name: 'number'}},
+        {name: 'has pet', type: {name: 'boolean'}},
+      ],
+    }
+
+    const {result} = renderHook(() => useDocumentSheetColumns(mockSchemaType))
+    expect(result.current.initialColumnsVisibility).toEqual({
+      'Preview': true,
+      'selected': true,
+      'name': true,
+      'nickname': true,
+      'email': true,
+      'age': true,
+      'address.street': true,
+      'address.country': false,
+      'phone number': false,
+      'has pet': false,
+    })
+  })
+})