@ng-native/expo 0.5.0 → 0.7.0

package/dist/expo-ui-components.d.ts

@@ -1,5 +1,32 @@
+/**
+ * Typed components for the `@expo/ui` views an app reaches for most, named and shaped as SwiftUI's.
+ *
+ * `EXPO_UI_VIEWS` makes every view reachable by name, and a name is all the renderer needs. What a
+ * name cannot give is a type: under strict templates an unknown element is an error, and so is
+ * each prop on it. These are the same elements, claimed by a component whose inputs carry the
+ * props' types and whose host bindings pass each one straight to the node, so nothing changes at
+ * runtime. An unset input stays `undefined` and never reaches native.
+ *
+ * Events are declared as outputs so that `$event` is typed. SwiftUI's events are never emitted:
+ * Angular binds a template's `(dateChange)` to the output *and* to the element, and it is the
+ * element's own event that arrives, once. Emitting from a host listener as well would deliver it
+ * twice; a host listener of the same name as the output listens to the output itself and recurses.
+ * So subscribe in a template, not to the output in code.
+ *
+ * Where Compose names a prop or an event differently, a component sends Android its own names and
+ * emits the output from a host listener for Compose's event, which SwiftUI never sends. Only a few
+ * do: the toggle, slider, button, progress, stacks and slot, and the date picker.
+ *
+ * Only the views and props an app has needed are here; the rest stay names, as before. Add a view
+ * when a template wants it typed, from `@expo/ui`'s own props for it.
+ *
+ * Still register the names with `registerExpoUiViews`: the component types the element, the
+ * registration is what makes it commit as the SwiftUI or Compose view.
+ */
+import { InjectionToken, type Signal } from '@angular/core';
 import type { NativeState } from './native-state.ts';
 import { type NativeSyntheticEvent } from '@ng-native/fabric';
