sheer-ui 0.0.0

package/src/lib/components/menu/components/menu-sub-content.svelte

@@ -0,0 +1,133 @@
+<script lang="ts">
+	import { boxWith } from '../../../internal/tools/index.js';
+	import { mergeProps } from '../../../internal/merge-props.js';
+	import { tick } from 'svelte';
+	import type { MenuSubContentProps } from '../types.js';
+	import { MenuContentState } from '../menu.svelte.js';
+	import { createSubmenuHandlers } from '../utils.js';
+	import { createId } from '../../../internal/create-id.js';
+	import PopperLayer from '../../../internal/popper-layer/popper-layer.svelte';
+	import { getFloatingContentCSSVars } from '../../../internal/floating-layer/use-floating-layer.svelte.js';
+
+	const uid = $props.id();
+
+	let {
+		id = createId(uid),
+		ref = $bindable(null),
+		children,
+		child,
+		loop = true,
+		isStatic = false,
+		onInteractOutside = () => {},
+		onEscapeKeydown = () => {},
+		interactOutsideBehavior = 'defer-otherwise-close',
+		escapeKeydownBehavior = 'defer-otherwise-close',
+		onOpenAutoFocus: onOpenAutoFocusProp = () => {},
+		onCloseAutoFocus: onCloseAutoFocusProp = () => {},
+		onFocusOutside = () => {},
+		side = 'right',
+		trapFocus = false,
+		style,
+		...restProps
+	}: MenuSubContentProps & { isStatic?: boolean } = $props();
+
+	const subContentState = MenuContentState.create({
+		id: boxWith(() => id),
+		loop: boxWith(() => loop),
+		ref: boxWith(
+			() => ref,
+			(v) => (ref = v),
+		),
+		isSub: true,
+		// svelte-ignore state_referenced_locally -- fixed per instance, like the Static/floating split it selects
+		isStatic,
+		onCloseAutoFocus: boxWith(() => handleCloseAutoFocus),
+	});
+
+	const { onkeydown, handleInteractOutside, handleEscapeKeydown, handleOnFocusOutside } = createSubmenuHandlers(subContentState, {
+		onInteractOutside: () => onInteractOutside,
+		onEscapeKeydown: () => onEscapeKeydown,
+		onFocusOutside: () => onFocusOutside,
+	});
+
+	const dataAttr = $derived(subContentState.parentMenu.root.getBitsAttr('sub-content'));
+
+	const mergedProps = $derived(
+		mergeProps(
+			{
+				'data-slot': 'dropdown-menu-sub-content',
+				class:
+					`bg-popover text-popover-foreground ${isStatic ? 'popup-surface popup-surface-static' : 'popup-surface'} z-50 min-w-32 origin-(--bits-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg`,
+			},
+			restProps,
+			subContentState.props,
+			{
+				onkeydown,
+				[dataAttr]: '',
+			},
+		),
+	);
+
+	function handleOpenAutoFocus(e: Event) {
+		onOpenAutoFocusProp(e);
+		if (e.defaultPrevented) return;
+		// static content is in the DOM before the open pass, so the focus target only
+		// settles a tick later; floating content hands off to the roving group instead
+		if (isStatic) {
+			tick().then(() => {
+				e.preventDefault();
+				if (subContentState.parentMenu.root.isKeyboard) {
+					subContentState.parentMenu.contentNode?.focus();
+				}
+			});
+			return;
+		}
+		e.preventDefault();
+		if (subContentState.parentMenu.root.isKeyboard && subContentState.parentMenu.contentNode) {
+			subContentState.parentMenu.focusFirstItem?.();
+		}
+	}
+
+	function handleCloseAutoFocus(e: Event) {
+		onCloseAutoFocusProp(e);
+		if (e.defaultPrevented) return;
+		e.preventDefault();
+	}
+</script>
+
+<PopperLayer
+	{...mergedProps}
+	{id}
+	{side}
+	ref={subContentState.opts.ref}
+	{interactOutsideBehavior}
+	{escapeKeydownBehavior}
+	onCloseAutoFocus={handleCloseAutoFocus}
+	onOpenAutoFocus={handleOpenAutoFocus}
+	open={subContentState.parentMenu.opts.open.current}
+	onInteractOutside={handleInteractOutside}
+	onEscapeKeydown={handleEscapeKeydown}
+	onFocusOutside={handleOnFocusOutside}
+	preventScroll={false}
+	{isStatic}
+	{loop}
+	{trapFocus}
+	present={subContentState.parentMenu.present}
+>
+	{#snippet popper({ props })}
+		<!-- mergedProps already reached `props` through the layer's restProps, minus the keys
+		PopperLayer destructures for itself (id, dir, style) — only those are re-added, since
+		re-merging the whole bag composes the handlers twice (one keypress, two typeahead steps) -->
+		{@const finalProps = mergeProps(props, { id, dir: mergedProps.dir, style: mergedProps.style }, { style: getFloatingContentCSSVars('menu') }, { style }, { style: subContentState.contentStyle })}
+		{#if child}
+			{@render child({
+				props: finalProps,
+				...subContentState.snippetProps,
+			})}
+		{:else}
+			<div {...finalProps}>
+				{@render children?.()}
+			</div>
+		{/if}
+	{/snippet}
+</PopperLayer>

package/src/lib/components/menu/components/menu-sub-trigger.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+	import { boxWith } from '../../../internal/tools/index.js';
+	import { mergeProps } from '../../../internal/merge-props.js';
+	import type { MenuSubTriggerProps } from '../types.js';
+	import { MenuSubTriggerState } from '../menu.svelte.js';
+	import { floatingAnchor } from '../../../internal/floating-layer/index.js';
+	import { createId } from '../../../internal/create-id.js';
+	import ChevronRightIcon from '@lucide/svelte/icons/chevron-right';
+
+	const uid = $props.id();
+
+	let {
+		id = createId(uid),
+		disabled = false,
+		ref = $bindable(null),
+		children,
+		child,
+		onSelect = () => {},
+		openDelay = 0,
+		inset,
+		...restProps
+	}: MenuSubTriggerProps & {
+		inset?: boolean;
+	} = $props();
+
+	const subTriggerState = MenuSubTriggerState.create({
+		disabled: boxWith(() => disabled),
+		onSelect: boxWith(() => onSelect),
+		id: boxWith(() => id),
+		ref: boxWith(
+			() => ref,
+			(v) => (ref = v),
+		),
+		openDelay: boxWith(() => openDelay),
+	});
+
+	const mergedProps = $derived(
+		mergeProps(
+			{
+				'data-slot': 'dropdown-menu-sub-trigger',
+				'data-inset': inset,
+				class:
+					"data-highlighted:bg-accent data-highlighted:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:ps-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+			},
+			restProps,
+			subTriggerState.props,
+		),
+	);
+
+	const anchor = floatingAnchor();
+</script>
+
+{#if child}
+	{@render child({ props: mergeProps(mergedProps, anchor) })}
+{:else}
+	<div {...mergeProps(mergedProps, anchor)}>
+		{@render children?.()}
+		<ChevronRightIcon class="ms-auto size-4" />
+	</div>
+{/if}

package/src/lib/components/menu/components/menu-sub.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { boxWith } from '../../../internal/tools/index.js';
+	import type { MenuSubProps } from '../types.js';
+	import { MenuSubmenuState } from '../menu.svelte.js';
+	import FloatingLayer from '../../../internal/floating-layer/components/floating-layer.svelte';
+
+	let { open = $bindable(false), onOpenChange = () => {}, onOpenChangeComplete = () => {}, children }: MenuSubProps = $props();
+
+	MenuSubmenuState.create({
+		open: boxWith(
+			() => open,
+			(v) => {
+				open = v;
+				onOpenChange?.(v);
+			},
+		),
+		onOpenChangeComplete: boxWith(() => onOpenChangeComplete),
+	});
+</script>
+
+<FloatingLayer>
+	{@render children?.()}
+</FloatingLayer>

package/src/lib/components/menu/components/menu-trigger.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+	import { boxWith } from '../../../internal/tools/index.js';
+	import { mergeProps } from '../../../internal/merge-props.js';
+	import type { MenuTriggerProps } from '../types.js';
+	import { DropdownMenuTriggerState } from '../menu.svelte.js';
+	import { createId } from '../../../internal/create-id.js';
+	import { floatingAnchor } from '../../../internal/floating-layer/index.js';
+
+	const uid = $props.id();
+
+	let {
+		id = createId(uid),
+		ref = $bindable(null),
+		child,
+		children,
+		disabled = false,
+		type = 'button',
+		...restProps
+	}: MenuTriggerProps = $props();
+
+	const triggerState = DropdownMenuTriggerState.create({
+		id: boxWith(() => id),
+		disabled: boxWith(() => disabled ?? false),
+		ref: boxWith(
+			() => ref,
+			(v) => (ref = v),
+		),
+	});
+
+	const mergedProps = $derived(
+		mergeProps(
+			{
+				'data-slot': 'dropdown-menu-trigger',
+			},
+			restProps,
+			triggerState.props,
+			{ type },
+		),
+	);
+
+	const anchor = floatingAnchor();
+</script>
+
+{#if child}
+	{@render child({ props: mergeProps(mergedProps, anchor) })}
+{:else}
+	<button {...mergeProps(mergedProps, anchor)}>
+		{@render children?.()}
+	</button>
+{/if}

package/src/lib/components/menu/components/menu.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+	import { boxWith } from '../../../internal/tools/index.js';
+	import { OpenCell } from '../../../internal/open-cell.svelte.js';
+	import type { MenuRootProps } from '../types.js';
+	import { MenuMenuState, MenuRootState } from '../menu.svelte.js';
+	import FloatingLayer from '../../../internal/floating-layer/components/floating-layer.svelte';
+
+	let {
+		open = false,
+		dir = 'ltr',
+		// debugMode = false,
+		state: givenCell,
+		onOpenChangeComplete = () => {},
+		_internal_variant: variant = 'dropdown-menu',
+		_internal_should_skip_exit_animation: shouldSkipExitAnimation = undefined,
+		children,
+	}: MenuRootProps & {
+		_internal_variant?: 'context-menu' | 'dropdown-menu' | 'menubar';
+		_internal_should_skip_exit_animation?: () => boolean;
+	} = $props();
+
+	// Root owns both the machinery and the cell; `open` (the prop) is the cell's
+	// derivation source, and the children snippet is the only way the cell leaves.
+	// A caller-built `state` cell (with its own source/writer) takes over both roles.
+	// The cell's identity is fixed at mount — swapping `state` later is not supported.
+	// The engine keeps its boxed-open interface (vendored, ADR 0006); the box is a
+	// bridge over the cell, so the cell stays the one owner of `open`.
+	// svelte-ignore state_referenced_locally
+	const menu = givenCell ?? new OpenCell(() => open);
+
+	const root = MenuRootState.create({
+		variant: boxWith(() => variant),
+		dir: boxWith(() => dir),
+		// debugMode: boxWith(() => debugMode),
+		onClose: () => (menu.open = false),
+		shouldSkipExitAnimation: () => shouldSkipExitAnimation?.() ?? false,
+	});
+
+	MenuMenuState.create(
+		{
+			open: boxWith(
+				() => menu.open,
+				(v) => (menu.open = v),
+			),
+			onOpenChangeComplete: boxWith(() => onOpenChangeComplete),
+		},
+		root,
+	);
+</script>
+
+<svelte:document
+	onkeydowncapture={() => (root.isKeyboard = true)}
+	onpointerdowncapture={() => (root.isKeyboard = false)}
+/>
+
+<FloatingLayer>
+	{@render children?.(menu)}
+</FloatingLayer>

package/src/lib/components/menu/exports.ts

@@ -0,0 +1,38 @@
+export { default as Root } from "./components/menu.svelte";
+export { default as Arrow } from "./components/menu-arrow.svelte";
+export { default as CheckboxGroup } from "./components/menu-checkbox-group.svelte";
+export { default as CheckboxItem } from "./components/menu-checkbox-item.svelte";
+export { default as Content } from "./components/menu-content.svelte";
+export { default as Group } from "./components/menu-group.svelte";
+export { default as Item } from "./components/menu-item.svelte";
+export { default as GroupHeading } from "./components/menu-group-heading.svelte";
+export { default as Portal } from "../../internal/portal/portal.svelte";
+export { default as RadioGroup } from "./components/menu-radio-group.svelte";
+export { default as RadioItem } from "./components/menu-radio-item.svelte";
+export { default as Separator } from "./components/menu-separator.svelte";
+export { default as Sub } from "./components/menu-sub.svelte";
+export { default as SubContent } from "./components/menu-sub-content.svelte";
+export { default as SubTrigger } from "./components/menu-sub-trigger.svelte";
+export { default as Trigger } from "./components/menu-trigger.svelte";
+export { default as SubContentStatic } from "./components/menu-sub-content-static.svelte";
+
+export type {
+	MenuRootPropsWithoutHTML as RootProps,
+	MenuContentProps as ContentProps,
+	MenuContentStaticProps as ContentStaticProps,
+	MenuItemProps as ItemProps,
+	MenuTriggerProps as TriggerProps,
+	MenuSubPropsWithoutHTML as SubProps,
+	MenuSubContentProps as SubContentProps,
+	MenuSubContentStaticProps as SubContentStaticProps,
+	MenuSeparatorProps as SeparatorProps,
+	MenuArrowProps as ArrowProps,
+	MenuCheckboxGroupProps as CheckboxGroupProps,
+	MenuCheckboxItemProps as CheckboxItemProps,
+	MenuGroupHeadingProps as GroupHeadingProps,
+	MenuGroupProps as GroupProps,
+	MenuRadioGroupProps as RadioGroupProps,
+	MenuRadioItemProps as RadioItemProps,
+	MenuSubTriggerProps as SubTriggerProps,
+	MenuPortalProps as PortalProps,
+} from "./types.js";