@owp/core 2.5.31 → 2.5.33

package/dist/components/OwpSelectorBase/OwpSelectorAutocomplete.js

@@ -1,66 +1,555 @@
-var Se = Object.defineProperty;
-var o = (s, a) => Se(s, "name", { value: a, configurable: !0 });
-import { jsxs as x, jsx as i, Fragment as D } from "../../node_modules/.pnpm/@emotion_react@11.14.0_@types_react@19.2.14_react@19.2.4/node_modules/@emotion/react/jsx-runtime/dist/emotion-react-jsx-runtime.browser.esm.js";
-import { createElement as be } from "@emotion/react";
-import { useOwpTranslation as ye } from "../../hooks/useOwpTranslation.js";
-import te from "../../node_modules/.pnpm/@mui_icons-material@7.3.9_@mui_material@7.3.9_@emotion_react@11.14.0_@types_react@19.2._dc2be6bc014bebdac88a574e3e02c144/node_modules/@mui/icons-material/esm/ArrowDropDown.js";
-import oe from "../../node_modules/.pnpm/@mui_icons-material@7.3.9_@mui_material@7.3.9_@emotion_react@11.14.0_@types_react@19.2._dc2be6bc014bebdac88a574e3e02c144/node_modules/@mui/icons-material/esm/Clear.js";
-import { Box as Oe, Chip as P, Checkbox as Me, TextField as ne, CircularProgress as le, Autocomplete as re, ClickAwayListener as De, Paper as Pe, Popper as Ne } from "@mui/material";
-import { alpha as g } from "@mui/material/styles";
-import { clsx as ie } from "../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.js";
-import { useMemo as se, useState as we, useRef as ae, useEffect as pe } from "react";
-import { SELECTOR_ALL_VALUE_LABEL_SX as ke, SELECTOR_ALL_OPTION_LABEL_SX as Re } from "./selectorBaseStyles.js";
-import { isSelectorAllOption as d } from "./utils/querySelectorUtils.js";
-const ue = 2, Ve = 152, ce = 72, me = 18.57, Ue = "11px !important", ze = "2px !important", He = "5px !important", de = /* @__PURE__ */ o((s, a) => {
-  const p = s.target;
-  return p instanceof HTMLInputElement ? p.value : a ?? "";
-}, "getCurrentAutocompleteInputValue"), fe = /* @__PURE__ */ o((s) => typeof s == "string" || typeof s == "number" ? `${s}` : "", "getAutocompleteOptionLabel"), Te = /* @__PURE__ */ o((s) => /* @__PURE__ */ i(
-  Oe,
+var ut = Object.defineProperty;
+var t = (a, l) => ut(a, "name", { value: l, configurable: !0 });
+import { jsx as i, jsxs as X, Fragment as We } from "../../node_modules/.pnpm/@emotion_react@11.14.0_@types_react@19.2.14_react@19.2.4/node_modules/@emotion/react/jsx-runtime/dist/emotion-react-jsx-runtime.browser.esm.js";
+import { createElement as ct } from "@emotion/react";
+import { useOwpTranslation as pt } from "../../hooks/useOwpTranslation.js";
+import Ge from "../../node_modules/.pnpm/@mui_icons-material@7.3.9_@mui_material@7.3.9_@emotion_react@11.14.0_@types_react@19.2._dc2be6bc014bebdac88a574e3e02c144/node_modules/@mui/icons-material/esm/ArrowDropDown.js";
+import qe from "../../node_modules/.pnpm/@mui_icons-material@7.3.9_@mui_material@7.3.9_@emotion_react@11.14.0_@types_react@19.2._dc2be6bc014bebdac88a574e3e02c144/node_modules/@mui/icons-material/esm/Clear.js";
+import { Box as K, Chip as Ke, Checkbox as mt, TextField as Ze, CircularProgress as $e, Autocomplete as Ye, ClickAwayListener as dt, Paper as lt, Popper as rt, IconButton as Je } from "@mui/material";
+import ft from "@mui/material/useAutocomplete";
+import { alpha as j } from "@mui/material/styles";
+import { clsx as G } from "../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.js";
+import { useMemo as se, useState as ke, useRef as Y, useCallback as R, useEffect as Se } from "react";
+import { SELECTOR_ALL_VALUE_LABEL_SX as It, SELECTOR_ALL_OPTION_LABEL_SX as Tt } from "./selectorBaseStyles.js";
+import { isSelectorAllOption as $ } from "./utils/querySelectorUtils.js";
+const Qe = 2, gt = 152, Fe = 72, Xe = 18.57, ht = "11px !important", At = "2px !important", Ot = "5px !important", bt = 100, ie = 36, Pe = 8, et = 8, tt = 8, Et = 30, Mt = 26, St = /[\u0300-\u036f]/g, yt = /* @__PURE__ */ t((a, l) => {
+  if (typeof a == "function") {
+    a(l);
+    return;
+  }
+  a && (a.current = l);
+}, "assignAutocompleteListboxRef"), Lt = /* @__PURE__ */ t((a, l, T, h) => {
+  const M = /* @__PURE__ */ new Set(), S = /* @__PURE__ */ t((f) => {
+    f >= 0 && f < a && M.add(f);
+  }, "addIndex");
+  S(0), S(a - 1), S(h);
+  for (let f = l; f < T; f += 1)
+    S(f);
+  return Array.from(M).sort((f, C) => f - C);
+}, "getVirtualizedOptionIndexes"), Ct = /* @__PURE__ */ t((a) => [
+  {
+    listStyle: "none",
+    margin: 0,
+    maxHeight: "40vh",
+    overflow: "auto",
+    padding: 0,
+    position: "relative",
+    ...a ? { height: a } : {},
+    "& .MuiAutocomplete-option": {
+      alignItems: "center",
+      boxSizing: "border-box",
+      cursor: "pointer",
+      display: "flex",
+      justifyContent: "flex-start",
+      minHeight: 48,
+      outline: 0,
+      overflow: "hidden",
+      paddingBottom: 0.75,
+      paddingLeft: 2,
+      paddingRight: 2,
+      paddingTop: 0.75,
+      WebkitTapHighlightColor: "transparent",
+      "@media (min-width:600px)": {
+        minHeight: "auto"
+      },
+      "&.Mui-focused": {
+        backgroundColor: /* @__PURE__ */ t((l) => l.palette.action.hover, "backgroundColor"),
+        "@media (hover: none)": {
+          backgroundColor: "transparent"
+        }
+      },
+      "&.Mui-focusVisible": {
+        backgroundColor: /* @__PURE__ */ t((l) => l.palette.action.focus, "backgroundColor")
+      },
+      '&[aria-disabled="true"]': {
+        opacity: /* @__PURE__ */ t((l) => l.palette.action.disabledOpacity, "opacity"),
+        pointerEvents: "none"
+      },
+      '&[aria-selected="true"]': {
+        backgroundColor: /* @__PURE__ */ t((l) => j(l.palette.primary.main, l.palette.action.selectedOpacity), "backgroundColor"),
+        "&.Mui-focused": {
+          backgroundColor: /* @__PURE__ */ t((l) => j(
+            l.palette.primary.main,
+            l.palette.action.selectedOpacity + l.palette.action.hoverOpacity
+          ), "backgroundColor"),
+          "@media (hover: none)": {
+            backgroundColor: /* @__PURE__ */ t((l) => l.palette.action.selected, "backgroundColor")
+          }
+        },
+        "&.Mui-focusVisible": {
+          backgroundColor: /* @__PURE__ */ t((l) => j(
+            l.palette.primary.main,
+            l.palette.action.selectedOpacity + l.palette.action.focusOpacity
+          ), "backgroundColor")
+        }
+      }
+    }
+  }
+], "getVirtualizedAutocompleteListboxSx"), Dt = /* @__PURE__ */ t(({
+  getListboxProps: a,
+  getOptionProps: l,
+  options: T,
+  selectedOption: h
+}) => {
+  const M = a(), { ref: S, style: f, ...C } = M, w = Y(null), [v, U] = ke(0), O = T.length, d = Math.max(0, Math.min(v, Math.max(O - 1, 0))), z = Math.min(
+    O,
+    d + et + tt * 2
+  ), N = se(() => {
+    if (!h)
+      return -1;
+    for (let p = 0; p < O; p += 1)
+      if (T[p].value === h.value)
+        return p;
+    return -1;
+  }, [O, T, h]), ue = se(
+    () => Lt(
+      O,
+      d,
+      z,
+      N
+    ),
+    [O, N, z, d]
+  ), I = Math.min(O, et) * ie + Pe * 2, H = R(
+    (p) => {
+      w.current = p, yt(S, p);
+    },
+    [S]
+  ), g = /* @__PURE__ */ t((p) => {
+    const r = Math.max(
+      0,
+      Math.floor(
+        (p.currentTarget.scrollTop - Pe) / ie
+      ) - tt
+    );
+    U(
+      (u) => u === r ? u : r
+    );
+  }, "handleScroll");
+  return Se(() => {
+    U(0), w.current && (w.current.scrollTop = 0);
+  }, [O]), /* @__PURE__ */ i(
+    K,
+    {
+      component: "div",
+      ...C,
+      ref: H,
+      onScroll: g,
+      style: f,
+      sx: Ct(I),
+      children: /* @__PURE__ */ i(
+        K,
+        {
+          component: "ul",
+          sx: {
+            height: O * ie + Pe * 2,
+            listStyle: "none",
+            margin: 0,
+            padding: 0,
+            position: "relative"
+          },
+          children: ue.map((p) => {
+            const r = T[p], u = l({ option: r, index: p }), { key: D, ...y } = u, L = Pe + p * ie;
+            return /* @__PURE__ */ i(
+              "li",
+              {
+                ...y,
+                className: G("MuiAutocomplete-option", y.className),
+                style: {
+                  ...y.style,
+                  height: ie,
+                  left: 0,
+                  minHeight: ie,
+                  position: "absolute",
+                  right: 0,
+                  top: L
+                },
+                children: je(r)
+              },
+              D
+            );
+          })
+        }
+      )
+    }
+  );
+}, "OwpVirtualizedAutocompleteOptionList"), ot = /* @__PURE__ */ t((a, l) => {
+  const T = a.target;
+  return T instanceof HTMLInputElement ? T.value : l ?? "";
+}, "getCurrentAutocompleteInputValue"), A = /* @__PURE__ */ t((a) => typeof a == "string" || typeof a == "number" ? `${a}` : "", "getAutocompleteOptionLabel"), nt = /* @__PURE__ */ t((a) => a.normalize("NFD").replace(St, "").toLowerCase(), "normalizeAutocompleteSearchText"), at = /* @__PURE__ */ t((a, l) => a && l === "reset", "shouldIgnorePendingAutocompleteInputReset"), it = /* @__PURE__ */ t((a) => {
+  var T;
+  const l = (T = a.closest(".MuiAutocomplete-root")) == null ? void 0 : T.querySelector("input");
+  l && window.requestAnimationFrame(() => {
+    l.focus(), l.setSelectionRange(l.value.length, l.value.length);
+  });
+}, "focusAutocompleteInputFromClearElement"), je = /* @__PURE__ */ t((a) => /* @__PURE__ */ i(
+  K,
   {
     component: "span",
-    sx: d(s) ? Re : void 0,
-    children: s.label
+    sx: $(a) ? Tt : void 0,
+    children: a.label
   }
-), "renderAutocompleteOptionLabel"), Fe = /* @__PURE__ */ o(({ hookResult: s, props: a }) => {
-  const { t: p } = ye(), {
-    autocompleteInputValue: f,
-    className: N,
-    disableClientFilter: C,
-    disabled: h,
+), "renderAutocompleteOptionLabel"), _t = /* @__PURE__ */ t(({
+  autocompleteInputValue: a,
+  autocompleteSx: l,
+  className: T,
+  disableClientFilter: h,
+  disabled: M,
+  error: S,
+  fullWidth: f,
+  helperText: C,
+  label: w,
+  loading: v,
+  loadingText: U,
+  noOptionsText: O,
+  onAutocompleteInputChange: d,
+  options: z,
+  placeholder: N,
+  required: ue,
+  resolvedTextFieldVariant: I,
+  selectSingleValue: H,
+  selectedOption: g,
+  showAllOption: p,
+  singleAutocompleteInputSx: r,
+  textFieldProps: u
+}) => {
+  var re, be, _e, ve, Ne, xe, we;
+  const D = a !== void 0, y = Y(!1), L = Y(!1), [ce, pe] = ke(
+    () => g ? A(g.label) : ""
+  ), me = D ? a : ce, b = se(
+    () => new Map(
+      z.map((o) => [
+        o.value,
+        nt(A(o.label))
+      ])
+    ),
+    [z]
+  ), _ = R(
+    (o) => {
+      D || pe(o);
+    },
+    [D]
+  ), J = R((o) => {
+    y.current = !0, _(""), d == null || d("", o);
+  }, [d, _]), Q = R(() => {
+    const o = g ? A(g.label) : "";
+    y.current = !1, _(o), d == null || d(o, "reset");
+  }, [d, g, _]), F = R(
+    (o, c) => {
+      var Ve;
+      if (h)
+        return o;
+      const E = nt(c.inputValue);
+      if (!E)
+        return o;
+      const ae = [];
+      for (const Ee of o)
+        (Ve = b.get(Ee.value)) != null && Ve.includes(E) && ae.push(Ee);
+      return ae;
+    },
+    [h, b]
+  ), {
+    anchorEl: de,
+    dirty: Re,
+    getClearProps: fe,
+    getInputLabelProps: ye,
+    getInputProps: V,
+    getListboxProps: Le,
+    getOptionProps: Ie,
+    getPopupIndicatorProps: Ce,
+    getRootProps: Te,
+    groupedOptions: B,
+    popupOpen: ee,
+    setAnchorEl: te
+  } = ft({
+    componentName: "OwpSelectorAutocomplete",
+    disabled: M,
+    filterOptions: F,
+    getOptionKey: /* @__PURE__ */ t((o) => o.value, "getOptionKey"),
+    getOptionLabel: /* @__PURE__ */ t((o) => A(o.label), "getOptionLabel"),
+    inputValue: me,
+    isOptionEqualToValue: /* @__PURE__ */ t((o, c) => o.value === c.value, "isOptionEqualToValue"),
+    onChange: /* @__PURE__ */ t((o, c, E) => {
+      if (E === "clear" || E === "removeOption") {
+        J(E);
+        return;
+      }
+      if (y.current = !1, !c || p && $(c)) {
+        _(
+          c ? A(c.label) : ""
+        ), H("");
+        return;
+      }
+      _(A(c.label)), H(c.value);
+    }, "onChange"),
+    onInputChange: /* @__PURE__ */ t((o, c, E) => {
+      if (at(
+        y.current,
+        E
+      )) {
+        _("");
+        return;
+      }
+      E === "input" && (y.current = !0), _(c), d == null || d(c, E);
+    }, "onInputChange"),
+    options: z,
+    selectOnFocus: !0,
+    value: g
+  }), q = Te(), P = V(), De = ye(), ge = fe(), oe = Ce(), k = Re && !M && me !== "", W = (re = u == null ? void 0 : u.slotProps) == null ? void 0 : re.htmlInput, {
+    className: ne,
+    onBlur: he,
+    onKeyDown: le,
+    ...Ue
+  } = W ?? {}, ze = (_e = (be = u == null ? void 0 : u.slotProps) == null ? void 0 : be.input) == null ? void 0 : _e.className, He = R(
+    (o) => {
+      te(o);
+    },
+    [te]
+  ), Ae = /* @__PURE__ */ t((o) => {
+    o.preventDefault(), o.stopPropagation(), L.current = !1, J("clear"), it(o.currentTarget);
+  }, "handleClearClick"), Oe = /* @__PURE__ */ t((o) => {
+    o.preventDefault(), o.stopPropagation(), L.current = !0;
+  }, "handleClearMouseDown"), Be = /* @__PURE__ */ t((o) => {
+    if (le == null || le(o), o.defaultPrevented || M)
+      return;
+    if (o.key === "Escape" || o.key === "Tab") {
+      Q();
+      return;
+    }
+    if (o.key !== "Backspace" && o.key !== "Delete" || !g)
+      return;
+    const c = o.currentTarget.value, E = A(g.label), ae = o.currentTarget.selectionStart !== o.currentTarget.selectionEnd;
+    (c === "" || c === E || ae) && (o.preventDefault(), o.defaultMuiPrevented = !0, J("input"));
+  }, "handleInputKeyDown"), x = /* @__PURE__ */ t((o) => {
+    var c;
+    if ((c = P.onBlur) == null || c.call(P, o), he == null || he(o), L.current) {
+      L.current = !1;
+      return;
+    }
+    Q();
+  }, "handleInputBlur");
+  return Se(() => {
+    D || y.current || pe(
+      g ? A(g.label) : ""
+    );
+  }, [D, g]), /* @__PURE__ */ X(
+    K,
+    {
+      ...q,
+      className: G(
+        "MuiAutocomplete-root min-w-128",
+        f && "MuiAutocomplete-fullWidth",
+        ee && "Mui-expanded",
+        k && "MuiAutocomplete-hasClearIcon",
+        "MuiAutocomplete-hasPopupIcon",
+        T
+      ),
+      sx: [
+        l,
+        f ? { width: "100%" } : void 0,
+        {
+          "& .MuiAutocomplete-inputRoot": {
+            paddingRight: `${Et + (k ? Mt : 0)}px !important`,
+            position: "relative"
+          },
+          "& .MuiAutocomplete-inputRoot .MuiAutocomplete-input": {
+            minWidth: 30,
+            width: 0
+          },
+          "& .MuiAutocomplete-input": {
+            flexGrow: 1,
+            textOverflow: "ellipsis"
+          },
+          "& .MuiAutocomplete-endAdornment": {
+            alignItems: "center",
+            display: "flex",
+            position: "absolute",
+            right: I === "standard" ? 0 : 9,
+            top: "50%",
+            transform: "translate(0, -50%)"
+          },
+          "& .MuiAutocomplete-clearIndicator": {
+            marginRight: -0.25,
+            padding: 0.5,
+            visibility: "visible"
+          },
+          "& .MuiAutocomplete-popupIndicator": {
+            marginRight: -0.25,
+            padding: 0.25
+          },
+          "& .MuiAutocomplete-popupIndicatorOpen": {
+            transform: "rotate(180deg)"
+          }
+        }
+      ],
+      children: [
+        /* @__PURE__ */ i(
+          Ze,
+          {
+            ...u,
+            disabled: M,
+            error: S,
+            fullWidth: f,
+            helperText: C,
+            label: w,
+            placeholder: N,
+            required: ue,
+            slotProps: {
+              ...u == null ? void 0 : u.slotProps,
+              htmlInput: {
+                ...P,
+                ...Ue,
+                className: G(
+                  "MuiAutocomplete-input",
+                  P.className,
+                  ne
+                ),
+                onBlur: x,
+                onKeyDown: Be
+              },
+              input: {
+                ...(ve = u == null ? void 0 : u.slotProps) == null ? void 0 : ve.input,
+                ref: He,
+                className: G("MuiAutocomplete-inputRoot", ze),
+                sx: {
+                  ...r ?? {},
+                  ...((xe = (Ne = u == null ? void 0 : u.slotProps) == null ? void 0 : Ne.input) == null ? void 0 : xe.sx) ?? {}
+                },
+                endAdornment: /* @__PURE__ */ X(K, { className: "MuiAutocomplete-endAdornment", children: [
+                  v ? /* @__PURE__ */ i($e, { color: "inherit", size: 16, sx: { mr: 0.5 } }) : null,
+                  k ? /* @__PURE__ */ i(
+                    Je,
+                    {
+                      className: "MuiAutocomplete-clearIndicator m-0",
+                      onClick: Ae,
+                      onMouseDown: Oe,
+                      size: "small",
+                      tabIndex: ge.tabIndex,
+                      type: "button",
+                      children: /* @__PURE__ */ i(qe, { sx: { fontSize: Xe } })
+                    }
+                  ) : null,
+                  /* @__PURE__ */ i(
+                    Je,
+                    {
+                      className: G(
+                        "MuiAutocomplete-popupIndicator m-0",
+                        ee && "MuiAutocomplete-popupIndicatorOpen"
+                      ),
+                      onClick: /* @__PURE__ */ t((o) => {
+                        var c;
+                        return (c = oe.onClick) == null ? void 0 : c.call(oe, o);
+                      }, "onClick"),
+                      size: "small",
+                      disabled: M,
+                      tabIndex: oe.tabIndex,
+                      type: "button",
+                      children: /* @__PURE__ */ i(Ge, {})
+                    }
+                  )
+                ] })
+              },
+              inputLabel: {
+                ...De,
+                ...(we = u == null ? void 0 : u.slotProps) == null ? void 0 : we.inputLabel
+              }
+            },
+            variant: I
+          }
+        ),
+        de ? /* @__PURE__ */ i(
+          rt,
+          {
+            anchorEl: de,
+            open: ee,
+            placement: "bottom-start",
+            style: { width: de.clientWidth },
+            sx: { zIndex: 99999 },
+            children: /* @__PURE__ */ X(
+              lt,
+              {
+                sx: {
+                  "& .MuiAutocomplete-noOptions": {
+                    fontSize: 14,
+                    px: 1,
+                    py: 1.5,
+                    whiteSpace: "nowrap"
+                  }
+                },
+                children: [
+                  v && B.length === 0 ? /* @__PURE__ */ i(K, { sx: { fontSize: 14, px: 1, py: 1.5, whiteSpace: "nowrap" }, children: U }) : null,
+                  !v && B.length === 0 ? /* @__PURE__ */ i(
+                    K,
+                    {
+                      className: "MuiAutocomplete-noOptions",
+                      onMouseDown: /* @__PURE__ */ t((o) => {
+                        o.preventDefault();
+                      }, "onMouseDown"),
+                      role: "presentation",
+                      children: O
+                    }
+                  ) : null,
+                  B.length > 0 ? /* @__PURE__ */ i(
+                    Dt,
+                    {
+                      getListboxProps: Le,
+                      getOptionProps: Ie,
+                      options: B,
+                      selectedOption: g
+                    }
+                  ) : null
+                ]
+              }
+            )
+          }
+        ) : null
+      ]
+    }
+  );
+}, "OwpVirtualizedSingleSelectorAutocomplete"), Kt = /* @__PURE__ */ t(({ hookResult: a, props: l }) => {
+  var Ee;
+  const { t: T } = pt(), {
+    autocompleteInputValue: h,
+    autocompleteVirtualizationThreshold: M,
+    className: S,
+    disableClientFilter: f,
+    disabled: C,
     error: w,
-    fullWidth: A,
-    helperText: k,
-    label: R,
-    loading: E,
-    loadingText: V,
-    multiple: U,
-    noOptionsText: Ie,
-    onAutocompleteInputChange: c,
-    placeholder: z,
-    required: H,
-    showAllOption: T = !0,
-    textFieldProps: n,
-    valueTextAlign: v
-  } = a, {
-    allOption: _,
-    clearSelection: B,
-    isAllSelected: m,
-    resolvedOptions: W,
-    restoreAllSelection: K,
-    selectAll: $,
-    selectedOption: he,
-    selectedOptions: S,
-    selectMultipleValues: q,
-    selectSingleValue: G
-  } = s, j = T ? [_, ...W] : W, b = se(
-    () => S.filter((e) => !d(e)),
-    [S]
-  ), X = se(
-    () => m ? [] : b.slice(ue),
-    [b, m]
-  ), u = X.length, [Z, y] = we(null), J = ae(null), Q = Ie ?? p(C ? "Message.검색 결과 없음" : "Message.조회된 결과가 없습니다."), Y = ae(
-    U && T && ((a.value ?? a.defaultValue) == null || (a.value ?? a.defaultValue) === "")
-  ), F = {
+    fullWidth: v,
+    helperText: U,
+    label: O,
+    loading: d,
+    loadingText: z,
+    multiple: N,
+    noOptionsText: ue,
+    onAutocompleteInputChange: I,
+    placeholder: H,
+    required: g,
+    showAllOption: p = !0,
+    textFieldProps: r,
+    valueTextAlign: u
+  } = l, {
+    allOption: D,
+    clearSelection: y,
+    isAllSelected: L,
+    resolvedOptions: ce,
+    restoreAllSelection: pe,
+    selectAll: me,
+    selectedOption: b,
+    selectedOptions: _,
+    selectMultipleValues: J,
+    selectSingleValue: Q
+  } = a, F = se(
+    () => p ? [D, ...ce] : ce,
+    [D, ce, p]
+  ), de = M === !1 ? Number.POSITIVE_INFINITY : Math.max(1, M ?? bt), Re = F.length >= de, fe = se(
+    () => _.filter((e) => !$(e)),
+    [_]
+  ), ye = se(
+    () => L ? [] : fe.slice(Qe),
+    [fe, L]
+  ), V = ye.length, [Le, Ie] = ke(null), Ce = Y(null), Te = ue ?? T(f ? "Message.검색 결과 없음" : "Message.조회된 결과가 없습니다."), B = z ?? T("Common.로딩 중..."), ee = Y(
+    N && p && ((l.value ?? l.defaultValue) == null || (l.value ?? l.defaultValue) === "")
+  ), te = {
     clearIndicator: {
       className: "m-0 p-0",
       size: "small",
@@ -81,13 +570,13 @@ const ue = 2, Ve = 152, ce = 72, me = 18.57, Ue = "11px !important", ze = "2px !
       size: "small",
       tabIndex: -1
     }
-  }, L = (n == null ? void 0 : n.variant) ?? "standard", M = L === "standard" ? Ue : L === "outlined" ? (n == null ? void 0 : n.size) === "small" ? He : ze : void 0, Ae = M || v ? {
+  }, q = (r == null ? void 0 : r.variant) ?? "standard", P = q === "standard" ? ht : q === "outlined" ? (r == null ? void 0 : r.size) === "small" ? Ot : At : void 0, De = P || u ? {
     "& .MuiAutocomplete-input": {
-      ...M ? { paddingLeft: M } : {},
-      ...v ? { textAlign: v } : {}
+      ...P ? { paddingLeft: P } : {},
+      ...u ? { textAlign: u } : {}
     }
-  } : void 0, ee = {
-    minWidth: Ve,
+  } : void 0, ge = {
+    minWidth: gt,
     "& .MuiAutocomplete-endAdornment": {
       "& .MuiAutocomplete-clearIndicator + .MuiAutocomplete-popupIndicator": {
         ml: 0
@@ -103,189 +592,267 @@ const ue = 2, Ve = 152, ce = 72, me = 18.57, Ue = "11px !important", ze = "2px !
       gap: 0,
       right: 0
     }
-  }, Ee = {
-    ...ee,
+  }, oe = {
+    ...ge,
     "& .MuiAutocomplete-inputRoot .MuiAutocomplete-input": {
-      flexBasis: ce,
-      minWidth: ce
+      flexBasis: Fe,
+      minWidth: Fe
     }
-  };
-  pe(() => {
-    u || y(null);
-  }, [u]), pe(() => {
-    var l;
-    if (!Y.current)
+  }, k = h !== void 0, W = Y(!1), ne = Y(!1), [he, le] = ke(
+    () => b ? A(b.label) : ""
+  ), Ue = k ? h : he, ze = (Ee = r == null ? void 0 : r.slotProps) == null ? void 0 : Ee.htmlInput, {
+    className: He,
+    onBlur: Ae,
+    onKeyDown: Oe,
+    ...Be
+  } = ze ?? {}, x = R(
+    (e) => {
+      k || le(e);
+    },
+    [k]
+  ), re = R(
+    (e, n = !0) => {
+      W.current = !0, x(""), n && (I == null || I("", e));
+    },
+    [I, x]
+  ), be = R(() => {
+    const e = b ? A(b.label) : "";
+    W.current = !1, x(e), I == null || I(e, "reset");
+  }, [I, b, x]);
+  Se(() => {
+    V || Ie(null);
+  }, [V]), Se(() => {
+    N || k || W.current || le(
+      b ? A(b.label) : ""
+    );
+  }, [k, N, b]), Se(() => {
+    var s;
+    if (!ee.current)
       return;
-    const e = (l = J.current) == null ? void 0 : l.closest("form");
+    const e = (s = Ce.current) == null ? void 0 : s.closest("form");
     if (!e)
       return;
-    const t = /* @__PURE__ */ o(() => {
+    const n = /* @__PURE__ */ t(() => {
       window.setTimeout(() => {
-        K();
+        pe();
       }, 0);
     }, "handleFormReset");
-    return e.addEventListener("reset", t), () => {
-      e.removeEventListener("reset", t);
+    return e.addEventListener("reset", n), () => {
+      e.removeEventListener("reset", n);
     };
-  }, [K]);
-  const Le = /* @__PURE__ */ o(() => {
-    y(null);
-  }, "handleHiddenChipPopperClose"), xe = /* @__PURE__ */ o((e) => {
+  }, [pe]);
+  const _e = /* @__PURE__ */ t(() => {
+    Ie(null);
+  }, "handleHiddenChipPopperClose"), ve = /* @__PURE__ */ t((e) => {
     e.preventDefault();
-  }, "handleHiddenChipSummaryMouseDown"), ge = /* @__PURE__ */ o((e) => {
-    e.preventDefault(), e.stopPropagation(), y(
-      (t) => t === e.currentTarget ? null : e.currentTarget
+  }, "handleHiddenChipSummaryMouseDown"), Ne = /* @__PURE__ */ t((e) => {
+    e.preventDefault(), e.stopPropagation(), Ie(
+      (n) => n === e.currentTarget ? null : e.currentTarget
     );
-  }, "handleHiddenChipSummaryClick"), Ce = /* @__PURE__ */ o((e) => {
-    q(
-      b.filter((t) => t.value !== e).map((t) => t.value)
+  }, "handleHiddenChipSummaryClick"), xe = /* @__PURE__ */ t((e) => {
+    J(
+      fe.filter((n) => n.value !== e).map((n) => n.value)
     );
-  }, "handleHiddenChipDelete"), ve = /* @__PURE__ */ o((e) => {
-    var l;
-    const t = de(e, f);
-    (m || u > 0) && t === "" && (e.key === "Backspace" || e.key === "Delete") && (e.defaultMuiPrevented = !0, e.preventDefault(), e.stopPropagation()), (l = n == null ? void 0 : n.onKeyDown) == null || l.call(
-      n,
+  }, "handleHiddenChipDelete"), we = /* @__PURE__ */ t((e) => {
+    var s;
+    const n = ot(e, h);
+    (L || V > 0) && n === "" && (e.key === "Backspace" || e.key === "Delete") && (e.defaultMuiPrevented = !0, e.preventDefault(), e.stopPropagation()), (s = r == null ? void 0 : r.onKeyDown) == null || s.call(
+      r,
       e
     );
-  }, "handleMultipleRootKeyDown");
-  return U ? /* @__PURE__ */ x(D, { children: [
+  }, "handleMultipleRootKeyDown"), o = /* @__PURE__ */ t((e) => {
+    e.preventDefault(), e.stopPropagation(), ne.current = !0;
+  }, "handleSingleAutocompleteClearMouseDown"), c = /* @__PURE__ */ t((e) => {
+    e.preventDefault(), e.stopPropagation(), ne.current = !1, re("clear"), it(e.currentTarget);
+  }, "handleSingleAutocompleteClearClick"), E = /* @__PURE__ */ t((e) => {
+    if (Oe == null || Oe(e), e.defaultPrevented || C)
+      return;
+    if (e.key === "Escape" || e.key === "Tab") {
+      be();
+      return;
+    }
+    if (e.key !== "Backspace" && e.key !== "Delete" || !b)
+      return;
+    const n = e.currentTarget.value, s = A(b.label), m = e.currentTarget.selectionStart !== e.currentTarget.selectionEnd;
+    (n === "" || n === s || m) && (e.preventDefault(), e.defaultMuiPrevented = !0, re("input"));
+  }, "handleSingleAutocompleteInputKeyDown"), ae = /* @__PURE__ */ t((e, n) => {
+    if (ne.current) {
+      ne.current = !1;
+      return;
+    }
+    n == null || n(e), Ae == null || Ae(e), be();
+  }, "handleSingleAutocompleteInputBlur"), Ve = {
+    ...te,
+    clearIndicator: {
+      ...te.clearIndicator,
+      onClick: c,
+      onMouseDown: o
+    }
+  };
+  return !N && Re ? /* @__PURE__ */ i(
+    _t,
+    {
+      autocompleteInputValue: h,
+      autocompleteSx: ge,
+      className: S,
+      disableClientFilter: f,
+      disabled: C,
+      error: w,
+      fullWidth: v,
+      helperText: U,
+      label: O,
+      loading: d,
+      loadingText: B,
+      noOptionsText: Te,
+      onAutocompleteInputChange: I,
+      options: F,
+      placeholder: H,
+      required: g,
+      resolvedTextFieldVariant: q,
+      selectSingleValue: Q,
+      selectedOption: b,
+      showAllOption: p,
+      singleAutocompleteInputSx: De,
+      textFieldProps: r
+    }
+  ) : N ? /* @__PURE__ */ X(We, { children: [
     /* @__PURE__ */ i(
-      re,
+      Ye,
       {
-        ref: J,
-        className: ie("min-w-128", N),
+        ref: Ce,
+        className: G("min-w-128", S),
         disableCloseOnSelect: !0,
-        disabled: h,
-        filterOptions: C ? (e) => e : void 0,
-        fullWidth: A,
-        inputValue: f,
-        loading: E,
+        disabled: C,
+        filterOptions: f ? (e) => e : void 0,
+        fullWidth: v,
+        inputValue: h,
+        loading: d,
         multiple: !0,
-        options: j,
+        options: F,
         clearText: "",
         closeText: "",
-        clearIcon: /* @__PURE__ */ i(oe, { sx: { fontSize: me } }),
+        clearIcon: /* @__PURE__ */ i(qe, { sx: { fontSize: Xe } }),
         openText: "",
-        popupIcon: /* @__PURE__ */ i(te, {}),
-        sx: Ee,
-        value: S,
-        getOptionLabel: /* @__PURE__ */ o((e) => fe(e.label), "getOptionLabel"),
-        getOptionKey: /* @__PURE__ */ o((e) => e.value, "getOptionKey"),
-        isOptionEqualToValue: /* @__PURE__ */ o((e, t) => e.value === t.value, "isOptionEqualToValue"),
-        loadingText: V ?? p("Common.로딩 중..."),
-        noOptionsText: Q,
-        onChange: /* @__PURE__ */ o((e, t, l, r) => {
-          const O = e.type === "keydown" ? de(
+        popupIcon: /* @__PURE__ */ i(Ge, {}),
+        sx: oe,
+        value: _,
+        getOptionLabel: /* @__PURE__ */ t((e) => A(e.label), "getOptionLabel"),
+        getOptionKey: /* @__PURE__ */ t((e) => e.value, "getOptionKey"),
+        isOptionEqualToValue: /* @__PURE__ */ t((e, n) => e.value === n.value, "isOptionEqualToValue"),
+        loadingText: B,
+        noOptionsText: Te,
+        onChange: /* @__PURE__ */ t((e, n, s, m) => {
+          const Z = e.type === "keydown" ? ot(
             e,
-            f
-          ) : f ?? "";
-          if (l === "removeOption" && e.type === "keydown" && O === "" && (m || u > 0)) {
+            h
+          ) : h ?? "";
+          if (s === "removeOption" && e.type === "keydown" && Z === "" && (L || V > 0)) {
             e.preventDefault(), e.stopPropagation();
             return;
           }
-          if (l === "clear") {
-            if (Y.current) {
-              $();
+          if (s === "clear") {
+            if (ee.current) {
+              me();
               return;
             }
-            B();
+            y();
             return;
           }
-          if (T && (r != null && r.option) && d(r.option)) {
-            if (m) {
-              B();
+          if (p && (m != null && m.option) && $(m.option)) {
+            if (L) {
+              y();
               return;
             }
-            $();
+            me();
             return;
           }
-          q(
-            t.filter((I) => !d(I)).map((I) => I.value)
+          J(
+            n.filter((Me) => !$(Me)).map((Me) => Me.value)
           );
         }, "onChange"),
-        onInputChange: /* @__PURE__ */ o((e, t, l) => {
-          c == null || c(t, l);
+        onInputChange: /* @__PURE__ */ t((e, n, s) => {
+          I == null || I(n, s);
         }, "onInputChange"),
-        onKeyDown: ve,
-        slotProps: F,
-        renderInput: /* @__PURE__ */ o((e) => {
-          var t;
+        onKeyDown: we,
+        slotProps: te,
+        renderInput: /* @__PURE__ */ t((e) => {
+          var n;
           return /* @__PURE__ */ i(
-            ne,
+            Ze,
             {
               ...e,
-              ...n,
-              disabled: h,
+              ...r,
+              disabled: C,
               error: w,
-              fullWidth: A,
-              helperText: k,
-              label: R,
-              placeholder: z ?? p("Common.검색"),
-              required: H,
+              fullWidth: v,
+              helperText: U,
+              label: O,
+              placeholder: H ?? T("Common.검색"),
+              required: g,
               slotProps: {
-                ...n == null ? void 0 : n.slotProps,
+                ...r == null ? void 0 : r.slotProps,
                 input: {
                   ...e.InputProps,
-                  ...(t = n == null ? void 0 : n.slotProps) == null ? void 0 : t.input,
-                  endAdornment: /* @__PURE__ */ x(D, { children: [
-                    E ? /* @__PURE__ */ i(le, { color: "inherit", size: 16, sx: { mr: 0.5 } }) : null,
+                  ...(n = r == null ? void 0 : r.slotProps) == null ? void 0 : n.input,
+                  endAdornment: /* @__PURE__ */ X(We, { children: [
+                    d ? /* @__PURE__ */ i($e, { color: "inherit", size: 16, sx: { mr: 0.5 } }) : null,
                     e.InputProps.endAdornment
                   ] })
                 }
               },
-              variant: L
+              variant: q
             }
           );
         }, "renderInput"),
-        renderOption: /* @__PURE__ */ o((e, t, l) => {
-          const { key: r, ...O } = e;
-          return /* @__PURE__ */ x("li", { ...O, children: [
-            /* @__PURE__ */ i(Me, { checked: l.selected, className: "!mr-8 !p-0", size: "small" }),
-            Te(t)
-          ] }, r);
+        renderOption: /* @__PURE__ */ t((e, n, s) => {
+          const { key: m, ...Z } = e;
+          return /* @__PURE__ */ X("li", { ...Z, children: [
+            /* @__PURE__ */ i(mt, { checked: s.selected, className: "!mr-8 !p-0", size: "small" }),
+            je(n)
+          ] }, m);
         }, "renderOption"),
-        renderValue: /* @__PURE__ */ o((e, t) => T && m ? [
+        renderValue: /* @__PURE__ */ t((e, n) => p && L ? [
           /* @__PURE__ */ i(
-            Oe,
+            K,
             {
               component: "span",
-              sx: ke,
-              children: _.label
+              sx: It,
+              children: D.label
             },
-            _.value
+            D.value
           )
         ] : [
-          ...e.filter((r) => !d(r)).slice(0, ue).map((r, O) => {
-            const { key: I, ..._e } = t({ index: O });
-            return /* @__PURE__ */ be(
-              P,
+          ...e.filter((m) => !$(m)).slice(0, Qe).map((m, Z) => {
+            const { key: Me, ...st } = n({ index: Z });
+            return /* @__PURE__ */ ct(
+              Ke,
               {
-                ..._e,
-                key: I,
-                label: r.label,
+                ...st,
+                key: Me,
+                label: m.label,
                 size: "small",
                 sx: { borderRadius: 1, mr: 0.5 }
               }
             );
           }),
-          ...u > 0 ? [
+          ...V > 0 ? [
             /* @__PURE__ */ i(
-              P,
+              Ke,
               {
                 clickable: !0,
-                label: `+${u}`,
-                onClick: ge,
-                onMouseDown: xe,
+                label: `+${V}`,
+                onClick: Ne,
+                onMouseDown: ve,
                 size: "small",
-                sx: /* @__PURE__ */ o((r) => ({
-                  backgroundColor: g(r.palette.primary.main, 0.14),
-                  border: `1px solid ${g(r.palette.primary.main, 0.22)}`,
+                sx: /* @__PURE__ */ t((m) => ({
+                  backgroundColor: j(m.palette.primary.main, 0.14),
+                  border: `1px solid ${j(m.palette.primary.main, 0.22)}`,
                   borderRadius: 1,
-                  color: r.palette.primary.dark,
+                  color: m.palette.primary.dark,
                   fontWeight: 600,
                   mr: 0.5,
                   "&:hover": {
-                    backgroundColor: g(r.palette.primary.main, 0.2)
+                    backgroundColor: j(m.palette.primary.main, 0.2)
                   }
                 }), "sx")
               },
@@ -296,29 +863,29 @@ const ue = 2, Ve = 152, ce = 72, me = 18.57, Ue = "11px !important", ze = "2px !
       }
     ),
     /* @__PURE__ */ i(
-      Ne,
+      rt,
       {
-        anchorEl: Z,
-        open: !!Z && u > 0,
+        anchorEl: Le,
+        open: !!Le && V > 0,
         placement: "bottom-start",
-        sx: { zIndex: /* @__PURE__ */ o((e) => e.zIndex.modal, "zIndex") },
-        children: /* @__PURE__ */ i(De, { onClickAway: Le, children: /* @__PURE__ */ i(
-          Pe,
+        sx: { zIndex: /* @__PURE__ */ t((e) => e.zIndex.modal, "zIndex") },
+        children: /* @__PURE__ */ i(dt, { onClickAway: _e, children: /* @__PURE__ */ i(
+          lt,
           {
             className: "mt-4",
             sx: {
-              border: /* @__PURE__ */ o((e) => `1px solid ${g(e.palette.common.black, 0.12)}`, "border"),
+              border: /* @__PURE__ */ t((e) => `1px solid ${j(e.palette.common.black, 0.12)}`, "border"),
               display: "flex",
               flexWrap: "wrap",
               gap: 0.75,
               maxWidth: 280,
               p: 1
             },
-            children: X.map((e) => /* @__PURE__ */ i(
-              P,
+            children: ye.map((e) => /* @__PURE__ */ i(
+              Ke,
               {
                 label: e.label,
-                onDelete: /* @__PURE__ */ o(() => Ce(e.value), "onDelete"),
+                onDelete: /* @__PURE__ */ t(() => xe(e.value), "onDelete"),
                 size: "small",
                 sx: { borderRadius: 1 }
               },
@@ -329,81 +896,106 @@ const ue = 2, Ve = 152, ce = 72, me = 18.57, Ue = "11px !important", ze = "2px !
       }
     )
   ] }) : /* @__PURE__ */ i(
-    re,
+    Ye,
     {
-      className: ie("min-w-128", N),
-      disabled: h,
-      filterOptions: C ? (e) => e : void 0,
-      fullWidth: A,
-      inputValue: f,
-      loading: E,
-      options: j,
+      className: G("min-w-128", S),
+      disabled: C,
+      filterOptions: f ? (e) => e : void 0,
+      fullWidth: v,
+      inputValue: Ue,
+      loading: d,
+      options: F,
       clearText: "",
       closeText: "",
-      clearIcon: /* @__PURE__ */ i(oe, { sx: { fontSize: me } }),
+      clearIcon: /* @__PURE__ */ i(qe, { sx: { fontSize: Xe } }),
       openText: "",
-      popupIcon: /* @__PURE__ */ i(te, {}),
-      sx: ee,
-      value: he,
-      getOptionLabel: /* @__PURE__ */ o((e) => fe(e.label), "getOptionLabel"),
-      getOptionKey: /* @__PURE__ */ o((e) => e.value, "getOptionKey"),
-      isOptionEqualToValue: /* @__PURE__ */ o((e, t) => e.value === t.value, "isOptionEqualToValue"),
-      loadingText: V ?? p("Common.로딩 중..."),
-      noOptionsText: Q,
-      onChange: /* @__PURE__ */ o((e, t) => {
-        if (!t || T && d(t)) {
-          G("");
+      popupIcon: /* @__PURE__ */ i(Ge, {}),
+      sx: ge,
+      value: b,
+      getOptionLabel: /* @__PURE__ */ t((e) => A(e.label), "getOptionLabel"),
+      getOptionKey: /* @__PURE__ */ t((e) => e.value, "getOptionKey"),
+      isOptionEqualToValue: /* @__PURE__ */ t((e, n) => e.value === n.value, "isOptionEqualToValue"),
+      loadingText: B,
+      noOptionsText: Te,
+      onChange: /* @__PURE__ */ t((e, n, s) => {
+        if (s === "clear" || s === "removeOption") {
+          re(s, !1);
           return;
         }
-        G(t.value);
+        if (W.current = !1, !n || p && $(n)) {
+          x(
+            n ? A(n.label) : ""
+          ), Q("");
+          return;
+        }
+        x(A(n.label)), Q(n.value);
       }, "onChange"),
-      onInputChange: /* @__PURE__ */ o((e, t, l) => {
-        c == null || c(t, l);
+      onInputChange: /* @__PURE__ */ t((e, n, s) => {
+        if (at(
+          W.current,
+          s
+        )) {
+          x("");
+          return;
+        }
+        (s === "input" || s === "clear") && (W.current = !0), x(n), I == null || I(n, s);
       }, "onInputChange"),
-      slotProps: F,
-      renderInput: /* @__PURE__ */ o((e) => {
-        var t, l, r;
+      slotProps: Ve,
+      renderInput: /* @__PURE__ */ t((e) => {
+        var n, s, m;
         return /* @__PURE__ */ i(
-          ne,
+          Ze,
           {
             ...e,
-            ...n,
-            disabled: h,
+            ...r,
+            disabled: C,
             error: w,
-            fullWidth: A,
-            helperText: k,
-            label: R,
-            placeholder: z,
-            required: H,
+            fullWidth: v,
+            helperText: U,
+            label: O,
+            placeholder: H,
+            required: g,
             slotProps: {
-              ...n == null ? void 0 : n.slotProps,
+              ...r == null ? void 0 : r.slotProps,
+              htmlInput: {
+                ...e.inputProps,
+                ...Be,
+                className: G(
+                  e.inputProps.className,
+                  He
+                ),
+                onBlur: /* @__PURE__ */ t((Z) => {
+                  ae(Z, e.inputProps.onBlur);
+                }, "onBlur"),
+                onKeyDown: E
+              },
               input: {
                 ...e.InputProps,
-                ...(t = n == null ? void 0 : n.slotProps) == null ? void 0 : t.input,
+                ...(n = r == null ? void 0 : r.slotProps) == null ? void 0 : n.input,
                 sx: {
-                  ...Ae ?? {},
+                  ...De ?? {},
                   ...e.InputProps.sx ?? {},
-                  ...((r = (l = n == null ? void 0 : n.slotProps) == null ? void 0 : l.input) == null ? void 0 : r.sx) ?? {}
+                  ...((m = (s = r == null ? void 0 : r.slotProps) == null ? void 0 : s.input) == null ? void 0 : m.sx) ?? {}
                 },
-                endAdornment: /* @__PURE__ */ x(D, { children: [
-                  E ? /* @__PURE__ */ i(le, { color: "inherit", size: 16, sx: { mr: 0.5 } }) : null,
+                endAdornment: /* @__PURE__ */ X(We, { children: [
+                  d ? /* @__PURE__ */ i($e, { color: "inherit", size: 16, sx: { mr: 0.5 } }) : null,
                   e.InputProps.endAdornment
                 ] })
               }
             },
-            variant: L
+            variant: q
           }
         );
       }, "renderInput"),
       selectOnFocus: !0,
-      renderOption: /* @__PURE__ */ o((e, t) => {
-        const { key: l, ...r } = e;
-        return /* @__PURE__ */ i("li", { ...r, children: Te(t) }, l);
+      renderOption: /* @__PURE__ */ t((e, n) => {
+        const { key: s, ...m } = e;
+        return /* @__PURE__ */ i("li", { ...m, children: je(n) }, s);
       }, "renderOption")
     }
   );
 }, "OwpSelectorAutocomplete");
 export {
-  Fe as OwpSelectorAutocomplete
+  Kt as OwpSelectorAutocomplete
 };
 //# sourceMappingURL=OwpSelectorAutocomplete.js.map