unifyedx-storybook-new 0.1.69 → 0.1.71

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$1 = ({ children, max = 4, truncatedMessage = "Members", ...props }) => {
+const AvatarGroup = ({ children, max = 4, truncatedMessage = "Members", ...props }) => {
   const avatars = React__default.Children.toArray(children);
   const visibleAvatars = avatars.slice(0, max);
   const hiddenCount = avatars.length - max;
@@ -75705,7 +75705,6 @@ const SectionRenderer$1 = React__default.memo(SectionRenderer, (prevProps, nextP
   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;
   const [section, setSection] = useState(item);
@@ -75726,14 +75725,14 @@ function DataTableRenderer({ item, data: initialData, updateHandler, validationE
       return prevData;
     });
   }, [initialData, section.key]);
-  const debounce = React__default.useCallback((func, delay) => {
+  const debounce = useCallback((func, delay) => {
     let timeoutId;
     return (...args) => {
       clearTimeout(timeoutId);
       timeoutId = setTimeout(() => func.apply(null, args), delay);
     };
   }, []);
-  const debouncedUpdate = React__default.useCallback(
+  const debouncedUpdate = useCallback(
     debounce((newData) => {
       if (updateHandler && typeof updateHandler === "function") {
         updateHandler(section.key, newData);
@@ -75748,46 +75747,35 @@ function DataTableRenderer({ item, data: initialData, updateHandler, validationE
       isStructuralChangeRef.current = false;
     }
   }, [data, debouncedUpdate]);
-  const updateFieldValue = React__default.useCallback((field, rowIndex, value) => {
+  const updateFieldValue = useCallback((field, rowIndex, value) => {
     setData((prevData) => {
       const newData = [...prevData];
       newData[rowIndex][field.key] = value;
       return newData;
     });
   }, []);
-  const getFieldError = React__default.useCallback((field, rowIndex) => {
+  const getFieldError = useCallback((field, rowIndex) => {
     return validationErrors[section.key]?.[rowIndex]?.[field.key];
   }, [validationErrors, section.key]);
-  const renderError = React__default.useCallback((field, rowIndex) => {
+  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 fieldOptionsCache = React__default.useMemo(() => {
-    const cache = /* @__PURE__ */ new Map();
-    section.fields.forEach((field) => {
-      if (field.optionsFrom && initialData) {
-        const { config, valueField, labelField } = field.optionsFrom;
-        const configData = initialData[config] || [];
-        if (Array.isArray(configData)) {
-          const options = configData.map((item2) => ({
-            id: item2[valueField] || "",
-            value: item2[valueField] || "",
-            label: item2[labelField] || ""
-          }));
-          cache.set(field.key, options);
-        } else {
-          cache.set(field.key, field.options || []);
-        }
-      } else {
-        cache.set(field.key, field.options || []);
+  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 cache;
-  }, [initialData, section.fields]);
-  const getDynamicOptions = React__default.useCallback((field) => {
-    return fieldOptionsCache.get(field.key) || [];
-  }, [fieldOptionsCache]);
-  const getFieldRenderer = React__default.useCallback((field) => {
+    }
+    return field.options || [];
+  }, [initialData]);
+  const getFieldRenderer = useCallback((field) => {
     switch (field.fieldtype) {
       case "text":
         return (props, rowIndex) => /* @__PURE__ */ jsxs("div", { children: [
@@ -75848,40 +75836,13 @@ function DataTableRenderer({ item, data: initialData, updateHandler, validationE
           ),
           renderError(field, rowIndex)
         ] });
-      case "url":
-        return (props, rowIndex) => /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx(
-            Input$1,
-            {
-              type: "url",
-              value: props[field.key] || "",
-              onChange: (e) => updateFieldValue(field, rowIndex, e.target.value),
-              placeholder: field.placeholder || "Enter URL",
-              required: field.required,
-              className: `w-full ${getFieldError(field, rowIndex) ? "border-red-500" : ""}`
-            }
-          ),
-          renderError(field, rowIndex)
-        ] });
-      case "password":
-        return (props, rowIndex) => /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx(
-            Input$1,
-            {
-              type: "password",
-              value: props[field.key] || "",
-              onChange: (e) => updateFieldValue(field, rowIndex, e.target.value),
-              placeholder: field.placeholder || "Enter password",
-              required: field.required,
-              className: `w-full ${getFieldError(field, rowIndex) ? "border-red-500" : ""}`
-            }
-          ),
-          renderError(field, rowIndex)
-        ] });
       case "select":
       case "dropdown":
         return (props, rowIndex) => {
-          const options = getDynamicOptions(field);
+          const [options, setOptions] = useState([]);
+          const handleOpen = () => {
+            setOptions(getDynamicOptions(field));
+          };
           return /* @__PURE__ */ jsxs("div", { children: [
             /* @__PURE__ */ jsx(
               Select,
@@ -75889,6 +75850,7 @@ function DataTableRenderer({ item, data: initialData, updateHandler, validationE
                 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" : ""}`
@@ -75904,7 +75866,7 @@ function DataTableRenderer({ item, data: initialData, updateHandler, validationE
             MultiSelect$1,
             {
               selectedItems: currentValue,
-              onSelectionChange: (selectedItems) => updateFieldValue(rowIndex, selectedItems),
+              onSelectionChange: (selectedItems) => updateFieldValue(field, rowIndex, selectedItems),
               options: field.options || [],
               placeholder: field.placeholder || `Select ${field.label}`,
               className: "w-full"
@@ -75917,7 +75879,7 @@ function DataTableRenderer({ item, data: initialData, updateHandler, validationE
           Checkbox,
           {
             checked: Boolean(props[field.key]),
-            onChange: (checked) => updateFieldValue(rowIndex, checked),
+            onChange: (checked) => updateFieldValue(field, rowIndex, checked),
             label: field.placeholder || field.label,
             className: "w-full"
           }
@@ -75928,7 +75890,7 @@ function DataTableRenderer({ item, data: initialData, updateHandler, validationE
           ToggleSwitch,
           {
             isOn: Boolean(props[field.key]),
-            onToggle: (isOn) => updateFieldValue(rowIndex, isOn),
+            onToggle: (isOn) => updateFieldValue(field, rowIndex, isOn),
             label: field.placeholder || field.label,
             className: "w-full"
           }
@@ -75938,135 +75900,11 @@ function DataTableRenderer({ item, data: initialData, updateHandler, validationE
           DatePicker$1,
           {
             selectedDate: props[field.key] ? new Date(props[field.key]) : null,
-            onDateChange: (date) => updateFieldValue(rowIndex, date ? date.toISOString().split("T")[0] : ""),
+            onDateChange: (date) => updateFieldValue(field, 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(field, 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(
@@ -76082,14 +75920,11 @@ function DataTableRenderer({ item, data: initialData, updateHandler, validationE
           renderError(field, rowIndex)
         ] });
     }
-  }, [updateFieldValue, validationErrors, section.key, initialData, getDynamicOptions, getFieldError, renderError]);
+  }, [updateFieldValue, getDynamicOptions, getFieldError, renderError]);
   const addBlankRow = useCallback(() => {
     isStructuralChangeRef.current = true;
     setData((prevData) => {
-      const blankRow = {
-        id: prevData.length
-        // Assign next available ID
-      };
+      const blankRow = { id: prevData.length };
       section.fields.forEach((field) => {
         if (field.fieldtype === "audience") {
           blankRow[field.key] = { users: [], groups: [], roles: [] };
@@ -76109,9 +75944,7 @@ function DataTableRenderer({ item, data: initialData, updateHandler, validationE
   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(() => {
@@ -76184,14 +76017,7 @@ 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(
@@ -218794,5 +218620,5 @@ const CustomDataGrid = forwardRef((props, ref) => {
 });
 CustomDataGrid.displayName = "CustomDataGrid";
 
-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 };
+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 };
 //# sourceMappingURL=unifyedx-storybook-new.es.js.map