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

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

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;