chore: better and more accurate types

nulogy · Jan 2, 2025 · e926f5b · e926f5b
1 parent 315d202
commit e926f5b
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 38 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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,