@webstudio-is/sdk-components-react-radix 0.85.0 → 0.87.0

package/lib/popover.js

@@ -1,12 +1,12 @@
 import { jsx } from "react/jsx-runtime";
-import * as PopoverPrimitive from "@radix-ui/react-popover";
 import {
   forwardRef,
   Children
 } from "react";
-const Popover = forwardRef(({ open: openProp, isOpen, ...props }, ref) => {
-  const open = openProp ?? (isOpen === "open" ? true : isOpen === "closed" ? false : void 0);
-  return /* @__PURE__ */ jsx(PopoverPrimitive.Root, { open, ...props });
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { getClosestInstance } from "@webstudio-is/react-sdk";
+const Popover = forwardRef((props, _ref) => {
+  return /* @__PURE__ */ jsx(PopoverPrimitive.Root, { ...props });
 });
 const PopoverTrigger = forwardRef(({ children, ...props }, ref) => {
   const firstChild = Children.toArray(children)[0];
@@ -24,8 +24,40 @@ const PopoverContent = forwardRef(
     }
   ) })
 );
+const namespace = "@webstudio-is/sdk-components-react-radix";
+const hooksPopover = {
+  onNavigatorUnselect: (context, event) => {
+    for (const instance of event.instancePath) {
+      if (instance.component === `${namespace}:PopoverContent`) {
+        const popover = getClosestInstance(
+          event.instancePath,
+          instance,
+          `${namespace}:Popover`
+        );
+        if (popover) {
+          context.setPropVariable(popover.id, "open", false);
+        }
+      }
+    }
+  },
+  onNavigatorSelect: (context, event) => {
+    for (const instance of event.instancePath) {
+      if (instance.component === `${namespace}:PopoverContent`) {
+        const popover = getClosestInstance(
+          event.instancePath,
+          instance,
+          `${namespace}:Popover`
+        );
+        if (popover) {
+          context.setPropVariable(popover.id, "open", true);
+        }
+      }
+    }
+  }
+};
 export {
   Popover,
   PopoverContent,
-  PopoverTrigger
+  PopoverTrigger,
+  hooksPopover
 };

package/lib/popover.ws.js

@@ -8,32 +8,27 @@ import {
   propsPopoverTrigger
 } from "./__generated__/popover.props";
 import { div } from "@webstudio-is/react-sdk/css-normalize";
