@sima-land/ui-nucleons 45.0.0-alpha.5 → 45.0.0-alpha.51

package/dist/phone-input/types.d.ts

@@ -0,0 +1,36 @@
+import type { DropdownProps } from '../dropdown';
+import type { MaskedInputProps } from '../masked-input';
+export interface PhoneInputProps extends Omit<MaskedInputProps, 'mask' | 'placeholder' | 'pattern'> {
+    /** Маски номеров телефона. */
+    masks?: PhoneInputMask[];
+    /** Сработает при выборе страны из выпадающего списка. */
+    onCountrySelect?: (country: PhoneInputMask) => void;
+    /** Свойства компонента Dropdown. */
+    dropdownProps?: Omit<DropdownProps, 'rootRef' | 'viewportRef'>;
+    /** Сработает при открытии меню. */
+    onMenuOpen?: VoidFunction;
+    /** Сработает при закрытии меню. */
+    onMenuClose?: VoidFunction;
+    /** Определитель маски по умолчанию. */
+    getDefaultMask?: (params: {
+        value: string;
+        masks: PhoneInputMask[];
+    }) => PhoneInputMask | undefined;
+}
+export type MaskId = 'russia' | 'kazakhstan' | 'armenia' | 'belarus' | 'kyrgyzstan' | 'azerbaijan' | 'georgia' | 'moldova' | 'tajikistan' | 'turkmenistan' | 'uzbekistan' | 'ukraine' | 'other';
+export interface PhoneInputMask {
+    /** Идентификатор. */
+    readonly id: MaskId;
+    /** Название. */
+    readonly title: string;
+    /** Маска. */
+    readonly mask: string;
+    /** Нужно ли отображать "rest placeholder" при вводе. */
+    readonly needRestPlaceholder?: boolean;
+    /** Картинка. */
+    readonly optionImageSrc: string;
+    /** Дополнительный текст. */
+    readonly optionEndContent?: string;
+    /** Минимальное допустимое количество символов для расчета заполненности маски. */
+    readonly filledMaskMinLength?: number;
+}

package/dist/phone-input/types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=types.js.map

package/dist/phone-input/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/phone-input/types.ts"],"names":[],"mappings":""}

package/dist/phone-input/utils.d.ts

@@ -0,0 +1,41 @@
+import { type SyntheticEvent } from 'react';
+import { type PhoneInputMask } from './types';
+/**
+ * Определяет страну по номеру телефона.
+ * Если Подходит "Россия", будет выполнена доп.проверка и выбран "Казахстан".
+ * Если не найдена подходящая, будет выполнен поиск маски "Россия".
+ * @param params Значение.
+ * @return Маска.
+ */
+export declare function defaultGetDefaultMask({ value, masks, }: {
+    value: string;
+    masks: PhoneInputMask[];
+}): PhoneInputMask | undefined;
+/**
+ * Утилиты для работы со строкой, представляющей номер телефона.
+ */
+export declare const PhoneValue: {
+    /**
+     * Получив номер без кода страны и страну вернет номер с кодом.
+     * @param value Номер.
+     * @param mask Страна.
+     * @return Номер.
+     */
+    readonly addCode: (value: string, mask: PhoneInputMask) => string;
+    /**
+     * Получив номер с кодом страны и страну вернет номер без кода.
+     * @param value Номер.
+     * @param mask Страна.
+     * @return Номер.
+     */
+    readonly removeCode: (value: string, mask: PhoneInputMask) => string;
+};
+/**
+ * Заглушка для вызова callback'ов которые ожидают SyntheticEvent.
+ * @param element Элемент.
+ * @param nativeEvent Событие.
+ * @return Синтетическое событие.
+ */
+export declare function stubSyntheticEvent<T extends Element, E extends Event>(element: T, nativeEvent: E): SyntheticEvent<T, E> & {
+    target: EventTarget & T;
+};

package/dist/phone-input/utils.js

