@wipco/sdui 1.9.0 → 1.9.2

package/dist/chunk-FLBU7AVR.js

@@ -0,0 +1,130 @@
+import { looksLikeImage, safeFileHref, fileDisplayNameOf, FileTile, fileBadgeOf, ImageViewer } from './chunk-EKNEBGNW.js';
+import { useSduiSandbox } from './chunk-DE7FPWVJ.js';
+import { boxed } from './chunk-3JTBOABA.js';
+import { useState } from 'react';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+var BOX_KEYS = [
+  "width",
+  "height",
+  "minWidth",
+  "minHeight",
+  "maxWidth",
+  "maxHeight",
+  "borderRadius",
+  "margin",
+  "marginTop",
+  "marginRight",
+  "marginBottom",
+  "marginLeft",
+  "flex",
+  "flexGrow",
+  "flexShrink",
+  "flexBasis",
+  "alignSelf"
+];
+function tileBoxOf(thumbStyle) {
+  if (!thumbStyle || thumbStyle.width === void 0 && thumbStyle.height === void 0) return null;
+  const box = {};
+  for (const key of BOX_KEYS) {
+    if (thumbStyle[key] !== void 0) box[key] = thumbStyle[key];
+  }
+  if (box.width === void 0) box.minWidth ??= 72;
+  if (box.height === void 0) box.minHeight ??= 72;
+  return box;
+}
+function ImageLightboxImpl({
+  src,
+  alt,
+  mimeType,
+  thumbClassName,
+  thumbStyle,
+  children
+}) {
+  const [open, setOpen] = useState(false);
+  const [failedSrc, setFailedSrc] = useState(null);
+  const sandbox = useSduiSandbox();
+  const source = typeof src === "string" ? src : "";
+  const item = { url: source, mimeType };
+  const asImage = looksLikeImage(item) && failedSrc !== source;
+  const href = sandbox ? null : safeFileHref(source);
+  const openViewer = (event) => {
+    event.stopPropagation();
+    if (asImage) {
+      setOpen(true);
+      return;
+    }
+    if (href && typeof window !== "undefined") window.open(href, "_blank", "noopener");
+  };
+  const overlay = asImage ? /* @__PURE__ */ jsx(
+    ImageViewer,
+    {
+      src,
+      alt,
+      open,
+      onClose: () => setOpen(false)
+    }
+  ) : null;
+  if (children) {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          style: { display: "contents" },
+          onClick: openViewer,
+          onKeyDown: (event) => {
+            if (event.key === "Enter" || event.key === " ") {
+              event.preventDefault();
+              openViewer(event);
+            }
+          },
+          children
+        }
+      ),
+      overlay
+    ] });
+  }
+  if (!asImage) {
+    const box = tileBoxOf(thumbStyle);
+    const name = alt && alt.trim() !== "" ? alt : fileDisplayNameOf(item);
+    return /* @__PURE__ */ jsx(
+      FileTile,
+      {
+        href,
+        name,
+        badge: fileBadgeOf(item),
+        layout: box ? "tile" : "row",
+        style: box ?? void 0,
+        className: thumbClassName
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "img",
+      {
+        src,
+        alt: alt ?? "",
+        role: "button",
+        tabIndex: 0,
+        className: thumbClassName,
+        style: { cursor: "zoom-in", ...thumbStyle },
+        onClick: openViewer,
+        onKeyDown: (event) => {
+          if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            openViewer(event);
+          }
+        },
+        onError: () => setFailedSrc(source)
+      }
+    ),
+    overlay
+  ] });
+}
+var ImageLightbox = boxed(
+  ImageLightboxImpl,
+  "ImageLightbox"
+);
+
+export { ImageLightbox };

package/dist/{chunk-I45MRYCE.js → chunk-FVONSLW3.js}

