@true-engineering/true-react-common-ui-kit 1.5.2 → 1.6.0

package/src/helpers/utils.ts

@@ -1,178 +1,219 @@
-export const transformToKebab = (string: string): string => {
-  let result = '';
-  string.split('').forEach((char) => {
-    if (char.toLowerCase() === char) {
-      result += char;
-    } else {
-      result += `-${char.toLowerCase()}`;
-    }
-  });
-
-  return result;
-};
-
-export const hasExactParent = (element: Element, parent: Element): boolean => {
-  if (element === parent) {
-    return true; // Found the exact parent
-  }
-
-  const parentNode = getParentNode(element);
-
-  if (parentNode === element) {
-    return false; // Reached the top-level HTML element or Shadow DOM host
-  }
-
-  return hasExactParent(parentNode, parent);
-};
-
-export const getParentNode = (element: Element | ShadowRoot): Element =>
-  element.nodeName === 'HTML'
-    ? (element as Element)
-    : (element.parentNode as Element) ?? (element as ShadowRoot).host;
-
-export const getStyleComputedProperty = (
-  element: Element,
-): Partial<CSSStyleDeclaration> =>
-  element.nodeType !== 1 ? {} : getComputedStyle(element, null);
-
-export const getScrollParent = (element: Element | Document): Element => {
-  if (!element) {
-    return document.body;
-  }
-
-  switch (element.nodeName) {
-    case 'HTML':
-    case 'BODY':
-      return (element as Element).ownerDocument.body;
-    case '#document':
-      return (element as Document).body;
-  }
-
-  const { overflow, overflowX, overflowY } =
-    getStyleComputedProperty(element as Element) ?? {};
-  if (
-    /(auto|scroll|overlay)/.test(
-      (overflow ?? '') + (overflowY ?? '') + (overflowX ?? ''),
-    )
-  ) {
-    return element as Element;
-  }
-  return getScrollParent(getParentNode(element as Element));
-};
-
-export const isElementOffScreen = (
-  element: HTMLElement,
-  input?: HTMLElement,
-): boolean => {
-  const el = element;
-  const scrollParent = getScrollParent(element);
-
-  const { scrollHeight: scrollHeightWithElement } = scrollParent;
-  el.hidden = true;
-  const { scrollHeight: scrollHeightWithoutElement } = scrollParent;
-  el.hidden = false;
-
-  const isOffscreen = scrollHeightWithElement !== scrollHeightWithoutElement;
-
-  if (isOffscreen && input !== undefined) {
-    const elRect = el.getBoundingClientRect();
-    const scrollParentRect = scrollParent.getBoundingClientRect();
-    const topOffset = elRect.top - scrollParentRect.top;
-    if (input.clientHeight + el.clientHeight > topOffset) {
-      return false;
-    }
-  }
-
-  return isOffscreen;
-};
-
-export const getNumberInRange = (
-  value: number,
-  min = -Infinity,
-  max = Infinity,
-): number => Math.min(max, Math.max(min, value));
-
-const DEFAULT_THOUSANDS_SEPARATOR = '\u2009';
-
-export const formatStringNumber = (
-  val?: string,
-  separator = DEFAULT_THOUSANDS_SEPARATOR,
-): string => {
-  if (val === undefined) {
-    return '';
-  }
-  const parts = val.split('.');
-
-  parts[0] = parts[0]
-    // убрать лидирующие нули
-    .replace(/^0+(?=\d)/, '')
-    // проставить сепараторы тысяч
-    .replace(/\B(?=(\d{3})+(?!\d))/g, separator);
-  return (parts[1] ?? '').length > 0 ? parts.join('.') : parts[0];
-};
-
-export const formatNumber = (
-  val?: number,
-  separator = DEFAULT_THOUSANDS_SEPARATOR,
-): string => {
-  if (val === undefined || isNaN(val)) {
-    return '';
-  }
-  return formatStringNumber(String(val), separator);
-};
-
-export const removeStringFormat = (val?: string): string =>
-  (val ?? '').replace(',', '.').replace(/\s/g, '');
-
-export const stringToNumber = (val?: string): number | undefined => {
-  const trimmed = removeStringFormat(val);
-  if (trimmed === '') {
-    return undefined;
-  }
-  const num = Number(trimmed);
-  return isNaN(num) ? undefined : num;
-};
-
-export const setCaretPosition = (
-  elem: HTMLInputElement,
-  caretPos: number | null,
-): void => {
-  if (caretPos === null || elem === null) {
-    return;
-  }
-  if (elem.selectionStart) {
-    elem.focus();
-    elem.setSelectionRange(caretPos, caretPos);
-  } else {
-    elem.focus();
-  }
-};
-
-export const isSpaceChar = (char?: string): boolean =>
-  char !== undefined && char.match(/\s/) !== null;
-
-export const isInt = (n: number): boolean => n % 1 === 0;
-
-export const getNumberLength = (n?: number): number =>
-  n === undefined || isNaN(n) ? 0 : n.toString().length;
-
-/**
- * Проверяет, что `val` не `null`, не `undefined` и не пустая строка
- */
-export const isNotEmpty = <T>(val: T | null | undefined): val is T =>
-  typeof val === 'string'
-    ? val.trim() !== ''
-    : val !== null && val !== undefined;
-
-export const trimStringToMaxLength = (val: string, maxLength: number) =>
-  val.length > maxLength ? val.slice(0, maxLength) : val;
-
-export const getTestId = (
-  testId: string | undefined,
-  postfix?: string | number,
-): string | undefined => {
-  if (!isNotEmpty(testId)) {
-    return undefined;
-  }
-  return isNotEmpty(postfix) ? `${testId}-${postfix}` : testId;
-};
+import { IDataAttributes } from '../types';
+import { HTMLAttributes, KeyboardEvent, MouseEvent } from 'react';
+
+export const transformToKebab = (string: string): string => {
+  let result = '';
+  string.split('').forEach((char) => {
+    if (char.toLowerCase() === char) {
+      result += char;
+    } else {
+      result += `-${char.toLowerCase()}`;
+    }
+  });
+
+  return result;
+};
+
+export const hasExactParent = (element: Element, parent: Element): boolean => {
+  if (element === parent) {
+    return true; // Found the exact parent
+  }
+
+  const parentNode = getParentNode(element);
+
+  if (parentNode === element) {
+    return false; // Reached the top-level HTML element or Shadow DOM host
+  }
+
+  return hasExactParent(parentNode, parent);
+};
+
+export const getParentNode = (element: Element | ShadowRoot): Element =>
+  element.nodeName === 'HTML'
+    ? (element as Element)
+    : (element.parentNode as Element) ?? (element as ShadowRoot).host;
+
+export const getStyleComputedProperty = (
+  element: Element,
+): Partial<CSSStyleDeclaration> =>
+  element.nodeType !== 1 ? {} : getComputedStyle(element, null);
+
+export const getScrollParent = (element: Element | Document): Element => {
+  if (!element) {
+    return document.body;
+  }
+
+  switch (element.nodeName) {
+    case 'HTML':
+    case 'BODY':
+      return (element as Element).ownerDocument.body;
+    case '#document':
+      return (element as Document).body;
+  }
+
+  const { overflow, overflowX, overflowY } =
+    getStyleComputedProperty(element as Element) ?? {};
+  if (
+    /(auto|scroll|overlay)/.test(
+      (overflow ?? '') + (overflowY ?? '') + (overflowX ?? ''),
+    )
+  ) {
+    return element as Element;
+  }
+  return getScrollParent(getParentNode(element as Element));
+};
+
+export const isElementOffScreen = (
+  element: HTMLElement,
+  input?: HTMLElement,
+): boolean => {
+  const el = element;
+  const scrollParent = getScrollParent(element);
+
+  const { scrollHeight: scrollHeightWithElement } = scrollParent;
+  el.hidden = true;
+  const { scrollHeight: scrollHeightWithoutElement } = scrollParent;
+  el.hidden = false;
+
+  const isOffscreen = scrollHeightWithElement !== scrollHeightWithoutElement;
+
+  if (isOffscreen && input !== undefined) {
+    const elRect = el.getBoundingClientRect();
+    const scrollParentRect = scrollParent.getBoundingClientRect();
+    const topOffset = elRect.top - scrollParentRect.top;
+    if (input.clientHeight + el.clientHeight > topOffset) {
+      return false;
+    }
+  }
+
+  return isOffscreen;
+};
+
+export const getNumberInRange = (
+  value: number,
+  min = -Infinity,
+  max = Infinity,
+): number => Math.min(max, Math.max(min, value));
+
+const DEFAULT_THOUSANDS_SEPARATOR = '\u2009';
+
+export const formatStringNumber = (
+  val?: string,
+  separator = DEFAULT_THOUSANDS_SEPARATOR,
+): string => {
+  if (val === undefined) {
+    return '';
+  }
+  const parts = val.split('.');
+
+  parts[0] = parts[0]
+    // убрать лидирующие нули
+    .replace(/^0+(?=\d)/, '')
+    // проставить сепараторы тысяч
+    .replace(/\B(?=(\d{3})+(?!\d))/g, separator);
+  return (parts[1] ?? '').length > 0 ? parts.join('.') : parts[0];
+};
+
+export const formatNumber = (
+  val?: number,
+  separator = DEFAULT_THOUSANDS_SEPARATOR,
+): string => {
+  if (val === undefined || isNaN(val)) {
+    return '';
+  }
+  return formatStringNumber(String(val), separator);
+};
+
+export const removeStringFormat = (val?: string): string =>
+  (val ?? '').replace(',', '.').replace(/\s/g, '');
+
+export const stringToNumber = (val?: string): number | undefined => {
+  const trimmed = removeStringFormat(val);
+  if (trimmed === '') {
+    return undefined;
+  }
+  const num = Number(trimmed);
+  return isNaN(num) ? undefined : num;
+};
+
+export const setCaretPosition = (
+  elem: HTMLInputElement,
+  caretPos: number | null,
+): void => {
+  if (caretPos === null || elem === null) {
+    return;
+  }
+  if (elem.selectionStart) {
+    elem.focus();
+    elem.setSelectionRange(caretPos, caretPos);
+  } else {
+    elem.focus();
+  }
+};
+
+export const isSpaceChar = (char?: string): boolean =>
+  char !== undefined && char.match(/\s/) !== null;
+
+export const isInt = (n: number): boolean => n % 1 === 0;
+
+export const getNumberLength = (n?: number): number =>
+  n === undefined || isNaN(n) ? 0 : n.toString().length;
+
+/**
+ * Проверяет, что `val` не `null`, не `undefined` и не пустая строка
+ */
+export const isNotEmpty = <T>(val: T | null | undefined): val is T =>
+  typeof val === 'string'
+    ? val.trim() !== ''
+    : val !== null && val !== undefined;
+
+export const trimStringToMaxLength = (val: string, maxLength: number) =>
+  val.length > maxLength ? val.slice(0, maxLength) : val;
+
+export const addDataAttributes = (
+  data: IDataAttributes = {},
+): IDataAttributes =>
+  Object.fromEntries(
+    Object.entries(data).map(([key, value]) =>
+      isNotEmpty(value) ? [`data-${transformToKebab(key)}`, value] : [],
+    ),
+  );
+
+export const addDataTestId = (
+  ...args: Parameters<typeof getTestId>
+): { 'data-testid': string } | undefined => {
+  const testId = getTestId(...args);
+  return isNotEmpty(testId) ? { 'data-testid': testId } : undefined;
+};
+
+export const getTestId = (
+  testId: string | undefined,
+  postfix?: string | number,
+): string | undefined => {
+  if (!isNotEmpty(testId)) {
+    return undefined;
+  }
+  return isNotEmpty(postfix) ? `${testId}-${postfix}` : testId;
+};
+
+export const getSelectKeyHandler =
+  (cb: (e: KeyboardEvent) => void): ((e: KeyboardEvent) => void) =>
+  (e) => {
+    if (e.code === 'Enter' || e.code === 'NumpadEnter') {
+      cb(e);
+    }
+  };
+
+export const addClickHandler = (
+  cb?: (e: MouseEvent | KeyboardEvent) => void,
+  hasAction = true,
+): HTMLAttributes<unknown> =>
+  hasAction && isNotEmpty(cb)
+    ? {
+        tabIndex: 0,
+        onClick: cb as (e: MouseEvent) => void,
+        onKeyDown: getSelectKeyHandler(cb),
+      }
+    : {
+        tabIndex: -1,
+      };

