@snack-uikit/fields 0.33.1-preview-7bafd457.0 → 0.34.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.34.0 (2024-11-18)
+
+
+### Features
+
+* **LK-4944:** added onClickCopy props for copyButton in Fields ([03a5182](https://github.com/cloud-ru-tech/snack-uikit/commit/03a5182cd7c57211aae0e4e9d507eea4c61d9040))
+
+
+
+
+
 # 0.33.0 (2024-11-14)
 
 

package/README.md

@@ -198,6 +198,7 @@ FieldStepper в основном предназначен для работы с
 | open | `boolean` | - | Открыт color-picker |
 | onOpenChange | `(value: boolean) => void` | - | Колбек открытия пикера |
 | showCopyButton | `boolean` | - | Отображение кнопки копирования |
+| onCopyButtonClick | `() => void` | - | Колбек клика по кнопке Копировать для поля |
 | showClearButton | `boolean` | true | Отображение кнопки Очистки поля |
 | value | `string` | - | Значение input |
 | onChange | `(value: string) => void` | - |  |
@@ -234,6 +235,7 @@ FieldStepper в основном предназначен для работы с
 | value | `Date` | - | Значение поля |
 | onChange | `(value: Date) => void` | - | Колбек смены значения |
 | showCopyButton | `boolean` | - | Отображение кнопки копирования |
+| onCopyButtonClick | `() => void` | - | Колбек клика по кнопке Копировать для поля |
 | showClearButton | `boolean` | true | Отображение кнопки Очистки поля |
 | buildCellProps | `(date: Date, viewMode: ViewMode) => { isDisabled?: boolean; isHoliday?: boolean } ;` | - | Колбек установки свойств ячеек календаря. Вызывается на построение каждой ячейки. Принимает два параметра: <br> `Date` - дата ячейки <br> `ViewMode`: <br>  - `month` отображение месяца, каждая ячейка - 1 день <br>  - `year` отображение года, каждая ячейка - 1 месяц <br>  - `decade` отображение декады, каждая ячейка - 1 год <br><br> Колбек должен возвращать объект с полями, отвечающими за отключение и подкраску ячейки. |
 | id | `string` | - | Значение html-атрибута id |
@@ -283,6 +285,7 @@ FieldStepper в основном предназначен для работы с
 | hidden | `boolean` | - | Замаскированно ли значение поля |
 | onHiddenChange | `(value: boolean) => void` | - | Колбек смены маскирования |
 | showCopyButton | `boolean` | - | Отображение кнопки копирования |
+| onCopyButtonClick | `() => void` | - | Колбек клика по кнопке Копировать для поля |
 | allowMoreThanMaxLength | `boolean` | - | Можно ли вводить больше разрешённого кол-ва символов |
 | prefixIcon | `ReactElement<any, string \| JSXElementConstructor<any>>` | - | Иконка-префикс для поля |
 | asyncValueGetter | `() => Promise<string>` | - | Свойство позволяет грузить данные в поле по требованию |
@@ -344,6 +347,7 @@ FieldStepper в основном предназначен для работы с
 | showClearButton | `boolean` | true | Отображение кнопки очистки поля |
 | open | `boolean` | - |  |
 | onOpenChange | `(open: boolean) => void` | - |  |
+| onCopyButtonClick | `() => void` | - | Колбек клика по кнопке Копировать для поля |
 | prefixIcon | `ReactElement<any, string \| JSXElementConstructor<any>>` | - | Иконка-префикс для поля |
 | widthStrategy | enum PopoverWidthStrategy: `"auto"`, `"gte"`, `"eq"` | - |  |
 | pinTop | `OptionProps[]` | - |  |
@@ -438,6 +442,7 @@ FieldStepper в основном предназначен для работы с
 | name | type | default value | description |
 |------|------|---------------|-------------|
 | showCopyButton | `boolean` | - | Отображение кнопки Копировать для поля (актуально только для `readonly = true`) |
+| onCopyButtonClick | `() => void` | - | Колбек клика по кнопке Копировать для поля |
 | showClearButton | `boolean` | true | Отображение кнопки очистки поля |
 | allowMoreThanMaxLength | `boolean` | - | Можно ли вводить больше разрешённого кол-ва символов |
 | prefixIcon | `ReactElement<any, string \| JSXElementConstructor<any>>` | - | Иконка-префикс для поля |
@@ -477,6 +482,7 @@ FieldStepper в основном предназначен для работы с
 | resizable | `boolean` | - | Может ли ли пользователь изменять размеры поля (если св-во не включено, поле автоматически меняет свой размер) |
 | onChange | `(value: string, e?: ChangeEvent<HTMLTextAreaElement>) => void` | - | Колбек смены значения |
 | showCopyButton | `boolean` | - | Отображение кнопки Копировать для поля (актуально только для `readonly = true`) |
+| onCopyButtonClick | `() => void` | - | Колбек клика по кнопке Копировать для поля |
 | showClearButton | `boolean` | true | Отображение кнопки очистки поля |
 | allowMoreThanMaxLength | `boolean` | true | Можно ли вводить больше разрешённого кол-ва символов |
 | value | `string` | - | HTML-аттрибут value |
@@ -510,6 +516,7 @@ FieldStepper в основном предназначен для работы с
 | value | `TimeValue` | - | Значение поля |
 | onChange | `(value?: TimeValue) => void` | - | Колбек смены значения |
 | showCopyButton | `boolean` | - | Отображение кнопки копирования |
+| onCopyButtonClick | `() => void` | - | Колбек клика по кнопке Копировать для поля |
 | showSeconds | `boolean` | true | Показывать ли секунды |
 | showClearButton | `boolean` | true | Отображение кнопки Очистки поля |
 | id | `string` | - | Значение html-атрибута id |

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

@@ -11,6 +11,8 @@ type FieldDateOwnProps = {
     onOpenChange?(value: boolean): void;
     /** Отображение кнопки копирования */
     showCopyButton?: boolean;
+    /** Колбек клика по кнопке Копировать для поля */
+    onCopyButtonClick?(): void;
     /**
      * Отображение кнопки Очистки поля
      * @default true
@@ -29,6 +31,8 @@ export declare const FieldColor: import("react").ForwardRefExoticComponent<{
     onOpenChange?(value: boolean): void;
     /** Отображение кнопки копирования */
     showCopyButton?: boolean;
+    /** Колбек клика по кнопке Копировать для поля */
+    onCopyButtonClick?(): void;
     /**
      * Отображение кнопки Очистки поля
      * @default true

package/dist/cjs/components/FieldColor/FieldColor.js

@@ -58,9 +58,10 @@ exports.FieldColor = (0, react_1.forwardRef)((_a, ref) => {
       autoApply,
       placeholder,
       onFocus,
-      onBlur
+      onBlur,
+      onCopyButtonClick
     } = _a,
-    rest = __rest(_a, ["id", "name", "value", "disabled", "readonly", "showCopyButton", "showClearButton", "open", "onChange", "onOpenChange", "className", "label", "labelTooltip", "labelTooltipPlacement", "required", "caption", "hint", "showHintIcon", "size", "validationState", "error", "withAlpha", "autoApply", "placeholder", "onFocus", "onBlur"]);
+    rest = __rest(_a, ["id", "name", "value", "disabled", "readonly", "showCopyButton", "showClearButton", "open", "onChange", "onOpenChange", "className", "label", "labelTooltip", "labelTooltipPlacement", "required", "caption", "hint", "showHintIcon", "size", "validationState", "error", "withAlpha", "autoApply", "placeholder", "onFocus", "onBlur", "onCopyButtonClick"]);
   const [isOpen, setIsOpen] = (0, uncontrollable_1.useUncontrolledProp)(open, false, onOpenChange);
   const localRef = (0, react_1.useRef)(null);
   const showDropList = isOpen && !readonly && !disabled;
@@ -94,7 +95,8 @@ exports.FieldColor = (0, react_1.forwardRef)((_a, ref) => {
     copyButtonRef,
     showCopyButton,
     size,
-    valueToCopy: value
+    valueToCopy: value,
+    onCopyButtonClick
   });
   const {
     postfixButtons,

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

@@ -21,6 +21,8 @@ type FieldDateOwnProps = {
     onChange?(value: Date | undefined): void;
     /** Отображение кнопки копирования */
     showCopyButton?: boolean;
+    /** Колбек клика по кнопке Копировать для поля */
+    onCopyButtonClick?(): void;
     /**
      * Отображение кнопки Очистки поля
      * @default true

package/dist/cjs/components/FieldDate/FieldDate.js

@@ -59,9 +59,10 @@ exports.FieldDate = (0, react_1.forwardRef)((_a, ref) => {
       validationState = constants_1.VALIDATION_STATE.Default,
       buildCellProps,
       error,
-      mode
+      mode,
+      onCopyButtonClick
     } = _a,
-    rest = __rest(_a, ["id", "name", "value", "disabled", "readonly", "showCopyButton", "showClearButton", "open", "onOpenChange", "onChange", "onFocus", "onBlur", "className", "label", "labelTooltip", "labelTooltipPlacement", "required", "caption", "hint", "showHintIcon", "size", "validationState", "buildCellProps", "error", "mode"]);
+    rest = __rest(_a, ["id", "name", "value", "disabled", "readonly", "showCopyButton", "showClearButton", "open", "onOpenChange", "onChange", "onFocus", "onBlur", "className", "label", "labelTooltip", "labelTooltipPlacement", "required", "caption", "hint", "showHintIcon", "size", "validationState", "buildCellProps", "error", "mode", "onCopyButtonClick"]);
   const [isOpen, setIsOpen] = (0, uncontrollable_1.useUncontrolledProp)(open, false, onOpenChange);
   const localRef = (0, react_1.useRef)(null);
   const clearButtonRef = (0, react_1.useRef)(null);
@@ -125,7 +126,8 @@ exports.FieldDate = (0, react_1.forwardRef)((_a, ref) => {
     copyButtonRef,
     showCopyButton,
     size,
-    valueToCopy
+    valueToCopy,
+    onCopyButtonClick
   });
   const calendarIcon = (0, react_1.useMemo)(() => ({
     active: false,

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

@@ -11,6 +11,8 @@ type FieldSecureOwnProps = {
     onHiddenChange?(value: boolean): void;
     /** Отображение кнопки копирования */
     showCopyButton?: boolean;
+    /** Колбек клика по кнопке Копировать для поля */
+    onCopyButtonClick?(): void;
     /** Можно ли вводить больше разрешённого кол-ва символов */
     allowMoreThanMaxLength?: boolean;
     /** Иконка-префикс для поля */

package/dist/cjs/components/FieldSecure/FieldSecure.js

@@ -84,9 +84,10 @@ exports.FieldSecure = (0, react_1.forwardRef)((_a, ref) => {
       prefixIcon,
       error,
       asyncValueGetter,
-      autoComplete
+      autoComplete,
+      onCopyButtonClick
     } = _a,
-    rest = __rest(_a, ["id", "name", "value", "placeholder", "maxLength", "disabled", "readonly", "showCopyButton", "allowMoreThanMaxLength", "hidden", "onHiddenChange", "showHintIcon", "onChange", "onFocus", "onBlur", "className", "label", "labelTooltip", "labelTooltipPlacement", "required", "caption", "hint", "size", "validationState", "prefixIcon", "error", "asyncValueGetter", "autoComplete"]);
+    rest = __rest(_a, ["id", "name", "value", "placeholder", "maxLength", "disabled", "readonly", "showCopyButton", "allowMoreThanMaxLength", "hidden", "onHiddenChange", "showHintIcon", "onChange", "onFocus", "onBlur", "className", "label", "labelTooltip", "labelTooltipPlacement", "required", "caption", "hint", "size", "validationState", "prefixIcon", "error", "asyncValueGetter", "autoComplete", "onCopyButtonClick"]);
   const localRef = (0, react_1.useRef)(null);
   const copyButtonRef = (0, react_1.useRef)(null);
   const hideButtonRef = (0, react_1.useRef)(null);
@@ -154,7 +155,8 @@ exports.FieldSecure = (0, react_1.forwardRef)((_a, ref) => {
     size,
     valueToCopy: value,
     onValueRequest: getAsyncValue,
-    disabled: isLoading
+    disabled: isLoading,
+    onCopyButtonClick
   });
   const hideButtonSettings = (0, hooks_1.useHideButton)({
     hideButtonRef,

package/dist/cjs/components/FieldSelect/FieldSelectMultiple.d.ts

@@ -14,6 +14,7 @@ export declare const FieldSelectMultiple: import("react").ForwardRefExoticCompon
     pinBottom?: import("./types").OptionProps[];
     searchable?: boolean;
     showCopyButton?: boolean;
+    onCopyButtonClick?(): void;
     showClearButton?: boolean;
     readonly?: boolean;
     prefixIcon?: import("react").ReactElement;
@@ -27,4 +28,4 @@ export declare const FieldSelectMultiple: import("react").ForwardRefExoticCompon
     resetSearchOnOptionSelection?: boolean;
     onOpenChange?(open: boolean): void;
     selectedOptionFormatter?: SelectedOptionFormatter;
-} & Pick<import("@snack-uikit/list").DroplistProps, "scrollToSelectedItem" | "untouchableScrollbars" | "dataFiltered" | "dataError" | "noDataState" | "noResultsState" | "errorDataState">, "showCopyButton"> & import("react").RefAttributes<HTMLInputElement>>;
+} & Pick<import("@snack-uikit/list").DroplistProps, "scrollToSelectedItem" | "untouchableScrollbars" | "dataFiltered" | "dataError" | "noDataState" | "noResultsState" | "errorDataState">, "showCopyButton" | "onCopyButtonClick"> & import("react").RefAttributes<HTMLInputElement>>;

package/dist/cjs/components/FieldSelect/FieldSelectSingle.d.ts

@@ -12,6 +12,7 @@ export declare const FieldSelectSingle: import("react").ForwardRefExoticComponen
     pinBottom?: import("./types").OptionProps[];
     searchable?: boolean;
     showCopyButton?: boolean;
+    onCopyButtonClick?(): void;
     showClearButton?: boolean;
     readonly?: boolean;
     prefixIcon?: import("react").ReactElement;

package/dist/cjs/components/FieldSelect/FieldSelectSingle.js

@@ -64,9 +64,10 @@ exports.FieldSelectSingle = (0, react_1.forwardRef)((props, ref) => {
       open: openProp,
       onOpenChange,
       selectedOptionFormatter = defaultSelectedOptionFormatter,
-      enableFuzzySearch = true
+      enableFuzzySearch = true,
+      onCopyButtonClick
     } = props,
-    rest = __rest(props, ["id", "name", "placeholder", "size", "options", "value", "defaultValue", "onChange", "disabled", "readonly", "searchable", "showCopyButton", "showClearButton", "onKeyDown", "required", "validationState", "search", "autocomplete", "prefixIcon", "prefix", "postfix", "addOptionByEnter", "untouchableScrollbars", "open", "onOpenChange", "selectedOptionFormatter", "enableFuzzySearch"]);
+    rest = __rest(props, ["id", "name", "placeholder", "size", "options", "value", "defaultValue", "onChange", "disabled", "readonly", "searchable", "showCopyButton", "showClearButton", "onKeyDown", "required", "validationState", "search", "autocomplete", "prefixIcon", "prefix", "postfix", "addOptionByEnter", "untouchableScrollbars", "open", "onOpenChange", "selectedOptionFormatter", "enableFuzzySearch", "onCopyButtonClick"]);
   const localRef = (0, react_1.useRef)(null);
   const [open = false, setOpen] = (0, hooks_1.useValueControl)({
     value: openProp,
@@ -153,6 +154,7 @@ exports.FieldSelectSingle = (0, react_1.forwardRef)((props, ref) => {
     showCopyButton,
     inputRef: localRef,
     onClear,
+    onCopyButtonClick,
     valueToCopy: selectedOptionFormatter(selectedItem)
   });
   const handleBlur = e => {

package/dist/cjs/components/FieldSelect/hooks.d.ts

@@ -14,10 +14,11 @@ type UseButtonsProps = {
     showCopyButton: boolean;
     size: 's' | 'm' | 'l';
     onClear(): void;
+    onCopyButtonClick?(): void;
     inputRef: RefObject<HTMLInputElement>;
     valueToCopy?: string;
 };
-export declare function useButtons({ readonly, showClearButton, showCopyButton, size, onClear, inputRef, valueToCopy, }: UseButtonsProps): {
+export declare function useButtons({ readonly, showClearButton, showCopyButton, size, onClear, onCopyButtonClick, inputRef, valueToCopy, }: UseButtonsProps): {
     postfixButtons: import("react/jsx-runtime").JSX.Element | undefined;
     inputKeyDownNavigationHandler: KeyboardEventHandler<HTMLInputElement>;
     buttonsRefs: (Element | null)[];

package/dist/cjs/components/FieldSelect/hooks.js

@@ -52,6 +52,7 @@ function useButtons(_ref2) {
     showCopyButton,
     size,
     onClear,
+    onCopyButtonClick,
     inputRef,
     valueToCopy = ''
   } = _ref2;
@@ -68,7 +69,8 @@ function useButtons(_ref2) {
     copyButtonRef,
     showCopyButton: readonly && showCopyButton,
     size,
-    valueToCopy
+    valueToCopy,
+    onCopyButtonClick
   });
   const {
     onInputKeyDown: inputKeyDownNavigationHandler,

package/dist/cjs/components/FieldSelect/types.d.ts

@@ -46,6 +46,8 @@ type FiledSelectCommonProps = WithSupportProps<{
     searchable?: boolean;
     /** Отображение кнопки Копировать для поля (актуально только для `readonly = true`) */
     showCopyButton?: boolean;
+    /** Колбек клика по кнопке Копировать для поля */
+    onCopyButtonClick?(): void;
     /**
      * Отображение кнопки очистки поля
      * @default true
@@ -74,7 +76,7 @@ type FiledSelectCommonProps = WithSupportProps<{
 export type FieldSelectSingleProps = FieldSelectPrivateProps & Omit<SelectionSingleState, 'mode'> & WrapperProps & Omit<FiledSelectCommonProps, 'resetSearchOnOptionSelection'>;
 export type FieldSelectMultipleProps = FieldSelectPrivateProps & {
     removeByBackspace?: boolean;
-} & Omit<SelectionMultipleState, 'mode'> & Omit<FiledSelectCommonProps, 'showCopyButton'>;
+} & Omit<SelectionMultipleState, 'mode'> & Omit<FiledSelectCommonProps, 'showCopyButton' | 'onCopyButtonClick'>;
 export type FieldSelectProps = (FieldSelectSingleProps & {
     selection?: 'single';
 }) | (FieldSelectMultipleProps & {

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

@@ -42,11 +42,6 @@ const getDefaultValue = (min, max) => {
   }
   return 0;
 };
-const SymbolWidth = {
-  s: 8,
-  m: 9,
-  l: 10
-};
 exports.FieldStepper = (0, react_1.forwardRef)((_a, ref) => {
   var {
       id,
@@ -88,8 +83,8 @@ exports.FieldStepper = (0, react_1.forwardRef)((_a, ref) => {
   const [tooltip, setTooltip] = (0, react_1.useState)('');
   const timerRef = (0, react_1.useRef)();
   const inputRef = (0, react_1.useRef)(null);
-  // const minusButtonRef = useRef<HTMLButtonElement>(null);
-  // const plusButtonRef = useRef<HTMLButtonElement>(null);
+  const minusButtonRef = (0, react_1.useRef)(null);
+  const plusButtonRef = (0, react_1.useRef)(null);
   const isMinusButtonDisabled = typeof min === 'number' && value <= min || readonly || disabled;
   const isPlusButtonDisabled = typeof max === 'number' && value >= max || readonly || disabled;
   const prefixSettings = (0, hooks_1.usePrefix)({
@@ -135,16 +130,17 @@ exports.FieldStepper = (0, react_1.forwardRef)((_a, ref) => {
     onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
   };
   const handleInputChange = (value, event) => setValue(Number(value), event);
-  const handleInputKeyDown = () => {
+  const handleInputKeyDown = event => {
+    var _a, _b;
     if (readonly || disabled) {
       return;
     }
-    // if (event.key === 'ArrowRight' && !isPlusButtonDisabled) {
-    //   plusButtonRef.current?.focus();
-    // }
-    // if (event.key === 'ArrowLeft' && !isMinusButtonDisabled) {
-    //   minusButtonRef.current?.focus();
-    // }
+    if (event.key === 'ArrowRight' && !isPlusButtonDisabled) {
+      (_a = plusButtonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    if (event.key === 'ArrowLeft' && !isMinusButtonDisabled) {
+      (_b = minusButtonRef.current) === null || _b === void 0 ? void 0 : _b.focus();
+    }
   };
   const handleMinusButtonClick = e => {
     e.preventDefault();
@@ -156,23 +152,25 @@ exports.FieldStepper = (0, react_1.forwardRef)((_a, ref) => {
     e.stopPropagation();
     setValue(Math.max(Math.min(max, value + step), min));
   };
-  const handleMinusButtonKeyDown = () => {
+  const handleMinusButtonKeyDown = event => {
+    var _a;
     if (readonly || disabled) {
       return;
     }
-    // if (event.key === 'ArrowRight') {
-    //   event.preventDefault();
-    //   inputRef.current?.focus();
-    // }
+    if (event.key === 'ArrowRight') {
+      event.preventDefault();
+      (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }
   };
-  const handlePlusButtonKeyDown = () => {
+  const handlePlusButtonKeyDown = event => {
+    var _a;
     if (readonly || disabled) {
       return;
     }
-    // if (event.key === 'ArrowLeft') {
-    //   event.preventDefault();
-    //   inputRef.current?.focus();
-    // }
+    if (event.key === 'ArrowLeft') {
+      event.preventDefault();
+      (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }
   };
   return (0, jsx_runtime_1.jsx)(FieldDecorator_1.FieldDecorator, Object.assign({
     className: className,
@@ -194,7 +192,6 @@ exports.FieldStepper = (0, react_1.forwardRef)((_a, ref) => {
       tip: tooltip,
       open: allowMoreThanLimits ? false : tooltipOpen,
       "data-test-id": 'field-stepper__limit-tooltip',
-      triggerClassName: styles_module_scss_1.default.trigger,
       children: (0, jsx_runtime_1.jsx)(helperComponents_1.FieldContainerPrivate, {
         size: size,
         validationState: fieldValidationState,
@@ -202,63 +199,54 @@ 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.jsxs)(jsx_runtime_1.Fragment, {
+          children: [(0, jsx_runtime_1.jsx)(button_1.ButtonFunction, {
+            tabIndex: -1,
+            ref: minusButtonRef,
+            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'
+          }), prefixSettings.show && prefixSettings.render({
+            key: prefixSettings.id
+          })]
         }),
-        children: (0, jsx_runtime_1.jsxs)("div", {
-          className: styles_module_scss_1.default.wrap,
-          children: [(0, jsx_runtime_1.jsx)("div", {
-            children: prefixSettings.show && prefixSettings.render({
-              key: prefixSettings.id
-            })
-          }), (0, jsx_runtime_1.jsx)("div", {
-            style: {
-              width: String(value).length * SymbolWidth[size],
-              maxWidth: '100%',
-              minWidth: SymbolWidth[size] * 2
-            },
-            children: (0, jsx_runtime_1.jsx)(input_private_1.InputPrivate, {
-              ref: (0, merge_refs_1.default)(ref, inputRef),
-              className: styles_module_scss_1.default.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,
-              "data-test-id": 'field-stepper__input'
-            })
-          }), (0, jsx_runtime_1.jsx)("div", {
-            children: postfixSettings.show && postfixSettings.render({
-              key: postfixSettings.id
-            })
+        postfix: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, {
+          children: [postfixSettings.show && postfixSettings.render({
+            key: postfixSettings.id
+          }), (0, jsx_runtime_1.jsx)(button_1.ButtonFunction, {
+            ref: plusButtonRef,
+            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.jsx)(input_private_1.InputPrivate, {
+          ref: (0, merge_refs_1.default)(ref, inputRef),
+          className: styles_module_scss_1.default.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,
+          name: name,
+          min: min,
+          max: max,
+          "data-test-id": 'field-stepper__input'
         })
       })
     })

package/dist/cjs/components/FieldStepper/styles.module.css

@@ -7,16 +7,4 @@
 }
 .button[data-disabled] *{
   cursor:not-allowed;
-}
-
-.trigger{
-  min-width:auto;
-}
-
-.wrap{
-  overflow:hidden;
-  display:flex;
-  gap:4px;
-  justify-content:center;
-  max-width:100%;
 }

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

@@ -8,6 +8,8 @@ type WrapperProps = Pick<FieldDecoratorProps, 'className' | 'label' | 'labelTool
 type FieldTextOwnProps = {
     /** Отображение кнопки Копировать для поля (актуально только для `readonly = true`) */
     showCopyButton?: boolean;
+    /** Колбек клика по кнопке Копировать для поля */
+    onCopyButtonClick?(): void;
     /**
      * Отображение кнопки очистки поля
      * @default true

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

@@ -43,6 +43,7 @@ exports.FieldText = (0, react_1.forwardRef)((_a, ref) => {
       onChange: onChangeProp,
       onFocus,
       onBlur,
+      onCopyButtonClick,
       className,
       label,
       labelTooltip,
@@ -60,7 +61,7 @@ exports.FieldText = (0, react_1.forwardRef)((_a, ref) => {
       postfix,
       button: buttonProp
     } = _a,
-    rest = __rest(_a, ["id", "name", "value", "placeholder", "maxLength", "disabled", "readonly", "showCopyButton", "showClearButton", "allowMoreThanMaxLength", "onChange", "onFocus", "onBlur", "className", "label", "labelTooltip", "labelTooltipPlacement", "required", "caption", "hint", "showHintIcon", "size", "validationState", "error", "autoComplete", "prefixIcon", "prefix", "postfix", "button"]);
+    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"]);
   const [value = '', onChange] = (0, hooks_1.useValueControl)({
     value: valueProp,
     defaultValue: '',
@@ -110,7 +111,8 @@ exports.FieldText = (0, react_1.forwardRef)((_a, ref) => {
     size,
     valueToCopy: value,
     prefix: typeof prefix === 'string' ? prefix : undefined,
-    postfix: typeof postfix === 'string' ? postfix : undefined
+    postfix: typeof postfix === 'string' ? postfix : undefined,
+    onCopyButtonClick
   });
   const [isButtonFocused, setIsButtonFocused] = (0, react_1.useState)(false);
   const onButtonFocus = (0, react_1.useCallback)(() => setIsButtonFocused(true), []);

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

@@ -15,6 +15,8 @@ type FieldTextAreaOwnProps = {
     onChange?(value: string, e?: ChangeEvent<HTMLTextAreaElement>): void;
     /** Отображение кнопки Копировать для поля (актуально только для `readonly = true`) */
     showCopyButton?: boolean;
+    /** Колбек клика по кнопке Копировать для поля */
+    onCopyButtonClick?(): void;
     /**
      * Отображение кнопки очистки поля
      * @default true

package/dist/cjs/components/FieldTextArea/FieldTextArea.js

@@ -57,9 +57,10 @@ exports.FieldTextArea = (0, react_1.forwardRef)((_a, ref) => {
       hint,
       error,
       size = input_private_1.SIZE.S,
-      validationState = constants_1.VALIDATION_STATE.Default
+      validationState = constants_1.VALIDATION_STATE.Default,
+      onCopyButtonClick
     } = _a,
-    rest = __rest(_a, ["id", "name", "value", "placeholder", "maxLength", "minRows", "maxRows", "disabled", "resizable", "readonly", "showCopyButton", "showClearButton", "allowMoreThanMaxLength", "showHintIcon", "onChange", "onFocus", "onBlur", "className", "label", "labelTooltip", "labelTooltipPlacement", "required", "caption", "hint", "error", "size", "validationState"]);
+    rest = __rest(_a, ["id", "name", "value", "placeholder", "maxLength", "minRows", "maxRows", "disabled", "resizable", "readonly", "showCopyButton", "showClearButton", "allowMoreThanMaxLength", "showHintIcon", "onChange", "onFocus", "onBlur", "className", "label", "labelTooltip", "labelTooltipPlacement", "required", "caption", "hint", "error", "size", "validationState", "onCopyButtonClick"]);
   const localRef = (0, react_1.useRef)(null);
   const clearButtonRef = (0, react_1.useRef)(null);
   const copyButtonRef = (0, react_1.useRef)(null);
@@ -92,7 +93,8 @@ exports.FieldTextArea = (0, react_1.forwardRef)((_a, ref) => {
     copyButtonRef,
     showCopyButton,
     size,
-    valueToCopy: value
+    valueToCopy: value,
+    onCopyButtonClick
   });
   const {
     postfixButtons,

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

@@ -15,6 +15,8 @@ type FieldTimeOwnProps = {
     onChange?: TimePickerProps['onChangeValue'];
     /** Отображение кнопки копирования */
     showCopyButton?: boolean;
+    /** Колбек клика по кнопке Копировать для поля */
+    onCopyButtonClick?(): void;
     /** Показывать ли секунды */
     showSeconds?: boolean;
     /**

package/dist/cjs/components/FieldTime/FieldTime.js

@@ -76,9 +76,10 @@ exports.FieldTime = (0, react_1.forwardRef)((_a, ref) => {
       showSeconds = true,
       size = input_private_1.SIZE.S,
       validationState = constants_1.VALIDATION_STATE.Default,
-      error
+      error,
+      onCopyButtonClick
     } = _a,
-    rest = __rest(_a, ["id", "name", "value", "disabled", "readonly", "showCopyButton", "showClearButton", "open", "onOpenChange", "onChange", "onFocus", "onBlur", "className", "label", "labelTooltip", "labelTooltipPlacement", "required", "caption", "hint", "showHintIcon", "showSeconds", "size", "validationState", "error"]);
+    rest = __rest(_a, ["id", "name", "value", "disabled", "readonly", "showCopyButton", "showClearButton", "open", "onOpenChange", "onChange", "onFocus", "onBlur", "className", "label", "labelTooltip", "labelTooltipPlacement", "required", "caption", "hint", "showHintIcon", "showSeconds", "size", "validationState", "error", "onCopyButtonClick"]);
   const [isOpen, setIsOpen] = (0, uncontrollable_1.useUncontrolledProp)(open, false, onOpenChange);
   const localRef = (0, react_1.useRef)(null);
   const clearButtonRef = (0, react_1.useRef)(null);
@@ -130,7 +131,8 @@ exports.FieldTime = (0, react_1.forwardRef)((_a, ref) => {
     copyButtonRef,
     showCopyButton,
     size,
-    valueToCopy
+    valueToCopy,
+    onCopyButtonClick
   });
   const calendarIcon = (0, react_1.useMemo)(() => ({
     active: false,

package/dist/cjs/hooks/useCopyButton.d.ts

@@ -7,9 +7,10 @@ type UseCopyButtonProps = {
     valueToCopy: string;
     size: Size;
     onValueRequest?(): AsyncValueRequest;
+    onCopyButtonClick?(): void;
     disabled?: boolean;
     prefix?: string;
     postfix?: string;
 };
-export declare function useCopyButton({ copyButtonRef, showCopyButton, size, valueToCopy, onValueRequest, disabled, prefix, postfix, }: UseCopyButtonProps): ButtonProps;
+export declare function useCopyButton({ copyButtonRef, showCopyButton, size, valueToCopy, onValueRequest, onCopyButtonClick, disabled, prefix, postfix, }: UseCopyButtonProps): ButtonProps;
 export {};