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

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;

package/hint/hint-view.module.scss

@@ -0,0 +1,32 @@
+@use 'sass:math';
+@use '../colors';
+
+.root {
+  border-radius: 4px;
+  background: colors.$basic-gray76;
+  padding: 8px;
+  max-width: 280px;
+  min-width: 36px;
+  min-height: 36px;
+  display: inline-flex;
+  align-items: center;
+  color: #fff;
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 400;
+  text-align: center;
+  overflow-wrap: break-word;
+}
+
+.arrow {
+  position: absolute;
+  width: 1px * math.sqrt((4 * 4) + (4 * 4));
+  height: 1px * math.sqrt((4 * 4) + (4 * 4));
+  transform: rotate(45deg);
+  background: colors.$basic-gray76;
+  top: var(--hint-arrow-top);
+  left: var(--hint-arrow-left);
+  right: var(--hint-arrow-right);
+  bottom: var(--hint-arrow-bottom);
+  z-index: -1; // чтобы был скрыт при отсутствии позиционирования
+}

package/hint/hint.d.ts

@@ -0,0 +1,14 @@
+import { Ref } from 'react';
+import { HintViewProps } from './hint-view';
+export interface HintProps extends HintViewProps {
+    /** Нужно ли показать хинт. */
+    open?: boolean;
+    /** Ref элемента "стрелки". */
+    arrowRef?: Ref<HTMLDivElement>;
+}
+/**
+ * Всплывающий хинт.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function Hint({ open, ...rest }: HintProps): JSX.Element;

package/hint/hint.js

@@ -0,0 +1,41 @@
+"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.Hint = void 0;
+const react_1 = __importDefault(require("react"));
+const portal_1 = require("../portal");
+const hint_view_1 = require("./hint-view");
+/**
+ * Всплывающий хинт.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function Hint(_a) {
+    var { open } = _a, rest = __rest(_a, ["open"]);
+    return react_1.default.createElement(portal_1.Portal, null, open && react_1.default.createElement(HintInner, Object.assign({}, rest)));
+}
+exports.Hint = Hint;
+/**
+ * Внутренний компонент, необходим из-за использования портала.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function HintInner(_a) {
+    var { arrowRef, children } = _a, rest = __rest(_a, ["arrowRef", "children"]);
+    return (react_1.default.createElement(hint_view_1.HintView, Object.assign({}, rest),
+        children,
+        react_1.default.createElement(hint_view_1.HintView.Arrow, { arrowRef: arrowRef })));
+}

package/hint/index.d.ts

@@ -1,8 +1,5 @@
-import React from 'react';
-declare type Direction = 'top' | 'left' | 'bottom' | 'right';
-export interface HintProps extends React.HTMLAttributes<HTMLDivElement> {
-    /** С какой стороны появляется хинт. */
-    direction: Direction;
-}
-export declare const Hint: React.ForwardRefExoticComponent<HintProps & React.RefAttributes<HTMLDivElement | null>>;
-export {};
+import { HintView, type HintViewProps } from './hint-view';
+import { Hint, type HintProps } from './hint';
+import { hintFloatingConfig, useHintFloating, useHintOnHover, useHintOnClick, useTempHintState, useHintFloatingStyle, getArrowFloatingStyle } from './utils';
+export type { HintProps, HintViewProps };
+export { Hint, HintView, hintFloatingConfig, useHintFloating, useHintOnHover, useHintOnClick, useTempHintState, useHintFloatingStyle, getArrowFloatingStyle, };

package/hint/index.js

@@ -1,50 +1,15 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-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.Hint = void 0;
-const react_1 = __importStar(require("react"));
-const shadows_1 = require("../styling/shadows");
-const bind_1 = __importDefault(require("classnames/bind"));
-const hint_module_scss_1 = __importDefault(require("./hint.module.scss"));
-const cx = bind_1.default.bind(hint_module_scss_1.default);
-exports.Hint = (0, react_1.forwardRef)((_a, ref) => {
-    var { children, className, direction } = _a, restProps = __rest(_a, ["children", "className", "direction"]);
-    return (react_1.default.createElement("div", Object.assign({}, restProps, { ref: ref, className: cx('root', className, direction), "data-testid": 'hint' }),
-        react_1.default.createElement("div", { className: cx('body', shadows_1.BoxShadow.z4) }, children)));
-});
+exports.getArrowFloatingStyle = exports.useHintFloatingStyle = exports.useTempHintState = exports.useHintOnClick = exports.useHintOnHover = exports.useHintFloating = exports.hintFloatingConfig = exports.HintView = exports.Hint = void 0;
+const hint_view_1 = require("./hint-view");
+Object.defineProperty(exports, "HintView", { enumerable: true, get: function () { return hint_view_1.HintView; } });
+const hint_1 = require("./hint");
+Object.defineProperty(exports, "Hint", { enumerable: true, get: function () { return hint_1.Hint; } });
+const utils_1 = require("./utils");
+Object.defineProperty(exports, "hintFloatingConfig", { enumerable: true, get: function () { return utils_1.hintFloatingConfig; } });
+Object.defineProperty(exports, "useHintFloating", { enumerable: true, get: function () { return utils_1.useHintFloating; } });
+Object.defineProperty(exports, "useHintOnHover", { enumerable: true, get: function () { return utils_1.useHintOnHover; } });
+Object.defineProperty(exports, "useHintOnClick", { enumerable: true, get: function () { return utils_1.useHintOnClick; } });
+Object.defineProperty(exports, "useTempHintState", { enumerable: true, get: function () { return utils_1.useTempHintState; } });
+Object.defineProperty(exports, "useHintFloatingStyle", { enumerable: true, get: function () { return utils_1.useHintFloatingStyle; } });
+Object.defineProperty(exports, "getArrowFloatingStyle", { enumerable: true, get: function () { return utils_1.getArrowFloatingStyle; } });

