From 490cce5bbb789e8ea633960feeabcba1aa0dc9cd Mon Sep 17 00:00:00 2001
From: julie BRUNETTO <julie.brunetto@octo.com>
Date: Mon, 8 Jul 2024 11:07:54 +0200
Subject: [PATCH 1/6] feat(a11y): utiliser le select sur les pages meilisearch

---
 .../MeilisearchCustomRefinementList.tsx       |  89 +---
 .../MeilisearchCustomRefinementList.test.tsx  | 379 ++----------------
 2 files changed, 54 insertions(+), 414 deletions(-)

diff --git a/src/client/components/ui/Meilisearch/MeilisearchCustomRefinementList.tsx b/src/client/components/ui/Meilisearch/MeilisearchCustomRefinementList.tsx
index 1a2c5f778f..465d087825 100644
--- a/src/client/components/ui/Meilisearch/MeilisearchCustomRefinementList.tsx
+++ b/src/client/components/ui/Meilisearch/MeilisearchCustomRefinementList.tsx
@@ -2,6 +2,7 @@ import classNames from 'classnames';
 import React, {
 	FocusEvent,
 	useEffect,
+	useMemo,
 	useRef,
 	useState,
 } from 'react';
@@ -13,6 +14,7 @@ import {
 	handleKeyBoardInteraction,
 } from '~/client/components/keyboard/select.keyboard';
 import { Checkbox } from '~/client/components/ui/Checkbox/Checkbox';
+import { OptionSelect, Select } from '~/client/components/ui/Form/Select/Select';
 import { Icon } from '~/client/components/ui/Icon/Icon';
 import { getCapitalizedItems } from '~/client/components/ui/Meilisearch/getCapitalizedItems';
 import styles from '~/client/components/ui/Meilisearch/MeilisearchCustomRefinementList.module.scss';