@@ -1,5 +1,5 @@
-import { DateRangePicker } from './chunk-LDIEWJNP.js';
-import { SegmentedControl, Select } from './chunk-NKRZVRGH.js';
+import { DateRangePicker } from './chunk-KMNC3Q4J.js';
+import { SegmentedControl, Select } from './chunk-45GIMFRP.js';
 import { boxed } from './chunk-3JTBOABA.js';
 import { useState, useMemo } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';

package/dist/{chunk-Z2SOMUZF.js → chunk-GAABHPGR.js}

@@ -1,4 +1,4 @@
-import { IconButton, Input } from './chunk-NKRZVRGH.js';
+import { IconButton, Input } from './chunk-45GIMFRP.js';
 import { boxed } from './chunk-3JTBOABA.js';
 import { useState, useRef, useEffect, useCallback } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';

package/dist/{chunk-33LRJ25P.js → chunk-GLAG6ZT3.js}

@@ -1,9 +1,10 @@
-import { ellipsisStyle, unwrapRows } from './chunk-A2PG44CM.js';
-import { includesLooseSearch } from './chunk-MIFCOTLQ.js';
-import { useSduiAdapter, hostFetchOf } from './chunk-RMYGRGKS.js';
-import { Icon, Input, Spinner, Button } from './chunk-NKRZVRGH.js';
+import { ellipsisStyle, unwrapRows } from './chunk-HR2U2QGN.js';
+import { includesLooseSearch } from './chunk-QDCP6P3K.js';
+import { useDismiss, usePopoverAnchor, usePortalTo, usePanelPointer, AnchoredPopoverStyles, focusStaysInside, anchorStyle } from './chunk-HNMBEUBO.js';
+import { useSduiAdapter, hostFetchOf } from './chunk-DE7FPWVJ.js';
+import { Icon, Input, Spinner, Button } from './chunk-45GIMFRP.js';
 import { boxed } from './chunk-3JTBOABA.js';
