@sellmate/design-system-react 1.0.55 → 1.0.57

package/dist/components/components.server.js

@@ -9,10 +9,7 @@ import { createComponent } from '@stencil/react-output-target/ssr';
 export const serializeShadowRoot = { default: "declarative-shadow-dom" };
 export const SdActionModal = /*@__PURE__*/ createComponent({
     tagName: 'sd-action-modal',
-    properties: {
-        modalTitle: 'modal-title',
-        buttonLabel: 'button-label'
-    },
+    properties: { modalTitle: 'modal-title' },
     hydrateModule: import('@sellmate/design-system/hydrate'),
     clientModule: clientComponents.SdActionModal,
     serializeShadowRoot,

package/dist/sdModal.d.ts

@@ -1,5 +1,5 @@
 import { type ComponentType } from 'react';
-import { type ConfirmModalOptions, type ModalDialogChain, type SdModalCreateOption as CoreSdModalCreateOption, type SdModalGlobalOptions } from '@sellmate/design-system/utils';
+import { type ConfirmModalOptions, type ModalDialogRef, type SdModalCreateOption as CoreSdModalCreateOption, type SdModalGlobalOptions } from '@sellmate/design-system/utils';
 /**
  * `sdModal.create` 에 넘기는 입력.
  *
@@ -28,8 +28,8 @@ export interface SdModalCreateOption extends Omit<CoreSdModalCreateOption, 'comp
  * 감싸주세요.
  */
 export declare const sdModal: {
-    confirm(options: ConfirmModalOptions): ModalDialogChain;
+    confirm(options: ConfirmModalOptions): ModalDialogRef;
     configure(options: SdModalGlobalOptions): void;
-    create(input: SdModalCreateOption): ModalDialogChain;
+    create(input: SdModalCreateOption): ModalDialogRef;
 };
 export default sdModal;

package/dist/sdModal.js

@@ -2,7 +2,7 @@
 import { createElement } from 'react';
 import { flushSync } from 'react-dom';
 import { createRoot } from 'react-dom/client';
-import { sdModal as coreSdModal, } from '@sellmate/design-system/utils';
+import { sdModal as coreSdModal, _createSdModalRef, _attachSdModalWithRef, } from '@sellmate/design-system/utils';
 function isHTMLElement(value) {
     return typeof HTMLElement !== 'undefined' && value instanceof HTMLElement;
 }
@@ -47,14 +47,18 @@ export const sdModal = {
         if (isHTMLElement(component)) {
             return coreSdModal.create({ component, persist });
         }
-        // React 컴포넌트 오버로드
-        const { el, host, root } = mountReactComponent(component, componentProps);
-        const chain = coreSdModal.create({ component: el, persist });
-        chain.onDismissed(() => {
+        // React 컴포넌트 오버로드 — modalRef 를 먼저 만들어 props 에 주입한 뒤 mount
+        const modalRef = _createSdModalRef();
+        const { el, host, root } = mountReactComponent(component, {
+            ...componentProps,
+            modalRef,
+        });
+        _attachSdModalWithRef(modalRef, { component: el, persist });
+        modalRef.onDismissed(() => {
             root.unmount();
             host.remove();
         });
-        return chain;
+        return modalRef;
     },
 };
 export default sdModal;

package/lib/components/components.server.ts

@@ -74,10 +74,7 @@ export type SdActionModalEvents = {
 
 export const SdActionModal: StencilReactComponent<SdActionModalElement, SdActionModalEvents> = /*@__PURE__*/ createComponent<SdActionModalElement, SdActionModalEvents>({
     tagName: 'sd-action-modal',
-    properties: {
-        modalTitle: 'modal-title',
-        buttonLabel: 'button-label'
-    },
+    properties: { modalTitle: 'modal-title' },
     hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
     clientModule: clientComponents.SdActionModal as ReactWebComponent<SdActionModalElement, SdActionModalEvents>,
     serializeShadowRoot,

package/lib/sdModal.ts

@@ -5,8 +5,10 @@ import { flushSync } from 'react-dom';
 import { createRoot, type Root } from 'react-dom/client';
 import {
   sdModal as coreSdModal,
+  _createSdModalRef,
+  _attachSdModalWithRef,
   type ConfirmModalOptions,
-  type ModalDialogChain,
+  type ModalDialogRef,
   type SdModalCreateOption as CoreSdModalCreateOption,
   type SdModalGlobalOptions,
 } from '@sellmate/design-system/utils';
@@ -68,7 +70,7 @@ function mountReactComponent(
  * 감싸주세요.
  */
 export const sdModal = {
-  confirm(options: ConfirmModalOptions): ModalDialogChain {
+  confirm(options: ConfirmModalOptions): ModalDialogRef {
     return coreSdModal.confirm(options);
   },
 
@@ -76,7 +78,7 @@ export const sdModal = {
     coreSdModal.configure(options);
   },
 
-  create(input: SdModalCreateOption): ModalDialogChain {
+  create(input: SdModalCreateOption): ModalDialogRef {
     const { component, componentProps = {}, persist } = input;
 
     // HTMLElement 오버로드: core 로 바로 위임
@@ -84,15 +86,19 @@ export const sdModal = {
       return coreSdModal.create({ component, persist });
     }
 
-    // React 컴포넌트 오버로드
-    const { el, host, root } = mountReactComponent(component, componentProps);
-    const chain = coreSdModal.create({ component: el, persist });
-    chain.onDismissed(() => {
+    // React 컴포넌트 오버로드 — modalRef 를 먼저 만들어 props 에 주입한 뒤 mount
+    const modalRef = _createSdModalRef();
+    const { el, host, root } = mountReactComponent(component, {
+      ...componentProps,
+      modalRef,
+    });
+    _attachSdModalWithRef(modalRef, { component: el, persist });
+    modalRef.onDismissed(() => {
       root.unmount();
       host.remove();
     });
 
-    return chain;
+    return modalRef;
   },
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@sellmate/design-system-react",
- "version": "1.0.55",
+ "version": "1.0.57",
  "description": "Design System - React Component Wrappers",
  "keywords": [
   "react",
@@ -54,7 +54,7 @@
   "dev": "tsc --watch"
  },
  "dependencies": {
-  "@sellmate/design-system": "^1.0.55",
+  "@sellmate/design-system": "^1.0.57",
   "@stencil/react-output-target": "^1.2.0"
  },
  "peerDependencies": {