@true-engineering/true-react-common-ui-kit 4.0.0-alpha3 → 4.0.0-alpha30

package/src/components/FiltersPane/components/FiltersPaneSearch/FiltersPaneSearch.tsx

@@ -1,6 +1,13 @@
 import { ReactNode, useMemo, useRef, useState } from 'react';
 import clsx from 'clsx';
-import { addDataAttributes } from '../../../../helpers';
+import {
+  addDataAttributes,
+  addDataTestId,
+  getTestId,
+  isArrayLikeNotEmpty,
+  isArrayNotEmpty,
+  isNotEmpty,
+} from '@true-engineering/true-react-platform-helpers';
 import { useOnClickOutside, useTweakStyles } from '../../../../hooks';
 import { ICommonProps } from '../../../../types';
 import { Icon } from '../../../Icon';
@@ -89,20 +96,15 @@ export function FiltersPaneSearch<Value>({
     setIsOpen(false);
   };
 
-  const selectedFieldLabel = useMemo(
-    () => (field !== undefined && getValueView !== undefined ? getValueView(field) : undefined),
-    [field],
-  );
-
   return (
     <div
       className={clsx(classes.root, {
         [classes.focused]: isInputFocused,
         [classes.disabled]: isDisabled,
+        [classes.hasValue]: isArrayLikeNotEmpty(value),
       })}
       ref={refRoot}
-      data-testid={testId}
-      {...addDataAttributes(data)}
+      {...addDataAttributes(data, testId)}
     >
       <SearchInput
         value={value}
@@ -111,26 +113,21 @@ export function FiltersPaneSearch<Value>({
         tweakStyles={tweakSearchInputStyles}
         onFocus={() => setIsInputFocused(true)}
         onBlur={() => setIsInputFocused(false)}
-        testId={testId !== undefined ? `${testId}-input` : undefined}
+        testId={getTestId(testId, 'input')}
         maxLength={maxLength}
         isDisabled={isDisabled}
       />
 
       <div className={classes.selectWrapper}>
         {/* Select block */}
-        {fields.length > 0 && (
+        {isArrayNotEmpty(fields) && (
           <div
             className={classes.selectBlock}
             onClick={!isDisabled ? () => setIsOpen(!isOpen) : undefined}
-            data-testid={testId !== undefined ? `${testId}-select` : undefined}
+            {...addDataTestId(testId, 'select')}
           >
-            <div
-              className={clsx(
-                classes.selectLabel,
-                selectedFieldLabel !== undefined && classes.active,
-              )}
-            >
-              {selectedFieldLabel ?? translates.displayedFields}
+            <div className={clsx(classes.selectLabel, { [classes.active]: isNotEmpty(field) })}>
+              {isNotEmpty(field) ? getValueView?.(field) : translates.displayedFields}
             </div>
             <div className={clsx(classes.chevronIcon, isOpen && classes.open)}>
               <Icon type="chevron-down" />
@@ -152,7 +149,7 @@ export function FiltersPaneSearch<Value>({
               onChange={handleFieldsChange}
               isSearchEnabled={isSelectSearchEnabled}
               hasClearButton={hasClearSelectButton}
-              testId={testId !== undefined ? `${testId}-dropdown` : undefined}
+              testId={getTestId(testId, 'dropdown')}
             />
           </div>
         )}

package/src/components/FiltersPane/types.ts

@@ -1,4 +1,5 @@
 import { FC, ReactNode } from 'react';
+import { ITestIdProps } from '../../types';
 import { IDatePickerProps } from '../DatePicker';
 import { IMultiSelectListValues } from '../MultiSelectList';
 import type {
@@ -84,22 +85,40 @@ export type IDateRangeConfigItem<Value> = IConfigItemBasicBase<Value> & {
   dateFormat?: string;
 } & Omit<IFilterWithPeriodProps, 'value' | 'onChange' | 'setIsOpen'>;
 
-export type CustomComponent<Value> = FC<{
+export interface ICustomComponentProps<Value> extends ITestIdProps {
   value?: Value;
   onChange: (v?: Value) => void;
   onClose?: () => void;
   filter: ICustomConfigItem<Value>;
   localeKey?: IFilterLocaleKey;
   locale?: IPartialFilterLocale;
-}>;
+}
+
+export type CustomComponent<Value> = FC<ICustomComponentProps<Value>>;
+
+export type ICustomValue<V> = V extends Array<infer T> ? T : never;
+
+export interface ICustomRangeConfigItem<Value> extends IConfigItemBasicBase<Value> {
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  [key: string & {}]: any;
+  type: 'custom';
+  component: CustomComponent<Value>;
+  valueViewType?: 'range';
+}
 
-export interface ICustomConfigItem<Value> extends IConfigItemBasicBase<Value> {
-  [key: string]: any;
+export interface ICustomMultipleConfigItem<Value> extends IConfigItemBasicBase<Value> {
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  [key: string & {}]: any;
   type: 'custom';
   component: CustomComponent<Value>;
-  valueViewType?: 'range' | 'multiple';
+  valueViewType?: 'multiple';
+  getSelectedValue?: (v: ICustomValue<Value>) => ReactNode;
 }
 
+export type ICustomConfigItem<Value> =
+  | ICustomRangeConfigItem<Value>
+  | ICustomMultipleConfigItem<Value>;
+
 export type ConfigItem<Value> =
   | ISelectConfigItem<Value>
   | IMultiSelectConfigItem<Value>

package/src/components/Flag/Flag.stories.tsx

@@ -1,12 +1,13 @@
 import { countries } from 'country-flag-icons';
 import { ComponentStory } from '@storybook/react';
 import { Flag } from './Flag';
+import { customFlags } from './customFlags';
 
 export default {
   title: 'Data Display/Flag',
   component: Flag,
   argTypes: {
-    countryCode: { control: 'select', options: countries },
+    countryCode: { control: 'select', options: [...countries, ...Object.keys(customFlags)] },
   },
 };
 

package/src/components/Flag/Flag.styles.ts

@@ -2,6 +2,10 @@ import { colors, ITweakStyles, createThemedStyles } from '../../theme';
 
 export const useStyles = createThemedStyles('Flag', {
   root: {
+    display: 'flex',
+    width: '100%',
+    height: '100%',
+    boxSizing: 'border-box',
     // приходится хардкодить в компоненте, тк либа Flags выдает флаги с 2-3 пиксельным отступом снизу
     // если будет нужно, то можно вынести border на уровень пропсов
     border: [1, 'solid', colors.BORDER_MAIN],

package/src/components/Flag/Flag.tsx

@@ -3,6 +3,7 @@ import { hasFlag } from 'country-flag-icons';
 import Flags from 'country-flag-icons/react/3x2';
 import { ICommonProps } from '../../types';
 import { Icon } from '../Icon';
+import { customFlags } from './customFlags';
 import { useStyles, IFlagStyles } from './Flag.styles';
 
 export interface IFlagProps extends Pick<ICommonProps<IFlagStyles>, 'tweakStyles'> {
@@ -12,15 +13,28 @@ export interface IFlagProps extends Pick<ICommonProps<IFlagStyles>, 'tweakStyles
 
 export const Flag: FC<IFlagProps> = ({ countryCode = '', tweakStyles }) => {
   const classes = useStyles({ theme: tweakStyles });
-  const CC = countryCode.toUpperCase();
+  const countryFlagKey = countryCode.toUpperCase();
 
-  const TheFlag = hasFlag(CC)
-    ? Flags[CC as keyof typeof Flags]
-    : () => (
-        <div className={classes.noFlag}>
-          <Icon type="minus" />
-        </div>
-      );
+  const hasFlagInLibrary = hasFlag(countryFlagKey);
 
-  return <TheFlag className={classes.root} />;
+  if (hasFlagInLibrary) {
+    const FlagComponent = Flags[countryFlagKey as keyof typeof Flags];
+    return (
+      <div className={classes.root}>
+        <FlagComponent />
+      </div>
+    );
+  }
+
+  const CustomFlag = customFlags[countryFlagKey as keyof typeof customFlags];
+
+  if (CustomFlag !== undefined) {
+    return <div className={classes.root} dangerouslySetInnerHTML={{ __html: CustomFlag }} />;
+  }
+
+  return (
+    <div className={classes.noFlag}>
+      <Icon type="minus" />
+    </div>
+  );
 };

package/src/components/Flag/customFlags/AB.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 341.3"><path fill="#FFF" d="M0 0h512v341.3H0z"/><g fill="#6DA544"><path d="M0 0h512v48.8H0zM0 97.5h512v48.8H0zM0 195h512v48.8H0zM0 292.6h512v48.8H0z"/></g><path fill="#D80027" d="M0 0h256v146.3H0z"/><path fill="#FFF" d="m116.9 114.4-7.5-14.8V69.9L128 59l18.6 10.9v22.3l7.4-7.4 4.2 3-4.2 11.8-14.9 14.8z"/><circle fill="#FFF" cx="82" cy="82.8" r="5.4"/><circle fill="#FFF" cx="90.8" cy="61.7" r="5.4"/><circle fill="#FFF" cx="106.6" cy="46.2" r="5.4"/><circle fill="#FFF" cx="128" cy="40.8" r="5.4"/><circle fill="#FFF" cx="149.4" cy="46.2" r="5.4"/><circle fill="#FFF" cx="165.2" cy="61.7" r="5.4"/><circle fill="#FFF" cx="174" cy="82.8" r="5.4"/></svg>

package/src/components/Flag/customFlags/OS.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 450 300"><path fill="#FFF" d="M0 0h450v300H0z"/><path fill="red" d="M0 100h450v200H0z"/><path fill="#FFDF00" d="M0 200h450v100H0z"/></svg>

package/src/components/Flag/customFlags/augment.d.ts

@@ -0,0 +1 @@
+declare module '*.svg?raw';

package/src/components/Flag/customFlags/customFlags.ts

@@ -0,0 +1,13 @@
+import AB from './AB.svg?raw';
+import OS from './OS.svg?raw';
+
+export const customFlags = {
+  /**
+   * Абхазия
+   */
+  AB,
+  /**
+   * Южная осетия
+   */
+  OS,
+};

package/src/components/Flag/customFlags/index.ts

@@ -0,0 +1 @@
+export * from './customFlags';

package/src/components/FlexibleTable/FlexibleTable.tsx

@@ -1,15 +1,16 @@
 import { ReactNode, RefObject, useCallback, useEffect, useMemo, useRef } from 'react';
 import clsx from 'clsx';
 import {
-  addDataTestId,
+  addDataAttributes,
   applyAction,
+  getTestId,
   indexMap,
   isArrayNotEmpty,
   isEmpty,
   isNotEmpty,
+  isReactNodeNotEmpty,
 } from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../helpers';
-import { useMergedRefs, useTweakStyles } from '../../hooks';
+import { useIntersectionRef, useMergedRefs, useTweakStyles } from '../../hooks';
 import { ICommonProps } from '../../types';
 import { ThemedPreloader } from '../ThemedPreloader';
 import { FlexibleTableRow, IFlexibleTableRowProps } from './components';
@@ -34,10 +35,10 @@ export interface IFlexibleTableProps<
       | 'uniqueField'
       | 'rowAttributes'
       | 'isFirstColumnSticky'
-      | 'isExpandableRowComponentInitiallyOpen'
       | 'expandableRowComponent'
       | 'onRowClick'
       | 'onRowHover'
+      | 'rowRef'
     > {
   content: Row[];
   /** @default 'table' */
@@ -62,6 +63,8 @@ export interface IFlexibleTableProps<
   nothingFoundContent?: ReactNode;
   /** @default true */
   shouldRenderHeader?: boolean;
+  /** @default false */
+  isExpandableRowComponentInitiallyOpen?: boolean | ((row: Row, index: number) => boolean);
 }
 
 export function FlexibleTable<
@@ -79,7 +82,7 @@ export function FlexibleTable<
   isFirstColumnSticky = false,
   isHorizontallyScrollable = false,
   isRowFocusable = false,
-  infinityScrollConfig,
+  infinityScrollConfig: infinityScrollConfigDeprecated,
   renderMode = 'table',
   refForScroll,
   nothingFoundContent,
@@ -88,6 +91,7 @@ export function FlexibleTable<
   tweakStyles,
   shouldRenderHeader = true,
   onHeadClick,
+  isExpandableRowComponentInitiallyOpen: isRowInitiallyOpen,
   ...restProps
 }: IFlexibleTableProps<Row, HeaderContent, UniqueField>): JSX.Element {
   const classes = useStyles({ theme: tweakStyles });
@@ -98,18 +102,16 @@ export function FlexibleTable<
     currentComponentName: 'FlexibleTable',
   });
 
-  const observer = useRef<IntersectionObserver>();
   const scrollRef = useRef<HTMLDivElement>(null);
 
   const columns = useMemo(() => enabledColumns ?? Object.keys(config), [enabledColumns, config]);
 
-  const hasInfiniteScroll = isNotEmpty(infinityScrollConfig);
-
-  const tableRowProps: Omit<
-    IFlexibleTableRowProps<Row, HeaderContent, UniqueField>,
-    'item' | 'index'
-  > = {
+  const getTableRowProps = (
+    item: Row,
+    index: number,
+  ): IFlexibleTableRowProps<Row, HeaderContent, UniqueField> => ({
     ...restProps,
+    item,
     renderMode,
     config,
     columns,
@@ -118,7 +120,8 @@ export function FlexibleTable<
     isFirstColumnSticky,
     isFocusable: isRowFocusable,
     tweakStyles: tweakTableRowStyles,
-  };
+    isExpandableRowComponentInitiallyOpen: applyAction(isRowInitiallyOpen, item, index),
+  });
 
   const getDataScrollAttributeSetter = useCallback(
     (key: string, setter: (el: HTMLDivElement) => boolean) => (el?: HTMLDivElement) => {
@@ -143,12 +146,6 @@ export function FlexibleTable<
     [getDataScrollAttributeSetter],
   );
 
-  const shouldShowNothingFound =
-    !isArrayNotEmpty(content) &&
-    nothingFoundContent !== undefined &&
-    !infinityScrollConfig?.isLoading &&
-    (infinityScrollConfig?.isLastPage === undefined || infinityScrollConfig.isLastPage);
-
   const ref = useMergedRefs([
     refForScroll,
     scrollRef,
@@ -156,37 +153,25 @@ export function FlexibleTable<
     setIsScrolledAttribute,
   ]);
 
-  const initIntersectionObserver = useCallback(
-    (node: HTMLDivElement | null) => {
-      if (
-        !hasInfiniteScroll ||
-        infinityScrollConfig.isLoading ||
-        infinityScrollConfig.activePage >= infinityScrollConfig.totalPages
-      ) {
-        return;
-      }
-
-      if (observer.current) {
-        observer.current.disconnect();
-      }
-
-      observer.current = new IntersectionObserver((entries) => {
-        if (entries[0].isIntersecting) {
-          infinityScrollConfig.onInfinityScroll(infinityScrollConfig.activePage + 1);
-        }
-      });
+  const infinityScrollConfig = infinityScrollConfigDeprecated && {
+    isLoading: infinityScrollConfigDeprecated.isLoading,
+    onInfinityScroll: () =>
+      infinityScrollConfigDeprecated.onInfinityScroll(
+        (infinityScrollConfigDeprecated.activePage ?? 0) + 1,
+      ),
+    isEnabled:
+      infinityScrollConfigDeprecated.isEnabled ?? !infinityScrollConfigDeprecated.isLastPage,
+  };
+  const intersectionRef = useIntersectionRef({
+    isDisabled: !infinityScrollConfig?.isEnabled || infinityScrollConfig.isLoading,
+    onIntersection: infinityScrollConfig?.onInfinityScroll,
+  });
 
-      if (node) {
-        observer.current.observe(node);
-      }
-    },
-    [
-      hasInfiniteScroll,
-      infinityScrollConfig?.activePage,
-      infinityScrollConfig?.totalPages,
-      infinityScrollConfig?.onInfinityScroll,
-    ],
-  );
+  const shouldShowNothingFound =
+    isReactNodeNotEmpty(nothingFoundContent) &&
+    !isArrayNotEmpty(content) &&
+    !infinityScrollConfig?.isLoading &&
+    !infinityScrollConfig?.isEnabled;
 
   useEffect(() => {
     const scrollContainer = scrollRef.current;
@@ -217,11 +202,7 @@ export function FlexibleTable<
 
   return (
     <div ref={ref} className={clsx({ [classes.scroll]: isHorizontallyScrollable })}>
-      <Table.Root
-        className={classes.root}
-        {...addDataTestId(testId)}
-        {...addDataAttributes({ ...data, isLoading })}
-      >
+      <Table.Root className={classes.root} {...addDataAttributes({ ...data, isLoading }, testId)}>
         {shouldRenderHeader && (
           <Table.Head className={classes.head}>
             <Table.Row className={classes.headerRow}>
@@ -267,9 +248,7 @@ export function FlexibleTable<
         )}
         <Table.Body className={classes.body}>
           {isLoading ? (
-            indexMap(6, (i) => (
-              <FlexibleTableRow {...tableRowProps} key={i} item={{} as Row} index={i} />
-            ))
+            indexMap(6, (i) => <FlexibleTableRow {...getTableRowProps({} as Row, i)} key={i} />)
           ) : (
             <>
               {shouldShowNothingFound && (
@@ -282,19 +261,17 @@ export function FlexibleTable<
 
               {content.map((item, i) => (
                 <FlexibleTableRow
-                  {...tableRowProps}
+                  {...getTableRowProps(item, i)}
                   isActive={activeRowsSet.has(i)}
                   key={isNotEmpty(uniqueField) ? item[uniqueField] : i}
-                  item={item}
-                  index={i}
                 />
               ))}
 
-              {hasInfiniteScroll && !infinityScrollConfig.isLastPage && (
+              {infinityScrollConfig?.isEnabled && (
                 <Table.Row className={classes.loaderRow}>
                   <Table.Cell className={classes.loaderCell} colSpan={columns.length}>
-                    <div ref={initIntersectionObserver} className={classes.loader}>
-                      <ThemedPreloader type="dots" />
+                    <div ref={intersectionRef} className={classes.loader}>
+                      <ThemedPreloader type="dots" testId={getTestId(testId, 'loader')} />
                     </div>
                   </Table.Cell>
                 </Table.Row>

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

@@ -1,3 +1,4 @@
+import { ReactNode, useCallback } from 'react';
 import clsx from 'clsx';
 import { applyAction, isNotEmpty } from '@true-engineering/true-react-platform-helpers';
 import { addDataAttributes } from '../../../../helpers';
@@ -20,14 +21,11 @@ export interface IFlexibleTableCellProps<
 > extends Pick<ICommonProps<IFlexibleTableCellStyles>, 'tweakStyles'>,
     Pick<
       IValueComponentProps<Row, unknown>,
-      | 'isFocusedRow'
-      | 'isActiveRow'
-      | 'isNestedComponentExpanded'
-      | 'isRowNestedComponentExpanded'
-      | 'onSetNestedComponent'
+      'isFocusedRow' | 'isActiveRow' | 'isNestedComponentExpanded' | 'isRowNestedComponentExpanded'
     > {
   row: Row;
   columnName: keyof Row;
+  updateNestedComponent: (component: ReactNode, cellKey: keyof Row) => void;
   config: IFlexibleTableConfigType<Row, HeaderContent>;
   renderMode: IFlexibleTableRenderMode;
   isSecond?: boolean;
@@ -46,6 +44,7 @@ export function FlexibleTableCell<
   isSecond,
   isSticky: isOldSticky,
   isLoading,
+  updateNestedComponent,
   tweakStyles,
   ...valueComponentProps
 }: IFlexibleTableCellProps<Row, HeaderContent>): JSX.Element {
@@ -73,6 +72,10 @@ export function FlexibleTableCell<
 
   const cellComponentProps: IValueComponentProps<Row, Row[keyof Row]> = {
     ...valueComponentProps,
+    onSetNestedComponent: useCallback(
+      (node) => updateNestedComponent(node, columnName),
+      [columnName, updateNestedComponent],
+    ),
     value,
     row,
   };

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

@@ -1,9 +1,9 @@
-import { ReactNode, useState, memo, MouseEvent } from 'react';
+import { ReactNode, useState, memo, MouseEvent, RefCallback, useCallback } from 'react';
 import clsx from 'clsx';
-import { applyAction, isEmpty, isNotEmpty } from '@true-engineering/true-react-platform-helpers';
+import { isEmpty, isNotEmpty } from '@true-engineering/true-react-platform-helpers';
 import { addDataAttributes } from '../../../../helpers';
 import { useTweakStyles } from '../../../../hooks';
-import { ICommonProps, IDataAttributes } from '../../../../types';
+import { IDataAttributes, ITweakStylesProps } from '../../../../types';
 import { TableRenders } from '../../constants';
 import {
   ITableRow,
@@ -19,9 +19,8 @@ export interface IFlexibleTableRowProps<
   Row extends ITableRow,
   HeaderContent extends IHeaderContent<Row>,
   UniqueField extends keyof Row,
-> extends Pick<ICommonProps<IFlexibleTableRowStyles>, 'tweakStyles'> {
+> extends ITweakStylesProps<IFlexibleTableRowStyles> {
   item: Row;
-  index: number;
   uniqueField?: UniqueField;
   renderMode: IFlexibleTableRenderMode;
   /** @default false */
@@ -37,7 +36,8 @@ export interface IFlexibleTableRowProps<
   columns: Array<keyof Row & string>;
   rowAttributes?: Array<keyof Row>;
   /** @default false */
-  isExpandableRowComponentInitiallyOpen?: boolean | ((row: Row, index: number) => boolean);
+  isExpandableRowComponentInitiallyOpen?: boolean;
+  rowRef?: RefCallback<HTMLTableRowElement>;
   /** Возвращает React-элемент, который отрисуется под строкой при нажатии на неё  */
   expandableRowComponent?: (item: Row, isOpen: boolean, close: () => void) => ReactNode;
   onRowHover?: (id?: Row[UniqueField]) => void;
@@ -50,7 +50,6 @@ function FlexibleTableRowInner<
   UniqueField extends keyof Row,
 >({
   item,
-  index,
   config,
   columns,
   uniqueField,
@@ -61,6 +60,7 @@ function FlexibleTableRowInner<
   isLoading = false,
   rowAttributes,
   isExpandableRowComponentInitiallyOpen = false,
+  rowRef,
   tweakStyles,
   expandableRowComponent,
   onRowHover,
@@ -75,8 +75,8 @@ function FlexibleTableRowInner<
   });
 
   const [isFocused, setFocused] = useState(false);
-  const [nestedComponent, setNestedComponent] = useState<INestedComponent>(() => ({
-    isOpen: applyAction(isExpandableRowComponentInitiallyOpen, item, index),
+  const [nestedComponent, setNestedComponent] = useState<INestedComponent<keyof Row>>(() => ({
+    isOpen: isExpandableRowComponentInitiallyOpen,
   }));
 
   const isEditable = !isLoading && (isNotEmpty(onRowClick) || isNotEmpty(onRowHover));
@@ -111,13 +111,13 @@ function FlexibleTableRowInner<
     setNestedComponent({ isOpen: false });
   };
 
-  const updateNestedComponent = (component: ReactNode, cellKey: string) => {
+  const updateNestedComponent = useCallback((component: ReactNode, cellKey: keyof Row) => {
     if (isEmpty(component)) {
       closeNestedComponent();
     } else {
       setNestedComponent({ isOpen: true, component, cellKey });
     }
-  };
+  }, []);
 
   const handleRowClick = () => {
     if (isNotEmpty(uniqueField)) {
@@ -139,6 +139,7 @@ function FlexibleTableRowInner<
   return (
     <>
       <Table.Row
+        ref={rowRef}
         className={clsx(classes.root, {
           [classes.active]: isActive,
           [classes.editable]: isEditable,
@@ -173,7 +174,7 @@ function FlexibleTableRowInner<
             isRowNestedComponentExpanded={
               isNestedComponentExpanded && isEmpty(nestedComponentCellKey)
             }
-            onSetNestedComponent={(component) => updateNestedComponent(component, key)}
+            updateNestedComponent={updateNestedComponent}
           />
         ))}
       </Table.Row>

package/src/components/FlexibleTable/constants.ts

@@ -1,8 +1,11 @@
-import { IFlexibleTableRenderMode, IFlexibleTableRender } from './types';
+import { IFlexibleTableRenderElement, IFlexibleTableRenderMode } from './types';
 
 export const DEFAULT_DATE_FORMAT = 'dd.MM.yyyy';
 
-export const TableRenders: Record<IFlexibleTableRenderMode, IFlexibleTableRender> = {
+export const TableRenders = {
   table: { Root: 'table', Head: 'thead', Body: 'tbody', Row: 'tr', Header: 'th', Cell: 'td' },
   divs: { Root: 'div', Head: 'div', Body: 'div', Row: 'div', Header: 'div', Cell: 'div' },
-};
+} satisfies Record<
+  IFlexibleTableRenderMode,
+  Record<IFlexibleTableRenderElement, keyof JSX.IntrinsicElements>
+>;

package/src/components/FlexibleTable/types.ts

@@ -2,11 +2,7 @@ import { CSSProperties, MouseEvent, ReactNode } from 'react';
 import { IRenderNode } from '../../types';
 
 export type IFlexibleTableRenderMode = 'table' | 'divs';
-
-export type IFlexibleTableRender = Record<
-  'Root' | 'Head' | 'Body' | 'Row' | 'Header' | 'Cell',
-  keyof JSX.IntrinsicElements
->;
+export type IFlexibleTableRenderElement = 'Root' | 'Head' | 'Body' | 'Row' | 'Header' | 'Cell';
 
 // TODO: Заменить Record<string, any> на Record<string, unknown>
 export type ITableRow = Record<string, any>;
@@ -40,16 +36,16 @@ export interface IFlexibleTableRowConfig<
   title?: IRenderNode<ITitleComponentProps<HeaderContent[Key]>>;
   component?: IRenderNode<IValueComponentProps<Values, NonNullable<Values[Key]>>>;
   dateFormat?: string;
-  minWidth?: string | number;
-  width?: string | number;
-  maxWidth?: string | number;
+  minWidth?: CSSProperties['minWidth'];
+  width?: CSSProperties['width'];
+  maxWidth?: CSSProperties['maxWidth'];
   /** @default 'left' */
   titleAlign?: CSSProperties['textAlign'];
   cellAlign?: CSSProperties['textAlign'];
   cellVerticalAlign?: CSSProperties['verticalAlign'];
   position?: CSSProperties['position'];
-  right?: number;
-  left?: number;
+  right?: CSSProperties['right'];
+  left?: CSSProperties['left'];
   shouldRenderDataId?: boolean;
   /**
    * Проверка, нужно ли отрисовать component
@@ -68,15 +64,23 @@ export type IFlexibleTableConfigType<
 };
 
 export interface IInfinityScrollConfig {
-  activePage: number;
-  totalPages: number;
+  isEnabled?: boolean;
   isLoading: boolean;
-  isLastPage: boolean;
-  onInfinityScroll: (skip: number) => void;
+  onInfinityScroll: {
+    (_: never): void;
+    /** @deprecated use activePage directly */
+    (skip: number): void; // eslint-disable-line @typescript-eslint/unified-signatures
+  };
+  /** @deprecated use activePage in onInfinityScroll  */
+  activePage?: number;
+  /** @deprecated use isEnabled */
+  isLastPage?: boolean;
+  /** @deprecated use isEnabled */
+  totalPages?: number;
 }
 
-export interface INestedComponent {
+export interface INestedComponent<T extends PropertyKey = string> {
   isOpen: boolean;
   component?: ReactNode;
-  cellKey?: string;
+  cellKey?: T;
 }

package/src/components/IncrementInput/IncrementInput.stories.tsx

@@ -26,4 +26,6 @@ Default.args = {
   isDisabled: false,
   isRequired: false,
   isReadonly: false,
+  icon: 'question',
+  isClearable: true,
 };