@snack-uikit/fields 0.35.7-preview-c6f5cbae.0 → 0.36.0

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 0.36.0 (2024-12-18)
+
+
+### Features
+
+* **FCB-40:** add onKeyDown prop ([fdbda5b](https://github.com/cloud-ru-tech/snack-uikit/commit/fdbda5b5b861527d0dfa54b13fb5a353128a5984))
+* **FCB-40:** add onPaste prop ([a31d8f3](https://github.com/cloud-ru-tech/snack-uikit/commit/a31d8f3d985b9dc1a8f53fc7740505d74eefd961))
+
+
+
+
+
 ## 0.35.6 (2024-12-17)
 
 ### Only dependencies have been changed

package/README.md

@@ -460,7 +460,7 @@ FieldStepper в основном предназначен для работы с
 | placeholder | `string` | - | Значение плейсхолдера |
 | maxLength | `number` | - | Максимальная длина вводимого значения |
 | autoComplete | `string \| boolean` | false | Включен ли автокомплит для поля |
-| onKeyUp | `KeyboardEventHandler<HTMLInputElement>` | - | Колбек обработки окончания нажатия клавиши клавиатуры |
+| onKeyDown | `KeyboardEventHandler<HTMLInputElement>` | - | Колбек обработки начала нажатия клавиши клавиатуры |
 | onPaste | `ClipboardEventHandler<HTMLInputElement>` | - | Колбек обработки вставки значения |
 | className | `string` | - | CSS-класс |
 | label | `string` | - | Лейбл |

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

@@ -3,7 +3,7 @@ import { InputPrivateProps } from '@snack-uikit/input-private';
 import { WithSupportProps } from '@snack-uikit/utils';
 import { Button } from '../../types';
 import { FieldDecoratorProps } from '../FieldDecorator';
-type InputProps = Pick<Partial<InputPrivateProps>, 'value' | 'onChange'> & Pick<InputPrivateProps, 'id' | 'name' | 'placeholder' | 'maxLength' | 'disabled' | 'readonly' | 'onFocus' | 'onBlur' | 'autoComplete' | 'onPaste' | 'onKeyUp'>;
+type InputProps = Pick<Partial<InputPrivateProps>, 'value' | 'onChange'> & Pick<InputPrivateProps, 'id' | 'name' | 'placeholder' | 'maxLength' | 'disabled' | 'readonly' | 'onFocus' | 'onBlur' | 'autoComplete' | 'onPaste' | 'onKeyDown'>;
 type WrapperProps = Pick<FieldDecoratorProps, 'className' | 'label' | 'labelTooltip' | 'required' | 'caption' | 'hint' | 'showHintIcon' | 'size' | 'validationState' | 'labelTooltipPlacement' | 'error'>;
 type FieldTextOwnProps = {
     /** Отображение кнопки Копировать для поля (актуально только для `readonly = true`) */
@@ -29,5 +29,5 @@ type FieldTextOwnProps = {
 export type FieldTextProps = WithSupportProps<FieldTextOwnProps & InputProps & WrapperProps>;
 export declare const FieldText: import("react").ForwardRefExoticComponent<{
     'data-test-id'?: string;
-} & import("react").AriaAttributes & FieldTextOwnProps & Pick<Partial<InputPrivateProps>, "value" | "onChange"> & Pick<InputPrivateProps, "onFocus" | "onBlur" | "id" | "disabled" | "name" | "onPaste" | "onKeyUp" | "readonly" | "placeholder" | "autoComplete" | "maxLength"> & WrapperProps & import("react").RefAttributes<HTMLInputElement>>;
+} & 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>>;
 export {};

package/dist/cjs/components/FieldText/FieldText.js

@@ -60,10 +60,10 @@ exports.FieldText = (0, react_1.forwardRef)((_a, ref) => {
       prefix,
       postfix,
       button: buttonProp,
-      onKeyUp,
-      onPaste
+      onPaste,
+      onKeyDown
     } = _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", "onKeyUp", "onPaste"]);
+    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"]);
   const [value = '', onChange] = (0, hooks_1.useValueControl)({
     value: valueProp,
     defaultValue: '',
@@ -156,6 +156,10 @@ exports.FieldText = (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,
@@ -194,8 +198,7 @@ exports.FieldText = (0, react_1.forwardRef)((_a, ref) => {
         onFocus: onFocus,
         onBlur: onBlur,
         tabIndex: inputTabIndex,
-        onKeyDown: onInputKeyDown,
-        onKeyUp: onKeyUp,
+        onKeyDown: handleKeyDown,
         onPaste: onPaste,
         placeholder: placeholder,
         disabled: disabled,

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

@@ -3,7 +3,7 @@ import { InputPrivateProps } from '@snack-uikit/input-private';
 import { WithSupportProps } from '@snack-uikit/utils';
 import { Button } from '../../types';
 import { FieldDecoratorProps } from '../FieldDecorator';
-type InputProps = Pick<Partial<InputPrivateProps>, 'value' | 'onChange'> & Pick<InputPrivateProps, 'id' | 'name' | 'placeholder' | 'maxLength' | 'disabled' | 'readonly' | 'onFocus' | 'onBlur' | 'autoComplete' | 'onPaste' | 'onKeyUp'>;
+type InputProps = Pick<Partial<InputPrivateProps>, 'value' | 'onChange'> & Pick<InputPrivateProps, 'id' | 'name' | 'placeholder' | 'maxLength' | 'disabled' | 'readonly' | 'onFocus' | 'onBlur' | 'autoComplete' | 'onPaste' | 'onKeyDown'>;
 type WrapperProps = Pick<FieldDecoratorProps, 'className' | 'label' | 'labelTooltip' | 'required' | 'caption' | 'hint' | 'showHintIcon' | 'size' | 'validationState' | 'labelTooltipPlacement' | 'error'>;
 type FieldTextOwnProps = {
     /** Отображение кнопки Копировать для поля (актуально только для `readonly = true`) */
@@ -29,5 +29,5 @@ type FieldTextOwnProps = {
 export type FieldTextProps = WithSupportProps<FieldTextOwnProps & InputProps & WrapperProps>;
 export declare const FieldText: import("react").ForwardRefExoticComponent<{
     'data-test-id'?: string;
-} & import("react").AriaAttributes & FieldTextOwnProps & Pick<Partial<InputPrivateProps>, "value" | "onChange"> & Pick<InputPrivateProps, "onFocus" | "onBlur" | "id" | "disabled" | "name" | "onPaste" | "onKeyUp" | "readonly" | "placeholder" | "autoComplete" | "maxLength"> & WrapperProps & import("react").RefAttributes<HTMLInputElement>>;
+} & 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>>;
 export {};

package/dist/esm/components/FieldText/FieldText.js

@@ -11,7 +11,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import mergeRefs from 'merge-refs';
-import { forwardRef, useCallback, useMemo, useRef, useState } from 'react';
+import { forwardRef, useCallback, useMemo, useRef, useState, } from 'react';
 import { InputPrivate, SIZE, useButtonNavigation, useClearButton } from '@snack-uikit/input-private';
 import { extractSupportProps } from '@snack-uikit/utils';
 import { VALIDATION_STATE } from '../../constants';
@@ -21,7 +21,7 @@ import { getValidationState } from '../../utils/getValidationState';
 import { FieldDecorator } from '../FieldDecorator';
 import { getContainerVariant } from './helpers';
 export const FieldText = forwardRef((_a, ref) => {
-    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, onKeyUp, onPaste } = _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", "onKeyUp", "onPaste"]);
+    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 } = _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"]);
     const [value = '', onChange] = useValueControl({
         value: valueProp,
         defaultValue: '',
@@ -87,5 +87,9 @@ export const FieldText = 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, 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: onInputKeyDown, onKeyUp: onKeyUp, onPaste: onPaste, placeholder: placeholder, disabled: disabled, readonly: readonly, type: 'text', maxLength: allowMoreThanMaxLength ? undefined : maxLength || undefined, id: id, name: name, autoComplete: autoComplete, "data-test-id": 'field-text__input' }) }) })));
+    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, 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: 'text', maxLength: allowMoreThanMaxLength ? undefined : maxLength || undefined, id: id, name: name, autoComplete: autoComplete, "data-test-id": 'field-text__input' }) }) })));
 });

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Fields",
-  "version": "0.35.7-preview-c6f5cbae.0",
+  "version": "0.36.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -37,13 +37,13 @@
   "scripts": {},
   "dependencies": {
     "@snack-uikit/button": "0.19.5",
-    "@snack-uikit/calendar": "0.11.12-preview-c6f5cbae.0",
-    "@snack-uikit/color-picker": "0.3.8-preview-c6f5cbae.0",
+    "@snack-uikit/calendar": "0.11.12",
+    "@snack-uikit/color-picker": "0.3.8",
     "@snack-uikit/divider": "3.2.2",
     "@snack-uikit/dropdown": "0.4.2",
     "@snack-uikit/icons": "0.24.1",
-    "@snack-uikit/input-private": "4.4.2-preview-c6f5cbae.0",
-    "@snack-uikit/list": "0.21.12-preview-c6f5cbae.0",
+    "@snack-uikit/input-private": "4.5.0",
+    "@snack-uikit/list": "0.22.0",
     "@snack-uikit/scroll": "0.9.2",
     "@snack-uikit/skeleton": "0.6.1",
     "@snack-uikit/slider": "0.3.3",
@@ -65,5 +65,5 @@
   "peerDependencies": {
     "@snack-uikit/locale": "*"
   },
-  "gitHead": "42f6e8e6cc5306e3722a9ccf9f02cf469f879a0b"
+  "gitHead": "d328fa0c928a7dfaa6396374a3f639c9f61ae878"
 }

