@snack-uikit/fields 0.44.0 → 0.45.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 0.45.0 (2025-05-26)
+
+
+### Features
+
+* **PDS-2223:** add onKeyDown props to FieldTextArea ([818f74d](https://github.com/cloud-ru-tech/snack-uikit/commit/818f74d498068e5cd9ed13bc9d2f9bfcc1943d2f))
+
+
+
+
+
 # 0.44.0 (2025-05-23)
 
 

package/README.md

@@ -519,6 +519,7 @@ FieldStepper в основном предназначен для работы с
 | onBlur | `FocusEventHandler<HTMLTextAreaElement>` | - | Колбек потери фокуса |
 | placeholder | `string` | - | Плейсхолдер |
 | maxLength | `number` | - | Максимальное кол-во символов |
+| onKeyDown | `KeyboardEventHandler<HTMLTextAreaElement>` | - | Колбек нажатия клавиши клавиатуры |
 | className | `string` | - | CSS-класс |
 | label | `string` | - | Лейбл |
 | labelTooltip | `ReactNode` | - | Всплывающая подсказка лейбла |

package/dist/cjs/components/FieldTextArea/FieldTextArea.d.ts

@@ -2,7 +2,7 @@ import { ChangeEvent, ReactNode } from 'react';
 import { WithSupportProps } from '@snack-uikit/utils';
 import { TextAreaProps } from '../../helperComponents';
 import { FieldDecoratorProps } from '../FieldDecorator';
-type InputProps = Pick<Partial<TextAreaProps>, 'value'> & Pick<TextAreaProps, 'id' | 'name' | 'placeholder' | 'maxLength' | 'disabled' | 'readonly' | 'onFocus' | 'onBlur'>;
+type InputProps = Pick<Partial<TextAreaProps>, 'value'> & Pick<TextAreaProps, 'id' | 'name' | 'placeholder' | 'maxLength' | 'disabled' | 'readonly' | 'onFocus' | 'onBlur' | 'onKeyDown'>;
 type WrapperProps = Pick<FieldDecoratorProps, 'className' | 'label' | 'labelTooltip' | 'required' | 'caption' | 'hint' | 'size' | 'validationState' | 'showHintIcon' | 'labelTooltipPlacement' | 'error'>;
 type FieldTextAreaOwnProps = {
     /** Минимальное кол-во строк, до которого размер поля может быть увеличен @default 3*/
@@ -30,5 +30,5 @@ type FieldTextAreaOwnProps = {
 export type FieldTextAreaProps = WithSupportProps<FieldTextAreaOwnProps & InputProps & WrapperProps>;
 export declare const FieldTextArea: import("react").ForwardRefExoticComponent<{
     'data-test-id'?: string;
-} & import("react").AriaAttributes & FieldTextAreaOwnProps & Pick<Partial<TextAreaProps>, "value"> & Pick<TextAreaProps, "onFocus" | "onBlur" | "id" | "disabled" | "name" | "readonly" | "placeholder" | "maxLength"> & WrapperProps & import("react").RefAttributes<HTMLTextAreaElement>>;
+} & import("react").AriaAttributes & FieldTextAreaOwnProps & Pick<Partial<TextAreaProps>, "value"> & Pick<TextAreaProps, "onKeyDown" | "onFocus" | "onBlur" | "id" | "disabled" | "name" | "readonly" | "placeholder" | "maxLength"> & WrapperProps & import("react").RefAttributes<HTMLTextAreaElement>>;
 export {};

package/dist/cjs/components/FieldTextArea/FieldTextArea.js

@@ -48,6 +48,7 @@ exports.FieldTextArea = (0, react_1.forwardRef)((_a, ref) => {
       onChange: onChangeProp,
       onFocus,
       onBlur,
+      onKeyDown,
       className,
       label,
       labelTooltip,
@@ -61,7 +62,7 @@ exports.FieldTextArea = (0, react_1.forwardRef)((_a, ref) => {
       onCopyButtonClick,
       footer
     } = _a,
-    rest = __rest(_a, ["id", "name", "value", "placeholder", "maxLength", "minRows", "maxRows", "disabled", "resizable", "readonly", "showCopyButton", "showClearButton", "allowMoreThanMaxLength", "showHintIcon", "onChange", "onFocus", "onBlur", "className", "label", "labelTooltip", "labelTooltipPlacement", "required", "caption", "hint", "error", "size", "validationState", "onCopyButtonClick", "footer"]);
+    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"]);
   const localRef = (0, react_1.useRef)(null);
   const clearButtonRef = (0, react_1.useRef)(null);
   const copyButtonRef = (0, react_1.useRef)(null);
@@ -107,6 +108,10 @@ exports.FieldTextArea = (0, react_1.forwardRef)((_a, ref) => {
     readonly,
     submitKeys: ['Enter', 'Space', 'Tab']
   });
+  const handleKeyDown = event => {
+    onInputKeyDown(event);
+    onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
+  };
   return (0, jsx_runtime_1.jsx)(FieldDecorator_1.FieldDecorator, Object.assign({
     className: className,
     label: label,
@@ -165,7 +170,7 @@ exports.FieldTextArea = (0, react_1.forwardRef)((_a, ref) => {
           ref: (0, merge_refs_1.default)(ref, localRef),
           onFocus: onFocus,
           onBlur: onBlur,
-          onKeyDown: onInputKeyDown,
+          onKeyDown: handleKeyDown,
           tabIndex: inputTabIndex,
           maxLength: allowMoreThanMaxLength ? undefined : maxLength || undefined,
           "data-test-id": 'field-textarea__input'

package/dist/esm/components/FieldTextArea/FieldTextArea.d.ts

@@ -2,7 +2,7 @@ import { ChangeEvent, ReactNode } from 'react';
 import { WithSupportProps } from '@snack-uikit/utils';
 import { TextAreaProps } from '../../helperComponents';
 import { FieldDecoratorProps } from '../FieldDecorator';
-type InputProps = Pick<Partial<TextAreaProps>, 'value'> & Pick<TextAreaProps, 'id' | 'name' | 'placeholder' | 'maxLength' | 'disabled' | 'readonly' | 'onFocus' | 'onBlur'>;
+type InputProps = Pick<Partial<TextAreaProps>, 'value'> & Pick<TextAreaProps, 'id' | 'name' | 'placeholder' | 'maxLength' | 'disabled' | 'readonly' | 'onFocus' | 'onBlur' | 'onKeyDown'>;
 type WrapperProps = Pick<FieldDecoratorProps, 'className' | 'label' | 'labelTooltip' | 'required' | 'caption' | 'hint' | 'size' | 'validationState' | 'showHintIcon' | 'labelTooltipPlacement' | 'error'>;
 type FieldTextAreaOwnProps = {
     /** Минимальное кол-во строк, до которого размер поля может быть увеличен @default 3*/
@@ -30,5 +30,5 @@ type FieldTextAreaOwnProps = {
 export type FieldTextAreaProps = WithSupportProps<FieldTextAreaOwnProps & InputProps & WrapperProps>;
 export declare const FieldTextArea: import("react").ForwardRefExoticComponent<{
     'data-test-id'?: string;
-} & import("react").AriaAttributes & FieldTextAreaOwnProps & Pick<Partial<TextAreaProps>, "value"> & Pick<TextAreaProps, "onFocus" | "onBlur" | "id" | "disabled" | "name" | "readonly" | "placeholder" | "maxLength"> & WrapperProps & import("react").RefAttributes<HTMLTextAreaElement>>;
+} & import("react").AriaAttributes & FieldTextAreaOwnProps & Pick<Partial<TextAreaProps>, "value"> & Pick<TextAreaProps, "onKeyDown" | "onFocus" | "onBlur" | "id" | "disabled" | "name" | "readonly" | "placeholder" | "maxLength"> & WrapperProps & import("react").RefAttributes<HTMLTextAreaElement>>;
 export {};

package/dist/esm/components/FieldTextArea/FieldTextArea.js

@@ -22,7 +22,7 @@ import { getValidationState } from '../../utils/getValidationState';
 import { FieldDecorator } from '../FieldDecorator';
 import styles from './styles.module.css';
 export const FieldTextArea = forwardRef((_a, ref) => {
-    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, 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", "className", "label", "labelTooltip", "labelTooltipPlacement", "required", "caption", "hint", "error", "size", "validationState", "onCopyButtonClick", "footer"]);
+    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"]);
     const localRef = useRef(null);
     const clearButtonRef = useRef(null);
     const copyButtonRef = useRef(null);
@@ -56,5 +56,9 @@ export const FieldTextArea = forwardRef((_a, ref) => {
         readonly,
         submitKeys: ['Enter', 'Space', 'Tab'],
     });
-    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: onInputKeyDown, tabIndex: inputTabIndex, maxLength: allowMoreThanMaxLength ? undefined : maxLength || undefined, "data-test-id": 'field-textarea__input' }) }), footer] }) })));
+    const handleKeyDown = event => {
+        onInputKeyDown(event);
+        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
+    };
+    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] }) })));
 });

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Fields",
-  "version": "0.44.0",
+  "version": "0.45.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -65,5 +65,5 @@
   "peerDependencies": {
     "@snack-uikit/locale": "*"
   },
