@uniai-fe/uds-templates 0.3.6 → 0.3.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniai-fe/uds-templates",
-  "version": "0.3.6",
+  "version": "0.3.7",
   "description": "UNIAI Design System; UI Templates Package",
   "type": "module",
   "private": false,

package/src/modal/components/core/Container.tsx

@@ -52,7 +52,11 @@ export function ModalContainer({
 
   return (
     <ContextProvider>
-      <div className={clsx("uds-modal-container", className)}>
+      <div
+        className={clsx("uds-modal-container", className)}
+        // 변경 설명: Dialog 기본 submit 동작에서 현재 스택의 form을 조회하기 위한 식별자다.
+        data-modal-stack-key={stackKey}
+      >
         {header ? <ModalHeaderContainer>{header}</ModalHeaderContainer> : null}
         <ModalBody style={bodyStyle}>{body}</ModalBody>
         {footer ? <div className="uds-modal-footer">{footer}</div> : null}

package/src/modal/components/dialog/Template.tsx

@@ -10,6 +10,30 @@ import {
 import type { DialogTemplateOptions, ModalState } from "../../types";
 import type { FieldValues } from "react-hook-form";
 
+/**
+ * Dialog 기본 submit 핸들러 생성기
+ * - formContextOptions가 활성화되고 confirm.onClick이 비어 있을 때에만 사용한다.
+ */
+function createDialogFormSubmitHandler(stackKey: string): () => void {
+  return () => {
+    const modalContainers = document.querySelectorAll<HTMLElement>(
+      "[data-modal-stack-key]",
+    );
+    const targetContainer = Array.from(modalContainers).find(
+      container => container.dataset.modalStackKey === stackKey,
+    );
+
+    if (!targetContainer) {
+      return;
+    }
+
+    const formElement = targetContainer.querySelector("form");
+    if (formElement instanceof HTMLFormElement) {
+      formElement.requestSubmit();
+    }
+  };
+}
+
 /**
  * Modal Dialog Template; Dialog 모달 상태 생성기
  * @component
@@ -55,6 +79,16 @@ export function createDialogModal<FormContext extends FieldValues>({
   formContextOptions,
 }: DialogTemplateOptions<FormContext>): ModalState<FormContext> {
   const primary = resolveDialogPrimaryButton(confirm);
+  const hasFormContext = typeof formContextOptions !== "undefined";
+  const resolvedPrimary =
+    hasFormContext && typeof primary.onClick === "undefined"
+      ? {
+          ...primary,
+          // 변경 설명: Form.Provider가 있는 Dialog는 confirm 기본동작을 submit으로 연결하고 자동 close는 비활성화한다.
+          closeOnClick: primary.closeOnClick ?? false,
+          onClick: createDialogFormSubmitHandler(stackKey),
+        }
+      : primary;
 
   const headerNode =
     customHeader ??
@@ -71,7 +105,11 @@ export function createDialogModal<FormContext extends FieldValues>({
 
   const footerButtons = footer
     ? undefined
-    : createDialogFooterButtons({ stackKey, primary, cancel });
+    : createDialogFooterButtons({
+        stackKey,
+        primary: resolvedPrimary,
+        cancel,
+      });
 
   return {
     stackKey,