@salilvnair/dui 1.0.7 → 1.0.8

package/dist/lib/components/display/GroupHeaderView.d.ts

@@ -0,0 +1,28 @@
+import { ReactNode, CSSProperties } from 'react';
+export interface GroupHeaderViewProps {
+    /** The group's name. Set in small caps, because it is a label not a heading. */
+    name: string;
+    /** How many are in it. */
+    count?: number | string;
+    /**
+     * What the group is worth knowing at a glance — a chip, a count of the ones
+     * that need attention.
+     *
+     * Sits after the rule, hard right, so a column of group headers puts every
+     * summary in the same place and the eye can run straight down them.
+     */
+    summary?: ReactNode;
+    /** Tints the name — for the pile nobody owns. */
+    tone?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * The line above a group of things.
+ *
+ * Name, size, a rule that eats the remaining width, and the one fact about the
+ * group worth carrying. The rule is what makes a stack of these read as
+ * sections rather than as a list with bold entries in it, and it costs nothing
+ * — it is the leftover space, drawn.
+ */
+export declare function GroupHeaderView({ name, count, summary, tone, className, style, }: GroupHeaderViewProps): import("react").JSX.Element;

package/dist/lib/components/display/IssueCardSkeletonView.d.ts

@@ -0,0 +1,28 @@
+import { CSSProperties } from 'react';
+export interface IssueCardSkeletonViewProps {
+    /** Leave room for the evidence strip, when the board shows screenshots. */
+    media?: boolean;
+    /**
+     * How long the title bar is, 0–1.
+     *
+     * Varied by the caller across a grid so the placeholder reads as a list of
+     * different things rather than a printed pattern — a wall of identical bars
+     * looks like a rendering bug, which is the opposite of reassuring.
+     */
+    titleFill?: number;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * An issue card that has not arrived yet.
+ *
+ * Deliberately the twin of IssueCardView: same padding, radius, gaps and row
+ * order, so the real card lands exactly where the placeholder stood and the
+ * grid does not jump under a cursor already on its way to a click.
+ *
+ * A skeleton rather than a spinner because the shape is the information — a
+ * reader can see a board is coming, roughly how much of it, and start moving
+ * before the data lands. A centred spinner says only "wait", and a centred
+ * panel that takes over the whole view says "something is wrong".
+ */
+export declare function IssueCardSkeletonView({ media, titleFill, className, style, }: IssueCardSkeletonViewProps): import("react").JSX.Element;

package/dist/lib/components/display/IssueCardView.d.ts

@@ -0,0 +1,40 @@
+import { ReactNode, CSSProperties } from 'react';
+export interface IssueCardViewProps {
+    /** The identifier, shown as given — `#41`, `PROJ-8`. */
+    reference?: string;
+    title: string;
+    /**
+     * The chips beside the reference — module, environment, whatever classifies
+     * this one. Rendered by the caller so it can use the same chip component the
+     * rest of the screen uses.
+     */
+    chips?: ReactNode;
+    /** Evidence: a screenshot strip, a thumbnail. Sits under the title. */
+    media?: ReactNode;
+    /** The left of the footer: an avatar, or the word for having no owner. */
+    owner?: ReactNode;
+    /** Beside the owner: priority, state. */
+    mark?: ReactNode;
+    /** The right of the footer: age, comment count, a stale chip. */
+    meta?: ReactNode;
+    /** Lift the card — selected, or dragged over. */
+    selected?: boolean;
+    accentColor?: string;
+    onClick?: () => void;
+    tooltip?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * One tracked item on a board — an issue, a ticket.
+ *
+ * The order is the whole component: reference and classification, then the
+ * sentence, then the evidence, then who and when. A reader who has scanned one
+ * card knows where to look on every other one, which is the only reason a board
+ * beats a table.
+ *
+ * The title is never truncated. A card whose sentence ends in an ellipsis makes
+ * you open the item to find out whether you cared, which is precisely the work
+ * the board existed to save; cards in a row may be different heights instead.
+ */
+export declare function IssueCardView({ reference, title, chips, media, owner, mark, meta, selected, accentColor, onClick, tooltip, className, style, }: IssueCardViewProps): import("react").JSX.Element;

package/dist/lib/components/display/LaneChartView.d.ts

@@ -0,0 +1,46 @@
+import { CSSProperties } from 'react';
+import { Span } from './lane-scale';
+export interface LaneSeries {
+    id: string;
+    label: string;
+    points: {
+        at: number;
+        value: number;
+    }[];
+    color?: string;
+    /** Fill under the line. Off for a series read as a level rather than a volume. */
+    filled?: boolean;
+    /** Right-hand readout — usually the latest or peak value, already formatted. */
+    readout?: string;
+    /** Draw as ticks rising from the baseline instead of a line: events, not a level. */
+    kind?: 'line' | 'ticks';
+}
+export interface LaneMarker {
+    at: number;
+    label?: string;
+    color?: string;
+}
+export interface LaneChartViewProps {
+    series: LaneSeries[];
+    markers?: LaneMarker[];
+    laneHeight?: number;
+    /** Clamp the axis instead of deriving it from the data. */
+    window?: Span;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * Several measurements over one time axis.
+ *
+ * Telemetry read as a stack of lanes rather than one chart with many lines:
+ * heap in megabytes and CPU in percent share no y scale, and overlaying them
+ * forces either two axes or a normalisation that makes both meaningless.
+ * Separate lanes keep each series in its own units and still let the eye run
+ * a vertical line down the stack, which is the actual question — what else was
+ * happening when this happened.
+ *
+ * The axis is shared and computed across every series, for the same reason the
+ * swimlane's is: lanes scaled independently put simultaneous events in
+ * different columns.
+ */
+export declare function LaneChartView({ series, markers, laneHeight, window: fixedWindow, className, style, }: LaneChartViewProps): import("react").JSX.Element;

package/dist/lib/components/display/LineDiffView.d.ts

@@ -0,0 +1,25 @@
+import { CSSProperties } from 'react';
+export interface LineDiffViewProps {
+    left: string;
+    right: string;
+    leftLabel?: string;
+    rightLabel?: string;
+    /** Shown beside the label — e.g. a filename, or "not present". */
+    leftNote?: string;
+    rightNote?: string;
+    /** A fixed height, or omit to fill a flex parent. */
+    height?: number | string;
+    /** Adds a "+n / −n" tally to each header. */
+    showTally?: boolean;
+    /**
+     * Colour of the two header labels.
+     *
+     * Defaults to error on the left and success on the right, which is the
+     * convention every diff uses: what left had and right does not is a removal.
+     */
+    leftTone?: string;
+    rightTone?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export declare function LineDiffView({ left, right, leftLabel, rightLabel, leftNote, rightNote, height, showTally, leftTone, rightTone, className, style, }: LineDiffViewProps): import("react").JSX.Element;

package/dist/lib/components/display/PriorityMarkView.d.ts

@@ -0,0 +1,20 @@
+import { CSSProperties } from 'react';
+export type PriorityMarkLevel = 'urgent' | 'high' | 'medium' | 'low' | 'none';
+export interface PriorityMarkViewProps {
+    level: PriorityMarkLevel;
+    /** Show the word as well as the ring. On by default. */
+    showLabel?: boolean;
+    /** Override the word — for a tracker that calls Urgent something else. */
+    label?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * A priority, as a ring and a word.
+ *
+ * A ring rather than a filled dot, because status is already a filled dot
+ * everywhere else and the two sit side by side on the same row — two solid
+ * dots in different palettes read as one broken thing. The ring is the whole
+ * distinction, and it survives being 7px.
+ */
+export declare function PriorityMarkView({ level, showLabel, label, className, style, }: PriorityMarkViewProps): import("react").JSX.Element;

package/dist/lib/components/display/SetupOptionView.d.ts

@@ -0,0 +1,56 @@
+import { ReactNode, CSSProperties } from 'react';
+export interface SetupOptionViewProps {
+    /** The route's name — `winget`, `Homebrew`, `Sign in with a browser`. */
+    title: string;
+    /** A short marker beside the title: `recommended`, `apt`, `needs admin`. */
+    tag?: string;
+    /**
+     * Lift it as the one to pick.
+     *
+     * Exactly one option in a set should carry this. A screen where every card is
+     * highlighted has no recommendation on it, only decoration.
+     */
+    recommended?: boolean;
+    /**
+     * The command to run, shown with a copy button — never a button that runs it.
+     *
+     * Installing software and authenticating are the reader's actions. A one-click
+     * "do it for me" here would be running an installer, or driving a credential
+     * flow, on somebody's behalf.
+     */
+    command?: string;
+    /** The language for the command block. Shell by default. */
+    language?: string;
+    /**
+     * What a reader needs in order to choose THIS one over the one beside it —
+     * not what the command does, which the command already says.
+     */
+    note?: ReactNode;
+    /** A control in the header: a link out, a picker, a button. */
+    action?: ReactNode;
+    /**
+     * The route's own controls, where a command is not the thing to show — a
+     * field to type into, a list to choose from.
+     *
+     * Sits where the command would, so a set of cards mixing the two still lines
+     * up: name, the thing you interact with, then the one line about when to
+     * pick it.
+     */
+    children?: ReactNode;
+    accentColor?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * One way to get something set up, among several.
+ *
+ * The shape every install or sign-in screen converges on: a name, the exact
+ * thing to run, and one line on when to pick it. Fixing that order in a
+ * component keeps a grid of routes scannable — a reader compares the same part
+ * of each card rather than re-reading whole paragraphs to find the command.
+ *
+ * The card never performs the route itself. It shows what to run and lets the
+ * reader run it, which is the only honest arrangement for actions that install
+ * software or reach a credential store.
+ */
+export declare function SetupOptionView({ title, tag, recommended, command, language, note, action, children, accentColor, className, style, }: SetupOptionViewProps): import("react").JSX.Element;

package/dist/lib/components/display/SunburstView.d.ts

@@ -0,0 +1,32 @@
+import { CSSProperties } from 'react';
+import { HierarchyNode, SunburstSlice } from './hierarchy-layout';
+export interface SunburstViewProps {
+    root: HierarchyNode;
+    size?: number;
+    /** Rings drawn outward from the centre. */
+    maxDepth?: number;
+    /** Slices thinner than this share of the whole are dropped. */
+    minShare?: number;
+    accentColor?: string;
+    /** Format the value for the centre label and tooltips. */
+    format?: (value: number) => string;
+    /** Shown in the hole when nothing is hovered. */
+    centerLabel?: string;
+    onSelect?: (slice: SunburstSlice) => void;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * A hierarchy as concentric rings.
+ *
+ * The profiler's idiom for "what is big and what is inside it": each ring is a
+ * level, each slice is sized by its share, and a child sits inside the arc of
+ * its parent. Reading outward from the centre follows containment, which is
+ * what a treemap makes you infer from adjacency instead.
+ *
+ * Hue is derived from depth and position rather than from a palette, so a
+ * hierarchy of any width gets distinguishable neighbours without the caller
+ * supplying colours. Lightness falls with depth, which is what makes the
+ * nesting legible at a glance — outer rings recede.
+ */
+export declare function SunburstView({ root, size, maxDepth, minShare, accentColor, format, centerLabel, onSelect, className, style, }: SunburstViewProps): import("react").JSX.Element;

package/dist/lib/components/display/SwimlaneChartView.d.ts

@@ -0,0 +1,48 @@
+import { CSSProperties } from 'react';
+import { Span } from './lane-scale';
+export interface SwimlaneSegment extends Span {
+    /** What state this stretch was in. Drives the colour via `colors`. */
+    state: string;
+    /** Anything the caller wants back on hover or click. */
+    meta?: unknown;
+}
+export interface SwimlaneRow {
+    id: string;
+    label: string;
+    segments: SwimlaneSegment[];
+}
+export interface SwimlaneMarker {
+    at: number;
+    label?: string;
+    color?: string;
+}
+export interface SwimlaneChartViewProps {
+    rows: SwimlaneRow[];
+    /** state → colour. A state with no entry is drawn in the muted default. */
+    colors: Record<string, string>;
+    /** Vertical marks across every lane — a dump taken, a GC, a deploy. */
+    markers?: SwimlaneMarker[];
+    rowHeight?: number;
+    /** Width of the label gutter. */
+    labelWidth?: number;
+    /** Clamp the axis instead of deriving it from the data. */
+    window?: Span;
+    format?: (span: Span) => string;
+    onSelect?: (row: SwimlaneRow, segment: SwimlaneSegment) => void;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * Entities on a shared timeline, coloured by what they were doing.
+ *
+ * Threads by state, connections by lifetime, pods by phase — the shape is the
+ * same whenever the question is "what was each of these doing, and did they do
+ * it at the same time". The vertical alignment IS the information: three rows
+ * turning red within the same 40ms is a lock, and no table of states will ever
+ * show that.
+ *
+ * Every lane shares one axis, computed across all rows. Scaling lanes
+ * independently would put simultaneous events in different columns, which
+ * destroys the only thing this chart is for.
+ */
+export declare function SwimlaneChartView({ rows, colors, markers, rowHeight, labelWidth, window: fixedWindow, format, onSelect, className, style, }: SwimlaneChartViewProps): import("react").JSX.Element;

package/dist/lib/components/display/TableSkeletonView.d.ts

@@ -0,0 +1,34 @@
+import { CSSProperties } from 'react';
+export interface TableSkeletonColumn {
+    /**
+     * A number is a fixed pixel width; a string is used as-is.
+     *
+     * `'flex'` takes the remaining space, which is how the name column in a file
+     * list behaves — the one column whose width is not known in advance.
+     */
+    width: number | string | 'flex';
+    /** Draw this cell's bar shorter than its column, as real content usually is. */
+    fill?: number;
+    align?: 'left' | 'right';
+}
+export interface TableSkeletonViewProps {
+    columns: TableSkeletonColumn[];
+    /** Height of one row, matching the table this stands in for. */
+    rowHeight?: number;
+    /** Fixed row count. Omit to fill the available height. */
+    rows?: number;
+    /** A small square before the first column — a file or status icon. */
+    leadingIcon?: boolean;
+    /**
+     * Fraction of the measured height to fill. Default 1.
+     *
+     * A placeholder that reaches the last pixel of the panel is claiming the
+     * list is exactly as long as the window, and when the real rows turn out to
+     * be fewer the whole thing appears to collapse. Filling part of the space
+     * says "a list is coming" without promising how much of one.
+     */
+    fill?: number;
+    className?: string;
+    style?: CSSProperties;
+}
+export declare function TableSkeletonView({ columns, rowHeight, rows, leadingIcon, fill, className, style, }: TableSkeletonViewProps): import("react").JSX.Element;

package/dist/lib/components/display/hierarchy-layout.d.ts

@@ -0,0 +1,114 @@
+/**
+ * Layout maths for the hierarchical charts.
+ *
+ * Kept apart from the components because this is the part that can be wrong in
+ * ways nobody sees: an arc that is two degrees short, a row whose widths do not
+ * sum to the parent, a depth that quietly drops the deepest frames. A chart
+ * that renders is not a chart that is correct, so the arithmetic is separated
+ * out where it can be checked.
+ */
+/** A node in anything hierarchical — a heap, a stack, a filesystem. */
+export interface HierarchyNode {
+    name: string;
+    /** Own size. Ignored when there are children — the parent is their sum. */
+    value?: number;
+    children?: HierarchyNode[];
+    /** Anything the caller wants back on the laid-out slice. */
+    meta?: unknown;
+}
+/** One laid-out ring segment. Angles are radians, clockwise from 12 o'clock. */
+export interface SunburstSlice {
+    name: string;
+    value: number;
+    depth: number;
+    startAngle: number;
+    endAngle: number;
+    /** Share of the whole, 0–1. Useful for labelling and for hiding slivers. */
+    share: number;
+    meta?: unknown;
+}
+/** One laid-out flame-graph cell. x and width are fractions of the total, 0–1. */
+export interface FlameCell {
+    name: string;
+    value: number;
+    depth: number;
+    x: number;
+    width: number;
+    meta?: unknown;
+}
+/**
+ * A node's total, computed once.
+ *
+ * A leaf is its own value; a parent is the sum of its children, and its own
+ * `value` is ignored rather than added. Adding both is the classic way to get
+ * a chart whose slices exceed the circle: every level double-counts, and the
+ * error compounds with depth so it looks fine at the top and absurd at the
+ * bottom.
+ */
+export declare function totalOf(node: HierarchyNode): number;
+/**
+ * Lay a hierarchy out as concentric rings.
+ *
+ * The root occupies the full circle and is not emitted — it is the hole in the
+ * middle, and drawing it would put a disc over the labels. Children divide
+ * their parent's arc in the order given, so a caller that wants them biggest
+ * first sorts before calling; this does not reorder, because for a stack the
+ * order IS the meaning.
+ *
+ * `minShare` drops slices too thin to see. They are dropped rather than
+ * merged into a sibling, and their arc is left empty: a "other" wedge invents
+ * a thing that is not in the data, and stretching the survivors to fill the
+ * gap would misstate every remaining share.
+ */
+export declare function sunburstLayout(root: HierarchyNode, opts?: {
+    maxDepth?: number;
+    minShare?: number;
+}): SunburstSlice[];
+/**
+ * Lay a hierarchy out as a flame graph.
+ *
+ * Same arithmetic as the sunburst, unrolled: each level is a row, a child's
+ * width is its share of the parent's width, and children sit directly beneath
+ * the parent they came from. The root is emitted here — in a flame graph it is
+ * the base everything stands on, and leaving it out makes the first real row
+ * look like it floats.
+ */
+export declare function flameLayout(root: HierarchyNode, opts?: {
+    maxDepth?: number;
+    minWidth?: number;
+}): FlameCell[];
+/** One laid-out donut segment. */
+export interface DonutSlice {
+    name: string;
+    value: number;
+    startAngle: number;
+    endAngle: number;
+    share: number;
+    meta?: unknown;
+}
+/**
+ * A single ring, with the tail rolled up.
+ *
+ * Unlike the sunburst this DOES gather what it drops, into an explicit
+ * "other" slice — a flat breakdown of a whole is read as a whole, and a
+ * missing wedge there reads as a rendering bug rather than as a decision.
+ * The rolled-up slice is named, so nobody mistakes it for a real category.
+ */
+export declare function donutLayout(items: {
+    name: string;
+    value: number;
+    meta?: unknown;
+}[], opts?: {
+    maxSlices?: number;
+    otherLabel?: string;
+}): DonutSlice[];
+/**
+ * An SVG arc path for a ring segment.
+ *
+ * Written out rather than pulled from a library because it is twenty lines and
+ * the alternative is a dependency in a component library. The full-circle case
+ * is special: an arc from an angle back to the same angle draws nothing, so a
+ * lone 100% slice would vanish — which is exactly the case a donut of one
+ * dominant thing produces.
+ */
+export declare function arcPath(cx: number, cy: number, rInner: number, rOuter: number, startAngle: number, endAngle: number): string;

package/dist/lib/components/display/hierarchy-layout.test.d.ts

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

package/dist/lib/components/display/lane-scale.d.ts

@@ -0,0 +1,67 @@
+/**
+ * Time-to-pixel maths for the lane charts.
+ *
+ * Separated for the same reason as the hierarchy layout: a chart that renders
+ * is not a chart that is correct. A segment one pixel wide when it should be
+ * forty, a lane whose last event falls off the right edge, two lanes that
+ * disagree about where "now" is — all of them look like a drawing and none of
+ * them look like a bug.
+ */
+export interface Span {
+    /** Start, in whatever unit the caller is using. Milliseconds, usually. */
+    from: number;
+    to: number;
+}
+/** A span placed on the axis, as fractions of the width. */
+export interface PlacedSpan {
+    x: number;
+    width: number;
+    /** True when the span was cut by the window rather than ending inside it. */
+    clippedStart: boolean;
+    clippedEnd: boolean;
+}
+/**
+ * The window every lane shares.
+ *
+ * Computed once from all lanes rather than per lane, because a shared axis is
+ * the entire point: two lanes scaled independently put simultaneous events in
+ * different places, which is worse than not drawing them at all.
+ */
+export declare function windowOf(spans: Span[]): Span | null;
+/**
+ * Place a span on the axis, clipped to the window.
+ *
+ * Returns null when the span is entirely outside, so a caller can drop it
+ * rather than draw a zero-width rectangle at the edge — which reads as an
+ * event that happened at the boundary and did not.
+ */
+export declare function place(span: Span, win: Span): PlacedSpan | null;
+/** A single instant on the axis, for a marker. */
+export declare function placeAt(at: number, win: Span): number | null;
+/**
+ * A polyline through a series, in fractions of width and height.
+ *
+ * y is inverted here — 0 is the top in screen space and the highest value
+ * should be highest on screen. Doing that at the call site is how a chart ends
+ * up upside down in one lane and not the others.
+ */
+export declare function polyline(points: {
+    at: number;
+    value: number;
+}[], win: Span, opts?: {
+    min?: number;
+    max?: number;
+}): {
+    x: number;
+    y: number;
+}[];
+/** An SVG path for a polyline already in fractions, scaled to a box. */
+export declare function pathFor(pts: {
+    x: number;
+    y: number;
+}[], w: number, h: number): string;
+/** The same polyline closed to the baseline, for an area fill. */
+export declare function areaFor(pts: {
+    x: number;
+    y: number;
+}[], w: number, h: number): string;

package/dist/lib/components/display/lane-scale.test.d.ts

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

package/dist/lib/components/display/line-diff.d.ts

@@ -0,0 +1,42 @@
+/**
+ * Line diff by longest common subsequence.
+ *
+ * ── Why LCS and not a line-by-line walk ──
+ *
+ * Two versions of the same text usually differ by an inserted line, and a
+ * positional comparison reports every line after the insertion as changed —
+ * which is technically true and useless. LCS finds the longest run of lines
+ * both sides agree on and marks only what is genuinely outside it, so one
+ * added line reads as one added line.
+ *
+ * ── The size guard ──
+ *
+ * The table is O(n·m) in memory. A pair of 5,000-line files is 25 million
+ * cells, which is a frozen tab rather than a diff. Past the cap the two sides
+ * are emitted whole — every line of the left as removed, every line of the
+ * right as added — which is honest about being a fallback rather than quietly
+ * returning a wrong-but-plausible diff.
+ */
+export type DiffOp = 'same' | 'add' | 'remove';
+export interface DiffLine {
+    op: DiffOp;
+    /** 1-based line number on the left, or null for an added line. */
+    leftLine: number | null;
+    /** 1-based line number on the right, or null for a removed line. */
+    rightLine: number | null;
+    text: string;
+}
+/**
+ * Compare two texts line by line.
+ *
+ * Trailing whitespace is ignored when deciding whether two lines match — a
+ * file that differs only in trailing spaces has not changed — but the text
+ * returned is the original, so the diff shows what is actually there.
+ */
+export declare function diffLines(left: string, right: string): DiffLine[];
+export interface DiffTally {
+    added: number;
+    removed: number;
+    same: number;
+}
+export declare function tallyDiff(lines: DiffLine[]): DiffTally;

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

@@ -1,6 +1,15 @@
 import { CSSProperties } from 'react';
 import { DuiSize } from '../../core/DuiTypes';
 export interface AvatarUploadViewProps {
+    /**
+     * A stable hook for tests and automation.
+     *
+     * Lands on this component's root element as `data-testid`. Worth setting on
+     * anything a test drives: several dui inputs render a `contenteditable` div
+     * with a decorative placeholder span, which neither `getByPlaceholder` nor
+     * `getByRole` reliably finds.
+     */
+    testId?: string;
     /** Preview image URL, or null/undefined for the empty state. */
     src?: string | null;
     onFileSelected: (file: File) => void;
@@ -11,4 +20,4 @@ export interface AvatarUploadViewProps {
     className?: string;
     style?: CSSProperties;
 }
-export declare function AvatarUploadView({ src, onFileSelected, initials, disabled, size, color, className, style, }: AvatarUploadViewProps): import("react").JSX.Element;
+export declare function AvatarUploadView({ testId, src, onFileSelected, initials, disabled, size, color, className, style, }: AvatarUploadViewProps): import("react").JSX.Element;

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

@@ -5,6 +5,15 @@ export type CalendarRangeStyle = 'tint' | 'block';
 /** ISO `YYYY-MM-DD` date string. */
 export type IsoDate = string;
 export interface CalendarViewProps {
+    /**
+     * A stable hook for tests and automation.
+     *
+     * Lands on this component's root element as `data-testid`. Worth setting on
+     * anything a test drives: several dui inputs render a `contenteditable` div
+     * with a decorative placeholder span, which neither `getByPlaceholder` nor
+     * `getByRole` reliably finds.
+     */
+    testId?: string;
     mode?: CalendarMode;
     /** `single`: IsoDate | null. `range`: [IsoDate | null, IsoDate | null]. `multi`: IsoDate[]. */
     value: IsoDate | null | [IsoDate | null, IsoDate | null] | IsoDate[];
@@ -22,4 +31,4 @@ export interface CalendarViewProps {
     className?: string;
     style?: React.CSSProperties;
 }
-export declare function CalendarView({ mode, value, onChange, minDate, maxDate, disabledDates, rangeStyle, size, width, borderRadius, color, className, style, }: CalendarViewProps): import("react").JSX.Element;
+export declare function CalendarView({ testId, mode, value, onChange, minDate, maxDate, disabledDates, rangeStyle, size, width, borderRadius, color, className, style, }: CalendarViewProps): import("react").JSX.Element;

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

@@ -6,6 +6,15 @@ export interface CascaderOption {
     children?: CascaderOption[];
 }
 export interface CascaderViewProps {
+    /**
+     * A stable hook for tests and automation.
+     *
+     * Lands on this component's root element as `data-testid`. Worth setting on
+     * anything a test drives: several dui inputs render a `contenteditable` div
+     * with a decorative placeholder span, which neither `getByPlaceholder` nor
+     * `getByRole` reliably finds.
+     */
+    testId?: string;
     options: CascaderOption[];
     /** Selected path, e.g. ['us', 'ca', 'sf']. */
     value: string[];
@@ -20,4 +29,4 @@ export interface CascaderViewProps {
     style?: CSSProperties;
 }
 /** Multi-level cascading select — region/category trees. */
-export declare function CascaderView({ options, value, onChange, placeholder, disabled, size, width, borderRadius, color, className, style, }: CascaderViewProps): import("react").JSX.Element;
+export declare function CascaderView({ testId, options, value, onChange, placeholder, disabled, size, width, borderRadius, color, className, style, }: CascaderViewProps): import("react").JSX.Element;