@rivetjs/cdk 0.0.0-stage → 0.1.0-alpha.1

package/scrolling/virtual-scroll-viewport.js

@@ -0,0 +1,370 @@
+// Ported from Angular Components (src/cdk/scrolling/virtual-scroll-viewport.ts + the measuring half
+// of virtual-for-of.ts), MIT, © Google LLC.
+// Rivet: the browser engine behind <CdkVirtualScrollViewport>, created lazily on the first scroll /
+// interaction (`virtualScrollViewport(state)`), never on the server. Rendering goes through the
+// state signals (range → keyed `For` rows, totalSize → spacer, transform → content wrapper); Angular's
+// change-detection loop (`_markChangeDetectionNeeded` → microtask → apply → after-render callbacks)
+// is kept as microtask steps so strategies see the same ordering.
+import { batch, createRoot, effect, untrack } from "@rivetjs/reactivity";
+import { auditTime, Emitter } from "./emitter.js";
+import { CdkVirtualScrollable, CdkVirtualScrollableElement, CdkVirtualScrollableWindow } from "./scrollable.js";
+import { contentTransform, createStrategy } from "./state.js";
+import { viewportRuler } from "./viewport-ruler.js";
+import { rangesEqual } from "./virtual-scroll-strategy.js";
+const engines = new WeakMap();
+/** Offset of a node's start / end edge along the orientation. */
+function getOffset(orientation, direction, node) {
+    const el = node;
+    if (!el.getBoundingClientRect)
+        return 0;
+    const rect = el.getBoundingClientRect();
+    if (orientation === "horizontal")
+        return direction === "start" ? rect.left : rect.right;
+    return direction === "start" ? rect.top : rect.bottom;
+}
+/** The engine of a virtual scroll viewport element (Angular `CdkVirtualScrollViewport` instance). */
+export class VirtualScrollViewport extends CdkVirtualScrollable {
+    state;
+    /** Updated by every viewport interaction (the engine may have been created by an API call first). */
+    callbacks;
+    scrollable;
+    _scrollStrategy;
+    _renderedRangeSubject = new Emitter();
+    /** Emits when the rendered range changes. */
+    renderedRangeStream = this._renderedRangeSubject;
+    _renderedContentOffsetSubject = new Emitter();
+    /** Emits the offset from the start of the viewport to the start of the rendered data (px). */
+    renderedContentOffset = this._renderedContentOffsetSubject;
+    _totalContentSize;
+    _renderedContentTransform;
+    _renderedRange;
+    _dataLength;
+    _viewportSize = 0;
+    _renderedContentOffset;
+    _renderedContentOffsetNeedsRewrite = false;
+    _changeDetectionNeeded = false;
+    _runAfterChangeDetection = [];
+    _subscriptions = [];
+    _disposeData;
+    _isDestroyed = false;
+    _attached = false;
+    /** Rivet: the strategy's latest scrolled index, and the last one `callbacks` got (see `deliverScrolledIndex`). */
+    _scrolledIndex;
+    _deliveredIndex;
+    constructor(state, element, callbacks = {}) {
+        super(element);
+        this.state = state;
+        this.callbacks = callbacks;
+        this._scrollStrategy = createStrategy(state);
+        // Start from what the server rendered.
+        this._renderedRange = untrack(state.range);
+        this._totalContentSize = untrack(state.totalSize);
+        this._renderedContentOffset = untrack(state.offset);
+        this._renderedContentTransform = untrack(state.transform);
+        this._dataLength = untrack(state.items).length;
+        const doc = element.ownerDocument;
+        if (state.scrollable === "window")
+            this.scrollable = new CdkVirtualScrollableWindow(doc);
+        else if (state.scrollable === "element") {
+            const host = element.parentElement?.closest("[data-rv-virtual-scrollable]");
+            this.scrollable = host ? new CdkVirtualScrollableElement(host) : this;
+        }
+        else
+            this.scrollable = this;
+        if (this.scrollable === this)
+            element.classList.add("cdk-virtual-scrollable");
+        this._subscriptions.push(viewportRuler(doc).change().subscribe(() => this.checkViewportSize()));
+    }
+    get orientation() {
+        return this.state.orientation;
+    }
+    get appendOnly() {
+        return this.state.appendOnly;
+    }
+    /** The strategy (Angular: the `itemSize` / `autosize` directive's `_scrollStrategy`). */
+    get scrollStrategy() {
+        return this._scrollStrategy;
+    }
+    /**
+     * Rivet: hand `onScrolledIndexChange` the latest scrolled index it has not seen. Angular binds the output with the
+     * component; here the callbacks arrive with the first viewport event, and an API call (`scrollToIndex` from a
+     * button) may create the engine before that: its scroll's index would otherwise be lost (scrolledIndexChange is
+     * distinct, so it never fires again for that index).
+     */
+    deliverScrolledIndex() {
+        const index = this._scrolledIndex, callback = this.callbacks.onScrolledIndexChange;
+        if (!callback || index === undefined || index === this._deliveredIndex)
+            return;
+        this._deliveredIndex = index;
+        callback(index);
+    }
+    /** Emits when the index of the first element visible in the viewport changes. */
+    get scrolledIndexChange() {
+        return this._scrollStrategy.scrolledIndexChange;
+    }
+    /** Measure, attach the strategy, follow scroll and data changes (Angular ngOnInit + attach(forOf)). */
+    init() {
+        if (this._attached)
+            return this;
+        this._attached = true;
+        if (this.scrollable === this)
+            super.init();
+        else
+            this.scrollable.init();
+        // Angular subscribes lazily (only with listeners): here, only for the fixed strategy, whose
+        // scrolledIndexChange is cheap (autosize throws on subscribe).
+        if (!this.state.autosize)
+            this._subscriptions.push(this._scrollStrategy.scrolledIndexChange.subscribe((index) => {
+                this._scrolledIndex = index;
+                queueMicrotask(() => this.deliverScrolledIndex());
+            }));
+        this._measureViewportSize();
+        this._scrollStrategy.attach(this);
+        // Collect scroll events of one frame into one layout check; start with a fake scroll so the
+        // initial position (the scroll that woke us) is handled.
+        this._scrollStrategy.onContentScrolled();
+        this._subscriptions.push(auditTime(this.scrollable.elementScrolled(), 0, true).subscribe(() => this._scrollStrategy.onContentScrolled()));
+        // Data: keep the length in sync (Angular: forOf dataStream subscription).
+        this._disposeData = createRoot((dispose) => {
+            effect(() => {
+                const length = this.state.items().length;
+                untrack(() => {
+                    if (length !== this._dataLength) {
+                        this._dataLength = length;
+                        this._scrollStrategy.onDataLengthChanged();
+                    }
+                    this._doChangeDetection();
+                });
+            });
+            return dispose;
+        }).value;
+        this._markChangeDetectionNeeded();
+        return this;
+    }
+    destroy() {
+        this._scrollStrategy.detach();
+        this._renderedRangeSubject.complete();
+        this._subscriptions.forEach((s) => s.unsubscribe());
+        this._disposeData?.();
+        this._isDestroyed = true;
+        if (this.scrollable !== this)
+            this.scrollable.destroy();
+        super.destroy();
+        engines.delete(this.state);
+    }
+    getDataLength() {
+        return this._dataLength;
+    }
+    getViewportSize() {
+        return this._viewportSize;
+    }
+    getRenderedRange() {
+        return this._renderedRange;
+    }
+    measureBoundingClientRectWithScrollOffset(from) {
+        return this.getElementRef().nativeElement.getBoundingClientRect()[from];
+    }
+    /** Sets the total size of all content (px), including content that is not rendered. */
+    setTotalContentSize(size) {
+        if (this._totalContentSize !== size) {
+            this._totalContentSize = size;
+            this.state.totalSize.set(size);
+            this._markChangeDetectionNeeded();
+        }
+    }
+    /** Sets the currently rendered range of indices. */
+    setRenderedRange(range) {
+        if (!rangesEqual(this._renderedRange, range)) {
+            if (this.appendOnly)
+                range = { start: 0, end: Math.max(this._renderedRange.end, range.end) };
+            this._renderedRange = range;
+            this._renderedRangeSubject.next(range);
+            this.state.range.set(range);
+            const onRange = this.callbacks.onRenderedRangeChange;
+            if (onRange)
+                onRange(range);
+            this._markChangeDetectionNeeded(() => this._scrollStrategy.onContentRendered());
+        }
+    }
+    /** Offset from the start of the viewport to the start of the rendered data (px). */
+    getOffsetToRenderedContentStart() {
+        return this._renderedContentOffsetNeedsRewrite ? null : this._renderedContentOffset;
+    }
+    /** Sets the offset from the start of the viewport to the start or end of the rendered data (px). */
+    setRenderedContentOffset(offset, to = "to-start") {
+        // In appendOnly, we always start from the top.
+        offset = this.appendOnly && to === "to-start" ? 0 : offset;
+        const transform = contentTransform(this.orientation, offset, this.dir.value == "rtl", to === "to-end");
+        this._renderedContentOffset = offset;
+        // "to-end" is rewritten as a "to-start" offset on the next render cycle (else content would
+        // grow in the wrong direction).
+        if (to === "to-end")
+            this._renderedContentOffsetNeedsRewrite = true;
+        if (this._renderedContentTransform != transform) {
+            this._renderedContentTransform = transform;
+            this._markChangeDetectionNeeded(() => {
+                if (this._renderedContentOffsetNeedsRewrite) {
+                    this._renderedContentOffset -= this.measureRenderedContentSize();
+                    this._renderedContentOffsetNeedsRewrite = false;
+                    this.setRenderedContentOffset(this._renderedContentOffset);
+                }
+                else
+                    this._scrollStrategy.onRenderedOffsetChanged();
+            });
+        }
+    }
+    /** Scrolls to `offset` from the start (a fictional `scrollRight` in horizontal RTL). */
+    scrollToOffset(offset, behavior = "auto") {
+        const options = { behavior };
+        if (this.orientation === "horizontal")
+            options.start = offset;
+        else
+            options.top = offset;
+        this.scrollable.scrollTo(options);
+    }
+    /** Scrolls to the offset of the given index. */
+    scrollToIndex(index, behavior = "auto") {
+        this._scrollStrategy.scrollToIndex(index, behavior);
+    }
+    /** Scroll offset from the start of the scrollable (default `top` / `start`), minus the viewport offset. */
+    measureScrollOffset(from) {
+        const edge = from ?? (this.orientation === "horizontal" ? "start" : "top");
+        const raw = this.scrollable === this ? super.measureScrollOffset(edge) : this.scrollable.measureScrollOffset(edge);
+        return Math.max(0, raw - this.measureViewportOffset());
+    }
+    /** Offset of the viewport from the scrolling container. */
+    measureViewportOffset(from) {
+        let fromRect;
+        const isRtl = this.dir.value == "rtl";
+        if (from == "start")
+            fromRect = isRtl ? "right" : "left";
+        else if (from == "end")
+            fromRect = isRtl ? "left" : "right";
+        else if (from)
+            fromRect = from;
+        else
+            fromRect = this.orientation === "horizontal" ? "left" : "top";
+        const scrollerClientRect = this.scrollable.measureBoundingClientRectWithScrollOffset(fromRect);
+        const viewportClientRect = this.elementRef.nativeElement.getBoundingClientRect()[fromRect];
+        return viewportClientRect - scrollerClientRect;
+    }
+    /** The content wrapper element. */
+    get contentWrapper() {
+        const el = this.elementRef.nativeElement;
+        return el.querySelector(":scope > .cdk-virtual-scroll-content-wrapper") ?? el;
+    }
+    /** Measure the combined size of all rendered items. */
+    measureRenderedContentSize() {
+        const contentEl = this.contentWrapper;
+        return this.orientation === "horizontal" ? contentEl.offsetWidth : contentEl.offsetHeight;
+    }
+    /** Root nodes of rendered rows, grouped per row (CdkVirtualForOf views). */
+    _rowNodes() {
+        const marker = this.contentWrapper.querySelector(`template[data-rv-vfor="${this.state.id}"]`);
+        const nodes = [];
+        for (let el = marker?.nextElementSibling; el && !el.matches("template[data-rv-vfor-end]"); el = el.nextElementSibling)
+            nodes.push(el);
+        const count = this._renderedRange.end - this._renderedRange.start;
+        if (!count)
+            return [];
+        const per = Math.max(1, Math.round(nodes.length / count));
+        const rows = [];
+        for (let i = 0; i < nodes.length; i += per)
+            rows.push(nodes.slice(i, i + per));
+        return rows;
+    }
+    /** Combined size of the given (rendered) range. Throws if part of it is not rendered. */
+    measureRangeSize(range) {
+        if (range.start >= range.end)
+            return 0;
+        if (range.start < this._renderedRange.start || range.end > this._renderedRange.end)
+            throw Error(`Error: attempted to measure an item that isn't rendered.`);
+        const rows = this._rowNodes();
+        const renderedStartIndex = range.start - this._renderedRange.start;
+        const rangeLen = range.end - range.start;
+        let firstNode, lastNode;
+        for (let i = 0; i < rangeLen; i++) {
+            const view = rows[i + renderedStartIndex];
+            if (view?.length) {
+                firstNode = lastNode = view[0];
+                break;
+            }
+        }
+        for (let i = rangeLen - 1; i > -1; i--) {
+            const view = rows[i + renderedStartIndex];
+            if (view?.length) {
+                lastNode = view[view.length - 1];
+                break;
+            }
+        }
+        return firstNode && lastNode ? getOffset(this.orientation, "end", lastNode) - getOffset(this.orientation, "start", firstNode) : 0;
+    }
+    /** Update the viewport dimensions and re-render. */
+    checkViewportSize() {
+        this._measureViewportSize();
+        this._scrollStrategy.onDataLengthChanged();
+    }
+    _measureViewportSize() {
+        this._viewportSize = this.scrollable.measureViewportSize(this.orientation);
+    }
+    /** Queue up a render pass (Angular change detection). */
+    _markChangeDetectionNeeded(runAfter) {
+        if (runAfter)
+            this._runAfterChangeDetection.push(runAfter);
+        if (this._changeDetectionNeeded)
+            return;
+        this._changeDetectionNeeded = true;
+        queueMicrotask(() => this._doChangeDetection());
+    }
+    /** Apply the transform, then run the after-render callbacks. */
+    _doChangeDetection() {
+        if (this._isDestroyed)
+            return;
+        batch(() => {
+            if (this._renderedContentTransform !== undefined)
+                this.state.transform.set(this._renderedContentTransform);
+            if (!this._renderedContentOffsetNeedsRewrite)
+                this.state.offset.set(this._renderedContentOffset);
+        });
+        this._renderedContentOffsetSubject.next(this.getOffsetToRenderedContentStart());
+        queueMicrotask(() => {
+            this._changeDetectionNeeded = false;
+            const runAfterChangeDetection = this._runAfterChangeDetection;
+            this._runAfterChangeDetection = [];
+            for (const fn of runAfterChangeDetection)
+                fn();
+        });
+    }
+}
+/**
+ * The engine for `state` (created and attached on first call, in the browser). `element` defaults to
+ * the viewport element (`id = state.id`).
+ */
+export function virtualScrollViewport(state, element, callbacks) {
+    let engine = engines.get(state);
+    if (engine) {
+        if (callbacks && callbacks !== engine.callbacks) {
+            engine.callbacks = callbacks;
+            engine.deliverScrolledIndex();
+        }
+        return engine;
+    }
+    if (typeof document !== "object")
+        return undefined;
+    const el = element ?? document.getElementById(state.id);
+    if (!el)
+        return undefined;
+    engine = new VirtualScrollViewport(state, el, callbacks);
+    // Devtools / tests: the engine of a viewport element.
+    el.__rivetVirtualScroll = engine;
+    engines.set(state, engine);
+    return engine.init();
+}
+/** Scroll `state`'s viewport to `index` (Angular `viewport.scrollToIndex`). */
+export function scrollToIndex(state, index, behavior) {
+    virtualScrollViewport(state)?.scrollToIndex(index, behavior);
+}
+/** Scroll `state`'s viewport to `offset` px from the start (Angular `viewport.scrollToOffset`). */
+export function scrollToOffset(state, offset, behavior) {
+    virtualScrollViewport(state)?.scrollToOffset(offset, behavior);
+}

