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

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, mainProps: { className: block_module_scss_1.default.main } })));
+}
+exports.SelectFieldBlock = SelectFieldBlock;

package/select/parts/block.module.scss

@@ -0,0 +1,7 @@
+.block {
+  cursor: pointer;
+}
+
+.main {
+  overflow: hidden;
+}

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;

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,
+});