@consta/uikit 3.6.0 → 3.9.1

package/__internal__/src/components/SelectComponents/SelectContainer/SelectContainer.js

@@ -5,9 +5,9 @@ import { FieldLabel } from '../../FieldLabel/FieldLabel';
 import { cnSelect } from '../cnSelect';
 import { defaultPropForm, defaultPropSize, defaultPropView, } from '../types';
 export var SelectContainer = forwardRef(function (props, ref) {
-    var _a = props.size, size = _a === void 0 ? defaultPropSize : _a, _b = props.form, form = _b === void 0 ? defaultPropForm : _b, _c = props.view, view = _c === void 0 ? defaultPropView : _c, className = props.className, disabled = props.disabled, children = props.children, status = props.status, focused = props.focused, multiple = props.multiple, _d = props.labelPosition, labelPosition = _d === void 0 ? 'top' : _d, label = props.label, caption = props.caption, otherProps = __rest(props, ["size", "form", "view", "className", "disabled", "children", "status", "focused", "multiple", "labelPosition", "label", "caption"]);
+    var _a = props.size, size = _a === void 0 ? defaultPropSize : _a, _b = props.form, form = _b === void 0 ? defaultPropForm : _b, _c = props.view, view = _c === void 0 ? defaultPropView : _c, className = props.className, disabled = props.disabled, required = props.required, children = props.children, status = props.status, focused = props.focused, multiple = props.multiple, _d = props.labelPosition, labelPosition = _d === void 0 ? 'top' : _d, label = props.label, caption = props.caption, otherProps = __rest(props, ["size", "form", "view", "className", "disabled", "required", "children", "status", "focused", "multiple", "labelPosition", "label", "caption"]);
     return (React.createElement("div", __assign({ className: cnSelect({ labelPosition: labelPosition, size: size, view: view }, [className]) }, otherProps),
-        label && (React.createElement(FieldLabel, { className: cnSelect('Label'), size: size }, label)),
+        label && (React.createElement(FieldLabel, { required: required, className: cnSelect('Label', { labelPosition: labelPosition }), size: size }, label)),
         React.createElement("div", { className: cnSelect('Body') },
             React.createElement("div", { className: cnSelect('SelectContainer', {
                     view: view,

package/__internal__/src/components/SelectComponents/SelectDropdown/SelectDropdown.d.ts

@@ -23,6 +23,7 @@ declare type Props<ITEM, GROUP> = PropsWithJsxAttributes<{
     getGroupLabel?: (group: GROUP) => string;
     labelForCreate?: string;
     labelForNotFound?: string;
+    notFound?: boolean;
 }>;
 declare type SelectDropdown = <ITEM, GROUP>(props: Props<ITEM, GROUP>) => React.ReactElement | null;
 export declare const SelectDropdown: SelectDropdown;

package/__internal__/src/components/SelectComponents/SelectDropdown/SelectDropdown.js

@@ -15,7 +15,7 @@ export var defaultSelectDropdownPropForm = selectDropdownform[0];
 var cnSelectDropdown = cn('SelectDropdown');
 var cnSelectDropdownCssTransition = cnForCssTransition(cnSelectDropdown);
 export var SelectDropdown = function (props) {
-    var controlRef = props.controlRef, size = props.size, getOptionProps = props.getOptionProps, dropdownRef = props.dropdownRef, labelForCreate = props.labelForCreate, className = props.className, labelForNotFound = props.labelForNotFound, form = props.form, isOpen = props.isOpen, renderItem = props.renderItem, visibleItems = props.visibleItems, getGroupLabel = props.getGroupLabel;
+    var controlRef = props.controlRef, size = props.size, getOptionProps = props.getOptionProps, dropdownRef = props.dropdownRef, labelForCreate = props.labelForCreate, className = props.className, labelForNotFound = props.labelForNotFound, form = props.form, isOpen = props.isOpen, renderItem = props.renderItem, visibleItems = props.visibleItems, getGroupLabel = props.getGroupLabel, notFound = props.notFound;
     var getIndex = fabricIndex(-1);
     var indent = form === 'round' ? 'increased' : 'normal';
     return (React.createElement(CSSTransition, { "in": isOpen, unmountOnExit: true, appear: true, classNames: cnSelectDropdownCssTransition, timeout: 200 },
@@ -31,5 +31,5 @@ export var SelectDropdown = function (props) {
                             return (React.createElement(Fragment, { key: group.key + "-" + i }, renderItem(__assign({ item: item }, getOptionProps({ index: getIndex(), item: item })))));
                         })));
                 }),
-                visibleItems.length === 0 && (React.createElement(Text, { className: cnSelectDropdown('LabelForNotFound') }, labelForNotFound))))));
+                notFound && labelForNotFound && (React.createElement(Text, { className: cnSelectDropdown('LabelForNotFound') }, labelForNotFound))))));
 };

package/__internal__/src/components/Table/Header/TableHeader.js

@@ -58,6 +58,12 @@ export var TableHeader = function (_a) {
         };
         return column.filterable ? (React.createElement(TableFilterTooltip, { field: column.accessor, isOpened: visibleFilter === column.accessor, options: getOptionsForFilters(filters, column.accessor), values: selectedFilters[column.accessor].selected || [], onChange: handleTooltipSave, onToggle: handleFilterTogglerClick(column.accessor), className: cnTableHeader('Icon', { type: 'filter' }) }, FilterComponent && (React.createElement(FilterComponent, __assign({}, filterComponentProps, { onConfirm: handleFilterSave, filterValue: (_d = selectedFilters[column.accessor]) === null || _d === void 0 ? void 0 : _d.value, onCancel: handleFilterTogglerClick(column.accessor) }))))) : null;
     };
