@simplysm/solid 13.0.53 → 13.0.56

package/src/components/form-control/select/Select.tsx

@@ -5,6 +5,7 @@ import {
   For,
   type JSX,
   type ParentComponent,
+  onCleanup,
   Show,
   splitProps,
 } from "solid-js";
@@ -15,17 +16,18 @@ import { Icon } from "../../display/Icon";
 import { Dropdown } from "../../disclosure/Dropdown";
 import { List } from "../../data/list/List";
 import { SelectContext, type SelectContextValue } from "./SelectContext";
+import { useSelectContext } from "./SelectContext";
 import { SelectItem } from "./SelectItem";
 import { ripple } from "../../../directives/ripple";
-import { splitSlots } from "../../../helpers/splitSlots";
 import { borderDefault, type ComponentSize, textMuted } from "../../../styles/tokens.styles";
 import { createControllableSignal } from "../../../hooks/createControllableSignal";
-import { createItemTemplate } from "../../../hooks/createItemTemplate";
 import { chevronWrapperClass, getTriggerClass } from "../DropdownTrigger.styles";
 import { Invalid } from "../Invalid";
 
 void ripple;
 
+type SlotAccessor = (() => JSX.Element) | undefined;
+
 // Select 전용 스타일
 const multiTagClass = clsx("rounded", "bg-base-200 px-1", "dark:bg-base-600");
 const selectedValueClass = clsx("flex-1", "whitespace-nowrap");
@@ -37,8 +39,9 @@ interface SelectActionProps extends JSX.ButtonHTMLAttributes<HTMLButtonElement>
 
 const SelectAction: ParentComponent<SelectActionProps> = (props) => {
   const [local, rest] = splitProps(props, ["children", "class"]);
+  const ctx = useSelectContext();
 
-  return (
+  ctx.setAction(() => (
     <button
       {...rest}
       type="button"
@@ -63,17 +66,31 @@ const SelectAction: ParentComponent<SelectActionProps> = (props) => {
     >
       {local.children}
     </button>
-  );
+  ));
+  onCleanup(() => ctx.setAction(undefined));
+  return null;
 };
 
 /**
  * 드롭다운 상단 커스텀 영역 서브 컴포넌트
  */
-const SelectHeader: ParentComponent = (props) => <div data-select-header>{props.children}</div>;
+const SelectHeader: ParentComponent = (props) => {
+  const ctx = useSelectContext();
+  // eslint-disable-next-line solid/reactivity -- 슬롯 accessor로 저장, JSX tracked scope에서 호출됨
+  ctx.setHeader(() => props.children);
+  onCleanup(() => ctx.setHeader(undefined));
+  return null;
+};
 
-const { TemplateSlot: SelectItemTemplate, getTemplate: getSelectItemTemplate } = createItemTemplate<
-  [item: unknown, index: number, depth: number]
->("data-select-item-template");
+const SelectItemTemplate = <TArgs extends unknown[]>(props: {
+  children: (...args: TArgs) => JSX.Element;
+}) => {
+  const ctx = useSelectContext();
+  // eslint-disable-next-line solid/reactivity -- 렌더 함수를 signal에 저장, JSX tracked scope에서 호출됨
+  ctx.setItemTemplate(props.children as (...args: unknown[]) => JSX.Element);
+  onCleanup(() => ctx.setItemTemplate(undefined));
+  return null;
+};
 
 // Props 정의
 
@@ -214,8 +231,6 @@ export const Select: SelectComponent = <T,>(props: SelectProps<T>) => {
     "touchMode",
   ]);
 
-  let triggerRef!: HTMLDivElement;
-
   const [open, setOpen] = createSignal(false);
 
   // 선택된 값 관리 (controlled/uncontrolled 패턴)
@@ -256,18 +271,26 @@ export const Select: SelectComponent = <T,>(props: SelectProps<T>) => {
     setOpen(false);
   };
 
