@bareboard/react-native 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,140 @@
+import { Machine } from '../../machine';
+import { Focus } from '../../utils/calculate-active-index';
+interface MutableRefObject<T> {
+    current: T;
+}
+export declare enum ListboxStates {
+    Open = 0,
+    Closed = 1
+}
+export declare enum ValueMode {
+    Single = 0,
+    Multi = 1
+}
+export declare enum ActivationTrigger {
+    Pointer = 0,
+    Other = 1
+}
+type ListboxOptionDataRef<T> = MutableRefObject<{
+    textValue?: string;
+    disabled: boolean;
+    value: T;
+    order?: number;
+}>;
+interface State<T> {
+    id: string;
+    dataRef: MutableRefObject<{
+        value: unknown;
+        disabled: boolean;
+        mode: ValueMode;
+        onChange: (value: T) => void;
+        compare(a: unknown, z: unknown): boolean;
+        isSelected(value: unknown): boolean;
+    }>;
+    listboxState: ListboxStates;
+    options: {
+        id: string;
+        top?: number;
+        dataRef: ListboxOptionDataRef<T>;
+    }[];
+    searchQuery: string;
+    activeOptionIndex: number | null;
+    activationTrigger: ActivationTrigger;
+    frozenValue: boolean;
+    pendingFocus: {
+        focus: Exclude<Focus, Focus.Specific>;
+    } | {
+        focus: Focus.Specific;
+        id: string;
+    };
+}
+export declare enum ActionTypes {
+    OpenListbox = 0,
+    CloseListbox = 1,
+    GoToOption = 2,
+    Search = 3,
+    ClearSearch = 4,
+    SelectOption = 5,
+    RegisterOptions = 6,
+    UnregisterOptions = 7,
+    SetOptionsTop = 8
+}
+type Actions<T> = {
+    type: ActionTypes.CloseListbox;
+} | {
+    type: ActionTypes.OpenListbox;
+    focus: {
+        focus: Exclude<Focus, Focus.Specific>;
+    } | {
+        focus: Focus.Specific;
+        id: string;
+    };
+} | {
+    type: ActionTypes.GoToOption;
+    focus: Focus.Specific;
+    id: string;
+    trigger?: ActivationTrigger;
+} | {
+    type: ActionTypes.GoToOption;
+    focus: Exclude<Focus, Focus.Specific>;
+    trigger?: ActivationTrigger;
+} | {
+    type: ActionTypes.Search;
+    value: string;
+} | {
+    type: ActionTypes.ClearSearch;
+} | {
+    type: ActionTypes.SelectOption;
+    value: T;
+} | {
+    type: ActionTypes.RegisterOptions;
+    options: {
+        id: string;
+        dataRef: ListboxOptionDataRef<T>;
+    }[];
+} | {
+    type: ActionTypes.UnregisterOptions;
+    options: string[];
+} | {
+    type: ActionTypes.SetOptionsTop;
+    tops: {
+        id: string;
+        top: number;
+    }[];
+};
+export declare class ListboxMachine<T> extends Machine<State<T>, Actions<T>> {
+    static new({ id }: {
+        id: string;
+    }): ListboxMachine<unknown>;
+    constructor(initialState: State<T>);
+    actions: {
+        onChange: (newValue: T) => void;
+        setOptionTop: (id: string, top: number) => void;
+        registerOption: (id: string, dataRef: ListboxOptionDataRef<T>) => void;
+        unregisterOption: (id: string) => void;
+        goToOption: (focus: {
+            focus: Focus.Specific;
+            id: string;
+        } | {
+            focus: Exclude<Focus, Focus.Specific>;
+        }, trigger?: ActivationTrigger | undefined) => void;
+        closeListbox: () => void;
+        openListbox: (focus: {
+            focus: Exclude<Focus, Focus.Specific>;
+        } | {
+            focus: Focus.Specific;
+            id: string;
+        }) => void;
+        selectActiveOption: () => void;
+        selectOption: (value: T) => void;
+        search: (value: string) => void;
+        clearSearch: () => void;
+    };
+    selectors: {
+        activeDescendantId(state: State<T>): string | undefined;
+        isActive(state: State<T>, id: string): boolean;
+        hasFrozenValue(state: State<T>): boolean;
+    };
+    reduce(state: Readonly<State<T>>, action: Actions<T>): State<T>;
+}
+export {};

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

