tmp

packages/sanity/src/_singletons/core/form/studio/TreeEditingEnabledContext.ts

@@ -1,6 +1,6 @@
 import {createContext} from 'react'
 
-import type {TreeEditingEnabledContextValue} from '../../../../core/form/studio/tree-editing/context/enabled/useTreeEditingEnabled'
+import type {TreeEditingEnabledContextValue} from '../../../../core/form/studio/array-editing/context/enabled/useTreeEditingEnabled'
 
 /**
  * @internal

packages/sanity/src/core/form/inputs/PortableText/Compositor.tsx

@@ -16,7 +16,7 @@ import {type ReactNode, useCallback, useMemo, useState} from 'react'
 import {ChangeIndicator} from '../../../changeIndicators'
 import {EMPTY_ARRAY} from '../../../util'
 import {ActivateOnFocus} from '../../components/ActivateOnFocus/ActivateOnFocus'
-import {TreeEditingEnabledProvider} from '../../studio/tree-editing'
+import {TreeEditingEnabledProvider} from '../../studio/array-editing'
 import {
   type ArrayOfObjectsInputProps,
   type PortableTextInputProps,

packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/Grid/GridItem.tsx

@@ -16,9 +16,9 @@ import {FormFieldValidationStatus} from '../../../../components'
 import {EditPortal} from '../../../../components/EditPortal'
 import {useDidUpdate} from '../../../../hooks/useDidUpdate'
 import {useScrollIntoViewOnFocusWithin} from '../../../../hooks/useScrollIntoViewOnFocusWithin'
+import {TreeEditingEnabledProvider, useTreeEditingEnabled} from '../../../../studio/array-editing'
 import {useChildPresence} from '../../../../studio/contexts/Presence'
 import {useChildValidation} from '../../../../studio/contexts/Validation'
-import {TreeEditingEnabledProvider, useTreeEditingEnabled} from '../../../../studio/tree-editing'
 import {type ObjectItem, type ObjectItemProps} from '../../../../types'
 import {randomKey} from '../../../../utils/randomKey'
 import {CellLayout} from '../../layouts/CellLayout'

packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/List/PreviewItem.tsx

@@ -15,9 +15,9 @@ import {FormFieldValidationStatus} from '../../../../components'
 import {EditPortal} from '../../../../components/EditPortal'
 import {useDidUpdate} from '../../../../hooks/useDidUpdate'
 import {useScrollIntoViewOnFocusWithin} from '../../../../hooks/useScrollIntoViewOnFocusWithin'
+import {TreeEditingEnabledProvider, useTreeEditingEnabled} from '../../../../studio/array-editing'
 import {useChildPresence} from '../../../../studio/contexts/Presence'
 import {useChildValidation} from '../../../../studio/contexts/Validation'
-import {TreeEditingEnabledProvider, useTreeEditingEnabled} from '../../../../studio/tree-editing'
 import {type ObjectItem, type ObjectItemProps} from '../../../../types'
 import {randomKey} from '../../../../utils/randomKey'
 import {RowLayout} from '../../layouts/RowLayout'

packages/sanity/src/core/form/studio/FormBuilder.test.tsx

@@ -12,8 +12,8 @@ import {EMPTY_ARRAY} from '../../util'
 import {createPatchChannel} from '../patch'
 import {useFormState} from '../store/useFormState'
 import {type FormDocumentValue} from '../types'
+import {useTreeEditingEnabled} from './array-editing'
 import {FormBuilder, type FormBuilderProps} from './FormBuilder'
-import {useTreeEditingEnabled} from './tree-editing'
 
 const schemaTypes = [
   defineType({

packages/sanity/src/core/form/studio/FormBuilder.tsx

@@ -29,15 +29,15 @@ import {
   type ObjectInputProps,
   type RenderPreviewCallbackProps,
 } from '../types'
-import {DocumentFieldActionsProvider} from './contexts/DocumentFieldActions'
-import {FormBuilderInputErrorBoundary} from './FormBuilderInputErrorBoundary'
-import {FormProvider} from './FormProvider'
 import {
+  ArrayEditingDialog,
   shouldArrayDialogOpen,
-  TreeEditingDialog,
   TreeEditingEnabledProvider,
   useTreeEditingEnabled,
-} from './tree-editing'
+} from './array-editing'
+import {DocumentFieldActionsProvider} from './contexts/DocumentFieldActions'
+import {FormBuilderInputErrorBoundary} from './FormBuilderInputErrorBoundary'
+import {FormProvider} from './FormProvider'
 
 /**
  * @alpha
@@ -316,7 +316,7 @@ function RootInput(props: RootInputProps) {
   const isRoot = rootInputProps.id === 'root'
 
   const arrayEditingModal = treeEditing.enabled && isRoot && open && (
-    <TreeEditingDialog
+    <ArrayEditingDialog
       // eslint-disable-next-line react/jsx-handler-names
       onPathFocus={rootInputProps.onPathFocus}
       onPathOpen={onPathOpen}

packages/sanity/src/core/form/studio/tree-editing/__tests__/buildTreeEditingState.test.ts → packages/sanity/src/core/form/studio/array-editing/__tests__/buildTreeEditingState.test.ts

@@ -2,7 +2,7 @@ import {describe, expect, test} from '@jest/globals'
 import {Schema} from '@sanity/schema'
 import {type SanityDocumentLike} from '@sanity/types'
 
-import {buildTreeEditingState} from '../utils'
+import {buildArrayEditingState} from '../utils'
 
 const schema = Schema.compile({
   name: 'default',
@@ -180,7 +180,7 @@ const schema = Schema.compile({
   ],
 })
 
-describe('tree-editing: buildTreeEditingState', () => {
+describe('tree-editing: buildArrayEditingState', () => {
   test('should build tree editing state for an array of objects', () => {
     // implement
 
@@ -205,7 +205,7 @@ describe('tree-editing: buildTreeEditingState', () => {
       ],
     }
 
-    const result = buildTreeEditingState({
+    const result = buildArrayEditingState({
       documentValue,
       openPath: ['array1', {_key: '123'}],
       schemaType: schema.get('testDocument'),
@@ -230,15 +230,15 @@ describe('tree-editing: buildTreeEditingState', () => {
       },
     }
     // Path to the array item
-    const result1 = buildTreeEditingState({
+    const result1 = buildArrayEditingState({
       documentValue,
       openPath: ['objectWithArray', 'myArray', {_key: 'key1'}],
       schemaType: schema.get('testDocument'),
     })
 
     // Path to a primitive field in the array item object should
     // result in the same state as the array item itself
-    const result2 = buildTreeEditingState({
+    const result2 = buildArrayEditingState({
       documentValue,
       openPath: ['objectWithArray', 'myArray', {_key: 'key1'}, 'myString'],
       schemaType: schema.get('testDocument'),
@@ -267,7 +267,7 @@ describe('tree-editing: buildTreeEditingState', () => {
       ],
     }
 
-    const result = buildTreeEditingState({
+    const result = buildArrayEditingState({
       documentValue,
       openPath: ['mixedArray', {_key: 'key1'}],
       schemaType: schema.get('testDocument'),
@@ -290,7 +290,7 @@ describe('tree-editing: buildTreeEditingState', () => {
       ],
     }
 
-    const result = buildTreeEditingState({
+    const result = buildArrayEditingState({
       documentValue,
       openPath: ['legacyArrayEditingArray', {_key: '123'}],
       schemaType: schema.get('testDocument'),
@@ -327,7 +327,7 @@ describe('tree-editing: buildTreeEditingState', () => {
       ],
     }
 
-    const result = buildTreeEditingState({
+    const result = buildArrayEditingState({
       documentValue,
       openPath: [
         'arrayWithArrayFieldInNestedObjects',

packages/sanity/src/core/form/studio/tree-editing/__workshop__/TreeEditingBreadcrumbsMenuButtonStory.tsx → packages/sanity/src/core/form/studio/array-editing/__workshop__/ArrayEditingBreadcrumbsMenuButtonStory.tsx

@@ -3,8 +3,8 @@ import {Flex} from '@sanity/ui'
 import {useState} from 'react'
 import {type Path} from 'sanity'
 
-import {TreeEditingBreadcrumbsMenuButton} from '../components'
-import {type TreeEditingBreadcrumb} from '../types'
+import {ArrayEditingBreadcrumbsMenuButton} from '../components'
+import {type ArrayEditingBreadcrumb} from '../types'
 
 const schema = Schema.compile({
   name: 'default',
@@ -31,33 +31,23 @@ const schema = Schema.compile({
   ],
 })
 
-const ITEM: TreeEditingBreadcrumb = {
+const ITEM: ArrayEditingBreadcrumb = {
   path: ['first-item'],
   schemaType: schema.get('testDocument').fields[0].type,
   value: {_key: 'first-item', title: `${0}-item`},
-  parentSchemaType: schema.get('testDocument'),
-  children: [...Array(100).keys()].map((index) => ({
-    path: [`${index}-item`],
-    schemaType: schema.get('testDocument').fields[0].type,
-    parentSchemaType: schema.get('testDocument'),
-    value: {
-      _key: `${index}-item`,
-      title: `${index}-item`,
-    },
-  })),
 }
 
 export default function TreeEditingBreadcrumbsMenuButtonStory(): JSX.Element {
   const [selectedPath, setSelectedPath] = useState<Path>(['first-item'])
 
   return (
     <Flex align="center" justify="center" height="fill">
-      <TreeEditingBreadcrumbsMenuButton
+      <ArrayEditingBreadcrumbsMenuButton
         button={<button type="button">Click me</button>}
-        items={ITEM.children || []}
         onPathSelect={setSelectedPath}
         parentElement={document.body}
         selectedPath={selectedPath}
+        items={[ITEM]}
       />
     </Flex>
   )

packages/sanity/src/core/form/studio/tree-editing/__workshop__/TreeEditingBreadcrumbsMenuStory.tsx → packages/sanity/src/core/form/studio/array-editing/__workshop__/ArrayEditingBreadcrumbsMenuStory.tsx

@@ -3,8 +3,8 @@ import {Container, Flex} from '@sanity/ui'
 import {useState} from 'react'
 import {type Path} from 'sanity'
 
-import {TreeEditingBreadcrumbsMenu} from '../components'
-import {type TreeEditingBreadcrumb} from '../types'
+import {ArrayEditingBreadcrumbsMenu} from '../components'
+import {type ArrayEditingBreadcrumb} from '../types'
 
 const schema = Schema.compile({
   name: 'default',
@@ -31,37 +31,31 @@ const schema = Schema.compile({
   ],
 })
 
-const items: TreeEditingBreadcrumb[] = [
+const items: ArrayEditingBreadcrumb[] = [
   {
     path: ['first-item'],
-    children: [],
     schemaType: schema.get('testDocument').fields[0].type,
     value: {_key: 'first-item', title: 'First item'},
-    parentSchemaType: schema.get('testDocument'),
   },
   {
     path: ['second-item'],
-    children: [],
     schemaType: schema.get('testDocument').fields[0].type,
     value: {_key: 'second-item', title: 'Second item'},
-    parentSchemaType: schema.get('testDocument'),
   },
   {
     path: ['third-item'],
-    children: [],
     schemaType: schema.get('testDocument').fields[0].type,
     value: {_key: 'third-item', title: 'Third item'},
-    parentSchemaType: schema.get('testDocument'),
   },
 ]
 
-export default function TreeEditingBreadcrumbsMenuStory(): JSX.Element {
+export default function ArrayEditingBreadcrumbsMenuStory(): JSX.Element {
   const [selectedPath, setSelectedPath] = useState<Path>(['second-item'])
 
   return (
     <Flex align="center" height="fill">
       <Container width={0}>
-        <TreeEditingBreadcrumbsMenu
+        <ArrayEditingBreadcrumbsMenu
           items={items}
           onPathSelect={setSelectedPath}
           selectedPath={selectedPath}

packages/sanity/src/core/form/studio/tree-editing/__workshop__/TreeEditingBreadcrumbsStory.tsx → packages/sanity/src/core/form/studio/array-editing/__workshop__/ArrayEditingBreadcrumbsStory.tsx

@@ -3,8 +3,8 @@ import {Card, Flex} from '@sanity/ui'
 import {useMemo, useState} from 'react'
 import {type Path} from 'sanity'
 
-import {TreeEditingBreadcrumbs} from '../components'
-import {buildTreeEditingState, type TreeEditingState} from '../utils'
+import {ArrayEditingBreadcrumbs} from '../components'
+import {type ArrayEditingState, buildArrayEditingState} from '../utils'
 
 const schema = Schema.compile({
   name: 'default',
@@ -118,11 +118,11 @@ const DOCUMENT_VALUE = {
   ],
 }
 
-export default function TreeEditingBreadcrumbsStory(): JSX.Element {
+export default function ArrayEditingBreadcrumbsStory(): JSX.Element {
   const [selectedPath, setSelectedPath] = useState<Path>(['myArrayOfObjects', {_key: 'item-1'}])
 
-  const {menuItems} = useMemo((): TreeEditingState => {
-    return buildTreeEditingState({
+  const {breadcrumbs} = useMemo((): ArrayEditingState => {
+    return buildArrayEditingState({
       schemaType: schema.get('testDocument'),
       documentValue: DOCUMENT_VALUE,
       openPath: selectedPath,
@@ -132,8 +132,8 @@ export default function TreeEditingBreadcrumbsStory(): JSX.Element {
   return (
     <Flex align="center" justify="center" height="fill">
       <Card>
-        <TreeEditingBreadcrumbs
-          items={menuItems}
+        <ArrayEditingBreadcrumbs
+          items={breadcrumbs}
           onPathSelect={setSelectedPath}
           selectedPath={selectedPath}
         />

packages/sanity/src/core/form/studio/tree-editing/__workshop__/TreeEditingLayoutStory.tsx → packages/sanity/src/core/form/studio/array-editing/__workshop__/ArrayEditingLayoutStory.tsx

@@ -3,8 +3,8 @@ import {Card, Code, Stack} from '@sanity/ui'
 import {useCallback, useMemo, useState} from 'react'
 import {type Path} from 'sanity'
 
-import {TreeEditingLayout} from '../components'
-import {buildTreeEditingState} from '../utils'
+import {ArrayEditingLayout} from '../components'
+import {buildArrayEditingState} from '../utils'
 
 const schema = Schema.compile({
   name: 'default',
@@ -118,11 +118,11 @@ const DOCUMENT_VALUE = {
   ],
 }
 
-export default function TreeEditingLayoutStory(): JSX.Element {
+export default function ArrayEditingLayoutStory(): JSX.Element {
   const [selectedPath, setSelectedPath] = useState<Path>(['myArrayOfObjects', {_key: 'first-item'}])
 
   const state = useMemo(() => {
-    return buildTreeEditingState({
+    return buildArrayEditingState({
       documentValue: DOCUMENT_VALUE,
       schemaType: schema.get('testDocument'),
       openPath: selectedPath,
@@ -134,12 +134,10 @@ export default function TreeEditingLayoutStory(): JSX.Element {
   }, [])
 
   return (
-    <TreeEditingLayout
+    <ArrayEditingLayout
       breadcrumbs={state.breadcrumbs}
-      items={state.menuItems}
       onPathSelect={handlePathSelect}
       selectedPath={selectedPath}
-      title="Title"
     >
       <Stack space={2}>
         <Card padding={4} tone="transparent" radius={2}>
@@ -148,6 +146,6 @@ export default function TreeEditingLayoutStory(): JSX.Element {
           </Code>
         </Card>
       </Stack>
-    </TreeEditingLayout>
+    </ArrayEditingLayout>
   )
 }

packages/sanity/src/core/form/studio/array-editing/__workshop__/index.ts

@@ -0,0 +1,29 @@
+import {defineScope} from '@sanity/ui-workshop'
+import {lazy} from 'react'
+
+export default defineScope({
+  name: 'core/form/array-editing',
+  title: 'Array editing',
+  stories: [
+    {
+      name: 'array-editing-layout',
+      title: 'ArrayEditingLayout',
+      component: lazy(() => import('./ArrayEditingLayoutStory')),
+    },
+    {
+      name: 'array-editing-breadcrumbs',
+      title: 'ArrayEditingBreadcrumbs',
+      component: lazy(() => import('./ArrayEditingBreadcrumbsStory')),
+    },
+    {
+      name: 'array-editing-breadcrumbs-menu',
+      title: 'ArrayEditingBreadcrumbsMenu',
+      component: lazy(() => import('./ArrayEditingBreadcrumbsMenuStory')),
+    },
+    {
+      name: 'array-editing-breadcrumbs-menu-button',
+      title: 'ArrayEditingBreadcrumbsMenuButtonStory',
+      component: lazy(() => import('./ArrayEditingBreadcrumbsMenuButtonStory')),
+    },
+  ],
+})