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

package/dist/Form/FormFunctions.d.ts

@@ -4,6 +4,23 @@ import { CustomStep } from '../FormSteps/CustomStep';
 import { CBRFormStep } from '../@Types/CBRFormStep';
 import { MapperElement } from '../@Types/MapperElement';
 import { ValuesStore } from '../States/SiteSlice';
+/** The reCAPTCHA widget surface a submission needs: the response it holds, and the challenge that mints one. */
+export interface CaptchaWidget {
+    getValue(): string | null;
+    executeAsync(): Promise<string | null>;
+}
+/**
+ * Resolve the reCAPTCHA response to send with a submission, running the invisible challenge when the widget
+ * is not holding one yet.
+ *
+ * An unsolved invisible widget answers `getValue()` with an EMPTY STRING rather than null, so emptiness —
+ * not nullishness — is what decides whether the challenge still has to run. A submission that skips the
+ * challenge carries no token, and the API rejects every captcha-protected public form with a 403.
+ *
+ * Yields null when no widget is mounted, leaving the caller to submit tokenless rather than throwing out of
+ * the submit handler.
+ */
+export declare function resolveCaptchaToken(captcha: CaptchaWidget | null | undefined): Promise<string | null>;
 /**
  * Function that cals the value of a step to output on submit
  */

package/dist/Form/FormFunctions.js

@@ -3,6 +3,28 @@ import FormStepTypes, { EntityValueDataTypes } from '../constants/FormStepTypes'
 import { calcStepDeps } from '../FormSteps/StepHooks';
 import { calcRecursiveData } from '../Utils/FormStepFunctions';
 import { isValidPhoneNumber } from '../Utils/PhoneFunctions';
+/**
+ * Resolve the reCAPTCHA response to send with a submission, running the invisible challenge when the widget
+ * is not holding one yet.
+ *
+ * An unsolved invisible widget answers `getValue()` with an EMPTY STRING rather than null, so emptiness —
+ * not nullishness — is what decides whether the challenge still has to run. A submission that skips the
+ * challenge carries no token, and the API rejects every captcha-protected public form with a 403.
+ *
+ * Yields null when no widget is mounted, leaving the caller to submit tokenless rather than throwing out of
+ * the submit handler.
+ */
+export async function resolveCaptchaToken(captcha) {
+    if (!captcha)
+        return null;
+    const held = captcha.getValue();
+    if (held)
+        return held;
+    const solved = await captcha.executeAsync();
+    if (solved)
+        return solved;
+    return null;
+}
 /**
  * Function that cals the value of a step to output on submit
  */

package/dist/Form/FormFunctions.test.js

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/require-await */
 import { ContentState, EditorState } from 'draft-js';
 import FormStepTypes, { EntityValueDataTypes } from '../constants/FormStepTypes';
-import { calcDependencies, calcValue } from './FormFunctions';
+import { calcDependencies, calcValue, resolveCaptchaToken } from './FormFunctions';
 import { stringToDraft } from '../Utils/DraftFunctions';
 import { describe, expect, test } from 'vitest';
 describe('FormFunctions', function () {
@@ -455,4 +455,31 @@ describe('FormFunctions', function () {
             expect(dependencyStore.idStep.dependents.length).toBe(1);
         });
     });
+    describe('resolveCaptchaToken', function () {
+        test('Uses the token the widget already holds without re-running the challenge', async () => {
+            let executed = false;
+            const token = await resolveCaptchaToken({
+                getValue: () => 'already-solved',
+                executeAsync: async () => {
+                    executed = true;
+                    return 'freshly-solved';
+                },
+            });
+            expect(token).toBe('already-solved');
+            expect(executed).toBe(false);
+        });
+        test('Runs the challenge when the invisible widget reports an empty response', async () => {
+            // An unsolved invisible captcha answers `getValue()` with '' — not null — so emptiness is what
+            // must decide whether the challenge still has to run. Treating only nullish as unsolved leaves
+            // the submission tokenless and the API answers 403.
+            const token = await resolveCaptchaToken({
+                getValue: () => '',
+                executeAsync: async () => 'freshly-solved',
+            });
+            expect(token).toBe('freshly-solved');
+        });
+        test('Yields no token when the widget is not mounted', async () => {
+            expect(await resolveCaptchaToken(null)).toBeNull();
+        });
+    });
 });

