@webstudio-is/sdk-components-react-radix 0.193.0 → 0.195.0

package/lib/accordion.ws.js

@@ -1,13 +1,13 @@
-import { AccordionIcon as i, ItemIcon as s, HeaderIcon as l, TriggerIcon as p, ContentIcon as d, ChevronDownIcon as m } from "@webstudio-is/icons/svg";
+import { AccordionIcon as a, ItemIcon as s, HeaderIcon as d, TriggerIcon as l, ContentIcon as p, ChevronDownIcon as m } from "@webstudio-is/icons/svg";
 import { defaultStates as y } from "@webstudio-is/react-sdk";
 import { h3 as h, button as A, div as g } from "@webstudio-is/sdk/normalize.css";
-import { borderB as u, overflow as f, text as I, pb as b, my as v, flex as e, items as x, justify as C, py as H, font as T, hover as w, underline as S, property as t, state as M, h as q, w as $, shrink as k, transition as Y, duration as B } from "./theme/tailwind-classes.js";
+import { borderB as u, overflow as I, text as f, pb as b, my as v, flex as e, items as C, justify as x, py as H, font as T, hover as q, underline as $, property as t, state as w, h as S, w as M, shrink as k, transition as Y, duration as B } from "./theme/tailwind-classes.js";
 import { buttonReset as P } from "./theme/styles.js";
 import { propsAccordion as R, propsAccordionItem as W, propsAccordionHeader as j, propsAccordionTrigger as D, propsAccordionContent as E } from "./__generated__/accordion.props.js";
 const r = {
   div: g
 }, o = [u()].flat(), n = ({
-  children: a
+  children: i
 }) => ({
   type: "instance",
   component: "AccordionHeader",
@@ -21,13 +21,13 @@ const r = {
       styles: [
         e(),
         e(1),
-        x("center"),
-        C("between"),
+        C("center"),
+        x("between"),
         H(4),
         T("medium"),
-        w([S()].flat()),
+        q([$()].flat()),
         t("--accordion-trigger-icon-transform", "0deg"),
-        M(
+        w(
           [t("--accordion-trigger-icon-transform", "180deg")],
           "[data-state=open]"
         )
@@ -36,7 +36,7 @@ const r = {
         {
           type: "instance",
           component: "Text",
-          children: a
+          children: i
         },
         {
           type: "instance",
@@ -45,8 +45,8 @@ const r = {
           // h-4 w-4 shrink-0 transition-transform duration-200
           styles: [
             t("rotate", "--accordion-trigger-icon-transform"),
-            q(4),
-            $(4),
+            S(4),
+            M(4),
             k(0),
             Y("all"),
             B(200)
@@ -71,8 +71,8 @@ const r = {
     }
   ]
 }), c = [
-  f("hidden"),
-  I("sm"),
+  I("hidden"),
+  f("sm"),
   // transition does not work with display: none
   // tc.transition("all"),
   b(4)
@@ -80,9 +80,15 @@ const r = {
   category: "radix",
   order: 3,
   type: "container",
-  icon: i,
+  icon: a,
   presetStyle: r,
   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.",
+  constraints: [
+    {
+      relation: "descendant",
+      component: { $eq: "AccordionItem" }
+    }
+  ],
   template: [
     {
       type: "instance",
@@ -172,22 +178,37 @@ const r = {
   type: "container",
   label: "Item",
   icon: s,
-  constraints: {
-    relation: "ancestor",
-    component: { $eq: "Accordion" }
-  },
+  constraints: [
+    {
+      relation: "ancestor",
+      component: { $eq: "Accordion" }
+    },
+    {
+      relation: "descendant",
+      component: { $eq: "AccordionHeader" }
+    },
+    {
+      relation: "descendant",
+      component: { $eq: "AccordionContent" }
+    }
+  ],
   indexWithinAncestor: "Accordion",
   presetStyle: r
 }, N = {
   category: "hidden",
   type: "container",
   label: "Item Header",
-  icon: l,
-  constraints: {
-    relation: "ancestor",
-    component: { $eq: "AccordionItem" }
-  },
-  detachable: !1,
+  icon: d,
+  constraints: [
+    {
+      relation: "ancestor",
+      component: { $eq: "AccordionItem" }
+    },
+    {
+      relation: "descendant",
+      component: { $eq: "AccordionTrigger" }
+    }
+  ],
   presetStyle: {
     h3: [h, v(0)].flat()
   }
@@ -195,12 +216,11 @@ const r = {
   category: "hidden",
   type: "container",
   label: "Item Trigger",
-  icon: p,
+  icon: l,
   constraints: {
     relation: "ancestor",
     component: { $eq: "AccordionHeader" }
   },
-  detachable: !1,
   states: [
     ...y,
     {
@@ -216,12 +236,11 @@ const r = {
   category: "hidden",
   type: "container",
   label: "Item Content",
-  icon: d,
+  icon: p,
   constraints: {
     relation: "ancestor",
     component: { $eq: "AccordionItem" }
   },
-  detachable: !1,
   presetStyle: r
 }, X = {
   props: R,

package/lib/checkbox.ws.js

@@ -1,17 +1,21 @@
-import { CheckboxCheckedIcon as n, CheckMarkIcon as r, TriggerIcon as s } from "@webstudio-is/icons/svg";
-import { defaultStates as a } from "@webstudio-is/react-sdk";
+import { CheckboxCheckedIcon as a, CheckMarkIcon as r, TriggerIcon as s } from "@webstudio-is/icons/svg";
+import { defaultStates as n } from "@webstudio-is/react-sdk";
 import { button as i, span as p } from "@webstudio-is/sdk/normalize.css";
-import { flex as e, gap as l, items as t, h as d, w as h, shrink as b, rounded as k, border as o, focusVisible as m, outline as y, ring as u, disabled as x, cursor as f, opacity as g, state as C, bg as I, text as c, justify as v } from "./theme/tailwind-classes.js";
+import { flex as e, gap as l, items as t, h as d, w as h, shrink as k, rounded as m, border as o, focusVisible as b, outline as y, ring as u, disabled as x, cursor as C, opacity as g, state as f, bg as I, text as c, justify as v } from "./theme/tailwind-classes.js";
 import { buttonReset as w } from "./theme/styles.js";
-import { propsCheckbox as M, propsCheckboxIndicator as S } from "./__generated__/checkbox.props.js";
-const j = {
+import { propsCheckbox as q, propsCheckboxIndicator as M } from "./__generated__/checkbox.props.js";
+const V = {
   category: "radix",
   order: 101,
   type: "container",
-  icon: n,
+  constraints: {
+    relation: "descendant",
+    component: { $eq: "CheckboxIndicator" }
+  },
+  icon: a,
   description: "Use within a form to allow your users to toggle between checked and not checked. Group checkboxes by matching their “Name” properties. Unlike radios, any number of checkboxes in a group can be checked.",
   states: [
-    ...a,
+    ...n,
     {
       label: "Checked",
       selector: "[data-state=checked]",
@@ -66,15 +70,15 @@ const j = {
             // We are not supporting peer like styles yet
             d(4),
             h(4),
-            b(0),
-            k("sm"),
+            k(0),
+            m("sm"),
             o(),
             o("primary"),
-            m(
+            b(
               [y(), u("ring", 2, "background", 2)].flat()
             ),
-            x([f("not-allowed"), g(50)].flat()),
-            C(
+            x([C("not-allowed"), g(50)].flat()),
+            f(
               [I("primary"), c("primaryForeground")].flat(),
               "[data-state=checked]"
             )
@@ -118,24 +122,27 @@ const j = {
       ]
     }
   ]
-}, q = {
+}, $ = {
   category: "hidden",
   type: "container",
-  detachable: !1,
+  constraints: {
+    relation: "ancestor",
+    component: { $eq: "Checkbox" }
+  },
   icon: s,
-  states: a,
+  states: n,
   presetStyle: {
     span: p
   }
-}, E = {
-  props: M,
+}, j = {
+  props: q,
   initialProps: ["id", "className", "name", "value", "required", "checked"]
-}, G = {
-  props: S
+}, E = {
+  props: M
 };
 export {
-  j as metaCheckbox,
-  q as metaCheckboxIndicator,
-  E as propsMetaCheckbox,
-  G as propsMetaCheckboxIndicator
+  V as metaCheckbox,
+  $ as metaCheckboxIndicator,
+  j as propsMetaCheckbox,
+  E as propsMetaCheckboxIndicator
 };

package/lib/collapsible.js

@@ -1,20 +1,31 @@
-import { jsx as r } from "react/jsx-runtime";
-import { forwardRef as i, Children as l } from "react";
-import { Root as a, Trigger as c, Content as p } from "@radix-ui/react-collapsible";
-import { getClosestInstance as C } from "@webstudio-is/react-sdk/runtime";
-const h = a, g = i(({ children: n, ...o }, t) => {
-  const e = l.toArray(n)[0];
-  return /* @__PURE__ */ r(c, { asChild: !0, ref: t, ...o, children: e ?? /* @__PURE__ */ r("button", { children: "Add button" }) });
-}), u = p, s = "@webstudio-is/sdk-components-react-radix", x = {
-  onNavigatorSelect: (n, o) => {
+import { jsx as i } from "react/jsx-runtime";
+import { forwardRef as r, Children as a } from "react";
+import { Root as c, Trigger as p, Content as C } from "@radix-ui/react-collapsible";
+import { getClosestInstance as l } from "@webstudio-is/react-sdk/runtime";
+const h = c, g = r(({ children: e, ...o }, t) => {
+  const n = a.toArray(e)[0];
+  return /* @__PURE__ */ i(p, { asChild: !0, ref: t, ...o, children: n ?? /* @__PURE__ */ i("button", { children: "Add button" }) });
+}), u = C, s = "@webstudio-is/sdk-components-react-radix", P = {
+  onNavigatorSelect: (e, o) => {
     for (const t of o.instancePath)
       if (t.component === `${s}:CollapsibleContent`) {
-        const e = C(
+        const n = l(
           o.instancePath,
           t,
           `${s}:Collapsible`
         );
-        e && n.setMemoryProp(e, "open", !0);
+        n && e.setMemoryProp(n, "open", !0);
+      }
+  },
+  onNavigatorUnselect: (e, o) => {
+    for (const t of o.instancePath)
+      if (t.component === `${s}:CollapsibleContent`) {
+        const n = l(
+          o.instancePath,
+          t,
+          `${s}:Collapsible`
+        );
+        n && e.setMemoryProp(n, "open", void 0);
       }
   }
 };
@@ -22,5 +33,5 @@ export {
   h as Collapsible,
   u as CollapsibleContent,
   g as CollapsibleTrigger,
-  x as hooksCollapsible
+  P as hooksCollapsible
 };

package/lib/collapsible.ws.js

@@ -1,15 +1,25 @@
-import { CollapsibleIcon as t, TriggerIcon as o, ContentIcon as n } from "@webstudio-is/icons/svg";
+import { CollapsibleIcon as o, TriggerIcon as t, ContentIcon as n } from "@webstudio-is/icons/svg";
 import { div as l } from "@webstudio-is/sdk/normalize.css";
-import { propsCollapsible as p, propsCollapsibleTrigger as i, propsCollapsibleContent as a } from "./__generated__/collapsible.props.js";
-import { getButtonStyles as r } from "./theme/styles.js";
+import { propsCollapsible as p, propsCollapsibleTrigger as i, propsCollapsibleContent as r } from "./__generated__/collapsible.props.js";
+import { getButtonStyles as a } from "./theme/styles.js";
 const e = {
   div: l
-}, g = {
+}, m = {
   category: "radix",
   order: 5,
   type: "container",
+  constraints: [
+    {
+      relation: "descendant",
+      component: { $eq: "CollapsibleTrigger" }
+    },
+    {
+      relation: "descendant",
+      component: { $eq: "CollapsibleContent" }
+    }
+  ],
   presetStyle: e,
-  icon: t,
+  icon: o,
   description: "An interactive component which expands and collapses some content, triggered by a button.",
   template: [
     {
@@ -24,7 +34,7 @@ const e = {
             {
               type: "instance",
               component: "Button",
-              styles: r("outline"),
+              styles: a("outline"),
               children: [
                 {
                   type: "text",
@@ -55,18 +65,24 @@ const e = {
       ]
     }
   ]
-}, b = {
+}, g = {
   category: "hidden",
   type: "container",
-  icon: o,
+  icon: t,
   stylable: !1,
-  detachable: !1
-}, m = {
+  constraints: {
+    relation: "ancestor",
+    component: { $eq: "Collapsible" }
+  }
+}, b = {
   category: "hidden",
   type: "container",
   presetStyle: e,
   icon: n,
-  detachable: !1
+  constraints: {
+    relation: "ancestor",
+    component: { $eq: "Collapsible" }
+  }
 }, y = {
   props: {
     ...p,
@@ -80,12 +96,12 @@ const e = {
 }, h = {
   props: i
 }, u = {
-  props: a
+  props: r
 };
 export {
-  g as metaCollapsible,
-  m as metaCollapsibleContent,
-  b as metaCollapsibleTrigger,
+  m as metaCollapsible,
+  b as metaCollapsibleContent,
+  g as metaCollapsibleTrigger,
   y as propsMetaCollapsible,
   u as propsMetaCollapsibleContent,
   h as propsMetaCollapsibleTrigger

package/lib/dialog.js

@@ -1,45 +1,63 @@
-import { jsx as n } from "react/jsx-runtime";
-import { forwardRef as c, useContext as g, useEffect as h, Children as p, useRef as C } from "react";
-import * as i from "@radix-ui/react-dialog";
-import { ReactSdkContext as m, getClosestInstance as d } from "@webstudio-is/react-sdk/runtime";
-const D = (t) => {
+import { jsx as i } from "react/jsx-runtime";
+import { forwardRef as c, useContext as h, useCallback as D, useEffect as m, Children as v, useRef as k } from "react";
+import * as a from "@radix-ui/react-dialog";
+import { ReactSdkContext as p, getClosestInstance as d } from "@webstudio-is/react-sdk/runtime";
+import { useControllableState as w } from "@radix-ui/react-use-controllable-state";
+import y from "await-interaction-response";
+const C = (t) => {
   const { target: e } = t;
   return !(!(e instanceof HTMLAnchorElement) || e.hasAttribute("href") === !1 || e.href === "#" || e.hasAttribute("target") && e.target === "_blank" || t.ctrlKey || t.metaKey);
-}, A = c((t, e) => {
-  const { open: o, onOpenChange: r } = t, { renderer: s } = g(m);
-  return h(() => {
-    if (s !== void 0 || o === !1)
+}, O = c((t, e) => {
+  const { renderer: o } = h(p), [n, s] = w({
+    prop: t.open,
+    defaultProp: !1,
+    onChange: t.onOpenChange
+  }), r = D(
+    async (l) => {
+      await y(), s(l);
+    },
+    [s]
+  );
+  return m(() => {
+    if (o !== void 0 || n === !1)
       return;
-    const a = (l) => {
-      const { target: u } = l;
-      if (D(l) !== !1) {
-        if (!(u instanceof HTMLAnchorElement))
+    const l = (u) => {
+      const { target: g } = u;
+      if (C(u) !== !1) {
+        if (!(g instanceof HTMLAnchorElement))
           return !1;
-        u.closest('[role="dialog"]') && (r == null || r(!1));
+        g.closest('[role="dialog"]') && (r == null || r(!1));
       }
     };
-    return window.addEventListener("click", a), () => window.removeEventListener("click", a);
-  }, [o, r, s]), /* @__PURE__ */ n(i.Root, { ...t });
-}), E = c(({ children: t, ...e }, o) => {
-  const r = p.toArray(t)[0];
-  return /* @__PURE__ */ n(i.Trigger, { ref: o, asChild: !0, ...e, children: r ?? /* @__PURE__ */ n("button", { children: "Add button or link" }) });
-}), P = c((t, e) => /* @__PURE__ */ n(i.DialogPortal, { children: /* @__PURE__ */ n(i.Overlay, { ref: e, ...t }) })), T = c((t, e) => {
-  const o = C(!1), { renderer: r } = g(m);
-  return h(() => {
-    if (r !== void 0)
+    return window.addEventListener("click", l), () => window.removeEventListener("click", l);
+  }, [n, r, o]), /* @__PURE__ */ i(
+    a.Root,
+    {
+      ...t,
+      onOpenChange: r,
+      open: n
+    }
+  );
+}), x = c(({ children: t, ...e }, o) => {
+  const n = v.toArray(t)[0];
+  return /* @__PURE__ */ i(a.Trigger, { ref: o, asChild: !0, ...e, children: n ?? /* @__PURE__ */ i("button", { children: "Add button or link" }) });
+}), M = c((t, e) => /* @__PURE__ */ i(a.DialogPortal, { children: /* @__PURE__ */ i(a.Overlay, { ref: e, ...t }) })), R = c((t, e) => {
+  const o = k(!1), { renderer: n } = h(p);
+  return m(() => {
+    if (n !== void 0)
       return;
     o.current = !1;
-    const s = (a) => {
-      const { target: l } = a;
-      if (D(a) !== !1) {
+    const s = (r) => {
+      const { target: l } = r;
+      if (C(r) !== !1) {
         if (!(l instanceof HTMLAnchorElement))
           return !1;
         l.closest('[role="dialog"]') && (o.current = !0);
       }
     };
     return window.addEventListener("click", s), () => window.removeEventListener("click", s);
-  }, [r]), /* @__PURE__ */ n(
-    i.Content,
+  }, [n]), /* @__PURE__ */ i(
+    a.Content,
     {
       ref: e,
       ...t,
@@ -48,37 +66,37 @@ const D = (t) => {
       }
     }
   );
-}), L = i.Close, v = "h1", b = c(({ tag: t = v, children: e, ...o }, r) => /* @__PURE__ */ n(i.DialogTitle, { asChild: !0, children: /* @__PURE__ */ n(t, { ref: r, ...o, children: e }) })), x = i.Description, f = "@webstudio-is/sdk-components-react-radix", M = {
+}), $ = a.Close, A = "h1", N = c(({ tag: t = A, children: e, ...o }, n) => /* @__PURE__ */ i(a.DialogTitle, { asChild: !0, children: /* @__PURE__ */ i(t, { ref: n, ...o, children: e }) })), S = a.Description, f = "@webstudio-is/sdk-components-react-radix", F = {
   onNavigatorUnselect: (t, e) => {
     for (const o of e.instancePath)
       if (o.component === `${f}:DialogOverlay`) {
-        const r = d(
+        const n = d(
           e.instancePath,
           o,
           `${f}:Dialog`
         );
-        r && t.setMemoryProp(r, "open", void 0);
+        n && t.setMemoryProp(n, "open", void 0);
       }
   },
   onNavigatorSelect: (t, e) => {
     for (const o of e.instancePath)
       if (o.component === `${f}:DialogOverlay`) {
-        const r = d(
+        const n = d(
           e.instancePath,
           o,
           `${f}:Dialog`
         );
-        r && t.setMemoryProp(r, "open", !0);
+        n && t.setMemoryProp(n, "open", !0);
       }
   }
 };
 export {
-  A as Dialog,
-  L as DialogClose,
-  T as DialogContent,
-  x as DialogDescription,
-  P as DialogOverlay,
-  b as DialogTitle,
-  E as DialogTrigger,
-  M as hooksDialog
+  O as Dialog,
+  $ as DialogClose,
+  R as DialogContent,
+  S as DialogDescription,
+  M as DialogOverlay,
+  N as DialogTitle,
+  x as DialogTrigger,
+  F as hooksDialog
 };