@snack-uikit/fields 0.51.0 → 0.51.1

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.51.1 (2025-09-10)
+
+
+### Bug Fixes
+
+* **FF-7214:** key as separated prop ([5ce8a32](https://github.com/cloud-ru-tech/snack-uikit/commit/5ce8a32c77552135a91a20b2805e665ce550406f))
+
+
+
+
+
 # 0.51.0 (2025-09-05)
 
 

package/README.md

@@ -213,6 +213,7 @@ FieldStepper в основном предназначен для работы с
 ### Props
 | name | type | default value | description |
 |------|------|---------------|-------------|
+| autoFocus* | `unknown` | - |  |
 | open | `boolean` | - | Открыт color-picker |
 | onOpenChange | `(value: boolean) => void` | - | Колбек открытия пикера |
 | showCopyButton | `boolean` | - | Отображение кнопки копирования |
@@ -231,7 +232,6 @@ FieldStepper в основном предназначен для работы с
 | onFocus | `FocusEventHandler<HTMLInputElement>` | - | Колбек обработки получения фокуса |
 | onBlur | `FocusEventHandler<HTMLInputElement>` | - | Колбек обработки потери фокуса |
 | placeholder | `string` | - | Значение плейсхолдера |
-| autoFocus | `boolean` | false | Включен ли авто-фокус для поля |
 | label | `string` | - | Лейбл |
 | labelTooltip | `ReactNode` | - | Всплывающая подсказка лейбла |
 | required | `boolean` | - | Является ли поле обязательным |
@@ -248,6 +248,7 @@ FieldStepper в основном предназначен для работы с
 ### Props
 | name | type | default value | description |
 |------|------|---------------|-------------|
+| autoFocus* | `unknown` | - |  |
 | mode* | "date" \| "date-time" | - |  |
 | open | `boolean` | - | Открыт date-picker |
 | onOpenChange | `(value: boolean) => void` | - | Колбек открытия пикера |
@@ -263,7 +264,6 @@ FieldStepper в основном предназначен для работы с
 | readonly | `boolean` | - | Является ли поле доступным только для чтения |
 | onFocus | `FocusEventHandler<HTMLInputElement>` | - | Колбек обработки получения фокуса |
 | onBlur | `FocusEventHandler<HTMLInputElement>` | - | Колбек обработки потери фокуса |
-| autoFocus | `boolean` | false | Включен ли авто-фокус для поля |
 | className | `string` | - | CSS-класс |
 | label | `string` | - | Лейбл |
 | labelTooltip | `ReactNode` | - | Всплывающая подсказка лейбла |
@@ -304,6 +304,7 @@ FieldStepper в основном предназначен для работы с
 ### Props
 | name | type | default value | description |
 |------|------|---------------|-------------|
+| autoFocus* | `unknown` | - |  |
 | hidden | `boolean` | - | Замаскированно ли значение поля |
 | onHiddenChange | `(value: boolean) => void` | - | Колбек смены маскирования |
 | showCopyButton | `boolean` | - | Отображение кнопки копирования |
@@ -320,7 +321,6 @@ FieldStepper в основном предназначен для работы с
 | onFocus | `FocusEventHandler<HTMLInputElement>` | - | Колбек обработки получения фокуса |
 | onBlur | `FocusEventHandler<HTMLInputElement>` | - | Колбек обработки потери фокуса |
 | placeholder | `string` | - | Значение плейсхолдера |
-| autoFocus | `boolean` | false | Включен ли авто-фокус для поля |
 | maxLength | `number` | - | Максимальная длина вводимого значения |
 | autoComplete | `string \| boolean` | false | Включен ли автокомплит для поля |
 | className | `string` | - | CSS-класс |
@@ -341,6 +341,7 @@ FieldStepper в основном предназначен для работы с
 | name | type | default value | description |
 |------|------|---------------|-------------|
 | options* | `OptionProps[]` | - |  |
+| autoFocus* | `unknown` | - |  |
 | id | `string` | - | Значение html-атрибута id |
 | name | `string` | - | Значение html-атрибута name |
 | disabled | `boolean` | false | Является ли поле деактивированным |
@@ -348,7 +349,6 @@ FieldStepper в основном предназначен для работы с
 | onFocus | `FocusEventHandler<HTMLInputElement>` | - | Колбек обработки получения фокуса |
 | onBlur | `FocusEventHandler<HTMLInputElement>` | - | Колбек обработки потери фокуса |
 | placeholder | `string` | - | Значение плейсхолдера |
-| autoFocus | `boolean` | false | Включен ли авто-фокус для поля |
 | onKeyDown | `KeyboardEventHandler<HTMLInputElement>` | - | Колбек обработки начала нажатия клавиши клавиатуры |
 | className | `string` | - | CSS-класс |
 | label | `string` | - | Лейбл |
@@ -400,6 +400,7 @@ FieldStepper в основном предназначен для работы с
 ### Props
 | name | type | default value | description |
 |------|------|---------------|-------------|
+| autoFocus* | `unknown` | - |  |
 | postfixIcon | `ReactElement<any, string \| JSXElementConstructor<any>>` | - | Иконка-постфикс для поля |
 | showScaleBar | `boolean` | true | Отображение линейки |
 | textInputFormatter | `TextInputFormatter` | - | Функция для форматирования значений в текстовом поле |
@@ -412,7 +413,6 @@ FieldStepper в основном предназначен для работы с
 | readonly | `boolean` | - | Является ли поле доступным только для чтения |
 | onFocus | `FocusEventHandler<HTMLInputElement>` | - | Колбек обработки получения фокуса |
 | onBlur | `FocusEventHandler<HTMLInputElement>` | - | Колбек обработки потери фокуса |
-| autoFocus | `boolean` | false | Включен ли авто-фокус для поля |
 | onChange | `(value: number \| number[]) => void` | - |  |
 | value | `number \| number[]` | - |  |
 | range | `boolean` | - |  |
@@ -436,6 +436,7 @@ FieldStepper в основном предназначен для работы с
 ### Props
 | name | type | default value | description |
 |------|------|---------------|-------------|
+| autoFocus* | `unknown` | - |  |
 | value | `number` | - | Значение поля |
 | onChange | `(value: number, e?: ChangeEvent<HTMLInputElement>) => void` | - | Колбек смены значения |
 | step | `number` | 1 | Шаг поля |
@@ -450,7 +451,6 @@ FieldStepper в основном предназначен для работы с
 | readonly | `boolean` | - | Является ли поле доступным только для чтения |
 | onFocus | `FocusEventHandler<HTMLInputElement>` | - | Колбек обработки получения фокуса |
 | onBlur | `FocusEventHandler<HTMLInputElement>` | - | Колбек обработки потери фокуса |
-| autoFocus | `boolean` | false | Включен ли авто-фокус для поля |
 | min | `number` | Number.NEGATIVE_INFINITY | Минимальное значение поля |
 | max | `number` | Number.POSITIVE_INFINITY | Максимальное значение поля |
 | className | `string` | - | CSS-класс |
@@ -470,6 +470,7 @@ FieldStepper в основном предназначен для работы с
 ### Props
 | name | type | default value | description |
 |------|------|---------------|-------------|
+| autoFocus* | `unknown` | - |  |
 | showCopyButton | `boolean` | - | Отображение кнопки Копировать для поля (актуально только для `readonly = true`) |
 | onCopyButtonClick | `() => void` | - | Колбек клика по кнопке Копировать для поля |
 | showClearButton | `boolean` | true | Отображение кнопки очистки поля |
@@ -481,7 +482,7 @@ FieldStepper в основном предназначен для работы с
 | type | "text" \| "tel" \| "email" | text |  |
 | onChange | `(value: string, e?: ChangeEvent<HTMLInputElement>) => void` | - | Колбек смены значения |
 | value | `string` | - | Значение input |
-| inputMode | enum InputMode: `"none"`, `"text"`, `"search"`, `"tel"`, `"email"`, `"decimal"`, `"numeric"`, `"url"` | - | Режим работы экранной клавиатуры |
+| inputMode | enum InputMode: `"text"`, `"search"`, `"tel"`, `"email"`, `"decimal"`, `"numeric"`, `"url"` | - | Режим работы экранной клавиатуры |
 | id | `string` | - | Значение html-атрибута id |
 | name | `string` | - | Значение html-атрибута name |
 | disabled | `boolean` | - | Является ли поле деактивированным |
@@ -489,7 +490,6 @@ FieldStepper в основном предназначен для работы с
 | onFocus | `FocusEventHandler<HTMLInputElement>` | - | Колбек обработки получения фокуса |
 | onBlur | `FocusEventHandler<HTMLInputElement>` | - | Колбек обработки потери фокуса |
 | placeholder | `string` | - | Значение плейсхолдера |
-| autoFocus | `boolean` | false | Включен ли авто-фокус для поля |
 | maxLength | `number` | - | Максимальная длина вводимого значения |
 | autoComplete | `string \| boolean` | false | Включен ли автокомплит для поля |
 | spellCheck | `boolean` | true | Значение атрибута spellcheck (проверка орфографии) |
@@ -532,7 +532,7 @@ FieldStepper в основном предназначен для работы с
 | placeholder | `string` | - | Плейсхолдер |
 | autoFocus | `boolean` | - | Включен ли авто-фокус |
 | maxLength | `number` | - | Максимальное кол-во символов |
-| inputMode | enum InputMode: `"none"`, `"text"`, `"search"`, `"tel"`, `"email"`, `"decimal"`, `"numeric"`, `"url"` | - | Режим работы экранной клавиатуры |
+| inputMode | enum InputMode: `"text"`, `"search"`, `"tel"`, `"email"`, `"decimal"`, `"numeric"`, `"url"` | - | Режим работы экранной клавиатуры |
 | spellCheck | `boolean` | true | Включение проверки орфографии |
 | onKeyDown | `KeyboardEventHandler<HTMLTextAreaElement>` | - | Колбек нажатия клавиши клавиатуры |
 | className | `string` | - | CSS-класс |
@@ -552,6 +552,7 @@ FieldStepper в основном предназначен для работы с
 ### Props
 | name | type | default value | description |
 |------|------|---------------|-------------|
+| autoFocus* | `unknown` | - |  |
 | open | `boolean` | - | Открыт time-picker |
 | onOpenChange | `(value: boolean) => void` | - | Колбек открытия пикера |
 | value | `TimeValue` | - | Значение поля |
@@ -566,7 +567,6 @@ FieldStepper в основном предназначен для работы с
 | readonly | `boolean` | - | Является ли поле доступным только для чтения |
 | onFocus | `FocusEventHandler<HTMLInputElement>` | - | Колбек обработки получения фокуса |
 | onBlur | `FocusEventHandler<HTMLInputElement>` | - | Колбек обработки потери фокуса |
-| autoFocus | `boolean` | false | Включен ли авто-фокус для поля |
 | className | `string` | - | CSS-класс |
 | label | `string` | - | Лейбл |
 | labelTooltip | `ReactNode` | - | Всплывающая подсказка лейбла |

package/dist/cjs/hooks/useCopyButton.js

@@ -1,5 +1,13 @@
 "use strict";
 
+var __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -25,12 +33,18 @@ function useCopyButton(_ref) {
     active: true,
     ref: copyButtonRef,
     show: showCopyButton,
-    render: props => (0, jsx_runtime_1.jsx)(helperComponents_1.ButtonCopyValue, Object.assign({}, props, {
-      size: input_private_1.BUTTON_SIZE_MAP[size],
-      valueToCopy: (prefix !== null && prefix !== void 0 ? prefix : '') + valueToCopy + (postfix !== null && postfix !== void 0 ? postfix : ''),
-      onValueRequest: onValueRequest,
-      onClick: onCopyButtonClick,
-      disabled: disabled
-    }))
+    render: _a => {
+      var {
+          key
+        } = _a,
+        props = __rest(_a, ["key"]);
+      return (0, jsx_runtime_1.jsx)(helperComponents_1.ButtonCopyValue, Object.assign({}, props, {
+        size: input_private_1.BUTTON_SIZE_MAP[size],
+        valueToCopy: (prefix !== null && prefix !== void 0 ? prefix : '') + valueToCopy + (postfix !== null && postfix !== void 0 ? postfix : ''),
+        onValueRequest: onValueRequest,
+        onClick: onCopyButtonClick,
+        disabled: disabled
+      }), key);
+    }
   }), [copyButtonRef, showCopyButton, size, prefix, valueToCopy, postfix, onValueRequest, onCopyButtonClick, disabled]);
 }

