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

package/readme.md

@@ -5,6 +5,7 @@
 ## Использование
 
 Установка
+
 ```bash
 # npm
 npm i -S @sima-land/ui-nucleons
@@ -14,21 +15,26 @@ yarn add @sima-land/ui-nucleons
 ```
 
 ### Настройка сборки и запуска тестов
+
 Компоненты библиотеки используют:
+
 - импорты стилей
 - импорты стилей как css-модулей (каждый такой файл промаркирован в виде `%filename%.module.scss`)
 - импорты svg-файлов как react-компоненты
 
 #### Для работы с Webpack необходимо (как вариант):
+
 - добавить необходимые пакеты `@svgr/*`
 - сконфигурировать обработку svg, css, scss файлов
 
 ##### Добавление пакетов `@svgr/*`:
+
 ```bash
 npm install --save-dev @svgr/core @svgr/plugin-svgo @svgr/webpack
 ```
 
 ##### Конфигурация webpack
+
 ```js
 // webpack.config.js
 const svgrOptions = require('../../svgr.config'); // опции SVGR (скопировать из данного проекта)
@@ -51,10 +57,7 @@ module.exports = {
       {
         test: /\.(css|scss)$/,
         exclude: /\.module\.(css|scss)$/,
-        use: [
-          'css-loader',
-          'postcss-loader',
-        ],
+        use: ['css-loader', 'sass-loader'],
       },
 
       // обработка css-модулей
@@ -70,7 +73,6 @@ module.exports = {
               },
             },
           },
-          'postcss-loader',
           'sass-loader',
         ],
       },
@@ -84,28 +86,28 @@ module.exports = {
 ##### Добавить обработку SVG
 
 - добавить файл "трансформера" вида:
+
 ```js
