@centreon/ui 23.10.34 → 23.10.35

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "23.10.34",
+  "version": "23.10.35",
   "description": "Centreon UI Components",
   "scripts": {
     "eslint": "eslint ./src --ext .js,.jsx,.ts,.tsx --max-warnings 0",

package/src/Form/Inputs/Text.tsx

@@ -12,6 +12,8 @@ import {
   type as variableType
 } from 'ramda';
 
+import { InputAdornment } from '@mui/material';
+
 import { TextField, useMemoComponent } from '../..';
 
 import PasswordEndAdornment from './PasswordEndAdornment';
@@ -64,16 +66,24 @@ const Text = ({
     ? path(fieldNamePath, errors)
     : undefined;
 
-  const passwordEndAdornment = useCallback(
-    (): JSX.Element | null =>
-      equals(type, InputType.Password) ? (
+  const EndAdornment = useCallback((): JSX.Element | null => {
+    if (equals(type, InputType.Password)) {
+      return (
         <PasswordEndAdornment
           changeVisibility={changeVisibility}
           isVisible={isVisible}
         />
-      ) : null,
-    [isVisible]
-  );
+      );
+    }
+
+    if (text?.endAdornment) {
+      return (
+        <InputAdornment position="end">{text?.endAdornment}</InputAdornment>
+      );
+    }
+
+    return null;
+  }, [isVisible]);
 
   const getInputType = (): string => {
     if (text?.type) {
@@ -97,13 +107,14 @@ const Text = ({
     Component: (
       <TextField
         fullWidth
-        EndAdornment={passwordEndAdornment}
+        EndAdornment={EndAdornment}
         ariaLabel={t(label) || ''}
         dataTestId={dataTestId || ''}
         disabled={disabled}
         error={error as string | undefined}
         label={t(label)}
         multiline={isMultiline}
+        placeholder={text?.placeholder}
         required={isRequired}
         rows={rows}
         type={getInputType()}

package/src/Form/Inputs/index.tsx

@@ -35,7 +35,6 @@ export const getInput = R.cond<
     R.equals(InputType.Radio) as (b: InputType) => boolean,
     R.always(RadioInput)
   ],
-  [R.equals(InputType.Text) as (b: InputType) => boolean, R.always(TextInput)],
   [
     R.equals(InputType.SingleAutocomplete) as (b: InputType) => boolean,
     R.always(Autocomplete)
@@ -44,10 +43,6 @@ export const getInput = R.cond<
     R.equals(InputType.MultiAutocomplete) as (b: InputType) => boolean,
     R.always(Autocomplete)
   ],
-  [
-    R.equals(InputType.Password) as (b: InputType) => boolean,
-    R.always(TextInput)
-  ],
   [
     R.equals(InputType.MultiConnectedAutocomplete) as (b: InputType) => boolean,
     R.always(ConnectedAutocomplete)
@@ -71,7 +66,8 @@ export const getInput = R.cond<
   [
     R.equals(InputType.CheckboxGroup) as (b: InputType) => boolean,
     R.always(CheckboxGroup)
-  ]
+  ],
+  [R.T, R.always(TextInput)]
 ]);
 
 interface StylesProps {

package/src/Form/Inputs/models.ts

@@ -87,7 +87,9 @@ export interface InputProps {
     getChecked?: (value) => boolean;
   };
   text?: {
+    endAdornment?: JSX.Element;
     multilineRows?: number;
+    placeholder?: string;
     type?: string;
   };
   type: InputType;

package/src/Form/storiesData.tsx

@@ -179,6 +179,10 @@ export const basicFormInputs: Array<InputProps> = [
     fieldName: 'email',
     group: 'First group',
     label: 'Email',
+    text: {
+      endAdornment: <MailIcon />,
+      placeholder: 'Your email here'
+    },
     type: InputType.Text
   },
   {

package/src/InputField/Text/index.tsx

@@ -166,7 +166,6 @@ const TextField = forwardRef(
                 },
                 className
               ),
-              disableUnderline: true,
               endAdornment: (
                 <OptionalLabelInputAdornment label={label} position="end">
                   {EndAdornment ? (