@sima-land/ui-nucleons 45.0.0-alpha.4 → 45.0.0-alpha.40

package/select/select.d.ts

@@ -1,14 +1,7 @@
-/// <reference types="react" />
 import { SelectProps } from './types';
-import { SelectFieldBlock } from './parts/block';
-import { SelectTextButton } from './parts/button';
 /**
  * Поле выбора из списка.
  * @param props Свойства.
  * @return Элемент.
  */
-export declare function Select({ children, disabled, failed, loading, onValueChange, onMenuToggle, value, defaultValue, label, opener, renderValue, dropdownProps, }: SelectProps): JSX.Element;
-export declare namespace Select {
-    var FieldBlock: typeof SelectFieldBlock;
-    var TextButton: typeof SelectTextButton;
-}
+export declare function Select(props: SelectProps): import("react/jsx-runtime").JSX.Element;

package/select/select.js

@@ -1,145 +1,71 @@
 "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.Select = void 0;
-const react_1 = __importStar(require("react"));
+exports.Select = Select;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const utils_1 = require("./utils");
-const identity_1 = require("../hooks/identity");
-const utils_2 = require("../dropdown-item/utils");
-const react_2 = require("@floating-ui/react");
+const field_block_1 = require("./parts/field-block");
 const menu_1 = require("./parts/menu");
-const block_1 = require("./parts/block");
-const button_1 = require("./parts/button");
-const utils_3 = require("../dropdown/utils");
+const react_2 = require("@floating-ui/react");
+const dropdown_1 = require("../dropdown");
+const hooks_1 = require("../hooks");
 /**
  * Поле выбора из списка.
  * @param props Свойства.
  * @return Элемент.
  */
