DisabledReason

Why a row cannot be picked, in a tooltip beside it rather than in the row itself. A reason is a sentence, and a sentence in a menu row would set the width of the whole menu.

import { DisabledReason } from '@basmilius/react-ui';

import { Ellipsis } from 'lucide-react';
import { DisabledReason, IconButton, Menu } from '@basmilius/react-ui';

const pushReason = (): string | null => 'Nothing to push: the branch has no commits the remote lacks.';

export default function DisabledReasonDemo() {
    return (
        <Menu.Root>
            <IconButton icon={Ellipsis} label="Branch actions" render={<Menu.Trigger />} />
            <Menu.Popup>
                <DisabledReason reason={null}>
                    <Menu.Item>Pull</Menu.Item>
                </DisabledReason>
                <DisabledReason reason={pushReason()}>
                    <Menu.Item disabled>Push</Menu.Item>
                </DisabledReason>
            </Menu.Popup>
        </Menu.Root>
    );
}

Open the menu and rest the pointer on Push. A row with nothing in its way (reason={null}) is handed through untouched and carries no tooltip at all, so you can wrap every row the same way and let the reason decide.

Props

Prop	Type
reason	string | null	Required.
children	ReactElement	Required. The row.

DisabledReasonProps is an exported type.