@erpsquad/common 1.8.45 → 1.8.47

package/dist/views/form-builder/element-edit-forms/select/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/views/form-builder/element-edit-forms/select.tsx"],"sourcesContent":["// React imports\r\nimport React, { useEffect, useState, useCallback, useMemo } from \"react\";\r\n\r\n// Material UI imports\r\nimport { \r\n  MenuItem, \r\n  Box, \r\n  FormControlLabel, \r\n  Slider, \r\n  FormControl, \r\n  IconButton\r\n} from \"@mui/material\";\r\nimport { Add } from \"@mui/icons-material\";\r\n\r\n// Third-party imports\r\nimport { enqueueSnackbar } from \"notistack\";\r\n\r\n// ERP Common imports\r\nimport Checkbox from \"@/components/checkbox/checkbox\";\r\nimport Select from \"@/components/select/select\";\r\nimport TextField from \"@/components/text-field/text-field\";\r\nimport Typography from \"@/components/typography/typography\";\r\nimport Button from \"@/components/button/button\";\r\nimport { Trash } from \"@/components/icons\";\r\n\r\n// Local imports\r\nimport FieldSelect from \"./field-select\";\r\nimport \"../custom-form.scss\";\r\n\r\ninterface Option {\r\n  label: string;\r\n  value: string;\r\n  [key: string]: string;\r\n}\r\n\r\ninterface ElementJSON {\r\n  id: string;\r\n  field_type: string;\r\n  label: string;\r\n  placeholder: string;\r\n  default_value: string | null;\r\n  is_multiselect: boolean;\r\n  is_required: boolean;\r\n  is_unique: boolean;\r\n  is_fullwidth: boolean;\r\n  custom_width: number;\r\n  type?: string;\r\n  is_new?: boolean;\r\n  options: Option[];\r\n}\r\n\r\ninterface SelectEditFormProps {\r\n  element: ElementJSON;\r\n  handlePropertyValueUpdate: (\r\n    event: React.ChangeEvent<HTMLInputElement> | null,\r\n    name?: string | null,\r\n    value?: any,\r\n    fieldType?: string\r\n  ) => void;\r\n  handleSelectOptionValueUpdate: (options: Option[]) => void;\r\n  handleColumnSelect: (event: React.ChangeEvent<{ value: unknown }>) => void;\r\n  handleWidthChange: (value: number | number[]) => void;\r\n}\r\n\r\nconst COLUMN_PER_ROW_OPTIONS = [1, 2, 3, 4, 5, 6] as const;\r\n\r\nexport const SelectEditForm: React.FC<SelectEditFormProps> = React.memo(({\r\n  element,\r\n  handlePropertyValueUpdate,\r\n  handleSelectOptionValueUpdate,\r\n  handleColumnSelect,\r\n  handleWidthChange\r\n}) => {\r\n  // Local state management\r\n  const [selectOptions, setSelectOptions] = useState<Option[]>(element.options || []);\r\n  const [newOption, setNewOption] = useState<Option>({ label: \"\", value: \"\" });\r\n  const [isAddingOption, setIsAddingOption] = useState(false);\r\n\r\n  // Sync options with parent element when element changes\r\n  useEffect(() => {\r\n    if (JSON.stringify(selectOptions) !== JSON.stringify(element.options || [])) {\r\n      setSelectOptions(element.options || []);\r\n    }\r\n  }, [element.options, selectOptions]);\r\n\r\n  // Memoized computed values\r\n  const isFieldDisabled = useMemo(() => \r\n    element.type === \"system\" || !element.is_new, \r\n    [element.type, element.is_new]\r\n  );\r\n\r\n  const selectedOptionLabel = useMemo(() => {\r\n    const selectedOption = selectOptions.find(option => option.value === element.default_value);\r\n    return selectedOption?.label || \"Select Default\";\r\n  }, [selectOptions, element.default_value]);\r\n\r\n  // Optimized event handlers with useCallback\r\n  const handleFieldUpdate = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {\r\n    handlePropertyValueUpdate(null, null, null, e.target.value);\r\n  }, [handlePropertyValueUpdate]);\r\n\r\n  const handleSelectUpdate = useCallback((e: React.ChangeEvent<{ value: unknown }>) => {\r\n    handlePropertyValueUpdate(null, null, e.target.value);\r\n  }, [handlePropertyValueUpdate]);\r\n\r\n  const handleMultiSelect = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {\r\n    const isChecked = e.target.checked;\r\n    // Reset default value when enabling multiselect\r\n    const defaultValue = isChecked ? null : element.default_value;\r\n    \r\n    // Create a synthetic event for the property update\r\n    const syntheticEvent = {\r\n      target: {\r\n        name: 'is_multiselect',\r\n        checked: isChecked,\r\n        value: isChecked\r\n      }\r\n    } as React.ChangeEvent<HTMLInputElement>;\r\n    \r\n    handlePropertyValueUpdate(syntheticEvent);\r\n    \r\n    // If enabling multiselect, also clear the default value\r\n    if (isChecked && element.default_value) {\r\n      handlePropertyValueUpdate(null, 'default_value', null);\r\n    }\r\n  }, [handlePropertyValueUpdate, element.default_value]);\r\n\r\n  const handleNewOptionChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {\r\n    const { name, value } = e.target;\r\n    setNewOption(prev => ({ ...prev, [name]: value }));\r\n  }, []);\r\n\r\n  const handleAddOption = useCallback(() => {\r\n    if (!newOption.label.trim() || !newOption.value.trim()) {\r\n      return; // Don't add empty options\r\n    }\r\n\r\n    // Check for duplicate values\r\n    const isDuplicate = selectOptions.some(option => \r\n      option.value === newOption.value || option.label === newOption.label\r\n    );\r\n    \r\n    if (isDuplicate) {\r\n      // Could show an error message here\r\n      enqueueSnackbar(\"Option with this value or label already exists.\", { variant: \"error\" });\r\n      return;\r\n    }\r\n\r\n    const updatedOptions = [...selectOptions, { ...newOption }];\r\n    setSelectOptions(updatedOptions);\r\n    handleSelectOptionValueUpdate(updatedOptions);\r\n    \r\n    // Reset form\r\n    setNewOption({ label: \"\", value: \"\" });\r\n    setIsAddingOption(false);\r\n  }, [newOption, selectOptions, handleSelectOptionValueUpdate]);\r\n\r\n  const handleRemoveOption = useCallback((indexToRemove: number) => {\r\n    const updatedOptions = selectOptions.filter((_, index) => index !== indexToRemove);\r\n    setSelectOptions(updatedOptions);\r\n    handleSelectOptionValueUpdate(updatedOptions);\r\n    \r\n    // Clear default value if the removed option was selected\r\n    const removedOption = selectOptions[indexToRemove];\r\n    if (element.default_value === removedOption?.value) {\r\n      handlePropertyValueUpdate(null, 'default_value', null);\r\n    }\r\n  }, [selectOptions, handleSelectOptionValueUpdate, element.default_value, handlePropertyValueUpdate]);\r\n\r\n  const handleWidthChangeCallback = useCallback((\r\n    _: Event, \r\n    newValue: number | number[]\r\n  ) => {\r\n    handleWidthChange(newValue);\r\n  }, [handleWidthChange]);\r\n\r\n  return (\r\n    <Box className=\"formSection--FieldContainer\">\r\n      {/* Field Type Selection */}\r\n      <Box>\r\n        <FieldSelect\r\n          variant=\"outlined\"\r\n          onChange={handleFieldUpdate}\r\n          defaultValue={element.field_type}\r\n          label=\"Field Type\"\r\n          disabled={isFieldDisabled}\r\n        />\r\n      </Box>\r\n\r\n      {/* Label Field */}\r\n      <Box>\r\n        <TextField\r\n          fullWidth\r\n          label=\"Label\"\r\n          is_required\r\n          name=\"label\"\r\n          type=\"text\"\r\n          onChange={handlePropertyValueUpdate}\r\n          defaultValue={element.label}\r\n        />\r\n      </Box>\r\n\r\n      {/* Placeholder Field */}\r\n      <Box>\r\n        <TextField\r\n          fullWidth\r\n          label=\"Placeholder\"\r\n          is_required\r\n          name=\"placeholder\"\r\n          type=\"text\"\r\n          onChange={handlePropertyValueUpdate}\r\n          defaultValue={element.placeholder}\r\n        />\r\n      </Box>\r\n\r\n      {/* Default Value Selection */}\r\n      <Box>\r\n        <Select\r\n          fullWidth\r\n          placeholder=\"Select Default\"\r\n          size=\"small\"\r\n          name=\"default_value\"\r\n          onChange={handleSelectUpdate}\r\n          value={element.default_value || \"\"}\r\n          label=\"Default\"\r\n          variant=\"outlined\"\r\n          disabled={element.is_multiselect}\r\n          renderValue={() => selectedOptionLabel}\r\n        >\r\n          {selectOptions.map((option, index) => (\r\n            <MenuItem key={`${option.value}-${index}`} value={option.value}>\r\n              {option.label}\r\n            </MenuItem>\r\n          ))}\r\n        </Select>\r\n      </Box>\r\n\r\n      {/* Column Per Row Selection */}\r\n      <Box>\r\n        <FormControl fullWidth>\r\n          <Select\r\n            fullWidth\r\n            placeholder=\"Select Column Per Row\"\r\n            size=\"small\"\r\n            onChange={handleColumnSelect}\r\n            label=\"Select Column Per Row\"\r\n            name=\"columnPerRow\"\r\n            variant=\"outlined\"\r\n          >\r\n            {COLUMN_PER_ROW_OPTIONS.map((option) => (\r\n              <MenuItem key={option} value={option}>\r\n                {option}\r\n              </MenuItem>\r\n            ))}\r\n          </Select>\r\n        </FormControl>\r\n      </Box>\r\n\r\n      {/* Width Slider */}\r\n      <Box>\r\n        <Typography sx={{ color: 'black', mb: 1 }}>\r\n          Adjust Width:\r\n        </Typography>\r\n        <Box pr={2}>\r\n          <Slider\r\n            value={element.custom_width || 6}\r\n            min={1}\r\n            max={12}\r\n            step={1}\r\n            onChange={handleWidthChangeCallback}\r\n            aria-labelledby=\"width-slider\"\r\n            sx={{ color: \"#4AC08C\" }}\r\n            marks\r\n            valueLabelDisplay=\"auto\"\r\n          />\r\n        </Box>\r\n      </Box>\r\n\r\n      {/* Options Management */}\r\n      <Box className=\"formSection--SelectOption\">\r\n        <Typography \r\n          type=\"s5\" \r\n          weight=\"medium\" \r\n          color=\"theme.secondary.800\"\r\n          sx={{ mb: 0.5 }}\r\n        >\r\n          Options\r\n        </Typography>\r\n        \r\n        {/* Existing Options */}\r\n        {selectOptions.map((option, index) => (\r\n          <Box key={`option-${index}`} sx={{ mb: 1, display: 'flex', gap: 1 }}>\r\n            <TextField\r\n              fullWidth\r\n              value={`${option.label} (${option.value})`}\r\n              InputProps={{ readOnly: true }}\r\n            />\r\n            <IconButton\r\n              color=\"error\"\r\n              size=\"small\"\r\n              onClick={() => handleRemoveOption(index)}\r\n            >\r\n              <Trash />\r\n            </IconButton>\r\n          </Box>\r\n        ))}\r\n\r\n        {/* Add New Option Form */}\r\n        {isAddingOption && (\r\n          <Box className=\"formSection--SelectOption\" sx={{ mt:0.5, p: 2, border: '1px solid #ddd', borderRadius: 1 }}>\r\n            <Box sx={{ mb: 2 }}>\r\n              <TextField\r\n                fullWidth\r\n                label=\"Option Label\"\r\n                is_required\r\n                name=\"label\"\r\n                type=\"text\"\r\n                placeholder=\"Enter option label\"\r\n                value={newOption.label}\r\n                onChange={handleNewOptionChange}\r\n              />\r\n            </Box>\r\n            <Box sx={{ mb: 2 }}>\r\n              <TextField\r\n                fullWidth\r\n                label=\"Option Value\"\r\n                placeholder=\"Enter option value\"\r\n                is_required\r\n                name=\"value\"\r\n                type=\"text\"\r\n                value={newOption.value}\r\n                onChange={handleNewOptionChange}\r\n              />\r\n            </Box>\r\n            <Box sx={{ display: 'flex', gap: 1 }}>\r\n              <Button\r\n                onClick={handleAddOption}\r\n                // className=\"formSection--Button\"\r\n                startIcon={<Add />}\r\n                disabled={!newOption.label.trim() || !newOption.value.trim()}\r\n              >\r\n                Add Option\r\n              </Button>\r\n              <Button\r\n                onClick={() => {\r\n                  setIsAddingOption(false);\r\n                  setNewOption({ label: \"\", value: \"\" });\r\n                }}\r\n                variant=\"outlined\"\r\n              >\r\n                Cancel\r\n              </Button>\r\n            </Box>\r\n          </Box>\r\n        )}\r\n\r\n        {/* Add Option Button */}\r\n        {!isAddingOption && (\r\n          <Button\r\n            onClick={() => setIsAddingOption(true)}\r\n            variant=\"outlined\"\r\n            className=\"formSection--Button\"\r\n            startIcon={<Add />}\r\n            sx={{ mt: 1 }}\r\n          >\r\n            Add Option\r\n          </Button>\r\n        )}\r\n      </Box>\r\n\r\n      {/* Form Controls */}\r\n      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>\r\n        <FormControlLabel\r\n          name=\"is_multiselect\"\r\n          control={<Checkbox />}\r\n          onChange={handleMultiSelect}\r\n          checked={element.is_multiselect}\r\n          label=\"Enable Multi Select\"\r\n        />\r\n\r\n        <FormControlLabel\r\n          name=\"is_required\"\r\n          control={<Checkbox />}\r\n          onChange={handlePropertyValueUpdate}\r\n          checked={element.is_required}\r\n          label=\"This field is required\"\r\n        />\r\n\r\n        <FormControlLabel\r\n          name=\"is_unique\"\r\n          control={<Checkbox />}\r\n          onChange={handlePropertyValueUpdate}\r\n          checked={element.is_unique}\r\n          label=\"Is Unique\"\r\n        />\r\n\r\n        <FormControlLabel\r\n          name=\"is_fullwidth\"\r\n          control={<Checkbox />}\r\n          onChange={handlePropertyValueUpdate}\r\n          checked={element.is_fullwidth}\r\n          label=\"Full Width\"\r\n        />\r\n      </Box>\r\n    </Box>\r\n  );\r\n});\r\n\r\nSelectEditForm.displayName = 'SelectEditForm';\r\n\r\nexport default SelectEditForm;"],"names":["COLUMN_PER_ROW_OPTIONS","SelectEditForm","React","memo","element","handlePropertyValueUpdate","handleSelectOptionValueUpdate","handleColumnSelect","handleWidthChange","selectOptions","setSelectOptions","useState","options","newOption","setNewOption","label","value","isAddingOption","setIsAddingOption","useEffect","JSON","stringify","isFieldDisabled","useMemo","type","is_new","selectedOptionLabel","selectedOption","find","option","default_value","handleFieldUpdate","useCallback","e","target","handleSelectUpdate","handleMultiSelect","isChecked","checked","name","handleNewOptionChange","prev","handleAddOption","trim","some","enqueueSnackbar","variant","updatedOptions","handleRemoveOption","indexToRemove","filter","_","index","removedOption","handleWidthChangeCallback","newValue","jsxs","Box","className","children","jsx","FieldSelect","onChange","defaultValue","field_type","disabled","TextField","fullWidth","is_required","placeholder","Select","size","is_multiselect","renderValue","map","MenuItem","FormControl","Typography","sx","color","mb","pr","Slider","custom_width","min","max","step","marks","valueLabelDisplay","weight","display","gap","InputProps","readOnly","IconButton","onClick","Trash","mt","p","border","borderRadius","Button","startIcon","Add","flexDirection","FormControlLabel","control","Checkbox","is_unique","is_fullwidth","displayName"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../../src/views/form-builder/element-edit-forms/select.tsx"],"sourcesContent":["// React imports\r\nimport React, { useEffect, useState, useCallback, useMemo } from \"react\";\r\n\r\n// Material UI imports\r\nimport { \r\n  MenuItem, \r\n  Box, \r\n  FormControlLabel, \r\n  Slider, \r\n  FormControl, \r\n  IconButton\r\n} from \"@mui/material\";\r\nimport { Add } from \"@mui/icons-material\";\r\n\r\n// Third-party imports\r\nimport { enqueueSnackbar } from \"notistack\";\r\n\r\n// ERP Common imports\r\nimport Checkbox from \"@/components/checkbox/checkbox\";\r\nimport Select from \"@/components/select/select\";\r\nimport TextField from \"@/components/text-field/text-field\";\r\nimport Typography from \"@/components/typography/typography\";\r\nimport Button from \"@/components/button/button\";\r\nimport { Trash } from \"@/components/icons\";\r\n\r\n// Local imports\r\nimport FieldSelect from \"./field-select\";\r\nimport \"../custom-form.scss\";\r\n\r\ninterface Option {\r\n  label: string;\r\n  value: string;\r\n  [key: string]: string;\r\n}\r\n\r\ninterface ElementJSON {\r\n  id: string;\r\n  field_type: string;\r\n  label: string;\r\n  placeholder: string;\r\n  default_value: string | null;\r\n  is_multiselect: boolean;\r\n  is_required: boolean;\r\n  is_unique: boolean;\r\n  is_fullwidth: boolean;\r\n  custom_width: number;\r\n  type?: string;\r\n  is_new?: boolean;\r\n  options: Option[];\r\n}\r\n\r\ninterface SelectEditFormProps {\r\n  element: ElementJSON;\r\n  handlePropertyValueUpdate: (\r\n    event: React.ChangeEvent<HTMLInputElement> | null,\r\n    name?: string | null,\r\n    value?: any,\r\n    fieldType?: string\r\n  ) => void;\r\n  handleSelectOptionValueUpdate: (options: Option[]) => void;\r\n  handleColumnSelect: (event: React.ChangeEvent<{ value: unknown }>) => void;\r\n  handleWidthChange: (value: number | number[]) => void;\r\n}\r\n\r\nconst COLUMN_PER_ROW_OPTIONS = [1, 2, 3, 4, 5, 6] as const;\r\n\r\nexport const SelectEditForm: React.FC<SelectEditFormProps> = React.memo(({\r\n  element,\r\n  handlePropertyValueUpdate,\r\n  handleSelectOptionValueUpdate,\r\n  handleColumnSelect,\r\n  handleWidthChange\r\n}) => {\r\n  // Local state management\r\n  const [selectOptions, setSelectOptions] = useState<Option[]>(element.options || []);\r\n  const [newOption, setNewOption] = useState<Option>({ label: \"\", value: \"\" });\r\n  const [isAddingOption, setIsAddingOption] = useState(false);\r\n\r\n  // Sync options with parent element when element changes\r\n  useEffect(() => {\r\n    if (JSON.stringify(selectOptions) !== JSON.stringify(element.options || [])) {\r\n      setSelectOptions(element.options || []);\r\n    }\r\n  }, [element.options, selectOptions]);\r\n\r\n  // Memoized computed values\r\n  const isFieldDisabled = useMemo(() => \r\n    element.type === \"system\" || !element.is_new, \r\n    [element.type, element.is_new]\r\n  );\r\n\r\n  const selectedOptionLabel = useMemo(() => {\r\n    const selectedOption = selectOptions.find(option => option.value === element.default_value);\r\n    return selectedOption?.label || \"Select Default\";\r\n  }, [selectOptions, element.default_value]);\r\n\r\n  // Optimized event handlers with useCallback\r\n  const handleFieldUpdate = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {\r\n    handlePropertyValueUpdate(null, null, null, e.target.value);\r\n  }, [handlePropertyValueUpdate]);\r\n\r\n  const handleSelectUpdate = useCallback((e: React.ChangeEvent<{ value: unknown }>) => {\r\n    handlePropertyValueUpdate(null, null, e.target.value);\r\n  }, [handlePropertyValueUpdate]);\r\n\r\n  const handleMultiSelect = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {\r\n    const isChecked = e.target.checked;\r\n    // Reset default value when enabling multiselect\r\n    const defaultValue = isChecked ? null : element.default_value;\r\n    \r\n    // Create a synthetic event for the property update\r\n    const syntheticEvent = {\r\n      target: {\r\n        name: 'is_multiselect',\r\n        checked: isChecked,\r\n        value: isChecked\r\n      }\r\n    } as React.ChangeEvent<HTMLInputElement>;\r\n    \r\n    handlePropertyValueUpdate(syntheticEvent);\r\n    \r\n    // If enabling multiselect, also clear the default value\r\n    if (isChecked && element.default_value) {\r\n      handlePropertyValueUpdate(null, 'default_value', null);\r\n    }\r\n  }, [handlePropertyValueUpdate, element.default_value]);\r\n\r\n  const handleNewOptionChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {\r\n    const { name, value } = e.target;\r\n    setNewOption(prev => ({ ...prev, [name]: value }));\r\n  }, []);\r\n\r\n  const handleAddOption = useCallback(() => {\r\n    if (!newOption.label.trim() || !newOption.value.trim()) {\r\n      return; // Don't add empty options\r\n    }\r\n\r\n    // Check for duplicate values\r\n    const isDuplicate = selectOptions.some(option => \r\n      option.value === newOption.value || option.label === newOption.label\r\n    );\r\n    \r\n    if (isDuplicate) {\r\n      // Could show an error message here\r\n      enqueueSnackbar(\"Option with this value or label already exists.\", { variant: \"error\" });\r\n      return;\r\n    }\r\n\r\n    const updatedOptions = [...selectOptions, { ...newOption }];\r\n    setSelectOptions(updatedOptions);\r\n    handleSelectOptionValueUpdate(updatedOptions);\r\n    \r\n    // Reset form\r\n    setNewOption({ label: \"\", value: \"\" });\r\n    setIsAddingOption(false);\r\n  }, [newOption, selectOptions, handleSelectOptionValueUpdate]);\r\n\r\n  const handleRemoveOption = useCallback((indexToRemove: number) => {\r\n    const updatedOptions = selectOptions.filter((_, index) => index !== indexToRemove);\r\n    setSelectOptions(updatedOptions);\r\n    handleSelectOptionValueUpdate(updatedOptions);\r\n    \r\n    // Clear default value if the removed option was selected\r\n    const removedOption = selectOptions[indexToRemove];\r\n    if (element.default_value === removedOption?.value) {\r\n      handlePropertyValueUpdate(null, 'default_value', null);\r\n    }\r\n  }, [selectOptions, handleSelectOptionValueUpdate, element.default_value, handlePropertyValueUpdate]);\r\n\r\n  const handleWidthChangeCallback = useCallback((\r\n    _: Event, \r\n    newValue: number | number[]\r\n  ) => {\r\n    handleWidthChange(newValue);\r\n  }, [handleWidthChange]);\r\n\r\n  return (\r\n    <Box className=\"formSection--FieldContainer\">\r\n      {/* Field Type Selection */}\r\n      <Box>\r\n        <FieldSelect\r\n          variant=\"outlined\"\r\n          onChange={handleFieldUpdate}\r\n          defaultValue={element.field_type}\r\n          label=\"Field Type\"\r\n          disabled={isFieldDisabled}\r\n        />\r\n      </Box>\r\n\r\n      {/* Label Field */}\r\n      <Box>\r\n        <TextField\r\n          fullWidth\r\n          label=\"Label\"\r\n          is_required\r\n          name=\"label\"\r\n          type=\"text\"\r\n          onChange={handlePropertyValueUpdate}\r\n          defaultValue={element.label}\r\n        />\r\n      </Box>\r\n\r\n      {/* Placeholder Field */}\r\n      <Box>\r\n        <TextField\r\n          fullWidth\r\n          label=\"Placeholder\"\r\n          is_required\r\n          name=\"placeholder\"\r\n          type=\"text\"\r\n          onChange={handlePropertyValueUpdate}\r\n          defaultValue={element.placeholder}\r\n        />\r\n      </Box>\r\n\r\n      {/* Default Value Selection */}\r\n      <Box>\r\n        <Select\r\n          fullWidth\r\n          placeholder=\"Select Default\"\r\n          size=\"small\"\r\n          name=\"default_value\"\r\n          onChange={handleSelectUpdate}\r\n          value={element.default_value || \"\"}\r\n          label=\"Default\"\r\n          variant=\"outlined\"\r\n          disabled={element.is_multiselect}\r\n          renderValue={() => selectedOptionLabel}\r\n        >\r\n          {selectOptions.map((option, index) => (\r\n            <MenuItem key={`${option.value}-${index}`} value={option.value}>\r\n              {option.label}\r\n            </MenuItem>\r\n          ))}\r\n        </Select>\r\n      </Box>\r\n\r\n      {/* Column Per Row Selection */}\r\n      <Box>\r\n        <FormControl fullWidth>\r\n          <Select\r\n            fullWidth\r\n            placeholder=\"Select Column Per Row\"\r\n            size=\"small\"\r\n            onChange={handleColumnSelect}\r\n            label=\"Select Column Per Row\"\r\n            name=\"columnPerRow\"\r\n            variant=\"outlined\"\r\n          >\r\n            {COLUMN_PER_ROW_OPTIONS.map((option) => (\r\n              <MenuItem key={option} value={option}>\r\n                {option}\r\n              </MenuItem>\r\n            ))}\r\n          </Select>\r\n        </FormControl>\r\n      </Box>\r\n\r\n      {/* Width Slider */}\r\n      <Box>\r\n        <Typography sx={{ color: 'black', mb: 1 }}>\r\n          Adjust Width:\r\n        </Typography>\r\n        <Box pr={2}>\r\n          <Slider\r\n            value={element.custom_width || 6}\r\n            min={1}\r\n            max={12}\r\n            step={1}\r\n            onChange={handleWidthChangeCallback}\r\n            aria-labelledby=\"width-slider\"\r\n            sx={{ color: \"#4AC08C\" }}\r\n            marks\r\n            valueLabelDisplay=\"auto\"\r\n          />\r\n        </Box>\r\n      </Box>\r\n\r\n      {/* Options Management */}\r\n      <Box className=\"formSection--SelectOption\">\r\n        <Typography \r\n          type=\"s5\" \r\n          weight=\"medium\" \r\n          color=\"theme.secondary.800\"\r\n          sx={{ mb: 0.5 }}\r\n        >\r\n          Options\r\n        </Typography>\r\n        \r\n        {/* Existing Options */}\r\n        {selectOptions.map((option, index) => (\r\n          <Box key={`option-${index}`} sx={{ mb: 1, display: 'flex', gap: 1 }}>\r\n            <TextField\r\n              fullWidth\r\n              value={`${option.label} (${option.value})`}\r\n              InputProps={{ readOnly: true }}\r\n            />\r\n            <IconButton\r\n              color=\"error\"\r\n              size=\"small\"\r\n              onClick={() => handleRemoveOption(index)}\r\n            >\r\n              <Trash />\r\n            </IconButton>\r\n          </Box>\r\n        ))}\r\n\r\n        {/* Add New Option Form */}\r\n        {isAddingOption && (\r\n          <Box className=\"formSection--SelectOption\" sx={{ mt:0.5, p: 2, border: '1px solid #ddd', borderRadius: 1 }}>\r\n            <Box sx={{ mb: 2 }}>\r\n              <TextField\r\n                fullWidth\r\n                label=\"Option Label\"\r\n                is_required\r\n                name=\"label\"\r\n                type=\"text\"\r\n                placeholder=\"Enter option label\"\r\n                value={newOption.label}\r\n                onChange={handleNewOptionChange}\r\n              />\r\n            </Box>\r\n            <Box sx={{ mb: 2 }}>\r\n              <TextField\r\n                fullWidth\r\n                label=\"Option Value\"\r\n                placeholder=\"Enter option value\"\r\n                is_required\r\n                name=\"value\"\r\n                type=\"text\"\r\n                value={newOption.value}\r\n                onChange={handleNewOptionChange}\r\n              />\r\n            </Box>\r\n            <Box sx={{ display: 'flex', gap: 1 }}>\r\n              <Button\r\n                onClick={handleAddOption}\r\n                // className=\"formSection--Button\"\r\n                startIcon={<Add />}\r\n                disabled={!newOption.label.trim() || !newOption.value.trim()}\r\n              >\r\n                Add Option\r\n              </Button>\r\n              <Button\r\n                onClick={() => {\r\n                  setIsAddingOption(false);\r\n                  setNewOption({ label: \"\", value: \"\" });\r\n                }}\r\n                variant=\"outlined\"\r\n              >\r\n                Cancel\r\n              </Button>\r\n            </Box>\r\n          </Box>\r\n        )}\r\n\r\n        {/* Add Option Button */}\r\n        {!isAddingOption && (\r\n          <Button\r\n            onClick={() => setIsAddingOption(true)}\r\n            variant=\"outlined\"\r\n            className=\"formSection--Button\"\r\n            startIcon={<Add />}\r\n            sx={{ mt: 1 }}\r\n          >\r\n            Add Option\r\n          </Button>\r\n        )}\r\n      </Box>\r\n\r\n      {/* Form Controls */}\r\n      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>\r\n        <FormControlLabel\r\n          name=\"is_multiselect\"\r\n          control={<Checkbox />}\r\n          onChange={handleMultiSelect}\r\n          checked={element.is_multiselect}\r\n          label=\"Enable Multi Select\"\r\n        />\r\n\r\n        <FormControlLabel\r\n          name=\"is_required\"\r\n          control={<Checkbox />}\r\n          onChange={handlePropertyValueUpdate}\r\n          checked={element.is_required}\r\n          label=\"This field is required\"\r\n        />\r\n\r\n        <FormControlLabel\r\n          name=\"is_unique\"\r\n          control={<Checkbox />}\r\n          onChange={handlePropertyValueUpdate}\r\n          checked={element.is_unique}\r\n          label=\"Is Unique\"\r\n        />\r\n\r\n        <FormControlLabel\r\n          name=\"is_fullwidth\"\r\n          control={<Checkbox />}\r\n          onChange={handlePropertyValueUpdate}\r\n          checked={element.is_fullwidth}\r\n          label=\"Full Width\"\r\n        />\r\n      </Box>\r\n    </Box>\r\n  );\r\n});\r\n\r\nSelectEditForm.displayName = 'SelectEditForm';\r\n\r\nexport default SelectEditForm;"],"names":["COLUMN_PER_ROW_OPTIONS","SelectEditForm","React","memo","element","handlePropertyValueUpdate","handleSelectOptionValueUpdate","handleColumnSelect","handleWidthChange","selectOptions","setSelectOptions","useState","options","newOption","setNewOption","label","value","isAddingOption","setIsAddingOption","useEffect","JSON","stringify","isFieldDisabled","useMemo","type","is_new","selectedOptionLabel","selectedOption","find","option","default_value","handleFieldUpdate","useCallback","e","target","handleSelectUpdate","handleMultiSelect","isChecked","checked","name","handleNewOptionChange","prev","handleAddOption","trim","some","enqueueSnackbar","variant","updatedOptions","handleRemoveOption","indexToRemove","filter","_","index","removedOption","handleWidthChangeCallback","newValue","jsxs","Box","className","children","jsx","FieldSelect","onChange","defaultValue","field_type","disabled","TextField","fullWidth","is_required","placeholder","Select","size","is_multiselect","renderValue","map","MenuItem","FormControl","Typography","sx","color","mb","pr","Slider","custom_width","min","max","step","marks","valueLabelDisplay","weight","display","gap","InputProps","readOnly","IconButton","onClick","Trash","mt","p","border","borderRadius","Button","startIcon","Add","flexDirection","FormControlLabel","control","Checkbox","is_unique","is_fullwidth","displayName"],"mappings":"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"}

