@bareboard/react-native 0.0.0-stage → 0.1.0

package/dist/components/menu/menu-machine-glue.js

@@ -0,0 +1,16 @@
+import { createContext, useContext, useMemo } from 'react';
+import { useOnUnmount } from '../../hooks/use-on-unmount';
+import { MenuMachine } from './menu-machine';
+export const MenuContext = createContext(null);
+export function useMenuMachineContext(component) {
+    let context = useContext(MenuContext);
+    if (context === null) {
+        throw new Error(`<${component} /> is missing a parent <Menu /> component.`);
+    }
+    return context;
+}
+export function useMenuMachine({ id }) {
+    let machine = useMemo(() => MenuMachine.new({ id }), []);
+    useOnUnmount(() => machine.dispose());
+    return machine;
+}

package/dist/components/menu/menu-machine.d.ts

@@ -0,0 +1,109 @@
+import { Machine } from '../../machine';
+import { Focus } from '../../utils/calculate-active-index';
+export declare enum MenuState {
+    Open = 0,
+    Closed = 1
+}
+export declare enum ActivationTrigger {
+    Pointer = 0,
+    Other = 1
+}
+export type MenuItemDataRef = {
+    current: {
+        textValue?: string;
+        disabled: boolean;
+        order?: number;
+    };
+};
+export interface State {
+    id: string;
+    menuState: MenuState;
+    items: {
+        id: string;
+        top?: number;
+        dataRef: MenuItemDataRef;
+    }[];
+    searchQuery: string;
+    activeItemIndex: number | null;
+    activationTrigger: ActivationTrigger;
+    pendingFocus: {
+        focus: Exclude<Focus, Focus.Specific>;
+    } | {
+        focus: Focus.Specific;
+        id: string;
+    };
+}
+export declare enum ActionTypes {
+    OpenMenu = 0,
+    CloseMenu = 1,
+    GoToItem = 2,
+    Search = 3,
+    ClearSearch = 4,
+    RegisterItems = 5,
+    UnregisterItems = 6,
+    SetItemsTop = 7
+}
+export type Actions = {
+    type: ActionTypes.CloseMenu;
+} | {
+    type: ActionTypes.OpenMenu;
+    focus: {
+        focus: Exclude<Focus, Focus.Specific>;
+    } | {
+        focus: Focus.Specific;
+        id: string;
+    };
+    trigger?: ActivationTrigger;
+} | {
+    type: ActionTypes.GoToItem;
+    focus: Focus.Specific;
+    id: string;
+    trigger?: ActivationTrigger;
+} | {
+    type: ActionTypes.GoToItem;
+    focus: Exclude<Focus, Focus.Specific>;
+    trigger?: ActivationTrigger;
+} | {
+    type: ActionTypes.Search;
+    value: string;
+} | {
+    type: ActionTypes.ClearSearch;
+} | {
+    type: ActionTypes.RegisterItems;
+    items: {
+        id: string;
+        dataRef: MenuItemDataRef;
+    }[];
+} | {
+    type: ActionTypes.UnregisterItems;
+    items: string[];
+} | {
+    type: ActionTypes.SetItemsTop;
+    tops: {
+        id: string;
+        top: number;
+    }[];
+};
+export declare class MenuMachine extends Machine<State, Actions> {
+    static new({ id }: {
+        id: string;
+    }): MenuMachine;
+    constructor(initialState: State);
+    reduce(state: Readonly<State>, action: Actions): State;
+    actions: {
+        setItemTop: (id: string, top: number) => void;
+        registerItem: (id: string, dataRef: MenuItemDataRef) => void;
+        unregisterItem: (id: string) => void;
+        open: (focus: {
+            focus: Exclude<Focus, Focus.Specific>;
+        } | {
+            focus: Focus.Specific;
+            id: string;
+        }) => void;
+        close: () => void;
+    };
+    selectors: {
+        activeDescendantId(state: State): string | undefined;
+        isActive(state: State, id: string): boolean;
+    };
+}

