@acvl/frontend-components 0.0.31 → 0.0.33

package/dist/esm/index.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { useTheme, useMediaQuery, Tooltip, IconButton, Button, Grid, FormGroup, FormHelperText as FormHelperText$1, Drawer, Box, Stack, CircularProgress, Typography as Typography$1, List as List$1, ListItem as ListItem$1, ListSubheader, styled as styled$1, LinearProgress, Autocomplete, Checkbox, Slider, Switch, InputAdornment as InputAdornment$1, ToggleButtonGroup, ToggleButton, Dialog, DialogTitle, DialogContent as DialogContent$1, DialogContentText, DialogActions as DialogActions$1, ButtonGroup, Menu, ListItemIcon, Link, Card, CardHeader, Avatar, CardContent, Divider as Divider$1, Popper, Grow as Grow$1, Paper, ClickAwayListener, Badge, TablePagination, NoSsr, tooltipClasses, Collapse, Fade as Fade$1, Slide, Zoom, Snackbar, alpha as alpha$1, lighten, createTheme as createTheme$1, responsiveFontSizes } from '@mui/material';
+import { useTheme, useMediaQuery, Tooltip, IconButton, Button, Grid, FormGroup, FormHelperText as FormHelperText$1, Drawer, Box, Stack, CircularProgress, Typography as Typography$1, List as List$1, ListItem as ListItem$1, ListSubheader, styled as styled$1, LinearProgress, Autocomplete, Checkbox, Slider, Switch, InputAdornment as InputAdornment$1, ToggleButtonGroup, ToggleButton, Dialog, DialogTitle, DialogContent as DialogContent$1, DialogContentText, DialogActions as DialogActions$1, ButtonGroup, Menu, ListItemIcon, MenuItem as MenuItem$1, Link, Card, CardHeader, Avatar, CardContent, Divider as Divider$1, Popper, Grow as Grow$1, Paper, ClickAwayListener, Badge, TablePagination, NoSsr, tooltipClasses, Collapse, Fade as Fade$1, Slide, Zoom, Snackbar, alpha as alpha$1, lighten, createTheme as createTheme$1, responsiveFontSizes } from '@mui/material';
 import EditIcon from '@mui/icons-material/Edit';
 import * as React from 'react';
 import React__default, { useCallback, useEffect, isValidElement, cloneElement, Children, createContext, useContext, useState, useMemo, useRef, useImperativeHandle, useLayoutEffect, Suspense, forwardRef } from 'react';
@@ -41,15 +41,12 @@ import BaseFocusTrap from '@mui/material/Unstable_TrapFocus';
 import DialogContent from '@mui/material/DialogContent';
 import MuiDialog, { dialogClasses } from '@mui/material/Dialog';
 import debounce from 'lodash/debounce';
-import { get, invoke, map, find, groupBy, forEach as forEach$1, findIndex, mergeWith, isArray, omit, set as set$1, every, includes as includes$1, merge as merge$2, countBy, isNumber, isEmpty as isEmpty$1, isBoolean, isEqual as isEqual$1, debounce as debounce$1, some } from 'lodash';
+import { get, map, find, groupBy, forEach, findIndex, mergeWith, isArray, omit, set as set$1, every, includes, merge as merge$2, countBy, isNumber, isEmpty as isEmpty$1, isBoolean, isEqual as isEqual$1, debounce as debounce$1, some } from 'lodash';
 import { produce } from 'immer';
 import set from 'lodash/set';
 import get$1 from 'lodash/get';
 import isEmpty from 'lodash/isEmpty';
-import isNull from 'lodash/isNull';
 import isEqual from 'lodash/isEqual';
-import forEach from 'lodash/forEach';
-import includes from 'lodash/includes';
 import CancelIcon from '@mui/icons-material/Cancel';
 import HistoryIcon from '@mui/icons-material/History';
 import { Timeline, TimelineItem, TimelineSeparator, TimelineDot, TimelineConnector, TimelineContent, timelineItemClasses } from '@mui/lab';
@@ -69,20 +66,21 @@ import CheckBoxOutlineBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank';
 import CheckBoxIcon from '@mui/icons-material/CheckBox';
 import { Visibility, VisibilityOff } from '@mui/icons-material';
 import merge$1 from 'lodash/merge';
+import UploadFileIcon from '@mui/icons-material/UploadFile';
+import ClearIcon$1 from '@mui/icons-material/Clear';
 import SaveIcon from '@mui/icons-material/Save';
 import AddIcon from '@mui/icons-material/Add';
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 import LinearProgress$1 from '@mui/material/LinearProgress';
 import AttachFileIcon from '@mui/icons-material/AttachFile';
