controlled useAccordion crashes with JSX/ReactNode Item children

[binaryartifex]

🐛 Bug Report

Before i get started if anyone could tell me if the accordion/disclosure feature is still going forward on account of the stale alpha state its been in for some time that'd be great. Im working on an accordion heavy interface and have a penchant for strong and unusual punishment so naturally ive convinced my workplace to adopt react-aria. Unfortunately ive hit a snag on the accordian - When used as a controlled component, it immediately crashes if an items children is declared against the item itself instead of being mapped over via props.

If possible as part of the solution, my entire evening has been spent going through a few different code sandbox implementations of this component and looking over the react-aria code to figure out how to get it working. The 'ControlledAccordian' stories provided in the react-spectrum implementation of this component don't render ReactNodes, just plain text. It would be great to see an example implementation on the react-aria site soon or at the least a ballpark ETA.

🤔 Expected Behavior

AccordionItem should expand without issue when the Item children are declared within the Item itself as JSX/ReactNode components

😯 Current Behavior

Accordion crashes when an item is expanded, whos children were not passed as props. As far as i can tell you can go to any sandbox representation (even those using react spectrum), wrap the child in an element as per the second code snippet, and the outcome will be the same.

This works without issue, even when the children are ReactNodes

      <Accordion {...args}>
        {(item) => (
          <Item key={item.key} title={item.title}>
            {item.children}
          </Item>
        )}
      </Accordion>

This crashes as soon as an item is expanded. Note the children are ReactNodes and not plain strings.

function ControlledAccordion(props: AccordionProps) {
  const [openKeys, setOpenKeys] = useState<Set<React.Key>>(new Set([]));

  return (
    <Accordion
      {...props}
      expandedKeys={openKeys}
      onExpandedChange={setOpenKeys}
    >
      <Item key="files" title="Your files">
        <p>files</p>
      </Item>
      <Item key="shared" title="Shared with you">
        <p>shared</p>
      </Item>
      <Item key="last" title="Last item">
        <p>last</p>
      </Item>
    </Accordion>
  );
}

In this instance I always get an error that starts with Unknown element <p> in collection.

Ive forked a sandbox that uses the React Spectrum accordion and the same error occurs. In the sandbox itself, the third accordion will expand without issue, the other two crash with the expected error.
https://codesandbox.io/s/accordion-content-forked-y27fgg?file=/src/App.js

🌍 Your Environment

Software	Version(s)
@react-aria/accordion	3.0.0-alpha.14
react-stately	^3.20.0
Browser	Chrome Version^108
Operating System	Windows 11

[jbltx]

I can confirm I had the same issue with accordion items. I just implemented my own Accordion and AccordionItem component using react-stately and react-aria accordion hooks and types and it turns out that we have to use a TreeState for the Accordion, but a TreeState allows to have a child Item component inside another Item in order to define a tree (which is not useful in an Accordion since we only have a single level of depth).

The workaround I have right now is to define hasChildItems={false} on every single Item in the Accordion collection

<Accordion
      {...props}
      expandedKeys={openKeys}
      onExpandedChange={setOpenKeys}
    >
      <Item key="files" title="Your files" hasChildItems={false}>
        <p>files</p>
      </Item>
      <Item key="shared" title="Shared with you" hasChildItems={false}>
        <p>shared</p>
      </Item>
      <Item key="last" title="Last item" hasChildItems={false}>
        <p>last</p>
      </Item>
  </Accordion>

This is not ideal as it is obvious there wont be any child items anyway for an Accordion item. The best thing to do is to implement useAccordionState and AccordionState type, or use an other existing collection state which fits better with the concept of the Accordion component.

[jhowell-droit]

I can confirm I had the same issue with accordion items. I just implemented my own Accordion and AccordionItem component using react-stately and react-aria accordion hooks and types and it turns out that we have to use a TreeState for the Accordion, but a TreeState allows to have a child Item component inside another Item in order to define a tree (which is not useful in an Accordion since we only have a single level of depth).

The workaround I have right now is to define hasChildItems={false} on every single Item in the Accordion collection

<Accordion
      {...props}
      expandedKeys={openKeys}
      onExpandedChange={setOpenKeys}
    >
      <Item key="files" title="Your files" hasChildItems={false}>
        <p>files</p>
      </Item>
      <Item key="shared" title="Shared with you" hasChildItems={false}>
        <p>shared</p>
      </Item>
      <Item key="last" title="Last item" hasChildItems={false}>
        <p>last</p>
      </Item>
  </Accordion>

This is not ideal as it is obvious there wont be any child items anyway for an Accordion item. The best thing to do is to implement useAccordionState and AccordionState type, or use an other existing collection state which fits better with the concept of the Accordion component.

Would you mind sharing the source or at least where you imported the useAccordion hook from? I've got v3.24 checked out locally and can't find any mention of Accordion anywhere! Thanks