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

@lax-wp/design-system 0.13.33 → 0.13.35

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 (169) hide show

package/dist/components/forms/dynamic-data-input/DynamicDataInput.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DynamicDataInput.cjs.js","sources":["../../../../src/components/forms/dynamic-data-input/DynamicDataInput.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any /\nimport cn from \"classnames\";\nimport { type FC, useEffect, useRef, useState } from \"react\";\n\nimport { Typography } from \"../../data-display/typography/Typography\";\nimport { Label } from \"../../data-display/label/Label\";\nimport type { LabelType } from \"../../data-display/label/Label\";\nimport { DynamicDataModal } from \"../../data-display/dynamic-data-modal/DynamicDataModal\";\nimport { AIExtractedIndicator } from \"../../icons/AIExtractedIndicator\";\nimport { AIStarIcon } from \"../../icons/AIStarIcon\";\nimport { HelpIcon } from \"../../icons/HelpIcon\";\nimport { EditIcon } from \"../../icons/EditIcon\";\nimport Tooltip from \"../../tooltip/Tooltip\";\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 Props for the DynamicDataInput component\n * Drop-in replacement matching the lax-web-portal API\n /\nexport type DynamicDataInputProps = {\n /* Unique identifier for the input /\n id: string;\n /* Label text to display above the input /\n label?: string;\n /* Input type (text, email, password, number, etc.) /\n type?: string;\n /* Placeholder text for the input /\n placeholder?: string;\n /* Current value of the input (JSON string for dynamic data) /\n value: string;\n /* Callback function called when value changes /\n onChange: (value: string) => void;\n /* Error message to display below the input /\n errorMessage?: string;\n /* Whether to preserve original case in the label /\n originalCase?: boolean;\n /* Whether the field is required /\n required?: boolean;\n /* Background color class /\n bg?: string;\n /* Tags/labels to display next to the label /\n tags?: (string \| LabelType)[];\n /* Index prop used for resetting input state /\n index?: number;\n /* Additional CSS classes for the wrapper /\n className?: string;\n /* Tooltip text for the help icon /\n tooltip?: string;\n /* Whether to use simple mode (no label, just input with edit button) /\n simpleMode?: boolean;\n /* Additional CSS classes for the input field in simple mode /\n inputFieldClassName?: 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} & Record<string, any>;\n\n/\n A dynamic data input component that displays a text input with a button to open\n * a modal for editing JSON data. The input shows \"{DYNAMIC}\" when there's a value.\n * \n * This is a drop-in replacement for the lax-web-portal DynamicDataInput component.\n \n @example\n * ```tsx\n * <DynamicDataInput\n * id=\"dynamic-field\"\n * label=\"Dynamic Field\"\n * type=\"text\"\n * placeholder=\"Enter value...\"\n * value={jsonData}\n * onChange={(value) => setJsonData(value)}\n * errorMessage=\"\"\n * />\n * ```\n */\nexport const DynamicDataInput: FC<DynamicDataInputProps> = (props) => {\n const {\n id,\n label = \"\",\n type = \"text\",\n placeholder = \"\",\n value,\n onChange,\n originalCase = false,\n errorMessage = \"\",\n required,\n bg,\n tags,\n index,\n className,\n tooltip = \"\",\n simpleMode,\n inputFieldClassName,\n isAiExtracted = false,\n confidenceScore,\n confidenceType = \"high\",\n confidenceTooltip,\n sourceMeta = [],\n onConfidenceScoreClick,\n disabled = false,\n ...rest\n } = props;\n\n const [inputValue, setInputValue] = useState<string \| null>(null);\n const [showMasterDataModal, setShowMasterDataModal] = useState(false);\n\n const inputRef = useRef<HTMLInputElement>(null);\n\n // Reset input value when index changes\n useEffect(() => {\n setInputValue(null);\n }, [index]);\n\n // Trigger onChange when inputValue changes\n useEffect(() => {\n if (inputValue !== null) {\n onChange(inputValue);\n }\n }, [inputValue, onChange]);\n\n const toggleModal = () => {\n setShowMasterDataModal(!showMasterDataModal);\n };\n\n const handleSetData = (dynamicData: string) => {\n setInputValue(dynamicData);\n toggleModal();\n };\n\n return (\n <>\n {simpleMode ? (\n <div className=\"relative w-full h-full\">\n <input\n type={type}\n placeholder={placeholder}\n className={inputFieldClassName}\n onChange={(e) => {\n onChange(e.target.value);\n }}\n ref={inputRef}\n value={value ? \"{DYNAMIC}\" : \"\"}\n disabled={true}\n {...rest}\n />\n\n <button\n id=\"btn-dynamic-data-input-edit\"\n onClick={toggleModal}\n className={cn(\n \"absolute inset-y-0 right-0 flex items-center px-4 focus:border-transparent border-l\",\n disabled ? \"cursor-not-allowed\" : \"\"\n )}\n disabled={disabled}\n type=\"button\"\n >\n <EditIcon />\n </button>\n </div>\n ) : (\n <div className={cn(\"flex flex-col w-full\", className)}>\n <label\n htmlFor=\"text\"\n className={`mb-1 text-black-300 dark:text-black-300 inline-flex items-center gap-1 flex-wrap ${\n !originalCase ? \"capitalize\" : \"\"\n }`}\n >\n <InputLabel label={label \|\| \"\"} required={required \|\| false} />\n {isAiExtracted && !shouldShowConfidenceScore(confidenceScore) && <AIExtractedIndicator />}\n <Label labels={tags} />\n {tooltip && (\n <Tooltip placement=\"top\" title={tooltip}>\n <div className=\"cursor-pointer\">\n <HelpIcon />\n </div>\n </Tooltip>\n )}\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 </label>\n <label className=\"relative block\">\n <input\n type={type}\n id={id}\n required={required}\n placeholder={placeholder}\n className={cn(\n \"border\",\n errorMessage\n ? \"border-red-300 focus:border-red-300\"\n : \"border-gray-300 dark:border-black-600 focus:border-blue-500 dark:focus:border-primary-400\",\n bg,\n \"text-sm rounded-lg block w-full p-2.5 font-inter font-medium\",\n type === \"currency\" ? \"pl-8\" : \"\",\n \"bg-white dark:bg-black-600 text-gray-900 dark:text-black-200\"\n )}\n onChange={(e) => {\n onChange(e.target.value);\n }}\n ref={inputRef}\n value={value ? \"{DYNAMIC}\" : \"\"}\n disabled={true}\n autoComplete=\"off\"\n {...rest}\n />\n\n <button\n onClick={toggleModal}\n className=\"absolute inset-y-0 right-0 flex items-center px-4 focus:border-transparent border-l\"\n type=\"button\"\n >\n <EditIcon />\n </button>\n </label>\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 </div>\n )}\n <DynamicDataModal\n isVisible={showMasterDataModal}\n onChange={handleSetData}\n onClose={toggleModal}\n defaultValue={value}\n />\n </>\n );\n};\n\nDynamicDataInput.displayName = \"DynamicDataInput\";\n\n"],"names":["DynamicDataInput","props","id","label","type","placeholder","value","onChange","originalCase","errorMessage","required","bg","tags","index","className","tooltip","simpleMode","inputFieldClassName","isAiExtracted","confidenceScore","confidenceType","confidenceTooltip","sourceMeta","onConfidenceScoreClick","disabled","rest","inputValue","setInputValue","useState","showMasterDataModal","setShowMasterDataModal","inputRef","useRef","useEffect","toggleModal","handleSetData","dynamicData","jsxs","Fragment","jsx","e","cn","EditIcon","InputLabel","shouldShowConfidenceScore","AIExtractedIndicator","Label","Tooltip","HelpIcon","getConfidenceScoreBadgeClass","AIStarIcon","getConfidenceScoreBadgeColor","getConfidenceScoreBadgeFill","getConfidenceScoreBadgeTextColor","Typography","DynamicDataModal"],"mappings":"4qBAsHaA,EAA+CC,GAAU,CACpE,KAAM,CACJ,GAAAC,EACA,MAAAC,EAAQ,GACR,KAAAC,EAAO,OACP,YAAAC,EAAc,GACd,MAAAC,EACA,SAAAC,EACA,aAAAC,EAAe,GACf,aAAAC,EAAe,GACf,SAAAC,EACA,GAAAC,EACA,KAAAC,EAAA,MACAC,EACA,UAAAC,EACA,QAAAC,EAAU,GACV,WAAAC,EACA,oBAAAC,EACA,cAAAC,EAAgB,GAChB,gBAAAC,EACA,eAAAC,EAAiB,OACjB,kBAAAC,EACA,WAAAC,EAAa,CAAA,EACb,uBAAAC,EACA,SAAAC,EAAW,GACX,GAAGC,CAAA,EACDxB,EAEE,CAACyB,EAAYC,CAAa,EAAIC,EAAAA,SAAwB,IAAI,EAC1D,CAACC,EAAqBC,CAAsB,EAAIF,EAAAA,SAAS,EAAK,EAE9DG,EAAWC,EAAAA,OAAyB,IAAI,EAG9CC,EAAAA,UAAU,IAAM,CACdN,EAAc,IAAI,CACpB,EAAG,CAACd,CAAK,CAAC,EAGVoB,EAAAA,UAAU,IAAM,CACVP,IAAe,MACjBnB,EAASmB,CAAU,CAEvB,EAAG,CAACA,EAAYnB,CAAQ,CAAC,EAEzB,MAAM2B,EAAc,IAAM,CACxBJ,EAAuB,CAACD,CAAmB,CAC7C,EAEMM,EAAiBC,GAAwB,CAC7CT,EAAcS,CAAW,EACzBF,EAAA,CACF,EAEA,OACEG,EAAAA,KAAAC,WAAA,CACG,SAAA,CAAAtB,EACCqB,EAAAA,KAAC,MAAA,CAAI,UAAU,yBACb,SAAA,CAAAE,EAAAA,IAAC,QAAA,CACC,KAAAnC,EACA,YAAAC,EACA,UAAWY,EACX,SAAWuB,GAAM,CACfjC,EAASiC,EAAE,OAAO,KAAK,CACzB,EACA,IAAKT,EACL,MAAOzB,EAAQ,YAAc,GAC7B,SAAU,GACT,GAAGmB,CAAA,CAAA,EAGNc,EAAAA,IAAC,SAAA,CACC,GAAG,8BACH,QAASL,EACT,UAAWO,EACT,sFACAjB,EAAW,qBAAuB,EAAA,EAEpC,SAAAA,EACA,KAAK,SAEL,eAACkB,EAAAA,SAAA,CAAA,CAAS,CAAA,CAAA,CACZ,EACF,EAEAL,OAAC,MAAA,CAAI,UAAWI,EAAG,uBAAwB3B,CAAS,EAClD,SAAA,CAAAuB,EAAAA,KAAC,QAAA,CACC,QAAQ,OACR,UAAW,oFACR7B,EAA8B,GAAf,YAClB,GAED,SAAA,CAAA+B,MAACI,EAAAA,YAAW,MAAOxC,GAAS,GAAI,SAAUO,GAAY,GAAO,EAC3DQ,GAAiB,CAAC0B,EAAAA,0BAA0BzB,CAAe,SAAM0B,EAAAA,qBAAA,EAAqB,EACvFN,EAAAA,IAACO,EAAAA,MAAA,CAAM,OAAQlC,CAAA,CAAM,EACpBG,GACCwB,EAAAA,IAACQ,EAAA,CAAQ,UAAU,MAAM,MAAOhC,EAC9B,SAAAwB,EAAAA,IAAC,MAAA,CAAI,UAAU,iBACb,SAAAA,EAAAA,IAACS,WAAA,CAAA,CAAS,EACZ,EACF,EAEAJ,4BAA0BzB,CAAe,GAAKC,EAC9CmB,EAAAA,IAACQ,EAAA,CACC,UAAU,UACV,MAAO1B,GAAqB,GAC5B,YAAgDA,GAAsB,KACtE,UAAU,iBAEV,SAAAgB,EAAAA,KAAC,MAAA,CACC,UAAWI,EACT,qEACAQ,EAAAA,6BAA6B7B,CAAc,CAAA,EAE7C,QAAS,IAAMG,IAAyBD,CAAU,EAElD,SAAA,CAAAiB,EAAAA,IAACW,EAAAA,WAAA,CACC,KAAM,GACN,KAAMC,EAAAA,6BAA6B/B,CAAc,EACjD,cAAegC,EAAAA,4BAA4BhC,CAAc,CAAA,CAAA,EAE3DiB,OAAC,QAAK,UAAWI,EAAG,gCAAiCY,mCAAiCjC,CAAc,CAAC,EAClG,SAAA,CAAAD,EAAgB,GAAA,CAAA,CACnB,CAAA,CAAA,CAAA,CACF,CAAA,EAEA,IAAA,CAAA,CAAA,EAENkB,EAAAA,KAAC,QAAA,CAAM,UAAU,iBACf,SAAA,CAAAE,EAAAA,IAAC,QAAA,CACC,KAAAnC,EACA,GAAAF,EACA,SAAAQ,EACA,YAAAL,EACA,UAAWoC,EACT,SACAhC,EACI,sCACA,4FACJE,EACA,+DACAP,IAAS,WAAa,OAAS,GAC/B,8DAAA,EAEF,SAAWoC,GAAM,CACfjC,EAASiC,EAAE,OAAO,KAAK,CACzB,EACA,IAAKT,EACL,MAAOzB,EAAQ,YAAc,GAC7B,SAAU,GACV,aAAa,MACZ,GAAGmB,CAAA,CAAA,EAGNc,EAAAA,IAAC,SAAA,CACC,QAASL,EACT,UAAU,sFACV,KAAK,SAEL,eAACQ,EAAAA,SAAA,CAAA,CAAS,CAAA,CAAA,CACZ,EACF,EACCjC,GACC8B,EAAAA,IAACe,EAAAA,WAAA,CACC,UAAU,uBACV,WAAW,SACX,KAAK,cACL,QAAQ,SAEP,SAAA7C,CAAA,CAAA,CACH,EAEJ,EAEF8B,EAAAA,IAACgB,EAAAA,iBAAA,CACC,UAAW1B,EACX,SAAUM,EACV,QAASD,EACT,aAAc5B,CAAA,CAAA,CAChB,EACF,CAEJ,EAEAN,EAAiB,YAAc"}
1	+ {"version":3,"file":"DynamicDataInput.cjs.js","sources":["../../../../src/components/forms/dynamic-data-input/DynamicDataInput.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any /\nimport cn from \"classnames\";\nimport { type FC, useEffect, useRef, useState } from \"react\";\n\nimport { Typography } from \"../../data-display/typography/Typography\";\nimport { Label } from \"../../data-display/label/Label\";\nimport type { LabelType } from \"../../data-display/label/Label\";\nimport { DynamicDataModal } from \"../../data-display/dynamic-data-modal/DynamicDataModal\";\nimport { AIExtractedIndicator } from \"../../icons/AIExtractedIndicator\";\nimport { AIStarIcon } from \"../../icons/AIStarIcon\";\nimport { HelpIcon } from \"../../icons/HelpIcon\";\nimport { EditIcon } from \"../../icons/EditIcon\";\nimport Tooltip from \"../../tooltip/Tooltip\";\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 Props for the DynamicDataInput component\n * Drop-in replacement matching the lax-web-portal API\n /\nexport type DynamicDataInputProps = {\n /* Unique identifier for the input /\n id: string;\n /* Label text to display above the input /\n label?: string;\n /* Input type (text, email, password, number, etc.) /\n type?: string;\n /* Placeholder text for the input /\n placeholder?: string;\n /* Current value of the input (JSON string for dynamic data) /\n value: string;\n /* Callback function called when value changes /\n onChange: (value: string) => void;\n /* Error message to display below the input /\n errorMessage?: string;\n /* Whether to preserve original case in the label /\n originalCase?: boolean;\n /* Whether the field is required /\n required?: boolean;\n /* Background color class /\n bg?: string;\n /* Tags/labels to display next to the label /\n tags?: (string \| LabelType)[];\n /* Index prop used for resetting input state /\n index?: number;\n /* Additional CSS classes for the wrapper /\n className?: string;\n /* Tooltip text for the help icon /\n tooltip?: string;\n /* Whether to use simple mode (no label, just input with edit button) /\n simpleMode?: boolean;\n /* Additional CSS classes for the input field in simple mode /\n inputFieldClassName?: 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} & Record<string, any>;\n\n/\n A dynamic data input component that displays a text input with a button to open\n * a modal for editing JSON data. The input shows \"{DYNAMIC}\" when there's a value.\n * \n * This is a drop-in replacement for the lax-web-portal DynamicDataInput component.\n \n @example\n * ```tsx\n * <DynamicDataInput\n * id=\"dynamic-field\"\n * label=\"Dynamic Field\"\n * type=\"text\"\n * placeholder=\"Enter value...\"\n * value={jsonData}\n * onChange={(value) => setJsonData(value)}\n * errorMessage=\"\"\n * />\n * ```\n */\nexport const DynamicDataInput: FC<DynamicDataInputProps> = (props) => {\n const {\n id,\n label = \"\",\n type = \"text\",\n placeholder = \"\",\n value,\n onChange,\n originalCase = false,\n errorMessage = \"\",\n required,\n bg,\n tags,\n index,\n className,\n tooltip = \"\",\n simpleMode,\n inputFieldClassName,\n isAiExtracted = false,\n confidenceScore,\n confidenceType = \"high\",\n confidenceTooltip,\n sourceMeta = [],\n onConfidenceScoreClick,\n disabled = false,\n ...rest\n } = props;\n\n const [inputValue, setInputValue] = useState<string \| null>(null);\n const [showMasterDataModal, setShowMasterDataModal] = useState(false);\n\n const inputRef = useRef<HTMLInputElement>(null);\n\n // Reset input value when index changes\n useEffect(() => {\n setInputValue(null);\n }, [index]);\n\n // Trigger onChange when inputValue changes\n useEffect(() => {\n if (inputValue !== null) {\n onChange(inputValue);\n }\n }, [inputValue, onChange]);\n\n const toggleModal = () => {\n setShowMasterDataModal(!showMasterDataModal);\n };\n\n const handleSetData = (dynamicData: string) => {\n setInputValue(dynamicData);\n toggleModal();\n };\n\n return (\n <>\n {simpleMode ? (\n <div className=\"relative w-full h-full\">\n <input\n type={type}\n placeholder={placeholder}\n className={inputFieldClassName}\n onChange={(e) => {\n onChange(e.target.value);\n }}\n ref={inputRef}\n value={value ? \"{DYNAMIC}\" : \"\"}\n disabled={true}\n {...rest}\n />\n\n <button\n id=\"btn-dynamic-data-input-edit\"\n onClick={toggleModal}\n className={cn(\n \"absolute inset-y-0 right-0 flex items-center px-4 focus:border-transparent border-l\",\n disabled ? \"cursor-not-allowed\" : \"\"\n )}\n disabled={disabled}\n type=\"button\"\n >\n <EditIcon />\n </button>\n </div>\n ) : (\n <div className={cn(\"flex flex-col w-full\", className)}>\n <label\n htmlFor=\"text\"\n className={`mb-1 text-black-300 dark:text-black-300 inline-flex items-center gap-1 flex-wrap ${\n !originalCase ? \"capitalize\" : \"\"\n }`}\n >\n <InputLabel label={label \|\| \"\"} required={required \|\| false} />\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 {(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 </label>\n <label className=\"relative block\">\n <input\n type={type}\n id={id}\n required={required}\n placeholder={placeholder}\n className={cn(\n \"border\",\n errorMessage\n ? \"border-red-300 focus:border-red-300\"\n : \"border-gray-300 dark:border-black-600 focus:border-blue-500 dark:focus:border-primary-400\",\n bg,\n \"text-sm rounded-lg block w-full p-2.5 font-inter font-medium\",\n type === \"currency\" ? \"pl-8\" : \"\",\n \"bg-white dark:bg-black-600 text-gray-900 dark:text-black-200\"\n )}\n onChange={(e) => {\n onChange(e.target.value);\n }}\n ref={inputRef}\n value={value ? \"{DYNAMIC}\" : \"\"}\n disabled={true}\n autoComplete=\"off\"\n {...rest}\n />\n\n <button\n onClick={toggleModal}\n className=\"absolute inset-y-0 right-0 flex items-center px-4 focus:border-transparent border-l\"\n type=\"button\"\n >\n <EditIcon />\n </button>\n </label>\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 </div>\n )}\n <DynamicDataModal\n isVisible={showMasterDataModal}\n onChange={handleSetData}\n onClose={toggleModal}\n defaultValue={value}\n />\n </>\n );\n};\n\nDynamicDataInput.displayName = \"DynamicDataInput\";\n\n"],"names":["DynamicDataInput","props","id","label","type","placeholder","value","onChange","originalCase","errorMessage","required","bg","tags","index","className","tooltip","simpleMode","inputFieldClassName","isAiExtracted","confidenceScore","confidenceType","confidenceTooltip","sourceMeta","onConfidenceScoreClick","disabled","rest","inputValue","setInputValue","useState","showMasterDataModal","setShowMasterDataModal","inputRef","useRef","useEffect","toggleModal","handleSetData","dynamicData","jsxs","Fragment","jsx","e","cn","EditIcon","InputLabel","shouldShowConfidenceScore","AIExtractedIndicator","Label","Tooltip","HelpIcon","getConfidenceScoreBadgeClass","AIStarIcon","getConfidenceScoreBadgeColor","getConfidenceScoreBadgeFill","getConfidenceScoreBadgeTextColor","Typography","DynamicDataModal"],"mappings":"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"}

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

