@spark-ui/collapsible 7.3.6 → 8.0.0

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.0.0](https://github.com/adevinta/spark/compare/v7.3.7...v8.0.0) (2025-01-13)
+
+**Note:** Version bump only for package @spark-ui/collapsible
+
+## [7.3.7](https://github.com/adevinta/spark/compare/v7.3.6...v7.3.7) (2025-01-08)
+
+**Note:** Version bump only for package @spark-ui/collapsible
+
 ## [7.3.6](https://github.com/adevinta/spark/compare/v7.3.5...v7.3.6) (2025-01-08)
 
 **Note:** Version bump only for package @spark-ui/collapsible

package/dist/Collapsible.d.ts

@@ -1,6 +1,6 @@
 import * as collapsible from '@zag-js/collapsible';
 import { type PropTypes } from '@zag-js/react';
-import { type ComponentProps } from 'react';
+import { type ComponentProps, Ref } from 'react';
 export interface CollapsibleProps extends ComponentProps<'div'> {
     /**
      * Change the default rendered element for the one passed as a child, merging their props and behavior.
@@ -26,6 +26,10 @@ export interface CollapsibleProps extends ComponentProps<'div'> {
      * The ids of the elements in the collapsible. Useful for composition
      */
     ids?: collapsible.Context['ids'];
+    ref?: Ref<HTMLDivElement>;
 }
-export declare const Collapsible: import("react").ForwardRefExoticComponent<Omit<CollapsibleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const Collapsible: {
+    ({ asChild, children, defaultOpen, disabled, onOpenChange, open, ids, ref, ...props }: CollapsibleProps): import("react").JSX.Element;
+    displayName: string;
+};
 export declare const useCollapsibleContext: () => collapsible.Api<PropTypes>;

package/dist/CollapsibleContent.d.ts

@@ -1,5 +1,9 @@
-import { type ComponentPropsWithoutRef } from 'react';
+import { type ComponentPropsWithoutRef, Ref } from 'react';
 export interface CollapsibleContentProps extends ComponentPropsWithoutRef<'div'> {
     asChild?: boolean;
+    ref?: Ref<HTMLDivElement>;
 }
-export declare const Content: import("react").ForwardRefExoticComponent<CollapsibleContentProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const Content: {
+    ({ asChild, className, children, ref, ...props }: CollapsibleContentProps): import("react").JSX.Element;
+    displayName: string;
+};

package/dist/CollapsibleTrigger.d.ts

@@ -1,5 +1,9 @@
-import { type ComponentPropsWithoutRef } from 'react';
+import { type ComponentPropsWithoutRef, Ref } from 'react';
 export interface CollapsibleTriggerProps extends ComponentPropsWithoutRef<'button'> {
     asChild?: boolean;
+    ref?: Ref<HTMLButtonElement>;
 }
-export declare const Trigger: import("react").ForwardRefExoticComponent<CollapsibleTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const Trigger: {
+    ({ asChild, children, ref, ...props }: CollapsibleTriggerProps): import("react").JSX.Element;
+    displayName: string;
+};

package/dist/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react"),q=require("@spark-ui/internal-utils"),p=require("@spark-ui/slot"),E=require("@zag-js/collapsible"),i=require("@zag-js/react"),T=require("class-variance-authority");function x(e){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const r=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(n,t,r.get?r:{enumerable:!0,get:()=>e[t]})}}return n.default=e,Object.freeze(n)}const f=x(E),h=o.createContext(null),y=o.forwardRef(({asChild:e=!1,children:n,defaultOpen:t=!1,disabled:r=!1,onOpenChange:l,open:a,ids:s,...d},c)=>{const m={"open.controlled":a!==void 0,open:t||a,disabled:r,id:o.useId(),ids:s},v={...m,onOpenChange:q.useEvent(j=>{l?.(j.open)},{sync:!0}),open:a,disabled:r},[O,N]=i.useMachine(f.machine(m),{context:v}),b=f.connect(O,N,i.normalizeProps),w=e?p.Slot:"div",S=i.mergeProps(b.getRootProps(),d);return o.createElement(h.Provider,{value:b},o.createElement(w,{"data-spark-component":"collapsible",ref:c,...S},n))});y.displayName="Collapsible";const P=()=>{const e=o.useContext(h);if(!e)throw Error("useCollapsibleContext must be used within a Collapsible provider");return e},u=o.forwardRef(({asChild:e=!1,className:n,children:t,...r},l)=>{const{getContentProps:a}=P(),s=e?p.Slot:"div",d=a(),c=i.mergeProps(d,{className:T.cx("overflow-hidden","motion-reduce:!animate-none","[&[hidden]]:hidden","data-[state=open]:animate-standalone-collapse-in data-[state=closed]:animate-standalone-collapse-out",n),...r});return o.createElement(s,{ref:l,"data-spark-component":"collapsible-content",...c},t)});u.displayName="Collapsible.Content";const g=o.forwardRef(({asChild:e=!1,children:n,...t},r)=>{const l=P(),a=e?p.Slot:"button",s=i.mergeProps(l.getTriggerProps(),t);return o.createElement(a,{ref:r,"data-spark-component":"collapsible-trigger",...s},n)});g.displayName="Collapsible.Trigger";const C=Object.assign(y,{Trigger:g,Content:u});C.displayName="Collapsible",g.displayName="Collapsible.Trigger",u.displayName="Collapsible.Content",exports.Collapsible=C;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react"),E=require("@spark-ui/internal-utils"),p=require("@spark-ui/slot"),T=require("@zag-js/collapsible"),i=require("@zag-js/react"),x=require("class-variance-authority");function w(e){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const o=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(n,t,o.get?o:{enumerable:!0,get:()=>e[t]})}}return n.default=e,Object.freeze(n)}const C=w(T),h=r.createContext(null),y=({asChild:e=!1,children:n,defaultOpen:t=!1,disabled:o=!1,onOpenChange:a,open:l,ids:s,ref:c,...d})=>{const m={"open.controlled":l!==void 0,open:t||l,disabled:o,id:r.useId(),ids:s},v={...m,onOpenChange:E.useEvent(q=>{a?.(q.open)},{sync:!0}),open:l,disabled:o},[O,N]=i.useMachine(C.machine(m),{context:v}),b=C.connect(O,N,i.normalizeProps),S=e?p.Slot:"div",j=i.mergeProps(b.getRootProps(),d);return r.createElement(h.Provider,{value:b},r.createElement(S,{"data-spark-component":"collapsible",ref:c,...j},n))};y.displayName="Collapsible";const P=()=>{const e=r.useContext(h);if(!e)throw Error("useCollapsibleContext must be used within a Collapsible provider");return e},u=({asChild:e=!1,className:n,children:t,ref:o,...a})=>{const{getContentProps:l}=P(),s=e?p.Slot:"div",c=l(),d=i.mergeProps(c,{className:x.cx("overflow-hidden","motion-reduce:!animate-none","[&[hidden]]:hidden","data-[state=open]:animate-standalone-collapse-in data-[state=closed]:animate-standalone-collapse-out",n),...a});return r.createElement(s,{ref:o,"data-spark-component":"collapsible-content",...d},t)};u.displayName="Collapsible.Content";const g=({asChild:e=!1,children:n,ref:t,...o})=>{const a=P(),l=e?p.Slot:"button",s=i.mergeProps(a.getTriggerProps(),o);return r.createElement(l,{ref:t,"data-spark-component":"collapsible-trigger",...s},n)};g.displayName="Collapsible.Trigger";const f=Object.assign(y,{Trigger:g,Content:u});f.displayName="Collapsible",g.displayName="Collapsible.Trigger",u.displayName="Collapsible.Content",exports.Collapsible=f;

