From 3ec894a5fcfae05deea9471afae8ca6caded2362 Mon Sep 17 00:00:00 2001
From: Haider Alshamma <haidera@nulogy.com>
Date: Mon, 30 Dec 2024 17:37:06 -0500
Subject: [PATCH] feat: allow the NDSOption type to be extended

---
 src/Select/Select.story.fixture.tsx | 18 +++++++++-
 src/Select/Select.story.tsx         | 21 +++++++++++-
 src/Select/Select.tsx               | 52 ++++++++++++++++++-----------
 src/Select/lib.ts                   |  2 +-
 4 files changed, 70 insertions(+), 23 deletions(-)

diff --git a/src/Select/Select.story.fixture.tsx b/src/Select/Select.story.fixture.tsx
index 184087666..04f5fc743 100644
--- a/src/Select/Select.story.fixture.tsx
+++ b/src/Select/Select.story.fixture.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+import { GroupBase } from "react-select";
 import styled from "styled-components";
 import { SelectOption, SelectOptionProps } from "./SelectOption";
 import { NDSOption } from "./Select";
@@ -65,7 +66,7 @@ const Indicator = styled.span(() => ({
   marginRight: "5px",
 }));
 
-export const CustomOption = ({ children, ...props }: SelectOptionProps) => {
+export const CustomOption = ({ children, ...props }: SelectOptionProps<NDSOption, true, GroupBase<NDSOption>>) => {
   const newChildren = (
     <>
       <Indicator />
@@ -74,3 +75,18 @@ export const CustomOption = ({ children, ...props }: SelectOptionProps) => {
   );
   return <SelectOption {...props}>{newChildren}</SelectOption>;
 };
+
+export interface DescriptiveOption extends NDSOption {
+  description: string;
+}
+
+export const CustomFieldsOption = ({
+  ...props
+}: SelectOptionProps<DescriptiveOption, true, GroupBase<DescriptiveOption>>) => {
+  return (
+    <SelectOption {...props}>
+      <span>{props.data.label}</span>
+      <span>{props.data.description}</span>
+    </SelectOption>
+  );
+};
diff --git a/src/Select/Select.story.tsx b/src/Select/Select.story.tsx
index 9b0b67519..d484d53dd 100644
--- a/src/Select/Select.story.tsx
+++ b/src/Select/Select.story.tsx
@@ -14,6 +14,7 @@ import {
   wrappingOptions,
   PCNList,
   errorList,
+  CustomFieldsOption,
 } from "./Select.story.fixture";
 
 const SelectWithManyOptions = ({ multiselect, labelText, ...props }: Partial<NDSSelectProps>) => {
@@ -336,7 +337,7 @@ WithSmallerMaxHeight.story = {
 export const WithWrappingText = () => (
   <Select
     initialIsOpen
-    value={options[0].value}
+    value={wrappingOptions[0].value}
     placeholder="Please select inventory status"
     options={wrappingOptions}
     labelText="Inventory status"
@@ -538,3 +539,21 @@ export const WithCustomStyles = () => {
     />
   );
 };
+
+export const WithCustomOptionFields = () => {
+  const descriptiveOptions = [
+    { value: "accepted", label: "Accepted", description: "This item has been accepted" },
+    { value: "assigned", label: "Assigned to a line", description: "This item is assigned to a production line" },
+  ];
+
+  return (
+    <Select
+      defaultValue={descriptiveOptions[0].value}
+      options={descriptiveOptions}
+      components={{
+        Option: CustomFieldsOption,
+      }}
+      labelText="Inventory status"
+    />
+  );
+};
diff --git a/src/Select/Select.tsx b/src/Select/Select.tsx
index 96d1a49c7..6086d7d06 100644
--- a/src/Select/Select.tsx
+++ b/src/Select/Select.tsx
@@ -31,37 +31,43 @@ export interface NDSOption {
   value: NDSOptionValue;
 }
 
-interface CustomProps<IsMulti extends boolean, Group extends GroupBase<NDSOption>> extends StyledProps {
-  autocomplete?: Props<NDSOption, IsMulti, Group>["isSearchable"];
+interface CustomProps<Option extends NDSOption, IsMulti extends boolean, Group extends GroupBase<Option>>
+  extends StyledProps {
+  autocomplete?: Props<Option, IsMulti, Group>["isSearchable"];
   labelText?: string;
   size?: ComponentVariant;
   requirementText?: string;
   helpText?: ReactNode;
-  disabled?: Props<NDSOption, IsMulti, Group>["isDisabled"];
+  disabled?: Props<Option, IsMulti, Group>["isDisabled"];
   errorMessage?: string;
   errorList?: string[];
-  initialIsOpen?: Props<NDSOption, IsMulti, Group>["defaultMenuIsOpen"];
-  multiselect?: Props<NDSOption, IsMulti, Group>["isMulti"];
+  initialIsOpen?: Props<Option, IsMulti, Group>["defaultMenuIsOpen"];
+  multiselect?: Props<Option, IsMulti, Group>["isMulti"];
   maxHeight?: string;
-  defaultValue?: PropsValue<NDSOptionValue>;
-  value?: PropsValue<NDSOptionValue>;
-  options: NDSOption[];
-  onChange?: (newValue: PropsValue<NDSOptionValue>) => void;
+  defaultValue?: PropsValue<Option["value"]>;
+  value?: PropsValue<Option["value"]>;
+  options: readonly Option[];
+  onChange?: (newValue: PropsValue<Option["value"]>) => void;
   windowThreshold?: number;
-  styles?: (selectStyles: StylesConfig<NDSOption, IsMulti, Group>) => StylesConfig<NDSOption, IsMulti, Group>;
+  styles?: (selectStyles: StylesConfig<Option, IsMulti, Group>) => StylesConfig<Option, IsMulti, Group>;
 }
 
 export type NDSSelectProps<
+  Option extends NDSOption = NDSOption,
   IsMulti extends boolean = boolean,
-  Group extends GroupBase<NDSOption> = GroupBase<NDSOption>,
+  Group extends GroupBase<Option> = GroupBase<Option>,
 > = Omit<
-  Props<NDSOption, IsMulti, Group>,
-  keyof CustomProps<IsMulti, Group> | "isSearchable" | "isDisabled" | "defaultMenuIsOpen" | "isMulti" | "styles"
+  Props<Option, IsMulti, Group>,
+  keyof CustomProps<Option, IsMulti, Group> | "isSearchable" | "isDisabled" | "defaultMenuIsOpen" | "isMulti" | "styles"
 > &
-  CustomProps<IsMulti, Group>;
+  CustomProps<Option, IsMulti, Group>;
 
 const NDSSelect = forwardRef(
-  <IsMulti extends boolean = boolean, Group extends GroupBase<NDSOption> = GroupBase<NDSOption>>(
+  <
+    Option extends NDSOption = NDSOption,
+    IsMulti extends boolean = boolean,
+    Group extends GroupBase<Option> = GroupBase<Option>,
+  >(
     {
       autocomplete,
       value,
@@ -85,10 +91,10 @@ const NDSSelect = forwardRef(
       options,
       styles,
       ...props
-    }: NDSSelectProps<IsMulti, Group>,
+    }: NDSSelectProps<Option, IsMulti, Group>,
     ref:
-      | ((instance: Select<NDSOption, IsMulti, Group> | null) => void)
-      | MutableRefObject<Select<NDSOption, IsMulti, Group> | null>
+      | ((instance: Select<Option, IsMulti, Group> | null) => void)
+      | MutableRefObject<Select<Option, IsMulti, Group> | null>
       | null
   ) => {
     const { t } = useTranslation();
@@ -105,7 +111,7 @@ const NDSSelect = forwardRef(
       optionsRef.current = options;
     }, [options]);
 
-    const stylesConfig = customStyles<NDSOption, IsMulti, Group>({
+    const stylesConfig = customStyles<Option, IsMulti, Group>({
       theme: theme,
       error,
       maxHeight,
@@ -160,6 +166,12 @@ const NDSSelect = forwardRef(
       </Field>
     );
   }
-);
+) as <
+  Option extends NDSOption = NDSOption,
+  IsMulti extends boolean = false,
+  Group extends GroupBase<Option> = GroupBase<Option>,
+>(
+  props: NDSSelectProps<Option, IsMulti, Group> & React.RefAttributes<Select<Option, IsMulti, Group>>
+) => React.ReactElement;
 
 export default NDSSelect;
diff --git a/src/Select/lib.ts b/src/Select/lib.ts
index c2a097548..844f82da4 100644
--- a/src/Select/lib.ts
+++ b/src/Select/lib.ts
@@ -1,6 +1,6 @@
+import * as React from "react";
 import { Options, PropsValue } from "react-select";
 import { NDSOption, NDSOptionValue } from "./Select";
-import * as React from "react";
 
 export function calcOptionsLength(options) {
   options = options || [];