@webstudio-is/sdk-components-react-radix 0.87.1 → 0.89.0

package/src/metas.ts

@@ -12,6 +12,7 @@ export {
   metaDialogTitle as DialogTitle,
   metaDialogDescription as DialogDescription,
 } from "./dialog.ws";
+export { meta as Sheet } from "./sheet.ws";
 export {
   metaPopover as Popover,
   metaPopoverTrigger as PopoverTrigger,
@@ -22,24 +23,12 @@ export {
   metaTooltipTrigger as TooltipTrigger,
   metaTooltipContent as TooltipContent,
 } from "./tooltip.ws";
-export {
-  metaSheet as Sheet,
-  metaSheetTrigger as SheetTrigger,
-  metaSheetOverlay as SheetOverlay,
-  metaSheetContent as SheetContent,
-  metaSheetClose as SheetClose,
-  metaSheetTitle as SheetTitle,
-  metaSheetDescription as SheetDescription,
-} from "./sheet.ws";
 export {
   metaTabs as Tabs,
   metaTabsList as TabsList,
   metaTabsTrigger as TabsTrigger,
   metaTabsContent as TabsContent,
 } from "./tabs.ws";
-export { meta as Button } from "./button.ws";
-export { meta as Input } from "./input.ws";
-export { meta as Textarea } from "./textarea.ws";
 export { meta as Label } from "./label.ws";
 export {
   metaAccordion as Accordion,
@@ -48,3 +37,38 @@ export {
   metaAccordionTrigger as AccordionTrigger,
   metaAccordionContent as AccordionContent,
 } from "./accordion.ws";
+
+export {
+  metaNavigationMenu as NavigationMenu,
+  metaNavigationMenuList as NavigationMenuList,
+  metaNavigationMenuItem as NavigationMenuItem,
+  metaNavigationMenuTrigger as NavigationMenuTrigger,
+  metaNavigationMenuContent as NavigationMenuContent,
+  metaNavigationMenuLink as NavigationMenuLink,
+  metaNavigationMenuViewport as NavigationMenuViewport,
+} from "./navigation-menu.ws";
+
+export {
+  metaSelect as Select,
+  metaSelectTrigger as SelectTrigger,
+  metaSelectValue as SelectValue,
+  metaSelectViewport as SelectViewport,
+  metaSelectContent as SelectContent,
+  metaSelectItem as SelectItem,
+  metaSelectItemIndicator as SelectItemIndicator,
+  metaSelectItemText as SelectItemText,
+} from "./select.ws";
+
+export {
+  metaSwitch as Switch,
+  metaSwitchThumb as SwitchThumb,
+} from "./switch.ws";
+export {
+  metaCheckbox as Checkbox,
+  metaCheckboxIndicator as CheckboxIndicator,
+} from "./checkbox.ws";
+export {
+  metaRadioGroup as RadioGroup,
+  metaRadioGroupItem as RadioGroupItem,
+  metaRadioGroupIndicator as RadioGroupIndicator,
+} from "./radio-group.ws";

package/src/navigation-menu.stories.tsx

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { renderComponentTemplate } from "@webstudio-is/react-sdk";
+import { NavigationMenu as NavigationMenuPrimitive } from "./navigation-menu";
+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/NavigationMenu",
+  component: NavigationMenuPrimitive,
+} satisfies Meta<typeof NavigationMenuPrimitive>;
+
+export const NavigationMenu: StoryObj<typeof NavigationMenuPrimitive> = {
+  render: () =>
+    renderComponentTemplate({
+      name: "NavigationMenu",
+      components: { ...baseComponents, ...radixComponents },
+      metas: { ...baseMetas, ...radixMetas },
+    }),
+};

package/src/navigation-menu.tsx

@@ -0,0 +1,130 @@
+/* eslint-disable react/display-name */
+import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
+import {
+  getClosestInstance,
+  getIndexWithinAncestorFromComponentProps,
+  ReactSdkContext,
+  type Hook,
+} from "@webstudio-is/react-sdk";
+import {
+  Children,
+  forwardRef,
+  type ComponentPropsWithoutRef,
+  type ReactNode,
+  useContext,
+} from "react";
+
+export const NavigationMenu = forwardRef<
+  HTMLLIElement,
+  Omit<
+    ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>,
+    "orientation" | "aria-orientation"
+  >
+>(({ value: propsValue, ...props }, ref) => {
+  /**
+   * If the value is an empty string, "NavigationMenuViewport" isn't in the tree.
+   * This is Radix's way to differentiate animations. However, in the builder, we can't style non-existing elements.
+   * Since we don't need animations in the builder, we can trick Radix by setting a non-empty string like "-1" to the value property.
+   * This ensures "NavigationMenuViewport" always appears in the HTML tree.
+   **/
+  const { renderer } = useContext(ReactSdkContext);
+  let value = propsValue;
+  if (renderer === "canvas") {
+    value = value === "" ? "-1" : value;
+  }
+
+  return <NavigationMenuPrimitive.Root ref={ref} value={value} {...props} />;
+});
+
+export const NavigationMenuList = NavigationMenuPrimitive.List;
+
+export const NavigationMenuViewport = NavigationMenuPrimitive.Viewport;
+export const NavigationMenuContent = NavigationMenuPrimitive.Content;
+
+export const NavigationMenuItem = forwardRef<
+  HTMLLIElement,
+  Omit<ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Item>, "asChild">
+>(({ value, ...props }, ref) => {
+  const index = getIndexWithinAncestorFromComponentProps(props);
+  return (
+    <NavigationMenuPrimitive.Item ref={ref} value={value ?? index} {...props} />
+  );
+});
+
+export const NavigationMenuLink = forwardRef<
+  HTMLAnchorElement,
+  { children: ReactNode }
+>(({ children, ...props }, ref) => {
+  const firstChild = Children.toArray(children)[0];
+
+  return (
+    <NavigationMenuPrimitive.Link asChild={true} ref={ref} {...props}>
+      {firstChild ?? <a>Add link component</a>}
+    </NavigationMenuPrimitive.Link>
+  );
+});
+
+export const NavigationMenuTrigger = forwardRef<
+  HTMLButtonElement,
+  { children: ReactNode }
+>(({ children, ...props }, ref) => {
+  const firstChild = Children.toArray(children)[0];
+
+  return (
+    <NavigationMenuPrimitive.Trigger asChild={true} ref={ref} {...props}>
+      {firstChild ?? <button>Add button or link</button>}
+    </NavigationMenuPrimitive.Trigger>
+  );
+});
+
+const namespace = "@webstudio-is/sdk-components-react-radix";
+
+// For each NavigationMenuItem component within the selection,
+// we identify its closest parent NavigationMenu component
+// and update its open prop bound to variable.
+export const hooksNavigationMenu: Hook = {
+  onNavigatorUnselect: (context, event) => {
+    for (const instance of event.instancePath) {
+      if (instance.component === `${namespace}:NavigationMenuContent`) {
+        const menu = getClosestInstance(
+          event.instancePath,
+          instance,
+          `${namespace}:NavigationMenu`
+        );
+
+        if (menu) {
+          context.setPropVariable(menu.id, "value", "");
+        }
+      }
+    }
+  },
+  onNavigatorSelect: (context, event) => {
+    for (const instance of event.instancePath) {
+      if (instance.component === `${namespace}:NavigationMenuContent`) {
+        const menu = getClosestInstance(
+          event.instancePath,
+          instance,
+          `${namespace}:NavigationMenu`
+        );
+
+        const menuItem = getClosestInstance(
+          event.instancePath,
+          instance,
+          `${namespace}:NavigationMenuItem`
+        );
+
+        if (menuItem === undefined || menu === undefined) {
+          return;
+        }
+
+        const contentValue =
+          context.getPropValue(menuItem.id, "value") ??
+          context.indexesWithinAncestors.get(menuItem.id)?.toString();
+
+        if (contentValue) {
+          context.setPropVariable(menu.id, "value", contentValue);
+        }
+      }
+    }
+  },
+};