Merge branch 'main' of https://github.com/codegouvfr/react-dsfr

Author: garronej

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@codegouvfr/react-dsfr",
-    "version": "0.75.3",
+    "version": "0.75.5",
     "description": "French State Design System React integration library",
     "repository": {
         "type": "git",

src/Header/Header.tsx

@@ -144,7 +144,7 @@ export const Header = memo(
 
         const { Link } = getLink();
 
-        const quickAccessNode = (
+        const getQuickAccessNode = (suffix: string | null = null) => (
             <ul className={fr.cx("fr-btns-group")}>
                 {quickAccessItems.map((quickAccessItem, i) => (
                     <li key={i}>
@@ -157,7 +157,7 @@ export const Header = memo(
                             <HeaderQuickAccessItem
                                 id={`${id}-quick-access-item-${generateValidHtmlId({
                                     "fallback": "",
-                                    "text": quickAccessItem.text
+                                    "text": `${quickAccessItem.text}${suffix ? `-${suffix}` : ""}`
                                 })}-${i}`}
                                 quickAccessItem={quickAccessItem}
                             />
@@ -312,7 +312,7 @@ export const Header = memo(
                                                     classes.toolsLinks
                                                 )}
                                             >
-                                                {quickAccessNode}
+                                                {getQuickAccessNode()}
                                             </div>
                                         )}
 
@@ -401,7 +401,7 @@ export const Header = memo(
                                         classes.menuLinks
                                     )}
                                 >
-                                    {quickAccessNode}
+                                    {getQuickAccessNode("mobile")}
                                 </div>
                                 {navigation !== undefined &&
                                     (navigation instanceof Array ? (

src/Input.tsx

@@ -74,7 +74,7 @@ export const Input = memo(
             hintText,
             hideLabel,
             disabled = false,
-            iconId: iconId_props,
+            iconId,
             classes = {},
             style,
             state = "default",
@@ -161,10 +161,6 @@ export const Input = memo(
                         />
                     );
 
-                    const iconId =
-                        iconId_props ??
-                        (nativeInputProps?.type === "date" ? "ri-calendar-line" : undefined);
-
                     return iconId === undefined ? (
                         nativeInputOrTextArea
                     ) : (

src/SelectNext.tsx

@@ -34,11 +34,24 @@ export type SelectProps<Options extends SelectProps.Option[]> = {
         value?: Options[number]["value"];
         onChange?: (
             e: Omit<ChangeEvent<HTMLSelectElement>, "target" | "currentTarget"> & {
-                target: Omit<ChangeEvent<HTMLSelectElement>, "value"> & {
+                target: Omit<EventTarget & HTMLSelectElement, "value" | "selectedOptions"> & {
                     value: Options[number]["value"];
+                    selectedOptions: HTMLCollectionOf<
+                        Omit<HTMLOptionElement, "value"> & {
+                            value: Options[number]["value"];
+                        }
+                    >;
                 };
-                currentTarget: Omit<ChangeEvent<HTMLSelectElement>, "value"> & {
+                currentTarget: Omit<
+                    EventTarget & HTMLSelectElement,
+                    "value" | "selectedOptions"
+                > & {
                     value: Options[number]["value"];
+                    selectedOptions: HTMLCollectionOf<
+                        Omit<HTMLOptionElement, "value"> & {
+                            value: Options[number]["value"];
+                        }
+                    >;
                 };
             }
         ) => void;

test/types/Select.tsx

@@ -262,3 +262,37 @@ import { assert, type Equals } from "tsafe";
         }}
     />;
 }
+
+{
+    const dogOrCatOptions = [
+        {
+            value: "dog",
+            label: "Dog"
+        },
+        {
+            value: "cat",
+            label: "Cat"
+        }
+    ] as const;
+
+    type DogOrCat = typeof dogOrCatOptions[number]["value"];
+    type SelectTarget = Omit<EventTarget & HTMLSelectElement, "value" | "selectedOptions"> & {
+        value: DogOrCat;
+        selectedOptions: HTMLCollectionOf<Omit<HTMLOptionElement, "value"> & { value: DogOrCat }>;
+    };
+    <Select
+        label="Dog or cat person?"
+        options={[...dogOrCatOptions]}
+        placeholder="Select an option"
+        nativeSelectProps={{
+            "onChange": event => {
+                assert<Equals<typeof event["currentTarget"], SelectTarget>>();
+                assert<Equals<typeof event["target"], SelectTarget>>();
+                const selectedValues = Array.from(event.target.selectedOptions).map(
+                    option => option.value
+                );
+                assert<Equals<typeof selectedValues, DogOrCat[]>>;
+            }
+        }}
+    />;
+}