From e926f5babb77e7f1bf9622ef85681be08fbd1e8a Mon Sep 17 00:00:00 2001
From: Haider Alshamma <haidera@nulogy.com>
Date: Tue, 31 Dec 2024 16:05:10 -0500
Subject: [PATCH] chore: better and more accurate types

---
 src/AsyncSelect/AsyncSelect.tsx           |  3 ++-
 src/AsyncSelect/AsyncSelectComponents.tsx | 10 +---------
 src/Select/Select.tsx                     | 14 ++++----------
 src/Select/SelectOption.tsx               | 20 +++++---------------
 src/Select/customReactSelectStyles.tsx    | 11 ++++++++---
 5 files changed, 20 insertions(+), 38 deletions(-)

diff --git a/src/AsyncSelect/AsyncSelect.tsx b/src/AsyncSelect/AsyncSelect.tsx
index 43e83afd7..231f74a25 100644
--- a/src/AsyncSelect/AsyncSelect.tsx
+++ b/src/AsyncSelect/AsyncSelect.tsx
@@ -81,7 +81,6 @@ const AsyncSelect = forwardRef(
       defaultOptions,
       loadOptions,
       isClearable,
-      variant,
       iconLeft,
       ...props
     }: AsyncSelectProps<Option, IsMulti, Group>,