+import { template as buttonTemplate } from "./button.ws";
 const presetStyle = {
   div
 };
 const metaPopoverTrigger = {
   category: "hidden",
-  invalidAncestors: [],
   type: "container",
-  label: "Popover Trigger",
   icon: TriggerIcon,
   stylable: false,
   detachable: false
 };
 const metaPopoverContent = {
   category: "hidden",
-  invalidAncestors: [],
   type: "container",
   presetStyle,
-  label: "Popover Content",
   icon: ContentIcon,
   detachable: false
 };
 const metaPopover = {
   category: "radix",
-  invalidAncestors: [],
   type: "container",
-  label: "Popover",
   icon: PopoverIcon,
   order: 15,
   stylable: false,
@@ -42,14 +37,20 @@ const metaPopover = {
       type: "instance",
       component: "Popover",
       dataSources: {
-        // We don't have support for boolean or undefined, instead of binding on open we bind on a string
-        isOpen: { type: "variable", initialValue: "initial" }
+        popoverOpen: { type: "variable", initialValue: false }
       },
       props: [
         {
           type: "dataSource",
-          name: "isOpen",
-          dataSourceName: "isOpen"
+          name: "open",
+          dataSourceName: "popoverOpen"
+        },
+        {
+          name: "onOpenChange",
+          type: "action",
+          value: [
+            { type: "execute", args: ["open"], code: `popoverOpen = open` }
+          ]
         }
       ],
       children: [
@@ -57,13 +58,9 @@ const metaPopover = {
           type: "instance",
           component: "PopoverTrigger",
           props: [],
-          children: [
-            {
-              type: "instance",
-              component: "Button",
-              children: [{ type: "text", value: "Button" }]
-            }
-          ]
+          children: buttonTemplate({
+            children: [{ type: "text", value: "Button" }]
+          })
         },
         {
           type: "instance",
@@ -97,7 +94,7 @@ const metaPopover = {
 };
 const propsMetaPopover = {
   props: propsPopover,
-  initialProps: ["isOpen", "modal"]
+  initialProps: ["open", "modal"]
 };
 const propsMetaPopoverTrigger = {
   props: propsPopoverTrigger

package/lib/props.js

@@ -37,7 +37,24 @@ import {
   propsMetaTabsTrigger,
   propsMetaTabsContent
 } from "./tabs.ws";
+import { propsMeta } from "./button.ws";
+import { propsMeta as propsMeta2 } from "./input.ws";
+import { propsMeta as propsMeta3 } from "./textarea.ws";
+import { propsMeta as propsMeta4 } from "./label.ws";
+import {
+  propsMetaAccordion,
+  propsMetaAccordionItem,
+  propsMetaAccordionHeader,
+  propsMetaAccordionTrigger,
+  propsMetaAccordionContent
+} from "./accordion.ws";
 export {
+  propsMetaAccordion as Accordion,
+  propsMetaAccordionContent as AccordionContent,
+  propsMetaAccordionHeader as AccordionHeader,
+  propsMetaAccordionItem as AccordionItem,
+  propsMetaAccordionTrigger as AccordionTrigger,
+  propsMeta as Button,
   propsMetaCollapsible as Collapsible,
   propsMetaCollapsibleContent as CollapsibleContent,
   propsMetaCollapsibleTrigger as CollapsibleTrigger,
@@ -48,6 +65,8 @@ export {
   propsMetaDialogOverlay as DialogOverlay,
   propsMetaDialogTitle as DialogTitle,
   propsMetaDialogTrigger as DialogTrigger,
+  propsMeta2 as Input,
+  propsMeta4 as Label,
   propsMetaPopover as Popover,
   propsMetaPopoverContent as PopoverContent,
   propsMetaPopoverTrigger as PopoverTrigger,
@@ -62,6 +81,7 @@ export {
   propsMetaTabsContent as TabsContent,
   propsMetaTabsList as TabsList,
   propsMetaTabsTrigger as TabsTrigger,
+  propsMeta3 as Textarea,
   propsMetaTooltip as Tooltip,
   propsMetaTooltipContent as TooltipContent,
   propsMetaTooltipTrigger as TooltipTrigger

package/lib/sheet.js

@@ -2,6 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import {
   forwardRef
 } from "react";
+import { getClosestInstance } from "@webstudio-is/react-sdk";
 import * as Dialog from "./dialog";
 const Sheet = Dialog.Dialog;
 const SheetTrigger = Dialog.DialogTrigger;
@@ -24,6 +25,37 @@ const SheetContent = forwardRef(
     );
   }
 );
+const namespace = "@webstudio-is/sdk-components-react-radix";
+const hooksSheet = {
+  onNavigatorUnselect: (context, event) => {
+    for (const instance of event.instancePath) {
+      if (instance.component === `${namespace}:SheetOverlay`) {
+        const sheet = getClosestInstance(
+          event.instancePath,
+          instance,
+          `${namespace}:Sheet`
+        );
+        if (sheet) {
+          context.setPropVariable(sheet.id, "open", false);
+        }
+      }
+    }
+  },
+  onNavigatorSelect: (context, event) => {
+    for (const instance of event.instancePath) {
+      if (instance.component === `${namespace}:SheetOverlay`) {
+        const sheet = getClosestInstance(
+          event.instancePath,
+          instance,
+          `${namespace}:Sheet`
+        );
+        if (sheet) {
+          context.setPropVariable(sheet.id, "open", true);
+        }
+      }
+    }
+  }
+};
 export {
   Sheet,
   SheetClose,
@@ -31,5 +63,6 @@ export {
   SheetDescription,
   SheetOverlay,
   SheetTitle,
-  SheetTrigger
+  SheetTrigger,
+  hooksSheet
 };

package/lib/sheet.ws.js

@@ -20,6 +20,7 @@ import {
   propsSheetDescription
 } from "./__generated__/sheet.props";
 import { div, nav, button, h2, p } from "@webstudio-is/react-sdk/css-normalize";
+import { template as buttonTemplate } from "./button.ws";
 const contentPresetStyle = {
   div,
   nav
@@ -39,7 +40,6 @@ const descriptionPresetStyle = {
 const metaSheetTrigger = {
   category: "hidden",
   type: "container",
-  label: "Sheet Trigger",
   icon: TriggerIcon,
   stylable: false,
   detachable: false
@@ -47,7 +47,6 @@ const metaSheetTrigger = {
 const metaSheetContent = {
   category: "hidden",
   type: "container",
-  label: "Sheet Content",
   icon: ContentIcon,
   detachable: false,
   presetStyle: contentPresetStyle,
@@ -62,7 +61,6 @@ const metaSheetOverlay = {
   category: "hidden",
   type: "container",
   presetStyle,
-  label: "Sheet Overlay",
   icon: OverlayIcon,
   detachable: false
 };
@@ -70,27 +68,23 @@ const metaSheetTitle = {
   category: "hidden",
   type: "container",
   presetStyle: titlePresetStyle,
-  label: "Sheet Title",
   icon: HeadingIcon
 };
 const metaSheetDescription = {
   category: "hidden",
   type: "container",
   presetStyle: descriptionPresetStyle,
-  label: "Sheet Description",
   icon: TextIcon
 };
 const metaSheetClose = {
   category: "hidden",
   type: "container",
   presetStyle: buttonPresetStyle,
-  label: "Sheet Close",
   icon: ButtonElementIcon
 };
 const metaSheet = {
   category: "radix",
   type: "container",
-  label: "Sheet",
   icon: HamburgerMenuIcon,
   order: 15,
   stylable: false,
@@ -99,27 +93,47 @@ const metaSheet = {
       type: "instance",
       component: "Sheet",
       dataSources: {
-        // We don't have support for boolean or undefined, instead of binding on open we bind on a string
-        isOpen: { type: "variable", initialValue: "initial" }
+        sheetOpen: { type: "variable", initialValue: false }
       },
       props: [
         {
           type: "dataSource",
-          name: "isOpen",
-          dataSourceName: "isOpen"
+          name: "open",
+          dataSourceName: "sheetOpen"
+        },
+        {
+          name: "onOpenChange",
+          type: "action",
+          value: [
+            { type: "execute", args: ["open"], code: `sheetOpen = open` }
+          ]
         }
       ],
       children: [
         {
           type: "instance",
           component: "SheetTrigger",
-          children: [
-            {
-              type: "instance",
-              component: "Button",
-              children: [{ type: "text", value: "Button" }]
-            }
-          ]
+          children: buttonTemplate({
+            props: [
+              { name: "variant", type: "string", value: "ghost" },
+              { name: "size", type: "string", value: "icon" }
+            ],
+            children: [
+              {
+                type: "instance",
+                component: "HtmlEmbed",
+                label: "Hamburger Menu Svg",
+                props: [
+                  {
+                    type: "string",
+                    name: "code",
+                    value: HamburgerMenuIcon
+                  }
+                ],
+                children: []
+              }
+            ]
+          })
         },
         {
           type: "instance",
@@ -261,7 +275,7 @@ const metaSheet = {
 };
 const propsMetaSheet = {
   props: propsSheet,
-  initialProps: ["isOpen", "modal"]
+  initialProps: ["open", "modal"]
 };
 const propsMetaSheetTrigger = {
   props: propsSheetTrigger

package/lib/tabs.js

@@ -4,7 +4,10 @@ import {
   Children
 } from "react";
 import { Root, List, Trigger, Content } from "@radix-ui/react-tabs";
-import { getIndexWithinAncestorFromComponentProps } from "@webstudio-is/react-sdk";
+import {
+  getClosestInstance,
+  getIndexWithinAncestorFromComponentProps
+} from "@webstudio-is/react-sdk";
 const Tabs = Root;
 const TabsList = List;
 const TabsTrigger = forwardRef(({ value, children, ...props }, ref) => {
@@ -16,9 +19,28 @@ const TabsContent = forwardRef(({ value, ...props }, ref) => {
   const index = getIndexWithinAncestorFromComponentProps(props);
   return /* @__PURE__ */ jsx(Content, { ref, value: value ?? index, ...props });
 });
+const namespace = "@webstudio-is/sdk-components-react-radix";
+const hooksTabs = {
+  onNavigatorSelect: (context, event) => {
+    for (const instance of event.instancePath) {
+      if (instance.component === `${namespace}:TabsContent`) {
+        const tabs = getClosestInstance(
+          event.instancePath,
+          instance,
+          `${namespace}:Tabs`
+        );
+        const contentValue = context.getPropValue(instance.id, "value") ?? context.indexesWithinAncestors.get(instance.id)?.toString();
+        if (tabs && contentValue) {
+          context.setPropVariable(tabs.id, "value", contentValue);
+        }
+      }
+    }
+  }
+};
 export {
   Tabs,
   TabsContent,
   TabsList,
-  TabsTrigger
+  TabsTrigger,
+  hooksTabs
 };

package/lib/tabs.ws.js

@@ -44,7 +44,6 @@ const tabsContentStyles = [
 const metaTabs = {
   category: "radix",
   type: "container",
-  label: "Tabs",
   icon: TabsIcon,
   presetStyle,
   template: [
@@ -60,11 +59,7 @@ const metaTabs = {
           name: "onValueChange",
           type: "action",
           value: [
-            {
-              type: "execute",
-              args: ["value"],
-              code: `tabsValue = value`
-            }
+            { type: "execute", args: ["value"], code: `tabsValue = value` }
           ]
         }
       ],
@@ -132,7 +127,6 @@ const metaTabsList = {
   category: "hidden",
   detachable: false,
   type: "container",
-  label: "Tabs List",
   icon: HeaderIcon,
   requiredAncestors: ["Tabs"],
   presetStyle
@@ -140,34 +134,18 @@ const metaTabsList = {
 const metaTabsTrigger = {
   category: "hidden",
   type: "container",
-  label: "Tabs Trigger",
   icon: TriggerIcon,
   requiredAncestors: ["TabsList"],
   invalidAncestors: ["TabsTrigger"],
-  indexWithinAncestor: "Tabs",
-  template: [
-    {
-      type: "instance",
-      component: "TabsTrigger",
-      children: [{ type: "text", value: "New Tab" }]
-    }
-  ]
+  indexWithinAncestor: "Tabs"
 };
 const metaTabsContent = {
   category: "hidden",
   type: "container",
-  label: "Tabs Content",
   icon: ContentIcon,
   requiredAncestors: ["Tabs"],
   indexWithinAncestor: "Tabs",
-  presetStyle,
-  template: [
-    {
-      type: "instance",
-      component: "TabsContent",
-      children: [{ type: "text", value: "New Tab Content" }]
-    }
-  ]
+  presetStyle
 };
 const propsMetaTabs = {
   props: propsTabs

package/lib/textarea.js

@@ -0,0 +1,8 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+const Textarea = forwardRef(({ children: _children, ...props }, ref) => {
+  return /* @__PURE__ */ jsx("textarea", { ref, ...props });
+});
+export {
+  Textarea
+};

package/lib/textarea.ws.js

@@ -0,0 +1,70 @@
+import { FormTextAreaIcon } from "@webstudio-is/icons/svg";
+import {
+  defaultStates
+} from "@webstudio-is/react-sdk";
+import { textarea } from "@webstudio-is/react-sdk/css-normalize";
+import { props } from "./__generated__/textarea.props";
+import * as tc from "./theme/tailwind-classes";
+const presetStyle = {
+  textarea
+};
+const meta = {
+  category: "radix",
+  type: "control",
+  invalidAncestors: ["Button"],
+  icon: FormTextAreaIcon,
+  presetStyle,
+  states: [
+    ...defaultStates,
+    { selector: ":disabled", label: "Disabled" },
+    { selector: "::placeholder", label: "Placeholder" },
+    // @todo share https://github.com/webstudio-is/webstudio-builder/issues/2102
+    { selector: ":valid", label: "Valid" },
+    { selector: ":invalid", label: "Invalid" },
+    { selector: ":required", label: "Required" },
+    { selector: ":optional", label: "Optional" },
+    { selector: ":enabled", label: "Enabled" },
+    { selector: ":read-only", label: "Read Only" },
+    { selector: ":read-write", label: "Read Write" }
+  ],
+  order: 1,
+  template: [
+    {
+      type: "instance",
+      component: "Textarea",
+      styles: [
+        // flex min-h-[80px] w-full rounded-md
+        // border border-input bg-background
+        // px-3 py-2 text-sm ring-offset-background
+        // placeholder:text-muted-foreground
+        // focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring
+        // focus-visible:ring-offset-2
+        // disabled:cursor-not-allowed disabled:opacity-50
+        tc.flex(),
+        tc.minH(20),
+        tc.w("full"),
+        tc.rounded("md"),
+        tc.border(),
+        tc.border("input"),
+        tc.bg("background"),
+        tc.px(3),
+        tc.py(2),
+        tc.text("sm"),
+        tc.state(tc.text("mutedForeground"), "::placeholder"),
+        tc.focusVisible(
+          [tc.outline("none"), tc.ring("ring", 2, "background", 2)].flat()
+        ),
+        tc.disabled([tc.cursor("not-allowed"), tc.opacity(50)].flat())
+      ].flat(),
+      children: []
+    }
+  ]
+};
+const propsMeta = {
+  props,
+  initialProps: ["id", "name", "placeholder", "required", "autoFocus"]
+};
+export {
+  meta,
+  propsMeta
+};