-import { useId, useRef, useMemo, useState, useEffect } from 'react';
+import { useId, useRef, useMemo, useState, useEffect, useCallback } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 function endpointSearchFn(endpoint, searchParam, hostFetch) {
@@ -32,6 +33,20 @@ function pickText(option, key) {
 var statusRowStyle = {
   padding: "var(--wp-space-2) var(--wp-space-3)"
 };
+var LIST_MAX_HEIGHT = 280;
+var LIST_ESTIMATE = LIST_MAX_HEIGHT + 10;
+function listPopStyle(anchor) {
+  const base = anchorStyle(anchor);
+  if (!base || !anchor) return base;
+  return { ...base, width: anchor.minWidth, minWidth: 0, maxWidth: "calc(100vw - 16px)", boxSizing: "border-box" };
+}
+var listBoxStyle = {
+  maxHeight: `min(${LIST_MAX_HEIGHT}px, var(--wp-pop-avail, ${LIST_MAX_HEIGHT}px))`,
+  overflowY: "auto",
+  overscrollBehavior: "contain",
+  padding: "var(--wp-space-1)"
+};
+var keepFocusInField = (event) => event.preventDefault();
 function optionRowStyle(active) {
   return {
     display: "block",
@@ -102,6 +117,7 @@ function AutocompleteFieldImpl({
   const [activeIndex, setActiveIndex] = useState(0);
   const [focusPending, setFocusPending] = useState(false);
   const listRef = useRef(null);
+  const popRef = useRef(null);
   const [typedSeq, setTypedSeq] = useState(0);
   const [ownLinked, setOwnLinked] = useState(false);
   const linked = freeText && (selected ?? ownLinked);
@@ -109,6 +125,17 @@ function AutocompleteFieldImpl({
   useEffect(() => {
     if (linked) unlinkSentRef.current = false;
   }, [linked]);
+  const dismiss = useCallback(() => setOpen(false), []);
+  useDismiss(open, hostRef, popRef, dismiss);
+  const anchor = usePopoverAnchor(open, hostRef, popRef, LIST_ESTIMATE);
+  const portal = usePortalTo();
+  const pointer = usePanelPointer(popRef);
+  const anchored = anchor !== null;
+  const handleHostBlur = (event) => {
+    if (!open) return;
+    if (focusStaysInside(event.relatedTarget, hostRef, popRef, pointer)) return;
+    setOpen(false);
+  };
   useEffect(() => {
     if (!open) return;
     const box = listRef.current;
@@ -118,7 +145,7 @@ function AutocompleteFieldImpl({
     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]);
+  }, [open, anchored, activeIndex, listId, results]);
   useEffect(() => {
     if (disabled || cardMode) return;
     const keyword = query.trim();
@@ -162,22 +189,6 @@ function AutocompleteFieldImpl({
       controller.abort();
     };
   }, [query, typedSeq, hasSearch, labelKey, subKey, minChars, debounceMs, disabled, cardMode]);
-  useEffect(() => {
-    if (!open) return;
-    const closeOnOutsideClick = (event) => {
-      if (event.target instanceof Node && hostRef.current?.contains(event.target)) return;
-      setOpen(false);
-    };
-    const closeOnEscape = (event) => {
-      if (event.key === "Escape") setOpen(false);
-    };
-    document.addEventListener("pointerdown", closeOnOutsideClick);
-    document.addEventListener("keydown", closeOnEscape);
-    return () => {
-      document.removeEventListener("pointerdown", closeOnOutsideClick);
-      document.removeEventListener("keydown", closeOnEscape);
-    };
-  }, [open]);
   useEffect(() => {
     if (!focusPending || hasSelection) return;
     hostRef.current?.querySelector("input")?.focus();
@@ -266,7 +277,6 @@ function AutocompleteFieldImpl({
       }
       return;
     }
-    if (event.key === "Escape") setOpen(false);
   };
   const handleKeyDown = (event) => {
     if (event.key === "ArrowDown" || event.key === "ArrowUp") {
@@ -285,7 +295,6 @@ function AutocompleteFieldImpl({
       if (active) selectOption(active);
       return;
     }
-    if (event.key === "Escape") setOpen(false);
   };
   const staticMatch = useMemo(() => {
     if (!hasSelection) return null;
@@ -297,7 +306,8 @@ function AutocompleteFieldImpl({
   const cardSub = cardOption ? pickText(cardOption, subKey) : "";
   if (freeText) {
     const createText = freeTextCreateLabel(createLabel, freeTextValue);
-    return /* @__PURE__ */ jsxs("div", { ref: hostRef, className: "erp-popover-host", children: [
+    return /* @__PURE__ */ jsxs("div", { ref: hostRef, className: "erp-popover-host", onBlur: handleHostBlur, children: [
+      /* @__PURE__ */ jsx(AnchoredPopoverStyles, {}),
       /* @__PURE__ */ jsxs("div", { className: "wp-inputwrap wp-inputwrap--lead", children: [
         /* @__PURE__ */ jsx(
           "span",
@@ -325,65 +335,74 @@ function AutocompleteFieldImpl({
           }
         )
       ] }),
-      open ? /* @__PURE__ */ jsx("div", { className: "erp-popover erp-popover--left", style: { width: "100%" }, children: /* @__PURE__ */ jsxs(
-        "div",
-        {
-          id: listId,
-          ref: listRef,
-          role: "listbox",
-          className: "erp-popover__body",
-          style: {
-            maxHeight: 280,
-            overflowY: "auto",
-            overscrollBehavior: "contain",
-            padding: "var(--wp-space-1)"
-          },
-          onMouseDown: (event) => event.preventDefault(),
-          children: [
-            /* @__PURE__ */ jsx(
-              "button",
+      open ? portal(
+        anchor,
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: popRef,
+            className: "wp-anchored-pop",
+            style: listPopStyle(anchor),
+            ...pointer.panelProps,
+            onMouseDown: keepFocusInField,
+            children: /* @__PURE__ */ jsxs(
+              "div",
               {
-                id: `${listId}-opt-0`,
-                type: "button",
-                role: "option",
-                "aria-selected": activeIndex === 0,
-                "data-create-row": "",
-                onClick: () => chooseFreeRow(0),
-                onPointerEnter: () => setActiveIndex(0),
-                style: optionRowStyle(activeIndex === 0),
-                children: /* @__PURE__ */ jsx("span", { className: "wp-body-sm", style: ellipsisStyle, children: createText })
+                id: listId,
+                ref: listRef,
+                role: "listbox",
+                className: "erp-popover__body",
+                style: listBoxStyle,
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      id: `${listId}-opt-0`,
+                      type: "button",
+                      tabIndex: -1,
+                      role: "option",
+                      "aria-selected": activeIndex === 0,
+                      "data-create-row": "",
+                      onClick: () => chooseFreeRow(0),
+                      onPointerEnter: () => setActiveIndex(0),
+                      style: optionRowStyle(activeIndex === 0),
+                      children: /* @__PURE__ */ jsx("span", { className: "wp-body-sm", style: ellipsisStyle, children: createText })
+                    }
+                  ),
+                  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" })
+                  ] }) : status === "error" ? /* @__PURE__ */ jsxs("div", { className: "wp-row", style: statusRowStyle, children: [
+                    /* @__PURE__ */ jsx(Icon, { name: "circle-alert", size: 16, style: { color: "var(--wp-text-danger)", flex: "none" } }),
+                    /* @__PURE__ */ jsx("span", { className: "wp-caption", children: "\uAC80\uC0C9 \uC2E4\uD328 \u2014 \uC7A0\uC2DC \uD6C4 \uB2E4\uC2DC \uC2DC\uB3C4\uD574 \uC8FC\uC138\uC694" })
+                  ] }) : status === "ready" && results.length === 0 ? /* @__PURE__ */ jsx("div", { className: "wp-caption", style: { ...statusRowStyle, color: "var(--wp-text-subtle)" }, children: "\uC77C\uCE58\uD558\uB294 \uD56D\uBAA9 \uC5C6\uC74C" }) : status === "ready" ? results.map((option, index) => {
+                    const row = index + 1;
+                    const optionSub = pickText(option, subKey);
+                    return /* @__PURE__ */ jsxs(
+                      "button",
+                      {
+                        id: `${listId}-opt-${row}`,
+                        type: "button",
+                        tabIndex: -1,
+                        role: "option",
+                        "aria-selected": row === activeIndex,
+                        onClick: () => chooseFreeRow(row),
+                        onPointerEnter: () => setActiveIndex(row),
+                        style: optionRowStyle(row === activeIndex),
+                        children: [
+                          /* @__PURE__ */ jsx("span", { className: "wp-body-sm", style: ellipsisStyle, children: pickText(option, labelKey) || pickText(option, valueKey) }),
+                          optionSub ? /* @__PURE__ */ jsx("span", { className: "wp-caption", style: ellipsisStyle, children: optionSub }) : null
+                        ]
+                      },
+                      `${pickText(option, valueKey)}-${index}`
+                    );
+                  }) : null
+                ]
               }
-            ),
-            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" })
-            ] }) : status === "error" ? /* @__PURE__ */ jsxs("div", { className: "wp-row", style: statusRowStyle, children: [
-              /* @__PURE__ */ jsx(Icon, { name: "circle-alert", size: 16, style: { color: "var(--wp-text-danger)", flex: "none" } }),
-              /* @__PURE__ */ jsx("span", { className: "wp-caption", children: "\uAC80\uC0C9 \uC2E4\uD328 \u2014 \uC7A0\uC2DC \uD6C4 \uB2E4\uC2DC \uC2DC\uB3C4\uD574 \uC8FC\uC138\uC694" })
-            ] }) : status === "ready" && results.length === 0 ? /* @__PURE__ */ jsx("div", { className: "wp-caption", style: { ...statusRowStyle, color: "var(--wp-text-subtle)" }, children: "\uC77C\uCE58\uD558\uB294 \uD56D\uBAA9 \uC5C6\uC74C" }) : status === "ready" ? results.map((option, index) => {
-              const row = index + 1;
-              const optionSub = pickText(option, subKey);
-              return /* @__PURE__ */ jsxs(
-                "button",
-                {
-                  id: `${listId}-opt-${row}`,
-                  type: "button",
-                  role: "option",
-                  "aria-selected": row === activeIndex,
-                  onClick: () => chooseFreeRow(row),
-                  onPointerEnter: () => setActiveIndex(row),
-                  style: optionRowStyle(row === activeIndex),
-                  children: [
-                    /* @__PURE__ */ jsx("span", { className: "wp-body-sm", style: ellipsisStyle, children: pickText(option, labelKey) || pickText(option, valueKey) }),
-                    optionSub ? /* @__PURE__ */ jsx("span", { className: "wp-caption", style: ellipsisStyle, children: optionSub }) : null
-                  ]
-                },
-                `${pickText(option, valueKey)}-${index}`
-              );
-            }) : null
-          ]
-        }
-      ) }) : null
+            )
+          }
+        )
+      ) : null
     ] });
   }
   if (cardMode) {
@@ -420,7 +439,8 @@ function AutocompleteFieldImpl({
     );
   }
   const showActiveDescendant = open && status === "ready" && results.length > 0;
-  return /* @__PURE__ */ jsxs("div", { ref: hostRef, className: "erp-popover-host", children: [
+  return /* @__PURE__ */ jsxs("div", { ref: hostRef, className: "erp-popover-host", onBlur: handleHostBlur, children: [
+    /* @__PURE__ */ jsx(AnchoredPopoverStyles, {}),
     /* @__PURE__ */ jsx(
       Input,
       {
@@ -441,47 +461,56 @@ function AutocompleteFieldImpl({
         onKeyDown: handleKeyDown
       }
     ),
-    open ? /* @__PURE__ */ jsx("div", { className: "erp-popover erp-popover--left", style: { width: "100%" }, children: /* @__PURE__ */ jsx(
-      "div",
-      {
-        id: listId,
-        ref: listRef,
-        role: "listbox",
-        className: "erp-popover__body",
-        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" })
-        ] }) : status === "error" ? /* @__PURE__ */ jsxs("div", { className: "wp-row", style: statusRowStyle, children: [
-          /* @__PURE__ */ jsx(Icon, { name: "circle-alert", size: 16, style: { color: "var(--wp-text-danger)", flex: "none" } }),
-          /* @__PURE__ */ jsx("span", { className: "wp-caption", children: "\uAC80\uC0C9 \uC2E4\uD328 \u2014 \uC7A0\uC2DC \uD6C4 \uB2E4\uC2DC \uC2DC\uB3C4\uD574 \uC8FC\uC138\uC694" })
-        ] }) : results.length === 0 ? /* @__PURE__ */ jsx("div", { className: "wp-caption", style: statusRowStyle, children: "\uACB0\uACFC \uC5C6\uC74C" }) : results.map((option, index) => {
-          const optionSub = pickText(option, subKey);
-          return /* @__PURE__ */ jsxs(
-            "button",
+    open ? portal(
+      anchor,
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: popRef,
+          className: "wp-anchored-pop",
+          style: listPopStyle(anchor),
+          ...pointer.panelProps,
+          onMouseDown: keepFocusInField,
+          children: /* @__PURE__ */ jsx(
+            "div",
             {
-              id: `${listId}-opt-${index}`,
-              type: "button",
-              role: "option",
-              "aria-selected": index === activeIndex,
-              onClick: () => selectOption(option),
-              onPointerEnter: () => setActiveIndex(index),
-              style: optionRowStyle(index === activeIndex),
-              children: [
-                /* @__PURE__ */ jsx("span", { className: "wp-body-sm", style: ellipsisStyle, children: pickText(option, labelKey) || pickText(option, valueKey) }),
-                optionSub ? /* @__PURE__ */ jsx("span", { className: "wp-caption", style: ellipsisStyle, children: optionSub }) : null
-              ]
-            },
-            `${pickText(option, valueKey)}-${index}`
-          );
-        })
-      }
-    ) }) : null
+              id: listId,
+              ref: listRef,
+              role: "listbox",
+              className: "erp-popover__body",
+              style: listBoxStyle,
+              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" })
+              ] }) : status === "error" ? /* @__PURE__ */ jsxs("div", { className: "wp-row", style: statusRowStyle, children: [
+                /* @__PURE__ */ jsx(Icon, { name: "circle-alert", size: 16, style: { color: "var(--wp-text-danger)", flex: "none" } }),
+                /* @__PURE__ */ jsx("span", { className: "wp-caption", children: "\uAC80\uC0C9 \uC2E4\uD328 \u2014 \uC7A0\uC2DC \uD6C4 \uB2E4\uC2DC \uC2DC\uB3C4\uD574 \uC8FC\uC138\uC694" })
+              ] }) : results.length === 0 ? /* @__PURE__ */ jsx("div", { className: "wp-caption", style: statusRowStyle, children: "\uACB0\uACFC \uC5C6\uC74C" }) : results.map((option, index) => {
+                const optionSub = pickText(option, subKey);
+                return /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    id: `${listId}-opt-${index}`,
+                    type: "button",
+                    tabIndex: -1,
+                    role: "option",
+                    "aria-selected": index === activeIndex,
+                    onClick: () => selectOption(option),
+                    onPointerEnter: () => setActiveIndex(index),
+                    style: optionRowStyle(index === activeIndex),
+                    children: [
+                      /* @__PURE__ */ jsx("span", { className: "wp-body-sm", style: ellipsisStyle, children: pickText(option, labelKey) || pickText(option, valueKey) }),
+                      optionSub ? /* @__PURE__ */ jsx("span", { className: "wp-caption", style: ellipsisStyle, children: optionSub }) : null
+                    ]
+                  },
+                  `${pickText(option, valueKey)}-${index}`
+                );
+              })
+            }
+          )
+        }
+      )
+    ) : null
   ] });
 }
 var AutocompleteField = boxed(AutocompleteFieldImpl, "AutocompleteField");

package/dist/{chunk-FR7S52ZL.js → chunk-HNMBEUBO.js}

@@ -1,6 +1,6 @@
 import { OverlayContainerContext, getOverlayRoot, useOverlayLayer } from './chunk-R2ORCOTG.js';
 import { HoistedStyle } from './chunk-RIZRM7OO.js';
-import { IconButton } from './chunk-NKRZVRGH.js';
+import { IconButton } from './chunk-45GIMFRP.js';
 import React2, { useState, useRef, useEffect, useLayoutEffect, useCallback } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { createPortal } from 'react-dom';

package/dist/{chunk-A2PG44CM.js → chunk-HR2U2QGN.js}

@@ -1,4 +1,4 @@
-import { isPlainObject } from './chunk-NKRZVRGH.js';
+import { isPlainObject } from './chunk-45GIMFRP.js';
 
 // src/widgets/shared.ts
 function unwrapRows(payload) {

package/dist/{chunk-LDIEWJNP.js → chunk-KMNC3Q4J.js}

@@ -1,7 +1,7 @@
-import { KO_CALENDAR_NAV_LOCALE, useDismiss, usePopoverAnchor, usePortalTo, usePanelPointer, AnchoredPopoverStyles, anchorStyle, focusStaysInside, resolveCalendarNavLocale, CalendarZoom, CalendarNav, clampIndex } from './chunk-FR7S52ZL.js';
+import { KO_CALENDAR_NAV_LOCALE, useDismiss, usePopoverAnchor, usePortalTo, usePanelPointer, AnchoredPopoverStyles, anchorStyle, focusStaysInside, resolveCalendarNavLocale, CalendarZoom, CalendarNav, clampIndex } from './chunk-HNMBEUBO.js';
 import { HoistedStyle } from './chunk-RIZRM7OO.js';
 import { useIsMobile } from './chunk-TAVKGYH5.js';
-import { Icon } from './chunk-NKRZVRGH.js';
+import { Icon } from './chunk-45GIMFRP.js';
 import { boxed } from './chunk-3JTBOABA.js';
 import { useState, useRef, useEffect, useMemo, useCallback, useLayoutEffect } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';

package/dist/{chunk-GHKRT7EA.js → chunk-LRDGT4T4.js}

@@ -1,5 +1,5 @@
 import { usePanZoomCanvas, MIN_ZOOM, MAX_ZOOM } from './chunk-XDR6HC4U.js';
-import { IconButton, Badge } from './chunk-NKRZVRGH.js';
+import { IconButton, Badge } from './chunk-45GIMFRP.js';
 import { boxed } from './chunk-3JTBOABA.js';
 import { useState, useMemo, useCallback, useEffect } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';

package/dist/{chunk-LEYVJAXU.js → chunk-M4CZZMZJ.js}

@@ -1,7 +1,7 @@
 import { fetchAllJobPositions } from './chunk-XRHR452N.js';
-import { useSduiDispatch, useSduiCan, SduiDialog } from './chunk-RT2I2U45.js';
-import { useSduiAdapter, hostFetchOf, defaultAdapter } from './chunk-RMYGRGKS.js';
-import { Card, Input, Button, Icon, Badge, IconButton } from './chunk-NKRZVRGH.js';
+import { useSduiDispatch, useSduiCan, SduiDialog } from './chunk-77OM6OQG.js';
+import { useSduiAdapter, hostFetchOf, defaultAdapter } from './chunk-DE7FPWVJ.js';
+import { Card, Input, Button, Icon, Badge, IconButton } from './chunk-45GIMFRP.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-4FQB6O4T.js → chunk-MBROAHA6.js}

@@ -1,8 +1,8 @@
-import { TagMultiSelect } from './chunk-3M64LBYZ.js';
-import { ApprovalLineEditor, stepTypeIcon, stepLabel } from './chunk-NTMFLJEE.js';
-import { orderCircleStyle, unwrapRows, uid } from './chunk-A2PG44CM.js';
-import { useSduiAdapter, hostFetchOf, defaultAdapter } from './chunk-RMYGRGKS.js';
-import { Card, Icon, Input, IconButton, Field, Button, Badge } from './chunk-NKRZVRGH.js';
+import { TagMultiSelect } from './chunk-5DLUGN5M.js';
+import { ApprovalLineEditor, stepTypeIcon, stepLabel } from './chunk-ZSKQUIYR.js';
+import { orderCircleStyle, unwrapRows, uid } from './chunk-HR2U2QGN.js';
+import { useSduiAdapter, hostFetchOf, defaultAdapter } from './chunk-DE7FPWVJ.js';
+import { Card, Icon, Input, IconButton, Field, Button, Badge } from './chunk-45GIMFRP.js';
 import { boxed } from './chunk-3JTBOABA.js';
 import React, { useRef, useState, useEffect } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';

package/dist/{chunk-GW2LSUA4.js → chunk-MLWNI4HI.js}

@@ -1,4 +1,4 @@
-import { Icon, Badge, Tooltip } from './chunk-NKRZVRGH.js';
+import { Icon, Badge, Tooltip } from './chunk-45GIMFRP.js';
 import { boxed } from './chunk-3JTBOABA.js';
 import React from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';

package/dist/{chunk-HKYLKLF6.js → chunk-MY7VBYHI.js}

@@ -1,6 +1,6 @@
 import { fetchAllJobPositions } from './chunk-XRHR452N.js';
-import { useSduiAdapter, hostFetchOf, defaultAdapter } from './chunk-RMYGRGKS.js';
-import { Select, Button } from './chunk-NKRZVRGH.js';
+import { useSduiAdapter, hostFetchOf, defaultAdapter } from './chunk-DE7FPWVJ.js';
+import { Select, Button } from './chunk-45GIMFRP.js';
 import { boxed } from './chunk-3JTBOABA.js';
 import { useRef, useState, useEffect, useMemo } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';

package/dist/{chunk-CZMSQ3B3.js → chunk-PPOQY3V5.js}

@@ -1,4 +1,4 @@
-import { formatDisplayValue } from './chunk-NKRZVRGH.js';
+import { formatDisplayValue } from './chunk-45GIMFRP.js';
 import { mergeStyle, containerLayoutStyle, joinClass, columnsClass, typographyStyle, GAP_CSS } from './chunk-3JTBOABA.js';
 import React from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';

package/dist/{chunk-VGNLXT3A.js → chunk-Q6V7E2H5.js}

@@ -1,4 +1,4 @@
-import { Badge, Checkbox, IconButton, Icon } from './chunk-NKRZVRGH.js';
+import { Badge, Checkbox, IconButton, Icon } from './chunk-45GIMFRP.js';
 import { boxed } from './chunk-3JTBOABA.js';
 import { useState, useEffect } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';

package/dist/{chunk-MIFCOTLQ.js → chunk-QDCP6P3K.js}

@@ -1,7 +1,7 @@
-import { DateRangePicker } from './chunk-LDIEWJNP.js';
+import { DateRangePicker } from './chunk-KMNC3Q4J.js';
 import { useOverlayLayer } from './chunk-R2ORCOTG.js';
 import { HoistedStyle } from './chunk-RIZRM7OO.js';
-import { Input, Button, IconButton, Tag, Field, Checkbox, plainNumberText, formatNumberValue } from './chunk-NKRZVRGH.js';
+import { Input, Button, IconButton, Tag, Field, Checkbox, plainNumberText, formatNumberValue } from './chunk-45GIMFRP.js';
 import { useRef, useEffect, useState, useMemo } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 

package/dist/{chunk-UX37MB4P.js → chunk-QM2YJS7J.js}

@@ -1,9 +1,9 @@
 import { parseJobPositionRow } from './chunk-XRHR452N.js';
 import { MIN_ZOOM, usePanZoomCanvas } from './chunk-XDR6HC4U.js';
-import { ImageLightbox } from './chunk-5NDYDUMJ.js';
-import { useSduiAdapter, hostFetchOf, defaultAdapter } from './chunk-RMYGRGKS.js';
+import { ImageLightbox } from './chunk-FLBU7AVR.js';
+import { useSduiAdapter, hostFetchOf, defaultAdapter } from './chunk-DE7FPWVJ.js';
 import { useIsTabletDown } from './chunk-TAVKGYH5.js';
-import { warnOnce, Badge, Button, IconButton, Icon } from './chunk-NKRZVRGH.js';
+import { warnOnce, Badge, Button, IconButton, Icon } from './chunk-45GIMFRP.js';
 import { boxed } from './chunk-3JTBOABA.js';
 import { useState, useMemo, useRef, useCallback, useEffect, useLayoutEffect } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';

package/dist/{chunk-Z5Q44VXX.js → chunk-QZMMW3JC.js}

@@ -1,4 +1,4 @@
-import { Icon, Badge } from './chunk-NKRZVRGH.js';
+import { Icon, Badge } from './chunk-45GIMFRP.js';
 import { boxed } from './chunk-3JTBOABA.js';
 import React from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';

package/dist/{chunk-GUXKGL76.js → chunk-T5ZHEXGK.js}

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