@@ -26,87 +28,26 @@ export function MeilisearchCustomRefinementList(props: UseRefinementListProps &
 	const { refine, items } = useRefinementList(props);
 	const { label, className } = props;
 
-	const [isOptionsOpen, setIsOptionsOpen] = useState(false);
-	const buttonLabel = 'Sélectionnez vos choix';
-	const labelledBy = useRef(uuidv4());
-	const buttonRef = useRef<HTMLButtonElement>(null);
-	const listBoxRef = useRef<HTMLUListElement>(null);
+	// TODO (BRUJ 08/07/2024): A supprimer lors du passage des options en composition
+	const optionsList: Array<OptionSelect> = items.map((item) => ({
+		libellé: item.label,
+		valeur: item.value,
+	}));
 
-	useEffect(function setFocusOnOpen() {
-		if (isOptionsOpen && items.length > 0) {
-			const currentItem = listBoxRef.current;
-			const firstElement = currentItem?.getElementsByTagName('li')[0];
-			firstElement?.focus();
-		}
-	}, [isOptionsOpen, items.length]);
+	const valuesItemsSelected = useMemo(() => {
+		return items.filter((item) => item.isRefined)
+			.map((item) => item.value);
+	}, [items]);
 
-	function changeFocusToButtonElement(){
-		buttonRef.current?.focus();
-	}
-
-	function handleKeyDown (event: React.KeyboardEvent<HTMLLIElement>){
-		const currentItem = event.currentTarget;
-		const updateValues = () => {
-			const currentInput = currentItem.querySelector('input');
-			if (currentInput === null) return;
-			refine(currentInput.value);
-		};
-		handleKeyBoardInteraction(event, currentItem, updateValues);
-
-		if (event.key === KeyBoard.ESCAPE) {
-			changeFocusToButtonElement();
-			setIsOptionsOpen(false);
-		}
-	}
 
-	function onBlur(event: FocusEvent<HTMLDivElement>) {
-		if (!event.currentTarget.contains(event.relatedTarget)) {
-			setIsOptionsOpen(false);
-		}
+	function onOptionSelected(option: HTMLElement) {
+		const value = option.getAttribute('data-value') ?? '';
+		value && refine(value);
 	}
 
-	const renderOptionList = () => (
-		<ul ref={listBoxRef} role="listbox" aria-multiselectable className={styles.options}>
-			{items.length > 0 && items.map((item) => (
-				<li
-					tabIndex={-1}
-					role="option"
-					key={item.value}
-					className={styles.option}
-					aria-selected={item.isRefined}
-					onKeyDown={handleKeyDown}
-				>
-					<Checkbox
-						label={getCapitalizedItems(item.label)}
-						value={item.value}
-						checked={item.isRefined}
-						onChange={() => refine(item.value)}
-					/>
-				</li>
-			))}
-		</ul>
-	);
-
-
-	if (items.length === 0) return null;
 	return (
 		<div className={classNames(className)} data-testid={props['data-testid']}>
-			<span className={styles.label} id={labelledBy.current}>{label}</span>
-			<div  className={styles.selectContainer} onBlur={onBlur}>
-				<button
-					type="button"
-					ref={buttonRef}
-					aria-haspopup="listbox"
-					aria-expanded={isOptionsOpen}
-					aria-labelledby={labelledBy.current}
-					className={styles.button}
-					onClick={() => setIsOptionsOpen(!isOptionsOpen)}
-				>
-					<span>{buttonLabel}</span>
-					<Icon name={isOptionsOpen ? 'angle-up' : 'angle-down'}/>
-				</button>
-				{isOptionsOpen && renderOptionList()}
-			</div>
+			<Select label={label} optionList={optionsList} multiple onChange={(option) => onOptionSelected(option)} value={valuesItemsSelected}/>
 		</div>
 	);
 }
diff --git a/src/client/components/ui/Meilisearch/tests/MeilisearchCustomRefinementList.test.tsx b/src/client/components/ui/Meilisearch/tests/MeilisearchCustomRefinementList.test.tsx
index 732b44d13e..4623de167f 100644
--- a/src/client/components/ui/Meilisearch/tests/MeilisearchCustomRefinementList.test.tsx
+++ b/src/client/components/ui/Meilisearch/tests/MeilisearchCustomRefinementList.test.tsx
@@ -3,368 +3,67 @@
  */
 import '@testing-library/jest-dom';
 
-import { render, screen, within } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import { userEvent } from '@testing-library/user-event';
 import React from 'react';
 
-import { KeyBoard } from '~/client/components/keyboard.fixture';
 import { MeilisearchCustomRefinementList } from '~/client/components/ui/Meilisearch/MeilisearchCustomRefinementList';
 import {
 	generateRefinementListItem,
 	mockUseRefinementList,
 } from '~/client/components/ui/Meilisearch/tests/mockMeilisearchUseFunctions';
-import resetAllMocks = jest.resetAllMocks;
+import { mockScrollIntoView } from '~/client/components/window.mock';
 
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const spyed = jest.spyOn(require('react-instantsearch'), 'useRefinementList');
 
-let refineMock: jest.Mock<string>;
-
 describe('MeilisearchCustomRefinementList', () => {
-	describe('lorsque la liste des suggestions est vide', () => {
-		beforeEach(() => {
-			refineMock = jest.fn();
-			spyed
-				.mockImplementation(() => mockUseRefinementList({
-					items: [],
-					refine: refineMock,
-				}));
-		});
-		it('affiche un message informatif dans à la place de la liste de suggestions', async () => {
-			render(<MeilisearchCustomRefinementList attribute="test" label="test"/>);
-			const button = screen.queryByRole('button', { name: 'test' });
-
-			expect(button).not.toBeInTheDocument();
-
-		});
+	beforeEach(() => {
+		mockScrollIntoView();
 	});
 
-	describe('Avec 3 objets de filtres possibles dont le premier a pour label "audit" et valeur "auditeur"', () => {
-		beforeEach(() => {
-			// GIVEN
-			refineMock = jest.fn();
-			spyed.mockImplementation(() => mockUseRefinementList({
-				items: [
-					generateRefinementListItem({ label: 'audit', value: 'auditeur' }),
-					generateRefinementListItem({ label: 'dev', value: 'developpeur' }),
-					generateRefinementListItem({ label: 'cuisinier', value: 'cuisinier' }),
-				]
-				,
-				refine: refineMock,
-			}));
-		});
-		it('monte le composant', async () => {
-			render(<MeilisearchCustomRefinementList attribute="test" label="test"/>);
-			const button = screen.queryByRole('button', { name: 'test' });
-			expect(button).toBeInTheDocument();
-		});
-
-		it('affiche une liste de 3 éléments', async () => {
-			const user = userEvent.setup();
-			render(<MeilisearchCustomRefinementList attribute="test" label="test"/>);
-			const button = screen.getByRole('button');
-			await user.click(button);
-			screen.getByRole('listbox');
-			expect(screen.getAllByRole('checkbox')).toHaveLength(3);
-		});
-
-		it('affiche "Audit" comme label du premier élément', async () => {
-			const user = userEvent.setup();
-			render(<MeilisearchCustomRefinementList attribute="test" label="test"/>);
-			const button = screen.getByRole('button');
-			await user.click(button);
-			screen.getByRole('listbox');
-
-			expect(screen.getByRole('checkbox', { name: 'Audit' })).toBeInTheDocument();
-		});
-
-		describe('Quand l’utilisateur clique sur le label correspondant au texte "audit"', () => {
-			it('appelle la méthode refine une fois', async () => {
-				const user = userEvent.setup();
-
-				render(<MeilisearchCustomRefinementList attribute="test" label="test"/>);
-				const button = screen.getByRole('button');
-				await user.click(button);
-				screen.getByRole('listbox');
-
-				const labelAudit = screen.getByLabelText('Audit');
-				await user.click(labelAudit);
-
-				expect(refineMock).toHaveBeenCalledTimes(1);
-			});
-
-			it('appelle la méthode refine avec la valeur "auditeur"', async () => {
-				const user = userEvent.setup();
-				render(<MeilisearchCustomRefinementList attribute="test" label="test"/>);
-				const button = screen.getByRole('button');
-				await user.click(button);
-				screen.getByRole('listbox');
-
-				const labelAudit = screen.getByLabelText('Audit');
-				await user.click(labelAudit);
-
-				expect(refineMock).toHaveBeenCalledWith('auditeur');
-			});
-		});
+	it('je vois le select avec son label', () => {
+		render(<MeilisearchCustomRefinementList attribute="test" label="test"/>);
 
-		describe('Quand la liste déroulante est déja ouverte et que l’utilisateur clique le bouton', () => {
-			it('ferme la liste des choix', async () => {
-				const user = userEvent.setup();
-				render(<MeilisearchCustomRefinementList attribute="test" label="test"/>);
-				const button = screen.getByRole('button');
-				await user.click(button);
-
-				const optionList = screen.getByRole('listbox');
-				expect(optionList).toBeInTheDocument();
-
-				await user.click(button);
-				expect(optionList).not.toBeInTheDocument();
-			});
-		});
+		const select = screen.getByRole('combobox', { name: 'test' });
+		expect(select).toBeVisible();
 	});
-});
-
-describe('MeilisearchCustomRefinementList Keyboard', () => {
-	afterEach(() => {
-		resetAllMocks();
-	});
-	describe('au clavier', () => {
-
-		describe('lorsque je selectionne la première option avec la touche espace', () => {
-			beforeEach(() => {
-				refineMock = jest.fn();
-				spyed
-					.mockImplementationOnce(() => mockUseRefinementList({
-						items: [
-							generateRefinementListItem({ isRefined: false, label: 'Appartement', value: 'appartement' }),
-							generateRefinementListItem({ isRefined: false, label: 'Résidence', value: 'résidence' }),
-						],
-						refine: refineMock,
-					}))
-					.mockImplementationOnce(() => mockUseRefinementList({
-						items: [
-							generateRefinementListItem({ isRefined: true, label: 'Appartement', value: 'appartement' }),
-							generateRefinementListItem({ isRefined: false, label: 'Résidence', value: 'résidence' }),
-						],
-						refine: refineMock,
-					}));
-			});
-
-			it('uniquement la première option est séléctionnée, elle est focus et la liste ne se ferme pas', async () => {
-				const user = userEvent.setup();
-
-				render(<MeilisearchCustomRefinementList attribute="test" label="test"/>);
-				const button = screen.getByRole('button', { name: 'test' });
-				button.focus();
-				await user.keyboard(KeyBoard.SPACE);
-				const optionList = await screen.findByRole('listbox');
-				const firstOption = within(optionList).getAllByRole('option')[0];
-				const secondOption = within(optionList).getAllByRole('option')[1];
-
-				expect(firstOption).toHaveFocus();
-
-				await user.keyboard(KeyBoard.SPACE);
-
-				expect(firstOption).toHaveAttribute('aria-selected', 'true');
-				expect(secondOption).toHaveAttribute('aria-selected', 'false');
-
-				expect(firstOption).toHaveFocus();
-
-				expect(optionList).toBeVisible();
-			});
-		});
 
-		describe('lorsque je sélectionne la deuxième option et que la première option est déjà sélectionnée', () => {
-			beforeEach(() => {
-				refineMock = jest.fn();
-				spyed
-					.mockImplementationOnce(() => mockUseRefinementList({
-						items: [
-							generateRefinementListItem({ isRefined: true, label: 'Appartement', value: 'appartement' }),
-							generateRefinementListItem({ isRefined: false, label: 'Résidence', value: 'résidence' }),
-						],
-						refine: refineMock,
-					}))
-					.mockImplementationOnce(() => mockUseRefinementList({
-						items: [
-							generateRefinementListItem({ isRefined: true, label: 'Appartement', value: 'appartement' }),
-							generateRefinementListItem({ isRefined: true, label: 'Résidence', value: 'résidence' }),
-						],
-						refine: refineMock,
-					}));
-			});
+	it('lorsque l‘utilisateur selectionne une option, refine est appelé avec l‘option selectionnée', async () => {
+		const user = userEvent.setup();
+		const refine = jest.fn();
+		spyed.mockImplementation(() => mockUseRefinementList({
+			items: [
+				generateRefinementListItem({ label: 'audit', value: 'auditeur' }),
+				generateRefinementListItem({ label: 'dev', value: 'developpeur' }),
+			],
+			refine,
+		}));
 
-			it('les deux options sont séléctionnées, le focus est sur la deuxième option et la liste ne se ferme pas', async () => {
-				const user = userEvent.setup();
+		render(<MeilisearchCustomRefinementList attribute="test" label="test"/>);
 
-				render(<MeilisearchCustomRefinementList attribute="test" label="test"/>);
-				const button = screen.getByRole('button');
-				button.focus();
-				await user.keyboard(KeyBoard.SPACE);
-				const optionList = await screen.findByRole('listbox');
-				const firstOption = within(optionList).getAllByRole('option')[0];
-				const secondOption = within(optionList).getAllByRole('option')[1];
+		await user.click(screen.getByRole('combobox', { name: 'test' }));
+		await user.click(screen.getByRole('option', { name: 'audit' }));
 
-				await user.keyboard(KeyBoard.ARROW_DOWN);
-				expect(secondOption).toHaveFocus();
-
-				await user.keyboard(KeyBoard.SPACE);
-
-				expect(firstOption).toHaveAttribute('aria-selected', 'true');
-				expect(secondOption).toHaveAttribute('aria-selected', 'true');
-
-				expect(secondOption).toHaveFocus();
-
-				expect(optionList).toBeVisible();
-			});
-		});
-
-		describe('lorsque l‘utilisateur ferme la liste', () => {
-			beforeEach(() => {
-				refineMock = jest.fn();
-				spyed
-					.mockImplementation(() => mockUseRefinementList({
-						items: [
-							generateRefinementListItem({ isRefined: false, label: 'Appartement', value: 'appartement' }),
-							generateRefinementListItem({ isRefined: false, label: 'Résidence', value: 'résidence' }),
-						],
-						refine: refineMock,
-					}));
-			});
-
-			it('la liste est fermée et le focus est sur le bouton', async () => {
-				const user = userEvent.setup();
-
-				render(<MeilisearchCustomRefinementList attribute="test" label="test"/>);
-				const button = screen.getByRole('button');
-				button.focus();
-				await user.keyboard(KeyBoard.SPACE);
-				const optionList = await screen.findByRole('listbox');
-				const firstOption = within(optionList).getAllByRole('option')[0];
-
-				expect(firstOption).toHaveFocus();
-
-				await user.keyboard(KeyBoard.ESCAPE);
-				expect(optionList).not.toBeInTheDocument();
-				expect(button).toHaveFocus();
-			});
-		});
+		expect(refine).toHaveBeenCalledTimes(1);
+		expect(refine).toHaveBeenCalledWith('auditeur');
 	});
-	describe('à la souris', () => {
-		describe('lorsque je clique sur la première option', () => {
-			beforeEach(() => {
-				refineMock = jest.fn();
-				spyed
-					.mockImplementationOnce(() => mockUseRefinementList({
-						items: [
-							generateRefinementListItem({ isRefined: false, label: 'Appartement', value: 'appartement' }),
-							generateRefinementListItem({ isRefined: false, label: 'Résidence', value: 'résidence' }),
-						],
-						refine: refineMock,
-					})).mockImplementationOnce(() => mockUseRefinementList({
-						items: [
-							generateRefinementListItem({ isRefined: true, label: 'Appartement', value: 'appartement' }),
-							generateRefinementListItem({ isRefined: false, label: 'Résidence', value: 'résidence' }),
-						],
-						refine: refineMock,
-					}));
-			});
-			it('uniquement la première option est séléctionnée et la liste ne se ferme pas', async () => {
-				const user = userEvent.setup();
-
-				render(<MeilisearchCustomRefinementList attribute="test" label="test"/>);
-				const button = screen.getByRole('button', { name: 'test' });
-				await user.click(button);
-
-				const optionList = await screen.findByRole('listbox');
-				const firstOption = within(optionList).getAllByRole('option')[0];
-				const secondOption = within(optionList).getAllByRole('option')[1];
-
-				await user.click(firstOption);
-
-				expect(firstOption).toHaveAttribute('aria-selected', 'true');
-				expect(secondOption).toHaveAttribute('aria-selected', 'false');
-
-				expect(optionList).toBeVisible();
-			});
-		});
-
-		describe('lorsque je clique la deuxième option et que la première option est déjà sélectionnée', () => {
-			beforeEach(() => {
-				refineMock = jest.fn();
-				spyed
-					.mockImplementationOnce(() => mockUseRefinementList({
-						items: [
-							generateRefinementListItem({ isRefined: true, label: 'Appartement', value: 'appartement' }),
-							generateRefinementListItem({ isRefined: false, label: 'Résidence', value: 'résidence' }),
-						],
-						refine: refineMock,
-					}))
-					.mockImplementationOnce(() => mockUseRefinementList({
-						items: [
-							generateRefinementListItem({ isRefined: true, label: 'Appartement', value: 'appartement' }),
-							generateRefinementListItem({ isRefined: true, label: 'Résidence', value: 'résidence' }),
-						],
-						refine: refineMock,
-					}));
-			});
-			it('les deux options sont séléctionnées et la liste ne se ferme pas', async () => {
-				const user = userEvent.setup();
-
-				render(<MeilisearchCustomRefinementList attribute="test" label="test"/>);
-				const button = screen.getByRole('button');
-				await user.click(button);
-
-				const optionList = await screen.findByRole('listbox');
-				const firstOption = within(optionList).getAllByRole('option')[0];
-				const secondOption = within(optionList).getAllByRole('option')[1];
-
-				await user.click(secondOption);
-
-				expect(firstOption).toHaveAttribute('aria-selected', 'true');
-				expect(secondOption).toHaveAttribute('aria-selected', 'true');
-
-				expect(optionList).toBeVisible();
-			});
-		});
-
-		describe('lorsque l‘utilisateur ferme la liste', () => {
-			beforeEach(() => {
-				refineMock = jest.fn();
-				spyed
-					.mockImplementation(() => mockUseRefinementList({
-						items: [
-							generateRefinementListItem({ isRefined: false, label: 'Appartement', value: 'appartement' }),
-							generateRefinementListItem({ isRefined: false, label: 'Résidence', value: 'résidence' }),
-						],
-						refine: refineMock,
-					}));
-			});
-			it('lorsqu‘il clique sur le bouton, la liste est fermée et le focus est sur le bouton', async () => {
-				const user = userEvent.setup();
-
-				render(<MeilisearchCustomRefinementList attribute="test" label="test"/>);
-				const button = screen.getByRole('button');
-				await user.click(button);
-
-				await user.keyboard(KeyBoard.ESCAPE);
-
-				expect(button).toHaveFocus();
-			});
-			it('lorsqu‘il clique en dehors, la liste est fermée et le focus n‘est pas sur le bouton', async () => {
-				const user = userEvent.setup();
-
-				render(<>
-					<div data-testid={'outside'}></div>
-					<MeilisearchCustomRefinementList attribute="test" label="test"/>
-				</>);
-				const button = screen.getByRole('button');
-				await user.click(button);
-				await user.click(screen.getByTestId('outside'));
 
-				expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
-				expect(button).not.toHaveFocus();
-			});
-		});
+	it('lorsque l‘utilisateur a séléctionné une option, l‘option est séléctionnée', () => {
+		const refine = jest.fn();
+		spyed.mockImplementation(() => mockUseRefinementList({
+			items: [
+				generateRefinementListItem({ isRefined: true, label: 'audit', value: 'auditeur' }),
+				generateRefinementListItem({ isRefined: true, label: 'dev', value: 'developpeur' }),
+				generateRefinementListItem({ isRefined: false, label: 'cuisinier', value: 'cuisinier' }),
+			],
+			refine,
+		}));
+
+		render(<MeilisearchCustomRefinementList attribute="test" label="test"/>);
+
+		expect(screen.getByRole('option', { hidden: true, name: 'audit' })).toHaveAttribute('aria-selected', 'true');
+		expect(screen.getByRole('option', { hidden: true, name: 'dev' })).toHaveAttribute('aria-selected', 'true');
+		expect(screen.getByRole('option', { hidden: true, name: 'cuisinier' })).toHaveAttribute('aria-selected', 'false');
 	});
 });

From 986df80b7e35a808386b19b834bfe137cef0219e Mon Sep 17 00:00:00 2001
From: julie BRUNETTO <julie.brunetto@octo.com>
Date: Tue, 9 Jul 2024 12:36:44 +0200
Subject: [PATCH 2/6] feat(a11y): renommage select multiple

---
 .../FormulaireRechercheEvenement.tsx          |   2 +-
 .../FormulaireRechercheFicheMetier.tsx"       |  13 +-
 ...ormulaireRechercheAnnonceLogement.test.tsx | 129 +++---------------
 .../FormulaireRechercheAnnonceLogement.tsx    |  11 +-
 .../FormulaireRechercheOffreStage.tsx         |   8 +-
 .../InstantSearch/InstantSearchLayout.tsx     |   2 +-
 .../MeilisearchComboboxLocalisation.test.tsx  |   2 +-
 .../MeilisearchComboboxLocalisation.tsx       |   4 +-
 ...eilisearchCustomRefinementList.module.scss |  96 -------------
 .../MeilisearchCustomRefinementList.tsx       |  53 -------
 .../MeilisearchSelectMultiple.test.tsx}       |  10 +-
 .../MeilisearchSelectMultiple.tsx             |  33 +++++
 .../MessageResultatRecherche.module.scss      |   2 +-
 .../MessageResultatRecherche.test.tsx         |   2 +-
 .../MessageResultatRecherche.tsx              |   2 +-
 15 files changed, 82 insertions(+), 287 deletions(-)
 rename src/client/components/ui/Meilisearch/{ => MeilisearchComboboxLocalisation}/MeilisearchComboboxLocalisation.test.tsx (98%)
 rename src/client/components/ui/Meilisearch/{ => MeilisearchComboboxLocalisation}/MeilisearchComboboxLocalisation.tsx (96%)
 delete mode 100644 src/client/components/ui/Meilisearch/MeilisearchCustomRefinementList.module.scss
 delete mode 100644 src/client/components/ui/Meilisearch/MeilisearchCustomRefinementList.tsx
 rename src/client/components/ui/Meilisearch/{tests/MeilisearchCustomRefinementList.test.tsx => MeilisearchSelectMultiple/MeilisearchSelectMultiple.test.tsx} (85%)
 create mode 100644 src/client/components/ui/Meilisearch/MeilisearchSelectMultiple/MeilisearchSelectMultiple.tsx
 rename src/client/components/ui/Meilisearch/{ => MessageResultatRecherche}/MessageResultatRecherche.module.scss (69%)
 rename src/client/components/ui/Meilisearch/{ => MessageResultatRecherche}/MessageResultatRecherche.test.tsx (96%)
 rename src/client/components/ui/Meilisearch/{ => MessageResultatRecherche}/MessageResultatRecherche.tsx (96%)

diff --git a/src/client/components/features/Evenement/FormulaireRecherche/FormulaireRechercheEvenement.tsx b/src/client/components/features/Evenement/FormulaireRecherche/FormulaireRechercheEvenement.tsx
index 3a3aa190b5..e83c93d3c0 100644
--- a/src/client/components/features/Evenement/FormulaireRecherche/FormulaireRechercheEvenement.tsx
+++ b/src/client/components/features/Evenement/FormulaireRecherche/FormulaireRechercheEvenement.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 import styles
 	from '~/client/components/features/Evenement/FormulaireRecherche/FormulaireRechercheEvenement.module.scss';
-import { MeilisearchComboboxLocalisation } from '~/client/components/ui/Meilisearch/MeilisearchComboboxLocalisation';
+import { MeilisearchComboboxLocalisation } from '~/client/components/ui/Meilisearch/MeilisearchComboboxLocalisation/MeilisearchComboboxLocalisation';
 import { MeilisearchCustomSearchBox } from '~/client/components/ui/Meilisearch/MeilisearchCustomSearchBox';
 
 const LIMIT_MAX_FACETS = 10000;
diff --git "a/src/client/components/features/FicheM\303\251tier/FormulaireRecherche/FormulaireRechercheFicheMetier.tsx" "b/src/client/components/features/FicheM\303\251tier/FormulaireRecherche/FormulaireRechercheFicheMetier.tsx"
index a75a66c4a0..b16937c74e 100644
--- "a/src/client/components/features/FicheM\303\251tier/FormulaireRecherche/FormulaireRechercheFicheMetier.tsx"
+++ "b/src/client/components/features/FicheM\303\251tier/FormulaireRecherche/FormulaireRechercheFicheMetier.tsx"
@@ -1,28 +1,29 @@
 import { SearchResults } from 'algoliasearch-helper';
 import { SortBy } from 'instantsearch.js/es/types';
 
-import styles  from '~/client/components/features/FicheMétier/FormulaireRecherche/FormulaireRechercheFicheMetier.module.scss';
-import { MeilisearchCustomRefinementList } from '~/client/components/ui/Meilisearch/MeilisearchCustomRefinementList';
+import styles
+	from '~/client/components/features/FicheMétier/FormulaireRecherche/FormulaireRechercheFicheMetier.module.scss';
 import { MeilisearchCustomSearchBox } from '~/client/components/ui/Meilisearch/MeilisearchCustomSearchBox';
+import { MeilisearchSelectMultiple } from '~/client/components/ui/Meilisearch/MeilisearchSelectMultiple/MeilisearchSelectMultiple';
 
 const MEILISEARCH_SORT_BY_LABEL_ASC: SortBy<SearchResults.FacetValue> = ['name:asc'];
 
 export function FormulaireRechercheFicheMetier() {
 	return (
 		<form className={styles.RechercherMetierForm} onSubmit={(event) => event.preventDefault()}>
-	  <MeilisearchCustomSearchBox
+			<MeilisearchCustomSearchBox
 				className={styles.inputNomMetier}
 				label="Métier"
 				name="metier"
 				placeholder="Exemple : cuisinier"
-	  />
-	  <MeilisearchCustomRefinementList
+			/>
+			<MeilisearchSelectMultiple
 				className={styles.inputCentresInteret}
 				attribute="centres_interet"
 				limit={100}
 				label="Centres d‘intérêt"
 				sortBy={MEILISEARCH_SORT_BY_LABEL_ASC}
-	  />
+			/>
 		</form>
 	);
 }
diff --git a/src/client/components/features/Logement/FormulaireRecherche/FormulaireRechercheAnnonceLogement.test.tsx b/src/client/components/features/Logement/FormulaireRecherche/FormulaireRechercheAnnonceLogement.test.tsx
index 16b2d54954..ba410092eb 100644
--- a/src/client/components/features/Logement/FormulaireRecherche/FormulaireRechercheAnnonceLogement.test.tsx
+++ b/src/client/components/features/Logement/FormulaireRecherche/FormulaireRechercheAnnonceLogement.test.tsx
@@ -16,73 +16,31 @@ import { mockLargeScreen, mockSmallScreen } from '~/client/components/window.moc
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const spyed = jest.spyOn(require('react-instantsearch'), 'useRefinementList');
 
-let refineMock: jest.Mock<string>;
-
 describe('FormulaireRechercheAnnonceLogement', () => {
-	describe('en Desktop', () => {
-		beforeEach(() => {
-			mockLargeScreen();
-		});
-		beforeEach(() => {
-			// GIVEN
-			refineMock = jest.fn();
-			spyed.mockImplementation(() => mockUseRefinementList({
-				items: [ generateRefinementListItem({ label: 'exemple', value: 'exemple' }) ],
-				refine: refineMock,
-			}));
-		});
-
-		afterEach(() => {
-			jest.clearAllMocks();
-		});
+	it('affiche un formulaire', () => {
+		render(<FormulaireRechercheAnnonceLogement/>);
 
-		it('affiche un formulaire', () => {
-			render(<FormulaireRechercheAnnonceLogement/>);
-
-			const form = screen.getByRole('search');
-			expect(form).toBeInTheDocument();
-		});
-
-		it('n‘affiche pas de bouton pour filtrer la recherche', () => {
-			render(<FormulaireRechercheAnnonceLogement/>);
-
-			const buttonFiltreMobile = screen.getByTestId('bouton-filtrer-recherche-mobile');
-			expect(buttonFiltreMobile).toBeInTheDocument();
-		});
-
-		it('affiche le champ ville dans le formulaire', () => {
-			render(<FormulaireRechercheAnnonceLogement/>);
-
-			const inputVille = screen.getByRole('textbox', { name: 'Ville' });
-			expect(inputVille).toBeInTheDocument();
-		});
-
-		it('affiche le champ type d‘offre dans le formulaire', () => {
-			render(<FormulaireRechercheAnnonceLogement/>);
-
-			const buttonTypeOffre = screen.getByRole('button', { name: 'Type d‘offre' });
-			expect(buttonTypeOffre).toBeInTheDocument();
-		});
-
-		it('affiche le champ type de bien dans le formulaire', () => {
-			render(<FormulaireRechercheAnnonceLogement/>);
-
-			const buttonTypeOffre = screen.getByRole('button', { name: 'Type de bien' });
-			expect(buttonTypeOffre).toBeInTheDocument();
-		});
-
-		it('affiche le champ prix dans le formulaire', () => {
-			render(<FormulaireRechercheAnnonceLogement/>);
+		const form = screen.getByRole('search');
+		expect(form).toBeVisible();
+	});
 
-			const buttonPrix = screen.getByRole('button', { name: 'Prix' });
-			expect(buttonPrix).toBeInTheDocument();
-		});
+	beforeEach(() => {
+		mockLargeScreen();
+		spyed.mockImplementation(() => mockUseRefinementList({
+			items: [generateRefinementListItem({ label: 'exemple', value: 'exemple' })],
+			refine: jest.fn(),
+		}));
+	});
 
-		it('affiche le champ surface dans le formulaire', () => {
+	describe('en Desktop', () => {
+		it('affiche les champs de recherche', () => {
 			render(<FormulaireRechercheAnnonceLogement/>);
 
-			const buttonSurface = screen.getByRole('button', { name: 'Surface (m²)' });
-			expect(buttonSurface).toBeInTheDocument();
+			expect(screen.getByRole('textbox', { name: 'Ville' })).toBeVisible();
+			expect(screen.getByRole('combobox', { name: 'Type d‘offre' })).toBeVisible();
+			expect(screen.getByRole('combobox', { name: 'Type de bien' })).toBeVisible();
+			expect(screen.getByRole('button', { name: 'Surface (m²)' })).toBeVisible();
+			expect(screen.getByRole('button', { name: 'Prix' })).toBeVisible();
 		});
 	});
 
@@ -91,60 +49,17 @@ describe('FormulaireRechercheAnnonceLogement', () => {
 			mockSmallScreen();
 		});
 
-		afterEach(() => {
-			jest.clearAllMocks();
-		});
-
-		it('affiche un formulaire', () => {
-			render(<FormulaireRechercheAnnonceLogement/>);
-
-			const form = screen.getByRole('search');
-			expect(form).toBeInTheDocument();
-		});
-
-		it('affiche le champ ville dans le formulaire', () => {
+		it('affiche uniquement le champ ville dans le formulaire', () => {
 			render(<FormulaireRechercheAnnonceLogement/>);
 
-			const inputVille = screen.getByRole('textbox', { name: 'Ville' });
-			expect(inputVille).toBeInTheDocument();
-			expect(inputVille).toBeVisible();
+			expect(screen.getByRole('textbox', { name: 'Ville' })).toBeVisible();
 		});
 
 		it('affiche un bouton pour filtrer la recherche', () => {
 			render(<FormulaireRechercheAnnonceLogement/>);
 
 			const buttonFiltre = screen.getByRole('button', { name: 'Filtrer ma recherche' });
-			expect(buttonFiltre).toBeInTheDocument();
-		});
-
-		it('n‘affiche pas le champ type d‘offre dans le formulaire', () => {
-			render(<FormulaireRechercheAnnonceLogement/>);
-
-			const buttonTypeOffreDesktop = screen.getByTestId('input-type-offre-desktop');
-			expect(buttonTypeOffreDesktop).toBeInTheDocument();
-
-		});
-
-		it('n‘affiche pas le champ type de bien dans le formulaire', () => {
-			render(<FormulaireRechercheAnnonceLogement/>);
-
-			const buttonTypeBienDesktop = screen.getByTestId('input-type-bien-desktop');
-			expect(buttonTypeBienDesktop).toBeInTheDocument();
-
-		});
-
-		it('n‘affiche pas le champ prix dans le formulaire', () => {
-			render(<FormulaireRechercheAnnonceLogement/>);
-
-			const buttonPrixDesktop = screen.getByTestId('input-prix-desktop');
-			expect(buttonPrixDesktop).toBeInTheDocument();
-		});
-
-		it('n‘affiche pas le champ surface dans le formulaire', () => {
-			render(<FormulaireRechercheAnnonceLogement/>);
-
-			const buttonSurfaceDesktop = screen.getByTestId('input-surface-desktop');
-			expect(buttonSurfaceDesktop).toBeInTheDocument();
+			expect(buttonFiltre).toBeVisible();
 		});
 
 		describe('quand l‘utilisateur ouvre les filtres de recherche', () => {
diff --git a/src/client/components/features/Logement/FormulaireRecherche/FormulaireRechercheAnnonceLogement.tsx b/src/client/components/features/Logement/FormulaireRecherche/FormulaireRechercheAnnonceLogement.tsx
index cea324f1a1..61c7a5652a 100644
--- a/src/client/components/features/Logement/FormulaireRecherche/FormulaireRechercheAnnonceLogement.tsx
+++ b/src/client/components/features/Logement/FormulaireRecherche/FormulaireRechercheAnnonceLogement.tsx
@@ -9,11 +9,11 @@ import { MeilisearchCustomRangeInput } from '~/client/components/ui/Meilisearch/
 import {
 	MeilisearchCustomRangeInputForModal,
 } from '~/client/components/ui/Meilisearch/MeilisearchCustomRangeInputForModal';
-import { MeilisearchCustomRefinementList } from '~/client/components/ui/Meilisearch/MeilisearchCustomRefinementList';
 import {
 	MeilisearchCustomRefinementListForModal,
 } from '~/client/components/ui/Meilisearch/MeilisearchCustomRefinementListForModal';
 import { MeilisearchCustomSearchBox } from '~/client/components/ui/Meilisearch/MeilisearchCustomSearchBox';
+import { MeilisearchSelectMultiple } from '~/client/components/ui/Meilisearch/MeilisearchSelectMultiple/MeilisearchSelectMultiple';
 import { ModalComponent } from '~/client/components/ui/Modal/ModalComponent';
 
 export const PRIX_MINIMUM = 0;
@@ -37,19 +37,17 @@ export function FormulaireRechercheAnnonceLogement() {
 				name="ville"
 				placeholder="Exemples : Paris, Toulouse"
 			/>
-			<MeilisearchCustomRefinementList
+			<MeilisearchSelectMultiple
 				className={styles.filtresDesktop}
 				attribute="type"
 				label="Type d‘offre"
 				sortBy={['name:asc']}
-				data-testid="input-type-offre-desktop"
 			/>
-			<MeilisearchCustomRefinementList
+			<MeilisearchSelectMultiple
 				className={styles.filtresDesktop}
 				attribute="typeBien"
 				label="Type de bien"
 				sortBy={['name:asc']}
-				data-testid="input-type-bien-desktop"
 			/>
 			<MeilisearchCustomRangeInput
 				className={styles.filtresDesktop}
@@ -59,7 +57,6 @@ export function FormulaireRechercheAnnonceLogement() {
 				unite={UNITE_SURFACE}
 				min={SURFACE_MINIMUM}
 				max={SURFACE_MAXIMUM}
-				data-testid="input-surface-desktop"
 			/>
 			<MeilisearchCustomRangeInput
 				className={styles.filtresDesktop}
@@ -69,7 +66,6 @@ export function FormulaireRechercheAnnonceLogement() {
 				unite={DEVISE}
 				min={PRIX_MINIMUM}
 				max={PRIX_MAXIMUM}
-				data-testid="input-prix-desktop"
 			/>
 			<div className={styles.filtresAvancesMobile}>
 				<ButtonComponent
@@ -78,7 +74,6 @@ export function FormulaireRechercheAnnonceLogement() {
 					icon={<Icon name="filter"/>}
 					iconPosition="right"
 					label="Filtrer ma recherche"
-					data-testid="bouton-filtrer-recherche-mobile"
 					onClick={() => setIsFiltresAvancésMobileOpen(true)}
 				/>
 				<ModalComponent
diff --git a/src/client/components/features/OffreDeStage/FormulaireRecherche/FormulaireRechercheOffreStage.tsx b/src/client/components/features/OffreDeStage/FormulaireRecherche/FormulaireRechercheOffreStage.tsx
index c532cfb1bc..6956ac5b38 100644
--- a/src/client/components/features/OffreDeStage/FormulaireRecherche/FormulaireRechercheOffreStage.tsx
+++ b/src/client/components/features/OffreDeStage/FormulaireRecherche/FormulaireRechercheOffreStage.tsx
@@ -3,9 +3,9 @@ import React from 'react';
 
 import styles
 	from '~/client/components/features/OffreDeStage/FormulaireRecherche/FormulaireRechercheOffreStage.module.scss';
-import { MeilisearchComboboxLocalisation } from '~/client/components/ui/Meilisearch/MeilisearchComboboxLocalisation';
-import { MeilisearchCustomRefinementList } from '~/client/components/ui/Meilisearch/MeilisearchCustomRefinementList';
+import { MeilisearchComboboxLocalisation } from '~/client/components/ui/Meilisearch/MeilisearchComboboxLocalisation/MeilisearchComboboxLocalisation';
 import { MeilisearchCustomSearchBox } from '~/client/components/ui/Meilisearch/MeilisearchCustomSearchBox';
+import { MeilisearchSelectMultiple } from '~/client/components/ui/Meilisearch/MeilisearchSelectMultiple/MeilisearchSelectMultiple';
 import { DomainesStage } from '~/server/stages/repository/domainesStage';
 
 const LIMIT_MAX_FACETS = 100000;
@@ -53,13 +53,13 @@ export function FormulaireRechercheOffreStage() {
 				attribute="localisationFiltree"
 				limit={LIMIT_MAX_FACETS}
 			/>
-			<MeilisearchCustomRefinementList
+			<MeilisearchSelectMultiple
 				attribute="domaines"
 				limit={LIMIT_MAX_DOMAINS}
 				label="Domaines"
 				sortBy={sortWithNonRenseigneAtTheEnd}
 			/>
-			<MeilisearchCustomRefinementList
+			<MeilisearchSelectMultiple
 				attribute="dureeCategorisee"
 				label="Durée de stage"
 				sortBy={sortByDurationAscending}
diff --git a/src/client/components/layouts/InstantSearch/InstantSearchLayout.tsx b/src/client/components/layouts/InstantSearch/InstantSearchLayout.tsx
index 2f0dbef8bc..12406c15d6 100644
--- a/src/client/components/layouts/InstantSearch/InstantSearchLayout.tsx
+++ b/src/client/components/layouts/InstantSearch/InstantSearchLayout.tsx
@@ -10,7 +10,7 @@ import styles from '~/client/components/layouts/InstantSearch/InstantSearchLayou
 import { ListeDesResultats } from '~/client/components/layouts/InstantSearch/ListeDesResultats';
 import { LightHero, LightHeroPrimaryText, LightHeroSecondaryText } from '~/client/components/ui/Hero/LightHero';
 import { MeiliSearchCustomPagination } from '~/client/components/ui/Meilisearch/MeiliSearchCustomPagination';
-import { MessageResultatRecherche } from '~/client/components/ui/Meilisearch/MessageResultatRecherche';
+import { MessageResultatRecherche } from '~/client/components/ui/Meilisearch/MessageResultatRecherche/MessageResultatRecherche';
 import { useDependency } from '~/client/context/dependenciesContainer.context';
 import { useSynchronizedRef } from '~/client/hooks/useSynchronizedRef';
 
diff --git a/src/client/components/ui/Meilisearch/MeilisearchComboboxLocalisation.test.tsx b/src/client/components/ui/Meilisearch/MeilisearchComboboxLocalisation/MeilisearchComboboxLocalisation.test.tsx
similarity index 98%
rename from src/client/components/ui/Meilisearch/MeilisearchComboboxLocalisation.test.tsx
rename to src/client/components/ui/Meilisearch/MeilisearchComboboxLocalisation/MeilisearchComboboxLocalisation.test.tsx
index d5efae8ae8..8541464c4f 100644
--- a/src/client/components/ui/Meilisearch/MeilisearchComboboxLocalisation.test.tsx
+++ b/src/client/components/ui/Meilisearch/MeilisearchComboboxLocalisation/MeilisearchComboboxLocalisation.test.tsx
@@ -6,7 +6,7 @@ import { render, screen } from '@testing-library/react';
 import { userEvent } from '@testing-library/user-event';
 
 import { KeyBoard } from '~/client/components/keyboard/keyboard.enum';
-import { MeilisearchComboboxLocalisation } from '~/client/components/ui/Meilisearch/MeilisearchComboboxLocalisation';
+import { MeilisearchComboboxLocalisation } from '~/client/components/ui/Meilisearch/MeilisearchComboboxLocalisation/MeilisearchComboboxLocalisation';
 import {
 	generateRefinementListItem,
 	mockUseRefinementList,
diff --git a/src/client/components/ui/Meilisearch/MeilisearchComboboxLocalisation.tsx b/src/client/components/ui/Meilisearch/MeilisearchComboboxLocalisation/MeilisearchComboboxLocalisation.tsx
similarity index 96%
rename from src/client/components/ui/Meilisearch/MeilisearchComboboxLocalisation.tsx
rename to src/client/components/ui/Meilisearch/MeilisearchComboboxLocalisation/MeilisearchComboboxLocalisation.tsx
index 7ab8d49020..e3f0f4582a 100644
--- a/src/client/components/ui/Meilisearch/MeilisearchComboboxLocalisation.tsx
+++ b/src/client/components/ui/Meilisearch/MeilisearchComboboxLocalisation/MeilisearchComboboxLocalisation.tsx
@@ -3,8 +3,8 @@ import { useRefinementList, UseRefinementListProps } from 'react-instantsearch';
 
 import { KeyBoard } from '~/client/components/keyboard/keyboard.enum';
 
-import { Champ } from '../Form/Champ/Champ';
-import { Combobox } from '../Form/Combobox';
+import { Champ } from '../../Form/Champ/Champ';
+import { Combobox } from '../../Form/Combobox';
 
 const MESSAGE_PAS_DE_RESULTAT = 'Aucune proposition ne correspond à votre saisie. Vérifiez que votre saisie correspond bien à un lieu. Exemple : Paris, Marseille …';
 const NOMBRE_RESULTAT_MAXIMUM = 20;
diff --git a/src/client/components/ui/Meilisearch/MeilisearchCustomRefinementList.module.scss b/src/client/components/ui/Meilisearch/MeilisearchCustomRefinementList.module.scss
deleted file mode 100644
index 3b51d6759e..0000000000
--- a/src/client/components/ui/Meilisearch/MeilisearchCustomRefinementList.module.scss
+++ /dev/null
@@ -1,96 +0,0 @@
-@use "@styles/utilities-deprecated";
-@use "@styles/utilities";
-@use "@styles/components/form/variables";
-
-.selectContainer {
-  position: relative;
-  margin-top: 0.5rem;
-}
-
-.button {
-  @include utilities.text-interactive-medium;
-  display: flex;
-  width: 100%;
-  justify-content: space-between;
-  align-items: center;
-  color: utilities-deprecated.$color-mention-grey;
-  padding: 6px 6px 6px 12px;
-  border: 1px solid utilities-deprecated.$color-on-background;
-  border-radius: 20px;
-  height: 2.5rem;
-
-  &:focus, &[aria-expanded=true] {
-    border: 2px solid utilities-deprecated.$color-primary;
-  }
-}
-
-.options {
-  z-index: 15;
-  position: absolute;
-  padding: 8px;
-  width: 100%;
-  border: 1px solid utilities-deprecated.$color-separator;
-  border-radius: 20px;
-  background-color: utilities-deprecated.$color-background;
-  margin: 4px 0 0 0;
-  max-height: 300px;
-  overflow-y: auto;
-}
-
-.option {
-  list-style-type: none;
-}
-
-.option:not(:last-child) {
-  border-bottom: 1px solid utilities-deprecated.$color-separator;
-  border-radius: 0;
-}
-
-.label{
-  @extend %label-champ;
-}
-
-.checkbox {
-  position: relative;
-
-  input[type=checkbox] {
-    position: absolute;
-    margin: 0;
-    opacity: 0;
-    top: 50%;
-    transform: translateY(-50%);
-  }
-
-  input[type=checkbox] + span {
-    position: relative;
-    padding: 0.75rem 0 .75rem 2rem;
-    -webkit-tap-highlight-color: transparent;
-    display: block;
-    flex-direction: row;
-    align-items: center;
-    justify-content: flex-start;
-    flex-wrap: wrap;
-  }
-
-  input[type=checkbox] + span::before {
-    content: "";
-    display: block;
-    position: absolute;
-    top: 0;
-    left: 0.5rem;
-    margin-top: 1rem;
-    width: 1rem;
-    height: 1rem;
-    margin-right: 0.5rem;
-    background-size: 1rem;
-    background-position: center;
-    background-repeat: no-repeat;
-    border-radius: 0.25rem;
-    box-shadow: inset 0 0 0 1px utilities-deprecated.$color-on-surface;
-  }
-
-  input[type=checkbox]:checked + span::before {
-    background-color: utilities-deprecated.$color-primary;
-    background-image: url("data:image/svg+xml;charset=utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23fff' d='M10 15.17l9.2-9.2 1.4 1.42L10 18l-6.36-6.36 1.4-1.42z'/></svg>");
-  }
-}
diff --git a/src/client/components/ui/Meilisearch/MeilisearchCustomRefinementList.tsx b/src/client/components/ui/Meilisearch/MeilisearchCustomRefinementList.tsx
deleted file mode 100644
index 465d087825..0000000000
--- a/src/client/components/ui/Meilisearch/MeilisearchCustomRefinementList.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import classNames from 'classnames';
-import React, {
-	FocusEvent,
-	useEffect,
-	useMemo,
-	useRef,
-	useState,
-} from 'react';
-import { useRefinementList, UseRefinementListProps } from 'react-instantsearch';
-import { v4 as uuidv4 } from 'uuid';
-
-import { KeyBoard } from '~/client/components/keyboard/keyboard.enum';
-import {
-	handleKeyBoardInteraction,
-} from '~/client/components/keyboard/select.keyboard';
-import { Checkbox } from '~/client/components/ui/Checkbox/Checkbox';
-import { OptionSelect, Select } from '~/client/components/ui/Form/Select/Select';
-import { Icon } from '~/client/components/ui/Icon/Icon';
-import { getCapitalizedItems } from '~/client/components/ui/Meilisearch/getCapitalizedItems';
-import styles from '~/client/components/ui/Meilisearch/MeilisearchCustomRefinementList.module.scss';
-
-interface MeilisearchCustomRefinementListProps extends React.ComponentPropsWithoutRef<'div'> {
-	label: string
-	'data-testid'?: string // FIXME (SULI 29-03-2024): a été ajouté pour faire passer des tests car pas de CSS inclus dans le JSDOM
-}
-
-export function MeilisearchCustomRefinementList(props: UseRefinementListProps & MeilisearchCustomRefinementListProps) {
-	const { refine, items } = useRefinementList(props);
-	const { label, className } = props;
-
-	// TODO (BRUJ 08/07/2024): A supprimer lors du passage des options en composition
-	const optionsList: Array<OptionSelect> = items.map((item) => ({
-		libellé: item.label,
-		valeur: item.value,
-	}));
-
-	const valuesItemsSelected = useMemo(() => {
-		return items.filter((item) => item.isRefined)
-			.map((item) => item.value);
-	}, [items]);
-
-
-	function onOptionSelected(option: HTMLElement) {
-		const value = option.getAttribute('data-value') ?? '';
-		value && refine(value);
-	}
-
-	return (
-		<div className={classNames(className)} data-testid={props['data-testid']}>
-			<Select label={label} optionList={optionsList} multiple onChange={(option) => onOptionSelected(option)} value={valuesItemsSelected}/>
-		</div>
-	);
-}
diff --git a/src/client/components/ui/Meilisearch/tests/MeilisearchCustomRefinementList.test.tsx b/src/client/components/ui/Meilisearch/MeilisearchSelectMultiple/MeilisearchSelectMultiple.test.tsx
similarity index 85%
rename from src/client/components/ui/Meilisearch/tests/MeilisearchCustomRefinementList.test.tsx
rename to src/client/components/ui/Meilisearch/MeilisearchSelectMultiple/MeilisearchSelectMultiple.test.tsx
index 4623de167f..9fd8b039c2 100644
--- a/src/client/components/ui/Meilisearch/tests/MeilisearchCustomRefinementList.test.tsx
+++ b/src/client/components/ui/Meilisearch/MeilisearchSelectMultiple/MeilisearchSelectMultiple.test.tsx
@@ -7,7 +7,7 @@ import { render, screen } from '@testing-library/react';
 import { userEvent } from '@testing-library/user-event';
 import React from 'react';
 
-import { MeilisearchCustomRefinementList } from '~/client/components/ui/Meilisearch/MeilisearchCustomRefinementList';
+import { MeilisearchSelectMultiple } from '~/client/components/ui/Meilisearch/MeilisearchSelectMultiple/MeilisearchSelectMultiple';
 import {
 	generateRefinementListItem,
 	mockUseRefinementList,
@@ -17,13 +17,13 @@ import { mockScrollIntoView } from '~/client/components/window.mock';
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const spyed = jest.spyOn(require('react-instantsearch'), 'useRefinementList');
 
-describe('MeilisearchCustomRefinementList', () => {
+describe('MeilisearchSelectMultiple', () => {
 	beforeEach(() => {
 		mockScrollIntoView();
 	});
 
 	it('je vois le select avec son label', () => {
-		render(<MeilisearchCustomRefinementList attribute="test" label="test"/>);
+		render(<MeilisearchSelectMultiple attribute="test" label="test"/>);
 
 		const select = screen.getByRole('combobox', { name: 'test' });
 		expect(select).toBeVisible();
@@ -40,7 +40,7 @@ describe('MeilisearchCustomRefinementList', () => {
 			refine,
 		}));
 
-		render(<MeilisearchCustomRefinementList attribute="test" label="test"/>);
+		render(<MeilisearchSelectMultiple attribute="test" label="test"/>);
 
 		await user.click(screen.getByRole('combobox', { name: 'test' }));
 		await user.click(screen.getByRole('option', { name: 'audit' }));
@@ -60,7 +60,7 @@ describe('MeilisearchCustomRefinementList', () => {
 			refine,
 		}));
 
-		render(<MeilisearchCustomRefinementList attribute="test" label="test"/>);
+		render(<MeilisearchSelectMultiple attribute="test" label="test"/>);
 
 		expect(screen.getByRole('option', { hidden: true, name: 'audit' })).toHaveAttribute('aria-selected', 'true');
 		expect(screen.getByRole('option', { hidden: true, name: 'dev' })).toHaveAttribute('aria-selected', 'true');
diff --git a/src/client/components/ui/Meilisearch/MeilisearchSelectMultiple/MeilisearchSelectMultiple.tsx b/src/client/components/ui/Meilisearch/MeilisearchSelectMultiple/MeilisearchSelectMultiple.tsx
new file mode 100644
index 0000000000..1920ee7039
--- /dev/null
+++ b/src/client/components/ui/Meilisearch/MeilisearchSelectMultiple/MeilisearchSelectMultiple.tsx
@@ -0,0 +1,33 @@
+import React, { useMemo } from 'react';
+import { useRefinementList, UseRefinementListProps } from 'react-instantsearch';
+
+import { OptionSelect, Select } from '../../Form/Select/Select';
+
+// TODO (BRUJ 08/07/2024): A supprimer le Omit lors du passage des options en composition
+type MeilisearchSelectMultipleProps = Omit<React.ComponentPropsWithoutRef<typeof Select>, 'optionList'>
+
+export function MeilisearchSelectMultiple(props: UseRefinementListProps & MeilisearchSelectMultipleProps) {
+	const { refine, items } = useRefinementList(props);
+	const { label, className } = props;
+
+	// TODO (BRUJ 08/07/2024): A supprimer lors du passage des options en composition
+	const optionsList: Array<OptionSelect> = items.map((item) => ({
+		libellé: item.label,
+		valeur: item.value,
+	}));
+
+	const valuesSelected = useMemo(() => {
+		return items.filter((item) => item.isRefined)
+			.map((item) => item.value);
+	}, [items]);
+
+
+	function onOptionSelected(option: HTMLElement) {
+		const value = option.getAttribute('data-value') ?? '';
+		value && refine(value);
+	}
+
+	return (
+		<Select className={className} label={label} optionList={optionsList} multiple onChange={onOptionSelected} value={valuesSelected}/>
+	);
+}
diff --git a/src/client/components/ui/Meilisearch/MessageResultatRecherche.module.scss b/src/client/components/ui/Meilisearch/MessageResultatRecherche/MessageResultatRecherche.module.scss
similarity index 69%
rename from src/client/components/ui/Meilisearch/MessageResultatRecherche.module.scss
rename to src/client/components/ui/Meilisearch/MessageResultatRecherche/MessageResultatRecherche.module.scss
index dfcaf83690..dfb5111042 100644
--- a/src/client/components/ui/Meilisearch/MessageResultatRecherche.module.scss
+++ b/src/client/components/ui/Meilisearch/MessageResultatRecherche/MessageResultatRecherche.module.scss
@@ -1,4 +1,4 @@
-@use "@styles/utilities";
+@use "../../../../../styles/utilities";
 
 .stats {
   @include utilities.text-large;
diff --git a/src/client/components/ui/Meilisearch/MessageResultatRecherche.test.tsx b/src/client/components/ui/Meilisearch/MessageResultatRecherche/MessageResultatRecherche.test.tsx
similarity index 96%
rename from src/client/components/ui/Meilisearch/MessageResultatRecherche.test.tsx
rename to src/client/components/ui/Meilisearch/MessageResultatRecherche/MessageResultatRecherche.test.tsx
index 379fdcaa00..9d34d1d1b7 100644
--- a/src/client/components/ui/Meilisearch/MessageResultatRecherche.test.tsx
+++ b/src/client/components/ui/Meilisearch/MessageResultatRecherche/MessageResultatRecherche.test.tsx
@@ -4,7 +4,7 @@
 
 import { render, screen, within } from '@testing-library/react';
 
-import { MessageResultatRecherche } from '~/client/components/ui/Meilisearch/MessageResultatRecherche';
+import { MessageResultatRecherche } from '~/client/components/ui/Meilisearch/MessageResultatRecherche/MessageResultatRecherche';
 
 describe('<MessageResultatRecherche />', () => {
 	it('affiche une note de bas de page', () => {
diff --git a/src/client/components/ui/Meilisearch/MessageResultatRecherche.tsx b/src/client/components/ui/Meilisearch/MessageResultatRecherche/MessageResultatRecherche.tsx
similarity index 96%
rename from src/client/components/ui/Meilisearch/MessageResultatRecherche.tsx
rename to src/client/components/ui/Meilisearch/MessageResultatRecherche/MessageResultatRecherche.tsx
index f49acc3b79..b68e0f1310 100644
--- a/src/client/components/ui/Meilisearch/MessageResultatRecherche.tsx
+++ b/src/client/components/ui/Meilisearch/MessageResultatRecherche/MessageResultatRecherche.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import { ErrorComponent } from '~/client/components/ui/ErrorMessage/ErrorComponent';
 import { Footnote } from '~/client/components/ui/Footnote/Footnote';
 import { Skeleton } from '~/client/components/ui/Loader/Skeleton/Skeleton';
-import styles from '~/client/components/ui/Meilisearch/MessageResultatRecherche.module.scss';
+import styles from '~/client/components/ui/Meilisearch/MessageResultatRecherche/MessageResultatRecherche.module.scss';
 
 interface MessageResultatRechercheProps {
 	labelSingulier: string

From 07c01145baa50c6696a1b3c22e648428ce18ff1b Mon Sep 17 00:00:00 2001
From: julie BRUNETTO <julie.brunetto@octo.com>
Date: Tue, 9 Jul 2024 12:52:02 +0200
Subject: [PATCH 3/6] refactor(meilisearch): refactorisation des composants
 meilisearch

---
 .../FormulaireRechercheEvenement.tsx          |  4 +-
 .../FormulaireRechercheFicheMetier.tsx"       |  4 +-
 ...ormulaireRechercheAnnonceLogement.test.tsx |  2 +-
 .../FormulaireRechercheAnnonceLogement.tsx    | 26 ++++----
 .../FormulaireRechercheOffreStage.tsx         |  4 +-
 .../InstantSearchErrorBoundary.test.tsx       |  2 +-
 .../InstantSearchLayout.test.tsx              |  2 +-
 .../InstantSearch/InstantSearchLayout.tsx     |  8 +--
 .../InstantSearch/ListeDesResultats.test.tsx  | 20 +++---
 .../MeilisearchCheckboxList.test.tsx}         | 14 ++--
 .../MeilisearchCheckboxList.tsx}              |  8 +--
 .../MeilisearchComboboxLocalisation.test.tsx  |  2 +-
 .../MeilisearchInput.module.scss}             |  6 +-
 .../MeilisearchInput.test.tsx}                | 16 ++---
 .../MeilisearchInput.tsx}                     |  7 +-
 .../MeilisearchInputRefinement.module.scss    | 65 -------------------
 .../MeiliSearchPagination.tsx}                |  6 +-
 .../MeilisearchPagination.test.tsx}           | 44 ++++++-------
 .../MeilisearcRange.test.tsx}                 |  8 +--
 .../MeilisearchRange.module.scss}             |  6 +-
 .../MeilisearchRange.tsx}                     | 12 ++--
 .../MeilisearchRangeForModal.module.scss}     |  4 +-
 .../MeilisearchRangeForModal.test.tsx}        |  6 +-
 .../MeilisearchRangeForModal.tsx}             |  6 +-
 .../MeilisearchSelectMultiple.test.tsx        |  2 +-
 .../MeilisearchTagsList.module.scss}          |  0
 .../MeilisearchTagsList.test.tsx}             | 14 ++--
 .../MeilisearchTagsList.tsx}                  | 11 ++--
 .../mockMeilisearchUseFunctions.ts            |  0
 .../decouvrir-les-metiers/index.page.tsx      |  6 +-
 src/pages/evenements/index.page.tsx           |  6 +-
 src/pages/logements/annonces/index.page.tsx   |  6 +-
 src/pages/stages/index.page.tsx               |  6 +-
 33 files changed, 132 insertions(+), 201 deletions(-)
 rename src/client/components/ui/Meilisearch/{tests/MeilisearchCustomRefinementListForModal.test.tsx => MeilisearchCheckboxList/MeilisearchCheckboxList.test.tsx} (76%)
 rename src/client/components/ui/Meilisearch/{MeilisearchCustomRefinementListForModal.tsx => MeilisearchCheckboxList/MeilisearchCheckboxList.tsx} (61%)
 rename src/client/components/ui/Meilisearch/{MeilisearchCustomSearchBox.module.scss => MeilisearchInput/MeilisearchInput.module.scss} (82%)
 rename src/client/components/ui/Meilisearch/{tests/MeilisearchCustomSearchBox.test.tsx => MeilisearchInput/MeilisearchInput.test.tsx} (88%)
 rename src/client/components/ui/Meilisearch/{MeilisearchCustomSearchBox.tsx => MeilisearchInput/MeilisearchInput.tsx} (87%)
 delete mode 100644 src/client/components/ui/Meilisearch/MeilisearchInputRefinement.module.scss
 rename src/client/components/ui/Meilisearch/{MeiliSearchCustomPagination.tsx => MeilisearchPagination/MeiliSearchPagination.tsx} (81%)
 rename src/client/components/ui/Meilisearch/{tests/MeilisearchCustomPagination.test.tsx => MeilisearchPagination/MeilisearchPagination.test.tsx} (80%)
 rename src/client/components/ui/Meilisearch/{tests/MeilisearchCustomRangeInput.test.tsx => MeilisearchRange/MeilisearcRange.test.tsx} (96%)
 rename src/client/components/ui/Meilisearch/{MeilisearchCustomRangeInput.module.scss => MeilisearchRange/MeilisearchRange.module.scss} (88%)
 rename src/client/components/ui/Meilisearch/{MeilisearchCustomRangeInput.tsx => MeilisearchRange/MeilisearchRange.tsx} (89%)
 rename src/client/components/ui/Meilisearch/{MeilisearchCustomRangeInputForModal.module.scss => MeilisearchRange/MeilisearchRangeForModal.module.scss} (86%)
 rename src/client/components/ui/Meilisearch/{tests/MeilisearchCustomRangeInputForModal.test.tsx => MeilisearchRange/MeilisearchRangeForModal.test.tsx} (93%)
 rename src/client/components/ui/Meilisearch/{MeilisearchCustomRangeInputForModal.tsx => MeilisearchRange/MeilisearchRangeForModal.tsx} (88%)
 rename src/client/components/ui/Meilisearch/{MeilisearchCustomCurrentRefinements.module.scss => MeilisearchTagsList/MeilisearchTagsList.module.scss} (100%)
 rename src/client/components/ui/Meilisearch/{tests/MeilisearchCustomCurrentRefinements.test.tsx => MeilisearchTagsList/MeilisearchTagsList.test.tsx} (85%)
 rename src/client/components/ui/Meilisearch/{MeilisearchCustomCurrentRefinements.tsx => MeilisearchTagsList/MeilisearchTagsList.tsx} (67%)
 rename src/client/components/ui/Meilisearch/{tests => }/mockMeilisearchUseFunctions.ts (100%)

diff --git a/src/client/components/features/Evenement/FormulaireRecherche/FormulaireRechercheEvenement.tsx b/src/client/components/features/Evenement/FormulaireRecherche/FormulaireRechercheEvenement.tsx
index e83c93d3c0..52e87735be 100644
--- a/src/client/components/features/Evenement/FormulaireRecherche/FormulaireRechercheEvenement.tsx
+++ b/src/client/components/features/Evenement/FormulaireRecherche/FormulaireRechercheEvenement.tsx
@@ -3,14 +3,14 @@ import React from 'react';
 import styles
 	from '~/client/components/features/Evenement/FormulaireRecherche/FormulaireRechercheEvenement.module.scss';
 import { MeilisearchComboboxLocalisation } from '~/client/components/ui/Meilisearch/MeilisearchComboboxLocalisation/MeilisearchComboboxLocalisation';
-import { MeilisearchCustomSearchBox } from '~/client/components/ui/Meilisearch/MeilisearchCustomSearchBox';
+import { MeilisearchInput } from '~/client/components/ui/Meilisearch/MeilisearchInput/MeilisearchInput';
 
 const LIMIT_MAX_FACETS = 10000;
 
 export function FormulaireRechercheEvenement() {
 	return (
 		<form className={styles.rechercherEvenementForm} onSubmit={(event) => event.preventDefault()}>
-	  <MeilisearchCustomSearchBox
+	  <MeilisearchInput
 				label="Mot-clé, métier, accompagnement…"
 				name="motCle"
 				placeholder="Exemples : gendarmerie, cuisinier, mentorat"
diff --git "a/src/client/components/features/FicheM\303\251tier/FormulaireRecherche/FormulaireRechercheFicheMetier.tsx" "b/src/client/components/features/FicheM\303\251tier/FormulaireRecherche/FormulaireRechercheFicheMetier.tsx"
index b16937c74e..4a8d4eb088 100644
--- "a/src/client/components/features/FicheM\303\251tier/FormulaireRecherche/FormulaireRechercheFicheMetier.tsx"
+++ "b/src/client/components/features/FicheM\303\251tier/FormulaireRecherche/FormulaireRechercheFicheMetier.tsx"
@@ -3,7 +3,7 @@ import { SortBy } from 'instantsearch.js/es/types';
 
 import styles
 	from '~/client/components/features/FicheMétier/FormulaireRecherche/FormulaireRechercheFicheMetier.module.scss';
-import { MeilisearchCustomSearchBox } from '~/client/components/ui/Meilisearch/MeilisearchCustomSearchBox';
+import { MeilisearchInput } from '~/client/components/ui/Meilisearch/MeilisearchInput/MeilisearchInput';
 import { MeilisearchSelectMultiple } from '~/client/components/ui/Meilisearch/MeilisearchSelectMultiple/MeilisearchSelectMultiple';
 
 const MEILISEARCH_SORT_BY_LABEL_ASC: SortBy<SearchResults.FacetValue> = ['name:asc'];
@@ -11,7 +11,7 @@ const MEILISEARCH_SORT_BY_LABEL_ASC: SortBy<SearchResults.FacetValue> = ['name:a
 export function FormulaireRechercheFicheMetier() {
 	return (
 		<form className={styles.RechercherMetierForm} onSubmit={(event) => event.preventDefault()}>
-			<MeilisearchCustomSearchBox
+			<MeilisearchInput
 				className={styles.inputNomMetier}
 				label="Métier"
 				name="metier"
diff --git a/src/client/components/features/Logement/FormulaireRecherche/FormulaireRechercheAnnonceLogement.test.tsx b/src/client/components/features/Logement/FormulaireRecherche/FormulaireRechercheAnnonceLogement.test.tsx
index ba410092eb..2e606c5e5d 100644
--- a/src/client/components/features/Logement/FormulaireRecherche/FormulaireRechercheAnnonceLogement.test.tsx
+++ b/src/client/components/features/Logement/FormulaireRecherche/FormulaireRechercheAnnonceLogement.test.tsx
@@ -10,7 +10,7 @@ import {
 import {
 	generateRefinementListItem,
 	mockUseRefinementList,
-} from '~/client/components/ui/Meilisearch/tests/mockMeilisearchUseFunctions';
+} from '~/client/components/ui/Meilisearch/mockMeilisearchUseFunctions';
 import { mockLargeScreen, mockSmallScreen } from '~/client/components/window.mock';
 
 // eslint-disable-next-line @typescript-eslint/no-var-requires
diff --git a/src/client/components/features/Logement/FormulaireRecherche/FormulaireRechercheAnnonceLogement.tsx b/src/client/components/features/Logement/FormulaireRecherche/FormulaireRechercheAnnonceLogement.tsx
index 61c7a5652a..063115b749 100644
--- a/src/client/components/features/Logement/FormulaireRecherche/FormulaireRechercheAnnonceLogement.tsx
+++ b/src/client/components/features/Logement/FormulaireRecherche/FormulaireRechercheAnnonceLogement.tsx
@@ -5,14 +5,14 @@ import styles
 import { ButtonComponent } from '~/client/components/ui/Button/ButtonComponent';
 import { FilterAccordion } from '~/client/components/ui/FilterAccordion/FilterAccordion';
 import { Icon } from '~/client/components/ui/Icon/Icon';
-import { MeilisearchCustomRangeInput } from '~/client/components/ui/Meilisearch/MeilisearchCustomRangeInput';
 import {
-	MeilisearchCustomRangeInputForModal,
-} from '~/client/components/ui/Meilisearch/MeilisearchCustomRangeInputForModal';
+	MeilisearchCheckboxList,
+} from '~/client/components/ui/Meilisearch/MeilisearchCheckboxList/MeilisearchCheckboxList';
+import { MeilisearchInput } from '~/client/components/ui/Meilisearch/MeilisearchInput/MeilisearchInput';
+import { MeilisearchRange } from '~/client/components/ui/Meilisearch/MeilisearchRange/MeilisearchRange';
 import {
-	MeilisearchCustomRefinementListForModal,
-} from '~/client/components/ui/Meilisearch/MeilisearchCustomRefinementListForModal';
-import { MeilisearchCustomSearchBox } from '~/client/components/ui/Meilisearch/MeilisearchCustomSearchBox';
+	MeilisearchRangeForModal,
+} from '~/client/components/ui/Meilisearch/MeilisearchRange/MeilisearchRangeForModal';
 import { MeilisearchSelectMultiple } from '~/client/components/ui/Meilisearch/MeilisearchSelectMultiple/MeilisearchSelectMultiple';
 import { ModalComponent } from '~/client/components/ui/Modal/ModalComponent';
 
@@ -31,7 +31,7 @@ export function FormulaireRechercheAnnonceLogement() {
 			className={styles.RechercherLogementForm}
 			role="search"
 			onSubmit={(event) => event.preventDefault()}>
-			<MeilisearchCustomSearchBox
+			<MeilisearchInput
 				className={styles.inputVille}
 				label="Ville"
 				name="ville"
@@ -49,7 +49,7 @@ export function FormulaireRechercheAnnonceLogement() {
 				label="Type de bien"
 				sortBy={['name:asc']}
 			/>
-			<MeilisearchCustomRangeInput
+			<MeilisearchRange
 				className={styles.filtresDesktop}
 				attribute="surface"
 				label="Surface (m²)"
@@ -58,7 +58,7 @@ export function FormulaireRechercheAnnonceLogement() {
 				min={SURFACE_MINIMUM}
 				max={SURFACE_MAXIMUM}
 			/>
-			<MeilisearchCustomRangeInput
+			<MeilisearchRange
 				className={styles.filtresDesktop}
 				attribute="prix"
 				label="Prix"
@@ -89,21 +89,21 @@ export function FormulaireRechercheAnnonceLogement() {
 					</ModalComponent.Title>
 					<ModalComponent.Content className={styles.filtresAvancésModalContenu}>
 						<FilterAccordion title="Type d‘offre" open>
-							<MeilisearchCustomRefinementListForModal
+							<MeilisearchCheckboxList
 								attribute="type"
 								label="Type d‘offre"
 								sortBy={['name:asc']}
 							/>
 						</FilterAccordion>
 						<FilterAccordion title="Type de bien">
-							<MeilisearchCustomRefinementListForModal
+							<MeilisearchCheckboxList
 								attribute="typeBien"
 								label="Type de bien"
 								sortBy={['name:asc']}
 							/>
 						</FilterAccordion>
 						<FilterAccordion title="Prix">
-							<MeilisearchCustomRangeInputForModal
+							<MeilisearchRangeForModal
 								attribute="prix"
 								unite="€"
 								min={PRIX_MINIMUM}
@@ -111,7 +111,7 @@ export function FormulaireRechercheAnnonceLogement() {
 							/>
 						</FilterAccordion>
 						<FilterAccordion title="Surface">
-							<MeilisearchCustomRangeInputForModal
+							<MeilisearchRangeForModal
 								attribute="surface"
 								unite="m²"
 								min={SURFACE_MINIMUM}
diff --git a/src/client/components/features/OffreDeStage/FormulaireRecherche/FormulaireRechercheOffreStage.tsx b/src/client/components/features/OffreDeStage/FormulaireRecherche/FormulaireRechercheOffreStage.tsx
index 6956ac5b38..90999330cd 100644
--- a/src/client/components/features/OffreDeStage/FormulaireRecherche/FormulaireRechercheOffreStage.tsx
+++ b/src/client/components/features/OffreDeStage/FormulaireRecherche/FormulaireRechercheOffreStage.tsx
@@ -4,7 +4,7 @@ import React from 'react';
 import styles
 	from '~/client/components/features/OffreDeStage/FormulaireRecherche/FormulaireRechercheOffreStage.module.scss';
 import { MeilisearchComboboxLocalisation } from '~/client/components/ui/Meilisearch/MeilisearchComboboxLocalisation/MeilisearchComboboxLocalisation';
-import { MeilisearchCustomSearchBox } from '~/client/components/ui/Meilisearch/MeilisearchCustomSearchBox';
+import { MeilisearchInput } from '~/client/components/ui/Meilisearch/MeilisearchInput/MeilisearchInput';
 import { MeilisearchSelectMultiple } from '~/client/components/ui/Meilisearch/MeilisearchSelectMultiple/MeilisearchSelectMultiple';
 import { DomainesStage } from '~/server/stages/repository/domainesStage';
 
@@ -44,7 +44,7 @@ export function sortByDurationAscending(a: SearchResults.FacetValue, b: SearchRe
 export function FormulaireRechercheOffreStage() {
 	return (
 		<form className={styles.RechercherStageForm} onSubmit={(event) => event.preventDefault()}>
-			<MeilisearchCustomSearchBox
+			<MeilisearchInput
 				label="Métiers, mots clés, …"
 				name="motCle"
 				placeholder="Exemples : designer, juriste…"
diff --git a/src/client/components/layouts/InstantSearch/InstantSearchErrorBoundary.test.tsx b/src/client/components/layouts/InstantSearch/InstantSearchErrorBoundary.test.tsx
index d268391caa..a0751181f2 100644
--- a/src/client/components/layouts/InstantSearch/InstantSearchErrorBoundary.test.tsx
+++ b/src/client/components/layouts/InstantSearch/InstantSearchErrorBoundary.test.tsx
@@ -4,7 +4,7 @@
 import { render, screen } from '@testing-library/react';
 
 import { InstantSearchErrorBoundary } from '~/client/components/layouts/InstantSearch/InstantSearchErrorBoundary';
-import { mockUseInstantSearch } from '~/client/components/ui/Meilisearch/tests/mockMeilisearchUseFunctions';
+import { mockUseInstantSearch } from '~/client/components/ui/Meilisearch/mockMeilisearchUseFunctions';
 import { mockUseRouter } from '~/client/components/useRouter.mock';
 import { mockLargeScreen } from '~/client/components/window.mock';
 // eslint-disable-next-line @typescript-eslint/no-var-requires
diff --git a/src/client/components/layouts/InstantSearch/InstantSearchLayout.test.tsx b/src/client/components/layouts/InstantSearch/InstantSearchLayout.test.tsx
index 54a15acfd1..76efe56186 100644
--- a/src/client/components/layouts/InstantSearch/InstantSearchLayout.test.tsx
+++ b/src/client/components/layouts/InstantSearch/InstantSearchLayout.test.tsx
@@ -11,7 +11,7 @@ import { aRechercheClientService } from '~/client/components/layouts/InstantSear
 import {
 	mockUseInstantSearch,
 	mockUsePagination,
-} from '~/client/components/ui/Meilisearch/tests/mockMeilisearchUseFunctions';
+} from '~/client/components/ui/Meilisearch/mockMeilisearchUseFunctions';
 import { mockUseRouter } from '~/client/components/useRouter.mock';
 import { mockLargeScreen } from '~/client/components/window.mock';
 import { DependenciesProvider } from '~/client/context/dependenciesContainer.context';
diff --git a/src/client/components/layouts/InstantSearch/InstantSearchLayout.tsx b/src/client/components/layouts/InstantSearch/InstantSearchLayout.tsx
index 12406c15d6..c69c4c7b0a 100644
--- a/src/client/components/layouts/InstantSearch/InstantSearchLayout.tsx
+++ b/src/client/components/layouts/InstantSearch/InstantSearchLayout.tsx
@@ -9,7 +9,7 @@ import { InstantSearchErrorBoundary } from '~/client/components/layouts/InstantS
 import styles from '~/client/components/layouts/InstantSearch/InstantSearchLayout.module.scss';
 import { ListeDesResultats } from '~/client/components/layouts/InstantSearch/ListeDesResultats';
 import { LightHero, LightHeroPrimaryText, LightHeroSecondaryText } from '~/client/components/ui/Hero/LightHero';
-import { MeiliSearchCustomPagination } from '~/client/components/ui/Meilisearch/MeiliSearchCustomPagination';
+import { MeiliSearchPagination } from '~/client/components/ui/Meilisearch/MeilisearchPagination/MeiliSearchPagination';
 import { MessageResultatRecherche } from '~/client/components/ui/Meilisearch/MessageResultatRecherche/MessageResultatRecherche';
 import { useDependency } from '~/client/context/dependenciesContainer.context';
 import { useSynchronizedRef } from '~/client/hooks/useSynchronizedRef';
@@ -145,9 +145,9 @@ const AfficherResultatDeRecherche = React.forwardRef(function AfficherResultatDe
 				ref={ref}
 				resultats={<Hits hitComponent={resultatDeRecherche}/>}
 				skeletonRepeat={nombreDeSkeleton}
-				pagination={<MeiliSearchCustomPagination numberOfResultPerPage={nombreDeResultatParPage}
-					className={styles.pagination}
-					onPageChange={scrollToTopOfListeDesResultats}/>}
+				pagination={<MeiliSearchPagination numberOfResultPerPage={nombreDeResultatParPage}
+																					 className={styles.pagination}
+																					 onPageChange={scrollToTopOfListeDesResultats}/>}
 				isLoading={isInstantSearchLoading}
 				isAffichageListeDeResultatsDesktopDirectionRow={isAffichageListeDeResultatsDesktopDirectionRow}
 			/>
diff --git a/src/client/components/layouts/InstantSearch/ListeDesResultats.test.tsx b/src/client/components/layouts/InstantSearch/ListeDesResultats.test.tsx
index 4d67962449..0bb5538b95 100644
--- a/src/client/components/layouts/InstantSearch/ListeDesResultats.test.tsx
+++ b/src/client/components/layouts/InstantSearch/ListeDesResultats.test.tsx
@@ -10,8 +10,8 @@ import {
 import React from 'react';
 
 import { ListeDesResultats } from '~/client/components/layouts/InstantSearch/ListeDesResultats';
-import { MeiliSearchCustomPagination } from '~/client/components/ui/Meilisearch/MeiliSearchCustomPagination';
-import { mockUsePagination } from '~/client/components/ui/Meilisearch/tests/mockMeilisearchUseFunctions';
+import { MeiliSearchPagination } from '~/client/components/ui/Meilisearch/MeilisearchPagination/MeiliSearchPagination';
+import { mockUsePagination } from '~/client/components/ui/Meilisearch/mockMeilisearchUseFunctions';
 import { mockLargeScreen } from '~/client/components/window.mock';
 
 // eslint-disable-next-line @typescript-eslint/no-var-requires
@@ -40,7 +40,7 @@ describe('ListeDesResultats Component', () => {
 				<ListeDesResultats
 					isLoading={true}
 					resultats={<TestComponent/>}
-					pagination={<MeiliSearchCustomPagination numberOfResultPerPage={3} onPageChange={() => null}/>}
+					pagination={<MeiliSearchPagination numberOfResultPerPage={3} onPageChange={() => null}/>}
 					isAffichageListeDeResultatsDesktopDirectionRow={true}
 					skeletonRepeat={2}
 				/>,
@@ -60,7 +60,7 @@ describe('ListeDesResultats Component', () => {
 					<ListeDesResultats
 						isLoading={true}
 						resultats={<TestComponent/>}
-						pagination={<MeiliSearchCustomPagination numberOfResultPerPage={3} onPageChange={() => null}/>}
+						pagination={<MeiliSearchPagination numberOfResultPerPage={3} onPageChange={() => null}/>}
 						isAffichageListeDeResultatsDesktopDirectionRow={true}
 						skeletonRepeat={4}
 					/>,
@@ -79,7 +79,7 @@ describe('ListeDesResultats Component', () => {
 					<ListeDesResultats
 						isLoading={true}
 						resultats={<TestComponent/>}
-						pagination={<MeiliSearchCustomPagination numberOfResultPerPage={3} onPageChange={() => null}/>}
+						pagination={<MeiliSearchPagination numberOfResultPerPage={3} onPageChange={() => null}/>}
 						isAffichageListeDeResultatsDesktopDirectionRow={true}
 						skeletonRepeat={2}
 					/>,
@@ -100,7 +100,7 @@ describe('ListeDesResultats Component', () => {
 					<ListeDesResultats
 						isLoading={true}
 						resultats={<TestComponent/>}
-						pagination={<MeiliSearchCustomPagination numberOfResultPerPage={3} onPageChange={() => null}/>}
+						pagination={<MeiliSearchPagination numberOfResultPerPage={3} onPageChange={() => null}/>}
 						isAffichageListeDeResultatsDesktopDirectionRow={false}
 						skeletonRepeat={3}
 					/>,
@@ -125,7 +125,7 @@ describe('ListeDesResultats Component', () => {
 					<ListeDesResultats
 						isLoading={false}
 						resultats={<TestComponent/>}
-						pagination={<MeiliSearchCustomPagination numberOfResultPerPage={3} onPageChange={() => null}/>}
+						pagination={<MeiliSearchPagination numberOfResultPerPage={3} onPageChange={() => null}/>}
 						isAffichageListeDeResultatsDesktopDirectionRow={true}
 						skeletonRepeat={2}
 					/>,
@@ -149,7 +149,7 @@ describe('ListeDesResultats Component', () => {
 					<ListeDesResultats
 						isLoading={false}
 						resultats={<TestComponent/>}
-						pagination={<MeiliSearchCustomPagination numberOfResultPerPage={3} onPageChange={() => null}/>}
+						pagination={<MeiliSearchPagination numberOfResultPerPage={3} onPageChange={() => null}/>}
 						isAffichageListeDeResultatsDesktopDirectionRow={true}
 						skeletonRepeat={2}
 					/>,
@@ -171,7 +171,7 @@ describe('ListeDesResultats Component', () => {
 				<ListeDesResultats
 					isLoading={false}
 					resultats={<div/>}
-					pagination={<MeiliSearchCustomPagination numberOfResultPerPage={1} onPageChange={() => null}/>}
+					pagination={<MeiliSearchPagination numberOfResultPerPage={1} onPageChange={() => null}/>}
 					isAffichageListeDeResultatsDesktopDirectionRow={true}
 					skeletonRepeat={2}
 				/>,
@@ -187,7 +187,7 @@ describe('ListeDesResultats Component', () => {
 				<ListeDesResultats
 					isLoading={false}
 					resultats={<div/>}
-					pagination={<MeiliSearchCustomPagination numberOfResultPerPage={1} onPageChange={() => null}/>}
+					pagination={<MeiliSearchPagination numberOfResultPerPage={1} onPageChange={() => null}/>}
 					isAffichageListeDeResultatsDesktopDirectionRow={true}
 					skeletonRepeat={2}
 				/>,
diff --git a/src/client/components/ui/Meilisearch/tests/MeilisearchCustomRefinementListForModal.test.tsx b/src/client/components/ui/Meilisearch/MeilisearchCheckboxList/MeilisearchCheckboxList.test.tsx
similarity index 76%
rename from src/client/components/ui/Meilisearch/tests/MeilisearchCustomRefinementListForModal.test.tsx
rename to src/client/components/ui/Meilisearch/MeilisearchCheckboxList/MeilisearchCheckboxList.test.tsx
index 8de6345275..f7e55ef009 100644
--- a/src/client/components/ui/Meilisearch/tests/MeilisearchCustomRefinementListForModal.test.tsx
+++ b/src/client/components/ui/Meilisearch/MeilisearchCheckboxList/MeilisearchCheckboxList.test.tsx
@@ -8,18 +8,18 @@ import {
 import { userEvent } from '@testing-library/user-event';
 import React from 'react';
 
-import { MeilisearchCustomRefinementListForModal } from '~/client/components/ui/Meilisearch/MeilisearchCustomRefinementListForModal';
+import { MeilisearchCheckboxList } from '~/client/components/ui/Meilisearch/MeilisearchCheckboxList/MeilisearchCheckboxList';
 import {
 	generateRefinementListItem,
 	mockUseRefinementList,
-} from '~/client/components/ui/Meilisearch/tests/mockMeilisearchUseFunctions';
+} from '~/client/components/ui/Meilisearch/mockMeilisearchUseFunctions';
 
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const spyed = jest.spyOn(require('react-instantsearch'), 'useRefinementList');
 
 let refineMock: jest.Mock<string>;
 
-describe('MeilisearchCustomRefinementListForModal', () => {
+describe('<MeilisearchCheckboxList/>', () => {
 	beforeEach(() => {
 		// GIVEN
 		refineMock = jest.fn();
@@ -35,7 +35,7 @@ describe('MeilisearchCustomRefinementListForModal', () => {
 	});
 
 	it('affiche la liste des checkbox', async () => {
-		render(<MeilisearchCustomRefinementListForModal attribute='test' label='test'/>);
+		render(<MeilisearchCheckboxList attribute='test' label='test'/>);
 
 		const optionList = screen.getAllByRole('checkbox');
 		expect(optionList).toHaveLength(3);
@@ -45,7 +45,7 @@ describe('MeilisearchCustomRefinementListForModal', () => {
 		it('appelle la méthode refine une fois', async () => {
 	  const user = userEvent.setup();
 
-	  render(<MeilisearchCustomRefinementListForModal attribute='test' label='test' />);
+	  render(<MeilisearchCheckboxList attribute='test' label='test' />);
 
 	  const option = screen.getByLabelText('Studio');
 	  await user.click(option);
@@ -55,7 +55,7 @@ describe('MeilisearchCustomRefinementListForModal', () => {
 
 		it('appelle la méthode refine avec la valeur "studio"', async () => {
 	  const user = userEvent.setup();
-	  render(<MeilisearchCustomRefinementListForModal attribute='test' label='test' />);
+	  render(<MeilisearchCheckboxList attribute='test' label='test' />);
 
 	  const option = screen.getByLabelText('Studio');
 	  await user.click(option);
@@ -74,7 +74,7 @@ describe('MeilisearchCustomRefinementListForModal', () => {
 				}));
 		});
 		it('affiche un message informatif dans à la place de la liste de suggestions', async () => {
-			render(<MeilisearchCustomRefinementListForModal attribute='test' label='test'/>);
+			render(<MeilisearchCheckboxList attribute='test' label='test'/>);
 			const messageInformatif = screen.getByText('Malheureusement ce champ de recherche ne peut pas être affiché pour le moment.');
 			expect(messageInformatif).toBeInTheDocument();
 		});
diff --git a/src/client/components/ui/Meilisearch/MeilisearchCustomRefinementListForModal.tsx b/src/client/components/ui/Meilisearch/MeilisearchCheckboxList/MeilisearchCheckboxList.tsx
similarity index 61%
rename from src/client/components/ui/Meilisearch/MeilisearchCustomRefinementListForModal.tsx
rename to src/client/components/ui/Meilisearch/MeilisearchCheckboxList/MeilisearchCheckboxList.tsx
index 23884f39d6..46794f0d7f 100644
--- a/src/client/components/ui/Meilisearch/MeilisearchCustomRefinementListForModal.tsx
+++ b/src/client/components/ui/Meilisearch/MeilisearchCheckboxList/MeilisearchCheckboxList.tsx
@@ -1,14 +1,14 @@
 import React from 'react';
 import { useRefinementList, UseRefinementListProps } from 'react-instantsearch';
 
-import { Checkbox } from '~/client/components/ui/Checkbox/Checkbox';
-import { getCapitalizedItems } from '~/client/components/ui/Meilisearch/getCapitalizedItems';
+import { Checkbox } from '../../Checkbox/Checkbox';
+import { getCapitalizedItems } from '../getCapitalizedItems';
 
-interface MeilisearchCustomRefinementListProps {
+interface MeilisearchCheckboxListProps {
 	label: string
 }
 
-export function MeilisearchCustomRefinementListForModal(props: UseRefinementListProps & MeilisearchCustomRefinementListProps) {
+export function MeilisearchCheckboxList(props: UseRefinementListProps & MeilisearchCheckboxListProps) {
 	const { refine, items } = useRefinementList(props);
 
 	if (items.length === 0) return <p>Malheureusement ce champ de recherche ne peut pas être affiché pour le moment.</p>;
diff --git a/src/client/components/ui/Meilisearch/MeilisearchComboboxLocalisation/MeilisearchComboboxLocalisation.test.tsx b/src/client/components/ui/Meilisearch/MeilisearchComboboxLocalisation/MeilisearchComboboxLocalisation.test.tsx
index 8541464c4f..99892a674a 100644
--- a/src/client/components/ui/Meilisearch/MeilisearchComboboxLocalisation/MeilisearchComboboxLocalisation.test.tsx
+++ b/src/client/components/ui/Meilisearch/MeilisearchComboboxLocalisation/MeilisearchComboboxLocalisation.test.tsx
@@ -10,7 +10,7 @@ import { MeilisearchComboboxLocalisation } from '~/client/components/ui/Meilisea
 import {
 	generateRefinementListItem,
 	mockUseRefinementList,
-} from '~/client/components/ui/Meilisearch/tests/mockMeilisearchUseFunctions';
+} from '~/client/components/ui/Meilisearch/mockMeilisearchUseFunctions';
 import { mockScrollIntoView } from '~/client/components/window.mock';
 
 // eslint-disable-next-line @typescript-eslint/no-var-requires
diff --git a/src/client/components/ui/Meilisearch/MeilisearchCustomSearchBox.module.scss b/src/client/components/ui/Meilisearch/MeilisearchInput/MeilisearchInput.module.scss
similarity index 82%
rename from src/client/components/ui/Meilisearch/MeilisearchCustomSearchBox.module.scss
rename to src/client/components/ui/Meilisearch/MeilisearchInput/MeilisearchInput.module.scss
index 2296b371c0..ff91c8086d 100644
--- a/src/client/components/ui/Meilisearch/MeilisearchCustomSearchBox.module.scss
+++ b/src/client/components/ui/Meilisearch/MeilisearchInput/MeilisearchInput.module.scss
@@ -1,6 +1,6 @@
-@use "@styles/utilities-deprecated";
-@use "@styles/utilities";
-@use "@styles/components/form/variables";
+@use "../../../../../styles/utilities-deprecated";
+@use "../../../../../styles/utilities";
+@use "../../../../../styles/components/form/variables";
 
 .label {
   @extend %label-champ;
diff --git a/src/client/components/ui/Meilisearch/tests/MeilisearchCustomSearchBox.test.tsx b/src/client/components/ui/Meilisearch/MeilisearchInput/MeilisearchInput.test.tsx
similarity index 88%
rename from src/client/components/ui/Meilisearch/tests/MeilisearchCustomSearchBox.test.tsx
rename to src/client/components/ui/Meilisearch/MeilisearchInput/MeilisearchInput.test.tsx
index 4fb212a41e..5af234bb76 100644
--- a/src/client/components/ui/Meilisearch/tests/MeilisearchCustomSearchBox.test.tsx
+++ b/src/client/components/ui/Meilisearch/MeilisearchInput/MeilisearchInput.test.tsx
@@ -8,15 +8,15 @@ import {
 } from '@testing-library/react';
 import { userEvent } from '@testing-library/user-event';
 
-import { MeilisearchCustomSearchBox } from '~/client/components/ui/Meilisearch/MeilisearchCustomSearchBox';
+import { MeilisearchInput } from '~/client/components/ui/Meilisearch/MeilisearchInput/MeilisearchInput';
 
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 jest.spyOn(require('react-instantsearch'), 'useSearchBox');
 
-describe('MeilisearchCustomSearchBox Component', () => {
+describe('<MeilisearchInput/>', () => {
 	it('ne retourne pas de form', () => {
 		render(
-	  <MeilisearchCustomSearchBox
+	  <MeilisearchInput
 				label='Ville'
 				name="ville"
 				placeholder="Exemples : Paris, Toulouse"
@@ -28,7 +28,7 @@ describe('MeilisearchCustomSearchBox Component', () => {
 
 	it('contient un input associé à label', () => {
 		render(
-	  <MeilisearchCustomSearchBox
+	  <MeilisearchInput
 				label='Ville'
 				name="ville"
 				placeholder="Exemples : Paris, Toulouse"
@@ -42,7 +42,7 @@ describe('MeilisearchCustomSearchBox Component', () => {
 
 	it('ne contient pas de button reset quand le champ est vide', () => {
 		render(
-	  <MeilisearchCustomSearchBox
+	  <MeilisearchInput
 				label='Ville'
 				name="ville"
 				placeholder="Exemples : Paris, Toulouse"
@@ -56,7 +56,7 @@ describe('MeilisearchCustomSearchBox Component', () => {
 
 	it('contient un button reset quand le champ est rempli', async() => {
 		render(
-	  <MeilisearchCustomSearchBox
+	  <MeilisearchInput
 				label='Ville'
 				name="ville"
 				placeholder="Exemples : Paris, Toulouse"
@@ -72,7 +72,7 @@ describe('MeilisearchCustomSearchBox Component', () => {
 
 	it('rend le titre du bouton reset par défaut quand celui ci n‘est pas précisé', async () => {
 		render(
-	  <MeilisearchCustomSearchBox
+	  <MeilisearchInput
 				label='Ville'
 				name="ville"
 				placeholder="Exemples : Paris, Toulouse"
@@ -88,7 +88,7 @@ describe('MeilisearchCustomSearchBox Component', () => {
 
 	it('rend le titre du bouton reset passé en paramètre quand celui ci est précisé', async () => {
 		render(
-	  <MeilisearchCustomSearchBox
+	  <MeilisearchInput
 				label='Ville'
 				name="ville"
 				placeholder="Exemples : Paris, Toulouse"
diff --git a/src/client/components/ui/Meilisearch/MeilisearchCustomSearchBox.tsx b/src/client/components/ui/Meilisearch/MeilisearchInput/MeilisearchInput.tsx
similarity index 87%
rename from src/client/components/ui/Meilisearch/MeilisearchCustomSearchBox.tsx
rename to src/client/components/ui/Meilisearch/MeilisearchInput/MeilisearchInput.tsx
index 57339b382d..620d08f8a5 100644
--- a/src/client/components/ui/Meilisearch/MeilisearchCustomSearchBox.tsx
+++ b/src/client/components/ui/Meilisearch/MeilisearchInput/MeilisearchInput.tsx
@@ -11,9 +11,8 @@ import {
 } from 'react-instantsearch';
 import { v4 as uuidv4 } from 'uuid';
 
-import { Icon } from '~/client/components/ui/Icon/Icon';
-
-import styles from './MeilisearchCustomSearchBox.module.scss';
+import { Icon } from '../../Icon/Icon';
+import styles from './MeilisearchInput.module.scss';
 
 interface MeilisearchCustomSearchBoxProps extends Pick<React.HTMLAttributes<unknown>, 'className'> {
 	id?: string
@@ -23,7 +22,7 @@ interface MeilisearchCustomSearchBoxProps extends Pick<React.HTMLAttributes<unkn
 	resetTitle?: string
 }
 
-export const MeilisearchCustomSearchBox = (props: MeilisearchCustomSearchBoxProps & UseSearchBoxProps) => {
+export const MeilisearchInput = (props: MeilisearchCustomSearchBoxProps & UseSearchBoxProps) => {
 	const {
 		label,
 		name,
diff --git a/src/client/components/ui/Meilisearch/MeilisearchInputRefinement.module.scss b/src/client/components/ui/Meilisearch/MeilisearchInputRefinement.module.scss
deleted file mode 100644
index 4ea086d9b3..0000000000
--- a/src/client/components/ui/Meilisearch/MeilisearchInputRefinement.module.scss
+++ /dev/null
@@ -1,65 +0,0 @@
-@use "@styles/utilities-deprecated";
-@use "@styles/utilities";
-@use "@styles/components/form/variables";
-
-.suggestionList {
-  z-index: 15;
-  position: absolute;
-  padding: 8px;
-  border: 1px solid utilities-deprecated.$color-separator;
-  border-radius: 20px;
-  background-color: utilities-deprecated.$color-background;
-  margin: 4px 0 0 0;
-  max-height: 300px;
-  overflow-y: auto;
-  width: 100%;
-}
-
-.suggestionList > li {
-  padding-left: 0.5rem;
-  cursor: pointer;
-}
-
-.suggestionList > li:hover, .hover, .suggestionList > li[aria-selected=true] {
-  background-color: rgba(3, 15, 143, .05);
-}
-
-.suggestionList > li:first-letter {
-  text-transform: capitalize;
-}
-
-.aucunRésultat {
-  padding: 0.5rem;
-}
-
-.formInput {
-  position: relative;
-
-  & .label {
-    @extend %label-champ;
-  }
-}
-
-.formControl {
-  &Input {
-    @include utilities.text-interactive-medium;
-    display: flex;
-    align-items: center;
-    width: 100%;
-    height: 2.5rem;
-    padding: 0 16px;
-    border-radius: 1.25rem;
-    border: solid 1px utilities-deprecated.$color-on-background;
-    background-color: utilities-deprecated.$color-background;
-    margin-top: 0.5rem;
-
-    &:active, &:focus {
-      border-color: utilities-deprecated.$color-primary;
-    }
-
-    &::placeholder {
-      color: utilities-deprecated.$deep-neutral-grey;
-      opacity: 1;
-    }
-  }
-}
diff --git a/src/client/components/ui/Meilisearch/MeiliSearchCustomPagination.tsx b/src/client/components/ui/Meilisearch/MeilisearchPagination/MeiliSearchPagination.tsx
similarity index 81%
rename from src/client/components/ui/Meilisearch/MeiliSearchCustomPagination.tsx
rename to src/client/components/ui/Meilisearch/MeilisearchPagination/MeiliSearchPagination.tsx
index 7f3d90b827..4a279c9c3e 100644
--- a/src/client/components/ui/Meilisearch/MeiliSearchCustomPagination.tsx
+++ b/src/client/components/ui/Meilisearch/MeilisearchPagination/MeiliSearchPagination.tsx
@@ -5,14 +5,14 @@ import { usePagination } from 'react-instantsearch';
 import type { UsePaginationProps } from 'react-instantsearch-core/dist/es/connectors/usePagination';
 
 // NOTE (BRUJ 06/05/2024): Pour éviter les hydratation mismatch lié au usebreakpoint on désactive le srr sur des composants spécifiques cf https://nextjs.org/docs/messages/react-hydration-error#solution-2-disabling-ssr-on-specific-components
-const CommonPagination = dynamic(() => import('../Pagination/CommonPagination').then((mod) => mod.CommonPagination), { ssr: false });
+const CommonPagination = dynamic(() => import('../../Pagination/CommonPagination').then((mod) => mod.CommonPagination), { ssr: false });
 
-interface MeiliSearchCustomPaginationProps extends Pick<React.HTMLAttributes<unknown>, 'className'> {
+interface MeilisearchPaginationProps extends Pick<React.HTMLAttributes<unknown>, 'className'> {
   numberOfResultPerPage: number
   onPageChange: () => void
 }
 
-export function MeiliSearchCustomPagination(props: MeiliSearchCustomPaginationProps & UsePaginationProps) {
+export function MeiliSearchPagination(props: MeilisearchPaginationProps & UsePaginationProps) {
 	const { numberOfResultPerPage, onPageChange, className } = props;
 	const {
 		currentRefinement,
diff --git a/src/client/components/ui/Meilisearch/tests/MeilisearchCustomPagination.test.tsx b/src/client/components/ui/Meilisearch/MeilisearchPagination/MeilisearchPagination.test.tsx
similarity index 80%
rename from src/client/components/ui/Meilisearch/tests/MeilisearchCustomPagination.test.tsx
rename to src/client/components/ui/Meilisearch/MeilisearchPagination/MeilisearchPagination.test.tsx
index 0fad03e7cc..342e22638a 100644
--- a/src/client/components/ui/Meilisearch/tests/MeilisearchCustomPagination.test.tsx
+++ b/src/client/components/ui/Meilisearch/MeilisearchPagination/MeilisearchPagination.test.tsx
@@ -7,8 +7,8 @@ import { render, screen } from '@testing-library/react';
 import { userEvent } from '@testing-library/user-event';
 import React from 'react';
 
-import { MeiliSearchCustomPagination } from '~/client/components/ui/Meilisearch/MeiliSearchCustomPagination';
-import { mockUsePagination } from '~/client/components/ui/Meilisearch/tests/mockMeilisearchUseFunctions';
+import { MeiliSearchPagination } from '~/client/components/ui/Meilisearch/MeilisearchPagination/MeiliSearchPagination';
+import { mockUsePagination } from '~/client/components/ui/Meilisearch/mockMeilisearchUseFunctions';
 import { mockLargeScreen } from '~/client/components/window.mock';
 
 declare type CreateURL<TValue> = (value: TValue) => string;
@@ -26,7 +26,7 @@ const ALLER_A_LA_DERNIERE_PAGE = 'Aller à la dernière page';
 
 const mockFunctionScrollToTopOfListeDesResultats = jest.fn();
 
-describe('MeilisearchCustomPagination', () => {
+describe('<MeilisearchPagination/>', () => {
 	beforeEach(() => {
 		mockLargeScreen();
 	});
@@ -46,7 +46,7 @@ describe('MeilisearchCustomPagination', () => {
 				it('Revenir à la première page et Revenir à la page précédente doivent etre disable et Aller à la page suivante et Aller à la dernière page doivent etre enable', () => {
 					// WHEN
 					render(
-						<MeiliSearchCustomPagination numberOfResultPerPage={15} onPageChange={mockFunctionScrollToTopOfListeDesResultats} />,
+						<MeiliSearchPagination numberOfResultPerPage={15} onPageChange={mockFunctionScrollToTopOfListeDesResultats} />,
 					);
 					// THEN
 					expect(screen.getByRole('link', { name: REVENIR_A_LA_PREMIERE_PAGE }).getAttribute('aria-disabled')).toBe('true');
@@ -65,7 +65,7 @@ describe('MeilisearchCustomPagination', () => {
 				it('Revenir à la première page, Revenir à la page précédente, Aller à la page suivante, Aller à la dernière page doivent etre enable', async () => {
 					// WHEN
 					render(
-						<MeiliSearchCustomPagination numberOfResultPerPage={15} onPageChange={mockFunctionScrollToTopOfListeDesResultats} />,
+						<MeiliSearchPagination numberOfResultPerPage={15} onPageChange={mockFunctionScrollToTopOfListeDesResultats} />,
 					);
 					// THEN
 					expect(screen.getByRole('link', { name: REVENIR_A_LA_PREMIERE_PAGE }).getAttribute('aria-disabled')).toBe('false');
@@ -77,7 +77,7 @@ describe('MeilisearchCustomPagination', () => {
 				it('affiche "…" dans le document', async () => {
 					// WHEN
 					render(
-						<MeiliSearchCustomPagination numberOfResultPerPage={15} onPageChange={mockFunctionScrollToTopOfListeDesResultats} />,
+						<MeiliSearchPagination numberOfResultPerPage={15} onPageChange={mockFunctionScrollToTopOfListeDesResultats} />,
 					);
 					// THEN
 					expect(screen.getByText('…')).toBeInTheDocument();
@@ -93,7 +93,7 @@ describe('MeilisearchCustomPagination', () => {
 				it('n’affiche pas "…" dans le document', async () => {
 					// WHEN
 					render(
-						<MeiliSearchCustomPagination numberOfResultPerPage={15} onPageChange={mockFunctionScrollToTopOfListeDesResultats} />,
+						<MeiliSearchPagination numberOfResultPerPage={15} onPageChange={mockFunctionScrollToTopOfListeDesResultats} />,
 					);
 					// THEN
 					expect(screen.queryByText('…')).not.toBeInTheDocument();
@@ -109,7 +109,7 @@ describe('MeilisearchCustomPagination', () => {
 				it('n’affiche pas "…" dans le document', async () => {
 					// WHEN
 					render(
-						<MeiliSearchCustomPagination numberOfResultPerPage={15} onPageChange={mockFunctionScrollToTopOfListeDesResultats} />,
+						<MeiliSearchPagination numberOfResultPerPage={15} onPageChange={mockFunctionScrollToTopOfListeDesResultats} />,
 					);
 					// THEN
 					expect(screen.queryByText('…')).not.toBeInTheDocument();
@@ -125,7 +125,7 @@ describe('MeilisearchCustomPagination', () => {
 				it('Revenir à la première page, Revenir à la page précédente doivent etre enable et Aller à la page suivante, Aller à la dernière page doivent etre disable', async () => {
 					// WHEN
 					render(
-						<MeiliSearchCustomPagination numberOfResultPerPage={15} onPageChange={mockFunctionScrollToTopOfListeDesResultats} />,
+						<MeiliSearchPagination numberOfResultPerPage={15} onPageChange={mockFunctionScrollToTopOfListeDesResultats} />,
 					);
 					// THEN
 					expect(screen.getByRole('link', { name: REVENIR_A_LA_PREMIERE_PAGE }).getAttribute('aria-disabled')).toBe('false');
@@ -137,7 +137,7 @@ describe('MeilisearchCustomPagination', () => {
 				it('n’affiche pas "…" dans le document', async () => {
 					// WHEN
 					render(
-						<MeiliSearchCustomPagination numberOfResultPerPage={15} onPageChange={mockFunctionScrollToTopOfListeDesResultats} />,
+						<MeiliSearchPagination numberOfResultPerPage={15} onPageChange={mockFunctionScrollToTopOfListeDesResultats} />,
 					);
 					// THEN
 					expect(screen.queryByText('…')).not.toBeInTheDocument();
@@ -166,7 +166,7 @@ describe('MeilisearchCustomPagination', () => {
 			it('affiche une liste', () => {
 				// WHEN
 				render(
-					<MeiliSearchCustomPagination numberOfResultPerPage={15} onPageChange={mockFunctionScrollToTopOfListeDesResultats} />,
+					<MeiliSearchPagination numberOfResultPerPage={15} onPageChange={mockFunctionScrollToTopOfListeDesResultats} />,
 				);
 				// THEN
 				expect(screen.getByRole('list')).toBeInTheDocument();
@@ -175,7 +175,7 @@ describe('MeilisearchCustomPagination', () => {
 			it('affiche 2 (première page et précédent) + 4 (pages) + 2 (prochain et dernière page) éléments', () => {
 				// WHEN
 				render(
-					<MeiliSearchCustomPagination numberOfResultPerPage={15} onPageChange={mockFunctionScrollToTopOfListeDesResultats} />,
+					<MeiliSearchPagination numberOfResultPerPage={15} onPageChange={mockFunctionScrollToTopOfListeDesResultats} />,
 				);
 				// THEN
 				const pagination = screen.getByRole('list');
@@ -186,7 +186,7 @@ describe('MeilisearchCustomPagination', () => {
 			it('affiche 1, 2, 3 et 4 en lien dans les éléments de la liste', () => {
 				// WHEN
 				render(
-					<MeiliSearchCustomPagination numberOfResultPerPage={15} onPageChange={mockFunctionScrollToTopOfListeDesResultats} />,
+					<MeiliSearchPagination numberOfResultPerPage={15} onPageChange={mockFunctionScrollToTopOfListeDesResultats} />,
 				);
 				// THEN
 				expect(screen.getByRole('link', { current: false, name: '1' })).toBeInTheDocument();
@@ -199,7 +199,7 @@ describe('MeilisearchCustomPagination', () => {
 				// GIVEN
 				const user = userEvent.setup();
 				render(
-					<MeiliSearchCustomPagination numberOfResultPerPage={15}  onPageChange={mockFunctionScrollToTopOfListeDesResultats} />,
+					<MeiliSearchPagination numberOfResultPerPage={15} onPageChange={mockFunctionScrollToTopOfListeDesResultats} />,
 				);
 
 				const lien = screen.getByRole('link', { current: false, name: '1' });
@@ -215,7 +215,7 @@ describe('MeilisearchCustomPagination', () => {
 				// GIVEN
 				const user = userEvent.setup();
 				render(
-					<MeiliSearchCustomPagination numberOfResultPerPage={15} onPageChange={mockFunctionScrollToTopOfListeDesResultats} />,
+					<MeiliSearchPagination numberOfResultPerPage={15} onPageChange={mockFunctionScrollToTopOfListeDesResultats} />,
 				);
 				const lien = screen.getByRole('link', { name: REVENIR_A_LA_PREMIERE_PAGE });
 				// WHEN
@@ -229,7 +229,7 @@ describe('MeilisearchCustomPagination', () => {
 				// GIVEN
 				const user = userEvent.setup();
 				render(
-					<MeiliSearchCustomPagination numberOfResultPerPage={15} onPageChange={mockFunctionScrollToTopOfListeDesResultats} />,
+					<MeiliSearchPagination numberOfResultPerPage={15} onPageChange={mockFunctionScrollToTopOfListeDesResultats} />,
 				);
 				const lien = screen.getByRole('link', { current: false, name: '1' });
 				// WHEN
@@ -243,7 +243,7 @@ describe('MeilisearchCustomPagination', () => {
 				// GIVEN
 				const user = userEvent.setup();
 				render(
-					<MeiliSearchCustomPagination numberOfResultPerPage={15} onPageChange={mockFunctionScrollToTopOfListeDesResultats} />,
+					<MeiliSearchPagination numberOfResultPerPage={15} onPageChange={mockFunctionScrollToTopOfListeDesResultats} />,
 				);
 				const lien = screen.getByRole('link', { current: false, name: REVENIR_A_LA_PAGE_PRECEDENTE });
 				// WHEN
@@ -257,7 +257,7 @@ describe('MeilisearchCustomPagination', () => {
 				// GIVEN
 				const user = userEvent.setup();
 				render(
-					<MeiliSearchCustomPagination numberOfResultPerPage={15} onPageChange={mockFunctionScrollToTopOfListeDesResultats} />,
+					<MeiliSearchPagination numberOfResultPerPage={15} onPageChange={mockFunctionScrollToTopOfListeDesResultats} />,
 				);
 				const lien = screen.getByRole('link', { current: false, name: '2' });
 				// WHEN
@@ -271,7 +271,7 @@ describe('MeilisearchCustomPagination', () => {
 				// GIVEN
 				const user = userEvent.setup();
 				render(
-					<MeiliSearchCustomPagination numberOfResultPerPage={15} onPageChange={mockFunctionScrollToTopOfListeDesResultats} />,
+					<MeiliSearchPagination numberOfResultPerPage={15} onPageChange={mockFunctionScrollToTopOfListeDesResultats} />,
 				);
 				const lien = screen.getByRole('link', { current: false, name: ALLER_A_LA_PAGE_SUIVANTE });
 				// WHEN
@@ -285,7 +285,7 @@ describe('MeilisearchCustomPagination', () => {
 				// GIVEN
 				const user = userEvent.setup();
 				render(
-					<MeiliSearchCustomPagination numberOfResultPerPage={15} onPageChange={mockFunctionScrollToTopOfListeDesResultats} />,
+					<MeiliSearchPagination numberOfResultPerPage={15} onPageChange={mockFunctionScrollToTopOfListeDesResultats} />,
 				);
 				const lien = screen.getByRole('link', { current: false, name: ALLER_A_LA_PAGE_SUIVANTE });
 				// WHEN
@@ -317,7 +317,7 @@ describe('MeilisearchCustomPagination', () => {
 			it('n affiche pas la pagination', () => {
 				// WHEN
 				render(
-					<MeiliSearchCustomPagination numberOfResultPerPage={15} onPageChange={mockFunctionScrollToTopOfListeDesResultats} />,
+					<MeiliSearchPagination numberOfResultPerPage={15} onPageChange={mockFunctionScrollToTopOfListeDesResultats} />,
 				);
 				// THEN
 				expect(screen.queryByRole('list')).not.toBeInTheDocument();
@@ -345,7 +345,7 @@ describe('MeilisearchCustomPagination', () => {
 			it('n affiche pas la pagination', () => {
 				// WHEN
 				render(
-					<MeiliSearchCustomPagination numberOfResultPerPage={15} onPageChange={mockFunctionScrollToTopOfListeDesResultats} />,
+					<MeiliSearchPagination numberOfResultPerPage={15} onPageChange={mockFunctionScrollToTopOfListeDesResultats} />,
 				);
 				// THEN
 				expect(screen.queryByRole('list')).not.toBeInTheDocument();
diff --git a/src/client/components/ui/Meilisearch/tests/MeilisearchCustomRangeInput.test.tsx b/src/client/components/ui/Meilisearch/MeilisearchRange/MeilisearcRange.test.tsx
similarity index 96%
rename from src/client/components/ui/Meilisearch/tests/MeilisearchCustomRangeInput.test.tsx
rename to src/client/components/ui/Meilisearch/MeilisearchRange/MeilisearcRange.test.tsx
index 6fbd291f52..9110ce6ee2 100644
--- a/src/client/components/ui/Meilisearch/tests/MeilisearchCustomRangeInput.test.tsx
+++ b/src/client/components/ui/Meilisearch/MeilisearchRange/MeilisearcRange.test.tsx
@@ -11,10 +11,10 @@ import {
 import { userEvent } from '@testing-library/user-event';
 import React from 'react';
 
-import { MeilisearchCustomRangeInput } from '~/client/components/ui/Meilisearch/MeilisearchCustomRangeInput';
+import { MeilisearchRange } from '~/client/components/ui/Meilisearch/MeilisearchRange/MeilisearchRange';
 import {
 	mockUseRangeInput,
-} from '~/client/components/ui/Meilisearch/tests/mockMeilisearchUseFunctions';
+} from '~/client/components/ui/Meilisearch/mockMeilisearchUseFunctions';
 
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const spyOnUseRange = jest.spyOn(require('react-instantsearch'), 'useRange');
@@ -23,7 +23,7 @@ let refineMock: jest.Mock<string>;
 
 const renderMeilisearchCustomRangeInputComponent = () => {
 	render(
-		<MeilisearchCustomRangeInput
+		<MeilisearchRange
 			attribute='test'
 			label='test-label'
 			placeholder='test-placeholder'
@@ -34,7 +34,7 @@ const renderMeilisearchCustomRangeInputComponent = () => {
 	);
 };
 
-describe('MeilisearchCustomRangeInput', ()=> {
+describe('<MeilisearchRange/>', ()=> {
 	beforeEach(() => {
 		refineMock = jest.fn();
 		spyOnUseRange.mockImplementation(() => mockUseRangeInput({
diff --git a/src/client/components/ui/Meilisearch/MeilisearchCustomRangeInput.module.scss b/src/client/components/ui/Meilisearch/MeilisearchRange/MeilisearchRange.module.scss
similarity index 88%
rename from src/client/components/ui/Meilisearch/MeilisearchCustomRangeInput.module.scss
rename to src/client/components/ui/Meilisearch/MeilisearchRange/MeilisearchRange.module.scss
index 589e95e46f..4eeada8a05 100644
--- a/src/client/components/ui/Meilisearch/MeilisearchCustomRangeInput.module.scss
+++ b/src/client/components/ui/Meilisearch/MeilisearchRange/MeilisearchRange.module.scss
@@ -1,6 +1,6 @@
-@use "@styles/utilities-deprecated";
-@use "@styles/utilities";
-@use "@styles/components/form/variables";
+@use "../../../../../styles/utilities-deprecated";
+@use "../../../../../styles/utilities";
+@use "../../../../../styles/components/form/variables";
 
 .customRangeInputWrapper {
   display: inline-flex;
diff --git a/src/client/components/ui/Meilisearch/MeilisearchCustomRangeInput.tsx b/src/client/components/ui/Meilisearch/MeilisearchRange/MeilisearchRange.tsx
similarity index 89%
rename from src/client/components/ui/Meilisearch/MeilisearchCustomRangeInput.tsx
rename to src/client/components/ui/Meilisearch/MeilisearchRange/MeilisearchRange.tsx
index b30aef28db..2a43f3f7b6 100644
--- a/src/client/components/ui/Meilisearch/MeilisearchCustomRangeInput.tsx
+++ b/src/client/components/ui/Meilisearch/MeilisearchRange/MeilisearchRange.tsx
@@ -3,12 +3,12 @@ import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useRange, UseRangeProps } from 'react-instantsearch';
 import { v4 as uuidv4 } from 'uuid';
 
-import { KeyBoard } from '~/client/components/keyboard/keyboard.enum';
-import { ButtonComponent } from '~/client/components/ui/Button/ButtonComponent';
-import { Icon } from '~/client/components/ui/Icon/Icon';
-import styles from '~/client/components/ui/Meilisearch/MeilisearchCustomRangeInput.module.scss';
+import { KeyBoard } from '../../../keyboard/keyboard.enum';
+import { ButtonComponent } from '../../Button/ButtonComponent';
+import { Icon } from '../../Icon/Icon';
+import styles from './MeilisearchRange.module.scss';
 
-interface MeilisearchCustomRangeInputProps extends Pick<React.HTMLAttributes<unknown>, 'className'> {
+interface MeilisearchRangeProps extends Pick<React.HTMLAttributes<unknown>, 'className'> {
     label: string
     placeholder: string
     unite: string
@@ -17,7 +17,7 @@ interface MeilisearchCustomRangeInputProps extends Pick<React.HTMLAttributes<unk
 		'data-testid'?: string // FIXME (SULI 29-03-2024): a été ajouté pour faire passer des tests car pas de CSS inclus dans le JSDOM
 }
 
-export function MeilisearchCustomRangeInput(props: UseRangeProps & MeilisearchCustomRangeInputProps) {
+export function MeilisearchRange(props: UseRangeProps & MeilisearchRangeProps) {
 	const {
 		refine,
 		start,
diff --git a/src/client/components/ui/Meilisearch/MeilisearchCustomRangeInputForModal.module.scss b/src/client/components/ui/Meilisearch/MeilisearchRange/MeilisearchRangeForModal.module.scss
similarity index 86%
rename from src/client/components/ui/Meilisearch/MeilisearchCustomRangeInputForModal.module.scss
rename to src/client/components/ui/Meilisearch/MeilisearchRange/MeilisearchRangeForModal.module.scss
index 282637de08..e184dc1366 100644
--- a/src/client/components/ui/Meilisearch/MeilisearchCustomRangeInputForModal.module.scss
+++ b/src/client/components/ui/Meilisearch/MeilisearchRange/MeilisearchRangeForModal.module.scss
@@ -1,5 +1,5 @@
-@use "@styles/utilities-deprecated";
-@use "@styles/components/form/variables";
+@use "utilities-deprecated";
+@use "variables";
 
 .rangeBox {
   padding: .75rem 0;
diff --git a/src/client/components/ui/Meilisearch/tests/MeilisearchCustomRangeInputForModal.test.tsx b/src/client/components/ui/Meilisearch/MeilisearchRange/MeilisearchRangeForModal.test.tsx
similarity index 93%
rename from src/client/components/ui/Meilisearch/tests/MeilisearchCustomRangeInputForModal.test.tsx
rename to src/client/components/ui/Meilisearch/MeilisearchRange/MeilisearchRangeForModal.test.tsx
index 7e631cde95..6a02db7fa2 100644
--- a/src/client/components/ui/Meilisearch/tests/MeilisearchCustomRangeInputForModal.test.tsx
+++ b/src/client/components/ui/Meilisearch/MeilisearchRange/MeilisearchRangeForModal.test.tsx
@@ -10,10 +10,10 @@ import {
 import { userEvent } from '@testing-library/user-event';
 import React from 'react';
 
-import { MeilisearchCustomRangeInputForModal } from '~/client/components/ui/Meilisearch/MeilisearchCustomRangeInputForModal';
+import { MeilisearchRangeForModal } from '~/client/components/ui/Meilisearch/MeilisearchRange/MeilisearchRangeForModal';
 import {
 	mockUseRangeInput,
-} from '~/client/components/ui/Meilisearch/tests/mockMeilisearchUseFunctions';
+} from '~/client/components/ui/Meilisearch/mockMeilisearchUseFunctions';
 
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const spyOnUseRange = jest.spyOn(require('react-instantsearch'), 'useRange');
@@ -22,7 +22,7 @@ let refineMock: jest.Mock<string>;
 
 const renderMeilisearchCustomRangeInputForModalComponent = () => {
 	render(
-		<MeilisearchCustomRangeInputForModal
+		<MeilisearchRangeForModal
 	  attribute='test'
 	  unite='test-unité'
 	  min={20}
diff --git a/src/client/components/ui/Meilisearch/MeilisearchCustomRangeInputForModal.tsx b/src/client/components/ui/Meilisearch/MeilisearchRange/MeilisearchRangeForModal.tsx
similarity index 88%
rename from src/client/components/ui/Meilisearch/MeilisearchCustomRangeInputForModal.tsx
rename to src/client/components/ui/Meilisearch/MeilisearchRange/MeilisearchRangeForModal.tsx
index 61300faa53..1f79f3488e 100644
--- a/src/client/components/ui/Meilisearch/MeilisearchCustomRangeInputForModal.tsx
+++ b/src/client/components/ui/Meilisearch/MeilisearchRange/MeilisearchRangeForModal.tsx
@@ -8,15 +8,15 @@ import React, {
 import { useRange, UseRangeProps } from 'react-instantsearch';
 import { v4 as uuidv4 } from 'uuid';
 
-import styles from '~/client/components/ui/Meilisearch/MeilisearchCustomRangeInputForModal.module.scss';
+import styles from './MeilisearchRangeForModal.module.scss';
 
-interface MeilisearchCustomRangeInputForModalProps {
+interface MeilisearchRangeForModalProps {
   unite: string
   min: number
   max: number
 }
 
-export function MeilisearchCustomRangeInputForModal(props: UseRangeProps & MeilisearchCustomRangeInputForModalProps) {
+export function MeilisearchRangeForModal(props: UseRangeProps & MeilisearchRangeForModalProps) {
 	const {
 		refine,
 		start,
diff --git a/src/client/components/ui/Meilisearch/MeilisearchSelectMultiple/MeilisearchSelectMultiple.test.tsx b/src/client/components/ui/Meilisearch/MeilisearchSelectMultiple/MeilisearchSelectMultiple.test.tsx
index 9fd8b039c2..88d9388110 100644
--- a/src/client/components/ui/Meilisearch/MeilisearchSelectMultiple/MeilisearchSelectMultiple.test.tsx
+++ b/src/client/components/ui/Meilisearch/MeilisearchSelectMultiple/MeilisearchSelectMultiple.test.tsx
@@ -11,7 +11,7 @@ import { MeilisearchSelectMultiple } from '~/client/components/ui/Meilisearch/Me
 import {
 	generateRefinementListItem,
 	mockUseRefinementList,
-} from '~/client/components/ui/Meilisearch/tests/mockMeilisearchUseFunctions';
+} from '~/client/components/ui/Meilisearch/mockMeilisearchUseFunctions';
 import { mockScrollIntoView } from '~/client/components/window.mock';
 
 // eslint-disable-next-line @typescript-eslint/no-var-requires
diff --git a/src/client/components/ui/Meilisearch/MeilisearchCustomCurrentRefinements.module.scss b/src/client/components/ui/Meilisearch/MeilisearchTagsList/MeilisearchTagsList.module.scss
similarity index 100%
rename from src/client/components/ui/Meilisearch/MeilisearchCustomCurrentRefinements.module.scss
rename to src/client/components/ui/Meilisearch/MeilisearchTagsList/MeilisearchTagsList.module.scss
diff --git a/src/client/components/ui/Meilisearch/tests/MeilisearchCustomCurrentRefinements.test.tsx b/src/client/components/ui/Meilisearch/MeilisearchTagsList/MeilisearchTagsList.test.tsx
similarity index 85%
rename from src/client/components/ui/Meilisearch/tests/MeilisearchCustomCurrentRefinements.test.tsx
rename to src/client/components/ui/Meilisearch/MeilisearchTagsList/MeilisearchTagsList.test.tsx
index 06956710a8..897c37cced 100644
--- a/src/client/components/ui/Meilisearch/tests/MeilisearchCustomCurrentRefinements.test.tsx
+++ b/src/client/components/ui/Meilisearch/MeilisearchTagsList/MeilisearchTagsList.test.tsx
@@ -9,26 +9,26 @@ import {
 } from '@testing-library/react';
 import { userEvent } from '@testing-library/user-event';
 
-import MeilisearchCustomCurrentRefinements from '~/client/components/ui/Meilisearch/MeilisearchCustomCurrentRefinements';
+import MeilisearchTagsList from '~/client/components/ui/Meilisearch/MeilisearchTagsList/MeilisearchTagsList';
 import {
 	aDisjunctiveImmeubleItemRefinement,
 	aTypeBienItem,
 	mockUseCurrentRefinements,
-} from '~/client/components/ui/Meilisearch/tests/mockMeilisearchUseFunctions';
+} from '~/client/components/ui/Meilisearch/mockMeilisearchUseFunctions';
 
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const spyOnUseCurrentRefinements = jest.spyOn(require('react-instantsearch'), 'useCurrentRefinements');
 
 let refineMock: jest.Mock<string>;
 
-describe('MeilisearchCustomCurrentRefinements', () => {
+describe('MeilisearchTagsList', () => {
 	describe('quand il n‘y a pas d‘étiquettes à afficher', () => {
 		it('ne retourne pas de liste', () => {
 		  spyOnUseCurrentRefinements.mockImplementation(() => mockUseCurrentRefinements({
 				items: [],
 				refine: refineMock,
 		  }));
-		  render(<MeilisearchCustomCurrentRefinements/>);
+		  render(<MeilisearchTagsList/>);
 		  const currentRefinements = screen.queryByRole('list');
 
 		  expect(currentRefinements).not.toBeInTheDocument();
@@ -40,7 +40,7 @@ describe('MeilisearchCustomCurrentRefinements', () => {
 	  spyOnUseCurrentRefinements.mockImplementation(() => mockUseCurrentRefinements({
 				items: [aTypeBienItem()],
 	  }));
-	  render(<MeilisearchCustomCurrentRefinements/>);
+	  render(<MeilisearchTagsList/>);
 	  const currentRefinements = screen.getByRole('list');
 
 	  expect(currentRefinements).toBeInTheDocument();
@@ -55,7 +55,7 @@ describe('MeilisearchCustomCurrentRefinements', () => {
 			spyOnUseCurrentRefinements.mockImplementation(() => mockUseCurrentRefinements({
 		  items: [aTypeBienItem()],
 			}));
-			render(<MeilisearchCustomCurrentRefinements/>);
+			render(<MeilisearchTagsList/>);
 			const currentRefinements = screen.getByRole('list');
 
 			expect(currentRefinements).toBeInTheDocument();
@@ -73,7 +73,7 @@ describe('MeilisearchCustomCurrentRefinements', () => {
 		  refine: refineMock,
 			}));
 			const user = userEvent.setup();
-			render(<MeilisearchCustomCurrentRefinements/>);
+			render(<MeilisearchTagsList/>);
 			const currentRefinements = screen.getByRole('list');
 
 			expect(currentRefinements).toBeInTheDocument();
diff --git a/src/client/components/ui/Meilisearch/MeilisearchCustomCurrentRefinements.tsx b/src/client/components/ui/Meilisearch/MeilisearchTagsList/MeilisearchTagsList.tsx
similarity index 67%
rename from src/client/components/ui/Meilisearch/MeilisearchCustomCurrentRefinements.tsx
rename to src/client/components/ui/Meilisearch/MeilisearchTagsList/MeilisearchTagsList.tsx
index 266d364324..4a454c15a9 100644
--- a/src/client/components/ui/Meilisearch/MeilisearchCustomCurrentRefinements.tsx
+++ b/src/client/components/ui/Meilisearch/MeilisearchTagsList/MeilisearchTagsList.tsx
@@ -1,16 +1,13 @@
 import React from 'react';
-import {
-	useCurrentRefinements,
-	UseCurrentRefinementsProps,
-} from 'react-instantsearch';
+import { useCurrentRefinements, UseCurrentRefinementsProps } from 'react-instantsearch';
 
 import { Icon } from '~/client/components/ui/Icon/Icon';
-import { getCapitalizedItems } from '~/client/components/ui/Meilisearch/getCapitalizedItems';
 import { Tag } from '~/client/components/ui/Tag/Tag';
 
-import styles from './MeilisearchCustomCurrentRefinements.module.scss';
+import { getCapitalizedItems } from '../getCapitalizedItems';
+import styles from './MeilisearchTagsList.module.scss';
 
-export default function MeilisearchCustomCurrentRefinements(props: UseCurrentRefinementsProps) {
+export default function MeilisearchTagsList(props: UseCurrentRefinementsProps) {
 	const { items, refine } = useCurrentRefinements(props);
 	const isItemListEmpty = items.length === 0;
 
diff --git a/src/client/components/ui/Meilisearch/tests/mockMeilisearchUseFunctions.ts b/src/client/components/ui/Meilisearch/mockMeilisearchUseFunctions.ts
similarity index 100%
rename from src/client/components/ui/Meilisearch/tests/mockMeilisearchUseFunctions.ts
rename to src/client/components/ui/Meilisearch/mockMeilisearchUseFunctions.ts
diff --git a/src/pages/decouvrir-les-metiers/index.page.tsx b/src/pages/decouvrir-les-metiers/index.page.tsx
index 81d6f32d2c..785482af9b 100644
--- a/src/pages/decouvrir-les-metiers/index.page.tsx
+++ b/src/pages/decouvrir-les-metiers/index.page.tsx
@@ -8,8 +8,8 @@ import { Head } from '~/client/components/head/Head';
 import { Container } from '~/client/components/layouts/Container/Container';
 import { InstantSearchLayout } from '~/client/components/layouts/InstantSearch/InstantSearchLayout';
 import { EnTete } from '~/client/components/ui/EnTete/EnTete';
-import MeilisearchCustomCurrentRefinements
-	from '~/client/components/ui/Meilisearch/MeilisearchCustomCurrentRefinements';
+import MeilisearchTagsList
+	from '~/client/components/ui/Meilisearch/MeilisearchTagsList/MeilisearchTagsList';
 import useAnalytics from '~/client/hooks/useAnalytics';
 import analytics from '~/pages/decouvrir-les-metiers/index.analytics';
 import styles from '~/pages/decouvrir-les-metiers/index.module.scss';
@@ -37,7 +37,7 @@ export default function RechercherFicheMetierPage() {
 				messageResultatRechercheLabelPluriel="fiches métier"
 				nombreDeSkeleton={2}
 				resultatDeRecherche={RésultatRechercherMétier}
-				tagList={<MeilisearchCustomCurrentRefinements />}
+				tagList={<MeilisearchTagsList />}
 				isAffichageListeDeResultatsDesktopDirectionRow
 			/>
 			<EnTete heading="Découvrez des services faits pour vous" />
diff --git a/src/pages/evenements/index.page.tsx b/src/pages/evenements/index.page.tsx
index 516b546a23..017f2503c2 100644
--- a/src/pages/evenements/index.page.tsx
+++ b/src/pages/evenements/index.page.tsx
@@ -5,8 +5,8 @@ import { RésultatRechercherEvenement } from '~/client/components/features/Evene
 import { Head } from '~/client/components/head/Head';
 import { InstantSearchLayout } from '~/client/components/layouts/InstantSearch/InstantSearchLayout';
 import { HeroWithButtonLink } from '~/client/components/ui/Hero/HeroWithButtonLink';
-import MeilisearchCustomCurrentRefinements
-	from '~/client/components/ui/Meilisearch/MeilisearchCustomCurrentRefinements';
+import MeilisearchTagsList
+	from '~/client/components/ui/Meilisearch/MeilisearchTagsList/MeilisearchTagsList';
 import useAnalytics from '~/client/hooks/useAnalytics';
 import analytics from '~/pages/evenements/index.analytics';
 
@@ -56,7 +56,7 @@ export default function PageEvenements() {
 					messageResultatRechercheLabelPluriel="évènements"
 					nombreDeSkeleton={2}
 					resultatDeRecherche={RésultatRechercherEvenement}
-					tagList={<MeilisearchCustomCurrentRefinements />}
+					tagList={<MeilisearchTagsList />}
 					isAffichageListeDeResultatsDesktopDirectionRow
 				/>
 			</>
diff --git a/src/pages/logements/annonces/index.page.tsx b/src/pages/logements/annonces/index.page.tsx
index f4fc88526f..72c34c1d63 100644
--- a/src/pages/logements/annonces/index.page.tsx
+++ b/src/pages/logements/annonces/index.page.tsx
@@ -11,8 +11,8 @@ import {
 import { Head } from '~/client/components/head/Head';
 import ErrorUnavailableService from '~/client/components/layouts/Error/ErrorUnavailableService';
 import { InstantSearchLayout } from '~/client/components/layouts/InstantSearch/InstantSearchLayout';
-import MeilisearchCustomCurrentRefinements
-	from '~/client/components/ui/Meilisearch/MeilisearchCustomCurrentRefinements';
+import MeilisearchTagsList
+	from '~/client/components/ui/Meilisearch/MeilisearchTagsList/MeilisearchTagsList';
 import useAnalytics from '~/client/hooks/useAnalytics';
 import { transformerMeilisearchLogementsItems } from '~/client/utils/transformerMeilisearchLogementsItems.utils';
 import analytics from '~/pages/logements/annonces/index.analytics';
@@ -47,7 +47,7 @@ export default function AnnoncesPage() {
 				messageResultatRechercheLabelPluriel="annonces pour étudiants"
 				nombreDeSkeleton={3}
 				resultatDeRecherche={AnnonceDeLogement}
-				tagList={<MeilisearchCustomCurrentRefinements transformItems={transformItems} />}
+				tagList={<MeilisearchTagsList transformItems={transformItems} />}
 				isAffichageListeDeResultatsDesktopDirectionRow={false}
 			/>
 		</>
diff --git a/src/pages/stages/index.page.tsx b/src/pages/stages/index.page.tsx
index bd4741a32f..2fc5d1b105 100644
--- a/src/pages/stages/index.page.tsx
+++ b/src/pages/stages/index.page.tsx
@@ -6,8 +6,8 @@ import {
 import { OffreDeStage } from '~/client/components/features/OffreDeStage/OffreDeStage';
 import { Head } from '~/client/components/head/Head';
 import { InstantSearchLayout } from '~/client/components/layouts/InstantSearch/InstantSearchLayout';
-import MeilisearchCustomCurrentRefinements
-	from '~/client/components/ui/Meilisearch/MeilisearchCustomCurrentRefinements';
+import MeilisearchTagsList
+	from '~/client/components/ui/Meilisearch/MeilisearchTagsList/MeilisearchTagsList';
 import useAnalytics from '~/client/hooks/useAnalytics';
 import analytics from '~/pages/stages/index.analytics';
 
@@ -34,7 +34,7 @@ export default function RechercherOffreStagePage() {
 				messageResultatRechercheLabelPluriel="offres de stage"
 				nombreDeSkeleton={2}
 				resultatDeRecherche={OffreDeStage}
-				tagList={<MeilisearchCustomCurrentRefinements />}
+				tagList={<MeilisearchTagsList />}
 				isAffichageListeDeResultatsDesktopDirectionRow
 			/>
 		</>

From de2ebe96d9771177203d0cd5c43e79836fde656d Mon Sep 17 00:00:00 2001
From: julie BRUNETTO <julie.brunetto@octo.com>
Date: Tue, 9 Jul 2024 14:13:22 +0200
Subject: [PATCH 4/6] refactor(meilisearch): fix import utilities

---
 .../MeilisearchRange/MeilisearchRangeForModal.module.scss     | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/client/components/ui/Meilisearch/MeilisearchRange/MeilisearchRangeForModal.module.scss b/src/client/components/ui/Meilisearch/MeilisearchRange/MeilisearchRangeForModal.module.scss
index e184dc1366..282637de08 100644
--- a/src/client/components/ui/Meilisearch/MeilisearchRange/MeilisearchRangeForModal.module.scss
+++ b/src/client/components/ui/Meilisearch/MeilisearchRange/MeilisearchRangeForModal.module.scss
@@ -1,5 +1,5 @@
-@use "utilities-deprecated";
-@use "variables";
+@use "@styles/utilities-deprecated";
+@use "@styles/components/form/variables";
 
 .rangeBox {
   padding: .75rem 0;

From 8af996fe4d43a84a163d05366bf5152615ce71b2 Mon Sep 17 00:00:00 2001
From: julie BRUNETTO <julie.brunetto@octo.com>
Date: Tue, 9 Jul 2024 14:55:43 +0200
Subject: [PATCH 5/6] refactor(meilisearch): fix test e2e

---
 cypress/e2e/stage.cy.ts                       |  3 +-
 .../MeilisearchSelectMultiple.test.tsx        | 30 +++++++++++++++----
 .../MeilisearchSelectMultiple.tsx             |  4 ++-
 3 files changed, 29 insertions(+), 8 deletions(-)

diff --git a/cypress/e2e/stage.cy.ts b/cypress/e2e/stage.cy.ts
index d750302228..aa499dc39d 100644
--- a/cypress/e2e/stage.cy.ts
+++ b/cypress/e2e/stage.cy.ts
@@ -15,8 +15,7 @@ describe('Recherche de stages', () => {
 				cy.intercept({ pathname: '/multi-search' }, stageNonFiltreeResponse).as('facets');
 				cy.wait('@facets');
 
-				// FIXME (GAFI 06-11-2023): Devrait être role combobox
-				cy.findByRole('button', { name: /Domaines/i }).click();
+				cy.findByRole('combobox', { name: /Domaines/i }).click();
 
 				cy.findAllByRole('option').first().should('contain.text', 'Achats');
 				cy.findAllByRole('option').eq(1).should('contain.text', 'Production');
diff --git a/src/client/components/ui/Meilisearch/MeilisearchSelectMultiple/MeilisearchSelectMultiple.test.tsx b/src/client/components/ui/Meilisearch/MeilisearchSelectMultiple/MeilisearchSelectMultiple.test.tsx
index 88d9388110..352f0f17a0 100644
--- a/src/client/components/ui/Meilisearch/MeilisearchSelectMultiple/MeilisearchSelectMultiple.test.tsx
+++ b/src/client/components/ui/Meilisearch/MeilisearchSelectMultiple/MeilisearchSelectMultiple.test.tsx
@@ -7,7 +7,9 @@ import { render, screen } from '@testing-library/react';
 import { userEvent } from '@testing-library/user-event';
 import React from 'react';
 
-import { MeilisearchSelectMultiple } from '~/client/components/ui/Meilisearch/MeilisearchSelectMultiple/MeilisearchSelectMultiple';
+import {
+	MeilisearchSelectMultiple,
+} from '~/client/components/ui/Meilisearch/MeilisearchSelectMultiple/MeilisearchSelectMultiple';
 import {
 	generateRefinementListItem,
 	mockUseRefinementList,
@@ -29,6 +31,24 @@ describe('MeilisearchSelectMultiple', () => {
 		expect(select).toBeVisible();
 	});
 
+	it('le label des options débute par une majuscule', async () => {
+		const user = userEvent.setup();
+		spyed.mockImplementation(() => mockUseRefinementList({
+			items: [
+				generateRefinementListItem({ label: 'audit', value: 'auditeur' }),
+				generateRefinementListItem({ label: 'dev', value: 'developpeur' }),
+			],
+			refine: jest.fn(),
+		}));
+
+		render(<MeilisearchSelectMultiple attribute="test" label="test"/>);
+
+		await user.click(screen.getByRole('combobox', { name: 'test' }));
+
+		expect(screen.getByRole('option', { name: 'Audit' })).toBeVisible();
+		expect(screen.getByRole('option', { name: 'Dev' })).toBeVisible();
+	});
+
 	it('lorsque l‘utilisateur selectionne une option, refine est appelé avec l‘option selectionnée', async () => {
 		const user = userEvent.setup();
 		const refine = jest.fn();
@@ -43,7 +63,7 @@ describe('MeilisearchSelectMultiple', () => {
 		render(<MeilisearchSelectMultiple attribute="test" label="test"/>);
 
 		await user.click(screen.getByRole('combobox', { name: 'test' }));
-		await user.click(screen.getByRole('option', { name: 'audit' }));
+		await user.click(screen.getByRole('option', { name: 'Audit' }));
 
 		expect(refine).toHaveBeenCalledTimes(1);
 		expect(refine).toHaveBeenCalledWith('auditeur');
@@ -62,8 +82,8 @@ describe('MeilisearchSelectMultiple', () => {
 
 		render(<MeilisearchSelectMultiple attribute="test" label="test"/>);
 
-		expect(screen.getByRole('option', { hidden: true, name: 'audit' })).toHaveAttribute('aria-selected', 'true');
-		expect(screen.getByRole('option', { hidden: true, name: 'dev' })).toHaveAttribute('aria-selected', 'true');
-		expect(screen.getByRole('option', { hidden: true, name: 'cuisinier' })).toHaveAttribute('aria-selected', 'false');
+		expect(screen.getByRole('option', { hidden: true, name: 'Audit' })).toHaveAttribute('aria-selected', 'true');
+		expect(screen.getByRole('option', { hidden: true, name: 'Dev' })).toHaveAttribute('aria-selected', 'true');
+		expect(screen.getByRole('option', { hidden: true, name: 'Cuisinier' })).toHaveAttribute('aria-selected', 'false');
 	});
 });
diff --git a/src/client/components/ui/Meilisearch/MeilisearchSelectMultiple/MeilisearchSelectMultiple.tsx b/src/client/components/ui/Meilisearch/MeilisearchSelectMultiple/MeilisearchSelectMultiple.tsx
index 1920ee7039..12f89c3a25 100644
--- a/src/client/components/ui/Meilisearch/MeilisearchSelectMultiple/MeilisearchSelectMultiple.tsx
+++ b/src/client/components/ui/Meilisearch/MeilisearchSelectMultiple/MeilisearchSelectMultiple.tsx
@@ -1,6 +1,8 @@
 import React, { useMemo } from 'react';
 import { useRefinementList, UseRefinementListProps } from 'react-instantsearch';
 
+import { getCapitalizedItems } from '~/client/components/ui/Meilisearch/getCapitalizedItems';
+
 import { OptionSelect, Select } from '../../Form/Select/Select';
 
 // TODO (BRUJ 08/07/2024): A supprimer le Omit lors du passage des options en composition
@@ -12,7 +14,7 @@ export function MeilisearchSelectMultiple(props: UseRefinementListProps & Meilis
 
 	// TODO (BRUJ 08/07/2024): A supprimer lors du passage des options en composition
 	const optionsList: Array<OptionSelect> = items.map((item) => ({
-		libellé: item.label,
+		libellé: getCapitalizedItems(item.label),
 		valeur: item.value,
 	}));
 

From e65659bca40b74e7460cf92e6e055d437387eefd Mon Sep 17 00:00:00 2001
From: julie BRUNETTO <julie.brunetto@octo.com>
Date: Wed, 10 Jul 2024 17:25:37 +0200
Subject: [PATCH 6/6] feat(select): retour review

---
 .../MeilisearchInput.module.scss              |  6 ++---
 .../MeilisearchRange.module.scss              |  6 ++---
 .../MeilisearchSelectMultiple.tsx             | 24 ++++++++++---------
 .../MessageResultatRecherche.module.scss      |  2 +-
 4 files changed, 20 insertions(+), 18 deletions(-)

diff --git a/src/client/components/ui/Meilisearch/MeilisearchInput/MeilisearchInput.module.scss b/src/client/components/ui/Meilisearch/MeilisearchInput/MeilisearchInput.module.scss
index ff91c8086d..2296b371c0 100644
--- a/src/client/components/ui/Meilisearch/MeilisearchInput/MeilisearchInput.module.scss
+++ b/src/client/components/ui/Meilisearch/MeilisearchInput/MeilisearchInput.module.scss
@@ -1,6 +1,6 @@
-@use "../../../../../styles/utilities-deprecated";
-@use "../../../../../styles/utilities";
-@use "../../../../../styles/components/form/variables";
+@use "@styles/utilities-deprecated";
+@use "@styles/utilities";
+@use "@styles/components/form/variables";
 
 .label {
   @extend %label-champ;
diff --git a/src/client/components/ui/Meilisearch/MeilisearchRange/MeilisearchRange.module.scss b/src/client/components/ui/Meilisearch/MeilisearchRange/MeilisearchRange.module.scss
index 4eeada8a05..589e95e46f 100644
--- a/src/client/components/ui/Meilisearch/MeilisearchRange/MeilisearchRange.module.scss
+++ b/src/client/components/ui/Meilisearch/MeilisearchRange/MeilisearchRange.module.scss
@@ -1,6 +1,6 @@
-@use "../../../../../styles/utilities-deprecated";
-@use "../../../../../styles/utilities";
-@use "../../../../../styles/components/form/variables";
+@use "@styles/utilities-deprecated";
+@use "@styles/utilities";
+@use "@styles/components/form/variables";
 
 .customRangeInputWrapper {
   display: inline-flex;
diff --git a/src/client/components/ui/Meilisearch/MeilisearchSelectMultiple/MeilisearchSelectMultiple.tsx b/src/client/components/ui/Meilisearch/MeilisearchSelectMultiple/MeilisearchSelectMultiple.tsx
index 12f89c3a25..6d52ef32fb 100644
--- a/src/client/components/ui/Meilisearch/MeilisearchSelectMultiple/MeilisearchSelectMultiple.tsx
+++ b/src/client/components/ui/Meilisearch/MeilisearchSelectMultiple/MeilisearchSelectMultiple.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { useRefinementList, UseRefinementListProps } from 'react-instantsearch';
 
 import { getCapitalizedItems } from '~/client/components/ui/Meilisearch/getCapitalizedItems';
@@ -13,23 +13,25 @@ export function MeilisearchSelectMultiple(props: UseRefinementListProps & Meilis
 	const { label, className } = props;
 
 	// TODO (BRUJ 08/07/2024): A supprimer lors du passage des options en composition
-	const optionsList: Array<OptionSelect> = items.map((item) => ({
-		libellé: getCapitalizedItems(item.label),
-		valeur: item.value,
-	}));
+	const optionsList: Array<OptionSelect> = useMemo(() => {
+		return items.map((item) => ({
+			libellé: getCapitalizedItems(item.label),
+			valeur: item.value,
+		}));
+	}, [items]);
 
 	const valuesSelected = useMemo(() => {
 		return items.filter((item) => item.isRefined)
 			.map((item) => item.value);
 	}, [items]);
 
-
-	function onOptionSelected(option: HTMLElement) {
-		const value = option.getAttribute('data-value') ?? '';
-		value && refine(value);
-	}
+	const onOptionSelected = useCallback((option: HTMLElement) => {
+		const value = option.getAttribute('data-value');
+		if (value) refine(value);
+	}, [refine]);
 
 	return (
-		<Select className={className} label={label} optionList={optionsList} multiple onChange={onOptionSelected} value={valuesSelected}/>
+		<Select className={className} label={label} optionList={optionsList} multiple onChange={onOptionSelected}
+			value={valuesSelected}/>
 	);
 }
diff --git a/src/client/components/ui/Meilisearch/MessageResultatRecherche/MessageResultatRecherche.module.scss b/src/client/components/ui/Meilisearch/MessageResultatRecherche/MessageResultatRecherche.module.scss
index dfb5111042..dfcaf83690 100644
--- a/src/client/components/ui/Meilisearch/MessageResultatRecherche/MessageResultatRecherche.module.scss
+++ b/src/client/components/ui/Meilisearch/MessageResultatRecherche/MessageResultatRecherche.module.scss
@@ -1,4 +1,4 @@
-@use "../../../../../styles/utilities";
+@use "@styles/utilities";
 
 .stats {
   @include utilities.text-large;