@true-engineering/true-react-common-ui-kit 4.0.0-alpha70 → 4.0.0-alpha71

package/src/components/Select/Select.tsx

@@ -27,7 +27,7 @@ import {
 } from '@true-engineering/true-react-platform-helpers';
 import { hasExactParent } from '../../helpers';
 import { useDropdown, useIsMounted, useOnClickOutsideWithRef, useTweakStyles } from '../../hooks';
-import { ICommonProps, IDropdownWithPopperOptions } from '../../types';
+import { IDropdownWithPopperOptions, IReplaceTweakStylesProps } from '../../types';
 import { IIcon, renderIcon } from '../Icon';
 import { IChangeInputEvent, IInputProps, InputBase } from '../Input';
 import { ISearchInputProps, SearchInput } from '../SearchInput';
@@ -44,8 +44,10 @@ import { IChangeSelectEvent, IMultipleSelectValue, ISelectFooter } from './types
 import { getInputStyles, ISelectStyles, useStyles } from './Select.styles';
 
 export interface ISelectProps<Value>
-  extends Omit<IInputProps, 'value' | 'onChange' | 'onBlur' | 'type' | 'tweakStyles'>,
-    ICommonProps<ISelectStyles> {
+  extends Omit<
+    IReplaceTweakStylesProps<IInputProps, ISelectStyles>,
+    'value' | 'onChange' | 'onBlur' | 'type'
+  > {
   header?: ReactNode;
   footer?: ISelectFooter<Value>;
   defaultOptionLabel?: ReactNode;
@@ -143,7 +145,7 @@ export function Select<Value>(
     size,
     ...inputProps
   } = props;
-  const classes = useStyles({ theme: tweakStyles });
+  const classes = useStyles({ tweakStyles });
 
   const { shouldRenderInList: shouldRenderSearchInputInList = false, ...searchInputProps } =
     searchInput ?? {};

package/src/components/Select/components/SelectList/SelectList.tsx

@@ -59,7 +59,7 @@ export function SelectList<Value>({
   convertValueToReactNode = convertValueToString,
   convertValueToId,
 }: ISelectListProps<Value>): JSX.Element {
-  const classes = useStyles({ theme: tweakStyles });
+  const classes = useStyles({ tweakStyles });
 
   const isHeaderNotEmpty = isReactNodeNotEmpty(customListHeader);
   const isFooterNotEmpty = isReactNodeNotEmpty(customListFooter);

package/src/components/Skeleton/Skeleton.tsx

@@ -1,12 +1,12 @@
 import { CSSProperties, FC } from 'react';
-import { ICommonProps } from '../../types';
+import { ITweakStylesProps } from '../../types';
 import { ISkeletonStyles, useStyles } from './Skeleton.styles';
 
-export interface ISkeletonProps extends Pick<ICommonProps<ISkeletonStyles>, 'tweakStyles'> {
+export interface ISkeletonProps extends ITweakStylesProps<ISkeletonStyles> {
   height?: CSSProperties['height'];
 }
 
 export const Skeleton: FC<ISkeletonProps> = ({ height, tweakStyles }) => {
-  const classes = useStyles({ theme: tweakStyles });
+  const classes = useStyles({ tweakStyles });
   return <div className={classes.root} style={{ height }} />;
 };

package/src/components/Status/Status.tsx

@@ -31,7 +31,7 @@ export const Status: FC<IStatusProps> = ({
   testId,
   data,
 }) => {
-  const classes = useStyles({ theme: tweakStyles });
+  const classes = useStyles({ tweakStyles });
 
   return (
     <span

package/src/components/Switch/Switch.tsx

@@ -41,7 +41,7 @@ export const Switch = <V extends string>({
   testId,
   onChange,
 }: ISwitchProps<V>): JSX.Element => {
-  const classes = useStyles({ theme: tweakStyles });
+  const classes = useStyles({ tweakStyles });
 
   const handleChange = () => onChange({ name: value, isEnabled: !isChecked });
 

package/src/components/TextArea/TextArea.tsx

@@ -87,7 +87,7 @@ export const TextArea = forwardRef<HTMLTextAreaElement, ITextAreaProps>(function
   },
   ref,
 ) {
-  const classes = useStyles({ theme: tweakStyles });
+  const classes = useStyles({ tweakStyles });
 
   const shouldShowCounter = hasCounter && isNotEmpty(maxLength);
   const counterString = `${value.length} / ${maxLength}`;

package/src/components/TextButton/TextButton.tsx

@@ -60,7 +60,7 @@ export const TextButton = forwardRef<HTMLButtonElement, ITextButtonProps>(functi
   },
   ref,
 ) {
-  const classes = useStyles({ theme: tweakStyles });
+  const classes = useStyles({ tweakStyles });
 
   const tweakPreloaderStyles = useTweakStyles({
     innerStyles: preloaderStyles,

package/src/components/TextWithInfo/TextWithInfo.tsx

@@ -28,7 +28,7 @@ export const TextWithInfo: FC<ITextWithInfoProps> = ({
   data,
   tweakStyles,
 }) => {
-  const classes = useStyles({ theme: tweakStyles });
+  const classes = useStyles({ tweakStyles });
 
   return (
     <div

package/src/components/TextWithTooltip/TextWithTooltip.tsx

@@ -49,7 +49,7 @@ export const TextWithTooltip: FC<ITextWithTooltipProps> = ({
   data,
   tweakStyles,
 }) => {
-  const classes = useStyles({ theme: tweakStyles });
+  const classes = useStyles({ tweakStyles });
 
   const tweakTooltipStyles = useTweakStyles({
     tweakStyles,

package/src/components/ThemedPreloader/ThemedPreloader.tsx

@@ -21,7 +21,7 @@ export const ThemedPreloader: FC<IThemedPreloaderProps> = ({
   testId,
   tweakStyles,
 }) => {
-  const classes = useStyles({ theme: tweakStyles });
+  const classes = useStyles({ tweakStyles });
 
   const tweakDotsPreloaderStyles = useTweakStyles({
     tweakStyles,

package/src/components/ThemedPreloader/components/DotsPreloader/DotsPreloader.tsx

@@ -1,11 +1,11 @@
 import { FC } from 'react';
-import { ICommonProps } from '../../../../types';
+import { ITweakStylesProps } from '../../../../types';
 import { useStyles, IDotsPreloaderStyles } from './DotsPreloader.styles';
 
-export type IDotsPreloaderProps = Pick<ICommonProps<IDotsPreloaderStyles>, 'tweakStyles'>;
+export type IDotsPreloaderProps = ITweakStylesProps<IDotsPreloaderStyles>;
 
 export const DotsPreloader: FC<IDotsPreloaderProps> = ({ tweakStyles }) => {
-  const classes = useStyles({ theme: tweakStyles });
+  const classes = useStyles({ tweakStyles });
 
   return (
     <div className={classes.root}>

package/src/components/ThemedPreloader/components/SvgPreloader/SvgPreloader.tsx

@@ -1,16 +1,16 @@
 import { FC } from 'react';
 import { useTheme } from '../../../../theme';
-import { ICommonProps } from '../../../../types';
+import { ITweakStylesProps } from '../../../../types';
 import { IPreloaderSvgType } from '../../types';
 import { DefaultPreloader } from '../DefaultPreloader';
 import { ISvgPreloaderStyles, useStyles } from './SvgPreloader.styles';
 
-export interface ISvgPreloaderProps extends Pick<ICommonProps<ISvgPreloaderStyles>, 'tweakStyles'> {
+export interface ISvgPreloaderProps extends ITweakStylesProps<ISvgPreloaderStyles> {
   type: IPreloaderSvgType;
 }
 
 export const SvgPreloader: FC<ISvgPreloaderProps> = ({ type = 'default', tweakStyles }) => {
-  const classes = useStyles({ theme: tweakStyles });
+  const classes = useStyles({ tweakStyles });
 
   const theme = useTheme();
   const PreloaderIcon = theme.preloaders?.[type] ?? DefaultPreloader;

package/src/components/Toaster/Toaster.tsx

@@ -47,7 +47,7 @@ export const Toaster: FC<IToasterProps> = ({
   onClose,
   onTimeEnd,
 }) => {
-  const classes = useStyles({ theme: tweakStyles });
+  const classes = useStyles({ tweakStyles });
 
   const tweakCloseButtonStyles = useTweakStyles({
     tweakStyles,

package/src/components/Tooltip/Tooltip.tsx

@@ -24,7 +24,7 @@ export const Tooltip: FC<ITooltipProps> = ({
   testId,
   tweakStyles,
 }) => {
-  const classes = useStyles({ theme: tweakStyles });
+  const classes = useStyles({ tweakStyles });
 
   return (
     <div

package/src/components/WithMessages/WithMessages.tsx

@@ -19,7 +19,7 @@ export const WithMessages = forwardRef<HTMLDivElement, IWithMessagesProps>(funct
   { children, infoMessage, errorMessage, controlsDirection, tweakStyles, testId, data },
   ref,
 ) {
-  const classes = useStyles({ theme: tweakStyles });
+  const classes = useStyles({ tweakStyles });
 
   const shouldShowError = isReactNodeNotEmpty(errorMessage);
   const shouldShowInfo = isReactNodeNotEmpty(infoMessage) && !shouldShowError;

package/src/components/WithTooltip/WithTooltip.tsx

@@ -1,17 +1,16 @@
 import { FC } from 'react';
 import { getTestId, isReactNodeNotEmpty } from '@true-engineering/true-react-platform-helpers';
 import { useTweakStyles } from '../../hooks';
-import { ICommonProps } from '../../types';
+import { IReplaceTweakStylesProps } from '../../types';
 import { ITooltipProps, Tooltip } from '../Tooltip';
 import { IWithPopupProps, WithPopup } from '../WithPopup';
 import { IWithTooltipStyles, withPopupStyles } from './WithTooltip.styles';
 
 export interface IWithTooltipProps
   extends Omit<
-      IWithPopupProps,
-      'trigger' | 'children' | 'placement' | 'eventType' | 'isTriggerWrapped' | 'tweakStyles'
-    >,
-    ICommonProps<IWithTooltipStyles> {
+    IReplaceTweakStylesProps<IWithPopupProps, IWithTooltipStyles>,
+    'trigger' | 'children' | 'placement' | 'eventType' | 'isTriggerWrapped'
+  > {
   children: IWithPopupProps['trigger'];
   /** @default 'hover' */
   eventType?: IWithPopupProps['eventType'];

package/src/types.ts

@@ -29,6 +29,11 @@ export interface ITweakStylesProps<TweakStyles> {
 
 export type ICommonProps<TweakStyles> = IDataAttributesProps & ITweakStylesProps<TweakStyles>;
 
+export type IReplaceTweakStylesProps<
+  T extends ITweakStylesProps<unknown>,
+  P,
+> = ITweakStylesProps<P> & Omit<T, 'tweakStyles'>;
+
 export interface IDropdownWithPopperOptions {
   shouldUsePopper?: boolean;
   shouldRenderInBody?: boolean;