wip

packages/admin-ui/src/Accordion/components/AccordionContent.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import * as AccordionPrimitive from "@radix-ui/react-accordion";
-import { makeDecoratable, cva, type VariantProps, cn } from "~/utils";
+import { cva, type VariantProps, cn } from "~/utils";
 
 const accordionContentVariants = cva(
     [
@@ -34,21 +34,15 @@ export interface AccordionContentProps
     extends React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>,
         VariantProps<typeof accordionContentVariants> {}
 
-const AccordionContentBase = React.forwardRef<
-    React.ElementRef<typeof AccordionPrimitive.Content>,
-    AccordionContentProps
->(({ children, withIcon, withHandle, ...props }, ref) => {
+const AccordionContent = ({ children, withIcon, withHandle, ...props }: AccordionContentProps) => {
     return (
         <AccordionPrimitive.Content
-            ref={ref}
             {...props}
             className={cn(accordionContentVariants({ withHandle, withIcon }), props.className)}
         >
             <div className={"wby-pt-sm wby-pb-lg wby-pl-md wby-pr-[52px]"}>{children}</div>
         </AccordionPrimitive.Content>
     );
-});
+};
 
-AccordionContentBase.displayName = AccordionPrimitive.Content.displayName;
-
-export const AccordionContent = makeDecoratable("AccordionContent", AccordionContentBase);
+export { AccordionContent };

packages/admin-ui/src/Accordion/components/AccordionItem.tsx

@@ -18,10 +18,7 @@ interface AccordionItemProps
     children: React.ReactNode;
 }
 
-const AccordionItemBase = React.forwardRef<
-    React.ElementRef<typeof AccordionPrimitive.Item>,
-    AccordionItemProps
->((props, ref) => {
+const AccordionItemBase = (props: AccordionItemProps) => {
     const { variant, background } = useAccordion();
 
     const { itemProps, triggerProps, contentProps } = React.useMemo(() => {
@@ -56,13 +53,12 @@ const AccordionItemBase = React.forwardRef<
                     "wby-bg-neutral-light": background === "light"
                 }
             )}
-            ref={ref}
         >
             <AccordionTrigger {...triggerProps} />
             <AccordionContent {...contentProps} />
         </AccordionPrimitive.Item>
     );
-});
+};
 
 AccordionItemBase.displayName = "AccordionItem";
 

packages/admin-ui/src/Accordion/components/AccordionTrigger.tsx

@@ -1,24 +1,18 @@
 import * as React from "react";
+import { useMemo } from "react";
 import * as AccordionPrimitive from "@radix-ui/react-accordion";
 import { ReactComponent as KeyboardArrowDownIcon } from "@material-design-icons/svg/outlined/keyboard_arrow_down.svg";
-import { cn, makeDecoratable } from "~/utils";
+import { cn } from "~/utils";
 import { type AccordionItemProps } from "./AccordionItem";
 import { AccordionItemAction } from "./AccordionItemAction";
 import { Icon } from "~/Icon";
-import { useMemo } from "react";
 
 type AccordionTriggerProps = Pick<
     AccordionItemProps,
     "title" | "description" | "icon" | "handle" | "actions"
 >;
 
-const AccordionTriggerBase = ({
-    title,
-    description,
-    actions,
-    icon,
-    handle
-}: AccordionTriggerProps) => {
+const AccordionTrigger = ({ title, description, actions, icon, handle }: AccordionTriggerProps) => {
     // The following three attributes are required for the trigger to act as a button.
     // We can't use the default button element here because the content of the trigger
     // can also contain one or more buttons.
@@ -79,6 +73,5 @@ const AccordionTriggerBase = ({
 
     return trigger;
 };
-AccordionTriggerBase.displayName = AccordionPrimitive.Trigger.displayName;
 
-export const AccordionTrigger = makeDecoratable("AccordionTrigger", AccordionTriggerBase);
+export { AccordionTrigger };