+  // 슬롯 signals
+  const [header, _setHeader] = createSignal<SlotAccessor>();
+  const setHeader = (content: SlotAccessor) => _setHeader(() => content);
+  const [action, _setAction] = createSignal<SlotAccessor>();
+  const setAction = (content: SlotAccessor) => _setAction(() => content);
+  const [itemTemplate, _setItemTemplate] = createSignal<
+    ((...args: unknown[]) => JSX.Element) | undefined
+  >();
+  const setItemTemplate = (fn: ((...args: unknown[]) => JSX.Element) | undefined) =>
+    _setItemTemplate(() => fn);
+
   // Context 값
   const contextValue: SelectContextValue<T> = {
     multiple: () => local.multiple ?? false,
     isSelected,
     toggleValue,
     closeDropdown,
-  };
-
-  // 트리거 클릭
-  const handleTriggerClick = () => {
-    if (local.disabled) return;
-    setOpen((v) => !v);
+    setHeader,
+    setAction,
+    setItemTemplate,
   };
 
   // 트리거 키보드 처리 (Enter/Space만 처리, ArrowUp/Down은 Dropdown이 처리)
@@ -297,32 +320,26 @@ export const Select: SelectComponent = <T,>(props: SelectProps<T>) => {
       class: local.class,
     });
 