package/src/hooks/index.ts

@@ -1,6 +1,6 @@
-export * from './use-is-mounted';
-export * from './use-on-click-outside';
-export * from './use-theme';
-export * from './use-dropdown';
-export * from './use-tweak-styles';
-export * from './use-did-mount-effect';
+export * from './use-is-mounted';
+export * from './use-on-click-outside';
+export * from './use-theme';
+export * from './use-dropdown';
+export * from './use-tweak-styles';
+export * from './use-did-mount-effect';

package/src/hooks/use-did-mount-effect.ts

@@ -1,21 +1,21 @@
-import { DependencyList, EffectCallback, useEffect, useRef } from 'react';
-
-export const useDidMountEffect = (
-  effect: EffectCallback,
-  dependencies: DependencyList,
-): void => {
-  const isMountedRef = useRef(false);
-  useEffect(() => {
-    let unmount: ReturnType<EffectCallback>;
-    if (isMountedRef.current) {
-      unmount = effect();
-    } else {
-      isMountedRef.current = true;
-    }
-    return () => {
-      if (unmount !== undefined) {
-        unmount();
-      }
-    };
-  }, dependencies);
-};
+import { DependencyList, EffectCallback, useEffect, useRef } from 'react';
+
+export const useDidMountEffect = (
+  effect: EffectCallback,
+  dependencies: DependencyList,
+): void => {
+  const isMountedRef = useRef(false);
+  useEffect(() => {
+    let unmount: ReturnType<EffectCallback>;
+    if (isMountedRef.current) {
+      unmount = effect();
+    } else {
+      isMountedRef.current = true;
+    }
+    return () => {
+      if (unmount !== undefined) {
+        unmount();
+      }
+    };
+  }, dependencies);
+};

package/src/hooks/use-dropdown.ts

@@ -1,85 +1,85 @@
-import { DependencyList, useEffect } from 'react';
-import usePopper, { VirtualElement } from 'react-overlays/usePopper';
-
-import { IDropdownWithPopperOptions } from '../types';
-import { getScrollParent, minWidthModifier } from '../helpers';
-
-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) {
-    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 { IDropdownWithPopperOptions } from '../types';
+import { getScrollParent, minWidthModifier } from '../helpers';
+
+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) {
+    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, []);
+};