@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 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.45.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.4",
41
- "@snack-uikit/color-picker": "0.3.28",
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.5.9",
46
- "@snack-uikit/list": "0.29.2",
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": "f1744e34626d50f18e26f9e472b6b89c57b48df2"
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
- 'id' | 'name' | 'placeholder' | 'maxLength' | 'disabled' | 'readonly' | 'onFocus' | 'onBlur' | 'onKeyDown'
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
  );