package/dist/components/menu/menu-machine.js

@@ -0,0 +1,238 @@
+import { Machine, batch } from '../../machine';
+import { ActionTypes as StackActionTypes, stackMachines } from '../../machines/stack-machine';
+import { Focus, calculateActiveIndex } from '../../utils/calculate-active-index';
+import { match } from '../../utils/match';
+import { findActiveIndex } from '../../utils/find-active-index';
+import { placeAtTops, sortByOrder } from '../../utils/sort-by-order';
+import { findSearchMatchIndex } from '../../utils/typeahead';
+export var MenuState;
+(function (MenuState) {
+    MenuState[MenuState["Open"] = 0] = "Open";
+    MenuState[MenuState["Closed"] = 1] = "Closed";
+})(MenuState || (MenuState = {}));
+export var ActivationTrigger;
+(function (ActivationTrigger) {
+    ActivationTrigger[ActivationTrigger["Pointer"] = 0] = "Pointer";
+    ActivationTrigger[ActivationTrigger["Other"] = 1] = "Other";
+})(ActivationTrigger || (ActivationTrigger = {}));
+export var ActionTypes;
+(function (ActionTypes) {
+    ActionTypes[ActionTypes["OpenMenu"] = 0] = "OpenMenu";
+    ActionTypes[ActionTypes["CloseMenu"] = 1] = "CloseMenu";
+    ActionTypes[ActionTypes["GoToItem"] = 2] = "GoToItem";
+    ActionTypes[ActionTypes["Search"] = 3] = "Search";
+    ActionTypes[ActionTypes["ClearSearch"] = 4] = "ClearSearch";
+    ActionTypes[ActionTypes["RegisterItems"] = 5] = "RegisterItems";
+    ActionTypes[ActionTypes["UnregisterItems"] = 6] = "UnregisterItems";
+    ActionTypes[ActionTypes["SetItemsTop"] = 7] = "SetItemsTop";
+})(ActionTypes || (ActionTypes = {}));
+let reducers = {
+    [ActionTypes.CloseMenu](state) {
+        if (state.menuState === MenuState.Closed)
+            return state;
+        return {
+            ...state,
+            activeItemIndex: null,
+            pendingFocus: { focus: Focus.Nothing },
+            menuState: MenuState.Closed,
+        };
+    },
+    [ActionTypes.OpenMenu](state, action) {
+        if (state.menuState === MenuState.Open)
+            return state;
+        return {
+            ...state,
+            pendingFocus: action.focus,
+            menuState: MenuState.Open,
+        };
+    },
+    [ActionTypes.GoToItem]: (state, action) => {
+        if (state.menuState === MenuState.Closed)
+            return state;
+        let base = {
+            ...state,
+            searchQuery: '',
+            activationTrigger: action.trigger ?? ActivationTrigger.Other,
+        };
+        // There is no need to look at the items if we know that we don't want to focus anything
+        if (action.focus === Focus.Nothing) {
+            return {
+                ...base,
+                activeItemIndex: null,
+            };
+        }
+        // There is no need to look at the items if we know exactly where to go
+        if (action.focus === Focus.Specific) {
+            return {
+                ...base,
+                activeItemIndex: state.items.findIndex((o) => o.id === action.id),
+            };
+        }
+        let activeItemIndex = calculateActiveIndex(action, {
+            resolveItems: () => state.items,
+            resolveActiveIndex: () => state.activeItemIndex,
+            resolveId: (item) => item.id,
+            resolveDisabled: (item) => item.dataRef.current.disabled,
+        });
+        return {
+            ...base,
+            activeItemIndex,
+        };
+    },
+    [ActionTypes.Search]: (state, action) => {
+        let wasAlreadySearching = state.searchQuery !== '';
+        let searchQuery = state.searchQuery + action.value.toLowerCase();
+        let matchIdx = findSearchMatchIndex(state.items, state.activeItemIndex, wasAlreadySearching, (item) => !!item.dataRef.current.textValue?.startsWith(searchQuery) && !item.dataRef.current.disabled);
+        if (matchIdx === -1 || matchIdx === state.activeItemIndex)
+            return { ...state, searchQuery };
+        return {
+            ...state,
+            searchQuery,
+            activeItemIndex: matchIdx,
+            activationTrigger: ActivationTrigger.Other,
+        };
+    },
+    [ActionTypes.SetItemsTop]: (state, action) => {
+        let items = placeAtTops(state.items, action.tops);
+        if (!items)
+            return state;
+        return {
+            ...state,
+            items,
+            activeItemIndex: findActiveIndex(state.items, state.activeItemIndex, items),
+        };
+    },
+    [ActionTypes.ClearSearch](state) {
+        if (state.searchQuery === '')
+            return state;
+        return { ...state, searchQuery: '' };
+    },
+    [ActionTypes.RegisterItems]: (state, action) => {
+        let items = sortByOrder(state.items.concat(action.items.map((item) => item)));
+        // Sorting can move the active item, so look it up again.
+        let activeItemIndex = findActiveIndex(state.items, state.activeItemIndex, items);
+        if (state.pendingFocus.focus !== Focus.Nothing) {
+            activeItemIndex = calculateActiveIndex(state.pendingFocus, {
+                resolveItems: () => items,
+                resolveActiveIndex: () => state.activeItemIndex,
+                resolveId: (item) => item.id,
+                resolveDisabled: (item) => item.dataRef.current.disabled,
+            });
+        }
+        return {
+            ...state,
+            items,
+            activeItemIndex,
+            pendingFocus: { focus: Focus.Nothing },
+        };
+    },
+    [ActionTypes.UnregisterItems]: (state, action) => {
+        let items = state.items;
+        let idxs = [];
+        let ids = new Set(action.items);
+        for (let [idx, item] of items.entries()) {
+            if (ids.has(item.id)) {
+                idxs.push(idx);
+                ids.delete(item.id);
+                if (ids.size === 0)
+                    break;
+            }
+        }
+        if (idxs.length > 0) {
+            items = items.slice();
+            for (let idx of idxs.reverse()) {
+                items.splice(idx, 1);
+            }
+        }
+        return {
+            ...state,
+            items,
+            activeItemIndex: findActiveIndex(state.items, state.activeItemIndex, items),
+            activationTrigger: ActivationTrigger.Other,
+        };
+    },
+};
+export class MenuMachine extends Machine {
+    static new({ id }) {
+        return new MenuMachine({
+            id,
+            menuState: MenuState.Closed,
+            items: [],
+            searchQuery: '',
+            activeItemIndex: null,
+            activationTrigger: ActivationTrigger.Other,
+            pendingFocus: { focus: Focus.Nothing },
+        });
+    }
+    constructor(initialState) {
+        super(initialState);
+        // When the menu is open, and it's not on the top of the hierarchy, we
+        // should close it again.
+        {
+            let id = this.state.id;
+            let stackMachine = stackMachines.get(null);
+            this.disposables.add(stackMachine.on(StackActionTypes.Push, (state) => {
+                if (!stackMachine.selectors.isTop(state, id) && this.state.menuState === MenuState.Open) {
+                    this.send({ type: ActionTypes.CloseMenu });
+                }
+            }));
+            this.on(ActionTypes.OpenMenu, () => stackMachine.actions.push(id));
+            this.on(ActionTypes.CloseMenu, () => stackMachine.actions.pop(id));
+        }
+    }
+    reduce(state, action) {
+        return match(action.type, reducers, state, action);
+    }
+    actions = {
+        // Batched version, so the items that mount together are sorted once
+        setItemTop: batch(() => {
+            let tops = [];
+            return [
+                (id, top) => tops.push({ id, top }),
+                () => this.send({ type: ActionTypes.SetItemsTop, tops: tops.splice(0) }),
+            ];
+        }),
+        // Batched version to register multiple items at the same time
+        registerItem: batch(() => {
+            let items = [];
+            let seen = new Set();
+            return [
+                (id, dataRef) => {
+                    if (seen.has(dataRef))
+                        return;
+                    seen.add(dataRef);
+                    items.push({ id, dataRef });
+                },
+                () => {
+                    seen.clear();
+                    return this.send({ type: ActionTypes.RegisterItems, items: items.splice(0) });
+                },
+            ];
+        }),
+        unregisterItem: batch(() => {
+            let items = [];
+            return [
+                (id) => items.push(id),
+                () => this.send({ type: ActionTypes.UnregisterItems, items: items.splice(0) }),
+            ];
+        }),
+        open: (focus) => {
+            this.send({ type: ActionTypes.OpenMenu, focus });
+        },
+        close: () => {
+            this.send({ type: ActionTypes.CloseMenu });
+        },
+    };
+    selectors = {
+        activeDescendantId(state) {
+            let activeItemIndex = state.activeItemIndex;
+            let items = state.items;
+            return activeItemIndex === null ? undefined : items[activeItemIndex]?.id;
+        },
+        isActive(state, id) {
+            let activeItemIndex = state.activeItemIndex;
+            let items = state.items;
+            return activeItemIndex !== null ? items[activeItemIndex]?.id === id : false;
+        },
+    };
+}

