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

package/select/select.js

@@ -1,121 +0,0 @@
-"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;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Select = void 0;
-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 menu_1 = require("./parts/menu");
-const block_1 = require("./parts/block");
-const button_1 = require("./parts/button");
-const utils_3 = require("../dropdown/utils");
-/**
- * Поле выбора из списка.
- * @param props Свойства.
- * @return Элемент.
- */
-function Select({ children, disabled, failed, loading, onValueChange, onMenuToggle, value, defaultValue, label, opener = (0, jsx_runtime_1.jsx)(block_1.SelectFieldBlock, {}), renderValue = v => v, dropdownProps, }) {
-    // @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 [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 /> надо проверять, есть ли значение в списке переданных
-            setCurrentValue(value);
-        }
-    }, [value]);
-    (0, react_1.useEffect)(() => {
-        var _a;
-        if (disabled) {
-            setNeedMenu(false);
-        }
-        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);
-            }
-        },
-        onKeyDown: e => {
-            if (!disabled) {
-                switch (e.code) {
-                    case 'Enter':
-                    case 'ArrowUp':
-                    case 'ArrowDown':
-                        setNeedMenu(true);
-                        break;
-                }
-            }
-        },
-    };
-    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 ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(utils_1.SelectContext.Provider, Object.assign({ value: openerBinding }, { children: (0, react_1.isValidElement)(opener) && opener })), (0, jsx_runtime_1.jsx)(react_2.FloatingPortal, Object.assign({ id: '' }, { children: needMenu && (0, jsx_runtime_1.jsx)(menu_1.SelectMenu, Object.assign({}, menuProps, { children: children })) }))] }));
-}
-exports.Select = Select;
-Select.FieldBlock = block_1.SelectFieldBlock;
-Select.TextButton = button_1.SelectTextButton;

package/select/types.d.ts

@@ -1,55 +0,0 @@
-import type { FocusEventHandler, HTMLAttributes, ReactElement, ReactNode, Ref } 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 SelectProps {
-    /** Опции. */
-    children?: ReactNode;
-    /** Отключенное состояние. */
-    disabled?: boolean;
-    /** Ошибочное состояние. */
-    failed?: boolean;
-    /** Состояние загрузки опций. */
-    loading?: boolean;
-    /** Сработает при выборе опции. */
-    onValueChange?: (value: string) => void;
-    /** Сработает при открытии/закрытии меню. */
-    onMenuToggle?: (state: {
-        opened: boolean;
-    }) => void;
-    /** Значение, выводимое в качестве выбранного. При отсутствии будет выведено значение defaultValue. */
-    value?: string;
-    /** Значение по умолчанию. При отсутствии будет выведено значение label. */
-    defaultValue?: string;
-    /** Получив значение являющееся текущим или пустую строку, должна вернуть ReactNode. */
-    renderValue?: (value: string) => ReactNode;
-    /** Ярлык. */
-    label?: string;
-    /** Открывающий элемент. */
-    opener?: ReactElement;
-    /** Опции Dropdown. */
-    dropdownProps?: Pick<DropdownProps, 'className' | 'style'>;
-}

package/select/types.js

@@ -1,2 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });

package/select/utils.d.ts

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

package/select/utils.js

@@ -1,13 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SelectContext = 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,
-});

package/select-deprecated/index.d.ts

