Skip to content

[WIP]: Explore editmode #8628

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 5 commits into
base: main
Choose a base branch
from
Draft

[WIP]: Explore editmode #8628

wants to merge 5 commits into from

Conversation

snowystinger
Copy link
Member

Closes
bringing https://github.com/adobe/react-spectrum/tree/edit-mode back to life

✅ Pull Request Checklist:

  • Included link to corresponding React Spectrum GitHub Issue.
  • Added/updated unit tests and storybook for this change (for new code or code which already has tests).
  • Filled out test instructions.
  • Updated documentation (if it already exists for this component).
  • Looked at the Accessibility Practices for this feature - Aria Practices

📝 Test Instructions:

🧢 Your Project:

@rspbot
Copy link

rspbot commented Jul 26, 2025

@rspbot
Copy link

rspbot commented Jul 28, 2025

@rspbot
Copy link

rspbot commented Jul 28, 2025

## API Changes

react-aria-components

/react-aria-components:Cell

 Cell {
+  allowsEditing?: boolean
   children?: ChildrenOrFunction<CellRenderProps>
   className?: ClassNameOrFunction<CellRenderProps>
   colSpan?: number
   id?: Key
   textValue?: string
 }

/react-aria-components:CellProps

 CellProps {
+  allowsEditing?: boolean
   children?: ChildrenOrFunction<CellRenderProps>
   className?: ClassNameOrFunction<CellRenderProps>
   colSpan?: number
   id?: Key
   textValue?: string
 }

/react-aria-components:CellRenderProps

 CellRenderProps {
+  endEditing: () => void
   id?: Key
+  isEditing: boolean
   isFocusVisible: boolean
   isFocused: boolean
   isHovered: boolean
   isPressed: boolean
+  startEditing: () => void
 }

/react-aria-components:TableState

 TableState <T> {
   collection: TableCollection<T>
   disabledKeys: Set<Key>
+  editingKey: Key | null
+  endEditing: () => void
   isKeyboardNavigationDisabled: boolean
   selectionManager: SelectionManager
   setKeyboardNavigationDisabled: (boolean) => void
   showSelectionCheckboxes: boolean
   sort: (Key, 'ascending' | 'descending') => void
   sortDescriptor: SortDescriptor | null
+  startEditing: (Key) => void
 }

@react-aria/grid

/@react-aria/grid:GridCellAria

 GridCellAria {
   gridCellProps: DOMAttributes
+  isEditing: boolean
   isPressed: boolean
 }

@react-aria/table

/@react-aria/table:TableCellAria

 TableCellAria {
   gridCellProps: DOMAttributes
+  isEditing: boolean
   isPressed: boolean
 }

@react-spectrum/s2

/@react-spectrum/s2:Cell

 Cell {
   align?: 'start' | 'center' | 'end' = 'start'
+  allowsEditing?: boolean
   children: ReactNode
   className?: ClassNameOrFunction<CellRenderProps>
   colSpan?: number
   id?: Key
   style?: StyleOrFunction<CellRenderProps>
   textValue?: string
 }

/@react-spectrum/s2:CellProps

 CellProps {
   align?: 'start' | 'center' | 'end' = 'start'
+  allowsEditing?: boolean
   children: ReactNode
   className?: ClassNameOrFunction<CellRenderProps>
   colSpan?: number
   id?: Key
   style?: StyleOrFunction<CellRenderProps>
   textValue?: string
 }

@react-stately/grid

/@react-stately/grid:GridState

 GridState <C extends GridCollection<T>, T> {
   collection: GridCollection<T>
   disabledKeys: Set<Key>
+  editingKey: Key | null
+  endEditing: () => void
   isKeyboardNavigationDisabled: boolean
   selectionManager: SelectionManager
+  setKeyboardNavigationDisabled: (boolean) => void
+  startEditing: (Key) => void
 }

@react-stately/table

/@react-stately/table:TableState

 TableState <T> {
   collection: TableCollection<T>
   disabledKeys: Set<Key>
+  editingKey: Key | null
+  endEditing: () => void
   isKeyboardNavigationDisabled: boolean
   selectionManager: SelectionManager
   setKeyboardNavigationDisabled: (boolean) => void
   showSelectionCheckboxes: boolean
   sort: (Key, 'ascending' | 'descending') => void
   sortDescriptor: SortDescriptor | null
+  startEditing: (Key) => void
 }

/@react-stately/table:TreeGridState

 TreeGridState <T> {
   collection: TableCollection<T>
   disabledKeys: Set<Key>
+  editingKey: Key | null
+  endEditing: () => void
   expandedKeys: 'all' | Set<Key>
   isKeyboardNavigationDisabled: boolean
   keyMap: Map<Key, GridNode<T>>
   selectionManager: SelectionManager
   setKeyboardNavigationDisabled: (boolean) => void
   showSelectionCheckboxes: boolean
   sort: (Key, 'ascending' | 'descending') => void
   sortDescriptor: SortDescriptor | null
+  startEditing: (Key) => void
   toggleKey: (Key) => void
   userColumnCount: number
 }

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants