@wipco/sdui 1.4.2 → 1.6.0

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-GZBY7I4Y.js → chunk-2KQL6DYG.js}

@@ -1,6 +1,6 @@
-import { buildCascadingTree } from './chunk-UV6HHFEW.js';
-import { Input, IconButton, EmptyState, Icon, Badge } from './chunk-RNOUXUBO.js';
-import { boxed } from './chunk-5WW4MBRO.js';
+import { buildCascadingTree } from './chunk-4OABUPIU.js';
+import { Input, IconButton, EmptyState, Icon, Badge } from './chunk-BLFJMMBW.js';
+import { boxed } from './chunk-3JTBOABA.js';
 import React, { useMemo, useState, useRef, useEffect } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 

package/dist/{chunk-RYBBPFI7.js → chunk-2QXA52DG.js}

@@ -1,8 +1,8 @@
 import { fetchAllJobPositions } from './chunk-XRHR452N.js';
-import { useSduiDispatch, useSduiCan, SduiDialog } from './chunk-TFGNKFL2.js';
-import { useSduiAdapter, hostFetchOf, defaultAdapter } from './chunk-KO6OEY3G.js';
-import { Card, Input, Button, Icon, Badge, IconButton } from './chunk-RNOUXUBO.js';
-import { boxed } from './chunk-5WW4MBRO.js';
+import { useSduiDispatch, useSduiCan, SduiDialog } from './chunk-CI5OZ2QT.js';
+import { useSduiAdapter, hostFetchOf, defaultAdapter } from './chunk-YNEEJCSZ.js';
+import { Card, Input, Button, Icon, Badge, IconButton } from './chunk-BLFJMMBW.js';
+import { boxed } from './chunk-3JTBOABA.js';
 import React, { useState, useEffect, useCallback, useMemo } from 'react';
 import { jsxs, jsx, Fragment } 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-UV6HHFEW.js → chunk-4OABUPIU.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-X2NIRVLN.js';
+import { useOverlayLayer } from './chunk-BITS7UJY.js';
+import { HoistedStyle } from './chunk-RIZRM7OO.js';
+import { Input, Button, IconButton, Tag, Field, Checkbox } from './chunk-BLFJMMBW.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
+        )) })
+      }
+    )
   );
 }