@aatulwork/customform-renderer 1.8.0 → 1.10.0

package/dist/index.d.ts

@@ -1,159 +1,14 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import React$1 from 'react';
-
-/**
- * Core types for Custom Form Renderer
- */
-interface OptionItem {
-    label: string;
-    value: string | number;
-    icon?: string;
-    group?: string;
-}
-type FieldType = 'text' | 'email' | 'number' | 'select' | 'checkbox' | 'radio' | 'datepicker' | 'file' | 'ckeditor' | 'toggle' | 'color' | 'formReference' | 'apiReference';
-interface FieldValidation {
-    min?: number;
-    max?: number;
-    pattern?: string;
-    maxFileSize?: number;
-    allowedFileTypes?: string[];
-}
-interface FormField {
-    type: FieldType;
-    label: string;
-    name: string;
-    required?: boolean;
-    placeholder?: string;
-    allowFilter?: boolean;
-    options?: OptionItem[] | string[];
-    validation?: FieldValidation;
-    referenceFormName?: string;
-    referenceFieldName?: string;
-    apiEndpoint?: string;
-    referenceModel?: string;
-    apiLabelField?: string;
-    apiValueField?: string;
-    allowMultiple?: boolean;
-    datePickerMode?: 'date' | 'datetime' | 'time';
-    /** @deprecated Use datePickerMode instead */
-    displayTime?: boolean;
-}
-interface FormSection {
-    id: string;
-    title: string;
-    description?: string;
-    fields: FormField[];
-}
-interface FormSchema {
-    _id?: string;
-    id?: string;
-    title: string;
-    name: string;
-    module?: string | null;
-    formType?: 'system' | 'custom';
-    collectionName?: string;
-    sections?: FormSection[];
-    fields?: FormField[];
-    settings?: {
-        sectionDisplayMode?: 'panel' | 'stepper';
-        fieldsPerRow?: number;
-        [key: string]: any;
-    };
-    createdAt?: string;
-    updatedAt?: string;
-}
-interface FormRendererProps {
-    formSchema: FormSchema;
-    onSubmit?: (data: Record<string, any>) => void | Promise<void>;
-    onCancel?: () => void;
-    isLoading?: boolean;
-    onSuccess?: () => void;
-    initialValues?: Record<string, any>;
-    hideTitle?: boolean;
-    allowResetOnValuesChange?: boolean;
-    mode?: 'edit' | 'view';
-    services?: FormServices;
-    colors?: FormColors;
-}
-interface FormServices {
-    fileUpload?: FileUploadService;
-    formReference?: FormReferenceService;
-    apiReference?: ApiReferenceService;
-    dateFormatter?: DateFormatterService;
-    SelectComponent?: React.ComponentType<any>;
-    FileDisplayComponent?: React.ComponentType<{
-        fieldValue: any;
-    }>;
-    CKEditorDisplayComponent?: React.ComponentType<{
-        content: string;
-        maxLength?: number;
-        showViewButton?: boolean;
-    }>;
-    fileBaseUrl?: string;
-    ckEditorLicenseKey?: string;
-    ckEditorScriptPath?: string;
-}
-interface FileUploadService {
-    uploadFiles: (formName: string, fieldName: string, files: File[]) => Promise<UploadedFile[]>;
-}
-interface UploadedFile {
-    _id?: string;
-    fileName: string;
-    originalName?: string;
-    fileUrl: string;
-    size?: number;
-    mimeType?: string;
-    [key: string]: any;
-}
-interface FormReferenceService {
-    fetchOptions: (formName: string, fieldName: string) => Promise<OptionItem[]>;
-}
-interface ApiReferenceService {
-    fetchOptions: (endpoint: string, labelField: string, valueField?: string) => Promise<OptionItem[]>;
-}
-interface DateFormatterService {
-    format: (value: any, options?: {
-        datePickerMode?: 'date' | 'datetime' | 'time';
-    }) => string;
-}
-interface FormColors {
-    primary?: string;
-    secondary?: string;
-    error?: string;
-    success?: string;
-    warning?: string;
-    info?: string;
-    textPrimary?: string;
-    textSecondary?: string;
-    divider?: string;
-    background?: string;
-    backgroundPaper?: string;
-}
-interface FieldRendererProps {
-    field: FormField;
-    control: any;
-    defaultValue: any;
-    rules: any;
-    errors: any;
-    setValue: any;
-    formSchema?: FormSchema;
-    uploadingFiles?: Record<string, boolean>;
-    setUploadingFiles?: React.Dispatch<React.SetStateAction<Record<string, boolean>>>;
-    setError?: (name: string, error: {
-        type: string;
-        message: string;
-    }) => void;
-    clearErrors?: (name?: string) => void;
-    services?: FormServices;
-    colors?: FormColors;
-}
+import { F as FormRendererProps, a as FieldRendererProps, b as FormSchema, c as FormServices, d as FormColors, e as FormField, A as ApiReferenceService, D as DateFormatterService, f as FileUploadService, g as FormReferenceService } from './fields-BM8DDh8m.js';
+export { h as ApiReferenceField, C as CKEditorField, i as CheckboxField, j as ColorField, k as DateTimePickerField, l as FieldType, m as FieldValidation, n as FileField, o as FormReferenceField, p as FormSection, O as OptionItem, R as RadioField, S as SelectField, T as TextField, q as ToggleField, U as UploadedFile } from './fields-BM8DDh8m.js';
+import React from 'react';
 
 declare const FormRenderer: ({ formSchema, onSubmit, onCancel, isLoading, onSuccess, initialValues, hideTitle, allowResetOnValuesChange, mode, services, colors, }: FormRendererProps) => react_jsx_runtime.JSX.Element;
 
 interface FieldRendererComponentProps extends Omit<FieldRendererProps, 'defaultValue' | 'rules'> {
     formSchema: any;
     uploadingFiles: Record<string, boolean>;
-    setUploadingFiles: React$1.Dispatch<React$1.SetStateAction<Record<string, boolean>>>;
+    setUploadingFiles: React.Dispatch<React.SetStateAction<Record<string, boolean>>>;
     setError: (name: string, error: {
         type: string;
         message: string;
@@ -178,41 +33,6 @@ interface FieldViewProps {
 }
 declare const FieldView: ({ field, value, services }: FieldViewProps) => react_jsx_runtime.JSX.Element;
 
-declare const TextField: ({ field, control, defaultValue, rules, errors }: FieldRendererProps) => react_jsx_runtime.JSX.Element;
-
-declare const SelectField: ({ field, control, defaultValue, rules, errors, services }: FieldRendererProps) => react_jsx_runtime.JSX.Element;
-
-declare const CheckboxField: ({ field, control, defaultValue, rules }: FieldRendererProps) => react_jsx_runtime.JSX.Element;
-
-declare const RadioField: ({ field, control, defaultValue, rules, errors }: FieldRendererProps) => react_jsx_runtime.JSX.Element;
-
-declare const ToggleField: ({ field, control, defaultValue, rules, errors }: FieldRendererProps) => react_jsx_runtime.JSX.Element;
-
-declare const ColorField: ({ field, control, defaultValue, rules, errors }: FieldRendererProps) => react_jsx_runtime.JSX.Element;
-
-declare const DateTimePickerField: ({ field, control, defaultValue, rules, errors }: FieldRendererProps) => react_jsx_runtime.JSX.Element;
-
-declare global {
-    interface Window {
-        ClassicEditor: any;
-    }
-}
-declare const CKEditorField: ({ field, control, defaultValue, rules, errors, setValue, formSchema, services, colors }: FieldRendererProps) => react_jsx_runtime.JSX.Element;
-
-interface FileFieldProps extends FieldRendererProps {
-    uploadingFiles?: Record<string, boolean>;
-    setUploadingFiles?: React$1.Dispatch<React$1.SetStateAction<Record<string, boolean>>>;
-    setError?: (name: string, error: {
-        type: string;
-        message: string;
-    }) => void;
-    clearErrors?: (name?: string) => void;
-}
-declare const FileField: ({ field, control, defaultValue, rules, errors, formSchema, uploadingFiles, setUploadingFiles, setError, clearErrors, services, colors, }: FileFieldProps) => react_jsx_runtime.JSX.Element;
-
-declare const FormReferenceField: ({ field, control, defaultValue, rules, errors, services }: FieldRendererProps) => react_jsx_runtime.JSX.Element;
-declare const ApiReferenceField: ({ field, control, defaultValue, rules, errors, services }: FieldRendererProps) => react_jsx_runtime.JSX.Element;
-
 interface SimpleSelectOption {
     value: string | number;
     label: string;
@@ -231,8 +51,12 @@ interface SimpleSelectProps {
     disabled?: boolean;
     multiple?: boolean;
     isLoading?: boolean;
+    filterable?: boolean;
+    filterPlaceholder?: string;
+    refreshable?: boolean;
+    onRefresh?: () => void;
 }
-declare const SimpleSelect: React$1.FC<SimpleSelectProps>;
+declare const SimpleSelect: React.FC<SimpleSelectProps>;
 
 /**
  * Get all fields from form schema (sections or legacy fields)
@@ -365,4 +189,4 @@ declare const defaultApiReferenceService: ApiReferenceService;
  */
 declare const defaultDateFormatterService: DateFormatterService;
 
-export { ApiReferenceField, type ApiReferenceService, CKEditorField, CheckboxField, ColorField, type DateFormatterService, DateTimePickerField, FieldRenderer, type FieldRendererProps, type FieldType, type FieldValidation, FieldView, FileField, type FileUploadService, type FormColors, type FormField, FormReferenceField, type FormReferenceService, FormRenderer, type FormRendererProps, type FormSchema, type FormSection, type FormServices, FormViewMode, type OptionItem, RadioField, SelectField, SimpleSelect, type SimpleSelectOption, type SimpleSelectProps, TextField, ToggleField, type UploadedFile, buildFieldRules, defaultApiReferenceService, defaultDateFormatterService, defaultFileUploadService, defaultFormReferenceService, formatFileSize, getAllFields, getDefaultValue, isCKEditorAvailable, loadCKEditor, normalizeInitialValues, normalizeOptions, transformFormValues, useCKEditor, validateFile, waitForCKEditor };
+export { ApiReferenceService, DateFormatterService, FieldRenderer, FieldRendererProps, FieldView, FileUploadService, FormColors, FormField, FormReferenceService, FormRenderer, FormRendererProps, FormSchema, FormServices, FormViewMode, SimpleSelect, type SimpleSelectOption, type SimpleSelectProps, buildFieldRules, defaultApiReferenceService, defaultDateFormatterService, defaultFileUploadService, defaultFormReferenceService, formatFileSize, getAllFields, getDefaultValue, isCKEditorAvailable, loadCKEditor, normalizeInitialValues, normalizeOptions, transformFormValues, useCKEditor, validateFile, waitForCKEditor };

package/dist/index.js

@@ -8,6 +8,7 @@ var DoubleArrowOutlinedIcon = require('@mui/icons-material/DoubleArrowOutlined')
 var ArrowForwardIcon = require('@mui/icons-material/ArrowForward');
 var ArrowBackIcon = require('@mui/icons-material/ArrowBack');
 var jsxRuntime = require('react/jsx-runtime');
+var RefreshIcon = require('@mui/icons-material/Refresh');
 var ckeditor5React = require('@ckeditor/ckeditor5-react');
 var dayjs2 = require('dayjs');
 var CloseIcon = require('@mui/icons-material/Close');
@@ -25,6 +26,7 @@ var ExpandMoreIcon__default = /*#__PURE__*/_interopDefault(ExpandMoreIcon);
 var DoubleArrowOutlinedIcon__default = /*#__PURE__*/_interopDefault(DoubleArrowOutlinedIcon);
 var ArrowForwardIcon__default = /*#__PURE__*/_interopDefault(ArrowForwardIcon);
 var ArrowBackIcon__default = /*#__PURE__*/_interopDefault(ArrowBackIcon);
+var RefreshIcon__default = /*#__PURE__*/_interopDefault(RefreshIcon);
 var dayjs2__default = /*#__PURE__*/_interopDefault(dayjs2);
 var CloseIcon__default = /*#__PURE__*/_interopDefault(CloseIcon);
 var CloudUploadIcon__default = /*#__PURE__*/_interopDefault(CloudUploadIcon);
@@ -284,23 +286,57 @@ var SimpleSelect = ({
   error = false,
   disabled = false,
   multiple = false,
-  isLoading = false
+  isLoading = false,
+  filterable = true,
+  filterPlaceholder = "Filter...",
+  refreshable = false,
+  onRefresh
 }) => {
+  const [filterText, setFilterText] = react.useState("");
   const handleChange = (event) => {
     const val = event.target.value;
+    if (val === "__refresh__") {
+      onRefresh?.();
+      return;
+    }
     onChange(val);
   };
+  const filteredOptions = filterable && filterText ? options.filter(
+    (opt) => String(opt.label).toLowerCase().includes(filterText.toLowerCase())
+  ) : options;
+  const handleFilterChange = (e) => {
+    setFilterText(e.target.value);
+  };
+  const handleClose = () => {
+    setFilterText("");
+  };
   return /* @__PURE__ */ jsxRuntime.jsxs(material.FormControl, { fullWidth, size, required, error, disabled, children: [
     /* @__PURE__ */ jsxRuntime.jsx(material.InputLabel, { children: label }),
-    /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.jsxs(
       material.Select,
       {
         value: value ?? (multiple ? [] : ""),
         onChange: handleChange,
+        onClose: handleClose,
         input: /* @__PURE__ */ jsxRuntime.jsx(material.OutlinedInput, { label }),
+        MenuProps: {
+          autoFocus: false
+        },
         multiple,
         disabled: disabled || isLoading,
-        endAdornment: isLoading ? /* @__PURE__ */ jsxRuntime.jsx(material.CircularProgress, { size: 20 }) : void 0,
+        endAdornment: isLoading ? /* @__PURE__ */ jsxRuntime.jsx(material.CircularProgress, { size: 20 }) : refreshable && onRefresh ? /* @__PURE__ */ jsxRuntime.jsx(material.InputAdornment, { position: "end", sx: { mr: 2 }, children: /* @__PURE__ */ jsxRuntime.jsx(
+          material.IconButton,
+          {
+            size: "small",
+            onClick: (e) => {
+              e.stopPropagation();
+              onRefresh();
+            },
+            disabled,
+            "aria-label": "Refresh options",
+            children: /* @__PURE__ */ jsxRuntime.jsx(RefreshIcon__default.default, { fontSize: "small" })
+          }
+        ) }) : void 0,
         renderValue: (selected) => {
           if (multiple) {
             const selectedValues = selected;
@@ -322,13 +358,36 @@ var SimpleSelect = ({
           const option = options.find((opt) => opt.value === selected);
           return option?.label || selected || /* @__PURE__ */ jsxRuntime.jsx("em", { children: placeholder || "Select..." });
         },
-        children: options.map((option) => /* @__PURE__ */ jsxRuntime.jsx(material.MenuItem, { value: option.value, children: option.label }, option.value))
+        children: [
+          filterable && /* @__PURE__ */ jsxRuntime.jsx(
+            material.ListSubheader,
+            {
+              sx: { py: 1 },
+              onMouseDown: (e) => e.stopPropagation(),
+              onClick: (e) => e.stopPropagation(),
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                material.TextField,
+                {
+                  size: "small",
+                  fullWidth: true,
+                  placeholder: filterPlaceholder,
+                  value: filterText,
+                  onChange: handleFilterChange,
+                  variant: "outlined",
+                  sx: { mt: -0.5 },
+                  autoFocus: true
+                }
+              )
+            }
+          ),
+          filteredOptions.map((option) => /* @__PURE__ */ jsxRuntime.jsx(material.MenuItem, { value: option.value, children: option.label }, option.value))
+        ]
       }
     ),
     helperText && /* @__PURE__ */ jsxRuntime.jsx(material.FormHelperText, { children: helperText })
   ] });
 };
-var SelectField = ({ field, control, defaultValue, rules, errors, services }) => {
+var SelectField = ({ field, control, defaultValue, rules, errors }) => {
   const isMultiple = field.allowMultiple || false;
   const normalizedOptions = normalizeOptions(field.options);
   const selectOptions = react.useMemo(() => {
@@ -337,7 +396,6 @@ var SelectField = ({ field, control, defaultValue, rules, errors, services }) =>
       label: opt.label
     }));
   }, [normalizedOptions]);
-  const SelectComponent = services?.SelectComponent || SimpleSelect;
   return /* @__PURE__ */ jsxRuntime.jsx(
     reactHookForm.Controller,
     {
@@ -347,7 +405,7 @@ var SelectField = ({ field, control, defaultValue, rules, errors, services }) =>
       rules,
       render: ({ field: formField }) => {
         return /* @__PURE__ */ jsxRuntime.jsx(
-          SelectComponent,
+          SimpleSelect,
           {
             label: field.label,
             value: formField.value,
@@ -1077,7 +1135,7 @@ var FormReferenceField = ({ field, control, defaultValue, rules, errors, service
   const [options, setOptions] = react.useState([]);
   const [isLoading, setIsLoading] = react.useState(false);
   const formReferenceService = services?.formReference || defaultFormReferenceService;
-  react.useEffect(() => {
+  const fetchOptions = react.useCallback(() => {
     if (!field.referenceFormName || !field.referenceFieldName) return;
     setIsLoading(true);
     formReferenceService.fetchOptions(field.referenceFormName, field.referenceFieldName).then((opts) => {
@@ -1089,6 +1147,9 @@ var FormReferenceField = ({ field, control, defaultValue, rules, errors, service
       setIsLoading(false);
     });
   }, [field.referenceFormName, field.referenceFieldName, formReferenceService]);
+  react.useEffect(() => {
+    fetchOptions();
+  }, [fetchOptions]);
   const selectOptions = react.useMemo(() => {
     return options.map((opt) => ({
       value: String(opt.value),
@@ -1098,7 +1159,6 @@ var FormReferenceField = ({ field, control, defaultValue, rules, errors, service
   const fieldDefaultValue = defaultValue ?? getDefaultValue(field);
   const fieldRules = rules ?? buildFieldRules(field);
   const isDisabled = !field.referenceFormName || !field.referenceFieldName;
-  const SelectComponent = services?.SelectComponent || SimpleSelect;
   return /* @__PURE__ */ jsxRuntime.jsx(
     reactHookForm.Controller,
     {
@@ -1108,7 +1168,7 @@ var FormReferenceField = ({ field, control, defaultValue, rules, errors, service
       rules: fieldRules,
       render: ({ field: formField }) => {
         return /* @__PURE__ */ jsxRuntime.jsx(
-          SelectComponent,
+          SimpleSelect,
           {
             label: field.label,
             value: formField.value,
@@ -1124,7 +1184,9 @@ var FormReferenceField = ({ field, control, defaultValue, rules, errors, service
             error: !!errors[field.name],
             disabled: isDisabled || isLoading,
             multiple: isMultiple,
-            isLoading
+            isLoading,
+            refreshable: true,
+            onRefresh: fetchOptions
           }
         );
       }
@@ -1137,7 +1199,7 @@ var ApiReferenceField = ({ field, control, defaultValue, rules, errors, services
   const [options, setOptions] = react.useState([]);
   const [isLoading, setIsLoading] = react.useState(false);
   const apiReferenceService = services?.apiReference || defaultApiReferenceService;
-  react.useEffect(() => {
+  const fetchOptions = react.useCallback(() => {
     if (!field.apiEndpoint || !field.apiLabelField) return;
     setIsLoading(true);
     apiReferenceService.fetchOptions(field.apiEndpoint, field.apiLabelField, field.apiValueField || "_id").then((opts) => {
@@ -1149,6 +1211,9 @@ var ApiReferenceField = ({ field, control, defaultValue, rules, errors, services
       setIsLoading(false);
     });
   }, [field.apiEndpoint, field.apiLabelField, field.apiValueField, apiReferenceService]);
+  react.useEffect(() => {
+    fetchOptions();
+  }, [fetchOptions]);
   const selectOptions = react.useMemo(() => {
     return options.map((opt) => ({
       value: String(opt.value),
@@ -1158,7 +1223,6 @@ var ApiReferenceField = ({ field, control, defaultValue, rules, errors, services
   const fieldDefaultValue = defaultValue ?? getDefaultValue(field);
   const fieldRules = rules ?? buildFieldRules(field);
   const isDisabled = !field.apiEndpoint || !field.apiLabelField;
-  const SelectComponent = services?.SelectComponent || SimpleSelect;
   return /* @__PURE__ */ jsxRuntime.jsx(
     reactHookForm.Controller,
     {
@@ -1168,7 +1232,7 @@ var ApiReferenceField = ({ field, control, defaultValue, rules, errors, services
       rules: fieldRules,
       render: ({ field: formField }) => {
         return /* @__PURE__ */ jsxRuntime.jsx(
-          SelectComponent,
+          SimpleSelect,
           {
             label: field.label,
             value: formField.value,
@@ -1184,7 +1248,9 @@ var ApiReferenceField = ({ field, control, defaultValue, rules, errors, services
             error: !!errors[field.name],
             disabled: isDisabled || isLoading,
             multiple: isMultiple,
-            isLoading
+            isLoading,
+            refreshable: true,
+            onRefresh: fetchOptions
           }
         );
       }
@@ -1565,11 +1631,9 @@ var FormRenderer = ({
     control,
     handleSubmit,
     reset,
-    resetField,
     clearErrors,
     setValue,
     setError,
-    getValues,
     formState: { errors }
   } = reactHookForm.useForm({
     defaultValues: initialValues || {}
@@ -1624,17 +1688,6 @@ var FormRenderer = ({
       try {
         await onSubmit(transformedData);
         const resetValues = initialValues || {};
-        const allFields = getAllFields(formSchema);
-        clearErrors();
-        allFields.forEach((field) => {
-          const fieldValue = resetValues[field.name] ?? (field.type === "checkbox" ? false : "");
-          resetField(field.name, {
-            defaultValue: fieldValue,
-            keepError: false,
-            keepDirty: false,
-            keepTouched: false
-          });
-        });
         reset(resetValues, {
           keepErrors: false,
           keepDirty: false,
@@ -1642,6 +1695,9 @@ var FormRenderer = ({
           keepIsSubmitted: false,
           keepSubmitCount: false
         });
+        setTimeout(() => {
+          clearErrors();
+        }, 0);
         if (onSuccess) onSuccess();
       } catch (error) {
         console.error("Form submission error:", error);