pixel-react 1.6.3 → 1.6.6

package/src/components/Select/Select.tsx

@@ -1,252 +1,278 @@
-import { ChangeEvent, FC, useEffect, useRef, useState } from 'react';
-import './Select.scss';
-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 Select: FC<SelectProps> = ({
-  label = 'Default Label',
-  showLabel = true,
-  optionsList = [],
-  selectedOption = { label: '', value: '' },
-  onChange = () => {},
-  errorMsg = '',
-  className = '',
-  optionZIndex = 100,
-  disabled = false,
-  showBorder = true,
-  required = true,
-  optionsRequired = true,
-  selectedOptionColor = 'var(--ff-select-text-color)',
-  labelAccessor = '',
-  valueAccessor = '',
-  height = 32,
-  width = '100%',
-  onBlur = () => {},
-  disableInput = false,
-}) => {
-  const selectWidth = typeof width === 'number' ? `${width}px` : width;
-
-  const [showDropdownOptions, setShowDropdownOptions] = useState(false);
-  const [searchedOption, setSearchedOption] = useState<any>('');
-  const [selectOptionList, setSelectOptionList] = useState<Option[] | []>([]);
-  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(inputRef, showDropdownOptions);
-
-  const handleIconClick = () => {
-    setShowDropdownOptions(!showDropdownOptions);
-    setSearchedOption(getValue(selectedOption, valueAccessor));
-    setSelectOptionList(optionsList);
-    if (!showDropdownOptions && inputRef.current) {
-      inputRef.current.focus();
-    }
-  };
-
-  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
-    if (disabled) return;
-    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);
-    });
-
-    setSelectOptionList(filteredOptions);
-    setSearchedOption(value);
-  };
-
-  const onSelectUpdatePosition = () => {
-    if (!showDropdownOptions || !DropdownRef?.current || disabled) return;
-    setDropdownPosition(calculatePosition(inputRef));
-  };
-
-  const onSelectToggleScroll = (isEnabled: boolean): void => {
-    const scrollWidth =
-      window.innerWidth - document.documentElement.clientWidth;
-
-    if (isEnabled) {
-      document.body.style.paddingRight = '';
-      document.body.style.overflow = '';
-    } else {
-      document.body.style.paddingRight = `${scrollWidth}px`;
-      document.body.style.overflow = 'hidden';
-    }
-  };
-
-  const handleFocus = () => {
-    if (disabled) return;
-    setShowDropdownOptions(true);
-  };
-
-  const onSelectBlur = () => {
-    setShowDropdownOptions(false);
-    setDropdownPosition({
-      positionX: 0,
-      positionY: 0,
-      fromBottom: 0,
-      width: 0,
-    });
-    setSearchedOption(getValue(selectedOption, valueAccessor));
-    setSelectOptionList(optionsList);
-    onBlur();
-  };
-
-  const onSelectOptionSelector = (option: Option): void => {
-    if (disabled) return;
-    onSelectBlur();
-    setSearchedOption(getValue(option, valueAccessor));
-    if (onChange) {
-      onChange(option);
-    }
-  };
-
-  const handleResizeOrScroll = () => onSelectUpdatePosition();
-
-  const hideShowScrollbar = () => {
-    if (disabled) return;
-    if (showDropdownOptions && optionsRequired) {
-      onSelectToggleScroll(!showDropdownOptions);
-    }
-    onSelectUpdatePosition();
-
-    window.addEventListener('resize', handleResizeOrScroll);
-    window.addEventListener('scroll', handleResizeOrScroll);
-  };
-
-  useEffect(() => {
-    hideShowScrollbar();
-    return () => {
-      onSelectToggleScroll(true);
-      window.removeEventListener('resize', handleResizeOrScroll);
-      window.removeEventListener('scroll', handleResizeOrScroll);
-    };
-  }, [showDropdownOptions]);
-
-  useEffect(() => {
-    setSearchedOption(getValue(selectedOption, valueAccessor));
-  }, [selectedOption]);
-
-  useEffect(() => {
-    if (checkEmpty(optionsList)) return;
-    setSelectOptionList(optionsList);
-  }, [optionsList]);
-
-  return (
-    <div
-      className={`ff-select-wrapper ${className}`}
-      ref={selectWrapperRef}
-      style={{ height: `${height}px`, width: `${selectWidth}` }}
-    >
-      <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-inputField', {
-            'ff-select-inputField__disabled': disabled,
-            'ff-select-inputField__readonly': disableInput,
-          })}
-          onFocus={handleFocus}
-          value={searchedOption}
-          autoCorrect="off"
-          autoComplete="off"
-          spellCheck="false"
-          style={{ zIndex: optionZIndex, color: selectedOptionColor }}
-          disabled={disabled}
-          onChange={handleChange}
-          readOnly={disableInput}
-        />
-        {optionsRequired && (
-          <div
-            ref={selectArrowRef}
-            className={classNames('ff-select-arrows-wrapper', {
-              'ff-select-arrows-wrapper__disabled': disabled,
-            })}
-            onClick={handleIconClick}
-          >
-            <Icon
-              name="arrow_down"
-              className="ff-select-arrows"
-              height={8}
-              width={12}
-            />
-          </div>
-        )}
-        {showLabel && (
-          <Typography
-            as="span"
-            className={classNames('ff-select-labels', {
-              'ff-select-labels__active': searchedOption,
-            })}
-            fontSize={searchedOption || showDropdownOptions ? 8 : 12}
-            lineHeight={searchedOption || showDropdownOptions ? '8px' : '12px'}
-            required={required}
-          >
-            {label}
-          </Typography>
-        )}
-      </div>
-      {errorMsg && (
-        <Typography
-          as="div"
-          lineHeight="15px"
-          fontSize={10}
-          color="var(--error_light)"
-          className="ff-select-error-msg"
-        >
-          {errorMsg}
-        </Typography>
-      )}
-
-      {optionsRequired && (
-        <div ref={DropdownRef}>
-          {showDropdownOptions &&
-            createPortal(
-              <Dropdown
-                options={selectOptionList}
-                dropdownPosition={dropdownPosition}
-                labelAccessor={labelAccessor}
-                optionZIndex={optionZIndex}
-                inputRef={inputRef}
-                selectArrowRef={selectArrowRef}
-                onSelectBlur={onSelectBlur}
-                onSelectOptionSelector={onSelectOptionSelector}
-                heightFromTop={height}
-                selectedOption={searchedOption}
-              />,
-              document.body
-            )}
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default Select;
+import { ChangeEvent, FC, useEffect, useRef, useState } from 'react';
+import './Select.scss';
+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 Select: FC<SelectProps> = ({
+  label = 'Default Label',
+  showLabel = true,
+  optionsList = [],
+  selectedOption = { label: '', value: '' },
+  onChange = () => {},
+  errorMsg = '',
+  className = '',
+  optionZIndex = 100,
+  disabled = false,
+  showBorder = true,
+  required = true,
+  optionsRequired = true,
+  selectedOptionColor = 'var(--ff-select-text-color)',
+  labelAccessor = '',
+  valueAccessor = '',
+  height = 32,
+  width = '100%',
+  onBlur = () => {},
+  disableInput = false,
+  showIcon = false,
+}) => {
+  const selectWidth = typeof width === 'number' ? `${width}px` : width;
+
+  const [showDropdownOptions, setShowDropdownOptions] = useState(false);
+  const [searchedOption, setSearchedOption] = useState<any>({
+    searchedText: '',
+    searchedIcon: '',
+  });
+  const { searchedText, searchedIcon } = searchedOption;
+  const [selectOptionList, setSelectOptionList] = useState<Option[] | []>([]);
+  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(inputRef, showDropdownOptions);
+
+  const handleIconClick = () => {
+    setShowDropdownOptions(!showDropdownOptions);
+    setSearchedOption({
+      ...searchedOption,
+      searchedText: getValue(selectedOption, valueAccessor),
+    });
+    setSelectOptionList(optionsList);
+    if (!showDropdownOptions && inputRef.current) {
+      inputRef.current.focus();
+    }
+  };
+
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+    if (disabled) return;
+    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);
+    });
+
+    setSelectOptionList(filteredOptions);
+    setSearchedOption({
+      ...searchedOption,
+      searchedText: value,
+    });
+  };
+
+  const onSelectUpdatePosition = () => {
+    if (!showDropdownOptions || !DropdownRef?.current || disabled) return;
+    setDropdownPosition(calculatePosition(inputRef));
+  };
+
+  const onSelectToggleScroll = (isEnabled: boolean): void => {
+    const scrollWidth =
+      window.innerWidth - document.documentElement.clientWidth;
+
+    if (isEnabled) {
+      document.body.style.paddingRight = '';
+      document.body.style.overflow = '';
+    } else {
+      document.body.style.paddingRight = `${scrollWidth}px`;
+      document.body.style.overflow = 'hidden';
+    }
+  };
+
+  const handleFocus = () => {
+    if (disabled) return;
+    setShowDropdownOptions(true);
+  };
+
+  const onSelectBlur = () => {
+    setShowDropdownOptions(false);
+    setDropdownPosition({
+      positionX: 0,
+      positionY: 0,
+      fromBottom: 0,
+      width: 0,
+    });
+    setSearchedOption({
+      searchedText: getValue(selectedOption, valueAccessor),
+      searchedIcon: selectedOption.iconName,
+    });
+    setSelectOptionList(optionsList);
+    onBlur();
+  };
+
+  const onSelectOptionSelector = (option: Option): void => {
+    if (disabled) return;
+    onSelectBlur();
+    setSearchedOption({
+      searchedText: getValue(selectedOption, valueAccessor),
+      searchedIcon: selectedOption.iconName,
+    });
+    if (onChange) {
+      onChange(option);
+    }
+  };
+
+  const handleResizeOrScroll = () => onSelectUpdatePosition();
+
+  const hideShowScrollbar = () => {
+    if (disabled) return;
+    if (showDropdownOptions && optionsRequired) {
+      onSelectToggleScroll(!showDropdownOptions);
+    }
+    onSelectUpdatePosition();
+
+    window.addEventListener('resize', handleResizeOrScroll);
+    window.addEventListener('scroll', handleResizeOrScroll);
+  };
+
+  useEffect(() => {
+    hideShowScrollbar();
+    return () => {
+      onSelectToggleScroll(true);
+      window.removeEventListener('resize', handleResizeOrScroll);
+      window.removeEventListener('scroll', handleResizeOrScroll);
+    };
+  }, [showDropdownOptions]);
+
+  useEffect(() => {
+    setSearchedOption({
+      searchedText: getValue(selectedOption, valueAccessor),
+      searchedIcon: selectedOption.iconName,
+    });
+  }, [selectedOption]);
+
+  useEffect(() => {
+    if (checkEmpty(optionsList)) return;
+    setSelectOptionList(optionsList);
+  }, [optionsList]);
+
+  return (
+    <div
+      className={`ff-select-wrapper ${className}`}
+      ref={selectWrapperRef}
+      style={{ height: `${height}px`, width: `${selectWidth}` }}
+    >
+      <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,
+        })}
+      >
+        {showIcon && (
+          <Icon name={searchedIcon} className="ff-select-input-icon" />
+        )}
+        <input
+          type="text"
+          ref={inputRef}
+          id="select-input-element"
+          className={classNames('ff-select-inputField', {
+            'ff-select-inputField__disabled': disabled,
+            'ff-select-inputField__readonly': disableInput,
+            'ff-select-inputField__icon': showIcon,
+          })}
+          onFocus={handleFocus}
+          value={searchedText}
+          autoCorrect="off"
+          autoComplete="off"
+          spellCheck="false"
+          style={{ zIndex: optionZIndex, color: selectedOptionColor }}
+          disabled={disabled}
+          onChange={handleChange}
+          readOnly={disableInput}
+        />
+        {optionsRequired && (
+          <div
+            ref={selectArrowRef}
+            className={classNames('ff-select-arrows-wrapper', {
+              'ff-select-arrows-wrapper__disabled': disabled,
+            })}
+            onClick={handleIconClick}
+          >
+            <Icon
+              name="arrow_down"
+              className="ff-select-arrows"
+              height={8}
+              width={12}
+            />
+          </div>
+        )}
+        {showLabel && (
+          <Typography
+            as="span"
+            className={classNames('ff-select-labels', {
+              'ff-select-labels__icon': showIcon,
+              'ff-select-labels__active': searchedOption,
+            })}
+            fontSize={searchedOption || showDropdownOptions ? 8 : 12}
+            lineHeight={searchedOption || showDropdownOptions ? '8px' : '12px'}
+            required={required}
+          >
+            {label}
+          </Typography>
+        )}
+      </div>
+      {errorMsg && (
+        <Typography
+          as="div"
+          lineHeight="15px"
+          fontSize={10}
+          color="var(--error_light)"
+          className="ff-select-error-msg"
+        >
+          {errorMsg}
+        </Typography>
+      )}
+
+      {optionsRequired && (
+        <div ref={DropdownRef}>
+          {showDropdownOptions &&
+            createPortal(
+              <Dropdown
+                options={selectOptionList}
+                dropdownPosition={dropdownPosition}
+                labelAccessor={labelAccessor}
+                optionZIndex={optionZIndex}
+                inputRef={inputRef}
+                selectArrowRef={selectArrowRef}
+                onSelectBlur={onSelectBlur}
+                onSelectOptionSelector={onSelectOptionSelector}
+                heightFromTop={height}
+                selectedOption={searchedOption}
+                showIcon={showIcon}
+              />,
+              document.body
+            )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Select;

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

@@ -1,52 +1,61 @@
-.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;
-
-    &__selected,
-    &: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;
-  }
-}
+.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;
+
+    .ff-select-dropdown-icon-container {
+      display: flex;
+      align-items: center;
+
+      &__icon {
+        margin-right: 4px;
+      }
+    }
+
+    &__selected,
+    &: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;
+  }
+}