@@ -1,34 +0,0 @@
-/// <reference types="react" />
-import { TextFieldProps } from '../text-field';
-type Size = 's' | 'm' | 'l' | 'xl';
-export interface SelectProps extends Omit<TextFieldProps, 'style' | 'endAdornment'> {
-    /** Нужно ли выводить состояние загрузки списка. */
-    loading?: boolean;
-    /** Сработает при открытии/закрытии меню. */
-    onMenuToggle?: (opened: boolean) => void;
-    /** Сработает при выборе. */
-    onSelect?: (option: any) => void;
-    /** Список опций. */
-    options: any[];
-    /** Размер для DropdownItem. */
-    optionSize?: Size;
-    /** Вернет содержимое опции. */
-    renderOption?: (option: any) => React.ReactNode;
-    /** Стили. */
-    style?: React.CSSProperties;
-    endAdornment?: TextFieldProps['endAdornment'] | ((opened: boolean) => React.ReactNode);
-}
-/**
- * Выводит иконку стрелки для поля Select по умолчанию.
- * @param opened Открыт ли список опций.
- * @return Элемент.
- */
-export declare const renderDefaultArrow: (opened: boolean) => JSX.Element;
-/**
- * Поле выбора из списка.
- * @deprecated Следует использовать новую реализацию из "@sima-land/ui-nucleons/select".
- * @param props Свойства.
- * @return Элемент.
- */
-export declare const Select: ({ options, optionSize, onSelect, style, className, label, onClick, value, loading, onMenuToggle, renderOption, "data-testid": dataTestId, size, endAdornment, ...restProps }: SelectProps) => JSX.Element;
-export {};

package/select-deprecated/index.js

@@ -1,88 +0,0 @@
-"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.Select = exports.renderDefaultArrow = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const dropdown_1 = require("../dropdown");
-const dropdown_item_1 = require("../dropdown-item");
-const text_field_1 = require("../text-field");
-const dropdown_2 = require("../_internal/utils/dropdown");
-const bind_1 = __importDefault(require("classnames/bind"));
-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 select_module_scss_1 = __importDefault(require("./select.module.scss"));
-const colors_1 = require("../colors");
-const dropdown_loading_1 = require("../_internal/dropdown-loading");
-const hooks_1 = require("../hooks");
-const cx = bind_1.default.bind(select_module_scss_1.default);
-/**
- * Выводит иконку стрелки для поля Select по умолчанию.
- * @param opened Открыт ли список опций.
- * @return Элемент.
- */
-const renderDefaultArrow = (opened) => {
-    const ArrowSVG = opened ? Up_1.default : Down_1.default;
-    return (0, jsx_runtime_1.jsx)(ArrowSVG, { fill: colors_1.COLORS.get('basic-gray38') });
-};
-exports.renderDefaultArrow = renderDefaultArrow;
-/**
- * Поле выбора из списка.
- * @deprecated Следует использовать новую реализацию из "@sima-land/ui-nucleons/select".
- * @param props Свойства.
- * @return Элемент.
- */
-const Select = (_a) => {
-    var { options, optionSize, onSelect, style, className, label, onClick, value, loading, onMenuToggle, renderOption = String, 'data-testid': dataTestId, size, endAdornment = exports.renderDefaultArrow } = _a, restProps = __rest(_a, ["options", "optionSize", "onSelect", "style", "className", "label", "onClick", "value", "loading", "onMenuToggle", "renderOption", 'data-testid', "size", "endAdornment"]);
-    const rootRef = (0, react_1.useRef)(null);
-    const fieldRef = (0, react_1.useRef)(null);
-    const menuRef = (0, react_1.useRef)(null);
-    const [opened, toggleMenu] = (0, react_1.useState)(false);
-    (0, react_1.useEffect)(() => {
-        opened && menuRef.current && menuRef.current.focus();
-        onMenuToggle && onMenuToggle(opened);
-    }, [opened]);
-    (0, hooks_1.useOutsideClick)(rootRef, toggleMenu.bind(null, false));
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ ref: rootRef, style: style, className: cx('root', className), "data-testid": dataTestId }, { children: [(0, jsx_runtime_1.jsx)(text_field_1.TextField, Object.assign({}, restProps, { size: size, blockProps: {
-                    ref: fieldRef,
-                    tabIndex: 0,
-                    onMouseDown: () => {
-                        toggleMenu(a => !a);
-                    },
-                    onKeyDown: e => {
-                        e.key === 'Enter' && toggleMenu(true);
-                    },
-                }, onClick: e => {
-                    e.preventDefault();
-                    onClick && onClick(e);
-                }, className: select_module_scss_1.default.field, "data-testid": 'select:field', label: label, focused: opened, baseInputProps: {
-                    // чтобы не ловить фокус на поле
-                    style: { pointerEvents: 'none' },
-                    tabIndex: -1,
-                }, value: value, multiline: false, variant: 'desktop', readOnly: true, endAdornment: typeof endAdornment === 'function' ? endAdornment(opened) : endAdornment })), opened && (loading || options.length > 0) && ((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, Object.assign({}, (0, dropdown_2.placeDropdown)(size), { ref: menuRef, "data-testid": 'select:menu', role: 'menu', tabIndex: -1, className: cx('menu'), onKeyDown: event => {
-                    if (event.key === 'Enter') {
-                        toggleMenu(false);
-                        fieldRef.current && fieldRef.current.focus();
-                    }
-                }, onBlur: () => {
-                    toggleMenu(false);
-                    fieldRef.current && fieldRef.current.focus();
-                } }, { children: loading ? ((0, jsx_runtime_1.jsx)(dropdown_loading_1.DropdownLoading, { "data-testid": 'select:loading-area' })) : (options.map((option, index) => ((0, jsx_runtime_1.jsx)(dropdown_item_1.DropdownItem, Object.assign({ size: optionSize, role: 'menuitem', onClick: () => {
-                        toggleMenu(false);
-                        onSelect && onSelect(option);
-                    } }, { children: renderOption(option) }), index)))) })))] })));
-};
-exports.Select = Select;

