npm - @lax-wp/design-system - Versions diffs - 0.13.35 → 0.13.36 - Mend

@lax-wp/design-system 0.13.35 → 0.13.36

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (29) hide show

package/dist/components/forms/dynamic-data-input/DynamicDataInputField.es.js CHANGED Viewed

@@ -1,102 +1,131 @@
-import { jsxs as l, jsx as e } from "react/jsx-runtime";
-import u from "../../../_virtual/index.es.js";
-import { forwardRef as ie, useState as C, useRef as se, useEffect as j } from "react";
-import { Tooltip as ce } from "antd";
-import { useTranslation as de } from "react-i18next";
-import { Typography as me } from "../../data-display/typography/Typography.es.js";
-import { Label as fe } from "../../data-display/label/Label.es.js";
-import { BoltOutlined as ue, NoteAddOutlined as pe, CloseRounded as be, TableChartRounded as xe } from "@mui/icons-material";
-import { AIExtractedIndicator as ge } from "../../icons/AIExtractedIndicator.es.js";
-import { AIStarIcon as he } from "../../icons/AIStarIcon.es.js";
-import { HelpIcon as ye } from "../../icons/HelpIcon.es.js";
-import F from "../../tooltip/Tooltip.es.js";
-import H from "../../button/IconButton.es.js";
-import { InputLabel as ke } from "../shared/InputLabel.es.js";
-import { shouldShowConfidenceScore as K, getConfidenceScoreBadgeFill as Ce, getConfidenceScoreBadgeColor as ve, getConfidenceScoreBadgeTextColor as Ne, getConfidenceScoreBadgeClass as we } from "../../../utils/confidenceScoreUtils.es.js";
-const Ie = ie(
+import { jsxs as l, jsx as r } from "react/jsx-runtime";
+import a from "../../../_virtual/index.es.js";
+import { forwardRef as me, useState as C, useRef as ue, useEffect as j } from "react";
+import { Tooltip as fe } from "antd";
+import { useTranslation as pe } from "react-i18next";
+import { Typography as be } from "../../data-display/typography/Typography.es.js";
+import { Label as xe } from "../../data-display/label/Label.es.js";
+import { BoltOutlined as ge, NoteAddOutlined as he, CloseRounded as ke, TableChartRounded as ve } from "@mui/icons-material";
+import { AIExtractedIndicator as ye } from "../../icons/AIExtractedIndicator.es.js";
+import { AIStarIcon as Fe } from "../../icons/AIStarIcon.es.js";
+import { HelpIcon as Ce } from "../../icons/HelpIcon.es.js";
+import H from "../../tooltip/Tooltip.es.js";
+import K from "../../button/IconButton.es.js";
+import { InputLabel as we } from "../shared/InputLabel.es.js";
+import { shouldShowConfidenceScore as L, getConfidenceScoreBadgeFill as Ne, getConfidenceScoreBadgeColor as Se, getConfidenceScoreBadgeTextColor as Ee, getConfidenceScoreBadgeClass as Be } from "../../../utils/confidenceScoreUtils.es.js";
+const Ie = me(
   ({
-    id: L,
+    id: W,
     label: _,
-    placeholder: M,
-    value: o,
-    onChange: d,
-    errorMessage: m,
-    defaultValue: q,
-    required: v = !1,
-    isRequiredConditional: A = !1,
-    dataSource: p,
-    dataKey: J,
-    tags: O,
+    labelExtra: q,
+    placeholder: O,
+    value: d,
+    onChange: f,
+    errorMessage: o,
+    defaultValue: J,
+    required: w = !1,
+    isRequiredConditional: M = !1,
+    dataSource: x,
+    dataKey: Q,
+    tags: U,
     tooltip: N = "",
-    originalCase: Q = !1,
-    color: w = "",
-    isGTN: b = !1,
-    gtnName: I,
-    isAiExtracted: U = !1,
-    confidenceScore: x,
-    confidenceType: n = "high",
-    confidenceTooltip: g,
-    sourceMeta: X = [],
-    onConfidenceScoreClick: Y,
-    labelClassName: Z,
-    disabled: $ = !1,
-    isLiveField: W = !1,
-    onAddGTNToDocument: h,
-    riskDetails: r,
-    isRiskAnalysisOpen: y = !1,
-    RiskDetailsCard: S,
-    primaryColorShades: T,
-    isRecording: $e = !1,
-    isPlaying: Se = !1,
-    setDisableActions: R,
-    showDeprecatedFieldWarning: z,
-    DynamicDataModal: B
-  }, G) => {
-    const { t: ee } = de(), [f, k] = C(!1), [i, s] = C(o), [a, E] = C(!1), P = se(null), V = G || P, D = () => {
-      R?.(!a), E(!a);
-    }, te = (t) => {
-      if (t.keyCode === 9 || t.key === "Enter") {
-        const c = V.current || P.current;
-        c && (i !== null && d(i), s(i), c.blur());
+    originalCase: X = !1,
+    color: n = "",
+    isGTN: g = !1,
+    gtnName: S,
+    isAiExtracted: Y = !1,
+    confidenceScore: h,
+    confidenceType: c = "high",
+    confidenceTooltip: k,
+    sourceMeta: Z = [],
+    onConfidenceScoreClick: T,
+    labelClassName: G,
+    disabled: E = !1,
+    isLiveField: ee = !1,
+    onAddGTNToDocument: v,
+    riskDetails: i,
+    isRiskAnalysisOpen: B = !1,
+    RiskDetailsCard: I,
+    primaryColorShades: re,
+    isRecording: De = !1,
+    isPlaying: Re = !1,
+    setDisableActions: D,
+    showDeprecatedFieldWarning: R,
+    DynamicDataModal: A,
+    inputEmphasis: y = "default"
+  }, te) => {
+    const { t: ae } = pe(), p = !!(B && i?.color), le = y === "modified" && !o && !p, oe = y === "deleted" && !o && !p, ne = y === "success" && !o && !p, [b, F] = C(!1), [m, u] = C(d), [s, z] = C(!1), P = ue(null), V = te || P, $ = () => {
+      D?.(!s), z(!s);
+    }, ie = (e) => {
+      if (e.keyCode === 9 || e.key === "Enter") {
+        const t = V.current || P.current;
+        t && (m !== null && f(m), u(m), t.blur());
       }
-    }, le = () => {
-      s(""), d("");
-    }, re = (t) => {
-      h && I && h({
-        key: I,
-        value: t
+    }, se = () => {
+      u(""), f("");
+    }, de = (e) => {
+      v && S && v({
+        key: S,
+        value: e
       });
-    }, ae = () => {
-      const t = "border h-8 text-sm rounded-lg block w-full p-2.5 font-inter font-medium", c = m ? "border-red-300" : y && r?.color ? `border-${r?.color}-300` : "border-gray-300 dark:border-black-600", oe = "placeholder:text-neutral-900 dark:placeholder:text-black-400", ne = `${y && r?.color ? `bg-${r?.color}-50` : "bg-gray-200 dark:bg-black-600 "} ${w || "text-neutral-900 dark:text-black-200"}`;
-      return `${t} ${c} ${ne} ${oe}`;
+    }, ce = () => {
+      const e = "border h-8 text-sm rounded-lg block w-full p-2.5 font-inter font-medium", t = "placeholder:text-neutral-900 dark:placeholder:text-black-400";
+      return o ? a(
+        e,
+        t,
+        "border-red-300 bg-gray-200 dark:border-black-600 dark:bg-black-600",
+        n || "text-neutral-900 dark:text-black-200"
+      ) : p && i?.color ? a(
+        e,
+        t,
+        `border-${i.color}-300 bg-${i.color}-50`,
+        n || "text-neutral-900 dark:text-black-200"
+      ) : oe ? a(
+        e,
+        t,
+        "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]"
+      ) : le ? a(
+        e,
+        t,
+        "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)]"
+      ) : ne ? a(
+        e,
+        t,
+        "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]"
+      ) : a(
+        e,
+        t,
+        "border-gray-300 bg-gray-200 dark:border-black-600 dark:bg-black-600",
+        n || "text-neutral-900 dark:text-black-200"
+      );
     };
     return j(() => {
-      a && !p && (z?.(), E(!1));
-    }, [a, p, z]), j(() => {
-      s(o);
-    }, [o]), /* @__PURE__ */ l(
+      s && !x && (R?.(), z(!1));
+    }, [s, x, R]), j(() => {
+      u(d);
+    }, [d]), /* @__PURE__ */ l(
       "div",
       {
-        className: u(
+        className: a(
           "flex gap-0.5 w-full relative",
-          f && b ? "border rounded-lg border-primary-100 bg-primary-50 p-1" : "",
-          { "error-field": !!m }
+          b && g ? "border rounded-lg border-primary-100 bg-primary-50 p-1" : "",
+          { "error-field": !!o }
         ),
-        onMouseEnter: () => k(!0),
-        onMouseLeave: () => k(!1),
+        onMouseEnter: () => F(!0),
+        onMouseLeave: () => F(!1),
         children: [
-          b && !f ? /* @__PURE__ */ e("div", { className: "w-1 h-1 bg-primary-600 rounded-full animate-blink mt-1.5" }) : null,
-          /* @__PURE__ */ l("div", { className: u("flex flex-col w-full"), children: [
-            /* @__PURE__ */ e(
+          g && !b ? /* @__PURE__ */ r("div", { className: "w-1 h-1 bg-primary-600 rounded-full animate-blink mt-1.5" }) : null,
+          /* @__PURE__ */ l("div", { className: a("flex flex-col w-full"), children: [
+            /* @__PURE__ */ r(
               "label",
               {
                 htmlFor: "text",
-                className: `text-xs font-medium text-gray-600 inline-flex items-center gap-1 ${Q ? "" : "capitalize"} ${Z || ""}`,
+                className: `text-xs font-medium text-gray-600 inline-flex items-center gap-1 ${X ? "" : "capitalize"} ${G || ""}`,
                 children: /* @__PURE__ */ l("div", { className: "grid w-full grid-cols-[minmax(0,1fr)_auto] items-start gap-x-1", children: [
                   /* @__PURE__ */ l("div", { className: "inline-flex min-w-0 items-center gap-1 flex-wrap", children: [
-                    /* @__PURE__ */ e(ke, { label: _ || "", required: v || !1, isRequiredConditional: A || !1 }),
-                    W && /* @__PURE__ */ e(
-                      ue,
+                    /* @__PURE__ */ r(we, { label: _ || "", required: w || !1, isRequiredConditional: M || !1 }),
+                    ee && /* @__PURE__ */ r(
+                      ge,
                       {
                         sx: {
                           fontSize: 16,
@@ -105,37 +134,38 @@ const Ie = ie(
                         }
                       }
                     ),
-                    U && !K(x) && /* @__PURE__ */ e(ge, {}),
-                    /* @__PURE__ */ e(fe, { labels: O }),
-                    N && /* @__PURE__ */ e(F, { placement: "top", title: N, children: /* @__PURE__ */ e("div", { className: "cursor-pointer", children: /* @__PURE__ */ e(ye, { className: "w-icon-sm h-icon-sm" }) }) })
+                    Y && !L(h) && /* @__PURE__ */ r(ye, {}),
+                    /* @__PURE__ */ r(xe, { labels: U }),
+                    N && /* @__PURE__ */ r(H, { placement: "top", title: N, children: /* @__PURE__ */ r("div", { className: "cursor-pointer", children: /* @__PURE__ */ r(Ce, { className: "w-icon-sm h-icon-sm" }) }) }),
+                    q
                   ] }),
                   /* @__PURE__ */ l("div", { className: "flex items-center gap-1 justify-self-end", children: [
-                    K(x) && n ? /* @__PURE__ */ e(
-                      F,
+                    L(h) && c ? /* @__PURE__ */ r(
+                      H,
                       {
                         placement: "top-end",
-                        title: g ?? "",
-                        hideTooltip: g == null,
+                        title: k ?? "",
+                        hideTooltip: k == null,
                         className: "cursor-pointer",
                         children: /* @__PURE__ */ l(
                           "div",
                           {
-                            className: u(
+                            className: a(
                               "inline-flex min-w-[50px] items-center gap-1 rounded-md px-1 py-0.5",
-                              we(n)
+                              Be(c)
                             ),
-                            onClick: () => Y?.(X),
+                            onClick: () => T?.(Z),
                             children: [
-                              /* @__PURE__ */ e(
-                                he,
+                              /* @__PURE__ */ r(
+                                Fe,
                                 {
                                   size: 12,
-                                  fill: ve(n),
-                                  fillSecondary: Ce(n)
+                                  fill: Se(c),
+                                  fillSecondary: Ne(c)
                                 }
                               ),
-                              /* @__PURE__ */ l("span", { className: u("text-xs font-medium leading-4", Ne(n)), children: [
-                                x,
+                              /* @__PURE__ */ l("span", { className: a("text-xs font-medium leading-4", Ee(c)), children: [
+                                h,
                                 "%"
                               ] })
                             ]
@@ -143,19 +173,19 @@ const Ie = ie(
                         )
                       }
                     ) : null,
-                    b && f && h ? /* @__PURE__ */ e(
+                    g && b && v ? /* @__PURE__ */ r(
                       "button",
                       {
                         id: "btn-dynamic-data-input-add-to-document",
                         className: "cursor-pointer",
-                        onClick: () => re(o?.toString() || ""),
+                        onClick: () => de(d?.toString() || ""),
                         type: "button",
-                        children: /* @__PURE__ */ e(ce, { placement: "top", title: ee("Add to document"), children: /* @__PURE__ */ e(
-                          pe,
+                        children: /* @__PURE__ */ r(fe, { placement: "top", title: ae("Add to document"), children: /* @__PURE__ */ r(
+                          he,
                           {
                             sx: {
                               fontSize: 16,
-                              color: T?.[600] || "var(--color-primary-600)"
+                              color: re?.[600] || "var(--color-primary-600)"
                             }
                           }
                         ) })
@@ -166,49 +196,49 @@ const Ie = ie(
               }
             ),
             /* @__PURE__ */ l("label", { className: "relative block mt-1", children: [
-              /* @__PURE__ */ e(
+              /* @__PURE__ */ r(
                 "input",
                 {
-                  id: L,
+                  id: W,
                   ref: V,
-                  required: v,
-                  placeholder: M,
-                  className: ae(),
-                  onChange: (t) => {
-                    d(t.target.value), s(t.target?.value);
+                  required: w,
+                  placeholder: O,
+                  className: ce(),
+                  onChange: (e) => {
+                    f(e.target.value), u(e.target?.value);
                   },
-                  onKeyDown: te,
-                  value: i !== null ? i : o,
-                  defaultValue: q,
+                  onKeyDown: ie,
+                  value: m !== null ? m : d,
+                  defaultValue: J,
                   disabled: !0
                 }
               ),
-              /* @__PURE__ */ e(
-                H,
+              /* @__PURE__ */ r(
+                K,
                 {
                   id: "btn-dynamic-data-input-rx-cross",
-                  onClick: le,
+                  onClick: se,
                   className: "absolute inset-y-0 right-1 flex items-center px-2 focus:border-transparent",
                   variant: "ghost",
-                  disabled: $,
-                  children: /* @__PURE__ */ e(
-                    be,
+                  disabled: E,
+                  children: /* @__PURE__ */ r(
+                    ke,
                     {
                       className: "text-neutral-900 dark:text-black-300 w-xs h-xs"
                     }
                   )
                 }
               ),
-              /* @__PURE__ */ e(
-                H,
+              /* @__PURE__ */ r(
+                K,
                 {
                   id: "btn-dynamic-data-input-ai-outline-pic-center",
-                  onClick: D,
+                  onClick: $,
                   className: "absolute inset-y-0 right-8 flex items-center px-2 focus:border-transparent",
                   variant: "ghost",
-                  disabled: $,
-                  children: /* @__PURE__ */ e(
-                    xe,
+                  disabled: E,
+                  children: /* @__PURE__ */ r(
+                    ve,
                     {
                       className: "text-neutral-900 dark:text-black-300 w-xs h-xs"
                     }
@@ -216,41 +246,41 @@ const Ie = ie(
                 }
               )
             ] }),
-            m && /* @__PURE__ */ e(
-              me,
+            o && /* @__PURE__ */ r(
+              be,
               {
                 className: "text-error-500 mt-1",
                 appearance: "custom",
                 size: "extra-small",
                 variant: "medium",
-                children: m
+                children: o
               }
             ),
-            a && B && /* @__PURE__ */ e(
-              B,
+            s && A && /* @__PURE__ */ r(
+              A,
               {
-                isVisible: a,
-                onSelect: (t) => {
-                  d(t), s(t);
+                isVisible: s,
+                onSelect: (e) => {
+                  f(e), u(e);
                 },
-                onClose: D,
-                dataKey: J,
-                dataSource: p
+                onClose: $,
+                dataKey: Q,
+                dataSource: x
               }
             )
           ] }),
-          f && r && y && S && /* @__PURE__ */ e(
+          b && i && B && I && /* @__PURE__ */ r(
             "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" && k(!1);
+              onClick: (e) => e.stopPropagation(),
+              onMouseDown: (e) => e.preventDefault(),
+              onKeyDown: (e) => {
+                e.key === "Escape" && F(!1);
               },
-              children: /* @__PURE__ */ e(S, { riskDetails: r })
+              children: /* @__PURE__ */ r(I, { riskDetails: i })
             }
           )
         ]

package/dist/components/forms/dynamic-data-input/DynamicDataInputField.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DynamicDataInputField.es.js","sources":["../../../../src/components/forms/dynamic-data-input/DynamicDataInputField.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any /\nimport cn from \"classnames\";\nimport { forwardRef, useEffect, useRef, useState } from \"react\";\nimport { Tooltip as AntTooltip } from \"antd\";\nimport { useTranslation } from 'react-i18next';\nimport { Typography } from \"../../data-display/typography/Typography\";\nimport { Label } from \"../../data-display/label/Label\";\nimport type { LabelType } from \"../../data-display/label/Label\";\nimport { BoltOutlined, CloseRounded, NoteAddOutlined, TableChartRounded } from \"@mui/icons-material\";\nimport { AIExtractedIndicator } from \"../../icons/AIExtractedIndicator\";\nimport { AIStarIcon } from \"../../icons/AIStarIcon\";\nimport { HelpIcon } from \"../../icons/HelpIcon\";\nimport Tooltip from \"../../tooltip/Tooltip\";\nimport IconButton from \"../../button/IconButton\";\nimport { InputLabel } from \"../shared/InputLabel\";\nimport {\n getConfidenceScoreBadgeClass,\n getConfidenceScoreBadgeColor,\n getConfidenceScoreBadgeFill,\n getConfidenceScoreBadgeTextColor,\n shouldShowConfidenceScore,\n} from \"../../../utils/confidenceScoreUtils\";\n\n/\n Confidence score type\n /\nexport type ConfidenceScoreType = \"low\" \| \"medium\" \| \"high\";\n\nexport type SourceMetaBBox = {\n b: number;\n l: number;\n r: number;\n t: number;\n};\n\nexport type SourceMetaItem = {\n bbox: SourceMetaBBox;\n confidence_score?: number;\n is_primary?: boolean;\n match_score?: number;\n match_type?: string;\n page_height: number;\n page_width: number;\n source_page: number;\n source_text?: string;\n};\n\n/\n Risk details interface for risk analysis integration\n /\nexport interface RiskDetails {\n color?: string;\n description?: string;\n hexBgColor?: string;\n hexBorderColor?: string;\n [key: string]: any;\n}\n\n/\n Risk details card component props - generic to allow consumer-specific risk types\n /\nexport interface RiskDetailsCardProps<T = any> {\n riskDetails: T;\n maxWidth?: string;\n showAllRisksSuggestions?: boolean;\n}\n\n/\n Props for the DynamicDataModal component\n /\nexport interface DynamicDataModalProps {\n isVisible: boolean;\n onSelect: (data: string \| number \| readonly string[] \| undefined) => void;\n onClose: () => void;\n dataKey: string;\n dataSource: string;\n}\n\n/\n Props for the DynamicDataInputField component\n /\nexport interface DynamicDataInputFieldProps {\n /* Unique identifier for the input /\n id: string;\n /* Label text to display above the input /\n label: string;\n /* Placeholder text for the input /\n placeholder?: string;\n /* Color for the input text /\n color?: string;\n /* Current value of the input /\n value: string \| number \| readonly string[] \| undefined;\n /* Whether the field is required /\n required?: boolean;\n /* Whether the required indicator shows as conditional (yellow instead of red) /\n isRequiredConditional?: boolean;\n /* Tags/labels to display next to the label /\n tags?: (string \| LabelType)[];\n /* Error message to display below the input /\n errorMessage?: string;\n /* Default value for the input /\n defaultValue?: string \| number \| readonly string[] \| undefined;\n /* Data source for dynamic data /\n dataSource: string;\n /* Data key for dynamic data /\n dataKey: string;\n /* Tooltip text for the help icon /\n tooltip?: string;\n /* Whether this is a GTN (Global Term Name) field /\n isGTN?: boolean;\n /* GTN field name for document integration /\n gtnName?: string;\n /* Whether the value was AI extracted /\n isAiExtracted?: boolean;\n /* Confidence percentage shown as a badge /\n confidenceScore?: number;\n /* Confidence classification for badge styling /\n confidenceType?: ConfidenceScoreType;\n /* Optional tooltip content for confidence badge /\n confidenceTooltip?: React.ReactNode;\n /* Source meta for confidence score /\n sourceMeta?: SourceMetaItem[];\n /* Handler fired when confidence score badge is clicked /\n onConfidenceScoreClick?: (sourceMeta: SourceMetaItem[]) => void;\n /* Whether the input is disabled /\n disabled?: boolean;\n /* Callback function called when value changes /\n onChange: (value: string \| number \| readonly string[] \| undefined) => void;\n /* Additional CSS classes for the label /\n labelClassName?: string;\n /* Whether this is a live field /\n isLiveField?: boolean;\n /* Whether to preserve original case in the label /\n originalCase?: boolean;\n /* Handler for adding GTN to document /\n onAddGTNToDocument?: (keyValuePair: { key: string; value: string }) => void;\n /* Risk details data /\n riskDetails?: RiskDetails;\n /* Whether risk analysis is open /\n isRiskAnalysisOpen?: boolean;\n /* Custom risk details card component /\n RiskDetailsCard?: React.ComponentType<RiskDetailsCardProps<any>>;\n /* Primary color shades for styling /\n primaryColorShades?: Record<number, string>;\n /* Whether recording is active (for pilot context) /\n isRecording?: boolean;\n /* Whether playback is active (for pilot context) /\n isPlaying?: boolean;\n /* Callback to set disable actions state /\n setDisableActions?: (disabled: boolean) => void;\n /* Toast function for deprecated field warning /\n showDeprecatedFieldWarning?: () => void;\n /* Dynamic data modal component /\n DynamicDataModal?: React.ComponentType<DynamicDataModalProps>;\n}\n\n/\n A highly customizable dynamic data input component with label, validation, and styling support.\n * Features dynamic data modal integration, GTN support, risk analysis support,\n * and comprehensive prop support for various use cases.\n \n @example\n * ```tsx\n * <DynamicDataInputField\n * id=\"dynamic-field\"\n * label=\"Dynamic Field\"\n * value={fieldValue}\n * onChange={(value) => setFieldValue(value)}\n * dataSource=\"sourceTable\"\n * dataKey=\"fieldKey\"\n * required\n * />\n * ```\n */\nexport const DynamicDataInputField = forwardRef<\n HTMLInputElement,\n DynamicDataInputFieldProps\n>(\n (\n {\n id,\n label,\n placeholder,\n value,\n onChange,\n errorMessage,\n defaultValue,\n required = false,\n isRequiredConditional = false,\n dataSource,\n dataKey,\n tags,\n tooltip = \"\",\n originalCase = false,\n color = \"\",\n isGTN = false,\n gtnName,\n isAiExtracted = false,\n confidenceScore,\n confidenceType = \"high\",\n confidenceTooltip,\n sourceMeta = [],\n onConfidenceScoreClick,\n labelClassName,\n disabled = false,\n isLiveField = false,\n onAddGTNToDocument,\n riskDetails,\n isRiskAnalysisOpen = false,\n RiskDetailsCard,\n primaryColorShades,\n isRecording: _isRecording = false,\n isPlaying: _isPlaying = false,\n setDisableActions,\n showDeprecatedFieldWarning,\n DynamicDataModal,\n },\n ref\n ) => {\n const { t } = useTranslation();\n const [isHovered, setIsHovered] = useState(false);\n const [inputValue, setInputValue] = useState<\n string \| number \| readonly string[] \| undefined\n >(value);\n const [showDynamicDataModal, setShowDynamicDataModal] = useState(false);\n\n const inputRef = useRef<HTMLInputElement>(null);\n\n // Use forwarded ref or internal ref\n const combinedRef = (ref as React.RefObject<HTMLInputElement>) \|\| inputRef;\n\n const toggleDynamicDataModal = () => {\n if (showDynamicDataModal) {\n setDisableActions?.(false);\n } else {\n setDisableActions?.(true);\n }\n setShowDynamicDataModal(!showDynamicDataModal);\n };\n\n const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n if (event.keyCode === 9 \|\| event.key === \"Enter\") {\n const currentRef = combinedRef.current \|\| inputRef.current;\n if (currentRef) {\n if (inputValue !== null) {\n onChange(inputValue);\n }\n setInputValue(inputValue);\n currentRef.blur();\n }\n }\n };\n\n const handleClear = () => {\n setInputValue(\"\");\n onChange(\"\");\n };\n\n const handleAddGTNToDocument = (_value: string) => {\n if (onAddGTNToDocument && gtnName) {\n const keyValuePair = {\n key: gtnName,\n value: _value,\n };\n onAddGTNToDocument(keyValuePair);\n }\n };\n\n const getClassName = (): string => {\n const baseClasses =\n \"border h-8 text-sm rounded-lg block w-full p-2.5 font-inter font-medium\";\n const borderColor = errorMessage\n ? \"border-red-300\"\n : isRiskAnalysisOpen && riskDetails?.color\n ? `border-${riskDetails?.color}-300`\n : \"border-gray-300 dark:border-black-600\";\n const placeholderColor = `placeholder:text-neutral-900 dark:placeholder:text-black-400`;\n const backgroundColor = `${\n isRiskAnalysisOpen && riskDetails?.color\n ? `bg-${riskDetails?.color}-50`\n : \"bg-gray-200 dark:bg-black-600 \"\n } ${color ? color : \"text-neutral-900 dark:text-black-200\"}`;\n\n return `${baseClasses} ${borderColor} ${backgroundColor} ${placeholderColor}`;\n };\n\n useEffect(() => {\n if (showDynamicDataModal && !dataSource) {\n showDeprecatedFieldWarning?.();\n setShowDynamicDataModal(false);\n }\n }, [showDynamicDataModal, dataSource, showDeprecatedFieldWarning]);\n\n // Sync inputValue with value prop\n useEffect(() => {\n setInputValue(value);\n }, [value]);\n\n return (\n <div\n className={cn(\n `flex gap-0.5 w-full relative`,\n isHovered && isGTN\n ? \"border rounded-lg border-primary-100 bg-primary-50 p-1\"\n : \"\",\n { \"error-field\": !!errorMessage }\n )}\n onMouseEnter={() => setIsHovered(true)}\n onMouseLeave={() => setIsHovered(false)}\n >\n {isGTN && !isHovered ? (\n <div className=\"w-1 h-1 bg-primary-600 rounded-full animate-blink mt-1.5\" />\n ) : null}\n\n <div className={cn(`flex flex-col w-full`)}>\n <label\n htmlFor=\"text\"\n className={`text-xs font-medium text-gray-600 inline-flex items-center gap-1 ${\n !originalCase ? \"capitalize\" : \"\"\n } ${labelClassName \|\| \"\"}`}\n >\n <div className=\"grid w-full grid-cols-[minmax(0,1fr)_auto] items-start gap-x-1\">\n <div className=\"inline-flex min-w-0 items-center gap-1 flex-wrap\">\n <InputLabel label={label \|\| \"\"} required={required \|\| false} isRequiredConditional={isRequiredConditional \|\| false} />\n {isLiveField && (\n <BoltOutlined\n sx={{\n fontSize: 16,\n color: \"var(--color-primary-600)\",\n rotate: \"15deg\",\n }}\n />\n )}\n {isAiExtracted && !shouldShowConfidenceScore(confidenceScore) && <AIExtractedIndicator />}\n <Label labels={tags} />\n {tooltip && (\n <Tooltip placement=\"top\" title={tooltip}>\n <div className=\"cursor-pointer\">\n <HelpIcon className=\"w-icon-sm h-icon-sm\" />\n </div>\n </Tooltip>\n )}\n </div>\n\n <div className=\"flex items-center gap-1 justify-self-end\">\n {(shouldShowConfidenceScore(confidenceScore) && confidenceType) ? (\n <Tooltip\n placement=\"top-end\"\n title={confidenceTooltip ?? \"\"}\n hideTooltip={confidenceTooltip === undefined \|\| confidenceTooltip === null}\n className=\"cursor-pointer\"\n >\n <div\n className={cn(\n \"inline-flex min-w-[50px] items-center gap-1 rounded-md px-1 py-0.5\",\n getConfidenceScoreBadgeClass(confidenceType)\n )}\n onClick={() => onConfidenceScoreClick?.(sourceMeta)}\n >\n <AIStarIcon\n size={12}\n fill={getConfidenceScoreBadgeColor(confidenceType)}\n fillSecondary={getConfidenceScoreBadgeFill(confidenceType)}\n />\n <span className={cn(\"text-xs font-medium leading-4\", getConfidenceScoreBadgeTextColor(confidenceType))}>\n {confidenceScore}%\n </span>\n </div>\n </Tooltip>\n ) : null}\n {isGTN && isHovered && onAddGTNToDocument ? (\n <button\n id=\"btn-dynamic-data-input-add-to-document\"\n className=\"cursor-pointer\"\n onClick={() => handleAddGTNToDocument(value?.toString() \|\| \"\")}\n type=\"button\"\n >\n <AntTooltip placement=\"top\" title={t(\"Add to document\")}>\n <NoteAddOutlined\n sx={{\n fontSize: 16,\n color:\n primaryColorShades?.[600] \|\| \"var(--color-primary-600)\",\n }}\n />\n </AntTooltip>\n </button>\n ) : null}\n </div>\n </div>\n </label>\n <label className=\"relative block mt-1\">\n <input\n id={id}\n ref={combinedRef}\n required={required}\n placeholder={placeholder}\n className={getClassName()}\n onChange={(e) => {\n onChange(e.target.value);\n setInputValue(e.target?.value);\n }}\n onKeyDown={handleKeyDown}\n value={inputValue !== null ? inputValue : value}\n defaultValue={defaultValue}\n disabled={true}\n />\n\n <IconButton\n id={`btn-dynamic-data-input-rx-cross`}\n onClick={handleClear}\n className=\"absolute inset-y-0 right-1 flex items-center px-2 focus:border-transparent\"\n variant=\"ghost\"\n disabled={disabled}\n >\n <CloseRounded\n className=\"text-neutral-900 dark:text-black-300 w-xs h-xs\"\n />\n </IconButton>\n\n <IconButton\n id={`btn-dynamic-data-input-ai-outline-pic-center`}\n onClick={toggleDynamicDataModal}\n className=\"absolute inset-y-0 right-8 flex items-center px-2 focus:border-transparent\"\n variant=\"ghost\"\n disabled={disabled}\n >\n <TableChartRounded\n className=\"text-neutral-900 dark:text-black-300 w-xs h-xs\"\n />\n </IconButton>\n </label>\n\n {errorMessage && (\n <Typography\n className=\"text-error-500 mt-1\"\n appearance=\"custom\"\n size=\"extra-small\"\n variant=\"medium\"\n >\n {errorMessage}\n </Typography>\n )}\n\n {showDynamicDataModal && DynamicDataModal && (\n <DynamicDataModal\n isVisible={showDynamicDataModal}\n onSelect={(data) => {\n onChange(data);\n setInputValue(data);\n }}\n onClose={toggleDynamicDataModal}\n dataKey={dataKey}\n dataSource={dataSource}\n />\n )}\n </div>\n\n {isHovered &&\n riskDetails &&\n isRiskAnalysisOpen &&\n RiskDetailsCard && (\n <div\n role=\"tooltip\"\n tabIndex={0}\n className=\"absolute left-0 right-0 top-[95%] mt-1 z-50 bg-white dark:bg-black-600 rounded-xl\"\n onClick={(e) => e.stopPropagation()}\n onMouseDown={(e) => e.preventDefault()}\n onKeyDown={(e) => {\n if (e.key === \"Escape\") {\n setIsHovered(false);\n }\n }}\n >\n <RiskDetailsCard riskDetails={riskDetails} />\n </div>\n )}\n </div>\n );\n }\n);\n\nDynamicDataInputField.displayName = \"DynamicDataInputField\";\n\n"],"names":["DynamicDataInputField","forwardRef","id","label","placeholder","value","onChange","errorMessage","defaultValue","required","isRequiredConditional","dataSource","dataKey","tags","tooltip","originalCase","color","isGTN","gtnName","isAiExtracted","confidenceScore","confidenceType","confidenceTooltip","sourceMeta","onConfidenceScoreClick","labelClassName","disabled","isLiveField","onAddGTNToDocument","riskDetails","isRiskAnalysisOpen","RiskDetailsCard","primaryColorShades","_isRecording","_isPlaying","setDisableActions","showDeprecatedFieldWarning","DynamicDataModal","ref","t","useTranslation","isHovered","setIsHovered","useState","inputValue","setInputValue","showDynamicDataModal","setShowDynamicDataModal","inputRef","useRef","combinedRef","toggleDynamicDataModal","handleKeyDown","event","currentRef","handleClear","handleAddGTNToDocument","_value","getClassName","baseClasses","borderColor","placeholderColor","backgroundColor","useEffect","jsxs","cn","jsx","InputLabel","BoltOutlined","shouldShowConfidenceScore","AIExtractedIndicator","Label","Tooltip","HelpIcon","getConfidenceScoreBadgeClass","AIStarIcon","getConfidenceScoreBadgeColor","getConfidenceScoreBadgeFill","getConfidenceScoreBadgeTextColor","AntTooltip","NoteAddOutlined","e","IconButton","CloseRounded","TableChartRounded","Typography","data"],"mappings":"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"}
1	+ {"version":3,"file":"DynamicDataInputField.es.js","sources":["../../../../src/components/forms/dynamic-data-input/DynamicDataInputField.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any /\nimport cn from \"classnames\";\nimport { forwardRef, useEffect, useRef, useState } from \"react\";\nimport { Tooltip as AntTooltip } from \"antd\";\nimport { useTranslation } from 'react-i18next';\nimport { Typography } from \"../../data-display/typography/Typography\";\nimport { Label } from \"../../data-display/label/Label\";\nimport type { LabelType } from \"../../data-display/label/Label\";\nimport { BoltOutlined, CloseRounded, NoteAddOutlined, TableChartRounded } from \"@mui/icons-material\";\nimport { AIExtractedIndicator } from \"../../icons/AIExtractedIndicator\";\nimport { AIStarIcon } from \"../../icons/AIStarIcon\";\nimport { HelpIcon } from \"../../icons/HelpIcon\";\nimport Tooltip from \"../../tooltip/Tooltip\";\nimport IconButton from \"../../button/IconButton\";\nimport { InputLabel } from \"../shared/InputLabel\";\nimport {\n getConfidenceScoreBadgeClass,\n getConfidenceScoreBadgeColor,\n getConfidenceScoreBadgeFill,\n getConfidenceScoreBadgeTextColor,\n shouldShowConfidenceScore,\n} from \"../../../utils/confidenceScoreUtils\";\n\n/\n Confidence score type\n /\nexport type ConfidenceScoreType = \"low\" \| \"medium\" \| \"high\";\n\nexport type SourceMetaBBox = {\n b: number;\n l: number;\n r: number;\n t: number;\n};\n\nexport type SourceMetaItem = {\n bbox: SourceMetaBBox;\n confidence_score?: number;\n is_primary?: boolean;\n match_score?: number;\n match_type?: string;\n page_height: number;\n page_width: number;\n source_page: number;\n source_text?: string;\n};\n\n/\n Risk details interface for risk analysis integration\n /\nexport interface RiskDetails {\n color?: string;\n description?: string;\n hexBgColor?: string;\n hexBorderColor?: string;\n [key: string]: any;\n}\n\n/\n Risk details card component props - generic to allow consumer-specific risk types\n /\nexport interface RiskDetailsCardProps<T = any> {\n riskDetails: T;\n maxWidth?: string;\n showAllRisksSuggestions?: boolean;\n}\n\n/* Visual emphasis for the input surface (background + border) /\nexport type DynamicDataInputFieldEmphasis =\n \| \"default\"\n \| \"modified\"\n \| \"deleted\"\n \| \"success\";\n\n/\n Props for the DynamicDataModal component\n /\nexport interface DynamicDataModalProps {\n isVisible: boolean;\n onSelect: (data: string \| number \| readonly string[] \| undefined) => void;\n onClose: () => void;\n dataKey: string;\n dataSource: string;\n}\n\n/\n Props for the DynamicDataInputField component\n /\nexport interface DynamicDataInputFieldProps {\n /* Unique identifier for the input /\n id: string;\n /* Label text to display above the input /\n label: string;\n /* Optional extra content in the label row (e.g. actions, badges) /\n labelExtra?: React.ReactNode;\n /* Placeholder text for the input /\n placeholder?: string;\n /* Color for the input text /\n color?: string;\n /* Current value of the input /\n value: string \| number \| readonly string[] \| undefined;\n /* Whether the field is required /\n required?: boolean;\n /* Whether the required indicator shows as conditional (yellow instead of red) /\n isRequiredConditional?: boolean;\n /* Tags/labels to display next to the label /\n tags?: (string \| LabelType)[];\n /* Error message to display below the input /\n errorMessage?: string;\n /* Default value for the input /\n defaultValue?: string \| number \| readonly string[] \| undefined;\n /* Data source for dynamic data /\n dataSource: string;\n /* Data key for dynamic data /\n dataKey: string;\n /* Tooltip text for the help icon /\n tooltip?: string;\n /* Whether this is a GTN (Global Term Name) field /\n isGTN?: boolean;\n /* GTN field name for document integration /\n gtnName?: string;\n /* Whether the value was AI extracted /\n isAiExtracted?: boolean;\n /* Confidence percentage shown as a badge /\n confidenceScore?: number;\n /* Confidence classification for badge styling /\n confidenceType?: ConfidenceScoreType;\n /* Optional tooltip content for confidence badge /\n confidenceTooltip?: React.ReactNode;\n /* Source meta for confidence score /\n sourceMeta?: SourceMetaItem[];\n /* Handler fired when confidence score badge is clicked /\n onConfidenceScoreClick?: (sourceMeta: SourceMetaItem[]) => void;\n /* Whether the input is disabled /\n disabled?: boolean;\n /* Callback function called when value changes /\n onChange: (value: string \| number \| readonly string[] \| undefined) => void;\n /* Additional CSS classes for the label /\n labelClassName?: string;\n /* Whether this is a live field /\n isLiveField?: boolean;\n /* Whether to preserve original case in the label /\n originalCase?: boolean;\n /* Handler for adding GTN to document /\n onAddGTNToDocument?: (keyValuePair: { key: string; value: string }) => void;\n /* Risk details data /\n riskDetails?: RiskDetails;\n /* Whether risk analysis is open /\n isRiskAnalysisOpen?: boolean;\n /* Custom risk details card component /\n RiskDetailsCard?: React.ComponentType<RiskDetailsCardProps<any>>;\n /* Primary color shades for styling /\n primaryColorShades?: Record<number, string>;\n /* Whether recording is active (for pilot context) /\n isRecording?: boolean;\n /* Whether playback is active (for pilot context) /\n isPlaying?: boolean;\n /* Callback to set disable actions state /\n setDisableActions?: (disabled: boolean) => void;\n /* Toast function for deprecated field warning /\n showDeprecatedFieldWarning?: () => void;\n /* Dynamic data modal component /\n DynamicDataModal?: React.ComponentType<DynamicDataModalProps>;\n /* Input surface style: `'modified'` — `--Warning-50` / `--Warning-200`; `'deleted'` — `--Error-50` / `--Error-200`, text `#475467`; `'success'` — `--Success-50` / `--Success-200`, text `#101828`. /\n inputEmphasis?: DynamicDataInputFieldEmphasis;\n}\n\n/\n A highly customizable dynamic data input component with label, validation, and styling support.\n * Features dynamic data modal integration, GTN support, risk analysis support,\n * and comprehensive prop support for various use cases.\n \n @example\n * ```tsx\n * <DynamicDataInputField\n * id=\"dynamic-field\"\n * label=\"Dynamic Field\"\n * value={fieldValue}\n * onChange={(value) => setFieldValue(value)}\n * dataSource=\"sourceTable\"\n * dataKey=\"fieldKey\"\n * required\n * />\n * ```\n */\nexport const DynamicDataInputField = forwardRef<\n HTMLInputElement,\n DynamicDataInputFieldProps\n>(\n (\n {\n id,\n label,\n labelExtra,\n placeholder,\n value,\n onChange,\n errorMessage,\n defaultValue,\n required = false,\n isRequiredConditional = false,\n dataSource,\n dataKey,\n tags,\n tooltip = \"\",\n originalCase = false,\n color = \"\",\n isGTN = false,\n gtnName,\n isAiExtracted = false,\n confidenceScore,\n confidenceType = \"high\",\n confidenceTooltip,\n sourceMeta = [],\n onConfidenceScoreClick,\n labelClassName,\n disabled = false,\n isLiveField = false,\n onAddGTNToDocument,\n riskDetails,\n isRiskAnalysisOpen = false,\n RiskDetailsCard,\n primaryColorShades,\n isRecording: _isRecording = false,\n isPlaying: _isPlaying = false,\n setDisableActions,\n showDeprecatedFieldWarning,\n DynamicDataModal,\n inputEmphasis = \"default\",\n },\n ref\n ) => {\n const { t } = useTranslation();\n const showRiskSkin = Boolean(isRiskAnalysisOpen && riskDetails?.color);\n const emphasisModifiedSkin =\n inputEmphasis === \"modified\" && !errorMessage && !showRiskSkin;\n const emphasisDeletedSkin =\n inputEmphasis === \"deleted\" && !errorMessage && !showRiskSkin;\n const emphasisSuccessSkin =\n inputEmphasis === \"success\" && !errorMessage && !showRiskSkin;\n const [isHovered, setIsHovered] = useState(false);\n const [inputValue, setInputValue] = useState<\n string \| number \| readonly string[] \| undefined\n >(value);\n const [showDynamicDataModal, setShowDynamicDataModal] = useState(false);\n\n const inputRef = useRef<HTMLInputElement>(null);\n\n // Use forwarded ref or internal ref\n const combinedRef = (ref as React.RefObject<HTMLInputElement>) \|\| inputRef;\n\n const toggleDynamicDataModal = () => {\n if (showDynamicDataModal) {\n setDisableActions?.(false);\n } else {\n setDisableActions?.(true);\n }\n setShowDynamicDataModal(!showDynamicDataModal);\n };\n\n const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n if (event.keyCode === 9 \|\| event.key === \"Enter\") {\n const currentRef = combinedRef.current \|\| inputRef.current;\n if (currentRef) {\n if (inputValue !== null) {\n onChange(inputValue);\n }\n setInputValue(inputValue);\n currentRef.blur();\n }\n }\n };\n\n const handleClear = () => {\n setInputValue(\"\");\n onChange(\"\");\n };\n\n const handleAddGTNToDocument = (_value: string) => {\n if (onAddGTNToDocument && gtnName) {\n const keyValuePair = {\n key: gtnName,\n value: _value,\n };\n onAddGTNToDocument(keyValuePair);\n }\n };\n\n const getClassName = (): string => {\n const baseClasses =\n \"border h-8 text-sm rounded-lg block w-full p-2.5 font-inter font-medium\";\n const placeholderColor = `placeholder:text-neutral-900 dark:placeholder:text-black-400`;\n\n if (errorMessage) {\n return cn(\n baseClasses,\n placeholderColor,\n \"border-red-300 bg-gray-200 dark:border-black-600 dark:bg-black-600\",\n color ? color : \"text-neutral-900 dark:text-black-200\"\n );\n }\n if (showRiskSkin && riskDetails?.color) {\n return cn(\n baseClasses,\n placeholderColor,\n `border-${riskDetails.color}-300 bg-${riskDetails.color}-50`,\n color ? color : \"text-neutral-900 dark:text-black-200\"\n );\n }\n if (emphasisDeletedSkin) {\n return cn(\n baseClasses,\n placeholderColor,\n \"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]\"\n );\n }\n if (emphasisModifiedSkin) {\n return cn(\n baseClasses,\n placeholderColor,\n \"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)]\"\n );\n }\n if (emphasisSuccessSkin) {\n return cn(\n baseClasses,\n placeholderColor,\n \"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]\"\n );\n }\n\n return cn(\n baseClasses,\n placeholderColor,\n \"border-gray-300 bg-gray-200 dark:border-black-600 dark:bg-black-600\",\n color ? color : \"text-neutral-900 dark:text-black-200\"\n );\n };\n\n useEffect(() => {\n if (showDynamicDataModal && !dataSource) {\n showDeprecatedFieldWarning?.();\n setShowDynamicDataModal(false);\n }\n }, [showDynamicDataModal, dataSource, showDeprecatedFieldWarning]);\n\n // Sync inputValue with value prop\n useEffect(() => {\n setInputValue(value);\n }, [value]);\n\n return (\n <div\n className={cn(\n `flex gap-0.5 w-full relative`,\n isHovered && isGTN\n ? \"border rounded-lg border-primary-100 bg-primary-50 p-1\"\n : \"\",\n { \"error-field\": !!errorMessage }\n )}\n onMouseEnter={() => setIsHovered(true)}\n onMouseLeave={() => setIsHovered(false)}\n >\n {isGTN && !isHovered ? (\n <div className=\"w-1 h-1 bg-primary-600 rounded-full animate-blink mt-1.5\" />\n ) : null}\n\n <div className={cn(`flex flex-col w-full`)}>\n <label\n htmlFor=\"text\"\n className={`text-xs font-medium text-gray-600 inline-flex items-center gap-1 ${\n !originalCase ? \"capitalize\" : \"\"\n } ${labelClassName \|\| \"\"}`}\n >\n <div className=\"grid w-full grid-cols-[minmax(0,1fr)_auto] items-start gap-x-1\">\n <div className=\"inline-flex min-w-0 items-center gap-1 flex-wrap\">\n <InputLabel label={label \|\| \"\"} required={required \|\| false} isRequiredConditional={isRequiredConditional \|\| false} />\n {isLiveField && (\n <BoltOutlined\n sx={{\n fontSize: 16,\n color: \"var(--color-primary-600)\",\n rotate: \"15deg\",\n }}\n />\n )}\n {isAiExtracted && !shouldShowConfidenceScore(confidenceScore) && <AIExtractedIndicator />}\n <Label labels={tags} />\n {tooltip && (\n <Tooltip placement=\"top\" title={tooltip}>\n <div className=\"cursor-pointer\">\n <HelpIcon className=\"w-icon-sm h-icon-sm\" />\n </div>\n </Tooltip>\n )}\n {labelExtra}\n </div>\n\n <div className=\"flex items-center gap-1 justify-self-end\">\n {(shouldShowConfidenceScore(confidenceScore) && confidenceType) ? (\n <Tooltip\n placement=\"top-end\"\n title={confidenceTooltip ?? \"\"}\n hideTooltip={confidenceTooltip === undefined \|\| confidenceTooltip === null}\n className=\"cursor-pointer\"\n >\n <div\n className={cn(\n \"inline-flex min-w-[50px] items-center gap-1 rounded-md px-1 py-0.5\",\n getConfidenceScoreBadgeClass(confidenceType)\n )}\n onClick={() => onConfidenceScoreClick?.(sourceMeta)}\n >\n <AIStarIcon\n size={12}\n fill={getConfidenceScoreBadgeColor(confidenceType)}\n fillSecondary={getConfidenceScoreBadgeFill(confidenceType)}\n />\n <span className={cn(\"text-xs font-medium leading-4\", getConfidenceScoreBadgeTextColor(confidenceType))}>\n {confidenceScore}%\n </span>\n </div>\n </Tooltip>\n ) : null}\n {isGTN && isHovered && onAddGTNToDocument ? (\n <button\n id=\"btn-dynamic-data-input-add-to-document\"\n className=\"cursor-pointer\"\n onClick={() => handleAddGTNToDocument(value?.toString() \|\| \"\")}\n type=\"button\"\n >\n <AntTooltip placement=\"top\" title={t(\"Add to document\")}>\n <NoteAddOutlined\n sx={{\n fontSize: 16,\n color:\n primaryColorShades?.[600] \|\| \"var(--color-primary-600)\",\n }}\n />\n </AntTooltip>\n </button>\n ) : null}\n </div>\n </div>\n </label>\n <label className=\"relative block mt-1\">\n <input\n id={id}\n ref={combinedRef}\n required={required}\n placeholder={placeholder}\n className={getClassName()}\n onChange={(e) => {\n onChange(e.target.value);\n setInputValue(e.target?.value);\n }}\n onKeyDown={handleKeyDown}\n value={inputValue !== null ? inputValue : value}\n defaultValue={defaultValue}\n disabled={true}\n />\n\n <IconButton\n id={`btn-dynamic-data-input-rx-cross`}\n onClick={handleClear}\n className=\"absolute inset-y-0 right-1 flex items-center px-2 focus:border-transparent\"\n variant=\"ghost\"\n disabled={disabled}\n >\n <CloseRounded\n className=\"text-neutral-900 dark:text-black-300 w-xs h-xs\"\n />\n </IconButton>\n\n <IconButton\n id={`btn-dynamic-data-input-ai-outline-pic-center`}\n onClick={toggleDynamicDataModal}\n className=\"absolute inset-y-0 right-8 flex items-center px-2 focus:border-transparent\"\n variant=\"ghost\"\n disabled={disabled}\n >\n <TableChartRounded\n className=\"text-neutral-900 dark:text-black-300 w-xs h-xs\"\n />\n </IconButton>\n </label>\n\n {errorMessage && (\n <Typography\n className=\"text-error-500 mt-1\"\n appearance=\"custom\"\n size=\"extra-small\"\n variant=\"medium\"\n >\n {errorMessage}\n </Typography>\n )}\n\n {showDynamicDataModal && DynamicDataModal && (\n <DynamicDataModal\n isVisible={showDynamicDataModal}\n onSelect={(data) => {\n onChange(data);\n setInputValue(data);\n }}\n onClose={toggleDynamicDataModal}\n dataKey={dataKey}\n dataSource={dataSource}\n />\n )}\n </div>\n\n {isHovered &&\n riskDetails &&\n isRiskAnalysisOpen &&\n RiskDetailsCard && (\n <div\n role=\"tooltip\"\n tabIndex={0}\n className=\"absolute left-0 right-0 top-[95%] mt-1 z-50 bg-white dark:bg-black-600 rounded-xl\"\n onClick={(e) => e.stopPropagation()}\n onMouseDown={(e) => e.preventDefault()}\n onKeyDown={(e) => {\n if (e.key === \"Escape\") {\n setIsHovered(false);\n }\n }}\n >\n <RiskDetailsCard riskDetails={riskDetails} />\n </div>\n )}\n </div>\n );\n }\n);\n\nDynamicDataInputField.displayName = \"DynamicDataInputField\";\n\n"],"names":["DynamicDataInputField","forwardRef","id","label","labelExtra","placeholder","value","onChange","errorMessage","defaultValue","required","isRequiredConditional","dataSource","dataKey","tags","tooltip","originalCase","color","isGTN","gtnName","isAiExtracted","confidenceScore","confidenceType","confidenceTooltip","sourceMeta","onConfidenceScoreClick","labelClassName","disabled","isLiveField","onAddGTNToDocument","riskDetails","isRiskAnalysisOpen","RiskDetailsCard","primaryColorShades","_isRecording","_isPlaying","setDisableActions","showDeprecatedFieldWarning","DynamicDataModal","inputEmphasis","ref","t","useTranslation","showRiskSkin","emphasisModifiedSkin","emphasisDeletedSkin","emphasisSuccessSkin","isHovered","setIsHovered","useState","inputValue","setInputValue","showDynamicDataModal","setShowDynamicDataModal","inputRef","useRef","combinedRef","toggleDynamicDataModal","handleKeyDown","event","currentRef","handleClear","handleAddGTNToDocument","_value","getClassName","baseClasses","placeholderColor","cn","useEffect","jsxs","jsx","InputLabel","BoltOutlined","shouldShowConfidenceScore","AIExtractedIndicator","Label","Tooltip","HelpIcon","getConfidenceScoreBadgeClass","AIStarIcon","getConfidenceScoreBadgeColor","getConfidenceScoreBadgeFill","getConfidenceScoreBadgeTextColor","AntTooltip","NoteAddOutlined","IconButton","CloseRounded","TableChartRounded","Typography","data"],"mappings":"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"}

package/dist/components/forms/link-input/LinkInputField.cjs.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),l=require("../../../_virtual/index.cjs.js");require("react");const q=require("react-i18next"),m=require("../base-input-field/BaseInputField.cjs.js"),r=require("../../icon/icons.generated.cjs.js"),p="[&_input]:!border-0 [&_input]:!shadow-none [&_input]:!rounded-none [&_input]:!bg-transparent [&_input]:!h-8 [&_input]:!pl-1",k=({urlId:g,urlValue:n,onUrlChange:j,urlPlaceholder:c,urlError:t,urlClassName:b,onUrlBlur:v,aliasId:N,aliasValue:s,onAliasChange:f,aliasPlaceholder:o,aliasError:i,aliasClassName:y,aliasFixedWidth:I,disabled:d=!1,label:x,withBorder:a=!1,readOnly:w=!1})=>{const{t:h}=q.useTranslation(),F=c===void 0?h("Enter URL"):c,_=o===void 0?h("Enter Alias"):o,u=!!t\|\|!!i;return w?e.jsxs("div",{className:"w-full",children:[x,e.jsxs("div",{className:"flex items-center gap-2 min-h-9",children:[e.jsx(r.KeychainIcon,{className:"text-black-300 shrink-0 w-icon h-icon"}),n?e.jsxs(e.Fragment,{children:[e.jsx("a",{href:n,target:"_blank",rel:"noopener noreferrer",className:"text-primary-600 dark:text-primary-400 hover:underline text-sm truncate",children:s\|\|n}),s?e.jsxs(e.Fragment,{children:[e.jsx("div",{className:"h-4 w-px bg-neutral-300 dark:bg-grey-800 shrink-0"}),e.jsx(r.MentionIcon,{className:"text-black-300 shrink-0 w-icon h-icon"}),e.jsx("span",{className:"text-neutral-500 dark:text-neutral-400 text-sm shrink-0",children:s})]}):null]}):e.jsx("span",{className:"text-neutral-400 dark:text-neutral-600 text-sm",children:"—"})]})]}):e.jsxs("div",{className:"w-full",children:[x,e.jsxs("div",{className:l("flex items-center h-9 overflow-hidden",{"border rounded-lg bg-white dark:bg-black-700":a,"border-error-500":a&&u,"border-gray-300 dark:border-black-500":a&&!u}),children:[e.jsx(r.KeychainIcon,{className:"ml-2 text-black-300 shrink-0 w-icon h-icon"}),e.jsx("div",{className:l("min-w-0 flex-1",p,b),children:e.jsx(m.BaseInputField,{id:g,originalCase:!0,type:"url",value:n,onChange:j,placeholder:F??"",disabled:d,onBlur:v,errorMessage:""})}),e.jsx("div",{className:"h-full w-px bg-neutral-300 dark:bg-grey-800 shrink-0"}),e.jsx(r.MentionIcon,{className:"ml-2 text-black-300 shrink-0 w-icon h-icon"}),e.jsx("div",{className:l("shrink-0",p,I,y),children:e.jsx(m.BaseInputField,{id:N,originalCase:!0,type:"text",value:s,onChange:f,placeholder:_??"",disabled:d,errorMessage:""})})]}),t?e.jsx("p",{className:"text-error-500 text-xs mt-1",children:t}):null,i?e.jsx("p",{className:"text-error-500 text-xs mt-1",children:i}):null]})};k.displayName="LinkInputField";exports.LinkInputField=k;
2	+ //# sourceMappingURL=LinkInputField.cjs.js.map

package/dist/components/forms/link-input/LinkInputField.cjs.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"LinkInputField.cjs.js","sources":["../../../../src/components/forms/link-input/LinkInputField.tsx"],"sourcesContent":["import cn from \"classnames\";\nimport { type FC, type ReactNode } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { BaseInputField } from \"../base-input-field/BaseInputField\";\nimport { KeychainIcon, MentionIcon } from \"../../icon\";\n\nexport interface LinkInputFieldProps {\n /** Unique identifier for the URL input */\n urlId?: string;\n /** Current URL value */\n urlValue: string;\n /** Callback fired when the URL value changes */\n onUrlChange: (value: string) => void;\n /** Placeholder text for the URL input */\n urlPlaceholder?: string | null;\n /** Error message for the URL input */\n urlError?: string;\n /** Additional CSS classes for the URL input wrapper */\n urlClassName?: string;\n /** Callback fired when the URL input loses focus */\n onUrlBlur?: () => void;\n\n /** Unique identifier for the alias input */\n aliasId?: string;\n /** Current alias value */\n aliasValue: string;\n /** Callback fired when the alias value changes */\n onAliasChange: (value: string) => void;\n /** Placeholder text for the alias input */\n aliasPlaceholder?: string | null;\n /** Error message for the alias input */\n aliasError?: string;\n /** Additional CSS classes for the alias input wrapper */\n aliasClassName?: string;\n /** Tailwind width class for the alias column e.g. `'w-[140px]'`. Omit for natural width. */\n aliasFixedWidth?: string;\n\n /** Whether both inputs are disabled */\n disabled?: boolean;\n /** Optional label rendered above the input row */\n label?: ReactNode;\n /** Wrap the edit row in a bordered container (useful for standalone field usage) */\n withBorder?: boolean;\n /**\n * Render a read-only link view instead of inputs.\n * Use when the field is disabled and anchor links are preferred over inputs.\n */\n readOnly?: boolean;\n}\n\nconst inputOverrides =\n \"[&_input]:!border-0 [&_input]:!shadow-none [&_input]:!rounded-none [&_input]:!bg-transparent [&_input]:!h-8 [&_input]:!pl-1\";\n\n/**\n * A combined URL + alias input field rendered as a single bordered row.\n * Supports a read-only anchor-link view, optional label, error messages per sub-field,\n * and a fixed-width alias column.\n *\n * @example\n * ```tsx\n * <LinkInputField\n * urlValue={url}\n * onUrlChange={setUrl}\n * aliasValue={alias}\n * onAliasChange={setAlias}\n * withBorder\n * />\n * ```\n */\nexport const LinkInputField: FC<LinkInputFieldProps> = ({\n urlId,\n urlValue,\n onUrlChange,\n urlPlaceholder,\n urlError,\n urlClassName,\n onUrlBlur,\n aliasId,\n aliasValue,\n onAliasChange,\n aliasPlaceholder,\n aliasError,\n aliasClassName,\n aliasFixedWidth,\n disabled = false,\n label,\n withBorder = false,\n readOnly = false,\n}) => {\n const { t } = useTranslation();\n\n const resolvedUrlPlaceholder =\n urlPlaceholder === undefined ? t(\"Enter URL\") : urlPlaceholder;\n const resolvedAliasPlaceholder =\n aliasPlaceholder === undefined ? t(\"Enter Alias\") : aliasPlaceholder;\n const hasAnyError = !!urlError || !!aliasError;\n\n if (readOnly) {\n return (\n <div className=\"w-full\">\n {label}\n <div className=\"flex items-center gap-2 min-h-9\">\n <KeychainIcon className=\"text-black-300 shrink-0 w-icon h-icon\" />\n {urlValue ? (\n <>\n <a\n href={urlValue}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n className=\"text-primary-600 dark:text-primary-400 hover:underline text-sm truncate\"\n >\n {aliasValue || urlValue}\n </a>\n {aliasValue ? (\n <>\n <div className=\"h-4 w-px bg-neutral-300 dark:bg-grey-800 shrink-0\" />\n <MentionIcon className=\"text-black-300 shrink-0 w-icon h-icon\" />\n <span className=\"text-neutral-500 dark:text-neutral-400 text-sm shrink-0\">\n {aliasValue}\n </span>\n </>\n ) : null}\n </>\n ) : (\n <span className=\"text-neutral-400 dark:text-neutral-600 text-sm\">\n —\n </span>\n )}\n </div>\n </div>\n );\n }\n\n return (\n <div className=\"w-full\">\n {label}\n <div\n className={cn(\"flex items-center h-9 overflow-hidden\", {\n \"border rounded-lg bg-white dark:bg-black-700\": withBorder,\n \"border-error-500\": withBorder && hasAnyError,\n \"border-gray-300 dark:border-black-500\": withBorder && !hasAnyError,\n })}\n >\n <KeychainIcon className=\"ml-2 text-black-300 shrink-0 w-icon h-icon\" />\n <div className={cn(\"min-w-0 flex-1\", inputOverrides, urlClassName)}>\n <BaseInputField\n id={urlId}\n originalCase\n type=\"url\"\n value={urlValue}\n onChange={onUrlChange}\n placeholder={resolvedUrlPlaceholder ?? \"\"}\n disabled={disabled}\n onBlur={onUrlBlur}\n errorMessage=\"\"\n />\n </div>\n <div className=\"h-full w-px bg-neutral-300 dark:bg-grey-800 shrink-0\" />\n <MentionIcon className=\"ml-2 text-black-300 shrink-0 w-icon h-icon\" />\n <div className={cn(\"shrink-0\", inputOverrides, aliasFixedWidth, aliasClassName)}>\n <BaseInputField\n id={aliasId}\n originalCase\n type=\"text\"\n value={aliasValue}\n onChange={onAliasChange}\n placeholder={resolvedAliasPlaceholder ?? \"\"}\n disabled={disabled}\n errorMessage=\"\"\n />\n </div>\n </div>\n {urlError ? (\n <p className=\"text-error-500 text-xs mt-1\">{urlError}</p>\n ) : null}\n {aliasError ? (\n <p className=\"text-error-500 text-xs mt-1\">{aliasError}</p>\n ) : null}\n </div>\n );\n};\n\nLinkInputField.displayName = \"LinkInputField\";\n"],"names":["inputOverrides","LinkInputField","urlId","urlValue","onUrlChange","urlPlaceholder","urlError","urlClassName","onUrlBlur","aliasId","aliasValue","onAliasChange","aliasPlaceholder","aliasError","aliasClassName","aliasFixedWidth","disabled","label","withBorder","readOnly","t","useTranslation","resolvedUrlPlaceholder","resolvedAliasPlaceholder","hasAnyError","jsxs","jsx","KeychainIcon","Fragment","MentionIcon","cn","BaseInputField"],"mappings":"yTAkDMA,EACJ,8HAkBWC,EAA0C,CAAC,CACtD,MAAAC,EACA,SAAAC,EACA,YAAAC,EACA,eAAAC,EACA,SAAAC,EACA,aAAAC,EACA,UAAAC,EACA,QAAAC,EACA,WAAAC,EACA,cAAAC,EACA,iBAAAC,EACA,WAAAC,EACA,eAAAC,EACA,gBAAAC,EACA,SAAAC,EAAW,GACX,MAAAC,EACA,WAAAC,EAAa,GACb,SAAAC,EAAW,EACb,IAAM,CACJ,KAAM,CAAE,EAAAC,CAAA,EAAMC,iBAAA,EAERC,EACJjB,IAAmB,OAAYe,EAAE,WAAW,EAAIf,EAC5CkB,EACJX,IAAqB,OAAYQ,EAAE,aAAa,EAAIR,EAChDY,EAAc,CAAC,CAAClB,GAAY,CAAC,CAACO,EAEpC,OAAIM,EAEAM,EAAAA,KAAC,MAAA,CAAI,UAAU,SACZ,SAAA,CAAAR,EACDQ,EAAAA,KAAC,MAAA,CAAI,UAAU,kCACb,SAAA,CAAAC,EAAAA,IAACC,EAAAA,aAAA,CAAa,UAAU,uCAAA,CAAwC,EAC/DxB,EACCsB,EAAAA,KAAAG,WAAA,CACE,SAAA,CAAAF,EAAAA,IAAC,IAAA,CACC,KAAMvB,EACN,OAAO,SACP,IAAI,sBACJ,UAAU,0EAET,SAAAO,GAAcP,CAAA,CAAA,EAEhBO,EACCe,EAAAA,KAAAG,WAAA,CACE,SAAA,CAAAF,EAAAA,IAAC,MAAA,CAAI,UAAU,mDAAA,CAAoD,EACnEA,EAAAA,IAACG,EAAAA,YAAA,CAAY,UAAU,uCAAA,CAAwC,EAC/DH,EAAAA,IAAC,OAAA,CAAK,UAAU,0DACb,SAAAhB,CAAA,CACH,CAAA,CAAA,CACF,EACE,IAAA,CAAA,CACN,EAEAgB,EAAAA,IAAC,OAAA,CAAK,UAAU,iDAAiD,SAAA,GAAA,CAEjE,CAAA,CAAA,CAEJ,CAAA,EACF,EAKFD,EAAAA,KAAC,MAAA,CAAI,UAAU,SACZ,SAAA,CAAAR,EACDQ,EAAAA,KAAC,MAAA,CACC,UAAWK,EAAG,wCAAyC,CACrD,+CAAgDZ,EAChD,mBAAoBA,GAAcM,EAClC,wCAAyCN,GAAc,CAACM,CAAA,CACzD,EAED,SAAA,CAAAE,EAAAA,IAACC,EAAAA,aAAA,CAAa,UAAU,4CAAA,CAA6C,QACpE,MAAA,CAAI,UAAWG,EAAG,iBAAkB9B,EAAgBO,CAAY,EAC/D,SAAAmB,EAAAA,IAACK,EAAAA,eAAA,CACC,GAAI7B,EACJ,aAAY,GACZ,KAAK,MACL,MAAOC,EACP,SAAUC,EACV,YAAakB,GAA0B,GACvC,SAAAN,EACA,OAAQR,EACR,aAAa,EAAA,CAAA,EAEjB,EACAkB,EAAAA,IAAC,MAAA,CAAI,UAAU,sDAAA,CAAuD,EACtEA,EAAAA,IAACG,EAAAA,YAAA,CAAY,UAAU,4CAAA,CAA6C,EACpEH,EAAAA,IAAC,OAAI,UAAWI,EAAG,WAAY9B,EAAgBe,EAAiBD,CAAc,EAC5E,SAAAY,EAAAA,IAACK,EAAAA,eAAA,CACC,GAAItB,EACJ,aAAY,GACZ,KAAK,OACL,MAAOC,EACP,SAAUC,EACV,YAAaY,GAA4B,GACzC,SAAAP,EACA,aAAa,EAAA,CAAA,CACf,CACF,CAAA,CAAA,CAAA,EAEDV,EACCoB,EAAAA,IAAC,IAAA,CAAE,UAAU,8BAA+B,WAAS,EACnD,KACHb,EACCa,EAAAA,IAAC,IAAA,CAAE,UAAU,8BAA+B,WAAW,EACrD,IAAA,EACN,CAEJ,EAEAzB,EAAe,YAAc"}