@galaxy-io/dls 1.6.1 → 2.0.0

package/dist/inputs/KeyValueInput.d.ts

@@ -0,0 +1,120 @@
+/**
+ * Edits a short list of string pairs: HTTP headers for a connector, environment variables for a
+ * job, query parameters, metadata labels. Each pair is a row of two mono `TextInput`s (key, value)
+ * and a remove button; an "Add" button under the rows appends an empty pair and focuses its key.
+ * Pasting several `KEY=value` lines into a key field (a copied `.env` block) fills one row per
+ * line. The value is the list of pairs, with `value` / `defaultValue` / `onChange`; every
+ * keystroke reports the whole next list.
+ *
+ * A standalone KeyValueInput with `label` or `error` renders a `Field` around itself; inside a
+ * Field the group takes the Field's id and label, and the inner fields are shielded from the
+ * Field's context (each gets the description, error and disabled state explicitly). It never
+ * validates: duplicate or empty keys are the app's `error`. No 1.x equivalent.
+ *
+ * SSR: ids come from `useId`; focus moves run in an effect; nothing touches `window` or
+ * `document` at module scope.
+ */
+import { type AriaAttributes, type CSSProperties } from "react";
+/** Canonical rungs; KeyValueInput supports all five. Every field and button in it uses the rung. */
+export declare enum KeyValueInputSize {
+    /** 20px rows, 4px gaps. */
+    X_SMALL = "X_SMALL",
+    /** 24px rows, 4px gaps. */
+    SMALL = "SMALL",
+    /** 32px rows, 8px gaps. The default. */
+    MEDIUM = "MEDIUM",
+    /** 36px rows, 8px gaps. */
+    LARGE = "LARGE",
+    /** 40px rows, 8px gaps. */
+    X_LARGE = "X_LARGE"
+}
+/** Resting fill of every field (Constitution V-A surface set; the 1.x `InputVariant` members). */
+export declare enum KeyValueInputVariant {
+    /** `background.base` fill. */
+    BASE = "BASE",
+    /** `background.primary` fill. The default. */
+    PRIMARY = "PRIMARY",
+    /** `background.secondary` fill. */
+    SECONDARY = "SECONDARY",
+    /** `background.tertiary` fill. */
+    TERTIARY = "TERTIARY"
+}
+/** One row. Both strings may be empty while the user is typing. */
+export interface KeyValueInputPair {
+    /** The name: a header, a variable, a parameter. */
+    key: string;
+    /** The value for that key. */
+    value: string;
+}
+export interface KeyValueInputProps extends AriaAttributes {
+    /** Controlled rows, in display order. Pass it with `onChange`. */
+    value?: KeyValueInputPair[];
+    /**
+     * Initial rows while uncontrolled.
+     * @default []
+     */
+    defaultValue?: KeyValueInputPair[];
+    /** Called with the whole next list on every edit, add, remove and paste. */
+    onChange?: (value: KeyValueInputPair[]) => void;
+    /**
+     * Control rung of every field and button: 20 / 24 / 32 / 36 / 40px rows.
+     * @default KeyValueInputSize.MEDIUM
+     */
+    size?: KeyValueInputSize;
+    /**
+     * Resting fill of every field, from the surface set. Ignored with `isGhost`.
+     * @default KeyValueInputVariant.PRIMARY
+     */
+    variant?: KeyValueInputVariant;
+    /**
+     * Ghost fields (1.x `TRANSPARENT`): every key and value field shows no fill and no hairline until
+     * hover or focus (Input's `isGhost`).
+     * @default false
+     */
+    isGhost?: boolean;
+    /** Label above the rows, rendered through `Field`. For a description or a horizontal layout, wrap it in `Field` instead. */
+    label?: string;
+    /** Message from the app ("Header names must be unique"), shown under the rows through `Field`. It also marks every field invalid. */
+    error?: string;
+    /**
+     * Error borders and `aria-invalid` on every field, without a message. `error` implies it.
+     * @default false
+     */
+    isError?: boolean;
+    /**
+     * No field, remove button or add button can be used. Shows the disabled look.
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Fields are focusable and selectable but not editable; no remove or add buttons.
+     * @default false
+     */
+    isReadOnly?: boolean;
+    /**
+     * Required marker on the `label` (via `Field`). It does no validation.
+     * @default false
+     */
+    isRequired?: boolean;
+    /**
+     * Stretch to the parent's width. Without it, the control is 400px wide.
+     * @default false
+     */
+    fillWidth?: boolean;
+    /** Accessible name of the group when there is no visible label (no `label` and no wrapping `Field`). */
+    ariaLabel?: string;
+    /**
+     * DOM id of the group. A wrapping `Field`'s id wins.
+     * @default useId()
+     */
+    id?: string;
+    /** Any `data-*` attribute, forwarded to the group root. */
+    [dataAttribute: `data-${string}`]: string | number | boolean | undefined;
+    /** Extra class on the root: the `Field` wrapper when KeyValueInput renders one, otherwise the group. */
+    className?: string;
+    /** Inline style on the root; only for setting CSS custom properties. */
+    style?: CSSProperties;
+}
+/** Editable key/value rows (headers, environment variables) with add, remove and `.env` paste. */
+declare const KeyValueInput: import("react").ForwardRefExoticComponent<KeyValueInputProps & import("react").RefAttributes<HTMLDivElement>>;
+export default KeyValueInput;