@@ -91,6 +90,7 @@ const AsyncSelect = forwardRef(
       | null
   ) => {
     const { t } = useTranslation();
+    const variant = useComponentVariant();
     const theme = useTheme();
     const spaceProps = getSubset(props, propTypes.space);
     const error = !!(errorMessage || errorList);
@@ -112,6 +112,7 @@ const AsyncSelect = forwardRef(
               hasIcon: Boolean(iconLeft),
               theme,
               error,
+              variant,
               maxHeight,
               windowed: false,
               hasDefaultOptions: Boolean(defaultOptions),
diff --git a/src/AsyncSelect/AsyncSelectComponents.tsx b/src/AsyncSelect/AsyncSelectComponents.tsx
index a1bce426a..824ee99d8 100644
--- a/src/AsyncSelect/AsyncSelectComponents.tsx
+++ b/src/AsyncSelect/AsyncSelectComponents.tsx
@@ -12,7 +12,6 @@ import {
 import { components, GroupBase } from "react-select";
 import { OptionProps } from "react-select";
 import { IconName } from "@nulogy/icons";
-import { useComponentVariant } from "../NDSProvider/ComponentVariantContext";
 import type { ComponentVariant } from "../NDSProvider/ComponentVariantContext";
 import { StyledOption } from "../Select/SelectOption";
 import { InputIcon } from "../Icon/Icon";
@@ -106,15 +105,8 @@ export const SelectMenu = <Option, IsMulti extends boolean, Group extends GroupB
 export function SelectOption<Option, IsMulti extends boolean, Group extends GroupBase<Option>>(
   props: OptionProps<Option, IsMulti, Group> & { variant?: ComponentVariant }
 ) {
-  const variant = useComponentVariant(props.variant);
-
   return (
-    <StyledOption
-      isSelected={props.isSelected}
-      isFocused={props.isFocused}
-      variant={variant}
-      data-testid="select-option"
-    >
+    <StyledOption isSelected={props.isSelected} isFocused={props.isFocused} data-testid="select-option">
       <components.Option {...props}>{props.children}</components.Option>
     </StyledOption>
   );
diff --git a/src/Select/Select.tsx b/src/Select/Select.tsx
index 6086d7d06..0b7ffea5d 100644
--- a/src/Select/Select.tsx
+++ b/src/Select/Select.tsx
@@ -8,9 +8,9 @@ import { Field } from "../Form";
 import { MaybeFieldLabel } from "../FieldLabel";
 import { InlineValidation } from "../Validation";
 import customStyles from "../Select/customReactSelectStyles";
+import { useComponentVariant } from "../NDSProvider/ComponentVariantContext";
 import { getSubset } from "../utils/subset";
 import { addStyledProps, StyledProps } from "../StyledProps";
-import { ComponentVariant, useComponentVariant } from "../NDSProvider/ComponentVariantContext";
 import {
   SelectControl,
   SelectMultiValue,
@@ -35,7 +35,6 @@ interface CustomProps<Option extends NDSOption, IsMulti extends boolean, Group e
   extends StyledProps {
   autocomplete?: Props<Option, IsMulti, Group>["isSearchable"];
   labelText?: string;
-  size?: ComponentVariant;
   requirementText?: string;
   helpText?: ReactNode;
   disabled?: Props<Option, IsMulti, Group>["isDisabled"];
@@ -86,7 +85,6 @@ const NDSSelect = forwardRef(
       multiselect,
       placeholder,
       components,
-      size,
       windowThreshold,
       options,
       styles,
@@ -98,11 +96,11 @@ const NDSSelect = forwardRef(
       | null
   ) => {
     const { t } = useTranslation();
+    const variant = useComponentVariant();
     const theme = useTheme();
     const styledProps = getSubset(props, addStyledProps);
     const error = !!(errorMessage || errorList);
     const optionsRef = React.useRef(options);
-    const componentVariant = useComponentVariant(size);
     const optionsLength = React.useMemo(() => calcOptionsLength(options), [options]);
     const isWindowed = optionsLength >= windowThreshold;
 
@@ -114,8 +112,8 @@ const NDSSelect = forwardRef(
     const stylesConfig = customStyles<Option, IsMulti, Group>({
       theme: theme,
       error,
+      variant,
       maxHeight,
-      variant: componentVariant,
       windowed: options.length > windowThreshold,
     });
 
@@ -144,11 +142,7 @@ const NDSSelect = forwardRef(
             inputId={id}
             styles={styles ? styles(stylesConfig) : stylesConfig}
             components={{
-              Option: (props) => (
-                <SelectOption variant={componentVariant} {...props}>
-                  {props.children}
-                </SelectOption>
-              ),
+              Option: (props) => <SelectOption {...props}>{props.children}</SelectOption>,
               Control: SelectControl,
               MultiValue: SelectMultiValue,
               ClearIndicator: SelectClearIndicator,
diff --git a/src/Select/SelectOption.tsx b/src/Select/SelectOption.tsx
index b73e6c3ae..ca08d6b60 100644
--- a/src/Select/SelectOption.tsx
+++ b/src/Select/SelectOption.tsx
@@ -3,14 +3,12 @@ import styled from "styled-components";
 import { components, GroupBase, OptionProps } from "react-select";
 import { typography } from "styled-system";
 import { subPx } from "../utils";
-import { ComponentVariant, useComponentVariant } from "../NDSProvider/ComponentVariantContext";
 import { variant } from "../StyledProps";
 import { NDSOption } from "./Select";
 
 type StyledOptionProps = {
   isSelected: boolean;
   isFocused: boolean;
-  variant: ComponentVariant;
 };
 
 export const StyledOption = styled.div<StyledOptionProps>(
@@ -51,28 +49,20 @@ export const StyledOption = styled.div<StyledOptionProps>(
     })
 );
 
-export type SelectOptionProps<
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface SelectOptionProps<
   Option = NDSOption,
   IsMulti extends boolean = boolean,
   Group extends GroupBase<Option> = GroupBase<Option>,
-> = OptionProps<Option, IsMulti, Group> & {
-  variant?: ComponentVariant;
-};
+> extends OptionProps<Option, IsMulti, Group> {}
 
 export function SelectOption<
-  Option = NDSOption,
+  Option extends NDSOption = NDSOption,
   IsMulti extends boolean = boolean,
   Group extends GroupBase<Option> = GroupBase<Option>,
 >(props: SelectOptionProps<Option, IsMulti, Group>) {
-  const variant = useComponentVariant(props.variant);
-
   return (
-    <StyledOption
-      isSelected={props.isSelected}
-      isFocused={props.isFocused}
-      variant={variant}
-      data-testid="select-option"
-    >
+    <StyledOption isSelected={props.isSelected} isFocused={props.isFocused} data-testid="select-option">
       <components.Option {...props}>{props.children}</components.Option>
     </StyledOption>
   );
diff --git a/src/Select/customReactSelectStyles.tsx b/src/Select/customReactSelectStyles.tsx
index 032897a26..c8dd24280 100644
--- a/src/Select/customReactSelectStyles.tsx
+++ b/src/Select/customReactSelectStyles.tsx
@@ -84,13 +84,18 @@ export function showIndicatorSeparator({ hasValue, isClearable, isMulti }) {
   return hasValue && (isMulti || isClearable);
 }
 
-interface Args {
+interface CustomStylesArgs {
   theme: DefaultNDSThemeType;
-  [key: string]: any;
+  error: boolean;
+  maxHeight: string;
+  windowed: boolean;
+  variant: ComponentVariant;
+  hasIcon?: boolean;
+  hasDefaultOptions?: boolean;
 }
 
 const customStyles: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(
-  args: Args
+  args: CustomStylesArgs
 ) => StylesConfig<Option, IsMulti, Group> = ({
   theme,
   error,