@wipco/sdui 0.19.1 → 0.19.2

package/dist/{chunk-IB4NDAYU.js → chunk-44VLH3I2.js}

@@ -1,4 +1,4 @@
-import { DateRangePicker } from './chunk-HPZUPYPK.js';
+import { DateRangePicker } from './chunk-IY7SMV6V.js';
 import { SegmentedControl, Select } from './chunk-WIDDHR7L.js';
 import { boxed } from './chunk-SAN4IX6N.js';
 import { useState, useMemo } from 'react';

package/dist/{chunk-YLYSOOVR.js → chunk-F5BAER4V.js}

@@ -1,5 +1,5 @@
-import { resolveTreeNodes, TreeView } from './chunk-BQ5ZGGW7.js';
-import { OverlayLayer } from './chunk-HPZUPYPK.js';
+import { resolveTreeNodes, TreeView } from './chunk-TUR4EBKX.js';
+import { OverlayLayer } from './chunk-IY7SMV6V.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-SUJCS7SU.js → chunk-GUFIEWW2.js}

@@ -1,4 +1,4 @@
-import { useOverlayLayer, DateRangePicker } from './chunk-HPZUPYPK.js';
+import { useOverlayLayer, DateRangePicker } from './chunk-IY7SMV6V.js';
 import { Input, Button, IconButton, Tag, Field, Checkbox } from './chunk-WIDDHR7L.js';
 import { useRef, useEffect, useState, useMemo } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';

package/dist/{chunk-HPZUPYPK.js → chunk-IY7SMV6V.js}

@@ -365,20 +365,71 @@ function Calendar({
     })
   ] }) });
 }
-function useDismiss(open, hostRef, onDismiss) {
+function useDismiss(open, hostRef, popRef, onDismiss) {
   useEffect(() => {
     if (!open) return;
     const handlePointerDown = (event) => {
-      if (event.target instanceof Node && hostRef.current?.contains(event.target)) return;
+      const target = event.target;
+      if (target instanceof Node && (hostRef.current?.contains(target) || popRef.current?.contains(target))) return;
       onDismiss("outside");
     };
     document.addEventListener("pointerdown", handlePointerDown);
     return () => {
       document.removeEventListener("pointerdown", handlePointerDown);
     };
-  }, [open, hostRef, onDismiss]);
+  }, [open, hostRef, popRef, onDismiss]);
   useOverlayLayer(open, () => onDismiss("escape"), hostRef);
 }
