@true-engineering/true-react-common-ui-kit 3.27.1 → 3.28.2

package/README.md

@@ -11,6 +11,31 @@
 
 # Release Notes
 
+## 3.28.2
+
+### Changes
+
+- **List**: `shouldDrawSpacerBelow` и `shouldDrawSpacerAbove` теперь не рендерятся первыми и последними в списке
+
+## 3.28.1
+
+### Changes
+
+- **ListItem**: `onClick` стал опциональным. При отсутствии - базовый onClick List вызван не будет
+
+## 3.28.0
+
+### Changes
+
+- Поднята версия `true-react-platform-helpers` (требуется `node:20`)
+- Подняты версии `jss` и `react-jss` (можно избавляться от `resolutions`)
+- **transformToKebab** и **addDataAttributes**: помечены как `deprecated`
+- **useTweakStyles**: усилен тип ClassName
+- **FlexibleTable**: `IValueComponent` и `ITitleComponent` заменены на `IValueComponentProps` и `ITitleComponentProps`
+- **FlexibleTable**: `title` и `component` переписаны на `IRenderNode`, `titleComponent` удален
+- **FlexibleTable**: добавлена типизация для `uniqueField` и соответствующих `onRowClick` и `onRowHover`
+- **FlexibleTable**: добавлена типизация для `headerContent` и ~~`titleComponent`~~ `title`
+
 ## 3.27.1
 
 ### Changes

package/dist/components/Description/Description.styles.d.ts

@@ -1,3 +1,3 @@
 import { ITweakStyles } from '../../theme';
-export declare const useStyles: import("../../theme").IUseStyles<"root" | "link" | "button", unknown>;
+export declare const useStyles: import("../../theme").IUseStyles<"link" | "root" | "button", unknown>;
 export type IDescriptionStyles = ITweakStyles<typeof useStyles>;

package/dist/components/FlexibleTable/FlexibleTable.d.ts

@@ -1,14 +1,14 @@
 import { ReactNode, RefObject } from 'react';
 import { ICommonProps } from '../../types';
 import { IFlexibleTableRowProps } from './components';
-import { ITableRow, IFlexibleTableConfigType, IInfinityScrollConfig, IFlexibleTableRenderMode } from './types';
+import { ITableRow, IFlexibleTableConfigType, IInfinityScrollConfig, IFlexibleTableRenderMode, IHeaderContent } from './types';
 import { IFlexibleTableStyles } from './FlexibleTable.styles';
