core-ds · dHIM24 · Dec 25, 2025
@@ -0,0 +1,8 @@
+---
+'@alfalab/core-components-with-suffix': minor
+'@alfalab/core-components': minor
+---
+
+##### withSuffix
+
+- Обобщена типизация `withSuffix` для принятия как `Input`, так и `NumberInput` компонентов
@@ -311,7 +311,7 @@ export const AmountInput = forwardRef<HTMLInputElement, AmountInputProps>(
             onKeyDown?.(event);
         };
 
-        const handleFocus: withSuffixProps['onFocus'] = (e) => {
+        const handleFocus: withSuffixProps<InputProps>['onFocus'] = (e) => {
             setIsFocused(true);
 
             onFocus?.(e);

@@ -11,6 +11,7 @@
     "module": "./esm/index.js",
     "dependencies": {
         "@alfalab/core-components-input": "^16.0.3",
+        "@alfalab/core-components-number-input": "^3.0.4",
         "@alfalab/core-components-portal": "^4.0.2",
         "classnames": "^2.5.1",
         "react-merge-refs": "^1.1.0",

@@ -1,11 +1,13 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import { Input } from '@alfalab/core-components-input';
+import { NumberInput } from '@alfalab/core-components-number-input';
 
 import userEvent from '@testing-library/user-event';
 import { withSuffix } from './index';
 
 const SuffixInput = withSuffix(Input);
+const NumberSuffixInput = withSuffix(NumberInput);
 
 describe('withSuffix', () => {
     Object.defineProperty(window, 'matchMedia', {
@@ -71,4 +73,23 @@ describe('withSuffix', () => {
 
         expect(unmount).not.toThrow();
     });
+
+    describe('NumberInput', () => {
+        it('should render suffix with NumberInput', async () => {
+            const suffix = ' мес';
+            const { container } = render(<NumberSuffixInput value={12} suffix={suffix} />);
+
+            await new Promise((resolve) => requestAnimationFrame(resolve));
+
+            expect(container.querySelector('.suffixVisible')).toBeInTheDocument();
+        });
+
+        it('should forward ref to html input with NumberInput', () => {
+            const inputRef = jest.fn();
+            const dataTestId = 'number-test-id';
+            render(<NumberSuffixInput ref={inputRef} dataTestId={dataTestId} />);
+
+            expect(inputRef.mock.calls[0][0].tagName).toBe('INPUT');
+        });
+    });
 });
@@ -1,4 +1,5 @@
 import React, {
+    type ChangeEvent,
     type FC,
     forwardRef,
     Fragment,
@@ -11,12 +12,16 @@ import mergeRefs from 'react-merge-refs';
 import cn from 'classnames';
 
 import { type InputProps } from '@alfalab/core-components-input';
+import { type NumberInputProps } from '@alfalab/core-components-number-input';
 import { Portal } from '@alfalab/core-components-portal';
 
 import styles from './index.module.css';
 
-// eslint-disable-next-line @typescript-eslint/naming-convention
-export type withSuffixProps = InputProps & {
+type InputRef = RefAttributes<HTMLInputElement>;
+
+type BaseInputProps = InputProps | NumberInputProps;
+
+type SuffixExtraProps = {
     /**
      * Дополнительный закрепленный текст справа от основного значения.
      * Например: value='85' suffix=' мес' -> 85 мес
@@ -29,8 +34,11 @@ export type withSuffixProps = InputProps & {
     suffixContainerClassName?: string;
 };
 
-export const withSuffix = (Input: FC<InputProps & RefAttributes<HTMLInputElement>>) =>
-    forwardRef<HTMLInputElement, withSuffixProps>(
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export type withSuffixProps<P extends BaseInputProps> = P & SuffixExtraProps;
+
+export const withSuffix = <P extends BaseInputProps>(Input: FC<P & InputRef>) =>
+    forwardRef<HTMLInputElement, withSuffixProps<P>>(
         (
             {
                 value,
@@ -53,11 +61,12 @@ export const withSuffix = (Input: FC<InputProps & RefAttributes<HTMLInputElement
 
             const [stateValue, setStateValue] = useState(defaultValue || '');
 
-            const handleInputChange = useCallback<Required<InputProps>['onChange']>(
-                (event, payload) => {
-                    if (onChange) {
-                        onChange(event, payload);
-                    }
+            const handleInputChange = useCallback(
+                (
+                    event: ChangeEvent<HTMLInputElement>,
+                    payload: { value: string } & { value: number | null },
+                ) => {
+                    onChange?.(event, payload);
 
                     if (uncontrolled) {
                         setStateValue(payload.value);
@@ -66,15 +75,13 @@ export const withSuffix = (Input: FC<InputProps & RefAttributes<HTMLInputElement
                 [onChange, uncontrolled],
             );
 
-            const handleClear = useCallback<Required<InputProps>['onClear']>(
+            const handleClear = useCallback<Required<BaseInputProps>['onClear']>(
                 (event) => {
                     if (uncontrolled) {
                         setStateValue('');
                     }
 
-                    if (onClear) {
-                        onClear(event);
-                    }
+                    onClear?.(event);
                 },
                 [onClear, uncontrolled],
             );
@@ -89,22 +96,24 @@ export const withSuffix = (Input: FC<InputProps & RefAttributes<HTMLInputElement
 
             const isInverted = restProps.colors === 'inverted';
 
+            const inputProps = {
+                ref: mergeRefs([ref, setInputNode]),
+                value: visibleValue,
+                disabled,
+                readOnly,
+                onChange: handleInputChange,
+                onClear: handleClear,
+                placeholder,
+                className: cn(className, {
+                    [styles.suffixVisible]: Boolean(visibleValue),
+                    [styles.hasSuffix]: suffix,
+                }),
+                ...restProps,
+            } as unknown as P & InputRef;
+
             return (
                 <Fragment>
-                    <Input
-                        ref={mergeRefs([ref, setInputNode])}
-                        value={visibleValue}
-                        disabled={disabled}
-                        readOnly={readOnly}
-                        onChange={handleInputChange}
-                        onClear={handleClear}
-                        placeholder={placeholder}
-                        className={cn(className, {
-                            [styles.suffixVisible]: Boolean(visibleValue),
-                            [styles.hasSuffix]: suffix,
-                        })}
-                        {...restProps}
-                    />
+                    <Input {...inputProps} />
                     <Portal getPortalContainer={getPortalContainer}>
                         <div
                             translate='no'

@@ -9,6 +9,8 @@
         "paths": {
             "@alfalab/core-components-input": ["../input/src"],
             "@alfalab/core-components-input/*": ["../input/src/*"],
+            "@alfalab/core-components-number-input": ["../number-input/src"],
+            "@alfalab/core-components-number-input/*": ["../number-input/src/*"],
             "@alfalab/core-components-portal": ["../portal/src"],
             "@alfalab/core-components-portal/*": ["../portal/src/*"],
             "@alfalab/core-components-with-suffix": ["./src"],
@@ -17,6 +19,7 @@
     },
     "references": [
         { "path": "../input/tsconfig.build.json" },
+        { "path": "../number-input/tsconfig.build.json" },
         { "path": "../portal/tsconfig.build.json" }
     ]
 }
@@ -8,6 +8,8 @@
         "paths": {
             "@alfalab/core-components-input": ["../input/src"],
             "@alfalab/core-components-input/*": ["../input/src/*"],
+            "@alfalab/core-components-number-input": ["../number-input/src"],
+            "@alfalab/core-components-number-input/*": ["../number-input/src/*"],
             "@alfalab/core-components-portal": ["../portal/src"],
             "@alfalab/core-components-portal/*": ["../portal/src/*"],
             "@alfalab/core-components-screenshot-utils": ["../screenshot-utils/src"],
@@ -20,6 +22,7 @@
     },
     "references": [
         { "path": "../input/tsconfig.build.json" },
+        { "path": "../number-input/tsconfig.build.json" },
         { "path": "../portal/tsconfig.build.json" },
         { "path": "../screenshot-utils/tsconfig.build.json" },
         { "path": "../test-utils/tsconfig.build.json" }