+var CALENDAR_HEIGHT = 340;
+var ANCHOR_GAP = 8;
+var VIEWPORT_EDGE = 8;
+function anchorTo(host) {
+  if (!host || typeof window === "undefined") return null;
+  const rect = host.getBoundingClientRect();
+  const below = window.innerHeight - rect.bottom;
+  const up = below < CALENDAR_HEIGHT && rect.top > below;
+  return {
+    left: rect.left,
+    top: up ? void 0 : rect.bottom + ANCHOR_GAP,
+    bottom: up ? window.innerHeight - rect.top + ANCHOR_GAP : void 0,
+    minWidth: rect.width
+  };
+}
+function usePopoverAnchor(open, hostRef, popRef) {
+  const [anchor, setAnchor] = useState(null);
+  useLayoutEffect(() => {
+    if (!open) {
+      setAnchor(null);
+      return;
+    }
+    const place = () => setAnchor(anchorTo(hostRef.current));
+    place();
+    window.addEventListener("scroll", place, true);
+    window.addEventListener("resize", place);
+    return () => {
+      window.removeEventListener("scroll", place, true);
+      window.removeEventListener("resize", place);
+    };
+  }, [open, hostRef]);
+  useLayoutEffect(() => {
+    const el = popRef.current;
+    if (!open || !el || !anchor) return;
+    const overflow = el.getBoundingClientRect().right - (window.innerWidth - VIEWPORT_EDGE);
+    if (overflow > 1) {
+      setAnchor((prev) => prev ? { ...prev, left: Math.max(VIEWPORT_EDGE, prev.left - overflow) } : prev);
+    }
+  }, [open, anchor, popRef]);
+  return anchor;
+}
+function anchorStyle(anchor) {
+  if (!anchor) return void 0;
+  return { left: anchor.left, top: anchor.top, bottom: anchor.bottom, minWidth: anchor.minWidth };
+}
+function portal(anchor, container, node) {
+  if (!anchor) return null;
+  const root = container ?? getOverlayRoot();
+  return root ? createPortal(node, root) : node;
+}
 function DateInput({
   inputRef,
   value,
@@ -460,7 +511,9 @@ function DatePickerImpl({
     setOpen(false);
     if (reason === "escape") inputRef.current?.focus();
   }, []);
-  useDismiss(open, hostRef, dismiss);
+  useDismiss(open, hostRef, popRef, dismiss);
+  const anchor = usePopoverAnchor(open, hostRef, popRef);
+  const overlayContainer = React.useContext(OverlayContainerContext);
   const isInvalid = Boolean(invalid);
   const commit = (next) => {
     if (!isControlled) setInnerValue(next);
@@ -499,7 +552,7 @@ function DatePickerImpl({
   };
   const handleBlur = (event) => {
     const next = event.relatedTarget;
-    if (next instanceof Node && hostRef.current?.contains(next)) return;
+    if (next instanceof Node && (hostRef.current?.contains(next) || popRef.current?.contains(next))) return;
     if (text !== fieldText) setText(fieldText);
     setOpen(false);
   };
@@ -524,27 +577,41 @@ function DatePickerImpl({
         }
       }
     ),
-    open ? /* @__PURE__ */ jsx("div", { ref: popRef, className: "wp-dp-pop", role: "dialog", "aria-label": "\uB0A0\uC9DC \uC120\uD0DD \uB2EC\uB825", children: /* @__PURE__ */ jsx("div", { className: "wp-dp-pop__body", children: /* @__PURE__ */ jsx(
-      Calendar,
-      {
-        monthCount: 1,
-        minDate,
-        maxDate,
-        focusDate,
-        onFocusDateChange: setFocusDate,
-        autoFocus: grabFocus,
-        dayState: (date) => ({ selected: isSameDay(date, selectedDate) }),
-        onPick: (date) => {
-          const ymd = formatYmd(date);
-          const time = withTime ? splitDateTime(text)[1] : "";
-          const next = withTime ? `${ymd}T${isValidHm(time) ? time : "00:00"}` : ymd;
-          setText(toFieldText(next, withTime));
-          commit(next);
-          setOpen(false);
-          inputRef.current?.focus();
+    portal(
+      anchor,
+      overlayContainer,
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: popRef,
+          className: "wp-dp-pop",
+          style: anchorStyle(anchor),
+          role: "dialog",
+          "aria-label": "\uB0A0\uC9DC \uC120\uD0DD \uB2EC\uB825",
+          children: /* @__PURE__ */ jsx("div", { className: "wp-dp-pop__body", children: /* @__PURE__ */ jsx(
+            Calendar,
+            {
+              monthCount: 1,
+              minDate,
+              maxDate,
+              focusDate,
+              onFocusDateChange: setFocusDate,
+              autoFocus: grabFocus,
+              dayState: (date) => ({ selected: isSameDay(date, selectedDate) }),
+              onPick: (date) => {
+                const ymd = formatYmd(date);
+                const time = withTime ? splitDateTime(text)[1] : "";
+                const next = withTime ? `${ymd}T${isValidHm(time) ? time : "00:00"}` : ymd;
+                setText(toFieldText(next, withTime));
+                commit(next);
+                setOpen(false);
+                inputRef.current?.focus();
+              }
+            }
+          ) })
         }
-      }
-    ) }) }) : null
+      )
+    )
   ] });
 }
 function DateRangePickerImpl({
@@ -585,7 +652,9 @@ function DateRangePickerImpl({
     setOpen(false);
     if (reason === "escape") (end === "to" ? toRef : fromRef).current?.focus();
   }, [end]);
-  useDismiss(open, hostRef, dismiss);
+  useDismiss(open, hostRef, popRef, dismiss);
+  const anchor = usePopoverAnchor(open, hostRef, popRef);
+  const overlayContainer = React.useContext(OverlayContainerContext);
   const isInvalid = Boolean(invalid);
   const commit = (nextFrom, nextTo) => {
     const next = { from: nextFrom || void 0, to: nextTo || void 0 };
@@ -637,7 +706,7 @@ function DateRangePickerImpl({
   };
   const handleBlur = (event) => {
     const next = event.relatedTarget;
-    if (next instanceof Node && hostRef.current?.contains(next)) return;
+    if (next instanceof Node && (hostRef.current?.contains(next) || popRef.current?.contains(next))) return;
     if (fromText !== fromValue) setFromText(fromValue);
     if (toText !== toValue) setToText(toValue);
     setOpen(false);
@@ -708,36 +777,50 @@ function DateRangePickerImpl({
         }
       )
     ] }),
-    open ? /* @__PURE__ */ jsx("div", { ref: popRef, className: "wp-dp-pop wp-dp-pop--wide", role: "dialog", "aria-label": "\uAE30\uAC04 \uC120\uD0DD \uB2EC\uB825", children: /* @__PURE__ */ jsx("div", { className: "wp-dp-pop__body", children: /* @__PURE__ */ jsx(
-      Calendar,
-      {
-        monthCount: 2,
-        minDate,
-        maxDate,
-        focusDate,
-        onFocusDateChange: setFocusDate,
-        autoFocus: grabFocus,
-        dayState: (date) => {
-          const t = date.getTime();
-          const start = fromDate?.getTime();
-          const end2 = toDate?.getTime();
-          if (start !== void 0 && end2 !== void 0 && t > start && t < end2) return { rangeMiddle: true };
-          return {
-            rangeStart: start !== void 0 && t === start && end2 !== void 0,
-            rangeEnd: end2 !== void 0 && t === end2,
-            // 한쪽 끝만 정해진 상태는 단일 선택처럼 보인다
-            selected: start !== void 0 && t === start && end2 === void 0 || end2 !== void 0 && t === end2 && start === void 0 || void 0
-          };
-        },
-        onPick: pick
-      }
-    ) }) }) : null
+    portal(
+      anchor,
+      overlayContainer,
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: popRef,
+          className: "wp-dp-pop wp-dp-pop--wide",
+          style: anchorStyle(anchor),
+          role: "dialog",
+          "aria-label": "\uAE30\uAC04 \uC120\uD0DD \uB2EC\uB825",
+          children: /* @__PURE__ */ jsx("div", { className: "wp-dp-pop__body", children: /* @__PURE__ */ jsx(
+            Calendar,
+            {
+              monthCount: 2,
+              minDate,
+              maxDate,
+              focusDate,
+              onFocusDateChange: setFocusDate,
+              autoFocus: grabFocus,
+              dayState: (date) => {
+                const t = date.getTime();
+                const start = fromDate?.getTime();
+                const end2 = toDate?.getTime();
+                if (start !== void 0 && end2 !== void 0 && t > start && t < end2) return { rangeMiddle: true };
+                return {
+                  rangeStart: start !== void 0 && t === start && end2 !== void 0,
+                  rangeEnd: end2 !== void 0 && t === end2,
+                  // 한쪽 끝만 정해진 상태는 단일 선택처럼 보인다
+                  selected: start !== void 0 && t === start && end2 === void 0 || end2 !== void 0 && t === end2 && start === void 0 || void 0
+                };
+              },
+              onPick: pick
+            }
+          ) })
+        }
+      )
+    )
   ] });
 }
 var DP_CSS = `
 .wp-dp-host{position:relative}
-.wp-dp-pop{position:absolute;top:calc(100% + var(--wp-space-2));left:0;min-width:100%;width:max-content;background:var(--wp-surface-card);border:1px solid var(--wp-border-subtle);border-radius:var(--wp-radius-lg);box-shadow:var(--wp-shadow-lg);z-index:300}
-.wp-dp-pop--wide{max-width:min(640px,90vw)}
+.wp-dp-pop{position:fixed;width:max-content;max-width:min(92vw,400px);background:var(--wp-surface-card);border:1px solid var(--wp-border-subtle);border-radius:var(--wp-radius-lg);box-shadow:var(--wp-shadow-lg);z-index:var(--wp-z-dialog);pointer-events:auto}
+.wp-dp-pop--wide{max-width:min(92vw,720px)}
 .wp-dp-pop__body{padding:var(--wp-space-4);max-height:60vh;overflow:auto}
 .wp-dp-range{display:flex;align-items:center;gap:var(--wp-space-1)}
 .wp-dp-range>*{flex:1 1 0;min-width:0}

package/dist/{chunk-NXY6QH36.js → chunk-J5QWCUDJ.js}

@@ -1,5 +1,5 @@
-import { includesLooseSearch } from './chunk-SUJCS7SU.js';
-import { OverlayLayer } from './chunk-HPZUPYPK.js';
+import { includesLooseSearch } from './chunk-GUFIEWW2.js';
+import { OverlayLayer } from './chunk-IY7SMV6V.js';
 import { Button, Dialog, Input, Tag, Checkbox } from './chunk-WIDDHR7L.js';
 import { boxed } from './chunk-SAN4IX6N.js';
 import React, { useMemo, useState, useEffect } from 'react';

package/dist/{chunk-BQ5ZGGW7.js → chunk-TUR4EBKX.js}

@@ -1,4 +1,4 @@
-import { buildCascadingTree } from './chunk-SUJCS7SU.js';
+import { buildCascadingTree } from './chunk-GUFIEWW2.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-ZODL6LE2.js → chunk-YKROA4XK.js}

@@ -1,4 +1,4 @@
-import { includesLooseSearch } from './chunk-SUJCS7SU.js';
+import { includesLooseSearch } from './chunk-GUFIEWW2.js';
 import { Icon, Button, Input, Spinner } from './chunk-WIDDHR7L.js';
 import { boxed } from './chunk-SAN4IX6N.js';
 import { useId, useRef, useState, useEffect, useMemo } from 'react';

package/dist/index.js

@@ -2,10 +2,10 @@ import { DEV, isSafeNavigationTarget, useSduiAdapter, hostFetchOf, useSduiSandbo
 export { defaultAdapter, useSduiAssetResolver, useSduiSandbox } from './chunk-WGRB5UL4.js';
 import { ImageViewer } from './chunk-THEP3VWY.js';
 export { ImageViewer } from './chunk-THEP3VWY.js';
-import { normalizeSearchFields, searchValuesFromParams, splitMultiValue, includesLooseSearch, cascadingValuePaths, SearchToolbar, searchFieldKeys, Popover } from './chunk-SUJCS7SU.js';
-export { SearchToolbar, cascadingValuePaths, cleanSearchValues, includesLooseSearch, joinMultiValue, normalizeSearchText, searchFieldKeys, searchValuesFromParams, splitMultiValue } from './chunk-SUJCS7SU.js';
-import { HoistedStyle, DateRangePicker, DatePicker, OverlayLayer } from './chunk-HPZUPYPK.js';
-export { DatePicker, DateRangePicker, OverlayContainerContext, OverlayLayer, getOverlayRoot, useOverlayLayer } from './chunk-HPZUPYPK.js';
+import { normalizeSearchFields, searchValuesFromParams, splitMultiValue, includesLooseSearch, cascadingValuePaths, SearchToolbar, searchFieldKeys, Popover } from './chunk-GUFIEWW2.js';
+export { SearchToolbar, cascadingValuePaths, cleanSearchValues, includesLooseSearch, joinMultiValue, normalizeSearchText, searchFieldKeys, searchValuesFromParams, splitMultiValue } from './chunk-GUFIEWW2.js';
+import { HoistedStyle, DateRangePicker, DatePicker, OverlayLayer } from './chunk-IY7SMV6V.js';
+export { DatePicker, DateRangePicker, OverlayContainerContext, OverlayLayer, getOverlayRoot, useOverlayLayer } from './chunk-IY7SMV6V.js';
 import { EmptyState, Button, Checkbox, SegmentedControl, Spinner, Select, Pagination, Icon, Card, Badge, ProgressBar, Tag, Toast, Textarea, Tabs, Table, Switch, StatCard, Input, IconButton, Field, Alert, warnOnce, Dialog } from './chunk-WIDDHR7L.js';
 export { Alert, Avatar, Badge, Breadcrumb, Button, Card, Checkbox, Dialog, EmptyState, Field, Icon, IconButton, Input, Pagination, ProgressBar, Radio, SegmentedControl, Select, SidebarNav, Spinner, StatCard, Switch, Table, Tabs, Tag, Textarea, Toast, Tooltip } from './chunk-WIDDHR7L.js';
 import { boxed, mergeStyle, containerLayoutStyle, joinClass, columnsClass, typographyStyle, LAYOUT_CSS, childLayoutFrom, CHILD_LAYOUT_PROPS } from './chunk-SAN4IX6N.js';

package/dist/rich.js

@@ -1,6 +1,6 @@
 import { useSduiAssetResolver } from './chunk-WGRB5UL4.js';
-import { HoistedStyle } from './chunk-HPZUPYPK.js';
-export { DatePicker, DateRangePicker } from './chunk-HPZUPYPK.js';
+import { HoistedStyle } from './chunk-IY7SMV6V.js';
+export { DatePicker, DateRangePicker } from './chunk-IY7SMV6V.js';
 import { Spinner, EmptyState } from './chunk-WIDDHR7L.js';
 import './chunk-SAN4IX6N.js';
 import { useRef, useCallback, useMemo, useState, useEffect, useLayoutEffect } from 'react';

package/dist/widgets/AutocompleteField.js

@@ -1,5 +1,5 @@
-export { AutocompleteField, toAutocompleteOptions } from '../chunk-ZODL6LE2.js';
-import '../chunk-SUJCS7SU.js';
-import '../chunk-HPZUPYPK.js';
+export { AutocompleteField, toAutocompleteOptions } from '../chunk-YKROA4XK.js';
+import '../chunk-GUFIEWW2.js';
+import '../chunk-IY7SMV6V.js';
 import '../chunk-WIDDHR7L.js';
 import '../chunk-SAN4IX6N.js';

package/dist/widgets/PeriodFilter.js

@@ -1,4 +1,4 @@
-export { PeriodFilter } from '../chunk-IB4NDAYU.js';
-import '../chunk-HPZUPYPK.js';
+export { PeriodFilter } from '../chunk-44VLH3I2.js';
+import '../chunk-IY7SMV6V.js';
 import '../chunk-WIDDHR7L.js';
 import '../chunk-SAN4IX6N.js';

package/dist/widgets/SearchableMultiPicker.js

@@ -1,5 +1,5 @@
-export { SearchableMultiPicker } from '../chunk-NXY6QH36.js';
-import '../chunk-SUJCS7SU.js';
-import '../chunk-HPZUPYPK.js';
+export { SearchableMultiPicker } from '../chunk-J5QWCUDJ.js';
+import '../chunk-GUFIEWW2.js';
+import '../chunk-IY7SMV6V.js';
 import '../chunk-WIDDHR7L.js';
 import '../chunk-SAN4IX6N.js';

package/dist/widgets/TreePicker.js

@@ -1,6 +1,6 @@
-export { TreePicker } from '../chunk-YLYSOOVR.js';
-import '../chunk-BQ5ZGGW7.js';
-import '../chunk-SUJCS7SU.js';
-import '../chunk-HPZUPYPK.js';
+export { TreePicker } from '../chunk-F5BAER4V.js';
+import '../chunk-TUR4EBKX.js';
+import '../chunk-GUFIEWW2.js';
+import '../chunk-IY7SMV6V.js';
 import '../chunk-WIDDHR7L.js';
 import '../chunk-SAN4IX6N.js';

package/dist/widgets/TreeView.js

@@ -1,5 +1,5 @@
-export { TreeView, buildTreeNodes, pruneExcluded, resolveTreeNodes } from '../chunk-BQ5ZGGW7.js';
-import '../chunk-SUJCS7SU.js';
-import '../chunk-HPZUPYPK.js';
+export { TreeView, buildTreeNodes, pruneExcluded, resolveTreeNodes } from '../chunk-TUR4EBKX.js';
+import '../chunk-GUFIEWW2.js';
+import '../chunk-IY7SMV6V.js';
 import '../chunk-WIDDHR7L.js';
 import '../chunk-SAN4IX6N.js';

package/dist/widgets/index.js

@@ -1,5 +1,5 @@
-import { SearchableMultiPicker } from '../chunk-NXY6QH36.js';
-export { SearchableMultiPicker } from '../chunk-NXY6QH36.js';
+import { SearchableMultiPicker } from '../chunk-J5QWCUDJ.js';
+export { SearchableMultiPicker } from '../chunk-J5QWCUDJ.js';
 import { SecureScreen } from '../chunk-IIRENCDS.js';
 export { SecureScreen } from '../chunk-IIRENCDS.js';
 import { StackedMeter } from '../chunk-BMZKZGJF.js';
@@ -12,10 +12,10 @@ import { TagMultiSelect } from '../chunk-QDEZXA34.js';
 export { TagMultiSelect } from '../chunk-QDEZXA34.js';
 import { Timeline } from '../chunk-EFYEOT47.js';
 export { Timeline } from '../chunk-EFYEOT47.js';
-import { TreePicker } from '../chunk-YLYSOOVR.js';
-export { TreePicker } from '../chunk-YLYSOOVR.js';
-import { TreeView } from '../chunk-BQ5ZGGW7.js';
-export { TreeView, buildTreeNodes } from '../chunk-BQ5ZGGW7.js';
+import { TreePicker } from '../chunk-F5BAER4V.js';
+export { TreePicker } from '../chunk-F5BAER4V.js';
+import { TreeView } from '../chunk-TUR4EBKX.js';
+export { TreeView, buildTreeNodes } from '../chunk-TUR4EBKX.js';
 import { EventCalendar } from '../chunk-C3JY6GA3.js';
 export { EventCalendar } from '../chunk-C3JY6GA3.js';
 import { ImageLightbox } from '../chunk-XPBZMECW.js';
@@ -28,14 +28,14 @@ import { LiveClock } from '../chunk-Z3WGIFJP.js';
 export { LiveClock } from '../chunk-Z3WGIFJP.js';
 import { OrgChart } from '../chunk-QWJ3OBBL.js';
 export { OrgChart } from '../chunk-QWJ3OBBL.js';
-import { PeriodFilter } from '../chunk-IB4NDAYU.js';
-export { PeriodFilter } from '../chunk-IB4NDAYU.js';
+import { PeriodFilter } from '../chunk-44VLH3I2.js';
+export { PeriodFilter } from '../chunk-44VLH3I2.js';
 import { PrintSheet } from '../chunk-MYJ2KEIP.js';
 export { PrintSheet } from '../chunk-MYJ2KEIP.js';
 import '../chunk-THEP3VWY.js';
-export { AutocompleteField, toAutocompleteOptions } from '../chunk-ZODL6LE2.js';
-import '../chunk-SUJCS7SU.js';
-import '../chunk-HPZUPYPK.js';
+export { AutocompleteField, toAutocompleteOptions } from '../chunk-YKROA4XK.js';
+import '../chunk-GUFIEWW2.js';
+import '../chunk-IY7SMV6V.js';
 import { ColumnBoard } from '../chunk-C4JRSZGS.js';
 export { ColumnBoard } from '../chunk-C4JRSZGS.js';
 import { DiffView } from '../chunk-LDJ2CFFH.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wipco/sdui",
-  "version": "0.19.1",
+  "version": "0.19.2",
   "description": "WIPCO 서버 주도 UI(SDUI) 렌더러 — JSON 페이지 스펙을 React 컴포넌트로 렌더링",
   "keywords": [
     "sdui",