@nuskin/foundation-ui-components 1.32.0 → 1.32.1-td-849.2

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@nuskin/foundation-ui-components",
-    "version": "1.32.0",
+    "version": "1.32.1-td-849.2",
     "description": "It is a foundation library written in react, that provides common components to all UI pages",
     "main": "src/common/index.ts",
     "repository": {

package/src/common/autocomplete/NsAutocomplete.tsx

@@ -1,26 +1,36 @@
-import React, { PropsWithChildren, ReactElement, useEffect, useRef, useState } from 'react';
+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, renderOptionLabel } from './helper/renderGroupName';
+import {
+    renderGroupBy,
+    renderGroupName,
+    renderOptionLabel,
+} from './helper/renderGroupName';
 import { SeeMoreButton } from './helper/SeeMoreButton';
-import { StyledPopper, StyledTextField } from './NsAutocomplete.styled';
-import { ComponentBoxProps, NsAutocompleteProps, OptionsProps } from './types.d';
-import { VariableSizeList, ListChildComponentProps } from 'react-window';
+import {
+    StyledPopper,
+    StyledTextField,
+} from './NsAutocomplete.styled';
+import {
+    ComponentBoxProps,
+    NsAutocompleteProps,
+    OptionsProps,
+} from './types.d';
 
-const LISTBOX_PADDING = 8;
 const noop = () => {};
-const OuterElementContext = React.createContext({});
-
 const NsAutocomplete = ({
     id = 'custom_autocomplete_dropdown',
     options,
@@ -41,9 +51,9 @@ const NsAutocomplete = ({
     isFilterEnabled = true,
     fullWidth,
     onKeypress,
-}: PropsWithChildren<NsAutocompleteProps>): ReactElement => {
-    const listboxRef = useRef<any | null>(null);
+}: PropsWithChildren<NsAutocompleteProps>):ReactElement => {
     const [scrollTopPosition, setScrollTopPosition] = useState(0);
+    const listboxRef = useRef<HTMLUListElement | null>(null);
 
     useEffect(() => {
         if (listboxRef.current && options.length > 0) {
@@ -51,13 +61,6 @@ 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)}
@@ -80,132 +83,59 @@ const NsAutocomplete = ({
             </li>
         );
 
-    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>
-            );
-        }
-
+    const renderListBoxComponent = ({ children, ...rest }: ComponentBoxProps): React.JSX.Element => {
         return (
-            <div component="div" {...dataSet[0]} style={inlineStyle}>
-                {renderOption(props, option)}
-            </div>
+            <ul
+                aria-labelledby={rest['aria-labelledby']}
+                onMouseDown={rest.onMouseDown}
+                role={rest.role}
+                id={rest.id}
+                className={rest.className}
+                ref={listboxRef}
+                style={{
+                    maxHeight: '300px', 
+                    padding: '0', 
+                    margin: '0', 
+                }}
+            >
+                <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>           
         );
     };
-
-    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
-                open
+                openOnFocus
                 id={id}
-                disableListWrap
+                disablePortal
                 className={className}
+                options={options}
                 loading={loading}
                 noOptionsText={noOptionsText}
-                PopperComponent={fullWidth ? StyledPopper : Popper}
-                ListboxComponent={ListboxComponent}
-                options={options}
                 groupBy={renderGroupBy}
                 getOptionLabel={renderOptionLabel}
-                renderOption={(props, option, state) => [props, option, state.index] as React.ReactNode}
-                renderGroup={(params) => params as any}
-                onChange={onChange}
+                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}
+                onChange={onChange}
                 onInputChange={onInputChange}
                 value={value}
                 onFocus={onFocus ?? noop}

package/src/common/autocomplete/helper/SeeMoreButton.tsx

@@ -6,17 +6,22 @@ import { NsTypography, OptionsProps } from '../../';
 
 const { getGenomeColor } = ColorUtils;
 export const ListStyled = styled.div`
+    position: sticky;
+    bottom: 0;
+    right: 0;
     display: flex;
     width: 100%;
     flex-direction: row;
     align-items: center;
     gap: 10px;
     padding: 0;
-    margin: 4px 8px;
+    margin: 0px 4px;
     cursor: pointer;
     &:hover {
         background: ${({ theme }) => getGenomeColor(theme, 'A10')};
     }
+    background-color: white;
+    height: 30px;
 `;
 
 type SeeMoreButtonProps = {