package/dist/inputs/KeyValueInput.js

@@ -0,0 +1,383 @@
+import { FontFamily } from "../theme/enums.js";
+import { useControlledState } from "../hooks/useControlledState.js";
+import Button, { ButtonSize, ButtonVariant } from "../buttons/Button.js";
+import { FieldContext } from "../hooks/useField.js";
+import { useDevWarning } from "./internal/devWarn.js";
+import { isFilled } from "./internal/predicates.js";
+import { useFieldWiring } from "./internal/fieldWiring.js";
+import Field, { FieldSize } from "./Field.js";
+import { rootStyle, useOwnField } from "./internal/ownField.js";
+import { InputSize, InputVariant } from "./Input.js";
+import TextInput from "./TextInput.js";
+/* empty css                        */
+import { styled } from "@linaria/react";
+import { forwardRef, useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "@linaria/core";
+import { PlusIcon, TrashIcon } from "@phosphor-icons/react";
+//#region src/inputs/KeyValueInput.tsx
+/**
+* Edits a short list of string pairs: HTTP headers for a connector, environment variables for a
+* job, query parameters, metadata labels. Each pair is a row of two mono `TextInput`s (key, value)
+* and a remove button; an "Add" button under the rows appends an empty pair and focuses its key.
+* Pasting several `KEY=value` lines into a key field (a copied `.env` block) fills one row per
+* line. The value is the list of pairs, with `value` / `defaultValue` / `onChange`; every
+* keystroke reports the whole next list.
+*
+* A standalone KeyValueInput with `label` or `error` renders a `Field` around itself; inside a
+* Field the group takes the Field's id and label, and the inner fields are shielded from the
+* Field's context (each gets the description, error and disabled state explicitly). It never
+* validates: duplicate or empty keys are the app's `error`. No 1.x equivalent.
+*
+* SSR: ids come from `useId`; focus moves run in an effect; nothing touches `window` or
+* `document` at module scope.
+*/
+/** Canonical rungs; KeyValueInput supports all five. Every field and button in it uses the rung. */
+var KeyValueInputSize = /* @__PURE__ */ function(KeyValueInputSize) {
+	/** 20px rows, 4px gaps. */
+	KeyValueInputSize["X_SMALL"] = "X_SMALL";
+	/** 24px rows, 4px gaps. */
+	KeyValueInputSize["SMALL"] = "SMALL";
+	/** 32px rows, 8px gaps. The default. */
+	KeyValueInputSize["MEDIUM"] = "MEDIUM";
+	/** 36px rows, 8px gaps. */
+	KeyValueInputSize["LARGE"] = "LARGE";
+	/** 40px rows, 8px gaps. */
+	KeyValueInputSize["X_LARGE"] = "X_LARGE";
+	return KeyValueInputSize;
+}({});
+/** Resting fill of every field (Constitution V-A surface set; the 1.x `InputVariant` members). */
+var KeyValueInputVariant = /* @__PURE__ */ function(KeyValueInputVariant) {
+	/** `background.base` fill. */
+	KeyValueInputVariant["BASE"] = "BASE";
+	/** `background.primary` fill. The default. */
+	KeyValueInputVariant["PRIMARY"] = "PRIMARY";
+	/** `background.secondary` fill. */
+	KeyValueInputVariant["SECONDARY"] = "SECONDARY";
+	/** `background.tertiary` fill. */
+	KeyValueInputVariant["TERTIARY"] = "TERTIARY";
+	return KeyValueInputVariant;
+}({});
+/** The control's width without `fillWidth`: two fields of about the SelectInput width. */
+/** The group: the rows, then the add button, then the live region. */
+var Group = /*#__PURE__*/ styled("div")({
+	name: "Group",
+	class: "gx-KeyValueInput-Group-gofpoog",
+	propsAsIs: false
+});
+/** The rows, stretched to the group's width. */
+var Rows = /*#__PURE__*/ styled("div")({
+	name: "Rows",
+	class: "gx-KeyValueInput-Rows-r1t1496n",
+	propsAsIs: false
+});
+/** One pair: key, value (twice the key's width) and the remove button, aligned across rows. */
+var Row = /*#__PURE__*/ styled("div")({
+	name: "Row",
+	class: "gx-KeyValueInput-Row-rgbwsrt",
+	propsAsIs: false
+});
+/** Holds the key field and listens for a pasted `.env` block (TextInput takes no `onPaste`). */
+var KeyCell = /*#__PURE__*/ styled("div")({
+	name: "KeyCell",
+	class: "gx-KeyValueInput-KeyCell-kiabogb",
+	propsAsIs: false
+});
+/** The polite live region for added and removed rows (`VisuallyHidden` takes no `role`). */
+var StatusRegion = /*#__PURE__*/ styled("span")({
+	name: "StatusRegion",
+	class: "gx-KeyValueInput-StatusRegion-s1j4nof2",
+	propsAsIs: false
+});
+/** One gap per rung, for the rows, the columns and the space before the add button. */
+var KEY_VALUE_INPUT_SIZE_TO_CSS_MAP = {
+	["X_SMALL"]: "gx-KeyValueInput-X_SMALL-x14q2aim",
+	["SMALL"]: "gx-KeyValueInput-SMALL-s1iblfrp",
+	["MEDIUM"]: "gx-KeyValueInput-MEDIUM-mcvz0me",
+	["LARGE"]: "gx-KeyValueInput-LARGE-lxtgl47",
+	["X_LARGE"]: "gx-KeyValueInput-X_LARGE-x1mu5zsx"
+};
+/** Read-only rows have no remove button, so the third column goes. */
+var READ_ONLY_ROW_CSS = "gx-KeyValueInput-READ_ONLY_ROW_CSS-r1lp7xxb";
+/** Stretch to the parent's width (the group, and the `Field` wrapper when there is one). */
+var FILL_WIDTH_CSS = "gx-KeyValueInput-FILL_WIDTH_CSS-flbjeuq";
+/** The fields' rung (identity). */
+var KEY_VALUE_INPUT_SIZE_TO_INPUT_SIZE_MAP = {
+	["X_SMALL"]: InputSize.X_SMALL,
+	["SMALL"]: InputSize.SMALL,
+	["MEDIUM"]: InputSize.MEDIUM,
+	["LARGE"]: InputSize.LARGE,
+	["X_LARGE"]: InputSize.X_LARGE
+};
+/** The fields' fill (identity). */
+var KEY_VALUE_INPUT_VARIANT_TO_INPUT_VARIANT_MAP = {
+	["BASE"]: InputVariant.BASE,
+	["PRIMARY"]: InputVariant.PRIMARY,
+	["SECONDARY"]: InputVariant.SECONDARY,
+	["TERTIARY"]: InputVariant.TERTIARY
+};
+/** The remove and add buttons' rung (identity): the icon-only square is as tall as the fields. */
+var KEY_VALUE_INPUT_SIZE_TO_BUTTON_SIZE_MAP = {
+	["X_SMALL"]: ButtonSize.X_SMALL,
+	["SMALL"]: ButtonSize.SMALL,
+	["MEDIUM"]: ButtonSize.MEDIUM,
+	["LARGE"]: ButtonSize.LARGE,
+	["X_LARGE"]: ButtonSize.X_LARGE
+};
+/** The `Field` a KeyValueInput renders for its own `label` / `error` uses the same rung. */
+var KEY_VALUE_INPUT_SIZE_TO_FIELD_SIZE_MAP = {
+	["X_SMALL"]: FieldSize.X_SMALL,
+	["SMALL"]: FieldSize.SMALL,
+	["MEDIUM"]: FieldSize.MEDIUM,
+	["LARGE"]: FieldSize.LARGE,
+	["X_LARGE"]: FieldSize.X_LARGE
+};
+/** Removes one pair of matching surrounding quotes (`"…"` or `'…'`). */
+function unquote(text) {
+	if (text.length >= 2) {
+		const first = text[0];
+		if ((first === "\"" || first === "'") && text.endsWith(first)) return text.slice(1, -1);
+	}
+	return text;
+}
+/**
+* Parses pasted `.env`-style lines: blank lines and `#` comments are skipped, a leading `export `
+* is dropped, and each line splits at its first `=` (a line without one is a key with an empty
+* value). Not a dotenv implementation.
+*/
+function parseLines(text) {
+	const pairs = [];
+	for (const rawLine of text.split(/\r\n|\r|\n/)) {
+		let line = rawLine.trim();
+		if (line === "" || line.startsWith("#")) continue;
+		if (line.startsWith("export ")) line = line.slice(7).trim();
+		const separator = line.indexOf("=");
+		if (separator === -1) {
+			pairs.push({
+				key: line,
+				value: ""
+			});
+			continue;
+		}
+		pairs.push({
+			key: line.slice(0, separator).trim(),
+			value: unquote(line.slice(separator + 1).trim())
+		});
+	}
+	return pairs;
+}
+/** The group, its rows and the add button, wired to the nearest Field (the input's own or the app's). */
+function KeyValueGroup({ keyValueProps, forwardedRef, isRoot }) {
+	const { value, defaultValue = [], onChange, size = "MEDIUM", variant = "PRIMARY", isGhost = false, label: _label, error, isError = false, isDisabled = false, isReadOnly = false, isRequired = false, fillWidth = false, ariaLabel, id, "aria-describedby": ariaDescribedBy, className, style, ...rest } = keyValueProps;
+	const { field, controlId: groupId, describedBy: fieldDescribedBy, isInvalid, hasName } = useFieldWiring({
+		id,
+		ariaLabel,
+		ariaLabelAttribute: rest["aria-label"],
+		ariaLabelledBy: rest["aria-labelledby"],
+		ariaDescribedBy,
+		error,
+		isError,
+		isRequired
+	});
+	const [pairs, setPairs] = useControlledState({
+		value,
+		defaultValue,
+		onChange
+	});
+	const pairsRef = useRef(pairs);
+	pairsRef.current = pairs;
+	const [announcement, setAnnouncement] = useState("");
+	const keyRefs = useRef([]);
+	const valueRefs = useRef([]);
+	const addRef = useRef(null);
+	const pendingFocusRef = useRef(null);
+	const canEdit = !isDisabled && !isReadOnly;
+	const inputSize = KEY_VALUE_INPUT_SIZE_TO_INPUT_SIZE_MAP[size];
+	const inputVariant = KEY_VALUE_INPUT_VARIANT_TO_INPUT_VARIANT_MAP[variant];
+	const buttonSize = KEY_VALUE_INPUT_SIZE_TO_BUTTON_SIZE_MAP[size];
+	/** Sets the live region; a repeat of the same message is made distinct so it is read again. */
+	const announce = (message) => {
+		setAnnouncement((previous) => previous === message ? `${message} ` : message);
+	};
+	const commit = (next) => {
+		pairsRef.current = next;
+		setPairs(next);
+	};
+	const edit = (index, part, text) => {
+		const current = pairsRef.current;
+		const pair = current[index];
+		if (pair === void 0) return;
+		commit(current.map((item, position) => position === index ? {
+			...pair,
+			[part]: text
+		} : item));
+	};
+	const add = () => {
+		if (!canEdit) return;
+		const next = [...pairsRef.current, {
+			key: "",
+			value: ""
+		}];
+		pendingFocusRef.current = {
+			kind: "key",
+			index: next.length - 1
+		};
+		commit(next);
+		announce("Row added");
+	};
+	const remove = (index) => {
+		if (!canEdit) return;
+		const next = pairsRef.current.filter((_, position) => position !== index);
+		pendingFocusRef.current = index < next.length ? {
+			kind: "key",
+			index
+		} : index > 0 ? {
+			kind: "key",
+			index: index - 1
+		} : { kind: "add" };
+		commit(next);
+		announce("Row removed");
+	};
+	/** A paste with a newline or an `=` into a key field fills rows from its lines. */
+	const handleKeyPaste = (index) => (event) => {
+		if (!canEdit) return;
+		const text = event.clipboardData.getData("text");
+		if (!/[\r\n=]/.test(text)) return;
+		event.preventDefault();
+		const parsed = parseLines(text);
+		if (parsed.length === 0) return;
+		const current = pairsRef.current;
+		commit([
+			...current.slice(0, index),
+			...parsed,
+			...current.slice(index + 1)
+		]);
+		pendingFocusRef.current = {
+			kind: "value",
+			index: index + parsed.length - 1
+		};
+		announce(parsed.length === 1 ? "1 row added" : `${parsed.length} rows added`);
+	};
+	useEffect(() => {
+		const target = pendingFocusRef.current;
+		if (target === null) return;
+		pendingFocusRef.current = null;
+		(target.kind === "add" ? addRef.current : target.kind === "key" ? keyRefs.current[target.index] : valueRefs.current[target.index])?.focus();
+	});
+	useDevWarning(!hasName, "[@galaxy-io/dls] KeyValueInput has no accessible name. Pass `label`, wrap it in a labelled `Field`, or set `ariaLabel`.");
+	const rows = pairs.map((pair, index) => ({
+		pair,
+		index
+	}));
+	return /* @__PURE__ */ jsxs(Group, {
+		...field?.labelId === void 0 ? {} : { "aria-labelledby": field.labelId },
+		...rest,
+		ref: forwardedRef,
+		id: groupId,
+		role: "group",
+		"aria-label": ariaLabel ?? rest["aria-label"],
+		className: cx(KEY_VALUE_INPUT_SIZE_TO_CSS_MAP[size], fillWidth && FILL_WIDTH_CSS, isRoot ? className : void 0),
+		...rootStyle(isRoot, style),
+		children: [/* @__PURE__ */ jsxs(FieldContext.Provider, {
+			value: null,
+			children: [pairs.length > 0 && /* @__PURE__ */ jsx(Rows, { children: rows.map(({ pair, index }) => {
+				const rowNumber = index + 1;
+				return /* @__PURE__ */ jsxs(Row, {
+					className: cx(isReadOnly && READ_ONLY_ROW_CSS),
+					children: [
+						/* @__PURE__ */ jsx(KeyCell, {
+							onPaste: handleKeyPaste(index),
+							children: /* @__PURE__ */ jsx(TextInput, {
+								ref: (element) => {
+									keyRefs.current[index] = element;
+								},
+								value: pair.key,
+								onChange: (text) => edit(index, "key", text),
+								size: inputSize,
+								variant: inputVariant,
+								isGhost,
+								family: FontFamily.MONO,
+								placeholder: "Key",
+								ariaLabel: `Key ${rowNumber}`,
+								isError: isInvalid,
+								isDisabled,
+								isReadOnly,
+								fillWidth: true,
+								...fieldDescribedBy === void 0 ? {} : { "aria-describedby": fieldDescribedBy }
+							})
+						}),
+						/* @__PURE__ */ jsx(TextInput, {
+							ref: (element) => {
+								valueRefs.current[index] = element;
+							},
+							value: pair.value,
+							onChange: (text) => edit(index, "value", text),
+							size: inputSize,
+							variant: inputVariant,
+							isGhost,
+							family: FontFamily.MONO,
+							placeholder: "Value",
+							ariaLabel: `Value ${rowNumber}`,
+							isError: isInvalid,
+							isDisabled,
+							isReadOnly,
+							fillWidth: true,
+							...fieldDescribedBy === void 0 ? {} : { "aria-describedby": fieldDescribedBy }
+						}),
+						!isReadOnly && /* @__PURE__ */ jsx(Button, {
+							variant: ButtonVariant.TERTIARY,
+							size: buttonSize,
+							icon: TrashIcon,
+							ariaLabel: isFilled(pair.key) ? `Remove ${pair.key}` : `Remove row ${rowNumber}`,
+							isDisabled,
+							onClick: () => remove(index)
+						})
+					]
+				}, index);
+			}) }), !isReadOnly && /* @__PURE__ */ jsx(Button, {
+				ref: addRef,
+				variant: ButtonVariant.TERTIARY,
+				size: buttonSize,
+				icon: PlusIcon,
+				label: "Add",
+				isDisabled,
+				onClick: add
+			})]
+		}), /* @__PURE__ */ jsx(StatusRegion, {
+			role: "status",
+			"aria-live": "polite",
+			children: announcement
+		})]
+	});
+}
+/** Editable key/value rows (headers, environment variables) with add, remove and `.env` paste. */
+var KeyValueInput = forwardRef(function KeyValueInput(props, ref) {
+	const { label, error, isRequired = false, size = "MEDIUM", fillWidth = false, id, className, style } = props;
+	const ownField = useOwnField({
+		componentName: "KeyValueInput",
+		label,
+		error,
+		isRequired,
+		size: KEY_VALUE_INPUT_SIZE_TO_FIELD_SIZE_MAP[size],
+		id,
+		className,
+		style,
+		rootClassName: fillWidth && FILL_WIDTH_CSS
+	});
+	if (ownField !== null) return /* @__PURE__ */ jsx(Field, {
+		...ownField,
+		children: /* @__PURE__ */ jsx(KeyValueGroup, {
+			keyValueProps: props,
+			forwardedRef: ref,
+			isRoot: false
+		})
+	});
+	return /* @__PURE__ */ jsx(KeyValueGroup, {
+		keyValueProps: props,
+		forwardedRef: ref,
+		isRoot: true
+	});
+});
+KeyValueInput.displayName = "KeyValueInput";
+//#endregion
+export { KeyValueInputSize, KeyValueInputVariant, KeyValueInput as default };