Function createCollection

packages/ui/src/collection.tsx:14–126

(name: string)

// due to creating them dynamically via createCollection.

function createCollection<ItemElement extends HTMLElement, ItemData = {}>(name: string) {
  /* -----------------------------------------------------------------------------------------------
   * CollectionProvider
   * ---------------------------------------------------------------------------------------------*/

  const PROVIDER_NAME = name + 'CollectionProvider'

  type ContextValue = {
    collectionRef: React.RefObject<CollectionElement>
    itemMap: Map<React.RefObject<ItemElement>, { ref: React.RefObject<ItemElement> } & ItemData>
  }

  const CollectionContext = React.createContext<ContextValue>({
    collectionRef: { current: null },
    itemMap: new Map(),
  })

  const useCollectionContext = () => React.useContext(CollectionContext)

  const CollectionProvider: React.FC<{ children?: React.ReactNode }> = props => {
    const { children } = props
    const ref = React.useRef<CollectionElement>(null)
    const itemMap = React.useRef<ContextValue['itemMap']>(new Map()).current
    return (
      <CollectionContext.Provider
        value={{
          itemMap,
          collectionRef: ref,
        }}
      >
        {children}
      </CollectionContext.Provider>
    )
  }

  CollectionProvider.displayName = PROVIDER_NAME

  /* -----------------------------------------------------------------------------------------------
   * CollectionSlot
   * ---------------------------------------------------------------------------------------------*/

  const COLLECTION_SLOT_NAME = name + 'CollectionSlot'

  const CollectionSlot = React.forwardRef<CollectionElement, CollectionProps>(
    (props, forwardedRef) => {
      const { children } = props
      const context = useCollectionContext()
      const composedRefs = useComposedRefs(forwardedRef, context.collectionRef)
      return <Slot ref={composedRefs}>{children}</Slot>
    },
  )

  CollectionSlot.displayName = COLLECTION_SLOT_NAME

  /* -----------------------------------------------------------------------------------------------
   * CollectionItem
   * ---------------------------------------------------------------------------------------------*/