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

package/dist/App/App.stories.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+import type { StoryObj } from '@storybook/react-vite';
+import App from './App';
+declare function FullHeight(Story: React.ComponentType): JSX.Element;
+declare const meta: {
+    title: string;
+    component: typeof App;
+    decorators: (typeof FullHeight)[];
+    parameters: {
+        layout: string;
+    };
+    args: {
+        isWidget: false;
+        idOrganization: string;
+        valuesData: {};
+        customSubmit: (values: Record<string, unknown>) => Promise<void>;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+/** Parsed form, as the widget receives it from the API. */
+export declare const Parseado: Story;
+/** TITLE with an INTEGRATION entity depending on a TEXTINPUT step. */
+export declare const IntegracionConStepDependencia: Story;
+/** Parsed form pre-filled with values. */
+export declare const ParseadoConValores: Story;
+/** Raw builder form: EUREKA entities resolved locally via mapDraftEntities. */
+export declare const PreParseado: Story;
+/** Final view (postview): what the user submitted, rendered read-only. */
+export declare const Postview: Story;

package/dist/App/App.stories.js

@@ -0,0 +1,298 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import App from './App';
+/**
+ * Stories to test full forms from a `{ form, values }` payload:
+ *
+ * - `Parseado`: a parsed form (what the widget receives, drafts are plain text).
+ * - `PreParseado`: a raw builder form (EUREKA/ENTITYVALUES entities still in the
+ *   drafts, `rootSteps` instead of section steps). Entities are resolved locally
+ *   with a stubbed `mapDraftEntities`, so no backend is needed.
+ *
+ * Paste any form JSON into `formData`/`valuesData` from the Controls panel.
+ */
+/** Raw builder form (pre-parsed): title draft still has EUREKA entities. */
+const preParsedForm = {
+    steps: {
+        'TITLE-NkSFXOcH-z': {
+            id: 'TITLE-NkSFXOcH-z',
+            type: 'TITLE',
+            title: {
+                blocks: [
+                    {
+                        key: '2ri0w',
+                        type: 'unstyled',
+                        text: 'Razón social (Proveedor) ',
+                        depth: 0,
+                        inlineStyleRanges: [{ offset: 0, length: 24, style: 'BOLD' }],
+                        entityRanges: [{ offset: 0, length: 24, key: 0 }],
+                        data: {},
+                    },
+                ],
+                entityMap: {
+                    '0': {
+                        type: 'EUREKA',
+                        mutability: 'IMMUTABLE',
+                        data: {
+                            type: 'ENTITYVALUES',
+                            idEntity: '6400adf810f16b8b68c24e72',
+                            renderType: 'INLINE',
+                            block: {
+                                key: '2522g',
+                                type: 'unstyled',
+                                text: 'Razón social (Proveedor)',
+                                depth: 0,
+                                inlineStyleRanges: [{ offset: 0, length: 24, style: 'BOLD' }],
+                                entityRanges: [{ offset: 0, length: 24, key: 0 }],
+                                data: {},
+                            },
+                            entityMap: {
+                                '0': {
+                                    type: 'EUREKA',
+                                    mutability: 'IMMUTABLE',
+                                    data: {
+                                        type: 'ENTITYVALUE_MAPPING',
+                                        idEntity: '6400adf810f16b8b68c24e72',
+                                        idProperty: 'NombreCompleto',
+                                    },
+                                },
+                            },
+                        },
+                    },
+                },
+            },
+        },
+        'TEXTINPUT-lCmhOv5hYA': {
+            id: 'TEXTINPUT-lCmhOv5hYA',
+            type: 'TEXTINPUT',
+            label: 'name',
+            description: '',
+            required: false,
+            size: 2,
+            isSubject: false,
+        },
+    },
+    size: {
+        blockNum: 4,
+        blockSize: 210,
+        spacingSize: 20,
+    },
+    rootSteps: ['TITLE-NkSFXOcH-z', 'TEXTINPUT-lCmhOv5hYA'],
+    label: 'Enviar',
+    firstSection: 'FIRST',
+    sections: {
+        FIRST: {
+            id: 'FIRST',
+            steps: ['TITLE-NkSFXOcH-z', 'TEXTINPUT-lCmhOv5hYA'],
+            name: '',
+            nextSection: null,
+        },
+    },
+};
+/** The same form already parsed: drafts are plain text, no pending entities. */
+const parsedForm = {
+    ...preParsedForm,
+    steps: {
+        ...preParsedForm.steps,
+        'TITLE-NkSFXOcH-z': {
+            id: 'TITLE-NkSFXOcH-z',
+            type: 'TITLE',
+            title: {
+                blocks: [
+                    {
+                        key: '2ri0w',
+                        type: 'unstyled',
+                        text: 'Razón social (Proveedor)',
+                        depth: 0,
+                        inlineStyleRanges: [{ offset: 0, length: 24, style: 'BOLD' }],
+                        entityRanges: [],
+                        data: {},
+                    },
+                ],
+                entityMap: {},
+            },
+        },
+    },
+};
+const exampleValues = {
+    'TEXTINPUT-lCmhOv5hYA': 'Capta S.A.S.',
+};
+/**
+ * Local replacement for the backend `/draft/mapFormEntities` call: resolves a
+ * draft by dropping its EUREKA entities and keeping the literal text, so
+ * pre-parsed forms render in Storybook without a server.
+ */
+function makeStoryMapDraftEntities(form) {
+    return (property) => {
+        const path = property.split('.');
+        const stepProperty = path.pop();
+        const idStep = path[0];
+        const step = form.steps[idStep];
+        const draft = stepProperty ? step?.[stepProperty] : undefined;
+        if (!draft)
+            return Promise.reject(new Error(`Storybook mapDraftEntities: draft not found for "${property}"`));
+        return Promise.resolve({
+            blocks: draft.blocks.map((block) => ({ ...block, entityRanges: [] })),
+            entityMap: {},
+        });
+    };
+}
+function FullHeight(Story) {
+    return (_jsx("div", { style: { height: '100vh', display: 'flex', flexDirection: 'column' }, children: _jsx(Story, {}) }));
+}
+const meta = {
+    title: 'Form/FormRenderer',
+    component: App,
+    decorators: [FullHeight],
+    parameters: { layout: 'fullscreen' },
+    args: {
+        isWidget: false,
+        idOrganization: 'storybook',
+        valuesData: {},
+        customSubmit: (values) => {
+            // eslint-disable-next-line no-console
+            console.log('Storybook submit:', values);
+            return Promise.resolve();
+        },
+    },
+};
+export default meta;
+/** Parsed form, as the widget receives it from the API. */
+export const Parseado = {
+    args: {
+        formData: parsedForm,
+    },
+};
+/**
+ * Regression: TITLE whose title draft has an INTEGRATION entity parameterized by a
+ * TEXTINPUT step (`dependencies: [idStep]`). Mimics the backend contract of
+ * `/draft/mapFormEntities` (`keepNotMapped`): with the dependency unset the entity
+ * can't resolve and comes back untouched; with a value the text is resolved and the
+ * entity dropped. Production crashed with React #185 (max update depth) on render.
+ */
+const integrationTitleForm = {
+    steps: {
+        'TITLE-w4yCyiB1LM': {
+            id: 'TITLE-w4yCyiB1LM',
+            type: 'TITLE',
+            dependencies: ['TEXTINPUT-bwKwg_jKzD'],
+            description: {
+                blocks: [
+                    {
+                        depth: 0,
+                        data: {},
+                        inlineStyleRanges: [],
+                        text: '',
+                        type: 'unstyled',
+                        key: '3hfq7',
+                        entityRanges: [],
+                    },
+                ],
+                entityMap: {},
+            },
+            title: {
+                blocks: [
+                    {
+                        depth: 0,
+                        data: {},
+                        inlineStyleRanges: [{ offset: 7, length: 31, style: 'BOLD' }],
+                        text: 'Título Test Draft Integration Con Step ',
+                        type: 'unstyled',
+                        key: '0',
+                        entityRanges: [{ offset: 7, length: 31, key: 0 }],
+                    },
+                ],
+                entityMap: {
+                    '0': {
+                        type: 'EUREKA',
+                        mutability: 'IMMUTABLE',
+                        data: {
+                            type: 'INTEGRATION',
+                            idIntegration: '6960368e749b73499854bcac',
+                            values: { param: { type: 'STEP', idStep: 'TEXTINPUT-bwKwg_jKzD' } },
+                        },
+                    },
+                },
+            },
+        },
+        'TEXTINPUT-bwKwg_jKzD': {
+            id: 'TEXTINPUT-bwKwg_jKzD',
+            type: 'TEXTINPUT',
+            label: 'Campo',
+            description: '',
+            required: false,
+            size: 2,
+            isSubject: false,
+        },
+    },
+    size: { blockNum: 4, blockSize: 210, spacingSize: 20 },
+    rootSteps: ['TITLE-w4yCyiB1LM', 'TEXTINPUT-bwKwg_jKzD'],
+    label: 'Enviar',
+    firstSection: 'FIRST',
+    sections: {
+        FIRST: {
+            id: 'FIRST',
+            steps: ['TITLE-w4yCyiB1LM', 'TEXTINPUT-bwKwg_jKzD'],
+            name: '',
+            nextSection: null,
+        },
+    },
+};
+function makeIntegrationMapDraftEntities(form) {
+    return (property, dependencies) => {
+        const path = property.split('.');
+        const stepProperty = path.pop();
+        const idStep = path[0];
+        const step = form.steps[idStep];
+        const draft = stepProperty ? step?.[stepProperty] : undefined;
+        if (!draft)
+            return Promise.reject(new Error(`Storybook mapDraftEntities: draft not found for "${property}"`));
+        const depValue = dependencies['TEXTINPUT-bwKwg_jKzD'];
+        // Unresolvable integration (dependency null): keepNotMapped — return the draft as-is.
+        if (depValue == null || depValue === '')
+            return Promise.resolve(JSON.parse(JSON.stringify(draft)));
+        // Resolved: replace each entity range with the integration result, drop the entities.
+        return Promise.resolve({
+            blocks: draft.blocks.map((block) => {
+                let text = block.text;
+                for (const range of [...block.entityRanges].sort((a, b) => b.offset - a.offset)) {
+                    const chars = [...text];
+                    chars.splice(range.offset, range.length, ...`[${depValue}]`);
+                    text = chars.join('');
+                }
+                return { ...block, text, entityRanges: [], inlineStyleRanges: [] };
+            }),
+            entityMap: {},
+        });
+    };
+}
+/** TITLE with an INTEGRATION entity depending on a TEXTINPUT step. */
+export const IntegracionConStepDependencia = {
+    args: {
+        formData: integrationTitleForm,
+        mapDraftEntities: makeIntegrationMapDraftEntities(integrationTitleForm),
+    },
+};
+/** Parsed form pre-filled with values. */
+export const ParseadoConValores = {
+    args: {
+        formData: parsedForm,
+        valuesData: exampleValues,
+    },
+};
+/** Raw builder form: EUREKA entities resolved locally via mapDraftEntities. */
+export const PreParseado = {
+    args: {
+        formData: preParsedForm,
+        mapDraftEntities: makeStoryMapDraftEntities(preParsedForm),
+    },
+};
+/** Final view (postview): what the user submitted, rendered read-only. */
+export const Postview = {
+    args: {
+        formData: parsedForm,
+        valuesData: exampleValues,
+        postview: true,
+        internal: true,
+        editable: false,
+    },
+};

package/dist/App/App.stories.test.d.ts

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

package/dist/App/App.stories.test.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { composeStories } from '@storybook/react-vite';
+import { describe, expect, it } from 'vitest';
+import '@testing-library/jest-dom';
+import * as stories from './App.stories';
+const { Parseado, ParseadoConValores, PreParseado, Postview, IntegracionConStepDependencia } = composeStories(stories);
+describe('FormRenderer stories', () => {
+    it('renders the parsed form with its title and input', async () => {
+        const { container } = render(_jsx(Parseado, {}));
+        await waitFor(() => {
+            expect(container.textContent).toContain('Razón social');
+        });
+        expect(screen.getAllByText('name').length).toBeGreaterThan(0);
+    });
+    it('renders the parsed form pre-filled with values', async () => {
+        render(_jsx(ParseadoConValores, {}));
+        await waitFor(() => {
+            expect(screen.getByDisplayValue('Capta S.A.S.')).toBeInTheDocument();
+        });
+    });
+    it('renders the pre-parsed form resolving EUREKA entities locally', async () => {
+        const { container } = render(_jsx(PreParseado, {}));
+        await waitFor(() => {
+            expect(container.textContent).toContain('Razón social');
+        });
+        expect(screen.getAllByText('name').length).toBeGreaterThan(0);
+    });
+    it('renders the postview with the submitted value', async () => {
+        render(_jsx(Postview, {}));
+        await waitFor(() => {
+            expect(screen.getByDisplayValue('Capta S.A.S.')).toBeInTheDocument();
+        });
+    });
+    it('renders a title with an INTEGRATION entity depending on a step and reacts to typing', async () => {
+        const { container } = render(_jsx(IntegracionConStepDependencia, {}));
+        await waitFor(() => {
+            expect(container.textContent).toContain('Título');
+        });
+        const input = await screen.findByRole('textbox');
+        await userEvent.type(input, 'hola');
+        // The dependency dispatch is debounced (1s), so give the refetch room to land.
+        await waitFor(() => {
+            expect(container.textContent).toContain('[hola]');
+        }, { timeout: 5000 });
+        // Changing the dependency AFTER the first resolution must re-map the title:
+        // the stored value is a mapped copy with its entities stripped, so mapping
+        // has to keep keying off the original step draft.
+        await userEvent.clear(input);
+        await userEvent.type(input, 'chao');
+        await waitFor(() => {
+            expect(container.textContent).toContain('[chao]');
+        }, { timeout: 5000 });
+    });
+});

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

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

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

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

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

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

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

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

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

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

package/dist/FormSteps/TitleStep/MaterialTitleStep/MaterialTitleStep.js

@@ -19,8 +19,10 @@ function TitleStep({ step }) {
     const size = step.size ?? form.size.blockNum;
     const title = useMemo(() => calcBaseDraft(value?.title ?? step.title), //Usa por defecto lo que venga en el value, pero no escucha cambios
     [step.title, value?.title]);
+    const sourceTitle = useMemo(() => calcBaseDraft(step.title), [step.title]);
     const description = useMemo(() => calcBaseDraft(value?.description ?? step.description), //Usa por defecto lo que venga en el value, pero no escucha cambios
     [step.description, value?.description]);
+    const sourceDescription = useMemo(() => calcBaseDraft(step.description), [step.description]);
     const dependencies = useAppSelector((state) => selectDependencies(state, step.dependencies));
     const stableDepsValues = useAppSelector((state) => (step.dependencies ?? []).map((id) => state.site.dependencies[id]?.value), shallowEqual);
     const values = useMemo(() => {
@@ -37,7 +39,7 @@ function TitleStep({ step }) {
             width: widthStats.currentBreakPoint <= size ? '100%' : calcStepWidth(size, form.size),
         }, children: [_jsx("div", { className: styles.titleLbl, style: {
                     textAlign: widthStats.isMobile && widthStats.currentBreakPoint <= size ? 'center' : 'start',
-                }, children: _jsx(SmartDraftRenderer, { draft: title, dependencies: values, property: `${path}.title`, onChange: (title) => onChange({ ...value, title }) }) }), _jsx("div", { className: styles.descriptionPar, children: _jsx(SmartDraftRenderer, { draft: description, dependencies: values, margin: title ? '10px 0px' : '0px 0px 5px 0px', property: `${path}.description`, onChange: (description) => onChange({ ...value, description }) }) })] }));
+                }, children: _jsx(SmartDraftRenderer, { draft: title, sourceDraft: sourceTitle, dependencies: values, property: `${path}.title`, onChange: (title) => onChange({ ...value, title }) }) }), _jsx("div", { className: styles.descriptionPar, children: _jsx(SmartDraftRenderer, { draft: description, sourceDraft: sourceDescription, dependencies: values, margin: title ? '10px 0px' : '0px 0px 5px 0px', property: `${path}.description`, onChange: (description) => onChange({ ...value, description }) }) })] }));
 }
 export default TitleStep;
 function calcBaseDraft(value) {

package/dist/Shared/ErkAutocompleteOption.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Option element for the searchable `ErkSmartSelect` (MUI `Autocomplete`). Replaces MUI `MenuItem`
+ * in `renderOption`: v9's `MenuItem` requires a surrounding `MenuList` context (it throws without
+ * one), but an Autocomplete's listbox is a plain `<ul>`, so a styled `<li>` is used instead.
+ * Hover/focus styling comes from MUI's own `.Erk-MuiAutocomplete-option` rules (the option props
+ * carry that class); this just ports the `ErkMenuItem` look (padding, wrapping, leading-icon layout)
+ * and the selected background.
+ */
+declare const ErkAutocompleteOption: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+    selected?: boolean;
+}, import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, {}>;
+export default ErkAutocompleteOption;

