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

package/phone-input-deprecated/index.js

@@ -0,0 +1,124 @@
+"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.PhoneInput = void 0;
+const react_1 = __importStar(require("react"));
+const down_1 = __importDefault(require("@sima-land/ui-quarks/icons/16x16/Stroked/Arrows/down"));
+const up_1 = __importDefault(require("@sima-land/ui-quarks/icons/16x16/Stroked/Arrows/up"));
+const dropdown_1 = require("../dropdown");
+const dropdown_item_1 = require("../dropdown-item");
+const text_field_1 = require("../text-field");
+const masked_field_1 = require("../masked-field");
+const hooks_1 = require("../hooks");
+const presets_1 = require("../phone-input/presets");
+const utils_1 = require("../phone-input/utils");
+const bind_1 = __importDefault(require("classnames/bind"));
+const phone_input_module_scss_1 = __importDefault(require("./phone-input.module.scss"));
+const cx = bind_1.default.bind(phone_input_module_scss_1.default);
+/**
+ * Удаляет из значения код переданной страны.
+ * @param value Значение.
+ * @param country Данные страны.
+ * @return Значение без кода.
+ */
+const formatValue = (value, country) => value.replace(/\D/g, '').slice(country.codeChars.length);
+/**
+ * Компонент поля ввода номера телефона.
+ * @param props Параметры компонента.
+ * @deprecated Нужно использовать новую реализацию "@sima-land/ui-nucleons/phone-input".
+ * @return Элемент.
+ */
+const PhoneInput = (_a) => {
+    var { 'data-testid': testId, className, label = 'Телефон', onBlur, onCountrySelect, style, value = '', onChange } = _a, restProps = __rest(_a, ['data-testid', "className", "label", "onBlur", "onCountrySelect", "style", "value", "onChange"]);
+    // маску определяем автоматически только при старте
+    const [country, setCountry] = (0, react_1.useState)(() => (0, utils_1.defineCountry)(value));
+    const [cleanValue, setCleanValue] = (0, react_1.useState)(() => formatValue(value, country));
+    const [withMenu, toggleMenu] = (0, react_1.useState)(false);
+    const rootRef = (0, react_1.useRef)(null);
+    const openerRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        setCleanValue(formatValue(value, country));
+    }, [value]);
+    (0, hooks_1.useOutsideClick)(rootRef, () => {
+        toggleMenu(false);
+    });
+    const AdornmentSVG = withMenu ? up_1.default : down_1.default;
+    const commonFieldProps = Object.assign(Object.assign({}, restProps), { label, multiline: false, className: cx('field'), endAdornment: (react_1.default.createElement("div", { ref: openerRef, className: cx('adornment'), "data-testid": 'phone-input:dropdown-opener', onClick: () => {
+                toggleMenu(a => !a);
+            } },
+            react_1.default.createElement("img", { alt: '', width: 24, height: 24, src: country.imageSrc }),
+            react_1.default.createElement(AdornmentSVG, { className: cx('arrow') }))), onClick: event => {
+            const opener = openerRef.current;
+            if (opener instanceof Node &&
+                event.target instanceof Node &&
+                (opener === event.target || opener.contains(event.target))) {
+                event.preventDefault(); // чтобы не фокусировалось на поле
+            }
+            else {
+                toggleMenu(false);
+            }
+        } });
+    return (react_1.default.createElement("div", { ref: rootRef, "data-testid": testId, style: style, className: cx('root', className) },
+        country.id === presets_1.IDS.other ? (react_1.default.createElement(text_field_1.TextField, Object.assign({}, commonFieldProps, { value: cleanValue, onChange: (e) => {
+                const nextValue = e.target.value.replace(/\D/g, '').slice(0, 20);
+                e.target.value = nextValue;
+                setCleanValue(nextValue);
+                onChange && onChange(e);
+            }, onBlur: e => {
+                onBlur &&
+                    onBlur(e, {
+                        value: e.target.value,
+                        cleanValue: e.target.value,
+                        ready: e.target.value.length > 0,
+                    });
+            } }))) : (react_1.default.createElement(masked_field_1.MaskedField, Object.assign({}, commonFieldProps, { 
+            // убираем код страны, так как он уже зашит в маску
+            value: cleanValue, mask: country.mask, onBlur: (event, state) => {
+                onBlur &&
+                    onBlur(event, Object.assign(Object.assign({}, state), { 
+                        // вставляем код страны обратно в чистое значение
+                        cleanValue: `${country.codeChars}${state.cleanValue}` }));
+            } }))),
+        withMenu && (react_1.default.createElement(dropdown_1.Dropdown, { role: 'menu', className: cx('menu'), "data-testid": 'phone-input:dropdown' }, presets_1.countriesList.map((item, index) => item.id === country.id ? null : (react_1.default.createElement(dropdown_item_1.DropdownItem, { key: index, size: 'm', role: 'menuitem', className: cx('menu-item'), onClick: () => {
+                toggleMenu(false);
+                setCountry(item);
+                onCountrySelect && onCountrySelect(item);
+            }, startContent: react_1.default.createElement("img", { alt: '', width: 24, height: 24, src: item.imageSrc, className: cx('country-icon') }), endContent: item.code }, item.name)))))));
+};
+exports.PhoneInput = PhoneInput;

