@webstudio-is/sdk-components-react-radix 0.168.0 → 0.174.0

package/lib/components.js

@@ -4,7 +4,10 @@ import {
   Children
 } from "react";
 import { Root, Trigger, Content } from "@radix-ui/react-collapsible";
-import { getClosestInstance } from "@webstudio-is/react-sdk";
+import {
+  getClosestInstance,
+  getInstanceSelectorById
+} from "@webstudio-is/react-sdk";
 import { jsx } from "react/jsx-runtime";
 var Collapsible = Root;
 var CollapsibleTrigger = forwardRef(({ children, ...props }, ref) => {
@@ -24,7 +27,8 @@ import {
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import {
   ReactSdkContext,
-  getClosestInstance as getClosestInstance2
+  getClosestInstance as getClosestInstance2,
+  getInstanceSelectorById as getInstanceSelectorById2
 } from "@webstudio-is/react-sdk";
 import { jsx as jsx2 } from "react/jsx-runtime";
 var willNavigate = (event) => {
@@ -127,7 +131,10 @@ import {
   Children as Children3
 } from "react";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
-import { getClosestInstance as getClosestInstance3 } from "@webstudio-is/react-sdk";
+import {
+  getClosestInstance as getClosestInstance3,
+  getInstanceSelectorById as getInstanceSelectorById3
+} from "@webstudio-is/react-sdk";
 import { jsx as jsx3 } from "react/jsx-runtime";
 var Popover = forwardRef3((props, _ref) => {
   return /* @__PURE__ */ jsx3(PopoverPrimitive.Root, { ...props });
@@ -151,7 +158,10 @@ var PopoverContent = forwardRef3(
 
 // src/tooltip.tsx
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import { getClosestInstance as getClosestInstance4 } from "@webstudio-is/react-sdk";
+import {
+  getClosestInstance as getClosestInstance4,
+  getInstanceSelectorById as getInstanceSelectorById4
+} from "@webstudio-is/react-sdk";
 import {
   forwardRef as forwardRef4,
   Children as Children4
@@ -181,7 +191,8 @@ import {
 import { Root as Root5, List, Trigger as Trigger5, Content as Content5 } from "@radix-ui/react-tabs";
 import {
   getClosestInstance as getClosestInstance5,
-  getIndexWithinAncestorFromComponentProps
+  getIndexWithinAncestorFromComponentProps,
+  getInstanceSelectorById as getInstanceSelectorById5
 } from "@webstudio-is/react-sdk";
 import { jsx as jsx5 } from "react/jsx-runtime";
 var Tabs = Root5;
@@ -216,7 +227,8 @@ import {
 } from "@radix-ui/react-accordion";
 import {
   getClosestInstance as getClosestInstance6,
-  getIndexWithinAncestorFromComponentProps as getIndexWithinAncestorFromComponentProps2
+  getIndexWithinAncestorFromComponentProps as getIndexWithinAncestorFromComponentProps2,
+  getInstanceSelectorById as getInstanceSelectorById6
 } from "@webstudio-is/react-sdk";
 import { jsx as jsx7 } from "react/jsx-runtime";
 var Accordion = forwardRef7((props, ref) => {
@@ -235,6 +247,7 @@ import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
 import {
   getClosestInstance as getClosestInstance7,
   getIndexWithinAncestorFromComponentProps as getIndexWithinAncestorFromComponentProps3,
+  getInstanceSelectorById as getInstanceSelectorById7,
   ReactSdkContext as ReactSdkContext2
 } from "@webstudio-is/react-sdk";
 import {
@@ -269,7 +282,8 @@ var NavigationMenuTrigger = forwardRef8(({ children, ...props }, ref) => {
 
 // src/select.tsx
 import {
-  forwardRef as forwardRef9
+  forwardRef as forwardRef9,
+  useContext as useContext3
 } from "react";
 import {
   Root as Root9,
@@ -282,12 +296,22 @@ import {
   Portal as Portal3,
   Viewport as Viewport2
 } from "@radix-ui/react-select";
-import { getClosestInstance as getClosestInstance8 } from "@webstudio-is/react-sdk";
+import {
+  getClosestInstance as getClosestInstance8,
+  getInstanceSelectorById as getInstanceSelectorById8,
+  ReactSdkContext as ReactSdkContext3
+} from "@webstudio-is/react-sdk";
 import { jsx as jsx9 } from "react/jsx-runtime";
 var Select = forwardRef9((props, _ref) => {
   return /* @__PURE__ */ jsx9(Root9, { ...props });
 });
-var SelectTrigger = Trigger8;
+var SelectTrigger = forwardRef9((props, ref) => {
+  const { renderer } = useContext3(ReactSdkContext3);
+  const onPointerDown = renderer === "canvas" ? (event) => {
+    event.preventDefault();
+  } : void 0;
+  return /* @__PURE__ */ jsx9(Trigger8, { onPointerDown, ref, ...props });
+});
 var SelectValue = forwardRef9((props, ref) => {
   return /* @__PURE__ */ jsx9(Value, { ref, ...props });
 });

package/lib/hooks.js

@@ -4,7 +4,10 @@ import {
   Children
 } from "react";
 import { Root, Trigger, Content } from "@radix-ui/react-collapsible";
-import { getClosestInstance } from "@webstudio-is/react-sdk";
+import {
+  getClosestInstance,
+  getInstanceSelectorById
+} from "@webstudio-is/react-sdk";
 import { jsx } from "react/jsx-runtime";
 var CollapsibleTrigger = forwardRef(({ children, ...props }, ref) => {
   const firstChild = Children.toArray(children)[0];
@@ -21,7 +24,11 @@ var hooksCollapsible = {
           `${namespace}:Collapsible`
         );
         if (collapsible) {
-          context.setPropVariable(collapsible.id, "open", true);
+          const instanceSelector = getInstanceSelectorById(
+            event.instanceSelector,
+            collapsible.id
+          );
+          context.setMemoryProp(instanceSelector, "open", true);
         }
       }
     }
@@ -35,7 +42,8 @@ import {
 import { Root as Root2, List, Trigger as Trigger2, Content as Content2 } from "@radix-ui/react-tabs";
 import {
   getClosestInstance as getClosestInstance2,
-  getIndexWithinAncestorFromComponentProps
+  getIndexWithinAncestorFromComponentProps,
+  getInstanceSelectorById as getInstanceSelectorById2
 } from "@webstudio-is/react-sdk";
 import { jsx as jsx2 } from "react/jsx-runtime";
 var TabsTrigger = forwardRef2(({ value, ...props }, ref) => {
@@ -58,7 +66,11 @@ var hooksTabs = {
         );
         const contentValue = context.getPropValue(instance.id, "value") ?? context.indexesWithinAncestors.get(instance.id)?.toString();
         if (tabs && contentValue) {
-          context.setPropVariable(tabs.id, "value", contentValue);
+          const instanceSelector = getInstanceSelectorById2(
+            event.instanceSelector,
+            tabs.id
+          );
+          context.setMemoryProp(instanceSelector, "value", contentValue);
         }
       }
     }
@@ -76,7 +88,8 @@ import {
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import {
   ReactSdkContext,
-  getClosestInstance as getClosestInstance3
+  getClosestInstance as getClosestInstance3,
+  getInstanceSelectorById as getInstanceSelectorById3
 } from "@webstudio-is/react-sdk";
 import { jsx as jsx3 } from "react/jsx-runtime";
 var willNavigate = (event) => {
@@ -181,7 +194,11 @@ var hooksDialog = {
           `${namespace3}:Dialog`
         );
         if (dialog) {
-          context.setPropVariable(dialog.id, "open", false);
+          const instanceSelector = getInstanceSelectorById3(
+            event.instanceSelector,
+            dialog.id
+          );
+          context.setMemoryProp(instanceSelector, "open", void 0);
         }
       }
     }
@@ -195,7 +212,11 @@ var hooksDialog = {
           `${namespace3}:Dialog`
         );
         if (dialog) {
-          context.setPropVariable(dialog.id, "open", true);
+          const instanceSelector = getInstanceSelectorById3(
+            event.instanceSelector,
+            dialog.id
+          );
+          context.setMemoryProp(instanceSelector, "open", true);
         }
       }
     }
@@ -208,7 +229,10 @@ import {
   Children as Children3
 } from "react";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
-import { getClosestInstance as getClosestInstance4 } from "@webstudio-is/react-sdk";
+import {
+  getClosestInstance as getClosestInstance4,
+  getInstanceSelectorById as getInstanceSelectorById4
+} from "@webstudio-is/react-sdk";
 import { jsx as jsx4 } from "react/jsx-runtime";
 var Popover = forwardRef4((props, _ref) => {
   return /* @__PURE__ */ jsx4(PopoverPrimitive.Root, { ...props });
@@ -240,7 +264,11 @@ var hooksPopover = {
           `${namespace4}:Popover`
         );
         if (popover) {
-          context.setPropVariable(popover.id, "open", false);
+          const instanceSelector = getInstanceSelectorById4(
+            event.instanceSelector,
+            popover.id
+          );
+          context.setMemoryProp(instanceSelector, "open", void 0);
         }
       }
     }
@@ -254,7 +282,11 @@ var hooksPopover = {
           `${namespace4}:Popover`
         );
         if (popover) {
-          context.setPropVariable(popover.id, "open", true);
+          const instanceSelector = getInstanceSelectorById4(
+            event.instanceSelector,
+            popover.id
+          );
+          context.setMemoryProp(instanceSelector, "open", true);
         }
       }
     }
@@ -265,7 +297,10 @@ var hooksPopover = {
 import {
   forwardRef as forwardRef5
 } from "react";
-import { getClosestInstance as getClosestInstance5 } from "@webstudio-is/react-sdk";
+import {
+  getClosestInstance as getClosestInstance5,
+  getInstanceSelectorById as getInstanceSelectorById5
+} from "@webstudio-is/react-sdk";
 import { jsx as jsx5 } from "react/jsx-runtime";
 var SheetContent = forwardRef5(
   ({ tag = "nav", side = "left", role = "navigation", children, ...props }, ref) => {
@@ -293,7 +328,11 @@ var hooksSheet = {
           `${namespace5}:Sheet`
         );
         if (sheet) {
-          context.setPropVariable(sheet.id, "open", false);
+          const instanceSelector = getInstanceSelectorById5(
+            event.instanceSelector,
+            sheet.id
+          );
+          context.setMemoryProp(instanceSelector, "open", void 0);
         }
       }
     }
@@ -307,7 +346,11 @@ var hooksSheet = {
           `${namespace5}:Sheet`
         );
         if (sheet) {
-          context.setPropVariable(sheet.id, "open", true);
+          const instanceSelector = getInstanceSelectorById5(
+            event.instanceSelector,
+            sheet.id
+          );
+          context.setMemoryProp(instanceSelector, "open", true);
         }
       }
     }
@@ -316,7 +359,10 @@ var hooksSheet = {
 
 // src/tooltip.tsx
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import { getClosestInstance as getClosestInstance6 } from "@webstudio-is/react-sdk";
+import {
+  getClosestInstance as getClosestInstance6,
+  getInstanceSelectorById as getInstanceSelectorById6
+} from "@webstudio-is/react-sdk";
 import {
   forwardRef as forwardRef6,
   Children as Children4
@@ -349,7 +395,11 @@ var hooksTooltip = {
           `${namespace6}:Tooltip`
         );
         if (tooltip) {
-          context.setPropVariable(tooltip.id, "open", false);
+          const instanceSelector = getInstanceSelectorById6(
+            event.instanceSelector,
+            tooltip.id
+          );
+          context.setMemoryProp(instanceSelector, "open", void 0);
         }
       }
     }
@@ -363,7 +413,11 @@ var hooksTooltip = {
           `${namespace6}:Tooltip`
         );
         if (tooltip) {
-          context.setPropVariable(tooltip.id, "open", true);
+          const instanceSelector = getInstanceSelectorById6(
+            event.instanceSelector,
+            tooltip.id
+          );
+          context.setMemoryProp(instanceSelector, "open", true);
         }
       }
     }
@@ -383,7 +437,8 @@ import {
 } from "@radix-ui/react-accordion";
 import {
   getClosestInstance as getClosestInstance7,
-  getIndexWithinAncestorFromComponentProps as getIndexWithinAncestorFromComponentProps2
+  getIndexWithinAncestorFromComponentProps as getIndexWithinAncestorFromComponentProps2,
+  getInstanceSelectorById as getInstanceSelectorById7
 } from "@webstudio-is/react-sdk";
 import { jsx as jsx7 } from "react/jsx-runtime";
 var Accordion = forwardRef7((props, ref) => {
@@ -411,7 +466,11 @@ var hooksAccordion = {
         if (accordion && item) {
           const itemValue = context.getPropValue(item.id, "value") ?? context.indexesWithinAncestors.get(item.id)?.toString();
           if (itemValue) {
-            context.setPropVariable(accordion.id, "value", itemValue);
+            const instanceSelector = getInstanceSelectorById7(
+              event.instanceSelector,
+              accordion.id
+            );
+            context.setMemoryProp(instanceSelector, "value", itemValue);
           }
         }
       }
@@ -424,6 +483,7 @@ import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
 import {
   getClosestInstance as getClosestInstance8,
   getIndexWithinAncestorFromComponentProps as getIndexWithinAncestorFromComponentProps3,
+  getInstanceSelectorById as getInstanceSelectorById8,
   ReactSdkContext as ReactSdkContext2
 } from "@webstudio-is/react-sdk";
 import {
@@ -463,7 +523,11 @@ var hooksNavigationMenu = {
           `${namespace8}:NavigationMenu`
         );
         if (menu) {
-          context.setPropVariable(menu.id, "value", "");
+          const menuSelector = getInstanceSelectorById8(
+            event.instanceSelector,
+            menu.id
+          );
+          context.setMemoryProp(menuSelector, "value", void 0);
         }
       }
     }
@@ -486,7 +550,11 @@ var hooksNavigationMenu = {
         }
         const contentValue = context.getPropValue(menuItem.id, "value") ?? context.indexesWithinAncestors.get(menuItem.id)?.toString();
         if (contentValue) {
-          context.setPropVariable(menu.id, "value", contentValue);
+          const menuSelector = getInstanceSelectorById8(
+            event.instanceSelector,
+            menu.id
+          );
+          context.setMemoryProp(menuSelector, "value", contentValue);
         }
       }
     }
@@ -495,7 +563,8 @@ var hooksNavigationMenu = {
 
 // src/select.tsx
 import {
-  forwardRef as forwardRef9
+  forwardRef as forwardRef9,
+  useContext as useContext3
 } from "react";
 import {
   Root as Root8,
@@ -508,11 +577,22 @@ import {
   Portal as Portal3,
   Viewport as Viewport2
 } from "@radix-ui/react-select";
-import { getClosestInstance as getClosestInstance9 } from "@webstudio-is/react-sdk";
+import {
+  getClosestInstance as getClosestInstance9,
+  getInstanceSelectorById as getInstanceSelectorById9,
+  ReactSdkContext as ReactSdkContext3
+} from "@webstudio-is/react-sdk";
 import { jsx as jsx9 } from "react/jsx-runtime";
 var Select = forwardRef9((props, _ref) => {
   return /* @__PURE__ */ jsx9(Root8, { ...props });
 });
+var SelectTrigger = forwardRef9((props, ref) => {
+  const { renderer } = useContext3(ReactSdkContext3);
+  const onPointerDown = renderer === "canvas" ? (event) => {
+    event.preventDefault();
+  } : void 0;
+  return /* @__PURE__ */ jsx9(Trigger8, { onPointerDown, ref, ...props });
+});
 var SelectValue = forwardRef9((props, ref) => {
   return /* @__PURE__ */ jsx9(Value, { ref, ...props });
 });
@@ -530,7 +610,11 @@ var hooksSelect = {
           `${namespace9}:Select`
         );
         if (select) {
-          context.setPropVariable(select.id, "open", false);
+          const instanceSelector = getInstanceSelectorById9(
+            event.instanceSelector,
+            select.id
+          );
+          context.setMemoryProp(instanceSelector, "open", void 0);
         }
       }
     }
@@ -544,7 +628,11 @@ var hooksSelect = {
           `${namespace9}:Select`
         );
         if (select) {
-          context.setPropVariable(select.id, "open", true);
+          const instanceSelector = getInstanceSelectorById9(
+            event.instanceSelector,
+            select.id
+          );
+          context.setMemoryProp(instanceSelector, "open", true);
         }
       }
     }