chore: change method for conversion of iterables to arrays

build.washingtonpost.com/public/sitemap.xml

@@ -128,6 +128,10 @@
     <loc>https://build.washingtonpost.com/components/visually-hidden</loc>
   </url>
 
+  <url>
+    <loc>https://build.washingtonpost.com/font-faces</loc>
+  </url>
+
   <url>
     <loc>https://build.washingtonpost.com/foundations/base</loc>
   </url>

packages/kit/src/input-search/InputSearchList.tsx

@@ -56,7 +56,7 @@ export const InputSearchList = ({
 
   return (
     <StyledList {...listBoxProps} ref={listBoxRef} {...rest}>
-      {[...state.collection].map((item) =>
+      {Array.from(state.collection).map((item) =>
         item.type === "section" ? (
           <ListHeading key={item.key} section={item} state={state} />
         ) : (

packages/kit/src/input-search/InputSearchListHeading.tsx

@@ -45,11 +45,9 @@ export const InputSearchListHeading = (props: InputSearchListHeadingProps) => {
 InputSearchListHeading.getCollectionNode = (props) => {
   const alteredProps = { ...props };
   // handle the previously used child text as title
-  console.log("??? this may work ???");
   if (props.children && !props.title) {
     alteredProps.title = props.children;
     alteredProps.children = undefined;
-    console.log("!!! this works !!!");
   }
   // @ts-expect-error - static method is excluded from the type definition https://github.com/adobe/react-spectrum/blob/main/packages/%40react-stately/collections/src/Section.ts#L57
   return Section.getCollectionNode(alteredProps);
@@ -70,13 +68,15 @@ export const ListHeading = ({ section, state }: SectionProps) => {
     heading: section.rendered,
     "aria-label": section["aria-label"],
   });
-  const childNodeLength = [...section.childNodes].length;
+
+  const childNodesArr = Array.from(section.childNodes);
+  const childNodeLength = childNodesArr.length;
   return (
     <StyledListItem {...itemProps}>
       {section.rendered && <span {...headingProps}>{section.rendered}</span>}
       {childNodeLength > 0 && (
         <UnstyledList {...groupProps}>
-          {[...section.childNodes].map((node) => (
+          {childNodesArr.map((node) => (
             <ListItem key={node.key} item={node} state={state} />
           ))}
         </UnstyledList>

packages/kit/src/input-search/play.stories.tsx

@@ -165,15 +165,17 @@ const GroupingTemplate: StoryFn<typeof InputSearch.Root> = (args) => {
         <InputSearch.Input name="city" id="city" />
         <InputSearch.Popover>
           <InputSearch.List>
+            <InputSearch.ListHeading>Fruits</InputSearch.ListHeading>
             <InputSearch.ListItem value="Apple" />
             <InputSearch.ListItem value="Banana" />
             <InputSearch.ListItem value="Orange" />
             <InputSearch.ListItem value="Kiwi" />
             <InputSearch.ListItem value="Pineapple" />
-            <InputSearch.ListHeading>Vegetables</InputSearch.ListHeading>
-            <InputSearch.ListItem value="Carrots" />
-            <InputSearch.ListItem value="Celery" />
-            <InputSearch.ListItem value="Onion" />
+            <InputSearch.ListHeading title="Vegetables">
+              <InputSearch.ListItem value="Carrots" />
+              <InputSearch.ListItem value="Celery" />
+              <InputSearch.ListItem value="Onion" />
+            </InputSearch.ListHeading>
           </InputSearch.List>
         </InputSearch.Popover>
       </InputSearch.Root>