@pitchfork-ui/elements 0.0.0-stage → 0.1.0

package/dist/types/components/pf-tab/pf-tab.d.ts

@@ -0,0 +1,83 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import type { PfTabsSize, PfTabsVariant } from '../pf-tabs/pf-tabs';
+export type PfTabPlacement = 'start' | 'end';
+/**
+ * One tab inside a `pf-tabs`.
+ *
+ * It only reports that it was chosen; the group owns the selection, the single
+ * tab stop and the id wiring — the same division as `pf-radio-group` with its
+ * radios and `pf-select` with its options. The group writes `selected`,
+ * `variant`, `size` and `full-width` back onto it, so the stylesheet has
+ * reflected attributes to select on without the tab knowing anything about its
+ * container.
+ *
+ * The host is the `tab` itself rather than a wrapper around a button, so it is
+ * the element the group focuses and the one `aria-controls` points from.
+ *
+ * @slot - the tab's label.
+ * @part label - the label's box.
+ * @part icon - the decorative icon, when `icon` is set.
+ * @part count - the count badge, when `count` is set.
+ */
+export declare class PfTab {
+    el: HTMLElement;
+    /**
+     * Identifies the tab, and pairs it with the `pf-tab-panel` carrying the same
+     * value.
+     *
+     * Reflected because the generated bindings set props as *properties*: an
+     * unreflected prop leaves no attribute, and anything selecting on one — a
+     * consumer's stylesheet, or a test — finds nothing.
+     */
+    value: string;
+    /** Reflected; the stylesheet and the group's own filtering both read it. */
+    disabled: boolean;
+    /** Set by the group. Reflected, so the stylesheet can mark the tab. */
+    selected: boolean;
+    /** Set by the group from its own `variant`. Reflected for the stylesheet. */
+    variant: PfTabsVariant;
+    /** Set by the group from its own `size`. Reflected for the stylesheet. */
+    size: PfTabsSize;
+    /** Set by the group from its own `fullWidth`. Reflected for the stylesheet. */
+    fullWidth: boolean;
+    /** A decorative icon's name, from the same registry as `pf-icon`. */
+    icon?: string;
+    /** Which side of the label the icon sits on. */
+    iconPlacement: PfTabPlacement;
+    /**
+     * A count rendered as a badge beside the label (GitHub-style, "Issues 12").
+     * It is left in the tab's accessible name, so a screen reader announces it.
+     * `0` shows a zero; omitting the prop shows no badge at all.
+     */
+    count?: number;
+    /** Which side of the label the count badge sits on. */
+    badgePlacement: PfTabPlacement;
+    /** Asks the group to select this tab. The group decides. */
+    pfTabSelect: EventEmitter<{
+        value: string;
+    }>;
+    /**
+     * Puts itself in the group's `tab` slot.
+     *
+     * So that a consumer can write one `pf-tab` and one `pf-tab-panel` per item
+     * — interleaved, which is what a loop over data produces — and still have
+     * the tabs land in the strip and the panels in the stack below it. A slot
+     * the consumer set themselves is left alone, so the explicit spelling keeps
+     * working.
+     *
+     * Assigning `slot` moves the node between slots, which fires `slotchange` on
+     * both; writing the same value again is not a mutation, so this does not
+     * loop.
+     */
+    connectedCallback(): void;
+    handleClick(event: MouseEvent): void;
+    /**
+     * Enter and Space select, as they do on a tab. The arrows are the group's:
+     * only it knows the other tabs.
+     *
+     * `preventDefault` because the host is a focusable element rather than a
+     * button, so Space would scroll the page instead.
+     */
+    handleKeyDown(event: KeyboardEvent): void;
+    render(): any;
+}

package/dist/types/components/pf-tab-panel/pf-tab-panel.d.ts