package/dist/components/menu/menu.d.ts

@@ -0,0 +1,34 @@
+import { type ForwardRefExoticComponent, type RefAttributes } from 'react';
+import { type PressableProps, type ViewProps, type ViewInstance } from 'react-native';
+import { type RenderChildren } from '../../utils/render';
+export type MenuRenderPropArg = {
+    open: boolean;
+    close: () => void;
+};
+export type MenuProps = {
+    children?: RenderChildren<MenuRenderPropArg>;
+};
+export declare function Menu({ children }: MenuProps): import("react").JSX.Element;
+export type MenuButtonRenderPropArg = {
+    open: boolean;
+    disabled: boolean;
+    active: boolean;
+};
+export type MenuButtonProps = Omit<PressableProps, 'children' | 'disabled'> & {
+    disabled?: boolean;
+    children?: RenderChildren<MenuButtonRenderPropArg>;
+};
+export declare const MenuButton: ForwardRefExoticComponent<MenuButtonProps & RefAttributes<ViewInstance>>;
+export type MenuItemsProps = ViewProps;
+export declare const MenuItems: ForwardRefExoticComponent<MenuItemsProps & RefAttributes<ViewInstance>>;
+export type MenuItemRenderPropArg = {
+    disabled: boolean;
+    active: boolean;
+};
+export type MenuItemProps = Omit<PressableProps, 'children' | 'disabled'> & {
+    disabled?: boolean;
+    textValue?: string;
+    order?: number;
+    children?: RenderChildren<MenuItemRenderPropArg>;
+};
+export declare const MenuItem: ForwardRefExoticComponent<MenuItemProps & RefAttributes<ViewInstance>>;

