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

package/readme.md

@@ -1,120 +0,0 @@
-# Библиотека компонентов
-
-В этом проекте собраны react-компоненты, реализующие правила дизайн-системы, а также компоненты и вспомогательные функции (в том числе react-хуки) которые помогают решать распространенные задачи разработки UI.
-
-## Использование
-
-### Установка
-
-```sh
-# npm
-npm i -S @sima-land/ui-nucleons
-
-# или yarn
-yarn add @sima-land/ui-nucleons
-```
-
-### Настройка среды
-
-Компоненты библиотеки используют:
-
-- импорты изображений (jpg, png...) как url/base64
-- импорты стилей
-- импорты стилей как css-модулей (каждый такой файл промаркирован в виде `%filename%.module.scss`)
-
-#### Для работы с Webpack необходимо (как вариант):
-
-- сконфигурировать обработку импортов css, scss файлов
-
-##### Конфигурация
-
-```js
-// webpack.config.js
-module.exports = {
-  module: {
-    rules: [
-      // стилей
-      {
-        test: /\.(css|scss)$/,
-        use: [
-          // ...здесь style-loader, mini-css-extract-plugin или что-то другое
-          {
-            loader: 'css-loader',
-            options: {
-              modules: {
-                auto: /\.module\.(css|scss)$/,
-                localIdentName: '[name]__[local]--[hash:hex:3]',
-              },
-            },
-          },
-          'sass-loader',
-        ],
-      },
-    ],
-  },
-};
-```
-
-#### Для работы с Jest необходимо (как вариант):
-
-- сконфигурировать обработку css, scss файлов
-
-##### Добавить поддержку стилей
-
-В конфигурации Jest:
-
-```js
-module.exports = {
-  transform: {
-    // обычный css
-    '(?<!(\\.module))\\.(css|scss)$': './transformer/empty.js',
-
-    // css-модули
-    '\\.module\\.(css|scss)$': 'jest-css-modules-transform',
-  },
-  transformIgnorePatterns: [
-    // в пакете содержится css-модули, поэтому игнорируем только скрипты
-    '/node_modules/.+js$',
-  ],
-  // ...
-};
-```
-
-#### Декларации типов для TypeScript
-
-в `src/custom.d.ts` необходимо указать:
-
-```ts
-// css-модули
-declare module '*.module.css' {
-  const classes: { [key: string]: string };
-  export default classes;
-}
-
-// css-модули с синтаксисом SCSS
-declare module '*.module.scss' {
-  const classes: { [key: string]: string };
-  export default classes;
-}
-```
-
-## Разработка и поддержка
-
-### Принципы библиотеки
-
-- в библиотеке не должно быть HOC (компонентов высшего порядка - функций, возвращающих компонент)
-- компонент интерфейса не должен иметь внешних отступов по умолчанию
-
-### Структура библиотеки
-
-`src/` - директория со всеми компонентами библиотеки
-
-- `something/` - директория с компонентом
-  - `__stories__/`
-    - `index.stories.tsx` - описание компонента для storybook
-  - `__test__/`
-    - `index.test.tsx` - unit-тесты
-  - `index.tsx` - файл, с именованными экспортами компонента и интерфейса
-- `helpers/` - общие вспомогательные функции (для использования вне библиотеки)
-- `hooks/` - общие react-хуки (для использования вне библиотеки)
-- `_internal/` - внутренние скрипты для использования только в рамках данной библиотеки

package/screen/index.d.ts

