@ozen-ui/kit 0.16.1 → 0.17.0

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

@@ -1,49 +1,71 @@
-import { __assign, __read, __rest } from "tslib";
+import { __assign, __read, __rest, __spreadArray } from "tslib";
 import './Select.css';
-import React, { useRef, useEffect, forwardRef, Children, isValidElement, } from 'react';
+import React, { useRef, useEffect, forwardRef, isValidElement, Children, } from 'react';
 import { isFragment } from 'react-is';
-import { useBoolean } from '../../hooks/useBoolean';
-import { useClickOutside } from '../../hooks/useClickOutside';
 import { useControlled } from '../../hooks/useControlled';
 import { useMultiRef } from '../../hooks/useMultiRef';
 import { useThemeProps } from '../../hooks/useThemeProps';
 import { cn } from '../../utils/classname';
-import { getIconSizeToFormElement } from '../../utils/getIconSizeToFormElement';
 import { isKey } from '../../utils/isKey';
-import { Menu } from '../Menu';
-import { SelectCheckIcon, 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_AUTO_SIZE, } from './constants';
-import { Option, OptionItemText } from './index';
+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 { isMultipleParams, isNotMultipleParams } from './helpers';
 export var cnSelect = cn('Select');
-export var Select = forwardRef(function (inProps, ref) {
+var SelectRender = function (inProps, ref) {
     var props = useThemeProps({
         props: inProps,
         name: 'Select',
     });
-    var id = props.id, name = props.name, _a = props.size, size = _a === void 0 ? SELECT_DEFAULT_AUTO_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, 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 = __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 = __rest(_h, ["menuListProps"]);
-    var menuRef = useRef(null);
-    var selectRef = useRef(null);
-    var bodyRef = useRef(null);
-    var _j = __read(useBoolean(false), 2), focused = _j[0], _k = _j[1], onFocus = _k.on, offFocus = _k.off;
-    var iconSize = getIconSizeToFormElement(size);
-    var currentOption = {};
-    var _l = __read(useControlled({
+    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, 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 = __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 = useRef(null);
+    /** @deprecated props */
+    var bodyRef = (bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.ref) || bodeRefProp;
+    var dataListProps = dataListPropsProp || menuProps;
+    var _h = __read(useControlled({
         value: valueProp,
         defaultValue: defaultValue,
         name: 'Select',
         state: 'value',
-    }), 3), valueState = _l[0], setValueState = _l[1], isValueControlled = _l[2];
-    var _m = __read(useControlled({
+    }), 3), valueState = _h[0], setValueState = _h[1], isValueControlled = _h[2];
+    var _j = __read(useControlled({
         value: openProp,
         defaultValue: defaultOpen,
         name: 'Select',
         state: 'open',
-    }), 3), open = _m[0], setOpen = _m[1], isOpenControlled = _m[2];
-    var isNotSelectOption = function (child) { return !isValidElement(child) || child.type !== Option; };
+    }), 3), open = _j[0], setOpen = _j[1], isOpenControlled = _j[2];
+    var currentLabel;
+    var isNotSelectOption = function (child) { return !isValidElement(child) || child.type !== DataListOption; };
     var resolvedChildren = isFragment(children)
         ? children.props.children
         : children;
+    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 (isMultipleParams(params)) {
+                var selected = (_b = params.value) === null || _b === void 0 ? void 0 : _b.includes(child.props.value);
+                if (selected) {
+                    currentLabel = __spreadArray(__spreadArray([], __read((params.label || [])), false), [
+                        label_1,
+                    ], false);
+                }
+            }
+            if (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();
@@ -62,75 +84,64 @@ export var Select = forwardRef(function (inProps, ref) {
             handleOpen();
         }
     };
-    /** Сбрасывает визуальное состояние фокуса по клику за пределами
-     * элемента контроля и раскрывающегося списка */
-    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 (isKey(event, 'Enter') ||
-            isKey(event, 'Space') ||
+        if ((isKey(event, 'Space') ||
             isKey(event, 'ArrowDown') ||
-            isKey(event, 'ArrowUp')) {
+            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 = 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 = __assign(__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.createElement(Option, __assign({}, props, { ref: ref, selected: selected }),
-                React.createElement(OptionItemText, { primary: label || '' }),
-                React.createElement(SelectCheckIcon, { size: iconSize, selected: selected })));
-        }
-        return React.cloneElement(elementChild, __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.createElement("span", null, label || value);
+        if (!value && value !== 0) {
+            return null;
+        }
+        var params = {
+            multiple: multiple,
+            label: label,
+            value: value,
+        };
+        if (isMultipleParams(params)) {
+            return React.createElement("span", null, __spreadArray([], __read(params.label), false).join(', '));
+        }
+        if (isNotMultipleParams(params)) {
+            return React.createElement("span", null, params.label);
+        }
+        return null;
+    };
+    /** Значение для текстового поля компонента */
+    var inputValue = function () {
+        var _a;
+        var params = {
+            multiple: multiple,
+            value: valueState,
+        };
+        if (isMultipleParams(params)) {
+            return (_a = params.value) === null || _a === void 0 ? void 0 : _a.join(',');
+        }
+        if (isNotMultipleParams(params)) {
+            return params.value;
+        }
+        return '';
     };
     /** Представление значение элемента контроля */
     var renderValue = renderValueProp || renderDefaultValue;
@@ -140,20 +151,21 @@ export var Select = 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]);
     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.createElement(React.Fragment, null,
-        React.createElement(SelectInput, __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: useMultiRef([selectRef, ref]) })),
-        React.createElement(Menu, __assign({ placement: "bottom-start", transitionProps: {
-                classNames: cnSelect({ animation: true }),
-            }, menuListProps: __assign({ size: size, role: 'listbox' }, menuListProps), equalAnchorWidth: true }, menuPropsOther, { open: open, anchorRef: bodyRef, onClose: handleClose, ref: menuRef }), renderChildren)));
-});
-Select.displayName = 'Select';
+        React.createElement(SelectInput, __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: __assign(__assign({}, bodyProps), { ref: useMultiRef([bodyRef, bodyInnerRef]) }), ref: ref, renderedValue: renderValue({
+                label: currentLabel,
+                value: valueState,
+            }) })),
+        React.createElement(DataList, __assign({ equalAnchorWidth: true }, dataListProps, { listProps: __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)));
+};
+export var Select = forwardRef(SelectRender);

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