package/src/components/FieldText/FieldText.tsx

@@ -1,5 +1,14 @@
 import mergeRefs from 'merge-refs';
-import { forwardRef, ReactElement, ReactNode, useCallback, useMemo, useRef, useState } from 'react';
+import {
+  forwardRef,
+  KeyboardEventHandler,
+  ReactElement,
+  ReactNode,
+  useCallback,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 
 import { InputPrivate, InputPrivateProps, SIZE, useButtonNavigation, useClearButton } from '@snack-uikit/input-private';
 import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
@@ -25,7 +34,7 @@ type InputProps = Pick<Partial<InputPrivateProps>, 'value' | 'onChange'> &
     | 'onBlur'
     | 'autoComplete'
     | 'onPaste'
-    | 'onKeyUp'
+    | 'onKeyDown'
   >;
 
 type WrapperProps = Pick<
@@ -100,8 +109,8 @@ export const FieldText = forwardRef<HTMLInputElement, FieldTextProps>(
       prefix,
       postfix,
       button: buttonProp,
-      onKeyUp,
       onPaste,
+      onKeyDown,
       ...rest
     },
     ref,
@@ -193,6 +202,11 @@ export const FieldText = forwardRef<HTMLInputElement, FieldTextProps>(
       submitKeys: ['Enter', 'Space', 'Tab'],
     });
 
+    const handleKeyDown: KeyboardEventHandler<HTMLInputElement> = event => {
+      onInputKeyDown(event);
+      onKeyDown?.(event);
+    };
+
     return (
       <FieldDecorator
         className={className}
@@ -231,8 +245,7 @@ export const FieldText = forwardRef<HTMLInputElement, FieldTextProps>(
             onFocus={onFocus}
             onBlur={onBlur}
             tabIndex={inputTabIndex}
-            onKeyDown={onInputKeyDown}
-            onKeyUp={onKeyUp}
+            onKeyDown={handleKeyDown}
             onPaste={onPaste}
             placeholder={placeholder}
             disabled={disabled}