@spark-ui/collapsible 1.1.0 → 1.3.0

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.3.0](https://github.com/adevinta/spark/compare/@spark-ui/collapsible@1.2.0...@spark-ui/collapsible@1.3.0) (2024-06-17)
+
+### Features
+
+- **collapsible:** update types ([1acf698](https://github.com/adevinta/spark/commit/1acf698293da84110acb7d7930cb48e3ed1c8f80))
+
+# [1.2.0](https://github.com/adevinta/spark/compare/@spark-ui/collapsible@1.1.0...@spark-ui/collapsible@1.2.0) (2024-06-15)
+
+### Features
+
+- **collapsible:** add "ids" props, useful for composition ([10c3ade](https://github.com/adevinta/spark/commit/10c3ade6d16b396ede579fd1ebed5911a89f087f))
+
 # [1.1.0](https://github.com/adevinta/spark/compare/@spark-ui/collapsible@1.0.0...@spark-ui/collapsible@1.1.0) (2024-06-14)
 
 ### Features

package/dist/Collapsible.d.ts

@@ -1,7 +1,7 @@
 import * as collapsible from '@zag-js/collapsible';
 import { type PropTypes } from '@zag-js/react';
-import { type ComponentPropsWithoutRef } from 'react';
-export interface CollapsibleProps extends ComponentPropsWithoutRef<'div'> {
+import { type ComponentProps } 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.
      */
@@ -22,6 +22,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'];
 }
-export declare const Collapsible: import("react").ForwardRefExoticComponent<CollapsibleProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const Collapsible: import("react").ForwardRefExoticComponent<Omit<CollapsibleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 export declare const useCollapsibleContext: () => collapsible.Api<PropTypes>;

package/dist/index.js

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

package/dist/index.mjs

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

package/dist/public/docgen.json

@@ -99,6 +99,25 @@
         "type": {
           "name": "boolean"
         }
+      },
+      "ids": {
+        "defaultValue": null,
+        "description": "The ids of the elements in the collapsible. Useful for composition",
+        "name": "ids",
+        "parent": {
+          "fileName": "collapsible/src/Collapsible.tsx",
+          "name": "CollapsibleProps"
+        },
+        "declarations": [
+          {
+            "fileName": "collapsible/src/Collapsible.tsx",
+            "name": "CollapsibleProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "Partial<{ root: string; content: string; trigger: string; }>"
+        }
       }
     }
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spark-ui/collapsible",
-  "version": "1.1.0",
+  "version": "1.3.0",
   "description": "An interactive component which expands/collapses a panel.",
   "publishConfig": {
     "access": "public"
@@ -48,5 +48,5 @@
     "@zag-js/collapsible": "^0.56.1",
     "@zag-js/react": "^0.56.1"
   },
-  "gitHead": "70cbe1732252c1a1eac56af3d212fe2d33e4dcdc"
+  "gitHead": "72d42b2ddfe158004106c228781396f82c7160da"
 }