unifyedx-storybook-new 0.1.75 → 0.1.77

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

@@ -838,7 +838,7 @@ const Avatar = ({
     showIcon && /* @__PURE__ */ jsx("span", { className: "avatar-icon", children: /* @__PURE__ */ jsx(User, {}) })
   ] });
 };
-const AvatarGroup = ({ children, max = 4, truncatedMessage = "Members", ...props }) => {
+const AvatarGroup$1 = ({ children, max = 4, truncatedMessage = "Members", ...props }) => {
   const avatars = React__default.Children.toArray(children);
   const visibleAvatars = avatars.slice(0, max);
   const hiddenCount = avatars.length - max;
@@ -75249,47 +75249,30 @@ function TreeView({
 }
 
 function SectionRenderer({ item, data: initialData, updateHandler, validationErrors = {} }) {
+  console.log(item);
   const [section, setSection] = React__default.useState(item);
   const [data, setData] = React__default.useState(() => {
-    const sectionData = initialData && initialData[item.key] || (item.type === "datatable" ? [] : {});
+    const sectionData = initialData && initialData[item.key] || {};
+    console.log("Initial Section data for", item.key, sectionData);
     return sectionData;
   });
-  const getDynamicOptions = (field) => {
-    if (field.optionsFrom && initialData) {
-      const { config, valueField, labelField } = field.optionsFrom;
-      const configData = initialData[config] || [];
-      if (Array.isArray(configData)) {
-        return configData.map((item2) => ({
-          id: item2[valueField] || "",
-          value: item2[valueField] || "",
-          label: item2[labelField] || ""
-        }));
-      }
-    }
-    return field.options || [];
-  };
-  const handleFieldChange = React__default.useCallback((fieldKey, value) => {
-    setData((prevData) => {
-      const newData = { ...prevData, [fieldKey]: value };
-      if (updateHandler) {
-        updateHandler(section.key, newData);
-      }
-      return newData;
-    });
-  }, [updateHandler, section.key]);
-  React__default.useEffect(() => {
-    if (initialData && initialData[item.key]) {
-      setData(initialData[item.key]);
-    }
-  }, [initialData, item.key]);
   const prevInitialDataRef = useRef(initialData);
   useEffect(() => {
     if (prevInitialDataRef.current !== initialData) {
       prevInitialDataRef.current = initialData;
       const sectionData = initialData && initialData[item.key] || {};
+      console.log("Updated Section data for", item.key, sectionData);
       setData(sectionData);
     }
   }, [initialData, item.key]);
+  console.log("Section data", data);
+  const prevDataRef = useRef(data);
+  useEffect(() => {
+    if (prevDataRef.current !== data && updateHandler && typeof updateHandler === "function") {
+      prevDataRef.current = data;
+      updateHandler(section.key, data);
+    }
+  }, [section.key, data, updateHandler]);
   const shouldShowField = (field) => {
     if (!field.dependsOn) return true;
     const { field: dependentField, value: requiredValue, operator = "equals" } = field.dependsOn;
@@ -75350,9 +75333,16 @@ function SectionRenderer({ item, data: initialData, updateHandler, validationErr
           {
             type: "text",
             name: field.key,
+            defaultValue: field.default,
             placeholder: field.placeholder,
-            value: data[field.key] || field.default || "",
-            onChange: (e) => handleFieldChange(field.key, e.target.value),
+            value: data[field.key] || "",
+            onChange: (e) => {
+              const newData = { ...data, [field.key]: e.target.value };
+              setData(newData);
+              if (updateHandler) {
+                updateHandler(section.key, newData);
+              }
+            },
             required: field.required,
             disabled: field.disabled ? field.disabled : false,
             className: `w-full ${validationErrors[section.key]?.[field.key] ? "border-red-500" : ""}`
@@ -75365,9 +75355,16 @@ function SectionRenderer({ item, data: initialData, updateHandler, validationErr
           Textarea,
           {
             name: field.key,
+            defaultValue: field.default,
             placeholder: field.placeholder,
-            value: data[field.key] || field.default || "",
-            onChange: (e) => handleFieldChange(field.key, e.target.value),
+            value: data[field.key] || "",
+            onChange: (e) => {
+              const newData = { ...data, [field.key]: e.target.value };
+              setData(newData);
+              if (updateHandler) {
+                updateHandler(section.key, newData);
+              }
+            },
             rows: 3,
             required: field.required,
             disabled: field.disabled ? field.disabled : false,
@@ -75382,9 +75379,16 @@ function SectionRenderer({ item, data: initialData, updateHandler, validationErr
           {
             type: "number",
             name: field.key,
+            defaultValue: field.default,
             placeholder: field.placeholder,
-            value: data[field.key] || field.default || "",
-            onChange: (e) => handleFieldChange(field.key, e.target.value),
+            value: data[field.key] || "",
+            onChange: (e) => {
+              const newData = { ...data, [field.key]: e.target.value };
+              setData(newData);
+              if (updateHandler) {
+                updateHandler(section.key, newData);
+              }
+            },
             required: field.required,
             disabled: field.disabled ? field.disabled : false,
             className: `w-full ${validationErrors[section.key]?.[field.key] ? "border-red-500" : ""}`
@@ -75398,7 +75402,13 @@ function SectionRenderer({ item, data: initialData, updateHandler, validationErr
           {
             name: field.key,
             checked: Boolean(data[field.key] || field.default),
-            onChange: (checked) => handleFieldChange(field.key, checked),
+            onChange: (checked) => {
+              const newData = { ...data, [field.key]: checked };
+              setData(newData);
+              if (updateHandler) {
+                updateHandler(section.key, newData);
+              }
+            },
             label: field.placeholder || field.label,
             disabled: field.disabled ? field.disabled : false,
             className: "w-full"
@@ -75411,8 +75421,12 @@ function SectionRenderer({ item, data: initialData, updateHandler, validationErr
           Select,
           {
             name: field.key,
-            value: data[field.key] || field.default || "",
-            onChange: (value) => handleFieldChange(field.key, value),
+            defaultValue: field.default,
+            value: data[field.key] || "",
+            onChange: (value) => {
+              const newData = { ...data, [field.key]: value };
+              setData(newData);
+            },
             options: field.options || [],
             placeholder: field.placeholder || `Select ${field.label}`,
             required: field.required,
@@ -75422,22 +75436,6 @@ function SectionRenderer({ item, data: initialData, updateHandler, validationErr
         ),
         validationErrors[section.key]?.[field.key] && /* @__PURE__ */ jsx("div", { style: { color: "#ef4444", fontSize: "12px", marginTop: "2px" }, children: validationErrors[section.key][field.key] })
       ] }),
-      field.fieldtype === "selectDynamic" && /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx(
-          Select,
-          {
-            name: field.key,
-            value: data[field.key] || field.default || "",
-            onChange: (value) => handleFieldChange(field.key, value),
-            options: getDynamicOptions(field),
-            placeholder: field.placeholder || `Select ${field.label}`,
-            required: field.required,
-            disabled: field.disabled ? field.disabled : false,
-            className: `w-full ${validationErrors[section.key]?.[field.key] ? "border-red-500" : ""}`
-          }
-        ),
-        validationErrors[section.key]?.[field.key] && /* @__PURE__ */ jsx("div", { style: { color: "#ef4444", fontSize: "12px", marginTop: "2px" }, children: validationErrors[section.key][field.key] })
-      ] }),
       field.fieldtype === "email" && /* @__PURE__ */ jsxs("div", { children: [
         /* @__PURE__ */ jsx(
           Input$1,
@@ -75447,7 +75445,13 @@ function SectionRenderer({ item, data: initialData, updateHandler, validationErr
             defaultValue: field.default,
             placeholder: field.placeholder || "Enter email address",
             value: data[field.key] || "",
-            onChange: (e) => handleFieldChange(field.key, e.target.value),
+            onChange: (e) => {
+              const newData = { ...data, [field.key]: e.target.value };
+              setData(newData);
+              if (updateHandler) {
+                updateHandler(section.key, newData);
+              }
+            },
             required: field.required,
             disabled: field.disabled ? field.disabled : false,
             className: `w-full ${validationErrors[section.key]?.[field.key] ? "border-red-500" : ""}`
@@ -75464,7 +75468,13 @@ function SectionRenderer({ item, data: initialData, updateHandler, validationErr
             defaultValue: field.default,
             placeholder: field.placeholder || "Enter URL",
             value: data[field.key] || "",
-            onChange: (e) => handleFieldChange(field.key, e.target.value),
+            onChange: (e) => {
+              const newData = { ...data, [field.key]: e.target.value };
+              setData(newData);
+              if (updateHandler) {
+                updateHandler(section.key, newData);
+              }
+            },
             required: field.required,
             disabled: field.disabled ? field.disabled : false,
             className: `w-full ${validationErrors[section.key]?.[field.key] ? "border-red-500" : ""}`
@@ -75481,7 +75491,13 @@ function SectionRenderer({ item, data: initialData, updateHandler, validationErr
             defaultValue: field.default,
             placeholder: field.placeholder || "Enter password",
             value: data[field.key] || "",
-            onChange: (e) => handleFieldChange(field.key, e.target.value),
+            onChange: (e) => {
+              const newData = { ...data, [field.key]: e.target.value };
+              setData(newData);
+              if (updateHandler) {
+                updateHandler(section.key, newData);
+              }
+            },
             required: field.required,
             disabled: field.disabled ? field.disabled : false,
             className: `w-full ${validationErrors[section.key]?.[field.key] ? "border-red-500" : ""}`
@@ -75494,7 +75510,13 @@ function SectionRenderer({ item, data: initialData, updateHandler, validationErr
           MultiSelect$1,
           {
             selectedItems: data[field.key] || [],
-            onSelectionChange: (selectedItems) => handleFieldChange(field.key, selectedItems),
+            onSelectionChange: (selectedItems) => {
+              const newData = { ...data, [field.key]: selectedItems };
+              setData(newData);
+              if (updateHandler) {
+                updateHandler(section.key, newData);
+              }
+            },
             options: field.options || [],
             placeholder: field.placeholder || `Select ${field.label}`,
             disabled: field.disabled ? field.disabled : false,
@@ -75508,7 +75530,14 @@ function SectionRenderer({ item, data: initialData, updateHandler, validationErr
           ToggleSwitch,
           {
             checked: typeof data[field.key] === "boolean" ? data[field.key] : field.default,
-            onChange: (isOn) => handleFieldChange(field.key, isOn),
+            onChange: (isOn) => {
+              console.log("Toggle changed:", field.key, isOn);
+              const newData = { ...data, [field.key]: isOn };
+              setData(newData);
+              if (updateHandler) {
+                updateHandler(section.key, newData);
+              }
+            },
             label: field.placeholder || field.label,
             disabled: field.disabled ? field.disabled : false
           }
@@ -75520,7 +75549,13 @@ function SectionRenderer({ item, data: initialData, updateHandler, validationErr
         {
           label: field.label,
           value: data[field.key] ? new Date(data[field.key]) : null,
-          onChange: (date) => handleFieldChange(field.key, date ? date.toISOString().split("T")[0] : ""),
+          onChange: (date) => {
+            const newData = { ...data, [field.key]: date ? date.toISOString().split("T")[0] : "" };
+            setData(newData);
+            if (updateHandler) {
+              updateHandler(section.key, newData);
+            }
+          },
           placeholder: field.placeholder || "Select date",
           disabled: field.disabled ? field.disabled : false,
           error: validationErrors[section.key]?.[field.key],
@@ -75532,7 +75567,13 @@ function SectionRenderer({ item, data: initialData, updateHandler, validationErr
         {
           label: field.label,
           value: data[field.key] || { from: null, to: null },
-          onChange: (dateRange) => handleFieldChange(field.key, dateRange),
+          onChange: (dateRange) => {
+            const newData = { ...data, [field.key]: dateRange };
+            setData(newData);
+            if (updateHandler) {
+              updateHandler(section.key, newData);
+            }
+          },
           placeholder: field.placeholder || "Select date range",
           disabled: field.disabled ? field.disabled : false,
           error: validationErrors[section.key]?.[field.key],
@@ -75590,7 +75631,13 @@ function SectionRenderer({ item, data: initialData, updateHandler, validationErr
           SearchBar,
           {
             value: data[field.key] || "",
-            onChange: (value) => handleFieldChange(field.key, value),
+            onChange: (value) => {
+              const newData = { ...data, [field.key]: value };
+              setData(newData);
+              if (updateHandler) {
+                updateHandler(section.key, newData);
+              }
+            },
             placeholder: field.placeholder || `Search ${field.label}`,
             className: `w-full ${validationErrors[section.key]?.[field.key] ? "border-red-500" : ""}`
           }
@@ -75606,7 +75653,13 @@ function SectionRenderer({ item, data: initialData, updateHandler, validationErr
             defaultValue: field.default,
             placeholder: field.placeholder || "Select date and time",
             value: data[field.key] || "",
-            onChange: (e) => handleFieldChange(field.key, e.target.value),
+            onChange: (e) => {
+              const newData = { ...data, [field.key]: e.target.value };
+              setData(newData);
+              if (updateHandler) {
+                updateHandler(section.key, newData);
+              }
+            },
             required: field.required,
             className: `w-full ${validationErrors[section.key]?.[field.key] ? "border-red-500" : ""}`
           }
@@ -75622,7 +75675,13 @@ function SectionRenderer({ item, data: initialData, updateHandler, validationErr
             defaultValue: field.default,
             placeholder: field.placeholder || "Select time",
             value: data[field.key] || "",
-            onChange: (e) => handleFieldChange(field.key, e.target.value),
+            onChange: (e) => {
+              const newData = { ...data, [field.key]: e.target.value };
+              setData(newData);
+              if (updateHandler) {
+                updateHandler(section.key, newData);
+              }
+            },
             required: field.required,
             className: `w-full ${validationErrors[section.key]?.[field.key] ? "border-red-500" : ""}`
           }
@@ -75637,7 +75696,13 @@ function SectionRenderer({ item, data: initialData, updateHandler, validationErr
             name: field.key,
             defaultValue: field.default || "#000000",
             value: data[field.key] || "#000000",
-            onChange: (e) => handleFieldChange(field.key, e.target.value),
+            onChange: (e) => {
+              const newData = { ...data, [field.key]: e.target.value };
+              setData(newData);
+              if (updateHandler) {
+                updateHandler(section.key, newData);
+              }
+            },
             className: `w-full h-10 ${validationErrors[section.key]?.[field.key] ? "border-red-500" : ""}`
           }
         ),
@@ -75651,7 +75716,13 @@ function SectionRenderer({ item, data: initialData, updateHandler, validationErr
             name: field.key,
             defaultValue: field.default || field.min || 0,
             value: data[field.key] || field.min || 0,
-            onChange: (e) => handleFieldChange(field.key, e.target.value),
+            onChange: (e) => {
+              const newData = { ...data, [field.key]: e.target.value };
+              setData(newData);
+              if (updateHandler) {
+                updateHandler(section.key, newData);
+              }
+            },
             min: field.min || 0,
             max: field.max || 100,
             step: field.step || 1,
@@ -75676,7 +75747,11 @@ function SectionRenderer({ item, data: initialData, updateHandler, validationErr
             name: field.key,
             onChange: (e) => {
               const file = e.target.files[0];
-              handleFieldChange(field.key, file ? file.name : "");
+              const newData = { ...data, [field.key]: file ? file.name : "" };
+              setData(newData);
+              if (updateHandler) {
+                updateHandler(section.key, newData);
+              }
             },
             accept: field.accept,
             className: `w-full ${validationErrors[section.key]?.[field.key] ? "border-red-500" : ""}`
@@ -75691,7 +75766,13 @@ function SectionRenderer({ item, data: initialData, updateHandler, validationErr
             endpoints: field.endpoints || {},
             initialData: data[field.key] || field.initialData || [],
             className: field.className || "",
-            onCollectionChange: (newCollections) => handleFieldChange(field.key, newCollections),
+            onCollectionChange: (newCollections) => {
+              const newData = { ...data, [field.key]: newCollections };
+              setData(newData);
+              if (updateHandler) {
+                updateHandler(section.key, newData);
+              }
+            },
             showSearch: field.showSearch !== false,
             allowAdd: field.allowAdd !== false,
             allowEdit: field.allowEdit !== false,
@@ -75715,60 +75796,69 @@ function SectionRenderer({ item, data: initialData, updateHandler, validationErr
     ] }, idx)) })
   ] }) });
 }
-const SectionRenderer$1 = React__default.memo(SectionRenderer, (prevProps, nextProps) => {
-  return prevProps.item === nextProps.item && prevProps.data === nextProps.data && prevProps.updateHandler === nextProps.updateHandler && JSON.stringify(prevProps.validationErrors) === JSON.stringify(nextProps.validationErrors);
-});
 
+const AvatarGroup = ({ children }) => /* @__PURE__ */ jsx("div", { className: "flex -space-x-2", children });
 function DataTableRenderer({ item, data: initialData, updateHandler, validationErrors = {} }) {
-  item.key;
+  console.log(`[DynamicConfig/DataTableRenderer] Component loaded for section: ${item.key}`);
   const [section, setSection] = useState(item);
   const [audienceRowId, setAudienceRowId] = useState(null);
   const [audienceFieldName, setAudienceFieldName] = useState(null);
-  const isStructuralChangeRef = useRef(false);
+  console.log(`[DataTableRenderer] ${section.key} - Received props:`, { item, initialData });
   const [data, setData] = useState(() => {
     const existingData = initialData && initialData[section.key] || [];
-    return existingData.length > 0 ? existingData : [{ id: 0 }];
+    const result = existingData.length > 0 ? existingData : [{ id: 0 }];
+    console.log(`[DataTableRenderer] ${section.key} - Initial data:`, result);
+    return result;
   });
+  const prevInitialDataRef = useRef(initialData);
   useEffect(() => {
-    const existingData = initialData && initialData[section.key] || [];
-    const newData = existingData.length > 0 ? existingData : [{ id: 0 }];
-    setData((prevData) => JSON.stringify(prevData) !== JSON.stringify(newData) ? newData : prevData);
+    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);
+    }
   }, [initialData, section.key]);
-  const debounce = useCallback((func, delay) => {
-    let timeoutId;
-    return (...args) => {
-      clearTimeout(timeoutId);
-      timeoutId = setTimeout(() => func.apply(null, args), delay);
-    };
-  }, []);
-  const debouncedUpdate = useCallback(
-    debounce((newData) => {
-      if (updateHandler) updateHandler(section.key, newData);
-    }, 300),
-    [section.key, updateHandler, debounce]
-  );
+  const prevDataRef = useRef(data);
+  const updateTimeoutRef = useRef(null);
   useEffect(() => {
-    if (!isStructuralChangeRef.current) {
-      debouncedUpdate(data);
-    } else {
-      isStructuralChangeRef.current = false;
+    if (prevDataRef.current !== data && updateHandler && typeof updateHandler === "function") {
+      prevDataRef.current = data;
+      if (updateTimeoutRef.current) {
+        clearTimeout(updateTimeoutRef.current);
+      }
+      updateTimeoutRef.current = setTimeout(() => {
+        updateHandler(section.key, data);
+      }, 300);
     }
-  }, [data, debouncedUpdate]);
-  const updateFieldValue = useCallback((field, rowIndex, value) => {
-    setData((prevData) => {
-      const newData = [...prevData];
-      newData[rowIndex][field.key] = value;
-      return newData;
-    });
+  }, [section.key, data, updateHandler]);
+  useEffect(() => {
+    return () => {
+      if (updateTimeoutRef.current) {
+        clearTimeout(updateTimeoutRef.current);
+      }
+    };
   }, []);
-  const getFieldError = useCallback((field, rowIndex) => {
-    return validationErrors[section.key]?.[rowIndex]?.[field.key];
-  }, [validationErrors, section.key]);
-  const renderError = useCallback((field, rowIndex) => {
-    const error = getFieldError(field, rowIndex);
-    return error ? /* @__PURE__ */ jsx("div", { className: "text-red-500 text-xs mt-1", children: error }) : null;
-  }, [getFieldError]);
-  const getFieldRenderer = useCallback((field) => {
+  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) => {
+      return validationErrors[section.key]?.[rowIndex]?.[field.key];
+    };
+    const renderError = (rowIndex) => {
+      const error = getFieldError(rowIndex);
+      return error ? /* @__PURE__ */ jsx("div", { className: "text-red-500 text-xs mt-1", children: error }) : null;
+    };
     switch (field.fieldtype) {
       case "text":
         return (props, rowIndex) => /* @__PURE__ */ jsxs("div", { children: [
@@ -75776,13 +75866,13 @@ function DataTableRenderer({ item, data: initialData, updateHandler, validationE
             Input$1,
             {
               value: props[field.key] || "",
-              onChange: (e) => updateFieldValue(field, rowIndex, e.target.value),
+              onChange: (e) => updateFieldValue(rowIndex, e.target.value),
               placeholder: field.placeholder || `Enter ${field.label}`,
               required: field.required,
-              className: `w-full ${getFieldError(field, rowIndex) ? "border-red-500" : ""}`
+              className: `w-full ${getFieldError(rowIndex) ? "border-red-500" : ""}`
             }
           ),
-          renderError(field, rowIndex)
+          renderError(rowIndex)
         ] });
       case "textarea":
         return (props, rowIndex) => /* @__PURE__ */ jsxs("div", { children: [
@@ -75790,14 +75880,14 @@ function DataTableRenderer({ item, data: initialData, updateHandler, validationE
             Textarea,
             {
               value: props[field.key] || "",
-              onChange: (e) => updateFieldValue(field, rowIndex, e.target.value),
+              onChange: (e) => updateFieldValue(rowIndex, e.target.value),
               placeholder: field.placeholder || `Enter ${field.label}`,
               required: field.required,
-              className: `w-full ${getFieldError(field, rowIndex) ? "border-red-500" : ""}`,
+              className: `w-full ${getFieldError(rowIndex) ? "border-red-500" : ""}`,
               rows: 3
             }
           ),
-          renderError(field, rowIndex)
+          renderError(rowIndex)
         ] });
       case "number":
         return (props, rowIndex) => /* @__PURE__ */ jsxs("div", { children: [
@@ -75806,13 +75896,58 @@ function DataTableRenderer({ item, data: initialData, updateHandler, validationE
             {
               type: "number",
               value: props[field.key] || "",
-              onChange: (e) => updateFieldValue(field, rowIndex, e.target.value),
+              onChange: (e) => updateFieldValue(rowIndex, e.target.value),
               placeholder: field.placeholder || `Enter ${field.label}`,
               required: field.required,
-              className: `w-full ${getFieldError(field, rowIndex) ? "border-red-500" : ""}`
+              className: `w-full ${getFieldError(rowIndex) ? "border-red-500" : ""}`
+            }
+          ),
+          renderError(rowIndex)
+        ] });
+      case "email":
+        return (props, rowIndex) => /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx(
+            Input$1,
+            {
+              type: "email",
+              value: props[field.key] || "",
+              onChange: (e) => updateFieldValue(rowIndex, e.target.value),
+              placeholder: field.placeholder || "Enter email address",
+              required: field.required,
+              className: `w-full ${getFieldError(rowIndex) ? "border-red-500" : ""}`
+            }
+          ),
+          renderError(rowIndex)
+        ] });
+      case "url":
+        return (props, rowIndex) => /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx(
+            Input$1,
+            {
+              type: "url",
+              value: props[field.key] || "",
+              onChange: (e) => updateFieldValue(rowIndex, e.target.value),
+              placeholder: field.placeholder || "Enter URL",
+              required: field.required,
+              className: `w-full ${getFieldError(rowIndex) ? "border-red-500" : ""}`
+            }
+          ),
+          renderError(rowIndex)
+        ] });
+      case "password":
+        return (props, rowIndex) => /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx(
+            Input$1,
+            {
+              type: "password",
+              value: props[field.key] || "",
+              onChange: (e) => updateFieldValue(rowIndex, e.target.value),
+              placeholder: field.placeholder || "Enter password",
+              required: field.required,
+              className: `w-full ${getFieldError(rowIndex) ? "border-red-500" : ""}`
             }
           ),
-          renderError(field, rowIndex)
+          renderError(rowIndex)
         ] });
       case "select":
       case "dropdown":
@@ -75821,62 +75956,232 @@ function DataTableRenderer({ item, data: initialData, updateHandler, validationE
             Select,
             {
               value: props[field.key] || "",
-              onChange: (value) => updateFieldValue(field, rowIndex, value),
+              onChange: (value) => updateFieldValue(rowIndex, value),
               options: field.options || [],
               placeholder: field.placeholder || `Select ${field.label}`,
               required: field.required,
-              className: `w-full ${getFieldError(field, rowIndex) ? "border-red-500" : ""}`
+              className: `w-full ${getFieldError(rowIndex) ? "border-red-500" : ""}`
             }
           ),
-          renderError(field, rowIndex)
+          renderError(rowIndex)
         ] });
+      case "multiselect":
+        return (props, rowIndex) => {
+          const currentValue = props[field.key] || [];
+          return /* @__PURE__ */ jsx(
+            MultiSelect$1,
+            {
+              selectedItems: currentValue,
+              onSelectionChange: (selectedItems) => updateFieldValue(rowIndex, selectedItems),
+              options: field.options || [],
+              placeholder: field.placeholder || `Select ${field.label}`,
+              className: "w-full"
+            }
+          );
+        };
       case "checkbox":
       case "boolean":
         return (props, rowIndex) => /* @__PURE__ */ jsx(
           Checkbox,
           {
             checked: Boolean(props[field.key]),
-            onChange: (checked) => updateFieldValue(field, rowIndex, checked),
+            onChange: (checked) => updateFieldValue(rowIndex, checked),
             label: field.placeholder || field.label,
             className: "w-full"
           }
         );
+      case "toggle":
+      case "switch":
+        return (props, rowIndex) => /* @__PURE__ */ jsx(
+          ToggleSwitch,
+          {
+            isOn: Boolean(props[field.key]),
+            onToggle: (isOn) => updateFieldValue(rowIndex, isOn),
+            label: field.placeholder || field.label,
+            className: "w-full"
+          }
+        );
+      case "date":
+        return (props, rowIndex) => /* @__PURE__ */ jsx(
+          DatePicker$1,
+          {
+            selectedDate: props[field.key] ? new Date(props[field.key]) : null,
+            onDateChange: (date) => updateFieldValue(rowIndex, date ? date.toISOString().split("T")[0] : ""),
+            placeholder: field.placeholder || "Select date",
+            className: "w-full"
+          }
+        );
+      case "datetime":
+        return (props, rowIndex) => /* @__PURE__ */ jsx(
+          Input$1,
+          {
+            type: "datetime-local",
+            value: props[field.key] || "",
+            onChange: (e) => updateFieldValue(rowIndex, e.target.value),
+            placeholder: field.placeholder || "Select date and time",
+            required: field.required,
+            className: "w-full"
+          }
+        );
+      case "time":
+        return (props, rowIndex) => /* @__PURE__ */ jsx(
+          Input$1,
+          {
+            type: "time",
+            value: props[field.key] || "",
+            onChange: (e) => updateFieldValue(rowIndex, e.target.value),
+            placeholder: field.placeholder || "Select time",
+            required: field.required,
+            className: "w-full"
+          }
+        );
+      case "radio":
+        return (props, rowIndex) => /* @__PURE__ */ jsx(
+          RadioGroup,
+          {
+            selectedValue: props[field.key] || "",
+            onValueChange: (value) => updateFieldValue(rowIndex, value),
+            options: field.options || [],
+            className: "w-full"
+          }
+        );
+      case "search":
+        return (props, rowIndex) => /* @__PURE__ */ jsx(
+          SearchBar,
+          {
+            value: props[field.key] || "",
+            onChange: (value) => updateFieldValue(rowIndex, value),
+            placeholder: field.placeholder || `Search ${field.label}`,
+            className: "w-full"
+          }
+        );
+      case "audience":
+        return (props, rowIndex) => {
+          const audienceData = props[field.key] || { users: [], groups: [], roles: [] };
+          const allAudience = [
+            ...audienceData.users || [],
+            ...audienceData.groups || [],
+            ...audienceData.roles || []
+          ];
+          return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx(AvatarGroup, { children: allAudience.length > 0 ? allAudience.slice(0, 3).map((aud, idx) => /* @__PURE__ */ jsx(
+              Avatar,
+              {
+                size: "small",
+                name: aud.name || aud.displayName || aud.id,
+                src: aud.avatarUrl
+              },
+              idx
+            )) : null }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                className: "text-blue-600 font-semibold hover:text-blue-800",
+                onClick: () => {
+                  setAudienceFieldName(field.key);
+                  setAudienceRowId(rowIndex);
+                },
+                children: allAudience.length > 0 ? "Edit" : "Assign"
+              }
+            )
+          ] });
+        };
+      case "color":
+        return (props, rowIndex) => /* @__PURE__ */ jsx(
+          Input$1,
+          {
+            type: "color",
+            value: props[field.key] || "#000000",
+            onChange: (e) => updateFieldValue(rowIndex, e.target.value),
+            className: "w-full h-10"
+          }
+        );
+      case "range":
+        return (props, rowIndex) => /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
+          /* @__PURE__ */ jsx(
+            Input$1,
+            {
+              type: "range",
+              value: props[field.key] || field.min || 0,
+              onChange: (e) => updateFieldValue(rowIndex, e.target.value),
+              min: field.min || 0,
+              max: field.max || 100,
+              step: field.step || 1,
+              className: "w-full"
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "text-sm text-gray-500", children: props[field.key] || field.min || 0 })
+        ] });
+      case "file":
+        return (props, rowIndex) => /* @__PURE__ */ jsx(
+          Input$1,
+          {
+            type: "file",
+            onChange: (e) => {
+              const file = e.target.files[0];
+              updateFieldValue(rowIndex, file ? file.name : "");
+            },
+            accept: field.accept,
+            className: "w-full"
+          }
+        );
+      case "hidden":
+        return (props, rowIndex) => /* @__PURE__ */ jsx(
+          Input$1,
+          {
+            type: "hidden",
+            value: props[field.key] || "",
+            onChange: (e) => updateFieldValue(rowIndex, e.target.value)
+          }
+        );
+      // Default fallback for unknown field types
       default:
         return (props, rowIndex) => /* @__PURE__ */ jsxs("div", { children: [
           /* @__PURE__ */ jsx(
             Input$1,
             {
               value: props[field.key] || "",
-              onChange: (e) => updateFieldValue(field, rowIndex, e.target.value),
+              onChange: (e) => updateFieldValue(rowIndex, e.target.value),
               placeholder: field.placeholder || `Enter ${field.label}`,
               required: field.required,
-              className: `w-full ${getFieldError(field, rowIndex) ? "border-red-500" : ""}`
+              className: `w-full ${getFieldError(rowIndex) ? "border-red-500" : ""}`
             }
           ),
-          renderError(field, rowIndex)
+          renderError(rowIndex)
         ] });
     }
-  }, [updateFieldValue, getFieldError, renderError]);
+  };
   const addBlankRow = useCallback(() => {
-    isStructuralChangeRef.current = true;
+    console.log("[DataTableRenderer] Adding blank row");
     setData((prevData) => {
-      const blankRow = { id: prevData.length };
-      section.fields.forEach((field) => blankRow[field.key] = field.fieldtype === "audience" ? { users: [], groups: [], roles: [] } : "");
+      console.log("[DataTableRenderer] Current data before add:", prevData);
+      const blankRow = {
+        id: prevData.length
+        // Assign next available ID
+      };
+      section.fields.forEach((field) => {
+        if (field.fieldtype === "audience") {
+          blankRow[field.key] = { users: [], groups: [], roles: [] };
+        } else {
+          blankRow[field.key] = field.default || "";
+        }
+      });
+      console.log("[DataTableRenderer] New blank row:", blankRow);
       const newData = [...prevData, blankRow];
-      setTimeout(() => updateHandler?.(section.key, newData), 0);
+      console.log("[DataTableRenderer] Updated data:", newData);
       return newData;
     });
-  }, [section.fields, updateHandler, section.key]);
+  }, [section.fields]);
   const removeRow = useCallback((index) => {
-    isStructuralChangeRef.current = true;
     setData((prevData) => {
-      if (prevData.length <= 1) return prevData;
+      if (prevData.length <= 1) {
+        return prevData;
+      }
       const newData = [...prevData];
       newData.splice(index, 1);
-      setTimeout(() => updateHandler?.(section.key, newData), 0);
       return newData;
     });
-  }, [updateHandler, section.key]);
+  }, []);
   const [draggedIndex, setDraggedIndex] = useState(null);
   const handleDragStart = useCallback((e, index) => {
     setDraggedIndex(index);
@@ -75892,9 +76197,9 @@ function DataTableRenderer({ item, data: initialData, updateHandler, validationE
     if (draggedIndex === null || draggedIndex === dropIndex) return;
     setData((prevData) => {
       const newData = [...prevData];
-      const item2 = newData[draggedIndex];
+      const draggedItem = newData[draggedIndex];
       newData.splice(draggedIndex, 1);
-      newData.splice(dropIndex, 0, item2);
+      newData.splice(dropIndex, 0, draggedItem);
       return newData;
     });
     setDraggedIndex(null);
@@ -75903,18 +76208,20 @@ function DataTableRenderer({ item, data: initialData, updateHandler, validationE
     setDraggedIndex(null);
   }, []);
   const handleAddAudience = useCallback((selectedEntities) => {
+    console.log("[DataTableRenderer] handleAddAudience called with:", selectedEntities);
     setData((prevData) => {
       const newData = [...prevData];
       if (audienceRowId !== null && audienceFieldName && newData[audienceRowId]) {
         const pendingInvites = selectedEntities.pendingInvites || [];
-        const users = pendingInvites.filter((i) => i.type === "User");
-        const groups = pendingInvites.filter((i) => i.type === "Group");
-        const roles = pendingInvites.filter((i) => i.type === "Role");
+        const users = pendingInvites.filter((invite) => invite.type === "User");
+        const groups = pendingInvites.filter((invite) => invite.type === "Group");
+        const roles = pendingInvites.filter((invite) => invite.type === "Role");
         newData[audienceRowId][audienceFieldName] = {
           users: [...newData[audienceRowId][audienceFieldName]?.users || [], ...users],
           groups: [...newData[audienceRowId][audienceFieldName]?.groups || [], ...groups],
           roles: [...newData[audienceRowId][audienceFieldName]?.roles || [], ...roles]
         };
+        console.log("[DataTableRenderer] Updated audience data:", newData[audienceRowId][audienceFieldName]);
       }
       return newData;
     });
@@ -75939,7 +76246,14 @@ function DataTableRenderer({ item, data: initialData, updateHandler, validationE
     /* @__PURE__ */ jsx("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxs("table", { className: "min-w-full bg-white border border-gray-300", style: { marginBottom: "20px" }, children: [
       /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { className: "bg-gray-50", children: [
         /* @__PURE__ */ jsx("th", { className: "px-4 py-2 w-10" }),
-        section.fields.map((field, idx) => /* @__PURE__ */ jsx("th", { className: "px-4 py-2 text-left text-sm font-medium text-gray-700", children: field.label || field.key }, idx)),
+        section.fields.map((field, idx) => /* @__PURE__ */ jsx(
+          "th",
+          {
+            className: "px-4 py-2 text-left text-sm font-medium text-gray-700",
+            children: field.label || field.key
+          },
+          idx
+        )),
         /* @__PURE__ */ jsx("th", { className: "px-4 py-2 w-16" })
       ] }) }),
       /* @__PURE__ */ jsx("tbody", { children: data.map((row, rowIndex) => /* @__PURE__ */ jsxs(
@@ -75952,16 +76266,31 @@ function DataTableRenderer({ item, data: initialData, updateHandler, validationE
           onDrop: (e) => handleDrop(e, rowIndex),
           onDragEnd: handleDragEnd,
           children: [
-            /* @__PURE__ */ jsx("td", { className: "px-4 py-2", children: /* @__PURE__ */ jsx("div", { className: "cursor-move text-gray-400 hover:text-gray-600", children: /* @__PURE__ */ jsx(GripVertical, { size: 16 }) }) }),
-            section.fields.map((field, fieldIndex) => /* @__PURE__ */ jsx("td", { className: "px-4 py-2", children: getFieldRenderer(field)(row, rowIndex) }, `field-${rowIndex}-${fieldIndex}-${field.key}`)),
-            /* @__PURE__ */ jsx("td", { className: "px-4 py-2", children: /* @__PURE__ */ jsx("button", { onClick: () => removeRow(rowIndex), className: "text-red-500 hover:text-red-700", title: "Delete row", children: /* @__PURE__ */ jsx(Trash, { size: 16 }) }) })
+            /* @__PURE__ */ jsx("td", { className: "px-4 py-2 ", children: /* @__PURE__ */ jsx("div", { className: "cursor-move text-gray-400 hover:text-gray-600", children: /* @__PURE__ */ jsx(GripVertical, { size: 16 }) }) }),
+            section.fields.map((field, fieldIndex) => /* @__PURE__ */ jsx("td", { className: "px-4 py-2 ", children: getFieldRenderer(field)(row, rowIndex) }, fieldIndex)),
+            /* @__PURE__ */ jsx("td", { className: "px-4 py-2 ", children: /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: () => removeRow(rowIndex),
+                className: "text-red-500 hover:text-red-700",
+                title: "Delete row",
+                children: /* @__PURE__ */ jsx(Trash, { size: 16 })
+              }
+            ) })
           ]
         },
-        `row-${rowIndex}-${row.id || "empty"}`
+        rowIndex
       )) })
     ] }) }),
     audienceRowId !== null && (() => {
-      const existingAudienceData = data[audienceRowId]?.[audienceFieldName] || { users: [], groups: [], roles: [] };
+      const existingAudienceData = data[audienceRowId] && data[audienceRowId][audienceFieldName] ? {
+        users: data[audienceRowId][audienceFieldName].users || [],
+        groups: data[audienceRowId][audienceFieldName].groups || [],
+        roles: data[audienceRowId][audienceFieldName].roles || []
+      } : { users: [], groups: [], roles: [] };
+      console.log("[DataTableRenderer] Opening modal with existing data:", existingAudienceData);
+      console.log("[DataTableRenderer] Row data:", data[audienceRowId]);
+      console.log("[DataTableRenderer] Field name:", audienceFieldName);
       return /* @__PURE__ */ jsx(
         AddUserGroupsRolesModal,
         {
@@ -75978,7 +76307,6 @@ function DataTableRenderer({ item, data: initialData, updateHandler, validationE
     })()
   ] });
 }
-const DataTableRenderer$1 = React__default.memo(DataTableRenderer, (prevProps, nextProps) => 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}
 
@@ -76415,8 +76743,8 @@ const UnknownType = ({ item }) => /* @__PURE__ */ jsxs("div", { className: "p-3
   /* @__PURE__ */ jsx("span", { className: "font-mono", children: String(item?.type ?? "N/A") })
 ] });
 const REGISTRY = /* @__PURE__ */ Object.create(null);
-REGISTRY.section = SectionRenderer$1;
-REGISTRY.datatable = DataTableRenderer$1;
+REGISTRY.section = SectionRenderer;
+REGISTRY.datatable = DataTableRenderer;
 REGISTRY.managecollectionlist = ManageCollectionListRenderer;
 REGISTRY["manage-collection-list"] = ManageCollectionListRenderer;
 function toType(input) {
@@ -76585,10 +76913,12 @@ function DynamicConfig({
       }
     }
   }, [configdata, reload, appid, disableApi]);
-  const handleSectionChange = React__default.useCallback((name, sectiondata) => {
+  const handleSectionChange = (name, sectiondata) => {
     setData((prev) => {
-      const newData = JSON.parse(JSON.stringify(prev || {}));
-      newData[name] = sectiondata;
+      const newData = {
+        ...prev,
+        [name]: sectiondata
+      };
       return newData;
     });
     setValidationErrors((prevErrors) => {
@@ -76598,7 +76928,7 @@ function DynamicConfig({
       }
       return newErrors;
     });
-  }, []);
+  };
   const validateRequiredFields = () => {
     const errors = {};
     if (!config || !data) {
@@ -76801,7 +77131,7 @@ function DynamicConfig({
           category: "primary",
           onClick: handleSave,
           disabled: saving,
-          label: "Apply",
+          label: saving ? "Saving..." : "Apply",
           type: "submit"
         }
       )
@@ -215269,5 +215599,5 @@ function CustomDataGrid({
   );
 }
 
-export { AddUserGroupsRolesModal, Avatar, AvatarGroup, Badge, Breadcrumbs, Button$2 as Button, Checkbox, CustomDataGrid, CustomDialog, CustomGridToolbar, DatePicker$1 as DatePicker, DateRangePicker$1 as DateRangePicker, DynamicConfig, FileUploadModal, FullConfigPage, FullScreenLoader, GenericFilter, Input$1 as Input, ManageCollectionList, Modal, MultiSelect$1 as MultiSelect, OptionsMenu, PageHeader, PageLayout, Pagination, RadioGroup, SearchBar, Select, Sidebar, Spinner, Textarea, ToastProvider, ToggleSwitch, Tooltip$1 as Tooltip, TreeView, UnifyedCoreButton, WizardModal, adGroupsListSearchApi, axiosDelete, axiosGet, axiosPatch, axiosPost, axiosPut, cookies$1 as cookies, createHttpClient, directoryPermissionsApi, filePermissionsApi, gateWayUrl, gatewayBase, getBaseUrl, getSnapshot, http, localStore, myDriveGatewayBaseV2, notify, provisioningBase, rbacBase, searchRolesApi, sessionStore, userSearchBase };
+export { AddUserGroupsRolesModal, Avatar, AvatarGroup$1 as AvatarGroup, Badge, Breadcrumbs, Button$2 as Button, Checkbox, CustomDataGrid, CustomDialog, CustomGridToolbar, DatePicker$1 as DatePicker, DateRangePicker$1 as DateRangePicker, DynamicConfig, FileUploadModal, FullConfigPage, FullScreenLoader, GenericFilter, Input$1 as Input, ManageCollectionList, Modal, MultiSelect$1 as MultiSelect, OptionsMenu, PageHeader, PageLayout, Pagination, RadioGroup, SearchBar, Select, Sidebar, Spinner, Textarea, ToastProvider, ToggleSwitch, Tooltip$1 as Tooltip, TreeView, UnifyedCoreButton, WizardModal, adGroupsListSearchApi, axiosDelete, axiosGet, axiosPatch, axiosPost, axiosPut, cookies$1 as cookies, createHttpClient, directoryPermissionsApi, filePermissionsApi, gateWayUrl, gatewayBase, getBaseUrl, getSnapshot, http, localStore, myDriveGatewayBaseV2, notify, provisioningBase, rbacBase, searchRolesApi, sessionStore, userSearchBase };
 //# sourceMappingURL=unifyedx-storybook-new.es.js.map