package/select-deprecated/select.module.scss

@@ -1,26 +0,0 @@
-.root {
-  position: relative;
-  width: var(--width, 320px);
-}
-
-.field {
-  width: 100%;
-}
-
-.field,
-.field * {
-  cursor: pointer;
-}
-
-.adornment {
-  display: flex;
-  align-items: center;
-  user-select: none;
-}
-
-.menu {
-  position: absolute;
-  width: 100%;
-  top: 100%;
-  z-index: 2;
-}

package/shadows.scss

@@ -1,18 +0,0 @@
-/**
- * Формирует тень по дизайн-гайдам.
- */
-@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);
-  } @else if $key == 'z2' {
-    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);
-  } @else if $key == 'z4' {
-    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}`.';
-  }
-}

package/side-page/index.d.ts

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

package/side-page/index.js

@@ -1,65 +0,0 @@
-"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.SidePage = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = 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 ((0, jsx_runtime_1.jsx)(CSSTransition_1.default, Object.assign({ in: shown, timeout: transitionDuration, classNames: transitionClasses, unmountOnExit: true, onEntering: onEntering, onEnter: onEnter, onEntered: onEntered, onExit: onExit, onExiting: onExiting, onExited: onExited }, { children: transitionStatus => ((0, jsx_runtime_1.jsx)(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 ((0, jsx_runtime_1.jsx)(modal_overlay_1.ModalOverlay, Object.assign({}, overlayProps, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: cx('side-page', `size-${size}`) }, { children: [header, (0, jsx_runtime_1.jsx)("div", Object.assign({ ref: ref, className: cx('body') }, { children: body })), footer] })) })));
-}
-SidePage.Header = slots_1.SidePageHeader;
-SidePage.Body = slots_1.SidePageBody;
-SidePage.Footer = slots_1.SidePageFooter;

package/side-page/side-page.module.scss

@@ -1,89 +0,0 @@
-@use '../colors';
-@use '../breakpoints';
-@use '../top-bar/top-bar-util';
-@use '../bottom-bar/bottom-bar-util';
-@use '../modal-overlay/modal-overlay-util';
-
-.side-page {
-  position: absolute;
-  top: 0;
-  right: 0;
-  height: 100%;
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  background: #fff;
-  @include breakpoints.down('xs') {
-    width: 100%;
-    .header {
-      @include top-bar-util.size-m;
-    }
-    .footer {
-      @include bottom-bar-util.size-m;
-    }
-  }
-  @include breakpoints.up('xs') {
-    &.size-s {
-      max-width: 488px;
-    }
-    &.size-m {
-      max-width: 968px;
-    }
-    .header {
-      @include top-bar-util.size-xl;
-    }
-    .footer {
-      @include bottom-bar-util.size-l;
-    }
-  }
-}
-
-.header {
-  flex-shrink: 0;
-  width: 100%;
-}
-
-.body {
-  flex-grow: 1;
-  overflow-y: auto;
-}
-
-.footer {
-  flex-shrink: 0;
-  width: 100%;
-}
-
-// transitions
-.enter {
-  background-color: transparent;
-  .side-page {
-    transform: translateX(100%);
-  }
-}
-
-.enter-active {
-  transition: background-color var(--transition-duration) ease-in-out;
-  background-color: modal-overlay-util.$overlay-color;
-  overflow: hidden;
-  .side-page {
-    transition: transform var(--transition-duration) ease-in-out;
-    transform: translateX(0);
-  }
-}
-
-.exit {
-  background-color: modal-overlay-util.$overlay-color;
-  .side-page {
-    transform: translateX(0);
-  }
-}
-
-.exit-active {
-  transition: background-color var(--transition-duration) ease-in-out;
-  background-color: transparent;
-  overflow: hidden;
-  .side-page {
-    transition: transform var(--transition-duration) ease-in-out;
-    transform: translateX(100%);
-  }
-}

package/side-page/slots.d.ts

@@ -1,26 +0,0 @@
-import { ReactNode } from 'react';
-import { TopBarProps } from '../top-bar';
-import { BottomBarProps } from '../bottom-bar';
-/**
- * Шапка SidePage.
- * @param props Свойства.
- * @return Элемент.
- */
-export declare function SidePageHeader({ onBack, onClose, buttons, ...topBarProps }: TopBarProps & {
-    onBack?: () => void;
-    onClose?: () => void;
-}): JSX.Element;
-/**
- * Основной контент SidePage.
- * @param props Свойства.
- * @return Элемент.
- */
-export declare function SidePageBody({ children }: {
-    children?: ReactNode;
-}): JSX.Element;
-/**
- * Подвал SidePage.
- * @param props Свойства.
- * @return Элемент.
- */
-export declare function SidePageFooter({ ...props }: BottomBarProps): JSX.Element;

package/side-page/slots.js

@@ -1,52 +0,0 @@
-"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.SidePageFooter = exports.SidePageBody = exports.SidePageHeader = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const top_bar_1 = require("../top-bar");
-const bottom_bar_1 = require("../bottom-bar");
-const utils_1 = require("../top-bar/utils");
-const classnames_1 = __importDefault(require("classnames"));
-const side_page_module_scss_1 = __importDefault(require("./side-page.module.scss"));
-/**
- * Шапка SidePage.
- * @param props Свойства.
- * @return Элемент.
- */
-function SidePageHeader(_a) {
-    var { onBack, onClose, buttons } = _a, topBarProps = __rest(_a, ["onBack", "onClose", "buttons"]);
-    return ((0, jsx_runtime_1.jsx)(top_bar_1.TopBar, Object.assign({}, topBarProps, { size: 'unset', className: side_page_module_scss_1.default.header, buttons: (0, utils_1.navigationButtons)({ buttons, onBack, onClose }) })));
-}
-exports.SidePageHeader = SidePageHeader;
-/**
- * Основной контент SidePage.
- * @param props Свойства.
- * @return Элемент.
- */
-function SidePageBody({ children }) {
-    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
-}
-exports.SidePageBody = SidePageBody;
-/**
- * Подвал SidePage.
- * @param props Свойства.
- * @return Элемент.
- */
-function SidePageFooter(_a) {
-    var props = __rest(_a, []);
-    return (0, jsx_runtime_1.jsx)(bottom_bar_1.BottomBar, Object.assign({}, props, { size: 'unset', className: (0, classnames_1.default)(side_page_module_scss_1.default.footer) }));
-}
-exports.SidePageFooter = SidePageFooter;