@simplysm/solid 13.0.55 → 13.0.56

package/src/components/disclosure/Dropdown.tsx

@@ -3,6 +3,8 @@ import {
   type ParentComponent,
   createSignal,
   createEffect,
+  createContext,
+  useContext,
   onCleanup,
   Show,
   splitProps,
@@ -12,20 +14,47 @@ import { createMountTransition } from "../../hooks/createMountTransition";
 import { Portal } from "solid-js/web";
 import clsx from "clsx";
 import { twMerge } from "tailwind-merge";
-import { createControllableSignal } from "../../hooks/createControllableSignal";
 import { mergeStyles } from "../../helpers/mergeStyles";
 import { borderSubtle } from "../../styles/tokens.styles";
 
-export interface DropdownProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> {
-  /**
-   * 트리거 요소의 ref (위치 계산 + minWidth 적용)
-   * position과 함께 사용 불가
-   */
-  triggerRef?: () => HTMLElement | undefined;
+// --- DropdownContext (internal) ---
+
+type SlotAccessor = (() => JSX.Element) | undefined;
+
+interface DropdownContextValue {
+  toggle: () => void;
+  setTrigger: (content: SlotAccessor) => void;
+  setContent: (content: SlotAccessor) => void;
+}
+
+const DropdownContext = createContext<DropdownContextValue>();
+
+// --- DropdownTrigger ---
+
+const DropdownTrigger: ParentComponent = (props) => {
+  const ctx = useContext(DropdownContext)!;
+  // eslint-disable-next-line solid/reactivity -- slot accessor: children은 렌더 시점에 lazy 평가됨
+  ctx.setTrigger(() => props.children);
+  onCleanup(() => ctx.setTrigger(undefined));
+  return null;
+};
+
+// --- DropdownContent ---
+
+const DropdownContent: ParentComponent = (props) => {
+  const ctx = useContext(DropdownContext)!;
+  // eslint-disable-next-line solid/reactivity -- slot accessor: children은 렌더 시점에 lazy 평가됨
+  ctx.setContent(() => props.children);
+  onCleanup(() => ctx.setContent(undefined));
+  return null;
+};
 
+// --- Dropdown ---
+
+export interface DropdownProps {
   /**
    * 절대 위치 (컨텍스트 메뉴 등, minWidth 없음)
-   * triggerRef와 함께 사용 불가
+   * Trigger와 함께 사용 시 Trigger 기준 위치 계산
    */
   position?: { x: number; y: number };
 
@@ -44,62 +73,118 @@ export interface DropdownProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>,
    */
   maxHeight?: number;
 
+  /**
+   * 비활성화 (Trigger 클릭 무시)
+   */
+  disabled?: boolean;
+
   /**
    * 키보드 네비게이션 활성화 (Select 등에서 사용)
    *
    * direction=down일 때:
-   * - 트리거에서 ArrowDown → 첫 focusable 아이템 포커스
-   * - 첫 아이템에서 ArrowUp → 트리거 포커스
-   * - 트리거에서 ArrowUp → 닫기
+   * - 트리거에서 ArrowDown -> 첫 focusable 아이템 포커스
+   * - 첫 아이템에서 ArrowUp -> 트리거 포커스
+   * - 트리거에서 ArrowUp -> 닫기
    *
    * direction=up일 때:
-   * - 트리거에서 ArrowUp → 마지막 focusable 아이템 포커스
-   * - 마지막 아이템에서 ArrowDown → 트리거 포커스
-   * - 트리거에서 ArrowDown → 닫기
+   * - 트리거에서 ArrowUp -> 마지막 focusable 아이템 포커스
+   * - 마지막 아이템에서 ArrowDown -> 트리거 포커스
+   * - 트리거에서 ArrowDown -> 닫기
    */
   keyboardNav?: boolean;
 
   /**
-   * children
+   * 팝업에 적용할 커스텀 class
+   */
+  class?: string;
+
+  /**
+   * 팝업에 적용할 커스텀 style
+   */
+  style?: JSX.CSSProperties;
+
+  /**
+   * children (Dropdown.Trigger, Dropdown.Content)
    */
   children: JSX.Element;
 }
 
+interface DropdownComponent extends ParentComponent<DropdownProps> {
+  Trigger: typeof DropdownTrigger;
+  Content: typeof DropdownContent;
+}
+
 /**
  * 드롭다운 팝업 컴포넌트
  *
- * 위치 계산 + 포털 렌더링 + 닫힘 감지를 담당하며,
- * 트리거 요소 렌더링과 열기 이벤트는 사용자가 직접 제어합니다.
+ * Trigger/Content 슬롯 패턴으로 트리거와 컨텐츠를 분리합니다.
+ * Trigger 클릭 시 auto-toggle되며, disabled prop으로 비활성화할 수 있습니다.
  *
  * @example
  * ```tsx
- * const [open, setOpen] = createSignal(false);
- * let buttonRef: HTMLButtonElement;
+ * <Dropdown>
+ *   <Dropdown.Trigger>
+ *     <Button>열기</Button>
+ *   </Dropdown.Trigger>
+ *   <Dropdown.Content>
+ *     <div>팝업 내용</div>
+ *   </Dropdown.Content>
+ * </Dropdown>
+ * ```
  *
- * <Button ref={buttonRef} onClick={() => setOpen(!open())}>열기</Button>
- * <Dropdown triggerRef={() => buttonRef} open={open()} onOpenChange={setOpen}>
- *   <div>팝업 내용</div>
+ * @example Context menu (Trigger 없이 position 사용)
+ * ```tsx
+ * <Dropdown position={{ x: 300, y: 200 }} open={true}>
+ *   <Dropdown.Content>
+ *     <div>메뉴</div>
+ *   </Dropdown.Content>
  * </Dropdown>
  * ```
  */
-export const Dropdown: ParentComponent<DropdownProps> = (props) => {
+export const Dropdown: DropdownComponent = ((props: DropdownProps) => {
   const [local, rest] = splitProps(props, [
-    "triggerRef",
     "position",
     "open",
     "onOpenChange",
     "maxHeight",
+    "disabled",
     "keyboardNav",
     "class",
     "style",
     "children",
   ]);
 
-  const [open, setOpen] = createControllableSignal({
-    value: () => local.open ?? false,
-    onChange: () => local.onOpenChange,
+  const [open, setOpenInternal] = createSignal(false);
+
+  // props.open 변경 시 내부 상태 동기화
+  createEffect(() => {
+    const propOpen = local.open;
+    if (propOpen !== undefined) {
+      setOpenInternal(propOpen);
+    }
   });
 
+  // 콜백 포함 setter
+  const setOpen = (value: boolean) => {
+    setOpenInternal(value);
+    local.onOpenChange?.(value);
+  };
+
+  // toggle 함수 (disabled 체크 포함)
+  const toggle = () => {
+    if (local.disabled) return;
+    setOpen(!open());
+  };
+
+  // 슬롯 등록 시그널
+  const [triggerSlot, _setTriggerSlot] = createSignal<SlotAccessor>();
+  const setTrigger = (content: SlotAccessor) => _setTriggerSlot(() => content);
+  const [contentSlot, _setContentSlot] = createSignal<SlotAccessor>();
+  const setContent = (content: SlotAccessor) => _setContentSlot(() => content);
+
+  // Trigger wrapper ref (위치 계산에 필요)
+  let triggerRef: HTMLDivElement | undefined;
+
   // 팝업 ref
   const [popupRef, setPopupRef] = createSignal<HTMLDivElement>();
 
@@ -119,11 +204,8 @@ export const Dropdown: ParentComponent<DropdownProps> = (props) => {
 
     const style: JSX.CSSProperties = {};
 
-    if (local.triggerRef) {
-      const trigger = local.triggerRef();
-      if (!trigger) return;
-
-      const rect = trigger.getBoundingClientRect();
+    if (triggerRef) {
+      const rect = triggerRef.getBoundingClientRect();
       const viewportHeight = window.innerHeight;
       const viewportWidth = window.innerWidth;
 
@@ -193,13 +275,10 @@ export const Dropdown: ParentComponent<DropdownProps> = (props) => {
       // 팝업 내부 클릭은 무시
       if (popup?.contains(target)) return;
 
-      // triggerRef 모드: 트리거 내부 클릭도 무시
-      if (local.triggerRef) {
-        const trigger = local.triggerRef();
-        if (trigger?.contains(target)) return;
-      }
+      // Trigger 내부 클릭도 무시
+      if (triggerRef?.contains(target)) return;
 
-      // 외부 클릭 → 닫기
+      // 외부 클릭 -> 닫기
       setOpen(false);
     };
 
@@ -221,13 +300,10 @@ export const Dropdown: ParentComponent<DropdownProps> = (props) => {
       // 팝업 내부로 이동은 무시
       if (popup?.contains(relatedTarget)) return;
 
-      // triggerRef 모드: 트리거 내부로 이동도 무시
-      if (local.triggerRef) {
-        const trigger = local.triggerRef();
-        if (trigger?.contains(relatedTarget)) return;
-      }
+      // Trigger 내부로 이동도 무시
+      if (triggerRef?.contains(relatedTarget)) return;
 
-      // 외부로 포커스 이동 → 닫기
+      // 외부로 포커스 이동 -> 닫기
       setOpen(false);
     };
 
@@ -301,8 +377,7 @@ export const Dropdown: ParentComponent<DropdownProps> = (props) => {
     // List 등에서 이미 처리된 이벤트는 무시
     if (e.defaultPrevented) return;
 
-    const trigger = local.triggerRef?.();
-    if (!trigger) return;
+    if (!triggerRef) return;
 
     const dir = direction();
 
@@ -310,24 +385,13 @@ export const Dropdown: ParentComponent<DropdownProps> = (props) => {
     // 트리거로 포커스 이동
     if (dir === "down" && e.key === "ArrowUp") {
       e.preventDefault();
-      trigger.focus();
+      triggerRef.focus();
     } else if (dir === "up" && e.key === "ArrowDown") {
       e.preventDefault();
-      trigger.focus();
+      triggerRef.focus();
     }
   };
 
-  // 트리거에 키보드 핸들러 등록
-  createEffect(() => {
-    if (!local.keyboardNav) return;
-
-    const trigger = local.triggerRef?.();
-    if (!trigger) return;
-
-    trigger.addEventListener("keydown", handleTriggerKeyDown);
-    onCleanup(() => trigger.removeEventListener("keydown", handleTriggerKeyDown));
-  });
-
   // 스크롤 감지
   createEffect(() => {
     if (!open()) return;
@@ -363,7 +427,7 @@ export const Dropdown: ParentComponent<DropdownProps> = (props) => {
     if (e.propertyName !== "opacity") return;
 
     if (!open()) {
-      // 닫힘 애니메이션 완료 → DOM에서 제거
+      // 닫힘 애니메이션 완료 -> DOM에서 제거
       unmount();
     }
   };
@@ -384,33 +448,57 @@ export const Dropdown: ParentComponent<DropdownProps> = (props) => {
   };
 
   return (
-    <Show when={mounted()}>
-      <Portal>
+    <DropdownContext.Provider value={{ toggle, setTrigger, setContent }}>
+      {local.children}
+
+      {/* Trigger 슬롯 렌더링 (wrapper div에 click/keyboard handler 부착) */}
+      <Show when={triggerSlot()}>
         <div
-          {...rest}
-          ref={setPopupRef}
-          data-dropdown
-          class={twMerge(
-            clsx(
-              "fixed", // 기본 position: fixed로 설정하여 offsetWidth 측정 정확하게
-              "z-dropdown",
-              "bg-white dark:bg-base-800",
-              "border",
-              borderSubtle,
-              "shadow-lg dark:shadow-black/30",
-              "rounded-md",
-              "overflow-y-auto",
-              animationClass(),
-            ),
-            local.class,
-          )}
-          style={mergeStyles(computedStyle(), local.style, { "max-height": `${maxHeight()}px` })}
-          onTransitionEnd={handleTransitionEnd}
-          onKeyDown={handlePopupKeyDown}
+          ref={(el) => {
+            triggerRef = el;
+          }}
+          data-dropdown-trigger
+          onClick={toggle}
+          onKeyDown={handleTriggerKeyDown}
         >
-          {local.children}
+          {triggerSlot()!()}
         </div>
-      </Portal>
-    </Show>
+      </Show>
+
+      {/* Content 슬롯: Portal + 팝업 */}
+      <Show when={mounted()}>
+        <Portal>
+          <div
+            {...rest}
+            ref={setPopupRef}
+            data-dropdown
+            class={twMerge(
+              clsx(
+                "fixed",
+                "z-dropdown",
+                "bg-white dark:bg-base-800",
+                "border",
+                borderSubtle,
+                "shadow-lg dark:shadow-black/30",
+                "rounded-md",
+                "overflow-y-auto",
+                animationClass(),
+              ),
+              local.class,
+            )}
+            style={mergeStyles(computedStyle(), local.style, {
+              "max-height": `${maxHeight()}px`,
+            })}
+            onTransitionEnd={handleTransitionEnd}
+            onKeyDown={handlePopupKeyDown}
+          >
+            <Show when={contentSlot()}>{contentSlot()!()}</Show>
+          </div>
+        </Portal>
+      </Show>
+    </DropdownContext.Provider>
   );
-};
+}) as DropdownComponent;
+
+Dropdown.Trigger = DropdownTrigger;
+Dropdown.Content = DropdownContent;

package/src/components/feedback/notification/NotificationBanner.tsx

@@ -8,7 +8,7 @@ import { themeTokens } from "../../../styles/tokens.styles";
 
 const baseClass = clsx(
   "fixed",
-  "top-4",
+  "top-8",
   "right-4",
   "z-50",
   "flex",
@@ -31,15 +31,9 @@ const themeClasses: Record<string, string> = {
 };
 
 const contentClass = clsx("flex flex-col", "gap-0.5", "min-w-0");
-const messageClass = clsx("text-sm", "opacity-90", "overflow-auto");
+const messageClass = clsx("opacity-90", "overflow-auto");
 const actionsClass = clsx("flex items-center", "gap-2", "shrink-0");
-const actionButtonClass = clsx(
-  "rounded",
-  "bg-white/20",
-  "px-3 py-1",
-  "text-sm",
-  "hover:bg-white/30",
-);
+const actionButtonClass = clsx("rounded", "bg-white/20", "px-3 py-1", "hover:bg-white/30");
 const dismissButtonClass = clsx("rounded", "p-1", "hover:bg-white/20");
 
 export const NotificationBanner: Component = () => {

package/src/components/feedback/notification/NotificationBell.tsx

@@ -53,7 +53,6 @@ const itemTimeClass = clsx("mt-1 text-xs", "text-base-400");
 export const NotificationBell: Component<NotificationBellProps> = (props) => {
   const notification = useNotification();
   const [open, setOpen] = createSignal(false);
-  let buttonRef: HTMLButtonElement | undefined;
 
   const handleClear = () => {
     notification.clear();
@@ -73,65 +72,60 @@ export const NotificationBell: Component<NotificationBellProps> = (props) => {
         <NotificationBanner />
       </Show>
 
-      <button
-        ref={(el) => (buttonRef = el)}
-        type="button"
-        data-notification-bell
-        class={buttonClass}
-        aria-label={`알림 ${notification.unreadCount()}개`}
-        aria-haspopup="true"
-        aria-expanded={open()}
-        onClick={() => handleOpenChange(!open())}
-      >
-        <Icon icon={IconBell} />
-        <Show when={notification.unreadCount() > 0}>
-          <span data-notification-badge aria-hidden="true" class={badgeClass}>
-            {notification.unreadCount()}
-          </span>
-        </Show>
-      </button>
+      <Dropdown open={open()} onOpenChange={handleOpenChange} maxHeight={400}>
+        <Dropdown.Trigger>
+          <button
+            type="button"
+            data-notification-bell
+            class={buttonClass}
+            aria-label={`알림 ${notification.unreadCount()}개`}
+            aria-haspopup="true"
+            aria-expanded={open()}
+          >
+            <Icon icon={IconBell} />
+            <Show when={notification.unreadCount() > 0}>
+              <span data-notification-badge aria-hidden="true" class={badgeClass}>
+                {notification.unreadCount()}
+              </span>
+            </Show>
+          </button>
+        </Dropdown.Trigger>
+        <Dropdown.Content>
+          <div class="w-80 p-2">
+            <div class={dropdownHeaderClass}>
+              <span class="font-bold">알림</span>
+              <Show when={notification.items().length > 0}>
+                <button
+                  type="button"
+                  data-notification-clear
+                  class={clearButtonClass}
+                  onClick={handleClear}
+                >
+                  전체 삭제
+                </button>
+              </Show>
+            </div>
 
-      <Dropdown
-        triggerRef={() => buttonRef}
-        open={open()}
-        onOpenChange={handleOpenChange}
-        maxHeight={400}
-        class="w-80"
-      >
-        <div class="p-2">
-          <div class={dropdownHeaderClass}>
-            <span class="font-bold">알림</span>
-            <Show when={notification.items().length > 0}>
-              <button
-                type="button"
-                data-notification-clear
-                class={clearButtonClass}
-                onClick={handleClear}
-              >
-                전체 삭제
-              </button>
+            <Show
+              when={notification.items().length > 0}
+              fallback={<div class={emptyClass}>알림이 없습니다</div>}
+            >
+              <div class={listClass}>
+                <For each={[...notification.items()].reverse()}>
+                  {(item) => (
+                    <div class={clsx(itemBaseClass, themeStyles[item.theme])}>
+                      <div class="font-medium">{item.title}</div>
+                      <Show when={item.message}>
+                        <pre class={itemMessageClass}>{item.message}</pre>
+                      </Show>
+                      <div class={itemTimeClass}>{item.createdAt.toLocaleTimeString()}</div>
+                    </div>
+                  )}
+                </For>
+              </div>
             </Show>
           </div>
-
-          <Show
-            when={notification.items().length > 0}
-            fallback={<div class={emptyClass}>알림이 없습니다</div>}
-          >
-            <div class={listClass}>
-              <For each={[...notification.items()].reverse()}>
-                {(item) => (
-                  <div class={clsx(itemBaseClass, themeStyles[item.theme])}>
-                    <div class="font-medium">{item.title}</div>
-                    <Show when={item.message}>
-                      <pre class={itemMessageClass}>{item.message}</pre>
-                    </Show>
-                    <div class={itemTimeClass}>{item.createdAt.toLocaleTimeString()}</div>
-                  </div>
-                )}
-              </For>
-            </div>
-          </Show>
-        </div>
+        </Dropdown.Content>
       </Dropdown>
     </>
   );