@true-engineering/true-react-common-ui-kit 2.0.1 → 2.1.1

package/src/components/Select/Select.styles.ts

@@ -1,96 +1,96 @@
-import { ComponentStyles } from '../../types';
-
-export const styles = {
-  root: {
-    width: '100%',
-    position: 'relative',
-    boxSizing: 'border-box',
-  },
-
-  inputWrapper: {
-    width: '100%',
-    cursor: 'text',
-    position: 'relative',
-  },
-
-  listWrapper: {
-    left: -1,
-    zIndex: 3,
-    width: 'fit-content',
-    minWidth: 'calc(100% + 1px)',
-  },
-
-  withoutPopper: {
-    position: 'absolute',
-    top: 'calc(100% + 6px)',
-  },
-
-  listWrapperInBody: {
-    minWidth: 'auto',
-    width: 'auto',
-    maxWidth: 'min-content',
-  },
-
-  arrow: {
-    position: 'absolute',
-    right: 12,
-    top: 14,
-    width: 20,
-    height: 20,
-    cursor: 'pointer',
-    zIndex: 1,
-    transition: 'transform 0.1s ease',
-  },
-
-  activeArrow: {
-    transform: 'rotate(180deg)',
-  },
-
-  disabled: {
-    '& $arrow': {
-      cursor: 'default',
-    },
-  },
-
-  counter: {
-    '&:not(:last-child)': {
-      paddingRight: 8,
-    },
-  },
-
-  icon: {
-    width: 16,
-    height: 16,
-  },
-
-  tweakInput: {
-    input: {
-      paddingRight: 32,
-    },
-
-    disabled: {
-      '& $input': {
-        cursor: 'default',
-      },
-    },
-
-    controls: {
-      paddingRight: 32,
-    },
-  },
-
-  tweakSelectList: {},
-
-  tweakSearchInput: {
-    tweakInput: {
-      inputWrapper: {
-        height: 48,
-        borderRadius: 0,
-        border: 'none',
-        backgroundColor: 'transparent',
-      },
-    },
-  },
-};
-
-export type SelectStyles = ComponentStyles<typeof styles>;
+import { ComponentStyles } from '../../types';
+
+export const styles = {
+  root: {
+    width: '100%',
+    position: 'relative',
+    boxSizing: 'border-box',
+  },
+
+  inputWrapper: {
+    width: '100%',
+    cursor: 'text',
+    position: 'relative',
+  },
+
+  listWrapper: {
+    left: -1,
+    zIndex: 3,
+    width: 'fit-content',
+    minWidth: 'calc(100% + 1px)',
+  },
+
+  withoutPopper: {
+    position: 'absolute',
+    top: 'calc(100% + 6px)',
+  },
+
+  listWrapperInBody: {
+    minWidth: 'auto',
+    width: 'auto',
+    maxWidth: 'min-content',
+  },
+
+  arrow: {
+    position: 'absolute',
+    right: 12,
+    top: 14,
+    width: 20,
+    height: 20,
+    cursor: 'pointer',
+    zIndex: 1,
+    transition: 'transform 0.1s ease',
+  },
+
+  activeArrow: {
+    transform: 'rotate(180deg)',
+  },
+
+  disabled: {
+    '& $arrow': {
+      cursor: 'default',
+    },
+  },
+
+  counter: {
+    '&:not(:last-child)': {
+      paddingRight: 8,
+    },
+  },
+
+  icon: {
+    width: 16,
+    height: 16,
+  },
+
+  tweakInput: {
+    input: {
+      paddingRight: 32,
+    },
+
+    disabled: {
+      '& $input': {
+        cursor: 'default',
+      },
+    },
+
+    controls: {
+      paddingRight: 32,
+    },
+  },
+
+  tweakSelectList: {},
+
+  tweakSearchInput: {
+    tweakInput: {
+      inputWrapper: {
+        height: 48,
+        borderRadius: 0,
+        border: 'none',
+        backgroundColor: 'transparent',
+      },
+    },
+  },
+};
+
+export type SelectStyles = ComponentStyles<typeof styles>;