package/dist/cjs/hooks/useHideButton.js

@@ -1,5 +1,13 @@
 "use strict";
 
+var __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -24,7 +32,11 @@ function useHideButton(_ref) {
     active: true,
     ref: hideButtonRef,
     show: showHideButton,
-    render: props => {
+    render: _a => {
+      var {
+          key
+        } = _a,
+        props = __rest(_a, ["key"]);
       const handleClick = event => {
         props.onClick(event);
         toggleHiddenEventHandler(event);
@@ -34,7 +46,7 @@ function useHideButton(_ref) {
         onClick: handleClick,
         hidden: hidden,
         disabled: disabled
-      }));
+      }), key);
     }
   }), [disabled, hidden, hideButtonRef, showHideButton, size, toggleHiddenEventHandler]);
 }

package/dist/cjs/hooks/usePostfix.js

@@ -1,5 +1,13 @@
 "use strict";
 
+var __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
 var __importDefault = void 0 && (void 0).__importDefault || function (mod) {
   return mod && mod.__esModule ? mod : {
     "default": mod
@@ -21,11 +29,17 @@ function usePostfix(_ref) {
     id: 'postfix',
     active: false,
     show: Boolean(postfix),
-    render: props => (0, jsx_runtime_1.jsx)("div", Object.assign({}, props, {
-      className: styles_module_scss_1.default.postfix,
-      "data-test-id": 'field-postfix',
-      "data-disabled": disabled || undefined,
-      children: postfix
-    }))
+    render: _a => {
+      var {
+          key
+        } = _a,
+        props = __rest(_a, ["key"]);
+      return (0, jsx_runtime_1.jsx)("div", Object.assign({}, props, {
+        className: styles_module_scss_1.default.postfix,
+        "data-test-id": 'field-postfix',
+        "data-disabled": disabled || undefined,
+        children: postfix
+      }), key);
+    }
   }), [disabled, postfix]);
 }

