@true-engineering/true-react-common-ui-kit 3.29.0 → 3.30.0

package/src/components/TextWithTooltip/TextWithTooltip.styles.ts

@@ -1,21 +1,21 @@
-import { ITweakStyles, createThemedStyles } from '../../theme';
-import { ITooltipStyles } from '../Tooltip';
-
-export const useStyles = createThemedStyles('TextWithTooltip', {
-  root: {
-    position: 'relative',
-  },
-
-  tooltip: {
-    zIndex: 9999,
-  },
-
-  clickable: {
-    cursor: 'pointer',
-  },
-});
-
-export type ITextWithTooltipStyles = ITweakStyles<
-  typeof useStyles,
-  { tweakTooltip: ITooltipStyles }
->;
+import { ITweakStyles, createThemedStyles } from '../../theme';
+import { ITooltipStyles } from '../Tooltip';
+
+export const useStyles = createThemedStyles('TextWithTooltip', {
+  root: {
+    position: 'relative',
+  },
+
+  tooltip: {
+    zIndex: 9999,
+  },
+
+  clickable: {
+    cursor: 'pointer',
+  },
+});
+
+export type ITextWithTooltipStyles = ITweakStyles<
+  typeof useStyles,
+  { tweakTooltip: ITooltipStyles }
+>;

package/src/components/TextWithTooltip/TextWithTooltip.tsx

