@arquimedes.co/eureka-forms 3.0.50-test → 3.0.52-new-steps

package/dist/Shared/ErkNumberField/ErkNumberField.js

@@ -0,0 +1,170 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { NumberField as BaseNumberField } from '@base-ui/react/number-field';
+import { FormControl, FormHelperText, InputAdornment, InputLabel, OutlinedInput, styled, useTheme, } from '@mui/material';
+import { alpha } from '@mui/material/styles';
+import AddIcon from '../../Icons/AddIcon';
+import RemoveIcon from '../../Icons/RemoveIcon';
+// ---------------------------------------------------------------------------
+// Styled FormControl shell — same conventions as ErkTextField / ErkSelect
+// ---------------------------------------------------------------------------
+const StyledFormControl = styled(FormControl)(({ theme, size }) => ({
+    '& .Erk-MuiOutlinedInput-root': {
+        borderRadius: 10,
+        backgroundColor: theme.palette.stepBackgroundColor.default,
+        minHeight: size === 'small' ? 31 : size === 'medium' ? 40 : undefined,
+        '&.Mui-focused .Erk-MuiOutlinedInput-notchedOutline': {
+            borderColor: theme.palette.primary.main,
+            borderWidth: 2,
+        },
+        // ErkNF-readOnly is set manually via className — Mui-readOnly is unreliable here
+        '&:hover:not(.ErkNF-readOnly) .Erk-MuiOutlinedInput-notchedOutline': {
+            borderColor: theme.palette.primary.main,
+        },
+        '&.ErkNF-readOnly.Mui-focused .Erk-MuiOutlinedInput-notchedOutline': {
+            borderColor: theme.palette.outline.main,
+            borderWidth: 1,
+        },
+        '&.ErkNF-readOnly': {
+            cursor: 'default',
+            '& input': { cursor: 'default' },
+        },
+        '& .Erk-MuiOutlinedInput-notchedOutline': {
+            borderRadius: 10,
+            borderColor: theme.palette.outline.main,
+            '& legend': { fontSize: '0.75rem' },
+        },
+    },
+    '& .Erk-MuiOutlinedInput-root.Mui-error .Erk-MuiOutlinedInput-notchedOutline': {
+        borderColor: theme.palette.error.main,
+    },
+    '& .Erk-MuiOutlinedInput-root.Mui-error.Mui-focused .Erk-MuiOutlinedInput-notchedOutline': {
+        borderWidth: 2,
+    },
+    '& .Erk-MuiFormLabel-root': {
+        color: alpha(theme.palette.text.primary, 0.54),
+    },
+    '& label.Mui-focused': { color: theme.palette.primary.main },
+    '& label.Mui-error': { color: theme.palette.error.main },
+    '& .Erk-MuiFormLabel-root:not(.Erk-MuiInputLabel-shrink)': {
+        fontSize: '1rem',
+        transform: `translate(12px, ${size === 'small' ? 5 : 9}px) scale(1)`,
+    },
+    '& .Erk-MuiFormHelperText-root': {
+        color: theme.palette.helperText.primary,
+        minHeight: 20,
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+    },
+    '& .Erk-MuiFormHelperText-root.Mui-error': { color: theme.palette.error.main },
+    '& input': {
+        fontSize: '1rem',
+        padding: '6px 12px',
+        lineHeight: size === 'small' ? '1.188em' : '1.75em',
+        height: size === 'small' ? '1.188em' : '1.75em',
+        color: theme.palette.text.primary,
+        MozAppearance: 'textfield',
+        '&::-webkit-outer-spin-button, &::-webkit-inner-spin-button': {
+            WebkitAppearance: 'none',
+            margin: 0,
+        },
+    },
+}));
+// ---------------------------------------------------------------------------
+// SSR label-shrink hint — muiName='Input' lets FormControl know an input
+// exists so it can compute the initial shrink state before hydration.
+// ---------------------------------------------------------------------------
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function SSRInitialFilled(_props) {
+    return null;
+}
+SSRInitialFilled.muiName = 'Input';
+function SpinnerBtn({ children, style, ...rest }) {
+    const theme = useTheme();
+    const [hovered, setHovered] = React.useState(false);
+    const [active, setActive] = React.useState(false);
+    return (_jsx("button", { type: "button", tabIndex: -1, ...rest, onMouseEnter: (e) => {
+            setHovered(true);
+            rest.onMouseEnter?.(e);
+        }, onMouseLeave: (e) => {
+            setHovered(false);
+            setActive(false);
+            rest.onMouseLeave?.(e);
+        }, onMouseDown: (e) => {
+            setActive(true);
+            rest.onMouseDown?.(e);
+        }, onMouseUp: (e) => {
+            setActive(false);
+            rest.onMouseUp?.(e);
+        }, style: {
+            display: 'inline-flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            width: 22,
+            height: 22,
+            minWidth: 22,
+            padding: 0,
+            border: 'none',
+            borderRadius: 4,
+            background: active
+                ? alpha(theme.palette.primary.main, 0.16)
+                : hovered
+                    ? alpha(theme.palette.primary.main, 0.08)
+                    : 'transparent',
+            cursor: rest.disabled ? 'default' : 'pointer',
+            color: hovered && !rest.disabled ? theme.palette.primary.main : alpha(theme.palette.text.primary, 0.6),
+            flexShrink: 0,
+            transition: 'color 0.15s, background-color 0.15s',
+            opacity: rest.disabled ? 0.35 : 1,
+            pointerEvents: rest.disabled ? 'none' : undefined,
+            ...style,
+        }, children: children }));
+}
+// ---------------------------------------------------------------------------
+// Implementation
+// ---------------------------------------------------------------------------
+function CustomErkNumberField({ value, onChange, label, min, max, step = 1, decimals, required, error, errorBorder, helperText, disabled, readOnly, placeholder, size = 'small', fullWidth = true, suffix, spinner = true, inputRef, }) {
+    const theme = useTheme();
+    const id = React.useId();
+    // Rounds to max decimals on spinner click / arrow key / wheel scrub.
+    // Typing restriction is handled separately inside slotProps.input.onChange.
+    const handleValueChange = (num) => {
+        if (num === null || decimals === undefined) {
+            onChange?.(num);
+            return;
+        }
+        const factor = Math.pow(10, decimals);
+        onChange?.(Math.round(num * factor) / factor);
+    };
+    return (_jsxs(BaseNumberField.Root, { value: value ?? null, onValueChange: handleValueChange, min: min, max: max, step: step, format: decimals !== undefined ? { minimumFractionDigits: 0, maximumFractionDigits: decimals } : undefined, disabled: disabled, readOnly: readOnly, ref: inputRef, render: (rootProps, rootState) => (_jsx(StyledFormControl, { ref: rootProps.ref, size: size, disabled: rootState.disabled, required: required, error: error && !!errorBorder, variant: "outlined", fullWidth: fullWidth, children: rootProps.children })), children: [_jsx(SSRInitialFilled, { value: value ?? undefined }), label && (_jsx(InputLabel, { htmlFor: id, size: size === 'small' ? 'small' : undefined, disabled: disabled, children: label })), _jsx(BaseNumberField.Input, { id: id, render: (inputProps, inputState) => {
+                    return (_jsx(OutlinedInput, { label: label, className: readOnly ? 'ErkNF-readOnly' : undefined, inputRef: inputProps.ref, value: inputState.inputValue, onBlur: inputProps.onBlur, onChange: inputProps.onChange, onKeyUp: inputProps.onKeyUp, onKeyDown: inputProps.onKeyDown, onFocus: inputProps.onFocus, placeholder: placeholder, slotProps: {
+                            input: {
+                                ...inputProps, // Base UI handlers + ref + aria attrs
+                            },
+                        }, endAdornment: suffix || spinner ? (_jsxs(InputAdornment, { position: "end", sx: { gap: '2px', mr: '2px', alignItems: 'center' }, children: [suffix && (_jsx("span", { style: {
+                                        fontSize: 13,
+                                        fontWeight: 600,
+                                        color: theme.palette.primary.main,
+                                        userSelect: 'none',
+                                        whiteSpace: 'nowrap',
+                                        marginRight: spinner ? 2 : 4,
+                                    }, children: suffix })), spinner && (_jsxs(_Fragment, { children: [_jsx(BaseNumberField.Decrement, { render: (decProps) => {
+                                                const { disabled: baseDisabled, ...restDec } = decProps;
+                                                return (_jsx(SpinnerBtn, { ...restDec, disabled: !!readOnly || !!baseDisabled, children: _jsx(RemoveIcon, { size: 14 }) }));
+                                            } }), _jsx(BaseNumberField.Increment, { render: (incProps) => {
+                                                const { disabled: baseDisabled, ...restInc } = incProps;
+                                                return (_jsx(SpinnerBtn, { ...restInc, disabled: !!readOnly || !!baseDisabled, children: _jsx(AddIcon, { size: 14 }) }));
+                                            } })] }))] })) : undefined, sx: { pr: suffix || spinner ? 0 : undefined } }));
+                } }), helperText && _jsx(FormHelperText, { error: error && !!errorBorder, children: helperText })] }));
+}
+/**
+ * Pure number input built on Base UI NumberField + MUI styling.
+ * No form-step system dependency.
+ * Class wrapper for react-hook-form ref compatibility.
+ */
+class ErkNumberField extends React.Component {
+    render() {
+        return _jsx(CustomErkNumberField, { ...this.props });
+    }
+}
+export default ErkNumberField;

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/dist/constants/FormStepTypes.d.ts