package/hint/utils.d.ts

@@ -0,0 +1,61 @@
+import { CSSProperties, Dispatch, MutableRefObject, SetStateAction } from 'react';
+import { ExtendedRefs, ReferenceType, UseFloatingProps, UseFloatingReturn } from '@floating-ui/react';
+interface HintExtendedRefs<RT> extends ExtendedRefs<RT> {
+    setArrow: (el: HTMLElement | null) => void;
+}
+interface UseHintFloatingReturn<RT extends ReferenceType = ReferenceType> extends UseFloatingReturn<RT> {
+    refs: HintExtendedRefs<RT>;
+}
+/**
+ * Возвращает конфигурацию для `useFloating` по дизайн-гайдам.
+ * @param options Опции.
+ * @return Конфигурация для `useFloating` по дизайн-гайдам.
+ */
+export declare function hintFloatingConfig({ arrowRef, }?: {
+    arrowRef?: MutableRefObject<HTMLElement | null>;
+}): Partial<UseFloatingProps>;
+/**
+ * Расширенная версия `useFloating` для использования с `Hint`.
+ * @param props Свойства useFloating.
+ * @return Результат useFloating.
+ */
+export declare function useHintFloating<RT extends ReferenceType = ReferenceType>(props?: Partial<UseFloatingProps>): UseHintFloatingReturn<RT>;
+/**
+ * Возвращает стили для всплывающего хинта с учетом "слоя".
+ * @param floating Результат вызова useFloating.
+ * @return Стили для элемента с учетом "слоя".
+ */
+export declare function useHintFloatingStyle(floating: Pick<UseFloatingReturn, 'strategy' | 'x' | 'y' | 'placement' | 'middlewareData'>): CSSProperties;
+/**
+ * Возвращает стили для стрелки между хинтом и триггером.
+ * @param floating Результат вызова useFloating.
+ * @return Стили для элемента с учетом "слоя".
+ */
+export declare function getArrowFloatingStyle({ placement, middlewareData, }: Pick<UseFloatingReturn, 'placement' | 'middlewareData'>): CSSProperties;
+/**
+ * Показ всплывающего хинта при наведении.
+ * @param floating Результат вызова useFloating.
+ * @return Опции для открывающего и всплывающего элемента.
+ */
+export declare function useHintOnHover(floating: Pick<UseFloatingReturn, 'context' | 'strategy' | 'placement' | 'x' | 'y' | 'middlewareData'>): {
+    getReferenceProps: (userProps?: import("react").HTMLProps<Element> | undefined) => Record<string, unknown>;
+    getFloatingProps: (userProps?: import("react").HTMLProps<HTMLElement> | undefined) => Record<string, unknown>;
+    getItemProps: (userProps?: import("react").HTMLProps<HTMLElement> | undefined) => Record<string, unknown>;
+};
+/**
+ * Показ всплывающего хинта при клике.
+ * @param floating Результат вызова useFloating.
+ * @return Опции для открывающего и всплывающего элемента.
+ */
+export declare function useHintOnClick(floating: Pick<UseFloatingReturn, 'context' | 'strategy' | 'placement' | 'x' | 'y' | 'middlewareData'>): {
+    getReferenceProps: (userProps?: import("react").HTMLProps<Element> | undefined) => Record<string, unknown>;
+    getFloatingProps: (userProps?: import("react").HTMLProps<HTMLElement> | undefined) => Record<string, unknown>;
+    getItemProps: (userProps?: import("react").HTMLProps<HTMLElement> | undefined) => Record<string, unknown>;
+};
+/**
+ * Состояние хинта с автоматическим скрытием по таймауту.
+ * @param initialState Начальное состояние.
+ * @return Результат вызова `useState`.
+ */
+export declare function useTempHintState(initialState: boolean): readonly [boolean, Dispatch<SetStateAction<boolean>>];
+export {};