@@ -1,155 +1,155 @@
-import { CSSProperties, FC, ReactNode, useEffect, useRef, useState } from 'react';
-import { Portal } from 'react-overlays';
-import usePopper, { Modifier, Placement } from 'react-overlays/usePopper';
-import clsx from 'clsx';
-import { addDataTestId } from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../helpers';
-import { useOnClickOutsideWithRef, useTweakStyles } from '../../hooks';
-import { ICommonProps } from '../../types';
-import { ITooltipProps, Tooltip } from '../Tooltip';
-import { useStyles, ITextWithTooltipStyles } from './TextWithTooltip.styles';
-
-export interface ITextWithTooltipProps extends ICommonProps<ITextWithTooltipStyles> {
-  children: ReactNode;
-  tooltipText: ITooltipProps['text'];
-  /** @default 'tooltip' */
-  tooltipView?: ITooltipProps['view'];
-  /** @default 'info' */
-  tooltipType?: ITooltipProps['type'];
-  /** @default 'top' */
-  tooltipPosition?: Placement;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  /** @default [] */
-  tooltipModifiers?: Array<Partial<Modifier<any, any>>>;
-  tooltipOffsetOptions?: Record<string, unknown>;
-  /** @default 'hover' */
-  mouseEventType?: 'hover' | 'click';
-  hoverDelay?: number;
-  /** @default false */
-  isDisabled?: boolean;
-  /** @default true */
-  shouldRenderInBody?: boolean;
-}
-
-export const TextWithTooltip: FC<ITextWithTooltipProps> = ({
-  children,
-  tooltipText,
-  tooltipPosition = 'top',
-  tooltipView = 'tooltip',
-  tooltipType = 'info',
-  tooltipModifiers = [],
-  tooltipOffsetOptions,
-  isDisabled = false,
-  shouldRenderInBody = true,
-  mouseEventType = 'hover',
-  hoverDelay,
-  testId,
-  data,
-  tweakStyles,
-}) => {
-  const classes = useStyles({ theme: tweakStyles });
-
-  const tweakTooltipStyles = useTweakStyles({
-    tweakStyles,
-    className: 'tweakTooltip',
-    currentComponentName: 'TextWithTooltip',
-  });
-
-  const [isTooltipVisible, setIsTooltipVisible] = useState(false);
-  const [tooltipTimeout, setTooltipTimeout] = useState<ReturnType<typeof setTimeout>>();
-
-  const root = useRef<HTMLDivElement>(null);
-  const tooltip = useRef<HTMLDivElement>(null);
-
-  const hasDelay = hoverDelay !== undefined;
-
-  const handleMouseEnter = () => {
-    if (hasDelay) {
-      const timeout = setTimeout(() => {
-        setIsTooltipVisible(true);
-      }, hoverDelay);
-
-      setTooltipTimeout(timeout);
-    } else {
-      setIsTooltipVisible(true);
-    }
-  };
-
-  const handleMouseLeave = () => {
-    if (hasDelay) {
-      clearTimeout(tooltipTimeout);
-    }
-    setIsTooltipVisible(false);
-  };
-
-  useEffect(() => () => clearTimeout(tooltipTimeout), []);
-
-  const { styles: popperStyles, attributes } = usePopper(root.current, tooltip.current, {
-    enabled: isTooltipVisible,
-    placement: tooltipPosition,
-    modifiers: [
-      {
-        name: 'offset',
-        options: {
-          offset: [0, 6],
-          ...tooltipOffsetOptions,
-        },
-      },
-      ...tooltipModifiers,
-    ],
-  });
-
-  useOnClickOutsideWithRef(
-    tooltip,
-    () => {
-      if (mouseEventType === 'click') {
-        setIsTooltipVisible(false);
-      }
-    },
-    root,
-  );
-
-  const props =
-    mouseEventType === 'click'
-      ? {
-          onClick: () => setIsTooltipVisible(true),
-        }
-      : {
-          onMouseEnter: handleMouseEnter,
-          onMouseLeave: handleMouseLeave,
-        };
-
-  const shouldShowTooltip = tooltipText !== undefined && tooltipText !== null && !isDisabled;
-
-  return (
-    <div
-      className={clsx(
-        classes.root,
-        mouseEventType === 'click' && shouldShowTooltip && classes.clickable,
-      )}
-      {...(shouldShowTooltip ? props : undefined)}
-      {...addDataTestId(testId)}
-      {...addDataAttributes(data)}
-      ref={root}
-    >
-      {shouldShowTooltip && (
-        <Portal container={shouldRenderInBody ? document.body : root.current}>
-          <div
-            className={classes.tooltip}
-            style={popperStyles.popper as CSSProperties}
-            {...attributes.popper}
-            ref={tooltip}
-          >
-            <Tooltip
-              view={tooltipView}
-              type={tooltipType}
-              text={tooltipText}
-              tweakStyles={tweakTooltipStyles}
-            />
-          </div>
-        </Portal>
-      )}
-      {children}
-    </div>
-  );
-};
+import { CSSProperties, FC, ReactNode, useEffect, useRef, useState } from 'react';
+import { Portal } from 'react-overlays';
+import usePopper, { Modifier, Placement } from 'react-overlays/usePopper';
+import clsx from 'clsx';
+import { addDataTestId } from '@true-engineering/true-react-platform-helpers';
+import { addDataAttributes } from '../../helpers';
+import { useOnClickOutsideWithRef, useTweakStyles } from '../../hooks';
+import { ICommonProps } from '../../types';
+import { ITooltipProps, Tooltip } from '../Tooltip';
+import { useStyles, ITextWithTooltipStyles } from './TextWithTooltip.styles';
+
+export interface ITextWithTooltipProps extends ICommonProps<ITextWithTooltipStyles> {
+  children: ReactNode;
+  tooltipText: ITooltipProps['text'];
+  /** @default 'tooltip' */
+  tooltipView?: ITooltipProps['view'];
+  /** @default 'info' */
+  tooltipType?: ITooltipProps['type'];
+  /** @default 'top' */
+  tooltipPosition?: Placement;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  /** @default [] */
+  tooltipModifiers?: Array<Partial<Modifier<any, any>>>;
+  tooltipOffsetOptions?: Record<string, unknown>;
+  /** @default 'hover' */
+  mouseEventType?: 'hover' | 'click';
+  hoverDelay?: number;
+  /** @default false */
+  isDisabled?: boolean;
+  /** @default true */
+  shouldRenderInBody?: boolean;
+}
+
+export const TextWithTooltip: FC<ITextWithTooltipProps> = ({
+  children,
+  tooltipText,
+  tooltipPosition = 'top',
+  tooltipView = 'tooltip',
+  tooltipType = 'info',
+  tooltipModifiers = [],
+  tooltipOffsetOptions,
+  isDisabled = false,
+  shouldRenderInBody = true,
+  mouseEventType = 'hover',
+  hoverDelay,
+  testId,
+  data,
+  tweakStyles,
+}) => {
+  const classes = useStyles({ theme: tweakStyles });
+
+  const tweakTooltipStyles = useTweakStyles({
+    tweakStyles,
+    className: 'tweakTooltip',
+    currentComponentName: 'TextWithTooltip',
+  });
+
+  const [isTooltipVisible, setIsTooltipVisible] = useState(false);
+  const [tooltipTimeout, setTooltipTimeout] = useState<ReturnType<typeof setTimeout>>();
+
+  const root = useRef<HTMLDivElement>(null);
+  const tooltip = useRef<HTMLDivElement>(null);
+
+  const hasDelay = hoverDelay !== undefined;
+
+  const handleMouseEnter = () => {
+    if (hasDelay) {
+      const timeout = setTimeout(() => {
+        setIsTooltipVisible(true);
+      }, hoverDelay);
+
+      setTooltipTimeout(timeout);
+    } else {
+      setIsTooltipVisible(true);
+    }
+  };
+
+  const handleMouseLeave = () => {
+    if (hasDelay) {
+      clearTimeout(tooltipTimeout);
+    }
+    setIsTooltipVisible(false);
+  };
+
+  useEffect(() => () => clearTimeout(tooltipTimeout), []);
+
+  const { styles: popperStyles, attributes } = usePopper(root.current, tooltip.current, {
+    enabled: isTooltipVisible,
+    placement: tooltipPosition,
+    modifiers: [
+      {
+        name: 'offset',
+        options: {
+          offset: [0, 6],
+          ...tooltipOffsetOptions,
+        },
+      },
+      ...tooltipModifiers,
+    ],
+  });
+
+  useOnClickOutsideWithRef(
+    tooltip,
+    () => {
+      if (mouseEventType === 'click') {
+        setIsTooltipVisible(false);
+      }
+    },
+    root,
+  );
+
+  const props =
+    mouseEventType === 'click'
+      ? {
+          onClick: () => setIsTooltipVisible(true),
+        }
+      : {
+          onMouseEnter: handleMouseEnter,
+          onMouseLeave: handleMouseLeave,
+        };
+
+  const shouldShowTooltip = tooltipText !== undefined && tooltipText !== null && !isDisabled;
+
+  return (
+    <div
+      className={clsx(
+        classes.root,
+        mouseEventType === 'click' && shouldShowTooltip && classes.clickable,
+      )}
+      {...(shouldShowTooltip ? props : undefined)}
+      {...addDataTestId(testId)}
+      {...addDataAttributes(data)}
+      ref={root}
+    >
+      {shouldShowTooltip && (
+        <Portal container={shouldRenderInBody ? document.body : root.current}>
+          <div
+            className={classes.tooltip}
+            style={popperStyles.popper as CSSProperties}
+            {...attributes.popper}
+            ref={tooltip}
+          >
+            <Tooltip
+              view={tooltipView}
+              type={tooltipType}
+              text={tooltipText}
+              tweakStyles={tweakTooltipStyles}
+            />
+          </div>
+        </Portal>
+      )}
+      {children}
+    </div>
+  );
+};