package/dist/FormSteps/AvailabilityStep/AvailabilityStep.d.ts

@@ -0,0 +1,7 @@
+import { AvailabilityStep } from '../../@Types/CalendarFormStep';
+import { StepProps } from '../Step';
+export interface AvailabilityStepProps extends StepProps {
+    step: AvailabilityStep;
+}
+declare function AvailabilityStepComponent(props: AvailabilityStepProps): JSX.Element;
+export default AvailabilityStepComponent;

package/dist/FormSteps/AvailabilityStep/AvailabilityStep.js

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

package/dist/FormSteps/AvailabilityStep/MaterialAvailabilityStep/MaterialAvailabilityStep.d.ts

@@ -0,0 +1,8 @@
+import { AvailabilityStepProps } from '../AvailabilityStep';
+/**
+ * Conector del paso AVAILABILITY: pregunta de disponibilidad compacta
+ * (grid semanal día × hora). El calendario completo vive en el admin; el form
+ * solo captura ventanas disponibles que un paso BOOKING puede consumir.
+ */
+declare function MaterialAvailabilityStep({ step, editable }: AvailabilityStepProps): JSX.Element;
+export default MaterialAvailabilityStep;

package/dist/FormSteps/AvailabilityStep/MaterialAvailabilityStep/MaterialAvailabilityStep.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext } from 'react';
+import { useFormStep } from '../../StepHooks';
+import FormContext from '../../../Contexts/FormContext';
+import { selectBreakPoint, useAppSelector } from '../../../hooks';
+import { calcStepWidth } from '../../StepFunctions';
+import ErkAvailabilityPicker from '../../../Shared/ErkAvailabilityPicker/ErkAvailabilityPicker';
+/**
+ * Conector del paso AVAILABILITY: pregunta de disponibilidad compacta
+ * (grid semanal día × hora). El calendario completo vive en el admin; el form
+ * solo captura ventanas disponibles que un paso BOOKING puede consumir.
+ */
+function MaterialAvailabilityStep({ step, editable }) {
+    const currentBreakPoint = useAppSelector(selectBreakPoint);
+    const { postview, formStyle } = useAppSelector((state) => state.global);
+    const formCtx = useContext(FormContext);
+    const isReadOnly = !editable || postview;
+    const widthStyle = currentBreakPoint <= step.size ? '100%' : calcStepWidth(step.size, formCtx.size);
+    const cssVars = {
+        width: widthStyle,
+        '--eureka-outline': formStyle.outlineColor,
+        '--eureka-primary': formStyle.primaryColor,
+        '--eureka-text': formStyle.textColor,
+        '--eureka-bg': formStyle.standAloneBackgroundColor ?? '#fff',
+    };
+    const { ref, value, onChange, error } = useFormStep(step, {
+        defaultValue: null,
+        rules: { required: step.required ? 'Marca tu disponibilidad' : undefined },
+    });
+    return (_jsx("div", { ref: ref, style: cssVars, children: _jsx(ErkAvailabilityPicker, { value: value, onChange: onChange, label: step.label, description: step.description, minTime: step.minTime, maxTime: step.maxTime, showWeekends: step.showWeekends, timezone: step.timezone, readOnly: isReadOnly, error: error?.message }) }));
+}
+export default MaterialAvailabilityStep;

package/dist/FormSteps/BookingStep/BookingStep.d.ts

@@ -0,0 +1,17 @@
+import { BookingStep } from '../../@Types/BookingFormStep';
+import { BookingSlot } from '../../@Types/BookingFormStep';
+import { StepProps } from '../Step';
+export interface BookingStepProps extends StepProps {
+    step: BookingStep;
+    /**
+     * Callback to fetch available slots for a given person + date.
+     * The form host wires this to their availability API.
+     * If omitted, the component shows an empty slot list.
+     */
+    fetchSlots?: (params: {
+        personId?: string;
+        date: string;
+    }) => Promise<BookingSlot[]>;
+}
+declare function BookingStepComponent(props: BookingStepProps): JSX.Element;
+export default BookingStepComponent;

package/dist/FormSteps/BookingStep/BookingStep.js

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

package/dist/FormSteps/BookingStep/MaterialBookingStep/MaterialBookingStep.d.ts

