pixel-react 1.0.0

package/src/components/Select/Select.tsx

@@ -0,0 +1,368 @@
+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 './Select.scss';
+import usePortalPosition from '../../hooks/usePortalPosition';
+import Typography from '../Typography';
+
+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 = '',
+  showLabel = true,
+  optionsList = [],
+  selectedOption = { label: '', value: '' },
+  onChange = () => {},
+  errorMsg = '',
+  className = '',
+  optionZIndex = 100,
+  disabled = false,
+  borderRadius = true,
+  showBorder = true,
+  required = false,
+}: 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: selectedOption.value },
+        });
+      } else {
+        dispatch({ type: actionType });
+      }
+    }
+  };
+
+  const onSelectInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (disabled) return;
+    const { value } = e.target;
+    const filteredOptions = optionsList.filter((option) => {
+      return typeof option.value === 'string'
+        ? option.value.toLowerCase().includes(value.toLowerCase().trim())
+        : option.value === Number(value);
+    });
+    dispatch({ type: 'UPDATE_OPTION_LIST', payload: filteredOptions });
+    dispatch({ type: 'UPDATE_OPTION', payload: value });
+  };
+
+  const onSelectBlur = () => {
+    if (disabled) return;
+
+    if (errorMsg) {
+      handleSelectAction('SHOW_ERROR');
+    } else {
+      handleSelectAction('BLUR_INPUT');
+    }
+  };
+
+  const onSelectOptionSelector = (option: Option) => {
+    if (!disabled) {
+      onSelectBlur();
+      dispatch({ type: 'UPDATE_OPTION', payload: option.value });
+      if (onChange) {
+        onChange(option);
+      }
+    }
+  };
+
+  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 onSelectToggleScroll = (isEnabled: boolean) => {
+    const bodyScrollWidth = window.innerWidth - document.body.clientWidth;
+    document.body.style.paddingRight = isEnabled ? '' : `${bodyScrollWidth}px`;
+    document.body.style.overflow = isEnabled ? '' : 'hidden';
+  };
+
+  useEffect(() => {
+    if (disabled) return;
+    if (showOptions) {
+      onSelectToggleScroll(!showOptions);
+    }
+    onSelectUpdatePosition();
+
+    const handleResizeOrScroll = () => onSelectUpdatePosition();
+
+    window.addEventListener('resize', handleResizeOrScroll);
+    window.addEventListener('scroll', handleResizeOrScroll);
+    return () => {
+      onSelectToggleScroll(true);
+      window.removeEventListener('resize', handleResizeOrScroll);
+      window.removeEventListener('scroll', handleResizeOrScroll);
+    };
+  }, [showOptions]);
+
+  useEffect(() => {
+    if (errorMsg) {
+      handleSelectAction('SHOW_ERROR');
+    }
+  }, []);
+
+  const applyActiveOptionClasses = !isInputFocused && Boolean(option);
+
+  return (
+    <div className={classNames(`ff-select-wrapper ${className}`)}>
+      <div className="ff-select">
+        <input  
+          type="text"
+          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,
+          })}
+          // inline css required due to multiple overlay scenarios are present
+          style={{ zIndex: optionZIndex }}
+          onFocus={() => handleSelectAction('FOCUS_INPUT')}
+          onMouseEnter={() => handleSelectAction('MOUSE_ENTER')}
+          onMouseLeave={() => handleSelectAction('MOUSE_LEAVE')}
+          onChange={onSelectInputChange}
+          value={option}
+          disabled={disabled}
+          autoComplete="off"
+          spellCheck="false"
+          ref={InputRef}
+        />
+
+        {showLabel && (
+          <div
+            className={classNames('ff-select-label', {
+              'ff-select-label--default': !isInputFocused,
+              'ff-select-label--active': isInputFocused || Boolean(option),
+              'ff-select-label--error': errorMsg,
+            })}
+          >
+            {required && (
+              <Typography
+                color="var(--$error-light)"
+                className="ff-select-label--required"
+              >
+                *
+              </Typography>
+            )}
+            {label}
+          </div>
+        )}
+
+        <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}
+        />
+        <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 && (
+            <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>
+      </div>
+
+      {errorMsg && (
+        <Typography
+          className="ff-select-wrapper-error-text"
+          fontSize={8}
+          color={'var(--error-light)'}
+        >
+          {errorMsg}
+        </Typography>
+      )}
+
+      <div ref={DropDownRef}>
+        {showOptions &&
+          createPortal(
+            <Dropdown
+              onSelectBlur={onSelectBlur}
+              onSelectOptionSelector={onSelectOptionSelector}
+              dropdownPosition={dropdownPosition}
+              options={options}
+              optionZIndex={optionZIndex}
+              inputRef={InputRef}
+            />,
+            document.body
+          )}
+      </div>
+    </div>
+  );
+};
+
+export default Select;

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