package/search-field/behaviour.d.ts

@@ -0,0 +1,62 @@
+import type { Ref } from "@rivetjs/runtime/jsx-runtime";
+import { type ValidationResult } from "../state/form-validation.js";
+import { type SearchFieldState } from "../state/search-field.js";
+import { type AriaTextFieldProps, type PropBag, type TextFieldState } from "../text-field/behaviour.jsx";
+import type { FieldIds } from "../label/behaviour.js";
+export interface AriaSearchFieldProps extends Omit<AriaTextFieldProps, "type" | "value"> {
+    /** The current value (controlled): a plain value, a two-way Signal, or an accessor read live. */
+    value?: AriaTextFieldProps["value"] | (() => string);
+    /** Handler that is called when the SearchField is submitted. */
+    onSubmit?: (value: string) => void;
+    /** Handler that is called when the clear button is pressed. */
+    onClear?: () => void;
+    /**
+     * An enumerated attribute that defines what action label or icon to preset for the enter key on virtual keyboards. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint).
+     */
+    enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send";
+    /**
+     * The type of input to render. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdeftype).
+     *
+     * @default 'search'
+     */
+    type?: "text" | "search" | "url" | "tel" | "email" | "password" | (string & {});
+    /** Locale of the clear button label (default "en-US"). */
+    locale?: string;
+}
+/** Clear button props (RA `AriaButtonProps`, for `ButtonContext`). */
+export interface SearchFieldClearButtonProps {
+    "aria-label": string;
+    excludeFromTabOrder: boolean;
+    preventFocusOnPress: boolean;
+    /** Rivet (live props): an accessor while the field's `isDisabled` / `isReadOnly` is live. */
+    isDisabled: boolean | (() => boolean);
+    onPress: () => void;
+    onPressStart: () => void;
+}
+export interface SearchFieldAria {
+    /** Props for the text field's visible label element (if any). */
+    labelProps: PropBag;
+    /** Props for the input element. */
+    inputProps: PropBag;
+    /** Props for the clear button. */
+    clearButtonProps: SearchFieldClearButtonProps;
+    /** Props for the searchfield's description element, if any. */
+    descriptionProps: PropBag;
+    /** Props for the searchfield's error message element, if any. */
+    errorMessageProps: PropBag;
+    /** Rivet: ids of the field parts. */
+    ids: FieldIds;
+    /** Rivet: the text field state (shared value + validation). */
+    textState: TextFieldState;
+    isInvalid: () => boolean;
+    validationErrors: () => string[];
+    validationDetails: () => ValidationResult["validationDetails"];
+}
+/** Enter / Escape shortcuts of the search input (upstream `useKeyboard({shortcuts})`). */
+export declare function searchFieldKeyDown(e: KeyboardEvent, props: Pick<AriaSearchFieldProps, "onSubmit" | "onClear">, state: SearchFieldState, inputRef: Ref<HTMLInputElement> | undefined): void;
+/** Clear button `onPress` (upstream `onClearButtonClick`). */
+export declare function searchFieldClear(props: Pick<AriaSearchFieldProps, "onClear">, state: SearchFieldState): void;
+/** Clear button `onPressStart`. */
+export declare function searchFieldClearPressStart(inputRef: Ref<HTMLInputElement> | undefined): void;
+/** Provides the behavior and accessibility implementation for a search field. */
+export declare function searchFieldProps(props: AriaSearchFieldProps, state: SearchFieldState, inputRef?: Ref<HTMLInputElement>): SearchFieldAria;

