@ozen-ui/kit 0.16.0 → 0.17.0-canary.0

package/__inner__/cjs/components/DataList/helpers/useScrollContainerToElement.d.ts

@@ -0,0 +1,3 @@
+import type { RefObject } from 'react';
+import type { ScrollContainerToElement } from '../../../utils/scrollContainerToElement';
+export declare function useScrollContainerToElement(container: RefObject<HTMLElement>, element: RefObject<HTMLElement>, behavior?: ScrollContainerToElement['behavior']): void;

package/__inner__/cjs/components/DataList/helpers/useScrollContainerToElement.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useScrollContainerToElement = void 0;
+var react_1 = require("react");
+var scrollContainerToElement_1 = require("../../../utils/scrollContainerToElement");
+function useScrollContainerToElement(container, element, behavior) {
+    (0, react_1.useEffect)(function () {
+        (0, scrollContainerToElement_1.scrollContainerToElement)({
+            container: container.current,
+            element: element.current,
+            behavior: behavior,
+        });
+    }, [container, element]);
+}
+exports.useScrollContainerToElement = useScrollContainerToElement;

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

@@ -5,11 +5,12 @@ import type { PolymorphicComponentPropsWithRef, PolymorphicComponentRef } from '
 import type { ListProps } from '../List';
 import type { PopoverBaseProps } from '../Popover';
 import type { DATA_LIST_DEFAULT_TAG } from './constants';
+export type DataListValue = string | number;
+export type DataListSelected<MULTIPLE extends boolean> = (MULTIPLE extends true ? DataListValue[] : DataListValue) | undefined;
 export type DataListPayload<MULTIPLE extends boolean> = {
     name?: string;
-    value: MULTIPLE extends true ? string[] : string;
+    value: DataListSelected<MULTIPLE>;
 };
