@snack-uikit/fields 0.35.6 → 0.35.7-preview-aaafcc64.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.
Files changed (7) hide show
  1. package/README.md +3 -1
  2. package/dist/cjs/components/FieldText/FieldText.d.ts +2 -2
  3. package/dist/cjs/components/FieldText/FieldText.js +10 -3
  4. package/dist/esm/components/FieldText/FieldText.d.ts +2 -2
  5. package/dist/esm/components/FieldText/FieldText.js +7 -3
  6. package/package.json +6 -6
  7. package/src/components/FieldText/FieldText.tsx +30 -3
package/README.md CHANGED
@@ -325,7 +325,7 @@ FieldStepper в основном предназначен для работы с
325
325
  | onFocus | `FocusEventHandler<HTMLInputElement>` | - | Колбек обработки получения фокуса |
326
326
  | onBlur | `FocusEventHandler<HTMLInputElement>` | - | Колбек обработки потери фокуса |
327
327
  | placeholder | `string` | - | Значение плейсхолдера |
328
- | onKeyDown | `KeyboardEventHandler<HTMLInputElement>` | - | Колбек обработки нажатия клавиши клавиатуры |
328
+ | onKeyDown | `KeyboardEventHandler<HTMLInputElement>` | - | Колбек обработки начала нажатия клавиши клавиатуры |
329
329
  | className | `string` | - | CSS-класс |
330
330
  | label | `string` | - | Лейбл |
331
331
  | labelTooltip | `ReactNode` | - | Всплывающая подсказка лейбла |
@@ -460,6 +460,8 @@ FieldStepper в основном предназначен для работы с
460
460
  | placeholder | `string` | - | Значение плейсхолдера |
461
461
  | maxLength | `number` | - | Максимальная длина вводимого значения |
462
462
  | autoComplete | `string \| boolean` | false | Включен ли автокомплит для поля |
463
+ | onKeyDown | `KeyboardEventHandler<HTMLInputElement>` | - | Колбек обработки начала нажатия клавиши клавиатуры |
464
+ | onPaste | `ClipboardEventHandler<HTMLInputElement>` | - | Колбек обработки вставки значения |
463
465
  | className | `string` | - | CSS-класс |
464
466
  | label | `string` | - | Лейбл |
465
467
  | labelTooltip | `ReactNode` | - | Всплывающая подсказка лейбла |
