review chip input

src/front/Components/DesignSystem/AutocompleteMultiSelect/Chip/classes.module.scss

@@ -17,4 +17,10 @@
 		background-color: var(--input-chip-hovered-background);
 		border-color: var(--input-chip-hovered-border);
 	}
+
+	.label{
+		display: flex;
+		align-items: center;
+		gap: 4px;
+	}
 }

src/front/Components/DesignSystem/AutocompleteMultiSelect/Chip/index.tsx

@@ -5,22 +5,44 @@ import React from "react";
 import IconButton from "../../IconButton";
 import Typography, { ETypo, ETypoColor } from "../../Typography";
 import classes from "./classes.module.scss";
+import { IOption } from "../../Dropdown/DropdownMenu/DropdownOption";
 
 type IProps = {
-	text: string;
+	option: IOption;
 	className?: string;
 	onDelete?: () => void;
 };
 
 export default function Chip(props: IProps) {
-	const { className, text, onDelete } = props;
+	const { className, option, onDelete } = props;
 
 	return (
 		<div className={classNames(classes["root"], className)}>
 			<Typography typo={ETypo.TEXT_MD_SEMIBOLD} color={ETypoColor.INPUT_CHIP_CONTRAST}>
-				{text}
+				{getLabelContent(option)}
 			</Typography>
 			<IconButton icon={<XMarkIcon />} onClick={onDelete} />
 		</div>
 	);
 }
+
+function getLabelContent(option: IOption) {
+	if (typeof option.label === "string") {
+		return (
+			<Typography typo={ETypo.TEXT_MD_SEMIBOLD} color={ETypoColor.INPUT_CHIP_CONTRAST}>
+				{option.label}
+			</Typography>
+		);
+	}
+
+	return (
+		<span className={classes["label"]}>
+			<Typography typo={ETypo.TEXT_MD_LIGHT} color={ETypoColor.INPUT_CHIP_CONTRAST}>
+				{`${option.label.text} , `}
+			</Typography>
+			<Typography typo={ETypo.TEXT_MD_SEMIBOLD} color={ETypoColor.INPUT_CHIP_CONTRAST} type="span">
+				{option.label.subtext}
+			</Typography>
+		</span>
+	);
+}

src/front/Components/DesignSystem/AutocompleteMultiSelect/ChipContainer/classes.module.scss

@@ -2,7 +2,7 @@
 
 .root {
 	border-radius: var(--input-radius, 0px);
-	border: 1px solid var(--input-main-border-filled, #6d7e8a);
+	border: 1px solid var(--input-main-border-default, #6d7e8a);
 	background: var(--input-background, #fff);
 
 	svg {
@@ -10,21 +10,15 @@
 	}
 
 	&:hover {
-		border-radius: var(--input-radius, 0px);
 		border: 1px solid var(--input-main-border-hovered, #b4bec5);
-		background: var(--input-background, #fff);
 	}
 
 	&[data-has-value="true"] {
-		border-radius: var(--input-radius, 0px);
 		border: 1px solid var(--input-main-border-filled, #6d7e8a);
-		background: var(--input-background, #fff);
 	}
 
 	&[data-is-focused="true"] {
-		border-radius: var(--input-radius, 0px);
 		border: 1px solid var(--input-main-border-focused, #005bcb);
-		background: var(--input-background, #fff);
 	}
 
 	&[data-is-disabled="true"] {

src/front/Components/DesignSystem/AutocompleteMultiSelect/ChipContainer/index.tsx

@@ -1,6 +1,5 @@
 import React, { useCallback, useEffect } from "react";
 
-import { getLabel } from "../../Dropdown";
 import { IOption } from "../../Dropdown/DropdownMenu/DropdownOption";
 import Chip from "../Chip";
 import classes from "./classes.module.scss";
@@ -9,7 +8,7 @@ type IProps = {
 	selectedOptions: IOption[];
 	onSelectedOptionsChange: (options: IOption[]) => void;
 	onChange?: (input: string) => void;
-	value?: string;
+	searchValue?: string;
 	placeholder?: string;
 	disabled?: boolean;
 	onClear?: () => void;
@@ -21,7 +20,7 @@ export default function ChipContainer(props: IProps) {
 	const {
 		selectedOptions,
 		onChange,
-		value: propValue,
+		searchValue,
 		placeholder = "Rechercher",
 		disabled = false,
 		onFocus,
@@ -30,7 +29,7 @@ export default function ChipContainer(props: IProps) {
 	} = props;
 
 	const [isFocused, setIsFocused] = React.useState(false);
-	const [value, setValue] = React.useState(propValue || "");
+	const [value, setValue] = React.useState(searchValue || "");
 
 	const changeValue = useCallback(
 		(value: string) => {
@@ -64,16 +63,20 @@ export default function ChipContainer(props: IProps) {
 	);
 
 	useEffect(() => {
-		if (propValue !== undefined) {
+		if (searchValue !== undefined) {
-			setValue(propValue);
+			setValue(searchValue);
 		}
-	}, [propValue]);
+	}, [searchValue]);
 
 	return (
-		<div className={classes["root"]} data-is-focused={isFocused} data-has-value={value !== ""} data-is-disabled={disabled}>
+		<div
+			className={classes["root"]}
+			data-is-focused={isFocused}
+			data-has-value={selectedOptions && selectedOptions.length > 0}
+			data-is-disabled={disabled}>
 			<div className={classes["content"]}>
 				{selectedOptions.map((option) => (
-					<Chip key={option.id} text={getLabel(option) ?? ""} onDelete={() => onChipDelete(option)} />
+					<Chip key={option.id} option={option} onDelete={() => onChipDelete(option)} />
 				))}
 				<input
 					type="text"

src/front/Components/DesignSystem/AutocompleteMultiSelect/index.tsx

@@ -84,7 +84,7 @@ export default function AutocompleteMultiSelect(props: IProps) {
 				placeholder={placeholder}
 				disabled={disabled}
 				onChange={handleSearchChange}
-				value={searchValue}
+				searchValue={searchValue}
 				onClear={() => handleChange(null)}
 				onFocus={openable.open}
 				selectedOptions={selectedOptions ?? []}
@@ -92,4 +92,4 @@ export default function AutocompleteMultiSelect(props: IProps) {
 			/>
 		</DropdownMenu>
 	);
-}
+}

src/front/Components/DesignSystem/Dropdown/classes.module.scss

@@ -29,8 +29,8 @@
 				display: flex;
 				padding: 0px var(--spacing-2, 16px);
 				align-items: center;
-				flex: 1 0 0;
 				gap: 4px;
+				flex: 1 0 0;
 			}
 
 			svg {