@webstudio-is/sdk-components-react-radix 0.269.0 → 0.270.0

package/lib/__generated__/accordion.props.js

@@ -59,8 +59,7 @@ const e = {
     description: "Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries or keeping content available in the DOM.",
     required: !1,
     control: "boolean",
-    type: "boolean",
-    defaultValue: !0
+    type: "boolean"
   }
 };
 export {

package/lib/accordion.js

@@ -1,40 +1,40 @@
-import { jsx as s } from "react/jsx-runtime";
-import { forwardRef as a, useState as u, useEffect as f } from "react";
-import { Header as l, Trigger as g, Root as p, Item as A, Content as P } from "@radix-ui/react-accordion";
-import { getIndexWithinAncestorFromProps as h } from "@webstudio-is/sdk/runtime";
-import { getClosestInstance as m } from "@webstudio-is/react-sdk/runtime";
-const S = a(({ defaultValue: e, ...o }, n) => {
-  const t = o.value ?? e ?? "", [c, r] = u(t);
-  return f(() => r(t), [t]), /* @__PURE__ */ s(
+import { jsx as d } from "react/jsx-runtime";
+import { forwardRef as m, useState as u, useEffect as f } from "react";
+import { Header as l, Trigger as g, Content as A, Root as p, Item as h } from "@radix-ui/react-accordion";
+import { getIndexWithinAncestorFromProps as P } from "@webstudio-is/sdk/runtime";
+import { getClosestInstance as a } from "@webstudio-is/react-sdk/runtime";
+const S = m(({ defaultValue: e, ...o }, n) => {
+  const t = o.value ?? e ?? "", [r, c] = u(t);
+  return f(() => c(t), [t]), /* @__PURE__ */ d(
     p,
     {
       ...o,
       ref: n,
       type: "single",
-      value: c,
-      onValueChange: r
+      value: r,
+      onValueChange: c
     }
   );
-}), $ = a(({ value: e, ...o }, n) => {
-  const t = h(o);
-  return /* @__PURE__ */ s(A, { ref: n, value: e ?? t ?? "", ...o });
-}), k = l, w = g, y = a(({ forceMount: e = !0, ...o }, n) => /* @__PURE__ */ s(P, { ref: n, ...e ? { forceMount: !0 } : {}, ...o })), i = "@webstudio-is/sdk-components-react-radix", H = {
+}), $ = m(({ value: e, ...o }, n) => {
+  const t = P(o);
+  return /* @__PURE__ */ d(h, { ref: n, value: e ?? t ?? "", ...o });
+}), k = l, w = g, y = A, i = "@webstudio-is/sdk-components-react-radix", H = {
   onNavigatorSelect: (e, o) => {
     var n;
     for (const t of o.instancePath)
       if (t.component === `${i}:AccordionContent`) {
-        const c = m(
+        const r = a(
           o.instancePath,
           t,
           `${i}:Accordion`
-        ), r = m(
+        ), c = a(
           o.instancePath,
           t,
           `${i}:AccordionItem`
         );
-        if (c && r) {
-          const d = e.getPropValue(r, "value") ?? ((n = e.indexesWithinAncestors.get(r.id)) == null ? void 0 : n.toString());
-          d && e.setMemoryProp(c, "value", d);
+        if (r && c) {
+          const s = e.getPropValue(c, "value") ?? ((n = e.indexesWithinAncestors.get(c.id)) == null ? void 0 : n.toString());
+          s && e.setMemoryProp(r, "value", s);
         }
       }
   }

package/lib/accordion.template.js

@@ -1,9 +1,9 @@
-import { jsxs as n, jsx as e } from "react/jsx-runtime";
-import { $ as o, PlaceholderValue as s, css as t } from "@webstudio-is/template";
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import { $ as o, PlaceholderValue as a, css as t } from "@webstudio-is/template";
 import { radix as i } from "./shared/proxy.js";
-import { height as l, width as h, transition as a, spacing as m, weights as g, fontSize as f, fontSizeLineHeight as p, borderWidth as w, colors as u } from "./shared/theme.js";
+import { height as l, width as h, transition as s, spacing as m, weights as g, fontSize as f, fontSizeLineHeight as p, borderWidth as w, colors as u } from "./shared/theme.js";
 import { ChevronDownIcon as y } from "@webstudio-is/icons/svg";
-const r = (c, d) => /* @__PURE__ */ n(
+const n = (c, d) => /* @__PURE__ */ r(
   i.AccordionItem,
   {
     "ws:style": t`
@@ -16,7 +16,7 @@ const r = (c, d) => /* @__PURE__ */ n(
           "ws:style": t`
           display: flex;
         `,
-          children: /* @__PURE__ */ n(
+          children: /* @__PURE__ */ r(
             i.AccordionTrigger,
             {
               "ws:style": t`
@@ -35,7 +35,7 @@ const r = (c, d) => /* @__PURE__ */ n(
             }
           `,
               children: [
-                /* @__PURE__ */ e(o.Text, { children: new s(c) }),
+                /* @__PURE__ */ e(o.Text, { children: new a(c) }),
                 /* @__PURE__ */ e(
                   o.Box,
                   {
@@ -45,7 +45,7 @@ const r = (c, d) => /* @__PURE__ */ n(
               height: ${l[4]};
               width: ${h[4]};
               flex-shrink: 0;
-              transition: ${a.all};
+              transition: ${s.all};
               transition-duration: 200ms;
             `,
                     children: /* @__PURE__ */ e(o.HtmlEmbed, { "ws:label": "Chevron Icon", code: y })
@@ -64,13 +64,15 @@ const r = (c, d) => /* @__PURE__ */ n(
           overflow: hidden;
           font-size: ${f.sm};
           line-height: ${p.sm};
-          transition: ${a.all};
-          height: var(--radix-collapsible-content-height);
+          transition: ${s.all};
           &[data-state="closed"] {
             height: 0;
           }
+          &[data-state="open"] {
+            height: var(--radix-accordion-content-height);
+          }
         `,
-          children: new s(d)
+          children: new a(d)
         }
       )
     ]
@@ -79,16 +81,16 @@ const r = (c, d) => /* @__PURE__ */ n(
   category: "radix",
   description: "A vertically stacked set of interactive headings that each reveal an associated section of content. Clicking on the heading will open the item and close other items.",
   order: 3,
-  template: /* @__PURE__ */ n(i.Accordion, { collapsible: !0, value: "0", children: [
-    r(
+  template: /* @__PURE__ */ r(i.Accordion, { collapsible: !0, value: "0", children: [
+    n(
       "Is it accessible?",
       "Yes. It adheres to the WAI-ARIA design pattern."
     ),
-    r(
+    n(
       "Is it styled?",
       "Yes. It comes with default styles that matches the other components' aesthetic."
     ),
-    r(
+    n(
       "Is it animated?",
       "Yes. It's animated by default, but you can disable it if you prefer."
     )

package/lib/types/accordion.d.ts

@@ -1,5 +1,5 @@
 import { type ForwardRefExoticComponent, type ComponentProps, type RefAttributes } from "react";
-import { Header, Trigger } from "@radix-ui/react-accordion";
+import { Header, Trigger, Content } from "@radix-ui/react-accordion";
 import { type Hook } from "@webstudio-is/react-sdk/runtime";
 export declare const Accordion: ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-accordion").AccordionSingleProps & RefAttributes<HTMLDivElement>, "ref">, "type" | "asChild"> & RefAttributes<HTMLDivElement>>;
 export declare const AccordionItem: ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-accordion").AccordionItemProps & RefAttributes<HTMLDivElement>, "ref">, "value"> & {
@@ -7,7 +7,5 @@ export declare const AccordionItem: ForwardRefExoticComponent<Omit<Omit<import("
 } & RefAttributes<HTMLDivElement>>;
 export declare const AccordionHeader: ForwardRefExoticComponent<Omit<ComponentProps<typeof Header>, "asChild"> & RefAttributes<HTMLHeadingElement>>;
 export declare const AccordionTrigger: ForwardRefExoticComponent<Omit<ComponentProps<typeof Trigger>, "asChild"> & RefAttributes<HTMLButtonElement>>;
-export declare const AccordionContent: ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-accordion").AccordionContentProps & RefAttributes<HTMLDivElement>, "ref">, "asChild" | "forceMount"> & {
-    forceMount?: boolean;
-} & RefAttributes<HTMLDivElement>>;
+export declare const AccordionContent: ForwardRefExoticComponent<Omit<ComponentProps<typeof Content>, "asChild"> & RefAttributes<HTMLDivElement>>;
 export declare const hooksAccordion: Hook;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/sdk-components-react-radix",
-  "version": "0.269.0",
+  "version": "0.270.0",
   "description": "Webstudio wrapper for radix library",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -52,22 +52,22 @@
     "@radix-ui/react-tabs": "^1.1.9",
     "@radix-ui/react-tooltip": "^1.2.4",
     "await-interaction-response": "^0.0.2",
-    "@webstudio-is/icons": "0.269.0",
-    "@webstudio-is/react-sdk": "0.269.0",
-    "@webstudio-is/sdk": "0.269.0",
-    "@webstudio-is/css-engine": "0.269.0"
+    "@webstudio-is/css-engine": "0.270.0",
+    "@webstudio-is/react-sdk": "0.270.0",
+    "@webstudio-is/sdk": "0.270.0",
+    "@webstudio-is/icons": "0.270.0"
   },
   "devDependencies": {
     "@types/react": "^18.2.70",
     "@types/react-dom": "^18.2.25",
     "react": "18.3.0-canary-14898b6a9-20240318",
     "react-dom": "18.3.0-canary-14898b6a9-20240318",
-    "@webstudio-is/css-data": "0.269.0",
     "@webstudio-is/sdk-cli": "^0.94.0",
-    "@webstudio-is/sdk-components-react": "0.269.0",
     "@webstudio-is/generate-arg-types": "0.0.0",
+    "@webstudio-is/sdk-components-react": "0.270.0",
     "@webstudio-is/tsconfig": "1.0.7",
-    "@webstudio-is/template": "0.269.0"
+    "@webstudio-is/template": "0.270.0",
+    "@webstudio-is/css-data": "0.270.0"
   },
   "scripts": {
     "build": "vite build --config ../../vite.sdk-components.config.ts",