package/dist/Shared/ErkAutocompleteOption.js

@@ -0,0 +1,37 @@
+import { styled } from '@mui/material';
+/**
+ * Option element for the searchable `ErkSmartSelect` (MUI `Autocomplete`). Replaces MUI `MenuItem`
+ * in `renderOption`: v9's `MenuItem` requires a surrounding `MenuList` context (it throws without
+ * one), but an Autocomplete's listbox is a plain `<ul>`, so a styled `<li>` is used instead.
+ * Hover/focus styling comes from MUI's own `.Erk-MuiAutocomplete-option` rules (the option props
+ * carry that class); this just ports the `ErkMenuItem` look (padding, wrapping, leading-icon layout)
+ * and the selected background.
+ */
+const ErkAutocompleteOption = styled('li', {
+    // `ownerState` is injected by MUI v9 into the option props (spread here via Autocomplete's
+    // renderOption); a custom shouldForwardProp drops MUI's default exclusion, so filter it too or it
+    // leaks onto the <li> (React "unrecognized prop" warning).
+    shouldForwardProp: (prop) => prop !== 'selected' && prop !== 'ownerState',
+})(({ theme, selected }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    position: 'relative',
+    listStyle: 'none',
+    padding: '6px 12px',
+    whiteSpace: 'normal',
+    cursor: 'pointer',
+    backgroundColor: selected ? theme.palette.action.selected : undefined,
+    '&:has(.ErkIcon)': {
+        paddingLeft: '40px',
+        '& .ErkIcon': {
+            left: 12,
+            top: '50%',
+            position: 'absolute',
+            transform: 'translateY(-50%)',
+            fill: theme.palette.primary.main,
+            width: '20px',
+            height: '20px',
+        },
+    },
+}));
+export default ErkAutocompleteOption;

