@wipco/sdui 0.18.1 → 0.19.0

package/dist/{DatePicker-BndreCPl.d.ts → DatePicker-CPD2cfmG.d.ts}

@@ -2,7 +2,7 @@ import { S as SduiBoxProps } from './layout-B1QrIBm6.js';
 import React__default from 'react';
 
 interface DatePickerProps {
-    /** 선택된 날짜 (YYYY-MM-DD). 주어지면 controlled로 동작. */
+    /** 선택된 날짜 (YYYY-MM-DD, `withTime`이면 YYYY-MM-DDTHH:mm). 주어지면 controlled로 동작. */
     value?: string;
     onChange?: (value: string) => void;
     /** 선택 가능 최소 날짜 (YYYY-MM-DD, 포함). */
@@ -13,10 +13,22 @@ interface DatePickerProps {
     invalid?: boolean;
     disabled?: boolean;
     size?: 'sm' | 'md' | 'lg';
+    /**
+     * 시각까지 받는다 — 값이 `YYYY-MM-DDTHH:mm`이 된다(`<input type="datetime-local">`과
+     * 같은 모양이라 서버로 가는 문자열은 그대로다). 칸에는 `2026-08-18 14:30`으로 보인다.
+     */
+    withTime?: boolean;
 }
 interface DateRangeValue {
     from?: string;
     to?: string;
+    /**
+     * 시작·종료일이 모두 정해지면 함께 실리는 **양끝 포함** 총 일수
+     * (`round((to-from)/86400000)+1`). SDUI `$calc`에는 날짜 연산이 없어 스펙이
+     * "총 N일" 배지를 그리려면 위젯이 일수를 값에 실어 줘야 한다. 서버 폼 제출에는
+     * 잉여 키로 무시된다.
+     */
+    days?: number;
 }
 interface DateRangePickerProps {
     /** 선택된 기간 (YYYY-MM-DD). 주어지면 controlled로 동작. */
@@ -26,6 +38,7 @@ interface DateRangePickerProps {
     max?: string;
     invalid?: boolean;
     disabled?: boolean;
+    size?: 'sm' | 'md' | 'lg';
 }
 /** 바깥에서 온 `style`·`className`을 뿌리에 얹어 내보낸다. 까닭은 {@link ./boxed.tsx}에 있다. */
 declare const DatePicker: React__default.FC<DatePickerProps & SduiBoxProps>;

package/dist/{chunk-J532YYGP.js → chunk-4IJGZ2TV.js}

@@ -1,5 +1,5 @@
-import { resolveTreeNodes, TreeView } from './chunk-PYSTET2C.js';
-import { OverlayLayer } from './chunk-XQPTSEJC.js';
+import { resolveTreeNodes, TreeView } from './chunk-5H5DSIQW.js';
+import { OverlayLayer } from './chunk-L6HNC4B5.js';
 import { Field, Dialog, Icon, Button, Input } from './chunk-WIDDHR7L.js';
 import { boxed } from './chunk-SAN4IX6N.js';
 import { useState, useMemo, useEffect } from 'react';

package/dist/{chunk-PYSTET2C.js → chunk-5H5DSIQW.js}

@@ -1,4 +1,4 @@
-import { buildCascadingTree } from './chunk-GZB6YLUI.js';
+import { buildCascadingTree } from './chunk-VAXBRGDZ.js';
 import { Input, IconButton, EmptyState, Icon, Badge } from './chunk-WIDDHR7L.js';
 import { boxed } from './chunk-SAN4IX6N.js';
 import React, { useMemo, useState, useRef, useEffect } from 'react';

package/dist/{chunk-3MS4UWWZ.js → chunk-6KGO2PO4.js}

@@ -1,4 +1,4 @@
-import { includesLooseSearch } from './chunk-GZB6YLUI.js';
+import { includesLooseSearch } from './chunk-VAXBRGDZ.js';
 import { Icon, Button, Input, Spinner } from './chunk-WIDDHR7L.js';
 import { boxed } from './chunk-SAN4IX6N.js';
 import { useId, useRef, useState, useEffect, useMemo } from 'react';
@@ -66,6 +66,17 @@ function AutocompleteFieldImpl({
   const [results, setResults] = useState([]);
   const [activeIndex, setActiveIndex] = useState(0);
   const [focusPending, setFocusPending] = useState(false);
+  const listRef = useRef(null);
+  useEffect(() => {
+    if (!open) return;
+    const box = listRef.current;
+    const active = box?.querySelector(`#${CSS.escape(`${listId}-opt-${activeIndex}`)}`);
+    if (!box || !active) return;
+    const top = active.offsetTop;
+    const bottom = top + active.offsetHeight;
+    if (top < box.scrollTop) box.scrollTop = top;
+    else if (bottom > box.scrollTop + box.clientHeight) box.scrollTop = bottom - box.clientHeight;
+  }, [open, activeIndex, listId, results]);
   useEffect(() => {
     if (disabled || hasSelection) return;
     const keyword = query.trim();
@@ -235,9 +246,15 @@ function AutocompleteFieldImpl({
       "div",
       {
         id: listId,
+        ref: listRef,
         role: "listbox",
         className: "erp-popover__body",
-        style: { maxHeight: 280, padding: "var(--wp-space-1)" },
+        style: {
+          maxHeight: 280,
+          overflowY: "auto",
+          overscrollBehavior: "contain",
+          padding: "var(--wp-space-1)"
+        },
         children: status === "loading" ? /* @__PURE__ */ jsx("div", { className: "wp-row", style: statusRowStyle, children: /* @__PURE__ */ jsx(Spinner, { size: "sm", label: "\uAC80\uC0C9 \uC911\u2026" }) }) : status === "offline" ? /* @__PURE__ */ jsxs("div", { className: "wp-row", style: statusRowStyle, children: [
           /* @__PURE__ */ jsx(Icon, { name: "unplug", size: 16, style: { color: "var(--wp-text-muted)", flex: "none" } }),
           /* @__PURE__ */ jsx("span", { className: "wp-caption", children: "\uBC31\uC5D4\uB4DC \uBBF8\uC5F0\uB3D9 \u2014 \uAC80\uC0C9 \uACB0\uACFC\uB97C \uBD88\uB7EC\uC62C \uC218 \uC5C6\uC2B5\uB2C8\uB2E4" })

package/dist/{chunk-M3TDEPD2.js → chunk-ACZHPPGA.js}

@@ -1,4 +1,5 @@
-import { SegmentedControl, Select, Input } from './chunk-WIDDHR7L.js';
+import { DateRangePicker } from './chunk-L6HNC4B5.js';
+import { SegmentedControl, Select } from './chunk-WIDDHR7L.js';
 import { boxed } from './chunk-SAN4IX6N.js';
 import { useState, useMemo } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
@@ -142,15 +143,11 @@ function PeriodFilterImpl({ value, onChange, years, modes }) {
     if (period.year !== void 0 && !base.includes(period.year)) base.push(period.year);
     return base.sort((a, b) => b - a).map((y) => ({ value: String(y), label: `${y}\uB144` }));
   }, [years, period.year]);
-  const handleFromChange = (from) => {
-    if (!isIsoDate(from)) return;
-    const to = period.to !== void 0 && period.to >= from ? period.to : from;
-    emit({ mode: "custom", from, to });
-  };
-  const handleToChange = (to) => {
-    if (!isIsoDate(to)) return;
-    const from = period.from !== void 0 && period.from <= to ? period.from : to;
-    emit({ mode: "custom", from, to });
+  const handleRangeChange = (next) => {
+    const from = next.from ?? next.to;
+    const to = next.to ?? next.from;
+    if (!isIsoDate(from) || !isIsoDate(to)) return;
+    emit({ mode: "custom", from, to: to >= from ? to : from });
   };
   return /* @__PURE__ */ jsxs(
     "div",
@@ -210,7 +207,7 @@ function PeriodFilterImpl({ value, onChange, years, modes }) {
             onChange: (e) => emit(normalizePeriod({ ...period, month: Number(e.target.value) }))
           }
         ) }) : null,
-        period.mode === "custom" ? /* @__PURE__ */ jsxs(
+        period.mode === "custom" ? /* @__PURE__ */ jsx(
           "span",
           {
             style: {
@@ -219,29 +216,13 @@ function PeriodFilterImpl({ value, onChange, years, modes }) {
               gap: "var(--wp-space-1)",
               flex: "none"
             },
-            children: [
-              /* @__PURE__ */ jsx("span", { style: { width: 148, flex: "none" }, children: /* @__PURE__ */ jsx(
-                Input,
-                {
-                  type: "date",
-                  "aria-label": "\uC2DC\uC791\uC77C",
-                  value: period.from ?? "",
-                  max: period.to,
-                  onChange: (e) => handleFromChange(e.target.value)
-                }
-              ) }),
-              /* @__PURE__ */ jsx("span", { style: { color: "var(--wp-text-subtle)" }, "aria-hidden": true, children: "~" }),
-              /* @__PURE__ */ jsx("span", { style: { width: 148, flex: "none" }, children: /* @__PURE__ */ jsx(
-                Input,
-                {
-                  type: "date",
-                  "aria-label": "\uC885\uB8CC\uC77C",
-                  value: period.to ?? "",
-                  min: period.from,
-                  onChange: (e) => handleToChange(e.target.value)
-                }
-              ) })
-            ]
+            children: /* @__PURE__ */ jsx("span", { style: { width: 320, flex: "none" }, children: /* @__PURE__ */ jsx(
+              DateRangePicker,
+              {
+                value: { from: period.from, to: period.to },
+                onChange: handleRangeChange
+              }
+            ) })
           }
         ) : null
       ]