+import MoreVertIcon from '@mui/icons-material/MoreVert';
 import { useGridApiContext, ToolbarButton, QuickFilter, QuickFilterTrigger, QuickFilterControl, QuickFilterClear, ColumnsPanelTrigger, Toolbar, useGridSelector, gridPaginationSelector, GridRow, GridRowEditStartReasons, GridRowModes, GridActionsCellItem, useGridApiRef, DataGrid, GridRowEditStopReasons, GridEditSingleSelectCell, GridEditInputCell, GridEditBooleanCell, GridActionsCell } from '@mui/x-data-grid';
 import Tooltip$1 from '@mui/material/Tooltip';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import ExpandLessIcon from '@mui/icons-material/ExpandLess';
 import Menu$1 from '@mui/material/Menu';
-import MoreVertIcon from '@mui/icons-material/MoreVert';
 import SearchIcon from '@mui/icons-material/Search';
 import FilterListIcon from '@mui/icons-material/FilterList';
-import ClearIcon$1 from '@mui/icons-material/Clear';
 import FilterAltIcon from '@mui/icons-material/FilterAlt';
 import FilterNoneIcon from '@mui/icons-material/FilterNone';
 import CheckIcon from '@mui/icons-material/Check';
@@ -25648,68 +25646,65 @@ dayjs.locale(es);
 dayjs.extend(duration);
 
 // ==============================|| JSON ||============================== //
