@true-engineering/true-react-common-ui-kit 1.10.0 → 1.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@true-engineering/true-react-common-ui-kit",
-  "version": "1.10.0",
+  "version": "1.12.0",
   "description": "True Engineering React UI Kit with theming support",
   "author": "True Engineering (https://trueengineering.ru)",
   "keywords": [

package/src/components/Button/Button.tsx

@@ -1,10 +1,10 @@
 import {
   useMemo,
-  FC,
   ReactElement,
   ReactNode,
   ButtonHTMLAttributes,
   MouseEvent,
+  forwardRef,
 } from 'react';
 import clsx from 'clsx';
 import merge from 'lodash-es/merge';
@@ -102,94 +102,106 @@ export interface IButtonProps extends ICommonProps {
   onMouseDown?(event: MouseEvent<HTMLButtonElement>): void | Promise<void>;
 }
 
-export const Button: FC<IButtonProps> = ({
-  type = 'button',
-  children,
-  size = 'l',
-  view = 'primary',
-  isFullWidth = false,
-  isInline = false,
-  isDisabled = false,
-  isActive = false,
-  isLoading = false,
-  shouldSkipTabNavigation = false,
-  data,
-  testId,
-  tweakStyles,
-  icon,
-  iconPosition = 'left',
-  preloaderType = 'dots',
-  onClick,
-  onMouseDown,
-}) => {
-  const { classes, componentStyles } = useTheme('Button', styles, tweakStyles);
+export const Button = forwardRef<HTMLButtonElement, IButtonProps>(
+  (
+    {
+      type = 'button',
+      children,
+      size = 'l',
+      view = 'primary',
+      isFullWidth = false,
+      isInline = false,
+      isDisabled = false,
+      isActive = false,
+      isLoading = false,
+      shouldSkipTabNavigation = false,
+      data,
+      testId,
+      tweakStyles,
+      icon,
+      iconPosition = 'left',
+      preloaderType = 'dots',
+      onClick,
+      onMouseDown,
+    },
+    ref,
+  ) => {
+    const { classes, componentStyles } = useTheme(
+      'Button',
+      styles,
+      tweakStyles,
+    );
 
-  const tweakPreloaderStyles = useMemo(
-    () =>
-      merge(
-        {},
-        size === 's' || size === 'm' ? dotsPreloaderStyles : undefined,
-        componentStyles.tweakPreloader,
-        tweakStyles?.tweakPreloader,
-      ) as ThemedPreloaderStyles,
-    [tweakStyles?.tweakPreloader, size],
-  );
+    const tweakPreloaderStyles = useMemo(
+      () =>
+        merge(
+          {},
+          size === 's' || size === 'm' ? dotsPreloaderStyles : undefined,
+          componentStyles.tweakPreloader,
+          tweakStyles?.tweakPreloader,
+        ) as ThemedPreloaderStyles,
+      [tweakStyles?.tweakPreloader, size],
+    );
 
-  const hasIcon = isNotEmpty(icon);
-  const hasChildren = isNotEmpty(children);
-  const hasNoAction = isDisabled || isLoading;
+    const hasIcon = isNotEmpty(icon);
+    const hasChildren = isNotEmpty(children);
+    const hasNoAction = isDisabled || isLoading;
 
-  return (
-    <button
-      type={type}
-      className={clsx(classes.root, classes[size], classes[view], {
-        [classes.disabled]: isDisabled,
-        [classes.fullWidth]: isFullWidth,
-        [classes.inline]: isInline,
-        [classes.active]: isActive,
-        [classes.loading]: isLoading,
-        [classes.onlyIcon]: hasIcon && !hasChildren,
-      })}
-      tabIndex={shouldSkipTabNavigation ? -1 : undefined}
-      disabled={hasNoAction}
-      onClick={!hasNoAction ? onClick : undefined}
-      onMouseDown={!hasNoAction ? onMouseDown : undefined}
-      {...addDataTestId(testId)}
-      {...addDataAttributes(data)}
-    >
-      <span
-        className={clsx(classes.content, {
-          [classes.iconFromRight]:
-            hasChildren && hasIcon && iconPosition === 'right',
-          [classes.iconFromLeft]:
-            hasChildren && hasIcon && iconPosition === 'left',
+    return (
+      <button
+        ref={ref}
+        type={type}
+        className={clsx(classes.root, classes[size], classes[view], {
+          [classes.disabled]: isDisabled,
+          [classes.fullWidth]: isFullWidth,
+          [classes.inline]: isInline,
+          [classes.active]: isActive,
+          [classes.loading]: isLoading,
+          [classes.onlyIcon]: hasIcon && !hasChildren,
         })}
+        tabIndex={shouldSkipTabNavigation ? -1 : undefined}
+        disabled={hasNoAction}
+        onClick={!hasNoAction ? onClick : undefined}
+        onMouseDown={!hasNoAction ? onMouseDown : undefined}
+        {...addDataTestId(testId)}
+        {...addDataAttributes(data)}
       >
-        {hasIcon && (
-          <span className={classes.icon}>
-            {typeof icon === 'string' ? (
-              <Icon type={icon as IIconType} />
-            ) : (
-              icon
-            )}
-          </span>
-        )}
-        {hasChildren && (
-          <span className={clsx(classes.children, hasIcon && classes.withIcon)}>
-            {children}
+        <span
+          className={clsx(classes.content, {
+            [classes.iconFromRight]:
+              hasChildren && hasIcon && iconPosition === 'right',
+            [classes.iconFromLeft]:
+              hasChildren && hasIcon && iconPosition === 'left',
+          })}
+        >
+          {hasIcon && (
+            <span className={classes.icon}>
+              {typeof icon === 'string' ? (
+                <Icon type={icon as IIconType} />
+              ) : (
+                icon
+              )}
+            </span>
+          )}
+          {hasChildren && (
+            <span
+              className={clsx(classes.children, hasIcon && classes.withIcon)}
+            >
+              {children}
+            </span>
+          )}
+        </span>
+
+        {isLoading && (
+          <span className={classes.loader}>
+            <ThemedPreloader
+              type={preloaderType}
+              useCurrentColor
+              tweakStyles={tweakPreloaderStyles}
+            />
           </span>
         )}
-      </span>
-
-      {isLoading && (
-        <span className={classes.loader}>
-          <ThemedPreloader
-            type={preloaderType}
-            useCurrentColor
-            tweakStyles={tweakPreloaderStyles}
-          />
-        </span>
-      )}
-    </button>
-  );
-};
+      </button>
+    );
+  },
+);

package/src/components/Select/MultiSelect.stories.tsx

@@ -240,6 +240,7 @@ MultiSelect.args = {
   errorPosition: 'bottom',
   hasFloatingLabel: true,
   hasRequiredLabel: true,
+  iconType: 'document',
   defaultOptionLabel: '',
   allOptionsLabel: 'Все опции',
   isDisabled: false,

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

@@ -52,22 +52,20 @@ export const styles = {
     },
   },
 
-  tweakInput: {
-    input: {
-      paddingRight: 32,
-    },
-
-    withUnits: {
+  counter: {
+    '&:not(:last-child)': {
       paddingRight: 8,
     },
+  },
 
-    unitsWrapper: {
-      position: 'unset',
-      padding: [0, 32, 0, 0],
-    },
+  icon: {
+    width: 16,
+    height: 16,
+  },
 
-    fakeValue: {
-      display: 'none',
+  tweakInput: {
+    input: {
+      paddingRight: 32,
     },
 
     disabled: {

package/src/components/Select/Select.tsx

@@ -44,6 +44,7 @@ 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'> {
@@ -114,7 +115,7 @@ export function Select<Value>(
     dropdownIcon = 'chevron-down',
     shouldScrollToList = true,
     searchInput,
-    units,
+    iconType,
     onChange,
     onFocus,
     onBlur,
@@ -167,6 +168,19 @@ export function Select<Value>(
     return filter(options, searchValue);
   }, [optionsFilter, options, convertValueToString, searchValue, optionsMode]);
 
+  const availableOptions = useMemo(
+    () => options.filter((o) => !isOptionDisabled(o)),
+    [options, isOptionDisabled],
+  );
+
+  const areAllOptionsSelected =
+    isMultiSelect && value?.length === availableOptions.length;
+  const shouldShowMultiSelectCounter =
+    isMultiSelect &&
+    isNotEmpty(value) &&
+    value.length > 1 &&
+    !areAllOptionsSelected;
+
   const optionsIndexesForNavigation = useMemo(() => {
     const result: number[] = [];
     if (shouldShowDefaultOption && hasDefaultOption) {
@@ -190,9 +204,7 @@ export function Select<Value>(
     : undefined;
   // Для мультиселекта пытаемся показать "Все опции" если выбраны все опции
   const showedStringValue =
-    isMultiSelect &&
-    value?.length === filteredOptions.length &&
-    isNotEmpty(allOptionsLabel)
+    areAllOptionsSelected && isNotEmpty(allOptionsLabel)
       ? allOptionsLabel
       : stringValue;
 
@@ -292,7 +304,7 @@ export function Select<Value>(
         return;
       }
       if (index === ALL_OPTION_INDEX && isSelected) {
-        handleOnChange(options as IMultipleSelectValue<Value>);
+        handleOnChange(availableOptions as IMultipleSelectValue<Value>);
         return;
       }
       const option = filteredOptions[index];
@@ -374,7 +386,7 @@ export function Select<Value>(
         if (isMultiSelect) {
           let isThisValueAlreadySelected: boolean;
           if (indexToSelect === ALL_OPTION_INDEX) {
-            isThisValueAlreadySelected = value?.length === options.length;
+            isThisValueAlreadySelected = areAllOptionsSelected;
           } else {
             // подумать над концептом реального фокуса на опциях, а не вот эти вот focusedCell
             const valueIdToSelect = convertToId(filteredOptions[indexToSelect]);
@@ -456,6 +468,7 @@ export function Select<Value>(
         {},
         componentStyles.tweakInput,
         { ...(hasReadonlyInput && { input: { cursor: 'pointer' } }) },
+        { ...(isMultiSelect && { inputIcon: { width: 'auto' } }) },
         tweakStyles?.tweakInput,
       ) as Styles,
     [tweakStyles?.tweakInput, hasReadonlyInput],
@@ -519,6 +532,7 @@ export function Select<Value>(
               : undefined
           }
           allOptionsLabel={shouldShowAllOption ? allOptionsLabel : undefined}
+          areAllOptionsSelected={areAllOptionsSelected}
           customListHeader={
             hasSearchInputInList ? (
               <SearchInput
@@ -554,6 +568,18 @@ export function Select<Value>(
     </div>
   );
 
+  const multiSelectCounterWithIcon =
+    shouldShowMultiSelectCounter || isNotEmpty(iconType) ? (
+      <>
+        {shouldShowMultiSelectCounter && (
+          <div className={classes.counter}>(+{value.length - 1})</div>
+        )}
+        {isNotEmpty(iconType) && (
+          <div className={classes.icon}>{renderIcon(iconType)}</div>
+        )}
+      </>
+    ) : undefined;
+
   return (
     <div className={classes.root} onKeyDown={handleKeyDown}>
       <div
@@ -577,14 +603,7 @@ export function Select<Value>(
           isLoading={areOptionsLoading}
           tweakStyles={tweakInputStyles}
           testId={testId}
-          units={
-            isMultiSelect &&
-            isNotEmpty(value) &&
-            value.length > 1 &&
-            value.length !== options.length
-              ? `(+${value.length - 1})`
-              : units
-          }
+          iconType={isMultiSelect ? multiSelectCounterWithIcon : iconType}
           {...inputProps}
         />
         <div

package/src/components/Select/SelectList/SelectList.tsx

@@ -20,6 +20,7 @@ export interface ISelectListProps<Value> extends ICommonProps {
   defaultOptionLabel?: string;
   testId?: string;
   allOptionsLabel?: string;
+  areAllOptionsSelected?: boolean;
   shouldScrollToList?: boolean;
   customListHeader?: ReactNode;
   onOptionSelect(index: number, event: MouseEvent<HTMLElement>): void;
@@ -41,6 +42,7 @@ export function SelectList<Value>({
   tweakStyles,
   testId,
   shouldScrollToList = true,
+  areAllOptionsSelected,
   customListHeader,
   isOptionDisabled,
   allOptionsLabel,
@@ -118,10 +120,9 @@ export function SelectList<Value>({
                 classes={classes}
                 index={ALL_OPTION_INDEX}
                 isSemiChecked={
-                  selectedOptionsCount > 0 &&
-                  selectedOptionsCount < options.length
+                  selectedOptionsCount > 0 && !areAllOptionsSelected
                 }
-                isActive={selectedOptionsCount === options.length}
+                isActive={areAllOptionsSelected}
                 isFocused={focusedIndex === ALL_OPTION_INDEX}
                 onOptionSelect={onOptionSelect}
                 onToggleCheckbox={onToggleCheckbox}