unifyedx-storybook-new 0.1.61 → 0.1.63

package/dist/unifyedx-storybook-new.es.js

@@ -75817,25 +75817,19 @@ function DataTableRenderer({ item, data: initialData, updateHandler, validationE
   const [section, setSection] = useState(item);
   const [audienceRowId, setAudienceRowId] = useState(null);
   const [audienceFieldName, setAudienceFieldName] = useState(null);
-  console.log(`[DataTableRenderer] ${section.key} - Received props:`, { item, initialData });
   const [data, setData] = useState(() => {
     const existingData = initialData && initialData[section.key] || [];
-    const result = existingData.length > 0 ? existingData : [{ id: 0 }];
-    console.log(`[DataTableRenderer] ${section.key} - Initial data:`, result);
-    return result;
+    return existingData.length > 0 ? existingData : [{ id: 0 }];
   });
-  const prevInitialDataRef = useRef(initialData);
   useEffect(() => {
-    console.log(`[DataTableRenderer] ${section.key} - Checking for initialData changes`);
-    console.log(`[DataTableRenderer] ${section.key} - Previous:`, prevInitialDataRef.current);
-    console.log(`[DataTableRenderer] ${section.key} - Current:`, initialData);
-    if (prevInitialDataRef.current !== initialData) {
-      prevInitialDataRef.current = initialData;
-      const existingData = initialData && initialData[section.key] || [];
-      const newData = existingData.length > 0 ? existingData : [{ id: 0 }];
-      console.log(`[DataTableRenderer] ${section.key} - Setting new data:`, newData);
-      setData(newData);
-    }
+    const existingData = initialData && initialData[section.key] || [];
+    const newData = existingData.length > 0 ? existingData : [{ id: 0 }];
+    console.log(`[DataTableRenderer] ${section.key} - Data update:`, {
+      existingData,
+      newData,
+      initialData
+    });
+    setData(newData);
   }, [initialData, section.key]);
   const prevDataRef = useRef(data);
   const updateTimeoutRef = useRef(null);
@@ -75857,22 +75851,21 @@ function DataTableRenderer({ item, data: initialData, updateHandler, validationE
       }
     };
   }, []);
