pixel-react 1.2.8 → 1.2.9

package/src/components/Select/Select.tsx

@@ -1,109 +1,17 @@
-import { useReducer, useRef, useEffect, useMemo } from 'react';
-import { Option, SelectAction, SelectProps, SelectState } from './types';
-import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
-import { createPortal } from 'react-dom';
-import classNames from 'classnames';
-import Dropdown from './components/Dropdown/Dropdown';
-import Icon from '../Icon';
+import { ChangeEvent, FC, useEffect, useRef, useState } from 'react';
 import './Select.scss';
-import usePortalPosition from '../../hooks/usePortalPosition';
+import Icon from '../Icon';
 import Typography from '../Typography';
+import { DrowdownPosition, Option, SelectProps } from './types';
+import classNames from 'classnames';
+import { createPortal } from 'react-dom';
+import Dropdown from './components/Dropdown';
 import { getValue } from '../../utils/getSelectOptionValue/getSelectOptionValue';
+import usePortalPosition from '../../hooks/usePortalPosition';
+import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
 
-const selectReducer = (
-  state: SelectState,
-  action: SelectAction
-): SelectState => {
-  switch (action.type) {
-    case 'FOCUS_INPUT':
-      return {
-        ...state,
-        isInputFocused: true,
-        iconColor: 'var(--ff-select-brand-color)',
-        isIconClick: true,
-        showOptions: true,
-      };
-    case 'BLUR_INPUT':
-      return {
-        ...state,
-        isInputFocused: false,
-        options: action.payload.optionsList,
-        option: action.payload.option,
-
-        // todo color need to be add in style guide
-        iconColor: 'var(--ff-select-default-color)',
-        isIconClick: false,
-        showOptions: false,
-        dropdownPosition: {
-          positionX: 0,
-          positionY: 0,
-          width: 0,
-          fromBottom: 0,
-        },
-      };
-    case 'MOUSE_ENTER':
-      return state.isInputFocused
-        ? state
-        : { ...state, iconColor: 'var(--ff-select-text-hover-color)' };
-    case 'MOUSE_LEAVE':
-      return state.isInputFocused
-        ? state
-        : // todo color need to be add in style guide
-          {
-            ...state,
-            iconColor: 'var(--ff-select-default-color)',
-            isIconClick: false,
-          };
-
-    case 'UPDATE_DROPDOWN_POSITION':
-      const { positionX, positionY, width, fromBottom } = action.payload || {};
-      return {
-        ...state,
-        dropdownPosition: {
-          positionX,
-          positionY,
-          width,
-          fromBottom,
-        },
-      };
-
-    case 'UPDATE_OPTION':
-      return {
-        ...state,
-        option: action.payload,
-      };
-
-    case 'UPDATE_OPTION_LIST':
-      return {
-        ...state,
-        options: action.payload,
-      };
-    case 'SHOW_ERROR':
-      return {
-        ...state,
-        isInputFocused: true,
-        isIconClick: false,
-        showOptions: false,
-        options: action.payload.optionsList,
-        option: action.payload.option,
-
-        // todo color need to be add in style guide
-        iconColor: 'var(--ff-select-default-color)',
-        dropdownPosition: {
-          positionX: 0,
-          positionY: 0,
-          width: 0,
-          fromBottom: 0,
-        },
-      };
-
-    default:
-      return state;
-  }
-};
-
-const Select = ({
-  label = '',
+const Select: FC<SelectProps> = ({
+  label = 'Default Label',
   showLabel = true,
   optionsList = [],
   selectedOption = { label: '', value: '' },
@@ -112,271 +20,207 @@ const Select = ({
   className = '',
   optionZIndex = 100,
   disabled = false,
-  borderRadius = true,
   showBorder = true,
-  required = false,
+  required = true,
   optionsRequired = true,
   selectedOptionColor = 'var(--ff-select-text-color)',
-  labelAccessor,
-  valueAccessor,
-}: SelectProps) => {
-  const initialState: SelectState = useMemo(
-    () => ({
-      isInputFocused: false,
-
-      // todo color need to be added in style guide
-      iconColor: 'var(--ff-select-default-color)',
-      isIconClick: false,
-      showOptions: false,
-      options: optionsList,
-      option: checkEmpty(selectedOption) ? '' : selectedOption?.value,
-      dropdownPosition: { positionX: 0, positionY: 0, width: 0, fromBottom: 0 },
-    }),
-    [optionsList, selectedOption]
-  );
-
-  const [selectControlState, dispatch] = useReducer(
-    selectReducer,
-    initialState
-  );
-
-  const DropDownRef = useRef<HTMLDivElement>(null);
-  const InputRef = useRef<HTMLInputElement>(null);
-
-  const {
-    isInputFocused,
-    iconColor,
-    isIconClick,
-    showOptions,
-    dropdownPosition,
-    options,
-    option,
-  } = selectControlState;
-
-  const calculatePosition = usePortalPosition(DropDownRef, showOptions);
-
-  const handleSelectAction = (
-    actionType:
-      | 'FOCUS_INPUT'
-      | 'MOUSE_ENTER'
-      | 'MOUSE_LEAVE'
-      | 'SHOW_ERROR'
-      | 'BLUR_INPUT'
-  ) => {
-    if (!disabled) {
-      if (actionType === 'SHOW_ERROR' || actionType === 'BLUR_INPUT') {
-        dispatch({
-          type: actionType,
-          payload: { optionsList, option: getValue(selectedOption) },
-        });
-      } else {
-        dispatch({ type: actionType });
-      }
-    }
+  labelAccessor = '',
+  valueAccessor = '',
+  height = 32,
+  width = 300,
+}) => {
+  const [showDropdownOptions, setShowDropdownOptions] = useState(false);
+  const [searchedOption, setSearchedOption] = useState('');
+  const [selectOptionList, setSelectOptionList] = useState(optionsList);
+  const [dropdownPosition, setDropdownPosition] = useState<DrowdownPosition>({
+    positionX: 0,
+    positionY: 0,
+    width: 0,
+    fromBottom: 0,
+  });
+
+  const DropdownRef = useRef<HTMLDivElement>(null);
+  const selectWrapperRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const selectArrowRef = useRef<HTMLDivElement>(null);
+
+  const calculatePosition = usePortalPosition(DropdownRef, showDropdownOptions);
+
+  const handleIconClick = () => {
+    setShowDropdownOptions(!showDropdownOptions);
   };
 
-  const onSelectInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
     if (disabled) return;
-    const { value } = e.target;
+    const { value } = event.target;
+
     const filteredOptions = optionsList.filter((option) => {
       const valueData = getValue(option, valueAccessor);
       return typeof valueData === 'string'
         ? valueData.toLowerCase().includes(value.toLowerCase().trim())
         : valueData === Number(value);
     });
-    dispatch({ type: 'UPDATE_OPTION_LIST', payload: filteredOptions });
-    dispatch({ type: 'UPDATE_OPTION', payload: value });
+
+    setSelectOptionList(filteredOptions);
+    setSearchedOption(value);
   };
 
-  const onSelectBlur = () => {
-    if (disabled) return;
+  const onSelectUpdatePosition = () => {
+    if (!showDropdownOptions || !DropdownRef?.current || disabled) return;
+    setDropdownPosition(calculatePosition(DropdownRef));
+  };
+
+  const onSelectToggleScroll = (isEnabled: boolean): void => {
+    const scrollWidth =
+      window.innerWidth - document.documentElement.clientWidth;
 
-    if (errorMsg) {
-      handleSelectAction('SHOW_ERROR');
+    if (isEnabled) {
+      document.body.style.paddingRight = '';
+      document.body.style.overflow = '';
     } else {
-      handleSelectAction('BLUR_INPUT');
+      document.body.style.paddingRight = `${scrollWidth}px`;
+      document.body.style.overflow = 'hidden';
     }
   };
 
-  const onSelectOptionSelector = (option: Option) => {
-    if (!disabled) {
-      onSelectBlur();
-      dispatch({
-        type: 'UPDATE_OPTION',
-        payload: getValue(option, valueAccessor),
-      });
-      if (onChange) {
-        onChange(option);
-      }
-    }
+  const handleFocus = () => {
+    if (disabled) return;
+    setShowDropdownOptions(true);
   };
 
-  const onSelectUpdatePosition = () => {
-    if (!showOptions || !DropDownRef?.current || disabled) return;
-    const { positionX, positionY, width, fromBottom } =
-      calculatePosition(DropDownRef);
-    dispatch({
-      type: 'UPDATE_DROPDOWN_POSITION',
-      payload: { positionX, positionY, width, fromBottom },
+  const onSelectBlur = () => {
+    setShowDropdownOptions(false);
+    setDropdownPosition({
+      positionX: 0,
+      positionY: 0,
+      fromBottom: 0,
+      width: 0,
     });
+    setSearchedOption(getValue(selectedOption, valueAccessor));
+    setSelectOptionList(optionsList);
   };
 
-  const onSelectToggleScroll = (isEnabled: boolean) => {
-    const bodyScrollWidth = window.innerWidth - document.body.clientWidth;
-    document.body.style.paddingRight = isEnabled ? '' : `${bodyScrollWidth}px`;
-    document.body.style.overflow = isEnabled ? '' : 'hidden';
+  const onSelectOptionSelector = (option: Option): void => {
+    if (disabled) return;
+    onSelectBlur();
+    setSearchedOption(getValue(option, valueAccessor));
+    if (onChange) {
+      onChange(option);
+    }
   };
 
-  useEffect(() => {
+  const handleResizeOrScroll = () => onSelectUpdatePosition();
+
+  const hideShowScrollbar = () => {
     if (disabled) return;
-    if (showOptions) {
-      onSelectToggleScroll(!showOptions);
+    if (showDropdownOptions && optionsRequired) {
+      onSelectToggleScroll(!showDropdownOptions);
     }
     onSelectUpdatePosition();
 
-    const handleResizeOrScroll = () => onSelectUpdatePosition();
-
     window.addEventListener('resize', handleResizeOrScroll);
     window.addEventListener('scroll', handleResizeOrScroll);
+  };
+
+  useEffect(() => {
+    hideShowScrollbar();
     return () => {
       onSelectToggleScroll(true);
       window.removeEventListener('resize', handleResizeOrScroll);
       window.removeEventListener('scroll', handleResizeOrScroll);
     };
-  }, [showOptions]);
+  }, [showDropdownOptions]);
 
   useEffect(() => {
-    if (errorMsg) {
-      handleSelectAction('SHOW_ERROR');
-    }
-  }, []);
-
-  useEffect(() => {
-    if (!checkEmpty(selectedOption.label)) {
-      onSelectOptionSelector(selectedOption);
-    }
+    if (checkEmpty(getValue(selectedOption, valueAccessor))) return;
+    setSearchedOption(getValue(selectedOption, valueAccessor));
   }, [selectedOption]);
 
-  const applyActiveOptionClasses = !isInputFocused && Boolean(option);
-
   return (
-    <div className={classNames(`ff-select-wrapper`)}>
-      <div className={`ff-select ${className}`}>
+    <div
+      className={`ff-select-wrapper ${className}`}
+      ref={selectWrapperRef}
+      style={{ height: `${height}px`, width: `${width}px` }}
+    >
+      <div
+        className={classNames('ff-select', {
+          'ff-select__focus': showDropdownOptions,
+          'ff-select__disabled': disabled,
+          'ff-select__error': !!errorMsg,
+          'ff-select__error__focused': !!errorMsg && showDropdownOptions,
+          'ff-select__no_border': !showBorder,
+        })}
+      >
         <input
           type="text"
+          ref={inputRef}
+          id="select-input-element"
           className={classNames('ff-select-input', {
-            'ff-select-input--default': !isInputFocused,
-            'ff-select-input--active': applyActiveOptionClasses,
-            'ff-select-input--no-label': !showLabel,
-            'ff-select-input--error':
-              errorMsg && !isInputFocused && !Boolean(option),
-            'ff-select-input--border-radius': !borderRadius,
-            'ff-select-input--disable': disabled,
-            'ff-select-input--no-border': !showBorder,
+            'ff-select-input__disabled': disabled,
           })}
-          // inline css required due to multiple overlay scenarios are present
-          style={{ zIndex: optionZIndex, color: selectedOptionColor }}
-          onFocus={() => handleSelectAction('FOCUS_INPUT')}
-          onMouseEnter={() => handleSelectAction('MOUSE_ENTER')}
-          onMouseLeave={() => handleSelectAction('MOUSE_LEAVE')}
-          onChange={onSelectInputChange}
-          value={option}
-          disabled={disabled}
+          onFocus={handleFocus}
+          value={searchedOption}
+          autoCorrect="off"
           autoComplete="off"
           spellCheck="false"
-          ref={InputRef}
+          style={{ zIndex: optionZIndex, color: selectedOptionColor }}
+          disabled={disabled}
+          onChange={handleChange}
         />
-
-        {showLabel && (
+        {optionsRequired && (
           <div
-            className={classNames('ff-select-label', {
-              'ff-select-label--default': !isInputFocused,
-              'ff-select-label--active': isInputFocused || Boolean(option),
-              'ff-select-label--error': errorMsg,
+            ref={selectArrowRef}
+            className={classNames('ff-select-arrow-wrapper', {
+              'ff-select-arrow-wrapper__disabled': disabled,
             })}
+            onClick={handleIconClick}
           >
-            {required && (
-              <Typography
-                color="var(--error-light)"
-                className="ff-select-label--required"
-              >
-                *
-              </Typography>
-            )}
-            {label}
+            <Icon
+              name="arrow_down"
+              className="ff-select-arrow"
+              height={8}
+              width={12}
+            />
           </div>
         )}
-        {optionsRequired && (
-          <Icon
-            name="arrow_up"
-            height={7}
-            width={12}
-            className={classNames('ff-select-arrow', {
-              'ff-select-arrow--down': isIconClick,
-              'ff-select-arrow--no-label': !showLabel,
-            })}
-            color={iconColor}
-          />
-        )}
-        {(!checkEmpty(option) || showOptions) && (
-          <fieldset
-            className={classNames('ff-select-fieldset', {
-              'ff-select-fieldset--no-label': !showLabel,
-              'ff-select-fieldset--default': !isInputFocused,
-              'ff-select-fieldset--active': isInputFocused,
-              'ff-select-fieldset--option': applyActiveOptionClasses,
-              'ff-select-fieldset--error': errorMsg,
-              'ff-select-fieldset--border-radius': !borderRadius,
-              'ff-select-fieldset--no-border': !showBorder,
+        {showLabel && (
+          <Typography
+            as="span"
+            className={classNames('ff-select-label', {
+              'ff-select-label__active': searchedOption,
             })}
+            fontSize={searchedOption && 8}
+            required={required}
           >
-            {showLabel && (
-              <legend
-                className={classNames('ff-select-legend', {
-                  'ff-select-legend--default': !isInputFocused,
-                  'ff-select-legend--active': isInputFocused,
-                  'ff-select-legend--option': applyActiveOptionClasses,
-                  'ff-select-legend--error': errorMsg,
-                })}
-              >
-                {required && (
-                  <Typography
-                    fontSize={8}
-                    color={'var(--error-light)'}
-                    className="ff-select-legend--required"
-                  >
-                    *
-                  </Typography>
-                )}
-                {label}
-              </legend>
-            )}
-          </fieldset>
+            {label}
+          </Typography>
         )}
       </div>
-
       {errorMsg && (
         <Typography
-          className="ff-select-wrapper-error-text"
+          as="div"
+          lineHeight="12px"
           fontSize={8}
-          color={'var(--error-light)'}
+          color="var(--error_light)"
+          className="ff-select-error-msg"
         >
           {errorMsg}
         </Typography>
       )}
 
       {optionsRequired && (
-        <div ref={DropDownRef}>
-          {showOptions &&
+        <div ref={DropdownRef}>
+          {showDropdownOptions &&
             createPortal(
               <Dropdown
-                onSelectBlur={onSelectBlur}
-                onSelectOptionSelector={onSelectOptionSelector}
+                options={selectOptionList}
                 dropdownPosition={dropdownPosition}
-                options={options}
-                optionZIndex={optionZIndex}
-                inputRef={InputRef}
                 labelAccessor={labelAccessor}
+                optionZIndex={optionZIndex}
+                inputRef={inputRef}
+                selectArrowRef={selectArrowRef}
+                onSelectBlur={onSelectBlur}
+                onSelectOptionSelector={onSelectOptionSelector}
               />,
               document.body
             )}

package/src/components/Select/components/Dropdown.scss

@@ -0,0 +1,50 @@
+.ff-select-dropdown-wrapper {
+  max-height: 160px;
+  z-index: 999999;
+  position: absolute;
+  min-width: 50px;
+  border-radius: 4px;
+  border: 1px solid var(--ff-select-option-border-color);
+  margin-top: 4px;
+  box-shadow: 0px 1px 4px 0px var(--ff-select-option-wrapper-box-shadow);
+  background-color: var(--ff-select-background-color);
+  overflow: hidden auto;
+
+  &::-webkit-scrollbar {
+    width: 4px;
+    height: 12px;
+    &-thumb {
+      background-color: var(--ff-select-scroll-thumb-color);
+      border-radius: 4px;
+    }
+
+    &-track {
+      background: var(--ff-select-scroll-track-bg);
+      border-radius: 4px;
+    }
+  }
+
+  .ff-select-dropdown-option {
+    box-sizing: border-box;
+    cursor: pointer;
+    padding: 0px 8px;
+    border-radius: 4px;
+    min-height: 32px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+
+    &:hover {
+      background-color: var(--ff-select-option-hover-color);
+    }
+  }
+
+  .ff-select-no-option {
+    box-sizing: border-box;
+    padding: 0px 8px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    cursor: not-allowed;
+  }
+}

package/src/components/Select/components/Dropdown.tsx

@@ -0,0 +1,94 @@
+import { useContext, useRef, type FC } from 'react';
+import { dropdownDefaultCSSData, DropdownProps } from './types';
+import './Dropdown.scss';
+import { checkEmpty } from '../../../utils/checkEmpty/checkEmpty';
+import Typography from '../../Typography';
+import { ffid } from '../../../utils/ffID/ffid';
+import { ThemeContext } from '../../ThemeProvider/ThemeProvider';
+import classNames from 'classnames';
+import { getLabel } from '../../../utils/getSelectOptionValue/getSelectOptionValue';
+import useClickOutside from '../../../hooks/useClickOutside';
+
+const Dropdown: FC<DropdownProps> = ({
+  options = [],
+  optionZIndex = 10000000,
+  dropdownPosition,
+  labelAccessor,
+  onSelectOptionSelector,
+  onSelectBlur,
+  inputRef,
+  selectArrowRef,
+}) => {
+  const themeContext = useContext(ThemeContext);
+  const currentTheme = themeContext?.currentTheme;
+
+  const optionsWrapperRef = useRef<HTMLDivElement>(null);
+  useClickOutside(optionsWrapperRef, onSelectBlur, [inputRef, selectArrowRef]);
+
+  const { positionX, positionY, width, fromBottom } = dropdownPosition;
+  const { margin, optionHeight, selectInputHeight, dropDownWrapperPadding } =
+    dropdownDefaultCSSData;
+
+  const updateDropdownPosition = () => {
+    let dropdownContainerHeight;
+
+    if (checkEmpty(options)) {
+      dropdownContainerHeight = 32 + 2 * dropDownWrapperPadding;
+    } else if (options?.length > 5) {
+      dropdownContainerHeight = 160;
+    } else {
+      dropdownContainerHeight =
+        options.length * optionHeight + 2 * dropDownWrapperPadding;
+    }
+
+    if (fromBottom > dropdownContainerHeight + margin) {
+      return {
+        left: positionX,
+        top: positionY,
+        width: width,
+        zIndex: optionZIndex,
+      };
+    }
+    return {
+      zIndex: optionZIndex,
+      left: positionX,
+      width: width,
+      top: positionY - selectInputHeight - dropdownContainerHeight - margin,
+    };
+  };
+
+  return (
+    <div
+      className={classNames('ff-select-dropdown-wrapper', currentTheme)}
+      ref={optionsWrapperRef}
+      style={updateDropdownPosition()}
+    >
+      {!checkEmpty(options) ? (
+        options.map((option) => (
+          <Typography
+            key={ffid()}
+            as="div"
+            lineHeight="30px"
+            className={classNames('ff-select-dropdown-option', currentTheme)}
+            color="var(--ff-select-text-color)"
+            onClick={() => onSelectOptionSelector(option)}
+          >
+            {getLabel(option, labelAccessor)}
+          </Typography>
+        ))
+      ) : (
+        <Typography
+          textAlign="center"
+          as="div"
+          lineHeight="32px"
+          color="var(--ff-select-text-color)"
+          className={classNames('ff-select-no-option', currentTheme)}
+        >
+          No Results found
+        </Typography>
+      )}
+    </div>
+  );
+};
+
+export default Dropdown;

package/src/components/Select/components/types.ts

@@ -0,0 +1,20 @@
+import { DrowdownPosition, Option } from '../types';
+
+export interface DropdownProps {
+  options: Option[];
+  dropdownPosition: DrowdownPosition;
+  optionZIndex: number;
+  labelAccessor?: string;
+  valueAccessor?: string;
+  onSelectBlur: () => void;
+  onSelectOptionSelector: (option: Option) => void;
+  inputRef?: React.RefObject<HTMLInputElement>;
+  selectArrowRef?: React.RefObject<HTMLDivElement>;
+}
+
+export const dropdownDefaultCSSData = {
+  margin: 6,
+  optionHeight: 32,
+  selectInputHeight: 38,
+  dropDownWrapperPadding: 0,
+};