@true-engineering/true-react-common-ui-kit 3.38.0 → 3.40.0

package/src/hooks/use-on-click-outside.ts

@@ -1,77 +1,77 @@
-import { RefObject, useEffect } from 'react';
-
-export const checkElementParentsClassNames = (element: HTMLElement, className: string): boolean => {
-  if (element.classList.contains(className)) {
-    return true;
-  }
-
-  if (element === document.body) {
-    return false;
-  }
-
-  if (element.parentElement) {
-    return checkElementParentsClassNames(element.parentElement, className);
-  }
-
-  return false;
-};
-
-export const isElementOneOfParents = (element: HTMLElement, elToSearch: HTMLElement): boolean => {
-  if (element === elToSearch) {
-    return true;
-  }
-
-  if (element === document.body) {
-    return false;
-  }
-
-  if (element.parentElement) {
-    return isElementOneOfParents(element.parentElement, elToSearch);
-  }
-
-  return false;
-};
-
-export function useOnClickOutsideWithRef<Elem extends HTMLElement, IgnoreElem extends HTMLElement>(
-  ref: RefObject<Elem>,
-  handler: (event: MouseEvent | TouchEvent) => void,
-  ignoreRef?: RefObject<IgnoreElem>,
-): void {
-  useOnClickOutside(ref, handler, undefined, ignoreRef);
-}
-
-export function useOnClickOutside<Elem extends HTMLElement, IgnoreElem extends HTMLElement>(
-  ref: RefObject<Elem>,
-  handler: (event: MouseEvent | TouchEvent) => void,
-  ignoreClassName?: string,
-  ignoreRef?: RefObject<IgnoreElem>,
-): void {
-  useEffect(() => {
-    const listener = (event: MouseEvent | TouchEvent) => {
-      // Do nothing if clicking ref's element or descendent elements
-      if (!ref.current || ref.current.contains(event.target as HTMLElement)) {
-        return;
-      }
-
-      if (
-        (ignoreClassName !== undefined &&
-          checkElementParentsClassNames(event.target as HTMLElement, ignoreClassName)) ||
-        (ignoreRef !== undefined &&
-          ignoreRef.current !== null &&
-          isElementOneOfParents(event.target as HTMLElement, ignoreRef.current))
-      ) {
-        return;
-      }
-
-      handler(event);
-    };
-
-    document.addEventListener('mousedown', listener);
-    document.addEventListener('touchstart', listener);
-
-    return () => {
-      document.removeEventListener('mousedown', listener);
-      document.removeEventListener('touchstart', listener);
-    };
-  }, [ref, handler, ignoreClassName]);
-}
+import { RefObject, useEffect } from 'react';
+
+export const checkElementParentsClassNames = (element: HTMLElement, className: string): boolean => {
+  if (element.classList.contains(className)) {
+    return true;
+  }
+
+  if (element === document.body) {
+    return false;
+  }
+
+  if (element.parentElement) {
+    return checkElementParentsClassNames(element.parentElement, className);
+  }
+
+  return false;
+};
+
+export const isElementOneOfParents = (element: HTMLElement, elToSearch: HTMLElement): boolean => {
+  if (element === elToSearch) {
+    return true;
+  }
+
+  if (element === document.body) {
+    return false;
+  }
+
+  if (element.parentElement) {
+    return isElementOneOfParents(element.parentElement, elToSearch);
+  }
+
+  return false;
+};
+
+export function useOnClickOutsideWithRef<Elem extends HTMLElement, IgnoreElem extends HTMLElement>(
+  ref: RefObject<Elem>,
+  handler: (event: MouseEvent | TouchEvent) => void,
+  ignoreRef?: RefObject<IgnoreElem>,
+): void {
+  useOnClickOutside(ref, handler, undefined, ignoreRef);
+}
+
+export function useOnClickOutside<Elem extends HTMLElement, IgnoreElem extends HTMLElement>(
+  ref: RefObject<Elem>,
+  handler: (event: MouseEvent | TouchEvent) => void,
+  ignoreClassName?: string,
+  ignoreRef?: RefObject<IgnoreElem>,
+): void {
+  useEffect(() => {
+    const listener = (event: MouseEvent | TouchEvent) => {
+      // Do nothing if clicking ref's element or descendent elements
+      if (!ref.current || ref.current.contains(event.target as HTMLElement)) {
+        return;
+      }
+
+      if (
+        (ignoreClassName !== undefined &&
+          checkElementParentsClassNames(event.target as HTMLElement, ignoreClassName)) ||
+        (ignoreRef !== undefined &&
+          ignoreRef.current !== null &&
+          isElementOneOfParents(event.target as HTMLElement, ignoreRef.current))
+      ) {
+        return;
+      }
+
+      handler(event);
+    };
+
+    document.addEventListener('mousedown', listener);
+    document.addEventListener('touchstart', listener);
+
+    return () => {
+      document.removeEventListener('mousedown', listener);
+      document.removeEventListener('touchstart', listener);
+    };
+  }, [ref, handler, ignoreClassName]);
+}

