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

package/lib/dialog.ws.js

@@ -1,16 +1,16 @@
 import { TriggerIcon as p, OverlayIcon as g, ContentIcon as d, HeadingIcon as y, TextIcon as m, ButtonElementIcon as D, DialogIcon as u, LargeXIcon as h } from "@webstudio-is/icons/svg";
 import { defaultStates as f } from "@webstudio-is/react-sdk";
 import { button as v, div as b, h2 as C, p as x } from "@webstudio-is/sdk/normalize.css";
-import { fixed as T, inset as $, z as n, bg as t, backdropBlur as q, flex as e, overflow as I, w as i, gap as a, m as P, maxW as S, border as l, p as w, shadow as B, relative as M, my as r, leading as O, text as o, tracking as k, absolute as H, right as E, top as j, rounded as z, opacity as c, items as F, justify as L, h as R, outline as W, hover as X, focus as A, ring as G } from "./theme/tailwind-classes.js";
+import { fixed as T, inset as $, z as n, bg as t, backdropBlur as q, flex as e, overflow as I, w as a, gap as i, m as P, maxW as S, border as l, p as w, shadow as B, relative as M, my as r, leading as O, text as o, tracking as k, absolute as H, right as E, top as j, rounded as z, opacity as s, items as F, justify as L, h as R, outline as W, hover as X, focus as A, ring as G } from "./theme/tailwind-classes.js";
 import { propsDialog as J, propsDialogTrigger as K, propsDialogContent as N, propsDialogOverlay as Q, propsDialogClose as U, propsDialogTitle as V, propsDialogDescription as Y } from "./__generated__/dialog.props.js";
 import { buttonReset as Z, getButtonStyles as _ } from "./theme/styles.js";
