@true-engineering/true-react-common-ui-kit 3.24.1 → 3.25.1

package/src/components/Tooltip/Tooltip.tsx

@@ -1,35 +1,35 @@
-import { FC, ReactNode } from 'react';
-import clsx from 'clsx';
-import { addDataTestId } from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../helpers';
-import { ICommonProps } from '../../types';
-import { useStyles, ITooltipStyles } from './Tooltip.styles';
-
-export interface ITooltipProps extends ICommonProps<ITooltipStyles> {
-  text: ReactNode;
-  /** @default 'tooltip' */
-  view?: 'tooltip' | 'hint';
-  /** @default 'info' */
-  type?: 'info' | 'error';
-}
-
-export const Tooltip: FC<ITooltipProps> = ({
-  text,
-  view = 'tooltip',
-  type = 'info',
-  data,
-  testId,
-  tweakStyles,
-}) => {
-  const classes = useStyles({ theme: tweakStyles });
-
-  return (
-    <div
-      className={clsx(classes.root, classes[view], classes[type])}
-      {...addDataTestId(testId)}
-      {...addDataAttributes(data)}
-    >
-      {text}
-    </div>
-  );
-};
+import { FC, ReactNode } from 'react';
+import clsx from 'clsx';
+import { addDataTestId } from '@true-engineering/true-react-platform-helpers';
+import { addDataAttributes } from '../../helpers';
+import { ICommonProps } from '../../types';
+import { useStyles, ITooltipStyles } from './Tooltip.styles';
+
+export interface ITooltipProps extends ICommonProps<ITooltipStyles> {
+  text: ReactNode;
+  /** @default 'tooltip' */
+  view?: 'tooltip' | 'hint';
+  /** @default 'info' */
+  type?: 'info' | 'error';
+}
+
+export const Tooltip: FC<ITooltipProps> = ({
+  text,
+  view = 'tooltip',
+  type = 'info',
+  data,
+  testId,
+  tweakStyles,
+}) => {
+  const classes = useStyles({ theme: tweakStyles });
+
+  return (
+    <div
+      className={clsx(classes.root, classes[view], classes[type])}
+      {...addDataTestId(testId)}
+      {...addDataAttributes(data)}
+    >
+      {text}
+    </div>
+  );
+};

package/src/components/Tooltip/types.ts

@@ -1 +1 @@
-export type ITooltipType = 'info' | 'warning';
+export type ITooltipType = 'info' | 'warning';

package/src/helpers/popper-helpers.ts

@@ -1,17 +1,17 @@
-import { Modifier } from 'react-overlays/usePopper';
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const minWidthModifier: Partial<Modifier<any, any>> = {
-  name: 'minWidth',
-  enabled: true,
-  phase: 'beforeWrite',
-  requires: ['computeStyles'],
-  fn: ({ state }) => {
-    state.styles.popper.minWidth = `${state.rects.reference.width}px`;
-  },
-  effect: ({ state }) => {
-    state.elements.popper.style.minWidth = `${
-      (state.elements.reference as HTMLElement).offsetWidth
-    }px`;
-  },
-};
+import { Modifier } from 'react-overlays/usePopper';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const minWidthModifier: Partial<Modifier<any, any>> = {
+  name: 'minWidth',
+  enabled: true,
+  phase: 'beforeWrite',
+  requires: ['computeStyles'],
+  fn: ({ state }) => {
+    state.styles.popper.minWidth = `${state.rects.reference.width}px`;
+  },
+  effect: ({ state }) => {
+    state.elements.popper.style.minWidth = `${
+      (state.elements.reference as HTMLElement).offsetWidth
+    }px`;
+  },
+};

package/src/hooks/use-dropdown.ts