@@ -21,7 +21,11 @@ export declare enum FormStepTypes {
     COLLAPSIBLE = "COLLAPSIBLE",
     MAPPER = "MAPPER",
     ENTITYVALUEPICKER = "ENTITYVALUEPICKER",
-    API_SELECTOR = "API_SELECTOR"
+    API_SELECTOR = "API_SELECTOR",
+    LOCATION = "LOCATION",
+    NUMBER = "NUMBER",
+    CALENDAR = "CALENDAR",
+    BOOKING = "BOOKING"
 }
 export declare enum OptionTypes {
     DEFAULT = "DEFAULT",

package/dist/constants/FormStepTypes.js

@@ -25,6 +25,10 @@ export var FormStepTypes;
     FormStepTypes["MAPPER"] = "MAPPER";
     FormStepTypes["ENTITYVALUEPICKER"] = "ENTITYVALUEPICKER";
     FormStepTypes["API_SELECTOR"] = "API_SELECTOR";
+    FormStepTypes["LOCATION"] = "LOCATION";
+    FormStepTypes["NUMBER"] = "NUMBER";
+    FormStepTypes["CALENDAR"] = "CALENDAR";
+    FormStepTypes["BOOKING"] = "BOOKING";
 })(FormStepTypes || (FormStepTypes = {}));
 export var OptionTypes;
 (function (OptionTypes) {

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-new-steps",
   "scripts": {
     "watch": "tsgo --noEmit --watch --project tsconfig.app.json",
     "start": "vite",
@@ -16,6 +16,7 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
+    "@base-ui/react": "^1.6.0",
     "@reduxjs/toolkit": "2.11.2",
     "axios": "1.16.0",
     "date-fns": "4.1.0",