Sections in table #4210

LFDanLu · 2023-03-15T20:53:28Z

Closes

✅ 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:

Test the various table section stories. For DnD, look for the "complex drag between tables (sections)" story in the Drag and Drop -> Util Handlers section

Known issues:

Reorder operations break if dropping onto a drop position adjacent to the dragged item
Reorder operations lose focus to the body

🧢 Your Project:

RSP

…in_list_table

…thout note: this is pretty broken, awaiting feedback from spectrum since it seems like there might be some cases that need to be handled

commited them so they wouldnt just be in my stash

…d items

using this information to get rid of the extra wrapping row group when there are sections

parent key of the section is the body but this key isnt in the keymap

renders extra whitespace for some reason

toggling selection on and off in a table with sections behaves strangely

pausing here since collectionbuilder will be changed in the future

…in_list_table

…to a section as per feedback from spectrum design meeting

…xist also make ListView section have title as a required prop

…eaders" This reverts commit ec61a57.

rspbot · 2023-04-24T16:45:37Z

Build successful! 🎉

includes an api update to keyboard delegate methods and table/grid hooks return the keyboard delegate now

fixes case where row column header was a valid drop target, empty section drop indicator, erroneous skipping of after drop position when going from empty section to previous row drop position

this means we dont have to export keyboardDelegate from useTable/useGrid and instead we can have keyboard DnD keyboard navigation centralized in useDroppableCollection by providing itemFilter to the keyAbove/Below getters in Listlayout which ListView and TableView use. Also fixes various bugs I discovered such as focusing a non-valid drop target if the last focused key in the droppable collection was a column header and other bugs with pageup/down during keyboard DnD

rspbot · 2023-04-25T21:31:24Z

Build successful! 🎉

…sections

rspbot · 2023-04-26T23:11:03Z

Build successful! 🎉

this lead to weird behavior where you actually created new sections. Only dropping ON the section should be allowed, the other drop positions should come from after the preceeding row or before the following row in the section

rspbot · 2023-04-27T00:32:10Z

Build successful! 🎉

…in_table

rspbot · 2023-04-28T00:54:18Z

Build successful! 🎉

rspbot · 2023-05-02T16:47:35Z

Build successful! 🎉

rspbot · 2023-05-02T21:05:04Z

Build successful! 🎉

LFDanLu · 2023-05-02T21:00:56Z

packages/@react-aria/dnd/src/useDropIndicator.ts

+  /** A delegate object that implements behavior for keyboard focus movement. */
+  keyboardDelegate?: KeyboardDelegate<unknown>


Update to useDropIndicator api, see discussion here for background.

LFDanLu · 2023-05-02T21:01:05Z

packages/@react-aria/dnd/src/useDropIndicator.ts

+    // TODO: I've changed it so it will announce "insert after"/"insert before" target if the drop position is between the target and a following/preceeding section
+    // instead of announcing "insert between target and NEXT/PREV_SECTION_ROW". Gather opinions
+    let keyBefore = keyboardDelegate != null ? keyboardDelegate.getKeyAbove(target.key) : collection.getKeyBefore(target.key);


open to opinions here

Update so it announces the section name as well, make it announce as "before item A in section BLAH"

LFDanLu · 2023-05-02T21:04:50Z

packages/@react-aria/grid/src/useGridSectionAnnouncement.ts