-  // 내부 컴포넌트: Provider 안에서 children을 resolve
+  // 내부 컴포넌트: Provider 안에서 children을 resolve하여 슬롯 등록을 트리거
   const SelectInner: ParentComponent = (innerProps) => {
+    // children() resolve로 서브 컴포넌트 등록 트리거 (Header, Action, ItemTemplate은 null 반환)
     const resolved = children(() => innerProps.children);
-    const [slots, items] = splitSlots(resolved, [
-      "selectHeader",
-      "selectAction",
-      "selectItemTemplate",
-    ] as const);
 
     // itemTemplate 함수 추출
     const getItemTemplate = ():
       | ((item: T, index: number, depth: number) => JSX.Element)
       | undefined => {
-      return getSelectItemTemplate(slots().selectItemTemplate) as
-        | ((item: T, index: number, depth: number) => JSX.Element)
-        | undefined;
+      return itemTemplate() as ((item: T, index: number, depth: number) => JSX.Element) | undefined;
     };
 
     // items 재귀 렌더링
     const renderItems = (itemList: T[], depth: number): JSX.Element => {
-      const itemTemplate = getItemTemplate();
+      const tpl = getItemTemplate();
       return (
         <For each={itemList}>
           {(item, index) => (
             <SelectItem value={item}>
-              {itemTemplate ? itemTemplate(item, index(), depth) : String(item)}
+              {tpl ? tpl(item, index(), depth) : String(item)}
               <Show when={local.getChildren?.(item, index(), depth)} keyed>
                 {(itemChildren) => (
                   <Show when={itemChildren.length > 0}>
@@ -343,9 +360,9 @@ export const Select: SelectComponent = <T,>(props: SelectProps<T>) => {
       if (local.renderValue) {
         return local.renderValue(value);
       }
-      const itemTemplate = getItemTemplate();
-      if (itemTemplate) {
-        return itemTemplate(value, 0, 0);
+      const tpl = getItemTemplate();
+      if (tpl) {
+        return tpl(value, 0, 0);
       }
       return <>{String(value)}</>;
     };
@@ -372,33 +389,43 @@ export const Select: SelectComponent = <T,>(props: SelectProps<T>) => {
 
     return (
       <div {...rest} data-select class={clsx("group", local.inset ? "flex" : "inline-flex")}>
-        <div
-          ref={triggerRef}
-          use:ripple={!local.disabled}
-          role="combobox"
-          aria-haspopup="listbox"
-          aria-expanded={open()}
-          aria-disabled={local.disabled || undefined}
-          aria-required={local.required || undefined}
-          tabIndex={local.disabled ? -1 : 0}
-          class={twMerge(
-            getTriggerClassName(),
-            slots().selectAction.length > 0 &&
-              clsx(
-                "rounded-r-none border-r-0",
-                "group-focus-within:border-primary-400 dark:group-focus-within:border-primary-400",
-              ),
-          )}
-          style={local.style}
-          onClick={handleTriggerClick}
-          onKeyDown={handleTriggerKeyDown}
-        >
-          <div class={selectedValueClass}>{renderSelectedValue()}</div>
-          <div class={chevronWrapperClass}>
-            <Icon icon={IconChevronDown} size="1em" />
-          </div>
-        </div>
-        <Show when={slots().selectAction.length > 0}>
+        <Dropdown disabled={local.disabled} open={open()} onOpenChange={setOpen} keyboardNav>
+          <Dropdown.Trigger>
+            <div
+              use:ripple={!local.disabled}
+              role="combobox"
+              aria-haspopup="listbox"
+              aria-expanded={open()}
+              aria-disabled={local.disabled || undefined}
+              aria-required={local.required || undefined}
+              tabIndex={local.disabled ? -1 : 0}
+              class={twMerge(
+                getTriggerClassName(),
+                action() !== undefined &&
+                  clsx(
+                    "rounded-r-none border-r-0",
+                    "group-focus-within:border-primary-400 dark:group-focus-within:border-primary-400",
+                  ),
+              )}
+              style={local.style}
+              onKeyDown={handleTriggerKeyDown}
+            >
+              <div class={selectedValueClass}>{renderSelectedValue()}</div>
+              <div class={chevronWrapperClass}>
+                <Icon icon={IconChevronDown} size="1em" />
+              </div>
+            </div>
+          </Dropdown.Trigger>
+          <Dropdown.Content>
+            <Show when={header()}>{header()!()}</Show>
+            <List inset role="listbox">
+              <Show when={local.items} fallback={resolved()}>
+                {renderItems(local.items!, 0)}
+              </Show>
+            </List>
+          </Dropdown.Content>
+        </Dropdown>
+        <Show when={action()}>
           <div
             class={clsx(
               "contents",
@@ -406,18 +433,9 @@ export const Select: SelectComponent = <T,>(props: SelectProps<T>) => {
               "[&>[data-select-action]+[data-select-action]]:-ml-px",
             )}
           >
-            {slots().selectAction}
+            {action()!()}
           </div>
         </Show>
-
-        <Dropdown triggerRef={() => triggerRef} open={open()} onOpenChange={setOpen} keyboardNav>
-          <Show when={slots().selectHeader.length > 0}>{slots().selectHeader.single()}</Show>
-          <List inset role="listbox">
-            <Show when={local.items} fallback={items()}>
-              {renderItems(local.items!, 0)}
-            </Show>
-          </List>
-        </Dropdown>
       </div>
     );
   };

package/src/components/form-control/select/SelectContext.ts

@@ -1,4 +1,6 @@
-import { createContext, useContext, type Accessor } from "solid-js";
+import { createContext, useContext, type Accessor, type JSX } from "solid-js";
+
+type SlotAccessor = (() => JSX.Element) | undefined;
 
 export interface SelectContextValue<TValue = unknown> {
   /** 다중 선택 모드 여부 */
@@ -12,6 +14,15 @@ export interface SelectContextValue<TValue = unknown> {
 
   /** 드롭다운 닫기 */
   closeDropdown: () => void;
+
+  /** 헤더 슬롯 등록 */
+  setHeader: (content: SlotAccessor) => void;
+
+  /** 액션 슬롯 등록 */
+  setAction: (content: SlotAccessor) => void;
+
+  /** 아이템 템플릿 등록 */
+  setItemTemplate: (fn: ((...args: unknown[]) => JSX.Element) | undefined) => void;
 }
 
 export const SelectContext = createContext<SelectContextValue>();

package/src/components/form-control/select/SelectItem.tsx

@@ -1,4 +1,13 @@
-import { children, type JSX, type ParentComponent, Show, splitProps } from "solid-js";
+import {
+  createContext,
+  createSignal,
+  type JSX,
+  onCleanup,
+  type ParentComponent,
+  Show,
+  splitProps,
+  useContext,
+} from "solid-js";
 import { twMerge } from "tailwind-merge";
 import { IconCheck } from "@tabler/icons-solidjs";
 import { Icon } from "../../display/Icon";
@@ -6,7 +15,6 @@ import { useSelectContext } from "./SelectContext";
 import { ripple } from "../../../directives/ripple";
 import { List } from "../../data/list/List";
 import { Collapse } from "../../disclosure/Collapse";
-import { splitSlots } from "../../../helpers/splitSlots";
 import {
   listItemBaseClass,
   listItemSelectedClass,
@@ -18,17 +26,24 @@ import {
 
 void ripple;
 
+type SlotAccessor = (() => JSX.Element) | undefined;
+
+interface SelectItemSlotsContextValue {
+  setChildren: (content: SlotAccessor) => void;
+}
+
+const SelectItemSlotsContext = createContext<SelectItemSlotsContextValue>();
+
 /**
  * 중첩 아이템을 담는 서브 컴포넌트
  */
-const SelectItemChildren: ParentComponent = (props) => (
-  <div class="flex" data-select-item-children>
-    <div class={listItemIndentGuideClass} />
-    <List inset class="flex-1">
-      {props.children}
-    </List>
-  </div>
-);
+const SelectItemChildren: ParentComponent = (props) => {
+  const ctx = useContext(SelectItemSlotsContext)!;
+  // eslint-disable-next-line solid/reactivity -- slot accessor: children is lazily read at render time
+  ctx.setChildren(() => props.children);
+  onCleanup(() => ctx.setChildren(undefined));
+  return null;
+};
 
 export interface SelectItemProps<TValue = unknown> extends Omit<
   JSX.ButtonHTMLAttributes<HTMLButtonElement>,
@@ -68,10 +83,9 @@ export const SelectItem: SelectItemComponent = <T,>(
 
   const context = useSelectContext<T>();
 
-  const resolved = children(() => local.children);
-  const [slots, content] = splitSlots(resolved, ["selectItemChildren"] as const);
-
-  const hasChildren = () => slots().selectItemChildren.length > 0;
+  const [childrenSlot, _setChildrenSlot] = createSignal<SlotAccessor>();
+  const setChildrenSlot = (content: SlotAccessor) => _setChildrenSlot(() => content);
+  const hasChildren = () => childrenSlot() !== undefined;
   const isSelected = () => context.isSelected(local.value);
   const useRipple = () => !local.disabled;
 
@@ -97,7 +111,7 @@ export const SelectItem: SelectItemComponent = <T,>(
   const getCheckIconClass = () => getListItemSelectedIconClass(isSelected());
 
   return (
-    <>
+    <SelectItemSlotsContext.Provider value={{ setChildren: setChildrenSlot }}>
       <button
         {...rest}
         type="button"
@@ -114,12 +128,19 @@ export const SelectItem: SelectItemComponent = <T,>(
         <Show when={context.multiple() && !hasChildren()}>
           <Icon icon={IconCheck} class={getCheckIconClass()} />
         </Show>
-        <span class={listItemContentClass}>{content()}</span>
+        <span class={listItemContentClass}>{local.children}</span>
       </button>
       <Show when={hasChildren()}>
-        <Collapse open={true}>{slots().selectItemChildren.single()}</Collapse>
+        <Collapse open={true}>
+          <div class="flex">
+            <div class={listItemIndentGuideClass} />
+            <List inset class="flex-1">
+              {childrenSlot()!()}
+            </List>
+          </div>
+        </Collapse>
       </Show>
-    </>
+    </SelectItemSlotsContext.Provider>
   );
 };
 

package/src/components/form-control/state-preset/StatePreset.tsx

@@ -289,6 +289,7 @@ function StatePresetInner<TValue>(props: StatePresetProps<TValue>): JSX.Element
           type="text"
           class={resolvedInputClass()}
           placeholder="이름..."
+          autocomplete="one-time-code"
           value={inputValue()}
           onInput={(e) => setInputValue(e.currentTarget.value)}
           onKeyDown={handleInputKeyDown}

package/src/components/layout/topbar/Topbar.tsx

@@ -5,6 +5,7 @@ import { Icon } from "../../display/Icon";
 import { twMerge } from "tailwind-merge";
 import { Button } from "../../form-control/Button";
 import { useSidebarContextOptional } from "../sidebar/SidebarContext";
+import { TopbarActions } from "./TopbarActions";
 import { TopbarContainer } from "./TopbarContainer";
 import { TopbarMenu } from "./TopbarMenu";
 import { TopbarUser } from "./TopbarUser";
@@ -58,6 +59,7 @@ export interface TopbarProps extends JSX.HTMLAttributes<HTMLElement> {
  * ```
  */
 interface TopbarComponent extends ParentComponent<TopbarProps> {
+  Actions: typeof TopbarActions;
   Container: typeof TopbarContainer;
   Menu: typeof TopbarMenu;
   User: typeof TopbarUser;
@@ -88,6 +90,7 @@ const TopbarBase: ParentComponent<TopbarProps> = (props) => {
 };
 
 export const Topbar = TopbarBase as TopbarComponent;
+Topbar.Actions = TopbarActions;
 Topbar.Container = TopbarContainer;
 Topbar.Menu = TopbarMenu;
 Topbar.User = TopbarUser;

package/src/components/layout/topbar/TopbarActions.tsx

@@ -0,0 +1,8 @@
+import { type Component, useContext } from "solid-js";
+import { TopbarContext } from "./TopbarContext";
+
+export const TopbarActions: Component = () => {
+  const context = useContext(TopbarContext);
+
+  return <span data-topbar-actions>{context?.actions()}</span>;
+};

package/src/components/layout/topbar/TopbarContainer.tsx

@@ -1,6 +1,7 @@
-import { type JSX, type ParentComponent, splitProps } from "solid-js";
+import { type JSX, type ParentComponent, splitProps, createSignal } from "solid-js";
 import clsx from "clsx";
 import { twMerge } from "tailwind-merge";
+import { TopbarContext } from "./TopbarContext";
 
 const containerClass = clsx("flex h-full flex-col");
 
@@ -13,7 +14,7 @@ export interface TopbarContainerProps extends JSX.HTMLAttributes<HTMLDivElement>
  *
  * @remarks
  * - `flex flex-col h-full` 구조로 Topbar와 콘텐츠를 수직 배치
- * - Context 없이 순수 레이아웃 역할만 수행
+ * - TopbarContext.Provider로 actions 상태 공유
  * - 부모 요소에 높이가 지정되어야 함
  *
  * @example
@@ -29,12 +30,15 @@ export interface TopbarContainerProps extends JSX.HTMLAttributes<HTMLDivElement>
  */
 export const TopbarContainer: ParentComponent<TopbarContainerProps> = (props) => {
   const [local, rest] = splitProps(props, ["children", "class"]);
+  const [actions, setActions] = createSignal<JSX.Element | undefined>(undefined);
 
   const getClassName = () => twMerge(containerClass, local.class);
 
   return (
-    <div {...rest} data-topbar-container class={getClassName()}>
-      {local.children}
-    </div>
+    <TopbarContext.Provider value={{ actions, setActions }}>
+      <div {...rest} data-topbar-container class={getClassName()}>
+        {local.children}
+      </div>
+    </TopbarContext.Provider>
   );
 };

package/src/components/layout/topbar/TopbarContext.ts

@@ -0,0 +1,36 @@
+import {
+  createContext,
+  useContext,
+  onCleanup,
+  type Accessor,
+  type JSX,
+  type Setter,
+} from "solid-js";
+
+export interface TopbarContextValue {
+  actions: Accessor<JSX.Element | undefined>;
+  setActions: Setter<JSX.Element | undefined>;
+}
+
+export const TopbarContext = createContext<TopbarContextValue>();
+
+export function useTopbarActionsAccessor(): Accessor<JSX.Element | undefined> {
+  const context = useContext(TopbarContext);
+  if (!context) {
+    throw new Error("useTopbarActionsAccessor는 Topbar.Container 내부에서만 사용할 수 있습니다");
+  }
+  return context.actions;
+}
+
+export function createTopbarActions(accessor: () => JSX.Element): void {
+  const context = useContext(TopbarContext);
+  if (!context) {
+    throw new Error("createTopbarActions는 Topbar.Container 내부에서만 사용할 수 있습니다");
+  }
+
+  context.setActions(() => accessor());
+
+  onCleanup(() => {
+    context.setActions(undefined);
+  });
+}

package/src/components/layout/topbar/TopbarMenu.tsx

@@ -63,7 +63,6 @@ export interface TopbarMenuProps extends Omit<JSX.HTMLAttributes<HTMLElement>, "
 export const TopbarMenu: Component<TopbarMenuProps> = (props) => {
   const [local, rest] = splitProps(props, ["menus", "class"]);
   const [mobileMenuOpen, setMobileMenuOpen] = createSignal(false);
-  let mobileButtonRef: HTMLButtonElement | undefined;
 
   return (
     <>
@@ -74,28 +73,26 @@ export const TopbarMenu: Component<TopbarMenuProps> = (props) => {
 
       {/* 모바일 햄버거 (640px 미만에서만 표시) */}
       <div class={mobileWrapperClass}>
-        <Button
-          ref={mobileButtonRef}
-          variant="ghost"
-          onClick={() => setMobileMenuOpen((v) => !v)}
-          aria-label="메뉴"
-          aria-haspopup="menu"
-          aria-expanded={mobileMenuOpen()}
-        >
-          <Icon icon={IconDotsVertical} size="1.25em" />
-        </Button>
-        <Dropdown
-          triggerRef={() => mobileButtonRef}
-          open={mobileMenuOpen()}
-          onOpenChange={setMobileMenuOpen}
-        >
-          <List inset>
-            <For each={local.menus}>
-              {(menu) => (
-                <TopbarMenuDropdownItem menu={menu} onClose={() => setMobileMenuOpen(false)} />
-              )}
-            </For>
-          </List>
+        <Dropdown open={mobileMenuOpen()} onOpenChange={setMobileMenuOpen}>
+          <Dropdown.Trigger>
+            <Button
+              variant="ghost"
+              aria-label="메뉴"
+              aria-haspopup="menu"
+              aria-expanded={mobileMenuOpen()}
+            >
+              <Icon icon={IconDotsVertical} size="1.25em" />
+            </Button>
+          </Dropdown.Trigger>
+          <Dropdown.Content>
+            <List inset>
+              <For each={local.menus}>
+                {(menu) => (
+                  <TopbarMenuDropdownItem menu={menu} onClose={() => setMobileMenuOpen(false)} />
+                )}
+              </For>
+            </List>
+          </Dropdown.Content>
         </Dropdown>
       </div>
     </>
@@ -111,7 +108,6 @@ const TopbarMenuButton: Component<TopbarMenuButtonProps> = (props) => {
   const navigate = useNavigate();
 
   const [open, setOpen] = createSignal(false);
-  let buttonRef: HTMLButtonElement | undefined;
 
   const hasChildren = () => props.menu.children !== undefined && props.menu.children.length > 0;
   const isExternalLink = () => props.menu.href?.includes("://") ?? false;
@@ -133,10 +129,8 @@ const TopbarMenuButton: Component<TopbarMenuButtonProps> = (props) => {
     return false;
   });
 
-  const handleClick = () => {
-    if (hasChildren()) {
-      setOpen((v) => !v);
-    } else if (props.menu.href !== undefined) {
+  const handleNavigate = () => {
+    if (props.menu.href !== undefined) {
       if (isExternalLink()) {
         window.open(props.menu.href, "_blank", "noopener,noreferrer");
       } else {
@@ -145,39 +139,42 @@ const TopbarMenuButton: Component<TopbarMenuButtonProps> = (props) => {
     }
   };
 
-  return (
-    <>
-      <Button
-        ref={buttonRef}
-        variant={isSelected() ? "solid" : "ghost"}
-        theme={isSelected() ? "primary" : "base"}
-        onClick={handleClick}
-        class={menuButtonContentClass}
-        aria-haspopup={hasChildren() ? "menu" : undefined}
-        aria-expanded={hasChildren() ? open() : undefined}
-      >
-        <Show when={props.menu.icon}>
-          <Icon icon={props.menu.icon!} />
-        </Show>
-        <span>{props.menu.title}</span>
-        <Show when={hasChildren()}>
-          <Icon
-            icon={IconChevronDown}
-            size="1em"
-            class={clsx("transition-transform", open() && "rotate-180")}
-          />
-        </Show>
-      </Button>
+  const buttonContent = () => (
+    <Button
+      variant={isSelected() ? "solid" : "ghost"}
+      theme={isSelected() ? "primary" : "base"}
+      class={menuButtonContentClass}
+      aria-haspopup={hasChildren() ? "menu" : undefined}
+      aria-expanded={hasChildren() ? open() : undefined}
+      onClick={hasChildren() ? undefined : handleNavigate}
+    >
+      <Show when={props.menu.icon}>
+        <Icon icon={props.menu.icon!} />
+      </Show>
+      <span>{props.menu.title}</span>
       <Show when={hasChildren()}>
-        <Dropdown triggerRef={() => buttonRef} open={open()} onOpenChange={setOpen}>
+        <Icon
+          icon={IconChevronDown}
+          size="1em"
+          class={clsx("transition-transform", open() && "rotate-180")}
+        />
+      </Show>
+    </Button>
+  );
+
+  return (
+    <Show when={hasChildren()} fallback={buttonContent()}>
+      <Dropdown open={open()} onOpenChange={setOpen}>
+        <Dropdown.Trigger>{buttonContent()}</Dropdown.Trigger>
+        <Dropdown.Content>
           <List inset>
             <For each={props.menu.children}>
               {(child) => <TopbarMenuDropdownItem menu={child} onClose={() => setOpen(false)} />}
             </For>
           </List>
-        </Dropdown>
-      </Show>
-    </>
+        </Dropdown.Content>
+      </Dropdown>
+    </Show>
   );
 };