@wipco/sdui 1.5.0 → 1.6.1

package/dist/{DatePicker-C_TT_SOw.d.ts → DatePicker-DX9juElE.d.ts}

@@ -1,4 +1,4 @@
-import { S as SduiBoxProps } from './layout-C3nRXMwb.js';
+import { S as SduiBoxProps } from './layout-DmRikwZb.js';
 import React__default from 'react';
 
 interface TimePickerProps {
@@ -57,6 +57,15 @@ interface DatePickerProps {
      * 같은 모양이라 서버로 가는 문자열은 그대로다). 칸에는 `2026-08-18 14:30`으로 보인다.
      */
     withTime?: boolean;
+    /**
+     * 값을 **시간대를 붙여** 돌려준다(`withTime` 전용) — `2026-07-03T01:00:00+09:00`.
+     *
+     * 생략하면 들어온 값에 시간대가 붙어 있을 때만 붙인다(서버가 준 timestamptz 를 고치는 수정
+     * 창). 새로 입력하는 등록 창은 들어온 값이 없어 시간대 없는 `YYYY-MM-DDTHH:mm` 이 나가는데,
+     * 서버가 그것을 UTC 로 읽는 열(timestamptz)이면 9시간 어긋나 저장된다 — 그런 칸은 `true`
+     * 로 켠다. 시간대 없는 값만 받는 서버(벽시계 문자열을 직접 파싱하는 곳)는 켜지 않는다.
+     */
+    zoned?: boolean;
     /** 표시 로캘(요일·캡션·낭독 라벨·주 시작 요일). 기본 한국어·일요일 시작. 값 계약은 불변. */
     locale?: DatePickerLocale;
 }

package/dist/{chunk-7P7N43JV.js → chunk-34BABTH4.js}

@@ -1,5 +1,5 @@
-import { IconButton, Input } from './chunk-RNOUXUBO.js';
-import { boxed } from './chunk-5WW4MBRO.js';
+import { IconButton, Input } from './chunk-YYAGE733.js';
+import { boxed } from './chunk-3JTBOABA.js';
 import { useState, useRef, useEffect, useCallback } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 

package/dist/{chunk-DMLDKW7K.js → chunk-37BNG4DT.js}

@@ -1,4 +1,4 @@
-import { boxed } from './chunk-5WW4MBRO.js';
+import { boxed } from './chunk-3JTBOABA.js';
 import { useSyncExternalStore } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 

package/dist/{chunk-5WW4MBRO.js → chunk-3JTBOABA.js}