+    var control = function (column) {
+        if (column.control) {
+            return React.createElement("div", { className: cnTableHeader('Сontrol') }, column.control({ column: column }));
+        }
+        return null;
+    };
     return (React.createElement(React.Fragment, null,
         React.createElement("div", { className: cnTableHeader('Row', { withVerticalBorder: borderBetweenColumns }) }, headersWithMetaData.map(function (column, columnIdx) {
             var _a, _b, _c;
@@ -91,7 +97,8 @@ export var TableHeader = function (_a) {
                         verticalAlign: headerVerticalAlign
                     }) },
                     column.sortable && (React.createElement(Button, { size: "xs", iconSize: "s", view: "clear", onlyIcon: true, onClick: function () { return handleSortClick(column); }, iconLeft: getSortIcon(column), className: cnTableHeader('Icon', { type: 'sort' }) })),
-                    getFilterPopover(column))));
+                    getFilterPopover(column),
+                    control(column))));
         })),
         React.createElement("div", { className: cnTableHeader('ShadowWrapper'), style: tableHeaderStyle },
             React.createElement("div", { className: cnTableHeader('Shadow', { show: showHorizontalCellShadow && isStickyHeader }) }))));

package/__internal__/src/components/Table/Table.d.ts

@@ -3,7 +3,7 @@ import React from 'react';
 import { HorizontalAlign, VerticalAlign } from './Cell/TableCell';
 import { GetTagLabel } from './SelectedOptionsList/TableSelectedOptionsList';
 import { Filters, onSortBy, SelectedFilters } from './filtering';
-import { OrderType, Position } from './helpers';
+import { Header, OrderType, Position } from './helpers';
 export { TableTextFilter } from './TextFilter/TableTextFilter';
 export { TableFilterContainer } from './FilterContainer/TableFilterContainer';
 export { TableNumberFilter } from './NumberFilter/TableNumberFilter';
@@ -69,6 +69,9 @@ declare type GroupColumnAddition<T extends TableRow> = {
 } & {
     [K in keyof ColumnBase<T>]?: never;
 };
