@simplysm/solid 13.0.55 → 13.0.56

package/src/components/disclosure/Dialog.tsx

@@ -1,12 +1,15 @@
 import {
   type JSX,
   type ParentComponent,
+  createContext,
   createEffect,
+  createUniqueId,
   onCleanup,
   Show,
   splitProps,
   For,
   useContext,
+  createSignal,
 } from "solid-js";
 import { Portal } from "solid-js/web";
 import clsx from "clsx";
@@ -21,15 +24,42 @@ import { borderSubtle } from "../../styles/tokens.styles";
 import { DialogDefaultsContext } from "./DialogContext";
 import { registerDialog, unregisterDialog, bringToFront } from "./dialogZIndex";
 
+type SlotAccessor = (() => JSX.Element) | undefined;
+
+interface DialogSlotsContextValue {
+  setHeader: (content: SlotAccessor) => void;
+  setAction: (content: SlotAccessor) => void;
+}
+
+const DialogSlotsContext = createContext<DialogSlotsContextValue>();
+
+/**
+ * 다이얼로그 헤더 서브 컴포넌트
+ */
+const DialogHeader: ParentComponent = (props) => {
+  const ctx = useContext(DialogSlotsContext)!;
+  // eslint-disable-next-line solid/reactivity -- slot accessor: children은 렌더 시점에 lazy 평가됨
+  ctx.setHeader(() => props.children);
+  onCleanup(() => ctx.setHeader(undefined));
+  return null;
+};
+
+/**
+ * 다이얼로그 액션 서브 컴포넌트
+ */
+const DialogAction: ParentComponent = (props) => {
+  const ctx = useContext(DialogSlotsContext)!;
+  // eslint-disable-next-line solid/reactivity -- slot accessor: children은 렌더 시점에 lazy 평가됨
+  ctx.setAction(() => props.children);
+  onCleanup(() => ctx.setAction(undefined));
+  return null;
+};
+
 export interface DialogProps {
   /** 모달 열림 상태 */
   open?: boolean;
   /** 열림 상태 변경 시 콜백 */
   onOpenChange?: (open: boolean) => void;
-  /** 모달 제목 */
-  title: string;
-  /** 헤더 숨김 */
-  hideHeader?: boolean;
   /** 닫기 버튼 표시 (기본: true) */
   closable?: boolean;
   /** 백드롭 클릭으로 닫기 */
@@ -56,16 +86,12 @@ export interface DialogProps {
   position?: "bottom-right" | "top-right";
   /** 헤더 스타일 */
   headerStyle?: JSX.CSSProperties | string;
-  /** 헤더 액션 영역 */
-  headerAction?: JSX.Element;
   /** 닫기 전 확인 함수 */
   canDeactivate?: () => boolean;
   /** 닫기 애니메이션 완료 후 콜백 */
   onCloseComplete?: () => void;
   /** 추가 CSS 클래스 */
   class?: string;
-  /** 자식 요소 */
-  children: JSX.Element;
 }
 
 type ResizeDirection =
@@ -124,19 +150,23 @@ const resizePositionMap: Record<ResizeDirection, string> = {
  * const [open, setOpen] = createSignal(false);
  *
  * <Button onClick={() => setOpen(true)}>다이얼로그 열기</Button>
- * <Dialog open={open()} onOpenChange={setOpen} title="내 다이얼로그">
+ * <Dialog open={open()} onOpenChange={setOpen}>
+ *   <Dialog.Header>내 다이얼로그</Dialog.Header>
  *   <div class="p-4">다이얼로그 내용</div>
  * </Dialog>
  * ```
  */
-export const Dialog: ParentComponent<DialogProps> = (props) => {
+interface DialogComponent extends ParentComponent<DialogProps> {
+  Header: typeof DialogHeader;
+  Action: typeof DialogAction;
+}
+
+export const Dialog: DialogComponent = (props) => {
   const dialogDefaults = useContext(DialogDefaultsContext);
 
   const [local] = splitProps(props, [
     "open",
     "onOpenChange",
-    "title",
-    "hideHeader",
     "closable",
     "closeOnBackdrop",
     "closeOnEscape",
@@ -150,13 +180,20 @@ export const Dialog: ParentComponent<DialogProps> = (props) => {
     "minHeight",
     "position",
     "headerStyle",
-    "headerAction",
     "canDeactivate",
     "onCloseComplete",
     "class",
     "children",
   ]);
 
+  const headerId = "dialog-header-" + createUniqueId();
+
+  const [header, _setHeader] = createSignal<SlotAccessor>();
+  const setHeader = (content: SlotAccessor) => _setHeader(() => content);
+  const [action, _setAction] = createSignal<SlotAccessor>();
+  const setAction = (content: SlotAccessor) => _setAction(() => content);
+  const hasHeader = () => header() !== undefined;
+
   const [open, setOpen] = createControllableSignal({
     value: () => local.open ?? false,
     onChange: () => local.onOpenChange,
@@ -185,8 +222,8 @@ export const Dialog: ParentComponent<DialogProps> = (props) => {
   // dialog ref
   let dialogRef: HTMLDivElement | undefined;
 
-  // wrapper ref
-  let wrapperRef: HTMLDivElement | undefined;
+  // wrapper ref (signal로 관리하여 Portal ref 타이밍 보장)
+  const [wrapperRef, setWrapperRef] = createSignal<HTMLDivElement>();
 
   const closeOnEscape = () => local.closeOnEscape ?? dialogDefaults?.().closeOnEscape ?? true;
   const closeOnBackdrop = () =>
@@ -210,11 +247,10 @@ export const Dialog: ParentComponent<DialogProps> = (props) => {
   // 열릴 때 등록, 닫힐 때 해제
   createEffect(() => {
     if (!open()) return;
-    if (!wrapperRef) return;
-    registerDialog(wrapperRef);
-    onCleanup(() => {
-      if (wrapperRef) unregisterDialog(wrapperRef);
-    });
+    const el = wrapperRef();
+    if (!el) return;
+    registerDialog(el);
+    onCleanup(() => unregisterDialog(el));
   });
 
   // 닫기 시도 (canDeactivate 체크)
@@ -244,21 +280,22 @@ export const Dialog: ParentComponent<DialogProps> = (props) => {
 
   // z-index 자동 관리
   const handleDialogFocus = () => {
-    if (!wrapperRef) return;
-    bringToFront(wrapperRef);
+    const el = wrapperRef();
+    if (!el) return;
+    bringToFront(el);
   };
 
   // 드래그 이동
   const handleHeaderPointerDown = (event: PointerEvent) => {
     // movable 기본값은 true
     if (local.movable === false) return;
-    if (!dialogRef || !wrapperRef) return;
+    const wrapperEl = wrapperRef();
+    if (!dialogRef || !wrapperEl) return;
     // 닫기 버튼 등 인터랙티브 요소에서 시작된 이벤트는 드래그로 처리하지 않음
     if ((event.target as HTMLElement).closest("button")) return;
 
     const target = event.currentTarget as HTMLElement;
     const dialogEl = dialogRef;
-    const wrapperEl = wrapperRef;
 
     const startX = event.clientX;
     const startY = event.clientY;
@@ -445,92 +482,93 @@ export const Dialog: ParentComponent<DialogProps> = (props) => {
   return (
     <Show when={mounted()}>
       <Portal>
-        <div
-          ref={(el) => {
-            wrapperRef = el;
-          }}
-          data-modal
-          class={wrapperClass()}
-        >
-          {/* 백드롭 */}
-          <Show when={!local.float}>
-            <div data-modal-backdrop class={backdropClass()} onClick={handleBackdropClick} />
-          </Show>
-
-          {/* 다이얼로그 */}
-          <div
-            ref={(el) => {
-              dialogRef = el;
-            }}
-            data-modal-dialog
-            role="dialog"
-            aria-modal={local.float ? undefined : true}
-            aria-label={local.title}
-            tabIndex={0}
-            class={twMerge(dialogBaseClass(), local.class)}
-            style={dialogStyle()}
-            onFocus={handleDialogFocus}
-            onTransitionEnd={handleTransitionEnd}
-          >
-            {/* 헤더 */}
-            <Show when={!local.hideHeader}>
-              <div
-                data-modal-header
-                class={clsx(headerClass(), "touch-none")}
-                style={
-                  typeof local.headerStyle === "string"
-                    ? mergeStyles(local.headerStyle)
-                    : local.headerStyle
-                }
-                onPointerDown={handleHeaderPointerDown}
-              >
-                <h5 class={clsx("flex-1", "px-4 py-2", "text-sm font-bold")}>{local.title}</h5>
-                {local.headerAction}
-                <Show when={local.closable ?? true}>
-                  <button
-                    data-modal-close
-                    type="button"
-                    class={clsx(
-                      "inline-flex items-center justify-center",
-                      "px-3 py-2",
-                      "text-base-400 dark:text-base-500",
-                      "hover:text-base-600 dark:hover:text-base-300",
-                      "cursor-pointer",
-                      "transition-colors",
-                    )}
-                    onClick={handleCloseClick}
-                  >
-                    <Icon icon={IconX} size="1.25em" />
-                  </button>
-                </Show>
-              </div>
+        <DialogSlotsContext.Provider value={{ setHeader, setAction }}>
+          <div ref={setWrapperRef} data-modal class={wrapperClass()}>
+            {/* 백드롭 */}
+            <Show when={!local.float}>
+              <div data-modal-backdrop class={backdropClass()} onClick={handleBackdropClick} />
             </Show>
 
-            {/* 콘텐츠 */}
-            <div data-modal-content class={dialogContentClass}>
-              {local.children}
-            </div>
+            {/* 다이얼로그 */}
+            <div
+              ref={(el) => {
+                dialogRef = el;
+              }}
+              data-modal-dialog
+              role="dialog"
+              aria-modal={local.float ? undefined : true}
+              aria-labelledby={hasHeader() ? headerId : undefined}
+              tabIndex={0}
+              class={twMerge(dialogBaseClass(), local.class)}
+              style={dialogStyle()}
+              onFocus={handleDialogFocus}
+              onTransitionEnd={handleTransitionEnd}
+            >
+              {/* 헤더 */}
+              <Show when={hasHeader()}>
+                <div
+                  data-modal-header
+                  class={clsx(headerClass(), "touch-none")}
+                  style={
+                    typeof local.headerStyle === "string"
+                      ? mergeStyles(local.headerStyle)
+                      : local.headerStyle
+                  }
+                  onPointerDown={handleHeaderPointerDown}
+                >
+                  <h5 id={headerId} class={clsx("flex-1", "px-4 py-2", "text-sm font-bold")}>
+                    {header()!()}
+                  </h5>
+                  <Show when={action()}>{action()!()}</Show>
+                  <Show when={local.closable ?? true}>
+                    <button
+                      data-modal-close
+                      type="button"
+                      class={clsx(
+                        "inline-flex items-center justify-center",
+                        "px-3 py-2",
+                        "text-base-400 dark:text-base-500",
+                        "hover:text-base-600 dark:hover:text-base-300",
+                        "cursor-pointer",
+                        "transition-colors",
+                      )}
+                      onClick={handleCloseClick}
+                    >
+                      <Icon icon={IconX} size="1.25em" />
+                    </button>
+                  </Show>
+                </div>
+              </Show>
+
+              {/* 콘텐츠 */}
+              <div data-modal-content class={dialogContentClass}>
+                {local.children}
+              </div>
 
-            {/* 리사이즈 바 */}
-            <Show when={local.resizable}>
-              <For each={RESIZE_DIRECTIONS}>
-                {(direction) => (
-                  <div
-                    data-resize-bar={direction}
-                    class={clsx(
-                      "absolute",
-                      "touch-none",
-                      resizePositionMap[direction],
-                      resizeCursorMap[direction],
-                    )}
-                    onPointerDown={(e) => handleResizeBarPointerDown(e, direction)}
-                  />
-                )}
-              </For>
-            </Show>
+              {/* 리사이즈 바 */}
+              <Show when={local.resizable}>
+                <For each={RESIZE_DIRECTIONS}>
+                  {(direction) => (
+                    <div
+                      data-resize-bar={direction}
+                      class={clsx(
+                        "absolute",
+                        "touch-none",
+                        resizePositionMap[direction],
+                        resizeCursorMap[direction],
+                      )}
+                      onPointerDown={(e) => handleResizeBarPointerDown(e, direction)}
+                    />
+                  )}
+                </For>
+              </Show>
+            </div>
           </div>
-        </div>
+        </DialogSlotsContext.Provider>
       </Portal>
     </Show>
   );
 };
+
+Dialog.Header = DialogHeader;
+Dialog.Action = DialogAction;

package/src/components/disclosure/DialogContext.ts

@@ -13,10 +13,8 @@ export const DialogDefaultsContext = createContext<Accessor<DialogDefaults>>();
 
 /** 프로그래매틱 다이얼로그 옵션 */
 export interface DialogShowOptions {
-  /** 다이얼로그 제목 */
-  title: string;
-  /** 헤더 숨김 */
-  hideHeader?: boolean;
+  /** 다이얼로그 헤더 */
+  header?: JSX.Element;
   /** 닫기 버튼 표시 */
   closable?: boolean;
   /** 백드롭 클릭으로 닫기 */

package/src/components/disclosure/DialogProvider.tsx

@@ -3,6 +3,7 @@ import {
   type ParentComponent,
   createSignal,
   For,
+  Show,
   splitProps,
   type JSX,
 } from "solid-js";
@@ -115,8 +116,6 @@ export const DialogProvider: ParentComponent<DialogProviderProps> = (props) => {
                   }
                 }}
                 onCloseComplete={() => removeEntry(entry.id)}
-                title={entry.options.title}
-                hideHeader={entry.options.hideHeader}
                 closable={entry.options.closable}
                 closeOnBackdrop={entry.options.closeOnBackdrop}
                 closeOnEscape={entry.options.closeOnEscape}
@@ -132,6 +131,9 @@ export const DialogProvider: ParentComponent<DialogProviderProps> = (props) => {
                 headerStyle={entry.options.headerStyle}
                 canDeactivate={entry.options.canDeactivate}
               >
+                <Show when={entry.options.header !== undefined}>
+                  <Dialog.Header>{entry.options.header}</Dialog.Header>
+                </Show>
                 <DialogInstanceContext.Provider value={instance}>
                   {entry.factory()}
                 </DialogInstanceContext.Provider>