@@ -0,0 +1,7 @@
+import { BookingStepProps } from '../BookingStep';
+/**
+ * Conector del paso BOOKING: enlaza el estado del formulario (`useFormStep`) y el
+ * theming del form con el componente reutilizable `ErkBookingPicker` (en Shared).
+ */
+declare function MaterialBookingStep({ step, editable, fetchSlots }: BookingStepProps): JSX.Element;
+export default MaterialBookingStep;

package/dist/FormSteps/BookingStep/MaterialBookingStep/MaterialBookingStep.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext } from 'react';
+import { useFormStep } from '../../StepHooks';
+import FormContext from '../../../Contexts/FormContext';
+import { selectBreakPoint, useAppSelector } from '../../../hooks';
+import { calcStepWidth } from '../../StepFunctions';
+import ErkBookingPicker from '../../../Shared/ErkBookingPicker/ErkBookingPicker';
+/**
+ * Conector del paso BOOKING: enlaza el estado del formulario (`useFormStep`) y el
+ * theming del form con el componente reutilizable `ErkBookingPicker` (en Shared).
+ */
+function MaterialBookingStep({ step, editable, fetchSlots }) {
+    const currentBreakPoint = useAppSelector(selectBreakPoint);
+    const { postview, formStyle } = useAppSelector((state) => state.global);
+    const formCtx = useContext(FormContext);
+    const isReadOnly = !editable || postview;
+    const widthStyle = currentBreakPoint <= step.size ? '100%' : calcStepWidth(step.size, formCtx.size);
+    const cssVars = {
+        width: widthStyle,
+        '--eureka-outline': formStyle.outlineColor,
+        '--eureka-primary': formStyle.primaryColor,
+        '--eureka-text': formStyle.textColor,
+        '--eureka-bg': formStyle.standAloneBackgroundColor ?? '#fff',
+        '--booking-accent': formStyle.secondaryContrastColor,
+    };
+    const { ref, value, onChange, error } = useFormStep(step, {
+        defaultValue: null,
+        rules: { required: step.required ? 'Selecciona una cita' : undefined },
+    });
+    return (_jsx("div", { ref: ref, style: cssVars, children: _jsx(ErkBookingPicker, { value: value, onChange: onChange, label: step.label, description: step.description, durationMinutes: step.durationMinutes, bufferMinutes: step.bufferMinutes, bookingMode: step.bookingMode, temporaryLockMinutes: step.temporaryLockMinutes, personSelectionMode: step.personSelectionMode, persons: step.persons, collectContact: step.collectContact, fetchSlots: fetchSlots, readOnly: isReadOnly, error: error?.message }) }));
+}
+export default MaterialBookingStep;

package/dist/FormSteps/CheckBoxStep/CheckBoxStep.mobileLabel.test.js

@@ -48,7 +48,7 @@ function makeStore(currentBreakPoint) {
                     ...defaultRootState,
                     widthStats: {
                         currentBreakPoint,
-                        isMobile: currentBreakPoint <= checkBoxStep.size,
+                        isMobile: currentBreakPoint <= 1,
                         isResponsive: true,
                     },
                 },
@@ -57,15 +57,15 @@ function makeStore(currentBreakPoint) {
         middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(RootApi.middleware),
     });
 }