+export interface TableControl<T extends TableRow> {
+    column: Header<T> & ColumnMetaData;
+}
 export declare type TableColumn<T extends TableRow> = {
     title: React.ReactNode;
     align?: HorizontalAlign;
@@ -76,6 +79,7 @@ export declare type TableColumn<T extends TableRow> = {
     width?: ColumnWidth;
     mergeCells?: boolean;
     position?: Position;
+    control?: ({ column }: TableControl<T>) => React.ReactNode;
 } & (GroupColumnAddition<T> | SingleColumnAddition<T>);
 export declare type TableProps<T extends TableRow> = {
     columns: TableColumn<T>[];

package/__internal__/src/components/Table/TextFilter/TableTextFilter.js

@@ -36,6 +36,7 @@ export var TableTextFilter = function (_a) {
         filteredItems,
         checkboxGroupValue,
     ]);
+    var isSelected = useMemo(function () { return checkboxGroupValue === null || checkboxGroupValue === void 0 ? void 0 : checkboxGroupValue.length; }, [checkboxGroupValue]);
     return (React.createElement(TableFilterContainer, { title: title, onCancel: onCancel, onConfirm: confirmHandler },
         withSearch && (React.createElement(TextField, { value: searchValue, onChange: function (_a) {
                 var value = _a.value;
@@ -43,7 +44,7 @@ export var TableTextFilter = function (_a) {
             }, leftSide: IconSearch, size: "s", placeholder: "\u041D\u0430\u0439\u0442\u0438 \u0432 \u0441\u043F\u0438\u0441\u043A\u0435", width: "full", className: cnTextFilter('Searchbar') })),
         React.createElement("div", { className: cnTextFilter('Controls') },
             React.createElement(Button, { size: "m", form: "brick", label: "\u0412\u044B\u0431\u0440\u0430\u0442\u044C \u0432\u0441\u0435", view: "clear", onClick: setAll, disabled: !filteredItems.length || isAllSelected }),
-            React.createElement(Button, { size: "m", form: "brick", label: "\u0421\u0431\u0440\u043E\u0441\u0438\u0442\u044C", view: "clear", onClick: resetHandler, disabled: !filteredItems.length })),
+            React.createElement(Button, { size: "m", form: "brick", label: "\u0421\u0431\u0440\u043E\u0441\u0438\u0442\u044C", view: "clear", onClick: resetHandler, disabled: !filteredItems.length || !isSelected })),
         React.createElement("div", { className: cnTextFilter('Checkboxes') }, filteredItems.length ? (React.createElement(CheckboxGroup, { items: filteredItems, value: checkboxGroupValue, getLabel: function (item) { return item.name; }, onChange: function (_a) {
                 var value = _a.value;
                 setCheckboxGroupValue(value);

package/__internal__/src/components/Table/helpers.d.ts

@@ -44,6 +44,7 @@ export declare const transformColumns: <T extends TableRow>(columns: TableColumn
     width?: number | undefined;
     mergeCells?: boolean | undefined;
     position?: Position | undefined;
+    control?: (({ column }: import("./Table").TableControl<T>) => React.ReactNode) | undefined;
 } & {
     columns: TableColumn<T>[];
 } & { [K_1 in keyof import("./Table").ValueOf<{ [K in keyof T]: {
@@ -63,6 +64,7 @@ export declare const transformColumns: <T extends TableRow>(columns: TableColumn
     width?: number | undefined;
     mergeCells?: boolean | undefined;
     position?: Position | undefined;
+    control?: (({ column }: import("./Table").TableControl<T>) => React.ReactNode) | undefined;
 } & import("./Table").ValueOf<{ [K in keyof T]: {
     accessor: K extends string ? K : never;
     sortable?: boolean | undefined;

package/__internal__/src/components/TextField/TextField.css

@@ -1,5 +1,8 @@
 .TextField {
   --caption-margin-left: calc(var(--input-space) + var(--control-border-width));
+  --counter-button-icon-color: var(--color-control-typo-ghost);
+  --counter-button-background: transparent;
+  --clear-button-color: var(--color-control-typo-clear);
   position: relative;
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
@@ -103,6 +106,11 @@
     transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s, -webkit-box-shadow 0.15s;
   }
 
+  .TextField-InputContainer_disabled {
+      --counter-button-background: var(--color-control-bg-disable);
+      --counter-button-icon-color: var(--color-control-typo-disable);
+    }
+
   .TextField-InputContainer_view_clear,
     .TextField-InputContainer_view_clear:hover,
     .TextField-InputContainer_view_clear:focus {
@@ -170,6 +178,7 @@
 
   .TextField-InputContainer_view_default {
       --container-border-color: var(--color-control-bg-border-default);
+      overflow-x: hidden;
       padding: 0 var(--input-space);
       color: var(--color-control-typo-default);
       background: var(--color-control-bg-default);
@@ -255,6 +264,7 @@
         }
 
   .TextField-InputContainer_view_default.TextField-InputContainer_disabled {
+        --clear-button-color: var(--color-control-typo-disable);
         background: var(--color-control-bg-disable);
         border-color: var(--color-control-bg-border-disable);
         pointer-events: none;
@@ -369,6 +379,10 @@
         color: var(--color-typo-secondary);
       }
 
+  .TextField-InputContainer_type_number {
+      padding-right: 0;
+    }
+
   .TextField-InputContainer_type_textarea .TextField-Input {
         resize: none;
         display: block;
@@ -382,6 +396,67 @@
         line-height: var(--line-height-text-m);
       }
 
+  .TextField-Counter {
+    display: -webkit-inline-box;
+    display: -ms-inline-flexbox;
+    display: inline-flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+    width: var(--space-xl);
+    height: calc(var(--input-height) - (var(--control-border-width) * 2));
+  }
+
+  .TextField-CounterButton {
+    display: -webkit-inline-box;
+    display: -ms-inline-flexbox;
+    display: inline-flex;
+    overflow-y: hidden;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+    -webkit-box-flex: 1;
+        -ms-flex: 1;
+            flex: 1;
+    -webkit-box-pack: center;
+        -ms-flex-pack: center;
+            justify-content: center;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+    width: var(--space-xl);
+    margin: 0;
+    padding: 0;
+    color: var(--counter-button-icon-color);
+    background-color: var(--counter-button-background);
+    border: none;
+    cursor: pointer;
+    -webkit-transition: background-color 0.15s;
+    transition: background-color 0.15s;
+  }
+
+  .TextField-ClearButton {
+    height: calc(var(--input-height) - (var(--control-border-width) * 2));
+    margin: 0;
+    margin-left: var(--input-space);
+    padding: 0;
+    color: var(--clear-button-color);
+    background-color: transparent;
+    border: none;
+    cursor: pointer;
+  }
+
+  .TextField-ClearButton:hover {
+      --clear-button-color: var(--color-control-typo-clear-hover);
+    }
+
+  .TextField-ClearButtonIcon {
+    position: relative;
+    top: 1px;
+  }
+
   .TextField-Input {
     -webkit-box-flex: 1;
         -ms-flex: 1;
@@ -398,6 +473,16 @@
     font-size: var(--input-font-size);
   }
 
+  .TextField-Input::-webkit-outer-spin-button,
+    .TextField-Input::-webkit-inner-spin-button {
+      -webkit-appearance: none;
+      margin: 0;
+    }
+
+  .TextField-Input[type='number'] {
+      -moz-appearance: textfield;
+    }
+
   .TextField-Input:focus {
       outline: none;
     }

package/__internal__/src/components/TextField/TextField.js

@@ -3,6 +3,9 @@ import './TextField.css';
 import React, { forwardRef, useState } from 'react';
 import TextAreaAutoSize from 'react-textarea-autosize';
 import { useForkRef } from '../../hooks/useForkRef/useForkRef';
+import { IconClose } from '../../icons/IconClose/IconClose';
+import { IconSelect } from '../../icons/IconSelect/IconSelect';
+import { IconSelectOpen } from '../../icons/IconSelectOpen/IconSelectOpen';
 import { cn } from '../../utils/bem';
 import { getSizeByMap } from '../../utils/getSizeByMap';
 import { usePropsHandler } from '../EventInterceptor/usePropsHandler';
@@ -13,8 +16,9 @@ export var COMPONENT_NAME = 'TextField';
 export var cnTextField = cn(COMPONENT_NAME);
 export function TextFieldRender(props, ref) {
     var textFieldRef = React.useRef(null);
-    var _a = usePropsHandler(COMPONENT_NAME, props, textFieldRef), className = _a.className, _b = _a.type, type = _b === void 0 ? 'text' : _b, value = _a.value, onChange = _a.onChange, id = _a.id, name = _a.name, rows = _a.rows, cols = _a.cols, minRows = _a.minRows, maxRows = _a.maxRows, inputRef = _a.inputRef, maxLength = _a.maxLength, disabled = _a.disabled, _c = _a.size, size = _c === void 0 ? textFieldPropSizeDefault : _c, _d = _a.view, view = _d === void 0 ? textFieldPropViewDefault : _d, _e = _a.form, form = _e === void 0 ? textFieldPropFormDefault : _e, state = _a.state, status = _a.status, _f = _a.width, width = _f === void 0 ? textFieldPropWidthDefault : _f, onBlur = _a.onBlur, onFocus = _a.onFocus, _g = _a.autoFocus, autoFocus = _g === void 0 ? false : _g, placeholder = _a.placeholder, leftSide = _a.leftSide, rightSide = _a.rightSide, autoComplete = _a.autoComplete, max = _a.max, min = _a.min, readOnly = _a.readOnly, required = _a.required, step = _a.step, tabIndex = _a.tabIndex, ariaLabel = _a.ariaLabel, label = _a.label, _h = _a.labelPosition, labelPosition = _h === void 0 ? 'top' : _h, caption = _a.caption, iconSizeProp = _a.iconSize, otherProps = __rest(_a, ["className", "type", "value", "onChange", "id", "name", "rows", "cols", "minRows", "maxRows", "inputRef", "maxLength", "disabled", "size", "view", "form", "state", "status", "width", "onBlur", "onFocus", "autoFocus", "placeholder", "leftSide", "rightSide", "autoComplete", "max", "min", "readOnly", "required", "step", "tabIndex", "ariaLabel", "label", "labelPosition", "caption", "iconSize"]);
-    var _j = __read(useState(autoFocus), 2), focus = _j[0], setFocus = _j[1];
+    var inputRef = React.useRef(null);
+    var _a = usePropsHandler(COMPONENT_NAME, props, textFieldRef), className = _a.className, _b = _a.type, type = _b === void 0 ? 'text' : _b, value = _a.value, onChange = _a.onChange, id = _a.id, name = _a.name, rows = _a.rows, cols = _a.cols, minRows = _a.minRows, maxRows = _a.maxRows, inputRefProp = _a.inputRef, maxLength = _a.maxLength, disabled = _a.disabled, _c = _a.size, size = _c === void 0 ? textFieldPropSizeDefault : _c, _d = _a.view, view = _d === void 0 ? textFieldPropViewDefault : _d, _e = _a.form, form = _e === void 0 ? textFieldPropFormDefault : _e, state = _a.state, status = _a.status, _f = _a.width, width = _f === void 0 ? textFieldPropWidthDefault : _f, onBlur = _a.onBlur, onFocus = _a.onFocus, _g = _a.autoFocus, autoFocus = _g === void 0 ? false : _g, placeholder = _a.placeholder, leftSide = _a.leftSide, rightSide = _a.rightSide, autoComplete = _a.autoComplete, withClearButton = _a.withClearButton, max = _a.max, min = _a.min, readOnly = _a.readOnly, required = _a.required, _h = _a.step, step = _h === void 0 ? 1 : _h, tabIndex = _a.tabIndex, ariaLabel = _a.ariaLabel, label = _a.label, _j = _a.labelPosition, labelPosition = _j === void 0 ? 'top' : _j, caption = _a.caption, iconSizeProp = _a.iconSize, focused = _a.focused, otherProps = __rest(_a, ["className", "type", "value", "onChange", "id", "name", "rows", "cols", "minRows", "maxRows", "inputRef", "maxLength", "disabled", "size", "view", "form", "state", "status", "width", "onBlur", "onFocus", "autoFocus", "placeholder", "leftSide", "rightSide", "autoComplete", "withClearButton", "max", "min", "readOnly", "required", "step", "tabIndex", "ariaLabel", "label", "labelPosition", "caption", "iconSize", "focused"]);
+    var _k = __read(useState(autoFocus), 2), focus = _k[0], setFocus = _k[1];
     var textarea = type === 'textarea';
     var LeftIcon = leftSide;
     var RightIcon = rightSide;
@@ -56,19 +60,44 @@ export function TextFieldRender(props, ref) {
         cols: cols,
         minRows: minRows || rows,
         maxRows: maxRows || rows,
-        inputRef: inputRef === null
-            ? undefined
-            : inputRef
+        inputRef: useForkRef([inputRef, inputRefProp])
     };
     var inputProps = {
         type: type,
         max: max,
         min: min,
         step: step,
-        ref: inputRef
+        ref: useForkRef([inputRef, inputRefProp])
+    };
+    var handleClear = function (e) {
+        var _a;
+        onChange === null || onChange === void 0 ? void 0 : onChange({
+            e: e,
+            value: ''
+        });
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    };
+    var changeNumberValue = function (e, isIncrement) {
+        var _a;
+        if (isIncrement === void 0) { isIncrement = true; }
+        var currentValue = value || 0;
+        currentValue = isIncrement
+            ? Number(currentValue) + Number(step)
+            : Number(currentValue) - Number(step);
+        onChange === null || onChange === void 0 ? void 0 : onChange({
+            e: e,
+            value: currentValue.toFixed(Number((_a = 
+            /* Необходимо для того чтобы избежать ситуации, когда по нажатию
+            на кнопку прибавляется число с погрешностью.
+            Здесь мы берем разрядность дробной части шага и ограничиваем
+            результирующее число этой разрядностью */
+            Number(step)
+                .toString()
+                .split('.')[1]) === null || _a === void 0 ? void 0 : _a.length) || 0)
+        });
     };
     return (React.createElement("div", __assign({ className: cnTextField({ labelPosition: labelPosition, size: size, view: view, width: width }, [className]) }, otherProps),
-        label && (React.createElement(FieldLabel, { className: cnTextField('Label'), size: size }, label)),
+        label && (React.createElement(FieldLabel, { required: required, className: cnTextField('Label', { labelPosition: labelPosition }), size: size }, label)),
         React.createElement("div", { className: cnTextField('Body') },
             React.createElement("div", { className: cnTextField('InputContainer', {
                     view: view,
@@ -76,7 +105,7 @@ export function TextFieldRender(props, ref) {
                     status: status || state,
                     disabled: disabled,
                     type: type,
-                    focus: focus,
+                    focus: focus || focused,
                     withValue: !!value
                 }), ref: useForkRef([ref, textFieldRef]) },
                 LeftIcon && (React.createElement("div", { className: cnTextField('Side', {
@@ -84,7 +113,14 @@ export function TextFieldRender(props, ref) {
                         type: leftSideIsString ? 'string' : 'icon'
                     }), title: typeof leftSide === 'string' ? leftSide : undefined }, leftSideIsString ? (leftSide) : (React.createElement(LeftIcon, { className: cnTextField('Icon'), size: iconSize })))),
                 textarea ? (React.createElement(TextAreaAutoSize, __assign({}, commonProps, textareaProps))) : (React.createElement("input", __assign({}, commonProps, inputProps))),
-                RightIcon && (React.createElement("div", { className: cnTextField('Side', {
+                type === 'number' && (React.createElement("div", { className: cnTextField('Counter') },
+                    React.createElement("button", { onClick: function (e) { return changeNumberValue(e, true); }, type: "button", className: cnTextField('CounterButton') },
+                        React.createElement(IconSelectOpen, { size: "xs" })),
+                    React.createElement("button", { onClick: function (e) { return changeNumberValue(e, false); }, type: "button", className: cnTextField('CounterButton') },
+                        React.createElement(IconSelect, { size: "xs" })))),
+                value && withClearButton && type !== 'number' && (React.createElement("button", { type: "button", disabled: disabled, onClick: handleClear, className: cnTextField('ClearButton') },
+                    React.createElement(IconClose, { size: "xs", className: cnTextField('ClearButtonIcon') }))),
+                RightIcon && type !== 'number' && (React.createElement("div", { className: cnTextField('Side', {
                         position: 'right',
                         type: rightSideIsString ? 'string' : 'icon'
                     }), title: typeof rightSide === 'string' ? rightSide : undefined }, rightSideIsString ? (rightSide) : (React.createElement(RightIcon, { className: cnTextField('Icon'), size: iconSize }))))),

package/__internal__/src/components/TextField/helpers.d.ts

@@ -9,7 +9,7 @@ export declare type TextFieldPropSize = typeof textFieldPropSize[number];
 export declare const textFieldPropSizeDefault: TextFieldPropSize;
 export declare type TextFieldPropOnChange = (args: TextFieldOnChangeArguments) => void;
 export declare type TextFieldOnChangeArguments = {
-    e: React.ChangeEvent;
+    e: React.ChangeEvent | React.MouseEvent;
     id?: TextFieldPropId;
     name?: TextFieldPropName;
     value: TextFieldPropValue;
@@ -39,15 +39,20 @@ export declare type TextFieldPropsTextareaType<TYPE> = TYPE extends 'textarea' ?
     minRows?: never;
     maxRows?: never;
 };
+export declare type TextFieldPropRightSide<TYPE> = TYPE extends 'number' ? {
+    rightSide?: never;
+} : {
+    rightSide?: string | React.FC<IconProps>;
+};
 export declare type Props<TYPE extends string> = {
     className?: string;
     value?: TextFieldPropValue;
+    cols?: number;
     onChange?: TextFieldPropOnChange;
     id?: TextFieldPropId;
     name?: TextFieldPropName;
     type?: TYPE;
     disabled?: boolean;
-    cols?: number;
     maxLength?: number;
     size?: TextFieldPropSize;
     view?: TextFieldPropView;
@@ -61,6 +66,7 @@ export declare type Props<TYPE extends string> = {
     placeholder?: string;
     leftSide?: string | React.FC<IconProps>;
     rightSide?: string | React.FC<IconProps>;
+    withClearButton?: boolean;
     autoComplete?: TextFieldPropAutoComplete;
     max?: number | string;
     min?: number | string;
@@ -75,7 +81,8 @@ export declare type Props<TYPE extends string> = {
     label?: string;
     caption?: string;
     labelPosition?: 'top' | 'left';
-};
-export declare type TextFieldProps<TYPE extends string> = PropsWithHTMLAttributes<Props<TYPE> & TextFieldPropsTextareaType<TYPE>, HTMLDivElement>;
+    focused?: boolean;
+} & TextFieldPropsTextareaType<TYPE> & TextFieldPropRightSide<TYPE>;
+export declare type TextFieldProps<TYPE extends string> = PropsWithHTMLAttributes<Props<TYPE>, HTMLDivElement>;
 export declare type TextFieldComponent = <TYPE extends string>(props: TextFieldProps<TYPE> & React.RefAttributes<HTMLElement>) => React.ReactElement | null;
 export declare const sizeMap: Record<TextFieldPropSize, IconPropSize>;

package/__internal__/src/components/Timer/Timer.css

@@ -10,16 +10,33 @@
 
   .Timer_size_s {
       --timer-size: 16px;
+      --timer-font-size: var(--size-text-xs);
     }
 
   .Timer_size_m {
       --timer-size: 24px;
+      --timer-font-size: var(--size-text-xs);
+    }
+
+  .Timer_size_l {
+      --timer-size: 32px;
+      --timer-font-size: var(--size-text-m);
+    }
+
+  .Timer_size_xl {
+      --timer-size: 40px;
+      --timer-font-size: var(--size-text-l);
+    }
+
+  .Timer_size_2xl {
+      --timer-size: 48px;
+      --timer-font-size: var(--size-text-xl);
     }
 
   .Timer-Counter {
     width: 100%;
     color: var(--color-control-typo-ghost);
-    font-size: var(--size-text-xs);
+    font-size: var(--timer-font-size);
     font-weight: var(--font-weight-text-bold);
     line-height: var(--timer-size);
     text-align: center;

package/__internal__/src/components/Timer/Timer.d.ts

@@ -1,7 +1,7 @@
 import './Timer.css';
 import React from 'react';
 import { PropsWithJsxAttributes } from '../../utils/types/PropsWithJsxAttributes';
-export declare const timerPropsSize: readonly ["m", "s"];
+export declare const timerPropsSize: readonly ["m", "s", "l", "xl", "2xl"];
 export declare type TimerPropsSize = typeof timerPropsSize[number];
 export declare const timerPropsSizeDefault: TimerPropsSize;
 export declare type TimerProps = PropsWithJsxAttributes<{
@@ -13,7 +13,7 @@ export declare type TimerProps = PropsWithJsxAttributes<{
 }>;
 export declare const cnTimer: import("@bem-react/classname").ClassNameFormatter;
 export declare const Timer: React.ForwardRefExoticComponent<Pick<Pick<{
-    size?: "s" | "m" | undefined;
+    size?: "s" | "m" | "l" | "xl" | "2xl" | undefined;
     seconds?: number | undefined;
     progress?: number | undefined;
     animation?: boolean | undefined;

package/__internal__/src/components/Timer/Timer.js

@@ -3,12 +3,12 @@ import './Timer.css';
 import React from 'react';
 import { cn } from '../../utils/bem';
 import { ProgressSpin } from '../ProgressSpin/ProgressSpin';
-export var timerPropsSize = ['m', 's'];
+export var timerPropsSize = ['m', 's', 'l', 'xl', '2xl'];
 export var timerPropsSizeDefault = timerPropsSize[0];
 export var cnTimer = cn('Timer');
 export var Timer = React.forwardRef(function (props, ref) {
     var _a = props.seconds, seconds = _a === void 0 ? 0 : _a, _b = props.progress, progress = _b === void 0 ? 0 : _b, _c = props.size, size = _c === void 0 ? timerPropsSizeDefault : _c, className = props.className, animation = props.animation, otherProps = __rest(props, ["seconds", "progress", "size", "className", "animation"]);
     return (React.createElement("div", __assign({}, otherProps, { className: cnTimer({ size: size }, [className]), ref: ref }),
         React.createElement(ProgressSpin, { className: cnTimer('Progress'), size: size, progress: progress, animation: animation }),
-        size === 'm' && React.createElement("div", { className: cnTimer('Counter') }, seconds)));
+        size !== 's' && React.createElement("div", { className: cnTimer('Counter') }, seconds)));
 });

package/__internal__/src/components/UserSelect/UserSelect.js

@@ -19,7 +19,7 @@ function UserSelectRender(props, ref) {
     var controlInnerRef = useRef(null);
     var helperInputFakeElement = useRef(null);
     var controlRef = useRef(null);
-    var _a = withDefaultGetters(props), placeholder = _a.placeholder, onBlur = _a.onBlur, onFocus = _a.onFocus, items = _a.items, onChange = _a.onChange, value = _a.value, disabled = _a.disabled, ariaLabel = _a.ariaLabel, id = _a.id, _b = _a.dropdownRef, dropdownRef = _b === void 0 ? defaultDropdownRef : _b, _c = _a.form, form = _c === void 0 ? defaultPropForm : _c, _d = _a.view, view = _d === void 0 ? defaultPropView : _d, _e = _a.size, size = _e === void 0 ? defaultPropSize : _e, dropdownClassName = _a.dropdownClassName, name = _a.name, _f = _a.groups, groups = _f === void 0 ? [] : _f, getItemKey = _a.getItemKey, getItemLabel = _a.getItemLabel, getItemSubLabel = _a.getItemSubLabel, getItemAvatarUrl = _a.getItemAvatarUrl, getItemGroupKey = _a.getItemGroupKey, getItemDisabled = _a.getItemDisabled, getGroupKey = _a.getGroupKey, getGroupLabel = _a.getGroupLabel, renderItem = _a.renderItem, renderValueProp = _a.renderValue, onCreate = _a.onCreate, inputRefProp = _a.inputRef, _g = _a.labelForNotFound, labelForNotFound = _g === void 0 ? defaultlabelForNotFound : _g, _h = _a.labelForCreate, labelForCreate = _h === void 0 ? defaultlabelForCreate : _h, _j = _a.multiple, multiple = _j === void 0 ? false : _j, searchFunction = _a.searchFunction, restProps = __rest(_a, ["placeholder", "onBlur", "onFocus", "items", "onChange", "value", "disabled", "ariaLabel", "id", "dropdownRef", "form", "view", "size", "dropdownClassName", "name", "groups", "getItemKey", "getItemLabel", "getItemSubLabel", "getItemAvatarUrl", "getItemGroupKey", "getItemDisabled", "getGroupKey", "getGroupLabel", "renderItem", "renderValue", "onCreate", "inputRef", "labelForNotFound", "labelForCreate", "multiple", "searchFunction"]);
+    var _a = withDefaultGetters(props), placeholder = _a.placeholder, onBlur = _a.onBlur, onFocus = _a.onFocus, items = _a.items, onChange = _a.onChange, value = _a.value, disabled = _a.disabled, ariaLabel = _a.ariaLabel, id = _a.id, required = _a.required, _b = _a.dropdownRef, dropdownRef = _b === void 0 ? defaultDropdownRef : _b, _c = _a.form, form = _c === void 0 ? defaultPropForm : _c, _d = _a.view, view = _d === void 0 ? defaultPropView : _d, _e = _a.size, size = _e === void 0 ? defaultPropSize : _e, dropdownClassName = _a.dropdownClassName, name = _a.name, _f = _a.groups, groups = _f === void 0 ? [] : _f, getItemKey = _a.getItemKey, getItemLabel = _a.getItemLabel, getItemSubLabel = _a.getItemSubLabel, getItemAvatarUrl = _a.getItemAvatarUrl, getItemGroupKey = _a.getItemGroupKey, getItemDisabled = _a.getItemDisabled, getGroupKey = _a.getGroupKey, getGroupLabel = _a.getGroupLabel, renderItem = _a.renderItem, renderValueProp = _a.renderValue, onCreate = _a.onCreate, inputRefProp = _a.inputRef, _g = _a.labelForNotFound, labelForNotFound = _g === void 0 ? defaultlabelForNotFound : _g, _h = _a.labelForCreate, labelForCreate = _h === void 0 ? defaultlabelForCreate : _h, _j = _a.multiple, multiple = _j === void 0 ? false : _j, searchFunction = _a.searchFunction, restProps = __rest(_a, ["placeholder", "onBlur", "onFocus", "items", "onChange", "value", "disabled", "ariaLabel", "id", "required", "dropdownRef", "form", "view", "size", "dropdownClassName", "name", "groups", "getItemKey", "getItemLabel", "getItemSubLabel", "getItemAvatarUrl", "getItemGroupKey", "getItemDisabled", "getGroupKey", "getGroupLabel", "renderItem", "renderValue", "onCreate", "inputRef", "labelForNotFound", "labelForCreate", "multiple", "searchFunction"]);
     var searchFunctionDefault = function (item, searchValue) {
         var searchOfLabel = searchCompare(searchValue, getItemLabel(item));
         if (searchOfLabel) {
@@ -45,7 +45,7 @@ function UserSelectRender(props, ref) {
         onFocus: onFocus,
         onCreate: onCreate,
         searchFunction: searchFunction || searchFunctionDefault
-    }), getKeyProps = _k.getKeyProps, getOptionProps = _k.getOptionProps, isOpen = _k.isOpen, visibleItems = _k.visibleItems, isFocused = _k.isFocused, handleInputFocus = _k.handleInputFocus, handleInputBlur = _k.handleInputBlur, handleToggleDropdown = _k.handleToggleDropdown, inputRef = _k.inputRef, handleInputClick = _k.handleInputClick, handleInputChange = _k.handleInputChange, searchValue = _k.searchValue, clearValue = _k.clearValue, getHandleRemoveValue = _k.getHandleRemoveValue;
+    }), getKeyProps = _k.getKeyProps, getOptionProps = _k.getOptionProps, isOpen = _k.isOpen, visibleItems = _k.visibleItems, isFocused = _k.isFocused, handleInputFocus = _k.handleInputFocus, handleInputBlur = _k.handleInputBlur, handleToggleDropdown = _k.handleToggleDropdown, inputRef = _k.inputRef, handleInputClick = _k.handleInputClick, handleInputChange = _k.handleInputChange, searchValue = _k.searchValue, clearValue = _k.clearValue, getHandleRemoveValue = _k.getHandleRemoveValue, notFound = _k.notFound;
     var dropdownForm = getSelectDropdownForm(form);
     var renderItemDefault = function (props) {
         var item = props.item, active = props.active, hovered = props.hovered, onClick = props.onClick, onMouseEnter = props.onMouseEnter;
@@ -74,7 +74,7 @@ function UserSelectRender(props, ref) {
                     isUserSelect: true
                 }), value: searchValue, style: { width: width } }))));
     };
-    return (React.createElement(SelectContainer, __assign({ focused: isFocused, disabled: disabled, size: size, view: view, form: form, multiple: true, ref: ref }, restProps),
+    return (React.createElement(SelectContainer, __assign({ focused: isFocused, disabled: disabled, size: size, required: required, view: view, form: form, multiple: true, ref: ref }, restProps),
         React.createElement("div", { className: cnSelect('Control', { hasInput: true }), ref: controlRef, "aria-expanded": isOpen, "aria-haspopup": "listbox", id: id },
             React.createElement("div", { className: cnSelect('ControlInner'), onClick: handleInputClick, role: "button", ref: controlInnerRef, "aria-hidden": "true" },
                 React.createElement("div", { className: cnSelect('ControlValueContainer') }, multiple ? (React.createElement("div", { className: cnSelect('ControlValue', { isUserSelect: true }) }, renderControlValue())) : (renderControlValue()))),
@@ -84,7 +84,7 @@ function UserSelectRender(props, ref) {
                 React.createElement("span", { className: cnSelect('Delimiter') }),
                 React.createElement("button", { type: "button", className: cnSelect('IndicatorsDropdown'), tabIndex: -1, onClick: handleToggleDropdown },
                     React.createElement(IconSelect, { size: "xs", className: cnSelect('DropdownIndicatorIcon') })))),
-        React.createElement(SelectDropdown, { isOpen: isOpen, size: size, controlRef: controlRef, getOptionProps: getOptionProps, dropdownRef: dropdownRef, form: dropdownForm, className: dropdownClassName, renderItem: renderItem || renderItemDefault, getGroupLabel: getGroupLabel, visibleItems: visibleItems, labelForNotFound: labelForNotFound, labelForCreate: labelForCreate }),
+        React.createElement(SelectDropdown, { isOpen: isOpen, size: size, controlRef: controlRef, getOptionProps: getOptionProps, dropdownRef: dropdownRef, form: dropdownForm, className: dropdownClassName, renderItem: renderItem || renderItemDefault, getGroupLabel: getGroupLabel, visibleItems: visibleItems, labelForNotFound: labelForNotFound, labelForCreate: labelForCreate, notFound: notFound }),
         React.createElement("div", { className: cnSelect('HelperInputFakeElement'), ref: helperInputFakeElement }, searchValue)));
 }
 export var UserSelect = forwardRef(UserSelectRender);

package/__internal__/src/components/UserSelect/helpers.d.ts

@@ -45,6 +45,7 @@ export declare type UserSelectProps<ITEM = DefaultItem, GROUP = DefaultGroup, MU
     dropdownRef?: React.RefObject<HTMLDivElement>;
     name?: string;
     items: ITEM[];
+    required?: boolean;
     renderItem?: PropRenderItem<ITEM>;
     renderValue?: PropRenderValue<ITEM>;
     onFocus?: React.FocusEventHandler<HTMLInputElement>;
@@ -112,6 +113,7 @@ export declare function withDefaultGetters<ITEM = DefaultItem, GROUP = DefaultGr
     dropdownRef?: React.RefObject<HTMLDivElement> | undefined;
     name?: string | undefined;
     items: ITEM[];
+    required?: boolean | undefined;
     renderItem?: PropRenderItem<ITEM> | undefined;
     renderValue?: PropRenderValue<ITEM> | undefined;
     onFocus?: ((event: React.FocusEvent<HTMLInputElement>) => void) | undefined;

package/__internal__/src/hooks/useSelect/useSelect.d.ts

@@ -74,5 +74,6 @@ export declare function useSelect<ITEM, GROUP, MULTIPLE extends boolean>(params:
     searchValue: string;
     clearValue: (e: React.SyntheticEvent) => void;
     getHandleRemoveValue: (item: ITEM) => (e: React.SyntheticEvent) => void;
+    notFound: boolean;
 };
 export {};

package/__internal__/src/hooks/useSelect/useSelect.js

@@ -65,6 +65,17 @@ export function useSelect(params) {
         var resultGroups = getGroups(filteredOptions, (groups === null || groups === void 0 ? void 0 : groups.length) ? getItemGroupKey : undefined, groups, getGroupKey, sortGroups);
         return optionForCreate ? __spread([optionForCreate], resultGroups) : resultGroups;
     }, [filteredOptions, groups, getItemGroupKey, getGroupKey, sortGroups, optionForCreate]);
+    var notFound = useMemo(function () {
+        var flag = !params.onCreate;
+        if (searchValue.length > 0) {
+            visibleItems.forEach(function (group) {
+                if (isOptionForCreate(group) || group.items.length > 0 || group.group) {
+                    flag = false;
+                }
+            });
+        }
+        return flag;
+    }, [visibleItems]);
     var getSelectedOptionIndex = function () {
         var e_1, _a, e_2, _b;
         var index = 0;
@@ -371,6 +382,7 @@ export function useSelect(params) {
         handleInputChange: handleInputChange,
         searchValue: searchValue,
         clearValue: clearValue,
-        getHandleRemoveValue: getHandleRemoveValue
+        getHandleRemoveValue: getHandleRemoveValue,
+        notFound: notFound
     };
 }

package/__internal__/src/icons/Icon/Icon.css

@@ -58,6 +58,10 @@
       color: var(--color-typo-warning);
     }
 
+  .Icon_view_disabled {
+      color: var(--color-control-typo-disable);
+    }
+
   .Icon-Svg {
     display: block;
     width: 100%;

package/__internal__/src/icons/Icon/Icon.d.ts

@@ -2,7 +2,7 @@ import './Icon.css';
 import React from 'react';
 import { PropsWithHTMLAttributes } from '../../utils/types/PropsWithHTMLAttributes';
 export declare type IconPropSize = 'xs' | 's' | 'm';
-export declare type IconPropView = 'alert' | 'brand' | 'ghost' | 'link' | 'primary' | 'secondary' | 'success' | 'warning';
+export declare type IconPropView = 'alert' | 'brand' | 'ghost' | 'link' | 'primary' | 'secondary' | 'success' | 'warning' | 'disabled';
 export declare type Props = {
     view?: IconPropView;
     size?: IconPropSize;

package/__internal__/src/utils/date/index.d.ts

@@ -1,3 +1,8 @@
+export declare const leapYear = 2020;
+export declare const dateComparer: (a?: Date | undefined, b?: Date | undefined) => number;
+export declare const getStartAndEndDate: (date1: Date, date2: Date) => Date[];
+export declare const minDateDefault: Date;
+export declare const maxDateDefault: Date;
 export * from './isInMinMaxDade';
 export * from './isDateRange';
 export * from './isOnlyOneDateInRange';

package/__internal__/src/utils/date/index.js

@@ -1,3 +1,11 @@
+import setYear from 'date-fns/setYear';
+export var leapYear = 2020;
+export var dateComparer = function (a, b) { var _a, _b; return ((_a = a === null || a === void 0 ? void 0 : a.getTime()) !== null && _a !== void 0 ? _a : 0) - ((_b = b === null || b === void 0 ? void 0 : b.getTime()) !== null && _b !== void 0 ? _b : 0); };
+export var getStartAndEndDate = function (date1, date2) {
+    return [date1, date2].sort(dateComparer);
+};
+export var minDateDefault = setYear(new Date(1970, 0, 1, 0, 0, 0, 0), 1);
+export var maxDateDefault = new Date(9999, 11, 31, 23, 59, 59);
 export * from './isInMinMaxDade';
 export * from './isDateRange';
 export * from './isOnlyOneDateInRange';

package/createIcon/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/createIcon",
-  "version": "3.6.0",
+  "version": "3.9.1",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [