@uniformdev/design-system 20.39.3-alpha.11 → 20.40.0

package/dist/esm/index.js

@@ -2275,15 +2275,7 @@ var IconInner = ({ icon, iconColor = "default", size = "1.5rem", ...otherProps }
     );
     return null;
   }
-  return /* @__PURE__ */ jsx16(
-    IconComponent,
-    {
-      role: "img",
-      size,
-      ...otherProps,
-      css: [IconImg, iconColor ? functionalColors : void 0, customColor[iconColor]]
-    }
-  );
+  return /* @__PURE__ */ jsx16(IconComponent, { role: "img", size, ...otherProps, css: [IconImg, customColor[iconColor]] });
 };
 var Icon = React3.memo(IconInner);
 
@@ -7111,13 +7103,12 @@ var Counter = ({
   if (typeof count === "undefined") {
     return null;
   }
-  const isNumber = typeof count === "number";
-  const isTripleDigits = isNumber && count > 99 ? /* @__PURE__ */ jsxs39("span", { css: counterTripleValue, title: `${count}`, children: [
+  const isTripleDigits = count > 99 ? /* @__PURE__ */ jsxs39("span", { css: counterTripleValue, title: `${count}`, children: [
     "99",
     /* @__PURE__ */ jsx60(Icon, { icon: "math-plus", iconColor: "currentColor", size: "0.5rem", css: counterIcon.tripleValue })
   ] }) : count;
   const formatCount = count === 0 ? /* @__PURE__ */ jsx60("span", { css: counterZeroValue, title: `${count}` }) : isTripleDigits;
-  return /* @__PURE__ */ jsxs39("div", { css: [counterContainer(bgColor, Boolean(icon || !isNumber)), sizeStyles[size]], ...props, children: [
+  return /* @__PURE__ */ jsxs39("div", { css: [counterContainer(bgColor, Boolean(icon)), sizeStyles[size]], ...props, children: [
     icon ? /* @__PURE__ */ jsx60(
       "span",
       {
@@ -9489,7 +9480,13 @@ import {
   verticalListSortingStrategy
 } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
-import { useCallback as useCallback7, useEffect as useEffect11, useMemo as useMemo5, useRef as useRef6, useState as useState11 } from "react";
+import {
+  useCallback as useCallback7,
+  useEffect as useEffect11,
+  useMemo as useMemo5,
+  useRef as useRef6,
+  useState as useState11
+} from "react";
 
 // src/utils/useDebouncedCallback.ts
 import { useEffect as useEffect10, useMemo as useMemo4, useRef as useRef5 } from "react";
@@ -9580,8 +9577,12 @@ var KeyValueInput = ({
   renderIconSelector
 }) => {
   const [isDragging, setIsDragging] = useState11(false);
+  const [indexToFocus, setIndexToFocus] = useState11(null);
   const popoverStoresMap = useRef6({});
-  const lastRowFirstInputRef = useRef6(null);
+  const keyInputRefsMap = useRef6({});
+  const [blockAutoGenerateForValues, setBlockAutoGenerateForValues] = useState11(
+    () => new Set(value.map((item) => item.value))
+  );
   const sensors = useSensors(
     useSensor(PointerSensor),
     useSensor(KeyboardSensor, {
@@ -9591,13 +9592,28 @@ var KeyValueInput = ({
   const valueWithIds = useMemo5(() => {
     return value.map((item, index) => ({ ...item, id: generateItemId(item, index) }));
   }, [value]);
-  const handleAddOptionRow = useCallback7(() => {
-    onChange([...value, newItemDefault]);
-  }, [onChange, value, newItemDefault]);
+  const handleAddOptionRow = useCallback7(
+    (insertIndex) => {
+      const newValue = [...value];
+      newValue.splice(insertIndex + 1, 0, newItemDefault);
+      setIndexToFocus(insertIndex + 1);
+      onChange(newValue);
+    },
+    [onChange, value, newItemDefault]
+  );
   const handleDeleteOptionRow = useCallback7(
     (deleteIndex) => {
       const updatedOptions = value.filter((_, index) => index !== deleteIndex);
       onChange(updatedOptions);
+      setBlockAutoGenerateForValues((current) => {
+        const newSet = new Set(current);
+        newSet.delete(value[deleteIndex].value);
+        return newSet;
+      });
+      if (updatedOptions.length > 0) {
+        const focusIndex = deleteIndex >= updatedOptions.length ? updatedOptions.length - 1 : deleteIndex;
+        setIndexToFocus(focusIndex);
+      }
     },
     [value, onChange]
   );
@@ -9621,6 +9637,34 @@ var KeyValueInput = ({
     },
     [onChange, value]
   );
+  const handleKeyPaste = useCallback7(
+    (rowIndex, e) => {
+      const pastedText = e.clipboardData.getData("text");
+      const lines = pastedText.split("\n").filter((line) => line.trim() !== "");
+      if (lines.length <= 1) {
+        return;
+      }
+      e.preventDefault();
+      const newItems = [];
+      lines.forEach((line) => {
+        const linePieces = line.split(",");
+        const hasMultipleCommas = linePieces.length > 2;
+        if (linePieces.length > 1 && !hasMultipleCommas) {
+          const key = linePieces[0].trim();
+          const val = linePieces[1].trim();
+          newItems.push({ key, value: val });
+        } else {
+          const trimmedLine = line.trim();
+          newItems.push({ key: trimmedLine, value: trimmedLine });
+        }
+      });
+      const newValue = [...value];
+      newValue.splice(rowIndex, 1, ...newItems);
+      onChange(newValue);
+      setIndexToFocus(rowIndex + newItems.length - 1);
+    },
+    [onChange, value]
+  );
   const handleDragEnd = useCallback7(
     (e) => {
       setIsDragging(false);
@@ -9644,10 +9688,17 @@ var KeyValueInput = ({
     setIsDragging(false);
   }, [setIsDragging]);
   useEffect11(() => {
-    if (lastRowFirstInputRef.current && value.length > 1) {
-      lastRowFirstInputRef.current.focus();
-    }
-  }, [value.length]);
+    const timeoutId = setTimeout(() => {
+      var _a;
+      if (indexToFocus !== null && keyInputRefsMap.current[indexToFocus]) {
+        (_a = keyInputRefsMap.current[indexToFocus]) == null ? void 0 : _a.focus();
+        setIndexToFocus(null);
+      }
+    });
+    return () => {
+      clearTimeout(timeoutId);
+    };
+  }, [indexToFocus]);
   return /* @__PURE__ */ jsxs59(VerticalRhythm, { gap: "xs", children: [
     /* @__PURE__ */ jsx91(HorizontalRhythm, { align: "center", justify: "space-between", css: { marginBottom: "var(--spacing-xs)" }, children: /* @__PURE__ */ jsx91("span", { css: LabelStyles, children: label2 }) }),
     /* @__PURE__ */ jsxs59(
@@ -9685,18 +9736,24 @@ var KeyValueInput = ({
               }
             )
           ] }),
-          /* @__PURE__ */ jsxs59(HorizontalRhythm, { align: "center", gap: "xs", children: [
-            /* @__PURE__ */ jsx91("span", { children: valueLabel }),
-            !valueInfoPopover ? null : /* @__PURE__ */ jsx91(
-              Popover3,
-              {
-                buttonText: `${valueLabel} info`,
-                iconColor: "gray",
-                placement: "bottom-start",
-                onInit: ({ store }) => popoverStoresMap.current.value = store,
-                children: valueInfoPopover
-              }
-            )
+          /* @__PURE__ */ jsxs59(HorizontalRhythm, { align: "center", justify: "space-between", children: [
+            /* @__PURE__ */ jsxs59(HorizontalRhythm, { align: "center", gap: "xs", children: [
+              /* @__PURE__ */ jsx91("span", { children: valueLabel }),
+              !valueInfoPopover ? null : /* @__PURE__ */ jsx91(
+                Popover3,
+                {
+                  buttonText: `${valueLabel} info`,
+                  iconColor: "gray",
+                  placement: "bottom-start",
+                  onInit: ({ store }) => popoverStoresMap.current.value = store,
+                  children: valueInfoPopover
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs59(Caption, { css: { fontSize: "var(--fs-xs)" }, children: [
+              getFormattedShortcut("enter"),
+              " to insert row"
+            ] })
           ] })
         ]
       }
@@ -9714,7 +9771,7 @@ var KeyValueInput = ({
           KeyValueInputItem,
           {
             id,
-            firstInputRef: index === value.length - 1 ? lastRowFirstInputRef : null,
+            firstInputRef: (ref) => keyInputRefsMap.current[index] = ref,
             value: item,
             keyLabel: `${keyLabel}, row ${index}`,
             valueLabel: `${valueLabel}, row ${index}`,
@@ -9727,9 +9784,16 @@ var KeyValueInput = ({
             onDelete: () => handleDeleteOptionRow(index),
             onFocusChange: handleFocusChange,
             "data-testid": "key-value-input-item",
-            onEnter: handleAddOptionRow,
+            onEnter: () => handleAddOptionRow(index),
+            onKeyPaste: (e) => handleKeyPaste(index, e),
             showIconColumn,
-            renderIconSelector
+            renderIconSelector,
+            blockAutoGenerateValue: item.value !== "" && blockAutoGenerateForValues.has(item.value),
+            onBlurValue: (value2) => setBlockAutoGenerateForValues((current) => {
+              const newSet = new Set(current);
+              newSet.add(value2);
+              return newSet;
+            })
           },
           isDragging ? id : index
         )) })
@@ -9738,7 +9802,7 @@ var KeyValueInput = ({
     /* @__PURE__ */ jsx91(
       AddListButton,
       {
-        onButtonClick: handleAddOptionRow,
+        onButtonClick: () => handleAddOptionRow(value.length - 1),
         disabled: disabled2,
         "data-testid": "add-input-row-action",
         css: { marginTop: "var(--spacing-sm)", marginLeft: "var(--spacing-base)" }
@@ -9761,8 +9825,11 @@ var KeyValueInputItem = ({
   disabledDelete = false,
   disabledDnd = false,
   onEnter,
+  onKeyPaste,
   showIconColumn = false,
-  renderIconSelector
+  renderIconSelector,
+  blockAutoGenerateValue,
+  onBlurValue
 }) => {
   const { attributes, listeners, setNodeRef, transform, transition, setActivatorNodeRef, isSorting } = useSortable({
     id,
@@ -9777,6 +9844,11 @@ var KeyValueInputItem = ({
       onEnter();
     }
   };
+  const handleValueKeyDown = (e) => {
+    if (e.key === "Enter") {
+      onEnter();
+    }
+  };
   return /* @__PURE__ */ jsxs59("div", { css: rowWrapper, ref: setNodeRef, style, children: [
     /* @__PURE__ */ jsx91(DragHandle, { disableDnd: disabledDnd, ref: setActivatorNodeRef, ...attributes, ...listeners }),
     /* @__PURE__ */ jsxs59(
@@ -9820,7 +9892,7 @@ var KeyValueInputItem = ({
               showLabel: false,
               disabled: disabled2,
               onChange: (e) => {
-                const hasStoredValue = value.value !== value.key;
+                const hasStoredValue = value.value !== value.key || blockAutoGenerateValue;
                 onChange == null ? void 0 : onChange({
                   key: e.currentTarget.value,
                   value: hasStoredValue ? value.value : e.currentTarget.value,
@@ -9830,6 +9902,7 @@ var KeyValueInputItem = ({
               onBlur: () => onFocusChange == null ? void 0 : onFocusChange(false),
               onFocus: () => onFocusChange == null ? void 0 : onFocusChange(true),
               onKeyDown: handleEnter,
+              onPaste: onKeyPaste,
               value: value.key,
               errorMessage: isSorting ? void 0 : error == null ? void 0 : error.key,
               "data-testid": "key"
@@ -9848,9 +9921,12 @@ var KeyValueInputItem = ({
                   icon: value.icon
                 });
               },
-              onBlur: () => onFocusChange == null ? void 0 : onFocusChange(false),
+              onBlur: () => {
+                onFocusChange == null ? void 0 : onFocusChange(false);
+                onBlurValue == null ? void 0 : onBlurValue(value.value);
+              },
               onFocus: () => onFocusChange == null ? void 0 : onFocusChange(true),
-              onKeyDown: handleEnter,
+              onKeyDown: handleValueKeyDown,
               value: value.value,
               errorMessage: isSorting ? void 0 : error == null ? void 0 : error.value,
               "data-testid": "value"

package/dist/index.d.mts

@@ -1502,10 +1502,8 @@ declare const MultilineChip: ({ children, onClick, ...props }: MultilineChipProp
 type CounterBgColors = 'var(--white)' | 'var(--gray-50)' | 'var(--accent-light)' | 'var(--accent-dark)' | 'transparent';
 type CounterIconColors = 'auto' | 'var(--utility-caution-icon)' | 'var(--utility-danger-icon)' | 'var(--utility-info-icon)' | 'var(--utility-success-icon)' | 'red';
 type CounterProps = {
-    /** sets the count value, a 0 will show a dot instead of a number. Undefined will cause the counter to disappear.
-     * String can be used for formatting purposes, e.g. "1.2k" or regionalized number, e.g. "1,200"
-     */
-    count: number | string | undefined;
+    /** sets the count value, a 0 will show a dot instead of a number. Undefined will cause the counter to disappear. */
+    count: number | undefined;
     /** sets the background color
      * @default 'transparent'
      */

package/dist/index.d.ts

@@ -1502,10 +1502,8 @@ declare const MultilineChip: ({ children, onClick, ...props }: MultilineChipProp
 type CounterBgColors = 'var(--white)' | 'var(--gray-50)' | 'var(--accent-light)' | 'var(--accent-dark)' | 'transparent';
 type CounterIconColors = 'auto' | 'var(--utility-caution-icon)' | 'var(--utility-danger-icon)' | 'var(--utility-info-icon)' | 'var(--utility-success-icon)' | 'red';
 type CounterProps = {
-    /** sets the count value, a 0 will show a dot instead of a number. Undefined will cause the counter to disappear.
-     * String can be used for formatting purposes, e.g. "1.2k" or regionalized number, e.g. "1,200"
-     */
-    count: number | string | undefined;
+    /** sets the count value, a 0 will show a dot instead of a number. Undefined will cause the counter to disappear. */
+    count: number | undefined;
     /** sets the background color
      * @default 'transparent'
      */

package/dist/index.js

@@ -3989,15 +3989,7 @@ var IconInner = ({ icon, iconColor = "default", size = "1.5rem", ...otherProps }
     );
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-    IconComponent,
-    {
-      role: "img",
-      size,
-      ...otherProps,
-      css: [IconImg, iconColor ? functionalColors : void 0, customColor[iconColor]]
-    }
-  );
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(IconComponent, { role: "img", size, ...otherProps, css: [IconImg, customColor[iconColor]] });
 };
 var Icon = import_react24.default.memo(IconInner);
 
@@ -8908,13 +8900,12 @@ var Counter = ({
   if (typeof count === "undefined") {
     return null;
   }
-  const isNumber = typeof count === "number";
-  const isTripleDigits = isNumber && count > 99 ? /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("span", { css: counterTripleValue, title: `${count}`, children: [
+  const isTripleDigits = count > 99 ? /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("span", { css: counterTripleValue, title: `${count}`, children: [
     "99",
     /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Icon, { icon: "math-plus", iconColor: "currentColor", size: "0.5rem", css: counterIcon.tripleValue })
   ] }) : count;
   const formatCount = count === 0 ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("span", { css: counterZeroValue, title: `${count}` }) : isTripleDigits;
-  return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { css: [counterContainer(bgColor, Boolean(icon || !isNumber)), sizeStyles[size]], ...props, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { css: [counterContainer(bgColor, Boolean(icon)), sizeStyles[size]], ...props, children: [
     icon ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
       "span",
       {
@@ -11437,8 +11428,12 @@ var KeyValueInput = ({
   renderIconSelector
 }) => {
   const [isDragging, setIsDragging] = (0, import_react106.useState)(false);
+  const [indexToFocus, setIndexToFocus] = (0, import_react106.useState)(null);
   const popoverStoresMap = (0, import_react106.useRef)({});
-  const lastRowFirstInputRef = (0, import_react106.useRef)(null);
+  const keyInputRefsMap = (0, import_react106.useRef)({});
+  const [blockAutoGenerateForValues, setBlockAutoGenerateForValues] = (0, import_react106.useState)(
+    () => new Set(value.map((item) => item.value))
+  );
   const sensors = (0, import_core.useSensors)(
     (0, import_core.useSensor)(import_core.PointerSensor),
     (0, import_core.useSensor)(import_core.KeyboardSensor, {
@@ -11448,13 +11443,28 @@ var KeyValueInput = ({
   const valueWithIds = (0, import_react106.useMemo)(() => {
     return value.map((item, index) => ({ ...item, id: generateItemId(item, index) }));
   }, [value]);
-  const handleAddOptionRow = (0, import_react106.useCallback)(() => {
-    onChange([...value, newItemDefault]);
-  }, [onChange, value, newItemDefault]);
+  const handleAddOptionRow = (0, import_react106.useCallback)(
+    (insertIndex) => {
+      const newValue = [...value];
+      newValue.splice(insertIndex + 1, 0, newItemDefault);
+      setIndexToFocus(insertIndex + 1);
+      onChange(newValue);
+    },
+    [onChange, value, newItemDefault]
+  );
   const handleDeleteOptionRow = (0, import_react106.useCallback)(
     (deleteIndex) => {
       const updatedOptions = value.filter((_, index) => index !== deleteIndex);
       onChange(updatedOptions);
+      setBlockAutoGenerateForValues((current) => {
+        const newSet = new Set(current);
+        newSet.delete(value[deleteIndex].value);
+        return newSet;
+      });
+      if (updatedOptions.length > 0) {
+        const focusIndex = deleteIndex >= updatedOptions.length ? updatedOptions.length - 1 : deleteIndex;
+        setIndexToFocus(focusIndex);
+      }
     },
     [value, onChange]
   );
@@ -11478,6 +11488,34 @@ var KeyValueInput = ({
     },
     [onChange, value]
   );
+  const handleKeyPaste = (0, import_react106.useCallback)(
+    (rowIndex, e) => {
+      const pastedText = e.clipboardData.getData("text");
+      const lines = pastedText.split("\n").filter((line) => line.trim() !== "");
+      if (lines.length <= 1) {
+        return;
+      }
+      e.preventDefault();
+      const newItems = [];
+      lines.forEach((line) => {
+        const linePieces = line.split(",");
+        const hasMultipleCommas = linePieces.length > 2;
+        if (linePieces.length > 1 && !hasMultipleCommas) {
+          const key = linePieces[0].trim();
+          const val = linePieces[1].trim();
+          newItems.push({ key, value: val });
+        } else {
+          const trimmedLine = line.trim();
+          newItems.push({ key: trimmedLine, value: trimmedLine });
+        }
+      });
+      const newValue = [...value];
+      newValue.splice(rowIndex, 1, ...newItems);
+      onChange(newValue);
+      setIndexToFocus(rowIndex + newItems.length - 1);
+    },
+    [onChange, value]
+  );
   const handleDragEnd = (0, import_react106.useCallback)(
     (e) => {
       setIsDragging(false);
@@ -11501,10 +11539,17 @@ var KeyValueInput = ({
     setIsDragging(false);
   }, [setIsDragging]);
   (0, import_react106.useEffect)(() => {
-    if (lastRowFirstInputRef.current && value.length > 1) {
-      lastRowFirstInputRef.current.focus();
-    }
-  }, [value.length]);
+    const timeoutId = setTimeout(() => {
+      var _a;
+      if (indexToFocus !== null && keyInputRefsMap.current[indexToFocus]) {
+        (_a = keyInputRefsMap.current[indexToFocus]) == null ? void 0 : _a.focus();
+        setIndexToFocus(null);
+      }
+    });
+    return () => {
+      clearTimeout(timeoutId);
+    };
+  }, [indexToFocus]);
   return /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(VerticalRhythm, { gap: "xs", children: [
     /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(HorizontalRhythm, { align: "center", justify: "space-between", css: { marginBottom: "var(--spacing-xs)" }, children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("span", { css: LabelStyles, children: label2 }) }),
     /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(
@@ -11542,18 +11587,24 @@ var KeyValueInput = ({
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(HorizontalRhythm, { align: "center", gap: "xs", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("span", { children: valueLabel }),
-            !valueInfoPopover ? null : /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
-              Popover3,
-              {
-                buttonText: `${valueLabel} info`,
-                iconColor: "gray",
-                placement: "bottom-start",
-                onInit: ({ store }) => popoverStoresMap.current.value = store,
-                children: valueInfoPopover
-              }
-            )
+          /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(HorizontalRhythm, { align: "center", justify: "space-between", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(HorizontalRhythm, { align: "center", gap: "xs", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("span", { children: valueLabel }),
+              !valueInfoPopover ? null : /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
+                Popover3,
+                {
+                  buttonText: `${valueLabel} info`,
+                  iconColor: "gray",
+                  placement: "bottom-start",
+                  onInit: ({ store }) => popoverStoresMap.current.value = store,
+                  children: valueInfoPopover
+                }
+              )
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(Caption, { css: { fontSize: "var(--fs-xs)" }, children: [
+              getFormattedShortcut("enter"),
+              " to insert row"
+            ] })
           ] })
         ]
       }
@@ -11571,7 +11622,7 @@ var KeyValueInput = ({
           KeyValueInputItem,
           {
             id,
-            firstInputRef: index === value.length - 1 ? lastRowFirstInputRef : null,
+            firstInputRef: (ref) => keyInputRefsMap.current[index] = ref,
             value: item,
             keyLabel: `${keyLabel}, row ${index}`,
             valueLabel: `${valueLabel}, row ${index}`,
@@ -11584,9 +11635,16 @@ var KeyValueInput = ({
             onDelete: () => handleDeleteOptionRow(index),
             onFocusChange: handleFocusChange,
             "data-testid": "key-value-input-item",
-            onEnter: handleAddOptionRow,
+            onEnter: () => handleAddOptionRow(index),
+            onKeyPaste: (e) => handleKeyPaste(index, e),
             showIconColumn,
-            renderIconSelector
+            renderIconSelector,
+            blockAutoGenerateValue: item.value !== "" && blockAutoGenerateForValues.has(item.value),
+            onBlurValue: (value2) => setBlockAutoGenerateForValues((current) => {
+              const newSet = new Set(current);
+              newSet.add(value2);
+              return newSet;
+            })
           },
           isDragging ? id : index
         )) })
@@ -11595,7 +11653,7 @@ var KeyValueInput = ({
     /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
       AddListButton,
       {
-        onButtonClick: handleAddOptionRow,
+        onButtonClick: () => handleAddOptionRow(value.length - 1),
         disabled: disabled2,
         "data-testid": "add-input-row-action",
         css: { marginTop: "var(--spacing-sm)", marginLeft: "var(--spacing-base)" }
@@ -11618,8 +11676,11 @@ var KeyValueInputItem = ({
   disabledDelete = false,
   disabledDnd = false,
   onEnter,
+  onKeyPaste,
   showIconColumn = false,
-  renderIconSelector
+  renderIconSelector,
+  blockAutoGenerateValue,
+  onBlurValue
 }) => {
   const { attributes, listeners, setNodeRef, transform, transition, setActivatorNodeRef, isSorting } = (0, import_sortable.useSortable)({
     id,
@@ -11634,6 +11695,11 @@ var KeyValueInputItem = ({
       onEnter();
     }
   };
+  const handleValueKeyDown = (e) => {
+    if (e.key === "Enter") {
+      onEnter();
+    }
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)("div", { css: rowWrapper, ref: setNodeRef, style, children: [
     /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(DragHandle, { disableDnd: disabledDnd, ref: setActivatorNodeRef, ...attributes, ...listeners }),
     /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(
@@ -11677,7 +11743,7 @@ var KeyValueInputItem = ({
               showLabel: false,
               disabled: disabled2,
               onChange: (e) => {
-                const hasStoredValue = value.value !== value.key;
+                const hasStoredValue = value.value !== value.key || blockAutoGenerateValue;
                 onChange == null ? void 0 : onChange({
                   key: e.currentTarget.value,
                   value: hasStoredValue ? value.value : e.currentTarget.value,
@@ -11687,6 +11753,7 @@ var KeyValueInputItem = ({
               onBlur: () => onFocusChange == null ? void 0 : onFocusChange(false),
               onFocus: () => onFocusChange == null ? void 0 : onFocusChange(true),
               onKeyDown: handleEnter,
+              onPaste: onKeyPaste,
               value: value.key,
               errorMessage: isSorting ? void 0 : error == null ? void 0 : error.key,
               "data-testid": "key"
@@ -11705,9 +11772,12 @@ var KeyValueInputItem = ({
                   icon: value.icon
                 });
               },
-              onBlur: () => onFocusChange == null ? void 0 : onFocusChange(false),
+              onBlur: () => {
+                onFocusChange == null ? void 0 : onFocusChange(false);
+                onBlurValue == null ? void 0 : onBlurValue(value.value);
+              },
               onFocus: () => onFocusChange == null ? void 0 : onFocusChange(true),
-              onKeyDown: handleEnter,
+              onKeyDown: handleValueKeyDown,
               value: value.value,
               errorMessage: isSorting ? void 0 : error == null ? void 0 : error.value,
               "data-testid": "value"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/design-system",
-  "version": "20.39.3-alpha.11+b3ab5fb305",
+  "version": "20.40.0",
   "description": "Uniform design system components",
   "license": "SEE LICENSE IN LICENSE.txt",
   "exports": {
@@ -38,8 +38,8 @@
     "@storybook/theming": "^8.3.3",
     "@types/react": "18.3.24",
     "@types/react-dom": "18.3.7",
-    "@uniformdev/canvas": "^20.39.3-alpha.11+b3ab5fb305",
-    "@uniformdev/richtext": "^20.39.3-alpha.11+b3ab5fb305",
+    "@uniformdev/canvas": "^20.40.0",
+    "@uniformdev/richtext": "^20.40.0",
     "@vitest/coverage-v8": "3.2.4",
     "autoprefixer": "10.4.21",
     "hygen": "6.2.11",
@@ -93,5 +93,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b3ab5fb305533690de4bbd859a69196b6c26ee2f"
+  "gitHead": "5a63373f91355d8865feac0d3fc11be59a5e38bd"
 }