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

package/select/parts/button.js

@@ -0,0 +1,69 @@
+"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.SelectTextButton = void 0;
+const react_1 = __importStar(require("react"));
+const text_button_1 = require("../../text-button");
+const utils_1 = require("../utils");
+const up_1 = __importDefault(require("@sima-land/ui-quarks/icons/16x16/Stroked/Arrows/up"));
+const down_1 = __importDefault(require("@sima-land/ui-quarks/icons/16x16/Stroked/Arrows/down"));
+/**
+ * Компонент открывашки в виде текстовой кнопки.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function SelectTextButton(_a) {
+    var { buttonRef: buttonRefProp, children, onKeyDown, onMouseDown } = _a, props = __rest(_a, ["buttonRef", "children", "onKeyDown", "onMouseDown"]);
+    const buttonRef = (0, react_1.useRef)(null);
+    const binding = (0, react_1.useContext)(utils_1.SelectContext);
+    const ArrowSVG = binding.opened ? up_1.default : down_1.default;
+    (0, react_1.useImperativeHandle)(buttonRefProp, () => buttonRef.current);
+    (0, react_1.useImperativeHandle)(binding.anchorRef, () => buttonRef.current);
+    (0, react_1.useImperativeHandle)(binding.openerRef, () => buttonRef.current);
+    return (react_1.default.createElement(text_button_1.TextButton, Object.assign({ iconGutter: 4, endIcon: ArrowSVG }, props, { as: 'button', onMouseDown: event => {
+            var _a;
+            (_a = binding.onMouseDown) === null || _a === void 0 ? void 0 : _a.call(binding, event);
+            onMouseDown === null || onMouseDown === void 0 ? void 0 : onMouseDown(event);
+        }, onKeyDown: event => {
+            var _a;
+            (_a = binding.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(binding, event);
+            onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
+        }, disabled: binding.disabled, buttonRef: buttonRef, role: 'combobox' }), children !== null && children !== void 0 ? children : (binding.value || binding.label)));
+}
+exports.SelectTextButton = SelectTextButton;

package/select/parts/menu.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { SelectMenuProps } from '../types';
+/**
+ * Меню выбора для компонента Select.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function SelectMenu({ loading, children, menuRef, value, onKeyDown, onItemSelect, ...restProps }: SelectMenuProps): JSX.Element;

package/select/parts/menu.js

@@ -0,0 +1,105 @@
+"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.SelectMenu = void 0;
+const react_1 = __importStar(require("react"));
+const dropdown_1 = require("../../dropdown");
+const dropdown_item_1 = require("../../dropdown-item");
+const utils_1 = require("../../dropdown-item/utils");
+const dropdown_loading_1 = require("../../_internal/dropdown-loading");
+const classnames_1 = __importDefault(require("classnames"));
+const menu_module_scss_1 = __importDefault(require("./menu.module.scss"));
+const MenuItemAttr = {
+    name: 'data-select-role',
+    value: 'option',
+};
+/**
+ * Меню выбора для компонента Select.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function SelectMenu(_a) {
+    var { loading, children, menuRef, value, onKeyDown, onItemSelect } = _a, restProps = __rest(_a, ["loading", "children", "menuRef", "value", "onKeyDown", "onItemSelect"]);
+    const ref = (0, react_1.useRef)(null);
+    const osComponentRef = (0, react_1.useRef)(null);
+    const [activeIndex, setActiveIndex] = (0, react_1.useState)(-1);
+    const items = react_1.Children.toArray(children).filter(utils_1.DropdownItemUtils.is);
+    (0, react_1.useImperativeHandle)(menuRef, () => ref.current);
+    // прокрутка до элемента списка
+    (0, react_1.useEffect)(() => {
+        var _a, _b;
+        const menu = ref.current;
+        const itemSelector = `[${MenuItemAttr.name}="${MenuItemAttr.value}"]`;
+        const targetItem = menu === null || menu === void 0 ? void 0 : menu.querySelectorAll(itemSelector)[activeIndex];
+        if (targetItem instanceof HTMLElement) {
+            (_b = (_a = osComponentRef.current) === null || _a === void 0 ? void 0 : _a.osInstance()) === null || _b === void 0 ? void 0 : _b.scroll({
+                el: targetItem,
+                scroll: { y: 'ifneeded' },
+            });
+        }
+    }, [activeIndex]);
+    const handleMenuKeyDown = (0, react_1.useCallback)(event => {
+        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
+        switch (event.code) {
+            case 'Enter': {
+                const item = items[activeIndex];
+                if (item) {
+                    onItemSelect === null || onItemSelect === void 0 ? void 0 : onItemSelect(item);
+                }
+                setActiveIndex(-1);
+                break;
+            }
+            case 'ArrowUp':
+                setActiveIndex(n => { var _a; return (_a = utils_1.DropdownItemUtils.asLoopedIterator(items, n).prev()) !== null && _a !== void 0 ? _a : -1; });
+                break;
+            case 'ArrowDown':
+                setActiveIndex(n => { var _a; return (_a = utils_1.DropdownItemUtils.asLoopedIterator(items, n).next()) !== null && _a !== void 0 ? _a : -1; });
+                break;
+        }
+    }, [items, activeIndex, onKeyDown]);
+    const handleItemClick = (0, react_1.useCallback)((item) => item.props.disabled
+        ? undefined
+        : event => {
+            var _a, _b;
+            (_b = (_a = item.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, event);
+            onItemSelect === null || onItemSelect === void 0 ? void 0 : onItemSelect(item);
+        }, [onItemSelect]);
+    return (react_1.default.createElement(dropdown_1.Dropdown, Object.assign({}, restProps, { ref: ref, tabIndex: 0, role: 'listbox', onKeyDown: handleMenuKeyDown, className: (0, classnames_1.default)(menu_module_scss_1.default.menu, restProps.className), customScrollbarProps: { osComponentRef } }), loading ? (react_1.default.createElement(dropdown_loading_1.DropdownLoading, { "data-testid": 'select:loading-area' })) : (items.map((item, index) => (react_1.default.createElement(dropdown_item_1.DropdownItem, Object.assign({ checked: activeIndex === index, selected: value === utils_1.DropdownItemUtils.getValue(item) }, item.props, { key: index, role: 'option', onClick: handleItemClick(item) }, { [MenuItemAttr.name]: MenuItemAttr.value })))))));
+}
+exports.SelectMenu = SelectMenu;

package/select/parts/menu.module.scss

@@ -0,0 +1,4 @@
+.menu {
+  // @todo LayerProvider
+  z-index: 2;
+}

package/select/select.d.ts

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

package/select/select.js

@@ -0,0 +1,145 @@
+"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"));
+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 = react_1.default.createElement(block_1.SelectFieldBlock, null), 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 (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))));
+}
+exports.Select = Select;
+Select.FieldBlock = block_1.SelectFieldBlock;
+Select.TextButton = button_1.SelectTextButton;

package/select/types.d.ts

@@ -0,0 +1,55 @@
+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

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

package/select/utils.d.ts

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

package/select/utils.js

@@ -0,0 +1,13 @@
+"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

@@ -0,0 +1,34 @@
+import React from '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

@@ -0,0 +1,112 @@
+"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.Select = exports.renderDefaultArrow = void 0;
+const react_1 = __importStar(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 react_1.default.createElement(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 (react_1.default.createElement("div", { ref: rootRef, style: style, className: cx('root', className), "data-testid": dataTestId },
+        react_1.default.createElement(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) && (react_1.default.createElement(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();
+            } }), loading ? (react_1.default.createElement(dropdown_loading_1.DropdownLoading, { "data-testid": 'select:loading-area' })) : (options.map((option, index) => (react_1.default.createElement(dropdown_item_1.DropdownItem, { size: optionSize, key: index, role: 'menuitem', onClick: () => {
+                toggleMenu(false);
+                onSelect && onSelect(option);
+            } }, renderOption(option)))))))));
+};
+exports.Select = Select;

package/shadows.scss

@@ -0,0 +1,18 @@
+/**
+ * Формирует тень по дизайн-гайдам.
+ */
+@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,7 +1,8 @@
-import React from 'react';
-import { WithBodyScrollLock } from '../_internal/body-scroll';
+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 WithBodyScrollLock {
+export interface SidePageProps extends WithPageScrollLock {
     /** Нужно ли показать компонент. */
     shown?: boolean;
     /** Нужно ли использовать анимации при открытии/закрытии. */
@@ -9,7 +10,7 @@ export interface SidePageProps extends WithBodyScrollLock {
     /** Ширина. */
     size?: 's' | 'm';
     /** Содержимое. */
-    children?: React.ReactNode;
+    children?: ReactNode;
     /** Сработает при закрытии. */
     onClose?: () => void;
     /** Обработчик "onEntering" для CSSTransition. */
@@ -30,25 +31,9 @@ export interface SidePageProps extends WithBodyScrollLock {
  * @param props Свойства.
  * @return Элемент.
  */
-export declare const SidePage: {
-    ({ shown, withTransitions, onEnter, onEntering, onEntered, onExit, onExiting, onExited, ...restProps }: SidePageProps): JSX.Element;
-    Header: {
-        ({ onBack, onClose, ...topBarProps }: import("../top-bar").TopBarProps & {
-            onBack?: (() => void) | undefined;
-            onClose?: (() => void) | undefined;
-        }): JSX.Element;
-        displayName: string;
-    };
-    Body: {
-        ({ children }: {
-            children?: React.ReactNode;
-        }): JSX.Element;
-        displayName: string;
-    };
-    Footer: {
-        ({ padded, ...props }: import("../bottom-bar").BottomBarProps & {
-            padded?: boolean | undefined;
-        }): JSX.Element;
-        displayName: string;
-    };
-};
+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;
+}