sellmate-design-system-react 9.0.0-beta.36 → 9.0.0-beta.38

package/dist/components/SLoadingContainer/loading.d.ts

@@ -1,10 +1,26 @@
 /** 오버레이 뷰포트 — 스토어를 구독해 SLoadingContainer 를 렌더한다. 직접 배치도 가능. */
 export declare function SLoadingViewport(): import("react").JSX.Element;
 export declare const loading: {
-    /** 로딩 오버레이 표시 (메시지 갱신도 동일 호출) */
+    /**
+     * 로딩 오버레이 표시. 겹쳐 부르면 그만큼 쌓이고 **마지막 하나가 걷힐 때** 닫힌다.
+     * 반환값은 이 호출 하나만 걷는 함수다(두 번 불러도 한 번만 걷힌다) — `hide()` 대신 이것을
+     * 쓰면 짝이 어긋나지 않는다.
+     *
+     * ⚠️ 메시지만 바꾸려면 `update()` 를 쓴다. `show()` 를 다시 부르면 하나 더 쌓여
+     * `hide()` 한 번으로는 닫히지 않는다.
+     */
     show(options?: {
         message?: string;
+    }): () => void;
+    /** 표시 중인 메시지 갱신 — 쌓인 수는 그대로다 */
+    update(options: {
+        message?: string;
     }): void;
-    /** 로딩 오버레이 숨김 */
+    /** 가장 나중의 show 하나를 걷는다. 남은 것이 없을 때만 오버레이가 닫힌다 */
     hide(): void;
+    /**
+     * 쌓인 것을 모두 걷고 즉시 닫는다. 화면 전환·에러 복구처럼 진행 중이던 작업의 짝을 더는
+     * 맞출 수 없을 때만 쓴다 — 평소에는 `hide()` 나 `show()` 가 준 함수로 하나씩 걷는다.
+     */
+    hideAll(): void;
 };

package/dist/index.cjs