package/src/hooks/use-tweak-styles.ts

@@ -1,57 +1,57 @@
-import { useMemo } from 'react';
-import { isEmpty, isNotEmpty, mergeStyles } from '@true-engineering/true-react-platform-helpers';
-import { areStylesThemed, getTheme, IComponentName, themedStyles } from '../theme';
-
-// TODO: Можно усилить типы
-export const useTweakStyles = <StyleSheet, ClassName extends keyof StyleSheet & `tweak${string}`>({
-  innerStyles,
-  tweakStyles: currentComponentTweakStyles,
-  className,
-  currentComponentName,
-}: {
-  /**
-   * Это tweakStyles, определенные в родительском компоненте
-   * (например, стили для Input, определенные в стилях компонента Select)
-   */
-  innerStyles?: StyleSheet[ClassName];
-  /**
-   * Пропса tweakStyles из родительского компонента
-   * (это уже непосредственно ISelectProps.tweakStyles)
-   */
-  tweakStyles?: StyleSheet;
-  /**
-   * Класс для переопределения tweakStyles из-вне. (Например, 'tweakInput')
-   */
-  className: ClassName;
-  /**
-   * Название компонента который вызывает useTweakStyles. (В данном примере 'Select')
-   */
-  currentComponentName?: IComponentName;
-}): StyleSheet[ClassName] =>
-  useMemo(() => {
-    const theme = getTheme();
-    // tweakStyles, переопределенные в теме родительского компонента
-    const themeStyles = isNotEmpty(currentComponentName)
-      ? (theme.components?.[currentComponentName]?.[className as never] as StyleSheet[ClassName])
-      : undefined;
-    const tweakStyles = currentComponentTweakStyles?.[className];
-
-    // Если нечего мержить
-    const styles = [innerStyles, tweakStyles, themeStyles].filter(isNotEmpty);
-    if (styles.length <= 1) {
-      return styles[0];
-    }
-
-    // Мы можем подмержить тему в innerStyles, чтобы сохранить кэширование
-    if (isNotEmpty(innerStyles) && isNotEmpty(themeStyles) && isEmpty(tweakStyles)) {
-      return areStylesThemed(innerStyles) ? innerStyles : themedStyles(innerStyles, themeStyles);
-    }
-
-    // Ну тут уже прощай кэш
-    return mergeStyles(innerStyles, themeStyles, tweakStyles);
-  }, [
-    innerStyles,
-    className,
-    currentComponentName,
-    currentComponentTweakStyles,
-  ]) as StyleSheet[ClassName];
+import { useMemo } from 'react';
+import { isEmpty, isNotEmpty, mergeStyles } from '@true-engineering/true-react-platform-helpers';
+import { areStylesThemed, getTheme, IComponentName, themedStyles } from '../theme';
+
+// TODO: Можно усилить типы
+export const useTweakStyles = <StyleSheet, ClassName extends keyof StyleSheet & `tweak${string}`>({
+  innerStyles,
+  tweakStyles: currentComponentTweakStyles,
+  className,
+  currentComponentName,
+}: {
+  /**
+   * Это tweakStyles, определенные в родительском компоненте
+   * (например, стили для Input, определенные в стилях компонента Select)
+   */
+  innerStyles?: StyleSheet[ClassName];
+  /**
+   * Пропса tweakStyles из родительского компонента
+   * (это уже непосредственно ISelectProps.tweakStyles)
+   */
+  tweakStyles?: StyleSheet;
+  /**
+   * Класс для переопределения tweakStyles из-вне. (Например, 'tweakInput')
+   */
+  className: ClassName;
+  /**
+   * Название компонента который вызывает useTweakStyles. (В данном примере 'Select')
+   */
+  currentComponentName?: IComponentName;
+}): StyleSheet[ClassName] =>
+  useMemo(() => {
+    const theme = getTheme();
+    // tweakStyles, переопределенные в теме родительского компонента
+    const themeStyles = isNotEmpty(currentComponentName)
+      ? (theme.components?.[currentComponentName]?.[className as never] as StyleSheet[ClassName])
+      : undefined;
+    const tweakStyles = currentComponentTweakStyles?.[className];
+
+    // Если нечего мержить
+    const styles = [innerStyles, tweakStyles, themeStyles].filter(isNotEmpty);
+    if (styles.length <= 1) {
+      return styles[0];
+    }
+
+    // Мы можем подмержить тему в innerStyles, чтобы сохранить кэширование
+    if (isNotEmpty(innerStyles) && isNotEmpty(themeStyles) && isEmpty(tweakStyles)) {
+      return areStylesThemed(innerStyles) ? innerStyles : themedStyles(innerStyles, themeStyles);
+    }
+
+    // Ну тут уже прощай кэш
+    return mergeStyles(innerStyles, themeStyles, tweakStyles);
+  }, [
+    innerStyles,
+    className,
+    currentComponentName,
+    currentComponentTweakStyles,
+  ]) as StyleSheet[ClassName];

