@ozen-ui/kit 0.74.0 → 0.76.0

package/__inner__/esm/components/DatePicker/utils/parseDateString/parseDateString.js

@@ -0,0 +1,62 @@
+import { isNotNil, isValidDate } from '../../../../utils';
+export var parseDateString = function (value, steps) {
+    if (!isNotNil(value)) {
+        return null;
+    }
+    if (value === '') {
+        return null;
+    }
+    var hasYearsSteps = steps.includes('years');
+    var hasMonthsSteps = steps.includes('months');
+    var hasDaysSteps = steps.includes('days');
+    var splitted = value.split('.');
+    var day;
+    var month;
+    var year;
+    var offset = 0;
+    if (hasDaysSteps) {
+        day = splitted[offset];
+        offset += 1;
+    }
+    if (hasMonthsSteps) {
+        month = splitted[offset];
+        offset += 1;
+    }
+    if (hasYearsSteps) {
+        year = splitted[offset];
+    }
+    var parts = [];
+    if (hasYearsSteps) {
+        parts.push(year);
+    }
+    else {
+        var now = new Date();
+        parts.push(now.getFullYear().toString());
+    }
+    if (hasMonthsSteps) {
+        parts.push(month);
+    }
+    else {
+        // 3 месяц для кейса, где пользователь вводит 31 день месяца
+        parts.push('03');
+    }
+    if (hasDaysSteps) {
+        parts.push(day);
+    }
+    else {
+        parts.push('01');
+    }
+    var filteredParts = parts.filter(function (part) { return part !== undefined; });
+    if (filteredParts.length !== 3) {
+        return null;
+    }
+    var stringDate = filteredParts.join('-');
+    if (stringDate.length !== 10 || !isValidDate(stringDate)) {
+        return null;
+    }
+    return {
+        year: parts[0],
+        month: parts[1],
+        day: parts[2],
+    };
+};

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

@@ -1,19 +1,15 @@
-import { useEffect } from 'react';
 import { logger } from '@ozen-ui/logger';
