@orsetra/shared-ui 1.3.14 → 1.3.16

package/components/ui/kv-input.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import React, { useState, useEffect } from "react"
+import React, { useState, useEffect, useRef } from "react"
 import { Input } from "./input"
 import { Button } from "./button"
 import { X, Plus } from "lucide-react"
@@ -18,6 +18,8 @@ interface KVInputProps {
   valuePlaceholder?: string
 }
 
+const BTN = "rounded-none h-9 w-9 p-0 flex-shrink-0"
+
 export function KVInput({
   value = {},
   onChange,
@@ -25,93 +27,102 @@ export function KVInput({
   keyPlaceholder = "Key",
   valuePlaceholder = "Value",
 }: KVInputProps) {
-  const [pairs, setPairs] = useState<KVPair[]>(() => {
-    const entries = Object.entries(value)
-    return entries.length > 0 ? entries.map(([key, value]) => ({ key, value })) : [{ key: "", value: "" }]
-  })
+  const [committed, setCommitted] = useState<KVPair[]>(() =>
+    Object.entries(value).map(([k, v]) => ({ key: k, value: v }))
+  )
+  const [draft, setDraft] = useState<KVPair>({ key: "", value: "" })
+  const skipSync = useRef(false)
 
+  // Sync from parent only when value changes externally (not from our own emit)
   useEffect(() => {
-    if (value && Object.keys(value).length > 0) {
-      const newPairs = Object.entries(value).map(([key, val]) => ({ key, value: val }))
-      if (JSON.stringify(newPairs) !== JSON.stringify(pairs)) {
-        setPairs(newPairs)
-      }
-    }
+    if (skipSync.current) { skipSync.current = false; return }
+    setCommitted(Object.entries(value).map(([k, v]) => ({ key: k, value: v })))
+    setDraft({ key: "", value: "" })
   }, [value])
 
-  const handleChange = (index: number, field: "key" | "value", newValue: string) => {
-    const newPairs = [...pairs]
-    newPairs[index][field] = newValue
-    setPairs(newPairs)
-    
+  const emit = (comm: KVPair[]) => {
     const result: Record<string, string> = {}
-    newPairs.forEach(pair => {
-      if (pair.key) {
-        result[pair.key] = pair.value
-      }
-    })
+    comm.forEach(p => { if (p.key) result[p.key] = p.value })
+    skipSync.current = true
     onChange?.(result)
   }
 
-  const handleAdd = () => {
-    setPairs([...pairs, { key: "", value: "" }])
+  const handleCommit = () => {
+    if (!draft.key) return
+    const next = [...committed, { ...draft }]
+    setCommitted(next)
+    setDraft({ key: "", value: "" })
+    emit(next)
   }
 
   const handleRemove = (index: number) => {
-    const newPairs = pairs.filter((_, i) => i !== index)
-    const finalPairs = newPairs.length > 0 ? newPairs : [{ key: "", value: "" }]
-    setPairs(finalPairs)
-    
-    const result: Record<string, string> = {}
-    finalPairs.forEach(pair => {
-      if (pair.key) {
-        result[pair.key] = pair.value
-      }
-    })
-    onChange?.(result)
+    const next = committed.filter((_, i) => i !== index)
+    setCommitted(next)
+    emit(next)
+  }
+
+  const handleCommittedChange = (index: number, field: "key" | "value", val: string) => {
+    const next = committed.map((p, i) => i === index ? { ...p, [field]: val } : p)
+    setCommitted(next)
+    emit(next)
   }
 
   return (
     <div className="space-y-2">
-      {pairs.map((pair, index) => (
+      {committed.map((pair, index) => (
         <div key={index} className="flex gap-2">
           <Input
             value={pair.key}
-            onChange={(e) => handleChange(index, "key", e.target.value)}
+            onChange={(e) => handleCommittedChange(index, "key", e.target.value)}
             disabled={disabled}
             placeholder={keyPlaceholder}
             className="rounded-none flex-1"
           />
           <Input
             value={pair.value}
-            onChange={(e) => handleChange(index, "value", e.target.value)}
+            onChange={(e) => handleCommittedChange(index, "value", e.target.value)}
             disabled={disabled}
             placeholder={valuePlaceholder}
             className="rounded-none flex-1"
           />
-          {pairs.length > 1 && (
-            <Button
-              type="button"
-              variant="secondary"
-              onClick={() => handleRemove(index)}
-              disabled={disabled}
-              className="rounded-none h-9 w-9 p-0"
-            >
-              <X className="h-4 w-4" />
-            </Button>
-          )}
+          <Button
+            type="button"
+            variant="secondary"
+            onClick={() => handleRemove(index)}
+            disabled={disabled}
+            className={BTN}
+          >
+            <X className="h-4 w-4" />
+          </Button>
         </div>
       ))}
-      <Button
-        type="button"
-        variant="secondary"
-        onClick={handleAdd}
-        disabled={disabled}
-        className="rounded-none"
-      >
-        <Plus className="h-4 w-4 mr-2" />
-        Add Item
-      </Button>
+
+      {/* Draft row — + enabled only when key is filled */}
+      <div className="flex gap-2">
+        <Input
+          value={draft.key}
+          onChange={(e) => setDraft(d => ({ ...d, key: e.target.value }))}
+          disabled={disabled}
+          placeholder={keyPlaceholder}
+          className="rounded-none flex-1"
+        />
+        <Input
+          value={draft.value}
+          onChange={(e) => setDraft(d => ({ ...d, value: e.target.value }))}
+          disabled={disabled}
+          placeholder={valuePlaceholder}
+          className="rounded-none flex-1"
+        />
+        <Button
+          type="button"
+          variant="secondary"
+          onClick={handleCommit}
+          disabled={disabled || !draft.key}
+          className={BTN}
+        >
+          <Plus className="h-4 w-4" />
+        </Button>
+      </div>
     </div>
   )
 }

package/components/ui/side-panel.tsx

@@ -31,8 +31,9 @@ SidePanelOverlay.displayName = DialogPrimitive.Overlay.displayName
 interface SidePanelProps {
   open: boolean
   onOpenChange: (open: boolean) => void
-  title: string
-  description?: string
+  title: React.ReactNode
+  description?: React.ReactNode
+  headerExtra?: React.ReactNode
   children: React.ReactNode
   actions: React.ReactNode
   side?: "left" | "right"
@@ -45,6 +46,7 @@ const SidePanel = ({
   onOpenChange,
   title,
   description,
+  headerExtra,
   children,
   actions,
   side = "right",
@@ -77,6 +79,11 @@ const SidePanel = ({
                 </DialogPrimitive.Description>
               )}
             </div>
+            {headerExtra && (
+              <div className="flex items-center mr-3">
+                {headerExtra}
+              </div>
+            )}
             <DialogPrimitive.Close
               className="rounded-sm opacity-70 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ibm-blue-60 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-ibm-gray-10"
               onClick={onClose}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orsetra/shared-ui",
-  "version": "1.3.14",
+  "version": "1.3.16",
   "description": "Shared UI components for Orsetra platform",
   "main": "./index.ts",
   "types": "./index.ts",