@@ -0,0 +1,347 @@
+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 ListboxStates;
+(function (ListboxStates) {
+    ListboxStates[ListboxStates["Open"] = 0] = "Open";
+    ListboxStates[ListboxStates["Closed"] = 1] = "Closed";
+})(ListboxStates || (ListboxStates = {}));
+export var ValueMode;
+(function (ValueMode) {
+    ValueMode[ValueMode["Single"] = 0] = "Single";
+    ValueMode[ValueMode["Multi"] = 1] = "Multi";
+})(ValueMode || (ValueMode = {}));
+export var ActivationTrigger;
+(function (ActivationTrigger) {
+    ActivationTrigger[ActivationTrigger["Pointer"] = 0] = "Pointer";
+    ActivationTrigger[ActivationTrigger["Other"] = 1] = "Other";
+})(ActivationTrigger || (ActivationTrigger = {}));
+export var ActionTypes;
+(function (ActionTypes) {
+    ActionTypes[ActionTypes["OpenListbox"] = 0] = "OpenListbox";
+    ActionTypes[ActionTypes["CloseListbox"] = 1] = "CloseListbox";
+    ActionTypes[ActionTypes["GoToOption"] = 2] = "GoToOption";
+    ActionTypes[ActionTypes["Search"] = 3] = "Search";
+    ActionTypes[ActionTypes["ClearSearch"] = 4] = "ClearSearch";
+    ActionTypes[ActionTypes["SelectOption"] = 5] = "SelectOption";
+    ActionTypes[ActionTypes["RegisterOptions"] = 6] = "RegisterOptions";
+    ActionTypes[ActionTypes["UnregisterOptions"] = 7] = "UnregisterOptions";
+    ActionTypes[ActionTypes["SetOptionsTop"] = 8] = "SetOptionsTop";
+})(ActionTypes || (ActionTypes = {}));
+let reducers = {
+    [ActionTypes.CloseListbox](state) {
+        if (state.dataRef.current.disabled)
+            return state;
+        if (state.listboxState === ListboxStates.Closed)
+            return state;
+        return {
+            ...state,
+            activeOptionIndex: null,
+            pendingFocus: { focus: Focus.Nothing },
+            listboxState: ListboxStates.Closed,
+        };
+    },
+    [ActionTypes.OpenListbox](state, action) {
+        if (state.dataRef.current.disabled)
+            return state;
+        if (state.listboxState === ListboxStates.Open)
+            return state;
+        // Check if we have a selected value that we can make active
+        let activeOptionIndex = state.activeOptionIndex;
+        let { isSelected } = state.dataRef.current;
+        let optionIdx = state.options.findIndex((option) => isSelected(option.dataRef.current.value));
+        if (optionIdx !== -1) {
+            activeOptionIndex = optionIdx;
+        }
+        return {
+            ...state,
+            frozenValue: false,
+            pendingFocus: action.focus,
+            listboxState: ListboxStates.Open,
+            activeOptionIndex,
+        };
+    },
+    [ActionTypes.GoToOption](state, action) {
+        if (state.dataRef.current.disabled)
+            return state;
+        if (state.listboxState === ListboxStates.Closed)
+            return state;
+        let base = {
+            ...state,
+            searchQuery: '',
+            activationTrigger: action.trigger ?? ActivationTrigger.Other,
+        };
+        // There is no need to look at the options if we know that we don't want to focus anything
+        if (action.focus === Focus.Nothing) {
+            return {
+                ...base,
+                activeOptionIndex: null,
+            };
+        }
+        // There is no need to look at the options if we know exactly where to go
+        if (action.focus === Focus.Specific) {
+            return {
+                ...base,
+                activeOptionIndex: state.options.findIndex((o) => o.id === action.id),
+            };
+        }
+        let activeOptionIndex = calculateActiveIndex(action, {
+            resolveItems: () => state.options,
+            resolveActiveIndex: () => state.activeOptionIndex,
+            resolveId: (option) => option.id,
+            resolveDisabled: (option) => option.dataRef.current.disabled,
+        });
+        return {
+            ...base,
+            activeOptionIndex,
+        };
+    },
+    [ActionTypes.Search]: (state, action) => {
+        if (state.dataRef.current.disabled)
+            return state;
+        if (state.listboxState === ListboxStates.Closed)
+            return state;
+        let wasAlreadySearching = state.searchQuery !== '';
+        let searchQuery = state.searchQuery + action.value.toLowerCase();
+        let matchIdx = findSearchMatchIndex(state.options, state.activeOptionIndex, wasAlreadySearching, (option) => !option.dataRef.current.disabled &&
+            !!option.dataRef.current.textValue?.startsWith(searchQuery));
+        if (matchIdx === -1 || matchIdx === state.activeOptionIndex)
+            return { ...state, searchQuery };
+        return {
+            ...state,
+            searchQuery,
+            activeOptionIndex: matchIdx,
+            activationTrigger: ActivationTrigger.Other,
+        };
+    },
+    [ActionTypes.ClearSearch](state) {
+        if (state.dataRef.current.disabled)
+            return state;
+        if (state.listboxState === ListboxStates.Closed)
+            return state;
+        if (state.searchQuery === '')
+            return state;
+        return { ...state, searchQuery: '' };
+    },
+    [ActionTypes.SelectOption](state) {
+        if (state.dataRef.current.mode === ValueMode.Single) {
+            // The moment you select a value in single value mode, we want to close
+            // the listbox and freeze the value to prevent UI flicker.
+            return { ...state, frozenValue: true };
+        }
+        // In multi-value mode there is no state change, but the event listener for
+        // `SelectOption` must still run, so a new object is returned.
+        return { ...state };
+    },
+    [ActionTypes.RegisterOptions]: (state, action) => {
+        let options = sortByOrder(state.options.concat(action.options));
+        // Sorting can move the active option, so look it up again.
+        let activeOptionIndex = findActiveIndex(state.options, state.activeOptionIndex, options);
+        if (state.pendingFocus.focus !== Focus.Nothing) {
+            activeOptionIndex = calculateActiveIndex(state.pendingFocus, {
+                resolveItems: () => options,
+                resolveActiveIndex: () => state.activeOptionIndex,
+                resolveId: (item) => item.id,
+                resolveDisabled: (item) => item.dataRef.current.disabled,
+            });
+        }
+        // Check if we need to make the newly registered option active.
+        if (state.activeOptionIndex === null) {
+            let { isSelected } = state.dataRef.current;
+            if (isSelected) {
+                let idx = options.findIndex((option) => isSelected?.(option.dataRef.current.value));
+                if (idx !== -1)
+                    activeOptionIndex = idx;
+            }
+        }
+        return {
+            ...state,
+            options,
+            activeOptionIndex,
+            pendingFocus: { focus: Focus.Nothing },
+        };
+    },
+    [ActionTypes.SetOptionsTop]: (state, action) => {
+        let options = placeAtTops(state.options, action.tops);
+        if (!options)
+            return state;
+        return {
+            ...state,
+            options,
+            activeOptionIndex: findActiveIndex(state.options, state.activeOptionIndex, options),
+        };
+    },
+    [ActionTypes.UnregisterOptions]: (state, action) => {
+        let options = state.options;
+        let idxs = [];
+        let ids = new Set(action.options);
+        for (let [idx, option] of options.entries()) {
+            if (ids.has(option.id)) {
+                idxs.push(idx);
+                ids.delete(option.id);
+                if (ids.size === 0)
+                    break;
+            }
+        }
+        if (idxs.length > 0) {
+            options = options.slice();
+            for (let idx of idxs.reverse()) {
+                options.splice(idx, 1);
+            }
+        }
+        return {
+            ...state,
+            options,
+            activeOptionIndex: findActiveIndex(state.options, state.activeOptionIndex, options),
+            activationTrigger: ActivationTrigger.Other,
+        };
+    },
+};
+export class ListboxMachine extends Machine {
+    static new({ id }) {
+        return new ListboxMachine({
+            id,
+            // @ts-expect-error TODO: Re-structure such that we don't need to ignore this
+            dataRef: { current: {} },
+            listboxState: ListboxStates.Closed,
+            options: [],
+            searchQuery: '',
+            activeOptionIndex: null,
+            activationTrigger: ActivationTrigger.Other,
+            frozenValue: false,
+            pendingFocus: { focus: Focus.Nothing },
+        });
+    }
+    constructor(initialState) {
+        super(initialState);
+        // When the listbox 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.listboxState === ListboxStates.Open) {
+                    this.actions.closeListbox();
+                }
+            }));
+            this.on(ActionTypes.OpenListbox, () => stackMachine.actions.push(id));
+            this.on(ActionTypes.CloseListbox, () => stackMachine.actions.pop(id));
+        }
+        this.on(ActionTypes.SelectOption, (_, action) => {
+            this.actions.onChange(action.value);
+            if (this.state.dataRef.current.mode === ValueMode.Single) {
+                this.actions.closeListbox();
+            }
+        });
+    }
+    actions = {
+        onChange: (newValue) => {
+            let { onChange, compare, mode, value } = this.state.dataRef.current;
+            return match(mode, {
+                [ValueMode.Single]: () => {
+                    return onChange?.(newValue);
+                },
+                [ValueMode.Multi]: () => {
+                    let copy = value.slice();
+                    let idx = copy.findIndex((item) => compare(item, newValue));
+                    if (idx === -1) {
+                        copy.push(newValue);
+                    }
+                    else {
+                        copy.splice(idx, 1);
+                    }
+                    return onChange?.(copy);
+                },
+            });
+        },
+        // Batched version, so the options that mount together are sorted once
+        setOptionTop: batch(() => {
+            let tops = [];
+            return [
+                (id, top) => tops.push({ id, top }),
+                () => this.send({ type: ActionTypes.SetOptionsTop, tops: tops.splice(0) }),
+            ];
+        }),
+        registerOption: batch(() => {
+            let options = [];
+            let seen = new Set();
+            return [
+                (id, dataRef) => {
+                    if (seen.has(dataRef))
+                        return;
+                    seen.add(dataRef);
+                    options.push({ id, dataRef });
+                },
+                () => {
+                    seen.clear();
+                    return this.send({ type: ActionTypes.RegisterOptions, options: options.splice(0) });
+                },
+            ];
+        }),
+        unregisterOption: batch(() => {
+            let options = [];
+            return [
+                (id) => options.push(id),
+                () => {
+                    this.send({ type: ActionTypes.UnregisterOptions, options: options.splice(0) });
+                },
+            ];
+        }),
+        goToOption: batch(() => {
+            let last = null;
+            return [
+                (focus, trigger) => {
+                    last = { type: ActionTypes.GoToOption, ...focus, trigger };
+                },
+                () => last && this.send(last),
+            ];
+        }),
+        closeListbox: () => {
+            this.send({ type: ActionTypes.CloseListbox });
+        },
+        openListbox: (focus) => {
+            this.send({ type: ActionTypes.OpenListbox, focus });
+        },
+        selectActiveOption: () => {
+            if (this.state.activeOptionIndex !== null) {
+                let { dataRef } = this.state.options[this.state.activeOptionIndex];
+                this.actions.selectOption(dataRef.current.value);
+            }
+            else if (this.state.dataRef.current.mode === ValueMode.Single) {
+                this.actions.closeListbox();
+            }
+        },
+        selectOption: (value) => {
+            this.send({ type: ActionTypes.SelectOption, value });
+        },
+        search: (value) => {
+            this.send({ type: ActionTypes.Search, value });
+        },
+        clearSearch: () => {
+            this.send({ type: ActionTypes.ClearSearch });
+        },
+    };
+    selectors = {
+        activeDescendantId(state) {
+            let activeOptionIndex = state.activeOptionIndex;
+            let options = state.options;
+            return activeOptionIndex === null ? undefined : options[activeOptionIndex]?.id;
+        },
+        isActive(state, id) {
+            let activeOptionIndex = state.activeOptionIndex;
+            let options = state.options;
+            return activeOptionIndex !== null ? options[activeOptionIndex]?.id === id : false;
+        },
+        hasFrozenValue(state) {
+            return state.frozenValue;
+        },
+    };
+    reduce(state, action) {
+        return match(action.type, reducers, state, action);
+    }
+}