package/dist/views/form-builder/element-edit-forms/table-form/index.esm.js

@@ -1,8 +1,8 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useState, useEffect } from "react";
-import Select from "../../../../components/select/select/index.esm.js";
-import TextField from "../../../../components/text-field/text-field/index.esm.js";
-import formatText from "../../../../utils/format-text/index.esm.js";
+import { Select } from "../../../../components/select/select/index.esm.js";
+import { TextField } from "../../../../components/text-field/text-field/index.esm.js";
+import { formatText } from "../../../../utils/format-text/index.esm.js";
 import FieldSelect from "../field-select/index.esm.js";
 /* empty css                               */
 import Box from "../../../../node_modules/@mui/material/Box/Box/index.esm.js";

package/dist/views/form-builder/element-edit-forms/table-form/index.js

@@ -1,5 +1,5 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),l=require("react"),t=,/* empty css                                          */a=,/* empty css                                                  */i=,/* empty css                                   */d=;/* empty css                     */;/* empty css                            */var u=,/* empty css                                                    */s=;/* empty css                                                              */exports.default=({handlePropertyValueUpdate:n,element:r,handleColumnsUpdate:o,fields:c})=>{const[f,m]=l.useState(r),[x,b]=l.useState([]);return l.useEffect(()=>{m(r)},[r]),l.useEffect(()=>{if(f&&f.table&&c){const e=c[f.table];let l=[];l=e&&(null==e?void 0:e.length)?e.map((e,l)=>({header:i.default(e.field),accessorKey:e.field,visible:!(l>3),type:e.type})):[{header:"Column 1",accessorKey:"column_1",visible:!0},{header:"Column 2",accessorKey:"column_1",visible:!0}],l&&o(l)}},[null==f?void 0:f.table]),l.useEffect(()=>{if(c){const e=Object.keys(c).map(e=>({label:i.default(e),value:e}));b(e)}},[c]),f?/* @__PURE__ */e.jsxs(u.default,{className:"formSection--FieldContainer",children:[
-/* @__PURE__ */e.jsx("div",{children:/* @__PURE__ */e.jsx(d.default,{variant:"outlined",onChange:e=>{f&&(f.field_type=e.target.value,n(null,null,null,e.target.value))},defaultValue:f.field_type,disabled:"system"===f.type||!f.is_new},f.id)},f.id),
-/* @__PURE__ */e.jsx("div",{children:/* @__PURE__ */e.jsx(a.default,{fullWidth:!0,label:"Label",is_required:!0,name:"label",type:"text",onChange:n,defaultValue:f.label},f.id)},f.id),
-/* @__PURE__ */e.jsx("div",{children:/* @__PURE__ */e.jsx(t.default,{variant:"outlined",label:"Table",fullWidth:!0,placeholder:"Select Table",size:"small",name:"table",defaultValue:f.table,disabled:"system"===f.type,onChange:e=>{n(e)},renderValue:e=>{var l;return null==(l=x.find(l=>l.value===e))?void 0:l.label},children:null==x?void 0:x.map(l=>/* @__PURE__ */e.jsx(s.default,{value:l.value,children:l.label}))},f.id)},f.id)]},f.id):null};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),l=require("react"),t=,/* empty css                                          */a=,/* empty css                                                  */i=,/* empty css                                   */d=;/* empty css                     */;/* empty css                            */var s=,/* empty css                                                    */r=;/* empty css                                                              */exports.default=({handlePropertyValueUpdate:u,element:n,handleColumnsUpdate:o,fields:c})=>{const[f,m]=l.useState(n),[x,b]=l.useState([]);return l.useEffect(()=>{m(n)},[n]),l.useEffect(()=>{if(f&&f.table&&c){const e=c[f.table];let l=[];l=e&&(null==e?void 0:e.length)?e.map((e,l)=>({header:i.formatText(e.field),accessorKey:e.field,visible:!(l>3),type:e.type})):[{header:"Column 1",accessorKey:"column_1",visible:!0},{header:"Column 2",accessorKey:"column_1",visible:!0}],l&&o(l)}},[null==f?void 0:f.table]),l.useEffect(()=>{if(c){const e=Object.keys(c).map(e=>({label:i.formatText(e),value:e}));b(e)}},[c]),f?/* @__PURE__ */e.jsxs(s.default,{className:"formSection--FieldContainer",children:[
+/* @__PURE__ */e.jsx("div",{children:/* @__PURE__ */e.jsx(d.default,{variant:"outlined",onChange:e=>{f&&(f.field_type=e.target.value,u(null,null,null,e.target.value))},defaultValue:f.field_type,disabled:"system"===f.type||!f.is_new},f.id)},f.id),
+/* @__PURE__ */e.jsx("div",{children:/* @__PURE__ */e.jsx(a.TextField,{fullWidth:!0,label:"Label",is_required:!0,name:"label",type:"text",onChange:u,defaultValue:f.label},f.id)},f.id),
+/* @__PURE__ */e.jsx("div",{children:/* @__PURE__ */e.jsx(t.Select,{variant:"outlined",label:"Table",fullWidth:!0,placeholder:"Select Table",size:"small",name:"table",defaultValue:f.table,disabled:"system"===f.type,onChange:e=>{u(e)},renderValue:e=>{var l;return null==(l=x.find(l=>l.value===e))?void 0:l.label},children:null==x?void 0:x.map(l=>/* @__PURE__ */e.jsx(r.default,{value:l.value,children:l.label}))},f.id)},f.id)]},f.id):null};
 //# sourceMappingURL=index.js.map

