feat: Table inline editing polish (#9002)

* feat: Table inline editing polish

* fix lint

* fix styles and fix docs example

* Update packages/dev/s2-docs/pages/s2/TableView.mdx

Co-authored-by: Daniel Lu <dl1644@gmail.com>

---------

Co-authored-by: Daniel Lu <dl1644@gmail.com>

Author: snowystinger

packages/@react-spectrum/s2/src/TableView.tsx

@@ -122,7 +122,7 @@ export interface TableViewProps extends Omit<RACTableProps, 'style' | 'disabledB
   styles?: StylesPropWithHeight
 }
 
-let InternalTableContext = createContext<TableViewProps & {layout?: S2TableLayout<unknown>, setIsInResizeMode?:(val: boolean) => void, isInResizeMode?: boolean}>({});
+let InternalTableContext = createContext<TableViewProps & {layout?: S2TableLayout<unknown>, setIsInResizeMode?:(val: boolean) => void, isInResizeMode?: boolean, selectionMode?: 'none' | 'single' | 'multiple'}>({});
 
 const tableWrapper = style({
   minHeight: 0,
@@ -291,6 +291,7 @@ export const TableView = forwardRef(function TableView(props: TableViewProps, re
     onResizeEnd: propsOnResizeEnd,
     onAction,
     onLoadMore,
+    selectionMode = 'none',
     ...otherProps
   } = props;
 
@@ -315,11 +316,12 @@ export const TableView = forwardRef(function TableView(props: TableViewProps, re
     loadingState,
     onLoadMore,
     isInResizeMode,
-    setIsInResizeMode
-  }), [isQuiet, density, overflowMode, loadingState, onLoadMore, isInResizeMode, setIsInResizeMode]);
+    setIsInResizeMode,
+    selectionMode
+  }), [isQuiet, density, overflowMode, loadingState, onLoadMore, isInResizeMode, setIsInResizeMode, selectionMode]);
 
   let scrollRef = useRef<HTMLElement | null>(null);
-  let isCheckboxSelection = props.selectionMode === 'multiple' || props.selectionMode === 'single';
+  let isCheckboxSelection = selectionMode === 'multiple' || selectionMode === 'single';
 
   let {selectedKeys, onSelectionChange, actionBar, actionBarHeight} = useActionBarContainer({...props, scrollRef});
 
@@ -362,6 +364,7 @@ export const TableView = forwardRef(function TableView(props: TableViewProps, re
               isQuiet
             })}
             selectionBehavior="toggle"
+            selectionMode={selectionMode}
             onRowAction={onAction}
             {...otherProps}
             selectedKeys={selectedKeys}
@@ -1053,6 +1056,45 @@ export const Cell = forwardRef(function Cell(props: CellProps, ref: DOMRef<HTMLD
   );
 });
 