package/search-field/behaviour.jsx

@@ -0,0 +1,116 @@
+// Ported from react-aria useSearchField (packages/react-aria/src/searchfield/useSearchField.ts), Apache-2.0, © Adobe.
+// Rivet:
+// - `useSearchField(props, state, inputRef)` → `searchFieldProps(props, state, inputRef?)` (call during render,
+//   from `.tsx`: the bags hold inline-arrow handlers / accessors that resumed bindings and contexts capture).
+//   Built on `textFieldProps` (RA useTextField port); the text field state shares the search field's
+//   controlled value (RA passes `value: state.value, onChange: state.setValue`).
+// - hook-internal handlers → free functions: `searchFieldKeyDown(event, props, state, inputRef)` (the
+//   `useKeyboard` Enter / Escape shortcuts), `searchFieldClear(props, state)` (clear button `onPress`),
+//   `searchFieldClearPressStart(inputRef)` (clear button `onPressStart`).
+// - `inputRef` = a `ref()` (`@rivetjs/runtime/dom`) read at event time.
+// - Deviation: upstream's `useKeyboard` also adds an `onKeyUp` that only continues propagation (a no-op on
+//   native events); not added.
+import { untrack } from "@rivetjs/reactivity";
+import { formatMessage } from "../_adapters/intl.js";
+import { keyboardKeyDown } from "../interactions/keyboard.jsx";
+import { mergeProps } from "../interactions/merge-props.jsx";
+import { createFormValidationState } from "../state/form-validation.js";
+import { searchFieldValue, setSearchFieldValue } from "../state/search-field.js";
+import { textFieldProps } from "../text-field/behaviour.jsx";
+import { strings as intlMessages } from "./intl.js";
+/** Enter / Escape shortcuts of the search input (upstream `useKeyboard({shortcuts})`). */
+export function searchFieldKeyDown(e, props, state, inputRef) {
+    const { onSubmit, onClear } = props;
+    keyboardKeyDown({
+        shortcuts: {
+            Enter: () => {
+                if (onSubmit) {
+                    // for backward compatibility;
+                    // otherwise, "Enter" on an input would trigger a form submit, the default browser behavior
+                    onSubmit(searchFieldValue(state));
+                    return;
+                }
+                return false;
+            },
+            Escape: () => {
+                // Also check the inputRef value for the case where the value was set directly on the input element instead of going through
+                // the hook
+                const input = inputRef?.();
+                if (searchFieldValue(state) === "" && (!input || input.value === "")) {
+                    return false;
+                }
+                setSearchFieldValue(state, "");
+                onClear?.();
+            },
+        },
+    }, e);
+}
+/** Clear button `onPress` (upstream `onClearButtonClick`). */
+export function searchFieldClear(props, state) {
+    setSearchFieldValue(state, "");
+    if (props.onClear) {
+        props.onClear();
+    }
+}
+/** Clear button `onPressStart`. */
+export function searchFieldClearPressStart(inputRef) {
+    // this is in PressStart for mobile so that touching the clear button doesn't remove focus from
+    // the input and close the keyboard
+    inputRef?.()?.focus();
+}
+const readFlag = (v) => !!(typeof v === "function" ? v() : v);
+/** The clear button's live disabled state (a returned arrow: resumable). */
+function clearDisabled(isDisabled, isReadOnly) {
+    return () => readFlag(isDisabled) || readFlag(isReadOnly);
+}
+/** Provides the behavior and accessibility implementation for a search field. */
+export function searchFieldProps(props, state, inputRef) {
+    const { isDisabled, isReadOnly, onSubmit, onClear, type = "search" } = props;
+    const read = () => searchFieldValue(state);
+    const textState = {
+        value: state.value,
+        initial: props.defaultValue ?? untrack(read),
+        validation: createFormValidationState({
+            isInvalid: props.isInvalid,
+            validate: props.validate,
+            validationBehavior: props.validationBehavior ?? "aria",
+            name: props.name,
+            validationErrors: props.validationErrors,
+            value: read,
+        }),
+    };
+    // Rivet (live props): a live `isDisabled` / `isReadOnly` (accessor) keeps the shortcuts attached and checks at key time.
+    const live = typeof isDisabled === "function" || typeof isReadOnly === "function";
+    const keyboardProps = live
+        ? { onKeyDown: (e) => !(readFlag(isDisabled) || readFlag(isReadOnly)) && searchFieldKeyDown(e, { onSubmit, onClear }, state, inputRef) }
+        : isDisabled || isReadOnly
+            ? {}
+            : { onKeyDown: (e) => searchFieldKeyDown(e, { onSubmit, onClear }, state, inputRef) };
+    const text = textFieldProps({ ...props, value: undefined, type }, undefined, textState);
+    return {
+        labelProps: text.labelProps,
+        // An edge case, in Autocomplete, if the keyboard hanlders are not in this order, then
+        // Escape runs autocomplete/listbox first, then the search-field shortcut returns false and
+        // continues propagation, leaking Escape to a parent Dialog.
+        inputProps: mergeProps(keyboardProps, {
+            ...text.inputProps,
+            // already handled by useSearchFieldState
+            defaultValue: undefined,
+        }),
+        clearButtonProps: {
+            "aria-label": formatMessage(intlMessages, props.locale, "Clear search"),
+            excludeFromTabOrder: true,
+            preventFocusOnPress: true,
+            isDisabled: live ? clearDisabled(isDisabled, isReadOnly) : !!(isDisabled || isReadOnly),
+            onPress: () => searchFieldClear({ onClear }, state),
+            onPressStart: () => searchFieldClearPressStart(inputRef),
+        },
+        descriptionProps: text.descriptionProps,
+        errorMessageProps: text.errorMessageProps,
+        ids: text.ids,
+        textState,
+        isInvalid: text.isInvalid,
+        validationErrors: text.validationErrors,
+        validationDetails: text.validationDetails,
+    };
+}