package/dist/views/form-builder/element-edit-forms/table-form/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/views/form-builder/element-edit-forms/table-form.tsx"],"sourcesContent":["// React imports\r\nimport React, { useEffect, useState } from 'react';\r\n\r\n// Material UI imports\r\nimport { MenuItem, Box, SelectChangeEvent } from '@mui/material';\r\n\r\n// Third-party imports\r\nimport { MRT_ColumnDef, MRT_RowData } from 'material-react-table';\r\n\r\n// ERP Common imports\r\nimport Select from '@/components/select/select';\r\nimport TextField from '@/components/text-field/text-field';\r\nimport formatText from '@/utils/format-text';\r\n\r\n// Local imports\r\nimport { IElementJson } from '../custom-form';\r\nimport { ApiFormFields } from '../../Redux/state';\r\nimport FieldSelect from './field-select';\r\nimport '../custom-form.scss';\r\n\r\ninterface ITableEditForm {\r\n\thandlePropertyValueUpdate: (\r\n\t\tevent?: any,\r\n\t\tnumberValue?: any,\r\n\t\tval?: any,\r\n\t\tfieldType?: any\r\n\t) => void;\r\n\thandleColumnsUpdate: (columns: MRT_ColumnDef<MRT_RowData>[]) => void;\r\n\telement: IElementJson | null;\r\n\tfields: ApiFormFields | null;\r\n}\r\n\r\ninterface TableOption {\r\n\tlabel: string;\r\n\tvalue: string;\r\n}\r\n\r\nconst TableEditForm: React.FC<ITableEditForm> = ({\r\n\thandlePropertyValueUpdate,\r\n\telement,\r\n\thandleColumnsUpdate,\r\n\tfields\r\n}) => {\r\n\t/* Local States */\r\n\tconst [elementJSON, setElementJSON] = useState<IElementJson | null>(element);\r\n\tconst [tables, setTables] = useState<TableOption[]>([]);\r\n\r\n\t/* Local Functions */\r\n\tconst handleFieldUpdate = (event: SelectChangeEvent<unknown>) => {\r\n\t\tif (elementJSON) {\r\n\t\t\telementJSON.field_type = event.target.value as string;\r\n\t\t\thandlePropertyValueUpdate(null, null, null, event.target.value as string);\r\n\t\t}\r\n\t};\r\n\tconst handleTableSelect = (event: SelectChangeEvent<unknown>) => {\r\n\t\thandlePropertyValueUpdate(event);\r\n\t};\r\n\r\n\t/* Use Effects */\r\n\tuseEffect(() => {\r\n\t\tsetElementJSON(element);\r\n\t}, [element]);\r\n\tuseEffect(() => {\r\n\t\tif (elementJSON && elementJSON.table && fields) {\r\n\t\t\tconst fieldsArr = fields[elementJSON.table];\r\n\t\t\tlet columns: any[] = [];\r\n\t\t\tif (fieldsArr && fieldsArr?.length) {\r\n\t\t\t\tcolumns = fieldsArr.map((field, index) => ({\r\n\t\t\t\t\theader: formatText(field.field),\r\n\t\t\t\t\taccessorKey: field.field,\r\n\t\t\t\t\tvisible: index > 3 ? false : true,\r\n\t\t\t\t\ttype: field.type\r\n\t\t\t\t}));\r\n\t\t\t} else {\r\n\t\t\t\tcolumns = [\r\n\t\t\t\t\t{ header: 'Column 1', accessorKey: 'column_1', visible: true },\r\n\t\t\t\t\t{ header: 'Column 2', accessorKey: 'column_1', visible: true }\r\n\t\t\t\t];\r\n\t\t\t}\r\n\t\t\tcolumns && handleColumnsUpdate(columns);\r\n\t\t}\r\n\t}, [elementJSON?.table]);\r\n\tuseEffect(() => {\r\n\t\tif (fields) {\r\n\t\t\tconst options = Object.keys(fields).map((key) => ({\r\n\t\t\t\tlabel: formatText(key),\r\n\t\t\t\tvalue: key\r\n\t\t\t}));\r\n\t\t\tsetTables(options);\r\n\t\t}\r\n\t}, [fields]);\r\n\r\n\tif (!elementJSON) {\r\n\t\treturn null;\r\n\t}\r\n\r\n\treturn (\r\n\t\t<Box className='formSection--FieldContainer' key={elementJSON.id}>\r\n\t\t\t<div key={elementJSON.id}>\r\n\t\t\t\t<FieldSelect\r\n\t\t\t\t\tkey={elementJSON.id}\r\n\t\t\t\t\tvariant='outlined'\r\n\t\t\t\t\tonChange={handleFieldUpdate}\r\n\t\t\t\t\tdefaultValue={elementJSON.field_type}\r\n\t\t\t\t\tdisabled={elementJSON.type === 'system' || !elementJSON.is_new}\r\n\t\t\t\t/>\r\n\t\t\t</div>\r\n\t\t\t<div key={elementJSON.id}>\r\n\t\t\t\t<TextField\r\n\t\t\t\t\tfullWidth\r\n\t\t\t\t\tlabel='Label'\r\n\t\t\t\t\tis_required\r\n\t\t\t\t\tkey={elementJSON.id}\r\n\t\t\t\t\tname='label'\r\n\t\t\t\t\ttype='text'\r\n\t\t\t\t\tonChange={handlePropertyValueUpdate}\r\n\t\t\t\t\tdefaultValue={elementJSON.label}\r\n\t\t\t\t/>\r\n\t\t\t</div>\r\n\r\n\t\t\t<div key={elementJSON.id}>\r\n\t\t\t\t<Select\r\n\t\t\t\t\tkey={elementJSON.id}\r\n\t\t\t\t\tvariant='outlined'\r\n\t\t\t\t\tlabel='Table'\r\n\t\t\t\t\tfullWidth\r\n\t\t\t\t\tplaceholder='Select Table'\r\n\t\t\t\t\tsize='small'\r\n\t\t\t\t\tname='table'\r\n\t\t\t\t\tdefaultValue={elementJSON.table}\r\n\t\t\t\t\tdisabled={elementJSON.type === 'system'}\r\n\t\t\t\t\tonChange={handleTableSelect}\r\n\t\t\t\t\trenderValue={(value: string) =>\r\n\t\t\t\t\t\ttables.find((option) => option.value === value)?.label\r\n\t\t\t\t\t}>\r\n\t\t\t\t\t{tables?.map((item) => (\r\n\t\t\t\t\t\t<MenuItem value={item.value}>{item.label}</MenuItem>\r\n\t\t\t\t\t))}\r\n\t\t\t\t</Select>\r\n\t\t\t</div>\r\n\t\t</Box>\r\n\t);\r\n};\r\n\r\nexport default TableEditForm;\r\n"],"names":["handlePropertyValueUpdate","element","handleColumnsUpdate","fields","elementJSON","setElementJSON","useState","tables","setTables","useEffect","table","fieldsArr","columns","length","map","field","index","header","formatText","accessorKey","visible","type","options","Object","keys","key","label","value","jsxs","Box","className","children","jsx","FieldSelect","variant","onChange","event","field_type","target","defaultValue","disabled","is_new","id","TextField","fullWidth","is_required","name","Select","placeholder","size","renderValue","_a","find","option","item","MenuItem"],"mappings":"qiBAqCgD,EAC/CA,4BACAC,UACAC,sBACAC,aAGA,MAAOC,EAAaC,GAAkBC,EAAAA,SAA8BL,IAC7DM,EAAQC,GAAaF,EAAAA,SAAwB,IA+CpD,OAjCAG,EAAAA,UAAU,KACTJ,EAAeJ,IACb,CAACA,IACJQ,EAAAA,UAAU,KACT,GAAIL,GAAeA,EAAYM,OAASP,EAAQ,CAC/C,MAAMQ,EAAYR,EAAOC,EAAYM,OACrC,IAAIE,EAAiB,GAEpBA,EADGD,UAAaA,WAAWE,QACjBF,EAAUG,IAAI,CAACC,EAAOC,KAAA,CAC/BC,OAAQC,EAAAA,QAAWH,EAAMA,OACzBI,YAAaJ,EAAMA,MACnBK,UAASJ,EAAQ,GACjBK,KAAMN,EAAMM,QAGH,CACT,CAAEJ,OAAQ,WAAYE,YAAa,WAAYC,SAAS,GACxD,CAAEH,OAAQ,WAAYE,YAAa,WAAYC,SAAS,IAG1DR,GAAWV,EAAoBU,EAChC,GACE,CAAC,MAAAR,OAAA,EAAAA,EAAaM,QACjBD,EAAAA,UAAU,KACT,GAAIN,EAAQ,CACX,MAAMmB,EAAUC,OAAOC,KAAKrB,GAAQW,IAAKW,IAAA,CACxCC,MAAOR,EAAAA,QAAWO,GAClBE,MAAOF,KAERjB,EAAUc,EACX,GACE,CAACnB,IAECC,mBAKJwB,KAACC,EAAAA,QAAA,CAAIC,UAAU,8BACdC,SAAA;eAAAC,MAAC,MAAA,CACAD,wBAAAC,EAAAA,IAACC,EAAAA,QAAA,CAEAC,QAAQ,WACRC,SAtDuBC,IACtBhC,IACHA,EAAYiC,WAAaD,EAAME,OAAOX,MACtC3B,EAA0B,KAAM,KAAM,KAAMoC,EAAME,OAAOX,SAoDvDY,aAAcnC,EAAYiC,WAC1BG,SAA+B,WAArBpC,EAAYiB,OAAsBjB,EAAYqC,QAJnDrC,EAAYsC,KAFTtC,EAAYsC;qBASrB,MAAA,CACAX,wBAAAC,EAAAA,IAACW,EAAAA,QAAA,CACAC,WAAS,EACTlB,MAAM,QACNmB,aAAW,EAEXC,KAAK,QACLzB,KAAK,OACLc,SAAUnC,EACVuC,aAAcnC,EAAYsB,OAJrBtB,EAAYsC,KALTtC,EAAYsC;qBAarB,MAAA,CACAX,wBAAAC,EAAAA,IAACe,EAAAA,QAAA,CAEAb,QAAQ,WACRR,MAAM,QACNkB,WAAS,EACTI,YAAY,eACZC,KAAK,QACLH,KAAK,QACLP,aAAcnC,EAAYM,MAC1B8B,SAA+B,WAArBpC,EAAYiB,KACtBc,SA7EuBC,IAC1BpC,EAA0BoC,IA6EvBc,YAAcvB,UACb,OAAA,OAAAwB,EAAA5C,EAAO6C,KAAMC,GAAWA,EAAO1B,QAAUA,SAAzC,EAAAwB,EAAiDzB,OAEjDK,SAAA,MAAAxB,OAAA,EAAAA,EAAQO,IAAKwC,oBACbtB,IAACuB,EAAAA,QAAA,CAAS5B,MAAO2B,EAAK3B,MAAQI,SAAAuB,EAAK5B,UAd/BtB,EAAYsC,KAFTtC,EAAYsC,MAvB2BtC,EAAYsC,IAJvD"}
+{"version":3,"file":"index.js","sources":["../../../../../src/views/form-builder/element-edit-forms/table-form.tsx"],"sourcesContent":["// React imports\r\nimport React, { useEffect, useState } from 'react';\r\n\r\n// Material UI imports\r\nimport { MenuItem, Box, SelectChangeEvent } from '@mui/material';\r\n\r\n// Third-party imports\r\nimport { MRT_ColumnDef, MRT_RowData } from 'material-react-table';\r\n\r\n// ERP Common imports\r\nimport Select from '@/components/select/select';\r\nimport TextField from '@/components/text-field/text-field';\r\nimport formatText from '@/utils/format-text';\r\n\r\n// Local imports\r\nimport { IElementJson } from '../custom-form';\r\nimport { ApiFormFields } from '../../Redux/state';\r\nimport FieldSelect from './field-select';\r\nimport '../custom-form.scss';\r\n\r\ninterface ITableEditForm {\r\n\thandlePropertyValueUpdate: (\r\n\t\tevent?: any,\r\n\t\tnumberValue?: any,\r\n\t\tval?: any,\r\n\t\tfieldType?: any\r\n\t) => void;\r\n\thandleColumnsUpdate: (columns: MRT_ColumnDef<MRT_RowData>[]) => void;\r\n\telement: IElementJson | null;\r\n\tfields: ApiFormFields | null;\r\n}\r\n\r\ninterface TableOption {\r\n\tlabel: string;\r\n\tvalue: string;\r\n}\r\n\r\nconst TableEditForm: React.FC<ITableEditForm> = ({\r\n\thandlePropertyValueUpdate,\r\n\telement,\r\n\thandleColumnsUpdate,\r\n\tfields\r\n}) => {\r\n\t/* Local States */\r\n\tconst [elementJSON, setElementJSON] = useState<IElementJson | null>(element);\r\n\tconst [tables, setTables] = useState<TableOption[]>([]);\r\n\r\n\t/* Local Functions */\r\n\tconst handleFieldUpdate = (event: SelectChangeEvent<unknown>) => {\r\n\t\tif (elementJSON) {\r\n\t\t\telementJSON.field_type = event.target.value as string;\r\n\t\t\thandlePropertyValueUpdate(null, null, null, event.target.value as string);\r\n\t\t}\r\n\t};\r\n\tconst handleTableSelect = (event: SelectChangeEvent<unknown>) => {\r\n\t\thandlePropertyValueUpdate(event);\r\n\t};\r\n\r\n\t/* Use Effects */\r\n\tuseEffect(() => {\r\n\t\tsetElementJSON(element);\r\n\t}, [element]);\r\n\tuseEffect(() => {\r\n\t\tif (elementJSON && elementJSON.table && fields) {\r\n\t\t\tconst fieldsArr = fields[elementJSON.table];\r\n\t\t\tlet columns: any[] = [];\r\n\t\t\tif (fieldsArr && fieldsArr?.length) {\r\n\t\t\t\tcolumns = fieldsArr.map((field, index) => ({\r\n\t\t\t\t\theader: formatText(field.field),\r\n\t\t\t\t\taccessorKey: field.field,\r\n\t\t\t\t\tvisible: index > 3 ? false : true,\r\n\t\t\t\t\ttype: field.type\r\n\t\t\t\t}));\r\n\t\t\t} else {\r\n\t\t\t\tcolumns = [\r\n\t\t\t\t\t{ header: 'Column 1', accessorKey: 'column_1', visible: true },\r\n\t\t\t\t\t{ header: 'Column 2', accessorKey: 'column_1', visible: true }\r\n\t\t\t\t];\r\n\t\t\t}\r\n\t\t\tcolumns && handleColumnsUpdate(columns);\r\n\t\t}\r\n\t}, [elementJSON?.table]);\r\n\tuseEffect(() => {\r\n\t\tif (fields) {\r\n\t\t\tconst options = Object.keys(fields).map((key) => ({\r\n\t\t\t\tlabel: formatText(key),\r\n\t\t\t\tvalue: key\r\n\t\t\t}));\r\n\t\t\tsetTables(options);\r\n\t\t}\r\n\t}, [fields]);\r\n\r\n\tif (!elementJSON) {\r\n\t\treturn null;\r\n\t}\r\n\r\n\treturn (\r\n\t\t<Box className='formSection--FieldContainer' key={elementJSON.id}>\r\n\t\t\t<div key={elementJSON.id}>\r\n\t\t\t\t<FieldSelect\r\n\t\t\t\t\tkey={elementJSON.id}\r\n\t\t\t\t\tvariant='outlined'\r\n\t\t\t\t\tonChange={handleFieldUpdate}\r\n\t\t\t\t\tdefaultValue={elementJSON.field_type}\r\n\t\t\t\t\tdisabled={elementJSON.type === 'system' || !elementJSON.is_new}\r\n\t\t\t\t/>\r\n\t\t\t</div>\r\n\t\t\t<div key={elementJSON.id}>\r\n\t\t\t\t<TextField\r\n\t\t\t\t\tfullWidth\r\n\t\t\t\t\tlabel='Label'\r\n\t\t\t\t\tis_required\r\n\t\t\t\t\tkey={elementJSON.id}\r\n\t\t\t\t\tname='label'\r\n\t\t\t\t\ttype='text'\r\n\t\t\t\t\tonChange={handlePropertyValueUpdate}\r\n\t\t\t\t\tdefaultValue={elementJSON.label}\r\n\t\t\t\t/>\r\n\t\t\t</div>\r\n\r\n\t\t\t<div key={elementJSON.id}>\r\n\t\t\t\t<Select\r\n\t\t\t\t\tkey={elementJSON.id}\r\n\t\t\t\t\tvariant='outlined'\r\n\t\t\t\t\tlabel='Table'\r\n\t\t\t\t\tfullWidth\r\n\t\t\t\t\tplaceholder='Select Table'\r\n\t\t\t\t\tsize='small'\r\n\t\t\t\t\tname='table'\r\n\t\t\t\t\tdefaultValue={elementJSON.table}\r\n\t\t\t\t\tdisabled={elementJSON.type === 'system'}\r\n\t\t\t\t\tonChange={handleTableSelect}\r\n\t\t\t\t\trenderValue={(value: string) =>\r\n\t\t\t\t\t\ttables.find((option) => option.value === value)?.label\r\n\t\t\t\t\t}>\r\n\t\t\t\t\t{tables?.map((item) => (\r\n\t\t\t\t\t\t<MenuItem value={item.value}>{item.label}</MenuItem>\r\n\t\t\t\t\t))}\r\n\t\t\t\t</Select>\r\n\t\t\t</div>\r\n\t\t</Box>\r\n\t);\r\n};\r\n\r\nexport default TableEditForm;\r\n"],"names":["handlePropertyValueUpdate","element","handleColumnsUpdate","fields","elementJSON","setElementJSON","useState","tables","setTables","useEffect","table","fieldsArr","columns","length","map","field","index","header","formatText","accessorKey","visible","type","options","Object","keys","key","label","value","jsxs","Box","className","children","jsx","FieldSelect","variant","onChange","event","field_type","target","defaultValue","disabled","is_new","id","TextField","fullWidth","is_required","name","Select","placeholder","size","renderValue","_a","find","option","item","MenuItem"],"mappings":"qiBAqCgD,EAC/CA,4BACAC,UACAC,sBACAC,aAGA,MAAOC,EAAaC,GAAkBC,EAAAA,SAA8BL,IAC7DM,EAAQC,GAAaF,EAAAA,SAAwB,IA+CpD,OAjCAG,EAAAA,UAAU,KACTJ,EAAeJ,IACb,CAACA,IACJQ,EAAAA,UAAU,KACT,GAAIL,GAAeA,EAAYM,OAASP,EAAQ,CAC/C,MAAMQ,EAAYR,EAAOC,EAAYM,OACrC,IAAIE,EAAiB,GAEpBA,EADGD,UAAaA,WAAWE,QACjBF,EAAUG,IAAI,CAACC,EAAOC,KAAA,CAC/BC,OAAQC,EAAAA,WAAWH,EAAMA,OACzBI,YAAaJ,EAAMA,MACnBK,UAASJ,EAAQ,GACjBK,KAAMN,EAAMM,QAGH,CACT,CAAEJ,OAAQ,WAAYE,YAAa,WAAYC,SAAS,GACxD,CAAEH,OAAQ,WAAYE,YAAa,WAAYC,SAAS,IAG1DR,GAAWV,EAAoBU,EAChC,GACE,CAAC,MAAAR,OAAA,EAAAA,EAAaM,QACjBD,EAAAA,UAAU,KACT,GAAIN,EAAQ,CACX,MAAMmB,EAAUC,OAAOC,KAAKrB,GAAQW,IAAKW,IAAA,CACxCC,MAAOR,EAAAA,WAAWO,GAClBE,MAAOF,KAERjB,EAAUc,EACX,GACE,CAACnB,IAECC,mBAKJwB,KAACC,EAAAA,QAAA,CAAIC,UAAU,8BACdC,SAAA;eAAAC,MAAC,MAAA,CACAD,wBAAAC,EAAAA,IAACC,EAAAA,QAAA,CAEAC,QAAQ,WACRC,SAtDuBC,IACtBhC,IACHA,EAAYiC,WAAaD,EAAME,OAAOX,MACtC3B,EAA0B,KAAM,KAAM,KAAMoC,EAAME,OAAOX,SAoDvDY,aAAcnC,EAAYiC,WAC1BG,SAA+B,WAArBpC,EAAYiB,OAAsBjB,EAAYqC,QAJnDrC,EAAYsC,KAFTtC,EAAYsC;qBASrB,MAAA,CACAX,wBAAAC,EAAAA,IAACW,EAAAA,UAAA,CACAC,WAAS,EACTlB,MAAM,QACNmB,aAAW,EAEXC,KAAK,QACLzB,KAAK,OACLc,SAAUnC,EACVuC,aAAcnC,EAAYsB,OAJrBtB,EAAYsC,KALTtC,EAAYsC;qBAarB,MAAA,CACAX,wBAAAC,EAAAA,IAACe,EAAAA,OAAA,CAEAb,QAAQ,WACRR,MAAM,QACNkB,WAAS,EACTI,YAAY,eACZC,KAAK,QACLH,KAAK,QACLP,aAAcnC,EAAYM,MAC1B8B,SAA+B,WAArBpC,EAAYiB,KACtBc,SA7EuBC,IAC1BpC,EAA0BoC,IA6EvBc,YAAcvB,UACb,OAAA,OAAAwB,EAAA5C,EAAO6C,KAAMC,GAAWA,EAAO1B,QAAUA,SAAzC,EAAAwB,EAAiDzB,OAEjDK,SAAA,MAAAxB,OAAA,EAAAA,EAAQO,IAAKwC,oBACbtB,IAACuB,EAAAA,QAAA,CAAS5B,MAAO2B,EAAK3B,MAAQI,SAAAuB,EAAK5B,UAd/BtB,EAAYsC,KAFTtC,EAAYsC,MAvB2BtC,EAAYsC,IAJvD"}

