wip: table inline editing #8754

snowystinger · 2025-08-21T07:57:41Z

Closes

For demo purposes right now

✅ 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 · 2025-08-21T08:05:35Z

Build successful! 🎉

rspbot · 2025-08-21T08:10:51Z

Build successful! 🎉

…nvalid state, click off

rspbot · 2025-08-25T07:01:02Z

Build successful! 🎉

rspbot · 2025-08-25T07:38:38Z

Build successful! 🎉

rspbot · 2025-08-25T07:41:12Z

Build successful! 🎉

rspbot · 2025-08-25T08:00:33Z

Build successful! 🎉

rspbot · 2025-08-25T08:10:16Z

Build successful! 🎉

rspbot · 2025-08-27T00:35:19Z

Build successful! 🎉

rspbot · 2025-08-27T02:42:38Z

Build successful! 🎉

snowystinger · 2025-08-27T04:15:06Z

packages/@react-aria/overlays/src/calculatePosition.ts

@@ -181,7 +181,7 @@ function getDelta(
  // Note that these values are with respect to the visual viewport (aka 0,0 is the top left of the viewport)
  let boundaryStartEdge = boundaryDimensions.scroll[AXIS[axis]] + padding;
  let boundaryEndEdge = boundarySize + boundaryDimensions.scroll[AXIS[axis]] - padding;
-  let startEdgeOffset = offset - containerScroll + containerOffsetWithBoundary[axis] - boundaryDimensions[AXIS[axis]];
+  let startEdgeOffset = offset - containerScroll + containerOffsetWithBoundary[axis];


ignore this change for a bit, might be a bug in our positioning code

…plementation to make generic, fix density, individual cell saving state, use touch detection for showing all the time

snowystinger · 2025-08-28T04:46:15Z

packages/@react-aria/table/src/useTableCell.ts

@@ -28,7 +28,8 @@ export interface AriaTableCellProps {
   * Please use onCellAction at the collection level instead.
   * @deprecated
   **/
-  onAction?: () => void
+  onAction?: () => void,
+  focusMode?: 'cell' | 'child'


change we'd need to make if we want to support edit mode on some cells vs others

rspbot · 2025-08-28T04:46:23Z

Build successful! 🎉

snowystinger · 2025-08-28T04:46:32Z

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

@@ -587,6 +593,7 @@ export function PickerItem(props: PickerItemProps): ReactNode {
              context={TextContext}
              value={{
                slots: {
+                  [DEFAULT_SLOT]: {styles: label({size})},


this is just a missing feature we should really have in S2

rspbot · 2025-09-01T02:12:43Z

Build successful! 🎉

rspbot · 2025-09-01T03:41:44Z

Build successful! 🎉

rspbot · 2025-09-01T03:42:23Z

Build successful! 🎉

rspbot · 2025-09-02T05:57:36Z

Build successful! 🎉

rspbot · 2025-09-04T05:36:27Z

Build successful! 🎉

rspbot · 2025-09-04T07:08:07Z

Build successful! 🎉

rspbot · 2025-09-04T07:08:09Z

## API Changes

react-aria-components

/react-aria-components:Calendar

 Calendar <T extends DateValue> {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean = false
   children?: ChildrenOrFunction<CalendarRenderProps>
   className?: ClassNameOrFunction<CalendarRenderProps>
   createCalendar?: (CalendarIdentifier) => Calendar
   defaultFocusedValue?: DateValue | null
   defaultValue?: DateValue | null
   firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
   focusedValue?: DateValue | null
   id?: string
   isDateUnavailable?: (DateValue) => boolean
   isDisabled?: boolean = false
   isInvalid?: boolean
   isReadOnly?: boolean = false
   maxValue?: DateValue | null
   minValue?: DateValue | null
   onChange?: (MappedDateValue<DateValue>) => void
   onFocusChange?: (CalendarDate) => void
   pageBehavior?: PageBehavior = visible
-  selectionAlignment?: 'start' | 'center' | 'end' = 'center'
   slot?: string | null
   style?: StyleOrFunction<CalendarRenderProps>
   value?: DateValue | null
   visibleDuration?: DateDuration = {months: 1}

/react-aria-components:RangeCalendar

 RangeCalendar <T extends DateValue> {
   allowsNonContiguousRanges?: boolean
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean = false
   children?: ChildrenOrFunction<RangeCalendarRenderProps>
   className?: ClassNameOrFunction<RangeCalendarRenderProps>
   createCalendar?: (CalendarIdentifier) => Calendar
   defaultFocusedValue?: DateValue | null
   defaultValue?: RangeValue<DateValue> | null
   firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
   focusedValue?: DateValue | null
   id?: string
   isDateUnavailable?: (DateValue) => boolean
   isDisabled?: boolean = false
   isInvalid?: boolean
   isReadOnly?: boolean = false
   maxValue?: DateValue | null
   minValue?: DateValue | null
   onChange?: (RangeValue<MappedDateValue<DateValue>>) => void
   onFocusChange?: (CalendarDate) => void
   pageBehavior?: PageBehavior = visible
-  selectionAlignment?: 'start' | 'center' | 'end' = 'center'
   slot?: string | null
   style?: StyleOrFunction<RangeCalendarRenderProps>
   value?: RangeValue<DateValue> | null
   visibleDuration?: DateDuration = {months: 1}

/react-aria-components:Cell

 Cell {
   children?: ChildrenOrFunction<CellRenderProps>
   className?: ClassNameOrFunction<CellRenderProps>
   colSpan?: number
+  focusMode?: 'cell' | 'child'
   id?: Key
   style?: StyleOrFunction<CellRenderProps>
   textValue?: string
 }

/react-aria-components:CalendarProps

 CalendarProps <T extends DateValue> {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean = false
   children?: ChildrenOrFunction<CalendarRenderProps>
   className?: ClassNameOrFunction<CalendarRenderProps>
   createCalendar?: (CalendarIdentifier) => Calendar
   defaultFocusedValue?: DateValue | null
   defaultValue?: DateValue | null
   firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
   focusedValue?: DateValue | null
   id?: string
   isDateUnavailable?: (DateValue) => boolean
   isDisabled?: boolean = false
   isInvalid?: boolean
   isReadOnly?: boolean = false
   maxValue?: DateValue | null
   minValue?: DateValue | null
   onChange?: (MappedDateValue<DateValue>) => void
   onFocusChange?: (CalendarDate) => void
   pageBehavior?: PageBehavior = visible
-  selectionAlignment?: 'start' | 'center' | 'end' = 'center'
   slot?: string | null
   style?: StyleOrFunction<CalendarRenderProps>
   value?: DateValue | null
   visibleDuration?: DateDuration = {months: 1}

/react-aria-components:RangeCalendarProps

 RangeCalendarProps <T extends DateValue> {
   allowsNonContiguousRanges?: boolean
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean = false
   children?: ChildrenOrFunction<RangeCalendarRenderProps>
   className?: ClassNameOrFunction<RangeCalendarRenderProps>
   createCalendar?: (CalendarIdentifier) => Calendar
   defaultFocusedValue?: DateValue | null
   defaultValue?: RangeValue<DateValue> | null
   firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
   focusedValue?: DateValue | null
   id?: string
   isDateUnavailable?: (DateValue) => boolean
   isDisabled?: boolean = false
   isInvalid?: boolean
   isReadOnly?: boolean = false
   maxValue?: DateValue | null
   minValue?: DateValue | null
   onChange?: (RangeValue<MappedDateValue<DateValue>>) => void
   onFocusChange?: (CalendarDate) => void
   pageBehavior?: PageBehavior = visible
-  selectionAlignment?: 'start' | 'center' | 'end' = 'center'
   slot?: string | null
   style?: StyleOrFunction<RangeCalendarRenderProps>
   value?: RangeValue<DateValue> | null
   visibleDuration?: DateDuration = {months: 1}

/react-aria-components:CellProps

 CellProps {
   children?: ChildrenOrFunction<CellRenderProps>
   className?: ClassNameOrFunction<CellRenderProps>
   colSpan?: number
+  focusMode?: 'cell' | 'child'
   id?: Key
   style?: StyleOrFunction<CellRenderProps>
   textValue?: string
 }

@react-aria/calendar

/@react-aria/calendar:AriaCalendarProps

 AriaCalendarProps <T extends DateValue> {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean = false
   defaultFocusedValue?: DateValue | null
   defaultValue?: DateValue | null
   errorMessage?: ReactNode
   firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
   focusedValue?: DateValue | null
   id?: string
   isDateUnavailable?: (DateValue) => boolean
   isDisabled?: boolean = false
   isInvalid?: boolean
   isReadOnly?: boolean = false
   maxValue?: DateValue | null
   minValue?: DateValue | null
   onChange?: (MappedDateValue<DateValue>) => void
   onFocusChange?: (CalendarDate) => void
   pageBehavior?: PageBehavior = visible
-  selectionAlignment?: 'start' | 'center' | 'end' = 'center'
   value?: DateValue | null
 }

/@react-aria/calendar:AriaRangeCalendarProps

 AriaRangeCalendarProps <T extends DateValue> {
   allowsNonContiguousRanges?: boolean
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean = false
   defaultFocusedValue?: DateValue | null
   defaultValue?: RangeValue<DateValue> | null
   errorMessage?: ReactNode
   firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
   focusedValue?: DateValue | null
   id?: string
   isDateUnavailable?: (DateValue) => boolean
   isDisabled?: boolean = false
   isInvalid?: boolean
   isReadOnly?: boolean = false
   maxValue?: DateValue | null
   minValue?: DateValue | null
   onChange?: (RangeValue<MappedDateValue<DateValue>>) => void
   onFocusChange?: (CalendarDate) => void
   pageBehavior?: PageBehavior = visible
-  selectionAlignment?: 'start' | 'center' | 'end' = 'center'
   value?: RangeValue<DateValue> | null
 }

/@react-aria/calendar:CalendarProps

 CalendarProps <T extends DateValue> {
   autoFocus?: boolean = false
   defaultFocusedValue?: DateValue | null
   defaultValue?: DateValue | null
   errorMessage?: ReactNode
   firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
   focusedValue?: DateValue | null
   isDateUnavailable?: (DateValue) => boolean
   isDisabled?: boolean = false
   isInvalid?: boolean
   isReadOnly?: boolean = false
   maxValue?: DateValue | null
   minValue?: DateValue | null
   onChange?: (MappedDateValue<DateValue>) => void
   onFocusChange?: (CalendarDate) => void
   pageBehavior?: PageBehavior = visible
-  selectionAlignment?: 'start' | 'center' | 'end' = 'center'
   value?: DateValue | null
 }

/@react-aria/calendar:RangeCalendarProps

 RangeCalendarProps <T extends DateValue> {
   allowsNonContiguousRanges?: boolean
   autoFocus?: boolean = false
   defaultFocusedValue?: DateValue | null
   defaultValue?: RangeValue<DateValue> | null
   errorMessage?: ReactNode
   firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
   focusedValue?: DateValue | null
   isDateUnavailable?: (DateValue) => boolean
   isDisabled?: boolean = false
   isInvalid?: boolean
   isReadOnly?: boolean = false
   maxValue?: DateValue | null
   minValue?: DateValue | null
   onChange?: (RangeValue<MappedDateValue<DateValue>>) => void
   onFocusChange?: (CalendarDate) => void
   pageBehavior?: PageBehavior = visible
-  selectionAlignment?: 'start' | 'center' | 'end' = 'center'
   value?: RangeValue<DateValue> | null
 }

@react-aria/table

/@react-aria/table:AriaTableCellProps

 AriaTableCellProps {
+  focusMode?: 'cell' | 'child'
   isVirtualized?: boolean
   node: GridNode<unknown>
   shouldSelectOnPressUp?: boolean
 }

@react-spectrum/calendar

/@react-spectrum/calendar:Calendar

 Calendar <T extends DateValue> {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
   alignSelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'center' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'stretch'>
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean = false
   bottom?: Responsive<DimensionValue>
   createCalendar?: (CalendarIdentifier) => Calendar
   defaultFocusedValue?: DateValue | null
   defaultValue?: DateValue | null
   end?: Responsive<DimensionValue>
   errorMessage?: ReactNode
   firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
   flex?: Responsive<string | number | boolean>
   flexBasis?: Responsive<number | string>
   flexGrow?: Responsive<number>
   flexShrink?: Responsive<number>
   focusedValue?: DateValue | null
   gridArea?: Responsive<string>
   gridColumn?: Responsive<string>
   gridColumnEnd?: Responsive<string>
   gridColumnStart?: Responsive<string>
   gridRow?: Responsive<string>
   gridRowEnd?: Responsive<string>
   gridRowStart?: Responsive<string>
   height?: Responsive<DimensionValue>
   id?: string
   isDateUnavailable?: (DateValue) => boolean
   isDisabled?: boolean = false
   isHidden?: Responsive<boolean>
   isInvalid?: boolean
   isReadOnly?: boolean = false
   justifySelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'center' | 'left' | 'right' | 'stretch'>
   left?: Responsive<DimensionValue>
   margin?: Responsive<DimensionValue>
   marginBottom?: Responsive<DimensionValue>
   marginEnd?: Responsive<DimensionValue>
   marginStart?: Responsive<DimensionValue>
   marginTop?: Responsive<DimensionValue>
   marginX?: Responsive<DimensionValue>
   marginY?: Responsive<DimensionValue>
   maxHeight?: Responsive<DimensionValue>
   maxValue?: DateValue | null
   maxWidth?: Responsive<DimensionValue>
   minHeight?: Responsive<DimensionValue>
   minValue?: DateValue | null
   minWidth?: Responsive<DimensionValue>
   onChange?: (MappedDateValue<DateValue>) => void
   onFocusChange?: (CalendarDate) => void
   order?: Responsive<number>
   pageBehavior?: PageBehavior = visible
   position?: Responsive<'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'>
   right?: Responsive<DimensionValue>
-  selectionAlignment?: 'start' | 'center' | 'end' = 'center'
   start?: Responsive<DimensionValue>
   top?: Responsive<DimensionValue>
   value?: DateValue | null
   visibleMonths?: number = 1
   zIndex?: Responsive<number>
 }

/@react-spectrum/calendar:RangeCalendar

 RangeCalendar <T extends DateValue> {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
   alignSelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'center' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'stretch'>
   allowsNonContiguousRanges?: boolean
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean = false
   bottom?: Responsive<DimensionValue>
   createCalendar?: (CalendarIdentifier) => Calendar
   defaultFocusedValue?: DateValue | null
   defaultValue?: RangeValue<DateValue> | null
   end?: Responsive<DimensionValue>
   errorMessage?: ReactNode
   firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
   flex?: Responsive<string | number | boolean>
   flexBasis?: Responsive<number | string>
   flexGrow?: Responsive<number>
   flexShrink?: Responsive<number>
   focusedValue?: DateValue | null
   gridArea?: Responsive<string>
   gridColumn?: Responsive<string>
   gridColumnEnd?: Responsive<string>
   gridColumnStart?: Responsive<string>
   gridRow?: Responsive<string>
   gridRowEnd?: Responsive<string>
   gridRowStart?: Responsive<string>
   height?: Responsive<DimensionValue>
   id?: string
   isDateUnavailable?: (DateValue) => boolean
   isDisabled?: boolean = false
   isHidden?: Responsive<boolean>
   isInvalid?: boolean
   isReadOnly?: boolean = false
   justifySelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'center' | 'left' | 'right' | 'stretch'>
   left?: Responsive<DimensionValue>
   margin?: Responsive<DimensionValue>
   marginBottom?: Responsive<DimensionValue>
   marginEnd?: Responsive<DimensionValue>
   marginStart?: Responsive<DimensionValue>
   marginTop?: Responsive<DimensionValue>
   marginX?: Responsive<DimensionValue>
   marginY?: Responsive<DimensionValue>
   maxHeight?: Responsive<DimensionValue>
   maxValue?: DateValue | null
   maxWidth?: Responsive<DimensionValue>
   minHeight?: Responsive<DimensionValue>
   minValue?: DateValue | null
   minWidth?: Responsive<DimensionValue>
   onChange?: (RangeValue<MappedDateValue<DateValue>>) => void
   onFocusChange?: (CalendarDate) => void
   order?: Responsive<number>
   pageBehavior?: PageBehavior = visible
   position?: Responsive<'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'>
   right?: Responsive<DimensionValue>
-  selectionAlignment?: 'start' | 'center' | 'end' = 'center'
   start?: Responsive<DimensionValue>
   top?: Responsive<DimensionValue>
   value?: RangeValue<DateValue> | null
   visibleMonths?: number = 1
   zIndex?: Responsive<number>
 }

/@react-spectrum/calendar:SpectrumCalendarProps

 SpectrumCalendarProps <T extends DateValue> {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
   alignSelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'center' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'stretch'>
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean = false
   bottom?: Responsive<DimensionValue>
   createCalendar?: (CalendarIdentifier) => Calendar
   defaultFocusedValue?: DateValue | null
   defaultValue?: DateValue | null
   end?: Responsive<DimensionValue>
   errorMessage?: ReactNode
   firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
   flex?: Responsive<string | number | boolean>
   flexBasis?: Responsive<number | string>
   flexGrow?: Responsive<number>
   flexShrink?: Responsive<number>
   focusedValue?: DateValue | null
   gridArea?: Responsive<string>
   gridColumn?: Responsive<string>
   gridColumnEnd?: Responsive<string>
   gridColumnStart?: Responsive<string>
   gridRow?: Responsive<string>
   gridRowEnd?: Responsive<string>
   gridRowStart?: Responsive<string>
   height?: Responsive<DimensionValue>
   id?: string
   isDateUnavailable?: (DateValue) => boolean
   isDisabled?: boolean = false
   isHidden?: Responsive<boolean>
   isInvalid?: boolean
   isReadOnly?: boolean = false
   justifySelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'center' | 'left' | 'right' | 'stretch'>
   left?: Responsive<DimensionValue>
   margin?: Responsive<DimensionValue>
   marginBottom?: Responsive<DimensionValue>
   marginEnd?: Responsive<DimensionValue>
   marginStart?: Responsive<DimensionValue>
   marginTop?: Responsive<DimensionValue>
   marginX?: Responsive<DimensionValue>
   marginY?: Responsive<DimensionValue>
   maxHeight?: Responsive<DimensionValue>
   maxValue?: DateValue | null
   maxWidth?: Responsive<DimensionValue>
   minHeight?: Responsive<DimensionValue>
   minValue?: DateValue | null
   minWidth?: Responsive<DimensionValue>
   onChange?: (MappedDateValue<DateValue>) => void
   onFocusChange?: (CalendarDate) => void
   order?: Responsive<number>
   pageBehavior?: PageBehavior = visible
   position?: Responsive<'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'>
   right?: Responsive<DimensionValue>
-  selectionAlignment?: 'start' | 'center' | 'end' = 'center'
   start?: Responsive<DimensionValue>
   top?: Responsive<DimensionValue>
   value?: DateValue | null
   visibleMonths?: number = 1
   zIndex?: Responsive<number>
 }

/@react-spectrum/calendar:SpectrumRangeCalendarProps

 SpectrumRangeCalendarProps <T extends DateValue> {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
   alignSelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'center' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'stretch'>
   allowsNonContiguousRanges?: boolean
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean = false
   bottom?: Responsive<DimensionValue>
   createCalendar?: (CalendarIdentifier) => Calendar
   defaultFocusedValue?: DateValue | null
   defaultValue?: RangeValue<DateValue> | null
   end?: Responsive<DimensionValue>
   errorMessage?: ReactNode
   firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
   flex?: Responsive<string | number | boolean>
   flexBasis?: Responsive<number | string>
   flexGrow?: Responsive<number>
   flexShrink?: Responsive<number>
   focusedValue?: DateValue | null
   gridArea?: Responsive<string>
   gridColumn?: Responsive<string>
   gridColumnEnd?: Responsive<string>
   gridColumnStart?: Responsive<string>
   gridRow?: Responsive<string>
   gridRowEnd?: Responsive<string>
   gridRowStart?: Responsive<string>
   height?: Responsive<DimensionValue>
   id?: string
   isDateUnavailable?: (DateValue) => boolean
   isDisabled?: boolean = false
   isHidden?: Responsive<boolean>
   isInvalid?: boolean
   isReadOnly?: boolean = false
   justifySelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'center' | 'left' | 'right' | 'stretch'>
   left?: Responsive<DimensionValue>
   margin?: Responsive<DimensionValue>
   marginBottom?: Responsive<DimensionValue>
   marginEnd?: Responsive<DimensionValue>
   marginStart?: Responsive<DimensionValue>
   marginTop?: Responsive<DimensionValue>
   marginX?: Responsive<DimensionValue>
   marginY?: Responsive<DimensionValue>
   maxHeight?: Responsive<DimensionValue>
   maxValue?: DateValue | null
   maxWidth?: Responsive<DimensionValue>
   minHeight?: Responsive<DimensionValue>
   minValue?: DateValue | null
   minWidth?: Responsive<DimensionValue>
   onChange?: (RangeValue<MappedDateValue<DateValue>>) => void
   onFocusChange?: (CalendarDate) => void
   order?: Responsive<number>
   pageBehavior?: PageBehavior = visible
   position?: Responsive<'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'>
   right?: Responsive<DimensionValue>
-  selectionAlignment?: 'start' | 'center' | 'end' = 'center'
   start?: Responsive<DimensionValue>
   top?: Responsive<DimensionValue>
   value?: RangeValue<DateValue> | null
   visibleMonths?: number = 1
   zIndex?: Responsive<number>
 }

@react-spectrum/s2

/@react-spectrum/s2:ActionButton

 ActionButton {
   UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   aria-controls?: string
   aria-current?: boolean | 'true' | 'false' | 'page' | 'step' | 'location' | 'date' | 'time'
   aria-describedby?: string
   aria-details?: string
   aria-disabled?: boolean | 'true' | 'false'
   aria-expanded?: boolean | 'true' | 'false'
   aria-haspopup?: boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | 'true' | 'false'
   aria-label?: string
   aria-labelledby?: string
   aria-pressed?: boolean | 'true' | 'false' | 'mixed'
   autoFocus?: boolean
   children: ReactNode
   excludeFromTabOrder?: boolean
   form?: string
   formAction?: string
   formEncType?: string
   formMethod?: string
   formNoValidate?: boolean
   formTarget?: string
   id?: string
   isDisabled?: boolean
+  isPending?: boolean
   isQuiet?: boolean
   name?: string
   onBlur?: (FocusEvent<Target>) => void
   onFocus?: (FocusEvent<Target>) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onPress?: (PressEvent) => void
   onPressChange?: (boolean) => void
   onPressEnd?: (PressEvent) => void
   onPressStart?: (PressEvent) => void
   onPressUp?: (PressEvent) => void
   preventFocusOnPress?: boolean
   size?: 'XS' | 'S' | 'M' | 'L' | 'XL' = 'M'
   slot?: string | null
   staticColor?: 'black' | 'white' | 'auto'
   styles?: StylesProp
   type?: 'button' | 'submit' | 'reset' = 'button'
   value?: string
 }

/@react-spectrum/s2:Calendar

 Calendar <T extends DateValue> {
   UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean = false
   children?: ChildrenOrFunction<CalendarRenderProps>
   createCalendar?: (CalendarIdentifier) => Calendar
   defaultFocusedValue?: DateValue | null
   defaultValue?: DateValue | null
   errorMessage?: ReactNode
   firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
   focusedValue?: DateValue | null
   id?: string
   isDateUnavailable?: (DateValue) => boolean
   isDisabled?: boolean = false
   isInvalid?: boolean
   isReadOnly?: boolean = false
   maxValue?: DateValue | null
   minValue?: DateValue | null
   onChange?: (MappedDateValue<DateValue>) => void
   onFocusChange?: (CalendarDate) => void
   pageBehavior?: PageBehavior = visible
-  selectionAlignment?: 'start' | 'center' | 'end' = 'center'
   slot?: string | null
   styles?: StylesProp
   value?: DateValue | null
   visibleMonths?: number = 1

/@react-spectrum/s2:RangeCalendar

 RangeCalendar <T extends DateValue> {
   UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   allowsNonContiguousRanges?: boolean
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean = false
   children?: ChildrenOrFunction<RangeCalendarRenderProps>
   createCalendar?: (CalendarIdentifier) => Calendar
   defaultFocusedValue?: DateValue | null
   defaultValue?: RangeValue<DateValue> | null
   errorMessage?: ReactNode
   firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
   focusedValue?: DateValue | null
   id?: string
   isDateUnavailable?: (DateValue) => boolean
   isDisabled?: boolean = false
   isInvalid?: boolean
   isReadOnly?: boolean = false
   maxValue?: DateValue | null
   minValue?: DateValue | null
   onChange?: (RangeValue<MappedDateValue<DateValue>>) => void
   onFocusChange?: (CalendarDate) => void
   pageBehavior?: PageBehavior = visible
-  selectionAlignment?: 'start' | 'center' | 'end' = 'center'
   slot?: string | null
   styles?: StylesProp
   value?: RangeValue<DateValue> | null
   visibleMonths?: number = 1

/@react-spectrum/s2:Cell

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

/@react-spectrum/s2:ActionButtonProps

 ActionButtonProps {
   UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   aria-controls?: string
   aria-current?: boolean | 'true' | 'false' | 'page' | 'step' | 'location' | 'date' | 'time'
   aria-describedby?: string
   aria-details?: string
   aria-disabled?: boolean | 'true' | 'false'
   aria-expanded?: boolean | 'true' | 'false'
   aria-haspopup?: boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | 'true' | 'false'
   aria-label?: string
   aria-labelledby?: string
   aria-pressed?: boolean | 'true' | 'false' | 'mixed'
   autoFocus?: boolean
   children: ReactNode
   excludeFromTabOrder?: boolean
   form?: string
   formAction?: string
   formEncType?: string
   formMethod?: string
   formNoValidate?: boolean
   formTarget?: string
   id?: string
   isDisabled?: boolean
+  isPending?: boolean
   isQuiet?: boolean
   name?: string
   onBlur?: (FocusEvent<Target>) => void
   onFocus?: (FocusEvent<Target>) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onPress?: (PressEvent) => void
   onPressChange?: (boolean) => void
   onPressEnd?: (PressEvent) => void
   onPressStart?: (PressEvent) => void
   onPressUp?: (PressEvent) => void
   preventFocusOnPress?: boolean
   size?: 'XS' | 'S' | 'M' | 'L' | 'XL' = 'M'
   slot?: string | null
   staticColor?: 'black' | 'white' | 'auto'
   styles?: StylesProp
   type?: 'button' | 'submit' | 'reset' = 'button'
   value?: string
 }

/@react-spectrum/s2:CalendarProps

 CalendarProps <T extends DateValue> {
   UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean = false
   children?: ChildrenOrFunction<CalendarRenderProps>
   createCalendar?: (CalendarIdentifier) => Calendar
   defaultFocusedValue?: DateValue | null
   defaultValue?: DateValue | null
   errorMessage?: ReactNode
   firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
   focusedValue?: DateValue | null
   id?: string
   isDateUnavailable?: (DateValue) => boolean
   isDisabled?: boolean = false
   isInvalid?: boolean
   isReadOnly?: boolean = false
   maxValue?: DateValue | null
   minValue?: DateValue | null
   onChange?: (MappedDateValue<DateValue>) => void
   onFocusChange?: (CalendarDate) => void
   pageBehavior?: PageBehavior = visible
-  selectionAlignment?: 'start' | 'center' | 'end' = 'center'
   slot?: string | null
   styles?: StylesProp
   value?: DateValue | null
   visibleMonths?: number = 1

/@react-spectrum/s2:RangeCalendarProps

 RangeCalendarProps <T extends DateValue> {
   UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   allowsNonContiguousRanges?: boolean
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean = false
   children?: ChildrenOrFunction<RangeCalendarRenderProps>
   createCalendar?: (CalendarIdentifier) => Calendar
   defaultFocusedValue?: DateValue | null
   defaultValue?: RangeValue<DateValue> | null
   errorMessage?: ReactNode
   firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
   focusedValue?: DateValue | null
   id?: string
   isDateUnavailable?: (DateValue) => boolean
   isDisabled?: boolean = false
   isInvalid?: boolean
   isReadOnly?: boolean = false
   maxValue?: DateValue | null
   minValue?: DateValue | null
   onChange?: (RangeValue<MappedDateValue<DateValue>>) => void
   onFocusChange?: (CalendarDate) => void
   pageBehavior?: PageBehavior = visible
-  selectionAlignment?: 'start' | 'center' | 'end' = 'center'
   slot?: string | null
   styles?: StylesProp
   value?: RangeValue<DateValue> | null
   visibleMonths?: number = 1

/@react-spectrum/s2:CellProps

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

@react-stately/calendar

/@react-stately/calendar:CalendarStateOptions

 CalendarStateOptions <T extends DateValue = DateValue> {
   autoFocus?: boolean = false
   createCalendar: (CalendarIdentifier) => Calendar
   defaultFocusedValue?: DateValue | null
   defaultValue?: DateValue | null
   errorMessage?: ReactNode
   firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
   focusedValue?: DateValue | null
   isDateUnavailable?: (DateValue) => boolean
   isDisabled?: boolean = false
   isInvalid?: boolean
   isReadOnly?: boolean = false
   locale: string
   maxValue?: DateValue | null
   minValue?: DateValue | null
   onChange?: (MappedDateValue<DateValue>) => void
   onFocusChange?: (CalendarDate) => void
   pageBehavior?: PageBehavior = visible
-  selectionAlignment?: 'start' | 'center' | 'end' = 'center'
+  selectionAlignment?: 'start' | 'center' | 'end'
   value?: DateValue | null
   visibleDuration?: DateDuration = {months: 1}
 }

/@react-stately/calendar:RangeCalendarStateOptions

 RangeCalendarStateOptions <T extends DateValue = DateValue> {
   allowsNonContiguousRanges?: boolean
   autoFocus?: boolean = false
   createCalendar: (CalendarIdentifier) => Calendar
   defaultFocusedValue?: DateValue | null
   defaultValue?: RangeValue<DateValue> | null
   errorMessage?: ReactNode
   firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
   focusedValue?: DateValue | null
   isDateUnavailable?: (DateValue) => boolean
   isDisabled?: boolean = false
   isInvalid?: boolean
   isReadOnly?: boolean = false
   locale: string
   maxValue?: DateValue | null
   minValue?: DateValue | null
   onChange?: (RangeValue<MappedDateValue<DateValue>>) => void
   onFocusChange?: (CalendarDate) => void
   pageBehavior?: PageBehavior = visible
-  selectionAlignment?: 'start' | 'center' | 'end' = 'center'
   value?: RangeValue<DateValue> | null
   visibleDuration?: DateDuration = {months: 1}
 }

snowystinger added 2 commits August 21, 2025 17:57

table inline editing

957f321

remove extra exports

097ba50

snowystinger added 2 commits August 25, 2025 16:43

Add extra controls for different interactions, mobile, inline save, i…

98e8d84

…nvalid state, click off

fix lint

7ea9be0

snowystinger and others added 2 commits August 25, 2025 17:30

Add fake saving logic

f447491

Merge branch 'main' into inline-table-editing

59bea14

snowystinger added 2 commits August 25, 2025 17:51

use better color and fix flex grow

0bff5e3

add back hiding logic

feb8a96

simplify fake save logic

9c6e6f5

Merge branch 'main' into inline-table-editing

337b809

set boundary element of the table, design updates

6be0394

snowystinger commented Aug 27, 2025

View reviewed changes

snowystinger added 2 commits August 28, 2025 14:36

Add picker, restore focus to cell when trigger is hidden, converge im…

a887e36

…plementation to make generic, fix density, individual cell saving state, use touch detection for showing all the time

fix lint and small screen rendering

150efc7

snowystinger commented Aug 28, 2025

View reviewed changes

snowystinger added 2 commits September 1, 2025 11:41

Change editable cell hover color when row is hovered

a471192

invert hover color for non-selection

7ef763a

use a pending action button and change background cell color for hover

bffae5a

snowystinger and others added 2 commits September 1, 2025 13:33

fix lint

7dd5a30

Merge branch 'main' into inline-table-editing

3b478af

snowystinger added 2 commits September 2, 2025 14:06

fix density, pending is disabled, some of cell sizing

65c4e61

Add bulk edit bar

9679410

github-actions bot added the needs translations label Sep 2, 2025

fix lint

2a80b8b

add "More" actions and remove actionbar bulk actions

b02b164

github-actions bot removed the needs translations label Sep 4, 2025

fix rendering

b2e8d7e

wip: table inline editing #8754

Are you sure you want to change the base?

wip: table inline editing #8754

Uh oh!

Conversation

snowystinger commented Aug 21, 2025

✅ Pull Request Checklist:

📝 Test Instructions:

🧢 Your Project:

Uh oh!

rspbot commented Aug 21, 2025

Uh oh!

rspbot commented Aug 21, 2025

Uh oh!

rspbot commented Aug 25, 2025

Uh oh!

rspbot commented Aug 25, 2025

Uh oh!

rspbot commented Aug 25, 2025

Uh oh!

rspbot commented Aug 25, 2025

Uh oh!

rspbot commented Aug 25, 2025

Uh oh!

rspbot commented Aug 27, 2025

Uh oh!

rspbot commented Aug 27, 2025

Uh oh!

snowystinger Aug 27, 2025

Choose a reason for hiding this comment

Uh oh!

snowystinger Aug 28, 2025

Choose a reason for hiding this comment

Uh oh!

rspbot commented Aug 28, 2025

Uh oh!

snowystinger Aug 28, 2025

Choose a reason for hiding this comment

Uh oh!

rspbot commented Sep 1, 2025

Uh oh!

rspbot commented Sep 1, 2025

Uh oh!

rspbot commented Sep 1, 2025

Uh oh!

rspbot commented Sep 2, 2025

Uh oh!

rspbot commented Sep 4, 2025

Uh oh!

rspbot commented Sep 4, 2025

Uh oh!

rspbot commented Sep 4, 2025

react-aria-components

/react-aria-components:Calendar

/react-aria-components:RangeCalendar

/react-aria-components:Cell

/react-aria-components:CalendarProps

/react-aria-components:RangeCalendarProps

/react-aria-components:CellProps

@react-aria/calendar

/@react-aria/calendar:AriaCalendarProps

/@react-aria/calendar:AriaRangeCalendarProps

/@react-aria/calendar:CalendarProps

/@react-aria/calendar:RangeCalendarProps

@react-aria/table

/@react-aria/table:AriaTableCellProps

@react-spectrum/calendar

/@react-spectrum/calendar:Calendar

/@react-spectrum/calendar:RangeCalendar

/@react-spectrum/calendar:SpectrumCalendarProps

/@react-spectrum/calendar:SpectrumRangeCalendarProps

@react-spectrum/s2

/@react-spectrum/s2:ActionButton

/@react-spectrum/s2:Calendar

/@react-spectrum/s2:RangeCalendar

/@react-spectrum/s2:Cell

/@react-spectrum/s2:ActionButtonProps

/@react-spectrum/s2:CalendarProps

/@react-spectrum/s2:RangeCalendarProps

/@react-spectrum/s2:CellProps