@octaviaflow/core 3.1.0-beta.62 → 3.1.0-beta.64

package/dist/index.js

@@ -9825,6 +9825,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 +9833,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 +9849,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 +9858,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