@true-engineering/true-react-common-ui-kit 3.0.0-alpha.2 → 3.0.0-alpha.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@true-engineering/true-react-common-ui-kit",
-  "version": "3.0.0-alpha.2",
+  "version": "3.0.0-alpha.4",
   "description": "True Engineering React UI Kit with theming support",
   "author": "True Engineering (https://trueengineering.ru)",
   "keywords": [

package/src/components/DatePicker/DatePicker.tsx

@@ -5,6 +5,7 @@ import clsx from 'clsx';
 import { isAfter, isBefore, isValid } from 'date-fns';
 import {
   addDataTestId,
+  getTestId,
   isEmpty,
   isNotEmpty,
   isStringNotEmpty,
@@ -125,6 +126,7 @@ export const DatePicker = forwardRef<ReactDatePicker, IDatePickerProps>(
       iconType: isClearable && hasDateInputValue ? undefined : 'calendar',
       tweakStyles: tweakDateInputStyles,
       ...(isRange ? { startDate: startDateValue, endDate: endDateValue } : { date: dateValue }),
+      testId: getTestId(testId, 'input'),
     };
 
     const handleChangeDate = (value: Date | null, event?: SyntheticEvent) => {

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

@@ -315,18 +315,20 @@ const tweak: IFlexibleTableStyles = {
 };
 
 const Template: ComponentStory<typeof FlexibleTable<ITableContent>> = (args) => (
-  <FlexibleTable<ITableContent>
-    {...args}
-    uniqueField="contractCode"
-    expandableRowComponent={(item, _, close) =>
-      item.contractCode === 'OB_UT_M119' ? (
-        <div onClick={close}>всем привет :) {item.contractCode}</div>
-      ) : null
-    }
-    tweakStyles={tweak}
-    content={content}
-    config={config}
-  />
+  <div style={{ width: 500, overflow: 'auto' }}>
+    <FlexibleTable<ITableContent>
+      {...args}
+      uniqueField="contractCode"
+      expandableRowComponent={(item, _, close) =>
+        item.contractCode === 'OB_UT_M119' ? (
+          <div onClick={close}>всем привет :) {item.contractCode}</div>
+        ) : null
+      }
+      tweakStyles={tweak}
+      content={content}
+      config={config}
+    />
+  </div>
 );
 
 export const Default = Template.bind({});

package/src/components/FlexibleTable/FlexibleTable.styles.ts

@@ -22,16 +22,6 @@ export const useStyles = createThemedStyles('FlexibleTable', {
     maxHeight: '100%',
   },
 
-  horizontallyScrolled: {
-    '& $cellSticky': {
-      boxShadow: '4px 0 4px rgba(0, 0, 0, 0.05)',
-    },
-
-    '& $headerSticky::before': {
-      boxShadow: '4px 0 4px rgba(0, 0, 0, 0.05)',
-    },
-  },
-
   loader: {
     position: 'sticky',
     left: 0,
@@ -75,6 +65,10 @@ export const useStyles = createThemedStyles('FlexibleTable', {
       pointerEvents: 'none',
       zIndex: 1,
       transition: ['box-shadow', '0.25s', 'ease-in-out'],
+
+      '[data-scrolled] &': {
+        boxShadow: '4px 0 4px rgba(0, 0, 0, 0.05)',
+      },
     },
 
     '&::after': {

package/src/components/FlexibleTable/FlexibleTable.tsx

@@ -1,5 +1,6 @@
 import { ReactNode, RefObject, useCallback, useEffect, useRef, useState } from 'react';
 import clsx from 'clsx';
+import { addDataTestId } from '@true-engineering/true-react-platform-helpers';
 import { addDataAttributes } from '../../helpers';
 import { useTweakStyles } from '../../hooks';
 import { ICommonProps } from '../../types';
@@ -41,7 +42,7 @@ export function FlexibleTable<Values extends Record<string, any>>({
   isHorizontallyScrollable,
   isFirstColumnSticky,
   infinityScrollConfig,
-  uniqueField,
+  uniqueField = 'id',
   onHeadClick,
   onRowHover,
   onRowClick,
@@ -111,12 +112,10 @@ export function FlexibleTable<Values extends Record<string, any>>({
   return (
     <div
       ref={refForScroll ?? scrollRef}
-      className={clsx(
-        isHorizontallyScrollable && classes.scroll,
-        isHorizontallyScrolled && classes.horizontallyScrolled,
-      )}
+      className={clsx({ [classes.scroll]: isHorizontallyScrollable })}
+      data-scrolled={isHorizontallyScrolled ? true : undefined}
     >
-      <table className={classes.root} data-testid={testId} {...addDataAttributes(data)}>
+      <table className={classes.root} {...addDataTestId(testId)} {...addDataAttributes(data)}>
         <thead>
           <tr className={classes.headerRow}>
             {(enabledColumns || Object.keys(content[0])).map((key, idx) => {
@@ -131,11 +130,10 @@ export function FlexibleTable<Values extends Record<string, any>>({
 
               return (
                 <th
-                  className={clsx(
-                    classes.header,
-                    isFirstColumnSticky && idx === 0 && classes.headerSticky,
-                    isFirstColumnSticky && idx === 1 && classes.headerSecond,
-                  )}
+                  className={clsx(classes.header, {
+                    [classes.headerSticky]: isFirstColumnSticky && idx === 0,
+                    [classes.headerSecond]: isFirstColumnSticky && idx === 1,
+                  })}
                   style={{
                     minWidth: itemConfig?.minWidth,
                     width: itemConfig?.width,
@@ -163,17 +161,17 @@ export function FlexibleTable<Values extends Record<string, any>>({
               </tr>
             )}
 
-          {content.map((item, idx) => (
+          {content.map((item, i) => (
             <FlexibleTableRow
               item={item}
               uniqueField={uniqueField}
-              isActive={activeRows?.includes(idx) ?? false}
+              isActive={activeRows?.includes(i) ?? false}
               isFirstColumnSticky={isFirstColumnSticky}
               onRowClick={onRowClick}
               onRowHover={onRowHover}
               enabledColumns={enabledColumns}
               config={config}
-              key={uniqueField ? item[uniqueField] : idx}
+              key={item[uniqueField] ?? i}
               rowAttributes={rowAttributes}
               tweakStyles={tweakTableRowStyles}
               expandableRowComponent={expandableRowComponent}

package/src/components/FlexibleTable/components/FlexibleTableCell/FlexibleTableCell.styles.ts

@@ -18,6 +18,10 @@ export const useStyles = createThemedStyles('FlexibleTableCell', {
     paddingLeft: 24,
     paddingRight: 12,
     ...getTransition(['box-shadow']),
+
+    '[data-scrolled] &': {
+      boxShadow: '4px 0 4px rgba(0, 0, 0, 0.05)',
+    },
   },
 
   second: {