react-spectrum icon indicating copy to clipboard operation
react-spectrum copied to clipboard

Move RAC collections implementation into new package

Open devongovett opened this issue 1 year ago • 3 comments

This moves the collection implementation used by React Aria Components into a new package (@react-aria/collections), enabling it to be used in other React Aria hook-based libraries like NextUI. This includes:

  • CollectionBuilder
  • Collection
  • createBranchComponent and createLeafComponent
  • createHideableComponent and useIsHidden (new hook)
  • useCachedChildren
  • BaseCollection and NodeValue classes, to enable subclassing. I did not move TableCollection out of RAC here. Should we consider that?

Code has been split into multiple files for readability as well.

What's not moving:

  • The collection renderer system, which is more specific to RAC.
  • The Section component, and other specific collection components.

@react-stately/collections (the old collection implementation) will remain unchanged and continue to work. In the future, we may deprecate it once we update all of the documentation examples. Short term, @react-aria/collections will be in a pre-release state, enabling libraries to test it out and provide feedback.

@react-aria/collections is in React Aria rather than React Stately because it relies on react-dom for portals. React Native users will either need to continue using @react-stately/collections or find a new way to implement collections that's specific to React Native.

devongovett avatar Jun 28 '24 01:06 devongovett

## API Changes

unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any', access: 'private' } unknown top level export { type: 'any', access: 'private' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'identifier', name: 'Column' } unknown top level export { type: 'identifier', name: 'Column' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown type { type: 'link' } unknown type { type: 'link' } unknown type { type: 'link' } unknown type { type: 'link' } unknown type { type: 'link' } unknown type { type: 'link' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' } unknown top level export { type: 'any' }

@react-aria/collections

CollectionBuilder

-
+CollectionBuilder<C extends BaseCollection<{}>> {
+  children: (BaseCollection<{}>) => ReactNode
+  content: ReactNode
+  createCollection?: () => BaseCollection<{}>
+}

Collection

+Collection<T extends {}> {
 
+}

createLeafComponent

-
+createLeafComponent<E extends Element, P extends {}> {
+  type: string
+  render: (P, ForwardedRef<E>, any) => ReactNode
+  returnVal: undefined
+}

createBranchComponent

-
+createBranchComponent<E extends Element, P extends {
+    children?: any
+}, T extends {}> {
+  type: string
+  render: (P, ForwardedRef<E>, Node<T>) => ReactNode
+  useChildren: (P) => ReactNode
+  returnVal: undefined
+}

createHideableComponent

-
+createHideableComponent<P = {
+  
+}, T> {
+  fn: (P, React.Ref<T>) => ReactNode | null
+  returnVal: undefined
+}

useIsHidden

-
+useIsHidden {
+  returnVal: undefined
+}

useCachedChildren

changed by:

  • CachedChildrenOptions
-
+useCachedChildren<T extends {}> {
+  props: CachedChildrenOptions<T>
+  returnVal: undefined
+}

BaseCollection

changed by:

  • NodeValue
  • NodeValue
-
+BaseCollection<T> {
+  addNode: (NodeValue<T>) => void
+  at: () => Node<T>
+  clone: () => this
+  commit: (Key | null, Key | null, any) => void
+  getChildren: (Key) => Iterable<Node<T>>
+  getFirstKey: () => void
+  getItem: (Key) => Node<T> | null
+  getKeyAfter: (Key) => void
+  getKeyBefore: (Key) => void
+  getKeys: () => void
+  getLastKey: () => void
+  removeNode: (Key) => void
+  size: any
+  undefined: () => void
+}

NodeValue

changed by:

  • NodeValue
-
+NodeValue<T> {
+  aria-label?: string
+  childNodes: Iterable<Node<T>>
+  clone: () => NodeValue<T>
+  constructor: (string, Key) => void
+  firstChildKey: Key | null
+  hasChildNodes: boolean
+  index: number
+  key: Key
+  lastChildKey: Key | null
+  level: number
+  nextKey: Key | null
+  parentKey: Key | null
+  prevKey: Key | null
+  props: any
+  render?: (Node<any>) => ReactElement
+  rendered: ReactNode
+  textValue: string
+  type: string
+  value: T | null
+}

it changed:

  • BaseCollection
  • NodeValue

CollectionBuilderProps

-
+CollectionBuilderProps<C extends BaseCollection<{}>> {
+  children: (BaseCollection<{}>) => ReactNode
+  content: ReactNode
+  createCollection?: () => BaseCollection<{}>
+}

CollectionProps

+CollectionProps<T> {
 
+}

CachedChildrenOptions

-
+CachedChildrenOptions<T> {
+  addIdAndValue?: boolean
+  children?: ReactNode | (T) => ReactNode
+  dependencies?: Array<any>
+  idScope?: Key
+  items?: Iterable<T>
+}

it changed:

  • useCachedChildren

rspbot avatar Jul 09 '24 20:07 rspbot