@groupeactual/ui-kit 0.4.2 → 0.4.4

package/dist/cjs/components/Form/TextField/TextField.d.ts

@@ -11,6 +11,7 @@ interface Props {
     disabled?: boolean;
     isValid?: boolean;
     endAdornment?: ReactNode;
+    maxLength?: number;
 }
-declare const TextField: ({ name, value, error, onBlur, onChange, label, disabled, endAdornment, isValid, placeholder, ...props }: Omit<TextFieldProps, 'error'> & Props) => JSX.Element;
+declare const TextField: ({ name, value, error, onBlur, onChange, label, disabled, endAdornment, isValid, placeholder, maxLength, ...props }: Omit<TextFieldProps, 'error'> & Props) => JSX.Element;
 export default TextField;

package/dist/cjs/index.js

@@ -50472,21 +50472,22 @@ var ActButton = styled$1(Button$1)(function (_a) {
 });
 
 var TextField = function (_a) {
-    var name = _a.name, value = _a.value, error = _a.error, onBlur = _a.onBlur, onChange = _a.onChange, label = _a.label, disabled = _a.disabled, endAdornment = _a.endAdornment; _a.isValid; var _b = _a.placeholder, placeholder = _b === void 0 ? '' : _b, props = __rest(_a, ["name", "value", "error", "onBlur", "onChange", "label", "disabled", "endAdornment", "isValid", "placeholder"]);
+    var name = _a.name, value = _a.value, error = _a.error, onBlur = _a.onBlur, onChange = _a.onChange, label = _a.label, disabled = _a.disabled, endAdornment = _a.endAdornment; _a.isValid; var _b = _a.placeholder, placeholder = _b === void 0 ? '' : _b, maxLength = _a.maxLength, props = __rest(_a, ["name", "value", "error", "onBlur", "onChange", "label", "disabled", "endAdornment", "isValid", "placeholder", "maxLength"]);
     var _c = React.useState(value), internalValue = _c[0], setInternalValue = _c[1];
     React.useEffect(function () {
         if (value !== internalValue) {
             setInternalValue(value);
         }
     }, [value]);
-    return (jsxRuntime.jsx(MuiTextField, __assign$1({ variant: "outlined", name: name, label: label, value: internalValue, placeholder: placeholder, InputLabelProps: { shrink: true }, onClick: function (e) { return e.stopPropagation(); }, InputProps: {
-            endAdornment: endAdornment
-        }, onChange: function (e) {
+    return (jsxRuntime.jsx(MuiTextField, __assign$1({ variant: "outlined", name: name, label: label, value: internalValue, placeholder: placeholder, FormHelperTextProps: { component: 'div' }, InputLabelProps: { shrink: true }, onClick: function (e) { return e.stopPropagation(); }, onChange: function (e) {
             setInternalValue(e.currentTarget.value);
             onChange(e);
         }, onBlur: function (e) {
             onBlur(e);
-        }, error: !!error, helperText: error !== null && error !== void 0 ? error : '', disabled: disabled }, props)));
+        }, error: !!error, disabled: disabled, InputProps: { endAdornment: endAdornment }, inputProps: { maxLength: maxLength } }, props, { helperText: jsxRuntime.jsxs("div", __assign$1({ style: { display: 'table', width: '100%' } }, { children: [(error || props.helperText) && (jsxRuntime.jsx("div", __assign$1({ style: {
+                        display: maxLength ? 'table-cell' : '',
+                        float: 'left'
+                    } }, { children: error || props.helperText }))), maxLength && (jsxRuntime.jsxs("div", __assign$1({ style: { display: 'table-cell', float: 'right' } }, { children: [internalValue.length, "/", maxLength, " caract."] })))] })) })));
 };
 
 var Checkbox = function (_a) {
@@ -50962,6 +50963,9 @@ var useMaterialThemeCss = function (muiTokens) {
                         root: {
                             fontWeight: 400,
                             fontSize: '11px',
+                            marginLeft: '8px',
+                            marginRight: '8px',
+                            marginTop: '5px',
                             lineHeight: '12px',
                             color: muiTokens.palette.greyDark,
                             '&.Mui-error': {
@@ -50971,22 +50975,29 @@ var useMaterialThemeCss = function (muiTokens) {
                     }
                 },
                 MuiOutlinedInput: {
+                    defaultProps: {
+                        notched: true
+                    },
                     styleOverrides: {
                         input: {
                             fontSize: '14px',
                             lineHeight: '18px',
                             fontWeight: 400,
+                            padding: '12px 14px',
+                            height: '18px',
                             color: muiTokens.palette.greyXDark,
                             '&::placeholder': {
-                                color: muiTokens.palette.greyDark,
+                                color: "".concat(muiTokens.palette.greyDark, " !important"),
+                                opacity: 1 + ' !important',
                                 fontWeight: 400,
                                 lineHeight: '18px',
                                 fontSize: '14px'
                             },
                             '&.Mui-disabled': {
                                 backgroundColor: muiTokens.palette.greyXLight,
-                                color: muiTokens.palette.greyLightDefaultborder,
-                                borderColor: muiTokens.palette.greyLightDefaultborder
+                                color: muiTokens.palette.greyDark,
+                                borderColor: muiTokens.palette.greyLightDefaultborder,
+                                WebkitTextFillColor: muiTokens.palette.greyDark
                             }
                         },
                         root: {
@@ -51012,9 +51023,11 @@ var useMaterialThemeCss = function (muiTokens) {
                 MuiInputLabel: {
                     styleOverrides: {
                         root: {
-                            fontSize: '17.33px',
+                            fontSize: '16px',
                             lineHeight: '16px',
+                            height: '16px',
                             fontWeight: 500,
+                            transform: 'translate(14px, -7px) scale(0.75)',
                             color: muiTokens.palette.greyXDark,
                             '&.Mui-disabled': {
                                 color: muiTokens.palette.greyXDark