@octaviaflow/core 3.1.0-beta.63 → 3.1.0-beta.64
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/KeyValueEditor/KeyValueEditor.d.ts +12 -1
- package/dist/components/KeyValueEditor/KeyValueEditor.d.ts.map +1 -1
- package/dist/index.cjs +94 -57
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +94 -57
- package/dist/index.js.map +1 -1
- package/dist/styles.css +1 -1
- package/package.json +1 -1
|
@@ -3,6 +3,11 @@ import { type ComboboxOption } from "../Combobox";
|
|
|
3
3
|
export interface KeyValuePair {
|
|
4
4
|
key: string;
|
|
5
5
|
value: string;
|
|
6
|
+
/** Per-row enable flag. Only meaningful when `rowToggle` is set; a missing
|
|
7
|
+
* value is treated as enabled (backward-compatible). */
|
|
8
|
+
enabled?: boolean;
|
|
9
|
+
/** Optional per-row description. Only rendered when `showDescription` is set. */
|
|
10
|
+
description?: string;
|
|
6
11
|
}
|
|
7
12
|
export interface KeyValueEditorProps {
|
|
8
13
|
pairs: KeyValuePair[];
|
|
@@ -11,11 +16,17 @@ export interface KeyValueEditorProps {
|
|
|
11
16
|
helperText?: ReactNode;
|
|
12
17
|
keyPlaceholder?: string;
|
|
13
18
|
valuePlaceholder?: string;
|
|
19
|
+
descriptionPlaceholder?: string;
|
|
14
20
|
addLabel?: ReactNode;
|
|
15
21
|
/** When set, the key field is a Combobox of these suggestions (free-type still allowed). */
|
|
16
22
|
keyOptions?: ComboboxOption[];
|
|
17
23
|
/** When set, the value field is a Combobox of these suggestions (free-type still allowed). */
|
|
18
24
|
valueOptions?: ComboboxOption[];
|
|
25
|
+
/** Render a per-row enable Checkbox; disabled rows dim and their fields go
|
|
26
|
+
* read-only (the toggle + remove stay active). New rows default to enabled. */
|
|
27
|
+
rowToggle?: boolean;
|
|
28
|
+
/** Render a third description column per row. */
|
|
29
|
+
showDescription?: boolean;
|
|
19
30
|
size?: "sm" | "md" | "lg";
|
|
20
31
|
disabled?: boolean;
|
|
21
32
|
error?: boolean;
|
|
@@ -31,7 +42,7 @@ export interface KeyValueEditorProps {
|
|
|
31
42
|
* field can become a Combobox (suggestions + free entry) by passing
|
|
32
43
|
* `keyOptions` / `valueOptions`; otherwise both are plain text inputs.
|
|
33
44
|
*/
|
|
34
|
-
export declare function KeyValueEditor({ pairs, onChange, label, helperText, keyPlaceholder, valuePlaceholder, addLabel, keyOptions, valueOptions, size, disabled, error, errorMessage, emptyLabel, maxRows, className, }: KeyValueEditorProps): import("react/jsx-runtime").JSX.Element;
|
|
45
|
+
export declare function KeyValueEditor({ pairs, onChange, label, helperText, keyPlaceholder, valuePlaceholder, descriptionPlaceholder, addLabel, keyOptions, valueOptions, rowToggle, showDescription, size, disabled, error, errorMessage, emptyLabel, maxRows, className, }: KeyValueEditorProps): import("react/jsx-runtime").JSX.Element;
|
|
35
46
|
export declare namespace KeyValueEditor {
|
|
36
47
|
var displayName: string;
|
|
37
48
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"KeyValueEditor.d.ts","sourceRoot":"","sources":["../../../src/components/KeyValueEditor/KeyValueEditor.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"KeyValueEditor.d.ts","sourceRoot":"","sources":["../../../src/components/KeyValueEditor/KeyValueEditor.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,EAAY,KAAK,cAAc,EAAE,MAAM,aAAa,CAAC;AAE5D,MAAM,WAAW,YAAY;IAC3B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd;4DACwD;IACxD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,iFAAiF;IACjF,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,YAAY,EAAE,CAAC;IACtB,QAAQ,EAAE,CAAC,KAAK,EAAE,YAAY,EAAE,KAAK,IAAI,CAAC;IAC1C,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,4FAA4F;IAC5F,UAAU,CAAC,EAAE,cAAc,EAAE,CAAC;IAC9B,8FAA8F;IAC9F,YAAY,CAAC,EAAE,cAAc,EAAE,CAAC;IAChC;mFAC+E;IAC/E,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,iDAAiD;IACjD,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,wCAAwC;IACxC,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAMD;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,QAAQ,EACR,KAAK,EACL,UAAU,EACV,cAAsB,EACtB,gBAA0B,EAC1B,sBAAsC,EACtC,QAAgB,EAChB,UAAU,EACV,YAAY,EACZ,SAAiB,EACjB,eAAuB,EACvB,IAAW,EACX,QAAgB,EAChB,KAAa,EACb,YAAY,EACZ,UAAU,EACV,OAAO,EACP,SAAS,GACV,EAAE,mBAAmB,2CA0HrB;yBA9Ie,cAAc"}
|
package/dist/index.cjs
CHANGED
|
@@ -9895,6 +9895,7 @@ FieldPicker.displayName = "FieldPicker";
|
|
|
9895
9895
|
// src/components/KeyValueEditor/KeyValueEditor.tsx
|
|
9896
9896
|
var import_icons12 = require("@octaviaflow/icons");
|
|
9897
9897
|
var import_jsx_runtime44 = require("react/jsx-runtime");
|
|
9898
|
+
var isRowEnabled = (pair) => pair.enabled !== false;
|
|
9898
9899
|
function KeyValueEditor({
|
|
9899
9900
|
pairs,
|
|
9900
9901
|
onChange,
|
|
@@ -9902,9 +9903,12 @@ function KeyValueEditor({
|
|
|
9902
9903
|
helperText,
|
|
9903
9904
|
keyPlaceholder = "key",
|
|
9904
9905
|
valuePlaceholder = "value",
|
|
9906
|
+
descriptionPlaceholder = "description",
|
|
9905
9907
|
addLabel = "Add",
|
|
9906
9908
|
keyOptions,
|
|
9907
9909
|
valueOptions,
|
|
9910
|
+
rowToggle = false,
|
|
9911
|
+
showDescription = false,
|
|
9908
9912
|
size = "md",
|
|
9909
9913
|
disabled = false,
|
|
9910
9914
|
error = false,
|
|
@@ -9915,7 +9919,7 @@ function KeyValueEditor({
|
|
|
9915
9919
|
}) {
|
|
9916
9920
|
const setAt = (i, patch) => onChange(pairs.map((p, j) => j === i ? { ...p, ...patch } : p));
|
|
9917
9921
|
const removeAt = (i) => onChange(pairs.filter((_, j) => j !== i));
|
|
9918
|
-
const add = () => onChange([...pairs, { key: "", value: "" }]);
|
|
9922
|
+
const add = () => onChange([...pairs, { key: "", value: "", ...rowToggle ? { enabled: true } : {} }]);
|
|
9919
9923
|
const canAdd = !disabled && (maxRows === void 0 || pairs.length < maxRows);
|
|
9920
9924
|
return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
|
|
9921
9925
|
"div",
|
|
@@ -9924,68 +9928,101 @@ function KeyValueEditor({
|
|
|
9924
9928
|
"ods-kv-editor",
|
|
9925
9929
|
`ods-kv-editor--${size}`,
|
|
9926
9930
|
error && "ods-kv-editor--error",
|
|
9931
|
+
showDescription && "ods-kv-editor--with-description",
|
|
9927
9932
|
className
|
|
9928
9933
|
),
|
|
9929
9934
|
children: [
|
|
9930
9935
|
label && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "ods-kv-editor__label", children: label }),
|
|
9931
9936
|
pairs.length === 0 && emptyLabel && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "ods-kv-editor__empty", children: emptyLabel }),
|
|
9932
|
-
pairs.map((pair, i) =>
|
|
9933
|
-
|
|
9934
|
-
|
|
9935
|
-
|
|
9936
|
-
|
|
9937
|
-
size,
|
|
9938
|
-
value: pair.key,
|
|
9939
|
-
options: keyOptions,
|
|
9940
|
-
onChange: (v) => setAt(i, { key: v }),
|
|
9941
|
-
placeholder: keyPlaceholder,
|
|
9942
|
-
disabled
|
|
9943
|
-
}
|
|
9944
|
-
) : /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
|
|
9945
|
-
"input",
|
|
9946
|
-
{
|
|
9947
|
-
className: "ods-kv-editor__input",
|
|
9948
|
-
"aria-label": "Key",
|
|
9949
|
-
value: pair.key,
|
|
9950
|
-
onChange: (e) => setAt(i, { key: e.target.value }),
|
|
9951
|
-
placeholder: keyPlaceholder,
|
|
9952
|
-
disabled
|
|
9953
|
-
}
|
|
9954
|
-
),
|
|
9955
|
-
valueOptions ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
|
|
9956
|
-
Combobox,
|
|
9957
|
-
{
|
|
9958
|
-
ariaLabel: "Value",
|
|
9959
|
-
size,
|
|
9960
|
-
value: pair.value,
|
|
9961
|
-
options: valueOptions,
|
|
9962
|
-
onChange: (v) => setAt(i, { value: v }),
|
|
9963
|
-
placeholder: valuePlaceholder,
|
|
9964
|
-
disabled
|
|
9965
|
-
}
|
|
9966
|
-
) : /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
|
|
9967
|
-
"input",
|
|
9968
|
-
{
|
|
9969
|
-
className: "ods-kv-editor__input",
|
|
9970
|
-
"aria-label": "Value",
|
|
9971
|
-
value: pair.value,
|
|
9972
|
-
onChange: (e) => setAt(i, { value: e.target.value }),
|
|
9973
|
-
placeholder: valuePlaceholder,
|
|
9974
|
-
disabled
|
|
9975
|
-
}
|
|
9976
|
-
),
|
|
9977
|
-
/* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
|
|
9978
|
-
"button",
|
|
9937
|
+
pairs.map((pair, i) => {
|
|
9938
|
+
const rowOff = rowToggle && !isRowEnabled(pair);
|
|
9939
|
+
const fieldsDisabled = disabled || rowOff;
|
|
9940
|
+
return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
|
|
9941
|
+
"div",
|
|
9979
9942
|
{
|
|
9980
|
-
|
|
9981
|
-
|
|
9982
|
-
|
|
9983
|
-
|
|
9984
|
-
|
|
9985
|
-
|
|
9986
|
-
|
|
9987
|
-
|
|
9988
|
-
|
|
9943
|
+
className: cn("ods-kv-editor__row", rowOff && "ods-kv-editor__row--disabled"),
|
|
9944
|
+
children: [
|
|
9945
|
+
rowToggle && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
|
|
9946
|
+
Checkbox,
|
|
9947
|
+
{
|
|
9948
|
+
size: size === "lg" ? "md" : size,
|
|
9949
|
+
"aria-label": "Enable row",
|
|
9950
|
+
checked: isRowEnabled(pair),
|
|
9951
|
+
onChange: (on) => setAt(i, { enabled: on }),
|
|
9952
|
+
disabled
|
|
9953
|
+
}
|
|
9954
|
+
),
|
|
9955
|
+
keyOptions ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
|
|
9956
|
+
Combobox,
|
|
9957
|
+
{
|
|
9958
|
+
ariaLabel: "Key",
|
|
9959
|
+
size,
|
|
9960
|
+
value: pair.key,
|
|
9961
|
+
options: keyOptions,
|
|
9962
|
+
onChange: (v) => setAt(i, { key: v }),
|
|
9963
|
+
placeholder: keyPlaceholder,
|
|
9964
|
+
disabled: fieldsDisabled
|
|
9965
|
+
}
|
|
9966
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
|
|
9967
|
+
"input",
|
|
9968
|
+
{
|
|
9969
|
+
className: "ods-kv-editor__input",
|
|
9970
|
+
"aria-label": "Key",
|
|
9971
|
+
value: pair.key,
|
|
9972
|
+
onChange: (e) => setAt(i, { key: e.target.value }),
|
|
9973
|
+
placeholder: keyPlaceholder,
|
|
9974
|
+
disabled: fieldsDisabled
|
|
9975
|
+
}
|
|
9976
|
+
),
|
|
9977
|
+
valueOptions ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
|
|
9978
|
+
Combobox,
|
|
9979
|
+
{
|
|
9980
|
+
ariaLabel: "Value",
|
|
9981
|
+
size,
|
|
9982
|
+
value: pair.value,
|
|
9983
|
+
options: valueOptions,
|
|
9984
|
+
onChange: (v) => setAt(i, { value: v }),
|
|
9985
|
+
placeholder: valuePlaceholder,
|
|
9986
|
+
disabled: fieldsDisabled
|
|
9987
|
+
}
|
|
9988
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
|
|
9989
|
+
"input",
|
|
9990
|
+
{
|
|
9991
|
+
className: "ods-kv-editor__input",
|
|
9992
|
+
"aria-label": "Value",
|
|
9993
|
+
value: pair.value,
|
|
9994
|
+
onChange: (e) => setAt(i, { value: e.target.value }),
|
|
9995
|
+
placeholder: valuePlaceholder,
|
|
9996
|
+
disabled: fieldsDisabled
|
|
9997
|
+
}
|
|
9998
|
+
),
|
|
9999
|
+
showDescription && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
|
|
10000
|
+
"input",
|
|
10001
|
+
{
|
|
10002
|
+
className: "ods-kv-editor__input ods-kv-editor__input--description",
|
|
10003
|
+
"aria-label": "Description",
|
|
10004
|
+
value: pair.description ?? "",
|
|
10005
|
+
onChange: (e) => setAt(i, { description: e.target.value }),
|
|
10006
|
+
placeholder: descriptionPlaceholder,
|
|
10007
|
+
disabled: fieldsDisabled
|
|
10008
|
+
}
|
|
10009
|
+
),
|
|
10010
|
+
/* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
|
|
10011
|
+
"button",
|
|
10012
|
+
{
|
|
10013
|
+
type: "button",
|
|
10014
|
+
className: "ods-kv-editor__remove",
|
|
10015
|
+
"aria-label": "Remove row",
|
|
10016
|
+
onClick: () => removeAt(i),
|
|
10017
|
+
disabled,
|
|
10018
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_icons12.CloseIcon, { width: 14, height: 14, "aria-hidden": "true" })
|
|
10019
|
+
}
|
|
10020
|
+
)
|
|
10021
|
+
]
|
|
10022
|
+
},
|
|
10023
|
+
i
|
|
10024
|
+
);
|
|
10025
|
+
}),
|
|
9989
10026
|
canAdd && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("button", { type: "button", className: "ods-kv-editor__add", onClick: add, children: [
|
|
9990
10027
|
/* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_icons12.AddIcon, { width: 14, height: 14, "aria-hidden": "true" }),
|
|
9991
10028
|
addLabel
|