@@ -6491,10 +6491,19 @@ var SLoadingContainer = /* @__PURE__ */ react.forwardRef(
 var state = { open: false, message: void 0 };
 var listeners = /* @__PURE__ */ new Set();
 var emit = () => listeners.forEach((l) => l());
-var setState = (patch) => {
-  state = { ...state, ...patch };
+var entries = [];
+var seq = 0;
+var sync = () => {
+  const top = entries[entries.length - 1];
+  state = { open: entries.length > 0, message: top?.message };
   emit();
 };
+var release = (id) => {
+  const next = entries.filter((e) => e.id !== id);
+  if (next.length === entries.length) return;
+  entries = next;
+  sync();
+};
 var subscribe = (cb) => {
   listeners.add(cb);
   return () => listeners.delete(cb);
@@ -6514,14 +6523,41 @@ function ensureMounted() {
   client.createRoot(host).render(/* @__PURE__ */ jsxRuntime.jsx(SLoadingViewport, {}));
 }
 var loading = {
-  /** 로딩 오버레이 표시 (메시지 갱신도 동일 호출) */
+  /**
+   * 로딩 오버레이 표시. 겹쳐 부르면 그만큼 쌓이고 **마지막 하나가 걷힐 때** 닫힌다.
+   * 반환값은 이 호출 하나만 걷는 함수다(두 번 불러도 한 번만 걷힌다) — `hide()` 대신 이것을
+   * 쓰면 짝이 어긋나지 않는다.
+   *
+   * ⚠️ 메시지만 바꾸려면 `update()` 를 쓴다. `show()` 를 다시 부르면 하나 더 쌓여
+   * `hide()` 한 번으로는 닫히지 않는다.
+   */
   show(options = {}) {
     ensureMounted();
-    setState({ open: true, message: options.message });
+    const id = ++seq;
+    entries = [...entries, { id, message: options.message }];
+    sync();
+    return () => release(id);
+  },
+  /** 표시 중인 메시지 갱신 — 쌓인 수는 그대로다 */
+  update(options) {
+    const top = entries[entries.length - 1];
+    if (!top) return;
+    entries = [...entries.slice(0, -1), { ...top, message: options.message }];
+    sync();
   },
-  /** 로딩 오버레이 숨김 */
+  /** 가장 나중의 show 하나를 걷는다. 남은 것이 없을 때만 오버레이가 닫힌다 */
   hide() {
-    setState({ open: false });
+    const top = entries[entries.length - 1];
+    if (top) release(top.id);
+  },
+  /**
+   * 쌓인 것을 모두 걷고 즉시 닫는다. 화면 전환·에러 복구처럼 진행 중이던 작업의 짝을 더는
+   * 맞출 수 없을 때만 쓴다 — 평소에는 `hide()` 나 `show()` 가 준 함수로 하나씩 걷는다.
+   */
+  hideAll() {
+    if (entries.length === 0) return;
+    entries = [];
+    sync();
   }
 };
 var SIZE_CONFIG = {
@@ -7940,7 +7976,7 @@ var MODAL_HOST_Z_INDEX = Z_INDEX.modalHost;
 var MODAL_HOST_ATTRIBUTE = "data-s-modal-host";
 var nextId = 0;
 var nextLayerIndex = 0;
-var entries = [];
+var entries2 = [];
 function getModalHost() {
   if (typeof document === "undefined" || !document.body) return void 0;
   const existing = document.body.querySelector(`[${MODAL_HOST_ATTRIBUTE}]`);
@@ -7961,16 +7997,16 @@ function registerModalStackEntry() {
     id: ++nextId,
     layerIndex: nextLayerIndex++
   };
-  entries.push(entry);
+  entries2.push(entry);
   let registered = true;
   return {
     layerIndex: entry.layerIndex,
-    isTop: () => entries[entries.length - 1] === entry,
+    isTop: () => entries2[entries2.length - 1] === entry,
     unregister: () => {
       if (!registered) return;
       registered = false;
-      const index = entries.indexOf(entry);
-      if (index !== -1) entries.splice(index, 1);
+      const index = entries2.indexOf(entry);
+      if (index !== -1) entries2.splice(index, 1);
     }
   };
 }
@@ -7994,8 +8030,10 @@ function SModalContainer({
   const contentRef = react.useRef(null);
   const stackRegistrationRef = react.useRef(null);
   const [layerIndex, setLayerIndex] = react.useState(null);
+  const closeRequested = react.useRef(false);
   react.useEffect(() => {
     if (open) {
+      closeRequested.current = false;
       setRendered(true);
       return;
     }
@@ -8051,7 +8089,7 @@ function SModalContainer({
           {
             forceMount: rendered ? true : void 0,
             ref: contentRef,
-            className: "pointer-events-auto outline-none data-[state=open]:animate-modal-in data-[state=closed]:animate-modal-out",
+            className: "pointer-events-auto outline-none data-[state=open]:animate-modal-in data-[state=closed]:pointer-events-none data-[state=closed]:animate-modal-out",
             style: { animationFillMode: "forwards" },
             onOpenAutoFocus: (e) => {
               e.preventDefault();
@@ -8082,6 +8120,8 @@ function SModalContainer({
                         icon: "close",
                         ariaLabel: "\uB2EB\uAE30",
                         onClick: () => {
+                          if (closeRequested.current) return;
+                          closeRequested.current = true;
                           onClose?.();
                           onOpenChange?.(false);
                         },
@@ -8155,6 +8195,16 @@ function SConfirmModal({
 }) {
   const iconName = TYPE_ICON[type];
   const mainStyle = MAIN_BUTTON_STYLE[mainButtonName ?? DEFAULT_MAIN_BUTTON[type]];
+  const [settled, setSettled] = react.useState(false);
+  react.useEffect(() => {
+    if (open) setSettled(false);
+  }, [open]);
+  const settle = (emit3) => {
+    if (settled) return;
+    setSettled(true);
+    emit3?.();
+    onOpenChange?.(false);
+  };
   const tagNode = tagSlot ?? (tagLabel ? /* @__PURE__ */ jsxRuntime.jsx(STag, { shape: tagShape, size: tagSize, color: tagColor, label: tagLabel }) : null);
   const optionNode = optionSlot ?? (slotLabel ? /* @__PURE__ */ jsxRuntime.jsx("span", { children: slotLabel }) : null);
   const hasContentBox = tagNode != null || optionNode != null;
@@ -8167,7 +8217,7 @@ function SConfirmModal({
       persistent,
       ariaTitle: modalTitle,
       showClose: true,
-      onClose,
+      onClose: () => settle(onClose),
       className: "w-fit min-w-[min(520px,calc(100dvw-48px))]",
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-h-0 flex-auto flex-col items-center gap-[40px] px-[32px] py-[40px]", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full min-h-0 flex-col items-center gap-[20px] overflow-y-auto", children: [
@@ -8217,10 +8267,8 @@ function SConfirmModal({
               color: "neutral",
               outline: true,
               size: "md",
-              onClick: () => {
-                onCancel?.();
-                onOpenChange?.(false);
-              },
+              disabled: settled,
+              onClick: () => settle(onCancel),
               label: subButtonLabel
             }
           ),
@@ -8229,10 +8277,8 @@ function SConfirmModal({
             {
               ...mainStyle,
               size: "md",
-              onClick: () => {
-                onOk?.();
-                onOpenChange?.(false);
-              },
+              disabled: settled,
+              onClick: () => settle(onOk),
               label: mainButtonLabel
             }
           )
@@ -8475,10 +8521,10 @@ function SDrawer({
   }, []);
   react.useEffect(() => {
     if (!rendered) return;
-    const sync = () => setViewportWidth(window.innerWidth);
-    sync();
-    window.addEventListener("resize", sync);
-    return () => window.removeEventListener("resize", sync);
+    const sync2 = () => setViewportWidth(window.innerWidth);
+    sync2();
+    window.addEventListener("resize", sync2);
+    return () => window.removeEventListener("resize", sync2);
   }, [rendered]);
   react.useEffect(() => {
     const panel2 = panelRef.current;
@@ -8724,7 +8770,7 @@ function SDrawer({
 
 // src/lib/modal-outlet.ts
 var EMPTY = [];
-var entries2 = EMPTY;
+var entries3 = EMPTY;
 var listeners2 = /* @__PURE__ */ new Set();
 var outletRendered = false;
 var outletCount = 0;
@@ -8739,7 +8785,7 @@ function subscribeModalEntries(listener) {
   };
 }
 function getModalEntries() {
-  return entries2;
+  return entries3;
 }
 function getServerModalEntries() {
   return EMPTY;
@@ -8758,9 +8804,9 @@ function registerModalOutlet() {
 function sweepOrphans() {
   if (outletCount > 0) return;
   outletRendered = false;
-  if (entries2 === EMPTY) return;
-  const orphans = entries2;
-  entries2 = EMPTY;
+  if (entries3 === EMPTY) return;
+  const orphans = entries3;
+  entries3 = EMPTY;
   emit2();
   for (const entry of orphans) entry.onOrphan();
 }
@@ -8772,14 +8818,14 @@ function isModalOutletMounted() {
 }
 function addModalEntry(host, node, onOrphan) {
   const id = ++nextId2;
-  entries2 = [...entries2, { id, host, node, onOrphan }];
+  entries3 = [...entries3, { id, host, node, onOrphan }];
   emit2();
   return id;
 }
 function removeModalEntry(id) {
-  const next = entries2.filter((entry) => entry.id !== id);
-  if (next.length === entries2.length) return;
-  entries2 = next;
+  const next = entries3.filter((entry) => entry.id !== id);
+  if (next.length === entries3.length) return;
+  entries3 = next;
   emit2();
 }
 var EXIT_DURATION = 300;
@@ -8820,11 +8866,22 @@ var SModalRefImpl = class {
     else this.pendingPatches.push(patch);
     return this;
   }
-  // 닫힘 트리거 — 이미 닫힘이 시작됐으면 무시(중복 콜백 방지)
-  settle(emit3) {
-    if (this.dismissRequested) return;
+  /**
+   * 확정 콜백 1회 발화 — 이미 닫힘이 시작됐으면 무시한다. 발화했으면 true.
+   *
+   * 한 번 띄운 모달의 결말은 하나다(ok 이거나 cancel 이거나 close 다). 닫힘은 시작만 하고
+   * 퇴장 애니메이션 동안 카드가 남아 있으므로, 그동안의 재클릭·키 반복이 두 번째 결말을
+   * 만들지 않도록 여기서 막는다.
+   */
+  settleEmit(emit3) {
+    if (this.dismissRequested) return false;
     this.dismissRequested = true;
     emit3();
+    return true;
+  }
+  // 닫힘 트리거 — 이미 닫힘이 시작됐으면 무시(중복 콜백 방지)
+  settle(emit3) {
+    if (!this.settleEmit(emit3)) return;
     if (this.closeBinding) this.closeBinding();
     else this.pendingClose = true;
   }
@@ -8877,17 +8934,18 @@ var SModalRefImpl = class {
   _markDismissed() {
     this.dismissRequested = true;
   }
-  /** @internal confirm 버튼 경로에서 onOk 발화 */
+  // 아래 세 경로는 컴포넌트가 스스로 닫으므로(onOpenChange(false)) 발화 가드만 태운다.
+  /** @internal confirm 버튼 경로에서 onOk 발화 (닫히는 중의 재클릭·키 반복은 무시) */
   _emitOk() {
-    this.okFn?.();
+    this.settleEmit(() => this.okFn?.());
   }
-  /** @internal confirm 버튼 경로에서 onCancel 발화 */
+  /** @internal confirm 버튼 경로에서 onCancel 발화 (닫히는 중의 재클릭·키 반복은 무시) */
   _emitCancel() {
-    this.cancelFn?.();
+    this.settleEmit(() => this.cancelFn?.());
   }
-  /** @internal 닫기(X) 경로에서 onClose 발화 */
+  /** @internal 닫기(X) 경로에서 onClose 발화 (닫히는 중의 재클릭·키 반복은 무시) */
   _emitClose() {
-    this.closeFn?.();
+    this.settleEmit(() => this.closeFn?.());
   }
   /** @internal loading 버튼 경로에서 onClick 발화 */
   _emitClick() {
@@ -9083,7 +9141,7 @@ function SModalEntryPortal({ entry }) {
 }
 function SModalOutlet() {
   markModalOutletRendered();
-  const entries3 = react.useSyncExternalStore(
+  const entries4 = react.useSyncExternalStore(
     subscribeModalEntries,
     getModalEntries,
     getServerModalEntries
@@ -9096,7 +9154,7 @@ function SModalOutlet() {
     }
     return registerModalOutlet();
   }, []);
-  return /* @__PURE__ */ jsxRuntime.jsx(PortalContainerProvider, { value: null, children: /* @__PURE__ */ jsxRuntime.jsx(InsideModalProvider, { value: false, children: entries3.map((entry) => /* @__PURE__ */ jsxRuntime.jsx(SModalEntryPortal, { entry }, entry.id)) }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(PortalContainerProvider, { value: null, children: /* @__PURE__ */ jsxRuntime.jsx(InsideModalProvider, { value: false, children: entries4.map((entry) => /* @__PURE__ */ jsxRuntime.jsx(SModalEntryPortal, { entry }, entry.id)) }) });
 }
 var useIsomorphicLayoutEffect = typeof window !== "undefined" ? react.useLayoutEffect : react.useEffect;
 var SPageColumnContext = /* @__PURE__ */ react.createContext(null);
@@ -17870,10 +17928,10 @@ var useIsMobile = () => {
   react.useEffect(() => {
     if (typeof window.matchMedia !== "function") return;
     const query = window.matchMedia(`(max-width: ${MOBILE_MAX_WIDTH - 1}px)`);
-    const sync = () => setIsMobile(query.matches);
-    sync();
-    query.addEventListener("change", sync);
-    return () => query.removeEventListener("change", sync);
+    const sync2 = () => setIsMobile(query.matches);
+    sync2();
+    query.addEventListener("change", sync2);
+    return () => query.removeEventListener("change", sync2);
   }, []);
   return isMobile;
 };
@@ -19373,9 +19431,9 @@ var keywordEntries = (value) => {
   return [];
 };
 var CSV_PASTE_SEPARATOR = /[,\r\n\t]+/;
-var newKeywordEntries = (entries3, candidates) => candidates.reduce((acc, raw) => {
+var newKeywordEntries = (entries4, candidates) => candidates.reduce((acc, raw) => {
   const next = raw.trim();
-  if (next === "" || entries3.includes(next) || acc.includes(next)) return acc;
+  if (next === "" || entries4.includes(next) || acc.includes(next)) return acc;
   return [...acc, next];
 }, []);
 var withKeywordEntries = (field, current, nextEntries) => field.matchModes ? { keywords: nextEntries, mode: isKeywordValue(current) ? current.mode : "contains" } : nextEntries;
@@ -19639,13 +19697,13 @@ var SChipFilter = /* @__PURE__ */ react.forwardRef(function SChipFilter2({
       const field = fields.find((f) => f.key === key);
       if (field == null || field.type !== "keyword" || disabled || field.disabled) return null;
       const current = valuesRef.current[key];
-      const entries3 = keywordEntries(current);
+      const entries4 = keywordEntries(current);
       const added = newKeywordEntries(
-        entries3,
+        entries4,
         field.input === "csv" ? draft.text.split(CSV_PASTE_SEPARATOR) : [draft.text]
       );
       if (added.length === 0) return null;
-      const nextValue = withKeywordEntries(field, current, [...entries3, ...added]);
+      const nextValue = withKeywordEntries(field, current, [...entries4, ...added]);
       const next = { ...valuesRef.current, [key]: nextValue };
       onValueChange?.(next);
       onFilterChange?.({ key, value: nextValue, values: next });
@@ -20666,7 +20724,7 @@ function KeywordEditor({
   onValueCommit,
   onDraftChange
 }) {
-  const entries3 = keywordEntries(value);
+  const entries4 = keywordEntries(value);
   const [draftText, setDraftText] = react.useState("");
   const [mode, setMode] = react.useState(
     isKeywordValue(value) ? value.mode : "contains"
@@ -20688,16 +20746,16 @@ function KeywordEditor({
   };
   const changeMode = (next) => {
     setMode(next);
-    emit3(entries3, next);
+    emit3(entries4, next);
   };
-  const newEntries = (candidates) => newKeywordEntries(entries3, candidates);
+  const newEntries = (candidates) => newKeywordEntries(entries4, candidates);
   const addEntry = (raw) => {
     const added = newEntries([raw]);
     if (added.length === 0) {
       setDraft("");
       return;
     }
-    commit([...entries3, ...added]);
+    commit([...entries4, ...added]);
     setDraft("");
   };
   const changeDraft = (next) => {
@@ -20708,7 +20766,7 @@ function KeywordEditor({
     const parts = next.split(",");
     const tail = parts.pop() ?? "";
     const added = newEntries(parts);
-    if (added.length > 0) commit([...entries3, ...added]);
+    if (added.length > 0) commit([...entries4, ...added]);
     setDraft(tail);
   };
   const onPaste = (event) => {
@@ -20717,11 +20775,11 @@ function KeywordEditor({
     if (!CSV_PASTE_SEPARATOR.test(text)) return;
     event.preventDefault();
     const added = newEntries((draftText + text).split(CSV_PASTE_SEPARATOR));
-    if (added.length > 0) commit([...entries3, ...added]);
+    if (added.length > 0) commit([...entries4, ...added]);
     setDraft("");
   };
   const removeEntry = (entry) => {
-    emit3(entries3.filter((e) => e !== entry));
+    emit3(entries4.filter((e) => e !== entry));
   };
   const onKeyDown = (event) => {
     if (event.key === "Enter") {
@@ -20770,12 +20828,12 @@ function KeywordEditor({
         )
       ] })
     ] }),
-    entries3.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+    entries4.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
         className: "min-h-0 flex-1 overflow-auto border-t border-solid py-[var(--cmp-chipFilter-listbox-list-paddingY)]",
         style: { borderColor: CHIPFILTER.listboxBorder },
-        children: entries3.map((entry) => /* @__PURE__ */ jsxRuntime.jsx(
+        children: entries4.map((entry) => /* @__PURE__ */ jsxRuntime.jsx(
           KeywordEntryRow,
           {
             label: optionLabel(field, entry),