package/dist/components/menu/menu.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useId } from 'react';
+import { Pressable, View, } from 'react-native';
+import { useIsoMorphicEffect } from '../../hooks/use-iso-morphic-effect';
+import { useLatestValue } from '../../hooks/use-latest-value';
+import { useSlice } from '../../react-glue';
+import { Focus } from '../../utils/calculate-active-index';
+import { resolveChildren } from '../../utils/render';
+import { MenuState } from './menu-machine';
+import { MenuContext, useMenuMachine, useMenuMachineContext } from './menu-machine-glue';
+export function Menu({ children }) {
+    let id = useId();
+    let machine = useMenuMachine({ id });
+    let open = useSlice(machine, (state) => state.menuState === MenuState.Open);
+    return (_jsx(MenuContext.Provider, { value: machine, children: resolveChildren(children, { open, close: machine.actions.close }) }));
+}
+export const MenuButton = forwardRef(function MenuButtonFn(props, ref) {
+    let machine = useMenuMachineContext('MenuButton');
+    let open = useSlice(machine, (state) => state.menuState === MenuState.Open);
+    let { disabled = false, children, onPress, ...theirProps } = props;
+    let handlePress = (event) => {
+        onPress?.(event);
+        if (open) {
+            machine.actions.close();
+        }
+        else {
+            machine.actions.open({ focus: Focus.Nothing });
+        }
+    };
+    return (_jsx(Pressable, { ...theirProps, ref: ref, disabled: disabled, accessibilityRole: "button", accessibilityState: { ...theirProps.accessibilityState, expanded: open, disabled }, onPress: handlePress, children: ({ pressed }) => resolveChildren(children, { open, disabled, active: pressed }) }));
+});
+export const MenuItems = forwardRef(function MenuItemsFn(props, ref) {
+    let machine = useMenuMachineContext('MenuItems');
+    let open = useSlice(machine, (state) => state.menuState === MenuState.Open);
+    if (!open)
+        return null;
+    return _jsx(View, { ...props, ref: ref, accessibilityRole: "menu" });
+});
+export const MenuItem = forwardRef(function MenuItemFn(props, ref) {
+    let machine = useMenuMachineContext('MenuItem');
+    let id = useId();
+    let { disabled = false, textValue, order, children, onPress, onLayout, ...theirProps } = props;
+    let dataRef = useLatestValue({ disabled, textValue, order });
+    useIsoMorphicEffect(() => {
+        machine.actions.registerItem(id, dataRef);
+        return () => machine.actions.unregisterItem(id);
+    }, [id, machine]);
+    let active = useSlice(machine, (state) => machine.selectors.isActive(state, id));
+    let handlePress = (event) => {
+        if (disabled)
+            return;
+        onPress?.(event);
+        machine.actions.close();
+    };
+    let handleLayout = (event) => {
+        onLayout?.(event);
+        machine.actions.setItemTop(id, event.nativeEvent.layout.y);
+    };
+    return (_jsx(Pressable, { ...theirProps, ref: ref, disabled: disabled, accessibilityRole: "menuitem", accessibilityState: { ...theirProps.accessibilityState, disabled }, onPress: handlePress, onLayout: handleLayout, children: ({ pressed }) => resolveChildren(children, { disabled, active: active || pressed }) }));
+});

