@true-engineering/true-react-common-ui-kit 4.0.0-alpha2 → 4.0.0-alpha21

package/src/components/FiltersPane/components/FilterValueView/FilterValueView.tsx

@@ -9,14 +9,17 @@ import { IDateRangeConfigItem, IFilterWithDatesValue, IPeriod } from '../../type
 import type { IFilterWrapperProps } from '../FilterWrapper';
 import { IFilterValueViewStyles, useStyles } from './FilterValueView.styles';
 
-export function FilterValueView<Values, Key extends keyof Values>({
+export interface IFilterValueView<Values extends Record<string, unknown>, Key extends keyof Values>
+  extends Omit<IFilterWrapperProps<Values, Key>, 'filtersPaneRef' | 'tweakStyles' | 'onChange'>,
+    ICommonProps<IFilterValueViewStyles> {}
+
+export function FilterValueView<Values extends Record<string, unknown>, Key extends keyof Values>({
+  value,
+  filter,
   locale,
   localeKey,
-  filter,
-  value,
   tweakStyles,
-}: Omit<IFilterWrapperProps<Values, Key>, 'onChange' | 'filtersPaneRef' | 'tweakStyles'> &
-  ICommonProps<IFilterValueViewStyles>): JSX.Element {
+}: IFilterValueView<Values, Key>): JSX.Element {
   const classes = useStyles({ theme: tweakStyles });
 
   const translatesLocaleKey = filter.localeKey ?? localeKey;
@@ -29,7 +32,7 @@ export function FilterValueView<Values, Key extends keyof Values>({
     return <></>;
   }
 
-  if (filter.getSelectedValueView !== undefined) {
+  if (isNotEmpty(filter.getSelectedValueView)) {
     return <span className={classes.text}>{filter.getSelectedValueView(value)}</span>;
   }
 
@@ -94,7 +97,7 @@ export function FilterValueView<Values, Key extends keyof Values>({
     const intervalValueFrom = intervalValue[0];
     const intervalValueTo = intervalValue[1];
 
-    const intervals = [];
+    const intervals: string[] = [];
     if (intervalValueFrom !== undefined) {
       intervals.push(`${translates.from.toLowerCase()} ${String(intervalValueFrom)}`);
     }
@@ -105,19 +108,6 @@ export function FilterValueView<Values, Key extends keyof Values>({
     return <span className={classes.text}>{intervals.join(' ')}</span>;
   }
 
-  if (isMultiple) {
-    return (
-      <>
-        {Array.isArray(value) && value.length > 0 && (
-          <>
-            <span className={classes.text}>{displayValue(value[0])}</span>
-            <span className={classes.count}>{value.length > 1 && ` (+${value.length - 1})`}</span>
-          </>
-        )}
-      </>
-    );
-  }
-
   if (isDate) {
     const { from, to, periodType, label } = value as unknown as IPeriod;
     const hasFrom = from !== undefined && from !== null;
@@ -127,7 +117,7 @@ export function FilterValueView<Values, Key extends keyof Values>({
       return <span className={classes.text}>{displayValue(label)}</span>;
     }
 
-    const range = [];
+    const range: string[] = [];
     if (hasFrom) {
       if (!hasTo) {
         range.push(translates.from.toLowerCase());
@@ -146,12 +136,27 @@ export function FilterValueView<Values, Key extends keyof Values>({
     return <span className={classes.text}>{range.join(' ')}</span>;
   }
 
+  if (isMultiple) {
+    const convertValue = filter.getSelectedValue ?? displayValue;
+
+    return (
+      <>
+        {Array.isArray(value) && value.length > 0 && (
+          <>
+            <span className={classes.text}>{convertValue(value[0])}</span>
+            <span className={classes.count}>{value.length > 1 && ` (+${value.length - 1})`}</span>
+          </>
+        )}
+      </>
+    );
+  }
+
   if (isRange && Array.isArray(value)) {
     const rangeValue = value as unknown as number[];
     const rangeValueFrom = rangeValue[0];
     const rangeValueTo = rangeValue[1];
 
-    const range = [];
+    const range: string[] = [];
     if (rangeValueFrom !== undefined) {
       range.push(`${translates.from.toLowerCase()} ${String(rangeValueFrom)}`);
     }

package/src/components/FiltersPane/components/FilterWithDates/FilterWithDates.styles.ts

@@ -6,6 +6,7 @@ import { innerTextButtonStyles } from '../../FiltersPane.styles';
 
 export const useStyles = createThemedStyles('FilterWithDates', {
   root: {
+    width: 320,
     background: colors.CLASSIC_WHITE,
     position: 'relative',
     zIndex: 20,

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

@@ -1,7 +1,6 @@
 import { FC, useMemo, useRef, useState } from 'react';
 import { isAfter, isBefore } from 'date-fns';
-import enUS from 'date-fns/locale/en-US';
-import ru from 'date-fns/locale/ru';
+import { enUS, ru } from 'date-fns/locale';
 import { getTestId, isNotEmpty } from '@true-engineering/true-react-platform-helpers';
 import { addDataAttributes } from '../../../../helpers';
 import { useTweakStyles } from '../../../../hooks';
@@ -133,7 +132,7 @@ export const FilterWithDates: FC<IFilterWithDatesProps> = ({
         <div className={classes.containerItem}>
           <DatePicker
             selectedDate={value?.from}
-            maxDate={value?.to}
+            maxDate={value?.to ?? undefined}
             label={translates.from}
             months={translates.months}
             locale={dateLocale}
@@ -149,7 +148,7 @@ export const FilterWithDates: FC<IFilterWithDatesProps> = ({
             selectedDate={value?.to}
             label={translates.to}
             months={translates.months}
-            minDate={value?.from}
+            minDate={value?.from ?? undefined}
             locale={dateLocale}
             onChangeDate={handleChangeTo}
             tweakStyles={tweakEndDatePickerStyles}

package/src/components/FiltersPane/components/FilterWithPeriod/FilterWithPeriod.tsx

@@ -151,7 +151,7 @@ export const FilterWithPeriod: FC<IFilterWithPeriodProps> = ({
         </div>
       )}
       {isDatePickerShown && (
-        <div className={classes.picker} style={{ width: 320 }} ref={refDatePicker}>
+        <div className={classes.picker} ref={refDatePicker}>
           <FilterWithDates
             onStartBtnSubmit={() => {
               setIsDatePickerShown(false);

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

@@ -12,8 +12,10 @@ import { FilterValueView } from '../FilterValueView';
 import { isContentNotEmpty } from './helpers';
 import { useStyles, IFilterWrapperStyles } from './FilterWrapper.styles';
 
-export interface IFilterWrapperProps<Values, Key extends keyof Values>
-  extends ICommonProps<IFilterWrapperStyles> {
+export interface IFilterWrapperProps<
+  Values extends Record<string, unknown>,
+  Key extends keyof Values,
+> extends ICommonProps<IFilterWrapperStyles> {
   filter: ConfigItem<Values[Key]>;
   value?: Values[Key];
   isDisabled?: boolean;
@@ -22,7 +24,7 @@ export interface IFilterWrapperProps<Values, Key extends keyof Values>
   onChange: <V>(value: V) => void;
 }
 
-export function FilterWrapper<Values, Key extends keyof Values>({
+export function FilterWrapper<Values extends Record<string, unknown>, Key extends keyof Values>({
   filter,
   value,
   isDisabled,
@@ -105,8 +107,8 @@ export function FilterWrapper<Values, Key extends keyof Values>({
                 <FilterValueView
                   value={value}
                   filter={filter}
-                  localeKey={localeKey}
                   locale={locale}
+                  localeKey={localeKey}
                   testId={getTestId(testId, 'value')}
                   tweakStyles={tweakFilterValueViewStyles}
                 />
@@ -137,8 +139,8 @@ export function FilterWrapper<Values, Key extends keyof Values>({
         <Filter
           value={value}
           filter={filter}
-          localeKey={localeKey}
           locale={locale}
+          localeKey={localeKey}
           onClose={onClose}
           onChange={onChange}
           testId={testId}

package/src/components/FiltersPane/types.ts

@@ -84,22 +84,40 @@ export type IDateRangeConfigItem<Value> = IConfigItemBasicBase<Value> & {
   dateFormat?: string;
 } & Omit<IFilterWithPeriodProps, 'value' | 'onChange' | 'setIsOpen'>;
 
-export type CustomComponent<Value> = FC<{
+export interface ICustomComponentProps<Value> {
   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

@@ -34,10 +34,10 @@ export interface IFlexibleTableProps<
       | 'uniqueField'
       | 'rowAttributes'
       | 'isFirstColumnSticky'
-      | 'isExpandableRowComponentInitiallyOpen'
       | 'expandableRowComponent'
       | 'onRowClick'
       | 'onRowHover'
+      | 'rowRef'
     > {
   content: Row[];
   /** @default 'table' */
@@ -62,6 +62,8 @@ export interface IFlexibleTableProps<
   nothingFoundContent?: ReactNode;
   /** @default true */
   shouldRenderHeader?: boolean;
+  /** @default false */
+  isExpandableRowComponentInitiallyOpen?: boolean | ((row: Row, index: number) => boolean);
 }
 
 export function FlexibleTable<
@@ -88,6 +90,7 @@ export function FlexibleTable<
   tweakStyles,
   shouldRenderHeader = true,
   onHeadClick,
+  isExpandableRowComponentInitiallyOpen: isRowInitiallyOpen,
   ...restProps
 }: IFlexibleTableProps<Row, HeaderContent, UniqueField>): JSX.Element {
   const classes = useStyles({ theme: tweakStyles });
@@ -105,11 +108,12 @@ export function FlexibleTable<
 
   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 +122,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) => {
@@ -267,9 +272,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,11 +285,9 @@ 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}
                 />
               ))}
 

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
@@ -75,8 +71,8 @@ export interface IInfinityScrollConfig {
   onInfinityScroll: (skip: number) => void;
 }
 
-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,
 };