@@ -0,0 +1,70 @@
+@use '../../../../assets/styles/fonts';
+
+// todo color need to be add into style guide
+
+@mixin absolute-position($top: auto, $right: auto, $bottom: auto, $left: auto) {
+  position: absolute;
+  top: $top;
+  right: $right;
+  bottom: $bottom;
+  left: $left;
+}
+
+.ff-select-dropdown-wrapper {
+  .ff-select-options-wrapper {
+    // Future use case. Increase the height by adding padding at the top and bottom.
+    max-height: 160px;
+    z-index: 100;
+
+    position: absolute;
+    min-width: 100px;
+    border: 1px solid var(--ff-select-option-border-color);
+    box-sizing: border-box;
+    margin-top: 4px;
+    border-radius: 4px;
+    background-color: var(--ff-select-background-color);
+    box-shadow: 0px 1px 4px 0px var(--ff-select-option-wrapper-box-shadow);
+    overflow: hidden auto;
+
+    &::-webkit-scrollbar {
+      width: 4px;
+      height: 12px;
+
+      &-thumb {
+        background-color: var(--ff-select-scroll-thumb-color);
+        border-radius: 4px;
+      }
+
+      &-track {
+        background-color: transparent;
+        border-radius: 4px;
+      }
+    }
+
+    .ff-select-option {
+      width: calc(100% - 18px);
+      border: 1px solid transparent;
+      border-radius: 4px;
+      padding: 0px 8px;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      cursor: pointer;
+
+      &:hover {
+        border-color: var(--ff-select-background-color);
+        background-color: var(--ff-select-option-hover-color);
+      }
+    }
+
+    .ff-select-no-option {
+      width: calc(100% - 16px);
+      margin: 0;
+      overflow: hidden;
+      padding: 0px 8px;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      cursor: not-allowed;
+    }
+  }
+}

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

