@snack-uikit/fields 0.49.3 → 0.50.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.50.0 (2025-09-02)
+
+
+### Features
+
+* **UIIAAS-1033:** added tooltips in FieldStepper counter buttons ([3f6d19f](https://github.com/cloud-ru-tech/snack-uikit/commit/3f6d19fddbe76cc9483fed77ae77bafbe610f4bf))
+
+
+
+
+
 ## 0.49.3 (2025-09-01)
 
 ### Only dependencies have been changed

package/README.md

@@ -442,6 +442,8 @@ FieldStepper в основном предназначен для работы с
 | allowMoreThanLimits | `boolean` | true | Можно ли вводить c клавиатуры числа, выходящие за пределы min/max |
 | prefix | `ReactNode` | - | Произвольный префикс для поля |
 | postfix | `ReactNode` | - | Произвольный постфикс для поля |
+| plusButtonTooltip | `TooltipProps` | - | Тултип над кнопкой увеличения значения |
+| minusButtonTooltip | `TooltipProps` | - | Тултип над кнопкой уменьшения значения |
 | id | `string` | - | Значение html-атрибута id |
 | name | `string` | - | Значение html-атрибута name |
 | disabled | `boolean` | - | Является ли поле деактивированным |
@@ -489,7 +491,7 @@ FieldStepper в основном предназначен для работы с
 | autoFocus | `boolean` | false | Включен ли авто-фокус для поля |
 | maxLength | `number` | - | Максимальная длина вводимого значения |
 | autoComplete | `string \| boolean` | false | Включен ли автокомплит для поля |
-| inputMode | enum InputMode: `"text"`, `"search"`, `"tel"`, `"email"`, `"decimal"`, `"numeric"`, `"url"` | - | Режим работы экранной клавиатуры |
+| inputMode | enum InputMode: `"none"`, `"text"`, `"search"`, `"tel"`, `"email"`, `"decimal"`, `"numeric"`, `"url"` | - | Режим работы экранной клавиатуры |
 | spellCheck | `boolean` | true | Значение атрибута spellcheck (проверка орфографии) |
 | pattern | `string` | - | Регулярное выражение валидного инпута |
 | onKeyDown | `KeyboardEventHandler<HTMLInputElement>` | - | Колбек обработки начала нажатия клавиши клавиатуры |

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

@@ -1,5 +1,6 @@
 import { ChangeEvent, ReactNode } from 'react';
 import { InputPrivateProps } from '@snack-uikit/input-private';
+import { TooltipProps } from '@snack-uikit/tooltip';
 import { WithSupportProps } from '@snack-uikit/utils';
 import { FieldDecoratorProps } from '../FieldDecorator';
 type InputProps = Pick<InputPrivateProps, 'id' | 'name' | 'disabled' | 'readonly' | 'onFocus' | 'onBlur' | 'min' | 'max' | 'autoFocus'>;
@@ -17,6 +18,10 @@ type FieldStepperOwnProps = {
     prefix?: ReactNode;
     /** Произвольный постфикс для поля */
     postfix?: ReactNode;
+    /** Тултип над кнопкой увеличения значения */
+    plusButtonTooltip?: TooltipProps;
+    /** Тултип над кнопкой уменьшения значения */
+    minusButtonTooltip?: TooltipProps;
 };
 export type FieldStepperProps = WithSupportProps<FieldStepperOwnProps & InputProps & WrapperProps>;
 export declare const FieldStepper: import("react").ForwardRefExoticComponent<{

package/dist/cjs/components/FieldStepper/FieldStepper.js

@@ -55,6 +55,8 @@ exports.FieldStepper = (0, react_1.forwardRef)((_a, ref) => {
       value: valueProp,
       min = Number.NEGATIVE_INFINITY,
       max = Number.POSITIVE_INFINITY,
+      plusButtonTooltip,
+      minusButtonTooltip,
       step = 1,
       disabled = false,
       readonly = false,
@@ -77,7 +79,7 @@ exports.FieldStepper = (0, react_1.forwardRef)((_a, ref) => {
       postfix,
       autoFocus
     } = _a,
-    rest = __rest(_a, ["id", "name", "value", "min", "max", "step", "disabled", "readonly", "allowMoreThanLimits", "onChange", "onFocus", "onBlur", "className", "label", "labelTooltip", "labelTooltipPlacement", "required", "caption", "hint", "showHintIcon", "size", "validationState", "error", "prefix", "postfix", "autoFocus"]);
+    rest = __rest(_a, ["id", "name", "value", "min", "max", "plusButtonTooltip", "minusButtonTooltip", "step", "disabled", "readonly", "allowMoreThanLimits", "onChange", "onFocus", "onBlur", "className", "label", "labelTooltip", "labelTooltipPlacement", "required", "caption", "hint", "showHintIcon", "size", "validationState", "error", "prefix", "postfix", "autoFocus"]);
   const {
     t
   } = (0, locale_1.useLocale)('Fields');
@@ -188,26 +190,36 @@ exports.FieldStepper = (0, react_1.forwardRef)((_a, ref) => {
         readonly: readonly,
         variant: constants_1.CONTAINER_VARIANT.SingleLine,
         inputRef: inputRef,
-        prefix: (0, jsx_runtime_1.jsx)(button_1.ButtonFunction, {
-          tabIndex: -1,
-          size: 'xs',
-          className: styles_module_scss_1.default.button,
-          icon: (0, jsx_runtime_1.jsx)(icons_1.MinusSVG, {}),
-          onClick: handleMinusButtonClick,
-          onKeyDown: handleMinusButtonKeyDown,
-          disabled: isMinusButtonDisabled,
-          "data-test-id": 'field-stepper__minus-button'
-        }),
-        postfix: (0, jsx_runtime_1.jsx)(button_1.ButtonFunction, {
-          tabIndex: -1,
-          size: 'xs',
-          className: styles_module_scss_1.default.button,
-          icon: (0, jsx_runtime_1.jsx)(icons_1.PlusSVG, {}),
-          onClick: handlePlusButtonClick,
-          onKeyDown: handlePlusButtonKeyDown,
-          disabled: isPlusButtonDisabled,
-          "data-test-id": 'field-stepper__plus-button'
-        }),
+        prefix: (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, Object.assign({}, minusButtonTooltip, {
+          open: minusButtonTooltip ? minusButtonTooltip === null || minusButtonTooltip === void 0 ? void 0 : minusButtonTooltip.open : false,
+          tip: minusButtonTooltip === null || minusButtonTooltip === void 0 ? void 0 : minusButtonTooltip.tip,
+          "data-test-id": 'field-stepper__minus-button-tooltip',
+          children: (0, jsx_runtime_1.jsx)(button_1.ButtonFunction, {
+            tabIndex: -1,
+            size: 'xs',
+            className: styles_module_scss_1.default.button,
+            icon: (0, jsx_runtime_1.jsx)(icons_1.MinusSVG, {}),
+            onClick: handleMinusButtonClick,
+            onKeyDown: handleMinusButtonKeyDown,
+            disabled: isMinusButtonDisabled,
+            "data-test-id": 'field-stepper__minus-button'
+          })
+        })),
+        postfix: (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, Object.assign({}, plusButtonTooltip, {
+          open: plusButtonTooltip ? plusButtonTooltip === null || plusButtonTooltip === void 0 ? void 0 : plusButtonTooltip.open : false,
+          tip: plusButtonTooltip === null || plusButtonTooltip === void 0 ? void 0 : plusButtonTooltip.tip,
+          "data-test-id": 'field-stepper__plus-button-tooltip',
+          children: (0, jsx_runtime_1.jsx)(button_1.ButtonFunction, {
+            tabIndex: -1,
+            size: 'xs',
+            className: styles_module_scss_1.default.button,
+            icon: (0, jsx_runtime_1.jsx)(icons_1.PlusSVG, {}),
+            onClick: handlePlusButtonClick,
+            onKeyDown: handlePlusButtonKeyDown,
+            disabled: isPlusButtonDisabled,
+            "data-test-id": 'field-stepper__plus-button'
+          })
+        })),
         children: (0, jsx_runtime_1.jsxs)("div", {
           className: styles_module_scss_1.default.wrap,
           children: [(0, jsx_runtime_1.jsx)("div", {

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

@@ -1,5 +1,6 @@
 import { ChangeEvent, ReactNode } from 'react';
 import { InputPrivateProps } from '@snack-uikit/input-private';
+import { TooltipProps } from '@snack-uikit/tooltip';
 import { WithSupportProps } from '@snack-uikit/utils';
 import { FieldDecoratorProps } from '../FieldDecorator';
 type InputProps = Pick<InputPrivateProps, 'id' | 'name' | 'disabled' | 'readonly' | 'onFocus' | 'onBlur' | 'min' | 'max' | 'autoFocus'>;
@@ -17,6 +18,10 @@ type FieldStepperOwnProps = {
     prefix?: ReactNode;
     /** Произвольный постфикс для поля */
     postfix?: ReactNode;
+    /** Тултип над кнопкой увеличения значения */
+    plusButtonTooltip?: TooltipProps;
+    /** Тултип над кнопкой уменьшения значения */
+    minusButtonTooltip?: TooltipProps;
 };
 export type FieldStepperProps = WithSupportProps<FieldStepperOwnProps & InputProps & WrapperProps>;
 export declare const FieldStepper: import("react").ForwardRefExoticComponent<{

package/dist/esm/components/FieldStepper/FieldStepper.js

@@ -41,7 +41,7 @@ const SymbolWidth = {
     l: 10,
 };
 export const FieldStepper = forwardRef((_a, ref) => {
-    var { id, name, value: valueProp, min = Number.NEGATIVE_INFINITY, max = Number.POSITIVE_INFINITY, step = 1, disabled = false, readonly = false, allowMoreThanLimits = true, onChange: onChangeProp, onFocus, onBlur, className, label, labelTooltip, labelTooltipPlacement, required = false, caption, hint, showHintIcon, size = SIZE.S, validationState = VALIDATION_STATE.Default, error, prefix, postfix, autoFocus } = _a, rest = __rest(_a, ["id", "name", "value", "min", "max", "step", "disabled", "readonly", "allowMoreThanLimits", "onChange", "onFocus", "onBlur", "className", "label", "labelTooltip", "labelTooltipPlacement", "required", "caption", "hint", "showHintIcon", "size", "validationState", "error", "prefix", "postfix", "autoFocus"]);
+    var { id, name, value: valueProp, min = Number.NEGATIVE_INFINITY, max = Number.POSITIVE_INFINITY, plusButtonTooltip, minusButtonTooltip, step = 1, disabled = false, readonly = false, allowMoreThanLimits = true, onChange: onChangeProp, onFocus, onBlur, className, label, labelTooltip, labelTooltipPlacement, required = false, caption, hint, showHintIcon, size = SIZE.S, validationState = VALIDATION_STATE.Default, error, prefix, postfix, autoFocus } = _a, rest = __rest(_a, ["id", "name", "value", "min", "max", "plusButtonTooltip", "minusButtonTooltip", "step", "disabled", "readonly", "allowMoreThanLimits", "onChange", "onFocus", "onBlur", "className", "label", "labelTooltip", "labelTooltipPlacement", "required", "caption", "hint", "showHintIcon", "size", "validationState", "error", "prefix", "postfix", "autoFocus"]);
     const { t } = useLocale('Fields');
     const [value = 0, setValue] = useValueControl({
         value: valueProp,
@@ -113,7 +113,7 @@ export const FieldStepper = forwardRef((_a, ref) => {
             return;
         }
     };
-    return (_jsx(FieldDecorator, Object.assign({ className: className, label: label, labelTooltip: labelTooltip, labelTooltipPlacement: labelTooltipPlacement, labelFor: id, required: required, caption: caption, hint: hint, disabled: disabled, readonly: readonly, showHintIcon: showHintIcon, size: size, validationState: fieldValidationState, error: error }, extractSupportProps(rest), { children: _jsx(Tooltip, { tip: tooltip, open: allowMoreThanLimits ? false : tooltipOpen, "data-test-id": 'field-stepper__limit-tooltip', triggerClassName: styles.trigger, children: _jsx(FieldContainerPrivate, { size: size, validationState: fieldValidationState, disabled: disabled, readonly: readonly, variant: CONTAINER_VARIANT.SingleLine, inputRef: inputRef, prefix: _jsx(ButtonFunction, { tabIndex: -1, size: 'xs', className: styles.button, icon: _jsx(MinusSVG, {}), onClick: handleMinusButtonClick, onKeyDown: handleMinusButtonKeyDown, disabled: isMinusButtonDisabled, "data-test-id": 'field-stepper__minus-button' }), postfix: _jsx(ButtonFunction, { tabIndex: -1, size: 'xs', className: styles.button, icon: _jsx(PlusSVG, {}), onClick: handlePlusButtonClick, onKeyDown: handlePlusButtonKeyDown, disabled: isPlusButtonDisabled, "data-test-id": 'field-stepper__plus-button' }), children: _jsxs("div", { className: styles.wrap, children: [_jsx("div", { className: cn({ [styles.prefixWrapper]: prefixSettings.show }), children: prefixSettings.show && prefixSettings.render({ key: prefixSettings.id }) }), _jsx("div", { style: {
+    return (_jsx(FieldDecorator, Object.assign({ className: className, label: label, labelTooltip: labelTooltip, labelTooltipPlacement: labelTooltipPlacement, labelFor: id, required: required, caption: caption, hint: hint, disabled: disabled, readonly: readonly, showHintIcon: showHintIcon, size: size, validationState: fieldValidationState, error: error }, extractSupportProps(rest), { children: _jsx(Tooltip, { tip: tooltip, open: allowMoreThanLimits ? false : tooltipOpen, "data-test-id": 'field-stepper__limit-tooltip', triggerClassName: styles.trigger, children: _jsx(FieldContainerPrivate, { size: size, validationState: fieldValidationState, disabled: disabled, readonly: readonly, variant: CONTAINER_VARIANT.SingleLine, inputRef: inputRef, prefix: _jsx(Tooltip, Object.assign({}, minusButtonTooltip, { open: minusButtonTooltip ? minusButtonTooltip === null || minusButtonTooltip === void 0 ? void 0 : minusButtonTooltip.open : false, tip: minusButtonTooltip === null || minusButtonTooltip === void 0 ? void 0 : minusButtonTooltip.tip, "data-test-id": 'field-stepper__minus-button-tooltip', children: _jsx(ButtonFunction, { tabIndex: -1, size: 'xs', className: styles.button, icon: _jsx(MinusSVG, {}), onClick: handleMinusButtonClick, onKeyDown: handleMinusButtonKeyDown, disabled: isMinusButtonDisabled, "data-test-id": 'field-stepper__minus-button' }) })), postfix: _jsx(Tooltip, Object.assign({}, plusButtonTooltip, { open: plusButtonTooltip ? plusButtonTooltip === null || plusButtonTooltip === void 0 ? void 0 : plusButtonTooltip.open : false, tip: plusButtonTooltip === null || plusButtonTooltip === void 0 ? void 0 : plusButtonTooltip.tip, "data-test-id": 'field-stepper__plus-button-tooltip', children: _jsx(ButtonFunction, { tabIndex: -1, size: 'xs', className: styles.button, icon: _jsx(PlusSVG, {}), onClick: handlePlusButtonClick, onKeyDown: handlePlusButtonKeyDown, disabled: isPlusButtonDisabled, "data-test-id": 'field-stepper__plus-button' }) })), children: _jsxs("div", { className: styles.wrap, children: [_jsx("div", { className: cn({ [styles.prefixWrapper]: prefixSettings.show }), children: prefixSettings.show && prefixSettings.render({ key: prefixSettings.id }) }), _jsx("div", { style: {
                                 width: String(value).length * SymbolWidth[size],
                                 maxWidth: '100%',
                             }, children: _jsx(InputPrivate, { ref: mergeRefs(ref, inputRef), className: styles.stepper, "data-size": size, value: String(value), tabIndex: 0, onKeyDown: handleInputKeyDown, onChange: handleInputChange, onBlur: handleInputBlur, onFocus: handleInputFocus, disabled: disabled, readonly: readonly, type: 'number', id: id, step: step, name: name, min: min, max: max, autoFocus: autoFocus, "data-test-id": 'field-stepper__input' }) }), _jsx("div", { className: cn({ [styles.postfixWrapper]: postfixSettings.show }), children: postfixSettings.show && postfixSettings.render({ key: postfixSettings.id }) })] }) }) }) })));

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Fields",
-  "version": "0.49.3",
+  "version": "0.50.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -65,5 +65,5 @@
   "peerDependencies": {
     "@snack-uikit/locale": "*"
   },
-  "gitHead": "881a16cd10831b0effaacb06c506521c8705d9ca"
+  "gitHead": "a49dc66a4046d4122721a9a7e22ec059a08c0099"
 }

package/src/components/FieldStepper/FieldStepper.tsx

@@ -16,7 +16,7 @@ import { ButtonFunction } from '@snack-uikit/button';
 import { MinusSVG, PlusSVG } from '@snack-uikit/icons';
 import { InputPrivate, InputPrivateProps, SIZE } from '@snack-uikit/input-private';
 import { useLocale } from '@snack-uikit/locale';
-import { Tooltip } from '@snack-uikit/tooltip';
+import { Tooltip, TooltipProps } from '@snack-uikit/tooltip';
 import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
 
 import { CONTAINER_VARIANT, VALIDATION_STATE } from '../../constants';
@@ -59,6 +59,10 @@ type FieldStepperOwnProps = {
   prefix?: ReactNode;
   /** Произвольный постфикс для поля */
   postfix?: ReactNode;
+  /** Тултип над кнопкой увеличения значения */
+  plusButtonTooltip?: TooltipProps;
+  /** Тултип над кнопкой уменьшения значения */
+  minusButtonTooltip?: TooltipProps;
 };
 
 export type FieldStepperProps = WithSupportProps<FieldStepperOwnProps & InputProps & WrapperProps>;
@@ -91,6 +95,8 @@ export const FieldStepper = forwardRef<HTMLInputElement, FieldStepperProps>(
       value: valueProp,
       min = Number.NEGATIVE_INFINITY,
       max = Number.POSITIVE_INFINITY,
+      plusButtonTooltip,
+      minusButtonTooltip,
       step = 1,
       disabled = false,
       readonly = false,
@@ -240,28 +246,42 @@ export const FieldStepper = forwardRef<HTMLInputElement, FieldStepperProps>(
             variant={CONTAINER_VARIANT.SingleLine}
             inputRef={inputRef}
             prefix={
-              <ButtonFunction
-                tabIndex={-1}
-                size='xs'
-                className={styles.button}
-                icon={<MinusSVG />}
-                onClick={handleMinusButtonClick}
-                onKeyDown={handleMinusButtonKeyDown}
-                disabled={isMinusButtonDisabled}
-                data-test-id='field-stepper__minus-button'
-              />
+              <Tooltip
+                {...minusButtonTooltip}
+                open={minusButtonTooltip ? minusButtonTooltip?.open : false}
+                tip={minusButtonTooltip?.tip}
+                data-test-id='field-stepper__minus-button-tooltip'
+              >
+                <ButtonFunction
+                  tabIndex={-1}
+                  size='xs'
+                  className={styles.button}
+                  icon={<MinusSVG />}
+                  onClick={handleMinusButtonClick}
+                  onKeyDown={handleMinusButtonKeyDown}
+                  disabled={isMinusButtonDisabled}
+                  data-test-id='field-stepper__minus-button'
+                />
+              </Tooltip>
             }
             postfix={
-              <ButtonFunction
-                tabIndex={-1}
-                size='xs'
-                className={styles.button}
-                icon={<PlusSVG />}
-                onClick={handlePlusButtonClick}
-                onKeyDown={handlePlusButtonKeyDown}
-                disabled={isPlusButtonDisabled}
-                data-test-id='field-stepper__plus-button'
-              />
+              <Tooltip
+                {...plusButtonTooltip}
+                open={plusButtonTooltip ? plusButtonTooltip?.open : false}
+                tip={plusButtonTooltip?.tip}
+                data-test-id='field-stepper__plus-button-tooltip'
+              >
+                <ButtonFunction
+                  tabIndex={-1}
+                  size='xs'
+                  className={styles.button}
+                  icon={<PlusSVG />}
+                  onClick={handlePlusButtonClick}
+                  onKeyDown={handlePlusButtonKeyDown}
+                  disabled={isPlusButtonDisabled}
+                  data-test-id='field-stepper__plus-button'
+                />
+              </Tooltip>
             }
           >
             <div className={styles.wrap}>