+import { type UiBottomSheetPresentedEvent } from './ui-bottom-sheet-view.ts';
 import * as i0 from "@angular/core";
 /** One SwiftUI modifier, as `@expo/ui`'s modifier functions build them: `{ $type: 'frame', ... }`. */
 export interface UiModifier {
@@ -19,8 +46,8 @@ export declare class UiHost {
         readonly vertical?: boolean;
         readonly horizontal?: boolean;
     } | undefined>;
-    protected readonly matchVertical: import("@angular/core").Signal<boolean | undefined>;
-    protected readonly matchHorizontal: import("@angular/core").Signal<boolean | undefined>;
+    protected readonly matchVertical: Signal<boolean | undefined>;
+    protected readonly matchHorizontal: Signal<boolean | undefined>;
     readonly ignoreSafeArea: import("@angular/core").InputSignal<"all" | "keyboard" | "container" | undefined>;
     readonly useViewportSizeMeasurement: import("@angular/core").InputSignalWithTransform<boolean | undefined, unknown>;
     static ɵfac: i0.ɵɵFactoryDeclaration<UiHost, never>;
@@ -76,7 +103,8 @@ export declare class UiContextMenu {
 }
 /**
  * A SwiftUI `Button`, as a menu item or on its own, or Compose's on Android, which draws `label` as
- * text inside it. `systemImage` and `role` are SwiftUI's alone.
+ * text inside it. `systemImage` and `role` are SwiftUI's alone. A `close` button with no label and
+ * no content is the system's own close button, from iOS 26.
  */
 export declare class UiButton {
     protected readonly nativeView: true;
@@ -84,7 +112,7 @@ export declare class UiButton {
     readonly label: import("@angular/core").InputSignal<string | undefined>;
     /** An SF Symbol name. */
     readonly systemImage: import("@angular/core").InputSignal<string | undefined>;
-    readonly role: import("@angular/core").InputSignal<"default" | "cancel" | "destructive" | undefined>;
+    readonly role: import("@angular/core").InputSignal<"default" | "cancel" | "destructive" | "close" | undefined>;
     /**
      * In a home-screen widget's layout, what a tap on it records for the app: see
      * `@ng-native/expo/widget`.
@@ -157,9 +185,9 @@ export declare class UiSlider {
     /** A whole number of steps, which is all Compose can draw. */
     private readonly wholeSteps;
     /** SwiftUI takes a step size, and draws 0 to 1 unless it has both ends. */
-    protected readonly stepSize: import("@angular/core").Signal<number | undefined>;
+    protected readonly stepSize: Signal<number | undefined>;
     /** Compose takes the number of points between the ends. */
-    protected readonly stepsBetween: import("@angular/core").Signal<number | undefined>;
+    protected readonly stepsBetween: Signal<number | undefined>;
     static ɵfac: i0.ɵɵFactoryDeclaration<UiSlider, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<UiSlider, "ui-slider", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "steps": { "alias": "steps"; "required": false; "isSignal": true; }; "modifiers": { "alias": "modifiers"; "required": false; "isSignal": true; }; }, { "valueChanged": "valueChanged"; }, never, never, true, never>;
 }
@@ -240,9 +268,9 @@ export declare class UiDatePicker {
     readonly touch: import("@angular/core").OutputEmitterRef<void>;
     readonly dateChange: import("@angular/core").OutputEmitterRef<UiDateChangeEvent>;
     private readonly android;
-    protected readonly resolvedSelection: import("@angular/core").Signal<string | undefined>;
-    protected readonly initialDate: import("@angular/core").Signal<number | null | undefined>;
-    protected readonly resolvedModifiers: import("@angular/core").Signal<readonly UiModifier[] | undefined>;
+    protected readonly resolvedSelection: Signal<string | undefined>;
+    protected readonly initialDate: Signal<number | null | undefined>;
+    protected readonly resolvedModifiers: Signal<readonly UiModifier[] | undefined>;
     /**
      * SwiftUI's picker cannot be empty: it shows today, and reports that as a change the moment it
      * appears. Taken as the user's choice, an empty date field would fill itself in, pass
@@ -283,8 +311,8 @@ export declare class UiPicker {
         readonly selection: string | number;
     }>>;
     /** Each option's `tag`, one array per value, so a pass hands native the same objects. */
-    protected readonly tags: import("@angular/core").Signal<Map<string | number, readonly UiModifier[]>>;
-    protected readonly resolvedModifiers: import("@angular/core").Signal<readonly UiModifier[] | undefined>;
+    protected readonly tags: Signal<Map<string | number, readonly UiModifier[]>>;
+    protected readonly resolvedModifiers: Signal<readonly UiModifier[] | undefined>;
     constructor();
     static ɵfac: i0.ɵɵFactoryDeclaration<UiPicker, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<UiPicker, "ui-picker", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "systemImage": { "alias": "systemImage"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "pickerStyle": { "alias": "pickerStyle"; "required": false; "isSignal": true; }; "modifiers": { "alias": "modifiers"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "touch": "touch"; "selectionChange": "selectionChange"; }, never, ["*"], true, never>;
@@ -604,4 +632,220 @@ export declare class UiSection {
     static ɵfac: i0.ɵɵFactoryDeclaration<UiSection, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<UiSection, "ui-section", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "modifiers": { "alias": "modifiers"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
+/**
+ * A SwiftUI `Group`, iOS only: its children as they are, with no layout of its own. What it is for
+ * is `modifiers` that belong to several views at once, or to content that takes none itself, as a
+ * sheet's presentation modifiers go on a group around a `ui-view-host`.
+ */
+export declare class UiGroup {
+    protected readonly nativeView: true;
+    readonly modifiers: import("@angular/core").InputSignal<readonly UiModifier[] | undefined>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<UiGroup, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<UiGroup, "ui-group", never, { "modifiers": { "alias": "modifiers"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+/**
+ * A SwiftUI `NavigationStack`, iOS only: the bar a `ui-toolbar` inside it puts its items in, and
+ * that a `navigationTitle` modifier on its content titles.
+ */
+export declare class UiNavigationStack {
+    protected readonly nativeView: true;
+    readonly modifiers: import("@angular/core").InputSignal<readonly UiModifier[] | undefined>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<UiNavigationStack, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<UiNavigationStack, "ui-navigation-stack", never, { "modifiers": { "alias": "modifiers"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+/**
+ * SwiftUI's `toolbar`, iOS only. Its children are the view the toolbar belongs to, and its items go
+ * in `<ui-slot name="content">`, each a `ui-toolbar-item`. It shows in the bar of the
+ * `ui-navigation-stack` around it.
+ */
+export declare class UiToolbar {
+    protected readonly nativeView: true;
+    readonly modifiers: import("@angular/core").InputSignal<readonly UiModifier[] | undefined>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<UiToolbar, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<UiToolbar, "ui-toolbar", never, { "modifiers": { "alias": "modifiers"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+/** Where a `ui-toolbar-item` sits, as SwiftUI's `ToolbarItemPlacement` names them. */
+export type UiToolbarItemPlacement = 'automatic' | 'principal' | 'navigation' | 'primaryAction' | 'secondaryAction' | 'status' | 'confirmationAction' | 'cancellationAction' | 'destructiveAction' | 'keyboard' | 'topBarLeading' | 'topBarTrailing' | 'topBarPinnedTrailing' | 'largeTitle' | 'bottomBar';
+/**
+ * One item of a `ui-toolbar`, SwiftUI's `ToolbarItem`: a `ui-button`, or a `ui-text` as a title
+ * with `placement="principal"`. Unplaced, SwiftUI places it. A placement the OS does not have is
+ * read as `automatic`.
+ *
+ * Written inside a `ui-bottom-sheet` it goes in the sheet's own toolbar, which is how a sheet
+ * shows the system's close button.
+ */
+export declare class UiToolbarItem {
+    protected readonly nativeView: true;
+    readonly placement: import("@angular/core").InputSignal<UiToolbarItemPlacement | undefined>;
+    /** How readily the item gives up its place when the bar runs out of room, from iOS 27. */
+    readonly visibilityPriority: import("@angular/core").InputSignal<"low" | "high" | "automatic" | undefined>;
+    /** What the slot tells the toolbar about itself: only what is set, so SwiftUI decides the rest. */
+    protected readonly extraProps: Signal<{
+        visibilityPriority?: "low" | "high" | "automatic" | undefined;
+        placement?: UiToolbarItemPlacement | undefined;
+    } | undefined>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<UiToolbarItem, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<UiToolbarItem, "ui-toolbar-item", never, { "placement": { "alias": "placement"; "required": false; "isSignal": true; }; "visibilityPriority": { "alias": "visibilityPriority"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+/**
+ * A height a SwiftUI sheet rests at, as `@expo/ui`'s `PresentationDetent`: about half the screen,
+ * all of it, a fraction of it from 0 to 1, or a height in points.
+ */
+export type UiPresentationDetent = 'medium' | 'large' | {
+    readonly fraction: number;
+} | {
+    readonly height: number;
+};
+/** The functions `@expo/ui` defines on Compose's sheet, called with the view's tag as `this`. */
+export interface UiBottomSheetViewFunctions {
+    /** Slides the sheet away, answering once it has gone. */
+    hide?(this: {
+        nativeTag: number;
+    }): Promise<void>;
+}
+/**
+ * A sheet that slides up from the bottom of the screen, opened from any component: SwiftUI's on
+ * iOS, Material's on Android.
+ *
+ * ```html
+ * <ui-bottom-sheet [(open)]="sorting" fitToContents>
+ *   <app-sort-options (done)="sorting.set(false)" />
+ * </ui-bottom-sheet>
+ * ```
+ *
+ * `open` presents and dismisses it, and is written back when the user dismisses it. Its content is
+ * what is written inside it, the app's own components, in the tree while the sheet is on screen.
+ *
+ * A `ui-toolbar-item` written inside it is not content: on iOS it goes in a toolbar of the sheet's
+ * own, in a bar across its top, which is where the system's close button belongs.
+ *
+ * ```html
+ * <ui-bottom-sheet [(open)]="sorting">
+ *   <ui-toolbar-item placement="cancellationAction">
+ *     <ui-button role="close" (buttonPress)="sorting.set(false)" />
+ *   </ui-toolbar-item>
+ *   <app-sort-options />
+ * </ui-bottom-sheet>
+ * ```
+ *
+ * Compose's sheet has no toolbar, so Android draws no item. Nor does an iOS build whose `@expo/ui`
+ * is older than 57.0.20, which Expo Go's can be: it warns, and shows the sheet without one.
+ *
+ * The two platforms drive a sheet differently, and this is where that difference ends. SwiftUI's
+ * stays in the tree and is presented by `isPresented`, reporting `isPresentedChange` and
+ * `dismiss`. Compose's shows for as long as it is in the tree, and reports `dismissRequest`.
+ *
+ * Unlike the other components here, the element this is mounted on is a plain view, which takes
+ * no room and needs no `ui-host` around it. The sheet is inside it, wrapped as `@expo/ui`'s own
+ * React component wraps one: a `ui-host`, the sheet, on iOS a `ui-group` that carries the
+ * presentation modifiers, and a `ui-view-host` holding the one view the content goes in. With
+ * toolbar items, the view host is in a `ui-toolbar` in a `ui-navigation-stack`, under the group.
+ */
+export declare class UiBottomSheet {
+    /**
+     * The functions of Compose's sheet, none of them on iOS, or null where `@expo/ui` is not in the
+     * build and there is no sheet. Overridden in a test to hide a sheet without a device.
+     */
+    static readonly SOURCE: InjectionToken<UiBottomSheetViewFunctions | null>;
+    /**
+     * Whether the build has SwiftUI's toolbar. `@expo/ui` has had it since 57.0.20, and Expo Go has
+     * the version its SDK shipped with. A SwiftUI view under one the build lacks is a crash, so a
+     * sheet there leaves its toolbar out. Overridden in a test.
+     */
+    static readonly TOOLBAR: InjectionToken<boolean>;
+    private readonly functions;
+    private readonly toolbarInBuild;
+    private readonly engine;
+    private readonly injector;
+    private readonly sheet;
+    /** Whether the sheet is on screen. Written back as false when the user dismisses it. */
+    readonly open: import("@angular/core").ModelSignal<boolean>;
+    /**
+     * The sheet is as tall as its content. Without it the sheet rests at half the screen's height
+     * and drags up to all of it. Read as the sheet opens. A sheet with a toolbar on iOS is not
+     * sized to its content: it rests at its `detents`, or at half and full height.
+     */
+    readonly fitToContents: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    /**
+     * The heights the sheet rests at, iOS only: SwiftUI's `presentationDetents`. Compose's sheet has
+     * a half and a full height and no others, so Android takes no notice of this. On iOS a sheet
+     * given detents rests at them rather than at the height of its content, whatever `fitToContents`
+     * says, as `@expo/ui`'s own sheets do. None, or an empty list, is the sheet without them.
+     */
+    readonly detents: import("@angular/core").InputSignal<readonly UiPresentationDetent[] | undefined>;
+    /** Whether the grabber shows at the top of the sheet. */
+    readonly showDragIndicator: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    /**
+     * The sheet has finished closing, whether the user dismissed it or `open` was set false: the
+     * moment another sheet or a dialog can be presented.
+     */
+    readonly dismissed: import("@angular/core").OutputEmitterRef<void>;
+    /** The toolbar items written inside the sheet, which give it a bar to hold them. */
+    private readonly toolbarItems;
+    /** Whether the sheet has a toolbar: it has items for one, and the build has the views. */
+    protected readonly toolbar: Signal<boolean>;
+    /** SwiftUI's sheet stays in the tree; anywhere else it is there while it shows. */
+    protected readonly swiftUI: boolean;
+    protected readonly width: Signal<number | undefined>;
+    /**
+     * Whether the content is in the tree: from when the sheet opens until it has gone, which is
+     * after `open` turns false, so that it slides away with its content still in it.
+     */
+    protected readonly mounted: import("@angular/core").WritableSignal<boolean>;
+    /**
+     * Whether the sheet is sized to its content, as it opened: a view host takes its sizing once,
+     * as it mounts. SwiftUI's sheet is not where it has detents to rest at, nor where it has a
+     * toolbar: a navigation stack fills what it is given, and the bar is no part of the content.
+     * A toolbar that comes or goes while the sheet is open is followed, since the view host is made
+     * again around it.
+     */
+    protected readonly fits: Signal<boolean>;
+    /**
+     * SwiftUI reads how a sheet is presented from modifiers on its content, not from props. The
+     * detents of a sheet not sized to its content are followed while it is open.
+     */
+    protected readonly presentation: Signal<readonly UiModifier[]>;
+    /**
+     * The one view a view host holds. Sized to its content it needs a width of its own, the
+     * window's; otherwise it fills the height the sheet gives it.
+     */
+    protected readonly body: Signal<{
+        width: number | undefined;
+        flexGrow?: undefined;
+        height?: undefined;
+    } | {
+        flexGrow: number;
+        height: number;
+        width?: undefined;
+    }>;
+    /** Whether `open` has turned false on a sheet that has yet to go. */
+    private closing;
+    /** Whether Compose is sliding the sheet away. */
+    private hiding;
+    constructor();
+    protected presented(event: UiBottomSheetPresentedEvent): void;
+    protected dismissRequested(event: NativeSyntheticEvent): void;
+    /**
+     * SwiftUI has finished dismissing the sheet. After a swipe it says so before it reports that the
+     * sheet is no longer presented, so a sheet that has gone while `open`, and was not closing, is
+     * one the user dismissed.
+     */
+    protected gone(event: NativeSyntheticEvent): void;
+    /**
+     * Whether an event is this sheet's own, which it then stops. Events bubble, so a `dismiss` from
+     * a modal in the content arrives here too, and the sheet's own would go on to a listener around
+     * it.
+     */
+    private own;
+    /**
+     * `open` turned false. SwiftUI dismisses its sheet on the prop, and says when it has gone.
+     * Compose shows a sheet for as long as it is in the tree, so one taken out is gone at once:
+     * its `hide` slides it away first, as `@expo/ui`'s own component calls it before unmounting.
+     */
+    private close;
+    /** The sheet has gone: its content leaves the tree. */
+    private finish;
+    static ɵfac: i0.ɵɵFactoryDeclaration<UiBottomSheet, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<UiBottomSheet, "ui-bottom-sheet", never, { "open": { "alias": "open"; "required": false; "isSignal": true; }; "fitToContents": { "alias": "fitToContents"; "required": false; "isSignal": true; }; "detents": { "alias": "detents"; "required": false; "isSignal": true; }; "showDragIndicator": { "alias": "showDragIndicator"; "required": false; "isSignal": true; }; }, { "open": "openChange"; "dismissed": "dismissed"; }, ["toolbarItems"], ["*", "ui-toolbar-item"], true, never>;
+}
 export {};