package/src/components/TextWithTooltip/index.ts

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

package/src/components/ThemedPreloader/ThemedPreloader.styles.ts

@@ -1,26 +1,26 @@
-import { ITweakStyles, createThemedStyles } from '../../theme';
-import { IDotsPreloaderStyles, ISvgPreloaderStyles } from './components';
-
-export const useStyles = createThemedStyles('ThemedPreloader', {
-  root: {
-    display: 'flex',
-  },
-
-  dots: {},
-
-  default: {},
-
-  logo: {},
-
-  currentColor: {
-    color: 'currentColor',
-  },
-});
-
-export type IThemedPreloaderStyles = ITweakStyles<
-  typeof useStyles,
-  {
-    tweakDotsPreloader: IDotsPreloaderStyles;
-    tweakSvgPreloader: ISvgPreloaderStyles;
-  }
->;
+import { ITweakStyles, createThemedStyles } from '../../theme';
+import { IDotsPreloaderStyles, ISvgPreloaderStyles } from './components';
+
+export const useStyles = createThemedStyles('ThemedPreloader', {
+  root: {
+    display: 'flex',
+  },
+
+  dots: {},
+
+  default: {},
+
+  logo: {},
+
+  currentColor: {
+    color: 'currentColor',
+  },
+});
+
+export type IThemedPreloaderStyles = ITweakStyles<
+  typeof useStyles,
+  {
+    tweakDotsPreloader: IDotsPreloaderStyles;
+    tweakSvgPreloader: ISvgPreloaderStyles;
+  }
+>;