@@ -0,0 +1,24 @@
+/**
+ * One panel inside a `pf-tabs`, shown when the `pf-tab` carrying the same
+ * `value` is selected.
+ *
+ * A sibling of its tab rather than a child of it, so that both live in the
+ * consumer's tree: that is what lets the group point `aria-controls` at this
+ * panel and `aria-labelledby` back at the tab, since a same-root IDREF is the
+ * one that resolves.
+ *
+ * @slot - the panel's content.
+ */
+export declare class PfTabPanel {
+    /**
+     * Pairs the panel with its tab.
+     *
+     * Reflected because the generated bindings set props as properties, so
+     * without it a consumer selecting `pf-tab-panel[value="..."]` in a React or
+     * Angular app finds nothing. The group reads the property.
+     */
+    value: string;
+    /** Set by the group: whether this is the panel on show. Reflected. */
+    active: boolean;
+    render(): any;
+}

package/dist/types/components/pf-table/pf-table.d.ts

@@ -0,0 +1,76 @@
+import { type SortDirection, type SortState } from '@pitchfork-ui/core';
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * A table over `pf-table-row` and `pf-table-cell` children.
+ *
+ * **It reports a sort rather than performing one.** The rows are the
+ * consumer's — they wrote the loop — and reordering them would mean moving
+ * elements in their DOM, which their framework would undo on its next render
+ * and which would break its reconciliation on the way. So this element owns
+ * the header buttons, `aria-sort` and the indicator, and emits `pfSortChange`
+ * for the consumer to sort their own data with. `compareSortValues` and
+ * `sortRowsBy` are in core precisely so that the order they produce matches
+ * the React `Table`, which does sort for itself.
+ *
+ * The layout is CSS tables rather than a grid, which is what lets a row be a
+ * box: a grid needs its rows to be `display: contents` for the cells to line
+ * up in columns, and an element with no box takes no `:hover` and no
+ * background — so striping and row hover would both have to be pushed down in
+ * JS. `display: table-row` gives them for nothing, and column widths size
+ * themselves.
+ *
+ * @slot caption - a heading above the table.
+ * @slot - the `pf-table-row` children.
+ * @slot empty - what to show when there are no body rows.
+ * @part caption - the caption's box.
+ * @part table - the table itself.
+ * @part empty - the box holding the empty slot.
+ */
+export declare class PfTable {
+    el: HTMLElement;
+    /** Tighter rows. Reflected, and bridged down to the cells' padding. */
+    dense: boolean;
+    /** Shade every other body row. Reflected, and bridged down. */
+    striped: boolean;
+    /** Shade the row under the pointer. Reflected, and bridged down. */
+    hoverable: boolean;
+    /** Keep the header visible while the body scrolls. Reflected and bridged. */
+    stickyHeader: boolean;
+    /** The column being sorted on, by its `sort-key`. */
+    sortKey?: string;
+    /** Which way that column is sorted. */
+    sortDirection: SortDirection;
+    /** The table's accessible name, for a table whose caption is not enough. */
+    label?: string;
+    /**
+     * Fires when a header is clicked, with the sort the table has moved to.
+     * Sorting the rows is the consumer's to do.
+     */
+    pfSortChange: EventEmitter<SortState>;
+    /** Whether there are any body rows, which decides the empty state. */
+    isEmpty: boolean;
+    /**
+     * Whether anything is slotted into the caption, which decides whether its
+     * box is drawn. Asked in JS because a box around a slot cannot be collapsed
+     * from CSS: `:has(slot)` always matches, since the slot is itself a child.
+     */
+    hasCaption: boolean;
+    /** The light DOM is readable here, so first paint is already right. */
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    handleSortChange(): void;
+    /** Re-reads the rows, for a consumer who changed one through a property. */
+    refresh(): Promise<void>;
+    /** Direct children only: a nested table owns its own rows. */
+    private get rows();
+    private isHead;
+    private sync;
+    /**
+     * A header asking to sort. The table decides which way — core's rule: a new
+     * column starts ascending and the current one turns round — and reports it.
+     */
+    handleSort(event: CustomEvent<{
+        key: string;
+    }>): void;
+    render(): any;
+}

package/dist/types/components/pf-table-cell/pf-table-cell.d.ts