@@ -0,0 +1,73 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PhoneValue = void 0;
+exports.defaultGetDefaultMask = defaultGetDefaultMask;
+exports.stubSyntheticEvent = stubSyntheticEvent;
+const defaults_1 = require("./preset/defaults");
+/**
+ * Определяет страну по номеру телефона.
+ * Если Подходит "Россия", будет выполнена доп.проверка и выбран "Казахстан".
+ * Если не найдена подходящая, будет выполнен поиск маски "Россия".
+ * @param params Значение.
+ * @return Маска.
+ */
+function defaultGetDefaultMask({ value, masks, }) {
+    // ВАЖНО: чтобы эта функция работала с preset/defaults и c preset/defaults-import-png корректно надо возвращать всегда элемент переданного массива
+    let result;
+    if (value) {
+        result = masks.find(item => value.indexOf(item.mask.replace(/\D/g, '')) === 0);
+        if (result && result.id === defaults_1.russiaMask.id && ['6', '7'].includes(value[1])) {
+            result = masks.find(item => item.id === defaults_1.kazakhstanMask.id);
+        }
+    }
+    return result ?? masks.find(item => item.id === defaults_1.russiaMask.id);
+}
+/**
+ * Утилиты для работы со строкой, представляющей номер телефона.
+ */
+exports.PhoneValue = {
+    /**
+     * Получив номер без кода страны и страну вернет номер с кодом.
+     * @param value Номер.
+     * @param mask Страна.
+     * @return Номер.
+     */
+    addCode(value, mask) {
+        return `${mask.mask.replace(/\D/g, '')}${value.replace(/\D/g, '')}`;
+    },
+    /**
+     * Получив номер с кодом страны и страну вернет номер без кода.
+     * @param value Номер.
+     * @param mask Страна.
+     * @return Номер.
+     */
+    removeCode(value, mask) {
+        return value.replace(/\D/g, '').slice(mask.mask.replace(/\D/g, '').length);
+    },
+};
+/**
+ * Заглушка для вызова callback'ов которые ожидают SyntheticEvent.
+ * @param element Элемент.
+ * @param nativeEvent Событие.
+ * @return Синтетическое событие.
+ */
+function stubSyntheticEvent(element, nativeEvent) {
+    return {
+        nativeEvent,
+        currentTarget: element,
+        target: element,
+        type: nativeEvent.type,
+        bubbles: nativeEvent.bubbles,
+        cancelable: nativeEvent.cancelable,
+        eventPhase: nativeEvent.eventPhase,
+        isTrusted: nativeEvent.isTrusted,
+        timeStamp: nativeEvent.timeStamp,
+        defaultPrevented: false,
+        isDefaultPrevented: () => false,
+        isPropagationStopped: () => false,
+        persist: () => void 0,
+        preventDefault: () => void 0,
+        stopPropagation: () => void 0,
+    };
+}
+//# sourceMappingURL=utils.js.map

package/dist/phone-input/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/phone-input/utils.ts"],"names":[],"mappings":";;;AAWA,sDAmBC;AAiCD,gDAuBC;AApFD,gDAA+D;AAE/D;;;;;;GAMG;AACH,SAAgB,qBAAqB,CAAC,EACpC,KAAK,EACL,KAAK,GAIN;IACC,kJAAkJ;IAClJ,IAAI,MAAkC,CAAC;IAEvC,IAAI,KAAK,EAAE,CAAC;QACV,MAAM,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC;QAE/E,IAAI,MAAM,IAAI,MAAM,CAAC,EAAE,KAAK,qBAAU,CAAC,EAAE,IAAI,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;YAC3E,MAAM,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,KAAK,yBAAc,CAAC,EAAE,CAAC,CAAC;QAC7D,CAAC;IACH,CAAC;IAED,OAAO,MAAM,IAAI,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,KAAK,qBAAU,CAAC,EAAE,CAAC,CAAC;AACjE,CAAC;AAED;;GAEG;AACU,QAAA,UAAU,GAAG;IACxB;;;;;OAKG;IACH,OAAO,CAAC,KAAa,EAAE,IAAoB;QACzC,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,GAAG,KAAK,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,EAAE,CAAC;IACtE,CAAC;IAED;;;;;OAKG;IACH,UAAU,CAAC,KAAa,EAAE,IAAoB;QAC5C,OAAO,KAAK,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC;IAC7E,CAAC;CACO,CAAC;AAEX;;;;;GAKG;AACH,SAAgB,kBAAkB,CAChC,OAAU,EACV,WAAc;IAEd,OAAO;QACL,WAAW;QACX,aAAa,EAAE,OAAO;QACtB,MAAM,EAAE,OAAO;QACf,IAAI,EAAE,WAAW,CAAC,IAAI;QACtB,OAAO,EAAE,WAAW,CAAC,OAAO;QAC5B,UAAU,EAAE,WAAW,CAAC,UAAU;QAClC,UAAU,EAAE,WAAW,CAAC,UAAU;QAClC,SAAS,EAAE,WAAW,CAAC,SAAS;QAChC,SAAS,EAAE,WAAW,CAAC,SAAS;QAEhC,gBAAgB,EAAE,KAAK;QACvB,kBAAkB,EAAE,GAAG,EAAE,CAAC,KAAK;QAC/B,oBAAoB,EAAE,GAAG,EAAE,CAAC,KAAK;QAEjC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC;QACrB,cAAc,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC;QAC5B,eAAe,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC;KAC9B,CAAC;AACJ,CAAC"}

