@sima-land/ui-nucleons 44.2.10 → 45.0.0-alpha.0

package/helpers/get-declination.d.ts

@@ -4,4 +4,8 @@
  * @param titles Массив со склонениями слова. Например: ['отзыв', 'отзыва', 'отзывов'].
  * @return Слово в нужном склонении.
  */
-export default function getDeclination(number: number, titles: string[]): string;
+export declare function getDeclination(number: number, titles: string[]): string;
+/**
+ * @deprecated Следует использовать именованный экспорт. Экспорт по умолчанию будет удалён в будущем.
+ */
+export default getDeclination;

package/helpers/get-declination.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.getDeclination = void 0;
 /**
  * Возвращает нужное склонение из переданного списка по переданному числу.
  * @param number Число, используемое для склонения.
@@ -14,4 +15,8 @@ function getDeclination(number, titles) {
         : cases[positiveNumber % 10 < 5 ? positiveNumber % 10 : 5];
     return titles[index];
 }
+exports.getDeclination = getDeclination;
+/**
+ * @deprecated Следует использовать именованный экспорт. Экспорт по умолчанию будет удалён в будущем.
+ */
 exports.default = getDeclination;

package/helpers/get-fraction-depth.d.ts

@@ -3,4 +3,4 @@
  * @param fraction Дробь.
  * @return Разрядность / Количество символов после точки.
  */
-export declare const getFractionDepth: (fraction?: number | null) => number;
+export declare function getFractionDepth(fraction?: number | null): number;

package/helpers/get-fraction-depth.js

@@ -6,8 +6,8 @@ exports.getFractionDepth = void 0;
  * @param fraction Дробь.
  * @return Разрядность / Количество символов после точки.
  */
-const getFractionDepth = (fraction = null) => {
+function getFractionDepth(fraction = null) {
     const fractionString = Number(fraction).toString();
     return fractionString.includes('.') ? fractionString.length - fractionString.indexOf('.') - 1 : 0;
-};
+}
 exports.getFractionDepth = getFractionDepth;

package/helpers/get-no-index.d.ts

@@ -1,8 +1,8 @@
 /**
  * Возвращает объект с исходной строкой в тэге <!--noindex--> для запрета отслеживания контента поисковиками.
- * @param str Исходная строка.
+ * @param content Исходная строка.
  * @return Объект, содержащий обернутую строку, для использования c атрибутом dangerouslySetInnerHTML.
  */