package/dist/components/menu-heading/menu-heading.d.ts

@@ -0,0 +1,4 @@
+import { type ForwardRefExoticComponent, type RefAttributes } from 'react';
+import { type TextProps, type TextInstance } from 'react-native';
+export type MenuHeadingProps = TextProps;
+export declare const MenuHeading: ForwardRefExoticComponent<MenuHeadingProps & RefAttributes<TextInstance>>;

package/dist/components/menu-heading/menu-heading.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { Text } from 'react-native';
+export const MenuHeading = forwardRef(function MenuHeadingFn(props, ref) {
+    return _jsx(Text, { ...props, ref: ref, accessibilityRole: "header" });
+});

package/dist/components/menu-section/menu-section.d.ts

@@ -0,0 +1,4 @@
+import { type ForwardRefExoticComponent, type RefAttributes } from 'react';
+import { type ViewProps, type ViewInstance } from 'react-native';
+export type MenuSectionProps = ViewProps;
+export declare const MenuSection: ForwardRefExoticComponent<MenuSectionProps & RefAttributes<ViewInstance>>;

package/dist/components/menu-section/menu-section.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { View } from 'react-native';
+export const MenuSection = forwardRef(function MenuSectionFn(props, ref) {
+    return _jsx(View, { ...props, ref: ref, accessibilityRole: "none" });
+});

package/dist/components/menu-separator/menu-separator.d.ts