package/dist/components/listbox/listbox.d.ts

@@ -0,0 +1,53 @@
+import { type ReactNode, type ForwardRefExoticComponent, type RefAttributes } from 'react';
+import { type PressableProps, type ViewProps, type ViewInstance } from 'react-native';
+import { type RenderChildren } from '../../utils/render';
+type ListboxValueContextValue = {
+    disabled: boolean;
+    isSelected(value: unknown): boolean;
+};
+export declare function useListboxValueContext(componentName: string): ListboxValueContextValue;
+type ListboxBaseProps<TValue> = {
+    by?: (a: TValue, b: TValue) => boolean;
+    disabled?: boolean;
+    children?: ReactNode;
+};
+type ListboxSingleProps<TValue> = {
+    multiple?: false;
+    value?: TValue;
+    defaultValue?: TValue;
+    onChange?: (value: TValue) => void;
+};
+type ListboxMultipleProps<TValue> = {
+    multiple: true;
+    value?: TValue[];
+    defaultValue?: TValue[];
+    onChange?: (value: TValue[]) => void;
+};
+export type ListboxProps<TValue> = (ListboxSingleProps<TValue> | ListboxMultipleProps<TValue>) & ListboxBaseProps<TValue>;
+export declare function Listbox<TValue>({ value: controlledValue, defaultValue, onChange, multiple, by, disabled, children, }: ListboxProps<TValue>): import("react").JSX.Element;
+export type ListboxButtonRenderPropArg = {
+    open: boolean;
+    disabled: boolean;
+    active: boolean;
+};
+export type ListboxButtonProps = Omit<PressableProps, 'children' | 'disabled'> & {
+    disabled?: boolean;
+    children?: RenderChildren<ListboxButtonRenderPropArg>;
+};
+export declare const ListboxButton: ForwardRefExoticComponent<ListboxButtonProps & RefAttributes<ViewInstance>>;
+export type ListboxOptionsProps = ViewProps;
+export declare const ListboxOptions: ForwardRefExoticComponent<ListboxOptionsProps & RefAttributes<ViewInstance>>;
+export type ListboxOptionRenderPropArg = {
+    selected: boolean;
+    disabled: boolean;
+    active: boolean;
+};
+export type ListboxOptionProps<TValue> = Omit<PressableProps, 'children' | 'disabled'> & {
+    value: TValue;
+    disabled?: boolean;
+    textValue?: string;
+    order?: number;
+    children?: RenderChildren<ListboxOptionRenderPropArg>;
+};
+export declare function ListboxOption<TValue>({ value, disabled: optionDisabled, textValue, order, children, onPress, onLayout, ...theirProps }: ListboxOptionProps<TValue>): import("react").JSX.Element;
+export {};

