@ozen-ui/kit 0.41.0 → 0.42.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/README.md +1 -1
- package/__inner__/cjs/components/Autocomplete/helper.d.ts +2 -0
- package/__inner__/cjs/components/Autocomplete/types.d.ts +2 -2
- package/__inner__/cjs/components/FilePicker/FilePicker.d.ts +4 -2
- package/__inner__/cjs/components/FilePicker/FilePicker.js +2 -2
- package/__inner__/cjs/components/FilePicker/types.d.ts +4 -1
- package/__inner__/cjs/components/IconButtonNext/IconButton.css +1 -0
- package/__inner__/cjs/components/Input/Input.js +2 -2
- package/__inner__/cjs/components/Input/types.d.ts +3 -0
- package/__inner__/cjs/components/InputNumber/InputNumber.js +2 -2
- package/__inner__/cjs/components/InputNumber/types.d.ts +4 -1
- package/__inner__/cjs/components/Pagination/Pagination.css +9 -9
- package/__inner__/cjs/components/Pagination/Pagination.d.ts +2 -2
- package/__inner__/cjs/components/Pagination/Pagination.js +21 -11
- package/__inner__/cjs/components/Pagination/components/PaginationItem/PaginationItem.css +19 -13
- package/__inner__/cjs/components/Pagination/components/PaginationItem/PaginationItem.js +7 -6
- package/__inner__/cjs/components/Pagination/constants.d.ts +4 -0
- package/__inner__/cjs/components/Pagination/constants.js +5 -1
- package/__inner__/cjs/components/Pagination/helpers/getItemAriaLabel/getItemAriaLabel.js +4 -4
- package/__inner__/cjs/components/Pagination/types.d.ts +6 -3
- package/__inner__/cjs/components/Select/Select.js +2 -2
- package/__inner__/cjs/components/Select/components/SelectInput/SelectInput.js +2 -2
- package/__inner__/cjs/components/Select/components/SelectInput/types.d.ts +5 -1
- package/__inner__/cjs/components/Select/types.d.ts +2 -2
- package/__inner__/cjs/components/Textarea/Textarea.js +2 -2
- package/__inner__/cjs/components/Textarea/components/TextareaConsumer.js +2 -2
- package/__inner__/cjs/components/Textarea/types.d.ts +4 -1
- package/__inner__/cjs/locale/locale.js +58 -0
- package/__inner__/esm/components/Autocomplete/Autocomplete.js +2 -2
- package/__inner__/esm/components/Autocomplete/helper.d.ts +2 -0
- package/__inner__/esm/components/Autocomplete/types.d.ts +2 -2
- package/__inner__/esm/components/FilePicker/FilePicker.d.ts +4 -2
- package/__inner__/esm/components/FilePicker/FilePicker.js +4 -4
- package/__inner__/esm/components/FilePicker/types.d.ts +4 -1
- package/__inner__/esm/components/IconButtonNext/IconButton.css +1 -0
- package/__inner__/esm/components/Input/Input.js +2 -2
- package/__inner__/esm/components/Input/types.d.ts +3 -0
- package/__inner__/esm/components/InputNumber/InputNumber.js +5 -5
- package/__inner__/esm/components/InputNumber/types.d.ts +4 -1
- package/__inner__/esm/components/Pagination/Pagination.css +9 -9
- package/__inner__/esm/components/Pagination/Pagination.d.ts +2 -2
- package/__inner__/esm/components/Pagination/Pagination.js +23 -13
- package/__inner__/esm/components/Pagination/components/PaginationItem/PaginationItem.css +19 -13
- package/__inner__/esm/components/Pagination/components/PaginationItem/PaginationItem.js +8 -7
- package/__inner__/esm/components/Pagination/constants.d.ts +4 -0
- package/__inner__/esm/components/Pagination/constants.js +4 -0
- package/__inner__/esm/components/Pagination/helpers/getItemAriaLabel/getItemAriaLabel.js +4 -4
- package/__inner__/esm/components/Pagination/types.d.ts +6 -3
- package/__inner__/esm/components/Select/Select.js +3 -3
- package/__inner__/esm/components/Select/components/SelectInput/SelectInput.js +2 -2
- package/__inner__/esm/components/Select/components/SelectInput/types.d.ts +5 -1
- package/__inner__/esm/components/Select/types.d.ts +2 -2
- package/__inner__/esm/components/Textarea/Textarea.js +2 -2
- package/__inner__/esm/components/Textarea/components/TextareaConsumer.js +2 -2
- package/__inner__/esm/components/Textarea/types.d.ts +4 -1
- package/__inner__/esm/locale/locale.js +58 -0
- package/package.json +4 -4
package/README.md
CHANGED
|
@@ -80,6 +80,7 @@ export declare function withDefaultGetters<OPTION>(props: AutocompleteProps<OPTI
|
|
|
80
80
|
} & {
|
|
81
81
|
'data-testid'?: string | undefined;
|
|
82
82
|
}) | undefined;
|
|
83
|
+
hintProps?: Omit<import("../FieldHint").FieldHintProps, "children"> | undefined;
|
|
83
84
|
} & {
|
|
84
85
|
open?: boolean | undefined;
|
|
85
86
|
defaultOpen?: undefined;
|
|
@@ -176,6 +177,7 @@ export declare function withDefaultGetters<OPTION>(props: AutocompleteProps<OPTI
|
|
|
176
177
|
} & {
|
|
177
178
|
'data-testid'?: string | undefined;
|
|
178
179
|
}) | undefined;
|
|
180
|
+
hintProps?: Omit<import("../FieldHint").FieldHintProps, "children"> | undefined;
|
|
179
181
|
} & {
|
|
180
182
|
open?: undefined;
|
|
181
183
|
defaultOpen?: boolean | undefined;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type {
|
|
1
|
+
import type { ChangeEvent, ReactElement, ReactNode, 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';
|
|
@@ -31,7 +31,7 @@ type AutocompleteOpenUncontrolledProps = {
|
|
|
31
31
|
/** Состояние открытие по умолчанию (неконтролируемый компонент) */
|
|
32
32
|
defaultOpen?: boolean;
|
|
33
33
|
};
|
|
34
|
-
type AutocompleteInputProps = Pick<InputProps, 'placeholder' | 'autoFocus' | 'fullWidth' | 'disabled' | 'label' | 'required' | 'style' | 'error' | 'hint' | 'renderLeft' | 'renderRight' | 'className' | 'inputProps' | 'onKeyDown'>;
|
|
34
|
+
type AutocompleteInputProps = Pick<InputProps, 'placeholder' | 'autoFocus' | 'fullWidth' | 'disabled' | 'label' | 'required' | 'style' | 'error' | 'hint' | 'renderLeft' | 'renderRight' | 'className' | 'inputProps' | 'hintProps' | 'onKeyDown'>;
|
|
35
35
|
type AutocompleteDataListProps = Partial<Omit<DataListProps, 'onClose' | 'open' | 'anchorRef' | 'multiple' | 'selected' | 'onSelect'>>;
|
|
36
36
|
export type AutocompleteProps<OPTION = AutocompleteDefaultOption> = {
|
|
37
37
|
/** Список вариантов выбора (опции) */
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import './FilePicker.css';
|
|
2
|
+
import type { KeyboardEvent, MouseEvent } from 'react';
|
|
2
3
|
import React from 'react';
|
|
3
4
|
export declare const cnFilePicker: import("@bem-react/classname").ClassNameFormatter;
|
|
4
5
|
export declare const FilePicker: React.ForwardRefExoticComponent<{
|
|
@@ -56,9 +57,10 @@ export declare const FilePicker: React.ForwardRefExoticComponent<{
|
|
|
56
57
|
error?: boolean | undefined;
|
|
57
58
|
disabled?: boolean | undefined;
|
|
58
59
|
labelProps?: import("../FieldLabel").FieldLabelProps | undefined;
|
|
60
|
+
hintProps?: Omit<import("../FieldHint").FieldHintProps, "children"> | undefined;
|
|
59
61
|
renderValue?: import("./types").FilePickerRenderValue | undefined;
|
|
60
62
|
clearText?: string | undefined;
|
|
61
|
-
onClear?: ((e:
|
|
63
|
+
onClear?: ((e: KeyboardEvent<HTMLInputElement> | MouseEvent<HTMLButtonElement, globalThis.MouseEvent>, payload: {
|
|
62
64
|
name?: string | undefined;
|
|
63
65
|
}) => void) | undefined;
|
|
64
66
|
className?: string | undefined;
|
|
@@ -66,7 +68,7 @@ export declare const FilePicker: React.ForwardRefExoticComponent<{
|
|
|
66
68
|
} & {
|
|
67
69
|
labelRef?: ((instance: HTMLSpanElement | null) => void) | React.RefObject<HTMLSpanElement> | null | undefined;
|
|
68
70
|
inputRef?: React.Ref<HTMLInputElement> | undefined;
|
|
69
|
-
} & Omit<React.HTMLAttributes<HTMLDivElement>, "name" | "label" | "className" | "id" | "onChange" | "autoFocus" | "disabled" | "accept" | "multiple" | "placeholder" | "required" | "size" | "error" | "fullWidth" | "labelProps" | "data-testid" | "hint" | "renderLeft" | "renderRight" | "inputProps" | "clearText" | "onClear" | "fileList" | "disableTruncate" | "renderValue" | keyof {
|
|
71
|
+
} & Omit<React.HTMLAttributes<HTMLDivElement>, "name" | "label" | "className" | "id" | "onChange" | "autoFocus" | "disabled" | "accept" | "multiple" | "placeholder" | "required" | "size" | "error" | "fullWidth" | "labelProps" | "data-testid" | "hint" | "renderLeft" | "renderRight" | "inputProps" | "hintProps" | "clearText" | "onClear" | "fileList" | "disableTruncate" | "renderValue" | keyof {
|
|
70
72
|
labelRef?: ((instance: HTMLSpanElement | null) => void) | React.RefObject<HTMLSpanElement> | null | undefined;
|
|
71
73
|
inputRef?: React.Ref<HTMLInputElement> | undefined;
|
|
72
74
|
}> & React.RefAttributes<HTMLDivElement>>;
|
|
@@ -22,7 +22,7 @@ exports.FilePicker = (0, react_1.forwardRef)(function (inProps, ref) {
|
|
|
22
22
|
var _a = (0, useThemeProps_1.useThemeProps)({
|
|
23
23
|
props: inProps,
|
|
24
24
|
name: 'FilePicker',
|
|
25
|
-
}), _b = _a.size, size = _b === void 0 ? constants_1.FILE_PICKER_DEFAULT_SIZE : _b, _c = _a.disabled, disabled = _c === void 0 ? constants_1.FILE_PICKER_DEFAULT_DISABLED : _c, _d = _a.required, required = _d === void 0 ? constants_1.FILE_PICKER_DEFAULT_REQUIRED : _d, _e = _a.fullWidth, fullWidth = _e === void 0 ? constants_1.FILE_PICKER_DEFAULT_FULL_WIDTH : _e, _f = _a.disableTruncate, disableTruncate = _f === void 0 ? constants_1.FILE_PICKER_DEFAULT_DISABLE_TRUNCATE : _f, _g = _a.multiple, multiple = _g === void 0 ? constants_1.FILE_PICKER_DEFAULT_MULTIPLE : _g, placeholder = _a.placeholder, clearText = _a.clearText, _h = _a.renderRight, renderRight = _h === void 0 ? icons_1.AttachmentIcon : _h, renderValueProp = _a.renderValue, onChangeProp = _a.onChange, onClearProp = _a.onClear, inputRef = _a.inputRef, fileList = _a.fileList, accept = _a.accept, id = _a.id, name = _a.name, label = _a.label, autoFocus = _a.autoFocus, error = _a.error, hint = _a.hint, renderLeft = _a.renderLeft, labelProps = _a.labelProps, inputProps = _a.inputProps, labelRef = _a.labelRef, className = _a.className, other = tslib_1.__rest(_a, ["size", "disabled", "required", "fullWidth", "disableTruncate", "multiple", "placeholder", "clearText", "renderRight", "renderValue", "onChange", "onClear", "inputRef", "fileList", "accept", "id", "name", "label", "autoFocus", "error", "hint", "renderLeft", "labelProps", "inputProps", "labelRef", "className"]);
|
|
25
|
+
}), _b = _a.size, size = _b === void 0 ? constants_1.FILE_PICKER_DEFAULT_SIZE : _b, _c = _a.disabled, disabled = _c === void 0 ? constants_1.FILE_PICKER_DEFAULT_DISABLED : _c, _d = _a.required, required = _d === void 0 ? constants_1.FILE_PICKER_DEFAULT_REQUIRED : _d, _e = _a.fullWidth, fullWidth = _e === void 0 ? constants_1.FILE_PICKER_DEFAULT_FULL_WIDTH : _e, _f = _a.disableTruncate, disableTruncate = _f === void 0 ? constants_1.FILE_PICKER_DEFAULT_DISABLE_TRUNCATE : _f, _g = _a.multiple, multiple = _g === void 0 ? constants_1.FILE_PICKER_DEFAULT_MULTIPLE : _g, placeholder = _a.placeholder, clearText = _a.clearText, _h = _a.renderRight, renderRight = _h === void 0 ? icons_1.AttachmentIcon : _h, renderValueProp = _a.renderValue, onChangeProp = _a.onChange, onClearProp = _a.onClear, inputRef = _a.inputRef, fileList = _a.fileList, accept = _a.accept, id = _a.id, name = _a.name, label = _a.label, autoFocus = _a.autoFocus, error = _a.error, hint = _a.hint, renderLeft = _a.renderLeft, labelProps = _a.labelProps, inputProps = _a.inputProps, hintProps = _a.hintProps, labelRef = _a.labelRef, className = _a.className, other = tslib_1.__rest(_a, ["size", "disabled", "required", "fullWidth", "disableTruncate", "multiple", "placeholder", "clearText", "renderRight", "renderValue", "onChange", "onClear", "inputRef", "fileList", "accept", "id", "name", "label", "autoFocus", "error", "hint", "renderLeft", "labelProps", "inputProps", "hintProps", "labelRef", "className"]);
|
|
26
26
|
if (process.env.NODE_ENV !== 'production' && labelRef) {
|
|
27
27
|
(0, logger_1.deprecate)('Свойство «labelRef» устарело. Для замены используйте «labelProps.ref».');
|
|
28
28
|
}
|
|
@@ -75,6 +75,6 @@ exports.FilePicker = (0, react_1.forwardRef)(function (inProps, ref) {
|
|
|
75
75
|
}) })),
|
|
76
76
|
react_1.default.createElement(FieldIcon_1.FieldIcon, { icon: renderRight })),
|
|
77
77
|
react_1.default.createElement(Fieldset_1.Fieldset, null)),
|
|
78
|
-
react_1.default.createElement(FieldHint_1.FieldHint,
|
|
78
|
+
react_1.default.createElement(FieldHint_1.FieldHint, tslib_1.__assign({}, hintProps), hint)));
|
|
79
79
|
});
|
|
80
80
|
exports.FilePicker.displayName = 'FilePicker';
|
|
@@ -1,6 +1,7 @@
|
|
|
1
|
-
import type {
|
|
1
|
+
import type { ChangeEventHandler, ComponentPropsWithRef, HTMLAttributes, KeyboardEvent, MouseEvent, ReactNode, Ref } from 'react';
|
|
2
2
|
import type { ExtendableProps } from '../../types/ExtendableProps';
|
|
3
3
|
import type { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
|
|
4
|
+
import type { FieldHintProps } from '../FieldHint';
|
|
4
5
|
import type { FieldIconProps } from '../FieldIcon';
|
|
5
6
|
import type { FieldLabelProps } from '../FieldLabel';
|
|
6
7
|
export type FilePickerSizeVariant = FormElementSizeVariant;
|
|
@@ -61,6 +62,8 @@ export type FilePickerBaseProps = {
|
|
|
61
62
|
disabled?: boolean;
|
|
62
63
|
/** Свойства FieldLabel */
|
|
63
64
|
labelProps?: FieldLabelProps;
|
|
65
|
+
/** Cвойства FieldHint */
|
|
66
|
+
hintProps?: Omit<FieldHintProps, 'children'>;
|
|
64
67
|
/** Функция */
|
|
65
68
|
renderValue?: FilePickerRenderValue;
|
|
66
69
|
/** Текст для кнопки очистки поля */
|
|
@@ -21,7 +21,7 @@ exports.Input = (0, react_1.forwardRef)(function (inProps, ref) {
|
|
|
21
21
|
props: inProps,
|
|
22
22
|
name: 'Input',
|
|
23
23
|
});
|
|
24
|
-
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, maxLength = props.maxLength, minLength = props.minLength, 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", "maxLength", "minLength", "inputRef", "labelRef"]);
|
|
24
|
+
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, hintProps = props.hintProps, maxLength = props.maxLength, minLength = props.minLength, 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", "hintProps", "maxLength", "minLength", "inputRef", "labelRef"]);
|
|
25
25
|
var bodyInnerRef = (0, react_1.useRef)(null);
|
|
26
26
|
var fieldInnerRef = (0, react_1.useRef)(null);
|
|
27
27
|
/* Хук useEventListener необходим для того, чтобы при нажатии на кнопку мыши
|
|
@@ -48,6 +48,6 @@ exports.Input = (0, react_1.forwardRef)(function (inProps, ref) {
|
|
|
48
48
|
react_1.default.createElement(FieldInput_1.FieldInput, tslib_1.__assign({ id: id, name: name, autoFocus: autoFocus, value: value, type: type, defaultValue: defaultValue, placeholder: placeholder, onChange: onChange, maxLength: maxLength, minLength: minLength }, inputProps, { className: (0, exports.cnInput)('Field', [inputProps === null || inputProps === void 0 ? void 0 : inputProps.className]), ref: (0, useMultiRef_1.useMultiRef)([inputRef || (inputProps === null || inputProps === void 0 ? void 0 : inputProps.ref), fieldInnerRef]) }))),
|
|
49
49
|
react_1.default.createElement(FieldIcon_1.FieldIcon, { icon: renderRight }),
|
|
50
50
|
react_1.default.createElement(Fieldset_1.Fieldset, null)),
|
|
51
|
-
react_1.default.createElement(FieldHint_1.FieldHint,
|
|
51
|
+
react_1.default.createElement(FieldHint_1.FieldHint, tslib_1.__assign({}, hintProps), hint)));
|
|
52
52
|
});
|
|
53
53
|
exports.Input.displayName = 'Input';
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import type { ComponentPropsWithRef, Ref } from 'react';
|
|
2
2
|
import type { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
|
|
3
3
|
import type { FIELD_CONTROL_DEFAULT_TAG } from '../FieldControl';
|
|
4
|
+
import type { FieldHintProps } from '../FieldHint';
|
|
4
5
|
import type { FieldIconProps } from '../FieldIcon';
|
|
5
6
|
import type { FieldLabelProps } from '../FieldLabel';
|
|
6
7
|
export declare const inputTypeVariant: readonly ["number", "date", "datetime-local", "time", "text", "tel", "password", "email"];
|
|
@@ -66,6 +67,8 @@ export type InputProps = Omit<ComponentPropsWithRef<typeof FIELD_CONTROL_DEFAULT
|
|
|
66
67
|
labelProps?: FieldLabelProps;
|
|
67
68
|
/** Cвойства Body */
|
|
68
69
|
bodyProps?: ComponentPropsWithRef<'label'>;
|
|
70
|
+
/** Cвойства FieldHint */
|
|
71
|
+
hintProps?: Omit<FieldHintProps, 'children'>;
|
|
69
72
|
/** data-атрибут для тестирования */
|
|
70
73
|
'data-testid'?: string;
|
|
71
74
|
} & InputPropsDeprecated;
|
|
@@ -27,7 +27,7 @@ exports.InputNumber = (0, react_1.forwardRef)(function (inProps, ref) {
|
|
|
27
27
|
props: inProps,
|
|
28
28
|
name: 'InputNumber',
|
|
29
29
|
});
|
|
30
|
-
var _a = props.size, size = _a === void 0 ? constants_1.INPUT_NUMBER_DEFAULT_SIZE : _a, _b = props.step, step = _b === void 0 ? constants_1.INPUT_NUMBER_DEFAULT_STEP : _b, _c = props.autoFocus, autoFocus = _c === void 0 ? constants_1.INPUT_NUMBER_DEFAULT_AUTO_FOCUS : _c, _d = props.error, error = _d === void 0 ? constants_1.INPUT_NUMBER_DEFAULT_ERROR : _d, _e = props.required, required = _e === void 0 ? constants_1.INPUT_NUMBER_DEFAULT_REQUIRED : _e, _f = props.disabled, disabled = _f === void 0 ? constants_1.INPUT_NUMBER_DEFAULT_DISABLED : _f, _g = props.fullWidth, fullWidth = _g === void 0 ? constants_1.INPUT_NUMBER_DEFAULT_FULL_WIDTH : _g, _h = props.defaultValue, defaultValue = _h === void 0 ? constants_1.INPUT_NUMBER_DEFAULT_VALUE : _h, _j = props.min, min = _j === void 0 ? constants_1.INPUT_NUMBER_DEFAULT_MIN : _j, _k = props.max, max = _k === void 0 ? constants_1.INPUT_NUMBER_DEFAULT_MAX : _k, label = props.label, placeholder = props.placeholder, id = props.id, name = props.name, renderLeft = props.renderLeft, renderRight = props.renderRight, hint = props.hint, className = props.className, inputProps = props.inputProps, valueProp = props.value, onChange = props.onChange, labelRef = props.labelRef, labelProps = props.labelProps, bodyProps = props.bodyProps, incrementButtonText = props.incrementButtonText, decrementButtonText = props.decrementButtonText, other = tslib_1.__rest(props, ["size", "step", "autoFocus", "error", "required", "disabled", "fullWidth", "defaultValue", "min", "max", "label", "placeholder", "id", "name", "renderLeft", "renderRight", "hint", "className", "inputProps", "value", "onChange", "labelRef", "labelProps", "bodyProps", "incrementButtonText", "decrementButtonText"]);
|
|
30
|
+
var _a = props.size, size = _a === void 0 ? constants_1.INPUT_NUMBER_DEFAULT_SIZE : _a, _b = props.step, step = _b === void 0 ? constants_1.INPUT_NUMBER_DEFAULT_STEP : _b, _c = props.autoFocus, autoFocus = _c === void 0 ? constants_1.INPUT_NUMBER_DEFAULT_AUTO_FOCUS : _c, _d = props.error, error = _d === void 0 ? constants_1.INPUT_NUMBER_DEFAULT_ERROR : _d, _e = props.required, required = _e === void 0 ? constants_1.INPUT_NUMBER_DEFAULT_REQUIRED : _e, _f = props.disabled, disabled = _f === void 0 ? constants_1.INPUT_NUMBER_DEFAULT_DISABLED : _f, _g = props.fullWidth, fullWidth = _g === void 0 ? constants_1.INPUT_NUMBER_DEFAULT_FULL_WIDTH : _g, _h = props.defaultValue, defaultValue = _h === void 0 ? constants_1.INPUT_NUMBER_DEFAULT_VALUE : _h, _j = props.min, min = _j === void 0 ? constants_1.INPUT_NUMBER_DEFAULT_MIN : _j, _k = props.max, max = _k === void 0 ? constants_1.INPUT_NUMBER_DEFAULT_MAX : _k, label = props.label, placeholder = props.placeholder, id = props.id, name = props.name, renderLeft = props.renderLeft, renderRight = props.renderRight, hint = props.hint, className = props.className, inputProps = props.inputProps, valueProp = props.value, onChange = props.onChange, labelRef = props.labelRef, labelProps = props.labelProps, bodyProps = props.bodyProps, hintProps = props.hintProps, incrementButtonText = props.incrementButtonText, decrementButtonText = props.decrementButtonText, other = tslib_1.__rest(props, ["size", "step", "autoFocus", "error", "required", "disabled", "fullWidth", "defaultValue", "min", "max", "label", "placeholder", "id", "name", "renderLeft", "renderRight", "hint", "className", "inputProps", "value", "onChange", "labelRef", "labelProps", "bodyProps", "hintProps", "incrementButtonText", "decrementButtonText"]);
|
|
31
31
|
var _l = tslib_1.__read((0, useBoolean_1.useBoolean)(false), 2), focused = _l[0], _m = _l[1], onFocus = _m.on, offFocus = _m.off;
|
|
32
32
|
var _o = tslib_1.__read((0, react_1.useState)(null), 2), timeoutId = _o[0], setTimeoutId = _o[1];
|
|
33
33
|
var _p = tslib_1.__read((0, react_1.useState)(null), 2), countDirection = _p[0], setCountDirection = _p[1];
|
|
@@ -140,6 +140,6 @@ exports.InputNumber = (0, react_1.forwardRef)(function (inProps, ref) {
|
|
|
140
140
|
react_1.default.createElement(IconButton_1.IconButton, { size: size, type: "button", tabIndex: -1, variant: "ghost", icon: icons_1.SortUpIcon, disabled: disabled, "aria-label": incrementButtonText, className: (0, exports.cnInputNumber)('Increment'), onMouseDown: handleMouseDown('increment') }),
|
|
141
141
|
react_1.default.createElement(IconButton_1.IconButton, { size: size, tabIndex: -1, type: "button", variant: "ghost", icon: icons_1.SortDownIcon, disabled: disabled, "aria-label": decrementButtonText, className: (0, exports.cnInputNumber)('Decrement'), onMouseDown: handleMouseDown('decrement') })),
|
|
142
142
|
react_1.default.createElement(Fieldset_1.Fieldset, { className: (0, exports.cnInputNumber)('Fieldset') })),
|
|
143
|
-
react_1.default.createElement(FieldHint_1.FieldHint,
|
|
143
|
+
react_1.default.createElement(FieldHint_1.FieldHint, tslib_1.__assign({}, hintProps), hint)));
|
|
144
144
|
});
|
|
145
145
|
exports.InputNumber.displayName = 'InputNumber';
|
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
import type {
|
|
1
|
+
import type { ChangeEvent, ComponentPropsWithRef, HTMLAttributes, MouseEvent, Ref } from 'react';
|
|
2
2
|
import type { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
|
|
3
|
+
import type { FieldHintProps } from '../FieldHint';
|
|
3
4
|
import type { FieldIconProps } from '../FieldIcon';
|
|
4
5
|
import type { FieldLabelProps } from '../FieldLabel';
|
|
5
6
|
type InputNumberPropsDeprecated = {
|
|
@@ -59,6 +60,8 @@ export type InputNumberProps = {
|
|
|
59
60
|
labelProps?: FieldLabelProps;
|
|
60
61
|
/** Cвойства Body */
|
|
61
62
|
bodyProps?: ComponentPropsWithRef<'label'>;
|
|
63
|
+
/** Cвойства FieldHint */
|
|
64
|
+
hintProps?: Omit<FieldHintProps, 'children'>;
|
|
62
65
|
/** Шаг инкремента/декремента */
|
|
63
66
|
step?: number;
|
|
64
67
|
/** Минимально допустимое значение */
|
|
@@ -2,12 +2,12 @@
|
|
|
2
2
|
display: block;
|
|
3
3
|
}
|
|
4
4
|
|
|
5
|
-
.Pagination-List {
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
}
|
|
5
|
+
.Pagination-List {
|
|
6
|
+
margin: 0;
|
|
7
|
+
padding: 0;
|
|
8
|
+
display: flex;
|
|
9
|
+
flex-wrap: wrap;
|
|
10
|
+
list-style: none;
|
|
11
|
+
align-items: center;
|
|
12
|
+
gap: var(--spacing-4xs);
|
|
13
|
+
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
1
|
import './Pagination.css';
|
|
2
|
+
import type { PaginationBaseProps } from './types';
|
|
3
3
|
export declare const cnPagination: import("@bem-react/classname").ClassNameFormatter;
|
|
4
|
-
export declare const Pagination:
|
|
4
|
+
export declare const Pagination: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<PaginationBaseProps, "nav">;
|
|
@@ -2,35 +2,36 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.Pagination = exports.cnPagination = void 0;
|
|
4
4
|
var tslib_1 = require("tslib");
|
|
5
|
+
require("./Pagination.css");
|
|
5
6
|
var react_1 = tslib_1.__importStar(require("react"));
|
|
6
7
|
var useThemeProps_1 = require("../../hooks/useThemeProps");
|
|
7
8
|
var classname_1 = require("../../utils/classname");
|
|
8
9
|
var isNumber_1 = require("../../utils/isNumber");
|
|
10
|
+
var polymorphicComponentWithRef_1 = require("../../utils/polymorphicComponentWithRef");
|
|
9
11
|
var components_1 = require("./components");
|
|
10
12
|
var constants_1 = require("./constants");
|
|
11
13
|
var createPaginationRange_1 = require("./helpers/createPaginationRange");
|
|
12
14
|
var getItemAriaLabel_1 = require("./helpers/getItemAriaLabel");
|
|
13
15
|
var withNavigationButtons_1 = require("./helpers/withNavigationButtons/withNavigationButtons");
|
|
14
|
-
require("./Pagination.css");
|
|
15
16
|
exports.cnPagination = (0, classname_1.cn)('Pagination');
|
|
16
|
-
exports.Pagination = (0,
|
|
17
|
+
exports.Pagination = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)(function (inProps, ref) {
|
|
17
18
|
var props = (0, useThemeProps_1.useThemeProps)({ props: inProps, name: 'Pagination' });
|
|
18
|
-
var _a = props.
|
|
19
|
+
var _a = props.as, Tag = _a === void 0 ? constants_1.PAGINATION_DEFAULT_TAG : _a, _b = props.page, page = _b === void 0 ? constants_1.PAGINATION_DEFAULT_PAGE : _b, _c = props.size, size = _c === void 0 ? constants_1.PAGINATION_DEFAULT_SIZE : _c, _d = props.siblingCount, siblingCount = _d === void 0 ? constants_1.PAGINATION_DEFAULT_SIBLING_COUNT : _d, pageSize = props.pageSize, totalCount = props.totalCount, className = props.className, disabledProp = props.disabled, onPageChange = props.onPageChange, _e = props.getItemAriaLabel, getItemAriaLabel = _e === void 0 ? getItemAriaLabel_1.getItemAriaLabel : _e,
|
|
19
20
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
20
|
-
|
|
21
|
+
_f = props.renderComponent,
|
|
21
22
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
22
|
-
renderComponent =
|
|
23
|
+
renderComponent = _f === void 0 ? function (_a) {
|
|
23
24
|
var className = _a.className, rest = tslib_1.__rest(_a, ["className"]);
|
|
24
25
|
return (react_1.default.createElement(components_1.PaginationItem, tslib_1.__assign({}, rest)));
|
|
25
|
-
} :
|
|
26
|
-
var
|
|
26
|
+
} : _f, otherProps = tslib_1.__rest(props, ["as", "page", "size", "siblingCount", "pageSize", "totalCount", "className", "disabled", "onPageChange", "getItemAriaLabel", "renderComponent"]);
|
|
27
|
+
var _g = (0, react_1.useMemo)(function () {
|
|
27
28
|
var selected = page + 1;
|
|
28
29
|
return {
|
|
29
30
|
selected: selected,
|
|
30
31
|
previous: selected - 1,
|
|
31
32
|
next: selected + 1,
|
|
32
33
|
};
|
|
33
|
-
}, [page]), selected =
|
|
34
|
+
}, [page]), selected = _g.selected, previous = _g.previous, next = _g.next;
|
|
34
35
|
var range = (0, react_1.useMemo)(function () {
|
|
35
36
|
return (0, createPaginationRange_1.createPaginationRange)({
|
|
36
37
|
page: selected,
|
|
@@ -63,7 +64,7 @@ exports.Pagination = (0, react_1.forwardRef)(function (inProps, ref) {
|
|
|
63
64
|
size: size,
|
|
64
65
|
selected: isSelected,
|
|
65
66
|
page: mapper[type],
|
|
66
|
-
disabled: mapperDisabled[type],
|
|
67
|
+
disabled: disabledProp || mapperDisabled[type],
|
|
67
68
|
'aria-label': getItemAriaLabel({
|
|
68
69
|
page: mapper[type],
|
|
69
70
|
selected: isSelected,
|
|
@@ -73,8 +74,17 @@ exports.Pagination = (0, react_1.forwardRef)(function (inProps, ref) {
|
|
|
73
74
|
className: (0, components_1.cnPaginationItem)({ size: size, selected: isSelected }),
|
|
74
75
|
};
|
|
75
76
|
});
|
|
76
|
-
}, [
|
|
77
|
-
|
|
77
|
+
}, [
|
|
78
|
+
range,
|
|
79
|
+
selected,
|
|
80
|
+
disabledProp,
|
|
81
|
+
previous,
|
|
82
|
+
next,
|
|
83
|
+
size,
|
|
84
|
+
getItemAriaLabel,
|
|
85
|
+
onPageChange,
|
|
86
|
+
]);
|
|
87
|
+
return (react_1.default.createElement(Tag, tslib_1.__assign({ className: (0, exports.cnPagination)({}, [className]), ref: ref }, otherProps),
|
|
78
88
|
react_1.default.createElement("ul", { className: (0, exports.cnPagination)('List') }, paginationPropsRange.map(function (item, index) { return (react_1.default.createElement("li", { key: item.type === constants_1.ELLIPSIS ? index : item.page + item.type }, renderComponent(item))); }))));
|
|
79
89
|
});
|
|
80
90
|
exports.Pagination.displayName = 'Pagination';
|
|
@@ -1,28 +1,27 @@
|
|
|
1
1
|
/* stylelint-disable */
|
|
2
2
|
.PaginationItem {
|
|
3
3
|
--pagination-item-background: transparent;
|
|
4
|
-
|
|
4
|
+
outline: none;
|
|
5
5
|
display: flex;
|
|
6
|
+
cursor: pointer;
|
|
7
|
+
text-align: center;
|
|
6
8
|
align-items: center;
|
|
7
|
-
|
|
9
|
+
text-decoration: none;
|
|
8
10
|
box-sizing: border-box;
|
|
9
|
-
|
|
11
|
+
justify-content: center;
|
|
12
|
+
color: var(--color-content-primary);
|
|
10
13
|
block-size: var(--pagination-item-size);
|
|
11
|
-
|
|
14
|
+
min-inline-size: var(--pagination-item-size);
|
|
12
15
|
border-radius: var(--pagination-item-border-radius);
|
|
13
|
-
color: var(--color-content-primary);
|
|
14
16
|
background-color: var(--pagination-item-background);
|
|
15
|
-
|
|
16
|
-
text-decoration: none;
|
|
17
|
-
text-align: center;
|
|
18
|
-
outline: none;
|
|
17
|
+
border: var(--border-width-s) solid var(--pagination-item-border-color);
|
|
19
18
|
}
|
|
20
19
|
.PaginationItem_size_s {
|
|
21
20
|
font: var(--typography-text-s-font);
|
|
22
21
|
letter-spacing: var(--typography-text-s-letter_spacing, 0);
|
|
23
22
|
text-transform: var(--typography-text-s-text_transform, none);
|
|
24
23
|
|
|
25
|
-
--pagination-item-size:
|
|
24
|
+
--pagination-item-size: var(--control-height-2xs);
|
|
26
25
|
--pagination-item-border-radius: var(--border-radius-xs);
|
|
27
26
|
}
|
|
28
27
|
.PaginationItem_size_l {
|
|
@@ -30,7 +29,7 @@
|
|
|
30
29
|
letter-spacing: var(--typography-text-l-letter_spacing, 0);
|
|
31
30
|
text-transform: var(--typography-text-l-text_transform, none);
|
|
32
31
|
|
|
33
|
-
--pagination-item-size:
|
|
32
|
+
--pagination-item-size: var(--control-height-m);
|
|
34
33
|
--pagination-item-border-radius: var(--border-radius-s);
|
|
35
34
|
}
|
|
36
35
|
.PaginationItem:hover:not(.PaginationItem_selected) {
|
|
@@ -46,7 +45,14 @@
|
|
|
46
45
|
box-shadow: none;
|
|
47
46
|
}
|
|
48
47
|
.PaginationItem_selected {
|
|
49
|
-
border: var(--
|
|
50
|
-
var(--color-background-action);
|
|
48
|
+
--pagination-item-border-color: var(--color-border-action);
|
|
51
49
|
cursor: initial;
|
|
52
50
|
}
|
|
51
|
+
.PaginationItem_disabled {
|
|
52
|
+
cursor: auto;
|
|
53
|
+
pointer-events: none;
|
|
54
|
+
color: var(--color-content-disabled);
|
|
55
|
+
}
|
|
56
|
+
.PaginationItem_disabled.PaginationItem_selected {
|
|
57
|
+
--pagination-item-border-color: var(--color-border-disabled);
|
|
58
|
+
}
|
|
@@ -7,7 +7,8 @@ var react_1 = tslib_1.__importStar(require("react"));
|
|
|
7
7
|
var icons_1 = require("@ozen-ui/icons");
|
|
8
8
|
var classname_1 = require("../../../../utils/classname");
|
|
9
9
|
var isNumber_1 = require("../../../../utils/isNumber");
|
|
10
|
-
var
|
|
10
|
+
var ButtonBase_1 = require("../../../ButtonBase");
|
|
11
|
+
var IconButtonNext_1 = require("../../../IconButtonNext");
|
|
11
12
|
var constants_1 = require("../../constants");
|
|
12
13
|
require("./PaginationItem.css");
|
|
13
14
|
exports.paginationVariant = [
|
|
@@ -35,16 +36,16 @@ var iconsMapper = (_a = {},
|
|
|
35
36
|
_a[constants_1.ELLIPSIS] = icons_1.MenuHorizontalIcon,
|
|
36
37
|
_a);
|
|
37
38
|
exports.PaginationItem = (0, react_1.forwardRef)(function (_a, ref) {
|
|
38
|
-
var
|
|
39
|
+
var _b = _a.selected, selected = _b === void 0 ? constants_1.PAGINATION_ITEM_DEFAULT_SELECTED : _b, _c = _a.disabled, disabled = _c === void 0 ? constants_1.PAGINATION_ITEM_DEFAULT_DISABLED : _c, _d = _a.size, size = _d === void 0 ? constants_1.PAGINATION_ITEM_DEFAULT_SIZE : _d, type = _a.type, page = _a.page, onClick = _a.onClick, className = _a.className, otherProps = tslib_1.__rest(_a, ["selected", "disabled", "size", "type", "page", "onClick", "className"]);
|
|
39
40
|
var sizeConfig = sizeMapper[size];
|
|
40
41
|
var handleClick = function () {
|
|
41
|
-
if (
|
|
42
|
-
onClick(page - 1);
|
|
42
|
+
if (!selected && (0, isNumber_1.isNumber)(page)) {
|
|
43
|
+
onClick === null || onClick === void 0 ? void 0 : onClick(page - 1);
|
|
43
44
|
}
|
|
44
45
|
};
|
|
45
46
|
if (type === constants_1.PREVIOUS || type === constants_1.NEXT || type === constants_1.ELLIPSIS) {
|
|
46
|
-
return (react_1.default.createElement(
|
|
47
|
+
return (react_1.default.createElement(IconButtonNext_1.IconButton, tslib_1.__assign({ disabled: disabled, icon: iconsMapper[type], size: sizeConfig.size, onClick: handleClick, ref: ref }, otherProps, { color: "secondary" })));
|
|
47
48
|
}
|
|
48
|
-
return (react_1.default.createElement(
|
|
49
|
+
return (react_1.default.createElement(ButtonBase_1.ButtonBase, tslib_1.__assign({ disabled: disabled, className: (0, exports.cnPaginationItem)({ size: size, selected: selected, disabled: disabled }, [className]), tabIndex: selected ? -1 : 0, onClick: handleClick, "aria-current": selected, ref: ref }, otherProps), page));
|
|
49
50
|
});
|
|
50
51
|
exports.PaginationItem.displayName = 'PaginationItem';
|
|
@@ -1,6 +1,10 @@
|
|
|
1
|
+
export declare const PAGINATION_DEFAULT_TAG = "nav";
|
|
1
2
|
export declare const PAGINATION_DEFAULT_SIZE = "s";
|
|
2
3
|
export declare const PAGINATION_DEFAULT_SIBLING_COUNT = 2;
|
|
3
4
|
export declare const PAGINATION_DEFAULT_PAGE = 0;
|
|
5
|
+
export declare const PAGINATION_ITEM_DEFAULT_SIZE = "s";
|
|
6
|
+
export declare const PAGINATION_ITEM_DEFAULT_SELECTED = false;
|
|
7
|
+
export declare const PAGINATION_ITEM_DEFAULT_DISABLED = false;
|
|
4
8
|
export declare const ELLIPSIS = "Ellipsis";
|
|
5
9
|
export declare const PREVIOUS = "Previous";
|
|
6
10
|
export declare const NEXT = "Next";
|
|
@@ -1,9 +1,13 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.PAGE = exports.LAST = exports.FIRST = exports.NEXT = exports.PREVIOUS = exports.ELLIPSIS = exports.PAGINATION_DEFAULT_PAGE = exports.PAGINATION_DEFAULT_SIBLING_COUNT = exports.PAGINATION_DEFAULT_SIZE = void 0;
|
|
3
|
+
exports.PAGE = exports.LAST = exports.FIRST = exports.NEXT = exports.PREVIOUS = exports.ELLIPSIS = exports.PAGINATION_ITEM_DEFAULT_DISABLED = exports.PAGINATION_ITEM_DEFAULT_SELECTED = exports.PAGINATION_ITEM_DEFAULT_SIZE = exports.PAGINATION_DEFAULT_PAGE = exports.PAGINATION_DEFAULT_SIBLING_COUNT = exports.PAGINATION_DEFAULT_SIZE = exports.PAGINATION_DEFAULT_TAG = void 0;
|
|
4
|
+
exports.PAGINATION_DEFAULT_TAG = 'nav';
|
|
4
5
|
exports.PAGINATION_DEFAULT_SIZE = 's';
|
|
5
6
|
exports.PAGINATION_DEFAULT_SIBLING_COUNT = 2;
|
|
6
7
|
exports.PAGINATION_DEFAULT_PAGE = 0;
|
|
8
|
+
exports.PAGINATION_ITEM_DEFAULT_SIZE = 's';
|
|
9
|
+
exports.PAGINATION_ITEM_DEFAULT_SELECTED = false;
|
|
10
|
+
exports.PAGINATION_ITEM_DEFAULT_DISABLED = false;
|
|
7
11
|
exports.ELLIPSIS = 'Ellipsis';
|
|
8
12
|
exports.PREVIOUS = 'Previous';
|
|
9
13
|
exports.NEXT = 'Next';
|
|
@@ -5,16 +5,16 @@ var constants_1 = require("../../constants");
|
|
|
5
5
|
var getItemAriaLabel = function (_a) {
|
|
6
6
|
var page = _a.page, type = _a.type, selected = _a.selected;
|
|
7
7
|
if (type === constants_1.NEXT) {
|
|
8
|
-
return '
|
|
8
|
+
return 'Next';
|
|
9
9
|
}
|
|
10
10
|
if (type === constants_1.PREVIOUS) {
|
|
11
|
-
return '
|
|
11
|
+
return 'Previous';
|
|
12
12
|
}
|
|
13
13
|
if (selected) {
|
|
14
|
-
return "
|
|
14
|
+
return "Selected";
|
|
15
15
|
}
|
|
16
16
|
if (type === constants_1.PAGE) {
|
|
17
|
-
return "
|
|
17
|
+
return "".concat(page);
|
|
18
18
|
}
|
|
19
19
|
return '';
|
|
20
20
|
};
|
|
@@ -1,6 +1,7 @@
|
|
|
1
|
-
import type {
|
|
1
|
+
import type { ReactNode, ElementType } from 'react';
|
|
2
|
+
import type { PolymorphicComponentPropsWithoutRef } from '../../utils/polymorphicComponentWithRef';
|
|
2
3
|
import type { PaginationItemProps } from './components';
|
|
3
|
-
import type { ELLIPSIS, NEXT, PREVIOUS } from './constants';
|
|
4
|
+
import type { ELLIPSIS, NEXT, PREVIOUS, PAGINATION_DEFAULT_TAG } from './constants';
|
|
4
5
|
import type { GetItemAriaLabel } from './helpers/getItemAriaLabel';
|
|
5
6
|
export type EllipsisType = typeof ELLIPSIS;
|
|
6
7
|
export type PreviousType = typeof PREVIOUS;
|
|
@@ -26,6 +27,8 @@ export type PaginationBaseProps = {
|
|
|
26
27
|
* @default 's'
|
|
27
28
|
*/
|
|
28
29
|
size?: PaginationSizeVariant;
|
|
30
|
+
/** Если {true} делает компонент неактивным */
|
|
31
|
+
disabled?: boolean;
|
|
29
32
|
/** Кастомный класс для пагинации. */
|
|
30
33
|
className?: string;
|
|
31
34
|
/** Коллбэк, вызывается на смену страницы. */
|
|
@@ -35,4 +38,4 @@ export type PaginationBaseProps = {
|
|
|
35
38
|
/** Рендер функция, для отображения кнопок пагинации. */
|
|
36
39
|
renderComponent?: (PagItemProps: PaginationItemProps) => ReactNode;
|
|
37
40
|
};
|
|
38
|
-
export type PaginationProps =
|
|
41
|
+
export type PaginationProps<As extends ElementType = typeof PAGINATION_DEFAULT_TAG> = PolymorphicComponentPropsWithoutRef<PaginationBaseProps, As>;
|
|
@@ -20,7 +20,7 @@ var SelectRender = function (inProps, ref) {
|
|
|
20
20
|
props: inProps,
|
|
21
21
|
name: 'Select',
|
|
22
22
|
});
|
|
23
|
-
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"]);
|
|
23
|
+
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, hintProps = props.hintProps, 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", "hintProps", "bodyRef", "onClose", "onOpen", "open", "multiple"]);
|
|
24
24
|
var bodyInnerRef = (0, react_1.useRef)(null);
|
|
25
25
|
/** @deprecated props */
|
|
26
26
|
var bodyRef = (bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.ref) || bodeRefProp;
|
|
@@ -162,7 +162,7 @@ var SelectRender = function (inProps, ref) {
|
|
|
162
162
|
}
|
|
163
163
|
}, [autoFocus]);
|
|
164
164
|
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
165
|
-
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({
|
|
165
|
+
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]) }), hintProps: hintProps, ref: ref, renderedValue: renderValue({
|
|
166
166
|
label: currentLabel,
|
|
167
167
|
value: valueState,
|
|
168
168
|
}) })),
|
|
@@ -16,7 +16,7 @@ var constants_1 = require("../../constants");
|
|
|
16
16
|
var index_1 = require("../../index");
|
|
17
17
|
var SelectConsumer_1 = require("../SelectConsumer");
|
|
18
18
|
exports.SelectInput = (0, react_1.forwardRef)(function (_a, ref) {
|
|
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, 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", "labelRef", "inputRef", "fieldRef", "bodyProps"]);
|
|
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;
|
|
21
21
|
var filled = !!valueProp || valueProp === 0;
|
|
22
22
|
var handleFocus = (0, react_1.useCallback)(function (e) {
|
|
@@ -38,6 +38,6 @@ exports.SelectInput = (0, react_1.forwardRef)(function (_a, ref) {
|
|
|
38
38
|
react_1.default.createElement(FieldIcon_1.FieldIcon, { icon: renderRight, className: (0, index_1.cnSelect)('RenderRight') }),
|
|
39
39
|
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
40
|
react_1.default.createElement(Fieldset_1.Fieldset, { className: (0, index_1.cnSelect)('Fieldset') })),
|
|
41
|
-
react_1.default.createElement(FieldHint_1.FieldHint,
|
|
41
|
+
react_1.default.createElement(FieldHint_1.FieldHint, tslib_1.__assign({}, hintProps), hint)));
|
|
42
42
|
});
|
|
43
43
|
exports.SelectInput.displayName = 'SelectInput';
|
|
@@ -1,9 +1,11 @@
|
|
|
1
|
-
import type {
|
|
1
|
+
import type { ComponentPropsWithRef, ReactNode, Ref } from 'react';
|
|
2
2
|
import type { FormElementSizeVariant } from '../../../../types/FormElementSizeVariant';
|
|
3
|
+
import type { FieldHintProps } from '../../../FieldHint';
|
|
3
4
|
import type { FieldIconProps } from '../../../FieldIcon';
|
|
4
5
|
import type { FieldLabelProps } from '../../../FieldLabel';
|
|
5
6
|
export type SelectInputSizeVariant = FormElementSizeVariant;
|
|
6
7
|
type LabelProps = FieldLabelProps;
|
|
8
|
+
type HintProps = FieldHintProps;
|
|
7
9
|
type InputProps = ComponentPropsWithRef<'input'> & {
|
|
8
10
|
'data-testid'?: string;
|
|
9
11
|
};
|
|
@@ -79,6 +81,8 @@ export type SelectInputProps = Omit<ComponentPropsWithRef<'div'>, 'value' | 'def
|
|
|
79
81
|
labelProps?: LabelProps;
|
|
80
82
|
/** Свойства Body */
|
|
81
83
|
bodyProps?: BodyProps;
|
|
84
|
+
/** Cвойства FieldHint */
|
|
85
|
+
hintProps?: Omit<HintProps, 'children'>;
|
|
82
86
|
/** Признак раскрытого списка */
|
|
83
87
|
open?: boolean;
|
|
84
88
|
/** Идентификатор компонента для тестов */
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type {
|
|
1
|
+
import type { ComponentPropsWithRef, ReactElement, ReactNode, SyntheticEvent } from 'react';
|
|
2
2
|
import type { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
|
|
3
3
|
import type { DataListBaseProps, DataListSelected } from '../DataList';
|
|
4
4
|
import type { SelectInputProps } from './components';
|
|
@@ -66,6 +66,6 @@ export type SelectProps<MULTIPLE extends boolean = false> = {
|
|
|
66
66
|
multiple?: MULTIPLE;
|
|
67
67
|
/** Идентификатор компонента для тестов */
|
|
68
68
|
'data-testid'?: string;
|
|
69
|
-
} & Pick<SelectInputProps, 'id' | 'name' | 'label' | 'placeholder' | 'disabled' | 'required' | 'error' | 'hint' | 'fullWidth' | 'renderLeft' | 'renderRight' | 'multiline' | 'inputProps' | 'labelProps' | 'bodyProps' | 'inputRef' | 'labelRef' | 'bodyRef'> & Omit<ComponentPropsWithRef<'div'>, 'onChange' | 'defaultValue'> & SelectPropsDeprecated<MULTIPLE> & (SelectControlledProps<MULTIPLE> | SelectUncontrolledProps<MULTIPLE>) & (SelectOpenControlledProps | SelectOpenUncontrolledProps);
|
|
69
|
+
} & Pick<SelectInputProps, 'id' | 'name' | 'label' | 'placeholder' | 'disabled' | 'required' | 'error' | 'hint' | 'fullWidth' | 'renderLeft' | 'renderRight' | 'multiline' | 'inputProps' | 'labelProps' | 'hintProps' | 'bodyProps' | 'inputRef' | 'labelRef' | 'bodyRef'> & Omit<ComponentPropsWithRef<'div'>, 'onChange' | 'defaultValue'> & SelectPropsDeprecated<MULTIPLE> & (SelectControlledProps<MULTIPLE> | SelectUncontrolledProps<MULTIPLE>) & (SelectOpenControlledProps | SelectOpenUncontrolledProps);
|
|
70
70
|
export type SelectComponent = <MULTIPLE extends boolean = false>(props: SelectProps<MULTIPLE>) => ReactElement | null;
|
|
71
71
|
export {};
|
|
@@ -15,10 +15,10 @@ exports.Textarea = (0, react_1.forwardRef)(function (inProps, ref) {
|
|
|
15
15
|
props: inProps,
|
|
16
16
|
name: 'Textarea',
|
|
17
17
|
});
|
|
18
|
-
var _a = props.size, size = _a === void 0 ? constants_1.TEXTAREA_DEFAULT_SIZE : _a, autoFocus = props.autoFocus, maxLength = props.maxLength, expand = props.expand, placeholder = props.placeholder, id = props.id, name = props.name, error = props.error, fullWidth = props.fullWidth, cols = props.cols, rows = props.rows, className = props.className, label = props.label, hint = props.hint, value = props.value, defaultValue = props.defaultValue, onChange = props.onChange, required = props.required, disabled = props.disabled, textareaProps = props.textareaProps, labelProps = props.labelProps, labelRef = props.labelRef, textareaRef = props.textareaRef, other = tslib_1.__rest(props, ["size", "autoFocus", "maxLength", "expand", "placeholder", "id", "name", "error", "fullWidth", "cols", "rows", "className", "label", "hint", "value", "defaultValue", "onChange", "required", "disabled", "textareaProps", "labelProps", "labelRef", "textareaRef"]);
|
|
18
|
+
var _a = props.size, size = _a === void 0 ? constants_1.TEXTAREA_DEFAULT_SIZE : _a, autoFocus = props.autoFocus, maxLength = props.maxLength, expand = props.expand, placeholder = props.placeholder, id = props.id, name = props.name, error = props.error, fullWidth = props.fullWidth, cols = props.cols, rows = props.rows, className = props.className, label = props.label, hint = props.hint, value = props.value, defaultValue = props.defaultValue, onChange = props.onChange, required = props.required, disabled = props.disabled, textareaProps = props.textareaProps, labelProps = props.labelProps, hintProps = props.hintProps, labelRef = props.labelRef, textareaRef = props.textareaRef, other = tslib_1.__rest(props, ["size", "autoFocus", "maxLength", "expand", "placeholder", "id", "name", "error", "fullWidth", "cols", "rows", "className", "label", "hint", "value", "defaultValue", "onChange", "required", "disabled", "textareaProps", "labelProps", "hintProps", "labelRef", "textareaRef"]);
|
|
19
19
|
return (react_1.default.createElement(FieldControl_1.FieldControl, tslib_1.__assign({ size: size, error: error, disabled: disabled, required: required, fullWidth: fullWidth }, other, { className: (0, exports.cnTextarea)({
|
|
20
20
|
expand: expand,
|
|
21
21
|
}, [className]), ref: ref }),
|
|
22
|
-
react_1.default.createElement(components_1.TextareaConsumer, { autoFocus: autoFocus, maxLength: maxLength, placeholder: placeholder, id: id, name: name, cols: cols, expand: expand, rows: rows, label: label, hint: hint, value: value, defaultValue: defaultValue, onChange: onChange, textareaRef: textareaRef, textareaProps: textareaProps, labelRef: labelRef, labelProps: labelProps })));
|
|
22
|
+
react_1.default.createElement(components_1.TextareaConsumer, { autoFocus: autoFocus, maxLength: maxLength, placeholder: placeholder, id: id, name: name, cols: cols, expand: expand, rows: rows, label: label, hint: hint, value: value, defaultValue: defaultValue, onChange: onChange, textareaRef: textareaRef, textareaProps: textareaProps, labelRef: labelRef, labelProps: labelProps, hintProps: hintProps })));
|
|
23
23
|
});
|
|
24
24
|
exports.Textarea.displayName = 'Textarea';
|