ids in closure, add storybook example + fixed stories with values

Author: enguerranws

src/Select.tsx

@@ -61,11 +61,17 @@ const SelectComponent = <T extends GenericOption<DefaultOptionValue>[]>(
     } = props;
 
     assert<Equals<keyof typeof rest, never>>();
-    const elementId = useId();
-    const selectId = nativeSelectProps?.id || `select-${elementId}`;
-    const stateDescriptionId = nativeSelectProps?.id
-        ? `${nativeSelectProps?.id}-desc`
-        : `select-${elementId}-desc`;
+
+    const { selectId, stateDescriptionId } = (function useClosure() {
+        const elementId = useId();
+        const selectId = nativeSelectProps?.id ?? `select-${elementId}`;
+        const stateDescriptionId = nativeSelectProps?.id
+            ? `${nativeSelectProps?.id}-desc`
+            : `select-${elementId}-desc`;
+
+        return { selectId, stateDescriptionId };
+    })();
+
     const displayedOptions =
         placeholder !== undefined
             ? [

stories/Select.stories.tsx

@@ -156,9 +156,6 @@ export const Default = getStory({
 
 export const DefaultWithPlaceholder = getStory({
     "label": "Label pour liste déroulante",
-    "nativeSelectProps": {
-        "value": ""
-    },
     "placeholder": "Sélectionnez une option",
     "options": defaultOptions
 });
@@ -174,29 +171,20 @@ export const SuccessState = getStory({
     "label": "Label pour liste déroulante",
     "state": "success",
     "stateRelatedMessage": "Texte de validation",
-    "nativeSelectProps": {
-        "value": "2"
-    },
     "placeholder": "Sélectionnez une option",
     "options": defaultOptions
 });
 
 export const Disabled = getStory({
     "label": "Label pour liste déroulante",
     "disabled": true,
-    "nativeSelectProps": {
-        "value": ""
-    },
     "placeholder": "Sélectionnez une option",
     "options": defaultOptions
 });
 
 export const WithHint = getStory({
     "label": "Label pour liste déroulante",
     "hint": "Texte de description additionnel",
-    "nativeSelectProps": {
-        "value": ""
-    },
     "placeholder": "Sélectionnez une option",
     "options": defaultOptions
 });
@@ -206,7 +194,14 @@ export const TypedSelect = getStory({
     "placeholder": "Sélectionnez une option",
     "options": optionsWithTypedValues,
     "nativeSelectProps": {
-        "defaultValue": "dc9d15ee-7794-470e-9dcf-a8d1dd1a6fcf",
-        "value": "dc9ee-7794-470e-9dcf-a8d1dd1a6fcf"
+        "defaultValue": "dc9d15ee-7794-470e-9dcf-a8d1dd1a6fcf"
     }
 });
+
+export const SelectWithCustomId = getStory({
+    "label": "Label pour liste déroulante",
+    "nativeSelectProps": {
+        id: "my-unique-id"
+    },
+    "options": defaultOptions
+});