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

package/dist/esm/index.js

@@ -9480,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";
@@ -9571,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, {
@@ -9582,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]
   );
@@ -9612,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);
@@ -9635,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(
@@ -9676,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"
+            ] })
           ] })
         ]
       }
@@ -9705,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}`,
@@ -9718,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
         )) })
@@ -9729,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)" }
@@ -9752,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,
@@ -9768,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(
@@ -9811,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,
@@ -9821,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"
@@ -9839,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.js

@@ -11428,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, {
@@ -11439,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]
   );
@@ -11469,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);
@@ -11492,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)(
@@ -11533,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"
+            ] })
           ] })
         ]
       }
@@ -11562,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}`,
@@ -11575,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
         )) })
@@ -11586,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)" }
@@ -11609,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,
@@ -11625,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)(
@@ -11668,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,
@@ -11678,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"
@@ -11696,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.1+5c5ebdb625",
+  "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.1+5c5ebdb625",
-    "@uniformdev/richtext": "^20.39.3-alpha.1+5c5ebdb625",
+    "@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": "5c5ebdb6256f19b67d7941890176e63f3d60b8f4"
+  "gitHead": "5a63373f91355d8865feac0d3fc11be59a5e38bd"
 }