@snack-uikit/fields 0.45.0 → 0.46.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/CHANGELOG.md +11 -0
- package/README.md +2 -0
- package/dist/cjs/components/FieldText/FieldText.d.ts +2 -2
- package/dist/cjs/components/FieldText/FieldText.js +4 -2
- package/dist/cjs/components/FieldTextArea/FieldTextArea.d.ts +2 -2
- package/dist/cjs/components/FieldTextArea/FieldTextArea.js +4 -2
- package/dist/cjs/helperComponents/TextArea/TextArea.d.ts +2 -0
- package/dist/cjs/helperComponents/TextArea/TextArea.js +5 -3
- package/dist/esm/components/FieldText/FieldText.d.ts +2 -2
- package/dist/esm/components/FieldText/FieldText.js +2 -2
- package/dist/esm/components/FieldTextArea/FieldTextArea.d.ts +2 -2
- package/dist/esm/components/FieldTextArea/FieldTextArea.js +2 -2
- package/dist/esm/helperComponents/TextArea/TextArea.d.ts +2 -0
- package/dist/esm/helperComponents/TextArea/TextArea.js +2 -2
- package/package.json +6 -6
- package/src/components/FieldText/FieldText.tsx +3 -0
- package/src/components/FieldTextArea/FieldTextArea.tsx +12 -1
- package/src/helperComponents/TextArea/TextArea.tsx +4 -0
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,17 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
# 0.46.0 (2025-05-26)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Features
|
|
10
|
+
|
|
11
|
+
* **PDS-2223:** add spellcheck prop to FieldTextArea and FieldText ([60e8c86](https://github.com/cloud-ru-tech/snack-uikit/commit/60e8c8693ad4c69efdac887938180af99000af9e))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
6
17
|
# 0.45.0 (2025-05-26)
|
|
7
18
|
|
|
8
19
|
|
package/README.md
CHANGED
|
@@ -482,6 +482,7 @@ FieldStepper в основном предназначен для работы с
|
|
|
482
482
|
| placeholder | `string` | - | Значение плейсхолдера |
|
|
483
483
|
| maxLength | `number` | - | Максимальная длина вводимого значения |
|
|
484
484
|
| autoComplete | `string \| boolean` | false | Включен ли автокомплит для поля |
|
|
485
|
+
| spellCheck | `boolean` | true | Значение атрибута spellcheck (проверка орфографии) |
|
|
485
486
|
| onKeyDown | `KeyboardEventHandler<HTMLInputElement>` | - | Колбек обработки начала нажатия клавиши клавиатуры |
|
|
486
487
|
| onPaste | `ClipboardEventHandler<HTMLInputElement>` | - | Колбек обработки вставки значения |
|
|
487
488
|
| className | `string` | - | CSS-класс |
|
|
@@ -519,6 +520,7 @@ FieldStepper в основном предназначен для работы с
|
|
|
519
520
|
| onBlur | `FocusEventHandler<HTMLTextAreaElement>` | - | Колбек потери фокуса |
|
|
520
521
|
| placeholder | `string` | - | Плейсхолдер |
|
|
521
522
|
| maxLength | `number` | - | Максимальное кол-во символов |
|
|
523
|
+
| spellCheck | `boolean` | true | Включение проверки орфографии |
|
|
522
524
|
| onKeyDown | `KeyboardEventHandler<HTMLTextAreaElement>` | - | Колбек нажатия клавиши клавиатуры |
|
|
523
525
|
| className | `string` | - | CSS-класс |
|
|
524
526
|
| label | `string` | - | Лейбл |
|
|
@@ -3,7 +3,7 @@ import { InputPrivateProps } from '@snack-uikit/input-private';
|
|
|
3
3
|
import { WithSupportProps } from '@snack-uikit/utils';
|
|
4
4
|
import { Button } from '../../types';
|
|
5
5
|
import { FieldDecoratorProps } from '../FieldDecorator';
|
|
6
|
-
type InputProps = Pick<Partial<InputPrivateProps>, 'value' | 'onChange'> & Pick<InputPrivateProps, 'id' | 'name' | 'placeholder' | 'maxLength' | 'disabled' | 'readonly' | 'onFocus' | 'onBlur' | 'autoComplete' | 'onPaste' | 'onKeyDown'>;
|
|
6
|
+
type InputProps = Pick<Partial<InputPrivateProps>, 'value' | 'onChange'> & Pick<InputPrivateProps, 'id' | 'name' | 'placeholder' | 'maxLength' | 'disabled' | 'readonly' | 'onFocus' | 'onBlur' | 'autoComplete' | 'onPaste' | 'onKeyDown' | 'spellCheck'>;
|
|
7
7
|
type WrapperProps = Pick<FieldDecoratorProps, 'className' | 'label' | 'labelTooltip' | 'required' | 'caption' | 'hint' | 'showHintIcon' | 'size' | 'validationState' | 'labelTooltipPlacement' | 'error'>;
|
|
8
8
|
type FieldTextOwnProps = {
|
|
9
9
|
/** Отображение кнопки Копировать для поля (актуально только для `readonly = true`) */
|
|
@@ -30,5 +30,5 @@ type FieldTextOwnProps = {
|
|
|
30
30
|
export type FieldTextProps = WithSupportProps<FieldTextOwnProps & InputProps & WrapperProps>;
|
|
31
31
|
export declare const FieldText: import("react").ForwardRefExoticComponent<{
|
|
32
32
|
'data-test-id'?: string;
|
|
33
|
-
} & import("react").AriaAttributes & FieldTextOwnProps & Pick<Partial<InputPrivateProps>, "value" | "onChange"> & Pick<InputPrivateProps, "onKeyDown" | "onFocus" | "onBlur" | "id" | "disabled" | "name" | "onPaste" | "readonly" | "placeholder" | "autoComplete" | "maxLength"> & WrapperProps & import("react").RefAttributes<HTMLInputElement>>;
|
|
33
|
+
} & import("react").AriaAttributes & FieldTextOwnProps & Pick<Partial<InputPrivateProps>, "value" | "onChange"> & Pick<InputPrivateProps, "onKeyDown" | "onFocus" | "onBlur" | "id" | "disabled" | "name" | "onPaste" | "readonly" | "placeholder" | "autoComplete" | "maxLength" | "spellCheck"> & WrapperProps & import("react").RefAttributes<HTMLInputElement>>;
|
|
34
34
|
export {};
|
|
@@ -62,9 +62,10 @@ exports.FieldText = (0, react_1.forwardRef)((_a, ref) => {
|
|
|
62
62
|
button: buttonProp,
|
|
63
63
|
onPaste,
|
|
64
64
|
onKeyDown,
|
|
65
|
-
type = 'text'
|
|
65
|
+
type = 'text',
|
|
66
|
+
spellCheck
|
|
66
67
|
} = _a,
|
|
67
|
-
rest = __rest(_a, ["id", "name", "value", "placeholder", "maxLength", "disabled", "readonly", "showCopyButton", "showClearButton", "allowMoreThanMaxLength", "onChange", "onFocus", "onBlur", "onCopyButtonClick", "className", "label", "labelTooltip", "labelTooltipPlacement", "required", "caption", "hint", "showHintIcon", "size", "validationState", "error", "autoComplete", "prefixIcon", "prefix", "postfix", "button", "onPaste", "onKeyDown", "type"]);
|
|
68
|
+
rest = __rest(_a, ["id", "name", "value", "placeholder", "maxLength", "disabled", "readonly", "showCopyButton", "showClearButton", "allowMoreThanMaxLength", "onChange", "onFocus", "onBlur", "onCopyButtonClick", "className", "label", "labelTooltip", "labelTooltipPlacement", "required", "caption", "hint", "showHintIcon", "size", "validationState", "error", "autoComplete", "prefixIcon", "prefix", "postfix", "button", "onPaste", "onKeyDown", "type", "spellCheck"]);
|
|
68
69
|
const [value = '', onChange] = (0, hooks_1.useValueControl)({
|
|
69
70
|
value: valueProp,
|
|
70
71
|
defaultValue: '',
|
|
@@ -209,6 +210,7 @@ exports.FieldText = (0, react_1.forwardRef)((_a, ref) => {
|
|
|
209
210
|
id: id,
|
|
210
211
|
name: name,
|
|
211
212
|
autoComplete: autoComplete,
|
|
213
|
+
spellCheck: spellCheck,
|
|
212
214
|
"data-test-id": 'field-text__input'
|
|
213
215
|
})
|
|
214
216
|
})
|
|
@@ -2,7 +2,7 @@ import { ChangeEvent, ReactNode } from 'react';
|
|
|
2
2
|
import { WithSupportProps } from '@snack-uikit/utils';
|
|
3
3
|
import { TextAreaProps } from '../../helperComponents';
|
|
4
4
|
import { FieldDecoratorProps } from '../FieldDecorator';
|
|
5
|
-
type InputProps = Pick<Partial<TextAreaProps>, 'value'> & Pick<TextAreaProps, 'id' | 'name' | 'placeholder' | 'maxLength' | 'disabled' | 'readonly' | 'onFocus' | 'onBlur' | 'onKeyDown'>;
|
|
5
|
+
type InputProps = Pick<Partial<TextAreaProps>, 'value'> & Pick<TextAreaProps, 'id' | 'name' | 'placeholder' | 'maxLength' | 'disabled' | 'readonly' | 'onFocus' | 'onBlur' | 'onKeyDown' | 'spellCheck'>;
|
|
6
6
|
type WrapperProps = Pick<FieldDecoratorProps, 'className' | 'label' | 'labelTooltip' | 'required' | 'caption' | 'hint' | 'size' | 'validationState' | 'showHintIcon' | 'labelTooltipPlacement' | 'error'>;
|
|
7
7
|
type FieldTextAreaOwnProps = {
|
|
8
8
|
/** Минимальное кол-во строк, до которого размер поля может быть увеличен @default 3*/
|
|
@@ -30,5 +30,5 @@ type FieldTextAreaOwnProps = {
|
|
|
30
30
|
export type FieldTextAreaProps = WithSupportProps<FieldTextAreaOwnProps & InputProps & WrapperProps>;
|
|
31
31
|
export declare const FieldTextArea: import("react").ForwardRefExoticComponent<{
|
|
32
32
|
'data-test-id'?: string;
|
|
33
|
-
} & import("react").AriaAttributes & FieldTextAreaOwnProps & Pick<Partial<TextAreaProps>, "value"> & Pick<TextAreaProps, "onKeyDown" | "onFocus" | "onBlur" | "id" | "disabled" | "name" | "readonly" | "placeholder" | "maxLength"> & WrapperProps & import("react").RefAttributes<HTMLTextAreaElement>>;
|
|
33
|
+
} & import("react").AriaAttributes & FieldTextAreaOwnProps & Pick<Partial<TextAreaProps>, "value"> & Pick<TextAreaProps, "onKeyDown" | "onFocus" | "onBlur" | "id" | "disabled" | "name" | "readonly" | "placeholder" | "maxLength" | "spellCheck"> & WrapperProps & import("react").RefAttributes<HTMLTextAreaElement>>;
|
|
34
34
|
export {};
|
|
@@ -60,9 +60,10 @@ exports.FieldTextArea = (0, react_1.forwardRef)((_a, ref) => {
|
|
|
60
60
|
size = input_private_1.SIZE.S,
|
|
61
61
|
validationState = constants_1.VALIDATION_STATE.Default,
|
|
62
62
|
onCopyButtonClick,
|
|
63
|
-
footer
|
|
63
|
+
footer,
|
|
64
|
+
spellCheck
|
|
64
65
|
} = _a,
|
|
65
|
-
rest = __rest(_a, ["id", "name", "value", "placeholder", "maxLength", "minRows", "maxRows", "disabled", "resizable", "readonly", "showCopyButton", "showClearButton", "allowMoreThanMaxLength", "showHintIcon", "onChange", "onFocus", "onBlur", "onKeyDown", "className", "label", "labelTooltip", "labelTooltipPlacement", "required", "caption", "hint", "error", "size", "validationState", "onCopyButtonClick", "footer"]);
|
|
66
|
+
rest = __rest(_a, ["id", "name", "value", "placeholder", "maxLength", "minRows", "maxRows", "disabled", "resizable", "readonly", "showCopyButton", "showClearButton", "allowMoreThanMaxLength", "showHintIcon", "onChange", "onFocus", "onBlur", "onKeyDown", "className", "label", "labelTooltip", "labelTooltipPlacement", "required", "caption", "hint", "error", "size", "validationState", "onCopyButtonClick", "footer", "spellCheck"]);
|
|
66
67
|
const localRef = (0, react_1.useRef)(null);
|
|
67
68
|
const clearButtonRef = (0, react_1.useRef)(null);
|
|
68
69
|
const copyButtonRef = (0, react_1.useRef)(null);
|
|
@@ -172,6 +173,7 @@ exports.FieldTextArea = (0, react_1.forwardRef)((_a, ref) => {
|
|
|
172
173
|
onBlur: onBlur,
|
|
173
174
|
onKeyDown: handleKeyDown,
|
|
174
175
|
tabIndex: inputTabIndex,
|
|
176
|
+
spellCheck: spellCheck,
|
|
175
177
|
maxLength: allowMoreThanMaxLength ? undefined : maxLength || undefined,
|
|
176
178
|
"data-test-id": 'field-textarea__input'
|
|
177
179
|
})
|
|
@@ -30,5 +30,7 @@ export type TextAreaProps = RefAttributes<HTMLTextAreaElement> & WithSupportProp
|
|
|
30
30
|
tabIndex?: number;
|
|
31
31
|
/** Минимальное кол-во строк, до которого размер поля может быть увеличен @default 3*/
|
|
32
32
|
minRows?: number;
|
|
33
|
+
/** Включение проверки орфографии @default true*/
|
|
34
|
+
spellCheck?: boolean;
|
|
33
35
|
}>;
|
|
34
36
|
export declare const TextArea: import("react").ForwardRefExoticComponent<Omit<TextAreaProps, "ref"> & RefAttributes<HTMLTextAreaElement>>;
|
|
@@ -39,9 +39,10 @@ exports.TextArea = (0, react_1.forwardRef)((_a, ref) => {
|
|
|
39
39
|
onBlur,
|
|
40
40
|
onKeyDown,
|
|
41
41
|
tabIndex,
|
|
42
|
-
minRows = 3
|
|
42
|
+
minRows = 3,
|
|
43
|
+
spellCheck
|
|
43
44
|
} = _a,
|
|
44
|
-
rest = __rest(_a, ["name", "value", "onChange", "placeholder", "id", "className", "disabled", "readonly", "autoComplete", "maxLength", "onFocus", "onBlur", "onKeyDown", "tabIndex", "minRows"]);
|
|
45
|
+
rest = __rest(_a, ["name", "value", "onChange", "placeholder", "id", "className", "disabled", "readonly", "autoComplete", "maxLength", "onFocus", "onBlur", "onKeyDown", "tabIndex", "minRows", "spellCheck"]);
|
|
45
46
|
// fix of height on the initial render
|
|
46
47
|
// see https://github.com/Andarist/react-textarea-autosize/issues/337#issuecomment-1024980737
|
|
47
48
|
const [, setIsRerendered] = (0, react_1.useState)(false);
|
|
@@ -65,6 +66,7 @@ exports.TextArea = (0, react_1.forwardRef)((_a, ref) => {
|
|
|
65
66
|
onBlur: onBlur,
|
|
66
67
|
onKeyDown: onKeyDown,
|
|
67
68
|
tabIndex: tabIndex,
|
|
68
|
-
minRows: minRows
|
|
69
|
+
minRows: minRows,
|
|
70
|
+
spellCheck: spellCheck
|
|
69
71
|
}, (0, utils_1.extractSupportProps)(rest)));
|
|
70
72
|
});
|
|
@@ -3,7 +3,7 @@ import { InputPrivateProps } from '@snack-uikit/input-private';
|
|
|
3
3
|
import { WithSupportProps } from '@snack-uikit/utils';
|
|
4
4
|
import { Button } from '../../types';
|
|
5
5
|
import { FieldDecoratorProps } from '../FieldDecorator';
|
|
6
|
-
type InputProps = Pick<Partial<InputPrivateProps>, 'value' | 'onChange'> & Pick<InputPrivateProps, 'id' | 'name' | 'placeholder' | 'maxLength' | 'disabled' | 'readonly' | 'onFocus' | 'onBlur' | 'autoComplete' | 'onPaste' | 'onKeyDown'>;
|
|
6
|
+
type InputProps = Pick<Partial<InputPrivateProps>, 'value' | 'onChange'> & Pick<InputPrivateProps, 'id' | 'name' | 'placeholder' | 'maxLength' | 'disabled' | 'readonly' | 'onFocus' | 'onBlur' | 'autoComplete' | 'onPaste' | 'onKeyDown' | 'spellCheck'>;
|
|
7
7
|
type WrapperProps = Pick<FieldDecoratorProps, 'className' | 'label' | 'labelTooltip' | 'required' | 'caption' | 'hint' | 'showHintIcon' | 'size' | 'validationState' | 'labelTooltipPlacement' | 'error'>;
|
|
8
8
|
type FieldTextOwnProps = {
|
|
9
9
|
/** Отображение кнопки Копировать для поля (актуально только для `readonly = true`) */
|
|
@@ -30,5 +30,5 @@ type FieldTextOwnProps = {
|
|
|
30
30
|
export type FieldTextProps = WithSupportProps<FieldTextOwnProps & InputProps & WrapperProps>;
|
|
31
31
|
export declare const FieldText: import("react").ForwardRefExoticComponent<{
|
|
32
32
|
'data-test-id'?: string;
|
|
33
|
-
} & import("react").AriaAttributes & FieldTextOwnProps & Pick<Partial<InputPrivateProps>, "value" | "onChange"> & Pick<InputPrivateProps, "onKeyDown" | "onFocus" | "onBlur" | "id" | "disabled" | "name" | "onPaste" | "readonly" | "placeholder" | "autoComplete" | "maxLength"> & WrapperProps & import("react").RefAttributes<HTMLInputElement>>;
|
|
33
|
+
} & import("react").AriaAttributes & FieldTextOwnProps & Pick<Partial<InputPrivateProps>, "value" | "onChange"> & Pick<InputPrivateProps, "onKeyDown" | "onFocus" | "onBlur" | "id" | "disabled" | "name" | "onPaste" | "readonly" | "placeholder" | "autoComplete" | "maxLength" | "spellCheck"> & WrapperProps & import("react").RefAttributes<HTMLInputElement>>;
|
|
34
34
|
export {};
|
|
@@ -21,7 +21,7 @@ import { getValidationState } from '../../utils/getValidationState';
|
|
|
21
21
|
import { FieldDecorator } from '../FieldDecorator';
|
|
22
22
|
import { getContainerVariant } from './helpers';
|
|
23
23
|
export const FieldText = forwardRef((_a, ref) => {
|
|
24
|
-
var { id, name, value: valueProp, placeholder, maxLength, disabled = false, readonly = false, showCopyButton: showCopyButtonProp = true, showClearButton: showClearButtonProp = true, allowMoreThanMaxLength = false, onChange: onChangeProp, onFocus, onBlur, onCopyButtonClick, className, label, labelTooltip, labelTooltipPlacement, required = false, caption, hint, showHintIcon, size = SIZE.S, validationState = VALIDATION_STATE.Default, error, autoComplete, prefixIcon, prefix, postfix, button: buttonProp, onPaste, onKeyDown, type = 'text' } = _a, rest = __rest(_a, ["id", "name", "value", "placeholder", "maxLength", "disabled", "readonly", "showCopyButton", "showClearButton", "allowMoreThanMaxLength", "onChange", "onFocus", "onBlur", "onCopyButtonClick", "className", "label", "labelTooltip", "labelTooltipPlacement", "required", "caption", "hint", "showHintIcon", "size", "validationState", "error", "autoComplete", "prefixIcon", "prefix", "postfix", "button", "onPaste", "onKeyDown", "type"]);
|
|
24
|
+
var { id, name, value: valueProp, placeholder, maxLength, disabled = false, readonly = false, showCopyButton: showCopyButtonProp = true, showClearButton: showClearButtonProp = true, allowMoreThanMaxLength = false, onChange: onChangeProp, onFocus, onBlur, onCopyButtonClick, className, label, labelTooltip, labelTooltipPlacement, required = false, caption, hint, showHintIcon, size = SIZE.S, validationState = VALIDATION_STATE.Default, error, autoComplete, prefixIcon, prefix, postfix, button: buttonProp, onPaste, onKeyDown, type = 'text', spellCheck } = _a, rest = __rest(_a, ["id", "name", "value", "placeholder", "maxLength", "disabled", "readonly", "showCopyButton", "showClearButton", "allowMoreThanMaxLength", "onChange", "onFocus", "onBlur", "onCopyButtonClick", "className", "label", "labelTooltip", "labelTooltipPlacement", "required", "caption", "hint", "showHintIcon", "size", "validationState", "error", "autoComplete", "prefixIcon", "prefix", "postfix", "button", "onPaste", "onKeyDown", "type", "spellCheck"]);
|
|
25
25
|
const [value = '', onChange] = useValueControl({
|
|
26
26
|
value: valueProp,
|
|
27
27
|
defaultValue: '',
|
|
@@ -91,5 +91,5 @@ export const FieldText = forwardRef((_a, ref) => {
|
|
|
91
91
|
onInputKeyDown(event);
|
|
92
92
|
onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
|
|
93
93
|
};
|
|
94
|
-
return (_jsx(FieldDecorator, Object.assign({ className: className, label: label, labelTooltip: labelTooltip, labelTooltipPlacement: labelTooltipPlacement, labelFor: id, required: required, caption: caption, length: maxLength ? { max: maxLength, current: value.length } : undefined, hint: hint, disabled: disabled, readonly: readonly, showHintIcon: showHintIcon, size: size, validationState: fieldValidationState, error: error }, extractSupportProps(rest), { children: _jsx(FieldContainerPrivate, { size: size, validationState: fieldValidationState, disabled: disabled, readonly: readonly, variant: containerVariant, inputRef: localRef, prefix: prefixButtons, postfix: postfixButtons, disableFocus: isButtonFocused, children: _jsx(InputPrivate, { ref: mergeRefs(ref, localRef), "data-size": size, value: value, onChange: onChange, onFocus: onFocus, onBlur: onBlur, tabIndex: inputTabIndex, onKeyDown: handleKeyDown, onPaste: onPaste, placeholder: placeholder, disabled: disabled, readonly: readonly, type: type, maxLength: allowMoreThanMaxLength ? undefined : maxLength || undefined, id: id, name: name, autoComplete: autoComplete, "data-test-id": 'field-text__input' }) }) })));
|
|
94
|
+
return (_jsx(FieldDecorator, Object.assign({ className: className, label: label, labelTooltip: labelTooltip, labelTooltipPlacement: labelTooltipPlacement, labelFor: id, required: required, caption: caption, length: maxLength ? { max: maxLength, current: value.length } : undefined, hint: hint, disabled: disabled, readonly: readonly, showHintIcon: showHintIcon, size: size, validationState: fieldValidationState, error: error }, extractSupportProps(rest), { children: _jsx(FieldContainerPrivate, { size: size, validationState: fieldValidationState, disabled: disabled, readonly: readonly, variant: containerVariant, inputRef: localRef, prefix: prefixButtons, postfix: postfixButtons, disableFocus: isButtonFocused, children: _jsx(InputPrivate, { ref: mergeRefs(ref, localRef), "data-size": size, value: value, onChange: onChange, onFocus: onFocus, onBlur: onBlur, tabIndex: inputTabIndex, onKeyDown: handleKeyDown, onPaste: onPaste, placeholder: placeholder, disabled: disabled, readonly: readonly, type: type, maxLength: allowMoreThanMaxLength ? undefined : maxLength || undefined, id: id, name: name, autoComplete: autoComplete, spellCheck: spellCheck, "data-test-id": 'field-text__input' }) }) })));
|
|
95
95
|
});
|
|
@@ -2,7 +2,7 @@ import { ChangeEvent, ReactNode } from 'react';
|
|
|
2
2
|
import { WithSupportProps } from '@snack-uikit/utils';
|
|
3
3
|
import { TextAreaProps } from '../../helperComponents';
|
|
4
4
|
import { FieldDecoratorProps } from '../FieldDecorator';
|
|
5
|
-
type InputProps = Pick<Partial<TextAreaProps>, 'value'> & Pick<TextAreaProps, 'id' | 'name' | 'placeholder' | 'maxLength' | 'disabled' | 'readonly' | 'onFocus' | 'onBlur' | 'onKeyDown'>;
|
|
5
|
+
type InputProps = Pick<Partial<TextAreaProps>, 'value'> & Pick<TextAreaProps, 'id' | 'name' | 'placeholder' | 'maxLength' | 'disabled' | 'readonly' | 'onFocus' | 'onBlur' | 'onKeyDown' | 'spellCheck'>;
|
|
6
6
|
type WrapperProps = Pick<FieldDecoratorProps, 'className' | 'label' | 'labelTooltip' | 'required' | 'caption' | 'hint' | 'size' | 'validationState' | 'showHintIcon' | 'labelTooltipPlacement' | 'error'>;
|
|
7
7
|
type FieldTextAreaOwnProps = {
|
|
8
8
|
/** Минимальное кол-во строк, до которого размер поля может быть увеличен @default 3*/
|
|
@@ -30,5 +30,5 @@ type FieldTextAreaOwnProps = {
|
|
|
30
30
|
export type FieldTextAreaProps = WithSupportProps<FieldTextAreaOwnProps & InputProps & WrapperProps>;
|
|
31
31
|
export declare const FieldTextArea: import("react").ForwardRefExoticComponent<{
|
|
32
32
|
'data-test-id'?: string;
|
|
33
|
-
} & import("react").AriaAttributes & FieldTextAreaOwnProps & Pick<Partial<TextAreaProps>, "value"> & Pick<TextAreaProps, "onKeyDown" | "onFocus" | "onBlur" | "id" | "disabled" | "name" | "readonly" | "placeholder" | "maxLength"> & WrapperProps & import("react").RefAttributes<HTMLTextAreaElement>>;
|
|
33
|
+
} & import("react").AriaAttributes & FieldTextAreaOwnProps & Pick<Partial<TextAreaProps>, "value"> & Pick<TextAreaProps, "onKeyDown" | "onFocus" | "onBlur" | "id" | "disabled" | "name" | "readonly" | "placeholder" | "maxLength" | "spellCheck"> & WrapperProps & import("react").RefAttributes<HTMLTextAreaElement>>;
|
|
34
34
|
export {};
|
|
@@ -22,7 +22,7 @@ import { getValidationState } from '../../utils/getValidationState';
|
|
|
22
22
|
import { FieldDecorator } from '../FieldDecorator';
|
|
23
23
|
import styles from './styles.module.css';
|
|
24
24
|
export const FieldTextArea = forwardRef((_a, ref) => {
|
|
25
|
-
var { id, name, value: valueProp, placeholder, maxLength, minRows = 3, maxRows = 1000, disabled = false, resizable = false, readonly = false, showCopyButton: showCopyButtonProp = true, showClearButton: showClearButtonProp = true, allowMoreThanMaxLength = true, showHintIcon, onChange: onChangeProp, onFocus, onBlur, onKeyDown, className, label, labelTooltip, labelTooltipPlacement, required = false, caption, hint, error, size = SIZE.S, validationState = VALIDATION_STATE.Default, onCopyButtonClick, footer } = _a, rest = __rest(_a, ["id", "name", "value", "placeholder", "maxLength", "minRows", "maxRows", "disabled", "resizable", "readonly", "showCopyButton", "showClearButton", "allowMoreThanMaxLength", "showHintIcon", "onChange", "onFocus", "onBlur", "onKeyDown", "className", "label", "labelTooltip", "labelTooltipPlacement", "required", "caption", "hint", "error", "size", "validationState", "onCopyButtonClick", "footer"]);
|
|
25
|
+
var { id, name, value: valueProp, placeholder, maxLength, minRows = 3, maxRows = 1000, disabled = false, resizable = false, readonly = false, showCopyButton: showCopyButtonProp = true, showClearButton: showClearButtonProp = true, allowMoreThanMaxLength = true, showHintIcon, onChange: onChangeProp, onFocus, onBlur, onKeyDown, className, label, labelTooltip, labelTooltipPlacement, required = false, caption, hint, error, size = SIZE.S, validationState = VALIDATION_STATE.Default, onCopyButtonClick, footer, spellCheck } = _a, rest = __rest(_a, ["id", "name", "value", "placeholder", "maxLength", "minRows", "maxRows", "disabled", "resizable", "readonly", "showCopyButton", "showClearButton", "allowMoreThanMaxLength", "showHintIcon", "onChange", "onFocus", "onBlur", "onKeyDown", "className", "label", "labelTooltip", "labelTooltipPlacement", "required", "caption", "hint", "error", "size", "validationState", "onCopyButtonClick", "footer", "spellCheck"]);
|
|
26
26
|
const localRef = useRef(null);
|
|
27
27
|
const clearButtonRef = useRef(null);
|
|
28
28
|
const copyButtonRef = useRef(null);
|
|
@@ -60,5 +60,5 @@ export const FieldTextArea = forwardRef((_a, ref) => {
|
|
|
60
60
|
onInputKeyDown(event);
|
|
61
61
|
onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
|
|
62
62
|
};
|
|
63
|
-
return (_jsx(FieldDecorator, Object.assign({ className: className, label: label, labelTooltip: labelTooltip, labelTooltipPlacement: labelTooltipPlacement, labelFor: id, required: required, caption: caption, length: maxLength ? { max: maxLength, current: value.length } : undefined, hint: hint, disabled: disabled, readonly: readonly, showHintIcon: showHintIcon, size: size, error: error, validationState: fieldValidationState }, extractSupportProps(rest), { children: _jsxs(FieldContainerPrivate, { className: styles.container, size: size, validationState: fieldValidationState, disabled: disabled, readonly: readonly, "data-resizable": isResizable || undefined, "data-actions": Boolean(footer) || undefined, variant: CONTAINER_VARIANT.MultiLine, style: { '--max-rows': maxRows, '--min-rows': minRows }, inputRef: localRef, postfix: _jsx("span", { className: styles.postfix, children: postfixButtons }), children: [_jsx(Scroll, { className: styles.scrollContainer, size: 's', barHideStrategy: 'never', resize: isResizable ? 'vertical' : 'none', "data-test-id": 'field-textarea__scroll-area', children: _jsx(TextArea, { className: styles.textarea, "data-size": size, value: value, onChange: onChange, placeholder: placeholder, disabled: disabled, readonly: readonly, minRows: minRows, id: id, name: name, ref: mergeRefs(ref, localRef), onFocus: onFocus, onBlur: onBlur, onKeyDown: handleKeyDown, tabIndex: inputTabIndex, maxLength: allowMoreThanMaxLength ? undefined : maxLength || undefined, "data-test-id": 'field-textarea__input' }) }), footer] }) })));
|
|
63
|
+
return (_jsx(FieldDecorator, Object.assign({ className: className, label: label, labelTooltip: labelTooltip, labelTooltipPlacement: labelTooltipPlacement, labelFor: id, required: required, caption: caption, length: maxLength ? { max: maxLength, current: value.length } : undefined, hint: hint, disabled: disabled, readonly: readonly, showHintIcon: showHintIcon, size: size, error: error, validationState: fieldValidationState }, extractSupportProps(rest), { children: _jsxs(FieldContainerPrivate, { className: styles.container, size: size, validationState: fieldValidationState, disabled: disabled, readonly: readonly, "data-resizable": isResizable || undefined, "data-actions": Boolean(footer) || undefined, variant: CONTAINER_VARIANT.MultiLine, style: { '--max-rows': maxRows, '--min-rows': minRows }, inputRef: localRef, postfix: _jsx("span", { className: styles.postfix, children: postfixButtons }), children: [_jsx(Scroll, { className: styles.scrollContainer, size: 's', barHideStrategy: 'never', resize: isResizable ? 'vertical' : 'none', "data-test-id": 'field-textarea__scroll-area', children: _jsx(TextArea, { className: styles.textarea, "data-size": size, value: value, onChange: onChange, placeholder: placeholder, disabled: disabled, readonly: readonly, minRows: minRows, id: id, name: name, ref: mergeRefs(ref, localRef), onFocus: onFocus, onBlur: onBlur, onKeyDown: handleKeyDown, tabIndex: inputTabIndex, spellCheck: spellCheck, maxLength: allowMoreThanMaxLength ? undefined : maxLength || undefined, "data-test-id": 'field-textarea__input' }) }), footer] }) })));
|
|
64
64
|
});
|
|
@@ -30,5 +30,7 @@ export type TextAreaProps = RefAttributes<HTMLTextAreaElement> & WithSupportProp
|
|
|
30
30
|
tabIndex?: number;
|
|
31
31
|
/** Минимальное кол-во строк, до которого размер поля может быть увеличен @default 3*/
|
|
32
32
|
minRows?: number;
|
|
33
|
+
/** Включение проверки орфографии @default true*/
|
|
34
|
+
spellCheck?: boolean;
|
|
33
35
|
}>;
|
|
34
36
|
export declare const TextArea: import("react").ForwardRefExoticComponent<Omit<TextAreaProps, "ref"> & RefAttributes<HTMLTextAreaElement>>;
|
|
@@ -16,12 +16,12 @@ import TextareaAutosize from 'react-textarea-autosize';
|
|
|
16
16
|
import { extractSupportProps, useLayoutEffect } from '@snack-uikit/utils';
|
|
17
17
|
import styles from './styles.module.css';
|
|
18
18
|
export const TextArea = forwardRef((_a, ref) => {
|
|
19
|
-
var { name, value = '', onChange, placeholder, id, className, disabled = false, readonly = false, autoComplete = false, maxLength, onFocus, onBlur, onKeyDown, tabIndex, minRows = 3 } = _a, rest = __rest(_a, ["name", "value", "onChange", "placeholder", "id", "className", "disabled", "readonly", "autoComplete", "maxLength", "onFocus", "onBlur", "onKeyDown", "tabIndex", "minRows"]);
|
|
19
|
+
var { name, value = '', onChange, placeholder, id, className, disabled = false, readonly = false, autoComplete = false, maxLength, onFocus, onBlur, onKeyDown, tabIndex, minRows = 3, spellCheck } = _a, rest = __rest(_a, ["name", "value", "onChange", "placeholder", "id", "className", "disabled", "readonly", "autoComplete", "maxLength", "onFocus", "onBlur", "onKeyDown", "tabIndex", "minRows", "spellCheck"]);
|
|
20
20
|
// fix of height on the initial render
|
|
21
21
|
// see https://github.com/Andarist/react-textarea-autosize/issues/337#issuecomment-1024980737
|
|
22
22
|
const [, setIsRerendered] = useState(false);
|
|
23
23
|
useLayoutEffect(() => setIsRerendered(true), []);
|
|
24
24
|
const onChangeHandler = e => onChange === null || onChange === void 0 ? void 0 : onChange(e.target.value, e);
|
|
25
25
|
const stopPropagation = e => e.stopPropagation();
|
|
26
|
-
return (_jsx(TextareaAutosize, Object.assign({ id: id, name: name, value: value, ref: ref, className: cn(className, styles.textarea), autoComplete: autoComplete ? 'on' : 'off', placeholder: placeholder, disabled: disabled, readOnly: readonly, maxLength: maxLength, onChange: onChangeHandler, onClick: stopPropagation, onFocus: onFocus, onBlur: onBlur, onKeyDown: onKeyDown, tabIndex: tabIndex, minRows: minRows }, extractSupportProps(rest))));
|
|
26
|
+
return (_jsx(TextareaAutosize, Object.assign({ id: id, name: name, value: value, ref: ref, className: cn(className, styles.textarea), autoComplete: autoComplete ? 'on' : 'off', placeholder: placeholder, disabled: disabled, readOnly: readonly, maxLength: maxLength, onChange: onChangeHandler, onClick: stopPropagation, onFocus: onFocus, onBlur: onBlur, onKeyDown: onKeyDown, tabIndex: tabIndex, minRows: minRows, spellCheck: spellCheck }, extractSupportProps(rest))));
|
|
27
27
|
});
|
package/package.json
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
"access": "public"
|
|
5
5
|
},
|
|
6
6
|
"title": "Fields",
|
|
7
|
-
"version": "0.
|
|
7
|
+
"version": "0.46.0",
|
|
8
8
|
"sideEffects": [
|
|
9
9
|
"*.css",
|
|
10
10
|
"*.woff",
|
|
@@ -37,13 +37,13 @@
|
|
|
37
37
|
"scripts": {},
|
|
38
38
|
"dependencies": {
|
|
39
39
|
"@snack-uikit/button": "0.19.11",
|
|
40
|
-
"@snack-uikit/calendar": "0.12.
|
|
41
|
-
"@snack-uikit/color-picker": "0.3.
|
|
40
|
+
"@snack-uikit/calendar": "0.12.5",
|
|
41
|
+
"@snack-uikit/color-picker": "0.3.29",
|
|
42
42
|
"@snack-uikit/divider": "3.2.6",
|
|
43
43
|
"@snack-uikit/dropdown": "0.4.8",
|
|
44
44
|
"@snack-uikit/icons": "0.26.3",
|
|
45
|
-
"@snack-uikit/input-private": "4.
|
|
46
|
-
"@snack-uikit/list": "0.29.
|
|
45
|
+
"@snack-uikit/input-private": "4.6.0",
|
|
46
|
+
"@snack-uikit/list": "0.29.3",
|
|
47
47
|
"@snack-uikit/scroll": "0.10.1",
|
|
48
48
|
"@snack-uikit/skeleton": "0.6.5",
|
|
49
49
|
"@snack-uikit/slider": "0.3.18",
|
|
@@ -65,5 +65,5 @@
|
|
|
65
65
|
"peerDependencies": {
|
|
66
66
|
"@snack-uikit/locale": "*"
|
|
67
67
|
},
|
|
68
|
-
"gitHead": "
|
|
68
|
+
"gitHead": "26339d9278602025de86964e817a842e97e69d94"
|
|
69
69
|
}
|
|
@@ -35,6 +35,7 @@ type InputProps = Pick<Partial<InputPrivateProps>, 'value' | 'onChange'> &
|
|
|
35
35
|
| 'autoComplete'
|
|
36
36
|
| 'onPaste'
|
|
37
37
|
| 'onKeyDown'
|
|
38
|
+
| 'spellCheck'
|
|
38
39
|
>;
|
|
39
40
|
|
|
40
41
|
type WrapperProps = Pick<
|
|
@@ -115,6 +116,7 @@ export const FieldText = forwardRef<HTMLInputElement, FieldTextProps>(
|
|
|
115
116
|
onPaste,
|
|
116
117
|
onKeyDown,
|
|
117
118
|
type = 'text',
|
|
119
|
+
spellCheck,
|
|
118
120
|
...rest
|
|
119
121
|
},
|
|
120
122
|
ref,
|
|
@@ -259,6 +261,7 @@ export const FieldText = forwardRef<HTMLInputElement, FieldTextProps>(
|
|
|
259
261
|
id={id}
|
|
260
262
|
name={name}
|
|
261
263
|
autoComplete={autoComplete}
|
|
264
|
+
spellCheck={spellCheck}
|
|
262
265
|
data-test-id='field-text__input'
|
|
263
266
|
/>
|
|
264
267
|
</FieldContainerPrivate>
|
|
@@ -15,7 +15,16 @@ import styles from './styles.module.scss';
|
|
|
15
15
|
type InputProps = Pick<Partial<TextAreaProps>, 'value'> &
|
|
16
16
|
Pick<
|
|
17
17
|
TextAreaProps,
|
|
18
|
-
|
|
18
|
+
| 'id'
|
|
19
|
+
| 'name'
|
|
20
|
+
| 'placeholder'
|
|
21
|
+
| 'maxLength'
|
|
22
|
+
| 'disabled'
|
|
23
|
+
| 'readonly'
|
|
24
|
+
| 'onFocus'
|
|
25
|
+
| 'onBlur'
|
|
26
|
+
| 'onKeyDown'
|
|
27
|
+
| 'spellCheck'
|
|
19
28
|
>;
|
|
20
29
|
|
|
21
30
|
type WrapperProps = Pick<
|
|
@@ -92,6 +101,7 @@ export const FieldTextArea = forwardRef<HTMLTextAreaElement, FieldTextAreaProps>
|
|
|
92
101
|
validationState = VALIDATION_STATE.Default,
|
|
93
102
|
onCopyButtonClick,
|
|
94
103
|
footer,
|
|
104
|
+
spellCheck,
|
|
95
105
|
...rest
|
|
96
106
|
},
|
|
97
107
|
ref,
|
|
@@ -197,6 +207,7 @@ export const FieldTextArea = forwardRef<HTMLTextAreaElement, FieldTextAreaProps>
|
|
|
197
207
|
onBlur={onBlur}
|
|
198
208
|
onKeyDown={handleKeyDown}
|
|
199
209
|
tabIndex={inputTabIndex}
|
|
210
|
+
spellCheck={spellCheck}
|
|
200
211
|
maxLength={allowMoreThanMaxLength ? undefined : maxLength || undefined}
|
|
201
212
|
data-test-id='field-textarea__input'
|
|
202
213
|
/>
|
|
@@ -46,6 +46,8 @@ export type TextAreaProps = RefAttributes<HTMLTextAreaElement> &
|
|
|
46
46
|
tabIndex?: number;
|
|
47
47
|
/** Минимальное кол-во строк, до которого размер поля может быть увеличен @default 3*/
|
|
48
48
|
minRows?: number;
|
|
49
|
+
/** Включение проверки орфографии @default true*/
|
|
50
|
+
spellCheck?: boolean;
|
|
49
51
|
}>;
|
|
50
52
|
|
|
51
53
|
export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
|
|
@@ -66,6 +68,7 @@ export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
|
|
|
66
68
|
onKeyDown,
|
|
67
69
|
tabIndex,
|
|
68
70
|
minRows = 3,
|
|
71
|
+
spellCheck,
|
|
69
72
|
...rest
|
|
70
73
|
},
|
|
71
74
|
ref,
|
|
@@ -97,6 +100,7 @@ export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
|
|
|
97
100
|
onKeyDown={onKeyDown}
|
|
98
101
|
tabIndex={tabIndex}
|
|
99
102
|
minRows={minRows}
|
|
103
|
+
spellCheck={spellCheck}
|
|
100
104
|
{...extractSupportProps(rest)}
|
|
101
105
|
/>
|
|
102
106
|
);
|