-export type DataListSelected<MULTIPLE extends boolean> = (MULTIPLE extends true ? string[] : string) | undefined;
 export type DataListOnSelect<MULTIPLE extends boolean> = (event: React.SyntheticEvent | KeyboardEvent, payload: DataListPayload<MULTIPLE>) => void;
 export type DataListBaseProps<MULTIPLE extends boolean = false> = {
     /** Имя списка */
@@ -33,8 +34,6 @@ export type DataListBaseProps<MULTIPLE extends boolean = false> = {
     /** Свойства компонента List */
     listProps?: ListProps;
 } & Omit<PopoverBaseProps, 'onSelect'>;
-export declare const isMultipleParams: (params: DataListBaseProps<boolean>) => params is DataListBaseProps<true>;
-export declare const isNotMultipleParams: (params: DataListBaseProps<boolean>) => params is DataListBaseProps<false>;
 export type DataListRef = PolymorphicComponentRef<typeof DATA_LIST_DEFAULT_TAG>;
 export type DataListProps<As extends ElementType = typeof DATA_LIST_DEFAULT_TAG, MULTIPLE extends boolean = false> = PolymorphicComponentPropsWithRef<DataListBaseProps<MULTIPLE>, As>;
 export type DataListComponent = <As extends ElementType = typeof DATA_LIST_DEFAULT_TAG, MULTIPLE extends boolean = false>(props: PolymorphicComponentPropsWithRef<DataListBaseProps<MULTIPLE>, As>) => React.ReactElement | null;

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

@@ -1,7 +1,2 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isNotMultipleParams = exports.isMultipleParams = void 0;
-var isMultipleParams = function (params) { return !!params.multiple; };
-exports.isMultipleParams = isMultipleParams;
-var isNotMultipleParams = function (params) { return !params.multiple; };
-exports.isNotMultipleParams = isNotMultipleParams;

package/__inner__/cjs/components/FieldControl/FieldControl.js

@@ -71,6 +71,7 @@ exports.FieldControl = (0, polymorphicComponentWithRef_1.polymorphicComponentWit
                     fullWidth: fullWidth,
                     disabled: disabled,
                     required: required,
+                    label: label,
                     size: size,
                     filled: filled,
                     focused: focused,

package/__inner__/cjs/components/IconButton/IconButton.css

@@ -8,7 +8,7 @@
   padding: 0;
   box-sizing: border-box;
   display: inline-flex;
-  flex-shrink: 1;
+  flex-shrink: 0;
   align-items: center;
   justify-content: center;
   cursor: pointer;

package/__inner__/cjs/components/Input/Input.js

@@ -21,7 +21,7 @@ exports.Input = (0, react_1.forwardRef)(function (inProps, ref) {
         props: inProps,
         name: 'Input',
     });
-    var _a = props.size, size = _a === void 0 ? constants_1.INPUT_DEFAULT_SIZE : _a, label = props.label, error = props.error, autoFocus = props.autoFocus, placeholder = props.placeholder, id = props.id, name = props.name, type = props.type, renderLeft = props.renderLeft, renderRight = props.renderRight, inputRef = props.inputRef, fullWidth = props.fullWidth, disabled = props.disabled, hint = props.hint, required = props.required, className = props.className, inputProps = props.inputProps, value = props.value, defaultValue = props.defaultValue, onChange = props.onChange, labelProps = props.labelProps, labelRef = props.labelRef, bodyProps = props.bodyProps, other = tslib_1.__rest(props, ["size", "label", "error", "autoFocus", "placeholder", "id", "name", "type", "renderLeft", "renderRight", "inputRef", "fullWidth", "disabled", "hint", "required", "className", "inputProps", "value", "defaultValue", "onChange", "labelProps", "labelRef", "bodyProps"]);
+    var _a = props.size, size = _a === void 0 ? constants_1.INPUT_DEFAULT_SIZE : _a, label = props.label, error = props.error, autoFocus = props.autoFocus, placeholder = props.placeholder, id = props.id, name = props.name, type = props.type, renderLeft = props.renderLeft, renderRight = props.renderRight, fullWidth = props.fullWidth, disabled = props.disabled, hint = props.hint, required = props.required, className = props.className, value = props.value, defaultValue = props.defaultValue, onChange = props.onChange, inputProps = props.inputProps, bodyProps = props.bodyProps, labelProps = props.labelProps, inputRef = props.inputRef, labelRef = props.labelRef, other = tslib_1.__rest(props, ["size", "label", "error", "autoFocus", "placeholder", "id", "name", "type", "renderLeft", "renderRight", "fullWidth", "disabled", "hint", "required", "className", "value", "defaultValue", "onChange", "inputProps", "bodyProps", "labelProps", "inputRef", "labelRef"]);
     var bodyInnerRef = (0, react_1.useRef)(null);
     var fieldInnerRef = (0, react_1.useRef)(null);
     /* Хук useEventListener необходим для того, чтобы при нажатии на кнопку мыши

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

@@ -8,12 +8,13 @@ export type InputTypeVariant = (typeof inputTypeVariant)[number];
 export type InputSizeVariant = FormElementSizeVariant;
 type InputPropsDeprecated = {
     /**
-     * deprecated
      * Ссылка на FieldLabel
+     * @deprecated Используйте labelProps.ref
      * */
     labelRef?: FieldLabelProps['ref'];
-    /** deprecated
+    /**
      * Ссылка на элемент input
+     * @deprecated Используйте inputProps.ref
      * */
     inputRef?: Ref<HTMLInputElement>;
 };

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

@@ -1,19 +1,8 @@
-/* stylelint-disable */
 .Select {
-  --textfield-color: var(--color-content-primary);
-  --textfield-background-color: var(--color-background-primary);
-  --textfield-border-width: var(--border-width-s);
-  --textfield-border-color: var(--color-border-main);
-  font: var(--textfield-input-font);
-  display: inline-flex;
-  vertical-align: top;
-  flex-direction: column;
   min-inline-size: 120px;
 }
-.Select-Option {
-    padding-inline-end: 24px;
-  }
-.Select-Input {
+
+  .Select-Input {
     inset-block-end: 0;
     inset-inline-start: 0;
     position: absolute;
@@ -22,7 +11,8 @@
     inline-size: 100%;
     box-sizing: border-box;
   }
-.Select-Body {
+
+  .Select-Body {
     position: relative;
     display: flex;
     -moz-column-gap: var(--textfield-input-gap);
@@ -37,12 +27,14 @@
     cursor: pointer;
     outline: none;
   }
-.Select-FieldContainer {
+
+  .Select-FieldContainer {
     inline-size: 100%;
     position: relative;
     overflow: hidden;
   }
-.Select-Field {
+
+  .Select-Field {
     border: none;
     position: relative;
     display: flex;
@@ -51,143 +43,56 @@
     background: none;
     color: var(--textfield-color);
     box-sizing: border-box;
-    block-size: var(--textfield-input-block-size);
+    block-size: var(--textfield-input-height);
     align-items: center;
   }
-.Select-Field span {
+
+  .Select-Field span {
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
     }
-.Select-Field_asPlaceholder {
+
+  .Select-Field_asPlaceholder {
       color: var(--color-content-tertiary);
     }
-.Select_multiline .Select-FieldContainer {
+
+  .Select_multiline .Select-FieldContainer {
       overflow: auto;
     }
-.Select_multiline .Select-Field {
+
+  .Select_multiline .Select-Field {
       block-size: initial;
-      min-block-size: var(--textfield-input-block-size);
+      min-block-size: var(--textfield-input-height);
     }
-.Select_multiline .Select-Field span {
+
+  .Select_multiline .Select-Field > span {
         overflow: auto;
         text-overflow: initial;
         white-space: initial;
       }
-.Select_size_2xs {
-      --textfield-gutter-x: 12px;
-      --textfield-input-block-size: 32px;
-      --textfield-input-font: var(--typography-text-2xs-font);
-      --textfield-input-padding: 8px 0 8px;
-      --textfield-input-gap: var(--space-s);
-    }
-.Select_size_xs {
-      --textfield-gutter-x: 12px;
-      --textfield-input-block-size: 40px;
-      --textfield-input-font: var(--typography-text-xs-font);
-      --textfield-input-padding: 19px 0 4px;
-      --textfield-input-gap: var(--space-s);
-    }
-.Select_size_s {
-      --textfield-gutter-x: 16px;
-      --textfield-input-block-size: 48px;
-      --textfield-input-font: var(--typography-text-s-font);
-      --textfield-input-padding: 21px 0 6px;
-      --textfield-input-gap: var(--space-m);
-    }
-.Select_size_m {
-      --textfield-gutter-x: 20px;
-      --textfield-input-block-size: 56px;
-      --textfield-input-font: var(--typography-text-m-font);
-      --textfield-input-padding: 24px 0 6px;
-      --textfield-input-gap: var(--space-m);
-    }
-.Select_size_l {
-      --textfield-gutter-x: 24px;
-      --textfield-input-block-size: 64px;
-      --textfield-input-font: var(--typography-text-l-font);
-      --textfield-input-padding: 26px 0 6px;
-      --textfield-input-gap: var(--space-l);
-    }
-.Select_fullWidth {
-    inline-size: 100%;
-  }
-.Select_hasLabel .Select-Field {
-      padding: var(--textfield-input-padding);
-      font: var(--textfield-input-font);
-    }
-.Select:hover {
-    --textfield-border-color: var(--color-border-main-hover);
-  }
-.Select_focused,
-  .Select_focused:hover {
-    --textfield-border-width: var(--border-width-m);
-    --textfield-background-color: var(--color-background-main);
-    --textfield-border-color: var(--color-border-action);
-  }
-.Select_error,
-  .Select_error.Select:hover,
-  .Select_error.Select_focused,
-  .Select_error.Select_focused:hover {
-    --textfield-border-color: var(--color-border-error);
-  }
-.Select_disabled {
-    --textfield-border-color: var(--color-border-disabled);
-    --textfield-background-color: var(--color-background-disabled);
-    --textfield-color: var(--color-content-secondary);
-    pointer-events: none;
-    cursor: default;
-  }
-.Select-RenderLeft {
-    pointer-events: none;
-  }
-.Select-RenderRight {
+
+  .Select-RenderLeft,
+  .Select-RenderRight {
     pointer-events: none;
   }
-.Select-DropDownIcon {
+
+  .Select-DropDownIcon {
     display: flex;
     align-items: center;
     transition: transform var(--transition-default);
     will-change: transform;
   }
-.Select-DropDownIcon_open {
+
+  .Select-DropDownIcon_open {
       transform: rotate(180deg);
     }
+
+.FieldControl_hasLabel .Select-Field {
+      padding: var(--textfield-input-padding);
+      font: var(--textfield-input-font);
+    }
+
 .Select .ListItemButton::after {
   content: none;
 }
-.Select_animation-enter {
-    opacity: 0;
-    transform: translate(0, calc(var(--space-s) * -1));
-    pointer-events: none;
-  }
-.Select_animation-enter-active {
-    opacity: 1;
-    transition:
-      opacity var(--transition-default),
-      transform var(--transition-default);
-    transform: translate(0);
-    pointer-events: none;
-  }
-.Select_animation-enter-done {
-    opacity: 1;
-    transform: translate(0);
-  }
-.Select_animation-exit {
-    opacity: 1;
-    transform: translate(0);
-    pointer-events: none;
-  }
-.Select_animation-exit-active {
-    opacity: 0;
-    transition:
-      opacity var(--transition-default),
-      transform var(--transition-default);
-    transform: translate(0, calc(var(--space-s) * -1));
-    pointer-events: none;
-  }
-.Select_animation-exit-done {
-    opacity: 0;
-    transform: translate(0, calc(var(--space-s) * -1));
-    pointer-events: none;
-  }

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

@@ -1,5 +1,4 @@
 import './Select.css';
-import React from 'react';
-import type { SelectProps } from './types';
+import type { SelectComponent } from './types';
 export declare const cnSelect: import("@bem-react/classname").ClassNameFormatter;
-export declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLDivElement>>;
+export declare const Select: SelectComponent;

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

@@ -5,48 +5,70 @@ var tslib_1 = require("tslib");
 require("./Select.css");
 var react_1 = tslib_1.__importStar(require("react"));
 var react_is_1 = require("react-is");
-var useBoolean_1 = require("../../hooks/useBoolean");
-var useClickOutside_1 = require("../../hooks/useClickOutside");
 var useControlled_1 = require("../../hooks/useControlled");
 var useMultiRef_1 = require("../../hooks/useMultiRef");
 var useThemeProps_1 = require("../../hooks/useThemeProps");
 var classname_1 = require("../../utils/classname");
-var getIconSizeToFormElement_1 = require("../../utils/getIconSizeToFormElement");
 var isKey_1 = require("../../utils/isKey");
-var Menu_1 = require("../Menu");
+var DataList_1 = require("../DataList");
 var components_1 = require("./components");
 var constants_1 = require("./constants");
-var index_1 = require("./index");
+var helpers_1 = require("./helpers");
 exports.cnSelect = (0, classname_1.cn)('Select');
-exports.Select = (0, react_1.forwardRef)(function (inProps, ref) {
+var SelectRender = function (inProps, ref) {
     var props = (0, useThemeProps_1.useThemeProps)({
         props: inProps,
         name: 'Select',
     });
-    var id = props.id, name = props.name, _a = props.size, size = _a === void 0 ? constants_1.SELECT_DEFAULT_AUTO_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, error = props.error, onChange = props.onChange, label = props.label, placeholder = props.placeholder, renderValueProp = props.renderValue, renderLeft = props.renderLeft, renderRight = props.renderRight, hint = props.hint, children = props.children, menuProps = props.menuProps, inputProps = props.inputProps, inputRef = props.inputRef, onCloseProp = props.onClose, onOpenProp = props.onOpen, openProp = props.open, other = tslib_1.__rest(props, ["id", "name", "size", "autoFocus", "fullWidth", "disabled", "required", "multiline", "defaultOpen", "value", "defaultValue", "error", "onChange", "label", "placeholder", "renderValue", "renderLeft", "renderRight", "hint", "children", "menuProps", "inputProps", "inputRef", "onClose", "onOpen", "open"]);
-    var _h = menuProps || {}, menuListProps = _h.menuListProps, menuPropsOther = tslib_1.__rest(_h, ["menuListProps"]);
-    var menuRef = (0, react_1.useRef)(null);
-    var selectRef = (0, react_1.useRef)(null);
-    var bodyRef = (0, react_1.useRef)(null);
-    var _j = tslib_1.__read((0, useBoolean_1.useBoolean)(false), 2), focused = _j[0], _k = _j[1], onFocus = _k.on, offFocus = _k.off;
-    var iconSize = (0, getIconSizeToFormElement_1.getIconSizeToFormElement)(size);
-    var currentOption = {};
-    var _l = tslib_1.__read((0, useControlled_1.useControlled)({
+    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, id = props.id, name = props.name, valueProp = props.value, defaultValue = props.defaultValue, error = props.error, onChange = props.onChange, label = props.label, placeholder = props.placeholder, renderValueProp = props.renderValue, renderLeft = props.renderLeft, renderRight = props.renderRight, hint = props.hint, children = props.children, onClick = props.onClick, onKeyDown = props.onKeyDown, menuProps = props.menuProps, dataListPropsProp = props.dataListProps, bodyProps = props.bodyProps, bodeRefProp = 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", "id", "name", "value", "defaultValue", "error", "onChange", "label", "placeholder", "renderValue", "renderLeft", "renderRight", "hint", "children", "onClick", "onKeyDown", "menuProps", "dataListProps", "bodyProps", "bodyRef", "onClose", "onOpen", "open", "multiple"]);
+    var bodyInnerRef = (0, react_1.useRef)(null);
+    /** @deprecated props */
+    var bodyRef = (bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.ref) || bodeRefProp;
+    var dataListProps = dataListPropsProp || menuProps;
+    var _h = tslib_1.__read((0, useControlled_1.useControlled)({
         value: valueProp,
         defaultValue: defaultValue,
         name: 'Select',
         state: 'value',
-    }), 3), valueState = _l[0], setValueState = _l[1], isValueControlled = _l[2];
-    var _m = tslib_1.__read((0, useControlled_1.useControlled)({
+    }), 3), valueState = _h[0], setValueState = _h[1], isValueControlled = _h[2];
+    var _j = tslib_1.__read((0, useControlled_1.useControlled)({
         value: openProp,
         defaultValue: defaultOpen,
         name: 'Select',
         state: 'open',
-    }), 3), open = _m[0], setOpen = _m[1], isOpenControlled = _m[2];
-    var isNotSelectOption = function (child) { return !(0, react_1.isValidElement)(child) || child.type !== index_1.Option; };
+    }), 3), open = _j[0], setOpen = _j[1], isOpenControlled = _j[2];
+    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)
         ? children.props.children
         : children;
+    react_1.Children.forEach(resolvedChildren, function (child) {
+        var _a, _b;
+        if (!isNotSelectOption(child)) {
+            var label_1 = typeof child.props.children === 'string'
+                ? (_a = child.props.label) !== null && _a !== void 0 ? _a : child.props.children
+                : child.props.label;
+            var params = {
+                multiple: multiple,
+                label: currentLabel,
+                value: valueState,
+            };
+            if ((0, helpers_1.isMultipleParams)(params)) {
+                var selected = (_b = params.value) === null || _b === void 0 ? void 0 : _b.includes(child.props.value);
+                if (selected) {
+                    currentLabel = tslib_1.__spreadArray(tslib_1.__spreadArray([], tslib_1.__read((params.label || [])), false), [
+                        label_1,
+                    ], false);
+                }
+            }
+            if ((0, helpers_1.isNotMultipleParams)(params)) {
+                var selected = params.value === child.props.value;
+                if (selected) {
+                    currentLabel = label_1;
+                }
+            }
+        }
+    });
     var handleClose = function () {
         setOpen(false);
         onCloseProp === null || onCloseProp === void 0 ? void 0 : onCloseProp();
@@ -65,75 +87,64 @@ exports.Select = (0, react_1.forwardRef)(function (inProps, ref) {
             handleOpen();
         }
     };
-    /** Сбрасывает визуальное состояние фокуса по клику за пределами
-     * элемента контроля и раскрывающегося списка */
-    (0, useClickOutside_1.useClickOutside)({
-        refs: [selectRef, menuRef],
-        handler: function () {
-            offFocus();
-        },
-        active: focused,
-    });
-    /** Управление фокусом элемента контроля */
-    var handleFocus = function () {
-        onFocus();
-    };
-    /** Управление потерей фокуса с элемента контроля */
-    var handleBlur = function () {
-        if (!open) {
-            offFocus();
-        }
+    var handleClick = function (event) {
+        onClick === null || onClick === void 0 ? void 0 : onClick(event);
+        handleToggle();
     };
     /** Управление элементом контроля через клавиатуру */
     var handleKeyDown = function (event) {
-        if ((0, isKey_1.isKey)(event, 'Enter') ||
-            (0, isKey_1.isKey)(event, 'Space') ||
+        if (((0, isKey_1.isKey)(event, 'Space') ||
             (0, isKey_1.isKey)(event, 'ArrowDown') ||
-            (0, isKey_1.isKey)(event, 'ArrowUp')) {
+            (0, isKey_1.isKey)(event, 'ArrowUp')) &&
+            !open) {
             event.preventDefault();
             handleToggle();
         }
+        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
     };
     /** Событие выбора значения из раскрывающегося списка */
-    var handleChange = function (e, value) {
+    var handleChange = function (event, _a) {
+        var value = _a.value;
         if (!isValueControlled || onChange) {
             setValueState(value);
         }
-        onChange === null || onChange === void 0 ? void 0 : onChange(value, e);
-        handleClose();
+        onChange === null || onChange === void 0 ? void 0 : onChange(value, event);
+        if (!multiple)
+            handleClose();
     };
-    /** Представление раскрывающегося списка */
-    var renderChildren = react_1.Children.map(resolvedChildren, function (child) {
-        if (isNotSelectOption(child)) {
-            return child;
-        }
-        var elementChild = child;
-        var label = typeof child.props.children === 'string'
-            ? child.props.children || child.props.label
-            : child.props.label;
-        var selected = valueState === child.props.value;
-        var props = tslib_1.__assign(tslib_1.__assign({}, child.props), { onClick: function (event) {
-                var _a, _b;
-                handleChange(event, child.props.value || '');
-                (_b = (_a = child.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, event);
-            } });
-        if (selected) {
-            currentOption = {
-                label: label,
-                value: child.props.value,
-            };
-        }
-        if (typeof child.props.children === 'string') {
-            return (react_1.default.createElement(index_1.Option, tslib_1.__assign({}, props, { ref: ref, selected: selected }),
-                react_1.default.createElement(index_1.OptionItemText, { primary: label || '' }),
-                react_1.default.createElement(components_1.SelectCheckIcon, { size: iconSize, selected: selected })));
-        }
-        return react_1.default.cloneElement(elementChild, tslib_1.__assign({}, props));
-    });
     /** Представление значение элемента контроля по умолчанию */
     var renderDefaultValue = function (option) {
         var _a = option.label, label = _a === void 0 ? '' : _a, _b = option.value, value = _b === void 0 ? '' : _b;
-        return react_1.default.createElement("span", null, label || value);
+        if (!value && value !== 0) {
+            return null;
+        }
+        var params = {
+            multiple: multiple,
+            label: label,
+            value: value,
+        };
+        if ((0, helpers_1.isMultipleParams)(params)) {
+            return react_1.default.createElement("span", null, tslib_1.__spreadArray([], tslib_1.__read(params.label), false).join(', '));
+        }
+        if ((0, helpers_1.isNotMultipleParams)(params)) {
+            return react_1.default.createElement("span", null, params.label);
+        }
+        return null;
+    };
+    /** Значение для текстового поля компонента */
+    var inputValue = function () {
+        var _a;
+        var params = {
+            multiple: multiple,
+            value: valueState,
+        };
+        if ((0, helpers_1.isMultipleParams)(params)) {
+            return (_a = params.value) === null || _a === void 0 ? void 0 : _a.join(',');
+        }
+        if ((0, helpers_1.isNotMultipleParams)(params)) {
+            return params.value;
+        }
+        return '';
     };
     /** Представление значение элемента контроля */
     var renderValue = renderValueProp || renderDefaultValue;
@@ -143,20 +154,21 @@ exports.Select = (0, react_1.forwardRef)(function (inProps, ref) {
          * если компонент по умолчанию открыт – defaultOpen={true}
          * и является неконтролируемым */
         if (defaultOpen && !isOpenControlled) {
-            (_a = bodyRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            (_a = bodyInnerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
         }
     }, [open]);
     (0, react_1.useEffect)(function () {
         var _a;
         /** Автофокус на элементе контроля */
         if (autoFocus) {
-            (_a = bodyRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            (_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({ id: id, name: name, inputProps: inputProps, inputRef: inputRef, label: label, placeholder: placeholder, size: size, disabled: disabled, required: required, multiline: multiline, error: error, hint: hint, fullWidth: fullWidth, renderLeft: renderLeft, open: open, renderRight: renderRight, renderedValue: currentOption.value && renderValue(currentOption) }, other, { focused: focused, value: valueState || '', bodyRef: bodyRef, onClick: handleToggle, onKeyDown: handleKeyDown, onFocus: handleFocus, onBlur: handleBlur, ref: (0, useMultiRef_1.useMultiRef)([selectRef, ref]) })),
-        react_1.default.createElement(Menu_1.Menu, tslib_1.__assign({ placement: "bottom-start", transitionProps: {
-                classNames: (0, exports.cnSelect)({ animation: true }),
-            }, menuListProps: tslib_1.__assign({ size: size, role: 'listbox' }, menuListProps), equalAnchorWidth: true }, menuPropsOther, { open: open, anchorRef: bodyRef, onClose: handleClose, ref: menuRef }), renderChildren)));
-});
-exports.Select.displayName = 'Select';
+        react_1.default.createElement(components_1.SelectInput, tslib_1.__assign({ id: id, name: name, label: label, placeholder: placeholder, size: size, disabled: disabled, required: required, multiline: multiline, error: error, hint: hint, fullWidth: fullWidth, renderLeft: renderLeft, renderRight: renderRight }, other, { open: open, value: inputValue() || '', onKeyDown: handleKeyDown, onClick: handleClick, bodyProps: tslib_1.__assign(tslib_1.__assign({}, bodyProps), { ref: (0, useMultiRef_1.useMultiRef)([bodyRef, bodyInnerRef]) }), ref: ref, renderedValue: renderValue({
+                label: currentLabel,
+                value: valueState,
+            }) })),
+        react_1.default.createElement(DataList_1.DataList, tslib_1.__assign({ equalAnchorWidth: true }, dataListProps, { listProps: tslib_1.__assign({ size: size, role: 'listbox' }, dataListProps === null || dataListProps === void 0 ? void 0 : dataListProps.listProps), open: open, multiple: multiple, selected: (valueState || ''), onSelect: handleChange, anchorRef: bodyInnerRef, onClose: handleClose }), children)));
+};
+exports.Select = (0, react_1.forwardRef)(SelectRender);

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

@@ -0,0 +1,5 @@
+import type { FC } from 'react';
+import type { SelectInputProps } from '../SelectInput';
+type SelectInputConsumerProps = Pick<SelectInputProps, 'value' | 'placeholder' | 'defaultValue' | 'id' | 'name' | 'fieldProps' | 'fieldRef' | 'inputProps' | 'inputRef' | 'renderedValue'>;
+export declare const SelectInputConsumer: FC<SelectInputConsumerProps>;
+export {};

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

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectInputConsumer = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importStar(require("react"));
+var FieldControl_1 = require("../../../FieldControl");
+var index_1 = require("../../index");
+var SelectInputConsumer = 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, react_1.useContext)(FieldControl_1.FieldControlContext);
+    var _c = tslib_1.__read(context, 1), fieldControl = _c[0];
+    var disabled = fieldControl.disabled, required = fieldControl.required, filled = fieldControl.filled, focused = fieldControl.focused, label = fieldControl.label;
+    var hasLabel = !!label;
+    var placeholder = (focused || !hasLabel) && !valueProp && 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 }, [
+                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 }))));
+};
+exports.SelectInputConsumer = SelectInputConsumer;

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

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

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

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