@lax-wp/design-system 0.13.33-beta.4 → 0.13.33-beta.6

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

@@ -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-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 />\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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"}
+{"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

@@ -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(

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

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

@@ -1,2 +1,2 @@
-"use strict";const s=require("react/jsx-runtime"),F=require("../../../_virtual/index.cjs.js"),e=require("react"),ee=require("react-contenteditable"),te=require("react-dom"),z=require("@mui/icons-material"),B=require("../../data-display/typography/Typography.cjs.js"),re=require("../../button/IconButton.cjs.js"),se=require("../../tooltip/Tooltip.cjs.js"),ne=require("../../icons/HelpIcon.cjs.js"),oe=require("../../../hooks/useOutsideClick.cjs.js"),I=require("./utils.cjs.js"),ae=require("../shared/InputLabel.cjs.js"),ce=require("../../../node_modules/@popperjs/core/lib/popper.cjs.js"),le=({value:u="",onChange:b,onFocus:q,onBlur:T,label:v,id:L,required:M,tooltip:D,placeholder:K,disabled:p,errorMessage:y,width:H="100%",suggestions:S=[],showRawValue:U=!1})=>{const c=e.useRef(null),R=e.useRef(null),m=e.useRef(null),j=e.useRef([]),g=e.useRef(null),[a,f]=e.useState(!1),[C,A]=e.useState(""),[d,w]=e.useState(0),[x,$]=e.useState(U),E=e.useRef(a),N=e.useRef([]),V=e.useRef(d),P=e.useRef(u);e.useEffect(()=>{E.current=a},[a]),e.useEffect(()=>{V.current=d},[d]),e.useEffect(()=>{P.current=u},[u]),oe.useOutsideClick({ref:m,handler:()=>{a&&f(!1)}});const h=e.useMemo(()=>{if(!C)return S;const t=C.toLowerCase();return S.filter(r=>r.toLowerCase().includes(t))},[S,C]);e.useEffect(()=>{N.current=h},[h]),e.useEffect(()=>{w(0)},[h]),e.useEffect(()=>{a&&j.current[d]&&j.current[d]?.scrollIntoView({block:"nearest",behavior:"smooth"})},[d,a]),e.useEffect(()=>{if(a&&R.current&&m.current)return g.current=ce.createPopper(R.current,m.current,{placement:"bottom-start",strategy:"fixed",modifiers:[{name:"flip",options:{fallbackPlacements:["top-start","bottom-start"]}},{name:"preventOverflow",options:{boundary:"viewport",padding:8}},{name:"offset",options:{offset:[0,4]}}]}),()=>{g.current&&(g.current.destroy(),g.current=null)}},[a]);const W=e.useCallback(t=>{const r=I.convertFromPills(t.target.value);b(r);const n=I.getTextBeforeCursor(),l=n.lastIndexOf("@");if(l!==-1){const i=n.slice(l+1);i.includes(" ")?f(!1):(A(i),f(!0))}else f(!1)},[b]),G=e.useCallback(()=>{c.current&&(c.current.isFocused=!0),q?.()},[q]),J=e.useCallback(t=>{c.current&&(c.current.isFocused=!1);const r=t.relatedTarget;r&&m.current?.contains(r)||(setTimeout(()=>{f(!1)},200),T?.())},[T]),k=e.useCallback(t=>{if(!c.current)return;const r=P.current,n=r.lastIndexOf("@");if(n!==-1){const i=r.slice(n+1).search(/\s/);let o;i===-1?o=r.length:o=n+1+i;const Y=r.slice(0,n),Z=r.slice(o),_=`${Y}{{${t}}}${Z}`;b(_),f(!1),A(""),setTimeout(()=>{c.current?.focus()},0)}},[b]),O=e.useCallback(t=>{const r=E.current,n=N.current,l=V.current;if(t.key==="Enter"){t.preventDefault(),t.stopPropagation(),r&&n.length>0&&n[l]&&k(n[l]);return}if(r&&n.length>0){const{key:i}=t;if(["ArrowDown","ArrowUp","Escape","Tab"].includes(i))switch(t.preventDefault(),t.stopPropagation(),i){case"ArrowDown":w(o=>o<n.length-1?o+1:o);break;case"ArrowUp":w(o=>o>0?o-1:0);break;case"Escape":f(!1);break;case"Tab":n[l]&&k(n[l]);break}}},[k]),Q=e.useCallback(t=>{t.preventDefault();const r=t.clipboardData.getData("text/plain");document.execCommand("insertText",!1,r)},[]),X=e.useMemo(()=>x?u:I.convertToPills(u),[u,x]);return s.jsxs("div",{className:"w-full",children:[v&&s.jsxs("div",{className:"text-xs font-medium text-gray-600 inline-flex items-center gap-1 font-inter text-left whitespace-nowrap flex-wrap",children:[s.jsx(ae.InputLabel,{label:v||"",required:M||!1}),D&&s.jsx(se,{placement:"top",title:D,children:s.jsx("div",{className:"cursor-pointer",children:s.jsx(ne.HelpIcon,{})})})]}),s.jsxs("div",{className:"relative",ref:R,children:[u?.trim()?null:s.jsx("div",{className:"absolute top-0 left-0 w-full h-full text-gray-400 flex items-center cursor-text px-3 z-50",onClick:()=>c.current?.focus(),children:s.jsx(B.Typography,{size:"extra-small",variant:"medium",children:K})}),s.jsxs("div",{className:"relative",children:[s.jsx(ee,{innerRef:c,className:F("min-h-[42px] rounded-lg p-2.5","text-sm font-inter block font-medium border text-gray-900 dark:text-white whitespace-normal break-words text-left",p?"bg-neutral-100 dark:bg-black-800":"bg-white dark:bg-black-800",!p&&"pr-[60px]",y?"!border-error-500":"border-gray-300 dark:border-black-600 focus:ring-blue-500 focus:border-blue-500","cursor-text"),style:{width:H,wordBreak:"break-word"},html:X,onChange:p?()=>null:W,onFocus:G,onBlur:J,onKeyDownCapture:O,onKeyDown:O,onPaste:Q,disabled:p,id:L}),!p&&s.jsx("div",{className:"absolute right-0 top-0 bottom-0 flex items-center align-middle justify-center p-3 gap-2",children:s.jsx(re,{tooltip:x?"Show Formatted":"Show Raw Value",variant:"ghost",onClick:()=>$(!x),children:x?s.jsx(z.VisibilityOutlined,{sx:{fontSize:18}}):s.jsx(z.VisibilityOffOutlined,{sx:{fontSize:18}})})})]}),a&&h.length>0&&te.createPortal(s.jsx("div",{ref:m,className:"z-[3000] bg-white dark:bg-black-800 border border-gray-300 dark:border-black-600 rounded-lg shadow-lg max-h-60 overflow-y-auto min-w-[200px]",onMouseDown:t=>{t.preventDefault()},children:h.map((t,r)=>s.jsx("div",{ref:n=>j.current[r]=n,className:F("px-3 py-2 cursor-pointer text-sm font-inter",r===d?"bg-primary-100 dark:bg-primary-900 text-primary-700 dark:text-primary-300":"hover:bg-gray-100 dark:hover:bg-black-700 text-gray-900 dark:text-white"),onClick:()=>k(t),onMouseEnter:()=>w(r),children:t},t))}),document.body)]}),y&&s.jsx("div",{className:"pt-1",children:s.jsx(B.Typography,{className:"text-error-500",size:"extra-small",variant:"medium",appearance:"custom",children:y})})]})},ie=e.memo(le);module.exports=ie;
+"use strict";const s=require("react/jsx-runtime"),F=require("../../../_virtual/index.cjs.js"),e=require("react"),ee=require("react-contenteditable"),te=require("react-dom"),z=require("@mui/icons-material"),B=require("../../data-display/typography/Typography.cjs.js"),re=require("../../button/IconButton.cjs.js"),se=require("../../tooltip/Tooltip.cjs.js"),ne=require("../../icons/HelpIcon.cjs.js"),oe=require("../../../hooks/useOutsideClick.cjs.js"),I=require("./utils.cjs.js"),ae=require("../shared/InputLabel.cjs.js"),ce=require("../../../node_modules/@popperjs/core/lib/popper.cjs.js"),le=({value:u="",onChange:b,onFocus:q,onBlur:T,label:v,id:L,required:M,tooltip:D,placeholder:K,disabled:p,errorMessage:y,width:H="100%",suggestions:S=[],showRawValue:U=!1})=>{const c=e.useRef(null),R=e.useRef(null),m=e.useRef(null),j=e.useRef([]),g=e.useRef(null),[a,f]=e.useState(!1),[C,N]=e.useState(""),[d,w]=e.useState(0),[x,$]=e.useState(U),A=e.useRef(a),E=e.useRef([]),V=e.useRef(d),P=e.useRef(u);e.useEffect(()=>{A.current=a},[a]),e.useEffect(()=>{V.current=d},[d]),e.useEffect(()=>{P.current=u},[u]),oe.useOutsideClick({ref:m,handler:()=>{a&&f(!1)}});const h=e.useMemo(()=>{if(!C)return S;const t=C.toLowerCase();return S.filter(r=>r.toLowerCase().includes(t))},[S,C]);e.useEffect(()=>{E.current=h},[h]),e.useEffect(()=>{w(0)},[h]),e.useEffect(()=>{a&&j.current[d]&&j.current[d]?.scrollIntoView({block:"nearest",behavior:"smooth"})},[d,a]),e.useEffect(()=>{if(a&&R.current&&m.current)return g.current=ce.createPopper(R.current,m.current,{placement:"bottom-start",strategy:"fixed",modifiers:[{name:"flip",options:{fallbackPlacements:["top-start","bottom-start"]}},{name:"preventOverflow",options:{boundary:"viewport",padding:8}},{name:"offset",options:{offset:[0,4]}}]}),()=>{g.current&&(g.current.destroy(),g.current=null)}},[a]);const W=e.useCallback(t=>{const r=I.convertFromPills(t.target.value);b(r);const n=I.getTextBeforeCursor(),l=n.lastIndexOf("@");if(l!==-1){const i=n.slice(l+1);i.includes(" ")?f(!1):(N(i),f(!0))}else f(!1)},[b]),G=e.useCallback(()=>{c.current&&(c.current.isFocused=!0),q?.()},[q]),J=e.useCallback(t=>{c.current&&(c.current.isFocused=!1);const r=t.relatedTarget;r&&m.current?.contains(r)||(setTimeout(()=>{f(!1)},200),T?.())},[T]),k=e.useCallback(t=>{if(!c.current)return;const r=P.current,n=r.lastIndexOf("@");if(n!==-1){const i=r.slice(n+1).search(/\s/);let o;i===-1?o=r.length:o=n+1+i;const Y=r.slice(0,n),Z=r.slice(o),_=`${Y}{{${t}}}${Z}`;b(_),f(!1),N(""),setTimeout(()=>{c.current?.focus()},0)}},[b]),O=e.useCallback(t=>{const r=A.current,n=E.current,l=V.current;if(t.key==="Enter"){t.preventDefault(),t.stopPropagation(),r&&n.length>0&&n[l]&&k(n[l]);return}if(r&&n.length>0){const{key:i}=t;if(["ArrowDown","ArrowUp","Escape","Tab"].includes(i))switch(t.preventDefault(),t.stopPropagation(),i){case"ArrowDown":w(o=>o<n.length-1?o+1:o);break;case"ArrowUp":w(o=>o>0?o-1:0);break;case"Escape":f(!1);break;case"Tab":n[l]&&k(n[l]);break}}},[k]),Q=e.useCallback(t=>{t.preventDefault();const r=t.clipboardData.getData("text/plain");document.execCommand("insertText",!1,r)},[]),X=e.useMemo(()=>x?u:I.convertToPills(u),[u,x]);return s.jsxs("div",{className:"w-full",children:[v&&s.jsxs("div",{className:"text-xs font-medium text-gray-600 inline-flex items-center gap-1 font-inter text-left whitespace-nowrap flex-wrap",children:[s.jsx(ae.InputLabel,{label:v||"",required:M||!1}),D&&s.jsx(se,{placement:"top",title:D,children:s.jsx("div",{className:"cursor-pointer",children:s.jsx(ne.HelpIcon,{className:"w-icon-sm h-icon-sm"})})})]}),s.jsxs("div",{className:"relative",ref:R,children:[u?.trim()?null:s.jsx("div",{className:"absolute top-0 left-0 w-full h-full text-gray-400 flex items-center cursor-text px-3 z-50",onClick:()=>c.current?.focus(),children:s.jsx(B.Typography,{size:"extra-small",variant:"medium",children:K})}),s.jsxs("div",{className:"relative",children:[s.jsx(ee,{innerRef:c,className:F("min-h-[42px] rounded-lg p-2.5","text-sm font-inter block font-medium border text-gray-900 dark:text-white whitespace-normal break-words text-left",p?"bg-neutral-100 dark:bg-black-800":"bg-white dark:bg-black-800",!p&&"pr-[60px]",y?"!border-error-500":"border-gray-300 dark:border-black-600 focus:ring-blue-500 focus:border-blue-500","cursor-text"),style:{width:H,wordBreak:"break-word"},html:X,onChange:p?()=>null:W,onFocus:G,onBlur:J,onKeyDownCapture:O,onKeyDown:O,onPaste:Q,disabled:p,id:L}),!p&&s.jsx("div",{className:"absolute right-0 top-0 bottom-0 flex items-center align-middle justify-center p-3 gap-2",children:s.jsx(re,{tooltip:x?"Show Formatted":"Show Raw Value",variant:"ghost",onClick:()=>$(!x),children:x?s.jsx(z.VisibilityOutlined,{sx:{fontSize:18}}):s.jsx(z.VisibilityOffOutlined,{sx:{fontSize:18}})})})]}),a&&h.length>0&&te.createPortal(s.jsx("div",{ref:m,className:"z-[3000] bg-white dark:bg-black-800 border border-gray-300 dark:border-black-600 rounded-lg shadow-lg max-h-60 overflow-y-auto min-w-[200px]",onMouseDown:t=>{t.preventDefault()},children:h.map((t,r)=>s.jsx("div",{ref:n=>j.current[r]=n,className:F("px-3 py-2 cursor-pointer text-sm font-inter",r===d?"bg-primary-100 dark:bg-primary-900 text-primary-700 dark:text-primary-300":"hover:bg-gray-100 dark:hover:bg-black-700 text-gray-900 dark:text-white"),onClick:()=>k(t),onMouseEnter:()=>w(r),children:t},t))}),document.body)]}),y&&s.jsx("div",{className:"pt-1",children:s.jsx(B.Typography,{className:"text-error-500",size:"extra-small",variant:"medium",appearance:"custom",children:y})})]})},ie=e.memo(le);module.exports=ie;
 //# sourceMappingURL=FormulaInput.cjs.js.map

package/dist/components/forms/formula-input/FormulaInput.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormulaInput.cjs.js","sources":["../../../../src/components/forms/formula-input/FormulaInput.tsx"],"sourcesContent":["import { Instance as PopperInstance, createPopper } from '@popperjs/core';\nimport cn from 'classnames';\nimport React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport ContentEditable, { ContentEditableEvent } from 'react-contenteditable';\nimport { createPortal } from 'react-dom';\nimport { VisibilityOffOutlined, VisibilityOutlined } from '@mui/icons-material';\n\nimport { Typography } from '../../data-display/typography/Typography';\nimport IconButton from '../../button/IconButton';\nimport Tooltip from '../../tooltip/Tooltip';\nimport { HelpIcon } from '../../icons/HelpIcon';\nimport { useOutsideClick } from '../../../hooks/useOutsideClick';\nimport { convertFromPills, convertToPills, getTextBeforeCursor } from './utils';\nimport { InputLabel } from '../shared/InputLabel';\n\nexport interface FormulaInputProps {\n  /** Current value of the input */\n  value: string;\n  /** Callback when value changes */\n  onChange: (value: string) => void;\n  /** Callback when input receives focus */\n  onFocus?: () => void;\n  /** Callback when input loses focus */\n  onBlur?: () => void;\n  /** Label for the input field */\n  label?: string;\n  /** Unique identifier for the input */\n  id: string;\n  /** Whether the field is required */\n  required?: boolean;\n  /** Tooltip text displayed next to the label */\n  tooltip?: string;\n  /** Placeholder text */\n  placeholder?: string;\n  /** Whether the input is disabled */\n  disabled?: boolean;\n  /** Error message to display */\n  errorMessage?: string;\n  /** Width of the input */\n  width?: string;\n  /** List of suggestions for autocomplete */\n  suggestions?: string[];\n  /** Whether to show the raw value instead of pills */\n  showRawValue?: boolean;\n}\n\n/**\n * FormulaInput component for entering formulas with variable suggestions\n * Variables are displayed as pills and can be inserted using @ trigger\n */\nconst FormulaInput: React.FC<FormulaInputProps> = ({\n  value = '',\n  onChange,\n  onFocus,\n  onBlur,\n  label,\n  id,\n  required: isRequired,\n  tooltip,\n  placeholder,\n  disabled,\n  errorMessage,\n  width = '100%',\n  suggestions = [],\n  showRawValue: showRawValueProp = false,\n}) => {\n  const contentRef = useRef<HTMLElement & { isFocused?: boolean }>(null);\n  const inputWrapperRef = useRef<HTMLDivElement>(null);\n  const suggestionMenuRef = useRef<HTMLDivElement>(null);\n  const suggestionRefs = useRef<(HTMLDivElement | null)[]>([]);\n  const popperInstanceRef = useRef<PopperInstance | null>(null);\n  const [showSuggestions, setShowSuggestions] = useState(false);\n  const [searchTerm, setSearchTerm] = useState('');\n  const [selectedIndex, setSelectedIndex] = useState(0);\n  const [showRawValue, setShowRawValue] = useState(showRawValueProp);\n\n  // Use refs to track current state for event handlers\n  const showSuggestionsRef = useRef(showSuggestions);\n  const filteredSuggestionsRef = useRef<string[]>([]);\n  const selectedIndexRef = useRef(selectedIndex);\n  const valueRef = useRef(value);\n\n  // Keep refs in sync with state\n  useEffect(() => {\n    showSuggestionsRef.current = showSuggestions;\n  }, [showSuggestions]);\n\n  useEffect(() => {\n    selectedIndexRef.current = selectedIndex;\n  }, [selectedIndex]);\n\n  useEffect(() => {\n    valueRef.current = value;\n  }, [value]);\n\n  // Close suggestions when clicking outside\n  useOutsideClick({\n    ref: suggestionMenuRef,\n    handler: () => {\n      if (showSuggestions) {\n        setShowSuggestions(false);\n      }\n    },\n  });\n\n  // Filter suggestions based on search term\n  const filteredSuggestions = useMemo(() => {\n    if (!searchTerm) return suggestions;\n\n    const lowerSearchTerm = searchTerm.toLowerCase();\n    return suggestions.filter((suggestion) => suggestion.toLowerCase().includes(lowerSearchTerm));\n  }, [suggestions, searchTerm]);\n\n  // Keep filtered suggestions ref in sync\n  useEffect(() => {\n    filteredSuggestionsRef.current = filteredSuggestions;\n  }, [filteredSuggestions]);\n\n  // Reset selected index when filtered suggestions change\n  useEffect(() => {\n    setSelectedIndex(0);\n  }, [filteredSuggestions]);\n\n  // Scroll selected suggestion into view\n  useEffect(() => {\n    if (showSuggestions && suggestionRefs.current[selectedIndex]) {\n      suggestionRefs.current[selectedIndex]?.scrollIntoView({\n        block: 'nearest',\n        behavior: 'smooth',\n      });\n    }\n  }, [selectedIndex, showSuggestions]);\n\n  // Setup Popper for dynamic positioning\n  useEffect(() => {\n    if (showSuggestions && inputWrapperRef.current && suggestionMenuRef.current) {\n      // Create popper instance with auto placement\n      popperInstanceRef.current = createPopper(inputWrapperRef.current, suggestionMenuRef.current, {\n        placement: 'bottom-start',\n        strategy: 'fixed',\n        modifiers: [\n          {\n            name: 'flip',\n            options: {\n              fallbackPlacements: ['top-start', 'bottom-start'],\n            },\n          },\n          {\n            name: 'preventOverflow',\n            options: {\n              boundary: 'viewport',\n              padding: 8,\n            },\n          },\n          {\n            name: 'offset',\n            options: {\n              offset: [0, 4],\n            },\n          },\n        ],\n      });\n\n      return () => {\n        if (popperInstanceRef.current) {\n          popperInstanceRef.current.destroy();\n          popperInstanceRef.current = null;\n        }\n      };\n    }\n  }, [showSuggestions]);\n\n  const handleChange = useCallback(\n    (event: ContentEditableEvent) => {\n      const rawValue = convertFromPills(event.target.value);\n      onChange(rawValue);\n\n      // Check if user typed @ (trigger for suggestions)\n      const textBeforeCursor = getTextBeforeCursor();\n      const lastAtSymbol = textBeforeCursor.lastIndexOf('@');\n\n      if (lastAtSymbol !== -1) {\n        // Get text after the @ symbol\n        const textAfterAt = textBeforeCursor.slice(lastAtSymbol + 1);\n\n        // Check if there's a space after @, which would end the suggestion context\n        const hasSpace = textAfterAt.includes(' ');\n\n        if (!hasSpace) {\n          // We're in suggestion mode - show suggestions filtered by text after @\n          setSearchTerm(textAfterAt);\n          setShowSuggestions(true);\n        } else {\n          setShowSuggestions(false);\n        }\n      } else {\n        setShowSuggestions(false);\n      }\n    },\n    [onChange],\n  );\n\n  const handleFocus = useCallback(() => {\n    if (contentRef.current) {\n      contentRef.current.isFocused = true;\n    }\n    onFocus?.();\n  }, [onFocus]);\n\n  const handleBlur = useCallback(\n    (event: React.FocusEvent) => {\n      if (contentRef.current) {\n        contentRef.current.isFocused = false;\n      }\n\n      // Check if the blur is due to clicking on a suggestion\n      const relatedTarget = event.relatedTarget as HTMLElement;\n      if (relatedTarget && suggestionMenuRef.current?.contains(relatedTarget)) {\n        // Don't close suggestions if clicking on a suggestion\n        return;\n      }\n\n      // Delay closing suggestions to allow click events to register\n      setTimeout(() => {\n        setShowSuggestions(false);\n      }, 200);\n      onBlur?.();\n    },\n    [onBlur],\n  );\n\n  const insertSuggestion = useCallback(\n    (suggestion: string) => {\n      if (!contentRef.current) return;\n\n      // IMPORTANT: Use the value prop (not innerText) to preserve existing {{}} syntax\n      // innerText only shows display text and loses the {{}} markers from pills\n      const currentValue = valueRef.current;\n\n      // Find the last occurrence of @ (trigger symbol) in the raw value\n      const lastAtSymbol = currentValue.lastIndexOf('@');\n\n      if (lastAtSymbol !== -1) {\n        // Find where the @ trigger ends (space or end of string)\n        const afterAt = currentValue.slice(lastAtSymbol + 1);\n        const spaceIndex = afterAt.search(/\\s/);\n\n        let endPosition: number;\n        if (spaceIndex === -1) {\n          // No space found, the incomplete variable goes to the end\n          endPosition = currentValue.length;\n        } else {\n          // Space found, replace up to the space\n          endPosition = lastAtSymbol + 1 + spaceIndex;\n        }\n\n        // Build the new value preserving all existing {{}} syntax\n        // Replace @searchTerm with {{suggestion}}\n        const beforeAt = currentValue.slice(0, lastAtSymbol);\n        const afterCursor = currentValue.slice(endPosition);\n        const newValue = `${beforeAt}{{${suggestion}}}${afterCursor}`;\n\n        // Update through onChange\n        onChange(newValue);\n\n        // Close suggestions\n        setShowSuggestions(false);\n        setSearchTerm('');\n\n        // Refocus the input after React updates\n        setTimeout(() => {\n          contentRef.current?.focus();\n        }, 0);\n      }\n    },\n    [onChange],\n  );\n\n  const handleKeyDown = useCallback(\n    (event: React.KeyboardEvent) => {\n      // Use refs to get the latest state values to avoid stale closures\n      const isShowingSuggestions = showSuggestionsRef.current;\n      const currentFilteredSuggestions = filteredSuggestionsRef.current;\n      const currentSelectedIndex = selectedIndexRef.current;\n\n      // Always prevent Enter key to avoid creating new lines/divs\n      if (event.key === 'Enter') {\n        event.preventDefault();\n        event.stopPropagation();\n\n        // If suggestions are showing, select the current suggestion\n        if (isShowingSuggestions && currentFilteredSuggestions.length > 0 && currentFilteredSuggestions[currentSelectedIndex]) {\n          insertSuggestion(currentFilteredSuggestions[currentSelectedIndex]);\n        }\n        return;\n      }\n\n      // When suggestions are visible, intercept navigation keys immediately\n      if (isShowingSuggestions && currentFilteredSuggestions.length > 0) {\n        const { key } = event;\n\n        // Prevent default for all navigation keys when suggestions are shown\n        if (['ArrowDown', 'ArrowUp', 'Escape', 'Tab'].includes(key)) {\n          event.preventDefault();\n          event.stopPropagation();\n\n          switch (key) {\n            case 'ArrowDown':\n              setSelectedIndex((prev) => (prev < currentFilteredSuggestions.length - 1 ? prev + 1 : prev));\n              break;\n            case 'ArrowUp':\n              setSelectedIndex((prev) => (prev > 0 ? prev - 1 : 0));\n              break;\n            case 'Escape':\n              setShowSuggestions(false);\n              break;\n            case 'Tab':\n              if (currentFilteredSuggestions[currentSelectedIndex]) {\n                insertSuggestion(currentFilteredSuggestions[currentSelectedIndex]);\n              }\n              break;\n          }\n        }\n      }\n    },\n    [insertSuggestion],\n  );\n\n  const handlePaste = useCallback((event: React.ClipboardEvent<HTMLDivElement>) => {\n    event.preventDefault();\n    const text = event.clipboardData.getData('text/plain');\n    document.execCommand('insertText', false, text);\n  }, []);\n\n  const displayValue = useMemo(() => {\n    if (showRawValue) {\n      return value;\n    }\n    return convertToPills(value);\n  }, [value, showRawValue]);\n\n  return (\n    <div className='w-full'>\n      {label && (\n        <div className='text-xs font-medium text-gray-600 inline-flex items-center gap-1 font-inter text-left whitespace-nowrap flex-wrap'>\n          <InputLabel label={label || \"\"} required={isRequired || false} />\n          {tooltip && (\n            <Tooltip placement='top' title={tooltip}>\n              <div className='cursor-pointer'>\n                <HelpIcon />\n              </div>\n            </Tooltip>\n          )}\n        </div>\n      )}\n\n      <div className='relative' ref={inputWrapperRef}>\n        {!value?.trim() ? (\n          <div\n            className='absolute top-0 left-0 w-full h-full text-gray-400 flex items-center cursor-text px-3 z-50'\n            onClick={() => contentRef.current?.focus()}\n          >\n            <Typography size='extra-small' variant='medium'>\n              {placeholder}\n            </Typography>\n          </div>\n        ) : null}\n\n        <div className='relative'>\n          <ContentEditable\n            innerRef={contentRef}\n            className={cn(\n              'min-h-[42px] rounded-lg p-2.5',\n              'text-sm font-inter block font-medium border text-gray-900 dark:text-white whitespace-normal break-words text-left',\n              disabled ? 'bg-neutral-100 dark:bg-black-800' : 'bg-white dark:bg-black-800',\n              !disabled && 'pr-[60px]',\n              errorMessage ? '!border-error-500' : 'border-gray-300 dark:border-black-600 focus:ring-blue-500 focus:border-blue-500',\n              'cursor-text',\n            )}\n            style={{\n              width: width,\n              wordBreak: 'break-word',\n            }}\n            html={displayValue}\n            onChange={!disabled ? handleChange : () => null}\n            onFocus={handleFocus}\n            onBlur={handleBlur}\n            onKeyDownCapture={handleKeyDown}\n            onKeyDown={handleKeyDown}\n            onPaste={handlePaste}\n            disabled={disabled}\n            id={id}\n          />\n\n          {!disabled && (\n            <div className='absolute right-0 top-0 bottom-0 flex items-center align-middle justify-center p-3 gap-2'>\n              <IconButton tooltip={showRawValue ? 'Show Formatted' : 'Show Raw Value'} variant='ghost' onClick={() => setShowRawValue(!showRawValue)}>\n                {showRawValue ? <VisibilityOutlined sx={{ fontSize: 18 }} /> : <VisibilityOffOutlined sx={{ fontSize: 18 }} />}\n              </IconButton>\n            </div>\n          )}\n        </div>\n\n        {showSuggestions &&\n          filteredSuggestions.length > 0 &&\n          createPortal(\n            <div\n              ref={suggestionMenuRef}\n              className='z-[3000] bg-white dark:bg-black-800 border border-gray-300 dark:border-black-600 rounded-lg shadow-lg max-h-60 overflow-y-auto min-w-[200px]'\n              onMouseDown={(e) => {\n                // Prevent blur when clicking on suggestions\n                e.preventDefault();\n              }}\n            >\n              {filteredSuggestions.map((suggestion, index) => (\n                <div\n                  key={suggestion}\n                  ref={(el) => (suggestionRefs.current[index] = el)}\n                  className={cn(\n                    'px-3 py-2 cursor-pointer text-sm font-inter',\n                    index === selectedIndex\n                      ? 'bg-primary-100 dark:bg-primary-900 text-primary-700 dark:text-primary-300'\n                      : 'hover:bg-gray-100 dark:hover:bg-black-700 text-gray-900 dark:text-white',\n                  )}\n                  onClick={() => insertSuggestion(suggestion)}\n                  onMouseEnter={() => setSelectedIndex(index)}\n                >\n                  {suggestion}\n                </div>\n              ))}\n            </div>,\n            document.body,\n          )}\n      </div>\n\n      {errorMessage && (\n        <div className='pt-1'>\n          <Typography className='text-error-500' size='extra-small' variant='medium' appearance='custom'>\n            {errorMessage}\n          </Typography>\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default React.memo(FormulaInput);\n\n\n\n"],"names":["FormulaInput","value","onChange","onFocus","onBlur","label","id","isRequired","tooltip","placeholder","disabled","errorMessage","width","suggestions","showRawValueProp","contentRef","useRef","inputWrapperRef","suggestionMenuRef","suggestionRefs","popperInstanceRef","showSuggestions","setShowSuggestions","useState","searchTerm","setSearchTerm","selectedIndex","setSelectedIndex","showRawValue","setShowRawValue","showSuggestionsRef","filteredSuggestionsRef","selectedIndexRef","valueRef","useEffect","useOutsideClick","filteredSuggestions","useMemo","lowerSearchTerm","suggestion","createPopper","handleChange","useCallback","event","rawValue","convertFromPills","textBeforeCursor","getTextBeforeCursor","lastAtSymbol","textAfterAt","handleFocus","handleBlur","relatedTarget","insertSuggestion","currentValue","spaceIndex","endPosition","beforeAt","afterCursor","newValue","handleKeyDown","isShowingSuggestions","currentFilteredSuggestions","currentSelectedIndex","key","prev","handlePaste","text","displayValue","convertToPills","jsxs","jsx","InputLabel","Tooltip","HelpIcon","Typography","ContentEditable","cn","IconButton","VisibilityOutlined","VisibilityOffOutlined","createPortal","e","index","el","FormulaInput$1","React"],"mappings":"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"}
+{"version":3,"file":"FormulaInput.cjs.js","sources":["../../../../src/components/forms/formula-input/FormulaInput.tsx"],"sourcesContent":["import { Instance as PopperInstance, createPopper } from '@popperjs/core';\nimport cn from 'classnames';\nimport React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport ContentEditable, { ContentEditableEvent } from 'react-contenteditable';\nimport { createPortal } from 'react-dom';\nimport { VisibilityOffOutlined, VisibilityOutlined } from '@mui/icons-material';\n\nimport { Typography } from '../../data-display/typography/Typography';\nimport IconButton from '../../button/IconButton';\nimport Tooltip from '../../tooltip/Tooltip';\nimport { HelpIcon } from '../../icons/HelpIcon';\nimport { useOutsideClick } from '../../../hooks/useOutsideClick';\nimport { convertFromPills, convertToPills, getTextBeforeCursor } from './utils';\nimport { InputLabel } from '../shared/InputLabel';\n\nexport interface FormulaInputProps {\n  /** Current value of the input */\n  value: string;\n  /** Callback when value changes */\n  onChange: (value: string) => void;\n  /** Callback when input receives focus */\n  onFocus?: () => void;\n  /** Callback when input loses focus */\n  onBlur?: () => void;\n  /** Label for the input field */\n  label?: string;\n  /** Unique identifier for the input */\n  id: string;\n  /** Whether the field is required */\n  required?: boolean;\n  /** Tooltip text displayed next to the label */\n  tooltip?: string;\n  /** Placeholder text */\n  placeholder?: string;\n  /** Whether the input is disabled */\n  disabled?: boolean;\n  /** Error message to display */\n  errorMessage?: string;\n  /** Width of the input */\n  width?: string;\n  /** List of suggestions for autocomplete */\n  suggestions?: string[];\n  /** Whether to show the raw value instead of pills */\n  showRawValue?: boolean;\n}\n\n/**\n * FormulaInput component for entering formulas with variable suggestions\n * Variables are displayed as pills and can be inserted using @ trigger\n */\nconst FormulaInput: React.FC<FormulaInputProps> = ({\n  value = '',\n  onChange,\n  onFocus,\n  onBlur,\n  label,\n  id,\n  required: isRequired,\n  tooltip,\n  placeholder,\n  disabled,\n  errorMessage,\n  width = '100%',\n  suggestions = [],\n  showRawValue: showRawValueProp = false,\n}) => {\n  const contentRef = useRef<HTMLElement & { isFocused?: boolean }>(null);\n  const inputWrapperRef = useRef<HTMLDivElement>(null);\n  const suggestionMenuRef = useRef<HTMLDivElement>(null);\n  const suggestionRefs = useRef<(HTMLDivElement | null)[]>([]);\n  const popperInstanceRef = useRef<PopperInstance | null>(null);\n  const [showSuggestions, setShowSuggestions] = useState(false);\n  const [searchTerm, setSearchTerm] = useState('');\n  const [selectedIndex, setSelectedIndex] = useState(0);\n  const [showRawValue, setShowRawValue] = useState(showRawValueProp);\n\n  // Use refs to track current state for event handlers\n  const showSuggestionsRef = useRef(showSuggestions);\n  const filteredSuggestionsRef = useRef<string[]>([]);\n  const selectedIndexRef = useRef(selectedIndex);\n  const valueRef = useRef(value);\n\n  // Keep refs in sync with state\n  useEffect(() => {\n    showSuggestionsRef.current = showSuggestions;\n  }, [showSuggestions]);\n\n  useEffect(() => {\n    selectedIndexRef.current = selectedIndex;\n  }, [selectedIndex]);\n\n  useEffect(() => {\n    valueRef.current = value;\n  }, [value]);\n\n  // Close suggestions when clicking outside\n  useOutsideClick({\n    ref: suggestionMenuRef,\n    handler: () => {\n      if (showSuggestions) {\n        setShowSuggestions(false);\n      }\n    },\n  });\n\n  // Filter suggestions based on search term\n  const filteredSuggestions = useMemo(() => {\n    if (!searchTerm) return suggestions;\n\n    const lowerSearchTerm = searchTerm.toLowerCase();\n    return suggestions.filter((suggestion) => suggestion.toLowerCase().includes(lowerSearchTerm));\n  }, [suggestions, searchTerm]);\n\n  // Keep filtered suggestions ref in sync\n  useEffect(() => {\n    filteredSuggestionsRef.current = filteredSuggestions;\n  }, [filteredSuggestions]);\n\n  // Reset selected index when filtered suggestions change\n  useEffect(() => {\n    setSelectedIndex(0);\n  }, [filteredSuggestions]);\n\n  // Scroll selected suggestion into view\n  useEffect(() => {\n    if (showSuggestions && suggestionRefs.current[selectedIndex]) {\n      suggestionRefs.current[selectedIndex]?.scrollIntoView({\n        block: 'nearest',\n        behavior: 'smooth',\n      });\n    }\n  }, [selectedIndex, showSuggestions]);\n\n  // Setup Popper for dynamic positioning\n  useEffect(() => {\n    if (showSuggestions && inputWrapperRef.current && suggestionMenuRef.current) {\n      // Create popper instance with auto placement\n      popperInstanceRef.current = createPopper(inputWrapperRef.current, suggestionMenuRef.current, {\n        placement: 'bottom-start',\n        strategy: 'fixed',\n        modifiers: [\n          {\n            name: 'flip',\n            options: {\n              fallbackPlacements: ['top-start', 'bottom-start'],\n            },\n          },\n          {\n            name: 'preventOverflow',\n            options: {\n              boundary: 'viewport',\n              padding: 8,\n            },\n          },\n          {\n            name: 'offset',\n            options: {\n              offset: [0, 4],\n            },\n          },\n        ],\n      });\n\n      return () => {\n        if (popperInstanceRef.current) {\n          popperInstanceRef.current.destroy();\n          popperInstanceRef.current = null;\n        }\n      };\n    }\n  }, [showSuggestions]);\n\n  const handleChange = useCallback(\n    (event: ContentEditableEvent) => {\n      const rawValue = convertFromPills(event.target.value);\n      onChange(rawValue);\n\n      // Check if user typed @ (trigger for suggestions)\n      const textBeforeCursor = getTextBeforeCursor();\n      const lastAtSymbol = textBeforeCursor.lastIndexOf('@');\n\n      if (lastAtSymbol !== -1) {\n        // Get text after the @ symbol\n        const textAfterAt = textBeforeCursor.slice(lastAtSymbol + 1);\n\n        // Check if there's a space after @, which would end the suggestion context\n        const hasSpace = textAfterAt.includes(' ');\n\n        if (!hasSpace) {\n          // We're in suggestion mode - show suggestions filtered by text after @\n          setSearchTerm(textAfterAt);\n          setShowSuggestions(true);\n        } else {\n          setShowSuggestions(false);\n        }\n      } else {\n        setShowSuggestions(false);\n      }\n    },\n    [onChange],\n  );\n\n  const handleFocus = useCallback(() => {\n    if (contentRef.current) {\n      contentRef.current.isFocused = true;\n    }\n    onFocus?.();\n  }, [onFocus]);\n\n  const handleBlur = useCallback(\n    (event: React.FocusEvent) => {\n      if (contentRef.current) {\n        contentRef.current.isFocused = false;\n      }\n\n      // Check if the blur is due to clicking on a suggestion\n      const relatedTarget = event.relatedTarget as HTMLElement;\n      if (relatedTarget && suggestionMenuRef.current?.contains(relatedTarget)) {\n        // Don't close suggestions if clicking on a suggestion\n        return;\n      }\n\n      // Delay closing suggestions to allow click events to register\n      setTimeout(() => {\n        setShowSuggestions(false);\n      }, 200);\n      onBlur?.();\n    },\n    [onBlur],\n  );\n\n  const insertSuggestion = useCallback(\n    (suggestion: string) => {\n      if (!contentRef.current) return;\n\n      // IMPORTANT: Use the value prop (not innerText) to preserve existing {{}} syntax\n      // innerText only shows display text and loses the {{}} markers from pills\n      const currentValue = valueRef.current;\n\n      // Find the last occurrence of @ (trigger symbol) in the raw value\n      const lastAtSymbol = currentValue.lastIndexOf('@');\n\n      if (lastAtSymbol !== -1) {\n        // Find where the @ trigger ends (space or end of string)\n        const afterAt = currentValue.slice(lastAtSymbol + 1);\n        const spaceIndex = afterAt.search(/\\s/);\n\n        let endPosition: number;\n        if (spaceIndex === -1) {\n          // No space found, the incomplete variable goes to the end\n          endPosition = currentValue.length;\n        } else {\n          // Space found, replace up to the space\n          endPosition = lastAtSymbol + 1 + spaceIndex;\n        }\n\n        // Build the new value preserving all existing {{}} syntax\n        // Replace @searchTerm with {{suggestion}}\n        const beforeAt = currentValue.slice(0, lastAtSymbol);\n        const afterCursor = currentValue.slice(endPosition);\n        const newValue = `${beforeAt}{{${suggestion}}}${afterCursor}`;\n\n        // Update through onChange\n        onChange(newValue);\n\n        // Close suggestions\n        setShowSuggestions(false);\n        setSearchTerm('');\n\n        // Refocus the input after React updates\n        setTimeout(() => {\n          contentRef.current?.focus();\n        }, 0);\n      }\n    },\n    [onChange],\n  );\n\n  const handleKeyDown = useCallback(\n    (event: React.KeyboardEvent) => {\n      // Use refs to get the latest state values to avoid stale closures\n      const isShowingSuggestions = showSuggestionsRef.current;\n      const currentFilteredSuggestions = filteredSuggestionsRef.current;\n      const currentSelectedIndex = selectedIndexRef.current;\n\n      // Always prevent Enter key to avoid creating new lines/divs\n      if (event.key === 'Enter') {\n        event.preventDefault();\n        event.stopPropagation();\n\n        // If suggestions are showing, select the current suggestion\n        if (isShowingSuggestions && currentFilteredSuggestions.length > 0 && currentFilteredSuggestions[currentSelectedIndex]) {\n          insertSuggestion(currentFilteredSuggestions[currentSelectedIndex]);\n        }\n        return;\n      }\n\n      // When suggestions are visible, intercept navigation keys immediately\n      if (isShowingSuggestions && currentFilteredSuggestions.length > 0) {\n        const { key } = event;\n\n        // Prevent default for all navigation keys when suggestions are shown\n        if (['ArrowDown', 'ArrowUp', 'Escape', 'Tab'].includes(key)) {\n          event.preventDefault();\n          event.stopPropagation();\n\n          switch (key) {\n            case 'ArrowDown':\n              setSelectedIndex((prev) => (prev < currentFilteredSuggestions.length - 1 ? prev + 1 : prev));\n              break;\n            case 'ArrowUp':\n              setSelectedIndex((prev) => (prev > 0 ? prev - 1 : 0));\n              break;\n            case 'Escape':\n              setShowSuggestions(false);\n              break;\n            case 'Tab':\n              if (currentFilteredSuggestions[currentSelectedIndex]) {\n                insertSuggestion(currentFilteredSuggestions[currentSelectedIndex]);\n              }\n              break;\n          }\n        }\n      }\n    },\n    [insertSuggestion],\n  );\n\n  const handlePaste = useCallback((event: React.ClipboardEvent<HTMLDivElement>) => {\n    event.preventDefault();\n    const text = event.clipboardData.getData('text/plain');\n    document.execCommand('insertText', false, text);\n  }, []);\n\n  const displayValue = useMemo(() => {\n    if (showRawValue) {\n      return value;\n    }\n    return convertToPills(value);\n  }, [value, showRawValue]);\n\n  return (\n    <div className='w-full'>\n      {label && (\n        <div className='text-xs font-medium text-gray-600 inline-flex items-center gap-1 font-inter text-left whitespace-nowrap flex-wrap'>\n          <InputLabel label={label || \"\"} required={isRequired || false} />\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\n      <div className='relative' ref={inputWrapperRef}>\n        {!value?.trim() ? (\n          <div\n            className='absolute top-0 left-0 w-full h-full text-gray-400 flex items-center cursor-text px-3 z-50'\n            onClick={() => contentRef.current?.focus()}\n          >\n            <Typography size='extra-small' variant='medium'>\n              {placeholder}\n            </Typography>\n          </div>\n        ) : null}\n\n        <div className='relative'>\n          <ContentEditable\n            innerRef={contentRef}\n            className={cn(\n              'min-h-[42px] rounded-lg p-2.5',\n              'text-sm font-inter block font-medium border text-gray-900 dark:text-white whitespace-normal break-words text-left',\n              disabled ? 'bg-neutral-100 dark:bg-black-800' : 'bg-white dark:bg-black-800',\n              !disabled && 'pr-[60px]',\n              errorMessage ? '!border-error-500' : 'border-gray-300 dark:border-black-600 focus:ring-blue-500 focus:border-blue-500',\n              'cursor-text',\n            )}\n            style={{\n              width: width,\n              wordBreak: 'break-word',\n            }}\n            html={displayValue}\n            onChange={!disabled ? handleChange : () => null}\n            onFocus={handleFocus}\n            onBlur={handleBlur}\n            onKeyDownCapture={handleKeyDown}\n            onKeyDown={handleKeyDown}\n            onPaste={handlePaste}\n            disabled={disabled}\n            id={id}\n          />\n\n          {!disabled && (\n            <div className='absolute right-0 top-0 bottom-0 flex items-center align-middle justify-center p-3 gap-2'>\n              <IconButton tooltip={showRawValue ? 'Show Formatted' : 'Show Raw Value'} variant='ghost' onClick={() => setShowRawValue(!showRawValue)}>\n                {showRawValue ? <VisibilityOutlined sx={{ fontSize: 18 }} /> : <VisibilityOffOutlined sx={{ fontSize: 18 }} />}\n              </IconButton>\n            </div>\n          )}\n        </div>\n\n        {showSuggestions &&\n          filteredSuggestions.length > 0 &&\n          createPortal(\n            <div\n              ref={suggestionMenuRef}\n              className='z-[3000] bg-white dark:bg-black-800 border border-gray-300 dark:border-black-600 rounded-lg shadow-lg max-h-60 overflow-y-auto min-w-[200px]'\n              onMouseDown={(e) => {\n                // Prevent blur when clicking on suggestions\n                e.preventDefault();\n              }}\n            >\n              {filteredSuggestions.map((suggestion, index) => (\n                <div\n                  key={suggestion}\n                  ref={(el) => (suggestionRefs.current[index] = el)}\n                  className={cn(\n                    'px-3 py-2 cursor-pointer text-sm font-inter',\n                    index === selectedIndex\n                      ? 'bg-primary-100 dark:bg-primary-900 text-primary-700 dark:text-primary-300'\n                      : 'hover:bg-gray-100 dark:hover:bg-black-700 text-gray-900 dark:text-white',\n                  )}\n                  onClick={() => insertSuggestion(suggestion)}\n                  onMouseEnter={() => setSelectedIndex(index)}\n                >\n                  {suggestion}\n                </div>\n              ))}\n            </div>,\n            document.body,\n          )}\n      </div>\n\n      {errorMessage && (\n        <div className='pt-1'>\n          <Typography className='text-error-500' size='extra-small' variant='medium' appearance='custom'>\n            {errorMessage}\n          </Typography>\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default React.memo(FormulaInput);\n\n\n\n"],"names":["FormulaInput","value","onChange","onFocus","onBlur","label","id","isRequired","tooltip","placeholder","disabled","errorMessage","width","suggestions","showRawValueProp","contentRef","useRef","inputWrapperRef","suggestionMenuRef","suggestionRefs","popperInstanceRef","showSuggestions","setShowSuggestions","useState","searchTerm","setSearchTerm","selectedIndex","setSelectedIndex","showRawValue","setShowRawValue","showSuggestionsRef","filteredSuggestionsRef","selectedIndexRef","valueRef","useEffect","useOutsideClick","filteredSuggestions","useMemo","lowerSearchTerm","suggestion","createPopper","handleChange","useCallback","event","rawValue","convertFromPills","textBeforeCursor","getTextBeforeCursor","lastAtSymbol","textAfterAt","handleFocus","handleBlur","relatedTarget","insertSuggestion","currentValue","spaceIndex","endPosition","beforeAt","afterCursor","newValue","handleKeyDown","isShowingSuggestions","currentFilteredSuggestions","currentSelectedIndex","key","prev","handlePaste","text","displayValue","convertToPills","jsxs","jsx","InputLabel","Tooltip","HelpIcon","Typography","ContentEditable","cn","IconButton","VisibilityOutlined","VisibilityOffOutlined","createPortal","e","index","el","FormulaInput$1","React"],"mappings":"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"}

package/dist/components/forms/formula-input/FormulaInput.es.js

@@ -28,7 +28,7 @@ const be = ({
   suggestions: T = [],
   showRawValue: G = !1
 }) => {
-  const c = a(null), C = a(null), g = a(null), D = a([]), k = a(null), [s, f] = v(!1), [N, O] = v(""), [m, y] = v(0), [b, J] = v(G), z = a(s), E = a([]), B = a(m), $ = a(u);
+  const c = a(null), N = a(null), g = a(null), C = a([]), k = a(null), [s, f] = v(!1), [D, O] = v(""), [m, y] = v(0), [b, J] = v(G), z = a(s), E = a([]), B = a(m), $ = a(u);
   d(() => {
     z.current = s;
   }, [s]), d(() => {
@@ -42,22 +42,22 @@ const be = ({
     }
   });
   const w = L(() => {
-    if (!N) return T;
-    const e = N.toLowerCase();
+    if (!D) return T;
+    const e = D.toLowerCase();
     return T.filter((t) => t.toLowerCase().includes(e));
-  }, [T, N]);
+  }, [T, D]);
   d(() => {
     E.current = w;
   }, [w]), d(() => {
     y(0);
   }, [w]), d(() => {
-    s && D.current[m] && D.current[m]?.scrollIntoView({
+    s && C.current[m] && C.current[m]?.scrollIntoView({
       block: "nearest",
       behavior: "smooth"
     });
   }, [m, s]), d(() => {
-    if (s && C.current && g.current)
-      return k.current = ge(C.current, g.current, {
+    if (s && N.current && g.current)
+      return k.current = ge(N.current, g.current, {
         placement: "bottom-start",
         strategy: "fixed",
         modifiers: [
@@ -158,9 +158,9 @@ const be = ({
   return /* @__PURE__ */ R("div", { className: "w-full", children: [
     P && /* @__PURE__ */ R("div", { className: "text-xs font-medium text-gray-600 inline-flex items-center gap-1 font-inter text-left whitespace-nowrap flex-wrap", children: [
       /* @__PURE__ */ o(he, { label: P || "", required: U || !1 }),
-      F && /* @__PURE__ */ o(ie, { placement: "top", title: F, children: /* @__PURE__ */ o("div", { className: "cursor-pointer", children: /* @__PURE__ */ o(ue, {}) }) })
+      F && /* @__PURE__ */ o(ie, { placement: "top", title: F, children: /* @__PURE__ */ o("div", { className: "cursor-pointer", children: /* @__PURE__ */ o(ue, { className: "w-icon-sm h-icon-sm" }) }) })
     ] }),
-    /* @__PURE__ */ R("div", { className: "relative", ref: C, children: [
+    /* @__PURE__ */ R("div", { className: "relative", ref: N, children: [
       u?.trim() ? null : /* @__PURE__ */ o(
         "div",
         {
@@ -211,7 +211,7 @@ const be = ({
             children: w.map((e, t) => /* @__PURE__ */ o(
               "div",
               {
-                ref: (r) => D.current[t] = r,
+                ref: (r) => C.current[t] = r,
                 className: K(
                   "px-3 py-2 cursor-pointer text-sm font-inter",
                   t === m ? "bg-primary-100 dark:bg-primary-900 text-primary-700 dark:text-primary-300" : "hover:bg-gray-100 dark:hover:bg-black-700 text-gray-900 dark:text-white"