@arquimedes.co/eureka-forms 3.0.71-test → 3.0.71

package/dist/FormSteps/EntityValueStep/MaterialEntityValuePickerStep/MaterialEntityValuePickerStep.js

@@ -5,7 +5,7 @@ import SmartSelect from '../../SmartSelectStep/MaterialSmartSelectStep/MaterialS
 import widgetInstance from '../../../Utils/AxiosWidget';
 import FormContext, { IdFormContext } from '../../../Contexts/FormContext';
 import StepFillerContainer from '../../Utils/@StepFiller/StepFiller';
-import { recursivelyCalcConditionSteps, selectDependencies } from '../../StepHooks';
+import { isStepHiddenByCondition, recursivelyCalcConditionSteps, selectDependencies } from '../../StepHooks';
 import { useApiSubscribe, useAppSelector } from '../../../hooks';
 import MaterialEntityValueDialog from './MaterialEntityValueDialog/MaterialEntityValueDialog';
 import InputIcon from '../../../Shared/InputIcon/InputIcon';
@@ -13,6 +13,8 @@ import { evaluateCondition } from '../../StepFunctions';
 import StepComponent from '../../Step';
 import ErkValueTypes from '../../../constants/ErkValueTypes';
 import { IntegrationsApi } from '../../../Services/IntegrationService';
+import { entityValueDependencyValue } from '../entityValueDependencyValue';
+import { entityValuePickerWatchedSteps } from '../entityValuePickerWatchedSteps';
 function EntityValuePickerStep({ step, editable }) {
     const form = useContext(FormContext);
     const subscribe = useApiSubscribe();
@@ -25,8 +27,23 @@ function EntityValuePickerStep({ step, editable }) {
         }))) ?? []);
     }, [subscribe, idForm]);
     const getOptions = useCallback(async (step, dependencyStore, ids) => {
-        return await getEntityValueOptions(step, dependencyStore, ids, fetchFilterIntegration);
-    }, [fetchFilterIntegration]);
+        return await getEntityValueOptions(step, dependencyStore, ids, fetchFilterIntegration, form);
+    }, [fetchFilterIntegration, form]);
+    // The visibility of a filter's step decides whether that filter applies, so the steps its condition
+    // reads must trigger a refetch too — see `isStepHiddenByCondition`.
+    const getOptionalDependencies = useCallback((picker) => {
+        const watched = entityValuePickerWatchedSteps(picker);
+        for (const idWatched of [...watched]) {
+            for (const idCondition of recursivelyCalcConditionSteps(form.steps[idWatched]?.condition)) {
+                if (idCondition === picker.id || watched.includes(idCondition))
+                    continue;
+                if (picker.dependencies?.includes(idCondition))
+                    continue;
+                watched.push(idCondition);
+            }
+        }
+        return watched;
+    }, [form]);
     const [dialogs, setDialogs] = useState();
     const dialogsIdStepDeps = useMemo(() => {
         const ids = [];
@@ -111,7 +128,7 @@ function EntityValuePickerStep({ step, editable }) {
                     } }) })] }));
 }
 export default EntityValuePickerStep;