package/dist/cjs/hooks/usePrefix.js

@@ -1,5 +1,13 @@
 "use strict";
 
+var __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
 var __importDefault = void 0 && (void 0).__importDefault || function (mod) {
   return mod && mod.__esModule ? mod : {
     "default": mod
@@ -21,11 +29,17 @@ function usePrefix(_ref) {
     id: 'prefix',
     active: false,
     show: Boolean(prefix),
-    render: props => (0, jsx_runtime_1.jsx)("div", Object.assign({}, props, {
-      "data-test-id": 'field-prefix',
-      className: styles_module_scss_1.default.prefix,
-      "data-disabled": disabled || undefined,
-      children: prefix
-    }))
+    render: _a => {
+      var {
+          key
+        } = _a,
+        props = __rest(_a, ["key"]);
+      return (0, jsx_runtime_1.jsx)("div", Object.assign({}, props, {
+        "data-test-id": 'field-prefix',
+        className: styles_module_scss_1.default.prefix,
+        "data-disabled": disabled || undefined,
+        children: prefix
+      }), key);
+    }
   }), [disabled, prefix]);
 }

package/dist/esm/hooks/useCopyButton.js

@@ -1,3 +1,14 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from 'react';
 import { BUTTON_SIZE_MAP } from '@snack-uikit/input-private';
