@true-engineering/true-react-common-ui-kit 3.6.0 → 3.8.0

package/src/components/Flag/Flag.styles.ts

@@ -1,17 +1,17 @@
-import { colors, ITweakStyles, createThemedStyles } from '../../theme';
-
-export const useStyles = createThemedStyles('Flag', {
-  root: {
-    // приходится хардкодить в компоненте, тк либа Flags выдает флаги с 2-3 пиксельным отступом снизу
-    // если будет нужно, то можно вынести border на уровень пропсов
-    border: [1, 'solid', colors.BORDER_MAIN],
-    borderRadius: 2,
-  },
-
-  noFlag: {
-    width: 20,
-    color: colors.FONT_MEDIUM,
-  },
-});
-
-export type IFlagStyles = ITweakStyles<typeof useStyles>;
+import { colors, ITweakStyles, createThemedStyles } from '../../theme';
+
+export const useStyles = createThemedStyles('Flag', {
+  root: {
+    // приходится хардкодить в компоненте, тк либа Flags выдает флаги с 2-3 пиксельным отступом снизу
+    // если будет нужно, то можно вынести border на уровень пропсов
+    border: [1, 'solid', colors.BORDER_MAIN],
+    borderRadius: 2,
+  },
+
+  noFlag: {
+    width: 20,
+    color: colors.FONT_MEDIUM,
+  },
+});
+
+export type IFlagStyles = ITweakStyles<typeof useStyles>;

package/src/components/Flag/index.ts

@@ -1,2 +1,2 @@
-export * from './Flag';
-export type { IFlagStyles } from './Flag.styles';
+export * from './Flag';
+export type { IFlagStyles } from './Flag.styles';

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