-const getEntityValueOptions = async (step, dependencyStore, { idOrganization, idCurrentAgent, }, fetchFilterIntegration) => {
+const getEntityValueOptions = async (step, dependencyStore, { idOrganization, idCurrentAgent, }, fetchFilterIntegration, form) => {
     if (!idOrganization)
         return null;
     let urlPath = '';
@@ -173,14 +190,12 @@ const getEntityValueOptions = async (step, dependencyStore, { idOrganization, id
                 break;
             }
             case EntityValueDataTypes.STEP: {
-                const currentValue = dependencyStore[filter.idStep]?.value;
-                if (currentValue) {
-                    if (typeof currentValue === 'string')
-                        params.set(filter.idProperty, currentValue);
-                    else
-                        params.set(filter.idProperty, currentValue._id ?? currentValue.id);
+                const currentValue = entityValueDependencyValue(dependencyStore[filter.idStep]);
+                if (currentValue !== undefined) {
+                    params.set(filter.idProperty, currentValue);
                 }
-                else if (filter.required) {
+                else if (filter.required && !isStepHiddenByCondition(filter.idStep, form, dependencyStore)) {
+                    // A required filter blocks only while its step can still be answered.
                     return null;
                 }
                 break;
@@ -201,18 +216,3 @@ const getEntityValueOptions = async (step, dependencyStore, { idOrganization, id
     });
     return response.data.filter((option) => step.options[option._id]?.type !== EntityValueOptionTypes.HIDE);
 };
-const getOptionalDependencies = (step) => {
-    const optional = [];
-    for (const filter of step.filters) {
-        switch (filter.type) {
-            case EntityValueDataTypes.STEP: {
-                if (filter.idStep && !filter.required && !step.dependencies?.includes(filter.idStep))
-                    optional.push(filter.idStep);
-                break;
-            }
-            default:
-                break;
-        }
-    }
-    return optional;
-};

package/dist/FormSteps/EntityValueStep/entityValueDependencyValue.d.ts

@@ -0,0 +1,12 @@
+import { StepDependency } from '../../Form/Form';
+/**
+ * Serializes the current value of a dependency step into the string an entity-picker STEP filter
+ * sends as `values.<idProperty>` query param.
+ *
+ * Entity values (and any id-bearing object) resolve to their id. The answer of a Selector or
+ * Classifier step is a `{ label, value }` option: a Selector keeps `value === label`, so its `value`
+ * is the text the entity property stores; a Classifier's `value` is the classifier id, which no
+ * entity property holds, so it resolves to its `label`. Returns undefined when the dependency has
+ * no usable value, so the caller treats the filter as unresolved.
+ */
+export declare function entityValueDependencyValue(dependency: StepDependency | undefined): string | undefined;

package/dist/FormSteps/EntityValueStep/entityValueDependencyValue.js

@@ -0,0 +1,35 @@
+import FormStepTypes from '../../constants/FormStepTypes';
+/**
+ * Serializes the current value of a dependency step into the string an entity-picker STEP filter
+ * sends as `values.<idProperty>` query param.
+ *
+ * Entity values (and any id-bearing object) resolve to their id. The answer of a Selector or
+ * Classifier step is a `{ label, value }` option: a Selector keeps `value === label`, so its `value`
+ * is the text the entity property stores; a Classifier's `value` is the classifier id, which no
+ * entity property holds, so it resolves to its `label`. Returns undefined when the dependency has
+ * no usable value, so the caller treats the filter as unresolved.
+ */
+export function entityValueDependencyValue(dependency) {
+    const currentValue = dependency?.value;
+    if (currentValue === null || currentValue === undefined || currentValue === '')
+        return undefined;
+    if (typeof currentValue === 'string')
+        return currentValue;
+    if (typeof currentValue === 'number' || typeof currentValue === 'boolean')
+        return String(currentValue);
+    if (currentValue instanceof Date)
+        return currentValue.toISOString();
+    if (typeof currentValue !== 'object')
+        return undefined;
+    const record = currentValue;
+    // A Selector's `value` is the stored text; every other step's `value` may be an id, so its `label` wins.
+    const keys = dependency?.type === FormStepTypes.SELECTOR ? ['_id', 'id', 'value', 'label'] : ['_id', 'id', 'label', 'value'];
+    for (const key of keys) {
+        const candidate = record[key];
+        if (typeof candidate === 'string' && candidate !== '')
+            return candidate;
+        if (typeof candidate === 'number')
+            return String(candidate);
+    }
+    return undefined;
+}

package/dist/FormSteps/EntityValueStep/entityValueDependencyValue.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/FormSteps/EntityValueStep/entityValueDependencyValue.test.js

@@ -0,0 +1,31 @@
+import { describe, expect, test } from 'vitest';
+import FormStepTypes from '../../constants/FormStepTypes';
+import { entityValueDependencyValue } from './entityValueDependencyValue';
+const dep = (type, value) => ({
+    idOriginal: 'dep',
+    dependents: [],
+    type,
+    value,
+});
+describe('entityValueDependencyValue', () => {
+    test('an unanswered dependency is unresolved', () => {
+        expect(entityValueDependencyValue(undefined)).toBeUndefined();
+        expect(entityValueDependencyValue(dep(FormStepTypes.SELECTOR, null))).toBeUndefined();
+        expect(entityValueDependencyValue(dep(FormStepTypes.SELECTOR, ''))).toBeUndefined();
+        expect(entityValueDependencyValue(dep(FormStepTypes.SELECTOR, {}))).toBeUndefined();
+    });
+    test('plain answers are sent as text', () => {
+        expect(entityValueDependencyValue(dep(FormStepTypes.TEXTINPUT, 'Torre 3'))).toBe('Torre 3');
+        expect(entityValueDependencyValue(dep(FormStepTypes.TEXTINPUT, 7))).toBe('7');
+        expect(entityValueDependencyValue(dep(FormStepTypes.DATEPICKER, new Date('2026-01-02T00:00:00.000Z')))).toBe('2026-01-02T00:00:00.000Z');
+    });
+    test('an entity value resolves to its id', () => {
+        expect(entityValueDependencyValue(dep(FormStepTypes.ENTITYVALUEPICKER, { _id: 'ev-1', label: 'Morros' }))).toBe('ev-1');
+        expect(entityValueDependencyValue(dep(FormStepTypes.API_SELECTOR, { id: 'api-1', label: 'X' }))).toBe('api-1');
+    });
+    test('a selector option resolves to its value, a classifier option to its label', () => {
+        expect(entityValueDependencyValue(dep(FormStepTypes.SELECTOR, { label: 'Piso 2', value: 'Piso 2' }))).toBe('Piso 2');
+        expect(entityValueDependencyValue(dep(FormStepTypes.SELECTOR, { label: 'Dos', value: '2' }))).toBe('2');
+        expect(entityValueDependencyValue(dep(FormStepTypes.CLASSIFIER_SELECTOR, { label: 'Piso 2', value: '65f0c1a2b3c4d5e6f7a8b9c0' }))).toBe('Piso 2');
+    });
+});

package/dist/FormSteps/EntityValueStep/entityValuePickerWatchedSteps.d.ts

@@ -0,0 +1,27 @@
+import { EntityValuePicker } from '../../@Types/FormStep';
+/**
+ * The steps an entity picker reads a value from that `step.dependencies` does not already list:
+ * the STEP hops of `step.path` and every STEP filter, required or not.
+ *
+ * `step.dependencies` is recomputed server-side only when the form is saved
+ * (`FormDependencyFunctions.calcStepDependencies`), so it describes the form as it was at the last
+ * save. In the editor's live preview of an unsaved draft — and in any form whose stored
+ * dependencies went stale — a path hop or a filter added since then is missing from it, and the
+ * renderer would never watch the step it points at. The picker refetches its options when a watched
+ * value changes, so a filter the picker does not watch never triggers the fetch that would honour
+ * it: a required one leaves the select stuck with no options at all, an optional one leaves it
+ * showing options the filter should have narrowed.
+ *
+ * The `required` flag is deliberately not consulted: required or not, the filter's value is what
+ * has to trigger the refetch. Steps the last save already registered are skipped because the
+ * renderer watches `step.dependencies` anyway.
+ */
+export declare function entityValuePickerWatchedSteps(step: EntityValuePicker): string[];
+/**
+ * The subset of `entityValuePickerWatchedSteps` whose value the picker cannot do without: every
+ * STEP hop of the path, and the STEP filters flagged `required`. Those are exactly the cases where
+ * `getEntityValueOptions` gives up and answers `null` — its "dependency not met" contract — so
+ * while they hold no value the select has to read as a missing dependency rather than as a failed
+ * load.
+ */
+export declare function entityValuePickerBlockingSteps(step: EntityValuePicker): string[];

package/dist/FormSteps/EntityValueStep/entityValuePickerWatchedSteps.js

@@ -0,0 +1,64 @@
+import { EntityValueDataTypes } from '../../constants/FormStepTypes';
+const push = (step, idStep, into) => {
+    if (!idStep)
+        return;
+    /**
+     * A draft can point a filter or a path hop at the picker that holds it (the editor lists the
+     * step among the pickable ones before the form is saved and the backend rejects it). A step is
+     * never its own dependency, and watching itself would close a cycle in the dependency walk.
+     */
+    if (idStep === step.id)
+        return;
+    if (step.dependencies?.includes(idStep))
+        return;
+    if (!into.includes(idStep))
+        into.push(idStep);
+};
+/**
+ * The steps an entity picker reads a value from that `step.dependencies` does not already list:
+ * the STEP hops of `step.path` and every STEP filter, required or not.
+ *
+ * `step.dependencies` is recomputed server-side only when the form is saved
+ * (`FormDependencyFunctions.calcStepDependencies`), so it describes the form as it was at the last
+ * save. In the editor's live preview of an unsaved draft — and in any form whose stored
+ * dependencies went stale — a path hop or a filter added since then is missing from it, and the
+ * renderer would never watch the step it points at. The picker refetches its options when a watched
+ * value changes, so a filter the picker does not watch never triggers the fetch that would honour
+ * it: a required one leaves the select stuck with no options at all, an optional one leaves it
+ * showing options the filter should have narrowed.
+ *
+ * The `required` flag is deliberately not consulted: required or not, the filter's value is what
+ * has to trigger the refetch. Steps the last save already registered are skipped because the
+ * renderer watches `step.dependencies` anyway.
+ */
+export function entityValuePickerWatchedSteps(step) {
+    const watched = [];
+    for (const path of step.path) {
+        if (path.type === EntityValueDataTypes.STEP)
+            push(step, path.idStep, watched);
+    }
+    for (const filter of step.filters) {
+        if (filter.type === EntityValueDataTypes.STEP)
+            push(step, filter.idStep, watched);
+    }
+    return watched;
+}
+/**
+ * The subset of `entityValuePickerWatchedSteps` whose value the picker cannot do without: every
+ * STEP hop of the path, and the STEP filters flagged `required`. Those are exactly the cases where
+ * `getEntityValueOptions` gives up and answers `null` — its "dependency not met" contract — so
+ * while they hold no value the select has to read as a missing dependency rather than as a failed
+ * load.
+ */
+export function entityValuePickerBlockingSteps(step) {
+    const blocking = [];
+    for (const path of step.path) {
+        if (path.type === EntityValueDataTypes.STEP)
+            push(step, path.idStep, blocking);
+    }
+    for (const filter of step.filters) {
+        if (filter.type === EntityValueDataTypes.STEP && filter.required)
+            push(step, filter.idStep, blocking);
+    }
+    return blocking;
+}

package/dist/FormSteps/EntityValueStep/entityValuePickerWatchedSteps.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/FormSteps/EntityValueStep/entityValuePickerWatchedSteps.test.js

@@ -0,0 +1,95 @@
+import { describe, expect, test } from 'vitest';
+import FormStepTypes, { EntityValueDataTypes } from '../../constants/FormStepTypes';
+import { entityValuePickerBlockingSteps, entityValuePickerWatchedSteps } from './entityValuePickerWatchedSteps';
+const picker = (picker) => ({
+    id: 'picker',
+    idSection: 'section',
+    type: FormStepTypes.ENTITYVALUEPICKER,
+    idEntity: 'entity',
+    path: [],
+    filters: [],
+    options: {},
+    ...picker,
+});
+const stepFilter = (idStep, required) => ({
+    idProperty: 'prop-' + idStep,
+    type: EntityValueDataTypes.STEP,
+    idStep,
+    any: false,
+    required,
+});
+const stepPath = (idStep) => ({
+    idEntity: 'parent',
+    type: EntityValueDataTypes.STEP,
+    idStep,
+    any: false,
+});
+describe('entityValuePickerWatchedSteps', () => {
+    test('watches a STEP filter the saved dependencies do not list, required or not', () => {
+        const step = picker({ filters: [stepFilter('required', true), stepFilter('optional', false)] });
+        expect(entityValuePickerWatchedSteps(step)).toEqual(['required', 'optional']);
+    });
+    test('skips the steps the last save already registered', () => {
+        const step = picker({
+            dependencies: ['required'],
+            filters: [stepFilter('required', true), stepFilter('optional', false)],
+        });
+        expect(entityValuePickerWatchedSteps(step)).toEqual(['optional']);
+    });
+    test('watches the STEP hops of an unsaved path', () => {
+        const step = picker({
+            dependencies: ['saved'],
+            path: [stepPath('saved'), stepPath('added'), { idEntity: 'e', type: EntityValueDataTypes.VALUE }],
+        });
+        expect(entityValuePickerWatchedSteps(step)).toEqual(['added']);
+    });
+    test('ignores filters that read no step, and a path hop with no step picked yet', () => {
+        const step = picker({
+            path: [{ idEntity: 'e', type: EntityValueDataTypes.STEP, any: true }],
+            filters: [
+                { idProperty: 'a', type: EntityValueDataTypes.VALUE, value: 'x' },
+                { idProperty: 'b', type: EntityValueDataTypes.CURRENT_AGENT },
+                { idProperty: 'c', type: EntityValueDataTypes.INTEGRATION, idIntegration: 'i', values: {} },
+            ],
+        });
+        expect(entityValuePickerWatchedSteps(step)).toEqual([]);
+    });
+    test('never repeats a step read twice', () => {
+        const step = picker({
+            path: [stepPath('shared')],
+            filters: [stepFilter('shared', true)],
+        });
+        expect(entityValuePickerWatchedSteps(step)).toEqual(['shared']);
+    });
+    test('ignores a draft filter or path hop pointing back at the picker itself', () => {
+        const step = picker({
+            path: [stepPath('picker'), stepPath('hop')],
+            filters: [stepFilter('picker', true), stepFilter('picker', false), stepFilter('other', false)],
+        });
+        expect(entityValuePickerWatchedSteps(step)).toEqual(['hop', 'other']);
+    });
+});
+describe('entityValuePickerBlockingSteps', () => {
+    test('only the path hops and the required filters block the fetch', () => {
+        const step = picker({
+            path: [stepPath('hop')],
+            filters: [stepFilter('required', true), stepFilter('optional', false)],
+        });
+        expect(entityValuePickerBlockingSteps(step)).toEqual(['hop', 'required']);
+    });
+    test('a saved dependency is already watched deeply, so it is not repeated', () => {
+        const step = picker({
+            dependencies: ['hop', 'required'],
+            path: [stepPath('hop')],
+            filters: [stepFilter('required', true)],
+        });
+        expect(entityValuePickerBlockingSteps(step)).toEqual([]);
+    });
+    test('ignores a draft filter or path hop pointing back at the picker itself', () => {
+        const step = picker({
+            path: [stepPath('picker')],
+            filters: [stepFilter('picker', true)],
+        });
+        expect(entityValuePickerBlockingSteps(step)).toEqual([]);
+    });
+});

package/dist/FormSteps/LocationStep/LocationStep.d.ts

@@ -0,0 +1,10 @@
+import { LocationStep } from '../../@Types/LocationFormStep';
+import { StepProps } from '../Step';
+export interface LocationStepProps extends StepProps {
+    /** The LocationStep to display */
+    step: LocationStep;
+    /** The icon to display */
+    IconComponent?: React.ElementType;
+}
+declare function LocationStepComponent(props: LocationStepProps): JSX.Element;
+export default LocationStepComponent;

package/dist/FormSteps/LocationStep/LocationStep.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FormStyleTypes } from '../../constants/FormStepTypes';
+import MaterialLocationStep from './MaterialLocationStep/MaterialLocationStep';
+import { useAppSelector } from '../../hooks';
+function LocationStepComponent(props) {
+    const { formStyle } = useAppSelector((state) => state.global);
+    switch (formStyle.type) {
+        case FormStyleTypes.MATERIAL:
+        default: {
+            return _jsx(MaterialLocationStep, { ...props });
+        }
+    }
+}
+export default LocationStepComponent;

package/dist/FormSteps/LocationStep/MaterialLocationStep/MaterialLocationStep.d.ts

@@ -0,0 +1,3 @@
+import { LocationStepProps } from '../LocationStep';
+declare function MaterialLocationStep({ step, editable }: LocationStepProps): JSX.Element;
+export default MaterialLocationStep;

package/dist/FormSteps/LocationStep/MaterialLocationStep/MaterialLocationStep.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext } from 'react';
+import { AddressFieldMode, LocationInputMode } from '../../../@Types/LocationFormStep';
+import { useFormStep } from '../../StepHooks';
+import FormContext from '../../../Contexts/FormContext';
+import { selectBreakPoint, useAppSelector } from '../../../hooks';
+import { calcStepWidth } from '../../StepFunctions';
+import ErkLocationField from '../../../Shared/ErkLocationField/ErkLocationField';
+import { fieldConfig } from '../../../Shared/ErkLocationField/addressFields';
+import { validateRestrictions } from '../../../Shared/ErkLocationField/locationRestrictions';
+import styles from './MaterialLocationStep.module.css';
+function MaterialLocationStep({ step, editable }) {
+    const currentBreakPoint = useAppSelector(selectBreakPoint);
+    const { postview, formStyle } = useAppSelector((state) => state.global);
+    const form = useContext(FormContext);
+    const isReadOnly = !editable || postview;
+    const widthStyle = currentBreakPoint <= step.size ? '100%' : calcStepWidth(step.size, form.size);
+    const { ref, value, onChange, error } = useFormStep(step, {
+        defaultValue: step.defaultValue ?? null,
+        rules: {
+            required: step.required ? 'La ubicación es obligatoria' : undefined,
+            validate: (val) => {
+                if (!val)
+                    return step.required ? 'La ubicación es obligatoria' : true;
+                if (val.source === LocationInputMode.MANUAL) {
+                    // Un campo es obligatorio en manual solo si no está omitido (FIXED lo llena solo).
+                    const detail = val.addressDetail;
+                    const isRequired = (key) => fieldConfig(step.addressFields, key).mode !== AddressFieldMode.OMIT;
+                    if (step.required && isRequired('street') && !detail?.street)
+                        return 'Por favor completa la calle en el formulario manual.';
+                    if (step.required && isRequired('city') && !detail?.city)
+                        return 'Por favor completa la ciudad en el formulario manual.';
+                    if (step.required && isRequired('country') && !detail?.country)
+                        return 'Por favor completa el país en el formulario manual.';
+                    return true;
+                }
+                if (val.latitude === undefined || val.longitude === undefined) {
+                    return step.required ? 'Coordenadas geográficas no capturadas.' : true;
+                }
+                // Restricciones geográficas (radio / geofence).
+                return validateRestrictions(val.latitude, val.longitude, step.restrictions) ?? true;
+            },
+        },
+    });
+    return (_jsxs("div", { className: styles.container, style: {
+            width: widthStyle,
+            '--eureka-outline': formStyle.outlineColor,
+            '--eureka-primary': formStyle.primaryColor,
+            '--eureka-text': formStyle.textColor,
+            '--eureka-error': formStyle.errorColor,
+            '--eureka-bg': formStyle.standAloneBackgroundColor ?? '#fff',
+        }, children: [step.label && (_jsxs("div", { className: styles.label, children: [step.label, step.required && _jsx("span", { className: styles.required, children: " *" })] })), _jsx(ErkLocationField, { value: value, onChange: onChange, allowedModes: step.allowedModes, defaultMode: step.defaultMode, addressFields: step.addressFields, helperText: error?.message ?? step.description, required: step.required, error: !!error, readOnly: isReadOnly, inputRef: ref })] }));
+}
+export default MaterialLocationStep;

package/dist/FormSteps/LocationStep/MaterialLocationStep/MaterialLocationStep.module.css

@@ -0,0 +1,18 @@
+.container {
+    max-width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    padding: 5px 10px 0;
+    box-sizing: border-box;
+}
+
+.label {
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--eureka-text, #333);
+}
+
+.required {
+    color: var(--eureka-error, #e53935);
+}

package/dist/FormSteps/NumberStep/MaterialNumberStep/MaterialNumberStep.d.ts

@@ -0,0 +1,3 @@
+import { NumberStepProps } from '../NumberStep';
+declare function MaterialNumberStep({ step, editable }: NumberStepProps): JSX.Element;
+export default MaterialNumberStep;

package/dist/FormSteps/NumberStep/MaterialNumberStep/MaterialNumberStep.js

@@ -0,0 +1,170 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext, useState, useEffect } from 'react';
+import { NumberStepType, } from '../../../@Types/NumericFormSteps';
+import { useFormStep } from '../../StepHooks';
+import FormContext from '../../../Contexts/FormContext';
+import { selectBreakPoint, useAppSelector } from '../../../hooks';
+import { calcStepWidth } from '../../StepFunctions';
+import ErkNumberField from '../../../Shared/ErkNumberField/ErkNumberField';
+import ErkSelect from '../../../Shared/ErkSelect/ErkSelect';
+import ErkMenuItem from '../../../Shared/ErkMenuItem';
+import styles from './MaterialNumberStep.module.css';
+const DEFAULT_CURRENCIES = ['COP', 'USD', 'EUR', 'MXN', 'CLP', 'BRL'];
+const DEFAULT_UNITS = ['unidades', 'kg', 'g', 'm', 'cm', 'l', 'ml', 'hrs', 'mes', 'año'];
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+function getNumericValue(value) {
+    if (value === null || value === undefined)
+        return null;
+    if (typeof value === 'number')
+        return value;
+    return value.value;
+}
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+function MaterialNumberStep({ step, editable }) {
+    const currentBreakPoint = useAppSelector(selectBreakPoint);
+    const { postview, formStyle } = useAppSelector((state) => state.global);
+    const form = useContext(FormContext);
+    const isReadOnly = !editable || postview;
+    const widthStyle = currentBreakPoint <= step.size ? '100%' : calcStepWidth(step.size, form.size);
+    const isComposite = step.numberType === NumberStepType.MONEY ||
+        step.numberType === NumberStepType.MEASURE ||
+        step.numberType === NumberStepType.UNIT_PRICE;
+    // Narrowed views — only used after the corresponding numberType check
+    const asMoney = step;
+    const asMeasure = step;
+    const asUnitPrice = step;
+    const { ref, value, onChange, error } = useFormStep(step, {
+        defaultValue: step.defaultValue ?? null,
+        rules: {
+            required: step.required ? 'Este campo es obligatorio' : undefined,
+            validate: (val) => {
+                if (!step.required && (val === null || val === undefined || val === ''))
+                    return true;
+                if (step.required && (val === null || val === undefined || val === ''))
+                    return 'Este campo es obligatorio';
+                const numVal = getNumericValue(val);
+                if (numVal === null)
+                    return 'Formato numérico inválido';
+                if (step.min !== undefined && numVal < step.min)
+                    return `El valor mínimo es ${step.min}`;
+                if (step.max !== undefined && numVal > step.max)
+                    return `El valor máximo es ${step.max}`;
+                return true;
+            },
+        },
+    });
+    // Currency/unit selectors
+    const [selectedCurrency, setSelectedCurrency] = useState(() => {
+        const v = value;
+        return v?.currency ?? asMoney.currency ?? asUnitPrice.currency ?? 'COP';
+    });
+    const [selectedUnit, setSelectedUnit] = useState(() => {
+        const v = value;
+        return v?.unit ?? asMeasure.unit ?? asUnitPrice.unit ?? 'unidades';
+    });
+    // Sync when value changes externally
+    useEffect(() => {
+        if (value && typeof value === 'object') {
+            if ('currency' in value && value.currency && value.currency !== selectedCurrency) {
+                void Promise.resolve().then(() => setSelectedCurrency(value.currency));
+            }
+            if ('unit' in value && value.unit && value.unit !== selectedUnit) {
+                void Promise.resolve().then(() => setSelectedUnit(value.unit));
+            }
+        }
+    }, [value, selectedCurrency, selectedUnit]);
+    // ---------------------------------------------------------------------------
+    // Handlers: wrap ErkNumberField's (number | null) into the step value shape
+    // ---------------------------------------------------------------------------
+    const handleNumberChange = (num) => {
+        if (num === null) {
+            onChange(null);
+            return;
+        }
+        if (step.numberType === NumberStepType.MONEY) {
+            onChange({ value: num, currency: selectedCurrency });
+        }
+        else if (step.numberType === NumberStepType.MEASURE) {
+            onChange({ value: num, unit: selectedUnit });
+        }
+        else if (step.numberType === NumberStepType.UNIT_PRICE) {
+            onChange({ value: num, currency: selectedCurrency, unit: selectedUnit });
+        }
+        else {
+            onChange(num);
+        }
+    };
+    const handleCurrencyChange = (curr) => {
+        const next = curr ?? 'USD';
+        setSelectedCurrency(next);
+        const num = getNumericValue(value);
+        if (num !== null) {
+            onChange(step.numberType === NumberStepType.UNIT_PRICE
+                ? { value: num, currency: next, unit: selectedUnit }
+                : { value: num, currency: next });
+        }
+    };
+    const handleUnitChange = (u) => {
+        const next = u ?? 'unidades';
+        setSelectedUnit(next);
+        const num = getNumericValue(value);
+        if (num !== null) {
+            onChange(step.numberType === NumberStepType.UNIT_PRICE
+                ? { value: num, currency: selectedCurrency, unit: next }
+                : { value: num, unit: next });
+        }
+    };
+    // ---------------------------------------------------------------------------
+    // Static suffix text shown inside ErkNumberField
+    // ---------------------------------------------------------------------------
+    const staticSuffix = () => {
+        if (step.numberType === NumberStepType.PERCENTAGE)
+            return '%';
+        if (step.numberType === NumberStepType.MONEY && !asMoney.allowCurrencyChange)
+            return asMoney.currency ?? 'USD';
+        if (step.numberType === NumberStepType.MEASURE && !asMeasure.allowUnitChange)
+            return asMeasure.unit ?? 'unidades';
+        // UNIT_PRICE renders its adornment fully inside the field only when neither part is editable.
+        if (step.numberType === NumberStepType.UNIT_PRICE &&
+            !asUnitPrice.allowCurrencyChange &&
+            !asUnitPrice.allowUnitChange)
+            return `${asUnitPrice.currency ?? 'USD'} / ${asUnitPrice.unit ?? 'unidades'}`;
+        if (!isComposite && step.suffix)
+            return step.suffix;
+        return undefined;
+    };
+    // ---------------------------------------------------------------------------
+    // Resolved selector lists
+    // ---------------------------------------------------------------------------
+    const currenciesList = step.numberType === NumberStepType.MONEY || step.numberType === NumberStepType.UNIT_PRICE
+        ? (step.availableCurrencies ?? DEFAULT_CURRENCIES)
+        : [];
+    const unitsList = step.numberType === NumberStepType.MEASURE || step.numberType === NumberStepType.UNIT_PRICE
+        ? (step.availableUnits ?? DEFAULT_UNITS)
+        : [];
+    const isMoneyDynamic = step.numberType === NumberStepType.MONEY && asMoney.allowCurrencyChange;
+    const isMeasureDynamic = step.numberType === NumberStepType.MEASURE && asMeasure.allowUnitChange;
+    // UNIT_PRICE has two independent toggles: currency and unit can each be fixed or selectable.
+    const isUnitPriceCurrencyDynamic = step.numberType === NumberStepType.UNIT_PRICE && !!asUnitPrice.allowCurrencyChange;
+    const isUnitPriceUnitDynamic = step.numberType === NumberStepType.UNIT_PRICE && !!asUnitPrice.allowUnitChange;
+    const isUnitPriceDynamic = isUnitPriceCurrencyDynamic || isUnitPriceUnitDynamic;
+    // ---------------------------------------------------------------------------
+    // Shared CSS vars
+    // ---------------------------------------------------------------------------
+    const cssVars = {
+        width: widthStyle,
+        '--eureka-outline': formStyle.outlineColor,
+        '--eureka-primary': formStyle.primaryColor,
+        '--eureka-text': formStyle.textColor,
+        '--eureka-bg': formStyle.standAloneBackgroundColor ?? '#fff',
+    };
+    // ---------------------------------------------------------------------------
+    // Read-only view
+    // ---------------------------------------------------------------------------
+    return (_jsx("div", { className: styles.container, style: cssVars, children: _jsxs("div", { className: styles.inputRow, children: [_jsx("div", { style: { flex: 1 }, children: _jsx(ErkNumberField, { label: step.label, value: getNumericValue(value), onChange: handleNumberChange, error: !!error, errorBorder: true, required: step.required, helperText: error?.message ?? step.description ?? undefined, inputRef: ref, min: step.min, max: step.max, decimals: step.numberType === NumberStepType.INTEGER ? 0 : (step.decimals ?? 2), suffix: staticSuffix(), readOnly: isReadOnly, spinner: step.spinner, step: step.step, placeholder: step.placeholder }) }), isMoneyDynamic && (_jsx("div", { className: styles.selectWrapper, children: _jsx(ErkSelect, { value: selectedCurrency, onChange: handleCurrencyChange, clearable: false, children: currenciesList.map((c) => (_jsx(ErkMenuItem, { value: c, children: c }, c))) }) })), isMeasureDynamic && (_jsx("div", { className: styles.selectWrapper, children: _jsx(ErkSelect, { value: selectedUnit, onChange: handleUnitChange, clearable: false, children: unitsList.map((u) => (_jsx(ErkMenuItem, { value: u, children: u }, u))) }) })), isUnitPriceDynamic && (_jsxs(_Fragment, { children: [isUnitPriceCurrencyDynamic ? (_jsx("div", { className: styles.selectWrapper, children: _jsx(ErkSelect, { value: selectedCurrency, onChange: handleCurrencyChange, clearable: false, children: currenciesList.map((c) => (_jsx(ErkMenuItem, { value: c, children: c }, c))) }) })) : (_jsx("span", { className: styles.suffixText, children: asUnitPrice.currency ?? 'USD' })), _jsx("span", { className: styles.dividerSlash, children: "/" }), isUnitPriceUnitDynamic ? (_jsx("div", { className: styles.selectWrapper, children: _jsx(ErkSelect, { value: selectedUnit, onChange: handleUnitChange, clearable: false, children: unitsList.map((u) => (_jsx(ErkMenuItem, { value: u, children: u }, u))) }) })) : (_jsx("span", { className: styles.suffixText, children: asUnitPrice.unit ?? 'unidades' }))] }))] }) }));
+}
+export default MaterialNumberStep;