From fb198eea9390898d55c4e8bb81b1b27f9b5b0639 Mon Sep 17 00:00:00 2001
From: Matt Hinchliffe <matt@maketea.co.uk>
Date: Sun, 16 Jun 2024 11:57:20 +0100
Subject: [PATCH] Refactor useTagList and renderTagList to accept any list
 element attributes

---
 readme.md                   | 10 +++++-----
 src/components/TagList.tsx  | 28 ++++++++++++++--------------
 src/hooks/useTagList.ts     | 12 ++++++------
 src/test/ReactTags.test.tsx | 29 +++++++++++------------------
 4 files changed, 36 insertions(+), 43 deletions(-)

diff --git a/readme.md b/readme.md
index 5e49b16..ac65d66 100644
--- a/readme.md
+++ b/readme.md
@@ -380,14 +380,14 @@ function CustomRoot({ children, classNames, isActive, isDisabled, isInvalid, ...
 
 #### renderTagList (optional)
 
-A custom tag list component to render. Receives the list object, required tag list element attributes, and [`classNames`](#classNames-optional) as props. Defaults to `null`.
+A custom selected tag list component to render. Receives the selected tags as children, required tag list element attributes, and [`classNames`](#classNames-optional) as props. Defaults to `null`.
 
 ```jsx
-function CustomTagList({ children, label, classNames, listRef }) {
+function CustomTagList({ children, classNames, ...tagListprops }) {
   return (
-    <ul className={classNames.tagList} aria-label={label} ref={listRef} role="list">
-      {children.map((child) => (
-        <li className={classNames.tagListItem} key={child.key} role="listitem">
+    <ul className={classNames.tagList} {...tagListprops}>
+      {React.Children.map(children, (child) => (
+        <li className={classNames.tagListItem} key={child.key}>
           {child}
         </li>
       ))}
diff --git a/src/components/TagList.tsx b/src/components/TagList.tsx
index 261d502..58c5401 100644
--- a/src/components/TagList.tsx
+++ b/src/components/TagList.tsx
@@ -4,28 +4,28 @@ import { GlobalContext } from '../contexts'
 import type { TagProps } from './'
 import type { ClassNames } from '../sharedTypes'
 
-type TagListRendererProps = React.ComponentPropsWithoutRef<'ul'> & {
-  children: React.ReactElement<TagProps>[]
+type TagListRendererProps = React.ComponentPropsWithRef<'ul'> & {
   classNames: ClassNames
-  label: string
-  listRef: React.MutableRefObject<HTMLUListElement>
 }
 
 export type TagListRenderer = (props: TagListRendererProps) => JSX.Element
 
 const DefaultTagList: TagListRenderer = ({
   children,
-  label,
   classNames,
-  listRef,
+  ...tagListProps
 }: TagListRendererProps) => {
   return (
-    <ul className={classNames.tagList} aria-label={label} ref={listRef} role="list">
-      {children.map((child) => (
-        <li className={classNames.tagListItem} key={child.key} role="listitem">
-          {child}
-        </li>
-      ))}
+    <ul className={classNames.tagList} {...tagListProps} role="list">
+      {React.Children.map(children, (child) => {
+        if (React.isValidElement(child)) {
+          return (
+            <li className={classNames.tagListItem} key={child.key} role="listitem">
+              {child}
+            </li>
+          )
+        }
+      })}
     </ul>
   )
 }
@@ -38,7 +38,7 @@ export type TagListProps = {
 
 export function TagList({ children, label, render = DefaultTagList }: TagListProps): JSX.Element {
   const { classNames } = useContext(GlobalContext)
-  const { listRef } = useTagList()
+  const tagListProps = useTagList({ label })
 
-  return render({ classNames, children, label, listRef })
+  return render({ classNames, children, ...tagListProps })
 }
diff --git a/src/hooks/useTagList.ts b/src/hooks/useTagList.ts
index 6d0d2d0..97cf4ef 100644
--- a/src/hooks/useTagList.ts
+++ b/src/hooks/useTagList.ts
@@ -1,13 +1,13 @@
 import { useContext, useLayoutEffect, useRef } from 'react'
 import { GlobalContext } from '../contexts'
 
-// export type UseTagListArgs = {}
-
-export type UseTagListState = {
-  listRef: React.MutableRefObject<HTMLUListElement>
+export type UseTagListArgs = {
+  label: string
 }
 
-export function useTagList(): UseTagListState {
+export type UseTagListState = React.ComponentPropsWithRef<'ul'>
+
+export function useTagList({ label }: UseTagListArgs): UseTagListState {
   const { rootRef, managerRef } = useContext(GlobalContext)
 
   const listRef = useRef<HTMLUListElement>()
@@ -25,5 +25,5 @@ export function useTagList(): UseTagListState {
     }
   }, [isFocusInList, listRef, rootRef, tagDeleted])
 
-  return { listRef }
+  return { ref: listRef, 'aria-label': label }
 }
diff --git a/src/test/ReactTags.test.tsx b/src/test/ReactTags.test.tsx
index 4175da7..2c6faf7 100644
--- a/src/test/ReactTags.test.tsx
+++ b/src/test/ReactTags.test.tsx
@@ -925,24 +925,17 @@ describe('React Tags Autocomplete', () => {
     })
 
     it('renders a custom tag list component when provided', () => {
-      const renderer: Harness['props']['renderTagList'] = ({
-        children,
-        label,
-        classNames,
-        listRef,
-      }) => (
-        <ul
-          id={'custom-tag-list'}
-          className={classNames.tagList}
-          aria-label={label}
-          ref={listRef}
-          role="list"
-        >
-          {children.map((child) => (
-            <li className={classNames.tagListItem} key={child.key} role="listitem">
-              {child}
-            </li>
-          ))}
+      const renderer: Harness['props']['renderTagList'] = ({ children, classNames, ...props }) => (
+        <ul id="custom-tag-list" className={classNames.tagList} {...props}>
+          {React.Children.map(children, (child) => {
+            if (React.isValidElement(child)) {
+              return (
+                <li className={classNames.tagListItem} key={child.key}>
+                  {child}
+                </li>
+              )
+            }
+          })}
         </ul>
       )