@true-engineering/true-react-common-ui-kit 4.0.0-alpha54 → 4.0.0-alpha61

package/src/components/FileInput/FileInput.tsx

@@ -8,11 +8,11 @@ import {
 } from 'react';
 import clsx from 'clsx';
 import {
+  addDataAttributes,
   addDataTestId,
   isEmpty,
   isReactNodeNotEmpty,
 } from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../helpers';
 import { ICommonProps } from '../../types';
 import { blockEvent } from './helpers';
 import { IFileInputStyles, useStyles } from './FileInput.styles';
@@ -39,109 +39,101 @@ export interface IFileInputProps extends ICommonProps<IFileInputStyles> {
   onAdd?: (files: File[]) => void;
 }
 
-export const FileInput = forwardRef<HTMLInputElement, IFileInputProps>(
-  (
-    {
-      fileList,
-      label,
-      text,
-      description,
-      isDragAndDropDisabled = false,
-      isRequired = false,
-      isReadOnly = false,
-      isMultipleDisabled = false,
-      isDisabled = false,
-      isActive = false,
-      accept,
-      onAdd,
-      testId,
-      tweakStyles,
-      data,
-    },
-    ref,
-  ) => {
-    const classes = useStyles({ theme: tweakStyles });
-
-    const [isDragOver, setIsDragOver] = useState(false);
+export const FileInput = forwardRef<HTMLInputElement, IFileInputProps>(function FileInput(
+  {
+    fileList,
+    label,
+    text,
+    description,
+    isDragAndDropDisabled = false,
+    isRequired = false,
+    isReadOnly = false,
+    isMultipleDisabled = false,
+    isDisabled = false,
+    isActive = false,
+    accept,
+    onAdd,
+    testId,
+    tweakStyles,
+    data,
+  },
+  ref,
+) {
+  const classes = useStyles({ theme: tweakStyles });
 
-    const handleAdd = (files: FileList | null) => {
-      if (isDisabled || isEmpty(files) || files?.length === 0) {
-        return;
-      }
+  const [isDragOver, setIsDragOver] = useState(false);
 
-      onAdd?.([...files]);
-    };
+  const handleAdd = (files: FileList | null) => {
+    if (isDisabled || isEmpty(files) || files?.length === 0) {
+      return;
+    }
 
-    const handleDragStart: DragEventHandler<HTMLDivElement> = (event) => {
-      blockEvent(event);
-      setIsDragOver(true);
-    };
+    onAdd?.([...files]);
+  };
 
-    const handleDragStop: DragEventHandler<HTMLDivElement> = (event) => {
-      blockEvent(event);
-      setIsDragOver(false);
-    };
+  const handleDragStart: DragEventHandler<HTMLDivElement> = (event) => {
+    blockEvent(event);
+    setIsDragOver(true);
+  };
 
-    const handleDrop: DragEventHandler<HTMLDivElement> = (event) => {
-      handleDragStop(event);
+  const handleDragStop: DragEventHandler<HTMLDivElement> = (event) => {
+    blockEvent(event);
+    setIsDragOver(false);
+  };
 
-      handleAdd(event.dataTransfer.files);
-    };
+  const handleDrop: DragEventHandler<HTMLDivElement> = (event) => {
+    handleDragStop(event);
 
-    const handleFileChange: ChangeEventHandler<HTMLInputElement> = (event) => {
-      handleAdd(event.target.files);
-    };
+    handleAdd(event.dataTransfer.files);
+  };
 
-    const dndHandlers =
-      !isDragAndDropDisabled && !isDisabled
-        ? {
-            onDragOver: handleDragStart,
-            onDragEnter: handleDragStart,
-            onDragLeave: handleDragStop,
-            onDrop: handleDrop,
-          }
-        : undefined;
+  const handleFileChange: ChangeEventHandler<HTMLInputElement> = (event) => {
+    handleAdd(event.target.files);
+  };
 
-    return (
-      <div className={classes.root} {...addDataAttributes(data)} {...addDataTestId(testId)}>
-        {isReactNodeNotEmpty(label) && (
-          <div className={clsx(classes.label, { [classes.requiredLabel]: isRequired })}>
-            {label}
-          </div>
-        )}
-        {!isReadOnly && (
-          <div
-            className={clsx(classes.inputWrapper, {
-              [classes.dragged]: isDragOver,
-              [classes.disabled]: isDisabled,
-              [classes.active]: isActive,
-            })}
-            {...dndHandlers}
-          >
-            {isReactNodeNotEmpty(text) && <div className={classes.text}>{text}</div>}
-            <label className={classes.inputLabel}>
-              <input
-                ref={ref}
-                type="file"
-                value=""
-                onChange={handleFileChange}
-                multiple={!isMultipleDisabled}
-                disabled={isDisabled}
-                accept={accept}
-                {...addDataTestId(testId, 'input')}
-              />
-            </label>
-          </div>
-        )}
+  const dndHandlers =
+    !isDragAndDropDisabled && !isDisabled
+      ? {
+          onDragOver: handleDragStart,
+          onDragEnter: handleDragStart,
+          onDragLeave: handleDragStop,
+          onDrop: handleDrop,
+        }
+      : undefined;
 
-        {isReactNodeNotEmpty(description) && (
-          <div className={classes.description}>{description}</div>
-        )}
+  return (
+    <div className={classes.root} {...addDataAttributes(data, testId)}>
+      {isReactNodeNotEmpty(label) && (
+        <div className={clsx(classes.label, { [classes.requiredLabel]: isRequired })}>{label}</div>
+      )}
+      {!isReadOnly && (
+        <div
+          className={clsx(classes.inputWrapper, {
+            [classes.dragged]: isDragOver,
+            [classes.disabled]: isDisabled,
+            [classes.active]: isActive,
+          })}
+          {...dndHandlers}
+        >
+          {isReactNodeNotEmpty(text) && <div className={classes.text}>{text}</div>}
+          <label className={classes.inputLabel}>
+            <input
+              ref={ref}
+              type="file"
+              value=""
+              onChange={handleFileChange}
+              multiple={!isMultipleDisabled}
+              disabled={isDisabled}
+              accept={accept}
+              {...addDataTestId(testId, 'input')}
+            />
+          </label>
+        </div>
+      )}
 
-        <div className={classes.fileList}>{fileList}</div>
-      </div>
-    );
-  },
-);
+      {isReactNodeNotEmpty(description) && <div className={classes.description}>{description}</div>}
 
-FileInput.displayName = 'FileInput';
+      <div className={classes.fileList}>{fileList}</div>
+    </div>
+  );
+});

