@aatulwork/customform-renderer 1.11.0 → 1.13.0

package/dist/index.d.ts

@@ -30,8 +30,9 @@ interface FieldViewProps {
     field: FormField;
     value: any;
     services?: FormServices;
+    colors?: FormColors;
 }
-declare const FieldView: ({ field, value, services }: FieldViewProps) => react_jsx_runtime.JSX.Element;
+declare const FieldView: ({ field, value, services, colors }: FieldViewProps) => react_jsx_runtime.JSX.Element;
 
 interface SimpleSelectOption {
     value: string | number;

package/dist/index.js

@@ -293,6 +293,7 @@ var SimpleSelect = ({
   onRefresh
 }) => {
   const [filterText, setFilterText] = react.useState("");
+  const selectId = react.useId();
   const handleChange = (event) => {
     const val = event.target.value;
     onChange(val);
@@ -307,10 +308,21 @@ var SimpleSelect = ({
     setFilterText("");
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(material.FormControl, { fullWidth, size, required, error, disabled, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(material.FormLabel, { required, error, sx: { mb: 0.5, display: "block" }, children: label }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      material.FormLabel,
+      {
+        component: "label",
+        htmlFor: selectId,
+        required,
+        error,
+        sx: { mb: 0.5, display: "block" },
+        children: label
+      }
+    ),
     /* @__PURE__ */ jsxRuntime.jsxs(
       material.Select,
       {
+        id: selectId,
         value: value ?? (multiple ? [] : ""),
         onChange: handleChange,
         onClose: handleClose,
@@ -542,11 +554,12 @@ var ColorField = ({ field, control, defaultValue, rules, errors }) => {
                 onChange: formField.onChange,
                 onBlur: formField.onBlur,
                 sx: {
-                  width: 40,
-                  height: 40,
+                  width: 30,
+                  height: 30,
                   padding: 0,
                   cursor: "pointer",
                   backgroundColor: "transparent",
+                  border: "none",
                   "&::-webkit-color-swatch-wrapper": { padding: 0 },
                   "&::-webkit-color-swatch": { border: "none", borderRadius: "4px" },
                   "&::-moz-color-swatch": { border: "none", borderRadius: "4px" }
@@ -1377,7 +1390,22 @@ var FieldRenderer = (props) => {
       return null;
   }
 };
-var FieldView = ({ field, value, services }) => {
+var REFERENCE_OPTIONS_CACHE_TTL = 5 * 60 * 1e3;
+var referenceOptionsCache = /* @__PURE__ */ new Map();
+var getCachedOptions = (key) => {
+  const cached = referenceOptionsCache.get(key);
+  if (!cached) return null;
+  if (Date.now() - cached.timestamp > REFERENCE_OPTIONS_CACHE_TTL) {
+    referenceOptionsCache.delete(key);
+    return null;
+  }
+  return cached.options;
+};
+var setCachedOptions = (key, options) => {
+  referenceOptionsCache.set(key, { options, timestamp: Date.now() });
+};
+var FieldView = ({ field, value, services, colors }) => {
+  const formColors = useFormColors(colors);
   const dateFormatter = services?.dateFormatter || defaultDateFormatterService;
   const FileDisplayComponent = services?.FileDisplayComponent;
   const CKEditorDisplayComponent = services?.CKEditorDisplayComponent;
@@ -1415,13 +1443,16 @@ var FieldView = ({ field, value, services }) => {
           borderColor: "divider"
         },
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "body2", sx: { fontWeight: 500 }, children: field.label }),
+          /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "body2", sx: { fontWeight: 500, color: formColors.primary }, children: field.label }),
           /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "body1", sx: { color: "text.secondary" }, children: value ? Array.isArray(value) ? `${value.length} file(s)` : "1 file" : "\u2014" })
         ]
       },
       field.name
     );
   }
+  if (field.type === "formReference" || field.type === "apiReference") {
+    return /* @__PURE__ */ jsxRuntime.jsx(ReferenceFieldView, { field, value, services });
+  }
   if (field.type === "ckeditor") {
     if (CKEditorDisplayComponent) {
       return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -1511,6 +1542,93 @@ var FieldView = ({ field, value, services }) => {
     field.name
   );
 };
+var ReferenceFieldView = ({
+  field,
+  value,
+  services
+}) => {
+  const [displayLabels, setDisplayLabels] = react.useState(null);
+  react.useEffect(() => {
+    if (value === null || value === void 0 || value === "") {
+      setDisplayLabels([]);
+      return;
+    }
+    let values;
+    if (field.allowMultiple) {
+      values = Array.isArray(value) ? value : value ? [value] : [];
+    } else {
+      values = Array.isArray(value) && value.length > 0 ? [value[0]] : value ? [value] : [];
+    }
+    if (values.length === 0) {
+      setDisplayLabels([]);
+      return;
+    }
+    const fetchLabels = async () => {
+      try {
+        let cacheKey = null;
+        let options = null;
+        if (field.type === "formReference" && field.referenceFormName && field.referenceFieldName) {
+          cacheKey = `formRef:${field.referenceFormName}:${field.referenceFieldName}`;
+          options = getCachedOptions(cacheKey);
+          if (!options) {
+            const formRefService = services?.formReference || defaultFormReferenceService;
+            options = await formRefService.fetchOptions(field.referenceFormName, field.referenceFieldName);
+            setCachedOptions(cacheKey, options);
+          }
+        } else if (field.type === "apiReference" && field.apiEndpoint && field.apiLabelField) {
+          const valueField = field.apiValueField || "_id";
+          cacheKey = `apiRef:${field.apiEndpoint}:${field.apiLabelField}:${valueField}`;
+          options = getCachedOptions(cacheKey);
+          if (!options) {
+            const apiRefService = services?.apiReference || defaultApiReferenceService;
+            options = await apiRefService.fetchOptions(field.apiEndpoint, field.apiLabelField, valueField);
+            setCachedOptions(cacheKey, options);
+          }
+        }
+        const labels = values.map((val) => {
+          const option = (options || []).find((opt) => opt.value === val || String(opt.value) === String(val));
+          return option ? option.label : String(val);
+        });
+        setDisplayLabels(labels);
+      } catch {
+        setDisplayLabels(values.map((v) => String(v)));
+      }
+    };
+    fetchLabels();
+  }, [field, value, services]);
+  const displayText = displayLabels === null ? "..." : displayLabels.length === 0 ? "\u2014" : displayLabels.join(", ");
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    material.Box,
+    {
+      sx: {
+        display: "flex",
+        flexDirection: "column",
+        gap: 0.5,
+        py: 1.5,
+        px: 1,
+        borderColor: "divider"
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "body2", sx: { fontWeight: 500 }, children: field.label }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          material.Typography,
+          {
+            variant: "body1",
+            sx: {
+              color: displayText === "\u2014" ? "text.disabled" : "text.primary",
+              fontStyle: displayText === "\u2014" ? "italic" : "normal",
+              fontWeight: 400,
+              fontSize: "0.875rem",
+              lineHeight: 1.5
+            },
+            children: displayText
+          }
+        )
+      ]
+    },
+    field.name
+  );
+};
 var formatFieldValue = (field, value, dateFormatter, services) => {
   if (value === null || value === void 0 || value === "") {
     return "\u2014";
@@ -1522,8 +1640,6 @@ var formatFieldValue = (field, value, dateFormatter, services) => {
     case "datepicker":
       return dateFormatter?.format(value, { datePickerMode: field.datePickerMode }) || String(value);
     case "select":
-    case "formReference":
-    case "apiReference":
       let values;
       if (field.allowMultiple) {
         values = Array.isArray(value) ? value : value ? [value] : [];
@@ -1585,7 +1701,7 @@ var FormViewMode = ({ formSchema, initialValues, hideTitle = false, services, co
           id: `panel-${section.id}-header`,
           children: /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
             /* @__PURE__ */ jsxRuntime.jsx(DoubleArrowOutlinedIcon__default.default, { fontSize: "small", sx: { color: formColors.primary } }),
-            /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "subtitle1", sx: { fontWeight: 600, color: formColors.primary }, children: section.title })
+            /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "subtitle1", sx: { color: formColors.primary }, children: section.title })
           ] })
         }
       ),
