@sima-land/ui-nucleons 42.0.0 → 42.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sima-land/ui-nucleons",
-  "version": "42.0.0",
+  "version": "42.1.0",
   "repository": "ssh://git@github.com:sima-land/ui-nucleons.git",
   "author": "www.sima-land.ru team",
   "license": "Apache-2.0",

package/select/index.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { TextFieldProps } from '../text-field';
 declare type Size = 's' | 'm' | 'l' | 'xl';
-export interface SelectProps extends Omit<TextFieldProps, 'style'> {
+export interface SelectProps extends Omit<TextFieldProps, 'style' | 'endAdornment'> {
     /** Нужно ли выводить состояние загрузки списка. */
     loading?: boolean;
     /** Сработает при открытии/закрытии меню. */
@@ -16,11 +16,18 @@ export interface SelectProps extends Omit<TextFieldProps, 'style'> {
     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, ...restProps }: SelectProps) => JSX.Element;
+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/index.js

@@ -33,7 +33,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Select = void 0;
+exports.Select = exports.renderDefaultArrow = void 0;
 const react_1 = __importStar(require("react"));
 const dropdown_1 = require("../dropdown");
 const dropdown_item_1 = require("../dropdown-item");
@@ -47,18 +47,27 @@ 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('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 } = _a, restProps = __rest(_a, ["options", "optionSize", "onSelect", "style", "className", "label", "onClick", "value", "loading", "onMenuToggle", "renderOption", 'data-testid', "size"]);
+    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);
-    const ArrowSVG = opened ? up_1.default : down_1.default;
     (0, react_1.useEffect)(() => {
         opened && menuRef.current && menuRef.current.focus();
         onMenuToggle && onMenuToggle(opened);
@@ -82,7 +91,7 @@ const Select = (_a) => {
                 // чтобы не ловить фокус на поле
                 style: { pointerEvents: 'none' },
                 tabIndex: -1,
-            }, value: value, multiline: false, variant: 'desktop', readOnly: true, endAdornment: react_1.default.createElement(ArrowSVG, { fill: colors_1.COLORS.get('gray38') }) })),
+            }, 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);