package/dist/views/form-builder/element-edit-forms/text/index.esm.js

@@ -1,12 +1,12 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useState, useRef, useMemo, useCallback, useEffect } from "react";
-import Button from "../../../../components/button/button/index.esm.js";
-import Modal from "../../../../components/modal/modal/index.esm.js";
+import { Button } from "../../../../components/button/button/index.esm.js";
+import { Modal } from "../../../../components/modal/modal/index.esm.js";
 import { Typography } from "../../../../components/typography/typography/index.esm.js";
-import TextField from "../../../../components/text-field/text-field/index.esm.js";
-import Select from "../../../../components/select/select/index.esm.js";
-import Checkbox from "../../../../components/checkbox/checkbox/index.esm.js";
-import formatText from "../../../../utils/format-text/index.esm.js";
+import { TextField } from "../../../../components/text-field/text-field/index.esm.js";
+import { Select } from "../../../../components/select/select/index.esm.js";
+import { Checkbox } from "../../../../components/checkbox/checkbox/index.esm.js";
+import { formatText } from "../../../../utils/format-text/index.esm.js";
 import FieldSelect from "../field-select/index.esm.js";
 /* empty css                               */
 import Box from "../../../../node_modules/@mui/material/Box/Box/index.esm.js";

package/dist/views/form-builder/element-edit-forms/text/index.js