@@ -0,0 +1,43 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export type PfTableCellAlign = 'left' | 'center' | 'right';
+/**
+ * One cell of a `pf-table` row.
+ *
+ * A header cell carries `columnheader` rather than `cell`, which the row tells
+ * it; `sortable` turns the label into a button that asks the table to sort.
+ * The table answers by writing `sort` back, which is what `aria-sort` and the
+ * indicator read — the ask and the answer kept apart, as everywhere else here.
+ *
+ * @slot - the cell's content.
+ * @part sort - the header's sort button, when `sortable` is set.
+ * @part indicator - the sort indicator inside that button.
+ */
+export declare class PfTableCell {
+    /** Set by the row: a header cell. Reflected, so the stylesheet reads it. */
+    head: boolean;
+    /** Set by the row: a cell in the last body row, which drops its rule. */
+    last: boolean;
+    /** Which way the content sits. Reflected for the stylesheet. */
+    align: PfTableCellAlign;
+    /** A column width, as any CSS length. Only a header cell's is read. */
+    width?: string;
+    /**
+     * Identifies the column in the table's sort state. A header cell with one
+     * and `sortable` set is the only thing that can be sorted on.
+     *
+     * Reflected because the generated bindings set props as properties, so
+     * without it a consumer selecting `pf-table-cell[sort-key="..."]` finds
+     * nothing. The table reads the property.
+     */
+    sortKey?: string;
+    /** Offer to sort on this column. Reflected for the stylesheet. */
+    sortable: boolean;
+    /** Set by the table: how this column is sorted, if it is. */
+    sort: 'ascending' | 'descending' | 'none';
+    /** Asks the table to sort on this column. The table decides which way. */
+    pfTableSort: EventEmitter<{
+        key: string;
+    }>;
+    private onSort;
+    render(): any;
+}

package/dist/types/components/pf-table-row/pf-table-row.d.ts

@@ -0,0 +1,31 @@
+/**
+ * One row of a `pf-table`.
+ *
+ * `display: table-row`, so the row is a box: that is what lets it take a
+ * background for striping and a `:hover` of its own, neither of which an
+ * element with `display: contents` can do. Its cells are table-cells inside
+ * it, and the column widths come from the table layout rather than from
+ * anything measured.
+ *
+ * The row pushes `head` and `last` onto its own cells, because it knows what
+ * it is and they do not — `last` comes from the table, which is the only
+ * thing that can see where the body ends.
+ *
+ * @slot - the `pf-table-cell` children.
+ */
+export declare class PfTableRow {
+    el: HTMLElement;
+    /** A header row. Reflected, and pushed onto its cells. */
+    head: boolean;
+    /** Set by the table: every other body row, for striping. Reflected. */
+    odd: boolean;
+    /**
+     * Set by the table: the last body row, whose cells drop their bottom border
+     * so the rule does not double up with the table's own.
+     */
+    last: boolean;
+    /** The light DOM is readable here, so first paint is already right. */
+    componentWillLoad(): void;
+    sync(): void;
+    render(): any;
+}

package/dist/types/components/pf-tabs/pf-tabs.d.ts