-  const getFieldRenderer = (field) => {
-    const updateFieldValue = (rowIndex, value) => {
-      console.log(`[DataTableRenderer] updateFieldValue called with:`, { rowIndex, value, type: typeof value });
-      setData((prevData) => {
-        const newData = [...prevData];
-        newData[rowIndex][field.key] = value;
-        return newData;
-      });
-    };
-    const getFieldError = (rowIndex) => {
+  const updateFieldValue = React__default.useCallback((field, rowIndex, value) => {
+    setData((prevData) => {
+      const newData = [...prevData];
+      newData[rowIndex][field.key] = value;
+      return newData;
+    });
+  }, []);
+  const getFieldRenderer = React__default.useCallback((field) => {
+    const getFieldError = React__default.useCallback((rowIndex) => {
       return validationErrors[section.key]?.[rowIndex]?.[field.key];
-    };
-    const renderError = (rowIndex) => {
+    }, [validationErrors, section.key, field.key]);
+    const renderError = React__default.useCallback((rowIndex) => {
       const error = getFieldError(rowIndex);
       return error ? /* @__PURE__ */ jsx("div", { className: "text-red-500 text-xs mt-1", children: error }) : null;
-    };
+    }, [getFieldError]);
     switch (field.fieldtype) {
       case "text":
         return (props, rowIndex) => /* @__PURE__ */ jsxs("div", { children: [
@@ -75880,7 +75873,7 @@ function DataTableRenderer({ item, data: initialData, updateHandler, validationE
             Input,
             {
               value: props[field.key] || "",
-              onChange: (e) => updateFieldValue(rowIndex, e.target.value),
+              onChange: (e) => updateFieldValue(field, rowIndex, e.target.value),
               placeholder: field.placeholder || `Enter ${field.label}`,
               required: field.required,
               className: `w-full ${getFieldError(rowIndex) ? "border-red-500" : ""}`
@@ -75894,7 +75887,7 @@ function DataTableRenderer({ item, data: initialData, updateHandler, validationE
             Textarea,
             {
               value: props[field.key] || "",
-              onChange: (e) => updateFieldValue(rowIndex, e.target.value),
+              onChange: (e) => updateFieldValue(field, rowIndex, e.target.value),
               placeholder: field.placeholder || `Enter ${field.label}`,
               required: field.required,
               className: `w-full ${getFieldError(rowIndex) ? "border-red-500" : ""}`,
@@ -75910,7 +75903,7 @@ function DataTableRenderer({ item, data: initialData, updateHandler, validationE
             {
               type: "number",
               value: props[field.key] || "",
-              onChange: (e) => updateFieldValue(rowIndex, e.target.value),
+              onChange: (e) => updateFieldValue(field, rowIndex, e.target.value),
               placeholder: field.placeholder || `Enter ${field.label}`,
               required: field.required,
               className: `w-full ${getFieldError(rowIndex) ? "border-red-500" : ""}`
@@ -75925,7 +75918,7 @@ function DataTableRenderer({ item, data: initialData, updateHandler, validationE
             {
               type: "email",
               value: props[field.key] || "",
-              onChange: (e) => updateFieldValue(rowIndex, e.target.value),
+              onChange: (e) => updateFieldValue(field, rowIndex, e.target.value),
               placeholder: field.placeholder || "Enter email address",
               required: field.required,
               className: `w-full ${getFieldError(rowIndex) ? "border-red-500" : ""}`
@@ -75940,7 +75933,7 @@ function DataTableRenderer({ item, data: initialData, updateHandler, validationE
             {
               type: "url",
               value: props[field.key] || "",
-              onChange: (e) => updateFieldValue(rowIndex, e.target.value),
+              onChange: (e) => updateFieldValue(field, rowIndex, e.target.value),
               placeholder: field.placeholder || "Enter URL",
               required: field.required,
               className: `w-full ${getFieldError(rowIndex) ? "border-red-500" : ""}`
@@ -75955,7 +75948,7 @@ function DataTableRenderer({ item, data: initialData, updateHandler, validationE
             {
               type: "password",
               value: props[field.key] || "",
-              onChange: (e) => updateFieldValue(rowIndex, e.target.value),
+              onChange: (e) => updateFieldValue(field, rowIndex, e.target.value),
               placeholder: field.placeholder || "Enter password",
               required: field.required,
               className: `w-full ${getFieldError(rowIndex) ? "border-red-500" : ""}`
@@ -75965,20 +75958,48 @@ function DataTableRenderer({ item, data: initialData, updateHandler, validationE
         ] });
       case "select":
       case "dropdown":
-        return (props, rowIndex) => /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx(
-            Select,
-            {
-              value: props[field.key] || "",
-              onChange: (value) => updateFieldValue(rowIndex, value),
-              options: field.options || [],
-              placeholder: field.placeholder || `Select ${field.label}`,
-              required: field.required,
-              className: `w-full ${getFieldError(rowIndex) ? "border-red-500" : ""}`
+        return (props, rowIndex) => {
+          const options = React__default.useMemo(() => {
+            if (field.optionsFrom && initialData) {
+              const { config, valueField, labelField } = field.optionsFrom;
+              const configData = initialData[config] || [];
+              if (Array.isArray(configData)) {
+                console.log(`[DataTableRenderer] Generating options for ${field.key} from ${config}:`, configData);
+                const mappedOptions = configData.map((item2) => ({
+                  value: item2[valueField] || "",
+                  label: item2[labelField] || ""
+                }));
+                console.log(`[DataTableRenderer] Generated options:`, mappedOptions);
+                return mappedOptions;
+              }
+              console.log(`[DataTableRenderer] No data found for ${config}, using empty array`);
+              return [];
             }
-          ),
-          renderError(rowIndex)
-        ] });
+            return field.options || [];
+          }, [field.optionsFrom, initialData, field.options]);
+          console.log(`[DataTableRenderer] Rendering select for ${field.key}:`, {
+            currentValue: props[field.key],
+            availableOptions: options,
+            optionsSource: field.optionsFrom ? "dynamic" : "static"
+          });
+          return /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx(
+              Select,
+              {
+                value: props[field.key] || "",
+                onChange: (value) => {
+                  console.log(`[DataTableRenderer] Select value changed for ${field.key}:`, value);
+                  updateFieldValue(field, rowIndex, value);
+                },
+                options,
+                placeholder: field.placeholder || `Select ${field.label}`,
+                required: field.required,
+                className: `w-full ${getFieldError(rowIndex) ? "border-red-500" : ""}`
+              }
+            ),
+            renderError(rowIndex)
+          ] });
+        };
       case "multiselect":
         return (props, rowIndex) => {
           const currentValue = props[field.key] || [];
@@ -76117,7 +76138,7 @@ function DataTableRenderer({ item, data: initialData, updateHandler, validationE
             {
               type: "range",
               value: props[field.key] || field.min || 0,
-              onChange: (e) => updateFieldValue(rowIndex, e.target.value),
+              onChange: (e) => updateFieldValue(field, rowIndex, e.target.value),
               min: field.min || 0,
               max: field.max || 100,
               step: field.step || 1,
@@ -76155,7 +76176,7 @@ function DataTableRenderer({ item, data: initialData, updateHandler, validationE
             Input,
             {
               value: props[field.key] || "",
-              onChange: (e) => updateFieldValue(rowIndex, e.target.value),
+              onChange: (e) => updateFieldValue(field, rowIndex, e.target.value),
               placeholder: field.placeholder || `Enter ${field.label}`,
               required: field.required,
               className: `w-full ${getFieldError(rowIndex) ? "border-red-500" : ""}`
@@ -76164,7 +76185,7 @@ function DataTableRenderer({ item, data: initialData, updateHandler, validationE
           renderError(rowIndex)
         ] });
     }
-  };
+  }, [updateFieldValue, validationErrors, section.key, initialData]);
   const addBlankRow = useCallback(() => {
     console.log("[DataTableRenderer] Adding blank row");
     setData((prevData) => {
@@ -76321,6 +76342,9 @@ function DataTableRenderer({ item, data: initialData, updateHandler, validationE
     })()
   ] });
 }
+const DataTableRenderer$1 = React__default.memo(DataTableRenderer, (prevProps, nextProps) => {
+  return prevProps.item === nextProps.item && prevProps.initialData === nextProps.initialData && prevProps.validationErrors === nextProps.validationErrors;
+});
 
 function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
 
@@ -76758,7 +76782,7 @@ const UnknownType = ({ item }) => /* @__PURE__ */ jsxs("div", { className: "p-3
 ] });
 const REGISTRY = /* @__PURE__ */ Object.create(null);
 REGISTRY.section = SectionRenderer;
-REGISTRY.datatable = DataTableRenderer;
+REGISTRY.datatable = DataTableRenderer$1;
 REGISTRY.managecollectionlist = ManageCollectionListRenderer;
 REGISTRY["manage-collection-list"] = ManageCollectionListRenderer;
 function toType(input) {
@@ -76928,11 +76952,15 @@ function DynamicConfig({
     }
   }, [configdata, reload, appid, disableApi]);
   const handleSectionChange = (name, sectiondata) => {
-    console.log("Section change:", name, sectiondata);
+    console.log("Section change:", { name, sectiondata });
     setData((prev) => {
       const newData = JSON.parse(JSON.stringify(prev || {}));
       newData[name] = sectiondata;
-      console.log("Updated data:", newData);
+      console.log("Complete data after update:", {
+        updatedSection: name,
+        sectionData: sectiondata,
+        allData: newData
+      });
       return newData;
     });
     setValidationErrors((prevErrors) => {