package/hint/utils.js

@@ -0,0 +1,161 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTempHintState = exports.useHintOnClick = exports.useHintOnHover = exports.getArrowFloatingStyle = exports.useHintFloatingStyle = exports.useHintFloating = exports.hintFloatingConfig = void 0;
+const react_1 = require("react");
+const react_2 = require("@floating-ui/react");
+const lodash_1 = require("lodash");
+const layer_1 = require("../helpers/layer");
+const hint_view_1 = require("./hint-view");
+const identity_1 = require("../hooks/identity");
+/**
+ * Возвращает конфигурацию для `useFloating` по дизайн-гайдам.
+ * @param options Опции.
+ * @return Конфигурация для `useFloating` по дизайн-гайдам.
+ */
+function hintFloatingConfig({ arrowRef, } = {}) {
+    return {
+        placement: 'top',
+        middleware: [
+            (0, react_2.offset)(4 + (arrowRef ? 4 : 0)),
+            (0, react_2.flip)({
+                padding: 16,
+                crossAxis: false,
+                fallbackAxisSideDirection: 'start',
+            }),
+            (0, react_2.shift)({
+                padding: 16,
+            }),
+            arrowRef &&
+                (0, react_2.arrow)({
+                    element: arrowRef,
+                    padding: 4,
+                }),
+        ],
+        whileElementsMounted: react_2.autoUpdate,
+    };
+}
+exports.hintFloatingConfig = hintFloatingConfig;
+/**
+ * Расширенная версия `useFloating` для использования с `Hint`.
+ * @param props Свойства useFloating.
+ * @return Результат useFloating.
+ */
+function useHintFloating(props) {
+    const [arrowEl, setArrowEl] = (0, react_1.useState)(null);
+    const arrowRef = (0, identity_1.useIdentityRef)(arrowEl);
+    const floating = (0, react_2.useFloating)(Object.assign(Object.assign({}, hintFloatingConfig(arrowEl ? { arrowRef } : undefined)), props));
+    return Object.assign(Object.assign({}, floating), { refs: Object.assign(Object.assign({}, floating.refs), { setArrow: setArrowEl }) });
+}
+exports.useHintFloating = useHintFloating;
+/**
+ * Возвращает стили для всплывающего хинта с учетом "слоя".
+ * @param floating Результат вызова useFloating.
+ * @return Стили для элемента с учетом "слоя".
+ */
+function useHintFloatingStyle(floating) {
+    var _a, _b;
+    const layer = (0, layer_1.useLayer)();
+    return Object.assign({ position: floating.strategy, top: (_a = floating.y) !== null && _a !== void 0 ? _a : 0, left: (_b = floating.x) !== null && _b !== void 0 ? _b : 0, zIndex: layer + 2 }, (0, lodash_1.mapKeys)(getArrowFloatingStyle(floating), (value, key) => `--hint-arrow-${key}`));
+}
+exports.useHintFloatingStyle = useHintFloatingStyle;
+/**
+ * Возвращает стили для стрелки между хинтом и триггером.
+ * @param floating Результат вызова useFloating.
+ * @return Стили для элемента с учетом "слоя".
+ */
+function getArrowFloatingStyle({ placement, middlewareData, }) {
+    const { arrow: arrowData } = middlewareData;
+    if (!arrowData) {
+        return {};
+    }
+    const side = placement.split('-')[0];
+    // eslint-disable-next-line require-jsdoc
+    const maybe = (value) => (value ? `${value}px` : '');
+    // eslint-disable-next-line require-jsdoc
+    const arrowShift = () => `${-hint_view_1.arrowSquareSize / 2}px`;
+    let arrowStyle = {};
+    switch (side) {
+        case 'top': {
+            arrowStyle = {
+                left: maybe(arrowData === null || arrowData === void 0 ? void 0 : arrowData.x),
+                bottom: arrowShift(),
+            };
+            break;
+        }
+        case 'bottom': {
+            arrowStyle = {
+                left: maybe(arrowData === null || arrowData === void 0 ? void 0 : arrowData.x),
+                top: arrowShift(),
+            };
+            break;
+        }
+        case 'left': {
+            arrowStyle = {
+                top: maybe(arrowData === null || arrowData === void 0 ? void 0 : arrowData.y),
+                right: arrowShift(),
+            };
+            break;
+        }
+        case 'right': {
+            arrowStyle = {
+                top: maybe(arrowData === null || arrowData === void 0 ? void 0 : arrowData.y),
+                left: arrowShift(),
+            };
+            break;
+        }
+    }
+    return arrowStyle;
+}
+exports.getArrowFloatingStyle = getArrowFloatingStyle;
+/**
+ * Показ всплывающего хинта при наведении.
+ * @param floating Результат вызова useFloating.
+ * @return Опции для открывающего и всплывающего элемента.
+ */
+function useHintOnHover(floating) {
+    const style = useHintFloatingStyle(floating);
+    const hover = (0, react_2.useHover)(floating.context, { delay: { close: 120 } });
+    return (0, react_2.useInteractions)([hover, { floating: { style } }]);
+}
+exports.useHintOnHover = useHintOnHover;
+/**
+ * Показ всплывающего хинта при клике.
+ * @param floating Результат вызова useFloating.
+ * @return Опции для открывающего и всплывающего элемента.
+ */
+function useHintOnClick(floating) {
+    const style = useHintFloatingStyle(floating);
+    const click = (0, react_2.useClick)(floating.context);
+    const dismiss = (0, react_2.useDismiss)(floating.context);
+    return (0, react_2.useInteractions)([click, dismiss, { floating: { style } }]);
+}
+exports.useHintOnClick = useHintOnClick;
+/**
+ * Состояние хинта с автоматическим скрытием по таймауту.
+ * @param initialState Начальное состояние.
+ * @return Результат вызова `useState`.
+ */
+function useTempHintState(initialState) {
+    const [open, setOpen] = (0, react_1.useState)(initialState);
+    const timerRef = (0, react_1.useRef)(null);
+    const updateTimer = (0, react_1.useCallback)((value) => {
+        // сбрасываем предыдущий таймер если был
+        if (timerRef.current !== null) {
+            window.clearTimeout(timerRef.current);
+        }
+        // запускаем новый таймер если надо
+        if (value) {
+            timerRef.current = window.setTimeout(() => setOpen(false), 2000);
+        }
+    }, []);
+    (0, react_1.useEffect)(() => {
+        updateTimer(open);
+    }, []);
+    const toggle = (0, react_1.useCallback)(next => {
+        const state = typeof next === 'function' ? next(open) : next;
+        updateTimer(state);
+        setOpen(state);
+    }, [open, setOpen, updateTimer]);
+    return [open, toggle];
+}
+exports.useTempHintState = useTempHintState;

