@arquimedes.co/eureka-forms 3.0.6-refactor → 3.0.7-refactor

package/dist/Shared/ErkPhoneInput/EkrPhoneInput.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { TextFieldProps as MuiTextFieldProps } from '@mui/material';
-interface ErkPhoneInputProps {
+import { ErkTextFieldProps } from '../ErkTextField/ErkTextField';
+export interface ErkPhoneInputProps extends Omit<ErkTextFieldProps, 'onChange' | 'ref'> {
     /** The value of the phoneinput */
     value?: string;
     onChange: (value: string) => void;

package/dist/Shared/ErkPhoneInput/EkrPhoneInput.js

@@ -9,7 +9,7 @@ import { MenuItem } from '@mui/material';
 import { StyledTextField } from '../ErkTextField/ErkTextField';
 import { useAppSelector } from '../../hooks';
 isoCountries.registerLocale(es);
-const StyledSelect = styled(Select)(({ theme }) => ({
+const StyledSelect = styled(Select)(() => ({
     padding: 0,
     input: {
         padding: 0,
@@ -18,7 +18,7 @@ const StyledSelect = styled(Select)(({ theme }) => ({
         paddingBottom: 0,
         borderBottom: 'none',
     },
-    backgroundColor: theme.palette.stepBackgroundColor.default,
+    backgroundColor: 'transparent',
     '& input': {
         padding: 0,
         margin: 0,
@@ -30,7 +30,7 @@ const StyledSelect = styled(Select)(({ theme }) => ({
         borderBottom: 'none',
     },
 }));
-function CustomPhoneInput({ value, onChange, inputRef, readOnly = false, disabled = false, ...others }) {
+function CustomPhoneInput({ value, onChange, inputRef, size = 'small', readOnly = false, disabled = false, ...others }) {
     const defaultCountry = useAppSelector((state) => state.global.countryCode);
     const { inputValue, handlePhoneValueChange, inputRef: phoneRef, country, setCountry, } = usePhoneInput({
         value: '+' + value,
@@ -49,7 +49,7 @@ function CustomPhoneInput({ value, onChange, inputRef, readOnly = false, disable
         };
     })
         .sort((a, b) => a.name.localeCompare(b.name)), []);
-    return (_jsx("div", { style: { position: 'relative', width: '100%', maxWidth: '100%' }, children: _jsx(StyledTextField, { ...others, value: inputValue, readOnly: readOnly, disabled: disabled, fullWidth: true, variant: "outlined", onChange: handlePhoneValueChange, type: "tel", padding: "6px 12px 6px 6px", autoComplete: "tel", inputRef: phoneRef, onPaste: (e) => {
+    return (_jsx("div", { style: { position: 'relative', width: '100%', maxWidth: '100%' }, children: _jsx(StyledTextField, { ...others, value: inputValue, readOnly: readOnly, disabled: disabled, fullWidth: true, size: size, variant: "outlined", onChange: handlePhoneValueChange, type: "tel", padding: "6px 12px 6px 6px", autoComplete: "tel", inputRef: phoneRef, onPaste: (e) => {
                 const value = e.clipboardData.getData('Text');
                 if (!value.startsWith('+')) {
                     const phone = parse('+' + value);
@@ -62,8 +62,9 @@ function CustomPhoneInput({ value, onChange, inputRef, readOnly = false, disable
                 }
             }, slotProps: {
                 input: {
+                    readOnly,
                     disabled: readOnly || disabled,
-                    startAdornment: (_jsx(InputAdornment, { position: "start", children: _jsx(StyledSelect, { size: "small", variant: "standard", value: country.iso2, inputProps: { disabled: readOnly || disabled }, onChange: (e) => setCountry(e.target.value), renderValue: (value) => (_jsx(FlagImage, { iso2: value, style: { display: 'flex' }, width: 20 })), children: countries.map(({ country, name }) => {
+                    startAdornment: (_jsx(InputAdornment, { position: "start", children: _jsx(StyledSelect, { size: size, variant: "standard", value: country.iso2, inputProps: { readOnly, disabled: readOnly || disabled }, onChange: (e) => setCountry(e.target.value), renderValue: (value) => (_jsx(FlagImage, { iso2: value, style: { display: 'flex' }, width: 20 })), children: countries.map(({ country, name }) => {
                                 return (_jsxs(MenuItem, { value: country.iso2, children: [_jsx(FlagImage, { iso2: country.iso2, size: 20 }), _jsx("span", { style: {
                                                 marginLeft: '8px',
                                                 marginRight: '8px',

package/dist/Shared/ErkSelect/ErkSelect.d.ts

@@ -4,7 +4,7 @@ export interface SelectorStyleProps {
     /** If input is readOnly */
     readOnly?: boolean;
 }
-export declare const StyledSelect: import("@emotion/styled").StyledComponent<MuiSelectProps<unknown> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const StyledSelect: import("@emotion/styled").StyledComponent<(import("@mui/material").FilledSelectProps & import("@mui/material").BaseSelectProps<unknown> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>) | (import("@mui/material").StandardSelectProps & import("@mui/material").BaseSelectProps<unknown> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>) | (import("@mui/material").OutlinedSelectProps & import("@mui/material").BaseSelectProps<unknown> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>), {}, {}>;
 export declare const StyledInputLabel: import("@emotion/styled").StyledComponent<import("@mui/material").InputLabelOwnProps & Pick<import("@mui/material").FormLabelOwnProps, "color" | "filled"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & {
     ref?: ((instance: HTMLLabelElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLLabelElement> | null | undefined;
 }, "required" | "size" | "color" | "children" | "className" | "style" | "classes" | "disabled" | "error" | "margin" | "sx" | "filled" | "variant" | "focused" | "disableAnimation" | "shrink"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {

package/dist/Shared/ErkSelect/ErkSelect.js

@@ -1,20 +1,21 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useState } from 'react';
 import { FormControl, FormHelperText as MuiFormHelperText, InputLabel as MuiInputLabel, Select as MuiSelect, styled, InputAdornment, } from '@mui/material';
-export const StyledSelect = styled(MuiSelect)(({ theme, ...props }) => ({
+export const StyledSelect = styled(MuiSelect)(({ theme, size, ...props }) => ({
     borderRadius: 10,
     opacity: props.disabled ? 0.5 : 1,
     backgroundColor: theme.palette.background.default,
+    minHeight: size === 'small' ? 31 : size === 'medium' ? 40 : undefined,
     '&.Erk-MuiInputBase-adornedEnd': {
         paddingRight: 7,
     },
     '& .Erk-MuiSelect-select': {
         fontSize: '1rem',
         padding: '6px 12px',
-        lineHeight: '1.188em',
-        height: '1.188em',
+        lineHeight: size === 'small' ? '1.188em' : size === 'medium' ? '1.75em' : undefined,
+        height: size === 'small' ? '1.188em' : size === 'medium' ? '1.75em' : undefined,
         '&.Erk-MuiInputBase-inputAdornedEnd': {
-            paddingRight: 0,
+            paddingRight: '0px !important',
         },
         whiteSpace: 'nowrap',
         overflow: 'hidden',
@@ -39,18 +40,20 @@ export const StyledSelect = styled(MuiSelect)(({ theme, ...props }) => ({
     '& .Erk-MuiInputAdornment-root': {
         marginLeft: 0,
         color: theme.palette.text.primary + 'a0',
+        fill: theme.palette.text.primary + 'a0',
+        cursor: props.disabled || props.readOnly ? 'default' : 'pointer',
     },
     '& .Erk-MuiSelect-iconOpen': {
         transform: props.IconComponent ? 'none' : undefined,
     },
 }));
-export const StyledInputLabel = styled(MuiInputLabel)(({ theme, ...props }) => ({
+export const StyledInputLabel = styled(MuiInputLabel)(({ theme, size = 'small', ...props }) => ({
     color: theme.palette.text.primary + '8a',
     '&.Erk-MuiInputLabel-root.Mui-focused': {
         color: theme.palette.primary.main,
     },
     '&.Erk-MuiFormLabel-root:not(.Erk-MuiInputLabel-shrink)': {
-        transform: 'translate(12px, 5px) scale(1)',
+        transform: `translate(12px, ${size === 'small' ? 5 : 9}px) scale(1)`,
         maxWidth: 'calc(100% - 40px)',
     },
     '&.Mui-error': {

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

@@ -25,4 +25,4 @@ export interface ErkSmartSelectProps extends Omit<MuiSelectProps, 'ref' | 'onInv
     readOnly?: boolean;
     onFocus?: React.FocusEventHandler;
 }
-export default function ErkSmartSelect({ options, value, onChange, label, getValueString, loading, getOptionSelected, IconComponent, disabled, readOnly, searchable, inputRef, ...others }: ErkSmartSelectProps): JSX.Element;
+export default function ErkSmartSelect({ options, value, onChange, label, getValueString, loading, getOptionSelected, IconComponent, size, disabled, readOnly, searchable, inputRef, ...others }: ErkSmartSelectProps): JSX.Element;

package/dist/Shared/ErkSmartSelect/ErkSmartSelect.js

@@ -23,9 +23,9 @@ const StyledAutoComplete = styled(MuiAutocomplete)(({ theme, ...props }) => ({
         transform: props.popupIcon ? 'none' : undefined,
     },
 }));
-export default function ErkSmartSelect({ options, value = '', onChange, label, getValueString = (value) => value?.value, loading = false, getOptionSelected, IconComponent, disabled = false, readOnly = false, searchable = false, inputRef, ...others }) {
+export default function ErkSmartSelect({ options, value = '', onChange, label, getValueString = (value) => value?.value, loading = false, getOptionSelected, IconComponent, size = 'small', disabled = false, readOnly = false, searchable = false, inputRef, ...others }) {
     if (searchable) {
-        return (_jsx(StyledAutoComplete, { fullWidth: true, openOnFocus: true, loading: loading, options: options ?? [], loadingText: "Cargando...", onFocus: others.onFocus, "data-testid": "smart-select", noOptionsText: "No hay opciones", disabled: readOnly || disabled, value: !loading && value ? value : null, onChange: (_event, newValue) => onChange?.(newValue), popupIcon: loading ? _jsx(CircularProgress, { size: 22 }) : IconComponent ? _jsx(IconComponent, {}) : undefined, filterOptions: (options, params) => {
+        return (_jsx(StyledAutoComplete, { fullWidth: true, openOnFocus: true, size: size, loading: loading, options: options ?? [], loadingText: "Cargando...", onFocus: others.onFocus, "data-testid": "smart-select", noOptionsText: "No hay opciones", disabled: readOnly || disabled, value: !loading && value ? value : null, onChange: (_event, newValue) => onChange?.(newValue), popupIcon: loading ? _jsx(CircularProgress, { size: 22 }) : IconComponent ? _jsx(IconComponent, {}) : undefined, filterOptions: (options, params) => {
                 if (value && value.label === params?.inputValue) {
                     return options;
                 }
@@ -48,7 +48,7 @@ export default function ErkSmartSelect({ options, value = '', onChange, label, g
                 popper: {
                     sx: { zIndex: 1305 },
                 },
-            }, renderInput: (params) => (_jsx(StyledTextField, { ...params, label: label, name: others.name, readOnly: readOnly, disabled: disabled, inputRef: inputRef, error: others.error, onBlur: others.onBlur, required: others.required, helperText: others.helperText })) }));
+            }, renderInput: (params) => (_jsx(StyledTextField, { ...params, size: size, label: label, name: others.name, readOnly: readOnly, disabled: disabled, inputRef: inputRef, error: others.error, onBlur: others.onBlur, required: others.required, helperText: others.helperText })) }));
     }
     else {
         return (_jsxs(ErkSelect, { ...others, inputRef: inputRef, onChange: (value) => onChange?.(options?.find((option) => getValueString(option) === value)), value: loading ? '' : getValueString(value), label: label, IconComponent: loading ? () => _jsx(CircularProgress, { size: 22 }) : IconComponent, children: [_jsx(MenuItem, { value: '', "data-testid": 'smart-select-empty', style: { whiteSpace: 'normal' }, children: _jsx("em", { children: options ? 'Sin Seleccionar' : 'Cargando...' }) }, 'EMPTY'), options?.map((option) => (_jsx(MenuItem, { value: getValueString(option), style: { whiteSpace: 'normal' }, "data-testid": 'smart-select-' + getValueString(option), children: option.label }, getValueString(option)))), options === undefined && value && !loading && (_jsx(MenuItem, { value: getValueString(value), style: { whiteSpace: 'normal' }, children: value.label ?? '' }, getValueString(value)))] }));

package/dist/Shared/ErkTextField/ErkTextField.js

@@ -1,10 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { styled, TextField as MuiTextField, useTheme, } from '@mui/material';
 import React, { useCallback, useMemo } from 'react';
-export const StyledTextField = styled(MuiTextField)(({ theme, label, size, fontSize = '1rem', padding = '6px 12px', ...props }) => ({
+export const StyledTextField = styled(MuiTextField)(({ theme, size, fontSize = '1rem', padding = '6px 12px', ...props }) => ({
     borderRadius: 10,
     opacity: props.disabled ? 0.5 : 1,
-    marginTop: label ? 5 : undefined,
     minHeight: size === 'small' ? 31 : size === 'medium' ? 40 : undefined,
     '& input, textarea': {
         fontSize,

package/dist/Utils/MaterialProviders.d.ts

@@ -5,11 +5,13 @@ declare module '@mui/material/styles' {
     interface Palette {
         outline: Palette['primary'];
         helperText: Palette['text'];
+        greyBtn: Palette['primary'];
         stepBackgroundColor: Palette['background'];
     }
     interface PaletteOptions {
         outline: PaletteOptions['primary'];
         helperText: PaletteOptions['text'];
+        greyBtn: PaletteOptions['primary'];
         stepBackgroundColor: PaletteOptions['background'];
     }
 }

package/dist/Utils/MaterialProviders.js

@@ -25,6 +25,10 @@ function MaterialProviders({ children, formStyle }) {
                 outline: {
                     main: formStyle.outlineColor,
                 },
+                greyBtn: {
+                    main: '#d6d6d6',
+                    contrastText: '#293241',
+                },
                 helperText: {
                     primary: formStyle.descriptionTextColor,
                 },

package/package.json

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