@@ -0,0 +1,4 @@
+import { type ForwardRefExoticComponent, type RefAttributes } from 'react';
+import { type ViewProps, type ViewInstance } from 'react-native';
+export type MenuSeparatorProps = ViewProps;
+export declare const MenuSeparator: ForwardRefExoticComponent<MenuSeparatorProps & RefAttributes<ViewInstance>>;

package/dist/components/menu-separator/menu-separator.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { View } from 'react-native';
+export const MenuSeparator = forwardRef(function MenuSeparatorFn(props, ref) {
+    return _jsx(View, { ...props, ref: ref, accessibilityElementsHidden: true });
+});

package/dist/components/popover/popover-machine-glue.d.ts

@@ -0,0 +1,6 @@
+import { PopoverMachine } from './popover-machine';
+export declare const PopoverContext: import("react").Context<PopoverMachine | null>;
+export declare function usePopoverMachineContext(component: string): PopoverMachine;
+export declare function usePopoverMachine({ id }: {
+    id: string;
+}): PopoverMachine;

package/dist/components/popover/popover-machine-glue.js

@@ -0,0 +1,16 @@
+import { createContext, useContext, useMemo } from 'react';
+import { useOnUnmount } from '../../hooks/use-on-unmount';
+import { PopoverMachine } from './popover-machine';
+export const PopoverContext = createContext(null);
+export function usePopoverMachineContext(component) {
+    let context = useContext(PopoverContext);
+    if (context === null) {
+        throw new Error(`<${component} /> is missing a parent <Popover /> component.`);
+    }
+    return context;
+}
+export function usePopoverMachine({ id }) {
+    let machine = useMemo(() => PopoverMachine.new({ id }), []);
+    useOnUnmount(() => machine.dispose());
+    return machine;
+}

package/dist/components/popover/popover-machine.d.ts

@@ -0,0 +1,30 @@
+import { Machine } from '../../machine';
+export declare enum PopoverStates {
+    Open = 0,
+    Closed = 1
+}
+interface State {
+    id: string;
+    popoverState: PopoverStates;
+}
+export declare enum ActionTypes {
+    OpenPopover = 0,
+    ClosePopover = 1
+}
+export type Actions = {
+    type: ActionTypes.OpenPopover;
+} | {
+    type: ActionTypes.ClosePopover;
+};
+export declare class PopoverMachine extends Machine<State, Actions> {
+    static new({ id }: {
+        id: string;
+    }): PopoverMachine;
+    constructor(initialState: State);
+    reduce(state: Readonly<State>, action: Actions): State;
+    actions: {
+        close: () => void;
+        open: () => void;
+    };
+}
+export {};

package/dist/components/popover/popover-machine.js

@@ -0,0 +1,49 @@
+import { Machine } from '../../machine';
+import { stackMachines } from '../../machines/stack-machine';
+import { match } from '../../utils/match';
+export var PopoverStates;
+(function (PopoverStates) {
+    PopoverStates[PopoverStates["Open"] = 0] = "Open";
+    PopoverStates[PopoverStates["Closed"] = 1] = "Closed";
+})(PopoverStates || (PopoverStates = {}));
+export var ActionTypes;
+(function (ActionTypes) {
+    ActionTypes[ActionTypes["OpenPopover"] = 0] = "OpenPopover";
+    ActionTypes[ActionTypes["ClosePopover"] = 1] = "ClosePopover";
+})(ActionTypes || (ActionTypes = {}));
+let reducers = {
+    [ActionTypes.OpenPopover]: (state) => {
+        if (state.popoverState === PopoverStates.Open)
+            return state;
+        return { ...state, popoverState: PopoverStates.Open };
+    },
+    [ActionTypes.ClosePopover](state) {
+        if (state.popoverState === PopoverStates.Closed)
+            return state;
+        return { ...state, popoverState: PopoverStates.Closed };
+    },
+};
+export class PopoverMachine extends Machine {
+    static new({ id }) {
+        return new PopoverMachine({
+            id,
+            popoverState: PopoverStates.Closed,
+        });
+    }
+    constructor(initialState) {
+        super(initialState);
+        {
+            let id = this.state.id;
+            let stackMachine = stackMachines.get(null);
+            this.on(ActionTypes.OpenPopover, () => stackMachine.actions.push(id));
+            this.on(ActionTypes.ClosePopover, () => stackMachine.actions.pop(id));
+        }
+    }
+    reduce(state, action) {
+        return match(action.type, reducers, state, action);
+    }
+    actions = {
+        close: () => this.send({ type: ActionTypes.ClosePopover }),
+        open: () => this.send({ type: ActionTypes.OpenPopover }),
+    };
+}