package/dist/index.mjs

@@ -1,33 +1,33 @@
-import r, { createContext as w, forwardRef as d, useId as T, useContext as R } from "react";
+import r, { createContext as k, useId as T, useContext as w } from "react";
 import { useEvent as j } from "@spark-ui/internal-utils";
-import { Slot as c } from "@spark-ui/slot";
-import * as h from "@zag-js/collapsible";
-import { useMachine as z, normalizeProps as I, mergeProps as m } from "@zag-js/react";
+import { Slot as d } from "@spark-ui/slot";
+import * as g from "@zag-js/collapsible";
+import { useMachine as z, normalizeProps as I, mergeProps as c } from "@zag-js/react";
 import { cx as M } from "class-variance-authority";
-const f = w(null), v = d(({ asChild: e = !1, children: t, defaultOpen: n = !1, disabled: o = !1, onOpenChange: s, open: a, ids: l, ...i }, p) => {
-  const u = { "open.controlled": a !== void 0, open: n || a, disabled: o, id: T(), ids: l }, y = { ...u, onOpenChange: j((k) => {
-    s?.(k.open);
-  }, { sync: !0 }), open: a, disabled: o }, [E, x] = z(h.machine(u), { context: y }), g = h.connect(E, x, I), P = e ? c : "div", O = m(g.getRootProps(), i);
-  return r.createElement(f.Provider, { value: g }, r.createElement(P, { "data-spark-component": "collapsible", ref: p, ...O }, t));
-});
-v.displayName = "Collapsible";
-const N = () => {
-  const e = R(f);
+const h = k(null), f = ({ asChild: e = !1, children: t, defaultOpen: n = !1, disabled: o = !1, onOpenChange: s, open: a, ids: l, ref: i, ...p }) => {
+  const b = { "open.controlled": a !== void 0, open: n || a, disabled: o, id: T(), ids: l }, N = { ...b, onOpenChange: j((O) => {
+    s?.(O.open);
+  }, { sync: !0 }), open: a, disabled: o }, [y, E] = z(g.machine(b), { context: N }), u = g.connect(y, E, I), x = e ? d : "div", P = c(u.getRootProps(), p);
+  return r.createElement(h.Provider, { value: u }, r.createElement(x, { "data-spark-component": "collapsible", ref: i, ...P }, t));
+};
+f.displayName = "Collapsible";
+const v = () => {
+  const e = w(h);
   if (!e)
     throw Error("useCollapsibleContext must be used within a Collapsible provider");
   return e;
-}, C = d(({ asChild: e = !1, className: t, children: n, ...o }, s) => {
-  const { getContentProps: a } = N(), l = e ? c : "div", i = a(), p = m(i, { className: M("overflow-hidden", "motion-reduce:!animate-none", "[&[hidden]]:hidden", "data-[state=open]:animate-standalone-collapse-in data-[state=closed]:animate-standalone-collapse-out", t), ...o });
-  return r.createElement(l, { ref: s, "data-spark-component": "collapsible-content", ...p }, n);
-});
-C.displayName = "Collapsible.Content";
-const b = d(({ asChild: e = !1, children: t, ...n }, o) => {
-  const s = N(), a = e ? c : "button", l = m(s.getTriggerProps(), n);
-  return r.createElement(a, { ref: o, "data-spark-component": "collapsible-trigger", ...l }, t);
-});
-b.displayName = "Collapsible.Trigger";
-const S = Object.assign(v, { Trigger: b, Content: C });
-S.displayName = "Collapsible", b.displayName = "Collapsible.Trigger", C.displayName = "Collapsible.Content";
+}, m = ({ asChild: e = !1, className: t, children: n, ref: o, ...s }) => {
+  const { getContentProps: a } = v(), l = e ? d : "div", i = a(), p = c(i, { className: M("overflow-hidden", "motion-reduce:!animate-none", "[&[hidden]]:hidden", "data-[state=open]:animate-standalone-collapse-in data-[state=closed]:animate-standalone-collapse-out", t), ...s });
+  return r.createElement(l, { ref: o, "data-spark-component": "collapsible-content", ...p }, n);
+};
+m.displayName = "Collapsible.Content";
+const C = ({ asChild: e = !1, children: t, ref: n, ...o }) => {
+  const s = v(), a = e ? d : "button", l = c(s.getTriggerProps(), o);
+  return r.createElement(a, { ref: n, "data-spark-component": "collapsible-trigger", ...l }, t);
+};
+C.displayName = "Collapsible.Trigger";
+const R = Object.assign(f, { Trigger: C, Content: m });
+R.displayName = "Collapsible", C.displayName = "Collapsible.Trigger", m.displayName = "Collapsible.Content";
 export {
-  S as Collapsible
+  R as Collapsible
 };

