@ozen-ui/kit 0.74.0 → 0.76.0

package/__inner__/cjs/components/ListCardItem/hooks/useListCardItemRatio.js

@@ -1,22 +1,18 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useListCardItemRatio = void 0;
-var react_1 = require("react");
 var logger_1 = require("@ozen-ui/logger");
-var environment_1 = require("../../../constants/environment");
+var useDevEffect_1 = require("../../../hooks/useDevEffect");
 var useListCardItemRatio = function (contentTrailingRatio) {
-    if (environment_1.isDev) {
-        // eslint-disable-next-line react-hooks/rules-of-hooks
-        (0, react_1.useEffect)(function () {
-            if (contentTrailingRatio < 0) {
-                logger_1.logger.error('Свойство «contentTrailingRatio» у компонента ListCardItem не может быть меньше 0');
-                return;
-            }
-            if (contentTrailingRatio > 1) {
-                logger_1.logger.error('Свойство «contentTrailingRatio» у компонента ListCardItem не может быть больше 1');
-            }
-        }, [contentTrailingRatio]);
-    }
+    (0, useDevEffect_1.useDevEffect)(function () {
+        if (contentTrailingRatio < 0) {
+            logger_1.logger.error('Свойство «contentTrailingRatio» у компонента ListCardItem не может быть меньше 0');
+            return;
+        }
+        if (contentTrailingRatio > 1) {
+            logger_1.logger.error('Свойство «contentTrailingRatio» у компонента ListCardItem не может быть больше 1');
+        }
+    }, [contentTrailingRatio]);
     var contentRatio = contentTrailingRatio * 100;
     var trailingRatio = 100 - contentRatio;
     return { content: contentRatio, trailing: trailingRatio };

package/__inner__/cjs/components/OzenProvider/providers/theme/tokens/color/b-business-dark/color-b-business-dark.css

@@ -169,4 +169,4 @@
   --color-additional-h1: #9f891a;
   --color-additional-h2: #ffda1f;
   --color-additional-h3: #fff0a5;
-}
+}

package/__inner__/cjs/components/OzenProvider/providers/theme/tokens/color/b-business-default/color-b-business-default.css

@@ -169,4 +169,4 @@
   --color-additional-h1: #9f891a;
   --color-additional-h2: #ffda1f;
   --color-additional-h3: #fff0a5;
-}
+}

package/__inner__/cjs/components/OzenProvider/providers/theme/tokens/color/ozen-dark/color-ozen-dark.css

@@ -169,4 +169,4 @@
   --color-additional-h1: #9f891a;
   --color-additional-h2: #ffda1f;
   --color-additional-h3: #fff0a5;
-}
+}

package/__inner__/cjs/components/OzenProvider/providers/theme/tokens/color/ozen-default/color-ozen-default.css

@@ -169,4 +169,4 @@
   --color-additional-h1: #9f891a;
   --color-additional-h2: #ffda1f;
   --color-additional-h3: #fff0a5;
-}
+}

package/__inner__/cjs/components/OzenProvider/providers/theme/tokens/color/vip-dark/color-vip-dark.css

@@ -169,4 +169,4 @@
   --color-additional-h1: #9f891a;
   --color-additional-h2: #ffda1f;
   --color-additional-h3: #fff0a5;
-}
+}

package/__inner__/cjs/components/OzenProvider/providers/theme/tokens/color/vip-default/color-vip-default.css

@@ -169,4 +169,4 @@
   --color-additional-h1: #9f891a;
   --color-additional-h2: #ffda1f;
   --color-additional-h3: #fff0a5;
-}
+}

package/__inner__/cjs/components/OzenProvider/providers/theme/tokens/shadow/ozen-default/shadow-ozen-default.css

@@ -2,4 +2,4 @@
   --shadow-l: 0px 8px 32px rgb(0 0 0 / 8%);
   --shadow-m: 0px 4px 20px rgb(0 0 0 / 6%);
   --shadow-s: 0px 4px 8px rgb(0 0 0 / 3%);
-}
+}

package/__inner__/cjs/components/Select/Select.css

@@ -79,10 +79,19 @@
       }
 
   .Select-RenderLeft,
