@lax-wp/design-system 0.13.34 → 0.13.36

package/dist/components/forms/master-data-input/MasterDataInputField.es.js

@@ -1,119 +1,148 @@
-import { jsxs as r, jsx as e } from "react/jsx-runtime";
-import b from "../../../_virtual/index.es.js";
-import { forwardRef as Ce, useState as c, useRef as ke, useEffect as g } from "react";
-import { Tooltip as ye } from "antd";
-import { useTranslation as Ne } from "react-i18next";
-import { Typography as Ie } from "../../data-display/typography/Typography.es.js";
-import { Label as Se } from "../../data-display/label/Label.es.js";
-import { BoltOutlined as $e, NoteAddOutlined as ze, TableChartRounded as Ve } from "@mui/icons-material";
-import { AIExtractedIndicator as Ee } from "../../icons/AIExtractedIndicator.es.js";
-import { AIStarIcon as Be } from "../../icons/AIStarIcon.es.js";
+import { jsxs as n, jsx as t } from "react/jsx-runtime";
+import l from "../../../_virtual/index.es.js";
+import { forwardRef as Ee, useState as f, useRef as Ne, useEffect as k } from "react";
+import { Tooltip as Ie } from "antd";
+import { useTranslation as Be } from "react-i18next";
+import { Typography as ze } from "../../data-display/typography/Typography.es.js";
+import { Label as Ve } from "../../data-display/label/Label.es.js";
+import { BoltOutlined as $e, NoteAddOutlined as Ae, TableChartRounded as Re } from "@mui/icons-material";
+import { AIExtractedIndicator as Le } from "../../icons/AIExtractedIndicator.es.js";
+import { AIStarIcon as We } from "../../icons/AIStarIcon.es.js";
 import { HelpIcon as Me } from "../../icons/HelpIcon.es.js";
