diff --git a/.changeset/slimy-panthers-swim.md b/.changeset/slimy-panthers-swim.md new file mode 100644 index 0000000000..da85c3f1b8 --- /dev/null +++ b/.changeset/slimy-panthers-swim.md @@ -0,0 +1,5 @@ +--- +"@nextui-org/accordion": patch +--- + +fixed remove dividers from hidden accordion items (#2210) diff --git a/packages/components/accordion/__tests__/accordion.test.tsx b/packages/components/accordion/__tests__/accordion.test.tsx index 3c5bab131c..1571961db0 100644 --- a/packages/components/accordion/__tests__/accordion.test.tsx +++ b/packages/components/accordion/__tests__/accordion.test.tsx @@ -68,6 +68,25 @@ describe("Accordion", () => { expect(wrapper.getAllByRole("button")[0]).toBeDisabled(); }); + it("should hide the accordion item when the hidden prop is set", () => { + const wrapper = render( + + + Accordion Item 1 description + + + + Accordion Item 3 description + + , + ); + + expect(wrapper.getAllByRole("button")).toHaveLength(2); + expect(wrapper.getAllByRole("separator")).toHaveLength(1); + }); + it("should expand the accordion item when clicked", async () => { const wrapper = render( diff --git a/packages/components/accordion/src/accordion.tsx b/packages/components/accordion/src/accordion.tsx index 0f20477343..47d7f380f2 100644 --- a/packages/components/accordion/src/accordion.tsx +++ b/packages/components/accordion/src/accordion.tsx @@ -41,7 +41,10 @@ const AccordionGroup = forwardRef<"div", AccordionProps>((props, ref) => { {...item.props} classNames={classNames} /> - {!isSplitted && showDivider && index < state.collection.size - 1 && } + {!item.props.hidden && + !isSplitted && + showDivider && + index < state.collection.size - 1 && } ); });