sheer-ui 0.4.2 → 0.5.0

package/src/lib/components/menubar/menubar.svelte.ts

@@ -1,395 +0,0 @@
-import { type ReadableBox, attachRef, type ReadableBoxedValues, type WritableBoxedValues } from '../../internal/tools/index.js';
-import type { InteractOutsideBehaviorType } from '../../internal/dismissible-layer/types.js';
-import type { Direction } from '../../internal/index.js';
-import { createBitsAttrs, boolToStr, boolToEmptyStrOrUndef, getDataOpenClosed } from '../../internal/attrs.js';
-import { kbd } from '../../internal/kbd.js';
-import type { OnChangeFn, RefAttachment, WithRefOpts } from '../../internal/types.js';
-import { createContext, onMount, tick, untrack } from 'svelte';
-import type { FocusEventHandler, KeyboardEventHandler, PointerEventHandler } from 'svelte/elements';
-import { getFloatingContentCSSVars } from '../../internal/floating-layer/index.js';
-import { RovingFocusGroup } from '../../internal/roving-focus-group.svelte.js';
-import { RovingFocusItem } from '../../internal/roving-focus-item.svelte.js';
-
-const menubarAttrs = createBitsAttrs({
-	component: 'menubar',
-	parts: ['root', 'trigger', 'content'],
-});
-
-const [getMenubarRoot, setMenubarRoot] = createContext<MenubarRootState>();
-const [getMenubarMenu, setMenubarMenu] = createContext<MenubarMenuState>();
-interface MenubarRootStateOpts
-	extends
-		WithRefOpts,
-		ReadableBoxedValues<{
-			dir: Direction;
-			loop: boolean;
-		}>,
-		WritableBoxedValues<{
-			value: string;
-		}> {}
-
-export class MenubarRootState {
-	static create(opts: MenubarRootStateOpts) {
-		return setMenubarRoot(new MenubarRootState(opts));
-	}
-	readonly opts: MenubarRootStateOpts;
-	readonly rovingFocusGroup: RovingFocusGroup;
-	readonly attachment: RefAttachment;
-	wasOpenedByKeyboard = $state(false);
-	triggerIds = $state<string[]>([]);
-	/** Outgoing menu id when swapping to another top-level menu... skip exit animation wait only then */
-	skipExitAnimationForMenuValue = $state<string | null>(null);
-	valueToChangeHandler = new Map<string, ReadableBox<OnChangeFn<boolean>>>();
-
-	constructor(opts: MenubarRootStateOpts) {
-		this.opts = opts;
-		this.attachment = attachRef(this.opts.ref);
-		this.rovingFocusGroup = new RovingFocusGroup({
-			rootNode: () => this.opts.ref.current,
-			candidateAttr: menubarAttrs.trigger,
-			loop: () => this.opts.loop.current,
-			orientation: () => 'horizontal',
-		});
-	}
-
-	/**
-	 * @param id - the id of the trigger to register
-	 * @returns - a function to de-register the trigger
-	 */
-	registerTrigger = (id: string) => {
-		this.triggerIds.push(id);
-
-		return () => {
-			this.triggerIds = this.triggerIds.filter((triggerId) => triggerId !== id);
-		};
-	};
-
-	/**
-	 * @param value - the value of the menu to register
-	 * @param contentId - the content id to associate with the value
-	 * @returns - a function to de-register the menu
-	 */
-	registerMenu = (value: string, onOpenChange: ReadableBox<OnChangeFn<boolean>>) => {
-		this.valueToChangeHandler.set(value, onOpenChange);
-
-		return () => {
-			this.valueToChangeHandler.delete(value);
-		};
-	};
-
-	updateValue = (value: string) => {
-		const currValue = this.opts.value.current;
-		const switchingMenus = Boolean(currValue && value && currValue !== value);
-		if (switchingMenus) {
-			this.skipExitAnimationForMenuValue = currValue;
-		}
-		const currHandler = this.valueToChangeHandler.get(currValue)?.current;
-		const nextHandler = this.valueToChangeHandler.get(value)?.current;
-		this.opts.value.current = value;
-		if (currHandler && currValue !== value) {
-			currHandler(false);
-		}
-		if (nextHandler) {
-			nextHandler(true);
-		}
-		if (switchingMenus) {
-			tick().then(() => {
-				this.skipExitAnimationForMenuValue = null;
-			});
-		}
-	};
-
-	getTriggers = () => {
-		const node = this.opts.ref.current;
-		if (!node) return [];
-		return Array.from(node.querySelectorAll<HTMLButtonElement>(menubarAttrs.selector('trigger')));
-	};
-
-	onMenuOpen = (id: string, triggerId: string) => {
-		this.updateValue(id);
-		this.rovingFocusGroup.setCurrentTabStopId(triggerId);
-	};
-
-	onMenuClose = () => {
-		this.updateValue('');
-	};
-
-	onMenuToggle = (id: string) => {
-		this.updateValue(this.opts.value.current ? '' : id);
-	};
-
-	readonly props = $derived.by(
-		() =>
-			({
-				id: this.opts.id.current,
-				role: 'menubar',
-				[menubarAttrs.root]: '',
-				...this.attachment,
-			}) as const,
-	);
-}
-
-interface MenubarMenuStateOpts extends ReadableBoxedValues<{
-	value: string;
-	onOpenChange: OnChangeFn<boolean>;
-}> {}
-
-export class MenubarMenuState {
-	static create(opts: MenubarMenuStateOpts) {
-		return setMenubarMenu(new MenubarMenuState(opts, getMenubarRoot()));
-	}
-
-	readonly opts: MenubarMenuStateOpts;
-	readonly root: MenubarRootState;
-	open = $derived.by(() => this.root.opts.value.current === this.opts.value.current);
-	wasOpenedByKeyboard = false;
-	triggerNode = $state<HTMLElement | null>(null);
-	triggerId = $derived.by(() => this.triggerNode?.id);
-	contentId = $derived.by(() => this.contentNode?.id);
-	contentNode = $state<HTMLElement | null>(null);
-
-	constructor(opts: MenubarMenuStateOpts, root: MenubarRootState) {
-		this.opts = opts;
-		this.root = root;
-
-		$effect(() => {
-			this.open;
-			untrack(() => {
-				if (!this.open) {
-					this.wasOpenedByKeyboard = false;
-				}
-			});
-		});
-
-		onMount(() => {
-			return this.root.registerMenu(this.opts.value.current, opts.onOpenChange);
-		});
-	}
-
-	getTriggerNode() {
-		return this.triggerNode;
-	}
-
-	toggleMenu() {
-		this.root.onMenuToggle(this.opts.value.current);
-	}
-
-	openMenu() {
-		this.root.onMenuOpen(this.opts.value.current, this.triggerNode?.id ?? '');
-	}
-}
-
-interface MenubarTriggerStateOpts
-	extends
-		WithRefOpts,
-		ReadableBoxedValues<{
-			disabled: boolean;
-		}> {}
-
-export class MenubarTriggerState {
-	static create(opts: MenubarTriggerStateOpts) {
-		return new MenubarTriggerState(opts, getMenubarMenu());
-	}
-
-	readonly opts: MenubarTriggerStateOpts;
-	readonly menu: MenubarMenuState;
-	readonly root: MenubarRootState;
-	readonly rovingItem: RovingFocusItem;
-	isFocused = $state(false);
-
-	constructor(opts: MenubarTriggerStateOpts, menu: MenubarMenuState) {
-		this.opts = opts;
-		this.menu = menu;
-		this.root = menu.root;
-		this.rovingItem = new RovingFocusItem({
-			group: this.root.rovingFocusGroup,
-			ref: () => this.opts.ref.current,
-			setRef: (v) => (this.opts.ref.current = v),
-			onRefChange: (v) => (this.menu.triggerNode = v),
-		});
-
-		onMount(() => {
-			return this.root.registerTrigger(opts.id.current);
-		});
-	}
-
-	onpointerdown: PointerEventHandler<HTMLElement> = (e) => {
-		// only call if the left button but not when the CTRL key is pressed
-		if (!this.opts.disabled.current && e.button === 0 && e.ctrlKey === false) {
-			// prevent trigger from focusing when opening
-			// which allows the content to focus without competition
-			if (!this.menu.open) {
-				e.preventDefault();
-			}
-			this.menu.toggleMenu();
-		}
-	};
-
-	onpointerenter: PointerEventHandler<HTMLElement> = () => {
-		const isMenubarOpen = Boolean(this.root.opts.value.current);
-		if (isMenubarOpen && !this.menu.open) {
-			this.menu.openMenu();
-			this.menu.getTriggerNode()?.focus();
-		}
-	};
-
-	onkeydown: KeyboardEventHandler<HTMLElement> = (e) => {
-		if (this.opts.disabled.current) return;
-		if (e.key === kbd.TAB) return;
-		if (e.key === kbd.ENTER || e.key === kbd.SPACE) {
-			this.root.onMenuToggle(this.menu.opts.value.current);
-		}
-		if (e.key === kbd.ARROW_DOWN) {
-			this.menu.openMenu();
-		}
-		// prevent keydown from scrolling window / first focused item
-		// from inadvertently closing the menu
-		if (e.key === kbd.ENTER || e.key === kbd.SPACE || e.key === kbd.ARROW_DOWN) {
-			this.menu.wasOpenedByKeyboard = true;
-			e.preventDefault();
-		}
-
-		this.rovingItem.handleKeydown(e);
-	};
-
-	onfocus: FocusEventHandler<HTMLElement> = () => {
-		this.isFocused = true;
-	};
-
-	onblur: FocusEventHandler<HTMLElement> = () => {
-		this.isFocused = false;
-	};
-
-	readonly props = $derived.by(
-		() =>
-			({
-				type: 'button',
-				role: 'menuitem',
-				id: this.opts.id.current,
-				'aria-haspopup': 'menu',
-				'aria-expanded': boolToStr(this.menu.open),
-				'aria-controls': this.menu.open ? this.menu.contentId : undefined,
-				'data-highlighted': this.isFocused ? '' : undefined,
-				'data-state': getDataOpenClosed(this.menu.open),
-				'data-disabled': boolToEmptyStrOrUndef(this.opts.disabled.current),
-				'data-menu-value': this.menu.opts.value.current,
-				disabled: this.opts.disabled.current ? true : undefined,
-				[menubarAttrs.trigger]: '',
-				onpointerdown: this.onpointerdown,
-				onpointerenter: this.onpointerenter,
-				onkeydown: this.onkeydown,
-				onfocus: this.onfocus,
-				onblur: this.onblur,
-				...this.rovingItem.props,
-			}) as const,
-	);
-}
-
-interface MenubarContentStateOpts
-	extends
-		WithRefOpts,
-		ReadableBoxedValues<{
-			interactOutsideBehavior: InteractOutsideBehaviorType;
-			onOpenAutoFocus: (e: Event) => void;
-			onCloseAutoFocus: (e: Event) => void;
-			onFocusOutside: (e: FocusEvent) => void;
-			onInteractOutside: (e: PointerEvent) => void;
-		}> {}
-
-export class MenubarContentState {
-	static create(opts: MenubarContentStateOpts) {
-		return new MenubarContentState(opts, getMenubarMenu());
-	}
-
-	readonly opts: MenubarContentStateOpts;
-	readonly menu: MenubarMenuState;
-	readonly root: MenubarRootState;
-	readonly attachment: RefAttachment;
-
-	constructor(opts: MenubarContentStateOpts, menu: MenubarMenuState) {
-		this.opts = opts;
-		this.menu = menu;
-		this.root = menu.root;
-		this.attachment = attachRef(this.opts.ref, (v) => (this.menu.contentNode = v));
-	}
-
-	onCloseAutoFocus = (e: Event) => {
-		this.opts.onCloseAutoFocus.current?.(e);
-		if (e.defaultPrevented) return;
-	};
-
-	onFocusOutside = (e: FocusEvent) => {
-		const target = e.target as HTMLElement;
-		const isMenubarTrigger = this.root.getTriggers().some((trigger) => trigger.contains(target));
-		if (isMenubarTrigger) e.preventDefault();
-		this.opts.onFocusOutside.current(e);
-	};
-
-	onInteractOutside = (e: PointerEvent) => {
-		this.opts.onInteractOutside.current(e);
-	};
-
-	onOpenAutoFocus = (e: Event) => {
-		this.opts.onOpenAutoFocus.current(e);
-		if (e.defaultPrevented) return;
-		tick().then(() => this.opts.ref.current?.focus());
-	};
-
-	onkeydown: KeyboardEventHandler<HTMLElement> = (e) => {
-		if (e.key !== kbd.ARROW_LEFT && e.key !== kbd.ARROW_RIGHT) return;
-
-		const target = e.target as HTMLElement;
-		const targetIsSubTrigger = target.hasAttribute('data-menu-sub-trigger');
-		const isKeydownInsideSubMenu = target.closest('[data-menu-content]') !== e.currentTarget;
-
-		const prevMenuKey = this.root.opts.dir.current === 'rtl' ? kbd.ARROW_RIGHT : kbd.ARROW_LEFT;
-		const isPrevKey = prevMenuKey === e.key;
-		const isNextKey = !isPrevKey;
-
-		// prevent navigation when opening a submenu
-		if (isNextKey && targetIsSubTrigger) return;
-		// or if we're inside a submenu and moving back to close it
-		if (isKeydownInsideSubMenu && isPrevKey) return;
-
-		const items = this.root.getTriggers().filter((trigger) => !trigger.disabled);
-		const candidates = items.map((item) => ({
-			value: item.getAttribute('data-menu-value')!,
-			triggerId: item.id ?? '',
-		}));
-		if (isPrevKey) candidates.reverse();
-		const candidateValues = candidates.map(({ value }) => value);
-
-		// use the root's open menu id — during rapid switching, stale content can still be
-		// focused while another menu is already open; per-menu value would navigate from the wrong index
-		const openMenuValue = this.root.opts.value.current;
-		if (!openMenuValue) return;
-		const currentIndex = candidateValues.indexOf(openMenuValue);
-		if (currentIndex === -1) return;
-
-		const nextValue = this.root.opts.loop.current ? candidates[(currentIndex + 1) % candidates.length] : candidates[currentIndex + 1];
-		if (nextValue) {
-			this.menu.root.onMenuOpen(nextValue.value, nextValue.triggerId);
-			e.preventDefault();
-		}
-	};
-
-	props = $derived.by(
-		() =>
-			({
-				id: this.opts.id.current,
-				'aria-labelledby': this.menu.triggerId,
-				style: getFloatingContentCSSVars('menubar'),
-				onkeydown: this.onkeydown,
-				'data-menu-content': '',
-				[menubarAttrs.content]: '',
-				...this.attachment,
-			}) as const,
-	);
-
-	popperProps = {
-		onCloseAutoFocus: this.onCloseAutoFocus,
-		onFocusOutside: this.onFocusOutside,
-		onInteractOutside: this.onInteractOutside,
-		onOpenAutoFocus: this.onOpenAutoFocus,
-	};
-}

