@true-engineering/true-react-common-ui-kit 3.27.0 → 3.28.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@true-engineering/true-react-common-ui-kit",
-  "version": "3.27.0",
+  "version": "3.28.1",
   "description": "True Engineering React UI Kit with theming support",
   "author": "True Engineering (https://trueengineering.ru)",
   "keywords": [
@@ -43,19 +43,19 @@
   },
   "dependencies": {
     "@floating-ui/react": "0.26.12",
-    "@true-engineering/true-react-platform-helpers": "0.2.2",
+    "@true-engineering/true-react-platform-helpers": "0.4.4",
     "clsx": "1.2.1",
     "country-flag-icons": "1.5.5",
     "date-fns": "2.29.3",
     "filesize": "10.1.1",
     "hex-to-rgba": "2.0.1",
-    "jss": "10.9.2",
+    "jss": "10.10.0",
     "lodash-es": "4.17.21",
     "react": "18.2.0",
     "react-datepicker": "4.25.0",
     "react-dom": "18.2.0",
     "react-input-mask": "3.0.0-alpha.2",
-    "react-jss": "10.9.2",
+    "react-jss": "10.10.0",
     "react-overlays": "5.2.1",
     "react-remove-scroll": "2.5.6",
     "react-transition-group": "4.4.5",

package/src/components/FlexibleTable/FlexibleTable.stories.tsx

@@ -1,6 +1,7 @@
+import { FC } from 'react';
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { FlexibleTable } from './FlexibleTable';
-import { IFlexibleTableConfigType, IValueComponent } from './types';
+import { IFlexibleTableConfigType, IValueComponentProps } from './types';
 
 export default {
   title: 'Table/FlexibleTable',
@@ -20,7 +21,7 @@ interface ITableContent {
   status: string;
 }
 
-const Temp: IValueComponent<ITableContent, string> = ({ value }) => <>{value}</>;
+const Temp: FC<IValueComponentProps<ITableContent, string>> = ({ value }) => <>{value}</>;
 
 const config: IFlexibleTableConfigType<ITableContent> = {
   contractCode: {

package/src/components/FlexibleTable/FlexibleTable.tsx

@@ -2,6 +2,7 @@ import { ReactNode, RefObject, useCallback, useEffect, useMemo, useRef } from 'r
 import clsx from 'clsx';
 import {
   addDataTestId,
+  applyAction,
   indexMap,
   isArrayNotEmpty,
   isEmpty,
@@ -18,13 +19,17 @@ import {
   IFlexibleTableConfigType,
   IInfinityScrollConfig,
   IFlexibleTableRenderMode,
+  IHeaderContent,
 } from './types';
 import { useStyles, IFlexibleTableStyles } from './FlexibleTable.styles';
 
-export interface IFlexibleTableProps<Row extends ITableRow>
-  extends ICommonProps<IFlexibleTableStyles>,
+export interface IFlexibleTableProps<
+  Row extends ITableRow,
+  HeaderContent extends IHeaderContent<Row>,
+  UniqueField extends keyof Row,
+> extends ICommonProps<IFlexibleTableStyles>,
     Pick<
-      IFlexibleTableRowProps<Row>,
+      IFlexibleTableRowProps<Row, HeaderContent, UniqueField>,
       | 'uniqueField'
       | 'activeRows'
       | 'rowAttributes'
@@ -37,9 +42,8 @@ export interface IFlexibleTableProps<Row extends ITableRow>
   content: Row[];
   /** @default 'table' */
   renderMode?: IFlexibleTableRenderMode;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  headerContent?: Partial<Record<keyof Row, any>>;
-  config: IFlexibleTableConfigType<Row>;
+  headerContent?: HeaderContent;
+  config: IFlexibleTableConfigType<Row, HeaderContent>;
   enabledColumns?: Array<keyof Row & string>;
   /** @default false */
   isLoading?: boolean;
@@ -51,7 +55,11 @@ export interface IFlexibleTableProps<Row extends ITableRow>
   nothingFoundContent?: ReactNode;
 }
 
-export function FlexibleTable<Row extends ITableRow>({
+export function FlexibleTable<
+  Row extends ITableRow,
+  HeaderContent extends IHeaderContent<Row> = IHeaderContent<Row>,
+  UniqueField extends keyof Row = keyof Row,
+>({
   content,
   headerContent,
   config,
@@ -67,7 +75,7 @@ export function FlexibleTable<Row extends ITableRow>({
   tweakStyles,
   onHeadClick,
   ...restProps
-}: IFlexibleTableProps<Row>): JSX.Element {
+}: IFlexibleTableProps<Row, HeaderContent, UniqueField>): JSX.Element {
   const classes = useStyles({ theme: tweakStyles });
 
   const tweakTableRowStyles = useTweakStyles({
@@ -84,7 +92,10 @@ export function FlexibleTable<Row extends ITableRow>({
   const hasInfiniteScroll = isNotEmpty(infinityScrollConfig);
   const { uniqueField, isFirstColumnSticky = false } = restProps;
 
-  const tableRowProps: Omit<IFlexibleTableRowProps<Row>, 'item' | 'index'> = {
+  const tableRowProps: Omit<
+    IFlexibleTableRowProps<Row, HeaderContent, UniqueField>,
+    'item' | 'index'
+  > = {
     ...restProps,
     renderMode,
     config,
@@ -202,7 +213,6 @@ export function FlexibleTable<Row extends ITableRow>({
           <TableRow className={classes.headerRow}>
             {columns.map((key, i) => {
               const itemConfig = config?.[key];
-              const TitleComponent = itemConfig?.titleComponent;
 
               return (
                 <TableHeader
@@ -220,11 +230,9 @@ export function FlexibleTable<Row extends ITableRow>({
                   onClick={isNotEmpty(onHeadClick) ? () => onHeadClick(key) : undefined}
                   {...addDataAttributes({ id: itemConfig?.shouldRenderDataId ? key : undefined })}
                 >
-                  {isNotEmpty(TitleComponent) ? (
-                    <TitleComponent value={headerContent?.[key]} />
-                  ) : (
-                    itemConfig?.title ?? ''
-                  )}
+                  {applyAction(itemConfig?.title ?? '', {
+                    value: headerContent?.[key] as HeaderContent[string],
+                  })}
                 </TableHeader>
               );
             })}

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

@@ -1,21 +1,24 @@
 import clsx from 'clsx';
-import { isNotEmpty } from '@true-engineering/true-react-platform-helpers';
+import { applyAction, isNotEmpty } from '@true-engineering/true-react-platform-helpers';
 import { addDataAttributes } from '../../../../helpers';
 import { ICommonProps } from '../../../../types';
 import { Skeleton } from '../../../Skeleton';
 import { formatCellContent } from '../../helpers';
 import {
   ITableRow,
-  IValueComponent,
+  IValueComponentProps,
   IFlexibleTableConfigType,
   IFlexibleTableRenderMode,
+  IHeaderContent,
 } from '../../types';
 import { useStyles, IFlexibleTableCellStyles } from './FlexibleTableCell.styles';
 
-export interface IFlexibleTableCellProps<Row extends ITableRow>
-  extends Pick<ICommonProps<IFlexibleTableCellStyles>, 'tweakStyles'>,
+export interface IFlexibleTableCellProps<
+  Row extends ITableRow,
+  HeaderContent extends IHeaderContent<Row>,
+> extends Pick<ICommonProps<IFlexibleTableCellStyles>, 'tweakStyles'>,
     Pick<
-      Parameters<IValueComponent<Row, unknown>>[0],
+      IValueComponentProps<Row, unknown>,
       | 'isFocusedRow'
       | 'isNestedComponentExpanded'
       | 'isRowNestedComponentExpanded'
@@ -23,14 +26,17 @@ export interface IFlexibleTableCellProps<Row extends ITableRow>
     > {
   row: Row;
   columnName: keyof Row;
-  config: IFlexibleTableConfigType<Row>;
+  config: IFlexibleTableConfigType<Row, HeaderContent>;
   renderMode: IFlexibleTableRenderMode;
   isSecond?: boolean;
   isSticky?: boolean;
   isLoading?: boolean;
 }
 
-export function FlexibleTableCell<Row extends ITableRow>({
+export function FlexibleTableCell<
+  Row extends ITableRow,
+  HeaderContent extends IHeaderContent<Row>,
+>({
   row,
   columnName,
   config,
@@ -40,14 +46,21 @@ export function FlexibleTableCell<Row extends ITableRow>({
   isLoading,
   tweakStyles,
   ...valueComponentProps
-}: IFlexibleTableCellProps<Row>): JSX.Element {
+}: IFlexibleTableCellProps<Row, HeaderContent>): JSX.Element {
   const classes = useStyles({ theme: tweakStyles });
 
-  const { component, left, right, position, cellAlign, cellVerticalAlign, shouldRenderDataId } =
-    config[columnName] ?? {};
-
   const value = row[columnName];
 
+  const {
+    component = formatCellContent(value, config[columnName]),
+    left,
+    right,
+    position,
+    cellAlign,
+    cellVerticalAlign,
+    shouldRenderDataId,
+  } = config[columnName] ?? {};
+
   const TableCell = renderMode === 'divs' ? 'div' : 'td';
 
   return (
@@ -71,14 +84,7 @@ export function FlexibleTableCell<Row extends ITableRow>({
           <Skeleton />
         </div>
       ) : (
-        isNotEmpty(value) && (
-          <>
-            {/* TODO: Рендерить как настоящий компонент */}
-            {isNotEmpty(component)
-              ? component({ ...valueComponentProps, value, row })
-              : formatCellContent(value, config[columnName])}
-          </>
-        )
+        isNotEmpty(value) && applyAction(component, { ...valueComponentProps, value, row })
       )}
     </TableCell>
   );

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

@@ -9,15 +9,19 @@ import {
   IFlexibleTableConfigType,
   IFlexibleTableRenderMode,
   INestedComponent,
+  IHeaderContent,
 } from '../../types';
 import { FlexibleTableCell } from '../FlexibleTableCell';
 import { useStyles, IFlexibleTableRowStyles } from './FlexibleTableRow.styles';
 
-export interface IFlexibleTableRowProps<Row extends ITableRow>
-  extends Pick<ICommonProps<IFlexibleTableRowStyles>, 'tweakStyles'> {
+export interface IFlexibleTableRowProps<
+  Row extends ITableRow,
+  HeaderContent extends IHeaderContent<Row>,
+  UniqueField extends keyof Row,
+> extends Pick<ICommonProps<IFlexibleTableRowStyles>, 'tweakStyles'> {
   item: Row;
   index: number;
-  uniqueField?: keyof Row;
+  uniqueField?: UniqueField;
   renderMode: IFlexibleTableRenderMode;
   /** Индексы строк, на которые навешивается класс `active` */
   activeRows?: number[];
@@ -25,19 +29,22 @@ export interface IFlexibleTableRowProps<Row extends ITableRow>
   isFirstColumnSticky?: boolean;
   /** @default false */
   isLoading?: boolean;
-  config: IFlexibleTableConfigType<Row>;
+  config: IFlexibleTableConfigType<Row, HeaderContent>;
   columns: Array<keyof Row & string>;
   rowAttributes?: Array<keyof Row>;
   /** @default false */
   isExpandableRowComponentInitiallyOpen?: boolean | ((row: Row, index: number) => boolean);
   /** Возвращает React-элемент, который отрисуется под строкой при нажатии на неё  */
   expandableRowComponent?: (item: Row, isOpen: boolean, close: () => void) => ReactNode;
-  // TODO: Заменить string на Generic Values[uniqueField]
-  onRowHover?: (id?: string) => void;
-  onRowClick?: (id: string) => void;
+  onRowHover?: (id?: Row[UniqueField]) => void;
+  onRowClick?: (id: Row[UniqueField]) => void;
 }
 
-function FlexibleTableRowInner<Row extends ITableRow>({
+function FlexibleTableRowInner<
+  Row extends ITableRow,
+  HeaderContent extends IHeaderContent<Row>,
+  UniqueField extends keyof Row,
+>({
   item,
   index,
   config,
@@ -53,7 +60,7 @@ function FlexibleTableRowInner<Row extends ITableRow>({
   expandableRowComponent,
   onRowHover,
   onRowClick,
-}: IFlexibleTableRowProps<Row>): JSX.Element {
+}: IFlexibleTableRowProps<Row, HeaderContent, UniqueField>): JSX.Element {
   const classes = useStyles({ theme: tweakStyles });
 
   const tweakTableCellStyles = useTweakStyles({

package/src/components/FlexibleTable/helpers.ts

@@ -1,13 +1,16 @@
 import { format } from 'date-fns';
 import { isNotEmpty } from '@true-engineering/true-react-platform-helpers';
 import { DEFAULT_DATE_FORMAT } from './constants';
-import { IFlexibleTableConfigType } from './types';
+import { IFlexibleTableConfigType, IHeaderContent, ITableRow } from './types';
 
 export const hasHorizontalScrollBar = (el: HTMLElement | null | undefined): boolean =>
   isNotEmpty(el) && el.scrollWidth !== el.clientWidth;
 
-export const formatCellContent = <Values>(
+export const formatCellContent = <
+  Values extends ITableRow,
+  HeaderContent extends IHeaderContent<Values>,
+>(
   value: unknown,
-  config?: IFlexibleTableConfigType<Values>[keyof Values],
+  config?: IFlexibleTableConfigType<Values, HeaderContent>[keyof Values],
 ): string =>
   value instanceof Date ? format(value, config?.dateFormat ?? DEFAULT_DATE_FORMAT) : String(value);

package/src/components/FlexibleTable/types.ts

@@ -1,28 +1,33 @@
-import { CSSProperties, FC, ReactNode } from 'react';
+import { CSSProperties, ReactNode } from 'react';
+import { IRenderNode } from '../../types';
 
 export type IFlexibleTableRenderMode = 'table' | 'divs';
 
 // TODO: Заменить Record<string, any> на Record<string, unknown>
 export type ITableRow = Record<string, any>;
 
-export type ITitleComponent<Value> = FC<{
+export type IHeaderContent<T extends ITableRow> = Partial<Record<keyof T, unknown>>;
+
+export interface ITitleComponentProps<Value> {
   value?: Value;
-}>;
+}
 
-export type IValueComponent<Values, Value> = (props: {
+export interface IValueComponentProps<Values, Value> {
   value: Value;
   row: Values;
   isFocusedRow?: boolean;
   isNestedComponentExpanded: boolean;
   isRowNestedComponentExpanded: boolean;
   onSetNestedComponent: (component?: ReactNode) => void;
-}) => JSX.Element | ReactNode;
+}
 
-export type IFlexibleTableConfigType<Values> = {
+export type IFlexibleTableConfigType<
+  Values extends ITableRow,
+  HeaderContent extends IHeaderContent<Values> = IHeaderContent<Values>,
+> = {
   [Key in keyof Values]?: {
-    title?: ReactNode;
-    titleComponent?: ITitleComponent<unknown>;
-    component?: IValueComponent<Values, NonNullable<Values[Key]>>;
+    title?: IRenderNode<ITitleComponentProps<HeaderContent[Key]>>;
+    component?: IRenderNode<IValueComponentProps<Values, NonNullable<Values[Key]>>>;
     dateFormat?: string;
     minWidth?: string | number;
     width?: string | number;

package/src/components/List/List.styles.ts

@@ -11,6 +11,7 @@ export const useStyles = createThemedStyles('List', {
   },
 
   nestedItems: {
+    marginTop: -8,
     paddingLeft: 4,
   },
 });

package/src/components/List/List.tsx

@@ -3,6 +3,7 @@ import {
   addDataTestId,
   getTestId,
   isArrayNotEmpty,
+  isNotEmpty,
 } from '@true-engineering/true-react-platform-helpers';
 import { addDataAttributes } from '../../helpers';
 import { ICommonProps } from '../../types';
@@ -18,9 +19,14 @@ export interface IListProps extends ICommonProps<IListStyles> {
 export const List: FC<IListProps> = ({ items, testId, data, tweakStyles, onClick }) => {
   const classes = useStyles({ theme: tweakStyles });
 
-  const handleItemClick = (event: MouseEvent | KeyboardEvent, item: IListItem) => {
-    item.onClick(event);
-    onClick?.(event);
+  const handleItemClick = (
+    event: MouseEvent | KeyboardEvent,
+    { onClick: itemOnClick }: IListItem,
+  ) => {
+    if (isNotEmpty(itemOnClick)) {
+      itemOnClick(event);
+      onClick?.(event);
+    }
   };
 
   return (
@@ -44,7 +50,7 @@ export const List: FC<IListProps> = ({ items, testId, data, tweakStyles, onClick
                 trigger={({ isActive }) => <ListItem {...itemProps} isFocused={isActive} />}
               >
                 <div className={classes.nestedItems}>
-                  <List items={item.nestedItems} />
+                  <List items={item.nestedItems} onClick={onClick} />
                 </div>
               </WithPopup>
             ) : (

package/src/components/List/components/ListItem/ListItem.tsx

@@ -21,7 +21,7 @@ export interface IListItemProps extends ICommonProps<IListItemStyles> {
   shouldDrawSpacerAbove?: boolean;
   shouldDrawSpacerBelow?: boolean;
   withIconGap?: boolean;
-  onClick: (event: MouseEvent | KeyboardEvent) => void;
+  onClick?: (event: MouseEvent | KeyboardEvent) => void;
 }
 
 export const ListItem: FC<IListItemProps> = ({

package/src/helpers/misc.ts

@@ -8,6 +8,7 @@ import { IDataAttributes } from '../types';
 
 export const rgba = hexToRgba;
 
+/** @deprecated Используйте `toKebabCase` из `true-react-platform-helpers` */
 export const transformToKebab = (string: string): string => {
   let result = '';
   string.split('').forEach((char) => {
@@ -148,6 +149,7 @@ export const getNumberLength = (n?: number): number =>
 export const trimStringToMaxLength = (val: string, maxLength: number): string =>
   val.length > maxLength ? val.slice(0, maxLength) : val;
 
+/** @deprecated Используйте `addDataAttributes` из `true-react-platform-helpers` */
 export const addDataAttributes = (data: IDataAttributes = {}): IDataAttributes =>
   Object.fromEntries(
     Object.entries(data).map(([key, value]) =>

package/src/hooks/use-tweak-styles.ts

@@ -3,7 +3,7 @@ import { isEmpty, isNotEmpty, mergeStyles } from '@true-engineering/true-react-p
 import { areStylesThemed, getTheme, IComponentName, themedStyles } from '../theme';
 
 // TODO: Можно усилить типы
-export const useTweakStyles = <StyleSheet, ClassName extends keyof StyleSheet>({
+export const useTweakStyles = <StyleSheet, ClassName extends keyof StyleSheet & `tweak${string}`>({
   innerStyles,
   tweakStyles: currentComponentTweakStyles,
   className,