package/dist/public/docgen.json

@@ -118,6 +118,25 @@
         "type": {
           "name": "Partial<{ root: string; content: string; trigger: string; }>"
         }
+      },
+      "ref": {
+        "defaultValue": null,
+        "description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).",
+        "name": "ref",
+        "parent": {
+          "fileName": "collapsible/src/Collapsible.tsx",
+          "name": "CollapsibleProps"
+        },
+        "declarations": [
+          {
+            "fileName": "collapsible/src/Collapsible.tsx",
+            "name": "CollapsibleProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "Ref<HTMLDivElement>"
+        }
       }
     }
   },
@@ -147,6 +166,25 @@
         "type": {
           "name": "boolean"
         }
+      },
+      "ref": {
+        "defaultValue": null,
+        "description": "",
+        "name": "ref",
+        "parent": {
+          "fileName": "collapsible/src/CollapsibleContent.tsx",
+          "name": "CollapsibleContentProps"
+        },
+        "declarations": [
+          {
+            "fileName": "collapsible/src/CollapsibleContent.tsx",
+            "name": "CollapsibleContentProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "Ref<HTMLDivElement>"
+        }
       }
     }
   },
@@ -176,6 +214,25 @@
         "type": {
           "name": "boolean"
         }
+      },
+      "ref": {
+        "defaultValue": null,
+        "description": "",
+        "name": "ref",
+        "parent": {
+          "fileName": "collapsible/src/CollapsibleTrigger.tsx",
+          "name": "CollapsibleTriggerProps"
+        },
+        "declarations": [
+          {
+            "fileName": "collapsible/src/CollapsibleTrigger.tsx",
+            "name": "CollapsibleTriggerProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "Ref<HTMLButtonElement>"
+        }
       }
     }
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spark-ui/collapsible",
-  "version": "7.3.6",
+  "version": "8.0.0",
   "description": "An interactive component which expands/collapses a panel.",
   "publishConfig": {
     "access": "public"
@@ -45,10 +45,10 @@
   "homepage": "https://sparkui.vercel.app",
   "license": "MIT",
   "dependencies": {
-    "@spark-ui/internal-utils": "^7.3.6",
-    "@spark-ui/slot": "^7.3.6",
-    "@zag-js/collapsible": "0.78.2",
-    "@zag-js/react": "0.78.2"
+    "@spark-ui/internal-utils": "^8.0.0",
+    "@spark-ui/slot": "^8.0.0",
+    "@zag-js/collapsible": "0.81.0",
+    "@zag-js/react": "0.81.0"
   },
-  "gitHead": "969983868f32c57cf6d6ffc838de66b51fa4163d"
+  "gitHead": "309903aa55f44ebd43d2a1fe43691f110a5036ea"
 }