package/hint-deprecated/index.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+type Direction = 'top' | 'left' | 'bottom' | 'right';
+export interface HintProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** С какой стороны появляется хинт. */
+    direction: Direction;
+}
+/**
+ * @deprecated Теперь нужно использовать `hint`.
+ */
+export declare const Hint: React.ForwardRefExoticComponent<HintProps & React.RefAttributes<HTMLDivElement | null>>;
+export {};

package/hint-deprecated/index.js

@@ -0,0 +1,53 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+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.Hint = void 0;
+const react_1 = __importStar(require("react"));
+const shadows_1 = require("../styling/shadows");
+const bind_1 = __importDefault(require("classnames/bind"));
+const hint_module_scss_1 = __importDefault(require("./hint.module.scss"));
+const cx = bind_1.default.bind(hint_module_scss_1.default);
+/**
+ * @deprecated Теперь нужно использовать `hint`.
+ */
+exports.Hint = (0, react_1.forwardRef)((_a, ref) => {
+    var { children, className, direction } = _a, restProps = __rest(_a, ["children", "className", "direction"]);
+    return (react_1.default.createElement("div", Object.assign({}, restProps, { ref: ref, className: cx('root', className, direction), "data-testid": 'hint' }),
+        react_1.default.createElement("div", { className: cx('body', shadows_1.BoxShadow.z4) }, children)));
+});

package/hooks/breakpoint/index.d.ts

@@ -1,13 +1,16 @@
-import React from 'react';
+import { ReactNode } from 'react';
 /**
- * Провайдер, необходимый для использования useBreakpoint.
+ * Провайдер, предоставляющий контекст для использования хуком useBreakpoint.
+ * Не является обязательным, используется в целях оптимизации.
  * @param props Свойства.
  * @return Элемент.
  */
-export declare const BreakpointProvider: React.FC;
+export declare function BreakpointProvider({ children }: {
+    children: ReactNode;
+}): JSX.Element;
 /**
  * Хук обработки медиа-запроса на основе breakpoint'а дизайн-системы.
  * @param query Запрос, например "xs+".
  * @return Соответствует ли ширина экрана заданному запросу.
  */
-export declare const useBreakpoint: (query: string) => boolean;
+export declare function useBreakpoint(query: string): boolean;