@@ -0,0 +1,149 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export type PfTabsVariant = 'underline' | 'pills';
+export type PfTabsSize = 'sm' | 'md';
+/**
+ * A tab set: a strip of `pf-tab` children over a stack of `pf-tab-panel`
+ * children.
+ *
+ * Children rather than an `items` array (WEB-COMPONENTS-PLAN.md §2.1), because
+ * the React `TabsItem` carries a `label` and a `content` that are both
+ * `ReactNode` — neither crosses the HTML boundary, so a consumer nests instead
+ * and loops in their own template.
+ *
+ * A `pf-tab` puts itself in the `tab` slot, so the two kinds of child can be
+ * written interleaved — one `pf-tab` and one `pf-tab-panel` per item, which is
+ * what a loop over data wants — and still land in the right box.
+ *
+ * The group owns everything the children cannot see on their own: which one is
+ * selected, the single tab stop, the id wiring in both directions, and the
+ * sliding indicator. Each `pf-tab` only reports that it was chosen, as
+ * `pf-radio-button` does to its group.
+ *
+ * @slot tab - the `pf-tab` children. They assign themselves to it.
+ * @slot - the `pf-tab-panel` children.
+ * @part list - the tab strip, which is the `tablist`.
+ * @part indicator - the bar or pill that slides to the selected tab.
+ * @part panels - the box the panels are slotted into.
+ */
+export declare class PfTabs {
+    el: HTMLElement;
+    private uid;
+    private listEl?;
+    private indicatorEl?;
+    private observer?;
+    private observed;
+    /**
+     * The selected tab's value.
+     *
+     * Left exactly as the consumer set it, as the React component leaves its
+     * state: a value no tab carries still *shows* the first enabled tab, but it
+     * is not silently rewritten here, so a consumer holding `value` sees only
+     * the changes they made.
+     */
+    value: string;
+    /** Underline or pills. Reflected, and pushed down onto every tab. */
+    variant: PfTabsVariant;
+    /** Tab padding and type scale. Reflected, and pushed down onto every tab. */
+    size: PfTabsSize;
+    /** Stretch the tabs to fill the strip. Reflected, and pushed down. */
+    fullWidth: boolean;
+    /** Fires when the selected tab changes, however it was chosen. */
+    pfChange: EventEmitter<{
+        value: string;
+    }>;
+    /**
+     * The light DOM is readable here, so first paint already has the right tab
+     * selected and the other panels hidden — the mock DOM never fires
+     * `slotchange`, and a real one fires it after the first render.
+     */
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    /**
+     * The indicator is placed from measurements, so it can only be done once the
+     * shadow DOM and the slotted tabs have been laid out.
+     */
+    componentDidRender(): void;
+    disconnectedCallback(): void;
+    handleStateChange(): void;
+    /**
+     * Re-reads the children.
+     *
+     * Needed because a consumer can change a tab through its *property* —
+     * `tab.disabled = true` — which leaves no attribute, moves no node and so
+     * fires neither `slotchange` nor any watcher here.
+     */
+    refresh(): Promise<void>;
+    /** Direct children only: a nested tab set owns its own tabs. */
+    private get tabs();
+    private get panels();
+    private get descriptors();
+    /**
+     * The value actually on show: core's rule, so the React `Tabs` falls back to
+     * the same tab for a value no tab carries or one that is disabled.
+     */
+    private get selectedValue();
+    /**
+     * Pushes the group's state down onto the children: which tab is selected,
+     * which panel is shown, the id wiring between the two, and one tab stop.
+     *
+     * The ids go on light-DOM children, which is why they can be referenced at
+     * all: tab and panel share the consumer's tree, so `aria-controls` and
+     * `aria-labelledby` resolve. The pair an overlay cannot have — a trigger
+     * outside pointing at a panel in a shadow root — is the opposite case, and
+     * is why `pf-tooltip` copies its text instead.
+     */
+    private sync;
+    /**
+     * One tab stop for the whole strip, on the selected tab.
+     *
+     * The ARIA tabs pattern puts it there rather than on whichever tab was
+     * focused last, so tabbing in lands on the panel being shown. The React
+     * `Tabs` instead leaves every tab tabbable, which is a gap recorded in
+     * `todo.md` — the arrows already move selection in both.
+     */
+    private syncTabIndex;
+    /**
+     * Puts the indicator under (or behind) the selected tab.
+     *
+     * Measured with rects rather than `offsetLeft`, which the React component
+     * can use and this one cannot: a slotted element's `offsetParent` is
+     * resolved in its *own* node tree, so it is the nearest positioned ancestor
+     * in the consumer's document and never the shadow box the element is
+     * actually laid out in. Measured twice. Inside a `position: relative`
+     * wrapper the selected tab reported `offsetParent: #wrapper` and
+     * `offsetLeft: 196` where its offset within the strip was 186 — the
+     * wrapper's own padding folded in. And with this placed from `offsetLeft`
+     * in a real build, the indicator painted at 64 against a tab starting at
+     * 32, which is what `scripts/smoke-consumer.mjs` now catches.
+     *
+     * Adding back `scrollLeft` is what makes the result scroll-invariant: the
+     * indicator is a child of the scrolling strip, so it has to be placed in the
+     * strip's scroll coordinates, and both rects move together when it scrolls.
+     */
+    private placeIndicator;
+    /**
+     * Re-measures when the strip or the selected tab changes size.
+     *
+     * `document.fonts.ready` as well, because a web font loading can change a
+     * *sibling* tab's width and so move the selected one without resizing it —
+     * which a ResizeObserver on the two of them alone would miss.
+     */
+    private observe;
+    private select;
+    /**
+     * A tab asking to be selected — by click, or by Enter or Space on itself.
+     * The group decides, exactly as `pf-radio-group` does for its radios.
+     */
+    handleTabSelect(event: CustomEvent<{
+        value: string;
+    }>): void;
+    /**
+     * The arrows move *and* select, which the ARIA tabs pattern calls automatic
+     * activation and allows when the panels are already rendered. Home and End
+     * jump to the first and last enabled tab; a disabled tab is skipped rather
+     * than focused, because unlike a calendar's blocked day there is nothing
+     * behind it to reach.
+     */
+    handleKeyDown(event: KeyboardEvent): void;
+    render(): any;
+}