@@ -8,6 +19,9 @@ export function useCopyButton({ copyButtonRef, showCopyButton, size, valueToCopy
         active: true,
         ref: copyButtonRef,
         show: showCopyButton,
-        render: props => (_jsx(ButtonCopyValue, Object.assign({}, props, { size: BUTTON_SIZE_MAP[size], valueToCopy: (prefix !== null && prefix !== void 0 ? prefix : '') + valueToCopy + (postfix !== null && postfix !== void 0 ? postfix : ''), onValueRequest: onValueRequest, onClick: onCopyButtonClick, disabled: disabled }))),
+        render: (_a) => {
+            var { key } = _a, props = __rest(_a, ["key"]);
+            return (_jsx(ButtonCopyValue, Object.assign({}, props, { size: BUTTON_SIZE_MAP[size], valueToCopy: (prefix !== null && prefix !== void 0 ? prefix : '') + valueToCopy + (postfix !== null && postfix !== void 0 ? postfix : ''), onValueRequest: onValueRequest, onClick: onCopyButtonClick, disabled: disabled }), key));
+        },
     }), [copyButtonRef, showCopyButton, size, prefix, valueToCopy, postfix, onValueRequest, onCopyButtonClick, disabled]);
 }

package/dist/esm/hooks/useHideButton.js

