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

package/lib/tooltip.js

@@ -1,55 +0,0 @@
-"use strict";
-import { jsx } from "react/jsx-runtime";
-import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import { getClosestInstance } from "@webstudio-is/react-sdk";
-import {
-  forwardRef,
-  Children
-} from "react";
-export const Tooltip = forwardRef((props, _ref) => {
-  return /* @__PURE__ */ jsx(TooltipPrimitive.Provider, { children: /* @__PURE__ */ jsx(TooltipPrimitive.Root, { ...props }) });
-});
-export const TooltipTrigger = forwardRef(({ children, ...props }, ref) => {
-  const firstChild = Children.toArray(children)[0];
-  return /* @__PURE__ */ jsx(TooltipPrimitive.Trigger, { asChild: true, ref, ...props, children: firstChild ?? /* @__PURE__ */ jsx("button", { children: "Add button or link" }) });
-});
-export const TooltipContent = forwardRef(({ sideOffset = 4, hideWhenDetached = true, ...props }, ref) => /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx(
-  TooltipPrimitive.Content,
-  {
-    ref,
-    hideWhenDetached,
-    sideOffset,
-    ...props
-  }
-) }));
-const namespace = "@webstudio-is/sdk-components-react-radix";
-export const hooksTooltip = {
-  onNavigatorUnselect: (context, event) => {
-    for (const instance of event.instancePath) {
-      if (instance.component === `${namespace}:TooltipContent`) {
-        const tooltip = getClosestInstance(
-          event.instancePath,
-          instance,
-          `${namespace}:Tooltip`
-        );
-        if (tooltip) {
-          context.setPropVariable(tooltip.id, "open", false);
-        }
-      }
-    }
-  },
-  onNavigatorSelect: (context, event) => {
-    for (const instance of event.instancePath) {
-      if (instance.component === `${namespace}:TooltipContent`) {
-        const tooltip = getClosestInstance(
-          event.instancePath,
-          instance,
-          `${namespace}:Tooltip`
-        );
-        if (tooltip) {
-          context.setPropVariable(tooltip.id, "open", true);
-        }
-      }
-    }
-  }
-};

package/lib/tooltip.stories.js

@@ -1,18 +0,0 @@
-"use strict";
-import { renderComponentTemplate } from "@webstudio-is/react-sdk";
-import { Tooltip as TooltipPrimitive } from "./tooltip";
-import * as baseComponents from "@webstudio-is/sdk-components-react";
-import * as baseMetas from "@webstudio-is/sdk-components-react/metas";
-import * as radixComponents from "./components";
-import * as radixMetas from "./metas";
-export default {
-  title: "Components/Tooltip",
-  component: TooltipPrimitive
-};
-export const Tooltip = {
-  render: () => renderComponentTemplate({
-    name: "Tooltip",
-    components: { ...baseComponents, ...radixComponents },
-    metas: { ...baseMetas, ...radixMetas }
-  })
-};

package/lib/tooltip.ws.js

@@ -1,111 +0,0 @@
-"use strict";
-import { TooltipIcon, TriggerIcon, ContentIcon } from "@webstudio-is/icons/svg";
-import {
-} from "@webstudio-is/react-sdk";
-import { div } from "@webstudio-is/react-sdk/css-normalize";
-import * as tc from "./theme/tailwind-classes";
-import {
-  propsTooltip,
-  propsTooltipContent,
-  propsTooltipTrigger
-} from "./__generated__/tooltip.props";
-import { getButtonStyles } from "./theme/styles";
-const presetStyle = {
-  div
-};
-export const metaTooltipTrigger = {
-  category: "hidden",
-  detachable: false,
-  type: "container",
-  icon: TriggerIcon,
-  stylable: false
-};
-export const metaTooltipContent = {
-  category: "hidden",
-  detachable: false,
-  type: "container",
-  presetStyle,
-  icon: ContentIcon
-};
-export const metaTooltip = {
-  category: "radix",
-  order: 7,
-  type: "container",
-  icon: TooltipIcon,
-  stylable: false,
-  description: "Displays content that is related to the trigger, when the trigger is hovered with the mouse or focused with the keyboard. You are reading an example of a tooltip right now.",
-  template: [
-    {
-      type: "instance",
-      component: "Tooltip",
-      dataSources: {
-        tooltipOpen: { type: "variable", initialValue: false }
-      },
-      props: [
-        {
-          type: "dataSource",
-          name: "open",
-          dataSourceName: "tooltipOpen"
-        },
-        {
-          name: "onOpenChange",
-          type: "action",
-          value: [
-            { type: "execute", args: ["open"], code: `tooltipOpen = open` }
-          ]
-        }
-      ],
-      children: [
-        {
-          type: "instance",
-          component: "TooltipTrigger",
-          children: [
-            {
-              type: "instance",
-              component: "Button",
-              styles: getButtonStyles("outline"),
-              children: [{ type: "text", value: "Button" }]
-            }
-          ]
-        },
-        {
-          type: "instance",
-          component: "TooltipContent",
-          /**
-           *  z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md
-           **/
-          styles: [
-            tc.z(50),
-            tc.overflow("hidden"),
-            tc.rounded("md"),
-            tc.border(),
-            tc.bg("popover"),
-            tc.px(3),
-            tc.py(1.5),
-            tc.text("sm"),
-            tc.text("popoverForeground"),
-            tc.shadow("md")
-          ].flat(),
-          children: [
-            {
-              type: "instance",
-              component: "Text",
-              children: [{ type: "text", value: "The text you can edit" }]
-            }
-          ]
-        }
-      ]
-    }
-  ]
-};
-export const propsMetaTooltip = {
-  props: propsTooltip,
-  initialProps: ["open", "delayDuration", "disableHoverableContent"]
-};
-export const propsMetaTooltipTrigger = {
-  props: propsTooltipTrigger
-};
-export const propsMetaTooltipContent = {
-  props: propsTooltipContent,
-  initialProps: ["side", "sideOffset", "align", "alignOffset"]
-};