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

package/dist/Shared/ErkNumberField/ErkNumberField.js

@@ -1,170 +0,0 @@
-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;