@nuskin/foundation-ui-components 1.1.0 → 1.1.1

package/src/common/alert/{NsAlert.styled.ts → NsAlert.styled.tsx}

@@ -3,27 +3,27 @@ import { styled, css, ColorUtils, FoundationTheme } from '@nuskin/foundation-the
 
 const { color } = ColorUtils;
 
-import type { AlertContainerParams, AlertType, AlertParams, TypeMapCSS } from './types.d';
-const gutter_width = '10px';
-const close_button_width = '12px';
-const icon_width = '24px';
+import type { AlertContainerParams, AlertType, AlertParams, TypeMapCSS } from './types';
+const gutterWidth = '10px';
+const closeButtonWidth = '12px';
+const iconWidth = '24px';
 
 const TypeMap: TypeMapCSS = {
     banner: {
-        'min-height': '114px',
+        minHeight: '114px',
         padding: '15px 45px',
-        'content-column-start': 'row-center',
-        'content-column-end': 'row-center',
-        'bar-position': 'top',
-        'foot-visibility': 'block',
+        contentColumnStart: 'row-center',
+        contentColumnEnd: 'row-center',
+        barPosition: 'top',
+        footVisibility: 'block',
     },
     card: {
-        'min-height': '72px',
+        minHeight: '72px',
         padding: '24px 24px',
-        'content-column-start': 'row-left',
-        'content-column-end': 'row-right',
-        'bar-position': 'left',
-        'foot-display': 'none',
+        contentColumnStart: 'row-left',
+        contentColumnEnd: 'row-right',
+        barPosition: 'left',
+        footDisplay: 'none',
     },
 };
 
@@ -53,14 +53,14 @@ const fontFamilyStyles = css`
 export const Alert = styled.div<AlertParams>`
     position: relative;
     display: grid;
-    grid-template-columns: [row-left] ${icon_width} [space] ${gutter_width} [row-center] auto [space] ${gutter_width} [row-right] ${close_button_width};
+    grid-template-columns: [row-left] ${iconWidth} [space] ${gutterWidth} [row-center] auto [space] ${gutterWidth} [row-right] ${closeButtonWidth};
     grid-template-rows: [row1] auto;
     grid-auto-row: auto;
     grid-auto-flow: row;
     background-color: ${color('primary', 'white')};
     border: 1px solid ${color('primary', 'black')};
-    min-height: ${({ type }) => TypeMap?.[type]?.['min-height']};
-    padding: ${({ type }) => TypeMap?.[type]?.['padding']};
+    min-height: ${({ type }) => TypeMap?.[type]?.minHeight};
+    padding: ${({ type }) => TypeMap?.[type]?.padding};
     color: ${(props) => color(contextType?.[props?.context] as FoundationTheme.AppColors, '40')(props)} };
 `;
 
@@ -78,8 +78,8 @@ export const AlertIcon = styled.div`
     grid-column-end: row-left;
     grid-row-start: row1;
     grid-row-end: row1;
-    width: ${icon_width};
-    height: ${icon_width};
+    width: ${iconWidth};
+    height: ${iconWidth};
 `;
 
 export const AlertHead = styled.div`
@@ -102,14 +102,14 @@ export const AlertHead = styled.div`
 export const AlertContent = styled.div<{ type: AlertType }>`
     margin-top: 8px;
     color: ${color('primary', 'black')};
-    grid-column-start: ${({ type }) => TypeMap?.[type]?.['content-column-start']};
-    grid-column-end: ${({ type }) => TypeMap?.[type]?.['content-column-end']};
+    grid-column-start: ${({ type }) => TypeMap?.[type]?.contentColumnStart};
+    grid-column-end: ${({ type }) => TypeMap?.[type]?.contentColumnEnd};
 `;
 
 export const AlertFoot = styled.div<{ type: AlertType }>`
     margin-top: 8px;
     color: ${color('primary', 'black')};
-    display: ${({ type }) => TypeMap?.[type]?.['foot-display']};
+    display: ${({ type }) => TypeMap?.[type]?.['footDisplay']};
     ${fontFamilyStyles}
     font-weight: 300;
     font-size: 14px;

package/src/common/alert/NsAlert.tsx

@@ -1,6 +1,4 @@
 import React, { useEffect, useState } from 'react';
