@wipco/sdui 1.8.2 → 1.9.0

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

@@ -1,7 +1,7 @@
-import { ellipsisStyle, unwrapRows } from './chunk-YOLT2TPX.js';
-import { includesLooseSearch } from './chunk-I2URQNZZ.js';
-import { useSduiAdapter, hostFetchOf } from './chunk-XFNHHGFR.js';
-import { Icon, Button, Input, Spinner } from './chunk-KIHN7DGA.js';
+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 { boxed } from './chunk-3JTBOABA.js';
 import { useId, useRef, useMemo, useState, useEffect } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
@@ -32,6 +32,25 @@ function pickText(option, key) {
 var statusRowStyle = {
   padding: "var(--wp-space-2) var(--wp-space-3)"
 };
+function optionRowStyle(active) {
+  return {
+    display: "block",
+    width: "100%",
+    textAlign: "left",
+    padding: "var(--wp-space-2) var(--wp-space-3)",
+    border: 0,
+    borderRadius: "var(--wp-radius-sm)",
+    background: active ? "var(--wp-surface-hover)" : "transparent",
+    color: "var(--wp-text-default)",
+    font: "inherit",
+    cursor: "pointer"
+  };
+}
+var DEFAULT_CREATE_LABEL = '\uC9C1\uC811\uC785\uB825: "{value}"';
+function freeTextCreateLabel(template, text) {
+  const source = typeof template === "string" && template !== "" ? template : DEFAULT_CREATE_LABEL;
+  return source.split("{value}").join(text);
+}
 function AutocompleteFieldImpl({
   search,
   endpoint,
@@ -47,7 +66,11 @@ function AutocompleteFieldImpl({
   minChars = 1,
   debounceMs = 300,
   invalid = false,
-  disabled = false
+  disabled = false,
+  onSelect,
+  freeText = false,
+  selected,
+  createLabel
 }) {
   const listId = useId();
   const hostRef = useRef(null);
@@ -69,6 +92,8 @@ function AutocompleteFieldImpl({
   const [internalValue, setInternalValue] = useState("");
   const committed = (isControlled ? value : internalValue) ?? "";
   const hasSelection = committed !== "";
+  const cardMode = !freeText && hasSelection;
+  const freeTextValue = isControlled ? String(value ?? "") : internalValue;
   const [picked, setPicked] = useState(null);
   const [query, setQuery] = useState("");
   const [open, setOpen] = useState(false);
@@ -77,6 +102,13 @@ function AutocompleteFieldImpl({
   const [activeIndex, setActiveIndex] = useState(0);
   const [focusPending, setFocusPending] = useState(false);
   const listRef = useRef(null);
+  const [typedSeq, setTypedSeq] = useState(0);
+  const [ownLinked, setOwnLinked] = useState(false);
+  const linked = freeText && (selected ?? ownLinked);
+  const unlinkSentRef = useRef(false);
+  useEffect(() => {
+    if (linked) unlinkSentRef.current = false;
+  }, [linked]);
   useEffect(() => {
     if (!open) return;
     const box = listRef.current;
@@ -88,7 +120,7 @@ function AutocompleteFieldImpl({
     else if (bottom > box.scrollTop + box.clientHeight) box.scrollTop = bottom - box.clientHeight;
   }, [open, activeIndex, listId, results]);
   useEffect(() => {
-    if (disabled || hasSelection) return;
+    if (disabled || cardMode) return;
     const keyword = query.trim();
     if (keyword.length < minChars) {
       seqRef.current += 1;
@@ -129,7 +161,7 @@ function AutocompleteFieldImpl({
       clearTimeout(timer);
       controller.abort();
     };
-  }, [query, hasSearch, labelKey, subKey, minChars, debounceMs, disabled, hasSelection]);
+  }, [query, typedSeq, hasSearch, labelKey, subKey, minChars, debounceMs, disabled, cardMode]);
   useEffect(() => {
     if (!open) return;
     const closeOnOutsideClick = (event) => {
@@ -160,6 +192,7 @@ function AutocompleteFieldImpl({
     setStatus("idle");
     setResults([]);
     onChange?.(nextValue, option);
+    onSelect?.(option);
   };
   const clearSelection = () => {
     setPicked(null);
@@ -169,6 +202,71 @@ function AutocompleteFieldImpl({
     setResults([]);
     setFocusPending(true);
     onChange?.(null);
+    onSelect?.(null);
+  };
+  const closeFreeList = () => {
+    setQuery("");
+    setOpen(false);
+  };
+  const typeFreeText = (text) => {
+    if (linked && !unlinkSentRef.current) {
+      unlinkSentRef.current = true;
+      setOwnLinked(false);
+      onSelect?.(null);
+    }
+    if (!isControlled) setInternalValue(text);
+    setQuery(text);
+    setTypedSeq((n) => n + 1);
+    setActiveIndex(0);
+    onChange?.(text);
+  };
+  const pickFreeOption = (option) => {
+    const label = pickText(option, labelKey) || pickText(option, valueKey);
+    if (!isControlled) setInternalValue(label);
+    unlinkSentRef.current = false;
+    setOwnLinked(true);
+    closeFreeList();
+    onChange?.(label);
+    onSelect?.(option);
+  };
+  const chooseFreeRow = (index) => {
+    const option = index > 0 && status === "ready" ? results[index - 1] : void 0;
+    if (option) {
+      pickFreeOption(option);
+      return;
+    }
+    if (linked) {
+      unlinkSentRef.current = true;
+      setOwnLinked(false);
+      onSelect?.(null);
+    }
+    closeFreeList();
+  };
+  const freeRowCount = 1 + (status === "ready" ? results.length : 0);
+  const handleFreeKeyDown = (event) => {
+    if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+      event.preventDefault();
+      if (!open) return;
+      const delta = event.key === "ArrowDown" ? 1 : -1;
+      setActiveIndex((index) => (index + delta + freeRowCount) % freeRowCount);
+      return;
+    }
+    if (event.key === "Enter") {
+      if (!open) return;
+      event.preventDefault();
+      chooseFreeRow(activeIndex);
+      return;
+    }
+    if (event.key === "Tab") {
+      if (!open) return;
+      if (activeIndex > 0 && status === "ready" && results[activeIndex - 1]) {
+        pickFreeOption(results[activeIndex - 1]);
+      } else {
+        closeFreeList();
+      }
+      return;
+    }
+    if (event.key === "Escape") setOpen(false);
   };
   const handleKeyDown = (event) => {
     if (event.key === "ArrowDown" || event.key === "ArrowUp") {
@@ -197,7 +295,98 @@ function AutocompleteFieldImpl({
   const cardOption = pickedMatches ? picked : staticMatch;
   const cardLabel = (pickedMatches ? pickText(picked, labelKey) : "") || selectedLabel || (cardOption ? pickText(cardOption, labelKey) : "") || committed;
   const cardSub = cardOption ? pickText(cardOption, subKey) : "";
-  if (hasSelection) {
+  if (freeText) {
+    const createText = freeTextCreateLabel(createLabel, freeTextValue);
+    return /* @__PURE__ */ jsxs("div", { ref: hostRef, className: "erp-popover-host", children: [
+      /* @__PURE__ */ jsxs("div", { className: "wp-inputwrap wp-inputwrap--lead", children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "wp-inputwrap__lead",
+            style: linked ? { color: "var(--wp-text-success)" } : void 0,
+            children: /* @__PURE__ */ jsx(Icon, { name: linked ? "circle-check" : "search", size: 15, title: linked ? "\uC120\uD0DD\uB428" : void 0 })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            role: "combobox",
+            "aria-expanded": open,
+            "aria-controls": listId,
+            "aria-autocomplete": "list",
+            "aria-activedescendant": open ? `${listId}-opt-${activeIndex}` : void 0,
+            autoComplete: "off",
+            invalid,
+            disabled,
+            placeholder,
+            value: freeTextValue,
+            onChange: (event) => typeFreeText(event.target.value),
+            onKeyDown: handleFreeKeyDown
+          }
+        )
+      ] }),
+      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",
+              {
+                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 })
+              }
+            ),
+            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
+    ] });
+  }
+  if (cardMode) {
     return /* @__PURE__ */ jsxs(
       "div",
       {
@@ -282,18 +471,7 @@ function AutocompleteFieldImpl({
               "aria-selected": index === activeIndex,
               onClick: () => selectOption(option),
               onPointerEnter: () => setActiveIndex(index),
-              style: {
-                display: "block",
-                width: "100%",
-                textAlign: "left",
-                padding: "var(--wp-space-2) var(--wp-space-3)",
-                border: 0,
-                borderRadius: "var(--wp-radius-sm)",
-                background: index === activeIndex ? "var(--wp-surface-hover)" : "transparent",
-                color: "var(--wp-text-default)",
-                font: "inherit",
-                cursor: "pointer"
-              },
+              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
@@ -308,4 +486,4 @@ function AutocompleteFieldImpl({
 }
 var AutocompleteField = boxed(AutocompleteFieldImpl, "AutocompleteField");
 
-export { AutocompleteField, endpointSearchFn, toAutocompleteOptions };
+export { AutocompleteField, endpointSearchFn, freeTextCreateLabel, toAutocompleteOptions };

package/dist/{chunk-PN5IJPA5.js → chunk-3LPLTD66.js}

@@ -1,5 +1,5 @@
 import { useOverlayLayer, OverlayContainerContext, getOverlayRoot } from './chunk-R2ORCOTG.js';
-import { IconButton } from './chunk-KIHN7DGA.js';
+import { IconButton } from './chunk-NKRZVRGH.js';
 import { useState, useRef, useCallback, useEffect, useContext } from 'react';
 import { createPortal } from 'react-dom';
 import { jsxs, jsx } from 'react/jsx-runtime';

package/dist/{chunk-TCHXA35K.js → chunk-3M64LBYZ.js}

@@ -1,5 +1,5 @@
-import { useSduiAdapter, hostFetchOf } from './chunk-XFNHHGFR.js';
-import { Badge, Tag } from './chunk-KIHN7DGA.js';
+import { useSduiAdapter, hostFetchOf } from './chunk-RMYGRGKS.js';
+import { Badge, Tag } from './chunk-NKRZVRGH.js';
 import { boxed } from './chunk-3JTBOABA.js';
 import { useRef, useEffect, useMemo, useState } from 'react';
 import { jsx } from 'react/jsx-runtime';

package/dist/{chunk-ZDWCLHIY.js → chunk-4FQB6O4T.js}

@@ -1,8 +1,8 @@
-import { TagMultiSelect } from './chunk-TCHXA35K.js';
-import { ApprovalLineEditor, stepTypeIcon, stepLabel } from './chunk-4SVSS7VO.js';
-import { orderCircleStyle, unwrapRows, uid } from './chunk-YOLT2TPX.js';
-import { useSduiAdapter, hostFetchOf, defaultAdapter } from './chunk-XFNHHGFR.js';
-import { Card, Icon, Input, IconButton, Field, Button, Badge } from './chunk-KIHN7DGA.js';
+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 { boxed } from './chunk-3JTBOABA.js';
 import React, { useRef, useState, useEffect } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';

package/dist/{chunk-TK3WS7XE.js → chunk-55524GIB.js}

@@ -1,5 +1,5 @@
-import { Text } from './chunk-YK7ZNV2C.js';
-import { Switch, Field, Select, Input } from './chunk-KIHN7DGA.js';
+import { Text } from './chunk-CZMSQ3B3.js';
+import { Switch, Field, Select, Input } from './chunk-NKRZVRGH.js';
 import { boxed } from './chunk-3JTBOABA.js';
 import React, { useMemo } from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';

package/dist/{chunk-JDTVNS3H.js → chunk-5NDYDUMJ.js}

@@ -1,4 +1,4 @@
-import { ImageViewer } from './chunk-PN5IJPA5.js';
+import { ImageViewer } from './chunk-3LPLTD66.js';
 import { boxed } from './chunk-3JTBOABA.js';
 import { useState } from 'react';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';

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

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

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

@@ -1,4 +1,4 @@
-import { formatDisplayValue } from './chunk-KIHN7DGA.js';
+import { formatDisplayValue } from './chunk-NKRZVRGH.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-KVQXQLAP.js → chunk-DE3HYL4K.js}

@@ -1,8 +1,8 @@
-import { useDismiss, usePopoverAnchor, usePanelPointer, usePortalTo, CalendarNav, KO_CALENDAR_NAV_LOCALE, CalendarZoom, anchorStyle, AnchoredPopoverStyles } from './chunk-KJDHF6VU.js';
+import { useDismiss, usePopoverAnchor, usePanelPointer, usePortalTo, CalendarNav, KO_CALENDAR_NAV_LOCALE, CalendarZoom, anchorStyle, AnchoredPopoverStyles } from './chunk-FR7S52ZL.js';
 import { tabbablesIn } from './chunk-R2ORCOTG.js';
 import { HoistedStyle } from './chunk-RIZRM7OO.js';
 import { useIsMobile } from './chunk-TAVKGYH5.js';
-import { SegmentedControl, Button, Tag, EmptyState, Icon, Badge } from './chunk-KIHN7DGA.js';
+import { SegmentedControl, Button, Tag, EmptyState, Icon, Badge } from './chunk-NKRZVRGH.js';
 import { boxed } from './chunk-3JTBOABA.js';
 import { useState, useMemo, useRef, useCallback } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';

package/dist/{chunk-3PGKBTBZ.js → chunk-DELAII7K.js}

@@ -1,5 +1,5 @@
-import { DatePicker, TimePicker } from './chunk-5JXXCRXA.js';
-import { Field } from './chunk-KIHN7DGA.js';
+import { DatePicker, TimePicker } from './chunk-LDIEWJNP.js';
+import { Field } from './chunk-NKRZVRGH.js';
 import { boxed } from './chunk-3JTBOABA.js';
 import { useState, useRef, useEffect, useMemo } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';

package/dist/{chunk-ZW42VDR3.js → chunk-F2ICWCV3.js}

@@ -1,5 +1,5 @@
 import { HoistedStyle } from './chunk-RIZRM7OO.js';
-import { Tag } from './chunk-KIHN7DGA.js';
+import { Tag } from './chunk-NKRZVRGH.js';
 import { boxed } from './chunk-3JTBOABA.js';
 import { useState, useMemo, useRef, useEffect } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';

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

@@ -1,6 +1,6 @@
 import { OverlayContainerContext, getOverlayRoot, useOverlayLayer } from './chunk-R2ORCOTG.js';
 import { HoistedStyle } from './chunk-RIZRM7OO.js';
-import { IconButton } from './chunk-KIHN7DGA.js';
+import { IconButton } from './chunk-NKRZVRGH.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-HAK2YXSF.js → chunk-GHKRT7EA.js}

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

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

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

package/dist/{chunk-37CLBWCE.js → chunk-GW2LSUA4.js}

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

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

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

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

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