@webstudio-is/sdk-components-react-radix 0.91.0 → 0.92.0

package/src/metas.ts

@@ -1,74 +0,0 @@
-export {
-  metaCollapsible as Collapsible,
-  metaCollapsibleTrigger as CollapsibleTrigger,
-  metaCollapsibleContent as CollapsibleContent,
-} from "./collapsible.ws";
-export {
-  metaDialog as Dialog,
-  metaDialogTrigger as DialogTrigger,
-  metaDialogOverlay as DialogOverlay,
-  metaDialogContent as DialogContent,
-  metaDialogClose as DialogClose,
-  metaDialogTitle as DialogTitle,
-  metaDialogDescription as DialogDescription,
-} from "./dialog.ws";
-export { meta as Sheet } from "./sheet.ws";
-export {
-  metaPopover as Popover,
-  metaPopoverTrigger as PopoverTrigger,
-  metaPopoverContent as PopoverContent,
-} from "./popover.ws";
-export {
-  metaTooltip as Tooltip,
-  metaTooltipTrigger as TooltipTrigger,
-  metaTooltipContent as TooltipContent,
-} from "./tooltip.ws";
-export {
-  metaTabs as Tabs,
-  metaTabsList as TabsList,
-  metaTabsTrigger as TabsTrigger,
-  metaTabsContent as TabsContent,
-} from "./tabs.ws";
-export { meta as Label } from "./label.ws";
-export {
-  metaAccordion as Accordion,
-  metaAccordionItem as AccordionItem,
-  metaAccordionHeader as AccordionHeader,
-  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.tsx

@@ -1,130 +0,0 @@
-/* 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);
-        }
-      }
-    }
-  },
-};