@@ -1,13 +1,11 @@
-import { FC } from 'react';
-import { ComponentStory } from '@storybook/react';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { FlexibleTable } from './FlexibleTable';
-import { IFlexibleTableConfigType } from './types';
-import { IFlexibleTableStyles } from './FlexibleTable.styles';
+import { IFlexibleTableConfigType, IValueComponent } from './types';
 
 export default {
   title: 'Table/FlexibleTable',
   component: FlexibleTable,
-};
+} as ComponentMeta<typeof FlexibleTable>;
 
 interface ITableContent {
   contractCode: string;
@@ -22,8 +20,7 @@ interface ITableContent {
   status: string;
 }
 
-const Temp: FC<{ value: string | undefined }> = ({ value }) => <>{value}</>;
-const Temp1: FC<{ value: string }> = ({ value }) => <>{value}</>;
+const Temp: IValueComponent<ITableContent, string> = ({ value }) => <>{value}</>;
 
 const config: IFlexibleTableConfigType<ITableContent> = {
   contractCode: {
@@ -44,12 +41,12 @@ const config: IFlexibleTableConfigType<ITableContent> = {
     title: 'Sign Date',
   },
   partner: {
-    component: Temp1,
+    component: Temp,
     title: 'Partner',
   },
 };
 
-const content = [
+const content: ITableContent[] = [
   {
     contractCode: 'SOME_CODE',
     validFrom: new Date('2015-05-18'),
@@ -59,13 +56,7 @@ const content = [
     partner: 'SE_00206_CR',
     partnerDescription: 'TEST PARTNER DESCRIPTION',
     parentContract: '',
-    childContracts: [],
-    parentContractWrongAssignment: 'N',
     currency: 'RUR',
-    entityCode: 'TEST_ENITY_CODE',
-    contractCode1C: '2000632',
-    taxCode: '20%',
-    taxPercentage: 20,
     status: 'Active',
   },
   {
@@ -77,13 +68,7 @@ const content = [
     partner: 'SE_00168_CR',
     partnerDescription: 'TEST PARTNER DESCRIPTION',
     parentContract: '',
-    childContracts: [],
-    parentContractWrongAssignment: 'N',
     currency: 'RUR',
-    entityCode: 'TEST_ENITY_CODE',
-    contractCode1C: '2000262',
-    taxCode: '20%',
-    taxPercentage: 20,
     status: 'Active',
   },
   {
@@ -95,13 +80,7 @@ const content = [
     partner: 'SE_00206_CR',
     partnerDescription: 'TEST PARTNER DESCRIPTION',
     parentContract: '',
-    childContracts: ['SOME_CODE_1'],
-    parentContractWrongAssignment: 'N',
     currency: 'U00',
-    entityCode: 'TEST_ENITY_CODE',
-    contractCode1C: '2000392',
-    taxCode: '20%',
-    taxPercentage: 20,
     status: 'Active',
   },
   {
@@ -113,13 +92,7 @@ const content = [
     partner: 'SE_00168_CR',
     partnerDescription: 'TEST PARTNER DESCRIPTION',
     parentContract: 'PARENT/CONTRACT',
-    childContracts: [],
-    parentContractWrongAssignment: 'N',
     currency: 'RUR',
-    entityCode: 'TEST_ENITY_CODE',
-    contractCode1C: '2001199',
-    taxCode: '20%',
-    taxPercentage: 20,
     status: 'Active',
   },
   {
@@ -131,13 +104,7 @@ const content = [
     partner: 'SE_00206_CR',
     partnerDescription: 'TEST PARTNER DESCRIPTION',
     parentContract: 'PARENT/CONTRACT',
-    childContracts: [],
-    parentContractWrongAssignment: 'N',
     currency: 'RUR',
-    entityCode: 'TEST_ENITY_CODE',
-    contractCode1C: '2000632',
-    taxCode: '20%',
-    taxPercentage: 20,
     status: 'Active',
   },
   {
@@ -149,13 +116,7 @@ const content = [
     partner: 'SE_00168_CR',
     partnerDescription: 'TEST PARTNER DESCRIPTION',
     parentContract: 'PARENT/CONTRACT',
-    childContracts: [],
-    parentContractWrongAssignment: 'N',
     currency: 'RUR',
-    entityCode: 'TEST_ENITY_CODE',
-    contractCode1C: '2000262',
-    taxCode: '20%',
-    taxPercentage: 20,
     status: 'Active',
   },
   {
@@ -167,13 +128,7 @@ const content = [
     partner: 'SE_00206_CR',
     partnerDescription: 'TEST PARTNER DESCRIPTION',
     parentContract: '',
-    childContracts: ['1-073-СТ/2010'],
-    parentContractWrongAssignment: 'N',
     currency: 'U00',
-    entityCode: 'TEST_ENITY_CODE',
-    contractCode1C: '2000392',
-    taxCode: '20%',
-    taxPercentage: 20,
     status: 'Active',
   },
   {
@@ -185,13 +140,7 @@ const content = [
     partner: 'SE_00168_CR',
     partnerDescription: 'TEST PARTNER DESCRIPTION',
     parentContract: 'PARENT/CONTRACT',
-    childContracts: [],
-    parentContractWrongAssignment: 'N',
     currency: 'RUR',
-    entityCode: 'TEST_ENITY_CODE',
-    contractCode1C: '2001199',
-    taxCode: '20%',
-    taxPercentage: 20,
     status: 'Active',
   },
   {
@@ -203,13 +152,7 @@ const content = [
     partner: 'SE_00206_CR',
     partnerDescription: 'TEST PARTNER DESCRIPTION',
     parentContract: '',
-    childContracts: ['1', '2', '3', '4', '5', '6'],
-    parentContractWrongAssignment: 'N',
     currency: 'U00',
-    entityCode: 'TEST_ENITY_CODE',
-    contractCode1C: '2001199',
-    taxCode: '20%',
-    taxPercentage: 20,
     status: 'Active',
   },
   {
@@ -221,13 +164,7 @@ const content = [
     partner: 'SE_00206_CR',
     partnerDescription: 'TEST PARTNER DESCRIPTION',
     parentContract: '',
-    childContracts: ['1', '2', '3', '4', '5', '6'],
-    parentContractWrongAssignment: 'N',
     currency: 'U00',
-    entityCode: 'TEST_ENITY_CODE',
-    contractCode1C: '2001199',
-    taxCode: '20%',
-    taxPercentage: 20,
     status: 'Active',
   },
   {
@@ -239,13 +176,7 @@ const content = [
     partner: 'SE_00206_CR',
     partnerDescription: 'TEST PARTNER DESCRIPTION',
     parentContract: '',
-    childContracts: ['1', '2', '3', '4', '5', '6'],
-    parentContractWrongAssignment: 'N',
     currency: 'U00',
-    entityCode: 'TEST_ENITY_CODE',
-    contractCode1C: '2001199',
-    taxCode: '20%',
-    taxPercentage: 20,
     status: 'Active',
   },
   {
@@ -257,17 +188,11 @@ const content = [
     partner: 'SE_00206_CR',
     partnerDescription: 'TEST PARTNER DESCRIPTION',
     parentContract: '',
-    childContracts: ['1', '2', '3', '4', '5', '6'],
-    parentContractWrongAssignment: 'N',
     currency: 'U00',
-    entityCode: 'TEST_ENITY_CODE',
-    contractCode1C: '2001199',
-    taxCode: '20%',
-    taxPercentage: 20,
     status: 'Active',
   },
   {
-    contractCode: 'SOME_CODE',
+    contractCode: 'OB_UT_M119',
     validFrom: new Date('2015-05-18'),
     validTo: new Date('2020-05-18'),
     title: 'Название',
@@ -275,13 +200,7 @@ const content = [
     partner: 'SE_00206_CR',
     partnerDescription: 'TEST PARTNER DESCRIPTION',
     parentContract: '',
-    childContracts: ['1', '2', '3', '4', '5', '6'],
-    parentContractWrongAssignment: 'N',
     currency: 'U00',
-    entityCode: 'TEST_ENITY_CODE',
-    contractCode1C: '2001199',
-    taxCode: '20%',
-    taxPercentage: 20,
     status: 'Active',
   },
   {
@@ -293,40 +212,25 @@ const content = [
     partner: 'SE_00206_CR',
     partnerDescription: 'TEST PARTNER DESCRIPTION',
     parentContract: '',
-    childContracts: ['1', '2', '3', '4', '5', '6'],
-    parentContractWrongAssignment: 'N',
     currency: 'U00',
-    entityCode: 'TEST_ENITY_CODE',
-    contractCode1C: '2001199',
-    taxCode: '20%',
-    taxPercentage: 20,
     status: 'Active',
   },
 ];
 
-const tweak: IFlexibleTableStyles = {
-  tweakTableRow: {
-    tweakTableCell: {
-      root: {
-        color: 'red',
-      },
-    },
-  },
-};
-
 const Template: ComponentStory<typeof FlexibleTable<ITableContent>> = (args) => (
   <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}
+      content={content}
+      rowAttributes={['contractCode']}
+      expandableRowComponent={(_0, _1, close) => (
+        <div onClick={close}>
+          всем привет :)
+          <br />
+          Нажми на меня, чтобы закрыть
+        </div>
+      )}
     />
   </div>
 );
@@ -334,9 +238,14 @@ const Template: ComponentStory<typeof FlexibleTable<ITableContent>> = (args) =>
 export const Default = Template.bind({});
 
 Default.args = {
-  isHorizontallyScrollable: true,
-  isFirstColumnSticky: true,
   isLoading: false,
+  isFirstColumnSticky: true,
+  isHorizontallyScrollable: true,
+  isExpandableRowComponentInitiallyOpen: false,
+};
+
+Default.argTypes = {
+  isExpandableRowComponentInitiallyOpen: { control: 'boolean' },
 };
 
 Default.parameters = {
@@ -344,6 +253,11 @@ Default.parameters = {
     exclude: [
       'data',
       'testId',
+      'content',
+      'config',
+      'rowAttributes',
+      'headerContent',
+      'tweakStyles',
       'onHeadClick',
       'onRowClick',
       'onRowHover',

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

@@ -6,8 +6,8 @@ export const STICKY_SHADOW_PADDING = 12;
 
 export const useStyles = createThemedStyles('FlexibleTable', {
   root: {
-    position: 'relative',
     width: '100%',
+    position: 'relative',
     borderCollapse: 'separate',
     borderSpacing: 0,
   },
@@ -102,13 +102,6 @@ export const useStyles = createThemedStyles('FlexibleTable', {
   nothingFoundRow: {},
 
   nothingFound: {},
-
-  skeletonRow: {},
-
-  skeleton: {
-    height: 21,
-    padding: [14, 7],
-  },
 });
 
 export type IFlexibleTableStyles = ITweakStyles<

package/src/components/FlexibleTable/FlexibleTable.tsx

@@ -10,65 +10,64 @@ import {
 import { addDataAttributes } from '../../helpers';
 import { useMergedRefs, useTweakStyles } from '../../hooks';
 import { ICommonProps } from '../../types';
-import { Skeleton } from '../Skeleton';
 import { ThemedPreloader } from '../ThemedPreloader';
-import { FlexibleTableRow } from './components';
+import { FlexibleTableRow, IFlexibleTableRowProps } from './components';
 import { hasHorizontalScrollBar } from './helpers';
-import { IFlexibleTableConfigType, IInfinityScrollConfig, ITitleComponent } from './types';
+import {
+  ITableRow,
+  IFlexibleTableConfigType,
+  IInfinityScrollConfig,
+  IFlexibleTableRenderMode,
+} from './types';
 import { useStyles, IFlexibleTableStyles } from './FlexibleTable.styles';
 
-// TODO: Заменить Record<string, any> на Record<string, unknown>
-export interface IFlexibleTableProps<Values extends Record<string, any>>
-  extends ICommonProps<IFlexibleTableStyles> {
-  content: Values[];
-  headerContent?: Partial<Record<keyof Values, any>>;
-  enabledColumns?: Array<keyof Values>;
-  activeRows?: number[];
-  config: IFlexibleTableConfigType<Values>;
+export interface IFlexibleTableProps<Row extends ITableRow>
+  extends ICommonProps<IFlexibleTableStyles>,
+    Pick<
+      IFlexibleTableRowProps<Row>,
+      | 'uniqueField'
+      | 'activeRows'
+      | 'rowAttributes'
+      | 'isFirstColumnSticky'
+      | 'isExpandableRowComponentInitiallyOpen'
+      | 'expandableRowComponent'
+      | 'onRowClick'
+      | 'onRowHover'
+    > {
+  content: Row[];
+  /** @default 'table' */
+  renderMode?: IFlexibleTableRenderMode;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  headerContent?: Partial<Record<keyof Row, any>>;
+  config: IFlexibleTableConfigType<Row>;
+  enabledColumns?: Array<keyof Row & string>;
   /** @default false */
-  isHorizontallyScrollable?: boolean;
+  isLoading?: boolean;
   /** @default false */
-  isFirstColumnSticky?: boolean;
+  isHorizontallyScrollable?: boolean;
   infinityScrollConfig?: IInfinityScrollConfig;
-  /** @default Индекс строки */
-  uniqueField?: keyof Values;
-  onHeadClick?: (column: keyof Values) => void;
-  /** @default false */
-  isLoading?: boolean;
-  // TODO: Заменить string на Generic Values[uniqueField]
-  onRowClick?: (id: string) => void;
-  onRowHover?: (id?: string) => void;
-  rowAttributes?: Array<keyof Values>;
+  onHeadClick?: (column: keyof Row) => void;
   refForScroll?: RefObject<HTMLDivElement>;
   nothingFoundContent?: ReactNode;
-  /** @default 'table' */
-  renderMode?: 'table' | 'divs';
-  expandableRowComponent?: (item: Values, isOpen: boolean, close: () => void) => ReactNode;
 }
 
-export function FlexibleTable<Values extends Record<string, any>>({
-  data,
-  tweakStyles,
+export function FlexibleTable<Row extends ITableRow>({
   content,
   headerContent,
   config,
-  activeRows,
   enabledColumns,
+  isLoading = false,
   isHorizontallyScrollable = false,
-  isFirstColumnSticky = false,
   infinityScrollConfig,
-  uniqueField,
-  isLoading = false,
   renderMode = 'table',
-  onHeadClick,
-  onRowHover,
-  onRowClick,
   refForScroll,
-  rowAttributes,
   nothingFoundContent,
+  data,
   testId,
-  expandableRowComponent,
-}: IFlexibleTableProps<Values>): JSX.Element {
+  tweakStyles,
+  onHeadClick,
+  ...restProps
+}: IFlexibleTableProps<Row>): JSX.Element {
   const classes = useStyles({ theme: tweakStyles });
 
   const tweakTableRowStyles = useTweakStyles({
@@ -80,10 +79,19 @@ export function FlexibleTable<Values extends Record<string, any>>({
   const observer = useRef<IntersectionObserver>();
   const scrollRef = useRef<HTMLDivElement>(null);
 
-  const showedColumns = useMemo(
-    () => enabledColumns ?? Object.keys(config),
-    [enabledColumns, config],
-  );
+  const columns = useMemo(() => enabledColumns ?? Object.keys(config), [enabledColumns, config]);
+
+  const hasInfiniteScroll = isNotEmpty(infinityScrollConfig);
+  const { uniqueField, isFirstColumnSticky = false } = restProps;
+
+  const tableRowProps: Omit<IFlexibleTableRowProps<Row>, 'item' | 'index'> = {
+    ...restProps,
+    renderMode,
+    config,
+    columns,
+    isLoading,
+    tweakStyles: tweakTableRowStyles,
+  };
 
   const getDataScrollAttributeSetter = useCallback(
     (key: string, setter: (el: HTMLDivElement) => boolean) => (el?: HTMLDivElement) => {
@@ -97,14 +105,14 @@ export function FlexibleTable<Values extends Record<string, any>>({
   );
 
   // Когда таблица имеет скроллбар - добавляем аттрибут scrollable
-  const setHasScrollBarAttribute = useCallback(
-    getDataScrollAttributeSetter('scrollable', hasHorizontalScrollBar),
+  const setHasScrollBarAttribute = useMemo(
+    () => getDataScrollAttributeSetter('scrollable', hasHorizontalScrollBar),
     [getDataScrollAttributeSetter],
   );
 
   // Когда таблица проскроллена - добавляем аттрибут scrolled
-  const setIsScrolledAttribute = useCallback(
-    getDataScrollAttributeSetter('scrolled', (el) => el.scrollLeft > 0),
+  const setIsScrolledAttribute = useMemo(
+    () => getDataScrollAttributeSetter('scrolled', (el) => el.scrollLeft > 0),
     [getDataScrollAttributeSetter],
   );
 
@@ -122,31 +130,31 @@ export function FlexibleTable<Values extends Record<string, any>>({
   ]);
 
   const initIntersectionObserver = useCallback(
-    (node: HTMLDivElement) => {
-      if (infinityScrollConfig) {
-        if (
-          infinityScrollConfig.isLoading ||
-          infinityScrollConfig.activePage >= infinityScrollConfig.totalPages
-        ) {
-          return;
-        }
-
-        if (observer.current) {
-          observer.current.disconnect();
-        }
+    (node: HTMLDivElement | null) => {
+      if (
+        !hasInfiniteScroll ||
+        infinityScrollConfig.isLoading ||
+        infinityScrollConfig.activePage >= infinityScrollConfig.totalPages
+      ) {
+        return;
+      }
 
-        observer.current = new IntersectionObserver((entries) => {
-          if (entries[0].isIntersecting) {
-            infinityScrollConfig.onInfinityScroll(infinityScrollConfig.activePage + 1);
-          }
-        });
+      if (observer.current) {
+        observer.current.disconnect();
+      }
 
-        if (node) {
-          observer.current.observe(node);
+      observer.current = new IntersectionObserver((entries) => {
+        if (entries[0].isIntersecting) {
+          infinityScrollConfig.onInfinityScroll(infinityScrollConfig.activePage + 1);
         }
+      });
+
+      if (node) {
+        observer.current.observe(node);
       }
     },
     [
+      hasInfiniteScroll,
       infinityScrollConfig?.activePage,
       infinityScrollConfig?.totalPages,
       infinityScrollConfig?.onInfinityScroll,
@@ -174,7 +182,7 @@ export function FlexibleTable<Values extends Record<string, any>>({
       scrollContainer.removeEventListener('scroll', scrollHandler);
       window.removeEventListener('resize', resizeHandler);
     };
-  }, [scrollRef, setIsScrolledAttribute, setHasScrollBarAttribute]);
+  }, [scrollRef, isHorizontallyScrollable, setIsScrolledAttribute, setHasScrollBarAttribute]);
 
   const Table = renderMode === 'divs' ? 'div' : 'table';
   const TableHead = renderMode === 'divs' ? 'div' : 'thead';
@@ -192,18 +200,13 @@ export function FlexibleTable<Values extends Record<string, any>>({
       >
         <TableHead className={classes.head}>
           <TableRow className={classes.headerRow}>
-            {showedColumns.map((key, i) => {
+            {columns.map((key, i) => {
               const itemConfig = config?.[key];
-
-              let titleContent = itemConfig?.title ?? '';
-
-              if (itemConfig?.titleComponent !== undefined) {
-                const TitleComponent = itemConfig?.titleComponent as ITitleComponent<any>;
-                titleContent = <TitleComponent value={headerContent?.[key]} />;
-              }
+              const TitleComponent = itemConfig?.titleComponent;
 
               return (
                 <TableHeader
+                  key={key}
                   className={clsx(classes.header, {
                     [classes.headerSticky]: isFirstColumnSticky && i === 0,
                     [classes.headerSecond]: isFirstColumnSticky && i === 1,
@@ -214,10 +217,13 @@ export function FlexibleTable<Values extends Record<string, any>>({
                     maxWidth: itemConfig?.maxWidth,
                     textAlign: itemConfig?.titleAlign ?? 'left',
                   }}
-                  key={key as string}
                   onClick={() => onHeadClick?.(key)}
                 >
-                  {titleContent}
+                  {isNotEmpty(TitleComponent) ? (
+                    <TitleComponent value={headerContent?.[key]} />
+                  ) : (
+                    itemConfig?.title ?? ''
+                  )}
                 </TableHeader>
               );
             })}
@@ -226,19 +232,13 @@ export function FlexibleTable<Values extends Record<string, any>>({
         <TableBody className={classes.body}>
           {isLoading ? (
             indexMap(6, (i) => (
-              <TableRow className={classes.skeletonRow} key={i}>
-                {showedColumns.map((_, j) => (
-                  <TableCell className={classes.skeleton} key={j}>
-                    <Skeleton />
-                  </TableCell>
-                ))}
-              </TableRow>
+              <FlexibleTableRow {...tableRowProps} key={i} item={{} as Row} index={i} />
             ))
           ) : (
             <>
               {shouldShowNothingFound && (
                 <TableRow className={classes.nothingFoundRow}>
-                  <TableCell className={classes.nothingFound} colSpan={showedColumns.length}>
+                  <TableCell className={classes.nothingFound} colSpan={columns.length}>
                     {nothingFoundContent}
                   </TableCell>
                 </TableRow>
@@ -246,25 +246,16 @@ export function FlexibleTable<Values extends Record<string, any>>({
 
               {content.map((item, i) => (
                 <FlexibleTableRow
-                  item={item}
-                  uniqueField={uniqueField}
-                  isActive={activeRows?.includes(i) ?? false}
-                  isFirstColumnSticky={isFirstColumnSticky}
-                  onRowClick={onRowClick}
-                  onRowHover={onRowHover}
-                  enabledColumns={enabledColumns}
-                  config={config}
+                  {...tableRowProps}
                   key={isNotEmpty(uniqueField) ? item[uniqueField] : i}
-                  rowAttributes={rowAttributes}
-                  renderMode={renderMode}
-                  tweakStyles={tweakTableRowStyles}
-                  expandableRowComponent={expandableRowComponent}
+                  item={item}
+                  index={i}
                 />
               ))}
 
-              {infinityScrollConfig !== undefined && !infinityScrollConfig.isLastPage && (
+              {hasInfiniteScroll && !infinityScrollConfig.isLastPage && (
                 <TableRow className={classes.loaderRow}>
-                  <TableCell className={classes.loaderCell} colSpan={showedColumns.length}>
+                  <TableCell className={classes.loaderCell} colSpan={columns.length}>
                     <div ref={initIntersectionObserver} className={classes.loader}>
                       <ThemedPreloader type="dots" />
                     </div>

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

@@ -27,6 +27,12 @@ export const useStyles = createThemedStyles('FlexibleTableCell', {
   second: {
     paddingLeft: STICKY_SHADOW_PADDING,
   },
+
+  loading: {},
+
+  skeleton: {
+    height: 21,
+  },
 });
 
 export type IFlexibleTableCellStyles = ITweakStyles<typeof useStyles>;