-import { FoundationTheme } from '@nuskin/foundation-theme';
-
 import {
     AlertContainer,
     Alert,
@@ -11,44 +9,15 @@ import {
     AlertFoot,
     AlertBody,
 } from './NsAlert.styled';
-import type { NsAlertProps, HeaderProps, ContextType, AlertType } from './types.d';
+import type { NsAlertProps, ContextType, AlertType } from './types.d';
 import { NsIcon } from '../icon';
-import { NsIconNameType } from '../icon/types';
-
-const Header: React.FC<HeaderProps> = ({ children, head }) => (
-    <>
-        {children}
-        {head}
-    </>
-);
-
-function isValidContextValue(value: string): boolean {
-    return (value as ContextType) !== undefined;
-}
-
-function isValidTypeValue(value: string): boolean {
-    return (value as AlertType) !== undefined;
-}
-
-const colorMap: { [key: string]: FoundationTheme.PaletteColors } = {
-    error: 'error',
-    notice: 'info',
-    success: 'secondary',
-    warning: 'warning',
-    default: 'info',
-};
-
-const iconMap: { [key: string]: NsIconNameType } = {
-    error: 'alertError',
-    success: 'success',
-    warning: 'warning',
-    default: 'infoFilled',
-};
+import Header, { colorMap, iconMap } from './Header';
+import useWindowSize from '../hooks/useWindowSize';
 
 export default function NsAlert({
     context = 'info',
     title = 'Information',
-    threshhold = 600,
+    threshold = 600,
     type = 'banner',
     visible = false,
     head,
@@ -57,76 +26,42 @@ export default function NsAlert({
     onDismiss = undefined,
 }: NsAlertProps) {
     const [alertType, setAlertType] = useState('banner');
-    const [windowWidth, setWindowWidth] = useState(0);
+    const windowSize = useWindowSize();
 
     const hasDismissListener = typeof onDismiss === 'function';
 
-    const getColor = () => {
-        return colorMap[context] || colorMap.default;
-    };
-
-    const getIcon = () => {
-        return iconMap[context] || iconMap.default;
-    };
-
-    const getTitleText = () => {
-        if (title) {
-            return title;
-        }
-    };
-
-    const handleDismiss = () => {
-        if (hasDismissListener) {
-            onDismiss();
-        }
-    };
-
-    const handleResize = () => {
-        setWindowWidth(window.innerWidth);
-    };
-
-    useEffect(() => {
-        let aType = '';
-        if (type === 'auto') {
-            aType = windowWidth < threshhold ? 'card' : 'banner';
-        } else {
-            aType = type;
-        }
-        setAlertType(aType);
-    }, [threshhold, type, windowWidth]);
-
     useEffect(() => {
-        if (!isValidContextValue(context)) {
+        if (!context) {
             console.error(`Invalid prop value for 'context': ${context}`);
         }
-
-        if (!isValidTypeValue(type)) {
+        if (!type) {
             console.error(`Invalid prop value for 'type': ${type}`);
         }
-    }, [context, type]);
-
-    useEffect(() => {
-        setWindowWidth(window?.innerWidth);
-        window.addEventListener('resize', handleResize);
-        return () => {
-            window.removeEventListener('resize', handleResize);
-        };
-    }, []);
+        if (type === 'auto') {
+            setAlertType(windowSize.width < threshold ? 'card' : 'banner');
+        } else {
+            setAlertType(type);
+        }
+    }, [threshold, type, windowSize.width, context]);
 
     return (
         <AlertContainer visible={visible} data-testid="alert-container">
             <Alert type={alertType as AlertType} context={context as ContextType}>
                 <AlertIcon>
-                    <NsIcon name={getIcon()} color={getColor()} size="large" />
+                    <NsIcon
+                        name={iconMap[context] || iconMap.default}
+                        color={colorMap[context] || colorMap.default}
+                        size="large"
+                    />
                 </AlertIcon>
                 <AlertHead>
-                    <Header head={<span>{getTitleText()}</span>}>{head}</Header>
+                    <Header head={<span>{title}</span>}>{head}</Header>
                 </AlertHead>
-                {hasDismissListener ? (
-                    <AlertCloseButton data-testid="alert-close-button" onClick={handleDismiss}>
+                {hasDismissListener && (
+                    <AlertCloseButton data-testid="alert-close-button" onClick={onDismiss}>
                         <NsIcon name="close" size="small" />
                     </AlertCloseButton>
-                ) : null}
+                )}
                 <AlertContent type={alertType as AlertType}>
                     <AlertBody>{body}</AlertBody>
                     {foot ? <AlertFoot type={alertType as AlertType}>{foot}</AlertFoot> : null}

package/src/common/alert/types.d.ts

@@ -3,7 +3,7 @@ import { ReactNode, CSSProperties } from 'react';
 export interface NsAlertProps {
     context?: string;
     title?: string;
-    threshhold?: number; // TODO: update to threshold, i.e. remove extra h
+    threshold?: number;
     type?: string;
     visible?: boolean;
     head?: ReactNode;
@@ -30,12 +30,12 @@ export type AlertParams = {
 };
 
 export type CustomCSSProperties = CSSProperties & {
-    'min-height'?: string;
-    'content-column-start'?: string;
-    'content-column-end'?: string;
-    'bar-position'?: string;
-    'foot-visibility'?: string;
-    'foot-display'?: string;
+    minHeight?: string;
+    contentColumnStart?: string;
+    contentColumnEnd?: string;
+    barPosition?: string;
+    footVisibility?: string;
+    footDisplay?: string;
 };
 
 export interface TypeMapCSS {

package/src/common/auth-dropdown/NsAuthDropdown.spec.tsx

@@ -10,27 +10,45 @@ describe('NsAuthDropdown', () => {
         signUpLinkText: 'Sign Up',
         signUpLinkPrefixText: 'Do not have an account?',
         titleText: 'Welcome',
-        closeOnMouseLeave: false,
     };
 
-    it('should render component with title text', () => {
+    it('1. should render component with title text', () => {
         render(<NsAuthDropdown {...props} />);
         expect(screen.getByText('Welcome')).toBeInTheDocument();
     });
 
-    it('should render the sign in button with text', () => {
+    it('2. should render the sign in button with text', () => {
         render(<NsAuthDropdown {...props} />);
         const authHead = screen.getByTestId('auth-head');
         fireEvent.click(authHead);
         expect(screen.getByTestId('sign-in-btn')).toBeInTheDocument();
-        expect(screen.getByTestId('sign-in-btn')).toHaveTextContent('Sign In');
+        expect(screen.getByTestId('sign-in-btn')).toHaveTextContent(props.signInBtnText);
+        expect(screen.getByTestId('signup-link')).toHaveTextContent(props.signUpLinkText);
     });
 
-    it('should have the correct href attribute in SignUpLink', () => {
+    it('3. should have the correct href attribute in SignUpLink', () => {
         render(<NsAuthDropdown {...props} />);
         const authHead = screen.getByTestId('auth-head');
         fireEvent.click(authHead);
         const signUpLink = screen.getByTestId('signup-link');
         expect(signUpLink).toHaveAttribute('href', '/signUp');
     });
+    it('4. should close dropdown on mouse leave', () => {
+        const { container } = render(<NsAuthDropdown {...props} closeOnMouseLeave={true} />);
+        const authHead = screen.getByTestId('auth-head');
+        fireEvent.click(authHead);
+        expect(screen.getByTestId('sign-in-btn')).toHaveTextContent('Sign In');
+        const wrapper = container.querySelector('.auth-wrapper');
+        if (wrapper) fireEvent.mouseLeave(wrapper);
+        expect(container.querySelector('.auth-wrapper')).toBeNull();
+    });
+    it('5. should not close dropdown on mouse leave', () => {
+        const { container } = render(<NsAuthDropdown {...props} closeOnMouseLeave={false} />);
+        const authHead = screen.getByTestId('auth-head');
+        fireEvent.click(authHead);
+        expect(screen.getByTestId('sign-in-btn')).toHaveTextContent('Sign In');
+        const wrapper = container.querySelector('.auth-wrapper');
+        if (wrapper) fireEvent.mouseLeave(wrapper);
+        expect(container.querySelector('.auth-wrapper')).not.toBeNull();
+    });
 });

package/src/common/auth-dropdown/NsAuthDropdown.styled.ts

@@ -1,4 +1,9 @@
 import { styled, ColorUtils } from '@nuskin/foundation-theme';
+import { DarkModeEnabledOption } from '../common.types';
+import { skipDarkModeEnabled } from '../util';
+
+//[TODO-Arun] - Use from custom color variables
+// const MAGENTA_COLOR = '#bb29bb';
 
 const { color, paletteColor } = ColorUtils;
 
@@ -44,8 +49,10 @@ export const Triangle = styled.div`
         box-shadow: 0 0 5px 0 ${color('neutral', '20')};
     }
 `;
-
-export const AuthHead = styled.div<{ darkModeEnabled: boolean }>`
+const options = {
+    shouldForwardProp: skipDarkModeEnabled,
+};
+export const AuthHead = styled('div', options)<DarkModeEnabledOption>`
     cursor: pointer;
     padding: 5px 10px;
     display: flex;

package/src/common/auth-dropdown/NsAuthDropdown.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useCallback, useState } from 'react';
 import { NsIcon } from '../icon';
 import {
     AuthDropdownContainer,
@@ -28,11 +28,11 @@ const NsAuthDropdown = ({
         setIsOpen((prevIsOpen) => !prevIsOpen);
     };
 
-    const closeDropdown = () => {
+    const closeDropdown = useCallback(() => {
         if (closeOnMouseLeave) {
             setIsOpen(false);
         }
-    };
+    }, [closeOnMouseLeave]);
 
     return (
         <AuthDropdownContainer>
@@ -40,7 +40,7 @@ const NsAuthDropdown = ({
                 <Button>{titleText}</Button>
                 <NsIcon testId="chevron-icon" name={isOpen ? 'arrowUp' : 'arrowDown'} color="primary" />
                 {isOpen ? (
-                    <div onMouseLeave={closeDropdown}>
+                    <div onMouseLeave={closeDropdown} className="auth-wrapper">
                         <Triangle />
                         <AuthDropdown>
                             <SignInButton href={signInRedirectLink} data-testid="sign-in-btn">

package/src/common/autocomplete/NsAutocomplete.spec.tsx

@@ -7,13 +7,12 @@ import userEvent from '@testing-library/user-event';
 import { act } from 'react-dom/test-utils';
 
 describe('CustomAutocomplete', () => {
-    test('should render autocomplete component', () => {
+    it('1. should render autocomplete component', () => {
         render(
             <NsAutocomplete
                 options={AutocompleteMockList}
-                onSelect={() => {}}
                 placeholder="autocomplete-input"
-                renderOptions={OptionUiComponent}
+                OptionsUI={OptionUiComponent}
                 inputValue=""
                 value=""
             />
@@ -21,13 +20,34 @@ describe('CustomAutocomplete', () => {
         const autocompleteInput = screen.getByPlaceholderText('autocomplete-input');
         expect(autocompleteInput).toBeInTheDocument();
     });
+    it('2. check that onChange gets called', () => {
+        const onSelectMock = jest.fn();
+        const onChangeMock = jest.fn();
+        render(
+            <NsAutocomplete
+                options={AutocompleteMockList}
+                onSelect={onSelectMock}
+                onChange={onChangeMock}
+                placeholder="autocomplete-input"
+                OptionsUI={OptionUiComponent}
+                inputValue=""
+                value=""
+            />
+        );
+        const autocompleteInput = screen.getByPlaceholderText('autocomplete-input');
+        expect(autocompleteInput).toBeInTheDocument();
+        act(() => {
+            userEvent.type(autocompleteInput, 'GS Facial');
+        });
+        expect(onChangeMock).toHaveBeenCalled();
+    });
 
-    test('displays options when typing in the input', async () => {
+    it('3. displays options when typing in the input', async () => {
         render(
             <NsAutocomplete
                 options={AutocompleteMockList}
                 onSelect={() => {}}
-                renderOptions={OptionUiComponent}
+                OptionsUI={OptionUiComponent}
                 placeholder="autocomplete-input"
                 inputValue=""
                 value=""
@@ -46,11 +66,13 @@ describe('CustomAutocomplete', () => {
         );
     }, 40000);
 
-    test('selects an option when clicking on it', async () => {
+    it('4. selects an option when clicking on it', async () => {
+        const onSelectMock = jest.fn();
         render(
             <NsAutocomplete
+                onSelect={onSelectMock}
                 options={AutocompleteMockList}
-                renderOptions={OptionUiComponent}
+                OptionsUI={OptionUiComponent}
                 placeholder="autocomplete-input"
                 inputValue=""
                 value=""
@@ -64,13 +86,14 @@ describe('CustomAutocomplete', () => {
             const optionLi = screen.getByText('GS Facial Spa');
             userEvent.click(optionLi);
         });
+        expect(onSelectMock).toHaveBeenCalled();
     }, 40000);
 
-    test('should load more options when clicking load more button', async () => {
+    it('5. should load more options when clicking load more button', async () => {
         render(
             <NsAutocomplete
                 options={AutocompleteMockList}
-                renderOptions={OptionUiComponent}
+                OptionsUI={OptionUiComponent}
                 placeholder="autocomplete-input"
                 seeMore={{
                     text: '',
@@ -91,11 +114,11 @@ describe('CustomAutocomplete', () => {
         });
     }, 40000);
 
-    test('should clear options when clicking clear button', async () => {
+    it('6. should clear options when clicking clear button', async () => {
         render(
             <NsAutocomplete
                 options={AutocompleteMockList}
-                renderOptions={OptionUiComponent}
+                OptionsUI={OptionUiComponent}
                 placeholder="autocomplete-input"
                 clear={{
                     text: '',

package/src/common/autocomplete/NsAutocomplete.stories.tsx

@@ -19,6 +19,8 @@ type ComponentType = typeof NsAutocomplete;
 type Story = StoryObj<ComponentType>;
 type MetaStory = Meta<ComponentType>;
 
+const PAGE_SIZE = 6;
+
 export default {
     title: 'Components/Inputs/NsAutocomplete',
     component: NsAutocomplete,
@@ -53,6 +55,19 @@ export default {
 const RenderAutocomplete = (args: NsAutocompleteProps) => {
     const [selectedOption, setSelectedOption] = useState<string | OptionsProps | null>(null);
     const [searchTerms, setSearchTerms] = useState<string>('');
+    const [pageNo, setPageNo] = useState(PAGE_SIZE);
+
+    const onSeeMoreHandler = () => {
+        setPageNo(PAGE_SIZE + PAGE_SIZE);
+    };
+
+    const AutoCompleteProps = {
+        ...args,
+        seeMore: {
+            ...args.seeMore,
+            onSeeMore: onSeeMoreHandler,
+        },
+    } as NsAutocompleteProps;
 
     const onSelect = (value: string | OptionsProps | null) => {
         setSelectedOption(value);
@@ -71,10 +86,11 @@ const RenderAutocomplete = (args: NsAutocompleteProps) => {
     return (
         <div>
             <NsAutocomplete
-                {...args}
+                {...AutoCompleteProps}
+                options={args.options.slice(0, pageNo)}
                 onChange={handleInputChange}
                 onSelect={onSelect}
-                renderOptions={OptionUiComponent}
+                OptionsUI={OptionUiComponent}
                 iconEnd={
                     <IconButton onClick={onInputClear}>
                         <NsIcon name="close" size="small" />

package/src/common/autocomplete/NsAutocomplete.tsx

@@ -1,13 +1,17 @@
-import React, { PropsWithChildren } from 'react';
+import React, { HTMLAttributes, PropsWithChildren, useCallback, useEffect, useRef, useState } from 'react';
 import { Autocomplete, AutocompleteRenderGroupParams, List, AutocompleteRenderInputParams } from '@mui/material';
 import { NsTypography, NsButton } from '../';
 import { NsAutocompleteProps, OptionsProps, ComponentBoxProps } from './types.d';
 import { StyledTextField } from './NsAutocomplete.styled';
 
+const renderOptionLabel = (option: OptionsProps) => option.value;
+
+const renderGroupBy = (option: OptionsProps) => option.group as string;
+
 const NsAutocomplete = ({
     id = 'custom_autocomplete_dropdown',
-    options = [],
-    renderOptions,
+    options,
+    OptionsUI,
     loading,
     noOptionsText,
     onSelect,
@@ -20,16 +24,34 @@ const NsAutocomplete = ({
     iconEnd,
     inputValue,
     value,
+    isFilterEnabled = true,
 }: PropsWithChildren<NsAutocompleteProps>) => {
-    const OptionUI = renderOptions;
+    const [scrollTopPosition, setScrollTopPosition] = useState(0);
+    const listboxRef = useRef<HTMLUListElement | null>(null);
 
-    const handleSelect = (event: React.SyntheticEvent<Element, Event>, value: string | OptionsProps | null) => {
-        onSelect ? onSelect(value) : null;
-    };
+    useEffect(() => {
+        if (listboxRef?.current && options.length > 0) {
+            listboxRef.current.scrollTop = scrollTopPosition;
+        }
+    }, [options, scrollTopPosition]);
 
-    const handleInputChange = (event: React.SyntheticEvent<Element, Event>, newInputValue: string) => {
-        onChange ? onChange(newInputValue) : null;
-    };
+    const handleSelect = useCallback(
+        (event: React.SyntheticEvent, value: string | OptionsProps | null) => {
+            if (typeof onSelect === 'function') {
+                onSelect(value);
+            }
+        },
+        [onSelect]
+    );
+
+    const handleInputChange = useCallback(
+        (event: React.SyntheticEvent, newInputValue: string) => {
+            if (typeof onChange === 'function') {
+                onChange(newInputValue);
+            }
+        },
+        [onChange]
+    );
 
     const renderInput = (params: AutocompleteRenderInputParams) => (
         <StyledTextField
@@ -45,15 +67,11 @@ const NsAutocomplete = ({
 
     // TODO: @vijayprathap need to check if we can remove object spread of ...props and ...params in renderInput
     const renderOption = (props: ComponentBoxProps, option: OptionsProps) => (
-        <li {...props}>
-            <OptionUI {...props} option={option} />
+        <li {...props} key={props.id}>
+            {OptionsUI ? <OptionsUI {...props} option={option} /> : null}
         </li>
     );
 
-    const renderOptionLabel = (option: OptionsProps) => option.value;
-
-    const renderGroupBy = (option: OptionsProps) => option.group as string;
-
     const renderGroupName = ({ key, group, children }: AutocompleteRenderGroupParams) => (
         <li key={key}>
             {group ? (
@@ -65,7 +83,7 @@ const NsAutocomplete = ({
         </li>
     );
 
-    const renderClearButton = () => {
+    const renderClearButton = useCallback(() => {
         const { show, onClear, text = 'Clear Search' } = clear || {};
         if (!show) {
             return null;
@@ -73,32 +91,47 @@ const NsAutocomplete = ({
         return (
             <li className="text-right p-3">
                 <NsButton onClick={onClear} data-testid="autocomplete-clear-id">
-                    <NsTypography variant={'p-xs'} weight="bold">
+                    <NsTypography variant="p-xs" weight="bold">
                         {text}
                     </NsTypography>
                 </NsButton>
             </li>
         );
-    };
+    }, [clear]);
+
+    const handleSeeMore = useCallback(() => {
+        const { onSeeMore } = seeMore || {};
+        // Remember the current scroll position
+        if (options?.length > 0 && listboxRef?.current) {
+            const lastScrollPosition = listboxRef.current?.scrollTop;
+            if (lastScrollPosition) {
+                setScrollTopPosition(lastScrollPosition);
+            }
+        }
+        if (onSeeMore && typeof onSeeMore === 'function') {
+            onSeeMore();
+        }
+    }, [seeMore, options]);
 
-    const renderSeeMoreButton = () => {
-        const { show, onSeeMore, text = 'See More Results' } = seeMore || {};
+    const renderSeeMoreButton = useCallback(() => {
+        const { show, text = 'See More Results' } = seeMore || {};
         if (!show) {
             return null;
         }
+
         return (
             <li className="text-center p-3">
-                <NsButton onClick={onSeeMore} data-testid="autocomplete-loadmore-id">
+                <NsButton onClick={handleSeeMore} data-testid="autocomplete-loadmore-id">
                     <NsTypography variant="p-xs" weight="bold">
                         {text}
                     </NsTypography>
                 </NsButton>
             </li>
         );
-    };
+    }, [seeMore, handleSeeMore]);
 
     const renderListBoxComponent = ({ children, ...otherProps }: ComponentBoxProps) => (
-        <List {...otherProps}>
+        <List {...otherProps} ref={listboxRef}>
             {renderClearButton()}
             {children}
             {renderSeeMoreButton()}
@@ -118,11 +151,17 @@ const NsAutocomplete = ({
             renderOption={renderOption}
             renderInput={renderInput}
             ListboxComponent={renderListBoxComponent}
+            ListboxProps={{ scrollTopPosition } as HTMLAttributes<HTMLUListElement>} // Pass the current scroll position
             renderGroup={renderGroupName}
             onChange={handleSelect}
             onInputChange={handleInputChange}
             value={value}
             inputValue={inputValue}
+            filterOptions={
+                isFilterEnabled
+                    ? undefined // Use default filtering behavior
+                    : (options) => options
+            }
             freeSolo
         />
     );