@@ -1,3 +1,14 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from 'react';
 import { BUTTON_SIZE_MAP } from '@snack-uikit/input-private';
@@ -10,12 +21,13 @@ export function useHideButton({ hideButtonRef, showHideButton, size, toggleHidde
         active: true,
         ref: hideButtonRef,
         show: showHideButton,
-        render: props => {
+        render: (_a) => {
+            var { key } = _a, props = __rest(_a, ["key"]);
             const handleClick = event => {
                 props.onClick(event);
                 toggleHiddenEventHandler(event);
             };
-            return (_jsx(ButtonHideValue, Object.assign({}, props, { size: BUTTON_SIZE_MAP[size], onClick: handleClick, hidden: hidden, disabled: disabled })));
+            return (_jsx(ButtonHideValue, Object.assign({}, props, { size: BUTTON_SIZE_MAP[size], onClick: handleClick, hidden: hidden, disabled: disabled }), key));
         },
     }), [disabled, hidden, hideButtonRef, showHideButton, size, toggleHiddenEventHandler]);
 }

package/dist/esm/hooks/usePostfix.js

@@ -1,3 +1,14 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from 'react';
 import styles from './styles.module.css';
@@ -6,6 +17,9 @@ export function usePostfix({ postfix, disabled }) {
         id: 'postfix',
         active: false,
         show: Boolean(postfix),
-        render: props => (_jsx("div", Object.assign({}, props, { className: styles.postfix, "data-test-id": 'field-postfix', "data-disabled": disabled || undefined, children: postfix }))),
+        render: (_a) => {
+            var { key } = _a, props = __rest(_a, ["key"]);
+            return (_jsx("div", Object.assign({}, props, { className: styles.postfix, "data-test-id": 'field-postfix', "data-disabled": disabled || undefined, children: postfix }), key));
+        },
     }), [disabled, postfix]);
 }

package/dist/esm/hooks/usePrefix.js

@@ -1,3 +1,14 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from 'react';
 import styles from './styles.module.css';
