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

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

@@ -0,0 +1,19 @@
+import { ITweakStyles, createThemedStyles } from '../../../../theme';
+import { IFlexibleTableCellStyles } from '../FlexibleTableCell';
+
+export const useStyles = createThemedStyles('FlexibleTableRow', {
+  root: {
+    position: 'relative',
+  },
+
+  active: {},
+
+  editable: {
+    cursor: 'pointer',
+  },
+});
+
+export type IFlexibleTableRowStyles = ITweakStyles<
+  typeof useStyles,
+  { tweakTableCell: IFlexibleTableCellStyles }
+>;

package/src/components/FlexibleTable/components/{TableRow/TableRow.tsx → FlexibleTableRow/FlexibleTableRow.tsx}

@@ -1,12 +1,15 @@
 import { ReactNode, useState, memo } from 'react';
 import clsx from 'clsx';
 import { addDataAttributes } from '../../../../helpers';
+import { useTweakStyles } from '../../../../hooks';
 import { ICommonProps, IDataAttributes } from '../../../../types';
 import { FlexibleTableConfigType, INestedComponent } from '../../types';
-import TableValue from '../TableValue/TableValue';
+import FlexibleTableCell from '../FlexibleTableCell/FlexibleTableCell';
+import { useStyles, IFlexibleTableRowStyles } from './FlexibleTableRow.styles';
 
 // TODO: Заменить Record<string, any> на Record<string, unknown>
