@1771technologies/lytenyte-pro/dist/components/smart-select/option.js

Blazingly fast headless React data grid with 100s of features.

import { forwardRef } from "react";
import { useSlot } from "../../hooks/use-slot/index.js";
import { useSmartSelect } from "./context.js";
function OptionBase({ render, option, active, selected, closeOnSelect: closeOverride, ...props }, ref) {
    const { onOptionSelect, setActiveId, closeOnSelect, onOpenChange, inputRef } = useSmartSelect();
    const closeOnSelectFinal = closeOverride ?? closeOnSelect;
    const r = useSlot({
        props: [
            {
                "data-ln-selected": selected,
                "data-ln-active": active,
                "data-ln-smart-option": option.id,
                "data-ln-selectable": option.selectable ?? true,
                "data-ln-close-on-select": closeOnSelectFinal,
            },
            {
                onMouseDown: () => {
                    onOptionSelect(option);
                },
                onClick: () => {
                    inputRef.current?.focus();
                    if (closeOnSelectFinal)
                        onOpenChange(false);
                },
                onMouseEnter: () => setActiveId(option.id),
                onMouseLeave: () => setActiveId(null),
            },
            props,
        ],
        ref,
        slot: render,
        state: { option, selected, active },
    });
    return r;
}
export const Option = forwardRef(OptionBase);