package/dist/plate/index.d.ts

@@ -0,0 +1,2 @@
+export type { PlateProps } from './types';
+export { Plate } from './plate';

package/dist/plate/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Plate = void 0;
+var plate_1 = require("./plate");
+Object.defineProperty(exports, "Plate", { enumerable: true, get: function () { return plate_1.Plate; } });
+//# sourceMappingURL=index.js.map

package/dist/plate/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/plate/index.ts"],"names":[],"mappings":";;;AACA,iCAAgC;AAAvB,8FAAA,KAAK,OAAA"}

package/dist/plate/plate.d.ts

@@ -0,0 +1,6 @@
+import type { PlateProps } from './types';
+/**
+ * Plate это просто div с возможностью легко задавать тень и скругления.
+ * И он должен оставаться компонентом, который только задает оформление обычного div.
+ */
+export declare const Plate: import("react").ForwardRefExoticComponent<PlateProps & import("react").RefAttributes<HTMLDivElement | null>>;

package/dist/plate/plate.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Plate = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const shadows_1 = require("../styling/shadows");
+const shapes_1 = require("../styling/shapes");
+const bind_1 = __importDefault(require("classnames/bind"));
+const plate_m_scss_1 = __importDefault(require("./plate.m.scss"));
+const cx = bind_1.default.bind(plate_m_scss_1.default);
+/**
+ * Plate это просто div с возможностью легко задавать тень и скругления.
+ * И он должен оставаться компонентом, который только задает оформление обычного div.
+ */
+exports.Plate = (0, react_1.forwardRef)(function Plate({ className, children, rounds = 's', shadow = 'z1', 'data-testid': testId = 'plate', ...restProps }, ref) {
+    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, className: cx('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 }));
+});
+//# sourceMappingURL=plate.js.map

package/dist/plate/plate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"plate.js","sourceRoot":"","sources":["../../src/plate/plate.tsx"],"names":[],"mappings":";;;;;;;AACA,iCAAmC;AACnC,gDAA+C;AAC/C,8CAA8D;AAC9D,2DAAyC;AACzC,kEAAoC;AAEpC,MAAM,EAAE,GAAG,cAAU,CAAC,IAAI,CAAC,sBAAM,CAAC,CAAC;AAEnC;;;GAGG;AACU,QAAA,KAAK,GAAG,IAAA,kBAAU,EAAoC,SAAS,KAAK,CAC/E,EACE,SAAS,EACT,QAAQ,EACR,MAAM,GAAG,GAAG,EACZ,MAAM,GAAG,IAAI,EACb,aAAa,EAAE,MAAM,GAAG,OAAO,EAC/B,GAAG,SAAS,EACb,EACD,GAAG;IAEH,OAAO,CACL,gCACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,MAAM,EACN,SAAS,EACT,MAAM,IAAI,mBAAS,CAAC,MAAM,CAAC,EAC3B,MAAM,KAAK,GAAG,IAAI,oBAAW,CAAC,GAAG,EACjC,MAAM,KAAK,GAAG,IAAI,qBAAY,CAAC,GAAG,CACnC,iBACY,MAAM,EACnB,QAAQ,EAAE,QAAQ,KACd,SAAS,GACb,CACH,CAAC;AACJ,CAAC,CAAC,CAAC"}