package/phone-input-deprecated/phone-input.module.scss

@@ -0,0 +1,41 @@
+@use '../colors';
+
+.root {
+  text-align: left;
+  position: relative;
+  width: var(--phone-input-width, 320px);
+}
+
+.field {
+  width: 100%;
+}
+
+.adornment {
+  display: flex;
+  align-items: center;
+  user-select: none;
+  cursor: pointer;
+}
+
+.arrow {
+  display: block;
+  fill: colors.$basic-gray38;
+  margin-left: 4px;
+  pointer-events: none; // игнорируем клики т.к. после них элемент стрелки подменяется и считается что он сработал вне элемента родителя
+}
+
+.menu {
+  position: absolute;
+  width: 100%;
+  top: 56px;
+  --dropdown-max-height: 208px;
+  z-index: 2;
+}
+
+.menu-item {
+  font-size: 16px;
+  line-height: 24px;
+  .country-icon {
+    display: block;
+  }
+}

package/plate/index.d.ts

@@ -2,9 +2,9 @@ import React from 'react';
 import { BoxShadow } from '../styling/shadows';
 export interface PlateProps extends React.HTMLAttributes<HTMLDivElement> {
     /** Тень. */
-    shadow?: keyof typeof BoxShadow;
-    /** Скругление. */
-    rounds?: 's' | 'm';
+    shadow?: keyof typeof BoxShadow | null;
+    /** Скругление углов. */
+    rounds?: 's' | 'm' | null;
     /** Идентификатор для систем автоматизированного тестирования. */
     'data-testid'?: string;
 }

package/plate/index.js

@@ -39,15 +39,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Plate = void 0;
 const react_1 = __importStar(require("react"));
-const colors_1 = require("../styling/colors");
 const shadows_1 = require("../styling/shadows");
 const shapes_1 = require("../styling/shapes");
 const classnames_1 = __importDefault(require("classnames"));
+const plate_module_scss_1 = __importDefault(require("./plate.module.scss"));
 /**
  * Plate это просто div с возможностью легко задавать тень и скругления.
  * И он должен оставаться компонентом, который только задает оформление обычного div.
  */
 exports.Plate = (0, react_1.forwardRef)(function Plate(_a, ref) {
     var { className, children, rounds = 's', shadow = 'z1', 'data-testid': testId = 'plate' } = _a, restProps = __rest(_a, ["className", "children", "rounds", "shadow", 'data-testid']);
-    return (react_1.default.createElement("div", Object.assign({ ref: ref, className: (0, classnames_1.default)((0, colors_1.bgColor)('basic-white'), className, shadows_1.BoxShadow[shadow], rounds === 's' && shapes_1.SmallRounds.all, rounds === 'm' && shapes_1.MediumRounds.all), "data-testid": testId, children: children }, restProps)));
+    return (react_1.default.createElement("div", Object.assign({ ref: ref, className: (0, classnames_1.default)(plate_module_scss_1.default.root, className, shadow && shadows_1.BoxShadow[shadow], rounds === 's' && shapes_1.SmallRounds.all, rounds === 'm' && shapes_1.MediumRounds.all), "data-testid": testId, children: children }, restProps)));
 });

package/plate/plate.module.scss

@@ -0,0 +1,3 @@
+.root {
+  background: #fff;
+}

package/popup/index.d.ts

@@ -0,0 +1,5 @@
+import { Popup, PopupProps } from './popup';
+import { PopupView, PopupViewProps } from './popup-view';
+import { popupFloatingConfig, usePopupFloatingStyle, usePopupOnClick, useFocusTrap } from './utils';
+export type { PopupProps, PopupViewProps };
+export { Popup, PopupView, popupFloatingConfig, usePopupFloatingStyle, usePopupOnClick, useFocusTrap, };