+const setValue = (formType, form, key, value) => {
+    if (formType === "json")
+        set(form, key, value);
+    else
+        form.append(key, value);
+};
 const typeSwitch = ({ base_object, base_key, response, submitData, useLabel, data, props, formType, }) => {
     const ignore = get$1(props, `${base_key}.ignore`, false);
     if (ignore || ["obj_permissions", "has_history"].includes(base_key))
         return;
-    const altered_key = invoke(props, `${base_key}.alter_key`, base_key);
+    const altered_key = props?.[base_key]?.alter_key?.(base_key);
     const key = altered_key || base_key;
-    const altered_obj = invoke(props, `${base_key}.alter_value`, base_object, submitData);
+    const altered_obj = props?.[base_key]?.alter_value?.(base_object, submitData);
     const object = altered_obj || base_object;
-    const setValue = (form, key, value) => {
-        if (formType === "json") {
-            set(form, key, value);
-        }
-        else if (formType === "formData") {
-            form.append(key, value);
-        }
-    };
     switch (typeof object) {
         case "string":
-            if (invoke(props, `${base_key}.extra_validation`, object))
+            if (props?.[base_key]?.extra_validation?.(object))
                 return;
-            setValue(response, key, isEmpty(object) ? "" : object);
+            setValue(formType, response, key, isEmpty(object) ? "" : object);
             break;
         case "number":
-            setValue(response, key, object);
+            setValue(formType, response, key, object);
             break;
         case "boolean":
-            setValue(response, key, object);
+            setValue(formType, response, key, object);
             break;
         case "object":
-            if (isNull(object) || isEmpty(object)) {
-                if (includes(key, "after") || includes(key, "before"))
-                    setValue(response, key, "");
+            if (object === null || isEmpty(object)) {
+                if (key.includes("after") || key.includes("before"))
+                    setValue(formType, response, key, "");
                 else
-                    setValue(response, key, object);
+                    setValue(formType, response, key, object);
             }
             else if (object instanceof File) {
-                setValue(response, key, object);
+                setValue(formType, response, key, object);
             }
             else if (dayjs.isDayjs(object)) {
-                setValue(response, key, object.format(get$1(props, `${key}.format`, "YYYY-MM-DD")));
+                setValue(formType, response, key, object.format(get$1(props, `${key}.format`, "YYYY-MM-DD")));
             }
             else if ("label" in object && "value" in object) {
                 if (useLabel)
-                    setValue(response, key, object["label"]);
+                    setValue(formType, response, key, object["label"]);
                 else
-                    setValue(response, key, object["value"]);
+                    setValue(formType, response, key, object["value"]);
             }
             else if (Array.isArray(object)) {
-                // it is an array
                 if (object.length &&
-                    typeof object[0] == "object" &&
+                    typeof object[0] === "object" &&
                     !Array.isArray(object[0]) &&
                     "value" in object[0] &&
-                    object[0]["value"] == "all") {
+                    object[0]["value"] === "all") {
                     // for data grid filters
-                    setValue(response, key, "");
+                    setValue(formType, response, key, "");
                 }
                 else {
-                    forEach(object, (arrayItem, idx) => {
-                        if (typeof arrayItem == "object") {
+                    object.forEach((arrayItem, idx) => {
+                        if (typeof arrayItem === "object") {
                             if ("label" in arrayItem) {
-                                setValue(response, `${key}.${idx}`, function (item) {
+                                setValue(formType, response, `${key}.${idx}`, function (item) {
                                     if (useLabel)
                                         return item.label;
                                     else
@@ -25718,7 +25713,7 @@ const typeSwitch = ({ base_object, base_key, response, submitData, useLabel, dat
                             }
                             typeSwitch({
                                 base_object: arrayItem,
-                                base_key: `${key}.${idx}`,
+                                base_key: formType === "json" ? `${key}.${idx}` : `${key}[${idx}]`,
                                 response: response,
                                 useLabel: useLabel,
                                 data: data,
@@ -25732,21 +25727,21 @@ const typeSwitch = ({ base_object, base_key, response, submitData, useLabel, dat
                             if (keyArray)
                                 keyArray.push(arrayItem);
                             else
-                                setValue(response, key, [arrayItem]);
+                                setValue(formType, response, key, [arrayItem]);
                         }
                     });
                 }
             }
             else if (object instanceof Set) {
-                setValue(response, key, Array.from(object));
+                setValue(formType, response, key, Array.from(object));
             }
             else {
-                forEach(object, (value, key2) => {
+                Object.entries(object).forEach(([key2, value]) => {
                     if (key2 !== "id" && isEqual(get$1(data, `${key}.${key2}`), value))
                         return;
                     typeSwitch({
                         base_object: value,
-                        base_key: `${key}.${key2}`,
+                        base_key: formType === "json" ? `${key}.${key2}` : `${key}${key2}`,
                         response: response,
                         useLabel: useLabel,
                         data: data,
@@ -25758,14 +25753,15 @@ const typeSwitch = ({ base_object, base_key, response, submitData, useLabel, dat
             }
             break;
         default:
-            setValue(response, key, object);
+            setValue(formType, response, key, object);
             break;
     }
 };
-const jsonForm = ({ submitData, data, useLabel, props }) => {
-    const response = {};
-    forEach(submitData, function (value, key) {
-        if (key != "id" && isEqual(get$1(data, key), value))
+const formParser = ({ type, submitData, data, useLabel, props }) => {
+    const t = type || "json";
+    const response = t === "json" ? {} : new FormData();
+    Object.entries(submitData).forEach(([key, value]) => {
+        if (key !== "id" && isEqual(get$1(data, key), value))
             return;
         typeSwitch({
             base_object: value,
@@ -25775,29 +25771,11 @@ const jsonForm = ({ submitData, data, useLabel, props }) => {
             data: data,
             props: props,
             submitData: submitData,
-            formType: "json",
+            formType: t,
         });
     });
     return response;
 };
-const formDataForm = ({ submitData, data, useLabel, props }) => {
-    const formData = new FormData();
-    forEach(submitData, function (value, key) {
-        if (key != "id" && isEqual(get$1(data, key), value))
-            return;
-        typeSwitch({
-            base_object: value,
-            base_key: key,
-            response: formData,
-            useLabel: useLabel,
-            data: data,
-            props: props,
-            submitData: submitData,
-            formType: "formData",
-        });
-    });
-    return formData;
-};
 // ==============================|| ERRORS ||============================== //
 const setErrors = (form, error) => {
     if ("invalid_params" in error.data) {
@@ -25934,7 +25912,7 @@ const FileBox = (props) => {
     return (jsxs(Box, { bgcolor: grey[200], borderRadius: '12px', p: 2, display: 'flex', children: [jsx(Box, { flexGrow: 0.8, display: 'flex', justifyContent: 'left', alignItems: 'center', children: jsx(Typography$1, { fontWeight: 'bold', children: props.file.name.split('.')[0] }) }), jsx(Box, { flexGrow: 0.2, display: 'flex', justifyContent: 'right', alignItems: 'center', children: props.loadingRemove ? (jsx(CircularProgress, { size: '18px' })) : (jsx(Tooltip, { title: 'Remove', children: jsx(IconButton, { color: 'error', sx: { p: 0 }, onClick: props.handleRemove, children: jsx(DeleteIcon, {}) }) })) })] }));
 };
 
-const VisuallyHiddenInput = styled$1("input")({
+const VisuallyHiddenInput$1 = styled$1("input")({
     clipPath: "inset(50%)",
     height: 1,
     overflow: "hidden",
@@ -25953,7 +25931,7 @@ const FileUploadBox = (props) => {
     const Dropzone = ({ onChange, value }) => {
         const onDrop = useCallback((acceptedFiles) => {
             acceptedFiles.map((file) => {
-                const data = formDataForm({ submitData: { archivo: file } });
+                const data = formParser({ type: "formData", submitData: { archivo: file } });
                 validarCSV({
                     endpoint: props.csvProps.endpoint || "",
                     data: data,
@@ -26004,7 +25982,7 @@ const FileUploadBox = (props) => {
                 return;
             return Object.entries(rows).map(([row, errors]) => (jsx(RowErrors, { row: row, data: errors }, row)));
         };
-        return (jsx(Box$1, { width: 1, children: jsxs(Stack, { spacing: 2, children: [!file && !isLoading && (jsxs(Box$1, { component: "div", width: 1, display: "flex", justifyContent: "center", alignItems: "center", border: "1.5px dashed", borderRadius: "12px", py: 4, px: 2, borderColor: grey[800], bgcolor: grey[50], ...getRootProps(), children: [jsx(VisuallyHiddenInput, { id: "file-upload", type: "file", ...getInputProps() }), jsx(FileUploadIcon, { sx: {
+        return (jsx(Box$1, { width: 1, children: jsxs(Stack, { spacing: 2, children: [!file && !isLoading && (jsxs(Box$1, { component: "div", width: 1, display: "flex", justifyContent: "center", alignItems: "center", border: "1.5px dashed", borderRadius: "12px", py: 4, px: 2, borderColor: grey[800], bgcolor: grey[50], ...getRootProps(), children: [jsx(VisuallyHiddenInput$1, { id: "file-upload", type: "file", ...getInputProps() }), jsx(FileUploadIcon, { sx: {
                                     color: grey[800],
                                     pr: 1,
                                 } }), jsx(Typography, { variant: "body2", sx: { color: grey[800] }, children: isDragActive
@@ -26040,7 +26018,7 @@ const CSVUpload = (props) => {
     };
     const tag = useMemo(() => endpoint.split("/").at(-1), [endpoint]);
     const onSubmitHandler = (submitData) => {
-        const data = formDataForm({ submitData });
+        const data = formParser({ type: "formData", submitData });
         subirCSV({ endpoint, tagType: tag, data, custom: props.data?.custom })
             .unwrap()
             .then((response) => {
@@ -26091,10 +26069,10 @@ const mergeSettings = (baseSettings, mergingSettings) => {
 };
 const val = (value) => {
     if (Array.isArray(value)) {
-        return value.join(',');
+        return value.join(",");
     }
-    else if (typeof value == 'boolean') {
-        return value ? 'true' : 'false';
+    else if (typeof value == "boolean") {
+        return value ? "true" : "false";
     }
     else {
         return value;
@@ -26104,20 +26082,21 @@ const filterQuery = ({ filters }) => {
     if (!filters)
         return [];
     const queryParams = [];
-    forEach$1(filters, function (value, key) {
+    forEach(filters, function (value, key) {
         queryParams.push(`${key}=${val(value)}`);
     });
     return queryParams;
 };
 const filterGrid = ({ page, pageSize, filterModel, sortModel, ignoreSort }) => {
+    //GridArgs
     const queryParams = [];
     if (page)
         queryParams.push(`page=${page + 1}`);
     if (pageSize)
         queryParams.push(`page_size=${pageSize}`);
     if (filterModel.items) {
-        const jsonFilters = jsonForm({ submitData: filterModel.items });
-        forEach$1(jsonFilters, function (value, key) {
+        const jsonFilters = formParser({ submitData: filterModel.items });
+        forEach(jsonFilters, function (value, key) {
             queryParams.push(`${key}=${val(value)}`);
         });
     }
@@ -26125,28 +26104,28 @@ const filterGrid = ({ page, pageSize, filterModel, sortModel, ignoreSort }) => {
         queryParams.push(`search=${filterModel.quickFilterValues}`);
     }
     if (sortModel.length && !ignoreSort) {
-        const val = `${sortModel[0]?.sort == 'asc' ? '' : '-'}${sortModel[0]?.field}`;
+        const val = `${sortModel[0]?.sort == "asc" ? "" : "-"}${sortModel[0]?.field}`;
         queryParams.push(`ordering=${val}`);
     }
     return queryParams;
 };
 const query = (data, url, type) => {
     switch (type) {
-        case 'grid':
-            return `${url}?${filterGrid(data).join('&')}`;
-        case 'simpleFilter':
-            return `${url}?${filterQuery(data).join('&')}`;
-        case 'single':
+        case "grid":
+            return `${url}?${filterGrid(data).join("&")}`;
+        case "simpleFilter":
+            return `${url}?${filterQuery(data).join("&")}`;
+        case "single":
             return `${url}/${data.id}`;
     }
 };
 const tags = (result, type, invalidate) => {
     if (result) {
         if (!invalidate) {
-            if ('results' in result) {
+            if ("results" in result) {
                 return [
                     ...result.results.map(({ id }) => ({ type: type, id })),
-                    { type: type, id: 'LIST' },
+                    { type: type, id: "LIST" },
                 ];
             }
             else {
@@ -26154,14 +26133,12 @@ const tags = (result, type, invalidate) => {
             }
         }
         else {
-            return invalidate.request == 'post' ?
-                [{ type: type, id: 'LIST' }] :
-                []; // { type: type, id: result.id }
+            return invalidate.request == "post" ? [{ type: type, id: "LIST" }] : []; // { type: type, id: result.id }
         }
     }
     else {
         if (!invalidate) {
-            return [{ type: type, id: 'LIST' },];
+            return [{ type: type, id: "LIST" }];
         }
         else {
             return [];
@@ -26172,15 +26149,15 @@ async function manualCacheRefresh(api, id, dispatch, queryFulfilled, endpoints)
     try {
         const { data } = await queryFulfilled;
         if (endpoints.single) {
-            dispatch(api.util.updateQueryData(endpoints.single, { id: id.toString(), type: 'single' }, (draft) => {
-                Object.assign(draft, data['detail']);
+            dispatch(api.util.updateQueryData(endpoints.single, { id: id.toString(), type: "single" }, (draft) => {
+                Object.assign(draft, data["detail"]);
             }));
         }
         if (endpoints.multiple) {
-            dispatch(api.util.updateQueryData(endpoints.multiple, { type: 'all' }, (draft) => {
-                const index = findIndex(draft.results, ['id', id]);
+            dispatch(api.util.updateQueryData(endpoints.multiple, { type: "all" }, (draft) => {
+                const index = findIndex(draft.results, ["id", id]);
                 if (index > -1)
-                    Object.assign(draft.results[index], data['list']);
+                    Object.assign(draft.results[index], data["list"]);
             }));
         }
     }
@@ -26510,10 +26487,23 @@ const ControlledTimePicker = (props) => {
         } }));
 };
 
-const ControlledPhotoField = (props) => {
-    return (jsx(Controller, { control: props.control, name: props.name, render: ({ field: { onChange, onBlur, ref }, fieldState: { error } }) => (jsxs(FormGroup, { sx: { width: 1 }, color: 'secondary', children: [jsx("input", { type: "file", accept: "image/*", ref: ref, onBlur: onBlur, onChange: (e) => onChange(e.target.files && e.target.files[0]) }), jsx(FormHelperText$1, { error: !!error, children: error ? error.message : ' ' })] })) }));
+const VisuallyHiddenInput = styled$1("input")({
+    clip: "rect(0 0 0 0)",
+    clipPath: "inset(50%)",
+    height: 1,
+    overflow: "hidden",
+    position: "absolute",
+    bottom: 0,
+    left: 0,
+    whiteSpace: "nowrap",
+    width: 1,
+});
+const ControlledFileField = (props) => {
+    return (jsx(Controller, { control: props.control, name: props.name, render: ({ field: { value, onChange, onBlur, ref }, fieldState: { error } }) => {
+            return (jsxs(FormGroup, { sx: { width: 1 }, color: "secondary", children: [value ? (jsxs(Stack, { direction: "row", spacing: 1, width: 1, alignItems: "center", children: [jsx(Typography$1, { children: value.name }), jsx(IconButton, { onClick: () => onChange(null), children: jsx(ClearIcon$1, { color: "error" }) })] })) : (jsxs(Button, { component: "label", variant: "contained", startIcon: jsx(UploadFileIcon, {}), sx: { maxWidth: 200 }, ...props.extraProps?.slotProps?.button, children: ["Cargar", jsx(VisuallyHiddenInput, { type: "file", accept: "image/*", ref: ref, onBlur: onBlur, onChange: (e) => onChange(e.target.files && e.target.files[0]), ...props.extraProps?.slotProps?.input })] })), jsx(FormHelperText$1, { error: !!error, children: error ? error.message : " " })] }));
+        } }));
 };
-ControlledPhotoField.displayName = 'ControlledPhotoField';
+ControlledFileField.displayName = "ControlledFileField";
 
 // ==============================|| DESLIZADOR CONTROLADO ||============================== //
 const ControlledSlider = (props) => {
@@ -26526,7 +26516,8 @@ const ControlledSlider = (props) => {
 
 const DeleteConfirmationDialog = (props) => {
     const notifications = useNotifications();
-    const pathname = "temp";
+    const { pathname } = useLocation();
+    const navigate = useNavigate();
     const id = useMemo(() => props.id || pathname.split("/").at(-1), [pathname, props.id]);
     const [mutation] = props.mutation();
     const schema = object({ confirmation: string() });
@@ -26548,7 +26539,7 @@ const DeleteConfirmationDialog = (props) => {
                 handleClose();
             }
             else {
-                // props.navigate(-1);
+                navigate(-1);
                 form.reset();
             }
             notifications.show("Objeto removido exitosamente!", { severity: "success" });
@@ -26780,6 +26771,18 @@ const ButtonWithDrawer = (props) => {
                 }) })] }));
 };
 
+const MoreOptions = (props) => {
+    const [anchorEl, setAnchorEl] = useState(null);
+    const open = Boolean(anchorEl);
+    const handleClick = () => {
+        setAnchorEl(document.getElementById("extra-options"));
+    };
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
+    return (jsxs(Fragment, { children: [jsx(IconButton, { id: "extra-options", onClick: handleClick, children: jsx(MoreVertIcon, {}) }, "extra-options"), jsx(StyledMenu, { anchorEl: anchorEl, open: open, onClose: handleClose, children: props.options.map((option) => (jsxs(MenuItem$1, { onClick: option.onClick, children: [jsx(ListItemIcon, { children: option.icon }), option.title] }))) })] }));
+};
+
 const StatusBadge = (props) => {
     const color = useMemo(() => {
         switch (props?.severity) {
@@ -26993,7 +26996,7 @@ const generateSchema = (columns, columnsFilter, id) => {
     const tempSchema = z.object({});
     const dynamicSchema = {};
     const dv = {};
-    forEach$1(columns, function (column) {
+    forEach(columns, function (column) {
         if (column.filterable) {
             switch (column.type) {
                 case 'string':
@@ -27059,7 +27062,7 @@ const FiltersPopper = (props) => {
     useEffect(() => {
         if (props.filters.filterModel.items) {
             if (!every(props.filters.filterModel.items, function (_value, key) {
-                return includes$1(props.protectFilters, key);
+                return includes(props.protectFilters, key);
             })) {
                 setDirty(true);
             }
@@ -27074,7 +27077,7 @@ const FiltersPopper = (props) => {
     const handleClear = () => {
         setDirty(false);
         props.filters.setFilterModel(produce((draft) => {
-            forEach$1(props.filters.filterModel.items, function (_value, key) {
+            forEach(props.filters.filterModel.items, function (_value, key) {
                 if (["ordering", "search"].concat(props.protectFilters || []).includes(key))
                     return;
                 delete draft["items"][key];
@@ -27327,8 +27330,8 @@ const EditGridWrapper = (props) => {
         setEdit((prevState) => !prevState);
     };
     const processRowUpdate = async (newRow, originalRow) => {
-        const original_data = jsonForm({ submitData: originalRow });
-        const data = jsonForm({
+        const original_data = formParser({ submitData: originalRow });
+        const data = formParser({
             submitData: newRow,
             ...(props.parser ? { props: props.parser } : []),
         });
@@ -27980,45 +27983,31 @@ const LinkField = ({ url, value, text }) => {
 const DetailField = (props) => {
     const hasLinkToViewPermission = useHasPermission(`${props.navigation?.permission}.view`);
     const value = useCallback(() => {
-        if (typeof props.fieldData == "boolean") {
-            if (props.fieldData)
-                return "Si";
-            return "No";
-        }
-        else if (typeof props.fieldData == "number") {
-            return props.fieldData.toString();
-        }
-        else if (props.type.displayName == "ControlledSelect") {
-            if (props.fieldData)
-                return map(props.fieldData, function (item) {
-                    return item.label;
-                }).join(", ");
-        }
-        else if (props.type.displayName == "ControlledDate") {
-            if (props.fieldData) {
-                switch (props.extraProps.type) {
-                    case "date":
-                        return dayjs(props.fieldData).format("YYYY-MM-DD");
-                    case "datetime":
-                        return dayjs(props.fieldData).format("YYYY-MM-DD HH:mm");
-                }
-            }
-        }
-        else if (props.type.displayName == "ControlledPhotoField") {
-            if (props.fieldData)
-                return "Imagen";
-        }
-        else {
-            if (props.fieldData) {
-                if (props.detail_name) {
-                    return get(props.fieldData, props.detail_name);
-                }
-                return props.fieldData;
-            }
+        const { fieldData, type, extraProps, detail_name } = props;
+        if (typeof fieldData === "boolean")
+            return fieldData ? "Si" : "No";
+        if (typeof fieldData === "number")
+            return fieldData.toString();
+        switch (type?.displayName) {
+            case "ControlledSelect":
+                return fieldData
+                    ? fieldData.map((item) => item.label).join(", ")
+                    : "N/A";
+            case "ControlledDate":
+                if (!fieldData)
+                    return "N/A";
+                return extraProps?.type === "datetime"
+                    ? dayjs(fieldData).format("YYYY-MM-DD HH:mm")
+                    : dayjs(fieldData).format("YYYY-MM-DD");
+            case "ControlledFileField":
+                return fieldData ? "Archivo" : "N/A";
+            default:
+                if (!fieldData)
+                    return "N/A";
+                return detail_name ? get(fieldData, detail_name) : fieldData;
         }
-        return "N/A";
-    }, [props.detail_name, props.fieldData, props.type.displayName]);
-    const content = `${props.detailFieldProps?.preValue ? props.detailFieldProps.preValue : ""} ${value()} ${props.detailFieldProps?.postValue ? props.detailFieldProps.postValue : ""}`;
+    }, [props.detail_name, props.extraProps, props.fieldData, props.type?.displayName]);
+    const content = `${props.detailFieldProps?.preValue || ""} ${value()} ${props.detailFieldProps?.postValue || ""}`.trim();
     if (props.navigation &&
         hasLinkToViewPermission &&
         props.fieldData &&
@@ -28028,8 +28017,8 @@ const DetailField = (props) => {
         }
         return (jsx(LinkField, { url: props.navigation.url, value: get(props.fieldData, "value"), text: content }));
     }
-    else if (props.type.displayName == "ControlledPhotoField") {
-        return (jsx(Link, { href: props.fieldData, download: "filename.pdf", children: content }));
+    else if (props.type.displayName == "ControlledFileField" && content !== "N/A") {
+        return (jsx(Link, { href: props.fieldData, target: "_blank", rel: "noopener noreferrer", children: content }));
     }
     else {
         if (Array.isArray(props.fieldData)) {
@@ -28060,7 +28049,7 @@ const EditField = (props) => {
     });
     const extraProps = useMemo(() => (produce(props.extraProps, (draft) => {
         if (props.filters) {
-            forEach$1(props.filters, (filter, index) => {
+            forEach(props.filters, (filter, index) => {
                 set$1(draft, `queryArgs.filters.${filter.name}`, values[index]);
             });
         }
@@ -28115,8 +28104,8 @@ const FieldArrayField = (props) => {
         remove(getIndex(id));
     };
     const processRowUpdate = async (newRow, originalRow) => {
-        const original_data = jsonForm({ submitData: originalRow, props: props.parser });
-        const data = jsonForm({ submitData: newRow, props: props.parser });
+        const original_data = formParser({ submitData: originalRow, props: props.parser });
+        const data = formParser({ submitData: newRow, props: props.parser });
         if (isEqual$1(data, original_data))
             return originalRow;
         const index = getIndex(data._id);
@@ -28390,6 +28379,9 @@ function DetailPage(props) {
         resolver: zodResolver(props.edit.schema),
         defaultValues: props.edit?.defaultValues,
     });
+    useImperativeHandle(props.ref, () => ({
+        form: form,
+    }));
     const { data, isLoading, isFetching, error: fetchError, } = props.api.data.query(!props.api.data.skipToken ? props.api.data.args : skipToken);
     useEffect(() => {
         if (data) {
@@ -28422,11 +28414,12 @@ function DetailPage(props) {
     const onSubmitHandler = (submitedData) => {
         const formData = "nativeEvent" in submitedData ? form.getValues() : submitedData;
         const params = {
+            type: props.edit.useFormData ? "formData" : "json",
             submitData: formData,
             data: data,
             props: props.slotProps?.parser,
         };
-        const dataToSend = props.edit.useFormData ? formDataForm(params) : jsonForm(params);
+        const dataToSend = formParser(params);
         mutation(props.edit.useFormData ? dataToSend : { ...dataToSend, ...props.api.mutate.args })
             .unwrap()
             .then(() => {
@@ -28494,7 +28487,8 @@ function DetailPage(props) {
         if (props.pageType == "detail") {
             if (!canEdit && !canDelete)
                 return null;
-            return (jsxs(Stack, { direction: "row", spacing: 1, children: [canDelete && props.api.delete && (jsx(DeleteButton, { mutation: props.api.delete.mutation, disableNavBack: props.slotProps?.deleteButton?.disableNavBack })), canEdit && jsx(EditButton, {})] }));
+            return (jsxs(Stack, { direction: "row", spacing: 1, children: [canDelete && props.api.delete && (jsx(DeleteButton, { mutation: props.api.delete.mutation, disableNavBack: props.slotProps?.deleteButton?.disableNavBack })), canEdit && jsx(EditButton, {}), props.slots?.extraButtons &&
+                        map(props.slots.extraButtons, (btn) => btn(data?.id))] }));
         }
         else {
             return (jsx(SaveCancelButton, { slotProps: {
@@ -28809,5 +28803,5 @@ const theme = () => {
     return themes;
 };
 
-export { APIContext, APIProvider, ActiveCell, Base, ButtonWithDrawer, CSVUpload, ContentLayout, ControlledDate, ControlledDropdown, FileUploadBox as ControlledFileUploadBox, ControlledNumber, ControlledPhoneNumber, ControlledPhotoField, ControlledSelect, ControlledSlider as ControlledSimpleSlider, ControlledSlider$1 as ControlledSlider, ControlledSwitch, ControlledText, ControlledTimePicker, ControlledToggleButtons, CoverPage, CreateButtonBase, CreateButtonWithMenuOptions, DeleteButton, DeleteConfirmationDialog, DetailPage, EditButton, ExportCSV, HistorialDrawer, ListPage, Loadable, LoadingComponent, Logo, MainDrawer, MenuItemWithLoading, ModuleCard, MyGridEditSingleSelect, NavigationContext, NavigationProvider, NormalOrIcon, NotAllowed, NotFound, ObjectProgressStack, SaveCancelButton, StatusBadge, StyledMenu, Tabs, Transitions, UncontrolledText, changeTitle, closeProgressSnack, dayjs, deleteColumn, editColumn, filterQuery, formDataForm, header as headerReducer, jsonForm, manualCacheRefresh, mergeSettings, openProgressSnack, query, renderEditCellWithErrorTooltip, setErrors, snackProgress_default as snackProgressReducer, tags, theme, updateProgressSnackData, useAPI, useHasPermission, useNavigation, valueLabel };
+export { APIContext, APIProvider, ActiveCell, Base, ButtonWithDrawer, CSVUpload, ContentLayout, ControlledDate, ControlledDropdown, ControlledFileField, FileUploadBox as ControlledFileUploadBox, ControlledNumber, ControlledPhoneNumber, ControlledSelect, ControlledSlider as ControlledSimpleSlider, ControlledSlider$1 as ControlledSlider, ControlledSwitch, ControlledText, ControlledTimePicker, ControlledToggleButtons, CoverPage, CreateButtonBase, CreateButtonWithMenuOptions, DeleteButton, DeleteConfirmationDialog, DetailPage, EditButton, ExportCSV, HistorialDrawer, ListPage, Loadable, LoadingComponent, Logo, MainDrawer, MenuItemWithLoading, ModuleCard, MoreOptions, MyGridEditSingleSelect, NavigationContext, NavigationProvider, NormalOrIcon, NotAllowed, NotFound, ObjectProgressStack, SaveCancelButton, StatusBadge, StyledMenu, Tabs, Transitions, UncontrolledText, changeTitle, closeProgressSnack, dayjs, deleteColumn, editColumn, filterQuery, formParser, header as headerReducer, manualCacheRefresh, mergeSettings, openProgressSnack, query, renderEditCellWithErrorTooltip, setErrors, snackProgress_default as snackProgressReducer, tags, theme, updateProgressSnackData, useAPI, useHasPermission, useNavigation, valueLabel };
 //# sourceMappingURL=index.js.map