@aatulwork/customform-renderer 1.13.0 → 1.15.0

package/dist/index.d.mts

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

package/dist/index.d.ts

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

package/dist/index.js

@@ -1404,8 +1404,9 @@ var getCachedOptions = (key) => {
 var setCachedOptions = (key, options) => {
   referenceOptionsCache.set(key, { options, timestamp: Date.now() });
 };
-var FieldView = ({ field, value, services, colors }) => {
-  const formColors = useFormColors(colors);
+var FieldView = ({ field, value, services }) => {
+  const fieldLabelColor = "rgba(0, 0, 0, 0.6)";
+  const fieldValueColor = "text.secondary";
   const dateFormatter = services?.dateFormatter || defaultDateFormatterService;
   const FileDisplayComponent = services?.FileDisplayComponent;
   const CKEditorDisplayComponent = services?.CKEditorDisplayComponent;
@@ -1424,7 +1425,7 @@ var FieldView = ({ field, value, services, colors }) => {
             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: fieldLabelColor }, children: field.label }),
             /* @__PURE__ */ jsxRuntime.jsx(FileDisplayComponent, { fieldValue: value })
           ]
         },
@@ -1443,15 +1444,57 @@ var FieldView = ({ field, value, services, colors }) => {
           borderColor: "divider"
         },
         children: [
-          /* @__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" })
+          /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "body2", sx: { fontWeight: 500, color: fieldLabelColor }, children: field.label }),
+          /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "body1", sx: { color: fieldValueColor }, 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 });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      ReferenceFieldView,
+      {
+        field,
+        value,
+        services,
+        fieldLabelColor,
+        fieldValueColor
+      }
+    );
+  }
+  if (field.type === "color") {
+    const colorValue = value && typeof value === "string" ? value : "#000000";
+    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, color: fieldLabelColor }, children: field.label }),
+          /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: value ? /* @__PURE__ */ jsxRuntime.jsx(
+            material.Box,
+            {
+              sx: {
+                width: 30,
+                height: 30,
+                backgroundColor: colorValue,
+                border: "1px solid",
+                borderColor: "divider",
+                borderRadius: 1
+              }
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "body1", sx: { color: fieldValueColor, fontStyle: "italic" }, children: "\u2014" }) })
+        ]
+      },
+      field.name
+    );
   }
   if (field.type === "ckeditor") {
     if (CKEditorDisplayComponent) {
@@ -1467,7 +1510,7 @@ var FieldView = ({ field, value, services, colors }) => {
             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: fieldLabelColor }, children: field.label }),
             /* @__PURE__ */ jsxRuntime.jsx(
               CKEditorDisplayComponent,
               {
@@ -1493,13 +1536,13 @@ var FieldView = ({ field, value, services, colors }) => {
           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: fieldLabelColor }, children: field.label }),
           /* @__PURE__ */ jsxRuntime.jsx(
             material.Typography,
             {
               variant: "body1",
               sx: {
-                color: formattedValue === "\u2014" ? "text.disabled" : "text.primary",
+                color: fieldValueColor,
                 fontStyle: formattedValue === "\u2014" ? "italic" : "normal"
               },
               dangerouslySetInnerHTML: { __html: value || "" }
@@ -1522,13 +1565,13 @@ var FieldView = ({ field, value, services, colors }) => {
         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: fieldLabelColor }, children: field.label }),
         /* @__PURE__ */ jsxRuntime.jsx(
           material.Typography,
           {
             variant: "body1",
             sx: {
-              color: formattedValue === "\u2014" ? "text.disabled" : "text.primary",
+              color: fieldValueColor,
               fontStyle: formattedValue === "\u2014" ? "italic" : "normal",
               fontWeight: 400,
               fontSize: "0.875rem",
@@ -1545,7 +1588,9 @@ var FieldView = ({ field, value, services, colors }) => {
 var ReferenceFieldView = ({
   field,
   value,
-  services
+  services,
+  fieldLabelColor,
+  fieldValueColor
 }) => {
   const [displayLabels, setDisplayLabels] = react.useState(null);
   react.useEffect(() => {
@@ -1609,13 +1654,13 @@ var ReferenceFieldView = ({
         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: fieldLabelColor }, children: field.label }),
         /* @__PURE__ */ jsxRuntime.jsx(
           material.Typography,
           {
             variant: "body1",
             sx: {
-              color: displayText === "\u2014" ? "text.disabled" : "text.primary",
+              color: fieldValueColor,
               fontStyle: displayText === "\u2014" ? "italic" : "normal",
               fontWeight: 400,
               fontSize: "0.875rem",
@@ -1670,6 +1715,8 @@ var formatFieldValue = (field, value, dateFormatter, services) => {
         return labels.join(", ");
       }
       return getLabelForValue(values[0]);
+    case "color":
+      return value ? String(value) : "\u2014";
     case "radio":
       if (field.options) {
         const normalizedOptions = normalizeOptions(field.options);
@@ -1715,7 +1762,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, colors }, field.name))
+            children: section.fields.map((field) => /* @__PURE__ */ jsxRuntime.jsx(FieldView, { field, value: initialValues?.[field.name], services }, field.name))
           }
         )
       ] })