@ozen-ui/kit 0.75.0 → 0.76.0

package/StepperVertical/package.json

@@ -0,0 +1,5 @@
+{
+	"main": "../__inner__/cjs/components/StepperVertical/index.js",
+	"module": "../__inner__/esm/components/StepperVertical/index.js",
+	"types": "../__inner__/esm/components/StepperVertical/index.d.ts"
+}

package/__inner__/cjs/components/Autocomplete/helper.d.ts

@@ -9,7 +9,7 @@ export declare function withDefaultGetters<OPTION>(props: AutocompleteProps<OPTI
     defaultValue?: import("./types").AutocompletePropValue<OPTION>;
     open?: boolean;
     defaultOpen?: boolean;
-    onChange?: ((e: import("react").SyntheticEvent | KeyboardEvent, value: OPTION | null) => void) | undefined;
+    onChange?: ((e: import("react").SyntheticEvent | KeyboardEvent | MouseEvent, value: OPTION | null) => void) | undefined;
     inputValue?: string;
     onInputChange?: (e: import("react").ChangeEvent<HTMLInputElement> | null, value: string) => void;
     renderInput?: import("./types").AutocompleteRenderInput;

package/__inner__/cjs/components/Autocomplete/types.d.ts

@@ -35,7 +35,7 @@ export type AutocompleteProps<OPTION = AutocompleteDefaultOption> = {
     /** Состояние открытие по умолчанию (неконтролируемый компонент) */
     defaultOpen?: boolean;
     /** Функция обратного вызова, которая будет вызвана при выборе значения */
-    onChange?: (e: SyntheticEvent | KeyboardEvent, value: OPTION | null) => void;
+    onChange?: (e: SyntheticEvent | KeyboardEvent | MouseEvent, value: OPTION | null) => void;
     /** Введённое значение в текстовом поле */
     inputValue?: string;
     /** Функция обратного вызова, которая будет вызвана при вводе значения с клавиатуры */

package/__inner__/cjs/components/DataList/types.d.ts

@@ -12,7 +12,7 @@ export type DataListPayload<MULTIPLE extends boolean> = {
     name?: string;
     value: DataListSelected<MULTIPLE>;
 };
-export type DataListOnSelect<MULTIPLE extends boolean> = (event: SyntheticEvent | KeyboardEvent, payload: DataListPayload<MULTIPLE>) => void;
+export type DataListOnSelect<MULTIPLE extends boolean> = (event: SyntheticEvent | KeyboardEvent | MouseEvent, payload: DataListPayload<MULTIPLE>) => void;
 export type DataListBaseProps<MULTIPLE extends boolean = false> = {
     /** Имя списка */
     name?: string;

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);

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

@@ -1,13 +1,14 @@
 import type { ReactElement, ReactNode, SyntheticEvent } from 'react';
-import type { ExtendableComponentPropsWithRef } from '../../types/ExtendableComponentPropsWithRef';
-import type { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
+import type { ExtendableComponentPropsWithRef } from '../../types';
 import type { WithDisplayName } from '../../types/react';
 import type { DataListBaseProps, DataListOptionProps, DataListSelected } from '../DataList';
 import type { SelectInputProps, SelectInputRef } from './components';
-export type SelectPropSize = FormElementSizeVariant;
+import type { SelectOnClear, SelectRenderLeft, SelectRenderRight, SelectRenderRightLayout } from './entities';
+export declare const selectSizeVariant: readonly ["2xs", "xs", "s", "m", "l"];
+export type SelectPropSize = (typeof selectSizeVariant)[number];
 export type SelectLabel<MULTIPLE extends boolean = false> = (MULTIPLE extends true ? DataListOptionProps['label'][] : DataListOptionProps['label']) | undefined;
 export type SelectPropValue<MULTIPLE extends boolean = false> = DataListSelected<MULTIPLE>;
-export type SelectPropOnChange<MULTIPLE extends boolean = false> = (value: SelectPropValue<MULTIPLE>, e: SyntheticEvent | KeyboardEvent) => void;
+export type SelectPropOnChange<MULTIPLE extends boolean = false> = (value: SelectPropValue<MULTIPLE>, e: SyntheticEvent | KeyboardEvent | MouseEvent) => void;
 export type SelectedOption<MULTIPLE extends boolean = false> = {
     label?: SelectLabel<MULTIPLE>;
     value?: SelectPropValue<MULTIPLE>;
@@ -60,6 +61,30 @@ export type SelectProps<MULTIPLE extends boolean = false> = ExtendableComponentP
     renderValue?: SelectPropRenderValue<MULTIPLE>;
     /** Содержимое компонента */
     children?: ReactNode;
+    /** Layout правой части инпута.
+     * Определяет порядок и наличие элементов */
+    renderRightLayout?: SelectRenderRightLayout;
+    /** Функция обратного вызова, которая вызывается при очистке значения поля */
+    onClear?: SelectOnClear;
+    /** Текст для кнопки очистки поля */
+    clearText?: string;
+    /** Если `true`, то отображает кнопку закрытия */
+    showClearButton?: boolean;
+    /** Текст или иконка слева */
+    renderLeft?: SelectRenderLeft;
+    /** Текст или иконка справа */
+    renderRight?: SelectRenderRight;
+    /** Если `true` растягивает поле на всю ширину */
+    fullWidth?: boolean;
+    /** Если `true` предотвращает сокращение текста в значении и
+     * задает гибкую высоту контейнера компонента */
+    multiline?: boolean;
+    /** Если `true` делает элемент неактивным */
+    disabled?: boolean;
+    /** Если `true` делает элемент обязательным к заполнению */
+    required?: boolean;
+    /** Если `true` переводит поле в состояние ошибки */
+    error?: boolean;
     /** Свойства компонента DataList */
     dataListProps?: Partial<Omit<DataListBaseProps<MULTIPLE>, 'onClose' | 'open' | 'anchorRef' | 'multiple' | 'selected' | 'onSelect'>>;
     /** Функция обратного вызова, которая будет вызвана когда компонент запрашивает закрытие */
@@ -70,6 +95,6 @@ export type SelectProps<MULTIPLE extends boolean = false> = ExtendableComponentP
     multiple?: MULTIPLE;
     /** Идентификатор компонента для тестов */
     'data-testid'?: string;
-} & Pick<SelectInputProps, 'id' | 'name' | 'label' | 'placeholder' | 'disabled' | 'required' | 'disableStroke' | 'error' | 'hint' | 'fullWidth' | 'renderLeft' | 'renderRight' | 'multiline' | 'inputProps' | 'labelProps' | 'hintProps' | 'bodyProps' | 'inputRef' | 'labelRef' | 'bodyRef'> & SelectPropsDeprecated<MULTIPLE>, 'div'>;
+} & Pick<SelectInputProps, 'id' | 'name' | 'label' | 'placeholder' | 'disableStroke' | 'hint' | 'inputProps' | 'labelProps' | 'hintProps' | 'bodyProps' | 'inputRef' | 'labelRef' | 'bodyRef'> & SelectPropsDeprecated<MULTIPLE>, 'div'>;
 export type SelectComponent = WithDisplayName<(<MULTIPLE extends boolean = false>(props: SelectProps<MULTIPLE>) => ReactElement | null)>;
 export {};

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

@@ -1,2 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.selectSizeVariant = void 0;
+var types_1 = require("../../types");
+exports.selectSizeVariant = types_1.formElementSizeVariant;

package/__inner__/cjs/locale/locale.js

@@ -104,6 +104,9 @@ exports.ruRU = {
                 return parts.join('.');
             },
         },
+        Select: {
+            clearText: 'Очистить',
+        },
     },
 };
 exports.kkKZ = {
@@ -208,6 +211,9 @@ exports.kkKZ = {
                 return parts.join('.');
             },
         },
+        Select: {
+            clearText: 'Тазалау',
+        },
     },
 };
 exports.enUS = {
@@ -313,5 +319,8 @@ exports.enUS = {
                 return parts.join('.');
             },
         },
+        Select: {
+            clearText: 'Clear',
+        },
     },
 };

package/__inner__/cjs/utils/array/generatePermutations/generatePermutations.d.ts

@@ -0,0 +1 @@
+export declare const generatePermutations: <Item>(array: Item[] | Readonly<Item[]>, withSubsetSizes?: boolean) => Item[][];