@@ -11,10 +11,10 @@ import { EditIcon as v } from "../../icons/EditIcon.es.js";
 import S from "../../tooltip/Tooltip.es.js";
 import { InputLabel as U } from "../shared/InputLabel.es.js";
 import { shouldShowConfidenceScore as I, getConfidenceScoreBadgeFill as W, getConfidenceScoreBadgeColor as X, getConfidenceScoreBadgeTextColor as Z, getConfidenceScoreBadgeClass as _ } from "../../../utils/confidenceScoreUtils.es.js";
-const ee = (D) => {
+const ee = (w) => {
   const {
-    id: M,
-    label: w = "",
+    id: D,
+    label: M = "",
     type: i = "text",
     placeholder: u = "",
     value: c,
@@ -37,7 +37,7 @@ const ee = (D) => {
     onConfidenceScoreClick: L,
     disabled: g = !1,
     ...h
-  } = D, [p, x] = N(null), [C, R] = N(!1), y = $(null);
+  } = w, [p, x] = N(null), [C, R] = N(!1), y = $(null);
   k(() => {
     x(null);
   }, [E]), k(() => {
@@ -86,10 +86,10 @@ const ee = (D) => {
           htmlFor: "text",
           className: `mb-1 text-black-300 dark:text-black-300 inline-flex items-center gap-1 flex-wrap ${T ? "" : "capitalize"}`,
           children: [
-            /* @__PURE__ */ e(U, { label: w || "", required: f || !1 }),
+            /* @__PURE__ */ e(U, { label: M || "", required: f || !1 }),
             j && !I(d) && /* @__PURE__ */ e(O, {}),
             /* @__PURE__ */ e(J, { labels: B }),
-            b && /* @__PURE__ */ e(S, { placement: "top", title: b, children: /* @__PURE__ */ e("div", { className: "cursor-pointer", children: /* @__PURE__ */ e(Q, {}) }) }),
+            b && /* @__PURE__ */ e(S, { placement: "top", title: b, children: /* @__PURE__ */ e("div", { className: "cursor-pointer", children: /* @__PURE__ */ e(Q, { className: "w-icon-sm h-icon-sm" }) }) }),
             I(d) && l ? /* @__PURE__ */ e(
               S,
               {
@@ -131,7 +131,7 @@ const ee = (D) => {
           "input",
           {
             type: i,
-            id: M,
+            id: D,
             required: f,
             placeholder: u,
             className: r(

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

	@@ -1 +1 @@
1	- {"version":3,"file":"DynamicDataInput.es.js","sources":["../../../../src/components/forms/dynamic-data-input/DynamicDataInput.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any /\nimport cn from \"classnames\";\nimport { type FC, useEffect, useRef, useState } from \"react\";\n\nimport { Typography } from \"../../data-display/typography/Typography\";\nimport { Label } from \"../../data-display/label/Label\";\nimport type { LabelType } from \"../../data-display/label/Label\";\nimport { DynamicDataModal } from \"../../data-display/dynamic-data-modal/DynamicDataModal\";\nimport { AIExtractedIndicator } from \"../../icons/AIExtractedIndicator\";\nimport { AIStarIcon } from \"../../icons/AIStarIcon\";\nimport { HelpIcon } from \"../../icons/HelpIcon\";\nimport { EditIcon } from \"../../icons/EditIcon\";\nimport Tooltip from \"../../tooltip/Tooltip\";\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 Props for the DynamicDataInput component\n * Drop-in replacement matching the lax-web-portal API\n /\nexport type DynamicDataInputProps = {\n /* Unique identifier for the input /\n id: string;\n /* Label text to display above the input /\n label?: string;\n /* Input type (text, email, password, number, etc.) /\n type?: string;\n /* Placeholder text for the input /\n placeholder?: string;\n /* Current value of the input (JSON string for dynamic data) /\n value: string;\n /* Callback function called when value changes /\n onChange: (value: string) => void;\n /* Error message to display below the input /\n errorMessage?: string;\n /* Whether to preserve original case in the label /\n originalCase?: boolean;\n /* Whether the field is required /\n required?: boolean;\n /* Background color class /\n bg?: string;\n /* Tags/labels to display next to the label /\n tags?: (string \| LabelType)[];\n /* Index prop used for resetting input state /\n index?: number;\n /* Additional CSS classes for the wrapper /\n className?: string;\n /* Tooltip text for the help icon /\n tooltip?: string;\n /* Whether to use simple mode (no label, just input with edit button) /\n simpleMode?: boolean;\n /* Additional CSS classes for the input field in simple mode /\n inputFieldClassName?: 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} & Record<string, any>;\n\n/\n A dynamic data input component that displays a text input with a button to open\n * a modal for editing JSON data. The input shows \"{DYNAMIC}\" when there's a value.\n * \n * This is a drop-in replacement for the lax-web-portal DynamicDataInput component.\n \n @example\n * ```tsx\n * <DynamicDataInput\n * id=\"dynamic-field\"\n * label=\"Dynamic Field\"\n * type=\"text\"\n * placeholder=\"Enter value...\"\n * value={jsonData}\n * onChange={(value) => setJsonData(value)}\n * errorMessage=\"\"\n * />\n * ```\n */\nexport const DynamicDataInput: FC<DynamicDataInputProps> = (props) => {\n const {\n id,\n label = \"\",\n type = \"text\",\n placeholder = \"\",\n value,\n onChange,\n originalCase = false,\n errorMessage = \"\",\n required,\n bg,\n tags,\n index,\n className,\n tooltip = \"\",\n simpleMode,\n inputFieldClassName,\n isAiExtracted = false,\n confidenceScore,\n confidenceType = \"high\",\n confidenceTooltip,\n sourceMeta = [],\n onConfidenceScoreClick,\n disabled = false,\n ...rest\n } = props;\n\n const [inputValue, setInputValue] = useState<string \| null>(null);\n const [showMasterDataModal, setShowMasterDataModal] = useState(false);\n\n const inputRef = useRef<HTMLInputElement>(null);\n\n // Reset input value when index changes\n useEffect(() => {\n setInputValue(null);\n }, [index]);\n\n // Trigger onChange when inputValue changes\n useEffect(() => {\n if (inputValue !== null) {\n onChange(inputValue);\n }\n }, [inputValue, onChange]);\n\n const toggleModal = () => {\n setShowMasterDataModal(!showMasterDataModal);\n };\n\n const handleSetData = (dynamicData: string) => {\n setInputValue(dynamicData);\n toggleModal();\n };\n\n return (\n <>\n {simpleMode ? (\n <div className=\"relative w-full h-full\">\n <input\n type={type}\n placeholder={placeholder}\n className={inputFieldClassName}\n onChange={(e) => {\n onChange(e.target.value);\n }}\n ref={inputRef}\n value={value ? \"{DYNAMIC}\" : \"\"}\n disabled={true}\n {...rest}\n />\n\n <button\n id=\"btn-dynamic-data-input-edit\"\n onClick={toggleModal}\n className={cn(\n \"absolute inset-y-0 right-0 flex items-center px-4 focus:border-transparent border-l\",\n disabled ? \"cursor-not-allowed\" : \"\"\n )}\n disabled={disabled}\n type=\"button\"\n >\n <EditIcon />\n </button>\n </div>\n ) : (\n <div className={cn(\"flex flex-col w-full\", className)}>\n <label\n htmlFor=\"text\"\n className={`mb-1 text-black-300 dark:text-black-300 inline-flex items-center gap-1 flex-wrap ${\n !originalCase ? \"capitalize\" : \"\"\n }`}\n >\n <InputLabel label={label \|\| \"\"} required={required \|\| false} />\n {isAiExtracted && !shouldShowConfidenceScore(confidenceScore) && <AIExtractedIndicator />}\n <Label labels={tags} />\n {tooltip && (\n <Tooltip placement=\"top\" title={tooltip}>\n <div className=\"cursor-pointer\">\n <HelpIcon />\n </div>\n </Tooltip>\n )}\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 </label>\n <label className=\"relative block\">\n <input\n type={type}\n id={id}\n required={required}\n placeholder={placeholder}\n className={cn(\n \"border\",\n errorMessage\n ? \"border-red-300 focus:border-red-300\"\n : \"border-gray-300 dark:border-black-600 focus:border-blue-500 dark:focus:border-primary-400\",\n bg,\n \"text-sm rounded-lg block w-full p-2.5 font-inter font-medium\",\n type === \"currency\" ? \"pl-8\" : \"\",\n \"bg-white dark:bg-black-600 text-gray-900 dark:text-black-200\"\n )}\n onChange={(e) => {\n onChange(e.target.value);\n }}\n ref={inputRef}\n value={value ? \"{DYNAMIC}\" : \"\"}\n disabled={true}\n autoComplete=\"off\"\n {...rest}\n />\n\n <button\n onClick={toggleModal}\n className=\"absolute inset-y-0 right-0 flex items-center px-4 focus:border-transparent border-l\"\n type=\"button\"\n >\n <EditIcon />\n </button>\n </label>\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 </div>\n )}\n <DynamicDataModal\n isVisible={showMasterDataModal}\n onChange={handleSetData}\n onClose={toggleModal}\n defaultValue={value}\n />\n </>\n );\n};\n\nDynamicDataInput.displayName = \"DynamicDataInput\";\n\n"],"names":["DynamicDataInput","props","id","label","type","placeholder","value","onChange","originalCase","errorMessage","required","bg","tags","index","className","tooltip","simpleMode","inputFieldClassName","isAiExtracted","confidenceScore","confidenceType","confidenceTooltip","sourceMeta","onConfidenceScoreClick","disabled","rest","inputValue","setInputValue","useState","showMasterDataModal","setShowMasterDataModal","inputRef","useRef","useEffect","toggleModal","handleSetData","dynamicData","jsxs","Fragment","jsx","e","cn","EditIcon","InputLabel","shouldShowConfidenceScore","AIExtractedIndicator","Label","Tooltip","HelpIcon","getConfidenceScoreBadgeClass","AIStarIcon","getConfidenceScoreBadgeColor","getConfidenceScoreBadgeFill","getConfidenceScoreBadgeTextColor","Typography","DynamicDataModal"],"mappings":"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"}
1	+ {"version":3,"file":"DynamicDataInput.es.js","sources":["../../../../src/components/forms/dynamic-data-input/DynamicDataInput.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any /\nimport cn from \"classnames\";\nimport { type FC, useEffect, useRef, useState } from \"react\";\n\nimport { Typography } from \"../../data-display/typography/Typography\";\nimport { Label } from \"../../data-display/label/Label\";\nimport type { LabelType } from \"../../data-display/label/Label\";\nimport { DynamicDataModal } from \"../../data-display/dynamic-data-modal/DynamicDataModal\";\nimport { AIExtractedIndicator } from \"../../icons/AIExtractedIndicator\";\nimport { AIStarIcon } from \"../../icons/AIStarIcon\";\nimport { HelpIcon } from \"../../icons/HelpIcon\";\nimport { EditIcon } from \"../../icons/EditIcon\";\nimport Tooltip from \"../../tooltip/Tooltip\";\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 Props for the DynamicDataInput component\n * Drop-in replacement matching the lax-web-portal API\n /\nexport type DynamicDataInputProps = {\n /* Unique identifier for the input /\n id: string;\n /* Label text to display above the input /\n label?: string;\n /* Input type (text, email, password, number, etc.) /\n type?: string;\n /* Placeholder text for the input /\n placeholder?: string;\n /* Current value of the input (JSON string for dynamic data) /\n value: string;\n /* Callback function called when value changes /\n onChange: (value: string) => void;\n /* Error message to display below the input /\n errorMessage?: string;\n /* Whether to preserve original case in the label /\n originalCase?: boolean;\n /* Whether the field is required /\n required?: boolean;\n /* Background color class /\n bg?: string;\n /* Tags/labels to display next to the label /\n tags?: (string \| LabelType)[];\n /* Index prop used for resetting input state /\n index?: number;\n /* Additional CSS classes for the wrapper /\n className?: string;\n /* Tooltip text for the help icon /\n tooltip?: string;\n /* Whether to use simple mode (no label, just input with edit button) /\n simpleMode?: boolean;\n /* Additional CSS classes for the input field in simple mode /\n inputFieldClassName?: 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} & Record<string, any>;\n\n/\n A dynamic data input component that displays a text input with a button to open\n * a modal for editing JSON data. The input shows \"{DYNAMIC}\" when there's a value.\n * \n * This is a drop-in replacement for the lax-web-portal DynamicDataInput component.\n \n @example\n * ```tsx\n * <DynamicDataInput\n * id=\"dynamic-field\"\n * label=\"Dynamic Field\"\n * type=\"text\"\n * placeholder=\"Enter value...\"\n * value={jsonData}\n * onChange={(value) => setJsonData(value)}\n * errorMessage=\"\"\n * />\n * ```\n */\nexport const DynamicDataInput: FC<DynamicDataInputProps> = (props) => {\n const {\n id,\n label = \"\",\n type = \"text\",\n placeholder = \"\",\n value,\n onChange,\n originalCase = false,\n errorMessage = \"\",\n required,\n bg,\n tags,\n index,\n className,\n tooltip = \"\",\n simpleMode,\n inputFieldClassName,\n isAiExtracted = false,\n confidenceScore,\n confidenceType = \"high\",\n confidenceTooltip,\n sourceMeta = [],\n onConfidenceScoreClick,\n disabled = false,\n ...rest\n } = props;\n\n const [inputValue, setInputValue] = useState<string \| null>(null);\n const [showMasterDataModal, setShowMasterDataModal] = useState(false);\n\n const inputRef = useRef<HTMLInputElement>(null);\n\n // Reset input value when index changes\n useEffect(() => {\n setInputValue(null);\n }, [index]);\n\n // Trigger onChange when inputValue changes\n useEffect(() => {\n if (inputValue !== null) {\n onChange(inputValue);\n }\n }, [inputValue, onChange]);\n\n const toggleModal = () => {\n setShowMasterDataModal(!showMasterDataModal);\n };\n\n const handleSetData = (dynamicData: string) => {\n setInputValue(dynamicData);\n toggleModal();\n };\n\n return (\n <>\n {simpleMode ? (\n <div className=\"relative w-full h-full\">\n <input\n type={type}\n placeholder={placeholder}\n className={inputFieldClassName}\n onChange={(e) => {\n onChange(e.target.value);\n }}\n ref={inputRef}\n value={value ? \"{DYNAMIC}\" : \"\"}\n disabled={true}\n {...rest}\n />\n\n <button\n id=\"btn-dynamic-data-input-edit\"\n onClick={toggleModal}\n className={cn(\n \"absolute inset-y-0 right-0 flex items-center px-4 focus:border-transparent border-l\",\n disabled ? \"cursor-not-allowed\" : \"\"\n )}\n disabled={disabled}\n type=\"button\"\n >\n <EditIcon />\n </button>\n </div>\n ) : (\n <div className={cn(\"flex flex-col w-full\", className)}>\n <label\n htmlFor=\"text\"\n className={`mb-1 text-black-300 dark:text-black-300 inline-flex items-center gap-1 flex-wrap ${\n !originalCase ? \"capitalize\" : \"\"\n }`}\n >\n <InputLabel label={label \|\| \"\"} required={required \|\| false} />\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 {(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 </label>\n <label className=\"relative block\">\n <input\n type={type}\n id={id}\n required={required}\n placeholder={placeholder}\n className={cn(\n \"border\",\n errorMessage\n ? \"border-red-300 focus:border-red-300\"\n : \"border-gray-300 dark:border-black-600 focus:border-blue-500 dark:focus:border-primary-400\",\n bg,\n \"text-sm rounded-lg block w-full p-2.5 font-inter font-medium\",\n type === \"currency\" ? \"pl-8\" : \"\",\n \"bg-white dark:bg-black-600 text-gray-900 dark:text-black-200\"\n )}\n onChange={(e) => {\n onChange(e.target.value);\n }}\n ref={inputRef}\n value={value ? \"{DYNAMIC}\" : \"\"}\n disabled={true}\n autoComplete=\"off\"\n {...rest}\n />\n\n <button\n onClick={toggleModal}\n className=\"absolute inset-y-0 right-0 flex items-center px-4 focus:border-transparent border-l\"\n type=\"button\"\n >\n <EditIcon />\n </button>\n </label>\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 </div>\n )}\n <DynamicDataModal\n isVisible={showMasterDataModal}\n onChange={handleSetData}\n onClose={toggleModal}\n defaultValue={value}\n />\n </>\n );\n};\n\nDynamicDataInput.displayName = \"DynamicDataInput\";\n\n"],"names":["DynamicDataInput","props","id","label","type","placeholder","value","onChange","originalCase","errorMessage","required","bg","tags","index","className","tooltip","simpleMode","inputFieldClassName","isAiExtracted","confidenceScore","confidenceType","confidenceTooltip","sourceMeta","onConfidenceScoreClick","disabled","rest","inputValue","setInputValue","useState","showMasterDataModal","setShowMasterDataModal","inputRef","useRef","useEffect","toggleModal","handleSetData","dynamicData","jsxs","Fragment","jsx","e","cn","EditIcon","InputLabel","shouldShowConfidenceScore","AIExtractedIndicator","Label","Tooltip","HelpIcon","getConfidenceScoreBadgeClass","AIStarIcon","getConfidenceScoreBadgeColor","getConfidenceScoreBadgeFill","getConfidenceScoreBadgeTextColor","Typography","DynamicDataModal"],"mappings":"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"}

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"DynamicDataInputField.cjs.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-[32px] 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 />\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\"\n sx={{ fontSize: 16 }}\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\"\n sx={{ fontSize: 16 }}\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.cjs.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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"}

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

@@ -39,21 +39,21 @@ const Ie = ie(
     sourceMeta: X = [],
     onConfidenceScoreClick: Y,
     labelClassName: Z,
-    disabled: S = !1,
+    disabled: $ = !1,
     isLiveField: W = !1,
     onAddGTNToDocument: h,
     riskDetails: r,
     isRiskAnalysisOpen: y = !1,
-    RiskDetailsCard: $,
+    RiskDetailsCard: S,
     primaryColorShades: T,
-    isRecording: Se = !1,
-    isPlaying: $e = !1,
-    setDisableActions: z,
-    showDeprecatedFieldWarning: R,
+    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 = () => {
-      z?.(!a), E(!a);
+      R?.(!a), E(!a);
     }, te = (t) => {
       if (t.keyCode === 9 || t.key === "Enter") {
         const c = V.current || P.current;
@@ -67,12 +67,12 @@ const Ie = ie(
         value: t
       });
     }, ae = () => {
-      const t = "border h-[32px] 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"}`;
+      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}`;
     };
     return j(() => {
-      a && !p && (R?.(), E(!1));
-    }, [a, p, R]), j(() => {
+      a && !p && (z?.(), E(!1));
+    }, [a, p, z]), j(() => {
       s(o);
     }, [o]), /* @__PURE__ */ l(
       "div",
@@ -107,7 +107,7 @@ 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, {}) }) })
+                    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" }) }) })
                   ] }),
                   /* @__PURE__ */ l("div", { className: "flex items-center gap-1 justify-self-end", children: [
                     K(x) && n ? /* @__PURE__ */ e(
@@ -190,12 +190,11 @@ const Ie = ie(
                   onClick: le,
                   className: "absolute inset-y-0 right-1 flex items-center px-2 focus:border-transparent",
                   variant: "ghost",
-                  disabled: S,
+                  disabled: $,
                   children: /* @__PURE__ */ e(
                     be,
                     {
-                      className: "text-neutral-900 dark:text-black-300",
-                      sx: { fontSize: 16 }
+                      className: "text-neutral-900 dark:text-black-300 w-xs h-xs"
                     }
                   )
                 }
@@ -207,12 +206,11 @@ const Ie = ie(
                   onClick: D,
                   className: "absolute inset-y-0 right-8 flex items-center px-2 focus:border-transparent",
                   variant: "ghost",
-                  disabled: S,
+                  disabled: $,
                   children: /* @__PURE__ */ e(
                     xe,
                     {
-                      className: "text-neutral-900 dark:text-black-300",
-                      sx: { fontSize: 16 }
+                      className: "text-neutral-900 dark:text-black-300 w-xs h-xs"
                     }
                   )
                 }
@@ -241,7 +239,7 @@ const Ie = ie(
               }
             )
           ] }),
-          f && r && y && $ && /* @__PURE__ */ e(
+          f && r && y && S && /* @__PURE__ */ e(
             "div",
             {
               role: "tooltip",
@@ -252,7 +250,7 @@ const Ie = ie(
               onKeyDown: (t) => {
                 t.key === "Escape" && k(!1);
               },
-              children: /* @__PURE__ */ e($, { riskDetails: r })
+              children: /* @__PURE__ */ e(S, { riskDetails: r })
             }
           )
         ]

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-[32px] 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 />\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\"\n sx={{ fontSize: 16 }}\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\"\n sx={{ fontSize: 16 }}\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":";;;;;;;;;;;;;;;AA8KO,MAAMA,KAAwBC;AAAA,EAInC,CACE;AAAA,IACE,IAAAC;AAAA,IACA,OAAAC;AAAA,IACA,aAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,cAAAC;AAAA,IACA,cAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,uBAAAC,IAAwB;AAAA,IACxB,YAAAC;AAAA,IACA,SAAAC;AAAA,IACA,MAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,cAAAC,IAAe;AAAA,IACf,OAAAC,IAAQ;AAAA,IACR,OAAAC,IAAQ;AAAA,IACR,SAAAC;AAAA,IACA,eAAAC,IAAgB;AAAA,IAChB,iBAAAC;AAAA,IACA,gBAAAC,IAAiB;AAAA,IACjB,mBAAAC;AAAA,IACA,YAAAC,IAAa,CAAA;AAAA,IACb,wBAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,aAAAC,IAAc;AAAA,IACd,oBAAAC;AAAA,IACA,aAAAC;AAAA,IACA,oBAAAC,IAAqB;AAAA,IACrB,iBAAAC;AAAA,IACA,oBAAAC;AAAA,IACA,aAAaC,KAAe;AAAA,IAC5B,WAAWC,KAAa;AAAA,IACxB,mBAAAC;AAAA,IACA,4BAAAC;AAAA,IACA,kBAAAC;AAAA,EAAA,GAEFC,MACG;AACH,UAAM,EAAE,GAAAC,GAAA,IAAMC,GAAA,GACR,CAACC,GAAWC,CAAY,IAAIC,EAAS,EAAK,GAC1C,CAACC,GAAYC,CAAa,IAAIF,EAElCtC,CAAK,GACD,CAACyC,GAAsBC,CAAuB,IAAIJ,EAAS,EAAK,GAEhEK,IAAWC,GAAyB,IAAI,GAGxCC,IAAeZ,KAA6CU,GAE5DG,IAAyB,MAAM;AACnC,MACEhB,IADE,CAAAW,CACuB,GAI3BC,EAAwB,CAACD,CAAoB;AAAA,IAC/C,GAEMM,KAAgB,CAACC,MAAiD;AACtE,UAAIA,EAAM,YAAY,KAAKA,EAAM,QAAQ,SAAS;AAChD,cAAMC,IAAaJ,EAAY,WAAWF,EAAS;AACnD,QAAIM,MACEV,MAAe,QACjBtC,EAASsC,CAAU,GAErBC,EAAcD,CAAU,GACxBU,EAAW,KAAA;AAAA,MAEf;AAAA,IACF,GAEMC,KAAc,MAAM;AACxB,MAAAV,EAAc,EAAE,GAChBvC,EAAS,EAAE;AAAA,IACb,GAEMkD,KAAyB,CAACC,MAAmB;AACjD,MAAI7B,KAAsBV,KAKxBU,EAJqB;AAAA,QACnB,KAAKV;AAAA,QACL,OAAOuC;AAAA,MAAA,CAEsB;AAAA,IAEnC,GAEMC,KAAe,MAAc;AACjC,YAAMC,IACJ,gFACIC,IAAcrD,IAChB,mBACAuB,KAAsBD,GAAa,QACnC,UAAUA,GAAa,KAAK,SAC5B,yCACEgC,KAAmB,gEACnBC,KAAkB,GACtBhC,KAAsBD,GAAa,QAC/B,MAAMA,GAAa,KAAK,QACxB,gCACN,IAAIb,KAAgB,sCAAsC;AAE1D,aAAO,GAAG2C,CAAW,IAAIC,CAAW,IAAIE,EAAe,IAAID,EAAgB;AAAA,IAC7E;AAEA,WAAAE,EAAU,MAAM;AACd,MAAIjB,KAAwB,CAACnC,MAC3ByB,IAAA,GACAW,EAAwB,EAAK;AAAA,IAEjC,GAAG,CAACD,GAAsBnC,GAAYyB,CAA0B,CAAC,GAGjE2B,EAAU,MAAM;AACd,MAAAlB,EAAcxC,CAAK;AAAA,IACrB,GAAG,CAACA,CAAK,CAAC,GAGR,gBAAA2D;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWC;AAAA,UACT;AAAA,UACAxB,KAAaxB,IACT,2DACA;AAAA,UACJ,EAAE,eAAe,CAAC,CAACV,EAAA;AAAA,QAAa;AAAA,QAElC,cAAc,MAAMmC,EAAa,EAAI;AAAA,QACrC,cAAc,MAAMA,EAAa,EAAK;AAAA,QAErC,UAAA;AAAA,UAAAzB,KAAS,CAACwB,IACT,gBAAAyB,EAAC,OAAA,EAAI,WAAU,4DAA2D,IACxE;AAAA,UAEJ,gBAAAF,EAAC,OAAA,EAAI,WAAWC,EAAG,sBAAsB,GACvC,UAAA;AAAA,YAAA,gBAAAC;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,SAAQ;AAAA,gBACR,WAAW,oEACRnD,IAA8B,KAAf,YAClB,IAAIU,KAAkB,EAAE;AAAA,gBAExB,UAAA,gBAAAuC,EAAC,OAAA,EAAI,WAAU,kEACb,UAAA;AAAA,kBAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,oDACf,UAAA;AAAA,oBAAA,gBAAAE,EAACC,IAAA,EAAW,OAAOhE,KAAS,IAAI,UAAUM,KAAY,IAAO,uBAAuBC,KAAyB,GAAA,CAAO;AAAA,oBACjHiB,KACC,gBAAAuC;AAAA,sBAACE;AAAA,sBAAA;AAAA,wBACC,IAAI;AAAA,0BACF,UAAU;AAAA,0BACV,OAAO;AAAA,0BACP,QAAQ;AAAA,wBAAA;AAAA,sBACV;AAAA,oBAAA;AAAA,oBAGHjD,KAAiB,CAACkD,EAA0BjD,CAAe,uBAAMkD,IAAA,EAAqB;AAAA,oBACvF,gBAAAJ,EAACK,IAAA,EAAM,QAAQ1D,EAAA,CAAM;AAAA,oBACpBC,KACC,gBAAAoD,EAACM,GAAA,EAAQ,WAAU,OAAM,OAAO1D,GAC9B,UAAA,gBAAAoD,EAAC,OAAA,EAAI,WAAU,kBACb,UAAA,gBAAAA,EAACO,IAAA,CAAA,CAAS,GACZ,EAAA,CACF;AAAA,kBAAA,GAEJ;AAAA,kBAEA,gBAAAT,EAAC,OAAA,EAAI,WAAU,4CACX,UAAA;AAAA,oBAAAK,EAA0BjD,CAAe,KAAKC,IAC9C,gBAAA6C;AAAA,sBAACM;AAAA,sBAAA;AAAA,wBACC,WAAU;AAAA,wBACV,OAAOlD,KAAqB;AAAA,wBAC5B,aAAgDA,KAAsB;AAAA,wBACtE,WAAU;AAAA,wBAEV,UAAA,gBAAA0C;AAAA,0BAAC;AAAA,0BAAA;AAAA,4BACC,WAAWC;AAAA,8BACT;AAAA,8BACAS,GAA6BrD,CAAc;AAAA,4BAAA;AAAA,4BAE7C,SAAS,MAAMG,IAAyBD,CAAU;AAAA,4BAElD,UAAA;AAAA,8BAAA,gBAAA2C;AAAA,gCAACS;AAAA,gCAAA;AAAA,kCACC,MAAM;AAAA,kCACN,MAAMC,GAA6BvD,CAAc;AAAA,kCACjD,eAAewD,GAA4BxD,CAAc;AAAA,gCAAA;AAAA,8BAAA;AAAA,8BAE3D,gBAAA2C,EAAC,UAAK,WAAWC,EAAG,iCAAiCa,GAAiCzD,CAAc,CAAC,GAClG,UAAA;AAAA,gCAAAD;AAAA,gCAAgB;AAAA,8BAAA,EAAA,CACnB;AAAA,4BAAA;AAAA,0BAAA;AAAA,wBAAA;AAAA,sBACF;AAAA,oBAAA,IAEA;AAAA,oBACHH,KAASwB,KAAab,IACrB,gBAAAsC;AAAA,sBAAC;AAAA,sBAAA;AAAA,wBACC,IAAG;AAAA,wBACH,WAAU;AAAA,wBACV,SAAS,MAAMV,GAAuBnD,GAAO,SAAA,KAAc,EAAE;AAAA,wBAC7D,MAAK;AAAA,wBAEL,4BAAC0E,IAAA,EAAW,WAAU,OAAM,OAAOxC,GAAE,iBAAiB,GACpD,UAAA,gBAAA2B;AAAA,0BAACc;AAAA,0BAAA;AAAA,4BACC,IAAI;AAAA,8BACF,UAAU;AAAA,8BACV,OACEhD,IAAqB,GAAG,KAAK;AAAA,4BAAA;AAAA,0BACjC;AAAA,wBAAA,EACF,CACF;AAAA,sBAAA;AAAA,oBAAA,IAEA;AAAA,kBAAA,EAAA,CACN;AAAA,gBAAA,EAAA,CACF;AAAA,cAAA;AAAA,YAAA;AAAA,YAEF,gBAAAgC,EAAC,SAAA,EAAM,WAAU,uBACf,UAAA;AAAA,cAAA,gBAAAE;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,IAAAhE;AAAA,kBACA,KAAKgD;AAAA,kBACL,UAAAzC;AAAA,kBACA,aAAAL;AAAA,kBACA,WAAWsD,GAAA;AAAA,kBACX,UAAU,CAACuB,MAAM;AACf,oBAAA3E,EAAS2E,EAAE,OAAO,KAAK,GACvBpC,EAAcoC,EAAE,QAAQ,KAAK;AAAA,kBAC/B;AAAA,kBACA,WAAW7B;AAAA,kBACX,OAAOR,MAAe,OAAOA,IAAavC;AAAA,kBAC1C,cAAAG;AAAA,kBACA,UAAU;AAAA,gBAAA;AAAA,cAAA;AAAA,cAGZ,gBAAA0D;AAAA,gBAACgB;AAAA,gBAAA;AAAA,kBACC,IAAI;AAAA,kBACJ,SAAS3B;AAAA,kBACT,WAAU;AAAA,kBACV,SAAQ;AAAA,kBACR,UAAA7B;AAAA,kBAEA,UAAA,gBAAAwC;AAAA,oBAACiB;AAAA,oBAAA;AAAA,sBACC,WAAU;AAAA,sBACV,IAAI,EAAE,UAAU,GAAA;AAAA,oBAAG;AAAA,kBAAA;AAAA,gBACrB;AAAA,cAAA;AAAA,cAGF,gBAAAjB;AAAA,gBAACgB;AAAA,gBAAA;AAAA,kBACC,IAAI;AAAA,kBACJ,SAAS/B;AAAA,kBACT,WAAU;AAAA,kBACV,SAAQ;AAAA,kBACR,UAAAzB;AAAA,kBAEA,UAAA,gBAAAwC;AAAA,oBAACkB;AAAA,oBAAA;AAAA,sBACC,WAAU;AAAA,sBACV,IAAI,EAAE,UAAU,GAAA;AAAA,oBAAG;AAAA,kBAAA;AAAA,gBACrB;AAAA,cAAA;AAAA,YACF,GACF;AAAA,YAEC7E,KACC,gBAAA2D;AAAA,cAACmB;AAAA,cAAA;AAAA,gBACC,WAAU;AAAA,gBACV,YAAW;AAAA,gBACX,MAAK;AAAA,gBACL,SAAQ;AAAA,gBAEP,UAAA9E;AAAA,cAAA;AAAA,YAAA;AAAA,YAIJuC,KAAwBT,KACvB,gBAAA6B;AAAA,cAAC7B;AAAA,cAAA;AAAA,gBACC,WAAWS;AAAA,gBACX,UAAU,CAACwC,MAAS;AAClB,kBAAAhF,EAASgF,CAAI,GACbzC,EAAcyC,CAAI;AAAA,gBACpB;AAAA,gBACA,SAASnC;AAAA,gBACT,SAAAvC;AAAA,gBACA,YAAAD;AAAA,cAAA;AAAA,YAAA;AAAA,UACF,GAEJ;AAAA,UAEC8B,KACCZ,KACAC,KACAC,KACE,gBAAAmC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,UAAU;AAAA,cACV,WAAU;AAAA,cACV,SAAS,CAACe,MAAMA,EAAE,gBAAA;AAAA,cAClB,aAAa,CAACA,MAAMA,EAAE,eAAA;AAAA,cACtB,WAAW,CAACA,MAAM;AAChB,gBAAIA,EAAE,QAAQ,YACZvC,EAAa,EAAK;AAAA,cAEtB;AAAA,cAEA,UAAA,gBAAAwB,EAACnC,KAAgB,aAAAF,EAAA,CAA0B;AAAA,YAAA;AAAA,UAAA;AAAA,QAC7C;AAAA,MAAA;AAAA,IAAA;AAAA,EAIV;AACF;AAEA7B,GAAsB,cAAc;"}
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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"}

package/dist/components/forms/field-options/Item.cjs.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("../../../_virtual/index.cjs.js"),t=require("react-easy-sort"),l=require("./Icon.cjs.js"),d=require("../../icon/icons.generated.cjs.js"),c=s=>{const{value:a,index:i,onDeleteItem:n,userCanManage:r=!1}=s;return e.jsx(t.SortableItem,{children:e.jsxs("div",{className:o("relative flex items-center px-1.5 py-0.5 text-sm text-primary-600 bg-primary-50 dark:bg-black-700 rounded font-medium text-[14px] font-inter border border-primary-100"),children:[r&&e.jsx(t.SortableKnob,{children:e.jsx("button",{id:"btn-data-display-close-modal",className:"pr-2 cursor-move",children:e.jsx(d.DragIndicatorIcon,{size:14,className:"text-primary-600 dark:text-primary-600"})})}),a,r&&e.jsxs("span",{className:"flex items-center gap-2.5 p-0.5 rounded-xl bg-primary-100 ml-auto cursor-pointer","data-dismiss-target":"#badge-dismiss-default","aria-label":"Remove",onClick:()=>{n(i)},children:[e.jsx(l.CloseIcon,{size:"w-2.5 h-2.5"}),e.jsx("span",{className:"sr-only",children:"Remove badge"})]})]})})};exports.Item=c;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("../../../_virtual/index.cjs.js"),s=require("react-easy-sort"),l=require("./Icon.cjs.js"),d=require("../../icon/icons.generated.cjs.js"),c=t=>{const{value:a,index:i,onDeleteItem:n,userCanManage:r=!1}=t;return e.jsx(s.SortableItem,{children:e.jsxs("div",{className:o("relative flex items-center px-1.5 py-0.5 text-sm text-primary-600 bg-primary-50 dark:bg-black-700 rounded font-mediumtext-base font-inter border border-primary-100"),children:[r&&e.jsx(s.SortableKnob,{children:e.jsx("button",{id:"btn-data-display-close-modal",className:"pr-2 cursor-move",children:e.jsx(d.DragIndicatorIcon,{size:14,className:"text-primary-600 dark:text-primary-600"})})}),a,r&&e.jsxs("span",{className:"flex items-center gap-2.5 p-0.5 rounded-xl bg-primary-100 ml-auto cursor-pointer","data-dismiss-target":"#badge-dismiss-default","aria-label":"Remove",onClick:()=>{n(i)},children:[e.jsx(l.CloseIcon,{size:"w-2.5 h-2.5"}),e.jsx("span",{className:"sr-only",children:"Remove badge"})]})]})})};exports.Item=c;
 //# sourceMappingURL=Item.cjs.js.map