@@ -1,84 +1,84 @@
-import { DependencyList, useEffect } from 'react';
-import usePopper, { VirtualElement } from 'react-overlays/usePopper';
-import { getScrollParent, minWidthModifier } from '../helpers';
-import { IDropdownWithPopperOptions } from '../types';
-
-export const useDropdown = ({
-  isOpen,
-  onDropdownClose,
-  referenceElement,
-  dropdownElement,
-  options,
-  dependenciesForPositionUpdating = [],
-}: {
-  isOpen: boolean;
-  referenceElement: VirtualElement | null | undefined;
-  dropdownElement: HTMLElement | null | undefined;
-  options?: IDropdownWithPopperOptions;
-  dependenciesForPositionUpdating?: DependencyList;
-  onDropdownClose: (event: Event) => void;
-}): ReturnType<typeof usePopper> | undefined => {
-  const {
-    shouldUsePopper = false,
-    shouldRenderInBody = false,
-    shouldHideOnScroll = false,
-    scrollParent = 'document',
-    canBeFlipped = false,
-    modifiers = [],
-    placement = 'bottom-start',
-    flipOptions,
-  } = options ?? {};
-
-  useEffect(() => {
-    if (!shouldHideOnScroll || !isOpen) {
-      return;
-    }
-
-    const scrollParentEl =
-      scrollParent === 'auto'
-        ? getScrollParent(referenceElement as Element)
-        : scrollParent === 'document'
-        ? document
-        : scrollParent;
-    scrollParentEl.addEventListener('scroll', onDropdownClose);
-
-    return () => {
-      scrollParentEl.removeEventListener('scroll', onDropdownClose);
-    };
-  }, [shouldHideOnScroll, isOpen]);
-
-  let popperData: ReturnType<typeof usePopper> | undefined;
-  if (shouldUsePopper) {
-    // TODO: Вытащить хук из под условия???
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    popperData = usePopper(referenceElement, dropdownElement, {
-      enabled: isOpen,
-      placement,
-      modifiers: [
-        ...(shouldRenderInBody ? [minWidthModifier] : []),
-        {
-          name: 'offset',
-          options: {
-            offset: [0, 6],
-          },
-        },
-        {
-          name: 'flip',
-          options: {
-            fallbackPlacements: canBeFlipped ? ['bottom-start', 'top-start'] : ['bottom-start'],
-            ...flipOptions,
-          },
-        },
-        ...modifiers,
-      ],
-    });
-  }
-
-  useEffect(() => {
-    if (dependenciesForPositionUpdating.length !== 0) {
-      popperData?.update();
-    }
-  }, dependenciesForPositionUpdating);
-
-  return popperData;
-};
+import { DependencyList, useEffect } from 'react';
+import usePopper, { VirtualElement } from 'react-overlays/usePopper';
+import { getScrollParent, minWidthModifier } from '../helpers';
+import { IDropdownWithPopperOptions } from '../types';
+
+export const useDropdown = ({
+  isOpen,
+  onDropdownClose,
+  referenceElement,
+  dropdownElement,
+  options,
+  dependenciesForPositionUpdating = [],
+}: {
+  isOpen: boolean;
+  referenceElement: VirtualElement | null | undefined;
+  dropdownElement: HTMLElement | null | undefined;
+  options?: IDropdownWithPopperOptions;
+  dependenciesForPositionUpdating?: DependencyList;
+  onDropdownClose: (event: Event) => void;
+}): ReturnType<typeof usePopper> | undefined => {
+  const {
+    shouldUsePopper = false,
+    shouldRenderInBody = false,
+    shouldHideOnScroll = false,
+    scrollParent = 'document',
+    canBeFlipped = false,
+    modifiers = [],
+    placement = 'bottom-start',
+    flipOptions,
+  } = options ?? {};
+
+  useEffect(() => {
+    if (!shouldHideOnScroll || !isOpen) {
+      return;
+    }
+
+    const scrollParentEl =
+      scrollParent === 'auto'
+        ? getScrollParent(referenceElement as Element)
+        : scrollParent === 'document'
+        ? document
+        : scrollParent;
+    scrollParentEl.addEventListener('scroll', onDropdownClose);
+
+    return () => {
+      scrollParentEl.removeEventListener('scroll', onDropdownClose);
+    };
+  }, [shouldHideOnScroll, isOpen]);
+
+  let popperData: ReturnType<typeof usePopper> | undefined;
+  if (shouldUsePopper) {
+    // TODO: Вытащить хук из под условия???
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    popperData = usePopper(referenceElement, dropdownElement, {
+      enabled: isOpen,
+      placement,
+      modifiers: [
+        ...(shouldRenderInBody ? [minWidthModifier] : []),
+        {
+          name: 'offset',
+          options: {
+            offset: [0, 6],
+          },
+        },
+        {
+          name: 'flip',
+          options: {
+            fallbackPlacements: canBeFlipped ? ['bottom-start', 'top-start'] : ['bottom-start'],
+            ...flipOptions,
+          },
+        },
+        ...modifiers,
+      ],
+    });
+  }
+
+  useEffect(() => {
+    if (dependenciesForPositionUpdating.length !== 0) {
+      popperData?.update();
+    }
+  }, dependenciesForPositionUpdating);
+
+  return popperData;
+};