+
+const editableCell = style<CellRenderProps & S2TableProps & {isDivider: boolean, selectionMode?: 'none' | 'single' | 'multiple', isSaving?: boolean}>({
+  ...commonCellStyles,
+  color: {
+    default: baseColor('neutral'),
+    isSaving: baseColor('neutral-subdued')
+  },
+  paddingY: centerPadding(),
+  boxSizing: 'border-box',
+  height: 'calc(100% - 1px)', // so we don't overlap the border of the next cell
+  width: 'full',
+  fontSize: controlFont(),
+  alignItems: 'center',
+  display: 'flex',
+  borderStyle: {
+    default: 'none',
+    isDivider: 'solid'
+  },
+  borderEndWidth: {
+    default: 0,
+    isDivider: 1
+  },
+  borderColor: {
+    default: 'gray-300',
+    forcedColors: 'ButtonBorder'
+  },
+  backgroundColor: {
+    default: 'transparent',
+    ':is([role="rowheader"]:hover, [role="gridcell"]:hover)': {
+      selectionMode: {
+        none: colorMix('gray-25', 'gray-900', 7),
+        single: 'gray-25',
+        multiple: 'gray-25'
+      }
+    },
+    ':is([role="row"][data-focus-visible-within] [role="rowheader"]:focus-within, [role="row"][data-focus-visible-within] [role="gridcell"]:focus-within)': 'gray-25'
+  }
+});
+
 let editPopover = style({
   ...colorScheme(),
   '--s2-container-bg': {
@@ -1083,28 +1125,31 @@ let editPopover = style({
 }, getAllowedOverrides());
 
 interface EditableCellProps extends Omit<CellProps, 'isSticky'> {
+  /** The component which will handle editing the cell. For example, a `TextField` or a `Picker`. */
   renderEditing: () => ReactNode,
+  /** Whether the cell is currently being saved. */
   isSaving?: boolean,
-  onSubmit: () => void,
-  onCancel: () => void
+  /** Handler that is called when the value has been changed and is ready to be saved. */
+  onSubmit: () => void
 }
 
 /**
- * An exditable cell within a table row.
+ * An editable cell within a table row.
  */
 export const EditableCell = forwardRef(function EditableCell(props: EditableCellProps, ref: ForwardedRef<HTMLDivElement>) {
-  let {children, showDivider = false, textValue, ...otherProps} = props;
+  let {children, showDivider = false, textValue, isSaving, ...otherProps} = props;
   let tableVisualOptions = useContext(InternalTableContext);
   let domRef = useObjectRef(ref);
   textValue ||= typeof children === 'string' ? children : undefined;
 
   return (
     <RACCell
       ref={domRef}
-      className={renderProps => cell({
+      className={renderProps => editableCell({
         ...renderProps,
         ...tableVisualOptions,
-        isDivider: showDivider
+        isDivider: showDivider,
+        isSaving
       })}
       textValue={textValue}
       {...otherProps}>
@@ -1128,7 +1173,7 @@ const nonTextInputTypes = new Set([
 ]);
 
 function EditableCellInner(props: EditableCellProps & {isFocusVisible: boolean, cellRef: RefObject<HTMLDivElement>}) {
-  let {children, align, renderEditing, isSaving, onSubmit, onCancel, isFocusVisible, cellRef} = props;
+  let {children, align, renderEditing, isSaving, onSubmit, isFocusVisible, cellRef} = props;
   let [isOpen, setIsOpen] = useState(false);
   let popoverRef = useRef<HTMLDivElement>(null);
   let formRef = useRef<HTMLFormElement>(null);
@@ -1180,10 +1225,8 @@ function EditableCellInner(props: EditableCellProps & {isFocusVisible: boolean,
     }
   }, [isOpen]);
 
-  // Cancel, don't save the value
   let cancel = () => {
     setIsOpen(false);
-    onCancel();
   };
 
   return (
@@ -1202,6 +1245,7 @@ function EditableCellInner(props: EditableCellProps & {isFocusVisible: boolean,
               styles: style({
                 // TODO: really need access to display here instead, but not possible right now
                 // will be addressable with displayOuter
+                // Could use `hidden` attribute instead of css, but I don't have access to much of this state at the moment
                 visibility: {
                   default: 'hidden',
                   isForcedVisible: 'visible',

packages/@react-spectrum/s2/stories/TableView.stories.tsx

@@ -1497,7 +1497,6 @@ export const EditableTable: StoryObj<EditableTableProps> = {
                         align={column.align}
                         showDivider={column.showDivider}
                         onSubmit={() => onChange(item.id, column.id!)}
-                        onCancel={() => {}}
                         isSaving={item.isSaving[column.id!]}
                         renderEditing={() => (
                           <TextField
@@ -1522,7 +1521,6 @@ export const EditableTable: StoryObj<EditableTableProps> = {
                         align={column.align}
                         showDivider={column.showDivider}
                         onSubmit={() => onChange(item.id, column.id!)}
-                        onCancel={() => {}}
                         isSaving={item.isSaving[column.id!]}
                         renderEditing={() => (
                           <Picker
@@ -1628,7 +1626,6 @@ export const EditableTableWithAsyncSaving: StoryObj<EditableTableProps> = {
                         align={column.align}
                         showDivider={column.showDivider}
                         onSubmit={() => onChange(item.id, column.id!)}
-                        onCancel={() => {}}
                         isSaving={item.isSaving[column.id!]}
                         renderEditing={() => (
                           <TextField
@@ -1649,7 +1646,6 @@ export const EditableTableWithAsyncSaving: StoryObj<EditableTableProps> = {
                         align={column.align}
                         showDivider={column.showDivider}
                         onSubmit={() => onChange(item.id, column.id!)}
-                        onCancel={() => {}}
                         isSaving={item.isSaving[column.id!]}
                         renderEditing={() => (
                           <Picker

packages/@react-spectrum/s2/test/EditableTableView.test.tsx

@@ -179,7 +179,6 @@ describe('TableView', () => {
                         align={column.align}
                         showDivider={column.showDivider}
                         onSubmit={() => onChange(item.id, column.id!)}
-                        onCancel={() => {}}
                         isSaving={item.isSaving[column.id!]}
                         renderEditing={() => (
                           <TextField
@@ -199,7 +198,6 @@ describe('TableView', () => {
                         align={column.align}
                         showDivider={column.showDivider}
                         onSubmit={() => onChange(item.id, column.id!)}
-                        onCancel={() => {}}
                         isSaving={item.isSaving[column.id!]}
                         renderEditing={() => (
                           <Picker

packages/dev/s2-docs/pages/s2/TableView.mdx

@@ -49,7 +49,7 @@ import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
 
 ## Content
 
-`TableView` follows the [Collection Components API](collections.html?component=Table), accepting both static and dynamic collections. 
+`TableView` follows the [Collection Components API](collections.html?component=Table), accepting both static and dynamic collections.
 In this example, both the columns and the rows are provided to the table via a render function, enabling the user to hide and show columns and add additional rows.
 
 ```tsx render type="s2"
@@ -686,6 +686,174 @@ function subscribe(fn) {
 }
 ```
 
+## Editable Table
+
+`EditableCell` represents an editable value in a single cell. It opens a popover that can contain any editable input or combination of inputs when the end user clicks the user provided `ActionButton` .
+
+An `ActionButton` with `slot="edit"` must be provided as a child of the `EditableCell` to open the popover.
+
+```tsx render type="s2"
+"use client";
+import {TableView, TableHeader, Column, TableBody, Row, Cell, EditableCell, TextField, ActionButton, Picker, PickerItem, Text, type Key} from '@react-spectrum/s2';
+import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
+import User from '@react-spectrum/s2/icons/User';
+import Edit from '@react-spectrum/s2/icons/Edit';
+import {useCallback,useRef, useState} from 'react';
+
+///- begin collapse -///
+let defaultItems = [
+  {id: 1, fruits: 'Apples', task: 'Collect', farmer: 'Eva'},
+  {id: 2, fruits: 'Oranges', task: 'Collect', farmer: 'Steven'},
+  {id: 3, fruits: 'Pears', task: 'Collect', farmer: 'Michael'},
+  {id: 4, fruits: 'Cherries', task: 'Collect', farmer: 'Sara'},
+  {id: 5, fruits: 'Dates', task: 'Collect', farmer: 'Karina'},
+  {id: 6, fruits: 'Bananas', task: 'Collect', farmer: 'Otto'},
+  {id: 7, fruits: 'Melons', task: 'Collect', farmer: 'Matt'},
+  {id: 8, fruits: 'Figs', task: 'Collect', farmer: 'Emily'},
+  {id: 9, fruits: 'Blueberries', task: 'Collect', farmer: 'Amelia'},
+  {id: 10, fruits: 'Blackberries', task: 'Collect', farmer: 'Isla'}
+];
+///- end collapse -///
+
+///- begin collapse -///
+let editableColumns: Array<Omit<ColumnProps, 'children'> & {name: string}> = [
+  {name: 'Fruits', id: 'fruits', isRowHeader: true, width: '6fr', minWidth: 300},
+  {name: 'Task', id: 'task', width: '2fr', minWidth: 100},
+  {name: 'Farmer', id: 'farmer', width: '2fr', minWidth: 150}
+];
+///- end collapse -///
+
+export default function EditableTable(props) {
+  let columns = editableColumns;
+  let [editableItems, setEditableItems] = useState(defaultItems);
+  let intermediateValue = useRef<any>(null);
+
+  let onChange = useCallback((id: Key, columnId: Key) => {
+    let value = intermediateValue.current;
+    if (value === null) {
+      return;
+    }
+    intermediateValue.current = null;
+    setEditableItems(prev => {
+      let newItems = prev.map(i => i.id === id && i[columnId] !== value ? {...i, [columnId]: value} : i);
+      return newItems;
+    });
+  }, []);
+
+  let onIntermediateChange = useCallback((value: any) => {
+    intermediateValue.current = value;
+  }, []);
+
+  return (
+    <TableView aria-label="Dynamic table" {...props} styles={style({height: 208})}>
+      <TableHeader columns={columns}>
+        {(column) => (
+          <Column {...column}>{column.name}</Column>
+        )}
+      </TableHeader>
+      <TableBody items={editableItems}>
+        {item => (
+          <Row id={item.id} columns={columns}>
+            {(column) => {
+              if (column.id === 'fruits') {
+                ///- begin highlight -///
+                return (
+                  <EditableCell
+                    align={column.align}
+                    showDivider={column.showDivider}
+                    onSubmit={() => onChange(item.id, column.id!)}
+                    renderEditing={() => (
+                      <TextField
+                        aria-label="Edit fruit"
+                        autoFocus
+                        validate={value => value.length > 0 ? null : 'Fruit name is required'}
+                        styles={style({flexGrow: 1, flexShrink: 1, minWidth: 0})}
+                        defaultValue={item[column.id!]}
+                        onChange={value => onIntermediateChange(value)} />
+                    )}>
+                    <div className={style({display: 'flex', alignItems: 'center', gap: 8, justifyContent: 'space-between'})}>
+                      {item[column.id]}
+                      <ActionButton slot="edit" aria-label="Edit fruit">
+                        <Edit />
+                      </ActionButton></div>
+                  </EditableCell>
+                );
+                ///- end highlight -///
+              }
+              if (column.id === 'farmer') {
+                ///- begin highlight -///
+                return (
+                  <EditableCell
+                    align={column.align}
+                    showDivider={column.showDivider}
+                    onSubmit={() => onChange(item.id, column.id!)}
+                    renderEditing={() => (
+                      <Picker
+                        aria-label="Edit farmer"
+                        autoFocus
+                        styles={style({flexGrow: 1, flexShrink: 1, minWidth: 0})}
+                        defaultValue={item[column.id!]}
+                        onChange={value => onIntermediateChange(value)}>
+                        <PickerItem textValue="Eva" id="Eva">
+                          <User />
+                          <Text>Eva</Text>
+                        </PickerItem>
+                        <PickerItem textValue="Steven" id="Steven">
+                          <User />
+                          <Text>Steven</Text>
+                        </PickerItem>
+                        <PickerItem textValue="Michael" id="Michael">
+                          <User />
+                          <Text>Michael</Text>
+                        </PickerItem>
+                        <PickerItem textValue="Sara" id="Sara">
+                          <User />
+                          <Text>Sara</Text>
+                        </PickerItem>
+                        <PickerItem textValue="Karina" id="Karina">
+                          <User />
+                          <Text>Karina</Text>
+                        </PickerItem>
+                        <PickerItem textValue="Otto" id="Otto">
+                          <User />
+                          <Text>Otto</Text>
+                        </PickerItem>
+                        <PickerItem textValue="Matt" id="Matt">
+                          <User />
+                          <Text>Matt</Text>
+                        </PickerItem>
+                        <PickerItem textValue="Emily" id="Emily">
+                          <User />
+                          <Text>Emily</Text>
+                        </PickerItem>
+                        <PickerItem textValue="Amelia" id="Amelia">
+                          <User />
+                          <Text>Amelia</Text>
+                        </PickerItem>
+                        <PickerItem textValue="Isla" id="Isla">
+                          <User />
+                          <Text>Isla</Text>
+                        </PickerItem>
+                      </Picker>
+                    )}>
+                    <div className={style({display: 'flex', alignItems: 'center', gap: 8, justifyContent: 'space-between'})}>
+                      {item[column.id]}
+                      <ActionButton slot="edit" aria-label="Edit fruit"><Edit /></ActionButton>
+                    </div>
+                  </EditableCell>
+                );
+                ///- end highlight -///
+              }
+              return <Cell align={column.align} showDivider={column.showDivider}>{item[column.id!]}</Cell>;
+            }}
+          </Row>
+        )}
+      </TableBody>
+    </TableView>
+  );
+}
+```
+
 ## API
 
 ```tsx links={{TableView: '#tableview', TableHeader: '#tableheader', Column: '#column', TableBody: '#tablebody', Row: '#row', Cell: '#cell'}}
@@ -724,3 +892,7 @@ function subscribe(fn) {
 ### Cell
 
 <PropTable component={docs.exports.Cell} links={docs.links} showDescription />
+
+### EditableCell
+
+<PropTable component={docs.exports.EditableCell} links={docs.links} showDescription />