package/src/lib/components/menubar/types.ts

@@ -1,97 +0,0 @@
-import type { FloatingLayerArrowPropsWithoutHTML } from "../../internal/floating-layer/types.js";
-import type { MenuArrowProps } from "../menu/types.js";
-import type { OnChangeFn, WithChild, WithChildren, Without } from "../../internal/types.js";
-import type {
-	BitsPrimitiveButtonAttributes,
-	BitsPrimitiveDivAttributes,
-} from "../../internal/attribute-types.js";
-import type { Direction } from "../../internal/index.js";
-
-export type MenubarRootPropsWithoutHTML = WithChild<{
-	/**
-	 * The reading direction of the menubar.
-	 */
-	dir?: Direction;
-
-	/**
-	 * When `true`, the roving focus will loop back to the first menu item when the last
-	 * menu item is reached and vice verse.
-	 */
-	loop?: boolean;
-
-	/**
-	 * The 'value' assigned to the currently active menu in the menubar.
-	 */
-	value?: string;
-
-	/**
-	 * A callback that is called when the active menu changes.
-	 */
-	onValueChange?: OnChangeFn<string>;
-}>;
-
-export type MenubarRootProps = MenubarRootPropsWithoutHTML &
-	Without<BitsPrimitiveDivAttributes, MenubarRootPropsWithoutHTML>;
-
-export type MenubarMenuPropsWithoutHTML = WithChildren<{
-	/**
-	 * The `value` assigned to the menu. Used to programmatically control the menu's open state
-	 * within the menubar.
-	 */
-	value?: string;
-
-	/**
-	 * A callback that is called when the menu is opened or closed.
-	 */
-	onOpenChange?: OnChangeFn<boolean>;
-}>;
-
-export type MenubarMenuProps = MenubarMenuPropsWithoutHTML;
-
-export type MenubarTriggerPropsWithoutHTML = WithChild<{
-	/**
-	 * Whether the trigger for the menubar item is disabled.
-	 *
-	 * @defaultValue false
-	 */
-	disabled?: boolean | null | undefined;
-}>;
-
-export type MenubarTriggerProps = MenubarTriggerPropsWithoutHTML &
-	Without<BitsPrimitiveButtonAttributes, MenubarTriggerPropsWithoutHTML>;
-
-export type {
-	MenuContentPropsWithoutHTML as MenubarContentPropsWithoutHTML,
-	MenuContentProps as MenubarContentProps,
-	MenuContentStaticPropsWithoutHTML as MenubarContentStaticPropsWithoutHTML,
-	MenuContentStaticProps as MenubarContentStaticProps,
-	MenuItemPropsWithoutHTML as MenubarItemPropsWithoutHTML,
-	MenuItemProps as MenubarItemProps,
-	MenuGroupPropsWithoutHTML as MenubarGroupPropsWithoutHTML,
-	MenuGroupProps as MenubarGroupProps,
-	MenuGroupHeadingPropsWithoutHTML as MenubarGroupHeadingPropsWithoutHTML,
-	MenuGroupHeadingProps as MenubarGroupHeadingProps,
-	MenuCheckboxItemPropsWithoutHTML as MenubarCheckboxItemPropsWithoutHTML,
-	MenuCheckboxItemProps as MenubarCheckboxItemProps,
-	MenuRadioGroupPropsWithoutHTML as MenubarRadioGroupPropsWithoutHTML,
-	MenuRadioGroupProps as MenubarRadioGroupProps,
-	MenuRadioItemPropsWithoutHTML as MenubarRadioItemPropsWithoutHTML,
-	MenuRadioItemProps as MenubarRadioItemProps,
-	MenuSeparatorPropsWithoutHTML as MenubarSeparatorPropsWithoutHTML,
-	MenuSeparatorProps as MenubarSeparatorProps,
-	MenuSubContentPropsWithoutHTML as MenubarSubContentPropsWithoutHTML,
-	MenuSubContentProps as MenubarSubContentProps,
-	MenuSubContentStaticPropsWithoutHTML as MenubarSubContentStaticPropsWithoutHTML,
-	MenuSubContentStaticProps as MenubarSubContentStaticProps,
-	MenuSubTriggerPropsWithoutHTML as MenubarSubTriggerPropsWithoutHTML,
-	MenuSubTriggerProps as MenubarSubTriggerProps,
-	MenuSubPropsWithoutHTML as MenubarSubPropsWithoutHTML,
-	MenuPortalPropsWithoutHTML as MenubarPortalPropsWithoutHTML,
-	MenuPortalProps as MenubarPortalProps,
-	MenuCheckboxGroupPropsWithoutHTML as MenubarCheckboxGroupPropsWithoutHTML,
-	MenuCheckboxGroupProps as MenubarCheckboxGroupProps,
-} from "../menu/types.js";
-
-export type MenubarArrowPropsWithoutHTML = FloatingLayerArrowPropsWithoutHTML;
-
-export type MenubarArrowProps = MenuArrowProps;