-const babel = require('@babel/core');
-const babelJestPreset = require('babel-preset-jest');
-const svgr = require('@svgr/core').default;
-const svgrOptions = require('../../svgr.config'); // опции SVGR
+const swc = require('@swc/core');
+const svgr = require('@svgr/core');
+const svgrConfig = require('../../svgr.config');
 
 module.exports = {
-  process: (src, filename) => {
-    const code = svgr.sync(src, svgrOptions, { filePath: filename });
+  process(sourceText, sourcePath) {
+    const code = svgr.transform.sync(sourceText, svgrConfig, { filePath: sourcePath });
+    const result = swc.transformSync(code);
 
-    return babel.transformSync(code, {
-      filename,
-      presets: [babelJestPreset],
-    }).code;
+    return result;
   },
 };
 ```
+
 - задействовать его в конфигурации Jest
 
 ##### Добавить поддержку стилей
 
 В конфигурации Jest:
+
 ```js
 module.exports = {
   transform: {
@@ -154,39 +156,30 @@ declare module '*.svg' {
 
 ### Принципы библиотеки
 
-- в библиотеке не должно быть HOC (компонентов высшего порядка - функций возвращающих компонент)
+- в библиотеке не должно быть HOC (компонентов высшего порядка - функций, возвращающих компонент)
 - компонент интерфейса не должен иметь внешних отступов по умолчанию
 
-### Консольные команды, необходимые в процессе разработки
-* ```npm run build``` - сборка компонентов в `./build` для публикации
-* ```npm run test``` - запуск тестов *Jest*
-* ```npm run lint:scripts``` - запуск линтера *ESLint*
-* ```npm run lint:styles``` - запуск линтера *styleLint*
-* ```npm run type-check``` - Проверка типов TS
-* ```npm run storybook``` - запуск *storybook*
-
 ### Структура библиотеки
 
 `src/` - директория со всеми компонентами библиотеки
-* `something/` - директория с компонентом
-    * `__stories__/`
-        * `index.stories.tsx` - описание компонента для storybook
-    * `__test__/`
-        * `index.test.tsx` - unit-тесты
-    * `index.tsx` - файл, с именованными экспортами компонента и интерфейса
-* `helpers/` - общие вспомогательные функции (для использования вне библиотеки)
-* `hooks/` - общие react-хуки (для использования вне библиотеки)
-* `_internal/` - внутренние скрипты для использования только в рамках данной библиотеки
 
-## Работа компонентов, использующих информацию о viewport
+- `something/` - директория с компонентом
+  - `__stories__/`
+    - `index.stories.tsx` - описание компонента для storybook
+  - `__test__/`
+    - `index.test.tsx` - unit-тесты
+  - `index.tsx` - файл, с именованными экспортами компонента и интерфейса
+- `helpers/` - общие вспомогательные функции (для использования вне библиотеки)
+- `hooks/` - общие react-хуки (для использования вне библиотеки)
+- `_internal/` - внутренние скрипты для использования только в рамках данной библиотеки
 
-Компоненты вроде `Screen` и `Alert` используют следующие css-переменные:
+### Тестирование
 
-- `--vh`: используется как сотая доля высоты экрана (аналог `1vh`), может учитывать визуальный viewport
-- `--offsetTop`: используется как позиция верхней границы визуального viewport'а
+Локально E2E-тесты должны запускаться через docker, пример:
 
-При использовании таких компонентов в проектах, для корректной работы на мобильных устройствах (например при показе/скрытии виртуальных клавиатур и других изменениях viewport), необходимо предоставить эти переменные (например установив их на `<body />`)
-
-При работе над подобными компонентами необходимо учитывать отсутствие этих переменных и не забывать устанавливать запасное значение при использовании `var()`
+```bash
+docker run --rm --network host -v $(pwd):/work/ -w /work/ -it mcr.microsoft.com/playwright:v1.29.2-focal /bin/bash
+npx playwright test
+```
 
-Установка не выполняется компонентами самостоятельно в целях производительности.
+В противном случае скриншотные тесты не будут совпадать из-за разницы окружения запуска.

package/screen/index.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { ScreenInnerProps } from './utils';
-export interface ScreenProps extends ScreenInnerProps {
+import { WithPageScrollLock } from '../_internal/page-scroll-lock';
+export interface ScreenProps extends ScreenInnerProps, WithPageScrollLock {
     /** Содержимое. */
     children?: React.ReactNode;
     /** Определяет область отображаемую как загружающуюся. */
@@ -10,11 +11,12 @@ export interface ScreenProps extends ScreenInnerProps {
 }
 /**
  * Экран.
+ * @deprecated На адаптивных страницах стоит использовать Modal.
  * @param props Свойства.
  * @return Элемент.
  */
 export declare const Screen: {
-    ({ children, loading, loadingArea, loadingOverlayProps, onFullScroll, fullScrollThreshold, "data-testid": testId, }: ScreenProps): JSX.Element;
+    ({ children, loading, loadingArea, loadingOverlayProps, onFullScroll, fullScrollThreshold, withScrollDisable, scrollDisableOptions, "data-testid": testId, }: ScreenProps): JSX.Element;
     Header: ({ divided, title, subtitle, buttons, onBack, onClose, ...restProps }: import("./slots").HeaderSlotProps) => JSX.Element;
     Body: React.ForwardRefExoticComponent<{
         children?: React.ReactNode;

package/screen/index.js

@@ -1,21 +1,46 @@
 "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 __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Screen = void 0;
-const react_1 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
 const slots_1 = require("./slots");
 const layer_1 = require("../helpers/layer");
 const define_slots_1 = require("../helpers/define-slots");
 const utils_1 = require("./utils");
 const screen_module_scss_1 = __importDefault(require("./screen.module.scss"));
+const styles_1 = require("../hooks/styles");
 /**
  * Экран.
+ * @deprecated На адаптивных страницах стоит использовать Modal.
  * @param props Свойства.
  * @return Элемент.
  */
-const Screen = ({ children, loading, loadingArea = 'full', loadingOverlayProps, onFullScroll, fullScrollThreshold = 320, 'data-testid': testId = 'screen', }) => {
+const Screen = ({ children, loading, loadingArea = 'full', loadingOverlayProps, onFullScroll, fullScrollThreshold = 320, withScrollDisable, scrollDisableOptions, 'data-testid': testId = 'screen', }) => {
     const fullLoading = loading && loadingArea === 'full';
     const layer = (0, layer_1.useLayer)() + 300; // 300 из-за монолита
     const { header, body, footer } = (0, define_slots_1.defineSlots)(children, {
@@ -23,10 +48,14 @@ const Screen = ({ children, loading, loadingArea = 'full', loadingOverlayProps,
         body: slots_1.BodySlot,
         footer: slots_1.FooterSlot,
     });
+    const rootRef = (0, react_1.useRef)(null);
+    (0, styles_1.useViewportHeightUnit)(rootRef);
     if (!body) {
         throw Error('Looks like you are trying to render <Screen /> without <Screen.Body /> slot, but it is required');
     }
-    return (react_1.default.createElement("div", { className: screen_module_scss_1.default.root, style: { zIndex: layer }, "data-testid": testId },
+    return (react_1.default.createElement("div", { ref: rootRef, className: screen_module_scss_1.default.root, style: {
+            zIndex: layer, // z-index именно здесь из-за position: fixed
+        }, "data-testid": testId },
         react_1.default.createElement(layer_1.LayerProvider, { value: layer },
             !fullLoading && header,
             react_1.default.createElement(utils_1.ScreenContext.Provider, { value: {
@@ -34,6 +63,8 @@ const Screen = ({ children, loading, loadingArea = 'full', loadingOverlayProps,
                     loadingOverlayProps,
                     onFullScroll,
                     fullScrollThreshold,
+                    withScrollDisable,
+                    scrollDisableOptions,
                 } }, body),
             !fullLoading && footer && (react_1.default.createElement("div", { className: screen_module_scss_1.default.footer, "data-testid": 'screen:footer' }, footer)))));
 };

package/screen/screen.module.scss

@@ -6,8 +6,6 @@
   left: 0;
   display: flex;
   flex-direction: column;
-
-  // для корректного отображения с динамическим viewport переменная --vh должна быть доступна
   height: calc(var(--vh, 1vh) * 100);
   width: 100%;
   box-sizing: border-box;

package/screen/slots.d.ts

@@ -1,12 +1,6 @@
 import React from 'react';
-import { NavBarProps } from '../nav-bar';
-export interface HeaderSlotProps extends NavBarProps {
-    /** Нужна ли разделительная полоса внизу шапки экрана. */
-    divided?: boolean;
-    /** Заголовок. */
-    title?: string;
-    /** Подзаголовок. */
-    subtitle?: string;
+import { TopBarProps } from '../top-bar';
+export interface HeaderSlotProps extends TopBarProps {
     /** Будет вызвана при нажатии на кнопку-стрелку. */
     onBack?: () => void;
     /** Будет вызвана при нажатии на кнопку-крести. */

package/screen/slots.js

@@ -39,16 +39,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FooterSlot = exports.BodySlot = exports.HeaderSlot = void 0;
 const react_1 = __importStar(require("react"));
-const nav_bar_1 = require("../nav-bar");
 const lodash_1 = require("lodash");
 const arrow_left_1 = __importDefault(require("@sima-land/ui-quarks/icons/24x24/Stroked/arrow-left"));
 const cross_1 = __importDefault(require("@sima-land/ui-quarks/icons/24x24/Stroked/cross"));
-const body_scroll_1 = require("../_internal/body-scroll");
+const page_scroll_lock_1 = require("../_internal/page-scroll-lock");
 const hooks_1 = require("../hooks");
 const loading_overlay_1 = require("../loading-overlay");
 const utils_1 = require("./utils");
 const screen_module_scss_1 = __importDefault(require("./screen.module.scss"));
-const constants_1 = require("../constants");
+const top_bar_1 = require("../top-bar");
 /**
  * Слот шапки экрана.
  * @param props Свойства.
@@ -56,11 +55,11 @@ const constants_1 = require("../constants");
  */
 const HeaderSlot = (_a) => {
     var { divided, title, subtitle, buttons, onBack, onClose } = _a, restProps = __rest(_a, ["divided", "title", "subtitle", "buttons", "onBack", "onClose"]);
-    return (react_1.default.createElement(nav_bar_1.NavBar, Object.assign({}, restProps, { title: title, subtitle: subtitle, bottomBordered: divided, buttons: Object.assign(Object.assign({}, buttons), { start: onBack
+    return (react_1.default.createElement(top_bar_1.TopBar, Object.assign({}, restProps, { size: 's', title: title, subtitle: subtitle, divided: divided, buttons: Object.assign(Object.assign({}, buttons), { start: onBack
                 ? {
                     // ВАЖНО: не подмешиваем свойства из buttons.start
                     // чтобы не распылять конфигурацию одной и той же кнопки по нескольким местам
-                    icon: arrow_left_1.default,
+                    icon: react_1.default.createElement(arrow_left_1.default, null),
                     onClick: onBack,
                     'aria-label': 'Вернуться назад',
                     'data-testid': 'screen:back',
@@ -69,7 +68,7 @@ const HeaderSlot = (_a) => {
                 ? {
                     // ВАЖНО: не подмешиваем свойства из buttons.end
                     // чтобы не распылять конфигурацию одной и той же кнопки по нескольким местам
-                    icon: cross_1.default,
+                    icon: react_1.default.createElement(cross_1.default, null),
                     onClick: onClose,
                     'aria-label': `Закрыть ${title || ''}`.trim(),
                     'data-testid': 'screen:close',
@@ -81,17 +80,17 @@ exports.HeaderSlot = HeaderSlot;
  * Слот основного контента экрана.
  */
 exports.BodySlot = (0, react_1.forwardRef)(function BodySlot({ children }, outerRef) {
-    const { loading, loadingOverlayProps, onFullScroll, fullScrollThreshold } = (0, react_1.useContext)(utils_1.ScreenContext);
+    const { loading, loadingOverlayProps, onFullScroll, fullScrollThreshold, withScrollDisable, scrollDisableOptions, } = (0, react_1.useContext)(utils_1.ScreenContext);
     // при блокировке прокрутки нужно передавать элемент, которому нужно сохранить возможность прокрутки
     // https://github.com/willmcpo/body-scroll-lock/blame/79c4cf2c956eb7d5cf8d54a03d12751bc6ac8aa3/README.md#L52
     // поэтому используем внутренний ref и useImperativeHandle
     const ref = (0, react_1.useRef)(null);
     (0, react_1.useImperativeHandle)(outerRef, () => ref.current);
-    (0, body_scroll_1.useBodyScrollLock)(ref, true, { allowTouchMove: body_scroll_1.allowTouchMove });
+    (0, page_scroll_lock_1.usePageScrollLock)(ref, Object.assign({ lockEnabled: withScrollDisable }, scrollDisableOptions));
     (0, hooks_1.useInfiniteScroll)(ref, { onFullScroll, threshold: fullScrollThreshold });
     return (
     // ВАЖНО: элемент с ref должен выводиться всегда (без условий), т.к. он нужен для блокировки прокрутки
-    react_1.default.createElement("div", Object.assign({ ref: ref, className: screen_module_scss_1.default.body, "data-testid": 'screen:body' }, { [constants_1.BSL_IGNORE_ATTR]: true }), loading ? (react_1.default.createElement(loading_overlay_1.LoadingOverlay, Object.assign({}, loadingOverlayProps, { fill: false, style: { height: '100%' } }))) : (children)));
+    react_1.default.createElement("div", { ref: ref, className: screen_module_scss_1.default.body, "data-testid": 'screen:body' }, loading ? (react_1.default.createElement(loading_overlay_1.LoadingOverlay, Object.assign({}, loadingOverlayProps, { fill: false, style: { height: '100%' } }))) : (children)));
 });
 /**
  * Слот футера экрана.

package/screen/utils.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import { LoadingOverlayProps } from '../loading-overlay';
-export interface ScreenInnerProps {
+import { WithPageScrollLock } from '../_internal/page-scroll-lock';
+export interface ScreenInnerProps extends WithPageScrollLock {
     /** Нужно ли выводить вместо содержимого состояние загрузки. */
     loading?: boolean;
     /** Свойства компонента LoadingOverlay. */

package/select/index.d.ts

@@ -1,33 +1,2 @@
-import React from 'react';
-import { TextFieldProps } from '../text-field';
-declare 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;
-/**
- * Поле выбора из списка.
- * @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 {};
+export type { SelectProps, SelectStyle } from './types';
+export { Select } from './select';

package/select/index.js

@@ -1,111 +1,5 @@
 "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;
-/**
- * Поле выбора из списка.
- * @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;
+exports.Select = void 0;
+var select_1 = require("./select");
+Object.defineProperty(exports, "Select", { enumerable: true, get: function () { return select_1.Select; } });

package/select/parts/block.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { FieldBlockProps } from '../../field-block';
+/**
+ * Компонент открывашки в виде поля.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function SelectFieldBlock(props: FieldBlockProps): JSX.Element;

package/select/parts/block.js

@@ -0,0 +1,70 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectFieldBlock = void 0;
+const react_1 = __importStar(require("react"));
+const utils_1 = require("../utils");
+const field_block_1 = require("../../field-block");
+const colors_1 = require("../../colors");
+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"));
+const block_module_scss_1 = __importDefault(require("./block.module.scss"));
+const classnames_1 = __importDefault(require("classnames"));
+/**
+ * Компонент открывашки в виде поля.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function SelectFieldBlock(props) {
+    var _a;
+    const binding = (0, react_1.useContext)(utils_1.SelectContext);
+    const [focused, setFocused] = (0, react_1.useState)(false);
+    const ArrowSVG = binding.opened ? up_1.default : down_1.default;
+    // @todo прокидывать ref в props.blockRef при необходимости
+    const ref = (0, react_1.useRef)(null);
+    (0, react_1.useImperativeHandle)(binding.anchorRef, () => ref.current);
+    (0, react_1.useImperativeHandle)(binding.openerRef, () => ref.current);
+    return (react_1.default.createElement(field_block_1.FieldBlock, Object.assign({ label: binding.label, adornmentEnd: react_1.default.createElement(ArrowSVG, { fill: colors_1.COLORS.get('basic-gray24') }) }, props, { failed: binding.failed, disabled: binding.disabled, fixedHeight: true, blockRef: ref, blockProps: Object.assign(Object.assign({}, props === null || props === void 0 ? void 0 : props.blockProps), { onFocus: event => {
+                var _a, _b;
+                setFocused(true);
+                (_b = (_a = props.blockProps) === null || _a === void 0 ? void 0 : _a.onFocus) === null || _b === void 0 ? void 0 : _b.call(_a, event);
+            }, onBlur: event => {
+                var _a, _b;
+                setFocused(false);
+                (_b = (_a = props.blockProps) === null || _a === void 0 ? void 0 : _a.onBlur) === null || _b === void 0 ? void 0 : _b.call(_a, event);
+            }, onKeyDown: event => {
+                var _a, _b, _c;
+                (_a = binding.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(binding, event);
+                (_c = (_b = props.blockProps) === null || _b === void 0 ? void 0 : _b.onKeyDown) === null || _c === void 0 ? void 0 : _c.call(_b, event);
+            }, onMouseDown: event => {
+                var _a, _b, _c;
+                (_a = binding.onMouseDown) === null || _a === void 0 ? void 0 : _a.call(binding, event);
+                (_c = (_b = props.blockProps) === null || _b === void 0 ? void 0 : _b.onMouseDown) === null || _c === void 0 ? void 0 : _c.call(_b, event);
+            }, role: 'combobox', tabIndex: binding.disabled ? undefined : 0, className: (0, classnames_1.default)(block_module_scss_1.default.block, (_a = props.blockProps) === null || _a === void 0 ? void 0 : _a.className) }), focused: focused || binding.opened, labelAsPlaceholder: !binding.value, main: binding.value })));
+}
+exports.SelectFieldBlock = SelectFieldBlock;

package/select/parts/block.module.scss

@@ -0,0 +1,3 @@
+.block {
+  cursor: pointer;
+}

package/select/parts/button.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { TextButtonAsButtonProps } from '../../text-button';
+/**
+ * Компонент открывашки в виде текстовой кнопки.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function SelectTextButton({ buttonRef: buttonRefProp, children, onKeyDown, onMouseDown, ...props }: TextButtonAsButtonProps): JSX.Element;