@webstudio-is/sdk-components-react-radix 0.95.0 → 0.97.0

package/lib/hooks.js

@@ -1,14 +1,475 @@
-"use strict";
-import { hooksCollapsible } from "./collapsible";
-import { hooksTabs } from "./tabs";
-import { hooksDialog } from "./dialog";
-import { hooksPopover } from "./popover";
-import { hooksSheet } from "./sheet";
-import { hooksTooltip } from "./tooltip";
-import { hooksAccordion } from "./accordion";
-import { hooksNavigationMenu } from "./navigation-menu";
-import { hooksSelect } from "./select";
-export const hooks = [
+// src/collapsible.tsx
+import {
+  forwardRef,
+  Children
+} from "react";
+import { Root, Trigger, Content } from "@radix-ui/react-collapsible";
+import { getClosestInstance } from "@webstudio-is/react-sdk";
+import { jsx } from "react/jsx-runtime";
+var CollapsibleTrigger = forwardRef(({ children, ...props }, ref) => {
+  const firstChild = Children.toArray(children)[0];
+  return /* @__PURE__ */ jsx(Trigger, { asChild: true, ref, ...props, children: firstChild ?? /* @__PURE__ */ jsx("button", { children: "Add button" }) });
+});
+var namespace = "@webstudio-is/sdk-components-react-radix";
+var hooksCollapsible = {
+  onNavigatorSelect: (context, event) => {
+    for (const instance of event.instancePath) {
+      if (instance.component === `${namespace}:CollapsibleContent`) {
+        const collapsible = getClosestInstance(
+          event.instancePath,
+          instance,
+          `${namespace}:Collapsible`
+        );
+        if (collapsible) {
+          context.setPropVariable(collapsible.id, "open", true);
+        }
+      }
+    }
+  }
+};
+
+// src/tabs.tsx
+import {
+  forwardRef as forwardRef2
+} from "react";
+import { Root as Root2, List, Trigger as Trigger2, Content as Content2 } from "@radix-ui/react-tabs";
+import {
+  getClosestInstance as getClosestInstance2,
+  getIndexWithinAncestorFromComponentProps
+} from "@webstudio-is/react-sdk";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var TabsTrigger = forwardRef2(({ value, ...props }, ref) => {
+  const index = getIndexWithinAncestorFromComponentProps(props);
+  return /* @__PURE__ */ jsx2(Trigger2, { ref, value: value ?? index, ...props });
+});
+var TabsContent = forwardRef2(({ value, ...props }, ref) => {
+  const index = getIndexWithinAncestorFromComponentProps(props);
+  return /* @__PURE__ */ jsx2(Content2, { ref, value: value ?? index, ...props });
+});
+var namespace2 = "@webstudio-is/sdk-components-react-radix";
+var hooksTabs = {
+  onNavigatorSelect: (context, event) => {
+    for (const instance of event.instancePath) {
+      if (instance.component === `${namespace2}:TabsContent`) {
+        const tabs = getClosestInstance2(
+          event.instancePath,
+          instance,
+          `${namespace2}:Tabs`
+        );
+        const contentValue = context.getPropValue(instance.id, "value") ?? context.indexesWithinAncestors.get(instance.id)?.toString();
+        if (tabs && contentValue) {
+          context.setPropVariable(tabs.id, "value", contentValue);
+        }
+      }
+    }
+  }
+};
+
+// src/dialog.tsx
+import {
+  forwardRef as forwardRef3,
+  Children as Children2
+} from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { getClosestInstance as getClosestInstance3 } from "@webstudio-is/react-sdk";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var Dialog = forwardRef3((props, _ref) => {
+  return /* @__PURE__ */ jsx3(DialogPrimitive.Root, { ...props });
+});
+var DialogTrigger = forwardRef3(({ children, ...props }, ref) => {
+  const firstChild = Children2.toArray(children)[0];
+  return /* @__PURE__ */ jsx3(DialogPrimitive.Trigger, { ref, asChild: true, ...props, children: firstChild ?? /* @__PURE__ */ jsx3("button", { children: "Add button or link" }) });
+});
+var DialogOverlay = forwardRef3((props, ref) => {
+  return /* @__PURE__ */ jsx3(DialogPrimitive.DialogPortal, { children: /* @__PURE__ */ jsx3(DialogPrimitive.Overlay, { ref, ...props }) });
+});
+var DialogContent = DialogPrimitive.Content;
+var namespace3 = "@webstudio-is/sdk-components-react-radix";
+var hooksDialog = {
+  onNavigatorUnselect: (context, event) => {
+    for (const instance of event.instancePath) {
+      if (instance.component === `${namespace3}:DialogOverlay`) {
+        const dialog = getClosestInstance3(
+          event.instancePath,
+          instance,
+          `${namespace3}:Dialog`
+        );
+        if (dialog) {
+          context.setPropVariable(dialog.id, "open", false);
+        }
+      }
+    }
+  },
+  onNavigatorSelect: (context, event) => {
+    for (const instance of event.instancePath) {
+      if (instance.component === `${namespace3}:DialogOverlay`) {
+        const dialog = getClosestInstance3(
+          event.instancePath,
+          instance,
+          `${namespace3}:Dialog`
+        );
+        if (dialog) {
+          context.setPropVariable(dialog.id, "open", true);
+        }
+      }
+    }
+  }
+};
+
+// src/popover.tsx
+import {
+  forwardRef as forwardRef4,
+  Children as Children3
+} from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { getClosestInstance as getClosestInstance4 } from "@webstudio-is/react-sdk";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var Popover = forwardRef4((props, _ref) => {
+  return /* @__PURE__ */ jsx4(PopoverPrimitive.Root, { ...props });
+});
+var PopoverTrigger = forwardRef4(({ children, ...props }, ref) => {
+  const firstChild = Children3.toArray(children)[0];
+  return /* @__PURE__ */ jsx4(PopoverPrimitive.Trigger, { asChild: true, ref, ...props, children: firstChild ?? /* @__PURE__ */ jsx4("button", { children: "Add button or link" }) });
+});
+var PopoverContent = forwardRef4(
+  ({ sideOffset = 4, align = "center", hideWhenDetached = true, ...props }, ref) => /* @__PURE__ */ jsx4(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx4(
+    PopoverPrimitive.Content,
+    {
+      ref,
+      align: "center",
+      sideOffset,
+      hideWhenDetached,
+      ...props
+    }
+  ) })
+);
+var namespace4 = "@webstudio-is/sdk-components-react-radix";
+var hooksPopover = {
+  onNavigatorUnselect: (context, event) => {
+    for (const instance of event.instancePath) {
+      if (instance.component === `${namespace4}:PopoverContent`) {
+        const popover = getClosestInstance4(
+          event.instancePath,
+          instance,
+          `${namespace4}:Popover`
+        );
+        if (popover) {
+          context.setPropVariable(popover.id, "open", false);
+        }
+      }
+    }
+  },
+  onNavigatorSelect: (context, event) => {
+    for (const instance of event.instancePath) {
+      if (instance.component === `${namespace4}:PopoverContent`) {
+        const popover = getClosestInstance4(
+          event.instancePath,
+          instance,
+          `${namespace4}:Popover`
+        );
+        if (popover) {
+          context.setPropVariable(popover.id, "open", true);
+        }
+      }
+    }
+  }
+};
+
+// src/sheet.tsx
+import {
+  forwardRef as forwardRef5
+} from "react";
+import { getClosestInstance as getClosestInstance5 } 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) => {
+    const Tag = tag;
+    return /* @__PURE__ */ jsx5(
+      DialogContent,
+      {
+        asChild: true,
+        "data-side": side,
+        role,
+        ...props,
+        children: /* @__PURE__ */ jsx5(Tag, { ref, children })
+      }
+    );
+  }
+);
+var namespace5 = "@webstudio-is/sdk-components-react-radix";
+var hooksSheet = {
+  onNavigatorUnselect: (context, event) => {
+    for (const instance of event.instancePath) {
+      if (instance.component === `${namespace5}:SheetOverlay`) {
+        const sheet = getClosestInstance5(
+          event.instancePath,
+          instance,
+          `${namespace5}:Sheet`
+        );
+        if (sheet) {
+          context.setPropVariable(sheet.id, "open", false);
+        }
+      }
+    }
+  },
+  onNavigatorSelect: (context, event) => {
+    for (const instance of event.instancePath) {
+      if (instance.component === `${namespace5}:SheetOverlay`) {
+        const sheet = getClosestInstance5(
+          event.instancePath,
+          instance,
+          `${namespace5}:Sheet`
+        );
+        if (sheet) {
+          context.setPropVariable(sheet.id, "open", true);
+        }
+      }
+    }
+  }
+};
+
+// src/tooltip.tsx
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { getClosestInstance as getClosestInstance6 } from "@webstudio-is/react-sdk";
+import {
+  forwardRef as forwardRef6,
+  Children as Children4
+} from "react";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var Tooltip = forwardRef6((props, _ref) => {
+  return /* @__PURE__ */ jsx6(TooltipPrimitive.Provider, { children: /* @__PURE__ */ jsx6(TooltipPrimitive.Root, { ...props }) });
+});
+var TooltipTrigger = forwardRef6(({ children, ...props }, ref) => {
+  const firstChild = Children4.toArray(children)[0];
+  return /* @__PURE__ */ jsx6(TooltipPrimitive.Trigger, { asChild: true, ref, ...props, children: firstChild ?? /* @__PURE__ */ jsx6("button", { children: "Add button or link" }) });
+});
+var TooltipContent = forwardRef6(({ sideOffset = 4, hideWhenDetached = true, ...props }, ref) => /* @__PURE__ */ jsx6(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx6(
+  TooltipPrimitive.Content,
+  {
+    ref,
+    hideWhenDetached,
+    sideOffset,
+    ...props
+  }
+) }));
+var namespace6 = "@webstudio-is/sdk-components-react-radix";
+var hooksTooltip = {
+  onNavigatorUnselect: (context, event) => {
+    for (const instance of event.instancePath) {
+      if (instance.component === `${namespace6}:TooltipContent`) {
+        const tooltip = getClosestInstance6(
+          event.instancePath,
+          instance,
+          `${namespace6}:Tooltip`
+        );
+        if (tooltip) {
+          context.setPropVariable(tooltip.id, "open", false);
+        }
+      }
+    }
+  },
+  onNavigatorSelect: (context, event) => {
+    for (const instance of event.instancePath) {
+      if (instance.component === `${namespace6}:TooltipContent`) {
+        const tooltip = getClosestInstance6(
+          event.instancePath,
+          instance,
+          `${namespace6}:Tooltip`
+        );
+        if (tooltip) {
+          context.setPropVariable(tooltip.id, "open", true);
+        }
+      }
+    }
+  }
+};
+
+// src/accordion.tsx
+import {
+  forwardRef as forwardRef7
+} from "react";
+import {
+  Root as Root6,
+  Item,
+  Header,
+  Trigger as Trigger6,
+  Content as Content6
+} from "@radix-ui/react-accordion";
+import {
+  getClosestInstance as getClosestInstance7,
+  getIndexWithinAncestorFromComponentProps as getIndexWithinAncestorFromComponentProps2
+} from "@webstudio-is/react-sdk";
+import { jsx as jsx7 } from "react/jsx-runtime";
+var Accordion = forwardRef7((props, ref) => {
+  return /* @__PURE__ */ jsx7(Root6, { ref, type: "single", ...props });
+});
+var AccordionItem = forwardRef7(({ value, ...props }, ref) => {
+  const index = getIndexWithinAncestorFromComponentProps2(props);
+  return /* @__PURE__ */ jsx7(Item, { ref, value: value ?? index, ...props });
+});
+var namespace7 = "@webstudio-is/sdk-components-react-radix";
+var hooksAccordion = {
+  onNavigatorSelect: (context, event) => {
+    for (const instance of event.instancePath) {
+      if (instance.component === `${namespace7}:AccordionContent`) {
+        const accordion = getClosestInstance7(
+          event.instancePath,
+          instance,
+          `${namespace7}:Accordion`
+        );
+        const item = getClosestInstance7(
+          event.instancePath,
+          instance,
+          `${namespace7}:AccordionItem`
+        );
+        if (accordion && item) {
+          const itemValue = context.getPropValue(item.id, "value") ?? context.indexesWithinAncestors.get(item.id)?.toString();
+          if (itemValue) {
+            context.setPropVariable(accordion.id, "value", itemValue);
+          }
+        }
+      }
+    }
+  }
+};
+
+// src/navigation-menu.tsx
+import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
+import {
+  getClosestInstance as getClosestInstance8,
+  getIndexWithinAncestorFromComponentProps as getIndexWithinAncestorFromComponentProps3,
+  ReactSdkContext
+} from "@webstudio-is/react-sdk";
+import {
+  Children as Children5,
+  forwardRef as forwardRef8,
+  useContext
+} from "react";
+import { jsx as jsx8 } from "react/jsx-runtime";
+var NavigationMenu = forwardRef8(({ value: propsValue, ...props }, ref) => {
+  const { renderer } = useContext(ReactSdkContext);
+  let value = propsValue;
+  if (renderer === "canvas") {
+    value = value === "" ? "-1" : value;
+  }
+  return /* @__PURE__ */ jsx8(NavigationMenuPrimitive.Root, { ref, value, ...props });
+});
+var NavigationMenuItem = forwardRef8(({ value, ...props }, ref) => {
+  const index = getIndexWithinAncestorFromComponentProps3(props);
+  return /* @__PURE__ */ jsx8(NavigationMenuPrimitive.Item, { ref, value: value ?? index, ...props });
+});
+var NavigationMenuLink = forwardRef8(({ children, ...props }, ref) => {
+  const firstChild = Children5.toArray(children)[0];
+  return /* @__PURE__ */ jsx8(NavigationMenuPrimitive.Link, { asChild: true, ref, ...props, children: firstChild ?? /* @__PURE__ */ jsx8("a", { children: "Add link component" }) });
+});
+var NavigationMenuTrigger = forwardRef8(({ children, ...props }, ref) => {
+  const firstChild = Children5.toArray(children)[0];
+  return /* @__PURE__ */ jsx8(NavigationMenuPrimitive.Trigger, { asChild: true, ref, ...props, children: firstChild ?? /* @__PURE__ */ jsx8("button", { children: "Add button or link" }) });
+});
+var namespace8 = "@webstudio-is/sdk-components-react-radix";
+var hooksNavigationMenu = {
+  onNavigatorUnselect: (context, event) => {
+    for (const instance of event.instancePath) {
+      if (instance.component === `${namespace8}:NavigationMenuContent`) {
+        const menu = getClosestInstance8(
+          event.instancePath,
+          instance,
+          `${namespace8}:NavigationMenu`
+        );
+        if (menu) {
+          context.setPropVariable(menu.id, "value", "");
+        }
+      }
+    }
+  },
+  onNavigatorSelect: (context, event) => {
+    for (const instance of event.instancePath) {
+      if (instance.component === `${namespace8}:NavigationMenuContent`) {
+        const menu = getClosestInstance8(
+          event.instancePath,
+          instance,
+          `${namespace8}:NavigationMenu`
+        );
+        const menuItem = getClosestInstance8(
+          event.instancePath,
+          instance,
+          `${namespace8}:NavigationMenuItem`
+        );
+        if (menuItem === void 0 || menu === void 0) {
+          return;
+        }
+        const contentValue = context.getPropValue(menuItem.id, "value") ?? context.indexesWithinAncestors.get(menuItem.id)?.toString();
+        if (contentValue) {
+          context.setPropVariable(menu.id, "value", contentValue);
+        }
+      }
+    }
+  }
+};
+
+// src/select.tsx
+import {
+  forwardRef as forwardRef9
+} from "react";
+import {
+  Root as Root8,
+  Value,
+  Trigger as Trigger8,
+  Content as Content8,
+  Item as Item3,
+  ItemIndicator,
+  ItemText,
+  Portal as Portal3,
+  Viewport as Viewport2
+} from "@radix-ui/react-select";
+import { getClosestInstance as getClosestInstance9 } from "@webstudio-is/react-sdk";
+import { jsx as jsx9 } from "react/jsx-runtime";
+var Select = forwardRef9(({ value, ...props }, _ref) => {
+  if (value === "") {
+    value = void 0;
+  }
+  return /* @__PURE__ */ jsx9(Root8, { value, ...props });
+});
+var SelectValue = forwardRef9((props, ref) => {
+  return /* @__PURE__ */ jsx9(Value, { ref, ...props });
+});
+var SelectContent = forwardRef9((props, ref) => {
+  return /* @__PURE__ */ jsx9(Portal3, { children: /* @__PURE__ */ jsx9(Content8, { ref, ...props, position: "popper" }) });
+});
+var namespace9 = "@webstudio-is/sdk-components-react-radix";
+var hooksSelect = {
+  onNavigatorUnselect: (context, event) => {
+    for (const instance of event.instancePath) {
+      if (instance.component === `${namespace9}:SelectContent`) {
+        const select = getClosestInstance9(
+          event.instancePath,
+          instance,
+          `${namespace9}:Select`
+        );
+        if (select) {
+          context.setPropVariable(select.id, "open", false);
+        }
+      }
+    }
+  },
+  onNavigatorSelect: (context, event) => {
+    for (const instance of event.instancePath) {
+      if (instance.component === `${namespace9}:SelectContent`) {
+        const select = getClosestInstance9(
+          event.instancePath,
+          instance,
+          `${namespace9}:Select`
+        );
+        if (select) {
+          context.setPropVariable(select.id, "open", true);
+        }
+      }
+    }
+  }
+};
+
+// src/hooks.ts
+var hooks = [
   hooksCollapsible,
   hooksTabs,
   hooksDialog,
@@ -19,3 +480,6 @@ export const hooks = [
   hooksNavigationMenu,
   hooksSelect
 ];
+export {
+  hooks
+};