-export interface IFlexibleTableProps<Row extends ITableRow> extends ICommonProps<IFlexibleTableStyles>, Pick<IFlexibleTableRowProps<Row>, 'uniqueField' | 'activeRows' | 'rowAttributes' | 'isFirstColumnSticky' | 'isExpandableRowComponentInitiallyOpen' | 'expandableRowComponent' | 'onRowClick' | 'onRowHover'> {
+export interface IFlexibleTableProps<Row extends ITableRow, HeaderContent extends IHeaderContent<Row>, UniqueField extends keyof Row> extends ICommonProps<IFlexibleTableStyles>, Pick<IFlexibleTableRowProps<Row, HeaderContent, UniqueField>, 'uniqueField' | 'activeRows' | 'rowAttributes' | 'isFirstColumnSticky' | 'isExpandableRowComponentInitiallyOpen' | 'expandableRowComponent' | 'onRowClick' | 'onRowHover'> {
     content: Row[];
     /** @default 'table' */
     renderMode?: IFlexibleTableRenderMode;
-    headerContent?: Partial<Record<keyof Row, any>>;
-    config: IFlexibleTableConfigType<Row>;
+    headerContent?: HeaderContent;
+    config: IFlexibleTableConfigType<Row, HeaderContent>;
     enabledColumns?: Array<keyof Row & string>;
     /** @default false */
     isLoading?: boolean;
@@ -19,4 +19,4 @@ export interface IFlexibleTableProps<Row extends ITableRow> extends ICommonProps
     refForScroll?: RefObject<HTMLDivElement>;
     nothingFoundContent?: ReactNode;
 }
-export declare function FlexibleTable<Row extends ITableRow>({ content, headerContent, config, enabledColumns, isLoading, isHorizontallyScrollable, infinityScrollConfig, renderMode, refForScroll, nothingFoundContent, data, testId, tweakStyles, onHeadClick, ...restProps }: IFlexibleTableProps<Row>): JSX.Element;
+export declare function FlexibleTable<Row extends ITableRow, HeaderContent extends IHeaderContent<Row> = IHeaderContent<Row>, UniqueField extends keyof Row = keyof Row>({ content, headerContent, config, enabledColumns, isLoading, isHorizontallyScrollable, infinityScrollConfig, renderMode, refForScroll, nothingFoundContent, data, testId, tweakStyles, onHeadClick, ...restProps }: IFlexibleTableProps<Row, HeaderContent, UniqueField>): JSX.Element;

package/dist/components/FlexibleTable/FlexibleTable.stories.d.ts

@@ -1,4 +1,4 @@
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0fc72a6d").R, import("./FlexibleTable").IFlexibleTableProps<import("./types").ITableRow>>;
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0fc72a6d").R, import("./FlexibleTable").IFlexibleTableProps<import("./types").ITableRow, Partial<Record<string, unknown>>, string>>;
 export default _default;
 interface ITableContent {
     contractCode: string;
@@ -12,4 +12,4 @@ interface ITableContent {
     currency: string;
     status: string;
 }
-export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, import("./FlexibleTable").IFlexibleTableProps<ITableContent>>;
+export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, import("./FlexibleTable").IFlexibleTableProps<ITableContent, Partial<Record<keyof ITableContent, unknown>>, keyof ITableContent>>;

package/dist/components/FlexibleTable/components/FlexibleTableCell/FlexibleTableCell.d.ts

@@ -1,14 +1,14 @@
 /// <reference types="react" />
 import { ICommonProps } from '../../../../types';
-import { ITableRow, IValueComponent, IFlexibleTableConfigType, IFlexibleTableRenderMode } from '../../types';
+import { ITableRow, IValueComponentProps, IFlexibleTableConfigType, IFlexibleTableRenderMode, IHeaderContent } from '../../types';
 import { IFlexibleTableCellStyles } from './FlexibleTableCell.styles';
-export interface IFlexibleTableCellProps<Row extends ITableRow> extends Pick<ICommonProps<IFlexibleTableCellStyles>, 'tweakStyles'>, Pick<Parameters<IValueComponent<Row, unknown>>[0], 'isFocusedRow' | 'isNestedComponentExpanded' | 'isRowNestedComponentExpanded' | 'onSetNestedComponent'> {
+export interface IFlexibleTableCellProps<Row extends ITableRow, HeaderContent extends IHeaderContent<Row>> extends Pick<ICommonProps<IFlexibleTableCellStyles>, 'tweakStyles'>, Pick<IValueComponentProps<Row, unknown>, 'isFocusedRow' | 'isNestedComponentExpanded' | 'isRowNestedComponentExpanded' | 'onSetNestedComponent'> {
     row: Row;
     columnName: keyof Row;
-    config: IFlexibleTableConfigType<Row>;
+    config: IFlexibleTableConfigType<Row, HeaderContent>;
     renderMode: IFlexibleTableRenderMode;
     isSecond?: boolean;
     isSticky?: boolean;
     isLoading?: boolean;
 }
-export declare function FlexibleTableCell<Row extends ITableRow>({ row, columnName, config, renderMode, isSecond, isSticky, isLoading, tweakStyles, ...valueComponentProps }: IFlexibleTableCellProps<Row>): JSX.Element;
+export declare function FlexibleTableCell<Row extends ITableRow, HeaderContent extends IHeaderContent<Row>>({ row, columnName, config, renderMode, isSecond, isSticky, isLoading, tweakStyles, ...valueComponentProps }: IFlexibleTableCellProps<Row, HeaderContent>): JSX.Element;

package/dist/components/FlexibleTable/components/FlexibleTableRow/FlexibleTableRow.d.ts

@@ -1,11 +1,11 @@
 import { ReactNode } from 'react';
 import { ICommonProps } from '../../../../types';
-import { ITableRow, IFlexibleTableConfigType, IFlexibleTableRenderMode } from '../../types';
+import { ITableRow, IFlexibleTableConfigType, IFlexibleTableRenderMode, IHeaderContent } from '../../types';
 import { 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[];
@@ -13,16 +13,16 @@ export interface IFlexibleTableRowProps<Row extends ITableRow> extends Pick<ICom
     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;
-    onRowHover?: (id?: string) => void;
-    onRowClick?: (id: string) => void;
+    onRowHover?: (id?: Row[UniqueField]) => void;
+    onRowClick?: (id: Row[UniqueField]) => void;
 }
-declare function FlexibleTableRowInner<Row extends ITableRow>({ item, index, config, columns, uniqueField, renderMode, activeRows, isFirstColumnSticky, isLoading, rowAttributes, isExpandableRowComponentInitiallyOpen, tweakStyles, expandableRowComponent, onRowHover, onRowClick, }: IFlexibleTableRowProps<Row>): JSX.Element;
+declare function FlexibleTableRowInner<Row extends ITableRow, HeaderContent extends IHeaderContent<Row>, UniqueField extends keyof Row>({ item, index, config, columns, uniqueField, renderMode, activeRows, isFirstColumnSticky, isLoading, rowAttributes, isExpandableRowComponentInitiallyOpen, tweakStyles, expandableRowComponent, onRowHover, onRowClick, }: IFlexibleTableRowProps<Row, HeaderContent, UniqueField>): JSX.Element;
 export declare const FlexibleTableRow: typeof FlexibleTableRowInner;
 export {};

package/dist/components/FlexibleTable/helpers.d.ts

@@ -1,3 +1,3 @@
-import { IFlexibleTableConfigType } from './types';
+import { IFlexibleTableConfigType, ITableRow } from './types';
 export declare const hasHorizontalScrollBar: (el: HTMLElement | null | undefined) => boolean;
-export declare const formatCellContent: <Values>(value: unknown, config?: IFlexibleTableConfigType<Values>[keyof Values] | undefined) => string;
+export declare const formatCellContent: <Values extends ITableRow, HeaderContent extends Partial<Record<keyof Values, unknown>>>(value: unknown, config?: IFlexibleTableConfigType<Values, HeaderContent>[keyof Values] | undefined) => string;

package/dist/components/FlexibleTable/types.d.ts

@@ -1,22 +1,23 @@
-import { CSSProperties, FC, ReactNode } from 'react';
+import { CSSProperties, ReactNode } from 'react';
+import { IRenderNode } from '../../types';
 export type IFlexibleTableRenderMode = 'table' | 'divs';
 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/dist/components/List/components/ListItem/ListItem.d.ts

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

package/dist/components/ScrollIntoViewIfNeeded/ScrollIntoViewIfNeeded.d.ts

@@ -161,7 +161,7 @@ export declare class ScrollIntoViewIfNeeded extends PureComponent<IScrollIntoVie
         results?: number | undefined;
         security?: string | undefined;
         unselectable?: "on" | "off" | undefined;
-        inputMode?: "none" | "search" | "text" | "email" | "tel" | "url" | "numeric" | "decimal" | undefined;
+        inputMode?: "search" | "none" | "text" | "email" | "tel" | "url" | "numeric" | "decimal" | undefined;
         is?: string | undefined;
         "aria-activedescendant"?: string | undefined;
         "aria-atomic"?: (boolean | "false" | "true") | undefined;
@@ -180,7 +180,7 @@ export declare class ScrollIntoViewIfNeeded extends PureComponent<IScrollIntoVie
         "aria-description"?: string | undefined;
         "aria-details"?: string | undefined;
         "aria-disabled"?: (boolean | "false" | "true") | undefined;
-        "aria-dropeffect"?: "copy" | "none" | "link" | "move" | "popup" | "execute" | undefined;
+        "aria-dropeffect"?: "copy" | "link" | "none" | "move" | "popup" | "execute" | undefined;
         "aria-errormessage"?: string | undefined;
         "aria-expanded"?: (boolean | "false" | "true") | undefined;
         "aria-flowto"?: string | undefined;

package/dist/components/TextButton/TextButton.styles.d.ts

@@ -1,6 +1,6 @@
 import { ITweakStyles } from '../../theme';
 import { IThemedPreloaderStyles } from '../ThemedPreloader';
-export declare const useStyles: import("../../theme").IUseStyles<"content" | "root" | "bold" | "circle" | "icon" | "active" | "disabled" | "primary" | "secondary" | "custom" | "l" | "xl" | "loader" | "loading" | "iconContainer" | "reverseContent", unknown>;
+export declare const useStyles: import("../../theme").IUseStyles<"content" | "bold" | "root" | "circle" | "icon" | "active" | "disabled" | "primary" | "secondary" | "custom" | "l" | "xl" | "loader" | "loading" | "iconContainer" | "reverseContent", unknown>;
 export declare const preloaderStyles: IThemedPreloaderStyles;
 export type ITextButtonStyles = ITweakStyles<typeof useStyles, {
     tweakPreloader: IThemedPreloaderStyles;

package/dist/helpers/misc.d.ts

@@ -1,6 +1,7 @@
 import hexToRgba from 'hex-to-rgba';
 import { IDataAttributes } from '../types';
 export declare const rgba: typeof hexToRgba;
+/** @deprecated Используйте `toKebabCase` из `true-react-platform-helpers` */
 export declare const transformToKebab: (string: string) => string;
 export declare const hasExactParent: (element: Element, parent: Element) => boolean;
 export declare const getParentNode: (element: Element | ShadowRoot | Document) => Element;
@@ -16,4 +17,5 @@ export declare const setCaretPosition: (elem: HTMLInputElement, caretPos: number
 export declare const isSpaceChar: (char?: string) => boolean;
 export declare const getNumberLength: (n?: number) => number;
 export declare const trimStringToMaxLength: (val: string, maxLength: number) => string;
+/** @deprecated Используйте `addDataAttributes` из `true-react-platform-helpers` */
 export declare const addDataAttributes: (data?: IDataAttributes) => IDataAttributes;

package/dist/hooks/use-tweak-styles.d.ts

@@ -1,5 +1,5 @@
 import { IComponentName } from '../theme';
-export declare const useTweakStyles: <StyleSheet_1, ClassName extends keyof StyleSheet_1>({ innerStyles, tweakStyles: currentComponentTweakStyles, className, currentComponentName, }: {
+export declare const useTweakStyles: <StyleSheet_1, ClassName extends keyof StyleSheet_1 & `tweak${string}`>({ innerStyles, tweakStyles: currentComponentTweakStyles, className, currentComponentName, }: {
     /**
      * Это tweakStyles, определенные в родительском компоненте
      * (например, стили для Input, определенные в стилях компонента Select)

package/dist/true-react-common-ui-kit.js

@@ -8267,9 +8267,12 @@ var List = function(param) {
   var classes = useStyles$S({
     theme: tweakStyles
   });
-  var handleItemClick = function(event, item) {
-    item.onClick(event);
-    onClick === null || onClick === void 0 ? void 0 : onClick(event);
+  var handleItemClick = function(event, param2) {
+    var itemOnClick = param2.onClick;
+    if (isNotEmpty(itemOnClick)) {
+      itemOnClick(event);
+      onClick === null || onClick === void 0 ? void 0 : onClick(event);
+    }
   };
   return /* @__PURE__ */ jsx("div", _object_spread_props$N(_object_spread$W({
     className: classes.root
@@ -8278,6 +8281,8 @@ var List = function(param) {
       var itemProps = _object_spread_props$N(_object_spread$W({
         testId: getTestId(item.testId, "item-".concat(i))
       }, item), {
+        shouldDrawSpacerAbove: item.shouldDrawSpacerAbove && i !== 0,
+        shouldDrawSpacerBelow: item.shouldDrawSpacerBelow && i !== items.length - 1,
         onClick: function(event) {
           return handleItemClick(event, item);
         }
@@ -8298,7 +8303,8 @@ var List = function(param) {
           children: /* @__PURE__ */ jsx("div", {
             className: classes.nestedItems,
             children: /* @__PURE__ */ jsx(List, {
-              items: item.nestedItems
+              items: item.nestedItems,
+              onClick
             })
           })
         }) : /* @__PURE__ */ jsx(ListItem, _object_spread$W({}, itemProps))
@@ -26017,9 +26023,9 @@ function FlexibleTableCell(_param) {
   var classes = useStyles$i({
     theme: tweakStyles
   });
-  var _config_columnName;
-  var _ref = (_config_columnName = config[columnName]) !== null && _config_columnName !== void 0 ? _config_columnName : {}, component = _ref.component, left2 = _ref.left, right2 = _ref.right, position = _ref.position, cellAlign = _ref.cellAlign, cellVerticalAlign = _ref.cellVerticalAlign, shouldRenderDataId = _ref.shouldRenderDataId;
   var value = row[columnName];
+  var _config_columnName;
+  var _ref = (_config_columnName = config[columnName]) !== null && _config_columnName !== void 0 ? _config_columnName : {}, _ref_component = _ref.component, component = _ref_component === void 0 ? formatCellContent(value, config[columnName]) : _ref_component, left2 = _ref.left, right2 = _ref.right, position = _ref.position, cellAlign = _ref.cellAlign, cellVerticalAlign = _ref.cellVerticalAlign, shouldRenderDataId = _ref.shouldRenderDataId;
   var TableCell = renderMode === "divs" ? "div" : "td";
   var _obj2;
   return /* @__PURE__ */ jsx(TableCell, _object_spread_props$j(_object_spread$k({
@@ -26037,12 +26043,10 @@ function FlexibleTableCell(_param) {
     children: isLoading ? /* @__PURE__ */ jsx("div", {
       className: classes.skeleton,
       children: /* @__PURE__ */ jsx(Skeleton, {})
-    }) : isNotEmpty(value) && /* @__PURE__ */ jsx(Fragment, {
-      children: isNotEmpty(component) ? component(_object_spread_props$j(_object_spread$k({}, valueComponentProps), {
-        value,
-        row
-      })) : formatCellContent(value, config[columnName])
-    })
+    }) : isNotEmpty(value) && applyAction(component, _object_spread_props$j(_object_spread$k({}, valueComponentProps), {
+      value,
+      row
+    }))
   }));
 }
 var useStyles$h = createThemedStyles("FlexibleTableRow", {
@@ -26503,7 +26507,6 @@ function FlexibleTable(_param) {
             className: classes.headerRow,
             children: columns.map(function(key, i) {
               var itemConfig = config === null || config === void 0 ? void 0 : config[key];
-              var TitleComponent = itemConfig === null || itemConfig === void 0 ? void 0 : itemConfig.titleComponent;
               var _itemConfig_titleAlign, _itemConfig_title;
               var _obj2;
               return /* @__PURE__ */ jsx(TableHeader, _object_spread_props$h(_object_spread$i({
@@ -26520,9 +26523,9 @@ function FlexibleTable(_param) {
               }, addDataAttributes({
                 id: (itemConfig === null || itemConfig === void 0 ? void 0 : itemConfig.shouldRenderDataId) ? key : void 0
               })), {
-                children: isNotEmpty(TitleComponent) ? /* @__PURE__ */ jsx(TitleComponent, {
+                children: applyAction((_itemConfig_title = itemConfig === null || itemConfig === void 0 ? void 0 : itemConfig.title) !== null && _itemConfig_title !== void 0 ? _itemConfig_title : "", {
                   value: headerContent === null || headerContent === void 0 ? void 0 : headerContent[key]
-                }) : (_itemConfig_title = itemConfig === null || itemConfig === void 0 ? void 0 : itemConfig.title) !== null && _itemConfig_title !== void 0 ? _itemConfig_title : ""
+                })
               }), key);
             })
           })