@purpurds/accordion 5.8.2 → 5.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@purpurds/accordion",
-  "version": "5.8.2",
+  "version": "5.9.0",
   "license": "AGPL-3.0-only",
   "main": "./dist/accordion.cjs.js",
   "types": "./dist/accordion.d.ts",
@@ -16,10 +16,10 @@
   "dependencies": {
     "classnames": "~2.5.0",
     "@radix-ui/react-accordion": "~1.1.2",
-    "@purpurds/tokens": "5.8.2",
-    "@purpurds/heading": "5.8.2",
-    "@purpurds/icon": "5.8.2",
-    "@purpurds/paragraph": "5.8.2"
+    "@purpurds/heading": "5.9.0",
+    "@purpurds/icon": "5.9.0",
+    "@purpurds/tokens": "5.9.0",
+    "@purpurds/paragraph": "5.9.0"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "~1.10.0",

package/src/accordion-item.tsx

@@ -1,4 +1,5 @@
-import React, { ReactNode } from "react";
+import type { ForwardedRef, ReactNode } from "react";
+import React, { forwardRef } from "react";
 import type { HeadingTagType } from "@purpurds/heading";
 import { Heading } from "@purpurds/heading";
 import { IconChevronDown } from "@purpurds/icon";
@@ -43,45 +44,51 @@ export type AccordionItemProps = {
   onClick?: (event: AccordionItemOnClickEvent) => void;
 };
 
-export const AccordionItem = ({
-  children,
-  className,
-  title,
-  titleTag = "h3",
-  negative,
-  onClick,
-  ...props
-}: AccordionItemProps) => {
-  const classes = cx([
-    className,
-    rootClassName,
+export const AccordionItem = forwardRef(
+  (
     {
-      [`${rootClassName}--negative`]: negative,
-    },
-  ]);
+      children,
+      className,
+      title,
+      titleTag = "h3",
+      negative,
+      onClick,
+      ...props
+    }: AccordionItemProps,
+    ref: ForwardedRef<HTMLButtonElement>
+  ) => {
+    const classes = cx([
+      className,
+      rootClassName,
+      {
+        [`${rootClassName}--negative`]: negative,
+      },
+    ]);
 
-  return (
-    <RadixAccordion.Item className={classes} value={title} {...props}>
-      <RadixAccordion.Header className={cx(`${rootClassName}__header`)} asChild>
-        <Heading tag={titleTag} variant="title-100" className={cx(`${rootClassName}__title`)}>
-          <RadixAccordion.Trigger
-            onClick={onClick}
-            className={cx(`${rootClassName}__trigger`, className)}
-          >
-            {title}
-            <IconChevronDown size="md" className={cx(`${rootClassName}__icon`)} aria-hidden />
-          </RadixAccordion.Trigger>
-        </Heading>
-      </RadixAccordion.Header>
-      <RadixAccordion.Content className={cx(`${rootClassName}__content`, className)}>
-        <div className={cx(`${rootClassName}__contentText`)}>
-          {typeof children === "string" ? (
-            <Paragraph variant="paragraph-200">{children}</Paragraph>
-          ) : (
-            children
-          )}
-        </div>
-      </RadixAccordion.Content>
-    </RadixAccordion.Item>
-  );
-};
+    return (
+      <RadixAccordion.Item className={classes} value={title} {...props}>
+        <RadixAccordion.Header className={cx(`${rootClassName}__header`)} asChild>
+          <Heading tag={titleTag} variant="title-100" className={cx(`${rootClassName}__title`)}>
+            <RadixAccordion.Trigger
+              ref={ref}
+              onClick={onClick}
+              className={cx(`${rootClassName}__trigger`, className)}
+            >
+              {title}
+              <IconChevronDown size="md" className={cx(`${rootClassName}__icon`)} aria-hidden />
+            </RadixAccordion.Trigger>
+          </Heading>
+        </RadixAccordion.Header>
+        <RadixAccordion.Content className={cx(`${rootClassName}__content`, className)}>
+          <div className={cx(`${rootClassName}__contentText`)}>
+            {typeof children === "string" ? (
+              <Paragraph variant="paragraph-200">{children}</Paragraph>
+            ) : (
+              children
+            )}
+          </div>
+        </RadixAccordion.Content>
+      </RadixAccordion.Item>
+    );
+  }
+);