@true-engineering/true-react-common-ui-kit 3.50.1 → 3.51.0

package/README.md

@@ -12,6 +12,12 @@
 
 # Release Notes
 
+## 3.51.0
+
+### Changes
+
+- **FlexibleTable**: Исправлена мемоизация строк при смещении
+
 ## 3.50.1
 
 ### Changes

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

@@ -3,7 +3,7 @@ import { ICommonProps } from '../../types';
 import { IFlexibleTableRowProps } from './components';
 import { ITableRow, IFlexibleTableConfigType, IInfinityScrollConfig, IFlexibleTableRenderMode, IHeaderContent } from './types';
 import { IFlexibleTableStyles } from './FlexibleTable.styles';
-export interface IFlexibleTableProps<Row extends ITableRow, HeaderContent extends IHeaderContent<Row>, UniqueField extends keyof Row> extends ICommonProps<IFlexibleTableStyles>, Pick<IFlexibleTableRowProps<Row, HeaderContent, UniqueField>, 'uniqueField' | 'rowAttributes' | 'isFirstColumnSticky' | 'isExpandableRowComponentInitiallyOpen' | 'expandableRowComponent' | 'onRowClick' | 'onRowHover' | 'rowRef'> {
+export interface IFlexibleTableProps<Row extends ITableRow, HeaderContent extends IHeaderContent<Row>, UniqueField extends keyof Row> extends ICommonProps<IFlexibleTableStyles>, Pick<IFlexibleTableRowProps<Row, HeaderContent, UniqueField>, 'uniqueField' | 'rowAttributes' | 'isFirstColumnSticky' | 'expandableRowComponent' | 'onRowClick' | 'onRowHover' | 'rowRef'> {
     content: Row[];
     /** @default 'table' */
     renderMode?: IFlexibleTableRenderMode;
@@ -27,5 +27,7 @@ export interface IFlexibleTableProps<Row extends ITableRow, HeaderContent extend
     nothingFoundContent?: ReactNode;
     /** @default true */
     shouldRenderHeader?: boolean;
+    /** @default false */
+    isExpandableRowComponentInitiallyOpen?: boolean | ((row: Row, index: number) => boolean);
 }
-export declare function FlexibleTable<Row extends ITableRow, HeaderContent extends IHeaderContent<Row> = IHeaderContent<Row>, UniqueField extends keyof Row = keyof Row>({ content, headerContent, config, enabledColumns, activeRows, uniqueField, isLoading, isFirstColumnSticky, isHorizontallyScrollable, isRowFocusable, infinityScrollConfig, renderMode, refForScroll, nothingFoundContent, data, testId, tweakStyles, shouldRenderHeader, onHeadClick, ...restProps }: IFlexibleTableProps<Row, HeaderContent, UniqueField>): 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, activeRows, uniqueField, isLoading, isFirstColumnSticky, isHorizontallyScrollable, isRowFocusable, infinityScrollConfig, renderMode, refForScroll, nothingFoundContent, data, testId, tweakStyles, shouldRenderHeader, onHeadClick, isExpandableRowComponentInitiallyOpen: isRowInitiallyOpen, ...restProps }: IFlexibleTableProps<Row, HeaderContent, UniqueField>): JSX.Element;

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

