[Feature Request] Accordion component is too opinionated

[ai212983]

Is your feature request related to a problem? Please describe.

The documentation states that the children prop for the Accordion component can be either ReactNode or ReactNode[].

The contents of the collection. Usually the array of AccordionItem.

However, in practice, only an array of AccordionItem can be used. The AccordionItem (accordion-item.tsx) used within the Accordion isn't exported. It can only be created by the Accordion component itself. The exported AccordionItem isn't a "true" React component; it's more of a configuration object.

So, the first issue is the misleading documentation. I wasted quite a bit of time trying to create my own AccordionItem.

The second problem is the component's opinionated structure. The entire title of the AccordionItem is a single button, which is already causing issues for users.

Describe the solution you'd like

I would like the ability to use custom AccordionItems in the Accordion component. Right now, this isn't feasible without having to rewrite both components. Less opinionated implementation also would be nice. For example, Radix UI uses two different components — Accordion.Header and AccordionTrigger.

Describe alternatives you've considered

A potential workaround is rewriting both the Accordion and AccordionItem, reusing the internal components such as types and hooks.

Screenshots or Videos

No response

[linear[bot]]

ENG-389 [Feature Request] Accordion component is too opinionated

[wowjeeez]

Hey, thanks for flagging this issue. I managed to avoid this annoying constraint with a little hack.
Instead of

{Object.entries(config).map(([key, config]) => typeof config == "number" ?
 <WeaponAccordion weapon={key} recoil={config}/> : <OperatorAccordion operator={key} recoil={config}/>)}

I wrote

<Accordion selectionMode="multiple" className={"w-fit"}>
        {Object.entries(config).map(([key, config]) => {
            if (typeof config == "number") {
                return WeaponAccordion({weapon: key, recoil: config})
            } else {
                return OperatorAccordion({operator: key, recoil: config})
            }
        })}
    </Accordion>

This worked, since the 2nd code doesnt create an interim component, just returns the <AccordionItem> that the custom components create. (obvious constraint is that both WeaponAccordion and OperatorAccordion return an AccordionItem)

[wowjeeez]

Minor issue is that from my findings, it will break HMR so you will manually have to restart.

[MerryOscar]

it would be great if the AccordionItem title was not a button

[buchananwill]

EDIT: This commented problem is no longer valid. I've managed to build an AccordionTree component and opened a pull request to add as an additional component, as I think it would be a useful feature for other users. https://github.com/nextui-org/nextui/pull/3778

---> IGNORE BELOW
I'm also facing this issue. I'm trying to use the Accordion to create a recursive tree component, but any attempts to pass a spread child array to <Accordion>{...childPayload}</Accordion> just throws an error from the useTreeState (which seems somewhat ironic, given the name of this hook). This is the case even when the child is returning an AccordionItem itself. As far as I've ascertained, any component that renders internally, (i.e. wrapping it in even the thinnest API) breaks the Accordion parent. For example:

export default function FeasibilityReportTreeItem({
  children,
  payload,
}: FeasibilityReportTreeItemProps & AccordionItemProps) {
  const { itemType } = payload;

  const childrenPayload = useMemo(() => {
    switch (payload.itemType) {
      case 'feasibilityFullReport':
      case 'workSchemaNodeFeasibility':
      case 'assignmentFeasibilitySummary':
      case 'AssetFeasibilities':
      case 'PartyFeasibilities':
      case 'workSchemaNodeFeasibilitySummary':
      case 'taskTypeFeasibility': {
        return payload.children.map((childPayload) => (
          <FeasibilityReportTreeItem
            payload={childPayload}
            key={`${childPayload.itemType}:${childPayload.id}`}
          />
        ));
      }
      default:
        return [];
    }
  }, [payload]);

  const commonTreeItemProps = {
    ...getCommonTreeItemProps(payload),
    children: [children, ...childrenPayload]
  };

  console.log(childrenPayload);

  switch (itemType) {
    case 'feasibilityFullReport': {
      return (
        <Accordion>
          <AccordionItem
            key={`feasibilityReport${payload.id}`}
            aria-label={`feasibility Report ${payload.id}`}
            title={'Feasibility Report'}
          >
            <Accordion>{...childrenPayload}</Accordion>
          </AccordionItem>
        </Accordion>
      );
    }
    case 'workSchemaNodeFeasibilitySummary':
    case 'assignmentFeasibilitySummary':
    case 'PartyFeasibilities':
    case 'AssetFeasibilities': {
      return (
        <AccordionItem
          title={
            <>
              {<commonTreeItemProps.labelIcon></commonTreeItemProps.labelIcon>}
              label={`${payload.itemType}`}
              labelInfo={'allocation | residual'}
            </>
          }
        >
          stuff
        </AccordionItem>
      );
    }
    case 'workSchemaNodeFeasibility': {
      return (
        <WorkSchemaNodeFeasibilityItem
          payload={payload}
          {...commonTreeItemProps}
        />
      );
    }
    case 'assignmentFeasibility': {
      return (
        <AssignmentFeasibilityTreeItem
          payload={payload}
          {...commonTreeItemProps}
        />
      );
    }
    case 'taskTypeFeasibility': {
      return (
        <TaskTypeClassificationFeasibilityTreeItem
          {...commonTreeItemProps}
          payload={payload}
        />
      );
    }
    case 'bandwidthFeasibilityLayer': {
      return (
        <BandwidthFeasibilityLayerTreeItem
          {...commonTreeItemProps}
          payload={payload}
        />
      );
    }
    default:
      return null;
  }
}

[jrr]

I believe I'm hitting this issue, too. When I attempt to use my own accordion item component:

<Accordion className="rotate-0">
  <MyAccordionItem title="foo" />
</Accordion>

I get this error at runtime:

TypeError: type.getCollectionNode is not a function
    at $eb2240fc39a57fa5$export$bf788dd355e3a401.getFullNode (CollectionBuilder.ts:141:29)
    at getFullNode.next (<anonymous>)
    at $eb2240fc39a57fa5$export$bf788dd355e3a401.iterateCollection (CollectionBuilder.ts:61:18)
    at iterateCollection.next (<anonymous>)

For now I'm using a different version of @wowjeeez ' workaround - instead of rendering the component with JSX, it works to call it like a function:

<Accordion className="rotate-0">
  {MyAccordionItem({
    title: "Overview",
    moreProps: "here
  })}
</Accordion>

[ayuka-bg]

well, it doest work if i add dynamcly item

[Jimflip]

gahh just hit this problem too. I need to create my own item component as it needs to fetch some data, and want it server side rendered.

I can't call a function as that would need to be async, and can't then call that within JSX as a far as I can see?