@snack-uikit/fields 0.51.8 → 0.51.10-preview-e119b7ab.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.
 
+## <small>0.51.9 (2025-11-14)</small>
+
+### Only dependencies have been changed
+* [@snack-uikit/calendar@0.13.8](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/calendar/CHANGELOG.md)
+* [@snack-uikit/color-picker@0.3.47](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/color-picker/CHANGELOG.md)
+* [@snack-uikit/list@0.32.7](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/list/CHANGELOG.md)
+* [@snack-uikit/truncate-string@0.7.4](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/truncate-string/CHANGELOG.md)
+
+
+
+
+
 ## <small>0.51.8 (2025-11-06)</small>
 
 * feat(PDS-1292): presets for calendar range mode ([45929bd](https://github.com/cloud-ru-tech/snack-uikit/commit/45929bd))

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,10 +99,14 @@ exports.FieldText = (0, react_1.forwardRef)((_a, ref) => {
   const containerVariant = (0, helpers_1.getContainerVariant)({
     button
   });
+  const [isButtonFocused, setIsButtonFocused] = (0, react_1.useState)(false);
+  const onButtonFocus = (0, react_1.useCallback)(() => setIsButtonFocused(true), []);
+  const onButtonBlur = (0, react_1.useCallback)(() => setIsButtonFocused(false), []);
   const onClear = () => {
     var _a;
     onChange('');
-    if (required) {
+    onClearButtonClick === null || onClearButtonClick === void 0 ? void 0 : onClearButtonClick();
+    if (isButtonFocused) {
       (_a = localRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     }
   };
@@ -120,9 +125,6 @@ exports.FieldText = (0, react_1.forwardRef)((_a, ref) => {
     postfix: typeof postfix === 'string' ? postfix : undefined,
     onCopyButtonClick
   });
-  const [isButtonFocused, setIsButtonFocused] = (0, react_1.useState)(false);
-  const onButtonFocus = (0, react_1.useCallback)(() => setIsButtonFocused(true), []);
-  const onButtonBlur = (0, react_1.useCallback)(() => setIsButtonFocused(false), []);
   const prefixSettings = (0, hooks_1.usePrefix)({
     prefix,
     disabled

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,10 +41,14 @@ 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 [isButtonFocused, setIsButtonFocused] = useState(false);
+    const onButtonFocus = useCallback(() => setIsButtonFocused(true), []);
+    const onButtonBlur = useCallback(() => setIsButtonFocused(false), []);
     const onClear = () => {
         var _a;
         onChange('');
-        if (required) {
+        onClearButtonClick === null || onClearButtonClick === void 0 ? void 0 : onClearButtonClick();
+        if (isButtonFocused) {
             (_a = localRef.current) === null || _a === void 0 ? void 0 : _a.focus();
         }
     };
@@ -58,9 +62,6 @@ export const FieldText = forwardRef((_a, ref) => {
         postfix: typeof postfix === 'string' ? postfix : undefined,
         onCopyButtonClick,
     });
-    const [isButtonFocused, setIsButtonFocused] = useState(false);
-    const onButtonFocus = useCallback(() => setIsButtonFocused(true), []);
-    const onButtonBlur = useCallback(() => setIsButtonFocused(false), []);
     const prefixSettings = usePrefix({ prefix, disabled });
     const prefixButtonSettings = usePrefixButton({
         button,

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Fields",
-  "version": "0.51.8",
+  "version": "0.51.10-preview-e119b7ab.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -37,19 +37,19 @@
   "scripts": {},
   "dependencies": {
     "@snack-uikit/button": "0.19.16",
-    "@snack-uikit/calendar": "0.13.7",
-    "@snack-uikit/color-picker": "0.3.46",
+    "@snack-uikit/calendar": "0.13.8",
+    "@snack-uikit/color-picker": "0.3.47",
     "@snack-uikit/divider": "3.2.10",
     "@snack-uikit/dropdown": "0.5.3",
     "@snack-uikit/icons": "0.27.3",
     "@snack-uikit/input-private": "4.8.3",
-    "@snack-uikit/list": "0.32.6",
+    "@snack-uikit/list": "0.32.7",
     "@snack-uikit/scroll": "0.10.5",
     "@snack-uikit/skeleton": "0.6.9",
     "@snack-uikit/slider": "0.3.28",
     "@snack-uikit/tag": "0.15.10",
     "@snack-uikit/tooltip": "0.18.5",
-    "@snack-uikit/truncate-string": "0.7.3",
+    "@snack-uikit/truncate-string": "0.7.4",
     "@snack-uikit/utils": "4.0.0",
     "classnames": "2.5.1",
     "copy-to-clipboard": "3.3.3",
@@ -66,5 +66,5 @@
   "peerDependencies": {
     "@snack-uikit/locale": "*"
   },
-  "gitHead": "6b989b5fe57383ddf2bd6c1186bf4e1652633da7"
+  "gitHead": "72d6584968fb939451725d0615b726479da0706a"
 }

package/src/components/FieldText/FieldText.tsx

@@ -66,6 +66,8 @@ type FieldTextOwnProps = {
    * @default true
    */
   showClearButton?: boolean;
+  /** Колбек клика по кнопке очистки поля */
+  onClearButtonClick?(): void;
   /** Можно ли вводить больше разрешённого кол-ва символов */
   allowMoreThanMaxLength?: boolean;
   /** Иконка-префикс для поля */
@@ -100,6 +102,7 @@ export const FieldText = forwardRef<HTMLInputElement, FieldTextProps>(
       onFocus,
       onBlur,
       onCopyButtonClick,
+      onClearButtonClick,
       className,
       label,
       labelTooltip,
@@ -158,10 +161,15 @@ export const FieldText = forwardRef<HTMLInputElement, FieldTextProps>(
 
     const containerVariant = getContainerVariant({ button });
 
+    const [isButtonFocused, setIsButtonFocused] = useState(false);
+    const onButtonFocus = useCallback(() => setIsButtonFocused(true), []);
+    const onButtonBlur = useCallback(() => setIsButtonFocused(false), []);
+
     const onClear = () => {
       onChange('');
+      onClearButtonClick?.();
 
-      if (required) {
+      if (isButtonFocused) {
         localRef.current?.focus();
       }
     };
@@ -177,10 +185,6 @@ export const FieldText = forwardRef<HTMLInputElement, FieldTextProps>(
       onCopyButtonClick,
     });
 
-    const [isButtonFocused, setIsButtonFocused] = useState(false);
-    const onButtonFocus = useCallback(() => setIsButtonFocused(true), []);
-    const onButtonBlur = useCallback(() => setIsButtonFocused(false), []);
-
     const prefixSettings = usePrefix({ prefix, disabled });
     const prefixButtonSettings = usePrefixButton({
       button,