chore: prep for nested nav menu

Author: segunadebayo

examples/next-ts/pages/navigation-menu-nested.tsx

@@ -11,10 +11,10 @@ export default function Page() {
   const rootService = useMachine(navigationMenu.machine, { id: useId() })
   const rootMenu = navigationMenu.connect(rootService, normalizeProps)
 
-  const productService = useMachine(navigationMenu.machine, { id: useId(), value: "extensibility" })
+  const productService = useMachine(navigationMenu.machine, { id: useId(), defaultValue: "extensibility" })
   const productSubmenu = navigationMenu.connect(productService, normalizeProps)
 
-  const companyService = useMachine(navigationMenu.machine, { id: useId(), value: "customers" })
+  const companyService = useMachine(navigationMenu.machine, { id: useId(), defaultValue: "customers" })
   const companySubmenu = navigationMenu.connect(companyService, normalizeProps)
 
   const renderLinks = (menu: typeof rootMenu, opts: { value: string; items: string[] }) => {

packages/machines/navigation-menu/src/navigation-menu.machine.ts

@@ -60,8 +60,6 @@ export const machine = createMachine({
       triggerNode: bindable<HTMLElement | null>(() => ({
         defaultValue: null,
       })),
-
-      // nesting
     }
   },
 
@@ -93,9 +91,8 @@ export const machine = createMachine({
 
   exit: ["cleanupObservers", "cleanupAutoResetRef"],
 
-  initialState({ prop }) {
-    const value = prop("value") || prop("defaultValue")
-    return value ? "open" : "closed"
+  initialState() {
+    return "closed"
   },
 
   on: {

shared/src/css/navigation-menu-nested.css

@@ -33,20 +33,23 @@
   }
 
   [data-scope="navigation-menu"][data-part="trigger"] {
+    display: flex;
+    align-items: center;
+    justify-content: center;
     border: 0;
     background: transparent;
     font-size: inherit;
     gap: 4px;
     padding: 10px 16px;
     font-weight: bold;
 
-    & > svg {
+    & svg {
       transition: rotate 200ms ease;
       width: 14px;
       height: 14px;
     }
 
-    &[data-state="open"] > svg {
+    &[data-state="open"] svg {
       rotate: -180deg;
     }