package/src/index.ts

@@ -1,6 +1,6 @@
-export * from './theme';
-export * from './components';
-export * from './hooks';
-export * from './types';
-export * from './constants';
-export * from './helpers';
+export * from './theme';
+export * from './components';
+export * from './hooks';
+export * from './types';
+export * from './constants';
+export * from './helpers';

package/src/theme/Provider.tsx

@@ -1,21 +1,21 @@
-import { createContext, FC, ReactNode } from 'react';
-import { common } from './common';
-import { IUiKitTheme } from './types';
-
-export interface IThemedProviderProps {
-  theme: IUiKitTheme;
-  children: ReactNode;
-}
-
-let globalTheme: IUiKitTheme;
-
-export const getTheme = (): IUiKitTheme => globalTheme;
-
-export const ThemeContext = createContext<{
-  theme: IUiKitTheme;
-}>({ theme: common });
-
-export const ThemeProvider: FC<IThemedProviderProps> = ({ theme, children }) => {
-  globalTheme = theme;
-  return <ThemeContext.Provider value={{ theme }}>{children}</ThemeContext.Provider>;
-};
+import { createContext, FC, ReactNode } from 'react';
+import { common } from './common';
+import { IUiKitTheme } from './types';
+
+export interface IThemedProviderProps {
+  theme: IUiKitTheme;
+  children: ReactNode;
+}
+
+let globalTheme: IUiKitTheme;
+
+export const getTheme = (): IUiKitTheme => globalTheme;
+
+export const ThemeContext = createContext<{
+  theme: IUiKitTheme;
+}>({ theme: common });
+
+export const ThemeProvider: FC<IThemedProviderProps> = ({ theme, children }) => {
+  globalTheme = theme;
+  return <ThemeContext.Provider value={{ theme }}>{children}</ThemeContext.Provider>;
+};

package/src/theme/common.ts