@@ -0,0 +1,89 @@
+import { useRef } from 'react';
+import { DropDownListProps, dropdownDefaultCSSData } from './dropdownTypes';
+import useClickOutside from '../../../../hooks/useClickOutside';
+import { checkEmpty } from '../../../../utils/checkEmpty/checkEmpty';
+import './Dropdown.scss';
+import Typography from '../../../Typography';
+import ffid from '../../../../utils/ffID/ffid';
+
+const Dropdown = ({
+  onSelectBlur,
+  onSelectOptionSelector,
+  dropdownPosition,
+  options = [],
+  optionZIndex = 100,
+  inputRef,
+}: DropDownListProps) => {
+  const optionsWrapperRef = useRef<HTMLDivElement>(null);
+  useClickOutside(optionsWrapperRef, onSelectBlur, [inputRef]);
+
+  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="ff-select-dropdown-wrapper">
+      <div
+        ref={optionsWrapperRef}
+        // inline css required due to multiple overlay scenarios are present
+        style={updateDropdownPosition()}
+        className="ff-select-options-wrapper"
+      >
+        {!checkEmpty(options) ? (
+          options.map((option) => (
+            <Typography
+              key={ffid()}
+              as="div"
+              lineHeight="30px"
+              className="ff-select-option"
+              color="var(--ff-select-text-color)"
+              onClick={() => onSelectOptionSelector(option)}
+            >
+              {option.label}
+            </Typography>
+          ))
+        ) : (
+          <Typography
+            textAlign="center"
+            lineHeight="32px"
+            as="p"
+            color="var(--ff-select-text-color)"
+            className="ff-select-no-option"
+          >
+            No Results found
+          </Typography>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default Dropdown;

package/src/components/Select/components/Dropdown/dropdownTypes.ts

@@ -0,0 +1,19 @@
+import { DrowdownPosition, Option } from '../../types';
+
+export interface DropDownListProps {
+  onSelectBlur: () => void;
+  onSelectOptionSelector: (option: Option) => void;
+  dropdownPosition: DrowdownPosition;
+  options?: Option[];
+  optionZIndex?: number;
+  inputRef?: React.RefObject<HTMLInputElement>;
+}
+
+export const dropdownDefaultCSSData = {
+  margin: 6,
+  optionHeight: 32,
+  selectInputHeight: 38,
+
+  // Future use case if we provide padding-top, padding-bottom for option wrapper
+  dropDownWrapperPadding: 0,
+};

package/src/components/Select/index.ts

@@ -0,0 +1 @@
+export { default } from './Select';

package/src/components/Select/types.ts

@@ -0,0 +1,122 @@
+import { ReactNode } from "react";
+
+export interface SelectProps {
+  /*
+   * Label for the select dropdown
+   */
+  label?: string;
+
+  /*
+   * If true, the select dropdown will have a label
+   */
+  showLabel?: boolean;
+
+  /*
+   * Options for the select dropdown
+   */
+  optionsList: Option[];
+
+  /*
+   * Selected option for the select dropdown
+   */
+  selectedOption?: Option;
+
+  /*
+   * onChange callback function for handling selected option changes
+   */
+  onChange: (option: Option) => void;
+
+  /*
+   * If error is true, this message will be displayed
+   */
+  errorMsg?: string;
+
+  /*
+   * provide the className for the select dropdown
+   */
+  className?: string;
+
+  /*
+   *  Providing the z-index for dropdown and select
+   */
+  optionZIndex?: number;
+
+  /*
+   * Provide disable prop for the disabling the select component
+   */
+  disabled?: boolean;
+
+  /*
+   * Provide disable prop for the providing border radius at right side
+   */
+  borderRadius?: boolean;
+
+  /*
+   * Provide boolean value to show border or not
+   */
+  showBorder?: boolean;
+
+  /*
+   * Provide the boolean value if the select component is required or not
+   */
+  required?: boolean;
+}
+
+export interface DrowdownPosition {
+  positionX: number;
+  positionY: number;
+  width: number;
+  fromBottom: number;
+}
+
+export interface SelectState {
+  isInputFocused: boolean;
+  iconColor: string;
+  isIconClick: boolean;
+  showOptions: boolean;
+  options: Option[];
+  option: string;
+  dropdownPosition: DrowdownPosition;
+}
+
+export type SelectAction =
+  | { type: 'FOCUS_INPUT' }
+  | {
+      type: 'BLUR_INPUT';
+      payload: {
+        optionsList: Option[];
+        option: Option['value'];
+      };
+    }
+  | { type: 'MOUSE_ENTER' }
+  | { type: 'MOUSE_LEAVE' }
+  | {
+      type: 'UPDATE_DROPDOWN_POSITION';
+      payload: {
+        positionX: number;
+        positionY: number;
+        width: number;
+        fromBottom: number;
+      };
+    }
+  | {
+      type: 'UPDATE_OPTION';
+      payload: string;
+    }
+  | {
+      type: 'UPDATE_OPTION_LIST';
+      payload: Option[];
+    }
+  | {
+      type: 'SHOW_ERROR';
+      payload: {
+        optionsList: Option[];
+        option: Option['value'];
+      };
+    };
+
+export interface Option {
+  label: string | ReactNode;
+  value: string;
+  disabled?: boolean;
+}