-import V from "../../tooltip/Tooltip.es.js";
-import A from "../../button/IconButton.es.js";
-import { InputLabel as Le } from "../shared/InputLabel.es.js";
-import { shouldShowConfidenceScore as J, getConfidenceScoreBadgeFill as Re, getConfidenceScoreBadgeColor as je, getConfidenceScoreBadgeTextColor as He, getConfidenceScoreBadgeClass as Ke } from "../../../utils/confidenceScoreUtils.es.js";
-import { CloseIcon as Oe } from "../../icon/icons.generated.es.js";
-const Pe = Ce(
+import z from "../../tooltip/Tooltip.es.js";
+import D from "../../button/IconButton.es.js";
+import { InputLabel as Oe } from "../shared/InputLabel.es.js";
+import { shouldShowConfidenceScore as J, getConfidenceScoreBadgeFill as je, getConfidenceScoreBadgeColor as He, getConfidenceScoreBadgeTextColor as Ke, getConfidenceScoreBadgeClass as Pe } from "../../../utils/confidenceScoreUtils.es.js";
+import { CloseIcon as _e } from "../../icon/icons.generated.es.js";
+const qe = Ee(
   ({
     id: Q,
     label: T,
-    placeholder: U,
-    value: n,
-    onChange: E,
-    errorMessage: f,
-    defaultValue: X,
-    required: B = !1,
-    isRequiredConditional: Y = !1,
-    masterDataName: m,
-    masterDataColumnName: Z,
-    masterDataFormula: a,
-    masterDataFilters: G,
-    tags: F,
-    index: D,
-    tooltip: M = "",
-    originalCase: ee = !1,
-    color: L = "",
-    isGTN: w = !1,
-    labelClassName: te,
+    labelExtra: U,
+    placeholder: X,
+    value: i,
+    onChange: V,
+    errorMessage: o,
+    defaultValue: Y,
+    required: $ = !1,
+    isRequiredConditional: Z = !1,
+    masterDataName: b,
+    masterDataColumnName: G,
+    masterDataFormula: s,
+    masterDataFilters: ee,
+    tags: te,
+    index: re,
+    tooltip: A = "",
+    originalCase: le = !1,
+    color: d = "",
+    isGTN: v = !1,
+    labelClassName: ne,
     gtnName: R = null,
-    isAiExtracted: le = !1,
-    confidenceScore: v,
-    confidenceType: d = "high",
+    isAiExtracted: oe = !1,
+    confidenceScore: w,
+    confidenceType: m = "high",
     confidenceTooltip: C,
-    sourceMeta: re = [],
-    onConfidenceScoreClick: oe,
-    disabled: j = !1,
-    reference: ne = {},
-    isLiveField: ae = !1,
-    onBlur: ie,
-    onAddGTNToDocument: k,
-    riskDetails: i,
-    isRiskAnalysisOpen: y = !1,
-    RiskDetailsCard: H,
-    primaryColorShades: se,
-    setDisableActions: K,
-    showDeprecatedFieldWarning: O,
-    MasterDataModal: P,
-    parseMasterDataFormula: p
-  }, ce) => {
-    const { t: de } = Ne(), [h, N] = c(!1), [o, u] = c(null), [s, _] = c(!1), [ue, fe] = c(""), [I, q] = c(null), [me, pe] = c(!1), S = ke(null), $ = ce || S;
-    g(() => {
-      const t = () => {
-        const l = $.current || S.current;
-        l && pe(l.scrollWidth > l.clientWidth);
+    sourceMeta: ae = [],
+    onConfidenceScoreClick: ie,
+    disabled: L = !1,
+    reference: se = {},
+    isLiveField: de = !1,
+    onBlur: ce,
+    onAddGTNToDocument: y,
+    riskDetails: c,
+    isRiskAnalysisOpen: W = !1,
+    RiskDetailsCard: M,
+    primaryColorShades: ue,
+    setDisableActions: O,
+    showDeprecatedFieldWarning: j,
+    MasterDataModal: H,
+    parseMasterDataFormula: x,
+    inputEmphasis: S = "default"
+  }, fe) => {
+    const { t: me } = Be(), g = !!(W && c?.color), pe = S === "modified" && !o && !g, be = S === "deleted" && !o && !g, xe = S === "success" && !o && !g, [h, F] = f(!1), [a, p] = f(null), [u, K] = f(!1), [ge, he] = f(""), [E, P] = f(null), [ke, ve] = f(!1), N = Ne(null), I = fe || N;
+    k(() => {
+      const e = () => {
+        const r = I.current || N.current;
+        r && ve(r.scrollWidth > r.clientWidth);
       };
-      return t(), window.addEventListener("resize", t), () => window.removeEventListener("resize", t);
-    }, [o, n]), g(() => {
-      u(n);
-    }, [D, n]), g(() => {
-      o !== null && o !== n && E(o, I);
-    }, [o, I]);
-    const z = () => {
-      K?.(!s), _(!s);
-    }, he = (t) => {
-      if (t.keyCode === 9 || t.key === "Enter") {
-        const l = $.current || S.current;
-        l && (u(ue), l.blur());
+      return e(), window.addEventListener("resize", e), () => window.removeEventListener("resize", e);
+    }, [a, i]), k(() => {
+      p(i);
+    }, [re, i]), k(() => {
+      a !== null && a !== i && V(a, E);
+    }, [a, E]);
+    const B = () => {
+      O?.(!u), K(!u);
+    }, we = (e) => {
+      if (e.keyCode === 9 || e.key === "Enter") {
+        const r = I.current || N.current;
+        r && (p(ge), r.blur());
       }
-    }, xe = (t, l) => {
-      let x = t;
-      a && p && (x = p(a, l)), fe(""), u(x), z(), q(l);
-    }, be = () => {
-      u(""), q(null);
-    }, ge = (t) => {
-      k && R && k({
+    }, Ce = (e, r) => {
+      let q = e;
+      s && x && (q = x(s, r)), he(""), p(q), B(), P(r);
+    }, ye = () => {
+      p(""), P(null);
+    }, Se = (e) => {
+      y && R && y({
         key: R,
-        value: t
+        value: e
       });
-    }, we = () => {
-      const t = "border h-8 text-sm rounded-lg block w-full p-2.5 pr-16 font-inter font-medium", l = f ? "border-red-300" : y && i?.color ? `border-${i?.color}-300` : "border-gray-300 dark:border-black-600", x = "placeholder:text-neutral-900 dark:placeholder:text-black-400", ve = `${y && i?.color ? `bg-${i?.color}-50` : "dark:bg-black-600 "} ${L || "text-neutral-900 dark:text-black-200"}`;
-      return `${t} ${l} ${ve} ${x}`;
-    }, W = () => o !== null ? o : a && p ? p(a, ne) : n;
-    return g(() => {
-      s && !m && (O?.(), _(!1));
-    }, [s, m, O]), /* @__PURE__ */ r(
+    }, Fe = () => {
+      const e = "border h-8 text-sm rounded-lg block w-full p-2.5 pr-16 font-inter font-medium", r = "placeholder:text-neutral-900 dark:placeholder:text-black-400";
+      return o ? l(
+        e,
+        r,
+        "border-red-300 bg-gray-200 dark:border-black-600 dark:bg-black-600",
+        d || "text-neutral-900 dark:text-black-200"
+      ) : g && c?.color ? l(
+        e,
+        r,
+        `border-${c.color}-300 bg-${c.color}-50`,
+        d || "text-neutral-900 dark:text-black-200"
+      ) : be ? l(
+        e,
+        r,
+        "border-[var(--Error-200,#FECACA)] bg-[var(--Error-50,#FEF2F2)] !text-[#475467] dark:border-[var(--Error-200,#FECACA)] dark:bg-[var(--Error-50,#FEF2F2)] dark:!text-[#475467]"
+      ) : pe ? l(
+        e,
+        r,
+        "border-[var(--Warning-200,#FEDF89)] bg-[var(--Warning-50,#FFFAEB)] text-neutral-900 dark:text-black-100 dark:border-[var(--Warning-200,#FEDF89)] dark:bg-[var(--Warning-50,#FFFAEB)]"
+      ) : xe ? l(
+        e,
+        r,
+        "border-[var(--Success-200,#BBF7D0)] bg-[var(--Success-50,#F0FDF4)] !text-[#101828] dark:border-[var(--Success-200,#BBF7D0)] dark:bg-[var(--Success-50,#F0FDF4)] dark:!text-[#101828]"
+      ) : l(
+        e,
+        r,
+        "border-gray-300 bg-gray-200 dark:border-black-600 dark:bg-black-600",
+        d || "text-neutral-900 dark:text-black-200"
+      );
+    }, _ = () => a !== null ? a : s && x ? x(s, se) : i;
+    return k(() => {
+      u && !b && (j?.(), K(!1));
+    }, [u, b, j]), /* @__PURE__ */ n(
       "div",
       {
-        className: b(
+        className: l(
           "flex gap-0.5 w-full relative",
-          h && w ? "border rounded-lg border-primary-100 p-1" : "",
-          { "error-field": !!f }
+          h && v ? "border rounded-lg border-primary-100 p-1" : "",
+          { "error-field": !!o }
         ),
-        onMouseEnter: () => N(!0),
-        onMouseLeave: () => N(!1),
+        onMouseEnter: () => F(!0),
+        onMouseLeave: () => F(!1),
         children: [
-          w && !h ? /* @__PURE__ */ e("div", { className: "w-1 h-1 bg-primary-600 rounded-full animate-blink mt-1.5" }) : null,
-          /* @__PURE__ */ r("div", { className: b("flex flex-col w-full"), children: [
-            /* @__PURE__ */ e(
+          v && !h ? /* @__PURE__ */ t("div", { className: "w-1 h-1 bg-primary-600 rounded-full animate-blink mt-1.5" }) : null,
+          /* @__PURE__ */ n("div", { className: l("flex flex-col w-full"), children: [
+            /* @__PURE__ */ t(
               "label",
               {
                 htmlFor: "text",
-                className: `text-xs font-medium text-gray-600 inline-flex items-center gap-1 ${ee ? "" : "capitalize"} ${te || ""}`,
-                children: /* @__PURE__ */ r("div", { className: "grid w-full grid-cols-[minmax(0,1fr)_auto] items-start gap-x-1", children: [
-                  /* @__PURE__ */ r("div", { className: "inline-flex min-w-0 items-center gap-1 flex-wrap", children: [
-                    /* @__PURE__ */ e(Le, { label: T || "", required: B || !1, isRequiredConditional: Y || !1 }),
-                    ae && /* @__PURE__ */ e(
+                className: `text-xs font-medium text-gray-600 inline-flex items-center gap-1 ${le ? "" : "capitalize"} ${ne || ""}`,
+                children: /* @__PURE__ */ n("div", { className: "grid w-full grid-cols-[minmax(0,1fr)_auto] items-start gap-x-1", children: [
+                  /* @__PURE__ */ n("div", { className: "inline-flex min-w-0 items-center gap-1 flex-wrap", children: [
+                    /* @__PURE__ */ t(Oe, { label: T || "", required: $ || !1, isRequiredConditional: Z || !1 }),
+                    de && /* @__PURE__ */ t(
                       $e,
                       {
                         sx: {
@@ -123,44 +152,45 @@ const Pe = Ce(
                         }
                       }
                     ),
-                    le && !J(v) && /* @__PURE__ */ e(Ee, {}),
-                    /* @__PURE__ */ e(Se, { labels: F }),
-                    M && /* @__PURE__ */ e(
-                      V,
+                    oe && !J(w) && /* @__PURE__ */ t(Le, {}),
+                    /* @__PURE__ */ t(Ve, { labels: te }),
+                    A && /* @__PURE__ */ t(
+                      z,
                       {
                         placement: "top",
-                        title: `${M}${a ? ` | ${a}` : ""}`,
-                        children: /* @__PURE__ */ e("div", { className: "cursor-pointer", children: /* @__PURE__ */ e(Me, { className: "w-icon-sm h-icon-sm" }) })
+                        title: `${A}${s ? ` | ${s}` : ""}`,
+                        children: /* @__PURE__ */ t("div", { className: "cursor-pointer", children: /* @__PURE__ */ t(Me, { className: "w-icon-sm h-icon-sm" }) })
                       }
-                    )
+                    ),
+                    U
                   ] }),
-                  /* @__PURE__ */ r("div", { className: "flex items-center gap-1 justify-self-end", children: [
-                    J(v) && d ? /* @__PURE__ */ e(
-                      V,
+                  /* @__PURE__ */ n("div", { className: "flex items-center gap-1 justify-self-end", children: [
+                    J(w) && m ? /* @__PURE__ */ t(
+                      z,
                       {
                         placement: "top-end",
                         title: C ?? "",
                         hideTooltip: C == null,
                         className: "cursor-pointer",
-                        children: /* @__PURE__ */ r(
+                        children: /* @__PURE__ */ n(
                           "div",
                           {
-                            className: b(
+                            className: l(
                               "inline-flex min-w-[50px] items-center gap-1 rounded-md px-1 py-0.5",
-                              Ke(d)
+                              Pe(m)
                             ),
-                            onClick: () => oe?.(re),
+                            onClick: () => ie?.(ae),
                             children: [
-                              /* @__PURE__ */ e(
-                                Be,
+                              /* @__PURE__ */ t(
+                                We,
                                 {
                                   size: 12,
-                                  fill: je(d),
-                                  fillSecondary: Re(d)
+                                  fill: He(m),
+                                  fillSecondary: je(m)
                                 }
                               ),
-                              /* @__PURE__ */ r("span", { className: b("text-xs font-medium leading-4", He(d)), children: [
-                                v,
+                              /* @__PURE__ */ n("span", { className: l("text-xs font-medium leading-4", Ke(m)), children: [
+                                w,
                                 "%"
                               ] })
                             ]
@@ -168,19 +198,19 @@ const Pe = Ce(
                         )
                       }
                     ) : null,
-                    w && h && k ? /* @__PURE__ */ e(
+                    v && h && y ? /* @__PURE__ */ t(
                       "button",
                       {
                         id: "btn-master-data-input-add-to-document",
                         className: "cursor-pointer",
-                        onClick: () => ge(n?.toString() || ""),
+                        onClick: () => Se(i?.toString() || ""),
                         type: "button",
-                        children: /* @__PURE__ */ e(ye, { placement: "top", title: de("Add to document"), children: /* @__PURE__ */ e(
-                          ze,
+                        children: /* @__PURE__ */ t(Ie, { placement: "top", title: me("Add to document"), children: /* @__PURE__ */ t(
+                          Ae,
                           {
                             sx: {
                               fontSize: 16,
-                              color: se?.[600] || "var(--color-primary-600)"
+                              color: ue?.[600] || "var(--color-primary-600)"
                             }
                           }
                         ) })
@@ -190,53 +220,53 @@ const Pe = Ce(
                 ] })
               }
             ),
-            /* @__PURE__ */ r("label", { className: "relative block mt-1", children: [
-              /* @__PURE__ */ e(
-                V,
+            /* @__PURE__ */ n("label", { className: "relative block mt-1", children: [
+              /* @__PURE__ */ t(
+                z,
                 {
-                  title: me ? W() : "",
-                  children: /* @__PURE__ */ e(
+                  title: ke ? _() : "",
+                  children: /* @__PURE__ */ t(
                     "input",
                     {
                       id: Q,
-                      ref: $,
-                      required: B,
-                      placeholder: U,
-                      className: we(),
-                      onChange: (t) => {
-                        E(t.target.value, I), u(t.target?.value);
+                      ref: I,
+                      required: $,
+                      placeholder: X,
+                      className: Fe(),
+                      onChange: (e) => {
+                        V(e.target.value, E), p(e.target?.value);
                       },
-                      onKeyDown: he,
-                      value: W(),
-                      defaultValue: X,
+                      onKeyDown: we,
+                      value: _(),
+                      defaultValue: Y,
                       disabled: !0,
                       autoComplete: "off",
-                      onBlur: ie
+                      onBlur: ce
                     }
                   )
                 }
               ),
-              /* @__PURE__ */ e(
-                A,
+              /* @__PURE__ */ t(
+                D,
                 {
                   id: "btn-dynamic-data-input-rx-cross",
-                  onClick: be,
+                  onClick: ye,
                   className: "absolute inset-y-0 right-1 flex items-center px-2 focus:border-transparent",
                   variant: "ghost",
-                  disabled: j,
-                  children: /* @__PURE__ */ e(Oe, { className: "w-6 h-6 text-neutral-500 dark:text-neutral-400 w-sm h-sm" })
+                  disabled: L,
+                  children: /* @__PURE__ */ t(_e, { className: "w-6 h-6 text-neutral-500 dark:text-neutral-400 w-sm h-sm" })
                 }
               ),
-              /* @__PURE__ */ e(
-                A,
+              /* @__PURE__ */ t(
+                D,
                 {
                   id: "btn-dynamic-data-input-ai-outline-pic-center",
-                  onClick: z,
+                  onClick: B,
                   className: "absolute inset-y-0 right-8 flex items-center px-2 focus:border-transparent",
                   variant: "ghost",
-                  disabled: j,
-                  children: /* @__PURE__ */ e(
-                    Ve,
+                  disabled: L,
+                  children: /* @__PURE__ */ t(
+                    Re,
                     {
                       className: "text-neutral-500 dark:text-neutral-400 w-sm h-sm"
                     }
@@ -244,42 +274,42 @@ const Pe = Ce(
                 }
               )
             ] }),
-            f && /* @__PURE__ */ e(
-              Ie,
+            o && /* @__PURE__ */ t(
+              ze,
               {
                 className: "text-error-500 mt-1",
                 appearance: "custom",
                 size: "extra-small",
                 variant: "medium",
-                children: f
+                children: o
               }
             ),
-            s && P && /* @__PURE__ */ e(
-              P,
+            u && H && /* @__PURE__ */ t(
+              H,
               {
-                isVisible: s,
-                onSelected: xe,
-                onClose: z,
-                masterDataColumnName: Z,
-                masterDataFilters: G,
-                masterDataName: m,
-                masterDataId: m,
+                isVisible: u,
+                onSelected: Ce,
+                onClose: B,
+                masterDataColumnName: G,
+                masterDataFilters: ee,
+                masterDataName: b,
+                masterDataId: b,
                 showFilters: !0
               }
             )
           ] }),
-          h && i && y && H && /* @__PURE__ */ e(
+          h && c && W && M && /* @__PURE__ */ t(
             "div",
             {
               role: "tooltip",
               tabIndex: 0,
               className: "absolute left-0 right-0 top-[95%] mt-1 z-50 bg-white dark:bg-black-600 rounded-xl",
-              onClick: (t) => t.stopPropagation(),
-              onMouseDown: (t) => t.preventDefault(),
-              onKeyDown: (t) => {
-                t.key === "Escape" && N(!1);
+              onClick: (e) => e.stopPropagation(),
+              onMouseDown: (e) => e.preventDefault(),
+              onKeyDown: (e) => {
+                e.key === "Escape" && F(!1);
               },
-              children: /* @__PURE__ */ e(H, { riskDetails: i })
+              children: /* @__PURE__ */ t(M, { riskDetails: c })
             }
           )
         ]
@@ -287,8 +317,8 @@ const Pe = Ce(
     );
   }
 );
-Pe.displayName = "MasterDataInputField";
+qe.displayName = "MasterDataInputField";
 export {
-  Pe as MasterDataInputField
+  qe as MasterDataInputField
 };
 //# sourceMappingURL=MasterDataInputField.es.js.map