@true-engineering/true-react-common-ui-kit 4.0.0-alpha4 → 4.0.0-alpha42

package/src/helpers/index.ts

@@ -1,3 +1,3 @@
-export * from './popper-helpers';
-export * from './phone';
-export * from './misc';
+export * from './popper-helpers';
+export * from './phone';
+export * from './misc';

package/src/helpers/misc.ts

@@ -1,160 +1,159 @@
-import hexToRgba from 'hex-to-rgba';
-import {
-  isNotEmpty,
-  isString,
-  isStringNotEmpty,
-} from '@true-engineering/true-react-platform-helpers';
-import { IDataAttributes } from '../types';
-
-export const rgba = hexToRgba;
-
-/** @deprecated Используйте `toKebabCase` из `true-react-platform-helpers` */
-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 | Document): Element =>
-  element.nodeName === 'HTML' || element === document
-    ? (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 getNumberLength = (n?: number): number =>
-  n === undefined || isNaN(n) ? 0 : n.toString().length;
-
-export const trimStringToMaxLength = (val: string, maxLength: number): string =>
-  val.length > maxLength ? val.slice(0, maxLength) : val;
-
-/** @deprecated Используйте `addDataAttributes` из `true-react-platform-helpers` */
-export const addDataAttributes = (data: IDataAttributes = {}): IDataAttributes =>
-  Object.fromEntries(
-    Object.entries(data).map(([key, value]) =>
-      (isString(value) && isStringNotEmpty(value)) || isNotEmpty(value)
-        ? [`data-${transformToKebab(key)}`, value]
-        : [],
-    ),
-  );
+import {
+  isNotEmpty,
+  isString,
+  isStringNotEmpty,
+} from '@true-engineering/true-react-platform-helpers';
+import { IDataAttributes } from '../types';
+
+export { default as rgba } from 'hex-to-rgba';
+
+/** @deprecated Используйте `toKebabCase` из `true-react-platform-helpers` */
+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 | Document): Element =>
+  element.nodeName === 'HTML' || element === document
+    ? (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 getNumberLength = (n?: number): number =>
+  n === undefined || isNaN(n) ? 0 : n.toString().length;
+
+export const trimStringToMaxLength = (val: string, maxLength: number): string =>
+  val.length > maxLength ? val.slice(0, maxLength) : val;
+
+/** @deprecated Используйте `addDataAttributes` из `true-react-platform-helpers` */
+export const addDataAttributes = (data: IDataAttributes = {}): IDataAttributes =>
+  Object.fromEntries(
+    Object.entries(data).map(([key, value]) =>
+      (isString(value) && isStringNotEmpty(value)) || isNotEmpty(value)
+        ? [`data-${transformToKebab(key)}`, value]
+        : [],
+    ),
+  );

package/src/helpers/phone.ts

@@ -1,91 +1,95 @@
-import { isNotEmpty, isEmpty } from '@true-engineering/true-react-platform-helpers';
-import type { IPhoneInfo, IPhoneValue } from '../components';
-import { phoneInfo } from '../constants';
-
-export const findCountryByCode = (
-  countryCode?: string,
-  countriesList = phoneInfo,
-): IPhoneInfo | undefined =>
-  isNotEmpty(countryCode)
-    ? countriesList.find((info) => info.countryCode === countryCode)
-    : undefined;
-
-export const findCountryIndexByCode = (countryCode?: string, countriesList = phoneInfo): number =>
-  isNotEmpty(countryCode)
-    ? countriesList.findIndex((info) => info.countryCode === countryCode)
-    : -1;
-
-export const getCountryTextByLocale = (country: IPhoneInfo, locale: string): string =>
-  locale.toLowerCase() === 'ru' ? country.countryRu : country.countryEn;
-
-/**
- * Мутирует countriesList!
- */
-export const sortCountriesByLocale = (countriesList: IPhoneInfo[], locale: string): IPhoneInfo[] =>
-  countriesList.sort((countryA, countryB) =>
-    getCountryTextByLocale(countryA, locale).localeCompare(
-      getCountryTextByLocale(countryB, locale),
-    ),
-  );
-
-export const checkSearchStringInCountry = (country: IPhoneInfo, searchString: string): boolean => {
-  const checkValue = searchString.toLowerCase().trim().replace('+', '');
-
-  const possibleValues = [
-    country.countryRu,
-    country.countryEn,
-    ...country.countryRu.split(' '),
-    ...country.countryEn.split(' '),
-    country.dialCode,
-  ].map((part) => part.toLowerCase());
-
-  return possibleValues.some((v) => v.startsWith(checkValue));
-};
-
-export const getFullPhone = (phone?: IPhoneValue): string =>
-  (phone?.dialCode ?? '') + (phone?.phoneNumber ?? '');
-
-export const getCountryCodeFromPhone = (phoneWithCode: string): string | undefined => {
-  // попробуем найти уникальный код страны fullCode (dialCode + arealCode)
-  let countryCode = phoneInfo.find((info) =>
-    info.fullCodes.some((code) => phoneWithCode.startsWith(code)),
-  )?.countryCode;
-
-  if (isEmpty(countryCode) && isNotEmpty(phoneWithCode)) {
-    // если не нашли уникальный fullCode (dialCode + arealCode),
-    // то пробуем найти dialCode и выбираем с наименьшим Priority
-    countryCode = phoneInfo
-      .filter((info) => phoneWithCode.startsWith(info.dialCode))
-      .sort(
-        (infoA, infoB) => (infoA.dialCodePriority ?? 1000) - (infoB.dialCodePriority ?? 1000),
-      )[0]?.countryCode;
-  }
-
-  return countryCode;
-};
-
-export const getPhoneObjFromString = (fullPhone: string, countryCode?: string): IPhoneValue => {
-  const newCountryCode = countryCode ?? getCountryCodeFromPhone(fullPhone);
-  const dialCode = findCountryByCode(newCountryCode)?.dialCode;
-  const phoneNumber = fullPhone.slice(dialCode?.length);
-
-  return { dialCode, phoneNumber, countryCode: newCountryCode };
-};
-
-export const DEFAULT_PHONE_MASK = '+ 9 999 999 999 999 99';
-
-export const getPhoneMask = (countryCode?: string): string => {
-  let mask = DEFAULT_PHONE_MASK;
-  if (isNotEmpty(countryCode)) {
-    const countrySettings = findCountryByCode(countryCode);
-
-    if (countrySettings !== undefined) {
-      const dialCodeLength = countrySettings.dialCode.length;
-      const areaAndPhoneMask =
-        countrySettings.phoneMask ?? mask.substring(2, mask.length - dialCodeLength);
-      mask = `+ ${'9'.repeat(dialCodeLength)} ${areaAndPhoneMask}`;
-    }
-  }
-
-  return mask;
-};
+import { isNotEmpty, isStringEmpty } from '@true-engineering/true-react-platform-helpers';
+import type { IPhoneInfo, IPhoneValue } from '../components';
+import { phoneInfo } from '../constants';
+
+export const findCountryByCode = (
+  countryCode?: string,
+  countriesList = phoneInfo,
+): IPhoneInfo | undefined =>
+  isNotEmpty(countryCode)
+    ? countriesList.find((info) => info.countryCode === countryCode)
+    : undefined;
+
+export const findCountryIndexByCode = (countryCode?: string, countriesList = phoneInfo): number =>
+  isNotEmpty(countryCode)
+    ? countriesList.findIndex((info) => info.countryCode === countryCode)
+    : -1;
+
+export const getCountryTextByLocale = (country: IPhoneInfo, locale: string): string =>
+  locale.toLowerCase() === 'ru' ? country.countryRu : country.countryEn;
+
+/**
+ * Мутирует countriesList!
+ */
+export const sortCountriesByLocale = (countriesList: IPhoneInfo[], locale: string): IPhoneInfo[] =>
+  countriesList.sort((countryA, countryB) =>
+    getCountryTextByLocale(countryA, locale).localeCompare(
+      getCountryTextByLocale(countryB, locale),
+    ),
+  );
+
+export const checkSearchStringInCountry = (country: IPhoneInfo, searchString: string): boolean => {
+  const checkValue = searchString.toLowerCase().trim().replace('+', '');
+
+  const possibleValues = [
+    country.countryRu,
+    country.countryEn,
+    ...country.countryRu.split(' '),
+    ...country.countryEn.split(' '),
+    country.dialCode,
+  ].map((part) => part.toLowerCase());
+
+  return possibleValues.some((v) => v.startsWith(checkValue));
+};
+
+export const getFullPhone = (phone?: IPhoneValue): string =>
+  (phone?.dialCode ?? '') + (phone?.phoneNumber ?? '');
+
+export const getCountryCodeFromPhone = (phoneWithCode: string): string | undefined => {
+  if (isStringEmpty(phoneWithCode)) {
+    return;
+  }
+
+  // ищем страны, для которых phoneWithCode начинается с fullCode (dialCode + areaCode)
+  const matchedCountries = phoneInfo.filter((info) =>
+    info.fullCodes.some((fullCode) => phoneWithCode.startsWith(fullCode)),
+  );
+
+  // если нашлась всего одна — ок, выдаём её
+  if (matchedCountries.length === 1) {
+    return matchedCountries[0].countryCode;
+  }
+
+  // если нашлось несколько, выбираем страну с наименьшим dialCodePriority (0 — самая приоритетная)
+  const highestPriorityCountries = phoneInfo
+    .filter((info) => phoneWithCode.startsWith(info.dialCode))
+    .sort((a, b) => (a.dialCodePriority ?? 1000) - (b.dialCodePriority ?? 1000));
+
+  return highestPriorityCountries.at(0)?.countryCode;
+};
+
+export const getPhoneObjFromString = (fullPhone: string, countryCode?: string): IPhoneValue => {
+  const newCountryCode = countryCode ?? getCountryCodeFromPhone(fullPhone);
+  const dialCode = findCountryByCode(newCountryCode)?.dialCode;
+  const phoneNumber = fullPhone.slice(dialCode?.length);
+
+  return { dialCode, phoneNumber, countryCode: newCountryCode };
+};
+
+export const DEFAULT_PHONE_MASK = '+ 9 999 999 999 999 99';
+
+export const getPhoneMask = (countryCode?: string): string => {
+  let mask = DEFAULT_PHONE_MASK;
+  if (isNotEmpty(countryCode)) {
+    const countrySettings = findCountryByCode(countryCode);
+
+    if (countrySettings !== undefined) {
+      const dialCodeLength = countrySettings.dialCode.length;
+      const areaAndPhoneMask =
+        countrySettings.phoneMask ?? mask.substring(2, mask.length - dialCodeLength);
+      mask = `+ ${'9'.repeat(dialCodeLength)} ${areaAndPhoneMask}`;
+    }
+  }
+
+  return mask;
+};

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

@@ -1,7 +1,10 @@
-export * from './use-is-mounted';
-export * from './use-on-click-outside';
-export * from './use-dropdown';
-export * from './use-tweak-styles';
-export * from './use-did-mount-effect';
-export * from './use-mixed-styles';
-export * from './use-merged-refs';
+export * from './use-did-mount-effect';
+export * from './use-dropdown';
+export * from './use-intersection-ref';
+export * from './use-is-mounted';
+export * from './use-latest-ref';
+export * from './use-merge';
+export * from './use-merged-refs';
+export * from './use-mixed-styles';
+export * from './use-on-click-outside';
+export * from './use-tweak-styles';

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

@@ -1,18 +1,18 @@
-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);
+};