@@ -1,31 +1,31 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),l=require("react"),a=,/* empty css                                          */t=,/* empty css                                        */n=,/* empty css                                                  */i=,/* empty css                                                  */d=,/* empty css                                          */u=,/* empty css                                              */o=,/* empty css                                   */r=;/* empty css                     */;/* empty css                            */var s=,/* empty css                                                    */c=,/* empty css                                                                    */m=,/* empty css                                                              */f=,/* empty css                                                          */h=,/* empty css                                                                              */x=,/* empty css                                                          */j=,/* empty css                                                                    */p=,/* empty css                                                                  */b=,/* empty css                                                            */g=,/* empty css                                                                        */v=;/* empty css                                                                        */const _=[1,2,3,4,5,6],y=[{text:"12 Hour",value:"12hr"},{text:"24 Hour",value:"24hr"}],C=[{text:"INR (India)",value:"inr"},{text:"USD (US)",value:"usd"}],k=/* @__PURE__ */new Set(["time","file","geoLocation","image","info","relation"]),w=/* @__PURE__ */new Set(["text","number"]),q=({option:l,index:a,prefix:t})=>/* @__PURE__ */e.jsx(m.default,{value:l.value,children:l.text||l.label},`${t}-${a}`),S=({option:l,index:a,prefix:t})=>/* @__PURE__ */e.jsx(m.default,{value:l.value,children:/* @__PURE__ */e.jsx(n.Typography,{type:"s3",color:"theme.secondary.1000",children:l.label})},`${t}-${a}`);function F(F){const{handlePropertyValueUpdate:W,handleColumnSelect:M,handleWidthChange:V,fields:A,element:T}=F,[D,N]=l.useState(T),[z,R]=l.useState(!1),[I,$]=l.useState([]),[L,P]=l.useState(""),B=l.useRef(T),U=l.useRef(A),E=l.useMemo(()=>A&&A!==U.current||!U.current||!A?(U.current=A,A?Object.keys(A).map(e=>({label:o.default(e),value:e})):[]):U.current,[A]),H=l.useCallback(e=>{if(!A||!e)return void $(e=>e.length>0?[]:e);const l=A[e];if(null==l?void 0:l.length){const e=l.map(e=>({label:e.field,value:e.field}));$(l=>l.length!==e.length||l.some((l,a)=>{var t,n;return l.value!==(null==(t=e[a])?void 0:t.value)||l.label!==(null==(n=e[a])?void 0:n.label)})?e:l)}else $(e=>e.length>0?[]:e)},[A]),O=l.useCallback(e=>{if(D){if(D.default_value!==e){const l={...D,default_value:e};N(l),W(null,null,e)}e&&(P(""),R(!1))}},[D,W]),G=l.useCallback(e=>{if(!D)return;const l=e.target.value;if(D.field_type!==l){const a={...D,field_type:l};N(a),W(null,null,null,e.target.value)}},[D,W]),J=l.useCallback(e=>{if(!D)return;const l=e.target.value;if(D.option!==l){const e={...D,option:l};N(e),W(null,null,l)}},[D,W]),K=l.useCallback(e=>{const l=e.target.value;(null==D?void 0:D.module)!==l&&(H(l),W(e))},[null==D?void 0:D.module,H,W]),Q=l.useCallback((e,l)=>{if(!D)return;const a=Array.isArray(l)?l[0]:l;if(D.custom_width!==a){const e={...D,custom_width:a};N(e),V(a)}},[D,V]),X=l.useCallback(e=>{if(!D)return;const l=e.target.checked;if(D.is_fullwidth!==l){const a={...D,is_fullwidth:l};N(a),W(e)}},[D,W]),Y=l.useCallback(e=>{const l=Number(e.target.value);M(l)},[M]),Z=l.useCallback(e=>{var l;return["number","currency","geoLocation"].includes(e.field_type)?(null==(l=e.default_value)?void 0:l.toString().replace(/[^0-9]/g,""))||"":e.default_value||""},[]),ee=l.useCallback(e=>"text"===e?{min:"Min character count (with spaces)",max:"Max character count (with spaces)"}:{min:"Min number",max:"Max number"},[]),le=l.useCallback(()=>R(!0),[]),ae=l.useCallback(()=>{R(!1),P("")},[]),te=l.useCallback(e=>{P(e.target.value)},[]);l.useEffect(()=>{T!==B.current&&(N(T),B.current=T,(null==T?void 0:T.module)&&H(T.module))},[T,H]);const ne=l.useMemo(()=>"currency"!==(null==D?void 0:D.field_type)?null:/* @__PURE__ */e.jsx(s.default,{children:/* @__PURE__ */e.jsx(c.default,{fullWidth:!0,children:/* @__PURE__ */e.jsx(d.default,{fullWidth:!0,placeholder:"Select Currency",size:"small",onChange:J,defaultValue:D.option,label:"Currency",name:"option",variant:"outlined",children:C.map((l,a)=>/* @__PURE__ */e.jsx(q,{option:l,index:a,prefix:"currency"},`currency-${a}`))})})}),[null==D?void 0:D.field_type,null==D?void 0:D.option,J]),ie=l.useMemo(()=>"time"!==(null==D?void 0:D.field_type)?null:/* @__PURE__ */e.jsx(s.default,{children:/* @__PURE__ */e.jsx(c.default,{fullWidth:!0,children:/* @__PURE__ */e.jsx(d.default,{fullWidth:!0,placeholder:"Select Time Format",size:"small",onChange:J,defaultValue:D.option,label:"Time Format",name:"option",variant:"outlined",children:y.map((l,a)=>/* @__PURE__ */e.jsx(q,{option:l,index:a,prefix:"time"},`time-${a}`))})})}),[null==D?void 0:D.field_type,null==D?void 0:D.option,J]),de=l.useMemo(()=>"relation"!==(null==D?void 0:D.field_type)?null:/* @__PURE__ */e.jsxs(e.Fragment,{children:[
-/* @__PURE__ */e.jsx(s.default,{children:/* @__PURE__ */e.jsx(c.default,{fullWidth:!0,children:/* @__PURE__ */e.jsx(d.default,{fullWidth:!0,placeholder:E.length?"Select Relation Module":"No data available",size:"small",onChange:K,value:D.module||"",label:"Relation Module",name:"module",children:E.length?E.map((l,a)=>/* @__PURE__ */e.jsx(S,{option:l,index:a,prefix:"module"},`module-${a}`)):/* @__PURE__ */e.jsx(m.default,{disabled:!0,children:/* @__PURE__ */e.jsx(n.Typography,{type:"s3",color:"theme.secondary.1000",children:/* @__PURE__ */e.jsx("em",{children:"No data available"})})})})})}),
-/* @__PURE__ */e.jsx(s.default,{children:/* @__PURE__ */e.jsx(c.default,{fullWidth:!0,children:/* @__PURE__ */e.jsx(d.default,{fullWidth:!0,placeholder:D.module?I.length?"Select Relation Field":"No data available":"Select Module First",size:"small",onChange:W,value:D.field||"",label:"Relation Field",disabled:!D.module,name:"field",children:I.length?I.map((l,a)=>/* @__PURE__ */e.jsx(S,{option:l,index:a,prefix:"field"},`field-${a}`)):/* @__PURE__ */e.jsx(m.default,{disabled:!0,children:/* @__PURE__ */e.jsx(n.Typography,{type:"s3",color:"theme.secondary.1000",children:/* @__PURE__ */e.jsx("em",{children:"No data available"})})})})})})]}),[null==D?void 0:D.field_type,null==D?void 0:D.module,null==D?void 0:D.field,E,I,K,W]);if(!D)return null;const{field_type:ue}=D,oe=ee(ue);/* @__PURE__ */
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),l=require("react"),t=,/* empty css                                          */a=,/* empty css                                        */n=,/* empty css                                                  */i=,/* empty css                                                  */d=,/* empty css                                          */u=,/* empty css                                              */o=,/* empty css                                   */r=;/* empty css                     */;/* empty css                            */var s=,/* empty css                                                    */c=,/* empty css                                                                    */m=,/* empty css                                                              */h=,/* empty css                                                          */x=,/* empty css                                                                              */f=,/* empty css                                                          */j=,/* empty css                                                                    */p=,/* empty css                                                                  */b=,/* empty css                                                            */g=,/* empty css                                                                        */v=;/* empty css                                                                        */const _=[1,2,3,4,5,6],C=[{text:"12 Hour",value:"12hr"},{text:"24 Hour",value:"24hr"}],y=[{text:"INR (India)",value:"inr"},{text:"USD (US)",value:"usd"}],k=/* @__PURE__ */new Set(["time","file","geoLocation","image","info","relation"]),F=/* @__PURE__ */new Set(["text","number"]),w=({option:l,index:t,prefix:a})=>/* @__PURE__ */e.jsx(m.default,{value:l.value,children:l.text||l.label},`${a}-${t}`),S=({option:l,index:t,prefix:a})=>/* @__PURE__ */e.jsx(m.default,{value:l.value,children:/* @__PURE__ */e.jsx(n.Typography,{type:"s3",color:"theme.secondary.1000",children:l.label})},`${a}-${t}`);function q(q){const{handlePropertyValueUpdate:T,handleColumnSelect:W,handleWidthChange:M,fields:V,element:A}=q,[D,N]=l.useState(A),[z,R]=l.useState(!1),[B,I]=l.useState([]),[$,L]=l.useState(""),P=l.useRef(A),U=l.useRef(V),E=l.useMemo(()=>V&&V!==U.current||!U.current||!V?(U.current=V,V?Object.keys(V).map(e=>({label:o.formatText(e),value:e})):[]):U.current,[V]),H=l.useCallback(e=>{if(!V||!e)return void I(e=>e.length>0?[]:e);const l=V[e];if(null==l?void 0:l.length){const e=l.map(e=>({label:e.field,value:e.field}));I(l=>l.length!==e.length||l.some((l,t)=>{var a,n;return l.value!==(null==(a=e[t])?void 0:a.value)||l.label!==(null==(n=e[t])?void 0:n.label)})?e:l)}else I(e=>e.length>0?[]:e)},[V]),O=l.useCallback(e=>{if(D){if(D.default_value!==e){const l={...D,default_value:e};N(l),T(null,null,e)}e&&(L(""),R(!1))}},[D,T]),G=l.useCallback(e=>{if(!D)return;const l=e.target.value;if(D.field_type!==l){const t={...D,field_type:l};N(t),T(null,null,null,e.target.value)}},[D,T]),J=l.useCallback(e=>{if(!D)return;const l=e.target.value;if(D.option!==l){const e={...D,option:l};N(e),T(null,null,l)}},[D,T]),K=l.useCallback(e=>{const l=e.target.value;(null==D?void 0:D.module)!==l&&(H(l),T(e))},[null==D?void 0:D.module,H,T]),Q=l.useCallback((e,l)=>{if(!D)return;const t=Array.isArray(l)?l[0]:l;if(D.custom_width!==t){const e={...D,custom_width:t};N(e),M(t)}},[D,M]),X=l.useCallback(e=>{if(!D)return;const l=e.target.checked;if(D.is_fullwidth!==l){const t={...D,is_fullwidth:l};N(t),T(e)}},[D,T]),Y=l.useCallback(e=>{const l=Number(e.target.value);W(l)},[W]),Z=l.useCallback(e=>{var l;return["number","currency","geoLocation"].includes(e.field_type)?(null==(l=e.default_value)?void 0:l.toString().replace(/[^0-9]/g,""))||"":e.default_value||""},[]),ee=l.useCallback(e=>"text"===e?{min:"Min character count (with spaces)",max:"Max character count (with spaces)"}:{min:"Min number",max:"Max number"},[]),le=l.useCallback(()=>R(!0),[]),te=l.useCallback(()=>{R(!1),L("")},[]),ae=l.useCallback(e=>{L(e.target.value)},[]);l.useEffect(()=>{A!==P.current&&(N(A),P.current=A,(null==A?void 0:A.module)&&H(A.module))},[A,H]);const ne=l.useMemo(()=>"currency"!==(null==D?void 0:D.field_type)?null:/* @__PURE__ */e.jsx(s.default,{children:/* @__PURE__ */e.jsx(c.default,{fullWidth:!0,children:/* @__PURE__ */e.jsx(d.Select,{fullWidth:!0,placeholder:"Select Currency",size:"small",onChange:J,defaultValue:D.option,label:"Currency",name:"option",variant:"outlined",children:y.map((l,t)=>/* @__PURE__ */e.jsx(w,{option:l,index:t,prefix:"currency"},`currency-${t}`))})})}),[null==D?void 0:D.field_type,null==D?void 0:D.option,J]),ie=l.useMemo(()=>"time"!==(null==D?void 0:D.field_type)?null:/* @__PURE__ */e.jsx(s.default,{children:/* @__PURE__ */e.jsx(c.default,{fullWidth:!0,children:/* @__PURE__ */e.jsx(d.Select,{fullWidth:!0,placeholder:"Select Time Format",size:"small",onChange:J,defaultValue:D.option,label:"Time Format",name:"option",variant:"outlined",children:C.map((l,t)=>/* @__PURE__ */e.jsx(w,{option:l,index:t,prefix:"time"},`time-${t}`))})})}),[null==D?void 0:D.field_type,null==D?void 0:D.option,J]),de=l.useMemo(()=>"relation"!==(null==D?void 0:D.field_type)?null:/* @__PURE__ */e.jsxs(e.Fragment,{children:[
+/* @__PURE__ */e.jsx(s.default,{children:/* @__PURE__ */e.jsx(c.default,{fullWidth:!0,children:/* @__PURE__ */e.jsx(d.Select,{fullWidth:!0,placeholder:E.length?"Select Relation Module":"No data available",size:"small",onChange:K,value:D.module||"",label:"Relation Module",name:"module",children:E.length?E.map((l,t)=>/* @__PURE__ */e.jsx(S,{option:l,index:t,prefix:"module"},`module-${t}`)):/* @__PURE__ */e.jsx(m.default,{disabled:!0,children:/* @__PURE__ */e.jsx(n.Typography,{type:"s3",color:"theme.secondary.1000",children:/* @__PURE__ */e.jsx("em",{children:"No data available"})})})})})}),
+/* @__PURE__ */e.jsx(s.default,{children:/* @__PURE__ */e.jsx(c.default,{fullWidth:!0,children:/* @__PURE__ */e.jsx(d.Select,{fullWidth:!0,placeholder:D.module?B.length?"Select Relation Field":"No data available":"Select Module First",size:"small",onChange:T,value:D.field||"",label:"Relation Field",disabled:!D.module,name:"field",children:B.length?B.map((l,t)=>/* @__PURE__ */e.jsx(S,{option:l,index:t,prefix:"field"},`field-${t}`)):/* @__PURE__ */e.jsx(m.default,{disabled:!0,children:/* @__PURE__ */e.jsx(n.Typography,{type:"s3",color:"theme.secondary.1000",children:/* @__PURE__ */e.jsx("em",{children:"No data available"})})})})})})]}),[null==D?void 0:D.field_type,null==D?void 0:D.module,null==D?void 0:D.field,E,B,K,T]);if(!D)return null;const{field_type:ue}=D,oe=ee(ue);/* @__PURE__ */
 return e.jsxs(s.default,{className:"formSection--FieldContainer",children:[
 /* @__PURE__ */e.jsx(s.default,{children:/* @__PURE__ */e.jsx(r.default,{variant:"outlined",onChange:G,defaultValue:ue,label:"Field Type",disabled:"system"===D.type||!D.is_new})}),
-/* @__PURE__ */e.jsx(s.default,{children:/* @__PURE__ */e.jsx(i.default,{fullWidth:!0,label:"Label",is_required:!0,name:"label",type:"text",onChange:W,defaultValue:D.label})}),("file"===ue||"image"===ue)&&/* @__PURE__ */e.jsx(s.default,{children:/* @__PURE__ */e.jsx(i.default,{fullWidth:!0,label:"Max File Size (in MB)",name:"max_size",type:"number",onChange:W,defaultValue:D.max_size})}),ne,!k.has(ue)&&/* @__PURE__ */e.jsxs(e.Fragment,{children:[
-/* @__PURE__ */e.jsx(s.default,{children:/* @__PURE__ */e.jsx(i.default,{fullWidth:!0,label:"Placeholder",name:"placeholder",type:"text",onChange:W,defaultValue:D.placeholder})}),
-/* @__PURE__ */e.jsx(s.default,{children:/* @__PURE__ */e.jsx(i.default,{fullWidth:!0,label:"Default Value",placeholder:"Default Value",name:"default_value",type:"phone"===ue?"tel":"number"===ue?"number":"text",onChange:W,defaultValue:Z(D)})})]}),ie,de,w.has(ue)&&/* @__PURE__ */e.jsxs(e.Fragment,{children:[
-/* @__PURE__ */e.jsx(s.default,{children:/* @__PURE__ */e.jsx(i.default,{fullWidth:!0,label:oe.min,name:"min_length",type:"number",onChange:e=>W(e,Number(e.target.value)),defaultValue:D.min_length||D.min||1})}),
-/* @__PURE__ */e.jsx(s.default,{children:/* @__PURE__ */e.jsx(i.default,{fullWidth:!0,label:oe.max,name:"max_length",type:"number",onChange:e=>W(e,Number(e.target.value)),defaultValue:D.max_length||D.max||("number"===ue?1e4:255)})})]}),
-/* @__PURE__ */e.jsx(s.default,{children:/* @__PURE__ */e.jsx(c.default,{fullWidth:!0,children:/* @__PURE__ */e.jsx(d.default,{fullWidth:!0,placeholder:"Select Column Per Row",size:"small",onChange:Y,value:D.columns_per_row||1,label:"Select Column Per Row",name:"columns_per_row",variant:"outlined",children:_.map((l,a)=>/* @__PURE__ */e.jsx(m.default,{value:l,children:l},`column-${a}`))})})}),
+/* @__PURE__ */e.jsx(s.default,{children:/* @__PURE__ */e.jsx(i.TextField,{fullWidth:!0,label:"Label",is_required:!0,name:"label",type:"text",onChange:T,defaultValue:D.label})}),("file"===ue||"image"===ue)&&/* @__PURE__ */e.jsx(s.default,{children:/* @__PURE__ */e.jsx(i.TextField,{fullWidth:!0,label:"Max File Size (in MB)",name:"max_size",type:"number",onChange:T,defaultValue:D.max_size})}),ne,!k.has(ue)&&/* @__PURE__ */e.jsxs(e.Fragment,{children:[
+/* @__PURE__ */e.jsx(s.default,{children:/* @__PURE__ */e.jsx(i.TextField,{fullWidth:!0,label:"Placeholder",name:"placeholder",type:"text",onChange:T,defaultValue:D.placeholder})}),
+/* @__PURE__ */e.jsx(s.default,{children:/* @__PURE__ */e.jsx(i.TextField,{fullWidth:!0,label:"Default Value",placeholder:"Default Value",name:"default_value",type:"phone"===ue?"tel":"number"===ue?"number":"text",onChange:T,defaultValue:Z(D)})})]}),ie,de,F.has(ue)&&/* @__PURE__ */e.jsxs(e.Fragment,{children:[
+/* @__PURE__ */e.jsx(s.default,{children:/* @__PURE__ */e.jsx(i.TextField,{fullWidth:!0,label:oe.min,name:"min_length",type:"number",onChange:e=>T(e,Number(e.target.value)),defaultValue:D.min_length||D.min||1})}),
+/* @__PURE__ */e.jsx(s.default,{children:/* @__PURE__ */e.jsx(i.TextField,{fullWidth:!0,label:oe.max,name:"max_length",type:"number",onChange:e=>T(e,Number(e.target.value)),defaultValue:D.max_length||D.max||("number"===ue?1e4:255)})})]}),
+/* @__PURE__ */e.jsx(s.default,{children:/* @__PURE__ */e.jsx(c.default,{fullWidth:!0,children:/* @__PURE__ */e.jsx(d.Select,{fullWidth:!0,placeholder:"Select Column Per Row",size:"small",onChange:Y,value:D.columns_per_row||1,label:"Select Column Per Row",name:"columns_per_row",variant:"outlined",children:_.map((l,t)=>/* @__PURE__ */e.jsx(m.default,{value:l,children:l},`column-${t}`))})})}),
 /* @__PURE__ */e.jsxs(s.default,{children:[
 /* @__PURE__ */e.jsx(n.Typography,{sx:{color:"black",mb:1},children:"Adjust Width:"}),
-/* @__PURE__ */e.jsx(f.default,{value:D.custom_width||12,name:"custom_width",min:1,max:12,step:1,onChange:Q,"aria-labelledby":"width-slider",sx:{color:"#4AC08C"},disabled:D.is_fullwidth,marks:!0,valueLabelDisplay:"auto"})]}),"number"===ue&&/* @__PURE__ */e.jsxs(e.Fragment,{children:[
-/* @__PURE__ */e.jsx(s.default,{children:/* @__PURE__ */e.jsx(i.default,{fullWidth:!0,label:"Float Step",name:"float_step",type:"number",step:"0.01",onChange:W,defaultValue:D.float_step})}),
-/* @__PURE__ */e.jsx(s.default,{children:/* @__PURE__ */e.jsx(h.default,{name:"is_negative",control:/* @__PURE__ */e.jsx(u.default,{}),onChange:W,checked:D.is_negative||!1,label:"Allow Negative Numbers"})})]}),"date"===ue&&/* @__PURE__ */e.jsxs(e.Fragment,{children:[
-/* @__PURE__ */e.jsx(s.default,{children:/* @__PURE__ */e.jsx(h.default,{name:"is_future_dates_allowed",control:/* @__PURE__ */e.jsx(u.default,{}),onChange:W,checked:D.is_future_dates_allowed||!1,label:"Allow Future Dates"})}),
-/* @__PURE__ */e.jsx(s.default,{children:/* @__PURE__ */e.jsx(h.default,{name:"is_past_dates_allowed",control:/* @__PURE__ */e.jsx(u.default,{}),onChange:W,checked:D.is_past_dates_allowed||!1,label:"Allow Past Dates"})})]}),"info"!==ue&&/* @__PURE__ */e.jsx(s.default,{children:/* @__PURE__ */e.jsx(h.default,{name:"is_required",control:/* @__PURE__ */e.jsx(u.default,{}),onChange:W,checked:D.is_required||!1,label:"This field is required"})}),"email"===ue&&/* @__PURE__ */e.jsx(s.default,{children:/* @__PURE__ */e.jsx(h.default,{name:"is_unique",control:/* @__PURE__ */e.jsx(u.default,{}),onChange:W,checked:D.is_unique||!1,label:"Is Unique"})}),"text"===ue&&/* @__PURE__ */e.jsx(s.default,{children:/* @__PURE__ */e.jsx(h.default,{name:"is_multiline",control:/* @__PURE__ */e.jsx(u.default,{}),onChange:W,checked:D.is_multiline||!1,label:"Is Multiline"})}),
-/* @__PURE__ */e.jsx(s.default,{children:/* @__PURE__ */e.jsx(h.default,{name:"is_fullwidth",control:/* @__PURE__ */e.jsx(u.default,{}),onChange:X,checked:D.is_fullwidth||!1,label:"Full Width"})}),"info"===ue&&/* @__PURE__ */e.jsx(s.default,{children:/* @__PURE__ */e.jsx(a.default,{variant:"outlined",startIcon:/* @__PURE__ */e.jsx(x.default,{}),onClick:le,className:"formSection--PreviewButton",children:"Add Function"})}),
-/* @__PURE__ */e.jsxs(t.default,{fullWidth:!0,onClose:ae,open:z,children:[
+/* @__PURE__ */e.jsx(h.default,{value:D.custom_width||12,name:"custom_width",min:1,max:12,step:1,onChange:Q,"aria-labelledby":"width-slider",sx:{color:"#4AC08C"},disabled:D.is_fullwidth,marks:!0,valueLabelDisplay:"auto"})]}),"number"===ue&&/* @__PURE__ */e.jsxs(e.Fragment,{children:[
+/* @__PURE__ */e.jsx(s.default,{children:/* @__PURE__ */e.jsx(i.TextField,{fullWidth:!0,label:"Float Step",name:"float_step",type:"number",step:"0.01",onChange:T,defaultValue:D.float_step})}),
+/* @__PURE__ */e.jsx(s.default,{children:/* @__PURE__ */e.jsx(x.default,{name:"is_negative",control:/* @__PURE__ */e.jsx(u.Checkbox,{}),onChange:T,checked:D.is_negative||!1,label:"Allow Negative Numbers"})})]}),"date"===ue&&/* @__PURE__ */e.jsxs(e.Fragment,{children:[
+/* @__PURE__ */e.jsx(s.default,{children:/* @__PURE__ */e.jsx(x.default,{name:"is_future_dates_allowed",control:/* @__PURE__ */e.jsx(u.Checkbox,{}),onChange:T,checked:D.is_future_dates_allowed||!1,label:"Allow Future Dates"})}),
+/* @__PURE__ */e.jsx(s.default,{children:/* @__PURE__ */e.jsx(x.default,{name:"is_past_dates_allowed",control:/* @__PURE__ */e.jsx(u.Checkbox,{}),onChange:T,checked:D.is_past_dates_allowed||!1,label:"Allow Past Dates"})})]}),"info"!==ue&&/* @__PURE__ */e.jsx(s.default,{children:/* @__PURE__ */e.jsx(x.default,{name:"is_required",control:/* @__PURE__ */e.jsx(u.Checkbox,{}),onChange:T,checked:D.is_required||!1,label:"This field is required"})}),"email"===ue&&/* @__PURE__ */e.jsx(s.default,{children:/* @__PURE__ */e.jsx(x.default,{name:"is_unique",control:/* @__PURE__ */e.jsx(u.Checkbox,{}),onChange:T,checked:D.is_unique||!1,label:"Is Unique"})}),"text"===ue&&/* @__PURE__ */e.jsx(s.default,{children:/* @__PURE__ */e.jsx(x.default,{name:"is_multiline",control:/* @__PURE__ */e.jsx(u.Checkbox,{}),onChange:T,checked:D.is_multiline||!1,label:"Is Multiline"})}),
+/* @__PURE__ */e.jsx(s.default,{children:/* @__PURE__ */e.jsx(x.default,{name:"is_fullwidth",control:/* @__PURE__ */e.jsx(u.Checkbox,{}),onChange:X,checked:D.is_fullwidth||!1,label:"Full Width"})}),"info"===ue&&/* @__PURE__ */e.jsx(s.default,{children:/* @__PURE__ */e.jsx(t.Button,{variant:"outlined",startIcon:/* @__PURE__ */e.jsx(f.default,{}),onClick:le,className:"formSection--PreviewButton",children:"Add Function"})}),
+/* @__PURE__ */e.jsxs(a.Modal,{fullWidth:!0,onClose:te,open:z,children:[
 /* @__PURE__ */e.jsxs(j.default,{children:[
 /* @__PURE__ */e.jsx(n.Typography,{type:"s3",weight:"medium",color:"theme.secondary.1000",children:"Add Function"}),
-/* @__PURE__ */e.jsx(p.default,{edge:"end",onClick:ae,size:"small",children:/* @__PURE__ */e.jsx(b.default,{fontSize:"inherit"})})]}),
+/* @__PURE__ */e.jsx(p.default,{edge:"end",onClick:te,size:"small",children:/* @__PURE__ */e.jsx(b.default,{fontSize:"inherit"})})]}),
 /* @__PURE__ */e.jsxs(g.default,{dividers:!0,children:[
 /* @__PURE__ */e.jsxs(n.Typography,{weight:"medium",type:"s3",color:"theme.secondary.700",sx:{mb:2},children:["Label: ",
 /* @__PURE__ */e.jsx("span",{style:{color:"#1F2125"},children:D.label})]}),
-/* @__PURE__ */e.jsx(i.default,{name:"default_value",fullWidth:!0,placeholder:"Add a function",multiline:!0,minRows:4,defaultValue:D.default_value,onChange:te,value:L})]}),
+/* @__PURE__ */e.jsx(i.TextField,{name:"default_value",fullWidth:!0,placeholder:"Add a function",multiline:!0,minRows:4,defaultValue:D.default_value,onChange:ae,value:$})]}),
 /* @__PURE__ */e.jsxs(v.default,{children:[
-/* @__PURE__ */e.jsx(a.default,{variant:"outlined",onClick:ae,style:{color:"black"},children:"Cancel"}),
-/* @__PURE__ */e.jsx(a.default,{onClick:()=>O(L),children:"Save"})]})]})]})}exports.TextEditForm=F,exports.default=F;
+/* @__PURE__ */e.jsx(t.Button,{variant:"outlined",onClick:te,style:{color:"black"},children:"Cancel"}),
+/* @__PURE__ */e.jsx(t.Button,{onClick:()=>O($),children:"Save"})]})]})]})}exports.TextEditForm=q,exports.default=q;
 //# sourceMappingURL=index.js.map

