fix(dropdown-menu, context-menu): keep menu open on CheckboxItem / RadioItem activation

Soma's MenuCheckboxItem / MenuRadioItem default `closeOnSelect=true`
(matches Radix Primitives), but for toggle-state items that's the
wrong UX default — the user wants to flip multiple checkboxes or
switch a radio choice without re-opening the menu each time.

Override the default in the eidos wrappers for both DropdownMenu and
ContextMenu (4 components total: CheckboxItem + RadioItem in each).
Activating Item (plain command) still closes by default; only the
state-toggle parts stay open.

Consumers who genuinely want close-on-toggle can pass
`closeOnSelect={true}` explicitly.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
active-uix
dev 5 months ago
parent 207774714a
commit 2d8599b62f

@ -1,15 +1,21 @@
<script lang="ts"> <script lang="ts">
/**
* Eidos `<ContextMenu.CheckboxItem>`. Defaults
* `closeOnSelect={false}` because a checkbox is a state toggle, not
* a one-shot action. Mirrors DropdownMenu.CheckboxItem.
*/
import * as ContextMenu from '$soma/components/context-menu'; import * as ContextMenu from '$soma/components/context-menu';
import type { ContextMenuCheckboxItemProps } from './types'; import type { ContextMenuCheckboxItemProps } from './types';
let { let {
checked = $bindable(false), checked = $bindable(false),
closeOnSelect = false,
children: bodyContent, children: bodyContent,
...rest ...rest
}: ContextMenuCheckboxItemProps = $props(); }: ContextMenuCheckboxItemProps = $props();
</script> </script>
<ContextMenu.CheckboxItem {...rest} bind:checked> <ContextMenu.CheckboxItem {...rest} {closeOnSelect} bind:checked>
{#snippet children(snippetProps)} {#snippet children(snippetProps)}
{@render bodyContent?.(snippetProps)} {@render bodyContent?.(snippetProps)}
{/snippet} {/snippet}

@ -1,11 +1,20 @@
<script lang="ts"> <script lang="ts">
/**
* Eidos `<ContextMenu.RadioItem>`. Defaults `closeOnSelect={false}`
* — a radio is a state pick within a group. Mirrors
* DropdownMenu.RadioItem.
*/
import * as ContextMenu from '$soma/components/context-menu'; import * as ContextMenu from '$soma/components/context-menu';
import type { ContextMenuRadioItemProps } from './types'; import type { ContextMenuRadioItemProps } from './types';
let { children: bodyContent, ...rest }: ContextMenuRadioItemProps = $props(); let {
closeOnSelect = false,
children: bodyContent,
...rest
}: ContextMenuRadioItemProps = $props();
</script> </script>
<ContextMenu.RadioItem {...rest}> <ContextMenu.RadioItem {...rest} {closeOnSelect}>
{#snippet children(snippetProps)} {#snippet children(snippetProps)}
{@render bodyContent?.(snippetProps)} {@render bodyContent?.(snippetProps)}
{/snippet} {/snippet}

@ -1,15 +1,24 @@
<script lang="ts"> <script lang="ts">
/**
* Eidos `<DropdownMenu.CheckboxItem>`. Defaults
* `closeOnSelect={false}` because a checkbox is a state toggle, not
* a one-shot action — the user typically wants to toggle multiple
* options without having to re-open the menu each time. Pass
* `closeOnSelect` explicitly to override (Radix Primitives leaves
* the close behaviour to the consumer; we pick the saner default).
*/
import * as DropdownMenu from '$soma/components/dropdown-menu'; import * as DropdownMenu from '$soma/components/dropdown-menu';
import type { DropdownMenuCheckboxItemProps } from './types'; import type { DropdownMenuCheckboxItemProps } from './types';
let { let {
checked = $bindable(false), checked = $bindable(false),
closeOnSelect = false,
children: bodyContent, children: bodyContent,
...rest ...rest
}: DropdownMenuCheckboxItemProps = $props(); }: DropdownMenuCheckboxItemProps = $props();
</script> </script>
<DropdownMenu.CheckboxItem {...rest} bind:checked> <DropdownMenu.CheckboxItem {...rest} {closeOnSelect} bind:checked>
{#snippet children(snippetProps)} {#snippet children(snippetProps)}
{@render bodyContent?.(snippetProps)} {@render bodyContent?.(snippetProps)}
{/snippet} {/snippet}

@ -1,11 +1,22 @@
<script lang="ts"> <script lang="ts">
/**
* Eidos `<DropdownMenu.RadioItem>`. Defaults `closeOnSelect={false}`
* — a radio is a state pick within a group, not a one-shot action.
* Most consumers want the user to be able to switch the choice
* without re-opening the menu. Pass `closeOnSelect` explicitly to
* override.
*/
import * as DropdownMenu from '$soma/components/dropdown-menu'; import * as DropdownMenu from '$soma/components/dropdown-menu';
import type { DropdownMenuRadioItemProps } from './types'; import type { DropdownMenuRadioItemProps } from './types';
let { children: bodyContent, ...rest }: DropdownMenuRadioItemProps = $props(); let {
closeOnSelect = false,
children: bodyContent,
...rest
}: DropdownMenuRadioItemProps = $props();
</script> </script>
<DropdownMenu.RadioItem {...rest}> <DropdownMenu.RadioItem {...rest} {closeOnSelect}>
{#snippet children(snippetProps)} {#snippet children(snippetProps)}
{@render bodyContent?.(snippetProps)} {@render bodyContent?.(snippetProps)}
{/snippet} {/snippet}

Loading…
Cancel
Save

Powered by TurnKey Linux.