@@ -1,25 +0,0 @@
-/// <reference types="react" />
-import { ScreenInnerProps } from './utils';
-import { WithPageScrollLock } from '../_internal/page-scroll-lock';
-export interface ScreenProps extends ScreenInnerProps, WithPageScrollLock {
-    /** Содержимое. */
-    children?: React.ReactNode;
-    /** Определяет область отображаемую как загружающуюся. */
-    loadingArea?: 'content' | 'full';
-    /** Идентификатор для систем автоматизированного тестирования. */
-    'data-testid'?: string;
-}
-/**
- * Экран.
- * @deprecated На адаптивных страницах стоит использовать Modal.
- * @param props Свойства.
- * @return Элемент.
- */
-export declare const Screen: {
-    ({ 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: import("react").ForwardRefExoticComponent<{
-        children?: import("react").ReactNode;
-    } & import("react").RefAttributes<HTMLDivElement | null>>;
-    Footer: import("react").FC<{}>;
-};

package/screen/index.js

@@ -1,48 +0,0 @@
-"use strict";
-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 jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = 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, 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, {
-        header: slots_1.HeaderSlot,
-        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 ((0, jsx_runtime_1.jsx)("div", Object.assign({ ref: rootRef, className: screen_module_scss_1.default.root, style: {
-            zIndex: layer, // z-index именно здесь из-за position: fixed
-        }, "data-testid": testId }, { children: (0, jsx_runtime_1.jsxs)(layer_1.LayerProvider, Object.assign({ value: layer }, { children: [!fullLoading && header, (0, jsx_runtime_1.jsx)(utils_1.ScreenContext.Provider, Object.assign({ value: {
-                        loading,
-                        loadingOverlayProps,
-                        onFullScroll,
-                        fullScrollThreshold,
-                        withScrollDisable,
-                        scrollDisableOptions,
-                    } }, { children: body })), !fullLoading && footer && ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: screen_module_scss_1.default.footer, "data-testid": 'screen:footer' }, { children: footer })))] })) })));
-};
-exports.Screen = Screen;
-exports.Screen.Header = slots_1.HeaderSlot;
-exports.Screen.Body = slots_1.BodySlot;
-exports.Screen.Footer = slots_1.FooterSlot;

package/screen/screen.module.scss

@@ -1,31 +0,0 @@
-.root {
-  position: fixed;
-
-  // для корректного отображения с динамическим viewport переменная --offsetTop должна быть доступна
-  top: var(--offsetTop, 0);
-  left: 0;
-  display: flex;
-  flex-direction: column;
-  height: calc(var(--vh, 1vh) * 100);
-  width: 100%;
-  box-sizing: border-box;
-  background-color: #fff;
-  outline: 100px solid #fff;
-}
-
-.body {
-  width: 100%;
-  height: 0;
-  overflow-y: auto;
-  flex-grow: 1;
-  flex-shrink: 0;
-  -webkit-overflow-scrolling: touch;
-}
-
-.footer {
-  min-height: 56px;
-  width: 100%;
-  flex-grow: 0;
-  flex-shrink: 0;
-  box-shadow: inset 0 1px 0 #e0e0e0;
-}

package/screen/slots.d.ts

@@ -1,26 +0,0 @@
-/// <reference types="react" />
-import { TopBarProps } from '../top-bar';
-export interface HeaderSlotProps extends TopBarProps {
-    /** Будет вызвана при нажатии на кнопку-стрелку. */
-    onBack?: () => void;
-    /** Будет вызвана при нажатии на кнопку-крести. */
-    onClose?: () => void;
-}
-/**
- * Слот шапки экрана.
- * @param props Свойства.
- * @return Элемент.
- */
-export declare const HeaderSlot: ({ divided, title, subtitle, buttons, onBack, onClose, ...restProps }: HeaderSlotProps) => JSX.Element;
-/**
- * Слот основного контента экрана.
- */
-export declare const BodySlot: import("react").ForwardRefExoticComponent<{
-    children?: React.ReactNode;
-} & import("react").RefAttributes<HTMLDivElement | null>>;
-/**
- * Слот футера экрана.
- * @param props Свойства.
- * @return Элемент.
- */
-export declare const FooterSlot: React.FC;

package/screen/slots.js

