fix: add selectMenuPortalCSS for select component [WPB-21824] (#7590)

Author: e-maad

packages/react-ui-kit/src/Inputs/Select/Select.styles.ts

@@ -43,6 +43,7 @@ interface CustomStylesParams {
   menuCSS: CSSObject;
   groupCSS: CSSObject;
   groupHeadingCSS: CSSObject;
+  menuPortalCSS: CSSObject;
 }
 
 export const customStyles = ({
@@ -54,6 +55,7 @@ export const customStyles = ({
   menuCSS,
   groupCSS,
   groupHeadingCSS,
+  menuPortalCSS,
 }: CustomStylesParams): StylesConfig<Option, false, GroupBase<Option>> => ({
   indicatorSeparator: baseIndicatorSeparatorStyles,
   indicatorsContainer: provided => provided,
@@ -137,4 +139,5 @@ export const customStyles = ({
     backgroundColor: theme.Input.backgroundColor,
     ...groupCSS,
   }),
+  menuPortal: provided => ({...provided, ...menuPortalCSS}),
 });

packages/react-ui-kit/src/Inputs/Select/Select.tsx

@@ -56,6 +56,7 @@ export interface SelectProps<IsMulti extends boolean, Group extends GroupBase<Op
   selectMenuCSS?: CSSObject;
   selectGroupCSS?: CSSObject;
   selectGroupHeadingCSS?: CSSObject;
+  selectMenuPortalCSS?: CSSObject;
   label?: string;
   helperText?: string;
   error?: ReactElement;
@@ -84,6 +85,7 @@ export const Select = <IsMulti extends boolean = false, Group extends GroupBase<
   selectMenuCSS = {},
   selectGroupCSS = {},
   selectGroupHeadingCSS = {},
+  selectMenuPortalCSS = {},
   markInvalid = false,
   required = false,
   isSearchable = false,
@@ -127,6 +129,7 @@ export const Select = <IsMulti extends boolean = false, Group extends GroupBase<
             menuCSS: selectMenuCSS,
             groupCSS: selectGroupCSS,
             groupHeadingCSS: selectGroupHeadingCSS,
+            menuPortalCSS: selectMenuPortalCSS,
           }) as StylesConfig
         }
         components={{