Feature/xw 122/grouped select

README.md

@@ -4,7 +4,10 @@
 
 - **Version 2.2 (breaking changes from 2.1.x)**
 
-  - 2.2.33: Refactored DownloadCard.
+  - 2.2.34:
+    - Added select options grouping logic.
+  - 2.2.33:
+    - Refactored DownloadCard.
   - 2.2.32: Added more tokens to DownloadCard.
   - 2.2.31:
     - Added custom content to NotificationPopUp.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/components",
-  "version": "2.2.33",
+  "version": "2.2.34",
   "description": "React (Gatsby) components used within the Conduction Skeleton Application (and its implementations)",
   "main": "lib/index.js",
   "scripts": {
@@ -14,12 +14,7 @@
     "type": "git",
     "url": "git+https://github.com/ConductionNL/conduction-components.git"
   },
-  "keywords": [
-    "React",
-    "Gatsby",
-    "Conduction",
-    "Components"
-  ],
+  "keywords": ["React", "Gatsby", "Conduction", "Components"],
   "author": "Conduction B.V.",
   "license": "ISC",
   "bugs": {

src/components/formFields/select/select.module.css

@@ -24,6 +24,10 @@
 
   --conduction-input-select-placeholder-font-family: "Noto Sans", Arial, sans-serif;
   --conduction-input-select-placeholder-color: #757575;
+
+  --conduction-input-select-group-font-size: 12px;
+  --conduction-input-select-group-text-color: grey;
+  --conduction-input-select-group-font-family: "Noto Sans", Arial, sans-serif;
 }
 
 .select > div {
@@ -56,3 +60,9 @@
   border: var(--conduction-input-select-border-focus);
   border-radius: var(--conduction-input-select-border-radius);
 }
+
+.groupLabel {
+  font-size: var(--conduction-input-select-group-font-size);
+  color: var(--conduction-input-select-group-text-color);
+  font-family: var(--conduction-input-select-group-font-family);
+}

src/components/formFields/select/select.tsx

@@ -2,14 +2,17 @@ import * as React from "react";
 import * as styles from "./select.module.css";
 import clsx from "clsx";
 import CreatableSelect from "react-select/creatable";
-import ReactSelect, { MenuPlacement, StylesConfig } from "react-select";
+import ReactSelect, { MenuPlacement, StylesConfig, GroupBase } from "react-select";
 import { Control, Controller, FieldValues } from "react-hook-form";
 import { IReactHookFormProps } from "../types";
 import { ErrorMessage } from "../errorMessage/ErrorMessage";
 
+export type TSelectOption = { label: string; value: string };
+export type TGroupedSelectOption = { label: string; options: TSelectOption[] };
+
 interface ISelectProps {
   control: Control<FieldValues, any>;
-  options: { label: string; value: string }[];
+  options: TSelectOption[] | TGroupedSelectOption[];
   name: string;
   ariaLabel: string;
   id?: string;
@@ -103,6 +106,7 @@ export const SelectMultiple = ({
               menuPlacement={menuPlacement}
               styles={selectStyles}
               placeholder={disabled ? "Disabled..." : placeholder ?? "Select one or more options..."}
+              formatGroupLabel={(group) => <GroupLabel {...{ group }} />}
             />
             {errors[name] && !hideErrorMessage && <ErrorMessage message={errors[name]?.message as string} />}
           </>
@@ -148,6 +152,7 @@ export const SelectCreate = ({
               menuPortalTarget={document.body}
               menuPlacement={menuPlacement}
               styles={selectStyles}
+              formatGroupLabel={(group) => <GroupLabel {...{ group }} />}
             />
             {errors[name] && !hideErrorMessage && <ErrorMessage message={errors[name]?.message as string} />}
           </>
@@ -193,6 +198,7 @@ export const SelectSingle = ({
               menuPlacement={menuPlacement}
               styles={selectStyles}
               placeholder={disabled ? "Disabled..." : placeholder ?? "Select one or more options..."}
+              formatGroupLabel={(group) => <GroupLabel {...{ group }} />}
             />
             {errors[name] && !hideErrorMessage && <ErrorMessage message={errors[name]?.message as string} />}
           </>
@@ -201,3 +207,9 @@ export const SelectSingle = ({
     />
   );
 };
+
+const GroupLabel: React.FC<{ group: GroupBase<unknown> }> = ({ group }) => {
+  if (!group.label) return <></>;
+
+  return <span className={styles.groupLabel}>{group.label}</span>;
+};

tsconfig.json

@@ -3,10 +3,7 @@
     "declaration": true,
     "outDir": "./lib",
     "target": "esnext",
-    "lib": [
-      "dom",
-      "esnext"
-    ],
+    "lib": ["dom", "esnext"],
     "jsx": "react-jsx",
     "module": "esnext",
     "moduleResolution": "node",
@@ -15,15 +12,7 @@
     "strict": true,
     "skipLibCheck": true
   },
-  "hooks": [
-    "copy-files"
-  ],
-  "include": [
-    "src",
-    "src/**/*.css"
-  ],
-  "exclude": [
-    "node_modules",
-    "**/__tests__/*"
-  ]
-}
+  "hooks": ["copy-files"],
+  "include": ["src", "src/**/*.css"],
+  "exclude": ["**/__tests__/*"]
+}