package/src/hooks/use-is-mounted.ts

@@ -1,15 +1,15 @@
-import { useCallback, useEffect, useRef } from 'react';
-
-export const useIsMounted = (): (() => boolean) => {
-  const isMounted = useRef(false);
-
-  useEffect(() => {
-    isMounted.current = true;
-
-    return () => {
-      isMounted.current = false;
-    };
-  }, []);
-
-  return useCallback(() => isMounted.current, []);
-};
+import { useCallback, useEffect, useRef } from 'react';
+
+export const useIsMounted = (): (() => boolean) => {
+  const isMounted = useRef(false);
+
+  useEffect(() => {
+    isMounted.current = true;
+
+    return () => {
+      isMounted.current = false;
+    };
+  }, []);
+
+  return useCallback(() => isMounted.current, []);
+};

package/src/theme/helpers.ts

@@ -1,76 +1,76 @@
-import { createUseStyles, Styles } from 'react-jss';
-import merge from 'lodash-es/merge';
-import {
-  isArrayNotEmpty,
-  isNotEmpty,
-  mergeStyles,
-} from '@true-engineering/true-react-platform-helpers';
-import { getTheme } from './Provider';
-import { IComponentName, IStyles, IUseStyles } from './types';
-
-const EMPTY_STYLES = {};
-
-const isTweakStyle = (key: string): boolean => key.startsWith('tweak');
-
-const cleanStyles = <T>(tweakStyles?: T): T =>
-  isNotEmpty(tweakStyles) && Object.keys(tweakStyles).some((key) => !isTweakStyle(key))
-    ? tweakStyles
-    : (EMPTY_STYLES as T);
-
-const checkStyles = (componentName: string, styles: Record<string, unknown>): void => {
-  const invalidClasses = Object.keys(styles).reduce((acc, key) => {
-    if (isTweakStyle(key)) {
-      acc.push(key);
-    }
-    return acc;
-  }, [] as string[]);
-
-  if (isArrayNotEmpty(invalidClasses)) {
-    console.error(
-      `${componentName}: Названия классов не должны начинаться со слова "tweak": ${invalidClasses}`,
-    );
-  }
-};
-
-export const areStylesThemed = (styles: Record<string, unknown>): boolean =>
-  // eslint-disable-next-line no-underscore-dangle
-  styles.__themed === true;
-
-/**
- * Подмешивает стили из темы. Мутирует, добавляя специально поле,
- * по которому можно определить была ли уже произведена мутация ранее,
- * тем самым сохраняя ссылку на объект и позволяя этим кэшировать JSS стили
- */
-export const themedStyles = <T>(styles: T, themeComponentStyles: T): T => {
-  merge(styles, themeComponentStyles); // mutation !!!!
-  Object.defineProperty(styles, '__themed', { value: true });
-  return styles;
-};
-
-export function createThemedStyles<C extends string, P>(styles: IStyles<C, P>): IUseStyles<C, P>;
-
-export function createThemedStyles<C extends string, P>(
-  componentName: IComponentName,
-  styles: IStyles<C, P>,
-): IUseStyles<C, P>;
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function createThemedStyles<C extends string, P>(...args: any[]): IUseStyles<C, P> {
-  const shouldUseTheme = args.length > 1;
-  const styles: IStyles<C, P> = shouldUseTheme ? args[1] : args[0];
-  const componentName: IComponentName | undefined = shouldUseTheme ? args[0] : undefined;
-
-  if (process.env.NODE_ENV !== 'production') {
-    checkStyles(componentName ?? 'LocalComponent', styles);
-  }
-  const useStyles = createUseStyles<C, P>((tweakStyles) => {
-    const theme = getTheme();
-    return mergeStyles(
-      styles as Styles<C, P>,
-      isNotEmpty(componentName) ? (theme?.components?.[componentName] as Styles<C, P>) : undefined,
-      tweakStyles,
-    );
-  });
-
-  return (data) => useStyles(isNotEmpty(data) ? { ...data, theme: cleanStyles(data.theme) } : data);
-}
+import { createUseStyles, Styles } from 'react-jss';
+import merge from 'lodash-es/merge';
+import {
+  isArrayNotEmpty,
+  isNotEmpty,
+  mergeStyles,
+} from '@true-engineering/true-react-platform-helpers';
+import { getTheme } from './Provider';
+import { IComponentName, IStyles, IUseStyles } from './types';
+
+const EMPTY_STYLES = {};
+
+const isTweakStyle = (key: string): boolean => key.startsWith('tweak');
+
+const cleanStyles = <T>(tweakStyles?: T): T =>
+  isNotEmpty(tweakStyles) && Object.keys(tweakStyles).some((key) => !isTweakStyle(key))
+    ? tweakStyles
+    : (EMPTY_STYLES as T);
+
+const checkStyles = (componentName: string, styles: Record<string, unknown>): void => {
+  const invalidClasses = Object.keys(styles).reduce((acc, key) => {
+    if (isTweakStyle(key)) {
+      acc.push(key);
+    }
+    return acc;
+  }, [] as string[]);
+
+  if (isArrayNotEmpty(invalidClasses)) {
+    console.error(
+      `${componentName}: Названия классов не должны начинаться со слова "tweak": ${invalidClasses}`,
+    );
+  }
+};
+
+export const areStylesThemed = (styles: Record<string, unknown>): boolean =>
+  // eslint-disable-next-line no-underscore-dangle
+  styles.__themed === true;
+
+/**
+ * Подмешивает стили из темы. Мутирует, добавляя специально поле,
+ * по которому можно определить была ли уже произведена мутация ранее,
+ * тем самым сохраняя ссылку на объект и позволяя этим кэшировать JSS стили
+ */
+export const themedStyles = <T>(styles: T, themeComponentStyles: T): T => {
+  merge(styles, themeComponentStyles); // mutation !!!!
+  Object.defineProperty(styles, '__themed', { value: true });
+  return styles;
+};
+
+export function createThemedStyles<C extends string, P>(styles: IStyles<C, P>): IUseStyles<C, P>;
+
+export function createThemedStyles<C extends string, P>(
+  componentName: IComponentName,
+  styles: IStyles<C, P>,
+): IUseStyles<C, P>;
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function createThemedStyles<C extends string, P>(...args: any[]): IUseStyles<C, P> {
+  const shouldUseTheme = args.length > 1;
+  const styles: IStyles<C, P> = shouldUseTheme ? args[1] : args[0];
+  const componentName: IComponentName | undefined = shouldUseTheme ? args[0] : undefined;
+
+  if (process.env.NODE_ENV !== 'production') {
+    checkStyles(componentName ?? 'LocalComponent', styles);
+  }
+  const useStyles = createUseStyles<C, P>((tweakStyles) => {
+    const theme = getTheme();
+    return mergeStyles(
+      styles as Styles<C, P>,
+      isNotEmpty(componentName) ? (theme?.components?.[componentName] as Styles<C, P>) : undefined,
+      tweakStyles,
+    );
+  });
+
+  return (data) => useStyles(isNotEmpty(data) ? { ...data, theme: cleanStyles(data.theme) } : data);
+}

package/src/vite-env.d.ts

@@ -1 +1 @@
-/// <reference types="vite/client" />
+/// <reference types="vite/client" />