-function Harness({ currentBreakPoint }) {
+function Harness({ currentBreakPoint, step = checkBoxStep, }) {
     const methods = useForm({ mode: 'onTouched' });
-    return (_jsx(MaterialProviders, { formStyle: InternalFormStyle, children: _jsx(Provider, { store: makeStore(currentBreakPoint), context: StoreContext, children: _jsx(IdFormContext.Provider, { value: STORY_FORM_ID, children: _jsx(FormContext.Provider, { value: form, children: _jsx(SectionContext.Provider, { value: "SECTION_1", children: _jsx(FormProvider, { ...methods, children: _jsx(CheckBoxStep, { step: checkBoxStep, editable: true }) }) }) }) }) }) }));
+    return (_jsx(MaterialProviders, { formStyle: InternalFormStyle, children: _jsx(Provider, { store: makeStore(currentBreakPoint), context: StoreContext, children: _jsx(IdFormContext.Provider, { value: STORY_FORM_ID, children: _jsx(FormContext.Provider, { value: { ...form, steps: { ...form.steps, [step.id]: step } }, children: _jsx(SectionContext.Provider, { value: "SECTION_1", children: _jsx(FormProvider, { ...methods, children: _jsx(CheckBoxStep, { step: step, editable: true }) }) }) }) }) }) }));
 }
 function getLabelDiv() {
     // the leaf div holding only the label text (the wrapping column also matches by textContent)
     return screen.getByText((_, element) => element?.tagName === 'DIV' && element.children.length === 0 && element.textContent === `${LONG_LABEL}:`);
 }
-/** Makes every element report a 2-line-clamped overflow (jsdom has no layout). */
+/** Makes every element report a 1-line-clamped overflow (jsdom has no layout). */
 function mockLabelOverflow() {
     Object.defineProperty(HTMLElement.prototype, 'scrollHeight', {
         configurable: true,
@@ -76,7 +76,7 @@ function mockLabelOverflow() {
     Object.defineProperty(HTMLElement.prototype, 'clientHeight', {
         configurable: true,
         get() {
-            return 48;
+            return 24;
         },
     });
 }
@@ -85,22 +85,30 @@ afterEach(() => {
     delete HTMLElement.prototype.scrollHeight;
     delete HTMLElement.prototype.clientHeight;
 });
-describe('CheckBoxStep label on collapsed (mobile) breakpoints', () => {
-    it('wraps the label (2-line clamp) instead of single-line truncating it when the step collapses to 100% width', () => {
+describe('CheckBoxStep long labels', () => {
+    it('clamps the label to 1 line with a toggle instead of a plain ellipsis when the step collapses to 100% width', () => {
         // breakpoint 1 <= size 2 → MaterialInputContainer renders the step at width: 100%
         render(_jsx(Harness, { currentBreakPoint: 1 }));
         const label = getLabelDiv();
         expect(label.className).toBe(styles.clampLbl);
-        expect(label.className).not.toBe(styles.overflowLbl);
-        // the fixed desktop pixel maxWidth must not constrain the collapsed label
+        // no fixed desktop pixel maxWidth constrains the label
         expect(label.style.maxWidth).toBe('');
     });
-    it('keeps the single-line ellipsis label on desktop widths (control)', () => {
+    it('also clamps (with "ver más") when the step keeps a fixed width on a phone where 2 columns fit', () => {
+        // regression: a size-1 checkbox at breakpoint 2 used to render a single-line ellipsis with
+        // no way to read the full label
+        mockLabelOverflow();
+        render(_jsx(Harness, { currentBreakPoint: 2, step: { ...checkBoxStep, size: 1 } }));
+        const label = getLabelDiv();
+        expect(label.className).toBe(styles.clampLbl);
+        expect(label.style.maxWidth).toBe('');
+        expect(screen.getByRole('button', { name: 'ver más' })).toBeInTheDocument();
+    });
+    it('clamps on desktop widths too, without a toggle while the label fits', () => {
         // breakpoint 4 > size 2 → the step keeps its fixed desktop width
         render(_jsx(Harness, { currentBreakPoint: 4 }));
         const label = getLabelDiv();
-        expect(label.className).toBe(styles.overflowLbl);
-        expect(label.style.maxWidth).not.toBe('');
+        expect(label.className).toBe(styles.clampLbl);
         expect(screen.queryByRole('button', { name: 'ver más' })).not.toBeInTheDocument();
     });
     it('shows no "ver más" toggle when the label fits in the clamp', () => {

package/dist/FormSteps/CheckBoxStep/MaterialCheckBoxStep/MaterialCheckBoxStep.js

@@ -8,7 +8,6 @@ import { useAppSelector, selectWidthStats } from '../../../hooks';
 import { useFormStep } from '../../StepHooks';
 import StepFillerContainer from '../../Utils/@StepFiller/StepFiller';
 import MaterialInputContainer from '../../Utils/MaterialInputContainer/MaterialInputContainer';
-import { calcStepWidth, resolveStepSpan } from '../../StepFunctions';
 function CheckBoxStep({ step, editable }) {
     const { ref, value, onChange, error, field } = useFormStep(step, {
         defaultValue: step.defaultValue ?? false,
@@ -20,15 +19,15 @@ function CheckBoxStep({ step, editable }) {
     const { formStyle, postview } = useAppSelector((state) => state.global);
     const form = useContext(FormContext);
     const widthStats = useAppSelector(selectWidthStats);
-    const span = resolveStepSpan(step, widthStats, form.size);
-    // when the breakpoint collapses the step to width: 100% (see MaterialInputContainer),
-    // the fixed desktop pixel width no longer matches the real available space
-    const collapsed = widthStats.currentBreakPoint <= span;
+    // The label is clamped to 1 line with a "ver más" toggle at every width. A plain
+    // ellipsis was used while the step kept its fixed desktop pixel width, but that left long
+    // labels unreadable wherever the step is narrow (e.g. a size-1 checkbox on a phone where 2
+    // columns fit).
     const labelRef = useRef(null);
     const [expanded, setExpanded] = useState(false);
     const [clamped, setClamped] = useState(false);
     useLayoutEffect(() => {
-        if (!collapsed || expanded)
+        if (expanded)
             return;
         const measure = () => {
             const label = labelRef.current;
@@ -38,7 +37,7 @@ function CheckBoxStep({ step, editable }) {
         measure();
         window.addEventListener('resize', measure);
         return () => window.removeEventListener('resize', measure);
-    }, [collapsed, expanded, step.label]);
+    }, [expanded, step.label, widthStats.currentBreakPoint]);
     const renderNested = () => {
         const steps = value ? step.steps : step.uncheckedSteps;
         return (_jsx(React.Fragment, { children: steps?.map((idStep) => {
@@ -48,18 +47,12 @@ function CheckBoxStep({ step, editable }) {
     };
     const renderLabel = (colon = false) => {
         const label = `${step.label}${step.required ? ' *' : ''}${colon ? ':' : ''}`;
-        if (!collapsed) {
-            return (_jsx("div", { className: span === 4 ? styles.checkboxLbl : styles.overflowLbl, style: {
-                    maxWidth: calcStepWidth(span, form.size) - 45,
-                }, children: label }));
-        }
         return (_jsxs("div", { className: styles.labelColumn, children: [_jsx("div", { ref: labelRef, className: expanded ? styles.expandedLbl : styles.clampLbl, children: label }), (clamped || expanded) && (_jsx("button", { type: "button", className: styles.toggleLbl, style: { color: formStyle.primaryColor }, onClick: (event) => {
                         event.stopPropagation();
                         setExpanded(!expanded);
                     }, children: expanded ? 'ver menos' : 'ver más' }))] }));
     };
     return (_jsxs(StepFillerContainer, { step: step, children: [_jsx(MaterialInputContainer, { step: step, editable: editable, maxHeight: step.size < 4, children: _jsxs("div", { className: styles.container, children: [_jsxs("div", { className: styles.labelCheckBoxContainer, style: {
-                                height: span < 4 && !collapsed ? 31 : undefined,
                                 minHeight: 31,
                                 alignItems: step.isList ? 'start' : 'center',
                             }, children: [step.label && !step.isList && renderLabel(true), _jsx(ErkCheckBox, { ...field, padding: "0px", inputRef: ref, error: !!error, checked: value, onChange: onChange, "data-testid": step.id, readOnly: !editable || postview }), step.label && step.isList && renderLabel()] }), (step.description ?? !!error) && (_jsx("div", { className: styles.descriptionPar, style: {

package/dist/FormSteps/CheckBoxStep/MaterialCheckBoxStep/MaterialCheckBoxStep.module.css

@@ -3,17 +3,6 @@
     flex-direction: column;
     max-width: 100%;
 }
-.checkboxLbl,
-.overflowLbl {
-    font-size: 18px;
-    margin-right: 10px;
-    margin-left: 10px;
-}
-.overflowLbl {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
 .labelColumn {
     display: flex;
     flex-direction: column;
@@ -30,8 +19,8 @@
 .clampLbl {
     display: -webkit-box;
     -webkit-box-orient: vertical;
-    -webkit-line-clamp: 2;
-    line-clamp: 2;
+    -webkit-line-clamp: 1;
+    line-clamp: 1;
     overflow: hidden;
 }
 .toggleLbl {

package/dist/FormSteps/ClassifierSelectorStep/ClassifierSelectorStep.lateClassifiers.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/FormSteps/ClassifierSelectorStep/ClassifierSelectorStep.lateClassifiers.test.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it } from 'vitest';
+import '@testing-library/jest-dom';
+import { Provider } from 'react-redux';
+import { FormProvider, useForm } from 'react-hook-form';
+import { configureStore } from '@reduxjs/toolkit';
+import { EurekaFormsReducer, defaultRootState } from '../../Utils/store';
+import { RootApi } from '../../Utils/_api';
+import FormStepTypes from '../../constants/FormStepTypes';
+import { StoreContext } from '../../Utils/StoreContext';
+import FormContext, { IdFormContext } from '../../Contexts/FormContext';
+import SectionContext from '../../Contexts/SectionContext';
+import MaterialProviders from '../../Utils/MaterialProviders';
+import InternalFormStyle from '../../constants/InternalFormStyle';
+import ClassifierSelectorStep from './ClassifierSelectorStep';
+const ID_FORM = 'LATE_CLASSIFIERS_FORM';
+const step = {
+    id: 'tipo-step',
+    idSection: 'SECTION_1',
+    stepPath: ['tipo-step'],
+    type: FormStepTypes.CLASSIFIER_SELECTOR,
+    idClassifier: 'tipo',
+    label: 'Tipo de solicitud',
+    description: '',
+    searchable: true,
+    options: {},
+    required: false,
+    size: 2,
+};
+/** The project's classifiers, as the host resolves them (asynchronously) and passes them to the form. */
+const classifiers = {
+    tipo: { _id: 'tipo', name: 'Tipo de solicitud', children: ['bug', 'mejora'] },
+    bug: { _id: 'bug', name: 'Error / Bug', children: [] },
+    mejora: { _id: 'mejora', name: 'Propuesta de mejora', children: [] },
+};
+const form = {
+    firstSection: 'SECTION_1',
+    sections: {
+        SECTION_1: { id: 'SECTION_1', name: 'Sección 1', steps: ['tipo-step'], nextSection: null },
+    },
+    steps: { 'tipo-step': step },
+    confirmationMessage: { blocks: [], entityMap: {} },
+    showLink: false,
+    size: { blockSize: 200, blockNum: 4, spacingSize: 10 },
+};
+function makeStore() {
+    return configureStore({
+        reducer: { forms: EurekaFormsReducer, [RootApi.reducerPath]: RootApi.reducer },
+        preloadedState: { forms: { [ID_FORM]: { ...defaultRootState } } },
+        middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(RootApi.middleware),
+    });
+}
+function Harness({ store, formClassifiers, }) {
+    const methods = useForm({ mode: 'onTouched' });
+    return (_jsx(MaterialProviders, { formStyle: InternalFormStyle, children: _jsx(Provider, { store: store, context: StoreContext, children: _jsx(IdFormContext.Provider, { value: ID_FORM, children: _jsx(FormContext.Provider, { value: { ...form, classifiers: formClassifiers }, children: _jsx(SectionContext.Provider, { value: "SECTION_1", children: _jsx(FormProvider, { ...methods, children: _jsx(ClassifierSelectorStep, { step: step, editable: true }) }) }) }) }) }) }));
+}
+describe('ClassifierSelectorStep with classifiers that arrive after the first render', () => {
+    it('renders nothing while the classifiers are unknown, then the selector with its options', async () => {
+        const user = userEvent.setup();
+        const store = makeStore();
+        const { rerender } = render(_jsx(Harness, { store: store, formClassifiers: undefined }));
+        expect(screen.queryByRole('combobox')).not.toBeInTheDocument();
+        rerender(_jsx(Harness, { store: store, formClassifiers: classifiers }));
+        await user.click(await screen.findByRole('combobox'));
+        expect(await screen.findByRole('option', { name: 'Error / Bug' })).toBeInTheDocument();
+        expect(screen.getByRole('option', { name: 'Propuesta de mejora' })).toBeInTheDocument();
+    });
+});

package/dist/FormSteps/ClassifierSelectorStep/MaterialClassifierSelectorStep/MaterialClassifierSelectorStep.js

@@ -50,8 +50,10 @@ function ClassifierSelectorStep({ step, editable }) {
             };
         }) ?? []);
     }, 
+    // The classifiers dictionary can arrive after the first render (see useSetupApp), so the
+    // options must follow it, not only the dependency values.
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [dependenciesValues]);
+    [dependenciesValues, classifier, form.classifiers]);
     useEffect(() => {
         if (value && !options?.find((option) => option.value === value?.value)) {
             onChange('');

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 {};