package/dist/types/components/pf-tag/pf-tag.d.ts

@@ -0,0 +1,26 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export type PfTagVariant = 'neutral' | 'brand' | 'success' | 'warning' | 'danger';
+/**
+ * A label a person can remove, for a filter or a selection.
+ *
+ * It only reports that its dismiss button was pressed — removing it is the
+ * consumer's, as it is for `pf-alert`.
+ *
+ * @slot - the tag's label.
+ * @part label - the label wrapper.
+ * @part dismiss - the remove button, when dismissible.
+ */
+export declare class PfTag {
+    variant: PfTagVariant;
+    /** Show a button that removes the tag. */
+    dismissible: boolean;
+    /** Accessible name for the remove button. */
+    dismissLabel: string;
+    /**
+     * Fired when the remove button is pressed. The tag does not remove itself —
+     * whoever owns the list decides, exactly as the React `onDismiss` callback
+     * leaves it to the caller.
+     */
+    pfDismiss: EventEmitter<void>;
+    render(): any;
+}

package/dist/types/components/pf-tag-input/pf-tag-input.d.ts

@@ -0,0 +1,92 @@
+import type { PfTagVariant } from '../pf-tag/pf-tag';
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * A form-associated field that collects free-text tags.
+ *
+ * Unlike the other multi-value controls here the tags are not chosen from a
+ * list, so there are no `pf-option` children — the chips are `pf-tag`
+ * elements this component renders, and `pf-tag` already has the dismiss
+ * button and the event for it.
+ *
+ * The rules are core's: trimming, the case-insensitive dedup (`React` and
+ * `react` are one tag), the maximum, and `validate`. So is the paste split.
+ * What stays here is what to do with the draft, which differs per refusal — a
+ * duplicate clears it, because the tag asked for is already there, while
+ * hitting the maximum leaves it so nothing is lost.
+ *
+ * Submits one entry per tag under one name, the same way `pf-multi-select`
+ * does.
+ *
+ * @slot - nothing; the chips are rendered from `value`.
+ * @part field - the wrapper around label, control and messages.
+ * @part label - the label element.
+ * @part control - the box holding the chips and the draft input.
+ * @part tag - each chip.
+ * @part input - the draft input.
+ * @part description - the hint text below the control.
+ * @part error - the error message below the control.
+ */
+export declare class PfTagInput {
+    el: HTMLElement;
+    internals: ElementInternals;
+    /** Submitted under this name, once per tag. Reflected. */
+    name?: string;
+    /** The tags, comma-separated. Reflected, so HTML can set it. */
+    value: string;
+    label?: string;
+    description?: string;
+    error?: string;
+    placeholder: string;
+    /** Stop accepting tags once there are this many. */
+    max?: number;
+    /** Accept the same tag twice. The comparison is case-insensitive. */
+    allowDuplicates: boolean;
+    /**
+     * Visual variant for the chips, passed through to `pf-tag`.
+     *
+     * The type is imported from `pf-tag` rather than restated, so the two
+     * cannot drift apart — a second copy of the union would compile happily
+     * while offering a variant `pf-tag` has never heard of.
+     */
+    tagVariant: PfTagVariant;
+    required: boolean;
+    disabled: boolean;
+    /**
+     * Refuse a candidate tag. A property rather than an attribute, because a
+     * function cannot be written in HTML — the generated bindings set props as
+     * properties, so a framework consumer passes it like any other.
+     */
+    validate?: (tag: string) => boolean;
+    /** Fires when the tags change, with both representations. */
+    pfChange: EventEmitter<{
+        value: string;
+        values: string[];
+    }>;
+    private initialValue;
+    componentWillLoad(): void;
+    /** See pf-multi-select: the name is built into the FormData, so watch it. */
+    syncFormState(): void;
+    checkValidity(): Promise<boolean>;
+    reportValidity(): Promise<boolean>;
+    getValidationMessage(): Promise<string>;
+    formResetCallback(): void;
+    private tags;
+    private get input();
+    private get options();
+    private commit;
+    /** Takes the draft as a tag, and decides what to do with the draft itself. */
+    private addDraft;
+    private remove;
+    /**
+     * Enter and comma commit; Backspace on an empty draft removes the last tag,
+     * which is the gesture every tag field has.
+     */
+    private onKeyDown;
+    /**
+     * A pasted list is folded, not added one at a time, so the maximum and the
+     * dedup see each addition. The React component added them in a loop over
+     * stale state and kept only the last — fixed there too, in the same change.
+     */
+    private onPaste;
+    render(): any;
+}

