@ozen-ui/kit 0.60.0 → 0.61.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/__inner__/cjs/components/Autocomplete/helper.d.ts +7 -72
- package/__inner__/cjs/components/Autocomplete/types.d.ts +11 -17
- package/__inner__/cjs/components/AutocompleteNext/helpers.d.ts +7 -77
- package/__inner__/cjs/components/AutocompleteNext/types.d.ts +10 -16
- package/__inner__/cjs/components/DatePicker/DatePicker.d.ts +2 -36
- package/__inner__/cjs/components/DatePicker/types.d.ts +5 -14
- package/__inner__/cjs/components/Segment/Segment.js +1 -1
- package/__inner__/cjs/components/Segment/components/SegmentItem/SegmentItem.js +1 -1
- package/__inner__/cjs/components/Select/Select.css +6 -0
- package/__inner__/cjs/components/Select/Select.js +41 -59
- package/__inner__/cjs/components/Select/components/SelectInput/SelectInput.js +5 -6
- package/__inner__/cjs/components/Select/components/SelectInputContextConsumer/SelectInputContextConsumer.d.ts +5 -0
- package/__inner__/cjs/components/Select/components/{SelectConsumer/SelectInputConsumer.js → SelectInputContextConsumer/SelectInputContextConsumer.js} +3 -3
- package/__inner__/cjs/components/Select/components/SelectInputContextConsumer/index.d.ts +1 -0
- package/__inner__/cjs/components/Select/components/{SelectConsumer → SelectInputContextConsumer}/index.js +1 -1
- package/__inner__/cjs/components/Select/helpers/types.d.ts +5 -8
- package/__inner__/cjs/components/Select/helpers/types.js +5 -1
- package/__inner__/cjs/components/Select/types.d.ts +43 -41
- package/__inner__/cjs/components/Stack/types.d.ts +2 -2
- package/__inner__/esm/components/Autocomplete/helper.d.ts +7 -72
- package/__inner__/esm/components/Autocomplete/types.d.ts +11 -17
- package/__inner__/esm/components/AutocompleteNext/helpers.d.ts +7 -77
- package/__inner__/esm/components/AutocompleteNext/types.d.ts +10 -16
- package/__inner__/esm/components/DatePicker/DatePicker.d.ts +2 -36
- package/__inner__/esm/components/DatePicker/types.d.ts +5 -14
- package/__inner__/esm/components/Segment/Segment.js +1 -1
- package/__inner__/esm/components/Segment/components/SegmentItem/SegmentItem.js +1 -1
- package/__inner__/esm/components/Select/Select.css +6 -0
- package/__inner__/esm/components/Select/Select.js +42 -60
- package/__inner__/esm/components/Select/components/SelectInput/SelectInput.js +5 -6
- package/__inner__/esm/components/Select/components/SelectInputContextConsumer/SelectInputContextConsumer.d.ts +5 -0
- package/__inner__/esm/components/Select/components/{SelectConsumer/SelectInputConsumer.js → SelectInputContextConsumer/SelectInputContextConsumer.js} +1 -1
- package/__inner__/esm/components/Select/components/SelectInputContextConsumer/index.d.ts +1 -0
- package/__inner__/esm/components/Select/components/SelectInputContextConsumer/index.js +1 -0
- package/__inner__/esm/components/Select/helpers/types.d.ts +5 -8
- package/__inner__/esm/components/Select/helpers/types.js +2 -0
- package/__inner__/esm/components/Select/types.d.ts +43 -41
- package/__inner__/esm/components/Stack/types.d.ts +2 -2
- package/package.json +4 -4
- package/__inner__/cjs/components/Select/components/SelectConsumer/SelectInputConsumer.d.ts +0 -5
- package/__inner__/cjs/components/Select/components/SelectConsumer/index.d.ts +0 -1
- package/__inner__/esm/components/Select/components/SelectConsumer/SelectInputConsumer.d.ts +0 -5
- package/__inner__/esm/components/Select/components/SelectConsumer/index.d.ts +0 -1
- package/__inner__/esm/components/Select/components/SelectConsumer/index.js +0 -1
|
@@ -10,6 +10,7 @@ var useMultiRef_1 = require("../../hooks/useMultiRef");
|
|
|
10
10
|
var useThemeProps_1 = require("../../hooks/useThemeProps");
|
|
11
11
|
var classname_1 = require("../../utils/classname");
|
|
12
12
|
var isKeys_1 = require("../../utils/isKeys");
|
|
13
|
+
var isString_1 = require("../../utils/isString");
|
|
13
14
|
var DataList_1 = require("../DataList");
|
|
14
15
|
var components_1 = require("./components");
|
|
15
16
|
var constants_1 = require("./constants");
|
|
@@ -22,21 +23,20 @@ var SelectRender = function (inProps, ref) {
|
|
|
22
23
|
});
|
|
23
24
|
var _a = props.size, size = _a === void 0 ? constants_1.SELECT_DEFAULT_SIZE : _a, _b = props.autoFocus, autoFocus = _b === void 0 ? constants_1.SELECT_DEFAULT_AUTO_FOCUS : _b, _c = props.fullWidth, fullWidth = _c === void 0 ? constants_1.SELECT_DEFAULT_FULL_WIDTH : _c, _d = props.disabled, disabled = _d === void 0 ? constants_1.SELECT_DEFAULT_DISABLED : _d, _e = props.required, required = _e === void 0 ? constants_1.SELECT_DEFAULT_REQUIRED : _e, _f = props.multiline, multiline = _f === void 0 ? constants_1.SELECT_DEFAULT_MULTILINE : _f, _g = props.defaultOpen, defaultOpen = _g === void 0 ? constants_1.SELECT_DEFAULT_DEFAULT_OPEN : _g, valueProp = props.value, defaultValue = props.defaultValue, onChange = props.onChange, renderValueProp = props.renderValue, children = props.children, onClick = props.onClick, onKeyDown = props.onKeyDown, menuProps = props.menuProps, dataListPropsProp = props.dataListProps, bodyProps = props.bodyProps, 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", "value", "defaultValue", "onChange", "renderValue", "children", "onClick", "onKeyDown", "menuProps", "dataListProps", "bodyProps", "bodyRef", "onClose", "onOpen", "open", "multiple"]);
|
|
24
25
|
var bodyInnerRef = (0, react_1.useRef)(null);
|
|
25
|
-
|
|
26
|
-
var bodyRef = (bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.ref) || bodeRefProp;
|
|
26
|
+
var bodyRef = (0, useMultiRef_1.useMultiRef)([(bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.ref) || bodeRefProp, bodyInnerRef]);
|
|
27
27
|
var dataListProps = dataListPropsProp || menuProps;
|
|
28
28
|
var _h = tslib_1.__read((0, useControlled_1.useControlled)({
|
|
29
29
|
value: valueProp,
|
|
30
30
|
defaultValue: defaultValue,
|
|
31
31
|
name: 'Select',
|
|
32
32
|
state: 'value',
|
|
33
|
-
}),
|
|
33
|
+
}), 2), valueState = _h[0], setValueState = _h[1];
|
|
34
34
|
var _j = tslib_1.__read((0, useControlled_1.useControlled)({
|
|
35
35
|
value: openProp,
|
|
36
36
|
defaultValue: defaultOpen,
|
|
37
37
|
name: 'Select',
|
|
38
38
|
state: 'open',
|
|
39
|
-
}),
|
|
39
|
+
}), 2), open = _j[0], setOpen = _j[1];
|
|
40
40
|
var currentLabel;
|
|
41
41
|
var isNotSelectOption = function (child) { return !(0, react_1.isValidElement)(child) || child.type !== DataList_1.DataListOption; };
|
|
42
42
|
var resolvedChildren = (0, react_is_1.isFragment)(children)
|
|
@@ -45,27 +45,23 @@ var SelectRender = function (inProps, ref) {
|
|
|
45
45
|
react_1.Children.forEach(resolvedChildren, function (child) {
|
|
46
46
|
var _a, _b;
|
|
47
47
|
if (!isNotSelectOption(child)) {
|
|
48
|
-
var label =
|
|
48
|
+
var label = (0, isString_1.isString)(child.props.children)
|
|
49
49
|
? (_a = child.props.label) !== null && _a !== void 0 ? _a : child.props.children
|
|
50
50
|
: child.props.label;
|
|
51
|
-
var params = {
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
value: valueState,
|
|
55
|
-
};
|
|
56
|
-
if ((0, helpers_1.isMultipleParams)(params)) {
|
|
51
|
+
var params = tslib_1.__assign(tslib_1.__assign({}, inProps), { multiple: multiple, value: valueState });
|
|
52
|
+
if ((0, helpers_1.isMultipleParams)(params) &&
|
|
53
|
+
(0, helpers_1.isMultipleLabel)(currentLabel, multiple)) {
|
|
57
54
|
var selected = (_b = params.value) === null || _b === void 0 ? void 0 : _b.includes(child.props.value);
|
|
58
|
-
if (selected)
|
|
59
|
-
currentLabel = tslib_1.__spreadArray(tslib_1.__spreadArray([], tslib_1.__read((
|
|
55
|
+
if (selected)
|
|
56
|
+
currentLabel = tslib_1.__spreadArray(tslib_1.__spreadArray([], tslib_1.__read((currentLabel || [])), false), [
|
|
60
57
|
label,
|
|
61
58
|
], false);
|
|
62
|
-
}
|
|
63
59
|
}
|
|
64
|
-
if ((0, helpers_1.isNotMultipleParams)(params)
|
|
60
|
+
if ((0, helpers_1.isNotMultipleParams)(params) &&
|
|
61
|
+
(0, helpers_1.isNotMultipleLabel)(currentLabel, multiple)) {
|
|
65
62
|
var selected = params.value === child.props.value;
|
|
66
|
-
if (selected)
|
|
63
|
+
if (selected)
|
|
67
64
|
currentLabel = label;
|
|
68
|
-
}
|
|
69
65
|
}
|
|
70
66
|
}
|
|
71
67
|
});
|
|
@@ -80,52 +76,40 @@ var SelectRender = function (inProps, ref) {
|
|
|
80
76
|
var handleToggle = function () {
|
|
81
77
|
if (disabled)
|
|
82
78
|
return;
|
|
83
|
-
if (open)
|
|
79
|
+
if (open)
|
|
84
80
|
handleClose();
|
|
85
|
-
|
|
86
|
-
else {
|
|
81
|
+
else
|
|
87
82
|
handleOpen();
|
|
88
|
-
}
|
|
89
83
|
};
|
|
90
|
-
var handleClick = function (
|
|
91
|
-
onClick === null || onClick === void 0 ? void 0 : onClick(
|
|
84
|
+
var handleClick = function (e) {
|
|
85
|
+
onClick === null || onClick === void 0 ? void 0 : onClick(e);
|
|
92
86
|
handleToggle();
|
|
93
87
|
};
|
|
94
88
|
/** Управление элементом контроля через клавиатуру */
|
|
95
|
-
var handleKeyDown = function (
|
|
96
|
-
if ((0, isKeys_1.isKeys)(
|
|
97
|
-
|
|
89
|
+
var handleKeyDown = function (e) {
|
|
90
|
+
if ((0, isKeys_1.isKeys)(e, ['Space', 'ArrowDown', 'ArrowUp']) && !open) {
|
|
91
|
+
e.preventDefault();
|
|
98
92
|
handleToggle();
|
|
99
93
|
}
|
|
100
|
-
onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(
|
|
94
|
+
onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e);
|
|
101
95
|
};
|
|
102
96
|
/** Событие выбора значения из раскрывающегося списка */
|
|
103
|
-
var handleChange = function (
|
|
97
|
+
var handleChange = function (e, _a) {
|
|
104
98
|
var value = _a.value;
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
}
|
|
108
|
-
onChange === null || onChange === void 0 ? void 0 : onChange(value, event);
|
|
99
|
+
setValueState(value);
|
|
100
|
+
onChange === null || onChange === void 0 ? void 0 : onChange(value, e);
|
|
109
101
|
if (!multiple)
|
|
110
102
|
handleClose();
|
|
111
103
|
};
|
|
112
104
|
/** Представление значение элемента контроля по умолчанию */
|
|
113
105
|
var renderDefaultValue = function (option) {
|
|
114
106
|
var _a = option.label, label = _a === void 0 ? '' : _a, _b = option.value, value = _b === void 0 ? '' : _b;
|
|
115
|
-
if (!value && value !== 0)
|
|
107
|
+
if (!value && value !== 0)
|
|
116
108
|
return null;
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
value: value,
|
|
122
|
-
};
|
|
123
|
-
if ((0, helpers_1.isMultipleParams)(params)) {
|
|
124
|
-
return react_1.default.createElement("span", null, tslib_1.__spreadArray([], tslib_1.__read(params.label), false).join(', '));
|
|
125
|
-
}
|
|
126
|
-
if ((0, helpers_1.isNotMultipleParams)(params)) {
|
|
127
|
-
return react_1.default.createElement("span", null, params.label);
|
|
128
|
-
}
|
|
109
|
+
if ((0, helpers_1.isMultipleLabel)(label, multiple))
|
|
110
|
+
return react_1.default.createElement("span", null, tslib_1.__spreadArray([], tslib_1.__read(label), false).join(', '));
|
|
111
|
+
if ((0, helpers_1.isNotMultipleLabel)(label, multiple))
|
|
112
|
+
return react_1.default.createElement("span", null, label);
|
|
129
113
|
return null;
|
|
130
114
|
};
|
|
131
115
|
/** Значение для текстового поля компонента */
|
|
@@ -135,12 +119,10 @@ var SelectRender = function (inProps, ref) {
|
|
|
135
119
|
multiple: multiple,
|
|
136
120
|
value: valueState,
|
|
137
121
|
};
|
|
138
|
-
if ((0, helpers_1.isMultipleParams)(params))
|
|
139
|
-
return (_a = params.value) === null || _a === void 0 ? void 0 : _a.join(',');
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
return params.value;
|
|
143
|
-
}
|
|
122
|
+
if ((0, helpers_1.isMultipleParams)(params))
|
|
123
|
+
return ((_a = params.value) === null || _a === void 0 ? void 0 : _a.join(',')) || '';
|
|
124
|
+
if ((0, helpers_1.isNotMultipleParams)(params))
|
|
125
|
+
return (params === null || params === void 0 ? void 0 : params.value) || '';
|
|
144
126
|
return '';
|
|
145
127
|
};
|
|
146
128
|
/** Представление значение элемента контроля */
|
|
@@ -150,22 +132,22 @@ var SelectRender = function (inProps, ref) {
|
|
|
150
132
|
/** Устанавливает фокус на элементе контроля
|
|
151
133
|
* если компонент по умолчанию открыт — defaultOpen={true}
|
|
152
134
|
* и является неконтролируемым */
|
|
153
|
-
if (defaultOpen
|
|
135
|
+
if (defaultOpen)
|
|
154
136
|
(_a = bodyInnerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
155
|
-
|
|
156
|
-
}, [open]);
|
|
137
|
+
}, []);
|
|
157
138
|
(0, react_1.useEffect)(function () {
|
|
158
139
|
var _a;
|
|
159
140
|
/** Автофокус на элементе контроля */
|
|
160
|
-
if (autoFocus)
|
|
141
|
+
if (autoFocus)
|
|
161
142
|
(_a = bodyInnerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
162
|
-
}
|
|
163
143
|
}, [autoFocus]);
|
|
164
144
|
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
165
|
-
react_1.default.createElement(components_1.SelectInput, tslib_1.__assign({ size: size, disabled: disabled, required: required, multiline: multiline, fullWidth: fullWidth }, other, { open: open, onClick: handleClick, onKeyDown: handleKeyDown,
|
|
145
|
+
react_1.default.createElement(components_1.SelectInput, tslib_1.__assign({ size: size, disabled: disabled, required: required, multiline: multiline, fullWidth: fullWidth }, other, { open: open, value: inputValue(), onClick: handleClick, onKeyDown: handleKeyDown, renderedValue: renderValue({
|
|
166
146
|
label: currentLabel,
|
|
167
147
|
value: valueState,
|
|
168
|
-
}), bodyProps: tslib_1.__assign(tslib_1.__assign({}, bodyProps), { ref:
|
|
169
|
-
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,
|
|
148
|
+
}), bodyProps: tslib_1.__assign(tslib_1.__assign({}, bodyProps), { ref: bodyRef }), ref: ref })),
|
|
149
|
+
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, onClose: handleClose, onSelect: handleChange, anchorRef: bodyInnerRef,
|
|
150
|
+
// TODO: add `null` to `DataListSelected`
|
|
151
|
+
selected: (valueState || null) }), children)));
|
|
170
152
|
};
|
|
171
153
|
exports.Select = (0, react_1.forwardRef)(SelectRender);
|
|
@@ -14,7 +14,7 @@ var FieldLabel_1 = require("../../../FieldLabel");
|
|
|
14
14
|
var Fieldset_1 = require("../../../Fieldset");
|
|
15
15
|
var constants_1 = require("../../constants");
|
|
16
16
|
var index_1 = require("../../index");
|
|
17
|
-
var
|
|
17
|
+
var SelectInputContextConsumer_1 = require("../SelectInputContextConsumer");
|
|
18
18
|
exports.SelectInput = (0, react_1.forwardRef)(function (_a, ref) {
|
|
19
19
|
var _b = _a.size, size = _b === void 0 ? constants_1.SELECT_DEFAULT_SIZE : _b, _c = _a.multiline, multiline = _c === void 0 ? constants_1.SELECT_DEFAULT_MULTILINE : _c, open = _a.open, label = _a.label, error = _a.error, id = _a.id, name = _a.name, renderLeft = _a.renderLeft, renderRight = _a.renderRight, renderedValue = _a.renderedValue, fullWidth = _a.fullWidth, disabled = _a.disabled, hint = _a.hint, required = _a.required, className = _a.className, inputProps = _a.inputProps, valueProp = _a.value, placeholderProp = _a.placeholder, defaultValue = _a.defaultValue, onFocus = _a.onFocus, onBlur = _a.onBlur, onClick = _a.onClick, onKeyDown = _a.onKeyDown, labelProps = _a.labelProps, fieldProps = _a.fieldProps, hintProps = _a.hintProps, labelRef = _a.labelRef, inputRef = _a.inputRef, fieldRef = _a.fieldRef, bodyProps = _a.bodyProps, other = tslib_1.__rest(_a, ["size", "multiline", "open", "label", "error", "id", "name", "renderLeft", "renderRight", "renderedValue", "fullWidth", "disabled", "hint", "required", "className", "inputProps", "value", "placeholder", "defaultValue", "onFocus", "onBlur", "onClick", "onKeyDown", "labelProps", "fieldProps", "hintProps", "labelRef", "inputRef", "fieldRef", "bodyProps"]);
|
|
20
20
|
var _d = tslib_1.__read((0, useBoolean_1.useBoolean)(), 2), focused = _d[0], _e = _d[1], on = _e.on, off = _e.off;
|
|
@@ -27,14 +27,13 @@ exports.SelectInput = (0, react_1.forwardRef)(function (_a, ref) {
|
|
|
27
27
|
off();
|
|
28
28
|
onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
|
|
29
29
|
}, [onBlur]);
|
|
30
|
-
return (react_1.default.createElement(FieldControl_1.FieldControl, tslib_1.__assign({
|
|
31
|
-
|
|
32
|
-
}, [className]), ref: ref }),
|
|
33
|
-
react_1.default.createElement("div", tslib_1.__assign({ role: "button", "aria-haspopup": "listbox", "aria-expanded": open }, bodyProps, { onClick: onClick, onKeyDown: onKeyDown, tabIndex: disabled ? -1 : 0, onFocus: handleFocus, onBlur: handleBlur, className: (0, index_1.cnSelect)('Body', [bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.className]) }),
|
|
30
|
+
return (react_1.default.createElement(FieldControl_1.FieldControl, tslib_1.__assign({ size: size, error: error, filled: filled, focused: focused, disabled: disabled, required: required, fullWidth: fullWidth }, other, { ref: ref, className: (0, index_1.cnSelect)({ multiline: multiline }, [className]) }),
|
|
31
|
+
react_1.default.createElement("div", tslib_1.__assign({ role: "button", "aria-expanded": open, "aria-haspopup": "listbox" }, bodyProps, { onClick: onClick, onBlur: handleBlur, onKeyDown: onKeyDown, onFocus: handleFocus, tabIndex: disabled ? -1 : 0, className: (0, index_1.cnSelect)('Body', [bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.className]) }),
|
|
34
32
|
react_1.default.createElement(FieldIcon_1.FieldIcon, { icon: renderLeft, className: (0, index_1.cnSelect)('RenderLeft') }),
|
|
35
33
|
react_1.default.createElement("div", { className: (0, index_1.cnSelect)('FieldContainer') },
|
|
34
|
+
react_1.default.createElement("div", { className: (0, index_1.cnSelect)('HiddenLabel'), "aria-hidden": true }, label),
|
|
36
35
|
react_1.default.createElement(FieldLabel_1.FieldLabel, tslib_1.__assign({}, labelProps, { className: (0, index_1.cnSelect)('Label', [labelProps === null || labelProps === void 0 ? void 0 : labelProps.className]), ref: (labelProps === null || labelProps === void 0 ? void 0 : labelProps.ref) || labelRef }), label),
|
|
37
|
-
react_1.default.createElement(
|
|
36
|
+
react_1.default.createElement(SelectInputContextConsumer_1.SelectInputContextConsumer, { id: id, name: name, value: valueProp, fieldProps: fieldProps, inputProps: inputProps, defaultValue: defaultValue, renderedValue: renderedValue, placeholder: placeholderProp, fieldRef: (fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.ref) || fieldRef, inputRef: (inputProps === null || inputProps === void 0 ? void 0 : inputProps.ref) || inputRef })),
|
|
38
37
|
react_1.default.createElement(FieldIcon_1.FieldIcon, { icon: renderRight, className: (0, index_1.cnSelect)('RenderRight') }),
|
|
39
38
|
react_1.default.createElement(FieldIcon_1.FieldIcon, { icon: icons_1.ChevronDownIcon, className: (0, classnames_1.classnames)((0, index_1.cnSelect)('RenderRight'), (0, index_1.cnSelect)('DropDownIcon', { open: open })) }),
|
|
40
39
|
react_1.default.createElement(Fieldset_1.Fieldset, { className: (0, index_1.cnSelect)('Fieldset') })),
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import type { FC } from 'react';
|
|
2
|
+
import type { SelectInputProps } from '../SelectInput';
|
|
3
|
+
type SelectInputContextConsumerProps = Pick<SelectInputProps, 'value' | 'placeholder' | 'defaultValue' | 'id' | 'name' | 'fieldProps' | 'fieldRef' | 'inputProps' | 'inputRef' | 'renderedValue'>;
|
|
4
|
+
export declare const SelectInputContextConsumer: FC<SelectInputContextConsumerProps>;
|
|
5
|
+
export {};
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.
|
|
3
|
+
exports.SelectInputContextConsumer = void 0;
|
|
4
4
|
var tslib_1 = require("tslib");
|
|
5
5
|
var react_1 = tslib_1.__importDefault(require("react"));
|
|
6
6
|
var FieldControl_1 = require("../../../FieldControl");
|
|
7
7
|
var index_1 = require("../../index");
|
|
8
|
-
var
|
|
8
|
+
var SelectInputContextConsumer = function (_a) {
|
|
9
9
|
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;
|
|
10
10
|
var context = (0, FieldControl_1.useFieldControl)();
|
|
11
11
|
var _c = tslib_1.__read(context, 1), fieldControl = _c[0];
|
|
@@ -18,4 +18,4 @@ var SelectInputConsumer = function (_a) {
|
|
|
18
18
|
]), ref: fieldRef }), placeholder || renderedValue),
|
|
19
19
|
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 }))));
|
|
20
20
|
};
|
|
21
|
-
exports.
|
|
21
|
+
exports.SelectInputContextConsumer = SelectInputContextConsumer;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './SelectInputContextConsumer';
|
|
@@ -1,8 +1,5 @@
|
|
|
1
|
-
import type {
|
|
2
|
-
export
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
};
|
|
7
|
-
export declare const isMultipleParams: (params: SelectedParams<boolean>) => params is SelectedParams<true>;
|
|
8
|
-
export declare const isNotMultipleParams: (params: SelectedParams<boolean>) => params is SelectedParams<false>;
|
|
1
|
+
import type { SelectProps, SelectLabel } from '../types';
|
|
2
|
+
export declare const isMultipleParams: (params: SelectProps<boolean>) => params is SelectProps<true>;
|
|
3
|
+
export declare const isNotMultipleParams: (params: SelectProps<boolean>) => params is SelectProps<false>;
|
|
4
|
+
export declare const isMultipleLabel: (_label: SelectLabel<boolean>, multiple?: boolean) => _label is SelectLabel<true>;
|
|
5
|
+
export declare const isNotMultipleLabel: (_label: SelectLabel<boolean>, multiple?: boolean) => _label is SelectLabel<false>;
|
|
@@ -1,7 +1,11 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.isNotMultipleParams = exports.isMultipleParams = void 0;
|
|
3
|
+
exports.isNotMultipleLabel = exports.isMultipleLabel = exports.isNotMultipleParams = exports.isMultipleParams = void 0;
|
|
4
4
|
var isMultipleParams = function (params) { return !!params.multiple; };
|
|
5
5
|
exports.isMultipleParams = isMultipleParams;
|
|
6
6
|
var isNotMultipleParams = function (params) { return !params.multiple; };
|
|
7
7
|
exports.isNotMultipleParams = isNotMultipleParams;
|
|
8
|
+
var isMultipleLabel = function (_label, multiple) { return !!multiple; };
|
|
9
|
+
exports.isMultipleLabel = isMultipleLabel;
|
|
10
|
+
var isNotMultipleLabel = function (_label, multiple) { return !multiple; };
|
|
11
|
+
exports.isNotMultipleLabel = isNotMultipleLabel;
|
|
@@ -1,45 +1,37 @@
|
|
|
1
1
|
import type { ReactElement, ReactNode, SyntheticEvent } from 'react';
|
|
2
2
|
import type { ExtendableComponentPropsWithRef } from '../../types/ExtendableComponentPropsWithRef';
|
|
3
3
|
import type { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
|
|
4
|
-
import type { DataListBaseProps, DataListSelected } from '../DataList';
|
|
4
|
+
import type { DataListBaseProps, DataListOptionProps, DataListSelected } from '../DataList';
|
|
5
5
|
import type { SelectInputProps, SelectInputRef } from './components';
|
|
6
|
-
export type
|
|
7
|
-
export type SelectLabel =
|
|
8
|
-
export type
|
|
9
|
-
export type
|
|
10
|
-
export type
|
|
11
|
-
label?:
|
|
6
|
+
export type SelectPropSize = FormElementSizeVariant;
|
|
7
|
+
export type SelectLabel<MULTIPLE extends boolean = false> = (MULTIPLE extends true ? DataListOptionProps['label'][] : DataListOptionProps['label']) | undefined;
|
|
8
|
+
export type SelectPropValue<MULTIPLE extends boolean = false> = DataListSelected<MULTIPLE>;
|
|
9
|
+
export type SelectPropOnChange<MULTIPLE extends boolean = false> = (value: SelectPropValue<MULTIPLE>, e: SyntheticEvent | KeyboardEvent) => void;
|
|
10
|
+
export type SelectedOption<MULTIPLE extends boolean = false> = {
|
|
11
|
+
label?: SelectLabel<MULTIPLE>;
|
|
12
12
|
value?: SelectPropValue<MULTIPLE>;
|
|
13
13
|
};
|
|
14
|
-
export type
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
type SelectUncontrolledProps<MULTIPLE extends boolean = false> = {
|
|
36
|
-
/** Значение поля по умолчанию (неконтролируемый компонент) */
|
|
37
|
-
defaultValue: SelectPropValue<MULTIPLE>;
|
|
38
|
-
/** Выбранное значение */
|
|
39
|
-
value?: never;
|
|
40
|
-
/** Обработчик события на изменение выбранного значения */
|
|
41
|
-
onChange?: never;
|
|
42
|
-
};
|
|
14
|
+
export type SelectPropRenderValue<MULTIPLE extends boolean = false> = (option: SelectedOption<MULTIPLE>) => ReactNode | null;
|
|
15
|
+
/**
|
|
16
|
+
* @deprecated
|
|
17
|
+
* Use the `SelectRenderValueProp` type to replace it.
|
|
18
|
+
* */
|
|
19
|
+
export type SelectRenderValue<MULTIPLE extends boolean = false> = SelectPropRenderValue<MULTIPLE>;
|
|
20
|
+
/**
|
|
21
|
+
* @deprecated
|
|
22
|
+
* Use the `SelectLabel` type to replace it.
|
|
23
|
+
* */
|
|
24
|
+
export type SelectPropLabel<MULTIPLE extends boolean = false> = SelectLabel<MULTIPLE>;
|
|
25
|
+
/**
|
|
26
|
+
* @deprecated
|
|
27
|
+
* Use the `SelectSizeProp` type to replace it.
|
|
28
|
+
* */
|
|
29
|
+
export type SelectSizeVariant = SelectPropSize;
|
|
30
|
+
/**
|
|
31
|
+
* @deprecated
|
|
32
|
+
* Use the `SelectedPropOption` type to replace it.
|
|
33
|
+
* */
|
|
34
|
+
export type SelectedOptionProp<MULTIPLE extends boolean = false> = SelectedOption<MULTIPLE>;
|
|
43
35
|
type SelectPropsDeprecated<MULTIPLE extends boolean = false> = {
|
|
44
36
|
/**
|
|
45
37
|
* Свойства компонента Menu
|
|
@@ -52,21 +44,31 @@ export type SelectProps<MULTIPLE extends boolean = false> = ExtendableComponentP
|
|
|
52
44
|
/** Если `true` устанавливает автофокус */
|
|
53
45
|
autoFocus?: boolean;
|
|
54
46
|
/** Размер компонента */
|
|
55
|
-
size?:
|
|
47
|
+
size?: SelectPropSize;
|
|
48
|
+
/** Текущее состояние списка. Если `true`, список отображается. */
|
|
49
|
+
open?: boolean;
|
|
50
|
+
/** Состояние открытие по умолчанию (неконтролируемый компонент) */
|
|
51
|
+
defaultOpen?: boolean;
|
|
52
|
+
/** Выбранное значение */
|
|
53
|
+
value?: SelectPropValue<MULTIPLE>;
|
|
54
|
+
/** Обработчик события на изменение выбранного значения */
|
|
55
|
+
onChange?: SelectPropOnChange<MULTIPLE>;
|
|
56
|
+
/** Значение поля по умолчанию (неконтролируемый компонент) */
|
|
57
|
+
defaultValue?: SelectPropValue<MULTIPLE>;
|
|
56
58
|
/** Рендер-функция для выбранного значения */
|
|
57
|
-
renderValue?:
|
|
59
|
+
renderValue?: SelectPropRenderValue<MULTIPLE>;
|
|
58
60
|
/** Содержимое компонента */
|
|
59
61
|
children?: ReactNode;
|
|
60
62
|
/** Свойства компонента DataList */
|
|
61
63
|
dataListProps?: Partial<Omit<DataListBaseProps<MULTIPLE>, 'onClose' | 'open' | 'anchorRef' | 'multiple' | 'selected' | 'onSelect'>>;
|
|
62
64
|
/** Функция обратного вызова, которая будет вызвана когда компонент запрашивает закрытие */
|
|
63
|
-
onClose
|
|
65
|
+
onClose?(): void;
|
|
64
66
|
/** Функция обратного вызова, которая будет вызвана когда компонент запрашивает открытие */
|
|
65
|
-
onOpen
|
|
67
|
+
onOpen?(): void;
|
|
66
68
|
/** Если `true` из списка можно выбрать несколько вариантов */
|
|
67
69
|
multiple?: MULTIPLE;
|
|
68
70
|
/** Идентификатор компонента для тестов */
|
|
69
71
|
'data-testid'?: string;
|
|
70
|
-
} & Pick<SelectInputProps, 'id' | 'name' | 'label' | 'placeholder' | 'disabled' | 'required' | 'disableStroke' | 'error' | 'hint' | 'fullWidth' | 'renderLeft' | 'renderRight' | 'multiline' | 'inputProps' | 'labelProps' | 'hintProps' | 'bodyProps' | 'inputRef' | 'labelRef' | 'bodyRef'> & SelectPropsDeprecated<MULTIPLE
|
|
72
|
+
} & Pick<SelectInputProps, 'id' | 'name' | 'label' | 'placeholder' | 'disabled' | 'required' | 'disableStroke' | 'error' | 'hint' | 'fullWidth' | 'renderLeft' | 'renderRight' | 'multiline' | 'inputProps' | 'labelProps' | 'hintProps' | 'bodyProps' | 'inputRef' | 'labelRef' | 'bodyRef'> & SelectPropsDeprecated<MULTIPLE>, 'div'>;
|
|
71
73
|
export type SelectComponent = <MULTIPLE extends boolean = false>(props: SelectProps<MULTIPLE>) => ReactElement | null;
|
|
72
74
|
export {};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import type { ElementType, ReactElement } from 'react';
|
|
2
2
|
import type { ResponsiveValue } from '../../types/ResponsiveValue';
|
|
3
|
-
import type {
|
|
3
|
+
import type { PolymorphicComponentPropsWithRef } from '../../utils/polymorphicComponentWithRef';
|
|
4
4
|
export declare const stackGapVariant: readonly ["0", "xs", "s", "m", "l", "xl", "2xl", "3xl", "4xl", "5xl", "6xl", "7xl", "8xl"];
|
|
5
5
|
export declare const stackDirectionVariant: readonly ["row", "column", "rowReverse", "columnReverse"];
|
|
6
6
|
export declare const stackAlignVariant: readonly ["center", "start", "end", "baseline"];
|
|
@@ -27,4 +27,4 @@ export type StackBaseProps = {
|
|
|
27
27
|
/** React-элемент для разделителя между дочерними компонентами стека */
|
|
28
28
|
divider?: ReactElement;
|
|
29
29
|
};
|
|
30
|
-
export type StackProps<As extends ElementType = 'div'> =
|
|
30
|
+
export type StackProps<As extends ElementType = 'div'> = PolymorphicComponentPropsWithRef<StackBaseProps, As>;
|
|
@@ -2,76 +2,13 @@ import type { AutocompleteDefaultOption, AutocompletePropGetOptionDisabled, Auto
|
|
|
2
2
|
export declare const defaultGetOptionKey: AutocompletePropGetOptionKey<AutocompleteDefaultOption>;
|
|
3
3
|
export declare const defaultGetOptionLabel: AutocompletePropGetOptionLabel<AutocompleteDefaultOption>;
|
|
4
4
|
export declare const defaultGetOptionDisabled: AutocompletePropGetOptionDisabled<AutocompleteDefaultOption>;
|
|
5
|
-
export declare function withDefaultGetters<OPTION>(props: AutocompleteProps<OPTION>):
|
|
5
|
+
export declare function withDefaultGetters<OPTION>(props: AutocompleteProps<OPTION>): {
|
|
6
6
|
options: OPTION[];
|
|
7
7
|
size?: import("../../types/FormElementSizeVariant").FormElementSizeVariant;
|
|
8
8
|
value?: import("./types").AutocompletePropValue<OPTION>;
|
|
9
9
|
defaultValue?: import("./types").AutocompletePropValue<OPTION>;
|
|
10
|
-
onChange?: ((e: import("react").SyntheticEvent | KeyboardEvent, value: OPTION | null) => void) | undefined;
|
|
11
|
-
inputValue?: string;
|
|
12
|
-
onInputChange?: (e: import("react").ChangeEvent<HTMLInputElement> | null, value: string) => void;
|
|
13
|
-
renderInput?: import("./types").AutocompleteRenderInput;
|
|
14
|
-
renderOption?: import("./types").AutocompletePropRenderOption<OPTION> | undefined;
|
|
15
|
-
getOptionLabel?: AutocompletePropGetOptionLabel<OPTION> | undefined;
|
|
16
|
-
getOptionKey?: AutocompletePropGetOptionKey<OPTION> | undefined;
|
|
17
|
-
getOptionDisabled?: AutocompletePropGetOptionDisabled<OPTION> | undefined;
|
|
18
|
-
disableCloseOnSelect?: boolean;
|
|
19
|
-
allowCustomValue?: boolean;
|
|
20
|
-
loading?: boolean;
|
|
21
|
-
noOptionsText?: import("react").ReactNode;
|
|
22
|
-
clearText?: string;
|
|
23
|
-
openText?: string;
|
|
24
|
-
closeText?: string;
|
|
25
|
-
loadingText?: import("react").ReactNode;
|
|
26
|
-
onClose?: () => void;
|
|
27
|
-
onOpen?: () => void;
|
|
28
|
-
disableClearButton?: boolean;
|
|
29
|
-
searchFunction?: import("./types").AutocompleteSearchFunction<OPTION> | undefined;
|
|
30
|
-
disableShowEmptyOptionsList?: boolean;
|
|
31
|
-
disableShowChevron?: boolean;
|
|
32
|
-
dataListProps?: Partial<Omit<import("../DataList").DataListProps, "onSelect" | "open" | "onClose" | "multiple" | "selected" | "anchorRef">>;
|
|
33
|
-
} & {
|
|
34
|
-
error?: boolean | undefined;
|
|
35
|
-
label?: string | undefined;
|
|
36
|
-
style?: import("react").CSSProperties | undefined;
|
|
37
|
-
className?: string | undefined;
|
|
38
|
-
onKeyDown?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
|
|
39
|
-
autoFocus?: boolean | undefined;
|
|
40
|
-
disabled?: boolean | undefined;
|
|
41
|
-
placeholder?: string | undefined;
|
|
42
|
-
required?: boolean | undefined;
|
|
43
|
-
fullWidth?: boolean | undefined;
|
|
44
|
-
disableStroke?: boolean | undefined;
|
|
45
|
-
hint?: string | null | undefined;
|
|
46
|
-
renderLeft?: import("../FieldIcon").FieldIconProps["icon"];
|
|
47
|
-
renderRight?: import("../FieldIcon").FieldIconProps["icon"];
|
|
48
|
-
inputProps?: import("../FieldInput").FieldInputProps | undefined;
|
|
49
|
-
bodyProps?: import("react").ComponentPropsWithRef<"label"> | undefined;
|
|
50
|
-
hintProps?: Omit<import("../FieldHint").FieldHintProps, "children"> | undefined;
|
|
51
|
-
} & {
|
|
52
10
|
open?: boolean;
|
|
53
|
-
defaultOpen?:
|
|
54
|
-
} & (OPTION extends {
|
|
55
|
-
label: AutocompleteDefaultOption["label"];
|
|
56
|
-
} ? Record<string, unknown> : {
|
|
57
|
-
getOptionLabel?: AutocompletePropGetOptionLabel<OPTION> | undefined;
|
|
58
|
-
}) & (OPTION extends {
|
|
59
|
-
id: AutocompleteDefaultOption["id"];
|
|
60
|
-
} ? Record<string, unknown> : {
|
|
61
|
-
getOptionKey?: AutocompletePropGetOptionKey<OPTION> | undefined;
|
|
62
|
-
}) & (OPTION extends {
|
|
63
|
-
disabled: AutocompleteDefaultOption["disabled"];
|
|
64
|
-
} ? Record<string, unknown> : {
|
|
65
|
-
getOptionDisabled?: AutocompletePropGetOptionDisabled<OPTION> | undefined;
|
|
66
|
-
}) & {
|
|
67
|
-
getOptionLabel: AutocompletePropGetOptionLabel<AutocompleteDefaultOption> | AutocompletePropGetOptionLabel<OPTION>;
|
|
68
|
-
getOptionKey: AutocompletePropGetOptionKey<AutocompleteDefaultOption> | AutocompletePropGetOptionKey<OPTION>;
|
|
69
|
-
getOptionDisabled: AutocompletePropGetOptionDisabled<AutocompleteDefaultOption> | AutocompletePropGetOptionDisabled<OPTION>;
|
|
70
|
-
}) | ({
|
|
71
|
-
options: OPTION[];
|
|
72
|
-
size?: import("../../types/FormElementSizeVariant").FormElementSizeVariant;
|
|
73
|
-
value?: import("./types").AutocompletePropValue<OPTION>;
|
|
74
|
-
defaultValue?: import("./types").AutocompletePropValue<OPTION>;
|
|
11
|
+
defaultOpen?: boolean;
|
|
75
12
|
onChange?: ((e: import("react").SyntheticEvent | KeyboardEvent, value: OPTION | null) => void) | undefined;
|
|
76
13
|
inputValue?: string;
|
|
77
14
|
onInputChange?: (e: import("react").ChangeEvent<HTMLInputElement> | null, value: string) => void;
|
|
@@ -95,6 +32,7 @@ export declare function withDefaultGetters<OPTION>(props: AutocompleteProps<OPTI
|
|
|
95
32
|
disableShowEmptyOptionsList?: boolean;
|
|
96
33
|
disableShowChevron?: boolean;
|
|
97
34
|
dataListProps?: Partial<Omit<import("../DataList").DataListProps, "onSelect" | "open" | "onClose" | "multiple" | "selected" | "anchorRef">>;
|
|
35
|
+
ref?: import("react").Ref<HTMLDivElement>;
|
|
98
36
|
} & {
|
|
99
37
|
error?: boolean | undefined;
|
|
100
38
|
label?: string | undefined;
|
|
@@ -113,23 +51,20 @@ export declare function withDefaultGetters<OPTION>(props: AutocompleteProps<OPTI
|
|
|
113
51
|
inputProps?: import("../FieldInput").FieldInputProps | undefined;
|
|
114
52
|
bodyProps?: import("react").ComponentPropsWithRef<"label"> | undefined;
|
|
115
53
|
hintProps?: Omit<import("../FieldHint").FieldHintProps, "children"> | undefined;
|
|
116
|
-
} & {
|
|
117
|
-
open?: never;
|
|
118
|
-
defaultOpen?: boolean;
|
|
119
54
|
} & (OPTION extends {
|
|
120
55
|
label: AutocompleteDefaultOption["label"];
|
|
121
|
-
} ?
|
|
56
|
+
} ? object : {
|
|
122
57
|
getOptionLabel?: AutocompletePropGetOptionLabel<OPTION> | undefined;
|
|
123
58
|
}) & (OPTION extends {
|
|
124
59
|
id: AutocompleteDefaultOption["id"];
|
|
125
|
-
} ?
|
|
60
|
+
} ? object : {
|
|
126
61
|
getOptionKey?: AutocompletePropGetOptionKey<OPTION> | undefined;
|
|
127
62
|
}) & (OPTION extends {
|
|
128
63
|
disabled: AutocompleteDefaultOption["disabled"];
|
|
129
|
-
} ?
|
|
64
|
+
} ? object : {
|
|
130
65
|
getOptionDisabled?: AutocompletePropGetOptionDisabled<OPTION> | undefined;
|
|
131
66
|
}) & {
|
|
132
67
|
getOptionLabel: AutocompletePropGetOptionLabel<AutocompleteDefaultOption> | AutocompletePropGetOptionLabel<OPTION>;
|
|
133
68
|
getOptionKey: AutocompletePropGetOptionKey<AutocompleteDefaultOption> | AutocompletePropGetOptionKey<OPTION>;
|
|
134
69
|
getOptionDisabled: AutocompletePropGetOptionDisabled<AutocompleteDefaultOption> | AutocompletePropGetOptionDisabled<OPTION>;
|
|
135
|
-
}
|
|
70
|
+
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { ChangeEvent, ReactElement, ReactNode, SyntheticEvent } from 'react';
|
|
1
|
+
import type { ChangeEvent, ReactElement, ReactNode, Ref, SyntheticEvent } from 'react';
|
|
2
2
|
import type { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
|
|
3
3
|
import type { DataListProps } from '../DataList';
|
|
4
4
|
import type { InputProps } from '../Input';
|
|
@@ -18,18 +18,6 @@ export type AutocompleteDefaultOption = {
|
|
|
18
18
|
};
|
|
19
19
|
export type AutocompleteSearchFunction<OPTION> = (options: OPTION[], searchValue: string) => OPTION[];
|
|
20
20
|
export type AutocompleteRenderInput = (props: InputProps) => ReactNode;
|
|
21
|
-
type AutocompleteOpenControlledProps = {
|
|
22
|
-
/** Текущее состояние списка. Если `true`, список отображается. */
|
|
23
|
-
open?: boolean;
|
|
24
|
-
/** Состояние открытие по умолчанию (неконтролируемый компонент) */
|
|
25
|
-
defaultOpen?: never;
|
|
26
|
-
};
|
|
27
|
-
type AutocompleteOpenUncontrolledProps = {
|
|
28
|
-
/** Текущее состояние списка. Если `true`, список отображается. */
|
|
29
|
-
open?: never;
|
|
30
|
-
/** Состояние открытие по умолчанию (неконтролируемый компонент) */
|
|
31
|
-
defaultOpen?: boolean;
|
|
32
|
-
};
|
|
33
21
|
type AutocompleteInputProps = Pick<InputProps, 'placeholder' | 'autoFocus' | 'fullWidth' | 'disabled' | 'label' | 'required' | 'disableStroke' | 'style' | 'error' | 'hint' | 'renderLeft' | 'renderRight' | 'className' | 'inputProps' | 'hintProps' | 'bodyProps' | 'onKeyDown'>;
|
|
34
22
|
type AutocompleteDataListProps = Partial<Omit<DataListProps, 'onClose' | 'open' | 'anchorRef' | 'multiple' | 'selected' | 'onSelect'>>;
|
|
35
23
|
export type AutocompleteProps<OPTION = AutocompleteDefaultOption> = {
|
|
@@ -41,6 +29,10 @@ export type AutocompleteProps<OPTION = AutocompleteDefaultOption> = {
|
|
|
41
29
|
value?: AutocompletePropValue<OPTION>;
|
|
42
30
|
/** Выбранное значение опции по умолчанию */
|
|
43
31
|
defaultValue?: AutocompletePropValue<OPTION>;
|
|
32
|
+
/** Текущее состояние списка. Если `true`, список отображается. */
|
|
33
|
+
open?: boolean;
|
|
34
|
+
/** Состояние открытие по умолчанию (неконтролируемый компонент) */
|
|
35
|
+
defaultOpen?: boolean;
|
|
44
36
|
/** Функция обратного вызова, которая будет вызвана при выборе значения */
|
|
45
37
|
onChange?: (e: SyntheticEvent | KeyboardEvent, value: OPTION | null) => void;
|
|
46
38
|
/** Введённое значение в текстовом поле */
|
|
@@ -87,17 +79,19 @@ export type AutocompleteProps<OPTION = AutocompleteDefaultOption> = {
|
|
|
87
79
|
disableShowChevron?: boolean;
|
|
88
80
|
/** Свойства компонента DataList */
|
|
89
81
|
dataListProps?: AutocompleteDataListProps;
|
|
90
|
-
|
|
82
|
+
/** Ссылка на HTML элемент */
|
|
83
|
+
ref?: Ref<HTMLDivElement>;
|
|
84
|
+
} & AutocompleteInputProps & (OPTION extends {
|
|
91
85
|
label: AutocompleteDefaultOption['label'];
|
|
92
|
-
} ?
|
|
86
|
+
} ? object : {
|
|
93
87
|
getOptionLabel?: AutocompletePropGetOptionLabel<OPTION>;
|
|
94
88
|
}) & (OPTION extends {
|
|
95
89
|
id: AutocompleteDefaultOption['id'];
|
|
96
|
-
} ?
|
|
90
|
+
} ? object : {
|
|
97
91
|
getOptionKey?: AutocompletePropGetOptionKey<OPTION>;
|
|
98
92
|
}) & (OPTION extends {
|
|
99
93
|
disabled: AutocompleteDefaultOption['disabled'];
|
|
100
|
-
} ?
|
|
94
|
+
} ? object : {
|
|
101
95
|
getOptionDisabled?: AutocompletePropGetOptionDisabled<OPTION>;
|
|
102
96
|
});
|
|
103
97
|
export type AutocompleteComponent = <OPTION = AutocompleteDefaultOption>(props: AutocompleteProps<OPTION>) => ReactElement | null;
|