@groupeactual/ui-kit 1.0.10 → 1.0.12

package/dist/es/types/components/Form/Select/Select.d.ts

@@ -8,7 +8,7 @@ interface Props<T> extends Omit<SelectProps<T>, 'value' | 'onChange' | 'defaultV
     helperText?: string;
     color?: 'success';
     defaultValue?: T | undefined;
-    width?: number;
+    width?: number | string;
     error?: string;
 }
 declare const Select: {

package/dist/es/types/components/Form/TextField/TextField.d.ts

@@ -5,15 +5,16 @@ interface Props extends Omit<TextFieldProps, 'error'> {
     onBlur?: FocusEventHandler<unknown>;
     onChange?: StandardInputProps['onChange'];
     label: string;
-    value: string;
-    name: string;
+    value?: string | unknown;
+    name?: string;
     placeholder?: string;
     disabled?: boolean;
     endAdornment?: ReactNode;
     maxLength?: number;
+    width?: number | string;
 }
 declare const TextField: {
-    ({ name, value, error, onBlur, onChange, label, disabled, endAdornment, placeholder, maxLength, ...props }: Props): React.JSX.Element;
+    ({ name, value, error, onBlur, onChange, label, disabled, width, endAdornment, placeholder, maxLength, ...props }: Props): React.JSX.Element;
     displayName: string;
 };
 export default TextField;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@groupeactual/ui-kit",
-  "version": "1.0.10",
+  "version": "1.0.12",
   "type": "module",
   "description": "A simple template for a custom React component library",
   "devDependencies": {
@@ -36,7 +36,7 @@
     "dist",
     "src"
   ],
-  "types": "dist/index.d.ts",
+  "types": "dist/es/types/index.d.ts",
   "dependencies": {
     "@emotion/is-prop-valid": "^1.2.1",
     "@emotion/react": "^11.11.1",
@@ -51,7 +51,7 @@
     "@mui/system": "^5.13.6",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "@groupeactual/design-tokens": "1.0.10"
+    "@groupeactual/design-tokens": "1.0.12"
   },
   "peerDependencies": {
     "@fortawesome/fontawesome-common-types": "^6.3.0",

package/src/components/Form/AutoCompleteMulti/AutoCompleteMulti.tsx

@@ -36,7 +36,7 @@ interface AutocompleteMultipleSelectProps<T>
   onChange: (value: T[]) => void;
   defaultValue?: T[];
   color?: 'success';
-  width?: number;
+  width?: number | string;
   error?: string;
 }
 
@@ -49,7 +49,7 @@ const AutocompleteMultipleSelect = <T,>({
   getKeyValue,
   onChange,
   defaultValue = [],
-  width = 256,
+  width = '100%',
   color,
   helperText,
   error,
@@ -61,6 +61,10 @@ const AutocompleteMultipleSelect = <T,>({
     [theme]
   );
 
+  if (label && placeholder === '' && label !== placeholder) {
+    placeholder = label;
+  }
+
   const [value, setValue] = useState<T[]>(defaultValue ?? []);
   const [inputValue, setInputValue] = useState('');
 

package/src/components/Form/AutoCompleteSingle/AutoCompleteSingle.tsx

@@ -32,7 +32,7 @@ interface Props<T>
   getOptionLabel: (option: T) => string;
   onChange: (value: T | null) => void;
   defaultValue?: T | null;
-  width?: number;
+  width?: number | string;
   error?: string;
 }
 
@@ -44,7 +44,7 @@ const AutoCompleteSingle = <T extends {}>({
   getOptionLabel,
   onChange,
   defaultValue = null,
-  width = 200,
+  width = '100%',
   color,
   helperText,
   error,
@@ -56,6 +56,10 @@ const AutoCompleteSingle = <T extends {}>({
     [theme]
   );
 
+  if (label && placeholder === '' && label !== placeholder) {
+    placeholder = label;
+  }
+
   const [value, setValue] = useState<T | null>(defaultValue);
 
   const handleValueChange = (

package/src/components/Form/MultiSelect/MultiSelect.tsx

@@ -36,7 +36,7 @@ interface Props<T>
   getRenderValue: (option: T) => string;
   getKeyValue: (option: T) => string;
   defaultValue?: T[];
-  width?: number;
+  width?: number | string;
   error?: string;
 }
 
@@ -47,7 +47,7 @@ const MultiSelect = <T extends {}>({
   error,
   placeholder,
   helperText,
-  width = 200,
+  width = '100%',
   defaultValue = [],
   getRenderValue,
   getKeyValue,
@@ -61,6 +61,10 @@ const MultiSelect = <T extends {}>({
     [theme]
   );
 
+  if (label && placeholder === '' && label !== placeholder) {
+    placeholder = label;
+  }
+
   const [values, setValues] = useState(defaultValue);
 
   const handleChange = (event: SelectChangeEvent<typeof options>) => {
@@ -188,12 +192,7 @@ const MultiSelect = <T extends {}>({
             />
           )}
           MenuProps={{
-            disableAutoFocusItem: true,
-            PaperProps: {
-              style: {
-                width
-              }
-            }
+            disableAutoFocusItem: true
           }}
           {...props}
         >

package/src/components/Form/Select/Select.tsx

@@ -30,7 +30,7 @@ interface Props<T>
   helperText?: string;
   color?: 'success';
   defaultValue?: T | undefined;
-  width?: number;
+  width?: number | string;
   error?: string;
 }
 
@@ -45,7 +45,7 @@ const Select = <T extends {}>({
   getRenderValue,
   helperText,
   onBlur,
-  width = 200,
+  width = '100%',
   ...props
 }: Props<T>) => {
   const theme = useTheme();
@@ -54,6 +54,10 @@ const Select = <T extends {}>({
     [theme]
   );
 
+  if (label && placeholder === '' && label !== placeholder) {
+    placeholder = label;
+  }
+
   const [value, setValue] = useState(defaultValue);
 
   const handleChange = (event: SelectChangeEvent<T>) => {
@@ -136,12 +140,7 @@ const Select = <T extends {}>({
             />
           )}
           MenuProps={{
-            disableAutoFocusItem: true,
-            PaperProps: {
-              style: {
-                width
-              }
-            }
+            disableAutoFocusItem: true
           }}
           renderValue={(value) => getRenderValue(value)}
           {...props}

package/src/components/Form/TextField/TextField.tsx

@@ -23,12 +23,13 @@ interface Props extends Omit<TextFieldProps, 'error'> {
   onBlur?: FocusEventHandler<unknown>;
   onChange?: StandardInputProps['onChange'];
   label: string;
-  value: string;
-  name: string;
+  value?: string | unknown;
+  name?: string;
   placeholder?: string;
   disabled?: boolean;
   endAdornment?: ReactNode;
   maxLength?: number;
+  width?: number | string;
 }
 const TextField = ({
   name,
@@ -38,6 +39,7 @@ const TextField = ({
   onChange,
   label,
   disabled,
+  width = '100%',
   endAdornment,
   placeholder = '',
   maxLength,
@@ -64,6 +66,10 @@ const TextField = ({
     );
   }, [showPassword]);
 
+  if (label && placeholder === '' && label !== placeholder) {
+    placeholder = label;
+  }
+
   useEffect(() => {
     if (value !== internalValue) {
       setInternalValue(value);
@@ -100,6 +106,7 @@ const TextField = ({
       name={name}
       label={label}
       value={internalValue}
+      sx={{ width }}
       placeholder={label === placeholder ? '' : placeholder}
       FormHelperTextProps={{ component: 'div' } as any}
       InputLabelProps={{
@@ -144,7 +151,7 @@ const TextField = ({
           )}
           {maxLength && (
             <div style={{ display: 'table-cell', float: 'right' }}>
-              {internalValue.length}/{maxLength} caract.
+              {String(internalValue).length}/{maxLength} caract.
             </div>
           )}
         </div>

package/src/components/Tooltip/Tooltip.tsx

@@ -19,7 +19,7 @@ interface Props extends Omit<TooltipProps, 'icon' | 'children'> {
 const Tooltip = ({ title, children, ...props }: Props) => {
   const theme = useTheme();
   const StyledTooltip = useMemo(
-    () => styled(TooltipMui)(TooltipStyle(theme)),
+    () => styled(TooltipMui)(TooltipStyle()),
     [theme]
   );