@lax-wp/design-system 0.13.38 → 0.13.39-beta.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/data-display/infinite-table/body/cell/InlineEditField.cjs.js +1 -1
- package/dist/components/data-display/infinite-table/body/cell/InlineEditField.cjs.js.map +1 -1
- package/dist/components/data-display/infinite-table/body/cell/InlineEditField.es.js +40 -39
- package/dist/components/data-display/infinite-table/body/cell/InlineEditField.es.js.map +1 -1
- package/dist/components/forms/creatable-select/CreatableSelect.cjs.js +1 -1
- package/dist/components/forms/creatable-select/CreatableSelect.cjs.js.map +1 -1
- package/dist/components/forms/creatable-select/CreatableSelect.es.js +8 -11
- package/dist/components/forms/creatable-select/CreatableSelect.es.js.map +1 -1
- package/dist/components/forms/icon-picker/IconPicker.cjs.js +1 -1
- package/dist/components/forms/icon-picker/IconPicker.cjs.js.map +1 -1
- package/dist/components/forms/icon-picker/IconPicker.es.js +1 -1
- package/dist/components/forms/icon-picker/IconPicker.es.js.map +1 -1
- package/dist/components/forms/master-data-input/MasterDataInputField.cjs.js +1 -1
- package/dist/components/forms/master-data-input/MasterDataInputField.cjs.js.map +1 -1
- package/dist/components/forms/master-data-input/MasterDataInputField.d.ts +3 -0
- package/dist/components/forms/master-data-input/MasterDataInputField.es.js +115 -113
- package/dist/components/forms/master-data-input/MasterDataInputField.es.js.map +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IconPicker.cjs.js","sources":["../../../../src/components/forms/icon-picker/IconPicker.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport React, { Suspense, useEffect, useRef, useState } from 'react';\nimport { FixedSizeGrid, type GridChildComponentProps } from 'react-window';\nimport * as AllIcons from '@mui/icons-material';\nimport { IconButton, type SvgIconOwnProps } from '@mui/material';\nimport { Popover, Tooltip } from \"antd\";\nimport { Typography } from \"../../data-display/typography/Typography\";\nimport { InputField } from \"../input-field/InputField\";\nimport { COUNTRY_CODES, countryNameFromCode } from \"../../../types/icon-picker\";\nimport { getFlagComponent } from \"../../../utils/countryFlags\";\nimport { InputLabel } from '../shared/InputLabel';\n\nconst roundedIconNames = Object.keys(AllIcons).filter((name) =>\n name?.endsWith(\"Rounded\")\n);\n\n// Merge icon names and country codes for the picker\nconst mergedIconNames = [\n ...(roundedIconNames || []),\n ...(COUNTRY_CODES || []).map((code) => `flag-${code}`),\n];\n\n// Utility function to convert camelCase to human-readable format\nconst formatIconName = (iconName: string): string => {\n // Handle flag icons\n if (iconName?.startsWith(\"flag-\")) {\n const code = iconName?.replace(\"flag-\", \"\");\n return countryNameFromCode(code || \"\") || code;\n }\n\n // Convert camelCase to space-separated words\n // e.g., \"PersonRounded\" -> \"Person Rounded\"\n return iconName.replaceAll(/([A-Z])/g, \" $1\").trim();\n};\n\n/** Ant Design `Popover` placement for the icon panel (bottom edge of the trigger). */\nexport type IconPickerDropdownPosition = 'bottom' | 'bottomLeft' | 'bottomRight';\n\nexport interface IconPickerContentProps {\n selectedIcon: string | null;\n onChange: (iconName: string | null) => void;\n label?: string;\n required?: boolean;\n allowClear?: boolean;\n disabled?: boolean;\n errorMessage?: string;\n /** Popover placement: `bottom` | `bottomLeft` | `bottomRight`. Default: `bottom`. */\n dropdownPosition?: IconPickerDropdownPosition;\n}\n\ninterface IconPickerContentInternalProps {\n onChange: (iconName: string | null) => void;\n selectedIcon: string | null;\n setOpen?: React.Dispatch<React.SetStateAction<boolean>>;\n}\n\nconst IconPickerContent = ({\n onChange,\n selectedIcon,\n setOpen,\n}: IconPickerContentInternalProps) => {\n const [searchTerm, setSearchTerm] = useState<string>(\"\");\n\n // Filter both icons and flags\n const filteredIcons = (mergedIconNames || []).filter((name) => {\n if (name?.startsWith(\"flag-\")) {\n // For flags, allow search by country code or country name\n const code = name?.replace(\"flag-\", \"\");\n return (\n code\n ?.toLowerCase()\n ?.includes(searchTerm?.trim()?.toLowerCase() || \"\") ||\n countryNameFromCode(code || \"\")\n ?.toLowerCase()\n ?.includes(searchTerm?.trim()?.toLowerCase() || \"\")\n );\n }\n return name\n ?.trim()\n ?.toLowerCase()\n ?.includes(searchTerm?.trim()?.toLowerCase() || \"\");\n });\n\n const handleClick = (icon: string, event: React.MouseEvent) => {\n event.stopPropagation();\n if (selectedIcon === icon) {\n onChange?.(null);\n return;\n }\n onChange?.(icon);\n setOpen?.(false);\n };\n\n return (\n <div \n className=\"flex flex-col gap-3\"\n onKeyDown={(e) => {\n if (e.key === 'Enter') {\n e.preventDefault();\n e.stopPropagation();\n }\n }}\n >\n <InputField\n id={`input-field-icon-picker`}\n placeholder=\"Search icons...\"\n onChange={(value) => setSearchTerm(value || \"\")}\n fieldSuffix={\n <AllIcons.Search className=\"!w-4 !h-4 text-neutral-400\" />\n }\n />\n <FixedSizeGrid\n columnCount={5}\n rowCount={Math.ceil((filteredIcons?.length || 0) / 5)}\n columnWidth={40}\n rowHeight={40}\n width={220}\n height={240}\n >\n {({ columnIndex, rowIndex, style }: GridChildComponentProps) => {\n const itemIndex = rowIndex * 5 + columnIndex;\n const iconName = filteredIcons?.[itemIndex];\n return iconName ? (\n <div style={style} className=\"p-1\">\n <Tooltip title={formatIconName(iconName)} placement='bottom'>\n <IconButton\n type='button'\n className={classNames(\n \"flex items-center justify-center !rounded-md hover:bg-neutral-200 dark:hover:bg-black-700\",\n {\n \"!bg-primary-50 dark:!bg-black-800\":\n selectedIcon === iconName,\n }\n )}\n onClick={(event) => handleClick(iconName, event)}\n onKeyDown={(e) => {\n if (e.key === 'Enter') {\n e.preventDefault();\n e.stopPropagation();\n }\n }}\n >\n <IconRenderer\n iconName={iconName}\n className=\"!w-5 !h-5 text-neutral-900 dark:text-white\"\n />\n </IconButton>\n </Tooltip>\n </div>\n ) : null;\n }}\n </FixedSizeGrid>\n </div>\n );\n};\n\ninterface IconRendererProps {\n iconName: string;\n sx?: SvgIconOwnProps['sx'];\n className?: string;\n isHovering?: boolean;\n}\n\nexport const IconRenderer = ({ iconName, sx, className, isHovering }: IconRendererProps) => {\n // Render flag if iconName starts with 'flag-'\n if (iconName?.startsWith?.('flag-')) {\n const code = iconName?.replace('flag-', '');\n return getFlagComponent?.(code || '', isHovering || false) || <div>-</div>;\n }\n const Icon = AllIcons?.[iconName as keyof typeof AllIcons] as React.ComponentType<{\n sx?: SvgIconOwnProps['sx'];\n className?: string;\n isHovering?: boolean;\n }>;\n\n if (!Icon) {\n return <div>-</div>;\n }\n\n return <Icon sx={sx} className={className} isHovering={isHovering} />;\n};\n\nconst IconPickerBase = ({\n selectedIcon,\n onChange,\n label,\n required = false,\n allowClear = true,\n disabled = false,\n errorMessage,\n dropdownPosition = 'bottom',\n}: IconPickerContentProps) => {\n const [open, setOpen] = useState(false);\n const mouseClickRef = useRef(false);\n const buttonRef = useRef<HTMLButtonElement>(null);\n const wasOpenRef = useRef(false);\n\n useEffect(() => {\n if (wasOpenRef.current && !open) {\n buttonRef.current?.focus();\n }\n wasOpenRef.current = open;\n }, [open]);\n const handleClearIcon = (e: React.MouseEvent) => {\n e.stopPropagation();\n onChange?.('');\n };\n\n return (\n <Popover\n arrow={false}\n placement={dropdownPosition}\n trigger='click'\n getPopupContainer={(triggerNode) => triggerNode?.parentElement || document.body}\n open={open}\n onOpenChange={(newOpen) => {\n if (newOpen) {\n if (mouseClickRef.current) {\n setOpen(true);\n }\n mouseClickRef.current = false;\n } else {\n setOpen(false);\n }\n }}\n content={<IconPickerContent onChange={onChange} selectedIcon={selectedIcon} setOpen={setOpen} />}\n >\n <div className='flex flex-col gap-1'>\n {label ? (\n <InputLabel label={label || \"\"} required={required || false} />\n ) : null}\n <button\n ref={buttonRef}\n type='button'\n id={`btn-icon-picker-icon-${selectedIcon ? 'selected' : 'unselected'}`}\n className={`lax-form-trigger min-w-[83px] py-1.5 px-3 rounded-md border ${\n disabled ? 'cursor-not-allowed opacity-60 bg-neutral-50 dark:bg-black-800' : 'bg-white dark:bg-black-800'\n } ${errorMessage ? 'border-red-500' : 'focus:border-primary-600 dark:focus:border-primary-400'} flex items-center justify-between gap-2`}\n disabled={disabled}\n onClick={(e) => {\n if (disabled) {\n e.preventDefault();\n e.stopPropagation();\n return;\n }\n if (e.detail > 0) {\n mouseClickRef.current = true;\n }\n }}\n onKeyDown={(e) => {\n if (e.key === 'Enter') {\n e.preventDefault();\n if (!open) {\n const form = (e.currentTarget as HTMLElement).closest('form');\n const submitBtn = form?.querySelector('button[type=\"submit\"]') as HTMLButtonElement | null;\n submitBtn?.click();\n }\n }\n }}\n >\n {selectedIcon ? (\n <IconRenderer iconName={selectedIcon} className='!w-5 !h-5 text-neutral-900 dark:text-white' />\n ) : (\n <Typography\n size='small'\n variant='regular'\n appearance='subtitle'\n >\n Select Icon\n </Typography>\n )}\n {selectedIcon && allowClear && !disabled ? (\n <AllIcons.CloseRounded\n className='!w-5 !h-5 hover:bg-neutral-100 dark:hover:bg-black-800 rounded-full transition-colors cursor-pointer text-neutral-400 dark:text-neutral-500'\n onClick={handleClearIcon}\n />\n ) : (\n null\n )}\n </button>\n {errorMessage && (\n <Typography size='extra-small' className='text-red-500 font-medium'>\n {errorMessage}\n </Typography>\n )}\n </div>\n </Popover>\n );\n};\n\nexport const IconPicker = React.lazy(() =>\n Promise.resolve({\n default: (props: IconPickerContentProps) => (\n <Suspense fallback={<div className='min-w-20 h-8 animate-pulse bg-neutral-100 dark:bg-black-800 rounded-md' />}>\n <IconPickerBase {...props} />\n </Suspense>\n ),\n }),\n);\n\n"],"names":["roundedIconNames","AllIcons","name","mergedIconNames","COUNTRY_CODES","code","formatIconName","iconName","countryNameFromCode","IconPickerContent","onChange","selectedIcon","setOpen","searchTerm","setSearchTerm","useState","filteredIcons","handleClick","icon","event","jsxs","e","jsx","InputField","value","FixedSizeGrid","columnIndex","rowIndex","style","itemIndex","Tooltip","IconButton","classNames","IconRenderer","sx","className","isHovering","getFlagComponent","Icon","IconPickerBase","label","required","allowClear","disabled","errorMessage","dropdownPosition","open","mouseClickRef","useRef","buttonRef","wasOpenRef","useEffect","handleClearIcon","Popover","triggerNode","newOpen","InputLabel","Typography","IconPicker","React","props","Suspense"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"IconPicker.cjs.js","sources":["../../../../src/components/forms/icon-picker/IconPicker.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport React, { Suspense, useEffect, useRef, useState } from 'react';\nimport { FixedSizeGrid, type GridChildComponentProps } from 'react-window';\nimport * as AllIcons from '@mui/icons-material';\nimport { IconButton, type SvgIconOwnProps } from '@mui/material';\nimport { Popover, Tooltip } from \"antd\";\nimport { Typography } from \"../../data-display/typography/Typography\";\nimport { InputField } from \"../input-field/InputField\";\nimport { COUNTRY_CODES, countryNameFromCode } from \"../../../types/icon-picker\";\nimport { getFlagComponent } from \"../../../utils/countryFlags\";\nimport { InputLabel } from '../shared/InputLabel';\n\nconst roundedIconNames = Object.keys(AllIcons).filter((name) =>\n name?.endsWith(\"Rounded\")\n);\n\n// Merge icon names and country codes for the picker\nconst mergedIconNames = [\n ...(roundedIconNames || []),\n ...(COUNTRY_CODES || []).map((code) => `flag-${code}`),\n];\n\n// Utility function to convert camelCase to human-readable format\nconst formatIconName = (iconName: string): string => {\n // Handle flag icons\n if (iconName?.startsWith(\"flag-\")) {\n const code = iconName?.replace(\"flag-\", \"\");\n return countryNameFromCode(code || \"\") || code;\n }\n\n // Convert camelCase to space-separated words\n // e.g., \"PersonRounded\" -> \"Person Rounded\"\n return iconName.replaceAll(/([A-Z])/g, \" $1\").trim();\n};\n\n/** Ant Design `Popover` placement for the icon panel (bottom edge of the trigger). */\nexport type IconPickerDropdownPosition = 'bottom' | 'bottomLeft' | 'bottomRight';\n\nexport interface IconPickerContentProps {\n selectedIcon: string | null;\n onChange: (iconName: string | null) => void;\n label?: string;\n required?: boolean;\n allowClear?: boolean;\n disabled?: boolean;\n errorMessage?: string;\n /** Popover placement: `bottom` | `bottomLeft` | `bottomRight`. Default: `bottom`. */\n dropdownPosition?: IconPickerDropdownPosition;\n}\n\ninterface IconPickerContentInternalProps {\n onChange: (iconName: string | null) => void;\n selectedIcon: string | null;\n setOpen?: React.Dispatch<React.SetStateAction<boolean>>;\n}\n\nconst IconPickerContent = ({\n onChange,\n selectedIcon,\n setOpen,\n}: IconPickerContentInternalProps) => {\n const [searchTerm, setSearchTerm] = useState<string>(\"\");\n\n // Filter both icons and flags\n const filteredIcons = (mergedIconNames || []).filter((name) => {\n if (name?.startsWith(\"flag-\")) {\n // For flags, allow search by country code or country name\n const code = name?.replace(\"flag-\", \"\");\n return (\n code\n ?.toLowerCase()\n ?.includes(searchTerm?.trim()?.toLowerCase() || \"\") ||\n countryNameFromCode(code || \"\")\n ?.toLowerCase()\n ?.includes(searchTerm?.trim()?.toLowerCase() || \"\")\n );\n }\n return name\n ?.trim()\n ?.toLowerCase()\n ?.includes(searchTerm?.trim()?.toLowerCase() || \"\");\n });\n\n const handleClick = (icon: string, event: React.MouseEvent) => {\n event.stopPropagation();\n if (selectedIcon === icon) {\n onChange?.(null);\n return;\n }\n onChange?.(icon);\n setOpen?.(false);\n };\n\n return (\n <div \n className=\"flex flex-col gap-3\"\n onKeyDown={(e) => {\n if (e.key === 'Enter') {\n e.preventDefault();\n e.stopPropagation();\n }\n }}\n >\n <InputField\n id={`input-field-icon-picker`}\n placeholder=\"Search icons...\"\n onChange={(value) => setSearchTerm(value || \"\")}\n fieldSuffix={\n <AllIcons.Search className=\"!w-4 !h-4 text-neutral-400\" />\n }\n />\n <FixedSizeGrid\n columnCount={5}\n rowCount={Math.ceil((filteredIcons?.length || 0) / 5)}\n columnWidth={40}\n rowHeight={40}\n width={220}\n height={240}\n >\n {({ columnIndex, rowIndex, style }: GridChildComponentProps) => {\n const itemIndex = rowIndex * 5 + columnIndex;\n const iconName = filteredIcons?.[itemIndex];\n return iconName ? (\n <div style={style} className=\"p-1\">\n <Tooltip title={formatIconName(iconName)} placement='bottom'>\n <IconButton\n type='button'\n className={classNames(\n \"flex items-center justify-center !rounded-md hover:bg-neutral-200 dark:hover:bg-black-700\",\n {\n \"!bg-primary-50 dark:!bg-black-800\":\n selectedIcon === iconName,\n }\n )}\n onClick={(event) => handleClick(iconName, event)}\n onKeyDown={(e) => {\n if (e.key === 'Enter') {\n e.preventDefault();\n e.stopPropagation();\n }\n }}\n >\n <IconRenderer\n iconName={iconName}\n className=\"!w-5 !h-5 text-neutral-900 dark:text-white\"\n />\n </IconButton>\n </Tooltip>\n </div>\n ) : null;\n }}\n </FixedSizeGrid>\n </div>\n );\n};\n\ninterface IconRendererProps {\n iconName: string;\n sx?: SvgIconOwnProps['sx'];\n className?: string;\n isHovering?: boolean;\n}\n\nexport const IconRenderer = ({ iconName, sx, className, isHovering }: IconRendererProps) => {\n // Render flag if iconName starts with 'flag-'\n if (iconName?.startsWith?.('flag-')) {\n const code = iconName?.replace('flag-', '');\n return getFlagComponent?.(code || '', isHovering || false) || <div>-</div>;\n }\n const Icon = AllIcons?.[iconName as keyof typeof AllIcons] as React.ComponentType<{\n sx?: SvgIconOwnProps['sx'];\n className?: string;\n isHovering?: boolean;\n }>;\n\n if (!Icon) {\n return <div>-</div>;\n }\n\n return <Icon sx={sx} className={className} isHovering={isHovering} />;\n};\n\nconst IconPickerBase = ({\n selectedIcon,\n onChange,\n label,\n required = false,\n allowClear = true,\n disabled = false,\n errorMessage,\n dropdownPosition = 'bottom',\n}: IconPickerContentProps) => {\n const [open, setOpen] = useState(false);\n const mouseClickRef = useRef(false);\n const buttonRef = useRef<HTMLButtonElement>(null);\n const wasOpenRef = useRef(false);\n\n useEffect(() => {\n if (wasOpenRef.current && !open) {\n buttonRef.current?.focus();\n }\n wasOpenRef.current = open;\n }, [open]);\n const handleClearIcon = (e: React.MouseEvent) => {\n e.stopPropagation();\n onChange?.('');\n };\n\n return (\n <Popover\n arrow={false}\n placement={dropdownPosition}\n trigger='click'\n getPopupContainer={(triggerNode) => triggerNode?.parentElement || document.body}\n open={open}\n onOpenChange={(newOpen) => {\n if (newOpen) {\n if (mouseClickRef.current) {\n setOpen(true);\n }\n mouseClickRef.current = false;\n } else {\n setOpen(false);\n }\n }}\n content={<IconPickerContent onChange={onChange} selectedIcon={selectedIcon} setOpen={setOpen} />}\n >\n <div className='flex flex-col gap-1'>\n {label ? (\n <InputLabel label={label || \"\"} required={required || false} />\n ) : null}\n <button\n ref={buttonRef}\n type='button'\n id={`btn-icon-picker-icon-${selectedIcon ? 'selected' : 'unselected'}`}\n className={`lax-form-trigger min-w-[83px] py-1.5 px-3 rounded-md border ${\n disabled ? 'cursor-not-allowed opacity-60 bg-neutral-50 dark:bg-black-800' : 'bg-white dark:bg-black-800'\n } ${errorMessage ? 'border-red-500' : 'focus:border-primary-600 dark:focus:border-primary-400'} flex items-center justify-between gap-2`}\n disabled={disabled}\n onClick={(e) => {\n if (disabled) {\n e.preventDefault();\n e.stopPropagation();\n return;\n }\n if (e.detail > 0) {\n mouseClickRef.current = true;\n }\n }}\n onKeyDown={(e) => {\n if (e.key === 'Enter') {\n e.preventDefault();\n if (!open) {\n const form = (e.currentTarget as HTMLElement).closest('form');\n const submitBtn = form?.querySelector('button[type=\"submit\"]') as HTMLButtonElement | null;\n submitBtn?.click();\n }\n }\n }}\n >\n {selectedIcon ? (\n <IconRenderer iconName={selectedIcon} className='!w-5 !h-5 text-neutral-900 dark:text-white' />\n ) : (\n <Typography\n size='small'\n variant='medium'\n appearance='subtitle'\n >\n Select Icon\n </Typography>\n )}\n {selectedIcon && allowClear && !disabled ? (\n <AllIcons.CloseRounded\n className='!w-5 !h-5 hover:bg-neutral-100 dark:hover:bg-black-800 rounded-full transition-colors cursor-pointer text-neutral-400 dark:text-neutral-500'\n onClick={handleClearIcon}\n />\n ) : (\n null\n )}\n </button>\n {errorMessage && (\n <Typography size='extra-small' className='text-red-500 font-medium'>\n {errorMessage}\n </Typography>\n )}\n </div>\n </Popover>\n );\n};\n\nexport const IconPicker = React.lazy(() =>\n Promise.resolve({\n default: (props: IconPickerContentProps) => (\n <Suspense fallback={<div className='min-w-20 h-8 animate-pulse bg-neutral-100 dark:bg-black-800 rounded-md' />}>\n <IconPickerBase {...props} />\n </Suspense>\n ),\n }),\n);\n\n"],"names":["roundedIconNames","AllIcons","name","mergedIconNames","COUNTRY_CODES","code","formatIconName","iconName","countryNameFromCode","IconPickerContent","onChange","selectedIcon","setOpen","searchTerm","setSearchTerm","useState","filteredIcons","handleClick","icon","event","jsxs","e","jsx","InputField","value","FixedSizeGrid","columnIndex","rowIndex","style","itemIndex","Tooltip","IconButton","classNames","IconRenderer","sx","className","isHovering","getFlagComponent","Icon","IconPickerBase","label","required","allowClear","disabled","errorMessage","dropdownPosition","open","mouseClickRef","useRef","buttonRef","wasOpenRef","useEffect","handleClearIcon","Popover","triggerNode","newOpen","InputLabel","Typography","IconPicker","React","props","Suspense"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IconPicker.es.js","sources":["../../../../src/components/forms/icon-picker/IconPicker.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport React, { Suspense, useEffect, useRef, useState } from 'react';\nimport { FixedSizeGrid, type GridChildComponentProps } from 'react-window';\nimport * as AllIcons from '@mui/icons-material';\nimport { IconButton, type SvgIconOwnProps } from '@mui/material';\nimport { Popover, Tooltip } from \"antd\";\nimport { Typography } from \"../../data-display/typography/Typography\";\nimport { InputField } from \"../input-field/InputField\";\nimport { COUNTRY_CODES, countryNameFromCode } from \"../../../types/icon-picker\";\nimport { getFlagComponent } from \"../../../utils/countryFlags\";\nimport { InputLabel } from '../shared/InputLabel';\n\nconst roundedIconNames = Object.keys(AllIcons).filter((name) =>\n name?.endsWith(\"Rounded\")\n);\n\n// Merge icon names and country codes for the picker\nconst mergedIconNames = [\n ...(roundedIconNames || []),\n ...(COUNTRY_CODES || []).map((code) => `flag-${code}`),\n];\n\n// Utility function to convert camelCase to human-readable format\nconst formatIconName = (iconName: string): string => {\n // Handle flag icons\n if (iconName?.startsWith(\"flag-\")) {\n const code = iconName?.replace(\"flag-\", \"\");\n return countryNameFromCode(code || \"\") || code;\n }\n\n // Convert camelCase to space-separated words\n // e.g., \"PersonRounded\" -> \"Person Rounded\"\n return iconName.replaceAll(/([A-Z])/g, \" $1\").trim();\n};\n\n/** Ant Design `Popover` placement for the icon panel (bottom edge of the trigger). */\nexport type IconPickerDropdownPosition = 'bottom' | 'bottomLeft' | 'bottomRight';\n\nexport interface IconPickerContentProps {\n selectedIcon: string | null;\n onChange: (iconName: string | null) => void;\n label?: string;\n required?: boolean;\n allowClear?: boolean;\n disabled?: boolean;\n errorMessage?: string;\n /** Popover placement: `bottom` | `bottomLeft` | `bottomRight`. Default: `bottom`. */\n dropdownPosition?: IconPickerDropdownPosition;\n}\n\ninterface IconPickerContentInternalProps {\n onChange: (iconName: string | null) => void;\n selectedIcon: string | null;\n setOpen?: React.Dispatch<React.SetStateAction<boolean>>;\n}\n\nconst IconPickerContent = ({\n onChange,\n selectedIcon,\n setOpen,\n}: IconPickerContentInternalProps) => {\n const [searchTerm, setSearchTerm] = useState<string>(\"\");\n\n // Filter both icons and flags\n const filteredIcons = (mergedIconNames || []).filter((name) => {\n if (name?.startsWith(\"flag-\")) {\n // For flags, allow search by country code or country name\n const code = name?.replace(\"flag-\", \"\");\n return (\n code\n ?.toLowerCase()\n ?.includes(searchTerm?.trim()?.toLowerCase() || \"\") ||\n countryNameFromCode(code || \"\")\n ?.toLowerCase()\n ?.includes(searchTerm?.trim()?.toLowerCase() || \"\")\n );\n }\n return name\n ?.trim()\n ?.toLowerCase()\n ?.includes(searchTerm?.trim()?.toLowerCase() || \"\");\n });\n\n const handleClick = (icon: string, event: React.MouseEvent) => {\n event.stopPropagation();\n if (selectedIcon === icon) {\n onChange?.(null);\n return;\n }\n onChange?.(icon);\n setOpen?.(false);\n };\n\n return (\n <div \n className=\"flex flex-col gap-3\"\n onKeyDown={(e) => {\n if (e.key === 'Enter') {\n e.preventDefault();\n e.stopPropagation();\n }\n }}\n >\n <InputField\n id={`input-field-icon-picker`}\n placeholder=\"Search icons...\"\n onChange={(value) => setSearchTerm(value || \"\")}\n fieldSuffix={\n <AllIcons.Search className=\"!w-4 !h-4 text-neutral-400\" />\n }\n />\n <FixedSizeGrid\n columnCount={5}\n rowCount={Math.ceil((filteredIcons?.length || 0) / 5)}\n columnWidth={40}\n rowHeight={40}\n width={220}\n height={240}\n >\n {({ columnIndex, rowIndex, style }: GridChildComponentProps) => {\n const itemIndex = rowIndex * 5 + columnIndex;\n const iconName = filteredIcons?.[itemIndex];\n return iconName ? (\n <div style={style} className=\"p-1\">\n <Tooltip title={formatIconName(iconName)} placement='bottom'>\n <IconButton\n type='button'\n className={classNames(\n \"flex items-center justify-center !rounded-md hover:bg-neutral-200 dark:hover:bg-black-700\",\n {\n \"!bg-primary-50 dark:!bg-black-800\":\n selectedIcon === iconName,\n }\n )}\n onClick={(event) => handleClick(iconName, event)}\n onKeyDown={(e) => {\n if (e.key === 'Enter') {\n e.preventDefault();\n e.stopPropagation();\n }\n }}\n >\n <IconRenderer\n iconName={iconName}\n className=\"!w-5 !h-5 text-neutral-900 dark:text-white\"\n />\n </IconButton>\n </Tooltip>\n </div>\n ) : null;\n }}\n </FixedSizeGrid>\n </div>\n );\n};\n\ninterface IconRendererProps {\n iconName: string;\n sx?: SvgIconOwnProps['sx'];\n className?: string;\n isHovering?: boolean;\n}\n\nexport const IconRenderer = ({ iconName, sx, className, isHovering }: IconRendererProps) => {\n // Render flag if iconName starts with 'flag-'\n if (iconName?.startsWith?.('flag-')) {\n const code = iconName?.replace('flag-', '');\n return getFlagComponent?.(code || '', isHovering || false) || <div>-</div>;\n }\n const Icon = AllIcons?.[iconName as keyof typeof AllIcons] as React.ComponentType<{\n sx?: SvgIconOwnProps['sx'];\n className?: string;\n isHovering?: boolean;\n }>;\n\n if (!Icon) {\n return <div>-</div>;\n }\n\n return <Icon sx={sx} className={className} isHovering={isHovering} />;\n};\n\nconst IconPickerBase = ({\n selectedIcon,\n onChange,\n label,\n required = false,\n allowClear = true,\n disabled = false,\n errorMessage,\n dropdownPosition = 'bottom',\n}: IconPickerContentProps) => {\n const [open, setOpen] = useState(false);\n const mouseClickRef = useRef(false);\n const buttonRef = useRef<HTMLButtonElement>(null);\n const wasOpenRef = useRef(false);\n\n useEffect(() => {\n if (wasOpenRef.current && !open) {\n buttonRef.current?.focus();\n }\n wasOpenRef.current = open;\n }, [open]);\n const handleClearIcon = (e: React.MouseEvent) => {\n e.stopPropagation();\n onChange?.('');\n };\n\n return (\n <Popover\n arrow={false}\n placement={dropdownPosition}\n trigger='click'\n getPopupContainer={(triggerNode) => triggerNode?.parentElement || document.body}\n open={open}\n onOpenChange={(newOpen) => {\n if (newOpen) {\n if (mouseClickRef.current) {\n setOpen(true);\n }\n mouseClickRef.current = false;\n } else {\n setOpen(false);\n }\n }}\n content={<IconPickerContent onChange={onChange} selectedIcon={selectedIcon} setOpen={setOpen} />}\n >\n <div className='flex flex-col gap-1'>\n {label ? (\n <InputLabel label={label || \"\"} required={required || false} />\n ) : null}\n <button\n ref={buttonRef}\n type='button'\n id={`btn-icon-picker-icon-${selectedIcon ? 'selected' : 'unselected'}`}\n className={`lax-form-trigger min-w-[83px] py-1.5 px-3 rounded-md border ${\n disabled ? 'cursor-not-allowed opacity-60 bg-neutral-50 dark:bg-black-800' : 'bg-white dark:bg-black-800'\n } ${errorMessage ? 'border-red-500' : 'focus:border-primary-600 dark:focus:border-primary-400'} flex items-center justify-between gap-2`}\n disabled={disabled}\n onClick={(e) => {\n if (disabled) {\n e.preventDefault();\n e.stopPropagation();\n return;\n }\n if (e.detail > 0) {\n mouseClickRef.current = true;\n }\n }}\n onKeyDown={(e) => {\n if (e.key === 'Enter') {\n e.preventDefault();\n if (!open) {\n const form = (e.currentTarget as HTMLElement).closest('form');\n const submitBtn = form?.querySelector('button[type=\"submit\"]') as HTMLButtonElement | null;\n submitBtn?.click();\n }\n }\n }}\n >\n {selectedIcon ? (\n <IconRenderer iconName={selectedIcon} className='!w-5 !h-5 text-neutral-900 dark:text-white' />\n ) : (\n <Typography\n size='small'\n variant='regular'\n appearance='subtitle'\n >\n Select Icon\n </Typography>\n )}\n {selectedIcon && allowClear && !disabled ? (\n <AllIcons.CloseRounded\n className='!w-5 !h-5 hover:bg-neutral-100 dark:hover:bg-black-800 rounded-full transition-colors cursor-pointer text-neutral-400 dark:text-neutral-500'\n onClick={handleClearIcon}\n />\n ) : (\n null\n )}\n </button>\n {errorMessage && (\n <Typography size='extra-small' className='text-red-500 font-medium'>\n {errorMessage}\n </Typography>\n )}\n </div>\n </Popover>\n );\n};\n\nexport const IconPicker = React.lazy(() =>\n Promise.resolve({\n default: (props: IconPickerContentProps) => (\n <Suspense fallback={<div className='min-w-20 h-8 animate-pulse bg-neutral-100 dark:bg-black-800 rounded-md' />}>\n <IconPickerBase {...props} />\n </Suspense>\n ),\n }),\n);\n\n"],"names":["roundedIconNames","AllIcons","name","mergedIconNames","COUNTRY_CODES","code","formatIconName","iconName","countryNameFromCode","IconPickerContent","onChange","selectedIcon","setOpen","searchTerm","setSearchTerm","useState","filteredIcons","handleClick","icon","event","jsxs","e","jsx","InputField","value","FixedSizeGrid","columnIndex","rowIndex","style","itemIndex","Tooltip","IconButton","classNames","IconRenderer","sx","className","isHovering","getFlagComponent","Icon","IconPickerBase","label","required","allowClear","disabled","errorMessage","dropdownPosition","open","mouseClickRef","useRef","buttonRef","wasOpenRef","useEffect","handleClearIcon","Popover","triggerNode","newOpen","InputLabel","Typography","IconPicker","React","props","Suspense"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"IconPicker.es.js","sources":["../../../../src/components/forms/icon-picker/IconPicker.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport React, { Suspense, useEffect, useRef, useState } from 'react';\nimport { FixedSizeGrid, type GridChildComponentProps } from 'react-window';\nimport * as AllIcons from '@mui/icons-material';\nimport { IconButton, type SvgIconOwnProps } from '@mui/material';\nimport { Popover, Tooltip } from \"antd\";\nimport { Typography } from \"../../data-display/typography/Typography\";\nimport { InputField } from \"../input-field/InputField\";\nimport { COUNTRY_CODES, countryNameFromCode } from \"../../../types/icon-picker\";\nimport { getFlagComponent } from \"../../../utils/countryFlags\";\nimport { InputLabel } from '../shared/InputLabel';\n\nconst roundedIconNames = Object.keys(AllIcons).filter((name) =>\n name?.endsWith(\"Rounded\")\n);\n\n// Merge icon names and country codes for the picker\nconst mergedIconNames = [\n ...(roundedIconNames || []),\n ...(COUNTRY_CODES || []).map((code) => `flag-${code}`),\n];\n\n// Utility function to convert camelCase to human-readable format\nconst formatIconName = (iconName: string): string => {\n // Handle flag icons\n if (iconName?.startsWith(\"flag-\")) {\n const code = iconName?.replace(\"flag-\", \"\");\n return countryNameFromCode(code || \"\") || code;\n }\n\n // Convert camelCase to space-separated words\n // e.g., \"PersonRounded\" -> \"Person Rounded\"\n return iconName.replaceAll(/([A-Z])/g, \" $1\").trim();\n};\n\n/** Ant Design `Popover` placement for the icon panel (bottom edge of the trigger). */\nexport type IconPickerDropdownPosition = 'bottom' | 'bottomLeft' | 'bottomRight';\n\nexport interface IconPickerContentProps {\n selectedIcon: string | null;\n onChange: (iconName: string | null) => void;\n label?: string;\n required?: boolean;\n allowClear?: boolean;\n disabled?: boolean;\n errorMessage?: string;\n /** Popover placement: `bottom` | `bottomLeft` | `bottomRight`. Default: `bottom`. */\n dropdownPosition?: IconPickerDropdownPosition;\n}\n\ninterface IconPickerContentInternalProps {\n onChange: (iconName: string | null) => void;\n selectedIcon: string | null;\n setOpen?: React.Dispatch<React.SetStateAction<boolean>>;\n}\n\nconst IconPickerContent = ({\n onChange,\n selectedIcon,\n setOpen,\n}: IconPickerContentInternalProps) => {\n const [searchTerm, setSearchTerm] = useState<string>(\"\");\n\n // Filter both icons and flags\n const filteredIcons = (mergedIconNames || []).filter((name) => {\n if (name?.startsWith(\"flag-\")) {\n // For flags, allow search by country code or country name\n const code = name?.replace(\"flag-\", \"\");\n return (\n code\n ?.toLowerCase()\n ?.includes(searchTerm?.trim()?.toLowerCase() || \"\") ||\n countryNameFromCode(code || \"\")\n ?.toLowerCase()\n ?.includes(searchTerm?.trim()?.toLowerCase() || \"\")\n );\n }\n return name\n ?.trim()\n ?.toLowerCase()\n ?.includes(searchTerm?.trim()?.toLowerCase() || \"\");\n });\n\n const handleClick = (icon: string, event: React.MouseEvent) => {\n event.stopPropagation();\n if (selectedIcon === icon) {\n onChange?.(null);\n return;\n }\n onChange?.(icon);\n setOpen?.(false);\n };\n\n return (\n <div \n className=\"flex flex-col gap-3\"\n onKeyDown={(e) => {\n if (e.key === 'Enter') {\n e.preventDefault();\n e.stopPropagation();\n }\n }}\n >\n <InputField\n id={`input-field-icon-picker`}\n placeholder=\"Search icons...\"\n onChange={(value) => setSearchTerm(value || \"\")}\n fieldSuffix={\n <AllIcons.Search className=\"!w-4 !h-4 text-neutral-400\" />\n }\n />\n <FixedSizeGrid\n columnCount={5}\n rowCount={Math.ceil((filteredIcons?.length || 0) / 5)}\n columnWidth={40}\n rowHeight={40}\n width={220}\n height={240}\n >\n {({ columnIndex, rowIndex, style }: GridChildComponentProps) => {\n const itemIndex = rowIndex * 5 + columnIndex;\n const iconName = filteredIcons?.[itemIndex];\n return iconName ? (\n <div style={style} className=\"p-1\">\n <Tooltip title={formatIconName(iconName)} placement='bottom'>\n <IconButton\n type='button'\n className={classNames(\n \"flex items-center justify-center !rounded-md hover:bg-neutral-200 dark:hover:bg-black-700\",\n {\n \"!bg-primary-50 dark:!bg-black-800\":\n selectedIcon === iconName,\n }\n )}\n onClick={(event) => handleClick(iconName, event)}\n onKeyDown={(e) => {\n if (e.key === 'Enter') {\n e.preventDefault();\n e.stopPropagation();\n }\n }}\n >\n <IconRenderer\n iconName={iconName}\n className=\"!w-5 !h-5 text-neutral-900 dark:text-white\"\n />\n </IconButton>\n </Tooltip>\n </div>\n ) : null;\n }}\n </FixedSizeGrid>\n </div>\n );\n};\n\ninterface IconRendererProps {\n iconName: string;\n sx?: SvgIconOwnProps['sx'];\n className?: string;\n isHovering?: boolean;\n}\n\nexport const IconRenderer = ({ iconName, sx, className, isHovering }: IconRendererProps) => {\n // Render flag if iconName starts with 'flag-'\n if (iconName?.startsWith?.('flag-')) {\n const code = iconName?.replace('flag-', '');\n return getFlagComponent?.(code || '', isHovering || false) || <div>-</div>;\n }\n const Icon = AllIcons?.[iconName as keyof typeof AllIcons] as React.ComponentType<{\n sx?: SvgIconOwnProps['sx'];\n className?: string;\n isHovering?: boolean;\n }>;\n\n if (!Icon) {\n return <div>-</div>;\n }\n\n return <Icon sx={sx} className={className} isHovering={isHovering} />;\n};\n\nconst IconPickerBase = ({\n selectedIcon,\n onChange,\n label,\n required = false,\n allowClear = true,\n disabled = false,\n errorMessage,\n dropdownPosition = 'bottom',\n}: IconPickerContentProps) => {\n const [open, setOpen] = useState(false);\n const mouseClickRef = useRef(false);\n const buttonRef = useRef<HTMLButtonElement>(null);\n const wasOpenRef = useRef(false);\n\n useEffect(() => {\n if (wasOpenRef.current && !open) {\n buttonRef.current?.focus();\n }\n wasOpenRef.current = open;\n }, [open]);\n const handleClearIcon = (e: React.MouseEvent) => {\n e.stopPropagation();\n onChange?.('');\n };\n\n return (\n <Popover\n arrow={false}\n placement={dropdownPosition}\n trigger='click'\n getPopupContainer={(triggerNode) => triggerNode?.parentElement || document.body}\n open={open}\n onOpenChange={(newOpen) => {\n if (newOpen) {\n if (mouseClickRef.current) {\n setOpen(true);\n }\n mouseClickRef.current = false;\n } else {\n setOpen(false);\n }\n }}\n content={<IconPickerContent onChange={onChange} selectedIcon={selectedIcon} setOpen={setOpen} />}\n >\n <div className='flex flex-col gap-1'>\n {label ? (\n <InputLabel label={label || \"\"} required={required || false} />\n ) : null}\n <button\n ref={buttonRef}\n type='button'\n id={`btn-icon-picker-icon-${selectedIcon ? 'selected' : 'unselected'}`}\n className={`lax-form-trigger min-w-[83px] py-1.5 px-3 rounded-md border ${\n disabled ? 'cursor-not-allowed opacity-60 bg-neutral-50 dark:bg-black-800' : 'bg-white dark:bg-black-800'\n } ${errorMessage ? 'border-red-500' : 'focus:border-primary-600 dark:focus:border-primary-400'} flex items-center justify-between gap-2`}\n disabled={disabled}\n onClick={(e) => {\n if (disabled) {\n e.preventDefault();\n e.stopPropagation();\n return;\n }\n if (e.detail > 0) {\n mouseClickRef.current = true;\n }\n }}\n onKeyDown={(e) => {\n if (e.key === 'Enter') {\n e.preventDefault();\n if (!open) {\n const form = (e.currentTarget as HTMLElement).closest('form');\n const submitBtn = form?.querySelector('button[type=\"submit\"]') as HTMLButtonElement | null;\n submitBtn?.click();\n }\n }\n }}\n >\n {selectedIcon ? (\n <IconRenderer iconName={selectedIcon} className='!w-5 !h-5 text-neutral-900 dark:text-white' />\n ) : (\n <Typography\n size='small'\n variant='medium'\n appearance='subtitle'\n >\n Select Icon\n </Typography>\n )}\n {selectedIcon && allowClear && !disabled ? (\n <AllIcons.CloseRounded\n className='!w-5 !h-5 hover:bg-neutral-100 dark:hover:bg-black-800 rounded-full transition-colors cursor-pointer text-neutral-400 dark:text-neutral-500'\n onClick={handleClearIcon}\n />\n ) : (\n null\n )}\n </button>\n {errorMessage && (\n <Typography size='extra-small' className='text-red-500 font-medium'>\n {errorMessage}\n </Typography>\n )}\n </div>\n </Popover>\n );\n};\n\nexport const IconPicker = React.lazy(() =>\n Promise.resolve({\n default: (props: IconPickerContentProps) => (\n <Suspense fallback={<div className='min-w-20 h-8 animate-pulse bg-neutral-100 dark:bg-black-800 rounded-md' />}>\n <IconPickerBase {...props} />\n </Suspense>\n ),\n }),\n);\n\n"],"names":["roundedIconNames","AllIcons","name","mergedIconNames","COUNTRY_CODES","code","formatIconName","iconName","countryNameFromCode","IconPickerContent","onChange","selectedIcon","setOpen","searchTerm","setSearchTerm","useState","filteredIcons","handleClick","icon","event","jsxs","e","jsx","InputField","value","FixedSizeGrid","columnIndex","rowIndex","style","itemIndex","Tooltip","IconButton","classNames","IconRenderer","sx","className","isHovering","getFlagComponent","Icon","IconPickerBase","label","required","allowClear","disabled","errorMessage","dropdownPosition","open","mouseClickRef","useRef","buttonRef","wasOpenRef","useEffect","handleClearIcon","Popover","triggerNode","newOpen","InputLabel","Typography","IconPicker","React","props","Suspense"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),l=require("../../../_virtual/index.cjs.js"),n=require("react"),Ie=require("antd"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),l=require("../../../_virtual/index.cjs.js"),n=require("react"),Ie=require("antd"),Ee=require("react-i18next"),Fe=require("../../data-display/typography/Typography.cjs.js"),qe=require("../../data-display/label/Label.cjs.js"),N=require("@mui/icons-material"),Ne=require("../../icons/AIExtractedIndicator.cjs.js"),Be=require("../../icons/AIStarIcon.cjs.js"),Ae=require("../../icons/HelpIcon.cjs.js"),B=require("../../tooltip/Tooltip.cjs.js"),U=require("../../button/IconButton.cjs.js"),Re=require("../shared/InputLabel.cjs.js"),x=require("../../../utils/confidenceScoreUtils.cjs.js"),ze=require("../../icon/icons.generated.cjs.js"),J=n.forwardRef(({id:Q,label:X,labelExtra:Y,placeholder:Z,value:i,onChange:A,errorMessage:a,defaultValue:D,required:R=!1,isRequiredConditional:G=!1,masterDataName:h,masterDataColumnName:ee,masterDataFormula:s,masterDataFilters:te,tags:re,index:ne,tooltip:z="",originalCase:le=!1,color:c="",isGTN:k=!1,labelClassName:se,gtnName:V=null,isAiExtracted:ae=!1,confidenceScore:v,confidenceType:f="high",confidenceTooltip:j,sourceMeta:oe=[],onConfidenceScoreClick:ie,disabled:L=!1,reference:S={},isLiveField:ce=!1,onBlur:de,onAddGTNToDocument:w,riskDetails:d,isRiskAnalysisOpen:$=!1,RiskDetailsCard:M,primaryColorShades:ue,setDisableActions:O,showDeprecatedFieldWarning:P,MasterDataModal:W,parseMasterDataFormula:b,inputEmphasis:y="default"},xe)=>{const{t:fe}=Ee.useTranslation(),p=!!($&&d?.color),be=y==="modified"&&!a&&!p,ge=y==="deleted"&&!a&&!p,he=y==="success"&&!a&&!p,[m,C]=n.useState(!1),[o,g]=n.useState(null),[u,H]=n.useState(!1),[pe,me]=n.useState(""),[I,K]=n.useState(null),[ke,ve]=n.useState(!1),E=n.useRef(null),F=xe||E;n.useEffect(()=>{const t=()=>{const r=F.current||E.current;r&&ve(r.scrollWidth>r.clientWidth)};return t(),window.addEventListener("resize",t),()=>window.removeEventListener("resize",t)},[o,i]),n.useEffect(()=>{g(i)},[ne,i]),n.useEffect(()=>{o!==null&&o!==i&&A(o,I)},[o,I]);const q=()=>{O?.(!u),H(!u)},je=t=>{if(t.keyCode===9||t.key==="Enter"){const r=F.current||E.current;r&&(g(pe),r.blur())}},Se=(t,r)=>{let T=t;s&&b&&(T=b(s,r)),me(""),g(T),q(),K(r)},we=()=>{g(""),K(null)},ye=t=>{w&&V&&w({key:V,value:t})},Ce=()=>{const t="border h-8 text-sm rounded-lg block w-full p-2.5 pr-16 font-inter font-medium",r="placeholder:text-neutral-900 dark:placeholder:text-black-400";return a?l(t,r,"border-red-300 bg-gray-200 dark:border-black-600 dark:bg-black-600",c||"text-neutral-900 dark:text-black-200"):p&&d?.color?l(t,r,`border-${d.color}-300 bg-${d.color}-50`,c||"text-neutral-900 dark:text-black-200"):ge?l(t,r,"border-[var(--Error-200,#FECACA)] bg-[var(--Error-50,#FEF2F2)] !text-[#475467] dark:border-[var(--Error-200,#FECACA)] dark:bg-[var(--Error-50,#FEF2F2)] dark:!text-[#475467]"):be?l(t,r,"border-[var(--Warning-200,#FEDF89)] bg-[var(--Warning-50,#FFFAEB)] text-neutral-900 dark:text-black-100 dark:border-[var(--Warning-200,#FEDF89)] dark:bg-[var(--Warning-50,#FFFAEB)]"):he?l(t,r,"border-[var(--Success-200,#BBF7D0)] bg-[var(--Success-50,#F0FDF4)] !text-[#101828] dark:border-[var(--Success-200,#BBF7D0)] dark:bg-[var(--Success-50,#F0FDF4)] dark:!text-[#101828]"):l(t,r,"border-gray-300 bg-gray-200 dark:border-black-600 dark:bg-black-600",c||"text-neutral-900 dark:text-black-200")},_=()=>o!==null?o:s&&b?(console.log("Parsing master data formula with reference:",s,S,b(s,S)),b(s,S)):i;return n.useEffect(()=>{u&&!h&&(P?.(),H(!1))},[u,h,P]),e.jsxs("div",{className:l("flex gap-0.5 w-full relative",m&&k?"border rounded-lg border-primary-100 p-1":"",{"error-field":!!a}),onMouseEnter:()=>C(!0),onMouseLeave:()=>C(!1),children:[k&&!m?e.jsx("div",{className:"w-1 h-1 bg-primary-600 rounded-full animate-blink mt-1.5"}):null,e.jsxs("div",{className:l("flex flex-col w-full"),children:[e.jsx("label",{htmlFor:"text",className:`text-xs font-medium text-gray-600 inline-flex items-center gap-1 ${le?"":"capitalize"} ${se||""}`,children:e.jsxs("div",{className:"grid w-full grid-cols-[minmax(0,1fr)_auto] items-start gap-x-1",children:[e.jsxs("div",{className:"inline-flex min-w-0 items-center gap-1 flex-wrap",children:[e.jsx(Re.InputLabel,{label:X||"",required:R||!1,isRequiredConditional:G||!1}),ce&&e.jsx(N.BoltOutlined,{sx:{fontSize:16,color:"var(--color-primary-600)",rotate:"15deg"}}),ae&&!x.shouldShowConfidenceScore(v)&&e.jsx(Ne.AIExtractedIndicator,{}),e.jsx(qe.Label,{labels:re}),z&&e.jsx(B,{placement:"top",title:`${z}${s?` | ${s}`:""}`,children:e.jsx("div",{className:"cursor-pointer",children:e.jsx(Ae.HelpIcon,{className:"w-icon-sm h-icon-sm"})})}),Y]}),e.jsxs("div",{className:"flex items-center gap-1 justify-self-end",children:[x.shouldShowConfidenceScore(v)&&f?e.jsx(B,{placement:"top-end",title:j??"",hideTooltip:j==null,className:"cursor-pointer",children:e.jsxs("div",{className:l("inline-flex min-w-[50px] items-center gap-1 rounded-md px-1 py-0.5",x.getConfidenceScoreBadgeClass(f)),onClick:()=>ie?.(oe),children:[e.jsx(Be.AIStarIcon,{size:12,fill:x.getConfidenceScoreBadgeColor(f),fillSecondary:x.getConfidenceScoreBadgeFill(f)}),e.jsxs("span",{className:l("text-xs font-medium leading-4",x.getConfidenceScoreBadgeTextColor(f)),children:[v,"%"]})]})}):null,k&&m&&w?e.jsx("button",{id:"btn-master-data-input-add-to-document",className:"cursor-pointer",onClick:()=>ye(i?.toString()||""),type:"button",children:e.jsx(Ie.Tooltip,{placement:"top",title:fe("Add to document"),children:e.jsx(N.NoteAddOutlined,{sx:{fontSize:16,color:ue?.[600]||"var(--color-primary-600)"}})})}):null]})]})}),e.jsxs("label",{className:"relative block mt-1",children:[e.jsx(B,{title:ke?_():"",children:e.jsx("input",{id:Q,ref:F,required:R,placeholder:Z,className:Ce(),onChange:t=>{A(t.target.value,I),g(t.target?.value)},onKeyDown:je,value:_(),defaultValue:D,disabled:!0,autoComplete:"off",onBlur:de})}),e.jsx(U,{id:"btn-dynamic-data-input-rx-cross",onClick:we,className:"absolute inset-y-0 right-1 flex items-center px-2 focus:border-transparent",variant:"ghost",disabled:L,children:e.jsx(ze.CloseIcon,{className:"w-6 h-6 text-neutral-500 dark:text-neutral-400 w-sm h-sm"})}),e.jsx(U,{id:"btn-dynamic-data-input-ai-outline-pic-center",onClick:q,className:"absolute inset-y-0 right-8 flex items-center px-2 focus:border-transparent",variant:"ghost",disabled:L,children:e.jsx(N.TableChartRounded,{className:"text-neutral-500 dark:text-neutral-400 w-sm h-sm"})})]}),a&&e.jsx(Fe.Typography,{className:"text-error-500 mt-1",appearance:"custom",size:"extra-small",variant:"medium",children:a}),u&&W&&e.jsx(W,{isVisible:u,onSelected:Se,onClose:q,masterDataColumnName:ee,masterDataFilters:te,masterDataName:h,masterDataId:h,masterDataFormula:s,showFilters:!0,enableRootDrag:!0})]}),m&&d&&$&&M&&e.jsx("div",{role:"tooltip",tabIndex:0,className:"absolute left-0 right-0 top-[95%] mt-1 z-50 bg-white dark:bg-black-600 rounded-xl",onClick:t=>t.stopPropagation(),onMouseDown:t=>t.preventDefault(),onKeyDown:t=>{t.key==="Escape"&&C(!1)},children:e.jsx(M,{riskDetails:d})})]})});J.displayName="MasterDataInputField";exports.MasterDataInputField=J;
|
|
2
2
|
//# sourceMappingURL=MasterDataInputField.cjs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MasterDataInputField.cjs.js","sources":["../../../../src/components/forms/master-data-input/MasterDataInputField.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 {\n BoltOutlined,\n CloseRounded,\n NoteAddOutlined,\n TableChartRounded,\n} 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\";\nimport { CloseIcon, CloseSmallIcon } from \"../../icon\";\n\n/**\n * Confidence score type\n */\nexport type ConfidenceScoreType = \"low\" | \"medium\" | \"high\";\n\nexport type SourceMetaBBox = {\n b: number;\n l: number;\n r: number;\n t: number;\n};\n\nexport type SourceMetaItem = {\n bbox: SourceMetaBBox;\n confidence_score?: number;\n is_primary?: boolean;\n match_score?: number;\n match_type?: string;\n page_height: number;\n page_width: number;\n source_page: number;\n source_text?: string;\n};\n\n/**\n * Risk details interface for risk analysis integration\n */\nexport interface RiskDetails {\n color?: string;\n description?: string;\n hexBgColor?: string;\n hexBorderColor?: string;\n [key: string]: any;\n}\n\n/**\n * Risk details card component props - generic to allow consumer-specific risk types\n */\nexport interface RiskDetailsCardProps<T = any> {\n riskDetails: T;\n maxWidth?: string;\n showAllRisksSuggestions?: boolean;\n}\n\n/** Visual emphasis for the input surface (background + border) */\nexport type MasterDataInputFieldEmphasis =\n | \"default\"\n | \"modified\"\n | \"deleted\"\n | \"success\";\n\n/**\n * Props for the MasterDataModal component\n */\nexport interface MasterDataModalProps {\n isVisible: boolean;\n onSelected?: (masterDataValue: any, masterDataRow?: any) => void;\n onClose: () => void;\n masterDataColumnName?: string;\n masterDataFilters?: any;\n masterDataName?: string;\n masterDataId: string | null;\n showFilters?: boolean;\n}\n\n/**\n * Props for the MasterDataInputField component\n */\nexport interface MasterDataInputFieldProps {\n /** Unique identifier for the input */\n id: string;\n /** Label text to display above the input */\n label: string;\n /** Optional extra content in the label row (e.g. actions, badges) */\n labelExtra?: React.ReactNode;\n /** Placeholder text for the input */\n placeholder?: string;\n /** Current value of the input */\n value: any;\n /** Callback function called when value changes */\n onChange: (value: any, masterDataRowValue?: any) => void;\n /** Error message to display below the input */\n errorMessage?: string;\n /** Callback to set error message */\n setErrorMessage: (message: string) => void;\n /** Callback to remove error message */\n removeErrorMessage: () => void;\n /** Default value for the input */\n defaultValue?: any;\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 /** Name of the master data source */\n masterDataName: string;\n /** Column name in the master data */\n masterDataColumnName: string;\n /** Formula for computing master data value */\n masterDataFormula?: string;\n /** Filters for master data */\n masterDataFilters?: any;\n /** Tags/labels to display next to the label */\n tags?: (string | LabelType)[];\n /** Index for array fields */\n index?: number;\n /** Tooltip text for the help icon */\n tooltip?: string;\n /** Whether to preserve original case in the label */\n originalCase?: boolean;\n /** Color for the input text */\n color?: string;\n /** Whether this is a GTN (Global Term Name) field */\n isGTN?: boolean;\n /** GTN field name for document integration */\n gtnName?: any;\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 /** Reference data for formula computation */\n reference?: any;\n /** Whether the input is disabled */\n disabled?: boolean;\n /** Additional CSS classes for the label */\n labelClassName?: string;\n /** Whether this is a live field */\n isLiveField?: boolean;\n /** Callback function called when input loses focus */\n onBlur?: () => void;\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 /** Callback to set disable actions state */\n setDisableActions?: (disabled: boolean) => void;\n /** Toast function for deprecated field warning */\n showDeprecatedFieldWarning?: () => void;\n /** Master data modal component */\n MasterDataModal?: React.ComponentType<MasterDataModalProps>;\n /** Function to parse master data formula */\n parseMasterDataFormula?: (formula: string, row: any) => string;\n /** Input surface style: `'modified'` — `--Warning-50` / `--Warning-200`; `'deleted'` — `--Error-50` / `--Error-200`, text `#475467`; `'success'` — `--Success-50` / `--Success-200`, text `#101828`. */\n inputEmphasis?: MasterDataInputFieldEmphasis;\n}\n\n/**\n * A highly customizable master data input component with label, validation, and styling support.\n * Features master data modal integration, GTN support, risk analysis support,\n * and comprehensive prop support for various use cases.\n *\n * @example\n * ```tsx\n * <MasterDataInputField\n * id=\"master-field\"\n * label=\"Master Field\"\n * value={fieldValue}\n * onChange={(value, rowValue) => setFieldValue(value)}\n * setErrorMessage={(msg) => setError(msg)}\n * removeErrorMessage={() => setError('')}\n * masterDataName=\"customers\"\n * masterDataColumnName=\"name\"\n * required\n * />\n * ```\n */\nexport const MasterDataInputField = forwardRef<\n HTMLInputElement,\n MasterDataInputFieldProps\n>(\n (\n {\n id,\n label,\n labelExtra,\n placeholder,\n value,\n onChange,\n errorMessage,\n defaultValue,\n required = false,\n isRequiredConditional = false,\n masterDataName,\n masterDataColumnName,\n masterDataFormula,\n masterDataFilters,\n tags,\n index,\n tooltip = \"\",\n originalCase = false,\n color = \"\",\n isGTN = false,\n labelClassName,\n gtnName = null,\n isAiExtracted = false,\n confidenceScore,\n confidenceType = \"high\",\n confidenceTooltip,\n sourceMeta = [],\n onConfidenceScoreClick,\n disabled = false,\n reference = {},\n isLiveField = false,\n onBlur,\n onAddGTNToDocument,\n riskDetails,\n isRiskAnalysisOpen = false,\n RiskDetailsCard,\n primaryColorShades,\n setDisableActions,\n showDeprecatedFieldWarning,\n MasterDataModal,\n parseMasterDataFormula,\n inputEmphasis = \"default\",\n },\n ref\n ) => {\n const { t } = useTranslation();\n const showRiskSkin = Boolean(isRiskAnalysisOpen && riskDetails?.color);\n const emphasisModifiedSkin =\n inputEmphasis === \"modified\" && !errorMessage && !showRiskSkin;\n const emphasisDeletedSkin =\n inputEmphasis === \"deleted\" && !errorMessage && !showRiskSkin;\n const emphasisSuccessSkin =\n inputEmphasis === \"success\" && !errorMessage && !showRiskSkin;\n const [isHovered, setIsHovered] = useState(false);\n const [inputValue, setInputValue] = useState<string | null>(null);\n const [showMasterDataModal, setShowMasterDataModal] = useState(false);\n const [suggestion, setSuggestion] = useState(\"\");\n const [masterDataRowValue, setMasterDataRowValue] = useState<any>(null);\n const [isTextOverflowing, setIsTextOverflowing] = 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 // Check if text is overflowing\n useEffect(() => {\n const checkOverflow = () => {\n const input = combinedRef.current || inputRef.current;\n if (input) {\n setIsTextOverflowing(input.scrollWidth > input.clientWidth);\n }\n };\n\n checkOverflow();\n // Recheck on window resize\n window.addEventListener('resize', checkOverflow);\n return () => window.removeEventListener('resize', checkOverflow);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [inputValue, value]);\n\n useEffect(() => {\n setInputValue(value);\n }, [index, value]);\n\n useEffect(() => {\n if (inputValue !== null && inputValue !== value) {\n onChange(inputValue, masterDataRowValue);\n }\n }, [inputValue, masterDataRowValue]);\n\n const toggleMasterDataModal = () => {\n if (showMasterDataModal) {\n setDisableActions?.(false);\n } else {\n setDisableActions?.(true);\n }\n setShowMasterDataModal(!showMasterDataModal);\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 setInputValue(suggestion);\n currentRef.blur();\n }\n }\n };\n\n const handleSetMasterData = (masterDataValue: any, masterDataRow?: any) => {\n let _value = masterDataValue;\n\n if (masterDataFormula && parseMasterDataFormula) {\n _value = parseMasterDataFormula(masterDataFormula, masterDataRow);\n }\n\n setSuggestion(\"\");\n setInputValue(_value);\n toggleMasterDataModal();\n setMasterDataRowValue(masterDataRow);\n };\n\n const handleClear = () => {\n setInputValue(\"\");\n setMasterDataRowValue(null);\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 pr-16 font-inter font-medium\";\n const placeholderColor = `placeholder:text-neutral-900 dark:placeholder:text-black-400`;\n\n if (errorMessage) {\n return cn(\n baseClasses,\n placeholderColor,\n \"border-red-300 bg-gray-200 dark:border-black-600 dark:bg-black-600\",\n color ? color : \"text-neutral-900 dark:text-black-200\"\n );\n }\n if (showRiskSkin && riskDetails?.color) {\n return cn(\n baseClasses,\n placeholderColor,\n `border-${riskDetails.color}-300 bg-${riskDetails.color}-50`,\n color ? color : \"text-neutral-900 dark:text-black-200\"\n );\n }\n if (emphasisDeletedSkin) {\n return cn(\n baseClasses,\n placeholderColor,\n \"border-[var(--Error-200,#FECACA)] bg-[var(--Error-50,#FEF2F2)] !text-[#475467] dark:border-[var(--Error-200,#FECACA)] dark:bg-[var(--Error-50,#FEF2F2)] dark:!text-[#475467]\"\n );\n }\n if (emphasisModifiedSkin) {\n return cn(\n baseClasses,\n placeholderColor,\n \"border-[var(--Warning-200,#FEDF89)] bg-[var(--Warning-50,#FFFAEB)] text-neutral-900 dark:text-black-100 dark:border-[var(--Warning-200,#FEDF89)] dark:bg-[var(--Warning-50,#FFFAEB)]\"\n );\n }\n if (emphasisSuccessSkin) {\n return cn(\n baseClasses,\n placeholderColor,\n \"border-[var(--Success-200,#BBF7D0)] bg-[var(--Success-50,#F0FDF4)] !text-[#101828] dark:border-[var(--Success-200,#BBF7D0)] dark:bg-[var(--Success-50,#F0FDF4)] dark:!text-[#101828]\"\n );\n }\n\n return cn(\n baseClasses,\n placeholderColor,\n \"border-gray-300 bg-gray-200 dark:border-black-600 dark:bg-black-600\",\n color ? color : \"text-neutral-900 dark:text-black-200\"\n );\n };\n\n const resolveMasterDataValue = () => {\n if (inputValue !== null) {\n return inputValue;\n }\n if (masterDataFormula && parseMasterDataFormula) {\n return parseMasterDataFormula(masterDataFormula, reference);\n }\n\n return value;\n };\n\n useEffect(() => {\n if (showMasterDataModal && !masterDataName) {\n showDeprecatedFieldWarning?.();\n setShowMasterDataModal(false);\n }\n }, [showMasterDataModal, masterDataName, showDeprecatedFieldWarning]);\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 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\n placement=\"top\"\n title={`${tooltip}${masterDataFormula ? ` | ${masterDataFormula}` : \"\"}`}\n >\n <div className=\"cursor-pointer\">\n <HelpIcon className=\"w-icon-sm h-icon-sm\" />\n </div>\n </Tooltip>\n )}\n {labelExtra}\n </div>\n\n <div className=\"flex items-center gap-1 justify-self-end\">\n {(shouldShowConfidenceScore(confidenceScore) && confidenceType) ? (\n <Tooltip\n placement=\"top-end\"\n title={confidenceTooltip ?? \"\"}\n hideTooltip={confidenceTooltip === undefined || confidenceTooltip === null}\n className=\"cursor-pointer\"\n >\n <div\n className={cn(\n \"inline-flex min-w-[50px] items-center gap-1 rounded-md px-1 py-0.5\",\n getConfidenceScoreBadgeClass(confidenceType)\n )}\n onClick={() => onConfidenceScoreClick?.(sourceMeta)}\n >\n <AIStarIcon\n size={12}\n fill={getConfidenceScoreBadgeColor(confidenceType)}\n fillSecondary={getConfidenceScoreBadgeFill(confidenceType)}\n />\n <span className={cn(\"text-xs font-medium leading-4\", getConfidenceScoreBadgeTextColor(confidenceType))}>\n {confidenceScore}%\n </span>\n </div>\n </Tooltip>\n ) : null}\n {isGTN && isHovered && onAddGTNToDocument ? (\n <button\n id=\"btn-master-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 <Tooltip\n title={isTextOverflowing ? resolveMasterDataValue() : \"\"}\n >\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, masterDataRowValue);\n setInputValue(e.target?.value);\n }}\n onKeyDown={handleKeyDown}\n value={resolveMasterDataValue()}\n defaultValue={defaultValue}\n disabled={true}\n autoComplete=\"off\"\n onBlur={onBlur}\n />\n </Tooltip>\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 <CloseIcon className=\"w-6 h-6 text-neutral-500 dark:text-neutral-400 w-sm h-sm\" />\n </IconButton>\n\n <IconButton\n id={`btn-dynamic-data-input-ai-outline-pic-center`}\n onClick={toggleMasterDataModal}\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-500 dark:text-neutral-400 w-sm h-sm\"\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 {showMasterDataModal && MasterDataModal && (\n <MasterDataModal\n isVisible={showMasterDataModal}\n onSelected={handleSetMasterData}\n onClose={toggleMasterDataModal}\n masterDataColumnName={masterDataColumnName}\n masterDataFilters={masterDataFilters}\n masterDataName={masterDataName}\n masterDataId={masterDataName}\n showFilters\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\nMasterDataInputField.displayName = \"MasterDataInputField\";\n\n"],"names":["MasterDataInputField","forwardRef","id","label","labelExtra","placeholder","value","onChange","errorMessage","defaultValue","required","isRequiredConditional","masterDataName","masterDataColumnName","masterDataFormula","masterDataFilters","tags","index","tooltip","originalCase","color","isGTN","labelClassName","gtnName","isAiExtracted","confidenceScore","confidenceType","confidenceTooltip","sourceMeta","onConfidenceScoreClick","disabled","reference","isLiveField","onBlur","onAddGTNToDocument","riskDetails","isRiskAnalysisOpen","RiskDetailsCard","primaryColorShades","setDisableActions","showDeprecatedFieldWarning","MasterDataModal","parseMasterDataFormula","inputEmphasis","ref","t","useTranslation","showRiskSkin","emphasisModifiedSkin","emphasisDeletedSkin","emphasisSuccessSkin","isHovered","setIsHovered","useState","inputValue","setInputValue","showMasterDataModal","setShowMasterDataModal","suggestion","setSuggestion","masterDataRowValue","setMasterDataRowValue","isTextOverflowing","setIsTextOverflowing","inputRef","useRef","combinedRef","useEffect","checkOverflow","input","toggleMasterDataModal","handleKeyDown","event","currentRef","handleSetMasterData","masterDataValue","masterDataRow","_value","handleClear","handleAddGTNToDocument","getClassName","baseClasses","placeholderColor","cn","resolveMasterDataValue","jsxs","jsx","InputLabel","BoltOutlined","shouldShowConfidenceScore","AIExtractedIndicator","Label","Tooltip","HelpIcon","getConfidenceScoreBadgeClass","AIStarIcon","getConfidenceScoreBadgeColor","getConfidenceScoreBadgeFill","getConfidenceScoreBadgeTextColor","AntTooltip","NoteAddOutlined","e","IconButton","CloseIcon","TableChartRounded","Typography"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"MasterDataInputField.cjs.js","sources":["../../../../src/components/forms/master-data-input/MasterDataInputField.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 {\n BoltOutlined,\n CloseRounded,\n NoteAddOutlined,\n TableChartRounded,\n} 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\";\nimport { CloseIcon, CloseSmallIcon } from \"../../icon\";\n\n/**\n * Confidence score type\n */\nexport type ConfidenceScoreType = \"low\" | \"medium\" | \"high\";\n\nexport type SourceMetaBBox = {\n b: number;\n l: number;\n r: number;\n t: number;\n};\n\nexport type SourceMetaItem = {\n bbox: SourceMetaBBox;\n confidence_score?: number;\n is_primary?: boolean;\n match_score?: number;\n match_type?: string;\n page_height: number;\n page_width: number;\n source_page: number;\n source_text?: string;\n};\n\n/**\n * Risk details interface for risk analysis integration\n */\nexport interface RiskDetails {\n color?: string;\n description?: string;\n hexBgColor?: string;\n hexBorderColor?: string;\n [key: string]: any;\n}\n\n/**\n * Risk details card component props - generic to allow consumer-specific risk types\n */\nexport interface RiskDetailsCardProps<T = any> {\n riskDetails: T;\n maxWidth?: string;\n showAllRisksSuggestions?: boolean;\n}\n\n/** Visual emphasis for the input surface (background + border) */\nexport type MasterDataInputFieldEmphasis =\n | \"default\"\n | \"modified\"\n | \"deleted\"\n | \"success\";\n\n/**\n * Props for the MasterDataModal component\n */\nexport interface MasterDataModalProps {\n isVisible: boolean;\n onSelected?: (masterDataValue: any, masterDataRow?: any) => void;\n onClose: () => void;\n masterDataColumnName?: string;\n masterDataFilters?: any;\n masterDataName?: string;\n masterDataId: string | null;\n masterDataFormula?: string;\n setFieldFilters?: any;\n showFilters?: boolean;\n enableRootDrag?: boolean;\n}\n\n/**\n * Props for the MasterDataInputField component\n */\nexport interface MasterDataInputFieldProps {\n /** Unique identifier for the input */\n id: string;\n /** Label text to display above the input */\n label: string;\n /** Optional extra content in the label row (e.g. actions, badges) */\n labelExtra?: React.ReactNode;\n /** Placeholder text for the input */\n placeholder?: string;\n /** Current value of the input */\n value: any;\n /** Callback function called when value changes */\n onChange: (value: any, masterDataRowValue?: any) => void;\n /** Error message to display below the input */\n errorMessage?: string;\n /** Callback to set error message */\n setErrorMessage: (message: string) => void;\n /** Callback to remove error message */\n removeErrorMessage: () => void;\n /** Default value for the input */\n defaultValue?: any;\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 /** Name of the master data source */\n masterDataName: string;\n /** Column name in the master data */\n masterDataColumnName: string;\n /** Formula for computing master data value */\n masterDataFormula?: string;\n /** Filters for master data */\n masterDataFilters?: any;\n /** Tags/labels to display next to the label */\n tags?: (string | LabelType)[];\n /** Index for array fields */\n index?: number;\n /** Tooltip text for the help icon */\n tooltip?: string;\n /** Whether to preserve original case in the label */\n originalCase?: boolean;\n /** Color for the input text */\n color?: string;\n /** Whether this is a GTN (Global Term Name) field */\n isGTN?: boolean;\n /** GTN field name for document integration */\n gtnName?: any;\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 /** Reference data for formula computation */\n reference?: any;\n /** Whether the input is disabled */\n disabled?: boolean;\n /** Additional CSS classes for the label */\n labelClassName?: string;\n /** Whether this is a live field */\n isLiveField?: boolean;\n /** Callback function called when input loses focus */\n onBlur?: () => void;\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 /** Callback to set disable actions state */\n setDisableActions?: (disabled: boolean) => void;\n /** Toast function for deprecated field warning */\n showDeprecatedFieldWarning?: () => void;\n /** Master data modal component */\n MasterDataModal?: React.ComponentType<MasterDataModalProps>;\n /** Function to parse master data formula */\n parseMasterDataFormula?: (formula: string, row: any) => string;\n /** Input surface style: `'modified'` — `--Warning-50` / `--Warning-200`; `'deleted'` — `--Error-50` / `--Error-200`, text `#475467`; `'success'` — `--Success-50` / `--Success-200`, text `#101828`. */\n inputEmphasis?: MasterDataInputFieldEmphasis;\n}\n\n/**\n * A highly customizable master data input component with label, validation, and styling support.\n * Features master data modal integration, GTN support, risk analysis support,\n * and comprehensive prop support for various use cases.\n *\n * @example\n * ```tsx\n * <MasterDataInputField\n * id=\"master-field\"\n * label=\"Master Field\"\n * value={fieldValue}\n * onChange={(value, rowValue) => setFieldValue(value)}\n * setErrorMessage={(msg) => setError(msg)}\n * removeErrorMessage={() => setError('')}\n * masterDataName=\"customers\"\n * masterDataColumnName=\"name\"\n * required\n * />\n * ```\n */\nexport const MasterDataInputField = forwardRef<\n HTMLInputElement,\n MasterDataInputFieldProps\n>(\n (\n {\n id,\n label,\n labelExtra,\n placeholder,\n value,\n onChange,\n errorMessage,\n defaultValue,\n required = false,\n isRequiredConditional = false,\n masterDataName,\n masterDataColumnName,\n masterDataFormula,\n masterDataFilters,\n tags,\n index,\n tooltip = \"\",\n originalCase = false,\n color = \"\",\n isGTN = false,\n labelClassName,\n gtnName = null,\n isAiExtracted = false,\n confidenceScore,\n confidenceType = \"high\",\n confidenceTooltip,\n sourceMeta = [],\n onConfidenceScoreClick,\n disabled = false,\n reference = {},\n isLiveField = false,\n onBlur,\n onAddGTNToDocument,\n riskDetails,\n isRiskAnalysisOpen = false,\n RiskDetailsCard,\n primaryColorShades,\n setDisableActions,\n showDeprecatedFieldWarning,\n MasterDataModal,\n parseMasterDataFormula,\n inputEmphasis = \"default\",\n },\n ref\n ) => {\n const { t } = useTranslation();\n const showRiskSkin = Boolean(isRiskAnalysisOpen && riskDetails?.color);\n const emphasisModifiedSkin =\n inputEmphasis === \"modified\" && !errorMessage && !showRiskSkin;\n const emphasisDeletedSkin =\n inputEmphasis === \"deleted\" && !errorMessage && !showRiskSkin;\n const emphasisSuccessSkin =\n inputEmphasis === \"success\" && !errorMessage && !showRiskSkin;\n const [isHovered, setIsHovered] = useState(false);\n const [inputValue, setInputValue] = useState<string | null>(null);\n const [showMasterDataModal, setShowMasterDataModal] = useState(false);\n const [suggestion, setSuggestion] = useState(\"\");\n const [masterDataRowValue, setMasterDataRowValue] = useState<any>(null);\n const [isTextOverflowing, setIsTextOverflowing] = 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 // Check if text is overflowing\n useEffect(() => {\n const checkOverflow = () => {\n const input = combinedRef.current || inputRef.current;\n if (input) {\n setIsTextOverflowing(input.scrollWidth > input.clientWidth);\n }\n };\n\n checkOverflow();\n // Recheck on window resize\n window.addEventListener('resize', checkOverflow);\n return () => window.removeEventListener('resize', checkOverflow);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [inputValue, value]);\n\n useEffect(() => {\n setInputValue(value);\n }, [index, value]);\n\n useEffect(() => {\n if (inputValue !== null && inputValue !== value) {\n onChange(inputValue, masterDataRowValue);\n }\n }, [inputValue, masterDataRowValue]);\n\n const toggleMasterDataModal = () => {\n if (showMasterDataModal) {\n setDisableActions?.(false);\n } else {\n setDisableActions?.(true);\n }\n setShowMasterDataModal(!showMasterDataModal);\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 setInputValue(suggestion);\n currentRef.blur();\n }\n }\n };\n\n const handleSetMasterData = (masterDataValue: any, masterDataRow?: any) => {\n let _value = masterDataValue;\n\n if (masterDataFormula && parseMasterDataFormula) {\n _value = parseMasterDataFormula(masterDataFormula, masterDataRow);\n }\n\n setSuggestion(\"\");\n setInputValue(_value);\n toggleMasterDataModal();\n setMasterDataRowValue(masterDataRow);\n };\n\n const handleClear = () => {\n setInputValue(\"\");\n setMasterDataRowValue(null);\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 pr-16 font-inter font-medium\";\n const placeholderColor = `placeholder:text-neutral-900 dark:placeholder:text-black-400`;\n\n if (errorMessage) {\n return cn(\n baseClasses,\n placeholderColor,\n \"border-red-300 bg-gray-200 dark:border-black-600 dark:bg-black-600\",\n color ? color : \"text-neutral-900 dark:text-black-200\"\n );\n }\n if (showRiskSkin && riskDetails?.color) {\n return cn(\n baseClasses,\n placeholderColor,\n `border-${riskDetails.color}-300 bg-${riskDetails.color}-50`,\n color ? color : \"text-neutral-900 dark:text-black-200\"\n );\n }\n if (emphasisDeletedSkin) {\n return cn(\n baseClasses,\n placeholderColor,\n \"border-[var(--Error-200,#FECACA)] bg-[var(--Error-50,#FEF2F2)] !text-[#475467] dark:border-[var(--Error-200,#FECACA)] dark:bg-[var(--Error-50,#FEF2F2)] dark:!text-[#475467]\"\n );\n }\n if (emphasisModifiedSkin) {\n return cn(\n baseClasses,\n placeholderColor,\n \"border-[var(--Warning-200,#FEDF89)] bg-[var(--Warning-50,#FFFAEB)] text-neutral-900 dark:text-black-100 dark:border-[var(--Warning-200,#FEDF89)] dark:bg-[var(--Warning-50,#FFFAEB)]\"\n );\n }\n if (emphasisSuccessSkin) {\n return cn(\n baseClasses,\n placeholderColor,\n \"border-[var(--Success-200,#BBF7D0)] bg-[var(--Success-50,#F0FDF4)] !text-[#101828] dark:border-[var(--Success-200,#BBF7D0)] dark:bg-[var(--Success-50,#F0FDF4)] dark:!text-[#101828]\"\n );\n }\n\n return cn(\n baseClasses,\n placeholderColor,\n \"border-gray-300 bg-gray-200 dark:border-black-600 dark:bg-black-600\",\n color ? color : \"text-neutral-900 dark:text-black-200\"\n );\n };\n\n const resolveMasterDataValue = () => {\n if (inputValue !== null) {\n return inputValue;\n }\n if (masterDataFormula && parseMasterDataFormula) {\n console.log(\"Parsing master data formula with reference:\", masterDataFormula, reference, parseMasterDataFormula(masterDataFormula, reference));\n return parseMasterDataFormula(masterDataFormula, reference);\n }\n\n return value;\n };\n\n useEffect(() => {\n if (showMasterDataModal && !masterDataName) {\n showDeprecatedFieldWarning?.();\n setShowMasterDataModal(false);\n }\n }, [showMasterDataModal, masterDataName, showDeprecatedFieldWarning]);\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 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\n placement=\"top\"\n title={`${tooltip}${masterDataFormula ? ` | ${masterDataFormula}` : \"\"}`}\n >\n <div className=\"cursor-pointer\">\n <HelpIcon className=\"w-icon-sm h-icon-sm\" />\n </div>\n </Tooltip>\n )}\n {labelExtra}\n </div>\n\n <div className=\"flex items-center gap-1 justify-self-end\">\n {(shouldShowConfidenceScore(confidenceScore) && confidenceType) ? (\n <Tooltip\n placement=\"top-end\"\n title={confidenceTooltip ?? \"\"}\n hideTooltip={confidenceTooltip === undefined || confidenceTooltip === null}\n className=\"cursor-pointer\"\n >\n <div\n className={cn(\n \"inline-flex min-w-[50px] items-center gap-1 rounded-md px-1 py-0.5\",\n getConfidenceScoreBadgeClass(confidenceType)\n )}\n onClick={() => onConfidenceScoreClick?.(sourceMeta)}\n >\n <AIStarIcon\n size={12}\n fill={getConfidenceScoreBadgeColor(confidenceType)}\n fillSecondary={getConfidenceScoreBadgeFill(confidenceType)}\n />\n <span className={cn(\"text-xs font-medium leading-4\", getConfidenceScoreBadgeTextColor(confidenceType))}>\n {confidenceScore}%\n </span>\n </div>\n </Tooltip>\n ) : null}\n {isGTN && isHovered && onAddGTNToDocument ? (\n <button\n id=\"btn-master-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 <Tooltip\n title={isTextOverflowing ? resolveMasterDataValue() : \"\"}\n >\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, masterDataRowValue);\n setInputValue(e.target?.value);\n }}\n onKeyDown={handleKeyDown}\n value={resolveMasterDataValue()}\n defaultValue={defaultValue}\n disabled={true}\n autoComplete=\"off\"\n onBlur={onBlur}\n />\n </Tooltip>\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 <CloseIcon className=\"w-6 h-6 text-neutral-500 dark:text-neutral-400 w-sm h-sm\" />\n </IconButton>\n\n <IconButton\n id={`btn-dynamic-data-input-ai-outline-pic-center`}\n onClick={toggleMasterDataModal}\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-500 dark:text-neutral-400 w-sm h-sm\"\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 {showMasterDataModal && MasterDataModal && (\n <MasterDataModal\n isVisible={showMasterDataModal}\n onSelected={handleSetMasterData}\n onClose={toggleMasterDataModal}\n masterDataColumnName={masterDataColumnName}\n masterDataFilters={masterDataFilters}\n masterDataName={masterDataName}\n masterDataId={masterDataName}\n masterDataFormula={masterDataFormula}\n showFilters\n enableRootDrag\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\nMasterDataInputField.displayName = \"MasterDataInputField\";\n\n"],"names":["MasterDataInputField","forwardRef","id","label","labelExtra","placeholder","value","onChange","errorMessage","defaultValue","required","isRequiredConditional","masterDataName","masterDataColumnName","masterDataFormula","masterDataFilters","tags","index","tooltip","originalCase","color","isGTN","labelClassName","gtnName","isAiExtracted","confidenceScore","confidenceType","confidenceTooltip","sourceMeta","onConfidenceScoreClick","disabled","reference","isLiveField","onBlur","onAddGTNToDocument","riskDetails","isRiskAnalysisOpen","RiskDetailsCard","primaryColorShades","setDisableActions","showDeprecatedFieldWarning","MasterDataModal","parseMasterDataFormula","inputEmphasis","ref","t","useTranslation","showRiskSkin","emphasisModifiedSkin","emphasisDeletedSkin","emphasisSuccessSkin","isHovered","setIsHovered","useState","inputValue","setInputValue","showMasterDataModal","setShowMasterDataModal","suggestion","setSuggestion","masterDataRowValue","setMasterDataRowValue","isTextOverflowing","setIsTextOverflowing","inputRef","useRef","combinedRef","useEffect","checkOverflow","input","toggleMasterDataModal","handleKeyDown","event","currentRef","handleSetMasterData","masterDataValue","masterDataRow","_value","handleClear","handleAddGTNToDocument","getClassName","baseClasses","placeholderColor","cn","resolveMasterDataValue","jsxs","jsx","InputLabel","BoltOutlined","shouldShowConfidenceScore","AIExtractedIndicator","Label","Tooltip","HelpIcon","getConfidenceScoreBadgeClass","AIStarIcon","getConfidenceScoreBadgeColor","getConfidenceScoreBadgeFill","getConfidenceScoreBadgeTextColor","AntTooltip","NoteAddOutlined","e","IconButton","CloseIcon","TableChartRounded","Typography"],"mappings":"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"}
|
|
@@ -51,7 +51,10 @@ export interface MasterDataModalProps {
|
|
|
51
51
|
masterDataFilters?: any;
|
|
52
52
|
masterDataName?: string;
|
|
53
53
|
masterDataId: string | null;
|
|
54
|
+
masterDataFormula?: string;
|
|
55
|
+
setFieldFilters?: any;
|
|
54
56
|
showFilters?: boolean;
|
|
57
|
+
enableRootDrag?: boolean;
|
|
55
58
|
}
|
|
56
59
|
/**
|
|
57
60
|
* Props for the MasterDataInputField component
|