package/src/components/Select/Select.tsx

@@ -10,14 +10,19 @@ import {
   useState,
   SyntheticEvent,
 } from 'react';
-import { Styles } from 'jss';
+import { Portal } from 'react-overlays';
 import clsx from 'clsx';
+import { Styles } from 'jss';
 import merge from 'lodash-es/merge';
 import { debounce } from 'ts-debounce';
-import { Portal } from 'react-overlays';
-import { SelectList } from './SelectList';
-import { IInputProps, Input } from '../Input';
-import { IIconType, Icon } from '../Icon';
+import {
+  createFilter,
+  getTestId,
+  hasExactParent,
+  isNotEmpty,
+  isStringNotEmpty,
+} from '../../helpers';
+import { renderIcon } from '../../helpers/snippets';
 import {
   useIsMounted,
   useTheme,
@@ -26,13 +31,12 @@ import {
   useTweakStyles,
 } from '../../hooks';
 import { IDropdownWithPopperOptions } from '../../types';
-import {
-  createFilter,
-  getTestId,
-  hasExactParent,
-  isNotEmpty,
-  isStringNotEmpty,
-} from '../../helpers';
+import { IIconType, Icon } from '../Icon';
+import { IInputProps, Input } from '../Input';
+import { ISearchInputProps, SearchInput } from '../SearchInput';
+import { SelectStyles, styles } from './Select.styles';
+import { SelectList } from './SelectList';
+import { ALL_OPTION_INDEX, DEFAULT_OPTION_INDEX } from './constants';
 import {
   defaultConvertFunction,
   defaultCompareFunction,
@@ -40,11 +44,7 @@ import {
   getDefaultConvertToIdFunction,
   isMultiSelectValue,
 } from './helpers';
-import { SelectStyles, styles } from './Select.styles';
-import { ISearchInputProps, SearchInput } from '../SearchInput';
 import { IMultipleSelectValue } from './types';
-import { ALL_OPTION_INDEX, DEFAULT_OPTION_INDEX } from './constants';
-import { renderIcon } from '../../helpers/snippets';
 
 export interface ISelectProps<Value>
   extends Omit<IInputProps, 'value' | 'onChange' | 'onBlur' | 'type'> {
@@ -62,10 +62,7 @@ export interface ISelectProps<Value>
   value: Value | undefined;
   shouldScrollToList?: boolean;
   isMultiSelect?: boolean;
-  searchInput?: { shouldRenderInList: true } & Pick<
-    ISearchInputProps,
-    'placeholder'
-  >;
+  searchInput?: { shouldRenderInList: true } & Pick<ISearchInputProps, 'placeholder'>;
   isOptionDisabled?(option: Value): boolean;
   onChange(value?: Value): void; // подумать как возвращать индекс
   onBlur?(event: Event | SyntheticEvent): void;
@@ -81,10 +78,7 @@ export interface ISelectProps<Value>
 }
 
 export interface IMultipleSelectProps<Value>
-  extends Omit<
-    ISelectProps<Value>,
-    'value' | 'onChange' | 'compareValuesOnChange'
-  > {
+  extends Omit<ISelectProps<Value>, 'value' | 'onChange' | 'compareValuesOnChange'> {
   isMultiSelect: true;
   value: IMultipleSelectValue<Value> | undefined;
   onChange(value?: IMultipleSelectValue<Value>): void;
@@ -135,8 +129,7 @@ export function Select<Value>(
   const [areOptionsLoading, setAreOptionsLoading] = useState(false);
   const hasDefaultOption = isStringNotEmpty(defaultOptionLabel);
 
-  const [focusedListCellIndex, setFocusedListCellIndex] =
-    useState(DEFAULT_OPTION_INDEX);
+  const [focusedListCellIndex, setFocusedListCellIndex] = useState(DEFAULT_OPTION_INDEX);
   const [searchValue, setSearchValue] = useState('');
   // если мы ввели что то в строку поиска - то этот булеан будет отключаться
   // вынесен отдельно, из-за проблем с дебаунсом при динамич. опциях
@@ -146,15 +139,12 @@ export function Select<Value>(
   const list = useRef<HTMLDivElement>(null);
   const input = useRef<HTMLInputElement>(null); // TODO ref снаружи?
 
-  const shouldRenderSearchInputInList =
-    searchInput?.shouldRenderInList === true;
-  const hasSearchInputInList =
-    optionsMode !== 'normal' && shouldRenderSearchInputInList;
+  const shouldRenderSearchInputInList = searchInput?.shouldRenderInList === true;
+  const hasSearchInputInList = optionsMode !== 'normal' && shouldRenderSearchInputInList;
 
   const isMultiSelect = isMultiSelectValue(props, value);
   const strValue = isMultiSelect ? value?.[0] : value;
-  const shouldShowAllOption =
-    isMultiSelect && isNotEmpty(allOptionsLabel) && searchValue === '';
+  const shouldShowAllOption = isMultiSelect && isNotEmpty(allOptionsLabel) && searchValue === '';
 
   const filteredOptions = useMemo(() => {
     if (optionsMode !== 'search') {
@@ -162,8 +152,7 @@ export function Select<Value>(
     }
 
     const filter =
-      optionsFilter ??
-      createFilter<Value>((option) => [convertValueToString(option) ?? '']);
+      optionsFilter ?? createFilter<Value>((option) => [convertValueToString(option) ?? '']);
 
     return filter(options, searchValue);
   }, [optionsFilter, options, convertValueToString, searchValue, optionsMode]);
@@ -173,13 +162,9 @@ export function Select<Value>(
     [options, isOptionDisabled],
   );
 
-  const areAllOptionsSelected =
-    isMultiSelect && value?.length === availableOptions.length;
+  const areAllOptionsSelected = isMultiSelect && value?.length === availableOptions.length;
   const shouldShowMultiSelectCounter =
-    isMultiSelect &&
-    isNotEmpty(value) &&
-    value.length > 1 &&
-    !areAllOptionsSelected;
+    isMultiSelect && isNotEmpty(value) && value.length > 1 && !areAllOptionsSelected;
 
   const optionsIndexesForNavigation = useMemo(() => {
     const result: number[] = [];
@@ -199,20 +184,13 @@ export function Select<Value>(
     );
   }, [filteredOptions]);
 
-  const stringValue = isNotEmpty(strValue)
-    ? convertValueToString(strValue)
-    : undefined;
+  const stringValue = isNotEmpty(strValue) ? convertValueToString(strValue) : undefined;
   // Для мультиселекта пытаемся показать "Все опции" если выбраны все опции
   const showedStringValue =
-    areAllOptionsSelected && isNotEmpty(allOptionsLabel)
-      ? allOptionsLabel
-      : stringValue;
+    areAllOptionsSelected && isNotEmpty(allOptionsLabel) ? allOptionsLabel : stringValue;
 
   const convertToId = useCallback(
-    (v: Value) =>
-      (convertValueToId ?? getDefaultConvertToIdFunction(convertValueToString))(
-        v,
-      ),
+    (v: Value) => (convertValueToId ?? getDefaultConvertToIdFunction(convertValueToString))(v),
     [convertValueToId, convertValueToString],
   );
 
@@ -279,9 +257,7 @@ export function Select<Value>(
 
   const handleOptionSelect = useCallback(
     (index: number, event: MouseEvent<HTMLElement> | KeyboardEvent) => {
-      handleOnChange(
-        index === DEFAULT_OPTION_INDEX ? undefined : filteredOptions[index],
-      );
+      handleOnChange(index === DEFAULT_OPTION_INDEX ? undefined : filteredOptions[index]);
       handleListClose(event);
       input.current?.blur();
     },
@@ -296,10 +272,7 @@ export function Select<Value>(
       }
 
       // Если выбрана не дефолтная опция, которая сетит андеф
-      if (
-        index === DEFAULT_OPTION_INDEX ||
-        (index === ALL_OPTION_INDEX && !isSelected)
-      ) {
+      if (index === DEFAULT_OPTION_INDEX || (index === ALL_OPTION_INDEX && !isSelected)) {
         handleOnChange(undefined);
         return;
       }
@@ -338,10 +311,10 @@ export function Select<Value>(
     [onType, optionsMode],
   );
 
-  const debounceHandleOnType = useCallback(
-    debounce(handleOnType, debounceTime),
-    [handleOnType, debounceTime],
-  );
+  const debounceHandleOnType = useCallback(debounce(handleOnType, debounceTime), [
+    handleOnType,
+    debounceTime,
+  ]);
 
   const handleInputChange = (v: string) => {
     if (onType !== undefined) {
@@ -376,10 +349,7 @@ export function Select<Value>(
 
         // если осталась одна опция в списке,
         // то выбираем ее нажатием на enter
-        if (
-          indexToSelect === DEFAULT_OPTION_INDEX &&
-          filteredOptions.length === 1
-        ) {
+        if (indexToSelect === DEFAULT_OPTION_INDEX && filteredOptions.length === 1) {
           indexToSelect = 0;
         }
 
@@ -391,13 +361,9 @@ export function Select<Value>(
             // подумать над концептом реального фокуса на опциях, а не вот эти вот focusedCell
             const valueIdToSelect = convertToId(filteredOptions[indexToSelect]);
             isThisValueAlreadySelected =
-              value?.some((opt) => convertToId(opt) === valueIdToSelect) ??
-              false;
+              value?.some((opt) => convertToId(opt) === valueIdToSelect) ?? false;
           }
-          handleToggleOptionCheckbox(
-            indexToSelect,
-            !isThisValueAlreadySelected,
-          );
+          handleToggleOptionCheckbox(indexToSelect, !isThisValueAlreadySelected);
         } else {
           handleOptionSelect(indexToSelect, event);
         }
@@ -409,9 +375,7 @@ export function Select<Value>(
         event.preventDefault();
         const targetIndexInNavigation =
           (curIndexInNavigation + 1) % optionsIndexesForNavigation.length;
-        setFocusedListCellIndex(
-          optionsIndexesForNavigation[targetIndexInNavigation],
-        );
+        setFocusedListCellIndex(optionsIndexesForNavigation[targetIndexInNavigation]);
         break;
       }
 
@@ -421,9 +385,7 @@ export function Select<Value>(
         const targetIndexInNavigation =
           (curIndexInNavigation - 1 + optionsIndexesForNavigation.length) %
           optionsIndexesForNavigation.length;
-        setFocusedListCellIndex(
-          optionsIndexesForNavigation[targetIndexInNavigation],
-        );
+        setFocusedListCellIndex(optionsIndexesForNavigation[targetIndexInNavigation]);
         break;
       }
     }
@@ -439,8 +401,7 @@ export function Select<Value>(
 
   useOnClickOutsideWithRef(list, handleListClose, inputWrapper);
 
-  const hasEnoughSymbolsToSearch =
-    searchValue.trim().length >= minSymbolsCountToOpenList;
+  const hasEnoughSymbolsToSearch = searchValue.trim().length >= minSymbolsCountToOpenList;
 
   const isOpen =
     // Пользователь пытается открыть лист
@@ -459,8 +420,7 @@ export function Select<Value>(
     // Последняя проверка на случай, если мы че то ищем в опциях
     (optionsMode === 'normal' || hasEnoughSymbolsToSearch);
 
-  const hasReadonlyInput =
-    isReadonly || optionsMode === 'normal' || shouldRenderSearchInputInList;
+  const hasReadonlyInput = isReadonly || optionsMode === 'normal' || shouldRenderSearchInputInList;
 
   const tweakInputStyles = useMemo(
     () =>
@@ -474,11 +434,7 @@ export function Select<Value>(
     [tweakStyles?.tweakInput, hasReadonlyInput],
   );
 
-  const tweakSearchInputStyles = useTweakStyles(
-    componentStyles,
-    tweakStyles,
-    'tweakSearchInput',
-  );
+  const tweakSearchInputStyles = useTweakStyles(componentStyles, tweakStyles, 'tweakSearchInput');
 
   // Эти значения ставятся в false по дефолту также в useDropdown
   const {
@@ -493,10 +449,7 @@ export function Select<Value>(
     referenceElement: inputWrapper.current,
     dropdownElement: list.current,
     options: dropdownOptions,
-    dependenciesForPositionUpdating: [
-      inputProps.isLoading,
-      filteredOptions.length,
-    ],
+    dependenciesForPositionUpdating: [inputProps.isLoading, filteredOptions.length],
   });
 
   useEffect(() => {
@@ -531,9 +484,7 @@ export function Select<Value>(
         <SelectList
           options={filteredOptions}
           defaultOptionLabel={
-            hasDefaultOption && shouldShowDefaultOption
-              ? defaultOptionLabel
-              : undefined
+            hasDefaultOption && shouldShowDefaultOption ? defaultOptionLabel : undefined
           }
           allOptionsLabel={shouldShowAllOption ? allOptionsLabel : undefined}
           areAllOptionsSelected={areAllOptionsSelected}
@@ -556,17 +507,13 @@ export function Select<Value>(
           tweakStyles={tweakStyles?.tweakSelectList as Styles}
           testId={getTestId(testId, 'list')}
           // скролл не работает с включеным поппером
-          shouldScrollToList={
-            shouldScrollToList && !shouldUsePopper && !shouldHideOnScroll
-          }
+          shouldScrollToList={shouldScrollToList && !shouldUsePopper && !shouldHideOnScroll}
           isOptionDisabled={isOptionDisabled}
           convertValueToString={convertValueToString}
           convertValueToReactNode={convertValueToReactNode}
           convertValueToId={convertToId}
           onOptionSelect={handleOptionSelect}
-          onToggleCheckbox={
-            isMultiSelect ? handleToggleOptionCheckbox : undefined
-          }
+          onToggleCheckbox={isMultiSelect ? handleToggleOptionCheckbox : undefined}
         />
       )}
     </div>
@@ -578,9 +525,7 @@ export function Select<Value>(
         {shouldShowMultiSelectCounter && (
           <div className={classes.counter}>(+{value.length - 1})</div>
         )}
-        {isNotEmpty(iconType) && (
-          <div className={classes.icon}>{renderIcon(iconType)}</div>
-        )}
+        {isNotEmpty(iconType) && <div className={classes.icon}>{renderIcon(iconType)}</div>}
       </>
     ) : undefined;
 
@@ -593,9 +538,7 @@ export function Select<Value>(
       >
         <Input
           value={
-            searchValue !== '' && !shouldRenderSearchInputInList
-              ? searchValue
-              : showedStringValue
+            searchValue !== '' && !shouldRenderSearchInputInList ? searchValue : showedStringValue
           }
           onChange={handleInputChange}
           isActive={isListOpen}
@@ -621,9 +564,7 @@ export function Select<Value>(
         </div>
       </div>
       {shouldUsePopper ? (
-        <Portal
-          container={shouldRenderInBody ? document.body : inputWrapper.current}
-        >
+        <Portal container={shouldRenderInBody ? document.body : inputWrapper.current}>
           <>{listEl}</>
         </Portal>
       ) : (

package/src/components/Select/SelectList/SelectList.styles.ts

@@ -1,72 +1,72 @@
-import { colors, dimensions, helpers } from '../../../theme';
-import { ComponentStyles } from '../../../types';
-
-export const ROW_HEIGHT = 40;
-export const CONTAINER_PADDING = 10;
-export const CELL_PADDING = [10, 20];
-
-export const styles = {
-  root: {
-    borderRadius: dimensions.BORDER_RADIUS_SMALL,
-    boxShadow: '0 13px 74px -27px rgba(0, 0, 0, 0.11)',
-    boxSizing: 'border-box',
-    padding: [CONTAINER_PADDING, 0],
-    fontSize: 16,
-    overflow: 'hidden',
-  },
-
-  withListHeader: {
-    paddingTop: 0,
-  },
-
-  listHeader: {
-    '& + $list': {
-      borderTop: [1, 'solid', colors.BORDER_LIGHT],
-    },
-  },
-
-  list: {
-    height: '100%',
-    maxHeight: ROW_HEIGHT * 6,
-    cursor: 'pointer',
-    backgroundColor: colors.CLASSIC_WHITE,
-
-    ...helpers.withScrollBar,
-  },
-
-  cell: {
-    display: 'flex',
-    cursor: 'pointer',
-    minHeight: ROW_HEIGHT,
-    width: 'auto',
-    padding: CELL_PADDING,
-    alignItems: 'center',
-    boxSizing: 'border-box',
-    fontSize: 14,
-  },
-
-  cellWithCheckbox: {
-    padding: 0,
-  },
-
-  noMatchesLabel: {
-    pointerEvents: 'none',
-  },
-
-  focused: {},
-
-  active: {},
-
-  disabled: {
-    cursor: 'default',
-  },
-
-  loading: {
-    cursor: 'default',
-    pointerEvents: 'none',
-  },
-
-  defaultCell: {},
-};
-
-export type SelectListStyles = ComponentStyles<typeof styles>;
+import { colors, dimensions, helpers } from '../../../theme';
+import { ComponentStyles } from '../../../types';
+
+export const ROW_HEIGHT = 40;
+export const CONTAINER_PADDING = 10;
+export const CELL_PADDING = [10, 20];
+
+export const styles = {
+  root: {
+    borderRadius: dimensions.BORDER_RADIUS_SMALL,
+    boxShadow: '0 13px 74px -27px rgba(0, 0, 0, 0.11)',
+    boxSizing: 'border-box',
+    padding: [CONTAINER_PADDING, 0],
+    fontSize: 16,
+    overflow: 'hidden',
+  },
+
+  withListHeader: {
+    paddingTop: 0,
+  },
+
+  listHeader: {
+    '& + $list': {
+      borderTop: [1, 'solid', colors.BORDER_LIGHT],
+    },
+  },
+
+  list: {
+    height: '100%',
+    maxHeight: ROW_HEIGHT * 6,
+    cursor: 'pointer',
+    backgroundColor: colors.CLASSIC_WHITE,
+
+    ...helpers.withScrollBar,
+  },
+
+  cell: {
+    display: 'flex',
+    cursor: 'pointer',
+    minHeight: ROW_HEIGHT,
+    width: 'auto',
+    padding: CELL_PADDING,
+    alignItems: 'center',
+    boxSizing: 'border-box',
+    fontSize: 14,
+  },
+
+  cellWithCheckbox: {
+    padding: 0,
+  },
+
+  noMatchesLabel: {
+    pointerEvents: 'none',
+  },
+
+  focused: {},
+
+  active: {},
+
+  disabled: {
+    cursor: 'default',
+  },
+
+  loading: {
+    cursor: 'default',
+    pointerEvents: 'none',
+  },
+
+  defaultCell: {},
+};
+
+export type SelectListStyles = ComponentStyles<typeof styles>;