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

package/hint/hint-view.module.scss

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

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;

package/hooks/breakpoint/index.js

@@ -33,38 +33,46 @@ const is_browser_1 = __importDefault(require("../../helpers/is-browser"));
 const utils_1 = require("./utils");
 const Context = (0, react_1.createContext)(null);
 /**
- * Провайдер, необходимый для использования useBreakpoint.
+ * Провайдер, предоставляющий контекст для использования хуком useBreakpoint.
+ * Не является обязательным, используется в целях оптимизации.
  * @param props Свойства.
  * @return Элемент.
  */
-const BreakpointProvider = ({ children }) => {
+function BreakpointProvider({ children }) {
     const [contextValue, setRegistry] = (0, react_1.useState)(null);
     (0, __1.useIsomorphicLayoutEffect)(() => {
         (0, is_browser_1.default)() && setRegistry((0, utils_1.createRegistry)());
     }, []);
     return react_1.default.createElement(Context.Provider, { value: contextValue }, children);
-};
+}
 exports.BreakpointProvider = BreakpointProvider;
 /**
  * Хук обработки медиа-запроса на основе breakpoint'а дизайн-системы.
  * @param query Запрос, например "xs+".
  * @return Соответствует ли ширина экрана заданному запросу.
  */
-const useBreakpoint = (query) => {
+function useBreakpoint(query) {
     if (!utils_1.BreakpointQuery.isValid(query)) {
         throw Error(`useBreakpoint: Invalid query, "${query}"`);
     }
-    const registry = (0, react_1.useContext)(Context);
+    const [, setRegistry] = (0, react_1.useState)(null);
+    const registryFromContext = (0, react_1.useContext)(Context);
     const [matches, setMatches] = (0, react_1.useState)(false);
     (0, __1.useIsomorphicLayoutEffect)(() => {
-        if (registry) {
-            const subscription = registry.subscribe(query, e => {
-                setMatches(e.matches);
-            });
-            setMatches(subscription.matches);
-            return subscription.unsubscribe;
+        let registry;
+        if (registryFromContext) {
+            registry = registryFromContext;
+        }
+        else {
+            registry = (0, utils_1.createRegistry)();
         }
-    }, [registry]);
+        setRegistry(registryFromContext);
+        const subscription = registry.subscribe(query, e => {
+            setMatches(e.matches);
+        });
+        setMatches(subscription.matches);
+        return subscription.unsubscribe;
+    }, [registryFromContext]);
     return matches;
-};
+}
 exports.useBreakpoint = useBreakpoint;

package/hooks/breakpoint/types.d.ts

@@ -1,6 +1,5 @@
-export declare type Breakpoint = 'mxs' | 'ms' | 'mm' | 'ml' | 'xs' | 's' | 'm' | 'l' | 'xl';
-export declare type Direction = '+' | '-';
-export declare type ChangeHandler = (event: {
+export type Direction = '+' | '-';
+export type ChangeHandler = (event: {
     matches: boolean;
 }) => void;
 export interface RegistryItem {
@@ -11,7 +10,7 @@ export interface Subscription {
     matches: boolean;
     unsubscribe: () => void;
 }
-export declare type Registry = {
+export type Registry = {
     items: Record<string, RegistryItem | undefined>;
     subscribe: (query: string, handler: ChangeHandler) => Subscription;
 };

package/hooks/breakpoint/utils.d.ts

@@ -1,4 +1,5 @@
-import { Breakpoint, Direction, Registry } from './types';
+import { Breakpoint } from '../../types';
+import { Direction, Registry } from './types';
 export declare const BreakpointQuery: {
     readonly getBreakpoint: (query: string) => string;
     readonly getDirection: (query: string) => string;

package/hooks/breakpoint/utils.js

@@ -43,7 +43,8 @@ const createRegistry = () => {
             }
             else {
                 const newItem = {
-                    mql: matchMedia(exports.BreakpointQuery.toMediaQuery(query)),
+                    // ВАЖНО: используем "window.matchMedia" вместо "matchMedia" тк падают ошибки в некоторых браузерах
+                    mql: window.matchMedia(exports.BreakpointQuery.toMediaQuery(query)),
                     handlers: new Set([listener]),
                 };
                 // не предусматриваем отписку и удаление mql за ненадобностью

package/hooks/index.d.ts

@@ -1,9 +1,9 @@
-import React from 'react';
+import { useEffect, RefObject, MutableRefObject, DependencyList } from 'react';
 /**
  * При монтировании проверяет, поддерживает ли устройство touch события.
  * @return True - если поддерживает, false - если нет.
  */
-export declare const useIsTouchDevice: () => boolean;
+export declare function useIsTouchDevice(): boolean;
 /**
  * Реализует подписку на событие полной прокрутки списка.
  * @param ref Реф прокручиваемого элемента.
@@ -12,18 +12,18 @@ export declare const useIsTouchDevice: () => boolean;
  * @param options.threshold Отступ от конца списка по которому событие должно срабатывать.
  * @param moreDeps Зависимости эффекта (нужны, когда ref заполняется не на этапе render'а).
  */
-export declare const useInfiniteScroll: (ref: React.MutableRefObject<HTMLElement | undefined | null>, { onFullScroll, threshold, }: {
-    onFullScroll?: ((event: UIEvent) => void) | undefined;
-    threshold?: number | undefined;
-}, moreDeps?: React.DependencyList | undefined) => void;
+export declare function useInfiniteScroll(ref: MutableRefObject<HTMLElement | undefined | null>, { onFullScroll, threshold, }: {
+    onFullScroll?: (event: UIEvent) => void;
+    threshold?: number;
+}, moreDeps?: DependencyList): void;
 /**
  * Запускает переданный обработчик при клике вне элемента.
  * @param elementRef Ref элемента, клик вне которого нужно обработать.
  * @param callback Сработает при клике вне элемента.
  */
-export declare const useOutsideClick: (elementRef: React.MutableRefObject<HTMLElement | undefined | null>, callback: (e: MouseEvent) => void) => void;
+export declare function useOutsideClick(elementRef: RefObject<Element | undefined | null> | RefObject<Element | undefined | null>[], callback: undefined | ((e: MouseEvent) => void)): void;
 /**
  * Нужен для того чтобы не получать ошибку при использовании в SSR с NodeJS.
  * @see {@link https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85#gistcomment-2911761}
  */
-export declare const useIsomorphicLayoutEffect: typeof React.useLayoutEffect;
+export declare const useIsomorphicLayoutEffect: typeof useEffect;