@@ -1,79 +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.FooterSlot = exports.BodySlot = exports.HeaderSlot = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const lodash_1 = require("lodash");
-const ArrowLeft_1 = __importDefault(require("@sima-land/ui-quarks/icons/24x24/Stroked/ArrowLeft"));
-const Cross_1 = __importDefault(require("@sima-land/ui-quarks/icons/24x24/Stroked/Cross"));
-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 top_bar_1 = require("../top-bar");
-/**
- * Слот шапки экрана.
- * @param props Свойства.
- * @return Элемент.
- */
-const HeaderSlot = (_a) => {
-    var { divided, title, subtitle, buttons, onBack, onClose } = _a, restProps = __rest(_a, ["divided", "title", "subtitle", "buttons", "onBack", "onClose"]);
-    return ((0, jsx_runtime_1.jsx)(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: (0, jsx_runtime_1.jsx)(ArrowLeft_1.default, {}),
-                    onClick: onBack,
-                    'aria-label': 'Вернуться назад',
-                    'data-testid': 'screen:back',
-                }
-                : (0, lodash_1.get)(buttons, 'start'), end: onClose
-                ? {
-                    // ВАЖНО: не подмешиваем свойства из buttons.end
-                    // чтобы не распылять конфигурацию одной и той же кнопки по нескольким местам
-                    icon: (0, jsx_runtime_1.jsx)(Cross_1.default, {}),
-                    onClick: onClose,
-                    'aria-label': `Закрыть ${title || ''}`.trim(),
-                    'data-testid': 'screen:close',
-                }
-                : (0, lodash_1.get)(buttons, 'end') }) })));
-};
-exports.HeaderSlot = HeaderSlot;
-/**
- * Слот основного контента экрана.
- */
-exports.BodySlot = (0, react_1.forwardRef)(function BodySlot({ children }, outerRef) {
-    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, page_scroll_lock_1.usePageScrollLock)(ref, Object.assign({ lockEnabled: withScrollDisable }, scrollDisableOptions));
-    (0, hooks_1.useInfiniteScroll)(ref, { onFullScroll, threshold: fullScrollThreshold });
-    return (
-    // ВАЖНО: элемент с ref должен выводиться всегда (без условий), т.к. он нужен для блокировки прокрутки
-    (0, jsx_runtime_1.jsx)("div", Object.assign({ ref: ref, className: screen_module_scss_1.default.body, "data-testid": 'screen:body' }, { children: loading ? ((0, jsx_runtime_1.jsx)(loading_overlay_1.LoadingOverlay, Object.assign({}, loadingOverlayProps, { fill: false, style: { height: '100%' } }))) : (children) })));
-});
-/**
- * Слот футера экрана.
- * @param props Свойства.
- * @return Элемент.
- */
-const FooterSlot = ({ children }) => (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
-exports.FooterSlot = FooterSlot;

package/screen/utils.d.ts

@@ -1,14 +0,0 @@
-/// <reference types="react" />
-import { LoadingOverlayProps } from '../loading-overlay';
-import { WithPageScrollLock } from '../_internal/page-scroll-lock';
-export interface ScreenInnerProps extends WithPageScrollLock {
-    /** Нужно ли выводить вместо содержимого состояние загрузки. */
-    loading?: boolean;
-    /** Свойства компонента LoadingOverlay. */
-    loadingOverlayProps?: LoadingOverlayProps;
-    /** Будет вызвана при полной прокрутке содержимого экрана. */
-    onFullScroll?: () => void;
-    /** Отступ от нижней границы содержимого экрана, после которого начинает срабатывать onFullScroll. */
-    fullScrollThreshold?: number;
-}
-export declare const ScreenContext: import("react").Context<ScreenInnerProps>;

package/screen/utils.js

@@ -1,5 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ScreenContext = void 0;
-const react_1 = require("react");
-exports.ScreenContext = (0, react_1.createContext)({});

package/select/index.d.ts

@@ -1,2 +0,0 @@
-export type { SelectProps, SelectStyle } from './types';
-export { Select } from './select';

package/select/index.js

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

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

package/select/parts/block.js

@@ -1,48 +0,0 @@
-"use strict";
-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 jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = 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 ((0, jsx_runtime_1.jsx)(field_block_1.FieldBlock, Object.assign({ label: binding.label, adornmentEnd: (0, jsx_runtime_1.jsx)(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, mainProps: { className: block_module_scss_1.default.main } })));
-}
-exports.SelectFieldBlock = SelectFieldBlock;

package/select/parts/button.d.ts

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

package/select/parts/button.js

@@ -1,47 +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.SelectTextButton = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = 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 ((0, jsx_runtime_1.jsx)(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: children !== null && children !== void 0 ? children : (binding.value || binding.label) })));
-}
-exports.SelectTextButton = SelectTextButton;

package/select/parts/menu.d.ts

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

@@ -1,84 +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.SelectMenu = void 0;
-const react_1 = require("react");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_2 = 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_2.useRef)(null);
-    const osComponentRef = (0, react_2.useRef)(null);
-    const [activeIndex, setActiveIndex] = (0, react_2.useState)(-1);
-    const items = react_2.Children.toArray(children).filter(utils_1.DropdownItemUtils.is);
-    (0, react_2.useImperativeHandle)(menuRef, () => ref.current);
-    // прокрутка до элемента списка
-    (0, react_2.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_2.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_2.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 ((0, jsx_runtime_1.jsx)(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 } }, { children: loading ? ((0, jsx_runtime_1.jsx)(dropdown_loading_1.DropdownLoading, { "data-testid": 'select:loading-area' })) : (items.map((item, index) => ((0, react_1.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

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

package/select/select.d.ts

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