@nuskin/foundation-ui-components 1.30.2 → 1.31.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@nuskin/foundation-ui-components",
-    "version": "1.30.2",
+    "version": "1.31.0",
     "description": "It is a foundation library written in react, that provides common components to all UI pages",
     "main": "src/common/index.ts",
     "repository": {
@@ -57,6 +57,7 @@
         "react-dom": "^18.2.0",
         "react-material-ui-carousel": "^3.4.2",
         "react-slick": "^0.29.0",
+        "react-window": "^1.8.10",
         "slick-carousel": "^1.8.1",
         "typescript": "^5.4.2"
     },
@@ -86,6 +87,7 @@
         "@types/ramda": "^0.29.7",
         "@types/react-slick": "^0.23.11",
         "@types/react-test-renderer": "^18.0.5",
+        "@types/react-window": "^1.8.8",
         "babel-jest": "^29.7.0",
         "babel-loader": "^9.1.3",
         "babel-plugin-emotion": "^11.0.0",

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

@@ -1,6 +1,6 @@
 import { styled, ColorUtils } from '@nuskin/foundation-theme';
 import { NsInputField } from '../input';
-import { Popper } from '@mui/material';
+import { Popper, autocompleteClasses } from '@mui/material';
 const { getGenomeColor } = ColorUtils;
 
 export const StyledTextField = styled(NsInputField)`
@@ -13,9 +13,12 @@ export const StyledTextField = styled(NsInputField)`
     }
 `;
 
-export const StyledPopper = styled(Popper)`
-    width: 100% !important;
-    #custom_autocomplete_dropdown-listbox{
-        overflow-x:hidden;
-    }
-`
+export const StyledPopper = styled(Popper)({
+    [`& .${autocompleteClasses.listbox}`]: {
+        boxSizing: 'border-box',
+        '& ul': {
+            padding: 0,
+            margin: 0,
+        },
+    },
+});

package/src/common/autocomplete/NsAutocomplete.tsx

@@ -1,36 +1,19 @@
-import React, {
-    PropsWithChildren,
-    ReactElement,
-    useEffect,
-    useRef,
-    useState,
-} from 'react';
-
-import {
-    Autocomplete,
-    AutocompleteRenderInputParams,
-    Popper,
-} from '@mui/material';
+import React, { PropsWithChildren, ReactElement, useEffect, useRef, useState } from 'react';
+
+import { Autocomplete, AutocompleteRenderInputParams, ListSubheader, Popper, useMediaQuery, useTheme } from '@mui/material';
 
 import { LineLoader } from './helper/LineLoader';
 import { RecentClearAll } from './helper/RecentClearAll';
-import {
-    renderGroupBy,
-    renderGroupName,
-    renderOptionLabel,
-} from './helper/renderGroupName';
+import { renderGroupBy, renderOptionLabel } from './helper/renderGroupName';
 import { SeeMoreButton } from './helper/SeeMoreButton';
-import {
-    StyledPopper,
-    StyledTextField,
-} from './NsAutocomplete.styled';
-import {
-    ComponentBoxProps,
-    NsAutocompleteProps,
-    OptionsProps,
-} from './types.d';
+import { StyledPopper, StyledTextField } from './NsAutocomplete.styled';
+import { ComponentBoxProps, NsAutocompleteProps, OptionsProps } from './types.d';
+import { VariableSizeList, ListChildComponentProps } from 'react-window';
 
+const LISTBOX_PADDING = 8;
 const noop = () => {};
+const OuterElementContext = React.createContext({});
+
 const NsAutocomplete = ({
     id = 'custom_autocomplete_dropdown',
     options,
@@ -50,9 +33,10 @@ const NsAutocomplete = ({
     value,
     isFilterEnabled = true,
     fullWidth,
-}: PropsWithChildren<NsAutocompleteProps>):ReactElement => {
+    onKeypress
+}: PropsWithChildren<NsAutocompleteProps>): ReactElement => {
+    const listboxRef = useRef<any | null>(null);
     const [scrollTopPosition, setScrollTopPosition] = useState(0);
-    const listboxRef = useRef<HTMLUListElement | null>(null);
 
     useEffect(() => {
         if (listboxRef.current && options.length > 0) {
@@ -60,6 +44,13 @@ const NsAutocomplete = ({
         }
     }, [options, scrollTopPosition]);
 
+    const OuterElementType = React.forwardRef((props: any, ref) => {
+        const outerProps = React.useContext(OuterElementContext);
+        return <ul ref={ref} {...props} {...outerProps} />;
+    });
+
+    OuterElementType.displayName = 'OuterElementType';
+
     const renderInput = (params: AutocompleteRenderInputParams) => (
         <StyledTextField
             {...(params as any)}
@@ -82,54 +73,132 @@ const NsAutocomplete = ({
             </li>
         );
 
-    const renderListBoxComponent = ({ children, ...rest }: ComponentBoxProps): React.JSX.Element => {
+    const renderRow = (props: ListChildComponentProps) => {
+        const { data, index, style } = props;
+        const dataSet = data[index];
+        const option = dataSet?.[1];
+        const inlineStyle = {
+            top: (style.top as number) + LISTBOX_PADDING,
+        };
+
+        if (Object.hasOwn(dataSet, 'group')) {
+            return (
+                <ListSubheader key={dataSet.key} component="div" style={inlineStyle}>
+                    {dataSet.group}
+                </ListSubheader>
+            );
+        }
+
         return (
-            <ul
-                aria-labelledby={rest['aria-labelledby']}
-                onMouseDown={rest.onMouseDown}
-                role={rest.role}
-                id={rest.id}
-                className={rest.className}
-                ref={listboxRef}
-            >
-                <RecentClearAll
-                    show={clear?.show ?? false}
-                    text={clear?.text ?? 'Clear All'}
-                    onClick={clear?.onClear ?? noop}
-                    testId="autocomplete-clear-id"
-                    recentSearchText={clear?.recentSearchText ?? 'Your Recent Searches'}
-                />
-                {children}
-                <SeeMoreButton
-                    onSeeMore={seeMore?.onSeeMore}
-                    show={seeMore?.show}
-                    text={seeMore?.text}
-                    options={options}
-                    setScrollTopPosition={setScrollTopPosition}
-                    listboxRef={listboxRef}
-                />
-            </ul>
+            <div component="div" {...dataSet[0]} style={inlineStyle}>
+                {renderOption(props, option)}
+            </div>
         );
     };
+
+    const useResetCache = (data: any) => {
+        const ref = React.useRef<VariableSizeList>(null);
+        React.useEffect(() => {
+            if (ref.current != null) {
+                ref.current.resetAfterIndex(0, true);
+            }
+        }, [data]);
+        return ref;
+    };
+
+    const ListboxComponent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLElement>>(
+        function ListboxComponent(props, ref) {
+            const { children, ...other } = props;
+            const itemData: React.ReactElement[] = [];
+            (children as React.ReactElement[]).forEach(
+                (item: React.ReactElement & { children?: React.ReactElement[] }) => {
+                    itemData.push(item);
+                    itemData.push(...(item.children || []));
+                }
+            );
+
+            const theme = useTheme();
+            const smUp = useMediaQuery(theme.breakpoints.up('sm'), {
+                noSsr: true,
+            });
+            const itemCount = itemData.length;
+            const itemSize = smUp ? 36 : 48;
+
+            const getChildSize = (child: React.ReactElement) => {
+                if (Object.hasOwn(child, 'group')) {
+                    return 48;
+                }
+
+                return itemSize;
+            };
+
+            const getHeight = () => {
+                if (itemCount > 8) {
+                    return 8 * itemSize;
+                }
+                return itemData.map(getChildSize).reduce((a, b) => a + b, 0);
+            };
+
+            const gridRef = useResetCache(itemCount);
+
+            return (
+                <>
+                    <RecentClearAll
+                        show={clear?.show ?? false}
+                        text={clear?.text ?? 'Clear All'}
+                        onClick={clear?.onClear ?? noop}
+                        testId="autocomplete-clear-id"
+                        recentSearchText={clear?.recentSearchText ?? 'Your Recent Searches'}
+                    />
+                    <div ref={ref}>
+                        <OuterElementContext.Provider value={other}>
+                            <VariableSizeList
+                                itemData={itemData}
+                                height={getHeight() + 2 * LISTBOX_PADDING}
+                                width="100%"
+                                ref={gridRef}
+                                outerElementType={OuterElementType}
+                                innerElementType="ul"
+                                itemSize={(index) => getChildSize(itemData[index])}
+                                overscanCount={5}
+                                itemCount={itemCount}
+                            >
+                                {renderRow}
+                            </VariableSizeList>
+                        </OuterElementContext.Provider>
+                    </div>
+                    <SeeMoreButton
+                        onSeeMore={seeMore?.onSeeMore}
+                        show={seeMore?.show}
+                        text={seeMore?.text}
+                        options={options}
+                        setScrollTopPosition={setScrollTopPosition}
+                        listboxRef={listboxRef}
+                    />
+                </>
+            );
+        }
+    );
+
     return (
         <>
             <LineLoader show={loading ?? false} />
             <Autocomplete
-                openOnFocus
+                open
                 id={id}
-                disablePortal
+                disableListWrap
                 className={className}
-                options={options}
                 loading={loading}
                 noOptionsText={noOptionsText}
+                PopperComponent={fullWidth ? StyledPopper : Popper}
+                ListboxComponent={ListboxComponent}
+                options={options}
                 groupBy={renderGroupBy}
                 getOptionLabel={renderOptionLabel}
-                renderOption={renderOption as any}
-                renderInput={renderInput}
-                PopperComponent={fullWidth ? StyledPopper : Popper} // TODO:https://code.tls.nuskin.io/ns-am/content-foundation/nuskin-app/-/jobs/1355817
-                ListboxComponent={renderListBoxComponent}
-                renderGroup={renderGroupName}
+                renderOption={(props, option, state) => [props, option, state.index] as React.ReactNode}
+                renderGroup={(params) => params as any}
                 onChange={onChange}
+                renderInput={renderInput}
                 onInputChange={onInputChange}
                 value={value}
                 onFocus={onFocus ?? noop}
@@ -140,6 +209,7 @@ const NsAutocomplete = ({
                         : (options) => options
                 }
                 freeSolo
+                onKeyDown={onKeypress}
             />
         </>
     );

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

@@ -1,4 +1,4 @@
-import React, { ReactElement } from 'react';
+import React, { ReactElement, SyntheticEvent } from 'react';
 
 import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
 import type { Meta, StoryObj } from '@storybook/react';
@@ -65,6 +65,7 @@ export default {
         iconEnd: (<NsIcon name="roundedClose" size="small" colorOverride="#F5F5F5" />) as ReactElement,
         placeholder: 'Search',
         fullWidth: false,
+        onKeypress: (e: SyntheticEvent) => console.log(e),
     },
 } as MetaStory;
 

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

@@ -17,6 +17,7 @@ export type NsAutocompleteProps = {
         reason Can be: "input" (user input), "reset" (programmatic change), "clear".
      */
     onInputChange(event: SyntheticEvent, value: string, reason: string): void;
+    onKeypress?:(event:SyntheticEvent) => void;
     /*
         event The event source of the callback.
         value The new value of the component.