package/dist/plate/types.d.ts

@@ -0,0 +1,9 @@
+import type { HTMLAttributes } from 'react';
+import type { BoxShadow } from '../styling/shadows';
+import type { WithTestId } from '../types';
+export interface PlateProps extends HTMLAttributes<HTMLDivElement>, WithTestId {
+    /** Тень. */
+    shadow?: keyof typeof BoxShadow | null;
+    /** Скругление углов. */
+    rounds?: 's' | 'm' | null;
+}

package/dist/plate/types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=types.js.map

package/dist/plate/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/plate/types.ts"],"names":[],"mappings":""}

package/dist/popup/index.d.ts

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

package/dist/popup/index.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFocusTrap = exports.usePopupOnClick = exports.usePopupFloatingStyle = exports.popupFloatingConfig = exports.PopupView = exports.Popup = void 0;
+var popup_1 = require("./popup");
+Object.defineProperty(exports, "Popup", { enumerable: true, get: function () { return popup_1.Popup; } });
+var popup_view_1 = require("./popup-view");
+Object.defineProperty(exports, "PopupView", { enumerable: true, get: function () { return popup_view_1.PopupView; } });
+var 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; } });
+//# sourceMappingURL=index.js.map

package/dist/popup/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/popup/index.ts"],"names":[],"mappings":";;;AACA,iCAAgC;AAAvB,8FAAA,KAAK,OAAA;AACd,2CAAyC;AAAhC,uGAAA,SAAS,OAAA;AAClB,iCAAoG;AAA3F,4GAAA,mBAAmB,OAAA;AAAE,8GAAA,qBAAqB,OAAA;AAAE,wGAAA,eAAe,OAAA;AAAE,qGAAA,YAAY,OAAA"}

package/dist/popup/popup-view.d.ts

