sheer-ui 0.4.2 → 0.5.0

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

@@ -1,371 +0,0 @@
-import { attachRef, type ReadableBoxedValues } from '../../internal/tools/index.js';
-import { createContext, onDestroy, untrack } from 'svelte';
-import { createBitsAttrs, boolToStr, getDataOpenClosed, boolToEmptyStrOrUndef } from '../../internal/attrs.js';
-import type { BitsKeyboardEvent, BitsMouseEvent, OnChangeFn, RefAttachment, WithRefOpts } from '../../internal/types.js';
-import { kbd } from '../../internal/kbd.js';
-import { useOpenChangeComplete } from '../../internal/animations-settled.svelte.js';
-
-type DialogVariant = 'alert-dialog' | 'dialog';
-
-const dialogAttrs = createBitsAttrs({
-	component: 'dialog',
-	parts: ['content', 'trigger', 'overlay', 'title', 'description', 'close', 'cancel', 'action'],
-});
-
-const [getDialogRoot, setDialogRoot, hasDialogRoot] = createContext<DialogRootState>();
-
-// The dialog's public state cell is the shared overlay OpenCell (internal/open-cell.svelte.ts),
-// exported under its established dialog-facing name.
-import { OpenCell as DialogState } from '../../internal/open-cell.svelte.js';
-export { DialogState };
-
-interface DialogRootStateOpts
-	extends ReadableBoxedValues<{
-		variant: DialogVariant;
-		onOpenChangeComplete: OnChangeFn<boolean>;
-	}> {
-	cell: DialogState;
-}
-
-export class DialogRootState {
-	static create(opts: DialogRootStateOpts) {
-		const parent = hasDialogRoot() ? getDialogRoot() : null;
-		return setDialogRoot(new DialogRootState(opts, parent));
-	}
-
-	readonly opts: DialogRootStateOpts;
-	readonly cell: DialogState;
-	triggerNode = $state<HTMLElement | null>(null);
-	contentNode = $state<HTMLElement | null>(null);
-	descriptionNode = $state<HTMLElement | null>(null);
-	contentId = $state<string | undefined>(undefined);
-	triggerId = $state<string | undefined>(undefined);
-	titleState = $state<DialogTitleState | null>(null);
-	descriptionState = $state<DialogDescriptionState | null>(null);
-	readonly titleId = $derived.by(() => this.titleState?.opts.id.current);
-	readonly descriptionId = $derived.by(() => this.descriptionState?.opts.id.current);
-	cancelNode = $state<HTMLElement | null>(null);
-	nestedOpenCount = $state(0);
-	readonly depth: number;
-	readonly parent: DialogRootState | null;
-	readonly #completion: { readonly pending: boolean };
-	/** Rendered: open, or closing with the exit still settling — the window the headless content's scroll lock covers. */
-	readonly present = $derived.by(() => this.cell.open || this.#completion.pending);
-
-	constructor(opts: DialogRootStateOpts, parent: DialogRootState | null) {
-		this.opts = opts;
-		this.cell = opts.cell;
-		this.parent = parent;
-		this.depth = parent ? parent.depth + 1 : 0;
-		this.handleOpen = this.handleOpen.bind(this);
-		this.handleClose = this.handleClose.bind(this);
-
-		this.#completion = useOpenChangeComplete(
-			() => this.cell.open,
-			() => this.contentNode,
-			(isOpen) => this.opts.onOpenChangeComplete.current(isOpen),
-		);
-
-		let started = false;
-		$effect(() => {
-			const isOpen = this.cell.open;
-			if (!started) {
-				started = true;
-				return;
-			}
-			untrack(() => {
-				if (!this.parent) return;
-				if (isOpen) {
-					this.parent.incrementNested();
-				} else {
-					this.parent.decrementNested();
-				}
-			});
-		});
-
-		onDestroy(() => {
-			if (this.cell.open) {
-				this.parent?.decrementNested();
-			}
-		});
-	}
-
-	handleOpen() {
-		this.cell.open = true;
-	}
-
-	handleClose() {
-		this.cell.open = false;
-	}
-
-	getBitsAttr: typeof dialogAttrs.getAttr = (part) => {
-		return dialogAttrs.getAttr(part, this.opts.variant.current);
-	};
-
-	incrementNested() {
-		this.nestedOpenCount++;
-		this.parent?.incrementNested();
-	}
-
-	decrementNested() {
-		if (this.nestedOpenCount === 0) return;
-		this.nestedOpenCount--;
-		this.parent?.decrementNested();
-	}
-
-	readonly sharedProps = $derived.by(
-		() =>
-			({
-				'data-state': getDataOpenClosed(this.cell.open),
-			}) as const,
-	);
-}
-
-interface DialogTriggerStateOpts extends WithRefOpts, ReadableBoxedValues<{ disabled: boolean }> {}
-
-export class DialogTriggerState {
-	static create(opts: DialogTriggerStateOpts) {
-		return new DialogTriggerState(opts, getDialogRoot());
-	}
-
-	readonly opts: DialogTriggerStateOpts;
-	readonly root: DialogRootState;
-	readonly attachment: RefAttachment;
-
-	constructor(opts: DialogTriggerStateOpts, root: DialogRootState) {
-		this.opts = opts;
-		this.root = root;
-		this.attachment = attachRef(this.opts.ref, (v) => {
-			this.root.triggerNode = v;
-			this.root.triggerId = v?.id;
-		});
-		this.onclick = this.onclick.bind(this);
-		this.onkeydown = this.onkeydown.bind(this);
-	}
-
-	onclick(e: BitsMouseEvent) {
-		if (this.opts.disabled.current) return;
-		if (e.button > 0) return;
-		this.root.handleOpen();
-	}
-
-	onkeydown(e: BitsKeyboardEvent) {
-		if (this.opts.disabled.current) return;
-		if (e.key === kbd.SPACE || e.key === kbd.ENTER) {
-			e.preventDefault();
-			this.root.handleOpen();
-		}
-	}
-
-	readonly props = $derived.by(
-		() =>
-			({
-				id: this.opts.id.current,
-				'aria-haspopup': 'dialog',
-				'aria-expanded': boolToStr(this.root.cell.open),
-				'aria-controls': this.root.contentId,
-				[this.root.getBitsAttr('trigger')]: '',
-				onkeydown: this.onkeydown,
-				onclick: this.onclick,
-				disabled: this.opts.disabled.current ? true : undefined,
-				...this.root.sharedProps,
-				...this.attachment,
-			}) as const,
-	);
-}
-
-interface DialogCloseStateOpts extends WithRefOpts, ReadableBoxedValues<{ variant: 'action' | 'cancel' | 'close'; disabled: boolean }> {}
-
-export class DialogCloseState {
-	static create(opts: DialogCloseStateOpts) {
-		return new DialogCloseState(opts, getDialogRoot());
-	}
-
-	readonly opts: DialogCloseStateOpts;
-	readonly root: DialogRootState;
-	readonly attachment: RefAttachment;
-
-	constructor(opts: DialogCloseStateOpts, root: DialogRootState) {
-		this.opts = opts;
-		this.root = root;
-		this.attachment = attachRef(this.opts.ref);
-		this.onclick = this.onclick.bind(this);
-		this.onkeydown = this.onkeydown.bind(this);
-	}
-
-	onclick(e: BitsMouseEvent) {
-		if (this.opts.disabled.current) return;
-		if (e.button > 0) return;
-		this.root.handleClose();
-	}
-
-	onkeydown(e: BitsKeyboardEvent) {
-		if (this.opts.disabled.current) return;
-		if (e.key === kbd.SPACE || e.key === kbd.ENTER) {
-			e.preventDefault();
-			this.root.handleClose();
-		}
-	}
-
-	readonly props = $derived.by(
-		() =>
-			({
-				id: this.opts.id.current,
-				[this.root.getBitsAttr(this.opts.variant.current)]: '',
-				onclick: this.onclick,
-				onkeydown: this.onkeydown,
-				disabled: this.opts.disabled.current ? true : undefined,
-				tabindex: 0,
-				...this.root.sharedProps,
-				...this.attachment,
-			}) as const,
-	);
-}
-
-interface DialogTitleStateOpts extends WithRefOpts, ReadableBoxedValues<{ level: 1 | 2 | 3 | 4 | 5 | 6 }> {}
-
-export class DialogTitleState {
-	static create(opts: DialogTitleStateOpts) {
-		return new DialogTitleState(opts, getDialogRoot());
-	}
-
-	readonly opts: DialogTitleStateOpts;
-	readonly root: DialogRootState;
-	readonly attachment: RefAttachment;
-
-	constructor(opts: DialogTitleStateOpts, root: DialogRootState) {
-		this.opts = opts;
-		this.root = root;
-		this.root.titleState = this;
-		this.attachment = attachRef(this.opts.ref);
-	}
-
-	readonly props = $derived.by(
-		() =>
-			({
-				id: this.opts.id.current,
-				role: 'heading',
-				'aria-level': this.opts.level.current,
-				[this.root.getBitsAttr('title')]: '',
-				...this.root.sharedProps,
-				...this.attachment,
-			}) as const,
-	);
-}
-
-interface DialogDescriptionStateOpts extends WithRefOpts {}
-
-export class DialogDescriptionState {
-	static create(opts: DialogDescriptionStateOpts) {
-		return new DialogDescriptionState(opts, getDialogRoot());
-	}
-
-	readonly opts: DialogDescriptionStateOpts;
-	readonly root: DialogRootState;
-	readonly attachment: RefAttachment;
-
-	constructor(opts: DialogDescriptionStateOpts, root: DialogRootState) {
-		this.opts = opts;
-		this.root = root;
-		this.root.descriptionState = this;
-		this.attachment = attachRef(this.opts.ref, (v) => {
-			this.root.descriptionNode = v;
-		});
-	}
-
-	readonly props = $derived.by(
-		() =>
-			({
-				id: this.opts.id.current,
-				[this.root.getBitsAttr('description')]: '',
-				...this.root.sharedProps,
-				...this.attachment,
-			}) as const,
-	);
-}
-
-interface DialogContentStateOpts extends WithRefOpts {}
-
-export class DialogContentState {
-	static create(opts: DialogContentStateOpts) {
-		return new DialogContentState(opts, getDialogRoot());
-	}
-
-	readonly opts: DialogContentStateOpts;
-	readonly root: DialogRootState;
-	readonly attachment: RefAttachment;
-
-	constructor(opts: DialogContentStateOpts, root: DialogRootState) {
-		this.opts = opts;
-		this.root = root;
-		this.attachment = attachRef(this.opts.ref, (v) => {
-			this.root.contentNode = v;
-			this.root.contentId = v?.id;
-		});
-	}
-
-	readonly snippetProps = $derived.by(() => ({ open: this.root.cell.open }));
-
-	readonly props = $derived.by(
-		() =>
-			({
-				id: this.opts.id.current,
-				role: this.root.opts.variant.current === 'alert-dialog' ? 'alertdialog' : 'dialog',
-				'aria-modal': 'true',
-				'aria-describedby': this.root.descriptionId,
-				'aria-labelledby': this.root.titleId,
-				[this.root.getBitsAttr('content')]: '',
-				style: {
-					pointerEvents: 'auto',
-					outline: this.root.opts.variant.current === 'alert-dialog' ? 'none' : undefined,
-					'--bits-dialog-depth': this.root.depth,
-					'--bits-dialog-nested-count': this.root.nestedOpenCount,
-					// CSS containment isolates style/layout calculations from the rest of the page,
-					// improving performance when there's a large DOM behind the dialog.
-					// Paint is omitted so tooltips/selects can render outside dialog bounds.
-					contain: 'layout style',
-				},
-				tabindex: this.root.opts.variant.current === 'alert-dialog' ? -1 : undefined,
-				'data-nested-open': boolToEmptyStrOrUndef(this.root.nestedOpenCount > 0),
-				'data-nested': boolToEmptyStrOrUndef(this.root.parent !== null),
-				...this.root.sharedProps,
-				...this.attachment,
-			}) as const,
-	);
-}
-
-interface DialogOverlayStateOpts extends WithRefOpts {}
-
-export class DialogOverlayState {
-	static create(opts: DialogOverlayStateOpts) {
-		return new DialogOverlayState(opts, getDialogRoot());
-	}
-
-	readonly opts: DialogOverlayStateOpts;
-	readonly root: DialogRootState;
-	readonly attachment: RefAttachment;
-	constructor(opts: DialogOverlayStateOpts, root: DialogRootState) {
-		this.opts = opts;
-		this.root = root;
-		this.attachment = attachRef(this.opts.ref);
-	}
-
-	readonly snippetProps = $derived.by(() => ({ open: this.root.cell.open }));
-
-	readonly props = $derived.by(
-		() =>
-			({
-				id: this.opts.id.current,
-				[this.root.getBitsAttr('overlay')]: '',
-				style: {
-					pointerEvents: 'auto',
-					'--bits-dialog-depth': this.root.depth,
-					'--bits-dialog-nested-count': this.root.nestedOpenCount,
-				},
-				'data-nested-open': boolToEmptyStrOrUndef(this.root.nestedOpenCount > 0),
-				'data-nested': boolToEmptyStrOrUndef(this.root.parent !== null),
-				...this.root.sharedProps,
-				...this.attachment,
-			}) as const,
-	);
-}