-function Select({ children, disabled, failed, loading, onValueChange, onMenuToggle, value, defaultValue, label, opener = react_1.default.createElement(block_1.SelectFieldBlock, null), renderValue = v => v, dropdownProps, }) {
+function Select(props) {
+    const { opener = (0, jsx_runtime_1.jsx)(field_block_1.SelectFieldBlock, {}), menu = (0, jsx_runtime_1.jsx)(menu_1.SelectMenu, {}), value, defaultValue, onValueChange, } = props;
     // @todo по аналогии с <select /> надо проверять, есть ли значение в списке переданных
-    const [initialValue] = (0, react_1.useState)(() => { var _a; return (_a = value !== null && value !== void 0 ? value : defaultValue) !== null && _a !== void 0 ? _a : ''; });
-    const [currentValue, setCurrentValue] = (0, react_1.useState)(initialValue);
-    const [needMenu, setNeedMenu] = (0, react_1.useState)(false);
+    const [currentValue, setCurrentValue] = (0, react_1.useState)(() => value ?? defaultValue ?? '');
+    const [menuOpen, setMenuOpen] = (0, react_1.useState)(false);
+    const [openerElement, setOpenerElement] = (0, react_1.useState)(null);
+    const [anchorElement, setAnchorElement] = (0, react_1.useState)(null);
     const [menuElement, setMenuElement] = (0, react_1.useState)(null);
-    const [menuFocused, setMenuFocused] = (0, react_1.useState)(false);
-    const onMenuToggleRef = (0, identity_1.useIdentityRef)(onMenuToggle);
-    const openerRef = (0, react_1.useRef)(null);
-    const menuShown = needMenu && menuElement !== null;
-    const _a = (0, react_2.useFloating)(Object.assign({ open: needMenu }, (0, utils_3.dropdownFloatingConfig)())), { refs, isPositioned } = _a, floating = __rest(_a, ["refs", "isPositioned"]);
-    (0, react_1.useImperativeHandle)(refs.setFloating, () => menuElement, [menuElement]);
-    (0, react_1.useEffect)(() => {
-        if (typeof value !== 'undefined') {
-            // @todo по аналогии с <select /> надо проверять, есть ли значение в списке переданных
+    const menuFloating = (0, react_2.useFloating)({ open: menuOpen, ...(0, dropdown_1.dropdownFloatingConfig)() });
+    const { setReference, setFloating } = menuFloating.refs;
+    const menuFloatingStyle = (0, dropdown_1.useDropdownFloatingStyle)(menuFloating);
+    (0, hooks_1.useIsomorphicLayoutEffect)(() => {
+        if (typeof value === 'string') {
             setCurrentValue(value);
         }
     }, [value]);
-    (0, react_1.useEffect)(() => {
-        var _a;
-        if (disabled) {
-            setNeedMenu(false);
+    (0, hooks_1.useIsomorphicLayoutEffect)(() => {
+        if (menuOpen && menuFloating.isPositioned) {
+            menuElement?.focus();
         }
-        if (!disabled && menuElement && isPositioned) {
-            menuElement.focus();
-        }
-        // @todo menuShown в зависимости или useCallback
-        (_a = onMenuToggleRef.current) === null || _a === void 0 ? void 0 : _a.call(onMenuToggleRef, { opened: menuShown });
-    }, [disabled, menuElement, isPositioned]);
-    const openerBinding = {
-        label,
-        anchorRef: refs.setReference,
-        openerRef,
-        value: renderValue(currentValue),
-        opened: menuShown,
-        failed,
-        disabled,
-        menuFocused,
-        onMouseDown: event => {
-            if (!disabled) {
-                !menuElement && event.preventDefault();
-                setNeedMenu(a => !a);
+    }, [menuOpen, menuFloating.isPositioned, menuElement]);
+    const contextValue = {
+        selectProps: props,
+        currentValue,
+        setCurrentValue: (0, react_1.useCallback)(valueInit => {
+            let nextValue = valueInit;
+            if (typeof nextValue === 'function') {
+                nextValue = nextValue(currentValue);
             }
-        },
-        onKeyDown: e => {
-            if (!disabled) {
-                switch (e.code) {
-                    case 'Enter':
-                    case 'ArrowUp':
-                    case 'ArrowDown':
-                        setNeedMenu(true);
-                        break;
-                }
+            if (currentValue !== nextValue) {
+                setCurrentValue(nextValue);
+                onValueChange?.(nextValue);
             }
-        },
+        }, [currentValue, onValueChange]),
+        menuOpen,
+        setMenuOpen,
+        openerElement,
+        setOpenerElement: (0, react_1.useCallback)(element => {
+            setOpenerElement(element);
+        }, []),
+        anchorElement,
+        setAnchorElement: (0, react_1.useCallback)(element => {
+            setReference(element);
+            setAnchorElement(element);
+        }, [setReference]),
+        menuElement,
+        setMenuElement: (0, react_1.useCallback)(element => {
+            setFloating(element);
+            setMenuElement(element);
+        }, [setFloating]),
+        menuFloatingStyle,
     };
-    const floatingStyle = (0, utils_3.useDropdownFloatingStyle)(Object.assign({ refs }, floating));
-    const menuProps = Object.assign(Object.assign({}, dropdownProps), { style: Object.assign(Object.assign({}, dropdownProps === null || dropdownProps === void 0 ? void 0 : dropdownProps.style), floatingStyle), menuRef: setMenuElement, value,
-        loading, onFocus: () => {
-            setMenuFocused(true);
-        }, onBlur: () => {
-            setNeedMenu(false);
-            setMenuFocused(false);
-        }, onKeyDown: event => {
-            var _a, _b;
-            switch (event.code) {
-                case 'ArrowUp':
-                case 'ArrowDown':
-                    event.preventDefault(); // предотвращаем прокрутку страницы
-                    break;
-                case 'Enter':
-                case 'Escape':
-                    (_a = openerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-                    break;
-                case 'Tab':
-                    event.preventDefault(); // предотвращаем фокус на следующем элементе
-                    (_b = openerRef.current) === null || _b === void 0 ? void 0 : _b.focus();
-                    break;
-            }
-        }, onItemSelect: item => {
-            var _a;
-            const nextValue = utils_2.DropdownItemUtils.getValue(item);
-            setCurrentValue(nextValue);
-            onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(nextValue);
-            setNeedMenu(false);
-            (_a = openerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-        } });
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(utils_1.SelectContext.Provider, { value: openerBinding }, (0, react_1.isValidElement)(opener) && opener),
-        react_1.default.createElement(react_2.FloatingPortal, { id: '' }, needMenu && react_1.default.createElement(menu_1.SelectMenu, Object.assign({}, menuProps), children))));
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(utils_1.SelectContext.Provider, { value: contextValue, children: [opener, menu] }) }));
 }
-exports.Select = Select;
-Select.FieldBlock = block_1.SelectFieldBlock;
-Select.TextButton = button_1.SelectTextButton;
+//# sourceMappingURL=select.js.map

package/select/select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.js","sourceRoot":"","sources":["../../src/select/select.tsx"],"names":[],"mappings":"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"}

package/select/types.d.ts

@@ -1,29 +1,22 @@
-import type { FocusEventHandler, HTMLAttributes, ReactElement, ReactNode, Ref } from 'react';
+import type { CSSProperties, Dispatch, ReactElement, ReactNode, SetStateAction } from 'react';
 import type { DropdownProps } from '../dropdown';
-import type { DropdownItemElement } from '../dropdown-item/types';
 import type { FieldBlockStyle } from '../field-block';
 export interface SelectStyle extends FieldBlockStyle {
     '--dropdown-width'?: string | number;
 }
-export interface SelectOpenerBinding {
-    label?: string;
-    failed?: boolean;
-    disabled?: boolean;
-    value: ReactNode;
-    opened: boolean;
-    menuFocused: boolean;
-    openerRef: Ref<HTMLElement | null>;
-    anchorRef: Ref<HTMLElement | null>;
-    onMouseDown: Required<HTMLAttributes<HTMLElement>>['onMouseDown'];
-    onKeyDown: Required<HTMLAttributes<HTMLElement>>['onKeyDown'];
-}
-export interface SelectMenuProps extends DropdownProps {
-    menuRef?: Ref<HTMLDivElement | null>;
-    value?: ReactNode;
-    children?: ReactNode;
-    loading?: boolean;
-    onBlur?: FocusEventHandler;
-    onItemSelect?: (item: DropdownItemElement) => void;
+export interface SelectContextValue {
+    selectProps: SelectProps;
+    currentValue: string;
+    setCurrentValue: Dispatch<SetStateAction<string>>;
+    menuOpen: boolean;
+    setMenuOpen: Dispatch<SetStateAction<boolean>>;
+    openerElement: HTMLElement | null;
+    setOpenerElement: (element: HTMLElement | null) => void;
+    anchorElement: HTMLElement | null;
+    setAnchorElement: (element: HTMLElement | null) => void;
+    menuElement: HTMLElement | null;
+    setMenuElement: (element: HTMLElement | null) => void;
+    menuFloatingStyle?: CSSProperties;
 }
 export interface SelectProps {
     /** Опции. */
@@ -50,6 +43,12 @@ export interface SelectProps {
     label?: string;
     /** Открывающий элемент. */
     opener?: ReactElement;
-    /** Опции Dropdown. */
-    dropdownProps?: Pick<DropdownProps, 'className' | 'style'>;
+    /** Элемент меню. */
+    menu?: ReactElement;
+    /** Свойства компонента Dropdown. */
+    dropdownProps?: Omit<DropdownProps, 'rootRef' | 'viewportRef'>;
+    /** Сработает при открытии меню. */
+    onMenuOpen?: VoidFunction;
+    /** Сработает при закрытии меню. */
+    onMenuClose?: VoidFunction;
 }

package/select/types.js

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

package/select/types.js.map

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

package/select/utils.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-import { SelectOpenerBinding } from './types';
-export declare const SelectContext: import("react").Context<SelectOpenerBinding>;
+import type { SelectContextValue } from './types';
+export declare const SELECT_CONTEXT_DEFAULT_VALUE: SelectContextValue;
+export declare const SelectContext: import("react").Context<SelectContextValue>;

package/select/utils.js

@@ -1,13 +1,20 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SelectContext = void 0;
+exports.SelectContext = exports.SELECT_CONTEXT_DEFAULT_VALUE = void 0;
 const react_1 = require("react");
-exports.SelectContext = (0, react_1.createContext)({
-    value: '',
-    opened: false,
-    menuFocused: false,
-    openerRef: (0, react_1.createRef)(),
-    anchorRef: (0, react_1.createRef)(),
-    onMouseDown: () => void 0,
-    onKeyDown: () => void 0,
-});
+exports.SELECT_CONTEXT_DEFAULT_VALUE = {
+    selectProps: {},
+    currentValue: '',
+    setCurrentValue: () => { },
+    menuOpen: false,
+    setMenuOpen: () => { },
+    openerElement: null,
+    setOpenerElement: () => { },
+    anchorElement: null,
+    setAnchorElement: () => { },
+    menuElement: null,
+    setMenuElement: () => { },
+    menuFloatingStyle: {},
+};
+exports.SelectContext = (0, react_1.createContext)(exports.SELECT_CONTEXT_DEFAULT_VALUE);
+//# sourceMappingURL=utils.js.map

package/select/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/select/utils.ts"],"names":[],"mappings":";;;AACA,iCAAsC;AAEzB,QAAA,4BAA4B,GAAuB;IAC9D,WAAW,EAAE,EAAE;IAEf,YAAY,EAAE,EAAE;IAChB,eAAe,EAAE,GAAG,EAAE,GAAE,CAAC;IAEzB,QAAQ,EAAE,KAAK;IACf,WAAW,EAAE,GAAG,EAAE,GAAE,CAAC;IAErB,aAAa,EAAE,IAAI;IACnB,gBAAgB,EAAE,GAAG,EAAE,GAAE,CAAC;IAE1B,aAAa,EAAE,IAAI;IACnB,gBAAgB,EAAE,GAAG,EAAE,GAAE,CAAC;IAE1B,WAAW,EAAE,IAAI;IACjB,cAAc,EAAE,GAAG,EAAE,GAAE,CAAC;IAExB,iBAAiB,EAAE,EAAE;CACtB,CAAC;AAEW,QAAA,aAAa,GAAG,IAAA,qBAAa,EAAqB,oCAA4B,CAAC,CAAC"}

package/shadows.scss

@@ -3,16 +3,52 @@
  */
 @mixin box-shadow($key) {
   @if $key == 'z1' {
-    box-shadow: 0 0 4px rgba(0, 0, 0, 0.04), 0 2px 4px rgba(0, 0, 0, 0.08);
+    box-shadow:
+      0 0 4px rgba(0, 0, 0, 0.04),
+      0 2px 4px rgba(0, 0, 0, 0.08);
   } @else if $key == 'z2' {
-    box-shadow: 0 0 4px rgba(0, 0, 0, 0.04), 0 4px 8px rgba(0, 0, 0, 0.1);
+    box-shadow:
+      0 0 4px rgba(0, 0, 0, 0.04),
+      0 4px 8px rgba(0, 0, 0, 0.1);
   } @else if $key == 'z2-straight' {
     box-shadow: 0 0 15px rgba(0, 0, 0, 0.12);
   } @else if $key == 'z3' {
-    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08), 0 0 4px rgba(0, 0, 0, 0.04);
+    box-shadow:
+      0 8px 16px rgba(0, 0, 0, 0.08),
+      0 0 4px rgba(0, 0, 0, 0.04);
   } @else if $key == 'z4' {
-    box-shadow: 0 0 4px rgba(0, 0, 0, 0.04), 0 12px 30px rgba(0, 0, 0, 0.1);
+    box-shadow:
+      0 0 4px rgba(0, 0, 0, 0.04),
+      0 12px 30px rgba(0, 0, 0, 0.1);
   } @else {
     @warn 'No such shadow `#{$key}`.';
   }
 }
+
+@function get-box-shadow($key) {
+  $result: none;
+
+  @if $key == 'z1' {
+    $result:
+      0 0 4px rgba(0, 0, 0, 0.04),
+      0 2px 4px rgba(0, 0, 0, 0.08);
+  } @else if $key == 'z2' {
+    $result:
+      0 0 4px rgba(0, 0, 0, 0.04),
+      0 4px 8px rgba(0, 0, 0, 0.1);
+  } @else if $key == 'z2-straight' {
+    $result: 0 0 15px rgba(0, 0, 0, 0.12);
+  } @else if $key == 'z3' {
+    $result:
+      0 8px 16px rgba(0, 0, 0, 0.08),
+      0 0 4px rgba(0, 0, 0, 0.04);
+  } @else if $key == 'z4' {
+    $result:
+      0 0 4px rgba(0, 0, 0, 0.04),
+      0 12px 30px rgba(0, 0, 0, 0.1);
+  } @else {
+    @warn 'No such shadow `#{$key}`.';
+  }
+
+  @return $result;
+}

package/side-page/index.d.ts

@@ -1,39 +1,4 @@
-import { ReactNode } from 'react';
-import { WithPageScrollLock } from '../_internal/page-scroll-lock';
-import { SidePageBody, SidePageFooter, SidePageHeader } from './slots';
-import { CSSTransitionProps } from 'react-transition-group/CSSTransition';
-export interface SidePageProps extends WithPageScrollLock {
-    /** Нужно ли показать компонент. */
-    shown?: boolean;
-    /** Нужно ли использовать анимации при открытии/закрытии. */
-    withTransitions?: boolean;
-    /** Ширина. */
-    size?: 's' | 'm';
-    /** Содержимое. */
-    children?: ReactNode;
-    /** Сработает при закрытии. */
-    onClose?: () => void;
-    /** Обработчик "onEntering" для CSSTransition. */
-    onEntering?: CSSTransitionProps['onEntering'];
-    /** Обработчик "onEnter" для CSSTransition. */
-    onEnter?: CSSTransitionProps['onEnter'];
-    /** Обработчик "onEntered" для CSSTransition. */
-    onEntered?: CSSTransitionProps['onEntered'];
-    /** Обработчик "onExiting" для CSSTransition. */
-    onExiting?: CSSTransitionProps['onExiting'];
-    /** Обработчик "onExited" для CSSTransition. */
-    onExited?: CSSTransitionProps['onExited'];
-    /** Обработчик "onExit" для CSSTransition. */
-    onExit?: CSSTransitionProps['onExit'];
-}
-/**
- * Компонент модального окна, прикрепленного к правой стороне экрана.
- * @param props Свойства.
- * @return Элемент.
- */
-export declare function SidePage({ shown, withTransitions, onEnter, onEntering, onEntered, onExit, onExiting, onExited, ...restProps }: SidePageProps): JSX.Element;
-export declare namespace SidePage {
-    var Header: typeof SidePageHeader;
-    var Body: typeof SidePageBody;
-    var Footer: typeof SidePageFooter;
-}
+export type { SidePageProps } from './types';
+export { SidePage } from './side-page';
+export { SidePageBody } from './side-page-body';
+export { getResponsiveSidePageProps, useSidePageTransition } from './utils';

package/side-page/index.js

@@ -1,91 +1,11 @@
 "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.SidePage = void 0;
-const react_1 = __importStar(require("react"));
-const define_slots_1 = require("../helpers/define-slots");
-const page_scroll_lock_1 = require("../_internal/page-scroll-lock");
-const slots_1 = require("./slots");
-const CSSTransition_1 = __importDefault(require("react-transition-group/CSSTransition"));
-const modal_overlay_1 = require("../modal-overlay");
-const utils_1 = require("../modal-overlay/utils");
-const bind_1 = __importDefault(require("classnames/bind"));
-const side_page_module_scss_1 = __importDefault(require("./side-page.module.scss"));
-const cx = bind_1.default.bind(side_page_module_scss_1.default);
-const transitionClasses = {
-    enter: cx('enter'),
-    enterActive: cx('enter-active'),
-    exit: cx('exit'),
-    exitActive: cx('exit-active'),
-};
-/**
- * Компонент модального окна, прикрепленного к правой стороне экрана.
- * @param props Свойства.
- * @return Элемент.
- */
-function SidePage(_a) {
-    var { shown, withTransitions, onEnter, onEntering, onEntered, onExit, onExiting, onExited } = _a, restProps = __rest(_a, ["shown", "withTransitions", "onEnter", "onEntering", "onEntered", "onExit", "onExiting", "onExited"]);
-    const transitionDuration = withTransitions ? 300 : 0;
-    return (react_1.default.createElement(CSSTransition_1.default, { in: shown, timeout: transitionDuration, classNames: transitionClasses, unmountOnExit: true, onEntering: onEntering, onEnter: onEnter, onEntered: onEntered, onExit: onExit, onExiting: onExiting, onExited: onExited }, transitionStatus => (react_1.default.createElement(SidePageInner, Object.assign({}, restProps, { transitionStatus, transitionDuration })))));
-}
-exports.SidePage = SidePage;
-/**
- * Фиктивный компонент, необходимый для того чтобы задействовать хук блокировки прокрутки внутри CSSTransition.
- * @param props Свойства.
- * @return Элемент.
- */
-function SidePageInner({ size = 'm', children, onClose, withScrollDisable = false, scrollDisableOptions, transitionStatus, transitionDuration, }) {
-    const overlayClickBind = (0, utils_1.useExactClick)(onClose);
-    const ref = (0, react_1.useRef)(null);
-    (0, page_scroll_lock_1.usePageScrollLock)(ref, Object.assign({ lockEnabled: withScrollDisable }, scrollDisableOptions));
-    const { header, body, footer } = (0, define_slots_1.defineSlots)(children, {
-        header: SidePage.Header,
-        body: SidePage.Body,
-        footer: SidePage.Footer,
-    });
-    const overlayProps = Object.assign({ style: { '--transition-duration': `${transitionDuration}ms` } }, (transitionStatus !== 'entering' && overlayClickBind));
-    return (react_1.default.createElement(modal_overlay_1.ModalOverlay, Object.assign({}, overlayProps),
-        react_1.default.createElement("div", { className: cx('side-page', `size-${size}`) },
-            header,
-            react_1.default.createElement("div", { ref: ref, className: cx('body') }, body),
-            footer)));
-}
-SidePage.Header = slots_1.SidePageHeader;
-SidePage.Body = slots_1.SidePageBody;
-SidePage.Footer = slots_1.SidePageFooter;
+exports.useSidePageTransition = exports.getResponsiveSidePageProps = exports.SidePageBody = exports.SidePage = void 0;
+var side_page_1 = require("./side-page");
+Object.defineProperty(exports, "SidePage", { enumerable: true, get: function () { return side_page_1.SidePage; } });
+var side_page_body_1 = require("./side-page-body");
+Object.defineProperty(exports, "SidePageBody", { enumerable: true, get: function () { return side_page_body_1.SidePageBody; } });
+var utils_1 = require("./utils");
+Object.defineProperty(exports, "getResponsiveSidePageProps", { enumerable: true, get: function () { return utils_1.getResponsiveSidePageProps; } });
+Object.defineProperty(exports, "useSidePageTransition", { enumerable: true, get: function () { return utils_1.useSidePageTransition; } });
+//# sourceMappingURL=index.js.map

package/side-page/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/side-page/index.ts"],"names":[],"mappings":";;;AACA,yCAAuC;AAA9B,qGAAA,QAAQ,OAAA;AACjB,mDAAgD;AAAvC,8GAAA,YAAY,OAAA;AACrB,iCAA4E;AAAnE,mHAAA,0BAA0B,OAAA;AAAE,8GAAA,qBAAqB,OAAA"}

package/side-page/side-page-body.d.ts

@@ -0,0 +1,7 @@
+import { SidePageBodyProps } from './types';
+/**
+ * Основной контент SidePage.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function SidePageBody({ rootRef, children, className, withScrollDisable, scrollDisableOptions, 'data-testid': testId, ...restProps }: SidePageBodyProps): import("react/jsx-runtime").JSX.Element;

package/side-page/side-page-body.js

@@ -0,0 +1,27 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SidePageBody = SidePageBody;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const page_scroll_lock_1 = require("../_internal/page-scroll-lock");
+const helpers_1 = require("../helpers");
+const classnames_1 = __importDefault(require("classnames"));
+const side_page_body_m_scss_1 = __importDefault(require("./side-page-body.m.scss"));
+/**
+ * Основной контент SidePage.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function SidePageBody({ rootRef, children, className, withScrollDisable, scrollDisableOptions, 'data-testid': testId, ...restProps }) {
+    const innerRootRef = (0, react_1.useRef)(null);
+    const mergedRef = (0, react_1.useMemo)(() => (0, helpers_1.mergeRefs)([rootRef, innerRootRef]), [rootRef, innerRootRef]);
+    (0, page_scroll_lock_1.usePageScrollLock)(innerRootRef, {
+        lockEnabled: withScrollDisable,
+        ...scrollDisableOptions,
+    });
+    return ((0, jsx_runtime_1.jsx)("div", { ref: mergedRef, className: (0, classnames_1.default)(side_page_body_m_scss_1.default.body, className), ...restProps, "data-testid": testId, children: children }));
+}
+//# sourceMappingURL=side-page-body.js.map

package/side-page/side-page-body.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"side-page-body.js","sourceRoot":"","sources":["../../src/side-page/side-page-body.tsx"],"names":[],"mappings":";;;;;AAYA,oCA2BC;;AAtCD,iCAAwC;AACxC,oEAAkE;AAClE,wCAAuC;AACvC,4DAAoC;AACpC,oFAA6C;AAE7C;;;;GAIG;AACH,SAAgB,YAAY,CAAC,EAC3B,OAAO,EACP,QAAQ,EACR,SAAS,EACT,iBAAiB,EACjB,oBAAoB,EACpB,aAAa,EAAE,MAAM,EACrB,GAAG,SAAS,EACM;IAClB,MAAM,YAAY,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAC;IAClD,MAAM,SAAS,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE,CAAC,IAAA,mBAAS,EAAC,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC,EAAE,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC,CAAC;IAE7F,IAAA,oCAAiB,EAAC,YAAY,EAAE;QAC9B,WAAW,EAAE,iBAAiB;QAC9B,GAAG,oBAAoB;KACxB,CAAC,CAAC;IAEH,OAAO,CACL,gCACE,GAAG,EAAE,SAAS,EACd,SAAS,EAAE,IAAA,oBAAU,EAAC,+BAAM,CAAC,IAAI,EAAE,SAAS,CAAC,KACzC,SAAS,iBACA,MAAM,YAElB,QAAQ,GACL,CACP,CAAC;AACJ,CAAC"}

package/side-page/side-page-body.m.scss

@@ -0,0 +1,4 @@
+.body {
+  flex-grow: 1;
+  overflow-y: auto;
+}

package/side-page/side-page-util.scss

@@ -0,0 +1,9 @@
+@use '../shadows';
+
+@mixin size-s {
+  --side-page-max-width: 488px;
+}
+
+@mixin size-m {
+  --side-page-max-width: 968px;
+}

package/side-page/side-page.d.ts

@@ -0,0 +1,7 @@
+import type { SidePageProps } from './types';
+/**
+ * Модальное окно, прикрепленное к правой стороне экрана.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function SidePage({ size, className, children, onClose, overlayProps, 'data-testid': testId, ...restProps }: SidePageProps): import("react/jsx-runtime").JSX.Element;

package/side-page/side-page.js

@@ -0,0 +1,30 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SidePage = SidePage;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const modal_overlay_1 = require("../modal-overlay");
+const utils_1 = require("../modal-overlay/utils");
+const bind_1 = __importDefault(require("classnames/bind"));
+const side_page_m_scss_1 = __importDefault(require("./side-page.m.scss"));
+const cx = bind_1.default.bind(side_page_m_scss_1.default);
+/**
+ * Модальное окно, прикрепленное к правой стороне экрана.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function SidePage({ size = 'm', className, children, onClose, overlayProps, 'data-testid': testId = 'side-page', ...restProps }) {
+    const overlayClickProps = (0, utils_1.useExactClick)(onClose, {
+        onMouseDown: overlayProps?.onMouseDown,
+        onMouseUp: overlayProps?.onMouseUp,
+    });
+    const overlayClassName = cx('overlay', 
+    // ВАЖНО: классы размера и скруглений кидаем на ModalOverlay для того чтобы понизить специфичность
+    // а также потому что надо регулировать отступы от края
+    size !== 'unset' && `size-${size}`, overlayProps?.className);
+    const sidePageClassName = cx('side-page', className);
+    return ((0, jsx_runtime_1.jsx)(modal_overlay_1.ModalOverlay, { ...overlayProps, className: overlayClassName, ...overlayClickProps, children: (0, jsx_runtime_1.jsx)("div", { className: sidePageClassName, "data-testid": testId, ...restProps, children: children }) }));
+}
+//# sourceMappingURL=side-page.js.map