@@ -0,0 +1,7 @@
+import type { PopupViewProps } from './types';
+/**
+ * Попап - блок для вывода информации, всплывающий рядом с целевым элементом.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function PopupView({ children, onClose, popupRef, className, 'data-testid': testId, ...rest }: PopupViewProps): import("react/jsx-runtime").JSX.Element;

package/dist/popup/popup-view.js

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PopupView = PopupView;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Cross_1 = __importDefault(require("@sima-land/ui-quarks/icons/16x16/Stroked/Cross"));
+const bind_1 = __importDefault(require("classnames/bind"));
+const popup_view_m_scss_1 = __importDefault(require("./popup-view.m.scss"));
+const cx = bind_1.default.bind(popup_view_m_scss_1.default);
+/**
+ * Попап - блок для вывода информации, всплывающий рядом с целевым элементом.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function PopupView({ children, onClose, popupRef, className, 'data-testid': testId = 'popup', ...rest }) {
+    return ((0, jsx_runtime_1.jsxs)("div", { ...rest, className: cx('root', className), ref: popupRef, "data-testid": testId, children: [onClose && ((0, jsx_runtime_1.jsx)("button", { "aria-label": '\u0417\u0430\u043A\u0440\u044B\u0442\u044C', className: cx('close'), onClick: onClose, "data-testid": 'popup:close', children: (0, jsx_runtime_1.jsx)(Cross_1.default, {}) })), (0, jsx_runtime_1.jsx)("div", { className: cx('content'), children: children })] }));
+}
+//# sourceMappingURL=popup-view.js.map

package/dist/popup/popup-view.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popup-view.js","sourceRoot":"","sources":["../../src/popup/popup-view.tsx"],"names":[],"mappings":";;;;;AAYA,8BA0BC;;AArCD,2FAAsE;AACtE,2DAAyC;AACzC,4EAAyC;AAEzC,MAAM,EAAE,GAAG,cAAU,CAAC,IAAI,CAAC,2BAAM,CAAC,CAAC;AAEnC;;;;GAIG;AACH,SAAgB,SAAS,CAAC,EACxB,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,SAAS,EACT,aAAa,EAAE,MAAM,GAAG,OAAO,EAC/B,GAAG,IAAI,EACQ;IACf,OAAO,CACL,oCAAS,IAAI,EAAE,SAAS,EAAE,EAAE,CAAC,MAAM,EAAE,SAAS,CAAC,EAAE,GAAG,EAAE,QAAQ,iBAAe,MAAM,aAChF,OAAO,IAAI,CACV,iDACa,4CAAS,EACpB,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,EACtB,OAAO,EAAE,OAAO,iBACJ,aAAa,YAEzB,uBAAC,eAAQ,KAAG,GACL,CACV,EAID,gCAAK,SAAS,EAAE,EAAE,CAAC,SAAS,CAAC,YAAG,QAAQ,GAAO,IAC3C,CACP,CAAC;AACJ,CAAC"}

package/dist/popup/popup-view.m.scss

@@ -0,0 +1,46 @@
+@use '../colors';
+@use '../shadows';
+@use '../utils';
+
+.root {
+  display: inline-flex;
+  position: relative;
+  max-width: 400px;
+  max-height: var(--popup-max-height, min(536px, calc(100vh - 16px)));
+  padding: var(--popup-padding, 40px 8px);
+  box-sizing: border-box;
+  background: var(--popup-background, #{colors.$basic-gray4});
+  border-radius: var(--popup-border-radius, 4px);
+  box-shadow: var(--popup-box-shadow, #{shadows.get-box-shadow('z2')});
+}
+
+.close {
+  @include utils.reset-button;
+  @include utils.focus-visible;
+}
+
+.close {
+  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);
+}
+
+.content {
+  font-size: 16px;
+  line-height: 24px;
+  padding: var(--popup-content-padding, 0 32px);
+  max-height: 456px; // 536 (по гайдам) - 80 (горизонтальные отступы)
+  overflow-y: auto;
+  overflow-x: hidden;
+}

package/dist/popup/popup.d.ts

@@ -0,0 +1,7 @@
+import { PopupProps } from './types';
+/**
+ * Popup, всплывающий когда указан целевой элемент.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function Popup({ showFor, ...rest }: PopupProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/popup/popup.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Popup = Popup;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = 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 use_identity_ref_1 = require("../hooks/use-identity-ref");
+const portal_1 = require("../portal");
+/**
+ * Popup, всплывающий когда указан целевой элемент.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function Popup({ showFor, ...rest }) {
+    if (!showFor) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)(portal_1.Portal, { children: (0, jsx_runtime_1.jsx)(PopupInner, { showFor: showFor, ...rest }) }));
+}
+/**
+ * Внутренний компонент, необходим из-за использования портала.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function PopupInner({ showFor, popupRef, children, style, onDismiss, withCloseButton = true, placement, offset, ...rest }) {
+    const { refs, ...floating } = (0, react_2.useFloating)((0, utils_1.popupFloatingConfig)({ placement, offset }));
+    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, use_identity_ref_1.useIdentityRef)(showFor);
+    (0, hooks_1.useOutsideClick)([anchorRef, refs.floating], onDismiss);
+    (0, utils_1.useFocusTrap)(refs.floating, {
+        enabled: floating.isPositioned,
+        afterDeactivate: onDismiss,
+    });
+    return ((0, jsx_runtime_1.jsx)(popup_view_1.PopupView, { ...rest, popupRef: refs.setFloating, style: {
+            ...style,
+            ...floatingStyle,
+        }, onClose: withCloseButton ? onDismiss : undefined, children: children }));
+}
+//# sourceMappingURL=popup.js.map

package/dist/popup/popup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popup.js","sourceRoot":"","sources":["../../src/popup/popup.tsx"],"names":[],"mappings":";;AAcA,sBAUC;;AAxBD,iCAA4C;AAC5C,6CAAyC;AACzC,8CAAiD;AACjD,oCAA2C;AAC3C,mCAAmF;AACnF,gEAA2D;AAC3D,sCAAmC;AAGnC;;;;GAIG;AACH,SAAgB,KAAK,CAAC,EAAE,OAAO,EAAE,GAAG,IAAI,EAAc;IACpD,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,CACL,uBAAC,eAAM,cACL,uBAAC,UAAU,IAAC,OAAO,EAAE,OAAO,KAAM,IAAI,GAAI,GACnC,CACV,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,SAAS,UAAU,CAAC,EAClB,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,SAAS,EACT,eAAe,GAAG,IAAI,EACtB,SAAS,EACT,MAAM,EACN,GAAG,IAAI,EACS;IAChB,MAAM,EAAE,IAAI,EAAE,GAAG,QAAQ,EAAE,GAAG,IAAA,mBAAW,EAAC,IAAA,2BAAmB,EAAC,EAAE,SAAS,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC;IACtF,MAAM,aAAa,GAAG,IAAA,6BAAqB,EAAC,QAAQ,CAAC,CAAC;IAEtD,IAAA,2BAAmB,EAAC,QAAQ,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAyB,CAAC,CAAC;IAC7E,IAAA,2BAAmB,EAAC,IAAI,CAAC,YAAY,EAAE,GAAG,EAAE,CAAC,OAAO,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEjE,MAAM,SAAS,GAAG,IAAA,iCAAc,EAAC,OAAO,CAAC,CAAC;IAC1C,IAAA,uBAAe,EAAC,CAAC,SAAS,EAAE,IAAI,CAAC,QAAQ,CAAC,EAAE,SAAS,CAAC,CAAC;IAEvD,IAAA,oBAAY,EAAC,IAAI,CAAC,QAAQ,EAAE;QAC1B,OAAO,EAAE,QAAQ,CAAC,YAAY;QAC9B,eAAe,EAAE,SAAS;KAC3B,CAAC,CAAC;IAEH,OAAO,CACL,uBAAC,sBAAS,OACJ,IAAI,EACR,QAAQ,EAAE,IAAI,CAAC,WAAW,EAC1B,KAAK,EAAE;YACL,GAAG,KAAK;YACR,GAAG,aAAa;SACjB,EACD,OAAO,EAAE,eAAe,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,YAE/C,QAAQ,GACC,CACb,CAAC;AACJ,CAAC"}

package/dist/popup/types.d.ts

@@ -0,0 +1,34 @@
+import type { CSSProperties, HTMLAttributes, Ref } from 'react';
+import type { WithTestId } from '../types';
+export interface PopupStyle extends CSSProperties {
+    '--popup-max-height'?: string;
+    '--popup-padding'?: string;
+    '--popup-content-padding'?: string;
+    '--popup-background'?: string;
+    '--popup-border-radius'?: string;
+    '--popup-box-shadow'?: string;
+}
+export type PopupPlacement = 'top' | 'right' | 'bottom' | 'left' | 'right-start' | 'top-start' | 'top-end' | 'right-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end';
+export interface PopupViewProps extends HTMLAttributes<HTMLDivElement>, WithTestId {
+    /** Сработает при клике на крестик. */
+    onClose?: () => void;
+    /** Реф корневого элемента. */
+    popupRef?: Ref<HTMLDivElement>;
+    /** Стили. */
+    style?: PopupStyle;
+}
+export interface PopupProps extends Omit<PopupViewProps, 'onClose'> {
+    /** Элемент для которого нужно показать Popup ил null. */
+    showFor?: Element | null;
+    /** Сработает при попытке закрыть Popup. */
+    onDismiss?: () => void;
+    /** Нужно ли выводить кнопку закрытия. */
+    withCloseButton?: boolean;
+    /** Расположение попапа относительно целевого элемента. */
+    placement?: PopupPlacement;
+    /** Отступ в пикселях от попапа до целевого элемента по оси. */
+    offset?: number;
+}
+export interface PopupInnerProps extends PopupProps {
+    showFor: Element;
+}

