Can options and groups by mixed in the options prop?

[acarroll-trend]

The OptionsOrGroups type is typed like

export declare type OptionsOrGroups<Option, Group extends GroupBase<Option>> = readonly (Option | Group)[];

which means that the following is valid

interface TestOption {
    id: number;
    label: string;
}

const testOptions: OptionsOrGroups<TestOption, GroupBase<TestOption>> = [
    { id: 1, label: 'Option 1' },
    {
        label: 'Group 1',
        options: [
            { id: 2, label: 'Option 2' },
            { id: 3, label: 'Option 3' },
        ],
    },
    { id: 4, label: 'Option 4' },
];

I've always assumed (which is why I'm asking), that the options prop must be either options xor groups, not mixed. If that assumption is true, then I think this type is more appropriate.

export declare type OptionsOrGroups<Option, Group extends GroupBase<Option>> = readonly Group[] | readonly Option[];

When we upgraded to v5, usage of our isGrouped type guard broke. The code still works, because our data is guaranteed to be 1 or the other.

export function isGrouped<Option, Group extends GroupBase<Option>>(
    options: OptionsOrGroups<Option, Group>
): options is readonly Group[] {
    return (
        options.length > 0 &&
        (options as readonly Group[])[0].options !== undefined
    );
}

export const createOptionsFilter = <Option, Group extends GroupBase<Option> = GroupBase<Option>>(
    options: OptionsOrGroups<Option, Group>
) => {
    return (filter: Predicate<Option>): Options<Option> => {
        if (!isGrouped(options)) {
            /* The next line results in this error
No overload matches this call.
Overload 1 of 2, '(predicate: (value: Option | Group, index: number, array: readonly (Option | Group)[]) => value is Option, thisArg?: any): Option[]', gave the following error.
    Argument of type 'Predicate<Option>' is not assignable to parameter of type '(value: Option | Group, index: number, array: readonly (Option | Group)[]) => value is Option'.
    Types of parameters 'props' and 'value' are incompatible.
        Type 'Option | Group' is not assignable to type 'Option'.
        'Option' could be instantiated with an arbitrary type which could be unrelated to 'Option | Group'.
Overload 2 of 2, '(predicate: (value: Option | Group, index: number, array: readonly (Option | Group)[]) => unknown, thisArg?: any): (Option | Group)[]', gave the following error.
    Argument of type 'Predicate<Option>' is not assignable to parameter of type '(value: Option | Group, index: number, array: readonly (Option | Group)[]) => unknown'.
    Types of parameters 'props' and 'value' are incompatible.
        Type 'Option | Group' is not assignable to type 'Option'.
        'Option' could be instantiated with an arbitrary type which could be unrelated to 'Option | Group'.
             */
            return options.filter(filter);
        }

        return options.reduce<Options<Option>>((values, group) => {
            return values.concat(group.options.filter(filter));
        }, []);
    };
};

TL;DR Is the type incorrect, or have I been thinking about this incorrectly all along?

[Methuselah96]

They can be mixed in advanced scenarios. See the date picker example and it's corresponding source code.

[acarroll-trend]

Thank you very much!