From 10c3ade6d16b396ede579fd1ebed5911a89f087f Mon Sep 17 00:00:00 2001
From: acd02 <alex.acd02@gmail.com>
Date: Sat, 15 Jun 2024 17:36:56 +0200
Subject: [PATCH] feat(collapsible): add "ids" props, useful for composition

---
 .../collapsible/src/Collapsible.tsx           | 20 +++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/packages/components/collapsible/src/Collapsible.tsx b/packages/components/collapsible/src/Collapsible.tsx
index 63a422d71..c1418a167 100644
--- a/packages/components/collapsible/src/Collapsible.tsx
+++ b/packages/components/collapsible/src/Collapsible.tsx
@@ -24,6 +24,10 @@ export interface CollapsibleProps extends ComponentPropsWithoutRef<'div'> {
    * The controlled open state of the collapsible. Must be used in conjunction with `onOpenChange`.
    */
   open?: boolean
+  /**
+   * The ids of the elements in the collapsible. Useful for composition
+   */
+  ids?: collapsible.Context['ids']
 }
 
 const CollapsibleContext = createContext<collapsible.Api<PropTypes> | null>(null)
@@ -37,6 +41,7 @@ export const Collapsible = forwardRef<HTMLDivElement, CollapsibleProps>(
       disabled = false,
       onOpenChange,
       open,
+      ids,
       ...props
     },
     ref
@@ -46,13 +51,14 @@ export const Collapsible = forwardRef<HTMLDivElement, CollapsibleProps>(
       open: defaultOpen || open,
       disabled,
       id: useId(),
-      onOpenChange(details) {
-        onOpenChange?.(details.open)
-      },
+      ids,
     }
 
     const context: collapsible.Context = {
       ...initialContext,
+      onOpenChange(details) {
+        onOpenChange?.(details.open)
+      },
       open,
       disabled,
     }
@@ -63,13 +69,11 @@ export const Collapsible = forwardRef<HTMLDivElement, CollapsibleProps>(
 
     const Component = asChild ? Slot : 'div'
 
+    const mergedProps = mergeProps(api.getRootProps(), props)
+
     return (
       <CollapsibleContext.Provider value={api}>
-        <Component
-          data-spark-component="collapsible"
-          ref={ref}
-          {...mergeProps(api.getRootProps(), props)}
-        >
+        <Component data-spark-component="collapsible" ref={ref} {...mergedProps}>
           {children}
         </Component>
       </CollapsibleContext.Provider>