package/src/components/ThemedPreloader/components/DefaultPreloader/DefaultPreloader.tsx

@@ -1,29 +1,29 @@
-import { FC } from 'react';
-
-export const DefaultPreloader: FC = () => (
-  <svg width="100%" height="100%" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
-    <defs>
-      <linearGradient x1="8.042%" y1="0%" x2="65.682%" y2="23.865%" id="a">
-        <stop stopColor="currentColor" stopOpacity="0" offset="0%" />
-        <stop stopColor="currentColor" stopOpacity=".631" offset="63.146%" />
-        <stop stopColor="currentColor" offset="100%" />
-      </linearGradient>
-    </defs>
-    <g transform="translate(2,2)" fill="none">
-      <path d="M36 18c0-9.94-8.06-18-18-18" stroke="url(#a)" strokeWidth="3">
-        <animateTransform
-          xmlns="http://www.w3.org/2000/svg"
-          attributeName="transform"
-          attributeType="XML"
-          type="rotate"
-          from="0 18 18"
-          to="360 18 18"
-          dur="1s"
-          begin="0s"
-          repeatCount="indefinite"
-          fill="freeze"
-        />
-      </path>
-    </g>
-  </svg>
-);
+import { FC } from 'react';
+
+export const DefaultPreloader: FC = () => (
+  <svg width="100%" height="100%" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
+    <defs>
+      <linearGradient x1="8.042%" y1="0%" x2="65.682%" y2="23.865%" id="a">
+        <stop stopColor="currentColor" stopOpacity="0" offset="0%" />
+        <stop stopColor="currentColor" stopOpacity=".631" offset="63.146%" />
+        <stop stopColor="currentColor" offset="100%" />
+      </linearGradient>
+    </defs>
+    <g transform="translate(2,2)" fill="none">
+      <path d="M36 18c0-9.94-8.06-18-18-18" stroke="url(#a)" strokeWidth="3">
+        <animateTransform
+          xmlns="http://www.w3.org/2000/svg"
+          attributeName="transform"
+          attributeType="XML"
+          type="rotate"
+          from="0 18 18"
+          to="360 18 18"
+          dur="1s"
+          begin="0s"
+          repeatCount="indefinite"
+          fill="freeze"
+        />
+      </path>
+    </g>
+  </svg>
+);

package/src/components/ThemedPreloader/components/DotsPreloader/DotsPreloader.styles.ts