@@ -1,163 +1,163 @@
-import { Styles } from 'react-jss';
-import { IUiKitHelpers, IUiKitTheme } from './types';
-
-export const colors = {
-  FONT_MAIN: '#222a37',
-  FONT_MEDIUM: '#505f79',
-  FONT_LABEL: '#7a869a',
-  FONT_DISABLED: '#95a0b3',
-  GREY_ACTIVE: '#95a0b3',
-  BORDER_MAIN: '#d0d6e1',
-  BORDER_LIGHT: '#dde3ed',
-  GREY_HOVER: '#dde3ed',
-  GREY_FOCUS: '#eceff5',
-  GREY_DISABLED: '#eceff5',
-  GREY_BACKGROUND: '#f6f8fc',
-  CLASSIC_WHITE: '#ffffff',
-  RED_ACTIVE: '#912e34',
-  RED_HOVER: '#c13e45',
-  RED_WARNING: '#f14d56',
-  RED_WARNING_LIGHT: '#ff6261',
-  RED_BACKGROUND: '#feedee',
-  ORANGE_BACKGROUND: '#fff4e9',
-  GREEN_BACKGROUND: '#f4f9e6',
-  BLUE_BACKGROUND: '#ebf1ff',
-  // временные константы пока не будет полной темизации
-  GREEN_FOCUS: '#97ba1e',
-  ORANGE_FOCUS: '#ff991f',
-} as const;
-
-export const dimensions = {
-  BORDER_RADIUS_LARGE: 16,
-  BORDER_RADIUS_MEDIUM: 12,
-  BORDER_RADIUS_STD: 8,
-  BORDER_RADIUS_SMALL: 6,
-  BORDER_RADIUS_EXTRA_SMALL: 4,
-  CONTROL_HEIGHT: 48,
-} as const;
-
-export const helpers = {
-  withAngle: (angleSize = 6, position: 'left' | 'right' = 'left', distance = 100): Styles =>
-    ({
-      display: 'inline-block',
-      position: 'relative',
-      marginTop: angleSize * 2 - 1,
-      boxShadow: '0 8px 20px 0 rgba(0, 0, 0, 0.04)',
-      border: ['solid', 1, colors.BORDER_MAIN],
-      borderRadius: dimensions.BORDER_RADIUS_EXTRA_SMALL,
-
-      '&:before': {
-        content: '""',
-        position: 'absolute',
-        top: -angleSize,
-        left: position === 'left' && distance,
-        right: position === 'right' && distance,
-        width: 0,
-        height: 0,
-        borderLeft: [angleSize, 'solid', 'transparent'],
-        borderRight: [angleSize, 'solid', 'transparent'],
-        borderBottom: [angleSize, 'solid', colors.BORDER_MAIN],
-      },
-
-      '&:after': {
-        content: '""',
-        position: 'absolute',
-        top: -angleSize + 1,
-        left: position === 'left' && distance + 1,
-        right: position === 'right' && distance + 1,
-        width: 0,
-        height: 0,
-        borderLeft: [angleSize - 1, 'solid', 'transparent'],
-        borderRight: [angleSize - 1, 'solid', 'transparent'],
-        borderBottom: [angleSize - 1, 'solid', colors.CLASSIC_WHITE],
-      },
-    } as unknown as Styles),
-
-  withScrollBar: {
-    boxSizing: 'border-box',
-    overflow: 'auto',
-
-    // Chromium
-    '@supports selector(::-webkit-scrollbar)': {
-      '&::-webkit-scrollbar': {
-        height: 10,
-        width: 10,
-
-        '&-thumb': {
-          width: 6,
-          minHeight: 30,
-          border: [2, 'solid', 'transparent'],
-          borderRadius: 5,
-          backgroundColor: colors.BORDER_MAIN,
-          backgroundClip: 'padding-box',
-
-          '&:hover': {
-            backgroundColor: colors.GREY_ACTIVE,
-          },
-        },
-
-        '&-track-piece': {
-          backgroundColor: 'transparent',
-        },
-
-        '&-corner': {
-          backgroundColor: 'transparent',
-        },
-      },
-    },
-
-    // Firefox
-    '@supports not selector(::-webkit-scrollbar)': {
-      scrollbarWidth: 'thin',
-      scrollbarColor: `${colors.BORDER_MAIN} transparent`,
-    },
-  },
-} satisfies IUiKitHelpers;
-
-export const SLIDE_UP_ANIMATION_DURATION = 150;
-const SLIDE_UP_POSITION_START = 15;
-const SLIDE_UP_POSITION_END = 0;
-
-export const animations = {
-  defaultTransition: '0.25s ease-in-out',
-  // Если понадобится, сюда можно пробросить параметры через useTheme props
-  slideUp: {
-    'slide-up-enter': {
-      opacity: 0,
-      transform: `translateY(${SLIDE_UP_POSITION_START}px)`,
-    },
-
-    'slide-up-enter-active': {
-      opacity: 1,
-      transform: `translateY(${SLIDE_UP_POSITION_END}px)`,
-      transition: `${SLIDE_UP_ANIMATION_DURATION}ms ease-in-out`,
-      transitionProperty: 'opacity, transform',
-    },
-
-    'slide-up-exit-active': {
-      opacity: 1,
-      transform: `translateY(${SLIDE_UP_POSITION_END}px)`,
-    },
-
-    'slide-up-exit': {
-      opacity: 0,
-      transform: `translateY(${SLIDE_UP_POSITION_START}px)`,
-      transition: `${SLIDE_UP_ANIMATION_DURATION}ms ease-in-out`,
-      transitionProperty: 'opacity, transform',
-    },
-  },
-};
-
-export interface ICommonUiKitTheme extends IUiKitTheme {
-  colors: typeof colors;
-  dimensions: typeof dimensions;
-  helpers: typeof helpers;
-  animations: typeof animations;
-}
-
-export const common: ICommonUiKitTheme = {
-  animations,
-  colors,
-  dimensions,
-  helpers,
-};
+import { Styles } from 'react-jss';
+import { IUiKitHelpers, IUiKitTheme } from './types';
+
+export const colors = {
+  FONT_MAIN: '#222a37',
+  FONT_MEDIUM: '#505f79',
+  FONT_LABEL: '#7a869a',
+  FONT_DISABLED: '#95a0b3',
+  GREY_ACTIVE: '#95a0b3',
+  BORDER_MAIN: '#d0d6e1',
+  BORDER_LIGHT: '#dde3ed',
+  GREY_HOVER: '#dde3ed',
+  GREY_FOCUS: '#eceff5',
+  GREY_DISABLED: '#eceff5',
+  GREY_BACKGROUND: '#f6f8fc',
+  CLASSIC_WHITE: '#ffffff',
+  RED_ACTIVE: '#912e34',
+  RED_HOVER: '#c13e45',
+  RED_WARNING: '#f14d56',
+  RED_WARNING_LIGHT: '#ff6261',
+  RED_BACKGROUND: '#feedee',
+  ORANGE_BACKGROUND: '#fff4e9',
+  GREEN_BACKGROUND: '#f4f9e6',
+  BLUE_BACKGROUND: '#ebf1ff',
+  // временные константы пока не будет полной темизации
+  GREEN_FOCUS: '#97ba1e',
+  ORANGE_FOCUS: '#ff991f',
+} as const;
+
+export const dimensions = {
+  BORDER_RADIUS_LARGE: 16,
+  BORDER_RADIUS_MEDIUM: 12,
+  BORDER_RADIUS_STD: 8,
+  BORDER_RADIUS_SMALL: 6,
+  BORDER_RADIUS_EXTRA_SMALL: 4,
+  CONTROL_HEIGHT: 48,
+} as const;
+
+export const helpers = {
+  withAngle: (angleSize = 6, position: 'left' | 'right' = 'left', distance = 100): Styles =>
+    ({
+      display: 'inline-block',
+      position: 'relative',
+      marginTop: angleSize * 2 - 1,
+      boxShadow: '0 8px 20px 0 rgba(0, 0, 0, 0.04)',
+      border: ['solid', 1, colors.BORDER_MAIN],
+      borderRadius: dimensions.BORDER_RADIUS_EXTRA_SMALL,
+
+      '&:before': {
+        content: '""',
+        position: 'absolute',
+        top: -angleSize,
+        left: position === 'left' && distance,
+        right: position === 'right' && distance,
+        width: 0,
+        height: 0,
+        borderLeft: [angleSize, 'solid', 'transparent'],
+        borderRight: [angleSize, 'solid', 'transparent'],
+        borderBottom: [angleSize, 'solid', colors.BORDER_MAIN],
+      },
+
+      '&:after': {
+        content: '""',
+        position: 'absolute',
+        top: -angleSize + 1,
+        left: position === 'left' && distance + 1,
+        right: position === 'right' && distance + 1,
+        width: 0,
+        height: 0,
+        borderLeft: [angleSize - 1, 'solid', 'transparent'],
+        borderRight: [angleSize - 1, 'solid', 'transparent'],
+        borderBottom: [angleSize - 1, 'solid', colors.CLASSIC_WHITE],
+      },
+    } as unknown as Styles),
+
+  withScrollBar: {
+    boxSizing: 'border-box',
+    overflow: 'auto',
+
+    // Chromium
+    '@supports selector(::-webkit-scrollbar)': {
+      '&::-webkit-scrollbar': {
+        height: 10,
+        width: 10,
+
+        '&-thumb': {
+          width: 6,
+          minHeight: 30,
+          border: [2, 'solid', 'transparent'],
+          borderRadius: 5,
+          backgroundColor: colors.BORDER_MAIN,
+          backgroundClip: 'padding-box',
+
+          '&:hover': {
+            backgroundColor: colors.GREY_ACTIVE,
+          },
+        },
+
+        '&-track-piece': {
+          backgroundColor: 'transparent',
+        },
+
+        '&-corner': {
+          backgroundColor: 'transparent',
+        },
+      },
+    },
+
+    // Firefox
+    '@supports not selector(::-webkit-scrollbar)': {
+      scrollbarWidth: 'thin',
+      scrollbarColor: `${colors.BORDER_MAIN} transparent`,
+    },
+  },
+} satisfies IUiKitHelpers;
+
+export const SLIDE_UP_ANIMATION_DURATION = 150;
+const SLIDE_UP_POSITION_START = 15;
+const SLIDE_UP_POSITION_END = 0;
+
+export const animations = {
+  defaultTransition: '0.25s ease-in-out',
+  // Если понадобится, сюда можно пробросить параметры через useTheme props
+  slideUp: {
+    'slide-up-enter': {
+      opacity: 0,
+      transform: `translateY(${SLIDE_UP_POSITION_START}px)`,
+    },
+
+    'slide-up-enter-active': {
+      opacity: 1,
+      transform: `translateY(${SLIDE_UP_POSITION_END}px)`,
+      transition: `${SLIDE_UP_ANIMATION_DURATION}ms ease-in-out`,
+      transitionProperty: 'opacity, transform',
+    },
+
+    'slide-up-exit-active': {
+      opacity: 1,
+      transform: `translateY(${SLIDE_UP_POSITION_END}px)`,
+    },
+
+    'slide-up-exit': {
+      opacity: 0,
+      transform: `translateY(${SLIDE_UP_POSITION_START}px)`,
+      transition: `${SLIDE_UP_ANIMATION_DURATION}ms ease-in-out`,
+      transitionProperty: 'opacity, transform',
+    },
+  },
+};
+
+export interface ICommonUiKitTheme extends IUiKitTheme {
+  colors: typeof colors;
+  dimensions: typeof dimensions;
+  helpers: typeof helpers;
+  animations: typeof animations;
+}
+
+export const common: ICommonUiKitTheme = {
+  animations,
+  colors,
+  dimensions,
+  helpers,
+};

package/src/theme/index.ts

@@ -1,4 +1,4 @@
-export * from './Provider';
-export * from './common';
-export * from './types';
-export * from './helpers';
+export * from './Provider';
+export * from './common';
+export * from './types';
+export * from './helpers';