@@ -4,7 +4,6 @@ import { ITableRow, IFlexibleTableConfigType, IFlexibleTableRenderMode, IHeaderC
 import { IFlexibleTableRowStyles } from './FlexibleTableRow.styles';
 export interface IFlexibleTableRowProps<Row extends ITableRow, HeaderContent extends IHeaderContent<Row>, UniqueField extends keyof Row> extends ITweakStylesProps<IFlexibleTableRowStyles> {
     item: Row;
-    index: number;
     uniqueField?: UniqueField;
     renderMode: IFlexibleTableRenderMode;
     /** @default false */
@@ -20,13 +19,13 @@ export interface IFlexibleTableRowProps<Row extends ITableRow, HeaderContent ext
     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;
     onRowClick?: (id: Row[UniqueField]) => void;
 }
-declare function FlexibleTableRowInner<Row extends ITableRow, HeaderContent extends IHeaderContent<Row>, UniqueField extends keyof Row>({ item, index, config, columns, uniqueField, renderMode, isActive, isFocusable, isFirstColumnSticky, isLoading, rowAttributes, isExpandableRowComponentInitiallyOpen, rowRef, tweakStyles, expandableRowComponent, onRowHover, onRowClick, }: IFlexibleTableRowProps<Row, HeaderContent, UniqueField>): JSX.Element;
+declare function FlexibleTableRowInner<Row extends ITableRow, HeaderContent extends IHeaderContent<Row>, UniqueField extends keyof Row>({ item, config, columns, uniqueField, renderMode, isActive, isFocusable, isFirstColumnSticky, isLoading, rowAttributes, isExpandableRowComponentInitiallyOpen, rowRef, tweakStyles, expandableRowComponent, onRowHover, onRowClick, }: IFlexibleTableRowProps<Row, HeaderContent, UniqueField>): JSX.Element;
 export declare const FlexibleTableRow: typeof FlexibleTableRowInner;
 export {};

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

@@ -26347,7 +26347,7 @@ function _unsupported_iterable_to_array$7(o, minLen) {
     return _array_like_to_array$7(o, minLen);
 }
 function FlexibleTableRowInner(param) {
-  var item = param.item, index = param.index, config = param.config, columns = param.columns, uniqueField = param.uniqueField, renderMode = param.renderMode, _param_isActive = param.isActive, isActive = _param_isActive === void 0 ? false : _param_isActive, _param_isFocusable = param.isFocusable, isFocusable = _param_isFocusable === void 0 ? false : _param_isFocusable, _param_isFirstColumnSticky = param.isFirstColumnSticky, isFirstColumnSticky = _param_isFirstColumnSticky === void 0 ? false : _param_isFirstColumnSticky, _param_isLoading = param.isLoading, isLoading = _param_isLoading === void 0 ? false : _param_isLoading, rowAttributes = param.rowAttributes, _param_isExpandableRowComponentInitiallyOpen = param.isExpandableRowComponentInitiallyOpen, isExpandableRowComponentInitiallyOpen = _param_isExpandableRowComponentInitiallyOpen === void 0 ? false : _param_isExpandableRowComponentInitiallyOpen, rowRef = param.rowRef, tweakStyles = param.tweakStyles, expandableRowComponent = param.expandableRowComponent, onRowHover = param.onRowHover, onRowClick = param.onRowClick;
+  var item = param.item, config = param.config, columns = param.columns, uniqueField = param.uniqueField, renderMode = param.renderMode, _param_isActive = param.isActive, isActive = _param_isActive === void 0 ? false : _param_isActive, _param_isFocusable = param.isFocusable, isFocusable = _param_isFocusable === void 0 ? false : _param_isFocusable, _param_isFirstColumnSticky = param.isFirstColumnSticky, isFirstColumnSticky = _param_isFirstColumnSticky === void 0 ? false : _param_isFirstColumnSticky, _param_isLoading = param.isLoading, isLoading = _param_isLoading === void 0 ? false : _param_isLoading, rowAttributes = param.rowAttributes, _param_isExpandableRowComponentInitiallyOpen = param.isExpandableRowComponentInitiallyOpen, isExpandableRowComponentInitiallyOpen = _param_isExpandableRowComponentInitiallyOpen === void 0 ? false : _param_isExpandableRowComponentInitiallyOpen, rowRef = param.rowRef, tweakStyles = param.tweakStyles, expandableRowComponent = param.expandableRowComponent, onRowHover = param.onRowHover, onRowClick = param.onRowClick;
   var classes = useStyles$h({
     theme: tweakStyles
   });
@@ -26359,7 +26359,7 @@ function FlexibleTableRowInner(param) {
   var _useState = _sliced_to_array$7(useState(false), 2), isFocused = _useState[0], setFocused = _useState[1];
   var _useState1 = _sliced_to_array$7(useState(function() {
     return {
-      isOpen: applyAction(isExpandableRowComponentInitiallyOpen, item, index)
+      isOpen: isExpandableRowComponentInitiallyOpen
     };
   }), 2), nestedComponent = _useState1[0], setNestedComponent = _useState1[1];
   var isEditable = !isLoading && (isNotEmpty(onRowClick) || isNotEmpty(onRowHover));
@@ -26552,7 +26552,7 @@ function _object_without_properties_loose$7(source, excluded) {
   return target;
 }
 function FlexibleTable(_param) {
-  var content = _param.content, headerContent = _param.headerContent, config = _param.config, enabledColumns = _param.enabledColumns, activeRows = _param.activeRows, uniqueField = _param.uniqueField, _param_isLoading = _param.isLoading, isLoading = _param_isLoading === void 0 ? false : _param_isLoading, _param_isFirstColumnSticky = _param.isFirstColumnSticky, isFirstColumnSticky = _param_isFirstColumnSticky === void 0 ? false : _param_isFirstColumnSticky, _param_isHorizontallyScrollable = _param.isHorizontallyScrollable, isHorizontallyScrollable = _param_isHorizontallyScrollable === void 0 ? false : _param_isHorizontallyScrollable, _param_isRowFocusable = _param.isRowFocusable, isRowFocusable = _param_isRowFocusable === void 0 ? false : _param_isRowFocusable, infinityScrollConfig = _param.infinityScrollConfig, _param_renderMode = _param.renderMode, renderMode = _param_renderMode === void 0 ? "table" : _param_renderMode, refForScroll = _param.refForScroll, nothingFoundContent = _param.nothingFoundContent, data = _param.data, testId = _param.testId, tweakStyles = _param.tweakStyles, _param_shouldRenderHeader = _param.shouldRenderHeader, shouldRenderHeader = _param_shouldRenderHeader === void 0 ? true : _param_shouldRenderHeader, onHeadClick = _param.onHeadClick, restProps = _object_without_properties$7(_param, [
+  var content = _param.content, headerContent = _param.headerContent, config = _param.config, enabledColumns = _param.enabledColumns, activeRows = _param.activeRows, uniqueField = _param.uniqueField, _param_isLoading = _param.isLoading, isLoading = _param_isLoading === void 0 ? false : _param_isLoading, _param_isFirstColumnSticky = _param.isFirstColumnSticky, isFirstColumnSticky = _param_isFirstColumnSticky === void 0 ? false : _param_isFirstColumnSticky, _param_isHorizontallyScrollable = _param.isHorizontallyScrollable, isHorizontallyScrollable = _param_isHorizontallyScrollable === void 0 ? false : _param_isHorizontallyScrollable, _param_isRowFocusable = _param.isRowFocusable, isRowFocusable = _param_isRowFocusable === void 0 ? false : _param_isRowFocusable, infinityScrollConfig = _param.infinityScrollConfig, _param_renderMode = _param.renderMode, renderMode = _param_renderMode === void 0 ? "table" : _param_renderMode, refForScroll = _param.refForScroll, nothingFoundContent = _param.nothingFoundContent, data = _param.data, testId = _param.testId, tweakStyles = _param.tweakStyles, _param_shouldRenderHeader = _param.shouldRenderHeader, shouldRenderHeader = _param_shouldRenderHeader === void 0 ? true : _param_shouldRenderHeader, onHeadClick = _param.onHeadClick, isRowInitiallyOpen = _param.isExpandableRowComponentInitiallyOpen, restProps = _object_without_properties$7(_param, [
     "content",
     "headerContent",
     "config",
@@ -26571,7 +26571,8 @@ function FlexibleTable(_param) {
     "testId",
     "tweakStyles",
     "shouldRenderHeader",
-    "onHeadClick"
+    "onHeadClick",
+    "isExpandableRowComponentInitiallyOpen"
   ]);
   var classes = useStyles$j({
     theme: tweakStyles
@@ -26590,16 +26591,20 @@ function FlexibleTable(_param) {
     config
   ]);
   var hasInfiniteScroll = isNotEmpty(infinityScrollConfig);
-  var tableRowProps = _object_spread_props$j(_object_spread$k({}, restProps), {
-    renderMode,
-    config,
-    columns,
-    uniqueField,
-    isLoading,
-    isFirstColumnSticky,
-    isFocusable: isRowFocusable,
-    tweakStyles: tweakTableRowStyles
-  });
+  var getTableRowProps = function(item, index) {
+    return _object_spread_props$j(_object_spread$k({}, restProps), {
+      item,
+      renderMode,
+      config,
+      columns,
+      uniqueField,
+      isLoading,
+      isFirstColumnSticky,
+      isFocusable: isRowFocusable,
+      tweakStyles: tweakTableRowStyles,
+      isExpandableRowComponentInitiallyOpen: applyAction(isRowInitiallyOpen, item, index)
+    });
+  };
   var getDataScrollAttributeSetter = useCallback(function(key, setter) {
     return function(el) {
       if (isHorizontallyScrollable && isNotEmpty(el) && setter(el)) {
@@ -26725,10 +26730,8 @@ function FlexibleTable(_param) {
         /* @__PURE__ */ jsx(Table.Body, {
           className: classes.body,
           children: isLoading ? indexMap(6, function(i) {
-            return /* @__PURE__ */ createElement(FlexibleTableRow, _object_spread_props$j(_object_spread$k({}, tableRowProps), {
-              key: i,
-              item: {},
-              index: i
+            return /* @__PURE__ */ createElement(FlexibleTableRow, _object_spread_props$j(_object_spread$k({}, getTableRowProps({}, i)), {
+              key: i
             }));
           }) : /* @__PURE__ */ jsxs(Fragment, {
             children: [
@@ -26741,11 +26744,9 @@ function FlexibleTable(_param) {
                 })
               }),
               content.map(function(item, i) {
-                return /* @__PURE__ */ createElement(FlexibleTableRow, _object_spread_props$j(_object_spread$k({}, tableRowProps), {
+                return /* @__PURE__ */ createElement(FlexibleTableRow, _object_spread_props$j(_object_spread$k({}, getTableRowProps(item, i)), {
                   isActive: activeRowsSet.has(i),
-                  key: isNotEmpty(uniqueField) ? item[uniqueField] : i,
-                  item,
-                  index: i
+                  key: isNotEmpty(uniqueField) ? item[uniqueField] : i
                 }));
               }),
               hasInfiniteScroll && !infinityScrollConfig.isLastPage && /* @__PURE__ */ jsx(Table.Row, {