@@ -1,55 +1,55 @@
-import { createThemedStyles, ITweakStyles } from '../../../../theme';
-
-export const useStyles = createThemedStyles('DotsPreloader', {
-  root: {
-    display: 'flex',
-    gap: 4,
-    '--dot-size': '8px',
-
-    '&::before, &::after': {
-      content: '""',
-      extend: 'fadedDot',
-    },
-
-    '&::before': {
-      animationDelay: '0',
-    },
-
-    '&::after': {
-      animationDelay: '360ms',
-    },
-  },
-
-  /* ----------- 3 DOTS ---------- */
-
-  '@keyframes FadedDots': {
-    '0%': {
-      opacity: 0.2,
-    },
-    '30%': {
-      opacity: 1,
-    },
-    '100%': {
-      opacity: 0.2,
-    },
-  },
-
-  // используется в .dot и в before и after элементах root
-  fadedDot: {
-    display: 'block',
-    animationDuration: 750,
-    animationIterationCount: 'infinite',
-    animationName: '$FadedDots',
-    borderRadius: '50%',
-    width: 'var(--dot-size)',
-    height: 'var(--dot-size)',
-    backgroundColor: 'currentColor',
-  },
-
-  dot: {
-    extend: 'fadedDot',
-    animationDelay: '180ms',
-  },
-});
-
-export type IDotsPreloaderStyles = ITweakStyles<typeof useStyles>;
+import { createThemedStyles, ITweakStyles } from '../../../../theme';
+
+export const useStyles = createThemedStyles('DotsPreloader', {
+  root: {
+    display: 'flex',
+    gap: 4,
+    '--dot-size': '8px',
+
+    '&::before, &::after': {
+      content: '""',
+      extend: 'fadedDot',
+    },
+
+    '&::before': {
+      animationDelay: '0',
+    },
+
+    '&::after': {
+      animationDelay: '360ms',
+    },
+  },
+
+  /* ----------- 3 DOTS ---------- */
+
+  '@keyframes FadedDots': {
+    '0%': {
+      opacity: 0.2,
+    },
+    '30%': {
+      opacity: 1,
+    },
+    '100%': {
+      opacity: 0.2,
+    },
+  },
+
+  // используется в .dot и в before и after элементах root
+  fadedDot: {
+    display: 'block',
+    animationDuration: 750,
+    animationIterationCount: 'infinite',
+    animationName: '$FadedDots',
+    borderRadius: '50%',
+    width: 'var(--dot-size)',
+    height: 'var(--dot-size)',
+    backgroundColor: 'currentColor',
+  },
+
+  dot: {
+    extend: 'fadedDot',
+    animationDelay: '180ms',
+  },
+});
+
+export type IDotsPreloaderStyles = ITweakStyles<typeof useStyles>;

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

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

package/src/components/ThemedPreloader/components/DotsPreloader/index.ts

@@ -1,2 +1,2 @@
-export { DotsPreloader } from './DotsPreloader';
-export type { IDotsPreloaderStyles } from './DotsPreloader.styles';
+export { DotsPreloader } from './DotsPreloader';
+export type { IDotsPreloaderStyles } from './DotsPreloader.styles';

package/src/components/ThemedPreloader/components/SvgPreloader/SvgPreloader.styles.ts

@@ -1,11 +1,11 @@
-import { createThemedStyles, ITweakStyles } from '../../../../theme';
-
-export const useStyles = createThemedStyles('SvgPreloader', {
-  root: {
-    display: 'flex',
-    width: '100%',
-    height: '100%',
-  },
-});
-
-export type ISvgPreloaderStyles = ITweakStyles<typeof useStyles>;
+import { createThemedStyles, ITweakStyles } from '../../../../theme';
+
+export const useStyles = createThemedStyles('SvgPreloader', {
+  root: {
+    display: 'flex',
+    width: '100%',
+    height: '100%',
+  },
+});
+
+export type ISvgPreloaderStyles = ITweakStyles<typeof useStyles>;