@salilvnair/dui 1.0.13 → 1.0.14

package/dist/lib/components/input/HighlightedInputView.d.ts

@@ -24,6 +24,17 @@ export interface HighlightedInputViewProps {
     /** Running mock server URLs — shown at the top with a server icon */
     mockServers?: MockServerSuggestion[];
     disabled?: boolean;
+    /**
+     * Hide the value behind dots, with an eye to reveal it.
+     *
+     * Done with `-webkit-text-security` rather than by swapping in a password
+     * input, because swapping the element loses the caret, the undo stack and
+     * the variable tokens — and a token is the thing most worth seeing once you
+     * have revealed it. Masking is presentational here: the text is still the
+     * text, editing still works, and the DOM still holds the real value, which
+     * is exactly as true of `<input type=password>`.
+     */
+    masked?: boolean;
     accentColor?: string;
     /** Falls back to DuiProvider size when omitted. */
     size?: DuiSize;
@@ -34,4 +45,4 @@ export interface HighlightedInputViewProps {
     style?: React.CSSProperties;
     className?: string;
 }
-export declare function HighlightedInputView({ testId, value, onChange, onKeyDown, onBlur, placeholder, suggestions, mockServers, disabled, accentColor, size, height, borderRadius, style, className, }: HighlightedInputViewProps): import("react").JSX.Element;
+export declare function HighlightedInputView({ testId, value, onChange, onKeyDown, onBlur, placeholder, suggestions, mockServers, disabled, masked, accentColor, size, height, borderRadius, style, className, }: HighlightedInputViewProps): import("react").JSX.Element;

package/dist/lib/components/input/KeyValueTableRowView.d.ts

@@ -29,6 +29,16 @@ export interface KeyValueTableRowViewProps {
     };
     /** HTTP header key/value autocomplete — editable mode only */
     autocompleteKeys?: boolean;
+    /**
+     * Draw `{{variable}}` in the value cell as a token, the way a URL bar does.
+     *
+     * Off by default: a plain input is the right thing for a table of ordinary
+     * strings. On, the value cell becomes the same contenteditable editor the
+     * URL bars use — which is the point of it being the same component rather
+     * than a second one that looks similar. A masked or read-only cell stays a
+     * plain input; a secret rendered as readable tokens is not a secret.
+     */
+    highlightVars?: boolean;
     size?: DuiSize;
     accentColor?: string;
     onKeyChange?: (val: string) => void;
@@ -37,4 +47,4 @@ export interface KeyValueTableRowViewProps {
     onEnabledChange?: (enabled: boolean) => void;
     onRemove?: () => void;
 }
-export declare function KeyValueTableRowView({ testId, rowKey, value, description, enabled, readOnly, masked, maskSensitive, deletable, showDescription, placeholder, autocompleteKeys, size, onKeyChange, onValueChange, onDescriptionChange, onEnabledChange, onRemove, }: KeyValueTableRowViewProps): import("react").JSX.Element;
+export declare function KeyValueTableRowView({ testId, rowKey, value, description, enabled, readOnly, highlightVars, masked, maskSensitive, deletable, showDescription, placeholder, autocompleteKeys, size, onKeyChange, onValueChange, onDescriptionChange, onEnabledChange, onRemove, }: KeyValueTableRowViewProps): import("react").JSX.Element;

package/dist/lib/components/input/KeyValueTableView.d.ts

@@ -41,6 +41,8 @@ export interface KeyValueTableViewProps {
         value?: string;
     };
     className?: string;
+    /** Draw `{{variable}}` in every value cell as a token — see KeyValueTableRowView. */
+    highlightVars?: boolean;
     /** Show HTTP header key autocomplete + value suggestions */
     autocompleteKeys?: boolean;
     /** Mask values for known sensitive keys (Authorization, token, etc.) */
@@ -65,4 +67,4 @@ export interface KeyValueTableViewProps {
     /** Called when a deletable pinned row is removed */
     onPinnedRemove?: (id: string) => void;
 }
-export declare function KeyValueTableView({ testId, rows, onChange, showDescription, placeholder, className, autocompleteKeys, maskSensitive, hideToolbar, label, accentColor, toolbarExtra, size, bordered, pinnedTopRows, onPinnedRemove, }: KeyValueTableViewProps): import("react").JSX.Element;
+export declare function KeyValueTableView({ testId, rows, onChange, showDescription, placeholder, className, autocompleteKeys, highlightVars, maskSensitive, hideToolbar, label, accentColor, toolbarExtra, size, bordered, pinnedTopRows, onPinnedRemove, }: KeyValueTableViewProps): import("react").JSX.Element;

package/dist/lib/components/input/url-ghost.d.ts

@@ -0,0 +1,36 @@
+import { Suggested } from './url-suggest';
+/**
+ * The greyed completion drawn after the caret, and the caret tracking it needs.
+ *
+ * Shared by the two inputs that take `suggestions` — SelectTextInputView
+ * (REST, SOAP) and HighlightedInputView (GraphQL, gRPC, MCP, WebSocket, SSE,
+ * Socket.IO, MQTT). They are the same editor twice over: the same token
+ * engine, the same undo stack, the same caret helpers. Writing the completion
+ * into each of them separately would have made it two features that drift.
+ */
+/** Where the caret is, kept in state so suggestions can follow it. */
+export declare function useCaret(editorRef: React.RefObject<HTMLDivElement | null>, initial: number): {
+    caret: number;
+    syncCaret: () => void;
+    setCaret: (n: number) => void;
+};
+export declare function useSuggested(value: string, caret: number, suggestions: string[]): Suggested;
+/**
+ * The completion itself, laid over the editor.
+ *
+ * It draws the whole line — the typed part invisible, the completion greyed —
+ * so the browser's own text layout puts the grey text exactly where the caret
+ * is. Measuring the typed text and offsetting by hand is the usual way to do
+ * this, and it is wrong by a fraction of a pixel per character.
+ *
+ * Every box-model value is passed in by the caller rather than guessed, since
+ * the two hosts size their editors differently; a ghost one pixel out of step
+ * with the real text reads as a rendering fault.
+ */
+export declare function GhostText({ value, ghost, style }: {
+    value: string;
+    ghost: string;
+    style: React.CSSProperties;
+}): import("react").JSX.Element | null;
+/** Tab, or Right at the end of the line — the two keys that mean "take it". */
+export declare function isAcceptGhostKey(e: React.KeyboardEvent): boolean;

package/dist/lib/components/input/url-suggest.d.ts

@@ -0,0 +1,39 @@
+/**
+ * What to suggest for a URL field that is being EDITED, not just started.
+ *
+ * ── The bug ──
+ *
+ * Suggestions only ever appeared when the field was empty. Not by design: the
+ * filter ran `suggestion.includes(wholeValue)`, and the whole value of a field
+ * somebody is editing is almost never a substring of anything in history.
+ *
+ * Take `https://azp.prod.com/xyz/abc`, put the caret after `http` and delete
+ * the `s`. The reader is clearly asking "what else starts like this?" — but
+ * the filter went looking for a history entry containing the entire string,
+ * tail and all, found none, and showed nothing. Clearing the field was the
+ * only way to get a list back, which is how this looked like a rule.
+ *
+ * ── What it does instead ──
+ *
+ * It matches on the text BEFORE THE CARET and ignores the tail. That is the
+ * part the reader has committed to; the tail is what they are in the middle
+ * of replacing. Entries that start with it come first, entries that merely
+ * contain it come after — a prefix match is what somebody typing a URL means,
+ * and a substring match is still worth offering when nothing starts that way.
+ */
+export interface Suggested {
+    /**
+     * The completion to draw greyed after the caret, or '' when there is none.
+     *
+     * Only ever the tail of the FIRST prefix match, so accepting it can never
+     * produce a URL that was not already in history.
+     */
+    ghost: string;
+    /** What the dropdown lists, best match first. */
+    matches: string[];
+}
+/** Does `text` carry `prefix`, ignoring case? Prefix beats substring. */
+export declare function matchRank(text: string, prefix: string): 0 | 1 | -1;
+/** The text the reader has committed to: everything left of the caret. */
+export declare function prefixAt(value: string, caret: number): string;
+export declare function suggestFor(value: string, caret: number, suggestions: string[], limit?: number): Suggested;

package/dist/lib/components/input/url-suggest.test.d.ts

@@ -0,0 +1 @@
+export {};