@snack-uikit/fields 0.51.11 → 0.51.12

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## <small>0.51.12 (2025-12-01)</small>
+
+* feat(PDS-3204): added onClearButtonClick in FieldText ([2a0526b](https://github.com/cloud-ru-tech/snack-uikit/commit/2a0526b))
+
+
+
+
+
 ## <small>0.51.11 (2025-11-28)</small>
 
 ### Only dependencies have been changed

package/README.md

@@ -473,6 +473,7 @@ FieldStepper в основном предназначен для работы с
 | showCopyButton | `boolean` | - | Отображение кнопки Копировать для поля (актуально только для `readonly = true`) |
 | onCopyButtonClick | `() => void` | - | Колбек клика по кнопке Копировать для поля |
 | showClearButton | `boolean` | true | Отображение кнопки очистки поля |
+| onClearButtonClick | `() => void` | - | Колбек клика по кнопке очистки поля |
 | allowMoreThanMaxLength | `boolean` | - | Можно ли вводить больше разрешённого кол-ва символов |
 | prefixIcon | `ReactElement<any, string \| JSXElementConstructor<any>>` | - | Иконка-префикс для поля |
 | prefix | `ReactNode` | - | Произвольный префикс для поля |

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

@@ -15,6 +15,8 @@ type FieldTextOwnProps = {
      * @default true
      */
     showClearButton?: boolean;
+    /** Колбек клика по кнопке очистки поля */
+    onClearButtonClick?(): void;
     /** Можно ли вводить больше разрешённого кол-ва символов */
     allowMoreThanMaxLength?: boolean;
     /** Иконка-префикс для поля */

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

@@ -44,6 +44,7 @@ exports.FieldText = (0, react_1.forwardRef)((_a, ref) => {
       onFocus,
       onBlur,
       onCopyButtonClick,
+      onClearButtonClick,
       className,
       label,
       labelTooltip,
@@ -67,7 +68,7 @@ exports.FieldText = (0, react_1.forwardRef)((_a, ref) => {
       inputMode,
       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", "autoFocus", "prefixIcon", "prefix", "postfix", "button", "onPaste", "onKeyDown", "type", "inputMode", "spellCheck"]);
+    rest = __rest(_a, ["id", "name", "value", "placeholder", "maxLength", "disabled", "readonly", "showCopyButton", "showClearButton", "allowMoreThanMaxLength", "onChange", "onFocus", "onBlur", "onCopyButtonClick", "onClearButtonClick", "className", "label", "labelTooltip", "labelTooltipPlacement", "required", "caption", "hint", "showHintIcon", "size", "validationState", "error", "autoComplete", "autoFocus", "prefixIcon", "prefix", "postfix", "button", "onPaste", "onKeyDown", "type", "inputMode", "spellCheck"]);
   const [value = '', onChange] = (0, hooks_1.useValueControl)({
     value: valueProp,
     defaultValue: '',
@@ -98,18 +99,26 @@ exports.FieldText = (0, react_1.forwardRef)((_a, ref) => {
   const containerVariant = (0, helpers_1.getContainerVariant)({
     button
   });
-  const onClear = () => {
+  const [isFieldFocused, setIsFieldFocused] = (0, react_1.useState)(false);
+  const focusedRef = (0, react_1.useRef)(false);
+  const onClear = e => {
     var _a;
+    e.preventDefault();
     onChange('');
-    if (required) {
+    onClearButtonClick === null || onClearButtonClick === void 0 ? void 0 : onClearButtonClick();
+    if (focusedRef.current) {
       (_a = localRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     }
   };
+  const handleClearClickDown = () => {
+    focusedRef.current = isFieldFocused;
+  };
   const clearButtonSettings = (0, input_private_1.useClearButton)({
     clearButtonRef,
     showClearButton,
-    size,
-    onClear
+    onClear,
+    onDown: handleClearClickDown,
+    size
   });
   const copyButtonSettings = (0, hooks_1.useCopyButton)({
     copyButtonRef,
@@ -164,6 +173,20 @@ exports.FieldText = (0, react_1.forwardRef)((_a, ref) => {
     onInputKeyDown(event);
     onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
   };
+  const handleBlur = event => {
+    const nextTarget = event.relatedTarget;
+    // если фокус ушёл на кнопку очистки — игнорируем внешний onBlur
+    if (nextTarget && nextTarget === clearButtonRef.current) {
+      setIsFieldFocused(false);
+      return;
+    }
+    onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
+    setIsFieldFocused(false);
+  };
+  const handleFocus = event => {
+    onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
+    setIsFieldFocused(true);
+  };
   return (0, jsx_runtime_1.jsx)(FieldDecorator_1.FieldDecorator, Object.assign({
     className: className,
     label: label,
@@ -199,8 +222,8 @@ exports.FieldText = (0, react_1.forwardRef)((_a, ref) => {
         "data-size": size,
         value: value,
         onChange: onChange,
-        onFocus: onFocus,
-        onBlur: onBlur,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
         tabIndex: inputTabIndex,
         onKeyDown: handleKeyDown,
         onPaste: onPaste,

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

@@ -15,6 +15,8 @@ type FieldTextOwnProps = {
      * @default true
      */
     showClearButton?: boolean;
+    /** Колбек клика по кнопке очистки поля */
+    onClearButtonClick?(): void;
     /** Можно ли вводить больше разрешённого кол-ва символов */
     allowMoreThanMaxLength?: boolean;
     /** Иконка-префикс для поля */

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

@@ -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, autoFocus, prefixIcon, prefix, postfix, button: buttonProp, onPaste, onKeyDown, type = 'text', inputMode, 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", "autoFocus", "prefixIcon", "prefix", "postfix", "button", "onPaste", "onKeyDown", "type", "inputMode", "spellCheck"]);
+    var { id, name, value: valueProp, placeholder, maxLength, disabled = false, readonly = false, showCopyButton: showCopyButtonProp = true, showClearButton: showClearButtonProp = true, allowMoreThanMaxLength = false, onChange: onChangeProp, onFocus, onBlur, onCopyButtonClick, onClearButtonClick, className, label, labelTooltip, labelTooltipPlacement, required = false, caption, hint, showHintIcon, size = SIZE.S, validationState = VALIDATION_STATE.Default, error, autoComplete, autoFocus, prefixIcon, prefix, postfix, button: buttonProp, onPaste, onKeyDown, type = 'text', inputMode, spellCheck } = _a, rest = __rest(_a, ["id", "name", "value", "placeholder", "maxLength", "disabled", "readonly", "showCopyButton", "showClearButton", "allowMoreThanMaxLength", "onChange", "onFocus", "onBlur", "onCopyButtonClick", "onClearButtonClick", "className", "label", "labelTooltip", "labelTooltipPlacement", "required", "caption", "hint", "showHintIcon", "size", "validationState", "error", "autoComplete", "autoFocus", "prefixIcon", "prefix", "postfix", "button", "onPaste", "onKeyDown", "type", "inputMode", "spellCheck"]);
     const [value = '', onChange] = useValueControl({
         value: valueProp,
         defaultValue: '',
@@ -41,14 +41,27 @@ export const FieldText = forwardRef((_a, ref) => {
                     setTimeout(() => { var _a; return (_a = localRef.current) === null || _a === void 0 ? void 0 : _a.focus(); }, 0);
                 } }) }) : undefined, [buttonProp]);
     const containerVariant = getContainerVariant({ button });
-    const onClear = () => {
+    const [isFieldFocused, setIsFieldFocused] = useState(false);
+    const focusedRef = useRef(false);
+    const onClear = e => {
         var _a;
+        e.preventDefault();
         onChange('');
-        if (required) {
+        onClearButtonClick === null || onClearButtonClick === void 0 ? void 0 : onClearButtonClick();
+        if (focusedRef.current) {
             (_a = localRef.current) === null || _a === void 0 ? void 0 : _a.focus();
         }
     };
-    const clearButtonSettings = useClearButton({ clearButtonRef, showClearButton, size, onClear });
+    const handleClearClickDown = () => {
+        focusedRef.current = isFieldFocused;
+    };
+    const clearButtonSettings = useClearButton({
+        clearButtonRef,
+        showClearButton,
+        onClear,
+        onDown: handleClearClickDown,
+        size,
+    });
     const copyButtonSettings = useCopyButton({
         copyButtonRef,
         showCopyButton,
@@ -91,5 +104,19 @@ export const FieldText = forwardRef((_a, ref) => {
         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: type, inputMode: inputMode, maxLength: allowMoreThanMaxLength ? undefined : maxLength || undefined, id: id, name: name, autoComplete: autoComplete, autoFocus: autoFocus, spellCheck: spellCheck, "data-test-id": 'field-text__input' }) }) })));
+    const handleBlur = event => {
+        const nextTarget = event.relatedTarget;
+        // если фокус ушёл на кнопку очистки — игнорируем внешний onBlur
+        if (nextTarget && nextTarget === clearButtonRef.current) {
+            setIsFieldFocused(false);
+            return;
+        }
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
+        setIsFieldFocused(false);
+    };
+    const handleFocus = event => {
+        onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
+        setIsFieldFocused(true);
+    };
+    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: handleFocus, onBlur: handleBlur, tabIndex: inputTabIndex, onKeyDown: handleKeyDown, onPaste: onPaste, placeholder: placeholder, disabled: disabled, readonly: readonly, type: type, inputMode: inputMode, maxLength: allowMoreThanMaxLength ? undefined : maxLength || undefined, id: id, name: name, autoComplete: autoComplete, autoFocus: autoFocus, spellCheck: spellCheck, "data-test-id": 'field-text__input' }) }) })));
 });

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Fields",
-  "version": "0.51.11",
+  "version": "0.51.12",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -37,13 +37,13 @@
   "scripts": {},
   "dependencies": {
     "@snack-uikit/button": "0.19.16",
-    "@snack-uikit/calendar": "0.13.10",
-    "@snack-uikit/color-picker": "0.3.49",
+    "@snack-uikit/calendar": "0.13.11",
+    "@snack-uikit/color-picker": "0.3.50",
     "@snack-uikit/divider": "3.2.10",
     "@snack-uikit/dropdown": "0.5.3",
     "@snack-uikit/icons": "0.27.4",
-    "@snack-uikit/input-private": "4.8.4",
-    "@snack-uikit/list": "0.32.9",
+    "@snack-uikit/input-private": "4.8.5",
+    "@snack-uikit/list": "0.32.10",
     "@snack-uikit/scroll": "0.10.5",
     "@snack-uikit/skeleton": "0.6.9",
     "@snack-uikit/slider": "0.3.30",
@@ -66,5 +66,5 @@
   "peerDependencies": {
     "@snack-uikit/locale": "*"
   },
-  "gitHead": "6b39e180766635f8190da903bf560d1fbcbfaf52"
+  "gitHead": "e1b3bee4ec326c0c7e9c87b2714634a8ff113ded"
 }

package/src/components/FieldText/FieldText.tsx

@@ -1,7 +1,9 @@
 import mergeRefs from 'merge-refs';
 import {
+  FocusEventHandler,
   forwardRef,
   KeyboardEventHandler,
+  MouseEventHandler,
   ReactElement,
   ReactNode,
   useCallback,
@@ -66,6 +68,8 @@ type FieldTextOwnProps = {
    * @default true
    */
   showClearButton?: boolean;
+  /** Колбек клика по кнопке очистки поля */
+  onClearButtonClick?(): void;
   /** Можно ли вводить больше разрешённого кол-ва символов */
   allowMoreThanMaxLength?: boolean;
   /** Иконка-префикс для поля */
@@ -100,6 +104,7 @@ export const FieldText = forwardRef<HTMLInputElement, FieldTextProps>(
       onFocus,
       onBlur,
       onCopyButtonClick,
+      onClearButtonClick,
       className,
       label,
       labelTooltip,
@@ -158,15 +163,31 @@ export const FieldText = forwardRef<HTMLInputElement, FieldTextProps>(
 
     const containerVariant = getContainerVariant({ button });
 
-    const onClear = () => {
+    const [isFieldFocused, setIsFieldFocused] = useState(false);
+    const focusedRef = useRef(false);
+
+    const onClear: MouseEventHandler<HTMLButtonElement> = e => {
+      e.preventDefault();
       onChange('');
+      onClearButtonClick?.();
 
-      if (required) {
+      if (focusedRef.current) {
         localRef.current?.focus();
       }
     };
 
-    const clearButtonSettings = useClearButton({ clearButtonRef, showClearButton, size, onClear });
+    const handleClearClickDown = () => {
+      focusedRef.current = isFieldFocused;
+    };
+
+    const clearButtonSettings = useClearButton({
+      clearButtonRef,
+      showClearButton,
+      onClear,
+      onDown: handleClearClickDown,
+      size,
+    });
+
     const copyButtonSettings = useCopyButton({
       copyButtonRef,
       showCopyButton,
@@ -218,6 +239,24 @@ export const FieldText = forwardRef<HTMLInputElement, FieldTextProps>(
       onKeyDown?.(event);
     };
 
+    const handleBlur: FocusEventHandler<HTMLInputElement> = event => {
+      const nextTarget = event.relatedTarget as HTMLElement | null;
+
+      // если фокус ушёл на кнопку очистки — игнорируем внешний onBlur
+      if (nextTarget && nextTarget === clearButtonRef.current) {
+        setIsFieldFocused(false);
+        return;
+      }
+
+      onBlur?.(event);
+      setIsFieldFocused(false);
+    };
+
+    const handleFocus: FocusEventHandler<HTMLInputElement> = event => {
+      onFocus?.(event);
+      setIsFieldFocused(true);
+    };
+
     return (
       <FieldDecorator
         className={className}
@@ -253,8 +292,8 @@ export const FieldText = forwardRef<HTMLInputElement, FieldTextProps>(
             data-size={size}
             value={value}
             onChange={onChange}
-            onFocus={onFocus}
-            onBlur={onBlur}
+            onFocus={handleFocus}
+            onBlur={handleBlur}
             tabIndex={inputTabIndex}
             onKeyDown={handleKeyDown}
             onPaste={onPaste}