package/dist/cjs/components/FieldText/FieldText.d.ts CHANGED
@@ -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'>;
6
+ type InputProps = Pick<Partial<InputPrivateProps>, 'value' | 'onChange'> & Pick<InputPrivateProps, 'id' | 'name' | 'placeholder' | 'maxLength' | 'disabled' | 'readonly' | 'onFocus' | 'onBlur' | 'autoComplete' | 'onPaste' | 'onKeyDown'>;
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`) */
@@ -29,5 +29,5 @@ type FieldTextOwnProps = {
29
29
  export type FieldTextProps = WithSupportProps<FieldTextOwnProps & InputProps & WrapperProps>;
30
30
  export declare const FieldText: import("react").ForwardRefExoticComponent<{
31
31
  'data-test-id'?: string;
32
- } & import("react").AriaAttributes & FieldTextOwnProps & Pick<Partial<InputPrivateProps>, "value" | "onChange"> & Pick<InputPrivateProps, "onFocus" | "onBlur" | "id" | "disabled" | "name" | "readonly" | "placeholder" | "autoComplete" | "maxLength"> & WrapperProps & import("react").RefAttributes<HTMLInputElement>>;
32
+ } & 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
33
  export {};
package/dist/cjs/components/FieldText/FieldText.js CHANGED
@@ -59,9 +59,11 @@ exports.FieldText = (0, react_1.forwardRef)((_a, ref) => {
59
59
  prefixIcon,
60
60
  prefix,
61
61
  postfix,
62
- button: buttonProp
62
+ button: buttonProp,
63
+ onPaste,
64
+ onKeyDown
63
65
  } = _a,
64
- 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"]);
66
+ 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"]);
65
67
  const [value = '', onChange] = (0, hooks_1.useValueControl)({
66
68
  value: valueProp,
67
69
  defaultValue: '',
@@ -154,6 +156,10 @@ exports.FieldText = (0, react_1.forwardRef)((_a, ref) => {
154
156
  readonly,
155
157
  submitKeys: ['Enter', 'Space', 'Tab']
156
158
  });
159
+ const handleKeyDown = event => {
160
+ onInputKeyDown(event);
161
+ onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
162
+ };
157
163
  return (0, jsx_runtime_1.jsx)(FieldDecorator_1.FieldDecorator, Object.assign({
158
164
  className: className,
159
165
  label: label,
@@ -192,7 +198,8 @@ exports.FieldText = (0, react_1.forwardRef)((_a, ref) => {
192
198
  onFocus: onFocus,
193
199
  onBlur: onBlur,
194
200
  tabIndex: inputTabIndex,
195
- onKeyDown: onInputKeyDown,
201
+ onKeyDown: handleKeyDown,
202
+ onPaste: onPaste,
196
203
  placeholder: placeholder,
197
204
  disabled: disabled,
198
205
  readonly: readonly,
package/dist/esm/components/FieldText/FieldText.d.ts CHANGED
@@ -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'>;
6
+ type InputProps = Pick<Partial<InputPrivateProps>, 'value' | 'onChange'> & Pick<InputPrivateProps, 'id' | 'name' | 'placeholder' | 'maxLength' | 'disabled' | 'readonly' | 'onFocus' | 'onBlur' | 'autoComplete' | 'onPaste' | 'onKeyDown'>;
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`) */
@@ -29,5 +29,5 @@ type FieldTextOwnProps = {
29
29
  export type FieldTextProps = WithSupportProps<FieldTextOwnProps & InputProps & WrapperProps>;
30
30
  export declare const FieldText: import("react").ForwardRefExoticComponent<{
31
31
  'data-test-id'?: string;
32
- } & import("react").AriaAttributes & FieldTextOwnProps & Pick<Partial<InputPrivateProps>, "value" | "onChange"> & Pick<InputPrivateProps, "onFocus" | "onBlur" | "id" | "disabled" | "name" | "readonly" | "placeholder" | "autoComplete" | "maxLength"> & WrapperProps & import("react").RefAttributes<HTMLInputElement>>;
32
+ } & 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
33
  export {};
package/dist/esm/components/FieldText/FieldText.js CHANGED
@@ -11,7 +11,7 @@ var __rest = (this && this.__rest) || function (s, e) {
11
11
  };
12
12
  import { jsx as _jsx } from "react/jsx-runtime";
13
13
  import mergeRefs from 'merge-refs';
14
- import { forwardRef, useCallback, useMemo, useRef, useState } from 'react';
14
+ import { forwardRef, useCallback, useMemo, useRef, useState, } from 'react';
15
15
  import { InputPrivate, SIZE, useButtonNavigation, useClearButton } from '@snack-uikit/input-private';
16
16
  import { extractSupportProps } from '@snack-uikit/utils';
17
17
  import { VALIDATION_STATE } from '../../constants';
@@ -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 } = _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"]);
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 } = _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"]);
25
25
  const [value = '', onChange] = useValueControl({
26
26
  value: valueProp,
27
27
  defaultValue: '',
@@ -87,5 +87,9 @@ export const FieldText = forwardRef((_a, ref) => {
87
87
  readonly,
88
88
  submitKeys: ['Enter', 'Space', 'Tab'],
89
89
  });
90
- 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, 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' }) }) })));
90
+ const handleKeyDown = event => {
91
+ onInputKeyDown(event);
92
+ onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
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: 'text', maxLength: allowMoreThanMaxLength ? undefined : maxLength || undefined, id: id, name: name, autoComplete: autoComplete, "data-test-id": 'field-text__input' }) }) })));
91
95
  });
package/package.json CHANGED
@@ -4,7 +4,7 @@
4
4
  "access": "public"
5
5
  },
6
6
  "title": "Fields",