package/dist/popup/types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=types.js.map

package/dist/popup/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/popup/types.ts"],"names":[],"mappings":""}

package/dist/popup/utils.d.ts

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

package/dist/popup/utils.js

@@ -0,0 +1,87 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.popupFloatingConfig = popupFloatingConfig;
+exports.usePopupFloatingStyle = usePopupFloatingStyle;
+exports.usePopupOnClick = usePopupOnClick;
+exports.useFocusTrap = useFocusTrap;
+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 use_identity_ref_1 = require("../hooks/use-identity-ref");
+/**
+ * Возвращает конфигурацию для `useFloating` по дизайн-гайдам.
+ * @param options Опции.
+ * @return Конфигурация для `useFloating` по дизайн-гайдам.
+ */
+function popupFloatingConfig({ placement = 'right-start', offset: offsetValue = 8, } = {}) {
+    return {
+        strategy: 'absolute',
+        placement,
+        middleware: [
+            (0, react_1.offset)(offsetValue),
+            (0, react_1.flip)({
+                padding: 16,
+                fallbackAxisSideDirection: 'start',
+            }),
+            (0, react_1.shift)({
+                padding: 16,
+            }),
+        ],
+        whileElementsMounted: react_1.autoUpdate,
+    };
+}
+/**
+ * Возвращает стили для элемента с учетом "слоя".
+ * @param floating Результат вызова useFloating.
+ * @return Стили для элемента с учетом "слоя".
+ */
+function usePopupFloatingStyle({ strategy, x, y, }) {
+    const layer = (0, layer_1.useLayer)();
+    return {
+        position: strategy,
+        top: y,
+        left: x,
+        zIndex: layer + 2,
+    };
+}
+/**
+ * Показ всплывающего элемента по клику и скрытие.
+ * @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 } }]);
+}
+/**
+ * Хук ловушки фокуса.
+ * @todo Вынести в общие утилиты тк понадобится для Modal и тд.
+ * @param ref Элемент-контейнер для которого нужно захватить фокус.
+ * @param options Опции.
+ */
+function useFocusTrap(ref, { enabled, afterDeactivate, }) {
+    const afterDeactivateRef = (0, use_identity_ref_1.useIdentityRef)(afterDeactivate);
+    (0, hooks_1.useIsomorphicLayoutEffect)(() => {
+        const element = ref.current;
+        if (!enabled || !element) {
+            return;
+        }
+        const trap = (0, focus_trap_1.createFocusTrap)(element, {
+            allowOutsideClick: true,
+            tabbableOptions: { displayCheck: 'none' },
+            onPostDeactivate: afterDeactivateRef.current,
+            // ВАЖНО: отключаем тк в противном случае в Safari срабатывает :focus-visible
+            initialFocus: false,
+        });
+        trap.activate();
+        return () => {
+            trap.deactivate({
+                returnFocus: true, // @todo тоже убрать?
+            });
+        };
+    }, [ref, enabled]);
+}
+//# sourceMappingURL=utils.js.map