-export declare const getNoIndex: (str: any) => {
+export declare function getNoIndex(content: unknown): {
     __html: string;
 } | undefined;

package/helpers/get-no-index.js

@@ -1,11 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getNoIndex = void 0;
-const lodash_1 = require("lodash");
 /**
  * Возвращает объект с исходной строкой в тэге <!--noindex--> для запрета отслеживания контента поисковиками.
- * @param str Исходная строка.
+ * @param content Исходная строка.
  * @return Объект, содержащий обернутую строку, для использования c атрибутом dangerouslySetInnerHTML.
  */
-const getNoIndex = (str) => str ? { __html: `<!--noindex-->${(0, lodash_1.toString)(str)}<!--/noindex-->` } : undefined;
+function getNoIndex(content) {
+    return content ? { __html: `<!--noindex-->${String(content)}<!--/noindex-->` } : undefined;
+}
 exports.getNoIndex = getNoIndex;

package/helpers/get-relative-pos.d.ts

@@ -4,8 +4,11 @@
  * @param parent Элемент, относительно которого необходимо определить позицию.
  * @return Относительная позиция элемента.
  */
-declare const getRelativePos: (target: Element, parent?: HTMLElement | null) => {
+export declare function getRelativePos(target: Element, parent?: HTMLElement | null): {
     x: number;
     y: number;
 };
+/**
+ * @deprecated Следует использовать именованный экспорт. Экспорт по умолчанию будет удалён в будущем.
+ */
 export default getRelativePos;

package/helpers/get-relative-pos.js

@@ -1,17 +1,22 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.getRelativePos = void 0;
 /**
  * Определяет позицию элемента относительно другого заданного элемента.
  * @param target Элемент для определения позиции.
  * @param parent Элемент, относительно которого необходимо определить позицию.
  * @return Относительная позиция элемента.
  */
-const getRelativePos = (target, parent = target.parentElement) => {
+function getRelativePos(target, parent = target.parentElement) {
     const targetBounds = target.getBoundingClientRect();
     const parentBounds = parent === null || parent === void 0 ? void 0 : parent.getBoundingClientRect();
     return {
         x: targetBounds.left - ((parentBounds === null || parentBounds === void 0 ? void 0 : parentBounds.left) || 0),
         y: targetBounds.top - ((parentBounds === null || parentBounds === void 0 ? void 0 : parentBounds.top) || 0),
     };
-};
+}
+exports.getRelativePos = getRelativePos;
+/**
+ * @deprecated Следует использовать именованный экспорт. Экспорт по умолчанию будет удалён в будущем.
+ */
 exports.default = getRelativePos;

package/helpers/get-scroll-parent.d.ts

@@ -3,5 +3,4 @@
  * @param element Элемент.
  * @return Ближайший родительский элемент с возможностью прокрутки.
  */
-declare const getScrollParent: (element: Element | undefined | null) => HTMLElement;
-export { getScrollParent };
+export declare function getScrollParent(element: Element | undefined | null): HTMLElement;

package/helpers/get-scroll-parent.js

@@ -1,27 +1,27 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getScrollParent = void 0;
-// не надо использовать глобальный поиск здесь, чтобы regex не сохранял lastIndex
+// ВАЖНО: не надо использовать глобальный поиск здесь, чтобы regex не сохранял lastIndex
 const regex = /(auto|scroll)/;
 /**
  * Определяет, имеет ли элемент возможность прокручиваться.
  * @param element Элемент.
  * @return Имеет ли элемент возможность прокручиваться.
  */
-const isScrollable = (element) => {
+function isScrollable(element) {
     let result = false;
     if (element) {
         const styles = getComputedStyle(element);
         result = regex.test(styles.overflow + styles.overflowX + styles.overflowY);
     }
     return result;
-};
+}
 /**
  * Возвращает ближайший родительский элемент с возможностью прокрутки.
  * @param element Элемент.
  * @return Ближайший родительский элемент с возможностью прокрутки.
  */
-const getScrollParent = (element) => {
+function getScrollParent(element) {
     let result;
     if (!element || element === document.body) {
         // @todo прокрутка на body не работает с addEventListener, https://stackoverflow.com/a/43632204/13166471
@@ -34,5 +34,5 @@ const getScrollParent = (element) => {
             : getScrollParent(element.parentElement);
     }
     return result;
-};
+}
 exports.getScrollParent = getScrollParent;

package/helpers/is-browser.d.ts

@@ -2,5 +2,8 @@
  * Проверка находимся в браузере или нет.
  * @return Если в браузере true, если нет false.
  */
-declare const isBrowser: () => boolean;
+export declare function isBrowser(): boolean;
+/**
+ * @deprecated Следует использовать именованный экспорт. Экспорт по умолчанию будет удалён в будущем.
+ */
 export default isBrowser;

package/helpers/is-browser.js

@@ -1,8 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.isBrowser = void 0;
 /**
  * Проверка находимся в браузере или нет.
  * @return Если в браузере true, если нет false.
  */
-const isBrowser = () => typeof window !== 'undefined';
+function isBrowser() {
+    return typeof window !== 'undefined';
+}
+exports.isBrowser = isBrowser;
+/**
+ * @deprecated Следует использовать именованный экспорт. Экспорт по умолчанию будет удалён в будущем.
+ */
 exports.default = isBrowser;

package/helpers/is-fully-scrolled.d.ts

@@ -5,6 +5,6 @@
  * @param options.threshold Отступ от конца.
  * @return Прокручен ли переданный элемент до конца по вертикали.
  */
-export declare const isFullyScrolled: (element?: HTMLElement | undefined | null, { threshold }?: {
-    threshold?: number | undefined;
-}) => boolean;
+export declare function isFullyScrolled(element?: HTMLElement | undefined | null, { threshold }?: {
+    threshold?: number;
+}): boolean;

package/helpers/is-fully-scrolled.js

@@ -8,7 +8,7 @@ exports.isFullyScrolled = void 0;
  * @param options.threshold Отступ от конца.
  * @return Прокручен ли переданный элемент до конца по вертикали.
  */
-const isFullyScrolled = (element, { threshold = 0 } = {}) => {
+function isFullyScrolled(element, { threshold = 0 } = {}) {
     let result = false;
     if (element) {
         const { scrollTop, clientHeight, scrollHeight } = element;
@@ -16,5 +16,5 @@ const isFullyScrolled = (element, { threshold = 0 } = {}) => {
         result = bottom >= scrollHeight;
     }
     return result;
-};
+}
 exports.isFullyScrolled = isFullyScrolled;

package/helpers/is-touch-device.d.ts

@@ -2,4 +2,4 @@
  * Проверяет поддержку touch событий.
  * @return True - если поддерживает, false - если нет.
  */
-export declare const isTouchDevice: () => boolean;
+export declare function isTouchDevice(): boolean;

package/helpers/is-touch-device.js

@@ -1,13 +1,12 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.isTouchDevice = void 0;
-const is_browser_1 = __importDefault(require("./is-browser"));
+const is_browser_1 = require("./is-browser");
 /**
  * Проверяет поддержку touch событий.
  * @return True - если поддерживает, false - если нет.
  */
-const isTouchDevice = () => (0, is_browser_1.default)() && 'ontouchstart' in window;
+function isTouchDevice() {
+    return (0, is_browser_1.isBrowser)() && 'ontouchstart' in window;
+}
 exports.isTouchDevice = isTouchDevice;

package/helpers/layer.d.ts

@@ -7,4 +7,4 @@ export declare const LayerProvider: import("react").Provider<number>;
  * Хук, возвращающий индекс текущего "слоя".
  * @return Индекс.
  */
-export declare const useLayer: () => number;
+export declare function useLayer(): number;

package/helpers/layer.js

@@ -11,8 +11,8 @@ exports.LayerProvider = LayerContext.Provider;
  * Хук, возвращающий индекс текущего "слоя".
  * @return Индекс.
  */
-const useLayer = () => {
+function useLayer() {
     const currentLayer = (0, react_1.useContext)(LayerContext);
     return currentLayer;
-};
+}
 exports.useLayer = useLayer;

package/helpers/max-index-of.d.ts

@@ -3,5 +3,8 @@
  * @param list Список.
  * @return Максимальный индекс.
  */
-declare const maxIndexOf: (list?: ArrayLike<any> | null | undefined) => number;
+export declare function maxIndexOf(list?: ArrayLike<any> | null): number;
+/**
+ * @deprecated Следует использовать именованный экспорт. Экспорт по умолчанию будет удалён в будущем.
+ */
 export default maxIndexOf;

package/helpers/max-index-of.js

@@ -1,15 +1,20 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.maxIndexOf = void 0;
 /**
  * Возвращает максимальный индекс списка.
  * @param list Список.
  * @return Максимальный индекс.
  */
-const maxIndexOf = (list) => {
+function maxIndexOf(list) {
     let maxIndex = -1;
     if (list) {
         maxIndex = list.length > 0 ? list.length - 1 : 0;
     }
     return maxIndex;
-};
+}
+exports.maxIndexOf = maxIndexOf;
+/**
+ * @deprecated Следует использовать именованный экспорт. Экспорт по умолчанию будет удалён в будущем.
+ */
 exports.default = maxIndexOf;

package/helpers/media-query-list.d.ts

@@ -4,6 +4,6 @@
  * @param fn Обработчик.
  * @return Интерфейс отписки.
  */
-export declare const subscribe: (mql: MediaQueryList, fn: (e: MediaQueryListEvent) => void) => {
+export declare function subscribe(mql: MediaQueryList, fn: (e: MediaQueryListEvent) => void): {
     unsubscribe: () => void;
 };

package/helpers/media-query-list.js

@@ -7,7 +7,7 @@ exports.subscribe = void 0;
  * @param fn Обработчик.
  * @return Интерфейс отписки.
  */
-const subscribe = (mql, fn) => {
+function subscribe(mql, fn) {
     if (mql.addEventListener) {
         mql.addEventListener('change', fn);
     }
@@ -24,5 +24,5 @@ const subscribe = (mql, fn) => {
             }
         },
     };
-};
+}
 exports.subscribe = subscribe;

package/helpers/on.d.ts

@@ -7,5 +7,8 @@ import React from 'react';
  * @param options Опции подписки.
  * @return Функция отписки.
  */
-declare const on: <T extends Event | React.SyntheticEvent<Element, Event>>(target: EventTarget, eventNames: string, callback: (e: T) => void, options?: boolean | EventListenerOptions | AddEventListenerOptions | undefined) => () => undefined;
+export declare function on<T extends Event | React.SyntheticEvent>(target: EventTarget, eventNames: string, callback: (e: T) => void, options?: boolean | EventListenerOptions | AddEventListenerOptions | undefined): () => undefined;
+/**
+ * @deprecated Следует использовать именованный экспорт. Экспорт по умолчанию будет удалён в будущем.
+ */
 export default on;

package/helpers/on.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.on = void 0;
 /**
  * Выполняет подписку на событие целевого объекта.
  * @param target Целевой объект.
@@ -8,7 +9,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
  * @param options Опции подписки.
  * @return Функция отписки.
  */
-const on = (target, eventNames, callback, options) => {
+function on(target, eventNames, callback, options) {
     const eventNamesList = eventNames.split(' ');
     // обернуто чтобы прокинуть T
     // eslint-disable-next-line require-jsdoc
@@ -19,5 +20,9 @@ const on = (target, eventNames, callback, options) => {
     return () => void eventNamesList.forEach(eventName => {
         target.removeEventListener(eventName, wrapped, options);
     });
-};
+}
+exports.on = on;
+/**
+ * @deprecated Следует использовать именованный экспорт. Экспорт по умолчанию будет удалён в будущем.
+ */
 exports.default = on;

package/helpers/point.d.ts

@@ -8,5 +8,8 @@ export interface IPoint {
  * @param y Координата по оси Y.
  * @return Объект представляющий точку.
  */
-declare const Point: (x?: number, y?: number) => IPoint;
+export declare function Point(x?: number, y?: number): IPoint;
+/**
+ * @deprecated Следует использовать именованный экспорт. Экспорт по умолчанию будет удалён в будущем.
+ */
 export default Point;

package/helpers/point.js

@@ -1,10 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.Point = void 0;
 /**
  * Возвращает объект представляющий точку в двухмерном пространстве.
  * @param x Координата по оси X.
  * @param y Координата по оси Y.
  * @return Объект представляющий точку.
  */
-const Point = (x = 0, y = 0) => ({ x, y });
+function Point(x = 0, y = 0) {
+    return { x, y };
+}
+exports.Point = Point;
+/**
+ * @deprecated Следует использовать именованный экспорт. Экспорт по умолчанию будет удалён в будущем.
+ */
 exports.default = Point;

package/helpers/rename.d.ts

@@ -1,7 +1,9 @@
 /// <reference types="lodash" />
-declare type ObjectKey = string | number | symbol;
+/// <reference types="lodash" />
+type ObjectKey = string | number | symbol;
 /**
  * Переименовывает свойство, возвращая новый объект.
+ * @deprecated Эта функция не относится напрямую к работе с UI и будет удалена в будущем.
  * @param fromKey Старый ключ.
  * @param toKey Новый ключ.
  * @param source Объект.

package/helpers/rename.js

@@ -4,6 +4,7 @@ exports.rename = void 0;
 const fp_1 = require("lodash/fp");
 /**
  * Переименовывает свойство, возвращая новый объект.
+ * @deprecated Эта функция не относится напрямую к работе с UI и будет удалена в будущем.
  * @param fromKey Старый ключ.
  * @param toKey Новый ключ.
  * @param source Объект.

package/helpers/scroll-to-child.d.ts

@@ -3,4 +3,4 @@
  * @param parent Родительский элемент.
  * @param child Дочерний элемент.
  */
-export declare const scrollToChild: (parent: HTMLElement, child: Element) => void;
+export declare function scrollToChild(parent: HTMLElement, child: Element): void;

package/helpers/scroll-to-child.js

@@ -10,7 +10,7 @@ const bounds_of_1 = __importDefault(require("./bounds-of"));
  * @param parent Родительский элемент.
  * @param child Дочерний элемент.
  */
-const scrollToChild = (parent, child) => {
+function scrollToChild(parent, child) {
     const [parentRect, childRect] = [parent, child].map(bounds_of_1.default);
     // ВАЖНО: не надо использовать offsetTop здесь, offsetParent может не соответствовать указанному родителю
     if (childRect.bottom > parentRect.bottom) {
@@ -19,5 +19,6 @@ const scrollToChild = (parent, child) => {
     else if (childRect.top < parentRect.top) {
         parent.scrollTop -= parentRect.top - childRect.top;
     }
-};
+    // @todo доделать для OverlayScrollbars?
+}
 exports.scrollToChild = scrollToChild;

package/helpers/styles.d.ts

@@ -5,7 +5,7 @@
  * @param easing Функция плавности.
  * @return Значение CSS-свойства "transition".
  */
-export declare const getTransitionStyle: (duration?: number, property?: string, easing?: string) => string;
+export declare function getTransitionStyle(duration?: number, property?: string, easing?: string): string;
 /**
  * Возвращает строку значения CSS-свойства с трансформацией смещения.
  *
@@ -16,4 +16,10 @@ export declare const getTransitionStyle: (duration?: number, property?: string,
  * @param z Смещение по оси z в пикселях.
  * @return Значение CSS-свойства с трансформацией смещения.
  */
-export declare const getTranslateStyle: (x?: number, y?: number, z?: number) => string;
+export declare function getTranslateStyle(x?: number, y?: number, z?: number): string;
+/**
+ * Устанавливает на переданный элемент css-переменную "--vh".
+ * Значение переменной является аналогом `1vh` с учетом особенностей viewport'а мобильный устройств.
+ * @param element Элемент на котором будет задана css-переменная.
+ */
+export declare function setViewportHeightUnit(element: HTMLElement): void;

package/helpers/styles.js

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getTranslateStyle = exports.getTransitionStyle = void 0;
-const lodash_1 = require("lodash");
+exports.setViewportHeightUnit = exports.getTranslateStyle = exports.getTransitionStyle = void 0;
 /**
  * Возвращает строку значения CSS-свойства "transition".
  * @param duration Длительность перехода в миллисекундах.
@@ -9,7 +8,9 @@ const lodash_1 = require("lodash");
  * @param easing Функция плавности.
  * @return Значение CSS-свойства "transition".
  */
-const getTransitionStyle = (duration = 0, property = 'all', easing = 'ease-out') => `${property} ${(0, lodash_1.isNumber)(duration) ? duration : 0}ms ${easing}`;
+function getTransitionStyle(duration = 0, property = 'all', easing = 'ease-out') {
+    return `${property} ${Number.isFinite(duration) ? duration : 0}ms ${easing}`;
+}
 exports.getTransitionStyle = getTransitionStyle;
 /**
  * Возвращает строку значения CSS-свойства с трансформацией смещения.
@@ -21,5 +22,18 @@ exports.getTransitionStyle = getTransitionStyle;
  * @param z Смещение по оси z в пикселях.
  * @return Значение CSS-свойства с трансформацией смещения.
  */
-const getTranslateStyle = (x = 0, y = 0, z = 0) => `translate3d(${x}px, ${y}px, ${z}px)`;
+function getTranslateStyle(x = 0, y = 0, z = 0) {
+    return `translate3d(${x}px, ${y}px, ${z}px)`;
+}
 exports.getTranslateStyle = getTranslateStyle;
+/**
+ * Устанавливает на переданный элемент css-переменную "--vh".
+ * Значение переменной является аналогом `1vh` с учетом особенностей viewport'а мобильный устройств.
+ * @param element Элемент на котором будет задана css-переменная.
+ */
+function setViewportHeightUnit(element) {
+    const { visualViewport } = window;
+    const height = visualViewport ? visualViewport.height * visualViewport.scale : window.innerHeight;
+    element.style.setProperty('--vh', `${height / 100}px`);
+}
+exports.setViewportHeightUnit = setViewportHeightUnit;

package/helpers/with-prevent.d.ts

@@ -1,8 +1,11 @@
-import React from 'react';
+import { SyntheticEvent } from 'react';
 /**
- * Декорирует переданную функцию-обработчик события останавливая его при перехвате.
- * @param callback Функция перехвата события.
- * @return Декорированная функция.
+ * Декорирует переданную функцию-обработчик события вызывая preventDefault и stopPropagation.
+ * @param callback Функция-обработчик.
+ * @return Декорированная функция-обработчик.
  */
-declare const withPrevent: <T extends Event | React.SyntheticEvent<Element, Event>>(callback?: ((e: T) => void) | undefined) => (event: T) => void;
-export default withPrevent;
+export declare function withEventMute<T extends Event | SyntheticEvent>(callback?: (event: T) => void): (event: T) => void;
+/**
+ * @deprecated Следует использовать именованный экспорт. Экспорт по умолчанию будет удалён в будущем.
+ */
+export default withEventMute;

package/helpers/with-prevent.js

@@ -1,13 +1,20 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.withEventMute = void 0;
 /**
- * Декорирует переданную функцию-обработчик события останавливая его при перехвате.
- * @param callback Функция перехвата события.
- * @return Декорированная функция.
+ * Декорирует переданную функцию-обработчик события вызывая preventDefault и stopPropagation.
+ * @param callback Функция-обработчик.
+ * @return Декорированная функция-обработчик.
  */
-const withPrevent = (callback) => (event) => {
-    event.preventDefault();
-    event.stopPropagation();
-    callback === null || callback === void 0 ? void 0 : callback(event);
-};
-exports.default = withPrevent;
+function withEventMute(callback) {
+    return (event) => {
+        event.preventDefault();
+        event.stopPropagation(); // @todo придумать как вынести
+        callback === null || callback === void 0 ? void 0 : callback(event);
+    };
+}
+exports.withEventMute = withEventMute;
+/**
+ * @deprecated Следует использовать именованный экспорт. Экспорт по умолчанию будет удалён в будущем.
+ */
+exports.default = withEventMute;

package/hint/hint-view.d.ts

@@ -0,0 +1,26 @@
+import { HTMLAttributes, Ref } from 'react';
+import { WithTestId } from '../types';
+export interface HintViewProps extends HTMLAttributes<HTMLDivElement>, WithTestId {
+    /** Ref корневого элемента. */
+    hintRef?: Ref<HTMLDivElement>;
+}
+/** Длина стороны квадрата, составленного из двух стрелок (треугольников). */
+export declare const arrowSquareSize: number;
+/**
+ * "Хинт" - всплывающая подсказка.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function HintView({ hintRef, className, children, 'data-testid': testId, ...rest }: HintViewProps): JSX.Element;
+export declare namespace HintView {
+    var Arrow: typeof HintArrow;
+}
+/**
+ * Стрелка хинта.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+declare function HintArrow({ arrowRef, className, ...rest }: Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    arrowRef?: Ref<HTMLDivElement>;
+}): JSX.Element;
+export {};

package/hint/hint-view.js

@@ -0,0 +1,43 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HintView = exports.arrowSquareSize = void 0;
+const react_1 = __importDefault(require("react"));
+const bind_1 = __importDefault(require("classnames/bind"));
+const hint_view_module_scss_1 = __importDefault(require("./hint-view.module.scss"));
+const cx = bind_1.default.bind(hint_view_module_scss_1.default);
+/** Длина стороны квадрата, составленного из двух стрелок (треугольников). */
+exports.arrowSquareSize = Math.sqrt(4 * 4 + 4 * 4);
+/**
+ * "Хинт" - всплывающая подсказка.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function HintView(_a) {
+    var { hintRef, className, children, 'data-testid': testId = 'hint' } = _a, rest = __rest(_a, ["hintRef", "className", "children", 'data-testid']);
+    return (react_1.default.createElement("div", Object.assign({ ref: hintRef, className: cx('root', className), "data-testid": testId }, rest), children));
+}
+exports.HintView = HintView;
+/**
+ * Стрелка хинта.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function HintArrow(_a) {
+    var { arrowRef, className } = _a, rest = __rest(_a, ["arrowRef", "className"]);
+    return react_1.default.createElement("div", Object.assign({ ref: arrowRef, className: cx('arrow', className) }, rest));
+}
+HintView.Arrow = HintArrow;