unifyedx-storybook-new 0.1.71 → 0.1.73

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

@@ -75254,22 +75254,20 @@ function SectionRenderer({ item, data: initialData, updateHandler, validationErr
     const sectionData = initialData && initialData[item.key] || (item.type === "datatable" ? [] : {});
     return sectionData;
   });
-  const getOptions = React__default.useCallback((field) => {
-    if (field.optionsFrom) {
+  const getDynamicOptions = (field) => {
+    if (field.optionsFrom && initialData) {
       const { config, valueField, labelField } = field.optionsFrom;
-      const configData = initialData[config];
+      const configData = initialData[config] || [];
       if (Array.isArray(configData)) {
         return configData.map((item2) => ({
-          id: item2[valueField],
-          // Add id for backward compatibility
-          value: item2[valueField],
-          label: item2[labelField]
+          id: item2[valueField] || "",
+          value: item2[valueField] || "",
+          label: item2[labelField] || ""
         }));
       }
-      return [];
     }
     return field.options || [];
-  }, [initialData]);
+  };
   const handleFieldChange = React__default.useCallback((fieldKey, value) => {
     setData((prevData) => {
       const newData = { ...prevData, [fieldKey]: value };
@@ -75415,7 +75413,23 @@ function SectionRenderer({ item, data: initialData, updateHandler, validationErr
             name: field.key,
             value: data[field.key] || field.default || "",
             onChange: (value) => handleFieldChange(field.key, value),
-            options: getOptions(field),
+            options: field.options || [],
+            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 === "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,
@@ -75718,12 +75732,7 @@ function DataTableRenderer({ item, data: initialData, updateHandler, validationE
   useEffect(() => {
     const existingData = initialData && initialData[section.key] || [];
     const newData = existingData.length > 0 ? existingData : [{ id: 0 }];
-    setData((prevData) => {
-      if (JSON.stringify(prevData) !== JSON.stringify(newData)) {
-        return newData;
-      }
-      return prevData;
-    });
+    setData((prevData) => JSON.stringify(prevData) !== JSON.stringify(newData) ? newData : prevData);
   }, [initialData, section.key]);
   const debounce = useCallback((func, delay) => {
     let timeoutId;
@@ -75734,9 +75743,7 @@ function DataTableRenderer({ item, data: initialData, updateHandler, validationE
   }, []);
   const debouncedUpdate = useCallback(
     debounce((newData) => {
-      if (updateHandler && typeof updateHandler === "function") {
-        updateHandler(section.key, newData);
-      }
+      if (updateHandler) updateHandler(section.key, newData);
     }, 300),
     [section.key, updateHandler, debounce]
   );
@@ -75761,20 +75768,6 @@ function DataTableRenderer({ item, data: initialData, updateHandler, validationE
     const error = getFieldError(field, rowIndex);
     return error ? /* @__PURE__ */ jsx("div", { className: "text-red-500 text-xs mt-1", children: error }) : null;
   }, [getFieldError]);
-  const getDynamicOptions = useCallback((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 || [];
-  }, [initialData]);
   const getFieldRenderer = useCallback((field) => {
     switch (field.fieldtype) {
       case "text":
@@ -75821,58 +75814,22 @@ function DataTableRenderer({ item, data: initialData, updateHandler, validationE
           ),
           renderError(field, rowIndex)
         ] });
-      case "email":
+      case "select":
+      case "dropdown":
         return (props, rowIndex) => /* @__PURE__ */ jsxs("div", { children: [
           /* @__PURE__ */ jsx(
-            Input$1,
+            Select,
             {
-              type: "email",
               value: props[field.key] || "",
-              onChange: (e) => updateFieldValue(field, rowIndex, e.target.value),
-              placeholder: field.placeholder || "Enter email address",
+              onChange: (value) => updateFieldValue(field, rowIndex, value),
+              options: field.options || [],
+              placeholder: field.placeholder || `Select ${field.label}`,
               required: field.required,
               className: `w-full ${getFieldError(field, rowIndex) ? "border-red-500" : ""}`
             }
           ),
           renderError(field, rowIndex)
         ] });
-      case "select":
-      case "dropdown":
-        return (props, rowIndex) => {
-          const [options, setOptions] = useState([]);
-          const handleOpen = () => {
-            setOptions(getDynamicOptions(field));
-          };
-          return /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx(
-              Select,
-              {
-                value: props[field.key] || "",
-                onChange: (value) => updateFieldValue(field, rowIndex, value),
-                options,
-                onOpen: handleOpen,
-                placeholder: field.placeholder || `Select ${field.label}`,
-                required: field.required,
-                className: `w-full ${getFieldError(field, rowIndex) ? "border-red-500" : ""}`
-              }
-            ),
-            renderError(field, rowIndex)
-          ] });
-        };
-      case "multiselect":
-        return (props, rowIndex) => {
-          const currentValue = props[field.key] || [];
-          return /* @__PURE__ */ jsx(
-            MultiSelect$1,
-            {
-              selectedItems: currentValue,
-              onSelectionChange: (selectedItems) => updateFieldValue(field, rowIndex, selectedItems),
-              options: field.options || [],
-              placeholder: field.placeholder || `Select ${field.label}`,
-              className: "w-full"
-            }
-          );
-        };
       case "checkbox":
       case "boolean":
         return (props, rowIndex) => /* @__PURE__ */ jsx(
@@ -75884,27 +75841,6 @@ function DataTableRenderer({ item, data: initialData, updateHandler, validationE
             className: "w-full"
           }
         );
-      case "toggle":
-      case "switch":
-        return (props, rowIndex) => /* @__PURE__ */ jsx(
-          ToggleSwitch,
-          {
-            isOn: Boolean(props[field.key]),
-            onToggle: (isOn) => updateFieldValue(field, 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(field, rowIndex, date ? date.toISOString().split("T")[0] : ""),
-            placeholder: field.placeholder || "Select date",
-            className: "w-full"
-          }
-        );
       default:
         return (props, rowIndex) => /* @__PURE__ */ jsxs("div", { children: [
           /* @__PURE__ */ jsx(
@@ -75920,24 +75856,14 @@ function DataTableRenderer({ item, data: initialData, updateHandler, validationE
           renderError(field, rowIndex)
         ] });
     }
-  }, [updateFieldValue, getDynamicOptions, getFieldError, renderError]);
+  }, [updateFieldValue, getFieldError, renderError]);
   const addBlankRow = useCallback(() => {
     isStructuralChangeRef.current = true;
     setData((prevData) => {
       const blankRow = { id: prevData.length };
-      section.fields.forEach((field) => {
-        if (field.fieldtype === "audience") {
-          blankRow[field.key] = { users: [], groups: [], roles: [] };
-        } else {
-          blankRow[field.key] = "";
-        }
-      });
+      section.fields.forEach((field) => blankRow[field.key] = field.fieldtype === "audience" ? { users: [], groups: [], roles: [] } : "");
       const newData = [...prevData, blankRow];
-      setTimeout(() => {
-        if (updateHandler && typeof updateHandler === "function") {
-          updateHandler(section.key, newData);
-        }
-      }, 0);
+      setTimeout(() => updateHandler?.(section.key, newData), 0);
       return newData;
     });
   }, [section.fields, updateHandler, section.key]);
@@ -75947,11 +75873,7 @@ function DataTableRenderer({ item, data: initialData, updateHandler, validationE
       if (prevData.length <= 1) return prevData;
       const newData = [...prevData];
       newData.splice(index, 1);
-      setTimeout(() => {
-        if (updateHandler && typeof updateHandler === "function") {
-          updateHandler(section.key, newData);
-        }
-      }, 0);
+      setTimeout(() => updateHandler?.(section.key, newData), 0);
       return newData;
     });
   }, [updateHandler, section.key]);
@@ -75970,9 +75892,9 @@ function DataTableRenderer({ item, data: initialData, updateHandler, validationE
     if (draggedIndex === null || draggedIndex === dropIndex) return;
     setData((prevData) => {
       const newData = [...prevData];
-      const draggedItem = newData[draggedIndex];
+      const item2 = newData[draggedIndex];
       newData.splice(draggedIndex, 1);
-      newData.splice(dropIndex, 0, draggedItem);
+      newData.splice(dropIndex, 0, item2);
       return newData;
     });
     setDraggedIndex(null);
@@ -75985,9 +75907,9 @@ function DataTableRenderer({ item, data: initialData, updateHandler, validationE
       const newData = [...prevData];
       if (audienceRowId !== null && audienceFieldName && newData[audienceRowId]) {
         const pendingInvites = selectedEntities.pendingInvites || [];
-        const users = pendingInvites.filter((invite) => invite.type === "User");
-        const groups = pendingInvites.filter((invite) => invite.type === "Group");
-        const roles = pendingInvites.filter((invite) => invite.type === "Role");
+        const users = pendingInvites.filter((i) => i.type === "User");
+        const groups = pendingInvites.filter((i) => i.type === "Group");
+        const roles = pendingInvites.filter((i) => i.type === "Role");
         newData[audienceRowId][audienceFieldName] = {
           users: [...newData[audienceRowId][audienceFieldName]?.users || [], ...users],
           groups: [...newData[audienceRowId][audienceFieldName]?.groups || [], ...groups],
@@ -76030,28 +75952,16 @@ 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) }, `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 }) }) })
           ]
         },
         `row-${rowIndex}-${row.id || "empty"}`
       )) })
     ] }) }),
     audienceRowId !== null && (() => {
-      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: [] };
+      const existingAudienceData = data[audienceRowId]?.[audienceFieldName] || { users: [], groups: [], roles: [] };
       return /* @__PURE__ */ jsx(
         AddUserGroupsRolesModal,
         {
@@ -76068,9 +75978,7 @@ 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;
-});
+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}