+  // VoiceOver on MacOS doesn't announce TableView/ListView sections when navigating with arrow keys so we do this ourselves
+  // TODO: NVDA announces the section title when navigating into it with arrow keys as "SECTION TITLE grouping" by defualt, so removing isMac() doubles up on the section title announcement
+  // a bit. However, this does add an announcement for the number of rows in a section which might be
+  // Mobile screen readers don't cause this announcement to fire until focus happens on a row via double tap which is pretty strange
+  useUpdateEffect(() => {
+    if (isMac() && focusedItem != null && selectionManager.isFocused && sectionKey !== lastSection.current) {


Open to opinions here if people feel like we wanna make this custom announcement in other non-Mac screenreaders

LFDanLu · 2023-05-02T21:11:24Z

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

+      // TODO: Chrome VO states "empty row group", doesn't happen in Safari VO. Doesn't happen in NVDA or TalkBack
+      role: 'rowgroup',
+      'aria-labelledby': headerId


As stated here, Chrome VO doesn't have the best experience when navigating with arrows keys. Using control + option + arrow keys doesn't run into this problem and may be the preferred way that VO users will navigate through the table in general though. Will require some more exploration with different aria configurations but IMO this is ok for a first iteration (e.g. trying aria-posinset, aria-level, and aria-setsize instead of aria-rowindex resulted in a subpar experience)

LFDanLu · 2023-05-02T21:16:08Z

packages/@react-spectrum/table/src/index.ts

+
+// Override TS for TableSection to require title prop.
+const SpectrumTableSection = TableSection as <T>(props: SpectrumTableSectionProps<T>) => JSX.Element;
+export {SpectrumTableSection as TableSection};


Note we are exporting a TableSection and not reusing the Section collection. This feels like it makes more sense since all of Table's collection components are table specific anyways

LFDanLu · 2023-05-02T21:24:42Z

packages/@react-stately/layout/src/ListLayout.ts

  }

-  getKeyAbove(key: Key): Key | null {
+  getKeyAbove(key: Key, itemFilter: (item: Node<T>) => boolean = item => item.type === 'item'): Key | null {


Note the API change here to the getKey methods for ListLayout. This is so we can include sections as valid return keys from these methods ONLY during drag and drop. I'm a bit torn if modifying ListLayout is the best place to do this, but it does allow ListView's DnD to use the same code this way since they both provide a layout to useDroppableCollection.

Alternatives:

create a Table DnD specific keyboard delegate

Where would this live? Is it too specific? Opted not to do this for these reasons

Modifying the Table/GridKeyboardDelegate getKey getters instead

Would need the delegate to be returned by useTable, changes felt odd. Code for this can be found before this commit aka in 96f4921

LFDanLu · 2023-05-02T21:27:28Z

packages/@react-stately/layout/src/TableLayout.ts

-          // Skip persisted rows that overlap with visible cells.
-          while (persistedRowIndices && persistIndex < persistedRowIndices.length && persistedRowIndices[persistIndex] < i) {
+        } else {
+          // Note:


A variety of notes here to remind myself of the format of various pieces of data, happy to remove if people feel like it isn't helpful

LFDanLu · 2023-05-02T21:30:37Z

packages/@react-stately/selection/src/SelectionManager.ts

+    // TODO: discuss how best to indicate that a row/item is not selectable without making it disabled
+    // Some general item prop (isInert, notSelectable)? isSectionHeader might be too specific.
+    // Maybe not an item prop? Maybe I shouldn't be making the section header an actual row/item in the collection
+    if (!item || (item.type === 'cell' && !this.allowsCellSelection) || item.props?.isSectionHeader) {


Open question, maybe it would be useful to have a generic prop that marks a node as non-selectable? Perhaps a non-factor when moving to RAC collections

LFDanLu · 2023-05-02T21:33:25Z

packages/@react-types/shared/src/collections.d.ts


-export interface KeyboardDelegate {
+export interface KeyboardDelegate<T> {
+  // TODO: what do we think about this update to the keyboard delegate api?


As mentioned previously, changes in this PR include a update to the options provided to KeyboardDelegate's getKey getters

Try doing T extends object instead to make this a non-breaking change for someone who made their own keyboard delegate

EDIT: Maybe I could make it unknown instead? Or change it so it is typeFilter: (type) => boolean? Is it actually a breaking change? Wouldn't someone implementing a KeyboardDelegate need a generic for their collection typing?

rspbot · 2023-05-02T21:43:10Z

Build successful! 🎉

LFDanLu · 2023-05-03T20:39:22Z

packages/@react-spectrum/table/src/index.ts

 export {
  TableHeader,
  TableBody,
-  Section,


Keep this in case someone was using it

as per discussion with team, would be nice to have some context for insertion indicators immediatly before or after a section. Also addressed some review comments

rspbot · 2023-05-04T01:11:34Z

Build successful! 🎉

rspbot · 2023-05-04T01:11:36Z

## API Changes

unknown top level export { type: 'identifier', name: 'Column' }
unknown top level export { type: 'identifier', name: 'TableSection' }
unknown top level export { type: 'identifier', name: 'Column' }
unknown type { type: 'link' }
unknown type { type: 'link' }
unknown type { type: 'link' }
unknown type { type: 'link' }
unknown type { type: 'link' }
unknown type { type: 'link' }
undefined already in set
undefined already in set
undefined already in set
undefined already in set
GridRowProps already in set

@react-aria/autocomplete

AriaSearchAutocompleteOptions

 AriaSearchAutocompleteOptions<T> {
   inputRef: RefObject<HTMLInputElement>
-  keyboardDelegate?: KeyboardDelegate
+  keyboardDelegate?: KeyboardDelegate<T>
   listBoxRef: RefObject<HTMLElement>
   popoverRef: RefObject<HTMLDivElement>
 }

it changed:

useSearchAutocomplete

@react-aria/combobox

AriaComboBoxOptions

 AriaComboBoxOptions<T> {
   buttonRef?: RefObject<Element>
   inputRef: RefObject<HTMLInputElement>
-  keyboardDelegate?: KeyboardDelegate
+  keyboardDelegate?: KeyboardDelegate<T>
   listBoxRef: RefObject<HTMLElement>
   popoverRef: RefObject<Element>
 }

it changed:

useComboBox

@react-aria/dnd

DroppableCollectionOptions

 DroppableCollectionOptions {
   dropTargetDelegate: DropTargetDelegate
-  keyboardDelegate: KeyboardDelegate
+  keyboardDelegate: KeyboardDelegate<unknown>
 }

it changed:

useDroppableCollection

DropIndicatorProps

 DropIndicatorProps {
+  keyboardDelegate?: KeyboardDelegate<unknown>
   target: DropTarget
 }

it changed:

useDropIndicator

@react-aria/grid

useGrid

changed by:

GridProps

 useGrid<T> {
-  props: GridProps
+  props: GridProps<T>
   state: GridState<T, GridCollection<T>>
   ref: RefObject<HTMLElement>
   returnVal: undefined
 }

GridProps

-GridProps {
-  focusMode?: 'row' | 'cell' = 'row'
-  getRowText?: (Key) => string = (key) => state.collection.getItem(key)?.textValue
-  isVirtualized?: boolean
-  keyboardDelegate?: KeyboardDelegate
-  onCellAction?: (Key) => void
-  onRowAction?: (Key) => void
-  scrollRef?: RefObject<HTMLElement>
-}
+

it changed:

useGrid

GridRowProps

 GridRowProps<T> {
   isVirtualized?: boolean
-  node: Node<T>
+  node: GridNode<T>
   shouldSelectOnPressUp?: boolean
 }

it changed:

useGridRow

useGridSectionAnnouncement

-
+useGridSectionAnnouncement<T> {
+  state: GridSelectionState<T>
+  returnVal: undefined
+}

undefined

-
+GridProps<T> {
+  focusMode?: 'row' | 'cell' = 'row'
+  getRowText?: (Key) => string = (key) => state.collection.getItem(key)?.textValue
+  isVirtualized?: boolean
+  keyboardDelegate?: KeyboardDelegate<T>
+  onCellAction?: (Key) => void
+  onRowAction?: (Key) => void
+  scrollRef?: RefObject<HTMLElement>
+}

@react-aria/gridlist

AriaGridListOptions

 AriaGridListOptions<T> {
   disabledBehavior?: DisabledBehavior
   isVirtualized?: boolean
-  keyboardDelegate?: KeyboardDelegate
+  keyboardDelegate?: KeyboardDelegate<T>
   onAction?: (Key) => void
 }

it changed:

useGridList

@react-aria/listbox

AriaListBoxProps

 AriaListBoxOptions<T> {
   isVirtualized?: boolean
-  keyboardDelegate?: KeyboardDelegate
+  keyboardDelegate?: KeyboardDelegate<T>
   shouldFocusOnHover?: boolean
   shouldSelectOnPressUp?: boolean
   shouldUseVirtualFocus?: boolean
 }

@react-aria/menu

AriaMenuOptions

 AriaMenuOptions<T> {
   isVirtualized?: boolean
-  keyboardDelegate?: KeyboardDelegate
+  keyboardDelegate?: KeyboardDelegate<T>
 }

it changed:

useMenu

@react-aria/select

AriaSelectOptions

 AriaSelectOptions<T> {
-  keyboardDelegate?: KeyboardDelegate
+  keyboardDelegate?: KeyboardDelegate<T>
 }

it changed:

useSelect

@react-aria/selection

useSelectableCollection

changed by:

AriaSelectableCollectionOptions

-useSelectableCollection {
-  options: AriaSelectableCollectionOptions
-  returnVal: undefined
-}
+

useSelectableList

changed by:

AriaSelectableListOptions

-useSelectableList {
-  props: AriaSelectableListOptions
-  returnVal: undefined
-}
+

AriaSelectableCollectionOptions

-AriaSelectableCollectionOptions {
-  allowsTabNavigation?: boolean
-  autoFocus?: boolean | FocusStrategy = false
-  disallowEmptySelection?: boolean = false
-  disallowSelectAll?: boolean = false
-  disallowTypeAhead?: boolean = false
-  isVirtualized?: boolean
-  keyboardDelegate: KeyboardDelegate
-  ref: RefObject<HTMLElement>
-  scrollRef?: RefObject<HTMLElement>
-  selectOnFocus?: boolean = false
-  selectionManager: MultipleSelectionManager
-  shouldFocusWrap?: boolean = false
-  shouldUseVirtualFocus?: boolean
-}
+

it changed:

useSelectableCollection

AriaSelectableListOptions

-AriaSelectableListOptions {
-  allowsTabNavigation?: boolean
-  autoFocus?: boolean | FocusStrategy = false
-  collection: Collection<Node<unknown>>
-  disabledKeys: Set<Key>
-  disallowEmptySelection?: boolean = false
-  disallowTypeAhead?: boolean = false
-  isVirtualized?: boolean
-  keyboardDelegate?: KeyboardDelegate
-  ref?: RefObject<HTMLElement>
-  selectOnFocus?: boolean = false
-  selectionManager: MultipleSelectionManager
-  shouldFocusWrap?: boolean = false
-  shouldUseVirtualFocus?: boolean
-}
+

it changed:

useSelectableList

AriaTypeSelectOptions

 AriaTypeSelectOptions {
-  keyboardDelegate: KeyboardDelegate
+  keyboardDelegate: KeyboardDelegate<unknown>
   onTypeSelect?: (Key) => void
   selectionManager: MultipleSelectionManager
 }

it changed:

useTypeSelect

undefined

-
+useSelectableCollection<T> {
+  options: AriaSelectableCollectionOptions<T>
+  returnVal: undefined
+}

undefined

-
+useSelectableList<T> {
+  props: AriaSelectableListOptions<T>
+  returnVal: undefined
+}

undefined

-
+AriaSelectableCollectionOptions<T> {
+  allowsTabNavigation?: boolean
+  autoFocus?: boolean | FocusStrategy = false
+  disallowEmptySelection?: boolean = false
+  disallowSelectAll?: boolean = false
+  disallowTypeAhead?: boolean = false
+  isVirtualized?: boolean
+  keyboardDelegate: KeyboardDelegate<T>
+  ref: RefObject<HTMLElement>
+  scrollRef?: RefObject<HTMLElement>
+  selectOnFocus?: boolean = false
+  selectionManager: MultipleSelectionManager
+  shouldFocusWrap?: boolean = false
+  shouldUseVirtualFocus?: boolean
+}

undefined

-
+AriaSelectableListOptions<T> {
+  allowsTabNavigation?: boolean
+  autoFocus?: boolean | FocusStrategy = false
+  collection: Collection<Node<unknown>>
+  disabledKeys: Set<Key>
+  disallowEmptySelection?: boolean = false
+  disallowTypeAhead?: boolean = false
+  isVirtualized?: boolean
+  keyboardDelegate?: KeyboardDelegate<T>
+  ref?: RefObject<HTMLElement>
+  selectOnFocus?: boolean = false
+  selectionManager: MultipleSelectionManager
+  shouldFocusWrap?: boolean = false
+  shouldUseVirtualFocus?: boolean
+}

@react-aria/table

GridRowProps

 GridRowProps<T> {
   isVirtualized?: boolean
-  node: Node<T>
+  node: GridNode<T>
   shouldSelectOnPressUp?: boolean
 }

it changed:

useGridRow

useTableSection

changed by:

AriaTableSectionProps
TableSectionAria

-
+useTableSection<T> {
+  props: AriaTableSectionProps<T>
+  state: TableState<T>
+  returnVal: undefined
+}

AriaTableSectionProps

-
+AriaTableSectionProps<T> {
+  isVirtualized?: boolean
+  node: GridNode<T>
+}

it changed:

useTableSection

TableSectionAria

-
+TableSectionAria {
+  gridCellProps: DOMAttributes
+  rowGroupProps: DOMAttributes
+  rowProps: DOMAttributes
+}

it changed:

useTableSection

@react-stately/layout

ListLayout

 ListLayout<T> {
   allowDisabledKeyFocus: boolean
   buildChild: (Node<T>, number, number) => LayoutNode
   buildCollection: () => Array<LayoutNode>
   buildItem: (Node<T>, number, number) => LayoutNode
   buildNode: (Node<T>, number, number) => LayoutNode
   buildSection: (Node<T>, number, number) => LayoutNode
   collection: Collection<Node<T>>
   constructor: (ListLayoutOptions<T>) => void
   disabledKeys: Set<Key>
   getContentSize: () => void
   getDropTargetFromPoint: (number, number, (DropTarget) => boolean) => DropTarget
   getFinalLayoutInfo: (LayoutInfo) => void
-  getFirstKey: () => Key | null
+  getFirstKey: (any, any, (Node<T>) => boolean) => Key | null
   getInitialLayoutInfo: (LayoutInfo) => void
-  getKeyAbove: (Key) => Key | null
-  getKeyBelow: (Key) => Key | null
+  getKeyAbove: (Key, (Node<T>) => boolean) => Key | null
+  getKeyBelow: (Key, (Node<T>) => boolean) => Key | null
   getKeyForSearch: (string, Key) => Key | null
-  getKeyPageAbove: (Key) => Key | null
-  getKeyPageBelow: (Key) => Key | null
-  getLastKey: () => Key | null
+  getKeyPageAbove: (Key, (Node<T>) => boolean) => Key | null
+  getKeyPageBelow: (Key, (Node<T>) => boolean) => Key | null
+  getLastKey: (any, any, (Node<T>) => boolean) => Key | null
   getLayoutInfo: (Key) => void
   getVisibleLayoutInfos: (Rect) => void
   isLoading: boolean
   isValid: (Node<T>, number) => void
   updateItemSize: (Key, Size) => void
   updateLayoutNode: (Key, LayoutInfo, LayoutInfo) => void
   validate: (InvalidationContext<Node<T>, unknown>) => void
 }

TableLayout

 TableLayout<T> {
   addVisibleLayoutInfos: (Array<LayoutInfo>, LayoutNode, Rect) => void
   binarySearch: (Array<LayoutNode>, Point, 'x' | 'y') => void
   buildBody: (number) => LayoutNode
   buildCell: (GridNode<T>, number, number) => LayoutNode
   buildCollection: () => Array<LayoutNode>
   buildColumn: (GridNode<T>, number, number) => LayoutNode
   buildHeader: () => LayoutNode
   buildHeaderRow: (GridNode<T>, number, number) => LayoutNode
   buildNode: (GridNode<T>, number, number) => LayoutNode
   buildPersistedIndices: () => void
   buildRow: (GridNode<T>, number, number) => LayoutNode
+  buildSection: (Node<T>, number, number) => LayoutNode
   collection: TableCollection<T>
   columnLayout: TableColumnLayout<T>
   columnWidths: Map<Key, number>
   constructor: (TableLayoutOptions<T>) => void
   endResize: () => void
   getColumnMaxWidth: (Key) => number
   getColumnMinWidth: (Key) => number
   getColumnWidth: (Key) => number
   getDropTargetFromPoint: (number, number, (DropTarget) => boolean) => DropTarget
   getEstimatedHeight: (GridNode<T>, number, number, number) => void
   getInitialLayoutInfo: (LayoutInfo) => void
   getRenderedColumnWidth: (GridNode<T>) => void
   getResizerPosition: () => Key
   getVisibleLayoutInfos: (Rect) => void
   isLoading: any
   lastCollection: TableCollection<T>
   lastPersistedKeys: Set<Key>
   persistedIndices: Map<Key, Array<number>>
   resizingColumn: Key | null
   setChildHeights: (Array<LayoutNode>, number) => void
   startResize: (Key) => void
   stickyColumnIndices: Array<number>
   uncontrolledColumns: Map<Key, GridNode<unknown>>
   uncontrolledWidths: Map<Key, ColumnSize>
   updateResizedColumns: (Key, number) => Map<Key, ColumnSize>
   wasLoading: any
 }

@react-stately/table

TableSection

-
+TableSection<T> {
+  props: TableSectionProps<T>
+  returnVal: undefined
+}

LFDanLu added 30 commits February 2, 2023 16:51

first stab at adding ListViewSection

c3b9fe5

Merge branch 'main' of github.com:adobe/react-spectrum into sections_…

ab65acb

…in_list_table

rough modifications to TableBody to accept Sections

13fb063

rough implementation of section in tableview

f86cd72

Merge branch 'main' of github.com:adobe/react-spectrum into sections_…

5d822e2

…in_list_table

update keyboard delegate and add some initial structure

3b9eb67

refactor ListViewSection to work with multiple row groups

01a06d1

updating styles for section headers and first/last listview items

cf184bc

tentative refactor to listview css to unify lists with section and wi…

bdde904

…thout note: this is pretty broken, awaiting feedback from spectrum since it seems like there might be some cases that need to be handled

revert style changes

741c77d

commited them so they wouldnt just be in my stash

adding more stories and trying to add padding after section

808f737

some additional brain storming for adding spacing between sections an…

a13989d

…d items

add useTableSection

62d0b6c

Adding styles to table headers

b2f19df

Adding section tracking to GridCollection + colspan row gridnodes

cfd3529

using this information to get rid of the extra wrapping row group when there are sections

fix sections when table selection is enabled

9dd8ef9

parent key of the section is the body but this key isnt in the keymap

debugging table layout persisted keys

ecdb1d4

renders extra whitespace for some reason

updated buildBody, debugging odd rerendering

7e8b19c

toggling selection on and off in a table with sections behaves strangely

fixing toggling selection for tables with sections

e972a30

pausing here since collectionbuilder will be changed in the future

Merge branch 'main' of github.com:adobe/react-spectrum into sections_…

9737e70

…in_list_table

Add TableSection and cleanup some todos

6b00dae

using pred to avoid focusing sections via keyboard

9185ed8

tentative change to make section announce alongside the row headers

ec61a57

remove extraneous dep

ede57de

Making Table section title required and warning if row doesnt belong …

152ae9d

…to a section as per feedback from spectrum design meeting

make title only required for spectrum table section

dbfbc5c

making ListView and ListBox warn if row isnt in section if sections e…

a169887

…xist also make ListView section have title as a required prop

fix tests and lint

591f136

Revert "tentative change to make section announce alongside the row h…

98a9335

…eaders" This reverts commit ec61a57.

Adding section announcement for grid sections for VoiceOver

2cc10df

LFDanLu added 4 commits April 24, 2023 15:32

tentative support for dropping on empty sections

96f4921

includes an api update to keyboard delegate methods and table/grid hooks return the keyboard delegate now

fix some section dnd bugs

4b7e356

fixes case where row column header was a valid drop target, empty section drop indicator, erroneous skipping of after drop position when going from empty section to previous row drop position

fix crash and support mouse dnd into empty section

98e6faf

fix section drop indicator announcement and navigation between empty …

f500a0c

…sections

LFDanLu added 2 commits April 26, 2023 17:06

updating stories with stopgap solution for updating .value

ddb4bd8

LFDanLu added 2 commits April 27, 2023 13:40

Merge branch 'main' of github.com:adobe/react-spectrum into sections_…

481cd43

…in_table

adding tests and some clean up

6b412f3

Merge branch 'main' into sections_in_table

197d3e5

cleanup and story updates for mobile from testing

8358184

LFDanLu commented May 2, 2023

View reviewed changes

one last comment to clean up

3d38bea

LFDanLu changed the title ~~(WIP) Sections in table~~ Sections in table May 2, 2023

LFDanLu commented May 3, 2023

View reviewed changes

packages/@react-spectrum/table/src/index.ts

export {

TableHeader,

TableBody,

Section,

Copy link

Member Author

LFDanLu May 3, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Keep this in case someone was using it

LFDanLu added 2 commits May 3, 2023 17:59

update announcements for positions before/after section headers

066bf93

as per discussion with team, would be nice to have some context for insertion indicators immediatly before or after a section. Also addressed some review comments

fix test

61712d2

LFDanLu added the on hold label May 24, 2023

LFDanLu closed this May 24, 2023

LFDanLu mentioned this pull request Nov 6, 2024

Support multiple TableBody elements #7312

Open

		/** A delegate object that implements behavior for keyboard focus movement. */
		keyboardDelegate?: KeyboardDelegate<unknown>

Sections in table #4210

Sections in table #4210

Uh oh!

Conversation

LFDanLu commented Mar 15, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Pull Request Checklist:

📝 Test Instructions:

🧢 Your Project:

Uh oh!

rspbot commented Apr 24, 2023

Uh oh!

rspbot commented Apr 25, 2023

Uh oh!

rspbot commented Apr 26, 2023

Uh oh!

rspbot commented Apr 27, 2023

Uh oh!

rspbot commented Apr 28, 2023

Uh oh!

rspbot commented May 2, 2023

Uh oh!

rspbot commented May 2, 2023

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

LFDanLu May 3, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

LFDanLu May 3, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

rspbot commented May 2, 2023

Uh oh!

Choose a reason for hiding this comment

Uh oh!

rspbot commented May 4, 2023

Uh oh!

rspbot commented May 4, 2023

@react-aria/autocomplete

AriaSearchAutocompleteOptions

@react-aria/combobox

AriaComboBoxOptions

@react-aria/dnd

DroppableCollectionOptions

DropIndicatorProps

@react-aria/grid

useGrid

GridProps

GridRowProps

useGridSectionAnnouncement

undefined

@react-aria/gridlist

AriaGridListOptions

@react-aria/listbox

AriaListBoxProps

@react-aria/menu

AriaMenuOptions

@react-aria/select

AriaSelectOptions

@react-aria/selection

useSelectableCollection

LFDanLu commented Mar 15, 2023 •

edited

Loading

LFDanLu May 3, 2023 •

edited

Loading

LFDanLu May 3, 2023 •

edited

Loading