package/dist/popup/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/popup/utils.ts"],"names":[],"mappings":";;AAsBA,kDAoCC;AAOD,sDAaC;AAOD,0CASC;AAQD,oCAoCC;AA1ID,8CAU4B;AAC5B,2CAA6C;AAE7C,4CAA4C;AAC5C,oCAAqD;AACrD,gEAA2D;AAE3D;;;;GAIG;AACH,SAAgB,mBAAmB,CAAC,EAClC,SAAS,GAAG,aAAa,EACzB,MAAM,EAAE,WAAW,GAAG,CAAC,MAkBrB,EAAE;IACJ,OAAO;QACL,QAAQ,EAAE,UAAU;QACpB,SAAS;QACT,UAAU,EAAE;YACV,IAAA,cAAM,EAAC,WAAW,CAAC;YACnB,IAAA,YAAI,EAAC;gBACH,OAAO,EAAE,EAAE;gBACX,yBAAyB,EAAE,OAAO;aACnC,CAAC;YACF,IAAA,aAAK,EAAC;gBACJ,OAAO,EAAE,EAAE;aACZ,CAAC;SACH;QACD,oBAAoB,EAAE,kBAAU;KACjC,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,SAAgB,qBAAqB,CAAC,EACpC,QAAQ,EACR,CAAC,EACD,CAAC,GAC+C;IAChD,MAAM,KAAK,GAAG,IAAA,gBAAQ,GAAE,CAAC;IAEzB,OAAO;QACL,QAAQ,EAAE,QAAQ;QAClB,GAAG,EAAE,CAAC;QACN,IAAI,EAAE,CAAC;QACP,MAAM,EAAE,KAAK,GAAG,CAAC;KAClB,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,SAAgB,eAAe,CAC7B,QAAqE;IAErE,MAAM,KAAK,GAAG,qBAAqB,CAAC,QAAQ,CAAC,CAAC;IAE9C,MAAM,KAAK,GAAG,IAAA,gBAAQ,EAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;IACzC,MAAM,OAAO,GAAG,IAAA,kBAAU,EAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;IAE7C,OAAO,IAAA,uBAAe,EAAC,CAAC,KAAK,EAAE,OAAO,EAAE,EAAE,QAAQ,EAAE,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC,CAAC;AACpE,CAAC;AAED;;;;;GAKG;AACH,SAAgB,YAAY,CAC1B,GAAwC,EACxC,EACE,OAAO,EACP,eAAe,GAIhB;IAED,MAAM,kBAAkB,GAAG,IAAA,iCAAc,EAAC,eAAe,CAAC,CAAC;IAE3D,IAAA,iCAAyB,EAAC,GAAG,EAAE;QAC7B,MAAM,OAAO,GAAG,GAAG,CAAC,OAAO,CAAC;QAE5B,IAAI,CAAC,OAAO,IAAI,CAAC,OAAO,EAAE,CAAC;YACzB,OAAO;QACT,CAAC;QAED,MAAM,IAAI,GAAG,IAAA,4BAAe,EAAC,OAAO,EAAE;YACpC,iBAAiB,EAAE,IAAI;YACvB,eAAe,EAAE,EAAE,YAAY,EAAE,MAAM,EAAE;YACzC,gBAAgB,EAAE,kBAAkB,CAAC,OAAO;YAE5C,6EAA6E;YAC7E,YAAY,EAAE,KAAK;SACpB,CAAC,CAAC;QAEH,IAAI,CAAC,QAAQ,EAAE,CAAC;QAEhB,OAAO,GAAG,EAAE;YACV,IAAI,CAAC,UAAU,CAAC;gBACd,WAAW,EAAE,IAAI,EAAE,qBAAqB;aACzC,CAAC,CAAC;QACL,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC,CAAC;AACrB,CAAC"}