package/src/lib/components/dialog/index.ts

@@ -1,19 +0,0 @@
-export { default as Root } from './components/dialog.svelte';
-export { default as Title } from './components/dialog-title.svelte';
-export { default as Close } from './components/dialog-close.svelte';
-export { default as Portal } from '../../internal/portal/portal.svelte';
-export { default as Content } from './components/dialog-content.svelte';
-export { default as Overlay } from './components/dialog-overlay.svelte';
-export { default as Trigger } from './components/dialog-trigger.svelte';
-export { default as Description } from './components/dialog-description.svelte';
-
-export type {
-	DialogRootProps as RootProps,
-	DialogTitleProps as TitleProps,
-	DialogCloseProps as CloseProps,
-	DialogPortalProps as PortalProps,
-	DialogContentProps as ContentProps,
-	DialogOverlayProps as OverlayProps,
-	DialogTriggerProps as TriggerProps,
-	DialogDescriptionProps as DescriptionProps,
-} from './types.js';

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

@@ -1,105 +0,0 @@
-import type { EscapeLayerProps } from "../../internal/escape-layer/types.js";
-import type { DismissibleLayerProps } from "../../internal/dismissible-layer/types.js";
-import type { PresenceProps } from "../../internal/types.js";
-import type { FocusScopeProps } from "../../internal/focus-scope/types.js";
-import type { TextSelectionGuardProps } from "../../internal/types.js";
-import type { ScrollLockProps } from "../../internal/body-scroll-lock.svelte.js";
-import type { Snippet } from "svelte";
-import type {
-	OnChangeFn,
-	WithChild,
-	WithChildNoChildrenSnippetProps,
-	Without,
-} from "../../internal/types.js";
-import type {
-	BitsPrimitiveButtonAttributes,
-	BitsPrimitiveDivAttributes,
-} from "../../internal/attribute-types.js";
-import type { PortalProps } from "../../internal/portal/index.js";
-import type { DialogState } from "./dialog.svelte.js";
-
-export type DialogRootPropsWithoutHTML = {
-	/**
-	 * The derivation source for the dialog's open state: the internal cell
-	 * re-derives whenever this prop changes, and interactions (trigger, Escape,
-	 * a snippet-cell write) override it until the next change. Reconcile
-	 * dismissals via onOpenChangeComplete. Plain value — not bindable.
-	 */
-	open?: boolean;
-
-	/**
-	 * A callback called when the dialog finishes opening/closing animations.
-	 * This is an occurrence (animation settled), not a state mirror — use it
-	 * for dismissal-is-navigation flows, not to track `open` (depend on the
-	 * cell instead).
-	 */
-	onOpenChangeComplete?: OnChangeFn<boolean>;
-
-	/**
-	 * A caller-constructed cell (own source and, optionally, a delegate writer)
-	 * used instead of building one from `open`. When given, `open` is ignored.
-	 */
-	state?: DialogState;
-
-	/** Children receive the state cell, typed and guaranteed within the tree. */
-	children?: Snippet<[DialogState]>;
-};
-
-export type DialogRootProps = DialogRootPropsWithoutHTML;
-
-export type DialogContentSnippetProps = {
-	open: boolean;
-};
-
-export type DialogContentPropsWithoutHTML = WithChildNoChildrenSnippetProps<
-	Omit<
-		EscapeLayerProps &
-			Omit<DismissibleLayerProps, "onInteractOutsideStart"> &
-			PresenceProps &
-			FocusScopeProps &
-			TextSelectionGuardProps &
-			ScrollLockProps,
-		"loop"
-	>,
-	DialogContentSnippetProps
->;
-
-export type DialogContentProps = DialogContentPropsWithoutHTML &
-	Without<BitsPrimitiveDivAttributes, DialogContentPropsWithoutHTML>;
-
-export type DialogOverlaySnippetProps = {
-	open: boolean;
-};
-
-export type DialogOverlayPropsWithoutHTML = WithChild<
-	PresenceProps,
-	DialogOverlaySnippetProps
->;
-
-export type DialogOverlayProps = DialogOverlayPropsWithoutHTML &
-	Without<BitsPrimitiveDivAttributes, DialogOverlayPropsWithoutHTML>;
-
-export type DialogPortalPropsWithoutHTML = PortalProps;
-export type DialogPortalProps = DialogPortalPropsWithoutHTML;
-
-export type DialogTriggerPropsWithoutHTML = WithChild;
-
-export type DialogTriggerProps = DialogTriggerPropsWithoutHTML &
-	Without<BitsPrimitiveButtonAttributes, DialogTriggerPropsWithoutHTML>;
-
-export type DialogTitlePropsWithoutHTML = WithChild<{
-	/**
-	 * The heading level of the dialog title.
-	 */
-	level?: 1 | 2 | 3 | 4 | 5 | 6;
-}>;
-
-export type DialogTitleProps = DialogTitlePropsWithoutHTML &
-	Without<BitsPrimitiveDivAttributes, DialogTitlePropsWithoutHTML>;
-
-export type DialogClosePropsWithoutHTML = DialogTriggerPropsWithoutHTML;
-export type DialogCloseProps = DialogTriggerProps;
-
-export type DialogDescriptionPropsWithoutHTML = WithChild;
-export type DialogDescriptionProps = DialogDescriptionPropsWithoutHTML &
-	Without<BitsPrimitiveDivAttributes, DialogDescriptionPropsWithoutHTML>;