package/dist/Shared/ErkDatePicker/ErkDatePicker.js

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

package/dist/Shared/ErkDateRangePicker/ErkDateRangePicker.js

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

package/dist/Shared/ErkSmartSelect/ErkSmartSelect.js

@@ -3,6 +3,7 @@ import { createFilterOptions, CircularProgress, Autocomplete as MuiAutocomplete,
 import ErkSelect from '../ErkSelect/ErkSelect';
 import { StyledTextField } from '../ErkTextField/ErkTextField';
 import ErkMenuItem from '../ErkMenuItem';
+import ErkAutocompleteOption from '../ErkAutocompleteOption';
 const filter = createFilterOptions();
 const StyledAutoComplete = styled(MuiAutocomplete)(({ theme, readOnly, ...props }) => ({
     '& .Erk-MuiInputBase-root': {
@@ -34,7 +35,7 @@ export default function ErkSmartSelect({ options, value = '', onChange, label, g
                 else {
                     return filter(options, params);
                 }
-            }, renderOption: ({ key, ...props }, option) => (_jsx(ErkMenuItem, { ...props, children: option.label }, key)), getOptionKey: (option) => getValueString(option), getOptionLabel: (option) => {
+            }, renderOption: ({ key, ...props }, option, state) => (_jsx(ErkAutocompleteOption, { ...props, selected: state.selected, children: option.label }, key)), getOptionKey: (option) => getValueString(option), getOptionLabel: (option) => {
                 // Value selected with enter, right from the input
                 if (typeof option === 'string') {
                     return option;

package/dist/Shared/ErkSmartSelect/ErkSmartSelect.test.d.ts

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

package/dist/Shared/ErkSmartSelect/ErkSmartSelect.test.js

@@ -0,0 +1,33 @@
+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, vi } from 'vitest';
+import '@testing-library/jest-dom';
+import ErkSmartSelect from './ErkSmartSelect';
+import MaterialProviders from '../../Utils/MaterialProviders';
+import InternalFormStyle from '../../constants/InternalFormStyle';
+const options = [
+    { label: 'Uno', value: '1' },
+    { label: 'Dos', value: '2' },
+];
+describe('ErkSmartSelect (searchable)', () => {
+    it('renders the options as listbox <li> items when opened, with no prop leaking to the DOM', async () => {
+        const user = userEvent.setup();
+        const consoleError = vi.spyOn(console, 'error').mockImplementation(() => { });
+        render(_jsx(MaterialProviders, { formStyle: InternalFormStyle, children: _jsx(ErkSmartSelect, { searchable: true, label: "Selector", options: options, value: "", onChange: () => { } }) }));
+        await user.click(screen.getByRole('combobox'));
+        const option = await screen.findByRole('option', { name: 'Uno' });
+        expect(option.tagName).toBe('LI');
+        expect(screen.getByRole('option', { name: 'Dos' })).toBeInTheDocument();
+        // `ownerState`/`selected` must not reach the <li> (styled shouldForwardProp filters them).
+        expect(option).not.toHaveAttribute('ownerState');
+        expect(consoleError).not.toHaveBeenCalled();
+        consoleError.mockRestore();
+    });
+    it('marks the selected option', async () => {
+        const user = userEvent.setup();
+        render(_jsx(MaterialProviders, { formStyle: InternalFormStyle, children: _jsx(ErkSmartSelect, { searchable: true, label: "Selector", options: options, value: options[0], onChange: () => { } }) }));
+        await user.click(screen.getByRole('combobox'));
+        expect(await screen.findByRole('option', { name: 'Uno' })).toHaveAttribute('aria-selected', 'true');
+    });
+});

package/dist/Shared/SmartDraftRenderer/SmartDraftRenderer.d.ts

@@ -3,9 +3,15 @@ import { EurekaDraft } from '../../@Types/Draft/Draft';
 interface SmartDraftRendererProps {
     property: string;
     draft: EurekaDraft;
+    /**
+     * The unmapped draft from the form definition. `draft` may be a previously mapped copy
+     * (entities already resolved and stripped), so whether mapping runs — and keeps re-running
+     * when `dependencies` change — must be decided from the original.
+     */
+    sourceDraft?: EurekaDraft;
     margin?: React.CSSProperties['margin'];
     dependencies: Record<string, any>;
     onChange?: (value: EurekaDraft) => void;
 }
-declare function SmartDraftRenderer({ draft, margin, onChange, property, dependencies }: SmartDraftRendererProps): JSX.Element;
+declare function SmartDraftRenderer({ draft, sourceDraft, margin, onChange, property, dependencies, }: SmartDraftRendererProps): JSX.Element;
 export default SmartDraftRenderer;

package/dist/Shared/SmartDraftRenderer/SmartDraftRenderer.js

@@ -11,11 +11,11 @@ import { skipToken } from '@reduxjs/toolkit/query';
 import { useAppSelector } from '../../hooks';
 import { IdFormContext } from '../../Contexts/FormContext';
 import { DraftLoadingContext } from './DraftLoadingContext';
-function SmartDraftRenderer({ draft, margin, onChange, property, dependencies }) {
+function SmartDraftRenderer({ draft, sourceDraft, margin, onChange, property, dependencies, }) {
     const idForm = useContext(IdFormContext);
     const mapDraftEntities = useContext(CustomContext).mapDraftEntities;
     const postview = useAppSelector((state) => state.global.postview);
-    const hasEntities = useMemo(() => Object.keys(draft.entityMap).length > 0, [draft]);
+    const hasEntities = useMemo(() => Object.keys((sourceDraft ?? draft).entityMap).length > 0, [sourceDraft, draft]);
     const { data: mapped, isFetching } = DraftApi.useMapDraftQuery(!hasEntities || postview
         ? skipToken
         : {

package/package.json

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