Rework SelectNext #265 #280

Author: garronej

src/SelectNext.tsx

@@ -148,7 +148,29 @@ function NonMemoizedNonForwardedSelect<T extends SelectProps.Option[]>(
                 </label>
             )}
             <select
-                {...(nativeSelectProps as any)}
+                {...nativeSelectProps}
+                {...(() => {
+                    const isControlled =
+                        nativeSelectProps !== undefined && "value" in nativeSelectProps;
+
+                    const isEmptyValueSelected = isControlled
+                        ? nativeSelectProps.value === undefined
+                        : options.find(option => option.selected) === undefined;
+
+                    if (isControlled) {
+                        return isEmptyValueSelected ? { "value": "" } : {};
+                    }
+
+                    return {
+                        "defaultValue": isEmptyValueSelected
+                            ? ""
+                            : (() => {
+                                  const selectedOption = options.find(option => option.selected);
+                                  assert(selectedOption !== undefined);
+                                  return selectedOption.value;
+                              })()
+                    };
+                })()}
                 className={cx(fr.cx("fr-select"), nativeSelectProps?.className)}
                 id={selectId}
                 aria-describedby={stateDescriptionId}
@@ -160,16 +182,16 @@ function NonMemoizedNonForwardedSelect<T extends SelectProps.Option[]>(
                         : {
                               "label":
                                   placeholder === undefined ? t("select an option") : placeholder,
-                              "selected": true,
                               "value": "",
                               "disabled": true
                           },
-                    ...options
+                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                    ...options.map(({ selected, ...option }) => option)
                 ]
                     .filter(exclude(undefined))
-                    .map((option, index) => (
-                        <option {...(option as any)} key={`${option.value}-${index}`}>
-                            {option.label}
+                    .map(({ label, ...option }, index) => (
+                        <option {...option} key={`${option.value}-${index}`}>
+                            {label}
                         </option>
                     ))}
             </select>

stories/Select.stories.tsx

@@ -12,7 +12,8 @@ const { meta, getStory } = getStoryFactory({
 - [See DSFR documentation](https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/bandeau-d-information-importante)
 - [See source code](https://github.com/codegouvfr/react-dsfr/blob/main/src/Notice.tsx)
 
-> 🗣️ This is a legacy implementation. Try out [\`SelectNext\`](https://components.react-dsfr.codegouv.studio/?path=/docs/components-selectnext--default) it will eventually replace this component.  
+> 🗣️ This implementation of the <Select /> component is headless. It matched very closely the behavior of a native select input.  
+> Try out [\`SelectNext\`](https://components.react-dsfr.codegouv.studio/?path=/docs/components-selectnext--default) if you want a smarter component with better type inference.  
 
 ## Controlled
 

stories/SelectNext.stories.tsx

@@ -17,7 +17,6 @@ import { Select } from "@codegouvfr/react-dsfr/SelectNext";
 - [See DSFR documentation](https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/liste-deroulante)
 - [See source code](https://github.com/codegouvfr/react-dsfr/blob/main/src/SelectNext.tsx)
 
-> NOTE: This component is still in beta, it may change in the future.
 
 ## Controlled
 
@@ -63,6 +62,10 @@ function MyComponent(){
 }
 \`\`\`
 
+> NOTE: In this implementation, once the use has selected a value it can't be unselected.  
+> If you need you want your users to be able to unselect please provide an option with an empty string as value
+> and use the next example as reference.  
+
 ### Value pre-selected
 
 "bar" selected by default.
@@ -92,22 +95,21 @@ function MyComponent(){
 }
 \`\`\`
 
-
-
 ## Uncontrolled
 
 \`\`\`tsx
 import { useState } from "react";
 import { Select } from "@codegouvfr/react-dsfr/Select";
 
-
 function MyComponent(){
 
     return (
         <form method="POST" action="...">
             {/* 
               * With no value pre selected, if the user didn't select anything, 
-              * when submitted the value of "my-select" will be "" 
+              * when submitted the value of "my-select" will be "".  
+              * Here as well, the value once selected can't be unselected.
+              * Use an explicit option with an empty string as value and set selected to true to allow unselecting.  
               */}
             <Select
                 label="Label"
@@ -200,7 +202,7 @@ function MyComponent(){
 
 export default meta;
 
-const defaultOptions = [
+const options = [
     {
         "value": "1",
         "label": "Option 1"
@@ -215,73 +217,50 @@ const defaultOptions = [
     }
 ];
 
-const myFakeValueSet = [
-    "dc9d15ee-7794-470e-9dcf-a8d1dd1a6fcf",
-    "1bda4f79-a199-40ce-985b-fa217809d568",
-    "e91b2cac-48f6-4d60-b86f-ece02f076837",
-    "66a9d7ac-9b25-4e52-9de3-4b7238135b39"
-] as const;
-
-type MyFakeValue = typeof myFakeValueSet[number];
-
-const optionsWithTypedValues: SelectProps.Option<MyFakeValue>[] = myFakeValueSet.map(fakeValue => ({
-    value: fakeValue,
-    label: fakeValue
-}));
-
 export const Default = getStory({
     "label": "Label pour liste déroulante",
-    "options": defaultOptions
+    options
 });
 
 export const DefaultWithPlaceholder = getStory({
     "label": "Label pour liste déroulante",
     "placeholder": "Sélectionnez une option",
-    "options": defaultOptions
+    options
 });
 
 export const ErrorState = getStory({
     "label": "Label pour liste déroulante",
     "state": "error",
     "stateRelatedMessage": "Texte d’erreur obligatoire",
-    "options": defaultOptions
+    options
 });
 
 export const SuccessState = getStory({
     "label": "Label pour liste déroulante",
     "state": "valid",
     "stateRelatedMessage": "Texte de validation",
     "placeholder": "Sélectionnez une option",
-    "options": defaultOptions
+    options
 });
 
 export const Disabled = getStory({
     "label": "Label pour liste déroulante",
     "disabled": true,
     "placeholder": "Sélectionnez une option",
-    "options": defaultOptions
+    options
 });
 
 export const WithHint = getStory({
     "label": "Label pour liste déroulante",
     "hint": "Texte de description additionnel",
     "placeholder": "Sélectionnez une option",
-    "options": defaultOptions
-});
-
-export const TypedSelect = getStory({
-    "label": "Label pour liste déroulante avec valeurs d'options typesafe",
-    "placeholder": "Sélectionnez une option",
-    "options": optionsWithTypedValues,
-    "nativeSelectProps": {
-        "value": "dc9d15ee-7794-470e-9dcf-a8d1dd1a6fcf"
-    }
+    options
 });
 
 export const SelectWithCustomId = getStory({
     "label": "Label pour liste déroulante",
     "nativeSelectProps": {
         id: "my-unique-id"
     },
-    "options": defaultOptions
+    options
 });