@@ -133,8 +133,12 @@ var LAYOUT_CSS = `
 .wp-grid--1{grid-template-columns:minmax(0,1fr)}
 .wp-grid--5{grid-template-columns:repeat(5,minmax(0,1fr))}
 .wp-grid--6{grid-template-columns:repeat(6,minmax(0,1fr))}
-@media (max-width:900px){.wp-grid--5,.wp-grid--6{grid-template-columns:repeat(2,minmax(0,1fr))}}
-@media (max-width:600px){.wp-grid--5,.wp-grid--6{grid-template-columns:minmax(0,1fr)}}
+.wp-grid--custom{grid-template-columns:var(--wp-grid-template)}
+@media screen and (max-width:1023.98px){.wp-grid--5:where(:not(.wp-grid--nocollapse)),.wp-grid--6:where(:not(.wp-grid--nocollapse)){grid-template-columns:repeat(2,minmax(0,1fr))}}
+@media screen and (max-width:767.98px){.wp-grid--5:where(:not(.wp-grid--nocollapse)),.wp-grid--6:where(:not(.wp-grid--nocollapse)),.wp-grid--custom:where(:not(.wp-grid--nocollapse)){grid-template-columns:minmax(0,1fr)}}
+.wp-kv__v{min-width:0;overflow-wrap:anywhere}
+.wp-kv>.wp-kv__v--block{grid-column:1/-1;text-align:left;white-space:pre-wrap}
+.wp-card--interactive[role=button]:focus-visible{outline:none;box-shadow:var(--wp-ring-focus)}
 `;
 var BOXED = /* @__PURE__ */ Symbol.for("wipco.sdui.boxed");
 function apply(element, box) {

package/dist/{chunk-HBIIEYKW.js → chunk-3PCR73OC.js}

@@ -1,7 +1,7 @@
-import { includesLooseSearch } from './chunk-UV6HHFEW.js';
-import { OverlayLayer } from './chunk-XQPTSEJC.js';
-import { Button, Dialog, Input, Tag, Checkbox } from './chunk-RNOUXUBO.js';
-import { boxed } from './chunk-5WW4MBRO.js';
+import { includesLooseSearch } from './chunk-A57GKV5F.js';
+import { OverlayLayer } from './chunk-BITS7UJY.js';
+import { Button, Dialog, Input, Tag, Checkbox } from './chunk-YYAGE733.js';
+import { boxed } from './chunk-3JTBOABA.js';
 import React, { useMemo, useState } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 

package/dist/{chunk-VY7MVBSE.js → chunk-3PT5OBOU.js}

@@ -1,5 +1,5 @@
-import { ImageViewer } from './chunk-SAPBDJJQ.js';
-import { boxed } from './chunk-5WW4MBRO.js';
+import { ImageViewer } from './chunk-UZZLMPRW.js';
+import { boxed } from './chunk-3JTBOABA.js';
 import { useState } from 'react';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 

package/dist/{chunk-YVTV4ZV6.js → chunk-4YPPL7JK.js}

@@ -1,4 +1,4 @@
-import { Spinner, EmptyState } from './chunk-RNOUXUBO.js';
+import { Spinner, EmptyState } from './chunk-YYAGE733.js';
 import { useState, useEffect } from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 

package/dist/{chunk-E6ISNQK3.js → chunk-6YBSBC77.js}

@@ -1,14 +1,31 @@
-import { Button } from './chunk-RNOUXUBO.js';
-import { boxed } from './chunk-5WW4MBRO.js';
-import { useEffect } from 'react';
+import { Button } from './chunk-YYAGE733.js';
+import { boxed } from './chunk-3JTBOABA.js';
+import { useEffect, useState } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
+function canScriptCloseWindow(win) {
+  if (!win) return false;
+  try {
+    return Boolean(win.opener) || win.history.length <= 1;
+  } catch {
+    return false;
+  }
+}
 var PRINT_CSS = `
 .erp-print-shell{display:flex;flex-direction:column;align-items:center;gap:var(--wp-space-4);padding:var(--wp-space-6) var(--wp-space-4)}
-.erp-print-toolbar{display:flex;justify-content:flex-end;gap:var(--wp-space-2);width:100%;max-width:210mm}
+.erp-print-toolbar{display:flex;justify-content:flex-end;gap:var(--wp-space-2);width:100%;max-width:210mm;box-sizing:border-box}
 .erp-print-sheet{width:100%;max-width:210mm;box-sizing:border-box;background:var(--wp-surface-card);border:var(--wp-border-w) solid var(--wp-border-subtle);border-radius:var(--wp-radius-lg);box-shadow:var(--wp-shadow-lg);padding:var(--wp-space-7)}
 .erp-print-sheet table{border-collapse:collapse;width:100%}
 .erp-print-sheet th,.erp-print-sheet td{border:var(--wp-border-w) solid var(--wp-border-default);padding:var(--wp-space-1) var(--wp-space-2)}
+@media screen and (max-width:1023.98px){
+  .erp-print-sheet{padding:var(--wp-space-4)}
+}
+@media screen and (max-width:767.98px){
+  .erp-print-shell{padding:var(--wp-space-2) 0}
+  /* \uC2DC\uD2B8\uB294 \uC804\uD3ED\uC774\uC9C0\uB9CC \uB3C4\uAD6C\uC904\uC740 16px \uD648\uC744 \uC9C0\uD0A8\uB2E4 \u2014 '\uC778\uC1C4\uD558\uAE30'\uAC00 \uD654\uBA74 \uAC00\uC7A5\uC790\uB9AC\uC5D0 \uBD99\uC9C0 \uC54A\uAC8C. */
+  .erp-print-toolbar{padding-inline:var(--wp-space-4)}
+  .erp-print-sheet{padding:var(--wp-space-3);border-radius:var(--wp-radius-md);box-shadow:var(--wp-shadow-sm)}
+}
 @media print{
   @page{size:A4;margin:1cm}
   .erp-print-hidden{display:none !important}
@@ -19,17 +36,23 @@ var PRINT_CSS = `
 function PrintStyles() {
   return /* @__PURE__ */ jsx("style", { href: "erp-print", precedence: "medium", children: PRINT_CSS });
 }
-function PrintSheetImpl({ title, children, autoPrint = false }) {
+function PrintSheetImpl({ title, children, autoPrint = false, toolbar = "auto" }) {
   useEffect(() => {
     if (!autoPrint || !window.opener) return;
     const timer = window.setTimeout(() => window.print(), 500);
     return () => window.clearTimeout(timer);
   }, [autoPrint]);
+  const [closable, setClosable] = useState(false);
+  useEffect(() => {
+    setClosable(canScriptCloseWindow(typeof window === "undefined" ? void 0 : window));
+  }, []);
+  const mode = toolbar === "print" || toolbar === "none" ? toolbar : "auto";
+  const showClose = mode === "auto" && closable;
   return /* @__PURE__ */ jsxs("div", { className: "erp-print-shell", children: [
     /* @__PURE__ */ jsx(PrintStyles, {}),
-    /* @__PURE__ */ jsxs("div", { className: "erp-print-toolbar erp-print-hidden", children: [
+    mode === "none" ? null : /* @__PURE__ */ jsxs("div", { className: "erp-print-toolbar erp-print-hidden", children: [
       /* @__PURE__ */ jsx(Button, { type: "button", variant: "primary", onClick: () => window.print(), children: "\uC778\uC1C4\uD558\uAE30" }),
-      /* @__PURE__ */ jsx(Button, { type: "button", variant: "secondary", onClick: () => window.close(), children: "\uB2EB\uAE30" })
+      showClose ? /* @__PURE__ */ jsx(Button, { type: "button", variant: "secondary", onClick: () => window.close(), children: "\uB2EB\uAE30" }) : null
     ] }),
     /* @__PURE__ */ jsxs("section", { className: "erp-print-sheet", children: [
       title ? /* @__PURE__ */ jsx("h1", { className: "wp-h3", style: { margin: "0 0 var(--wp-space-5)" }, children: title }) : null,
@@ -39,4 +62,4 @@ function PrintSheetImpl({ title, children, autoPrint = false }) {
 }
 var PrintSheet = boxed(PrintSheetImpl, "PrintSheet");
 
-export { PrintSheet };
+export { PrintSheet, canScriptCloseWindow };

package/dist/{chunk-YWUDBLO6.js → chunk-7G6J6QFC.js}

@@ -1,5 +1,5 @@
-import { Badge, Checkbox, IconButton, Icon } from './chunk-RNOUXUBO.js';
-import { boxed } from './chunk-5WW4MBRO.js';
+import { Badge, Checkbox, IconButton, Icon } from './chunk-YYAGE733.js';
+import { boxed } from './chunk-3JTBOABA.js';
 import { useState, useEffect } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 

package/dist/{chunk-UV6HHFEW.js → chunk-A57GKV5F.js}

@@ -1,9 +1,28 @@
-import { DateRangePicker } from './chunk-RWSH2MBU.js';
-import { useOverlayLayer } from './chunk-XQPTSEJC.js';
-import { Input, Button, IconButton, Tag, Field, Checkbox } from './chunk-RNOUXUBO.js';
+import { DateRangePicker } from './chunk-FP32LNFK.js';
+import { useOverlayLayer } from './chunk-BITS7UJY.js';
+import { HoistedStyle } from './chunk-RIZRM7OO.js';
+import { Input, Button, IconButton, Tag, Field, Checkbox } from './chunk-YYAGE733.js';
 import { useRef, useEffect, useState, useMemo } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
+var POPOVER_CSS = ".wp-popover.wp-popover--wide{width:min(560px,80vw)}.wp-popover-inline{margin-top:var(--wp-space-2);background:var(--wp-surface-card);border:var(--wp-border-w) solid var(--wp-border-subtle);border-radius:var(--wp-radius-md)}.wp-popover-inline__body{padding:var(--wp-space-2) var(--wp-space-3)}.wp-popover-inline__foot{display:flex;align-items:center;justify-content:space-between;gap:var(--wp-space-2);padding:var(--wp-space-1) var(--wp-space-2);border-top:var(--wp-border-w) solid var(--wp-divider)}";
+function swallowNextClick() {
+  if (typeof document === "undefined") return;
+  let timer;
+  const cleanup = () => {
+    document.removeEventListener("click", swallow, true);
+    document.removeEventListener("pointerdown", cleanup, true);
+    if (timer !== void 0) clearTimeout(timer);
+  };
+  const swallow = (event) => {
+    event.stopPropagation();
+    event.preventDefault();
+    cleanup();
+  };
+  document.addEventListener("click", swallow, true);
+  document.addEventListener("pointerdown", cleanup, true);
+  timer = setTimeout(cleanup, 800);
+}
 function Popover({
   open,
   onClose,
@@ -11,6 +30,8 @@ function Popover({
   footer,
   alignLeft = true,
   width,
+  wide = false,
+  inline = false,
   children
 }) {
   const hostRef = useRef(null);
@@ -22,23 +43,60 @@ function Popover({
       if (event.target instanceof Node && hostRef.current?.contains(event.target)) return;
       closeRef.current();
     };
-    document.addEventListener("pointerdown", closeOnOutside);
+    const type = inline ? "click" : "pointerdown";
+    document.addEventListener(type, closeOnOutside);
     return () => {
-      document.removeEventListener("pointerdown", closeOnOutside);
+      document.removeEventListener(type, closeOnOutside);
     };
-  }, [open]);
+  }, [open, inline]);
   useOverlayLayer(open, () => closeRef.current(), hostRef);
+  if (inline) {
+    return /* @__PURE__ */ jsxs("div", { ref: hostRef, className: "wp-popover-host erp-popover-host", children: [
+      /* @__PURE__ */ jsx(HoistedStyle, { id: "wp-popover", css: POPOVER_CSS }),
+      trigger,
+      open ? /* @__PURE__ */ jsxs("div", { className: "wp-popover-inline", children: [
+        /* @__PURE__ */ jsx("div", { className: "wp-popover-inline__body", children }),
+        footer ? /* @__PURE__ */ jsx("div", { className: "wp-popover-inline__foot", children: footer }) : null
+      ] }) : null
+    ] });
+  }
   return (
     // 트리거와 패널을 함께 감싸는 기준 상자 — .wp-popover-host의 position:relative가
     // 패널 absolute의 기준이 된다
     /* @__PURE__ */ jsxs("div", { ref: hostRef, className: "wp-popover-host erp-popover-host", children: [
+      /* @__PURE__ */ jsx(HoistedStyle, { id: "wp-popover", css: POPOVER_CSS }),
       trigger,
+      open ? (
+        /*
+         * 딤 막 — 패널의 형제. 데스크톱에서는 크기 0 인 빈 칸이다(규칙 없음). 모바일에서
+         * 소비자 CSS 가 화면을 덮는 딤으로 그리면(하단 시트) 바깥 탭이 여기에 떨어진다:
+         * 닫고, 같은 탭의 click 이 밑의 행으로 새지 않게 삼킨다. 호스트 안이라 문서 바깥
+         * 닫기 리스너는 이 탭을 무시한다 — 닫기는 여기서 한 번만 한다.
+         */
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "wp-popover-backdrop",
+            "aria-hidden": "true",
+            onPointerDown: () => {
+              swallowNextClick();
+              closeRef.current();
+            }
+          }
+        )
+      ) : null,
       open ? (
         // 기본은 오른쪽 기준(.wp-popover), --left가 붙으면 왼쪽 기준으로 뒤집힌다
         /* @__PURE__ */ jsxs(
           "div",
           {
-            className: alignLeft ? "wp-popover wp-popover--left erp-popover erp-popover--left" : "wp-popover erp-popover",
+            className: [
+              "wp-popover",
+              alignLeft ? "wp-popover--left" : null,
+              wide ? "wp-popover--wide" : null,
+              "erp-popover",
+              alignLeft ? "erp-popover--left" : null
+            ].filter(Boolean).join(" "),
             style: width ? { width } : void 0,
             children: [
               /* @__PURE__ */ jsx("div", { className: "wp-popover__body erp-popover__body", children }),
@@ -311,7 +369,7 @@ function SearchToolbar({
                 open,
                 onClose: () => setOpen(false),
                 alignLeft: false,
-                width: "min(560px, 80vw)",
+                wide: true,
                 trigger: (
                   // 검색 입력창 옆에 나란히 서는 자리라 테두리가 있어야 한 덩어리로 읽힌다.
                   // 열린 상태는 인라인 배경이 아니라 pressed(aria-pressed 틴트)로 알린다.
@@ -425,32 +483,37 @@ function MultiSelectInput({
     const next = checked ? [...selected, value] : selected.filter((item) => item !== value);
     onChange({ [field.key]: joinMultiValue(next) });
   };
-  return /* @__PURE__ */ jsx(
-    Popover,
-    {
-      open,
-      onClose: () => setOpen(false),
-      trigger: /* @__PURE__ */ jsx(
-        Button,
-        {
-          type: "button",
-          variant: "secondary",
-          block: true,
-          iconEnd: "chevron-down",
-          onClick: () => setOpen((value) => !value),
-          children: multiSelectLabel(field, selected)
-        }
-      ),
-      children: /* @__PURE__ */ jsx("div", { className: "wp-col", style: { maxHeight: "min(320px, 40vh)", overflowY: "auto" }, children: field.options.map((option) => /* @__PURE__ */ jsx(
-        Checkbox,
-        {
-          label: option.label,
-          checked: selected.includes(option.value),
-          onChange: (e) => toggle(option.value, e.target.checked)
-        },
-        option.value
-      )) })
-    }
+  return (
+    // 상세검색 패널 안의 목록이라 제자리에서 펼친다 — 떠 있으면 패널의 '적용' 버튼을 덮는다
+    /* @__PURE__ */ jsx(
+      Popover,
+      {
+        open,
+        onClose: () => setOpen(false),
+        inline: true,
+        trigger: /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            variant: "secondary",
+            block: true,
+            iconEnd: open ? "chevron-up" : "chevron-down",
+            "aria-expanded": open,
+            onClick: () => setOpen((value) => !value),
+            children: multiSelectLabel(field, selected)
+          }
+        ),
+        children: /* @__PURE__ */ jsx("div", { className: "wp-col", style: { maxHeight: "min(320px, 40vh)", overflowY: "auto" }, children: field.options.map((option) => /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            label: option.label,
+            checked: selected.includes(option.value),
+            onChange: (e) => toggle(option.value, e.target.checked)
+          },
+          option.value
+        )) })
+      }
+    )
   );
 }
 function uniqueCascadingOptions(options) {
@@ -570,40 +633,38 @@ function CascadingLevelSelect({
 }) {
   const [open, setOpen] = useState(false);
   const selectedSet = new Set(selectedValues);
-  return /* @__PURE__ */ jsx(
-    Popover,
-    {
-      open,
-      onClose: () => setOpen(false),
-      trigger: /* @__PURE__ */ jsx(
-        Button,
-        {
-          type: "button",
-          variant: "secondary",
-          block: true,
-          iconEnd: "chevron-down",
-          onClick: () => setOpen((value) => !value),
-          children: cascadingLevelLabel(selectedValues, allLabel, pathMap, showPathLabels)
-        }
-      ),
-      footer: /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "xs", icon: "refresh-cw", onClick: onClear, children: allLabel }),
-      children: /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: "wp-col",
-          style: { minWidth: 200, maxHeight: "min(320px, 40vh)", overflowY: "auto" },
-          children: options.map((option) => /* @__PURE__ */ jsx(
-            Checkbox,
-            {
-              label: cascadingOptionLabel(option, pathMap, showPathLabels),
-              checked: selectedSet.has(option.value),
-              onChange: (e) => onToggle(option, e.target.checked)
-            },
-            option.value
-          ))
-        }
-      )
-    }
+  return (
+    // 상세검색 패널 안의 목록이라 제자리에서 펼친다(MultiSelectInput 과 같은 이유)
+    /* @__PURE__ */ jsx(
+      Popover,
+      {
+        open,
+        onClose: () => setOpen(false),
+        inline: true,
+        trigger: /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            variant: "secondary",
+            block: true,
+            iconEnd: open ? "chevron-up" : "chevron-down",
+            "aria-expanded": open,
+            onClick: () => setOpen((value) => !value),
+            children: cascadingLevelLabel(selectedValues, allLabel, pathMap, showPathLabels)
+          }
+        ),
+        footer: /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "xs", icon: "refresh-cw", onClick: onClear, children: allLabel }),
+        children: /* @__PURE__ */ jsx("div", { className: "wp-col", style: { maxHeight: "min(320px, 40vh)", overflowY: "auto" }, children: options.map((option) => /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            label: cascadingOptionLabel(option, pathMap, showPathLabels),
+            checked: selectedSet.has(option.value),
+            onChange: (e) => onToggle(option, e.target.checked)
+          },
+          option.value
+        )) })
+      }
+    )
   );
 }
 

package/dist/{chunk-I45EUZC6.js → chunk-AJ3KDBEE.js}

@@ -1,5 +1,5 @@
-import { Icon } from './chunk-RNOUXUBO.js';
-import { boxed } from './chunk-5WW4MBRO.js';
+import { Icon } from './chunk-YYAGE733.js';
+import { boxed } from './chunk-3JTBOABA.js';
 import { useRef, useState, useEffect } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
@@ -17,6 +17,8 @@ var SECURE_CSS = `
 @media print{
   .erp-secure--enabled .erp-secure__content{display:none !important}
   .erp-secure--enabled .erp-secure__print-warning{display:flex !important;position:static;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;color:inherit;cursor:default}
+  /* \uBB38\uAD6C\uB294 \uD654\uBA74\uC6A9 \uBC18\uC804\uC0C9(\uD770 \uAE00\uC790)\uC744 \uB530\uB85C \uB4E4\uACE0 \uC788\uB2E4 \u2014 \uC885\uC774\uC5D0\uC11C\uB294 \uCEE8\uD14C\uC774\uB108 \uAE00\uC790\uC0C9\uC744 \uB530\uB77C\uC57C \uC77D\uD78C\uB2E4 */
+  .erp-secure--enabled .erp-secure__print-warning .erp-secure__cover-notice{color:inherit}
 }
 `;
 function SecureStyles() {