@octaviaflow/core 3.1.0-beta.63 → 3.1.0-beta.65

package/dist/index.js

@@ -254,6 +254,28 @@ function ActionRow({
       e.dataTransfer.setData(dragMimeType, JSON.stringify(payload));
       e.dataTransfer.setData("text/plain", item.label);
       e.dataTransfer.effectAllowed = "copy";
+      if (typeof document !== "undefined") {
+        const ghost = document.createElement("div");
+        ghost.textContent = item.label;
+        ghost.setAttribute("aria-hidden", "true");
+        const s = ghost.style;
+        s.position = "fixed";
+        s.top = "-1000px";
+        s.left = "-1000px";
+        s.padding = "6px 12px";
+        s.borderRadius = "6px";
+        s.background = "var(--ods-surface-canvas, #ffffff)";
+        s.color = "var(--ods-text-primary, #111827)";
+        s.border = "1px solid var(--ods-border-strong, #9ca3af)";
+        s.font = "500 13px var(--ods-font-family-sans, sans-serif)";
+        s.boxShadow = "0 4px 12px rgba(0,0,0,0.18)";
+        s.whiteSpace = "nowrap";
+        s.pointerEvents = "none";
+        s.zIndex = "9999";
+        document.body.appendChild(ghost);
+        e.dataTransfer.setDragImage(ghost, 12, 16);
+        window.setTimeout(() => ghost.remove(), 0);
+      }
       onDragStart?.(item);
     },
     [item, dragMimeType, onDragStart]
@@ -9825,6 +9847,7 @@ FieldPicker.displayName = "FieldPicker";
 // src/components/KeyValueEditor/KeyValueEditor.tsx
 import { AddIcon as AddIcon2, CloseIcon as CloseIcon5 } from "@octaviaflow/icons";
 import { jsx as jsx44, jsxs as jsxs42 } from "react/jsx-runtime";
+var isRowEnabled = (pair) => pair.enabled !== false;
 function KeyValueEditor({
   pairs,
   onChange,
@@ -9832,9 +9855,12 @@ function KeyValueEditor({
   helperText,
   keyPlaceholder = "key",
   valuePlaceholder = "value",
+  descriptionPlaceholder = "description",
   addLabel = "Add",
   keyOptions,
   valueOptions,
+  rowToggle = false,
+  showDescription = false,
   size = "md",
   disabled = false,
   error = false,
@@ -9845,7 +9871,7 @@ function KeyValueEditor({
 }) {
   const setAt = (i, patch) => onChange(pairs.map((p, j) => j === i ? { ...p, ...patch } : p));
   const removeAt = (i) => onChange(pairs.filter((_, j) => j !== i));
-  const add = () => onChange([...pairs, { key: "", value: "" }]);
+  const add = () => onChange([...pairs, { key: "", value: "", ...rowToggle ? { enabled: true } : {} }]);
   const canAdd = !disabled && (maxRows === void 0 || pairs.length < maxRows);
   return /* @__PURE__ */ jsxs42(
     "div",
@@ -9854,68 +9880,101 @@ function KeyValueEditor({
         "ods-kv-editor",
         `ods-kv-editor--${size}`,
         error && "ods-kv-editor--error",
+        showDescription && "ods-kv-editor--with-description",
         className
       ),
       children: [
         label && /* @__PURE__ */ jsx44("div", { className: "ods-kv-editor__label", children: label }),
         pairs.length === 0 && emptyLabel && /* @__PURE__ */ jsx44("div", { className: "ods-kv-editor__empty", children: emptyLabel }),
-        pairs.map((pair, i) => /* @__PURE__ */ jsxs42("div", { className: "ods-kv-editor__row", children: [
-          keyOptions ? /* @__PURE__ */ jsx44(
-            Combobox,
-            {
-              ariaLabel: "Key",
-              size,
-              value: pair.key,
-              options: keyOptions,
-              onChange: (v) => setAt(i, { key: v }),
-              placeholder: keyPlaceholder,
-              disabled
-            }
-          ) : /* @__PURE__ */ jsx44(
-            "input",
-            {
-              className: "ods-kv-editor__input",
-              "aria-label": "Key",
-              value: pair.key,
-              onChange: (e) => setAt(i, { key: e.target.value }),
-              placeholder: keyPlaceholder,
-              disabled
-            }
-          ),
-          valueOptions ? /* @__PURE__ */ jsx44(
-            Combobox,
-            {
-              ariaLabel: "Value",
-              size,
-              value: pair.value,
-              options: valueOptions,
-              onChange: (v) => setAt(i, { value: v }),
-              placeholder: valuePlaceholder,
-              disabled
-            }
-          ) : /* @__PURE__ */ jsx44(
-            "input",
-            {
-              className: "ods-kv-editor__input",
-              "aria-label": "Value",
-              value: pair.value,
-              onChange: (e) => setAt(i, { value: e.target.value }),
-              placeholder: valuePlaceholder,
-              disabled
-            }
-          ),
-          /* @__PURE__ */ jsx44(
-            "button",
+        pairs.map((pair, i) => {
+          const rowOff = rowToggle && !isRowEnabled(pair);
+          const fieldsDisabled = disabled || rowOff;
+          return /* @__PURE__ */ jsxs42(
+            "div",
             {
-              type: "button",
-              className: "ods-kv-editor__remove",
-              "aria-label": "Remove row",
-              onClick: () => removeAt(i),
-              disabled,
-              children: /* @__PURE__ */ jsx44(CloseIcon5, { width: 14, height: 14, "aria-hidden": "true" })
-            }
-          )
-        ] }, i)),
+              className: cn("ods-kv-editor__row", rowOff && "ods-kv-editor__row--disabled"),
+              children: [
+                rowToggle && /* @__PURE__ */ jsx44(
+                  Checkbox,
+                  {
+                    size: size === "lg" ? "md" : size,
+                    "aria-label": "Enable row",
+                    checked: isRowEnabled(pair),
+                    onChange: (on) => setAt(i, { enabled: on }),
+                    disabled
+                  }
+                ),
+                keyOptions ? /* @__PURE__ */ jsx44(
+                  Combobox,
+                  {
+                    ariaLabel: "Key",
+                    size,
+                    value: pair.key,
+                    options: keyOptions,
+                    onChange: (v) => setAt(i, { key: v }),
+                    placeholder: keyPlaceholder,
+                    disabled: fieldsDisabled
+                  }
+                ) : /* @__PURE__ */ jsx44(
+                  "input",
+                  {
+                    className: "ods-kv-editor__input",
+                    "aria-label": "Key",
+                    value: pair.key,
+                    onChange: (e) => setAt(i, { key: e.target.value }),
+                    placeholder: keyPlaceholder,
+                    disabled: fieldsDisabled
+                  }
+                ),
+                valueOptions ? /* @__PURE__ */ jsx44(
+                  Combobox,
+                  {
+                    ariaLabel: "Value",
+                    size,
+                    value: pair.value,
+                    options: valueOptions,
+                    onChange: (v) => setAt(i, { value: v }),
+                    placeholder: valuePlaceholder,
+                    disabled: fieldsDisabled
+                  }
+                ) : /* @__PURE__ */ jsx44(
+                  "input",
+                  {
+                    className: "ods-kv-editor__input",
+                    "aria-label": "Value",
+                    value: pair.value,
+                    onChange: (e) => setAt(i, { value: e.target.value }),
+                    placeholder: valuePlaceholder,
+                    disabled: fieldsDisabled
+                  }
+                ),
+                showDescription && /* @__PURE__ */ jsx44(
+                  "input",
+                  {
+                    className: "ods-kv-editor__input ods-kv-editor__input--description",
+                    "aria-label": "Description",
+                    value: pair.description ?? "",
+                    onChange: (e) => setAt(i, { description: e.target.value }),
+                    placeholder: descriptionPlaceholder,
+                    disabled: fieldsDisabled
+                  }
+                ),
+                /* @__PURE__ */ jsx44(
+                  "button",
+                  {
+                    type: "button",
+                    className: "ods-kv-editor__remove",
+                    "aria-label": "Remove row",
+                    onClick: () => removeAt(i),
+                    disabled,
+                    children: /* @__PURE__ */ jsx44(CloseIcon5, { width: 14, height: 14, "aria-hidden": "true" })
+                  }
+                )
+              ]
+            },
+            i
+          );
+        }),
         canAdd && /* @__PURE__ */ jsxs42("button", { type: "button", className: "ods-kv-editor__add", onClick: add, children: [
           /* @__PURE__ */ jsx44(AddIcon2, { width: 14, height: 14, "aria-hidden": "true" }),
           addLabel