-  "gitHead": "98d8215a4c461746557441b6a31b109ebe43ce5c"
+  "gitHead": "f1744e34626d50f18e26f9e472b6b89c57b48df2"
 }

package/src/components/FieldTextArea/FieldTextArea.tsx

@@ -1,5 +1,5 @@
 import mergeRefs from 'merge-refs';
-import { ChangeEvent, forwardRef, ReactNode, useMemo, useRef } from 'react';
+import { ChangeEvent, forwardRef, KeyboardEventHandler, ReactNode, useMemo, useRef } from 'react';
 
 import { SIZE, useButtonNavigation, useClearButton } from '@snack-uikit/input-private';
 import { Scroll } from '@snack-uikit/scroll';
@@ -13,7 +13,10 @@ import { FieldDecorator, FieldDecoratorProps } from '../FieldDecorator';
 import styles from './styles.module.scss';
 
 type InputProps = Pick<Partial<TextAreaProps>, 'value'> &
-  Pick<TextAreaProps, 'id' | 'name' | 'placeholder' | 'maxLength' | 'disabled' | 'readonly' | 'onFocus' | 'onBlur'>;
+  Pick<
+    TextAreaProps,
+    'id' | 'name' | 'placeholder' | 'maxLength' | 'disabled' | 'readonly' | 'onFocus' | 'onBlur' | 'onKeyDown'
+  >;
 
 type WrapperProps = Pick<
   FieldDecoratorProps,
@@ -76,6 +79,7 @@ export const FieldTextArea = forwardRef<HTMLTextAreaElement, FieldTextAreaProps>
       onChange: onChangeProp,
       onFocus,
       onBlur,
+      onKeyDown,
       className,
       label,
       labelTooltip,
@@ -133,6 +137,11 @@ export const FieldTextArea = forwardRef<HTMLTextAreaElement, FieldTextAreaProps>
       submitKeys: ['Enter', 'Space', 'Tab'],
     });
 
+    const handleKeyDown: KeyboardEventHandler<HTMLTextAreaElement> = event => {
+      onInputKeyDown(event);
+      onKeyDown?.(event);
+    };
+
     return (
       <FieldDecorator
         className={className}
@@ -186,7 +195,7 @@ export const FieldTextArea = forwardRef<HTMLTextAreaElement, FieldTextAreaProps>
               ref={mergeRefs(ref, localRef)}
               onFocus={onFocus}
               onBlur={onBlur}
-              onKeyDown={onInputKeyDown}
+              onKeyDown={handleKeyDown}
               tabIndex={inputTabIndex}
               maxLength={allowMoreThanMaxLength ? undefined : maxLength || undefined}
               data-test-id='field-textarea__input'