-  .Select-RenderRight {
+  .Select-RenderRight_nonInteractive {
     pointer-events: none;
   }
 
+  .Select-ClearIcon {
+    visibility: hidden;
+    transition: visibility var(--transition-default);
+  }
+
+  .Select-ClearIcon_visibility {
+      visibility: visible;
+    }
+
   .Select-DropDownIcon {
     display: flex;
     align-items: center;

package/__inner__/cjs/components/Select/Select.d.ts

@@ -1,4 +1,3 @@
 import './Select.css';
 import type { SelectComponent } from './types';
-export declare const cnSelect: import("@bem-react/classname").ClassNameFormatter;
 export declare const Select: SelectComponent;

package/__inner__/cjs/components/Select/Select.js

@@ -1,42 +1,49 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Select = exports.cnSelect = void 0;
+exports.Select = void 0;
 var tslib_1 = require("tslib");
 require("./Select.css");
 var react_1 = tslib_1.__importStar(require("react"));
+var logger_1 = require("@ozen-ui/logger");
 var react_is_1 = require("react-is");
 var useControlled_1 = require("../../hooks/useControlled");
+var useDevEffect_1 = require("../../hooks/useDevEffect");
 var useMultiRef_1 = require("../../hooks/useMultiRef");
 var useThemeProps_1 = require("../../hooks/useThemeProps");
-var classname_1 = require("../../utils/classname");
+var utils_1 = require("../../utils");
 var isKeys_1 = require("../../utils/isKeys");
 var isString_1 = require("../../utils/isString");
 var DataList_1 = require("../DataList");
 var components_1 = require("./components");
 var constants_1 = require("./constants");
 var helpers_1 = require("./helpers");
-exports.cnSelect = (0, classname_1.cn)('Select');
+var SelectContext_1 = require("./SelectContext");
 var SelectRender = function (inProps, ref) {
     var props = (0, useThemeProps_1.useThemeProps)({
         props: inProps,
         name: 'Select',
     });
-    var _a = props.size, size = _a === void 0 ? constants_1.SELECT_DEFAULT_SIZE : _a, _b = props.autoFocus, autoFocus = _b === void 0 ? constants_1.SELECT_DEFAULT_AUTO_FOCUS : _b, _c = props.fullWidth, fullWidth = _c === void 0 ? constants_1.SELECT_DEFAULT_FULL_WIDTH : _c, _d = props.disabled, disabled = _d === void 0 ? constants_1.SELECT_DEFAULT_DISABLED : _d, _e = props.required, required = _e === void 0 ? constants_1.SELECT_DEFAULT_REQUIRED : _e, _f = props.multiline, multiline = _f === void 0 ? constants_1.SELECT_DEFAULT_MULTILINE : _f, _g = props.defaultOpen, defaultOpen = _g === void 0 ? constants_1.SELECT_DEFAULT_DEFAULT_OPEN : _g, valueProp = props.value, defaultValue = props.defaultValue, onChange = props.onChange, renderValueProp = props.renderValue, children = props.children, onClick = props.onClick, onKeyDown = props.onKeyDown, menuProps = props.menuProps, dataListPropsProp = props.dataListProps, bodyProps = props.bodyProps, bodyRefProp = props.bodyRef, onCloseProp = props.onClose, onOpenProp = props.onOpen, openProp = props.open, multiple = props.multiple, other = tslib_1.__rest(props, ["size", "autoFocus", "fullWidth", "disabled", "required", "multiline", "defaultOpen", "value", "defaultValue", "onChange", "renderValue", "children", "onClick", "onKeyDown", "menuProps", "dataListProps", "bodyProps", "bodyRef", "onClose", "onOpen", "open", "multiple"]);
+    var _a = props.size, size = _a === void 0 ? constants_1.SELECT_DEFAULT_SIZE : _a, _b = props.autoFocus, autoFocus = _b === void 0 ? constants_1.SELECT_DEFAULT_AUTO_FOCUS : _b, _c = props.fullWidth, fullWidth = _c === void 0 ? constants_1.SELECT_DEFAULT_FULL_WIDTH : _c, _d = props.disabled, disabled = _d === void 0 ? constants_1.SELECT_DEFAULT_DISABLED : _d, _e = props.required, required = _e === void 0 ? constants_1.SELECT_DEFAULT_REQUIRED : _e, _f = props.multiline, multiline = _f === void 0 ? constants_1.SELECT_DEFAULT_MULTILINE : _f, _g = props.defaultOpen, defaultOpen = _g === void 0 ? constants_1.SELECT_DEFAULT_DEFAULT_OPEN : _g, _h = props.renderRightLayout, renderRightLayout = _h === void 0 ? constants_1.SELECT_DEFAULT_RENDER_RIGHT_LAYOUT : _h, valueProp = props.value, defaultValue = props.defaultValue, onChange = props.onChange, renderValueProp = props.renderValue, children = props.children, onClick = props.onClick, onKeyDown = props.onKeyDown, menuProps = props.menuProps, dataListPropsProp = props.dataListProps, bodyProps = props.bodyProps, bodyRefProp = props.bodyRef, onCloseProp = props.onClose, onOpenProp = props.onOpen, openProp = props.open, multiple = props.multiple, _j = props.showClearButton, showClearButton = _j === void 0 ? constants_1.SELECT_DEFAULT_SHOW_CLEAR_BUTTON : _j, renderLeft = props.renderLeft, renderRight = props.renderRight, onClearProp = props.onClear, clearText = props.clearText, _k = props.error, error = _k === void 0 ? constants_1.SELECT_DEFAULT_ERROR : _k, other = tslib_1.__rest(props, ["size", "autoFocus", "fullWidth", "disabled", "required", "multiline", "defaultOpen", "renderRightLayout", "value", "defaultValue", "onChange", "renderValue", "children", "onClick", "onKeyDown", "menuProps", "dataListProps", "bodyProps", "bodyRef", "onClose", "onOpen", "open", "multiple", "showClearButton", "renderLeft", "renderRight", "onClear", "clearText", "error"]);
+    (0, useDevEffect_1.useDevEffect)(function () {
+        if (renderRightLayout.length !== new Set(renderRightLayout).size) {
+            logger_1.logger.error("\u0412 renderRightLayout [".concat(renderRightLayout.map(function (element) { return "\"".concat(element, "\""); }).join(', '), "] \u0435\u0441\u0442\u044C \u0434\u0443\u0431\u043B\u0438\u0440\u0443\u044E\u0449\u0438\u0435 \u044D\u043B\u0435\u043C\u0435\u043D\u0442\u044B, \u043F\u0435\u0440\u0435\u043F\u0440\u043E\u0432\u0435\u0440\u044C\u0442\u0435 \u043F\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0435\u043C\u044B\u0435 \u0434\u0430\u043D\u043D\u044B\u0435."));
+        }
+    }, [renderRightLayout]);
     var bodyInnerRef = (0, react_1.useRef)(null);
     var bodyRef = (0, useMultiRef_1.useMultiRef)([(bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.ref) || bodyRefProp, bodyInnerRef]);
     var dataListProps = dataListPropsProp || menuProps;
-    var _h = tslib_1.__read((0, useControlled_1.useControlled)({
+    var _l = tslib_1.__read((0, useControlled_1.useControlled)({
         value: valueProp,
         defaultValue: defaultValue,
         name: 'Select',
         state: 'value',
-    }), 2), valueState = _h[0], setValueState = _h[1];
-    var _j = tslib_1.__read((0, useControlled_1.useControlled)({
+    }), 2), valueState = _l[0], setValueState = _l[1];
+    var _m = tslib_1.__read((0, useControlled_1.useControlled)({
         value: openProp,
         defaultValue: defaultOpen,
         name: 'Select',
         state: 'open',
-    }), 2), open = _j[0], setOpen = _j[1];
+    }), 2), open = _m[0], setOpen = _m[1];
     var currentLabel;
     var isNotSelectOption = function (child) { return !(0, react_1.isValidElement)(child) || child.type !== DataList_1.DataListOption; };
     var resolvedChildren = (0, react_is_1.isFragment)(children)
@@ -125,8 +132,16 @@ var SelectRender = function (inProps, ref) {
             return (params === null || params === void 0 ? void 0 : params.value) || '';
         return '';
     };
+    var onClear = function (event) {
+        setValueState(undefined);
+        onChange === null || onChange === void 0 ? void 0 : onChange(undefined, event);
+        onClearProp === null || onClearProp === void 0 ? void 0 : onClearProp(event);
+    };
     /** Представление значение элемента контроля */
     var renderValue = renderValueProp || renderDefaultValue;
+    var hasValue = (0, utils_1.isArray)(valueState)
+        ? valueState.length > 0
+        : (0, utils_1.isNotNil)(valueState);
     (0, react_1.useEffect)(function () {
         var _a;
         /** Устанавливает фокус на элементе контроля
@@ -141,8 +156,23 @@ var SelectRender = function (inProps, ref) {
         if (autoFocus)
             (_a = bodyInnerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     }, [autoFocus]);
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(components_1.SelectInput, tslib_1.__assign({ size: size, disabled: disabled, required: required, multiline: multiline, fullWidth: fullWidth }, other, { open: open, value: inputValue(), onClick: handleClick, onKeyDown: handleKeyDown, renderedValue: renderValue({
+    return (react_1.default.createElement(SelectContext_1.SelectContext.Provider, { value: {
+            open: open !== null && open !== void 0 ? open : false,
+            hasValue: hasValue,
+            size: size,
+            disabled: disabled,
+            renderRightLayout: renderRightLayout,
+            showClearButton: showClearButton,
+            fullWidth: fullWidth,
+            required: required,
+            multiline: multiline,
+            onClear: onClear,
+            clearText: clearText !== null && clearText !== void 0 ? clearText : '',
+            renderRight: renderRight,
+            renderLeft: renderLeft,
+            error: error,
+        } },
+        react_1.default.createElement(components_1.SelectInput, tslib_1.__assign({}, other, { value: inputValue(), onClick: handleClick, onKeyDown: handleKeyDown, renderedValue: renderValue({
                 label: currentLabel,
                 value: valueState,
             }), bodyProps: tslib_1.__assign(tslib_1.__assign({}, bodyProps), { ref: bodyRef }), ref: ref })),

package/__inner__/cjs/components/Select/SelectContext.d.ts

@@ -0,0 +1,21 @@
+import type { SelectOnClear, SelectRenderLeft, SelectRenderRight, SelectRenderRightLayout } from './entities';
+import type { SelectPropSize } from './types';
+export type SelectContextValue = {
+    renderRightLayout: SelectRenderRightLayout;
+    size: SelectPropSize;
+    open: boolean;
+    disabled: boolean;
+    hasValue: boolean;
+    onClear: SelectOnClear;
+    renderLeft: SelectRenderLeft;
+    renderRight: SelectRenderRight;
+    clearText: string;
+    showClearButton: boolean;
+    required: boolean;
+    multiline: boolean;
+    fullWidth: boolean;
+    error: boolean;
+};
+export declare const SelectContextDefaultValue: SelectContextValue;
+export declare const SelectContext: import("react").Context<SelectContextValue>;
+export declare const useSelectContext: () => SelectContextValue;

package/__inner__/cjs/components/Select/SelectContext.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSelectContext = exports.SelectContext = exports.SelectContextDefaultValue = void 0;
+var react_1 = require("react");
+var environment_1 = require("../../constants/environment");
+var constants_1 = require("./constants");
+exports.SelectContextDefaultValue = {
+    renderRightLayout: constants_1.SELECT_DEFAULT_RENDER_RIGHT_LAYOUT,
+    disabled: constants_1.SELECT_DEFAULT_DISABLED,
+    size: constants_1.SELECT_DEFAULT_SIZE,
+    open: constants_1.SELECT_DEFAULT_DEFAULT_OPEN,
+    hasValue: false,
+    onClear: function () { },
+    clearText: '',
+    renderLeft: undefined,
+    renderRight: undefined,
+    showClearButton: constants_1.SELECT_DEFAULT_SHOW_CLEAR_BUTTON,
+    required: constants_1.SELECT_DEFAULT_REQUIRED,
+    multiline: constants_1.SELECT_DEFAULT_MULTILINE,
+    fullWidth: constants_1.SELECT_DEFAULT_FULL_WIDTH,
+    error: false,
+};
+exports.SelectContext = (0, react_1.createContext)(exports.SelectContextDefaultValue);
+var useSelectContext = function () { return (0, react_1.useContext)(exports.SelectContext); };
+exports.useSelectContext = useSelectContext;
+// Именованный провайдер
+if (environment_1.isDev) {
+    exports.SelectContext.displayName = 'SelectContext';
+}

package/__inner__/cjs/components/Select/classNames.d.ts

@@ -0,0 +1 @@
+export declare const cnSelect: import("@bem-react/classname").ClassNameFormatter;

package/__inner__/cjs/components/Select/classNames.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.cnSelect = void 0;
+var utils_1 = require("../../utils");
+exports.cnSelect = (0, utils_1.cn)('Select');

package/__inner__/cjs/components/Select/components/SelectInput/SelectInput.js

@@ -4,20 +4,20 @@ exports.SelectInput = void 0;
 var tslib_1 = require("tslib");
 require("../../Select.css");
 var react_1 = tslib_1.__importStar(require("react"));
-var classnames_1 = require("@bem-react/classnames");
-var icons_1 = require("@ozen-ui/icons");
 var useBoolean_1 = require("../../../../hooks/useBoolean");
 var FieldControl_1 = require("../../../FieldControl");
 var FieldHint_1 = require("../../../FieldHint");
 var FieldIcon_1 = require("../../../FieldIcon");
 var FieldLabel_1 = require("../../../FieldLabel");
 var Fieldset_1 = require("../../../Fieldset");
-var constants_1 = require("../../constants");
-var index_1 = require("../../index");
+var classNames_1 = require("../../classNames");
+var SelectContext_1 = require("../../SelectContext");
 var SelectInputContextConsumer_1 = require("../SelectInputContextConsumer");
+var SelectInputRenderRight_1 = require("../SelectInputRenderRight");
 exports.SelectInput = (0, react_1.forwardRef)(function (_a, ref) {
-    var _b = _a.size, size = _b === void 0 ? constants_1.SELECT_DEFAULT_SIZE : _b, _c = _a.multiline, multiline = _c === void 0 ? constants_1.SELECT_DEFAULT_MULTILINE : _c, open = _a.open, label = _a.label, error = _a.error, id = _a.id, name = _a.name, renderLeft = _a.renderLeft, renderRight = _a.renderRight, renderedValue = _a.renderedValue, fullWidth = _a.fullWidth, disabled = _a.disabled, hint = _a.hint, required = _a.required, className = _a.className, inputProps = _a.inputProps, valueProp = _a.value, placeholderProp = _a.placeholder, defaultValue = _a.defaultValue, onFocus = _a.onFocus, onBlur = _a.onBlur, onClick = _a.onClick, onKeyDown = _a.onKeyDown, labelProps = _a.labelProps, fieldProps = _a.fieldProps, hintProps = _a.hintProps, labelRef = _a.labelRef, inputRef = _a.inputRef, fieldRef = _a.fieldRef, bodyProps = _a.bodyProps, other = tslib_1.__rest(_a, ["size", "multiline", "open", "label", "error", "id", "name", "renderLeft", "renderRight", "renderedValue", "fullWidth", "disabled", "hint", "required", "className", "inputProps", "value", "placeholder", "defaultValue", "onFocus", "onBlur", "onClick", "onKeyDown", "labelProps", "fieldProps", "hintProps", "labelRef", "inputRef", "fieldRef", "bodyProps"]);
-    var _d = tslib_1.__read((0, useBoolean_1.useBoolean)(), 2), focused = _d[0], _e = _d[1], on = _e.on, off = _e.off;
+    var label = _a.label, id = _a.id, name = _a.name, renderedValue = _a.renderedValue, hint = _a.hint, className = _a.className, inputProps = _a.inputProps, valueProp = _a.value, placeholderProp = _a.placeholder, defaultValue = _a.defaultValue, onFocus = _a.onFocus, onBlur = _a.onBlur, onClick = _a.onClick, onKeyDown = _a.onKeyDown, labelProps = _a.labelProps, fieldProps = _a.fieldProps, hintProps = _a.hintProps, labelRef = _a.labelRef, inputRef = _a.inputRef, fieldRef = _a.fieldRef, bodyProps = _a.bodyProps, other = tslib_1.__rest(_a, ["label", "id", "name", "renderedValue", "hint", "className", "inputProps", "value", "placeholder", "defaultValue", "onFocus", "onBlur", "onClick", "onKeyDown", "labelProps", "fieldProps", "hintProps", "labelRef", "inputRef", "fieldRef", "bodyProps"]);
+    var _b = (0, SelectContext_1.useSelectContext)(), open = _b.open, required = _b.required, disabled = _b.disabled, fullWidth = _b.fullWidth, renderLeft = _b.renderLeft, multiline = _b.multiline, size = _b.size, error = _b.error;
+    var _c = tslib_1.__read((0, useBoolean_1.useBoolean)(), 2), focused = _c[0], _d = _c[1], on = _d.on, off = _d.off;
     var filled = !!valueProp || valueProp === 0;
     var handleFocus = (0, react_1.useCallback)(function (e) {
         on();
@@ -27,16 +27,15 @@ exports.SelectInput = (0, react_1.forwardRef)(function (_a, ref) {
         off();
         onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
     }, [onBlur]);
-    return (react_1.default.createElement(FieldControl_1.FieldControl, tslib_1.__assign({ size: size, error: error, filled: filled, focused: focused, disabled: disabled, required: required, fullWidth: fullWidth }, other, { ref: ref, className: (0, index_1.cnSelect)({ multiline: multiline }, [className]) }),
-        react_1.default.createElement("div", tslib_1.__assign({ role: "button", "aria-expanded": open, "aria-haspopup": "listbox" }, bodyProps, { onClick: onClick, onBlur: handleBlur, onKeyDown: onKeyDown, onFocus: handleFocus, tabIndex: disabled ? -1 : 0, className: (0, index_1.cnSelect)('Body', [bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.className]) }),
-            react_1.default.createElement(FieldIcon_1.FieldIcon, { icon: renderLeft, className: (0, index_1.cnSelect)('RenderLeft') }),
-            react_1.default.createElement("div", { className: (0, index_1.cnSelect)('FieldContainer') },
-                react_1.default.createElement("div", { className: (0, index_1.cnSelect)('HiddenLabel'), "aria-hidden": true }, label),
-                react_1.default.createElement(FieldLabel_1.FieldLabel, tslib_1.__assign({}, labelProps, { className: (0, index_1.cnSelect)('Label', [labelProps === null || labelProps === void 0 ? void 0 : labelProps.className]), ref: (labelProps === null || labelProps === void 0 ? void 0 : labelProps.ref) || labelRef }), label),
+    return (react_1.default.createElement(FieldControl_1.FieldControl, tslib_1.__assign({ size: size, error: error, filled: filled, focused: focused, disabled: disabled, required: required, fullWidth: fullWidth }, other, { ref: ref, className: (0, classNames_1.cnSelect)({ multiline: multiline }, [className]) }),
+        react_1.default.createElement("div", tslib_1.__assign({ role: "button", "aria-expanded": open, "aria-haspopup": "listbox" }, bodyProps, { onClick: onClick, onBlur: handleBlur, onKeyDown: onKeyDown, onFocus: handleFocus, tabIndex: disabled ? -1 : 0, className: (0, classNames_1.cnSelect)('Body', [bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.className]) }),
+            react_1.default.createElement(FieldIcon_1.FieldIcon, { icon: renderLeft, className: (0, classNames_1.cnSelect)('RenderLeft') }),
+            react_1.default.createElement("div", { className: (0, classNames_1.cnSelect)('FieldContainer') },
+                react_1.default.createElement("div", { className: (0, classNames_1.cnSelect)('HiddenLabel'), "aria-hidden": true }, label),
+                react_1.default.createElement(FieldLabel_1.FieldLabel, tslib_1.__assign({}, labelProps, { className: (0, classNames_1.cnSelect)('Label', [labelProps === null || labelProps === void 0 ? void 0 : labelProps.className]), ref: (labelProps === null || labelProps === void 0 ? void 0 : labelProps.ref) || labelRef }), label),
                 react_1.default.createElement(SelectInputContextConsumer_1.SelectInputContextConsumer, { id: id, name: name, value: valueProp, fieldProps: fieldProps, inputProps: inputProps, defaultValue: defaultValue, renderedValue: renderedValue, placeholder: placeholderProp, fieldRef: (fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.ref) || fieldRef, inputRef: (inputProps === null || inputProps === void 0 ? void 0 : inputProps.ref) || inputRef })),
-            react_1.default.createElement(FieldIcon_1.FieldIcon, { icon: renderRight, className: (0, index_1.cnSelect)('RenderRight') }),
-            react_1.default.createElement(FieldIcon_1.FieldIcon, { icon: icons_1.ChevronDownIcon, className: (0, classnames_1.classnames)((0, index_1.cnSelect)('RenderRight'), (0, index_1.cnSelect)('DropDownIcon', { open: open })) }),
-            react_1.default.createElement(Fieldset_1.Fieldset, { className: (0, index_1.cnSelect)('Fieldset') })),
+            react_1.default.createElement(SelectInputRenderRight_1.SelectInputRenderRight, null),
+            react_1.default.createElement(Fieldset_1.Fieldset, { className: (0, classNames_1.cnSelect)('Fieldset') })),
         react_1.default.createElement(FieldHint_1.FieldHint, tslib_1.__assign({}, hintProps), hint)));
 });
 exports.SelectInput.displayName = 'SelectInput';

package/__inner__/cjs/components/Select/components/SelectInput/types.d.ts

@@ -1,10 +1,7 @@
 import type { ComponentPropsWithRef, ComponentRef, ReactNode, Ref } from 'react';
 import type { ExtendableComponentPropsWithRef } from '../../../../types/ExtendableComponentPropsWithRef';
-import type { FormElementSizeVariant } from '../../../../types/FormElementSizeVariant';
 import type { FieldHintProps } from '../../../FieldHint';
-import type { FieldIconProps } from '../../../FieldIcon';
 import type { FieldLabelProps } from '../../../FieldLabel';
-export type SelectInputSizeVariant = FormElementSizeVariant;
 type LabelProps = FieldLabelProps;
 type HintProps = FieldHintProps;
 type InputProps = ComponentPropsWithRef<'input'> & {
@@ -46,31 +43,14 @@ export type SelectInputProps = ExtendableComponentPropsWithRef<{
     name?: string;
     /** Лейбл */
     label?: string;
-    /** Размер компонента */
-    size?: SelectInputSizeVariant;
     /** Подсказка. Отображается, когда вариант не выбран */
     placeholder?: string;
     /** Если `true` устанавливает автофокус */
     autoFocus?: boolean;
-    /** Если `true` переводит поле в состояние ошибки */
-    error?: boolean;
-    /** Если `true` растягивает поле на всю ширину */
-    fullWidth?: boolean;
     /** Дополнительное описание к полю */
     hint?: string | null | undefined;
-    /** Если `true` делает элемент неактивным */
-    disabled?: boolean;
-    /** Если `true` делает элемент обязательным к заполнению */
-    required?: boolean;
     /** Если `true` отключает обводку */
     disableStroke?: boolean;
-    /** Если `true` предотвращает сокращение текста в значении и
-     * задает гибкую высоту контейнера компонента */
-    multiline?: boolean;
-    /** Текст или иконка слева */
-    renderLeft?: FieldIconProps['icon'];
-    /** Текст или иконка справа */
-    renderRight?: FieldIconProps['icon'];
     /** Значение для отображения */
     renderedValue?: ReactNode;
     /** Выбранное значение */
@@ -87,8 +67,6 @@ export type SelectInputProps = ExtendableComponentPropsWithRef<{
     bodyProps?: BodyProps;
     /** Cвойства FieldHint */
     hintProps?: Omit<HintProps, 'children'>;
-    /** Признак раскрытого списка */
-    open?: boolean;
     /** Идентификатор компонента для тестов */
     'data-testid'?: string;
     /** Содержимое компонента */

package/__inner__/cjs/components/Select/components/SelectInputContextConsumer/SelectInputContextConsumer.js

@@ -4,7 +4,7 @@ exports.SelectInputContextConsumer = void 0;
 var tslib_1 = require("tslib");
 var react_1 = tslib_1.__importDefault(require("react"));
 var FieldControl_1 = require("../../../FieldControl");
-var index_1 = require("../../index");
+var classNames_1 = require("../../classNames");
 var SelectInputContextConsumer = function (_a) {
     var id = _a.id, name = _a.name, _b = _a.value, valueProp = _b === void 0 ? '' : _b, placeholderProp = _a.placeholder, defaultValue = _a.defaultValue, inputProps = _a.inputProps, inputRef = _a.inputRef, fieldRef = _a.fieldRef, fieldProps = _a.fieldProps, renderedValue = _a.renderedValue;
     var context = (0, FieldControl_1.useFieldControl)();
@@ -13,9 +13,9 @@ var SelectInputContextConsumer = function (_a) {
     var hasLabel = !!label;
     var placeholder = (focused || !hasLabel) && !valueProp && (react_1.default.createElement("span", null, placeholderProp));
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("div", tslib_1.__assign({}, fieldProps, { className: (0, index_1.cnSelect)('Field', { filled: filled, asPlaceholder: !!placeholder }, [
+        react_1.default.createElement("div", tslib_1.__assign({}, fieldProps, { className: (0, classNames_1.cnSelect)('Field', { filled: filled, asPlaceholder: !!placeholder }, [
                 fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.className,
             ]), ref: fieldRef }), placeholder || renderedValue),
-        react_1.default.createElement("input", tslib_1.__assign({ id: id, name: name, defaultValue: defaultValue, value: valueProp, disabled: disabled, required: required, tabIndex: -1, "aria-hidden": true, readOnly: true }, inputProps, { className: (0, index_1.cnSelect)('Input', [inputProps === null || inputProps === void 0 ? void 0 : inputProps.className]), ref: inputRef }))));
+        react_1.default.createElement("input", tslib_1.__assign({ id: id, name: name, defaultValue: defaultValue, value: valueProp, disabled: disabled, required: required, tabIndex: -1, "aria-hidden": true, readOnly: true }, inputProps, { className: (0, classNames_1.cnSelect)('Input', [inputProps === null || inputProps === void 0 ? void 0 : inputProps.className]), ref: inputRef }))));
 };
 exports.SelectInputContextConsumer = SelectInputContextConsumer;

package/__inner__/cjs/components/Select/components/SelectInputRenderRight/SelectInputRenderRight.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const SelectInputRenderRight: () => React.JSX.Element;

package/__inner__/cjs/components/Select/components/SelectInputRenderRight/SelectInputRenderRight.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectInputRenderRight = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importDefault(require("react"));
+var classnames_1 = require("@bem-react/classnames");
+var icons_1 = require("@ozen-ui/icons");
+var FieldControl_1 = require("../../../FieldControl");
+var FieldIcon_1 = require("../../../FieldIcon");
+var IconButtonNext_1 = require("../../../IconButtonNext");
+var classNames_1 = require("../../classNames");
+var SelectContext_1 = require("../../SelectContext");
+var SelectInputRenderRight = function () {
+    var _a = tslib_1.__read((0, FieldControl_1.useFieldControl)(), 1), _b = _a[0], focused = _b.focused, hovered = _b.hovered;
+    var _c = (0, SelectContext_1.useSelectContext)(), hasValue = _c.hasValue, open = _c.open, onClear = _c.onClear, renderRight = _c.renderRight, clearText = _c.clearText, renderRightLayout = _c.renderRightLayout, showClearButton = _c.showClearButton, size = _c.size;
+    var isVisibleClearButton = !!(hovered || open || focused) && hasValue;
+    var clearButton = (react_1.default.createElement(IconButtonNext_1.IconButton, { key: "clear", tabIndex: -1, size: size, variant: "function", icon: icons_1.CrossIcon, title: clearText, "aria-label": clearText, onClick: function (event) {
+            event.preventDefault();
+            event.stopPropagation();
+            onClear === null || onClear === void 0 ? void 0 : onClear(event);
+        }, className: (0, classnames_1.classnames)((0, classNames_1.cnSelect)('RenderRight'), (0, classNames_1.cnSelect)('ClearIcon', {
+            visibility: isVisibleClearButton,
+        })), compressed: true }));
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        showClearButton && !isVisibleClearButton && clearButton,
+        renderRightLayout.map(function (element) {
+            if (element === 'suffix') {
+                return (react_1.default.createElement(FieldIcon_1.FieldIcon, { key: element, icon: renderRight, className: (0, classnames_1.classnames)((0, classNames_1.cnSelect)('RenderRight', { nonInteractive: true }), (0, classNames_1.cnSelect)('Suffix')) }));
+            }
+            if (element === 'clear') {
+                if (!isVisibleClearButton || !showClearButton) {
+                    return null;
+                }
+                return clearButton;
+            }
+            if (element === 'chevron') {
+                return (react_1.default.createElement(FieldIcon_1.FieldIcon, { key: element, icon: icons_1.ChevronDownIcon, className: (0, classnames_1.classnames)((0, classNames_1.cnSelect)('RenderRight', { nonInteractive: true }), (0, classNames_1.cnSelect)('DropDownIcon', { open: open })) }));
+            }
+            throw new Error("\u042D\u043B\u0435\u043C\u0435\u043D\u0442 \"".concat(element, "\" \u043D\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0432 renderRight."));
+        })));
+};
+exports.SelectInputRenderRight = SelectInputRenderRight;

package/__inner__/cjs/components/Select/components/SelectInputRenderRight/index.d.ts

@@ -0,0 +1 @@
+export * from './SelectInputRenderRight';

package/__inner__/cjs/components/Select/components/SelectInputRenderRight/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./SelectInputRenderRight"), exports);

package/__inner__/cjs/components/Select/components/index.d.ts

@@ -1 +1,2 @@
 export * from './SelectInput';
+export * from './SelectInputRenderRight';

package/__inner__/cjs/components/Select/components/index.js

@@ -2,3 +2,4 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./SelectInput"), exports);
+tslib_1.__exportStar(require("./SelectInputRenderRight"), exports);

package/__inner__/cjs/components/Select/constants.d.ts

@@ -5,3 +5,6 @@ export declare const SELECT_DEFAULT_REQUIRED = false;
 export declare const SELECT_DEFAULT_MULTILINE = false;
 export declare const SELECT_DEFAULT_DEFAULT_OPEN = false;
 export declare const SELECT_DEFAULT_SIZE = "m";
+export declare const SELECT_DEFAULT_ERROR = false;
+export declare const SELECT_DEFAULT_RENDER_RIGHT_LAYOUT: ("clear" | "suffix" | "chevron")[];
+export declare const SELECT_DEFAULT_SHOW_CLEAR_BUTTON = false;

package/__inner__/cjs/components/Select/constants.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SELECT_DEFAULT_SIZE = exports.SELECT_DEFAULT_DEFAULT_OPEN = exports.SELECT_DEFAULT_MULTILINE = exports.SELECT_DEFAULT_REQUIRED = exports.SELECT_DEFAULT_DISABLED = exports.SELECT_DEFAULT_FULL_WIDTH = exports.SELECT_DEFAULT_AUTO_FOCUS = void 0;
+exports.SELECT_DEFAULT_SHOW_CLEAR_BUTTON = exports.SELECT_DEFAULT_RENDER_RIGHT_LAYOUT = exports.SELECT_DEFAULT_ERROR = exports.SELECT_DEFAULT_SIZE = exports.SELECT_DEFAULT_DEFAULT_OPEN = exports.SELECT_DEFAULT_MULTILINE = exports.SELECT_DEFAULT_REQUIRED = exports.SELECT_DEFAULT_DISABLED = exports.SELECT_DEFAULT_FULL_WIDTH = exports.SELECT_DEFAULT_AUTO_FOCUS = void 0;
 exports.SELECT_DEFAULT_AUTO_FOCUS = false;
 exports.SELECT_DEFAULT_FULL_WIDTH = false;
 exports.SELECT_DEFAULT_DISABLED = false;
@@ -8,3 +8,10 @@ exports.SELECT_DEFAULT_REQUIRED = false;
 exports.SELECT_DEFAULT_MULTILINE = false;
 exports.SELECT_DEFAULT_DEFAULT_OPEN = false;
 exports.SELECT_DEFAULT_SIZE = 'm';
+exports.SELECT_DEFAULT_ERROR = false;
+exports.SELECT_DEFAULT_RENDER_RIGHT_LAYOUT = [
+    'suffix',
+    'clear',
+    'chevron',
+];
+exports.SELECT_DEFAULT_SHOW_CLEAR_BUTTON = false;

package/__inner__/cjs/components/Select/entities/index.d.ts

@@ -0,0 +1,2 @@
+export * from './onClear';
+export * from './render';

package/__inner__/cjs/components/Select/entities/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./onClear"), exports);
+tslib_1.__exportStar(require("./render"), exports);

package/__inner__/cjs/components/Select/entities/onClear.d.ts

@@ -0,0 +1,2 @@
+import type { MouseEvent } from 'react';
+export type SelectOnClear = (event: MouseEvent<HTMLElement>) => void;

package/__inner__/cjs/components/Select/entities/onClear.js

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

package/__inner__/cjs/components/Select/entities/render.d.ts

@@ -0,0 +1,6 @@
+import type { FieldIconProps } from '../../FieldIcon';
+export declare const selectRenderRightElement: readonly ["suffix", "clear", "chevron"];
+export type SelectRenderRightElement = (typeof selectRenderRightElement)[number];
+export type SelectRenderRightLayout = SelectRenderRightElement[];
+export type SelectRenderLeft = FieldIconProps['icon'];
+export type SelectRenderRight = FieldIconProps['icon'];

package/__inner__/cjs/components/Select/entities/render.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.selectRenderRightElement = void 0;
+exports.selectRenderRightElement = ['suffix', 'clear', 'chevron'];

package/__inner__/cjs/components/Select/index.d.ts

@@ -1,4 +1,5 @@
 export { DataListOption as Option } from '../DataList';
 export { ListItemText as OptionItemText, ListItemIcon as OptionItemIcon, } from '../List';
+export * from './classNames';
 export * from './Select';
 export * from './types';

package/__inner__/cjs/components/Select/index.js

@@ -7,5 +7,6 @@ Object.defineProperty(exports, "Option", { enumerable: true, get: function () {
 var List_1 = require("../List");
 Object.defineProperty(exports, "OptionItemText", { enumerable: true, get: function () { return List_1.ListItemText; } });
 Object.defineProperty(exports, "OptionItemIcon", { enumerable: true, get: function () { return List_1.ListItemIcon; } });
+tslib_1.__exportStar(require("./classNames"), exports);
 tslib_1.__exportStar(require("./Select"), exports);
 tslib_1.__exportStar(require("./types"), exports);