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

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/types.ts

@@ -1,3 +1,10 @@
+import {
+  FocusEventHandler,
+  KeyboardEventHandler,
+  MouseEventHandler,
+  PointerEventHandler,
+  ReactNode,
+} from 'react';
 import { Modifier, Placement } from 'react-overlays/usePopper';
 
 export interface IDataAttributes {
@@ -24,3 +31,24 @@ export interface IDropdownWithPopperOptions {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   flipOptions?: Record<string, any>; // только с shouldUsePopper
 }
+
+export interface IDomElementInteractions<T> {
+  onBlur?: FocusEventHandler<T>;
+  onFocus?: FocusEventHandler<T>;
+  onMouseLeave?: MouseEventHandler<T>;
+  onMouseEnter?: MouseEventHandler<T>;
+  onMouseMove?: MouseEventHandler<T>;
+  onMouseDown?: MouseEventHandler<T>;
+  onMouseUp?: MouseEventHandler<T>;
+  onClick?: MouseEventHandler<T>;
+  onKeyDown?: KeyboardEventHandler<T>;
+  onKeyPress?: KeyboardEventHandler<T>;
+  onKeyUp?: KeyboardEventHandler<T>;
+  onPointerLeave?: PointerEventHandler<T>;
+  onPointerDown?: PointerEventHandler<T>;
+  onPointerMove?: PointerEventHandler<T>;
+  onPointerEnter?: PointerEventHandler<T>;
+  onPointerUp?: PointerEventHandler<T>;
+}
+
+export type IRenderNode<T> = ReactNode | ((props: T) => ReactNode);

package/src/vite-env.d.ts

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