package/dist/types/components/pf-textarea/pf-textarea.d.ts

@@ -0,0 +1,89 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * A form-associated multi-line text control.
+ *
+ * Shares `pf-input`'s field anatomy and form wiring; the control is a
+ * `<textarea>` rather than an `<input>`, so it takes `rows` and resizes.
+ *
+ * @part field - the wrapper around label, control and messages.
+ * @part label - the label element.
+ * @part textarea - the native textarea.
+ * @part description - the hint text below the control.
+ * @part error - the error message below the control.
+ */
+export declare class PfTextarea {
+    el: HTMLElement;
+    internals: ElementInternals;
+    /**
+     * Submitted under this name.
+     *
+     * Reflected, because a form-associated custom element takes its submission
+     * name from the `name` *content attribute* -- not from this property. A
+     * framework wrapper that sets properties rather than attributes (the
+     * generated React bindings do) would otherwise leave the control nameless
+     * and absent from the submission, with every other sign of working.
+     */
+    name?: string;
+    /** The control's value. */
+    value: string;
+    /** Visible rows. Mirrors the native attribute. */
+    rows: number;
+    /** Visible label. Rendered in the same root as the input, so `for` works. */
+    label?: string;
+    /** Hint text below the control. */
+    description?: string;
+    /** Error message. Its presence is what marks the control invalid. */
+    error?: string;
+    placeholder?: string;
+    required: boolean;
+    disabled: boolean;
+    readonly: boolean;
+    /** Fires on every keystroke, like the native `input` event. */
+    pfInput: EventEmitter<{
+        value: string;
+    }>;
+    /** Fires when the value is committed, like the native `change` event. */
+    pfChange: EventEmitter<{
+        value: string;
+    }>;
+    /**
+     * The value the control had when it was created, which is what a form reset
+     * restores. Captured here because `value` has been overwritten by then.
+     */
+    private initialValue;
+    componentWillLoad(): void;
+    syncFormState(): void;
+    /**
+     * Whether the control currently satisfies its constraints.
+     *
+     * A form-associated custom element does not inherit `checkValidity` from
+     * anywhere -- the spec puts it on ElementInternals, so the element has to
+     * forward it or consumers cannot ask.
+     */
+    checkValidity(): Promise<boolean>;
+    /** As `checkValidity`, but also shows the browser's validation message. */
+    reportValidity(): Promise<boolean>;
+    /** The message explaining why the control is invalid, or an empty string. */
+    getValidationMessage(): Promise<string>;
+    /**
+     * A reset restores the value the control started with, not an empty string —
+     * verified against a native `<input value="initial">`, which comes back to
+     * "initial" rather than to "". Clearing it was a real defect: a
+     * `<pf-textarea value="…">` in a form lost its value on any reset.
+     */
+    formResetCallback(): void;
+    private onInput;
+    private onChange;
+    /**
+     * A textarea's value is its text content, not an attribute, so it cannot be
+     * rendered as a JSX child without Stencil replacing that text node on every
+     * keystroke. It is written through the DOM property instead, which is what
+     * the browser itself does.
+     *
+     * Guarded on inequality: assigning the same string still moves the caret to
+     * the end in some engines, which would make typing into the middle of a
+     * paragraph jump the cursor away on every character.
+     */
+    componentDidRender(): void;
+    render(): any;
+}