@@ -6,6 +17,9 @@ export function usePrefix({ prefix, disabled }) {
         id: 'prefix',
         active: false,
         show: Boolean(prefix),
-        render: props => (_jsx("div", Object.assign({}, props, { "data-test-id": 'field-prefix', className: styles.prefix, "data-disabled": disabled || undefined, children: prefix }))),
+        render: (_a) => {
+            var { key } = _a, props = __rest(_a, ["key"]);
+            return (_jsx("div", Object.assign({}, props, { "data-test-id": 'field-prefix', className: styles.prefix, "data-disabled": disabled || undefined, children: prefix }), key));
+        },
     }), [disabled, prefix]);
 }

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Fields",
-  "version": "0.51.0",
+  "version": "0.51.1",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -37,13 +37,13 @@
   "scripts": {},
   "dependencies": {
     "@snack-uikit/button": "0.19.16",
-    "@snack-uikit/calendar": "0.13.2",
-    "@snack-uikit/color-picker": "0.3.42",
+    "@snack-uikit/calendar": "0.13.3",
+    "@snack-uikit/color-picker": "0.3.43",
     "@snack-uikit/divider": "3.2.10",
     "@snack-uikit/dropdown": "0.5.3",
     "@snack-uikit/icons": "0.27.2",
-    "@snack-uikit/input-private": "4.8.1",
-    "@snack-uikit/list": "0.32.3",
+    "@snack-uikit/input-private": "4.8.2",
+    "@snack-uikit/list": "0.32.4",
     "@snack-uikit/scroll": "0.10.5",
     "@snack-uikit/skeleton": "0.6.9",
     "@snack-uikit/slider": "0.3.26",
@@ -65,5 +65,5 @@
   "peerDependencies": {
     "@snack-uikit/locale": "*"
   },
-  "gitHead": "1fbe7f03aeb8419a0af7d906d0fcb1284f395f18"
+  "gitHead": "52e8255973ff9c525da7463937b674772dd0f710"
 }

package/src/hooks/useCopyButton.tsx

@@ -34,8 +34,9 @@ export function useCopyButton({
       active: true,
       ref: copyButtonRef,
       show: showCopyButton,
-      render: props => (
+      render: ({ key, ...props }) => (
         <ButtonCopyValue
+          key={key}
           {...props}
           size={BUTTON_SIZE_MAP[size]}
           valueToCopy={(prefix ?? '') + valueToCopy + (postfix ?? '')}

package/src/hooks/useHideButton.tsx

@@ -30,13 +30,14 @@ export function useHideButton({
       active: true,
       ref: hideButtonRef,
       show: showHideButton,
-      render: props => {
+      render: ({ key, ...props }) => {
         const handleClick: MouseEventHandler<HTMLButtonElement> = event => {
           props.onClick(event);
           toggleHiddenEventHandler(event);
         };
         return (
           <ButtonHideValue
+            key={key}
             {...props}
             size={BUTTON_SIZE_MAP[size]}
             onClick={handleClick}

package/src/hooks/usePostfix.tsx

@@ -10,8 +10,14 @@ export function usePostfix({ postfix, disabled }: { postfix?: ReactNode; disable
       id: 'postfix',
       active: false,
       show: Boolean(postfix),
-      render: props => (
-        <div {...props} className={styles.postfix} data-test-id='field-postfix' data-disabled={disabled || undefined}>
+      render: ({ key, ...props }) => (
+        <div
+          key={key}
+          {...props}
+          className={styles.postfix}
+          data-test-id='field-postfix'
+          data-disabled={disabled || undefined}
+        >
           {postfix}
         </div>
       ),

package/src/hooks/usePrefix.tsx

@@ -10,8 +10,14 @@ export function usePrefix({ prefix, disabled }: { prefix?: ReactNode; disabled?:
       id: 'prefix',
       active: false,
       show: Boolean(prefix),
-      render: props => (
-        <div {...props} data-test-id='field-prefix' className={styles.prefix} data-disabled={disabled || undefined}>
+      render: ({ key, ...props }) => (
+        <div
+          key={key}
+          {...props}
+          data-test-id='field-prefix'
+          className={styles.prefix}
+          data-disabled={disabled || undefined}
+        >
           {prefix}
         </div>
       ),