package/dist/views/form-builder/element-edit-forms/text/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/views/form-builder/element-edit-forms/text.tsx"],"sourcesContent":["// React imports\r\nimport { useCallback, useEffect, useState, useMemo, useRef } from \"react\";\r\n\r\n// Material UI imports\r\nimport {\r\n  DialogActions,\r\n  DialogContent,\r\n  DialogTitle,\r\n  IconButton,\r\n  MenuItem,\r\n  Box,\r\n  FormControlLabel,\r\n  FormControl,\r\n  Slider,\r\n} from \"@mui/material\";\r\nimport { Add, Close } from \"@mui/icons-material\";\r\n\r\n// ERP Common imports\r\nimport Button from \"@/components/button/button\";\r\nimport Modal from \"@/components/modal/modal\";\r\nimport Typography from \"@/components/typography/typography\";\r\nimport TextField from \"@/components/text-field/text-field\";\r\nimport Select from \"@/components/select/select\";\r\nimport Checkbox from \"@/components/checkbox/checkbox\";\r\nimport formatText from \"@/utils/format-text\";\r\n\r\n// Local imports\r\nimport FieldSelect from \"./field-select\";\r\nimport { IElementJson } from \"../custom-form\";\r\nimport { ApiFormFields } from \"../../Redux/state\";\r\nimport \"../custom-form.scss\";\r\n\r\ninterface Option {\r\n  label: string;\r\n  value: string;\r\n}\r\n\r\ninterface ITextEditFormProps {\r\n  handleWidthChange: (value?: number) => void;\r\n  handleColumnSelect: (value?: number) => void;\r\n  handlePropertyValueUpdate: (\r\n    event?: React.ChangeEvent<HTMLInputElement>,\r\n    numberValue?: number,\r\n    value?: any,\r\n    fieldType?: string,\r\n  ) => void;\r\n  element: IElementJson | null;\r\n  fields: ApiFormFields | null;\r\n}\r\n\r\n// Constants moved outside to prevent re-creation\r\nconst COLUMN_PER_ROW_OPTIONS = [1, 2, 3, 4, 5, 6] as const;\r\nconst SELECT_OPTIONS = [\r\n  { text: \"12 Hour\", value: \"12hr\" },\r\n  { text: \"24 Hour\", value: \"24hr\" },\r\n] as const;\r\nconst CURRENCY_OPTIONS = [\r\n  { text: \"INR (India)\", value: \"inr\" },\r\n  { text: \"USD (US)\", value: \"usd\" },\r\n] as const;\r\n\r\nconst FIELDS_WITHOUT_PLACEHOLDER = new Set([\r\n  \"time\", \"file\", \"geoLocation\", \"image\", \"info\", \"relation\"\r\n]);\r\nconst FIELDS_WITH_MIN_MAX = new Set([\"text\", \"number\"]);\r\n\r\n// Memoized components to prevent unnecessary re-renders\r\nconst MemoizedMenuItem = ({ option, index, prefix }: { option: any; index: number; prefix: string }) => (\r\n  <MenuItem key={`${prefix}-${index}`} value={option.value}>\r\n    {option.text || option.label}\r\n  </MenuItem>\r\n);\r\n\r\nconst MemoizedRelationMenuItem = ({ option, index, prefix }: { option: Option; index: number; prefix: string }) => (\r\n  <MenuItem key={`${prefix}-${index}`} value={option.value}>\r\n    <Typography type=\"s3\" color=\"theme.secondary.1000\">\r\n      {option.label}\r\n    </Typography>\r\n  </MenuItem>\r\n);\r\n\r\nexport function TextEditForm(props: ITextEditFormProps) {\r\n  const { \r\n    handlePropertyValueUpdate, \r\n    handleColumnSelect, \r\n    handleWidthChange, \r\n    fields, \r\n    element \r\n  } = props;\r\n\r\n  // State management - optimized to prevent unnecessary re-renders\r\n  const [elementJSON, setElementJSON] = useState<IElementJson | null>(element);\r\n  const [openModal, setOpenModal] = useState(false);\r\n  const [relationFields, setRelationFields] = useState<Option[]>([]);\r\n  const [functionValue, setFunctionValue] = useState(\"\");\r\n  \r\n  // Use refs to track previous values and prevent unnecessary updates\r\n  const prevElementRef = useRef<IElementJson | null>(element);\r\n  const prevFieldsRef = useRef<ApiFormFields | null>(fields);\r\n\r\n  // Memoized relation modules with deep comparison prevention\r\n  const relationModulesOptions = useMemo(() => {\r\n    if (!fields || fields === prevFieldsRef.current) {\r\n      if (prevFieldsRef.current && fields) return prevFieldsRef.current;\r\n    }\r\n    \r\n    prevFieldsRef.current = fields;\r\n    \r\n    if (!fields) return [];\r\n    return Object.keys(fields).map((key) => ({\r\n      label: formatText(key),\r\n      value: key,\r\n    }));\r\n  }, [fields]);\r\n\r\n  // Optimized relation fields setter with memoization\r\n  const setRelationFieldsOptions = useCallback(\r\n    (moduleValue?: string) => {\r\n      if (!fields || !moduleValue) {\r\n        setRelationFields(prev => prev.length > 0 ? [] : prev);\r\n        return;\r\n      }\r\n\r\n      const fieldsArr = fields[moduleValue];\r\n      if (fieldsArr?.length) {\r\n        const options = fieldsArr.map((field) => ({\r\n          label: field.field,\r\n          value: field.field,\r\n        }));\r\n        \r\n        // Only update if options actually changed\r\n        setRelationFields(prev => {\r\n          if (prev.length !== options.length) return options;\r\n          const isDifferent = prev.some((item, idx) => \r\n            item.value !== options[idx]?.value || item.label !== options[idx]?.label\r\n          );\r\n          return isDifferent ? options : prev;\r\n        });\r\n      } else {\r\n        setRelationFields(prev => prev.length > 0 ? [] : prev);\r\n      }\r\n    },\r\n    [fields]\r\n  );\r\n\r\n  // Memoized event handlers to prevent child re-renders\r\n  const handleSave = useCallback((value: string) => {\r\n    if (!elementJSON) return;\r\n    \r\n    // Only update if value actually changed\r\n    if (elementJSON.default_value !== value) {\r\n      const updatedElement = { ...elementJSON, default_value: value };\r\n      setElementJSON(updatedElement);\r\n      handlePropertyValueUpdate(null, null, value);\r\n    }\r\n    \r\n    if (value) {\r\n      setFunctionValue(\"\");\r\n      setOpenModal(false);\r\n    }\r\n  }, [elementJSON, handlePropertyValueUpdate]);\r\n\r\n  const handleFieldUpdate = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {\r\n    if (!elementJSON) return;\r\n    \r\n    const fieldType = e.target.value;\r\n    if (elementJSON.field_type !== fieldType) {\r\n      const updatedElement = { ...elementJSON, field_type: fieldType };\r\n      setElementJSON(updatedElement);\r\n      handlePropertyValueUpdate(null, null, null, e.target.value);\r\n    }\r\n  }, [elementJSON, handlePropertyValueUpdate]);\r\n\r\n  const handleSelectUpdate = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {\r\n    if (!elementJSON) return;\r\n    \r\n    const option = e.target.value;\r\n    if (elementJSON.option !== option) {\r\n      const updatedElement = { ...elementJSON, option };\r\n      setElementJSON(updatedElement);\r\n      handlePropertyValueUpdate(null, null, option);\r\n    }\r\n  }, [elementJSON, handlePropertyValueUpdate]);\r\n\r\n  const handleModuleSelect = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {\r\n    const moduleValue = e.target.value;\r\n    if (elementJSON?.module !== moduleValue) {\r\n      setRelationFieldsOptions(moduleValue);\r\n      handlePropertyValueUpdate(e);\r\n    }\r\n  }, [elementJSON?.module, setRelationFieldsOptions, handlePropertyValueUpdate]);\r\n\r\n  const handleWidthSliderChange = useCallback((_: Event, value: number | number[]) => {\r\n    if (!elementJSON) return;\r\n    \r\n    const widthValue = Array.isArray(value) ? value[0] : value;\r\n    if (elementJSON.custom_width !== widthValue) {\r\n      const updatedElement = { ...elementJSON, custom_width: widthValue };\r\n      setElementJSON(updatedElement);\r\n      handleWidthChange(widthValue);\r\n    }\r\n  }, [elementJSON, handleWidthChange]);\r\n\r\n  const handleFullWidthChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {\r\n    if (!elementJSON) return;\r\n    \r\n    const isFullWidth = e.target.checked;\r\n    if (elementJSON.is_fullwidth !== isFullWidth) {\r\n      const updatedElement = { ...elementJSON, is_fullwidth: isFullWidth };\r\n      setElementJSON(updatedElement);\r\n      handlePropertyValueUpdate(e);\r\n    }\r\n  }, [elementJSON, handlePropertyValueUpdate]);\r\n\r\n  const handleColumnSelectChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {\r\n    const columnValue = Number(e.target.value);\r\n    handleColumnSelect(columnValue);\r\n  }, [handleColumnSelect]);\r\n\r\n  // Memoized helper functions\r\n  const getDefaultValue = useCallback((elementJSON: IElementJson) => {\r\n    if ([\"number\", \"currency\", \"geoLocation\"].includes(elementJSON.field_type)) {\r\n      return elementJSON.default_value?.toString().replace(/[^0-9]/g, \"\") || \"\";\r\n    }\r\n    return elementJSON.default_value || \"\";\r\n  }, []);\r\n\r\n  const getMinMaxLabels = useCallback((fieldType: string) => {\r\n    return fieldType === \"text\" \r\n      ? { min: \"Min character count (with spaces)\", max: \"Max character count (with spaces)\" }\r\n      : { min: \"Min number\", max: \"Max number\" };\r\n  }, []);\r\n\r\n  // Modal handlers\r\n  const handleOpenModal = useCallback(() => setOpenModal(true), []);\r\n  const handleCloseModal = useCallback(() => {\r\n    setOpenModal(false);\r\n    setFunctionValue(\"\");\r\n  }, []);\r\n\r\n  const handleFunctionValueChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {\r\n    setFunctionValue(e.target.value);\r\n  }, []);\r\n\r\n  // Optimized effects with proper dependency arrays\r\n  useEffect(() => {\r\n    // Only update if element actually changed\r\n    if (element !== prevElementRef.current) {\r\n      setElementJSON(element);\r\n      prevElementRef.current = element;\r\n      \r\n      if (element?.module) {\r\n        setRelationFieldsOptions(element.module);\r\n      }\r\n    }\r\n  }, [element, setRelationFieldsOptions]);\r\n\r\n  // Memoized render sections to prevent unnecessary re-computation\r\n  const currencySelectSection = useMemo(() => {\r\n    if (elementJSON?.field_type !== \"currency\") return null;\r\n    \r\n    return (\r\n      <Box>\r\n        <FormControl fullWidth>\r\n          <Select\r\n            fullWidth\r\n            placeholder=\"Select Currency\"\r\n            size=\"small\"\r\n            onChange={handleSelectUpdate}\r\n            defaultValue={elementJSON.option}\r\n            label=\"Currency\"\r\n            name=\"option\"\r\n            variant=\"outlined\"\r\n          >\r\n            {CURRENCY_OPTIONS.map((option, index) => (\r\n              <MemoizedMenuItem \r\n                key={`currency-${index}`}\r\n                option={option} \r\n                index={index} \r\n                prefix=\"currency\" \r\n              />\r\n            ))}\r\n          </Select>\r\n        </FormControl>\r\n      </Box>\r\n    );\r\n  }, [elementJSON?.field_type, elementJSON?.option, handleSelectUpdate]);\r\n\r\n  const timeSelectSection = useMemo(() => {\r\n    if (elementJSON?.field_type !== \"time\") return null;\r\n    \r\n    return (\r\n      <Box>\r\n        <FormControl fullWidth>\r\n          <Select\r\n            fullWidth\r\n            placeholder=\"Select Time Format\"\r\n            size=\"small\"\r\n            onChange={handleSelectUpdate}\r\n            defaultValue={elementJSON.option}\r\n            label=\"Time Format\"\r\n            name=\"option\"\r\n            variant=\"outlined\"\r\n          >\r\n            {SELECT_OPTIONS.map((option, index) => (\r\n              <MemoizedMenuItem \r\n                key={`time-${index}`}\r\n                option={option} \r\n                index={index} \r\n                prefix=\"time\" \r\n              />\r\n            ))}\r\n          </Select>\r\n        </FormControl>\r\n      </Box>\r\n    );\r\n  }, [elementJSON?.field_type, elementJSON?.option, handleSelectUpdate]);\r\n\r\n  const relationSelectSection = useMemo(() => {\r\n    if (elementJSON?.field_type !== \"relation\") return null;\r\n    \r\n    return (\r\n      <>\r\n        <Box>\r\n          <FormControl fullWidth>\r\n            <Select\r\n              fullWidth\r\n              placeholder={\r\n                relationModulesOptions.length\r\n                  ? \"Select Relation Module\"\r\n                  : \"No data available\"\r\n              }\r\n              size=\"small\"\r\n              onChange={handleModuleSelect}\r\n              value={elementJSON.module || \"\"}\r\n              label=\"Relation Module\"\r\n              name=\"module\"\r\n            >\r\n              {relationModulesOptions.length ? (\r\n                relationModulesOptions.map((option, index) => (\r\n                  <MemoizedRelationMenuItem \r\n                    key={`module-${index}`}\r\n                    option={option} \r\n                    index={index} \r\n                    prefix=\"module\" \r\n                  />\r\n                ))\r\n              ) : (\r\n                <MenuItem disabled>\r\n                  <Typography type=\"s3\" color=\"theme.secondary.1000\">\r\n                    <em>No data available</em>\r\n                  </Typography>\r\n                </MenuItem>\r\n              )}\r\n            </Select>\r\n          </FormControl>\r\n        </Box>\r\n\r\n        <Box>\r\n          <FormControl fullWidth>\r\n            <Select\r\n              fullWidth\r\n              placeholder={\r\n                !elementJSON.module\r\n                  ? \"Select Module First\"\r\n                  : relationFields.length\r\n                  ? \"Select Relation Field\"\r\n                  : \"No data available\"\r\n              }\r\n              size=\"small\"\r\n              onChange={handlePropertyValueUpdate}\r\n              value={elementJSON.field || \"\"}\r\n              label=\"Relation Field\"\r\n              disabled={!elementJSON.module}\r\n              name=\"field\"\r\n            >\r\n              {relationFields.length ? (\r\n                relationFields.map((option, index) => (\r\n                  <MemoizedRelationMenuItem \r\n                    key={`field-${index}`}\r\n                    option={option} \r\n                    index={index} \r\n                    prefix=\"field\" \r\n                  />\r\n                ))\r\n              ) : (\r\n                <MenuItem disabled>\r\n                  <Typography type=\"s3\" color=\"theme.secondary.1000\">\r\n                    <em>No data available</em>\r\n                  </Typography>\r\n                </MenuItem>\r\n              )}\r\n            </Select>\r\n          </FormControl>\r\n        </Box>\r\n      </>\r\n    );\r\n  }, [\r\n    elementJSON?.field_type, \r\n    elementJSON?.module, \r\n    elementJSON?.field,\r\n    relationModulesOptions, \r\n    relationFields, \r\n    handleModuleSelect, \r\n    handlePropertyValueUpdate\r\n  ]);\r\n\r\n  // Early return if no element\r\n  if (!elementJSON) {\r\n    return null;\r\n  }\r\n\r\n  const { field_type } = elementJSON;\r\n  const minMaxLabels = getMinMaxLabels(field_type);\r\n\r\n  return (\r\n    <Box className=\"formSection--FieldContainer\">\r\n      {/* Field Type Selection */}\r\n      <Box>\r\n        <FieldSelect\r\n          variant=\"outlined\"\r\n          onChange={handleFieldUpdate}\r\n          defaultValue={field_type}\r\n          label=\"Field Type\"\r\n          disabled={elementJSON.type === \"system\" || !elementJSON.is_new}\r\n        />\r\n      </Box>\r\n\r\n      {/* Label Field */}\r\n      <Box>\r\n        <TextField\r\n          fullWidth\r\n          label=\"Label\"\r\n          is_required\r\n          name=\"label\"\r\n          type=\"text\"\r\n          onChange={handlePropertyValueUpdate}\r\n          defaultValue={elementJSON.label}\r\n        />\r\n      </Box>\r\n\r\n      {/* File/Image Max Size */}\r\n      {(field_type === \"file\" || field_type === \"image\") && (\r\n        <Box>\r\n          <TextField\r\n            fullWidth\r\n            label=\"Max File Size (in MB)\"\r\n            name=\"max_size\"\r\n            type=\"number\"\r\n            onChange={handlePropertyValueUpdate}\r\n            defaultValue={elementJSON.max_size}\r\n          />\r\n        </Box>\r\n      )}\r\n\r\n      {/* Currency Selection - Memoized */}\r\n      {currencySelectSection}\r\n\r\n      {/* Placeholder and Default Value */}\r\n      {!FIELDS_WITHOUT_PLACEHOLDER.has(field_type) && (\r\n        <>\r\n          <Box>\r\n            <TextField\r\n              fullWidth\r\n              label=\"Placeholder\"\r\n              name=\"placeholder\"\r\n              type=\"text\"\r\n              onChange={handlePropertyValueUpdate}\r\n              defaultValue={elementJSON.placeholder}\r\n            />\r\n          </Box>\r\n          <Box>\r\n            <TextField\r\n              fullWidth\r\n              label=\"Default Value\"\r\n              placeholder=\"Default Value\"\r\n              name=\"default_value\"\r\n              type={field_type === \"phone\" ? \"tel\" : field_type === \"number\" ? \"number\" : \"text\"}\r\n              onChange={handlePropertyValueUpdate}\r\n              defaultValue={getDefaultValue(elementJSON)}\r\n            />\r\n          </Box>\r\n        </>\r\n      )}\r\n\r\n      {/* Time Format Selection - Memoized */}\r\n      {timeSelectSection}\r\n\r\n      {/* Relation Module and Field Selection - Memoized */}\r\n      {relationSelectSection}\r\n\r\n      {/* Min/Max Length for Text and Number Fields */}\r\n      {FIELDS_WITH_MIN_MAX.has(field_type) && (\r\n        <>\r\n          <Box>\r\n            <TextField\r\n              fullWidth\r\n              label={minMaxLabels.min}\r\n              name=\"min_length\"\r\n              type=\"number\"\r\n              onChange={(e) => handlePropertyValueUpdate(e, Number(e.target.value))}\r\n              defaultValue={elementJSON.min_length || elementJSON.min || 1}\r\n            />\r\n          </Box>\r\n          <Box>\r\n            <TextField\r\n              fullWidth\r\n              label={minMaxLabels.max}\r\n              name=\"max_length\"\r\n              type=\"number\"\r\n              onChange={(e) => handlePropertyValueUpdate(e, Number(e.target.value))}\r\n              defaultValue={\r\n                elementJSON.max_length || \r\n                elementJSON.max || \r\n                (field_type === 'number' ? 10000 : 255)\r\n              }\r\n            />\r\n          </Box>\r\n        </>\r\n      )}\r\n\r\n      {/* Column Per Row Selection */}\r\n      <Box>\r\n        <FormControl fullWidth>\r\n          <Select\r\n            fullWidth\r\n            placeholder=\"Select Column Per Row\"\r\n            size=\"small\"\r\n            onChange={handleColumnSelectChange}\r\n            value={elementJSON.columns_per_row || 1}\r\n            label=\"Select Column Per Row\"\r\n            name=\"columns_per_row\"\r\n            variant=\"outlined\"\r\n          >\r\n            {COLUMN_PER_ROW_OPTIONS.map((option, index) => (\r\n              <MenuItem key={`column-${index}`} value={option}>\r\n                {option}\r\n              </MenuItem>\r\n            ))}\r\n          </Select>\r\n        </FormControl>\r\n      </Box>\r\n\r\n      {/* Width Adjustment Slider */}\r\n      <Box>\r\n        <Typography sx={{ color: 'black', mb: 1 }}>\r\n          Adjust Width:\r\n        </Typography>\r\n        <Slider\r\n          value={elementJSON.custom_width || 12}\r\n          name=\"custom_width\"\r\n          min={1}\r\n          max={12}\r\n          step={1}\r\n          onChange={handleWidthSliderChange}\r\n          aria-labelledby=\"width-slider\"\r\n          sx={{ color: \"#4AC08C\" }}\r\n          disabled={elementJSON.is_fullwidth}\r\n          marks\r\n          valueLabelDisplay=\"auto\"\r\n        />\r\n      </Box>\r\n\r\n      {/* Number Field Specific Options */}\r\n      {field_type === \"number\" && (\r\n        <>\r\n          <Box>\r\n            <TextField\r\n              fullWidth\r\n              label=\"Float Step\"\r\n              name=\"float_step\"\r\n              type=\"number\"\r\n              step=\"0.01\"\r\n              onChange={handlePropertyValueUpdate}\r\n              defaultValue={elementJSON.float_step}\r\n            />\r\n          </Box>\r\n          <Box>\r\n            <FormControlLabel\r\n              name=\"is_negative\"\r\n              control={<Checkbox />}\r\n              onChange={handlePropertyValueUpdate}\r\n              checked={elementJSON.is_negative || false}\r\n              label=\"Allow Negative Numbers\"\r\n            />\r\n          </Box>\r\n        </>\r\n      )}\r\n\r\n      {/* Date Field Specific Options */}\r\n      {field_type === \"date\" && (\r\n        <>\r\n          <Box>\r\n            <FormControlLabel\r\n              name=\"is_future_dates_allowed\"\r\n              control={<Checkbox />}\r\n              onChange={handlePropertyValueUpdate}\r\n              checked={elementJSON.is_future_dates_allowed || false}\r\n              label=\"Allow Future Dates\"\r\n            />\r\n          </Box>\r\n          <Box>\r\n            <FormControlLabel\r\n              name=\"is_past_dates_allowed\"\r\n              control={<Checkbox />}\r\n              onChange={handlePropertyValueUpdate}\r\n              checked={elementJSON.is_past_dates_allowed || false}\r\n              label=\"Allow Past Dates\"\r\n            />\r\n          </Box>\r\n        </>\r\n      )}\r\n\r\n      {/* Required Field Checkbox */}\r\n      {field_type !== \"info\" && (\r\n        <Box>\r\n          <FormControlLabel\r\n            name=\"is_required\"\r\n            control={<Checkbox />}\r\n            onChange={handlePropertyValueUpdate}\r\n            checked={elementJSON.is_required || false}\r\n            label=\"This field is required\"\r\n          />\r\n        </Box>\r\n      )}\r\n\r\n      {/* Email Unique Checkbox */}\r\n      {field_type === \"email\" && (\r\n        <Box>\r\n          <FormControlLabel\r\n            name=\"is_unique\"\r\n            control={<Checkbox />}\r\n            onChange={handlePropertyValueUpdate}\r\n            checked={elementJSON.is_unique || false}\r\n            label=\"Is Unique\"\r\n          />\r\n        </Box>\r\n      )}\r\n\r\n      {/* Text Multiline Checkbox */}\r\n      {field_type === \"text\" && (\r\n        <Box>\r\n          <FormControlLabel\r\n            name=\"is_multiline\"\r\n            control={<Checkbox />}\r\n            onChange={handlePropertyValueUpdate}\r\n            checked={elementJSON.is_multiline || false}\r\n            label=\"Is Multiline\"\r\n          />\r\n        </Box>\r\n      )}\r\n\r\n      {/* Full Width Checkbox */}\r\n      <Box>\r\n        <FormControlLabel\r\n          name=\"is_fullwidth\"\r\n          control={<Checkbox />}\r\n          onChange={handleFullWidthChange}\r\n          checked={elementJSON.is_fullwidth || false}\r\n          label=\"Full Width\"\r\n        />\r\n      </Box>\r\n\r\n      {/* Info Field Function Button */}\r\n      {field_type === \"info\" && (\r\n        <Box>\r\n          <Button\r\n            variant=\"outlined\"\r\n            startIcon={<Add />}\r\n            onClick={handleOpenModal}\r\n            className=\"formSection--PreviewButton\"\r\n          >\r\n            Add Function\r\n          </Button>\r\n        </Box>\r\n      )}\r\n\r\n      {/* Function Modal */}\r\n      <Modal fullWidth onClose={handleCloseModal} open={openModal}>\r\n        <DialogTitle>\r\n          <Typography type=\"s3\" weight=\"medium\" color=\"theme.secondary.1000\">\r\n            Add Function\r\n          </Typography>\r\n          <IconButton\r\n            edge=\"end\"\r\n            onClick={handleCloseModal}\r\n            size=\"small\"\r\n          >\r\n            <Close fontSize=\"inherit\" />\r\n          </IconButton>\r\n        </DialogTitle>\r\n        <DialogContent dividers>\r\n          <Typography weight=\"medium\" type=\"s3\" color=\"theme.secondary.700\" sx={{ mb: 2 }}>\r\n            Label: <span style={{ color: \"#1F2125\" }}>{elementJSON.label}</span>\r\n          </Typography>\r\n          <TextField\r\n            name=\"default_value\"\r\n            fullWidth\r\n            placeholder=\"Add a function\"\r\n            multiline\r\n            minRows={4}\r\n            defaultValue={elementJSON.default_value}\r\n            onChange={handleFunctionValueChange}\r\n            value={functionValue}\r\n          />\r\n        </DialogContent>\r\n        <DialogActions>\r\n          <Button\r\n            variant=\"outlined\"\r\n            onClick={handleCloseModal}\r\n            style={{ color: \"black\" }}\r\n          >\r\n            Cancel\r\n          </Button>\r\n          <Button onClick={() => handleSave(functionValue)}>\r\n            Save\r\n          </Button>\r\n        </DialogActions>\r\n      </Modal>\r\n    </Box>\r\n  );\r\n}\r\n\r\nexport default TextEditForm;"],"names":["COLUMN_PER_ROW_OPTIONS","SELECT_OPTIONS","text","value","CURRENCY_OPTIONS","FIELDS_WITHOUT_PLACEHOLDER","Set","FIELDS_WITH_MIN_MAX","MemoizedMenuItem","option","index","prefix","MenuItem","children","label","MemoizedRelationMenuItem","jsx","Typography","type","color","TextEditForm","props","handlePropertyValueUpdate","handleColumnSelect","handleWidthChange","fields","element","elementJSON","setElementJSON","useState","openModal","setOpenModal","relationFields","setRelationFields","functionValue","setFunctionValue","prevElementRef","useRef","prevFieldsRef","relationModulesOptions","useMemo","current","Object","keys","map","key","formatText","setRelationFieldsOptions","useCallback","moduleValue","prev","length","fieldsArr","options","field","some","item","idx","_a","_b","handleSave","default_value","updatedElement","handleFieldUpdate","e","fieldType","target","field_type","handleSelectUpdate","handleModuleSelect","module","handleWidthSliderChange","_","widthValue","Array","isArray","custom_width","handleFullWidthChange","isFullWidth","checked","is_fullwidth","handleColumnSelectChange","columnValue","Number","getDefaultValue","includes","toString","replace","getMinMaxLabels","min","max","handleOpenModal","handleCloseModal","handleFunctionValueChange","useEffect","currencySelectSection","Box","FormControl","fullWidth","Select","placeholder","size","onChange","defaultValue","name","variant","timeSelectSection","relationSelectSection","jsxs","Fragment","disabled","minMaxLabels","className","FieldSelect","is_new","TextField","is_required","max_size","has","min_length","max_length","columns_per_row","sx","mb","Slider","step","marks","valueLabelDisplay","float_step","FormControlLabel","control","Checkbox","is_negative","is_future_dates_allowed","is_past_dates_allowed","is_unique","is_multiline","Button","startIcon","Add","onClick","Modal","onClose","open","DialogTitle","weight","IconButton","edge","Close","fontSize","DialogContent","dividers","style","multiline","minRows","DialogActions"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../../src/views/form-builder/element-edit-forms/text.tsx"],"sourcesContent":["// React imports\r\nimport { useCallback, useEffect, useState, useMemo, useRef } from \"react\";\r\n\r\n// Material UI imports\r\nimport {\r\n  DialogActions,\r\n  DialogContent,\r\n  DialogTitle,\r\n  IconButton,\r\n  MenuItem,\r\n  Box,\r\n  FormControlLabel,\r\n  FormControl,\r\n  Slider,\r\n} from \"@mui/material\";\r\nimport { Add, Close } from \"@mui/icons-material\";\r\n\r\n// ERP Common imports\r\nimport Button from \"@/components/button/button\";\r\nimport Modal from \"@/components/modal/modal\";\r\nimport Typography from \"@/components/typography/typography\";\r\nimport TextField from \"@/components/text-field/text-field\";\r\nimport Select from \"@/components/select/select\";\r\nimport Checkbox from \"@/components/checkbox/checkbox\";\r\nimport formatText from \"@/utils/format-text\";\r\n\r\n// Local imports\r\nimport FieldSelect from \"./field-select\";\r\nimport { IElementJson } from \"../custom-form\";\r\nimport { ApiFormFields } from \"../../Redux/state\";\r\nimport \"../custom-form.scss\";\r\n\r\ninterface Option {\r\n  label: string;\r\n  value: string;\r\n}\r\n\r\ninterface ITextEditFormProps {\r\n  handleWidthChange: (value?: number) => void;\r\n  handleColumnSelect: (value?: number) => void;\r\n  handlePropertyValueUpdate: (\r\n    event?: React.ChangeEvent<HTMLInputElement>,\r\n    numberValue?: number,\r\n    value?: any,\r\n    fieldType?: string,\r\n  ) => void;\r\n  element: IElementJson | null;\r\n  fields: ApiFormFields | null;\r\n}\r\n\r\n// Constants moved outside to prevent re-creation\r\nconst COLUMN_PER_ROW_OPTIONS = [1, 2, 3, 4, 5, 6] as const;\r\nconst SELECT_OPTIONS = [\r\n  { text: \"12 Hour\", value: \"12hr\" },\r\n  { text: \"24 Hour\", value: \"24hr\" },\r\n] as const;\r\nconst CURRENCY_OPTIONS = [\r\n  { text: \"INR (India)\", value: \"inr\" },\r\n  { text: \"USD (US)\", value: \"usd\" },\r\n] as const;\r\n\r\nconst FIELDS_WITHOUT_PLACEHOLDER = new Set([\r\n  \"time\", \"file\", \"geoLocation\", \"image\", \"info\", \"relation\"\r\n]);\r\nconst FIELDS_WITH_MIN_MAX = new Set([\"text\", \"number\"]);\r\n\r\n// Memoized components to prevent unnecessary re-renders\r\nconst MemoizedMenuItem = ({ option, index, prefix }: { option: any; index: number; prefix: string }) => (\r\n  <MenuItem key={`${prefix}-${index}`} value={option.value}>\r\n    {option.text || option.label}\r\n  </MenuItem>\r\n);\r\n\r\nconst MemoizedRelationMenuItem = ({ option, index, prefix }: { option: Option; index: number; prefix: string }) => (\r\n  <MenuItem key={`${prefix}-${index}`} value={option.value}>\r\n    <Typography type=\"s3\" color=\"theme.secondary.1000\">\r\n      {option.label}\r\n    </Typography>\r\n  </MenuItem>\r\n);\r\n\r\nexport function TextEditForm(props: ITextEditFormProps) {\r\n  const { \r\n    handlePropertyValueUpdate, \r\n    handleColumnSelect, \r\n    handleWidthChange, \r\n    fields, \r\n    element \r\n  } = props;\r\n\r\n  // State management - optimized to prevent unnecessary re-renders\r\n  const [elementJSON, setElementJSON] = useState<IElementJson | null>(element);\r\n  const [openModal, setOpenModal] = useState(false);\r\n  const [relationFields, setRelationFields] = useState<Option[]>([]);\r\n  const [functionValue, setFunctionValue] = useState(\"\");\r\n  \r\n  // Use refs to track previous values and prevent unnecessary updates\r\n  const prevElementRef = useRef<IElementJson | null>(element);\r\n  const prevFieldsRef = useRef<ApiFormFields | null>(fields);\r\n\r\n  // Memoized relation modules with deep comparison prevention\r\n  const relationModulesOptions = useMemo(() => {\r\n    if (!fields || fields === prevFieldsRef.current) {\r\n      if (prevFieldsRef.current && fields) return prevFieldsRef.current;\r\n    }\r\n    \r\n    prevFieldsRef.current = fields;\r\n    \r\n    if (!fields) return [];\r\n    return Object.keys(fields).map((key) => ({\r\n      label: formatText(key),\r\n      value: key,\r\n    }));\r\n  }, [fields]);\r\n\r\n  // Optimized relation fields setter with memoization\r\n  const setRelationFieldsOptions = useCallback(\r\n    (moduleValue?: string) => {\r\n      if (!fields || !moduleValue) {\r\n        setRelationFields(prev => prev.length > 0 ? [] : prev);\r\n        return;\r\n      }\r\n\r\n      const fieldsArr = fields[moduleValue];\r\n      if (fieldsArr?.length) {\r\n        const options = fieldsArr.map((field) => ({\r\n          label: field.field,\r\n          value: field.field,\r\n        }));\r\n        \r\n        // Only update if options actually changed\r\n        setRelationFields(prev => {\r\n          if (prev.length !== options.length) return options;\r\n          const isDifferent = prev.some((item, idx) => \r\n            item.value !== options[idx]?.value || item.label !== options[idx]?.label\r\n          );\r\n          return isDifferent ? options : prev;\r\n        });\r\n      } else {\r\n        setRelationFields(prev => prev.length > 0 ? [] : prev);\r\n      }\r\n    },\r\n    [fields]\r\n  );\r\n\r\n  // Memoized event handlers to prevent child re-renders\r\n  const handleSave = useCallback((value: string) => {\r\n    if (!elementJSON) return;\r\n    \r\n    // Only update if value actually changed\r\n    if (elementJSON.default_value !== value) {\r\n      const updatedElement = { ...elementJSON, default_value: value };\r\n      setElementJSON(updatedElement);\r\n      handlePropertyValueUpdate(null, null, value);\r\n    }\r\n    \r\n    if (value) {\r\n      setFunctionValue(\"\");\r\n      setOpenModal(false);\r\n    }\r\n  }, [elementJSON, handlePropertyValueUpdate]);\r\n\r\n  const handleFieldUpdate = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {\r\n    if (!elementJSON) return;\r\n    \r\n    const fieldType = e.target.value;\r\n    if (elementJSON.field_type !== fieldType) {\r\n      const updatedElement = { ...elementJSON, field_type: fieldType };\r\n      setElementJSON(updatedElement);\r\n      handlePropertyValueUpdate(null, null, null, e.target.value);\r\n    }\r\n  }, [elementJSON, handlePropertyValueUpdate]);\r\n\r\n  const handleSelectUpdate = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {\r\n    if (!elementJSON) return;\r\n    \r\n    const option = e.target.value;\r\n    if (elementJSON.option !== option) {\r\n      const updatedElement = { ...elementJSON, option };\r\n      setElementJSON(updatedElement);\r\n      handlePropertyValueUpdate(null, null, option);\r\n    }\r\n  }, [elementJSON, handlePropertyValueUpdate]);\r\n\r\n  const handleModuleSelect = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {\r\n    const moduleValue = e.target.value;\r\n    if (elementJSON?.module !== moduleValue) {\r\n      setRelationFieldsOptions(moduleValue);\r\n      handlePropertyValueUpdate(e);\r\n    }\r\n  }, [elementJSON?.module, setRelationFieldsOptions, handlePropertyValueUpdate]);\r\n\r\n  const handleWidthSliderChange = useCallback((_: Event, value: number | number[]) => {\r\n    if (!elementJSON) return;\r\n    \r\n    const widthValue = Array.isArray(value) ? value[0] : value;\r\n    if (elementJSON.custom_width !== widthValue) {\r\n      const updatedElement = { ...elementJSON, custom_width: widthValue };\r\n      setElementJSON(updatedElement);\r\n      handleWidthChange(widthValue);\r\n    }\r\n  }, [elementJSON, handleWidthChange]);\r\n\r\n  const handleFullWidthChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {\r\n    if (!elementJSON) return;\r\n    \r\n    const isFullWidth = e.target.checked;\r\n    if (elementJSON.is_fullwidth !== isFullWidth) {\r\n      const updatedElement = { ...elementJSON, is_fullwidth: isFullWidth };\r\n      setElementJSON(updatedElement);\r\n      handlePropertyValueUpdate(e);\r\n    }\r\n  }, [elementJSON, handlePropertyValueUpdate]);\r\n\r\n  const handleColumnSelectChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {\r\n    const columnValue = Number(e.target.value);\r\n    handleColumnSelect(columnValue);\r\n  }, [handleColumnSelect]);\r\n\r\n  // Memoized helper functions\r\n  const getDefaultValue = useCallback((elementJSON: IElementJson) => {\r\n    if ([\"number\", \"currency\", \"geoLocation\"].includes(elementJSON.field_type)) {\r\n      return elementJSON.default_value?.toString().replace(/[^0-9]/g, \"\") || \"\";\r\n    }\r\n    return elementJSON.default_value || \"\";\r\n  }, []);\r\n\r\n  const getMinMaxLabels = useCallback((fieldType: string) => {\r\n    return fieldType === \"text\" \r\n      ? { min: \"Min character count (with spaces)\", max: \"Max character count (with spaces)\" }\r\n      : { min: \"Min number\", max: \"Max number\" };\r\n  }, []);\r\n\r\n  // Modal handlers\r\n  const handleOpenModal = useCallback(() => setOpenModal(true), []);\r\n  const handleCloseModal = useCallback(() => {\r\n    setOpenModal(false);\r\n    setFunctionValue(\"\");\r\n  }, []);\r\n\r\n  const handleFunctionValueChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {\r\n    setFunctionValue(e.target.value);\r\n  }, []);\r\n\r\n  // Optimized effects with proper dependency arrays\r\n  useEffect(() => {\r\n    // Only update if element actually changed\r\n    if (element !== prevElementRef.current) {\r\n      setElementJSON(element);\r\n      prevElementRef.current = element;\r\n      \r\n      if (element?.module) {\r\n        setRelationFieldsOptions(element.module);\r\n      }\r\n    }\r\n  }, [element, setRelationFieldsOptions]);\r\n\r\n  // Memoized render sections to prevent unnecessary re-computation\r\n  const currencySelectSection = useMemo(() => {\r\n    if (elementJSON?.field_type !== \"currency\") return null;\r\n    \r\n    return (\r\n      <Box>\r\n        <FormControl fullWidth>\r\n          <Select\r\n            fullWidth\r\n            placeholder=\"Select Currency\"\r\n            size=\"small\"\r\n            onChange={handleSelectUpdate}\r\n            defaultValue={elementJSON.option}\r\n            label=\"Currency\"\r\n            name=\"option\"\r\n            variant=\"outlined\"\r\n          >\r\n            {CURRENCY_OPTIONS.map((option, index) => (\r\n              <MemoizedMenuItem \r\n                key={`currency-${index}`}\r\n                option={option} \r\n                index={index} \r\n                prefix=\"currency\" \r\n              />\r\n            ))}\r\n          </Select>\r\n        </FormControl>\r\n      </Box>\r\n    );\r\n  }, [elementJSON?.field_type, elementJSON?.option, handleSelectUpdate]);\r\n\r\n  const timeSelectSection = useMemo(() => {\r\n    if (elementJSON?.field_type !== \"time\") return null;\r\n    \r\n    return (\r\n      <Box>\r\n        <FormControl fullWidth>\r\n          <Select\r\n            fullWidth\r\n            placeholder=\"Select Time Format\"\r\n            size=\"small\"\r\n            onChange={handleSelectUpdate}\r\n            defaultValue={elementJSON.option}\r\n            label=\"Time Format\"\r\n            name=\"option\"\r\n            variant=\"outlined\"\r\n          >\r\n            {SELECT_OPTIONS.map((option, index) => (\r\n              <MemoizedMenuItem \r\n                key={`time-${index}`}\r\n                option={option} \r\n                index={index} \r\n                prefix=\"time\" \r\n              />\r\n            ))}\r\n          </Select>\r\n        </FormControl>\r\n      </Box>\r\n    );\r\n  }, [elementJSON?.field_type, elementJSON?.option, handleSelectUpdate]);\r\n\r\n  const relationSelectSection = useMemo(() => {\r\n    if (elementJSON?.field_type !== \"relation\") return null;\r\n    \r\n    return (\r\n      <>\r\n        <Box>\r\n          <FormControl fullWidth>\r\n            <Select\r\n              fullWidth\r\n              placeholder={\r\n                relationModulesOptions.length\r\n                  ? \"Select Relation Module\"\r\n                  : \"No data available\"\r\n              }\r\n              size=\"small\"\r\n              onChange={handleModuleSelect}\r\n              value={elementJSON.module || \"\"}\r\n              label=\"Relation Module\"\r\n              name=\"module\"\r\n            >\r\n              {relationModulesOptions.length ? (\r\n                relationModulesOptions.map((option, index) => (\r\n                  <MemoizedRelationMenuItem \r\n                    key={`module-${index}`}\r\n                    option={option} \r\n                    index={index} \r\n                    prefix=\"module\" \r\n                  />\r\n                ))\r\n              ) : (\r\n                <MenuItem disabled>\r\n                  <Typography type=\"s3\" color=\"theme.secondary.1000\">\r\n                    <em>No data available</em>\r\n                  </Typography>\r\n                </MenuItem>\r\n              )}\r\n            </Select>\r\n          </FormControl>\r\n        </Box>\r\n\r\n        <Box>\r\n          <FormControl fullWidth>\r\n            <Select\r\n              fullWidth\r\n              placeholder={\r\n                !elementJSON.module\r\n                  ? \"Select Module First\"\r\n                  : relationFields.length\r\n                  ? \"Select Relation Field\"\r\n                  : \"No data available\"\r\n              }\r\n              size=\"small\"\r\n              onChange={handlePropertyValueUpdate}\r\n              value={elementJSON.field || \"\"}\r\n              label=\"Relation Field\"\r\n              disabled={!elementJSON.module}\r\n              name=\"field\"\r\n            >\r\n              {relationFields.length ? (\r\n                relationFields.map((option, index) => (\r\n                  <MemoizedRelationMenuItem \r\n                    key={`field-${index}`}\r\n                    option={option} \r\n                    index={index} \r\n                    prefix=\"field\" \r\n                  />\r\n                ))\r\n              ) : (\r\n                <MenuItem disabled>\r\n                  <Typography type=\"s3\" color=\"theme.secondary.1000\">\r\n                    <em>No data available</em>\r\n                  </Typography>\r\n                </MenuItem>\r\n              )}\r\n            </Select>\r\n          </FormControl>\r\n        </Box>\r\n      </>\r\n    );\r\n  }, [\r\n    elementJSON?.field_type, \r\n    elementJSON?.module, \r\n    elementJSON?.field,\r\n    relationModulesOptions, \r\n    relationFields, \r\n    handleModuleSelect, \r\n    handlePropertyValueUpdate\r\n  ]);\r\n\r\n  // Early return if no element\r\n  if (!elementJSON) {\r\n    return null;\r\n  }\r\n\r\n  const { field_type } = elementJSON;\r\n  const minMaxLabels = getMinMaxLabels(field_type);\r\n\r\n  return (\r\n    <Box className=\"formSection--FieldContainer\">\r\n      {/* Field Type Selection */}\r\n      <Box>\r\n        <FieldSelect\r\n          variant=\"outlined\"\r\n          onChange={handleFieldUpdate}\r\n          defaultValue={field_type}\r\n          label=\"Field Type\"\r\n          disabled={elementJSON.type === \"system\" || !elementJSON.is_new}\r\n        />\r\n      </Box>\r\n\r\n      {/* Label Field */}\r\n      <Box>\r\n        <TextField\r\n          fullWidth\r\n          label=\"Label\"\r\n          is_required\r\n          name=\"label\"\r\n          type=\"text\"\r\n          onChange={handlePropertyValueUpdate}\r\n          defaultValue={elementJSON.label}\r\n        />\r\n      </Box>\r\n\r\n      {/* File/Image Max Size */}\r\n      {(field_type === \"file\" || field_type === \"image\") && (\r\n        <Box>\r\n          <TextField\r\n            fullWidth\r\n            label=\"Max File Size (in MB)\"\r\n            name=\"max_size\"\r\n            type=\"number\"\r\n            onChange={handlePropertyValueUpdate}\r\n            defaultValue={elementJSON.max_size}\r\n          />\r\n        </Box>\r\n      )}\r\n\r\n      {/* Currency Selection - Memoized */}\r\n      {currencySelectSection}\r\n\r\n      {/* Placeholder and Default Value */}\r\n      {!FIELDS_WITHOUT_PLACEHOLDER.has(field_type) && (\r\n        <>\r\n          <Box>\r\n            <TextField\r\n              fullWidth\r\n              label=\"Placeholder\"\r\n              name=\"placeholder\"\r\n              type=\"text\"\r\n              onChange={handlePropertyValueUpdate}\r\n              defaultValue={elementJSON.placeholder}\r\n            />\r\n          </Box>\r\n          <Box>\r\n            <TextField\r\n              fullWidth\r\n              label=\"Default Value\"\r\n              placeholder=\"Default Value\"\r\n              name=\"default_value\"\r\n              type={field_type === \"phone\" ? \"tel\" : field_type === \"number\" ? \"number\" : \"text\"}\r\n              onChange={handlePropertyValueUpdate}\r\n              defaultValue={getDefaultValue(elementJSON)}\r\n            />\r\n          </Box>\r\n        </>\r\n      )}\r\n\r\n      {/* Time Format Selection - Memoized */}\r\n      {timeSelectSection}\r\n\r\n      {/* Relation Module and Field Selection - Memoized */}\r\n      {relationSelectSection}\r\n\r\n      {/* Min/Max Length for Text and Number Fields */}\r\n      {FIELDS_WITH_MIN_MAX.has(field_type) && (\r\n        <>\r\n          <Box>\r\n            <TextField\r\n              fullWidth\r\n              label={minMaxLabels.min}\r\n              name=\"min_length\"\r\n              type=\"number\"\r\n              onChange={(e) => handlePropertyValueUpdate(e, Number(e.target.value))}\r\n              defaultValue={elementJSON.min_length || elementJSON.min || 1}\r\n            />\r\n          </Box>\r\n          <Box>\r\n            <TextField\r\n              fullWidth\r\n              label={minMaxLabels.max}\r\n              name=\"max_length\"\r\n              type=\"number\"\r\n              onChange={(e) => handlePropertyValueUpdate(e, Number(e.target.value))}\r\n              defaultValue={\r\n                elementJSON.max_length || \r\n                elementJSON.max || \r\n                (field_type === 'number' ? 10000 : 255)\r\n              }\r\n            />\r\n          </Box>\r\n        </>\r\n      )}\r\n\r\n      {/* Column Per Row Selection */}\r\n      <Box>\r\n        <FormControl fullWidth>\r\n          <Select\r\n            fullWidth\r\n            placeholder=\"Select Column Per Row\"\r\n            size=\"small\"\r\n            onChange={handleColumnSelectChange}\r\n            value={elementJSON.columns_per_row || 1}\r\n            label=\"Select Column Per Row\"\r\n            name=\"columns_per_row\"\r\n            variant=\"outlined\"\r\n          >\r\n            {COLUMN_PER_ROW_OPTIONS.map((option, index) => (\r\n              <MenuItem key={`column-${index}`} value={option}>\r\n                {option}\r\n              </MenuItem>\r\n            ))}\r\n          </Select>\r\n        </FormControl>\r\n      </Box>\r\n\r\n      {/* Width Adjustment Slider */}\r\n      <Box>\r\n        <Typography sx={{ color: 'black', mb: 1 }}>\r\n          Adjust Width:\r\n        </Typography>\r\n        <Slider\r\n          value={elementJSON.custom_width || 12}\r\n          name=\"custom_width\"\r\n          min={1}\r\n          max={12}\r\n          step={1}\r\n          onChange={handleWidthSliderChange}\r\n          aria-labelledby=\"width-slider\"\r\n          sx={{ color: \"#4AC08C\" }}\r\n          disabled={elementJSON.is_fullwidth}\r\n          marks\r\n          valueLabelDisplay=\"auto\"\r\n        />\r\n      </Box>\r\n\r\n      {/* Number Field Specific Options */}\r\n      {field_type === \"number\" && (\r\n        <>\r\n          <Box>\r\n            <TextField\r\n              fullWidth\r\n              label=\"Float Step\"\r\n              name=\"float_step\"\r\n              type=\"number\"\r\n              step=\"0.01\"\r\n              onChange={handlePropertyValueUpdate}\r\n              defaultValue={elementJSON.float_step}\r\n            />\r\n          </Box>\r\n          <Box>\r\n            <FormControlLabel\r\n              name=\"is_negative\"\r\n              control={<Checkbox />}\r\n              onChange={handlePropertyValueUpdate}\r\n              checked={elementJSON.is_negative || false}\r\n              label=\"Allow Negative Numbers\"\r\n            />\r\n          </Box>\r\n        </>\r\n      )}\r\n\r\n      {/* Date Field Specific Options */}\r\n      {field_type === \"date\" && (\r\n        <>\r\n          <Box>\r\n            <FormControlLabel\r\n              name=\"is_future_dates_allowed\"\r\n              control={<Checkbox />}\r\n              onChange={handlePropertyValueUpdate}\r\n              checked={elementJSON.is_future_dates_allowed || false}\r\n              label=\"Allow Future Dates\"\r\n            />\r\n          </Box>\r\n          <Box>\r\n            <FormControlLabel\r\n              name=\"is_past_dates_allowed\"\r\n              control={<Checkbox />}\r\n              onChange={handlePropertyValueUpdate}\r\n              checked={elementJSON.is_past_dates_allowed || false}\r\n              label=\"Allow Past Dates\"\r\n            />\r\n          </Box>\r\n        </>\r\n      )}\r\n\r\n      {/* Required Field Checkbox */}\r\n      {field_type !== \"info\" && (\r\n        <Box>\r\n          <FormControlLabel\r\n            name=\"is_required\"\r\n            control={<Checkbox />}\r\n            onChange={handlePropertyValueUpdate}\r\n            checked={elementJSON.is_required || false}\r\n            label=\"This field is required\"\r\n          />\r\n        </Box>\r\n      )}\r\n\r\n      {/* Email Unique Checkbox */}\r\n      {field_type === \"email\" && (\r\n        <Box>\r\n          <FormControlLabel\r\n            name=\"is_unique\"\r\n            control={<Checkbox />}\r\n            onChange={handlePropertyValueUpdate}\r\n            checked={elementJSON.is_unique || false}\r\n            label=\"Is Unique\"\r\n          />\r\n        </Box>\r\n      )}\r\n\r\n      {/* Text Multiline Checkbox */}\r\n      {field_type === \"text\" && (\r\n        <Box>\r\n          <FormControlLabel\r\n            name=\"is_multiline\"\r\n            control={<Checkbox />}\r\n            onChange={handlePropertyValueUpdate}\r\n            checked={elementJSON.is_multiline || false}\r\n            label=\"Is Multiline\"\r\n          />\r\n        </Box>\r\n      )}\r\n\r\n      {/* Full Width Checkbox */}\r\n      <Box>\r\n        <FormControlLabel\r\n          name=\"is_fullwidth\"\r\n          control={<Checkbox />}\r\n          onChange={handleFullWidthChange}\r\n          checked={elementJSON.is_fullwidth || false}\r\n          label=\"Full Width\"\r\n        />\r\n      </Box>\r\n\r\n      {/* Info Field Function Button */}\r\n      {field_type === \"info\" && (\r\n        <Box>\r\n          <Button\r\n            variant=\"outlined\"\r\n            startIcon={<Add />}\r\n            onClick={handleOpenModal}\r\n            className=\"formSection--PreviewButton\"\r\n          >\r\n            Add Function\r\n          </Button>\r\n        </Box>\r\n      )}\r\n\r\n      {/* Function Modal */}\r\n      <Modal fullWidth onClose={handleCloseModal} open={openModal}>\r\n        <DialogTitle>\r\n          <Typography type=\"s3\" weight=\"medium\" color=\"theme.secondary.1000\">\r\n            Add Function\r\n          </Typography>\r\n          <IconButton\r\n            edge=\"end\"\r\n            onClick={handleCloseModal}\r\n            size=\"small\"\r\n          >\r\n            <Close fontSize=\"inherit\" />\r\n          </IconButton>\r\n        </DialogTitle>\r\n        <DialogContent dividers>\r\n          <Typography weight=\"medium\" type=\"s3\" color=\"theme.secondary.700\" sx={{ mb: 2 }}>\r\n            Label: <span style={{ color: \"#1F2125\" }}>{elementJSON.label}</span>\r\n          </Typography>\r\n          <TextField\r\n            name=\"default_value\"\r\n            fullWidth\r\n            placeholder=\"Add a function\"\r\n            multiline\r\n            minRows={4}\r\n            defaultValue={elementJSON.default_value}\r\n            onChange={handleFunctionValueChange}\r\n            value={functionValue}\r\n          />\r\n        </DialogContent>\r\n        <DialogActions>\r\n          <Button\r\n            variant=\"outlined\"\r\n            onClick={handleCloseModal}\r\n            style={{ color: \"black\" }}\r\n          >\r\n            Cancel\r\n          </Button>\r\n          <Button onClick={() => handleSave(functionValue)}>\r\n            Save\r\n          </Button>\r\n        </DialogActions>\r\n      </Modal>\r\n    </Box>\r\n  );\r\n}\r\n\r\nexport default TextEditForm;"],"names":["COLUMN_PER_ROW_OPTIONS","SELECT_OPTIONS","text","value","CURRENCY_OPTIONS","FIELDS_WITHOUT_PLACEHOLDER","Set","FIELDS_WITH_MIN_MAX","MemoizedMenuItem","option","index","prefix","MenuItem","children","label","MemoizedRelationMenuItem","jsx","Typography","type","color","TextEditForm","props","handlePropertyValueUpdate","handleColumnSelect","handleWidthChange","fields","element","elementJSON","setElementJSON","useState","openModal","setOpenModal","relationFields","setRelationFields","functionValue","setFunctionValue","prevElementRef","useRef","prevFieldsRef","relationModulesOptions","useMemo","current","Object","keys","map","key","formatText","setRelationFieldsOptions","useCallback","moduleValue","prev","length","fieldsArr","options","field","some","item","idx","_a","_b","handleSave","default_value","updatedElement","handleFieldUpdate","e","fieldType","target","field_type","handleSelectUpdate","handleModuleSelect","module","handleWidthSliderChange","_","widthValue","Array","isArray","custom_width","handleFullWidthChange","isFullWidth","checked","is_fullwidth","handleColumnSelectChange","columnValue","Number","getDefaultValue","includes","toString","replace","getMinMaxLabels","min","max","handleOpenModal","handleCloseModal","handleFunctionValueChange","useEffect","currencySelectSection","Box","FormControl","fullWidth","Select","placeholder","size","onChange","defaultValue","name","variant","timeSelectSection","relationSelectSection","jsxs","Fragment","disabled","minMaxLabels","className","FieldSelect","is_new","TextField","is_required","max_size","has","min_length","max_length","columns_per_row","sx","mb","Slider","step","marks","valueLabelDisplay","float_step","FormControlLabel","control","Checkbox","is_negative","is_future_dates_allowed","is_past_dates_allowed","is_unique","is_multiline","Button","startIcon","Add","onClick","Modal","onClose","open","DialogTitle","weight","IconButton","edge","Close","fontSize","DialogContent","dividers","style","multiline","minRows","DialogActions"],"mappings":"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"}