package/search-field/index.d.ts

@@ -0,0 +1,57 @@
+import { type MaybeAccessor } from "../state/form-validation.js";
+import { type DOMRenderProps } from "../utils/render.js";
+import { type GlobalDOMAttributes } from "../utils/dom-props.js";
+import { type ContextValue, type RACValidation, type RefValue, type RenderProps, type SlotProps } from "../slots/index.jsx";
+import { type SearchFieldState } from "../state/search-field.js";
+import { type AriaSearchFieldProps } from "./behaviour.jsx";
+export type { SearchFieldState } from "../state/search-field.js";
+export type { AriaSearchFieldProps } from "./behaviour.jsx";
+export interface SearchFieldRenderProps {
+    /**
+     * Whether the search field is empty.
+     *
+     * @selector [data-empty]
+     */
+    isEmpty: () => boolean;
+    /**
+     * Whether the search field is disabled.
+     *
+     * @selector [data-disabled]
+     */
+    isDisabled: () => boolean;
+    /**
+     * Whether the search field is invalid.
+     *
+     * @selector [data-invalid]
+     */
+    isInvalid: () => boolean;
+    /**
+     * Whether the search field is read only.
+     *
+     * @selector [data-readonly]
+     */
+    isReadOnly: () => boolean;
+    /**
+     * Whether the search field is required.
+     *
+     * @selector [data-required]
+     */
+    isRequired: () => boolean;
+    /** State of the search field. */
+    state: SearchFieldState;
+}
+export interface SearchFieldProps extends Omit<AriaSearchFieldProps, "label" | "placeholder" | "description" | "errorMessage" | "validationBehavior" | "validationErrors" | "inputElementType" | "locale">, RACValidation, RenderProps<SearchFieldRenderProps>, SlotProps, DOMRenderProps<"div", SearchFieldRenderProps>, Omit<GlobalDOMAttributes<HTMLDivElement>, "style" | "onInput" | "onBeforeInput"> {
+    /**
+     * The CSS class for the element. A function may be provided to compute the class based on component state.
+     *
+     * @default 'rv-SearchField'
+     */
+    class?: RenderProps<SearchFieldRenderProps>["class"];
+    /** Whether the value is invalid (a value, or an accessor that stays live). */
+    isInvalid?: MaybeAccessor<boolean | undefined>;
+    ref?: RefValue<HTMLDivElement>;
+}
+/** RAC `SearchFieldContext`. */
+export declare const SearchFieldContext: import("@rivetjs/reactivity").Context<ContextValue<SearchFieldProps, HTMLDivElement>>;
+/** A search field allows a user to enter and clear a search query. */
+export declare function SearchField(props: SearchFieldProps): import("@rivetjs/runtime/jsx-runtime").CompiledElement | null;