Update navigation-menu.tsx (#131)

* Update navigation-menu.tsx

#130 Fixed. Also re-arranged the class names a bit.

* add changeset & registry json file

---------

Co-authored-by: Stefan E-K <[email protected]>

.changeset/dirty-maps-sit.md

@@ -0,0 +1,5 @@
+---
+"solidui-cli": patch
+---
+
+Navigation Menu sub menus don't use the content-show and content-hide animations

apps/docs/public/registry/ui/navigation-menu.json

@@ -6,7 +6,7 @@
   "files": [
     {
       "name": "navigation-menu.tsx",
-      "content": "import type { JSX, ValidComponent } from \"solid-js\"\nimport { splitProps } from \"solid-js\"\n\nimport type { PolymorphicProps } from \"@kobalte/core\"\nimport * as NavigationMenuPrimitive from \"@kobalte/core/navigation-menu\"\n\nimport { cn } from \"~/lib/utils\"\n\nconst NavigationMenuItem = NavigationMenuPrimitive.Menu\n\ntype NavigationMenuProps<T extends ValidComponent = \"ul\"> =\n  NavigationMenuPrimitive.NavigationMenuRootProps<T> & {\n    class?: string | undefined\n    children?: JSX.Element\n  }\n\nconst NavigationMenu = <T extends ValidComponent = \"ul\">(\n  props: PolymorphicProps<T, NavigationMenuProps<T>>\n) => {\n  const [local, others] = splitProps(props as NavigationMenuProps, [\"class\", \"children\"])\n  return (\n    <NavigationMenuPrimitive.Root\n      gutter={6}\n      class={cn(\n        \"group/menu flex w-max flex-1 list-none items-center justify-center data-[orientation=vertical]:flex-col [&>li]:w-full\",\n        local.class\n      )}\n      {...others}\n    >\n      {local.children}\n      <NavigationMenuViewport />\n    </NavigationMenuPrimitive.Root>\n  )\n}\n\ntype NavigationMenuTriggerProps<T extends ValidComponent = \"button\"> =\n  NavigationMenuPrimitive.NavigationMenuTriggerProps<T> & {\n    class?: string | undefined\n  }\n\nconst NavigationMenuTrigger = <T extends ValidComponent = \"button\">(\n  props: PolymorphicProps<T, NavigationMenuTriggerProps<T>>\n) => {\n  const [local, others] = splitProps(props as NavigationMenuTriggerProps, [\"class\"])\n  return (\n    <NavigationMenuPrimitive.Trigger\n      class={cn(\n        \"group/trigger inline-flex h-10 w-full items-center justify-center whitespace-nowrap rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[expanded]:bg-accent/50\",\n        local.class\n      )}\n      {...others}\n    />\n  )\n}\nconst NavigationMenuIcon = () => {\n  return (\n    <NavigationMenuPrimitive.Icon aria-hidden=\"true\">\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        class=\"relative top-px ml-1 size-3 transition duration-200 group-data-[expanded]/trigger:rotate-180 group-data-[orientation=vertical]/menu:-rotate-90 group-data-[orientation=vertical]/menu:group-data-[expanded]/trigger:rotate-90\"\n      >\n        <path d=\"M6 9l6 6l6 -6\" />\n      </svg>\n    </NavigationMenuPrimitive.Icon>\n  )\n}\n\ntype NavigationMenuViewportProps<T extends ValidComponent = \"li\"> =\n  NavigationMenuPrimitive.NavigationMenuViewportProps<T> & { class?: string | undefined }\n\nconst NavigationMenuViewport = <T extends ValidComponent = \"li\">(\n  props: PolymorphicProps<T, NavigationMenuViewportProps<T>>\n) => {\n  const [local, others] = splitProps(props as NavigationMenuViewportProps, [\"class\"])\n  return (\n    <NavigationMenuPrimitive.Viewport\n      class={cn(\n        \"pointer-events-none z-[1000] flex h-[var(--kb-navigation-menu-viewport-height)] w-[var(--kb-navigation-menu-viewport-width)] origin-[var(--kb-menu-content-transform-origin)] items-center justify-center overflow-x-clip overflow-y-visible rounded-md border bg-popover opacity-0 shadow-lg transition-[width,height] duration-200 ease-in data-[expanded]:pointer-events-auto data-[orientation=vertical]:overflow-y-clip data-[orientation=vertical]:overflow-x-visible data-[expanded]:rounded-md data-[expanded]:opacity-100 data-[expanded]:ease-out\",\n        local.class\n      )}\n      {...others}\n    />\n  )\n}\n\ntype NavigationMenuContentProps<T extends ValidComponent = \"ul\"> =\n  NavigationMenuPrimitive.NavigationMenuContentProps<T> & {\n    class?: string | undefined\n  }\n\nconst NavigationMenuContent = <T extends ValidComponent = \"ul\">(\n  props: PolymorphicProps<T, NavigationMenuContentProps<T>>\n) => {\n  const [local, others] = splitProps(props as NavigationMenuContentProps, [\"class\"])\n  return (\n    <NavigationMenuPrimitive.Portal>\n      <NavigationMenuPrimitive.Content\n        class={cn(\n          // base settings\n          \"pointer-events-none absolute left-0 top-0 box-border p-4 focus:outline-none data-[expanded]:pointer-events-auto\",\n          // base animation settings\n          \"data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out\",\n          // left to right\n          \"data-[orientation=horizontal]:data-[motion=from-start]:slide-in-from-left-52 data-[orientation=horizontal]:data-[motion=to-end]:slide-out-to-right-52\",\n          // right to left\n          \"data-[orientation=horizontal]:data-[motion=from-end]:slide-in-from-right-52 data-[orientation=horizontal]:data-[motion=to-start]:slide-out-to-left-52\",\n          // top to bottom\n          \"data-[orientation=vertical]:data-[motion=from-start]:slide-in-from-top-52 data-[orientation=vertical]:data-[motion=to-end]:slide-out-to-bottom-52\",\n          //bottom to top\n          \"data-[orientation=vertical]:data-[motion=from-end]:slide-in-from-bottom-52 data-[orientation=vertical]:data-[motion=to-start]:slide-out-to-bottom-52\",\n          local.class\n        )}\n        {...others}\n      />\n    </NavigationMenuPrimitive.Portal>\n  )\n}\n\ntype NavigationMenuLinkProps<T extends ValidComponent = \"a\"> =\n  NavigationMenuPrimitive.NavigationMenuItemProps<T> & { class?: string | undefined }\n\nconst NavigationMenuLink = <T extends ValidComponent = \"a\">(\n  props: PolymorphicProps<T, NavigationMenuLinkProps<T>>\n) => {\n  const [local, others] = splitProps(props as NavigationMenuLinkProps, [\"class\"])\n  return (\n    <NavigationMenuPrimitive.Item\n      class={cn(\n        \"block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors  hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground\",\n        local.class\n      )}\n      {...others}\n    />\n  )\n}\n\ntype NavigationMenuLabelProps<T extends ValidComponent = \"div\"> =\n  NavigationMenuPrimitive.NavigationMenuItemLabelProps<T> & { class?: string | undefined }\n\nconst NavigationMenuLabel = <T extends ValidComponent = \"div\">(\n  props: PolymorphicProps<T, NavigationMenuLabelProps<T>>\n) => {\n  const [local, others] = splitProps(props as NavigationMenuLabelProps, [\"class\"])\n  return (\n    <NavigationMenuPrimitive.ItemLabel\n      class={cn(\"text-sm font-medium leading-none\", local.class)}\n      {...others}\n    />\n  )\n}\n\ntype NavigationMenuDescriptionProps<T extends ValidComponent = \"div\"> =\n  NavigationMenuPrimitive.NavigationMenuItemDescriptionProps<T> & { class?: string | undefined }\n\nconst NavigationMenuDescription = <T extends ValidComponent = \"div\">(\n  props: PolymorphicProps<T, NavigationMenuDescriptionProps<T>>\n) => {\n  const [local, others] = splitProps(props as NavigationMenuDescriptionProps, [\"class\"])\n  return (\n    <NavigationMenuPrimitive.ItemDescription\n      class={cn(\"text-sm leading-snug text-muted-foreground\", local.class)}\n      {...others}\n    />\n  )\n}\n\nexport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuTrigger,\n  NavigationMenuIcon,\n  NavigationMenuViewport,\n  NavigationMenuContent,\n  NavigationMenuLink,\n  NavigationMenuLabel,\n  NavigationMenuDescription\n}\n"
+      "content": "import type { JSX, ValidComponent } from \"solid-js\"\nimport { splitProps } from \"solid-js\"\n\nimport type { PolymorphicProps } from \"@kobalte/core\"\nimport * as NavigationMenuPrimitive from \"@kobalte/core/navigation-menu\"\n\nimport { cn } from \"~/lib/utils\"\n\nconst NavigationMenuItem = NavigationMenuPrimitive.Menu\n\ntype NavigationMenuProps<T extends ValidComponent = \"ul\"> =\n  NavigationMenuPrimitive.NavigationMenuRootProps<T> & {\n    class?: string | undefined\n    children?: JSX.Element\n  }\n\nconst NavigationMenu = <T extends ValidComponent = \"ul\">(\n  props: PolymorphicProps<T, NavigationMenuProps<T>>\n) => {\n  const [local, others] = splitProps(props as NavigationMenuProps, [\"class\", \"children\"])\n  return (\n    <NavigationMenuPrimitive.Root\n      gutter={6}\n      class={cn(\n        \"group/menu flex w-max flex-1 list-none items-center justify-center data-[orientation=vertical]:flex-col [&>li]:w-full\",\n        local.class\n      )}\n      {...others}\n    >\n      {local.children}\n      <NavigationMenuViewport />\n    </NavigationMenuPrimitive.Root>\n  )\n}\n\ntype NavigationMenuTriggerProps<T extends ValidComponent = \"button\"> =\n  NavigationMenuPrimitive.NavigationMenuTriggerProps<T> & {\n    class?: string | undefined\n  }\n\nconst NavigationMenuTrigger = <T extends ValidComponent = \"button\">(\n  props: PolymorphicProps<T, NavigationMenuTriggerProps<T>>\n) => {\n  const [local, others] = splitProps(props as NavigationMenuTriggerProps, [\"class\"])\n  return (\n    <NavigationMenuPrimitive.Trigger\n      class={cn(\n        \"group/trigger inline-flex h-10 w-full items-center justify-center whitespace-nowrap rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[expanded]:bg-accent/50\",\n        local.class\n      )}\n      {...others}\n    />\n  )\n}\nconst NavigationMenuIcon = () => {\n  return (\n    <NavigationMenuPrimitive.Icon aria-hidden=\"true\">\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        class=\"relative top-px ml-1 size-3 transition duration-200 group-data-[expanded]/trigger:rotate-180 group-data-[orientation=vertical]/menu:-rotate-90 group-data-[orientation=vertical]/menu:group-data-[expanded]/trigger:rotate-90\"\n      >\n        <path d=\"M6 9l6 6l6 -6\" />\n      </svg>\n    </NavigationMenuPrimitive.Icon>\n  )\n}\n\ntype NavigationMenuViewportProps<T extends ValidComponent = \"li\"> =\n  NavigationMenuPrimitive.NavigationMenuViewportProps<T> & { class?: string | undefined }\n\nconst NavigationMenuViewport = <T extends ValidComponent = \"li\">(\n  props: PolymorphicProps<T, NavigationMenuViewportProps<T>>\n) => {\n  const [local, others] = splitProps(props as NavigationMenuViewportProps, [\"class\"])\n  return (\n    <NavigationMenuPrimitive.Viewport\n      class={cn(\n        // base settings\n        \"pointer-events-none z-[1000] flex h-[var(--kb-navigation-menu-viewport-height)] w-[var(--kb-navigation-menu-viewport-width)] origin-[var(--kb-menu-content-transform-origin)] items-center justify-center overflow-x-clip overflow-y-visible rounded-md border bg-popover opacity-0 shadow-lg data-[expanded]:pointer-events-auto data-[orientation=vertical]:overflow-y-clip data-[orientation=vertical]:overflow-x-visible data-[expanded]:rounded-md\",\n        // animate\n        \"animate-content-hide transition-[width,height] duration-200 ease-in data-[expanded]:animate-content-show data-[expanded]:opacity-100 data-[expanded]:ease-out\",\n        local.class\n      )}\n      {...others}\n    />\n  )\n}\n\ntype NavigationMenuContentProps<T extends ValidComponent = \"ul\"> =\n  NavigationMenuPrimitive.NavigationMenuContentProps<T> & {\n    class?: string | undefined\n  }\n\nconst NavigationMenuContent = <T extends ValidComponent = \"ul\">(\n  props: PolymorphicProps<T, NavigationMenuContentProps<T>>\n) => {\n  const [local, others] = splitProps(props as NavigationMenuContentProps, [\"class\"])\n  return (\n    <NavigationMenuPrimitive.Portal>\n      <NavigationMenuPrimitive.Content\n        class={cn(\n          // base settings\n          \"pointer-events-none absolute left-0 top-0 box-border p-4 focus:outline-none data-[expanded]:pointer-events-auto\",\n          // base animation settings\n          \"data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out\",\n          // left to right\n          \"data-[orientation=horizontal]:data-[motion=from-start]:slide-in-from-left-52 data-[orientation=horizontal]:data-[motion=to-end]:slide-out-to-right-52\",\n          // right to left\n          \"data-[orientation=horizontal]:data-[motion=from-end]:slide-in-from-right-52 data-[orientation=horizontal]:data-[motion=to-start]:slide-out-to-left-52\",\n          // top to bottom\n          \"data-[orientation=vertical]:data-[motion=from-start]:slide-in-from-top-52 data-[orientation=vertical]:data-[motion=to-end]:slide-out-to-bottom-52\",\n          //bottom to top\n          \"data-[orientation=vertical]:data-[motion=from-end]:slide-in-from-bottom-52 data-[orientation=vertical]:data-[motion=to-start]:slide-out-to-bottom-52\",\n          local.class\n        )}\n        {...others}\n      />\n    </NavigationMenuPrimitive.Portal>\n  )\n}\n\ntype NavigationMenuLinkProps<T extends ValidComponent = \"a\"> =\n  NavigationMenuPrimitive.NavigationMenuItemProps<T> & { class?: string | undefined }\n\nconst NavigationMenuLink = <T extends ValidComponent = \"a\">(\n  props: PolymorphicProps<T, NavigationMenuLinkProps<T>>\n) => {\n  const [local, others] = splitProps(props as NavigationMenuLinkProps, [\"class\"])\n  return (\n    <NavigationMenuPrimitive.Item\n      class={cn(\n        \"block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors  hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground\",\n        local.class\n      )}\n      {...others}\n    />\n  )\n}\n\ntype NavigationMenuLabelProps<T extends ValidComponent = \"div\"> =\n  NavigationMenuPrimitive.NavigationMenuItemLabelProps<T> & { class?: string | undefined }\n\nconst NavigationMenuLabel = <T extends ValidComponent = \"div\">(\n  props: PolymorphicProps<T, NavigationMenuLabelProps<T>>\n) => {\n  const [local, others] = splitProps(props as NavigationMenuLabelProps, [\"class\"])\n  return (\n    <NavigationMenuPrimitive.ItemLabel\n      class={cn(\"text-sm font-medium leading-none\", local.class)}\n      {...others}\n    />\n  )\n}\n\ntype NavigationMenuDescriptionProps<T extends ValidComponent = \"div\"> =\n  NavigationMenuPrimitive.NavigationMenuItemDescriptionProps<T> & { class?: string | undefined }\n\nconst NavigationMenuDescription = <T extends ValidComponent = \"div\">(\n  props: PolymorphicProps<T, NavigationMenuDescriptionProps<T>>\n) => {\n  const [local, others] = splitProps(props as NavigationMenuDescriptionProps, [\"class\"])\n  return (\n    <NavigationMenuPrimitive.ItemDescription\n      class={cn(\"text-sm leading-snug text-muted-foreground\", local.class)}\n      {...others}\n    />\n  )\n}\n\nexport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuTrigger,\n  NavigationMenuIcon,\n  NavigationMenuViewport,\n  NavigationMenuContent,\n  NavigationMenuLink,\n  NavigationMenuLabel,\n  NavigationMenuDescription\n}\n"
     }
   ],
   "type": "ui"

apps/docs/src/registry/ui/navigation-menu.tsx

@@ -81,7 +81,10 @@ const NavigationMenuViewport = <T extends ValidComponent = "li">(
   return (
     <NavigationMenuPrimitive.Viewport
       class={cn(
-        "pointer-events-none z-[1000] flex h-[var(--kb-navigation-menu-viewport-height)] w-[var(--kb-navigation-menu-viewport-width)] origin-[var(--kb-menu-content-transform-origin)] items-center justify-center overflow-x-clip overflow-y-visible rounded-md border bg-popover opacity-0 shadow-lg transition-[width,height] duration-200 ease-in data-[expanded]:pointer-events-auto data-[orientation=vertical]:overflow-y-clip data-[orientation=vertical]:overflow-x-visible data-[expanded]:rounded-md data-[expanded]:opacity-100 data-[expanded]:ease-out",
+        // base settings
+        "pointer-events-none z-[1000] flex h-[var(--kb-navigation-menu-viewport-height)] w-[var(--kb-navigation-menu-viewport-width)] origin-[var(--kb-menu-content-transform-origin)] items-center justify-center overflow-x-clip overflow-y-visible rounded-md border bg-popover opacity-0 shadow-lg data-[expanded]:pointer-events-auto data-[orientation=vertical]:overflow-y-clip data-[orientation=vertical]:overflow-x-visible data-[expanded]:rounded-md",
+        // animate
+        "animate-content-hide transition-[width,height] duration-200 ease-in data-[expanded]:animate-content-show data-[expanded]:opacity-100 data-[expanded]:ease-out",
         local.class
       )}
       {...others}