@@ -1599,7 +1715,7 @@ var FormViewMode = ({ formSchema, initialValues, hideTitle = false, services, co
               gridTemplateColumns: isMobile ? "repeat(1, 1fr)" : "repeat(2, 1fr)",
               gap: 1
             },
-            children: section.fields.map((field) => /* @__PURE__ */ jsxRuntime.jsx(FieldView, { field, value: initialValues?.[field.name], services }, field.name))
+            children: section.fields.map((field) => /* @__PURE__ */ jsxRuntime.jsx(FieldView, { field, value: initialValues?.[field.name], services, colors }, field.name))
           }
         )
       ] })
@@ -1774,7 +1890,7 @@ var FormRenderer = ({
       );
       if (sectionDisplayMode === "stepper") {
         return /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { border: "1px solid", borderColor: formColors.divider, p: 5, backgroundColor: formColors.backgroundPaper }, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(material.Stepper, { activeStep, orientation: "horizontal", children: formSchema.sections.map((section) => /* @__PURE__ */ jsxRuntime.jsx(material.Step, { children: /* @__PURE__ */ jsxRuntime.jsx(material.StepLabel, { children: /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "subtitle1", sx: { fontWeight: 600 }, children: section.title }) }) }, section.id)) }),
+          /* @__PURE__ */ jsxRuntime.jsx(material.Stepper, { activeStep, orientation: "horizontal", children: formSchema.sections.map((section) => /* @__PURE__ */ jsxRuntime.jsx(material.Step, { children: /* @__PURE__ */ jsxRuntime.jsx(material.StepLabel, { children: /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "subtitle1", children: section.title }) }) }, section.id)) }),
           /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { mt: 5 }, children: formSchema.sections.map((section, sectionIndex) => {
             const sectionsLength = formSchema.sections?.length || 0;
             return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -1830,7 +1946,7 @@ var FormRenderer = ({
             id: `panel-${section.id}-header`,
             children: /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
               /* @__PURE__ */ jsxRuntime.jsx(DoubleArrowOutlinedIcon__default.default, { fontSize: "small", sx: { color: formColors.primary } }),
-              /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "subtitle1", sx: { fontWeight: 600, color: formColors.primary }, children: section.title })
+              /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "subtitle1", sx: { color: formColors.primary }, children: section.title })
             ] })
           }
         ),