feat(UI): passer le select en composition (#3204)

DNUM-SocialGouv · Jul 26, 2024 · c575388 · c575388
1 parent 73c8b55
commit c575388
Show file tree

Hide file tree

Showing 8 changed files with 164 additions and 100 deletions.
diff --git a/src/client/components/ui/Form/Select/Select.module.scss b/src/client/components/ui/Form/Select/Select.module.scss
@@ -34,7 +34,7 @@ $border-width: inputStyles.$border-width;
   position: relative;
   border-radius: $border-radius;
 
-  & .combobox {
+  & [role="combobox"] {
     cursor: pointer;
     @extend %outlined;
     @include utilities.text-interactive-medium;
@@ -44,9 +44,14 @@ $border-width: inputStyles.$border-width;
     border-radius: $border-radius;
     padding: 0.5rem 1rem;
     background-color: transparent;
+
+    &[aria-expanded="true"] svg {
+      transform: rotate(-180deg);
+      transition: transform 200ms linear;
+    }
   }
 
-  input:invalid + .combobox[data-touched="true"] {
+  input:invalid + [role="combobox"][data-touched="true"] {
     border-color: $color-error;
     border-width: $error-border-width;
   }
@@ -63,42 +68,44 @@ $border-width: inputStyles.$border-width;
     max-height: 10em;
     overflow-y: scroll;
 
-    & li {
+    li[role="option"] {
       display: grid;
       grid-template-columns: auto 1fr;
       align-items: center;
       padding: .5rem 1ch;
+      cursor: pointer;
 
-      &[role="option"] {
-        cursor: pointer;
+      &:hover,
+      &.optionVisuallyFocus {
+        background-color: $color-option-hover;
+        font-weight: bold;
       }
+    }
 
-      &.optionComboboxSimple::before {
+    &:not([aria-multiselectable="true"]) {
+      li[role="option"]::before {
         @extend %radio;
         margin-right: 0.5rem;
       }
 
-      &[role="option"][aria-selected="true"].optionComboboxSimple::before {
+      li[role="option"][aria-selected="true"]::before {
         @extend %radio-checked;
       }
+    }
 
-      &.optionComboboxMultiple::before {
+
+    &[aria-multiselectable="true"] {
+      li[role="option"]::before {
         @extend %checkbox;
       }
 
-      &[role="option"][aria-selected="true"].optionComboboxMultiple::before {
+      li[role="option"][aria-selected="true"]::before {
         @extend %checkbox-checked;
       }
-
-      &[role="option"]:hover,
-      &[role="option"].optionVisuallyFocus {
-        background-color: $color-option-hover;
-        font-weight: bold;
-      }
     }
   }
 
-  & .inputHiddenValue {
+  & input[aria-hidden="true"] {
     position: absolute;
     pointer-events: none;
     opacity: 0;

diff --git a/src/client/components/ui/Form/Select/Select.test.tsx b/src/client/components/ui/Form/Select/Select.test.tsx
@@ -9,6 +9,7 @@ import React, { FormEvent } from 'react';
 
 import { KeyBoard } from '~/client/components/keyboard.fixture';
 import { Select } from '~/client/components/ui/Form/Select/Select';
+import { SelectSimple } from '~/client/components/ui/Form/Select/SelectSimple';
 import { mockScrollIntoView } from '~/client/components/window.mock';
 
 const SELECT_SIMPLE_LABEL_DEFAULT_OPTION = 'Sélectionnez votre choix';
@@ -1673,6 +1674,26 @@ describe('<Select />', () => {
 			});
 		});
 	});
+
+	describe('SelectOption', () => {
+		it('accepte un id et le passe à l‘option', () => {
+			render(<SelectSimple labelledBy={'id'}>
+				<SelectSimple.Option value="1" id="id1">option 1</SelectSimple.Option>
+				<SelectSimple.Option value="2">option 2</SelectSimple.Option>
+			</SelectSimple>);
+
+			expect(screen.getByRole('option', { hidden: true, name:'option 1' })).toHaveAttribute('id', 'id1');
+		});
+
+		it('accepte une value et la passe à l‘option', () => {
+			render(<SelectSimple labelledBy={'id'}>
+				<SelectSimple.Option value="1">option 1</SelectSimple.Option>
+				<SelectSimple.Option value="2">option 2</SelectSimple.Option>
+			</SelectSimple>);
+
+			expect(screen.getByRole('option', { hidden: true, name:'option 1' })).toHaveAttribute('data-value', '1');
+		});
+	});
 });
 
 function getAllFormData(event: FormEvent<HTMLFormElement>, name: string) {

diff --git a/src/client/components/ui/Form/Select/Select.tsx b/src/client/components/ui/Form/Select/Select.tsx
@@ -16,6 +16,7 @@ export interface OptionSelect {
 type SelectProps = {
 	label: string;
 	labelComplement?: string
+	optionList: OptionSelect[]
 } & (
 	SelectSimpleProps & { multiple?: false }
 	| SelectMultipleProps & { multiple: true }
@@ -27,6 +28,7 @@ export function Select(props: SelectProps) {
 		label,
 		labelComplement,
 		multiple,
+		optionList,
 		...rest
 	} = props;
 	const labelledBy = useId();
@@ -46,8 +48,18 @@ export function Select(props: SelectProps) {
 					{label}
 					{labelComplement && <Champ.Label.Complement>{labelComplement}</Champ.Label.Complement>}
 				</Champ.Label>
-				{isSelectSimpleProps(rest) && <Champ.Input render={SelectSimple} labelledBy={labelledBy} {...rest}/>}
-				{isSelectMultipleProps(rest) && <Champ.Input render={SelectMultiple} labelledBy={labelledBy} {...rest}/>}
+				{isSelectSimpleProps(rest) && <Champ.Input render={SelectSimple} labelledBy={labelledBy} {...rest}>
+					{optionList.map((option) =>
+						<SelectSimple.Option key={option.libellé} value={option.valeur}>{option.libellé}</SelectSimple.Option>,
+					)}
+				</Champ.Input>}
+
+				{isSelectMultipleProps(rest) && <Champ.Input render={SelectMultiple} labelledBy={labelledBy} {...rest}>
+					{optionList.map((option) =>
+						<SelectMultiple.Option key={option.libellé} value={option.valeur}>{option.libellé}</SelectMultiple.Option>,
+					)}
+				</Champ.Input>}
+
 				<Champ.Error/>
 			</Champ>
 		</div>

diff --git a/src/client/components/ui/Form/Select/SelectContext.tsx b/src/client/components/ui/Form/Select/SelectContext.tsx
@@ -0,0 +1,22 @@
+import { createContext, useContext } from 'react';
+
+import NoProviderError from '~/client/Errors/NoProviderError';
+
+
+type SelectContext = {
+	activeDescendant: string | undefined,
+	onOptionSelection: (optionId: string) => void,
+	isCurrentItemSelected: (optionValue: string) => boolean
+}
+
+export const SelectContext = createContext<SelectContext | null>(null);
+
+export function useSelectContext() {
+	const selectContext = useContext(SelectContext);
+
+	if (selectContext == null) {
+		throw new NoProviderError(SelectContext);
+	}
+
+	return selectContext;
+}
diff --git a/src/client/components/ui/Form/Select/SelectMultiple.tsx b/src/client/components/ui/Form/Select/SelectMultiple.tsx
@@ -1,4 +1,3 @@
-import classNames from 'classnames';
 import debounce from 'lodash.debounce';
 import React, {
 	FocusEvent,
@@ -15,18 +14,18 @@ import React, {
 
 import { KeyBoard } from '~/client/components/keyboard/keyboard.enum';
 import { Input } from '~/client/components/ui/Form/Input';
-import { OptionSelect } from '~/client/components/ui/Form/Select/Select';
+import { SelectOption } from '~/client/components/ui/Form/Select/SelectOption';
 import { Icon } from '~/client/components/ui/Icon/Icon';
 
 import styles from './Select.module.scss';
+import { SelectContext } from './SelectContext';
 import { SelectMultipleAction, SelectMultipleReducer } from './SelectReducer';
 
 const SELECT_PLACEHOLDER_MULTIPLE = 'Sélectionnez vos choix';
 const ERROR_LABEL_REQUIRED_MULTIPLE = 'Séléctionnez au moins un élément de la liste';
 const DEFAULT_DEBOUNCE_TIMEOUT = 300;
 
 export type SelectMultipleProps = Omit<React.HTMLProps<HTMLInputElement>, 'onChange'> & {
-	optionList: OptionSelect[];
 	value?: Array<string>;
 	onChange?: (value: HTMLElement) => void;
 	defaultValue?: Array<string>;
@@ -35,7 +34,7 @@ export type SelectMultipleProps = Omit<React.HTMLProps<HTMLInputElement>, 'onCha
 
 export function SelectMultiple(props: SelectMultipleProps & { labelledBy: string }) {
 	const {
-		optionList,
+		children,
 		value,
 		placeholder,
 		name,
@@ -50,7 +49,6 @@ export function SelectMultiple(props: SelectMultipleProps & { labelledBy: string
 	const listboxRef = useRef<HTMLUListElement>(null);
 	const firstInputHiddenRef = useRef<HTMLInputElement>(null);
 
-	const optionsId = useId();
 	const listboxId = useId();
 
 	const [touched, setTouched] = useState<boolean>(false);
@@ -93,11 +91,6 @@ export function SelectMultiple(props: SelectMultipleProps & { labelledBy: string
 		}
 	}, [state.activeDescendant]);
 
-	// NOTE (BRUJ 17-05-2023): Sinon on perd le focus avant la fin du clique ==> élément invalid pour la sélection.
-	const onMouseDown = useCallback(function preventBlurOnOptionSelection(event: React.MouseEvent<HTMLLIElement>) {
-		event.preventDefault();
-	}, []);
-
 	const onBlur = useCallback(function onBlur(event: FocusEvent<HTMLDivElement>) {
 		const newFocusStillInCombobox = event.currentTarget.contains(event.relatedTarget);
 		if (newFocusStillInCombobox) {
@@ -218,30 +211,30 @@ export function SelectMultiple(props: SelectMultipleProps & { labelledBy: string
 	}
 
 	return (
-		<div>
+		<SelectContext.Provider value={{
+			activeDescendant: state.activeDescendant,
+			isCurrentItemSelected,
+			onOptionSelection: selectOption,
+		}}>
 			<div className={styles.container}>
 				<Input
 					ref={firstInputHiddenRef}
 					onInvalid={onInvalidProps}
 					tabIndex={-1}
-					className={styles.inputHiddenValue}
 					required={required}
 					aria-hidden="true"
 					name={name}
 					value={optionsSelectedValues[0] || ''}/>
-				{optionsSelectedValues.slice(1).map((optionValue) => {
-					return <Input
+				{optionsSelectedValues.slice(1).map((optionValue) => (
+					<Input
 						tabIndex={-1}
-						className={styles.inputHiddenValue}
 						key={optionValue}
 						aria-hidden="true"
 						name={name}
-						value={optionValue}
-					/>;
-				})}
+						value={optionValue}/>
+				))}
 				<div
 					role="combobox"
-					className={classNames(styles.combobox)}
 					aria-controls={listboxId}
 					aria-haspopup="listbox"
 					aria-expanded={state.isListOptionsOpen}
@@ -255,31 +248,19 @@ export function SelectMultiple(props: SelectMultipleProps & { labelledBy: string
 					{...rest}
 				>
 					<PlaceholderSelectedOptions/>
-					{state.isListOptionsOpen ? <Icon name={'angle-up'}/> : <Icon name={'angle-down'}/>}
+					<Icon name={'angle-down'}/>
 				</div>
 				<ul
+					aria-multiselectable="true"
 					role="listbox"
 					ref={listboxRef}
 					aria-labelledby={labelledBy}
 					id={listboxId}
 					hidden={!state.isListOptionsOpen}>
-					{optionList.map((option, index) => {
-						const optionId = `${optionsId}-${index}`;
-						return <li
-							className={classNames(styles.optionComboboxMultiple, state.activeDescendant === optionId ? styles.optionVisuallyFocus : '')}
-							id={optionId}
-							role="option"
-							key={index}
-							onMouseDown={onMouseDown}
-							data-value={option.valeur}
-							onClick={() => selectOption(optionId)}
-							aria-selected={isCurrentItemSelected(option.valeur)}>
-							<div className={styles.option}>{option.libellé}</div>
-						</li>;
-					})}
+					{children}
 				</ul>
 			</div>
-		</div>
+		</SelectContext.Provider>
 	);
 }
 
@@ -291,3 +272,5 @@ function cancelEvent(event: SyntheticEvent) {
 function doNothing() {
 	return;
 }
+
+SelectMultiple.Option = SelectOption;
diff --git a/src/client/components/ui/Form/Select/SelectOption.tsx b/src/client/components/ui/Form/Select/SelectOption.tsx
@@ -0,0 +1,32 @@
+import classNames from 'classnames';
+import React, { useCallback, useId } from 'react';
+
+import styles from './Select.module.scss';
+import { useSelectContext } from './SelectContext';
+
+type SelectOptionProps = Omit<React.ComponentPropsWithoutRef<'li'>, 'value'> & {
+	value: { toString: () => string },
+};
+
+export function SelectOption({ className, value: valueProps, id: idProps, ...rest }: SelectOptionProps) {
+	const value = valueProps.toString();
+	const defaultId = useId();
+	const id = idProps ?? value ?? defaultId;
+	const { onOptionSelection, activeDescendant, isCurrentItemSelected } = useSelectContext();
+
+	// NOTE (BRUJ 17-05-2023): Sinon on perd le focus avant la fin du clique ==> élément invalid pour la sélection.
+	const onMouseDown = useCallback(function preventBlurOnOptionSelection(event: React.MouseEvent<HTMLLIElement>) {
+		event.preventDefault();
+	}, []);
+
+	return <li
+		className={classNames(className, { [styles.optionVisuallyFocus] : activeDescendant === id })}
+		id={id}
+		role="option"
+		onMouseDown={onMouseDown}
+		data-value={value.toString()}
+		onClick={() => onOptionSelection(id)}
+		aria-selected={isCurrentItemSelected(value)}
+		{...rest}>
+	</li>;
+}
diff --git a/src/client/components/ui/Form/Select/SelectReducer.tsx b/src/client/components/ui/Form/Select/SelectReducer.tsx
@@ -9,7 +9,7 @@ export type SelectSimpleState = {
 	valueTypedByUser: string
 }
 
-function getOptionsElement(refListOption: RefObject<HTMLUListElement>) {
+export function getOptionsElement(refListOption: RefObject<HTMLUListElement>) {
 	return Array.from(refListOption.current?.querySelectorAll('[role="option"]') ?? []);
 }
 
@@ -167,7 +167,7 @@ export namespace SelectSimpleAction {
 	}
 }
 
-export function SelectReducer(state: SelectSimpleState, action: SelectSimpleAction): SelectSimpleState {
+export function SelectSimpleReducer(state: SelectSimpleState, action: SelectSimpleAction): SelectSimpleState {
 	return action.execute(state);
 }