@ng-native/expo 0.4.0 → 0.6.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>;
@@ -157,9 +184,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 +267,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 +310,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 +631,145 @@ 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 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.
+ *
+ * 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.
+ */
+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>;
+    private readonly functions;
+    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.
+     */
+    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>;
+    /** 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.
+     */
+    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"; }, never, ["*"], true, never>;
+}
 export {};

package/dist/expo-ui-components.js

@@ -23,9 +23,12 @@
  * 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 { Component, DestroyRef, forwardRef, ElementRef, booleanAttribute, computed, inject, input, model, output, signal, } from '@angular/core';
-import { HostEngine, keepNativeView, nativePlatform, } from '@ng-native/fabric';
+import { Component, DestroyRef, forwardRef, ElementRef, InjectionToken, Injector, afterNextRender, booleanAttribute, computed, effect, inject, input, linkedSignal, model, output, signal, untracked, viewChild, } from '@angular/core';
+import { Engine, HostEngine, keepNativeView, nativePlatform, } from '@ng-native/fabric';
+import { optional } from "./native.js";
 import { optionalBoolean, optionalNumber } from "./transforms.js";
+import { UiBottomSheetContent } from "./ui-bottom-sheet-content.js";
+import { UiBottomSheetView } from "./ui-bottom-sheet-view.js";
 import * as i0 from "@angular/core";
 /**
  * Says the component's host is the `@expo/ui` view its selector is registered as. A component of
@@ -1194,4 +1197,310 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImpor
                     host: { '[title]': 'title()', '[modifiers]': 'modifiers()' },
                 }]
         }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], modifiers: [{ type: i0.Input, args: [{ isSignal: true, alias: "modifiers", required: false }] }] } });
+/**
+ * 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 class UiGroup {
+    nativeView = nativeView();
+    modifiers = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "modifiers" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: UiGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.2.0", type: UiGroup, isStandalone: true, selector: "ui-group", inputs: { modifiers: { classPropertyName: "modifiers", publicName: "modifiers", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "modifiers": "modifiers()" } }, ngImport: i0, template: '<ng-content />', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: UiGroup, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-group',
+                    template: '<ng-content />',
+                    host: { '[modifiers]': 'modifiers()' },
+                }]
+        }], propDecorators: { modifiers: [{ type: i0.Input, args: [{ isSignal: true, alias: "modifiers", required: false }] }] } });
+/** The detents of a sheet given none and not sized to its content. */
+const HALF_AND_FULL = ['medium', 'large'];
+/** The window's width as the engine knows it, or undefined before the platform has said. */
+function windowWidth() {
+    const node = inject(ElementRef).nativeElement;
+    const engine = (node.host ?? inject(HostEngine));
+    const read = () => engine.viewport?.width || undefined;
+    const width = signal(read(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
+    const stop = engine.watchViewport?.(() => width.set(read()));
+    if (stop)
+        inject(DestroyRef).onDestroy(stop);
+    return width;
+}
+/**
+ * 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.
+ *
+ * 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.
+ */
+export 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 SOURCE = new InjectionToken('angular-native.bottomSheetSource', {
+        factory: () => optional(() => {
+            const core = require('expo-modules-core');
+            const module = core.requireOptionalNativeModule('ExpoUI');
+            return module ? (module.ViewPrototypes?.['ExpoUI_ModalBottomSheetView'] ?? {}) : null;
+        }),
+    });
+    functions = inject(UiBottomSheet.SOURCE);
+    engine = inject(Engine, { optional: true });
+    injector = inject(Injector);
+    sheet = viewChild('sheet', { ...(ngDevMode ? { debugName: "sheet" } : /* istanbul ignore next */ {}), read: ElementRef });
+    /** Whether the sheet is on screen. Written back as false when the user dismisses it. */
+    open = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    /**
+     * 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.
+     */
+    fitToContents = input(false, { ...(ngDevMode ? { debugName: "fitToContents" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * 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.
+     */
+    detents = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "detents" }] : /* istanbul ignore next */ []));
+    /** Whether the grabber shows at the top of the sheet. */
+    showDragIndicator = input(true, { ...(ngDevMode ? { debugName: "showDragIndicator" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * 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.
+     */
+    dismissed = output();
+    /** SwiftUI's sheet stays in the tree; anywhere else it is there while it shows. */
+    swiftUI = nativePlatform() === 'ios';
+    width = windowWidth();
+    /**
+     * 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.
+     */
+    mounted = linkedSignal({ ...(ngDevMode ? { debugName: "mounted" } : /* istanbul ignore next */ {}), source: this.open,
+        computation: (open, previous) => open || (previous?.value ?? false) });
+    /**
+     * 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.
+     */
+    fits = computed(() => {
+        this.mounted();
+        return untracked(() => this.fitToContents() && !(this.swiftUI && this.detents()?.length));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fits" }] : /* istanbul ignore next */ []));
+    /**
+     * 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.
+     */
+    presentation = computed(() => [
+        this.fits()
+            ? { $type: 'presentationSizing', sizing: 'fitted' }
+            : {
+                $type: 'presentationDetents',
+                detents: this.detents()?.length ? this.detents() : HALF_AND_FULL,
+            },
+        {
+            $type: 'presentationDragIndicator',
+            visibility: this.showDragIndicator() ? 'visible' : 'hidden',
+        },
+    ], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "presentation" }] : /* istanbul ignore next */ []));
+    /**
+     * 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.
+     */
+    body = computed(() => this.fits() ? { width: this.width() } : { flexGrow: 1, height: 0 }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "body" }] : /* istanbul ignore next */ []));
+    /** Whether `open` has turned false on a sheet that has yet to go. */
+    closing = false;
+    /** Whether Compose is sliding the sheet away. */
+    hiding = false;
+    constructor() {
+        effect(() => {
+            if (!this.open())
+                untracked(() => this.close());
+        });
+    }
+    presented(event) {
+        if (!this.own(event))
+            return;
+        const isPresented = event.nativeEvent?.isPresented;
+        if (typeof isPresented === 'boolean')
+            this.open.set(isPresented);
+    }
+    dismissRequested(event) {
+        if (this.own(event))
+            this.open.set(false);
+    }
+    /**
+     * 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.
+     */
+    gone(event) {
+        if (!this.own(event))
+            return;
+        if (!this.closing)
+            this.open.set(false);
+        this.finish();
+    }
+    /**
+     * 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.
+     */
+    own(event) {
+        const target = event.target;
+        if (target != null && target !== this.sheet()?.nativeElement)
+            return false;
+        event.stopPropagation();
+        return true;
+    }
+    /**
+     * `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.
+     */
+    close() {
+        if (!this.mounted())
+            return;
+        // No `@expo/ui` in the build: no sheet is there to slide away, or to say that it has.
+        if (!this.functions)
+            return this.finish();
+        this.closing = true;
+        if (this.swiftUI || this.hiding)
+            return;
+        const node = this.sheet()?.nativeElement;
+        const nativeTag = node ? (this.engine?.tagOf(node) ?? null) : null;
+        const hidden = nativeTag === null ? undefined : optional(() => this.functions?.hide?.call({ nativeTag }));
+        if (!hidden)
+            return this.finish();
+        this.hiding = true;
+        const done = () => {
+            this.hiding = false;
+            this.finish();
+        };
+        hidden.then(done, done);
+    }
+    /** The sheet has gone: its content leaves the tree. */
+    finish() {
+        this.closing = false;
+        if (!this.mounted())
+            return;
+        if (!this.open()) {
+            this.mounted.set(false);
+            this.dismissed.emit();
+            return;
+        }
+        // Opened again before it had gone. SwiftUI presents the sheet it still has; Compose hid the
+        // one it was asked to, and shows a sheet only as it enters the tree.
+        if (this.swiftUI)
+            return;
+        this.mounted.set(false);
+        afterNextRender(() => this.mounted.set(this.open()), { injector: this.injector });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: UiBottomSheet, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.0", type: UiBottomSheet, isStandalone: true, selector: "ui-bottom-sheet", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, fitToContents: { classPropertyName: "fitToContents", publicName: "fitToContents", isSignal: true, isRequired: false, transformFunction: null }, detents: { classPropertyName: "detents", publicName: "detents", isSignal: true, isRequired: false, transformFunction: null }, showDragIndicator: { classPropertyName: "showDragIndicator", publicName: "showDragIndicator", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", dismissed: "dismissed" }, host: { properties: { "style.position": "\"absolute\"" } }, viewQueries: [{ propertyName: "sheet", first: true, predicate: ["sheet"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: `
+    <ng-template #content><ng-content /></ng-template>
+    @if (swiftUI) {
+      <ui-host style="position: absolute" pointerEvents="none" [style.width.px]="width()">
+        <ui-bottom-sheet-view
+          #sheet
+          [isPresented]="open()"
+          [fitToContents]="fits()"
+          (isPresentedChange)="presented($event)"
+          (dismiss)="gone($event)"
+        >
+          @if (mounted()) {
+            <ui-group [modifiers]="presentation()">
+              <ui-view-host layoutRoot [matchContents]="fits() || undefined">
+                <ui-bottom-sheet-content [style]="body()" [content]="content" />
+              </ui-view-host>
+            </ui-group>
+          }
+        </ui-bottom-sheet-view>
+      </ui-host>
+    } @else if (mounted()) {
+      <ui-host style="position: absolute" pointerEvents="none" [style.width.px]="width()">
+        <ui-bottom-sheet-view
+          #sheet
+          [showDragHandle]="showDragIndicator()"
+          [skipPartiallyExpanded]="fits()"
+          (dismissRequest)="dismissRequested($event)"
+        >
+          <ui-view-host layoutRoot [matchContents]="fits() || undefined">
+            <ui-bottom-sheet-content [style]="body()" [content]="content" />
+          </ui-view-host>
+        </ui-bottom-sheet-view>
+      </ui-host>
+    }
+  `, isInline: true, dependencies: [{ kind: "component", type: UiBottomSheetContent, selector: "ui-bottom-sheet-content", inputs: ["content"] }, { kind: "component", type: UiBottomSheetView, selector: "ui-bottom-sheet-view", inputs: ["isPresented", "fitToContents", "showDragHandle", "skipPartiallyExpanded"], outputs: ["isPresentedChange", "dismiss", "dismissRequest"] }, { kind: "component", type: UiGroup, selector: "ui-group", inputs: ["modifiers"] }, { kind: "component", type: UiHost, selector: "ui-host", inputs: ["matchContents", "ignoreSafeArea", "useViewportSizeMeasurement"] }, { kind: "component", type: UiViewHost, selector: "ui-view-host", inputs: ["matchContents", "layoutRoot", "modifiers"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: UiBottomSheet, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-bottom-sheet',
+                    imports: [UiBottomSheetContent, UiBottomSheetView, UiGroup, UiHost, UiViewHost],
+                    template: `
+    <ng-template #content><ng-content /></ng-template>
+    @if (swiftUI) {
+      <ui-host style="position: absolute" pointerEvents="none" [style.width.px]="width()">
+        <ui-bottom-sheet-view
+          #sheet
+          [isPresented]="open()"
+          [fitToContents]="fits()"
+          (isPresentedChange)="presented($event)"
+          (dismiss)="gone($event)"
+        >
+          @if (mounted()) {
+            <ui-group [modifiers]="presentation()">
+              <ui-view-host layoutRoot [matchContents]="fits() || undefined">
+                <ui-bottom-sheet-content [style]="body()" [content]="content" />
+              </ui-view-host>
+            </ui-group>
+          }
+        </ui-bottom-sheet-view>
+      </ui-host>
+    } @else if (mounted()) {
+      <ui-host style="position: absolute" pointerEvents="none" [style.width.px]="width()">
+        <ui-bottom-sheet-view
+          #sheet
+          [showDragHandle]="showDragIndicator()"
+          [skipPartiallyExpanded]="fits()"
+          (dismissRequest)="dismissRequested($event)"
+        >
+          <ui-view-host layoutRoot [matchContents]="fits() || undefined">
+            <ui-bottom-sheet-content [style]="body()" [content]="content" />
+          </ui-view-host>
+        </ui-bottom-sheet-view>
+      </ui-host>
+    }
+  `,
+                    host: { '[style.position]': '"absolute"' },
+                }]
+        }], ctorParameters: () => [], propDecorators: { sheet: [{ type: i0.ViewChild, args: ['sheet', { ...{
+                            read: ElementRef,
+                        }, isSignal: true }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], fitToContents: [{ type: i0.Input, args: [{ isSignal: true, alias: "fitToContents", required: false }] }], detents: [{ type: i0.Input, args: [{ isSignal: true, alias: "detents", required: false }] }], showDragIndicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDragIndicator", required: false }] }], dismissed: [{ type: i0.Output, args: ["dismissed"] }] } });
 //# sourceMappingURL=expo-ui-components.js.map