-import { isDev } from '../../../constants/environment';
+import { useDevEffect } from '../../../hooks/useDevEffect';
 export var useListCardItemRatio = function (contentTrailingRatio) {
-    if (isDev) {
-        // eslint-disable-next-line react-hooks/rules-of-hooks
-        useEffect(function () {
-            if (contentTrailingRatio < 0) {
-                logger.error('Свойство «contentTrailingRatio» у компонента ListCardItem не может быть меньше 0');
-                return;
-            }
-            if (contentTrailingRatio > 1) {
-                logger.error('Свойство «contentTrailingRatio» у компонента ListCardItem не может быть больше 1');
-            }
-        }, [contentTrailingRatio]);
-    }
+    useDevEffect(function () {
+        if (contentTrailingRatio < 0) {
+            logger.error('Свойство «contentTrailingRatio» у компонента ListCardItem не может быть меньше 0');
+            return;
+        }
+        if (contentTrailingRatio > 1) {
+            logger.error('Свойство «contentTrailingRatio» у компонента ListCardItem не может быть больше 1');
+        }
+    }, [contentTrailingRatio]);
     var contentRatio = contentTrailingRatio * 100;
     var trailingRatio = 100 - contentRatio;
     return { content: contentRatio, trailing: trailingRatio };

package/__inner__/esm/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__/esm/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__/esm/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__/esm/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__/esm/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__/esm/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__/esm/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__/esm/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__/esm/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__/esm/components/Select/Select.js

@@ -1,39 +1,46 @@
 import { __assign, __read, __rest, __spreadArray } from "tslib";
 import './Select.css';
 import React, { Children, forwardRef, isValidElement, useEffect, useRef, } from 'react';
+import { logger } from '@ozen-ui/logger';
 import { isFragment } from 'react-is';
 import { useControlled } from '../../hooks/useControlled';
+import { useDevEffect } from '../../hooks/useDevEffect';
 import { useMultiRef } from '../../hooks/useMultiRef';
 import { useThemeProps } from '../../hooks/useThemeProps';
-import { cn } from '../../utils/classname';
+import { isArray, isNotNil } from '../../utils';
 import { isKeys } from '../../utils/isKeys';
 import { isString } from '../../utils/isString';
 import { DataList, DataListOption } from '../DataList';
 import { SelectInput } from './components';
-import { SELECT_DEFAULT_AUTO_FOCUS, SELECT_DEFAULT_DEFAULT_OPEN, SELECT_DEFAULT_DISABLED, SELECT_DEFAULT_FULL_WIDTH, SELECT_DEFAULT_MULTILINE, SELECT_DEFAULT_REQUIRED, SELECT_DEFAULT_SIZE, } from './constants';
+import { SELECT_DEFAULT_AUTO_FOCUS, SELECT_DEFAULT_DEFAULT_OPEN, SELECT_DEFAULT_DISABLED, SELECT_DEFAULT_FULL_WIDTH, SELECT_DEFAULT_RENDER_RIGHT_LAYOUT, SELECT_DEFAULT_MULTILINE, SELECT_DEFAULT_REQUIRED, SELECT_DEFAULT_SIZE, SELECT_DEFAULT_SHOW_CLEAR_BUTTON, SELECT_DEFAULT_ERROR, } from './constants';
 import { isMultipleLabel, isMultipleParams, isNotMultipleLabel, isNotMultipleParams, } from './helpers';
-export var cnSelect = cn('Select');
+import { SelectContext } from './SelectContext';
 var SelectRender = function (inProps, ref) {
     var props = useThemeProps({
         props: inProps,
         name: 'Select',
     });
-    var _a = props.size, size = _a === void 0 ? SELECT_DEFAULT_SIZE : _a, _b = props.autoFocus, autoFocus = _b === void 0 ? SELECT_DEFAULT_AUTO_FOCUS : _b, _c = props.fullWidth, fullWidth = _c === void 0 ? SELECT_DEFAULT_FULL_WIDTH : _c, _d = props.disabled, disabled = _d === void 0 ? SELECT_DEFAULT_DISABLED : _d, _e = props.required, required = _e === void 0 ? SELECT_DEFAULT_REQUIRED : _e, _f = props.multiline, multiline = _f === void 0 ? SELECT_DEFAULT_MULTILINE : _f, _g = props.defaultOpen, defaultOpen = _g === void 0 ? 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 = __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 ? SELECT_DEFAULT_SIZE : _a, _b = props.autoFocus, autoFocus = _b === void 0 ? SELECT_DEFAULT_AUTO_FOCUS : _b, _c = props.fullWidth, fullWidth = _c === void 0 ? SELECT_DEFAULT_FULL_WIDTH : _c, _d = props.disabled, disabled = _d === void 0 ? SELECT_DEFAULT_DISABLED : _d, _e = props.required, required = _e === void 0 ? SELECT_DEFAULT_REQUIRED : _e, _f = props.multiline, multiline = _f === void 0 ? SELECT_DEFAULT_MULTILINE : _f, _g = props.defaultOpen, defaultOpen = _g === void 0 ? SELECT_DEFAULT_DEFAULT_OPEN : _g, _h = props.renderRightLayout, renderRightLayout = _h === void 0 ? 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 ? 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 ? SELECT_DEFAULT_ERROR : _k, other = __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"]);
+    useDevEffect(function () {
+        if (renderRightLayout.length !== new Set(renderRightLayout).size) {
+            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 = useRef(null);
     var bodyRef = useMultiRef([(bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.ref) || bodyRefProp, bodyInnerRef]);
     var dataListProps = dataListPropsProp || menuProps;
-    var _h = __read(useControlled({
+    var _l = __read(useControlled({
         value: valueProp,
         defaultValue: defaultValue,
         name: 'Select',
         state: 'value',
-    }), 2), valueState = _h[0], setValueState = _h[1];
-    var _j = __read(useControlled({
+    }), 2), valueState = _l[0], setValueState = _l[1];
+    var _m = __read(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 !isValidElement(child) || child.type !== DataListOption; };
     var resolvedChildren = isFragment(children)
@@ -122,8 +129,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 = isArray(valueState)
+        ? valueState.length > 0
+        : isNotNil(valueState);
     useEffect(function () {
         var _a;
         /** Устанавливает фокус на элементе контроля
@@ -138,8 +153,23 @@ var SelectRender = function (inProps, ref) {
         if (autoFocus)
             (_a = bodyInnerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     }, [autoFocus]);
-    return (React.createElement(React.Fragment, null,
-        React.createElement(SelectInput, __assign({ size: size, disabled: disabled, required: required, multiline: multiline, fullWidth: fullWidth }, other, { open: open, value: inputValue(), onClick: handleClick, onKeyDown: handleKeyDown, renderedValue: renderValue({
+    return (React.createElement(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.createElement(SelectInput, __assign({}, other, { value: inputValue(), onClick: handleClick, onKeyDown: handleKeyDown, renderedValue: renderValue({
                 label: currentLabel,
                 value: valueState,
             }), bodyProps: __assign(__assign({}, bodyProps), { ref: bodyRef }), ref: ref })),

package/__inner__/esm/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__/esm/components/Select/SelectContext.js

@@ -0,0 +1,25 @@
+import { useContext, createContext } from 'react';
+import { isDev } from '../../constants/environment';
+import { SELECT_DEFAULT_RENDER_RIGHT_LAYOUT, SELECT_DEFAULT_SIZE, SELECT_DEFAULT_DEFAULT_OPEN, SELECT_DEFAULT_DISABLED, SELECT_DEFAULT_SHOW_CLEAR_BUTTON, SELECT_DEFAULT_REQUIRED, SELECT_DEFAULT_MULTILINE, SELECT_DEFAULT_FULL_WIDTH, } from './constants';
+export var SelectContextDefaultValue = {
+    renderRightLayout: SELECT_DEFAULT_RENDER_RIGHT_LAYOUT,
+    disabled: SELECT_DEFAULT_DISABLED,
+    size: SELECT_DEFAULT_SIZE,
+    open: SELECT_DEFAULT_DEFAULT_OPEN,
+    hasValue: false,
+    onClear: function () { },
+    clearText: '',
+    renderLeft: undefined,
+    renderRight: undefined,
+    showClearButton: SELECT_DEFAULT_SHOW_CLEAR_BUTTON,
+    required: SELECT_DEFAULT_REQUIRED,
+    multiline: SELECT_DEFAULT_MULTILINE,
+    fullWidth: SELECT_DEFAULT_FULL_WIDTH,
+    error: false,
+};
+export var SelectContext = createContext(SelectContextDefaultValue);
+export var useSelectContext = function () { return useContext(SelectContext); };
+// Именованный провайдер
+if (isDev) {
+    SelectContext.displayName = 'SelectContext';
+}

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

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

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

@@ -0,0 +1,2 @@
+import { cn } from '../../utils';
+export var cnSelect = cn('Select');

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

@@ -1,20 +1,20 @@
 import { __assign, __read, __rest } from "tslib";
 import '../../Select.css';
 import React, { forwardRef, useCallback } from 'react';
-import { classnames } from '@bem-react/classnames';
-import { ChevronDownIcon } from '@ozen-ui/icons';
 import { useBoolean } from '../../../../hooks/useBoolean';
 import { FieldControl } from '../../../FieldControl';
 import { FieldHint } from '../../../FieldHint';
 import { FieldIcon } from '../../../FieldIcon';
 import { FieldLabel } from '../../../FieldLabel';
 import { Fieldset } from '../../../Fieldset';
-import { SELECT_DEFAULT_MULTILINE, SELECT_DEFAULT_SIZE } from '../../constants';
-import { cnSelect } from '../../index';
+import { cnSelect } from '../../classNames';
+import { useSelectContext } from '../../SelectContext';
 import { SelectInputContextConsumer } from '../SelectInputContextConsumer';
+import { SelectInputRenderRight } from '../SelectInputRenderRight';
 export var SelectInput = forwardRef(function (_a, ref) {
-    var _b = _a.size, size = _b === void 0 ? SELECT_DEFAULT_SIZE : _b, _c = _a.multiline, multiline = _c === void 0 ? 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 = __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 = __read(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 = __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 = 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 = __read(useBoolean(), 2), focused = _c[0], _d = _c[1], on = _d.on, off = _d.off;
     var filled = !!valueProp || valueProp === 0;
     var handleFocus = useCallback(function (e) {
         on();
@@ -31,8 +31,7 @@ export var SelectInput = forwardRef(function (_a, ref) {
                 React.createElement("div", { className: cnSelect('HiddenLabel'), "aria-hidden": true }, label),
                 React.createElement(FieldLabel, __assign({}, labelProps, { className: cnSelect('Label', [labelProps === null || labelProps === void 0 ? void 0 : labelProps.className]), ref: (labelProps === null || labelProps === void 0 ? void 0 : labelProps.ref) || labelRef }), label),
                 React.createElement(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.createElement(FieldIcon, { icon: renderRight, className: cnSelect('RenderRight') }),
-            React.createElement(FieldIcon, { icon: ChevronDownIcon, className: classnames(cnSelect('RenderRight'), cnSelect('DropDownIcon', { open: open })) }),
+            React.createElement(SelectInputRenderRight, null),
             React.createElement(Fieldset, { className: cnSelect('Fieldset') })),
         React.createElement(FieldHint, __assign({}, hintProps), hint)));
 });

package/__inner__/esm/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__/esm/components/Select/components/SelectInputContextConsumer/SelectInputContextConsumer.js

@@ -1,7 +1,7 @@
 import { __assign, __read } from "tslib";
 import React from 'react';
 import { useFieldControl } from '../../../FieldControl';
-import { cnSelect } from '../../index';
+import { cnSelect } from '../../classNames';
 export 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 = useFieldControl();

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

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

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

@@ -0,0 +1,38 @@
+import { __read } from "tslib";
+import React from 'react';
+import { classnames } from '@bem-react/classnames';
+import { ChevronDownIcon, CrossIcon } from '@ozen-ui/icons';
+import { useFieldControl } from '../../../FieldControl';
+import { FieldIcon } from '../../../FieldIcon';
+import { IconButton } from '../../../IconButtonNext';
+import { cnSelect } from '../../classNames';
+import { useSelectContext } from '../../SelectContext';
+export var SelectInputRenderRight = function () {
+    var _a = __read(useFieldControl(), 1), _b = _a[0], focused = _b.focused, hovered = _b.hovered;
+    var _c = 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.createElement(IconButton, { key: "clear", tabIndex: -1, size: size, variant: "function", icon: CrossIcon, title: clearText, "aria-label": clearText, onClick: function (event) {
+            event.preventDefault();
+            event.stopPropagation();
+            onClear === null || onClear === void 0 ? void 0 : onClear(event);
+        }, className: classnames(cnSelect('RenderRight'), cnSelect('ClearIcon', {
+            visibility: isVisibleClearButton,
+        })), compressed: true }));
+    return (React.createElement(React.Fragment, null,
+        showClearButton && !isVisibleClearButton && clearButton,
+        renderRightLayout.map(function (element) {
+            if (element === 'suffix') {
+                return (React.createElement(FieldIcon, { key: element, icon: renderRight, className: classnames(cnSelect('RenderRight', { nonInteractive: true }), cnSelect('Suffix')) }));
+            }
+            if (element === 'clear') {
+                if (!isVisibleClearButton || !showClearButton) {
+                    return null;
+                }
+                return clearButton;
+            }
+            if (element === 'chevron') {
+                return (React.createElement(FieldIcon, { key: element, icon: ChevronDownIcon, className: classnames(cnSelect('RenderRight', { nonInteractive: true }), 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."));
+        })));
+};

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

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

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

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

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

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

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

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

package/__inner__/esm/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__/esm/components/Select/constants.js

@@ -5,3 +5,10 @@ export var SELECT_DEFAULT_REQUIRED = false;
 export var SELECT_DEFAULT_MULTILINE = false;
 export var SELECT_DEFAULT_DEFAULT_OPEN = false;
 export var SELECT_DEFAULT_SIZE = 'm';
+export var SELECT_DEFAULT_ERROR = false;
+export var SELECT_DEFAULT_RENDER_RIGHT_LAYOUT = [
+    'suffix',
+    'clear',
+    'chevron',
+];
+export var SELECT_DEFAULT_SHOW_CLEAR_BUTTON = false;

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

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

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

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

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

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

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

@@ -0,0 +1 @@
+export {};

package/__inner__/esm/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__/esm/components/Select/entities/render.js

@@ -0,0 +1 @@
+export var selectRenderRightElement = ['suffix', 'clear', 'chevron'];

package/__inner__/esm/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__/esm/components/Select/index.js

@@ -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__/esm/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__/esm/components/Select/types.js

@@ -1 +1,2 @@
-export {};
+import { formElementSizeVariant } from '../../types';
+export var selectSizeVariant = formElementSizeVariant;