package/popup/index.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFocusTrap = exports.usePopupOnClick = exports.usePopupFloatingStyle = exports.popupFloatingConfig = exports.PopupView = exports.Popup = void 0;
+const popup_1 = require("./popup");
+Object.defineProperty(exports, "Popup", { enumerable: true, get: function () { return popup_1.Popup; } });
+const popup_view_1 = require("./popup-view");
+Object.defineProperty(exports, "PopupView", { enumerable: true, get: function () { return popup_view_1.PopupView; } });
+const utils_1 = require("./utils");
+Object.defineProperty(exports, "popupFloatingConfig", { enumerable: true, get: function () { return utils_1.popupFloatingConfig; } });
+Object.defineProperty(exports, "usePopupFloatingStyle", { enumerable: true, get: function () { return utils_1.usePopupFloatingStyle; } });
+Object.defineProperty(exports, "usePopupOnClick", { enumerable: true, get: function () { return utils_1.usePopupOnClick; } });
+Object.defineProperty(exports, "useFocusTrap", { enumerable: true, get: function () { return utils_1.useFocusTrap; } });

package/popup/popup-view.d.ts

@@ -0,0 +1,14 @@
+import { HTMLAttributes, Ref } from 'react';
+import { WithTestId } from '../types';
+export interface PopupViewProps extends HTMLAttributes<HTMLDivElement>, WithTestId {
+    /** Сработает при клике на крестик. */
+    onClose?: () => void;
+    /** Реф корневого элемента. */
+    popupRef?: Ref<HTMLDivElement>;
+}
+/**
+ * Popup.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function PopupView({ children, onClose, popupRef, className, 'data-testid': testId, ...rest }: PopupViewProps): JSX.Element;

package/popup/popup-view.js

@@ -0,0 +1,35 @@
+"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.PopupView = void 0;
+const react_1 = __importDefault(require("react"));
+const cross_1 = __importDefault(require("@sima-land/ui-quarks/icons/16x16/Stroked/cross"));
+const bind_1 = __importDefault(require("classnames/bind"));
+const popup_view_module_scss_1 = __importDefault(require("./popup-view.module.scss"));
+const cx = bind_1.default.bind(popup_view_module_scss_1.default);
+/**
+ * Popup.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function PopupView(_a) {
+    var { children, onClose, popupRef, className, 'data-testid': testId = 'popup' } = _a, rest = __rest(_a, ["children", "onClose", "popupRef", "className", 'data-testid']);
+    return (react_1.default.createElement("div", Object.assign({}, rest, { className: cx('root', className), ref: popupRef, "data-testid": testId }),
+        onClose && (react_1.default.createElement("button", { "aria-label": '\u0417\u0430\u043A\u0440\u044B\u0442\u044C', className: cx('close'), onClick: onClose, "data-testid": 'popup:close' },
+            react_1.default.createElement(cross_1.default, null))),
+        react_1.default.createElement("div", { className: cx('content') }, children)));
+}
+exports.PopupView = PopupView;

package/popup/popup-view.module.scss

@@ -0,0 +1,40 @@
+@use '../colors';
+@use '../shadows';
+@use '../utils';
+
+.root {
+  @include shadows.box-shadow('z2');
+  display: inline-flex;
+  position: relative;
+  max-width: 400px;
+  max-height: min(536px, calc(100vh - 16px));
+  padding: 40px 8px;
+  box-sizing: border-box;
+  background: colors.$basic-gray4;
+  border-radius: 4px;
+}
+
+.close {
+  @include utils.reset-button;
+  @include utils.focus-visible;
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 40px;
+  height: 40px;
+  padding: 8px 8px 0 0;
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-end;
+  cursor: pointer;
+}
+
+.content {
+  @include utils.semi-stylized-scrollbars(colors.$basic-gray4);
+  font-size: 16px;
+  line-height: 24px;
+  padding: 0 32px;
+  max-height: 456px; // 536 (по гайдам) - 80 (горизонтальные отступы)
+  overflow-y: auto;
+  overflow-x: hidden;
+}

package/popup/popup.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { PopupViewProps } from './popup-view';
+export interface PopupProps extends Omit<PopupViewProps, 'onClose'> {
+    /** Элемент для которого нужно показать Popup ил null. */
+    showFor?: Element | null;
+    /** Сработает при попытке закрыть Popup. */
+    onDismiss?: () => void;
+}
+export interface PopupInnerProps extends PopupProps {
+    showFor: Element;
+}
+/**
+ * Popup, всплывающий когда указан целевой элемент.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function Popup({ showFor, ...rest }: PopupProps): JSX.Element;

package/popup/popup.js

@@ -0,0 +1,73 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Popup = void 0;
+const react_1 = __importStar(require("react"));
+const popup_view_1 = require("./popup-view");
+const react_2 = require("@floating-ui/react");
+const hooks_1 = require("../hooks");
+const utils_1 = require("./utils");
+const identity_1 = require("../hooks/identity");
+const portal_1 = require("../portal");
+/**
+ * Popup, всплывающий когда указан целевой элемент.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function Popup(_a) {
+    var { showFor } = _a, rest = __rest(_a, ["showFor"]);
+    return react_1.default.createElement(portal_1.Portal, null, showFor && react_1.default.createElement(PopupInner, Object.assign({ showFor: showFor }, rest)));
+}
+exports.Popup = Popup;
+/**
+ * Внутренний компонент, необходим из-за использования портала.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function PopupInner(_a) {
+    var { showFor, popupRef, children, style, onDismiss } = _a, rest = __rest(_a, ["showFor", "popupRef", "children", "style", "onDismiss"]);
+    const _b = (0, react_2.useFloating)((0, utils_1.popupFloatingConfig)()), { refs } = _b, floating = __rest(_b, ["refs"]);
+    const floatingStyle = (0, utils_1.usePopupFloatingStyle)(floating);
+    (0, react_1.useImperativeHandle)(popupRef, () => refs.floating.current);
+    (0, react_1.useImperativeHandle)(refs.setReference, () => showFor, [showFor]);
+    const anchorRef = (0, identity_1.useIdentityRef)(showFor);
+    (0, hooks_1.useOutsideClick)([anchorRef, refs.floating], onDismiss);
+    (0, utils_1.useFocusTrap)(refs.floating, {
+        enabled: floating.isPositioned,
+        afterDeactivate: onDismiss,
+    });
+    return (react_1.default.createElement(popup_view_1.PopupView, Object.assign({}, rest, { popupRef: refs.setFloating, style: Object.assign(Object.assign({}, style), floatingStyle), onClose: onDismiss }), children));
+}

package/popup/utils.d.ts

@@ -0,0 +1,38 @@
+import { UseFloatingProps, UseFloatingReturn } from '@floating-ui/react';
+import { RefObject } from 'react';
+/**
+ * Возвращает конфигурацию для `useFloating` по дизайн-гайдам.
+ * @return Конфигурация для `useFloating` по дизайн-гайдам.
+ */
+export declare function popupFloatingConfig(): Partial<UseFloatingProps>;
+/**
+ * Возвращает стили для элемента с учетом "слоя".
+ * @param floating Результат вызова useFloating.
+ * @return Стили для элемента с учетом "слоя".
+ */
+export declare function usePopupFloatingStyle({ strategy, x, y, }: Pick<UseFloatingReturn, 'strategy' | 'x' | 'y'>): {
+    position: import("@floating-ui/react").Strategy;
+    top: number;
+    left: number;
+    zIndex: number;
+};
+/**
+ * Показ всплывающего элемента по клику и скрытие.
+ * @param floating Результат вызова useFloating.
+ * @return Опции для открывающего и всплывающего элемента.
+ */
+export declare function usePopupOnClick(floating: Pick<UseFloatingReturn, 'context' | 'strategy' | 'x' | 'y'>): {
+    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>;
+};
+/**
+ * Хук ловушки фокуса.
+ * @todo Вынести в общие утилиты тк понадобится для Modal и тд.
+ * @param ref Элемент-контейнер для которого нужно захватить фокус.
+ * @param options Опции.
+ */
+export declare function useFocusTrap(ref: RefObject<HTMLElement | SVGElement>, { enabled, afterDeactivate, }: {
+    enabled: boolean;
+    afterDeactivate?: () => void;
+}): void;