package/src/components/FileItem/FileItem.tsx

@@ -3,12 +3,11 @@ import clsx from 'clsx';
 import { filesize } from 'filesize';
 import {
   addClickHandler,
-  addDataTestId,
+  addDataAttributes,
   isFunction,
   isNotEmpty,
   isReactNodeNotEmpty,
 } from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../helpers';
 import { useTweakStyles } from '../../hooks';
 import { ICommonProps } from '../../types';
 import { IIcon, renderIcon } from '../Icon';
@@ -104,8 +103,7 @@ export const FileItem: FC<IFileItemProps> = ({
         className={clsx(classes.fileItemWrapper, classes[itemSize], {
           [classes.disabled]: isDisabled,
         })}
-        {...addDataTestId(testId)}
-        {...addDataAttributes(data)}
+        {...addDataAttributes(data, testId)}
         {...addClickHandler(handleClick, !isDisabled)}
       >
         <div className={classes.fileIcon}>{renderIcon(icon)}</div>

package/src/components/FiltersPane/FiltersPane.stories.tsx

@@ -83,6 +83,8 @@ interface IFiltersPaneCustomProps<Values extends Record<string, unknown>, Conten
   isSearchAutoSized: boolean;
 }
 
+const tweakWrapperStyles = { name: { color: 'tomato' } };
+
 const Story: FC<IFiltersPaneCustomProps<ConfigValues, unknown>> = ({
   containerWidth,
   isSearchDisabled,
@@ -216,6 +218,7 @@ const Story: FC<IFiltersPaneCustomProps<ConfigValues, unknown>> = ({
       isClearable: isClearableFields,
       options: [LONG_STRING, '2', '3'],
       component: ({ filter, ...props }) => <FilterSelect {...props} {...filter} />,
+      tweakWrapperStyles,
     },
   };
 

package/src/components/FiltersPane/components/FilterInterval/FilterInterval.tsx

@@ -1,6 +1,5 @@
 import { FC, useMemo } from 'react';
-import { getTestId } from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../../../helpers';
+import { getTestId, addDataAttributes } from '@true-engineering/true-react-platform-helpers';
 import { useTweakStyles } from '../../../../hooks';
 import { ICommonProps } from '../../../../types';
 import { Button } from '../../../Button';
@@ -79,7 +78,7 @@ export const FilterInterval: FC<IFilterIntervalProps> = ({
   });
 
   return (
-    <div className={classes.root} {...addDataAttributes(data)}>
+    <div className={classes.root} {...addDataAttributes(data, testId)}>
       <div className={classes.inputWrapper}>
         <div>
           <NumberInput

package/src/components/FiltersPane/components/FilterWithDates/FilterWithDates.tsx

@@ -1,8 +1,11 @@
 import { FC, useMemo, useRef, useState } from 'react';
 import { isAfter, isBefore } from 'date-fns';
 import { enUS, ru } from 'date-fns/locale';
-import { getTestId, isNotEmpty } from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../../../helpers';
+import {
+  getTestId,
+  isNotEmpty,
+  addDataAttributes,
+} from '@true-engineering/true-react-platform-helpers';
 import { useTweakStyles } from '../../../../hooks';
 import { ICommonProps } from '../../../../types';
 import { Button } from '../../../Button';
@@ -127,7 +130,7 @@ export const FilterWithDates: FC<IFilterWithDatesProps> = ({
   };
 
   return (
-    <div className={classes.root} {...addDataAttributes(data)}>
+    <div className={classes.root} {...addDataAttributes(data, testId)}>
       <div className={classes.container}>
         <div className={classes.containerItem}>
           <DatePicker

package/src/components/FiltersPane/components/FilterWrapper/FilterWrapper.tsx

@@ -5,7 +5,7 @@ import {
   getTestId,
   isNotEmpty,
 } from '@true-engineering/true-react-platform-helpers';
-import { useTweakStyles } from '../../../../hooks';
+import { useMixedStyles, useTweakStyles } from '../../../../hooks';
 import { ICommonProps } from '../../../../types';
 import { Icon } from '../../../Icon';
 import { WithPopup } from '../../../WithPopup';
@@ -35,9 +35,10 @@ export function FilterWrapper<Values extends Record<string, unknown>, Key extend
   localeKey,
   data,
   testId,
-  tweakStyles,
+  tweakStyles: baseTweakStyles,
   onChange,
 }: IFilterWrapperProps<Values, Key>): JSX.Element {
+  const tweakStyles = useMixedStyles(baseTweakStyles, filter.tweakWrapperStyles);
   const classes = useStyles({ theme: tweakStyles });
 
   const tweakWithPopupStyles = useTweakStyles({

package/src/components/FiltersPane/types.ts

@@ -9,6 +9,7 @@ import type {
   IFilterSelectProps,
   IFilterWithDatesProps,
   IFilterWithPeriodProps,
+  IFilterWrapperStyles,
 } from './components';
 import { FilterLocales, PERIODS, SelectLocales } from './constants';
 
@@ -56,6 +57,7 @@ export interface IConfigItemBasicBase<Value> {
   localeKey?: IFilterLocaleKey;
   locale?: IPartialFilterLocale;
   getSelectedValueView?: (v: Value) => ReactNode;
+  tweakWrapperStyles?: IFilterWrapperStyles;
 }
 
 export type IIntervalConfigItem<Value> = IConfigItemBasicBase<Value> & {

package/src/components/FlexibleTable/FlexibleTable.styles.ts

@@ -98,6 +98,7 @@ export const useStyles = createThemedStyles('FlexibleTable', {
     },
   },
 
+  /** @deprecated удалить вместе с isFirstColumnSticky */
   headerSecond: {
     paddingLeft: STICKY_SHADOW_PADDING,
   },

package/src/components/FlexibleTable/components/FlexibleTableCell/FlexibleTableCell.styles.ts

@@ -25,6 +25,7 @@ export const useStyles = createThemedStyles('FlexibleTableCell', {
     },
   },
 
+  /** @deprecated удалить вместе с isFirstColumnSticky */
   second: {
     paddingLeft: STICKY_SHADOW_PADDING,
   },

package/src/components/FlexibleTable/components/FlexibleTableCell/FlexibleTableCell.tsx

@@ -1,7 +1,10 @@
 import { ReactNode, useCallback } from 'react';
 import clsx from 'clsx';
-import { applyAction, isNotEmpty } from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../../../helpers';
+import {
+  applyAction,
+  isNotEmpty,
+  addDataAttributes,
+} from '@true-engineering/true-react-platform-helpers';
 import { ICommonProps } from '../../../../types';
 import { Skeleton } from '../../../Skeleton';
 import { TableRenders } from '../../constants';

package/src/components/FlexibleTable/components/FlexibleTableRow/FlexibleTableRow.tsx

@@ -1,7 +1,11 @@
-import { ReactNode, useState, memo, MouseEvent, RefCallback, useCallback } from 'react';
+import { ReactNode, useState, MouseEvent, RefCallback, useCallback } from 'react';
 import clsx from 'clsx';
-import { isEmpty, isNotEmpty } from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../../../helpers';
+import {
+  isEmpty,
+  isNotEmpty,
+  addDataAttributes,
+} from '@true-engineering/true-react-platform-helpers';
+import { genericMemo } from '../../../../helpers';
 import { useTweakStyles } from '../../../../hooks';
 import { IDataAttributes, ITweakStylesProps } from '../../../../types';
 import { TableRenders } from '../../constants';
@@ -44,7 +48,7 @@ export interface IFlexibleTableRowProps<
   onRowClick?: (id: Row[UniqueField]) => void;
 }
 
-function FlexibleTableRowInner<
+export const FlexibleTableRow = genericMemo(function FlexibleTableRow<
   Row extends ITableRow,
   HeaderContent extends IHeaderContent<Row>,
   UniqueField extends keyof Row,
@@ -189,6 +193,4 @@ function FlexibleTableRowInner<
       )}
     </>
   );
-}
-
-export const FlexibleTableRow = memo(FlexibleTableRowInner) as typeof FlexibleTableRowInner;
+});

package/src/components/IconButton/IconButton.tsx

@@ -1,7 +1,6 @@
 import { forwardRef } from 'react';
 import clsx from 'clsx';
-import { addDataTestId } from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../helpers';
+import { addDataAttributes } from '@true-engineering/true-react-platform-helpers';
 import { ICommonProps } from '../../types';
 import { renderIcon, IIcon } from '../Icon';
 import { ThemedPreloader } from '../ThemedPreloader';
@@ -24,51 +23,48 @@ export interface IIconButtonProps
   isLoading?: boolean;
 }
 
-export const IconButton = forwardRef<HTMLButtonElement, IIconButtonProps>(
-  (
-    {
-      icon,
-      size = 'm',
-      view = 'cancel-light',
-      isDisabled = false,
-      isActive = false,
-      isLoading = false,
-      type = 'button',
-      testId,
-      tweakStyles,
-      data,
-      onClick,
-      ...restProps
-    },
-    ref,
-  ) => {
-    const classes = useStyles({ theme: tweakStyles });
+export const IconButton = forwardRef<HTMLButtonElement, IIconButtonProps>(function IconButton(
+  {
+    icon,
+    size = 'm',
+    view = 'cancel-light',
+    isDisabled = false,
+    isActive = false,
+    isLoading = false,
+    type = 'button',
+    testId,
+    tweakStyles,
+    data,
+    onClick,
+    ...restProps
+  },
+  ref,
+) {
+  const classes = useStyles({ theme: tweakStyles });
 
-    const hasNoAction = isDisabled || isLoading;
+  const hasNoAction = isDisabled || isLoading;
 
-    return (
-      <button
-        ref={ref}
-        className={clsx(classes.root, classes[view], classes[size], {
-          [classes.disabled]: isDisabled,
-          [classes.active]: isActive,
-          [classes.loading]: isLoading,
-        })}
-        type={type}
-        disabled={isDisabled}
-        onClick={hasNoAction ? undefined : onClick}
-        {...restProps}
-        {...addDataTestId(testId)}
-        {...addDataAttributes(data)}
-      >
-        {isLoading ? (
-          <span className={classes.loader}>
-            <ThemedPreloader type="default" useCurrentColor />
-          </span>
-        ) : (
-          <span className={classes.icon}>{renderIcon(icon)}</span>
-        )}
-      </button>
-    );
-  },
-);
+  return (
+    <button
+      ref={ref}
+      className={clsx(classes.root, classes[view], classes[size], {
+        [classes.disabled]: isDisabled,
+        [classes.active]: isActive,
+        [classes.loading]: isLoading,
+      })}
+      type={type}
+      disabled={isDisabled}
+      onClick={hasNoAction ? undefined : onClick}
+      {...restProps}
+      {...addDataAttributes(data, testId)}
+    >
+      {isLoading ? (
+        <span className={classes.loader}>
+          <ThemedPreloader type="default" useCurrentColor />
+        </span>
+      ) : (
+        <span className={classes.icon}>{renderIcon(icon)}</span>
+      )}
+    </button>
+  );
+});

package/src/components/Input/Input.tsx

@@ -8,28 +8,30 @@ export interface IInputProps
   extends IInputBaseProps,
     Pick<IWithMessagesProps, 'infoMessage' | 'errorMessage'> {}
 
-export const Input = forwardRef<HTMLInputElement, IInputProps>(
-  ({ infoMessage, errorMessage, isInvalid, testId, tweakStyles, ...inputProps }, ref) => {
-    const tweakWithMessagesStyles = useTweakStyles({
-      tweakStyles,
-      className: 'tweakWithMessages',
-    });
+export const Input = forwardRef<HTMLInputElement, IInputProps>(function Input(
+  { infoMessage, errorMessage, isInvalid, testId, tweakStyles, ...inputProps },
+  ref,
+) {
+  const tweakWithMessagesStyles = useTweakStyles({
+    tweakStyles,
+    className: 'tweakWithMessages',
+    currentComponentName: 'Input',
+  });
 
-    return (
-      <WithMessages
-        errorMessage={errorMessage}
-        infoMessage={infoMessage}
-        testId={getTestId(testId, 'wrapper')}
-        tweakStyles={tweakWithMessagesStyles}
-      >
-        <InputBase
-          {...inputProps}
-          ref={ref}
-          testId={testId}
-          tweakStyles={tweakStyles}
-          isInvalid={isInvalid}
-        />
-      </WithMessages>
-    );
-  },
-);
+  return (
+    <WithMessages
+      errorMessage={errorMessage}
+      infoMessage={infoMessage}
+      testId={getTestId(testId, 'wrapper')}
+      tweakStyles={tweakWithMessagesStyles}
+    >
+      <InputBase
+        {...inputProps}
+        ref={ref}
+        testId={testId}
+        tweakStyles={tweakStyles}
+        isInvalid={isInvalid}
+      />
+    </WithMessages>
+  );
+});