@nuskin/foundation-ui-components 1.2.0 → 1.4.0

package/src/common/select/NsSelect.styled.tsx

@@ -1,8 +1,9 @@
+import { ColorUtils, FoundationTheme, styled } from '@nuskin/foundation-theme';
 import { HTMLAttributes } from 'react';
-import { styled, ColorUtils, FoundationTheme } from '@nuskin/foundation-theme';
-import { Themed } from '../common.types';
+
 import { getDropdownHeadBorder } from '../dropdown/NsDropdown.styled';
-const { color, paletteColor, isDarkMode } = ColorUtils;
+
+const { paletteColor, themeColor } = ColorUtils;
 
 interface SelectLabelProps extends HTMLAttributes<HTMLLabelElement> {
     errorMessage?: string;
@@ -30,7 +31,8 @@ export const SelectHead = styled.div<{ type: string; disabled: boolean }>`
     display: flex;
     justify-content: space-between;
     align-items: center;
-    border: ${getDropdownHeadBorder}
+    border: ${getDropdownHeadBorder};
+    background: ${paletteColor('primary', 'contrastText')};
     color: ${paletteColor('primary')};
     width: 207px;
     position: relative;
@@ -41,13 +43,7 @@ export const SelectButton = styled.div`
     padding-right: 10px;
 `;
 
-export const LeftArrowContainer = styled.div`
-    display: flex;
-    align-items: center;
-    padding-top: 30px;
-`;
-
-export const RightArrowContainer = styled.div`
+export const StyledArrowContainer = styled.div`
     display: flex;
     align-items: center;
     padding-top: 30px;
@@ -66,55 +62,6 @@ export const SelectList = styled.div<{ borderColor: FoundationTheme.PaletteColor
     overflow-y: auto;
 `;
 
-const getDividerColor = ({ theme }: Themed) =>
-    isDarkMode({ theme }) ? color('neutral', '20')({ theme }) : color('neutral', '30')({ theme });
-const getListBgColor = (props: Themed) => {
-    return !isDarkMode(props) ? color('accentColorB', '10')(props) : color('accentColorB', '50')(props);
-};
-type ContainerParam = { borderBottom: string; bgColor: string; color: string; hoveredBg: string };
-
-export const ListItemContainer = styled.div<{ showListDivider: boolean; isSelected: boolean }>`
-    ${({ showListDivider, isSelected, theme }) => {
-        const borderBottom = showListDivider ? getDividerColor({ theme }) : 'none';
-        const bgColor = isSelected ? paletteColor('primary')({ theme }) : 'white';
-        const color = isSelected ? 'white' : 'black';
-        const hoveredBg = getListBgColor({ theme });
-        return createListContainerStyle({ borderBottom, bgColor, color, hoveredBg });
-    }}
-`;
-function createListContainerStyle({ borderBottom, bgColor, color, hoveredBg }: ContainerParam) {
-    return `
-    cursor: pointer;
-    padding: 5px 0;
-    border-bottom: 1px solid ${borderBottom};
-    background-color: ${bgColor};
-    color: ${color};
-
-    &:hover {
-        background-color: ${hoveredBg};
-    }
-
-    &:last-child {
-        border-bottom: none;
-    }
-`;
-}
-
-const getListItemBgColor = ({ isSelected, theme }: { isSelected: boolean } & Themed) => {
-    if (isSelected) {
-        return paletteColor('primary')({ theme });
-    }
-    return getListBgColor({ theme });
-};
-
-const getListItemBorderLeftColor = ({ isSelected, theme }: { isSelected: boolean } & Themed) => {
-    if (isSelected) {
-        const color = paletteColor('primary')({ theme });
-        return `2px solid ${color}`;
-    }
-    return 'none';
-};
-
 export const SelectLabel = styled.label<SelectLabelProps>`
     display: block;
     margin-bottom: 5px;
@@ -122,14 +69,34 @@ export const SelectLabel = styled.label<SelectLabelProps>`
         errorMessage ? paletteColor('error')({ theme }) : paletteColor('primary')({ theme })};
 }
 `;
-
-export const ListItem = styled.div<{ isSelected: boolean }>(({ isSelected, theme }) => ({
-    padding: '5px 10px',
-    borderLeft: getListItemBorderLeftColor({ isSelected, theme }),
-    backgroundColor: isSelected ? paletteColor('primary', 'main')({ theme }) : 'white',
-    color: isSelected ? 'white' : 'black',
-    '&:hover': {
-        backgroundColor: getListItemBgColor({ isSelected, theme }),
-        fontWeight: 'bold',
-    },
-}));
+type StyledSelectOptionType = { showListDivider: boolean };
+export const StyledSelectOption = styled('div')<StyledSelectOptionType>(({ showListDivider, theme }) => {
+    const dividerColor = themeColor(
+        { colorType: 'neutral', variant: '30' },
+        { colorType: 'neutral', variant: '20' }
+    )({ theme });
+    const borderBottom = showListDivider ? dividerColor : 'none';
+    const hoveredBg = themeColor(
+        { colorType: 'accentColorB', variant: '20' },
+        { colorType: 'accentColorB', variant: '40' }
+    )({ theme });
+
+    return {
+        cursor: 'pointer',
+        borderBottom: `1px solid ${borderBottom}`,
+        backgroundColor: 'white',
+        color: 'black',
+        padding: '5px 10px',
+        '&.selected-option': {
+            backgroundColor: paletteColor('accentColorA')({ theme }),
+            color: 'white',
+        },
+        '&:hover': {
+            color: 'white',
+            backgroundColor: hoveredBg,
+        },
+        '&:last-child': {
+            borderBottom: 'none',
+        },
+    };
+});

package/src/common/select/NsSelect.tsx

@@ -1,22 +1,53 @@
-import React, { useState, useRef, useEffect, Children } from 'react';
+import React, { MouseEvent, useCallback, useMemo, useRef, useState } from 'react';
+
+import { useOnClickOutside } from '../hooks/useOnClickOutside';
+import { NsIcon } from '../icon';
+import { Show } from '../utility';
 import {
-    SelectContainer,
+    ErrorContainer,
+    StyledArrowContainer,
     SelectButton,
-    SelectList,
+    SelectContainer,
     SelectHead,
     SelectLabel,
+    SelectList,
     SelectMain,
-    LeftArrowContainer,
-    RightArrowContainer,
-    ErrorContainer,
 } from './NsSelect.styled';
-import { NsIcon } from '../icon';
-import { SelectProps } from './types.d';
+import { LabelValueType, SelectProps } from './types.d';
+
+const factorMap: any = {
+    reverse: {
+        right: -1,
+        left: 1,
+    },
+    forward: {
+        right: 1,
+        left: -1,
+    },
+};
+
+const arrowVisibility = (
+    total: number,
+    direction: 'left' | 'right',
+    reverse: boolean = false,
+    currentIndex: number | undefined = -1
+) => {
+    if (direction === 'left') {
+        if (!reverse) {
+            return currentIndex < 1 ? 'hidden' : 'visible';
+        } else {
+            return currentIndex >= total - 1 ? 'hidden' : 'visible';
+        }
+    }
+    if (!reverse) {
+        return currentIndex >= total - 1 ? 'hidden' : 'visible';
+    } else {
+        return currentIndex < 1 ? 'hidden' : 'visible';
+    }
+};
 const NsSelect: React.FC<SelectProps> = ({
-    selectedValue,
-    selectedLabel,
+    selected,
     onSelect,
-    children,
     disabled = false,
     type = 'outlined',
     placeholder = '',
@@ -30,32 +61,33 @@ const NsSelect: React.FC<SelectProps> = ({
     // eslint-disable-next-line no-unused-vars
     rules,
     reverseArrowControls,
+    renderOption,
+    options,
 }) => {
     const [isOpen, setIsOpen] = useState(false);
-    const [value, setValue] = useState(selectedValue || '');
-    const [selectedIndex, setSelectedIndex] = useState(-1);
+    const optionIndex = useMemo(() => {
+        if (typeof selected?.index === 'number') return selected.index;
+        return options.findIndex((option) => option.value === selected.value);
+    }, [options, selected]);
+    const [value, setValue] = useState<LabelValueType>({ ...selected, index: optionIndex });
     const selectContainerRef = useRef<HTMLDivElement>(null);
     const selectHeadRef = useRef<HTMLDivElement>(null);
 
-    const closeSelect = () => {
+    const closeMenuOnMouseLeave = useCallback(() => {
         if (closeOnMouseLeave) {
             setIsOpen(false);
         }
-    };
+    }, [closeOnMouseLeave]);
 
-    const handleSelect = (input: string, index: number) => {
-        onSelect(input);
+    const handleSelect = (val: LabelValueType) => {
+        onSelect(val);
         setIsOpen(false);
-        setValue(input);
-        setSelectedIndex(index);
-    };
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    const handleClickOutside = (event: MouseEvent) => {
-        if (selectContainerRef.current && !selectContainerRef.current.contains(event.target as Node) && isOpen) {
-            setIsOpen(false);
-        }
+        setValue(val);
     };
+    const closeMenu = useCallback(() => {
+        setIsOpen(false);
+    }, []);
+    useOnClickOutside(selectContainerRef.current, closeMenu);
 
     const handleMouseClick = () => {
         if (disabled) return;
@@ -66,61 +98,27 @@ const NsSelect: React.FC<SelectProps> = ({
             }, 0);
         }
     };
-    const handleArrowRightClick = () => {
-        if (selectedIndex !== -1) {
-            const nextIndex = reverseArrowControls ? selectedIndex - 1 : selectedIndex + 1;
-            const childrenArray = Children.toArray(children);
-            const optionAtIndex = childrenArray[nextIndex];
-            const { value } = (optionAtIndex as any)?.props ?? {};
-            handleSelect(value, nextIndex);
-        } else {
-            if (!reverseArrowControls) {
-                const nextIndex = selectedIndex + 1;
-                const childrenArray = Children.toArray(children);
-                const optionAtIndex = childrenArray[nextIndex];
-                const { value } = (optionAtIndex as any)?.props ?? {};
-                handleSelect(value, nextIndex);
-            }
-        }
-    };
-    const handleArrowLeftClick = () => {
-        if (selectedIndex !== -1) {
-            const nextIndex = reverseArrowControls ? selectedIndex + 1 : selectedIndex - 1;
-            const childrenArray = Children.toArray(children);
-            const optionAtIndex = childrenArray[nextIndex];
-            const { value } = (optionAtIndex as any)?.props ?? {};
-            handleSelect(value, nextIndex);
-        } else {
-            if (reverseArrowControls) {
-                const nextIndex = selectedIndex + 1;
-                const childrenArray = Children.toArray(children);
-                const optionAtIndex = childrenArray[nextIndex];
-                const { value } = (optionAtIndex as any)?.props ?? {};
-                handleSelect(value, nextIndex);
-            }
+    const handleArrowClick = (event: MouseEvent) => {
+        const direction = event.currentTarget?.className.includes('Right') ? 'right' : 'left';
+        const adder = factorMap[reverseArrowControls ? 'reverse' : 'forward'][direction];
+        const nextIndex = (selected?.index ?? -1) + adder;
+        if (nextIndex > -1 && nextIndex < options.length) {
+            handleSelect({ ...options[nextIndex], index: nextIndex });
         }
     };
 
-    useEffect(() => {
-        document.addEventListener('click', handleClickOutside);
-        return () => {
-            document.removeEventListener('click', handleClickOutside);
-        };
-    }, [handleClickOutside, isOpen]);
-
     return (
         <SelectMain>
             {hasArrows && (
-                <LeftArrowContainer
-                    onClick={handleArrowLeftClick}
+                <StyledArrowContainer
+                    onClick={handleArrowClick}
                     className="LeftArrow"
                     style={{
-                        visibility:
-                            !reverseArrowControls && (selectedIndex === 0 || selectedIndex < 0) ? 'hidden' : 'visible',
+                        visibility: arrowVisibility(options.length, 'left', reverseArrowControls, value?.index),
                     }}
                 >
                     <NsIcon name="arrowLeft" color="primary" />
-                </LeftArrowContainer>
+                </StyledArrowContainer>
             )}
             <SelectContainer
                 data-testid="select-container"
@@ -137,43 +135,40 @@ const NsSelect: React.FC<SelectProps> = ({
                     tabIndex={0}
                     ref={selectHeadRef}
                 >
-                    <SelectButton>{selectedLabel || placeholder}</SelectButton>
+                    <SelectButton>{value?.label || placeholder}</SelectButton>
                     {!readOnly && <NsIcon name={isOpen ? 'arrowUp' : 'arrowDown'} color="primary" />}
                 </SelectHead>
-                {isOpen ? (
+                <Show when={isOpen}>
                     <SelectList
-                        data-testid="select-list"
-                        onMouseLeave={closeSelect}
+                        data-testid="select-menu-list"
+                        onMouseLeave={closeMenuOnMouseLeave}
                         borderColor={selectBorderColor}
                         className="selectList"
                     >
-                        {React.Children.map(children, (child, index) => {
-                            if (React.isValidElement(child)) {
-                                return React.cloneElement(child, {
-                                    // @ts-ignore
-                                    onSelect: (input: string) => handleSelect(input, index),
-                                    selectedValue: value,
-                                    showListDivider,
-                                    index,
-                                });
-                            }
-                            return null;
+                        {options.map((opt, optionIndex) => {
+                            return renderOption({
+                                value: opt.value,
+                                label: opt.label,
+                                index: optionIndex,
+                                onClick: () => handleSelect({ label: opt.label, value: opt.value, index: optionIndex }),
+                                selected: value,
+                                showListDivider,
+                            });
                         })}
                     </SelectList>
-                ) : null}
+                </Show>
                 {errorMessage && <ErrorContainer>{errorMessage}</ErrorContainer>}
             </SelectContainer>
             {hasArrows && (
-                <RightArrowContainer
-                    onClick={handleArrowRightClick}
+                <StyledArrowContainer
+                    onClick={handleArrowClick}
                     className="RightArrow"
                     style={{
-                        visibility:
-                            reverseArrowControls && (selectedIndex === 0 || selectedIndex < 0) ? 'hidden' : 'visible',
+                        visibility: arrowVisibility(options.length, 'right', reverseArrowControls, selected?.index),
                     }}
                 >
                     <NsIcon name="arrowRight" color="primary" />
-                </RightArrowContainer>
+                </StyledArrowContainer>
             )}
         </SelectMain>
     );

package/src/common/select/NsSelectOption.tsx

@@ -1,29 +1,25 @@
 import React from 'react';
-import { ListItem, ListItemContainer } from './NsSelect.styled';
+
+import { StyledSelectOption } from './NsSelect.styled';
 import { SelectOptionProps } from './types.d';
 
 export const NsSelectOption: React.FC<SelectOptionProps> = ({
     value,
     label,
-    onSelect,
-    selectedValue,
+    onClick,
+    selected,
     showListDivider = true,
 }) => {
-    const handleClick = () => {
-        if (onSelect && typeof onSelect === 'function') {
-            onSelect(value);
-        }
-    };
-
+    const isSelected = value === selected?.value;
     return (
-        <ListItemContainer
+        <StyledSelectOption
+            className={isSelected ? 'selected-option' : ''}
             data-testid={`option-${value}`}
-            isSelected={value === selectedValue}
             showListDivider={showListDivider}
-            onClick={handleClick}
+            onClick={onClick}
         >
-            <ListItem isSelected={value === selectedValue}>{label}</ListItem>
-        </ListItemContainer>
+            {label}
+        </StyledSelectOption>
     );
 };
 export default NsSelectOption;

package/src/common/select/specs/NsSelect.spec.tsx

@@ -0,0 +1,183 @@
+import { RenderSelectOptionArgType } from '../types';
+import { fireEvent, render, screen, waitFor } from '@/test-utils/index';
+import React from 'react';
+
+import { NsSelect, NsSelectOption } from '../..';
+
+const renderSelectOption = (option: RenderSelectOptionArgType) => {
+    return (
+        <NsSelectOption
+            key={option.value}
+            value={option.value}
+            index={option.index ?? -1}
+            label={option.label}
+            onClick={option.onClick}
+        />
+    );
+};
+const createOptionTestId = (value: string) => `option-${value}`;
+const selectCommonProps = {
+    selected: { label: 'Option 1', value: 'Option1', index: 0 },
+    options: [
+        { value: 'Option1', label: 'Option 1' },
+        { value: 'Option2', label: 'Option 2' },
+        { value: 'Option3', label: 'Option 3' },
+    ],
+    onSelect: jest.fn(),
+    renderOption: renderSelectOption,
+};
+describe('NsSelect', () => {
+    const onSelect = jest.fn();
+    const selected = { label: '', value: '' };
+
+    const options = [
+        { value: 'Option1', label: 'Option 1' },
+        { value: 'Option2', label: 'Option 2' },
+        { value: 'Option3', label: 'Option 3' },
+    ];
+
+    it('1. renders the placeholder text when no value is selected', () => {
+        render(
+            <NsSelect
+                placeholder="Select an option"
+                selected={selected}
+                onSelect={onSelect}
+                options={options}
+                renderOption={renderSelectOption}
+            />
+        );
+
+        expect(screen.getByText('Select an option')).toBeInTheDocument();
+    });
+
+    it('2. clicking outside the select container closes the dropdown', async () => {
+        const { getByTestId, queryByTestId, container } = render(
+            <div>
+                <button className="extra"></button>
+                <NsSelect {...selectCommonProps} />
+            </div>
+        );
+        const selectButton = getByTestId('select-head');
+        fireEvent.mouseDown(selectButton);
+        const outsideElement = container.querySelector('button.extra');
+        if (outsideElement) fireEvent.click(outsideElement);
+        // check if the dropdown is closed
+        expect(queryByTestId(createOptionTestId(selectCommonProps.options[1].value))).toBeNull();
+    });
+
+    it('3. renders the selected value label', () => {
+        render(<NsSelect {...selectCommonProps} />);
+
+        expect(screen.getByText(selectCommonProps.selected.label)).toBeInTheDocument();
+    });
+
+    it('4. clicking on select button opens the dropdown', () => {
+        const { getByTestId, getByText } = render(<NsSelect {...selectCommonProps} />);
+        const selectButton = getByTestId('select-head');
+        fireEvent.mouseDown(selectButton);
+
+        // Check if the dropdown is opened (isOpen state is true)
+        const dropdownList = getByTestId('select-menu-list');
+        expect(dropdownList).toBeInTheDocument();
+
+        // Check if the options are rendered in the dropdown
+        selectCommonProps.options.slice(1).forEach((option) => {
+            const optionElement = getByText(option.label);
+            expect(optionElement).toBeInTheDocument();
+        });
+    });
+
+    it('5. disabling the select component prevents interaction', () => {
+        const { getByTestId, queryByTestId } = render(<NsSelect {...selectCommonProps} disabled />);
+        const selectButton = getByTestId('select-head');
+        fireEvent.mouseDown(selectButton);
+
+        // Check if the dropdown does not open (select list is not present)
+        const dropdownList = queryByTestId('select-menu-list');
+        expect(dropdownList).toBeNull();
+
+        expect(selectCommonProps.onSelect).not.toHaveBeenCalled();
+    });
+
+    it('6. menu closes on mouse leave when closeOnMouseLeave is set to true', async () => {
+        const { getByTestId } = render(<NsSelect {...selectCommonProps} closeOnMouseLeave />);
+
+        const selectHead = getByTestId('select-head');
+        fireEvent.mouseDown(selectHead);
+        const selectList = screen.queryByTestId('select-menu-list');
+        const option1 = screen.queryByTestId(createOptionTestId(selectCommonProps.options[0].value));
+        const option2 = screen.queryByTestId(createOptionTestId(selectCommonProps.options[1].value));
+        const option3 = screen.queryByTestId(createOptionTestId(selectCommonProps.options[2].value));
+        if (selectList) fireEvent.mouseLeave(selectList);
+
+        await waitFor(() => {
+            expect(option1).not.toBeInTheDocument();
+            expect(option2).not.toBeInTheDocument();
+            expect(option3).not.toBeInTheDocument();
+        });
+    });
+
+    it('7. select does not open when disabled', () => {
+        render(<NsSelect {...selectCommonProps} disabled />);
+
+        const selectHead = screen.getByTestId('select-head');
+        fireEvent.mouseDown(selectHead);
+
+        expect(screen.queryByTestId('select-menu-list')).not.toBeInTheDocument();
+    });
+
+    it('8. opens the select on "ArrowDown" key press', () => {
+        render(<NsSelect {...selectCommonProps} />);
+
+        const selectHead = screen.getByTestId('select-head');
+        fireEvent.mouseDown(selectHead, { key: 'arrowDown' });
+
+        expect(selectHead).toBeInTheDocument();
+    });
+
+    it('9. selects the next option on arrow right click', () => {
+        const { getByTestId, container } = render(<NsSelect {...selectCommonProps} hasArrows />);
+
+        const selectHead = getByTestId('select-head');
+        fireEvent.mouseDown(selectHead);
+
+        const rightArrow = container.querySelector('.RightArrow');
+        if (rightArrow) fireEvent.click(rightArrow);
+
+        expect(selectCommonProps.onSelect).toHaveBeenCalledWith({ ...selectCommonProps.options[1], index: 1 });
+    });
+
+    it('10. selects the previous option on arrow left click', () => {
+        const { getByTestId } = render(<NsSelect {...selectCommonProps} hasArrows reverseArrowControls />);
+
+        const selectHead = getByTestId('select-head');
+        fireEvent.mouseDown(selectHead);
+        const option3 = getByTestId(createOptionTestId(selectCommonProps.options[2].value));
+        fireEvent.click(option3);
+
+        const leftArrow = document.getElementsByClassName('LeftArrow')[0];
+        fireEvent.click(leftArrow);
+
+        expect(selectCommonProps.onSelect).toHaveBeenCalledWith({ ...selectCommonProps.options[1], index: 1 });
+    });
+
+    it('11. renders an error message with red styles', () => {
+        const errorMessage = 'Invalid value';
+
+        const { getByText } = render(<NsSelect {...selectCommonProps} hasArrows errorMessage={errorMessage} />);
+
+        const errorText = getByText(errorMessage);
+        expect(errorText).toBeInTheDocument();
+    });
+    it('12. selecting an option calls the onSelect callback', () => {
+        const { getByTestId } = render(<NsSelect {...selectCommonProps} hasArrows />);
+
+        const selectHead = getByTestId('select-head');
+        fireEvent.mouseDown(selectHead);
+
+        const option1 = getByTestId(createOptionTestId(selectCommonProps.options[2].value));
+        fireEvent.click(option1);
+
+        expect(selectCommonProps.onSelect).toHaveBeenCalledWith({ ...selectCommonProps.options[2], index: 2 });
+    });
+});

package/src/common/select/specs/NsSelectOption.spec.tsx

@@ -0,0 +1,32 @@
+import { fireEvent, render } from '@/test-utils/index';
+import React from 'react';
+
+import { NsSelectOption } from '../';
+
+describe('NsSelectOption', () => {
+    it('1. renders NsSelectOption component without errors', () => {
+        const value = 'option1';
+        const label = 'Option 1';
+        const onClick = jest.fn();
+        const { getByTestId, getByText } = render(
+            <NsSelectOption value={value} label={label} index={1} onClick={onClick} />
+        );
+
+        // Check if the option container element exists
+        const optionContainer = getByTestId(`option-${value}`);
+        expect(optionContainer).toBeInTheDocument();
+
+        // Check if the option label is rendered correctly
+        const optionLabel = getByText(label);
+        expect(optionLabel).toBeInTheDocument();
+    });
+    it('2. clicking on NsSelectOption selects the option', () => {
+        const value = 'option1';
+        const label = 'Option 1';
+        const onClick = jest.fn();
+        const { getByTestId } = render(<NsSelectOption value={value} label={label} onClick={onClick} index={1} />);
+        const optionElement = getByTestId(`option-${value}`);
+        fireEvent.click(optionElement);
+        expect(onClick).toHaveBeenCalled();
+    });
+});