diff --git a/src/front/Components/DesignSystem/AutocompleteMultiSelect/Chip/classes.module.scss b/src/front/Components/DesignSystem/AutocompleteMultiSelect/Chip/classes.module.scss
index 9ebc273e..f27024cd 100644
--- a/src/front/Components/DesignSystem/AutocompleteMultiSelect/Chip/classes.module.scss
+++ b/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;
+ }
}
diff --git a/src/front/Components/DesignSystem/AutocompleteMultiSelect/Chip/index.tsx b/src/front/Components/DesignSystem/AutocompleteMultiSelect/Chip/index.tsx
index 2bcfa230..42b792f8 100644
--- a/src/front/Components/DesignSystem/AutocompleteMultiSelect/Chip/index.tsx
+++ b/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 (
- {text}
+ {getLabelContent(option)}
} onClick={onDelete} />
);
}
+
+function getLabelContent(option: IOption) {
+ if (typeof option.label === "string") {
+ return (
+
+ {option.label}
+
+ );
+ }
+
+ return (
+
+
+ {`${option.label.text} , `}
+
+
+ {option.label.subtext}
+
+
+ );
+}
diff --git a/src/front/Components/DesignSystem/AutocompleteMultiSelect/ChipContainer/classes.module.scss b/src/front/Components/DesignSystem/AutocompleteMultiSelect/ChipContainer/classes.module.scss
index fa4937cd..c242d71a 100644
--- a/src/front/Components/DesignSystem/AutocompleteMultiSelect/ChipContainer/classes.module.scss
+++ b/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"] {
diff --git a/src/front/Components/DesignSystem/AutocompleteMultiSelect/ChipContainer/index.tsx b/src/front/Components/DesignSystem/AutocompleteMultiSelect/ChipContainer/index.tsx
index 5e926fdc..ba9472f2 100644
--- a/src/front/Components/DesignSystem/AutocompleteMultiSelect/ChipContainer/index.tsx
+++ b/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) {
- setValue(propValue);
+ if (searchValue !== undefined) {
+ setValue(searchValue);
}
- }, [propValue]);
+ }, [searchValue]);
return (
-