7
- "version": "0.35.6",
7
+ "version": "0.35.7-preview-aaafcc64.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.5",
40
- "@snack-uikit/calendar": "0.11.11",
41
- "@snack-uikit/color-picker": "0.3.7",
40
+ "@snack-uikit/calendar": "0.11.12-preview-aaafcc64.0",
41
+ "@snack-uikit/color-picker": "0.3.8-preview-aaafcc64.0",
42
42
  "@snack-uikit/divider": "3.2.2",
43
43
  "@snack-uikit/dropdown": "0.4.2",
44
44
  "@snack-uikit/icons": "0.24.1",
45
- "@snack-uikit/input-private": "4.4.1",
46
- "@snack-uikit/list": "0.21.11",
45
+ "@snack-uikit/input-private": "4.4.2-preview-aaafcc64.0",
46
+ "@snack-uikit/list": "0.21.12-preview-aaafcc64.0",
47
47
  "@snack-uikit/scroll": "0.9.2",
48
48
  "@snack-uikit/skeleton": "0.6.1",
49
49
  "@snack-uikit/slider": "0.3.3",
@@ -65,5 +65,5 @@
65
65
  "peerDependencies": {
66
66
  "@snack-uikit/locale": "*"
67
67
  },
68
- "gitHead": "33a6d8bc270bd11dec3e4834f2ba8e97c57d5c15"
68
+ "gitHead": "9b5447b2d25fb8a5aa0517bafe2cd1613e6e7531"
69
69
  }
package/src/components/FieldText/FieldText.tsx CHANGED
@@ -1,5 +1,14 @@
1
1
  import mergeRefs from 'merge-refs';
2
- import { forwardRef, ReactElement, ReactNode, useCallback, useMemo, useRef, useState } from 'react';
2
+ import {
3
+ forwardRef,
4
+ KeyboardEventHandler,
5
+ ReactElement,
6
+ ReactNode,
7
+ useCallback,
8
+ useMemo,
9
+ useRef,
10
+ useState,
11
+ } from 'react';
3
12
 
4
13
  import { InputPrivate, InputPrivateProps, SIZE, useButtonNavigation, useClearButton } from '@snack-uikit/input-private';
5
14
  import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
@@ -15,7 +24,17 @@ import { getContainerVariant } from './helpers';
15
24
  type InputProps = Pick<Partial<InputPrivateProps>, 'value' | 'onChange'> &
16
25
  Pick<
17
26
  InputPrivateProps,
18
- 'id' | 'name' | 'placeholder' | 'maxLength' | 'disabled' | 'readonly' | 'onFocus' | 'onBlur' | 'autoComplete'
27
+ | 'id'
28
+ | 'name'
29
+ | 'placeholder'
30
+ | 'maxLength'
31
+ | 'disabled'
32
+ | 'readonly'
33
+ | 'onFocus'
34
+ | 'onBlur'
35
+ | 'autoComplete'
36
+ | 'onPaste'
37
+ | 'onKeyDown'
19
38
  >;
20
39
 
21
40
  type WrapperProps = Pick<
@@ -90,6 +109,8 @@ export const FieldText = forwardRef<HTMLInputElement, FieldTextProps>(
90
109
  prefix,
91
110
  postfix,
92
111
  button: buttonProp,
112
+ onPaste,
113
+ onKeyDown,
93
114
  ...rest
94
115
  },
95
116
  ref,
@@ -181,6 +202,11 @@ export const FieldText = forwardRef<HTMLInputElement, FieldTextProps>(
181
202
  submitKeys: ['Enter', 'Space', 'Tab'],
182
203
  });
183
204
 
205
+ const handleKeyDown: KeyboardEventHandler<HTMLInputElement> = event => {
206
+ onInputKeyDown(event);
207
+ onKeyDown?.(event);
208
+ };
209
+
184
210
  return (
185
211
  <FieldDecorator
186
212
  className={className}
@@ -219,7 +245,8 @@ export const FieldText = forwardRef<HTMLInputElement, FieldTextProps>(
219
245
  onFocus={onFocus}
220
246
  onBlur={onBlur}
221
247
  tabIndex={inputTabIndex}
222
- onKeyDown={onInputKeyDown}
248
+ onKeyDown={handleKeyDown}
249
+ onPaste={onPaste}
223
250
  placeholder={placeholder}
224
251
  disabled={disabled}
225
252
  readonly={readonly}