@arquimedes.co/eureka-forms 3.0.50-test → 3.0.52-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/DatePickerStep/DatePickerStep.required.test.d.ts

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

package/dist/FormSteps/DatePickerStep/DatePickerStep.required.test.js

@@ -0,0 +1,94 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect } from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it, vi } from 'vitest';
+import '@testing-library/jest-dom';
+import { Provider } from 'react-redux';
+import { useForm, FormProvider } 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 { IdFormContext } from '../../Contexts/FormContext';
+import FormContext from '../../Contexts/FormContext';
+import SectionContext from '../../Contexts/SectionContext';
+import MaterialProviders from '../../Utils/MaterialProviders';
+import InternalFormStyle from '../../constants/InternalFormStyle';
+import DatePickerStep from './DatePickerStep';
+const STORY_FORM_ID = 'STORY_FORM';
+const requiredDateStep = {
+    id: 'datepicker-step',
+    idSection: 'SECTION_1',
+    stepPath: ['datepicker-step'],
+    type: FormStepTypes.DATEPICKER,
+    label: 'Fecha de nacimiento',
+    description: null,
+    required: true,
+    pickTime: false,
+    size: 4,
+    editable: true,
+};
+const form = {
+    firstSection: 'SECTION_1',
+    sections: {
+        SECTION_1: { id: 'SECTION_1', name: 'Sección 1', steps: [], nextSection: null },
+    },
+    steps: { 'datepicker-step': { ...requiredDateStep } },
+    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: { [STORY_FORM_ID]: defaultRootState } },
+        middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(RootApi.middleware),
+    });
+}
+function Harness({ onValid, pickTime, required = true, onReady, }) {
+    const methods = useForm({ mode: 'onTouched' });
+    const step = { ...requiredDateStep, required, pickTime: !!pickTime };
+    useEffect(() => {
+        onReady?.(methods);
+    }, [methods, onReady]);
+    return (_jsx(MaterialProviders, { formStyle: InternalFormStyle, children: _jsx(Provider, { store: makeStore(), 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: _jsxs("form", { onSubmit: (e) => void methods.handleSubmit(onValid)(e), children: [_jsx(DatePickerStep, { step: step, editable: true }), _jsx("button", { type: "submit", children: "Enviar" })] }) }) }) }) }) }) }));
+}
+describe('DatePickerStep required validation', () => {
+    it('does not leak a defaultValue Date into the form value on mount', () => {
+        let methods;
+        render(_jsx(Harness, { onValid: vi.fn(), onReady: (m) => (methods = m) }));
+        expect(methods?.getValues('datepicker-step') ?? null).toBeNull();
+    });
+    it('blocks submit and shows the obligatorio error when a required date is left empty (handleSubmit)', async () => {
+        const onValid = vi.fn();
+        render(_jsx(Harness, { onValid: onValid }));
+        await userEvent.click(screen.getByRole('button', { name: 'Enviar' }));
+        await waitFor(() => {
+            expect(screen.getByText('Este campo es obligatorio')).toBeInTheDocument();
+        });
+        expect(onValid).not.toHaveBeenCalled();
+    });
+    it('reports invalid via trigger() like the real ColumnForm submit path', async () => {
+        let methods;
+        render(_jsx(Harness, { onValid: vi.fn(), onReady: (m) => (methods = m) }));
+        const valid = await methods.trigger(undefined, { shouldFocus: true });
+        expect(valid).toBe(false);
+    });
+    it('pickTime required: trigger() reports invalid when empty', async () => {
+        let methods;
+        render(_jsx(Harness, { onValid: vi.fn(), pickTime: true, onReady: (m) => (methods = m) }));
+        const valid = await methods.trigger(undefined, { shouldFocus: true });
+        expect(valid).toBe(false);
+    });
+    it('control: a NON-required empty date submits (proves the required flag is the deciding factor)', async () => {
+        const onValid = vi.fn();
+        render(_jsx(Harness, { onValid: onValid, required: false }));
+        await userEvent.click(screen.getByRole('button', { name: 'Enviar' }));
+        await waitFor(() => {
+            expect(onValid).toHaveBeenCalledTimes(1);
+        });
+        expect(screen.queryByText('Este campo es obligatorio')).not.toBeInTheDocument();
+    });
+});

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

@@ -170,13 +170,8 @@ function CustomPickerField({ error, required, helperText, size = 'small', labelM
 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, label: displayLabel, disabled: disabled, readOnly: readOnly, defaultValue: required ? new Date() : undefined, showDaysOutsideCurrentMonth: true, slotProps: {
+        return (_jsx(StyledDateTimePicker, { ampm: true, size: size, reduceAnimations: true, ...others, label: label, disabled: disabled, readOnly: readOnly, showDaysOutsideCurrentMonth: true, slotProps: {
                 actionBar: {
                     actions: ['clear', 'accept'],
                 },
@@ -236,7 +231,7 @@ orientation: _orientation, ...others }) {
             } }));
     }
     else {
-        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: {
+        return (_jsx(StyledDatePicker, { ...others, label: label, size: size, reduceAnimations: true, readOnly: readOnly, disabled: disabled, showDaysOutsideCurrentMonth: true, views: ['year', 'month', 'day'], slotProps: {
                 actionBar: {
                     actions: ['clear', 'accept'],
                 },

package/dist/Shared/ErkDatePicker/ErkDatePicker.required.test.d.ts

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

package/dist/Shared/ErkDatePicker/ErkDatePicker.required.test.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import '@testing-library/jest-dom';
+import MaterialProviders from '../../Utils/MaterialProviders';
+import InternalFormStyle from '../../constants/InternalFormStyle';
+import ErkDatePicker from './ErkDatePicker';
+/**
+ * Guards the MUI X v9 regression fix: a `required` date picker must never inject a
+ * default value (today's date) into the field. Doing so silently satisfies the
+ * required constraint, so an untouched "required" date behaves as if it were filled.
+ */
+describe('ErkDatePicker required behaviour', () => {
+    it('does not pre-fill today into a required field (no value provided)', () => {
+        render(_jsx(MaterialProviders, { formStyle: InternalFormStyle, children: _jsx(ErkDatePicker, { required: true, label: "Fecha", onChange: vi.fn() }) }));
+        const input = document.querySelector('input');
+        expect(input?.value).toBe('');
+    });
+    it('does not pre-fill today into a required date-time field', () => {
+        render(_jsx(MaterialProviders, { formStyle: InternalFormStyle, children: _jsx(ErkDatePicker, { required: true, pickTime: true, label: "Fecha y hora", onChange: vi.fn() }) }));
+        const input = document.querySelector('input');
+        expect(input?.value).toBe('');
+    });
+    it('renders exactly one required asterisk (no duplicate from a manual marker)', () => {
+        render(_jsx(MaterialProviders, { formStyle: InternalFormStyle, children: _jsx(ErkDatePicker, { required: true, label: "Fecha", value: null, onChange: vi.fn() }) }));
+        const label = document.querySelector('label')?.textContent ?? '';
+        const asterisks = (label.match(/\*/g) ?? []).length;
+        expect(asterisks).toBe(1);
+    });
+});

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.50-test",
+  "version":"3.0.52-test",
   "scripts": {
     "watch": "tsgo --noEmit --watch --project tsconfig.app.json",
     "start": "vite",