-export interface ITableRowProps<Values extends Record<string, any>> extends ICommonProps {
+export interface IFlexibleTableRowProps<Values extends Record<string, any>>
+  extends Pick<ICommonProps<IFlexibleTableRowStyles>, 'tweakStyles'> {
   item: Values;
   uniqueField?: keyof Values;
   isFirstColumnSticky?: boolean;
@@ -14,37 +17,33 @@ export interface ITableRowProps<Values extends Record<string, any>> extends ICom
   config?: FlexibleTableConfigType<Values>;
   enabledColumns?: Array<keyof Values>;
   rowAttributes?: Array<keyof Values>;
-  expandableRowComponent?: (item: Values, isOpen: boolean, close: () => void) => ReactNode;
+  expandableRowComponent?(item: Values, isOpen: boolean, close: () => void): ReactNode;
   // TODO: Заменить string на Generic Values[uniqueField]
-  onRowHover?: (id?: string) => void;
-  onRowClick?: (id: string) => void;
-  // чтобы не перерендеривать стили для каждой строчки / ячейки
-  // TODO: Можно лучше через Classes
-  classes: {
-    root: string;
-    active: string;
-    editable: string;
-    cell: {
-      root: string;
-      sticky: string;
-      second: string;
-    };
-  };
+  onRowHover?(id?: string): void;
+  onRowClick?(id: string): void;
 }
 
-function TableRowInner<Values extends Record<string, any>>({
+function FlexibleTableRowInner<Values extends Record<string, any>>({
   item,
   uniqueField,
   isFirstColumnSticky,
   isActive,
   config,
   enabledColumns,
-  onRowHover,
-  onRowClick,
   rowAttributes,
+  tweakStyles,
   expandableRowComponent,
-  classes,
-}: ITableRowProps<Values>): JSX.Element {
+  onRowHover,
+  onRowClick,
+}: IFlexibleTableRowProps<Values>): JSX.Element {
+  const classes = useStyles({ theme: tweakStyles });
+
+  const tweakTableCellStyles = useTweakStyles({
+    tweakStyles,
+    className: 'tweakTableCell',
+    currentComponentName: 'FlexibleTableRow',
+  });
+
   const [isFocused, setFocused] = useState(false);
   const [nestedComponent, setNestedComponent] = useState<INestedComponent>({
     isOpen: false,
@@ -122,14 +121,14 @@ function TableRowInner<Values extends Record<string, any>>({
         })}
       >
         {items.map((key, idx) => (
-          <TableValue
+          <FlexibleTableCell
             columnName={key}
             isSticky={isFirstColumnSticky && idx === 0}
             isSecond={isFirstColumnSticky && idx === 1}
             key={key as string}
             item={item}
             config={config}
-            classes={classes.cell}
+            tweakStyles={tweakTableCellStyles}
             isFocusedRow={isFocused}
             isNestedComponentExpanded={nestedComponent.isOpen && nestedComponent.cellKey === key}
             isRowNestedComponentExpanded={
@@ -149,4 +148,4 @@ function TableRowInner<Values extends Record<string, any>>({
   );
 }
 
-export const TableRow = memo(TableRowInner) as typeof TableRowInner;
+export const FlexibleTableRow = memo(FlexibleTableRowInner) as typeof FlexibleTableRowInner;

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

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

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

@@ -1,2 +1,2 @@
-export * from './TableRow';
-export * from './TableValue';
+export * from './FlexibleTableRow';
+export * from './FlexibleTableCell';

package/src/components/FlexibleTable/index.ts

@@ -1,3 +1,4 @@
 export * from './FlexibleTable';
 export * from './types';
-export type { FlexibleTableStyles } from './FlexibleTable.styles';
+export type { IFlexibleTableStyles } from './FlexibleTable.styles';
+export type { IFlexibleTableCellStyles, IFlexibleTableRowStyles } from './components';

package/src/components/Icon/Icon.styles.ts

@@ -1,10 +1,10 @@
-import { ComponentStyles } from '../../types';
+import { ITweakStyles, createThemedStyles } from '../../theme';
 
-export const styles = {
+export const useStyles = createThemedStyles('Icon', {
   root: {
     display: 'flex',
     alignItems: 'center',
   },
-};
+});
 
-export type IconStyles = ComponentStyles<typeof styles>;
+export type IIconStyles = ITweakStyles<typeof useStyles>;

package/src/components/Icon/Icon.tsx

@@ -1,22 +1,21 @@
 import { FC } from 'react';
+import { addDataTestId } from '@true-engineering/true-react-platform-helpers';
 import { addDataAttributes } from '../../helpers';
-import { useTheme } from '../../hooks';
 import { ICommonProps } from '../../types';
 import { ComplexIconBoilerplate, IconBoilerplate } from './components';
 import { isComplexIcon } from './helpers';
 import { IIconType } from './types';
-import { IconStyles, styles } from './Icon.styles';
+import { useStyles, IIconStyles } from './Icon.styles';
 
-export interface IIconProps extends ICommonProps {
-  tweakStyles?: IconStyles;
+export interface IIconProps extends ICommonProps<IIconStyles> {
   type: IIconType;
 }
 
-export const Icon: FC<IIconProps> = ({ type, data, tweakStyles }) => {
-  const { classes } = useTheme('Icon', styles, tweakStyles);
+export const Icon: FC<IIconProps> = ({ type, data, testId, tweakStyles }) => {
+  const classes = useStyles({ theme: tweakStyles });
 
   return (
-    <div className={classes.root} {...addDataAttributes(data)}>
+    <div className={classes.root} {...addDataTestId(testId)} {...addDataAttributes(data)}>
       {isComplexIcon(type) ? (
         <ComplexIconBoilerplate type={type} />
       ) : (

package/src/components/Icon/components/ComplexIconBoilerplate/ComplexIconBoilerplate.tsx

@@ -1,5 +1,5 @@
 import { FC, useContext, useMemo } from 'react';
-import { ThemeContext } from '../../../../hooks';
+import { ThemeContext } from '../../../../theme';
 import { complexIcons } from '../../complexIcons';
 import { IComplexIcon } from '../../types';
 

package/src/components/Icon/components/IconBolerplate/IconBoilerplate.tsx

@@ -1,5 +1,5 @@
 import { FC, useContext, useMemo } from 'react';
-import { ThemeContext } from '../../../../hooks';
+import { ThemeContext } from '../../../../theme';
 import { iconsList as commonIcons } from '../../icons-list';
 import { ICommonIcon } from '../../types';
 

package/src/components/Icon/helpers.ts

@@ -6,4 +6,4 @@ export const isComplexIcon = (type: IIconType): type is IComplexIcon => type in
 /**
  * Эта функция позволяет корректно определить ключи в типе
  */
-export const checkIcons = <P extends string>(ico: Record<P, ISvgIcon>) => ico;
+export const checkIcons = <P extends string>(ico: Record<P, ISvgIcon>): Record<P, ISvgIcon> => ico;

package/src/components/Icon/index.ts

@@ -1,4 +1,4 @@
 export * from './Icon';
 export * from './types';
 export { iconsList } from './icons-list';
-export type { IconStyles } from './Icon.styles';
+export type { IIconStyles } from './Icon.styles';

package/src/components/IncrementInput/IncrementInput.styles.ts

@@ -1,10 +1,10 @@
-import { colors, dimensions } from '../../theme';
-import { ComponentStyles } from '../../types';
+import { colors, dimensions, ITweakStyles, createThemedStyles } from '../../theme';
+import { IInputStyles } from '../Input';
 
 export const BUTTONS_WIDTH = 36;
 export const BUTTONS_GAP = 2;
 
-export const styles = {
+export const useStyles = createThemedStyles('IncrementInput', {
   root: {
     display: 'flex',
     alignItems: 'center',
@@ -60,18 +60,18 @@ export const styles = {
   },
 
   errorButton: {},
+});
 
-  tweakInput: {
-    input: {
-      '&:not($withControls)': {
-        paddingRight: BUTTONS_WIDTH + BUTTONS_GAP,
-      },
-    },
-
-    controls: {
+export const inputStyles: IInputStyles = {
+  input: {
+    '&:not($withControls)': {
       paddingRight: BUTTONS_WIDTH + BUTTONS_GAP,
     },
   },
+
+  controls: {
+    paddingRight: BUTTONS_WIDTH + BUTTONS_GAP,
+  },
 };
 
-export type IncrementInputStyles = ComponentStyles<typeof styles>;
+export type IIncrementInputStyles = ITweakStyles<typeof useStyles, { tweakInput: IInputStyles }>;

package/src/components/IncrementInput/IncrementInput.tsx

@@ -1,13 +1,16 @@
-import { FC } from 'react';
-import { isNumberInteger } from '@true-engineering/true-react-platform-helpers';
+import { FC, useEffect } from 'react';
+import clsx from 'clsx';
+import { addDataTestId, isNumberInteger } from '@true-engineering/true-react-platform-helpers';
 import { addDataAttributes, getNumberInRange, getNumberLength } from '../../helpers';
-import { useTheme, useTweakStyles } from '../../hooks';
+import { useTweakStyles } from '../../hooks';
+import { ICommonProps } from '../../types';
+import { Icon } from '../Icon';
 import { INumberInputProps, NumberInput } from '../NumberInput';
-import { ChangeButton } from './components';
-import { IncrementInputStyles, styles } from './IncrementInput.styles';
+import { useStyles, IIncrementInputStyles, inputStyles } from './IncrementInput.styles';
 
-export interface IIncrementInputProps extends Omit<INumberInputProps, 'canBeFloat' | 'precision'> {
-  tweakStyles?: IncrementInputStyles;
+export interface IIncrementInputProps
+  extends Omit<INumberInputProps, 'canBeFloat' | 'precision' | 'tweakStyles'>,
+    ICommonProps<IIncrementInputStyles> {
   step?: number;
 }
 
@@ -19,14 +22,30 @@ export const IncrementInput: FC<IIncrementInputProps> = ({
   step = 1,
   intPartPrecision,
   data,
+  testId,
   tweakStyles,
+  isDisabled,
+  isReadonly,
+  isInvalid,
   ...props
 }) => {
-  if (!isNumberInteger(step)) {
-    console.error('Параметр step должен быть целым числом');
-  }
+  const tweakInputStyles = useTweakStyles({
+    innerStyles: inputStyles,
+    tweakStyles,
+    className: 'tweakInput',
+    currentComponentName: 'IncrementInput',
+  });
 
-  const { classes, componentStyles } = useTheme('IncrementInput', styles, tweakStyles);
+  const classes = useStyles({ theme: tweakStyles });
+
+  const isIncreaseDisabled =
+    isDisabled ||
+    isReadonly ||
+    (intPartPrecision !== undefined && getNumberLength((value ?? 0) + step) > intPartPrecision) ||
+    (max !== undefined && value !== undefined && value >= max);
+
+  const isDecreaseDisabled =
+    isDisabled || isReadonly || (min !== undefined && value !== undefined ? value <= min : false);
 
   const increment = (): void => {
     onChange(getNumberInRange((value ?? 0) + step, min, max));
@@ -36,12 +55,19 @@ export const IncrementInput: FC<IIncrementInputProps> = ({
     onChange(getNumberInRange((value ?? 0) - step, min, max));
   };
 
-  const tweakInputStyles = useTweakStyles(componentStyles, tweakStyles, 'tweakInput');
+  useEffect(() => {
+    if (!isNumberInteger(step)) {
+      console.error('Параметр step должен быть целым числом');
+    }
+  }, [step]);
 
   return (
-    <div className={classes.root} {...addDataAttributes(data)}>
+    <div className={classes.root} {...addDataTestId(testId)} {...addDataAttributes(data)}>
       <NumberInput
         {...props}
+        isInvalid={isInvalid}
+        isDisabled={isDisabled}
+        isReadonly={isReadonly}
         min={min}
         max={max}
         intPartPrecision={intPartPrecision}
@@ -50,30 +76,28 @@ export const IncrementInput: FC<IIncrementInputProps> = ({
         tweakStyles={tweakInputStyles}
       />
       <div className={classes.buttons}>
-        <ChangeButton
-          type="plus"
-          isButtonDisabled={
-            props.isDisabled ||
-            props.isReadonly ||
-            (intPartPrecision !== undefined &&
-              getNumberLength((value ?? 0) + step) > intPartPrecision) ||
-            (max !== undefined && value !== undefined && value >= max)
-          }
-          isInvalid={props.isInvalid}
+        <button
+          className={clsx(classes.button, {
+            [classes.disabledButton]: isIncreaseDisabled,
+            [classes.errorButton]: isInvalid,
+          })}
+          type="button"
+          disabled={isIncreaseDisabled}
           onClick={increment}
-          classes={classes}
-        />
-        <ChangeButton
-          type="minus"
-          isButtonDisabled={
-            props.isDisabled ||
-            props.isReadonly ||
-            (min !== undefined && value !== undefined ? value <= min : false)
-          }
-          isInvalid={props.isInvalid}
+        >
+          <Icon type="plus" />
+        </button>
+        <button
+          className={clsx(classes.button, {
+            [classes.disabledButton]: isDecreaseDisabled,
+            [classes.errorButton]: isInvalid,
+          })}
+          type="button"
+          disabled={isDecreaseDisabled}
           onClick={decrement}
-          classes={classes}
-        />
+        >
+          <Icon type="minus" />
+        </button>
       </div>
     </div>
   );

package/src/components/IncrementInput/index.ts

@@ -1,2 +1,2 @@
 export * from './IncrementInput';
-export type { IncrementInputStyles } from './IncrementInput.styles';
+export type { IIncrementInputStyles } from './IncrementInput.styles';

package/src/components/Input/Input.styles.ts

@@ -1,10 +1,10 @@
-import { dimensions } from '../../theme';
-import { ComponentStyles } from '../../types';
+import { dimensions, ITweakStyles, createThemedStyles } from '../../theme';
+import { IThemedPreloaderStyles } from '../ThemedPreloader';
 
 const PADDING_X = 12;
 export const AUTOSIZE_MAX_WIDTH = 480;
 
-export const styles = {
+export const useStyles = createThemedStyles('Input', {
   root: {
     width: '100%',
     boxSizing: 'border-box',
@@ -80,7 +80,6 @@ export const styles = {
 
   unitsWrapper: {
     extend: 'inputContent',
-
     position: 'absolute',
     left: 0,
     height: '100%',
@@ -300,8 +299,9 @@ export const styles = {
   loading: {},
 
   withUnits: {},
+});
 
-  tweakPreloader: {},
-};
-
-export type InputStyles = ComponentStyles<typeof styles>;
+export type IInputStyles = ITweakStyles<
+  typeof useStyles,
+  { tweakPreloader: IThemedPreloaderStyles }
+>;

package/src/components/Input/Input.tsx

@@ -20,16 +20,15 @@ import {
 } from '@true-engineering/true-react-platform-helpers';
 import { addDataAttributes } from '../../helpers';
 import { renderIcon } from '../../helpers/snippets';
-import { useTheme, useTweakStyles } from '../../hooks';
+import { useTweakStyles } from '../../hooks';
 import { ICommonProps, IIcon } from '../../types';
 import { Icon } from '../Icon';
 import { ThemedPreloader } from '../ThemedPreloader';
 import { DEFAULT_SIZE } from './constants';
 import { IReactInputMaskProps } from './types';
-import { InputStyles, styles } from './Input.styles';
+import { useStyles, IInputStyles } from './Input.styles';
 
-export interface IInputProps extends ICommonProps, IReactInputMaskProps {
-  tweakStyles?: InputStyles;
+export interface IInputProps extends ICommonProps<IInputStyles>, IReactInputMaskProps {
   value?: string;
   label?: ReactNode;
   placeholder?: string;
@@ -81,7 +80,6 @@ export interface IInputProps extends ICommonProps, IReactInputMaskProps {
   hasRequiredLabel?: boolean;
   shouldFocusOnMount?: boolean;
   maxLength?: number;
-  testId?: string;
   tabIndex?: number;
   shouldAlwaysShowPlaceholder?: boolean;
   onChange(value: string, event: FormEvent<HTMLInputElement>): void;
@@ -139,7 +137,13 @@ export const Input = forwardRef<HTMLInputElement, IInputProps>(
     },
     ref,
   ) => {
-    const { classes, componentStyles } = useTheme('Input', styles, tweakStyles);
+    const classes = useStyles({ theme: tweakStyles });
+
+    const tweakPreloaderStyles = useTweakStyles({
+      tweakStyles,
+      className: 'tweakPreloader',
+      currentComponentName: 'Input',
+    });
 
     const [isFocused, setFocused] = useState(false);
     const inputRef = useRef<HTMLInputElement>(null);
@@ -203,8 +207,6 @@ export const Input = forwardRef<HTMLInputElement, IInputProps>(
       ...addDataTestId(testId),
     };
 
-    const tweakPreloaderStyles = useTweakStyles(componentStyles, tweakStyles, 'tweakPreloader');
-
     return (
       <div className={classes.root}>
         <div

package/src/components/Input/index.ts

@@ -1,3 +1,3 @@
 export * from './Input';
 export * from './types';
-export type { InputStyles } from './Input.styles';
+export type { IInputStyles } from './Input.styles';

package/src/components/List/List.styles.ts

@@ -1,11 +1,10 @@
-import { colors } from '../../theme';
-import { ComponentStyles } from '../../types';
+import { colors, ITweakStyles, createThemedStyles } from '../../theme';
 
 const ITEM_HORIZONTAL_PADDING = 16;
 const ICON_SIZE = 20;
 const ICON_GAP = 12;
 
-export const styles = {
+export const useStyles = createThemedStyles('List', {
   root: {
     minWidth: 180,
     backgroundColor: colors.CLASSIC_WHITE,
@@ -47,6 +46,6 @@ export const styles = {
   },
 
   content: {},
-};
+});
 
-export type ListStyles = ComponentStyles<typeof styles>;
+export type IListStyles = ITweakStyles<typeof useStyles>;

package/src/components/List/List.tsx

@@ -7,20 +7,17 @@ import {
 } from '@true-engineering/true-react-platform-helpers';
 import { addDataAttributes } from '../../helpers';
 import { renderIcon } from '../../helpers/snippets';
-import { useTheme } from '../../hooks';
 import { ICommonProps } from '../../types';
 import { IListItem } from './types';
-import { ListStyles, styles } from './List.styles';
+import { useStyles, IListStyles } from './List.styles';
 
-export interface IListProps extends ICommonProps {
-  tweakStyles?: ListStyles;
+export interface IListProps extends ICommonProps<IListStyles> {
   items: IListItem[];
-  testId?: string;
   onClick?(): void;
 }
 
 export const List: FC<IListProps> = ({ items, testId, data, tweakStyles, onClick }) => {
-  const { classes } = useTheme('List', styles, tweakStyles);
+  const classes = useStyles({ theme: tweakStyles });
 
   const handleItemClick = (item: IListItem) => {
     item.onClick();

package/src/components/List/index.ts

@@ -1,3 +1,3 @@
 export * from './List';
 export * from './types';
-export type { ListStyles } from './List.styles';
+export type { IListStyles } from './List.styles';

package/src/components/Modal/Modal.styles.ts

@@ -1,6 +1,6 @@
 import { rgba } from '../../helpers';
-import { colors, dimensions } from '../../theme';
-import { ComponentStyles } from '../../types';
+import { colors, dimensions, ITweakStyles, createThemedStyles } from '../../theme';
+import { ICloseButtonStyles } from '../CloseButton';
 
 const VERTICAL_OVERLAY_PADDING = 50;
 
@@ -8,7 +8,7 @@ const MODAL_HORIZONTAL_PADDING_L = 40;
 const MODAL_HORIZONTAL_PADDING_M = 36;
 const MODAL_HORIZONTAL_PADDING_S = 26;
 
-export const styles = {
+export const useStyles = createThemedStyles('Modal', {
   root: {},
 
   fixedPosition: {
@@ -298,8 +298,6 @@ export const styles = {
   'modal-enter-active': { extend: 'animationStart' },
   'modal-exit': { extend: 'animationStart' },
   'modal-exit-active': { extend: 'animationEnd' },
+});
 
-  tweakCloseButton: {},
-};
-
-export type ModalStyles = ComponentStyles<typeof styles>;
+export type IModalStyles = ITweakStyles<typeof useStyles, { tweakCloseButton: ICloseButtonStyles }>;

package/src/components/Modal/Modal.tsx

@@ -8,14 +8,13 @@ import {
   isReactNodeNotEmpty,
 } from '@true-engineering/true-react-platform-helpers';
 import { addDataAttributes } from '../../helpers';
-import { useTheme, useTweakStyles } from '../../hooks';
+import { useTweakStyles } from '../../hooks';
 import { ICommonProps } from '../../types';
 import { CloseButton } from '../CloseButton';
 import { IModalPosition, IModalTransitionProps } from './types';
-import { ModalStyles, styles } from './Modal.styles';
+import { useStyles, IModalStyles } from './Modal.styles';
 
-export interface IModalProps extends ICommonProps, IModalTransitionProps {
-  tweakStyles?: ModalStyles;
+export interface IModalProps extends ICommonProps<IModalStyles>, IModalTransitionProps {
   title?: ReactNode;
   size?: 'l' | 'm' | 's';
   isFooterSticky?: boolean;
@@ -30,7 +29,6 @@ export interface IModalProps extends ICommonProps, IModalTransitionProps {
   shouldBlockScroll?: boolean;
   isOpen?: boolean;
   zIndex?: number;
-  testId?: string;
   onClose?(): void;
 }
 
@@ -57,13 +55,17 @@ export const Modal: FC<IModalProps> = ({
   onClose,
   ...restProps
 }) => {
-  const isModalOpen = restProps.in ?? isOpen;
-  const { classes, componentStyles } = useTheme('Modal', styles, tweakStyles);
+  const classes = useStyles({ theme: tweakStyles });
 
-  const tweakCloseButtonStyles = useTweakStyles(componentStyles, tweakStyles, 'tweakCloseButton');
+  const tweakCloseButtonStyles = useTweakStyles({
+    tweakStyles,
+    className: 'tweakCloseButton',
+    currentComponentName: 'Modal',
+  });
 
   const [isClickOnOverlay, setIsClickOnOverlay] = useState(false);
 
+  const isModalOpen = restProps.in ?? isOpen;
   const hasFooter = buttons !== undefined && buttons.length > 0;
   const overlay = useRef<HTMLDivElement>(null);
 

package/src/components/Modal/index.ts

@@ -1,3 +1,3 @@
 export * from './Modal';
 export * from './types';
-export type { ModalStyles } from './Modal.styles';
+export type { IModalStyles } from './Modal.styles';

package/src/components/MoreMenu/MoreMenu.styles.ts

@@ -1,8 +1,8 @@
 import { rgba } from '../../helpers';
-import { colors } from '../../theme';
-import { ComponentStyles } from '../../types';
+import { colors, ITweakStyles, createThemedStyles } from '../../theme';
+import { IListStyles } from '../List';
 
-export const styles = {
+export const useStyles = createThemedStyles('MoreMenu', {
   root: {
     position: 'relative',
   },
@@ -63,8 +63,6 @@ export const styles = {
     right: 0,
     marginTop: 6,
   },
+});
 
-  tweakList: {},
-};
-
-export type MoreMenuStyles = ComponentStyles<typeof styles>;
+export type IMoreMenuStyles = ITweakStyles<typeof useStyles, { tweakList: IListStyles }>;