package/dist/components/listbox/listbox.js

@@ -0,0 +1,91 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, forwardRef, useContext, useId, } from 'react';
+import { Pressable, View, } from 'react-native';
+import { useControllable } from '../../hooks/use-controllable';
+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 { ListboxStates, ValueMode } from './listbox-machine';
+import { ListboxContext, useListboxMachine, useListboxMachineContext } from './listbox-machine-glue';
+let ListboxValueContext = createContext(null);
+export function useListboxValueContext(componentName) {
+    let context = useContext(ListboxValueContext);
+    if (context === null) {
+        throw new Error(`<${componentName} /> must be rendered inside a <Listbox /> component.`);
+    }
+    return context;
+}
+function defaultCompare(a, b) {
+    return a === b;
+}
+export function Listbox({ value: controlledValue, defaultValue, onChange, multiple = false, by, disabled = false, children, }) {
+    let id = useId();
+    let machine = useListboxMachine({ id });
+    // The controllable value is either a single value or an array, depending on `multiple`.
+    let [value, select] = useControllable(controlledValue, onChange, defaultValue ?? (multiple ? [] : undefined));
+    let compare = (a, b) => by ? by(a, b) : defaultCompare(a, b);
+    let isSelected = (candidate) => multiple
+        ? value.some((item) => compare(item, candidate))
+        : value !== undefined && compare(value, candidate);
+    useIsoMorphicEffect(() => {
+        machine.state.dataRef.current = {
+            value,
+            disabled,
+            mode: multiple ? ValueMode.Multi : ValueMode.Single,
+            onChange: (next) => select(next),
+            compare,
+            isSelected,
+        };
+    });
+    return (_jsx(ListboxContext.Provider, { value: machine, children: _jsx(ListboxValueContext.Provider, { value: { disabled, isSelected }, children: children }) }));
+}
+export const ListboxButton = forwardRef(function ListboxButtonFn(props, ref) {
+    let machine = useListboxMachineContext('ListboxButton');
+    let listbox = useListboxValueContext('ListboxButton');
+    let open = useSlice(machine, (state) => state.listboxState === ListboxStates.Open);
+    let { disabled: buttonDisabled = false, children, onPress, ...theirProps } = props;
+    let disabled = listbox.disabled || buttonDisabled;
+    let handlePress = (event) => {
+        onPress?.(event);
+        if (open) {
+            machine.actions.closeListbox();
+        }
+        else {
+            machine.actions.openListbox({ 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 ListboxOptions = forwardRef(function ListboxOptionsFn(props, ref) {
+    let machine = useListboxMachineContext('ListboxOptions');
+    let open = useSlice(machine, (state) => state.listboxState === ListboxStates.Open);
+    if (!open)
+        return null;
+    return _jsx(View, { ...props, ref: ref });
+});
+export function ListboxOption({ value, disabled: optionDisabled = false, textValue, order, children, onPress, onLayout, ...theirProps }) {
+    let machine = useListboxMachineContext('ListboxOption');
+    let listbox = useListboxValueContext('ListboxOption');
+    let id = useId();
+    let disabled = listbox.disabled || optionDisabled;
+    let dataRef = useLatestValue({ disabled, value, textValue, order });
+    useIsoMorphicEffect(() => {
+        machine.actions.registerOption(id, dataRef);
+        return () => machine.actions.unregisterOption(id);
+    }, [id, machine]);
+    let active = useSlice(machine, (state) => machine.selectors.isActive(state, id));
+    let selected = listbox.isSelected(value);
+    let handlePress = (event) => {
+        onPress?.(event);
+        if (disabled)
+            return;
+        machine.actions.selectOption(value);
+    };
+    let handleLayout = (event) => {
+        onLayout?.(event);
+        machine.actions.setOptionTop(id, event.nativeEvent.layout.y);
+    };
+    return (_jsx(Pressable, { ...theirProps, disabled: disabled, accessibilityRole: "button", accessibilityState: { ...theirProps.accessibilityState, selected, disabled }, onPress: handlePress, onLayout: handleLayout, children: ({ pressed }) => resolveChildren(children, { selected, disabled, active: active || pressed }) }));
+}

package/dist/components/listbox-label/listbox-label.d.ts

@@ -0,0 +1,2 @@
+import { Label } from '../label/label';
+export declare const ListboxLabel: typeof Label;

package/dist/components/listbox-label/listbox-label.js

@@ -0,0 +1,2 @@
+import { Label } from '../label/label';
+export const ListboxLabel = Label;

package/dist/components/listbox-selected-option/listbox-selected-option.d.ts

@@ -0,0 +1,7 @@
+import { type ReactNode } from 'react';
+import { type TextProps } from 'react-native';
+export type ListboxSelectedOptionProps = Omit<TextProps, 'children'> & {
+    options: ReactNode;
+    placeholder?: ReactNode;
+};
+export declare function ListboxSelectedOption({ options, placeholder, ...theirProps }: ListboxSelectedOptionProps): import("react").JSX.Element;

package/dist/components/listbox-selected-option/listbox-selected-option.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Children, isValidElement } from 'react';
+import { Text } from 'react-native';
+import { resolveChildren } from '../../utils/render';
+import { useListboxValueContext } from '../listbox/listbox';
+export function ListboxSelectedOption({ options, placeholder, ...theirProps }) {
+    let listbox = useListboxValueContext('ListboxSelectedOption');
+    let selectedOptions = Children.toArray(options).filter((child) => isValidElement(child) && listbox.isSelected(child.props.value));
+    return (_jsx(Text, { ...theirProps, children: selectedOptions.length > 0
+            ? selectedOptions.map((option) => (_jsx(Text, { children: resolveChildren(option.props.children, {
+                    selected: true,
+                    disabled: option.props.disabled ?? false,
+                    active: false,
+                }) }, option.key)))
+            : placeholder }));
+}

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

@@ -0,0 +1,6 @@
+import { MenuMachine } from './menu-machine';
+export declare const MenuContext: import("react").Context<MenuMachine | null>;
+export declare function useMenuMachineContext(component: string): MenuMachine;
+export declare function useMenuMachine({ id }: {
+    id: string;
+}): MenuMachine;