@bareboard/react-native 0.0.0-stage → 0.1.0

package/LICENSE

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2020 Tailwind Labs
+Copyright (c) 2026 bareboard contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,25 @@
-# Temporary Holding Version
+# @bareboard/react-native
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+A set of completely unstyled, fully accessible UI components for React Native, ported from [Headless UI](https://github.com/tailwindlabs/headlessui).
+
+> **Early stage:** `@bareboard/react-native` is experimental and its API may change without notice. Testing on iOS and Android devices is still in progress.
+
+## Installation
+
+```sh
+pnpm add @bareboard/react-native
+```
+
+The package needs `react` and `react-native` in your app. It has no styles: components render your children and accept `style` props.
+
+## Components
+
+`Button`, `Checkbox`, `Combobox`, `Dialog`, `Disclosure`, `Listbox`, `Menu`, `Popover`, `RadioGroup`, `Select`, `Switch`, `Tabs`, `Textarea`, `Transition` and more.
+
+## Limits of the React Native port
+
+Some parts of the Headless UI API, such as positioning with `anchor`, scale transitions and the `as` prop, have no equivalent here. The full list is in the [repository README](https://github.com/jbrxl/bareboard#limits-of-the-react-native-port).
+
+## License
+
+MIT. Copyright (c) 2020 Tailwind Labs, as in the original Headless UI project. Copyright (c) 2026 bareboard contributors.

package/dist/components/button/button.d.ts

@@ -0,0 +1,12 @@
+import { type ForwardRefExoticComponent, type RefAttributes } from 'react';
+import { type PressableProps, type ViewInstance } from 'react-native';
+import { type RenderChildren } from '../../utils/render';
+export type ButtonRenderPropArg = {
+    disabled: boolean;
+    active: boolean;
+};
+export type ButtonProps = Omit<PressableProps, 'children' | 'disabled'> & {
+    disabled?: boolean;
+    children?: RenderChildren<ButtonRenderPropArg>;
+};
+export declare const Button: ForwardRefExoticComponent<ButtonProps & RefAttributes<ViewInstance>>;

package/dist/components/button/button.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { Pressable } from 'react-native';
+import { useDisabled } from '../../internal/disabled';
+import { resolveChildren } from '../../utils/render';
+export const Button = forwardRef(function ButtonFn(props, ref) {
+    let providedDisabled = useDisabled();
+    let { disabled = providedDisabled || false, children, ...theirProps } = props;
+    return (_jsx(Pressable, { ...theirProps, ref: ref, disabled: disabled, accessibilityRole: "button", accessibilityState: { ...theirProps.accessibilityState, disabled }, children: ({ pressed }) => resolveChildren(children, { disabled, active: pressed }) }));
+});

package/dist/components/checkbox/checkbox.d.ts

@@ -0,0 +1,5 @@
+import { type ForwardRefExoticComponent, type RefAttributes } from 'react';
+import { type ViewInstance } from 'react-native';
+import { type ToggleProps } from '../../internal/toggle';
+export type CheckboxProps = Omit<ToggleProps, 'role'>;
+export declare const Checkbox: ForwardRefExoticComponent<CheckboxProps & RefAttributes<ViewInstance>>;

package/dist/components/checkbox/checkbox.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import {} from 'react-native';
+import { Toggle } from '../../internal/toggle';
+export const Checkbox = forwardRef(function CheckboxFn(props, ref) {
+    return _jsx(Toggle, { ...props, ref: ref, role: "checkbox" });
+});

package/dist/components/close-button/close-button.d.ts

@@ -0,0 +1,5 @@
+import { type ForwardRefExoticComponent, type RefAttributes } from 'react';
+import { type ViewInstance } from 'react-native';
+import { type ButtonProps } from '../button/button';
+export type CloseButtonProps = ButtonProps;
+export declare const CloseButton: ForwardRefExoticComponent<CloseButtonProps & RefAttributes<ViewInstance>>;

package/dist/components/close-button/close-button.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import {} from 'react-native';
+import { useClose } from '../../internal/close-provider';
+import { Button } from '../button/button';
+export const CloseButton = forwardRef(function CloseButtonFn(props, ref) {
+    let close = useClose();
+    let { onPress, ...theirProps } = props;
+    let handlePress = (event) => {
+        onPress?.(event);
+        close();
+    };
+    return _jsx(Button, { ...theirProps, ref: ref, onPress: handlePress });
+});

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

@@ -0,0 +1,6 @@
+import { ComboboxMachine } from './combobox-machine';
+export declare const ComboboxContext: import("react").Context<ComboboxMachine<unknown> | null>;
+export declare function useComboboxMachineContext<T>(component: string): ComboboxMachine<T>;
+export declare function useComboboxMachine({ id }: {
+    id: string;
+}): ComboboxMachine<unknown>;

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

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

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

@@ -0,0 +1,143 @@
+import { Machine } from '../../machine';
+import { Focus } from '../../utils/calculate-active-index';
+interface MutableRefObject<T> {
+    current: T;
+}
+export declare enum ComboboxState {
+    Open = 0,
+    Closed = 1
+}
+export declare enum ValueMode {
+    Single = 0,
+    Multi = 1
+}
+export declare enum ActivationTrigger {
+    Pointer = 0,
+    Focus = 1,
+    Other = 2
+}
+export type ComboboxOptionDataRef<T> = MutableRefObject<{
+    disabled: boolean;
+    value: T;
+    order?: number;
+}>;
+export interface State<T> {
+    id: string;
+    dataRef: MutableRefObject<{
+        value: unknown;
+        defaultValue: unknown;
+        disabled: boolean;
+        mode: ValueMode;
+        onChange: (value: T) => void;
+        onClose?: () => void;
+        compare(a: unknown, z: unknown): boolean;
+        isSelected(value: unknown): boolean;
+        virtual: {
+            options: T[];
+            disabled: (value: T) => boolean;
+        } | null;
+        calculateIndex(value: unknown): number;
+    }>;
+    virtual: {
+        options: T[];
+        disabled: (value: T) => boolean;
+    } | null;
+    comboboxState: ComboboxState;
+    defaultToFirstOption: boolean;
+    options: {
+        id: string;
+        top?: number;
+        dataRef: ComboboxOptionDataRef<T>;
+    }[];
+    activeOptionIndex: number | null;
+    activationTrigger: ActivationTrigger;
+    isTyping: boolean;
+}
+export declare enum ActionTypes {
+    OpenCombobox = 0,
+    CloseCombobox = 1,
+    GoToOption = 2,
+    SetTyping = 3,
+    RegisterOption = 4,
+    UnregisterOption = 5,
+    SetOptionsTop = 6,
+    DefaultToFirstOption = 7,
+    SetActivationTrigger = 8,
+    UpdateVirtualConfiguration = 9
+}
+type Actions<T> = {
+    type: ActionTypes.CloseCombobox;
+} | {
+    type: ActionTypes.OpenCombobox;
+} | {
+    type: ActionTypes.GoToOption;
+    focus: Focus.Specific;
+    idx: number;
+    trigger?: ActivationTrigger;
+} | {
+    type: ActionTypes.SetTyping;
+    isTyping: boolean;
+} | {
+    type: ActionTypes.GoToOption;
+    focus: Exclude<Focus, Focus.Specific>;
+    trigger?: ActivationTrigger;
+} | {
+    type: ActionTypes.RegisterOption;
+    payload: {
+        id: string;
+        dataRef: ComboboxOptionDataRef<T>;
+    };
+} | {
+    type: ActionTypes.UnregisterOption;
+    id: string;
+} | {
+    type: ActionTypes.SetOptionsTop;
+    tops: {
+        id: string;
+        top: number;
+    }[];
+} | {
+    type: ActionTypes.DefaultToFirstOption;
+    value: boolean;
+} | {
+    type: ActionTypes.SetActivationTrigger;
+    trigger: ActivationTrigger;
+} | {
+    type: ActionTypes.UpdateVirtualConfiguration;
+    options: T[];
+    disabled: ((value: any) => boolean) | null;
+};
+export declare class ComboboxMachine<T> extends Machine<State<T>, Actions<T>> {
+    static new<T>({ id, virtual, }: {
+        id: string;
+        virtual?: {
+            options: T[];
+            disabled?: (value: T) => boolean;
+        } | null;
+    }): ComboboxMachine<T>;
+    constructor(initialState: State<T>);
+    actions: {
+        onChange: (newValue: T) => void;
+        setOptionTop: (id: string, top: number) => void;
+        registerOption: (id: string, dataRef: ComboboxOptionDataRef<T>) => () => void;
+        goToOption: (focus: {
+            focus: Focus.Specific;
+            idx: number;
+        } | {
+            focus: Exclude<Focus, Focus.Specific>;
+        }, trigger?: ActivationTrigger) => void;
+        setIsTyping: (isTyping: boolean) => void;
+        closeCombobox: () => void;
+        openCombobox: () => void;
+        setActivationTrigger: (trigger: ActivationTrigger) => void;
+        selectActiveOption: () => void;
+    };
+    selectors: {
+        activeDescendantId: (state: State<T>) => string | undefined;
+        activeOptionIndex: (state: State<T>) => number | null;
+        activeOption: (state: State<T>) => T | null;
+        isActive: (state: State<T>, value: T, id: string) => boolean;
+    };
+    reduce(state: Readonly<State<T>>, action: Actions<T>): State<T>;
+}
+export {};

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

@@ -0,0 +1,377 @@
+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';
+export var ComboboxState;
+(function (ComboboxState) {
+    ComboboxState[ComboboxState["Open"] = 0] = "Open";
+    ComboboxState[ComboboxState["Closed"] = 1] = "Closed";
+})(ComboboxState || (ComboboxState = {}));
+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["Focus"] = 1] = "Focus";
+    ActivationTrigger[ActivationTrigger["Other"] = 2] = "Other";
+})(ActivationTrigger || (ActivationTrigger = {}));
+export var ActionTypes;
+(function (ActionTypes) {
+    ActionTypes[ActionTypes["OpenCombobox"] = 0] = "OpenCombobox";
+    ActionTypes[ActionTypes["CloseCombobox"] = 1] = "CloseCombobox";
+    ActionTypes[ActionTypes["GoToOption"] = 2] = "GoToOption";
+    ActionTypes[ActionTypes["SetTyping"] = 3] = "SetTyping";
+    ActionTypes[ActionTypes["RegisterOption"] = 4] = "RegisterOption";
+    ActionTypes[ActionTypes["UnregisterOption"] = 5] = "UnregisterOption";
+    ActionTypes[ActionTypes["SetOptionsTop"] = 6] = "SetOptionsTop";
+    ActionTypes[ActionTypes["DefaultToFirstOption"] = 7] = "DefaultToFirstOption";
+    ActionTypes[ActionTypes["SetActivationTrigger"] = 8] = "SetActivationTrigger";
+    ActionTypes[ActionTypes["UpdateVirtualConfiguration"] = 9] = "UpdateVirtualConfiguration";
+})(ActionTypes || (ActionTypes = {}));
+let reducers = {
+    [ActionTypes.CloseCombobox](state) {
+        if (state.dataRef.current?.disabled)
+            return state;
+        if (state.comboboxState === ComboboxState.Closed)
+            return state;
+        return {
+            ...state,
+            activeOptionIndex: null,
+            comboboxState: ComboboxState.Closed,
+            isTyping: false,
+            // Clear the last known activation trigger. If a user interacts with the combobox using a
+            // pointer and it closes, the next interaction must not inherit that trigger.
+            activationTrigger: ActivationTrigger.Other,
+        };
+    },
+    [ActionTypes.OpenCombobox](state) {
+        if (state.dataRef.current?.disabled)
+            return state;
+        if (state.comboboxState === ComboboxState.Open)
+            return state;
+        // Check if we have a selected value that we can make active. Falsy values such as 0 are valid.
+        let value = state.dataRef.current?.value;
+        if (value !== undefined && value !== null) {
+            let idx = state.dataRef.current.calculateIndex(value);
+            if (idx !== -1) {
+                return {
+                    ...state,
+                    activeOptionIndex: idx,
+                    comboboxState: ComboboxState.Open,
+                };
+            }
+        }
+        return {
+            ...state,
+            comboboxState: ComboboxState.Open,
+        };
+    },
+    [ActionTypes.SetTyping](state, action) {
+        if (state.isTyping === action.isTyping)
+            return state;
+        return { ...state, isTyping: action.isTyping };
+    },
+    [ActionTypes.GoToOption](state, action) {
+        if (state.dataRef.current?.disabled)
+            return state;
+        // Options are only mounted while the combobox is open, so there is nothing to go to when closed
+        if (state.comboboxState === ComboboxState.Closed)
+            return state;
+        if (state.virtual) {
+            let { options, disabled } = state.virtual;
+            let activeOptionIndex = action.focus === Focus.Specific
+                ? action.idx
+                : calculateActiveIndex(action, {
+                    resolveItems: () => options,
+                    resolveActiveIndex: () => state.activeOptionIndex,
+                    resolveDisabled: disabled,
+                    resolveId() {
+                        throw new Error('Function not implemented.');
+                    },
+                });
+            let activationTrigger = action.trigger ?? ActivationTrigger.Other;
+            if (state.activeOptionIndex === activeOptionIndex &&
+                state.activationTrigger === activationTrigger) {
+                return state;
+            }
+            return {
+                ...state,
+                activeOptionIndex,
+                activationTrigger,
+                isTyping: false,
+            };
+        }
+        // Like the listbox and the menu, a `null` active option starts from the edge: Next goes to the
+        // first option and Previous to the last, as on the web.
+        let activeOptionIndex = action.focus === Focus.Specific
+            ? action.idx
+            : calculateActiveIndex(action, {
+                resolveItems: () => state.options,
+                resolveActiveIndex: () => state.activeOptionIndex,
+                resolveId: (item) => item.id,
+                resolveDisabled: (item) => item.dataRef.current.disabled,
+            });
+        let activationTrigger = action.trigger ?? ActivationTrigger.Other;
+        if (state.activeOptionIndex === activeOptionIndex &&
+            state.activationTrigger === activationTrigger) {
+            return state;
+        }
+        return {
+            ...state,
+            isTyping: false,
+            activeOptionIndex,
+            activationTrigger,
+        };
+    },
+    [ActionTypes.RegisterOption]: (state, action) => {
+        let options = sortByOrder([...state.options, action.payload]);
+        // Sorting can move the active option, so look it up again.
+        let activeOptionIndex = findActiveIndex(state.options, state.activeOptionIndex, options);
+        // Check if we need to make the newly registered option active.
+        if (state.activeOptionIndex === null) {
+            if (state.dataRef.current.isSelected?.(action.payload.dataRef.current.value)) {
+                activeOptionIndex = options.indexOf(action.payload);
+            }
+        }
+        return {
+            ...state,
+            options,
+            activeOptionIndex,
+            activationTrigger: ActivationTrigger.Other,
+        };
+    },
+    [ActionTypes.UnregisterOption]: (state, action) => {
+        let options = state.options.filter((option) => option.id !== action.id);
+        return {
+            ...state,
+            options,
+            activeOptionIndex: findActiveIndex(state.options, state.activeOptionIndex, options),
+            activationTrigger: ActivationTrigger.Other,
+        };
+    },
+    [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.DefaultToFirstOption]: (state, action) => {
+        if (state.defaultToFirstOption === action.value)
+            return state;
+        return {
+            ...state,
+            defaultToFirstOption: action.value,
+        };
+    },
+    [ActionTypes.SetActivationTrigger]: (state, action) => {
+        if (state.activationTrigger === action.trigger) {
+            return state;
+        }
+        return {
+            ...state,
+            activationTrigger: action.trigger,
+        };
+    },
+    [ActionTypes.UpdateVirtualConfiguration]: (state, action) => {
+        if (state.virtual === null) {
+            return {
+                ...state,
+                virtual: { options: action.options, disabled: action.disabled ?? (() => false) },
+            };
+        }
+        if (state.virtual.options === action.options && state.virtual.disabled === action.disabled) {
+            return state;
+        }
+        let adjustedActiveOptionIndex = state.activeOptionIndex;
+        if (state.activeOptionIndex !== null) {
+            let idx = action.options.indexOf(state.virtual.options[state.activeOptionIndex]);
+            if (idx !== -1) {
+                adjustedActiveOptionIndex = idx;
+            }
+            else {
+                adjustedActiveOptionIndex = null;
+            }
+        }
+        return {
+            ...state,
+            activeOptionIndex: adjustedActiveOptionIndex,
+            virtual: { options: action.options, disabled: action.disabled ?? (() => false) },
+        };
+    },
+};
+export class ComboboxMachine extends Machine {
+    static new({ id, virtual = null, }) {
+        return new ComboboxMachine({
+            id,
+            // @ts-expect-error TODO: Re-structure such that we don't need to ignore this
+            dataRef: { current: {} },
+            comboboxState: ComboboxState.Closed,
+            isTyping: false,
+            options: [],
+            virtual: virtual
+                ? { options: virtual.options, disabled: virtual.disabled ?? (() => false) }
+                : null,
+            activeOptionIndex: null,
+            activationTrigger: ActivationTrigger.Other,
+            defaultToFirstOption: false,
+        });
+    }
+    constructor(initialState) {
+        super(initialState);
+        // When the combobox 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.comboboxState === ComboboxState.Open) {
+                    this.actions.closeCombobox();
+                }
+            }));
+            this.on(ActionTypes.OpenCombobox, () => stackMachine.actions.push(id));
+            this.on(ActionTypes.CloseCombobox, () => stackMachine.actions.pop(id));
+        }
+    }
+    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: (id, dataRef) => {
+            this.send({ type: ActionTypes.RegisterOption, payload: { id, dataRef } });
+            return () => {
+                // When we are unregistering the currently active option, then we also have to make sure to
+                // reset the `defaultToFirstOption` flag, so that visually something is selected and the next
+                // time you press a key it goes to the proper next or previous option in the list.
+                if (this.state.activeOptionIndex ===
+                    this.state.dataRef.current.calculateIndex(dataRef.current.value)) {
+                    this.send({ type: ActionTypes.DefaultToFirstOption, value: true });
+                }
+                this.send({ type: ActionTypes.UnregisterOption, id });
+            };
+        },
+        goToOption: (focus, trigger) => {
+            this.send({ type: ActionTypes.DefaultToFirstOption, value: false });
+            return this.send({ type: ActionTypes.GoToOption, ...focus, trigger });
+        },
+        setIsTyping: (isTyping) => {
+            this.send({ type: ActionTypes.SetTyping, isTyping });
+        },
+        closeCombobox: () => {
+            this.send({ type: ActionTypes.CloseCombobox });
+            this.send({ type: ActionTypes.DefaultToFirstOption, value: false });
+            this.state.dataRef.current.onClose?.();
+        },
+        openCombobox: () => {
+            this.send({ type: ActionTypes.OpenCombobox });
+            this.send({ type: ActionTypes.DefaultToFirstOption, value: true });
+        },
+        setActivationTrigger: (trigger) => {
+            this.send({ type: ActionTypes.SetActivationTrigger, trigger });
+        },
+        selectActiveOption: () => {
+            let activeOptionIndex = this.selectors.activeOptionIndex(this.state);
+            if (activeOptionIndex === null)
+                return;
+            this.actions.setIsTyping(false);
+            if (this.state.virtual) {
+                this.actions.onChange(this.state.virtual.options[activeOptionIndex]);
+            }
+            else {
+                let { dataRef } = this.state.options[activeOptionIndex];
+                this.actions.onChange(dataRef.current.value);
+            }
+            // It could happen that the `activeOptionIndex` stored in state is actually null, but we are
+            // getting the fallback active option back instead.
+            this.actions.goToOption({ focus: Focus.Specific, idx: activeOptionIndex });
+        },
+    };
+    selectors = {
+        activeDescendantId: (state) => {
+            const activeOptionIndex = this.selectors.activeOptionIndex(state);
+            if (activeOptionIndex === null) {
+                return undefined;
+            }
+            if (!state.virtual) {
+                return state.options[activeOptionIndex]?.id;
+            }
+            return state.options.find((option) => {
+                return (!option.dataRef.current.disabled &&
+                    state.dataRef.current.compare(option.dataRef.current.value, state.virtual.options[activeOptionIndex]));
+            })?.id;
+        },
+        activeOptionIndex: (state) => {
+            if (state.defaultToFirstOption &&
+                state.activeOptionIndex === null &&
+                (state.virtual ? state.virtual.options.length > 0 : state.options.length > 0)) {
+                if (state.virtual) {
+                    let { options, disabled } = state.virtual;
+                    let activeOptionIndex = options.findIndex((option) => !(disabled?.(option) ?? false));
+                    if (activeOptionIndex !== -1) {
+                        return activeOptionIndex;
+                    }
+                }
+                let activeOptionIndex = state.options.findIndex((option) => {
+                    return !option.dataRef.current.disabled;
+                });
+                if (activeOptionIndex !== -1) {
+                    return activeOptionIndex;
+                }
+            }
+            return state.activeOptionIndex;
+        },
+        activeOption: (state) => {
+            let activeOptionIndex = this.selectors.activeOptionIndex(state);
+            return activeOptionIndex === null
+                ? null
+                : state.virtual
+                    ? state.virtual.options[activeOptionIndex ?? 0]
+                    : (state.options[activeOptionIndex]?.dataRef.current.value ?? null);
+        },
+        isActive: (state, value, id) => {
+            let activeOptionIndex = this.selectors.activeOptionIndex(state);
+            if (activeOptionIndex === null)
+                return false;
+            if (state.virtual) {
+                return activeOptionIndex === state.dataRef.current.calculateIndex(value);
+            }
+            return state.options[activeOptionIndex]?.id === id;
+        },
+    };
+    reduce(state, action) {
+        return match(action.type, reducers, state, action);
+    }
+}