@arquimedes.co/eureka-forms 3.0.49-test → 3.0.50-test

package/dist/FormSteps/DatePickerRangeStep/MaterialDatePickerRangeStep/MaterialDatePickerRangeStep.js

@@ -29,6 +29,6 @@ function MaterialDatePickerRangeStep({ step, editable, defaultValue }) {
     }, [onChange]);
     const [minDate, maxDate] = [safeDate(step.minDate), safeDate(step.maxDate)];
     const dateRangeValue = value?.length === 2 ? [safeDate(value[0]) ?? null, safeDate(value[1]) ?? null] : [null, null];
-    return (_jsx(MaterialInputContainer, { step: step, editable: editable, children: _jsx(ErkDateRangePicker, { ...field, value: dateRangeValue, inputRef: ref, error: !!error, minDate: minDate, maxDate: maxDate, labelMargin: 0, onChange: handleChange, required: step.required, readOnly: !editable || postview, helperText: error?.message ?? step.description }) }));
+    return (_jsx(MaterialInputContainer, { step: step, editable: editable, children: _jsx(ErkDateRangePicker, { ...field, value: dateRangeValue, inputRef: ref, error: !!error, minDate: minDate, maxDate: maxDate, labelMargin: 0, label: step.label, onChange: handleChange, required: step.required, readOnly: !editable || postview, helperText: error?.message ?? step.description }) }));
 }
 export default MaterialDatePickerRangeStep;

package/dist/FormSteps/FileUploadStep/MaterialFileUploadStep/FileComponent/FileComponent.js

@@ -64,6 +64,6 @@ function FileUploadComponent({ file, formStyle, error, editable, handleRemove, f
                     }
                 }, children: file.file?.name ?? file.fileName }), editable && (_jsx("div", { className: styles.deletBtn, onClick: () => {
                     handleRemove();
-                }, children: _jsx(CloseIcon, { style: { fontSize: 'inherit' } }) }))] }));
+                }, children: _jsx(CloseIcon, { size: 24 }) }))] }));
 }
 export default FileUploadComponent;

package/dist/FormSteps/FileUploadStep/MaterialFileUploadStep/FileComponent/FileComponent.module.css

@@ -34,7 +34,7 @@
     font-size: 26px;
     height: 26px;
     margin-left: 5px;
