@true-engineering/true-react-common-ui-kit 2.6.0 → 3.0.0-alpha.0

package/src/components/FiltersPane/components/FilterWithPeriod/index.ts

@@ -1,2 +1,2 @@
 export * from './FilterWithPeriod';
-export type { FilterWithPeriodStyles } from './FilterWithPeriod.styles';
+export type { IFilterWithPeriodStyles } from './FilterWithPeriod.styles';

package/src/components/FiltersPane/components/FilterWrapper/FilterWrapper.styles.ts

@@ -1,8 +1,8 @@
-import { colors } from '../../../../theme';
-import { ComponentStyles } from '../../../../types';
+import { colors, createThemedStyles, ITweakStyles } from '../../../../theme';
+import { IFilterValueViewStyles } from '../FilterValueView';
 import { FILTER_HEIGHT } from '../../FiltersPane.styles';
 
-export const styles = {
+export const useStyles = createThemedStyles('FilterWrapper', {
   root: {
     position: 'relative',
     transition: '0.25s ease-in-out',
@@ -105,6 +105,11 @@ export const styles = {
   'dropdown-enter-active': { extend: 'animationStart' },
   'dropdown-exit-active': { extend: 'animationStart' },
   'dropdown-exit': { extend: 'animationEnd' },
-};
-
-export type FilterWrapperStyles = ComponentStyles<typeof styles>;
+});
+
+export type IFilterWrapperStyles = ITweakStyles<
+  typeof useStyles,
+  {
+    tweakValueView: IFilterValueViewStyles;
+  }
+>;

package/src/components/FiltersPane/components/FilterWrapper/FilterWrapper.tsx

@@ -1,37 +1,47 @@
 import { useState, useRef, RefObject } from 'react';
 import { CSSTransition } from 'react-transition-group';
 import clsx from 'clsx';
-import { useTheme } from '../../../../hooks';
+import { addDataTestId, getTestId } from '@true-engineering/true-react-platform-helpers';
+import { addDataAttributes } from '../../../../helpers';
+import { useTweakStyles } from '../../../../hooks';
+import { ICommonProps } from '../../../../types';
 import { Icon } from '../../../Icon';
 import { ConfigItem, IFilterLocaleKey, IPartialFilterLocale } from '../../types';
 import { Filter } from '../Filter';
 import { FilterValueView } from '../FilterValueView';
-import { FilterWrapperStyles, styles } from './FilterWrapper.styles';
+import { useStyles, IFilterWrapperStyles } from './FilterWrapper.styles';
 
-export interface IFilterWrapperProps<Values, Key extends keyof Values> {
-  tweakStyles?: FilterWrapperStyles;
+export interface IFilterWrapperProps<Values, Key extends keyof Values>
+  extends ICommonProps<IFilterWrapperStyles> {
   filter: ConfigItem<Values[Key]>;
   value?: Values[Key];
-  onChange: <V>(value: V) => void;
   isDisabled?: boolean;
   localeKey?: IFilterLocaleKey;
   locale?: IPartialFilterLocale;
-  testId?: string;
   filtersPaneRef: RefObject<HTMLDivElement> | null;
+  onChange<V>(value: V): void;
 }
 
 export function FilterWrapper<Values, Key extends keyof Values>({
   filter,
   value,
   isDisabled,
-  onChange,
   locale,
   localeKey,
+  data,
   testId,
   filtersPaneRef,
   tweakStyles,
+  onChange,
 }: IFilterWrapperProps<Values, Key>): JSX.Element {
-  const { classes } = useTheme('FilterWrapper', styles, tweakStyles);
+  const classes = useStyles({ theme: tweakStyles });
+
+  const tweakFilterValueViewStyles = useTweakStyles({
+    tweakStyles,
+    className: 'tweakValueView',
+    currentComponentName: 'FilterWrapper',
+  });
+
   const [isOpen, setIsOpen] = useState(false);
   const refItem = useRef<HTMLDivElement>(null);
 
@@ -86,7 +96,8 @@ export function FilterWrapper<Values, Key extends keyof Values>({
         [classes.boolean]: isBoolean,
         [classes.disabled]: isDisabled,
       })}
-      data-testid={testId}
+      {...addDataTestId(testId)}
+      {...addDataAttributes(data)}
     >
       <div
         ref={refItem}
@@ -98,7 +109,14 @@ export function FilterWrapper<Values, Key extends keyof Values>({
         <div className={classes.name}>{filter.name}</div>
         {!isBoolean && value !== undefined && value !== null && (
           <div className={classes.value}>
-            <FilterValueView value={value} filter={filter} localeKey={localeKey} locale={locale} />
+            <FilterValueView
+              value={value}
+              filter={filter}
+              localeKey={localeKey}
+              locale={locale}
+              testId={getTestId(testId, 'value')}
+              tweakStyles={tweakFilterValueViewStyles}
+            />
           </div>
         )}
         {!isBoolean && (

package/src/components/FiltersPane/components/FilterWrapper/index.ts

@@ -1,2 +1,2 @@
 export * from './FilterWrapper';
-export type { FilterWrapperStyles } from './FilterWrapper.styles';
+export type { IFilterWrapperStyles } from './FilterWrapper.styles';

package/src/components/FiltersPane/components/FiltersPaneSearch/FiltersPaneSearch.styles.ts

@@ -1,9 +1,10 @@
 import { rgba } from '../../../../helpers';
-import { colors, dimensions } from '../../../../theme';
-import { ComponentStyles } from '../../../../types';
+import { colors, createThemedStyles, dimensions, ITweakStyles } from '../../../../theme';
+import { ISearchInputStyles } from '../../../SearchInput';
+import { ISelectStyles } from '../../../Select';
 import { FILTER_HEIGHT } from '../../FiltersPane.styles';
 
-export const styles = {
+export const useStyles = createThemedStyles('FiltersPaneSearch', {
   root: {
     display: 'flex',
     position: 'relative',
@@ -78,32 +79,38 @@ export const styles = {
   active: {
     fontWeight: 'bold',
   },
+});
 
-  tweakSearchInput: {
-    tweakInput: {
-      inputWrapper: {
-        backgroundColor: 'transparent',
-        border: 'none',
-        height: FILTER_HEIGHT - 2,
-        fontSize: 14,
-        minWidth: 140,
-      },
+export const searchInputStyles: ISearchInputStyles = {
+  tweakInput: {
+    inputWrapper: {
+      backgroundColor: 'transparent',
+      border: 'none',
+      height: FILTER_HEIGHT - 2,
+      fontSize: 14,
+      minWidth: 140,
+    },
 
-      focused: {
-        backgroundColor: 'transparent',
-        border: 'none',
-      },
+    focused: {
+      backgroundColor: 'transparent',
+      border: 'none',
     },
   },
+};
 
-  tweakSelect: {
-    root: {
-      borderRadius: 0,
-      borderBottomLeftRadius: 6,
-      borderBottomRightRadius: 6,
-      boxShadow: 'none',
-    },
+export const selectStyles: ISelectStyles = {
+  root: {
+    borderRadius: 0,
+    borderBottomLeftRadius: 6,
+    borderBottomRightRadius: 6,
+    boxShadow: 'none',
   },
 };
 
-export type FiltersPaneSearchStyles = ComponentStyles<typeof styles>;
+export type IFiltersPaneSearchStyles = ITweakStyles<
+  typeof useStyles,
+  {
+    tweakSearchInput: ISearchInputStyles;
+    tweakSelect: ISelectStyles;
+  }
+>;

package/src/components/FiltersPane/components/FiltersPaneSearch/FiltersPaneSearch.tsx

@@ -1,24 +1,27 @@
 import { useRef, useState, useMemo, ReactNode } from 'react';
 import clsx from 'clsx';
 import { addDataAttributes } from '../../../../helpers';
-import { useTheme, useOnClickOutside, useTweakStyles } from '../../../../hooks';
+import { useOnClickOutside, useTweakStyles } from '../../../../hooks';
 import { ICommonProps } from '../../../../types';
 import { Icon } from '../../../Icon';
 import { SearchInput } from '../../../SearchInput';
 import { getLocale } from '../../helpers';
 import { IFilterLocaleKey, IFiltersPaneSearchPayload, IPartialFilterLocale } from '../../types';
 import { FilterSelect, IFilterSelectProps } from '../FilterSelect';
-import { FiltersPaneSearchStyles, styles } from './FiltersPaneSearch.styles';
+import {
+  useStyles,
+  IFiltersPaneSearchStyles,
+  searchInputStyles,
+  selectStyles,
+} from './FiltersPaneSearch.styles';
 
-export interface IFiltersPaneSearchProps<Value> extends ICommonProps {
-  tweakStyles?: FiltersPaneSearchStyles;
+export interface IFiltersPaneSearchProps<Value> extends ICommonProps<IFiltersPaneSearchStyles> {
   field?: Value;
   fields?: Value[];
   value?: string;
   onChange: (v: IFiltersPaneSearchPayload<Value>) => void;
   localeKey?: IFilterLocaleKey;
   locale?: IPartialFilterLocale;
-  testId?: string;
   maxLength?: number;
   getValueView?: (value: Value) => ReactNode;
   getValueId?: (value: Value) => string;
@@ -50,7 +53,21 @@ export function FiltersPaneSearch<Value>({
   tweakStyles,
   testId,
 }: IFiltersPaneSearchProps<Value>): JSX.Element {
-  const { classes, componentStyles } = useTheme('FiltersPaneSearch', styles, tweakStyles);
+  const classes = useStyles({ theme: tweakStyles });
+
+  const tweakSearchInputStyles = useTweakStyles({
+    innerStyles: searchInputStyles,
+    tweakStyles,
+    className: 'tweakSearchInput',
+    currentComponentName: 'FiltersPaneSearch',
+  });
+
+  const tweakSelectStyles = useTweakStyles({
+    innerStyles: selectStyles,
+    tweakStyles,
+    className: 'tweakSelect',
+    currentComponentName: 'FiltersPaneSearch',
+  });
 
   const [isInputFocused, setIsInputFocused] = useState(false);
   const [isOpen, setIsOpen] = useState(false);
@@ -81,10 +98,6 @@ export function FiltersPaneSearch<Value>({
     [field],
   );
 
-  const tweakSearchInputStyles = useTweakStyles(componentStyles, tweakStyles, 'tweakSearchInput');
-
-  const tweakSelectStyles = useTweakStyles(componentStyles, tweakStyles, 'tweakSelect');
-
   return (
     <div
       className={clsx(classes.root, {

package/src/components/FiltersPane/components/FiltersPaneSearch/index.ts

@@ -1,2 +1,2 @@
 export * from './FiltersPaneSearch';
-export type { FiltersPaneSearchStyles } from './FiltersPaneSearch.styles';
+export type { IFiltersPaneSearchStyles } from './FiltersPaneSearch.styles';

package/src/components/FiltersPane/helpers.ts

@@ -20,7 +20,7 @@ export const getSelectLocale = (
   custom2?: Partial<ISelectLocale>,
 ): ISelectLocale => merge({}, SelectLocales[key], custom, custom2);
 
-export const sortValues = (arr: Array<number | undefined>) =>
+export const sortValues = (arr: Array<number | undefined>): Array<number | undefined> =>
   arr.includes(undefined) ? arr : (arr as number[]).sort((a, b) => (a < b ? -1 : 1));
 
 export const defaultConvertFunction = (val: unknown): string => String(val);

package/src/components/FiltersPane/index.ts

@@ -1,5 +1,5 @@
 export * from './FiltersPane';
+export type { IFiltersPaneStyles } from './FiltersPane.styles';
 export * from './types';
 // TODO : подумать над тем чтобы вынести это все наружу
 export * from './components';
-export type { FiltersPaneStyles } from './FiltersPane.styles';

package/src/components/FiltersPane/types.ts

@@ -152,5 +152,5 @@ export type ISelectLocaleKey = keyof typeof SelectLocales;
 
 export type IFilterWithDateDatePickerProps = Omit<
   IDatePickerProps,
-  'onChange' | 'value' | 'locale' | 'months' | 'selectedDate'
+  'onChange' | 'value' | 'locale' | 'months' | 'selectedDate' | 'tweakStyles' // TODO: rethink
 >;

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

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

package/src/components/Flag/Flag.tsx

@@ -1,18 +1,16 @@
 import { FC } from 'react';
 import { hasFlag } from 'country-flag-icons';
 import Flags from 'country-flag-icons/react/3x2';
-import { useTheme } from '../../hooks';
 import { ICommonProps } from '../../types';
 import { Icon } from '../Icon';
-import { FlagStyles, styles } from './Flag.styles';
+import { useStyles, IFlagStyles } from './Flag.styles';
 
-export interface IFlagProps extends ICommonProps {
-  tweakStyles?: FlagStyles;
+export interface IFlagProps extends Pick<ICommonProps<IFlagStyles>, 'tweakStyles'> {
   countryCode?: string;
 }
 
 export const Flag: FC<IFlagProps> = ({ countryCode = '', tweakStyles }) => {
-  const { classes } = useTheme('Flag', styles, tweakStyles);
+  const classes = useStyles({ theme: tweakStyles });
   const CC = countryCode.toUpperCase();
 
   const TheFlag = hasFlag(CC)

package/src/components/Flag/index.ts

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

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

@@ -2,6 +2,7 @@ import { FC } from 'react';
 import { ComponentStory } from '@storybook/react';
 import { FlexibleTable } from './FlexibleTable';
 import { FlexibleTableConfigType } from './types';
+import { IFlexibleTableStyles } from './FlexibleTable.styles';
 
 export default {
   title: 'Table/FlexibleTable',
@@ -303,6 +304,16 @@ const content = [
   },
 ];
 
+const tweak: IFlexibleTableStyles = {
+  tweakTableRow: {
+    tweakTableCell: {
+      root: {
+        color: 'red',
+      },
+    },
+  },
+};
+
 const Template: ComponentStory<typeof FlexibleTable<ITableContent>> = (args) => (
   <FlexibleTable<ITableContent>
     {...args}
@@ -312,6 +323,7 @@ const Template: ComponentStory<typeof FlexibleTable<ITableContent>> = (args) =>
         <div onClick={close}>всем привет :) {item.contractCode}</div>
       ) : null
     }
+    tweakStyles={tweak}
     content={content}
     config={config}
   />

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

@@ -1,10 +1,10 @@
 import { rgba } from '../../helpers';
-import { colors } from '../../theme';
-import { ComponentStyles } from '../../types';
+import { colors, ITweakStyles, createThemedStyles } from '../../theme';
+import { IFlexibleTableRowStyles } from './components';
 
-const STICKY_SHADOW_PADDING = 12;
+export const STICKY_SHADOW_PADDING = 12;
 
-export const styles = {
+export const useStyles = createThemedStyles('FlexibleTable', {
   root: {
     position: 'relative',
     width: '100%',
@@ -12,10 +12,6 @@ export const styles = {
     borderSpacing: 0,
   },
 
-  row: {
-    position: 'relative',
-  },
-
   scroll: {
     overflow: 'auto',
     /*
@@ -47,30 +43,8 @@ export const styles = {
   },
 
   headerRow: {
-    verticalAlign: 'bottom',
-  },
-
-  activeRow: {},
-
-  cell: {
     position: 'relative',
-    boxSizing: 'content-box',
-    padding: [14, 7, 14, 7],
-    fontSize: 14,
-    lineHeight: 1.42,
-    zIndex: 5,
-    verticalAlign: 'top',
-  },
-
-  cellSticky: {
-    zIndex: 19,
-    paddingLeft: 24,
-    paddingRight: 12,
-    transition: ['box-shadow', '0.25s', 'ease-in-out'],
-  },
-
-  cellSecond: {
-    paddingLeft: STICKY_SHADOW_PADDING,
+    verticalAlign: 'bottom',
   },
 
   header: {
@@ -122,10 +96,9 @@ export const styles = {
   headerSecond: {
     paddingLeft: STICKY_SHADOW_PADDING,
   },
+});
 
-  editableRow: {
-    cursor: 'pointer',
-  },
-};
-
-export type FlexibleTableStyles = ComponentStyles<typeof styles>;
+export type IFlexibleTableStyles = ITweakStyles<
+  typeof useStyles,
+  { tweakTableRow: IFlexibleTableRowStyles }
+>;

package/src/components/FlexibleTable/FlexibleTable.tsx

@@ -1,16 +1,16 @@
-import { ReactNode, RefObject, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { ReactNode, RefObject, useCallback, useEffect, useRef, useState } from 'react';
 import clsx from 'clsx';
 import { addDataAttributes } from '../../helpers';
-import { useTheme } from '../../hooks';
+import { useTweakStyles } from '../../hooks';
 import { ICommonProps } from '../../types';
 import { ThemedPreloader } from '../ThemedPreloader';
-import { TableRow } from './components';
+import { FlexibleTableRow } from './components';
 import { FlexibleTableConfigType, IInfinityScrollConfig, ITitleComponent } from './types';
-import { FlexibleTableStyles, styles } from './FlexibleTable.styles';
+import { useStyles, IFlexibleTableStyles } from './FlexibleTable.styles';
 
 // TODO: Заменить Record<string, any> на Record<string, unknown>
-export interface IFlexibleTableProps<Values extends Record<string, any>> extends ICommonProps {
-  tweakStyles?: FlexibleTableStyles;
+export interface IFlexibleTableProps<Values extends Record<string, any>>
+  extends ICommonProps<IFlexibleTableStyles> {
   content: Values[];
   headerContent?: Partial<Record<keyof Values, any>>;
   enabledColumns?: Array<keyof Values>;
@@ -28,7 +28,6 @@ export interface IFlexibleTableProps<Values extends Record<string, any>> extends
   refForScroll?: RefObject<HTMLDivElement>;
   nothingFoundContent?: ReactNode;
   expandableRowComponent?: (item: Values, isOpen: boolean, close: () => void) => ReactNode;
-  testId?: string;
 }
 
 export function FlexibleTable<Values extends Record<string, any>>({
@@ -52,13 +51,19 @@ export function FlexibleTable<Values extends Record<string, any>>({
   testId,
   expandableRowComponent,
 }: IFlexibleTableProps<Values>): JSX.Element {
-  const { classes } = useTheme('FlexibleTable', styles, tweakStyles);
+  const classes = useStyles({ theme: tweakStyles });
 
-  const observer = useRef<IntersectionObserver>();
-  const scrollRef = useRef<HTMLDivElement>(null);
+  const tweakTableRowStyles = useTweakStyles({
+    tweakStyles,
+    className: 'tweakTableRow',
+    currentComponentName: 'FlexibleTable',
+  });
 
   const [isHorizontallyScrolled, setIsHorizontallyScrolled] = useState(false);
 
+  const observer = useRef<IntersectionObserver>();
+  const scrollRef = useRef<HTMLDivElement>(null);
+
   const initIntersectionObserver = useCallback(
     (node: HTMLDivElement) => {
       if (infinityScrollConfig) {
@@ -91,20 +96,6 @@ export function FlexibleTable<Values extends Record<string, any>>({
     ],
   );
 
-  const tableRowClasses = useMemo(
-    () => ({
-      root: classes.row,
-      active: classes.activeRow,
-      editable: classes.editableRow,
-      cell: {
-        root: classes.cell,
-        sticky: classes.cellSticky,
-        second: classes.cellSecond,
-      },
-    }),
-    [tweakStyles],
-  );
-
   useEffect(() => {
     const scrollContainer = (refForScroll ?? scrollRef).current;
     if (scrollContainer === null || !isHorizontallyScrollable || !isFirstColumnSticky) {
@@ -127,7 +118,7 @@ export function FlexibleTable<Values extends Record<string, any>>({
     >
       <table className={classes.root} data-testid={testId} {...addDataAttributes(data)}>
         <thead>
-          <tr className={clsx(classes.row, classes.headerRow)}>
+          <tr className={classes.headerRow}>
             {(enabledColumns || Object.keys(content[0])).map((key, idx) => {
               const itemConfig = config?.[key];
 
@@ -152,7 +143,7 @@ export function FlexibleTable<Values extends Record<string, any>>({
                     textAlign: itemConfig?.titleAlign ?? 'left',
                   }}
                   key={key as string}
-                  onClick={() => (onHeadClick ? onHeadClick(key) : undefined)}
+                  onClick={() => onHeadClick?.(key)}
                 >
                   {titleContent}
                 </th>
@@ -173,7 +164,7 @@ export function FlexibleTable<Values extends Record<string, any>>({
             )}
 
           {content.map((item, idx) => (
-            <TableRow
+            <FlexibleTableRow
               item={item}
               uniqueField={uniqueField}
               isActive={activeRows?.includes(idx) ?? false}
@@ -182,9 +173,9 @@ export function FlexibleTable<Values extends Record<string, any>>({
               onRowHover={onRowHover}
               enabledColumns={enabledColumns}
               config={config}
-              classes={tableRowClasses}
               key={uniqueField ? item[uniqueField] : idx}
               rowAttributes={rowAttributes}
+              tweakStyles={tweakTableRowStyles}
               expandableRowComponent={expandableRowComponent}
             />
           ))}

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

@@ -0,0 +1,28 @@
+import { getTransition } from '@true-engineering/true-react-platform-helpers';
+import { ITweakStyles, createThemedStyles } from '../../../../theme';
+import { STICKY_SHADOW_PADDING } from '../../FlexibleTable.styles';
+
+export const useStyles = createThemedStyles('FlexibleTableCell', {
+  root: {
+    position: 'relative',
+    boxSizing: 'content-box',
+    padding: [14, 7],
+    fontSize: 14,
+    lineHeight: 1.42,
+    zIndex: 5,
+    verticalAlign: 'top',
+  },
+
+  sticky: {
+    zIndex: 19,
+    paddingLeft: 24,
+    paddingRight: 12,
+    ...getTransition(['box-shadow']),
+  },
+
+  second: {
+    paddingLeft: STICKY_SHADOW_PADDING,
+  },
+});
+
+export type IFlexibleTableCellStyles = ITweakStyles<typeof useStyles>;

package/src/components/FlexibleTable/components/{TableValue/TableValue.tsx → FlexibleTableCell/FlexibleTableCell.tsx}

@@ -4,36 +4,35 @@ import { format } from 'date-fns';
 import type { ICommonProps } from '../../../../types';
 import { DEFAULT_DATE_FORMAT } from '../../constants';
 import type { FlexibleTableConfigType } from '../../types';
+import { useStyles, IFlexibleTableCellStyles } from './FlexibleTableCell.styles';
 
-export interface ITableValueProps<Values extends Record<string, any>> extends ICommonProps {
+export interface IFlexibleTableCellProps<Values extends Record<string, any>>
+  extends Pick<ICommonProps<IFlexibleTableCellStyles>, 'tweakStyles'> {
   item: Values;
   columnName: keyof Values;
   config?: FlexibleTableConfigType<Values>;
-  classes: {
-    root: string;
-    sticky: string;
-    second: string;
-  };
   isFocusedRow?: boolean;
   isSecond?: boolean;
   isSticky?: boolean;
   isNestedComponentExpanded: boolean;
   isRowNestedComponentExpanded: boolean;
-  onSetNestedComponent: (component?: ReactNode) => void;
+  onSetNestedComponent(component?: ReactNode): void;
 }
 
-function TableValue<Values extends Record<string, any>>({
+function FlexibleTableCell<Values extends Record<string, any>>({
   item,
   columnName,
   config,
-  classes,
   isFocusedRow,
   isSecond,
   isSticky,
   isNestedComponentExpanded,
   isRowNestedComponentExpanded,
+  tweakStyles,
   onSetNestedComponent,
-}: ITableValueProps<Values>): JSX.Element {
+}: IFlexibleTableCellProps<Values>): JSX.Element {
+  const classes = useStyles({ theme: tweakStyles });
+
   const itemConfig = config?.[columnName];
   const value = item[columnName];
   let content = null;
@@ -57,7 +56,7 @@ function TableValue<Values extends Record<string, any>>({
   return (
     <td
       key={columnName as string}
-      className={clsx(classes.root, isSticky && classes.sticky, isSecond && classes.second)}
+      className={clsx(classes.root, { [classes.sticky]: isSticky, [classes.second]: isSecond })}
       style={{
         textAlign: itemConfig?.cellAlign,
         position: isSticky ? 'sticky' : itemConfig?.position,
@@ -71,4 +70,4 @@ function TableValue<Values extends Record<string, any>>({
   );
 }
 
-export default TableValue;
+export default FlexibleTableCell;

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

@@ -0,0 +1,2 @@
+export * from './FlexibleTableCell';
+export type { IFlexibleTableCellStyles } from './FlexibleTableCell.styles';