package/popup/utils.js

@@ -0,0 +1,83 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFocusTrap = exports.usePopupOnClick = exports.usePopupFloatingStyle = exports.popupFloatingConfig = void 0;
+const react_1 = require("@floating-ui/react");
+const focus_trap_1 = require("focus-trap");
+const layer_1 = require("../helpers/layer");
+const hooks_1 = require("../hooks");
+const identity_1 = require("../hooks/identity");
+/**
+ * Возвращает конфигурацию для `useFloating` по дизайн-гайдам.
+ * @return Конфигурация для `useFloating` по дизайн-гайдам.
+ */
+function popupFloatingConfig() {
+    return {
+        strategy: 'absolute',
+        placement: 'right-start',
+        middleware: [
+            (0, react_1.offset)(8),
+            (0, react_1.flip)({
+                padding: 16,
+                crossAxis: false,
+                fallbackAxisSideDirection: 'start',
+            }),
+            (0, react_1.shift)({
+                padding: 16,
+            }),
+        ],
+        whileElementsMounted: react_1.autoUpdate,
+    };
+}
+exports.popupFloatingConfig = popupFloatingConfig;
+/**
+ * Возвращает стили для элемента с учетом "слоя".
+ * @param floating Результат вызова useFloating.
+ * @return Стили для элемента с учетом "слоя".
+ */
+function usePopupFloatingStyle({ strategy, x, y, }) {
+    const layer = (0, layer_1.useLayer)();
+    return {
+        position: strategy,
+        top: y !== null && y !== void 0 ? y : 0,
+        left: x !== null && x !== void 0 ? x : 0,
+        zIndex: layer + 2,
+    };
+}
+exports.usePopupFloatingStyle = usePopupFloatingStyle;
+/**
+ * Показ всплывающего элемента по клику и скрытие.
+ * @param floating Результат вызова useFloating.
+ * @return Опции для открывающего и всплывающего элемента.
+ */
+function usePopupOnClick(floating) {
+    const style = usePopupFloatingStyle(floating);
+    const click = (0, react_1.useClick)(floating.context);
+    const dismiss = (0, react_1.useDismiss)(floating.context);
+    return (0, react_1.useInteractions)([click, dismiss, { floating: { style } }]);
+}
+exports.usePopupOnClick = usePopupOnClick;
+/**
+ * Хук ловушки фокуса.
+ * @todo Вынести в общие утилиты тк понадобится для Modal и тд.
+ * @param ref Элемент-контейнер для которого нужно захватить фокус.
+ * @param options Опции.
+ */
+function useFocusTrap(ref, { enabled, afterDeactivate, }) {
+    const afterDeactivateRef = (0, identity_1.useIdentityRef)(afterDeactivate);
+    (0, hooks_1.useIsomorphicLayoutEffect)(() => {
+        const element = ref.current;
+        if (enabled && element) {
+            const trap = (0, focus_trap_1.createFocusTrap)(element, {
+                allowOutsideClick: true,
+                tabbableOptions: { displayCheck: 'none' },
+                onPostDeactivate: afterDeactivateRef.current,
+                fallbackFocus: element,
+            });
+            trap.activate();
+            return () => {
+                trap.deactivate({ returnFocus: true });
+            };
+        }
+    }, [ref, enabled]);
+}
+exports.useFocusTrap = useFocusTrap;