@@ -0,0 +1,17 @@
+import { __assign, __read } from "tslib";
+import React, { useContext } from 'react';
+import { FieldControlContext } from '../../../FieldControl';
+import { cnSelect } from '../../index';
+export 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 = useContext(FieldControlContext);
+    var _c = __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.createElement(React.Fragment, null,
+        React.createElement("div", __assign({}, fieldProps, { className: cnSelect('Field', { filled: filled, asPlaceholder: !!placeholder }, [
+                fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.className,
+            ]), ref: fieldRef }), placeholder || renderedValue),
+        React.createElement("input", __assign({ id: id, name: name, defaultValue: defaultValue, value: valueProp, disabled: disabled, required: required, tabIndex: -1, "aria-hidden": true, readOnly: true }, inputProps, { className: cnSelect('Input', [inputProps === null || inputProps === void 0 ? void 0 : inputProps.className]), ref: inputRef }))));
+};

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

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

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

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

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

@@ -1,75 +1,4 @@
 import '../../Select.css';
 import React from 'react';
-import type { HTMLAttributes, InputHTMLAttributes, Ref } from 'react';
-import type { FormElementSizeVariant } from '../../../../types/FormElementSizeVariant';
-import { type FieldIconProps } from '../../../FieldIcon';
-import { type FieldLabelProps } from '../../../FieldLabel';
-export type SelectInputSizeVariant = FormElementSizeVariant;
-type DivElement = HTMLAttributes<HTMLDivElement>;
-type InputElement = InputHTMLAttributes<HTMLInputElement>;
-export type SelectInputProps = {
-    /** Атрибут id для элемента input */
-    id?: string;
-    /** Атрибут name для элемента input */
-    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;
-    /** Признак визуального состояния компонента с фокусом */
-    focused?: boolean;
-    /** Если {true} предотвращает сокращение текста в значении и
-     * задает гибкую высоту контейнера компонента */
-    multiline?: boolean;
-    /** Текст или иконка слева */
-    renderLeft?: FieldIconProps['icon'];
-    /** Текст или иконка справа */
-    renderRight?: FieldIconProps['icon'];
-    /** Значение для отображения */
-    renderedValue?: React.ReactNode;
-    /** Выбранное значение */
-    value?: InputElement['value'];
-    /** Значение умолчанию (неконтролируемый компонент) */
-    defaultValue?: InputElement['defaultValue'];
-    /** Ссылка на Field */
-    fieldRef?: Ref<HTMLDivElement>;
-    /** Свойства Field */
-    fieldProps?: DivElement & {
-        'data-testid'?: string;
-    };
-    /** Ссылка на элемент input */
-    inputRef?: Ref<HTMLInputElement>;
-    /** Свойства элемента input */
-    inputProps?: InputElement & {
-        'data-testid'?: string;
-    };
-    /** Ссылка на FieldLabel */
-    labelRef?: FieldLabelProps['ref'];
-    /** Свойства FieldLabel */
-    labelProps?: FieldLabelProps;
-    /** Ссылка на Body */
-    bodyRef?: Ref<HTMLDivElement>;
-    /** Свойства Body */
-    bodyProps?: DivElement;
-    /** Ссылка на корневой DOM-элемент компонента */
-    ref?: Ref<HTMLDivElement>;
-    open?: boolean;
-    'data-testid'?: string;
-    children?: never;
-} & Omit<HTMLAttributes<HTMLDivElement>, 'value' | 'defaultValue' | 'onChange'>;
+import type { SelectInputProps } from './types';
 export declare const SelectInput: React.ForwardRefExoticComponent<Omit<SelectInputProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export {};