package/dist/portal/index.d.ts

@@ -0,0 +1,2 @@
+export type { PortalProps } from './types';
+export { Portal } from './portal';

package/dist/portal/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Portal = void 0;
+var portal_1 = require("./portal");
+Object.defineProperty(exports, "Portal", { enumerable: true, get: function () { return portal_1.Portal; } });
+//# sourceMappingURL=index.js.map

package/dist/portal/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/portal/index.ts"],"names":[],"mappings":";;;AACA,mCAAkC;AAAzB,gGAAA,MAAM,OAAA"}

package/dist/portal/portal.d.ts

@@ -0,0 +1,7 @@
+import type { PortalProps } from './types';
+/**
+ * Портал - выводит содержимое в портале в произвольную часть DOM.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function Portal({ children, defineRoot, onMount }: PortalProps): import("react").ReactPortal | null;

package/dist/portal/portal.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Portal = Portal;
+const react_1 = require("react");
+const react_dom_1 = require("react-dom");
+const hooks_1 = require("../hooks");
+/**
+ * Портал - выводит содержимое в портале в произвольную часть DOM.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function Portal({ children, defineRoot = () => document.body, onMount }) {
+    const [mounted, setMounted] = (0, react_1.useState)(false);
+    const ref = (0, react_1.useRef)();
+    (0, hooks_1.useIsomorphicLayoutEffect)(() => {
+        const root = defineRoot();
+        ref.current = document.createElement('div');
+        root.appendChild(ref.current);
+        setMounted(true);
+        return () => {
+            ref.current && ref.current.remove();
+        };
+    }, []);
+    const onMountRef = (0, react_1.useRef)(onMount);
+    onMountRef.current = onMount;
+    (0, hooks_1.useIsomorphicLayoutEffect)(() => {
+        if (mounted) {
+            onMountRef.current?.();
+        }
+    }, [mounted]);
+    return mounted && ref.current ? (0, react_dom_1.createPortal)(children, ref.current) : null;
+}
+//# sourceMappingURL=portal.js.map