package/dist/views/form-builder/form-fields/index.esm.js

@@ -1,17 +1,17 @@
 import { jsx, Fragment, jsxs } from "react/jsx-runtime";
 import { memo, useCallback, useMemo } from "react";
-import DynamicInput from "../../../components/form-control/form-builder/form-builder-element/text/index.esm.js";
+import { DynamicInput } from "../../../components/form-control/form-builder/form-builder-element/text/index.esm.js";
 import DynamicCheckBox from "../../../components/form-control/form-builder/form-builder-element/checkbox/index.esm.js";
 import DynamicTable from "../../../components/form-control/form-builder/form-builder-element/table/index.esm.js";
-import DynamicElementHOC from "../../../components/form-control/form-builder/form-builder-element/dynamic-element-hoc/index.esm.js";
+import { DynamicElementHOC } from "../../../components/form-control/form-builder/form-builder-element/dynamic-element-hoc/index.esm.js";
 import DynamicRadioButton from "../../../components/form-control/form-builder/form-builder-element/radio-button/index.esm.js";
 import DynamicToggleButton from "../../../components/form-control/form-builder/form-builder-element/toggle-button/index.esm.js";
-import DynamicInfo from "../../../components/form-control/form-builder/form-builder-element/info/index.esm.js";
-import DynamicMedia from "../../../components/form-control/form-builder/form-builder-element/media/index.esm.js";
-import DynamicTime from "../../../components/form-control/form-builder/form-builder-element/time/index.esm.js";
-import DynamicDate from "../../../components/form-control/form-builder/form-builder-element/date/index.esm.js";
-import DynamicSelect from "../../../components/form-control/form-builder/form-builder-element/select/index.esm.js";
-import DynamicPhone from "../../../components/form-control/form-builder/form-builder-element/phone/index.esm.js";
+import { DynamicInfo } from "../../../components/form-control/form-builder/form-builder-element/info/index.esm.js";
+import { DynamicMedia } from "../../../components/form-control/form-builder/form-builder-element/media/index.esm.js";
+import { DynamicTime } from "../../../components/form-control/form-builder/form-builder-element/time/index.esm.js";
+import { DynamicDate } from "../../../components/form-control/form-builder/form-builder-element/date/index.esm.js";
+import { DynamicSelect } from "../../../components/form-control/form-builder/form-builder-element/select/index.esm.js";
+import { DynamicPhone } from "../../../components/form-control/form-builder/form-builder-element/phone/index.esm.js";
 import Grid from "../../../node_modules/@mui/material/Grid/Grid/index.esm.js";
 const FormField = memo(({
   field,
@@ -349,6 +349,7 @@ const FormFields = memo(({
 });
 FormFields.displayName = "FormFields";
 export {
+  FormField,
   FormFields as default
 };
 //# sourceMappingURL=index.esm.js.map