package/price/index.d.ts

@@ -18,4 +18,4 @@ export interface PriceProps {
  * @param props Параметры компонента.
  * @return Элемент.
  */
-export declare const Price: ({ className, currencyGrapheme: grapheme, graphemeBefore, crossedOut, value, "data-testid": testId, }: PriceProps) => JSX.Element;
+export declare function Price({ className, currencyGrapheme: grapheme, graphemeBefore, crossedOut, value, 'data-testid': testId, }: PriceProps): JSX.Element;

package/price/index.js

@@ -6,18 +6,18 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Price = void 0;
 const react_1 = __importDefault(require("react"));
 const utils_1 = require("./utils");
-const price_module_scss_1 = __importDefault(require("./price.module.scss"));
 const bind_1 = __importDefault(require("classnames/bind"));
+const price_module_scss_1 = __importDefault(require("./price.module.scss"));
 const cx = bind_1.default.bind(price_module_scss_1.default);
 /**
  * Цена товара с указанием знака валюты.
  * @param props Параметры компонента.
  * @return Элемент.
  */
-const Price = ({ className, currencyGrapheme: grapheme, graphemeBefore, crossedOut, value, 'data-testid': testId = 'price', }) => {
+function Price({ className, currencyGrapheme: grapheme, graphemeBefore, crossedOut, value, 'data-testid': testId = 'price', }) {
     const content = (0, utils_1.formatPrice)(value, grapheme, {
         graphemeBefore,
     });
     return (react_1.default.createElement("span", { className: cx('root', className, crossedOut && 'crossed-out'), "data-testid": testId }, content));
-};
+}
 exports.Price = Price;

package/price/utils.d.ts

@@ -5,8 +5,8 @@
  * @param options Опции.
  * @return Отформатированная цена.
  */
-export declare const formatPrice: (value: number | string, grapheme?: string | undefined, { graphemeBefore }?: {
-    graphemeBefore?: boolean | undefined;
-}) => string;
-export declare const formatInteger: (value: number) => string;
-export declare const formatFractional: (value: number) => string;
+export declare function formatPrice(value: number | string, grapheme?: string, { graphemeBefore }?: {
+    graphemeBefore?: boolean;
+}): string;
+export declare function formatInteger(value: number): string;
+export declare function formatFractional(value: number): string;