-const s = {
+const c = {
   div: b
 }, ee = {
   h2: C
 }, te = {
   p: x
-}, ce = {
+}, se = {
   category: "hidden",
   type: "container",
   icon: p,
@@ -19,10 +19,10 @@ const s = {
     relation: "ancestor",
     component: { $eq: "Dialog" }
   }
-}, se = {
+}, ce = {
   category: "hidden",
   type: "container",
-  presetStyle: s,
+  presetStyle: c,
   icon: g,
   constraints: [
     {
@@ -37,21 +37,25 @@ const s = {
 }, pe = {
   category: "hidden",
   type: "container",
-  presetStyle: s,
+  presetStyle: c,
   icon: d,
   constraints: [
     {
       relation: "ancestor",
       component: { $eq: "DialogOverlay" }
     },
+    // often deleted by users
+    // though radix starts throwing warnings in console
+    /*
     {
       relation: "descendant",
-      component: { $eq: "DialogTitle" }
+      component: { $eq: "DialogTitle" },
     },
     {
       relation: "descendant",
-      component: { $eq: "DialogDescription" }
+      component: { $eq: "DialogDescription" },
     },
+    */
     {
       relation: "descendant",
       component: { $eq: "DialogClose" }
@@ -150,11 +154,11 @@ const s = {
                * border bg-background p-6 shadow-lg
                **/
               styles: [
-                i("full"),
+                a("full"),
                 n(50),
                 e(),
                 e("col"),
-                a(4),
+                i(4),
                 P("auto"),
                 S("lg"),
                 l(),
@@ -168,7 +172,7 @@ const s = {
                   type: "instance",
                   component: "Box",
                   label: "Dialog Header",
-                  styles: [e(), e("col"), a(1)].flat(),
+                  styles: [e(), e("col"), i(1)].flat(),
                   children: [
                     {
                       type: "instance",
@@ -237,16 +241,16 @@ const s = {
                     E(4),
                     j(4),
                     z("sm"),
-                    c(70),
+                    s(70),
                     e(),
                     F("center"),
                     L("center"),
                     R(4),
-                    i(4),
+                    a(4),
                     l(0),
                     t("transparent"),
                     W(),
-                    X(c(100)),
+                    X(s(100)),
                     A(G("ring", 2, "background", 2))
                   ].flat(),
                   children: [
@@ -298,9 +302,9 @@ export {
   ye as metaDialogClose,
   pe as metaDialogContent,
   de as metaDialogDescription,
-  se as metaDialogOverlay,
+  ce as metaDialogOverlay,
   ge as metaDialogTitle,
-  ce as metaDialogTrigger,
+  se as metaDialogTrigger,
   De as propsMetaDialog,
   ve as propsMetaDialogClose,
   he as propsMetaDialogContent,

package/lib/hooks.js

@@ -2,12 +2,11 @@ import { hooksCollapsible as o } from "./collapsible.js";
 import { hooksTabs as r } from "./tabs.js";
 import { hooksDialog as m } from "./dialog.js";
 import { hooksPopover as i } from "./popover.js";
-import { hooksSheet as t } from "./sheet.js";
-import { hooksTooltip as p } from "./tooltip.js";
-import { hooksAccordion as s } from "./accordion.js";
-import { hooksNavigationMenu as h } from "./navigation-menu.js";
-import { hooksSelect as k } from "./select.js";
-const S = [
+import { hooksTooltip as t } from "./tooltip.js";
+import { hooksAccordion as p } from "./accordion.js";
+import { hooksNavigationMenu as s } from "./navigation-menu.js";
+import { hooksSelect as h } from "./select.js";
+const g = [
   o,
   r,
   m,
@@ -15,9 +14,8 @@ const S = [
   t,
   p,
   s,
-  h,
-  k
+  h
 ];
 export {
-  S as hooks
+  g as hooks
 };

package/lib/navigation-menu.ws.js

@@ -387,7 +387,7 @@ const o = {
       component: { $eq: "NavigationMenu" }
     },
     {
-      relation: "child",
+      relation: "descendant",
       component: { $eq: "NavigationMenuItem" }
     }
   ],
@@ -398,7 +398,7 @@ const o = {
   type: "container",
   icon: I,
   constraints: {
-    relation: "parent",
+    relation: "ancestor",
     component: { $eq: "NavigationMenuList" }
   },
   presetStyle: o,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/sdk-components-react-radix",
-  "version": "0.194.0",
+  "version": "0.195.0",
   "description": "Webstudio wrapper for radix library",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -53,10 +53,10 @@
     "@radix-ui/react-tooltip": "^1.1.4",
     "@radix-ui/react-use-controllable-state": "^1.1.0",
     "await-interaction-response": "^0.0.2",
-    "@webstudio-is/css-engine": "0.194.0",
-    "@webstudio-is/react-sdk": "0.194.0",
-    "@webstudio-is/icons": "0.194.0",
-    "@webstudio-is/sdk": "0.194.0"
+    "@webstudio-is/icons": "0.195.0",
+    "@webstudio-is/react-sdk": "0.195.0",
+    "@webstudio-is/css-engine": "0.195.0",
+    "@webstudio-is/sdk": "0.195.0"
   },
   "devDependencies": {
     "@types/node": "^22.9.3",
@@ -66,10 +66,10 @@
     "react-dom": "18.3.0-canary-14898b6a9-20240318",
     "tailwindcss": "^3.3.3",
     "@webstudio-is/css-data": "0.0.0",
-    "@webstudio-is/sdk-components-react": "0.194.0",
     "@webstudio-is/generate-arg-types": "0.0.0",
     "@webstudio-is/sdk-cli": "^0.94.0",
-    "@webstudio-is/tsconfig": "1.0.7"
+    "@webstudio-is/tsconfig": "1.0.7",
+    "@webstudio-is/sdk-components-react": "0.195.0"
   },
   "scripts": {
     "build": "vite build --config ../../vite.sdk-components.config.ts",

package/lib/sheet.js

@@ -1,43 +0,0 @@
-import { jsx as s } from "react/jsx-runtime";
-import { forwardRef as f } from "react";
-import { getClosestInstance as r } from "@webstudio-is/react-sdk/runtime";
-import { DialogContent as h } from "./dialog.js";
-f(
-  ({ tag: n = "nav", side: t = "left", role: e = "navigation", children: o, ...i }, c) => /* @__PURE__ */ s(
-    h,
-    {
-      asChild: !0,
-      "data-side": t,
-      role: e,
-      ...i,
-      children: /* @__PURE__ */ s(n, { ref: c, children: o })
-    }
-  )
-);
-const a = "@webstudio-is/sdk-components-react-radix", P = {
-  onNavigatorUnselect: (n, t) => {
-    for (const e of t.instancePath)
-      if (e.component === `${a}:SheetOverlay`) {
-        const o = r(
-          t.instancePath,
-          e,
-          `${a}:Sheet`
-        );
-        o && n.setMemoryProp(o, "open", void 0);
-      }
-  },
-  onNavigatorSelect: (n, t) => {
-    for (const e of t.instancePath)
-      if (e.component === `${a}:SheetOverlay`) {
-        const o = r(
-          t.instancePath,
-          e,
-          `${a}:Sheet`
-        );
-        o && n.setMemoryProp(o, "open", !0);
-      }
-  }
-};
-export {
-  P as hooksSheet
-};

package/lib/types/sheet.d.ts

@@ -1,16 +0,0 @@
-import { type Hook } from "@webstudio-is/react-sdk/runtime";
-export declare const Sheet: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/react-dialog").DialogProps, "defaultOpen"> & import("react").RefAttributes<HTMLDivElement>>;
-export declare const SheetTrigger: import("react").ForwardRefExoticComponent<{
-    children: import("react").ReactNode;
-} & import("react").RefAttributes<HTMLButtonElement>>;
-export declare const SheetOverlay: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/react-dialog").DialogOverlayProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-export declare const SheetClose: import("react").ForwardRefExoticComponent<import("@radix-ui/react-dialog").DialogCloseProps & import("react").RefAttributes<HTMLButtonElement>>;
-export declare const SheetTitle: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/react-dialog").DialogTitleProps & import("react").RefAttributes<HTMLHeadingElement> & {
-    tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
-}, "ref"> & import("react").RefAttributes<HTMLHeadingElement>>;
-export declare const SheetDescription: import("react").ForwardRefExoticComponent<import("@radix-ui/react-dialog").DialogDescriptionProps & import("react").RefAttributes<HTMLParagraphElement>>;
-export declare const SheetContent: import("react").ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-dialog").DialogContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
-    tag?: "div" | "nav";
-    side?: "top" | "right" | "bottom" | "left";
-} & import("react").RefAttributes<HTMLDivElement>>;
-export declare const hooksSheet: Hook;