package/src/lib/components/meter/components/meter.svelte

@@ -1,41 +0,0 @@
-<script lang="ts">
-	import { boxWith } from '../../../internal/tools/index.js';
-	import { mergeProps } from '../../../internal/merge-props.js';
-	import type { MeterRootProps } from '../types.js';
-	import { MeterRootState } from '../meter.svelte.js';
-	import { createId } from '../../../internal/create-id.js';
-
-	const uid = $props.id();
-
-	let {
-		child,
-		children,
-		value = 0,
-		max = 100,
-		min = 0,
-		id = createId(uid),
-		ref = $bindable(null),
-		...restProps
-	}: MeterRootProps = $props();
-
-	const rootState = MeterRootState.create({
-		value: boxWith(() => value),
-		max: boxWith(() => max),
-		min: boxWith(() => min),
-		id: boxWith(() => id),
-		ref: boxWith(
-			() => ref,
-			(v) => (ref = v),
-		),
-	});
-
-	const mergedProps = $derived(mergeProps(restProps, rootState.props));
-</script>
-
-{#if child}
-	{@render child({ props: mergedProps })}
-{:else}
-	<div {...mergedProps}>
-		{@render children?.()}
-	</div>
-{/if}

package/src/lib/components/meter/meter.svelte.ts

@@ -1,47 +0,0 @@
-import { attachRef, type ReadableBoxedValues } from '../../internal/tools/index.js';
-import type { RefAttachment, WithRefOpts } from '../../internal/types.js';
-import { createBitsAttrs } from '../../internal/attrs.js';
-
-const meterAttrs = createBitsAttrs({
-	component: 'meter',
-	parts: ['root'],
-});
-
-interface MeterRootStateOpts
-	extends
-		WithRefOpts,
-		ReadableBoxedValues<{
-			value: number;
-			max: number;
-			min: number;
-		}> {}
-
-export class MeterRootState {
-	static create(opts: MeterRootStateOpts) {
-		return new MeterRootState(opts);
-	}
-
-	readonly opts: MeterRootStateOpts;
-	readonly attachment: RefAttachment;
-
-	constructor(opts: MeterRootStateOpts) {
-		this.opts = opts;
-		this.attachment = attachRef(this.opts.ref);
-	}
-
-	readonly props = $derived.by(
-		() =>
-			({
-				role: 'meter',
-				value: this.opts.value.current,
-				'aria-valuemin': this.opts.min.current,
-				'aria-valuemax': this.opts.max.current,
-				'aria-valuenow': this.opts.value.current,
-				'data-value': this.opts.value.current,
-				'data-max': this.opts.max.current,
-				'data-min': this.opts.min.current,
-				[meterAttrs.root]: '',
-				...this.attachment,
-			}) as const,
-	);
-}

package/src/lib/components/meter/types.ts

@@ -1,28 +0,0 @@
-import type { WithChild, Without } from "../../internal/types.js";
-import type { BitsPrimitiveDivAttributes } from "../../internal/attribute-types.js";
-
-export type MeterRootPropsWithoutHTML = WithChild<{
-	/**
-	 * The current value of the meter.
-	 *
-	 * @default 0
-	 */
-	value?: number;
-
-	/**
-	 * The maximum value of the meter.
-	 *
-	 * @default 100
-	 */
-	max?: number;
-
-	/**
-	 * The minimum value of the meter.
-	 *
-	 * @default 0
-	 */
-	min?: number;
-}>;
-
-export type MeterRootProps = MeterRootPropsWithoutHTML &
-	Without<BitsPrimitiveDivAttributes, MeterRootPropsWithoutHTML>;

package/src/lib/components/navigation-menu/index.ts

@@ -1,28 +0,0 @@
-import Root from './components/navigation-menu.svelte';
-import Content from './components/navigation-menu-content.svelte';
-import Indicator from './components/navigation-menu-indicator.svelte';
-import Item from './components/navigation-menu-item.svelte';
-import Link from './components/navigation-menu-link.svelte';
-import List from './components/navigation-menu-list.svelte';
-import Trigger from './components/navigation-menu-trigger.svelte';
-import Viewport from './components/navigation-menu-viewport.svelte';
-
-export {
-	Root,
-	Content,
-	Indicator,
-	Item,
-	Link,
-	List,
-	Trigger,
-	Viewport,
-	//
-	Root as NavigationMenuRoot,
-	Content as NavigationMenuContent,
-	Indicator as NavigationMenuIndicator,
-	Item as NavigationMenuItem,
-	Link as NavigationMenuLink,
-	List as NavigationMenuList,
-	Trigger as NavigationMenuTrigger,
-	Viewport as NavigationMenuViewport,
-};