package/dist/components/popover/popover.d.ts

@@ -0,0 +1,25 @@
+import { type ForwardRefExoticComponent, type RefAttributes } from 'react';
+import { type PressableProps, type ViewProps, type ViewInstance } from 'react-native';
+import { type RenderChildren } from '../../utils/render';
+export type PopoverRenderPropArg = {
+    open: boolean;
+    close: () => void;
+};
+export type PopoverProps = {
+    children?: RenderChildren<PopoverRenderPropArg>;
+};
+export declare function Popover({ children }: PopoverProps): import("react").JSX.Element;
+export type PopoverButtonRenderPropArg = {
+    open: boolean;
+    disabled: boolean;
+    active: boolean;
+};
+export type PopoverButtonProps = Omit<PressableProps, 'children' | 'disabled'> & {
+    disabled?: boolean;
+    children?: RenderChildren<PopoverButtonRenderPropArg>;
+};
+export declare const PopoverButton: ForwardRefExoticComponent<PopoverButtonProps & RefAttributes<ViewInstance>>;
+export type PopoverPanelProps = ViewProps & {
+    unmount?: boolean;
+};
+export declare const PopoverPanel: ForwardRefExoticComponent<PopoverPanelProps & RefAttributes<ViewInstance>>;

package/dist/components/popover/popover.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useId } from 'react';
+import { Pressable, View, } from 'react-native';
+import { useSlice } from '../../react-glue';
+import { resolveChildren } from '../../utils/render';
+import { PopoverStates } from './popover-machine';
+import { PopoverContext, usePopoverMachine, usePopoverMachineContext } from './popover-machine-glue';
+// The web popover closes on outside press and Escape. React Native has neither, so close it with
+// `PopoverBackdrop` or from the panel content with the `close` render prop.
+export function Popover({ children }) {
+    let id = useId();
+    let machine = usePopoverMachine({ id });
+    let open = useSlice(machine, (state) => state.popoverState === PopoverStates.Open);
+    return (_jsx(PopoverContext.Provider, { value: machine, children: resolveChildren(children, { open, close: machine.actions.close }) }));
+}
+export const PopoverButton = forwardRef(function PopoverButtonFn(props, ref) {
+    let machine = usePopoverMachineContext('PopoverButton');
+    let open = useSlice(machine, (state) => state.popoverState === PopoverStates.Open);
+    let { disabled = false, children, onPress, ...theirProps } = props;
+    let handlePress = (event) => {
+        onPress?.(event);
+        if (open) {
+            machine.actions.close();
+        }
+        else {
+            machine.actions.open();
+        }
+    };
+    return (_jsx(Pressable, { ...theirProps, ref: ref, disabled: disabled, accessibilityRole: "button", accessibilityState: { ...theirProps.accessibilityState, expanded: open, disabled }, onPress: handlePress, children: ({ pressed }) => resolveChildren(children, { open, disabled, active: pressed }) }));
+});
+export const PopoverPanel = forwardRef(function PopoverPanelFn({ unmount = true, ...theirProps }, ref) {
+    let machine = usePopoverMachineContext('PopoverPanel');
+    let open = useSlice(machine, (state) => state.popoverState === PopoverStates.Open);
+    if (!open && unmount)
+        return null;
+    return _jsx(View, { ...theirProps, ref: ref, style: [theirProps.style, !open && { display: 'none' }] });
+});