-    color: '#787878';
+    color: #787878;
     cursor: pointer;
 }
 .loaderContainer {

package/dist/FormSteps/FileUploadStep/MaterialFileUploadStep/MaterialFileUploadStep.js

@@ -23,7 +23,23 @@ function FileUploadStep({ step, editable }) {
     const { clearErrors } = useFormContext();
     const [error, setError] = useState(undefined);
     const [fileChange, setFileChange] = useState([]);
+    const [dragging, setDragging] = useState(false);
     const inputRef = useRef(null);
+    const handleFiles = useCallback((files) => {
+        const maxFiles = files.filter((file) => file.size > maxSize);
+        if (maxFiles.length > 0) {
+            setError('El tamaño máximo de carga es de 30Mb.');
+        }
+        else {
+            setFileChange(files
+                .filter((file) => value.find((val) => val.file === file) === undefined)
+                .map((file) => ({
+                state: 'STARTING',
+                file,
+                postInfo: null,
+            })));
+        }
+    }, [value]);
     const getLinks = useCallback(async (pFiles) => {
         try {
             const fileLinks = await getUploadUrls(pFiles.map((file) => file.file), idOrganization);
@@ -122,25 +138,40 @@ function FileUploadStep({ step, editable }) {
         }
         return '';
     };
-    return (_jsxs("div", { className: styles.container + (error || !!fieldError ? ' Erk-error' : ''), style: {
+    return (_jsxs("div", { className: styles.container +
+            (error || !!fieldError ? ' Erk-error' : '') +
+            (dragging ? ' ' + styles.dragging : ''), style: {
             minHeight: editable === false || postview ? undefined : '100px',
-        }, "data-testid": step.id, children: [_jsx("div", { className: styles.labelLabel, children: step.label }), step.description && (_jsx("div", { className: styles.stepDescriptionLabel, style: { color: formStyle.descriptionTextColor }, children: step.description })), _jsx("input", { type: "file", ref: inputRef, className: styles.filesInput, onChange: (e) => {
+        }, "data-testid": step.id, onDragOver: (e) => {
+            if (!editable || postview)
+                return;
+            e.preventDefault();
+        }, onDragEnter: (e) => {
+            if (!editable || postview)
+                return;
+            e.preventDefault();
+            setDragging(true);
+        }, onDragLeave: (e) => {
+            if (!editable || postview)
+                return;
+            if (e.currentTarget.contains(e.relatedTarget))
+                return;
+            setDragging(false);
+        }, onDrop: (e) => {
+            if (!editable || postview)
+                return;
+            e.preventDefault();
+            setDragging(false);
+            clearErrors(step.id);
+            setError(undefined);
+            const files = e.dataTransfer.files;
+            if (files && files.length > 0) {
+                handleFiles(Array.from(files));
+            }
+        }, children: [_jsx("div", { className: styles.labelLabel, children: step.label }), step.description && (_jsx("div", { className: styles.stepDescriptionLabel, style: { color: formStyle.descriptionTextColor }, children: step.description })), _jsx("input", { type: "file", ref: inputRef, className: styles.filesInput, onChange: (e) => {
                     const files = e.target.files;
                     if (files) {
-                        const filesArray = Array.from(files);
-                        const maxFiles = filesArray.filter((file) => file.size > maxSize);
-                        if (maxFiles.length > 0) {
-                            setError('El tamaño máximo de carga es de 30Mb.');
-                        }
-                        else {
-                            setFileChange(filesArray
-                                .filter((file) => value.find((val) => val.file === file) === undefined)
-                                .map((file) => ({
-                                state: 'STARTING',
-                                file,
-                                postInfo: null,
-                            })));
-                        }
+                        handleFiles(Array.from(files));
                         inputRef.current.value = '';
                     }
                 }, multiple: true, accept: getAcceptedExtensions() }), _jsxs("div", { className: styles.btnContainer, children: [_jsx("input", { ref: ref, className: 'hidden-input' }), _jsx(ErkButton, { disabled: !editable || postview, text: 'Examinar' + (step.required ? ' *' : ''), onClick: () => {
@@ -152,7 +183,7 @@ function FileUploadStep({ step, editable }) {
                                     input.click();
                                 }
                             }
-                        } })] }), _jsx("div", { className: styles.filesContainer, children: value.map((file, index) => (_jsx(FileComponent, { formStyle: formStyle, file: file, error: (!!fieldError && file.state !== 'DONE') ||
+                        } })] }), editable && !postview && (_jsx("div", { className: styles.dragHint, style: { color: formStyle.descriptionTextColor }, children: "o arrastra y suelta los archivos aqu\u00ED" })), _jsx("div", { className: styles.filesContainer, children: value.map((file, index) => (_jsx(FileComponent, { formStyle: formStyle, file: file, error: (!!fieldError && file.state !== 'DONE') ||
                         file.state === 'ERROR', editable: editable && !postview, handleRemove: () => {
                         if (value.filter((val) => val.state === 'ERROR').length === 1) {
                             clearErrors(step.id);

package/dist/FormSteps/FileUploadStep/MaterialFileUploadStep/MaterialFileUploadStep.module.css

@@ -32,6 +32,12 @@
     text-overflow: ellipsis;
 }
 
+.dragging {
+    border: 2px dashed currentColor;
+    border-radius: 10px;
+    opacity: 0.85;
+}
+
 .filesInput {
     display: none;
 }
@@ -41,6 +47,16 @@
     margin-bottom: 3px;
     width: fit-content;
 }
+.dragHint {
+    font-size: 0.75rem;
+    margin-left: 14px;
+    margin-top: 4px;
+    opacity: 0.8;
+    -moz-user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
 .errorMsg {
     font-size: 0.75rem;
     margin-top: 5px;

package/dist/Shared/ErkDatePicker/ErkDatePicker.js

@@ -167,11 +167,16 @@ function CustomPickerField({ error, required, helperText, size = 'small', labelM
             },
         } }));
 }
-function CustomDatePicker({ error, required, disabled, readOnly, helperText, size = 'small', labelMargin = 5, pickTime = false, inputRef, 
+function CustomDatePicker({ error, required, disabled, readOnly, helperText, size = 'small', labelMargin = 5, pickTime = false, inputRef, label, 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 orientation: _orientation, ...others }) {
+    // MUI X v9 no longer forwards `required` to the field-slot label when the field is a Material
+    // TextField (the legacy `slots.field` shape used here), so the required asterisk never renders.
+    // The picker's `label` does propagate to the field via the picker context, so bake the marker
+    // into the label to keep the required indicator visible.
+    const displayLabel = required && typeof label === 'string' ? `${label} *` : label;
     if (pickTime) {
-        return (_jsx(StyledDateTimePicker, { ampm: true, size: size, reduceAnimations: true, ...others, disabled: disabled, readOnly: readOnly, defaultValue: required ? new Date() : undefined, showDaysOutsideCurrentMonth: true, slotProps: {
+        return (_jsx(StyledDateTimePicker, { ampm: true, size: size, reduceAnimations: true, ...others, label: displayLabel, disabled: disabled, readOnly: readOnly, defaultValue: required ? new Date() : undefined, showDaysOutsideCurrentMonth: true, slotProps: {
                 actionBar: {
                     actions: ['clear', 'accept'],
                 },
@@ -231,7 +236,7 @@ orientation: _orientation, ...others }) {
             } }));
     }
     else {
-        return (_jsx(StyledDatePicker, { ...others, size: size, reduceAnimations: true, readOnly: readOnly, disabled: disabled, defaultValue: required ? new Date() : undefined, showDaysOutsideCurrentMonth: true, views: ['year', 'month', 'day'], slotProps: {
+        return (_jsx(StyledDatePicker, { ...others, label: displayLabel, size: size, reduceAnimations: true, readOnly: readOnly, disabled: disabled, defaultValue: required ? new Date() : undefined, showDaysOutsideCurrentMonth: true, views: ['year', 'month', 'day'], slotProps: {
                 actionBar: {
                     actions: ['clear', 'accept'],
                 },

package/dist/Shared/ErkDateRangePicker/ErkDateRangePicker.js

@@ -124,7 +124,12 @@ const formatDate = (date, showYear) => {
         return '';
     return format(date, showYear ? 'PP' : 'dd MMM');
 };
-function CustomDatePickerRange({ error, disabled, readOnly, helperText, size = 'small', labelMargin = 5, value, onChange, inputRef, shortcuts, ...others }) {
+function CustomDatePickerRange({ error, disabled, readOnly, helperText, size = 'small', labelMargin = 5, value, onChange, inputRef, shortcuts, label, required, ...others }) {
+    // MUI X v9 no longer forwards `required` to the field-slot label when the field is a Material
+    // TextField (the legacy `slots.field` shape used here), so the required asterisk never renders.
+    // The picker's `label` does propagate to the field via the picker context, so bake the marker
+    // into the label to keep the required indicator visible.
+    const displayLabel = required && typeof label === 'string' ? `${label} *` : label;
     const [startDate, endDate] = value ?? [null, null];
     const hasCompleteRange = Boolean(startDate) && Boolean(endDate);
     const showYear = startDate &&
@@ -135,7 +140,7 @@ function CustomDatePickerRange({ error, disabled, readOnly, helperText, size = '
     const formattedStartDate = formatDate(startDate, Boolean(showYear));
     const formattedEndDate = formatDate(endDate, Boolean(showYear));
     const toolbarText = hasCompleteRange ? `${formattedStartDate} – ${formattedEndDate}` : '– –';
-    return (_jsx(StyledDateRangePicker, { ...others, value: value, onChange: onChange, size: size, disabled: disabled, readOnly: readOnly, reduceAnimations: true, showDaysOutsideCurrentMonth: true, slots: {
+    return (_jsx(StyledDateRangePicker, { ...others, label: displayLabel, value: value, onChange: onChange, size: size, disabled: disabled, readOnly: readOnly, reduceAnimations: true, showDaysOutsideCurrentMonth: true, slots: {
             field: CustomRangePickerField,
             day: StyledDay,
             dialog: StyledDialog,
@@ -178,7 +183,7 @@ function CustomDatePickerRange({ error, disabled, readOnly, helperText, size = '
             field: {
                 size,
                 error,
-                required: others.required,
+                required,
                 helperText,
                 labelMargin,
                 fullWidth: true,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@arquimedes.co/eureka-forms",
   "repository": "git://github.com/Arquimede5/Eureka-Forms.git",
-  "version":"3.0.49-test",
+  "version":"3.0.50-test",
   "scripts": {
     "watch": "tsgo --noEmit --watch --project tsconfig.app.json",
     "start": "vite",